@angular/material
Version:
Angular Material
1,026 lines (1,015 loc) • 115 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/observers'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/core'), require('@angular/material/core'), require('@angular/platform-browser/animations'), require('rxjs'), require('@angular/cdk/bidi'), require('@angular/animations'), require('rxjs/operators'), require('@angular/cdk/coercion'), require('@angular/cdk/scrolling'), require('@angular/cdk/platform'), require('@angular/cdk/keycodes')) :
typeof define === 'function' && define.amd ? define('@angular/material/tabs', ['exports', '@angular/cdk/a11y', '@angular/cdk/observers', '@angular/cdk/portal', '@angular/common', '@angular/core', '@angular/material/core', '@angular/platform-browser/animations', 'rxjs', '@angular/cdk/bidi', '@angular/animations', 'rxjs/operators', '@angular/cdk/coercion', '@angular/cdk/scrolling', '@angular/cdk/platform', '@angular/cdk/keycodes'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.tabs = {}), global.ng.cdk.a11y, global.ng.cdk.observers, global.ng.cdk.portal, global.ng.common, global.ng.core, global.ng.material.core, global.ng.platformBrowser.animations, global.rxjs, global.ng.cdk.bidi, global.ng.animations, global.rxjs.operators, global.ng.cdk.coercion, global.ng.cdk.scrolling, global.ng.cdk.platform, global.ng.cdk.keycodes));
}(this, (function (exports, a11y, observers, portal, common, core, core$1, animations, rxjs, bidi, animations$1, operators, coercion, scrolling, platform, keycodes) { 'use strict';
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** Injection token for the MatInkBar's Positioner. */
var _MAT_INK_BAR_POSITIONER = new core.InjectionToken('MatInkBarPositioner', {
providedIn: 'root',
factory: _MAT_INK_BAR_POSITIONER_FACTORY
});
/**
* The default positioner function for the MatInkBar.
* @docs-private
*/
function _MAT_INK_BAR_POSITIONER_FACTORY() {
var method = function (element) { return ({
left: element ? (element.offsetLeft || 0) + 'px' : '0',
width: element ? (element.offsetWidth || 0) + 'px' : '0',
}); };
return method;
}
/**
* The ink-bar is used to display and animate the line underneath the current active tab label.
* @docs-private
*/
var MatInkBar = /** @class */ (function () {
function MatInkBar(_elementRef, _ngZone, _inkBarPositioner, _animationMode) {
this._elementRef = _elementRef;
this._ngZone = _ngZone;
this._inkBarPositioner = _inkBarPositioner;
this._animationMode = _animationMode;
}
/**
* Calculates the styles from the provided element in order to align the ink-bar to that element.
* Shows the ink bar if previously set as hidden.
* @param element
*/
MatInkBar.prototype.alignToElement = function (element) {
var _this = this;
this.show();
if (typeof requestAnimationFrame !== 'undefined') {
this._ngZone.runOutsideAngular(function () {
requestAnimationFrame(function () { return _this._setStyles(element); });
});
}
else {
this._setStyles(element);
}
};
/** Shows the ink bar. */
MatInkBar.prototype.show = function () {
this._elementRef.nativeElement.style.visibility = 'visible';
};
/** Hides the ink bar. */
MatInkBar.prototype.hide = function () {
this._elementRef.nativeElement.style.visibility = 'hidden';
};
/**
* Sets the proper styles to the ink bar element.
* @param element
*/
MatInkBar.prototype._setStyles = function (element) {
var positions = this._inkBarPositioner(element);
var inkBar = this._elementRef.nativeElement;
inkBar.style.left = positions.left;
inkBar.style.width = positions.width;
};
return MatInkBar;
}());
MatInkBar.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-ink-bar',
host: {
'class': 'mat-ink-bar',
'[class._mat-animation-noopable]': "_animationMode === 'NoopAnimations'",
},
},] }
];
MatInkBar.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.NgZone },
{ type: undefined, decorators: [{ type: core.Inject, args: [_MAT_INK_BAR_POSITIONER,] }] },
{ type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
]; };
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(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;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Injection token that can be used to reference instances of `MatTabContent`. It serves as
* alternative token to the actual `MatTabContent` class which could cause unnecessary
* retention of the class and its directive metadata.
*/
var MAT_TAB_CONTENT = new core.InjectionToken('MatTabContent');
/** Decorates the `ng-template` tags and reads out the template from it. */
var MatTabContent = /** @class */ (function () {
function MatTabContent(
/** Content for the tab. */ template) {
this.template = template;
}
return MatTabContent;
}());
MatTabContent.decorators = [
{ type: core.Directive, args: [{
selector: '[matTabContent]',
providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }],
},] }
];
MatTabContent.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
/**
* Injection token that can be used to reference instances of `MatTabLabel`. It serves as
* alternative token to the actual `MatTabLabel` class which could cause unnecessary
* retention of the class and its directive metadata.
*/
var MAT_TAB_LABEL = new core.InjectionToken('MatTabLabel');
/** Used to flag tab labels for use with the portal directive */
var MatTabLabel = /** @class */ (function (_super) {
__extends(MatTabLabel, _super);
function MatTabLabel() {
return _super !== null && _super.apply(this, arguments) || this;
}
return MatTabLabel;
}(portal.CdkPortal));
MatTabLabel.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-tab-label], [matTabLabel]',
providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }],
},] }
];
// Boilerplate for applying mixins to MatTab.
/** @docs-private */
var MatTabBase = /** @class */ (function () {
function MatTabBase() {
}
return MatTabBase;
}());
var _MatTabMixinBase = core$1.mixinDisabled(MatTabBase);
/**
* Used to provide a tab group to a tab without causing a circular dependency.
* @docs-private
*/
var MAT_TAB_GROUP = new core.InjectionToken('MAT_TAB_GROUP');
var MatTab = /** @class */ (function (_super) {
__extends(MatTab, _super);
function MatTab(_viewContainerRef, _closestTabGroup) {
var _this = _super.call(this) || this;
_this._viewContainerRef = _viewContainerRef;
_this._closestTabGroup = _closestTabGroup;
/** Plain text label for the tab, used when there is no template label. */
_this.textLabel = '';
/** Portal that will be the hosted content of the tab */
_this._contentPortal = null;
/** Emits whenever the internal state of the tab changes. */
_this._stateChanges = new rxjs.Subject();
/**
* The relatively indexed position where 0 represents the center, negative is left, and positive
* represents the right.
*/
_this.position = null;
/**
* The initial relatively index origin of the tab if it was created and selected after there
* was already a selected tab. Provides context of what position the tab should originate from.
*/
_this.origin = null;
/**
* Whether the tab is currently active.
*/
_this.isActive = false;
return _this;
}
Object.defineProperty(MatTab.prototype, "templateLabel", {
/** Content for the tab label given by `<ng-template mat-tab-label>`. */
get: function () { return this._templateLabel; },
set: function (value) { this._setTemplateLabelInput(value); },
enumerable: false,
configurable: true
});
Object.defineProperty(MatTab.prototype, "content", {
/** @docs-private */
get: function () {
return this._contentPortal;
},
enumerable: false,
configurable: true
});
MatTab.prototype.ngOnChanges = function (changes) {
if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {
this._stateChanges.next();
}
};
MatTab.prototype.ngOnDestroy = function () {
this._stateChanges.complete();
};
MatTab.prototype.ngOnInit = function () {
this._contentPortal = new portal.TemplatePortal(this._explicitContent || this._implicitContent, this._viewContainerRef);
};
/**
* This has been extracted to a util because of TS 4 and VE.
* View Engine doesn't support property rename inheritance.
* TS 4.0 doesn't allow properties to override accessors or vice-versa.
* @docs-private
*/
MatTab.prototype._setTemplateLabelInput = function (value) {
// Only update the templateLabel via query if there is actually
// a MatTabLabel found. This works around an issue where a user may have
// manually set `templateLabel` during creation mode, which would then get clobbered
// by `undefined` when this query resolves.
if (value) {
this._templateLabel = value;
}
};
return MatTab;
}(_MatTabMixinBase));
MatTab.decorators = [
{ type: core.Component, args: [{
selector: 'mat-tab',
template: "<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n",
inputs: ['disabled'],
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
encapsulation: core.ViewEncapsulation.None,
exportAs: 'matTab'
},] }
];
MatTab.ctorParameters = function () { return [
{ type: core.ViewContainerRef },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_TAB_GROUP,] }] }
]; };
MatTab.propDecorators = {
templateLabel: [{ type: core.ContentChild, args: [MAT_TAB_LABEL,] }],
_explicitContent: [{ type: core.ContentChild, args: [MAT_TAB_CONTENT, { read: core.TemplateRef, static: true },] }],
_implicitContent: [{ type: core.ViewChild, args: [core.TemplateRef, { static: true },] }],
textLabel: [{ type: core.Input, args: ['label',] }],
ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }]
};
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Animations used by the Material tabs.
* @docs-private
*/
var matTabsAnimations = {
/** Animation translates a tab along the X axis. */
translateTab: animations$1.trigger('translateTab', [
// Note: transitions to `none` instead of 0, because some browsers might blur the content.
animations$1.state('center, void, left-origin-center, right-origin-center', animations$1.style({ transform: 'none' })),
// If the tab is either on the left or right, we additionally add a `min-height` of 1px
// in order to ensure that the element has a height before its state changes. This is
// necessary because Chrome does seem to skip the transition in RTL mode if the element does
// not have a static height and is not rendered. See related issue: #9465
animations$1.state('left', animations$1.style({ transform: 'translate3d(-100%, 0, 0)', minHeight: '1px' })),
animations$1.state('right', animations$1.style({ transform: 'translate3d(100%, 0, 0)', minHeight: '1px' })),
animations$1.transition('* => left, * => right, left => center, right => center', animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')),
animations$1.transition('void => left-origin-center', [
animations$1.style({ transform: 'translate3d(-100%, 0, 0)' }),
animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
]),
animations$1.transition('void => right-origin-center', [
animations$1.style({ transform: 'translate3d(100%, 0, 0)' }),
animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
])
])
};
/**
* The portal host directive for the contents of the tab.
* @docs-private
*/
var MatTabBodyPortal = /** @class */ (function (_super) {
__extends(MatTabBodyPortal, _super);
function MatTabBodyPortal(componentFactoryResolver, viewContainerRef, _host, _document) {
var _this = _super.call(this, componentFactoryResolver, viewContainerRef, _document) || this;
_this._host = _host;
/** Subscription to events for when the tab body begins centering. */
_this._centeringSub = rxjs.Subscription.EMPTY;
/** Subscription to events for when the tab body finishes leaving from center position. */
_this._leavingSub = rxjs.Subscription.EMPTY;
return _this;
}
/** Set initial visibility or set up subscription for changing visibility. */
MatTabBodyPortal.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
this._centeringSub = this._host._beforeCentering
.pipe(operators.startWith(this._host._isCenterPosition(this._host._position)))
.subscribe(function (isCentering) {
if (isCentering && !_this.hasAttached()) {
_this.attach(_this._host._content);
}
});
this._leavingSub = this._host._afterLeavingCenter.subscribe(function () {
_this.detach();
});
};
/** Clean up centering subscription. */
MatTabBodyPortal.prototype.ngOnDestroy = function () {
_super.prototype.ngOnDestroy.call(this);
this._centeringSub.unsubscribe();
this._leavingSub.unsubscribe();
};
return MatTabBodyPortal;
}(portal.CdkPortalOutlet));
MatTabBodyPortal.decorators = [
{ type: core.Directive, args: [{
selector: '[matTabBodyHost]'
},] }
];
MatTabBodyPortal.ctorParameters = function () { return [
{ type: core.ComponentFactoryResolver },
{ type: core.ViewContainerRef },
{ type: MatTabBody, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatTabBody; }),] }] },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
]; };
/**
* Base class with all of the `MatTabBody` functionality.
* @docs-private
*/
var _MatTabBodyBase = /** @class */ (function () {
function _MatTabBodyBase(_elementRef, _dir, changeDetectorRef) {
var _this = this;
this._elementRef = _elementRef;
this._dir = _dir;
/** Subscription to the directionality change observable. */
this._dirChangeSubscription = rxjs.Subscription.EMPTY;
/** Emits when an animation on the tab is complete. */
this._translateTabComplete = new rxjs.Subject();
/** Event emitted when the tab begins to animate towards the center as the active tab. */
this._onCentering = new core.EventEmitter();
/** Event emitted before the centering of the tab begins. */
this._beforeCentering = new core.EventEmitter();
/** Event emitted before the centering of the tab begins. */
this._afterLeavingCenter = new core.EventEmitter();
/** Event emitted when the tab completes its animation towards the center. */
this._onCentered = new core.EventEmitter(true);
// Note that the default value will always be overwritten by `MatTabBody`, but we need one
// anyway to prevent the animations module from throwing an error if the body is used on its own.
/** Duration for the tab's animation. */
this.animationDuration = '500ms';
if (_dir) {
this._dirChangeSubscription = _dir.change.subscribe(function (dir) {
_this._computePositionAnimationState(dir);
changeDetectorRef.markForCheck();
});
}
// Ensure that we get unique animation events, because the `.done` callback can get
// invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.
this._translateTabComplete.pipe(operators.distinctUntilChanged(function (x, y) {
return x.fromState === y.fromState && x.toState === y.toState;
})).subscribe(function (event) {
// If the transition to the center is complete, emit an event.
if (_this._isCenterPosition(event.toState) && _this._isCenterPosition(_this._position)) {
_this._onCentered.emit();
}
if (_this._isCenterPosition(event.fromState) && !_this._isCenterPosition(_this._position)) {
_this._afterLeavingCenter.emit();
}
});
}
Object.defineProperty(_MatTabBodyBase.prototype, "position", {
/** The shifted index position of the tab body, where zero represents the active center tab. */
set: function (position) {
this._positionIndex = position;
this._computePositionAnimationState();
},
enumerable: false,
configurable: true
});
/**
* After initialized, check if the content is centered and has an origin. If so, set the
* special position states that transition the tab from the left or right before centering.
*/
_MatTabBodyBase.prototype.ngOnInit = function () {
if (this._position == 'center' && this.origin != null) {
this._position = this._computePositionFromOrigin(this.origin);
}
};
_MatTabBodyBase.prototype.ngOnDestroy = function () {
this._dirChangeSubscription.unsubscribe();
this._translateTabComplete.complete();
};
_MatTabBodyBase.prototype._onTranslateTabStarted = function (event) {
var isCentering = this._isCenterPosition(event.toState);
this._beforeCentering.emit(isCentering);
if (isCentering) {
this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
}
};
/** The text direction of the containing app. */
_MatTabBodyBase.prototype._getLayoutDirection = function () {
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
};
/** Whether the provided position state is considered center, regardless of origin. */
_MatTabBodyBase.prototype._isCenterPosition = function (position) {
return position == 'center' ||
position == 'left-origin-center' ||
position == 'right-origin-center';
};
/** Computes the position state that will be used for the tab-body animation trigger. */
_MatTabBodyBase.prototype._computePositionAnimationState = function (dir) {
if (dir === void 0) { dir = this._getLayoutDirection(); }
if (this._positionIndex < 0) {
this._position = dir == 'ltr' ? 'left' : 'right';
}
else if (this._positionIndex > 0) {
this._position = dir == 'ltr' ? 'right' : 'left';
}
else {
this._position = 'center';
}
};
/**
* Computes the position state based on the specified origin position. This is used if the
* tab is becoming visible immediately after creation.
*/
_MatTabBodyBase.prototype._computePositionFromOrigin = function (origin) {
var dir = this._getLayoutDirection();
if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {
return 'left-origin-center';
}
return 'right-origin-center';
};
return _MatTabBodyBase;
}());
_MatTabBodyBase.decorators = [
{ type: core.Directive }
];
_MatTabBodyBase.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: bidi.Directionality, decorators: [{ type: core.Optional }] },
{ type: core.ChangeDetectorRef }
]; };
_MatTabBodyBase.propDecorators = {
_onCentering: [{ type: core.Output }],
_beforeCentering: [{ type: core.Output }],
_afterLeavingCenter: [{ type: core.Output }],
_onCentered: [{ type: core.Output }],
_content: [{ type: core.Input, args: ['content',] }],
origin: [{ type: core.Input }],
animationDuration: [{ type: core.Input }],
position: [{ type: core.Input }]
};
/**
* Wrapper for the contents of a tab.
* @docs-private
*/
var MatTabBody = /** @class */ (function (_super) {
__extends(MatTabBody, _super);
function MatTabBody(elementRef, dir, changeDetectorRef) {
return _super.call(this, elementRef, dir, changeDetectorRef) || this;
}
return MatTabBody;
}(_MatTabBodyBase));
MatTabBody.decorators = [
{ type: core.Component, args: [{
selector: 'mat-tab-body',
template: "<div class=\"mat-tab-body-content\" #content\n [@translateTab]=\"{\n value: _position,\n params: {animationDuration: animationDuration}\n }\"\n (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n (@translateTab.done)=\"_translateTabComplete.next($event)\"\n cdkScrollable>\n <ng-template matTabBodyHost></ng-template>\n</div>\n",
encapsulation: core.ViewEncapsulation.None,
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
animations: [matTabsAnimations.translateTab],
host: {
'class': 'mat-tab-body',
},
styles: [".mat-tab-body-content{height:100%;overflow:auto}.mat-tab-group-dynamic-height .mat-tab-body-content{overflow:hidden}\n"]
},] }
];
MatTabBody.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: bidi.Directionality, decorators: [{ type: core.Optional }] },
{ type: core.ChangeDetectorRef }
]; };
MatTabBody.propDecorators = {
_portalHost: [{ type: core.ViewChild, args: [portal.CdkPortalOutlet,] }]
};
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** Injection token that can be used to provide the default options the tabs module. */
var MAT_TABS_CONFIG = new core.InjectionToken('MAT_TABS_CONFIG');
/** Used to generate unique ID's for each tab component */
var nextId = 0;
/** A simple change event emitted on focus or selection changes. */
var MatTabChangeEvent = /** @class */ (function () {
function MatTabChangeEvent() {
}
return MatTabChangeEvent;
}());
// Boilerplate for applying mixins to MatTabGroup.
/** @docs-private */
var MatTabGroupMixinBase = /** @class */ (function () {
function MatTabGroupMixinBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatTabGroupMixinBase;
}());
var _MatTabGroupMixinBase = core$1.mixinColor(core$1.mixinDisableRipple(MatTabGroupMixinBase), 'primary');
/**
* Base class with all of the `MatTabGroupBase` functionality.
* @docs-private
*/
var _MatTabGroupBase = /** @class */ (function (_super) {
__extends(_MatTabGroupBase, _super);
function _MatTabGroupBase(elementRef, _changeDetectorRef, defaultConfig, _animationMode) {
var _this = _super.call(this, elementRef) || this;
_this._changeDetectorRef = _changeDetectorRef;
_this._animationMode = _animationMode;
/** All of the tabs that belong to the group. */
_this._tabs = new core.QueryList();
/** The tab index that should be selected after the content has been checked. */
_this._indexToSelect = 0;
/** Snapshot of the height of the tab body wrapper before another tab is activated. */
_this._tabBodyWrapperHeight = 0;
/** Subscription to tabs being added/removed. */
_this._tabsSubscription = rxjs.Subscription.EMPTY;
/** Subscription to changes in the tab labels. */
_this._tabLabelSubscription = rxjs.Subscription.EMPTY;
_this._selectedIndex = null;
/** Position of the tab header. */
_this.headerPosition = 'above';
/** Output to enable support for two-way binding on `[(selectedIndex)]` */
_this.selectedIndexChange = new core.EventEmitter();
/** Event emitted when focus has changed within a tab group. */
_this.focusChange = new core.EventEmitter();
/** Event emitted when the body animation has completed */
_this.animationDone = new core.EventEmitter();
/** Event emitted when the tab selection has changed. */
_this.selectedTabChange = new core.EventEmitter(true);
_this._groupId = nextId++;
_this.animationDuration = defaultConfig && defaultConfig.animationDuration ?
defaultConfig.animationDuration : '500ms';
_this.disablePagination = defaultConfig && defaultConfig.disablePagination != null ?
defaultConfig.disablePagination : false;
_this.dynamicHeight = defaultConfig && defaultConfig.dynamicHeight != null ?
defaultConfig.dynamicHeight : false;
return _this;
}
Object.defineProperty(_MatTabGroupBase.prototype, "dynamicHeight", {
/** Whether the tab group should grow to the size of the active tab. */
get: function () { return this._dynamicHeight; },
set: function (value) { this._dynamicHeight = coercion.coerceBooleanProperty(value); },
enumerable: false,
configurable: true
});
Object.defineProperty(_MatTabGroupBase.prototype, "selectedIndex", {
/** The index of the active tab. */
get: function () { return this._selectedIndex; },
set: function (value) {
this._indexToSelect = coercion.coerceNumberProperty(value, null);
},
enumerable: false,
configurable: true
});
Object.defineProperty(_MatTabGroupBase.prototype, "animationDuration", {
/** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
get: function () { return this._animationDuration; },
set: function (value) {
this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(_MatTabGroupBase.prototype, "backgroundColor", {
/** Background color of the tab group. */
get: function () { return this._backgroundColor; },
set: function (value) {
var nativeElement = this._elementRef.nativeElement;
nativeElement.classList.remove("mat-background-" + this.backgroundColor);
if (value) {
nativeElement.classList.add("mat-background-" + value);
}
this._backgroundColor = value;
},
enumerable: false,
configurable: true
});
/**
* After the content is checked, this component knows what tabs have been defined
* and what the selected index should be. This is where we can know exactly what position
* each tab should be in according to the new selected index, and additionally we know how
* a new selected tab should transition in (from the left or right).
*/
_MatTabGroupBase.prototype.ngAfterContentChecked = function () {
var _this = this;
// Don't clamp the `indexToSelect` immediately in the setter because it can happen that
// the amount of tabs changes before the actual change detection runs.
var indexToSelect = this._indexToSelect = this._clampTabIndex(this._indexToSelect);
// If there is a change in selected index, emit a change event. Should not trigger if
// the selected index has not yet been initialized.
if (this._selectedIndex != indexToSelect) {
var isFirstRun_1 = this._selectedIndex == null;
if (!isFirstRun_1) {
this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
}
// Changing these values after change detection has run
// since the checked content may contain references to them.
Promise.resolve().then(function () {
_this._tabs.forEach(function (tab, index) { return tab.isActive = index === indexToSelect; });
if (!isFirstRun_1) {
_this.selectedIndexChange.emit(indexToSelect);
}
});
}
// Setup the position for each tab and optionally setup an origin on the next selected tab.
this._tabs.forEach(function (tab, index) {
tab.position = index - indexToSelect;
// If there is already a selected tab, then set up an origin for the next selected tab
// if it doesn't have one already.
if (_this._selectedIndex != null && tab.position == 0 && !tab.origin) {
tab.origin = indexToSelect - _this._selectedIndex;
}
});
if (this._selectedIndex !== indexToSelect) {
this._selectedIndex = indexToSelect;
this._changeDetectorRef.markForCheck();
}
};
_MatTabGroupBase.prototype.ngAfterContentInit = function () {
var _this = this;
this._subscribeToAllTabChanges();
this._subscribeToTabLabels();
// Subscribe to changes in the amount of tabs, in order to be
// able to re-render the content as new tabs are added or removed.
this._tabsSubscription = this._tabs.changes.subscribe(function () {
var indexToSelect = _this._clampTabIndex(_this._indexToSelect);
// Maintain the previously-selected tab if a new tab is added or removed and there is no
// explicit change that selects a different tab.
if (indexToSelect === _this._selectedIndex) {
var tabs = _this._tabs.toArray();
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].isActive) {
// Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed
// event, otherwise the consumer may end up in an infinite loop in some edge cases like
// adding a tab within the `selectedIndexChange` event.
_this._indexToSelect = _this._selectedIndex = i;
break;
}
}
}
_this._changeDetectorRef.markForCheck();
});
};
/** Listens to changes in all of the tabs. */
_MatTabGroupBase.prototype._subscribeToAllTabChanges = function () {
var _this = this;
// Since we use a query with `descendants: true` to pick up the tabs, we may end up catching
// some that are inside of nested tab groups. We filter them out manually by checking that
// the closest group to the tab is the current one.
this._allTabs.changes
.pipe(operators.startWith(this._allTabs))
.subscribe(function (tabs) {
_this._tabs.reset(tabs.filter(function (tab) { return tab._closestTabGroup === _this; }));
_this._tabs.notifyOnChanges();
});
};
_MatTabGroupBase.prototype.ngOnDestroy = function () {
this._tabs.destroy();
this._tabsSubscription.unsubscribe();
this._tabLabelSubscription.unsubscribe();
};
/** Re-aligns the ink bar to the selected tab element. */
_MatTabGroupBase.prototype.realignInkBar = function () {
if (this._tabHeader) {
this._tabHeader._alignInkBarToSelectedTab();
}
};
_MatTabGroupBase.prototype._focusChanged = function (index) {
this.focusChange.emit(this._createChangeEvent(index));
};
_MatTabGroupBase.prototype._createChangeEvent = function (index) {
var event = new MatTabChangeEvent;
event.index = index;
if (this._tabs && this._tabs.length) {
event.tab = this._tabs.toArray()[index];
}
return event;
};
/**
* Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
* on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
* binding to be updated, we need to subscribe to changes in it and trigger change detection
* manually.
*/
_MatTabGroupBase.prototype._subscribeToTabLabels = function () {
var _this = this;
if (this._tabLabelSubscription) {
this._tabLabelSubscription.unsubscribe();
}
this._tabLabelSubscrip