fix(page): corrige cálculo de altura do po-page-content

fixes DTHFUI-12541

Author: anabye

projects/portal/src/styles.css

@@ -615,7 +615,7 @@ blockquote {
 }
 
 .app-portal-home .po-page .po-page-content {
-  padding: 0 0 4.5rem;
+  padding: 0 0 var(--spacing-xs);
 }
 
 .guides-grid-system-box {

projects/ui/src/lib/components/po-dropdown/po-dropdown-action.interface.ts

@@ -2,21 +2,22 @@ import { PoPopupAction } from '../po-popup/po-popup-action.interface';
 
 /**
  * @description
- * Interface do componente po-dropdown
+ *
+ * Interface para as ações do componente `po-dropdown`.
  *
  * @docsExtends PoPopupAction
  *
  * @usedBy PoDropdownComponent
  */
 export interface PoDropdownAction extends PoPopupAction {
   /**
-   * Array de ações (`PoDropdownAction`) usado para criar agrupadores de subitens.
+   * @optional
+   *
+   * @description
    *
-   * - Permite a criação de menus aninhados (submenus).
+   * Array de ações (`PoDropdownAction`) usado para criar agrupadores de subitens (submenus).
    *
-   * > Boas práticas de desenvolvimento:
-   * Recomenda-se limitar a navegação a, no máximo, três níveis hierárquicos.
-   * Isso evita sobrecarga cognitiva, facilita a memorização da estrutura e garante uma melhor experiência de uso.
+   * > Recomenda-se limitar a navegação a, no máximo, três níveis hierárquicos.
    */
   subItems?: Array<PoDropdownAction>;
 }

projects/ui/src/lib/components/po-page/interfaces/po-page-action.interface.ts

@@ -5,35 +5,36 @@ import { PoDropdownAction } from '../../po-dropdown';
  *
  * Interface para as ações dos componentes `po-page-default` e `po-page-list`.
  *
- * As ações são exibidas como botões no cabeçalho e, caso excedam o limite de exibição ou o layout
- * seja configurado para tal, são agrupadas automaticamente em um *dropdown*.
+ * As ações podem ser exibidas como botões no cabeçalho ou agrupadas em um *dropdown*,
+ * conforme o `PoPageActionsLayout` e o tamanho da tela.
  *
  * > As propriedades `separator`, `selected` e `subItems` possuem efeito apenas quando
  * a ação é exibida dentro do *dropdown*.
  *
+ * @docsExtends PoDropdownAction
+ *
  * @ignoreExtendedDescription
  *
  * @usedBy PoPageDefaultComponent, PoPageListComponent
  */
 export interface PoPageAction extends PoDropdownAction {
   /**
+   * @optional
+   *
    * @description
    *
-   * Define o estilo visual da ação quando ela é exibida como botão fora do *dropdown*.
+   * Define o estilo visual da ação quando exibida como botão fora do *dropdown*.
    *
    * Valores permitidos:
-   * - `primary`: Botão com maior destaque visual.
-   * - `secondary`: Estilo padrão para a maioria das ações.
-   *
-   * > Valores inválidos são ignorados, mantendo o valor padrão da posição da ação.
+   * - `primary`: botão com maior destaque visual.
+   * - `secondary`: estilo padrão.
    *
-   * > Aplicável apenas a ações exibidas como botões (fora do *dropdown*). Ações dentro do *dropdown* não utilizam esta propriedade.
+   * > Valores inválidos são ignorados e o componente aplica o estilo padrão da posição.
    *
-   * > Funciona independentemente da posição da ação e com qualquer `PoPageHeaderType` ou `PoPageActionsLayout`.
+   * > Somente uma ação pode ter `kind` igual a `primary`. Caso mais de uma defina `primary`,
+   * apenas a primeira será mantida e as demais receberão `secondary`.
    *
-   * **Valores padrão por posição (quando `kind` não é definido):**
-   * - Layout `default`: primeira ação = `primary`, demais = `secondary`.
-   * - Layout `mixed`: primeira ação = `primary` (header primary) ou `secondary` (header secondary/tertiary).
+   * > Quando não definido, o estilo é determinado pelo `PoPageActionsLayout`.
    */
   kind?: string;
 }

projects/ui/src/lib/components/po-page/po-page-content/po-page-content.component.html

@@ -1,3 +1,3 @@
-<div class="po-page-content" [style.height]="height" [style.opacity]="contentOpacity" [style.overflow-y]="overflowY">
+<div class="po-page-content" [style.height]="height" [style.opacity]="contentOpacity">
   <ng-content></ng-content>
 </div>

projects/ui/src/lib/components/po-page/po-page-content/po-page-content.component.spec.ts

@@ -1,51 +1,23 @@
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Component } from '@angular/core';
 
 import { changeBrowserInnerWidth, configureTestSuite } from '../../../util-test/util-expect.spec';
 
 import { PoPageContentComponent } from './po-page-content.component';
 
