source: trip-planner-front/node_modules/@angular/material/bundles/material-tabs.umd.js@ bdd6491

Last change on this file since bdd6491 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 117.1 KB
Line 
1(function (global, factory) {
2 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')) :
3 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) :
4 (global = typeof globalThis !== 'undefined' ? globalThis : 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));
5}(this, (function (exports, a11y, observers, portal, common, core, core$1, animations, rxjs, bidi, animations$1, operators, coercion, scrolling, platform, keycodes) { 'use strict';
6
7 /**
8 * @license
9 * Copyright Google LLC All Rights Reserved.
10 *
11 * Use of this source code is governed by an MIT-style license that can be
12 * found in the LICENSE file at https://angular.io/license
13 */
14 /** Injection token for the MatInkBar's Positioner. */
15 var _MAT_INK_BAR_POSITIONER = new core.InjectionToken('MatInkBarPositioner', {
16 providedIn: 'root',
17 factory: _MAT_INK_BAR_POSITIONER_FACTORY
18 });
19 /**
20 * The default positioner function for the MatInkBar.
21 * @docs-private
22 */
23 function _MAT_INK_BAR_POSITIONER_FACTORY() {
24 var method = function (element) { return ({
25 left: element ? (element.offsetLeft || 0) + 'px' : '0',
26 width: element ? (element.offsetWidth || 0) + 'px' : '0',
27 }); };
28 return method;
29 }
30 /**
31 * The ink-bar is used to display and animate the line underneath the current active tab label.
32 * @docs-private
33 */
34 var MatInkBar = /** @class */ (function () {
35 function MatInkBar(_elementRef, _ngZone, _inkBarPositioner, _animationMode) {
36 this._elementRef = _elementRef;
37 this._ngZone = _ngZone;
38 this._inkBarPositioner = _inkBarPositioner;
39 this._animationMode = _animationMode;
40 }
41 /**
42 * Calculates the styles from the provided element in order to align the ink-bar to that element.
43 * Shows the ink bar if previously set as hidden.
44 * @param element
45 */
46 MatInkBar.prototype.alignToElement = function (element) {
47 var _this = this;
48 this.show();
49 if (typeof requestAnimationFrame !== 'undefined') {
50 this._ngZone.runOutsideAngular(function () {
51 requestAnimationFrame(function () { return _this._setStyles(element); });
52 });
53 }
54 else {
55 this._setStyles(element);
56 }
57 };
58 /** Shows the ink bar. */
59 MatInkBar.prototype.show = function () {
60 this._elementRef.nativeElement.style.visibility = 'visible';
61 };
62 /** Hides the ink bar. */
63 MatInkBar.prototype.hide = function () {
64 this._elementRef.nativeElement.style.visibility = 'hidden';
65 };
66 /**
67 * Sets the proper styles to the ink bar element.
68 * @param element
69 */
70 MatInkBar.prototype._setStyles = function (element) {
71 var positions = this._inkBarPositioner(element);
72 var inkBar = this._elementRef.nativeElement;
73 inkBar.style.left = positions.left;
74 inkBar.style.width = positions.width;
75 };
76 return MatInkBar;
77 }());
78 MatInkBar.decorators = [
79 { type: core.Directive, args: [{
80 selector: 'mat-ink-bar',
81 host: {
82 'class': 'mat-ink-bar',
83 '[class._mat-animation-noopable]': "_animationMode === 'NoopAnimations'",
84 },
85 },] }
86 ];
87 MatInkBar.ctorParameters = function () { return [
88 { type: core.ElementRef },
89 { type: core.NgZone },
90 { type: undefined, decorators: [{ type: core.Inject, args: [_MAT_INK_BAR_POSITIONER,] }] },
91 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
92 ]; };
93
94 /*! *****************************************************************************
95 Copyright (c) Microsoft Corporation.
96
97 Permission to use, copy, modify, and/or distribute this software for any
98 purpose with or without fee is hereby granted.
99
100 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
101 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
102 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
103 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
104 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
105 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
106 PERFORMANCE OF THIS SOFTWARE.
107 ***************************************************************************** */
108 /* global Reflect, Promise */
109 var extendStatics = function (d, b) {
110 extendStatics = Object.setPrototypeOf ||
111 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
112 function (d, b) { for (var p in b)
113 if (Object.prototype.hasOwnProperty.call(b, p))
114 d[p] = b[p]; };
115 return extendStatics(d, b);
116 };
117 function __extends(d, b) {
118 if (typeof b !== "function" && b !== null)
119 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
120 extendStatics(d, b);
121 function __() { this.constructor = d; }
122 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
123 }
124 var __assign = function () {
125 __assign = Object.assign || function __assign(t) {
126 for (var s, i = 1, n = arguments.length; i < n; i++) {
127 s = arguments[i];
128 for (var p in s)
129 if (Object.prototype.hasOwnProperty.call(s, p))
130 t[p] = s[p];
131 }
132 return t;
133 };
134 return __assign.apply(this, arguments);
135 };
136 function __rest(s, e) {
137 var t = {};
138 for (var p in s)
139 if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
140 t[p] = s[p];
141 if (s != null && typeof Object.getOwnPropertySymbols === "function")
142 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
143 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
144 t[p[i]] = s[p[i]];
145 }
146 return t;
147 }
148 function __decorate(decorators, target, key, desc) {
149 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
150 if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
151 r = Reflect.decorate(decorators, target, key, desc);
152 else
153 for (var i = decorators.length - 1; i >= 0; i--)
154 if (d = decorators[i])
155 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
156 return c > 3 && r && Object.defineProperty(target, key, r), r;
157 }
158 function __param(paramIndex, decorator) {
159 return function (target, key) { decorator(target, key, paramIndex); };
160 }
161 function __metadata(metadataKey, metadataValue) {
162 if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
163 return Reflect.metadata(metadataKey, metadataValue);
164 }
165 function __awaiter(thisArg, _arguments, P, generator) {
166 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
167 return new (P || (P = Promise))(function (resolve, reject) {
168 function fulfilled(value) { try {
169 step(generator.next(value));
170 }
171 catch (e) {
172 reject(e);
173 } }
174 function rejected(value) { try {
175 step(generator["throw"](value));
176 }
177 catch (e) {
178 reject(e);
179 } }
180 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
181 step((generator = generator.apply(thisArg, _arguments || [])).next());
182 });
183 }
184 function __generator(thisArg, body) {
185 var _ = { label: 0, sent: function () { if (t[0] & 1)
186 throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
187 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
188 function verb(n) { return function (v) { return step([n, v]); }; }
189 function step(op) {
190 if (f)
191 throw new TypeError("Generator is already executing.");
192 while (_)
193 try {
194 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)
195 return t;
196 if (y = 0, t)
197 op = [op[0] & 2, t.value];
198 switch (op[0]) {
199 case 0:
200 case 1:
201 t = op;
202 break;
203 case 4:
204 _.label++;
205 return { value: op[1], done: false };
206 case 5:
207 _.label++;
208 y = op[1];
209 op = [0];
210 continue;
211 case 7:
212 op = _.ops.pop();
213 _.trys.pop();
214 continue;
215 default:
216 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
217 _ = 0;
218 continue;
219 }
220 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
221 _.label = op[1];
222 break;
223 }
224 if (op[0] === 6 && _.label < t[1]) {
225 _.label = t[1];
226 t = op;
227 break;
228 }
229 if (t && _.label < t[2]) {
230 _.label = t[2];
231 _.ops.push(op);
232 break;
233 }
234 if (t[2])
235 _.ops.pop();
236 _.trys.pop();
237 continue;
238 }
239 op = body.call(thisArg, _);
240 }
241 catch (e) {
242 op = [6, e];
243 y = 0;
244 }
245 finally {
246 f = t = 0;
247 }
248 if (op[0] & 5)
249 throw op[1];
250 return { value: op[0] ? op[1] : void 0, done: true };
251 }
252 }
253 var __createBinding = Object.create ? (function (o, m, k, k2) {
254 if (k2 === undefined)
255 k2 = k;
256 Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
257 }) : (function (o, m, k, k2) {
258 if (k2 === undefined)
259 k2 = k;
260 o[k2] = m[k];
261 });
262 function __exportStar(m, o) {
263 for (var p in m)
264 if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
265 __createBinding(o, m, p);
266 }
267 function __values(o) {
268 var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
269 if (m)
270 return m.call(o);
271 if (o && typeof o.length === "number")
272 return {
273 next: function () {
274 if (o && i >= o.length)
275 o = void 0;
276 return { value: o && o[i++], done: !o };
277 }
278 };
279 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
280 }
281 function __read(o, n) {
282 var m = typeof Symbol === "function" && o[Symbol.iterator];
283 if (!m)
284 return o;
285 var i = m.call(o), r, ar = [], e;
286 try {
287 while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
288 ar.push(r.value);
289 }
290 catch (error) {
291 e = { error: error };
292 }
293 finally {
294 try {
295 if (r && !r.done && (m = i["return"]))
296 m.call(i);
297 }
298 finally {
299 if (e)
300 throw e.error;
301 }
302 }
303 return ar;
304 }
305 /** @deprecated */
306 function __spread() {
307 for (var ar = [], i = 0; i < arguments.length; i++)
308 ar = ar.concat(__read(arguments[i]));
309 return ar;
310 }
311 /** @deprecated */
312 function __spreadArrays() {
313 for (var s = 0, i = 0, il = arguments.length; i < il; i++)
314 s += arguments[i].length;
315 for (var r = Array(s), k = 0, i = 0; i < il; i++)
316 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
317 r[k] = a[j];
318 return r;
319 }
320 function __spreadArray(to, from, pack) {
321 if (pack || arguments.length === 2)
322 for (var i = 0, l = from.length, ar; i < l; i++) {
323 if (ar || !(i in from)) {
324 if (!ar)
325 ar = Array.prototype.slice.call(from, 0, i);
326 ar[i] = from[i];
327 }
328 }
329 return to.concat(ar || from);
330 }
331 function __await(v) {
332 return this instanceof __await ? (this.v = v, this) : new __await(v);
333 }
334 function __asyncGenerator(thisArg, _arguments, generator) {
335 if (!Symbol.asyncIterator)
336 throw new TypeError("Symbol.asyncIterator is not defined.");
337 var g = generator.apply(thisArg, _arguments || []), i, q = [];
338 return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
339 function verb(n) { if (g[n])
340 i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
341 function resume(n, v) { try {
342 step(g[n](v));
343 }
344 catch (e) {
345 settle(q[0][3], e);
346 } }
347 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
348 function fulfill(value) { resume("next", value); }
349 function reject(value) { resume("throw", value); }
350 function settle(f, v) { if (f(v), q.shift(), q.length)
351 resume(q[0][0], q[0][1]); }
352 }
353 function __asyncDelegator(o) {
354 var i, p;
355 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
356 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; }
357 }
358 function __asyncValues(o) {
359 if (!Symbol.asyncIterator)
360 throw new TypeError("Symbol.asyncIterator is not defined.");
361 var m = o[Symbol.asyncIterator], i;
362 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);
363 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); }); }; }
364 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
365 }
366 function __makeTemplateObject(cooked, raw) {
367 if (Object.defineProperty) {
368 Object.defineProperty(cooked, "raw", { value: raw });
369 }
370 else {
371 cooked.raw = raw;
372 }
373 return cooked;
374 }
375 ;
376 var __setModuleDefault = Object.create ? (function (o, v) {
377 Object.defineProperty(o, "default", { enumerable: true, value: v });
378 }) : function (o, v) {
379 o["default"] = v;
380 };
381 function __importStar(mod) {
382 if (mod && mod.__esModule)
383 return mod;
384 var result = {};
385 if (mod != null)
386 for (var k in mod)
387 if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
388 __createBinding(result, mod, k);
389 __setModuleDefault(result, mod);
390 return result;
391 }
392 function __importDefault(mod) {
393 return (mod && mod.__esModule) ? mod : { default: mod };
394 }
395 function __classPrivateFieldGet(receiver, state, kind, f) {
396 if (kind === "a" && !f)
397 throw new TypeError("Private accessor was defined without a getter");
398 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
399 throw new TypeError("Cannot read private member from an object whose class did not declare it");
400 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
401 }
402 function __classPrivateFieldSet(receiver, state, value, kind, f) {
403 if (kind === "m")
404 throw new TypeError("Private method is not writable");
405 if (kind === "a" && !f)
406 throw new TypeError("Private accessor was defined without a setter");
407 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
408 throw new TypeError("Cannot write private member to an object whose class did not declare it");
409 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
410 }
411
412 /**
413 * @license
414 * Copyright Google LLC All Rights Reserved.
415 *
416 * Use of this source code is governed by an MIT-style license that can be
417 * found in the LICENSE file at https://angular.io/license
418 */
419 /**
420 * Injection token that can be used to reference instances of `MatTabContent`. It serves as
421 * alternative token to the actual `MatTabContent` class which could cause unnecessary
422 * retention of the class and its directive metadata.
423 */
424 var MAT_TAB_CONTENT = new core.InjectionToken('MatTabContent');
425 /** Decorates the `ng-template` tags and reads out the template from it. */
426 var MatTabContent = /** @class */ (function () {
427 function MatTabContent(
428 /** Content for the tab. */ template) {
429 this.template = template;
430 }
431 return MatTabContent;
432 }());
433 MatTabContent.decorators = [
434 { type: core.Directive, args: [{
435 selector: '[matTabContent]',
436 providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }],
437 },] }
438 ];
439 MatTabContent.ctorParameters = function () { return [
440 { type: core.TemplateRef }
441 ]; };
442
443 /**
444 * Injection token that can be used to reference instances of `MatTabLabel`. It serves as
445 * alternative token to the actual `MatTabLabel` class which could cause unnecessary
446 * retention of the class and its directive metadata.
447 */
448 var MAT_TAB_LABEL = new core.InjectionToken('MatTabLabel');
449 /**
450 * Used to provide a tab label to a tab without causing a circular dependency.
451 * @docs-private
452 */
453 var MAT_TAB = new core.InjectionToken('MAT_TAB');
454 /** Used to flag tab labels for use with the portal directive */
455 var MatTabLabel = /** @class */ (function (_super) {
456 __extends(MatTabLabel, _super);
457 function MatTabLabel(templateRef, viewContainerRef, _closestTab) {
458 var _this = _super.call(this, templateRef, viewContainerRef) || this;
459 _this._closestTab = _closestTab;
460 return _this;
461 }
462 return MatTabLabel;
463 }(portal.CdkPortal));
464 MatTabLabel.decorators = [
465 { type: core.Directive, args: [{
466 selector: '[mat-tab-label], [matTabLabel]',
467 providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }],
468 },] }
469 ];
470 MatTabLabel.ctorParameters = function () { return [
471 { type: core.TemplateRef },
472 { type: core.ViewContainerRef },
473 { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TAB,] }, { type: core.Optional }] }
474 ]; };
475
476 // Boilerplate for applying mixins to MatTab.
477 /** @docs-private */
478 var _MatTabBase = core$1.mixinDisabled(/** @class */ (function () {
479 function class_1() {
480 }
481 return class_1;
482 }()));
483 /**
484 * Used to provide a tab group to a tab without causing a circular dependency.
485 * @docs-private
486 */
487 var MAT_TAB_GROUP = new core.InjectionToken('MAT_TAB_GROUP');
488 var MatTab = /** @class */ (function (_super) {
489 __extends(MatTab, _super);
490 function MatTab(_viewContainerRef, _closestTabGroup) {
491 var _this = _super.call(this) || this;
492 _this._viewContainerRef = _viewContainerRef;
493 _this._closestTabGroup = _closestTabGroup;
494 /** Plain text label for the tab, used when there is no template label. */
495 _this.textLabel = '';
496 /** Portal that will be the hosted content of the tab */
497 _this._contentPortal = null;
498 /** Emits whenever the internal state of the tab changes. */
499 _this._stateChanges = new rxjs.Subject();
500 /**
501 * The relatively indexed position where 0 represents the center, negative is left, and positive
502 * represents the right.
503 */
504 _this.position = null;
505 /**
506 * The initial relatively index origin of the tab if it was created and selected after there
507 * was already a selected tab. Provides context of what position the tab should originate from.
508 */
509 _this.origin = null;
510 /**
511 * Whether the tab is currently active.
512 */
513 _this.isActive = false;
514 return _this;
515 }
516 Object.defineProperty(MatTab.prototype, "templateLabel", {
517 /** Content for the tab label given by `<ng-template mat-tab-label>`. */
518 get: function () { return this._templateLabel; },
519 set: function (value) { this._setTemplateLabelInput(value); },
520 enumerable: false,
521 configurable: true
522 });
523 Object.defineProperty(MatTab.prototype, "content", {
524 /** @docs-private */
525 get: function () {
526 return this._contentPortal;
527 },
528 enumerable: false,
529 configurable: true
530 });
531 MatTab.prototype.ngOnChanges = function (changes) {
532 if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {
533 this._stateChanges.next();
534 }
535 };
536 MatTab.prototype.ngOnDestroy = function () {
537 this._stateChanges.complete();
538 };
539 MatTab.prototype.ngOnInit = function () {
540 this._contentPortal = new portal.TemplatePortal(this._explicitContent || this._implicitContent, this._viewContainerRef);
541 };
542 /**
543 * This has been extracted to a util because of TS 4 and VE.
544 * View Engine doesn't support property rename inheritance.
545 * TS 4.0 doesn't allow properties to override accessors or vice-versa.
546 * @docs-private
547 */
548 MatTab.prototype._setTemplateLabelInput = function (value) {
549 // Only update the label if the query managed to find one. This works around an issue where a
550 // user may have manually set `templateLabel` during creation mode, which would then get
551 // clobbered by `undefined` when the query resolves. Also note that we check that the closest
552 // tab matches the current one so that we don't pick up labels from nested tabs.
553 if (value && value._closestTab === this) {
554 this._templateLabel = value;
555 }
556 };
557 return MatTab;
558 }(_MatTabBase));
559 MatTab.decorators = [
560 { type: core.Component, args: [{
561 selector: 'mat-tab',
562 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",
563 inputs: ['disabled'],
564 // tslint:disable-next-line:validate-decorators
565 changeDetection: core.ChangeDetectionStrategy.Default,
566 encapsulation: core.ViewEncapsulation.None,
567 exportAs: 'matTab',
568 providers: [{ provide: MAT_TAB, useExisting: MatTab }]
569 },] }
570 ];
571 MatTab.ctorParameters = function () { return [
572 { type: core.ViewContainerRef },
573 { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TAB_GROUP,] }, { type: core.Optional }] }
574 ]; };
575 MatTab.propDecorators = {
576 templateLabel: [{ type: core.ContentChild, args: [MAT_TAB_LABEL,] }],
577 _explicitContent: [{ type: core.ContentChild, args: [MAT_TAB_CONTENT, { read: core.TemplateRef, static: true },] }],
578 _implicitContent: [{ type: core.ViewChild, args: [core.TemplateRef, { static: true },] }],
579 textLabel: [{ type: core.Input, args: ['label',] }],
580 ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
581 ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }]
582 };
583
584 /**
585 * @license
586 * Copyright Google LLC All Rights Reserved.
587 *
588 * Use of this source code is governed by an MIT-style license that can be
589 * found in the LICENSE file at https://angular.io/license
590 */
591 /**
592 * Animations used by the Material tabs.
593 * @docs-private
594 */
595 var matTabsAnimations = {
596 /** Animation translates a tab along the X axis. */
597 translateTab: animations$1.trigger('translateTab', [
598 // Note: transitions to `none` instead of 0, because some browsers might blur the content.
599 animations$1.state('center, void, left-origin-center, right-origin-center', animations$1.style({ transform: 'none' })),
600 // If the tab is either on the left or right, we additionally add a `min-height` of 1px
601 // in order to ensure that the element has a height before its state changes. This is
602 // necessary because Chrome does seem to skip the transition in RTL mode if the element does
603 // not have a static height and is not rendered. See related issue: #9465
604 animations$1.state('left', animations$1.style({ transform: 'translate3d(-100%, 0, 0)', minHeight: '1px' })),
605 animations$1.state('right', animations$1.style({ transform: 'translate3d(100%, 0, 0)', minHeight: '1px' })),
606 animations$1.transition('* => left, * => right, left => center, right => center', animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')),
607 animations$1.transition('void => left-origin-center', [
608 animations$1.style({ transform: 'translate3d(-100%, 0, 0)' }),
609 animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
610 ]),
611 animations$1.transition('void => right-origin-center', [
612 animations$1.style({ transform: 'translate3d(100%, 0, 0)' }),
613 animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')
614 ])
615 ])
616 };
617
618 /**
619 * The portal host directive for the contents of the tab.
620 * @docs-private
621 */
622 var MatTabBodyPortal = /** @class */ (function (_super) {
623 __extends(MatTabBodyPortal, _super);
624 function MatTabBodyPortal(componentFactoryResolver, viewContainerRef, _host, _document) {
625 var _this = _super.call(this, componentFactoryResolver, viewContainerRef, _document) || this;
626 _this._host = _host;
627 /** Subscription to events for when the tab body begins centering. */
628 _this._centeringSub = rxjs.Subscription.EMPTY;
629 /** Subscription to events for when the tab body finishes leaving from center position. */
630 _this._leavingSub = rxjs.Subscription.EMPTY;
631 return _this;
632 }
633 /** Set initial visibility or set up subscription for changing visibility. */
634 MatTabBodyPortal.prototype.ngOnInit = function () {
635 var _this = this;
636 _super.prototype.ngOnInit.call(this);
637 this._centeringSub = this._host._beforeCentering
638 .pipe(operators.startWith(this._host._isCenterPosition(this._host._position)))
639 .subscribe(function (isCentering) {
640 if (isCentering && !_this.hasAttached()) {
641 _this.attach(_this._host._content);
642 }
643 });
644 this._leavingSub = this._host._afterLeavingCenter.subscribe(function () {
645 _this.detach();
646 });
647 };
648 /** Clean up centering subscription. */
649 MatTabBodyPortal.prototype.ngOnDestroy = function () {
650 _super.prototype.ngOnDestroy.call(this);
651 this._centeringSub.unsubscribe();
652 this._leavingSub.unsubscribe();
653 };
654 return MatTabBodyPortal;
655 }(portal.CdkPortalOutlet));
656 MatTabBodyPortal.decorators = [
657 { type: core.Directive, args: [{
658 selector: '[matTabBodyHost]'
659 },] }
660 ];
661 MatTabBodyPortal.ctorParameters = function () { return [
662 { type: core.ComponentFactoryResolver },
663 { type: core.ViewContainerRef },
664 { type: MatTabBody, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatTabBody; }),] }] },
665 { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
666 ]; };
667 /**
668 * Base class with all of the `MatTabBody` functionality.
669 * @docs-private
670 */
671 var _MatTabBodyBase = /** @class */ (function () {
672 function _MatTabBodyBase(_elementRef, _dir, changeDetectorRef) {
673 var _this = this;
674 this._elementRef = _elementRef;
675 this._dir = _dir;
676 /** Subscription to the directionality change observable. */
677 this._dirChangeSubscription = rxjs.Subscription.EMPTY;
678 /** Emits when an animation on the tab is complete. */
679 this._translateTabComplete = new rxjs.Subject();
680 /** Event emitted when the tab begins to animate towards the center as the active tab. */
681 this._onCentering = new core.EventEmitter();
682 /** Event emitted before the centering of the tab begins. */
683 this._beforeCentering = new core.EventEmitter();
684 /** Event emitted before the centering of the tab begins. */
685 this._afterLeavingCenter = new core.EventEmitter();
686 /** Event emitted when the tab completes its animation towards the center. */
687 this._onCentered = new core.EventEmitter(true);
688 // Note that the default value will always be overwritten by `MatTabBody`, but we need one
689 // anyway to prevent the animations module from throwing an error if the body is used on its own.
690 /** Duration for the tab's animation. */
691 this.animationDuration = '500ms';
692 if (_dir) {
693 this._dirChangeSubscription = _dir.change.subscribe(function (dir) {
694 _this._computePositionAnimationState(dir);
695 changeDetectorRef.markForCheck();
696 });
697 }
698 // Ensure that we get unique animation events, because the `.done` callback can get
699 // invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.
700 this._translateTabComplete.pipe(operators.distinctUntilChanged(function (x, y) {
701 return x.fromState === y.fromState && x.toState === y.toState;
702 })).subscribe(function (event) {
703 // If the transition to the center is complete, emit an event.
704 if (_this._isCenterPosition(event.toState) && _this._isCenterPosition(_this._position)) {
705 _this._onCentered.emit();
706 }
707 if (_this._isCenterPosition(event.fromState) && !_this._isCenterPosition(_this._position)) {
708 _this._afterLeavingCenter.emit();
709 }
710 });
711 }
712 Object.defineProperty(_MatTabBodyBase.prototype, "position", {
713 /** The shifted index position of the tab body, where zero represents the active center tab. */
714 set: function (position) {
715 this._positionIndex = position;
716 this._computePositionAnimationState();
717 },
718 enumerable: false,
719 configurable: true
720 });
721 /**
722 * After initialized, check if the content is centered and has an origin. If so, set the
723 * special position states that transition the tab from the left or right before centering.
724 */
725 _MatTabBodyBase.prototype.ngOnInit = function () {
726 if (this._position == 'center' && this.origin != null) {
727 this._position = this._computePositionFromOrigin(this.origin);
728 }
729 };
730 _MatTabBodyBase.prototype.ngOnDestroy = function () {
731 this._dirChangeSubscription.unsubscribe();
732 this._translateTabComplete.complete();
733 };
734 _MatTabBodyBase.prototype._onTranslateTabStarted = function (event) {
735 var isCentering = this._isCenterPosition(event.toState);
736 this._beforeCentering.emit(isCentering);
737 if (isCentering) {
738 this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
739 }
740 };
741 /** The text direction of the containing app. */
742 _MatTabBodyBase.prototype._getLayoutDirection = function () {
743 return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
744 };
745 /** Whether the provided position state is considered center, regardless of origin. */
746 _MatTabBodyBase.prototype._isCenterPosition = function (position) {
747 return position == 'center' ||
748 position == 'left-origin-center' ||
749 position == 'right-origin-center';
750 };
751 /** Computes the position state that will be used for the tab-body animation trigger. */
752 _MatTabBodyBase.prototype._computePositionAnimationState = function (dir) {
753 if (dir === void 0) { dir = this._getLayoutDirection(); }
754 if (this._positionIndex < 0) {
755 this._position = dir == 'ltr' ? 'left' : 'right';
756 }
757 else if (this._positionIndex > 0) {
758 this._position = dir == 'ltr' ? 'right' : 'left';
759 }
760 else {
761 this._position = 'center';
762 }
763 };
764 /**
765 * Computes the position state based on the specified origin position. This is used if the
766 * tab is becoming visible immediately after creation.
767 */
768 _MatTabBodyBase.prototype._computePositionFromOrigin = function (origin) {
769 var dir = this._getLayoutDirection();
770 if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {
771 return 'left-origin-center';
772 }
773 return 'right-origin-center';
774 };
775 return _MatTabBodyBase;
776 }());
777 _MatTabBodyBase.decorators = [
778 { type: core.Directive }
779 ];
780 _MatTabBodyBase.ctorParameters = function () { return [
781 { type: core.ElementRef },
782 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
783 { type: core.ChangeDetectorRef }
784 ]; };
785 _MatTabBodyBase.propDecorators = {
786 _onCentering: [{ type: core.Output }],
787 _beforeCentering: [{ type: core.Output }],
788 _afterLeavingCenter: [{ type: core.Output }],
789 _onCentered: [{ type: core.Output }],
790 _content: [{ type: core.Input, args: ['content',] }],
791 origin: [{ type: core.Input }],
792 animationDuration: [{ type: core.Input }],
793 position: [{ type: core.Input }]
794 };
795 /**
796 * Wrapper for the contents of a tab.
797 * @docs-private
798 */
799 var MatTabBody = /** @class */ (function (_super) {
800 __extends(MatTabBody, _super);
801 function MatTabBody(elementRef, dir, changeDetectorRef) {
802 return _super.call(this, elementRef, dir, changeDetectorRef) || this;
803 }
804 return MatTabBody;
805 }(_MatTabBodyBase));
806 MatTabBody.decorators = [
807 { type: core.Component, args: [{
808 selector: 'mat-tab-body',
809 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",
810 encapsulation: core.ViewEncapsulation.None,
811 // tslint:disable-next-line:validate-decorators
812 changeDetection: core.ChangeDetectionStrategy.Default,
813 animations: [matTabsAnimations.translateTab],
814 host: {
815 'class': 'mat-tab-body',
816 },
817 styles: [".mat-tab-body-content{height:100%;overflow:auto}.mat-tab-group-dynamic-height .mat-tab-body-content{overflow:hidden}\n"]
818 },] }
819 ];
820 MatTabBody.ctorParameters = function () { return [
821 { type: core.ElementRef },
822 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
823 { type: core.ChangeDetectorRef }
824 ]; };
825 MatTabBody.propDecorators = {
826 _portalHost: [{ type: core.ViewChild, args: [portal.CdkPortalOutlet,] }]
827 };
828
829 /**
830 * @license
831 * Copyright Google LLC All Rights Reserved.
832 *
833 * Use of this source code is governed by an MIT-style license that can be
834 * found in the LICENSE file at https://angular.io/license
835 */
836 /** Injection token that can be used to provide the default options the tabs module. */
837 var MAT_TABS_CONFIG = new core.InjectionToken('MAT_TABS_CONFIG');
838
839 /** Used to generate unique ID's for each tab component */
840 var nextId = 0;
841 /** A simple change event emitted on focus or selection changes. */
842 var MatTabChangeEvent = /** @class */ (function () {
843 function MatTabChangeEvent() {
844 }
845 return MatTabChangeEvent;
846 }());
847 // Boilerplate for applying mixins to MatTabGroup.
848 /** @docs-private */
849 var _MatTabGroupMixinBase = core$1.mixinColor(core$1.mixinDisableRipple(/** @class */ (function () {
850 function class_1(_elementRef) {
851 this._elementRef = _elementRef;
852 }
853 return class_1;
854 }())), 'primary');
855 /**
856 * Base class with all of the `MatTabGroupBase` functionality.
857 * @docs-private
858 */
859 var _MatTabGroupBase = /** @class */ (function (_super) {
860 __extends(_MatTabGroupBase, _super);
861 function _MatTabGroupBase(elementRef, _changeDetectorRef, defaultConfig, _animationMode) {
862 var _this = this;
863 var _a;
864 _this = _super.call(this, elementRef) || this;
865 _this._changeDetectorRef = _changeDetectorRef;
866 _this._animationMode = _animationMode;
867 /** All of the tabs that belong to the group. */
868 _this._tabs = new core.QueryList();
869 /** The tab index that should be selected after the content has been checked. */
870 _this._indexToSelect = 0;
871 /** Snapshot of the height of the tab body wrapper before another tab is activated. */
872 _this._tabBodyWrapperHeight = 0;
873 /** Subscription to tabs being added/removed. */
874 _this._tabsSubscription = rxjs.Subscription.EMPTY;
875 /** Subscription to changes in the tab labels. */
876 _this._tabLabelSubscription = rxjs.Subscription.EMPTY;
877 _this._selectedIndex = null;
878 /** Position of the tab header. */
879 _this.headerPosition = 'above';
880 /** Output to enable support for two-way binding on `[(selectedIndex)]` */
881 _this.selectedIndexChange = new core.EventEmitter();
882 /** Event emitted when focus has changed within a tab group. */
883 _this.focusChange = new core.EventEmitter();
884 /** Event emitted when the body animation has completed */
885 _this.animationDone = new core.EventEmitter();
886 /** Event emitted when the tab selection has changed. */
887 _this.selectedTabChange = new core.EventEmitter(true);
888 _this._groupId = nextId++;
889 _this.animationDuration = defaultConfig && defaultConfig.animationDuration ?
890 defaultConfig.animationDuration : '500ms';
891 _this.disablePagination = defaultConfig && defaultConfig.disablePagination != null ?
892 defaultConfig.disablePagination : false;
893 _this.dynamicHeight = defaultConfig && defaultConfig.dynamicHeight != null ?
894 defaultConfig.dynamicHeight : false;
895 _this.contentTabIndex = (_a = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.contentTabIndex) !== null && _a !== void 0 ? _a : null;
896 return _this;
897 }
898 Object.defineProperty(_MatTabGroupBase.prototype, "dynamicHeight", {
899 /** Whether the tab group should grow to the size of the active tab. */
900 get: function () { return this._dynamicHeight; },
901 set: function (value) { this._dynamicHeight = coercion.coerceBooleanProperty(value); },
902 enumerable: false,
903 configurable: true
904 });
905 Object.defineProperty(_MatTabGroupBase.prototype, "selectedIndex", {
906 /** The index of the active tab. */
907 get: function () { return this._selectedIndex; },
908 set: function (value) {
909 this._indexToSelect = coercion.coerceNumberProperty(value, null);
910 },
911 enumerable: false,
912 configurable: true
913 });
914 Object.defineProperty(_MatTabGroupBase.prototype, "animationDuration", {
915 /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
916 get: function () { return this._animationDuration; },
917 set: function (value) {
918 this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value;
919 },
920 enumerable: false,
921 configurable: true
922 });
923 Object.defineProperty(_MatTabGroupBase.prototype, "contentTabIndex", {
924 /**
925 * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
926 * accessibility when the tab does not have focusable elements or if it has scrollable content.
927 * The `tabindex` will be removed automatically for inactive tabs.
928 * Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
929 */
930 get: function () { return this._contentTabIndex; },
931 set: function (value) {
932 this._contentTabIndex = coercion.coerceNumberProperty(value, null);
933 },
934 enumerable: false,
935 configurable: true
936 });
937 Object.defineProperty(_MatTabGroupBase.prototype, "backgroundColor", {
938 /** Background color of the tab group. */
939 get: function () { return this._backgroundColor; },
940 set: function (value) {
941 var nativeElement = this._elementRef.nativeElement;
942 nativeElement.classList.remove("mat-background-" + this.backgroundColor);
943 if (value) {
944 nativeElement.classList.add("mat-background-" + value);
945 }
946 this._backgroundColor = value;
947 },
948 enumerable: false,
949 configurable: true
950 });
951 /**
952 * After the content is checked, this component knows what tabs have been defined
953 * and what the selected index should be. This is where we can know exactly what position
954 * each tab should be in according to the new selected index, and additionally we know how
955 * a new selected tab should transition in (from the left or right).
956 */
957 _MatTabGroupBase.prototype.ngAfterContentChecked = function () {
958 var _this = this;
959 // Don't clamp the `indexToSelect` immediately in the setter because it can happen that
960 // the amount of tabs changes before the actual change detection runs.
961 var indexToSelect = this._indexToSelect = this._clampTabIndex(this._indexToSelect);
962 // If there is a change in selected index, emit a change event. Should not trigger if
963 // the selected index has not yet been initialized.
964 if (this._selectedIndex != indexToSelect) {
965 var isFirstRun_1 = this._selectedIndex == null;
966 if (!isFirstRun_1) {
967 this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
968 // Preserve the height so page doesn't scroll up during tab change.
969 // Fixes https://stackblitz.com/edit/mat-tabs-scroll-page-top-on-tab-change
970 var wrapper = this._tabBodyWrapper.nativeElement;
971 wrapper.style.minHeight = wrapper.clientHeight + 'px';
972 }
973 // Changing these values after change detection has run
974 // since the checked content may contain references to them.
975 Promise.resolve().then(function () {
976 _this._tabs.forEach(function (tab, index) { return tab.isActive = index === indexToSelect; });
977 if (!isFirstRun_1) {
978 _this.selectedIndexChange.emit(indexToSelect);
979 // Clear the min-height, this was needed during tab change to avoid
980 // unnecessary scrolling.
981 _this._tabBodyWrapper.nativeElement.style.minHeight = '';
982 }
983 });
984 }
985 // Setup the position for each tab and optionally setup an origin on the next selected tab.
986 this._tabs.forEach(function (tab, index) {
987 tab.position = index - indexToSelect;
988 // If there is already a selected tab, then set up an origin for the next selected tab
989 // if it doesn't have one already.
990 if (_this._selectedIndex != null && tab.position == 0 && !tab.origin) {
991 tab.origin = indexToSelect - _this._selectedIndex;
992 }
993 });
994 if (this._selectedIndex !== indexToSelect) {
995 this._selectedIndex = indexToSelect;
996 this._changeDetectorRef.markForCheck();
997 }
998 };
999 _MatTabGroupBase.prototype.ngAfterContentInit = function () {
1000 var _this = this;
1001 this._subscribeToAllTabChanges();
1002 this._subscribeToTabLabels();
1003 // Subscribe to changes in the amount of tabs, in order to be
1004 // able to re-render the content as new tabs are added or removed.
1005 this._tabsSubscription = this._tabs.changes.subscribe(function () {
1006 var indexToSelect = _this._clampTabIndex(_this._indexToSelect);
1007 // Maintain the previously-selected tab if a new tab is added or removed and there is no
1008 // explicit change that selects a different tab.
1009 if (indexToSelect === _this._selectedIndex) {
1010 var tabs = _this._tabs.toArray();
1011 for (var i = 0; i < tabs.length; i++) {
1012 if (tabs[i].isActive) {
1013 // Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed
1014 // event, otherwise the consumer may end up in an infinite loop in some edge cases like
1015 // adding a tab within the `selectedIndexChange` event.
1016 _this._indexToSelect = _this._selectedIndex = i;
1017 break;
1018 }
1019 }
1020 }
1021 _this._changeDetectorRef.markForCheck();
1022 });
1023 };
1024 /** Listens to changes in all of the tabs. */
1025 _MatTabGroupBase.prototype._subscribeToAllTabChanges = function () {
1026 var _this = this;
1027 // Since we use a query with `descendants: true` to pick up the tabs, we may end up catching
1028 // some that are inside of nested tab groups. We filter them out manually by checking that
1029 // the closest group to the tab is the current one.
1030 this._allTabs.changes
1031 .pipe(operators.startWith(this._allTabs))
1032 .subscribe(function (tabs) {
1033 _this._tabs.reset(tabs.filter(function (tab) {
1034 return tab._closestTabGroup === _this || !tab._closestTabGroup;
1035 }));
1036 _this._tabs.notifyOnChanges();
1037 });
1038 };
1039 _MatTabGroupBase.prototype.ngOnDestroy = function () {
1040 this._tabs.destroy();
1041 this._tabsSubscription.unsubscribe();
1042 this._tabLabelSubscription.unsubscribe();
1043 };
1044 /** Re-aligns the ink bar to the selected tab element. */
1045 _MatTabGroupBase.prototype.realignInkBar = function () {
1046 if (this._tabHeader) {
1047 this._tabHeader._alignInkBarToSelectedTab();
1048 }
1049 };
1050 /**
1051 * Sets focus to a particular tab.
1052 * @param index Index of the tab to be focused.
1053 */
1054 _MatTabGroupBase.prototype.focusTab = function (index) {
1055 var header = this._tabHeader;
1056 if (header) {
1057 header.focusIndex = index;
1058 }
1059 };
1060 _MatTabGroupBase.prototype._focusChanged = function (index) {
1061 this.focusChange.emit(this._createChangeEvent(index));
1062 };
1063 _MatTabGroupBase.prototype._createChangeEvent = function (index) {
1064 var event = new MatTabChangeEvent;
1065 event.index = index;
1066 if (this._tabs && this._tabs.length) {
1067 event.tab = this._tabs.toArray()[index];
1068 }
1069 return event;
1070 };
1071 /**
1072 * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
1073 * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
1074 * binding to be updated, we need to subscribe to changes in it and trigger change detection
1075 * manually.
1076 */
1077 _MatTabGroupBase.prototype._subscribeToTabLabels = function () {
1078 var _this = this;
1079 if (this._tabLabelSubscription) {
1080 this._tabLabelSubscription.unsubscribe();
1081 }
1082 this._tabLabelSubscription = rxjs.merge.apply(void 0, __spreadArray([], __read(this._tabs.map(function (tab) { return tab._stateChanges; })))).subscribe(function () { return _this._changeDetectorRef.markForCheck(); });
1083 };
1084 /** Clamps the given index to the bounds of 0 and the tabs length. */
1085 _MatTabGroupBase.prototype._clampTabIndex = function (index) {
1086 // Note the `|| 0`, which ensures that values like NaN can't get through
1087 // and which would otherwise throw the component into an infinite loop
1088 // (since Math.max(NaN, 0) === NaN).
1089 return Math.min(this._tabs.length - 1, Math.max(index || 0, 0));
1090 };
1091 /** Returns a unique id for each tab label element */
1092 _MatTabGroupBase.prototype._getTabLabelId = function (i) {
1093 return "mat-tab-label-" + this._groupId + "-" + i;
1094 };
1095 /** Returns a unique id for each tab content element */
1096 _MatTabGroupBase.prototype._getTabContentId = function (i) {
1097 return "mat-tab-content-" + this._groupId + "-" + i;
1098 };
1099 /**
1100 * Sets the height of the body wrapper to the height of the activating tab if dynamic
1101 * height property is true.
1102 */
1103 _MatTabGroupBase.prototype._setTabBodyWrapperHeight = function (tabHeight) {
1104 if (!this._dynamicHeight || !this._tabBodyWrapperHeight) {
1105 return;
1106 }
1107 var wrapper = this._tabBodyWrapper.nativeElement;
1108 wrapper.style.height = this._tabBodyWrapperHeight + 'px';
1109 // This conditional forces the browser to paint the height so that
1110 // the animation to the new height can have an origin.
1111 if (this._tabBodyWrapper.nativeElement.offsetHeight) {
1112 wrapper.style.height = tabHeight + 'px';
1113 }
1114 };
1115 /** Removes the height of the tab body wrapper. */
1116 _MatTabGroupBase.prototype._removeTabBodyWrapperHeight = function () {
1117 var wrapper = this._tabBodyWrapper.nativeElement;
1118 this._tabBodyWrapperHeight = wrapper.clientHeight;
1119 wrapper.style.height = '';
1120 this.animationDone.emit();
1121 };
1122 /** Handle click events, setting new selected index if appropriate. */
1123 _MatTabGroupBase.prototype._handleClick = function (tab, tabHeader, index) {
1124 if (!tab.disabled) {
1125 this.selectedIndex = tabHeader.focusIndex = index;
1126 }
1127 };
1128 /** Retrieves the tabindex for the tab. */
1129 _MatTabGroupBase.prototype._getTabIndex = function (tab, idx) {
1130 if (tab.disabled) {
1131 return null;
1132 }
1133 return this.selectedIndex === idx ? 0 : -1;
1134 };
1135 /** Callback for when the focused state of a tab has changed. */
1136 _MatTabGroupBase.prototype._tabFocusChanged = function (focusOrigin, index) {
1137 // Mouse/touch focus happens during the `mousedown`/`touchstart` phase which
1138 // can cause the tab to be moved out from under the pointer, interrupting the
1139 // click sequence (see #21898). We don't need to scroll the tab into view for
1140 // such cases anyway, because it will be done when the tab becomes selected.
1141 if (focusOrigin && focusOrigin !== 'mouse' && focusOrigin !== 'touch') {
1142 this._tabHeader.focusIndex = index;
1143 }
1144 };
1145 return _MatTabGroupBase;
1146 }(_MatTabGroupMixinBase));
1147 _MatTabGroupBase.decorators = [
1148 { type: core.Directive }
1149 ];
1150 _MatTabGroupBase.ctorParameters = function () { return [
1151 { type: core.ElementRef },
1152 { type: core.ChangeDetectorRef },
1153 { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TABS_CONFIG,] }, { type: core.Optional }] },
1154 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1155 ]; };
1156 _MatTabGroupBase.propDecorators = {
1157 dynamicHeight: [{ type: core.Input }],
1158 selectedIndex: [{ type: core.Input }],
1159 headerPosition: [{ type: core.Input }],
1160 animationDuration: [{ type: core.Input }],
1161 contentTabIndex: [{ type: core.Input }],
1162 disablePagination: [{ type: core.Input }],
1163 backgroundColor: [{ type: core.Input }],
1164 selectedIndexChange: [{ type: core.Output }],
1165 focusChange: [{ type: core.Output }],
1166 animationDone: [{ type: core.Output }],
1167 selectedTabChange: [{ type: core.Output }]
1168 };
1169 /**
1170 * Material design tab-group component. Supports basic tab pairs (label + content) and includes
1171 * animated ink-bar, keyboard navigation, and screen reader.
1172 * See: https://material.io/design/components/tabs.html
1173 */
1174 var MatTabGroup = /** @class */ (function (_super) {
1175 __extends(MatTabGroup, _super);
1176 function MatTabGroup(elementRef, changeDetectorRef, defaultConfig, animationMode) {
1177 return _super.call(this, elementRef, changeDetectorRef, defaultConfig, animationMode) || this;
1178 }
1179 return MatTabGroup;
1180 }(_MatTabGroupBase));
1181 MatTabGroup.decorators = [
1182 { type: core.Component, args: [{
1183 selector: 'mat-tab-group',
1184 exportAs: 'matTabGroup',
1185 template: "<mat-tab-header #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [disableRipple]=\"disableRipple\"\n [disablePagination]=\"disablePagination\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"selectedIndex = $event\">\n <div class=\"mat-tab-label mat-focus-indicator\" role=\"tab\" matTabLabelWrapper mat-ripple cdkMonitorElementFocus\n *ngFor=\"let tab of _tabs; let i = index\"\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(tab, i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex == i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n [class.mat-tab-label-active]=\"selectedIndex == i\"\n [disabled]=\"tab.disabled\"\n [matRippleDisabled]=\"tab.disabled || disableRipple\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\">\n\n\n <div class=\"mat-tab-label-content\">\n <!-- If there is a label template, use it. -->\n <ng-template [ngIf]=\"tab.templateLabel\">\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n </ng-template>\n\n <!-- If there is not a label template, fall back to the text label. -->\n <ng-template [ngIf]=\"!tab.templateLabel\">{{tab.textLabel}}</ng-template>\n </div>\n </div>\n</mat-tab-header>\n\n<div\n class=\"mat-tab-body-wrapper\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n #tabBodyWrapper>\n <mat-tab-body role=\"tabpanel\"\n *ngFor=\"let tab of _tabs; let i = index\"\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [class.mat-tab-body-active]=\"selectedIndex === i\"\n [content]=\"tab.content!\"\n [position]=\"tab.position!\"\n [origin]=\"tab.origin\"\n [animationDuration]=\"animationDuration\"\n (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n (_onCentering)=\"_setTabBodyWrapperHeight($event)\">\n </mat-tab-body>\n</div>\n",
1186 encapsulation: core.ViewEncapsulation.None,
1187 // tslint:disable-next-line:validate-decorators
1188 changeDetection: core.ChangeDetectionStrategy.Default,
1189 inputs: ['color', 'disableRipple'],
1190 providers: [{
1191 provide: MAT_TAB_GROUP,
1192 useExisting: MatTabGroup
1193 }],
1194 host: {
1195 'class': 'mat-tab-group',
1196 '[class.mat-tab-group-dynamic-height]': 'dynamicHeight',
1197 '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
1198 },
1199 styles: [".mat-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-tab-group.mat-tab-group-inverted-header{flex-direction:column-reverse}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:none}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.cdk-high-contrast-active .mat-tab-label:focus{outline:dotted 2px;outline-offset:-2px}.mat-tab-label.mat-tab-disabled{cursor:default}.cdk-high-contrast-active .mat-tab-label.mat-tab-disabled{opacity:.5}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}.cdk-high-contrast-active .mat-tab-label{opacity:1}@media(max-width: 599px){.mat-tab-label{padding:0 12px}}@media(max-width: 959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable.mat-tab-body-wrapper{transition:none;animation:none}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}\n"]
1200 },] }
1201 ];
1202 MatTabGroup.ctorParameters = function () { return [
1203 { type: core.ElementRef },
1204 { type: core.ChangeDetectorRef },
1205 { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TABS_CONFIG,] }, { type: core.Optional }] },
1206 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1207 ]; };
1208 MatTabGroup.propDecorators = {
1209 _allTabs: [{ type: core.ContentChildren, args: [MatTab, { descendants: true },] }],
1210 _tabBodyWrapper: [{ type: core.ViewChild, args: ['tabBodyWrapper',] }],
1211 _tabHeader: [{ type: core.ViewChild, args: ['tabHeader',] }]
1212 };
1213
1214 // Boilerplate for applying mixins to MatTabLabelWrapper.
1215 /** @docs-private */
1216 var _MatTabLabelWrapperBase = core$1.mixinDisabled(/** @class */ (function () {
1217 function class_1() {
1218 }
1219 return class_1;
1220 }()));
1221 /**
1222 * Used in the `mat-tab-group` view to display tab labels.
1223 * @docs-private
1224 */
1225 var MatTabLabelWrapper = /** @class */ (function (_super) {
1226 __extends(MatTabLabelWrapper, _super);
1227 function MatTabLabelWrapper(elementRef) {
1228 var _this = _super.call(this) || this;
1229 _this.elementRef = elementRef;
1230 return _this;
1231 }
1232 /** Sets focus on the wrapper element */
1233 MatTabLabelWrapper.prototype.focus = function () {
1234 this.elementRef.nativeElement.focus();
1235 };
1236 MatTabLabelWrapper.prototype.getOffsetLeft = function () {
1237 return this.elementRef.nativeElement.offsetLeft;
1238 };
1239 MatTabLabelWrapper.prototype.getOffsetWidth = function () {
1240 return this.elementRef.nativeElement.offsetWidth;
1241 };
1242 return MatTabLabelWrapper;
1243 }(_MatTabLabelWrapperBase));
1244 MatTabLabelWrapper.decorators = [
1245 { type: core.Directive, args: [{
1246 selector: '[matTabLabelWrapper]',
1247 inputs: ['disabled'],
1248 host: {
1249 '[class.mat-tab-disabled]': 'disabled',
1250 '[attr.aria-disabled]': '!!disabled',
1251 }
1252 },] }
1253 ];
1254 MatTabLabelWrapper.ctorParameters = function () { return [
1255 { type: core.ElementRef }
1256 ]; };
1257
1258 /**
1259 * @license
1260 * Copyright Google LLC All Rights Reserved.
1261 *
1262 * Use of this source code is governed by an MIT-style license that can be
1263 * found in the LICENSE file at https://angular.io/license
1264 */
1265 /** Config used to bind passive event listeners */
1266 var passiveEventListenerOptions = platform.normalizePassiveListenerOptions({ passive: true });
1267 /**
1268 * The distance in pixels that will be overshot when scrolling a tab label into view. This helps
1269 * provide a small affordance to the label next to it.
1270 */
1271 var EXAGGERATED_OVERSCROLL = 60;
1272 /**
1273 * Amount of milliseconds to wait before starting to scroll the header automatically.
1274 * Set a little conservatively in order to handle fake events dispatched on touch devices.
1275 */
1276 var HEADER_SCROLL_DELAY = 650;
1277 /**
1278 * Interval in milliseconds at which to scroll the header
1279 * while the user is holding their pointer.
1280 */
1281 var HEADER_SCROLL_INTERVAL = 100;
1282 /**
1283 * Base class for a tab header that supported pagination.
1284 * @docs-private
1285 */
1286 var MatPaginatedTabHeader = /** @class */ (function () {
1287 function MatPaginatedTabHeader(_elementRef, _changeDetectorRef, _viewportRuler, _dir, _ngZone, _platform, _animationMode) {
1288 var _this = this;
1289 this._elementRef = _elementRef;
1290 this._changeDetectorRef = _changeDetectorRef;
1291 this._viewportRuler = _viewportRuler;
1292 this._dir = _dir;
1293 this._ngZone = _ngZone;
1294 this._platform = _platform;
1295 this._animationMode = _animationMode;
1296 /** The distance in pixels that the tab labels should be translated to the left. */
1297 this._scrollDistance = 0;
1298 /** Whether the header should scroll to the selected index after the view has been checked. */
1299 this._selectedIndexChanged = false;
1300 /** Emits when the component is destroyed. */
1301 this._destroyed = new rxjs.Subject();
1302 /** Whether the controls for pagination should be displayed */
1303 this._showPaginationControls = false;
1304 /** Whether the tab list can be scrolled more towards the end of the tab label list. */
1305 this._disableScrollAfter = true;
1306 /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
1307 this._disableScrollBefore = true;
1308 /** Stream that will stop the automated scrolling. */
1309 this._stopScrolling = new rxjs.Subject();
1310 /**
1311 * Whether pagination should be disabled. This can be used to avoid unnecessary
1312 * layout recalculations if it's known that pagination won't be required.
1313 */
1314 this.disablePagination = false;
1315 this._selectedIndex = 0;
1316 /** Event emitted when the option is selected. */
1317 this.selectFocusedIndex = new core.EventEmitter();
1318 /** Event emitted when a label is focused. */
1319 this.indexFocused = new core.EventEmitter();
1320 // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
1321 _ngZone.runOutsideAngular(function () {
1322 rxjs.fromEvent(_elementRef.nativeElement, 'mouseleave')
1323 .pipe(operators.takeUntil(_this._destroyed))
1324 .subscribe(function () {
1325 _this._stopInterval();
1326 });
1327 });
1328 }
1329 Object.defineProperty(MatPaginatedTabHeader.prototype, "selectedIndex", {
1330 /** The index of the active tab. */
1331 get: function () { return this._selectedIndex; },
1332 set: function (value) {
1333 value = coercion.coerceNumberProperty(value);
1334 if (this._selectedIndex != value) {
1335 this._selectedIndexChanged = true;
1336 this._selectedIndex = value;
1337 if (this._keyManager) {
1338 this._keyManager.updateActiveItem(value);
1339 }
1340 }
1341 },
1342 enumerable: false,
1343 configurable: true
1344 });
1345 MatPaginatedTabHeader.prototype.ngAfterViewInit = function () {
1346 var _this = this;
1347 // We need to handle these events manually, because we want to bind passive event listeners.
1348 rxjs.fromEvent(this._previousPaginator.nativeElement, 'touchstart', passiveEventListenerOptions)
1349 .pipe(operators.takeUntil(this._destroyed))
1350 .subscribe(function () {
1351 _this._handlePaginatorPress('before');
1352 });
1353 rxjs.fromEvent(this._nextPaginator.nativeElement, 'touchstart', passiveEventListenerOptions)
1354 .pipe(operators.takeUntil(this._destroyed))
1355 .subscribe(function () {
1356 _this._handlePaginatorPress('after');
1357 });
1358 };
1359 MatPaginatedTabHeader.prototype.ngAfterContentInit = function () {
1360 var _this = this;
1361 var dirChange = this._dir ? this._dir.change : rxjs.of('ltr');
1362 var resize = this._viewportRuler.change(150);
1363 var realign = function () {
1364 _this.updatePagination();
1365 _this._alignInkBarToSelectedTab();
1366 };
1367 this._keyManager = new a11y.FocusKeyManager(this._items)
1368 .withHorizontalOrientation(this._getLayoutDirection())
1369 .withHomeAndEnd()
1370 .withWrap();
1371 this._keyManager.updateActiveItem(this._selectedIndex);
1372 // Defer the first call in order to allow for slower browsers to lay out the elements.
1373 // This helps in cases where the user lands directly on a page with paginated tabs.
1374 typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(realign) : realign();
1375 // On dir change or window resize, realign the ink bar and update the orientation of
1376 // the key manager if the direction has changed.
1377 rxjs.merge(dirChange, resize, this._items.changes).pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
1378 // We need to defer this to give the browser some time to recalculate
1379 // the element dimensions. The call has to be wrapped in `NgZone.run`,
1380 // because the viewport change handler runs outside of Angular.
1381 _this._ngZone.run(function () { return Promise.resolve().then(realign); });
1382 _this._keyManager.withHorizontalOrientation(_this._getLayoutDirection());
1383 });
1384 // If there is a change in the focus key manager we need to emit the `indexFocused`
1385 // event in order to provide a public event that notifies about focus changes. Also we realign
1386 // the tabs container by scrolling the new focused tab into the visible section.
1387 this._keyManager.change.pipe(operators.takeUntil(this._destroyed)).subscribe(function (newFocusIndex) {
1388 _this.indexFocused.emit(newFocusIndex);
1389 _this._setTabFocus(newFocusIndex);
1390 });
1391 };
1392 MatPaginatedTabHeader.prototype.ngAfterContentChecked = function () {
1393 // If the number of tab labels have changed, check if scrolling should be enabled
1394 if (this._tabLabelCount != this._items.length) {
1395 this.updatePagination();
1396 this._tabLabelCount = this._items.length;
1397 this._changeDetectorRef.markForCheck();
1398 }
1399 // If the selected index has changed, scroll to the label and check if the scrolling controls
1400 // should be disabled.
1401 if (this._selectedIndexChanged) {
1402 this._scrollToLabel(this._selectedIndex);
1403 this._checkScrollingControls();
1404 this._alignInkBarToSelectedTab();
1405 this._selectedIndexChanged = false;
1406 this._changeDetectorRef.markForCheck();
1407 }
1408 // If the scroll distance has been changed (tab selected, focused, scroll controls activated),
1409 // then translate the header to reflect this.
1410 if (this._scrollDistanceChanged) {
1411 this._updateTabScrollPosition();
1412 this._scrollDistanceChanged = false;
1413 this._changeDetectorRef.markForCheck();
1414 }
1415 };
1416 MatPaginatedTabHeader.prototype.ngOnDestroy = function () {
1417 this._destroyed.next();
1418 this._destroyed.complete();
1419 this._stopScrolling.complete();
1420 };
1421 /** Handles keyboard events on the header. */
1422 MatPaginatedTabHeader.prototype._handleKeydown = function (event) {
1423 // We don't handle any key bindings with a modifier key.
1424 if (keycodes.hasModifierKey(event)) {
1425 return;
1426 }
1427 switch (event.keyCode) {
1428 case keycodes.ENTER:
1429 case keycodes.SPACE:
1430 if (this.focusIndex !== this.selectedIndex) {
1431 this.selectFocusedIndex.emit(this.focusIndex);
1432 this._itemSelected(event);
1433 }
1434 break;
1435 default:
1436 this._keyManager.onKeydown(event);
1437 }
1438 };
1439 /**
1440 * Callback for when the MutationObserver detects that the content has changed.
1441 */
1442 MatPaginatedTabHeader.prototype._onContentChanges = function () {
1443 var _this = this;
1444 var textContent = this._elementRef.nativeElement.textContent;
1445 // We need to diff the text content of the header, because the MutationObserver callback
1446 // will fire even if the text content didn't change which is inefficient and is prone
1447 // to infinite loops if a poorly constructed expression is passed in (see #14249).
1448 if (textContent !== this._currentTextContent) {
1449 this._currentTextContent = textContent || '';
1450 // The content observer runs outside the `NgZone` by default, which
1451 // means that we need to bring the callback back in ourselves.
1452 this._ngZone.run(function () {
1453 _this.updatePagination();
1454 _this._alignInkBarToSelectedTab();
1455 _this._changeDetectorRef.markForCheck();
1456 });
1457 }
1458 };
1459 /**
1460 * Updates the view whether pagination should be enabled or not.
1461 *
1462 * WARNING: Calling this method can be very costly in terms of performance. It should be called
1463 * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
1464 * page.
1465 */
1466 MatPaginatedTabHeader.prototype.updatePagination = function () {
1467 this._checkPaginationEnabled();
1468 this._checkScrollingControls();
1469 this._updateTabScrollPosition();
1470 };
1471 Object.defineProperty(MatPaginatedTabHeader.prototype, "focusIndex", {
1472 /** Tracks which element has focus; used for keyboard navigation */
1473 get: function () {
1474 return this._keyManager ? this._keyManager.activeItemIndex : 0;
1475 },
1476 /** When the focus index is set, we must manually send focus to the correct label */
1477 set: function (value) {
1478 if (!this._isValidIndex(value) || this.focusIndex === value || !this._keyManager) {
1479 return;
1480 }
1481 this._keyManager.setActiveItem(value);
1482 },
1483 enumerable: false,
1484 configurable: true
1485 });
1486 /**
1487 * Determines if an index is valid. If the tabs are not ready yet, we assume that the user is
1488 * providing a valid index and return true.
1489 */
1490 MatPaginatedTabHeader.prototype._isValidIndex = function (index) {
1491 if (!this._items) {
1492 return true;
1493 }
1494 var tab = this._items ? this._items.toArray()[index] : null;
1495 return !!tab && !tab.disabled;
1496 };
1497 /**
1498 * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
1499 * scrolling is enabled.
1500 */
1501 MatPaginatedTabHeader.prototype._setTabFocus = function (tabIndex) {
1502 if (this._showPaginationControls) {
1503 this._scrollToLabel(tabIndex);
1504 }
1505 if (this._items && this._items.length) {
1506 this._items.toArray()[tabIndex].focus();
1507 // Do not let the browser manage scrolling to focus the element, this will be handled
1508 // by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width
1509 // should be the full width minus the offset width.
1510 var containerEl = this._tabListContainer.nativeElement;
1511 var dir = this._getLayoutDirection();
1512 if (dir == 'ltr') {
1513 containerEl.scrollLeft = 0;
1514 }
1515 else {
1516 containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;
1517 }
1518 }
1519 };
1520 /** The layout direction of the containing app. */
1521 MatPaginatedTabHeader.prototype._getLayoutDirection = function () {
1522 return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
1523 };
1524 /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
1525 MatPaginatedTabHeader.prototype._updateTabScrollPosition = function () {
1526 if (this.disablePagination) {
1527 return;
1528 }
1529 var scrollDistance = this.scrollDistance;
1530 var translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
1531 // Don't use `translate3d` here because we don't want to create a new layer. A new layer
1532 // seems to cause flickering and overflow in Internet Explorer. For example, the ink bar
1533 // and ripples will exceed the boundaries of the visible tab bar.
1534 // See: https://github.com/angular/components/issues/10276
1535 // We round the `transform` here, because transforms with sub-pixel precision cause some
1536 // browsers to blur the content of the element.
1537 this._tabList.nativeElement.style.transform = "translateX(" + Math.round(translateX) + "px)";
1538 // Setting the `transform` on IE will change the scroll offset of the parent, causing the
1539 // position to be thrown off in some cases. We have to reset it ourselves to ensure that
1540 // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing
1541 // with the scroll position throws off Chrome 71+ in RTL mode (see #14689).
1542 if (this._platform.TRIDENT || this._platform.EDGE) {
1543 this._tabListContainer.nativeElement.scrollLeft = 0;
1544 }
1545 };
1546 Object.defineProperty(MatPaginatedTabHeader.prototype, "scrollDistance", {
1547 /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
1548 get: function () { return this._scrollDistance; },
1549 set: function (value) {
1550 this._scrollTo(value);
1551 },
1552 enumerable: false,
1553 configurable: true
1554 });
1555 /**
1556 * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
1557 * the end of the list, respectively). The distance to scroll is computed to be a third of the
1558 * length of the tab list view window.
1559 *
1560 * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
1561 * should be called sparingly.
1562 */
1563 MatPaginatedTabHeader.prototype._scrollHeader = function (direction) {
1564 var viewLength = this._tabListContainer.nativeElement.offsetWidth;
1565 // Move the scroll distance one-third the length of the tab list's viewport.
1566 var scrollAmount = (direction == 'before' ? -1 : 1) * viewLength / 3;
1567 return this._scrollTo(this._scrollDistance + scrollAmount);
1568 };
1569 /** Handles click events on the pagination arrows. */
1570 MatPaginatedTabHeader.prototype._handlePaginatorClick = function (direction) {
1571 this._stopInterval();
1572 this._scrollHeader(direction);
1573 };
1574 /**
1575 * Moves the tab list such that the desired tab label (marked by index) is moved into view.
1576 *
1577 * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
1578 * should be called sparingly.
1579 */
1580 MatPaginatedTabHeader.prototype._scrollToLabel = function (labelIndex) {
1581 if (this.disablePagination) {
1582 return;
1583 }
1584 var selectedLabel = this._items ? this._items.toArray()[labelIndex] : null;
1585 if (!selectedLabel) {
1586 return;
1587 }
1588 // The view length is the visible width of the tab labels.
1589 var viewLength = this._tabListContainer.nativeElement.offsetWidth;
1590 var _a = selectedLabel.elementRef.nativeElement, offsetLeft = _a.offsetLeft, offsetWidth = _a.offsetWidth;
1591 var labelBeforePos, labelAfterPos;
1592 if (this._getLayoutDirection() == 'ltr') {
1593 labelBeforePos = offsetLeft;
1594 labelAfterPos = labelBeforePos + offsetWidth;
1595 }
1596 else {
1597 labelAfterPos = this._tabList.nativeElement.offsetWidth - offsetLeft;
1598 labelBeforePos = labelAfterPos - offsetWidth;
1599 }
1600 var beforeVisiblePos = this.scrollDistance;
1601 var afterVisiblePos = this.scrollDistance + viewLength;
1602 if (labelBeforePos < beforeVisiblePos) {
1603 // Scroll header to move label to the before direction
1604 this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
1605 }
1606 else if (labelAfterPos > afterVisiblePos) {
1607 // Scroll header to move label to the after direction
1608 this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
1609 }
1610 };
1611 /**
1612 * Evaluate whether the pagination controls should be displayed. If the scroll width of the
1613 * tab list is wider than the size of the header container, then the pagination controls should
1614 * be shown.
1615 *
1616 * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
1617 * should be called sparingly.
1618 */
1619 MatPaginatedTabHeader.prototype._checkPaginationEnabled = function () {
1620 if (this.disablePagination) {
1621 this._showPaginationControls = false;
1622 }
1623 else {
1624 var isEnabled = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
1625 if (!isEnabled) {
1626 this.scrollDistance = 0;
1627 }
1628 if (isEnabled !== this._showPaginationControls) {
1629 this._changeDetectorRef.markForCheck();
1630 }
1631 this._showPaginationControls = isEnabled;
1632 }
1633 };
1634 /**
1635 * Evaluate whether the before and after controls should be enabled or disabled.
1636 * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
1637 * before button. If the header is at the end of the list (scroll distance is equal to the
1638 * maximum distance we can scroll), then disable the after button.
1639 *
1640 * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
1641 * should be called sparingly.
1642 */
1643 MatPaginatedTabHeader.prototype._checkScrollingControls = function () {
1644 if (this.disablePagination) {
1645 this._disableScrollAfter = this._disableScrollBefore = true;
1646 }
1647 else {
1648 // Check if the pagination arrows should be activated.
1649 this._disableScrollBefore = this.scrollDistance == 0;
1650 this._disableScrollAfter = this.scrollDistance == this._getMaxScrollDistance();
1651 this._changeDetectorRef.markForCheck();
1652 }
1653 };
1654 /**
1655 * Determines what is the maximum length in pixels that can be set for the scroll distance. This
1656 * is equal to the difference in width between the tab list container and tab header container.
1657 *
1658 * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
1659 * should be called sparingly.
1660 */
1661 MatPaginatedTabHeader.prototype._getMaxScrollDistance = function () {
1662 var lengthOfTabList = this._tabList.nativeElement.scrollWidth;
1663 var viewLength = this._tabListContainer.nativeElement.offsetWidth;
1664 return (lengthOfTabList - viewLength) || 0;
1665 };
1666 /** Tells the ink-bar to align itself to the current label wrapper */
1667 MatPaginatedTabHeader.prototype._alignInkBarToSelectedTab = function () {
1668 var selectedItem = this._items && this._items.length ?
1669 this._items.toArray()[this.selectedIndex] : null;
1670 var selectedLabelWrapper = selectedItem ? selectedItem.elementRef.nativeElement : null;
1671 if (selectedLabelWrapper) {
1672 this._inkBar.alignToElement(selectedLabelWrapper);
1673 }
1674 else {
1675 this._inkBar.hide();
1676 }
1677 };
1678 /** Stops the currently-running paginator interval. */
1679 MatPaginatedTabHeader.prototype._stopInterval = function () {
1680 this._stopScrolling.next();
1681 };
1682 /**
1683 * Handles the user pressing down on one of the paginators.
1684 * Starts scrolling the header after a certain amount of time.
1685 * @param direction In which direction the paginator should be scrolled.
1686 */
1687 MatPaginatedTabHeader.prototype._handlePaginatorPress = function (direction, mouseEvent) {
1688 var _this = this;
1689 // Don't start auto scrolling for right mouse button clicks. Note that we shouldn't have to
1690 // null check the `button`, but we do it so we don't break tests that use fake events.
1691 if (mouseEvent && mouseEvent.button != null && mouseEvent.button !== 0) {
1692 return;
1693 }
1694 // Avoid overlapping timers.
1695 this._stopInterval();
1696 // Start a timer after the delay and keep firing based on the interval.
1697 rxjs.timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL)
1698 // Keep the timer going until something tells it to stop or the component is destroyed.
1699 .pipe(operators.takeUntil(rxjs.merge(this._stopScrolling, this._destroyed)))
1700 .subscribe(function () {
1701 var _a = _this._scrollHeader(direction), maxScrollDistance = _a.maxScrollDistance, distance = _a.distance;
1702 // Stop the timer if we've reached the start or the end.
1703 if (distance === 0 || distance >= maxScrollDistance) {
1704 _this._stopInterval();
1705 }
1706 });
1707 };
1708 /**
1709 * Scrolls the header to a given position.
1710 * @param position Position to which to scroll.
1711 * @returns Information on the current scroll distance and the maximum.
1712 */
1713 MatPaginatedTabHeader.prototype._scrollTo = function (position) {
1714 if (this.disablePagination) {
1715 return { maxScrollDistance: 0, distance: 0 };
1716 }
1717 var maxScrollDistance = this._getMaxScrollDistance();
1718 this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position));
1719 // Mark that the scroll distance has changed so that after the view is checked, the CSS
1720 // transformation can move the header.
1721 this._scrollDistanceChanged = true;
1722 this._checkScrollingControls();
1723 return { maxScrollDistance: maxScrollDistance, distance: this._scrollDistance };
1724 };
1725 return MatPaginatedTabHeader;
1726 }());
1727 MatPaginatedTabHeader.decorators = [
1728 { type: core.Directive }
1729 ];
1730 MatPaginatedTabHeader.ctorParameters = function () { return [
1731 { type: core.ElementRef },
1732 { type: core.ChangeDetectorRef },
1733 { type: scrolling.ViewportRuler },
1734 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
1735 { type: core.NgZone },
1736 { type: platform.Platform },
1737 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1738 ]; };
1739 MatPaginatedTabHeader.propDecorators = {
1740 disablePagination: [{ type: core.Input }]
1741 };
1742
1743 /**
1744 * Base class with all of the `MatTabHeader` functionality.
1745 * @docs-private
1746 */
1747 var _MatTabHeaderBase = /** @class */ (function (_super) {
1748 __extends(_MatTabHeaderBase, _super);
1749 function _MatTabHeaderBase(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode) {
1750 var _this = _super.call(this, elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode) || this;
1751 _this._disableRipple = false;
1752 return _this;
1753 }
1754 Object.defineProperty(_MatTabHeaderBase.prototype, "disableRipple", {
1755 /** Whether the ripple effect is disabled or not. */
1756 get: function () { return this._disableRipple; },
1757 set: function (value) { this._disableRipple = coercion.coerceBooleanProperty(value); },
1758 enumerable: false,
1759 configurable: true
1760 });
1761 _MatTabHeaderBase.prototype._itemSelected = function (event) {
1762 event.preventDefault();
1763 };
1764 return _MatTabHeaderBase;
1765 }(MatPaginatedTabHeader));
1766 _MatTabHeaderBase.decorators = [
1767 { type: core.Directive }
1768 ];
1769 _MatTabHeaderBase.ctorParameters = function () { return [
1770 { type: core.ElementRef },
1771 { type: core.ChangeDetectorRef },
1772 { type: scrolling.ViewportRuler },
1773 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
1774 { type: core.NgZone },
1775 { type: platform.Platform },
1776 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1777 ]; };
1778 _MatTabHeaderBase.propDecorators = {
1779 disableRipple: [{ type: core.Input }]
1780 };
1781 /**
1782 * The header of the tab group which displays a list of all the tabs in the tab group. Includes
1783 * an ink bar that follows the currently selected tab. When the tabs list's width exceeds the
1784 * width of the header container, then arrows will be displayed to allow the user to scroll
1785 * left and right across the header.
1786 * @docs-private
1787 */
1788 var MatTabHeader = /** @class */ (function (_super) {
1789 __extends(MatTabHeader, _super);
1790 function MatTabHeader(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode) {
1791 return _super.call(this, elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode) || this;
1792 }
1793 return MatTabHeader;
1794 }(_MatTabHeaderBase));
1795 MatTabHeader.decorators = [
1796 { type: core.Component, args: [{
1797 selector: 'mat-tab-header',
1798 template: "<div class=\"mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4\"\n #previousPaginator\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-tab-label-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div\n #tabList\n class=\"mat-tab-list\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n role=\"tablist\"\n (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-tab-labels\">\n <ng-content></ng-content>\n </div>\n <mat-ink-bar></mat-ink-bar>\n </div>\n</div>\n\n<div class=\"mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4\"\n #nextPaginator\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-tab-header-pagination-chevron\"></div>\n</div>\n",
1799 inputs: ['selectedIndex'],
1800 outputs: ['selectFocusedIndex', 'indexFocused'],
1801 encapsulation: core.ViewEncapsulation.None,
1802 // tslint:disable-next-line:validate-decorators
1803 changeDetection: core.ChangeDetectionStrategy.Default,
1804 host: {
1805 'class': 'mat-tab-header',
1806 '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',
1807 '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
1808 },
1809 styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-rtl .mat-tab-header-pagination-before,.mat-tab-header-pagination-after{padding-right:4px}.mat-tab-header-rtl .mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:\"\";height:8px;width:8px}.mat-tab-header-pagination-disabled{box-shadow:none;cursor:default}.mat-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable.mat-ink-bar{transition:none;animation:none}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}.cdk-high-contrast-active .mat-ink-bar{outline:solid 2px;height:0}.mat-tab-labels{display:flex}[mat-align-tabs=center]>.mat-tab-header .mat-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-tab-header .mat-tab-labels{justify-content:flex-end}.mat-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}._mat-animation-noopable.mat-tab-list{transition:none;animation:none}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:none}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.cdk-high-contrast-active .mat-tab-label:focus{outline:dotted 2px;outline-offset:-2px}.mat-tab-label.mat-tab-disabled{cursor:default}.cdk-high-contrast-active .mat-tab-label.mat-tab-disabled{opacity:.5}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}.cdk-high-contrast-active .mat-tab-label{opacity:1}@media(max-width: 599px){.mat-tab-label{min-width:72px}}\n"]
1810 },] }
1811 ];
1812 MatTabHeader.ctorParameters = function () { return [
1813 { type: core.ElementRef },
1814 { type: core.ChangeDetectorRef },
1815 { type: scrolling.ViewportRuler },
1816 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
1817 { type: core.NgZone },
1818 { type: platform.Platform },
1819 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1820 ]; };
1821 MatTabHeader.propDecorators = {
1822 _items: [{ type: core.ContentChildren, args: [MatTabLabelWrapper, { descendants: false },] }],
1823 _inkBar: [{ type: core.ViewChild, args: [MatInkBar, { static: true },] }],
1824 _tabListContainer: [{ type: core.ViewChild, args: ['tabListContainer', { static: true },] }],
1825 _tabList: [{ type: core.ViewChild, args: ['tabList', { static: true },] }],
1826 _nextPaginator: [{ type: core.ViewChild, args: ['nextPaginator',] }],
1827 _previousPaginator: [{ type: core.ViewChild, args: ['previousPaginator',] }]
1828 };
1829
1830 /**
1831 * Base class with all of the `MatTabNav` functionality.
1832 * @docs-private
1833 */
1834 var _MatTabNavBase = /** @class */ (function (_super) {
1835 __extends(_MatTabNavBase, _super);
1836 function _MatTabNavBase(elementRef, dir, ngZone, changeDetectorRef, viewportRuler, platform, animationMode) {
1837 var _this = _super.call(this, elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode) || this;
1838 _this._disableRipple = false;
1839 /** Theme color of the nav bar. */
1840 _this.color = 'primary';
1841 return _this;
1842 }
1843 Object.defineProperty(_MatTabNavBase.prototype, "backgroundColor", {
1844 /** Background color of the tab nav. */
1845 get: function () { return this._backgroundColor; },
1846 set: function (value) {
1847 var classList = this._elementRef.nativeElement.classList;
1848 classList.remove("mat-background-" + this.backgroundColor);
1849 if (value) {
1850 classList.add("mat-background-" + value);
1851 }
1852 this._backgroundColor = value;
1853 },
1854 enumerable: false,
1855 configurable: true
1856 });
1857 Object.defineProperty(_MatTabNavBase.prototype, "disableRipple", {
1858 /** Whether the ripple effect is disabled or not. */
1859 get: function () { return this._disableRipple; },
1860 set: function (value) { this._disableRipple = coercion.coerceBooleanProperty(value); },
1861 enumerable: false,
1862 configurable: true
1863 });
1864 _MatTabNavBase.prototype._itemSelected = function () {
1865 // noop
1866 };
1867 _MatTabNavBase.prototype.ngAfterContentInit = function () {
1868 var _this = this;
1869 // We need this to run before the `changes` subscription in parent to ensure that the
1870 // selectedIndex is up-to-date by the time the super class starts looking for it.
1871 this._items.changes.pipe(operators.startWith(null), operators.takeUntil(this._destroyed)).subscribe(function () {
1872 _this.updateActiveLink();
1873 });
1874 _super.prototype.ngAfterContentInit.call(this);
1875 };
1876 /** Notifies the component that the active link has been changed. */
1877 _MatTabNavBase.prototype.updateActiveLink = function () {
1878 if (!this._items) {
1879 return;
1880 }
1881 var items = this._items.toArray();
1882 for (var i = 0; i < items.length; i++) {
1883 if (items[i].active) {
1884 this.selectedIndex = i;
1885 this._changeDetectorRef.markForCheck();
1886 return;
1887 }
1888 }
1889 // The ink bar should hide itself if no items are active.
1890 this.selectedIndex = -1;
1891 this._inkBar.hide();
1892 };
1893 return _MatTabNavBase;
1894 }(MatPaginatedTabHeader));
1895 _MatTabNavBase.decorators = [
1896 { type: core.Directive }
1897 ];
1898 _MatTabNavBase.ctorParameters = function () { return [
1899 { type: core.ElementRef },
1900 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
1901 { type: core.NgZone },
1902 { type: core.ChangeDetectorRef },
1903 { type: scrolling.ViewportRuler },
1904 { type: platform.Platform },
1905 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1906 ]; };
1907 _MatTabNavBase.propDecorators = {
1908 backgroundColor: [{ type: core.Input }],
1909 disableRipple: [{ type: core.Input }],
1910 color: [{ type: core.Input }]
1911 };
1912 /**
1913 * Navigation component matching the styles of the tab group header.
1914 * Provides anchored navigation with animated ink bar.
1915 */
1916 var MatTabNav = /** @class */ (function (_super) {
1917 __extends(MatTabNav, _super);
1918 function MatTabNav(elementRef, dir, ngZone, changeDetectorRef, viewportRuler, platform, animationMode) {
1919 return _super.call(this, elementRef, dir, ngZone, changeDetectorRef, viewportRuler, platform, animationMode) || this;
1920 }
1921 return MatTabNav;
1922 }(_MatTabNavBase));
1923 MatTabNav.decorators = [
1924 { type: core.Component, args: [{
1925 selector: '[mat-tab-nav-bar]',
1926 exportAs: 'matTabNavBar, matTabNav',
1927 inputs: ['color'],
1928 template: "<div class=\"mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4\"\n #previousPaginator\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div\n class=\"mat-tab-list\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n #tabList\n (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-tab-links\">\n <ng-content></ng-content>\n </div>\n <mat-ink-bar></mat-ink-bar>\n </div>\n</div>\n\n<div class=\"mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4\"\n #nextPaginator\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-tab-header-pagination-chevron\"></div>\n</div>\n",
1929 host: {
1930 'class': 'mat-tab-nav-bar mat-tab-header',
1931 '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',
1932 '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
1933 '[class.mat-primary]': 'color !== "warn" && color !== "accent"',
1934 '[class.mat-accent]': 'color === "accent"',
1935 '[class.mat-warn]': 'color === "warn"',
1936 },
1937 encapsulation: core.ViewEncapsulation.None,
1938 // tslint:disable-next-line:validate-decorators
1939 changeDetection: core.ChangeDetectionStrategy.Default,
1940 styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-rtl .mat-tab-header-pagination-before,.mat-tab-header-pagination-after{padding-right:4px}.mat-tab-header-rtl .mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:\"\";height:8px;width:8px}.mat-tab-header-pagination-disabled{box-shadow:none;cursor:default}.mat-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-tab-links{display:flex}[mat-align-tabs=center]>.mat-tab-link-container .mat-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-tab-link-container .mat-tab-links{justify-content:flex-end}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable.mat-ink-bar{transition:none;animation:none}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}.cdk-high-contrast-active .mat-ink-bar{outline:solid 2px;height:0}.mat-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mat-tab-link{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;vertical-align:top;text-decoration:none;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}.mat-tab-link:focus{outline:none}.mat-tab-link:focus:not(.mat-tab-disabled){opacity:1}.cdk-high-contrast-active .mat-tab-link:focus{outline:dotted 2px;outline-offset:-2px}.mat-tab-link.mat-tab-disabled{cursor:default}.cdk-high-contrast-active .mat-tab-link.mat-tab-disabled{opacity:.5}.mat-tab-link .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}.cdk-high-contrast-active .mat-tab-link{opacity:1}[mat-stretch-tabs] .mat-tab-link{flex-basis:0;flex-grow:1}.mat-tab-link.mat-tab-disabled{pointer-events:none}@media(max-width: 599px){.mat-tab-link{min-width:72px}}\n"]
1941 },] }
1942 ];
1943 MatTabNav.ctorParameters = function () { return [
1944 { type: core.ElementRef },
1945 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
1946 { type: core.NgZone },
1947 { type: core.ChangeDetectorRef },
1948 { type: scrolling.ViewportRuler },
1949 { type: platform.Platform },
1950 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
1951 ]; };
1952 MatTabNav.propDecorators = {
1953 _items: [{ type: core.ContentChildren, args: [core.forwardRef(function () { return MatTabLink; }), { descendants: true },] }],
1954 _inkBar: [{ type: core.ViewChild, args: [MatInkBar, { static: true },] }],
1955 _tabListContainer: [{ type: core.ViewChild, args: ['tabListContainer', { static: true },] }],
1956 _tabList: [{ type: core.ViewChild, args: ['tabList', { static: true },] }],
1957 _nextPaginator: [{ type: core.ViewChild, args: ['nextPaginator',] }],
1958 _previousPaginator: [{ type: core.ViewChild, args: ['previousPaginator',] }]
1959 };
1960 // Boilerplate for applying mixins to MatTabLink.
1961 var _MatTabLinkMixinBase = core$1.mixinTabIndex(core$1.mixinDisableRipple(core$1.mixinDisabled(/** @class */ (function () {
1962 function class_1() {
1963 }
1964 return class_1;
1965 }()))));
1966 /** Base class with all of the `MatTabLink` functionality. */
1967 var _MatTabLinkBase = /** @class */ (function (_super) {
1968 __extends(_MatTabLinkBase, _super);
1969 function _MatTabLinkBase(_tabNavBar,
1970 /** @docs-private */ elementRef, globalRippleOptions, tabIndex, _focusMonitor, animationMode) {
1971 var _this = _super.call(this) || this;
1972 _this._tabNavBar = _tabNavBar;
1973 _this.elementRef = elementRef;
1974 _this._focusMonitor = _focusMonitor;
1975 /** Whether the tab link is active or not. */
1976 _this._isActive = false;
1977 _this.rippleConfig = globalRippleOptions || {};
1978 _this.tabIndex = parseInt(tabIndex) || 0;
1979 if (animationMode === 'NoopAnimations') {
1980 _this.rippleConfig.animation = { enterDuration: 0, exitDuration: 0 };
1981 }
1982 return _this;
1983 }
1984 Object.defineProperty(_MatTabLinkBase.prototype, "active", {
1985 /** Whether the link is active. */
1986 get: function () { return this._isActive; },
1987 set: function (value) {
1988 var newValue = coercion.coerceBooleanProperty(value);
1989 if (newValue !== this._isActive) {
1990 this._isActive = value;
1991 this._tabNavBar.updateActiveLink();
1992 }
1993 },
1994 enumerable: false,
1995 configurable: true
1996 });
1997 Object.defineProperty(_MatTabLinkBase.prototype, "rippleDisabled", {
1998 /**
1999 * Whether ripples are disabled on interaction.
2000 * @docs-private
2001 */
2002 get: function () {
2003 return this.disabled || this.disableRipple || this._tabNavBar.disableRipple ||
2004 !!this.rippleConfig.disabled;
2005 },
2006 enumerable: false,
2007 configurable: true
2008 });
2009 /** Focuses the tab link. */
2010 _MatTabLinkBase.prototype.focus = function () {
2011 this.elementRef.nativeElement.focus();
2012 };
2013 _MatTabLinkBase.prototype.ngAfterViewInit = function () {
2014 this._focusMonitor.monitor(this.elementRef);
2015 };
2016 _MatTabLinkBase.prototype.ngOnDestroy = function () {
2017 this._focusMonitor.stopMonitoring(this.elementRef);
2018 };
2019 _MatTabLinkBase.prototype._handleFocus = function () {
2020 // Since we allow navigation through tabbing in the nav bar, we
2021 // have to update the focused index whenever the link receives focus.
2022 this._tabNavBar.focusIndex = this._tabNavBar._items.toArray().indexOf(this);
2023 };
2024 return _MatTabLinkBase;
2025 }(_MatTabLinkMixinBase));
2026 _MatTabLinkBase.decorators = [
2027 { type: core.Directive }
2028 ];
2029 _MatTabLinkBase.ctorParameters = function () { return [
2030 { type: _MatTabNavBase },
2031 { type: core.ElementRef },
2032 { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_RIPPLE_GLOBAL_OPTIONS,] }] },
2033 { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
2034 { type: a11y.FocusMonitor },
2035 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
2036 ]; };
2037 _MatTabLinkBase.propDecorators = {
2038 active: [{ type: core.Input }]
2039 };
2040 /**
2041 * Link inside of a `mat-tab-nav-bar`.
2042 */
2043 var MatTabLink = /** @class */ (function (_super) {
2044 __extends(MatTabLink, _super);
2045 function MatTabLink(tabNavBar, elementRef, ngZone, platform, globalRippleOptions, tabIndex, focusMonitor, animationMode) {
2046 var _this = _super.call(this, tabNavBar, elementRef, globalRippleOptions, tabIndex, focusMonitor, animationMode) || this;
2047 _this._tabLinkRipple = new core$1.RippleRenderer(_this, ngZone, elementRef, platform);
2048 _this._tabLinkRipple.setupTriggerEvents(elementRef.nativeElement);
2049 return _this;
2050 }
2051 MatTabLink.prototype.ngOnDestroy = function () {
2052 _super.prototype.ngOnDestroy.call(this);
2053 this._tabLinkRipple._removeTriggerEvents();
2054 };
2055 return MatTabLink;
2056 }(_MatTabLinkBase));
2057 MatTabLink.decorators = [
2058 { type: core.Directive, args: [{
2059 selector: '[mat-tab-link], [matTabLink]',
2060 exportAs: 'matTabLink',
2061 inputs: ['disabled', 'disableRipple', 'tabIndex'],
2062 host: {
2063 'class': 'mat-tab-link mat-focus-indicator',
2064 '[attr.aria-current]': 'active ? "page" : null',
2065 '[attr.aria-disabled]': 'disabled',
2066 '[attr.tabIndex]': 'tabIndex',
2067 '[class.mat-tab-disabled]': 'disabled',
2068 '[class.mat-tab-label-active]': 'active',
2069 '(focus)': '_handleFocus()'
2070 }
2071 },] }
2072 ];
2073 MatTabLink.ctorParameters = function () { return [
2074 { type: MatTabNav },
2075 { type: core.ElementRef },
2076 { type: core.NgZone },
2077 { type: platform.Platform },
2078 { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_RIPPLE_GLOBAL_OPTIONS,] }] },
2079 { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
2080 { type: a11y.FocusMonitor },
2081 { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
2082 ]; };
2083
2084 /**
2085 * @license
2086 * Copyright Google LLC All Rights Reserved.
2087 *
2088 * Use of this source code is governed by an MIT-style license that can be
2089 * found in the LICENSE file at https://angular.io/license
2090 */
2091 var MatTabsModule = /** @class */ (function () {
2092 function MatTabsModule() {
2093 }
2094 return MatTabsModule;
2095 }());
2096 MatTabsModule.decorators = [
2097 { type: core.NgModule, args: [{
2098 imports: [
2099 common.CommonModule,
2100 core$1.MatCommonModule,
2101 portal.PortalModule,
2102 core$1.MatRippleModule,
2103 observers.ObserversModule,
2104 a11y.A11yModule,
2105 ],
2106 // Don't export all components because some are only to be used internally.
2107 exports: [
2108 core$1.MatCommonModule,
2109 MatTabGroup,
2110 MatTabLabel,
2111 MatTab,
2112 MatTabNav,
2113 MatTabLink,
2114 MatTabContent,
2115 ],
2116 declarations: [
2117 MatTabGroup,
2118 MatTabLabel,
2119 MatTab,
2120 MatInkBar,
2121 MatTabLabelWrapper,
2122 MatTabNav,
2123 MatTabLink,
2124 MatTabBody,
2125 MatTabBodyPortal,
2126 MatTabHeader,
2127 MatTabContent,
2128 ],
2129 },] }
2130 ];
2131
2132 /**
2133 * @license
2134 * Copyright Google LLC All Rights Reserved.
2135 *
2136 * Use of this source code is governed by an MIT-style license that can be
2137 * found in the LICENSE file at https://angular.io/license
2138 */
2139
2140 /**
2141 * @license
2142 * Copyright Google LLC All Rights Reserved.
2143 *
2144 * Use of this source code is governed by an MIT-style license that can be
2145 * found in the LICENSE file at https://angular.io/license
2146 */
2147
2148 /**
2149 * Generated bundle index. Do not edit.
2150 */
2151
2152 exports.MAT_TAB = MAT_TAB;
2153 exports.MAT_TABS_CONFIG = MAT_TABS_CONFIG;
2154 exports.MAT_TAB_GROUP = MAT_TAB_GROUP;
2155 exports.MatInkBar = MatInkBar;
2156 exports.MatTab = MatTab;
2157 exports.MatTabBody = MatTabBody;
2158 exports.MatTabBodyPortal = MatTabBodyPortal;
2159 exports.MatTabChangeEvent = MatTabChangeEvent;
2160 exports.MatTabContent = MatTabContent;
2161 exports.MatTabGroup = MatTabGroup;
2162 exports.MatTabHeader = MatTabHeader;
2163 exports.MatTabLabel = MatTabLabel;
2164 exports.MatTabLabelWrapper = MatTabLabelWrapper;
2165 exports.MatTabLink = MatTabLink;
2166 exports.MatTabNav = MatTabNav;
2167 exports.MatTabsModule = MatTabsModule;
2168 exports._MAT_INK_BAR_POSITIONER = _MAT_INK_BAR_POSITIONER;
2169 exports._MatTabBodyBase = _MatTabBodyBase;
2170 exports._MatTabGroupBase = _MatTabGroupBase;
2171 exports._MatTabHeaderBase = _MatTabHeaderBase;
2172 exports._MatTabLinkBase = _MatTabLinkBase;
2173 exports._MatTabNavBase = _MatTabNavBase;
2174 exports.matTabsAnimations = matTabsAnimations;
2175 exports.ɵangular_material_src_material_tabs_tabs_a = _MAT_INK_BAR_POSITIONER_FACTORY;
2176 exports.ɵangular_material_src_material_tabs_tabs_b = MAT_TAB_LABEL;
2177 exports.ɵangular_material_src_material_tabs_tabs_c = MAT_TAB_CONTENT;
2178 exports.ɵangular_material_src_material_tabs_tabs_d = MatPaginatedTabHeader;
2179
2180 Object.defineProperty(exports, '__esModule', { value: true });
2181
2182})));
2183//# sourceMappingURL=material-tabs.umd.js.map
Note: See TracBrowser for help on using the repository browser.