text: var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
      return c > 3 && r && Object.defineProperty(target, key, r), r;
  };
  var __metadata = (this && this.__metadata) || function (k, v) {
      if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  };
  var __param = (this && this.__param) || function (paramIndex, decorator) {
      return function (target, key) { decorator(target, key, paramIndex); }
  };
  import { ViewChild, Component, Input, NgZone, QueryList, ElementRef, ViewEncapsulation, ContentChildren, Output, EventEmitter, Optional } from '@angular/core';
  import { RIGHT_ARROW, LEFT_ARROW, ENTER, Dir } from '../core';
  import { MdTabLabelWrapper } from './tab-label-wrapper';
  import { MdInkBar } from './ink-bar';
  import 'rxjs/add/operator/map';
  import { applyCssTransform } from '../core/style/apply-transform';
  /**
   * The distance in pixels that will be overshot when scrolling a tab label into view. This helps
   * provide a small affordance to the label next to it.
   */
  var EXAGGERATED_OVERSCROLL = 60;
  /**
   * The header of the tab group which displays a list of all the tabs in the tab group. Includes
   * an ink bar that follows the currently selected tab. When the tabs list's width exceeds the
   * width of the header container, then arrows will be displayed to allow the user to scroll
   * left and right across the header.
   */
  export var MdTabHeader = (function () {
      function MdTabHeader(_zone, _elementRef, _dir) {
          this._zone = _zone;
          this._elementRef = _elementRef;
          this._dir = _dir;
          /** The tab index that is focused. */
          this._focusIndex = 0;
          /** The distance in pixels that the tab labels should be translated to the left. */
          this._scrollDistance = 0;
          /** Whether the header should scroll to the selected index after the view has been checked. */
          this._selectedIndexChanged = false;
          /** Whether the controls for pagination should be displayed */
          this._showPaginationControls = false;
          /** Whether the tab list can be scrolled more towards the end of the tab label list. */
          this._disableScrollAfter = true;
          /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
          this._disableScrollBefore = true;
          /** The index of the active tab. */
          this._selectedIndex = 0;
          /** Event emitted when the option is selected. */
          this.selectFocusedIndex = new EventEmitter();
          /** Event emitted when a label is focused. */
          this.indexFocused = new EventEmitter();
      }
      Object.defineProperty(MdTabHeader.prototype, "selectedIndex", {
          get: function () { return this._selectedIndex; },
          set: function (value) {
              this._selectedIndexChanged = this._selectedIndex != value;
              this._selectedIndex = value;
              this._focusIndex = value;
          },
          enumerable: true,
          configurable: true
      });
      MdTabHeader.prototype.ngAfterContentChecked = function () {
          // If the number of tab labels have changed, check if scrolling should be enabled
          if (this._tabLabelCount != this._labelWrappers.length) {
              this._checkPaginationEnabled();
              this._checkScrollingControls();
              this._updateTabScrollPosition();
              this._tabLabelCount = this._labelWrappers.length;
          }
          // If the selected index has changed, scroll to the label and check if the scrolling controls
          // should be disabled.
          if (this._selectedIndexChanged) {
              this._scrollToLabel(this._selectedIndex);
              this._checkScrollingControls();
              this._selectedIndexChanged = false;
          }
          // If the scroll distance has been changed (tab selected, focused, scroll controls activated),
          // then translate the header to reflect this.
          if (this._scrollDistanceChanged) {
              this._updateTabScrollPosition();
              this._scrollDistanceChanged = false;
          }
      };
      /**
       * Waits one frame for the view to update, then updates the ink bar and scroll.
       * Note: This must be run outside of the zone or it will create an infinite change detection loop
       */
      MdTabHeader.prototype.ngAfterViewChecked = function () {
          var _this = this;
          this._zone.runOutsideAngular(function () {
              window.requestAnimationFrame(function () {
                  _this._alignInkBarToSelectedTab();
              });
          });
      };
      MdTabHeader.prototype._handleKeydown = function (event) {
          switch (event.keyCode) {
              case RIGHT_ARROW:
                  this._focusNextTab();
                  break;
              case LEFT_ARROW:
                  this._focusPreviousTab();
                  break;
              case ENTER:
                  this.selectFocusedIndex.emit(this.focusIndex);
                  break;
          }
      };
      Object.defineProperty(MdTabHeader.prototype, "focusIndex", {
          /** Tracks which element has focus; used for keyboard navigation */
          get: function () { return this._focusIndex; },
          /** When the focus index is set, we must manually send focus to the correct label */
          set: function (value) {
              if (!this._isValidIndex(value) || this._focusIndex == value) {
                  return;
              }
              this._focusIndex = value;
              this.indexFocused.emit(value);
              this._setTabFocus(value);
          },
          enumerable: true,
          configurable: true
      });
      /**
       * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
       * providing a valid index and return true.
       */
      MdTabHeader.prototype._isValidIndex = function (index) {
          if (!this._labelWrappers) {
              return true;
          }
          var tab = this._labelWrappers.toArray()[index];
          return tab && !tab.disabled;
      };
      /**
       * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
       * scrolling is enabled.
       */
      MdTabHeader.prototype._setTabFocus = function (tabIndex) {
          if (this._showPaginationControls) {
              this._scrollToLabel(tabIndex);
          }
          if (this._labelWrappers && this._labelWrappers.length) {
              this._labelWrappers.toArray()[tabIndex].focus();
              // Do not let the browser manage scrolling to focus the element, this will be handled
              // by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width
              // should be the full width minus the offset width.
              var containerEl = this._tabListContainer.nativeElement;
              var dir = this._getLayoutDirection();
              if (dir == 'ltr') {
                  containerEl.scrollLeft = 0;
              }
              else {
                  containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;
              }
          }
      };
      /**
       * Moves the focus towards the beginning or the end of the list depending on the offset provided.
       * Valid offsets are 1 and -1.
       */
      MdTabHeader.prototype._moveFocus = function (offset) {
          if (this._labelWrappers) {
              var tabs = this._labelWrappers.toArray();
              for (var i = this.focusIndex + offset; i < tabs.length && i >= 0; i += offset) {
                  if (this._isValidIndex(i)) {
                      this.focusIndex = i;
                      return;
                  }
              }
          }
      };
      /** Increment the focus index by 1 until a valid tab is found. */
      MdTabHeader.prototype._focusNextTab = function () {
          this._moveFocus(this._getLayoutDirection() == 'ltr' ? 1 : -1);
      };
      /** Decrement the focus index by 1 until a valid tab is found. */
      MdTabHeader.prototype._focusPreviousTab = function () {
          this._moveFocus(this._getLayoutDirection() == 'ltr' ? -1 : 1);
      };
      /** The layout direction of the containing app. */
      MdTabHeader.prototype._getLayoutDirection = function () {
          return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
      };
      /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
      MdTabHeader.prototype._updateTabScrollPosition = function () {
          var translateX = this.scrollDistance + 'px';
          if (this._getLayoutDirection() == 'ltr') {
              translateX = '-' + translateX;
          }
          applyCssTransform(this._tabList.nativeElement, "translate3d(" + translateX + ", 0, 0)");
      };
      Object.defineProperty(MdTabHeader.prototype, "scrollDistance", {
          get: function () { return this._scrollDistance; },
          /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
          set: function (v) {
              this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), v));
              // Mark that the scroll distance has changed so that after the view is checked, the CSS
              // transformation can move the header.
              this._scrollDistanceChanged = true;
              this._checkScrollingControls();
          },
          enumerable: true,
          configurable: true
      });
      /**
       * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
       * the end of the list, respectively). The distance to scroll is computed to be a third of the
       * length of the tab list view window.
       *
       * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
       * should be called sparingly.
       */
      MdTabHeader.prototype._scrollHeader = function (scrollDir) {
          var viewLength = this._tabListContainer.nativeElement.offsetWidth;
          // Move the scroll distance one-third the length of the tab list's viewport.
          this.scrollDistance += (scrollDir == 'before' ? -1 : 1) * viewLength / 3;
      };
      /**
       * Moves the tab list such that the desired tab label (marked by index) is moved into view.
       *
       * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
       * should be called sparingly.
       */
      MdTabHeader.prototype._scrollToLabel = function (labelIndex) {
          var selectedLabel = this._labelWrappers.toArray()[labelIndex];
          if (!selectedLabel) {
              return;
          }
          // The view length is the visible width of the tab labels.
          var viewLength = this._tabListContainer.nativeElement.offsetWidth;
          var labelBeforePos, labelAfterPos;
          if (this._getLayoutDirection() == 'ltr') {
              labelBeforePos = selectedLabel.getOffsetLeft();
              labelAfterPos = labelBeforePos + selectedLabel.getOffsetWidth();
          }
          else {
              labelAfterPos = this._tabList.nativeElement.offsetWidth - selectedLabel.getOffsetLeft();
              labelBeforePos = labelAfterPos - selectedLabel.getOffsetWidth();
          }
          var beforeVisiblePos = this.scrollDistance;
          var afterVisiblePos = this.scrollDistance + viewLength;
          if (labelBeforePos < beforeVisiblePos) {
              // Scroll header to move label to the before direction
              this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
          }
          else if (labelAfterPos > afterVisiblePos) {
              // Scroll header to move label to the after direction
              this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
          }
      };
      /**
       * Evaluate whether the pagination controls should be displayed. If the scroll width of the
       * tab list is wider than the size of the header container, then the pagination controls should
       * be shown.
       *
       * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
       * should be called sparingly.
       */
      MdTabHeader.prototype._checkPaginationEnabled = function () {
          this._showPaginationControls =
              this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
          if (!this._showPaginationControls) {
              this.scrollDistance = 0;
          }
      };
      /**
       * Evaluate whether the before and after controls should be enabled or disabled.
       * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
       * before button. If the header is at the end of the list (scroll distance is equal to the
       * maximum distance we can scroll), then disable the after button.
       *
       * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
       * should be called sparingly.
       */
      MdTabHeader.prototype._checkScrollingControls = function () {
          // Check if the pagination arrows should be activated.
          this._disableScrollBefore = this.scrollDistance == 0;
          this._disableScrollAfter = this.scrollDistance == this._getMaxScrollDistance();
      };
      /**
       * Determines what is the maximum length in pixels that can be set for the scroll distance. This
       * is equal to the difference in width between the tab list container and tab header container.
       *
       * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
       * should be called sparingly.
       */
      MdTabHeader.prototype._getMaxScrollDistance = function () {
          var lengthOfTabList = this._tabList.nativeElement.scrollWidth;
          var viewLength = this._tabListContainer.nativeElement.offsetWidth;
          return lengthOfTabList - viewLength;
      };
      /** Tells the ink-bar to align itself to the current label wrapper */
      MdTabHeader.prototype._alignInkBarToSelectedTab = function () {
          var selectedLabelWrapper = this._labelWrappers && this._labelWrappers.length
              ? this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement
              : null;
          this._inkBar.alignToElement(selectedLabelWrapper);
      };
      __decorate([
          ContentChildren(MdTabLabelWrapper), 
          __metadata('design:type', QueryList)
      ], MdTabHeader.prototype, "_labelWrappers", void 0);
      __decorate([
          ViewChild(MdInkBar), 
          __metadata('design:type', MdInkBar)
      ], MdTabHeader.prototype, "_inkBar", void 0);
      __decorate([
          ViewChild('tabListContainer'), 
          __metadata('design:type', ElementRef)
      ], MdTabHeader.prototype, "_tabListContainer", void 0);
      __decorate([
          ViewChild('tabList'), 
          __metadata('design:type', ElementRef)
      ], MdTabHeader.prototype, "_tabList", void 0);
      __decorate([
          Input(), 
          __metadata('design:type', Number), 
          __metadata('design:paramtypes', [Number])
      ], MdTabHeader.prototype, "selectedIndex", null);
      __decorate([
          Output(), 
          __metadata('design:type', Object)
      ], MdTabHeader.prototype, "selectFocusedIndex", void 0);
      __decorate([
          Output(), 
          __metadata('design:type', Object)
      ], MdTabHeader.prototype, "indexFocused", void 0);
      MdTabHeader = __decorate([
          Component({selector: 'md-tab-header',
              template: "<div class=\"md-tab-header-pagination md-tab-header-pagination-before md-elevation-z4\" aria-hidden=\"true\" md-ripple [md-ripple-disabled]=\"_disableScrollBefore\" [class.md-tab-header-pagination-disabled]=\"_disableScrollBefore\" (click)=\"_scrollHeader('before')\"> <div class=\"md-tab-header-pagination-chevron\"></div> </div> <div class=\"md-tab-label-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\"> <div class=\"md-tab-list\" #tabList role=\"tablist\"> <ng-content></ng-content> <md-ink-bar></md-ink-bar> </div> </div> <div class=\"md-tab-header-pagination md-tab-header-pagination-after md-elevation-z4\" aria-hidden=\"true\" md-ripple [md-ripple-disabled]=\"_disableScrollAfter\" [class.md-tab-header-pagination-disabled]=\"_disableScrollAfter\" (click)=\"_scrollHeader('after')\"> <div class=\"md-tab-header-pagination-chevron\"></div> </div>",
              styles: [".md-tab-header { overflow: hidden; position: relative; display: flex; flex-direction: row; flex-shrink: 0; } .md-tab-label { line-height: 48px; height: 48px; padding: 0 12px; font-size: 14px; font-family: Roboto, \"Helvetica Neue\", sans-serif; font-weight: 500; cursor: pointer; box-sizing: border-box; color: currentColor; opacity: 0.6; min-width: 160px; text-align: center; position: relative; } .md-tab-label:focus { outline: none; opacity: 1; } @media (max-width: 600px) { .md-tab-label { min-width: 72px; } } md-ink-bar { position: absolute; bottom: 0; height: 2px; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .md-tab-header-pagination { position: relative; display: none; justify-content: center; align-items: center; min-width: 32px; cursor: pointer; z-index: 2; } .md-tab-header-pagination-controls-enabled .md-tab-header-pagination { display: flex; } .md-tab-header-pagination-before, .md-tab-header-rtl .md-tab-header-pagination-after { padding-left: 4px; } .md-tab-header-pagination-before .md-tab-header-pagination-chevron, .md-tab-header-rtl .md-tab-header-pagination-after .md-tab-header-pagination-chevron { transform: rotate(-135deg); } .md-tab-header-rtl .md-tab-header-pagination-before, .md-tab-header-pagination-after { padding-right: 4px; } .md-tab-header-rtl .md-tab-header-pagination-before .md-tab-header-pagination-chevron, .md-tab-header-pagination-after .md-tab-header-pagination-chevron { transform: rotate(45deg); } .md-tab-header-pagination-chevron { border-style: solid; border-width: 2px 2px 0 0; content: ''; height: 8px; width: 8px; } .md-tab-header-pagination-disabled { box-shadow: none; cursor: default; } .md-tab-header-pagination-disabled .md-tab-header-pagination-chevron { border-color: #ccc; } .md-tab-label-container { display: flex; flex-grow: 1; overflow: hidden; z-index: 1; } .md-tab-list { display: flex; flex-grow: 1; position: relative; transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1); } /*# sourceMappingURL=tab-header.css.map */ "],
              encapsulation: ViewEncapsulation.None,
              host: {
                  'class': 'md-tab-header',
                  '[class.md-tab-header-pagination-controls-enabled]': '_showPaginationControls',
                  '[class.md-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
              }
          }),
          __param(2, Optional()), 
          __metadata('design:paramtypes', [NgZone, ElementRef, Dir])
      ], MdTabHeader);
      return MdTabHeader;
  }());
  
  //# sourceMappingURL=tab-header.js.map
  