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;

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

@@ -1,10 +1,13 @@
 import { Directive, HostBinding, HostListener, Input } from '@angular/core';
 
 import { convertToBoolean, getDefaultSizeFn, validateSizeFn } from './../../utils/util';
+import { PO_CONTROL_POSITIONS } from './../../services/po-control-position/po-control-position.constants';
 
 import { PoFieldSize } from '../../enums/po-field-size.enum';
 import { PoDropdownAction } from './po-dropdown-action.interface';
 
+const poDropdownDefaultPosition = 'bottom-left';
+
 /**
  * @description
  *
@@ -77,6 +80,7 @@ export class PoDropdownBaseComponent {
   private _disabled: boolean = false;
   private _size?: string = undefined;
   private _initialSize?: string = undefined;
+  private _position: string = poDropdownDefaultPosition;
 
   /** Lista de ações que serão exibidas no componente. */
   @Input('p-actions') set actions(value: Array<PoDropdownAction>) {
@@ -129,6 +133,52 @@ export class PoDropdownBaseComponent {
     return this._size ?? getDefaultSizeFn(PoFieldSize);
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define a posição preferencial de abertura do popup do dropdown em relação ao botão.
+   *
+   * Posições válidas:
+   * - `right`: No lado direito.
+   * - `right-bottom`: No lado direito inferior.
+   * - `right-top`: No lado direito superior.
+   * - `bottom`: Abaixo.
+   * - `bottom-left`: Abaixo e à esquerda (padrão).
+   * - `bottom-right`: Abaixo e à direita.
+   * - `left`: No lado esquerdo.
+   * - `left-top`: No lado esquerdo superior.
+   * - `left-bottom`: No lado esquerdo inferior.
+   * - `top`: Acima.
+   * - `top-right`: Acima e à direita.
+   * - `top-left`: Acima e à esquerda.
+   *
+   * > O popup será rotacionado automaticamente caso não caiba na posição definida.
+   *
+   * @default `bottom-left`
+   */
+  @Input('p-position') set position(value: string) {
+    this._position = PO_CONTROL_POSITIONS.includes(value) ? value : poDropdownDefaultPosition;
+  }
+
+  get position(): string {
+    return this._position;
+  }
+
+  get popupCustomPositions(): Array<string> {
+    if (this._position === 'bottom-right') {
+      return ['bottom-right', 'top-right'];
+    }
+    if (this._position === 'top-left') {
+      return ['top-left', 'bottom-left'];
+    }
+    if (this._position === 'top-right') {
+      return ['top-right', 'bottom-right'];
+    }
+    return ['bottom-left', 'top-left'];
+  }
+
   @HostListener('window:PoUiThemeChange')
   protected onThemeChange(): void {
     this.applySizeBasedOnA11y();

projects/ui/src/lib/components/po-dropdown/po-dropdown-base.componente.spec.ts

@@ -98,5 +98,44 @@ describe('PoDropdownBaseComponent:', () => {
         expect((component as any).applySizeBasedOnA11y).toHaveBeenCalled();
       });
     });
+
+    describe('p-position:', () => {
+      it('should set position to valid value', () => {
+        component.position = 'bottom-right';
+        expect(component.position).toBe('bottom-right');
+      });
+
+      it('should default to bottom-left with invalid value', () => {
+        component.position = 'invalid';
+        expect(component.position).toBe('bottom-left');
+      });
+
+      it('should default to bottom-left with empty string', () => {
+        component.position = '';
+        expect(component.position).toBe('bottom-left');
+      });
+    });
+
+    describe('popupCustomPositions:', () => {
+      it('should return bottom-right and top-right when position is bottom-right', () => {
+        component.position = 'bottom-right';
+        expect(component.popupCustomPositions).toEqual(['bottom-right', 'top-right']);
+      });
+
+      it('should return top-left and bottom-left when position is top-left', () => {
+        component.position = 'top-left';
+        expect(component.popupCustomPositions).toEqual(['top-left', 'bottom-left']);
+      });
+
+      it('should return top-right and bottom-right when position is top-right', () => {
+        component.position = 'top-right';
+        expect(component.popupCustomPositions).toEqual(['top-right', 'bottom-right']);
+      });
+
+      it('should return bottom-left and top-left as default', () => {
+        component.position = 'bottom-left';
+        expect(component.popupCustomPositions).toEqual(['bottom-left', 'top-left']);
+      });
+    });
   });
 });

projects/ui/src/lib/components/po-dropdown/po-dropdown.component.html

@@ -19,9 +19,9 @@
   #popupRef
   p-hide-arrow
   p-is-corner-align
-  p-position="bottom-left"
+  [p-position]="position"
   [p-actions]="actions"
-  [p-custom-positions]="['bottom-left', 'top-left']"
+  [p-custom-positions]="popupCustomPositions"
   [p-size]="size"
   [p-target]="dropdownRef"
   [p-listbox-subitems]="true"

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,38 @@ 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*.
+ *
+ * > As propriedades `separator`, `selected` e `subItems` possuem efeito apenas quando
+ * a ação é exibida dentro do *dropdown*.
  *
  * @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-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

@@ -19,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', () => {
@@ -118,6 +120,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');