fix(tabs): corrige posicionamento do dropdown

Foi realizado uma correção no posicionamento do dropdown. (Ao utilizar o po-tabs com tabs agrupadas pelo dropdown o listbox não abre na posição correta estando dentro de um po-page-default)

fixes DTHFUI-9361

Author: bruno-severino

projects/ui/src/lib/components/po-tabs/po-tab-dropdown/po-tab-dropdown.component.spec.ts

@@ -23,15 +23,26 @@ describe('PoTabDropdownComponent:', () => {
   const buttonElementRefMock = {
     nativeElement: {
       getBoundingClientRect: () => ({
-        right: 100,
-        bottom: 100
+        right: 200,
+        height: 50
       }),
-      closest: (selector: string) => ({
-        getBoundingClientRect: () => ({
-          width: 300,
-          bottom: 120
-        })
-      })
+      closest: (selector: string) => {
+        if (selector === '.po-tabs-container') {
+          return {
+            getBoundingClientRect: () => ({
+              bottom: 150,
+              width: 400
+            })
+          };
+        }
+        return null;
+      }
+    }
+  };
+
+  const elementRefMock = {
+    nativeElement: {
+      closest: (selector: string) => null
     }
   };
 
@@ -108,42 +119,54 @@ describe('PoTabDropdownComponent:', () => {
       expect(component.closeDropdown).toHaveBeenCalled();
     });
 
-    it('setDropdownPosition: should set dropdownStyles with correct values when rightPosition is positive', () => {
+    it('setDropdownPosition: should set dropdownStyles with correct values when not inside a PoPage', () => {
+      component['elementRef'] = elementRefMock as ElementRef;
+
       component.setDropdownPosition();
 
       const expectedStyles = {
-        top: `${120 + 4 + 50}px`,
+        top: `${150 + 4 + window.scrollY}px`,
         maxWidth: '300px',
-        right: `${300 - 100}px`
+        right: `${200}px`
       };
 
       expect(component.dropdownStyles).toEqual(expectedStyles);
     });
 
-    it('setDropdownPosition: should set dropdownStyles with correct values when rightPosition is zero', () => {
-      const buttonElementRefMockZero = {
+    it('setDropdownPosition: should set dropdownStyles with correct values when inside a PoPage', () => {
+      const buttonElementRefMock = {
         nativeElement: {
-          getBoundingClientRect: () => ({
-            right: 350,
-            bottom: 100
-          }),
-          closest: (selector: string) => ({
-            getBoundingClientRect: () => ({
-              width: 300,
-              bottom: 120
-            })
-          })
+          getBoundingClientRect: () => ({ right: 300, height: 100 }),
+          closest: (selector: string) => {
+            if (selector === '.po-tabs-container') {
+              return { getBoundingClientRect: () => ({ right: 350, height: 120 }) };
+            } else if (selector === '.po-page-content') {
+              return true;
+            }
+            return null;
+          }
+        }
+      };
+      const elementRefMock = {
+        nativeElement: {
+          closest: (selector: string) => {
+            if (selector === '.po-page-content') {
+              return true;
+            }
+            return null;
+          }
         }
       };
 
-      component.button.buttonElement = buttonElementRefMockZero as ElementRef;
+      component.button.buttonElement = buttonElementRefMock as ElementRef;
+      component['elementRef'] = elementRefMock as ElementRef;
 
       component.setDropdownPosition();
 
       const expectedStyles = {
-        top: `${120 + 4 + 50}px`,
+        top: `${120 + 4 + window.scrollY}px`,
         maxWidth: '300px',
-        right: '0px'
+        right: '50px'
       };
 
       expect(component.dropdownStyles).toEqual(expectedStyles);

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

@@ -82,12 +82,28 @@ export class PoTabDropdownComponent implements AfterViewInit {
     const tabsContainerRect = this.buttonElement.nativeElement.closest('.po-tabs-container').getBoundingClientRect();
     const dropdownWidth = 300;
 
-    let rightPosition = tabsContainerRect.width - buttonRect.right;
-    if (rightPosition < 0) {
-      rightPosition = 0;
+    const isInsidePage = this.elementRef.nativeElement.closest('.po-page-content');
+    this.dropdownStyles = this.calculateDropdownStyles(buttonRect, tabsContainerRect, dropdownWidth, isInsidePage);
+  }
+
+  private calculateDropdownStyles(
+    buttonRect: DOMRect,
+    tabsContainerRect: DOMRect,
+    dropdownWidth: number,
+    isInsidePage: boolean
+  ) {
+    if (isInsidePage) {
+      return {
+        top: `${tabsContainerRect.height + 4 + window.scrollY}px`,
+        maxWidth: `${dropdownWidth}px`,
+        right: `${tabsContainerRect.right - buttonRect.right}px`
+      };
     }
 
-    this.dropdownStyles = {
+    let rightPosition = tabsContainerRect.width - buttonRect.right;
+    rightPosition = Math.max(0, rightPosition);
+
+    return {
       top: `${tabsContainerRect.bottom + 4 + window.scrollY}px`,
       maxWidth: `${dropdownWidth}px`,
       right: `${rightPosition}px`