feat(combo): 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
po-ui · Oct 17, 2023 · 6a69494 · 6a69494
1 parent 3f121de
commit 6a69494
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 27 deletions.
diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
@@ -602,6 +602,20 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
    */
   @Input({ alias: 'p-cache', transform: convertToBoolean }) cache: boolean = true;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define que o dropdown do combo 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 combo 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;
+
   constructor(languageService: PoLanguageService) {
     this.language = languageService.getShortLanguage();
   }

diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html
@@ -49,33 +49,46 @@
     </div>
   </div>
 
-  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="true">
-    <div #containerElement class="po-combo-container" [hidden]="!comboOpen && !isServerSearching">
-      <po-listbox
-        #poListbox
-        #contentElement
-        p-type="option"
-        [p-items]="visibleOptions"
-        [p-field-value]="dynamicValue"
-        [p-field-label]="dynamicLabel"
-        [p-template]="comboOptionTemplate"
-        [p-search-value]="getInputValue()"
-        [p-infinite-loading]="infiniteLoading"
-        [p-infinite-scroll]="infiniteScroll"
-        [p-filtering]="isFiltering"
-        [p-cache]="cache"
-        (p-selectcombo-item)="onOptionClick($event, $event.event)"
-        [p-filter-mode]="filterMode"
-        [p-visible]="comboOpen"
-        [p-is-searching]="isServerSearching"
-        [p-should-mark-letter]="shouldMarkLetters"
-        [p-compare-cache]="compareObjects(cacheOptions, visibleOptions)"
-        [p-combo-service]="service"
-        [p-infinite-scroll-distance]="infiniteScrollDistance"
-        (p-update-infinite-scroll)="showMoreInfiniteScroll()"
-        (p-close)="onCloseCombo()"
-      ></po-listbox>
-    </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>
+  <div #containerElement class="po-combo-container" [hidden]="!comboOpen && !isServerSearching">
+    <po-listbox
+      #poListbox
+      #contentElement
+      p-type="option"
+      [p-items]="visibleOptions"
+      [p-field-value]="dynamicValue"
+      [p-field-label]="dynamicLabel"
+      [p-template]="comboOptionTemplate"
+      [p-search-value]="getInputValue()"
+      [p-infinite-loading]="infiniteLoading"
+      [p-infinite-scroll]="infiniteScroll"
+      [p-filtering]="isFiltering"
+      [p-cache]="cache"
+      (p-selectcombo-item)="onOptionClick($event, $event.event)"
+      [p-filter-mode]="filterMode"
+      [p-visible]="comboOpen"
+      [p-is-searching]="isServerSearching"
+      [p-should-mark-letter]="shouldMarkLetters"
+      [p-compare-cache]="compareObjects(cacheOptions, visibleOptions)"
+      [p-combo-service]="service"
+      [p-infinite-scroll-distance]="infiniteScrollDistance"
+      (p-update-infinite-scroll)="showMoreInfiniteScroll()"
+      (p-close)="onCloseCombo()"
+    ></po-listbox>
+  </div>
+</ng-template>