feat(multiselect): cria propriedade p-append-in-body

cria propriedade `p-append-in-body` para renderizar o dropdown do componente fora do conteúdo principal

fixes DTHFUI-7742

Author: jcorrea97

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

@@ -135,6 +135,20 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
    */
   @Output('p-change') change: EventEmitter<any> = new EventEmitter<any>();
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define que o dropdown do multiselect será incluido no body da página e não suspenso com a caixa de texto do componente.
+   * Opção necessária para o caso de uso do componente em páginas que necessitam renderizar o multiselect fora do conteúdo principal.
+   *
+   * > Obs: O uso dessa propriedade pode acarretar na perda sequencial da tabulação da página
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-append-in-body', transform: convertToBoolean }) appendBox?: boolean = false;
+
   selectedOptions: Array<PoMultiselectOption | any> = [];
   visibleOptionsDropdown: Array<PoMultiselectOption | any> = [];
   visibleDisclaimers = [];

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html

@@ -5,7 +5,12 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
-  <div class="po-field-container-content" [class.po-multiselect-show]="dropdownOpen">
+  <div
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    class="po-field-container-content"
+    [class.po-multiselect-show]="dropdownOpen"
+  >
     <div
       #inputElement
       [tabindex]="disabled ? -1 : 0"
@@ -47,6 +52,22 @@
     </div>
   </div>
 
+  <ng-container *ngIf="appendBox; then dropdownCDK; else dropdownDefault"> </ng-container>
+
+  <ng-template #dropdownDefault>
+    <ng-container *ngTemplateOutlet="dropdownListbox"> </ng-container>
+  </ng-template>
+
+  <ng-template #dropdownCDK>
+    <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="true">
+      <ng-container *ngTemplateOutlet="dropdownListbox"></ng-container>
+    </ng-template>
+  </ng-template>
+
+  <po-field-container-bottom [p-help]="help" [p-disabled]="disabled"></po-field-container-bottom>
+</po-field-container>
+
+<ng-template #dropdownListbox>
   <po-multiselect-dropdown
     #dropdownElement
     [p-searching]="isServerSearching"
@@ -65,6 +86,4 @@
     (p-close-dropdown)="controlDropdownVisibility(false)"
   >
   </po-multiselect-dropdown>
-
-  <po-field-container-bottom [p-help]="help" [p-disabled]="disabled"></po-field-container-bottom>
-</po-field-container>
+</ng-template>

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testi
 import { HttpClient, HttpHandler } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Observable, of, throwError } from 'rxjs';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 import * as UtilsFunction from '../../../utils/util';
 
