feat(page): adiciona tipos de header e layout de ações

Inclui propriedades `p-header-type` e `p-actions-layout`.
Adiciona propriedade `kind` em `PoPageAction`.

fixes DTHFUI-12541

Author: devin-ai-integration[bot]

projects/portal/src/styles.css

@@ -19,11 +19,6 @@ html.potheme-light-AAA #logo-totvs {
   content: url('./assets/graphics/logo-totvs-preto.png');
 }
 
-html.potheme-dark-AA .po-header-nav,
-html.potheme-dark-AAA .po-header-nav {
-  --stroke-color: var(--color-brand-01-dark);
-}
-
 .dot {
   border-radius: 50%;
   display: inline-block;
@@ -400,6 +395,13 @@ sample-po-menu-panel-customer .po-wrapper-menu-panel .po-toolbar {
   padding-right: 50px;
 }
 
+.docs-sample-container .po-page-content {
+  left: 0px !important;
+  margin-top: 0px !important;
+  position: relative !important;
+  width: 100% !important;
+}
+
 .docs-sample-container .po-page-bottom-container {
   width: calc(100% - 48px) !important;
 }
@@ -851,40 +853,3 @@ blockquote {
     display: none;
   }
 }
-
-sample-po-context-menu-basic-view .docs-sample-container .po-context-menu-wrapper,
-sample-po-context-menu-labs-view .docs-sample-container .po-context-menu-wrapper {
-  height: 384px !important;
-  min-height: 384px !important;
-  max-height: 384px !important;
-  overflow: hidden;
-  border: var(--border-width-sm) solid;
-  border-color: var(--color-neutral-light-20);
-}
-
-sample-po-context-menu-user-view .docs-sample-container {
-  border: 1px solid #ccc;
-  padding: 0px;
-}
-
-sample-po-context-menu-user-view .docs-sample-container .po-context-menu-wrapper {
-  height: 384px !important;
-  min-height: 384px !important;
-  max-height: 384px !important;
-  overflow: hidden;
-}
-
-sample-po-context-menu-user-view po-context-tabs .po-tabs-container {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-sample-po-context-menu-user-view .docs-sample-container .po-page {
-  height: 100% !important;
-}
-
-sample-po-context-menu-user-view .docs-sample-container .po-page .po-page-content {
-  height: auto !important;
-  min-height: 0;
-  overflow-y: auto;
-}

projects/ui/src/lib/components/po-icon/po-icon-dictionary.ts

@@ -6,6 +6,7 @@ export const AnimaliaIconDictionary: { [key: string]: string } = {
   ICON_ALIGN_LEFT: 'an an-text-align-left',
   ICON_ALIGN_RIGHT: 'an an-text-align-right',
   ICON_ARROW_ARC_LEFT: 'an an-arrow-arc-left',
+  ICON_ARROW_BACK: 'an an-arrow-left',
   ICON_ARROW_DOWN: 'an an-caret-down',
   ICON_OTHER_ARROW_DOWN: 'an an-arrow-down',
   ICON_ARROW_LEFT: 'an an-caret-left',

projects/ui/src/lib/components/po-page/index.ts

@@ -1,3 +1,5 @@
+export * from './po-page-default/enums/po-page-actions-layout.enum';
+export * from './po-page-default/enums/po-page-header-type.enum';
 export * from './po-page-default/po-page-default.component';
 export * from './po-page-default/po-page-default.interface';
 export * from './po-page-default/po-page-default-literals.interface';

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

@@ -2,16 +2,42 @@ import { PoDropdownAction } from '../../po-dropdown';
 
 /**
  * @description
- * Interface para as ações dos componentes po-page-default e po-page-list.
  *
- * > Quando o array de actions possui quatro ou mais registros, os dois últimos e os seguintes são automaticamente agrupados no po-dropdown.
- * A partir desse ponto, as propriedades `selected`, `separator`, `type` e `subItems` passam a ter efeito apenas nas ações exibidas dentro do dropdown, ou seja, a partir da terceira ação.
- * Dessa forma, o uso de subItems (agrupadores dentro do dropdown) só terá efeito quando houver pelo menos quatro ações definidas.
+ * Interface para as ações dos componentes `po-page-default` e `po-page-list`.
  *
- * @docsExtends PoDropdownAction
+ * 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*.
+ *
+ * **Regras de exibição e agrupamento:**
+ * - Propriedades como `selected`, `separator`, `type` e `subItems` possuem efeito apenas quando a ação
+ * está dentro do *dropdown*.
+ * - O uso de `subItems` (agrupadores) só é renderizado quando a ação é movida para o menu de overflow.
+ * - O limite de botões visíveis (fora do *dropdown*) varia conforme o tamanho da tela ou a
+ * propriedade `p-page-actions-layout`.
  *
  * @ignoreExtendedDescription
  *
  * @usedBy PoPageDefaultComponent, PoPageListComponent
  */
-export interface PoPageAction extends PoDropdownAction {}
+export interface PoPageAction extends PoDropdownAction {
+  /**
+   * @description
+   *
+   * Define o estilo visual da ação quando ela é 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.
+   *
+   * > Aplicável apenas a ações exibidas como botões (fora do *dropdown*). Ações dentro do *dropdown* não utilizam esta propriedade.
+   *
+   * > Funciona independentemente da posição da ação e com qualquer `PoPageHeaderType` ou `PoPageActionsLayout`.
+   *
+   * **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).
+   */
+  kind?: string;
+}

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

@@ -5,4 +5,6 @@
  *
  * O componente **po-page-content** é utilizado como o container para o conteúdo da página.
  */
-export class PoPageContentBaseComponent {}
+export class PoPageContentBaseComponent {
+  // Classe base mantida por compatibilidade.
+}

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

@@ -0,0 +1,26 @@
+/**
+ * @usedBy PoPageDefaultComponent
+ *
+ * @description
+ *
+ * Enum que define os layouts de ações disponíveis no `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.
+ */
+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*.
+   */
+  default = 'default',
+
+  /** Todas as ações são agrupadas 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*.
+   */
+  mixed = 'mixed'
+}

projects/ui/src/lib/components/po-page/po-page-default/enums/po-page-header-type.enum.ts

@@ -0,0 +1,26 @@
+/**
+ * @usedBy PoPageDefaultComponent
+ *
+ * @description
+ *
+ * Define os tipos de cabeçalho disponíveis, alterando a hierarquia visual e os elementos de navegação.
+ */
+export enum PoPageHeaderType {
+  /**
+   * Layout padrão que permite o uso de `p-breadcrumb`. As ações seguem o estilo definido
+   * em suas propriedades individuais (padrão: `primary` para a primeira ação).
+   */
+  primary = 'primary',
+
+  /**
+   * Exibe um botão de retorno (voltar) ao lado do título e oculta o `p-breadcrumb`.
+   * Por padrão, as ações assumem o estilo `secondary`.
+   */
+  secondary = 'secondary',
+
+  /**
+   * Layout simplificado sem botões de navegação e sem `p-breadcrumb`.
+   * Assim como no tipo `secondary`, as ações assumem o estilo `secondary` por padrão.
+   */
+  tertiary = 'tertiary'
+}

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

@@ -1,4 +1,5 @@
 import { Directive } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 import { expectPropertiesValues } from '../../../util-test/util-expect.spec';
 import { poLocaleDefault } from './../../../services/po-language/po-language.constant';
@@ -18,10 +19,12 @@ describe('PoPageDefaultBaseComponent:', () => {
   let languageService: PoLanguageService;
   let component: PoPageDefaultComponent;
 
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({}).compileComponents();
+
     languageService = new PoLanguageService();
 
-    component = new PoPageDefaultComponent(languageService);
+    component = TestBed.runInInjectionContext(() => new PoPageDefaultComponent(languageService));
   });
 
   it('should be created', () => {
@@ -108,6 +111,58 @@ describe('PoPageDefaultBaseComponent:', () => {
       expectPropertiesValues(component, 'actions', validValues, validValues);
     });
 
+    describe('p-page-header-type:', () => {
+      it('should set `pageHeaderType` to `primary` when receiving `primary`.', () => {
+        component.pageHeaderType = 'primary';
+        expect(component.pageHeaderType).toBe('primary');
+      });
+
+      it('should set `pageHeaderType` to `secondary` when receiving `secondary`.', () => {
+        component.pageHeaderType = 'secondary';
+        expect(component.pageHeaderType).toBe('secondary');
+      });
+
+      it('should set `pageHeaderType` to `tertiary` when receiving `tertiary`.', () => {
+        component.pageHeaderType = 'tertiary';
+        expect(component.pageHeaderType).toBe('tertiary');
+      });
+
+      it('should default `pageHeaderType` to `primary` with invalid values.', () => {
+        const invalidValues = ['invalid', '', null, undefined, 'other'];
+
+        invalidValues.forEach(value => {
+          component.pageHeaderType = value;
+          expect(component.pageHeaderType).toBe('primary');
+        });
+      });
+    });
+
+    describe('p-page-actions-layout:', () => {
+      it('should set `pageActionsLayout` to `default` when receiving `default`.', () => {
+        component.pageActionsLayout = 'default';
+        expect(component.pageActionsLayout).toBe('default');
+      });
+
+      it('should set `pageActionsLayout` to `dropdown` when receiving `dropdown`.', () => {
+        component.pageActionsLayout = 'dropdown';
+        expect(component.pageActionsLayout).toBe('dropdown');
+      });
+
+      it('should set `pageActionsLayout` to `mixed` when receiving `mixed`.', () => {
+        component.pageActionsLayout = 'mixed';
+        expect(component.pageActionsLayout).toBe('mixed');
+      });
+
+      it('should default `pageActionsLayout` to `default` with invalid values.', () => {
+        const invalidValues = ['invalid', '', null, undefined, 'other'];
+
+        invalidValues.forEach(value => {
+          component.pageActionsLayout = value;
+          expect(component.pageActionsLayout).toBe('default');
+        });
+      });
+    });
+
     describe('p-components-size', () => {
       beforeEach(() => {
         document.documentElement.removeAttribute('data-a11y');