feat(material/tabs): Rename a few things

Author: zelliott

src/components-examples/material/tabs/index.ts

@@ -20,7 +20,7 @@ import {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-
 import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
 import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
 import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
-import {TabNavBarWithOutletExample} from './tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example';
+import {TabNavBarWithPanelExample} from './tab-nav-bar-with-panel/tab-nav-bar-with-panel-example';
 
 export {
   TabGroupAlignExample,
@@ -36,7 +36,7 @@ export {
   TabGroupStretchedExample,
   TabGroupThemeExample,
   TabNavBarBasicExample,
-  TabNavBarWithOutletExample,
+  TabNavBarWithPanelExample,
 };
 
 const EXAMPLES = [
@@ -53,7 +53,7 @@ const EXAMPLES = [
   TabGroupStretchedExample,
   TabGroupThemeExample,
   TabNavBarBasicExample,
-  TabNavBarWithOutletExample,
+  TabNavBarWithPanelExample,
 ];
 
 @NgModule({

src/components-examples/material/tabs/tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example.css renamed to src/components-examples/material/tabs/tab-nav-bar-with-panel/tab-nav-bar-with-panel-example.css

@@ -1,11 +1,11 @@
 <!-- #docregion mat-tab-nav -->
-<nav mat-tab-nav-bar [backgroundColor]="background" [outlet]="outlet">
+<nav mat-tab-nav-bar [backgroundColor]="background" [panel]="panel">
   <a mat-tab-link *ngFor="let link of links"
      (click)="activeLink = link"
      [active]="activeLink == link"> {{link}} </a>
   <a mat-tab-link disabled>Disabled Link</a>
 </nav>
-<mat-tab-nav-outlet #outlet></mat-tab-nav-outlet>
+<mat-tab-nav-panel #panel></mat-tab-nav-panel>
 <!-- #enddocregion mat-tab-nav -->
 
 <button mat-raised-button class="example-action-button" (click)="toggleBackground()">

src/components-examples/material/tabs/tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example.html renamed to src/components-examples/material/tabs/tab-nav-bar-with-panel/tab-nav-bar-with-panel-example.html

@@ -2,14 +2,14 @@ import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
 
 /**
- * @title Use of the tab nav bar with the dedicated outlet component.
+ * @title Use of the tab nav bar with the dedicated panel component.
  */
 @Component({
-  selector: 'tab-nav-bar-with-outlet-example',
-  templateUrl: 'tab-nav-bar-with-outlet-example.html',
-  styleUrls: ['tab-nav-bar-with-outlet-example.css'],
+  selector: 'tab-nav-bar-with-panel-example',
+  templateUrl: 'tab-nav-bar-with-panel-example.html',
+  styleUrls: ['tab-nav-bar-with-panel-example.css'],
 })
-export class TabNavBarWithOutletExample {
+export class TabNavBarWithPanelExample {
   links = ['First', 'Second', 'Third'];
   activeLink = this.links[0];
   background: ThemePalette = undefined;

src/components-examples/material/tabs/tab-nav-bar-with-outlet/tab-nav-bar-with-outlet-example.ts renamed to src/components-examples/material/tabs/tab-nav-bar-with-panel/tab-nav-bar-with-panel-example.ts

@@ -20,5 +20,5 @@ <h3>Tab group theming</h3>
 <tab-group-theme-example></tab-group-theme-example>
 <h3>Tab navigation bar basic</h3>
 <tab-nav-bar-basic-example></tab-nav-bar-basic-example>
-<h3>Tab navigation bar with outlet</h3>
-<tab-nav-bar-with-outlet-example></tab-nav-bar-with-outlet-example>
+<h3>Tab navigation bar with panel</h3>
+<tab-nav-bar-with-panel-example></tab-nav-bar-with-panel-example>

src/dev-app/tabs/tabs-demo.html

@@ -20,7 +20,13 @@ export {MatTabHeader, _MatTabHeaderBase} from './tab-header';
 export {MatTabLabelWrapper} from './tab-label-wrapper';
 export {MatTab, MAT_TAB_GROUP} from './tab';
 export {MatTabLabel, MAT_TAB} from './tab-label';
-export {MatTabNav, MatTabLink, MatTabNavOutlet, _MatTabNavBase, _MatTabLinkBase} from './tab-nav-bar/index';
+export {
+  MatTabNav,
+  MatTabLink,
+  MatTabNavPanel,
+  _MatTabNavBase,
+  _MatTabLinkBase,
+} from './tab-nav-bar/index';
 export {MatTabContent} from './tab-content';
 export {ScrollDirection} from './paginated-tab-header';
 export * from './tabs-animations';

src/material/tabs/public-api.ts

@@ -26,7 +26,6 @@ import {
   Input,
   NgZone,
   OnDestroy,
-  OnInit,
   Optional,
   QueryList,
   ViewChild,
@@ -51,6 +50,9 @@ import {startWith, takeUntil} from 'rxjs/operators';
 import {MatInkBar} from '../ink-bar';
 import {MatPaginatedTabHeader, MatPaginatedTabHeaderItem} from '../paginated-tab-header';
 
+// Increasing integer for generating unique ids for tab nav components.
+let nextUniqueId = 0;
+
 /**
  * Base class with all of the `MatTabNav` functionality.
  * @docs-private
@@ -61,7 +63,9 @@ export abstract class _MatTabNavBase
   implements AfterContentChecked, AfterContentInit, OnDestroy
 {
   /** Query list of all tab links of the tab navigation. */
-  abstract override _items: QueryList<MatPaginatedTabHeaderItem & {active: boolean, _uniqueId: string}>;
+  abstract override _items: QueryList<
+    MatPaginatedTabHeaderItem & {active: boolean; _uniqueId: string}
+  >;
 
   /** Background color of the tab nav. */
   @Input()
@@ -93,13 +97,12 @@ export abstract class _MatTabNavBase
   /** Theme color of the nav bar. */
   @Input() color: ThemePalette = 'primary';
 
-  /** Associated outlet controlled by the nav bar. */
-  @Input() outlet?: MatTabNavOutlet;
-
-  /** Returns whether the nav bar should follow the ARIA tab design pattern. */
-  get _isTabDesignPattern() {
-    return !!this.outlet;
-  }
+  /**
+   * Associated tab panel controlled by the nav bar. If not provided, then the nav bar
+   * follows the ARIA link / navigation landmark pattern. If provided, it follows the
+   * ARIA tabs design pattern.
+   */
+  @Input() panel?: MatTabNavPanel;
 
   constructor(
     elementRef: ElementRef,
@@ -140,9 +143,9 @@ export abstract class _MatTabNavBase
         this.selectedIndex = i;
         this._changeDetectorRef.markForCheck();
 
-        if (this._isTabDesignPattern) {
-          this.outlet!._activeTabId = items[i]._uniqueId;
-          this.outlet!._cdr.markForCheck();
+        if (this.panel) {
+          this.panel._activeTabId = items[i]._uniqueId;
+          this.panel._cdr.markForCheck();
         }
 
         return;
@@ -172,7 +175,7 @@ export abstract class _MatTabNavBase
     '[class.mat-primary]': 'color !== "warn" && color !== "accent"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',
-    '[attr.role]': '_isTabDesignPattern ? "tablist" : null'
+    '[attr.role]': 'panel ? "tablist" : null',
   },
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:validate-decorators
@@ -202,9 +205,6 @@ export class MatTabNav extends _MatTabNavBase {
   static ngAcceptInputType_disableRipple: BooleanInput;
 }
 
-// Increasing integer for generating unique ids for tab link components.
-let nextUniqueTabLinkId = 0;
-
 // Boilerplate for applying mixins to MatTabLink.
 const _MatTabLinkMixinBase = mixinTabIndex(mixinDisableRipple(mixinDisabled(class {})));
 
@@ -259,12 +259,8 @@ export class _MatTabLinkBase
     );
   }
 
-  get _index(): number {
-    return this._tabNavBar._items.toArray().indexOf(this);
-  }
-
   /** Unique id for the component referenced in ARIA attributes. */
-  _uniqueId = `mat-tab-link-${nextUniqueTabLinkId++}`;
+  _uniqueId = `mat-tab-link-${nextUniqueId++}`;
 
   constructor(
     private _tabNavBar: _MatTabNavBase,
@@ -300,21 +296,30 @@ export class _MatTabLinkBase
   _handleFocus() {
     // Since we allow navigation through tabbing in the nav bar, we
     // have to update the focused index whenever the link receives focus.
-    this._tabNavBar.focusIndex = this._index;
+    this._tabNavBar.focusIndex = this._getIndex();
   }
 
   _handleSpace() {
-    if (this._tabNavBar._isTabDesignPattern) {
+    if (this._tabNavBar.panel) {
       this.elementRef.nativeElement.click();
     }
   }
 
   _getTabIndex() {
+    if (!this._tabNavBar.panel) {
+      return this.tabIndex;
+    }
+
     if (!this._tabNavBar._items) {
       return this._isActive ? '0' : '-1';
     }
 
-    return (this._tabNavBar.focusIndex === this._index) ? '0' : '-1';
+    return this._tabNavBar.focusIndex === this._getIndex() ? '0' : '-1';
+  }
+
+  /** Returns this item's index in the nav bar. */
+  _getIndex(): number {
+    return this._tabNavBar._items.toArray().indexOf(this);
   }
 
   static ngAcceptInputType_active: BooleanInput;
@@ -332,16 +337,16 @@ export class _MatTabLinkBase
   inputs: ['disabled', 'disableRipple', 'tabIndex'],
   host: {
     'class': 'mat-tab-link mat-focus-indicator',
-    '[attr.aria-controls]': '_tabNavBar._isTabDesignPattern ? _tabNavBar.outlet._uniqueId : null',
-    '[attr.aria-current]': 'active && !_tabNavBar._isTabDesignPattern ? "page" : null',
+    '[attr.aria-controls]': '_tabNavBar.panel ? _tabNavBar.panel._uniqueId : null',
+    '[attr.aria-current]': 'active && !_tabNavBar.panel ? "page" : null',
     '[attr.aria-disabled]': 'disabled',
-    '[attr.aria-selected]': '_tabNavBar._isTabDesignPattern ? (active ? "true" : "false") : null',
-    '[attr.tabIndex]': '_tabNavBar._isTabDesignPattern ? _getTabIndex() : tabIndex',
-    '[attr.role]': '_tabNavBar._isTabDesignPattern ? "tab" : null',
+    '[attr.aria-selected]': '_tabNavBar.panel ? (active ? "true" : "false") : null',
+    '[attr.tabIndex]': '_getTabIndex()',
+    '[attr.role]': '_tabNavBar.panel ? "tab" : null',
     '[class.mat-tab-disabled]': 'disabled',
     '[class.mat-tab-label-active]': 'active',
     '(focus)': '_handleFocus()',
-    '(keydown.space)': '_handleSpace()'
+    '(keydown.space)': '_handleSpace()',
   },
 })
 export class MatTabLink extends _MatTabLinkBase implements OnDestroy {
@@ -369,23 +374,27 @@ export class MatTabLink extends _MatTabLinkBase implements OnDestroy {
   }
 }
 
-// Increasing integer for generating unique ids for tab nav outlet components.
-let nextUniqueTabNavOutletId = 0;
-
+/**
+ * Tab panel component associated with MatTabNav.
+ */
 @Component({
-  selector: 'mat-tab-nav-outlet',
-  exportAs: 'matTabNavOutlet',
+  selector: 'mat-tab-nav-panel',
+  exportAs: 'matTabNavPanel',
   template: '<ng-content select="router-outlet"></ng-content>',
   host: {
     '[attr.aria-labelledby]': '_activeTabId || null',
     'role': 'tabpanel',
   },
+  encapsulation: ViewEncapsulation.None,
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
 })
-export class MatTabNavOutlet {
+export class MatTabNavPanel {
+  /** Id of the active tab in the nav bar. */
   _activeTabId?: string;
 
   /** Unique id for the component referenced in ARIA attributes. */
-  _uniqueId = `mat-tab-nav-outlet-${nextUniqueTabNavOutletId++}`;
+  _uniqueId = `mat-tab-nav-panel-${nextUniqueId++}`;
 
   constructor(readonly _cdr: ChangeDetectorRef) {}
 }

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -20,7 +20,7 @@ import {MatTabGroup} from './tab-group';
 import {MatTabHeader} from './tab-header';
 import {MatTabLabel} from './tab-label';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
-import {MatTabLink, MatTabNav, MatTabNavOutlet} from './tab-nav-bar/tab-nav-bar';
+import {MatTabLink, MatTabNav, MatTabNavPanel} from './tab-nav-bar/tab-nav-bar';
 
 @NgModule({
   imports: [
@@ -38,7 +38,7 @@ import {MatTabLink, MatTabNav, MatTabNavOutlet} from './tab-nav-bar/tab-nav-bar'
     MatTabLabel,
     MatTab,
     MatTabNav,
-    MatTabNavOutlet,
+    MatTabNavPanel,
     MatTabLink,
     MatTabContent,
   ],
@@ -49,7 +49,7 @@ import {MatTabLink, MatTabNav, MatTabNavOutlet} from './tab-nav-bar/tab-nav-bar'
     MatInkBar,
     MatTabLabelWrapper,
     MatTabNav,
-    MatTabNavOutlet,
+    MatTabNavPanel,
     MatTabLink,
     MatTabBody,
     MatTabBodyPortal,