feat(tabs): habilita scroll horizontal das tabs em dispositivos moveis

Implementada verificação no tratamento de múltiplas abas para alternar
o comportamento da exibição em telas pequenas (mobile).

Fixes DTHFUI-1416

Author: mateusjmaf

projects/ui/src/lib/components/po-tabs/po-tab-button/po-tab-button.component.html

@@ -7,7 +7,7 @@
   (click)="onClick()"
   (keyup.enter)="onClick()">
 
-  <span class="po-tab-button-label">
+  <span class="po-tab-button-label po-text-ellipsis">
     {{label}}
   </span>
 </div>

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

@@ -8,8 +8,9 @@ import { convertToBoolean } from '../../utils/util';
  * O componente `po-tabs` é responsável por agrupar [abas](/documentation/po-tab) dispostas numa linha horizontal,
  * ideal para facilitar a organização de conteúdos.
  *
- * Até cinco abas o componente exibe todas normalmente. Contudo, a partir de seis abas, o componente torna visível
- * apenas as quatro primeiras, agrupando todas as demais na quinta aba rotulada de **Mais**.
+ * Em dispositivos móveis o componente exibirá tadas as abas de maneira linear gerando um *scroll* na horizontal. Já em telas telas com
+ * resoluções maiores, o componente exibirá até cinco abas normalmente, porém, à partir de seis abas o componente automaticamente torna
+ * visível apenas as quatro primeiras, agrupando as subsequentes na quinta aba rotulada de **Mais**.
  *
  * > As abas que estiverem agrupadas serão dispostas numa cascata suspensa que será exibida ao clicar no botão **Mais**.
  *

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

@@ -1,34 +1,38 @@
-<div class="po-tabs-header">
+<div class="po-tabs-container"
+  [class.po-tabs-container-mobile]="isMobileDevice">
+  <div class="po-tabs-header">
 
-  <ng-container *ngFor="let tab of tabs; trackBy: trackByFn">
-    <po-tab-button *ngIf="isVisibleTab(tab)"
-      class="po-tab-button"
-      [p-active]="tab.active"
-      [p-disabled]="tab.disabled"
-      [p-id]="tab.id"
-      [p-hide]="tab.hide"
-      [p-label]="tab.label"
-      [p-small]="small"
-      (keyup.enter)="closePopover()"
-      (p-activated)="onTabActive(tab)"
-      (p-change-state)="onTabChangeState(tab)"
-      (p-click)="selectedTab(tab)">
-    </po-tab-button>
-  </ng-container>
+    <ng-container *ngFor="let tab of tabs; trackBy: trackByFn">
+      <po-tab-button *ngIf="isVisibleTab(tab)"
+        class="po-tab-button"
+        [class.po-tab-button-mobile]="isMobileDevice"
+        [p-active]="tab.active"
+        [p-disabled]="tab.disabled"
+        [p-hide]="tab.hide"
+        [p-id]="tab.id"
+        [p-label]="tab.label"
+        [p-small]="small"
+        (keyup.enter)="closePopover()"
+        (p-activated)="onTabActive(tab)"
+        (p-change-state)="onTabChangeState(tab)"
+        (p-click)="selectedTab(tab)">
+      </po-tab-button>
+    </ng-container>
 
-  <po-tab-dropdown #tabDropdown
-    *ngIf="isShowTabDropdown"
-    class="po-tab-button po-tab-dropdown"
-    p-label="Mais"
-    [p-small]="small"
-    [p-tabs]="overflowedTabs"
-    (p-activated)="onTabActive($event)"
-    (p-change-state)="onTabChangeState($event)"
-    (p-click)="selectedTab($event)">
-  </po-tab-dropdown>
+    <po-tab-dropdown #tabDropdown
+      *ngIf="isShowTabDropdown"
+      class="po-tab-button po-tab-dropdown"
+      p-label="Mais"
+      [p-small]="small"
+      [p-tabs]="overflowedTabs"
+      (p-activated)="onTabActive($event)"
+      (p-change-state)="onTabChangeState($event)"
+      (p-click)="selectedTab($event)">
+    </po-tab-dropdown>
+  </div>
 </div>
 
-<div class="po-tabs-container">
+<div class="po-tabs-content">
   <ng-content></ng-content>
 </div>
 

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

