@po-ui/ng-components 19.22.0 → 19.23.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) {
@@ -51840,6 +51845,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 +51877,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 +51895,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 +52074,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 +52082,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 +52090,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 +52122,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 +52138,7 @@ class PoWidgetBaseComponent {
      *
      * @description
      *
-     * Desabilita todas as ações do componente.
+     * Desabilita o componente.
      *
      * @default `false`
      */
@@ -51983,9 +52154,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 +52169,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 +52184,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 +52216,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 +52231,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 +52243,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 +52352,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 +52414,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 +52436,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 +52461,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 +52560,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]
                 }]