@@ -37,7 +38,7 @@ describe('PoMultiselectComponent:', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, OverlayModule],
       declarations: [
         PoDisclaimerComponent,
         PoFieldContainerComponent,
@@ -71,6 +72,7 @@ describe('PoMultiselectComponent:', () => {
   });
 
   it('should call function wasClickedOnToggle', () => {
+    fixture.detectChanges();
     component.openDropdown(true);
     const documentBody = document.body;
     const event = document.createEvent('MouseEvents');
@@ -232,15 +234,15 @@ describe('PoMultiselectComponent:', () => {
       { label: 'label2', value: 2 }
     ];
     component.selectedOptions = [{ label: 'label2', value: 2 }];
-
+    fixture.detectChanges();
     spyOn(component.dropdown, 'scrollTo');
     component.scrollToSelectedOptions();
     expect(component.dropdown.scrollTo).toHaveBeenCalledWith(1);
   });
 
   it('shouldn`t call dropdown.scrollTo', () => {
     component.selectedOptions = [];
-
+    fixture.detectChanges();
     spyOn(component.dropdown, 'scrollTo');
     component.scrollToSelectedOptions();
     expect(component.dropdown.scrollTo).not.toHaveBeenCalled();
@@ -268,7 +270,7 @@ describe('PoMultiselectComponent:', () => {
 
   it('should call controlDropdownVisibility in wasClickedOnToggle', () => {
     component.dropdownOpen = true;
-
+    fixture.detectChanges();
     const event = document.createEvent('MouseEvents');
     event.initEvent('click', false, true);
 
@@ -765,7 +767,7 @@ describe('PoMultiselectComponent:', () => {
       call 'dropdown.controlVisibility' with 'false', 'setVisibleOptionsDropdown' with 'options' and 'removeListeners'.`, () => {
       component.dropdownIcon = undefined;
       component.dropdownOpen = undefined;
-
+      fixture.detectChanges();
       const controlVisibilitySpy = spyOn(component.dropdown, 'controlVisibility');
       const setVisibleOptionsDropdownSpy = spyOn(component, 'setVisibleOptionsDropdown');
       const removeListenersSpy = spyOn(component, <any>'removeListeners');
@@ -834,7 +836,7 @@ describe('PoMultiselectComponent:', () => {
       'initializeListeners', 'scrollToSelectedOptions', 'changeDetector.detectChanges' and 'setPositionDropdown'.`, () => {
       component.dropdownIcon = undefined;
       component.dropdownOpen = undefined;
-
+      fixture.detectChanges();
       const controlVisibilitySpy = spyOn(component.dropdown, 'controlVisibility');
       const setVisibleOptionsDropdownSpy = spyOn(component, 'setVisibleOptionsDropdown');
       const initializeListenersSpy = spyOn(component, <any>'initializeListeners');
@@ -873,7 +875,7 @@ describe('PoMultiselectComponent:', () => {
       const customPositions = ['top', 'bottom'];
       const isSetElementWidth = true;
       const poMultiselectContainerOffset = 8;
-
+      fixture.detectChanges();
       const setElementsSpy = spyOn(component['controlPosition'], 'setElements');
       const adjustContainerPositionSpy = spyOn(component, <any>'adjustContainerPosition');
 
@@ -1025,7 +1027,7 @@ describe('PoMultiselectComponent:', () => {
       const wasClickedOnToggleSpy = spyOn(component, 'wasClickedOnToggle');
 
       clickOutEvent();
-
+      fixture.detectChanges();
       expect(wasClickedOnToggleSpy).not.toHaveBeenCalled();
 
       component['open']();
@@ -1052,6 +1054,7 @@ describe('PoMultiselectComponent:', () => {
     });
 
     it(`open: should call 'wasClickedOnToggle' if dropdown list is opened and click window.`, () => {
+      fixture.detectChanges();
       const wasClickedOnToggleSpy = spyOn(component, 'wasClickedOnToggle');
 
       component['open']();
@@ -1061,15 +1064,17 @@ describe('PoMultiselectComponent:', () => {
     });
 
     it(`open: should call 'updateVisibleItems' if dropdown list is opened and resize window.`, () => {
-      const updateVisibleItemsSpy = spyOn(component, 'updateVisibleItems');
+      fixture.detectChanges();
 
+      const updateVisibleItemsSpy = spyOn(component, 'updateVisibleItems');
       component['open']();
       newEvent('resize');
 
       expect(updateVisibleItemsSpy).toHaveBeenCalled();
     });
 
     it(`open: should call 'adjustContainerPosition' if dropdown list is opened and scroll window.`, () => {
+      fixture.detectChanges();
       const adjustContainerPositionSpy = spyOn(component, <any>'adjustContainerPosition');
 
       component['open']();

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts

@@ -103,8 +103,8 @@ export class PoMultiselectComponent
   @ContentChild(PoMultiselectOptionTemplateDirective, { static: true })
   multiselectOptionTemplate: PoMultiselectOptionTemplateDirective;
 
-  @ViewChild('dropdownElement', { read: ElementRef, static: true }) dropdownElement: ElementRef;
-  @ViewChild('dropdownElement', { static: true }) dropdown;
+  @ViewChild('dropdownElement', { read: ElementRef }) dropdownElement: ElementRef;
+  @ViewChild('dropdownElement') dropdown;
   @ViewChild('iconElement', { read: ElementRef, static: true }) iconElement: ElementRef;
   @ViewChild('inputElement', { read: ElementRef, static: true }) inputElement: ElementRef;