@po-ui/ng-components 21.33.0 → 21.34.1

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

@@ -5,10 +5,10 @@ import { CommonModule, DOCUMENT, CurrencyPipe, DecimalPipe, TitleCasePipe, DateP
 import * as i2 from '@angular/platform-browser';
 import { DomSanitizer, Title } from '@angular/platform-browser';
 import { trigger, transition, style, animate, group, query, animateChild, AnimationBuilder, keyframes } from '@angular/animations';
-import { Subject, filter, Subscription, fromEvent, debounceTime, switchMap, isObservable, of, Observable, timer, ReplaySubject, throwError, map as map$1, catchError as catchError$1, startWith, delay as delay$1 } from 'rxjs';
+import { Subject, filter, Subscription, takeUntil, finalize, fromEvent, debounceTime, switchMap, isObservable, of, Observable, timer, ReplaySubject, throwError, map as map$1, catchError as catchError$1, startWith, delay as delay$1 } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, Router, NavigationEnd, NavigationCancel } from '@angular/router';
-import * as i5 from '@angular/cdk/listbox';
+import * as i7 from '@angular/cdk/listbox';
 import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, Validators, NG_VALIDATORS, NgControl, NgForm, ControlContainer } from '@angular/forms';
@@ -18,7 +18,7 @@ import * as i6 from '@angular/cdk/drag-drop';
 import { CdkDropList, moveItemInArray, transferArrayItem, CdkDragHandle, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$3 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpEventType, HttpResponse, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { tap, map, debounceTime as debounceTime$1, filter as filter$1, distinctUntilChanged, takeWhile, take, delay, timeout, catchError, switchMap as switchMap$1, finalize, mergeMap } from 'rxjs/operators';
+import { tap, map, debounceTime as debounceTime$1, filter as filter$1, distinctUntilChanged, takeWhile, take, delay, timeout, catchError, switchMap as switchMap$1, finalize as finalize$1, mergeMap } from 'rxjs/operators';
 import { BarChart, CustomChart, GaugeChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
 import { GraphicComponent, BrushComponent, DataZoomComponent, GridComponent, LegendComponent, MarkLineComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
@@ -4684,19 +4684,34 @@ class PoPopupBaseComponent {
     _position = poPopupDefaultPosition;
     _size = undefined;
     _target;
+    rootLazyLoad;
     // Determina se o modo de subníveis deve ser ativado.
-    // Retorna true se alguma ação possuir subItems não vazio ou $subItemTemplate.
     get computedListboxSubitems() {
+        if (this.rootLazyLoad) {
+            return true;
+        }
         if (!this._actions || this._actions.length === 0) {
             return false;
         }
-        return this._actions.some(action => (action.subItems && action.subItems.length > 0) || !!action.$subItemTemplate);
+        return this._actions.some(action => typeof action.subItemsLazy === 'function' ||
+            (Array.isArray(action.subItems) && action.subItems.length > 0) ||
+            !!action.$subItemTemplate);
     }
     // template-icon
     templateIcon = false;
-    /** Lista de ações que serão exibidas no componente. */
+    /**
+     * Lista de ações que serão exibidas no componente.
+     * Aceita um *array* de `PoPopupAction`.
+     */
     set actions(value) {
-        this._actions = Array.isArray(value) ? value : [];
+        if (typeof value === 'function') {
+            this.rootLazyLoad = value;
+            this._actions = [];
+        }
+        else {
+            this.rootLazyLoad = undefined;
+            this._actions = Array.isArray(value) ? value : [];
+        }
     }
     get actions() {
         return this._actions;
@@ -4852,10 +4867,41 @@ class PoPopupBaseComponent {
         return this._target;
     }
     closeEvent = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado a cada clique em um item do menu.
+     * Retorna o item clicado (`PoDropdownAction`).
+     *
+     * > Não é disparado para a ação interna de voltar (`goBack`).
+     */
     clickItem = new EventEmitter();
     openEvent = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * 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.
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
+     */
+    subItemsLoad = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado no momento em que a requisição assíncrona do nível raiz é iniciada
+     *
+     * > 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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoPopupBaseComponent, isStandalone: true, inputs: { templateIcon: ["p-template-icon", "templateIcon"], actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item", openEvent: "p-open" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoPopupBaseComponent, isStandalone: true, inputs: { templateIcon: ["p-template-icon", "templateIcon"], actions: ["p-actions", "actions"], hideArrow: ["p-hide-arrow", "hideArrow"], isCornerAlign: ["p-is-corner-align", "isCornerAlign"], position: ["p-position", "position"], customPositions: ["p-custom-positions", "customPositions"], size: ["p-size", "size"], target: ["p-target", "target"] }, outputs: { closeEvent: "p-close", clickItem: "p-click-item", openEvent: "p-open", subItemsLoad: "p-sub-items-load", rootItemsLoad: "p-root-items-load" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoPopupBaseComponent, decorators: [{
             type: Directive
@@ -4892,6 +4938,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
             }], openEvent: [{
                 type: Output,
                 args: ['p-open']
+            }], subItemsLoad: [{
+                type: Output,
+                args: ['p-sub-items-load']
+            }], rootItemsLoad: [{
+                type: Output,
+                args: ['p-root-items-load']
             }] } });
 
 var PoItemListType;
@@ -4915,19 +4967,31 @@ var PoItemListFilterMode;
 const poListBoxLiteralsDefault = {
     en: {
         backToPreviousGroup: 'Go back to the previous list',
-        noItems: 'No items found'
+        noItems: 'No items found',
+        subItemsErrorMessage: 'Unable to load the items.',
+        subItemsLoading: 'Loading items.',
+        retry: 'Retry'
     },
     es: {
         backToPreviousGroup: 'Volver a la lista anterior',
-        noItems: 'No se encontraron artículos'
+        noItems: 'No se encontraron artículos',
+        subItemsErrorMessage: 'No se pudieron cargar los elementos.',
+        subItemsLoading: 'Cargando elementos.',
+        retry: 'Reintentar'
     },
     pt: {
         backToPreviousGroup: 'Voltar para a lista anterior',
-        noItems: 'Nenhum item encontrado'
+        noItems: 'Nenhum item encontrado',
+        subItemsErrorMessage: 'Não foi possível carregar os itens.',
+        subItemsLoading: 'Carregando itens.',
+        retry: 'Tentar novamente'
     },
     ru: {
         backToPreviousGroup: 'Вернуться к предыдущему списку',
-        noItems: 'ничего не найдено'
+        noItems: 'ничего не найдено',
+        subItemsErrorMessage: 'Не удалось загрузить элементы.',
+        subItemsLoading: 'Загрузка элементов.',
+        retry: 'Повторить попытку'
     }
 };
 /**
@@ -5041,6 +5105,7 @@ class PoListBoxBaseComponent {
     clickTab = new EventEmitter();
     changeStateTabs = new EventEmitter();
     clickItem = new EventEmitter();
+    subItemsLoad = new EventEmitter();
     // Evento disparado ao clicar na ação do rodapé do listbox
     footerActionListboxEvent = new EventEmitter();
     constructor(languageService) {
@@ -5054,7 +5119,7 @@ class PoListBoxBaseComponent {
         this._size = size;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: PoListBoxBaseComponent, isStandalone: true, inputs: { listboxSubitems: { classPropertyName: "listboxSubitems", publicName: "p-listbox-subitems", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "p-visible", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "p-type", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "p-items", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, isTabs: { classPropertyName: "isTabs", publicName: "p-is-tabs", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, param: { classPropertyName: "param", publicName: "p-param", isSignal: false, isRequired: false, transformFunction: null }, checkboxAllValue: { classPropertyName: "checkboxAllValue", publicName: "p-checkboxAllValue", isSignal: false, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "p-selected-options", isSignal: false, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "p-selected-option", isSignal: false, isRequired: false, transformFunction: null }, fieldValue: { classPropertyName: "fieldValue", publicName: "p-field-value", isSignal: false, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "p-field-label", isSignal: false, isRequired: false, transformFunction: null }, literalSearch: { classPropertyName: "literalSearch", publicName: "p-literal-search", isSignal: false, isRequired: false, transformFunction: null }, fieldValueSearch: { classPropertyName: "fieldValueSearch", publicName: "p-field-value-search", isSignal: false, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "p-hide-search", isSignal: false, isRequired: false, transformFunction: null }, hideSelectAll: { classPropertyName: "hideSelectAll", publicName: "p-hide-select-all", isSignal: false, isRequired: false, transformFunction: null }, multiselectTemplate: { classPropertyName: "multiselectTemplate", publicName: "p-multiselect-template", isSignal: false, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "p-template", isSignal: false, isRequired: false, transformFunction: null }, placeholderSearch: { classPropertyName: "placeholderSearch", publicName: "p-placeholder-search", isSignal: false, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "p-search-value", isSignal: false, isRequired: false, transformFunction: null }, isServerSearching: { classPropertyName: "isServerSearching", publicName: "p-is-searching", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteLoading: { classPropertyName: "infiniteLoading", publicName: "p-infinite-loading", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "p-infinite-scroll", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, cache: { classPropertyName: "cache", publicName: "p-cache", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "p-infinite-scroll-distance", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "p-filter-mode", isSignal: false, isRequired: false, transformFunction: null }, isFiltering: { classPropertyName: "isFiltering", publicName: "p-filtering", isSignal: false, isRequired: false, transformFunction: null }, shouldMarkLetters: { classPropertyName: "shouldMarkLetters", publicName: "p-should-mark-letter", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, compareCache: { classPropertyName: "compareCache", publicName: "p-compare-cache", isSignal: false, isRequired: false, transformFunction: null }, comboService: { classPropertyName: "comboService", publicName: "p-combo-service", isSignal: false, isRequired: false, transformFunction: null }, containerWidth: { classPropertyName: "containerWidth", publicName: "p-container-width", isSignal: false, isRequired: false, transformFunction: null }, keysLabel: { classPropertyName: "keysLabel", publicName: "p-keys-label", isSignal: false, isRequired: false, transformFunction: null }, footerActionListbox: { classPropertyName: "footerActionListbox", publicName: "p-footer-action-listbox", isSignal: false, isRequired: false, transformFunction: null }, placeholderListbox: { classPropertyName: "placeholderListbox", publicName: "p-placeholder-listbox", isSignal: false, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "p-separator", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changeSearch: "p-change-search", selectItem: "p-select-item", closeEvent: "p-close", change: "p-change", selectCombo: "p-selectcombo-item", changeAll: "p-change-all", UpdateInfiniteScroll: "p-update-infinite-scroll", activatedTab: "p-activated-tabs", clickTab: "p-click-tabs", changeStateTabs: "p-change-state-tabs", clickItem: "p-click-item", footerActionListboxEvent: "p-footer-action-listbox-event" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: PoListBoxBaseComponent, isStandalone: true, inputs: { listboxSubitems: { classPropertyName: "listboxSubitems", publicName: "p-listbox-subitems", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "p-visible", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "p-type", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "p-items", isSignal: false, isRequired: false, transformFunction: null }, literals: { classPropertyName: "literals", publicName: "p-literals", isSignal: false, isRequired: false, transformFunction: null }, isTabs: { classPropertyName: "isTabs", publicName: "p-is-tabs", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, param: { classPropertyName: "param", publicName: "p-param", isSignal: false, isRequired: false, transformFunction: null }, checkboxAllValue: { classPropertyName: "checkboxAllValue", publicName: "p-checkboxAllValue", isSignal: false, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "p-selected-options", isSignal: false, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "p-selected-option", isSignal: false, isRequired: false, transformFunction: null }, fieldValue: { classPropertyName: "fieldValue", publicName: "p-field-value", isSignal: false, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "p-field-label", isSignal: false, isRequired: false, transformFunction: null }, literalSearch: { classPropertyName: "literalSearch", publicName: "p-literal-search", isSignal: false, isRequired: false, transformFunction: null }, fieldValueSearch: { classPropertyName: "fieldValueSearch", publicName: "p-field-value-search", isSignal: false, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "p-hide-search", isSignal: false, isRequired: false, transformFunction: null }, hideSelectAll: { classPropertyName: "hideSelectAll", publicName: "p-hide-select-all", isSignal: false, isRequired: false, transformFunction: null }, multiselectTemplate: { classPropertyName: "multiselectTemplate", publicName: "p-multiselect-template", isSignal: false, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "p-template", isSignal: false, isRequired: false, transformFunction: null }, placeholderSearch: { classPropertyName: "placeholderSearch", publicName: "p-placeholder-search", isSignal: false, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "p-search-value", isSignal: false, isRequired: false, transformFunction: null }, isServerSearching: { classPropertyName: "isServerSearching", publicName: "p-is-searching", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteLoading: { classPropertyName: "infiniteLoading", publicName: "p-infinite-loading", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "p-infinite-scroll", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, cache: { classPropertyName: "cache", publicName: "p-cache", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, infiniteScrollDistance: { classPropertyName: "infiniteScrollDistance", publicName: "p-infinite-scroll-distance", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "p-filter-mode", isSignal: false, isRequired: false, transformFunction: null }, isFiltering: { classPropertyName: "isFiltering", publicName: "p-filtering", isSignal: false, isRequired: false, transformFunction: null }, shouldMarkLetters: { classPropertyName: "shouldMarkLetters", publicName: "p-should-mark-letter", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, compareCache: { classPropertyName: "compareCache", publicName: "p-compare-cache", isSignal: false, isRequired: false, transformFunction: null }, comboService: { classPropertyName: "comboService", publicName: "p-combo-service", isSignal: false, isRequired: false, transformFunction: null }, containerWidth: { classPropertyName: "containerWidth", publicName: "p-container-width", isSignal: false, isRequired: false, transformFunction: null }, keysLabel: { classPropertyName: "keysLabel", publicName: "p-keys-label", isSignal: false, isRequired: false, transformFunction: null }, footerActionListbox: { classPropertyName: "footerActionListbox", publicName: "p-footer-action-listbox", isSignal: false, isRequired: false, transformFunction: null }, placeholderListbox: { classPropertyName: "placeholderListbox", publicName: "p-placeholder-listbox", isSignal: false, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "p-separator", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changeSearch: "p-change-search", selectItem: "p-select-item", closeEvent: "p-close", change: "p-change", selectCombo: "p-selectcombo-item", changeAll: "p-change-all", UpdateInfiniteScroll: "p-update-infinite-scroll", activatedTab: "p-activated-tabs", clickTab: "p-click-tabs", changeStateTabs: "p-change-state-tabs", clickItem: "p-click-item", subItemsLoad: "p-sub-items-load", footerActionListboxEvent: "p-footer-action-listbox-event" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxBaseComponent, decorators: [{
             type: Directive
@@ -5199,6 +5264,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
             }], clickItem: [{
                 type: Output,
                 args: ['p-click-item']
+            }], subItemsLoad: [{
+                type: Output,
+                args: ['p-sub-items-load']
             }], footerActionListboxEvent: [{
                 type: Output,
                 args: ['p-footer-action-listbox-event']
@@ -5207,187 +5275,362 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 args: ['window:PoUiThemeChange']
             }] } });
 
-const poLoadingOverlayLiteralsDefault = {
-    en: {
-        loading: 'Loading'
-    },
-    es: {
-        loading: 'Cargando'
-    },
-    pt: {
-        loading: 'Carregando'
-    },
-    ru: {
-        loading: 'Загрузка'
-    }
-};
 /**
+ * @usedBy PoButtonComponent, PoWidgetComponent
  *
  * @description
  *
- * Este componente mostra ao usuário uma imagem de _loading_ e bloqueia a página inteira ou o container escolhido,
- * enquanto aguarda a resposta de alguma requisição.
+ * Estilos disponíveis do button.
+ */
+var PoButtonKind;
+(function (PoButtonKind) {
+    /** Estilo primário, usado para ações principais que requerem maior destaque. */
+    PoButtonKind["primary"] = "primary";
+    /** Estilo secundário, usado como padrão, para ações comuns. */
+    PoButtonKind["secondary"] = "secondary";
+    /** Estilo terciário, ideal para ações menos importantes, sem fundo preenchido. */
+    PoButtonKind["tertiary"] = "tertiary";
+})(PoButtonKind || (PoButtonKind = {}));
+
+/**
+ * @description
+ *
+ * Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA.
+ */
+var PoButtonSize;
+(function (PoButtonSize) {
+    /** Define a altura do button como 32px. */
+    PoButtonSize["Small"] = "small";
+    /** Define a altura do button como 44px. */
+    PoButtonSize["Medium"] = "medium";
+    /** Define a altura do button como 56px. */
+    PoButtonSize["Large"] = "large";
+})(PoButtonSize || (PoButtonSize = {}));
+
+/**
+ * @usedBy PoButtonComponent
+ *
+ * @description
+ *
+ * Enumeração que define os tipos possíveis para o `PoButtonComponent`. Estes tipos estão relacionados ao comportamento
+ * do botão quando utilizado dentro de um formulário HTML.
+ *
+ * @example
+ * No uso com o `PoButtonComponent`, a propriedade `p-type` pode ser utilizada para configurar o comportamento:
+ *
+ * ```
+ * <po-button p-label="Enviar" p-type="submit"></po-button>
+ * <po-button p-label="Cancelar" p-type="button"></po-button>
+ * <po-button p-label="Redefinir" p-type="reset"></po-button>
+ * ```
+ */
+var PoButtonType;
+(function (PoButtonType) {
+    /**
+     * Define o botão como do tipo `submit`. Quando clicado, o formulário é enviado automaticamente,
+     * disparando o evento `submit`.
+     */
+    PoButtonType["Submit"] = "submit";
+    /**
+     * Define o botão como do tipo `button`. Este tipo de botão não possui comportamento padrão associado
+     * e é utilizado principalmente para ações programáticas como cliques e disparos de eventos customizados.
+     */
+    PoButtonType["Button"] = "button";
+    /**
+     * Define o botão como do tipo `reset`. Quando clicado, redefine os campos do formulário ao qual pertence
+     * para seus valores iniciais.
+     */
+    PoButtonType["Reset"] = "reset";
+})(PoButtonType || (PoButtonType = {}));
+
+/**
+ * @description
+ *
+ * O `po-button` permite que o usuário execute ações predefinidas pelo desenvolvedor.
+ *
+ * Através dos tipos, é possível identificar a importância de cada ação.
+ *
+ * #### Boas práticas
+ *
+ * - Evite `labels` extensos que quebram o layout do `po-button`, use `labels` diretos, curtos e intuitivos.
+ * - Utilize apenas um `po-button` configurado como `primary` por página.
+ * - Para ações irreversíveis use sempre a propriedade `p-danger`.
+ *
+ * #### Acessibilidade tratada no componente
+ *
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - Quando em foco, o botão é ativado usando as teclas de Espaço e Enter do teclado. [W3C WAI-ARIA 3.5 Button - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/#keyboard-interaction-3)
+ * - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
  *
  * #### Tokens customizáveis
  *
- * É possível alterar o estilo do componente usando os seguintes tokens (CSS): <br>
- * Obs: Só é possível realizar alterações ao adicionar a classe `.po-loading`
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
  *
  * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
  *
- * | Propriedade                            | Descrição                                             | Valor Padrão                                      |
- * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
- * | **Default Values**                     |                                                       |                                                   |
- * | `--font-family`                        | Família tipográfica usada                             | `var(--font-family-theme)`                        |
- * | `--font-weight`                        | Peso da fonte                                         | `var(--font-weight-normal)`                       |
- * | `--text-color`                         | Cor do texto                                          | `var(--color-neutral-dark-70)`                    |
- * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento&nbsp;   | `var(--border-radius-md)`                         |
- * | `--border-width`                       | Contém o valor da largura dos cantos do elemento&nbsp;| `var(--border-width-sm)`                          |
- * | `--border-color`                       | Cor da borda                                          | `var(--color-neutral-light-20)`                   |
- * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-00)`                   |
- * | `--shadow`                             | Contém o valor da sombra do elemento                  | `var(--shadow-md)`                                |
- * | **po-loading-icon**                    |                                                       |                                                   |
- * | `--color`                              | Cor principal do spinner                              | `var(--color-action-default)`                     |
+ * | Propriedade                              | Descrição                                             | Valor Padrão                                      |
+ * |------------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | `--font-family`                          | Família tipográfica usada                             | `var(--font-family-theme)`                        |
+ * | `--font-size`                            | Tamanho da fonte                                      | `var(--font-size-default)`                        |
+ * | `--font-weight`                          | Peso da fonte                                         | `var(--font-weight-bold)`                         |
+ * | `--line-height`                          | Tamanho da label                                      | `var(--line-height-none)`                         |
+ * | `--border-radius`                        | Contém o valor do raio dos cantos do elemento&nbsp;   | `var(--border-radius-md)`                         |
+ * | `--border-width`                         | Contém o valor da largura dos cantos do elemento&nbsp;| `var(--border-width-md)`                          |
+ * | `--padding`                              | Preenchimento                                         | `0 1em`                                           |                                                                        | ---                                             |
+ * | **Danger**                               |                                                       |                                                   |
+ * | `--text-color-danger`                    | Cor do texto no estado danger                         | `var(--color-neutral-light-00)`                   |
+ * | `--color-button-danger`                  | Cor do botão no estado danger                         | `var(--color-feedback-negative-dark)`             |
+ * | `--color-danger-hover`                   | Cor de hover no estado danger                         | `var(--color-feedback-negative-darker)`           |
+ * | `--color-danger-pressed`                 | Cor pressionada no estado danger                      | `var(--color-feedback-negative-darkest)`          |
+ * | `--background-danger-hover`              | Cor de background de hover no estado danger           | `var(--color-feedback-negative-lighter)`          |
+ * | `--border-color-danger-hover`            | Cor da borda de hover no estado danger                | `var(--color-feedback-negative-darkest)`          |
+ * | `--background-danger-pressed`            | Cor de background pressionado no estado danger        | `var(--color-feedback-negative-light)`            |
+ * | `--background-color-button-danger`&nbsp; | Cor de background do botão no estado danger           | `var(--color-transparent)`                        |
+ * | **Default Values**                       |                                                       |                                                   |
+ * | `--text-color`                           | Cor do texto                                          | `var(--color-neutral-light-00)`                   |
+ * | `--color`                                | Cor principal do botão                                | `var(--color-action-default)`                     |
+ * | `--background-color`                     | Cor de background                                     | `var(--color-transparent)`                        |
+ * | `--border-color`                         | Cor da borda                                          | `var(--color-transparent)`                        |
+ * | `--shadow`                               | Contém o valor da sombra do elemento                  | `var(--shadow-none)`                              |
+ * | **Hover**                                |                                                       |                                                   |
+ * | `--color-hover`                          | Cor principal no estado hover                         | `var(--color-action-hover)`                       |
+ * | `--background-hover`                     | Cor de background no estado hover                     | `var(--color-brand-01-lighter)`                   |
+ * | `--border-color-hover`                   | Cor da borda no estado hover                          | `var(--color-brand-01-darkest)`                   |
+ * | **Focused**                              |                                                       |                                                   |
+ * | `--outline-color-focused`                | Cor do outline do estado de focus                     | `var(--color-action-focus)`                       |
+ * | **Pressed**                              |                                                       |                                                   |
+ * | `--color-pressed`                        | Cor principal no estado de pressionado                | `var(--color-action-pressed)`                     |
+ * | `--background-pressed`                   | Cor de background no estado de pressionado&nbsp;      | `var(--color-brand-01-light)`                     |
+ * | **Disabled**                             |                                                       |                                                   |
+ * | `--text-color-disabled`                  | Cor do texto no estado disabled                       | `var(--color-neutral-dark-70)`                    |
+ * | `--color-disabled`                       | Cor principal no estado disabled                      | `var(--color-action-disabled)`                    |
+ * | `--background-color-disabled`            | Cor de background no estado disabled                  | `var(--color-transparent)`                        |
  *
  */
-class PoLoadingOverlayBaseComponent {
-    languageService;
-    _screenLock = false;
-    _text;
-    _size;
+class PoButtonBaseComponent {
     /**
      * @optional
      *
      * @description
      *
-     * Define se o *overlay* será aplicado a um *container* ou à página inteira.
+     * Label do botão.
+     */
+    label = input(undefined, { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'p-label' });
+    /**
+     * @optional
      *
-     * Para utilizar o componente como um *container*, o elemento pai deverá receber uma posição relativa, por exemplo:
+     * @description
+     * Ícone exibido ao lado esquerdo do label do botão.
      *
+     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
      * ```
-     * <div style="position: relative">
-     *
-     *  <po-chart [p-series]="[{ value: 10, category: 'Example' }]">
-     *  </po-chart>
+     * <po-button p-icon="an an-user" p-label="PO button"></po-button>
+     * ```
+     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+     * esteja carregada no projeto:
+     * ```
+     * <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
+     * ```
+     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+     * ```
+     * <po-button [p-icon]="template" p-label="button template ionic"></po-button>
      *
-     *  <po-loading-overlay>
-     *  </po-loading-overlay>
-     * </div>
+     * <ng-template #template>
+     *  <ion-icon style="font-size: inherit" name="heart"></ion-icon>
+     * </ng-template>
      * ```
+     * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o.
+     */
+    icon = input(undefined, { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), alias: 'p-icon' });
+    /**
+     * @optional
+     *
+     * @description
+     * Define o tipo do botão.
+     *
+     * @default `PoButtonType.Button`
+     */
+    type = input(PoButtonType.Button, { ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'p-type' });
+    // Evento disparado ao sair do campo.
+    blur = new EventEmitter();
+    /** Ação que será executada quando o usuário clicar sobre o `po-button`. */
+    click = new EventEmitter();
+    _danger = false;
+    _disabled = false;
+    _loading = false;
+    _kind = PoButtonKind.secondary;
+    _size = undefined;
+    _initialSize = undefined;
+    hasSize = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Exibe um ícone de carregamento à esquerda do _label_ do botão.
+     *
+     * > Quando esta propriedade estiver habilitada, desabilitará o botão.
      *
      * @default `false`
      */
-    set screenLock(screenLock) {
-        this._screenLock = convertToBoolean(screenLock);
+    set loading(value) {
+        this._loading = convertToBoolean(value);
     }
-    get screenLock() {
-        return this._screenLock;
+    get loading() {
+        return this._loading;
     }
     /**
      * @optional
      *
      * @description
      *
-     * Texto a ser exibido no componente.
-     *
-     * > O valor padrão será traduzido de acordo com o idioma configurado no [**PoI18n**](/documentation/po-i18n) ou navegador.
+     * Deve ser usado em ações irreversíveis que o usuário precisa ter cuidado ao executá-la, como a exclusão de um registro.
      *
-     * @default `Carregando`
+     * > A propriedade `p-kind="tertiary"` será inativada ao utilizar esta propriedade.
      */
-    set text(value) {
-        this._text = value || this.getTextDefault();
+    set danger(value) {
+        this._danger = this.kind !== PoButtonKind.tertiary ? value : false;
     }
-    get text() {
-        return this._text;
+    get danger() {
+        return this._danger;
     }
     /**
      * @optional
      *
      * @description
      *
-     * Define o tamanho do componente com base no tamanho do ícone de *loading*.
-     *
-     * Tamanhos disponíveis para o *loading*:
-     * - `xs`: 1rem
-     * - `sm`: 1.5rem
-     * - `md`: 3rem
-     * - `lg`: 5rem (valor padrão)
+     * Define o estilo visual do componente conforme valores especificados no enum `PoButtonKind`:
+     *  - `primary`: destaca o botão, sendo recomendado para ações principais.
+     *  - `secondary`: estilo padrão, ideal para ações secundárias.
+     *  - `tertiary`: exibe o botão sem preenchimento no fundo, indicado para ações opcionais.
      *
-     * @default `lg`
+     * @default `secondary`
      */
-    set size(value) {
-        this._size = value === '' || !value ? 'lg' : value;
+    set kind(value) {
+        this._kind = PoButtonKind[value] ? PoButtonKind[value] : PoButtonKind.secondary;
     }
-    get size() {
-        return this._size;
+    get kind() {
+        return this._kind;
     }
-    constructor(languageService) {
-        this.languageService = languageService;
-        this.text = this.getTextDefault();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Desabilita o `po-button` e não permite que o usuário interaja com o mesmo.
+     *
+     * @default `false`
+     */
+    set disabled(value) {
+        this._disabled = value === '' ? true : convertToBoolean(value);
     }
-    getTextDefault() {
-        const language = this.languageService.getShortLanguage();
-        return poLoadingOverlayLiteralsDefault[language].loading;
+    get disabled() {
+        return this._disabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoLoadingOverlayBaseComponent, isStandalone: true, inputs: { screenLock: ["p-screen-lock", "screenLock"], text: ["p-text", "text"], size: ["p-size", "size"] }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayBaseComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { screenLock: [{
-                type: Input,
-                args: ['p-screen-lock']
-            }], text: [{
-                type: Input,
-                args: ['p-text']
-            }], size: [{
-                type: Input,
-                args: ['p-size']
-            }] } });
-
-class PoOverlayBaseComponent {
     /**
      * @optional
      *
      * @description
      *
-     * Define se o *overlay* será aplicado a um *container* ou a página inteira.
+     * Define um `aria-label` para o `po-button`.
      *
-     * Para utilizar o componente como um *container*, o elemento pai deverá receber uma posição relativa, por exemplo:
+     * Caso esta propriedade não seja informada será considerada a label do botão.
      *
-     * ```
-     * <div style="position: relative">
+     * > Em caso de botões com apenas ícone a atribuição de valor à esta propriedade é muito importante para acessibilidade.
+     */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'p-aria-label' });
+    ariaExpanded = null;
+    /**
+     * @optional
      *
-     *  <po-chart [p-series]="[{ value: 10, category: 'Example' }]">
-     *  </po-chart>
+     * @description
      *
-     *  <po-overlay>
-     *  </po-overlay>
-     * </div>
-     * ```
+     * Define o `tabindex` do elemento `<button>` nativo interno.
      *
-     * @default `false`
+     * Use `[tabindex]="-1"` para remover o botão da ordem de foco do teclado.
      */
-    screenLock = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.25", type: PoOverlayBaseComponent, isStandalone: true, inputs: { screenLock: ["p-screen-lock", "screenLock", convertToBoolean] }, ngImport: i0 });
+    tabindex = null;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente:
+     * - `small`: altura de 32px (disponível apenas para acessibilidade AA).
+     * - `medium`: altura de 44px.
+     * - `large`: altura de 56px.
+     *
+     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
+     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
+     *
+     * @default `medium`
+     */
+    set size(value) {
+        this._initialSize = value;
+        this.applySizeBasedOnA11y();
+    }
+    get size() {
+        return this._size ?? getDefaultSizeFn(PoButtonSize);
+    }
+    onThemeChange() {
+        this.applySizeBasedOnA11y();
+    }
+    applySizeBasedOnA11y() {
+        const size = validateSizeFn(this._initialSize, PoButtonSize);
+        this._size = size;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoButtonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: PoButtonBaseComponent, isStandalone: false, selector: "po-button-base", inputs: { label: { classPropertyName: "label", publicName: "p-label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "p-type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "p-danger", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, kind: { classPropertyName: "kind", publicName: "p-kind", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "p-aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "p-aria-expanded", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "p-tabindex", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blur: "p-blur", click: "p-click" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-danger": "this.danger", "attr.p-kind": "this.kind", "attr.p-size": "this.size" } }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayBaseComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { screenLock: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoButtonBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'po-button-base',
+                    template: '',
+                    standalone: false
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-icon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-type", required: false }] }], blur: [{
+                type: Output,
+                args: ['p-blur']
+            }], click: [{
+                type: Output,
+                args: ['p-click']
+            }], loading: [{
                 type: Input,
-                args: [{ alias: 'p-screen-lock', transform: convertToBoolean }]
+                args: ['p-loading']
+            }], danger: [{
+                type: HostBinding,
+                args: ['attr.p-danger']
+            }, {
+                type: Input,
+                args: [{ alias: 'p-danger', transform: convertToBoolean }]
+            }], kind: [{
+                type: HostBinding,
+                args: ['attr.p-kind']
+            }, {
+                type: Input,
+                args: ['p-kind']
+            }], disabled: [{
+                type: Input,
+                args: ['p-disabled']
+            }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-aria-label", required: false }] }], ariaExpanded: [{
+                type: Input,
+                args: ['p-aria-expanded']
+            }], tabindex: [{
+                type: Input,
+                args: ['p-tabindex']
+            }], size: [{
+                type: Input,
+                args: ['p-size']
+            }, {
+                type: HostBinding,
+                args: ['attr.p-size']
+            }], onThemeChange: [{
+                type: HostListener,
+                args: ['window:PoUiThemeChange']
             }] } });
 
-class PoOverlayComponent extends PoOverlayBaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoOverlayComponent, isStandalone: false, selector: "po-overlay", usesInheritance: true, ngImport: i0, template: "<div class=\"po-overlay\" [class.po-overlay-fixed]=\"screenLock\" role=\"alert\" aria-busy=\"true\">\n  <div class=\"po-overlay-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'po-overlay', standalone: false, template: "<div class=\"po-overlay\" [class.po-overlay-fixed]=\"screenLock\" role=\"alert\" aria-busy=\"true\">\n  <div class=\"po-overlay-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }] });
-
 var PoLoadingIconSize;
 (function (PoLoadingIconSize) {
     /** Extra small */
@@ -5400,79 +5643,95 @@ var PoLoadingIconSize;
     PoLoadingIconSize["lg"] = "lg";
 })(PoLoadingIconSize || (PoLoadingIconSize = {}));
 
-const poLoadingLiteralsDefault = {
-    en: {
-        loading: 'Loading'
-    },
-    es: {
-        loading: 'Cargando'
-    },
-    pt: {
-        loading: 'Carregando'
-    },
-    ru: {
-        loading: 'Загрузка'
-    }
-};
+const LOADING_ICON_COMPONENT = new InjectionToken('LOADING_ICON_COMPONENT');
+
 /**
  * @docsPrivate
  *
  * @description
  *
- * Este componente tem o objetivo de mostrar visualmente aos usuários que a aplicação está processando
- * ou aguardando a resposta de alguma requisição.
+ * Componente que exibe um ícone de carregamento de conteúdo. A cor padrão para ele é a primária conforme o tema utilizado.
+ * É possível alterá-la para um tom cinza conforme a necessidade.
  */
-class PoLoadingBaseComponent {
-    languageService;
-    _text;
-    _size;
+class PoLoadingIconComponent {
+    loadingIconComponent;
+    _neutralColor;
+    _size = 'md';
+    createdRef;
+    id = uuid();
+    loadingContainer;
     /**
-     * Texto a ser exibido no componente.
+     * @optional
+     *
+     * @description
+     *
+     * Definição para cor neutra (cinza) para o ícone de carregamento.
+     *
+     * @default `false`
      */
-    set text(value) {
-        this._text = value || (value === '' ? '' : this.getTextDefault());
+    set neutralColor(value) {
+        this._neutralColor = convertToBoolean(value);
     }
-    get text() {
-        return this._text;
+    get neutralColor() {
+        return this._neutralColor;
     }
     /**
-     * Define o tamanho do ícone.
+     * @optional
+     *
+     * @description
+     *
+     * Definição do tamanho do ícone.
+     *
      * Valores válidos:
-     *  - `xs`: 16px
-     *  - `sm`: 24px
-     *  - `md`: 32px
-     *  - `lg`: 80px
+     *  - `xs`: tamanho `extra small`
+     *  - `sm`: tamanho `small`
+     *  - `md`: tamanho `medium`
+     *  - `lg`: tamanho `large`
      *
-     * @default `lg`
+     * @default `md`
      */
     set size(value) {
-        if (value && PoLoadingIconSize[value]) {
-            this._size = PoLoadingIconSize[value];
-        }
-        else {
-            this._size = PoLoadingIconSize.lg;
+        this._size = PoLoadingIconSize[value] ? PoLoadingIconSize[value] : PoLoadingIconSize.md;
+        if (this.createdRef) {
+            this.createdRef.instance.size = this.size;
         }
     }
     get size() {
         return this._size;
     }
     inOverlay = false;
-    constructor(languageService) {
-        this.languageService = languageService;
-        this.text = this.getTextDefault();
+    constructor(loadingIconComponent) {
+        this.loadingIconComponent = loadingIconComponent;
     }
-    getTextDefault() {
-        const language = this.languageService.getShortLanguage();
-        return poLoadingLiteralsDefault[language].loading;
+    ngOnDestroy() {
+        if (this.createdRef) {
+            this.createdRef.destroy();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoLoadingBaseComponent, isStandalone: true, inputs: { text: ["p-text", "text"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, ngImport: i0 });
+    ngAfterViewInit() {
+        if (this.loadingIconComponent && this.loadingContainer && this.inOverlay) {
+            this.loadingContainer.clear();
+            this.createdRef = this.loadingContainer.createComponent(this.loadingIconComponent);
+            this.createdRef.instance.size = this.size;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingIconComponent, deps: [{ token: LOADING_ICON_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoLoadingIconComponent, isStandalone: false, selector: "po-loading-icon", inputs: { neutralColor: ["p-neutral-color", "neutralColor"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, viewQueries: [{ propertyName: "loadingContainer", first: true, predicate: ["loadingContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingBaseComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { text: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-loading-icon', standalone: false, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.Type, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [LOADING_ICON_COMPONENT]
+                }] }], propDecorators: { loadingContainer: [{
+                type: ViewChild,
+                args: ['loadingContainer', { read: ViewContainerRef, static: false }]
+            }], neutralColor: [{
                 type: Input,
-                args: ['p-text']
+                args: ['p-neutral-color']
             }], size: [{
                 type: Input,
                 args: ['p-size']
@@ -5481,95 +5740,334 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 args: ['p-in-overlay']
             }] } });
 
-const LOADING_ICON_COMPONENT = new InjectionToken('LOADING_ICON_COMPONENT');
+/**
+ * @docsExtends PoButtonBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-button-basic" title="PO Button Basic">
+ *  <file name="sample-po-button-basic/sample-po-button-basic.component.html"> </file>
+ *  <file name="sample-po-button-basic/sample-po-button-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-button-labs" title="PO Button Labs">
+ *  <file name="sample-po-button-labs/sample-po-button-labs.component.html"> </file>
+ *  <file name="sample-po-button-labs/sample-po-button-labs.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-button-social-network" title="PO Button Social Network">
+ *  <file name="sample-po-button-social-network/sample-po-button-social-network.component.html"> </file>
+ *  <file name="sample-po-button-social-network/sample-po-button-social-network.component.ts"> </file>
+ * </example>
+ */
+class PoButtonComponent extends PoButtonBaseComponent {
+    elementRef;
+    buttonElement;
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+    }
+    onBlur() {
+        this.blur.emit();
+    }
+    /**
+     * Função que atribui foco ao componente.
+     *
+     * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+     *
+     * ```
+     * import { PoButtonComponent } from '@po-ui/ng-components';
+     *
+     * ...
+     *
+     * @ViewChild(PoButtonComponent, { static: true }) button: PoButtonComponent;
+     *
+     * focusButton() {
+     *   this.button.focus();
+     * }
+     * ```
+     */
+    focus() {
+        if (!this.disabled) {
+            this.buttonElement.nativeElement.focus();
+        }
+    }
+    mapSizeToIcon(size) {
+        const sizeMap = {
+            small: 'xs',
+            medium: 'sm',
+            large: 'sm'
+        };
+        return sizeMap[size] || 'sm';
+    }
+    onClick() {
+        this.click.emit(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoButtonComponent, isStandalone: false, selector: "po-button", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.tabindex]=\"tabindex\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { 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: PoButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.tabindex]=\"tabindex\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { buttonElement: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
+            }] } });
 
+const poLoadingOverlayLiteralsDefault = {
+    en: {
+        loading: 'Loading'
+    },
+    es: {
+        loading: 'Cargando'
+    },
+    pt: {
+        loading: 'Carregando'
+    },
+    ru: {
+        loading: 'Загрузка'
+    }
+};
 /**
- * @docsPrivate
  *
  * @description
  *
- * Componente que exibe um ícone de carregamento de conteúdo. A cor padrão para ele é a primária conforme o tema utilizado.
- * É possível alterá-la para um tom cinza conforme a necessidade.
+ * Este componente mostra ao usuário uma imagem de _loading_ e bloqueia a página inteira ou o container escolhido,
+ * enquanto aguarda a resposta de alguma requisição.
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS): <br>
+ * Obs: Só é possível realizar alterações ao adicionar a classe `.po-loading`
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                            | Descrição                                             | Valor Padrão                                      |
+ * |----------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **Default Values**                     |                                                       |                                                   |
+ * | `--font-family`                        | Família tipográfica usada                             | `var(--font-family-theme)`                        |
+ * | `--font-weight`                        | Peso da fonte                                         | `var(--font-weight-normal)`                       |
+ * | `--text-color`                         | Cor do texto                                          | `var(--color-neutral-dark-70)`                    |
+ * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento&nbsp;   | `var(--border-radius-md)`                         |
+ * | `--border-width`                       | Contém o valor da largura dos cantos do elemento&nbsp;| `var(--border-width-sm)`                          |
+ * | `--border-color`                       | Cor da borda                                          | `var(--color-neutral-light-20)`                   |
+ * | `--background`                         | Cor de background                                     | `var(--color-neutral-light-00)`                   |
+ * | `--shadow`                             | Contém o valor da sombra do elemento                  | `var(--shadow-md)`                                |
+ * | **po-loading-icon**                    |                                                       |                                                   |
+ * | `--color`                              | Cor principal do spinner                              | `var(--color-action-default)`                     |
+ *
  */
-class PoLoadingIconComponent {
-    loadingIconComponent;
-    _neutralColor;
-    _size = 'md';
-    createdRef;
-    id = uuid();
-    loadingContainer;
+class PoLoadingOverlayBaseComponent {
+    languageService;
+    _screenLock = false;
+    _text;
+    _size;
     /**
      * @optional
      *
      * @description
      *
-     * Definição para cor neutra (cinza) para o ícone de carregamento.
+     * Define se o *overlay* será aplicado a um *container* ou à página inteira.
+     *
+     * Para utilizar o componente como um *container*, o elemento pai deverá receber uma posição relativa, por exemplo:
+     *
+     * ```
+     * <div style="position: relative">
+     *
+     *  <po-chart [p-series]="[{ value: 10, category: 'Example' }]">
+     *  </po-chart>
+     *
+     *  <po-loading-overlay>
+     *  </po-loading-overlay>
+     * </div>
+     * ```
      *
      * @default `false`
      */
-    set neutralColor(value) {
-        this._neutralColor = convertToBoolean(value);
+    set screenLock(screenLock) {
+        this._screenLock = convertToBoolean(screenLock);
     }
-    get neutralColor() {
-        return this._neutralColor;
+    get screenLock() {
+        return this._screenLock;
     }
     /**
      * @optional
      *
      * @description
      *
-     * Definição do tamanho do ícone.
+     * Texto a ser exibido no componente.
      *
+     * > O valor padrão será traduzido de acordo com o idioma configurado no [**PoI18n**](/documentation/po-i18n) ou navegador.
+     *
+     * @default `Carregando`
+     */
+    set text(value) {
+        this._text = value || this.getTextDefault();
+    }
+    get text() {
+        return this._text;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente com base no tamanho do ícone de *loading*.
+     *
+     * Tamanhos disponíveis para o *loading*:
+     * - `xs`: 1rem
+     * - `sm`: 1.5rem
+     * - `md`: 3rem
+     * - `lg`: 5rem (valor padrão)
+     *
+     * @default `lg`
+     */
+    set size(value) {
+        this._size = value === '' || !value ? 'lg' : value;
+    }
+    get size() {
+        return this._size;
+    }
+    constructor(languageService) {
+        this.languageService = languageService;
+        this.text = this.getTextDefault();
+    }
+    getTextDefault() {
+        const language = this.languageService.getShortLanguage();
+        return poLoadingOverlayLiteralsDefault[language].loading;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoLoadingOverlayBaseComponent, isStandalone: true, inputs: { screenLock: ["p-screen-lock", "screenLock"], text: ["p-text", "text"], size: ["p-size", "size"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { screenLock: [{
+                type: Input,
+                args: ['p-screen-lock']
+            }], text: [{
+                type: Input,
+                args: ['p-text']
+            }], size: [{
+                type: Input,
+                args: ['p-size']
+            }] } });
+
+class PoOverlayBaseComponent {
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define se o *overlay* será aplicado a um *container* ou a página inteira.
+     *
+     * Para utilizar o componente como um *container*, o elemento pai deverá receber uma posição relativa, por exemplo:
+     *
+     * ```
+     * <div style="position: relative">
+     *
+     *  <po-chart [p-series]="[{ value: 10, category: 'Example' }]">
+     *  </po-chart>
+     *
+     *  <po-overlay>
+     *  </po-overlay>
+     * </div>
+     * ```
+     *
+     * @default `false`
+     */
+    screenLock = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.25", type: PoOverlayBaseComponent, isStandalone: true, inputs: { screenLock: ["p-screen-lock", "screenLock", convertToBoolean] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { screenLock: [{
+                type: Input,
+                args: [{ alias: 'p-screen-lock', transform: convertToBoolean }]
+            }] } });
+
+class PoOverlayComponent extends PoOverlayBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoOverlayComponent, isStandalone: false, selector: "po-overlay", usesInheritance: true, ngImport: i0, template: "<div class=\"po-overlay\" [class.po-overlay-fixed]=\"screenLock\" role=\"alert\" aria-busy=\"true\">\n  <div class=\"po-overlay-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-overlay', standalone: false, template: "<div class=\"po-overlay\" [class.po-overlay-fixed]=\"screenLock\" role=\"alert\" aria-busy=\"true\">\n  <div class=\"po-overlay-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }] });
+
+const poLoadingLiteralsDefault = {
+    en: {
+        loading: 'Loading'
+    },
+    es: {
+        loading: 'Cargando'
+    },
+    pt: {
+        loading: 'Carregando'
+    },
+    ru: {
+        loading: 'Загрузка'
+    }
+};
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Este componente tem o objetivo de mostrar visualmente aos usuários que a aplicação está processando
+ * ou aguardando a resposta de alguma requisição.
+ */
+class PoLoadingBaseComponent {
+    languageService;
+    _text;
+    _size;
+    /**
+     * Texto a ser exibido no componente.
+     */
+    set text(value) {
+        this._text = value || (value === '' ? '' : this.getTextDefault());
+    }
+    get text() {
+        return this._text;
+    }
+    /**
+     * Define o tamanho do ícone.
      * Valores válidos:
-     *  - `xs`: tamanho `extra small`
-     *  - `sm`: tamanho `small`
-     *  - `md`: tamanho `medium`
-     *  - `lg`: tamanho `large`
+     *  - `xs`: 16px
+     *  - `sm`: 24px
+     *  - `md`: 32px
+     *  - `lg`: 80px
      *
-     * @default `md`
+     * @default `lg`
      */
     set size(value) {
-        this._size = PoLoadingIconSize[value] ? PoLoadingIconSize[value] : PoLoadingIconSize.md;
-        if (this.createdRef) {
-            this.createdRef.instance.size = this.size;
+        if (value && PoLoadingIconSize[value]) {
+            this._size = PoLoadingIconSize[value];
+        }
+        else {
+            this._size = PoLoadingIconSize.lg;
         }
     }
     get size() {
         return this._size;
     }
     inOverlay = false;
-    constructor(loadingIconComponent) {
-        this.loadingIconComponent = loadingIconComponent;
-    }
-    ngOnDestroy() {
-        if (this.createdRef) {
-            this.createdRef.destroy();
-        }
+    constructor(languageService) {
+        this.languageService = languageService;
+        this.text = this.getTextDefault();
     }
-    ngAfterViewInit() {
-        if (this.loadingIconComponent && this.loadingContainer && this.inOverlay) {
-            this.loadingContainer.clear();
-            this.createdRef = this.loadingContainer.createComponent(this.loadingIconComponent);
-            this.createdRef.instance.size = this.size;
-        }
+    getTextDefault() {
+        const language = this.languageService.getShortLanguage();
+        return poLoadingLiteralsDefault[language].loading;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingIconComponent, deps: [{ token: LOADING_ICON_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoLoadingIconComponent, isStandalone: false, selector: "po-loading-icon", inputs: { neutralColor: ["p-neutral-color", "neutralColor"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, viewQueries: [{ propertyName: "loadingContainer", first: true, predicate: ["loadingContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoLoadingBaseComponent, isStandalone: true, inputs: { text: ["p-text", "text"], size: ["p-size", "size"], inOverlay: ["p-in-overlay", "inOverlay"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'po-loading-icon', standalone: false, template: "@if (inOverlay && loadingIconComponent) {\n  <ng-template #loadingContainer></ng-template>\n} @else {\n  <div class=\"po-loading-icon-container po-loading-svg-{{ size }}\">\n    <svg\n      [ngClass]=\"neutralColor ? 'po-loading-icon-neutral' : 'po-loading-icon'\"\n      class=\"po-loading-icon-animated\"\n      viewBox=\"0 0 200 200\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <defs>\n        <linearGradient [id]=\"'first' + id\">\n          <stop offset=\"0\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n        <linearGradient [id]=\"'second' + id\">\n          <stop offset=\"0\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n          <stop offset=\"1\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n        </linearGradient>\n      </defs>\n      <g stroke-width=\"24\" transform=\"matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)\">\n        <path [attr.stroke]=\"'url(#' + 'first' + id + ')'\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n        <path [attr.stroke]=\"'url(#' + 'second' + id + ')'\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n        <path stroke=\"currentColor\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n      </g>\n    </svg>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.Type, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [LOADING_ICON_COMPONENT]
-                }] }], propDecorators: { loadingContainer: [{
-                type: ViewChild,
-                args: ['loadingContainer', { read: ViewContainerRef, static: false }]
-            }], neutralColor: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: PoLanguageService }], propDecorators: { text: [{
                 type: Input,
-                args: ['p-neutral-color']
+                args: ['p-text']
             }], size: [{
                 type: Input,
                 args: ['p-size']
@@ -5610,24 +6108,391 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
  *  <file name="sample-po-loading-overlay-labs/sample-po-loading-overlay-labs.component.css"> </file>
  * </example>
  *
- * <example name="po-loading-overlay-connection-test" title="PO Loading Overlay - Connection Test">
- *  <file name="sample-po-loading-overlay-connection-test/sample-po-loading-overlay-connection-test.component.html"> </file>
- *  <file name="sample-po-loading-overlay-connection-test/sample-po-loading-overlay-connection-test.component.ts"> </file>
+ * <example name="po-loading-overlay-connection-test" title="PO Loading Overlay - Connection Test">
+ *  <file name="sample-po-loading-overlay-connection-test/sample-po-loading-overlay-connection-test.component.html"> </file>
+ *  <file name="sample-po-loading-overlay-connection-test/sample-po-loading-overlay-connection-test.component.ts"> </file>
+ * </example>
+ */
+class PoLoadingOverlayComponent extends PoLoadingOverlayBaseComponent {
+    changeDetector = inject(ChangeDetectorRef);
+    constructor() {
+        const languageService = inject(PoLanguageService);
+        super(languageService);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoLoadingOverlayComponent, isStandalone: false, selector: "po-loading-overlay", usesInheritance: true, ngImport: i0, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\" [p-in-overlay]=\"true\"></po-loading>\n</po-overlay>\n", dependencies: [{ kind: "component", type: PoOverlayComponent, selector: "po-overlay" }, { kind: "component", type: PoLoadingComponent, selector: "po-loading" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-loading-overlay', standalone: false, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\" [p-in-overlay]=\"true\"></po-loading>\n</po-overlay>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tipos de animação do componente `po-skeleton`.
+ */
+var PoSkeletonAnimation;
+(function (PoSkeletonAnimation) {
+    /** Sem animação */
+    PoSkeletonAnimation["none"] = "none";
+    /** Animação de pulsação */
+    PoSkeletonAnimation["pulse"] = "pulse";
+    /** Animação de brilho deslizante */
+    PoSkeletonAnimation["shimmer"] = "shimmer";
+})(PoSkeletonAnimation || (PoSkeletonAnimation = {}));
+
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tamanhos disponíveis para o componente `po-skeleton`.
+ */
+var PoSkeletonSize;
+(function (PoSkeletonSize) {
+    /** Tamanho extra pequeno */
+    PoSkeletonSize["xs"] = "xs";
+    /** Tamanho pequeno */
+    PoSkeletonSize["sm"] = "sm";
+    /** Tamanho médio */
+    PoSkeletonSize["md"] = "md";
+    /** Tamanho grande */
+    PoSkeletonSize["lg"] = "lg";
+    /** Tamanho extra grande */
+    PoSkeletonSize["xl"] = "xl";
+    /** Tamanho extra extra grande */
+    PoSkeletonSize["xxl"] = "2xl";
+})(PoSkeletonSize || (PoSkeletonSize = {}));
+
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tipos visuais disponíveis para o componente `po-skeleton`.
+ */
+var PoSkeletonType;
+(function (PoSkeletonType) {
+    /** Tipo padrão com cor neutra clara */
+    PoSkeletonType["normal"] = "normal";
+    /** Tipo primário com cor neutra média */
+    PoSkeletonType["primary"] = "primary";
+    /** Tipo de conteúdo com fundo branco */
+    PoSkeletonType["content"] = "content";
+})(PoSkeletonType || (PoSkeletonType = {}));
+
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define as variantes visuais do componente `po-skeleton`.
+ */
+var PoSkeletonVariant;
+(function (PoSkeletonVariant) {
+    /** Variante para simular texto */
+    PoSkeletonVariant["text"] = "text";
+    /** Variante retangular (largura maior que altura) */
+    PoSkeletonVariant["rectangle"] = "rectangle";
+    /** Variante quadrada (largura igual à altura) */
+    PoSkeletonVariant["square"] = "square";
+    /** Variante circular */
+    PoSkeletonVariant["circle"] = "circle";
+})(PoSkeletonVariant || (PoSkeletonVariant = {}));
+
+/**
+ * @description
+ *
+ * O componente `po-skeleton` é utilizado para exibir placeholders durante o carregamento de conteúdo,
+ * melhorando a experiência do usuário ao indicar que a informação está sendo processada.
+ *
+ * Ele oferece diferentes variantes visuais (texto, retângulo, círculo) e animações (pulse, shimmer)
+ * para simular diversos tipos de conteúdo em estado de carregamento.
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                            | Descrição                                            | Valor Padrão                    |
+ * |----------------------------------------|------------------------------------------------------|---------------------------------|
+ * | **Cores**                              |                                                      |                                 |
+ * | `--color`                              | Cor de fundo do skeleton (tipo normal)               | `var(--color-neutral-light-20)` |
+ * | `--color-primary`                      | Cor de fundo do skeleton (tipo primary)              | `var(--color-neutral-mid-40)`   |
+ * | `--color-content`                      | Cor de fundo do skeleton (tipo content)              | `var(--color-neutral-light-00)` |
+ * | `--shimmer-highlight`                  | Cor de destaque do shimmer (tipo normal)             | `var(--color-neutral-light-30)` |
+ * | `--shimmer-highlight-primary`          | Cor de destaque do shimmer (tipo primary)            | `var(--color-neutral-light-20)` |
+ * | `--shimmer-highlight-content`          | Cor de destaque do shimmer (tipo content)            | `var(--color-neutral-light-05)` |
+ * | **Espaçamento**                        |                                                      |                                 |
+ * | `--margin-bottom`                      | Margem inferior do skeleton                          | `var(--spacing-xs)`             |
+ * | **Bordas**                             |                                                      |                                 |
+ * | `--border-radius`                      | Raio da borda do skeleton                            | `var(--border-radius-md)`       |
+ * | `--border-radius-text`                 | Raio da borda para a variante text                   | `var(--border-radius-md)`       |
+ * | `--border-radius-primary`              | Raio da borda do skeleton (tipo primary)             | `var(--border-radius-md)`       |
+ * | `--border-radius-content`              | Raio da borda do skeleton (tipo content)             | `var(--border-radius-lg)`       |
+ * | **Transições**                         |                                                      |                                 |
+ * | `--transition-property`                | Propriedade CSS da transição                         | `all`                           |
+ * | `--transition-duration`                | Duração da transição de cor                          | `var(--duration-moderate)`      |
+ * | `--transition-timing`                  | Função de temporização da transição/animação         | `var(--timing-continuous)`      |
+ * | **Animações**                          |                                                      |                                 |
+ * | `--animation-duration-pulse`           | Duração da animação de pulsação                      | `var(--duration-very-slow)`     |
+ * | `--animation-duration-shimmer`         | Duração da animação de brilho deslizante             | `var(--duration-ultra-slow)`    |
+ *
+ */
+class PoSkeletonBaseComponent {
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a variante visual do skeleton.
+     *
+     * Valores válidos:
+     * - `text`: Simula uma linha de texto (altura padrão: 1em)
+     * - `rectangle`: Forma retangular (proporção 3:1 por padrão)
+     * - `square`: Forma quadrada (largura e altura iguais)
+     * - `circle`: Forma circular (largura e altura iguais)
+     *
+     * @default `text`
+     */
+    variant = input(PoSkeletonVariant.text, { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'p-variant' });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo visual do skeleton, alterando sua cor de fundo.
+     *
+     * Valores válidos:
+     * - `normal`: Cor neutra clara (padrão)
+     * - `primary`: Cor neutra média
+     * - `content`: Fundo branco
+     *
+     * @default `normal`
+     */
+    type = input(PoSkeletonType.normal, { ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'p-type' });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo de animação do skeleton.
+     *
+     * Valores válidos:
+     * - `none`: Sem animação
+     * - `pulse`: Animação de pulsação
+     * - `shimmer`: Animação de brilho deslizante
+     *
+     * @default `shimmer`
+     */
+    animation = input(PoSkeletonAnimation.shimmer, { ...(ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {}), alias: 'p-animation' });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do skeleton para as variantes pré-definidas (`rectangle`, `square`, `circle`).
+     *
+     * Valores válidos:
+     * - `xs`: Extra pequeno (24px para square/circle, 72px x 24px para rectangle)
+     * - `sm`: Pequeno (32px para square/circle, 96px x 32px para rectangle)
+     * - `md`: Médio (48px para square/circle, 144px x 48px para rectangle)
+     * - `lg`: Grande (64px para square/circle, 192px x 64px para rectangle)
+     * - `xl`: Extra grande (96px para square/circle, 288px x 96px para rectangle)
+     * - `2xl`: Extra extra grande (144px para square/circle, 432px x 144px para rectangle)
+     *
+     * Esta propriedade é ignorada quando `p-width` ou `p-height` são definidos explicitamente.
+     *
+     * @default `md`
+     */
+    size = input(PoSkeletonSize.md, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'p-size' });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a largura do skeleton.
+     * Aceita valores CSS válidos (px, %, em, rem).
+     *
+     * Quando definido, sobrescreve a largura padrão da variante.
+     *
+     * @default `100%` para variante `text`, tamanho baseado em `p-size` para outras variantes
+     */
+    width = input('', { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), alias: 'p-width' });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a altura do skeleton.
+     * Aceita valores CSS válidos (px, %, em, rem).
+     *
+     * Quando definido, sobrescreve a altura padrão da variante.
+     */
+    height = input('', { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), alias: 'p-height' });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o raio da borda do skeleton.
+     * Aceita valores CSS válidos (px, %, em, rem).
+     *
+     * Esta propriedade sobrescreve o border-radius padrão de cada variante.
+     */
+    borderRadius = input('', { ...(ngDevMode ? { debugName: "borderRadius" } : /* istanbul ignore next */ {}), alias: 'p-border-radius' });
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a descrição acessível do conteúdo que está sendo carregado.
+     *
+     * Este texto será anunciado por leitores de tela, garantindo que usuários de tecnologias assistivas
+     * sejam informados sobre o estado de carregamento.
+     *
+     * **Quando usar:**
+     * - Use em **skeletons únicos** ou no **primeiro skeleton de um grupo** com descrição contextual
+     * - Evite usar em múltiplos skeletons dentro da mesma área sem contexto, para não causar repetição excessiva
+     *
+     * **Exemplos de uso:**
+     *
+     * ```html
+     * <!-- ✅ BOM: Skeleton único com contexto -->
+     * <po-skeleton p-aria-label="Carregando perfil do usuário"></po-skeleton>
+     *
+     * <!-- ✅ BOM: Grupo de skeletons - apenas o primeiro anuncia -->
+     * <po-skeleton p-aria-label="Carregando lista de produtos"></po-skeleton>
+     * <po-skeleton p-type="primary"></po-skeleton>
+     * <po-skeleton p-variant="circle"></po-skeleton>
+     *
+     * <!-- ❌ EVITE: Múltiplos skeletons com a mesma label -->
+     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
+     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
+     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" (repetitivo!) -->
+     * ```
+     *
+     * > **Boas práticas de acessibilidade:**
+     * > - Forneça contexto específico na label para que os usuários entendam o que está carregando
+     *
+     * > - Em casos complexos, considere usar um único `<div role="status">` para todo o grupo
+     * >   de skeletons, ao invés de múltiplas labels idênticas, para evitar repetição excessiva de anúncios
+     */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'p-aria-label' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: PoSkeletonBaseComponent, isStandalone: true, inputs: { variant: { classPropertyName: "variant", publicName: "p-variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "p-type", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "p-animation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "p-width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "p-height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "p-border-radius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "p-aria-label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-type", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-animation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-border-radius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-aria-label", required: false }] }] } });
+
+/**
+ * @docsExtends PoSkeletonBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-skeleton-basic" title="PO Skeleton Basic">
+ *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.html"> </file>
+ *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-labs" title="PO Skeleton Labs">
+ *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.html"> </file>
+ *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-credit-card" title="PO Skeleton - Credit Card">
+ *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.html"> </file>
+ *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.ts"> </file>
+ *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-widget-card" title="PO Skeleton - Widget Card">
+ *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.html"> </file>
+ *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.ts"> </file>
+ *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-user-profile" title="PO Skeleton - User Profile">
+ *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.html"> </file>
+ *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.ts"> </file>
+ *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-social-post" title="PO Skeleton - Social Post">
+ *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.html"> </file>
+ *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.ts"> </file>
+ *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-article" title="PO Skeleton - Article">
+ *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.html"> </file>
+ *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.ts"> </file>
+ *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.css"> </file>
  * </example>
  */
-class PoLoadingOverlayComponent extends PoLoadingOverlayBaseComponent {
-    changeDetector = inject(ChangeDetectorRef);
-    constructor() {
-        const languageService = inject(PoLanguageService);
-        super(languageService);
+class PoSkeletonComponent extends PoSkeletonBaseComponent {
+    sizeMap = {
+        [PoSkeletonSize.xs]: { square: 24, circle: 24, rectangleWidth: 72, rectangleHeight: 24 },
+        [PoSkeletonSize.sm]: { square: 32, circle: 32, rectangleWidth: 96, rectangleHeight: 32 },
+        [PoSkeletonSize.md]: { square: 48, circle: 48, rectangleWidth: 144, rectangleHeight: 48 },
+        [PoSkeletonSize.lg]: { square: 64, circle: 64, rectangleWidth: 192, rectangleHeight: 64 },
+        [PoSkeletonSize.xl]: { square: 96, circle: 96, rectangleWidth: 288, rectangleHeight: 96 },
+        [PoSkeletonSize.xxl]: { square: 144, circle: 144, rectangleWidth: 432, rectangleHeight: 144 }
+    };
+    defaultTextDimensions = { width: '100%', height: '1em' };
+    defaultBorderRadius = {
+        [PoSkeletonVariant.text]: undefined,
+        [PoSkeletonVariant.square]: undefined,
+        [PoSkeletonVariant.rectangle]: undefined,
+        [PoSkeletonVariant.circle]: '50%'
+    };
+    computedStyles = computed(() => {
+        const styles = {};
+        const variant = this.variant();
+        const size = this.size();
+        const sizeConfig = this.sizeMap[size];
+        const defaultDimensions = this.getDimensions(variant, sizeConfig);
+        styles['width'] = this.width() || defaultDimensions.width || '';
+        styles['height'] = this.height() || defaultDimensions.height || '';
+        const borderRadiusValue = this.borderRadius();
+        const defaultRadius = this.defaultBorderRadius[variant];
+        if (borderRadiusValue || defaultRadius) {
+            styles['border-radius'] = borderRadiusValue || defaultRadius;
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
+    computedClasses = computed(() => ({
+        'po-skeleton': true,
+        [`po-skeleton-${this.variant()}`]: true,
+        [`po-skeleton-type-${this.type()}`]: true,
+        [`po-skeleton-animation-${this.animation()}`]: true
+    }), ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
+    getDimensions(variant, sizeConfig) {
+        switch (variant) {
+            case PoSkeletonVariant.text:
+                return this.defaultTextDimensions;
+            case PoSkeletonVariant.square:
+                return { width: `${sizeConfig.square}px`, height: `${sizeConfig.square}px` };
+            case PoSkeletonVariant.circle:
+                return { width: `${sizeConfig.circle}px`, height: `${sizeConfig.circle}px` };
+            case PoSkeletonVariant.rectangle:
+                return { width: `${sizeConfig.rectangleWidth}px`, height: `${sizeConfig.rectangleHeight}px` };
+            default:
+                return { width: '', height: '' };
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: PoLoadingOverlayComponent, isStandalone: false, selector: "po-loading-overlay", usesInheritance: true, ngImport: i0, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\" [p-in-overlay]=\"true\"></po-loading>\n</po-overlay>\n", dependencies: [{ kind: "component", type: PoOverlayComponent, selector: "po-overlay" }, { kind: "component", type: PoLoadingComponent, selector: "po-loading" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoSkeletonComponent, isStandalone: false, selector: "po-skeleton", usesInheritance: true, ngImport: i0, template: "<div class=\"po-skeleton-wrapper\" [ngClass]=\"computedClasses()\" [ngStyle]=\"computedStyles()\" aria-hidden=\"true\"></div>\n@if (ariaLabel()) {\n  <span class=\"po-skeleton-aria-label\" role=\"status\" aria-live=\"polite\">{{ ariaLabel() }}</span>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLoadingOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-loading-overlay', standalone: false, template: "<po-overlay [p-screen-lock]=\"screenLock\">\n  <po-loading [p-text]=\"text\" [p-size]=\"size\" [p-in-overlay]=\"true\"></po-loading>\n</po-overlay>\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'po-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-skeleton-wrapper\" [ngClass]=\"computedClasses()\" [ngStyle]=\"computedStyles()\" aria-hidden=\"true\"></div>\n@if (ariaLabel()) {\n  <span class=\"po-skeleton-aria-label\" role=\"status\" aria-live=\"polite\">{{ ariaLabel() }}</span>\n}\n" }]
+        }] });
 
 /**
  * @description
@@ -6114,460 +6979,40 @@ class PoCheckboxBaseComponent {
      *
      * Não emite quando o novo valor é idêntico ao anterior (deduplicação automática).
      */
-    changeModel = new EventEmitter();
-    /**
-     * @optional
-     *
-     * @description
-     * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente.
-     * Retorna um objeto `KeyboardEvent` com informações sobre a tecla.
-     */
-    keydown = new EventEmitter();
-    //propriedade interna recebida do checkbox-group para verificar se o checkbox está ativo, inativo ou indeterminate
-    checkboxValue;
-    //propriedade interna recebida do checkbox-group para verificar se o checkbox é required
-    checkBoxRequired;
-    //propriedade interna recebida para desabilitar o tabindex do checkbox na utilização dentro de um list-box
-    disabladTabindex = false;
-    displayAdditionalHelp = false;
-    id = uuid();
-    modelLastUpdate;
-    propagateChange;
-    onTouched;
-    _disabled = false;
-    _size = undefined;
-    _initialSize = undefined;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o estado do *checkbox* como desabilitado.
-     *
-     * @default `false`
-     */
-    set disabled(value) {
-        this._disabled = value;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tamanho da caixa de seleção do componente:
-     * - `small`: 16x16 (disponível apenas para acessibilidade AA).
-     * - `medium`: 24x24.
-     * - `large`: 32x32.
-     *
-     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
-     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
-     *
-     * @default `medium`
-     *
-     */
-    set size(value) {
-        this._initialSize = value;
-        this.applySizeBasedOnA11y();
-    }
-    get size() {
-        return this._size ?? getDefaultSizeFn(PoCheckboxSize);
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`.
-     * > Para mais informações acesse: https://po-ui.io/documentation/po-helper.
-     *
-     * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
-     */
-    poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : /* istanbul ignore next */ {}), alias: 'p-helper' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede
-     * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma
-     * leitura clara.
-     *
-     * @default `false`
-     */
-    labelTextWrap = input(false, { ...(ngDevMode ? { debugName: "labelTextWrap" } : /* istanbul ignore next */ {}), alias: 'p-label-text-wrap' });
-    constructor(cd) {
-        this.cd = cd;
-    }
-    onThemeChange() {
-        this.applySizeBasedOnA11y();
-    }
-    changeValue() {
-        if (this.propagateChange) {
-            this.propagateChange(this.checkboxValue);
-        }
-        this.change.emit(this.checkboxValue);
-        this.controlChangeModelEmitter(this.checkboxValue);
-    }
-    checkOption(event, value) {
-        const target = event.target;
-        if (target.closest('po-helper')) {
-            return;
-        }
-        if (!this.disabled) {
-            value === 'mixed' ? this.changeModelValue(true) : this.changeModelValue(!value);
-            this.changeValue();
-        }
-    }
-    // Função implementada do ControlValueAccessor
-    // Usada para interceptar os estados de habilitado via forms api
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cd.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        if (value !== this.checkboxValue) {
-            this.changeModelValue(value);
-        }
-        if (value != null) {
-            this.controlChangeModelEmitter(this.checkboxValue);
-        }
-    }
-    controlChangeModelEmitter(value) {
-        if (this.modelLastUpdate !== value) {
-            this.changeModel.emit(value);
-            this.modelLastUpdate = value;
-        }
-    }
-    applySizeBasedOnA11y() {
-        const size = validateSizeFn(this._initialSize, PoCheckboxSize);
-        this._size = size;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoCheckboxBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: PoCheckboxBaseComponent, isStandalone: false, selector: "po-checkbox-base", inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, checkboxValue: { classPropertyName: "checkboxValue", publicName: "p-checkboxValue", isSignal: false, isRequired: false, transformFunction: null }, checkBoxRequired: { classPropertyName: "checkBoxRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabladTabindex: { classPropertyName: "disabladTabindex", publicName: "p-disabled-tabindex", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", blur: "p-blur", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoCheckboxBaseComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'po-checkbox-base',
-                    template: '',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { additionalHelpEventTrigger: [{
-                type: Input
-            }], additionalHelpTooltip: [{
-                type: Input,
-                args: ['p-additional-help-tooltip']
-            }], appendBox: [{
-                type: Input,
-                args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
-            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], help: [{
-                type: Input,
-                args: ['p-help']
-            }], name: [{
-                type: Input,
-                args: ['name']
-            }], autoFocus: [{
-                type: Input,
-                args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
-            }], label: [{
-                type: Input,
-                args: ['p-label']
-            }], additionalHelp: [{
-                type: Output,
-                args: ['p-additional-help']
-            }], blur: [{
-                type: Output,
-                args: ['p-blur']
-            }], change: [{
-                type: Output,
-                args: ['p-change']
-            }], changeModel: [{
-                type: Output,
-                args: ['p-change-model']
-            }], keydown: [{
-                type: Output,
-                args: ['p-keydown']
-            }], checkboxValue: [{
-                type: Input,
-                args: ['p-checkboxValue']
-            }], checkBoxRequired: [{
-                type: Input,
-                args: [{ alias: 'p-required', transform: convertToBoolean }]
-            }], disabladTabindex: [{
-                type: Input,
-                args: [{ alias: 'p-disabled-tabindex', transform: convertToBoolean }]
-            }], disabled: [{
-                type: Input,
-                args: [{ alias: 'p-disabled', transform: convertToBoolean }]
-            }], size: [{
-                type: Input,
-                args: ['p-size']
-            }, {
-                type: HostBinding,
-                args: ['attr.p-size']
-            }], poHelperComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-helper", required: false }] }], labelTextWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label-text-wrap", required: false }] }], onThemeChange: [{
-                type: HostListener,
-                args: ['window:PoUiThemeChange']
-            }] } });
-
-/**
- * @usedBy PoButtonComponent, PoWidgetComponent
- *
- * @description
- *
- * Estilos disponíveis do button.
- */
-var PoButtonKind;
-(function (PoButtonKind) {
-    /** Estilo primário, usado para ações principais que requerem maior destaque. */
-    PoButtonKind["primary"] = "primary";
-    /** Estilo secundário, usado como padrão, para ações comuns. */
-    PoButtonKind["secondary"] = "secondary";
-    /** Estilo terciário, ideal para ações menos importantes, sem fundo preenchido. */
-    PoButtonKind["tertiary"] = "tertiary";
-})(PoButtonKind || (PoButtonKind = {}));
-
-/**
- * @description
- *
- * Tamanhos da propriedade `p-size`. A medida `small` está disponível apenas para acessibilidade AA.
- */
-var PoButtonSize;
-(function (PoButtonSize) {
-    /** Define a altura do button como 32px. */
-    PoButtonSize["Small"] = "small";
-    /** Define a altura do button como 44px. */
-    PoButtonSize["Medium"] = "medium";
-    /** Define a altura do button como 56px. */
-    PoButtonSize["Large"] = "large";
-})(PoButtonSize || (PoButtonSize = {}));
-
-/**
- * @usedBy PoButtonComponent
- *
- * @description
- *
- * Enumeração que define os tipos possíveis para o `PoButtonComponent`. Estes tipos estão relacionados ao comportamento
- * do botão quando utilizado dentro de um formulário HTML.
- *
- * @example
- * No uso com o `PoButtonComponent`, a propriedade `p-type` pode ser utilizada para configurar o comportamento:
- *
- * ```
- * <po-button p-label="Enviar" p-type="submit"></po-button>
- * <po-button p-label="Cancelar" p-type="button"></po-button>
- * <po-button p-label="Redefinir" p-type="reset"></po-button>
- * ```
- */
-var PoButtonType;
-(function (PoButtonType) {
-    /**
-     * Define o botão como do tipo `submit`. Quando clicado, o formulário é enviado automaticamente,
-     * disparando o evento `submit`.
-     */
-    PoButtonType["Submit"] = "submit";
-    /**
-     * Define o botão como do tipo `button`. Este tipo de botão não possui comportamento padrão associado
-     * e é utilizado principalmente para ações programáticas como cliques e disparos de eventos customizados.
-     */
-    PoButtonType["Button"] = "button";
-    /**
-     * Define o botão como do tipo `reset`. Quando clicado, redefine os campos do formulário ao qual pertence
-     * para seus valores iniciais.
-     */
-    PoButtonType["Reset"] = "reset";
-})(PoButtonType || (PoButtonType = {}));
-
-/**
- * @description
- *
- * O `po-button` permite que o usuário execute ações predefinidas pelo desenvolvedor.
- *
- * Através dos tipos, é possível identificar a importância de cada ação.
- *
- * #### Boas práticas
- *
- * - Evite `labels` extensos que quebram o layout do `po-button`, use `labels` diretos, curtos e intuitivos.
- * - Utilize apenas um `po-button` configurado como `primary` por página.
- * - Para ações irreversíveis use sempre a propriedade `p-danger`.
- *
- * #### Acessibilidade tratada no componente
- *
- * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
- *
- * - Quando em foco, o botão é ativado usando as teclas de Espaço e Enter do teclado. [W3C WAI-ARIA 3.5 Button - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/#keyboard-interaction-3)
- * - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
- *
- * #### Tokens customizáveis
- *
- * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
- *
- * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
- *
- * | Propriedade                              | Descrição                                             | Valor Padrão                                      |
- * |------------------------------------------|-------------------------------------------------------|---------------------------------------------------|
- * | `--font-family`                          | Família tipográfica usada                             | `var(--font-family-theme)`                        |
- * | `--font-size`                            | Tamanho da fonte                                      | `var(--font-size-default)`                        |
- * | `--font-weight`                          | Peso da fonte                                         | `var(--font-weight-bold)`                         |
- * | `--line-height`                          | Tamanho da label                                      | `var(--line-height-none)`                         |
- * | `--border-radius`                        | Contém o valor do raio dos cantos do elemento&nbsp;   | `var(--border-radius-md)`                         |
- * | `--border-width`                         | Contém o valor da largura dos cantos do elemento&nbsp;| `var(--border-width-md)`                          |
- * | `--padding`                              | Preenchimento                                         | `0 1em`                                           |                                                                        | ---                                             |
- * | **Danger**                               |                                                       |                                                   |
- * | `--text-color-danger`                    | Cor do texto no estado danger                         | `var(--color-neutral-light-00)`                   |
- * | `--color-button-danger`                  | Cor do botão no estado danger                         | `var(--color-feedback-negative-dark)`             |
- * | `--color-danger-hover`                   | Cor de hover no estado danger                         | `var(--color-feedback-negative-darker)`           |
- * | `--color-danger-pressed`                 | Cor pressionada no estado danger                      | `var(--color-feedback-negative-darkest)`          |
- * | `--background-danger-hover`              | Cor de background de hover no estado danger           | `var(--color-feedback-negative-lighter)`          |
- * | `--border-color-danger-hover`            | Cor da borda de hover no estado danger                | `var(--color-feedback-negative-darkest)`          |
- * | `--background-danger-pressed`            | Cor de background pressionado no estado danger        | `var(--color-feedback-negative-light)`            |
- * | `--background-color-button-danger`&nbsp; | Cor de background do botão no estado danger           | `var(--color-transparent)`                        |
- * | **Default Values**                       |                                                       |                                                   |
- * | `--text-color`                           | Cor do texto                                          | `var(--color-neutral-light-00)`                   |
- * | `--color`                                | Cor principal do botão                                | `var(--color-action-default)`                     |
- * | `--background-color`                     | Cor de background                                     | `var(--color-transparent)`                        |
- * | `--border-color`                         | Cor da borda                                          | `var(--color-transparent)`                        |
- * | `--shadow`                               | Contém o valor da sombra do elemento                  | `var(--shadow-none)`                              |
- * | **Hover**                                |                                                       |                                                   |
- * | `--color-hover`                          | Cor principal no estado hover                         | `var(--color-action-hover)`                       |
- * | `--background-hover`                     | Cor de background no estado hover                     | `var(--color-brand-01-lighter)`                   |
- * | `--border-color-hover`                   | Cor da borda no estado hover                          | `var(--color-brand-01-darkest)`                   |
- * | **Focused**                              |                                                       |                                                   |
- * | `--outline-color-focused`                | Cor do outline do estado de focus                     | `var(--color-action-focus)`                       |
- * | **Pressed**                              |                                                       |                                                   |
- * | `--color-pressed`                        | Cor principal no estado de pressionado                | `var(--color-action-pressed)`                     |
- * | `--background-pressed`                   | Cor de background no estado de pressionado&nbsp;      | `var(--color-brand-01-light)`                     |
- * | **Disabled**                             |                                                       |                                                   |
- * | `--text-color-disabled`                  | Cor do texto no estado disabled                       | `var(--color-neutral-dark-70)`                    |
- * | `--color-disabled`                       | Cor principal no estado disabled                      | `var(--color-action-disabled)`                    |
- * | `--background-color-disabled`            | Cor de background no estado disabled                  | `var(--color-transparent)`                        |
- *
- */
-class PoButtonBaseComponent {
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Label do botão.
-     */
-    label = input(undefined, { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'p-label' });
-    /**
-     * @optional
-     *
-     * @description
-     * Ícone exibido ao lado esquerdo do label do botão.
-     *
-     * É possível usar qualquer um dos ícones da [Biblioteca de ícones](https://po-ui.io/icons), conforme exemplo:
-     * ```
-     * <po-button p-icon="an an-user" p-label="PO button"></po-button>
-     * ```
-     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
-     * esteja carregada no projeto:
-     * ```
-     * <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
-     * ```
-     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
-     * ```
-     * <po-button [p-icon]="template" p-label="button template ionic"></po-button>
-     *
-     * <ng-template #template>
-     *  <ion-icon style="font-size: inherit" name="heart"></ion-icon>
-     * </ng-template>
-     * ```
-     * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o.
-     */
-    icon = input(undefined, { ...(ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {}), alias: 'p-icon' });
-    /**
-     * @optional
-     *
-     * @description
-     * Define o tipo do botão.
-     *
-     * @default `PoButtonType.Button`
-     */
-    type = input(PoButtonType.Button, { ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'p-type' });
-    // Evento disparado ao sair do campo.
-    blur = new EventEmitter();
-    /** Ação que será executada quando o usuário clicar sobre o `po-button`. */
-    click = new EventEmitter();
-    _danger = false;
-    _disabled = false;
-    _loading = false;
-    _kind = PoButtonKind.secondary;
-    _size = undefined;
-    _initialSize = undefined;
-    hasSize = false;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Exibe um ícone de carregamento à esquerda do _label_ do botão.
-     *
-     * > Quando esta propriedade estiver habilitada, desabilitará o botão.
-     *
-     * @default `false`
-     */
-    set loading(value) {
-        this._loading = convertToBoolean(value);
-    }
-    get loading() {
-        return this._loading;
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Deve ser usado em ações irreversíveis que o usuário precisa ter cuidado ao executá-la, como a exclusão de um registro.
-     *
-     * > A propriedade `p-kind="tertiary"` será inativada ao utilizar esta propriedade.
-     */
-    set danger(value) {
-        this._danger = this.kind !== PoButtonKind.tertiary ? value : false;
-    }
-    get danger() {
-        return this._danger;
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o estilo visual do componente conforme valores especificados no enum `PoButtonKind`:
-     *  - `primary`: destaca o botão, sendo recomendado para ações principais.
-     *  - `secondary`: estilo padrão, ideal para ações secundárias.
-     *  - `tertiary`: exibe o botão sem preenchimento no fundo, indicado para ações opcionais.
+    changeModel = new EventEmitter();
+    /**
+     * @optional
      *
-     * @default `secondary`
+     * @description
+     * Evento disparado quando uma tecla é pressionada enquanto o foco está no componente.
+     * Retorna um objeto `KeyboardEvent` com informações sobre a tecla.
      */
-    set kind(value) {
-        this._kind = PoButtonKind[value] ? PoButtonKind[value] : PoButtonKind.secondary;
-    }
-    get kind() {
-        return this._kind;
-    }
+    keydown = new EventEmitter();
+    //propriedade interna recebida do checkbox-group para verificar se o checkbox está ativo, inativo ou indeterminate
+    checkboxValue;
+    //propriedade interna recebida do checkbox-group para verificar se o checkbox é required
+    checkBoxRequired;
+    //propriedade interna recebida para desabilitar o tabindex do checkbox na utilização dentro de um list-box
+    disabladTabindex = false;
+    displayAdditionalHelp = false;
+    id = uuid();
+    modelLastUpdate;
+    propagateChange;
+    onTouched;
+    _disabled = false;
+    _size = undefined;
+    _initialSize = undefined;
     /**
      * @optional
      *
      * @description
      *
-     * Desabilita o `po-button` e não permite que o usuário interaja com o mesmo.
+     * Define o estado do *checkbox* como desabilitado.
      *
      * @default `false`
      */
     set disabled(value) {
-        this._disabled = value === '' ? true : convertToBoolean(value);
+        this._disabled = value;
     }
     get disabled() {
         return this._disabled;
@@ -6577,178 +7022,168 @@ class PoButtonBaseComponent {
      *
      * @description
      *
-     * Define um `aria-label` para o `po-button`.
+     * Define o tamanho da caixa de seleção do componente:
+     * - `small`: 16x16 (disponível apenas para acessibilidade AA).
+     * - `medium`: 24x24.
+     * - `large`: 32x32.
      *
-     * Caso esta propriedade não seja informada será considerada a label do botão.
+     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
+     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
+     *
+     * @default `medium`
      *
-     * > Em caso de botões com apenas ícone a atribuição de valor à esta propriedade é muito importante para acessibilidade.
      */
-    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'p-aria-label' });
-    ariaExpanded = null;
+    set size(value) {
+        this._initialSize = value;
+        this.applySizeBasedOnA11y();
+    }
+    get size() {
+        return this._size ?? getDefaultSizeFn(PoCheckboxSize);
+    }
     /**
      * @optional
      *
      * @description
      *
-     * Define o `tabindex` do elemento `<button>` nativo interno.
+     * Define as opções do componente de ajuda (po-helper) que será exibido ao lado do label quando a propriedade `p-label` for definida, ou, ao lado do componente na ausência da propriedade `p-label`.
+     * > Para mais informações acesse: https://po-ui.io/documentation/po-helper.
      *
-     * Use `[tabindex]="-1"` para remover o botão da ordem de foco do teclado.
+     * > Ao configurar esta propriedade, o antigo ícone de ajuda adicional (`p-additional-help-tooltip` e `p-additional-help`) será ignorado.
      */
-    tabindex = null;
+    poHelperComponent = input(undefined, { ...(ngDevMode ? { debugName: "poHelperComponent" } : /* istanbul ignore next */ {}), alias: 'p-helper' });
     /**
      * @optional
      *
      * @description
      *
-     * Define o tamanho do componente:
-     * - `small`: altura de 32px (disponível apenas para acessibilidade AA).
-     * - `medium`: altura de 44px.
-     * - `large`: altura de 56px.
-     *
-     * > Caso a acessibilidade AA não esteja configurada, o tamanho `medium` será mantido.
-     * Para mais detalhes, consulte a documentação do [po-theme](https://po-ui.io/documentation/po-theme).
+     * Habilita a quebra automática do texto da propriedade `p-label`. Quando `p-label-text-wrap` for verdadeiro, o texto que excede
+     * o espaço disponível é transferido para a próxima linha em pontos apropriados para uma
+     * leitura clara.
      *
-     * @default `medium`
+     * @default `false`
      */
-    set size(value) {
-        this._initialSize = value;
-        this.applySizeBasedOnA11y();
-    }
-    get size() {
-        return this._size ?? getDefaultSizeFn(PoButtonSize);
+    labelTextWrap = input(false, { ...(ngDevMode ? { debugName: "labelTextWrap" } : /* istanbul ignore next */ {}), alias: 'p-label-text-wrap' });
+    constructor(cd) {
+        this.cd = cd;
     }
     onThemeChange() {
         this.applySizeBasedOnA11y();
     }
+    changeValue() {
+        if (this.propagateChange) {
+            this.propagateChange(this.checkboxValue);
+        }
+        this.change.emit(this.checkboxValue);
+        this.controlChangeModelEmitter(this.checkboxValue);
+    }
+    checkOption(event, value) {
+        const target = event.target;
+        if (target.closest('po-helper')) {
+            return;
+        }
+        if (!this.disabled) {
+            value === 'mixed' ? this.changeModelValue(true) : this.changeModelValue(!value);
+            this.changeValue();
+        }
+    }
+    // Função implementada do ControlValueAccessor
+    // Usada para interceptar os estados de habilitado via forms api
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cd.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        if (value !== this.checkboxValue) {
+            this.changeModelValue(value);
+        }
+        if (value != null) {
+            this.controlChangeModelEmitter(this.checkboxValue);
+        }
+    }
+    controlChangeModelEmitter(value) {
+        if (this.modelLastUpdate !== value) {
+            this.changeModel.emit(value);
+            this.modelLastUpdate = value;
+        }
+    }
     applySizeBasedOnA11y() {
-        const size = validateSizeFn(this._initialSize, PoButtonSize);
+        const size = validateSizeFn(this._initialSize, PoCheckboxSize);
         this._size = size;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoButtonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: PoButtonBaseComponent, isStandalone: false, selector: "po-button-base", inputs: { label: { classPropertyName: "label", publicName: "p-label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "p-icon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "p-type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "p-loading", isSignal: false, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "p-danger", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, kind: { classPropertyName: "kind", publicName: "p-kind", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "p-aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "p-aria-expanded", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "p-tabindex", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blur: "p-blur", click: "p-click" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-danger": "this.danger", "attr.p-kind": "this.kind", "attr.p-size": "this.size" } }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoCheckboxBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: PoCheckboxBaseComponent, isStandalone: false, selector: "po-checkbox-base", inputs: { additionalHelpEventTrigger: { classPropertyName: "additionalHelpEventTrigger", publicName: "additionalHelpEventTrigger", isSignal: false, isRequired: false, transformFunction: null }, additionalHelpTooltip: { classPropertyName: "additionalHelpTooltip", publicName: "p-additional-help-tooltip", isSignal: false, isRequired: false, transformFunction: null }, appendBox: { classPropertyName: "appendBox", publicName: "p-append-in-body", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, compactLabel: { classPropertyName: "compactLabel", publicName: "p-compact-label", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "p-help", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "p-auto-focus", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, label: { classPropertyName: "label", publicName: "p-label", isSignal: false, isRequired: false, transformFunction: null }, checkboxValue: { classPropertyName: "checkboxValue", publicName: "p-checkboxValue", isSignal: false, isRequired: false, transformFunction: null }, checkBoxRequired: { classPropertyName: "checkBoxRequired", publicName: "p-required", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabladTabindex: { classPropertyName: "disabladTabindex", publicName: "p-disabled-tabindex", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, disabled: { classPropertyName: "disabled", publicName: "p-disabled", isSignal: false, isRequired: false, transformFunction: convertToBoolean }, size: { classPropertyName: "size", publicName: "p-size", isSignal: false, isRequired: false, transformFunction: null }, poHelperComponent: { classPropertyName: "poHelperComponent", publicName: "p-helper", isSignal: true, isRequired: false, transformFunction: null }, labelTextWrap: { classPropertyName: "labelTextWrap", publicName: "p-label-text-wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { additionalHelp: "p-additional-help", blur: "p-blur", change: "p-change", changeModel: "p-change-model", keydown: "p-keydown" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoButtonBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoCheckboxBaseComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'po-button-base',
+                    selector: 'po-checkbox-base',
                     template: '',
                     standalone: false
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-icon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-type", required: false }] }], blur: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { additionalHelpEventTrigger: [{
+                type: Input
+            }], additionalHelpTooltip: [{
+                type: Input,
+                args: ['p-additional-help-tooltip']
+            }], appendBox: [{
+                type: Input,
+                args: [{ alias: 'p-append-in-body', transform: convertToBoolean }]
+            }], compactLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-compact-label", required: false }] }], help: [{
+                type: Input,
+                args: ['p-help']
+            }], name: [{
+                type: Input,
+                args: ['name']
+            }], autoFocus: [{
+                type: Input,
+                args: [{ alias: 'p-auto-focus', transform: convertToBoolean }]
+            }], label: [{
+                type: Input,
+                args: ['p-label']
+            }], additionalHelp: [{
+                type: Output,
+                args: ['p-additional-help']
+            }], blur: [{
                 type: Output,
                 args: ['p-blur']
-            }], click: [{
+            }], change: [{
                 type: Output,
-                args: ['p-click']
-            }], loading: [{
+                args: ['p-change']
+            }], changeModel: [{
+                type: Output,
+                args: ['p-change-model']
+            }], keydown: [{
+                type: Output,
+                args: ['p-keydown']
+            }], checkboxValue: [{
                 type: Input,
-                args: ['p-loading']
-            }], danger: [{
-                type: HostBinding,
-                args: ['attr.p-danger']
-            }, {
+                args: ['p-checkboxValue']
+            }], checkBoxRequired: [{
                 type: Input,
-                args: [{ alias: 'p-danger', transform: convertToBoolean }]
-            }], kind: [{
-                type: HostBinding,
-                args: ['attr.p-kind']
-            }, {
+                args: [{ alias: 'p-required', transform: convertToBoolean }]
+            }], disabladTabindex: [{
                 type: Input,
-                args: ['p-kind']
+                args: [{ alias: 'p-disabled-tabindex', transform: convertToBoolean }]
             }], disabled: [{
                 type: Input,
-                args: ['p-disabled']
-            }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-aria-label", required: false }] }], ariaExpanded: [{
-                type: Input,
-                args: ['p-aria-expanded']
-            }], tabindex: [{
-                type: Input,
-                args: ['p-tabindex']
+                args: [{ alias: 'p-disabled', transform: convertToBoolean }]
             }], size: [{
                 type: Input,
                 args: ['p-size']
             }, {
                 type: HostBinding,
                 args: ['attr.p-size']
-            }], onThemeChange: [{
+            }], poHelperComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-helper", required: false }] }], labelTextWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-label-text-wrap", required: false }] }], onThemeChange: [{
                 type: HostListener,
                 args: ['window:PoUiThemeChange']
             }] } });
 
-/**
- * @docsExtends PoButtonBaseComponent
- *
- * @example
- *
- * <example name="po-button-basic" title="PO Button Basic">
- *  <file name="sample-po-button-basic/sample-po-button-basic.component.html"> </file>
- *  <file name="sample-po-button-basic/sample-po-button-basic.component.ts"> </file>
- * </example>
- *
- * <example name="po-button-labs" title="PO Button Labs">
- *  <file name="sample-po-button-labs/sample-po-button-labs.component.html"> </file>
- *  <file name="sample-po-button-labs/sample-po-button-labs.component.ts"> </file>
- * </example>
- *
- * <example name="po-button-social-network" title="PO Button Social Network">
- *  <file name="sample-po-button-social-network/sample-po-button-social-network.component.html"> </file>
- *  <file name="sample-po-button-social-network/sample-po-button-social-network.component.ts"> </file>
- * </example>
- */
-class PoButtonComponent extends PoButtonBaseComponent {
-    elementRef;
-    buttonElement;
-    constructor(elementRef) {
-        super();
-        this.elementRef = elementRef;
-    }
-    onBlur() {
-        this.blur.emit();
-    }
-    /**
-     * Função que atribui foco ao componente.
-     *
-     * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
-     *
-     * ```
-     * import { PoButtonComponent } from '@po-ui/ng-components';
-     *
-     * ...
-     *
-     * @ViewChild(PoButtonComponent, { static: true }) button: PoButtonComponent;
-     *
-     * focusButton() {
-     *   this.button.focus();
-     * }
-     * ```
-     */
-    focus() {
-        if (!this.disabled) {
-            this.buttonElement.nativeElement.focus();
-        }
-    }
-    mapSizeToIcon(size) {
-        const sizeMap = {
-            small: 'xs',
-            medium: 'sm',
-            large: 'sm'
-        };
-        return sizeMap[size] || 'sm';
-    }
-    onClick() {
-        this.click.emit(null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoButtonComponent, isStandalone: false, selector: "po-button", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.tabindex]=\"tabindex\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: PoLoadingIconComponent, selector: "po-loading-icon", inputs: ["p-neutral-color", "p-size", "p-in-overlay"] }, { 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: PoButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  #button\n  class=\"po-button\"\n  [type]=\"type()\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.tabindex]=\"tabindex\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"po-button-loading-icon\">\n      <po-loading-icon [p-size]=\"mapSizeToIcon(size)\"></po-loading-icon>\n    </div>\n  }\n\n  <div class=\"po-button-container\">\n    @if (icon()) {\n      <po-icon class=\"po-button-icon\" [p-icon]=\"icon()\"></po-icon>\n    }\n    @if (label()) {\n      <span class=\"po-button-label\">{{ label() }}</span>\n    }\n  </div>\n</button>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { buttonElement: [{
-                type: ViewChild,
-                args: ['button', { static: true }]
-            }] } });
-
 class PoOverlayModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: PoOverlayModule, declarations: [PoOverlayComponent], imports: [CommonModule], exports: [PoOverlayComponent] });
@@ -9140,10 +9575,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 args: ['p-placeholder']
             }] } });
 
+const PO_LISTBOX_ROOT_KEY = 'ROOT';
 class PoListBoxComponent extends PoListBoxBaseComponent {
     element = inject(ElementRef);
     currentItems = [];
     currentGroup = null;
+    subItemsLoading = signal({}, ...(ngDevMode ? [{ debugName: "subItemsLoading" }] : /* istanbul ignore next */ []));
+    subItemsError = signal({}, ...(ngDevMode ? [{ debugName: "subItemsError" }] : /* istanbul ignore next */ []));
+    subItemsSkeletonPlaceholders = Array.from({ length: 3 }, (_, index) => index);
+    rootLazyLoad;
+    rootItemsLoad = new EventEmitter();
+    contentChange = new EventEmitter();
+    loadedSubItems = {};
+    lastLoadedGroup = null;
+    rootLoaded = false;
+    destroySubItems$ = new Subject();
     navigationStack = [];
     renderer = inject(Renderer2);
     router = inject(Router);
@@ -9171,6 +9617,9 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
     ngOnInit() {
         if (this.listboxSubitems) {
             this.currentItems = this.items;
+            if (this.rootLazyLoad && !this.rootLoaded) {
+                this.loadRootItemsAsync();
+            }
         }
     }
     ngAfterViewInit() {
@@ -9179,7 +9628,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         this.listboxItemList?.nativeElement.focus();
         if (this.listboxSubitems) {
             requestAnimationFrame(() => {
-                const firstItem = this.listboxItems?.first.nativeElement;
+                const firstItem = this.listboxItems?.first?.nativeElement;
                 if (firstItem) {
                     firstItem.focus();
                     setTimeout(() => {
@@ -9203,15 +9652,169 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         if (this.subscriptionScrollEvent?.unsubscribe) {
             this.subscriptionScrollEvent.unsubscribe();
         }
+        this.destroySubItems$.next();
+        this.destroySubItems$.complete();
     }
     openGroup(group, event) {
         event?.stopPropagation();
+        const key = this.getGroupKey(group);
+        if (this.subItemsLoading()[key]) {
+            return;
+        }
         this.navigationStack.push({
             group: this.currentGroup,
             items: this.currentItems
         });
         this.currentGroup = group;
-        this.currentItems = group.subItems || [];
+        if (typeof group.subItemsLazy === 'function') {
+            this.loadSubItemsAsync(group, key);
+        }
+        else {
+            this.currentItems = group.subItems || [];
+            this.focusGroupHeader();
+        }
+    }
+    loadSubItemsAsync(group, key) {
+        if (this.loadedSubItems[key]) {
+            this.currentItems = this.loadedSubItems[key];
+            this.clearSubItemsState(key);
+            this.focusGroupHeader();
+            return;
+        }
+        this.currentItems = [];
+        this.setSubItemsState(this.subItemsLoading, key, true);
+        this.setSubItemsState(this.subItemsError, key, false);
+        this.lastLoadedGroup = group;
+        this.subItemsLoad.emit(group);
+        this.focusGroupHeader();
+        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 => {
+                if (this.currentGroup !== group) {
+                    return;
+                }
+                const items = Array.isArray(subItems) ? subItems : [];
+                this.loadedSubItems[key] = items;
+                this.currentItems = items;
+                this.setSubItemsState(this.subItemsError, key, false);
+                this.focusGroupHeader();
+            },
+            error: () => {
+                if (this.currentGroup !== group) {
+                    return;
+                }
+                this.setSubItemsState(this.subItemsError, key, true);
+                this.focusGroupHeader();
+            }
+        });
+    }
+    onRetryKeydown(event, scope) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (scope === 'root') {
+            this.retryRootItems(event);
+        }
+        else {
+            this.retrySubItems(event);
+        }
+    }
+    retrySubItems(event) {
+        event?.stopPropagation();
+        if (!this.currentGroup) {
+            this.retryRootItems(event);
+            return;
+        }
+        const group = this.lastLoadedGroup;
+        if (!group || typeof group.subItemsLazy !== 'function') {
+            return;
+        }
+        const key = this.getGroupKey(group);
+        delete this.loadedSubItems[key];
+        this.loadSubItemsAsync(group, key);
+    }
+    loadRootItemsAsync() {
+        if (!this.rootLazyLoad) {
+            return;
+        }
+        const key = PO_LISTBOX_ROOT_KEY;
+        if (this.subItemsLoading()[key]) {
+            return;
+        }
+        if (this.rootLoaded && this.loadedSubItems[key]) {
+            this.currentItems = this.loadedSubItems[key];
+            this.clearSubItemsState(key);
+            return;
+        }
+        this.currentItems = [];
+        this.setSubItemsState(this.subItemsLoading, key, true);
+        this.setSubItemsState(this.subItemsError, key, false);
+        this.rootItemsLoad.emit();
+        this.rootLazyLoad()
+            .pipe(takeUntil(this.destroySubItems$), finalize(() => {
+            this.setSubItemsState(this.subItemsLoading, key, false);
+            this.changeDetector.detectChanges();
+            this.contentChange.emit();
+        }))
+            .subscribe({
+            next: items => {
+                const resolved = Array.isArray(items) ? items : [];
+                this.loadedSubItems[key] = resolved;
+                this.currentItems = resolved;
+                this.rootLoaded = true;
+                this.setSubItemsState(this.subItemsError, key, false);
+            },
+            error: () => {
+                this.setSubItemsState(this.subItemsError, key, true);
+            }
+        });
+    }
+    retryRootItems(event) {
+        event?.stopPropagation();
+        this.rootLoaded = false;
+        delete this.loadedSubItems[PO_LISTBOX_ROOT_KEY];
+        this.loadRootItemsAsync();
+    }
+    isRootLoading() {
+        return !!this.subItemsLoading()[PO_LISTBOX_ROOT_KEY];
+    }
+    isRootError() {
+        return !!this.subItemsError()[PO_LISTBOX_ROOT_KEY];
+    }
+    isSubItemsLoading(group) {
+        return !!group && !!this.subItemsLoading()[this.getGroupKey(group)];
+    }
+    isSubItemsError(group) {
+        return !!group && !!this.subItemsError()[this.getGroupKey(group)];
+    }
+    isFunction(value) {
+        return typeof value === 'function';
+    }
+    isGroupItem(item) {
+        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) {
+            group.$id = uuid();
+        }
+        return group.$id;
+    }
+    setSubItemsState(state, key, value) {
+        state.update(current => ({ ...current, [key]: value }));
+    }
+    clearSubItemsState(key) {
+        this.setSubItemsState(this.subItemsLoading, key, false);
+        this.setSubItemsState(this.subItemsError, key, false);
+    }
+    focusGroupHeader() {
         requestAnimationFrame(() => {
             const firstItem = this.listboxGroupHeader?.nativeElement;
             if (firstItem) {
@@ -9245,13 +9848,20 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         });
     }
     onKeydownGoBack(event, currentGroup) {
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' || event.code === 'ArrowLeft') {
             this.goBack(event);
         }
-        if (event?.code === 'Escape' || event.code === 'Tab') {
+        if (event?.code === 'Escape') {
+            this.closeEvent.emit({ reason: 'escape', origin: 'keyboard' });
+            return;
+        }
+        if (event.code === 'Tab') {
             if (event.code === 'Tab' && !event.shiftKey && currentGroup?.$subItemTemplate) {
                 return;
             }
+            if (!event.shiftKey && currentGroup && this.isSubItemsError(currentGroup)) {
+                return;
+            }
             this.closeEvent.emit();
         }
     }
@@ -9284,7 +9894,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
         if (itemListAction?.url && !isDisabled && isVisible) {
             return this.openUrl(itemListAction.url);
         }
-        if (itemListAction?.subItems?.length || itemListAction?.$subItemTemplate) {
+        if (this.hasSubItems(itemListAction)) {
             this.openGroup(itemListAction, event);
         }
         else if (this.listboxSubitems) {
@@ -9301,33 +9911,54 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
     }
     onKeyDown(itemListAction, event) {
         event?.preventDefault();
+        if (event?.code === 'ArrowRight') {
+            this.handleArrowRightKey(itemListAction, event);
+            return;
+        }
+        if (event?.code === 'ArrowLeft' && this.listboxSubitems && this.currentGroup) {
+            this.goBack(event);
+            return;
+        }
         if ((event && event.code === 'Enter') || event.code === 'Space') {
-            if (itemListAction.type === 'footerAction') {
-                this.handleFooterActionListbox();
-                return;
-            }
-            // Cenário em que o `Po-Search` (com listbox) tem nos items ação ou url
-            if (this.type === 'option' && (itemListAction?.action || itemListAction?.url)) {
-                this.onSelectItem(itemListAction);
-                this.optionClicked(itemListAction);
-                return;
-            }
-            switch (this.type) {
-                case 'check':
-                    this.onSelectCheckBoxItem(itemListAction);
-                    break;
-                case 'option':
-                    this.optionClicked(itemListAction);
-                    break;
-                case 'action':
-                    this.onSelectItem(itemListAction);
-                    break;
-            }
+            this.handleEnterOrSpaceKey(itemListAction);
+            return;
+        }
+        if (event?.code === 'Escape') {
+            this.closeEvent.emit({ reason: 'escape', origin: 'keyboard' });
+            return;
         }
-        if ((event && event.code === 'Escape') || event.code === 'Tab') {
+        if (event.code === 'Tab') {
             this.closeEvent.emit();
         }
     }
+    handleArrowRightKey(itemListAction, event) {
+        if (this.hasSubItems(itemListAction)) {
+            this.onSelectItem(itemListAction, event);
+        }
+    }
+    handleEnterOrSpaceKey(itemListAction) {
+        if (itemListAction.type === 'footerAction') {
+            this.handleFooterActionListbox();
+            return;
+        }
+        // Cenário em que o `Po-Search` (com listbox) tem nos items ação ou url
+        if (this.type === 'option' && (itemListAction?.action || itemListAction?.url)) {
+            this.onSelectItem(itemListAction);
+            this.optionClicked(itemListAction);
+            return;
+        }
+        switch (this.type) {
+            case 'check':
+                this.onSelectCheckBoxItem(itemListAction);
+                break;
+            case 'option':
+                this.optionClicked(itemListAction);
+                break;
+            case 'action':
+                this.onSelectItem(itemListAction);
+                break;
+        }
+    }
     checkboxClicked({ option, selected }) {
         if (this.type === 'check') {
             this.change.emit({ selected, option });
@@ -9508,12 +10139,21 @@ 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", 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        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible()\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length || 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      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, 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 {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'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: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "component", type: PoLoadingOverlayComponent, selector: "po-loading-overlay" }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "directive", type: i5.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i5.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        @for (item of currentItems; track item) {\n          <li\n            #listboxItem\n            [class.po-listbox-item]=\"visible()\"\n            [cdkOption]=\"item[fieldLabel]\"\n            [cdkOptionDisabled]=\"returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false\"\n            [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n            (click)=\"onSelectItem(item, $event)\"\n            (keydown)=\"onKeyDown(item, $event)\"\n          >\n            @if (item.subItems?.length || 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      @if (currentGroup) {\n        <li\n          #listboxGroupHeader\n          class=\"po-listbox-group-header\"\n          [cdkOption]=\"'back-option'\"\n          [attr.aria-label]=\"literals?.backToPreviousGroup\"\n          (click)=\"goBack($event)\"\n          (keydown)=\"onKeydownGoBack($event, 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 {\n          @for (subItem of currentItems; track subItem.label) {\n            @if (subItem.subItems?.length) {\n              <li\n                [cdkOption]=\"subItem[fieldLabel]\"\n                (click)=\"onSelectItem(subItem, $event)\"\n                (keydown)=\"onKeyDown(subItem, $event)\"\n              >\n                <po-item-list\n                  [p-label]=\"subItem.label\"\n                  [p-item]=\"subItem\"\n                  [p-separator]=\"subItem.separator || separator\"\n                  [p-icon]=\"'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" }]
-        }], ctorParameters: () => [], propDecorators: { listbox: [{
+            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 }]
             }], listboxItemList: [{
@@ -9539,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
@@ -9571,6 +10231,8 @@ class PoPopupComponent extends PoPopupBaseComponent {
     changeDetector = inject(ChangeDetectorRef);
     popupRef;
     listbox;
+    popupOffset = 8;
+    viewportMargin = 8;
     //utilizado apenas no theme builder
     poListBoxRef;
     ngAfterViewInit() {
@@ -9583,10 +10245,13 @@ class PoPopupComponent extends PoPopupBaseComponent {
      *
      * > Por padrão, este comportamento é acionado somente ao clicar fora do componente ou em determinada ação / url.
      */
-    close() {
+    close(closeEvent) {
         this.removeListeners();
         this.showPopup = false;
         this.closeEvent.emit();
+        if (closeEvent?.reason === 'escape') {
+            this.focusTarget();
+        }
     }
     onActionClick(popupAction) {
         const actionNoDisabled = popupAction && !this.returnBooleanValue(popupAction, 'disabled');
@@ -9609,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')
@@ -9636,7 +10301,19 @@ 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;
+        }
         if (this.actions.every(item => item.visible === false)) {
             return true;
         }
@@ -9651,11 +10328,24 @@ class PoPopupComponent extends PoPopupBaseComponent {
         const popupHeaderTemplate = this.popupRef && this.popupRef.nativeElement.querySelector('[p-popup-header-template]');
         return !(popupHeaderTemplate && popupHeaderTemplate.contains(event.target));
     }
+    isEventInsideElement(event, element) {
+        if (!element) {
+            return false;
+        }
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        return path.length ? path.includes(element) : element.contains(event.target);
+    }
     clickedOutTarget(event) {
-        return this.target && !this.target.contains(event.target);
+        return this.target && !this.isEventInsideElement(event, this.target);
+    }
+    clickedOutPopup(event) {
+        return this.popupRef?.nativeElement && !this.isEventInsideElement(event, this.popupRef.nativeElement);
     }
     closePopupOnClickout(event) {
-        if (this.clickedOutTarget(event) && this.clickedOutDisabledItem(event) && this.clickedOutHeaderTemplate(event)) {
+        if (this.clickedOutTarget(event) &&
+            this.clickedOutPopup(event) &&
+            this.clickedOutDisabledItem(event) &&
+            this.clickedOutHeaderTemplate(event)) {
             this.close();
         }
     }
@@ -9697,28 +10387,107 @@ 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();
         }
     }
+    focusTarget() {
+        const focusableTarget = this.target;
+        if (focusableTarget && typeof focusableTarget.focus === 'function') {
+            focusableTarget.focus();
+        }
+    }
     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 && !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-close)=\"close()\"\n        (p-click-item)=\"onClickItem($event)\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: PoListBoxComponent, selector: "po-listbox" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "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 && !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-close)=\"close()\"\n        (p-click-item)=\"onClickItem($event)\"\n      >\n        <ng-content p-popup-header-template select=\"[p-popup-header-template]\"></ng-content>\n      </po-listbox>\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'po-popup', providers: [PoControlPositionService], standalone: false, template: "@if (showPopup && (actions.length || 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 }]
@@ -10062,6 +10831,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 args: ['popup']
             }] } });
 
+/**
+ * @description
+ *
+ * Módulo do componente po-skeleton.
+ */
+class PoSkeletonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, declarations: [PoSkeletonComponent], imports: [CommonModule], exports: [PoSkeletonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [PoSkeletonComponent],
+                    exports: [PoSkeletonComponent]
+                }]
+        }] });
+
 class PoLabelModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: PoLabelModule, declarations: [PoLabelComponent], imports: [CommonModule, PoHelperModule], exports: [PoLabelComponent] });
@@ -10111,15 +10899,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
 
 class PoListBoxModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxModule, declarations: [PoListBoxComponent, PoItemListComponent, PoSearchListComponent], imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, PoTagModule, CdkListboxModule], exports: [PoListBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxModule, imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, PoTagModule, CdkListboxModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxModule, declarations: [PoListBoxComponent, PoItemListComponent, PoSearchListComponent], imports: [CommonModule,
+            PoButtonModule,
+            PoCheckboxModule,
+            PoIconModule,
+            PoLoadingModule,
+            PoSkeletonModule,
+            PoTagModule,
+            CdkListboxModule], exports: [PoListBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxModule, imports: [CommonModule,
+            PoButtonModule,
+            PoCheckboxModule,
+            PoIconModule,
+            PoLoadingModule,
+            PoSkeletonModule,
+            PoTagModule,
+            CdkListboxModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoListBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PoListBoxComponent, PoItemListComponent, PoSearchListComponent],
                     exports: [PoListBoxComponent],
-                    imports: [CommonModule, PoCheckboxModule, PoIconModule, PoLoadingModule, PoTagModule, CdkListboxModule]
+                    imports: [
+                        CommonModule,
+                        PoButtonModule,
+                        PoCheckboxModule,
+                        PoIconModule,
+                        PoLoadingModule,
+                        PoSkeletonModule,
+                        PoTagModule,
+                        CdkListboxModule
+                    ]
                 }]
         }] });
 
@@ -15874,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" }, { 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,
@@ -18030,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
@@ -18367,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 };
                 }
             }
@@ -19389,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 = {};
@@ -20803,18 +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. */
+    /**
+     * Lista de ações que serão exibidas no componente.
+     * Aceita um *array* de `PoDropdownAction`.
+     */
     set actions(value) {
-        this._actions = Array.isArray(value) ? value : [];
+        if (typeof value === 'function') {
+            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
      *
@@ -20882,6 +21708,38 @@ class PoDropdownBaseComponent {
     get position() {
         return this._position;
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado a cada clique em um item do menu.
+     * Retorna o item clicado (`PoDropdownAction`).
+     *
+     * > Não é disparado para a ação interna de voltar (`goBack`).
+     */
+    clickItem = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * 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.
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
+     */
+    subItemsLoad = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado no momento em que a requisição assíncrona do nível raiz é iniciada
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
+     */
+    rootItemsLoad = new EventEmitter();
     get popupCustomPositions() {
         if (this._position === 'bottom-right') {
             return ['bottom-right', 'top-right'];
@@ -20902,7 +21760,7 @@ class PoDropdownBaseComponent {
         this._size = size;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoDropdownBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoDropdownBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], actions: ["p-actions", "actions"], disabled: ["p-disabled", "disabled"], size: ["p-size", "size"], position: ["p-position", "position"] }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PoDropdownBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], actions: ["p-actions", "actions"], disabled: ["p-disabled", "disabled"], size: ["p-size", "size"], position: ["p-position", "position"] }, outputs: { clickItem: "p-click-item", subItemsLoad: "p-sub-items-load", rootItemsLoad: "p-root-items-load" }, host: { listeners: { "window:PoUiThemeChange": "onThemeChange()" }, properties: { "attr.p-size": "this.size" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoDropdownBaseComponent, decorators: [{
             type: Directive
@@ -20924,6 +21782,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
             }], position: [{
                 type: Input,
                 args: ['p-position']
+            }], clickItem: [{
+                type: Output,
+                args: ['p-click-item']
+            }], subItemsLoad: [{
+                type: Output,
+                args: ['p-sub-items-load']
+            }], rootItemsLoad: [{
+                type: Output,
+                args: ['p-root-items-load']
             }], onThemeChange: [{
                 type: HostListener,
                 args: ['window:PoUiThemeChange']
@@ -20939,11 +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-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>
@@ -20953,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);
@@ -20969,15 +21841,32 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
     toggleDropdown() {
         this.dropdownRef && !this.open && !this.disabled ? this.showDropdown() : this.hideDropdown();
     }
+    onPopupClose() {
+        if (!this.open) {
+            return;
+        }
+        this.hideDropdown(false);
+    }
+    isEventInsideElement(event, element) {
+        if (!element) {
+            return false;
+        }
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        return path.length ? path.includes(element) : element.contains(event.target);
+    }
     checkClickArea(event) {
-        return this.dropdownRef?.nativeElement.contains(event.target);
+        const clickedOnTrigger = this.isEventInsideElement(event, this.dropdownRef?.nativeElement);
+        const clickedOnPopup = this.isEventInsideElement(event, this.popupRef?.popupRef?.nativeElement);
+        return clickedOnTrigger || clickedOnPopup;
     }
-    hideDropdown() {
+    hideDropdown(shouldClosePopup = true) {
         this.icon = 'ICON_ARROW_DOWN';
         this.removeListeners();
-        this.popupRef.close();
         this.open = false;
         this.changeDetector.detectChanges();
+        if (shouldClosePopup) {
+            this.popupRef.close();
+        }
     }
     initializeListeners() {
         this.clickoutListener = this.renderer.listen('document', 'click', (event) => {
@@ -20989,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;
@@ -21020,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>\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>\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 }]
@@ -41966,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" }, { 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,
@@ -48229,7 +49128,7 @@ class PoLookupBaseComponent {
             }
             this.getSubscription = this.service
                 .getObjectByValue(value, this.filterParams)
-                .pipe(finalize(() => {
+                .pipe(finalize$1(() => {
                 this.disabled = oldDisable;
                 if (this.control) {
                     this.control.updateValueAndValidity();
@@ -50291,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" }], 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,
@@ -68022,392 +68921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                 }]
         }] });
 
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define os tipos de animação do componente `po-skeleton`.
- */
-var PoSkeletonAnimation;
-(function (PoSkeletonAnimation) {
-    /** Sem animação */
-    PoSkeletonAnimation["none"] = "none";
-    /** Animação de pulsação */
-    PoSkeletonAnimation["pulse"] = "pulse";
-    /** Animação de brilho deslizante */
-    PoSkeletonAnimation["shimmer"] = "shimmer";
-})(PoSkeletonAnimation || (PoSkeletonAnimation = {}));
-
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define os tamanhos disponíveis para o componente `po-skeleton`.
- */
-var PoSkeletonSize;
-(function (PoSkeletonSize) {
-    /** Tamanho extra pequeno */
-    PoSkeletonSize["xs"] = "xs";
-    /** Tamanho pequeno */
-    PoSkeletonSize["sm"] = "sm";
-    /** Tamanho médio */
-    PoSkeletonSize["md"] = "md";
-    /** Tamanho grande */
-    PoSkeletonSize["lg"] = "lg";
-    /** Tamanho extra grande */
-    PoSkeletonSize["xl"] = "xl";
-    /** Tamanho extra extra grande */
-    PoSkeletonSize["xxl"] = "2xl";
-})(PoSkeletonSize || (PoSkeletonSize = {}));
-
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define os tipos visuais disponíveis para o componente `po-skeleton`.
- */
-var PoSkeletonType;
-(function (PoSkeletonType) {
-    /** Tipo padrão com cor neutra clara */
-    PoSkeletonType["normal"] = "normal";
-    /** Tipo primário com cor neutra média */
-    PoSkeletonType["primary"] = "primary";
-    /** Tipo de conteúdo com fundo branco */
-    PoSkeletonType["content"] = "content";
-})(PoSkeletonType || (PoSkeletonType = {}));
-
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define as variantes visuais do componente `po-skeleton`.
- */
-var PoSkeletonVariant;
-(function (PoSkeletonVariant) {
-    /** Variante para simular texto */
-    PoSkeletonVariant["text"] = "text";
-    /** Variante retangular (largura maior que altura) */
-    PoSkeletonVariant["rectangle"] = "rectangle";
-    /** Variante quadrada (largura igual à altura) */
-    PoSkeletonVariant["square"] = "square";
-    /** Variante circular */
-    PoSkeletonVariant["circle"] = "circle";
-})(PoSkeletonVariant || (PoSkeletonVariant = {}));
-
-/**
- * @description
- *
- * O componente `po-skeleton` é utilizado para exibir placeholders durante o carregamento de conteúdo,
- * melhorando a experiência do usuário ao indicar que a informação está sendo processada.
- *
- * Ele oferece diferentes variantes visuais (texto, retângulo, círculo) e animações (pulse, shimmer)
- * para simular diversos tipos de conteúdo em estado de carregamento.
- *
- * #### Tokens customizáveis
- *
- * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
- *
- * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
- *
- * | Propriedade                            | Descrição                                            | Valor Padrão                    |
- * |----------------------------------------|------------------------------------------------------|---------------------------------|
- * | **Cores**                              |                                                      |                                 |
- * | `--color`                              | Cor de fundo do skeleton (tipo normal)               | `var(--color-neutral-light-20)` |
- * | `--color-primary`                      | Cor de fundo do skeleton (tipo primary)              | `var(--color-neutral-mid-40)`   |
- * | `--color-content`                      | Cor de fundo do skeleton (tipo content)              | `var(--color-neutral-light-00)` |
- * | `--shimmer-highlight`                  | Cor de destaque do shimmer (tipo normal)             | `var(--color-neutral-light-30)` |
- * | `--shimmer-highlight-primary`          | Cor de destaque do shimmer (tipo primary)            | `var(--color-neutral-light-20)` |
- * | `--shimmer-highlight-content`          | Cor de destaque do shimmer (tipo content)            | `var(--color-neutral-light-05)` |
- * | **Espaçamento**                        |                                                      |                                 |
- * | `--margin-bottom`                      | Margem inferior do skeleton                          | `var(--spacing-xs)`             |
- * | **Bordas**                             |                                                      |                                 |
- * | `--border-radius`                      | Raio da borda do skeleton                            | `var(--border-radius-md)`       |
- * | `--border-radius-text`                 | Raio da borda para a variante text                   | `var(--border-radius-md)`       |
- * | `--border-radius-primary`              | Raio da borda do skeleton (tipo primary)             | `var(--border-radius-md)`       |
- * | `--border-radius-content`              | Raio da borda do skeleton (tipo content)             | `var(--border-radius-lg)`       |
- * | **Transições**                         |                                                      |                                 |
- * | `--transition-property`                | Propriedade CSS da transição                         | `all`                           |
- * | `--transition-duration`                | Duração da transição de cor                          | `var(--duration-moderate)`      |
- * | `--transition-timing`                  | Função de temporização da transição/animação         | `var(--timing-continuous)`      |
- * | **Animações**                          |                                                      |                                 |
- * | `--animation-duration-pulse`           | Duração da animação de pulsação                      | `var(--duration-very-slow)`     |
- * | `--animation-duration-shimmer`         | Duração da animação de brilho deslizante             | `var(--duration-ultra-slow)`    |
- *
- */
-class PoSkeletonBaseComponent {
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a variante visual do skeleton.
-     *
-     * Valores válidos:
-     * - `text`: Simula uma linha de texto (altura padrão: 1em)
-     * - `rectangle`: Forma retangular (proporção 3:1 por padrão)
-     * - `square`: Forma quadrada (largura e altura iguais)
-     * - `circle`: Forma circular (largura e altura iguais)
-     *
-     * @default `text`
-     */
-    variant = input(PoSkeletonVariant.text, { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'p-variant' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tipo visual do skeleton, alterando sua cor de fundo.
-     *
-     * Valores válidos:
-     * - `normal`: Cor neutra clara (padrão)
-     * - `primary`: Cor neutra média
-     * - `content`: Fundo branco
-     *
-     * @default `normal`
-     */
-    type = input(PoSkeletonType.normal, { ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'p-type' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tipo de animação do skeleton.
-     *
-     * Valores válidos:
-     * - `none`: Sem animação
-     * - `pulse`: Animação de pulsação
-     * - `shimmer`: Animação de brilho deslizante
-     *
-     * @default `shimmer`
-     */
-    animation = input(PoSkeletonAnimation.shimmer, { ...(ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {}), alias: 'p-animation' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tamanho do skeleton para as variantes pré-definidas (`rectangle`, `square`, `circle`).
-     *
-     * Valores válidos:
-     * - `xs`: Extra pequeno (24px para square/circle, 72px x 24px para rectangle)
-     * - `sm`: Pequeno (32px para square/circle, 96px x 32px para rectangle)
-     * - `md`: Médio (48px para square/circle, 144px x 48px para rectangle)
-     * - `lg`: Grande (64px para square/circle, 192px x 64px para rectangle)
-     * - `xl`: Extra grande (96px para square/circle, 288px x 96px para rectangle)
-     * - `2xl`: Extra extra grande (144px para square/circle, 432px x 144px para rectangle)
-     *
-     * Esta propriedade é ignorada quando `p-width` ou `p-height` são definidos explicitamente.
-     *
-     * @default `md`
-     */
-    size = input(PoSkeletonSize.md, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'p-size' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a largura do skeleton.
-     * Aceita valores CSS válidos (px, %, em, rem).
-     *
-     * Quando definido, sobrescreve a largura padrão da variante.
-     *
-     * @default `100%` para variante `text`, tamanho baseado em `p-size` para outras variantes
-     */
-    width = input('', { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), alias: 'p-width' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a altura do skeleton.
-     * Aceita valores CSS válidos (px, %, em, rem).
-     *
-     * Quando definido, sobrescreve a altura padrão da variante.
-     */
-    height = input('', { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), alias: 'p-height' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o raio da borda do skeleton.
-     * Aceita valores CSS válidos (px, %, em, rem).
-     *
-     * Esta propriedade sobrescreve o border-radius padrão de cada variante.
-     */
-    borderRadius = input('', { ...(ngDevMode ? { debugName: "borderRadius" } : /* istanbul ignore next */ {}), alias: 'p-border-radius' });
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a descrição acessível do conteúdo que está sendo carregado.
-     *
-     * Este texto será anunciado por leitores de tela, garantindo que usuários de tecnologias assistivas
-     * sejam informados sobre o estado de carregamento.
-     *
-     * **Quando usar:**
-     * - Use em **skeletons únicos** ou no **primeiro skeleton de um grupo** com descrição contextual
-     * - Evite usar em múltiplos skeletons dentro da mesma área sem contexto, para não causar repetição excessiva
-     *
-     * **Exemplos de uso:**
-     *
-     * ```html
-     * <!-- ✅ BOM: Skeleton único com contexto -->
-     * <po-skeleton p-aria-label="Carregando perfil do usuário"></po-skeleton>
-     *
-     * <!-- ✅ BOM: Grupo de skeletons - apenas o primeiro anuncia -->
-     * <po-skeleton p-aria-label="Carregando lista de produtos"></po-skeleton>
-     * <po-skeleton p-type="primary"></po-skeleton>
-     * <po-skeleton p-variant="circle"></po-skeleton>
-     *
-     * <!-- ❌ EVITE: Múltiplos skeletons com a mesma label -->
-     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
-     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
-     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" (repetitivo!) -->
-     * ```
-     *
-     * > **Boas práticas de acessibilidade:**
-     * > - Forneça contexto específico na label para que os usuários entendam o que está carregando
-     *
-     * > - Em casos complexos, considere usar um único `<div role="status">` para todo o grupo
-     * >   de skeletons, ao invés de múltiplas labels idênticas, para evitar repetição excessiva de anúncios
-     */
-    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'p-aria-label' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: PoSkeletonBaseComponent, isStandalone: true, inputs: { variant: { classPropertyName: "variant", publicName: "p-variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "p-type", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "p-animation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "p-size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "p-width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "p-height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "p-border-radius", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "p-aria-label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonBaseComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-type", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-animation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-border-radius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "p-aria-label", required: false }] }] } });
-
-/**
- * @docsExtends PoSkeletonBaseComponent
- *
- * @example
- *
- * <example name="po-skeleton-basic" title="PO Skeleton Basic">
- *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.html"> </file>
- *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.ts"> </file>
- * </example>
- *
- * <example name="po-skeleton-labs" title="PO Skeleton Labs">
- *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.html"> </file>
- *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.ts"> </file>
- * </example>
- *
- * <example name="po-skeleton-credit-card" title="PO Skeleton - Credit Card">
- *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.html"> </file>
- *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.ts"> </file>
- *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-widget-card" title="PO Skeleton - Widget Card">
- *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.html"> </file>
- *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.ts"> </file>
- *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-user-profile" title="PO Skeleton - User Profile">
- *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.html"> </file>
- *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.ts"> </file>
- *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-social-post" title="PO Skeleton - Social Post">
- *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.html"> </file>
- *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.ts"> </file>
- *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-article" title="PO Skeleton - Article">
- *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.html"> </file>
- *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.ts"> </file>
- *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.css"> </file>
- * </example>
- */
-class PoSkeletonComponent extends PoSkeletonBaseComponent {
-    sizeMap = {
-        [PoSkeletonSize.xs]: { square: 24, circle: 24, rectangleWidth: 72, rectangleHeight: 24 },
-        [PoSkeletonSize.sm]: { square: 32, circle: 32, rectangleWidth: 96, rectangleHeight: 32 },
-        [PoSkeletonSize.md]: { square: 48, circle: 48, rectangleWidth: 144, rectangleHeight: 48 },
-        [PoSkeletonSize.lg]: { square: 64, circle: 64, rectangleWidth: 192, rectangleHeight: 64 },
-        [PoSkeletonSize.xl]: { square: 96, circle: 96, rectangleWidth: 288, rectangleHeight: 96 },
-        [PoSkeletonSize.xxl]: { square: 144, circle: 144, rectangleWidth: 432, rectangleHeight: 144 }
-    };
-    defaultTextDimensions = { width: '100%', height: '1em' };
-    defaultBorderRadius = {
-        [PoSkeletonVariant.text]: undefined,
-        [PoSkeletonVariant.square]: undefined,
-        [PoSkeletonVariant.rectangle]: undefined,
-        [PoSkeletonVariant.circle]: '50%'
-    };
-    computedStyles = computed(() => {
-        const styles = {};
-        const variant = this.variant();
-        const size = this.size();
-        const sizeConfig = this.sizeMap[size];
-        const defaultDimensions = this.getDimensions(variant, sizeConfig);
-        styles['width'] = this.width() || defaultDimensions.width || '';
-        styles['height'] = this.height() || defaultDimensions.height || '';
-        const borderRadiusValue = this.borderRadius();
-        const defaultRadius = this.defaultBorderRadius[variant];
-        if (borderRadiusValue || defaultRadius) {
-            styles['border-radius'] = borderRadiusValue || defaultRadius;
-        }
-        return styles;
-    }, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
-    computedClasses = computed(() => ({
-        'po-skeleton': true,
-        [`po-skeleton-${this.variant()}`]: true,
-        [`po-skeleton-type-${this.type()}`]: true,
-        [`po-skeleton-animation-${this.animation()}`]: true
-    }), ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
-    getDimensions(variant, sizeConfig) {
-        switch (variant) {
-            case PoSkeletonVariant.text:
-                return this.defaultTextDimensions;
-            case PoSkeletonVariant.square:
-                return { width: `${sizeConfig.square}px`, height: `${sizeConfig.square}px` };
-            case PoSkeletonVariant.circle:
-                return { width: `${sizeConfig.circle}px`, height: `${sizeConfig.circle}px` };
-            case PoSkeletonVariant.rectangle:
-                return { width: `${sizeConfig.rectangleWidth}px`, height: `${sizeConfig.rectangleHeight}px` };
-            default:
-                return { width: '', height: '' };
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: PoSkeletonComponent, isStandalone: false, selector: "po-skeleton", usesInheritance: true, ngImport: i0, template: "<div class=\"po-skeleton-wrapper\" [ngClass]=\"computedClasses()\" [ngStyle]=\"computedStyles()\" aria-hidden=\"true\"></div>\n@if (ariaLabel()) {\n  <span class=\"po-skeleton-aria-label\" role=\"status\" aria-live=\"polite\">{{ ariaLabel() }}</span>\n}\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'po-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-skeleton-wrapper\" [ngClass]=\"computedClasses()\" [ngStyle]=\"computedStyles()\" aria-hidden=\"true\"></div>\n@if (ariaLabel()) {\n  <span class=\"po-skeleton-aria-label\" role=\"status\" aria-live=\"polite\">{{ ariaLabel() }}</span>\n}\n" }]
-        }] });
-
-/**
- * @description
- *
- * Módulo do componente po-skeleton.
- */
-class PoSkeletonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, declarations: [PoSkeletonComponent], imports: [CommonModule], exports: [PoSkeletonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PoSkeletonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [PoSkeletonComponent],
-                    exports: [PoSkeletonComponent]
-                }]
-        }] });
-
 /**
  * @docsPrivate
  *
@@ -70668,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" }] });
+    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,
@@ -75011,7 +75524,7 @@ class PoHttpRequestInterceptorService {
         request = this.requestCloneWithoutHeaderParam([noCountPendingRequests, screenLock], request);
         this.setCountPendingRequests(true, requestClone);
         this.setCountOverlayRequests(true, requestClone);
-        return next.handle(request).pipe(finalize(() => {
+        return next.handle(request).pipe(finalize$1(() => {
             this.setCountPendingRequests(false, requestClone);
             this.setCountOverlayRequests(false, requestClone);
         }));