@po-ui/ng-components 19.22.0 → 19.24.0

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

@@ -1734,7 +1734,7 @@ class PoTagBaseComponent {
      * @default `false`
      */
     set icon(value) {
-        if (this.type) {
+        if (this.type && !this.forceIcon) {
             this._icon = convertToBoolean(value);
         }
         else {
@@ -1785,6 +1785,8 @@ class PoTagBaseComponent {
     get type() {
         return this._type;
     }
+    //propriedade interna para forçar icone mesmo com tipo definido
+    forceIcon = false;
     /**
      * @optional
      *
@@ -1831,7 +1833,7 @@ class PoTagBaseComponent {
         this.language = languageService.getShortLanguage();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagBaseComponent, deps: [{ token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoTagBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], removable: ["p-removable", "removable", convertToBoolean], disabled: ["p-disabled", "disabled", convertToBoolean], value: ["p-value", "value"], appendInBody: ["p-append-in-body", "appendInBody"], color: ["p-color", "color"], textColor: ["p-text-color", "textColor"], icon: ["p-icon", "icon"], orientation: ["p-orientation", "orientation"], type: ["p-type", "type"], literals: ["p-literals", "literals"] }, outputs: { click: "p-click", remove: "p-close" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoTagBaseComponent, isStandalone: true, inputs: { label: ["p-label", "label"], removable: ["p-removable", "removable", convertToBoolean], disabled: ["p-disabled", "disabled", convertToBoolean], value: ["p-value", "value"], appendInBody: ["p-append-in-body", "appendInBody"], color: ["p-color", "color"], textColor: ["p-text-color", "textColor"], icon: ["p-icon", "icon"], orientation: ["p-orientation", "orientation"], type: ["p-type", "type"], forceIcon: ["p-force-icon", "forceIcon", convertToBoolean], literals: ["p-literals", "literals"] }, outputs: { click: "p-click", remove: "p-close" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagBaseComponent, decorators: [{
             type: Directive
@@ -1871,6 +1873,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             }], type: [{
                 type: Input,
                 args: ['p-type']
+            }], forceIcon: [{
+                type: Input,
+                args: [{ alias: 'p-force-icon', transform: convertToBoolean }]
             }], literals: [{
                 type: Input,
                 args: ['p-literals']
@@ -2746,11 +2751,11 @@ class PoTagComponent extends PoTagBaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagComponent, deps: [{ token: i0.ElementRef }, { token: PoLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoTagComponent, isStandalone: false, selector: "po-tag", viewQueries: [{ propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true, static: true }, { propertyName: "tagClose", first: true, predicate: ["tagClose"], descendants: true, static: true }, { propertyName: "poTag", first: true, predicate: ["poTag"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [p-append-in-body]=\"appendInBody\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoTagComponent, isStandalone: false, selector: "po-tag", viewQueries: [{ propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true, static: true }, { propertyName: "tagClose", first: true, predicate: ["tagClose"], descendants: true, static: true }, { propertyName: "poTag", first: true, predicate: ["poTag"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type || forceIcon ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [p-append-in-body]=\"appendInBody\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [p-append-in-body]=\"appendInBody\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      #poTagWrapper\n      class=\"po-tag-wrapper\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [attr.role]=\"isClickable && !disabled && !removable ? 'button' : ''\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n      (click)=\"onClick()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n    >\n      <div\n        #poTag\n        class=\"po-tag\"\n        [class.po-clickable]=\"isClickable && !disabled && !removable\"\n        [class.po-tag-removable]=\"removable\"\n        [class.po-tag-disabled]=\"disabled && removable\"\n        [ngClass]=\"tagColor\"\n        [ngStyle]=\"styleTag()\"\n      >\n        <po-icon\n          *ngIf=\"icon && !removable\"\n          class=\"po-tag-icon\"\n          [p-icon]=\"!type || forceIcon ? icon : iconFromType\"\n          [ngStyle]=\"!type && customTextColor ? { 'color': customTextColor } : ''\"\n        >\n        </po-icon>\n\n        <div\n          #tagContainer\n          class=\"po-tag-value\"\n          [p-append-in-body]=\"appendInBody\"\n          [p-tooltip]=\"getWidthTag() ? value : ''\"\n          p-tooltip-position=\"top\"\n        >\n          <span [ngStyle]=\"!type && customTextColor && !removable ? { 'color': customTextColor } : ''\">{{\n            value\n          }}</span>\n        </div>\n\n        <po-icon\n          #tagClose\n          *ngIf=\"removable\"\n          p-icon=\"ICON_CLOSE\"\n          p-tooltip-position=\"top\"\n          [p-tooltip]=\"literals.remove\"\n          [p-append-in-body]=\"appendInBody\"\n          [attr.aria-label]=\"setAriaLabel()\"\n          class=\"po-tag-remove\"\n          [class.po-clickable]=\"!disabled\"\n          [tabindex]=\"!disabled ? 0 : -1\"\n          [attr.role]=\"!disabled ? 'button' : ''\"\n          (click)=\"onClose()\"\n          (keydown.enter)=\"onClose('enter')\"\n        >\n        </po-icon>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PoLanguageService }], propDecorators: { tagContainer: [{
                 type: ViewChild,
                 args: ['tagContainer', { static: true }]
@@ -7034,11 +7039,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
         }] });
 
 /**
- * @usedBy PoButtonComponent
+ * @usedBy PoButtonComponent, PoWidgetComponent
  *
  * @description
  *
- * Estilos (`p-kind`) disponíveis do componente.
+ * Estilos disponíveis do button.
  */
 var PoButtonKind;
 (function (PoButtonKind) {
@@ -50125,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
  *
@@ -50236,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;
@@ -50289,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) {
@@ -50298,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']
@@ -50324,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);
@@ -50346,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;
@@ -50356,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);
             }
@@ -50373,6 +50310,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{ selector: 'po-tab', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PoTabsService }] });
 
+/**
+ * @description
+ *
+ * #### 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                                      |
+ * |----------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------|
+ * | **Default Values**                     |                                                                                 |                                                   |
+ * | `--background`                         | Cor de background                                                               | `var(--color-transparent)`                        |
+ * | `--background-item-default`            | Cor de background do item padrão                                                | `var(--color-transparent)`                        |
+ * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento&nbsp;                             | `var(--border-radius-md)`                         |
+ * | `--color`                              | Cor da fonte padrão                                                             | `var(--color-action-default)`                     |
+ * | `--color-baseline`                     | Cor para box-shadow                                                             | `var(--color-neutral-light-20)`                   |
+ * | `--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)`                         |
+ * | `--margin-tabs-container-left`         | Margem lateral esquerda do componente quando usado dentro de um `page-default`  | `var(--spacing-md)`                               |
+ * | `--margin-tabs-container-right`        | Margem lateral direita do componente quando usado dentro de um `page-default`   | `-16px`                                           |
+ * | `--padding-tabs-header`                | Padding do valor lateral das abas                                               | `var(--spacing-sm)`                               |
+ * | `--margin-tabs-first-child`            | Margem lateral da primeira aba                                                  | `var(--spacing-md)`                               |
+ * | `--margin-tabs-last-child`             | Margem lateral da ultima aba                                                    | `var(--spacing-md)`                               |
+ * | **Disabled**                           |                                                                                 |                                                   |
+ * | `--color-disabled`                     | Cor da fonte no estado disabilitado                                             | `var(--color-action-disabled)`                    |
+ * | `--background-item-disabled`&nbsp;     | Cor de background do item desabilitado                                          | `var(--color-neutral-light-10)`                   |
+ * | **Focused**                            |                                                                                 |                                                   |
+ * | `--outline-color-focused`              | Cor do outline do estado de focus                                               | `var(--color-action-focus)`                       |
+ * | **Hover**                              |                                                                                 |                                                   |
+ * | `--color-hover`                        | Cor principal no estado hover                                                   | `var(--color-brand-01-darkest)`                   |
+ * | `--background-item-hover`              | Cor de background no estado de hover                                            | `var(--color-brand-01-lightest)`                  |
+ * | **Selected**                           |                                                                                 |                                                   |
+ * | `--background-item-selected`           | Cor de background do item selecionado                                           | `var(--color-brand-01-lightest)`                  |
+ *
+ * <br>
+ */
+class PoTabsBaseComponent {
+    poThemeService;
+    _size = undefined;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do componente:
+     * - `small`: altura dos tabs como 32px (disponível apenas para acessibilidade AA).
+     * - `medium`: altura dos tabs como 44px.
+     *
+     * > 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._size = validateSize(value, this.poThemeService, PoFieldSize);
+    }
+    get size() {
+        return this._size ?? getDefaultSize(this.poThemeService, PoFieldSize);
+    }
+    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
  *
@@ -50483,7 +50597,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+const poTabsLiterals = {
+    en: {
+        moreTabs: 'More',
+        close: 'Close Tab'
+    },
+    es: {
+        moreTabs: 'Más',
+        close: 'Cerrar pestaña'
+    },
+    pt: {
+        moreTabs: 'Mais',
+        close: 'Fechar Aba'
+    },
+    ru: {
+        moreTabs: 'Ещё',
+        close: 'Закрыть вкладку'
+    }
+};
+const poTabsMaxNumberOfTabs = 5;
 /**
+ * @docsExtends PoTabsBaseComponent
+ *
  * @description
  *
  * O componente `po-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal,
@@ -50502,93 +50637,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * - 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):
- *
- * > 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**                     |                                                                                 |                                                   |
- * | `--background`                         | Cor de background                                                               | `var(--color-transparent)`                        |
- * | `--background-item-default`            | Cor de background do item padrão                                                | `var(--color-transparent)`                        |
- * | `--border-radius`                      | Contém o valor do raio dos cantos do elemento&nbsp;                             | `var(--border-radius-md)`                         |
- * | `--color`                              | Cor da fonte padrão                                                             | `var(--color-action-default)`                     |
- * | `--color-baseline`                     | Cor para box-shadow                                                             | `var(--color-neutral-light-20)`                   |
- * | `--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)`                         |
- * | `--margin-tabs-container-left`         | Margem lateral esquerda do componente quando usado dentro de um `page-default`  | `var(--spacing-md)`                               |
- * | `--margin-tabs-container-right`        | Margem lateral direita do componente quando usado dentro de um `page-default`   | `-16px`                                           |
- * | `--padding-tabs-header`                | Padding do valor lateral das abas                                               | `var(--spacing-sm)`                               |
- * | `--margin-tabs-first-child`            | Margem lateral da primeira aba                                                  | `var(--spacing-md)`                               |
- * | `--margin-tabs-last-child`             | Margem lateral da ultima aba                                                    | `var(--spacing-md)`                               |
- * | **Disabled**                           |                                                                                 |                                                   |
- * | `--color-disabled`                     | Cor da fonte no estado disabilitado                                             | `var(--color-action-disabled)`                    |
- * | `--background-item-disabled`&nbsp;     | Cor de background do item desabilitado                                          | `var(--color-neutral-light-10)`                   |
- * | **Focused**                            |                                                                                 |                                                   |
- * | `--outline-color-focused`              | Cor do outline do estado de focus                                               | `var(--color-action-focus)`                       |
- * | **Hover**                              |                                                                                 |                                                   |
- * | `--color-hover`                        | Cor principal no estado hover                                                   | `var(--color-brand-01-darkest)`                   |
- * | `--background-item-hover`              | Cor de background no estado de hover                                            | `var(--color-brand-01-lightest)`                  |
- * | **Selected**                           |                                                                                 |                                                   |
- * | `--background-item-selected`           | Cor de background do item selecionado                                           | `var(--color-brand-01-lightest)`                  |
- *
- */
-class PoTabsBaseComponent {
-    poThemeService;
-    _size = undefined;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tamanho do componente:
-     * - `small`: altura dos tabs como 32px (disponível apenas para acessibilidade AA).
-     * - `medium`: altura dos tabs como 44px.
-     *
-     * > 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._size = validateSize(value, this.poThemeService, PoFieldSize);
-    }
-    get size() {
-        return this._size ?? getDefaultSize(this.poThemeService, PoFieldSize);
-    }
-    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']
-            }] } });
-
-const poTabsLiterals = {
-    en: {
-        moreTabs: 'More'
-    },
-    es: {
-        moreTabs: 'Más'
-    },
-    pt: {
-        moreTabs: 'Mais'
-    },
-    ru: {
-        moreTabs: 'Ещё'
-    }
-};
-const poTabsMaxNumberOfTabs = 5;
-/**
- * @docsExtends PoTabsBaseComponent
  *
  * @example
  *
@@ -50628,6 +50676,7 @@ class PoTabsComponent extends PoTabsBaseComponent {
     tabsDropdown = [];
     initializeCalculation = true;
     initializeComponent = false;
+    initCheckChangesTab = false;
     quantityTabsButton;
     defaultLastTabWidth;
     previousActiveTab;
@@ -50646,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();
             }
@@ -50666,6 +50715,9 @@ class PoTabsComponent extends PoTabsBaseComponent {
         this.changeDetector.detectChanges();
         this.handleKeyboardNavigationTab();
         this.initializeComponent = true;
+        setTimeout(() => {
+            this.initCheckChangesTab = true;
+        }, 500);
     }
     ngAfterContentInit() {
         this.updateTabsState(true);
@@ -50722,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();
@@ -50766,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);
@@ -50783,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;
         }
@@ -50969,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: [{
@@ -50977,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
@@ -51840,6 +52266,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
+const poWidgetLiteralsDefault = {
+    en: {
+        help: 'Help',
+        configuration: 'Settings'
+    },
+    es: {
+        help: 'Ayuda',
+        configuration: 'Ajustes'
+    },
+    pt: {
+        help: 'Ajuda',
+        configuration: 'Configurações'
+    },
+    ru: {
+        help: 'Помощь',
+        configuration: 'Настройки'
+    }
+};
+
 /**
  *
  * @description
@@ -51853,6 +52298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Para controlar sua largura, é possível utilizar o [Grid System](/guides/grid-system) para um maior
  * controle de seu redimensionamento, assim possibilitando o tratamento para diferentes resoluções.
  *
+ * #### Boas práticas
+ *
+ * Utilize um tamanho mínimo de largura de aproximadamente `18.75rem` no componente.
+ *
  * #### Acessibilidade tratada no componente
  *
  * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas. São elas:
@@ -51867,35 +52316,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  *
  * > 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**                           |                                                                  |                                                  |
- * | `--padding`                                  | Preenchimento                                                    | `1rem`                                           |
- * | `--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)`                               |
- * | **Selected**                                 |                                                                  |                                                  |
- * | `--background-selected` &nbsp;               | Cor de background no estado selecionado &nbsp;                   | `var(--color-brand-01-lightest)`                 |
- * | `--border-color-selected` &nbsp;             | Cor da borda no estado selecionado                               | `var(--color-action-default)`                    |
- * | **Hover**                                    |                                                                  |                                                  |
- * | `--border-color-hover`                       | Cor da borda no estado hover                                     | `var(--color-brand-01-dark)`                     |
- * | `--shadow-hover`                             | Contém o valor da sombra do elemento no estado hover  &nbsp;     | `var(--shadow-lg)`                               |
- * | **Focused**                                  |                                                                  |                                                  |
- * | `--color-focused`                            | Cor principal no estado de focus                                 | `var(--color-action-default)`                    |
- * | `--outline-color-focused` &nbsp;             | Cor do outline do estado de focus                                | `var(--color-action-focus)`                      |
+ * | Propriedade                                  | Descrição                                                        | Valor Padrão                                                                |
+ * |----------------------------------------------|------------------------------------------------------------------|-----------------------------------------------------------------------------|
+ * | **Default Values**                           |                                                                  |                                                                             |
+ * | `--font-family`                              | Família tipográfica usada                                        | `var(--font-family-theme) `                                                 |
+ * | `--font-size`                                | Tamanho da fonte                                                 | `var(--font-size-sm)`                                                       |
+ * | `--font-weight`                              | Peso da fonte                                                    | `var(--font-weight-bold)`                                                   |
+ * | `--font-color`                               | Cor da fonte                                                     | `var(--color-neutral-dark-95)`                                              |
+ * | `--padding` - `@deprecated 21.x.x`           | Preenchimento do componente                                      | `1rem`                                                                      |
+ * | `--padding-header`                           | Preenchimento do header                                          | `var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)`   |
+ * | `--padding-body`                             | Preenchimento do body                                            | `var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)`   |
+ * | `--padding-footer`                           | Preenchimento do footer                                          | `var(--spacing-xs) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm)`   |
+ * | `--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)`                                                          |
+ * | **Hover**                                    |                                                                  |                                                                             |
+ * | `--border-color-hover`                       | Cor da borda no estado hover                                     | `var(--color-brand-01-dark)`                                                |
+ * | **Focused**                                  |                                                                  |                                                                             |
+ * | `--color-focused`                            | Cor principal no estado de focus                                 | `var(--color-action-default)`                                               |
+ * | `--outline-color-focused` &nbsp;             | Cor do outline do estado de focus                                | `var(--color-action-focus)`                                                 |
  *
  */
 class PoWidgetBaseComponent {
+    poThemeService;
+    _size = undefined;
     /** Descrição da segunda ação. */
+    /**
+     * @optional
+     *
+     * @description
+     * Define o label e exibe a ação secundária no footer do componente.
+     *
+     * > Exibida apenas quando `p-primary-label` estiver definida.
+     */
     secondaryLabel;
     /**
      * @optional
      *
      * @description
      *
-     * Ação que será executada quando o usuário clicar sobre a área total do `po-widget`.
+     * Caso verdadeiro o botão da ação `p-primary-label` ativará o modo `danger`.
+     *
+     * > Incompatível com o tipo **tertiary** da propriedade `p-kind-primary-action`.
+     *
+     * @default `false`
+     */
+    dangerPrimaryAction = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Caso verdadeiro o botão da ação `p-secondary-label` ativará o modo `danger`.
+     *
+     * > Incompatível com o tipo **tertiary** da propriedade `p-kind-primary-action`.
+     *
+     * @default `false`
+     */
+    dangerSecondaryAction = false;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o estilo do botão da ação `p-primary-label`, conforme o enum `PoButtonKind`.
+     *
+     * @default `tertiary`
+     */
+    kindPrimaryAction;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o estilo do botão da ação `p-secondary-label`, conforme o enum `PoButtonKind`.
+     *
+     * @default `tertiary`
+     */
+    kindSecondaryAction;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Label da tag exibida no header.
+     *
+     * > Quando a tag atingir uma largura máxima de 15rem (240px), será truncado com reticências.
+     * O conteúdo completo poderá ser visualizado ao passar o mouse sobre a tag, por meio do tooltip.
+     */
+    tagLabel;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo da `p-tag`, conforme o enum **PoTagType**.
+     *
+     * Valores válidos:
+     *  - `success`: cor verde utilizada para simbolizar sucesso ou êxito.
+     *  - `warning`: cor amarela que representa aviso ou advertência.
+     *  - `danger`: cor vermelha para erro ou aviso crítico.
+     *  - `info`: cor azul claro que caracteriza conteúdo informativo.
+     *  - `neutral`: cor cinza claro para uso geral.
+     *
+     * @default `success`
+     */
+    tagType;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o ícone exibido ao lado do label da `p-tag`.
+     *
+     * É possível usar qualquer um dos ícones da [Biblioteca de ícones PO UI](https://po-ui.io/icons), conforme exemplo:
+     * ```
+     * <po-widget p-tag-icon="an an-user"></po-widget>
+     * ```
+     * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, desde que a biblioteca
+     * esteja carregada no projeto:
+     * ```
+     * <po-widget p-tag-icon="fa fa-podcast"></po-widget>
+     * ```
+     *
+     * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+     * ```
+     * <po-widget [p-tag-icon]="template"></po-widget>
+     *
+     * <ng-template #template>
+     *   <i class="fa fa-podcast" style="font-size: inherit;"></i>
+     * </ng-template>
+     * ```
+     * > Para o ícone enquadrar corretamente, deve-se utilizar `font-size: inherit` caso o ícone utilizado não aplique-o.
+     */
+    tagIcon;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Lista de ações exibidas no header do componente.
+     * As propriedades das ações seguem a interface `PoPopupAction`.
+     */
+    actions = [];
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho dos botões do componente:
+     * - `small`: altura de 32px (disponível apenas para acessibilidade AA).
+     * - `medium`: altura de 44px.
+     *
+     * > 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._size = validateSize(value, this.poThemeService, PoFieldSize);
+    }
+    get size() {
+        return this._size ?? getDefaultSize(this.poThemeService, PoFieldSize);
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado quando o usuário clicar no componente.
+     * > Quando este evento está em uso, uma sombra (shadow) é aplicada automaticamente ao componente.
      */
     click = new EventEmitter();
     /**
@@ -51903,7 +52495,7 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Função que será disparada com o valor do `p-disabled` quando esta propriedade for alterada.
+     * Evento disparado quando a propriedade `p-disabled` for alterada.
      */
     onDisabled = new EventEmitter();
     /**
@@ -51911,7 +52503,7 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Função que será chamada na primeira ação.
+     * Evento disparado ao clicar na ação `p-primary-label`.
      */
     primaryAction = new EventEmitter();
     /**
@@ -51919,21 +52511,21 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Função que será chamada na segunda ação.
+     * Evento disparado ao clicar na ação `p-secondary-label`.
      */
     secondaryAction = new EventEmitter();
     /**
      * @optional
      *
      * @description
-     * Função chamada ao clicar no ícone de configuração
+     * Evento disparado ao clicar em **Configurações** incluído no menu de ações do header.
      */
     setting = new EventEmitter();
     /**
      * @optional
      *
      * @description
-     * Função que será chamada ao clicar no título.
+     * Evento disparado ao clicar no título definido em `p-title`.
      */
     titleAction = new EventEmitter();
     containerHeight = 'auto';
@@ -51951,7 +52543,7 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Aplicação de imagem de fundo.
+     * Define uma imagem de fundo.
      * > Se a imagem escolhida intervir na legibilidade do texto contido no `p-widget`,
      * pode-se utilizar a propriedade `p-primary` em conjunto para que os textos fiquem na cor branca.
      *
@@ -51967,7 +52559,7 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Desabilita todas as ações do componente.
+     * Desabilita o componente.
      *
      * @default `false`
      */
@@ -51983,9 +52575,7 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Define a altura do `po-widget`.
-     * A altura mínima para o `po-widget` depende do que será exibido através das propriedades `p-primary-label`,
-     * `p-setting`, `p-help` e `p-title`.
+     * Define a altura do componente.
      * > Caso não seja informado valor, a propriedade irá assumir o tamanho do conteúdo.
      */
     set height(value) {
@@ -52000,7 +52590,7 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Link de ajuda
+     * Link de ajuda incluído no menu de ações do header.
      */
     set help(value) {
         this._help = isTypeof(value, 'string') ? value : '';
@@ -52015,7 +52605,8 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Desabilita a sombra do `po-widget` quando o mesmo for clicável.
+     * Desabilita a sombra do componente quando o mesmo for clicável.
+     * > A sombra é exibida por padrão apenas quando o evento `p-click` está definido.
      *
      * @default `true`
      */
@@ -52046,9 +52637,8 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Descrição da primeira ação.
+     * Define o label e exibe a ação primária no footer do componente.
      *
-     * @default `false`
      */
     set primaryLabel(value) {
         this._primaryLabel = isTypeof(value, 'string') ? value : '';
@@ -52062,9 +52652,10 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Título do `po-widget`.
+     * Título do componente.
      *
-     * @default `false`
+     * > Quando o conteúdo exceder o espaço disponível, o texto será truncado com reticências.  O conteúdo completo poderá
+     * ser visualizado ao passar o mouse sobre a tag, por meio do tooltip.
      */
     set title(value) {
         this._title = isTypeof(value, 'string') ? value : '';
@@ -52073,14 +52664,44 @@ class PoWidgetBaseComponent {
     get title() {
         return this._title;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: PoWidgetBaseComponent, isStandalone: true, inputs: { secondaryLabel: ["p-secondary-label", "secondaryLabel"], background: ["p-background", "background"], disabled: ["p-disabled", "disabled"], height: ["p-height", "height"], help: ["p-help", "help"], noShadow: ["p-no-shadow", "noShadow"], primary: ["p-primary", "primary"], primaryLabel: ["p-primary-label", "primaryLabel"], title: ["p-title", "title"] }, outputs: { click: "p-click", onDisabled: "p-on-disabled", primaryAction: "p-primary-action", secondaryAction: "p-secondary-action", setting: "p-setting", titleAction: "p-title-action" }, ngImport: i0 });
+    constructor(poThemeService) {
+        this.poThemeService = poThemeService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetBaseComponent, deps: [{ token: PoThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.7", type: PoWidgetBaseComponent, isStandalone: true, inputs: { secondaryLabel: ["p-secondary-label", "secondaryLabel"], dangerPrimaryAction: ["p-danger-primary-action", "dangerPrimaryAction", convertToBoolean], dangerSecondaryAction: ["p-danger-secondary-action", "dangerSecondaryAction", convertToBoolean], kindPrimaryAction: ["p-kind-primary-action", "kindPrimaryAction"], kindSecondaryAction: ["p-kind-secondary-action", "kindSecondaryAction"], tagLabel: ["p-tag", "tagLabel"], tagType: ["p-tag-type", "tagType"], tagIcon: ["p-tag-icon", "tagIcon"], actions: ["p-actions", "actions"], size: ["p-size", "size"], background: ["p-background", "background"], disabled: ["p-disabled", "disabled"], height: ["p-height", "height"], help: ["p-help", "help"], noShadow: ["p-no-shadow", "noShadow"], primary: ["p-primary", "primary"], primaryLabel: ["p-primary-label", "primaryLabel"], title: ["p-title", "title"] }, outputs: { click: "p-click", onDisabled: "p-on-disabled", primaryAction: "p-primary-action", secondaryAction: "p-secondary-action", setting: "p-setting", titleAction: "p-title-action" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetBaseComponent, decorators: [{
             type: Directive
-        }], propDecorators: { secondaryLabel: [{
+        }], ctorParameters: () => [{ type: PoThemeService }], propDecorators: { secondaryLabel: [{
                 type: Input,
                 args: ['p-secondary-label']
+            }], dangerPrimaryAction: [{
+                type: Input,
+                args: [{ alias: 'p-danger-primary-action', transform: convertToBoolean }]
+            }], dangerSecondaryAction: [{
+                type: Input,
+                args: [{ alias: 'p-danger-secondary-action', transform: convertToBoolean }]
+            }], kindPrimaryAction: [{
+                type: Input,
+                args: ['p-kind-primary-action']
+            }], kindSecondaryAction: [{
+                type: Input,
+                args: ['p-kind-secondary-action']
+            }], tagLabel: [{
+                type: Input,
+                args: ['p-tag']
+            }], tagType: [{
+                type: Input,
+                args: ['p-tag-type']
+            }], tagIcon: [{
+                type: Input,
+                args: ['p-tag-icon']
+            }], actions: [{
+                type: Input,
+                args: ['p-actions']
+            }], size: [{
+                type: Input,
+                args: [{ alias: 'p-size' }]
             }], click: [{
                 type: Output,
                 args: ['p-click']
@@ -52152,17 +52773,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  *
  */
 class PoWidgetComponent extends PoWidgetBaseComponent {
+    cd;
+    poTheme;
+    popupTarget;
+    literals;
+    hasContent = false;
+    poPopupComponent;
+    buttonPopUp;
+    wrapperInfo;
+    wrapperTitle;
+    tagElement;
+    contentContainer;
     get showTitleAction() {
         return !!this.titleAction.observers[0];
     }
-    constructor(viewRef) {
-        super();
+    constructor(viewRef, languageService, cd, poTheme) {
+        super(poTheme);
+        this.cd = cd;
+        this.poTheme = poTheme;
+        const language = languageService.getShortLanguage();
+        this.literals = {
+            ...poWidgetLiteralsDefault[poLocaleDefault],
+            ...poWidgetLiteralsDefault[language]
+        };
+    }
+    ngAfterViewInit() {
+        this.updateContent();
+    }
+    get a11Level() {
+        return this.poTheme.getA11yLevel();
+    }
+    ngOnChanges(changes) {
+        if (changes['help'] || changes['actions']) {
+            this.checkDefaultActions();
+        }
+        if (changes['title'] || changes['tagLabel']) {
+            this.cd.detectChanges();
+        }
+        this.updateContent();
+        this.setHeight(this.height);
     }
     ngOnInit() {
         this.setHeight(this.height);
+        this.checkDefaultActions();
+        this.showTooltip();
+        this.cd.detectChanges();
     }
     hasTitleHelpOrSetting() {
-        return !!this.title || !!this.help || !!this.setting.observers[0];
+        return !!this.title || !!this.help || !!this.setting.observers[0] || !!this.tagLabel || !!this?.actions.length;
     }
     onClick(event) {
         if (this.click.observed && !this.disabled) {
@@ -52177,21 +52835,18 @@ class PoWidgetComponent extends PoWidgetBaseComponent {
             event.preventDefault();
         }
     }
-    openHelp(event) {
+    openHelp() {
         if (!this.disabled) {
-            event.stopPropagation();
             window.open(this.help, '_blank');
         }
     }
-    runPrimaryAction(event) {
+    runPrimaryAction() {
         if (!this.disabled) {
-            event.stopPropagation();
             this.primaryAction.emit();
         }
     }
-    runSecondaryAction(event) {
+    runSecondaryAction() {
         if (!this.disabled) {
-            event.stopPropagation();
             this.secondaryAction.emit();
         }
     }
@@ -52202,25 +52857,24 @@ class PoWidgetComponent extends PoWidgetBaseComponent {
         }
     }
     setHeight(height) {
+        this.checkDefaultActions();
+        const actionsHeight = this.a11Level === 'AA' && this.size === 'small' ? 56 : 68;
+        const actionsButton = this.a11Level === 'AA' && this.size === 'small' ? 56 : 68;
         if (height) {
-            let bodyHeight = height;
-            const hasSettingOrHelp = this.setting.observers.length > 0 || this.help;
-            const footerBorder = 1;
-            const footerHeight = 40;
-            const settingHeight = 37;
-            const shadowHeight = 2;
-            const titleHeight = 50;
-            if (this.noShadow) {
-                bodyHeight -= shadowHeight;
-            }
-            if (hasSettingOrHelp && !this.title) {
-                bodyHeight -= settingHeight;
+            let bodyHeight = height - 2;
+            if ((this.title || this.tagLabel) && !this.actions.length) {
+                if (this.tagLabel && this.tagIcon) {
+                    bodyHeight -= 50;
+                }
+                else {
+                    bodyHeight -= 48;
+                }
             }
-            if (this.title) {
-                bodyHeight -= titleHeight;
+            if (this.actions.length) {
+                bodyHeight -= actionsHeight;
             }
-            if (this.primaryLabel) {
-                bodyHeight -= footerHeight + footerBorder;
+            if (this.primaryLabel || this.secondaryLabel) {
+                bodyHeight -= actionsButton;
             }
             this.containerHeight = `${bodyHeight}px`;
         }
@@ -52228,19 +52882,97 @@ class PoWidgetComponent extends PoWidgetBaseComponent {
             this.containerHeight = `auto`;
         }
     }
-    settingOutput(event) {
+    settingOutput() {
         if (!this.disabled) {
-            event.stopPropagation();
             this.setting.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: PoWidgetComponent, isStandalone: false, selector: "po-widget", usesInheritance: true, ngImport: i0, template: "<div\n  [class.po-clickable]=\"click.observers.length\"\n  [class.po-widget]=\"!primary\"\n  [class.po-widget-disabled]=\"disabled\"\n  [class.po-widget-primary]=\"primary\"\n  [class.po-widget-no-shadow]=\"click.observers.length && noShadow\"\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [tabindex]=\"disabled || !click.observers.length ? -1 : 0\"\n>\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\n    <span *ngIf=\"showTitleAction; else noTitleAction\" class=\"po-widget-title-action\" (click)=\"runTitleAction($event)\">\n      {{ title }}\n    </span>\n    <ng-template #noTitleAction>{{ title }}</ng-template>\n\n    <div *ngIf=\"setting.observers[0] || help\" class=\"po-pull-right\">\n      <po-icon\n        id=\"settingAction-{{ id }}\"\n        *ngIf=\"setting.observers[0]\"\n        p-icon=\"ICON_SETTINGS\"\n        class=\"po-clickable\"\n        (click)=\"settingOutput($event)\"\n      >\n      </po-icon>\n      <po-icon id=\"helpLink-{{ id }}\" *ngIf=\"help\" p-icon=\"ICON_HELP\" (click)=\"openHelp($event)\" class=\"po-clickable\">\n      </po-icon>\n    </div>\n  </div>\n\n  <po-container p-no-border [p-height]=\"containerHeight\">\n    <div class=\"po-widget-body\">\n      <ng-content></ng-content>\n    </div>\n  </po-container>\n\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\n    <div class=\"po-widget-xl\" *ngIf=\"!secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"secondaryAct-{{ id }}\" (click)=\"runSecondaryAction($event)\">{{\n        secondaryLabel\n      }}</a>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoIconComponent, selector: "po-icon", inputs: ["p-icon"] }] });
+    togglePopup(targetRef, event) {
+        event.stopPropagation();
+        this.popupTarget = targetRef;
+        this.cd.detectChanges();
+        this.poPopupComponent.toggle();
+    }
+    showTooltip() {
+        const sumGap = this.tagLabel ? 12 : 6;
+        return (this.title &&
+            this.wrapperTitle?.nativeElement.offsetWidth + sumGap + (this.tagElement?.nativeElement.offsetWidth || 0) >=
+                this.wrapperInfo?.nativeElement.offsetWidth);
+    }
+    closePopUp() {
+        this.buttonPopUp?.focus();
+    }
+    checkDefaultActions() {
+        if (this.setting.observed && !this.actions.some(action => action.$id === 'widget_configuration')) {
+            this.actions = [
+                ...this.actions,
+                {
+                    icon: 'ICON_SETTINGS',
+                    label: this.literals.configuration,
+                    type: 'default',
+                    action: this.settingOutput.bind(this),
+                    $id: 'widget_configuration'
+                }
+            ];
+        }
+        if (this.help && !this.actions.some(action => action.$id === 'widget_help')) {
+            this.actions = [
+                ...this.actions,
+                {
+                    icon: 'ICON_HELP',
+                    label: this.literals.help,
+                    type: 'default',
+                    action: this.openHelp.bind(this),
+                    $id: 'widget_help'
+                }
+            ];
+        }
+        if (!this.help) {
+            this.actions = this.actions.filter(action => action.$id !== 'widget_help');
+        }
+    }
+    updateContent() {
+        const el = this.contentContainer?.nativeElement;
+        if (!el) {
+            return;
+        }
+        const existContent = Array.from(el.childNodes).some(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return (node.textContent || '').trim().length > 0;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return true;
+            }
+            return false;
+        });
+        this.hasContent = existContent;
+        this.cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetComponent, deps: [{ token: i0.ViewContainerRef }, { token: PoLanguageService }, { token: i0.ChangeDetectorRef }, { token: PoThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: PoWidgetComponent, isStandalone: false, selector: "po-widget", viewQueries: [{ propertyName: "poPopupComponent", first: true, predicate: ["popup"], descendants: true, static: true }, { propertyName: "buttonPopUp", first: true, predicate: ["buttonPopUp"], descendants: true }, { propertyName: "wrapperInfo", first: true, predicate: ["wrapperInfo"], descendants: true }, { propertyName: "wrapperTitle", first: true, predicate: ["wrapperTitle"], descendants: true }, { propertyName: "tagElement", first: true, predicate: ["tagElement"], descendants: true, read: ElementRef }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"po-widget-container\"\n  [class.po-clickable]=\"click.observers.length\"\n  [class.po-widget]=\"!primary\"\n  [class.po-widget-disabled]=\"disabled\"\n  [class.po-widget-primary]=\"primary\"\n  [class.po-widget-no-shadow]=\"click.observers.length && noShadow\"\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [tabindex]=\"disabled || !click.observers.length ? -1 : 0\"\n>\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\n    <div class=\"po-widget-wrapper-info\">\n      <div #wrapperInfo class=\"po-widget-wrapper-tag\">\n        @if (showTitleAction) {\n          <span\n            #wrapperTitle\n            class=\"po-widget-title-action po-widget-text\"\n            (click)=\"runTitleAction($event)\"\n            [p-tooltip]=\"title && showTooltip() ? title : ''\"\n          >\n            {{ title }}\n          </span>\n        } @else {\n          <p #wrapperTitle class=\"po-widget-text\" [p-tooltip]=\"title && showTooltip() ? title : ''\">\n            {{ title }}\n          </p>\n        }\n\n        <po-tag\n          #tagElement\n          *ngIf=\"tagLabel\"\n          [p-value]=\"tagLabel\"\n          [p-icon]=\"tagIcon\"\n          [p-type]=\"disabled ? null : tagType ? tagType : 'success'\"\n          [p-color]=\"disabled ? '#ECECEE' : null\"\n          [p-text-color]=\"disabled ? '#36364A' : null\"\n          p-force-icon\n        >\n        </po-tag>\n      </div>\n\n      <div\n        *ngIf=\"actions?.length\"\n        class=\"po-widget-button-wrapper\"\n        #popupTarget\n        (click)=\"togglePopup(popupTarget, $event)\"\n        (keydown)=\"$event.stopPropagation()\"\n      >\n        <po-button\n          #buttonPopUp\n          [p-size]=\"size\"\n          p-icon=\"an-fill an-dots-three-outline-vertical\"\n          [p-disabled]=\"disabled\"\n          p-kind=\"tertiary\"\n        >\n        </po-button>\n      </div>\n    </div>\n  </div>\n\n  <po-container p-no-border [p-height]=\"containerHeight\">\n    <div #contentContainer class=\"po-widget-body\">\n      <ng-content #refContent></ng-content>\n    </div>\n    <span *ngIf=\"!hasContent && height\" class=\"po-header-content-fallback\">.</span>\n  </po-container>\n\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\n    <ng-container *ngIf=\"!secondaryLabel\">\n      <div class=\"po-widget-actions\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n        <po-button\n          class=\"po-widget-actions\"\n          id=\"primaryAct-{{ id }}\"\n          [p-label]=\"primaryLabel\"\n          (p-click)=\"runPrimaryAction()\"\n          [p-danger]=\"dangerPrimaryAction\"\n          [p-kind]=\"primary ? 'primary' : kindPrimaryAction || 'tertiary'\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"secondaryLabel\">\n      <div class=\"po-widget-actions\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n        <po-button\n          class=\"po-widget-actions\"\n          id=\"primaryAct-{{ id }}\"\n          [p-label]=\"primaryLabel\"\n          (p-click)=\"runPrimaryAction()\"\n          [p-danger]=\"dangerPrimaryAction\"\n          [p-kind]=\"primary ? 'primary' : kindPrimaryAction || 'tertiary'\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"secondaryLabel\">\n      <div class=\"po-widget-actions\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n        <po-button\n          class=\"po-widget-actions\"\n          id=\"secondaryAct-{{ id }}\"\n          [p-label]=\"secondaryLabel\"\n          (p-click)=\"runSecondaryAction()\"\n          [p-danger]=\"dangerSecondaryAction\"\n          [p-kind]=\"primary ? 'primary' : kindSecondaryAction || 'tertiary'\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"size\" [p-target]=\"popupTarget\" (p-close)=\"closePopUp()\"> </po-popup>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PoContainerComponent, selector: "po-container" }, { kind: "component", type: PoTagComponent, selector: "po-tag" }, { kind: "component", type: PoButtonComponent, selector: "po-button" }, { kind: "component", type: PoPopupComponent, selector: "po-popup" }, { kind: "directive", type: PoTooltipDirective, selector: "[p-tooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'po-widget', standalone: false, template: "<div\n  [class.po-clickable]=\"click.observers.length\"\n  [class.po-widget]=\"!primary\"\n  [class.po-widget-disabled]=\"disabled\"\n  [class.po-widget-primary]=\"primary\"\n  [class.po-widget-no-shadow]=\"click.observers.length && noShadow\"\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [tabindex]=\"disabled || !click.observers.length ? -1 : 0\"\n>\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\n    <span *ngIf=\"showTitleAction; else noTitleAction\" class=\"po-widget-title-action\" (click)=\"runTitleAction($event)\">\n      {{ title }}\n    </span>\n    <ng-template #noTitleAction>{{ title }}</ng-template>\n\n    <div *ngIf=\"setting.observers[0] || help\" class=\"po-pull-right\">\n      <po-icon\n        id=\"settingAction-{{ id }}\"\n        *ngIf=\"setting.observers[0]\"\n        p-icon=\"ICON_SETTINGS\"\n        class=\"po-clickable\"\n        (click)=\"settingOutput($event)\"\n      >\n      </po-icon>\n      <po-icon id=\"helpLink-{{ id }}\" *ngIf=\"help\" p-icon=\"ICON_HELP\" (click)=\"openHelp($event)\" class=\"po-clickable\">\n      </po-icon>\n    </div>\n  </div>\n\n  <po-container p-no-border [p-height]=\"containerHeight\">\n    <div class=\"po-widget-body\">\n      <ng-content></ng-content>\n    </div>\n  </po-container>\n\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\n    <div class=\"po-widget-xl\" *ngIf=\"!secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"secondaryAct-{{ id }}\" (click)=\"runSecondaryAction($event)\">{{\n        secondaryLabel\n      }}</a>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+            args: [{ selector: 'po-widget', standalone: false, template: "<div\n  class=\"po-widget-container\"\n  [class.po-clickable]=\"click.observers.length\"\n  [class.po-widget]=\"!primary\"\n  [class.po-widget-disabled]=\"disabled\"\n  [class.po-widget-primary]=\"primary\"\n  [class.po-widget-no-shadow]=\"click.observers.length && noShadow\"\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [tabindex]=\"disabled || !click.observers.length ? -1 : 0\"\n>\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\n    <div class=\"po-widget-wrapper-info\">\n      <div #wrapperInfo class=\"po-widget-wrapper-tag\">\n        @if (showTitleAction) {\n          <span\n            #wrapperTitle\n            class=\"po-widget-title-action po-widget-text\"\n            (click)=\"runTitleAction($event)\"\n            [p-tooltip]=\"title && showTooltip() ? title : ''\"\n          >\n            {{ title }}\n          </span>\n        } @else {\n          <p #wrapperTitle class=\"po-widget-text\" [p-tooltip]=\"title && showTooltip() ? title : ''\">\n            {{ title }}\n          </p>\n        }\n\n        <po-tag\n          #tagElement\n          *ngIf=\"tagLabel\"\n          [p-value]=\"tagLabel\"\n          [p-icon]=\"tagIcon\"\n          [p-type]=\"disabled ? null : tagType ? tagType : 'success'\"\n          [p-color]=\"disabled ? '#ECECEE' : null\"\n          [p-text-color]=\"disabled ? '#36364A' : null\"\n          p-force-icon\n        >\n        </po-tag>\n      </div>\n\n      <div\n        *ngIf=\"actions?.length\"\n        class=\"po-widget-button-wrapper\"\n        #popupTarget\n        (click)=\"togglePopup(popupTarget, $event)\"\n        (keydown)=\"$event.stopPropagation()\"\n      >\n        <po-button\n          #buttonPopUp\n          [p-size]=\"size\"\n          p-icon=\"an-fill an-dots-three-outline-vertical\"\n          [p-disabled]=\"disabled\"\n          p-kind=\"tertiary\"\n        >\n        </po-button>\n      </div>\n    </div>\n  </div>\n\n  <po-container p-no-border [p-height]=\"containerHeight\">\n    <div #contentContainer class=\"po-widget-body\">\n      <ng-content #refContent></ng-content>\n    </div>\n    <span *ngIf=\"!hasContent && height\" class=\"po-header-content-fallback\">.</span>\n  </po-container>\n\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\n    <ng-container *ngIf=\"!secondaryLabel\">\n      <div class=\"po-widget-actions\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n        <po-button\n          class=\"po-widget-actions\"\n          id=\"primaryAct-{{ id }}\"\n          [p-label]=\"primaryLabel\"\n          (p-click)=\"runPrimaryAction()\"\n          [p-danger]=\"dangerPrimaryAction\"\n          [p-kind]=\"primary ? 'primary' : kindPrimaryAction || 'tertiary'\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"secondaryLabel\">\n      <div class=\"po-widget-actions\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n        <po-button\n          class=\"po-widget-actions\"\n          id=\"primaryAct-{{ id }}\"\n          [p-label]=\"primaryLabel\"\n          (p-click)=\"runPrimaryAction()\"\n          [p-danger]=\"dangerPrimaryAction\"\n          [p-kind]=\"primary ? 'primary' : kindPrimaryAction || 'tertiary'\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"secondaryLabel\">\n      <div class=\"po-widget-actions\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n        <po-button\n          class=\"po-widget-actions\"\n          id=\"secondaryAct-{{ id }}\"\n          [p-label]=\"secondaryLabel\"\n          (p-click)=\"runSecondaryAction()\"\n          [p-danger]=\"dangerSecondaryAction\"\n          [p-kind]=\"primary ? 'primary' : kindSecondaryAction || 'tertiary'\"\n          [p-disabled]=\"disabled\"\n          [p-size]=\"size\"\n        ></po-button>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<po-popup #popup [p-actions]=\"actions\" [p-size]=\"size\" [p-target]=\"popupTarget\" (p-close)=\"closePopUp()\"> </po-popup>\n" }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: PoThemeService }], propDecorators: { poPopupComponent: [{
+                type: ViewChild,
+                args: ['popup', { static: true }]
+            }], buttonPopUp: [{
+                type: ViewChild,
+                args: ['buttonPopUp']
+            }], wrapperInfo: [{
+                type: ViewChild,
+                args: ['wrapperInfo']
+            }], wrapperTitle: [{
+                type: ViewChild,
+                args: ['wrapperTitle']
+            }], tagElement: [{
+                type: ViewChild,
+                args: ['tagElement', { read: ElementRef }]
+            }], contentContainer: [{
+                type: ViewChild,
+                args: ['contentContainer', { read: ElementRef }]
+            }] } });
 
 /**
  * @description
@@ -52249,13 +52981,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  */
 class PoWidgetModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetModule, declarations: [PoWidgetComponent], imports: [CommonModule, PoContainerModule, PoIconModule], exports: [PoWidgetComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetModule, imports: [CommonModule, PoContainerModule, PoIconModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetModule, declarations: [PoWidgetComponent], imports: [CommonModule, PoContainerModule, PoIconModule, PoTagModule, PoButtonModule, PoPopupModule, PoTooltipModule], exports: [PoWidgetComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetModule, imports: [CommonModule, PoContainerModule, PoIconModule, PoTagModule, PoButtonModule, PoPopupModule, PoTooltipModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PoWidgetModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PoContainerModule, PoIconModule],
+                    imports: [CommonModule, PoContainerModule, PoIconModule, PoTagModule, PoButtonModule, PoPopupModule, PoTooltipModule],
                     exports: [PoWidgetComponent],
                     declarations: [PoWidgetComponent]
                 }]
@@ -52298,6 +53030,7 @@ class PoComponentsModule {
             PoStepperModule,
             PoTableModule,
             PoTabsModule,
+            PoContextTabsModule,
             PoTagModule,
             PoToolbarModule,
             PoTreeViewModule,
@@ -52343,6 +53076,7 @@ class PoComponentsModule {
             PoSlideModule,
             PoStepperModule,
             PoTableModule,
+            PoContextTabsModule,
             PoTabsModule,
             PoTagModule,
             PoToolbarModule,
@@ -52391,6 +53125,7 @@ class PoComponentsModule {
             PoStepperModule,
             PoTableModule,
             PoTabsModule,
+            PoContextTabsModule,
             PoTagModule,
             PoToolbarModule,
             PoTreeViewModule,
@@ -52436,6 +53171,7 @@ class PoComponentsModule {
             PoSlideModule,
             PoStepperModule,
             PoTableModule,
+            PoContextTabsModule,
             PoTabsModule,
             PoTagModule,
             PoToolbarModule,
@@ -52489,6 +53225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         PoStepperModule,
                         PoTableModule,
                         PoTabsModule,
+                        PoContextTabsModule,
                         PoTagModule,
                         PoToolbarModule,
                         PoTreeViewModule,
@@ -52537,6 +53274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         PoSlideModule,
                         PoStepperModule,
                         PoTableModule,
+                        PoContextTabsModule,
                         PoTabsModule,
                         PoTagModule,
                         PoToolbarModule,
@@ -53477,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