feat(tabs): Allow tab ink bar positioning to be determined with a provided method. (#9972)

Author: josephperrott

src/lib/tabs/ink-bar.ts

@@ -6,8 +6,33 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, NgZone} from '@angular/core';
+import { Directive, ElementRef, Inject, InjectionToken, NgZone } from '@angular/core';
 
+/**
+ * Interface for a a MatInkBar positioner method, defining the positioning and width of the ink
+ * bar in a set of tabs.
+ */
+// tslint:disable-next-line class-name Using leading underscore to denote internal interface.
+export interface _MatInkBarPositioner {
+  (element: HTMLElement): { left: string, width: string };
+}
+
+/** Injection token for the MatInkBar's Positioner. */
+export const _MAT_INK_BAR_POSITIONER =
+  new InjectionToken<_MatInkBarPositioner>('MatInkBarPositioner', {
+    providedIn: 'root',
+    factory: () => _matInkBarPositioner
+  });
+
+/**
+ * The default positioner function for the MatInkBar.
+ */
+export const _matInkBarPositioner: _MatInkBarPositioner = (element: HTMLElement) => {
+  return {
+    left: element ? (element.offsetLeft || 0) + 'px' : '0',
+    width: element ? (element.offsetWidth || 0) + 'px' : '0',
+  };
+};
 
 /**
  * The ink-bar is used to display and animate the line underneath the current active tab label.
@@ -22,7 +47,8 @@ import {Directive, ElementRef, NgZone} from '@angular/core';
 export class MatInkBar {
   constructor(
     private _elementRef: ElementRef,
-    private _ngZone: NgZone) {}
+    private _ngZone: NgZone,
+    @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner) { }
 
   /**
    * Calculates the styles from the provided element in order to align the ink-bar to that element.
@@ -56,9 +82,10 @@ export class MatInkBar {
    * @param element
    */
   private _setStyles(element: HTMLElement) {
+    const positions = this._inkBarPositioner(element);
     const inkBar: HTMLElement = this._elementRef.nativeElement;
 
-    inkBar.style.left = element ? (element.offsetLeft || 0) + 'px' : '0';
-    inkBar.style.width = element ? (element.offsetWidth || 0) + 'px' : '0';
+    inkBar.style.left = positions.left;
+    inkBar.style.width = positions.width;
   }
 }

src/lib/tabs/public-api.ts

@@ -8,7 +8,7 @@
 
 export * from './tabs-module';
 export * from './tab-group';
-export {MatInkBar} from './ink-bar';
+export {MatInkBar, _MatInkBarPositioner, _MAT_INK_BAR_POSITIONER} from './ink-bar';
 export {
   MatTabBody,
   MatTabBodyOriginState,