@@ -2,13 +2,15 @@ import { By } from '@angular/platform-browser';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { configureTestSuite } from './../../util-test/util-expect.spec';
+import * as UtilsFunction from './../../utils/util';
 
 import { PoTabsComponent } from './po-tabs.component';
 import { PoTabsModule } from './po-tabs.module';
 
 describe('PoTabsComponent:', () => {
   let component: PoTabsComponent;
   let fixture: ComponentFixture<PoTabsComponent>;
+  let nativeElement: any;
 
   let defaultTab;
   let activeTab;
@@ -33,6 +35,8 @@ describe('PoTabsComponent:', () => {
     hiddenTab = { id: '4', hide: true, label: 'Tab 4' };
 
     fixture.detectChanges();
+
+    nativeElement = fixture.debugElement.nativeElement;
   });
 
   it('should be created', () => {
@@ -49,13 +53,15 @@ describe('PoTabsComponent:', () => {
       expect(component.overflowedTabs).toEqual(overflowedTabs);
     });
 
-    it('isShowTabDropdown: should return `true` if `visibleTabs` is greater than `maxNumberOfTabs`', () => {
+    it('isShowTabDropdown: should return `true` if `visibleTabs` is greater than `maxNumberOfTabs` and isn`t a mobile device.', () => {
+      spyOn(UtilsFunction, <any> 'isMobile').and.returnValue(false);
       component.tabs = <any> [defaultTab, defaultTab, defaultTab, defaultTab, defaultTab, defaultTab];
 
       expect(component.isShowTabDropdown).toBe(true);
     });
 
-    it('isShowTabDropdown: should return `false` if `visibleTabs` is lower than `maxNumberOfTabs`', () => {
+    it('isShowTabDropdown: should return `false` if `visibleTabs` is lower than `maxNumberOfTabs` and is a mobile device.', () => {
+      spyOn(UtilsFunction, <any> 'isMobile').and.returnValue(true);
       component.tabs = <any> [defaultTab, defaultTab, defaultTab, defaultTab];
 
       expect(component.isShowTabDropdown).toBe(false);
@@ -248,6 +254,16 @@ describe('PoTabsComponent:', () => {
 
   describe('Templates:', () => {
 
+    const sixTabs = <any> [
+      {id: '0', label: '0'},
+      {id: '1', label: '1'},
+      {id: '2', label: '2'},
+      {id: '3', label: '3'},
+      {id: '4', label: '4'},
+      {id: '5', label: '5'},
+      {id: '6', label: '6'}
+    ];
+
     it('should call `closePopover` if `enter` is pressed in `po-tab-button`.', () => {
       component.tabs = <any> [{id: '0', label: '0'}];
       fixture.detectChanges();
@@ -261,6 +277,46 @@ describe('PoTabsComponent:', () => {
       expect(spyOnClosePopover).toHaveBeenCalled();
     });
 
+    it('should display `po-tab-dropdown` if has six tabs or more and is not a mobile devide.', () => {
+      component.tabs = sixTabs;
+      spyOn(UtilsFunction, <any> 'isMobile').and.returnValue(false);
+
+      fixture.detectChanges();
+      const poTabDropdown = nativeElement.querySelector('.po-tab-button.po-tab-dropdown');
+
+      expect(poTabDropdown).toBeTruthy();
+    });
+
+    it('shouldn`t display `po-tab-dropdown` if has six tabs or more but is a mobile devide.', () => {
+      component.tabs = sixTabs;
+      spyOn(UtilsFunction, <any> 'isMobile').and.returnValue(true);
+
+      fixture.detectChanges();
+      const poTabDropdown = nativeElement.querySelector('.po-tab-button.po-tab-dropdown');
+
+      expect(poTabDropdown).toBeNull();
+    });
+
+    it('should find `po-tabs-container-mobile` if mobile device', () => {
+      component.tabs = sixTabs;
+      spyOn(UtilsFunction, <any> 'isMobile').and.returnValue(true);
+
+      fixture.detectChanges();
+      const poTabContainerMobile = nativeElement.querySelector('.po-tabs-container-mobile');
+
+      expect(poTabContainerMobile).toBeTruthy();
+    });
+
+    it('should find `po-tab-button-mobile` if mobile device', () => {
+      component.tabs = sixTabs;
+      spyOn(UtilsFunction, <any> 'isMobile').and.returnValue(true);
+
+      fixture.detectChanges();
+      const poTabButtonMobile = nativeElement.querySelector('.po-tab-button-mobile');
+
+      expect(poTabButtonMobile).toBeTruthy();
+    });
+
   });
 
 });

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

@@ -1,5 +1,7 @@
 import { ChangeDetectorRef, Component, ContentChildren, QueryList, ViewChild } from '@angular/core';
 
+import { isMobile } from './../../utils/util';
+
 import { PoTabComponent } from './po-tab/po-tab.component';
 import { PoTabDropdownComponent } from './po-tab-dropdown/po-tab-dropdown.component';
 import { PoTabsBaseComponent } from './po-tabs-base.component';
@@ -50,8 +52,12 @@ export class PoTabsComponent extends PoTabsBaseComponent {
     super();
   }
 
+  get isMobileDevice() {
+    return isMobile();
+  }
+
   get isShowTabDropdown() {
-    return this.visibleTabs.length > this.maxNumberOfTabs;
+    return !this.isMobileDevice && this.visibleTabs.length > this.maxNumberOfTabs;
   }
 
   // tabs que serão apresentadas na aba "Mais"
@@ -72,6 +78,10 @@ export class PoTabsComponent extends PoTabsBaseComponent {
   }
 
   isVisibleTab(tab) {
+    if (this.isMobileDevice) {
+      return true;
+    }
+
     const visibleTabIndex = this.visibleTabs.findIndex(visibleTab => visibleTab.id === tab.id);
 
     return (this.visibleTabs.length <= this.maxNumberOfTabs) || (visibleTabIndex < (this.maxNumberOfTabs - 1));