@po-ui/ng-components 19.23.0 → 19.24.0

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

@@ -50130,109 +50130,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
-/**
- * @docsPrivate
- *
- * @description
- *
- * Componente responsável por manipular os botões de aba.
- */
-class PoTabButtonComponent {
-    elementRef;
-    changeDetector;
-    tabButtom;
-    // Desabilita o botão
-    disabled;
-    // Identificador do componente
-    id;
-    // Rótulo do botão
-    label;
-    // Função sera emitida quando a tab ficar ativada
-    activated = new EventEmitter();
-    // Função sera emitida quando a tab ficar desabilitada ou escondida
-    changeState = new EventEmitter();
-    // Método recebido do usuário para ser disparado quando clicar na aba
-    click = new EventEmitter();
-    _active;
-    _hide;
-    widthButton;
-    // Ativa o botão
-    set active(value) {
-        this._active = value;
-        this.emitActivated();
-    }
-    get active() {
-        return this._active;
-    }
-    // Oculta o botão
-    set hide(value) {
-        this._hide = convertToBoolean(value);
-        this.setDisplayOnHide();
-    }
-    get hide() {
-        return this._hide;
-    }
-    constructor(elementRef, changeDetector) {
-        this.elementRef = elementRef;
-        this.changeDetector = changeDetector;
-    }
-    ngAfterViewInit() {
-        this.widthButton = this.tabButtom.nativeElement.offsetWidth;
-        this.changeDetector.detectChanges();
-    }
-    ngOnChanges(changes) {
-        if ((changes.hide && changes.hide.currentValue) || (changes.disabled && changes.disabled.currentValue)) {
-            this.changeState.emit(this);
-        }
-    }
-    onClick() {
-        if (!this.disabled) {
-            this.click.emit(this.id);
-        }
-    }
-    emitActivated() {
-        if (this.active) {
-            this.activated.emit(this);
-        }
-    }
-    setDisplayOnHide() {
-        this.elementRef.nativeElement.style.display = this.hide ? 'none' : '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoTabButtonComponent, isStandalone: false, selector: "po-tab-button", inputs: { disabled: ["p-disabled", "disabled"], id: ["p-id", "id"], label: ["p-label", "label"], active: ["p-active", "active"], hide: ["p-hide", "hide"] }, outputs: { activated: "p-activated", changeState: "p-change-state", click: "p-click" }, viewQueries: [{ propertyName: "tabButtom", first: true, predicate: ["tabButtom"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <span class=\"po-tab-button-label po-text-ellipsis\">\n    {{ label }}\n  </span>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'po-tab-button', standalone: false, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <span class=\"po-tab-button-label po-text-ellipsis\">\n    {{ label }}\n  </span>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { tabButtom: [{
-                type: ViewChild,
-                args: ['tabButtom', { static: true }]
-            }], disabled: [{
-                type: Input,
-                args: ['p-disabled']
-            }], id: [{
-                type: Input,
-                args: ['p-id']
-            }], label: [{
-                type: Input,
-                args: ['p-label']
-            }], activated: [{
-                type: Output,
-                args: ['p-activated']
-            }], changeState: [{
-                type: Output,
-                args: ['p-change-state']
-            }], click: [{
-                type: Output,
-                args: ['p-click']
-            }], active: [{
-                type: Input,
-                args: ['p-active']
-            }], hide: [{
-                type: Input,
-                args: ['p-hide']
-            }] } });
-
 /**
  * @description
  *
@@ -50241,13 +50138,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Com este componente é possível atribuir um rótulo para auxiliar na identificação do conteúdo, ativar para que o mesmo seja exibido,
  * desabilitar para impossibilitar o acesso, bem como ocultar para indisponibilizar a aba.
  *
- * > Para controlar a navegação entre diversas abas, utilizar o componente [`po-tabs`](/documentation/po-tabs).
+ * > Para controlar a navegação entre diversas abas, utilizar o componente [`po-tabs`](/documentation/po-tabs) ou [`po-context-tabs`](/documentation/po-context-tabs).
  */
 class PoTabBaseComponent {
     /** Rótulo da aba. */
     label;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Esconde o botão de fechar a aba.
+     *
+     * > Atenção: Propriedade disponível somente no `po-context-tabs`.
+     *
+     * @default `false`
+     */
+    hideClose = false;
     /** Método disparado ao clicar na aba. */
     click = new EventEmitter();
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado ao clicar no botão de fechar a aba.
+     *
+     * > Atenção: Propriedade disponível somente no `po-context-tabs`.
+     *
+     */
+    closeTab = new EventEmitter();
     // ID da aba
     id = uuid();
     _active = false;
@@ -50294,6 +50214,8 @@ class PoTabBaseComponent {
      *
      * Oculta a aba.
      *
+     * > Atenção: Para correto funcionamento do componente, indicamos essa propriedade para esconder e exibir e não *ngIf.
+     *
      * @default `false`
      */
     set hide(hide) {
@@ -50303,16 +50225,22 @@ class PoTabBaseComponent {
         return this._hide;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: PoTabBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], active: ["p-active", "active"], disabled: ["p-disabled", "disabled"], hide: ["p-hide", "hide"] }, outputs: { click: "p-click" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoTabBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], hideClose: ["p-hide-close", "hideClose", convertToBoolean], active: ["p-active", "active"], disabled: ["p-disabled", "disabled"], hide: ["p-hide", "hide"] }, outputs: { click: "p-click", closeTab: "p-close-tab" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['p-label']
+            }], hideClose: [{
+                type: Input,
+                args: [{ alias: 'p-hide-close', transform: convertToBoolean }]
             }], click: [{
                 type: Output,
                 args: ['p-click']
+            }], closeTab: [{
+                type: Output,
+                args: ['p-close-tab']
             }], active: [{
                 type: Input,
                 args: ['p-active']
@@ -50329,8 +50257,8 @@ class PoTabsService {
     onChangesTriggeredActiveSource = new Subject();
     onChangesTriggered$ = this.onChangesTriggeredSource.asObservable();
     triggerActiveOnChanges$ = this.onChangesTriggeredActiveSource.asObservable();
-    triggerOnChanges() {
-        this.onChangesTriggeredSource.next();
+    triggerOnChanges(tab) {
+        this.onChangesTriggeredSource.next(tab);
     }
     triggerActiveOnChanges(tab) {
         this.onChangesTriggeredActiveSource.next(tab);
@@ -50351,6 +50279,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 class PoTabComponent extends PoTabBaseComponent {
     elementRef;
     tabsService;
+    // Propriedade interna utilizada no po-context-tabs
+    removed = false;
+    // Propriedade interna utilizada no po-context-tabs
+    showTooltip = false;
     constructor(elementRef, tabsService) {
         super();
         this.elementRef = elementRef;
@@ -50361,7 +50293,7 @@ class PoTabComponent extends PoTabBaseComponent {
     }
     ngOnChanges(changes) {
         setTimeout(() => {
-            this.tabsService.triggerOnChanges();
+            this.tabsService.triggerOnChanges(this);
             if (changes?.active?.currentValue) {
                 this.tabsService.triggerActiveOnChanges(this);
             }
@@ -50379,134 +50311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PoTabsService }] });
 
 /**
- * @docsPrivate
- *
  * @description
  *
- * Componente para agrupamento de componentes `po-tab-button` que os rendereiza em uma um caixa de diálogo
- * no formato de lista.
- */
-class PoTabDropdownComponent {
-    elementRef;
-    popover;
-    button;
-    // Rótulo do `po-tab-button`
-    label;
-    // Lista de abas
-    tabs = [];
-    size;
-    // Evento que será emitido ao ativar uma aba
-    activated = new EventEmitter();
-    // Evento que será emitido a aba for desabilitada ou ocultada
-    changeState = new EventEmitter();
-    // Evento de click
-    click = new EventEmitter();
-    isDropdownOpen = false;
-    dropdownStyles = {};
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngAfterViewInit() {
-        this.setDropdownPosition();
-    }
-    toggleDropdown() {
-        this.isDropdownOpen = !this.isDropdownOpen;
-        if (this.isDropdownOpen) {
-            this.setDropdownPosition();
-        }
-    }
-    closeAndReturnToButtom() {
-        this.closeDropdown();
-        this.button.focus();
-    }
-    closeDropdown() {
-        this.isDropdownOpen = false;
-    }
-    get buttonElement() {
-        return this.button.buttonElement;
-    }
-    setDropdownPosition() {
-        const buttonRect = this.buttonElement.nativeElement.getBoundingClientRect();
-        const tabsContainerRect = this.buttonElement.nativeElement.closest('.po-tabs-container').getBoundingClientRect();
-        const dropdownWidth = 300;
-        const isInsidePage = this.elementRef.nativeElement.closest('.po-page-content');
-        this.dropdownStyles = this.calculateDropdownStyles(buttonRect, tabsContainerRect, dropdownWidth, isInsidePage);
-    }
-    calculateDropdownStyles(buttonRect, tabsContainerRect, dropdownWidth, isInsidePage) {
-        if (isInsidePage) {
-            return {
-                top: `${tabsContainerRect.height + 4 + window.scrollY}px`,
-                maxWidth: `${dropdownWidth}px`,
-                right: `${tabsContainerRect.right - buttonRect.right}px`
-            };
-        }
-        let rightPosition = tabsContainerRect.width - buttonRect.right;
-        rightPosition = Math.max(0, rightPosition);
-        return {
-            top: `${tabsContainerRect.bottom + 4 + window.scrollY}px`,
-            maxWidth: `${dropdownWidth}px`,
-            right: `${rightPosition}px`
-        };
-    }
-    onClickOutside(event) {
-        if (this.isDropdownOpen && !this.elementRef.nativeElement.contains(event.target)) {
-            this.closeDropdown();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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<div class=\"po-tab-dropdown-container\" *ngIf=\"isDropdownOpen\" [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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'po-tab-dropdown', standalone: false, 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<div class=\"po-tab-dropdown-container\" *ngIf=\"isDropdownOpen\" [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" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { popover: [{
-                type: ViewChild,
-                args: ['popover', { static: true }]
-            }], button: [{
-                type: ViewChild,
-                args: [PoButtonComponent, { static: true }]
-            }], label: [{
-                type: Input,
-                args: ['p-label']
-            }], tabs: [{
-                type: Input,
-                args: ['p-tabs']
-            }], size: [{
-                type: Input,
-                args: ['p-size']
-            }], activated: [{
-                type: Output,
-                args: ['p-activated']
-            }], changeState: [{
-                type: Output,
-                args: ['p-change-state']
-            }], click: [{
-                type: Output,
-                args: ['p-click']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
-/**
- * @description
- *
- * O componente `po-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal,
- * ideal para facilitar a organização de conteúdos.
- *
- * O componente exibirá as abas enquanto houver espaço na tela, caso a aba ultrapasse o limite da tela a mesma será agrupada em um dropdown.
- *
- * > As abas que estiverem agrupadas serão dispostas numa cascata suspensa que será exibida ao clicar no botão.
- *
- * É possível realizar a navegação entre as abas através da tecla SETAS(direita e esquerda) do teclado.
- * Caso uma aba estiver desabilitada, não receberá foco de navegação.
- *
- * #### Boas práticas
- *
- * - Evite utilizar um `po-tabs` dentro de outro `po-tabs`;
- * - Evite utilizar uma quantidade excessiva de abas, pois irá gerar um *scroll* muito longo no `dropdown`;
- * - Evite `labels` extensos para as `tabs` pois podem quebrar seu *layout*, use `labels` diretas, curtas e intuitivas.
- *
  * #### Tokens customizáveis
  *
  * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
@@ -50540,6 +50346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * | **Selected**                           |                                                                                 |                                                   |
  * | `--background-item-selected`           | Cor de background do item selecionado                                           | `var(--color-brand-01-lightest)`                  |
  *
+ * <br>
  */
 class PoTabsBaseComponent {
     poThemeService;
@@ -50564,37 +50371,273 @@ class PoTabsBaseComponent {
     get size() {
         return this._size ?? getDefaultSize(this.poThemeService, PoFieldSize);
     }
-    constructor(poThemeService) {
-        this.poThemeService = poThemeService;
+    constructor(poThemeService) {
+        this.poThemeService = poThemeService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabsBaseComponent, deps: [{ token: PoThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: PoTabsBaseComponent, isStandalone: true, inputs: { size: ["p-size", "size"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabsBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: PoThemeService }], propDecorators: { size: [{
+                type: Input,
+                args: ['p-size']
+            }] } });
+
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Componente responsável por manipular os botões de aba.
+ */
+class PoTabButtonComponent {
+    changeDetector;
+    elementRef;
+    tabButtom;
+    // Desabilita o botão
+    disabled;
+    // Identificador do componente
+    id;
+    // Rótulo do botão
+    label;
+    // Função sera emitida quando a tab ficar ativada
+    activated = new EventEmitter();
+    // Função sera emitida quando a tab ficar desabilitada ou escondida
+    changeState = new EventEmitter();
+    // Método recebido do usuário para ser disparado quando clicar na aba
+    click = new EventEmitter();
+    _active;
+    _hide;
+    widthButton;
+    // Ativa o botão
+    set active(value) {
+        this._active = value;
+        this.emitActivated();
+    }
+    get active() {
+        return this._active;
+    }
+    // Oculta o botão
+    set hide(value) {
+        this._hide = convertToBoolean(value);
+        this.setDisplayOnHide();
+    }
+    get hide() {
+        return this._hide;
+    }
+    constructor(changeDetector, elementRef) {
+        this.changeDetector = changeDetector;
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        this.widthButton = this.tabButtom.nativeElement.offsetWidth;
+        this.changeDetector.detectChanges();
+    }
+    ngOnChanges(changes) {
+        if ((changes.hide && changes.hide.currentValue) || (changes.disabled && changes.disabled.currentValue)) {
+            this.changeState.emit(this);
+        }
+    }
+    onClick() {
+        if (!this.disabled) {
+            this.click.emit(this.id);
+        }
+    }
+    emitActivated() {
+        if (this.active) {
+            this.activated.emit(this);
+        }
+    }
+    setDisplayOnHide() {
+        this.elementRef.nativeElement.style.display = this.hide ? 'none' : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoTabButtonComponent, isStandalone: false, selector: "po-tab-button", inputs: { disabled: ["p-disabled", "disabled"], id: ["p-id", "id"], label: ["p-label", "label"], active: ["p-active", "active"], hide: ["p-hide", "hide"] }, outputs: { activated: "p-activated", changeState: "p-change-state", click: "p-click" }, viewQueries: [{ propertyName: "tabButtom", first: true, predicate: ["tabButtom"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <span class=\"po-tab-button-label po-text-ellipsis\">\n    {{ label }}\n  </span>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-tab-button', standalone: false, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <span class=\"po-tab-button-label po-text-ellipsis\">\n    {{ label }}\n  </span>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { tabButtom: [{
+                type: ViewChild,
+                args: ['tabButtom', { static: true }]
+            }], disabled: [{
+                type: Input,
+                args: ['p-disabled']
+            }], id: [{
+                type: Input,
+                args: ['p-id']
+            }], label: [{
+                type: Input,
+                args: ['p-label']
+            }], activated: [{
+                type: Output,
+                args: ['p-activated']
+            }], changeState: [{
+                type: Output,
+                args: ['p-change-state']
+            }], click: [{
+                type: Output,
+                args: ['p-click']
+            }], active: [{
+                type: Input,
+                args: ['p-active']
+            }], hide: [{
+                type: Input,
+                args: ['p-hide']
+            }] } });
+
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Componente para agrupamento de componentes `po-tab-button` que os rendereiza em uma um caixa de diálogo
+ * no formato de lista.
+ */
+class PoTabDropdownComponent {
+    elementRef;
+    popover;
+    button;
+    // Rótulo do `po-tab-button`
+    label;
+    // Lista de abas
+    tabs = [];
+    size;
+    // Evento que será emitido ao ativar uma aba
+    activated = new EventEmitter();
+    // Evento que será emitido a aba for desabilitada ou ocultada
+    changeState = new EventEmitter();
+    // Evento de click
+    click = new EventEmitter();
+    isDropdownOpen = false;
+    dropdownStyles = {};
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        this.setDropdownPosition();
+    }
+    toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+        if (this.isDropdownOpen) {
+            this.setDropdownPosition();
+        }
+    }
+    closeAndReturnToButtom() {
+        this.closeDropdown();
+        this.button.focus();
+    }
+    closeDropdown() {
+        this.isDropdownOpen = false;
+    }
+    get buttonElement() {
+        return this.button.buttonElement;
+    }
+    setDropdownPosition() {
+        const buttonRect = this.buttonElement.nativeElement.getBoundingClientRect();
+        const tabsContainerRect = this.buttonElement.nativeElement.closest('.po-tabs-container').getBoundingClientRect();
+        const dropdownWidth = 300;
+        const isInsidePage = this.elementRef.nativeElement.closest('.po-page-content');
+        this.dropdownStyles = this.calculateDropdownStyles(buttonRect, tabsContainerRect, dropdownWidth, isInsidePage);
+    }
+    calculateDropdownStyles(buttonRect, tabsContainerRect, dropdownWidth, isInsidePage) {
+        if (isInsidePage) {
+            return {
+                top: `${tabsContainerRect.height + 4 + window.scrollY}px`,
+                maxWidth: `${dropdownWidth}px`,
+                right: `${tabsContainerRect.right - buttonRect.right}px`
+            };
+        }
+        let rightPosition = tabsContainerRect.width - buttonRect.right;
+        rightPosition = Math.max(0, rightPosition);
+        return {
+            top: `${tabsContainerRect.bottom + 4 + window.scrollY}px`,
+            maxWidth: `${dropdownWidth}px`,
+            right: `${rightPosition}px`
+        };
+    }
+    onClickOutside(event) {
+        if (this.isDropdownOpen && !this.elementRef.nativeElement.contains(event.target)) {
+            this.closeDropdown();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabsBaseComponent, deps: [{ token: PoThemeService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: PoTabsBaseComponent, isStandalone: true, inputs: { size: ["p-size", "size"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", 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<div class=\"po-tab-dropdown-container\" *ngIf=\"isDropdownOpen\" [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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoListBoxComponent, selector: "po-listbox" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabsBaseComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: PoThemeService }], propDecorators: { size: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-tab-dropdown', standalone: false, 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<div class=\"po-tab-dropdown-container\" *ngIf=\"isDropdownOpen\" [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" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { popover: [{
+                type: ViewChild,
+                args: ['popover', { static: true }]
+            }], button: [{
+                type: ViewChild,
+                args: [PoButtonComponent, { static: true }]
+            }], label: [{
+                type: Input,
+                args: ['p-label']
+            }], tabs: [{
+                type: Input,
+                args: ['p-tabs']
+            }], size: [{
                 type: Input,
                 args: ['p-size']
+            }], activated: [{
+                type: Output,
+                args: ['p-activated']
+            }], changeState: [{
+                type: Output,
+                args: ['p-change-state']
+            }], click: [{
+                type: Output,
+                args: ['p-click']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 const poTabsLiterals = {
     en: {
-        moreTabs: 'More'
+        moreTabs: 'More',
+        close: 'Close Tab'
     },
     es: {
-        moreTabs: 'Más'
+        moreTabs: 'Más',
+        close: 'Cerrar pestaña'
     },
     pt: {
-        moreTabs: 'Mais'
+        moreTabs: 'Mais',
+        close: 'Fechar Aba'
     },
     ru: {
-        moreTabs: 'Ещё'
+        moreTabs: 'Ещё',
+        close: 'Закрыть вкладку'
     }
 };
 const poTabsMaxNumberOfTabs = 5;
 /**
  * @docsExtends PoTabsBaseComponent
  *
+ * @description
+ *
+ * O componente `po-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal,
+ * ideal para facilitar a organização de conteúdos.
+ *
+ * O componente exibirá as abas enquanto houver espaço na tela, caso a aba ultrapasse o limite da tela a mesma será agrupada em um dropdown.
+ *
+ * > As abas que estiverem agrupadas serão dispostas numa cascata suspensa que será exibida ao clicar no botão.
+ *
+ * É possível realizar a navegação entre as abas através da tecla SETAS(direita e esquerda) do teclado.
+ * Caso uma aba estiver desabilitada, não receberá foco de navegação.
+ *
+ * #### Boas práticas
+ *
+ * - Evite utilizar um `po-tabs` dentro de outro `po-tabs`;
+ * - Evite utilizar uma quantidade excessiva de abas, pois irá gerar um *scroll* muito longo no `dropdown`;
+ * - Evite `labels` extensos para as `tabs` pois podem quebrar seu *layout*, use `labels` diretas, curtas e intuitivas.
+ *
+ *
  * @example
  *
  * <example name="po-tabs-basic" title="PO Tabs Basic">
@@ -50633,6 +50676,7 @@ class PoTabsComponent extends PoTabsBaseComponent {
     tabsDropdown = [];
     initializeCalculation = true;
     initializeComponent = false;
+    initCheckChangesTab = false;
     quantityTabsButton;
     defaultLastTabWidth;
     previousActiveTab;
@@ -50651,8 +50695,8 @@ class PoTabsComponent extends PoTabsBaseComponent {
         };
     }
     ngOnInit() {
-        this.subscriptionTabsService = this.tabsService.onChangesTriggered$.subscribe(() => {
-            this.updateTabsState();
+        this.subscriptionTabsService = this.tabsService.onChangesTriggered$.subscribe((tab) => {
+            this.updateTabsState(false, tab);
             if (this.initializeComponent) {
                 this.handleKeyboardNavigationTab();
             }
@@ -50671,6 +50715,9 @@ class PoTabsComponent extends PoTabsBaseComponent {
         this.changeDetector.detectChanges();
         this.handleKeyboardNavigationTab();
         this.initializeComponent = true;
+        setTimeout(() => {
+            this.initCheckChangesTab = true;
+        }, 500);
     }
     ngAfterContentInit() {
         this.updateTabsState(true);
@@ -50727,12 +50774,19 @@ class PoTabsComponent extends PoTabsBaseComponent {
             this.changeDetector.detectChanges();
         }
     }
-    reorderTabs(tabToReorder) {
+    reorderTabs(tabToReorder, lastTab) {
         const tabsArray = this.tabsChildrenArray;
         const tabIndex = tabsArray.findIndex(item => item.id === tabToReorder.id);
         if (tabIndex !== -1) {
-            const [tab] = tabsArray.splice(tabIndex, 1);
-            tabsArray.splice(this.quantityTabsButton - 1, 0, tab);
+            if (lastTab) {
+                const lastTabShowed = tabsArray.findIndex(item => item.id === lastTab.id);
+                const [tab] = tabsArray.splice(tabIndex, 1);
+                tabsArray.splice(lastTabShowed, 0, tab);
+            }
+            else {
+                const [tab] = tabsArray.splice(tabIndex, 1);
+                tabsArray.splice(this.quantityTabsButton - 1, 0, tab);
+            }
         }
         this.tabsChildren.reset(tabsArray);
         this.changeDetector.detectChanges();
@@ -50771,9 +50825,18 @@ class PoTabsComponent extends PoTabsBaseComponent {
         });
     }
     // Movimenta a tab da visão de tabs para o dropdown, e vice-versa.
-    changeTabPositionByDropdown(tabToActivate) {
-        const lastTab = this.tabsDefault[this.tabsDefault.length - 1];
-        this.tabsDefault = this.tabsDefault.filter(tab => tab.id !== lastTab.id);
+    changeTabPositionByDropdown(tabToActivate, byContextsTabs = false) {
+        let lastTab;
+        if (byContextsTabs) {
+            const tabsDefault = this.tabButton.filter(tab => !tab.nativeElement.hidden);
+            lastTab = tabsDefault[tabsDefault.length - 1];
+            this.tabsDefault = this.tabsDefault.filter(tab => tab.id !== lastTab.nativeElement.id);
+            lastTab = { id: lastTab.nativeElement.id };
+        }
+        else {
+            lastTab = this.tabsDefault[this.tabsDefault.length - 1];
+            this.tabsDefault = this.tabsDefault.filter(tab => tab.id !== lastTab.id);
+        }
         this.tabsDefault.push(tabToActivate);
         const _tabsDropdown = this.tabsDropdown.filter(tab => tab.id !== tabToActivate.id);
         _tabsDropdown.unshift(lastTab);
@@ -50788,12 +50851,21 @@ class PoTabsComponent extends PoTabsBaseComponent {
             this.changeDetector.detectChanges();
         }
     }
-    updateTabsState(initialState = false) {
+    updateTabsState(initialState = false, tab) {
         this.defaultLastTabWidth = this.tabButton?.last?.nativeElement?.getBoundingClientRect().width;
         if (this.defaultLastTabWidth <= 0) {
             return;
         }
-        const lastTabChildren = this.tabsChildrenArray[this.quantityTabsButton - 1];
+        this.executeTabsState(initialState);
+    }
+    executeTabsState(initialState, idByContextTabs) {
+        let lastTabChildren;
+        if (idByContextTabs) {
+            lastTabChildren = this.tabsChildrenArray?.find(tab => tab.id === idByContextTabs);
+        }
+        else {
+            lastTabChildren = this.tabsChildrenArray[this.quantityTabsButton - 1];
+        }
         if (lastTabChildren) {
             lastTabChildren.widthButton = this.defaultLastTabWidth;
         }
@@ -50974,7 +51046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  */
 class PoTabsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoTabsModule, declarations: [PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTabsComponent], imports: [CommonModule, PoPopoverModule, PoDropdownModule, PoTooltipModule, PoButtonModule, PoListBoxModule], exports: [PoTabComponent, PoTabsComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoTabsModule, declarations: [PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTabsComponent], imports: [CommonModule, PoPopoverModule, PoDropdownModule, PoTooltipModule, PoButtonModule, PoListBoxModule], exports: [PoTabComponent, PoTabsComponent, PoTabButtonComponent, PoTabDropdownComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabsModule, providers: [PoTabsService], imports: [CommonModule, PoPopoverModule, PoDropdownModule, PoTooltipModule, PoButtonModule, PoListBoxModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTabsModule, decorators: [{
@@ -50982,11 +51054,360 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{
                     imports: [CommonModule, PoPopoverModule, PoDropdownModule, PoTooltipModule, PoButtonModule, PoListBoxModule],
                     declarations: [PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTabsComponent],
-                    exports: [PoTabComponent, PoTabsComponent],
+                    exports: [PoTabComponent, PoTabsComponent, PoTabButtonComponent, PoTabDropdownComponent],
                     providers: [PoTabsService]
                 }]
         }] });
 
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Componente responsável por manipular os botões de aba.
+ */
+class PoContextTabButtonComponent extends PoTabButtonComponent {
+    hideClose = false;
+    showTooltip = false;
+    literals;
+    close = new EventEmitter();
+    // Função sera emitida quando ocorre mudança da visibilidade da tab
+    changeVisible = new EventEmitter();
+    activeCloseIcon = false;
+    afterViewChecked = false;
+    ngAfterViewInit() {
+        this.afterViewChecked = true;
+        this.widthButton = this.tabButtom.nativeElement.offsetWidth;
+        this.changeDetector.detectChanges();
+    }
+    ngOnChanges(changes) {
+        if (changes.hide?.currentValue || changes.disabled?.currentValue) {
+            this.changeState.emit(this);
+        }
+        if (!changes.hide?.firstChange && changes.hide && this.afterViewChecked) {
+            this.changeVisible.emit(this);
+        }
+    }
+    closeTab(event) {
+        if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if ((!event.key || event?.key === 'Enter') && !this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close.emit(this.tabButtom);
+        }
+    }
+    onFocusIn() {
+        if (!this.disabled) {
+            this.activeCloseIcon = true;
+        }
+    }
+    onFocusOut() {
+        this.activeCloseIcon = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoContextTabButtonComponent, isStandalone: false, selector: "po-context-tab-button", inputs: { hideClose: ["p-hide-close", "hideClose"], showTooltip: ["p-show-tooltip", "showTooltip"], literals: ["p-literals", "literals"] }, outputs: { close: "p-close", changeVisible: "p-change-visible" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 || showTooltip ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"po-tab-button-content\">\n    <span [ngClass]=\"!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'\" class=\"po-text-ellipsis\">\n      {{ label }}\n    </span>\n    <div\n      class=\"po-tab-button-content-close-icon\"\n      *ngIf=\"!hideClose\"\n      (click)=\"closeTab($event)\"\n      (keydown)=\"closeTab($event)\"\n    >\n      <po-icon\n        [tabIndex]=\"activeCloseIcon ? 0 : -1\"\n        [attr.aria-label]=\"literals.close\"\n        p-icon=\"ICON_CLOSE\"\n        class=\"po-tab-button-icon-close\"\n      ></po-icon>\n    </div>\n  </div>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-context-tab-button', standalone: false, template: "<div\n  #tabButtom\n  role=\"tab\"\n  [p-tooltip]=\"widthButton > 239 || showTooltip ? label : ''\"\n  p-tooltip-position=\"top\"\n  class=\"po-tab-button-default\"\n  [id]=\"id\"\n  [ngClass]=\"{ 'po-tab-focusable': !disabled && !hide }\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [attr.aria-selected]=\"active\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  (click)=\"onClick()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"po-tab-button-content\">\n    <span [ngClass]=\"!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'\" class=\"po-text-ellipsis\">\n      {{ label }}\n    </span>\n    <div\n      class=\"po-tab-button-content-close-icon\"\n      *ngIf=\"!hideClose\"\n      (click)=\"closeTab($event)\"\n      (keydown)=\"closeTab($event)\"\n    >\n      <po-icon\n        [tabIndex]=\"activeCloseIcon ? 0 : -1\"\n        [attr.aria-label]=\"literals.close\"\n        p-icon=\"ICON_CLOSE\"\n        class=\"po-tab-button-icon-close\"\n      ></po-icon>\n    </div>\n  </div>\n</div>\n<div [ngClass]=\"{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }\"></div>\n" }]
+        }], propDecorators: { hideClose: [{
+                type: Input,
+                args: ['p-hide-close']
+            }], showTooltip: [{
+                type: Input,
+                args: ['p-show-tooltip']
+            }], literals: [{
+                type: Input,
+                args: ['p-literals']
+            }], close: [{
+                type: Output,
+                args: ['p-close']
+            }], changeVisible: [{
+                type: Output,
+                args: ['p-change-visible']
+            }] } });
+
+/**
+ * @docsExtends PoTabsBaseComponent
+ *
+ * @description
+ *
+ * O componente `po-context-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal,
+ * ideal para facilitar a organização de conteúdos.
+ *
+ * O componente exibirá as abas enquanto houver espaço na tela, caso a aba ultrapasse o limite da tela a mesma será agrupada em um dropdown.
+ *
+ * > As abas que estiverem agrupadas serão dispostas numa cascata suspensa que será exibida ao clicar no botão.
+ *
+ * É possível realizar a navegação entre as abas através da tecla SETAS(direita e esquerda) do teclado.
+ * Caso uma aba estiver desabilitada, não receberá foco de navegação.
+ *
+ * #### Boas práticas
+ *
+ * - Evite utilizar um `po-context-tabs` dentro de outro `po-context-tabs`;
+ * - Evite utilizar uma quantidade excessiva de abas, pois irá gerar um *scroll* muito longo no `dropdown`;
+ * - Evite `labels` extensos para as `tabs` pois podem quebrar seu *layout*, use `labels` diretas, curtas e intuitivas.
+ *
+ *
+ * @example
+ *
+ * <example name="po-context-tabs-basic" title="PO Context Tabs Basic">
+ *  <file name="sample-po-context-tabs-basic/sample-po-context-tabs-basic.component.html"> </file>
+ *  <file name="sample-po-context-tabs-basic/sample-po-context-tabs-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-context-tabs-labs" title="PO Context Tabs Labs">
+ *  <file name="sample-po-context-tabs-labs/sample-po-context-tabs-labs.component.html"> </file>
+ *  <file name="sample-po-context-tabs-labs/sample-po-context-tabs-labs.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-context-tabs-travel" title="PO Context Tabs - Travel">
+ *  <file name="sample-po-context-tabs-travel/sample-po-context-tabs-travel.component.html"> </file>
+ *  <file name="sample-po-context-tabs-travel/sample-po-context-tabs-travel.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-context-tabs-business-conf" title="PO Context Tabs - Business Conference">
+ *  <file name="sample-po-context-tabs-business-conf/sample-po-context-tabs-business-conf.component.html"> </file>
+ *  <file name="sample-po-context-tabs-business-conf/sample-po-context-tabs-business-conf.component.ts"> </file>
+ * </example>
+ */
+class PoContextTabsComponent extends PoTabsComponent {
+    byQuantityFunction;
+    initialTabsWidth = [];
+    sumOfWidth = 0;
+    get isShowTabDropdown() {
+        const tabsShowed = this.tabsChildren['_results'].filter(item => !item.hide);
+        if (tabsShowed.length > this.quantityTabsButton) {
+            return true;
+        }
+        return false;
+    }
+    // tabs que serão apresentadas na aba "Mais"
+    get overflowedTabs() {
+        return this.tabsChildren['_results'].filter(item => !item.hide)?.slice(this.quantityTabsButton);
+    }
+    get tabs() {
+        return this.tabsChildren['_results'];
+    }
+    closeTab(tab) {
+        tab.closeTab.emit(tab);
+        const tabWidth = tab.widthButton || this.initialTabsWidth.find(initialTab => initialTab.id === tab.id)?.width;
+        this.tabsChildren['_results'] = this.tabsChildren['_results'].filter(item => item.id !== tab.id);
+        tab.removed = true;
+        tab.hide = true;
+        this.onTabChangeState(tab);
+        tab.elementRef.nativeElement.remove();
+        this.afterRemoveTab(tabWidth);
+    }
+    onChangeVisibilityTab(tab) {
+        if (this.initialTabsWidth?.length) {
+            const currentInitialTab = this.initialTabsWidth.find(t => t.id === tab.id);
+            let tabWidth = tab.widthButton || currentInitialTab.width;
+            if (!tab.hide) {
+                const currentTabElement = this.tabButton.find(t => t.nativeElement.id === tab.id);
+                tabWidth = currentTabElement.nativeElement.offsetWidth;
+                currentInitialTab.width = tabWidth;
+                tab.widthButton = tabWidth;
+                this.changeDetector.detectChanges();
+                this.calculateTabs(true);
+                this.changeDetector.detectChanges();
+            }
+            else {
+                this.afterRemoveTab(tabWidth);
+            }
+        }
+    }
+    afterRemoveTab(widthTab) {
+        this.quantityTabsButton = this.quantityTabsButton - 1;
+        this.changeDetector.detectChanges();
+        const screenSize = this.containerTabs.nativeElement.offsetWidth;
+        this.sumOfWidth = this.sumOfWidth - widthTab;
+        for (const t of this.overflowedTabs) {
+            if (!t.hide) {
+                const firstItemDropdown = this.tabButton.find(tb => tb.nativeElement.id === t.id);
+                const width = this.initialTabsWidth.find(i => i.id === firstItemDropdown.nativeElement.id)?.width;
+                if (this.sumOfWidth + width <= screenSize ||
+                    screenSize < 1 ||
+                    this.quantityTabsButton < this.byQuantityFunction) {
+                    t.showTooltip = false;
+                    t.widthButton = undefined;
+                    firstItemDropdown.nativeElement.hidden = false;
+                    this.sumOfWidth += width;
+                    firstItemDropdown.nativeElement.style.width = '';
+                    firstItemDropdown.nativeElement.style.display = 'inline-block';
+                    this.quantityTabsButton = this.quantityTabsButton + 1;
+                    if (this.byQuantityFunction > 0 && this.byQuantityFunction === this.quantityTabsButton) {
+                        break;
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        this.changeDetector.detectChanges();
+        this.handleKeyboardNavigationTab();
+    }
+    calculateTabs(initializeCalculation) {
+        if (initializeCalculation) {
+            this.sumOfWidth = 150;
+            const screenSize = this.containerTabs.nativeElement.offsetWidth;
+            const listTabButton = [];
+            const isFirstCalculation = this.initialTabsWidth.length === 0;
+            if (this.tabButton?.length) {
+                let initDropdown = false;
+                let index = 0;
+                this.tabButton.forEach(element => {
+                    const width = element.nativeElement.offsetWidth;
+                    if (isFirstCalculation) {
+                        this.initialTabsWidth.push({ id: element.nativeElement.id, width });
+                    }
+                    if (this.byQuantityFunction && index > this.byQuantityFunction - 1) {
+                        initDropdown = true;
+                    }
+                    if (!initDropdown &&
+                        (this.sumOfWidth + width <= screenSize || screenSize < 1 || index < this.byQuantityFunction)) {
+                        if (!element.nativeElement.hidden) {
+                            listTabButton.push(element);
+                            this.sumOfWidth += width;
+                        }
+                    }
+                    else {
+                        initDropdown = true;
+                        element.nativeElement.style.display = 'none';
+                        element.nativeElement.hidden = true;
+                    }
+                    if (element.nativeElement.hidden && index <= this.byQuantityFunction - 1)
+                        return;
+                    index++;
+                });
+            }
+            this.quantityTabsButton = this.byQuantityFunction || listTabButton.length;
+        }
+    }
+    updateTabsState(initialState = false, tabs) {
+        if (tabs && this.initCheckChangesTab) {
+            this.checkChangesTabs();
+        }
+        const allVisibleItems = this.tabButton?.filter(tab => !tab.nativeElement.hidden);
+        this.defaultLastTabWidth = allVisibleItems?.[allVisibleItems.length - 1]?.nativeElement.offsetWidth;
+        if (!this.defaultLastTabWidth) {
+            return;
+        }
+        this.executeTabsState(initialState, allVisibleItems?.[allVisibleItems.length - 1]?.nativeElement.id);
+    }
+    checkChangesTabs() {
+        let index = 0;
+        this.tabButton.forEach((tab, indexTab) => {
+            const currentTab = this.initialTabsWidth.find(t => t.id === tab.nativeElement.id);
+            const quantityTabs = this.byQuantityFunction || this.quantityTabsButton;
+            if (tab.nativeElement.hidden && !this.tabsChildren['_results'][indexTab]?.hide) {
+                tab.nativeElement.style.display = 'inline-block';
+                tab.nativeElement.hidden = false;
+            }
+            if (!currentTab) {
+                this.initialTabsWidth.push({ id: tab.nativeElement.id, width: tab.nativeElement.offsetWidth });
+                if (index > quantityTabs - 1) {
+                    tab.nativeElement.style.display = 'none';
+                    tab.nativeElement.hidden = true;
+                }
+                this.tabsChildren['_results'] = this.tabsChildren['_results'].filter(item => !item.removed);
+            }
+            if (tab.nativeElement.hidden && index <= quantityTabs - 1)
+                return;
+            index++;
+        });
+        this.calculateTabs(true);
+    }
+    onTabActiveByDropdown(tab, eventEmitter = true) {
+        if (tab.disabled) {
+            this.onTabChangeState(tab);
+            return;
+        }
+        const initialWidth = this.initialTabsWidth.find(t => t.id === tab.id);
+        this.changeTabPositionByDropdown(tab, true);
+        const showedTabs = this.tabButton.toArray().filter(tab => !tab.nativeElement.hidden);
+        const lastTab = showedTabs[showedTabs.length - 1];
+        const lastTabWidth = lastTab.nativeElement.offsetWidth;
+        lastTab.nativeElement.style.display = 'none';
+        lastTab.nativeElement.hidden = true;
+        const currentTabIndex = this.tabButton.toArray().findIndex(t => t.nativeElement.id === tab.id);
+        const currentTab = this.tabButton.toArray()[currentTabIndex].nativeElement;
+        currentTab.hidden = false;
+        currentTab.style.display = 'inline-block';
+        this.reorderTabs(tab, lastTab.nativeElement);
+        tab.widthButton = lastTabWidth;
+        if (initialWidth.width > lastTabWidth) {
+            tab.showTooltip = true;
+        }
+        currentTab.style.width = `${lastTabWidth}px`;
+        this.handleKeyboardNavigationTab();
+        if (eventEmitter) {
+            tab.click.emit(tab);
+        }
+    }
+    /**
+     * Função que atribui o número de tabs fora do dropdown.
+     *
+     * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+     *
+     * ```
+     * import { PoContextTabsComponent } from '@po-ui/ng-components';
+     *
+     * ...
+     *
+     * @ViewChild('poContextTabs', { static: true }) poContextTabs: PoContextTabsComponent;
+     *
+     * changeQuantityTabs() {
+     *   this.poContextTabs.setQuantityTabsButton(1); //Número de context-tabs
+     * }
+     * ```
+     */
+    setQuantityTabsButton(number) {
+        let callAfterFunction = false;
+        const currentQuantity = this.byQuantityFunction || this.quantityTabsButton;
+        if (number > currentQuantity) {
+            callAfterFunction = true;
+        }
+        this.byQuantityFunction = number;
+        if (!callAfterFunction) {
+            this.quantityTabsButton = number;
+            this.calculateTabs(true);
+        }
+        else {
+            this.afterRemoveTab(0);
+            this.quantityTabsButton = number;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoContextTabsComponent, isStandalone: false, selector: "po-context-tabs", usesInheritance: true, ngImport: i0, template: "<div class=\"po-tabs-container\">\n  <div #containerTabs class=\"po-tabs-header\">\n    <div class=\"po-tabs-button-wrapper\" role=\"tablist\">\n      <ng-container *ngFor=\"let tab of tabs; trackBy: trackByFn\">\n        <po-context-tab-button\n          *ngIf=\"!tab.removed\"\n          #tabButton\n          class=\"po-tab-button\"\n          [class.po-tab-button-aa]=\"size === 'small'\"\n          [p-active]=\"tab.active\"\n          [p-disabled]=\"tab.disabled\"\n          [p-show-tooltip]=\"tab.showTooltip\"\n          [p-hide]=\"tab.hide\"\n          [p-id]=\"tab.id\"\n          [hidden]=\"tab.hide\"\n          [p-hide-close]=\"tab.hideClose\"\n          [attr.disabled]=\"tab.disabled\"\n          [p-label]=\"tab.label\"\n          [p-literals]=\"literals\"\n          [id]=\"tab.id\"\n          (keyup.enter)=\"closeListbox()\"\n          (p-activated)=\"onTabActive(tab)\"\n          (p-change-state)=\"onTabChangeState(tab)\"\n          (p-change-visible)=\"onChangeVisibilityTab(tab)\"\n          (p-click)=\"selectedTab(tab)\"\n          (p-close)=\"closeTab(tab)\"\n        >\n        </po-context-tab-button>\n      </ng-container>\n\n      <po-tab-dropdown\n        #tabDropdown\n        *ngIf=\"isShowTabDropdown\"\n        class=\"po-tab-dropdown\"\n        [class.po-tab-dropdown-device]=\"!tabsDefault?.length\"\n        [p-label]=\"literals.moreTabs\"\n        [p-size]=\"size\"\n        [p-tabs]=\"overflowedTabs\"\n        (p-change-state)=\"onTabChangeState($event)\"\n        (p-click)=\"onTabActiveByDropdown($event)\"\n      >\n      </po-tab-dropdown>\n    </div>\n  </div>\n</div>\n<div class=\"po-tabs-content\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoTabDropdownComponent, selector: "po-tab-dropdown", inputs: ["p-label", "p-tabs", "p-size"], outputs: ["p-activated", "p-change-state", "p-click"] }, { kind: "component", type: PoContextTabButtonComponent, selector: "po-context-tab-button", inputs: ["p-hide-close", "p-show-tooltip", "p-literals"], outputs: ["p-close", "p-change-visible"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'po-context-tabs', standalone: false, template: "<div class=\"po-tabs-container\">\n  <div #containerTabs class=\"po-tabs-header\">\n    <div class=\"po-tabs-button-wrapper\" role=\"tablist\">\n      <ng-container *ngFor=\"let tab of tabs; trackBy: trackByFn\">\n        <po-context-tab-button\n          *ngIf=\"!tab.removed\"\n          #tabButton\n          class=\"po-tab-button\"\n          [class.po-tab-button-aa]=\"size === 'small'\"\n          [p-active]=\"tab.active\"\n          [p-disabled]=\"tab.disabled\"\n          [p-show-tooltip]=\"tab.showTooltip\"\n          [p-hide]=\"tab.hide\"\n          [p-id]=\"tab.id\"\n          [hidden]=\"tab.hide\"\n          [p-hide-close]=\"tab.hideClose\"\n          [attr.disabled]=\"tab.disabled\"\n          [p-label]=\"tab.label\"\n          [p-literals]=\"literals\"\n          [id]=\"tab.id\"\n          (keyup.enter)=\"closeListbox()\"\n          (p-activated)=\"onTabActive(tab)\"\n          (p-change-state)=\"onTabChangeState(tab)\"\n          (p-change-visible)=\"onChangeVisibilityTab(tab)\"\n          (p-click)=\"selectedTab(tab)\"\n          (p-close)=\"closeTab(tab)\"\n        >\n        </po-context-tab-button>\n      </ng-container>\n\n      <po-tab-dropdown\n        #tabDropdown\n        *ngIf=\"isShowTabDropdown\"\n        class=\"po-tab-dropdown\"\n        [class.po-tab-dropdown-device]=\"!tabsDefault?.length\"\n        [p-label]=\"literals.moreTabs\"\n        [p-size]=\"size\"\n        [p-tabs]=\"overflowedTabs\"\n        (p-change-state)=\"onTabChangeState($event)\"\n        (p-click)=\"onTabActiveByDropdown($event)\"\n      >\n      </po-tab-dropdown>\n    </div>\n  </div>\n</div>\n<div class=\"po-tabs-content\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * @description
+ * Módulo do componente po-context-tabs
+ */
+class PoContextTabsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabsModule, declarations: [PoContextTabsComponent, PoContextTabButtonComponent], imports: [CommonModule, PoIconModule, PoTooltipModule, PoTabsModule], exports: [PoContextTabsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabsModule, imports: [CommonModule, PoIconModule, PoTooltipModule, PoTabsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoContextTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PoIconModule, PoTooltipModule, PoTabsModule],
+                    declarations: [PoContextTabsComponent, PoContextTabButtonComponent],
+                    exports: [PoContextTabsComponent]
+                }]
+        }] });
+
 const poToolbarActionsIconDefault = 'ICON_MORE';
 /**
  * @docsPrivate
@@ -52609,6 +53030,7 @@ class PoComponentsModule {
             PoStepperModule,
             PoTableModule,
             PoTabsModule,
+            PoContextTabsModule,
             PoTagModule,
             PoToolbarModule,
             PoTreeViewModule,
@@ -52654,6 +53076,7 @@ class PoComponentsModule {
             PoSlideModule,
             PoStepperModule,
             PoTableModule,
+            PoContextTabsModule,
             PoTabsModule,
             PoTagModule,
             PoToolbarModule,
@@ -52702,6 +53125,7 @@ class PoComponentsModule {
             PoStepperModule,
             PoTableModule,
             PoTabsModule,
+            PoContextTabsModule,
             PoTagModule,
             PoToolbarModule,
             PoTreeViewModule,
@@ -52747,6 +53171,7 @@ class PoComponentsModule {
             PoSlideModule,
             PoStepperModule,
             PoTableModule,
+            PoContextTabsModule,
             PoTabsModule,
             PoTagModule,
             PoToolbarModule,
@@ -52800,6 +53225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         PoStepperModule,
                         PoTableModule,
                         PoTabsModule,
+                        PoContextTabsModule,
                         PoTagModule,
                         PoToolbarModule,
                         PoTreeViewModule,
@@ -52848,6 +53274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         PoSlideModule,
                         PoStepperModule,
                         PoTableModule,
+                        PoContextTabsModule,
                         PoTabsModule,
                         PoTagModule,
                         PoToolbarModule,
@@ -53788,5 +54215,5 @@ function validateProperty(property, target) {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, ICONS_DICTIONARY, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconDictionary, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
+export { AnimaliaIconDictionary, ForceBooleanComponentEnum, ForceOptionComponentEnum, I18N_CONFIG, ICONS_DICTIONARY, InputBoolean, InputRequired, PO_CONTROL_POSITIONS, PoAccordionComponent, PoAccordionItemComponent, PoAccordionModule, PoActiveOverlayModule, PoActiveOverlayService, PoAvatarComponent, PoAvatarModule, PoBadgeComponent, PoBadgeModule, PoBreadcrumbComponent, PoBreadcrumbModule, PoButtonComponent, PoButtonGroupComponent, PoButtonGroupModule, PoButtonGroupToggle, PoButtonKind, PoButtonModule, PoButtonSize, PoButtonType, PoCalendarComponent, PoCalendarMode, PoCalendarModule, PoChartComponent, PoChartLabelFormat, PoChartModule, PoChartType, PoCheckboxComponent, PoCheckboxGroupComponent, PoCheckboxGroupModule, PoCheckboxModule, PoCheckboxSize, PoCleanComponent, PoCleanModule, PoColorPaletteModule, PoColorPaletteService, PoComboComponent, PoComboFilterMode, PoComboOptionTemplateDirective, PoComponentInjectorModule, PoComponentInjectorService, PoComponentsModule, PoContainerComponent, PoContainerModule, PoContextTabButtonComponent, PoContextTabsComponent, PoContextTabsModule, PoControlPositionModule, PoDateService, PoDateTimeModule, PoDatepickerComponent, PoDatepickerIsoFormat, PoDatepickerModule, PoDatepickerRangeComponent, PoDecimalComponent, PoDialogComponent, PoDialogModule, PoDialogService, PoDialogType, PoDirectivesModule, PoDisclaimerComponent, PoDisclaimerGroupComponent, PoDisclaimerGroupModule, PoDisclaimerModule, PoDividerComponent, PoDividerModule, PoDividerSize, PoDropdownComponent, PoDropdownModule, PoDynamicContainerComponent, PoDynamicFieldType, PoDynamicFormComponent, PoDynamicModule, PoDynamicSharedBase, PoDynamicViewComponent, PoEmailComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoFieldContainerModule, PoFieldModule, PoGaugeComponent, PoGaugeModule, PoGridComponent, PoGridModule, PoGuardsModule, PoHttpInterceptorModule, PoHttpInterceptorService, PoHttpRequestInterceptorService, PoHttpRequestModule, PoI18nModule, PoI18nPipe, PoI18nService, PoIconComponent, PoIconDictionary, PoIconModule, PoImageComponent, PoImageModule, PoInfoComponent, PoInfoModule, PoInfoOrientation, PoInputComponent, PoInterceptorsModule, PoItemListComponent, PoLabelComponent, PoLabelModule, PoLanguageModule, PoLanguageService, PoLinkComponent, PoLinkModule, PoListBoxComponent, PoListBoxModule, PoListViewComponent, PoListViewContentTemplateDirective, PoListViewDetailTemplateDirective, PoListViewModule, PoLoadingComponent, PoLoadingIconComponent, PoLoadingModule, PoLoadingOverlayComponent, PoLoginComponent, PoLogoComponent, PoLogoModule, PoLookupComponent, PoLookupModalComponent, PoMask, PoMediaQueryModule, PoMediaQueryService, PoMenuComponent, PoMenuGlobalService, PoMenuHeaderTemplateDirective, PoMenuModule, PoMenuPanelComponent, PoMenuPanelModule, PoModalComponent, PoModalFooterComponent, PoModalModule, PoModule, PoMultiselectComponent, PoMultiselectFilterMode, PoMultiselectOptionTemplateDirective, PoNavbarComponent, PoNavbarModule, PoNotificationModule, PoNotificationService, PoNumberComponent, PoOverlayComponent, PoOverlayModule, PoPageDefaultComponent, PoPageDetailComponent, PoPageEditComponent, PoPageListComponent, PoPageModule, PoPageSlideComponent, PoPageSlideFooterComponent, PoPageSlideModule, PoPasswordComponent, PoPipesModule, PoPopoverComponent, PoPopoverModule, PoPopupComponent, PoPopupModule, PoProgressComponent, PoProgressModule, PoProgressSize, PoProgressStatus, PoRadioComponent, PoRadioGroupComponent, PoRadioGroupModule, PoRadioModule, PoRichTextComponent, PoRichTextToolbarActions, PoSearchComponent, PoSearchFilterMode, PoSearchListComponent, PoSearchModule, PoSelectComponent, PoServicesModule, PoSlideComponent, PoSlideContentTemplateDirective, PoSlideModule, PoStepComponent, PoStepperComponent, PoStepperModule, PoStepperOrientation, PoStepperStatus, PoSwitchComponent, PoSwitchLabelPosition, PoSwitchModule, PoTabButtonComponent, PoTabComponent, PoTabDropdownComponent, PoTableCellTemplateDirective, PoTableColumnFrozenDirective, PoTableColumnSortType, PoTableColumnSpacing, PoTableColumnTemplateDirective, PoTableComponent, PoTableModule, PoTableRowTemplateArrowDirection, PoTableRowTemplateDirective, PoTabsComponent, PoTabsModule, PoTabsService, PoTagComponent, PoTagModule, PoTagOrientation, PoTagType, PoTextareaComponent, PoThemeA11yEnum, PoThemeModule, PoThemeService, PoThemeTypeEnum, PoTimeModule, PoTimePipe, PoToasterComponent, PoToasterMode, PoToasterModule, PoToasterOrientation, PoToasterType, PoToolbarComponent, PoToolbarModule, PoTooltipDirective, PoTooltipModule, PoTreeViewComponent, PoTreeViewModule, PoUploadComponent, PoUploadFile, PoUploadStatus, PoUrlComponent, PoWidgetComponent, PoWidgetModule, initializeLanguageDefault, mergePoI18nConfigs, poBreadcrumbLiterals, poChartLiteralsDefault, poDialogAlertLiteralsDefault, poDialogConfirmLiteralsDefault, poLanguageDefault, poLocaleDateSeparatorList, poLocaleDecimalSeparatorList, poLocaleDefault, poLocaleThousandSeparatorList, poLocales, poPageSlideLiteralsDefault, poTabsLiterals, poThemeDefault, poThemeDefaultAA, poThemeDefaultAAA, poThemeDefaultActions, poThemeDefaultActionsDark, poThemeDefaultBrands, poThemeDefaultBrandsDark, poThemeDefaultCategoricals, poThemeDefaultCategoricalsAA, poThemeDefaultCategoricalsDark, poThemeDefaultCategoricalsDarkAA, poThemeDefaultCategoricalsOverlayDark, poThemeDefaultCategoricalsOverlayDarkAA, poThemeDefaultDark, poThemeDefaultDarkValues, poThemeDefaultDarkValuesAA, poThemeDefaultFeedback, poThemeDefaultFeedbackDark, poThemeDefaultLight, poThemeDefaultLightValues, poThemeDefaultLightValuesAA, poThemeDefaultNeutrals, poThemeDefaultNeutralsDark, poThemeDefaultOverlayCategoricals, poThemeDefaultOverlayCategoricalsAA, poToasterLiterals, returnPoI18nService };
 //# sourceMappingURL=po-ui-ng-components.mjs.map