@po-ui/ng-components 21.33.0-beta.1 → 21.34.0

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

@@ -4693,7 +4693,7 @@ class PoPopupBaseComponent {
         if (!this._actions || this._actions.length === 0) {
             return false;
         }
-        return this._actions.some(action => typeof action.subItems === 'function' ||
+        return this._actions.some(action => typeof action.subItemsLazy === 'function' ||
             (Array.isArray(action.subItems) && action.subItems.length > 0) ||
             !!action.$subItemTemplate);
     }
@@ -4701,9 +4701,7 @@ class PoPopupBaseComponent {
     templateIcon = false;
     /**
      * Lista de ações que serão exibidas no componente.
-     *
-     * Aceita um *array* de `PoPopupAction` (carregado imediatamente) ou uma função que retorna um
-     * `Observable<Array<PoPopupAction>>`, carregando o nível raiz de forma assíncrona na abertura.
+     * Aceita um *array* de `PoPopupAction`.
      */
     set actions(value) {
         if (typeof value === 'function') {
@@ -4868,13 +4866,6 @@ class PoPopupBaseComponent {
     get target() {
         return this._target;
     }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Evento disparado ao fechar o popup.
-     */
     closeEvent = new EventEmitter();
     /**
      * @optional
@@ -4882,29 +4873,21 @@ class PoPopupBaseComponent {
      * @description
      *
      * Evento disparado a cada clique em um item do menu.
-     *
-     * Recebe o item clicado (`PoPopupAction`).
+     * Retorna o item clicado (`PoDropdownAction`).
      *
      * > Não é disparado para a ação interna de voltar (`goBack`).
      */
     clickItem = new EventEmitter();
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Evento disparado ao abrir o popup.
-     */
     openEvent = new EventEmitter();
     /**
      * @optional
      *
      * @description
      *
-     * Evento disparado no momento em que a requisição assíncrona de um subnível é iniciada
-     * (quando `subItems` é definido como função que retorna um `Observable`).
+     * Evento disparado no momento em que a requisição assíncrona de um subnível é iniciada.
+     * Retorna o item agrupador (`PoPopupAction`) que originou o carregamento.
      *
-     * Recebe o item agrupador (`PoPopupAction`) que originou o carregamento.
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
      */
     subItemsLoad = new EventEmitter();
     /**
@@ -4913,7 +4896,8 @@ class PoPopupBaseComponent {
      * @description
      *
      * Evento disparado no momento em que a requisição assíncrona do nível raiz é iniciada
-     * (quando `p-actions` é definido como função que retorna um `Observable`).
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
      */
     rootItemsLoad = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoPopupBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -9601,6 +9585,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
     subItemsSkeletonPlaceholders = Array.from({ length: 3 }, (_, index) => index);
     rootLazyLoad;
     rootItemsLoad = new EventEmitter();
+    contentChange = new EventEmitter();
     loadedSubItems = {};
     lastLoadedGroup = null;
     rootLoaded = false;
@@ -9681,7 +9666,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             items: this.currentItems
         });
         this.currentGroup = group;
-        if (typeof group.subItems === 'function') {
+        if (typeof group.subItemsLazy === 'function') {
             this.loadSubItemsAsync(group, key);
         }
         else {
@@ -9702,11 +9687,12 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         this.lastLoadedGroup = group;
         this.subItemsLoad.emit(group);
         this.focusGroupHeader();
-        const request$ = group.subItems(group);
+        const request$ = group.subItemsLazy(group);
         request$
             .pipe(takeUntil(this.destroySubItems$), finalize(() => {
             this.setSubItemsState(this.subItemsLoading, key, false);
             this.changeDetector.detectChanges();
+            this.contentChange.emit();
         }))
             .subscribe({
             next: subItems => {
@@ -9728,6 +9714,16 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             }
         });
     }
+    onRetryKeydown(event, scope) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (scope === 'root') {
+            this.retryRootItems(event);
+        }
+        else {
+            this.retrySubItems(event);
+        }
+    }
     retrySubItems(event) {
         event?.stopPropagation();
         if (!this.currentGroup) {
@@ -9735,7 +9731,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             return;
         }
         const group = this.lastLoadedGroup;
-        if (!group || typeof group.subItems !== 'function') {
+        if (!group || typeof group.subItemsLazy !== 'function') {
             return;
         }
         const key = this.getGroupKey(group);
@@ -9763,6 +9759,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             .pipe(takeUntil(this.destroySubItems$), finalize(() => {
             this.setSubItemsState(this.subItemsLoading, key, false);
             this.changeDetector.detectChanges();
+            this.contentChange.emit();
         }))
             .subscribe({
             next: items => {
@@ -9799,7 +9796,10 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         return typeof value === 'function';
     }
     isGroupItem(item) {
-        return !!item && (!!item.subItems?.length || typeof item.subItems === 'function');
+        return !!item && (!!item.subItems?.length || typeof item.subItemsLazy === 'function');
+    }
+    hasSubItems(item) {
+        return !!item?.subItems?.length || typeof item?.subItemsLazy === 'function' || !!item?.$subItemTemplate;
     }
     getGroupKey(group) {
         if (!group.$id) {
@@ -9859,6 +9859,9 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
             if (event.code === 'Tab' && !event.shiftKey && currentGroup?.$subItemTemplate) {
                 return;
             }
+            if (!event.shiftKey && currentGroup && this.isSubItemsError(currentGroup)) {
+                return;
+            }
             this.closeEvent.emit();
         }
     }
@@ -9891,9 +9894,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         if (itemListAction?.url && !isDisabled && isVisible) {
             return this.openUrl(itemListAction.url);
         }
-        if (itemListAction?.subItems?.length ||
-            typeof itemListAction?.subItems === 'function' ||
-            itemListAction?.$subItemTemplate) {
+        if (this.hasSubItems(itemListAction)) {
             this.openGroup(itemListAction, event);
         }
         else if (this.listboxSubitems) {
@@ -9931,10 +9932,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         }
     }
     handleArrowRightKey(itemListAction, event) {
-        const hasSubItems = !!itemListAction?.subItems?.length ||
-            typeof itemListAction?.subItems === 'function' ||
-            !!itemListAction?.$subItemTemplate;
-        if (hasSubItems) {
+        if (this.hasSubItems(itemListAction)) {
             this.onSelectItem(itemListAction, event);
         }
     }
@@ -10141,17 +10139,20 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         this.closeEvent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", inputs: { rootLazyLoad: ["p-root-lazy-load", "rootLazyLoad"] }, outputs: { rootItemsLoad: "p-root-items-load" }, viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "listboxGroupHeader", first: true, predicate: ["listboxGroupHeader"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }, { propertyName: "cdkListbox", first: true, predicate: ["listboxItemList"], descendants: true, read: CdkListbox }, { propertyName: "listboxItems", predicate: ["listboxItem"], descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, 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() && !listboxSubitems) {\n    <ul\n      #listboxItemList\n      cdkListbox\n      [cdkListboxMultiple]=\"type === 'check'\"\n      class=\"po-listbox-list\"\n      (focusin)=\"onListboxFocusIn($event)\"\n    >\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          #listboxItem\n          [class.po-listbox-item]=\"visible()\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @if (isRootLoading()) {\n          <div\n            class=\"po-listbox-subitems-loading\"\n            role=\"status\"\n            aria-live=\"polite\"\n            [attr.aria-busy]=\"true\"\n            [attr.aria-label]=\"literals.subItemsLoading\"\n          >\n            @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n              <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n            }\n          </div>\n        } @else if (isRootError()) {\n          <div\n            class=\"po-listbox-subitems-error\"\n            role=\"alert\"\n            aria-live=\"assertive\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n            <po-button\n              class=\"po-listbox-subitems-retry\"\n              [p-label]=\"literals.retry\"\n              p-kind=\"secondary\"\n              [p-size]=\"size\"\n              (click)=\"$event.stopPropagation()\"\n              (p-click)=\"retryRootItems($event)\"\n            ></po-button>\n          </div>\n        } @else {\n          @for (item of currentItems; track item) {\n            <li\n              #listboxItem\n              [class.po-listbox-item]=\"visible()\"\n              [cdkOption]=\"item[fieldLabel]\"\n              [cdkOptionDisabled]=\"\n                returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\n              \"\n              [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n              [attr.aria-expanded]=\"isGroupItem(item) ? currentGroup === item : null\"\n              (click)=\"onSelectItem(item, $event)\"\n              (keydown)=\"onKeyDown(item, $event)\"\n            >\n              @if (item.subItems?.length || isFunction(item.subItems) || item.$subItemTemplate) {\n                <po-item-list\n                  [p-label]=\"item.label\"\n                  [p-item]=\"item\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-icon]=\"item.icon\"\n                  [p-icon-arrow-right]=\"'ICON_ARROW_RIGHT'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                  [p-label]=\"item[fieldLabel]\"\n                  [p-item]=\"item\"\n                  [p-icon]=\"item.icon\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-danger]=\"item.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              }\n            </li>\n          }\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          [attr.aria-busy]=\"isSubItemsLoading(currentGroup) ? 'true' : null\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, currentGroup)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'ICON_ARROW_LEFT'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @if (currentGroup.$subItemTemplate) {\n          <div\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"onKeydownTemplate($event)\"\n            (keydown.space)=\"$event.stopPropagation()\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"currentGroup.$subItemTemplate; context: { $implicit: currentGroup }\"\n            ></ng-container>\n          </div>\n        } @else if (isSubItemsLoading(currentGroup)) {\n          <div\n            class=\"po-listbox-subitems-loading\"\n            role=\"status\"\n            aria-live=\"polite\"\n            [attr.aria-busy]=\"true\"\n            [attr.aria-label]=\"literals.subItemsLoading\"\n          >\n            @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n              <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n            }\n          </div>\n        } @else if (isSubItemsError(currentGroup)) {\n          <div\n            class=\"po-listbox-subitems-error\"\n            role=\"alert\"\n            aria-live=\"assertive\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n            <po-button\n              class=\"po-listbox-subitems-retry\"\n              [p-label]=\"literals.retry\"\n              p-kind=\"secondary\"\n              [p-size]=\"size\"\n              (click)=\"$event.stopPropagation()\"\n              (p-click)=\"retrySubItems($event)\"\n            ></po-button>\n          </div>\n        } @else {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length || isFunction(subItem.subItems)) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'ICON_ARROW_RIGHT'\"\n                  [p-icon-position]=\"'right'\"\n                >\n                </po-item-list>\n              </li>\n            } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                  [p-label]=\"subItem[fieldLabel]\"\n                  [p-item]=\"subItem\"\n                  [p-icon]=\"subItem.icon\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-danger]=\"subItem.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n                >\n                </po-item-list>\n              </li>\n            }\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoSkeletonComponent, selector: "po-skeleton" }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "directive", type: i7.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i7.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: "21.2.25", type: PoListBoxComponent, isStandalone: false, selector: "po-listbox", inputs: { rootLazyLoad: ["p-root-lazy-load", "rootLazyLoad"] }, outputs: { rootItemsLoad: "p-root-items-load", contentChange: "p-content-change" }, viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, static: true }, { propertyName: "listboxItemList", first: true, predicate: ["listboxItemList"], descendants: true }, { propertyName: "listboxGroupHeader", first: true, predicate: ["listboxGroupHeader"], descendants: true }, { propertyName: "searchElement", first: true, predicate: ["searchElement"], descendants: true }, { propertyName: "popupHeaderContainer", first: true, predicate: ["popupHeaderContainer"], descendants: true }, { propertyName: "cdkListbox", first: true, predicate: ["listboxItemList"], descendants: true, read: CdkListbox }, { propertyName: "listboxItems", predicate: ["listboxItem"], descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, 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() && !listboxSubitems) {\n    <ul\n      #listboxItemList\n      cdkListbox\n      [cdkListboxMultiple]=\"type === 'check'\"\n      class=\"po-listbox-list\"\n      (focusin)=\"onListboxFocusIn($event)\"\n    >\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          #listboxItem\n          [class.po-listbox-item]=\"visible()\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    @if (!currentGroup) {\n      @if (isRootLoading()) {\n        <div\n          class=\"po-listbox-subitems-loading\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [attr.aria-busy]=\"true\"\n          [attr.aria-label]=\"literals.subItemsLoading\"\n        >\n          @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n            <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n          }\n        </div>\n      } @else if (isRootError()) {\n        <div\n          class=\"po-listbox-subitems-error\"\n          role=\"alert\"\n          aria-live=\"assertive\"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n          <po-button\n            class=\"po-listbox-subitems-retry\"\n            [p-label]=\"literals.retry\"\n            p-kind=\"secondary\"\n            [p-size]=\"size\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown.enter)=\"onRetryKeydown($event, 'root')\"\n            (keydown.space)=\"onRetryKeydown($event, 'root')\"\n            (p-click)=\"retryRootItems($event)\"\n          ></po-button>\n        </div>\n      } @else {\n        <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n          @for (item of currentItems; track item) {\n            <li\n              #listboxItem\n              [class.po-listbox-item]=\"visible()\"\n              [cdkOption]=\"item[fieldLabel]\"\n              [cdkOptionDisabled]=\"\n                returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\n              \"\n              [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n              [attr.aria-expanded]=\"isGroupItem(item) ? currentGroup === item : null\"\n              (click)=\"onSelectItem(item, $event)\"\n              (keydown)=\"onKeyDown(item, $event)\"\n            >\n              @if (item.subItems?.length || isFunction(item.subItemsLazy) || item.$subItemTemplate) {\n                <po-item-list\n                  [p-label]=\"item.label\"\n                  [p-item]=\"item\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-icon]=\"item.icon\"\n                  [p-icon-arrow-right]=\"'ICON_ARROW_RIGHT'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                  [p-label]=\"item[fieldLabel]\"\n                  [p-item]=\"item\"\n                  [p-icon]=\"item.icon\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-danger]=\"item.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              }\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (currentGroup) {\n      <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          [attr.aria-busy]=\"isSubItemsLoading(currentGroup) ? 'true' : null\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, currentGroup)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'ICON_ARROW_LEFT'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @if (!currentGroup.$subItemTemplate && !isSubItemsLoading(currentGroup) && !isSubItemsError(currentGroup)) {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length || isFunction(subItem.subItemsLazy)) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'ICON_ARROW_RIGHT'\"\n                  [p-icon-position]=\"'right'\"\n                >\n                </po-item-list>\n              </li>\n            } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                  [p-label]=\"subItem[fieldLabel]\"\n                  [p-item]=\"subItem\"\n                  [p-icon]=\"subItem.icon\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-danger]=\"subItem.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n                >\n                </po-item-list>\n              </li>\n            }\n          }\n        }\n      </ul>\n\n      @if (currentGroup.$subItemTemplate) {\n        <div\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onKeydownTemplate($event)\"\n          (keydown.space)=\"$event.stopPropagation()\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"currentGroup.$subItemTemplate; context: { $implicit: currentGroup }\"\n          ></ng-container>\n        </div>\n      } @else if (isSubItemsLoading(currentGroup)) {\n        <div\n          class=\"po-listbox-subitems-loading\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [attr.aria-busy]=\"true\"\n          [attr.aria-label]=\"literals.subItemsLoading\"\n        >\n          @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n            <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n          }\n        </div>\n      } @else if (isSubItemsError(currentGroup)) {\n        <div\n          class=\"po-listbox-subitems-error\"\n          role=\"alert\"\n          aria-live=\"assertive\"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n          <po-button\n            class=\"po-listbox-subitems-retry\"\n            [p-label]=\"literals.retry\"\n            p-kind=\"secondary\"\n            [p-size]=\"size\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown.enter)=\"onRetryKeydown($event, 'subItems')\"\n            (keydown.space)=\"onRetryKeydown($event, 'subItems')\"\n            (p-click)=\"retrySubItems($event)\"\n          ></po-button>\n        </div>\n      }\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoSkeletonComponent, selector: "po-skeleton" }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "directive", type: i7.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i7.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: "21.2.25", 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() && !listboxSubitems) {\n    <ul\n      #listboxItemList\n      cdkListbox\n      [cdkListboxMultiple]=\"type === 'check'\"\n      class=\"po-listbox-list\"\n      (focusin)=\"onListboxFocusIn($event)\"\n    >\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          #listboxItem\n          [class.po-listbox-item]=\"visible()\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n      @if (!currentGroup) {\n        @if (isRootLoading()) {\n          <div\n            class=\"po-listbox-subitems-loading\"\n            role=\"status\"\n            aria-live=\"polite\"\n            [attr.aria-busy]=\"true\"\n            [attr.aria-label]=\"literals.subItemsLoading\"\n          >\n            @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n              <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n            }\n          </div>\n        } @else if (isRootError()) {\n          <div\n            class=\"po-listbox-subitems-error\"\n            role=\"alert\"\n            aria-live=\"assertive\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n            <po-button\n              class=\"po-listbox-subitems-retry\"\n              [p-label]=\"literals.retry\"\n              p-kind=\"secondary\"\n              [p-size]=\"size\"\n              (click)=\"$event.stopPropagation()\"\n              (p-click)=\"retryRootItems($event)\"\n            ></po-button>\n          </div>\n        } @else {\n          @for (item of currentItems; track item) {\n            <li\n              #listboxItem\n              [class.po-listbox-item]=\"visible()\"\n              [cdkOption]=\"item[fieldLabel]\"\n              [cdkOptionDisabled]=\"\n                returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\n              \"\n              [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n              [attr.aria-expanded]=\"isGroupItem(item) ? currentGroup === item : null\"\n              (click)=\"onSelectItem(item, $event)\"\n              (keydown)=\"onKeyDown(item, $event)\"\n            >\n              @if (item.subItems?.length || isFunction(item.subItems) || item.$subItemTemplate) {\n                <po-item-list\n                  [p-label]=\"item.label\"\n                  [p-item]=\"item\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-icon]=\"item.icon\"\n                  [p-icon-arrow-right]=\"'ICON_ARROW_RIGHT'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                  [p-label]=\"item[fieldLabel]\"\n                  [p-item]=\"item\"\n                  [p-icon]=\"item.icon\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-danger]=\"item.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              }\n            </li>\n          }\n        }\n      }\n\n      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          [attr.aria-busy]=\"isSubItemsLoading(currentGroup) ? 'true' : null\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, currentGroup)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'ICON_ARROW_LEFT'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @if (currentGroup.$subItemTemplate) {\n          <div\n            (click)=\"$event.stopPropagation()\"\n            (keydown)=\"onKeydownTemplate($event)\"\n            (keydown.space)=\"$event.stopPropagation()\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"currentGroup.$subItemTemplate; context: { $implicit: currentGroup }\"\n            ></ng-container>\n          </div>\n        } @else if (isSubItemsLoading(currentGroup)) {\n          <div\n            class=\"po-listbox-subitems-loading\"\n            role=\"status\"\n            aria-live=\"polite\"\n            [attr.aria-busy]=\"true\"\n            [attr.aria-label]=\"literals.subItemsLoading\"\n          >\n            @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n              <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n            }\n          </div>\n        } @else if (isSubItemsError(currentGroup)) {\n          <div\n            class=\"po-listbox-subitems-error\"\n            role=\"alert\"\n            aria-live=\"assertive\"\n            (pointerdown)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n            <po-button\n              class=\"po-listbox-subitems-retry\"\n              [p-label]=\"literals.retry\"\n              p-kind=\"secondary\"\n              [p-size]=\"size\"\n              (click)=\"$event.stopPropagation()\"\n              (p-click)=\"retrySubItems($event)\"\n            ></po-button>\n          </div>\n        } @else {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length || isFunction(subItem.subItems)) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'ICON_ARROW_RIGHT'\"\n                  [p-icon-position]=\"'right'\"\n                >\n                </po-item-list>\n              </li>\n            } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                  [p-label]=\"subItem[fieldLabel]\"\n                  [p-item]=\"subItem\"\n                  [p-icon]=\"subItem.icon\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-danger]=\"subItem.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n                >\n                </po-item-list>\n              </li>\n            }\n          }\n        }\n      }\n    </ul>\n  }\n\n  @if (isServerSearching && type !== 'action') {\n    <div [class.po-listbox-container-loading-default]=\"!infiniteLoading\">\n      <po-loading-overlay [p-size]=\"getSizeLoading()\" [p-text]=\"getTextLoading()\"></po-loading-overlay>\n    </div>\n  }\n</div>\n" }]
+            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() && !listboxSubitems) {\n    <ul\n      #listboxItemList\n      cdkListbox\n      [cdkListboxMultiple]=\"type === 'check'\"\n      class=\"po-listbox-list\"\n      (focusin)=\"onListboxFocusIn($event)\"\n    >\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          #listboxItem\n          [class.po-listbox-item]=\"visible()\"\n          [class.po-listbox-item-type-check]=\"type === 'check'\"\n          [cdkOption]=\"item[fieldLabel]\"\n          [cdkOptionDisabled]=\"\n            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n          \"\n          [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n          (click)=\"onSelectItem(item)\"\n          (keydown)=\"onKeyDown(item, $event)\"\n        >\n          @if (item.options) {\n            <label class=\"po-combo-item-title\">\n              {{ item.label }}\n            </label>\n          }\n          @if (returnBooleanValue(item, 'visible') !== false) {\n            <po-item-list\n              [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n              [p-visible]=\"returnBooleanValue(item, 'visible')\"\n              [p-checkbox-value]=\"isSelectedItem(item)\"\n              [attr.data-item-list]=\"formatItemList(item)\"\n              [p-label]=\"item[fieldLabel]\"\n              [p-value]=\"item[fieldValue]\"\n              [p-selected]=\"isSelectedItem(item) || item.selected\"\n              [p-active-tabs]=\"item.active\"\n              [p-separator]=\"item.separator || separator\"\n              [p-danger]=\"item.danger || item.type === 'danger'\"\n              [p-icon]=\"item.icon\"\n              [p-type]=\"type\"\n              [p-item]=\"item\"\n              [p-tab-hide]=\"item.hide\"\n              [p-is-tabs]=\"isTabs\"\n              [p-field-value]=\"fieldValue\"\n              [p-field-label]=\"fieldLabel\"\n              [p-template]=\"template\"\n              [p-template-context]=\"item\"\n              (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n              (p-selectcombo-item)=\"optionClicked(item)\"\n              (p-emit-item-tabs)=\"onSelectTabs($event)\"\n              (p-activated-tabs)=\"onActivatedTabs($event)\"\n              [p-search-value]=\"searchValue\"\n              [p-filter-mode]=\"filterMode\"\n              [p-filtering]=\"isFiltering\"\n              [p-size]=\"size\"\n              [p-should-mark-letter]=\"shouldMarkLetters\"\n              [p-compare-cache]=\"compareCache\"\n              [p-combo-service]=\"comboService\"\n              [p-keys-label]=\"keysLabel\"\n            ></po-item-list>\n          }\n        </li>\n      }\n\n      @if (footerActionListbox) {\n        @if (placeholderListbox) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ placeholderListbox }}</span>\n          </div>\n        }\n\n        @if (!placeholderListbox && !items.length) {\n          <div class=\"po-item-list\" aria-hidden=\"true\">\n            <span>{{ literals.noItems }}</span>\n          </div>\n        }\n\n        <li\n          class=\"po-listbox-item\"\n          (click)=\"handleFooterActionListbox()\"\n          (keydown)=\"onKeyDown({ type: 'footerAction' }, $event)\"\n          cdkOption=\"footerActionListbox\"\n        >\n          <po-item-list [p-label]=\"literals.footerActionListbox\" p-separator [p-size]=\"size\" />\n        </li>\n      }\n    </ul>\n  } @else {\n    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {\n      <div class=\"po-listbox-container-no-data po-text-center\">\n        <span> {{ literals.noItems }}</span>\n      </div>\n    }\n  }\n\n  @if (listboxSubitems) {\n    @if (!currentGroup) {\n      @if (isRootLoading()) {\n        <div\n          class=\"po-listbox-subitems-loading\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [attr.aria-busy]=\"true\"\n          [attr.aria-label]=\"literals.subItemsLoading\"\n        >\n          @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n            <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n          }\n        </div>\n      } @else if (isRootError()) {\n        <div\n          class=\"po-listbox-subitems-error\"\n          role=\"alert\"\n          aria-live=\"assertive\"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n          <po-button\n            class=\"po-listbox-subitems-retry\"\n            [p-label]=\"literals.retry\"\n            p-kind=\"secondary\"\n            [p-size]=\"size\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown.enter)=\"onRetryKeydown($event, 'root')\"\n            (keydown.space)=\"onRetryKeydown($event, 'root')\"\n            (p-click)=\"retryRootItems($event)\"\n          ></po-button>\n        </div>\n      } @else {\n        <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n          @for (item of currentItems; track item) {\n            <li\n              #listboxItem\n              [class.po-listbox-item]=\"visible()\"\n              [cdkOption]=\"item[fieldLabel]\"\n              [cdkOptionDisabled]=\"\n                returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\n              \"\n              [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n              [attr.aria-expanded]=\"isGroupItem(item) ? currentGroup === item : null\"\n              (click)=\"onSelectItem(item, $event)\"\n              (keydown)=\"onKeyDown(item, $event)\"\n            >\n              @if (item.subItems?.length || isFunction(item.subItemsLazy) || item.$subItemTemplate) {\n                <po-item-list\n                  [p-label]=\"item.label\"\n                  [p-item]=\"item\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-icon]=\"item.icon\"\n                  [p-icon-arrow-right]=\"'ICON_ARROW_RIGHT'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(item, 'visible')\"\n                  [p-label]=\"item[fieldLabel]\"\n                  [p-item]=\"item\"\n                  [p-icon]=\"item.icon\"\n                  [p-separator]=\"item.separator || separator\"\n                  [p-danger]=\"item.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(item) || item.selected\"\n                >\n                </po-item-list>\n              }\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (currentGroup) {\n      <ul cdkListbox class=\"po-listbox-list po-listbox-dropdown\">\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          [attr.aria-busy]=\"isSubItemsLoading(currentGroup) ? 'true' : null\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, currentGroup)\"\n        >\n          <po-icon class=\"po-field-icon\" [p-icon]=\"'ICON_ARROW_LEFT'\"></po-icon>\n          <po-tag [p-value]=\"currentGroup.label\"></po-tag>\n        </li>\n\n        @if (!currentGroup.$subItemTemplate && !isSubItemsLoading(currentGroup) && !isSubItemsError(currentGroup)) {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length || isFunction(subItem.subItemsLazy)) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'ICON_ARROW_RIGHT'\"\n                  [p-icon-position]=\"'right'\"\n                >\n                </po-item-list>\n              </li>\n            } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  class=\"po-listbox-item-sub\"\n                  [p-disabled]=\"returnBooleanValue(subItem, 'disabled')\"\n                  [p-visible]=\"returnBooleanValue(subItem, 'visible')\"\n                  [p-label]=\"subItem[fieldLabel]\"\n                  [p-item]=\"subItem\"\n                  [p-icon]=\"subItem.icon\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-danger]=\"subItem.type === 'danger'\"\n                  [p-selected]=\"isSelectedItem(subItem) || subItem.selected\"\n                >\n                </po-item-list>\n              </li>\n            }\n          }\n        }\n      </ul>\n\n      @if (currentGroup.$subItemTemplate) {\n        <div\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"onKeydownTemplate($event)\"\n          (keydown.space)=\"$event.stopPropagation()\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"currentGroup.$subItemTemplate; context: { $implicit: currentGroup }\"\n          ></ng-container>\n        </div>\n      } @else if (isSubItemsLoading(currentGroup)) {\n        <div\n          class=\"po-listbox-subitems-loading\"\n          role=\"status\"\n          aria-live=\"polite\"\n          [attr.aria-busy]=\"true\"\n          [attr.aria-label]=\"literals.subItemsLoading\"\n        >\n          @for (skeletonItem of subItemsSkeletonPlaceholders; track skeletonItem) {\n            <po-skeleton class=\"po-listbox-subitems-skeleton\" p-variant=\"text\" p-width=\"100%\"></po-skeleton>\n          }\n        </div>\n      } @else if (isSubItemsError(currentGroup)) {\n        <div\n          class=\"po-listbox-subitems-error\"\n          role=\"alert\"\n          aria-live=\"assertive\"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"po-listbox-subitems-error-message\">{{ literals.subItemsErrorMessage }}</span>\n          <po-button\n            class=\"po-listbox-subitems-retry\"\n            [p-label]=\"literals.retry\"\n            p-kind=\"secondary\"\n            [p-size]=\"size\"\n            (click)=\"$event.stopPropagation()\"\n            (keydown.enter)=\"onRetryKeydown($event, 'subItems')\"\n            (keydown.space)=\"onRetryKeydown($event, 'subItems')\"\n            (p-click)=\"retrySubItems($event)\"\n          ></po-button>\n        </div>\n      }\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: { rootLazyLoad: [{
                 type: Input,
                 args: ['p-root-lazy-load']
             }], rootItemsLoad: [{
                 type: Output,
                 args: ['p-root-items-load']
+            }], contentChange: [{
+                type: Output,
+                args: ['p-content-change']
             }], listbox: [{
                 type: ViewChild,
                 args: ['listbox', { static: true }]
@@ -10178,6 +10179,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 args: [CdkOption]
             }] } });
 
+const PO_POPUP_ARROW_TO_CORNER_POSITION = {
+    'bottom-left': 'top-left',
+    'bottom-right': 'top-right',
+    'top-right': 'bottom-right',
+    'top-left': 'bottom-left'
+};
+const PO_POPUP_ARROW_TO_POSITION = {
+    bottom: 'top',
+    'bottom-right': 'top-left',
+    'bottom-left': 'top-right',
+    left: 'right',
+    'left-bottom': 'right-top',
+    'left-top': 'right-bottom',
+    top: 'bottom',
+    'top-left': 'bottom-right',
+    'top-right': 'bottom-left',
+    right: 'left',
+    'right-top': 'left-bottom',
+    'right-bottom': 'left-top'
+};
 /**
  *
  * @docsExtends PoPopupBaseComponent
@@ -10210,6 +10231,8 @@ class PoPopupComponent extends PoPopupBaseComponent {
     changeDetector = inject(ChangeDetectorRef);
     popupRef;
     listbox;
+    popupOffset = 8;
+    viewportMargin = 8;
     //utilizado apenas no theme builder
     poListBoxRef;
     ngAfterViewInit() {
@@ -10251,8 +10274,8 @@ class PoPopupComponent extends PoPopupBaseComponent {
         this.param = param;
         this.showPopup = true;
         this.changeDetector.detectChanges();
-        this.validateInitialContent();
         this.openEvent.emit();
+        this.validateInitialContent();
     }
     returnBooleanValue(popupAction, property) {
         return PoUtils.isTypeof(popupAction[property], 'function')
@@ -10278,6 +10301,15 @@ class PoPopupComponent extends PoPopupBaseComponent {
             this.validateInitialContent();
         }
     }
+    onContentChange() {
+        if (!this.showPopup) {
+            return;
+        }
+        this.changeDetector.detectChanges();
+        if (this.hasContentToShow()) {
+            this.setPosition(this.getStickyPositions());
+        }
+    }
     checkAllActionIsInvisible() {
         if (this.rootLazyLoad && !this.actions.length) {
             return false;
@@ -10355,19 +10387,92 @@ class PoPopupComponent extends PoPopupBaseComponent {
         }
         window.removeEventListener('scroll', this.onScroll, true);
     }
-    setPosition() {
+    setPosition(preferredPositions) {
         if (this.listbox.nativeElement.querySelector('.po-listbox')) {
-            this.poControlPosition.setElements(this.popupRef.nativeElement, 8, this.target, this.customPositions, false, this.isCornerAlign);
+            const customPositions = this.resolvePositions(preferredPositions);
+            this.poControlPosition.setElements(this.popupRef.nativeElement, this.popupOffset, this.target, customPositions, false, this.isCornerAlign);
             this.poControlPosition.adjustPosition(this.position);
             this.arrowDirection = this.poControlPosition.getArrowDirection();
+            this.clampHeightToViewport();
+        }
+    }
+    resolvePositions(preferredPositions) {
+        if (preferredPositions?.length) {
+            return preferredPositions;
         }
+        if (this.customPositions?.length) {
+            return this.customPositions;
+        }
+        return this.getVerticalFirstPositions();
+    }
+    getVerticalFirstPositions() {
+        return this.isCornerAlign
+            ? ['bottom-left', 'top-left', 'bottom-right', 'top-right']
+            : ['bottom-left', 'top-left', 'bottom-right', 'top-right', 'bottom', 'top', 'right', 'left'];
+    }
+    clampHeightToViewport() {
+        const popupElement = this.popupRef?.nativeElement;
+        const targetElement = this.target;
+        const scrollElement = this.getScrollableListboxElement();
+        if (!popupElement || !targetElement || !scrollElement) {
+            return;
+        }
+        const targetRect = targetElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const popupHeight = popupElement.offsetHeight;
+        const spaceAbove = targetRect.top - this.popupOffset - this.viewportMargin;
+        const spaceBelow = viewportHeight - targetRect.bottom - this.popupOffset - this.viewportMargin;
+        const fitsBelow = popupHeight > 0 && popupHeight <= spaceBelow;
+        const shouldOpenUp = this.isOpeningUp() || (!fitsBelow && spaceAbove > spaceBelow);
+        if (!shouldOpenUp) {
+            this.renderer.removeStyle(scrollElement, 'maxHeight');
+            this.renderer.removeStyle(popupElement, 'bottom');
+            return;
+        }
+        if (spaceAbove <= 0) {
+            return;
+        }
+        if (popupHeight > spaceAbove) {
+            const nonScrollableHeight = popupHeight - scrollElement.offsetHeight;
+            const maxScrollHeight = Math.max(spaceAbove - nonScrollableHeight, 0);
+            this.renderer.setStyle(scrollElement, 'maxHeight', `${maxScrollHeight}px`);
+            this.poControlPosition.adjustPosition(this.position);
+            this.arrowDirection = this.poControlPosition.getArrowDirection();
+        }
+        const popupBottomFromViewport = viewportHeight - (targetRect.top - this.popupOffset);
+        this.renderer.setStyle(popupElement, 'bottom', `${popupBottomFromViewport}px`);
+        this.renderer.removeStyle(popupElement, 'top');
+    }
+    getScrollableListboxElement() {
+        const listboxElement = this.listbox?.nativeElement;
+        if (!listboxElement) {
+            return null;
+        }
+        return listboxElement.querySelector('ul[role=listbox]') ?? listboxElement;
+    }
+    isOpeningUp() {
+        const currentPosition = this.isCornerAlign
+            ? PO_POPUP_ARROW_TO_CORNER_POSITION[this.arrowDirection]
+            : PO_POPUP_ARROW_TO_POSITION[this.arrowDirection];
+        return !!currentPosition && currentPosition.startsWith('top');
+    }
+    getStickyPositions() {
+        const positions = this.customPositions?.length ? this.customPositions : this.getVerticalFirstPositions();
+        const currentPosition = this.isCornerAlign
+            ? PO_POPUP_ARROW_TO_CORNER_POSITION[this.arrowDirection]
+            : PO_POPUP_ARROW_TO_POSITION[this.arrowDirection];
+        const currentIndex = currentPosition ? positions.indexOf(currentPosition) : -1;
+        if (currentIndex <= 0) {
+            return positions;
+        }
+        return [...positions.slice(currentIndex), ...positions.slice(0, currentIndex)];
     }
     validateInitialContent() {
         if (this.hasContentToShow()) {
             this.setPosition();
             this.initializeListeners();
         }
-        else {
+        else if (!this.rootLazyLoad) {
             this.close();
         }
     }
@@ -10378,11 +10483,11 @@ class PoPopupComponent extends PoPopupBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoPopupComponent, isStandalone: false, selector: "po-popup", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }, { propertyName: "poListBoxRef", first: true, predicate: ["poListBoxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showPopup && (actions.length || rootLazyLoad) && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        [p-listbox-subitems]=\"computedListboxSubitems\"\n        [p-root-lazy-load]=\"rootLazyLoad\"\n        (p-close)=\"close($event)\"\n        (p-click-item)=\"onClickItem($event)\"\n        (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n        (p-root-items-load)=\"rootItemsLoad.emit()\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoPopupComponent, isStandalone: false, selector: "po-popup", providers: [PoControlPositionService], viewQueries: [{ propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true, read: ElementRef }, { propertyName: "poListBoxRef", first: true, predicate: ["poListBoxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showPopup && (actions.length || rootLazyLoad) && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        [p-listbox-subitems]=\"computedListboxSubitems\"\n        [p-root-lazy-load]=\"rootLazyLoad\"\n        (p-close)=\"close($event)\"\n        (p-click-item)=\"onClickItem($event)\"\n        (p-content-change)=\"onContentChange()\"\n        (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n        (p-root-items-load)=\"rootItemsLoad.emit()\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load", "p-content-change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-popup', providers: [PoControlPositionService], standalone: false, template: "@if (showPopup && (actions.length || rootLazyLoad) && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        [p-listbox-subitems]=\"computedListboxSubitems\"\n        [p-root-lazy-load]=\"rootLazyLoad\"\n        (p-close)=\"close($event)\"\n        (p-click-item)=\"onClickItem($event)\"\n        (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n        (p-root-items-load)=\"rootItemsLoad.emit()\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-popup', providers: [PoControlPositionService], standalone: false, template: "@if (showPopup && (actions.length || rootLazyLoad) && !checkAllActionIsInvisible()) {\n  <div #popupRef class=\"po-popup\">\n    @if (!hideArrow) {\n      <div class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n    }\n    <div class=\"po-popup-container\">\n      <po-listbox\n        #listbox\n        #poListBoxRef\n        p-type=\"action\"\n        [p-items]=\"actions\"\n        [p-param]=\"param\"\n        [p-size]=\"size\"\n        [p-listbox-subitems]=\"computedListboxSubitems\"\n        [p-root-lazy-load]=\"rootLazyLoad\"\n        (p-close)=\"close($event)\"\n        (p-click-item)=\"onClickItem($event)\"\n        (p-content-change)=\"onContentChange()\"\n        (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n        (p-root-items-load)=\"rootItemsLoad.emit()\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { popupRef: [{
                 type: ViewChild,
                 args: ['popupRef', { read: ElementRef }]
@@ -16580,7 +16685,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: "fieldContainerInput", first: true, predicate: ["fieldContainerInput"], 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 }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"isDisabled\"\n    [p-id]=\"id\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n    [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n    [p-size]=\"size\"\n    [p-text-wrap]=\"labelTextWrap()\"\n    [p-compact-label]=\"compactLabel()\"\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-field-container-content-helper-wrapper\">\n        <div #fieldContainerInput class=\"po-field-container-input\">\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]=\"isDisabled\"\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-input-icon-left]=\"icon\"\n            [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n            autocomplete=\"off\"\n            type=\"text\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled\"\n            [attr.name]=\"name\"\n            [disabled]=\"isDisabled\"\n            [id]=\"id\"\n            [placeholder]=\"isDisabled ? '' : placeholder\"\n            [required]=\"required\"\n            [attr.data-append-in-body]=\"appendBox\"\n            [attr.p-size]=\"size\"\n            (click)=\"!isDisabled && 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 (loading) {\n              <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n            } @else {\n              @if (!loading && 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]=\"isDisabled\"\n              [class.po-field-icon-disabled-aa]=\"isDisabled && size === 'small'\"\n              (click)=\"!isDisabled && 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]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"size === 'small'\"\n                [class.po-combo-default-border]=\"!isDisabled && inp.value\"\n                [class.po-combo-background-arrow-up]=\"!isDisabled && comboOpen\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n        @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n          <po-helper\n            #helperEl\n            class=\"po-field-helper-button\"\n            [p-size]=\"size\"\n            [p-helper]=\"poHelper.helperSettings\"\n            [p-disabled]=\"isDisabled\"\n            [p-append-in-body]=\"appendBox\"\n          >\n          </po-helper>\n        }\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-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }], 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: "fieldContainerInput", first: true, predicate: ["fieldContainerInput"], 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 }, { propertyName: "helperEl", first: true, predicate: ["helperEl"], descendants: true, read: PoHelperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@let poHelper = setHelper(label, additionalHelpTooltip);\n@let needsHelper = !label && (poHelperComponent() || poHelper.hideAdditionalHelp);\n<div #outerContainer>\n  <po-field-container\n    [p-disabled]=\"isDisabled\"\n    [p-id]=\"id\"\n    [p-label]=\"label\"\n    [p-optional]=\"optional\"\n    [p-required]=\"required\"\n    [p-show-required]=\"showRequired\"\n    [p-helper]=\"label ? poHelper.helperSettings : undefined\"\n    [p-show-helper]=\"label ? displayAdditionalHelp : undefined\"\n    [p-size]=\"size\"\n    [p-text-wrap]=\"labelTextWrap()\"\n    [p-compact-label]=\"compactLabel()\"\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-field-container-content-helper-wrapper\">\n        <div #fieldContainerInput class=\"po-field-container-input\">\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]=\"isDisabled\"\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-input-icon-left]=\"icon\"\n            [class.po-input-icon-left-aa]=\"icon && size === 'small'\"\n            autocomplete=\"off\"\n            type=\"text\"\n            [attr.data-focused-element]=\"!isDisabled\"\n            [attr.data-inactive-component]=\"isDisabled\"\n            [attr.name]=\"name\"\n            [disabled]=\"isDisabled\"\n            [id]=\"id\"\n            [placeholder]=\"isDisabled ? '' : placeholder\"\n            [required]=\"required\"\n            [attr.data-append-in-body]=\"appendBox\"\n            [attr.p-size]=\"size\"\n            (click)=\"!isDisabled && 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 (loading) {\n              <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n            } @else {\n              @if (!loading && 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]=\"isDisabled\"\n              [class.po-field-icon-disabled-aa]=\"isDisabled && size === 'small'\"\n              (click)=\"!isDisabled && 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]=\"!isDisabled\"\n                [class.po-field-icon-aa]=\"size === 'small'\"\n                [class.po-combo-default-border]=\"!isDisabled && inp.value\"\n                [class.po-combo-background-arrow-up]=\"!isDisabled && comboOpen\"\n              ></po-icon>\n            </div>\n          </div>\n        </div>\n        @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {\n          <po-helper\n            #helperEl\n            class=\"po-field-helper-button\"\n            [p-size]=\"size\"\n            [p-helper]=\"poHelper.helperSettings\"\n            [p-disabled]=\"isDisabled\"\n            [p-append-in-body]=\"appendBox\"\n          >\n          </po-helper>\n        }\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-append-in-body]=\"appendBox\"\n      [p-help]=\"help\"\n      [p-disabled]=\"isDisabled\"\n      [p-error-pattern]=\"getErrorPattern()\"\n      [p-error-limit]=\"errorLimit\"\n      [p-size]=\"size\"\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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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-append-in-body", "p-disabled", "p-error-pattern", "p-error-limit", "p-help", "p-size", "p-helper", "p-show-helper"] }, { kind: "component", type: PoFieldContainerComponent, selector: "po-field-container", inputs: ["p-disabled", "p-id", "p-label", "p-help", "p-helper", "p-show-helper", "p-text-wrap", "p-optional", "p-required", "p-show-required", "p-size", "p-compact-label"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load", "p-content-change"] }, { kind: "component", type: PoHelperComponent, selector: "po-helper" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoCleanComponent, selector: "po-clean" }, { kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoComboComponent, decorators: [{
             type: Component,
@@ -18736,7 +18841,7 @@ class PoChartBaseComponent {
      * - Os marcadores (*bullets*) terão seu estilo ajustado.
      * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa.
      *
-     * > Disponível para gráficos do tipo `line` e `radar`.
+     * > Disponível para gráficos do tipo `line`, `area`, `column`, `bar` e `radar`.
      *
      * #### Exemplo de utilização:
      * ```typescript
@@ -19073,8 +19178,7 @@ class PoChartGridUtils {
             this.component.boundaryGap = true;
             if (this.component.options?.stacked || serie.stackGroupName) {
                 serie.stack = this.component.options?.stacked ? 'total' : serie.stackGroupName;
-                if (this.component.dataLabel?.fixed !== false) {
-                    this.component.dataLabel = { fixed: true };
+                if (this.component.dataLabel?.fixed === true) {
                     serie.label = { show: true };
                 }
             }
@@ -20095,7 +20199,9 @@ class PoChartComponent extends PoChartBaseComponent {
             this.series.some(serie => serie.type === 'area') ||
             this.options?.areaStyle ||
             this.series.some(serie => serie.areaStyle === true);
-        const newSeries = [...this.colorService.getColors(this.series, true, hasArea)];
+        const newSeries = this.colorService
+            .getColors(this.series, true, hasArea)
+            .map(serie => ({ ...serie }));
         const tokenBorderWidthMd = this.chartGridUtils.resolvePx('--border-width-md');
         const findType = this.series.find(serie => serie.type)?.type;
         let serieGauge = {};
@@ -21509,28 +21615,32 @@ class PoDropdownBaseComponent {
     label;
     icon = 'ICON_ARROW_DOWN';
     open = false;
-    _actions;
+    _actions = [];
+    _rootLazyLoad;
     _disabled = false;
     _size = undefined;
     _initialSize = undefined;
     _position = poDropdownDefaultPosition;
     /**
      * Lista de ações que serão exibidas no componente.
-     *
-     * Aceita um *array* de `PoDropdownAction` (carregado imediatamente) ou uma função que retorna um
-     * `Observable<Array<PoDropdownAction>>`, carregando o nível raiz de forma assíncrona na abertura.
+     * Aceita um *array* de `PoDropdownAction`.
      */
     set actions(value) {
         if (typeof value === 'function') {
-            this._actions = value;
+            this._rootLazyLoad = value;
+            this._actions = [];
         }
         else {
+            this._rootLazyLoad = undefined;
             this._actions = Array.isArray(value) ? value : [];
         }
     }
     get actions() {
         return this._actions;
     }
+    get popupActions() {
+        return this._rootLazyLoad ?? this._actions;
+    }
     /**
      * @optional
      *
@@ -21603,9 +21713,10 @@ class PoDropdownBaseComponent {
      *
      * @description
      *
-     * Evento disparado a qualquer clique em um item do menu do dropdown.
+     * Evento disparado a cada clique em um item do menu.
+     * Retorna o item clicado (`PoDropdownAction`).
      *
-     * Recebe o item clicado (`PoDropdownAction`).
+     * > Não é disparado para a ação interna de voltar (`goBack`).
      */
     clickItem = new EventEmitter();
     /**
@@ -21613,10 +21724,10 @@ class PoDropdownBaseComponent {
      *
      * @description
      *
-     * Evento disparado no momento em que a requisição assíncrona de um subnível é iniciada
-     * (quando `subItems` é definido como função que retorna um `Observable`).
+     * Evento disparado no momento em que a requisição assíncrona de um subnível é iniciada.
+     * Retorna o item agrupador (`PoDropdownAction`) que originou o carregamento.
      *
-     * Recebe o item agrupador (`PoDropdownAction`) que originou o carregamento.
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
      */
     subItemsLoad = new EventEmitter();
     /**
@@ -21625,7 +21736,8 @@ class PoDropdownBaseComponent {
      * @description
      *
      * Evento disparado no momento em que a requisição assíncrona do nível raiz é iniciada
-     * (quando `p-actions` é definido como função que retorna um `Observable`).
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
      */
     rootItemsLoad = new EventEmitter();
     get popupCustomPositions() {
@@ -21694,16 +21806,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
  *  <file name="sample-po-dropdown-basic/sample-po-dropdown-basic.component.ts"> </file>
  * </example>
  *
- * <example name="po-dropdown-subitems" title="PO Dropdown Subitems" >
- *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.html"> </file>
- *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.ts"> </file>
- * </example>
- *
- * <example name="po-dropdown-lazy-subitems" title="PO Dropdown Lazy Subitems" >
- *  <file name="sample-po-dropdown-lazy-subitems/sample-po-dropdown-lazy-subitems.component.html"> </file>
- *  <file name="sample-po-dropdown-lazy-subitems/sample-po-dropdown-lazy-subitems.component.ts"> </file>
- * </example>
- *
  * <example name="po-dropdown-labs" title="PO Dropdown Labs" >
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.html"> </file>
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts"> </file>
@@ -21713,6 +21815,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
  *  <file name="sample-po-dropdown-social-network/sample-po-dropdown-social-network.component.html"> </file>
  *  <file name="sample-po-dropdown-social-network/sample-po-dropdown-social-network.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-dropdown-subitems" title="PO Dropdown Subitems" >
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.html"> </file>
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-dropdown-lazy-subitems" title="PO Dropdown Lazy Subitems" >
+ *  <file name="sample-po-dropdown-lazy-subitems/sample-po-dropdown-lazy-subitems.component.html"> </file>
+ *  <file name="sample-po-dropdown-lazy-subitems/sample-po-dropdown-lazy-subitems.component.ts"> </file>
+ * </example>
  */
 class PoDropdownComponent extends PoDropdownBaseComponent {
     renderer = inject(Renderer2);
@@ -21766,10 +21878,20 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
         window.addEventListener('scroll', this.onScroll, true);
     }
     onScroll = ({ target }) => {
-        if (this.open && target.className !== 'po-popup-container' && !this.isDropdownClosed()) {
+        if (!this.open) {
+            return;
+        }
+        if (this.isScrollInsidePopup(target)) {
+            return;
+        }
+        if (!this.isDropdownClosed()) {
             this.hideDropdown();
         }
     };
+    isScrollInsidePopup(target) {
+        const popupElement = this.popupRef?.popupRef?.nativeElement;
+        return !!(popupElement && target instanceof Node && popupElement.contains(target));
+    }
     isDropdownClosed() {
         const dropdownRect = this.dropdownRef.nativeElement.getBoundingClientRect();
         return dropdownRect.top >= 0 && dropdownRect.bottom <= window.innerHeight;
@@ -21797,11 +21919,11 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoDropdownComponent, isStandalone: false, selector: "po-dropdown", viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  [p-position]=\"position\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"popupCustomPositions\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  (p-close)=\"onPopupClose()\"\n  (p-click-item)=\"clickItem.emit($event)\"\n  (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n  (p-root-items-load)=\"rootItemsLoad.emit()\"\n>\n</po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoDropdownComponent, isStandalone: false, selector: "po-dropdown", viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupRef", first: true, predicate: ["popupRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  [p-position]=\"position\"\n  [p-actions]=\"popupActions\"\n  [p-custom-positions]=\"popupCustomPositions\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  (p-close)=\"onPopupClose()\"\n  (p-click-item)=\"clickItem.emit($event)\"\n  (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n  (p-root-items-load)=\"rootItemsLoad.emit()\"\n>\n</po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  [p-position]=\"position\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"popupCustomPositions\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  (p-close)=\"onPopupClose()\"\n  (p-click-item)=\"clickItem.emit($event)\"\n  (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n  (p-root-items-load)=\"rootItemsLoad.emit()\"\n>\n</po-popup>\n" }]
+            args: [{ selector: 'po-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    <span>{{ label }}</span>\n    <po-icon class=\"po-dropdown-icon\" [p-icon]=\"icon\"></po-icon>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  [p-position]=\"position\"\n  [p-actions]=\"popupActions\"\n  [p-custom-positions]=\"popupCustomPositions\"\n  [p-size]=\"size\"\n  [p-target]=\"dropdownRef\"\n  (p-close)=\"onPopupClose()\"\n  (p-click-item)=\"clickItem.emit($event)\"\n  (p-sub-items-load)=\"subItemsLoad.emit($event)\"\n  (p-root-items-load)=\"rootItemsLoad.emit()\"\n>\n</po-popup>\n" }]
         }], propDecorators: { dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdownRef', { read: ElementRef, static: true }]
@@ -42743,7 +42865,7 @@ class PoSearchComponent extends PoSearchBaseComponent {
         this.placeholderListbox = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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-loading]=\"loading && type !== 'locate'\"\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]=\"isDisabled\"\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    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\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]=\"isDisabled\"\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    <div [id]=\"idSearchButtonClean\">\n      @if (loading && type !== 'locate') {\n        <div class=\"po-search-button po-search-button-loading\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      } @else if (!!poSearchInput.value) {\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    </div>\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]=\"isDisabled\"\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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load"] }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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-loading]=\"loading && type !== 'locate'\"\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]=\"isDisabled\"\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    [attr.id]=\"id || null\"\n    [autocomplete]=\"autocomplete\"\n    [attr.name]=\"name\"\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]=\"isDisabled\"\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    <div [id]=\"idSearchButtonClean\">\n      @if (loading && type !== 'locate') {\n        <div class=\"po-search-button po-search-button-loading\">\n          <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n        </div>\n      } @else if (!!poSearchInput.value) {\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    </div>\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]=\"isDisabled\"\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: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load", "p-content-change"] }, { kind: "component", type: PoDropdownComponent, selector: "po-dropdown" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSearchComponent, decorators: [{
             type: Component,
@@ -51068,7 +51190,7 @@ class PoMultiselectDropdownComponent {
         return newSelectedOptions;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoMultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoMultiselectDropdownComponent, isStandalone: false, selector: "po-multiselect-dropdown", inputs: { isServerSearching: ["p-searching", "isServerSearching"], hideSearch: ["p-hide-search", "hideSearch"], literals: ["p-literals", "literals"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], selectedOptions: ["p-selected-options", "selectedOptions"], options: ["p-options", "options"], visibleOptions: ["p-visible-options", "visibleOptions"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], multiselectTemplate: ["p-multiselect-template", "multiselectTemplate"], containerWidth: ["p-container-width", "containerWidth"], size: ["p-size", "size"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "divElement", first: true, predicate: ["divElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], ngImport: i0, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <div [scrollTop]=\"scrollTop\" #divElement>\n    <ng-container>\n      <po-listbox\n        #listbox\n        p-type=\"check\"\n        [p-items]=\"visibleOptions\"\n        [p-selected-options]=\"selectedOptions\"\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\n        [p-field-value]=\"fieldValue\"\n        [p-field-value-search]=\"fieldValue\"\n        [p-field-label]=\"fieldLabel\"\n        [p-literal-search]=\"literals\"\n        [p-literals]=\"literals\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-hide-search]=\"hideSearch\"\n        [p-hide-select-all]=\"hideSelectAll\"\n        [p-template]=\"multiselectTemplate\"\n        [p-placeholder-search]=\"placeholderSearch\"\n        [p-size]=\"size\"\n        (p-change)=\"clickItem($event)\"\n        (p-change-all)=\"onClickSelectAll()\"\n        (p-change-search)=\"callChangeSearch($event)\"\n        (p-close)=\"closeDropdown.emit()\"\n        [p-container-width]=\"containerWidth\"\n      >\n      </po-listbox>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoMultiselectDropdownComponent, isStandalone: false, selector: "po-multiselect-dropdown", inputs: { isServerSearching: ["p-searching", "isServerSearching"], hideSearch: ["p-hide-search", "hideSearch"], literals: ["p-literals", "literals"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], selectedOptions: ["p-selected-options", "selectedOptions"], options: ["p-options", "options"], visibleOptions: ["p-visible-options", "visibleOptions"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"], multiselectTemplate: ["p-multiselect-template", "multiselectTemplate"], containerWidth: ["p-container-width", "containerWidth"], size: ["p-size", "size"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "divElement", first: true, predicate: ["divElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], ngImport: i0, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <div [scrollTop]=\"scrollTop\" #divElement>\n    <ng-container>\n      <po-listbox\n        #listbox\n        p-type=\"check\"\n        [p-items]=\"visibleOptions\"\n        [p-selected-options]=\"selectedOptions\"\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\n        [p-field-value]=\"fieldValue\"\n        [p-field-value-search]=\"fieldValue\"\n        [p-field-label]=\"fieldLabel\"\n        [p-literal-search]=\"literals\"\n        [p-literals]=\"literals\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-hide-search]=\"hideSearch\"\n        [p-hide-select-all]=\"hideSelectAll\"\n        [p-template]=\"multiselectTemplate\"\n        [p-placeholder-search]=\"placeholderSearch\"\n        [p-size]=\"size\"\n        (p-change)=\"clickItem($event)\"\n        (p-change-all)=\"onClickSelectAll()\"\n        (p-change-search)=\"callChangeSearch($event)\"\n        (p-close)=\"closeDropdown.emit()\"\n        [p-container-width]=\"containerWidth\"\n      >\n      </po-listbox>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load", "p-content-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoMultiselectDropdownComponent, decorators: [{
             type: Component,
@@ -71059,7 +71181,7 @@ class PoTabDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoTabDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoTabDropdownComponent, isStandalone: false, selector: "po-tab-dropdown", inputs: { label: ["p-label", "label"], tabs: ["p-tabs", "tabs"], size: ["p-size", "size"] }, outputs: { activated: "p-activated", changeState: "p-change-state", click: "p-click" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, static: true }, { propertyName: "button", first: true, predicate: PoButtonComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"po-tab-dropdown-content po-tab-button-default\">\n  <po-button\n    #button\n    p-kind=\"tertiary\"\n    [p-aria-label]=\"label\"\n    p-icon=\"ICON_ARROW_DOWN\"\n    [p-size]=\"size\"\n    (p-click)=\"toggleDropdown()\"\n  >\n  </po-button>\n</div>\n\n@if (isDropdownOpen) {\n  <div class=\"po-tab-dropdown-container\" [ngStyle]=\"dropdownStyles\">\n    <po-listbox\n      #listbox\n      #poListBoxRef\n      p-type=\"action\"\n      [p-items]=\"tabs\"\n      [p-is-tabs]=\"true\"\n      [p-size]=\"size\"\n      (p-activated-tabs)=\"activated.emit($event)\"\n      (p-change-state-tabs)=\"changeState.emit($event)\"\n      (p-click-tabs)=\"closeDropdown(); click.emit($event)\"\n      (p-close)=\"closeAndReturnToButtom()\"\n    >\n    </po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoTabDropdownComponent, isStandalone: false, selector: "po-tab-dropdown", inputs: { label: ["p-label", "label"], tabs: ["p-tabs", "tabs"], size: ["p-size", "size"] }, outputs: { activated: "p-activated", changeState: "p-change-state", click: "p-click" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, static: true }, { propertyName: "button", first: true, predicate: PoButtonComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"po-tab-dropdown-content po-tab-button-default\">\n  <po-button\n    #button\n    p-kind=\"tertiary\"\n    [p-aria-label]=\"label\"\n    p-icon=\"ICON_ARROW_DOWN\"\n    [p-size]=\"size\"\n    (p-click)=\"toggleDropdown()\"\n  >\n  </po-button>\n</div>\n\n@if (isDropdownOpen) {\n  <div class=\"po-tab-dropdown-container\" [ngStyle]=\"dropdownStyles\">\n    <po-listbox\n      #listbox\n      #poListBoxRef\n      p-type=\"action\"\n      [p-items]=\"tabs\"\n      [p-is-tabs]=\"true\"\n      [p-size]=\"size\"\n      (p-activated-tabs)=\"activated.emit($event)\"\n      (p-change-state-tabs)=\"changeState.emit($event)\"\n      (p-click-tabs)=\"closeDropdown(); click.emit($event)\"\n      (p-close)=\"closeAndReturnToButtom()\"\n    >\n    </po-listbox>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox", inputs: ["p-root-lazy-load"], outputs: ["p-root-items-load", "p-content-change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoTabDropdownComponent, decorators: [{
             type: Component,