-@Component({
-  selector: 'po-page-content-div',
-  template: `
-    <div class="po-toolbar"></div>
-    <div class="po-page-header"></div>
-  `,
-  styles: [
-    `
-      .po-page-header {
-        height: 100px;
-        width: 100%;
-      }
-      .po-toolbar {
-        height: 33px;
-        width: 100%;
-      }
-    `
-  ],
-  standalone: false
-})
-class ContentDivComponent {}
-
 describe('PoPageContentComponent:', () => {
   let component: PoPageContentComponent;
   let fixture: ComponentFixture<PoPageContentComponent>;
 
-  let fixtureDiv: ComponentFixture<ContentDivComponent>;
-
   const eventResize = document.createEvent('Event');
   eventResize.initEvent('resize', false, true);
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
-      declarations: [ContentDivComponent, PoPageContentComponent]
+      declarations: [PoPageContentComponent]
     });
   });
 
   beforeEach(() => {
-    fixtureDiv = TestBed.createComponent(ContentDivComponent);
-    fixtureDiv.detectChanges();
-
     fixture = TestBed.createComponent(PoPageContentComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -55,7 +27,7 @@ describe('PoPageContentComponent:', () => {
     expect(component instanceof PoPageContentComponent).toBeTruthy();
   });
 
-  it('constructor: should call recalculateHeaderSize', () => {
+  it('constructor: should call recalculateHeaderSize on resize', () => {
     component['initializeListeners']();
     spyOn(component, 'recalculateHeaderSize');
 
@@ -66,12 +38,12 @@ describe('PoPageContentComponent:', () => {
   });
 
   describe('Methods:', () => {
-    it('recalculateHeaderSize: should call setHeightContent and set `contentOpacity` to equal 1.', fakeAsync(() => {
-      spyOn(component, 'setHeightContent');
+    it('recalculateHeaderSize: should set height and contentOpacity to 1', fakeAsync(() => {
       component.recalculateHeaderSize();
       tick(100);
-      expect(component.setHeightContent).toHaveBeenCalled();
+
       expect(component.contentOpacity).toBe(1);
+      expect(component.height).toBeTruthy();
     }));
 
     it('ngAfterViewInit: should call recalculateHeaderSize', () => {
@@ -82,24 +54,44 @@ describe('PoPageContentComponent:', () => {
       expect(component.recalculateHeaderSize).toHaveBeenCalled();
     });
 
-    it('setHeightContent: should calculate height without pageHeader', () => {
-      component.setHeightContent(undefined);
+    it('should calculate height based on viewport when no .po-page ancestor', fakeAsync(() => {
+      component.recalculateHeaderSize();
+      tick(100);
+
+      expect(component.height).toMatch(/^\d+px$|^auto$/);
+    }));
 
-      const bodyHeight = document.body.clientHeight;
-      const valueExpected = bodyHeight;
+    it('should set height to auto when inside nested po-page-content', fakeAsync(() => {
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('po-page-content');
+      const poPage = document.createElement('div');
+      poPage.classList.add('po-page');
+      wrapper.appendChild(poPage);
+      poPage.appendChild(fixture.nativeElement);
+      document.body.appendChild(wrapper);
 
-      expect(component.height).toBe(`${valueExpected}px`);
-    });
+      component.recalculateHeaderSize();
+      tick(100);
 
-    it('setHeightContent: should calculate height with bottom actions', () => {
-      const pageHeaderElement = fixtureDiv.debugElement.nativeElement.querySelector('.po-page-header') as HTMLElement;
-      const pageHeaderHeight = pageHeaderElement.offsetTop + pageHeaderElement.offsetHeight;
-      const bodyHeight = document.body.clientHeight;
-      const valueExpected = bodyHeight - pageHeaderHeight;
+      expect(component.height).toBe('auto');
 
-      component.setHeightContent(pageHeaderElement);
+      document.body.removeChild(wrapper);
+    }));
 
-      expect(component.height).toBe(`${valueExpected}px`);
-    });
+    it('should fallback to 90% when calculated height is zero or negative without .po-page', fakeAsync(() => {
+      spyOn(fixture.nativeElement, 'getBoundingClientRect').and.returnValue({
+        top: window.innerHeight + 100,
+        bottom: window.innerHeight + 200,
+        left: 0,
+        right: 0,
+        width: 0,
+        height: 0
+      });
+
+      component.recalculateHeaderSize();
+      tick(100);
+
+      expect(component.height).toBe('90%');
+    }));
   });
 });

projects/ui/src/lib/components/po-page/po-page-content/po-page-content.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, Renderer2, inject } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, NgZone, OnDestroy, Renderer2, inject } from '@angular/core';
 
 import { PoPageContentBaseComponent } from './po-page-content-base.component';
 
@@ -13,49 +13,82 @@ import { PoPageContentBaseComponent } from './po-page-content-base.component';
   standalone: false
 })
 export class PoPageContentComponent extends PoPageContentBaseComponent implements AfterViewInit, OnDestroy {
-  renderer = inject(Renderer2);
+  private readonly renderer = inject(Renderer2);
+  private readonly elementRef = inject(ElementRef);
+  private readonly ngZone = inject(NgZone);
 
   contentOpacity: number = 0;
+
   height: string = '90%';
-  overflowY: string = 'none';
 
   constructor() {
     super();
     this.initializeListeners();
   }
 
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
     this.recalculateHeaderSize();
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.removeListeners();
   }
 
-  recalculateHeaderSize() {
+  /**
+   * Recalcula a altura do po-page-content.
+   * Chamado internamente pelo po-page-default quando inputs que afetam
+   * o tamanho do header mudam (title, subtitle, breadcrumb, headerType, theme).
+   */
+  recalculateHeaderSize(): void {
     setTimeout(() => {
-      const pageHeaderElement: HTMLElement = document.querySelector('div.po-page-header');
-
-      this.setHeightContent(pageHeaderElement);
+      this.setHeightContent();
       this.contentOpacity = 1;
     });
   }
 
-  setHeightContent(poPageHeader: HTMLElement) {
-    const bodyHeight = document.body.clientHeight;
-    const pageHeaderHeight = poPageHeader ? poPageHeader.offsetTop + poPageHeader.offsetHeight : 0;
-    const newHeight = bodyHeight - pageHeaderHeight;
+  private setHeightContent(): void {
+    const poPageDiv: HTMLElement = this.elementRef.nativeElement.closest('.po-page');
+    const contentHost: HTMLElement = this.elementRef.nativeElement;
+
+    if (!poPageDiv) {
+      const contentTop = contentHost.getBoundingClientRect().top;
+      const newHeight = window.innerHeight - contentTop;
+      this.height = newHeight > 0 ? `${newHeight}px` : '90%';
+      return;
+    }
+
+    // Page nested (dentro de outro po-page-content): height controlado externamente.
+    if (poPageDiv.closest('.po-page-content')) {
+      this.height = 'auto';
+      return;
+    }
+
+    const pageHeader: HTMLElement = poPageDiv.querySelector(':scope > po-page-header');
+    const gap = parseFloat(getComputedStyle(poPageDiv).gap) || 0;
+
+    let contentTop: number;
+
+    if (pageHeader) {
+      contentTop = pageHeader.getBoundingClientRect().bottom + gap;
+    } else {
+      contentTop = poPageDiv.getBoundingClientRect().top;
+    }
 
-    this.height = `${newHeight}px`;
+    const newHeight = window.innerHeight - contentTop;
+    this.height = newHeight > 0 ? `${newHeight}px` : '90%';
   }
 
-  private initializeListeners() {
-    this.resizeListener = this.renderer.listen('window', 'resize', () => {
-      this.recalculateHeaderSize();
+  private initializeListeners(): void {
+    this.ngZone.runOutsideAngular(() => {
+      this.resizeListener = this.renderer.listen('window', 'resize', () => {
+        this.ngZone.run(() => this.recalculateHeaderSize());
+      });
     });
   }
 
-  private removeListeners() {
-    this.resizeListener();
+  private removeListeners(): void {
+    if (this.resizeListener) {
+      this.resizeListener();
+    }
   }
 }

projects/ui/src/lib/components/po-page/po-page-default/enums/po-page-actions-layout.enum.ts

@@ -3,24 +3,26 @@
  *
  * @description
  *
- * Enum que define os layouts de ações disponíveis no `po-page-default`.
+ * Define os layouts de exibição das ações no cabeçalho do `po-page-default`.
  *
- * > Compatível com todos os valores de `PoPageHeaderType` (`primary`, `secondary` e `tertiary`).
- *
- * Define os layouts de exibição das ações no cabeçalho.
+ * > Compatível com todos os valores de `PoPageHeaderType`.
  */
 export enum PoPageActionsLayout {
   /**
-   * Comportamento padrão: as ações são exibidas como botões (até 3 em desktop e 2 em mobile)
-   * e as demais são agrupadas no *dropdown*.
+   * Exibe as ações como botões (até 3 em desktop e 2 em mobile), agrupando as demais no *dropdown*.
+   *
+   * Quando `PoPageAction.kind` não é definido, a primeira ação recebe o estilo `primary`
+   * e as demais recebem `secondary`.
    */
   default = 'default',
 
-  /** Todas as ações são agrupadas exclusivamente dentro do menu *dropdown*. */
+  /**
+   * Agrupa todas as ações exclusivamente dentro do menu *dropdown*.
+   */
   dropdown = 'dropdown',
 
   /**
-   * A primeira ação é exibida como um botão de destaque e todas as demais são movidas para o *dropdown*.
+   * Exibe a primeira ação como botão e agrupa as demais no *dropdown*.
    */
   mixed = 'mixed'
 }