feat(tabs/bottomNav): addressing more issues and suggestions #4297

rmkrmk · rmkrmk · commit 15c97f5a177c · 2019-05-30T13:23:03.000+03:00
diff --git a/projects/igniteui-angular/src/lib/tabbar/routing-view-components.ts b/projects/igniteui-angular/src/lib/tabbar/routing-view-components.ts
@@ -3,27 +3,27 @@ import { Component, NgModule } from '@angular/core';
 @Component({
     template: `This is a content from view component # 1`
 })
-export class RoutingView1Component {
+export class BottomNavRoutingView1Component {
 }
 
 @Component({
     template: `This is a content from view component # 2`
 })
-export class RoutingView2Component {
+export class BottomNavRoutingView2Component {
 }
 
 @Component({
     template: `This is a content from view component # 3`
 })
-export class RoutingView3Component {
+export class BottomNavRoutingView3Component {
 }
 
 /**
  * @hidden
  */
 @NgModule({
-    declarations: [RoutingView1Component, RoutingView2Component, RoutingView3Component],
-    exports: [RoutingView1Component, RoutingView2Component, RoutingView3Component],
+    declarations: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
+    exports: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
 })
-export class RoutingViewComponentsModule {
+export class BottomNavRoutingViewComponentsModule {
 }
diff --git a/projects/igniteui-angular/src/lib/tabbar/tab-bar-content.component.html b/projects/igniteui-angular/src/lib/tabbar/tab-bar-content.component.html
@@ -1,11 +1,5 @@
-<ng-template #componentContentTemplate>
+<div *ngIf="!hasContentTabs">
     <ng-content></ng-content>
-</ng-template>
-<div>
-    <ng-container *ngIf="!hasContentTabs">
-        <ng-container *ngTemplateOutlet="componentContentTemplate">
-        </ng-container>
-    </ng-container>
 </div>
 <div #tablist class="{{itemStyle}}__menu {{itemStyle}}__menu--bottom" role="tablist" aria-orientation="horizontal">
     <ng-container *ngIf="!hasContentTabs">    
@@ -17,8 +11,5 @@
                 }" [relatedPanel]="panel" (click)="panel.select()" role="tab">
         </igx-tab>
     </ng-container>
-    <ng-container *ngIf="hasContentTabs">
-        <ng-container *ngTemplateOutlet="componentContentTemplate">
-        </ng-container>
-    </ng-container>
+    <ng-content select="igx-tab"></ng-content>
 </div>
diff --git a/projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts b/projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts
@@ -8,10 +8,10 @@ import { IgxBottomNavComponent,
          IgxTabTemplateDirective } from './tabbar.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { RoutingViewComponentsModule,
-    RoutingView1Component,
-    RoutingView2Component,
-    RoutingView3Component } from './routing-view-components';
+import { BottomNavRoutingViewComponentsModule,
+    BottomNavRoutingView1Component,
+    BottomNavRoutingView2Component,
+    BottomNavRoutingView3Component } from './routing-view-components';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
 
@@ -20,14 +20,14 @@ describe('TabBar', () => {
     beforeEach(async(() => {
 
         const testRoutes = [
-            { path: 'view1', component: RoutingView1Component },
-            { path: 'view2', component: RoutingView2Component },
-            { path: 'view3', component: RoutingView3Component }
+            { path: 'view1', component: BottomNavRoutingView1Component },
+            { path: 'view2', component: BottomNavRoutingView2Component },
+            { path: 'view3', component: BottomNavRoutingView3Component }
         ];
 
         TestBed.configureTestingModule({
             declarations: [TabBarTestComponent, BottomTabBarTestComponent, TemplatedTabBarTestComponent, TabBarRoutingTestComponent],
-            imports: [IgxBottomNavModule, RoutingViewComponentsModule, RouterTestingModule.withRoutes(testRoutes)]
+            imports: [IgxBottomNavModule, BottomNavRoutingViewComponentsModule, RouterTestingModule.withRoutes(testRoutes)]
         })
             .compileComponents();
     }));
@@ -171,7 +171,7 @@ describe('TabBar', () => {
 
         fixture.ngZone.run(() => { router.initialNavigation(); });
         tick();
-        expect(location.path()).toBe('/view1');
+        expect(location.path()).toBe('/');
 
         const theTabs = bottomNav.contentTabs.toArray();
 
@@ -197,7 +197,7 @@ describe('TabBar', () => {
 
         fixture.ngZone.run(() => { router.initialNavigation(); });
         tick();
-        expect(location.path()).toBe('/view1');
+        expect(location.path()).toBe('/');
 
         fixture.ngZone.run(() => { router.navigate(['/view3']); });
         tick();
diff --git a/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts b/projects/igniteui-angular/src/lib/tabs/tab-item.component.ts
@@ -190,7 +190,7 @@ export class IgxTabItemComponent implements IgxTabItemBase {
         } else if (this._isSelected !== newValue) {
             this._isSelected = newValue;
             if (this._isSelected) {
-                this._tabs.onTabItemSelected.emit({ tab: this, group: null });
+                this.select();
             }
         }
     }
@@ -211,9 +211,34 @@ export class IgxTabItemComponent implements IgxTabItemBase {
         } else {
             this._isSelected = true;
             this._tabs.onTabItemSelected.emit({ tab: this, group: null });
+            this.handleTabSelectionAnimation();
         }
     }
 
+    private handleTabSelectionAnimation(): void {
+        const tabElement = this.nativeTabItem.nativeElement;
+
+        // Scroll to the left
+        if (tabElement.offsetLeft < this._tabs.offset) {
+            this._tabs.scrollElement(tabElement, false);
+        }
+
+        // Scroll to the right
+        const viewPortOffsetWidth = this._tabs.viewPort.nativeElement.offsetWidth;
+        const delta = (tabElement.offsetLeft + tabElement.offsetWidth) - (viewPortOffsetWidth + this._tabs.offset);
+        // Fix for IE 11, a difference is accumulated from the widths calculations
+        if (delta > 1) {
+            this._tabs.scrollElement(tabElement, true);
+        }
+
+        this.transformIndicatorAnimation(tabElement);
+    }
+
+    private transformIndicatorAnimation(element: HTMLElement): void {
+        this._tabs.selectedIndicator.nativeElement.style.width = `${element.offsetWidth}px`;
+        this._tabs.selectedIndicator.nativeElement.style.transform = `translate(${element.offsetLeft}px)`;
+    }
+
     private onKeyDown(isLeftArrow: boolean, index = null): void {
         const tabsArray = this._tabs.tabs.toArray();
         if (index === null) {
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs-routing-view-components.ts b/projects/igniteui-angular/src/lib/tabs/tabs-routing-view-components.ts
@@ -0,0 +1,29 @@
+import { Component, NgModule } from '@angular/core';
+
+@Component({
+    template: `This is a content from view component # 1`
+})
+export class TabsRoutingView1Component {
+}
+
+@Component({
+    template: `This is a content from view component # 2`
+})
+export class TabsRoutingView2Component {
+}
+
+@Component({
+    template: `This is a content from view component # 3`
+})
+export class TabsRoutingView3Component {
+}
+
+/**
+ * @hidden
+ */
+@NgModule({
+    declarations: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component],
+    exports: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component],
+})
+export class TabsRoutingViewComponentsModule {
+}
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.component.html b/projects/igniteui-angular/src/lib/tabs/tabs.component.html
@@ -1,7 +1,4 @@
 <!-- TODO Remove tab container from here -->
-<ng-template #componentContentTemplate>
-    <ng-content></ng-content>
-</ng-template>
 <div #tabsContainer>
     <div class="igx-tabs__header" #headerContainer>
         <button igxRipple class="igx-tabs__header-button" igxButton="icon" (click)="scrollLeft($event)" igxLeftButtonStyle>
@@ -18,11 +15,8 @@
                     'igx-tabs__header-menu-item--disabled': group.disabled }" [relatedGroup]="group" role="tab">
                     </igx-tab-item>
                 </ng-container>
-                <ng-container *ngIf="hasContentTabs">
-                    <ng-container *ngTemplateOutlet="componentContentTemplate">
-                    </ng-container>
-                </ng-container>
-                <div #selectedIndicator *ngIf="groups.length > 0" class="igx-tabs__header-menu-item-indicator"></div>
+                <ng-content select="igx-tab-item"></ng-content>
+                <div #selectedIndicator *ngIf="groups.length > 0 || contentTabs.length > 0" class="igx-tabs__header-menu-item-indicator"></div>
             </div>
         </div>
         <button igxRipple class="igx-tabs__header-button" igxButton="icon" (click)="scrollRight($event)" igxRightButtonStyle>
@@ -31,10 +25,7 @@
     </div>
     <div class="igx-tabs__content-fixed">
         <div #contentsContainer class="igx-tabs__content-fluid">
-            <ng-container *ngIf="!hasContentTabs">
-                <ng-container *ngTemplateOutlet="componentContentTemplate">
-                </ng-container>
-            </ng-container>
+            <ng-content></ng-content>
         </div>
     </div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts b/projects/igniteui-angular/src/lib/tabs/tabs.component.spec.ts
@@ -11,14 +11,29 @@ import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { UIInteractions } from '../test-utils/ui-interactions.spec';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { TabsRoutingViewComponentsModule,
+    TabsRoutingView1Component,
+    TabsRoutingView2Component,
+    TabsRoutingView3Component } from './tabs-routing-view-components';
 
 describe('IgxTabs', () => {
     configureTestSuite();
     beforeEach(async(() => {
+
+        const testRoutes = [
+            { path: 'view1', component: TabsRoutingView1Component },
+            { path: 'view2', component: TabsRoutingView2Component },
+            { path: 'view3', component: TabsRoutingView3Component }
+        ];
+
         TestBed.configureTestingModule({
             declarations: [TabsTestComponent, TabsTest2Component, TemplatedTabsTestComponent,
-                TabsTestSelectedTabComponent, TabsTestCustomStylesComponent, TabsTestBug4420Component],
-            imports: [IgxTabsModule, IgxButtonModule, IgxDropDownModule, IgxToggleModule, BrowserAnimationsModule]
+                TabsTestSelectedTabComponent, TabsTestCustomStylesComponent, TabsTestBug4420Component, TabsRoutingTestComponent],
+            imports: [IgxTabsModule, IgxButtonModule, IgxDropDownModule, IgxToggleModule, BrowserAnimationsModule,
+                TabsRoutingViewComponentsModule, RouterTestingModule.withRoutes(testRoutes)]
         })
             .compileComponents();
     }));
@@ -397,6 +412,65 @@ describe('IgxTabs', () => {
         const indicator = dom.query(By.css('.igx-tabs__header-menu-item-indicator'));
         expect(indicator.nativeElement.style.width).toBe('90px');
     }));
+
+    it('should navigate to the correct URL when clicking on tab buttons', fakeAsync(() => {
+        const router = TestBed.get(Router);
+        const location = TestBed.get(Location);
+        const fixture = TestBed.createComponent(TabsRoutingTestComponent);
+        const tabsComp = fixture.componentInstance.tabs;
+        fixture.detectChanges();
+
+        fixture.ngZone.run(() => { router.initialNavigation(); });
+        tick();
+        expect(location.path()).toBe('/');
+
+        const theTabs = tabsComp.contentTabs.toArray();
+
+        fixture.ngZone.run(() => { theTabs[2].nativeTabItem.nativeElement.dispatchEvent(new Event('click')); });
+        tick();
+        expect(location.path()).toBe('/view3');
+
+        fixture.ngZone.run(() => { theTabs[1].nativeTabItem.nativeElement.dispatchEvent(new Event('click')); });
+        tick();
+        expect(location.path()).toBe('/view2');
+
+        fixture.ngZone.run(() => { theTabs[0].nativeTabItem.nativeElement.dispatchEvent(new Event('click')); });
+        tick();
+        expect(location.path()).toBe('/view1');
+    }));
+
+    it('should select the correct tab button/panel when navigating an URL', fakeAsync(() => {
+        const router = TestBed.get(Router);
+        const location = TestBed.get(Location);
+        const fixture = TestBed.createComponent(TabsRoutingTestComponent);
+        const tabsComp = fixture.componentInstance.tabs;
+        fixture.detectChanges();
+
+        fixture.ngZone.run(() => { router.initialNavigation(); });
+        tick();
+        expect(location.path()).toBe('/');
+
+        fixture.ngZone.run(() => { router.navigate(['/view3']); });
+        tick();
+        expect(location.path()).toBe('/view3');
+        fixture.detectChanges();
+        expect(tabsComp.selectedIndex).toBe(2);
+        expect(tabsComp.contentTabs.toArray()[2].isSelected).toBe(true);
+
+        fixture.ngZone.run(() => { router.navigate(['/view2']); });
+        tick();
+        expect(location.path()).toBe('/view2');
+        fixture.detectChanges();
+        expect(tabsComp.selectedIndex).toBe(1);
+        expect(tabsComp.contentTabs.toArray()[1].isSelected).toBe(true);
+
+        fixture.ngZone.run(() => { router.navigate(['/view1']); });
+        tick();
+        expect(location.path()).toBe('/view1');
+        fixture.detectChanges();
+        expect(tabsComp.selectedIndex).toBe(0);
+        expect(tabsComp.contentTabs.toArray()[0].isSelected).toBe(true);
+    }));
 });
 
 @Component({
@@ -584,3 +658,25 @@ class TabsTestCustomStylesComponent {
 class TabsTestBug4420Component {
     @ViewChild(IgxTabsComponent) public tabs: IgxTabsComponent;
 }
+
+@Component({
+    template: `
+        <div #wrapperDiv>
+            <igx-tabs>
+                <igx-tab-item label="Tab 1" routerLink="/view1" routerLinkActive #rla1="routerLinkActive" [isSelected]="rla1.isActive">
+                </igx-tab-item>
+                <igx-tab-item label="Tab 2" routerLink="/view2" routerLinkActive #rla2="routerLinkActive" [isSelected]="rla2.isActive">
+                </igx-tab-item>
+                <igx-tab-item label="Tab 3" routerLink="/view3" routerLinkActive #rla3="routerLinkActive" [isSelected]="rla3.isActive">
+                </igx-tab-item>
+            </igx-tabs>
+            <div>
+                <router-outlet></router-outlet>
+            </div>
+        </div>
+    `
+})
+class TabsRoutingTestComponent {
+    @ViewChild(IgxTabsComponent)
+    public tabs: IgxTabsComponent;
+}
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.component.ts b/projects/igniteui-angular/src/lib/tabs/tabs.component.ts
@@ -217,7 +217,8 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         const defaultStyle = `igx-tabs`;
         const fixedStyle = `igx-tabs--fixed`;
         const iconStyle = `igx-tabs--icons`;
-        const iconLabelFound = this.groups.find((group) => group.icon != null && group.label != null);
+        const iconLabelFoundInGroups = this.groups.find((group) => group.icon != null && group.label != null);
+        const iconLabelFoundInTabs = this.contentTabs.find((tab) => tab.icon != null && tab.label != null);
         let css;
         switch (TabsType[this.tabsType.toUpperCase()]) {
             case TabsType.FIXED: {
@@ -231,7 +232,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         }
 
         // Layout fix for items with icons
-        if (iconLabelFound !== undefined) {
+        if (iconLabelFoundInGroups !== undefined || iconLabelFoundInTabs !== undefined) {
             css = `${css} ${iconStyle}`;
         }
 
diff --git a/src/app/bottomnav/bottomnav.sample.html b/src/app/bottomnav/bottomnav.sample.html
@@ -52,7 +52,7 @@ <h3>Tab 3 Content</h3>
 
         <article class="sample-column">
             <div class="tabbar-wrapper" #tabbarEl>
-                <igx-bottom-nav #tabbar (onTabSelected)="route($event)">
+                <igx-bottom-nav #tabbar>
 
                     <igx-tab-panel label="Movies" icon="local_movies">
                         <div class="tab-content">
@@ -83,7 +83,15 @@ <h3>Tab 2 Content</h3>
 
                     <igx-tab-panel label="watchlist" icon="list">
                         <div class="tab-content">
-                            <router-outlet name="tabPanelOutlet"></router-outlet>
+                            <h3>Tab 3 Content</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id velit rutrum, accumsan ante a,
+                                semper nunc. Phasellus ultrices tincidunt imperdiet. Nullam vulputate mauris diam. Nullam
+                                elementum, libero vel varius fermentum, lorem ex bibendum nulla, pretium lacinia erat nibh vel
+                                massa. In hendrerit, sapien ac mollis iaculis, dolor tellus malesuada sem, a accumsan lectus
+                                nisl facilisis leo. Curabitur consequat sit amet nulla at consequat. Duis volutpat tristique
+                                luctus.Vivamus vitae malesuada odio. Praesent ante lectus, porta a eleifend vel, sodales eu
+                                nisl. Vivamus sit amet purus eu lectus cursus rhoncus quis non ex. Cras ac nulla sed arcu finibus
+                                volutpat. Vivamus risus ipsum, pharetra a augue nec, euismod fringilla odio. </p>
                         </div>
                     </igx-tab-panel>
 
diff --git a/src/app/bottomnav/bottomnav.sample.ts b/src/app/bottomnav/bottomnav.sample.ts
