mat-color-picker
Version:
<span class="badge-npmversion">[](https://badge.fury.io/js/mat-color-picker)</span> <span class="badge-npmdownloads"><a href="https://npmjs.org/package/mat-color-picker" title="View this project
34,425 lines • 1.5 MB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('rxjs/Subject'), require('rxjs/Observable'), require('@angular/platform-browser'), require('@angular/cdk/platform'), require('@angular/cdk/keycodes'), require('@angular/cdk/a11y'), require('rxjs/observable/fromEvent'), require('@angular/animations'), require('rxjs/observable/defer'), require('rxjs/observable/merge'), require('rxjs/observable/of'), require('@angular/cdk/collections'), require('@angular/cdk/observers'), require('rxjs/Subscription'), require('@angular/common/http'), require('rxjs/observable/forkJoin'), require('rxjs/observable/throw'), require('rxjs/observable/combineLatest'), require('rxjs/observable/fromEventPattern'), require('@angular/cdk/scrolling'), require('@angular/cdk/table'), require('@angular/cdk/stepper'), require('rxjs/BehaviorSubject'), require('rxjs/observable/empty')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/cdk/portal', '@angular/cdk/overlay', '@angular/cdk/bidi', '@angular/cdk/coercion', 'rxjs/Subject', 'rxjs/Observable', '@angular/platform-browser', '@angular/cdk/platform', '@angular/cdk/keycodes', '@angular/cdk/a11y', 'rxjs/observable/fromEvent', '@angular/animations', 'rxjs/observable/defer', 'rxjs/observable/merge', 'rxjs/observable/of', '@angular/cdk/collections', '@angular/cdk/observers', 'rxjs/Subscription', '@angular/common/http', 'rxjs/observable/forkJoin', 'rxjs/observable/throw', 'rxjs/observable/combineLatest', 'rxjs/observable/fromEventPattern', '@angular/cdk/scrolling', '@angular/cdk/table', '@angular/cdk/stepper', 'rxjs/BehaviorSubject', 'rxjs/observable/empty'], factory) :
(factory((global['mat-color-picker'] = {}),global.ng.core,global.ng.common,global.ng.forms,global.ng.cdk.portal,global.ng.cdk.overlay,global.ng.cdk.bidi,global.ng.cdk.coercion,global.Rx,global.Rx,global.ng.platformBrowser,global.ng.cdk.platform,global.ng.cdk.keycodes,global.ng.cdk.a11y,global.Rx.Observable,global.ng.animations,global.Rx.Observable,global.Rx.Observable,global.Rx.Observable,global.ng.cdk.collections,global.ng.cdk.observers,global.Rx,global.ng.common.http,global.Rx.Observable,global.Rx.Observable,global.Rx.Observable,global.Rx.Observable,global.ng.cdk.scrolling,global.ng.cdk.table,global.ng.cdk.stepper,global.Rx,global.Rx.Observable));
}(this, (function (exports,core,common,forms,portal,overlay,bidi,coercion,Subject,Observable,platformBrowser,platform,keycodes,a11y,fromEvent,animations,defer,merge,of,collections,observers,Subscription,http,forkJoin,_throw,combineLatest,fromEventPattern,scrolling,table,stepper,BehaviorSubject,empty) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var AnimationCurves = (function () {
function AnimationCurves() {
}
AnimationCurves.STANDARD_CURVE = 'cubic-bezier(0.4,0.0,0.2,1)';
AnimationCurves.DECELERATION_CURVE = 'cubic-bezier(0.0,0.0,0.2,1)';
AnimationCurves.ACCELERATION_CURVE = 'cubic-bezier(0.4,0.0,1,1)';
AnimationCurves.SHARP_CURVE = 'cubic-bezier(0.4,0.0,0.6,1)';
return AnimationCurves;
}());
/**
* \@docs-private
*/
var AnimationDurations = (function () {
function AnimationDurations() {
}
AnimationDurations.COMPLEX = '375ms';
AnimationDurations.ENTERING = '225ms';
AnimationDurations.EXITING = '195ms';
return AnimationDurations;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Injection token that configures whether the Material sanity checks are enabled.
*/
var MATERIAL_SANITY_CHECKS = new core.InjectionToken('mat-sanity-checks');
/**
* Module that captures anything that should be loaded and/or run for *all* Angular Material
* components. This includes Bidi, etc.
*
* This module should be imported to each top-level component module (e.g., MatTabsModule).
*/
var MatCommonModule = (function () {
function MatCommonModule(_sanityChecksEnabled) {
this._sanityChecksEnabled = _sanityChecksEnabled;
/**
* Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype).
*/
this._hasDoneGlobalChecks = false;
/**
* Whether we've already checked for HammerJs availability.
*/
this._hasCheckedHammer = false;
/**
* Reference to the global `document` object.
*/
this._document = typeof document === 'object' && document ? document : null;
/**
* Reference to the global 'window' object.
*/
this._window = typeof window === 'object' && window ? window : null;
if (this._areChecksEnabled() && !this._hasDoneGlobalChecks) {
this._checkDoctypeIsDefined();
this._checkThemeIsPresent();
this._hasDoneGlobalChecks = true;
}
}
/**
* Whether any sanity checks are enabled
* @return {?}
*/
MatCommonModule.prototype._areChecksEnabled = /**
* Whether any sanity checks are enabled
* @return {?}
*/
function () {
return this._sanityChecksEnabled && core.isDevMode() && !this._isTestEnv();
};
/**
* Whether the code is running in tests.
* @return {?}
*/
MatCommonModule.prototype._isTestEnv = /**
* Whether the code is running in tests.
* @return {?}
*/
function () {
return this._window && (this._window['__karma__'] || this._window['jasmine']);
};
/**
* @return {?}
*/
MatCommonModule.prototype._checkDoctypeIsDefined = /**
* @return {?}
*/
function () {
if (this._document && !this._document.doctype) {
console.warn('Current document does not have a doctype. This may cause ' +
'some Angular Material components not to behave as expected.');
}
};
/**
* @return {?}
*/
MatCommonModule.prototype._checkThemeIsPresent = /**
* @return {?}
*/
function () {
if (this._document && typeof getComputedStyle === 'function') {
var /** @type {?} */ testElement = this._document.createElement('div');
testElement.classList.add('mat-theme-loaded-marker');
this._document.body.appendChild(testElement);
var /** @type {?} */ computedStyle = getComputedStyle(testElement);
// In some situations, the computed style of the test element can be null. For example in
// Firefox, the computed style is null if an application is running inside of a hidden iframe.
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397
if (computedStyle && computedStyle.display !== 'none') {
console.warn('Could not find Angular Material core theme. Most Material ' +
'components may not work as expected. For more info refer ' +
'to the theming guide: https://material.angular.io/guide/theming');
}
this._document.body.removeChild(testElement);
}
};
/** Checks whether HammerJS is available. */
/**
* Checks whether HammerJS is available.
* @return {?}
*/
MatCommonModule.prototype._checkHammerIsAvailable = /**
* Checks whether HammerJS is available.
* @return {?}
*/
function () {
if (this._hasCheckedHammer || !this._window) {
return;
}
if (this._areChecksEnabled() && !this._window['Hammer']) {
console.warn('Could not find HammerJS. Certain Angular Material components may not work correctly.');
}
this._hasCheckedHammer = true;
};
MatCommonModule.decorators = [
{ type: core.NgModule, args: [{
imports: [bidi.BidiModule],
exports: [bidi.BidiModule],
providers: [{
provide: MATERIAL_SANITY_CHECKS, useValue: true,
}],
},] },
];
/** @nocollapse */
MatCommonModule.ctorParameters = function () {
return [
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MATERIAL_SANITY_CHECKS,] },] },
];
};
return MatCommonModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @record
*/
/**
* Mixin to augment a directive with a `disabled` property.
* @template T
* @param {?} base
* @return {?}
*/
function mixinDisabled(base) {
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
_this._disabled = false;
return _this;
}
Object.defineProperty(class_1.prototype, "disabled", {
get: /**
* @return {?}
*/ function () { return this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._disabled = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
return class_1;
}(base));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @record
*/
/**
* \@docs-private
* @record
*/
/**
* Mixin to augment a directive with a `color` property.
* @template T
* @param {?} base
* @param {?=} defaultColor
* @return {?}
*/
function mixinColor(base, defaultColor) {
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
// Set the default color that can be specified from the mixin.
// Set the default color that can be specified from the mixin.
_this.color = defaultColor;
return _this;
}
Object.defineProperty(class_1.prototype, "color", {
get: /**
* @return {?}
*/ function () { return this._color; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ colorPalette = value || defaultColor;
if (colorPalette !== this._color) {
if (this._color) {
this._elementRef.nativeElement.classList.remove("mat-" + this._color);
}
if (colorPalette) {
this._elementRef.nativeElement.classList.add("mat-" + colorPalette);
}
this._color = colorPalette;
}
},
enumerable: true,
configurable: true
});
return class_1;
}(base));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @record
*/
/**
* Mixin to augment a directive with a `disableRipple` property.
* @template T
* @param {?} base
* @return {?}
*/
function mixinDisableRipple(base) {
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
_this._disableRipple = false;
return _this;
}
Object.defineProperty(class_1.prototype, "disableRipple", {
/** Whether the ripple effect is disabled or not. */
get: /**
* Whether the ripple effect is disabled or not.
* @return {?}
*/ function () { return this._disableRipple; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._disableRipple = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
return class_1;
}(base));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @record
*/
/**
* Mixin to augment a directive with a `tabIndex` property.
* @template T
* @param {?} base
* @param {?=} defaultTabIndex
* @return {?}
*/
function mixinTabIndex(base, defaultTabIndex) {
if (defaultTabIndex === void 0) {
defaultTabIndex = 0;
}
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
_this._tabIndex = defaultTabIndex;
return _this;
}
Object.defineProperty(class_1.prototype, "tabIndex", {
get: /**
* @return {?}
*/ function () { return this.disabled ? -1 : this._tabIndex; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
// If the specified tabIndex value is null or undefined, fall back to the default value.
this._tabIndex = value != null ? value : defaultTabIndex;
},
enumerable: true,
configurable: true
});
return class_1;
}(base));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @record
*/
/**
* \@docs-private
* @record
*/
/**
* Mixin to augment a directive with updateErrorState method.
* For component with `errorState` and need to update `errorState`.
* @template T
* @param {?} base
* @return {?}
*/
function mixinErrorState(base) {
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
/**
* Whether the component is in an error state.
*/
_this.errorState = false;
/**
* Stream that emits whenever the state of the input changes such that the wrapping
* `MatFormField` needs to run change detection.
*/
_this.stateChanges = new Subject.Subject();
return _this;
}
/**
* @return {?}
*/
class_1.prototype.updateErrorState = /**
* @return {?}
*/
function () {
var /** @type {?} */ oldState = this.errorState;
var /** @type {?} */ parent = this._parentFormGroup || this._parentForm;
var /** @type {?} */ matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
var /** @type {?} */ control = this.ngControl ? /** @type {?} */ (this.ngControl.control) : null;
var /** @type {?} */ newState = matcher.isErrorState(control, parent);
if (newState !== oldState) {
this.errorState = newState;
this.stateChanges.next();
}
};
return class_1;
}(base));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* InjectionToken for datepicker that can be used to override default locale code.
*/
var MAT_DATE_LOCALE = new core.InjectionToken('MAT_DATE_LOCALE');
/**
* Adapts type `D` to be usable as a date by cdk-based components that work with dates.
* @abstract
*/
var DateAdapter = (function () {
function DateAdapter() {
this._localeChanges = new Subject.Subject();
}
Object.defineProperty(DateAdapter.prototype, "localeChanges", {
/** A stream that emits when the locale changes. */
get: /**
* A stream that emits when the locale changes.
* @return {?}
*/ function () { return this._localeChanges; },
enumerable: true,
configurable: true
});
/**
* Attempts to deserialize a value to a valid date object. This is different from parsing in that
* deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
* string). The default implementation does not allow any deserialization, it simply checks that
* the given value is already a valid date object or null. The `<mat-datepicker>` will call this
* method on all of it's `@Input()` properties that accept dates. It is therefore possible to
* support passing values from your backend directly to these properties by overriding this method
* to also deserialize the format used by your backend.
* @param value The value to be deserialized into a date object.
* @returns The deserialized date object, either a valid date, null if the value can be
* deserialized into a null date (e.g. the empty string), or an invalid date.
*/
/**
* Attempts to deserialize a value to a valid date object. This is different from parsing in that
* deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
* string). The default implementation does not allow any deserialization, it simply checks that
* the given value is already a valid date object or null. The `<mat-datepicker>` will call this
* method on all of it's `\@Input()` properties that accept dates. It is therefore possible to
* support passing values from your backend directly to these properties by overriding this method
* to also deserialize the format used by your backend.
* @param {?} value The value to be deserialized into a date object.
* @return {?} The deserialized date object, either a valid date, null if the value can be
* deserialized into a null date (e.g. the empty string), or an invalid date.
*/
DateAdapter.prototype.deserialize = /**
* Attempts to deserialize a value to a valid date object. This is different from parsing in that
* deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
* string). The default implementation does not allow any deserialization, it simply checks that
* the given value is already a valid date object or null. The `<mat-datepicker>` will call this
* method on all of it's `\@Input()` properties that accept dates. It is therefore possible to
* support passing values from your backend directly to these properties by overriding this method
* to also deserialize the format used by your backend.
* @param {?} value The value to be deserialized into a date object.
* @return {?} The deserialized date object, either a valid date, null if the value can be
* deserialized into a null date (e.g. the empty string), or an invalid date.
*/
function (value) {
if (value == null || this.isDateInstance(value) && this.isValid(value)) {
return value;
}
return this.invalid();
};
/**
* Sets the locale used for all dates.
* @param locale The new locale.
*/
/**
* Sets the locale used for all dates.
* @param {?} locale The new locale.
* @return {?}
*/
DateAdapter.prototype.setLocale = /**
* Sets the locale used for all dates.
* @param {?} locale The new locale.
* @return {?}
*/
function (locale) {
this.locale = locale;
this._localeChanges.next();
};
/**
* Compares two dates.
* @param first The first date to compare.
* @param second The second date to compare.
* @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,
* a number greater than 0 if the first date is later.
*/
/**
* Compares two dates.
* @param {?} first The first date to compare.
* @param {?} second The second date to compare.
* @return {?} 0 if the dates are equal, a number less than 0 if the first date is earlier,
* a number greater than 0 if the first date is later.
*/
DateAdapter.prototype.compareDate = /**
* Compares two dates.
* @param {?} first The first date to compare.
* @param {?} second The second date to compare.
* @return {?} 0 if the dates are equal, a number less than 0 if the first date is earlier,
* a number greater than 0 if the first date is later.
*/
function (first, second) {
return this.getYear(first) - this.getYear(second) ||
this.getMonth(first) - this.getMonth(second) ||
this.getDate(first) - this.getDate(second);
};
/**
* Checks if two dates are equal.
* @param first The first date to check.
* @param second The second date to check.
* @returns Whether the two dates are equal.
* Null dates are considered equal to other null dates.
*/
/**
* Checks if two dates are equal.
* @param {?} first The first date to check.
* @param {?} second The second date to check.
* @return {?} Whether the two dates are equal.
* Null dates are considered equal to other null dates.
*/
DateAdapter.prototype.sameDate = /**
* Checks if two dates are equal.
* @param {?} first The first date to check.
* @param {?} second The second date to check.
* @return {?} Whether the two dates are equal.
* Null dates are considered equal to other null dates.
*/
function (first, second) {
if (first && second) {
var /** @type {?} */ firstValid = this.isValid(first);
var /** @type {?} */ secondValid = this.isValid(second);
if (firstValid && secondValid) {
return !this.compareDate(first, second);
}
return firstValid == secondValid;
}
return first == second;
};
/**
* Clamp the given date between min and max dates.
* @param date The date to clamp.
* @param min The minimum value to allow. If null or omitted no min is enforced.
* @param max The maximum value to allow. If null or omitted no max is enforced.
* @returns `min` if `date` is less than `min`, `max` if date is greater than `max`,
* otherwise `date`.
*/
/**
* Clamp the given date between min and max dates.
* @param {?} date The date to clamp.
* @param {?=} min The minimum value to allow. If null or omitted no min is enforced.
* @param {?=} max The maximum value to allow. If null or omitted no max is enforced.
* @return {?} `min` if `date` is less than `min`, `max` if date is greater than `max`,
* otherwise `date`.
*/
DateAdapter.prototype.clampDate = /**
* Clamp the given date between min and max dates.
* @param {?} date The date to clamp.
* @param {?=} min The minimum value to allow. If null or omitted no min is enforced.
* @param {?=} max The maximum value to allow. If null or omitted no max is enforced.
* @return {?} `min` if `date` is less than `min`, `max` if date is greater than `max`,
* otherwise `date`.
*/
function (date, min, max) {
if (min && this.compareDate(date, min) < 0) {
return min;
}
if (max && this.compareDate(date, max) > 0) {
return max;
}
return date;
};
return DateAdapter;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MAT_DATE_FORMATS = new core.InjectionToken('mat-date-formats');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Whether the browser supports the Intl API.
*/
var SUPPORTS_INTL_API = typeof Intl != 'undefined';
/**
* The default month names to use if Intl API is not available.
*/
var DEFAULT_MONTH_NAMES = {
'long': [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'
],
'short': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
'narrow': ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
};
var ɵ0$1 = function (i) { return String(i + 1); };
/**
* The default date names to use if Intl API is not available.
*/
var DEFAULT_DATE_NAMES = range(31, ɵ0$1);
/**
* The default day of the week names to use if Intl API is not available.
*/
var DEFAULT_DAY_OF_WEEK_NAMES = {
'long': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
'short': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
'narrow': ['S', 'M', 'T', 'W', 'T', 'F', 'S']
};
/**
* Matches strings that have the form of a valid RFC 3339 string
* (https://tools.ietf.org/html/rfc3339). Note that the string may not actually be a valid date
* because the regex will match strings an with out of bounds month, date, etc.
*/
var ISO_8601_REGEX = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
/**
* Creates an array and fills it with values.
* @template T
* @param {?} length
* @param {?} valueFunction
* @return {?}
*/
function range(length, valueFunction) {
var /** @type {?} */ valuesArray = Array(length);
for (var /** @type {?} */ i = 0; i < length; i++) {
valuesArray[i] = valueFunction(i);
}
return valuesArray;
}
/**
* Adapts the native JS Date for use with cdk-based components that work with dates.
*/
var NativeDateAdapter = (function (_super) {
__extends(NativeDateAdapter, _super);
function NativeDateAdapter(matDateLocale) {
var _this = _super.call(this) || this;
_super.prototype.setLocale.call(_this, matDateLocale);
// IE does its own time zone correction, so we disable this on IE.
// TODO(mmalerba): replace with checks from PLATFORM, logic currently duplicated to avoid
// breaking change from injecting the Platform.
var /** @type {?} */ isBrowser = typeof document === 'object' && !!document;
var /** @type {?} */ isIE = isBrowser && /(msie|trident)/i.test(navigator.userAgent);
_this.useUtcForDisplay = !isIE;
_this._clampDate = isIE || (isBrowser && /(edge)/i.test(navigator.userAgent));
return _this;
}
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.getYear = /**
* @param {?} date
* @return {?}
*/
function (date) {
return date.getFullYear();
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.getMonth = /**
* @param {?} date
* @return {?}
*/
function (date) {
return date.getMonth();
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.getDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
return date.getDate();
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.getDayOfWeek = /**
* @param {?} date
* @return {?}
*/
function (date) {
return date.getDay();
};
/**
* @param {?} style
* @return {?}
*/
NativeDateAdapter.prototype.getMonthNames = /**
* @param {?} style
* @return {?}
*/
function (style$$1) {
var _this = this;
if (SUPPORTS_INTL_API) {
var /** @type {?} */ dtf_1 = new Intl.DateTimeFormat(this.locale, { month: style$$1 });
return range(12, function (i) { return _this._stripDirectionalityCharacters(dtf_1.format(new Date(2017, i, 1))); });
}
return DEFAULT_MONTH_NAMES[style$$1];
};
/**
* @return {?}
*/
NativeDateAdapter.prototype.getDateNames = /**
* @return {?}
*/
function () {
var _this = this;
if (SUPPORTS_INTL_API) {
var /** @type {?} */ dtf_2 = new Intl.DateTimeFormat(this.locale, { day: 'numeric' });
return range(31, function (i) {
return _this._stripDirectionalityCharacters(dtf_2.format(new Date(2017, 0, i + 1)));
});
}
return DEFAULT_DATE_NAMES;
};
/**
* @param {?} style
* @return {?}
*/
NativeDateAdapter.prototype.getDayOfWeekNames = /**
* @param {?} style
* @return {?}
*/
function (style$$1) {
var _this = this;
if (SUPPORTS_INTL_API) {
var /** @type {?} */ dtf_3 = new Intl.DateTimeFormat(this.locale, { weekday: style$$1 });
return range(7, function (i) {
return _this._stripDirectionalityCharacters(dtf_3.format(new Date(2017, 0, i + 1)));
});
}
return DEFAULT_DAY_OF_WEEK_NAMES[style$$1];
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.getYearName = /**
* @param {?} date
* @return {?}
*/
function (date) {
if (SUPPORTS_INTL_API) {
var /** @type {?} */ dtf = new Intl.DateTimeFormat(this.locale, { year: 'numeric' });
return this._stripDirectionalityCharacters(dtf.format(date));
}
return String(this.getYear(date));
};
/**
* @return {?}
*/
NativeDateAdapter.prototype.getFirstDayOfWeek = /**
* @return {?}
*/
function () {
// We can't tell using native JS Date what the first day of the week is, we default to Sunday.
return 0;
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.getNumDaysInMonth = /**
* @param {?} date
* @return {?}
*/
function (date) {
return this.getDate(this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + 1, 0));
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.clone = /**
* @param {?} date
* @return {?}
*/
function (date) {
return this.createDate(this.getYear(date), this.getMonth(date), this.getDate(date));
};
/**
* @param {?} year
* @param {?} month
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.createDate = /**
* @param {?} year
* @param {?} month
* @param {?} date
* @return {?}
*/
function (year, month, date) {
// Check for invalid month and date (except upper bound on date which we have to check after
// creating the Date).
if (month < 0 || month > 11) {
throw Error("Invalid month index \"" + month + "\". Month index has to be between 0 and 11.");
}
if (date < 1) {
throw Error("Invalid date \"" + date + "\". Date has to be greater than 0.");
}
var /** @type {?} */ result = this._createDateWithOverflow(year, month, date);
// Check that the date wasn't above the upper bound for the month, causing the month to overflow
if (result.getMonth() != month) {
throw Error("Invalid date \"" + date + "\" for month with index \"" + month + "\".");
}
return result;
};
/**
* @return {?}
*/
NativeDateAdapter.prototype.today = /**
* @return {?}
*/
function () {
return new Date();
};
/**
* @param {?} value
* @return {?}
*/
NativeDateAdapter.prototype.parse = /**
* @param {?} value
* @return {?}
*/
function (value) {
// We have no way using the native JS Date to set the parse format or locale, so we ignore these
// parameters.
if (typeof value == 'number') {
return new Date(value);
}
return value ? new Date(Date.parse(value)) : null;
};
/**
* @param {?} date
* @param {?} displayFormat
* @return {?}
*/
NativeDateAdapter.prototype.format = /**
* @param {?} date
* @param {?} displayFormat
* @return {?}
*/
function (date, displayFormat) {
if (!this.isValid(date)) {
throw Error('NativeDateAdapter: Cannot format invalid date.');
}
if (SUPPORTS_INTL_API) {
// On IE and Edge the i18n API will throw a hard error that can crash the entire app
// if we attempt to format a date whose year is less than 1 or greater than 9999.
if (this._clampDate && (date.getFullYear() < 1 || date.getFullYear() > 9999)) {
date = this.clone(date);
date.setFullYear(Math.max(1, Math.min(9999, date.getFullYear())));
}
if (this.useUtcForDisplay) {
date = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
displayFormat = __assign({}, displayFormat, { timeZone: 'utc' });
}
var /** @type {?} */ dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
return this._stripDirectionalityCharacters(dtf.format(date));
}
return this._stripDirectionalityCharacters(date.toDateString());
};
/**
* @param {?} date
* @param {?} years
* @return {?}
*/
NativeDateAdapter.prototype.addCalendarYears = /**
* @param {?} date
* @param {?} years
* @return {?}
*/
function (date, years) {
return this.addCalendarMonths(date, years * 12);
};
/**
* @param {?} date
* @param {?} months
* @return {?}
*/
NativeDateAdapter.prototype.addCalendarMonths = /**
* @param {?} date
* @param {?} months
* @return {?}
*/
function (date, months) {
var /** @type {?} */ newDate = this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + months, this.getDate(date));
// It's possible to wind up in the wrong month if the original month has more days than the new
// month. In this case we want to go to the last day of the desired month.
// Note: the additional + 12 % 12 ensures we end up with a positive number, since JS % doesn't
// guarantee this.
if (this.getMonth(newDate) != ((this.getMonth(date) + months) % 12 + 12) % 12) {
newDate = this._createDateWithOverflow(this.getYear(newDate), this.getMonth(newDate), 0);
}
return newDate;
};
/**
* @param {?} date
* @param {?} days
* @return {?}
*/
NativeDateAdapter.prototype.addCalendarDays = /**
* @param {?} date
* @param {?} days
* @return {?}
*/
function (date, days) {
return this._createDateWithOverflow(this.getYear(date), this.getMonth(date), this.getDate(date) + days);
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.toIso8601 = /**
* @param {?} date
* @return {?}
*/
function (date) {
return [
date.getUTCFullYear(),
this._2digit(date.getUTCMonth() + 1),
this._2digit(date.getUTCDate())
].join('-');
};
/**
* Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings
* (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an
* invalid date for all other values.
*/
/**
* Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings
* (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an
* invalid date for all other values.
* @param {?} value
* @return {?}
*/
NativeDateAdapter.prototype.deserialize = /**
* Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings
* (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an
* invalid date for all other values.
* @param {?} value
* @return {?}
*/
function (value) {
if (typeof value === 'string') {
if (!value) {
return null;
}
// The `Date` constructor accepts formats other than ISO 8601, so we need to make sure the
// string is the right format first.
if (ISO_8601_REGEX.test(value)) {
var /** @type {?} */ date = new Date(value);
if (this.isValid(date)) {
return date;
}
}
}
return _super.prototype.deserialize.call(this, value);
};
/**
* @param {?} obj
* @return {?}
*/
NativeDateAdapter.prototype.isDateInstance = /**
* @param {?} obj
* @return {?}
*/
function (obj) {
return obj instanceof Date;
};
/**
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype.isValid = /**
* @param {?} date
* @return {?}
*/
function (date) {
return !isNaN(date.getTime());
};
/**
* @return {?}
*/
NativeDateAdapter.prototype.invalid = /**
* @return {?}
*/
function () {
return new Date(NaN);
};
/**
* Creates a date but allows the month and date to overflow.
* @param {?} year
* @param {?} month
* @param {?} date
* @return {?}
*/
NativeDateAdapter.prototype._createDateWithOverflow = /**
* Creates a date but allows the month and date to overflow.
* @param {?} year
* @param {?} month
* @param {?} date
* @return {?}
*/
function (year, month, date) {
var /** @type {?} */ result = new Date(year, month, date);
// We need to correct for the fact that JS native Date treats years in range [0, 99] as
// abbreviations for 19xx.
if (year >= 0 && year < 100) {
result.setFullYear(this.getYear(result) - 1900);
}
return result;
};
/**
* Pads a number to make it two digits.
* @param {?} n The number to pad.
* @return {?} The padded number.
*/
NativeDateAdapter.prototype._2digit = /**
* Pads a number to make it two digits.
* @param {?} n The number to pad.
* @return {?} The padded number.
*/
function (n) {
return ('00' + n).slice(-2);
};
/**
* Strip out unicode LTR and RTL characters. Edge and IE insert these into formatted dates while
* other browsers do not. We remove them to make output consistent and because they interfere with
* date parsing.
* @param {?} str The string to strip direction characters from.
* @return {?} The stripped string.
*/
NativeDateAdapter.prototype._stripDirectionalityCharacters = /**
* Strip out unicode LTR and RTL characters. Edge and IE insert these into formatted dates while
* other browsers do not. We remove them to make output consistent and because they interfere with
* date parsing.
* @param {?} str The string to strip direction characters from.
* @return {?} The stripped string.
*/
function (str) {
return str.replace(/[\u200e\u200f]/g, '');
};
NativeDateAdapter.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
NativeDateAdapter.ctorParameters = function () {
return [
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_LOCALE,] },] },
];
};
return NativeDateAdapter;
}(DateAdapter));
/**
* Provider that defines how form controls behave with regards to displaying error messages.
*/
var ErrorStateMatcher = (function () {
function ErrorStateMatcher() {
}
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
ErrorStateMatcher.prototype.isErrorState = /**
* @param {?} control
* @param {?} form
* @return {?}
*/
function (control, form) {
return !!(control && control.invalid && (control.touched || (form && form.submitted)));
};
ErrorStateMatcher.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
ErrorStateMatcher.ctorParameters = function () { return []; };
return ErrorStateMatcher;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Injection token that can be used to provide options to the Hammerjs instance.
* More info at http://hammerjs.github.io/api/.
*/
var MAT_HAMMER_OPTIONS = new core.InjectionToken('MAT_HAMMER_OPTIONS');
/**
* Adjusts configuration of our gesture library, Hammer.
*/
var GestureConfig = (function (_super) {
__extends(GestureConfig, _super);
function GestureConfig(_hammerOptions, commonModule) {
var _this = _super.call(this) || this;
_this._hammerOptions = _hammerOptions;
_this._hammer = typeof window !== 'undefined' ? ((window)).Hammer : null;
/**
* List of new event names to add to the gesture support list
*/
_this.events = _this._hammer ? [
'longpress',
'slide',
'slidestart',
'slideend',
'slideright',
'slideleft'
] : [];
if (commonModule) {
commonModule._checkHammerIsAvailable();
}
return _this;
}
/**
* Builds Hammer instance manually to add custom recognizers that match the Material Design spec.
*
* Our gesture names come from the Material Design gestures spec:
* https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics
*
* More information on default recognizers can be found in Hammer docs:
* http://hammerjs.github.io/recognizer-pan/
* http://hammerjs.github.io/recognizer-press/
*
* @param element Element to which to assign the new HammerJS gestures.
* @returns Newly-created HammerJS instance.
*/
/**
* Builds Hammer instance manually to add custom recognizers that match the Material Design spec.
*
* Our gesture names come from the Material Design gestures spec:
* https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics
*
* More information on default recognizers can be found in Hammer docs:
* http://hammerjs.github.io/recognizer-pan/
* http://hammerjs.github.io/recognizer-press/
*
* @param {?} element Element to which to assign the new HammerJS gestures.
* @return {?} Newly-created HammerJS instance.
*/
GestureConfig.prototype.buildHammer = /**
* Builds Hammer instance manually to add custom recognizers that match the Material Design spec.
*
* Our gesture names come from the Material Design gestures spec:
* https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics
*
* More information on default recognizers can be found in Hammer docs:
* http://hammerjs.github.io/recognizer-pan/
* http://hammerjs.github.io/recognizer-press/
*
* @param {?} element Element to which to assign the new HammerJS gestures.
* @return {?} Newly-created HammerJS instance.
*/
function (element) {
var /** @type {?} */ mc = new this._hammer(element, this._hammerOptions || undefined);
// Default Hammer Recognizers.
var /** @type {?} */ pan = new this._hammer.Pan();
var /** @type {?} */ swipe = new this._hammer.Swipe();
var /** @type {?} */ press = new this._hammer.Press();
// Notice that a HammerJS recognizer can only depend on one other recognizer once.
// Otherwise the previous `recognizeWith` will be dropped.
// TODO: Confirm threshold numbers with Material Design UX Team
var /** @type {?} */ slide = this._createRecognizer(pan, { event: 'slide', threshold: 0 }, swipe);
var /** @type {?} */ longpress = this._createRecognizer(press, { event: 'longpress', time: 500 });
// Overwrite the default `pan` event to use the swipe event.
pan.recognizeWith(swipe);
// Add customized gestures to Hammer manager
mc.add([swipe, press, pan, slide, longpress]);
return /** @type {?} */ (mc);
};
/**
* Creates a new recognizer, without affecting the default recognizers of HammerJS
* @param {?} base
* @param {?} options
* @param {...?} inheritances
* @return {?}
*/
GestureConfig.prototype._createRecognizer = /**
* Creates a new recognizer, without affecting the default recognizers of HammerJS
* @param {?} base
* @param {?} options
* @param {...?} inheritances
* @return {?}
*/
function (base, options) {
var inheritances = [];
for (var _i = 2; _i < arguments.length; _i++) {
inheritances[_i - 2] = arguments[_i];
}
var /** @type {?} */ recognizer = new ((base.constructor))(options);
inheritances.push(base);
inheritances.forEach(function (item) { return recognizer.recognizeWith(item); });
return recognizer;
};
GestureConfig.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
GestureConfig.ctorParameters = function () {
return [
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_HAMMER_OPTIONS,] },] },
{ type: MatCommonModule, decorators: [{ type: core.Optional },] },
];
};
return GestureConfig;
}(platformBrowser.HammerGestureConfig));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Shared directive to count lines inside a text area, such as a list item.
* Line elements can be extracted with a \@ContentChildren(MatLine) query, then
* counted by checking the query list's length.
*/
var MatLine = (function () {
function MatLine() {
}
MatLine.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-line], [matLine]',
host: { 'class': 'mat-line' }
},] },
];
/** @nocollapse */
MatLine.ctorParameters = function () { return []; };
return MatLine;
}());
/**
* Helper that takes a query list of lines and sets the correct class on the host.
* \@docs-private
*/
var MatLineSetter = (function () {
function MatLineSetter(_lines, _element) {
var _this = this;
this._lines = _lines;
this._element = _element;
this._setLineClass(this._lines.length);
this._lines.changes.subscribe(function () {
_this._setLineClass(_this._lines.length);
});
}
/**
* @param {?} count
* @return {?}
*/
MatLineSetter.prototype._setLineClass = /**
* @param {?} count
* @return {?}
*/
function (count) {
this._resetClasses();
if (count === 2 || count === 3) {
this._setClass("mat-" + count + "-line", true);
}
else if (count > 3) {
this._setClass("mat-multi-line", true);
}
};
/**
* @return {?}
*/
MatLineSetter.prototype._resetClasses = /**
* @return {?}
*/
function () {
this._setClass('mat-2-line', false);
this._setClass('mat-3-line', false);
this._setClass('mat-multi-line', false);
};
/**
* @param {?} className
* @param {?} isAdd
* @return {?}
*/
MatLineSetter.prototype._setClass = /**
* @param {?} className
* @param {?} isAdd
* @return {?}
*/
function (className, isAdd) {
if (isAdd) {
this._element.nativeElement.classList.add(className);
}
else {
this._element.nativeElement.classList.remove(className);
}
};
return MatLineSetter;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/** @enum {number} */
var RippleState = {
FADING_IN: 0,
VISIBLE: 1,
FADING_OUT: 2,
HIDDEN: 3,
};
RippleState[RippleState.FADING_IN] = "FADING_IN";
RippleState[RippleState.VISIBLE] = "VISIBLE";
RippleState[RippleState.FADING_OUT] = "FADING_OUT";
RippleState[RippleState.HIDDEN] = "HIDDEN";
/**
* Reference to a previously launched ripple element.
*/
var RippleRef = (function () {
function RippleRef(_renderer, element, config) {
this._renderer = _renderer;
this.element = element;
this.config = config;
/**
* Current state of the ripple reference.
*/
this.state = RippleState.HIDDEN;
}
/** Fades out the ripple element. */
/**
* Fades out the ripple element.
* @return {?}
*/
RippleRef.prototype.fadeOut = /**
* Fades out the ripple element.
* @return {?}
*/
function () {
this._renderer.fadeOutRipple(this);
};
return RippleRef;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Interface that describes the configuration for the animation of a ripple.
* There are two animation phases with different durations for the ripples.
* @record
*/
/**
* Interface that describes the target for launching ripples.
* It defines the ripple configuration and disabled state for interaction ripples.
* \@docs-private
* @record
*/
/**
* Default ripple animation configuration for ripples without an explicit
* animation config specified.
*/
var defaultRippleAnimationConfig = {
enterDuration: 450,
exitDuration: 400
};
/**
* Timeout for ignoring mouse events. Mouse events will be temporary ignored after touch
* events to avoid synthetic mouse events.
*/
var ignoreMouseEventsTimeout = 800;
/**
* Helper service that performs DOM manipulations. Not intended to be used outside this module.
* The constructor takes a reference to the ripple directive's host element and a map of DOM
* event handlers to be installed on the element that triggers ripple animations.
* This will eventually become a custom renderer once Angular support exists.
* \@docs-private
*/
var RippleRenderer = (function () {
function RippleRenderer(_target, _ngZone, elementRef, platform$$1) {
var _this = this;
this._target = _target;
this._ngZone = _ngZone;
/**
* Whether the pointer is currently down or not.
*/
this._isPointerDown = false;
/**
* Events to be registered on the trigger element.
*/
this._triggerEvents = new Map();
/**
* Set of currently active ripple references.
*/
this._activeRipples = new Set();
/**
* Options that apply to all the event listeners that are bound by the renderer.
*/
this._eventOptions = platform.supportsPassiveEventListeners() ? (({ passive: true })) : false;
/**
* Function being called whenever the trigger is being pressed using mouse.
*/
this.onMousedown = function (event) {
var /** @type {?} */ isSyntheticEvent = _this._lastTouchStartEvent &&
Date.now() < _this._lastTouchStartEvent + ignoreMouseEventsTimeout;
if (!_this._target.rippleDisabled && !isSyntheticEvent) {
_this._isPointerDown = true;
_this.fadeInRipple(event.clientX, event.clientY, _this._target.rippleConfig);
}
};
/**
* Function being called whenever the trigger is being pressed using touch.
*/
this.onTouchStart = function (event) {
if (!_this._target.rippleDisabled) {
// Some browsers fire mouse events after a `touchstart` event. Those synthetic mouse
// events will launch a second ripple if we don't ignore mouse events for a specific
// time after a touchstart event.
// Some browsers fire mouse events after a `touchstart` event. Those synthetic mouse
// events will launch a second ripple if we don't ignore mouse events for a specific
// time after a touchstart event.
_this._lastTouchStartEvent = Date.now();
_this._isPointerDown = true;
_this.fadeInRipple(event.touches[0].clientX, event.touches[0].clientY, _this._target.rippleConfig);
}
};
/**
* Function being called whenever the trigger is being released.
*/
this.onPointerUp = function () {
if (!_this._isPointerDown) {
return;
}
_this._isPointerDown = false;
// Fade-out all ripples that are visible and not persistent.
// Fade-out all ripples that are visible and not persistent.
_this._activeRipples.forEach(function (ripple) {
// By default, only ripples that are completely visible will fade out on pointer release.
// If the `terminateOnPointerUp` option is set, ripples that still fade in will also fade out.
var /** @type {?} */ isVisible = ripple.state === RippleState.VISIBLE ||
ripple.config.terminateOnPointerUp && ripple.state === RippleState.FADING_IN;
if (!ripple.config.persistent && isVisible) {
ripple.fadeOut();
}
});
};
// Only do anything if we're on the browser.
if (platform$$1.isBrowser) {
this._containerElement = elementRef.nativeElement;
// Specify events which need to be registered on the trigger.
this._triggerEvents.set('mousedown', this.onMousedown);
this._triggerEvents.set('mouseup', this.onPointerUp);
this._triggerEvents.set('mouseleave', this.onPointerUp);
this._triggerEvents.set('touchstart', this.onTouchStart);
this._triggerEvents.set('touchend', this.onPointerUp);
}
}
/**
* Fades in a ripple at the given coordinates.
* @param x Coordinate within the element, along the X axis at which to start the ripple.
* @param y Coordinate within the element, along the Y axis at which to start the ripple.
* @param config Extra ripple options.
*/
/**
* Fades in a ripple at the given coordinates.
* @param {?} x Coordinate within the element, along the X axis at which to start the ripple.
* @param {?} y Coordinate within the element, along the Y axis at which to start the ripple.
* @param {?=} config Extra ripple options.
* @return {?}
*/
RippleRenderer.prototype.fadeInRipple = /**
* Fades in a ripple at the given coordinates.
* @param {?} x Coordinate within the element, along the X axis at which to start the ripple.
* @param {?} y Coordinate within the element, along the Y axis at which to start the ripple.
* @param {?=} config Extra ripple options.
* @return {?}
*/
function (x, y, config) {
var _this = this;
if (config === void 0) {
config = {};
}
var /** @type {?} */ containerRect = this._containerElement.getBoundingClientRect();
var /** @type {?} */ animationConfig = __assign({}, defaultRippleAnimationConfig, config.animation);
if (config.centered) {
x = containerRect.left + containerRect.width / 2;
y = containerRect.top + containerRect.height / 2;
}
var /** @type {?} */ radius = config.radius || distanceToFurthestCorner(x, y, containerRect);
var /** @type {?} */ offsetX = x - containerRect.left;
var /** @type {?} */ offsetY = y - containerRect.top;
var /** @type {?} */ duration = animationConfig.enterDuration / (config.speedFactor || 1);
var /** @type {?} */ ripple = document.createElement('div');
ripple.classList.add('mat-ripple-element');
ripple.style.left = offsetX - radius + "px";
ripple.style.top = offsetY - radius + "px";
ripple.style.height = radius * 2 + "px";
ripple.style.width = radius * 2 + "px";
// If the color is not set, the default CSS color will be used.
ripple.style.backgroundColor = config.color || null;
ripple.style.transitionDuration = duration + "ms";
this._containerElement.appendChild(ripple);
// By default the browser does not recalculate the styles of dynamically created
// ripple elements. This is critical because then the `scale` would not animate properly.
enforceStyleRecalculation(ripple);
ripple.style.transform = 'scale(1)';
// Exposed reference to the ripple that will be returned.
var /** @type {?} */ rippleRef = new RippleRef(this, ripple, config);
rippleRef.state = RippleState.FADING_IN;
// Add the ripple reference to the list of all active ripples.
this._activeRipples.add(rippleRef);
// Wait for the ripple element to be completely faded in.
// Once it's faded in, the ripple can be hidden immediately if the mouse is released.
this.runTimeoutOutsideZone(function () {
rippleRef.state = RippleState.VISIBLE;
if (!config.persistent && !_this._isPointerDown) {
rippleRef.fadeOut();
}
}, duration);
return rippleRef;
};
/** Fades out a ripple reference. */
/**
* Fades out a ripple reference.
* @param {?} rippleRef
* @return {?}
*/
RippleRenderer.prototype.fadeOutRipple = /**
* Fades out a ripple reference.
* @param {?} rippleRef
* @return {?}
*/
function (rippleRef) {
// For ripples that are not active anymore, don't re-un the fade-out animation.
if (!this._activeRipples.delete(rippleRef)) {
return;
}
var /** @type {?} */ rippleEl = rippleRef.element;
var /** @type {?} */ animationConfig = __assign({}, defaultRippleAnimationConfig, rippleRef.config.animation);
rippleEl.style.transitionDuration = animationConfig.exitDuration + "ms";
rippleEl.style.opacity = '0';
rippleRef.state = RippleState.FADING_OUT;
// Once the ripple faded out, the ripple can be safely removed from the DOM.
this.runTimeoutOutsideZone(function () {
rippleRef.state = RippleState.HIDDEN; /** @type {?} */
((rippleEl.parentNode)).removeChild(rippleEl);
}, animationConfig.exitDuration);
};
/** Fades out all currently active ripples. */
/**
* Fades out all currently active ripples.
* @return {?}
*/
RippleRenderer.prototype.fadeOutAll = /**
* Fades out all currently active ripples.
* @return {?}
*/
function () {
this._activeRipples.forEach(function (ripple) { return ripple.fadeOut(); });
};
/** Sets up the trigger event listeners */
/**
* Sets up the trigger event listeners
* @param {?} element
* @return {?}
*/
RippleRenderer.prototype.setupTriggerEvents = /**
* Sets up the trigger event listeners
* @param {?} element
* @return {?}
*/
function (element) {
var _this = this;
if (!element || element === this._triggerElement) {
return;
}
// Remove all previously registered event listeners from the trigger element.
this._removeTriggerEvents();
this._ngZone.runOutsideAngular(function () {
_this._triggerEvents.forEach(function (fn, type) {
return element.addEventListener(type, fn, _this._eventOptions);
});
});
this._triggerElement = element;
};
/**
* Runs a timeout outside of the Angular zone to avoid triggering the change detection.
* @param {?} fn
* @param {?=} delay
* @return {?}
*/
RippleRenderer.prototype.runTimeoutOutsideZone = /**
* Runs a timeout outside of the Angular zone to avoid triggering the change detection.
* @param {?} fn
* @param {?=} delay
* @return {?}
*/
function (fn, delay) {
if (delay === void 0) {
delay = 0;
}
this._ngZone.runOutsideAngular(function () { return setTimeout(fn, delay); });
};
/** Removes previously registered event listeners from the trigger element. */
/**
* Removes previously registered event listeners from the trigger element.
* @return {?}
*/
RippleRenderer.prototype._removeTriggerEvents = /**
* Removes previously registered event listeners from the trigger element.
* @return {?}
*/
function () {
var _this = this;
if (this._triggerElement) {
this._triggerEvents.forEach(function (fn, type) {
/** @type {?} */ ((_this._triggerElement)).removeEventListener(type, fn, _this._eventOptions);
});
}
};
return RippleRenderer;
}());
/**
* Enforces a style recalculation of a DOM element by computing its styles.
* @param {?} element
* @return {?}
*/
function enforceStyleRecalculation(element) {
// Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
// Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
// See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
window.getComputedStyle(element).getPropertyValue('opacity');
}
/**
* Returns the distance from the point (x, y) to the furthest corner of a rectangle.
* @param {?} x
* @param {?} y
* @param {?} rect
* @return {?}
*/
function distanceToFurthestCorner(x, y, rect) {
var /** @type {?} */ distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right));
var /** @type {?} */ distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom));
return Math.sqrt(distX * distX + distY * distY);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Configurable options for `matRipple`.
* @record
*/
/**
* Injection token that can be used to specify the global ripple options.
*/
var MAT_RIPPLE_GLOBAL_OPTIONS = new core.InjectionToken('mat-ripple-global-options');
var MatRipple = (function () {
function MatRipple(_elementRef, ngZone, platform$$1, globalOptions) {
this._elementRef = _elementRef;
/**
* If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius
* will be the distance from the center of the ripple to the furthest corner of the host element's
* bounding rectangle.
*/
this.radius = 0;
/**
* If set, the normal duration of ripple animations is divided by this value. For example,
* setting it to 0.5 will cause the animations to take twice as long.
* A changed speedFactor will not modify the fade-out duration of the ripples.
* @deprecated Use the [matRippleAnimation] binding instead.
* \@deletion-target 7.0.0
*/
this.speedFactor = 1;
this._disabled = false;
/**
* Whether ripple directive is initialized and the input bindings are set.
*/
this._isInitialized = false;
this._globalOptions = globalOptions || {};
this._rippleRenderer = new RippleRenderer(this, ngZone, _elementRef, platform$$1);
}
Object.defineProperty(MatRipple.prototype, "disabled", {
get: /**
* Whether click events will not trigger the ripple. Ripples can be still launched manually
* by using the `launch()` method.
* @return {?}
*/ function () { return this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._disabled = value;
this._setupTriggerEventsIfEnabled();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRipple.prototype, "trigger", {
get: /**
* The element that triggers the ripple when click events are received.
* Defaults to the directive's host element.
* @return {?}
*/ function () { return this._trigger || this._elementRef.nativeElement; },
set: /**
* @param {?} trigger
* @return {?}
*/ function (trigger$$1) {
this._trigger = trigger$$1;
this._setupTriggerEventsIfEnabled();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatRipple.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._isInitialized = true;
this._setupTriggerEventsIfEnabled();
};
/**
* @return {?}
*/
MatRipple.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._rippleRenderer._removeTriggerEvents();
};
/** Fades out all currently showing ripple elements. */
/**
* Fades out all currently showing ripple elements.
* @return {?}
*/
MatRipple.prototype.fadeOutAll = /**
* Fades out all currently showing ripple elements.
* @return {?}
*/
function () {
this._rippleRenderer.fadeOutAll();
};
Object.defineProperty(MatRipple.prototype, "rippleConfig", {
/** Ripple configuration from the directive's input values. */
get: /**
* Ripple configuration from the directive's input values.
* @return {?}
*/ function () {
return {
centered: this.centered,
radius: this.radius,
color: this.color,
animation: __assign({}, this._globalOptions.animation, this.animation),
terminateOnPointerUp: this._globalOptions.terminateOnPointerUp,
speedFactor: this.speedFactor * (this._globalOptions.baseSpeedFactor || 1),
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRipple.prototype, "rippleDisabled", {
/** Whether ripples on pointer-down are disabled or not. */
get: /**
* Whether ripples on pointer-down are disabled or not.
* @return {?}
*/ function () {
return this.disabled || !!this._globalOptions.disabled;
},
enumerable: true,
configurable: true
});
/**
* Sets up the the trigger event listeners if ripples are enabled.
* @return {?}
*/
MatRipple.prototype._setupTriggerEventsIfEnabled = /**
* Sets up the the trigger event listeners if ripples are enabled.
* @return {?}
*/
function () {
if (!this.disabled && this._isInitialized) {
this._rippleRenderer.setupTriggerEvents(this.trigger);
}
};
/** Launches a manual ripple at the specified coordinated or just by the ripple config. */
/**
* Launches a manual ripple at the specified coordinated or just by the ripple config.
* @param {?} configOrX
* @param {?=} y
* @param {?=} config
* @return {?}
*/
MatRipple.prototype.launch = /**
* Launches a manual ripple at the specified coordinated or just by the ripple config.
* @param {?} configOrX
* @param {?=} y
* @param {?=} config
* @return {?}
*/
function (configOrX, y, config) {
if (y === void 0) {
y = 0;
}
if (typeof configOrX === 'number') {
return this._rippleRenderer.fadeInRipple(configOrX, y, __assign({}, this.rippleConfig, config));
}
else {
return this._rippleRenderer.fadeInRipple(0, 0, __assign({}, this.rippleConfig, configOrX));
}
};
MatRipple.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-ripple], [matRipple]',
exportAs: 'matRipple',
host: {
'class': 'mat-ripple',
'[class.mat-ripple-unbounded]': 'unbounded'
}
},] },
];
/** @nocollapse */
MatRipple.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.NgZone, },
{ type: platform.Platform, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_RIPPLE_GLOBAL_OPTIONS,] },] },
];
};
MatRipple.propDecorators = {
"color": [{ type: core.Input, args: ['matRippleColor',] },],
"unbounded": [{ type: core.Input, args: ['matRippleUnbounded',] },],
"centered": [{ type: core.Input, args: ['matRippleCentered',] },],
"radius": [{ type: core.Input, args: ['matRippleRadius',] },],
"speedFactor": [{ type: core.Input, args: ['matRippleSpeedFactor',] },],
"animation": [{ type: core.Input, args: ['matRippleAnimation',] },],
"disabled": [{ type: core.Input, args: ['matRippleDisabled',] },],
"trigger": [{ type: core.Input, args: ['matRippleTrigger',] },],
};
return MatRipple;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatRippleModule = (function () {
function MatRippleModule() {
}
MatRippleModule.decorators = [
{ type: core.NgModule, args: [{
imports: [MatCommonModule, platform.PlatformModule],
exports: [MatRipple, MatCommonModule],
declarations: [MatRipple],
},] },
];
/** @nocollapse */
MatRippleModule.ctorParameters = function () { return []; };
return MatRippleModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Component that shows a simplified checkbox without including any kind of "real" checkbox.
* Meant to be used when the checkbox is purely decorative and a large number of them will be
* included, such as for the options in a multi-select. Uses no SVGs or complex animations.
* Note that theming is meant to be handled by the parent element, e.g.
* `mat-primary .mat-pseudo-checkbox`.
*
* Note that this component will be completely invisible to screen-reader users. This is *not*
* interchangeable with `<mat-checkbox>` and should *not* be used if the user would directly
* interact with the checkbox. The pseudo-checkbox should only be used as an implementation detail
* of more complex components that appropriately handle selected / checked state.
* \@docs-private
*/
var MatPseudoCheckbox = (function () {
function MatPseudoCheckbox() {
/**
* Display state of the checkbox.
*/
this.state = 'unchecked';
/**
* Whether the checkbox is disabled.
*/
this.disabled = false;
}
MatPseudoCheckbox.decorators = [
{ type: core.Component, args: [{ encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
selector: 'mat-pseudo-checkbox',
styles: [".mat-pseudo-checkbox{width:20px;height:20px;border:2px solid;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1)}.mat-pseudo-checkbox::after{position:absolute;opacity:0;content:'';border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.mat-pseudo-checkbox.mat-pseudo-checkbox-checked,.mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate{border:none}.mat-pseudo-checkbox-disabled{cursor:default}.mat-pseudo-checkbox-indeterminate::after{top:9px;left:2px;width:16px;opacity:1}.mat-pseudo-checkbox-checked::after{top:5px;left:3px;width:12px;height:5px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1}"],
template: '',
host: {
'class': 'mat-pseudo-checkbox',
'[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
'[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
'[class.mat-pseudo-checkbox-disabled]': 'disabled',
},
},] },
];
/** @nocollapse */
MatPseudoCheckbox.ctorParameters = function () { return []; };
MatPseudoCheckbox.propDecorators = {
"state": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
};
return MatPseudoCheckbox;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatOptgroupBase = (function () {
function MatOptgroupBase() {
}
return MatOptgroupBase;
}());
var _MatOptgroupMixinBase = mixinDisabled(MatOptgroupBase);
// Counter for unique group ids.
var _uniqueOptgroupIdCounter = 0;
/**
* Component that is used to group instances of `mat-option`.
*/
var MatOptgroup = (function (_super) {
__extends(MatOptgroup, _super);
function MatOptgroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/**
* Unique id for the underlying label.
*/
_this._labelId = "mat-optgroup-label-" + _uniqueOptgroupIdCounter++;
return _this;
}
MatOptgroup.decorators = [
{ type: core.Component, args: [{ selector: 'mat-optgroup',
exportAs: 'matOptgroup',
template: "<label class=\"mat-optgroup-label\" [id]=\"_labelId\">{{ label }}</label><ng-content select=\"mat-option, ng-container\"></ng-content>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
inputs: ['disabled'],
styles: [".mat-optgroup-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.mat-optgroup-label[disabled]{cursor:default}[dir=rtl] .mat-optgroup-label{text-align:right}.mat-optgroup-label .mat-icon{margin-right:16px;vertical-align:middle}[dir=rtl] .mat-optgroup-label .mat-icon{margin-left:16px;margin-right:0}"],
host: {
'class': 'mat-optgroup',
'role': 'group',
'[class.mat-optgroup-disabled]': 'disabled',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.aria-labelledby]': '_labelId',
}
},] },
];
/** @nocollapse */
MatOptgroup.ctorParameters = function () { return []; };
MatOptgroup.propDecorators = {
"label": [{ type: core.Input },],
};
return MatOptgroup;
}(_MatOptgroupMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Option IDs need to be unique across components, so this counter exists outside of
* the component definition.
*/
var _uniqueIdCounter = 0;
/**
* Event object emitted by MatOption when selected or deselected.
*/
var MatOptionSelectionChange = (function () {
function MatOptionSelectionChange(source, isUserInput) {
if (isUserInput === void 0) {
isUserInput = false;
}
this.source = source;
this.isUserInput = isUserInput;
}
return MatOptionSelectionChange;
}());
/**
* Describes a parent component that manages a list of options.
* Contains properties that the options can inherit.
* \@docs-private
* @record
*/
/**
* Injection token used to provide the parent component to options.
*/
var MAT_OPTION_PARENT_COMPONENT = new core.InjectionToken('MAT_OPTION_PARENT_COMPONENT');
/**
* Single option inside of a `<mat-select>` element.
*/
var MatOption = (function () {
function MatOption(_element, _changeDetectorRef, _parent, group) {
this._element = _element;
this._changeDetectorRef = _changeDetectorRef;
this._parent = _parent;
this.group = group;
this._selected = false;
this._active = false;
this._disabled = false;
this._id = "mat-option-" + _uniqueIdCounter++;
this._mostRecentViewValue = '';
/**
* Event emitted when the option is selected or deselected.
*/
this.onSelectionChange = new core.EventEmitter();
/**
* Emits when the state of the option changes and any parents have to be notified.
*/
this._stateChanges = new Subject.Subject();
}
Object.defineProperty(MatOption.prototype, "multiple", {
/** Whether the wrapping component is in multiple selection mode. */
get: /**
* Whether the wrapping component is in multiple selection mode.
* @return {?}
*/ function () { return this._parent && this._parent.multiple; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatOption.prototype, "id", {
/** The unique ID of the option. */
get: /**
* The unique ID of the option.
* @return {?}
*/ function () { return this._id; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatOption.prototype, "selected", {
/** Whether or not the option is currently selected. */
get: /**
* Whether or not the option is currently selected.
* @return {?}
*/ function () { return this._selected; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatOption.prototype, "disabled", {
get: /**
* Whether the option is disabled.
* @return {?}
*/ function () { return (this.group && this.group.disabled) || this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._disabled = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatOption.prototype, "disableRipple", {
/** Whether ripples for the option are disabled. */
get: /**
* Whether ripples for the option are disabled.
* @return {?}
*/ function () { return this._parent && this._parent.disableRipple; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatOption.prototype, "active", {
/**
* Whether or not the option is currently active and ready to be selected.
* An active option displays styles as if it is focused, but the
* focus is actually retained somewhere else. This comes in handy
* for components like autocomplete where focus must remain on the input.
*/
get: /**
* Whether or not the option is currently active and ready to be selected.
* An active option displays styles as if it is focused, but the
* focus is actually retained somewhere else. This comes in handy
* for components like autocomplete where focus must remain on the input.
* @return {?}
*/ function () {
return this._active;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatOption.prototype, "viewValue", {
/**
* The displayed value of the option. It is necessary to show the selected option in the
* select's trigger.
*/
get: /**
* The displayed value of the option. It is necessary to show the selected option in the
* select's trigger.
* @return {?}
*/ function () {
// TODO(kara): Add input property alternative for node envs.
return (this._getHostElement().textContent || '').trim();
},
enumerable: true,
configurable: true
});
/** Selects the option. */
/**
* Selects the option.
* @return {?}
*/
MatOption.prototype.select = /**
* Selects the option.
* @return {?}
*/
function () {
this._selected = true;
this._changeDetectorRef.markForCheck();
this._emitSelectionChangeEvent();
};
/** Deselects the option. */
/**
* Deselects the option.
* @return {?}
*/
MatOption.prototype.deselect = /**
* Deselects the option.
* @return {?}
*/
function () {
this._selected = false;
this._changeDetectorRef.markForCheck();
this._emitSelectionChangeEvent();
};
/** Sets focus onto this option. */
/**
* Sets focus onto this option.
* @return {?}
*/
MatOption.prototype.focus = /**
* Sets focus onto this option.
* @return {?}
*/
function () {
var /** @type {?} */ element = this._getHostElement();
if (typeof element.focus === 'function') {
element.focus();
}
};
/**
* This method sets display styles on the option to make it appear
* active. This is used by the ActiveDescendantKeyManager so key
* events will display the proper options as active on arrow key events.
*/
/**
* This method sets display styles on the option to make it appear
* active. This is used by the ActiveDescendantKeyManager so key
* events will display the proper options as active on arrow key events.
* @return {?}
*/
MatOption.prototype.setActiveStyles = /**
* This method sets display styles on the option to make it appear
* active. This is used by the ActiveDescendantKeyManager so key
* events will display the proper options as active on arrow key events.
* @return {?}
*/
function () {
if (!this._active) {
this._active = true;
this._changeDetectorRef.markForCheck();
}
};
/**
* This method removes display styles on the option that made it appear
* active. This is used by the ActiveDescendantKeyManager so key
* events will display the proper options as active on arrow key events.
*/
/**
* This method removes display styles on the option that made it appear
* active. This is used by the ActiveDescendantKeyManager so key
* events will display the proper options as active on arrow key events.
* @return {?}
*/
MatOption.prototype.setInactiveStyles = /**
* This method removes display styles on the option that made it appear
* active. This is used by the ActiveDescendantKeyManager so key
* events will display the proper options as active on arrow key events.
* @return {?}
*/
function () {
if (this._active) {
this._active = false;
this._changeDetectorRef.markForCheck();
}
};
/** Gets the label to be used when determining whether the option should be focused. */
/**
* Gets the label to be used when determining whether the option should be focused.
* @return {?}
*/
MatOption.prototype.getLabel = /**
* Gets the label to be used when determining whether the option should be focused.
* @return {?}
*/
function () {
return this.viewValue;
};
/** Ensures the option is selected when activated from the keyboard. */
/**
* Ensures the option is selected when activated from the keyboard.
* @param {?} event
* @return {?}
*/
MatOption.prototype._handleKeydown = /**
* Ensures the option is selected when activated from the keyboard.
* @param {?} event
* @return {?}
*/
function (event) {
if (event.keyCode === keycodes.ENTER || event.keyCode === keycodes.SPACE) {
this._selectViaInteraction();
// Prevent the page from scrolling down and form submits.
event.preventDefault();
}
};
/**
* `Selects the option while indicating the selection came from the user. Used to
* determine if the select's view -> model callback should be invoked.`
*/
/**
* `Selects the option while indicating the selection came from the user. Used to
* determine if the select's view -> model callback should be invoked.`
* @return {?}
*/
MatOption.prototype._selectViaInteraction = /**
* `Selects the option while indicating the selection came from the user. Used to
* determine if the select's view -> model callback should be invoked.`
* @return {?}
*/
function () {
if (!this.disabled) {
this._selected = this.multiple ? !this._selected : true;
this._changeDetectorRef.markForCheck();
this._emitSelectionChangeEvent(true);
}
};
/** Returns the correct tabindex for the option depending on disabled state. */
/**
* Returns the correct tabindex for the option depending on disabled state.
* @return {?}
*/
MatOption.prototype._getTabIndex = /**
* Returns the correct tabindex for the option depending on disabled state.
* @return {?}
*/
function () {
return this.disabled ? '-1' : '0';
};
/** Gets the host DOM element. */
/**
* Gets the host DOM element.
* @return {?}
*/
MatOption.prototype._getHostElement = /**
* Gets the host DOM element.
* @return {?}
*/
function () {
return this._element.nativeElement;
};
/**
* @return {?}
*/
MatOption.prototype.ngAfterViewChecked = /**
* @return {?}
*/
function () {
// Since parent components could be using the option's label to display the selected values
// (e.g. `mat-select`) and they don't have a way of knowing if the option's label has changed
// we have to check for changes in the DOM ourselves and dispatch an event. These checks are
// relatively cheap, however we still limit them only to selected options in order to avoid
// hitting the DOM too often.
if (this._selected) {
var /** @type {?} */ viewValue = this.viewValue;
if (viewValue !== this._mostRecentViewValue) {
this._mostRecentViewValue = viewValue;
this._stateChanges.next();
}
}
};
/**
* Emits the selection change event.
* @param {?=} isUserInput
* @return {?}
*/
MatOption.prototype._emitSelectionChangeEvent = /**
* Emits the selection change event.
* @param {?=} isUserInput
* @return {?}
*/
function (isUserInput) {
if (isUserInput === void 0) {
isUserInput = false;
}
this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput));
};
MatOption.decorators = [
{ type: core.Component, args: [{ selector: 'mat-option',
exportAs: 'matOption',
host: {
'role': 'option',
'[attr.tabindex]': '_getTabIndex()',
'[class.mat-selected]': 'selected',
'[class.mat-option-multiple]': 'multiple',
'[class.mat-active]': 'active',
'[id]': 'id',
'[attr.aria-selected]': 'selected.toString()',
'[attr.aria-disabled]': 'disabled.toString()',
'[class.mat-option-disabled]': 'disabled',
'(click)': '_selectViaInteraction()',
'(keydown)': '_handleKeydown($event)',
'class': 'mat-option',
},
styles: [".mat-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;position:relative;cursor:pointer;outline:0;display:flex;flex-direction:row;max-width:100%;box-sizing:border-box;align-items:center}.mat-option[disabled]{cursor:default}[dir=rtl] .mat-option{text-align:right}.mat-option .mat-icon{margin-right:16px;vertical-align:middle}[dir=rtl] .mat-option .mat-icon{margin-left:16px;margin-right:0}.mat-option[aria-disabled=true]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.mat-optgroup .mat-option:not(.mat-option-multiple){padding-left:32px}[dir=rtl] .mat-optgroup .mat-option:not(.mat-option-multiple){padding-left:16px;padding-right:32px}.mat-option-text{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis}.mat-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}@media screen and (-ms-high-contrast:active){.mat-option-ripple{opacity:.5}}.mat-option-pseudo-checkbox{margin-right:8px}[dir=rtl] .mat-option-pseudo-checkbox{margin-left:8px;margin-right:0}"],
template: "<mat-pseudo-checkbox *ngIf=\"multiple\" class=\"mat-option-pseudo-checkbox\" [state]=\"selected ? 'checked' : ''\" [disabled]=\"disabled\"></mat-pseudo-checkbox><span class=\"mat-option-text\"><ng-content></ng-content></span><div class=\"mat-option-ripple\" mat-ripple [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disabled || disableRipple\"></div>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatOption.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_OPTION_PARENT_COMPONENT,] },] },
{ type: MatOptgroup, decorators: [{ type: core.Optional },] },
];
};
MatOption.propDecorators = {
"value": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"onSelectionChange": [{ type: core.Output },],
};
return MatOption;
}());
/**
* Counts the amount of option group labels that precede the specified option.
* \@docs-private
* @param {?} optionIndex Index of the option at which to start counting.
* @param {?} options Flat list of all of the options.
* @param {?} optionGroups Flat list of all of the option groups.
* @return {?}
*/
function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
if (optionGroups.length) {
var /** @type {?} */ optionsArray = options.toArray();
var /** @type {?} */ groups = optionGroups.toArray();
var /** @type {?} */ groupCounter = 0;
for (var /** @type {?} */ i = 0; i < optionIndex + 1; i++) {
if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
groupCounter++;
}
}
return groupCounter;
}
return 0;
}
/**
* Determines the position to which to scroll a panel in order for an option to be into view.
* \@docs-private
* @param {?} optionIndex Index of the option to be scrolled into the view.
* @param {?} optionHeight Height of the options.
* @param {?} currentScrollPosition Current scroll position of the panel.
* @param {?} panelHeight Height of the panel.
* @return {?}
*/
function _getOptionScrollPosition(optionIndex, optionHeight, currentScrollPosition, panelHeight) {
var /** @type {?} */ optionOffset = optionIndex * optionHeight;
if (optionOffset < currentScrollPosition) {
return optionOffset;
}
if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
return Math.max(0, optionOffset - panelHeight + optionHeight);
}
return currentScrollPosition;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* InjectionToken that can be used to specify the global label options.
*/
var MAT_LABEL_GLOBAL_OPTIONS = new core.InjectionToken('mat-label-global-options');
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
function isFunction(x) {
return typeof x === 'function';
}
var isFunction_2 = isFunction;
var isFunction_1 = {
isFunction: isFunction_2
};
var isArray_1 = Array.isArray || (function (x) { return x && typeof x.length === 'number'; });
var isArray = {
isArray: isArray_1
};
function isObject(x) {
return x != null && typeof x === 'object';
}
var isObject_2 = isObject;
var isObject_1 = {
isObject: isObject_2
};
// typeof any so that it we don't have to cast when comparing a result to the error object
var errorObject_1 = { e: {} };
var errorObject = {
errorObject: errorObject_1
};
var tryCatchTarget;
function tryCatcher() {
try {
return tryCatchTarget.apply(this, arguments);
}
catch (e) {
errorObject.errorObject.e = e;
return errorObject.errorObject;
}
}
function tryCatch(fn) {
tryCatchTarget = fn;
return tryCatcher;
}
var tryCatch_2 = tryCatch;
var tryCatch_1 = {
tryCatch: tryCatch_2
};
var __extends$3 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* An error thrown when one or more errors have occurred during the
* `unsubscribe` of a {@link Subscription}.
*/
var UnsubscriptionError = (function (_super) {
__extends$3(UnsubscriptionError, _super);
function UnsubscriptionError(errors) {
_super.call(this);
this.errors = errors;
var err = Error.call(this, errors ?
errors.length + " errors occurred during unsubscription:\n " + errors.map(function (err, i) { return ((i + 1) + ") " + err.toString()); }).join('\n ') : '');
this.name = err.name = 'UnsubscriptionError';
this.stack = err.stack;
this.message = err.message;
}
return UnsubscriptionError;
}(Error));
var UnsubscriptionError_2 = UnsubscriptionError;
var UnsubscriptionError_1 = {
UnsubscriptionError: UnsubscriptionError_2
};
/**
* Represents a disposable resource, such as the execution of an Observable. A
* Subscription has one important method, `unsubscribe`, that takes no argument
* and just disposes the resource held by the subscription.
*
* Additionally, subscriptions may be grouped together through the `add()`
* method, which will attach a child Subscription to the current Subscription.
* When a Subscription is unsubscribed, all its children (and its grandchildren)
* will be unsubscribed as well.
*
* @class Subscription
*/
var Subscription$2 = (function () {
/**
* @param {function(): void} [unsubscribe] A function describing how to
* perform the disposal of resources when the `unsubscribe` method is called.
*/
function Subscription$$1(unsubscribe) {
/**
* A flag to indicate whether this Subscription has already been unsubscribed.
* @type {boolean}
*/
this.closed = false;
this._parent = null;
this._parents = null;
this._subscriptions = null;
if (unsubscribe) {
this._unsubscribe = unsubscribe;
}
}
/**
* Disposes the resources held by the subscription. May, for instance, cancel
* an ongoing Observable execution or cancel any other type of work that
* started when the Subscription was created.
* @return {void}
*/
Subscription$$1.prototype.unsubscribe = function () {
var hasErrors = false;
var errors;
if (this.closed) {
return;
}
var _a = this, _parent = _a._parent, _parents = _a._parents, _unsubscribe = _a._unsubscribe, _subscriptions = _a._subscriptions;
this.closed = true;
this._parent = null;
this._parents = null;
// null out _subscriptions first so any child subscriptions that attempt
// to remove themselves from this subscription will noop
this._subscriptions = null;
var index = -1;
var len = _parents ? _parents.length : 0;
// if this._parent is null, then so is this._parents, and we
// don't have to remove ourselves from any parent subscriptions.
while (_parent) {
_parent.remove(this);
// if this._parents is null or index >= len,
// then _parent is set to null, and the loop exits
_parent = ++index < len && _parents[index] || null;
}
if (isFunction_1.isFunction(_unsubscribe)) {
var trial = tryCatch_1.tryCatch(_unsubscribe).call(this);
if (trial === errorObject.errorObject) {
hasErrors = true;
errors = errors || (errorObject.errorObject.e instanceof UnsubscriptionError_1.UnsubscriptionError ?
flattenUnsubscriptionErrors(errorObject.errorObject.e.errors) : [errorObject.errorObject.e]);
}
}
if (isArray.isArray(_subscriptions)) {
index = -1;
len = _subscriptions.length;
while (++index < len) {
var sub = _subscriptions[index];
if (isObject_1.isObject(sub)) {
var trial = tryCatch_1.tryCatch(sub.unsubscribe).call(sub);
if (trial === errorObject.errorObject) {
hasErrors = true;
errors = errors || [];
var err = errorObject.errorObject.e;
if (err instanceof UnsubscriptionError_1.UnsubscriptionError) {
errors = errors.concat(flattenUnsubscriptionErrors(err.errors));
}
else {
errors.push(err);
}
}
}
}
}
if (hasErrors) {
throw new UnsubscriptionError_1.UnsubscriptionError(errors);
}
};
/**
* Adds a tear down to be called during the unsubscribe() of this
* Subscription.
*
* If the tear down being added is a subscription that is already
* unsubscribed, is the same reference `add` is being called on, or is
* `Subscription.EMPTY`, it will not be added.
*
* If this subscription is already in an `closed` state, the passed
* tear down logic will be executed immediately.
*
* @param {TeardownLogic} teardown The additional logic to execute on
* teardown.
* @return {Subscription} Returns the Subscription used or created to be
* added to the inner subscriptions list. This Subscription can be used with
* `remove()` to remove the passed teardown logic from the inner subscriptions
* list.
*/
Subscription$$1.prototype.add = function (teardown) {
if (!teardown || (teardown === Subscription$$1.EMPTY)) {
return Subscription$$1.EMPTY;
}
if (teardown === this) {
return this;
}
var subscription = teardown;
switch (typeof teardown) {
case 'function':
subscription = new Subscription$$1(teardown);
case 'object':
if (subscription.closed || typeof subscription.unsubscribe !== 'function') {
return subscription;
}
else if (this.closed) {
subscription.unsubscribe();
return subscription;
}
else if (typeof subscription._addParent !== 'function' /* quack quack */) {
var tmp = subscription;
subscription = new Subscription$$1();
subscription._subscriptions = [tmp];
}
break;
default:
throw new Error('unrecognized teardown ' + teardown + ' added to Subscription.');
}
var subscriptions = this._subscriptions || (this._subscriptions = []);
subscriptions.push(subscription);
subscription._addParent(this);
return subscription;
};
/**
* Removes a Subscription from the internal list of subscriptions that will
* unsubscribe during the unsubscribe process of this Subscription.
* @param {Subscription} subscription The subscription to remove.
* @return {void}
*/
Subscription$$1.prototype.remove = function (subscription) {
var subscriptions = this._subscriptions;
if (subscriptions) {
var subscriptionIndex = subscriptions.indexOf(subscription);
if (subscriptionIndex !== -1) {
subscriptions.splice(subscriptionIndex, 1);
}
}
};
Subscription$$1.prototype._addParent = function (parent) {
var _a = this, _parent = _a._parent, _parents = _a._parents;
if (!_parent || _parent === parent) {
// If we don't have a parent, or the new parent is the same as the
// current parent, then set this._parent to the new parent.
this._parent = parent;
}
else if (!_parents) {
// If there's already one parent, but not multiple, allocate an Array to
// store the rest of the parent Subscriptions.
this._parents = [parent];
}
else if (_parents.indexOf(parent) === -1) {
// Only add the new parent to the _parents list if it's not already there.
_parents.push(parent);
}
};
Subscription$$1.EMPTY = (function (empty$$1) {
empty$$1.closed = true;
return empty$$1;
}(new Subscription$$1()));
return Subscription$$1;
}());
var Subscription_2 = Subscription$2;
function flattenUnsubscriptionErrors(errors) {
return errors.reduce(function (errs, err) { return errs.concat((err instanceof UnsubscriptionError_1.UnsubscriptionError) ? err.errors : err); }, []);
}
var Subscription_1 = {
Subscription: Subscription_2
};
var empty$2 = {
closed: true,
next: function (value) { },
error: function (err) { throw err; },
complete: function () { }
};
var Observer = {
empty: empty$2
};
// CommonJS / Node have global context exposed as "global" variable.
// We don't want to include the whole node.d.ts this this compilation unit so we'll just fake
// the global "global" var for now.
var __window = typeof window !== 'undefined' && window;
var __self = typeof self !== 'undefined' && typeof WorkerGlobalScope !== 'undefined' &&
self instanceof WorkerGlobalScope && self;
var __global = typeof commonjsGlobal !== 'undefined' && commonjsGlobal;
var _root = __window || __global || __self;
var root_1 = _root;
// Workaround Closure Compiler restriction: The body of a goog.module cannot use throw.
// This is needed when used with angular/tsickle which inserts a goog.module statement.
// Wrap in IIFE
(function () {
if (!_root) {
throw new Error('RxJS could not find any global context (window, self, global)');
}
})();
var root = {
root: root_1
};
var rxSubscriber = createCommonjsModule(function (module, exports) {
var Symbol = root.root.Symbol;
exports.rxSubscriber = (typeof Symbol === 'function' && typeof Symbol.for === 'function') ?
Symbol.for('rxSubscriber') : '@@rxSubscriber';
/**
* @deprecated use rxSubscriber instead
*/
exports.$$rxSubscriber = exports.rxSubscriber;
});
var rxSubscriber_1 = rxSubscriber.rxSubscriber;
var rxSubscriber_2 = rxSubscriber.$$rxSubscriber;
var __extends$2 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Implements the {@link Observer} interface and extends the
* {@link Subscription} class. While the {@link Observer} is the public API for
* consuming the values of an {@link Observable}, all Observers get converted to
* a Subscriber, in order to provide Subscription-like capabilities such as
* `unsubscribe`. Subscriber is a common type in RxJS, and crucial for
* implementing operators, but it is rarely used as a public API.
*
* @class Subscriber<T>
*/
var Subscriber = (function (_super) {
__extends$2(Subscriber, _super);
/**
* @param {Observer|function(value: T): void} [destinationOrNext] A partially
* defined Observer or a `next` callback function.
* @param {function(e: ?any): void} [error] The `error` callback of an
* Observer.
* @param {function(): void} [complete] The `complete` callback of an
* Observer.
*/
function Subscriber(destinationOrNext, error, complete) {
_super.call(this);
this.syncErrorValue = null;
this.syncErrorThrown = false;
this.syncErrorThrowable = false;
this.isStopped = false;
switch (arguments.length) {
case 0:
this.destination = Observer.empty;
break;
case 1:
if (!destinationOrNext) {
this.destination = Observer.empty;
break;
}
if (typeof destinationOrNext === 'object') {
if (destinationOrNext instanceof Subscriber) {
this.syncErrorThrowable = destinationOrNext.syncErrorThrowable;
this.destination = destinationOrNext;
this.destination.add(this);
}
else {
this.syncErrorThrowable = true;
this.destination = new SafeSubscriber(this, destinationOrNext);
}
break;
}
default:
this.syncErrorThrowable = true;
this.destination = new SafeSubscriber(this, destinationOrNext, error, complete);
break;
}
}
Subscriber.prototype[rxSubscriber.rxSubscriber] = function () { return this; };
/**
* A static factory for a Subscriber, given a (potentially partial) definition
* of an Observer.
* @param {function(x: ?T): void} [next] The `next` callback of an Observer.
* @param {function(e: ?any): void} [error] The `error` callback of an
* Observer.
* @param {function(): void} [complete] The `complete` callback of an
* Observer.
* @return {Subscriber<T>} A Subscriber wrapping the (partially defined)
* Observer represented by the given arguments.
*/
Subscriber.create = function (next, error, complete) {
var subscriber = new Subscriber(next, error, complete);
subscriber.syncErrorThrowable = false;
return subscriber;
};
/**
* The {@link Observer} callback to receive notifications of type `next` from
* the Observable, with a value. The Observable may call this method 0 or more
* times.
* @param {T} [value] The `next` value.
* @return {void}
*/
Subscriber.prototype.next = function (value) {
if (!this.isStopped) {
this._next(value);
}
};
/**
* The {@link Observer} callback to receive notifications of type `error` from
* the Observable, with an attached {@link Error}. Notifies the Observer that
* the Observable has experienced an error condition.
* @param {any} [err] The `error` exception.
* @return {void}
*/
Subscriber.prototype.error = function (err) {
if (!this.isStopped) {
this.isStopped = true;
this._error(err);
}
};
/**
* The {@link Observer} callback to receive a valueless notification of type
* `complete` from the Observable. Notifies the Observer that the Observable
* has finished sending push-based notifications.
* @return {void}
*/
Subscriber.prototype.complete = function () {
if (!this.isStopped) {
this.isStopped = true;
this._complete();
}
};
Subscriber.prototype.unsubscribe = function () {
if (this.closed) {
return;
}
this.isStopped = true;
_super.prototype.unsubscribe.call(this);
};
Subscriber.prototype._next = function (value) {
this.destination.next(value);
};
Subscriber.prototype._error = function (err) {
this.destination.error(err);
this.unsubscribe();
};
Subscriber.prototype._complete = function () {
this.destination.complete();
this.unsubscribe();
};
Subscriber.prototype._unsubscribeAndRecycle = function () {
var _a = this, _parent = _a._parent, _parents = _a._parents;
this._parent = null;
this._parents = null;
this.unsubscribe();
this.closed = false;
this.isStopped = false;
this._parent = _parent;
this._parents = _parents;
return this;
};
return Subscriber;
}(Subscription_1.Subscription));
var Subscriber_2 = Subscriber;
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var SafeSubscriber = (function (_super) {
__extends$2(SafeSubscriber, _super);
function SafeSubscriber(_parentSubscriber, observerOrNext, error, complete) {
_super.call(this);
this._parentSubscriber = _parentSubscriber;
var next;
var context = this;
if (isFunction_1.isFunction(observerOrNext)) {
next = observerOrNext;
}
else if (observerOrNext) {
next = observerOrNext.next;
error = observerOrNext.error;
complete = observerOrNext.complete;
if (observerOrNext !== Observer.empty) {
context = Object.create(observerOrNext);
if (isFunction_1.isFunction(context.unsubscribe)) {
this.add(context.unsubscribe.bind(context));
}
context.unsubscribe = this.unsubscribe.bind(this);
}
}
this._context = context;
this._next = next;
this._error = error;
this._complete = complete;
}
SafeSubscriber.prototype.next = function (value) {
if (!this.isStopped && this._next) {
var _parentSubscriber = this._parentSubscriber;
if (!_parentSubscriber.syncErrorThrowable) {
this.__tryOrUnsub(this._next, value);
}
else if (this.__tryOrSetError(_parentSubscriber, this._next, value)) {
this.unsubscribe();
}
}
};
SafeSubscriber.prototype.error = function (err) {
if (!this.isStopped) {
var _parentSubscriber = this._parentSubscriber;
if (this._error) {
if (!_parentSubscriber.syncErrorThrowable) {
this.__tryOrUnsub(this._error, err);
this.unsubscribe();
}
else {
this.__tryOrSetError(_parentSubscriber, this._error, err);
this.unsubscribe();
}
}
else if (!_parentSubscriber.syncErrorThrowable) {
this.unsubscribe();
throw err;
}
else {
_parentSubscriber.syncErrorValue = err;
_parentSubscriber.syncErrorThrown = true;
this.unsubscribe();
}
}
};
SafeSubscriber.prototype.complete = function () {
var _this = this;
if (!this.isStopped) {
var _parentSubscriber = this._parentSubscriber;
if (this._complete) {
var wrappedComplete = function () { return _this._complete.call(_this._context); };
if (!_parentSubscriber.syncErrorThrowable) {
this.__tryOrUnsub(wrappedComplete);
this.unsubscribe();
}
else {
this.__tryOrSetError(_parentSubscriber, wrappedComplete);
this.unsubscribe();
}
}
else {
this.unsubscribe();
}
}
};
SafeSubscriber.prototype.__tryOrUnsub = function (fn, value) {
try {
fn.call(this._context, value);
}
catch (err) {
this.unsubscribe();
throw err;
}
};
SafeSubscriber.prototype.__tryOrSetError = function (parent, fn, value) {
try {
fn.call(this._context, value);
}
catch (err) {
parent.syncErrorValue = err;
parent.syncErrorThrown = true;
return true;
}
return false;
};
SafeSubscriber.prototype._unsubscribe = function () {
var _parentSubscriber = this._parentSubscriber;
this._context = null;
this._parentSubscriber = null;
_parentSubscriber.unsubscribe();
};
return SafeSubscriber;
}(Subscriber));
var Subscriber_1 = {
Subscriber: Subscriber_2
};
var __extends$1 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/* tslint:enable:max-line-length */
/**
* Filter items emitted by the source Observable by only emitting those that
* satisfy a specified predicate.
*
* <span class="informal">Like
* [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter),
* it only emits a value from the source if it passes a criterion function.</span>
*
* <img src="./img/filter.png" width="100%">
*
* Similar to the well-known `Array.prototype.filter` method, this operator
* takes values from the source Observable, passes them through a `predicate`
* function and only emits those values that yielded `true`.
*
* @example <caption>Emit only click events whose target was a DIV element</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var clicksOnDivs = clicks.filter(ev => ev.target.tagName === 'DIV');
* clicksOnDivs.subscribe(x => console.log(x));
*
* @see {@link distinct}
* @see {@link distinctUntilChanged}
* @see {@link distinctUntilKeyChanged}
* @see {@link ignoreElements}
* @see {@link partition}
* @see {@link skip}
*
* @param {function(value: T, index: number): boolean} predicate A function that
* evaluates each value emitted by the source Observable. If it returns `true`,
* the value is emitted, if `false` the value is not passed to the output
* Observable. The `index` parameter is the number `i` for the i-th source
* emission that has happened since the subscription, starting from the number
* `0`.
* @param {any} [thisArg] An optional argument to determine the value of `this`
* in the `predicate` function.
* @return {Observable} An Observable of values from the source that were
* allowed by the `predicate` function.
* @method filter
* @owner Observable
*/
function filter(predicate, thisArg) {
return function filterOperatorFunction(source) {
return source.lift(new FilterOperator(predicate, thisArg));
};
}
var filter_2 = filter;
var FilterOperator = (function () {
function FilterOperator(predicate, thisArg) {
this.predicate = predicate;
this.thisArg = thisArg;
}
FilterOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new FilterSubscriber(subscriber, this.predicate, this.thisArg));
};
return FilterOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var FilterSubscriber = (function (_super) {
__extends$1(FilterSubscriber, _super);
function FilterSubscriber(destination, predicate, thisArg) {
_super.call(this, destination);
this.predicate = predicate;
this.thisArg = thisArg;
this.count = 0;
}
// the try catch block below is left specifically for
// optimization and perf reasons. a tryCatcher is not necessary here.
FilterSubscriber.prototype._next = function (value) {
var result;
try {
result = this.predicate.call(this.thisArg, value, this.count++);
}
catch (err) {
this.destination.error(err);
return;
}
if (result) {
this.destination.next(value);
}
};
return FilterSubscriber;
}(Subscriber_1.Subscriber));
var __extends$5 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* An error thrown when an element was queried at a certain index of an
* Observable, but no such index or position exists in that sequence.
*
* @see {@link elementAt}
* @see {@link take}
* @see {@link takeLast}
*
* @class ArgumentOutOfRangeError
*/
var ArgumentOutOfRangeError = (function (_super) {
__extends$5(ArgumentOutOfRangeError, _super);
function ArgumentOutOfRangeError() {
var err = _super.call(this, 'argument out of range');
this.name = err.name = 'ArgumentOutOfRangeError';
this.stack = err.stack;
this.message = err.message;
}
return ArgumentOutOfRangeError;
}(Error));
var ArgumentOutOfRangeError_2 = ArgumentOutOfRangeError;
var ArgumentOutOfRangeError_1 = {
ArgumentOutOfRangeError: ArgumentOutOfRangeError_2
};
function toSubscriber(nextOrObserver, error, complete) {
if (nextOrObserver) {
if (nextOrObserver instanceof Subscriber_1.Subscriber) {
return nextOrObserver;
}
if (nextOrObserver[rxSubscriber.rxSubscriber]) {
return nextOrObserver[rxSubscriber.rxSubscriber]();
}
}
if (!nextOrObserver && !error && !complete) {
return new Subscriber_1.Subscriber(Observer.empty);
}
return new Subscriber_1.Subscriber(nextOrObserver, error, complete);
}
var toSubscriber_2 = toSubscriber;
var toSubscriber_1 = {
toSubscriber: toSubscriber_2
};
var observable = createCommonjsModule(function (module, exports) {
function getSymbolObservable(context) {
var $$observable;
var Symbol = context.Symbol;
if (typeof Symbol === 'function') {
if (Symbol.observable) {
$$observable = Symbol.observable;
}
else {
$$observable = Symbol('observable');
Symbol.observable = $$observable;
}
}
else {
$$observable = '@@observable';
}
return $$observable;
}
exports.getSymbolObservable = getSymbolObservable;
exports.observable = getSymbolObservable(root.root);
/**
* @deprecated use observable instead
*/
exports.$$observable = exports.observable;
});
var observable_1 = observable.getSymbolObservable;
var observable_2 = observable.observable;
var observable_3 = observable.$$observable;
/* tslint:disable:no-empty */
function noop() { }
var noop_2 = noop;
var noop_1 = {
noop: noop_2
};
/* tslint:enable:max-line-length */
function pipe() {
var fns = [];
for (var _i = 0; _i < arguments.length; _i++) {
fns[_i - 0] = arguments[_i];
}
return pipeFromArray(fns);
}
var pipe_2 = pipe;
/* @internal */
function pipeFromArray(fns) {
if (!fns) {
return noop_1.noop;
}
if (fns.length === 1) {
return fns[0];
}
return function piped(input) {
return fns.reduce(function (prev, fn) { return fn(prev); }, input);
};
}
var pipeFromArray_1 = pipeFromArray;
var pipe_1 = {
pipe: pipe_2,
pipeFromArray: pipeFromArray_1
};
/**
* A representation of any set of values over any amount of time. This is the most basic building block
* of RxJS.
*
* @class Observable<T>
*/
var Observable$2 = (function () {
/**
* @constructor
* @param {Function} subscribe the function that is called when the Observable is
* initially subscribed to. This function is given a Subscriber, to which new values
* can be `next`ed, or an `error` method can be called to raise an error, or
* `complete` can be called to notify of a successful completion.
*/
function Observable$$1(subscribe) {
this._isScalar = false;
if (subscribe) {
this._subscribe = subscribe;
}
}
/**
* Creates a new Observable, with this Observable as the source, and the passed
* operator defined as the new observable's operator.
* @method lift
* @param {Operator} operator the operator defining the operation to take on the observable
* @return {Observable} a new observable with the Operator applied
*/
Observable$$1.prototype.lift = function (operator) {
var observable$$1 = new Observable$$1();
observable$$1.source = this;
observable$$1.operator = operator;
return observable$$1;
};
/**
* Invokes an execution of an Observable and registers Observer handlers for notifications it will emit.
*
* <span class="informal">Use it when you have all these Observables, but still nothing is happening.</span>
*
* `subscribe` is not a regular operator, but a method that calls Observable's internal `subscribe` function. It
* might be for example a function that you passed to a {@link create} static factory, but most of the time it is
* a library implementation, which defines what and when will be emitted by an Observable. This means that calling
* `subscribe` is actually the moment when Observable starts its work, not when it is created, as it is often
* thought.
*
* Apart from starting the execution of an Observable, this method allows you to listen for values
* that an Observable emits, as well as for when it completes or errors. You can achieve this in two
* following ways.
*
* The first way is creating an object that implements {@link Observer} interface. It should have methods
* defined by that interface, but note that it should be just a regular JavaScript object, which you can create
* yourself in any way you want (ES6 class, classic function constructor, object literal etc.). In particular do
* not attempt to use any RxJS implementation details to create Observers - you don't need them. Remember also
* that your object does not have to implement all methods. If you find yourself creating a method that doesn't
* do anything, you can simply omit it. Note however, that if `error` method is not provided, all errors will
* be left uncaught.
*
* The second way is to give up on Observer object altogether and simply provide callback functions in place of its methods.
* This means you can provide three functions as arguments to `subscribe`, where first function is equivalent
* of a `next` method, second of an `error` method and third of a `complete` method. Just as in case of Observer,
* if you do not need to listen for something, you can omit a function, preferably by passing `undefined` or `null`,
* since `subscribe` recognizes these functions by where they were placed in function call. When it comes
* to `error` function, just as before, if not provided, errors emitted by an Observable will be thrown.
*
* Whatever style of calling `subscribe` you use, in both cases it returns a Subscription object.
* This object allows you to call `unsubscribe` on it, which in turn will stop work that an Observable does and will clean
* up all resources that an Observable used. Note that cancelling a subscription will not call `complete` callback
* provided to `subscribe` function, which is reserved for a regular completion signal that comes from an Observable.
*
* Remember that callbacks provided to `subscribe` are not guaranteed to be called asynchronously.
* It is an Observable itself that decides when these functions will be called. For example {@link of}
* by default emits all its values synchronously. Always check documentation for how given Observable
* will behave when subscribed and if its default behavior can be modified with a {@link Scheduler}.
*
* @example <caption>Subscribe with an Observer</caption>
* const sumObserver = {
* sum: 0,
* next(value) {
* console.log('Adding: ' + value);
* this.sum = this.sum + value;
* },
* error() { // We actually could just remove this method,
* }, // since we do not really care about errors right now.
* complete() {
* console.log('Sum equals: ' + this.sum);
* }
* };
*
* Rx.Observable.of(1, 2, 3) // Synchronously emits 1, 2, 3 and then completes.
* .subscribe(sumObserver);
*
* // Logs:
* // "Adding: 1"
* // "Adding: 2"
* // "Adding: 3"
* // "Sum equals: 6"
*
*
* @example <caption>Subscribe with functions</caption>
* let sum = 0;
*
* Rx.Observable.of(1, 2, 3)
* .subscribe(
* function(value) {
* console.log('Adding: ' + value);
* sum = sum + value;
* },
* undefined,
* function() {
* console.log('Sum equals: ' + sum);
* }
* );
*
* // Logs:
* // "Adding: 1"
* // "Adding: 2"
* // "Adding: 3"
* // "Sum equals: 6"
*
*
* @example <caption>Cancel a subscription</caption>
* const subscription = Rx.Observable.interval(1000).subscribe(
* num => console.log(num),
* undefined,
* () => console.log('completed!') // Will not be called, even
* ); // when cancelling subscription
*
*
* setTimeout(() => {
* subscription.unsubscribe();
* console.log('unsubscribed!');
* }, 2500);
*
* // Logs:
* // 0 after 1s
* // 1 after 2s
* // "unsubscribed!" after 2.5s
*
*
* @param {Observer|Function} observerOrNext (optional) Either an observer with methods to be called,
* or the first of three possible handlers, which is the handler for each value emitted from the subscribed
* Observable.
* @param {Function} error (optional) A handler for a terminal event resulting from an error. If no error handler is provided,
* the error will be thrown as unhandled.
* @param {Function} complete (optional) A handler for a terminal event resulting from successful completion.
* @return {ISubscription} a subscription reference to the registered handlers
* @method subscribe
*/
Observable$$1.prototype.subscribe = function (observerOrNext, error, complete) {
var operator = this.operator;
var sink = toSubscriber_1.toSubscriber(observerOrNext, error, complete);
if (operator) {
operator.call(sink, this.source);
}
else {
sink.add(this.source || !sink.syncErrorThrowable ? this._subscribe(sink) : this._trySubscribe(sink));
}
if (sink.syncErrorThrowable) {
sink.syncErrorThrowable = false;
if (sink.syncErrorThrown) {
throw sink.syncErrorValue;
}
}
return sink;
};
Observable$$1.prototype._trySubscribe = function (sink) {
try {
return this._subscribe(sink);
}
catch (err) {
sink.syncErrorThrown = true;
sink.syncErrorValue = err;
sink.error(err);
}
};
/**
* @method forEach
* @param {Function} next a handler for each value emitted by the observable
* @param {PromiseConstructor} [PromiseCtor] a constructor function used to instantiate the Promise
* @return {Promise} a promise that either resolves on observable completion or
* rejects with the handled error
*/
Observable$$1.prototype.forEach = function (next, PromiseCtor) {
var _this = this;
if (!PromiseCtor) {
if (root.root.Rx && root.root.Rx.config && root.root.Rx.config.Promise) {
PromiseCtor = root.root.Rx.config.Promise;
}
else if (root.root.Promise) {
PromiseCtor = root.root.Promise;
}
}
if (!PromiseCtor) {
throw new Error('no Promise impl found');
}
return new PromiseCtor(function (resolve, reject) {
// Must be declared in a separate statement to avoid a RefernceError when
// accessing subscription below in the closure due to Temporal Dead Zone.
var subscription;
subscription = _this.subscribe(function (value) {
if (subscription) {
// if there is a subscription, then we can surmise
// the next handling is asynchronous. Any errors thrown
// need to be rejected explicitly and unsubscribe must be
// called manually
try {
next(value);
}
catch (err) {
reject(err);
subscription.unsubscribe();
}
}
else {
// if there is NO subscription, then we're getting a nexted
// value synchronously during subscription. We can just call it.
// If it errors, Observable's `subscribe` will ensure the
// unsubscription logic is called, then synchronously rethrow the error.
// After that, Promise will trap the error and send it
// down the rejection path.
next(value);
}
}, reject, resolve);
});
};
Observable$$1.prototype._subscribe = function (subscriber) {
return this.source.subscribe(subscriber);
};
/**
* An interop point defined by the es7-observable spec https://github.com/zenparsing/es-observable
* @method Symbol.observable
* @return {Observable} this instance of the observable
*/
Observable$$1.prototype[observable.observable] = function () {
return this;
};
/* tslint:enable:max-line-length */
/**
* Used to stitch together functional operators into a chain.
* @method pipe
* @return {Observable} the Observable result of all of the operators having
* been called in the order they were passed in.
*
* @example
*
* import { map, filter, scan } from 'rxjs/operators';
*
* Rx.Observable.interval(1000)
* .pipe(
* filter(x => x % 2 === 0),
* map(x => x + x),
* scan((acc, x) => acc + x)
* )
* .subscribe(x => console.log(x))
*/
Observable$$1.prototype.pipe = function () {
var operations = [];
for (var _i = 0; _i < arguments.length; _i++) {
operations[_i - 0] = arguments[_i];
}
if (operations.length === 0) {
return this;
}
return pipe_1.pipeFromArray(operations)(this);
};
/* tslint:enable:max-line-length */
Observable$$1.prototype.toPromise = function (PromiseCtor) {
var _this = this;
if (!PromiseCtor) {
if (root.root.Rx && root.root.Rx.config && root.root.Rx.config.Promise) {
PromiseCtor = root.root.Rx.config.Promise;
}
else if (root.root.Promise) {
PromiseCtor = root.root.Promise;
}
}
if (!PromiseCtor) {
throw new Error('no Promise impl found');
}
return new PromiseCtor(function (resolve, reject) {
var value;
_this.subscribe(function (x) { return value = x; }, function (err) { return reject(err); }, function () { return resolve(value); });
});
};
// HACK: Since TypeScript inherits static properties too, we have to
// fight against TypeScript here so Subject can have a different static create signature
/**
* Creates a new cold Observable by calling the Observable constructor
* @static true
* @owner Observable
* @method create
* @param {Function} subscribe? the subscriber function to be passed to the Observable constructor
* @return {Observable} a new cold observable
*/
Observable$$1.create = function (subscribe) {
return new Observable$$1(subscribe);
};
return Observable$$1;
}());
var Observable_2 = Observable$2;
var Observable_1 = {
Observable: Observable_2
};
var __extends$6 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var EmptyObservable = (function (_super) {
__extends$6(EmptyObservable, _super);
function EmptyObservable(scheduler) {
_super.call(this);
this.scheduler = scheduler;
}
/**
* Creates an Observable that emits no items to the Observer and immediately
* emits a complete notification.
*
* <span class="informal">Just emits 'complete', and nothing else.
* </span>
*
* <img src="./img/empty.png" width="100%">
*
* This static operator is useful for creating a simple Observable that only
* emits the complete notification. It can be used for composing with other
* Observables, such as in a {@link mergeMap}.
*
* @example <caption>Emit the number 7, then complete.</caption>
* var result = Rx.Observable.empty().startWith(7);
* result.subscribe(x => console.log(x));
*
* @example <caption>Map and flatten only odd numbers to the sequence 'a', 'b', 'c'</caption>
* var interval = Rx.Observable.interval(1000);
* var result = interval.mergeMap(x =>
* x % 2 === 1 ? Rx.Observable.of('a', 'b', 'c') : Rx.Observable.empty()
* );
* result.subscribe(x => console.log(x));
*
* // Results in the following to the console:
* // x is equal to the count on the interval eg(0,1,2,3,...)
* // x will occur every 1000ms
* // if x % 2 is equal to 1 print abc
* // if x % 2 is not equal to 1 nothing will be output
*
* @see {@link create}
* @see {@link never}
* @see {@link of}
* @see {@link throw}
*
* @param {Scheduler} [scheduler] A {@link IScheduler} to use for scheduling
* the emission of the complete notification.
* @return {Observable} An "empty" Observable: emits only the complete
* notification.
* @static true
* @name empty
* @owner Observable
*/
EmptyObservable.create = function (scheduler) {
return new EmptyObservable(scheduler);
};
EmptyObservable.dispatch = function (arg) {
var subscriber = arg.subscriber;
subscriber.complete();
};
EmptyObservable.prototype._subscribe = function (subscriber) {
var scheduler = this.scheduler;
if (scheduler) {
return scheduler.schedule(EmptyObservable.dispatch, 0, { subscriber: subscriber });
}
else {
subscriber.complete();
}
};
return EmptyObservable;
}(Observable_1.Observable));
var EmptyObservable_2 = EmptyObservable;
var EmptyObservable_1 = {
EmptyObservable: EmptyObservable_2
};
var __extends$4 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Emits only the first `count` values emitted by the source Observable.
*
* <span class="informal">Takes the first `count` values from the source, then
* completes.</span>
*
* <img src="./img/take.png" width="100%">
*
* `take` returns an Observable that emits only the first `count` values emitted
* by the source Observable. If the source emits fewer than `count` values then
* all of its values are emitted. After that, it completes, regardless if the
* source completes.
*
* @example <caption>Take the first 5 seconds of an infinite 1-second interval Observable</caption>
* var interval = Rx.Observable.interval(1000);
* var five = interval.take(5);
* five.subscribe(x => console.log(x));
*
* @see {@link takeLast}
* @see {@link takeUntil}
* @see {@link takeWhile}
* @see {@link skip}
*
* @throws {ArgumentOutOfRangeError} When using `take(i)`, it delivers an
* ArgumentOutOrRangeError to the Observer's `error` callback if `i < 0`.
*
* @param {number} count The maximum number of `next` values to emit.
* @return {Observable<T>} An Observable that emits only the first `count`
* values emitted by the source Observable, or all of the values from the source
* if the source emits fewer than `count` values.
* @method take
* @owner Observable
*/
function take(count) {
return function (source) {
if (count === 0) {
return new EmptyObservable_1.EmptyObservable();
}
else {
return source.lift(new TakeOperator(count));
}
};
}
var take_2 = take;
var TakeOperator = (function () {
function TakeOperator(total) {
this.total = total;
if (this.total < 0) {
throw new ArgumentOutOfRangeError_1.ArgumentOutOfRangeError;
}
}
TakeOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new TakeSubscriber(subscriber, this.total));
};
return TakeOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var TakeSubscriber = (function (_super) {
__extends$4(TakeSubscriber, _super);
function TakeSubscriber(destination, total) {
_super.call(this, destination);
this.total = total;
this.count = 0;
}
TakeSubscriber.prototype._next = function (value) {
var total = this.total;
var count = ++this.count;
if (count <= total) {
this.destination.next(value);
if (count === total) {
this.destination.complete();
this.unsubscribe();
}
}
};
return TakeSubscriber;
}(Subscriber_1.Subscriber));
var __extends$8 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var OuterSubscriber = (function (_super) {
__extends$8(OuterSubscriber, _super);
function OuterSubscriber() {
_super.apply(this, arguments);
}
OuterSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
this.destination.next(innerValue);
};
OuterSubscriber.prototype.notifyError = function (error, innerSub) {
this.destination.error(error);
};
OuterSubscriber.prototype.notifyComplete = function (innerSub) {
this.destination.complete();
};
return OuterSubscriber;
}(Subscriber_1.Subscriber));
var OuterSubscriber_2 = OuterSubscriber;
var OuterSubscriber_1 = {
OuterSubscriber: OuterSubscriber_2
};
var isArrayLike_1 = (function (x) { return x && typeof x.length === 'number'; });
var isArrayLike = {
isArrayLike: isArrayLike_1
};
function isPromise(value) {
return value && typeof value.subscribe !== 'function' && typeof value.then === 'function';
}
var isPromise_2 = isPromise;
var isPromise_1 = {
isPromise: isPromise_2
};
var iterator = createCommonjsModule(function (module, exports) {
function symbolIteratorPonyfill(root$$2) {
var Symbol = root$$2.Symbol;
if (typeof Symbol === 'function') {
if (!Symbol.iterator) {
Symbol.iterator = Symbol('iterator polyfill');
}
return Symbol.iterator;
}
else {
// [for Mozilla Gecko 27-35:](https://mzl.la/2ewE1zC)
var Set_1 = root$$2.Set;
if (Set_1 && typeof new Set_1()['@@iterator'] === 'function') {
return '@@iterator';
}
var Map_1 = root$$2.Map;
// required for compatability with es6-shim
if (Map_1) {
var keys = Object.getOwnPropertyNames(Map_1.prototype);
for (var i = 0; i < keys.length; ++i) {
var key = keys[i];
// according to spec, Map.prototype[@@iterator] and Map.orototype.entries must be equal.
if (key !== 'entries' && key !== 'size' && Map_1.prototype[key] === Map_1.prototype['entries']) {
return key;
}
}
}
return '@@iterator';
}
}
exports.symbolIteratorPonyfill = symbolIteratorPonyfill;
exports.iterator = symbolIteratorPonyfill(root.root);
/**
* @deprecated use iterator instead
*/
exports.$$iterator = exports.iterator;
});
var iterator_1 = iterator.symbolIteratorPonyfill;
var iterator_2 = iterator.iterator;
var iterator_3 = iterator.$$iterator;
var __extends$9 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var InnerSubscriber = (function (_super) {
__extends$9(InnerSubscriber, _super);
function InnerSubscriber(parent, outerValue, outerIndex) {
_super.call(this);
this.parent = parent;
this.outerValue = outerValue;
this.outerIndex = outerIndex;
this.index = 0;
}
InnerSubscriber.prototype._next = function (value) {
this.parent.notifyNext(this.outerValue, value, this.outerIndex, this.index++, this);
};
InnerSubscriber.prototype._error = function (error) {
this.parent.notifyError(error, this);
this.unsubscribe();
};
InnerSubscriber.prototype._complete = function () {
this.parent.notifyComplete(this);
this.unsubscribe();
};
return InnerSubscriber;
}(Subscriber_1.Subscriber));
var InnerSubscriber_2 = InnerSubscriber;
var InnerSubscriber_1 = {
InnerSubscriber: InnerSubscriber_2
};
function subscribeToResult(outerSubscriber, result, outerValue, outerIndex) {
var destination = new InnerSubscriber_1.InnerSubscriber(outerSubscriber, outerValue, outerIndex);
if (destination.closed) {
return null;
}
if (result instanceof Observable_1.Observable) {
if (result._isScalar) {
destination.next(result.value);
destination.complete();
return null;
}
else {
destination.syncErrorThrowable = true;
return result.subscribe(destination);
}
}
else if (isArrayLike.isArrayLike(result)) {
for (var i = 0, len = result.length; i < len && !destination.closed; i++) {
destination.next(result[i]);
}
if (!destination.closed) {
destination.complete();
}
}
else if (isPromise_1.isPromise(result)) {
result.then(function (value) {
if (!destination.closed) {
destination.next(value);
destination.complete();
}
}, function (err) { return destination.error(err); })
.then(null, function (err) {
// Escaping the Promise trap: globally throw unhandled errors
root.root.setTimeout(function () { throw err; });
});
return destination;
}
else if (result && typeof result[iterator.iterator] === 'function') {
var iterator$$1 = result[iterator.iterator]();
do {
var item = iterator$$1.next();
if (item.done) {
destination.complete();
break;
}
destination.next(item.value);
if (destination.closed) {
break;
}
} while (true);
}
else if (result && typeof result[observable.observable] === 'function') {
var obs = result[observable.observable]();
if (typeof obs.subscribe !== 'function') {
destination.error(new TypeError('Provided object does not correctly implement Symbol.observable'));
}
else {
return obs.subscribe(new InnerSubscriber_1.InnerSubscriber(outerSubscriber, outerValue, outerIndex));
}
}
else {
var value = isObject_1.isObject(result) ? 'an invalid object' : "'" + result + "'";
var msg = ("You provided " + value + " where a stream was expected.")
+ ' You can provide an Observable, Promise, Array, or Iterable.';
destination.error(new TypeError(msg));
}
return null;
}
var subscribeToResult_2 = subscribeToResult;
var subscribeToResult_1 = {
subscribeToResult: subscribeToResult_2
};
var __extends$7 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/* tslint:enable:max-line-length */
/**
* Projects each source value to an Observable which is merged in the output
* Observable, emitting values only from the most recently projected Observable.
*
* <span class="informal">Maps each value to an Observable, then flattens all of
* these inner Observables using {@link switch}.</span>
*
* <img src="./img/switchMap.png" width="100%">
*
* Returns an Observable that emits items based on applying a function that you
* supply to each item emitted by the source Observable, where that function
* returns an (so-called "inner") Observable. Each time it observes one of these
* inner Observables, the output Observable begins emitting the items emitted by
* that inner Observable. When a new inner Observable is emitted, `switchMap`
* stops emitting items from the earlier-emitted inner Observable and begins
* emitting items from the new one. It continues to behave like this for
* subsequent inner Observables.
*
* @example <caption>Rerun an interval Observable on every click event</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var result = clicks.switchMap((ev) => Rx.Observable.interval(1000));
* result.subscribe(x => console.log(x));
*
* @see {@link concatMap}
* @see {@link exhaustMap}
* @see {@link mergeMap}
* @see {@link switch}
* @see {@link switchMapTo}
*
* @param {function(value: T, ?index: number): ObservableInput} project A function
* that, when applied to an item emitted by the source Observable, returns an
* Observable.
* @param {function(outerValue: T, innerValue: I, outerIndex: number, innerIndex: number): any} [resultSelector]
* A function to produce the value on the output Observable based on the values
* and the indices of the source (outer) emission and the inner Observable
* emission. The arguments passed to this function are:
* - `outerValue`: the value that came from the source
* - `innerValue`: the value that came from the projected Observable
* - `outerIndex`: the "index" of the value that came from the source
* - `innerIndex`: the "index" of the value from the projected Observable
* @return {Observable} An Observable that emits the result of applying the
* projection function (and the optional `resultSelector`) to each item emitted
* by the source Observable and taking only the values from the most recently
* projected inner Observable.
* @method switchMap
* @owner Observable
*/
function switchMap(project, resultSelector) {
return function switchMapOperatorFunction(source) {
return source.lift(new SwitchMapOperator(project, resultSelector));
};
}
var switchMap_2 = switchMap;
var SwitchMapOperator = (function () {
function SwitchMapOperator(project, resultSelector) {
this.project = project;
this.resultSelector = resultSelector;
}
SwitchMapOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new SwitchMapSubscriber(subscriber, this.project, this.resultSelector));
};
return SwitchMapOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var SwitchMapSubscriber = (function (_super) {
__extends$7(SwitchMapSubscriber, _super);
function SwitchMapSubscriber(destination, project, resultSelector) {
_super.call(this, destination);
this.project = project;
this.resultSelector = resultSelector;
this.index = 0;
}
SwitchMapSubscriber.prototype._next = function (value) {
var result;
var index = this.index++;
try {
result = this.project(value, index);
}
catch (error) {
this.destination.error(error);
return;
}
this._innerSub(result, value, index);
};
SwitchMapSubscriber.prototype._innerSub = function (result, value, index) {
var innerSubscription = this.innerSubscription;
if (innerSubscription) {
innerSubscription.unsubscribe();
}
this.add(this.innerSubscription = subscribeToResult_1.subscribeToResult(this, result, value, index));
};
SwitchMapSubscriber.prototype._complete = function () {
var innerSubscription = this.innerSubscription;
if (!innerSubscription || innerSubscription.closed) {
_super.prototype._complete.call(this);
}
};
SwitchMapSubscriber.prototype._unsubscribe = function () {
this.innerSubscription = null;
};
SwitchMapSubscriber.prototype.notifyComplete = function (innerSub) {
this.remove(innerSub);
this.innerSubscription = null;
if (this.isStopped) {
_super.prototype._complete.call(this);
}
};
SwitchMapSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
if (this.resultSelector) {
this._tryNotifyNext(outerValue, innerValue, outerIndex, innerIndex);
}
else {
this.destination.next(innerValue);
}
};
SwitchMapSubscriber.prototype._tryNotifyNext = function (outerValue, innerValue, outerIndex, innerIndex) {
var result;
try {
result = this.resultSelector(outerValue, innerValue, outerIndex, innerIndex);
}
catch (err) {
this.destination.error(err);
return;
}
this.destination.next(result);
};
return SwitchMapSubscriber;
}(OuterSubscriber_1.OuterSubscriber));
var __extends$10 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/* tslint:enable:max-line-length */
/**
* Perform a side effect for every emission on the source Observable, but return
* an Observable that is identical to the source.
*
* <span class="informal">Intercepts each emission on the source and runs a
* function, but returns an output which is identical to the source as long as errors don't occur.</span>
*
* <img src="./img/do.png" width="100%">
*
* Returns a mirrored Observable of the source Observable, but modified so that
* the provided Observer is called to perform a side effect for every value,
* error, and completion emitted by the source. Any errors that are thrown in
* the aforementioned Observer or handlers are safely sent down the error path
* of the output Observable.
*
* This operator is useful for debugging your Observables for the correct values
* or performing other side effects.
*
* Note: this is different to a `subscribe` on the Observable. If the Observable
* returned by `do` is not subscribed, the side effects specified by the
* Observer will never happen. `do` therefore simply spies on existing
* execution, it does not trigger an execution to happen like `subscribe` does.
*
* @example <caption>Map every click to the clientX position of that click, while also logging the click event</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var positions = clicks
* .do(ev => console.log(ev))
* .map(ev => ev.clientX);
* positions.subscribe(x => console.log(x));
*
* @see {@link map}
* @see {@link subscribe}
*
* @param {Observer|function} [nextOrObserver] A normal Observer object or a
* callback for `next`.
* @param {function} [error] Callback for errors in the source.
* @param {function} [complete] Callback for the completion of the source.
* @return {Observable} An Observable identical to the source, but runs the
* specified Observer or callback(s) for each item.
* @name tap
*/
function tap(nextOrObserver, error, complete) {
return function tapOperatorFunction(source) {
return source.lift(new DoOperator(nextOrObserver, error, complete));
};
}
var tap_2 = tap;
var DoOperator = (function () {
function DoOperator(nextOrObserver, error, complete) {
this.nextOrObserver = nextOrObserver;
this.error = error;
this.complete = complete;
}
DoOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new DoSubscriber(subscriber, this.nextOrObserver, this.error, this.complete));
};
return DoOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var DoSubscriber = (function (_super) {
__extends$10(DoSubscriber, _super);
function DoSubscriber(destination, nextOrObserver, error, complete) {
_super.call(this, destination);
var safeSubscriber = new Subscriber_1.Subscriber(nextOrObserver, error, complete);
safeSubscriber.syncErrorThrowable = true;
this.add(safeSubscriber);
this.safeSubscriber = safeSubscriber;
}
DoSubscriber.prototype._next = function (value) {
var safeSubscriber = this.safeSubscriber;
safeSubscriber.next(value);
if (safeSubscriber.syncErrorThrown) {
this.destination.error(safeSubscriber.syncErrorValue);
}
else {
this.destination.next(value);
}
};
DoSubscriber.prototype._error = function (err) {
var safeSubscriber = this.safeSubscriber;
safeSubscriber.error(err);
if (safeSubscriber.syncErrorThrown) {
this.destination.error(safeSubscriber.syncErrorValue);
}
else {
this.destination.error(err);
}
};
DoSubscriber.prototype._complete = function () {
var safeSubscriber = this.safeSubscriber;
safeSubscriber.complete();
if (safeSubscriber.syncErrorThrown) {
this.destination.error(safeSubscriber.syncErrorValue);
}
else {
this.destination.complete();
}
};
return DoSubscriber;
}(Subscriber_1.Subscriber));
var __extends$13 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* A unit of work to be executed in a {@link Scheduler}. An action is typically
* created from within a Scheduler and an RxJS user does not need to concern
* themselves about creating and manipulating an Action.
*
* ```ts
* class Action<T> extends Subscription {
* new (scheduler: Scheduler, work: (state?: T) => void);
* schedule(state?: T, delay: number = 0): Subscription;
* }
* ```
*
* @class Action<T>
*/
var Action = (function (_super) {
__extends$13(Action, _super);
function Action(scheduler, work) {
_super.call(this);
}
/**
* Schedules this action on its parent Scheduler for execution. May be passed
* some context object, `state`. May happen at some point in the future,
* according to the `delay` parameter, if specified.
* @param {T} [state] Some contextual data that the `work` function uses when
* called by the Scheduler.
* @param {number} [delay] Time to wait before executing the work, where the
* time unit is implicit and defined by the Scheduler.
* @return {void}
*/
Action.prototype.schedule = function (state$$1, delay) {
if (delay === void 0) {
delay = 0;
}
return this;
};
return Action;
}(Subscription_1.Subscription));
var Action_2 = Action;
var Action_1 = {
Action: Action_2
};
var __extends$12 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var AsyncAction = (function (_super) {
__extends$12(AsyncAction, _super);
function AsyncAction(scheduler, work) {
_super.call(this, scheduler, work);
this.scheduler = scheduler;
this.work = work;
this.pending = false;
}
AsyncAction.prototype.schedule = function (state$$1, delay) {
if (delay === void 0) {
delay = 0;
}
if (this.closed) {
return this;
}
// Always replace the current state with the new state.
this.state = state$$1;
// Set the pending flag indicating that this action has been scheduled, or
// has recursively rescheduled itself.
this.pending = true;
var id = this.id;
var scheduler = this.scheduler;
//
// Important implementation note:
//
// Actions only execute once by default, unless rescheduled from within the
// scheduled callback. This allows us to implement single and repeat
// actions via the same code path, without adding API surface area, as well
// as mimic traditional recursion but across asynchronous boundaries.
//
// However, JS runtimes and timers distinguish between intervals achieved by
// serial `setTimeout` calls vs. a single `setInterval` call. An interval of
// serial `setTimeout` calls can be individually delayed, which delays
// scheduling the next `setTimeout`, and so on. `setInterval` attempts to
// guarantee the interval callback will be invoked more precisely to the
// interval period, regardless of load.
//
// Therefore, we use `setInterval` to schedule single and repeat actions.
// If the action reschedules itself with the same delay, the interval is not
// canceled. If the action doesn't reschedule, or reschedules with a
// different delay, the interval will be canceled after scheduled callback
// execution.
//
if (id != null) {
this.id = this.recycleAsyncId(scheduler, id, delay);
}
this.delay = delay;
// If this action has already an async Id, don't request a new one.
this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
return this;
};
AsyncAction.prototype.requestAsyncId = function (scheduler, id, delay) {
if (delay === void 0) {
delay = 0;
}
return root.root.setInterval(scheduler.flush.bind(scheduler, this), delay);
};
AsyncAction.prototype.recycleAsyncId = function (scheduler, id, delay) {
if (delay === void 0) {
delay = 0;
}
// If this action is rescheduled with the same delay time, don't clear the interval id.
if (delay !== null && this.delay === delay && this.pending === false) {
return id;
}
// Otherwise, if the action's delay time is different from the current delay,
// or the action has been rescheduled before it's executed, clear the interval id
return root.root.clearInterval(id) && undefined || undefined;
};
/**
* Immediately executes this action and the `work` it contains.
* @return {any}
*/
AsyncAction.prototype.execute = function (state$$1, delay) {
if (this.closed) {
return new Error('executing a cancelled action');
}
this.pending = false;
var error = this._execute(state$$1, delay);
if (error) {
return error;
}
else if (this.pending === false && this.id != null) {
// Dequeue if the action didn't reschedule itself. Don't call
// unsubscribe(), because the action could reschedule later.
// For example:
// ```
// scheduler.schedule(function doWork(counter) {
// /* ... I'm a busy worker bee ... */
// var originalAction = this;
// /* wait 100ms before rescheduling the action */
// setTimeout(function () {
// originalAction.schedule(counter + 1);
// }, 100);
// }, 1000);
// ```
this.id = this.recycleAsyncId(this.scheduler, this.id, null);
}
};
AsyncAction.prototype._execute = function (state$$1, delay) {
var errored = false;
var errorValue = undefined;
try {
this.work(state$$1);
}
catch (e) {
errored = true;
errorValue = !!e && e || new Error(e);
}
if (errored) {
this.unsubscribe();
return errorValue;
}
};
AsyncAction.prototype._unsubscribe = function () {
var id = this.id;
var scheduler = this.scheduler;
var actions = scheduler.actions;
var index = actions.indexOf(this);
this.work = null;
this.state = null;
this.pending = false;
this.scheduler = null;
if (index !== -1) {
actions.splice(index, 1);
}
if (id != null) {
this.id = this.recycleAsyncId(scheduler, id, null);
}
this.delay = null;
};
return AsyncAction;
}(Action_1.Action));
var AsyncAction_2 = AsyncAction;
var AsyncAction_1 = {
AsyncAction: AsyncAction_2
};
/**
* An execution context and a data structure to order tasks and schedule their
* execution. Provides a notion of (potentially virtual) time, through the
* `now()` getter method.
*
* Each unit of work in a Scheduler is called an {@link Action}.
*
* ```ts
* class Scheduler {
* now(): number;
* schedule(work, delay?, state?): Subscription;
* }
* ```
*
* @class Scheduler
*/
var Scheduler = (function () {
function Scheduler(SchedulerAction, now) {
if (now === void 0) {
now = Scheduler.now;
}
this.SchedulerAction = SchedulerAction;
this.now = now;
}
/**
* Schedules a function, `work`, for execution. May happen at some point in
* the future, according to the `delay` parameter, if specified. May be passed
* some context object, `state`, which will be passed to the `work` function.
*
* The given arguments will be processed an stored as an Action object in a
* queue of actions.
*
* @param {function(state: ?T): ?Subscription} work A function representing a
* task, or some unit of work to be executed by the Scheduler.
* @param {number} [delay] Time to wait before executing the work, where the
* time unit is implicit and defined by the Scheduler itself.
* @param {T} [state] Some contextual data that the `work` function uses when
* called by the Scheduler.
* @return {Subscription} A subscription in order to be able to unsubscribe
* the scheduled work.
*/
Scheduler.prototype.schedule = function (work, delay, state$$1) {
if (delay === void 0) {
delay = 0;
}
return new this.SchedulerAction(this, work).schedule(state$$1, delay);
};
Scheduler.now = Date.now ? Date.now : function () { return +new Date(); };
return Scheduler;
}());
var Scheduler_2 = Scheduler;
var Scheduler_1 = {
Scheduler: Scheduler_2
};
var __extends$14 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var AsyncScheduler = (function (_super) {
__extends$14(AsyncScheduler, _super);
function AsyncScheduler() {
_super.apply(this, arguments);
this.actions = [];
/**
* A flag to indicate whether the Scheduler is currently executing a batch of
* queued actions.
* @type {boolean}
*/
this.active = false;
/**
* An internal ID used to track the latest asynchronous task such as those
* coming from `setTimeout`, `setInterval`, `requestAnimationFrame`, and
* others.
* @type {any}
*/
this.scheduled = undefined;
}
AsyncScheduler.prototype.flush = function (action) {
var actions = this.actions;
if (this.active) {
actions.push(action);
return;
}
var error;
this.active = true;
do {
if (error = action.execute(action.state, action.delay)) {
break;
}
} while (action = actions.shift()); // exhaust the scheduler queue
this.active = false;
if (error) {
while (action = actions.shift()) {
action.unsubscribe();
}
throw error;
}
};
return AsyncScheduler;
}(Scheduler_1.Scheduler));
var AsyncScheduler_2 = AsyncScheduler;
var AsyncScheduler_1 = {
AsyncScheduler: AsyncScheduler_2
};
/**
*
* Async Scheduler
*
* <span class="informal">Schedule task as if you used setTimeout(task, duration)</span>
*
* `async` scheduler schedules tasks asynchronously, by putting them on the JavaScript
* event loop queue. It is best used to delay tasks in time or to schedule tasks repeating
* in intervals.
*
* If you just want to "defer" task, that is to perform it right after currently
* executing synchronous code ends (commonly achieved by `setTimeout(deferredTask, 0)`),
* better choice will be the {@link asap} scheduler.
*
* @example <caption>Use async scheduler to delay task</caption>
* const task = () => console.log('it works!');
*
* Rx.Scheduler.async.schedule(task, 2000);
*
* // After 2 seconds logs:
* // "it works!"
*
*
* @example <caption>Use async scheduler to repeat task in intervals</caption>
* function task(state) {
* console.log(state);
* this.schedule(state + 1, 1000); // `this` references currently executing Action,
* // which we reschedule with new state and delay
* }
*
* Rx.Scheduler.async.schedule(task, 3000, 0);
*
* // Logs:
* // 0 after 3s
* // 1 after 4s
* // 2 after 5s
* // 3 after 6s
*
* @static true
* @name async
* @owner Scheduler
*/
var async_1 = new AsyncScheduler_1.AsyncScheduler(AsyncAction_1.AsyncAction);
var async = {
async: async_1
};
function isDate(value) {
return value instanceof Date && !isNaN(+value);
}
var isDate_2 = isDate;
var isDate_1 = {
isDate: isDate_2
};
/**
* Represents a push-based event or value that an {@link Observable} can emit.
* This class is particularly useful for operators that manage notifications,
* like {@link materialize}, {@link dematerialize}, {@link observeOn}, and
* others. Besides wrapping the actual delivered value, it also annotates it
* with metadata of, for instance, what type of push message it is (`next`,
* `error`, or `complete`).
*
* @see {@link materialize}
* @see {@link dematerialize}
* @see {@link observeOn}
*
* @class Notification<T>
*/
var Notification = (function () {
function Notification(kind, value, error) {
this.kind = kind;
this.value = value;
this.error = error;
this.hasValue = kind === 'N';
}
/**
* Delivers to the given `observer` the value wrapped by this Notification.
* @param {Observer} observer
* @return
*/
Notification.prototype.observe = function (observer) {
switch (this.kind) {
case 'N':
return observer.next && observer.next(this.value);
case 'E':
return observer.error && observer.error(this.error);
case 'C':
return observer.complete && observer.complete();
}
};
/**
* Given some {@link Observer} callbacks, deliver the value represented by the
* current Notification to the correctly corresponding callback.
* @param {function(value: T): void} next An Observer `next` callback.
* @param {function(err: any): void} [error] An Observer `error` callback.
* @param {function(): void} [complete] An Observer `complete` callback.
* @return {any}
*/
Notification.prototype.do = function (next, error, complete) {
var kind = this.kind;
switch (kind) {
case 'N':
return next && next(this.value);
case 'E':
return error && error(this.error);
case 'C':
return complete && complete();
}
};
/**
* Takes an Observer or its individual callback functions, and calls `observe`
* or `do` methods accordingly.
* @param {Observer|function(value: T): void} nextOrObserver An Observer or
* the `next` callback.
* @param {function(err: any): void} [error] An Observer `error` callback.
* @param {function(): void} [complete] An Observer `complete` callback.
* @return {any}
*/
Notification.prototype.accept = function (nextOrObserver, error, complete) {
if (nextOrObserver && typeof nextOrObserver.next === 'function') {
return this.observe(nextOrObserver);
}
else {
return this.do(nextOrObserver, error, complete);
}
};
/**
* Returns a simple Observable that just delivers the notification represented
* by this Notification instance.
* @return {any}
*/
Notification.prototype.toObservable = function () {
var kind = this.kind;
switch (kind) {
case 'N':
return Observable_1.Observable.of(this.value);
case 'E':
return Observable_1.Observable.throw(this.error);
case 'C':
return Observable_1.Observable.empty();
}
throw new Error('unexpected notification kind value');
};
/**
* A shortcut to create a Notification instance of the type `next` from a
* given value.
* @param {T} value The `next` value.
* @return {Notification<T>} The "next" Notification representing the
* argument.
*/
Notification.createNext = function (value) {
if (typeof value !== 'undefined') {
return new Notification('N', value);
}
return Notification.undefinedValueNotification;
};
/**
* A shortcut to create a Notification instance of the type `error` from a
* given error.
* @param {any} [err] The `error` error.
* @return {Notification<T>} The "error" Notification representing the
* argument.
*/
Notification.createError = function (err) {
return new Notification('E', undefined, err);
};
/**
* A shortcut to create a Notification instance of the type `complete`.
* @return {Notification<any>} The valueless "complete" Notification.
*/
Notification.createComplete = function () {
return Notification.completeNotification;
};
Notification.completeNotification = new Notification('C');
Notification.undefinedValueNotification = new Notification('N', undefined);
return Notification;
}());
var Notification_2 = Notification;
var Notification_1 = {
Notification: Notification_2
};
var __extends$11 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Delays the emission of items from the source Observable by a given timeout or
* until a given Date.
*
* <span class="informal">Time shifts each item by some specified amount of
* milliseconds.</span>
*
* <img src="./img/delay.png" width="100%">
*
* If the delay argument is a Number, this operator time shifts the source
* Observable by that amount of time expressed in milliseconds. The relative
* time intervals between the values are preserved.
*
* If the delay argument is a Date, this operator time shifts the start of the
* Observable execution until the given date occurs.
*
* @example <caption>Delay each click by one second</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var delayedClicks = clicks.delay(1000); // each click emitted after 1 second
* delayedClicks.subscribe(x => console.log(x));
*
* @example <caption>Delay all clicks until a future date happens</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var date = new Date('March 15, 2050 12:00:00'); // in the future
* var delayedClicks = clicks.delay(date); // click emitted only after that date
* delayedClicks.subscribe(x => console.log(x));
*
* @see {@link debounceTime}
* @see {@link delayWhen}
*
* @param {number|Date} delay The delay duration in milliseconds (a `number`) or
* a `Date` until which the emission of the source items is delayed.
* @param {Scheduler} [scheduler=async] The IScheduler to use for
* managing the timers that handle the time-shift for each item.
* @return {Observable} An Observable that delays the emissions of the source
* Observable by the specified timeout or Date.
* @method delay
* @owner Observable
*/
function delay(delay, scheduler) {
if (scheduler === void 0) {
scheduler = async.async;
}
var absoluteDelay = isDate_1.isDate(delay);
var delayFor = absoluteDelay ? (+delay - scheduler.now()) : Math.abs(delay);
return function (source) { return source.lift(new DelayOperator(delayFor, scheduler)); };
}
var delay_2 = delay;
var DelayOperator = (function () {
function DelayOperator(delay, scheduler) {
this.delay = delay;
this.scheduler = scheduler;
}
DelayOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new DelaySubscriber(subscriber, this.delay, this.scheduler));
};
return DelayOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var DelaySubscriber = (function (_super) {
__extends$11(DelaySubscriber, _super);
function DelaySubscriber(destination, delay, scheduler) {
_super.call(this, destination);
this.delay = delay;
this.scheduler = scheduler;
this.queue = [];
this.active = false;
this.errored = false;
}
DelaySubscriber.dispatch = function (state$$1) {
var source = state$$1.source;
var queue = source.queue;
var scheduler = state$$1.scheduler;
var destination = state$$1.destination;
while (queue.length > 0 && (queue[0].time - scheduler.now()) <= 0) {
queue.shift().notification.observe(destination);
}
if (queue.length > 0) {
var delay_1 = Math.max(0, queue[0].time - scheduler.now());
this.schedule(state$$1, delay_1);
}
else {
source.active = false;
}
};
DelaySubscriber.prototype._schedule = function (scheduler) {
this.active = true;
this.add(scheduler.schedule(DelaySubscriber.dispatch, this.delay, {
source: this, destination: this.destination, scheduler: scheduler
}));
};
DelaySubscriber.prototype.scheduleNotification = function (notification) {
if (this.errored === true) {
return;
}
var scheduler = this.scheduler;
var message = new DelayMessage(scheduler.now() + this.delay, notification);
this.queue.push(message);
if (this.active === false) {
this._schedule(scheduler);
}
};
DelaySubscriber.prototype._next = function (value) {
this.scheduleNotification(Notification_1.Notification.createNext(value));
};
DelaySubscriber.prototype._error = function (err) {
this.errored = true;
this.queue = [];
this.destination.error(err);
};
DelaySubscriber.prototype._complete = function () {
this.scheduleNotification(Notification_1.Notification.createComplete());
};
return DelaySubscriber;
}(Subscriber_1.Subscriber));
var DelayMessage = (function () {
function DelayMessage(time, notification) {
this.time = time;
this.notification = notification;
}
return DelayMessage;
}());
var __extends$16 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var ScalarObservable = (function (_super) {
__extends$16(ScalarObservable, _super);
function ScalarObservable(value, scheduler) {
_super.call(this);
this.value = value;
this.scheduler = scheduler;
this._isScalar = true;
if (scheduler) {
this._isScalar = false;
}
}
ScalarObservable.create = function (value, scheduler) {
return new ScalarObservable(value, scheduler);
};
ScalarObservable.dispatch = function (state$$1) {
var done = state$$1.done, value = state$$1.value, subscriber = state$$1.subscriber;
if (done) {
subscriber.complete();
return;
}
subscriber.next(value);
if (subscriber.closed) {
return;
}
state$$1.done = true;
this.schedule(state$$1);
};
ScalarObservable.prototype._subscribe = function (subscriber) {
var value = this.value;
var scheduler = this.scheduler;
if (scheduler) {
return scheduler.schedule(ScalarObservable.dispatch, 0, {
done: false, value: value, subscriber: subscriber
});
}
else {
subscriber.next(value);
if (!subscriber.closed) {
subscriber.complete();
}
}
};
return ScalarObservable;
}(Observable_1.Observable));
var ScalarObservable_2 = ScalarObservable;
var ScalarObservable_1 = {
ScalarObservable: ScalarObservable_2
};
function isScheduler(value) {
return value && typeof value.schedule === 'function';
}
var isScheduler_2 = isScheduler;
var isScheduler_1 = {
isScheduler: isScheduler_2
};
var __extends$15 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var ArrayObservable = (function (_super) {
__extends$15(ArrayObservable, _super);
function ArrayObservable(array, scheduler) {
_super.call(this);
this.array = array;
this.scheduler = scheduler;
if (!scheduler && array.length === 1) {
this._isScalar = true;
this.value = array[0];
}
}
ArrayObservable.create = function (array, scheduler) {
return new ArrayObservable(array, scheduler);
};
/**
* Creates an Observable that emits some values you specify as arguments,
* immediately one after the other, and then emits a complete notification.
*
* <span class="informal">Emits the arguments you provide, then completes.
* </span>
*
* <img src="./img/of.png" width="100%">
*
* This static operator is useful for creating a simple Observable that only
* emits the arguments given, and the complete notification thereafter. It can
* be used for composing with other Observables, such as with {@link concat}.
* By default, it uses a `null` IScheduler, which means the `next`
* notifications are sent synchronously, although with a different IScheduler
* it is possible to determine when those notifications will be delivered.
*
* @example <caption>Emit 10, 20, 30, then 'a', 'b', 'c', then start ticking every second.</caption>
* var numbers = Rx.Observable.of(10, 20, 30);
* var letters = Rx.Observable.of('a', 'b', 'c');
* var interval = Rx.Observable.interval(1000);
* var result = numbers.concat(letters).concat(interval);
* result.subscribe(x => console.log(x));
*
* @see {@link create}
* @see {@link empty}
* @see {@link never}
* @see {@link throw}
*
* @param {...T} values Arguments that represent `next` values to be emitted.
* @param {Scheduler} [scheduler] A {@link IScheduler} to use for scheduling
* the emissions of the `next` notifications.
* @return {Observable<T>} An Observable that emits each given input value.
* @static true
* @name of
* @owner Observable
*/
ArrayObservable.of = function () {
var array = [];
for (var _i = 0; _i < arguments.length; _i++) {
array[_i - 0] = arguments[_i];
}
var scheduler = array[array.length - 1];
if (isScheduler_1.isScheduler(scheduler)) {
array.pop();
}
else {
scheduler = null;
}
var len = array.length;
if (len > 1) {
return new ArrayObservable(array, scheduler);
}
else if (len === 1) {
return new ScalarObservable_1.ScalarObservable(array[0], scheduler);
}
else {
return new EmptyObservable_1.EmptyObservable(scheduler);
}
};
ArrayObservable.dispatch = function (state$$1) {
var array = state$$1.array, index = state$$1.index, count = state$$1.count, subscriber = state$$1.subscriber;
if (index >= count) {
subscriber.complete();
return;
}
subscriber.next(array[index]);
if (subscriber.closed) {
return;
}
state$$1.index = index + 1;
this.schedule(state$$1);
};
ArrayObservable.prototype._subscribe = function (subscriber) {
var index = 0;
var array = this.array;
var count = array.length;
var scheduler = this.scheduler;
if (scheduler) {
return scheduler.schedule(ArrayObservable.dispatch, 0, {
array: array, index: index, count: count, subscriber: subscriber
});
}
else {
for (var i = 0; i < count && !subscriber.closed; i++) {
subscriber.next(array[i]);
}
subscriber.complete();
}
};
return ArrayObservable;
}(Observable_1.Observable));
var ArrayObservable_2 = ArrayObservable;
var ArrayObservable_1 = {
ArrayObservable: ArrayObservable_2
};
var of_1 = ArrayObservable_1.ArrayObservable.of;
var of$2 = {
of: of_1
};
var __extends$18 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var PromiseObservable = (function (_super) {
__extends$18(PromiseObservable, _super);
function PromiseObservable(promise, scheduler) {
_super.call(this);
this.promise = promise;
this.scheduler = scheduler;
}
/**
* Converts a Promise to an Observable.
*
* <span class="informal">Returns an Observable that just emits the Promise's
* resolved value, then completes.</span>
*
* Converts an ES2015 Promise or a Promises/A+ spec compliant Promise to an
* Observable. If the Promise resolves with a value, the output Observable
* emits that resolved value as a `next`, and then completes. If the Promise
* is rejected, then the output Observable emits the corresponding Error.
*
* @example <caption>Convert the Promise returned by Fetch to an Observable</caption>
* var result = Rx.Observable.fromPromise(fetch('http://myserver.com/'));
* result.subscribe(x => console.log(x), e => console.error(e));
*
* @see {@link bindCallback}
* @see {@link from}
*
* @param {PromiseLike<T>} promise The promise to be converted.
* @param {Scheduler} [scheduler] An optional IScheduler to use for scheduling
* the delivery of the resolved value (or the rejection).
* @return {Observable<T>} An Observable which wraps the Promise.
* @static true
* @name fromPromise
* @owner Observable
*/
PromiseObservable.create = function (promise, scheduler) {
return new PromiseObservable(promise, scheduler);
};
PromiseObservable.prototype._subscribe = function (subscriber) {
var _this = this;
var promise = this.promise;
var scheduler = this.scheduler;
if (scheduler == null) {
if (this._isScalar) {
if (!subscriber.closed) {
subscriber.next(this.value);
subscriber.complete();
}
}
else {
promise.then(function (value) {
_this.value = value;
_this._isScalar = true;
if (!subscriber.closed) {
subscriber.next(value);
subscriber.complete();
}
}, function (err) {
if (!subscriber.closed) {
subscriber.error(err);
}
})
.then(null, function (err) {
// escape the promise trap, throw unhandled errors
root.root.setTimeout(function () { throw err; });
});
}
}
else {
if (this._isScalar) {
if (!subscriber.closed) {
return scheduler.schedule(dispatchNext, 0, { value: this.value, subscriber: subscriber });
}
}
else {
promise.then(function (value) {
_this.value = value;
_this._isScalar = true;
if (!subscriber.closed) {
subscriber.add(scheduler.schedule(dispatchNext, 0, { value: value, subscriber: subscriber }));
}
}, function (err) {
if (!subscriber.closed) {
subscriber.add(scheduler.schedule(dispatchError, 0, { err: err, subscriber: subscriber }));
}
})
.then(null, function (err) {
// escape the promise trap, throw unhandled errors
root.root.setTimeout(function () { throw err; });
});
}
}
};
return PromiseObservable;
}(Observable_1.Observable));
var PromiseObservable_2 = PromiseObservable;
function dispatchNext(arg) {
var value = arg.value, subscriber = arg.subscriber;
if (!subscriber.closed) {
subscriber.next(value);
subscriber.complete();
}
}
function dispatchError(arg) {
var err = arg.err, subscriber = arg.subscriber;
if (!subscriber.closed) {
subscriber.error(err);
}
}
var PromiseObservable_1 = {
PromiseObservable: PromiseObservable_2
};
var __extends$19 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var IteratorObservable = (function (_super) {
__extends$19(IteratorObservable, _super);
function IteratorObservable(iterator$$2, scheduler) {
_super.call(this);
this.scheduler = scheduler;
if (iterator$$2 == null) {
throw new Error('iterator cannot be null.');
}
this.iterator = getIterator(iterator$$2);
}
IteratorObservable.create = function (iterator$$2, scheduler) {
return new IteratorObservable(iterator$$2, scheduler);
};
IteratorObservable.dispatch = function (state$$1) {
var index = state$$1.index, hasError = state$$1.hasError, iterator$$2 = state$$1.iterator, subscriber = state$$1.subscriber;
if (hasError) {
subscriber.error(state$$1.error);
return;
}
var result = iterator$$2.next();
if (result.done) {
subscriber.complete();
return;
}
subscriber.next(result.value);
state$$1.index = index + 1;
if (subscriber.closed) {
if (typeof iterator$$2.return === 'function') {
iterator$$2.return();
}
return;
}
this.schedule(state$$1);
};
IteratorObservable.prototype._subscribe = function (subscriber) {
var index = 0;
var _a = this, iterator$$2 = _a.iterator, scheduler = _a.scheduler;
if (scheduler) {
return scheduler.schedule(IteratorObservable.dispatch, 0, {
index: index, iterator: iterator$$2, subscriber: subscriber
});
}
else {
do {
var result = iterator$$2.next();
if (result.done) {
subscriber.complete();
break;
}
else {
subscriber.next(result.value);
}
if (subscriber.closed) {
if (typeof iterator$$2.return === 'function') {
iterator$$2.return();
}
break;
}
} while (true);
}
};
return IteratorObservable;
}(Observable_1.Observable));
var IteratorObservable_2 = IteratorObservable;
var StringIterator = (function () {
function StringIterator(str, idx, len) {
if (idx === void 0) {
idx = 0;
}
if (len === void 0) {
len = str.length;
}
this.str = str;
this.idx = idx;
this.len = len;
}
StringIterator.prototype[iterator.iterator] = function () { return (this); };
StringIterator.prototype.next = function () {
return this.idx < this.len ? {
done: false,
value: this.str.charAt(this.idx++)
} : {
done: true,
value: undefined
};
};
return StringIterator;
}());
var ArrayIterator = (function () {
function ArrayIterator(arr, idx, len) {
if (idx === void 0) {
idx = 0;
}
if (len === void 0) {
len = toLength(arr);
}
this.arr = arr;
this.idx = idx;
this.len = len;
}
ArrayIterator.prototype[iterator.iterator] = function () { return this; };
ArrayIterator.prototype.next = function () {
return this.idx < this.len ? {
done: false,
value: this.arr[this.idx++]
} : {
done: true,
value: undefined
};
};
return ArrayIterator;
}());
function getIterator(obj) {
var i = obj[iterator.iterator];
if (!i && typeof obj === 'string') {
return new StringIterator(obj);
}
if (!i && obj.length !== undefined) {
return new ArrayIterator(obj);
}
if (!i) {
throw new TypeError('object is not iterable');
}
return obj[iterator.iterator]();
}
var maxSafeInteger = Math.pow(2, 53) - 1;
function toLength(o) {
var len = +o.length;
if (isNaN(len)) {
return 0;
}
if (len === 0 || !numberIsFinite(len)) {
return len;
}
len = sign(len) * Math.floor(Math.abs(len));
if (len <= 0) {
return 0;
}
if (len > maxSafeInteger) {
return maxSafeInteger;
}
return len;
}
function numberIsFinite(value) {
return typeof value === 'number' && root.root.isFinite(value);
}
function sign(value) {
var valueAsNumber = +value;
if (valueAsNumber === 0) {
return valueAsNumber;
}
if (isNaN(valueAsNumber)) {
return valueAsNumber;
}
return valueAsNumber < 0 ? -1 : 1;
}
var IteratorObservable_1 = {
IteratorObservable: IteratorObservable_2
};
var __extends$20 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var ArrayLikeObservable = (function (_super) {
__extends$20(ArrayLikeObservable, _super);
function ArrayLikeObservable(arrayLike, scheduler) {
_super.call(this);
this.arrayLike = arrayLike;
this.scheduler = scheduler;
if (!scheduler && arrayLike.length === 1) {
this._isScalar = true;
this.value = arrayLike[0];
}
}
ArrayLikeObservable.create = function (arrayLike, scheduler) {
var length = arrayLike.length;
if (length === 0) {
return new EmptyObservable_1.EmptyObservable();
}
else if (length === 1) {
return new ScalarObservable_1.ScalarObservable(arrayLike[0], scheduler);
}
else {
return new ArrayLikeObservable(arrayLike, scheduler);
}
};
ArrayLikeObservable.dispatch = function (state$$1) {
var arrayLike = state$$1.arrayLike, index = state$$1.index, length = state$$1.length, subscriber = state$$1.subscriber;
if (subscriber.closed) {
return;
}
if (index >= length) {
subscriber.complete();
return;
}
subscriber.next(arrayLike[index]);
state$$1.index = index + 1;
this.schedule(state$$1);
};
ArrayLikeObservable.prototype._subscribe = function (subscriber) {
var index = 0;
var _a = this, arrayLike = _a.arrayLike, scheduler = _a.scheduler;
var length = arrayLike.length;
if (scheduler) {
return scheduler.schedule(ArrayLikeObservable.dispatch, 0, {
arrayLike: arrayLike, index: index, length: length, subscriber: subscriber
});
}
else {
for (var i = 0; i < length && !subscriber.closed; i++) {
subscriber.next(arrayLike[i]);
}
subscriber.complete();
}
};
return ArrayLikeObservable;
}(Observable_1.Observable));
var ArrayLikeObservable_2 = ArrayLikeObservable;
var ArrayLikeObservable_1 = {
ArrayLikeObservable: ArrayLikeObservable_2
};
var __extends$21 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
*
* Re-emits all notifications from source Observable with specified scheduler.
*
* <span class="informal">Ensure a specific scheduler is used, from outside of an Observable.</span>
*
* `observeOn` is an operator that accepts a scheduler as a first parameter, which will be used to reschedule
* notifications emitted by the source Observable. It might be useful, if you do not have control over
* internal scheduler of a given Observable, but want to control when its values are emitted nevertheless.
*
* Returned Observable emits the same notifications (nexted values, complete and error events) as the source Observable,
* but rescheduled with provided scheduler. Note that this doesn't mean that source Observables internal
* scheduler will be replaced in any way. Original scheduler still will be used, but when the source Observable emits
* notification, it will be immediately scheduled again - this time with scheduler passed to `observeOn`.
* An anti-pattern would be calling `observeOn` on Observable that emits lots of values synchronously, to split
* that emissions into asynchronous chunks. For this to happen, scheduler would have to be passed into the source
* Observable directly (usually into the operator that creates it). `observeOn` simply delays notifications a
* little bit more, to ensure that they are emitted at expected moments.
*
* As a matter of fact, `observeOn` accepts second parameter, which specifies in milliseconds with what delay notifications
* will be emitted. The main difference between {@link delay} operator and `observeOn` is that `observeOn`
* will delay all notifications - including error notifications - while `delay` will pass through error
* from source Observable immediately when it is emitted. In general it is highly recommended to use `delay` operator
* for any kind of delaying of values in the stream, while using `observeOn` to specify which scheduler should be used
* for notification emissions in general.
*
* @example <caption>Ensure values in subscribe are called just before browser repaint.</caption>
* const intervals = Rx.Observable.interval(10); // Intervals are scheduled
* // with async scheduler by default...
*
* intervals
* .observeOn(Rx.Scheduler.animationFrame) // ...but we will observe on animationFrame
* .subscribe(val => { // scheduler to ensure smooth animation.
* someDiv.style.height = val + 'px';
* });
*
* @see {@link delay}
*
* @param {IScheduler} scheduler Scheduler that will be used to reschedule notifications from source Observable.
* @param {number} [delay] Number of milliseconds that states with what delay every notification should be rescheduled.
* @return {Observable<T>} Observable that emits the same notifications as the source Observable,
* but with provided scheduler.
*
* @method observeOn
* @owner Observable
*/
function observeOn(scheduler, delay) {
if (delay === void 0) {
delay = 0;
}
return function observeOnOperatorFunction(source) {
return source.lift(new ObserveOnOperator(scheduler, delay));
};
}
var observeOn_2 = observeOn;
var ObserveOnOperator = (function () {
function ObserveOnOperator(scheduler, delay) {
if (delay === void 0) {
delay = 0;
}
this.scheduler = scheduler;
this.delay = delay;
}
ObserveOnOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new ObserveOnSubscriber(subscriber, this.scheduler, this.delay));
};
return ObserveOnOperator;
}());
var ObserveOnOperator_1 = ObserveOnOperator;
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var ObserveOnSubscriber = (function (_super) {
__extends$21(ObserveOnSubscriber, _super);
function ObserveOnSubscriber(destination, scheduler, delay) {
if (delay === void 0) {
delay = 0;
}
_super.call(this, destination);
this.scheduler = scheduler;
this.delay = delay;
}
ObserveOnSubscriber.dispatch = function (arg) {
var notification = arg.notification, destination = arg.destination;
notification.observe(destination);
this.unsubscribe();
};
ObserveOnSubscriber.prototype.scheduleMessage = function (notification) {
this.add(this.scheduler.schedule(ObserveOnSubscriber.dispatch, this.delay, new ObserveOnMessage(notification, this.destination)));
};
ObserveOnSubscriber.prototype._next = function (value) {
this.scheduleMessage(Notification_1.Notification.createNext(value));
};
ObserveOnSubscriber.prototype._error = function (err) {
this.scheduleMessage(Notification_1.Notification.createError(err));
};
ObserveOnSubscriber.prototype._complete = function () {
this.scheduleMessage(Notification_1.Notification.createComplete());
};
return ObserveOnSubscriber;
}(Subscriber_1.Subscriber));
var ObserveOnSubscriber_1 = ObserveOnSubscriber;
var ObserveOnMessage = (function () {
function ObserveOnMessage(notification, destination) {
this.notification = notification;
this.destination = destination;
}
return ObserveOnMessage;
}());
var ObserveOnMessage_1 = ObserveOnMessage;
var observeOn_1 = {
observeOn: observeOn_2,
ObserveOnOperator: ObserveOnOperator_1,
ObserveOnSubscriber: ObserveOnSubscriber_1,
ObserveOnMessage: ObserveOnMessage_1
};
var __extends$17 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var FromObservable = (function (_super) {
__extends$17(FromObservable, _super);
function FromObservable(ish, scheduler) {
_super.call(this, null);
this.ish = ish;
this.scheduler = scheduler;
}
/**
* Creates an Observable from an Array, an array-like object, a Promise, an
* iterable object, or an Observable-like object.
*
* <span class="informal">Converts almost anything to an Observable.</span>
*
* <img src="./img/from.png" width="100%">
*
* Convert various other objects and data types into Observables. `from`
* converts a Promise or an array-like or an
* [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable)
* object into an Observable that emits the items in that promise or array or
* iterable. A String, in this context, is treated as an array of characters.
* Observable-like objects (contains a function named with the ES2015 Symbol
* for Observable) can also be converted through this operator.
*
* @example <caption>Converts an array to an Observable</caption>
* var array = [10, 20, 30];
* var result = Rx.Observable.from(array);
* result.subscribe(x => console.log(x));
*
* // Results in the following:
* // 10 20 30
*
* @example <caption>Convert an infinite iterable (from a generator) to an Observable</caption>
* function* generateDoubles(seed) {
* var i = seed;
* while (true) {
* yield i;
* i = 2 * i; // double it
* }
* }
*
* var iterator = generateDoubles(3);
* var result = Rx.Observable.from(iterator).take(10);
* result.subscribe(x => console.log(x));
*
* // Results in the following:
* // 3 6 12 24 48 96 192 384 768 1536
*
* @see {@link create}
* @see {@link fromEvent}
* @see {@link fromEventPattern}
* @see {@link fromPromise}
*
* @param {ObservableInput<T>} ish A subscribable object, a Promise, an
* Observable-like, an Array, an iterable or an array-like object to be
* converted.
* @param {Scheduler} [scheduler] The scheduler on which to schedule the
* emissions of values.
* @return {Observable<T>} The Observable whose values are originally from the
* input object that was converted.
* @static true
* @name from
* @owner Observable
*/
FromObservable.create = function (ish, scheduler) {
if (ish != null) {
if (typeof ish[observable.observable] === 'function') {
if (ish instanceof Observable_1.Observable && !scheduler) {
return ish;
}
return new FromObservable(ish, scheduler);
}
else if (isArray.isArray(ish)) {
return new ArrayObservable_1.ArrayObservable(ish, scheduler);
}
else if (isPromise_1.isPromise(ish)) {
return new PromiseObservable_1.PromiseObservable(ish, scheduler);
}
else if (typeof ish[iterator.iterator] === 'function' || typeof ish === 'string') {
return new IteratorObservable_1.IteratorObservable(ish, scheduler);
}
else if (isArrayLike.isArrayLike(ish)) {
return new ArrayLikeObservable_1.ArrayLikeObservable(ish, scheduler);
}
}
throw new TypeError((ish !== null && typeof ish || ish) + ' is not observable');
};
FromObservable.prototype._subscribe = function (subscriber) {
var ish = this.ish;
var scheduler = this.scheduler;
if (scheduler == null) {
return ish[observable.observable]().subscribe(subscriber);
}
else {
return ish[observable.observable]().subscribe(new observeOn_1.ObserveOnSubscriber(subscriber, scheduler, 0));
}
};
return FromObservable;
}(Observable_1.Observable));
var FromObservable_2 = FromObservable;
var FromObservable_1 = {
FromObservable: FromObservable_2
};
var from_1 = FromObservable_1.FromObservable.create;
var from = {
from: from_1
};
var __extends$22 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/* tslint:enable:max-line-length */
/**
* Projects each source value to an Observable which is merged in the output
* Observable.
*
* <span class="informal">Maps each value to an Observable, then flattens all of
* these inner Observables using {@link mergeAll}.</span>
*
* <img src="./img/mergeMap.png" width="100%">
*
* Returns an Observable that emits items based on applying a function that you
* supply to each item emitted by the source Observable, where that function
* returns an Observable, and then merging those resulting Observables and
* emitting the results of this merger.
*
* @example <caption>Map and flatten each letter to an Observable ticking every 1 second</caption>
* var letters = Rx.Observable.of('a', 'b', 'c');
* var result = letters.mergeMap(x =>
* Rx.Observable.interval(1000).map(i => x+i)
* );
* result.subscribe(x => console.log(x));
*
* // Results in the following:
* // a0
* // b0
* // c0
* // a1
* // b1
* // c1
* // continues to list a,b,c with respective ascending integers
*
* @see {@link concatMap}
* @see {@link exhaustMap}
* @see {@link merge}
* @see {@link mergeAll}
* @see {@link mergeMapTo}
* @see {@link mergeScan}
* @see {@link switchMap}
*
* @param {function(value: T, ?index: number): ObservableInput} project A function
* that, when applied to an item emitted by the source Observable, returns an
* Observable.
* @param {function(outerValue: T, innerValue: I, outerIndex: number, innerIndex: number): any} [resultSelector]
* A function to produce the value on the output Observable based on the values
* and the indices of the source (outer) emission and the inner Observable
* emission. The arguments passed to this function are:
* - `outerValue`: the value that came from the source
* - `innerValue`: the value that came from the projected Observable
* - `outerIndex`: the "index" of the value that came from the source
* - `innerIndex`: the "index" of the value from the projected Observable
* @param {number} [concurrent=Number.POSITIVE_INFINITY] Maximum number of input
* Observables being subscribed to concurrently.
* @return {Observable} An Observable that emits the result of applying the
* projection function (and the optional `resultSelector`) to each item emitted
* by the source Observable and merging the results of the Observables obtained
* from this transformation.
* @method mergeMap
* @owner Observable
*/
function mergeMap(project, resultSelector, concurrent) {
if (concurrent === void 0) {
concurrent = Number.POSITIVE_INFINITY;
}
return function mergeMapOperatorFunction(source) {
if (typeof resultSelector === 'number') {
concurrent = resultSelector;
resultSelector = null;
}
return source.lift(new MergeMapOperator(project, resultSelector, concurrent));
};
}
var mergeMap_2 = mergeMap;
var MergeMapOperator = (function () {
function MergeMapOperator(project, resultSelector, concurrent) {
if (concurrent === void 0) {
concurrent = Number.POSITIVE_INFINITY;
}
this.project = project;
this.resultSelector = resultSelector;
this.concurrent = concurrent;
}
MergeMapOperator.prototype.call = function (observer, source) {
return source.subscribe(new MergeMapSubscriber(observer, this.project, this.resultSelector, this.concurrent));
};
return MergeMapOperator;
}());
var MergeMapOperator_1 = MergeMapOperator;
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var MergeMapSubscriber = (function (_super) {
__extends$22(MergeMapSubscriber, _super);
function MergeMapSubscriber(destination, project, resultSelector, concurrent) {
if (concurrent === void 0) {
concurrent = Number.POSITIVE_INFINITY;
}
_super.call(this, destination);
this.project = project;
this.resultSelector = resultSelector;
this.concurrent = concurrent;
this.hasCompleted = false;
this.buffer = [];
this.active = 0;
this.index = 0;
}
MergeMapSubscriber.prototype._next = function (value) {
if (this.active < this.concurrent) {
this._tryNext(value);
}
else {
this.buffer.push(value);
}
};
MergeMapSubscriber.prototype._tryNext = function (value) {
var result;
var index = this.index++;
try {
result = this.project(value, index);
}
catch (err) {
this.destination.error(err);
return;
}
this.active++;
this._innerSub(result, value, index);
};
MergeMapSubscriber.prototype._innerSub = function (ish, value, index) {
this.add(subscribeToResult_1.subscribeToResult(this, ish, value, index));
};
MergeMapSubscriber.prototype._complete = function () {
this.hasCompleted = true;
if (this.active === 0 && this.buffer.length === 0) {
this.destination.complete();
}
};
MergeMapSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
if (this.resultSelector) {
this._notifyResultSelector(outerValue, innerValue, outerIndex, innerIndex);
}
else {
this.destination.next(innerValue);
}
};
MergeMapSubscriber.prototype._notifyResultSelector = function (outerValue, innerValue, outerIndex, innerIndex) {
var result;
try {
result = this.resultSelector(outerValue, innerValue, outerIndex, innerIndex);
}
catch (err) {
this.destination.error(err);
return;
}
this.destination.next(result);
};
MergeMapSubscriber.prototype.notifyComplete = function (innerSub) {
var buffer = this.buffer;
this.remove(innerSub);
this.active--;
if (buffer.length > 0) {
this._next(buffer.shift());
}
else if (this.active === 0 && this.hasCompleted) {
this.destination.complete();
}
};
return MergeMapSubscriber;
}(OuterSubscriber_1.OuterSubscriber));
var MergeMapSubscriber_1 = MergeMapSubscriber;
var mergeMap_1 = {
mergeMap: mergeMap_2,
MergeMapOperator: MergeMapOperator_1,
MergeMapSubscriber: MergeMapSubscriber_1
};
function identity(x) {
return x;
}
var identity_2 = identity;
var identity_1 = {
identity: identity_2
};
/**
* Converts a higher-order Observable into a first-order Observable which
* concurrently delivers all values that are emitted on the inner Observables.
*
* <span class="informal">Flattens an Observable-of-Observables.</span>
*
* <img src="./img/mergeAll.png" width="100%">
*
* `mergeAll` subscribes to an Observable that emits Observables, also known as
* a higher-order Observable. Each time it observes one of these emitted inner
* Observables, it subscribes to that and delivers all the values from the
* inner Observable on the output Observable. The output Observable only
* completes once all inner Observables have completed. Any error delivered by
* a inner Observable will be immediately emitted on the output Observable.
*
* @example <caption>Spawn a new interval Observable for each click event, and blend their outputs as one Observable</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var higherOrder = clicks.map((ev) => Rx.Observable.interval(1000));
* var firstOrder = higherOrder.mergeAll();
* firstOrder.subscribe(x => console.log(x));
*
* @example <caption>Count from 0 to 9 every second for each click, but only allow 2 concurrent timers</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var higherOrder = clicks.map((ev) => Rx.Observable.interval(1000).take(10));
* var firstOrder = higherOrder.mergeAll(2);
* firstOrder.subscribe(x => console.log(x));
*
* @see {@link combineAll}
* @see {@link concatAll}
* @see {@link exhaust}
* @see {@link merge}
* @see {@link mergeMap}
* @see {@link mergeMapTo}
* @see {@link mergeScan}
* @see {@link switch}
* @see {@link zipAll}
*
* @param {number} [concurrent=Number.POSITIVE_INFINITY] Maximum number of inner
* Observables being subscribed to concurrently.
* @return {Observable} An Observable that emits values coming from all the
* inner Observables emitted by the source Observable.
* @method mergeAll
* @owner Observable
*/
function mergeAll(concurrent) {
if (concurrent === void 0) {
concurrent = Number.POSITIVE_INFINITY;
}
return mergeMap_1.mergeMap(identity_1.identity, null, concurrent);
}
var mergeAll_2 = mergeAll;
var mergeAll_1 = {
mergeAll: mergeAll_2
};
/**
* Converts a higher-order Observable into a first-order Observable by
* concatenating the inner Observables in order.
*
* <span class="informal">Flattens an Observable-of-Observables by putting one
* inner Observable after the other.</span>
*
* <img src="./img/concatAll.png" width="100%">
*
* Joins every Observable emitted by the source (a higher-order Observable), in
* a serial fashion. It subscribes to each inner Observable only after the
* previous inner Observable has completed, and merges all of their values into
* the returned observable.
*
* __Warning:__ If the source Observable emits Observables quickly and
* endlessly, and the inner Observables it emits generally complete slower than
* the source emits, you can run into memory issues as the incoming Observables
* collect in an unbounded buffer.
*
* Note: `concatAll` is equivalent to `mergeAll` with concurrency parameter set
* to `1`.
*
* @example <caption>For each click event, tick every second from 0 to 3, with no concurrency</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var higherOrder = clicks.map(ev => Rx.Observable.interval(1000).take(4));
* var firstOrder = higherOrder.concatAll();
* firstOrder.subscribe(x => console.log(x));
*
* // Results in the following:
* // (results are not concurrent)
* // For every click on the "document" it will emit values 0 to 3 spaced
* // on a 1000ms interval
* // one click = 1000ms-> 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3
*
* @see {@link combineAll}
* @see {@link concat}
* @see {@link concatMap}
* @see {@link concatMapTo}
* @see {@link exhaust}
* @see {@link mergeAll}
* @see {@link switch}
* @see {@link zipAll}
*
* @return {Observable} An Observable emitting values from all the inner
* Observables concatenated.
* @method concatAll
* @owner Observable
*/
function concatAll() {
return mergeAll_1.mergeAll(1);
}
var concatAll_2 = concatAll;
var concatAll_1 = {
concatAll: concatAll_2
};
/* tslint:enable:max-line-length */
/**
* Creates an output Observable which sequentially emits all values from given
* Observable and then moves on to the next.
*
* <span class="informal">Concatenates multiple Observables together by
* sequentially emitting their values, one Observable after the other.</span>
*
* <img src="./img/concat.png" width="100%">
*
* `concat` joins multiple Observables together, by subscribing to them one at a time and
* merging their results into the output Observable. You can pass either an array of
* Observables, or put them directly as arguments. Passing an empty array will result
* in Observable that completes immediately.
*
* `concat` will subscribe to first input Observable and emit all its values, without
* changing or affecting them in any way. When that Observable completes, it will
* subscribe to then next Observable passed and, again, emit its values. This will be
* repeated, until the operator runs out of Observables. When last input Observable completes,
* `concat` will complete as well. At any given moment only one Observable passed to operator
* emits values. If you would like to emit values from passed Observables concurrently, check out
* {@link merge} instead, especially with optional `concurrent` parameter. As a matter of fact,
* `concat` is an equivalent of `merge` operator with `concurrent` parameter set to `1`.
*
* Note that if some input Observable never completes, `concat` will also never complete
* and Observables following the one that did not complete will never be subscribed. On the other
* hand, if some Observable simply completes immediately after it is subscribed, it will be
* invisible for `concat`, which will just move on to the next Observable.
*
* If any Observable in chain errors, instead of passing control to the next Observable,
* `concat` will error immediately as well. Observables that would be subscribed after
* the one that emitted error, never will.
*
* If you pass to `concat` the same Observable many times, its stream of values
* will be "replayed" on every subscription, which means you can repeat given Observable
* as many times as you like. If passing the same Observable to `concat` 1000 times becomes tedious,
* you can always use {@link repeat}.
*
* @example <caption>Concatenate a timer counting from 0 to 3 with a synchronous sequence from 1 to 10</caption>
* var timer = Rx.Observable.interval(1000).take(4);
* var sequence = Rx.Observable.range(1, 10);
* var result = Rx.Observable.concat(timer, sequence);
* result.subscribe(x => console.log(x));
*
* // results in:
* // 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3 -immediate-> 1 ... 10
*
*
* @example <caption>Concatenate an array of 3 Observables</caption>
* var timer1 = Rx.Observable.interval(1000).take(10);
* var timer2 = Rx.Observable.interval(2000).take(6);
* var timer3 = Rx.Observable.interval(500).take(10);
* var result = Rx.Observable.concat([timer1, timer2, timer3]); // note that array is passed
* result.subscribe(x => console.log(x));
*
* // results in the following:
* // (Prints to console sequentially)
* // -1000ms-> 0 -1000ms-> 1 -1000ms-> ... 9
* // -2000ms-> 0 -2000ms-> 1 -2000ms-> ... 5
* // -500ms-> 0 -500ms-> 1 -500ms-> ... 9
*
*
* @example <caption>Concatenate the same Observable to repeat it</caption>
* const timer = Rx.Observable.interval(1000).take(2);
*
* Rx.Observable.concat(timer, timer) // concating the same Observable!
* .subscribe(
* value => console.log(value),
* err => {},
* () => console.log('...and it is done!')
* );
*
* // Logs:
* // 0 after 1s
* // 1 after 2s
* // 0 after 3s
* // 1 after 4s
* // "...and it is done!" also after 4s
*
* @see {@link concatAll}
* @see {@link concatMap}
* @see {@link concatMapTo}
*
* @param {ObservableInput} input1 An input Observable to concatenate with others.
* @param {ObservableInput} input2 An input Observable to concatenate with others.
* More than one input Observables may be given as argument.
* @param {Scheduler} [scheduler=null] An optional IScheduler to schedule each
* Observable subscription on.
* @return {Observable} All values of each passed Observable merged into a
* single Observable, in order, in serial fashion.
* @static true
* @name concat
* @owner Observable
*/
function concat() {
var observables = [];
for (var _i = 0; _i < arguments.length; _i++) {
observables[_i - 0] = arguments[_i];
}
if (observables.length === 1 || (observables.length === 2 && isScheduler_1.isScheduler(observables[1]))) {
return from.from(observables[0]);
}
return concatAll_1.concatAll()(of$2.of.apply(void 0, observables));
}
var concat_2 = concat;
var concat_1 = {
concat: concat_2
};
/* tslint:enable:max-line-length */
/**
* Returns an Observable that emits the items you specify as arguments before it begins to emit
* items emitted by the source Observable.
*
* <img src="./img/startWith.png" width="100%">
*
* @param {...T} values - Items you want the modified Observable to emit first.
* @param {Scheduler} [scheduler] - A {@link IScheduler} to use for scheduling
* the emissions of the `next` notifications.
* @return {Observable} An Observable that emits the items in the specified Iterable and then emits the items
* emitted by the source Observable.
* @method startWith
* @owner Observable
*/
function startWith() {
var array = [];
for (var _i = 0; _i < arguments.length; _i++) {
array[_i - 0] = arguments[_i];
}
return function (source) {
var scheduler = array[array.length - 1];
if (isScheduler_1.isScheduler(scheduler)) {
array.pop();
}
else {
scheduler = null;
}
var len = array.length;
if (len === 1) {
return concat_1.concat(new ScalarObservable_1.ScalarObservable(array[0], scheduler), source);
}
else if (len > 1) {
return concat_1.concat(new ArrayObservable_1.ArrayObservable(array, scheduler), source);
}
else {
return concat_1.concat(new EmptyObservable_1.EmptyObservable(scheduler), source);
}
};
}
var startWith_2 = startWith;
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var nextUniqueId = 0;
/**
* Single error message to be shown underneath the form field.
*/
var MatError = (function () {
function MatError() {
this.id = "mat-error-" + nextUniqueId++;
}
MatError.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-error',
host: {
'class': 'mat-error',
'role': 'alert',
'[attr.id]': 'id',
}
},] },
];
/** @nocollapse */
MatError.ctorParameters = function () { return []; };
MatError.propDecorators = {
"id": [{ type: core.Input },],
};
return MatError;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Animations used by the MatFormField.
*/
var matFormFieldAnimations = {
/** Animation that transitions the form field's error and hint messages. */
transitionMessages: animations.trigger('transitionMessages', [
// TODO(mmalerba): Use angular animations for label animation as well.
animations.state('enter', animations.style({ opacity: 1, transform: 'translateY(0%)' })),
animations.transition('void => enter', [
animations.style({ opacity: 0, transform: 'translateY(-100%)' }),
animations.animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'),
]),
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* An interface which allows a control to work inside of a `MatFormField`.
* @abstract
*/
var MatFormFieldControl = (function () {
function MatFormFieldControl() {
}
return MatFormFieldControl;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @return {?}
*/
function getMatFormFieldPlaceholderConflictError() {
return Error('Placeholder attribute and child element were both specified.');
}
/**
* \@docs-private
* @param {?} align
* @return {?}
*/
function getMatFormFieldDuplicatedHintError(align) {
return Error("A hint was already declared for 'align=\"" + align + "\"'.");
}
/**
* \@docs-private
* @return {?}
*/
function getMatFormFieldMissingControlError() {
return Error('mat-form-field must contain a MatFormFieldControl.');
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var nextUniqueId$2 = 0;
/**
* Hint text to be shown underneath the form field control.
*/
var MatHint = (function () {
function MatHint() {
/**
* Whether to align the hint label at the start or end of the line.
*/
this.align = 'start';
/**
* Unique ID for the hint. Used for the aria-describedby on the form field control.
*/
this.id = "mat-hint-" + nextUniqueId$2++;
}
MatHint.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-hint',
host: {
'class': 'mat-hint',
'[class.mat-right]': 'align == "end"',
'[attr.id]': 'id',
// Remove align attribute to prevent it from interfering with layout.
'[attr.align]': 'null',
}
},] },
];
/** @nocollapse */
MatHint.ctorParameters = function () { return []; };
MatHint.propDecorators = {
"align": [{ type: core.Input },],
"id": [{ type: core.Input },],
};
return MatHint;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The floating label for a `mat-form-field`.
*/
var MatLabel = (function () {
function MatLabel() {
}
MatLabel.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-label'
},] },
];
/** @nocollapse */
MatLabel.ctorParameters = function () { return []; };
return MatLabel;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The placeholder text for an `MatFormField`.
*/
var MatPlaceholder = (function () {
function MatPlaceholder() {
}
MatPlaceholder.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-placeholder'
},] },
];
/** @nocollapse */
MatPlaceholder.ctorParameters = function () { return []; };
return MatPlaceholder;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Prefix to be placed the the front of the form field.
*/
var MatPrefix = (function () {
function MatPrefix() {
}
MatPrefix.decorators = [
{ type: core.Directive, args: [{
selector: '[matPrefix]',
},] },
];
/** @nocollapse */
MatPrefix.ctorParameters = function () { return []; };
return MatPrefix;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Suffix to be placed at the end of the form field.
*/
var MatSuffix = (function () {
function MatSuffix() {
}
MatSuffix.decorators = [
{ type: core.Directive, args: [{
selector: '[matSuffix]',
},] },
];
/** @nocollapse */
MatSuffix.ctorParameters = function () { return []; };
return MatSuffix;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatFormFieldBase = (function () {
function MatFormFieldBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatFormFieldBase;
}());
var _MatFormFieldMixinBase = mixinColor(MatFormFieldBase, 'primary');
var nextUniqueId$1 = 0;
/**
* Container for form controls that applies Material Design styling and behavior.
*/
var MatFormField = (function (_super) {
__extends(MatFormField, _super);
function MatFormField(_elementRef, _changeDetectorRef, labelOptions) {
var _this = _super.call(this, _elementRef) || this;
_this._elementRef = _elementRef;
_this._changeDetectorRef = _changeDetectorRef;
/**
* Override for the logic that disables the label animation in certain cases.
*/
_this._showAlwaysAnimate = false;
/**
* State of the mat-hint and mat-error animations.
*/
_this._subscriptAnimationState = '';
_this._hintLabel = '';
// Unique id for the hint label.
_this._hintLabelId = "mat-hint-" + nextUniqueId$1++;
_this._labelOptions = labelOptions ? labelOptions : {};
_this.floatLabel = _this._labelOptions.float || 'auto';
return _this;
}
Object.defineProperty(MatFormField.prototype, "dividerColor", {
get: /**
* @deprecated Use `color` instead.
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this.color; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this.color = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatFormField.prototype, "hideRequiredMarker", {
get: /**
* Whether the required marker should be hidden.
* @return {?}
*/ function () { return this._hideRequiredMarker; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._hideRequiredMarker = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatFormField.prototype, "_shouldAlwaysFloat", {
/** Whether the floating label should always float or not. */
get: /**
* Whether the floating label should always float or not.
* @return {?}
*/ function () {
return this._floatLabel === 'always' && !this._showAlwaysAnimate;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatFormField.prototype, "_canLabelFloat", {
/** Whether the label can float or not. */
get: /**
* Whether the label can float or not.
* @return {?}
*/ function () { return this._floatLabel !== 'never'; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatFormField.prototype, "hintLabel", {
get: /**
* Text for the form field hint.
* @return {?}
*/ function () { return this._hintLabel; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._hintLabel = value;
this._processHints();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatFormField.prototype, "floatPlaceholder", {
get: /**
* Whether the placeholder should always float, never float or float as the user types.
* @deprecated Use floatLabel instead.
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this._floatLabel; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this.floatLabel = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatFormField.prototype, "floatLabel", {
get: /**
* Whether the label should always float, never float or float as the user types.
* @return {?}
*/ function () { return this._floatLabel; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value !== this._floatLabel) {
this._floatLabel = value || this._labelOptions.float || 'auto';
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatFormField.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._validateControlChild();
if (this._control.controlType) {
this._elementRef.nativeElement.classList
.add("mat-form-field-type-" + this._control.controlType);
}
// Subscribe to changes in the child control state in order to update the form field UI.
this._control.stateChanges.pipe(startWith_2(/** @type {?} */ ((null)))).subscribe(function () {
_this._validatePlaceholders();
_this._syncDescribedByIds();
_this._changeDetectorRef.markForCheck();
});
var /** @type {?} */ ngControl = this._control.ngControl;
if (ngControl && ngControl.valueChanges) {
ngControl.valueChanges.subscribe(function () {
_this._changeDetectorRef.markForCheck();
});
}
// Re-validate when the number of hints changes.
this._hintChildren.changes.pipe(startWith_2(null)).subscribe(function () {
_this._processHints();
_this._changeDetectorRef.markForCheck();
});
// Update the aria-described by when the number of errors changes.
this._errorChildren.changes.pipe(startWith_2(null)).subscribe(function () {
_this._syncDescribedByIds();
_this._changeDetectorRef.markForCheck();
});
};
/**
* @return {?}
*/
MatFormField.prototype.ngAfterContentChecked = /**
* @return {?}
*/
function () {
this._validateControlChild();
};
/**
* @return {?}
*/
MatFormField.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
// Avoid animations on load.
this._subscriptAnimationState = 'enter';
this._changeDetectorRef.detectChanges();
};
/** Determines whether a class from the NgControl should be forwarded to the host element. */
/**
* Determines whether a class from the NgControl should be forwarded to the host element.
* @param {?} prop
* @return {?}
*/
MatFormField.prototype._shouldForward = /**
* Determines whether a class from the NgControl should be forwarded to the host element.
* @param {?} prop
* @return {?}
*/
function (prop) {
var /** @type {?} */ ngControl = this._control ? this._control.ngControl : null;
return ngControl && ((ngControl))[prop];
};
/**
* @return {?}
*/
MatFormField.prototype._hasPlaceholder = /**
* @return {?}
*/
function () {
return !!(this._control.placeholder || this._placeholderChild);
};
/**
* @return {?}
*/
MatFormField.prototype._hasLabel = /**
* @return {?}
*/
function () {
return !!this._labelChild;
};
/**
* @return {?}
*/
MatFormField.prototype._shouldLabelFloat = /**
* @return {?}
*/
function () {
return this._canLabelFloat && (this._control.shouldLabelFloat ||
this._control.shouldPlaceholderFloat || this._shouldAlwaysFloat);
};
/**
* @return {?}
*/
MatFormField.prototype._hideControlPlaceholder = /**
* @return {?}
*/
function () {
return !this._hasLabel() || !this._shouldLabelFloat();
};
/**
* @return {?}
*/
MatFormField.prototype._hasFloatingLabel = /**
* @return {?}
*/
function () {
return this._hasLabel() || this._hasPlaceholder();
};
/** Determines whether to display hints or errors. */
/**
* Determines whether to display hints or errors.
* @return {?}
*/
MatFormField.prototype._getDisplayedMessages = /**
* Determines whether to display hints or errors.
* @return {?}
*/
function () {
return (this._errorChildren && this._errorChildren.length > 0 &&
this._control.errorState) ? 'error' : 'hint';
};
/** Animates the placeholder up and locks it in position. */
/**
* Animates the placeholder up and locks it in position.
* @return {?}
*/
MatFormField.prototype._animateAndLockLabel = /**
* Animates the placeholder up and locks it in position.
* @return {?}
*/
function () {
var _this = this;
if (this._hasFloatingLabel() && this._canLabelFloat) {
this._showAlwaysAnimate = true;
this._floatLabel = 'always';
fromEvent.fromEvent(this._label.nativeElement, 'transitionend').pipe(take_2(1)).subscribe(function () {
_this._showAlwaysAnimate = false;
});
this._changeDetectorRef.markForCheck();
}
};
/**
* Ensure that there is only one placeholder (either `placeholder` attribute on the child control
* or child element with the `mat-placeholder` directive).
* @return {?}
*/
MatFormField.prototype._validatePlaceholders = /**
* Ensure that there is only one placeholder (either `placeholder` attribute on the child control
* or child element with the `mat-placeholder` directive).
* @return {?}
*/
function () {
if (this._control.placeholder && this._placeholderChild) {
throw getMatFormFieldPlaceholderConflictError();
}
};
/**
* Does any extra processing that is required when handling the hints.
* @return {?}
*/
MatFormField.prototype._processHints = /**
* Does any extra processing that is required when handling the hints.
* @return {?}
*/
function () {
this._validateHints();
this._syncDescribedByIds();
};
/**
* Ensure that there is a maximum of one of each `<mat-hint>` alignment specified, with the
* attribute being considered as `align="start"`.
* @return {?}
*/
MatFormField.prototype._validateHints = /**
* Ensure that there is a maximum of one of each `<mat-hint>` alignment specified, with the
* attribute being considered as `align="start"`.
* @return {?}
*/
function () {
var _this = this;
if (this._hintChildren) {
var /** @type {?} */ startHint_1;
var /** @type {?} */ endHint_1;
this._hintChildren.forEach(function (hint) {
if (hint.align === 'start') {
if (startHint_1 || _this.hintLabel) {
throw getMatFormFieldDuplicatedHintError('start');
}
startHint_1 = hint;
}
else if (hint.align === 'end') {
if (endHint_1) {
throw getMatFormFieldDuplicatedHintError('end');
}
endHint_1 = hint;
}
});
}
};
/**
* Sets the list of element IDs that describe the child control. This allows the control to update
* its `aria-describedby` attribute accordingly.
* @return {?}
*/
MatFormField.prototype._syncDescribedByIds = /**
* Sets the list of element IDs that describe the child control. This allows the control to update
* its `aria-describedby` attribute accordingly.
* @return {?}
*/
function () {
if (this._control) {
var /** @type {?} */ ids = [];
if (this._getDisplayedMessages() === 'hint') {
var /** @type {?} */ startHint = this._hintChildren ?
this._hintChildren.find(function (hint) { return hint.align === 'start'; }) : null;
var /** @type {?} */ endHint = this._hintChildren ?
this._hintChildren.find(function (hint) { return hint.align === 'end'; }) : null;
if (startHint) {
ids.push(startHint.id);
}
else if (this._hintLabel) {
ids.push(this._hintLabelId);
}
if (endHint) {
ids.push(endHint.id);
}
}
else if (this._errorChildren) {
ids = this._errorChildren.map(function (error) { return error.id; });
}
this._control.setDescribedByIds(ids);
}
};
/** Throws an error if the form field's control is missing. */
/**
* Throws an error if the form field's control is missing.
* @return {?}
*/
MatFormField.prototype._validateControlChild = /**
* Throws an error if the form field's control is missing.
* @return {?}
*/
function () {
if (!this._control) {
throw getMatFormFieldMissingControlError();
}
};
MatFormField.decorators = [
{ type: core.Component, args: [{
selector: 'mat-input-container, mat-form-field',
exportAs: 'matFormField',
template: "<div class=\"mat-input-wrapper mat-form-field-wrapper\"><div class=\"mat-input-flex mat-form-field-flex\" #connectionContainer (click)=\"_control.onContainerClick && _control.onContainerClick($event)\"><div class=\"mat-input-prefix mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\"><ng-content select=\"[matPrefix]\"></ng-content></div><div class=\"mat-input-infix mat-form-field-infix\" #inputContainer><ng-content></ng-content><span class=\"mat-form-field-label-wrapper mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper\"><label class=\"mat-form-field-label mat-input-placeholder mat-form-field-placeholder\" [attr.for]=\"_control.id\" [attr.aria-owns]=\"_control.id\" [class.mat-empty]=\"_control.empty && !_shouldAlwaysFloat\" [class.mat-form-field-empty]=\"_control.empty && !_shouldAlwaysFloat\" [class.mat-accent]=\"color == 'accent'\" [class.mat-warn]=\"color == 'warn'\" #label *ngIf=\"_hasFloatingLabel()\" [ngSwitch]=\"_hasLabel()\"><ng-container *ngSwitchCase=\"false\"><ng-content select=\"mat-placeholder\"></ng-content>{{_control.placeholder}}</ng-container><ng-content select=\"mat-label\" *ngSwitchCase=\"true\"></ng-content><span class=\"mat-placeholder-required mat-form-field-required-marker\" aria-hidden=\"true\" *ngIf=\"!hideRequiredMarker && _control.required && !_control.disabled\"> *</span></label></span></div><div class=\"mat-input-suffix mat-form-field-suffix\" *ngIf=\"_suffixChildren.length\"><ng-content select=\"[matSuffix]\"></ng-content></div></div><div class=\"mat-input-underline mat-form-field-underline\" #underline><span class=\"mat-input-ripple mat-form-field-ripple\" [class.mat-accent]=\"color == 'accent'\" [class.mat-warn]=\"color == 'warn'\"></span></div><div class=\"mat-input-subscript-wrapper mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\"><div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\"><ng-content select=\"mat-error\"></ng-content></div><div class=\"mat-input-hint-wrapper mat-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\" [@transitionMessages]=\"_subscriptAnimationState\"><div *ngIf=\"hintLabel\" [id]=\"_hintLabelId\" class=\"mat-hint\">{{hintLabel}}</div><ng-content select=\"mat-hint:not([align='end'])\"></ng-content><div class=\"mat-input-hint-spacer mat-form-field-hint-spacer\"></div><ng-content select=\"mat-hint[align='end']\"></ng-content></div></div></div>",
// MatInput is a directive and can't have styles, so we need to include its styles here.
// The MatInput styles are fairly minimal so it shouldn't be a big deal for people who
// aren't using MatInput.
styles: [".mat-form-field{display:inline-block;position:relative;text-align:left}[dir=rtl] .mat-form-field{text-align:right}.mat-form-field-wrapper{position:relative}.mat-form-field-flex{display:inline-flex;align-items:baseline;width:100%}.mat-form-field-prefix,.mat-form-field-suffix{white-space:nowrap;flex:none}.mat-form-field-prefix .mat-icon,.mat-form-field-suffix .mat-icon{width:1em}.mat-form-field-prefix .mat-icon-button,.mat-form-field-suffix .mat-icon-button{font:inherit;vertical-align:baseline}.mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field-suffix .mat-icon-button .mat-icon{font-size:inherit}.mat-form-field-infix{display:block;position:relative;flex:auto;min-width:0;width:180px}.mat-form-field-label-wrapper{position:absolute;left:0;box-sizing:content-box;width:100%;height:100%;overflow:hidden;pointer-events:none}.mat-form-field-label{position:absolute;left:0;font:inherit;pointer-events:none;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transform:perspective(100px);-ms-transform:none;transform-origin:0 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1);display:none}[dir=rtl] .mat-form-field-label{transform-origin:100% 0;left:auto;right:0}.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-empty.mat-form-field-label{display:block}.mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{display:none}.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{display:block;transition:none}.mat-input-server:focus+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder,.mat-input-server[placeholder]:not(:placeholder-shown)+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder{display:none}.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder,.mat-form-field-can-float .mat-input-server[placeholder]:not(:placeholder-shown)+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder{display:block}.mat-form-field-label:not(.mat-form-field-empty){transition:none}.mat-form-field-underline{position:absolute;height:1px;width:100%}.mat-form-field-disabled .mat-form-field-underline{background-position:0;background-color:transparent}.mat-form-field-underline .mat-form-field-ripple{position:absolute;top:0;left:0;width:100%;height:2px;transform-origin:50%;transform:scaleX(.5);visibility:hidden;opacity:0;transition:background-color .3s cubic-bezier(.55,0,.55,.2)}.mat-form-field-invalid:not(.mat-focused) .mat-form-field-underline .mat-form-field-ripple{height:1px}.mat-focused .mat-form-field-underline .mat-form-field-ripple,.mat-form-field-invalid .mat-form-field-underline .mat-form-field-ripple{visibility:visible;opacity:1;transform:scaleX(1);transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .1s cubic-bezier(.25,.8,.25,1),background-color .3s cubic-bezier(.25,.8,.25,1)}.mat-form-field-subscript-wrapper{position:absolute;width:100%;overflow:hidden}.mat-form-field-label-wrapper .mat-icon,.mat-form-field-subscript-wrapper .mat-icon{width:1em;height:1em;font-size:inherit;vertical-align:baseline}.mat-form-field-hint-wrapper{display:flex}.mat-form-field-hint-spacer{flex:1 0 1em}.mat-error{display:block} .mat-input-element{font:inherit;background:0 0;color:currentColor;border:none;outline:0;padding:0;margin:0;width:100%;max-width:100%;vertical-align:bottom;text-align:inherit}.mat-input-element:-moz-ui-invalid{box-shadow:none}.mat-input-element::-ms-clear,.mat-input-element::-ms-reveal{display:none}.mat-input-element[type=date]::after,.mat-input-element[type=datetime-local]::after,.mat-input-element[type=datetime]::after,.mat-input-element[type=month]::after,.mat-input-element[type=time]::after,.mat-input-element[type=week]::after{content:' ';white-space:pre;width:1px}.mat-input-element::placeholder{transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-input-element::-moz-placeholder{transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-input-element::-webkit-input-placeholder{transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-input-element:-ms-input-placeholder{transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-form-field-hide-placeholder .mat-input-element::placeholder{color:transparent!important;transition:none}.mat-form-field-hide-placeholder .mat-input-element::-moz-placeholder{color:transparent!important;transition:none}.mat-form-field-hide-placeholder .mat-input-element::-webkit-input-placeholder{color:transparent!important;transition:none}.mat-form-field-hide-placeholder .mat-input-element:-ms-input-placeholder{color:transparent!important;transition:none}textarea.mat-input-element{resize:vertical;overflow:auto}textarea.mat-autosize{resize:none}"],
animations: [matFormFieldAnimations.transitionMessages],
host: {
'class': 'mat-input-container mat-form-field',
'[class.mat-input-invalid]': '_control.errorState',
'[class.mat-form-field-invalid]': '_control.errorState',
'[class.mat-form-field-can-float]': '_canLabelFloat',
'[class.mat-form-field-should-float]': '_shouldLabelFloat()',
'[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()',
'[class.mat-form-field-disabled]': '_control.disabled',
'[class.mat-focused]': '_control.focused',
'[class.ng-untouched]': '_shouldForward("untouched")',
'[class.ng-touched]': '_shouldForward("touched")',
'[class.ng-pristine]': '_shouldForward("pristine")',
'[class.ng-dirty]': '_shouldForward("dirty")',
'[class.ng-valid]': '_shouldForward("valid")',
'[class.ng-invalid]': '_shouldForward("invalid")',
'[class.ng-pending]': '_shouldForward("pending")',
},
inputs: ['color'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatFormField.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_LABEL_GLOBAL_OPTIONS,] },] },
];
};
MatFormField.propDecorators = {
"dividerColor": [{ type: core.Input },],
"hideRequiredMarker": [{ type: core.Input },],
"hintLabel": [{ type: core.Input },],
"floatPlaceholder": [{ type: core.Input },],
"floatLabel": [{ type: core.Input },],
"underlineRef": [{ type: core.ViewChild, args: ['underline',] },],
"_connectionContainerRef": [{ type: core.ViewChild, args: ['connectionContainer',] },],
"_inputContainerRef": [{ type: core.ViewChild, args: ['inputContainer',] },],
"_label": [{ type: core.ViewChild, args: ['label',] },],
"_control": [{ type: core.ContentChild, args: [MatFormFieldControl,] },],
"_placeholderChild": [{ type: core.ContentChild, args: [MatPlaceholder,] },],
"_labelChild": [{ type: core.ContentChild, args: [MatLabel,] },],
"_errorChildren": [{ type: core.ContentChildren, args: [MatError,] },],
"_hintChildren": [{ type: core.ContentChildren, args: [MatHint,] },],
"_prefixChildren": [{ type: core.ContentChildren, args: [MatPrefix,] },],
"_suffixChildren": [{ type: core.ContentChildren, args: [MatSuffix,] },],
};
return MatFormField;
}(_MatFormFieldMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatFormFieldModule = (function () {
function MatFormFieldModule() {
}
MatFormFieldModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
MatError,
MatHint,
MatFormField,
MatPlaceholder,
MatPrefix,
MatSuffix,
MatLabel,
],
imports: [
common.CommonModule,
platform.PlatformModule,
],
exports: [
MatError,
MatHint,
MatFormField,
MatPlaceholder,
MatPrefix,
MatSuffix,
MatLabel,
],
},] },
];
/** @nocollapse */
MatFormFieldModule.ctorParameters = function () { return []; };
return MatFormFieldModule;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Autocomplete IDs need to be unique across components, so this counter exists outside of
* the component definition.
*/
var _uniqueAutocompleteIdCounter = 0;
/**
* Event object that is emitted when an autocomplete option is selected.
*/
var MatAutocompleteSelectedEvent = (function () {
function MatAutocompleteSelectedEvent(source, option) {
this.source = source;
this.option = option;
}
return MatAutocompleteSelectedEvent;
}());
/**
* \@docs-private
*/
var MatAutocompleteBase = (function () {
function MatAutocompleteBase() {
}
return MatAutocompleteBase;
}());
var _MatAutocompleteMixinBase = mixinDisableRipple(MatAutocompleteBase);
/**
* Default `mat-autocomplete` options that can be overridden.
* @record
*/
/**
* Injection token to be used to override the default options for `mat-autocomplete`.
*/
var MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = new core.InjectionToken('mat-autocomplete-default-options');
var MatAutocomplete = (function (_super) {
__extends(MatAutocomplete, _super);
function MatAutocomplete(_changeDetectorRef, _elementRef,
// @deletion-target Turn into required param in 6.0.0
defaults) {
var _this = _super.call(this) || this;
_this._changeDetectorRef = _changeDetectorRef;
_this._elementRef = _elementRef;
/**
* Whether the autocomplete panel should be visible, depending on option length.
*/
_this.showPanel = false;
_this._isOpen = false;
/**
* Function that maps an option's control value to its display value in the trigger.
*/
_this.displayWith = null;
/**
* Event that is emitted whenever an option from the list is selected.
*/
_this.optionSelected = new core.EventEmitter();
_this._classList = {};
/**
* Unique ID to be used by autocomplete trigger's "aria-owns" property.
*/
_this.id = "mat-autocomplete-" + _uniqueAutocompleteIdCounter++;
_this._autoActiveFirstOption = defaults &&
typeof defaults.autoActiveFirstOption !== 'undefined' ?
defaults.autoActiveFirstOption :
false;
return _this;
}
Object.defineProperty(MatAutocomplete.prototype, "isOpen", {
/** Whether the autocomplete panel is open. */
get: /**
* Whether the autocomplete panel is open.
* @return {?}
*/ function () { return this._isOpen && this.showPanel; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatAutocomplete.prototype, "autoActiveFirstOption", {
get: /**
* Whether the first option should be highlighted when the autocomplete panel is opened.
* Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
* @return {?}
*/ function () { return this._autoActiveFirstOption; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._autoActiveFirstOption = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatAutocomplete.prototype, "classList", {
set: /**
* Takes classes set on the host mat-autocomplete element and applies them to the panel
* inside the overlay container to allow for easy styling.
* @param {?} value
* @return {?}
*/ function (value) {
var _this = this;
if (value && value.length) {
value.split(' ').forEach(function (className) { return _this._classList[className.trim()] = true; });
this._elementRef.nativeElement.className = '';
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatAutocomplete.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._keyManager = new a11y.ActiveDescendantKeyManager(this.options).withWrap();
// Set the initial visibiity state.
this._setVisibility();
};
/**
* Sets the panel scrollTop. This allows us to manually scroll to display options
* above or below the fold, as they are not actually being focused when active.
*/
/**
* Sets the panel scrollTop. This allows us to manually scroll to display options
* above or below the fold, as they are not actually being focused when active.
* @param {?} scrollTop
* @return {?}
*/
MatAutocomplete.prototype._setScrollTop = /**
* Sets the panel scrollTop. This allows us to manually scroll to display options
* above or below the fold, as they are not actually being focused when active.
* @param {?} scrollTop
* @return {?}
*/
function (scrollTop) {
if (this.panel) {
this.panel.nativeElement.scrollTop = scrollTop;
}
};
/** Returns the panel's scrollTop. */
/**
* Returns the panel's scrollTop.
* @return {?}
*/
MatAutocomplete.prototype._getScrollTop = /**
* Returns the panel's scrollTop.
* @return {?}
*/
function () {
return this.panel ? this.panel.nativeElement.scrollTop : 0;
};
/** Panel should hide itself when the option list is empty. */
/**
* Panel should hide itself when the option list is empty.
* @return {?}
*/
MatAutocomplete.prototype._setVisibility = /**
* Panel should hide itself when the option list is empty.
* @return {?}
*/
function () {
this.showPanel = !!this.options.length;
this._classList['mat-autocomplete-visible'] = this.showPanel;
this._classList['mat-autocomplete-hidden'] = !this.showPanel;
this._changeDetectorRef.markForCheck();
};
/** Emits the `select` event. */
/**
* Emits the `select` event.
* @param {?} option
* @return {?}
*/
MatAutocomplete.prototype._emitSelectEvent = /**
* Emits the `select` event.
* @param {?} option
* @return {?}
*/
function (option) {
var /** @type {?} */ event = new MatAutocompleteSelectedEvent(this, option);
this.optionSelected.emit(event);
};
MatAutocomplete.decorators = [
{ type: core.Component, args: [{ selector: 'mat-autocomplete',
template: "<ng-template><div class=\"mat-autocomplete-panel\" role=\"listbox\" [id]=\"id\" [ngClass]=\"_classList\" #panel><ng-content></ng-content></div></ng-template>",
styles: [".mat-autocomplete-panel{-webkit-backface-visibility:hidden;backface-visibility:hidden;min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;max-width:none;max-height:256px;position:relative}.mat-autocomplete-panel:not([class*=mat-elevation-z]){box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mat-autocomplete-panel.mat-autocomplete-visible{visibility:visible}.mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
exportAs: 'matAutocomplete',
inputs: ['disableRipple'],
host: {
'class': 'mat-autocomplete'
},
providers: [
{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }
]
},] },
];
/** @nocollapse */
MatAutocomplete.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef, },
{ type: core.ElementRef, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,] },] },
];
};
MatAutocomplete.propDecorators = {
"template": [{ type: core.ViewChild, args: [core.TemplateRef,] },],
"panel": [{ type: core.ViewChild, args: ['panel',] },],
"options": [{ type: core.ContentChildren, args: [MatOption, { descendants: true },] },],
"optionGroups": [{ type: core.ContentChildren, args: [MatOptgroup,] },],
"displayWith": [{ type: core.Input },],
"autoActiveFirstOption": [{ type: core.Input },],
"optionSelected": [{ type: core.Output },],
"classList": [{ type: core.Input, args: ['class',] },],
};
return MatAutocomplete;
}(_MatAutocompleteMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The height of each autocomplete option.
*/
var AUTOCOMPLETE_OPTION_HEIGHT = 48;
/**
* The total height of the autocomplete panel.
*/
var AUTOCOMPLETE_PANEL_HEIGHT = 256;
/**
* Injection token that determines the scroll handling while the autocomplete panel is open.
*/
var MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new core.InjectionToken('mat-autocomplete-scroll-strategy');
/**
* Provider that allows the autocomplete to register as a ControlValueAccessor.
* \@docs-private
*/
var MAT_AUTOCOMPLETE_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatAutocompleteTrigger; }),
multi: true
};
/**
* Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
* @return {?}
*/
function getMatAutocompleteMissingPanelError() {
return Error('Attempting to open an undefined instance of `mat-autocomplete`. ' +
'Make sure that the id passed to the `matAutocomplete` is correct and that ' +
'you\'re attempting to open it after the ngAfterContentInit hook.');
}
var MatAutocompleteTrigger = (function () {
function MatAutocompleteTrigger(_element, _overlay, _viewContainerRef, _zone, _changeDetectorRef, _scrollStrategy, _dir, _formField, _document) {
var _this = this;
this._element = _element;
this._overlay = _overlay;
this._viewContainerRef = _viewContainerRef;
this._zone = _zone;
this._changeDetectorRef = _changeDetectorRef;
this._scrollStrategy = _scrollStrategy;
this._dir = _dir;
this._formField = _formField;
this._document = _document;
this._componentDestroyed = false;
/**
* Whether or not the label state is being overridden.
*/
this._manuallyFloatingLabel = false;
/**
* Stream of keyboard events that can close the panel.
*/
this._closeKeyEventStream = new Subject.Subject();
/**
* `View -> model callback called when value changes`
*/
this._onChange = function () { };
/**
* `View -> model callback called when autocomplete has been touched`
*/
this._onTouched = function () { };
this._panelOpen = false;
/**
* Stream of autocomplete option selections.
*/
this.optionSelections = defer.defer(function () {
if (_this.autocomplete && _this.autocomplete.options) {
return merge.merge.apply(void 0, _this.autocomplete.options.map(function (option) { return option.onSelectionChange; }));
}
// If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
// Return a stream that we'll replace with the real one once everything is in place.
return _this._zone.onStable
.asObservable()
.pipe(take_2(1), switchMap_2(function () { return _this.optionSelections; }));
});
}
/**
* @return {?}
*/
MatAutocompleteTrigger.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._componentDestroyed = true;
this._destroyPanel();
this._closeKeyEventStream.complete();
};
Object.defineProperty(MatAutocompleteTrigger.prototype, "panelOpen", {
/** Whether or not the autocomplete panel is open. */
get: /**
* Whether or not the autocomplete panel is open.
* @return {?}
*/ function () { return this._panelOpen && this.autocomplete.showPanel; },
enumerable: true,
configurable: true
});
/** Opens the autocomplete suggestion panel. */
/**
* Opens the autocomplete suggestion panel.
* @return {?}
*/
MatAutocompleteTrigger.prototype.openPanel = /**
* Opens the autocomplete suggestion panel.
* @return {?}
*/
function () {
this._attachOverlay();
this._floatLabel();
};
/** Closes the autocomplete suggestion panel. */
/**
* Closes the autocomplete suggestion panel.
* @return {?}
*/
MatAutocompleteTrigger.prototype.closePanel = /**
* Closes the autocomplete suggestion panel.
* @return {?}
*/
function () {
this._resetLabel();
if (this._panelOpen) {
this.autocomplete._isOpen = this._panelOpen = false;
if (this._overlayRef && this._overlayRef.hasAttached()) {
this._overlayRef.detach();
this._closingActionsSubscription.unsubscribe();
}
// Note that in some cases this can end up being called after the component is destroyed.
// Add a check to ensure that we don't try to run change detection on a destroyed view.
if (!this._componentDestroyed) {
// We need to trigger change detection manually, because
// `fromEvent` doesn't seem to do it at the proper time.
// This ensures that the label is reset when the
// user clicks outside.
this._changeDetectorRef.detectChanges();
}
}
};
Object.defineProperty(MatAutocompleteTrigger.prototype, "panelClosingActions", {
/**
* A stream of actions that should close the autocomplete panel, including
* when an option is selected, on blur, and when TAB is pressed.
*/
get: /**
* A stream of actions that should close the autocomplete panel, including
* when an option is selected, on blur, and when TAB is pressed.
* @return {?}
*/ function () {
var _this = this;
return merge.merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(filter_2(function () { return _this._panelOpen; })), this._closeKeyEventStream, this._outsideClickStream, this._overlayRef ?
this._overlayRef.detachments().pipe(filter_2(function () { return _this._panelOpen; })) :
of.of());
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatAutocompleteTrigger.prototype, "activeOption", {
/** The currently active option, coerced to MatOption type. */
get: /**
* The currently active option, coerced to MatOption type.
* @return {?}
*/ function () {
if (this.autocomplete && this.autocomplete._keyManager) {
return this.autocomplete._keyManager.activeItem;
}
return null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatAutocompleteTrigger.prototype, "_outsideClickStream", {
get: /**
* Stream of clicks outside of the autocomplete panel.
* @return {?}
*/ function () {
var _this = this;
if (!this._document) {
return of.of(null);
}
return merge.merge(fromEvent.fromEvent(this._document, 'click'), fromEvent.fromEvent(this._document, 'touchend'))
.pipe(filter_2(function (event) {
var /** @type {?} */ clickTarget = (event.target);
var /** @type {?} */ formField = _this._formField ?
_this._formField._elementRef.nativeElement : null;
return _this._panelOpen &&
clickTarget !== _this._element.nativeElement &&
(!formField || !formField.contains(clickTarget)) &&
(!!_this._overlayRef && !_this._overlayRef.overlayElement.contains(clickTarget));
}));
},
enumerable: true,
configurable: true
});
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MatAutocompleteTrigger.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
Promise.resolve(null).then(function () { return _this._setTriggerValue(value); });
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatAutocompleteTrigger.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatAutocompleteTrigger.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
MatAutocompleteTrigger.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this._element.nativeElement.disabled = isDisabled;
};
/**
* @param {?} event
* @return {?}
*/
MatAutocompleteTrigger.prototype._handleKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ keyCode = event.keyCode;
// Prevent the default action on all escape key presses. This is here primarily to bring IE
// in line with other browsers. By default, pressing escape on IE will cause it to revert
// the input value to the one that it had on focus, however it won't dispatch any events
// which means that the model value will be out of sync with the view.
if (keyCode === keycodes.ESCAPE) {
event.preventDefault();
}
// Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
// See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
if (this.panelOpen && (keyCode === keycodes.ESCAPE || (keyCode === keycodes.UP_ARROW && event.altKey))) {
this._resetActiveItem();
this._closeKeyEventStream.next();
event.stopPropagation();
}
else if (this.activeOption && keyCode === keycodes.ENTER && this.panelOpen) {
this.activeOption._selectViaInteraction();
this._resetActiveItem();
event.preventDefault();
}
else {
var /** @type {?} */ prevActiveItem = this.autocomplete._keyManager.activeItem;
var /** @type {?} */ isArrowKey = keyCode === keycodes.UP_ARROW || keyCode === keycodes.DOWN_ARROW;
if (this.panelOpen || keyCode === keycodes.TAB) {
this.autocomplete._keyManager.onKeydown(event);
}
else if (isArrowKey && this._canOpen()) {
this.openPanel();
}
if (isArrowKey || this.autocomplete._keyManager.activeItem !== prevActiveItem) {
this._scrollToOption();
}
}
};
/**
* @param {?} event
* @return {?}
*/
MatAutocompleteTrigger.prototype._handleInput = /**
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ target = (event.target);
var /** @type {?} */ value = target.value;
// Based on `NumberValueAccessor` from forms.
if (target.type === 'number') {
value = value == '' ? null : parseFloat(value);
}
// If the input has a placeholder, IE will fire the `input` event on page load,
// focus and blur, in addition to when the user actually changed the value. To
// filter out all of the extra events, we save the value on focus and between
// `input` events, and we check whether it changed.
// See: https://connect.microsoft.com/IE/feedback/details/885747/
if (this._canOpen() && this._previousValue !== value &&
document.activeElement === event.target) {
this._previousValue = value;
this._onChange(value);
this.openPanel();
}
};
/**
* @return {?}
*/
MatAutocompleteTrigger.prototype._handleFocus = /**
* @return {?}
*/
function () {
if (this._canOpen()) {
this._previousValue = this._element.nativeElement.value;
this._attachOverlay();
this._floatLabel(true);
}
};
/**
* In "auto" mode, the label will animate down as soon as focus is lost.
* This causes the value to jump when selecting an option with the mouse.
* This method manually floats the label until the panel can be closed.
* @param {?=} shouldAnimate Whether the label should be animated when it is floated.
* @return {?}
*/
MatAutocompleteTrigger.prototype._floatLabel = /**
* In "auto" mode, the label will animate down as soon as focus is lost.
* This causes the value to jump when selecting an option with the mouse.
* This method manually floats the label until the panel can be closed.
* @param {?=} shouldAnimate Whether the label should be animated when it is floated.
* @return {?}
*/
function (shouldAnimate) {
if (shouldAnimate === void 0) {
shouldAnimate = false;
}
if (this._formField && this._formField.floatLabel === 'auto') {
if (shouldAnimate) {
this._formField._animateAndLockLabel();
}
else {
this._formField.floatLabel = 'always';
}
this._manuallyFloatingLabel = true;
}
};
/**
* If the label has been manually elevated, return it to its normal state.
* @return {?}
*/
MatAutocompleteTrigger.prototype._resetLabel = /**
* If the label has been manually elevated, return it to its normal state.
* @return {?}
*/
function () {
if (this._manuallyFloatingLabel) {
this._formField.floatLabel = 'auto';
this._manuallyFloatingLabel = false;
}
};
/**
* Given that we are not actually focusing active options, we must manually adjust scroll
* to reveal options below the fold. First, we find the offset of the option from the top
* of the panel. If that offset is below the fold, the new scrollTop will be the offset -
* the panel height + the option height, so the active option will be just visible at the
* bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
* will become the offset. If that offset is visible within the panel already, the scrollTop is
* not adjusted.
* @return {?}
*/
MatAutocompleteTrigger.prototype._scrollToOption = /**
* Given that we are not actually focusing active options, we must manually adjust scroll
* to reveal options below the fold. First, we find the offset of the option from the top
* of the panel. If that offset is below the fold, the new scrollTop will be the offset -
* the panel height + the option height, so the active option will be just visible at the
* bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
* will become the offset. If that offset is visible within the panel already, the scrollTop is
* not adjusted.
* @return {?}
*/
function () {
var /** @type {?} */ index = this.autocomplete._keyManager.activeItemIndex || 0;
var /** @type {?} */ labelCount = _countGroupLabelsBeforeOption(index, this.autocomplete.options, this.autocomplete.optionGroups);
var /** @type {?} */ newScrollPosition = _getOptionScrollPosition(index + labelCount, AUTOCOMPLETE_OPTION_HEIGHT, this.autocomplete._getScrollTop(), AUTOCOMPLETE_PANEL_HEIGHT);
this.autocomplete._setScrollTop(newScrollPosition);
};
/**
* This method listens to a stream of panel closing actions and resets the
* stream every time the option list changes.
* @return {?}
*/
MatAutocompleteTrigger.prototype._subscribeToClosingActions = /**
* This method listens to a stream of panel closing actions and resets the
* stream every time the option list changes.
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ firstStable = this._zone.onStable.asObservable().pipe(take_2(1));
var /** @type {?} */ optionChanges = this.autocomplete.options.changes.pipe(tap_2(function () { return _this._positionStrategy.recalculateLastPosition(); }),
// Defer emitting to the stream until the next tick, because changing
// bindings in here will cause "changed after checked" errors.
delay_2(0));
// When the zone is stable initially, and when the option list changes...
return merge.merge(firstStable, optionChanges)
.pipe(
// create a new stream of panelClosingActions, replacing any previous streams
// that were created, and flatten it so our stream only emits closing events...
switchMap_2(function () {
_this._resetActiveItem();
_this.autocomplete._setVisibility();
return _this.panelClosingActions;
}),
// when the first closing event occurs...
take_2(1))
.subscribe(function (event) { return _this._setValueAndClose(event); });
};
/**
* Destroys the autocomplete suggestion panel.
* @return {?}
*/
MatAutocompleteTrigger.prototype._destroyPanel = /**
* Destroys the autocomplete suggestion panel.
* @return {?}
*/
function () {
if (this._overlayRef) {
this.closePanel();
this._overlayRef.dispose();
this._overlayRef = null;
}
};
/**
* @param {?} value
* @return {?}
*/
MatAutocompleteTrigger.prototype._setTriggerValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
var /** @type {?} */ toDisplay = this.autocomplete && this.autocomplete.displayWith ?
this.autocomplete.displayWith(value) :
value;
// Simply falling back to an empty string if the display value is falsy does not work properly.
// The display value can also be the number zero and shouldn't fall back to an empty string.
var /** @type {?} */ inputValue = toDisplay != null ? toDisplay : '';
// If it's used within a `MatFormField`, we should set it through the property so it can go
// through change detection.
if (this._formField) {
this._formField._control.value = inputValue;
}
else {
this._element.nativeElement.value = inputValue;
}
};
/**
* This method closes the panel, and if a value is specified, also sets the associated
* control to that value. It will also mark the control as dirty if this interaction
* stemmed from the user.
* @param {?} event
* @return {?}
*/
MatAutocompleteTrigger.prototype._setValueAndClose = /**
* This method closes the panel, and if a value is specified, also sets the associated
* control to that value. It will also mark the control as dirty if this interaction
* stemmed from the user.
* @param {?} event
* @return {?}
*/
function (event) {
if (event && event.source) {
this._clearPreviousSelectedOption(event.source);
this._setTriggerValue(event.source.value);
this._onChange(event.source.value);
this._element.nativeElement.focus();
this.autocomplete._emitSelectEvent(event.source);
}
this.closePanel();
};
/**
* Clear any previous selected option and emit a selection change event for this option
* @param {?} skip
* @return {?}
*/
MatAutocompleteTrigger.prototype._clearPreviousSelectedOption = /**
* Clear any previous selected option and emit a selection change event for this option
* @param {?} skip
* @return {?}
*/
function (skip) {
this.autocomplete.options.forEach(function (option) {
if (option != skip && option.selected) {
option.deselect();
}
});
};
/**
* @return {?}
*/
MatAutocompleteTrigger.prototype._attachOverlay = /**
* @return {?}
*/
function () {
if (!this.autocomplete) {
throw getMatAutocompleteMissingPanelError();
}
if (!this._overlayRef) {
this._portal = new portal.TemplatePortal(this.autocomplete.template, this._viewContainerRef);
this._overlayRef = this._overlay.create(this._getOverlayConfig());
}
else {
/** Update the panel width, in case the host width has changed */
this._overlayRef.updateSize({ width: this._getHostWidth() });
}
if (this._overlayRef && !this._overlayRef.hasAttached()) {
this._overlayRef.attach(this._portal);
this._closingActionsSubscription = this._subscribeToClosingActions();
}
this.autocomplete._setVisibility();
this.autocomplete._isOpen = this._panelOpen = true;
};
/**
* @return {?}
*/
MatAutocompleteTrigger.prototype._getOverlayConfig = /**
* @return {?}
*/
function () {
return new overlay.OverlayConfig({
positionStrategy: this._getOverlayPosition(),
scrollStrategy: this._scrollStrategy(),
width: this._getHostWidth(),
direction: this._dir ? this._dir.value : 'ltr'
});
};
/**
* @return {?}
*/
MatAutocompleteTrigger.prototype._getOverlayPosition = /**
* @return {?}
*/
function () {
this._positionStrategy = this._overlay.position().connectedTo(this._getConnectedElement(), { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
.withFallbackPosition({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' });
return this._positionStrategy;
};
/**
* @return {?}
*/
MatAutocompleteTrigger.prototype._getConnectedElement = /**
* @return {?}
*/
function () {
return this._formField ? this._formField._connectionContainerRef : this._element;
};
/**
* Returns the width of the input element, so the panel width can match it.
* @return {?}
*/
MatAutocompleteTrigger.prototype._getHostWidth = /**
* Returns the width of the input element, so the panel width can match it.
* @return {?}
*/
function () {
return this._getConnectedElement().nativeElement.getBoundingClientRect().width;
};
/**
* Resets the active item to -1 so arrow events will activate the
* correct options, or to 0 if the consumer opted into it.
* @return {?}
*/
MatAutocompleteTrigger.prototype._resetActiveItem = /**
* Resets the active item to -1 so arrow events will activate the
* correct options, or to 0 if the consumer opted into it.
* @return {?}
*/
function () {
this.autocomplete._keyManager.setActiveItem(this.autocomplete.autoActiveFirstOption ? 0 : -1);
};
/**
* Determines whether the panel can be opened.
* @return {?}
*/
MatAutocompleteTrigger.prototype._canOpen = /**
* Determines whether the panel can be opened.
* @return {?}
*/
function () {
var /** @type {?} */ element = this._element.nativeElement;
return !element.readOnly && !element.disabled;
};
MatAutocompleteTrigger.decorators = [
{ type: core.Directive, args: [{
selector: "input[matAutocomplete], textarea[matAutocomplete]",
host: {
'role': 'combobox',
'autocomplete': 'off',
'aria-autocomplete': 'list',
'[attr.aria-activedescendant]': 'activeOption?.id',
'[attr.aria-expanded]': 'panelOpen.toString()',
'[attr.aria-owns]': 'autocomplete?.id',
// Note: we use `focusin`, as opposed to `focus`, in order to open the panel
// a little earlier. This avoids issues where IE delays the focusing of the input.
'(focusin)': '_handleFocus()',
'(blur)': '_onTouched()',
'(input)': '_handleInput($event)',
'(keydown)': '_handleKeydown($event)',
},
exportAs: 'matAutocompleteTrigger',
providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
},] },
];
/** @nocollapse */
MatAutocompleteTrigger.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: overlay.Overlay, },
{ type: core.ViewContainerRef, },
{ type: core.NgZone, },
{ type: core.ChangeDetectorRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY,] },] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: MatFormField, decorators: [{ type: core.Optional }, { type: core.Host },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
MatAutocompleteTrigger.propDecorators = {
"autocomplete": [{ type: core.Input, args: ['matAutocomplete',] },],
};
return MatAutocompleteTrigger;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Default color palette for round buttons (mat-fab and mat-mini-fab)
*/
var DEFAULT_ROUND_BUTTON_COLOR = 'accent';
/**
* Default color palette for flat buttons (mat-flat-button)
*/
var DEFAULT_FLAT_BUTTON_COLOR = 'primary';
/**
* List of classes to add to MatButton instances based on host attributes to
* style as different variants.
*/
var BUTTON_HOST_ATTRIBUTES = [
'mat-button',
'mat-flat-button',
'mat-icon-button',
'mat-raised-button',
'mat-stroked-button',
'mat-mini-fab',
'mat-fab',
];
/**
* \@docs-private
*/
var MatButtonBase = (function () {
function MatButtonBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatButtonBase;
}());
var _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase)));
/**
* Material design button.
*/
var MatButton = (function (_super) {
__extends(MatButton, _super);
function MatButton(elementRef, _platform, _focusMonitor) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
_this._focusMonitor = _focusMonitor;
/**
* Whether the button is round.
*/
_this._isRoundButton = _this._hasHostAttributes('mat-fab', 'mat-mini-fab');
/**
* Whether the button is icon button.
*/
_this._isIconButton = _this._hasHostAttributes('mat-icon-button');
// For each of the variant selectors that is prevent in the button's host
// attributes, add the correct corresponding class.
for (var _i = 0, BUTTON_HOST_ATTRIBUTES_1 = BUTTON_HOST_ATTRIBUTES; _i < BUTTON_HOST_ATTRIBUTES_1.length; _i++) {
var attr = BUTTON_HOST_ATTRIBUTES_1[_i];
if (_this._hasHostAttributes(attr)) {
((elementRef.nativeElement)).classList.add(attr);
}
}
_this._focusMonitor.monitor(_this._elementRef.nativeElement, true);
if (_this._isRoundButton) {
_this.color = DEFAULT_ROUND_BUTTON_COLOR;
}
else if (_this._hasHostAttributes('mat-flat-button')) {
_this.color = DEFAULT_FLAT_BUTTON_COLOR;
}
return _this;
}
/**
* @return {?}
*/
MatButton.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
};
/** Focuses the button. */
/**
* Focuses the button.
* @return {?}
*/
MatButton.prototype.focus = /**
* Focuses the button.
* @return {?}
*/
function () {
this._getHostElement().focus();
};
/**
* @return {?}
*/
MatButton.prototype._getHostElement = /**
* @return {?}
*/
function () {
return this._elementRef.nativeElement;
};
/**
* @return {?}
*/
MatButton.prototype._isRippleDisabled = /**
* @return {?}
*/
function () {
return this.disableRipple || this.disabled;
};
/** Gets whether the button has one of the given attributes. */
/**
* Gets whether the button has one of the given attributes.
* @param {...?} attributes
* @return {?}
*/
MatButton.prototype._hasHostAttributes = /**
* Gets whether the button has one of the given attributes.
* @param {...?} attributes
* @return {?}
*/
function () {
var _this = this;
var attributes = [];
for (var _i = 0; _i < arguments.length; _i++) {
attributes[_i] = arguments[_i];
}
// If not on the browser, say that there are none of the attributes present.
// Since these only affect how the ripple displays (and ripples only happen on the client),
// detecting these attributes isn't necessary when not on the browser.
if (!this._platform.isBrowser) {
return false;
}
return attributes.some(function (attribute) { return _this._getHostElement().hasAttribute(attribute); });
};
MatButton.decorators = [
{ type: core.Component, args: [{ selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],\n button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],\n button[mat-flat-button]",
exportAs: 'matButton',
host: {
'[disabled]': 'disabled || null',
},
template: "<span class=\"mat-button-wrapper\"><ng-content></ng-content></span><div matRipple class=\"mat-button-ripple\" [class.mat-button-ripple-round]=\"_isRoundButton || _isIconButton\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleCentered]=\"_isIconButton\" [matRippleTrigger]=\"_getHostElement()\"></div><div class=\"mat-button-focus-overlay\"></div>",
styles: [".mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:88px;line-height:36px;padding:0 16px;border-radius:2px}[disabled].mat-button,[disabled].mat-fab,[disabled].mat-flat-button,[disabled].mat-icon-button,[disabled].mat-mini-fab,[disabled].mat-raised-button,[disabled].mat-stroked-button{cursor:default}.cdk-keyboard-focused.mat-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-flat-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-icon-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-mini-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-raised-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-stroked-button .mat-button-focus-overlay,.cdk-program-focused.mat-button .mat-button-focus-overlay,.cdk-program-focused.mat-fab .mat-button-focus-overlay,.cdk-program-focused.mat-flat-button .mat-button-focus-overlay,.cdk-program-focused.mat-icon-button .mat-button-focus-overlay,.cdk-program-focused.mat-mini-fab .mat-button-focus-overlay,.cdk-program-focused.mat-raised-button .mat-button-focus-overlay,.cdk-program-focused.mat-stroked-button .mat-button-focus-overlay{opacity:1}.mat-button::-moz-focus-inner,.mat-fab::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-mini-fab::-moz-focus-inner,.mat-raised-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-fab,.mat-mini-fab,.mat-raised-button{transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-fab:not([class*=mat-elevation-z]),.mat-mini-fab:not([class*=mat-elevation-z]),.mat-raised-button:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-fab:not([disabled]):active:not([class*=mat-elevation-z]),.mat-mini-fab:not([disabled]):active:not([class*=mat-elevation-z]),.mat-raised-button:not([disabled]):active:not([class*=mat-elevation-z]){box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}[disabled].mat-fab,[disabled].mat-mini-fab,[disabled].mat-raised-button{box-shadow:none}.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{transition:none;opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:1}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button:not([class*=mat-elevation-z]){box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mat-flat-button:not([class*=mat-elevation-z]){box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mat-fab{min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab:not([class*=mat-elevation-z]){box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mat-fab:not([disabled]):active:not([class*=mat-elevation-z]){box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab:not([class*=mat-elevation-z]){box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mat-mini-fab:not([disabled]):active:not([class*=mat-elevation-z]){box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button,.mat-fab,.mat-icon-button,.mat-mini-fab,.mat-raised-button{color:currentColor}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*{vertical-align:middle}.mat-button-focus-overlay,.mat-button-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-button-focus-overlay{background-color:rgba(0,0,0,.12);border-radius:inherit;opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}@media screen and (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:rgba(255,255,255,.5)}}.mat-button-ripple-round{border-radius:50%;z-index:1}@media screen and (-ms-high-contrast:active){.mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button{outline:solid 1px}}"],
inputs: ['disabled', 'disableRipple', 'color'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatButton.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: platform.Platform, },
{ type: a11y.FocusMonitor, },
];
};
MatButton.propDecorators = {
"ripple": [{ type: core.ViewChild, args: [MatRipple,] },],
};
return MatButton;
}(_MatButtonMixinBase));
/**
* Raised Material design button.
*/
var MatAnchor = (function (_super) {
__extends(MatAnchor, _super);
function MatAnchor(platform$$1, focusMonitor, elementRef) {
return _super.call(this, elementRef, platform$$1, focusMonitor) || this;
}
/**
* @param {?} event
* @return {?}
*/
MatAnchor.prototype._haltDisabledEvents = /**
* @param {?} event
* @return {?}
*/
function (event) {
// A disabled button shouldn't apply any actions
if (this.disabled) {
event.preventDefault();
event.stopImmediatePropagation();
}
};
MatAnchor.decorators = [
{ type: core.Component, args: [{ selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],\n a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]",
exportAs: 'matButton, matAnchor',
host: {
'[attr.tabindex]': 'disabled ? -1 : 0',
'[attr.disabled]': 'disabled || null',
'[attr.aria-disabled]': 'disabled.toString()',
'(click)': '_haltDisabledEvents($event)',
},
inputs: ['disabled', 'disableRipple', 'color'],
template: "<span class=\"mat-button-wrapper\"><ng-content></ng-content></span><div matRipple class=\"mat-button-ripple\" [class.mat-button-ripple-round]=\"_isRoundButton || _isIconButton\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleCentered]=\"_isIconButton\" [matRippleTrigger]=\"_getHostElement()\"></div><div class=\"mat-button-focus-overlay\"></div>",
styles: [".mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:88px;line-height:36px;padding:0 16px;border-radius:2px}[disabled].mat-button,[disabled].mat-fab,[disabled].mat-flat-button,[disabled].mat-icon-button,[disabled].mat-mini-fab,[disabled].mat-raised-button,[disabled].mat-stroked-button{cursor:default}.cdk-keyboard-focused.mat-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-flat-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-icon-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-mini-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-raised-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-stroked-button .mat-button-focus-overlay,.cdk-program-focused.mat-button .mat-button-focus-overlay,.cdk-program-focused.mat-fab .mat-button-focus-overlay,.cdk-program-focused.mat-flat-button .mat-button-focus-overlay,.cdk-program-focused.mat-icon-button .mat-button-focus-overlay,.cdk-program-focused.mat-mini-fab .mat-button-focus-overlay,.cdk-program-focused.mat-raised-button .mat-button-focus-overlay,.cdk-program-focused.mat-stroked-button .mat-button-focus-overlay{opacity:1}.mat-button::-moz-focus-inner,.mat-fab::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-mini-fab::-moz-focus-inner,.mat-raised-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-fab,.mat-mini-fab,.mat-raised-button{transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-fab:not([class*=mat-elevation-z]),.mat-mini-fab:not([class*=mat-elevation-z]),.mat-raised-button:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-fab:not([disabled]):active:not([class*=mat-elevation-z]),.mat-mini-fab:not([disabled]):active:not([class*=mat-elevation-z]),.mat-raised-button:not([disabled]):active:not([class*=mat-elevation-z]){box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}[disabled].mat-fab,[disabled].mat-mini-fab,[disabled].mat-raised-button{box-shadow:none}.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{transition:none;opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:1}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button:not([class*=mat-elevation-z]){box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mat-flat-button:not([class*=mat-elevation-z]){box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mat-fab{min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab:not([class*=mat-elevation-z]){box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mat-fab:not([disabled]):active:not([class*=mat-elevation-z]){box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab:not([class*=mat-elevation-z]){box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mat-mini-fab:not([disabled]):active:not([class*=mat-elevation-z]){box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button,.mat-fab,.mat-icon-button,.mat-mini-fab,.mat-raised-button{color:currentColor}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*{vertical-align:middle}.mat-button-focus-overlay,.mat-button-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-button-focus-overlay{background-color:rgba(0,0,0,.12);border-radius:inherit;opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}@media screen and (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:rgba(255,255,255,.5)}}.mat-button-ripple-round{border-radius:50%;z-index:1}@media screen and (-ms-high-contrast:active){.mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button{outline:solid 1px}}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatAnchor.ctorParameters = function () {
return [
{ type: platform.Platform, },
{ type: a11y.FocusMonitor, },
{ type: core.ElementRef, },
];
};
return MatAnchor;
}(MatButton));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatButtonModule = (function () {
function MatButtonModule() {
}
MatButtonModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
MatRippleModule,
MatCommonModule,
a11y.A11yModule,
],
exports: [
MatButton,
MatAnchor,
MatCommonModule,
],
declarations: [
MatButton,
MatAnchor,
],
},] },
];
/** @nocollapse */
MatButtonModule.ctorParameters = function () { return []; };
return MatButtonModule;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatButtonToggleGroupBase = (function () {
function MatButtonToggleGroupBase() {
}
return MatButtonToggleGroupBase;
}());
var _MatButtonToggleGroupMixinBase = mixinDisabled(MatButtonToggleGroupBase);
/**
* Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* \@docs-private
*/
var MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatButtonToggleGroup; }),
multi: true
};
var _uniqueIdCounter$1 = 0;
/**
* Change event object emitted by MatButtonToggle.
*/
var MatButtonToggleChange = (function () {
function MatButtonToggleChange() {
}
return MatButtonToggleChange;
}());
/**
* Exclusive selection button toggle group that behaves like a radio-button group.
*/
var MatButtonToggleGroup = (function (_super) {
__extends(MatButtonToggleGroup, _super);
function MatButtonToggleGroup(_changeDetector) {
var _this = _super.call(this) || this;
_this._changeDetector = _changeDetector;
/**
* The method to be called in order to update ngModel.
* Now `ngModel` binding is not supported in multiple selection mode.
*/
_this._controlValueAccessorChangeFn = function () { };
/**
* onTouch function registered via registerOnTouch (ControlValueAccessor).
*/
_this._onTouched = function () { };
_this._name = "mat-button-toggle-group-" + _uniqueIdCounter$1++;
_this._vertical = false;
_this._value = null;
/**
* Event that emits whenever the value of the group changes.
* Used to facilitate two-way data binding.
* \@docs-private
*/
_this.valueChange = new core.EventEmitter();
_this._selected = null;
/**
* Event emitted when the group's value changes.
*/
_this.change = new core.EventEmitter();
return _this;
}
Object.defineProperty(MatButtonToggleGroup.prototype, "name", {
get: /**
* `name` attribute for the underlying `input` element.
* @return {?}
*/ function () { return this._name; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._name = value;
this._updateButtonToggleNames();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggleGroup.prototype, "vertical", {
get: /**
* Whether the toggle group is vertical.
* @return {?}
*/ function () { return this._vertical; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._vertical = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggleGroup.prototype, "value", {
get: /**
* Value of the toggle group.
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (this._value != value) {
this._value = value;
this.valueChange.emit(value);
this._updateSelectedButtonToggleFromValue();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggleGroup.prototype, "selected", {
get: /**
* The currently selected button toggle, should match the value.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} selected
* @return {?}
*/ function (selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
if (selected && !selected.checked) {
selected.checked = true;
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatButtonToggleGroup.prototype._updateButtonToggleNames = /**
* @return {?}
*/
function () {
var _this = this;
if (this._buttonToggles) {
this._buttonToggles.forEach(function (toggle) {
toggle.name = _this._name;
});
}
};
/**
* @return {?}
*/
MatButtonToggleGroup.prototype._updateSelectedButtonToggleFromValue = /**
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ isAlreadySelected = this._selected != null && this._selected.value == this._value;
if (this._buttonToggles != null && !isAlreadySelected) {
var /** @type {?} */ matchingButtonToggle = this._buttonToggles.filter(function (buttonToggle) { return buttonToggle.value == _this._value; })[0];
if (matchingButtonToggle) {
this.selected = matchingButtonToggle;
}
else if (this.value == null) {
this.selected = null;
this._buttonToggles.forEach(function (buttonToggle) {
buttonToggle.checked = false;
});
}
}
};
/** Dispatch change event with current selection and group value. */
/**
* Dispatch change event with current selection and group value.
* @return {?}
*/
MatButtonToggleGroup.prototype._emitChangeEvent = /**
* Dispatch change event with current selection and group value.
* @return {?}
*/
function () {
var /** @type {?} */ event = new MatButtonToggleChange();
event.source = this._selected;
event.value = this._value;
this._controlValueAccessorChangeFn(event.value);
this.change.emit(event);
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MatButtonToggleGroup.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this._changeDetector.markForCheck();
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatButtonToggleGroup.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._controlValueAccessorChangeFn = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatButtonToggleGroup.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
MatButtonToggleGroup.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
this._markButtonTogglesForCheck();
};
/**
* @return {?}
*/
MatButtonToggleGroup.prototype._markButtonTogglesForCheck = /**
* @return {?}
*/
function () {
if (this._buttonToggles) {
this._buttonToggles.forEach(function (toggle) { return toggle._markForCheck(); });
}
};
MatButtonToggleGroup.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-button-toggle-group:not([multiple])',
providers: [MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
inputs: ['disabled'],
host: {
'role': 'radiogroup',
'class': 'mat-button-toggle-group',
'[class.mat-button-toggle-vertical]': 'vertical'
},
exportAs: 'matButtonToggleGroup',
},] },
];
/** @nocollapse */
MatButtonToggleGroup.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef, },
];
};
MatButtonToggleGroup.propDecorators = {
"_buttonToggles": [{ type: core.ContentChildren, args: [core.forwardRef(function () { return MatButtonToggle; }),] },],
"name": [{ type: core.Input },],
"vertical": [{ type: core.Input },],
"value": [{ type: core.Input },],
"valueChange": [{ type: core.Output },],
"selected": [{ type: core.Input },],
"change": [{ type: core.Output },],
};
return MatButtonToggleGroup;
}(_MatButtonToggleGroupMixinBase));
/**
* Multiple selection button-toggle group. `ngModel` is not supported in this mode.
*/
var MatButtonToggleGroupMultiple = (function (_super) {
__extends(MatButtonToggleGroupMultiple, _super);
function MatButtonToggleGroupMultiple() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._vertical = false;
return _this;
}
Object.defineProperty(MatButtonToggleGroupMultiple.prototype, "vertical", {
get: /**
* Whether the toggle group is vertical.
* @return {?}
*/ function () { return this._vertical; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._vertical = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
MatButtonToggleGroupMultiple.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-button-toggle-group[multiple]',
exportAs: 'matButtonToggleGroup',
inputs: ['disabled'],
host: {
'class': 'mat-button-toggle-group',
'[class.mat-button-toggle-vertical]': 'vertical',
'role': 'group'
}
},] },
];
/** @nocollapse */
MatButtonToggleGroupMultiple.ctorParameters = function () { return []; };
MatButtonToggleGroupMultiple.propDecorators = {
"vertical": [{ type: core.Input },],
};
return MatButtonToggleGroupMultiple;
}(_MatButtonToggleGroupMixinBase));
/**
* Single button inside of a toggle group.
*/
var MatButtonToggle = (function () {
function MatButtonToggle(toggleGroup, toggleGroupMultiple, _changeDetectorRef, _buttonToggleDispatcher, _elementRef, _focusMonitor) {
var _this = this;
this._changeDetectorRef = _changeDetectorRef;
this._buttonToggleDispatcher = _buttonToggleDispatcher;
this._elementRef = _elementRef;
this._focusMonitor = _focusMonitor;
/**
* Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
* take precedence so this may be omitted.
*/
this.ariaLabel = '';
/**
* Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
*/
this.ariaLabelledby = null;
/**
* Whether or not the button toggle is a single selection.
*/
this._isSingleSelector = false;
/**
* Unregister function for _buttonToggleDispatcher
*/
this._removeUniqueSelectionListener = function () { };
this._checked = false;
this._value = null;
this._disabled = false;
/**
* Event emitted when the group value changes.
*/
this.change = new core.EventEmitter();
this.buttonToggleGroup = toggleGroup;
this.buttonToggleGroupMultiple = toggleGroupMultiple;
if (this.buttonToggleGroup) {
this._removeUniqueSelectionListener =
_buttonToggleDispatcher.listen(function (id, name) {
if (id != _this.id && name == _this.name) {
_this.checked = false;
_this._changeDetectorRef.markForCheck();
}
});
this._type = 'radio';
this.name = this.buttonToggleGroup.name;
this._isSingleSelector = true;
}
else {
// Even if there is no group at all, treat the button toggle as a checkbox so it can be
// toggled on or off.
this._type = 'checkbox';
this._isSingleSelector = false;
}
}
Object.defineProperty(MatButtonToggle.prototype, "inputId", {
/** Unique ID for the underlying `input` element. */
get: /**
* Unique ID for the underlying `input` element.
* @return {?}
*/ function () { return this.id + "-input"; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggle.prototype, "checked", {
get: /**
* Whether the button is checked.
* @return {?}
*/ function () { return this._checked; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (this._isSingleSelector && value) {
// Notify all button toggles with the same name (in the same group) to un-check.
this._buttonToggleDispatcher.notify(this.id, this.name);
this._changeDetectorRef.markForCheck();
}
this._checked = value;
if (value && this._isSingleSelector && this.buttonToggleGroup.value != this.value) {
this.buttonToggleGroup.selected = this;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggle.prototype, "value", {
get: /**
* MatButtonToggleGroup reads this to assign its own value.
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (this._value != value) {
if (this.buttonToggleGroup != null && this.checked) {
this.buttonToggleGroup.value = value;
}
this._value = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatButtonToggle.prototype, "disabled", {
get: /**
* Whether the button is disabled.
* @return {?}
*/ function () {
return this._disabled || (this.buttonToggleGroup != null && this.buttonToggleGroup.disabled) ||
(this.buttonToggleGroupMultiple != null && this.buttonToggleGroupMultiple.disabled);
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._disabled = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatButtonToggle.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.id == null) {
this.id = "mat-button-toggle-" + _uniqueIdCounter$1++;
}
if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
this._checked = true;
}
this._focusMonitor.monitor(this._elementRef.nativeElement, true);
};
/** Focuses the button. */
/**
* Focuses the button.
* @return {?}
*/
MatButtonToggle.prototype.focus = /**
* Focuses the button.
* @return {?}
*/
function () {
this._inputElement.nativeElement.focus();
};
/**
* Toggle the state of the current button toggle.
* @return {?}
*/
MatButtonToggle.prototype._toggle = /**
* Toggle the state of the current button toggle.
* @return {?}
*/
function () {
this.checked = !this.checked;
};
/** Checks the button toggle due to an interaction with the underlying native input. */
/**
* Checks the button toggle due to an interaction with the underlying native input.
* @param {?} event
* @return {?}
*/
MatButtonToggle.prototype._onInputChange = /**
* Checks the button toggle due to an interaction with the underlying native input.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
if (this._isSingleSelector) {
// Propagate the change one-way via the group, which will in turn mark this
// button toggle as checked.
var /** @type {?} */ groupValueChanged = this.buttonToggleGroup.selected != this;
this.checked = true;
this.buttonToggleGroup.selected = this;
this.buttonToggleGroup._onTouched();
if (groupValueChanged) {
this.buttonToggleGroup._emitChangeEvent();
}
}
else {
this._toggle();
}
// Emit a change event when the native input does.
this._emitChangeEvent();
};
/**
* @param {?} event
* @return {?}
*/
MatButtonToggle.prototype._onInputClick = /**
* @param {?} event
* @return {?}
*/
function (event) {
// We have to stop propagation for click events on the visual hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `slide-toggle` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
};
/**
* Dispatch change event with current value.
* @return {?}
*/
MatButtonToggle.prototype._emitChangeEvent = /**
* Dispatch change event with current value.
* @return {?}
*/
function () {
var /** @type {?} */ event = new MatButtonToggleChange();
event.source = this;
event.value = this._value;
this.change.emit(event);
};
// Unregister buttonToggleDispatcherListener on destroy
/**
* @return {?}
*/
MatButtonToggle.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._removeUniqueSelectionListener();
};
/**
* Marks the button toggle as needing checking for change detection.
* This method is exposed because the parent button toggle group will directly
* update bound properties of the radio button.
*/
/**
* Marks the button toggle as needing checking for change detection.
* This method is exposed because the parent button toggle group will directly
* update bound properties of the radio button.
* @return {?}
*/
MatButtonToggle.prototype._markForCheck = /**
* Marks the button toggle as needing checking for change detection.
* This method is exposed because the parent button toggle group will directly
* update bound properties of the radio button.
* @return {?}
*/
function () {
// When group value changes, the button will not be notified. Use `markForCheck` to explicit
// update button toggle's status
this._changeDetectorRef.markForCheck();
};
MatButtonToggle.decorators = [
{ type: core.Component, args: [{ selector: 'mat-button-toggle',
template: "<label [attr.for]=\"inputId\" class=\"mat-button-toggle-label\"><input #input class=\"mat-button-toggle-input cdk-visually-hidden\" [type]=\"_type\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled || null\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onInputChange($event)\" (click)=\"_onInputClick($event)\"><div class=\"mat-button-toggle-label-content\"><ng-content></ng-content></div></label><div class=\"mat-button-toggle-focus-overlay\"></div>",
styles: [".mat-button-toggle-group,.mat-button-toggle-standalone{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);position:relative;display:inline-flex;flex-direction:row;border-radius:2px;cursor:pointer;white-space:nowrap;overflow:hidden}.mat-button-toggle-vertical{flex-direction:column}.mat-button-toggle-vertical .mat-button-toggle-label-content{display:block}.mat-button-toggle-disabled .mat-button-toggle-label-content{cursor:default}.mat-button-toggle{white-space:nowrap;position:relative}.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay,.mat-button-toggle.cdk-program-focused .mat-button-toggle-focus-overlay{opacity:1}.mat-button-toggle-label-content{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;line-height:36px;padding:0 16px;cursor:pointer}.mat-button-toggle-label-content>*{vertical-align:middle}.mat-button-toggle-focus-overlay{border-radius:inherit;pointer-events:none;opacity:0;top:0;left:0;right:0;bottom:0;position:absolute}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
exportAs: 'matButtonToggle',
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: {
'[class.mat-button-toggle-standalone]': '!buttonToggleGroup && !buttonToggleGroupMultiple',
'[class.mat-button-toggle-checked]': 'checked',
'[class.mat-button-toggle-disabled]': 'disabled',
'class': 'mat-button-toggle',
'[attr.id]': 'id',
}
},] },
];
/** @nocollapse */
MatButtonToggle.ctorParameters = function () {
return [
{ type: MatButtonToggleGroup, decorators: [{ type: core.Optional },] },
{ type: MatButtonToggleGroupMultiple, decorators: [{ type: core.Optional },] },
{ type: core.ChangeDetectorRef, },
{ type: collections.UniqueSelectionDispatcher, },
{ type: core.ElementRef, },
{ type: a11y.FocusMonitor, },
];
};
MatButtonToggle.propDecorators = {
"ariaLabel": [{ type: core.Input, args: ['aria-label',] },],
"ariaLabelledby": [{ type: core.Input, args: ['aria-labelledby',] },],
"_inputElement": [{ type: core.ViewChild, args: ['input',] },],
"id": [{ type: core.Input },],
"name": [{ type: core.Input },],
"checked": [{ type: core.Input },],
"value": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"change": [{ type: core.Output },],
};
return MatButtonToggle;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* A basic content container component that adds the styles of a Material design card.
*
* While this component can be used alone, it also provides a number
* of preset styles for common card sections, including:
* - mat-card-title
* - mat-card-subtitle
* - mat-card-content
* - mat-card-actions
* - mat-card-footer
*/
var MatCard = (function () {
function MatCard() {
}
MatCard.decorators = [
{ type: core.Component, args: [{ selector: 'mat-card',
exportAs: 'matCard',
template: "<ng-content></ng-content><ng-content select=\"mat-card-footer\"></ng-content>",
styles: [".mat-card{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:24px;border-radius:2px}.mat-card:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-card .mat-divider{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider{left:auto;right:0}.mat-card .mat-divider.mat-divider-inset{position:static;margin:0}@media screen and (-ms-high-contrast:active){.mat-card{outline:solid 1px}}.mat-card-flat{box-shadow:none}.mat-card-actions,.mat-card-content,.mat-card-subtitle,.mat-card-title{display:block;margin-bottom:16px}.mat-card-actions{margin-left:-16px;margin-right:-16px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 48px);margin:0 -24px 16px -24px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-footer{display:block;margin:0 -24px -24px -24px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button{margin:0 4px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header-text{margin:0 8px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0}.mat-card-lg-image,.mat-card-md-image,.mat-card-sm-image{margin:-8px 0}.mat-card-title-group{display:flex;justify-content:space-between;margin:0 -8px}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}@media (max-width:599px){.mat-card{padding:24px 16px}.mat-card-actions{margin-left:-8px;margin-right:-8px}.mat-card-image{width:calc(100% + 32px);margin:16px -16px}.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}.mat-card-header{margin:-8px 0 0 0}.mat-card-footer{margin-left:-16px;margin-right:-16px}}.mat-card-content>:first-child,.mat-card>:first-child{margin-top:0}.mat-card-content>:last-child:not(.mat-card-footer),.mat-card>:last-child:not(.mat-card-footer){margin-bottom:0}.mat-card-image:first-child{margin-top:-24px}.mat-card>.mat-card-actions:last-child{margin-bottom:-16px;padding-bottom:0}.mat-card-actions .mat-button:first-child,.mat-card-actions .mat-raised-button:first-child{margin-left:0;margin-right:0}.mat-card-subtitle:not(:first-child),.mat-card-title:not(:first-child){margin-top:-4px}.mat-card-header .mat-card-subtitle:not(:first-child){margin-top:-8px}.mat-card>.mat-card-xl-image:first-child{margin-top:-8px}.mat-card>.mat-card-xl-image:last-child{margin-bottom:-8px}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: { 'class': 'mat-card' }
},] },
];
/** @nocollapse */
MatCard.ctorParameters = function () { return []; };
return MatCard;
}());
/**
* Component intended to be used within the `<mat-card>` component. It adds styles for a
* preset header section (i.e. a title, subtitle, and avatar layout).
* \@docs-private
*/
var MatCardHeader = (function () {
function MatCardHeader() {
}
MatCardHeader.decorators = [
{ type: core.Component, args: [{ selector: 'mat-card-header',
template: "<ng-content select=\"[mat-card-avatar], [matCardAvatar]\"></ng-content><div class=\"mat-card-header-text\"><ng-content select=\"mat-card-title, mat-card-subtitle, [mat-card-title], [mat-card-subtitle], [matCardTitle], [matCardSubtitle]\"></ng-content></div><ng-content></ng-content>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: { 'class': 'mat-card-header' }
},] },
];
/** @nocollapse */
MatCardHeader.ctorParameters = function () { return []; };
return MatCardHeader;
}());
/**
* Component intended to be used within the `<mat-card>` component. It adds styles for a preset
* layout that groups an image with a title section.
* \@docs-private
*/
var MatCardTitleGroup = (function () {
function MatCardTitleGroup() {
}
MatCardTitleGroup.decorators = [
{ type: core.Component, args: [{ selector: 'mat-card-title-group',
template: "<div><ng-content select=\"mat-card-title, mat-card-subtitle, [mat-card-title], [mat-card-subtitle], [matCardTitle], [matCardSubtitle]\"></ng-content></div><ng-content select=\"img\"></ng-content><ng-content></ng-content>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: { 'class': 'mat-card-title-group' }
},] },
];
/** @nocollapse */
MatCardTitleGroup.ctorParameters = function () { return []; };
return MatCardTitleGroup;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Injection token that can be used to specify the checkbox click behavior.
*/
var MAT_CHECKBOX_CLICK_ACTION = new core.InjectionToken('mat-checkbox-click-action');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// Increasing integer for generating unique ids for checkbox components.
var nextUniqueId$1$1 = 0;
/**
* Provider Expression that allows mat-checkbox to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* \@docs-private
*/
var MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatCheckbox; }),
multi: true
};
/** @enum {number} */
var TransitionCheckState = {
/** The initial state of the component before any user interaction. */
Init: 0,
/** The state representing the component when it's becoming checked. */
Checked: 1,
/** The state representing the component when it's becoming unchecked. */
Unchecked: 2,
/** The state representing the component when it's becoming indeterminate. */
Indeterminate: 3,
};
TransitionCheckState[TransitionCheckState.Init] = "Init";
TransitionCheckState[TransitionCheckState.Checked] = "Checked";
TransitionCheckState[TransitionCheckState.Unchecked] = "Unchecked";
TransitionCheckState[TransitionCheckState.Indeterminate] = "Indeterminate";
/**
* Change event object emitted by MatCheckbox.
*/
var MatCheckboxChange = (function () {
function MatCheckboxChange() {
}
return MatCheckboxChange;
}());
/**
* \@docs-private
*/
var MatCheckboxBase = (function () {
function MatCheckboxBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatCheckboxBase;
}());
var _MatCheckboxMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));
/**
* A material design checkbox component. Supports all of the functionality of an HTML5 checkbox,
* and exposes a similar API. A MatCheckbox can be either checked, unchecked, indeterminate, or
* disabled. Note that all additional accessibility attributes are taken care of by the component,
* so there is no need to provide them yourself. However, if you want to omit a label and still
* have the checkbox be accessible, you may supply an [aria-label] input.
* See: https://www.google.com/design/spec/components/selection-controls.html
*/
var MatCheckbox = (function (_super) {
__extends(MatCheckbox, _super);
function MatCheckbox(elementRef, _changeDetectorRef, _focusMonitor, tabIndex, _clickAction) {
var _this = _super.call(this, elementRef) || this;
_this._changeDetectorRef = _changeDetectorRef;
_this._focusMonitor = _focusMonitor;
_this._clickAction = _clickAction;
/**
* Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
* take precedence so this may be omitted.
*/
_this.ariaLabel = '';
/**
* Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
*/
_this.ariaLabelledby = null;
_this._uniqueId = "mat-checkbox-" + ++nextUniqueId$1$1;
/**
* A unique id for the checkbox input. If none is supplied, it will be auto-generated.
*/
_this.id = _this._uniqueId;
/**
* Whether the label should appear after or before the checkbox. Defaults to 'after'
*/
_this.labelPosition = 'after';
/**
* Name value will be applied to the input element if present
*/
_this.name = null;
/**
* Event emitted when the checkbox's `checked` value changes.
*/
_this.change = new core.EventEmitter();
/**
* Event emitted when the checkbox's `indeterminate` value changes.
*/
_this.indeterminateChange = new core.EventEmitter();
/**
* Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
* \@docs-private
*/
_this._onTouched = function () { };
_this._currentAnimationClass = '';
_this._currentCheckState = TransitionCheckState.Init;
_this._controlValueAccessorChangeFn = function () { };
_this._checked = false;
_this._indeterminate = false;
_this.tabIndex = parseInt(tabIndex) || 0;
return _this;
}
Object.defineProperty(MatCheckbox.prototype, "inputId", {
/** Returns the unique id for the visual hidden input. */
get: /**
* Returns the unique id for the visual hidden input.
* @return {?}
*/ function () { return (this.id || this._uniqueId) + "-input"; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatCheckbox.prototype, "required", {
get: /**
* Whether the checkbox is required.
* @return {?}
*/ function () { return this._required; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._required = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatCheckbox.prototype, "align", {
get: /**
* Whether or not the checkbox should appear before or after the label.
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () {
// align refers to the checkbox relative to the label, while labelPosition refers to the
// label relative to the checkbox. As such, they are inverted.
return this.labelPosition == 'after' ? 'start' : 'end';
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.labelPosition = (value == 'start') ? 'after' : 'before';
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatCheckbox.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this._focusMonitor
.monitor(this._inputElement.nativeElement)
.subscribe(function (focusOrigin) { return _this._onInputFocusChange(focusOrigin); });
};
/**
* @return {?}
*/
MatCheckbox.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._focusMonitor.stopMonitoring(this._inputElement.nativeElement);
};
Object.defineProperty(MatCheckbox.prototype, "checked", {
get: /**
* Whether the checkbox is checked.
* @return {?}
*/ function () { return this._checked; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value != this.checked) {
this._checked = value;
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCheckbox.prototype, "indeterminate", {
get: /**
* Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
* represent a checkbox with three states, e.g. a checkbox that represents a nested list of
* checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
* set to false.
* @return {?}
*/ function () { return this._indeterminate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ changed = value != this._indeterminate;
this._indeterminate = value;
if (changed) {
if (this._indeterminate) {
this._transitionCheckState(TransitionCheckState.Indeterminate);
}
else {
this._transitionCheckState(this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
}
this.indeterminateChange.emit(this._indeterminate);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatCheckbox.prototype._isRippleDisabled = /**
* @return {?}
*/
function () {
return this.disableRipple || this.disabled;
};
/** Method being called whenever the label text changes. */
/**
* Method being called whenever the label text changes.
* @return {?}
*/
MatCheckbox.prototype._onLabelTextChange = /**
* Method being called whenever the label text changes.
* @return {?}
*/
function () {
// This method is getting called whenever the label of the checkbox changes.
// Since the checkbox uses the OnPush strategy we need to notify it about the change
// that has been recognized by the cdkObserveContent directive.
this._changeDetectorRef.markForCheck();
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MatCheckbox.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = !!value;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatCheckbox.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._controlValueAccessorChangeFn = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatCheckbox.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
MatCheckbox.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
this._changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
MatCheckbox.prototype._getAriaChecked = /**
* @return {?}
*/
function () {
return this.checked ? 'true' : (this.indeterminate ? 'mixed' : 'false');
};
/**
* @param {?} newState
* @return {?}
*/
MatCheckbox.prototype._transitionCheckState = /**
* @param {?} newState
* @return {?}
*/
function (newState) {
var /** @type {?} */ oldState = this._currentCheckState;
var /** @type {?} */ element = this._elementRef.nativeElement;
if (oldState === newState) {
return;
}
if (this._currentAnimationClass.length > 0) {
element.classList.remove(this._currentAnimationClass);
}
this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(oldState, newState);
this._currentCheckState = newState;
if (this._currentAnimationClass.length > 0) {
element.classList.add(this._currentAnimationClass);
}
};
/**
* @return {?}
*/
MatCheckbox.prototype._emitChangeEvent = /**
* @return {?}
*/
function () {
var /** @type {?} */ event = new MatCheckboxChange();
event.source = this;
event.checked = this.checked;
this._controlValueAccessorChangeFn(this.checked);
this.change.emit(event);
};
/**
* Function is called whenever the focus changes for the input element.
* @param {?} focusOrigin
* @return {?}
*/
MatCheckbox.prototype._onInputFocusChange = /**
* Function is called whenever the focus changes for the input element.
* @param {?} focusOrigin
* @return {?}
*/
function (focusOrigin) {
if (!this._focusRipple && focusOrigin === 'keyboard') {
this._focusRipple = this.ripple.launch(0, 0, { persistent: true });
}
else if (!focusOrigin) {
this._removeFocusRipple();
this._onTouched();
}
};
/** Toggles the `checked` state of the checkbox. */
/**
* Toggles the `checked` state of the checkbox.
* @return {?}
*/
MatCheckbox.prototype.toggle = /**
* Toggles the `checked` state of the checkbox.
* @return {?}
*/
function () {
this.checked = !this.checked;
};
/**
* Event handler for checkbox input element.
* Toggles checked state if element is not disabled.
* Do not toggle on (change) event since IE doesn't fire change event when
* indeterminate checkbox is clicked.
* @param event
*/
/**
* Event handler for checkbox input element.
* Toggles checked state if element is not disabled.
* Do not toggle on (change) event since IE doesn't fire change event when
* indeterminate checkbox is clicked.
* @param {?} event
* @return {?}
*/
MatCheckbox.prototype._onInputClick = /**
* Event handler for checkbox input element.
* Toggles checked state if element is not disabled.
* Do not toggle on (change) event since IE doesn't fire change event when
* indeterminate checkbox is clicked.
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
// We have to stop propagation for click events on the visual hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `checkbox` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
// If resetIndeterminate is false, and the current state is indeterminate, do nothing on click
if (!this.disabled && this._clickAction !== 'noop') {
// When user manually click on the checkbox, `indeterminate` is set to false.
if (this.indeterminate && this._clickAction !== 'check') {
Promise.resolve().then(function () {
_this._indeterminate = false;
_this.indeterminateChange.emit(_this._indeterminate);
});
}
this.toggle();
this._transitionCheckState(this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
// Emit our custom change event if the native input emitted one.
// It is important to only emit it, if the native input triggered one, because
// we don't want to trigger a change event, when the `checked` variable changes for example.
this._emitChangeEvent();
}
else if (!this.disabled && this._clickAction === 'noop') {
// Reset native input when clicked with noop. The native checkbox becomes checked after
// click, reset it to be align with `checked` value of `mat-checkbox`.
this._inputElement.nativeElement.checked = this.checked;
this._inputElement.nativeElement.indeterminate = this.indeterminate;
}
};
/** Focuses the checkbox. */
/**
* Focuses the checkbox.
* @return {?}
*/
MatCheckbox.prototype.focus = /**
* Focuses the checkbox.
* @return {?}
*/
function () {
this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
};
/**
* @param {?} event
* @return {?}
*/
MatCheckbox.prototype._onInteractionEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
// We always have to stop propagation on the change event.
// Otherwise the change event, from the input element, will bubble up and
// emit its event object to the `change` output.
event.stopPropagation();
};
/**
* @param {?} oldState
* @param {?} newState
* @return {?}
*/
MatCheckbox.prototype._getAnimationClassForCheckStateTransition = /**
* @param {?} oldState
* @param {?} newState
* @return {?}
*/
function (oldState, newState) {
var /** @type {?} */ animSuffix = '';
switch (oldState) {
case TransitionCheckState.Init:
// Handle edge case where user interacts with checkbox that does not have [(ngModel)] or
// [checked] bound to it.
if (newState === TransitionCheckState.Checked) {
animSuffix = 'unchecked-checked';
}
else if (newState == TransitionCheckState.Indeterminate) {
animSuffix = 'unchecked-indeterminate';
}
else {
return '';
}
break;
case TransitionCheckState.Unchecked:
animSuffix = newState === TransitionCheckState.Checked ?
'unchecked-checked' : 'unchecked-indeterminate';
break;
case TransitionCheckState.Checked:
animSuffix = newState === TransitionCheckState.Unchecked ?
'checked-unchecked' : 'checked-indeterminate';
break;
case TransitionCheckState.Indeterminate:
animSuffix = newState === TransitionCheckState.Checked ?
'indeterminate-checked' : 'indeterminate-unchecked';
break;
}
return "mat-checkbox-anim-" + animSuffix;
};
/**
* Fades out the focus state ripple.
* @return {?}
*/
MatCheckbox.prototype._removeFocusRipple = /**
* Fades out the focus state ripple.
* @return {?}
*/
function () {
if (this._focusRipple) {
this._focusRipple.fadeOut();
this._focusRipple = null;
}
};
MatCheckbox.decorators = [
{ type: core.Component, args: [{ selector: 'mat-checkbox',
template: "<label [attr.for]=\"inputId\" class=\"mat-checkbox-layout\" #label><div class=\"mat-checkbox-inner-container\" [class.mat-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\"><input #input class=\"mat-checkbox-input cdk-visually-hidden\" type=\"checkbox\" [id]=\"inputId\" [required]=\"required\" [checked]=\"checked\" [attr.value]=\"value\" [disabled]=\"disabled\" [attr.name]=\"name\" [tabIndex]=\"tabIndex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-checked]=\"_getAriaChecked()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"><div matRipple class=\"mat-checkbox-ripple\" [matRippleTrigger]=\"label\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleRadius]=\"25\" [matRippleCentered]=\"true\" [matRippleAnimation]=\"{enterDuration: 150}\"></div><div class=\"mat-checkbox-frame\"></div><div class=\"mat-checkbox-background\"><svg version=\"1.1\" focusable=\"false\" class=\"mat-checkbox-checkmark\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"><path class=\"mat-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/></svg><div class=\"mat-checkbox-mixedmark\"></div></div></div><span class=\"mat-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"_onLabelTextChange()\"><span style=\"display:none\"> </span><ng-content></ng-content></span></label>",
styles: ["@keyframes mat-checkbox-fade-in-background{0%{opacity:0}50%{opacity:1}}@keyframes mat-checkbox-fade-out-background{0%,50%{opacity:1}100%{opacity:0}}@keyframes mat-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:22.91026}50%{animation-timing-function:cubic-bezier(0,0,.2,.1)}100%{stroke-dashoffset:0}}@keyframes mat-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0,0,0,1)}100%{transform:scaleX(1)}}@keyframes mat-checkbox-checked-unchecked-checkmark-path{from{animation-timing-function:cubic-bezier(.4,0,1,1);stroke-dashoffset:0}to{stroke-dashoffset:-22.91026}}@keyframes mat-checkbox-checked-indeterminate-checkmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(45deg)}}@keyframes mat-checkbox-indeterminate-checked-checkmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:0;transform:rotate(45deg)}to{opacity:1;transform:rotate(360deg)}}@keyframes mat-checkbox-checked-indeterminate-mixedmark{from{animation-timing-function:cubic-bezier(0,0,.2,.1);opacity:0;transform:rotate(-45deg)}to{opacity:1;transform:rotate(0)}}@keyframes mat-checkbox-indeterminate-checked-mixedmark{from{animation-timing-function:cubic-bezier(.14,0,0,1);opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(315deg)}}@keyframes mat-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;opacity:1;transform:scaleX(1)}100%,32.8%{opacity:0;transform:scaleX(0)}}.mat-checkbox-checkmark,.mat-checkbox-mixedmark{width:calc(100% - 4px)}.mat-checkbox-background,.mat-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:2px;box-sizing:border-box;pointer-events:none}.mat-checkbox{transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);cursor:pointer}.mat-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap}.mat-checkbox-inner-container{display:inline-block;height:20px;line-height:0;margin:auto;margin-right:8px;order:0;position:relative;vertical-align:middle;white-space:nowrap;width:20px;flex-shrink:0}[dir=rtl] .mat-checkbox-inner-container{margin-left:8px;margin-right:auto}.mat-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mat-checkbox-frame{background-color:transparent;transition:border-color 90ms cubic-bezier(0,0,.2,.1);border-width:2px;border-style:solid}.mat-checkbox-background{align-items:center;display:inline-flex;justify-content:center;transition:background-color 90ms cubic-bezier(0,0,.2,.1),opacity 90ms cubic-bezier(0,0,.2,.1)}.mat-checkbox-checkmark{top:0;left:0;right:0;bottom:0;position:absolute;width:100%}.mat-checkbox-checkmark-path{stroke-dashoffset:22.91026;stroke-dasharray:22.91026;stroke-width:2.66667px}.mat-checkbox-mixedmark{height:2px;opacity:0;transform:scaleX(0) rotate(0)}.mat-checkbox-label-before .mat-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mat-checkbox-label-before .mat-checkbox-inner-container{margin-left:auto;margin-right:8px}.mat-checkbox-checked .mat-checkbox-checkmark{opacity:1}.mat-checkbox-checked .mat-checkbox-checkmark-path{stroke-dashoffset:0}.mat-checkbox-checked .mat-checkbox-mixedmark{transform:scaleX(1) rotate(-45deg)}.mat-checkbox-indeterminate .mat-checkbox-checkmark{opacity:0;transform:rotate(45deg)}.mat-checkbox-indeterminate .mat-checkbox-checkmark-path{stroke-dashoffset:0}.mat-checkbox-indeterminate .mat-checkbox-mixedmark{opacity:1;transform:scaleX(1) rotate(0)}.mat-checkbox-unchecked .mat-checkbox-background{background-color:transparent}.mat-checkbox-disabled{cursor:default}.mat-checkbox-anim-unchecked-checked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-in-background}.mat-checkbox-anim-unchecked-checked .mat-checkbox-checkmark-path{animation:180ms linear 0s mat-checkbox-unchecked-checked-checkmark-path}.mat-checkbox-anim-unchecked-indeterminate .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-in-background}.mat-checkbox-anim-unchecked-indeterminate .mat-checkbox-mixedmark{animation:90ms linear 0s mat-checkbox-unchecked-indeterminate-mixedmark}.mat-checkbox-anim-checked-unchecked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-out-background}.mat-checkbox-anim-checked-unchecked .mat-checkbox-checkmark-path{animation:90ms linear 0s mat-checkbox-checked-unchecked-checkmark-path}.mat-checkbox-anim-checked-indeterminate .mat-checkbox-checkmark{animation:90ms linear 0s mat-checkbox-checked-indeterminate-checkmark}.mat-checkbox-anim-checked-indeterminate .mat-checkbox-mixedmark{animation:90ms linear 0s mat-checkbox-checked-indeterminate-mixedmark}.mat-checkbox-anim-indeterminate-checked .mat-checkbox-checkmark{animation:.5s linear 0s mat-checkbox-indeterminate-checked-checkmark}.mat-checkbox-anim-indeterminate-checked .mat-checkbox-mixedmark{animation:.5s linear 0s mat-checkbox-indeterminate-checked-mixedmark}.mat-checkbox-anim-indeterminate-unchecked .mat-checkbox-background{animation:180ms linear 0s mat-checkbox-fade-out-background}.mat-checkbox-anim-indeterminate-unchecked .mat-checkbox-mixedmark{animation:.3s linear 0s mat-checkbox-indeterminate-unchecked-mixedmark}.mat-checkbox-input{bottom:0;left:50%}.mat-checkbox-ripple{position:absolute;left:calc(50% - 25px);top:calc(50% - 25px);height:50px;width:50px;z-index:1;pointer-events:none}"],
exportAs: 'matCheckbox',
host: {
'class': 'mat-checkbox',
'[id]': 'id',
'[class.mat-checkbox-indeterminate]': 'indeterminate',
'[class.mat-checkbox-checked]': 'checked',
'[class.mat-checkbox-disabled]': 'disabled',
'[class.mat-checkbox-label-before]': 'labelPosition == "before"',
},
providers: [MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR],
inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatCheckbox.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: a11y.FocusMonitor, },
{ type: undefined, decorators: [{ type: core.Attribute, args: ['tabindex',] },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_CHECKBOX_CLICK_ACTION,] },] },
];
};
MatCheckbox.propDecorators = {
"ariaLabel": [{ type: core.Input, args: ['aria-label',] },],
"ariaLabelledby": [{ type: core.Input, args: ['aria-labelledby',] },],
"id": [{ type: core.Input },],
"required": [{ type: core.Input },],
"align": [{ type: core.Input },],
"labelPosition": [{ type: core.Input },],
"name": [{ type: core.Input },],
"change": [{ type: core.Output },],
"indeterminateChange": [{ type: core.Output },],
"value": [{ type: core.Input },],
"_inputElement": [{ type: core.ViewChild, args: ['input',] },],
"ripple": [{ type: core.ViewChild, args: [MatRipple,] },],
"checked": [{ type: core.Input },],
"indeterminate": [{ type: core.Input },],
};
return MatCheckbox;
}(_MatCheckboxMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MAT_CHECKBOX_REQUIRED_VALIDATOR = {
provide: forms.NG_VALIDATORS,
useExisting: core.forwardRef(function () { return MatCheckboxRequiredValidator; }),
multi: true
};
/**
* Validator for Material checkbox's required attribute in template-driven checkbox.
* Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
* work with `mat-checkbox`.
*/
var MatCheckboxRequiredValidator = (function (_super) {
__extends(MatCheckboxRequiredValidator, _super);
function MatCheckboxRequiredValidator() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatCheckboxRequiredValidator.decorators = [
{ type: core.Directive, args: [{
selector: "mat-checkbox[required][formControlName],\n mat-checkbox[required][formControl], mat-checkbox[required][ngModel]",
providers: [MAT_CHECKBOX_REQUIRED_VALIDATOR],
host: { '[attr.required]': 'required ? "" : null' }
},] },
];
/** @nocollapse */
MatCheckboxRequiredValidator.ctorParameters = function () { return []; };
return MatCheckboxRequiredValidator;
}(forms.CheckboxRequiredValidator));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* \@docs-private
*/
var MatChipBase = (function () {
function MatChipBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatChipBase;
}());
var _MatChipMixinBase = mixinColor(mixinDisabled(MatChipBase), 'primary');
/**
* Material design styled Chip component. Used inside the MatChipList component.
*/
var MatChip = (function (_super) {
__extends(MatChip, _super);
function MatChip(_elementRef) {
var _this = _super.call(this, _elementRef) || this;
_this._elementRef = _elementRef;
/**
* Whether the chip has focus.
*/
_this._hasFocus = false;
_this._selected = false;
_this._selectable = true;
_this._removable = true;
/**
* Emits when the chip is focused.
*/
_this._onFocus = new Subject.Subject();
/**
* Emits when the chip is blured.
*/
_this._onBlur = new Subject.Subject();
/**
* Emitted when the chip is selected or deselected.
*/
_this.selectionChange = new core.EventEmitter();
/**
* Emitted when the chip is destroyed.
*/
_this.destroyed = new core.EventEmitter();
/**
* Emitted when the chip is destroyed.
* @deprecated Use 'destroyed' instead.
* \@deletion-target 6.0.0
*/
_this.destroy = _this.destroyed;
/**
* Emitted when a chip is to be removed.
*/
_this.removed = new core.EventEmitter();
/**
* Emitted when a chip is to be removed.
* @deprecated Use `removed` instead.
* \@deletion-target 6.0.0
*/
_this.onRemove = _this.removed;
return _this;
}
Object.defineProperty(MatChip.prototype, "selected", {
get: /**
* Whether the chip is selected.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._selected = coercion.coerceBooleanProperty(value);
this.selectionChange.emit({
source: this,
isUserInput: false,
selected: value
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChip.prototype, "value", {
get: /**
* The value of the chip. Defaults to the content inside `<mat-chip>` tags.
* @return {?}
*/ function () {
return this._value != undefined
? this._value
: this._elementRef.nativeElement.textContent;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._value = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatChip.prototype, "selectable", {
get: /**
* Whether or not the chips are selectable. When a chip is not selectable,
* changes to it's selected state are always ignored.
* @return {?}
*/ function () { return this._selectable; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._selectable = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChip.prototype, "removable", {
get: /**
* Determines whether or not the chip displays the remove styling and emits (remove) events.
* @return {?}
*/ function () { return this._removable; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._removable = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChip.prototype, "ariaSelected", {
/** The ARIA selected applied to the chip. */
get: /**
* The ARIA selected applied to the chip.
* @return {?}
*/ function () {
return this.selectable ? this.selected.toString() : null;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatChip.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroyed.emit({ chip: this });
};
/** Selects the chip. */
/**
* Selects the chip.
* @return {?}
*/
MatChip.prototype.select = /**
* Selects the chip.
* @return {?}
*/
function () {
this._selected = true;
this.selectionChange.emit({
source: this,
isUserInput: false,
selected: true
});
};
/** Deselects the chip. */
/**
* Deselects the chip.
* @return {?}
*/
MatChip.prototype.deselect = /**
* Deselects the chip.
* @return {?}
*/
function () {
this._selected = false;
this.selectionChange.emit({
source: this,
isUserInput: false,
selected: false
});
};
/** Select this chip and emit selected event */
/**
* Select this chip and emit selected event
* @return {?}
*/
MatChip.prototype.selectViaInteraction = /**
* Select this chip and emit selected event
* @return {?}
*/
function () {
this._selected = true;
// Emit select event when selected changes.
this.selectionChange.emit({
source: this,
isUserInput: true,
selected: true
});
};
/** Toggles the current selected state of this chip. */
/**
* Toggles the current selected state of this chip.
* @param {?=} isUserInput
* @return {?}
*/
MatChip.prototype.toggleSelected = /**
* Toggles the current selected state of this chip.
* @param {?=} isUserInput
* @return {?}
*/
function (isUserInput) {
if (isUserInput === void 0) {
isUserInput = false;
}
this._selected = !this.selected;
this.selectionChange.emit({
source: this,
isUserInput: isUserInput,
selected: this._selected
});
return this.selected;
};
/** Allows for programmatic focusing of the chip. */
/**
* Allows for programmatic focusing of the chip.
* @return {?}
*/
MatChip.prototype.focus = /**
* Allows for programmatic focusing of the chip.
* @return {?}
*/
function () {
this._elementRef.nativeElement.focus();
this._onFocus.next({ chip: this });
};
/**
* Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or
* BACKSPACE keys are pressed.
*
* Informs any listeners of the removal request. Does not remove the chip from the DOM.
*/
/**
* Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or
* BACKSPACE keys are pressed.
*
* Informs any listeners of the removal request. Does not remove the chip from the DOM.
* @return {?}
*/
MatChip.prototype.remove = /**
* Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or
* BACKSPACE keys are pressed.
*
* Informs any listeners of the removal request. Does not remove the chip from the DOM.
* @return {?}
*/
function () {
if (this.removable) {
this.removed.emit({ chip: this });
}
};
/** Ensures events fire properly upon click. */
/**
* Ensures events fire properly upon click.
* @param {?} event
* @return {?}
*/
MatChip.prototype._handleClick = /**
* Ensures events fire properly upon click.
* @param {?} event
* @return {?}
*/
function (event) {
// Check disabled
if (this.disabled) {
return;
}
event.preventDefault();
event.stopPropagation();
this.focus();
};
/** Handle custom key presses. */
/**
* Handle custom key presses.
* @param {?} event
* @return {?}
*/
MatChip.prototype._handleKeydown = /**
* Handle custom key presses.
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled) {
return;
}
switch (event.keyCode) {
case keycodes.DELETE:
case keycodes.BACKSPACE:
// If we are removable, remove the focused chip
this.remove();
// Always prevent so page navigation does not occur
event.preventDefault();
break;
case keycodes.SPACE:
// If we are selectable, toggle the focused chip
if (this.selectable) {
this.toggleSelected(true);
}
// Always prevent space from scrolling the page since the list has focus
event.preventDefault();
break;
}
};
/**
* @return {?}
*/
MatChip.prototype._blur = /**
* @return {?}
*/
function () {
this._hasFocus = false;
this._onBlur.next({ chip: this });
};
MatChip.decorators = [
{ type: core.Directive, args: [{
selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]",
inputs: ['color', 'disabled'],
exportAs: 'matChip',
host: {
'class': 'mat-chip',
'[attr.tabindex]': 'disabled ? null : -1',
'role': 'option',
'[class.mat-chip-selected]': 'selected',
'[attr.disabled]': 'disabled || null',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.aria-selected]': 'ariaSelected',
'(click)': '_handleClick($event)',
'(keydown)': '_handleKeydown($event)',
'(focus)': '_hasFocus = true',
'(blur)': '_blur()',
},
},] },
];
/** @nocollapse */
MatChip.ctorParameters = function () {
return [
{ type: core.ElementRef, },
];
};
MatChip.propDecorators = {
"selected": [{ type: core.Input },],
"value": [{ type: core.Input },],
"selectable": [{ type: core.Input },],
"removable": [{ type: core.Input },],
"selectionChange": [{ type: core.Output },],
"destroyed": [{ type: core.Output },],
"destroy": [{ type: core.Output },],
"removed": [{ type: core.Output },],
"onRemove": [{ type: core.Output, args: ['remove',] },],
};
return MatChip;
}(_MatChipMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatChipListBase = (function () {
function MatChipListBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
this._parentForm = _parentForm;
this._parentFormGroup = _parentFormGroup;
this.ngControl = ngControl;
}
return MatChipListBase;
}());
var _MatChipListMixinBase = mixinErrorState(MatChipListBase);
// Increasing integer for generating unique ids for chip-list components.
var nextUniqueId$2$1 = 0;
/**
* Change event object that is emitted when the chip list value has changed.
*/
var MatChipListChange = (function () {
function MatChipListChange(source, value) {
this.source = source;
this.value = value;
}
return MatChipListChange;
}());
/**
* A material design chips component (named ChipList for it's similarity to the List component).
*/
var MatChipList = (function (_super) {
__extends(MatChipList, _super);
function MatChipList(_elementRef, _changeDetectorRef, _dir, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, /** @docs-private */ ngControl) {
var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
_this._elementRef = _elementRef;
_this._changeDetectorRef = _changeDetectorRef;
_this._dir = _dir;
_this.ngControl = ngControl;
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
*/
_this.controlType = 'mat-chip-list';
/**
* When a chip is destroyed, we track the index so we can focus the appropriate next chip.
*/
_this._lastDestroyedIndex = null;
/**
* Track which chips we're listening to for focus/destruction.
*/
_this._chipSet = new WeakMap();
/**
* Subscription to tabbing out from the chip list.
*/
_this._tabOutSubscription = Subscription.Subscription.EMPTY;
/**
* Uid of the chip list
*/
_this._uid = "mat-chip-list-" + nextUniqueId$2$1++;
/**
* Tab index for the chip list.
*/
_this._tabIndex = 0;
/**
* User defined tab index.
* When it is not null, use user defined tab index. Otherwise use _tabIndex
*/
_this._userTabIndex = null;
/**
* Function when touched
*/
_this._onTouched = function () { };
/**
* Function when changed
*/
_this._onChange = function () { };
_this._multiple = false;
_this._compareWith = function (o1, o2) { return o1 === o2; };
_this._required = false;
_this._disabled = false;
/**
* Orientation of the chip list.
*/
_this.ariaOrientation = 'horizontal';
_this._selectable = true;
/**
* Event emitted when the selected chip list value has been changed by the user.
*/
_this.change = new core.EventEmitter();
/**
* Event that emits whenever the raw value of the chip-list changes. This is here primarily
* to facilitate the two-way binding for the `value` input.
* \@docs-private
*/
_this.valueChange = new core.EventEmitter();
if (_this.ngControl) {
_this.ngControl.valueAccessor = _this;
}
return _this;
}
Object.defineProperty(MatChipList.prototype, "selected", {
/** The array of selected chips inside chip list. */
get: /**
* The array of selected chips inside chip list.
* @return {?}
*/ function () {
return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0];
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "role", {
/** The ARIA role applied to the chip list. */
get: /**
* The ARIA role applied to the chip list.
* @return {?}
*/ function () { return this.empty ? null : 'listbox'; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "multiple", {
get: /**
* Whether the user should be allowed to select multiple chips.
* @return {?}
*/ function () { return this._multiple; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._multiple = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "compareWith", {
get: /**
* A function to compare the option values with the selected values. The first argument
* is a value from an option. The second is a value from the selection. A boolean
* should be returned.
* @return {?}
*/ function () { return this._compareWith; },
set: /**
* @param {?} fn
* @return {?}
*/ function (fn) {
this._compareWith = fn;
if (this._selectionModel) {
// A different comparator means the selection could change.
this._initializeSelection();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "value", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.writeValue(value);
this._value = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "id", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this._id || this._uid; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._id = value;
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "required", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this._required; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._required = coercion.coerceBooleanProperty(value);
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "placeholder", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () {
return this._chipInput ? this._chipInput.placeholder : this._placeholder;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._placeholder = value;
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "focused", {
/** Whether any chips or the matChipInput inside of this chip-list has focus. */
get: /**
* Whether any chips or the matChipInput inside of this chip-list has focus.
* @return {?}
*/ function () {
return this.chips.some(function (chip) { return chip._hasFocus; }) ||
(this._chipInput && this._chipInput.focused);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "empty", {
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () {
return (!this._chipInput || this._chipInput.empty) && this.chips.length === 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "shouldLabelFloat", {
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return !this.empty || this.focused; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "disabled", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this.ngControl ? !!this.ngControl.disabled : this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._disabled = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "selectable", {
get: /**
* Whether or not this chip is selectable. When a chip is not selectable,
* its selected state is always ignored.
* @return {?}
*/ function () { return this._selectable; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._selectable = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "tabIndex", {
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._userTabIndex = value;
this._tabIndex = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "chipSelectionChanges", {
/** Combined stream of all of the child chips' selection change events. */
get: /**
* Combined stream of all of the child chips' selection change events.
* @return {?}
*/ function () {
return merge.merge.apply(void 0, this.chips.map(function (chip) { return chip.selectionChange; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "chipFocusChanges", {
/** Combined stream of all of the child chips' focus change events. */
get: /**
* Combined stream of all of the child chips' focus change events.
* @return {?}
*/ function () {
return merge.merge.apply(void 0, this.chips.map(function (chip) { return chip._onFocus; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "chipBlurChanges", {
/** Combined stream of all of the child chips' blur change events. */
get: /**
* Combined stream of all of the child chips' blur change events.
* @return {?}
*/ function () {
return merge.merge.apply(void 0, this.chips.map(function (chip) { return chip._onBlur; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipList.prototype, "chipRemoveChanges", {
/** Combined stream of all of the child chips' remove change events. */
get: /**
* Combined stream of all of the child chips' remove change events.
* @return {?}
*/ function () {
return merge.merge.apply(void 0, this.chips.map(function (chip) { return chip.destroy; }));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatChipList.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._keyManager = new a11y.FocusKeyManager(this.chips)
.withWrap()
.withVerticalOrientation()
.withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
// Prevents the chip list from capturing focus and redirecting
// it back to the first chip when the user tabs out.
this._tabOutSubscription = this._keyManager.tabOut.subscribe(function () {
_this._tabIndex = -1;
setTimeout(function () { return _this._tabIndex = _this._userTabIndex || 0; });
});
// When the list changes, re-subscribe
this._changeSubscription = this.chips.changes.pipe(startWith_2(null)).subscribe(function () {
_this._resetChips();
// Reset chips selected/deselected status
// Reset chips selected/deselected status
_this._initializeSelection();
// Check to see if we need to update our tab index
// Check to see if we need to update our tab index
_this._updateTabIndex();
// Check to see if we have a destroyed chip and need to refocus
// Check to see if we have a destroyed chip and need to refocus
_this._updateFocusForDestroyedChips();
});
};
/**
* @return {?}
*/
MatChipList.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._selectionModel = new collections.SelectionModel(this.multiple, undefined, false);
this.stateChanges.next();
};
/**
* @return {?}
*/
MatChipList.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
};
/**
* @return {?}
*/
MatChipList.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._tabOutSubscription.unsubscribe();
if (this._changeSubscription) {
this._changeSubscription.unsubscribe();
}
this._dropSubscriptions();
this.stateChanges.complete();
};
/** Associates an HTML input element with this chip list. */
/**
* Associates an HTML input element with this chip list.
* @param {?} inputElement
* @return {?}
*/
MatChipList.prototype.registerInput = /**
* Associates an HTML input element with this chip list.
* @param {?} inputElement
* @return {?}
*/
function (inputElement) {
this._chipInput = inputElement;
};
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @param {?} ids
* @return {?}
*/
MatChipList.prototype.setDescribedByIds = /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @param {?} ids
* @return {?}
*/
function (ids) { this._ariaDescribedby = ids.join(' '); };
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MatChipList.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.chips) {
this._setSelectionByValue(value, false);
}
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatChipList.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatChipList.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
MatChipList.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
this._elementRef.nativeElement.disabled = isDisabled;
this.stateChanges.next();
};
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/
MatChipList.prototype.onContainerClick = /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/
function () { this.focus(); };
/**
* Focuses the the first non-disabled chip in this chip list, or the associated input when there
* are no eligible chips.
*/
/**
* Focuses the the first non-disabled chip in this chip list, or the associated input when there
* are no eligible chips.
* @return {?}
*/
MatChipList.prototype.focus = /**
* Focuses the the first non-disabled chip in this chip list, or the associated input when there
* are no eligible chips.
* @return {?}
*/
function () {
// TODO: ARIA says this should focus the first `selected` chip if any are selected.
// Focus on first element if there's no chipInput inside chip-list
if (this._chipInput && this._chipInput.focused) {
// do nothing
}
else if (this.chips.length > 0) {
this._keyManager.setFirstItemActive();
this.stateChanges.next();
}
else {
this._focusInput();
this.stateChanges.next();
}
};
/** Attempt to focus an input if we have one. */
/**
* Attempt to focus an input if we have one.
* @return {?}
*/
MatChipList.prototype._focusInput = /**
* Attempt to focus an input if we have one.
* @return {?}
*/
function () {
if (this._chipInput) {
this._chipInput.focus();
}
};
/**
* Pass events to the keyboard manager. Available here for tests.
*/
/**
* Pass events to the keyboard manager. Available here for tests.
* @param {?} event
* @return {?}
*/
MatChipList.prototype._keydown = /**
* Pass events to the keyboard manager. Available here for tests.
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ target = (event.target);
// If they are on an empty input and hit backspace, focus the last chip
if (event.keyCode === keycodes.BACKSPACE && this._isInputEmpty(target)) {
this._keyManager.setLastItemActive();
event.preventDefault();
}
else if (target && target.classList.contains('mat-chip')) {
this._keyManager.onKeydown(event);
this.stateChanges.next();
}
};
/**
* Check the tab index as you should not be allowed to focus an empty list.
*/
/**
* Check the tab index as you should not be allowed to focus an empty list.
* @return {?}
*/
MatChipList.prototype._updateTabIndex = /**
* Check the tab index as you should not be allowed to focus an empty list.
* @return {?}
*/
function () {
// If we have 0 chips, we should not allow keyboard focus
this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0);
};
/**
* Update key manager's active item when chip is deleted.
* If the deleted chip is the last chip in chip list, focus the new last chip.
* Otherwise focus the next chip in the list.
* Save `_lastDestroyedIndex` so we can set the correct focus.
*/
/**
* Update key manager's active item when chip is deleted.
* If the deleted chip is the last chip in chip list, focus the new last chip.
* Otherwise focus the next chip in the list.
* Save `_lastDestroyedIndex` so we can set the correct focus.
* @param {?} chip
* @return {?}
*/
MatChipList.prototype._updateKeyManager = /**
* Update key manager's active item when chip is deleted.
* If the deleted chip is the last chip in chip list, focus the new last chip.
* Otherwise focus the next chip in the list.
* Save `_lastDestroyedIndex` so we can set the correct focus.
* @param {?} chip
* @return {?}
*/
function (chip) {
var /** @type {?} */ chipIndex = this.chips.toArray().indexOf(chip);
if (this._isValidIndex(chipIndex)) {
if (chip._hasFocus) {
// Check whether the chip is not the last item
if (chipIndex < this.chips.length - 1) {
this._keyManager.setActiveItem(chipIndex);
}
else if (chipIndex - 1 >= 0) {
this._keyManager.setActiveItem(chipIndex - 1);
}
}
if (this._keyManager.activeItemIndex === chipIndex) {
this._lastDestroyedIndex = chipIndex;
}
}
};
/**
* Checks to see if a focus chip was recently destroyed so that we can refocus the next closest
* one.
*/
/**
* Checks to see if a focus chip was recently destroyed so that we can refocus the next closest
* one.
* @return {?}
*/
MatChipList.prototype._updateFocusForDestroyedChips = /**
* Checks to see if a focus chip was recently destroyed so that we can refocus the next closest
* one.
* @return {?}
*/
function () {
var /** @type {?} */ chipsArray = this.chips;
if (this._lastDestroyedIndex != null && chipsArray.length > 0) {
// Check whether the destroyed chip was the last item
var /** @type {?} */ newFocusIndex = Math.min(this._lastDestroyedIndex, chipsArray.length - 1);
this._keyManager.setActiveItem(newFocusIndex);
var /** @type {?} */ focusChip = this._keyManager.activeItem;
// Focus the chip
if (focusChip) {
focusChip.focus();
}
}
// Reset our destroyed index
this._lastDestroyedIndex = null;
};
/**
* Utility to ensure all indexes are valid.
*
* @param {?} index The index to be checked.
* @return {?} True if the index is valid for our list of chips.
*/
MatChipList.prototype._isValidIndex = /**
* Utility to ensure all indexes are valid.
*
* @param {?} index The index to be checked.
* @return {?} True if the index is valid for our list of chips.
*/
function (index) {
return index >= 0 && index < this.chips.length;
};
/**
* @param {?} element
* @return {?}
*/
MatChipList.prototype._isInputEmpty = /**
* @param {?} element
* @return {?}
*/
function (element) {
if (element && element.nodeName.toLowerCase() === 'input') {
var /** @type {?} */ input = (element);
return !input.value;
}
return false;
};
/**
* @param {?} value
* @param {?=} isUserInput
* @return {?}
*/
MatChipList.prototype._setSelectionByValue = /**
* @param {?} value
* @param {?=} isUserInput
* @return {?}
*/
function (value, isUserInput) {
var _this = this;
if (isUserInput === void 0) {
isUserInput = true;
}
this._clearSelection();
this.chips.forEach(function (chip) { return chip.deselect(); });
if (Array.isArray(value)) {
value.forEach(function (currentValue) { return _this._selectValue(currentValue, isUserInput); });
this._sortValues();
}
else {
var /** @type {?} */ correspondingChip = this._selectValue(value, isUserInput);
// Shift focus to the active item. Note that we shouldn't do this in multiple
// mode, because we don't know what chip the user interacted with last.
if (correspondingChip) {
var /** @type {?} */ correspondingChipIndex = this.chips.toArray().indexOf(correspondingChip);
if (isUserInput) {
this._keyManager.setActiveItem(correspondingChipIndex);
}
else {
this._keyManager.updateActiveItemIndex(correspondingChipIndex);
}
}
}
};
/**
* Finds and selects the chip based on its value.
* @param {?} value
* @param {?=} isUserInput
* @return {?} Chip that has the corresponding value.
*/
MatChipList.prototype._selectValue = /**
* Finds and selects the chip based on its value.
* @param {?} value
* @param {?=} isUserInput
* @return {?} Chip that has the corresponding value.
*/
function (value, isUserInput) {
var _this = this;
if (isUserInput === void 0) {
isUserInput = true;
}
var /** @type {?} */ correspondingChip = this.chips.find(function (chip) {
return chip.value != null && _this._compareWith(chip.value, value);
});
if (correspondingChip) {
isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();
this._selectionModel.select(correspondingChip);
}
return correspondingChip;
};
/**
* @return {?}
*/
MatChipList.prototype._initializeSelection = /**
* @return {?}
*/
function () {
var _this = this;
// Defer setting the value in order to avoid the "Expression
// has changed after it was checked" errors from Angular.
Promise.resolve().then(function () {
if (_this.ngControl || _this._value) {
_this._setSelectionByValue(_this.ngControl ? _this.ngControl.value : _this._value, false);
_this.stateChanges.next();
}
});
};
/**
* Deselects every chip in the list.
* @param {?=} skip Chip that should not be deselected.
* @return {?}
*/
MatChipList.prototype._clearSelection = /**
* Deselects every chip in the list.
* @param {?=} skip Chip that should not be deselected.
* @return {?}
*/
function (skip) {
this._selectionModel.clear();
this.chips.forEach(function (chip) {
if (chip !== skip) {
chip.deselect();
}
});
this.stateChanges.next();
};
/**
* Sorts the model values, ensuring that they keep the same
* order that they have in the panel.
* @return {?}
*/
MatChipList.prototype._sortValues = /**
* Sorts the model values, ensuring that they keep the same
* order that they have in the panel.
* @return {?}
*/
function () {
var _this = this;
if (this._multiple) {
this._selectionModel.clear();
this.chips.forEach(function (chip) {
if (chip.selected) {
_this._selectionModel.select(chip);
}
});
this.stateChanges.next();
}
};
/**
* Emits change event to set the model value.
* @param {?=} fallbackValue
* @return {?}
*/
MatChipList.prototype._propagateChanges = /**
* Emits change event to set the model value.
* @param {?=} fallbackValue
* @return {?}
*/
function (fallbackValue) {
var /** @type {?} */ valueToEmit = null;
if (Array.isArray(this.selected)) {
valueToEmit = this.selected.map(function (chip) { return chip.value; });
}
else {
valueToEmit = this.selected ? this.selected.value : fallbackValue;
}
this._value = valueToEmit;
this.change.emit(new MatChipListChange(this, valueToEmit));
this.valueChange.emit(valueToEmit);
this._onChange(valueToEmit);
this._changeDetectorRef.markForCheck();
};
/** When blurred, mark the field as touched when focus moved outside the chip list. */
/**
* When blurred, mark the field as touched when focus moved outside the chip list.
* @return {?}
*/
MatChipList.prototype._blur = /**
* When blurred, mark the field as touched when focus moved outside the chip list.
* @return {?}
*/
function () {
var _this = this;
if (!this.disabled) {
if (this._chipInput) {
// If there's a chip input, we should check whether the focus moved to chip input.
// If the focus is not moved to chip input, mark the field as touched. If the focus moved
// to chip input, do nothing.
// Timeout is needed to wait for the focus() event trigger on chip input.
setTimeout(function () {
if (!_this.focused) {
_this._markAsTouched();
}
});
}
else {
// If there's no chip input, then mark the field as touched.
this._markAsTouched();
}
}
};
/** Mark the field as touched */
/**
* Mark the field as touched
* @return {?}
*/
MatChipList.prototype._markAsTouched = /**
* Mark the field as touched
* @return {?}
*/
function () {
this._onTouched();
this._changeDetectorRef.markForCheck();
this.stateChanges.next();
};
/**
* @return {?}
*/
MatChipList.prototype._resetChips = /**
* @return {?}
*/
function () {
this._dropSubscriptions();
this._listenToChipsFocus();
this._listenToChipsSelection();
this._listenToChipsRemoved();
};
/**
* @return {?}
*/
MatChipList.prototype._dropSubscriptions = /**
* @return {?}
*/
function () {
if (this._chipFocusSubscription) {
this._chipFocusSubscription.unsubscribe();
this._chipFocusSubscription = null;
}
if (this._chipBlurSubscription) {
this._chipBlurSubscription.unsubscribe();
this._chipBlurSubscription = null;
}
if (this._chipSelectionSubscription) {
this._chipSelectionSubscription.unsubscribe();
this._chipSelectionSubscription = null;
}
};
/**
* Listens to user-generated selection events on each chip.
* @return {?}
*/
MatChipList.prototype._listenToChipsSelection = /**
* Listens to user-generated selection events on each chip.
* @return {?}
*/
function () {
var _this = this;
this._chipSelectionSubscription = this.chipSelectionChanges.subscribe(function (event) {
event.source.selected
? _this._selectionModel.select(event.source)
: _this._selectionModel.deselect(event.source);
// For single selection chip list, make sure the deselected value is unselected.
if (!_this.multiple) {
_this.chips.forEach(function (chip) {
if (!_this._selectionModel.isSelected(chip) && chip.selected) {
chip.deselect();
}
});
}
if (event.isUserInput) {
_this._propagateChanges();
}
});
};
/**
* Listens to user-generated selection events on each chip.
* @return {?}
*/
MatChipList.prototype._listenToChipsFocus = /**
* Listens to user-generated selection events on each chip.
* @return {?}
*/
function () {
var _this = this;
this._chipFocusSubscription = this.chipFocusChanges.subscribe(function (event) {
var /** @type {?} */ chipIndex = _this.chips.toArray().indexOf(event.chip);
if (_this._isValidIndex(chipIndex)) {
_this._keyManager.updateActiveItemIndex(chipIndex);
}
_this.stateChanges.next();
});
this._chipBlurSubscription = this.chipBlurChanges.subscribe(function () {
_this._blur();
_this.stateChanges.next();
});
};
/**
* @return {?}
*/
MatChipList.prototype._listenToChipsRemoved = /**
* @return {?}
*/
function () {
var _this = this;
this._chipRemoveSubscription = this.chipRemoveChanges.subscribe(function (event) {
_this._updateKeyManager(event.chip);
});
};
MatChipList.decorators = [
{ type: core.Component, args: [{ selector: 'mat-chip-list',
template: "<div class=\"mat-chip-list-wrapper\"><ng-content></ng-content></div>",
exportAs: 'matChipList',
host: {
'[attr.tabindex]': '_tabIndex',
'[attr.aria-describedby]': '_ariaDescribedby || null',
'[attr.aria-required]': 'required.toString()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.aria-invalid]': 'errorState',
'[attr.aria-multiselectable]': 'multiple',
'[attr.role]': 'role',
'[class.mat-chip-list-disabled]': 'disabled',
'[class.mat-chip-list-invalid]': 'errorState',
'[class.mat-chip-list-required]': 'required',
'[attr.aria-orientation]': 'ariaOrientation',
'class': 'mat-chip-list',
'(focus)': 'focus()',
'(blur)': '_blur()',
'(keydown)': '_keydown($event)'
},
providers: [{ provide: MatFormFieldControl, useExisting: MatChipList }],
styles: [".mat-chip-list-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline}.mat-chip:not(.mat-basic-chip){transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:inline-flex;padding:7px 12px;border-radius:24px;align-items:center;cursor:default}.mat-chip:not(.mat-basic-chip)+.mat-chip:not(.mat-basic-chip){margin:0 0 0 8px}[dir=rtl] .mat-chip:not(.mat-basic-chip)+.mat-chip:not(.mat-basic-chip){margin:0 8px 0 0}.mat-form-field-prefix .mat-chip:not(.mat-basic-chip):last-child{margin-right:8px}[dir=rtl] .mat-form-field-prefix .mat-chip:not(.mat-basic-chip):last-child{margin-left:8px}.mat-chip:not(.mat-basic-chip) .mat-chip-remove.mat-icon{width:1em;height:1em}.mat-chip:not(.mat-basic-chip):focus{box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);outline:0}@media screen and (-ms-high-contrast:active){.mat-chip:not(.mat-basic-chip){outline:solid 1px}}.mat-chip-list-stacked .mat-chip-list-wrapper{display:block}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-chip:not(.mat-basic-chip){display:block;margin:0;margin-bottom:8px}[dir=rtl] .mat-chip-list-stacked .mat-chip-list-wrapper .mat-chip:not(.mat-basic-chip){margin:0;margin-bottom:8px}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-chip:not(.mat-basic-chip):last-child,[dir=rtl] .mat-chip-list-stacked .mat-chip-list-wrapper .mat-chip:not(.mat-basic-chip):last-child{margin-bottom:0}.mat-form-field-prefix .mat-chip-list-wrapper{margin-bottom:8px}.mat-chip-remove{margin-right:-4px;margin-left:6px;cursor:pointer}[dir=rtl] .mat-chip-remove{margin-right:6px;margin-left:-4px}input.mat-chip-input{width:150px;margin:3px;flex:1 0 150px}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatChipList.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: forms.NgForm, decorators: [{ type: core.Optional },] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional },] },
{ type: ErrorStateMatcher, },
{ type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self },] },
];
};
MatChipList.propDecorators = {
"errorStateMatcher": [{ type: core.Input },],
"multiple": [{ type: core.Input },],
"compareWith": [{ type: core.Input },],
"value": [{ type: core.Input },],
"id": [{ type: core.Input },],
"required": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"ariaOrientation": [{ type: core.Input, args: ['aria-orientation',] },],
"selectable": [{ type: core.Input },],
"tabIndex": [{ type: core.Input },],
"change": [{ type: core.Output },],
"valueChange": [{ type: core.Output },],
"chips": [{ type: core.ContentChildren, args: [MatChip,] },],
};
return MatChipList;
}(_MatChipListMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Represents an input event on a `matChipInput`.
* @record
*/
/**
* Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.
* May be placed inside or outside of an `<mat-chip-list>`.
*/
var MatChipInput = (function () {
function MatChipInput(_elementRef) {
this._elementRef = _elementRef;
/**
* Whether the control is focused.
*/
this.focused = false;
this._addOnBlur = false;
/**
* The list of key codes that will trigger a chipEnd event.
*
* Defaults to `[ENTER]`.
*/
this.separatorKeyCodes = [keycodes.ENTER];
/**
* Emitted when a chip is to be added.
*/
this.chipEnd = new core.EventEmitter();
/**
* The input's placeholder text.
*/
this.placeholder = '';
this._inputElement = /** @type {?} */ (this._elementRef.nativeElement);
}
Object.defineProperty(MatChipInput.prototype, "chipList", {
set: /**
* Register input for chip list
* @param {?} value
* @return {?}
*/ function (value) {
if (value) {
this._chipList = value;
this._chipList.registerInput(this);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipInput.prototype, "addOnBlur", {
get: /**
* Whether or not the chipEnd event will be emitted when the input is blurred.
* @return {?}
*/ function () { return this._addOnBlur; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._addOnBlur = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatChipInput.prototype, "empty", {
/** Whether the input is empty. */
get: /**
* Whether the input is empty.
* @return {?}
*/ function () { return !this._inputElement.value; },
enumerable: true,
configurable: true
});
/** Utility method to make host definition/tests more clear. */
/**
* Utility method to make host definition/tests more clear.
* @param {?=} event
* @return {?}
*/
MatChipInput.prototype._keydown = /**
* Utility method to make host definition/tests more clear.
* @param {?=} event
* @return {?}
*/
function (event) {
this._emitChipEnd(event);
};
/** Checks to see if the blur should emit the (chipEnd) event. */
/**
* Checks to see if the blur should emit the (chipEnd) event.
* @return {?}
*/
MatChipInput.prototype._blur = /**
* Checks to see if the blur should emit the (chipEnd) event.
* @return {?}
*/
function () {
if (this.addOnBlur) {
this._emitChipEnd();
}
this.focused = false;
// Blur the chip list if it is not focused
if (!this._chipList.focused) {
this._chipList._blur();
}
this._chipList.stateChanges.next();
};
/**
* @return {?}
*/
MatChipInput.prototype._focus = /**
* @return {?}
*/
function () {
this.focused = true;
this._chipList.stateChanges.next();
};
/** Checks to see if the (chipEnd) event needs to be emitted. */
/**
* Checks to see if the (chipEnd) event needs to be emitted.
* @param {?=} event
* @return {?}
*/
MatChipInput.prototype._emitChipEnd = /**
* Checks to see if the (chipEnd) event needs to be emitted.
* @param {?=} event
* @return {?}
*/
function (event) {
if (!this._inputElement.value && !!event) {
this._chipList._keydown(event);
}
if (!event || this.separatorKeyCodes.indexOf(event.keyCode) > -1) {
this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });
if (event) {
event.preventDefault();
}
}
};
/**
* @return {?}
*/
MatChipInput.prototype._onInput = /**
* @return {?}
*/
function () {
// Let chip list know whenever the value changes.
this._chipList.stateChanges.next();
};
/** Focuses the input. */
/**
* Focuses the input.
* @return {?}
*/
MatChipInput.prototype.focus = /**
* Focuses the input.
* @return {?}
*/
function () { this._inputElement.focus(); };
MatChipInput.decorators = [
{ type: core.Directive, args: [{
selector: 'input[matChipInputFor]',
exportAs: 'matChipInput, matChipInputFor',
host: {
'class': 'mat-chip-input mat-input-element',
'(keydown)': '_keydown($event)',
'(blur)': '_blur()',
'(focus)': '_focus()',
'(input)': '_onInput()',
}
},] },
];
/** @nocollapse */
MatChipInput.ctorParameters = function () {
return [
{ type: core.ElementRef, },
];
};
MatChipInput.propDecorators = {
"chipList": [{ type: core.Input, args: ['matChipInputFor',] },],
"addOnBlur": [{ type: core.Input, args: ['matChipInputAddOnBlur',] },],
"separatorKeyCodes": [{ type: core.Input, args: ['matChipInputSeparatorKeyCodes',] },],
"chipEnd": [{ type: core.Output, args: ['matChipInputTokenEnd',] },],
"placeholder": [{ type: core.Input },],
};
return MatChipInput;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Possible overrides for a dialog's position.
* @record
*/
/**
* Configuration for opening a modal dialog with the MatDialog service.
*/
var MatDialogConfig = (function () {
function MatDialogConfig() {
/**
* The ARIA role of the dialog element.
*/
this.role = 'dialog';
/**
* Custom class for the overlay pane.
*/
this.panelClass = '';
/**
* Whether the dialog has a backdrop.
*/
this.hasBackdrop = true;
/**
* Custom class for the backdrop,
*/
this.backdropClass = '';
/**
* Whether the user can use escape or clicking outside to close a modal.
*/
this.disableClose = false;
/**
* Width of the dialog.
*/
this.width = '';
/**
* Height of the dialog.
*/
this.height = '';
/**
* Max-width of the dialog. If a number is provided, pixel units are assumed. Defaults to 80vw
*/
this.maxWidth = '80vw';
/**
* Data being injected into the child component.
*/
this.data = null;
/**
* Layout direction for the dialog's content.
*/
this.direction = 'ltr';
/**
* ID of the element that describes the dialog.
*/
this.ariaDescribedBy = null;
/**
* Aria label to assign to the dialog element
*/
this.ariaLabel = null;
/**
* Whether the dialog should focus the first focusable element on open.
*/
this.autoFocus = true;
/**
* Whether the dialog should close when the user goes backwards/forwards in history.
*/
this.closeOnNavigation = true;
}
return MatDialogConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Animations used by MatDialog.
*/
var matDialogAnimations = {
/** Animation that slides the dialog in and out of view and fades the opacity. */
slideDialog: animations.trigger('slideDialog', [
// Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
// scale(1)`, because for some reason specifying the transform explicitly, causes IE both
// to blur the dialog content and decimate the animation performance. Leaving it as `none`
// solves both issues.
animations.state('enter', animations.style({ transform: 'none', opacity: 1 })),
animations.state('void', animations.style({ transform: 'translate3d(0, 25%, 0) scale(0.9)', opacity: 0 })),
animations.state('exit', animations.style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
animations.transition('* => *', animations.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Throws an exception for the case when a ComponentPortal is
* attached to a DomPortalOutlet without an origin.
* \@docs-private
* @return {?}
*/
function throwMatDialogContentAlreadyAttachedError() {
throw Error('Attempting to attach dialog content after content is already attached');
}
/**
* Internal component that wraps user-provided dialog content.
* Animation is based on https://material.io/guidelines/motion/choreography.html.
* \@docs-private
*/
var MatDialogContainer = (function (_super) {
__extends(MatDialogContainer, _super);
function MatDialogContainer(_elementRef, _focusTrapFactory, _changeDetectorRef, _document) {
var _this = _super.call(this) || this;
_this._elementRef = _elementRef;
_this._focusTrapFactory = _focusTrapFactory;
_this._changeDetectorRef = _changeDetectorRef;
_this._document = _document;
/**
* Element that was focused before the dialog was opened. Save this to restore upon close.
*/
_this._elementFocusedBeforeDialogWasOpened = null;
/**
* State of the dialog animation.
*/
_this._state = 'enter';
/**
* Emits when an animation state changes.
*/
_this._animationStateChanged = new core.EventEmitter();
/**
* ID of the element that should be considered as the dialog's label.
*/
_this._ariaLabelledBy = null;
return _this;
}
/**
* Attach a ComponentPortal as content to this dialog container.
* @param portal Portal to be attached as the dialog content.
*/
/**
* Attach a ComponentPortal as content to this dialog container.
* @template T
* @param {?} portal Portal to be attached as the dialog content.
* @return {?}
*/
MatDialogContainer.prototype.attachComponentPortal = /**
* Attach a ComponentPortal as content to this dialog container.
* @template T
* @param {?} portal Portal to be attached as the dialog content.
* @return {?}
*/
function (portal$$1) {
if (this._portalOutlet.hasAttached()) {
throwMatDialogContentAlreadyAttachedError();
}
this._savePreviouslyFocusedElement();
return this._portalOutlet.attachComponentPortal(portal$$1);
};
/**
* Attach a TemplatePortal as content to this dialog container.
* @param portal Portal to be attached as the dialog content.
*/
/**
* Attach a TemplatePortal as content to this dialog container.
* @template C
* @param {?} portal Portal to be attached as the dialog content.
* @return {?}
*/
MatDialogContainer.prototype.attachTemplatePortal = /**
* Attach a TemplatePortal as content to this dialog container.
* @template C
* @param {?} portal Portal to be attached as the dialog content.
* @return {?}
*/
function (portal$$1) {
if (this._portalOutlet.hasAttached()) {
throwMatDialogContentAlreadyAttachedError();
}
this._savePreviouslyFocusedElement();
return this._portalOutlet.attachTemplatePortal(portal$$1);
};
/**
* Moves the focus inside the focus trap.
* @return {?}
*/
MatDialogContainer.prototype._trapFocus = /**
* Moves the focus inside the focus trap.
* @return {?}
*/
function () {
if (!this._focusTrap) {
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
}
// If were to attempt to focus immediately, then the content of the dialog would not yet be
// ready in instances where change detection has to run first. To deal with this, we simply
// wait for the microtask queue to be empty.
if (this._config.autoFocus) {
this._focusTrap.focusInitialElementWhenReady();
}
};
/**
* Restores focus to the element that was focused before the dialog opened.
* @return {?}
*/
MatDialogContainer.prototype._restoreFocus = /**
* Restores focus to the element that was focused before the dialog opened.
* @return {?}
*/
function () {
var /** @type {?} */ toFocus = this._elementFocusedBeforeDialogWasOpened;
// We need the extra check, because IE can set the `activeElement` to null in some cases.
if (toFocus && typeof toFocus.focus === 'function') {
toFocus.focus();
}
if (this._focusTrap) {
this._focusTrap.destroy();
}
};
/**
* Saves a reference to the element that was focused before the dialog was opened.
* @return {?}
*/
MatDialogContainer.prototype._savePreviouslyFocusedElement = /**
* Saves a reference to the element that was focused before the dialog was opened.
* @return {?}
*/
function () {
var _this = this;
if (this._document) {
this._elementFocusedBeforeDialogWasOpened = /** @type {?} */ (this._document.activeElement);
// Note that there is no focus method when rendering on the server.
if (this._elementRef.nativeElement.focus) {
// Move focus onto the dialog immediately in order to prevent the user from accidentally
// opening multiple dialogs at the same time. Needs to be async, because the element
// may not be focusable immediately.
Promise.resolve().then(function () { return _this._elementRef.nativeElement.focus(); });
}
}
};
/** Callback, invoked whenever an animation on the host completes. */
/**
* Callback, invoked whenever an animation on the host completes.
* @param {?} event
* @return {?}
*/
MatDialogContainer.prototype._onAnimationDone = /**
* Callback, invoked whenever an animation on the host completes.
* @param {?} event
* @return {?}
*/
function (event) {
if (event.toState === 'enter') {
this._trapFocus();
}
else if (event.toState === 'exit') {
this._restoreFocus();
}
this._animationStateChanged.emit(event);
};
/** Callback, invoked when an animation on the host starts. */
/**
* Callback, invoked when an animation on the host starts.
* @param {?} event
* @return {?}
*/
MatDialogContainer.prototype._onAnimationStart = /**
* Callback, invoked when an animation on the host starts.
* @param {?} event
* @return {?}
*/
function (event) {
this._animationStateChanged.emit(event);
};
/** Starts the dialog exit animation. */
/**
* Starts the dialog exit animation.
* @return {?}
*/
MatDialogContainer.prototype._startExitAnimation = /**
* Starts the dialog exit animation.
* @return {?}
*/
function () {
this._state = 'exit';
// Mark the container for check so it can react if the
// view container is using OnPush change detection.
this._changeDetectorRef.markForCheck();
};
MatDialogContainer.decorators = [
{ type: core.Component, args: [{ selector: 'mat-dialog-container',
template: "<ng-template cdkPortalOutlet></ng-template>",
styles: [".mat-dialog-container{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:block;padding:24px;border-radius:2px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%}@media screen and (-ms-high-contrast:active){.mat-dialog-container{outline:solid 1px}}.mat-dialog-content{display:block;margin:0 -24px;padding:0 24px;max-height:65vh;overflow:auto;-webkit-overflow-scrolling:touch;-webkit-backface-visibility:hidden;backface-visibility:hidden}.mat-dialog-title{margin:0 0 20px;display:block}.mat-dialog-actions{padding:12px 0;display:flex;flex-wrap:wrap}.mat-dialog-actions:last-child{margin-bottom:-24px}.mat-dialog-actions[align=end]{justify-content:flex-end}.mat-dialog-actions[align=center]{justify-content:center}.mat-dialog-actions .mat-button+.mat-button,.mat-dialog-actions .mat-button+.mat-raised-button,.mat-dialog-actions .mat-raised-button+.mat-button,.mat-dialog-actions .mat-raised-button+.mat-raised-button{margin-left:8px}[dir=rtl] .mat-dialog-actions .mat-button+.mat-button,[dir=rtl] .mat-dialog-actions .mat-button+.mat-raised-button,[dir=rtl] .mat-dialog-actions .mat-raised-button+.mat-button,[dir=rtl] .mat-dialog-actions .mat-raised-button+.mat-raised-button{margin-left:0;margin-right:8px}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
// Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
animations: [matDialogAnimations.slideDialog],
host: {
'class': 'mat-dialog-container',
'tabindex': '-1',
'[attr.id]': '_id',
'[attr.role]': '_config?.role',
'[attr.aria-labelledby]': '_config?.ariaLabel ? null : _ariaLabelledBy',
'[attr.aria-label]': '_config?.ariaLabel',
'[attr.aria-describedby]': '_config?.ariaDescribedBy || null',
'[@slideDialog]': '_state',
'(@slideDialog.start)': '_onAnimationStart($event)',
'(@slideDialog.done)': '_onAnimationDone($event)',
},
},] },
];
/** @nocollapse */
MatDialogContainer.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: a11y.FocusTrapFactory, },
{ type: core.ChangeDetectorRef, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
MatDialogContainer.propDecorators = {
"_portalOutlet": [{ type: core.ViewChild, args: [portal.CdkPortalOutlet,] },],
};
return MatDialogContainer;
}(portal.BasePortalOutlet));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// TODO(jelbourn): resizing
// Counter for unique dialog ids.
var uniqueId = 0;
/**
* Reference to a dialog opened via the MatDialog service.
*/
var MatDialogRef = (function () {
function MatDialogRef(_overlayRef, _containerInstance, location, id) {
if (id === void 0) {
id = "mat-dialog-" + uniqueId++;
}
var _this = this;
this._overlayRef = _overlayRef;
this._containerInstance = _containerInstance;
this.id = id;
/**
* Whether the user is allowed to close the dialog.
*/
this.disableClose = this._containerInstance._config.disableClose;
/**
* Subject for notifying the user that the dialog has finished opening.
*/
this._afterOpen = new Subject.Subject();
/**
* Subject for notifying the user that the dialog has finished closing.
*/
this._afterClosed = new Subject.Subject();
/**
* Subject for notifying the user that the dialog has started closing.
*/
this._beforeClose = new Subject.Subject();
/**
* Subscription to changes in the user's location.
*/
this._locationChanges = Subscription.Subscription.EMPTY;
// Pass the id along to the container.
_containerInstance._id = id;
// Emit when opening animation completes
_containerInstance._animationStateChanged.pipe(filter_2(function (event) { return event.phaseName === 'done' && event.toState === 'enter'; }), take_2(1))
.subscribe(function () {
_this._afterOpen.next();
_this._afterOpen.complete();
});
// Dispose overlay when closing animation is complete
_containerInstance._animationStateChanged.pipe(filter_2(function (event) { return event.phaseName === 'done' && event.toState === 'exit'; }), take_2(1))
.subscribe(function () {
_this._overlayRef.dispose();
_this._locationChanges.unsubscribe();
_this._afterClosed.next(_this._result);
_this._afterClosed.complete();
_this.componentInstance = /** @type {?} */ ((null));
});
_overlayRef.keydownEvents()
.pipe(filter_2(function (event) { return event.keyCode === keycodes.ESCAPE && !_this.disableClose; }))
.subscribe(function () { return _this.close(); });
if (location) {
// Close the dialog when the user goes forwards/backwards in history or when the location
// hash changes. Note that this usually doesn't include clicking on links (unless the user
// is using the `HashLocationStrategy`).
this._locationChanges = location.subscribe(function () {
if (_this._containerInstance._config.closeOnNavigation) {
_this.close();
}
});
}
}
/**
* Close the dialog.
* @param dialogResult Optional result to return to the dialog opener.
*/
/**
* Close the dialog.
* @param {?=} dialogResult Optional result to return to the dialog opener.
* @return {?}
*/
MatDialogRef.prototype.close = /**
* Close the dialog.
* @param {?=} dialogResult Optional result to return to the dialog opener.
* @return {?}
*/
function (dialogResult) {
var _this = this;
this._result = dialogResult;
// Transition the backdrop in parallel to the dialog.
this._containerInstance._animationStateChanged.pipe(filter_2(function (event) { return event.phaseName === 'start'; }), take_2(1))
.subscribe(function () {
_this._beforeClose.next(dialogResult);
_this._beforeClose.complete();
_this._overlayRef.detachBackdrop();
});
this._containerInstance._startExitAnimation();
};
/**
* Gets an observable that is notified when the dialog is finished opening.
*/
/**
* Gets an observable that is notified when the dialog is finished opening.
* @return {?}
*/
MatDialogRef.prototype.afterOpen = /**
* Gets an observable that is notified when the dialog is finished opening.
* @return {?}
*/
function () {
return this._afterOpen.asObservable();
};
/**
* Gets an observable that is notified when the dialog is finished closing.
*/
/**
* Gets an observable that is notified when the dialog is finished closing.
* @return {?}
*/
MatDialogRef.prototype.afterClosed = /**
* Gets an observable that is notified when the dialog is finished closing.
* @return {?}
*/
function () {
return this._afterClosed.asObservable();
};
/**
* Gets an observable that is notified when the dialog has started closing.
*/
/**
* Gets an observable that is notified when the dialog has started closing.
* @return {?}
*/
MatDialogRef.prototype.beforeClose = /**
* Gets an observable that is notified when the dialog has started closing.
* @return {?}
*/
function () {
return this._beforeClose.asObservable();
};
/**
* Gets an observable that emits when the overlay's backdrop has been clicked.
*/
/**
* Gets an observable that emits when the overlay's backdrop has been clicked.
* @return {?}
*/
MatDialogRef.prototype.backdropClick = /**
* Gets an observable that emits when the overlay's backdrop has been clicked.
* @return {?}
*/
function () {
return this._overlayRef.backdropClick();
};
/**
* Gets an observable that emits when keydown events are targeted on the overlay.
*/
/**
* Gets an observable that emits when keydown events are targeted on the overlay.
* @return {?}
*/
MatDialogRef.prototype.keydownEvents = /**
* Gets an observable that emits when keydown events are targeted on the overlay.
* @return {?}
*/
function () {
return this._overlayRef.keydownEvents();
};
/**
* Updates the dialog's position.
* @param position New dialog position.
*/
/**
* Updates the dialog's position.
* @param {?=} position New dialog position.
* @return {?}
*/
MatDialogRef.prototype.updatePosition = /**
* Updates the dialog's position.
* @param {?=} position New dialog position.
* @return {?}
*/
function (position) {
var /** @type {?} */ strategy = this._getPositionStrategy();
if (position && (position.left || position.right)) {
position.left ? strategy.left(position.left) : strategy.right(position.right);
}
else {
strategy.centerHorizontally();
}
if (position && (position.top || position.bottom)) {
position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
}
else {
strategy.centerVertically();
}
this._overlayRef.updatePosition();
return this;
};
/**
* Updates the dialog's width and height.
* @param width New width of the dialog.
* @param height New height of the dialog.
*/
/**
* Updates the dialog's width and height.
* @param {?=} width New width of the dialog.
* @param {?=} height New height of the dialog.
* @return {?}
*/
MatDialogRef.prototype.updateSize = /**
* Updates the dialog's width and height.
* @param {?=} width New width of the dialog.
* @param {?=} height New height of the dialog.
* @return {?}
*/
function (width, height) {
if (width === void 0) {
width = 'auto';
}
if (height === void 0) {
height = 'auto';
}
this._getPositionStrategy().width(width).height(height);
this._overlayRef.updatePosition();
return this;
};
/**
* Fetches the position strategy object from the overlay ref.
* @return {?}
*/
MatDialogRef.prototype._getPositionStrategy = /**
* Fetches the position strategy object from the overlay ref.
* @return {?}
*/
function () {
return /** @type {?} */ (this._overlayRef.getConfig().positionStrategy);
};
return MatDialogRef;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Injection token that can be used to access the data that was passed in to a dialog.
*/
var MAT_DIALOG_DATA = new core.InjectionToken('MatDialogData');
/**
* Injection token that can be used to specify default dialog options.
*/
var MAT_DIALOG_DEFAULT_OPTIONS = new core.InjectionToken('mat-dialog-default-options');
/**
* Injection token that determines the scroll handling while the dialog is open.
*/
var MAT_DIALOG_SCROLL_STRATEGY = new core.InjectionToken('mat-dialog-scroll-strategy');
/**
* Service to open Material Design modal dialogs.
*/
var MatDialog = (function () {
function MatDialog(_overlay, _injector, _location, _defaultOptions, _scrollStrategy, _parentDialog, _overlayContainer) {
var _this = this;
this._overlay = _overlay;
this._injector = _injector;
this._location = _location;
this._defaultOptions = _defaultOptions;
this._scrollStrategy = _scrollStrategy;
this._parentDialog = _parentDialog;
this._overlayContainer = _overlayContainer;
this._openDialogsAtThisLevel = [];
this._afterAllClosedAtThisLevel = new Subject.Subject();
this._afterOpenAtThisLevel = new Subject.Subject();
this._ariaHiddenElements = new Map();
/**
* Stream that emits when all open dialog have finished closing.
* Will emit on subscribe if there are no open dialogs to begin with.
*/
this.afterAllClosed = defer.defer(function () {
return _this.openDialogs.length ?
_this._afterAllClosed :
_this._afterAllClosed.pipe(startWith_2(undefined));
});
}
Object.defineProperty(MatDialog.prototype, "openDialogs", {
/** Keeps track of the currently-open dialogs. */
get: /**
* Keeps track of the currently-open dialogs.
* @return {?}
*/ function () {
return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDialog.prototype, "afterOpen", {
/** Stream that emits when a dialog has been opened. */
get: /**
* Stream that emits when a dialog has been opened.
* @return {?}
*/ function () {
return this._parentDialog ? this._parentDialog.afterOpen : this._afterOpenAtThisLevel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDialog.prototype, "_afterAllClosed", {
get: /**
* @return {?}
*/ function () {
var /** @type {?} */ parent = this._parentDialog;
return parent ? parent._afterAllClosed : this._afterAllClosedAtThisLevel;
},
enumerable: true,
configurable: true
});
/**
* Opens a modal dialog containing the given component.
* @param componentOrTemplateRef Type of the component to load into the dialog,
* or a TemplateRef to instantiate as the dialog content.
* @param config Extra configuration options.
* @returns Reference to the newly-opened dialog.
*/
/**
* Opens a modal dialog containing the given component.
* @template T, D
* @param {?} componentOrTemplateRef Type of the component to load into the dialog,
* or a TemplateRef to instantiate as the dialog content.
* @param {?=} config Extra configuration options.
* @return {?} Reference to the newly-opened dialog.
*/
MatDialog.prototype.open = /**
* Opens a modal dialog containing the given component.
* @template T, D
* @param {?} componentOrTemplateRef Type of the component to load into the dialog,
* or a TemplateRef to instantiate as the dialog content.
* @param {?=} config Extra configuration options.
* @return {?} Reference to the newly-opened dialog.
*/
function (componentOrTemplateRef, config) {
var _this = this;
config = _applyConfigDefaults(config, this._defaultOptions || new MatDialogConfig());
if (config.id && this.getDialogById(config.id)) {
throw Error("Dialog with id \"" + config.id + "\" exists already. The dialog id must be unique.");
}
var /** @type {?} */ overlayRef = this._createOverlay(config);
var /** @type {?} */ dialogContainer = this._attachDialogContainer(overlayRef, config);
var /** @type {?} */ dialogRef = this._attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config);
// If this is the first dialog that we're opening, hide all the non-overlay content.
if (!this.openDialogs.length) {
this._hideNonDialogContentFromAssistiveTechnology();
}
this.openDialogs.push(dialogRef);
dialogRef.afterClosed().subscribe(function () { return _this._removeOpenDialog(dialogRef); });
this.afterOpen.next(dialogRef);
return dialogRef;
};
/**
* Closes all of the currently-open dialogs.
*/
/**
* Closes all of the currently-open dialogs.
* @return {?}
*/
MatDialog.prototype.closeAll = /**
* Closes all of the currently-open dialogs.
* @return {?}
*/
function () {
var /** @type {?} */ i = this.openDialogs.length;
while (i--) {
// The `_openDialogs` property isn't updated after close until the rxjs subscription
// runs on the next microtask, in addition to modifying the array as we're going
// through it. We loop through all of them and call close without assuming that
// they'll be removed from the list instantaneously.
this.openDialogs[i].close();
}
};
/**
* Finds an open dialog by its id.
* @param id ID to use when looking up the dialog.
*/
/**
* Finds an open dialog by its id.
* @param {?} id ID to use when looking up the dialog.
* @return {?}
*/
MatDialog.prototype.getDialogById = /**
* Finds an open dialog by its id.
* @param {?} id ID to use when looking up the dialog.
* @return {?}
*/
function (id) {
return this.openDialogs.find(function (dialog) { return dialog.id === id; });
};
/**
* Creates the overlay into which the dialog will be loaded.
* @param {?} config The dialog configuration.
* @return {?} A promise resolving to the OverlayRef for the created overlay.
*/
MatDialog.prototype._createOverlay = /**
* Creates the overlay into which the dialog will be loaded.
* @param {?} config The dialog configuration.
* @return {?} A promise resolving to the OverlayRef for the created overlay.
*/
function (config) {
var /** @type {?} */ overlayConfig = this._getOverlayConfig(config);
return this._overlay.create(overlayConfig);
};
/**
* Creates an overlay config from a dialog config.
* @param {?} dialogConfig The dialog configuration.
* @return {?} The overlay configuration.
*/
MatDialog.prototype._getOverlayConfig = /**
* Creates an overlay config from a dialog config.
* @param {?} dialogConfig The dialog configuration.
* @return {?} The overlay configuration.
*/
function (dialogConfig) {
var /** @type {?} */ state$$1 = new overlay.OverlayConfig({
positionStrategy: this._overlay.position().global(),
scrollStrategy: dialogConfig.scrollStrategy || this._scrollStrategy(),
panelClass: dialogConfig.panelClass,
hasBackdrop: dialogConfig.hasBackdrop,
direction: dialogConfig.direction,
minWidth: dialogConfig.minWidth,
minHeight: dialogConfig.minHeight,
maxWidth: dialogConfig.maxWidth,
maxHeight: dialogConfig.maxHeight
});
if (dialogConfig.backdropClass) {
state$$1.backdropClass = dialogConfig.backdropClass;
}
return state$$1;
};
/**
* Attaches an MatDialogContainer to a dialog's already-created overlay.
* @param {?} overlay Reference to the dialog's underlying overlay.
* @param {?} config The dialog configuration.
* @return {?} A promise resolving to a ComponentRef for the attached container.
*/
MatDialog.prototype._attachDialogContainer = /**
* Attaches an MatDialogContainer to a dialog's already-created overlay.
* @param {?} overlay Reference to the dialog's underlying overlay.
* @param {?} config The dialog configuration.
* @return {?} A promise resolving to a ComponentRef for the attached container.
*/
function (overlay$$1, config) {
var /** @type {?} */ containerPortal = new portal.ComponentPortal(MatDialogContainer, config.viewContainerRef);
var /** @type {?} */ containerRef = overlay$$1.attach(containerPortal);
containerRef.instance._config = config;
return containerRef.instance;
};
/**
* Attaches the user-provided component to the already-created MatDialogContainer.
* @template T
* @param {?} componentOrTemplateRef The type of component being loaded into the dialog,
* or a TemplateRef to instantiate as the content.
* @param {?} dialogContainer Reference to the wrapping MatDialogContainer.
* @param {?} overlayRef Reference to the overlay in which the dialog resides.
* @param {?} config The dialog configuration.
* @return {?} A promise resolving to the MatDialogRef that should be returned to the user.
*/
MatDialog.prototype._attachDialogContent = /**
* Attaches the user-provided component to the already-created MatDialogContainer.
* @template T
* @param {?} componentOrTemplateRef The type of component being loaded into the dialog,
* or a TemplateRef to instantiate as the content.
* @param {?} dialogContainer Reference to the wrapping MatDialogContainer.
* @param {?} overlayRef Reference to the overlay in which the dialog resides.
* @param {?} config The dialog configuration.
* @return {?} A promise resolving to the MatDialogRef that should be returned to the user.
*/
function (componentOrTemplateRef, dialogContainer, overlayRef, config) {
// Create a reference to the dialog we're creating in order to give the user a handle
// to modify and close it.
var /** @type {?} */ dialogRef = new MatDialogRef(overlayRef, dialogContainer, this._location, config.id);
// When the dialog backdrop is clicked, we want to close it.
if (config.hasBackdrop) {
overlayRef.backdropClick().subscribe(function () {
if (!dialogRef.disableClose) {
dialogRef.close();
}
});
}
if (componentOrTemplateRef instanceof core.TemplateRef) {
dialogContainer.attachTemplatePortal(new portal.TemplatePortal(componentOrTemplateRef, /** @type {?} */ ((null)), /** @type {?} */ ({ $implicit: config.data, dialogRef: dialogRef })));
}
else {
var /** @type {?} */ injector = this._createInjector(config, dialogRef, dialogContainer);
var /** @type {?} */ contentRef = dialogContainer.attachComponentPortal(new portal.ComponentPortal(componentOrTemplateRef, undefined, injector));
dialogRef.componentInstance = contentRef.instance;
}
dialogRef
.updateSize(config.width, config.height)
.updatePosition(config.position);
return dialogRef;
};
/**
* Creates a custom injector to be used inside the dialog. This allows a component loaded inside
* of a dialog to close itself and, optionally, to return a value.
* @template T
* @param {?} config Config object that is used to construct the dialog.
* @param {?} dialogRef Reference to the dialog.
* @param {?} dialogContainer
* @return {?} The custom injector that can be used inside the dialog.
*/
MatDialog.prototype._createInjector = /**
* Creates a custom injector to be used inside the dialog. This allows a component loaded inside
* of a dialog to close itself and, optionally, to return a value.
* @template T
* @param {?} config Config object that is used to construct the dialog.
* @param {?} dialogRef Reference to the dialog.
* @param {?} dialogContainer
* @return {?} The custom injector that can be used inside the dialog.
*/
function (config, dialogRef, dialogContainer) {
var /** @type {?} */ userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
var /** @type {?} */ injectionTokens = new WeakMap();
injectionTokens.set(MatDialogRef, dialogRef);
// The MatDialogContainer is injected in the portal as the MatDialogContainer and the dialog's
// content are created out of the same ViewContainerRef and as such, are siblings for injector
// purposes. To allow the hierarchy that is expected, the MatDialogContainer is explicitly
// added to the injection tokens.
injectionTokens.set(MatDialogContainer, dialogContainer);
injectionTokens.set(MAT_DIALOG_DATA, config.data);
injectionTokens.set(bidi.Directionality, {
value: config.direction,
change: of.of()
});
return new portal.PortalInjector(userInjector || this._injector, injectionTokens);
};
/**
* Removes a dialog from the array of open dialogs.
* @param {?} dialogRef Dialog to be removed.
* @return {?}
*/
MatDialog.prototype._removeOpenDialog = /**
* Removes a dialog from the array of open dialogs.
* @param {?} dialogRef Dialog to be removed.
* @return {?}
*/
function (dialogRef) {
var /** @type {?} */ index = this.openDialogs.indexOf(dialogRef);
if (index > -1) {
this.openDialogs.splice(index, 1);
// If all the dialogs were closed, remove/restore the `aria-hidden`
// to a the siblings and emit to the `afterAllClosed` stream.
if (!this.openDialogs.length) {
this._ariaHiddenElements.forEach(function (previousValue, element) {
if (previousValue) {
element.setAttribute('aria-hidden', previousValue);
}
else {
element.removeAttribute('aria-hidden');
}
});
this._ariaHiddenElements.clear();
this._afterAllClosed.next();
}
}
};
/**
* Hides all of the content that isn't an overlay from assistive technology.
* @return {?}
*/
MatDialog.prototype._hideNonDialogContentFromAssistiveTechnology = /**
* Hides all of the content that isn't an overlay from assistive technology.
* @return {?}
*/
function () {
var /** @type {?} */ overlayContainer = this._overlayContainer.getContainerElement();
// Ensure that the overlay container is attached to the DOM.
if (overlayContainer.parentElement) {
var /** @type {?} */ siblings = overlayContainer.parentElement.children;
for (var /** @type {?} */ i = siblings.length - 1; i > -1; i--) {
var /** @type {?} */ sibling = siblings[i];
if (sibling !== overlayContainer &&
sibling.nodeName !== 'SCRIPT' &&
sibling.nodeName !== 'STYLE' &&
!sibling.hasAttribute('aria-live')) {
this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
sibling.setAttribute('aria-hidden', 'true');
}
}
}
};
MatDialog.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatDialog.ctorParameters = function () {
return [
{ type: overlay.Overlay, },
{ type: core.Injector, },
{ type: common.Location, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] },] },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_DIALOG_SCROLL_STRATEGY,] },] },
{ type: MatDialog, decorators: [{ type: core.Optional }, { type: core.SkipSelf },] },
{ type: overlay.OverlayContainer, },
];
};
return MatDialog;
}());
/**
* Applies default options to the dialog config.
* @param {?=} config Config to be modified.
* @param {?=} defaultOptions Default options provided.
* @return {?} The new configuration object.
*/
function _applyConfigDefaults(config, defaultOptions) {
return __assign({}, defaultOptions, config);
}
var __extends$23 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Ignores source values for a duration determined by another Observable, then
* emits the most recent value from the source Observable, then repeats this
* process.
*
* <span class="informal">It's like {@link auditTime}, but the silencing
* duration is determined by a second Observable.</span>
*
* <img src="./img/audit.png" width="100%">
*
* `audit` is similar to `throttle`, but emits the last value from the silenced
* time window, instead of the first value. `audit` emits the most recent value
* from the source Observable on the output Observable as soon as its internal
* timer becomes disabled, and ignores source values while the timer is enabled.
* Initially, the timer is disabled. As soon as the first source value arrives,
* the timer is enabled by calling the `durationSelector` function with the
* source value, which returns the "duration" Observable. When the duration
* Observable emits a value or completes, the timer is disabled, then the most
* recent source value is emitted on the output Observable, and this process
* repeats for the next source value.
*
* @example <caption>Emit clicks at a rate of at most one click per second</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var result = clicks.audit(ev => Rx.Observable.interval(1000));
* result.subscribe(x => console.log(x));
*
* @see {@link auditTime}
* @see {@link debounce}
* @see {@link delayWhen}
* @see {@link sample}
* @see {@link throttle}
*
* @param {function(value: T): SubscribableOrPromise} durationSelector A function
* that receives a value from the source Observable, for computing the silencing
* duration, returned as an Observable or a Promise.
* @return {Observable<T>} An Observable that performs rate-limiting of
* emissions from the source Observable.
* @method audit
* @owner Observable
*/
function audit(durationSelector) {
return function auditOperatorFunction(source) {
return source.lift(new AuditOperator(durationSelector));
};
}
var audit_2 = audit;
var AuditOperator = (function () {
function AuditOperator(durationSelector) {
this.durationSelector = durationSelector;
}
AuditOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new AuditSubscriber(subscriber, this.durationSelector));
};
return AuditOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var AuditSubscriber = (function (_super) {
__extends$23(AuditSubscriber, _super);
function AuditSubscriber(destination, durationSelector) {
_super.call(this, destination);
this.durationSelector = durationSelector;
this.hasValue = false;
}
AuditSubscriber.prototype._next = function (value) {
this.value = value;
this.hasValue = true;
if (!this.throttled) {
var duration = tryCatch_1.tryCatch(this.durationSelector)(value);
if (duration === errorObject.errorObject) {
this.destination.error(errorObject.errorObject.e);
}
else {
var innerSubscription = subscribeToResult_1.subscribeToResult(this, duration);
if (innerSubscription.closed) {
this.clearThrottle();
}
else {
this.add(this.throttled = innerSubscription);
}
}
}
};
AuditSubscriber.prototype.clearThrottle = function () {
var _a = this, value = _a.value, hasValue = _a.hasValue, throttled = _a.throttled;
if (throttled) {
this.remove(throttled);
this.throttled = null;
throttled.unsubscribe();
}
if (hasValue) {
this.value = null;
this.hasValue = false;
this.destination.next(value);
}
};
AuditSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex) {
this.clearThrottle();
};
AuditSubscriber.prototype.notifyComplete = function () {
this.clearThrottle();
};
return AuditSubscriber;
}(OuterSubscriber_1.OuterSubscriber));
var audit_1 = {
audit: audit_2
};
function isNumeric(val) {
// parseFloat NaNs numeric-cast false positives (null|true|false|"")
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
// subtraction forces infinities to NaN
// adding 1 corrects loss of precision from parseFloat (#15100)
return !isArray.isArray(val) && (val - parseFloat(val) + 1) >= 0;
}
var isNumeric_2 = isNumeric;
var isNumeric_1 = {
isNumeric: isNumeric_2
};
var __extends$24 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @extends {Ignored}
* @hide true
*/
var TimerObservable = (function (_super) {
__extends$24(TimerObservable, _super);
function TimerObservable(dueTime, period, scheduler) {
if (dueTime === void 0) {
dueTime = 0;
}
_super.call(this);
this.period = -1;
this.dueTime = 0;
if (isNumeric_1.isNumeric(period)) {
this.period = Number(period) < 1 && 1 || Number(period);
}
else if (isScheduler_1.isScheduler(period)) {
scheduler = period;
}
if (!isScheduler_1.isScheduler(scheduler)) {
scheduler = async.async;
}
this.scheduler = scheduler;
this.dueTime = isDate_1.isDate(dueTime) ?
(+dueTime - this.scheduler.now()) :
dueTime;
}
/**
* Creates an Observable that starts emitting after an `initialDelay` and
* emits ever increasing numbers after each `period` of time thereafter.
*
* <span class="informal">Its like {@link interval}, but you can specify when
* should the emissions start.</span>
*
* <img src="./img/timer.png" width="100%">
*
* `timer` returns an Observable that emits an infinite sequence of ascending
* integers, with a constant interval of time, `period` of your choosing
* between those emissions. The first emission happens after the specified
* `initialDelay`. The initial delay may be a {@link Date}. By default, this
* operator uses the `async` IScheduler to provide a notion of time, but you
* may pass any IScheduler to it. If `period` is not specified, the output
* Observable emits only one value, `0`. Otherwise, it emits an infinite
* sequence.
*
* @example <caption>Emits ascending numbers, one every second (1000ms), starting after 3 seconds</caption>
* var numbers = Rx.Observable.timer(3000, 1000);
* numbers.subscribe(x => console.log(x));
*
* @example <caption>Emits one number after five seconds</caption>
* var numbers = Rx.Observable.timer(5000);
* numbers.subscribe(x => console.log(x));
*
* @see {@link interval}
* @see {@link delay}
*
* @param {number|Date} initialDelay The initial delay time to wait before
* emitting the first value of `0`.
* @param {number} [period] The period of time between emissions of the
* subsequent numbers.
* @param {Scheduler} [scheduler=async] The IScheduler to use for scheduling
* the emission of values, and providing a notion of "time".
* @return {Observable} An Observable that emits a `0` after the
* `initialDelay` and ever increasing numbers after each `period` of time
* thereafter.
* @static true
* @name timer
* @owner Observable
*/
TimerObservable.create = function (initialDelay, period, scheduler) {
if (initialDelay === void 0) {
initialDelay = 0;
}
return new TimerObservable(initialDelay, period, scheduler);
};
TimerObservable.dispatch = function (state$$1) {
var index = state$$1.index, period = state$$1.period, subscriber = state$$1.subscriber;
var action = this;
subscriber.next(index);
if (subscriber.closed) {
return;
}
else if (period === -1) {
return subscriber.complete();
}
state$$1.index = index + 1;
action.schedule(state$$1, period);
};
TimerObservable.prototype._subscribe = function (subscriber) {
var index = 0;
var _a = this, period = _a.period, dueTime = _a.dueTime, scheduler = _a.scheduler;
return scheduler.schedule(TimerObservable.dispatch, dueTime, {
index: index, period: period, subscriber: subscriber
});
};
return TimerObservable;
}(Observable_1.Observable));
var TimerObservable_2 = TimerObservable;
var TimerObservable_1 = {
TimerObservable: TimerObservable_2
};
var timer_1 = TimerObservable_1.TimerObservable.create;
var timer = {
timer: timer_1
};
/**
* Ignores source values for `duration` milliseconds, then emits the most recent
* value from the source Observable, then repeats this process.
*
* <span class="informal">When it sees a source values, it ignores that plus
* the next ones for `duration` milliseconds, and then it emits the most recent
* value from the source.</span>
*
* <img src="./img/auditTime.png" width="100%">
*
* `auditTime` is similar to `throttleTime`, but emits the last value from the
* silenced time window, instead of the first value. `auditTime` emits the most
* recent value from the source Observable on the output Observable as soon as
* its internal timer becomes disabled, and ignores source values while the
* timer is enabled. Initially, the timer is disabled. As soon as the first
* source value arrives, the timer is enabled. After `duration` milliseconds (or
* the time unit determined internally by the optional `scheduler`) has passed,
* the timer is disabled, then the most recent source value is emitted on the
* output Observable, and this process repeats for the next source value.
* Optionally takes a {@link IScheduler} for managing timers.
*
* @example <caption>Emit clicks at a rate of at most one click per second</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var result = clicks.auditTime(1000);
* result.subscribe(x => console.log(x));
*
* @see {@link audit}
* @see {@link debounceTime}
* @see {@link delay}
* @see {@link sampleTime}
* @see {@link throttleTime}
*
* @param {number} duration Time to wait before emitting the most recent source
* value, measured in milliseconds or the time unit determined internally
* by the optional `scheduler`.
* @param {Scheduler} [scheduler=async] The {@link IScheduler} to use for
* managing the timers that handle the rate-limiting behavior.
* @return {Observable<T>} An Observable that performs rate-limiting of
* emissions from the source Observable.
* @method auditTime
* @owner Observable
*/
function auditTime(duration, scheduler) {
if (scheduler === void 0) {
scheduler = async.async;
}
return audit_1.audit(function () { return timer.timer(duration, scheduler); });
}
var auditTime_2 = auditTime;
var __extends$25 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Emits the values emitted by the source Observable until a `notifier`
* Observable emits a value.
*
* <span class="informal">Lets values pass until a second Observable,
* `notifier`, emits something. Then, it completes.</span>
*
* <img src="./img/takeUntil.png" width="100%">
*
* `takeUntil` subscribes and begins mirroring the source Observable. It also
* monitors a second Observable, `notifier` that you provide. If the `notifier`
* emits a value or a complete notification, the output Observable stops
* mirroring the source Observable and completes.
*
* @example <caption>Tick every second until the first click happens</caption>
* var interval = Rx.Observable.interval(1000);
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var result = interval.takeUntil(clicks);
* result.subscribe(x => console.log(x));
*
* @see {@link take}
* @see {@link takeLast}
* @see {@link takeWhile}
* @see {@link skip}
*
* @param {Observable} notifier The Observable whose first emitted value will
* cause the output Observable of `takeUntil` to stop emitting values from the
* source Observable.
* @return {Observable<T>} An Observable that emits the values from the source
* Observable until such time as `notifier` emits its first value.
* @method takeUntil
* @owner Observable
*/
function takeUntil(notifier) {
return function (source) { return source.lift(new TakeUntilOperator(notifier)); };
}
var takeUntil_2 = takeUntil;
var TakeUntilOperator = (function () {
function TakeUntilOperator(notifier) {
this.notifier = notifier;
}
TakeUntilOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new TakeUntilSubscriber(subscriber, this.notifier));
};
return TakeUntilOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var TakeUntilSubscriber = (function (_super) {
__extends$25(TakeUntilSubscriber, _super);
function TakeUntilSubscriber(destination, notifier) {
_super.call(this, destination);
this.notifier = notifier;
this.add(subscribeToResult_1.subscribeToResult(this, notifier));
}
TakeUntilSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
this.complete();
};
TakeUntilSubscriber.prototype.notifyComplete = function () {
// noop
};
return TakeUntilSubscriber;
}(OuterSubscriber_1.OuterSubscriber));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Directive to automatically resize a textarea to fit its content.
*/
var MatTextareaAutosize = (function () {
function MatTextareaAutosize(_elementRef, _platform, _ngZone) {
this._elementRef = _elementRef;
this._platform = _platform;
this._ngZone = _ngZone;
this._destroyed = new Subject.Subject();
}
Object.defineProperty(MatTextareaAutosize.prototype, "minRows", {
get: /**
* @return {?}
*/ function () { return this._minRows; },
set: /**
* Minimum amount of rows in the textarea.
* @param {?} value
* @return {?}
*/ function (value) {
this._minRows = value;
this._setMinHeight();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTextareaAutosize.prototype, "maxRows", {
get: /**
* Maximum amount of rows in the textarea.
* @return {?}
*/ function () { return this._maxRows; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._maxRows = value;
this._setMaxHeight();
},
enumerable: true,
configurable: true
});
// TODO(crisbeto): make the `_ngZone` a required param in the next major version.
/** Sets the minimum height of the textarea as determined by minRows. */
/**
* Sets the minimum height of the textarea as determined by minRows.
* @return {?}
*/
MatTextareaAutosize.prototype._setMinHeight = /**
* Sets the minimum height of the textarea as determined by minRows.
* @return {?}
*/
function () {
var /** @type {?} */ minHeight = this.minRows && this._cachedLineHeight ?
this.minRows * this._cachedLineHeight + "px" : null;
if (minHeight) {
this._setTextareaStyle('minHeight', minHeight);
}
};
/** Sets the maximum height of the textarea as determined by maxRows. */
/**
* Sets the maximum height of the textarea as determined by maxRows.
* @return {?}
*/
MatTextareaAutosize.prototype._setMaxHeight = /**
* Sets the maximum height of the textarea as determined by maxRows.
* @return {?}
*/
function () {
var /** @type {?} */ maxHeight = this.maxRows && this._cachedLineHeight ?
this.maxRows * this._cachedLineHeight + "px" : null;
if (maxHeight) {
this._setTextareaStyle('maxHeight', maxHeight);
}
};
/**
* @return {?}
*/
MatTextareaAutosize.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this._platform.isBrowser) {
this.resizeToFitContent();
if (this._ngZone) {
this._ngZone.runOutsideAngular(function () {
fromEvent.fromEvent(window, 'resize')
.pipe(auditTime_2(16), takeUntil_2(_this._destroyed))
.subscribe(function () { return _this.resizeToFitContent(true); });
});
}
}
};
/**
* @return {?}
*/
MatTextareaAutosize.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroyed.next();
this._destroyed.complete();
};
/**
* Sets a style property on the textarea element.
* @param {?} property
* @param {?} value
* @return {?}
*/
MatTextareaAutosize.prototype._setTextareaStyle = /**
* Sets a style property on the textarea element.
* @param {?} property
* @param {?} value
* @return {?}
*/
function (property, value) {
var /** @type {?} */ textarea = (this._elementRef.nativeElement);
textarea.style[property] = value;
};
/**
* Cache the height of a single-row textarea if it has not already been cached.
*
* We need to know how large a single "row" of a textarea is in order to apply minRows and
* maxRows. For the initial version, we will assume that the height of a single line in the
* textarea does not ever change.
* @return {?}
*/
MatTextareaAutosize.prototype._cacheTextareaLineHeight = /**
* Cache the height of a single-row textarea if it has not already been cached.
*
* We need to know how large a single "row" of a textarea is in order to apply minRows and
* maxRows. For the initial version, we will assume that the height of a single line in the
* textarea does not ever change.
* @return {?}
*/
function () {
if (this._cachedLineHeight) {
return;
}
var /** @type {?} */ textarea = (this._elementRef.nativeElement);
// Use a clone element because we have to override some styles.
var /** @type {?} */ textareaClone = (textarea.cloneNode(false));
textareaClone.rows = 1;
// Use `position: absolute` so that this doesn't cause a browser layout and use
// `visibility: hidden` so that nothing is rendered. Clear any other styles that
// would affect the height.
textareaClone.style.position = 'absolute';
textareaClone.style.visibility = 'hidden';
textareaClone.style.border = 'none';
textareaClone.style.padding = '0';
textareaClone.style.height = '';
textareaClone.style.minHeight = '';
textareaClone.style.maxHeight = '';
// In Firefox it happens that textarea elements are always bigger than the specified amount
// of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
// As a workaround that removes the extra space for the scrollbar, we can just set overflow
// to hidden. This ensures that there is no invalid calculation of the line height.
// See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
textareaClone.style.overflow = 'hidden'; /** @type {?} */
((textarea.parentNode)).appendChild(textareaClone);
this._cachedLineHeight = textareaClone.clientHeight; /** @type {?} */
((textarea.parentNode)).removeChild(textareaClone);
// Min and max heights have to be re-calculated if the cached line height changes
this._setMinHeight();
this._setMaxHeight();
};
/**
* @return {?}
*/
MatTextareaAutosize.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this._platform.isBrowser) {
this.resizeToFitContent();
}
};
/**
* Resize the textarea to fit its content.
* @param force Whether to force a height recalculation. By default the height will be
* recalculated only if the value changed since the last call.
*/
/**
* Resize the textarea to fit its content.
* @param {?=} force Whether to force a height recalculation. By default the height will be
* recalculated only if the value changed since the last call.
* @return {?}
*/
MatTextareaAutosize.prototype.resizeToFitContent = /**
* Resize the textarea to fit its content.
* @param {?=} force Whether to force a height recalculation. By default the height will be
* recalculated only if the value changed since the last call.
* @return {?}
*/
function (force) {
if (force === void 0) {
force = false;
}
this._cacheTextareaLineHeight();
// If we haven't determined the line-height yet, we know we're still hidden and there's no point
// in checking the height of the textarea.
if (!this._cachedLineHeight) {
return;
}
var /** @type {?} */ textarea = (this._elementRef.nativeElement);
var /** @type {?} */ value = textarea.value;
// Only resize of the value changed since these calculations can be expensive.
if (value === this._previousValue && !force) {
return;
}
var /** @type {?} */ placeholderText = textarea.placeholder;
// Reset the textarea height to auto in order to shrink back to its default size.
// Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
// Long placeholders that are wider than the textarea width may lead to a bigger scrollHeight
// value. To ensure that the scrollHeight is not bigger than the content, the placeholders
// need to be removed temporarily.
textarea.style.height = 'auto';
textarea.style.overflow = 'hidden';
textarea.placeholder = '';
// Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
textarea.style.height = textarea.scrollHeight + "px";
textarea.style.overflow = '';
textarea.placeholder = placeholderText;
this._previousValue = value;
};
MatTextareaAutosize.decorators = [
{ type: core.Directive, args: [{
selector: "textarea[mat-autosize], textarea[matTextareaAutosize]",
exportAs: 'matTextareaAutosize',
host: {
'class': 'mat-autosize',
// Textarea elements that have the directive applied should have a single row by default.
// Browsers normally show two rows by default and therefore this limits the minRows binding.
'rows': '1',
},
},] },
];
/** @nocollapse */
MatTextareaAutosize.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: platform.Platform, },
{ type: core.NgZone, },
];
};
MatTextareaAutosize.propDecorators = {
"minRows": [{ type: core.Input, args: ['matAutosizeMinRows',] },],
"maxRows": [{ type: core.Input, args: ['matAutosizeMaxRows',] },],
};
return MatTextareaAutosize;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @param {?} type
* @return {?}
*/
function getMatInputUnsupportedTypeError(type) {
return Error("Input type \"" + type + "\" isn't supported by matInput.");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* This token is used to inject the object whose value should be set into `MatInput`. If none is
* provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide
* themselves for this token, in order to make `MatInput` delegate the getting and setting of the
* value to them.
*/
var MAT_INPUT_VALUE_ACCESSOR = new core.InjectionToken('MAT_INPUT_VALUE_ACCESSOR');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
var MAT_INPUT_INVALID_TYPES = [
'button',
'checkbox',
'file',
'hidden',
'image',
'radio',
'range',
'reset',
'submit'
];
var nextUniqueId$3 = 0;
/**
* \@docs-private
*/
var MatInputBase = (function () {
function MatInputBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
this._parentForm = _parentForm;
this._parentFormGroup = _parentFormGroup;
this.ngControl = ngControl;
}
return MatInputBase;
}());
var _MatInputMixinBase = mixinErrorState(MatInputBase);
/**
* Directive that allows a native input to work inside a `MatFormField`.
*/
var MatInput = (function (_super) {
__extends(MatInput, _super);
function MatInput(_elementRef, _platform, /** @docs-private */ ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, inputValueAccessor) {
var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
_this._elementRef = _elementRef;
_this._platform = _platform;
_this.ngControl = ngControl;
_this._uid = "mat-input-" + nextUniqueId$3++;
/**
* Whether the component is being rendered on the server.
*/
_this._isServer = false;
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
*/
_this.focused = false;
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
*/
_this.stateChanges = new Subject.Subject();
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
*/
_this.controlType = 'mat-input';
_this._disabled = false;
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
*/
_this.placeholder = '';
_this._required = false;
_this._type = 'text';
_this._readonly = false;
_this._neverEmptyInputTypes = [
'date',
'datetime',
'datetime-local',
'month',
'time',
'week'
].filter(function (t) { return platform.getSupportedInputTypes().has(t); });
// If no input value accessor was explicitly specified, use the element as the input value
// accessor.
// If no input value accessor was explicitly specified, use the element as the input value
// accessor.
_this._inputValueAccessor = inputValueAccessor || _this._elementRef.nativeElement;
_this._previousNativeValue = _this.value;
// Force setter to be called in case id was not specified.
// Force setter to be called in case id was not specified.
_this.id = _this.id;
// On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
// key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
// exists on iOS, we only bother to install the listener on iOS.
if (_platform.IOS) {
_elementRef.nativeElement.addEventListener('keyup', function (event) {
var /** @type {?} */ el = (event.target);
if (!el.value && !el.selectionStart && !el.selectionEnd) {
// Note: Just setting `0, 0` doesn't fix the issue. Setting `1, 1` fixes it for the first
// time that you type text and then hold delete. Toggling to `1, 1` and then back to
// `0, 0` seems to completely fix it.
el.setSelectionRange(1, 1);
el.setSelectionRange(0, 0);
}
});
}
_this._isServer = !_this._platform.isBrowser;
return _this;
}
Object.defineProperty(MatInput.prototype, "disabled", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () {
if (this.ngControl && this.ngControl.disabled !== null) {
return this.ngControl.disabled;
}
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._disabled = coercion.coerceBooleanProperty(value);
// Browsers may not fire the blur event if the input is disabled too quickly.
// Reset from here to ensure that the element doesn't become stuck.
if (this.focused) {
this.focused = false;
this.stateChanges.next();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatInput.prototype, "id", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this._id; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._id = value || this._uid; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatInput.prototype, "required", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this._required; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._required = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatInput.prototype, "type", {
get: /**
* Input type of the element.
* @return {?}
*/ function () { return this._type; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._type = value || 'text';
this._validateType();
// When using Angular inputs, developers are no longer able to set the properties on the native
// input element. To ensure that bindings for `type` work, we need to sync the setter
// with the native property. Textarea elements don't support the type property or attribute.
if (!this._isTextarea() && platform.getSupportedInputTypes().has(this._type)) {
this._elementRef.nativeElement.type = this._type;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatInput.prototype, "value", {
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this._inputValueAccessor.value; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value !== this.value) {
this._inputValueAccessor.value = value;
this.stateChanges.next();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatInput.prototype, "readonly", {
get: /**
* Whether the element is readonly.
* @return {?}
*/ function () { return this._readonly; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._readonly = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatInput.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.stateChanges.next();
};
/**
* @return {?}
*/
MatInput.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.stateChanges.complete();
};
/**
* @return {?}
*/
MatInput.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
// We need to dirty-check the native element's value, because there are some cases where
// we won't be notified when it changes (e.g. the consumer isn't using forms or they're
// updating the value using `emitEvent: false`).
this._dirtyCheckNativeValue();
};
/** Focuses the input. */
/**
* Focuses the input.
* @return {?}
*/
MatInput.prototype.focus = /**
* Focuses the input.
* @return {?}
*/
function () { this._elementRef.nativeElement.focus(); };
/** Callback for the cases where the focused state of the input changes. */
/**
* Callback for the cases where the focused state of the input changes.
* @param {?} isFocused
* @return {?}
*/
MatInput.prototype._focusChanged = /**
* Callback for the cases where the focused state of the input changes.
* @param {?} isFocused
* @return {?}
*/
function (isFocused) {
if (isFocused !== this.focused && !this.readonly) {
this.focused = isFocused;
this.stateChanges.next();
}
};
/**
* @return {?}
*/
MatInput.prototype._onInput = /**
* @return {?}
*/
function () {
// This is a noop function and is used to let Angular know whenever the value changes.
// Angular will run a new change detection each time the `input` event has been dispatched.
// It's necessary that Angular recognizes the value change, because when floatingLabel
// is set to false and Angular forms aren't used, the placeholder won't recognize the
// value changes and will not disappear.
// Listening to the input event wouldn't be necessary when the input is using the
// FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
};
/** Does some manual dirty checking on the native input `value` property. */
/**
* Does some manual dirty checking on the native input `value` property.
* @return {?}
*/
MatInput.prototype._dirtyCheckNativeValue = /**
* Does some manual dirty checking on the native input `value` property.
* @return {?}
*/
function () {
var /** @type {?} */ newValue = this.value;
if (this._previousNativeValue !== newValue) {
this._previousNativeValue = newValue;
this.stateChanges.next();
}
};
/** Make sure the input is a supported type. */
/**
* Make sure the input is a supported type.
* @return {?}
*/
MatInput.prototype._validateType = /**
* Make sure the input is a supported type.
* @return {?}
*/
function () {
if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
throw getMatInputUnsupportedTypeError(this._type);
}
};
/** Checks whether the input type is one of the types that are never empty. */
/**
* Checks whether the input type is one of the types that are never empty.
* @return {?}
*/
MatInput.prototype._isNeverEmpty = /**
* Checks whether the input type is one of the types that are never empty.
* @return {?}
*/
function () {
return this._neverEmptyInputTypes.indexOf(this._type) > -1;
};
/** Checks whether the input is invalid based on the native validation. */
/**
* Checks whether the input is invalid based on the native validation.
* @return {?}
*/
MatInput.prototype._isBadInput = /**
* Checks whether the input is invalid based on the native validation.
* @return {?}
*/
function () {
// The `validity` property won't be present on platform-server.
var /** @type {?} */ validity = ((this._elementRef.nativeElement)).validity;
return validity && validity.badInput;
};
/** Determines if the component host is a textarea. If not recognizable it returns false. */
/**
* Determines if the component host is a textarea. If not recognizable it returns false.
* @return {?}
*/
MatInput.prototype._isTextarea = /**
* Determines if the component host is a textarea. If not recognizable it returns false.
* @return {?}
*/
function () {
var /** @type {?} */ nativeElement = this._elementRef.nativeElement;
// In Universal, we don't have access to `nodeName`, but the same can be achieved with `name`.
// Note that this shouldn't be necessary once Angular switches to an API that resembles the
// DOM closer.
var /** @type {?} */ nodeName = this._platform.isBrowser ? nativeElement.nodeName : nativeElement.name;
return nodeName ? nodeName.toLowerCase() === 'textarea' : false;
};
Object.defineProperty(MatInput.prototype, "empty", {
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () {
return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatInput.prototype, "shouldLabelFloat", {
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () { return this.focused || !this.empty; },
enumerable: true,
configurable: true
});
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @param {?} ids
* @return {?}
*/
MatInput.prototype.setDescribedByIds = /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @param {?} ids
* @return {?}
*/
function (ids) { this._ariaDescribedby = ids.join(' '); };
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/
MatInput.prototype.onContainerClick = /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/
function () { this.focus(); };
MatInput.decorators = [
{ type: core.Directive, args: [{
selector: "input[matInput], textarea[matInput]",
exportAs: 'matInput',
host: {
'class': 'mat-input-element mat-form-field-autofill-control',
'[class.mat-input-server]': '_isServer',
// Native input properties that are overwritten by Angular inputs need to be synced with
// the native input element. Otherwise property bindings for those don't work.
'[attr.id]': 'id',
'[placeholder]': 'placeholder',
'[disabled]': 'disabled',
'[required]': 'required',
'[readonly]': 'readonly',
'[attr.aria-describedby]': '_ariaDescribedby || null',
'[attr.aria-invalid]': 'errorState',
'[attr.aria-required]': 'required.toString()',
'(blur)': '_focusChanged(false)',
'(focus)': '_focusChanged(true)',
'(input)': '_onInput()',
},
providers: [{ provide: MatFormFieldControl, useExisting: MatInput }],
},] },
];
/** @nocollapse */
MatInput.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: platform.Platform, },
{ type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self },] },
{ type: forms.NgForm, decorators: [{ type: core.Optional },] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional },] },
{ type: ErrorStateMatcher, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Self }, { type: core.Inject, args: [MAT_INPUT_VALUE_ACCESSOR,] },] },
];
};
MatInput.propDecorators = {
"disabled": [{ type: core.Input },],
"id": [{ type: core.Input },],
"placeholder": [{ type: core.Input },],
"required": [{ type: core.Input },],
"type": [{ type: core.Input },],
"errorStateMatcher": [{ type: core.Input },],
"value": [{ type: core.Input },],
"readonly": [{ type: core.Input },],
};
return MatInput;
}(_MatInputMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatInputModule = (function () {
function MatInputModule() {
}
MatInputModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
MatInput,
MatTextareaAutosize,
],
imports: [
common.CommonModule,
MatFormFieldModule,
platform.PlatformModule,
],
exports: [
MatFormFieldModule,
MatInput,
MatTextareaAutosize,
],
providers: [ErrorStateMatcher],
},] },
];
/** @nocollapse */
MatInputModule.ctorParameters = function () { return []; };
return MatInputModule;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @param {?} provider
* @return {?}
*/
function createMissingDateImplError(provider) {
return Error("MatDatepicker: No provider found for " + provider + ". You must import one of the following " +
"modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a " +
"custom implementation.");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Datepicker data that requires internationalization.
*/
var MatDatepickerIntl = (function () {
function MatDatepickerIntl() {
/**
* Stream that emits whenever the labels here are changed. Use this to notify
* components if the labels have changed after initialization.
*/
this.changes = new Subject.Subject();
/**
* A label for the calendar popup (used by screen readers).
*/
this.calendarLabel = 'Calendar';
/**
* A label for the button used to open the calendar popup (used by screen readers).
*/
this.openCalendarLabel = 'Open calendar';
/**
* A label for the previous month button (used by screen readers).
*/
this.prevMonthLabel = 'Previous month';
/**
* A label for the next month button (used by screen readers).
*/
this.nextMonthLabel = 'Next month';
/**
* A label for the previous year button (used by screen readers).
*/
this.prevYearLabel = 'Previous year';
/**
* A label for the next year button (used by screen readers).
*/
this.nextYearLabel = 'Next year';
/**
* A label for the previous multi-year button (used by screen readers).
*/
this.prevMultiYearLabel = 'Previous 20 years';
/**
* A label for the next multi-year button (used by screen readers).
*/
this.nextMultiYearLabel = 'Next 20 years';
/**
* A label for the 'switch to month view' button (used by screen readers).
*/
this.switchToMonthViewLabel = 'Choose date';
/**
* A label for the 'switch to year view' button (used by screen readers).
*/
this.switchToMultiYearViewLabel = 'Choose month and year';
}
MatDatepickerIntl.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatDatepickerIntl.ctorParameters = function () { return []; };
return MatDatepickerIntl;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* An internal class that represents the data corresponding to a single calendar cell.
* \@docs-private
*/
var MatCalendarCell = (function () {
function MatCalendarCell(value, displayValue, ariaLabel, enabled) {
this.value = value;
this.displayValue = displayValue;
this.ariaLabel = ariaLabel;
this.enabled = enabled;
}
return MatCalendarCell;
}());
/**
* An internal component used to display calendar data in a table.
* \@docs-private
*/
var MatCalendarBody = (function () {
function MatCalendarBody() {
/**
* The number of columns in the table.
*/
this.numCols = 7;
/**
* Whether to allow selection of disabled cells.
*/
this.allowDisabledSelection = false;
/**
* The cell number of the active cell in the table.
*/
this.activeCell = 0;
/**
* The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
* maintained even as the table resizes.
*/
this.cellAspectRatio = 1;
/**
* Emits when a new value is selected.
*/
this.selectedValueChange = new core.EventEmitter();
}
/**
* @param {?} cell
* @return {?}
*/
MatCalendarBody.prototype._cellClicked = /**
* @param {?} cell
* @return {?}
*/
function (cell) {
if (!this.allowDisabledSelection && !cell.enabled) {
return;
}
this.selectedValueChange.emit(cell.value);
};
Object.defineProperty(MatCalendarBody.prototype, "_firstRowOffset", {
/** The number of blank cells to put at the beginning for the first row. */
get: /**
* The number of blank cells to put at the beginning for the first row.
* @return {?}
*/ function () {
return this.rows && this.rows.length && this.rows[0].length ?
this.numCols - this.rows[0].length : 0;
},
enumerable: true,
configurable: true
});
/**
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
MatCalendarBody.prototype._isActiveCell = /**
* @param {?} rowIndex
* @param {?} colIndex
* @return {?}
*/
function (rowIndex, colIndex) {
var /** @type {?} */ cellNumber = rowIndex * this.numCols + colIndex;
// Account for the fact that the first row may not have as many cells.
if (rowIndex) {
cellNumber -= this._firstRowOffset;
}
return cellNumber == this.activeCell;
};
MatCalendarBody.decorators = [
{ type: core.Component, args: [{ selector: '[mat-calendar-body]',
template: "<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\"><td class=\"mat-calendar-body-label\" [attr.colspan]=\"numCols\" [style.paddingTop.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">{{label}}</td></tr><tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\"><td *ngIf=\"rowIndex === 0 && _firstRowOffset\" aria-hidden=\"true\" class=\"mat-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" [style.paddingTop.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\" [class.mat-calendar-body-disabled]=\"!item.enabled\" [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\" [attr.aria-label]=\"item.ariaLabel\" [attr.aria-disabled]=\"!item.enabled || null\" (click)=\"_cellClicked(item)\" [style.width.%]=\"100 / numCols\" [style.paddingTop.%]=\"50 * cellAspectRatio / numCols\" [style.paddingBottom.%]=\"50 * cellAspectRatio / numCols\"><div class=\"mat-calendar-body-cell-content\" [class.mat-calendar-body-selected]=\"selectedValue === item.value\" [class.mat-calendar-body-today]=\"todayValue === item.value\">{{item.displayValue}}</div></td></tr>",
styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.71429%;padding-right:4.71429%}.mat-calendar-body-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;cursor:pointer}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px}[dir=rtl] .mat-calendar-body-label{text-align:right}"],
host: {
'class': 'mat-calendar-body',
'role': 'grid',
'attr.aria-readonly': 'true'
},
exportAs: 'matCalendarBody',
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatCalendarBody.ctorParameters = function () { return []; };
MatCalendarBody.propDecorators = {
"label": [{ type: core.Input },],
"rows": [{ type: core.Input },],
"todayValue": [{ type: core.Input },],
"selectedValue": [{ type: core.Input },],
"labelMinRequiredCells": [{ type: core.Input },],
"numCols": [{ type: core.Input },],
"allowDisabledSelection": [{ type: core.Input },],
"activeCell": [{ type: core.Input },],
"cellAspectRatio": [{ type: core.Input },],
"selectedValueChange": [{ type: core.Output },],
};
return MatCalendarBody;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DAYS_PER_WEEK = 7;
/**
* An internal component used to display a single month in the datepicker.
* \@docs-private
*/
var MatMonthView = (function () {
function MatMonthView(_dateAdapter, _dateFormats, _changeDetectorRef) {
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._changeDetectorRef = _changeDetectorRef;
/**
* Emits when a new date is selected.
*/
this.selectedChange = new core.EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
var /** @type {?} */ firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
var /** @type {?} */ narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
var /** @type {?} */ longWeekdays = this._dateAdapter.getDayOfWeekNames('long');
// Rotate the labels for days of the week based on the configured first day of the week.
var /** @type {?} */ weekdays = longWeekdays.map(function (long, i) {
return { long: long, narrow: narrowWeekdays[i] };
});
this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
this._activeDate = this._dateAdapter.today();
}
Object.defineProperty(MatMonthView.prototype, "activeDate", {
get: /**
* The date to display in this month view (everything other than the month and year is ignored).
* @return {?}
*/ function () { return this._activeDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ oldActiveDate = this._activeDate;
this._activeDate =
this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMonthView.prototype, "selected", {
get: /**
* The currently selected date.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._selectedDate = this._getDateInCurrentMonth(this._selected);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMonthView.prototype, "minDate", {
get: /**
* The minimum selectable date.
* @return {?}
*/ function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMonthView.prototype, "maxDate", {
get: /**
* The maximum selectable date.
* @return {?}
*/ function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatMonthView.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._init();
};
/** Handles when a new date is selected. */
/**
* Handles when a new date is selected.
* @param {?} date
* @return {?}
*/
MatMonthView.prototype._dateSelected = /**
* Handles when a new date is selected.
* @param {?} date
* @return {?}
*/
function (date) {
if (this._selectedDate != date) {
var /** @type {?} */ selectedYear = this._dateAdapter.getYear(this.activeDate);
var /** @type {?} */ selectedMonth = this._dateAdapter.getMonth(this.activeDate);
var /** @type {?} */ selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
this.selectedChange.emit(selectedDate);
}
this._userSelection.emit();
};
/** Initializes this month view. */
/**
* Initializes this month view.
* @return {?}
*/
MatMonthView.prototype._init = /**
* Initializes this month view.
* @return {?}
*/
function () {
this._selectedDate = this._getDateInCurrentMonth(this.selected);
this._todayDate = this._getDateInCurrentMonth(this._dateAdapter.today());
this._monthLabel =
this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]
.toLocaleUpperCase();
var /** @type {?} */ firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);
this._firstWeekOffset =
(DAYS_PER_WEEK + this._dateAdapter.getDayOfWeek(firstOfMonth) -
this._dateAdapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
this._createWeekCells();
this._changeDetectorRef.markForCheck();
};
/**
* Creates MatCalendarCells for the dates in this month.
* @return {?}
*/
MatMonthView.prototype._createWeekCells = /**
* Creates MatCalendarCells for the dates in this month.
* @return {?}
*/
function () {
var /** @type {?} */ daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);
var /** @type {?} */ dateNames = this._dateAdapter.getDateNames();
this._weeks = [[]];
for (var /** @type {?} */ i = 0, /** @type {?} */ cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
if (cell == DAYS_PER_WEEK) {
this._weeks.push([]);
cell = 0;
}
var /** @type {?} */ date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);
var /** @type {?} */ enabled = this._shouldEnableDate(date);
var /** @type {?} */ ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
this._weeks[this._weeks.length - 1]
.push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled));
}
};
/**
* Date filter for the month
* @param {?} date
* @return {?}
*/
MatMonthView.prototype._shouldEnableDate = /**
* Date filter for the month
* @param {?} date
* @return {?}
*/
function (date) {
return !!date &&
(!this.dateFilter || this.dateFilter(date)) &&
(!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&
(!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0);
};
/**
* Gets the date in this month that the given Date falls on.
* Returns null if the given Date is in another month.
* @param {?} date
* @return {?}
*/
MatMonthView.prototype._getDateInCurrentMonth = /**
* Gets the date in this month that the given Date falls on.
* Returns null if the given Date is in another month.
* @param {?} date
* @return {?}
*/
function (date) {
return date && this._hasSameMonthAndYear(date, this.activeDate) ?
this._dateAdapter.getDate(date) : null;
};
/**
* Checks whether the 2 dates are non-null and fall within the same month of the same year.
* @param {?} d1
* @param {?} d2
* @return {?}
*/
MatMonthView.prototype._hasSameMonthAndYear = /**
* Checks whether the 2 dates are non-null and fall within the same month of the same year.
* @param {?} d1
* @param {?} d2
* @return {?}
*/
function (d1, d2) {
return !!(d1 && d2 && this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) &&
this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));
};
/**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatMonthView.prototype._getValidDateOrNull = /**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
MatMonthView.decorators = [
{ type: core.Component, args: [{ selector: 'mat-month-view',
template: "<table class=\"mat-calendar-table\"><thead class=\"mat-calendar-table-header\"><tr><th *ngFor=\"let day of _weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th></tr><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"7\" aria-hidden=\"true\"></th></tr></thead><tbody mat-calendar-body [label]=\"_monthLabel\" [rows]=\"_weeks\" [todayValue]=\"_todayDate\" [selectedValue]=\"_selectedDate\" [labelMinRequiredCells]=\"3\" [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\" (selectedValueChange)=\"_dateSelected($event)\"></tbody></table>",
exportAs: 'matMonthView',
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatMonthView.ctorParameters = function () {
return [
{ type: DateAdapter, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] },] },
{ type: core.ChangeDetectorRef, },
];
};
MatMonthView.propDecorators = {
"activeDate": [{ type: core.Input },],
"selected": [{ type: core.Input },],
"minDate": [{ type: core.Input },],
"maxDate": [{ type: core.Input },],
"dateFilter": [{ type: core.Input },],
"selectedChange": [{ type: core.Output },],
"_userSelection": [{ type: core.Output },],
};
return MatMonthView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var yearsPerPage = 24;
var yearsPerRow = 4;
/**
* An internal component used to display a year selector in the datepicker.
* \@docs-private
*/
var MatMultiYearView = (function () {
function MatMultiYearView(_dateAdapter, _changeDetectorRef) {
this._dateAdapter = _dateAdapter;
this._changeDetectorRef = _changeDetectorRef;
/**
* Emits when a new month is selected.
*/
this.selectedChange = new core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
this._activeDate = this._dateAdapter.today();
}
Object.defineProperty(MatMultiYearView.prototype, "activeDate", {
get: /**
* The date to display in this multi-year view (everything other than the year is ignored).
* @return {?}
*/ function () { return this._activeDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ oldActiveDate = this._activeDate;
this._activeDate =
this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
if (Math.floor(this._dateAdapter.getYear(oldActiveDate) / yearsPerPage) !=
Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMultiYearView.prototype, "selected", {
get: /**
* The currently selected date.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._selectedYear = this._selected && this._dateAdapter.getYear(this._selected);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMultiYearView.prototype, "minDate", {
get: /**
* The minimum selectable date.
* @return {?}
*/ function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMultiYearView.prototype, "maxDate", {
get: /**
* The maximum selectable date.
* @return {?}
*/ function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatMultiYearView.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._init();
};
/** Initializes this multi-year view. */
/**
* Initializes this multi-year view.
* @return {?}
*/
MatMultiYearView.prototype._init = /**
* Initializes this multi-year view.
* @return {?}
*/
function () {
var _this = this;
this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());
var /** @type {?} */ activeYear = this._dateAdapter.getYear(this._activeDate);
var /** @type {?} */ activeOffset = activeYear % yearsPerPage;
this._years = [];
for (var /** @type {?} */ i = 0, /** @type {?} */ row = []; i < yearsPerPage; i++) {
row.push(activeYear - activeOffset + i);
if (row.length == yearsPerRow) {
this._years.push(row.map(function (year) { return _this._createCellForYear(year); }));
row = [];
}
}
this._changeDetectorRef.markForCheck();
};
/** Handles when a new year is selected. */
/**
* Handles when a new year is selected.
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._yearSelected = /**
* Handles when a new year is selected.
* @param {?} year
* @return {?}
*/
function (year) {
var /** @type {?} */ month = this._dateAdapter.getMonth(this.activeDate);
var /** @type {?} */ daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));
this.selectedChange.emit(this._dateAdapter.createDate(year, month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
};
/**
* @return {?}
*/
MatMultiYearView.prototype._getActiveCell = /**
* @return {?}
*/
function () {
return this._dateAdapter.getYear(this.activeDate) % yearsPerPage;
};
/**
* Creates an MatCalendarCell for the given year.
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._createCellForYear = /**
* Creates an MatCalendarCell for the given year.
* @param {?} year
* @return {?}
*/
function (year) {
var /** @type {?} */ yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
};
/**
* Whether the given year is enabled.
* @param {?} year
* @return {?}
*/
MatMultiYearView.prototype._shouldEnableYear = /**
* Whether the given year is enabled.
* @param {?} year
* @return {?}
*/
function (year) {
// disable if the year is greater than maxDate lower than minDate
if (year === undefined || year === null ||
(this.maxDate && year > this._dateAdapter.getYear(this.maxDate)) ||
(this.minDate && year < this._dateAdapter.getYear(this.minDate))) {
return false;
}
// enable if it reaches here and there's no filter defined
if (!this.dateFilter) {
return true;
}
var /** @type {?} */ firstOfYear = this._dateAdapter.createDate(year, 0, 1);
// If any date in the year is enabled count the year as enabled.
for (var /** @type {?} */ date = firstOfYear; this._dateAdapter.getYear(date) == year; date = this._dateAdapter.addCalendarDays(date, 1)) {
if (this.dateFilter(date)) {
return true;
}
}
return false;
};
/**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatMultiYearView.prototype._getValidDateOrNull = /**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
MatMultiYearView.decorators = [
{ type: core.Component, args: [{ selector: 'mat-multi-year-view',
template: "<table class=\"mat-calendar-table\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body allowDisabledSelection=\"true\" [rows]=\"_years\" [todayValue]=\"_todayYear\" [selectedValue]=\"_selectedYear\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_getActiveCell()\" (selectedValueChange)=\"_yearSelected($event)\"></tbody></table>",
exportAs: 'matMultiYearView',
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatMultiYearView.ctorParameters = function () {
return [
{ type: DateAdapter, decorators: [{ type: core.Optional },] },
{ type: core.ChangeDetectorRef, },
];
};
MatMultiYearView.propDecorators = {
"activeDate": [{ type: core.Input },],
"selected": [{ type: core.Input },],
"minDate": [{ type: core.Input },],
"maxDate": [{ type: core.Input },],
"dateFilter": [{ type: core.Input },],
"selectedChange": [{ type: core.Output },],
};
return MatMultiYearView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* An internal component used to display a single year in the datepicker.
* \@docs-private
*/
var MatYearView = (function () {
function MatYearView(_dateAdapter, _dateFormats, _changeDetectorRef) {
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._changeDetectorRef = _changeDetectorRef;
/**
* Emits when a new month is selected.
*/
this.selectedChange = new core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
this._activeDate = this._dateAdapter.today();
}
Object.defineProperty(MatYearView.prototype, "activeDate", {
get: /**
* The date to display in this year view (everything other than the year is ignored).
* @return {?}
*/ function () { return this._activeDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ oldActiveDate = this._activeDate;
this._activeDate =
this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
if (this._dateAdapter.getYear(oldActiveDate) != this._dateAdapter.getYear(this._activeDate)) {
this._init();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatYearView.prototype, "selected", {
get: /**
* The currently selected date.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._selectedMonth = this._getMonthInCurrentYear(this._selected);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatYearView.prototype, "minDate", {
get: /**
* The minimum selectable date.
* @return {?}
*/ function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatYearView.prototype, "maxDate", {
get: /**
* The maximum selectable date.
* @return {?}
*/ function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatYearView.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._init();
};
/** Handles when a new month is selected. */
/**
* Handles when a new month is selected.
* @param {?} month
* @return {?}
*/
MatYearView.prototype._monthSelected = /**
* Handles when a new month is selected.
* @param {?} month
* @return {?}
*/
function (month) {
var /** @type {?} */ daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1));
this.selectedChange.emit(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
};
/** Initializes this year view. */
/**
* Initializes this year view.
* @return {?}
*/
MatYearView.prototype._init = /**
* Initializes this year view.
* @return {?}
*/
function () {
var _this = this;
this._selectedMonth = this._getMonthInCurrentYear(this.selected);
this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today());
this._yearLabel = this._dateAdapter.getYearName(this.activeDate);
var /** @type {?} */ monthNames = this._dateAdapter.getMonthNames('short');
// First row of months only contains 5 elements so we can fit the year label on the same row.
this._months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]].map(function (row) {
return row.map(function (month) { return _this._createCellForMonth(month, monthNames[month]); });
});
this._changeDetectorRef.markForCheck();
};
/**
* Gets the month in this year that the given Date falls on.
* Returns null if the given Date is in another year.
* @param {?} date
* @return {?}
*/
MatYearView.prototype._getMonthInCurrentYear = /**
* Gets the month in this year that the given Date falls on.
* Returns null if the given Date is in another year.
* @param {?} date
* @return {?}
*/
function (date) {
return date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate) ?
this._dateAdapter.getMonth(date) : null;
};
/**
* Creates an MatCalendarCell for the given month.
* @param {?} month
* @param {?} monthName
* @return {?}
*/
MatYearView.prototype._createCellForMonth = /**
* Creates an MatCalendarCell for the given month.
* @param {?} month
* @param {?} monthName
* @return {?}
*/
function (month, monthName) {
var /** @type {?} */ ariaLabel = this._dateAdapter.format(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1), this._dateFormats.display.monthYearA11yLabel);
return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));
};
/**
* Whether the given month is enabled.
* @param {?} month
* @return {?}
*/
MatYearView.prototype._shouldEnableMonth = /**
* Whether the given month is enabled.
* @param {?} month
* @return {?}
*/
function (month) {
var /** @type {?} */ activeYear = this._dateAdapter.getYear(this.activeDate);
if (month === undefined || month === null ||
this._isYearAndMonthAfterMaxDate(activeYear, month) ||
this._isYearAndMonthBeforeMinDate(activeYear, month)) {
return false;
}
if (!this.dateFilter) {
return true;
}
var /** @type {?} */ firstOfMonth = this._dateAdapter.createDate(activeYear, month, 1);
// If any date in the month is enabled count the month as enabled.
for (var /** @type {?} */ date = firstOfMonth; this._dateAdapter.getMonth(date) == month; date = this._dateAdapter.addCalendarDays(date, 1)) {
if (this.dateFilter(date)) {
return true;
}
}
return false;
};
/**
* Tests whether the combination month/year is after this.maxDate, considering
* just the month and year of this.maxDate
* @param {?} year
* @param {?} month
* @return {?}
*/
MatYearView.prototype._isYearAndMonthAfterMaxDate = /**
* Tests whether the combination month/year is after this.maxDate, considering
* just the month and year of this.maxDate
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
if (this.maxDate) {
var /** @type {?} */ maxYear = this._dateAdapter.getYear(this.maxDate);
var /** @type {?} */ maxMonth = this._dateAdapter.getMonth(this.maxDate);
return year > maxYear || (year === maxYear && month > maxMonth);
}
return false;
};
/**
* Tests whether the combination month/year is before this.minDate, considering
* just the month and year of this.minDate
* @param {?} year
* @param {?} month
* @return {?}
*/
MatYearView.prototype._isYearAndMonthBeforeMinDate = /**
* Tests whether the combination month/year is before this.minDate, considering
* just the month and year of this.minDate
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
if (this.minDate) {
var /** @type {?} */ minYear = this._dateAdapter.getYear(this.minDate);
var /** @type {?} */ minMonth = this._dateAdapter.getMonth(this.minDate);
return year < minYear || (year === minYear && month < minMonth);
}
return false;
};
/**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatYearView.prototype._getValidDateOrNull = /**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
MatYearView.decorators = [
{ type: core.Component, args: [{ selector: 'mat-year-view',
template: "<table class=\"mat-calendar-table\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body allowDisabledSelection=\"true\" [label]=\"_yearLabel\" [rows]=\"_months\" [todayValue]=\"_todayMonth\" [selectedValue]=\"_selectedMonth\" [labelMinRequiredCells]=\"2\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_dateAdapter.getMonth(activeDate)\" (selectedValueChange)=\"_monthSelected($event)\"></tbody></table>",
exportAs: 'matYearView',
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatYearView.ctorParameters = function () {
return [
{ type: DateAdapter, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] },] },
{ type: core.ChangeDetectorRef, },
];
};
MatYearView.propDecorators = {
"activeDate": [{ type: core.Input },],
"selected": [{ type: core.Input },],
"minDate": [{ type: core.Input },],
"maxDate": [{ type: core.Input },],
"dateFilter": [{ type: core.Input },],
"selectedChange": [{ type: core.Output },],
};
return MatYearView;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* A calendar that is used as part of the datepicker.
* \@docs-private
*/
var MatCalendar = (function () {
function MatCalendar(_elementRef, _intl, _ngZone, _dateAdapter, _dateFormats, changeDetectorRef, _dir) {
this._elementRef = _elementRef;
this._intl = _intl;
this._ngZone = _ngZone;
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._dir = _dir;
/**
* Whether the calendar should be started in month or year view.
*/
this.startView = 'month';
/**
* Emits when the currently selected date changes.
*/
this.selectedChange = new core.EventEmitter();
/**
* Emits when any date is selected.
*/
this._userSelection = new core.EventEmitter();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
this._intlChanges = _intl.changes.subscribe(function () { return changeDetectorRef.markForCheck(); });
}
Object.defineProperty(MatCalendar.prototype, "startAt", {
get: /**
* A date representing the period (month or year) to start the calendar in.
* @return {?}
*/ function () { return this._startAt; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "selected", {
get: /**
* The currently selected date.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "minDate", {
get: /**
* The minimum selectable date.
* @return {?}
*/ function () { return this._minDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "maxDate", {
get: /**
* The maximum selectable date.
* @return {?}
*/ function () { return this._maxDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_activeDate", {
/**
* The current active date. This determines which time period is shown and which date is
* highlighted when using keyboard navigation.
*/
get: /**
* The current active date. This determines which time period is shown and which date is
* highlighted when using keyboard navigation.
* @return {?}
*/ function () { return this._clampedActiveDate; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_periodButtonText", {
/** The label for the current calendar view. */
get: /**
* The label for the current calendar view.
* @return {?}
*/ function () {
if (this._currentView == 'month') {
return this._dateAdapter.format(this._activeDate, this._dateFormats.display.monthYearLabel)
.toLocaleUpperCase();
}
if (this._currentView == 'year') {
return this._dateAdapter.getYearName(this._activeDate);
}
var /** @type {?} */ activeYear = this._dateAdapter.getYear(this._activeDate);
var /** @type {?} */ firstYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
var /** @type {?} */ lastYearInView = this._dateAdapter.getYearName(this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
return firstYearInView + " \u2013 " + lastYearInView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_periodButtonLabel", {
get: /**
* @return {?}
*/ function () {
return this._currentView == 'month' ?
this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_prevButtonLabel", {
/** The label for the the previous button. */
get: /**
* The label for the the previous button.
* @return {?}
*/ function () {
return {
'month': this._intl.prevMonthLabel,
'year': this._intl.prevYearLabel,
'multi-year': this._intl.prevMultiYearLabel
}[this._currentView];
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatCalendar.prototype, "_nextButtonLabel", {
/** The label for the the next button. */
get: /**
* The label for the the next button.
* @return {?}
*/ function () {
return {
'month': this._intl.nextMonthLabel,
'year': this._intl.nextYearLabel,
'multi-year': this._intl.nextMultiYearLabel
}[this._currentView];
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatCalendar.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._activeDate = this.startAt || this._dateAdapter.today();
this._focusActiveCell();
this._currentView = this.startView;
};
/**
* @return {?}
*/
MatCalendar.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._intlChanges.unsubscribe();
};
/**
* @param {?} changes
* @return {?}
*/
MatCalendar.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var /** @type {?} */ change = changes["minDate"] || changes["maxDate"] || changes["dateFilter"];
if (change && !change.firstChange) {
var /** @type {?} */ view = this.monthView || this.yearView || this.multiYearView;
if (view) {
view._init();
}
}
};
/** Handles date selection in the month view. */
/**
* Handles date selection in the month view.
* @param {?} date
* @return {?}
*/
MatCalendar.prototype._dateSelected = /**
* Handles date selection in the month view.
* @param {?} date
* @return {?}
*/
function (date) {
if (!this._dateAdapter.sameDate(date, this.selected)) {
this.selectedChange.emit(date);
}
};
/**
* @return {?}
*/
MatCalendar.prototype._userSelected = /**
* @return {?}
*/
function () {
this._userSelection.emit();
};
/** Handles month selection in the multi-year view. */
/**
* Handles month selection in the multi-year view.
* @param {?} date
* @param {?} view
* @return {?}
*/
MatCalendar.prototype._goToDateInView = /**
* Handles month selection in the multi-year view.
* @param {?} date
* @param {?} view
* @return {?}
*/
function (date, view) {
this._activeDate = date;
this._currentView = view;
};
/** Handles user clicks on the period label. */
/**
* Handles user clicks on the period label.
* @return {?}
*/
MatCalendar.prototype._currentPeriodClicked = /**
* Handles user clicks on the period label.
* @return {?}
*/
function () {
this._currentView = this._currentView == 'month' ? 'multi-year' : 'month';
};
/** Handles user clicks on the previous button. */
/**
* Handles user clicks on the previous button.
* @return {?}
*/
MatCalendar.prototype._previousClicked = /**
* Handles user clicks on the previous button.
* @return {?}
*/
function () {
this._activeDate = this._currentView == 'month' ?
this._dateAdapter.addCalendarMonths(this._activeDate, -1) :
this._dateAdapter.addCalendarYears(this._activeDate, this._currentView == 'year' ? -1 : -yearsPerPage);
};
/** Handles user clicks on the next button. */
/**
* Handles user clicks on the next button.
* @return {?}
*/
MatCalendar.prototype._nextClicked = /**
* Handles user clicks on the next button.
* @return {?}
*/
function () {
this._activeDate = this._currentView == 'month' ?
this._dateAdapter.addCalendarMonths(this._activeDate, 1) :
this._dateAdapter.addCalendarYears(this._activeDate, this._currentView == 'year' ? 1 : yearsPerPage);
};
/** Whether the previous period button is enabled. */
/**
* Whether the previous period button is enabled.
* @return {?}
*/
MatCalendar.prototype._previousEnabled = /**
* Whether the previous period button is enabled.
* @return {?}
*/
function () {
if (!this.minDate) {
return true;
}
return !this.minDate || !this._isSameView(this._activeDate, this.minDate);
};
/** Whether the next period button is enabled. */
/**
* Whether the next period button is enabled.
* @return {?}
*/
MatCalendar.prototype._nextEnabled = /**
* Whether the next period button is enabled.
* @return {?}
*/
function () {
return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
};
/** Handles keydown events on the calendar body. */
/**
* Handles keydown events on the calendar body.
* @param {?} event
* @return {?}
*/
MatCalendar.prototype._handleCalendarBodyKeydown = /**
* Handles keydown events on the calendar body.
* @param {?} event
* @return {?}
*/
function (event) {
// TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
// disabled ones from being selected. This may not be ideal, we should look into whether
// navigation should skip over disabled dates, and if so, how to implement that efficiently.
if (this._currentView == 'month') {
this._handleCalendarBodyKeydownInMonthView(event);
}
else if (this._currentView == 'year') {
this._handleCalendarBodyKeydownInYearView(event);
}
else {
this._handleCalendarBodyKeydownInMultiYearView(event);
}
};
/** Focuses the active cell after the microtask queue is empty. */
/**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
MatCalendar.prototype._focusActiveCell = /**
* Focuses the active cell after the microtask queue is empty.
* @return {?}
*/
function () {
var _this = this;
this._ngZone.runOutsideAngular(function () {
_this._ngZone.onStable.asObservable().pipe(take_2(1)).subscribe(function () {
_this._elementRef.nativeElement.querySelector('.mat-calendar-body-active').focus();
});
});
};
/**
* Whether the two dates represent the same view in the current view mode (month or year).
* @param {?} date1
* @param {?} date2
* @return {?}
*/
MatCalendar.prototype._isSameView = /**
* Whether the two dates represent the same view in the current view mode (month or year).
* @param {?} date1
* @param {?} date2
* @return {?}
*/
function (date1, date2) {
if (this._currentView == 'month') {
return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) &&
this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2);
}
if (this._currentView == 'year') {
return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);
}
// Otherwise we are in 'multi-year' view.
return Math.floor(this._dateAdapter.getYear(date1) / yearsPerPage) ==
Math.floor(this._dateAdapter.getYear(date2) / yearsPerPage);
};
/**
* Handles keydown events on the calendar body when calendar is in month view.
* @param {?} event
* @return {?}
*/
MatCalendar.prototype._handleCalendarBodyKeydownInMonthView = /**
* Handles keydown events on the calendar body when calendar is in month view.
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ isRtl = this._isRtl();
switch (event.keyCode) {
case keycodes.LEFT_ARROW:
this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);
break;
case keycodes.RIGHT_ARROW:
this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);
break;
case keycodes.UP_ARROW:
this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);
break;
case keycodes.DOWN_ARROW:
this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);
break;
case keycodes.HOME:
this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));
break;
case keycodes.END:
this._activeDate = this._dateAdapter.addCalendarDays(this._activeDate, (this._dateAdapter.getNumDaysInMonth(this._activeDate) -
this._dateAdapter.getDate(this._activeDate)));
break;
case keycodes.PAGE_UP:
this._activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, -1) :
this._dateAdapter.addCalendarMonths(this._activeDate, -1);
break;
case keycodes.PAGE_DOWN:
this._activeDate = event.altKey ?
this._dateAdapter.addCalendarYears(this._activeDate, 1) :
this._dateAdapter.addCalendarMonths(this._activeDate, 1);
break;
case keycodes.ENTER:
if (!this.dateFilter || this.dateFilter(this._activeDate)) {
this._dateSelected(this._activeDate);
this._userSelected();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
}
return;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
};
/**
* Handles keydown events on the calendar body when calendar is in year view.
* @param {?} event
* @return {?}
*/
MatCalendar.prototype._handleCalendarBodyKeydownInYearView = /**
* Handles keydown events on the calendar body when calendar is in year view.
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ isRtl = this._isRtl();
switch (event.keyCode) {
case keycodes.LEFT_ARROW:
this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);
break;
case keycodes.RIGHT_ARROW:
this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);
break;
case keycodes.UP_ARROW:
this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -4);
break;
case keycodes.DOWN_ARROW:
this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 4);
break;
case keycodes.HOME:
this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));
break;
case keycodes.END:
this._activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));
break;
case keycodes.PAGE_UP:
this._activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);
break;
case keycodes.PAGE_DOWN:
this._activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
break;
case keycodes.ENTER:
this._goToDateInView(this._activeDate, 'month');
break;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
};
/**
* Handles keydown events on the calendar body when calendar is in multi-year view.
* @param {?} event
* @return {?}
*/
MatCalendar.prototype._handleCalendarBodyKeydownInMultiYearView = /**
* Handles keydown events on the calendar body when calendar is in multi-year view.
* @param {?} event
* @return {?}
*/
function (event) {
switch (event.keyCode) {
case keycodes.LEFT_ARROW:
this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -1);
break;
case keycodes.RIGHT_ARROW:
this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, 1);
break;
case keycodes.UP_ARROW:
this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);
break;
case keycodes.DOWN_ARROW:
this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);
break;
case keycodes.HOME:
this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -this._dateAdapter.getYear(this._activeDate) % yearsPerPage);
break;
case keycodes.END:
this._activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - this._dateAdapter.getYear(this._activeDate) % yearsPerPage - 1);
break;
case keycodes.PAGE_UP:
this._activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);
break;
case keycodes.PAGE_DOWN:
this._activeDate =
this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
break;
case keycodes.ENTER:
this._goToDateInView(this._activeDate, 'year');
break;
default:
// Don't prevent default or focus active cell on keys that we don't explicitly handle.
return;
}
this._focusActiveCell();
// Prevent unexpected default actions such as form submission.
event.preventDefault();
};
/**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatCalendar.prototype._getValidDateOrNull = /**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
/**
* Determines whether the user has the RTL layout direction.
* @return {?}
*/
MatCalendar.prototype._isRtl = /**
* Determines whether the user has the RTL layout direction.
* @return {?}
*/
function () {
return this._dir && this._dir.value === 'rtl';
};
MatCalendar.decorators = [
{ type: core.Component, args: [{ selector: 'mat-calendar',
template: "<div class=\"mat-calendar-header\"><div class=\"mat-calendar-controls\"><button mat-button class=\"mat-calendar-period-button\" (click)=\"_currentPeriodClicked()\" [attr.aria-label]=\"_periodButtonLabel\">{{_periodButtonText}}<div class=\"mat-calendar-arrow\" [class.mat-calendar-invert]=\"_currentView != 'month'\"></div></button><div class=\"mat-calendar-spacer\"></div><button mat-icon-button class=\"mat-calendar-previous-button\" [disabled]=\"!_previousEnabled()\" (click)=\"_previousClicked()\" [attr.aria-label]=\"_prevButtonLabel\"></button> <button mat-icon-button class=\"mat-calendar-next-button\" [disabled]=\"!_nextEnabled()\" (click)=\"_nextClicked()\" [attr.aria-label]=\"_nextButtonLabel\"></button></div></div><div class=\"mat-calendar-content\" (keydown)=\"_handleCalendarBodyKeydown($event)\" [ngSwitch]=\"_currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\"><mat-month-view *ngSwitchCase=\"'month'\" [activeDate]=\"_activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (selectedChange)=\"_dateSelected($event)\" (_userSelection)=\"_userSelected()\"></mat-month-view><mat-year-view *ngSwitchCase=\"'year'\" [activeDate]=\"_activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (selectedChange)=\"_goToDateInView($event, 'month')\"></mat-year-view><mat-multi-year-view *ngSwitchCase=\"'multi-year'\" [activeDate]=\"_activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (selectedChange)=\"_goToDateInView($event, 'year')\"></mat-multi-year-view></div>",
styles: [".mat-calendar{display:block}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:0}.mat-calendar-controls{display:flex;margin:5% calc(33% / 7 - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0}.mat-calendar-arrow{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top-width:5px;border-top-style:solid;margin:0 0 0 5px;vertical-align:middle}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}.mat-calendar-next-button,.mat-calendar-previous-button{position:relative}.mat-calendar-next-button::after,.mat-calendar-previous-button::after{top:0;left:0;right:0;bottom:0;position:absolute;content:'';margin:15.5px;border:0 solid currentColor;border-top-width:2px}[dir=rtl] .mat-calendar-next-button,[dir=rtl] .mat-calendar-previous-button{transform:rotate(180deg)}.mat-calendar-previous-button::after{border-left-width:2px;transform:translateX(2px) rotate(-45deg)}.mat-calendar-next-button::after{border-right-width:2px;transform:translateX(-2px) rotate(45deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:'';position:absolute;top:0;left:-8px;right:-8px;height:1px}"],
host: {
'class': 'mat-calendar',
},
exportAs: 'matCalendar',
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatCalendar.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: MatDatepickerIntl, },
{ type: core.NgZone, },
{ type: DateAdapter, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] },] },
{ type: core.ChangeDetectorRef, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
];
};
MatCalendar.propDecorators = {
"startAt": [{ type: core.Input },],
"startView": [{ type: core.Input },],
"selected": [{ type: core.Input },],
"minDate": [{ type: core.Input },],
"maxDate": [{ type: core.Input },],
"dateFilter": [{ type: core.Input },],
"selectedChange": [{ type: core.Output },],
"_userSelection": [{ type: core.Output },],
"monthView": [{ type: core.ViewChild, args: [MatMonthView,] },],
"yearView": [{ type: core.ViewChild, args: [MatYearView,] },],
"multiYearView": [{ type: core.ViewChild, args: [MatMultiYearView,] },],
};
return MatCalendar;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Used to generate a unique ID for each datepicker instance.
*/
var datepickerUid = 0;
/**
* Injection token that determines the scroll handling while the calendar is open.
*/
var MAT_DATEPICKER_SCROLL_STRATEGY = new core.InjectionToken('mat-datepicker-scroll-strategy');
/**
* Component used as the content for the datepicker dialog and popup. We use this instead of using
* MatCalendar directly as the content so we can control the initial focus. This also gives us a
* place to put additional features of the popup that are not part of the calendar itself in the
* future. (e.g. confirmation buttons).
* \@docs-private
*/
var MatDatepickerContent = (function () {
function MatDatepickerContent() {
}
/**
* @return {?}
*/
MatDatepickerContent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._calendar._focusActiveCell();
};
MatDatepickerContent.decorators = [
{ type: core.Component, args: [{ selector: 'mat-datepicker-content',
template: "<mat-calendar cdkTrapFocus [id]=\"datepicker.id\" [ngClass]=\"datepicker.panelClass\" [startAt]=\"datepicker.startAt\" [startView]=\"datepicker.startView\" [minDate]=\"datepicker._minDate\" [maxDate]=\"datepicker._maxDate\" [dateFilter]=\"datepicker._dateFilter\" [selected]=\"datepicker._selected\" (selectedChange)=\"datepicker._select($event)\" (_userSelection)=\"datepicker.close()\"></mat-calendar>",
styles: [".mat-datepicker-content{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);display:block;border-radius:2px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content-touch{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);display:block;max-height:80vh;overflow:auto;margin:-24px}.mat-datepicker-content-touch .mat-calendar{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-calendar{width:64vh;height:80vh}}@media all and (orientation:portrait){.mat-datepicker-content-touch .mat-calendar{width:80vw;height:100vw}}"],
host: {
'class': 'mat-datepicker-content',
'[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
},
exportAs: 'matDatepickerContent',
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatDatepickerContent.ctorParameters = function () { return []; };
MatDatepickerContent.propDecorators = {
"_calendar": [{ type: core.ViewChild, args: [MatCalendar,] },],
};
return MatDatepickerContent;
}());
/**
* Component responsible for managing the datepicker popup/dialog.
*/
var MatDatepicker = (function () {
function MatDatepicker(_dialog, _overlay, _ngZone, _viewContainerRef, _scrollStrategy, _dateAdapter, _dir, _document) {
this._dialog = _dialog;
this._overlay = _overlay;
this._ngZone = _ngZone;
this._viewContainerRef = _viewContainerRef;
this._scrollStrategy = _scrollStrategy;
this._dateAdapter = _dateAdapter;
this._dir = _dir;
this._document = _document;
/**
* The view that the calendar should start in.
*/
this.startView = 'month';
this._touchUi = false;
/**
* Emits new selected date when selected date changes.
* @deprecated Switch to the `dateChange` and `dateInput` binding on the input element.
* \@deletion-target 6.0.0
*/
this.selectedChanged = new core.EventEmitter();
/**
* Emits when the datepicker has been opened.
*/
this.openedStream = new core.EventEmitter();
/**
* Emits when the datepicker has been closed.
*/
this.closedStream = new core.EventEmitter();
this._opened = false;
/**
* The id for the datepicker calendar.
*/
this.id = "mat-datepicker-" + datepickerUid++;
this._validSelected = null;
/**
* The element that was focused before the datepicker was opened.
*/
this._focusedElementBeforeOpen = null;
this._inputSubscription = Subscription.Subscription.EMPTY;
/**
* Emits when the datepicker is disabled.
*/
this._disabledChange = new Subject.Subject();
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
}
Object.defineProperty(MatDatepicker.prototype, "startAt", {
get: /**
* The date to open the calendar to initially.
* @return {?}
*/ function () {
// If an explicit startAt is set we start there, otherwise we start at whatever the currently
// selected value is.
return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "touchUi", {
get: /**
* Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
* than a popup and elements have more padding to allow for bigger touch targets.
* @return {?}
*/ function () { return this._touchUi; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._touchUi = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "disabled", {
get: /**
* Whether the datepicker pop-up should be disabled.
* @return {?}
*/ function () {
return this._disabled === undefined && this._datepickerInput ?
this._datepickerInput.disabled : !!this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._disabled) {
this._disabled = newValue;
this._disabledChange.next(newValue);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "opened", {
get: /**
* Whether the calendar is open.
* @return {?}
*/ function () { return this._opened; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { value ? this.open() : this.close(); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_selected", {
/** The currently selected date. */
get: /**
* The currently selected date.
* @return {?}
*/ function () { return this._validSelected; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._validSelected = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_minDate", {
/** The minimum selectable date. */
get: /**
* The minimum selectable date.
* @return {?}
*/ function () {
return this._datepickerInput && this._datepickerInput.min;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_maxDate", {
/** The maximum selectable date. */
get: /**
* The maximum selectable date.
* @return {?}
*/ function () {
return this._datepickerInput && this._datepickerInput.max;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepicker.prototype, "_dateFilter", {
get: /**
* @return {?}
*/ function () {
return this._datepickerInput && this._datepickerInput._dateFilter;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatDatepicker.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.close();
this._inputSubscription.unsubscribe();
this._disabledChange.complete();
if (this._popupRef) {
this._popupRef.dispose();
}
};
/** Selects the given date */
/**
* Selects the given date
* @param {?} date
* @return {?}
*/
MatDatepicker.prototype._select = /**
* Selects the given date
* @param {?} date
* @return {?}
*/
function (date) {
var /** @type {?} */ oldValue = this._selected;
this._selected = date;
if (!this._dateAdapter.sameDate(oldValue, this._selected)) {
this.selectedChanged.emit(date);
}
};
/**
* Register an input with this datepicker.
* @param input The datepicker input to register with this datepicker.
*/
/**
* Register an input with this datepicker.
* @param {?} input The datepicker input to register with this datepicker.
* @return {?}
*/
MatDatepicker.prototype._registerInput = /**
* Register an input with this datepicker.
* @param {?} input The datepicker input to register with this datepicker.
* @return {?}
*/
function (input) {
var _this = this;
if (this._datepickerInput) {
throw Error('A MatDatepicker can only be associated with a single input.');
}
this._datepickerInput = input;
this._inputSubscription =
this._datepickerInput._valueChange.subscribe(function (value) { return _this._selected = value; });
};
/** Open the calendar. */
/**
* Open the calendar.
* @return {?}
*/
MatDatepicker.prototype.open = /**
* Open the calendar.
* @return {?}
*/
function () {
if (this._opened || this.disabled) {
return;
}
if (!this._datepickerInput) {
throw Error('Attempted to open an MatDatepicker with no associated input.');
}
if (this._document) {
this._focusedElementBeforeOpen = this._document.activeElement;
}
this.touchUi ? this._openAsDialog() : this._openAsPopup();
this._opened = true;
this.openedStream.emit();
};
/** Close the calendar. */
/**
* Close the calendar.
* @return {?}
*/
MatDatepicker.prototype.close = /**
* Close the calendar.
* @return {?}
*/
function () {
var _this = this;
if (!this._opened) {
return;
}
if (this._popupRef && this._popupRef.hasAttached()) {
this._popupRef.detach();
}
if (this._dialogRef) {
this._dialogRef.close();
this._dialogRef = null;
}
if (this._calendarPortal && this._calendarPortal.isAttached) {
this._calendarPortal.detach();
}
var /** @type {?} */ completeClose = function () {
// The `_opened` could've been reset already if
// we got two events in quick succession.
if (_this._opened) {
_this._opened = false;
_this.closedStream.emit();
_this._focusedElementBeforeOpen = null;
}
};
if (this._focusedElementBeforeOpen &&
typeof this._focusedElementBeforeOpen.focus === 'function') {
// Because IE moves focus asynchronously, we can't count on it being restored before we've
// marked the datepicker as closed. If the event fires out of sequence and the element that
// we're refocusing opens the datepicker on focus, the user could be stuck with not being
// able to close the calendar at all. We work around it by making the logic, that marks
// the datepicker as closed, async as well.
this._focusedElementBeforeOpen.focus();
setTimeout(completeClose);
}
else {
completeClose();
}
};
/**
* Open the calendar as a dialog.
* @return {?}
*/
MatDatepicker.prototype._openAsDialog = /**
* Open the calendar as a dialog.
* @return {?}
*/
function () {
var _this = this;
this._dialogRef = this._dialog.open(MatDatepickerContent, {
direction: this._dir ? this._dir.value : 'ltr',
viewContainerRef: this._viewContainerRef,
panelClass: 'mat-datepicker-dialog',
});
this._dialogRef.afterClosed().subscribe(function () { return _this.close(); });
this._dialogRef.componentInstance.datepicker = this;
};
/**
* Open the calendar as a popup.
* @return {?}
*/
MatDatepicker.prototype._openAsPopup = /**
* Open the calendar as a popup.
* @return {?}
*/
function () {
var _this = this;
if (!this._calendarPortal) {
this._calendarPortal = new portal.ComponentPortal(MatDatepickerContent, this._viewContainerRef);
}
if (!this._popupRef) {
this._createPopup();
}
if (!this._popupRef.hasAttached()) {
var /** @type {?} */ componentRef = this._popupRef.attach(this._calendarPortal);
componentRef.instance.datepicker = this;
// Update the position once the calendar has rendered.
this._ngZone.onStable.asObservable().pipe(take_2(1)).subscribe(function () {
_this._popupRef.updatePosition();
});
}
};
/**
* Create the popup.
* @return {?}
*/
MatDatepicker.prototype._createPopup = /**
* Create the popup.
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ overlayConfig = new overlay.OverlayConfig({
positionStrategy: this._createPopupPositionStrategy(),
hasBackdrop: true,
backdropClass: 'mat-overlay-transparent-backdrop',
direction: this._dir ? this._dir.value : 'ltr',
scrollStrategy: this._scrollStrategy(),
panelClass: 'mat-datepicker-popup',
});
this._popupRef = this._overlay.create(overlayConfig);
merge.merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.keydownEvents().pipe(filter_2(function (event) { return event.keyCode === keycodes.ESCAPE; }))).subscribe(function () { return _this.close(); });
};
/**
* Create the popup PositionStrategy.
* @return {?}
*/
MatDatepicker.prototype._createPopupPositionStrategy = /**
* Create the popup PositionStrategy.
* @return {?}
*/
function () {
var /** @type {?} */ fallbackOffset = this._datepickerInput._getPopupFallbackOffset();
return this._overlay.position()
.connectedTo(this._datepickerInput.getPopupConnectionElementRef(), { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
.withFallbackPosition({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }, undefined, fallbackOffset)
.withFallbackPosition({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' })
.withFallbackPosition({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }, undefined, fallbackOffset);
};
/**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatDatepicker.prototype._getValidDateOrNull = /**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
MatDatepicker.decorators = [
{ type: core.Component, args: [{ selector: 'mat-datepicker',
template: '',
exportAs: 'matDatepicker',
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatDatepicker.ctorParameters = function () {
return [
{ type: MatDialog, },
{ type: overlay.Overlay, },
{ type: core.NgZone, },
{ type: core.ViewContainerRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_DATEPICKER_SCROLL_STRATEGY,] },] },
{ type: DateAdapter, decorators: [{ type: core.Optional },] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
MatDatepicker.propDecorators = {
"startAt": [{ type: core.Input },],
"startView": [{ type: core.Input },],
"touchUi": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"selectedChanged": [{ type: core.Output },],
"panelClass": [{ type: core.Input },],
"openedStream": [{ type: core.Output, args: ['opened',] },],
"closedStream": [{ type: core.Output, args: ['closed',] },],
"opened": [{ type: core.Input },],
};
return MatDatepicker;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MAT_DATEPICKER_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatDatepickerInput; }),
multi: true
};
var MAT_DATEPICKER_VALIDATORS = {
provide: forms.NG_VALIDATORS,
useExisting: core.forwardRef(function () { return MatDatepickerInput; }),
multi: true
};
/**
* An event used for datepicker input and change events. We don't always have access to a native
* input or change event because the event may have been triggered by the user clicking on the
* calendar popup. For consistency, we always use MatDatepickerInputEvent instead.
*/
var MatDatepickerInputEvent = (function () {
function MatDatepickerInputEvent(target, targetElement) {
this.target = target;
this.targetElement = targetElement;
this.value = this.target.value;
}
return MatDatepickerInputEvent;
}());
/**
* Directive used to connect an input to a MatDatepicker.
*/
var MatDatepickerInput = (function () {
function MatDatepickerInput(_elementRef, _dateAdapter, _dateFormats, _formField) {
var _this = this;
this._elementRef = _elementRef;
this._dateAdapter = _dateAdapter;
this._dateFormats = _dateFormats;
this._formField = _formField;
/**
* Emits when a `change` event is fired on this `<input>`.
*/
this.dateChange = new core.EventEmitter();
/**
* Emits when an `input` event is fired on this `<input>`.
*/
this.dateInput = new core.EventEmitter();
/**
* Emits when the value changes (either due to user input or programmatic change).
*/
this._valueChange = new core.EventEmitter();
/**
* Emits when the disabled state has changed
*/
this._disabledChange = new core.EventEmitter();
this._onTouched = function () { };
this._cvaOnChange = function () { };
this._validatorOnChange = function () { };
this._datepickerSubscription = Subscription.Subscription.EMPTY;
this._localeSubscription = Subscription.Subscription.EMPTY;
/**
* The form control validator for whether the input parses.
*/
this._parseValidator = function () {
return _this._lastValueValid ?
null : { 'matDatepickerParse': { 'text': _this._elementRef.nativeElement.value } };
};
/**
* The form control validator for the min date.
*/
this._minValidator = function (control) {
var /** @type {?} */ controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
return (!_this.min || !controlValue ||
_this._dateAdapter.compareDate(_this.min, controlValue) <= 0) ?
null : { 'matDatepickerMin': { 'min': _this.min, 'actual': controlValue } };
};
/**
* The form control validator for the max date.
*/
this._maxValidator = function (control) {
var /** @type {?} */ controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
return (!_this.max || !controlValue ||
_this._dateAdapter.compareDate(_this.max, controlValue) >= 0) ?
null : { 'matDatepickerMax': { 'max': _this.max, 'actual': controlValue } };
};
/**
* The form control validator for the date filter.
*/
this._filterValidator = function (control) {
var /** @type {?} */ controlValue = _this._getValidDateOrNull(_this._dateAdapter.deserialize(control.value));
return !_this._dateFilter || !controlValue || _this._dateFilter(controlValue) ?
null : { 'matDatepickerFilter': true };
};
/**
* The combined form control validator for this input.
*/
this._validator = forms.Validators.compose([this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator]);
/**
* Whether the last value set on the input was valid.
*/
this._lastValueValid = false;
if (!this._dateAdapter) {
throw createMissingDateImplError('DateAdapter');
}
if (!this._dateFormats) {
throw createMissingDateImplError('MAT_DATE_FORMATS');
}
// Update the displayed date when the locale changes.
this._localeSubscription = _dateAdapter.localeChanges.subscribe(function () {
_this.value = _this.value;
});
}
Object.defineProperty(MatDatepickerInput.prototype, "matDatepicker", {
set: /**
* The datepicker that this input is associated with.
* @param {?} value
* @return {?}
*/ function (value) {
this.registerDatepicker(value);
},
enumerable: true,
configurable: true
});
/**
* @param {?} value
* @return {?}
*/
MatDatepickerInput.prototype.registerDatepicker = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this._datepicker = value;
this._datepicker._registerInput(this);
}
};
Object.defineProperty(MatDatepickerInput.prototype, "matDatepickerFilter", {
set: /**
* Function that can be used to filter out dates within the datepicker.
* @param {?} value
* @return {?}
*/ function (value) {
this._dateFilter = value;
this._validatorOnChange();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "value", {
get: /**
* The value of the input.
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
value = this._dateAdapter.deserialize(value);
this._lastValueValid = !value || this._dateAdapter.isValid(value);
value = this._getValidDateOrNull(value);
var /** @type {?} */ oldDate = this.value;
this._value = value;
this._elementRef.nativeElement.value =
value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
if (!this._dateAdapter.sameDate(oldDate, value)) {
this._valueChange.emit(value);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "min", {
get: /**
* The minimum valid date.
* @return {?}
*/ function () { return this._min; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._validatorOnChange();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "max", {
get: /**
* The maximum valid date.
* @return {?}
*/ function () { return this._max; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
this._validatorOnChange();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDatepickerInput.prototype, "disabled", {
get: /**
* Whether the datepicker-input is disabled.
* @return {?}
*/ function () { return !!this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ newValue = coercion.coerceBooleanProperty(value);
if (this._disabled !== newValue) {
this._disabled = newValue;
this._disabledChange.emit(newValue);
}
if (newValue) {
// Normally, native input elements automatically blur if they turn disabled. This behavior
// is problematic, because it would mean that it triggers another change detection cycle,
// which then causes a changed after checked error if the input element was focused before.
this._elementRef.nativeElement.blur();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatDatepickerInput.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this._datepicker) {
this._datepickerSubscription =
this._datepicker.selectedChanged.subscribe(function (selected) {
_this.value = selected;
_this._cvaOnChange(selected);
_this._onTouched();
_this.dateInput.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
_this.dateChange.emit(new MatDatepickerInputEvent(_this, _this._elementRef.nativeElement));
});
}
};
/**
* @return {?}
*/
MatDatepickerInput.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._datepickerSubscription.unsubscribe();
this._localeSubscription.unsubscribe();
this._valueChange.complete();
this._disabledChange.complete();
};
/** @docs-private */
/**
* \@docs-private
* @param {?} fn
* @return {?}
*/
MatDatepickerInput.prototype.registerOnValidatorChange = /**
* \@docs-private
* @param {?} fn
* @return {?}
*/
function (fn) {
this._validatorOnChange = fn;
};
/** @docs-private */
/**
* \@docs-private
* @param {?} c
* @return {?}
*/
MatDatepickerInput.prototype.validate = /**
* \@docs-private
* @param {?} c
* @return {?}
*/
function (c) {
return this._validator ? this._validator(c) : null;
};
/**
* Gets the element that the datepicker popup should be connected to.
* @return The element to connect the popup to.
*/
/**
* Gets the element that the datepicker popup should be connected to.
* @return {?} The element to connect the popup to.
*/
MatDatepickerInput.prototype.getPopupConnectionElementRef = /**
* Gets the element that the datepicker popup should be connected to.
* @return {?} The element to connect the popup to.
*/
function () {
return this._formField ? this._formField.underlineRef : this._elementRef;
};
/**
* Determines the offset to be used when the calendar goes into a fallback position.
* Primarily used to prevent the calendar from overlapping the input.
*/
/**
* Determines the offset to be used when the calendar goes into a fallback position.
* Primarily used to prevent the calendar from overlapping the input.
* @return {?}
*/
MatDatepickerInput.prototype._getPopupFallbackOffset = /**
* Determines the offset to be used when the calendar goes into a fallback position.
* Primarily used to prevent the calendar from overlapping the input.
* @return {?}
*/
function () {
return this._formField ? -this._formField._inputContainerRef.nativeElement.clientHeight : 0;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MatDatepickerInput.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatDatepickerInput.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._cvaOnChange = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MatDatepickerInput.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
// Implemented as part of ControlValueAccessor.
/**
* @param {?} isDisabled
* @return {?}
*/
MatDatepickerInput.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* @param {?} event
* @return {?}
*/
MatDatepickerInput.prototype._onKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.altKey && event.keyCode === keycodes.DOWN_ARROW) {
this._datepicker.open();
event.preventDefault();
}
};
/**
* @param {?} value
* @return {?}
*/
MatDatepickerInput.prototype._onInput = /**
* @param {?} value
* @return {?}
*/
function (value) {
var /** @type {?} */ date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
this._lastValueValid = !date || this._dateAdapter.isValid(date);
date = this._getValidDateOrNull(date);
this._value = date;
this._cvaOnChange(date);
this._valueChange.emit(date);
this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
};
/**
* @return {?}
*/
MatDatepickerInput.prototype._onChange = /**
* @return {?}
*/
function () {
this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
};
/**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
MatDatepickerInput.prototype._getValidDateOrNull = /**
* @param {?} obj The object to check.
* @return {?} The given object if it is both a date instance and valid, otherwise null.
*/
function (obj) {
return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
};
MatDatepickerInput.decorators = [
{ type: core.Directive, args: [{
selector: 'input[matDatepicker]',
providers: [
MAT_DATEPICKER_VALUE_ACCESSOR,
MAT_DATEPICKER_VALIDATORS,
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },
],
host: {
'[attr.aria-haspopup]': 'true',
'[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
'[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
'[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
'[disabled]': 'disabled',
'(input)': '_onInput($event.target.value)',
'(change)': '_onChange()',
'(blur)': '_onTouched()',
'(keydown)': '_onKeydown($event)',
},
exportAs: 'matDatepickerInput',
},] },
];
/** @nocollapse */
MatDatepickerInput.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: DateAdapter, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] },] },
{ type: MatFormField, decorators: [{ type: core.Optional },] },
];
};
MatDatepickerInput.propDecorators = {
"matDatepicker": [{ type: core.Input },],
"matDatepickerFilter": [{ type: core.Input },],
"value": [{ type: core.Input },],
"min": [{ type: core.Input },],
"max": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"dateChange": [{ type: core.Output },],
"dateInput": [{ type: core.Output },],
};
return MatDatepickerInput;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Can be used to override the icon of a `matDatepickerToggle`.
*/
var MatDatepickerToggleIcon = (function () {
function MatDatepickerToggleIcon() {
}
MatDatepickerToggleIcon.decorators = [
{ type: core.Directive, args: [{
selector: '[matDatepickerToggleIcon]'
},] },
];
/** @nocollapse */
MatDatepickerToggleIcon.ctorParameters = function () { return []; };
return MatDatepickerToggleIcon;
}());
var MatDatepickerToggle = (function () {
function MatDatepickerToggle(_intl, _changeDetectorRef) {
this._intl = _intl;
this._changeDetectorRef = _changeDetectorRef;
this._stateChanges = Subscription.Subscription.EMPTY;
}
Object.defineProperty(MatDatepickerToggle.prototype, "disabled", {
get: /**
* Whether the toggle button is disabled.
* @return {?}
*/ function () {
return this._disabled === undefined ? this.datepicker.disabled : !!this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._disabled = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
MatDatepickerToggle.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes["datepicker"]) {
this._watchStateChanges();
}
};
/**
* @return {?}
*/
MatDatepickerToggle.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._stateChanges.unsubscribe();
};
/**
* @return {?}
*/
MatDatepickerToggle.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._watchStateChanges();
};
/**
* @param {?} event
* @return {?}
*/
MatDatepickerToggle.prototype._open = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.datepicker && !this.disabled) {
this.datepicker.open();
event.stopPropagation();
}
};
/**
* @return {?}
*/
MatDatepickerToggle.prototype._watchStateChanges = /**
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ datepickerDisabled = this.datepicker ? this.datepicker._disabledChange : of.of();
var /** @type {?} */ inputDisabled = this.datepicker && this.datepicker._datepickerInput ?
this.datepicker._datepickerInput._disabledChange : of.of();
var /** @type {?} */ datepickerToggled = this.datepicker ?
merge.merge(this.datepicker.openedStream, this.datepicker.closedStream) :
of.of();
this._stateChanges.unsubscribe();
this._stateChanges = merge.merge(this._intl.changes, datepickerDisabled, inputDisabled, datepickerToggled).subscribe(function () { return _this._changeDetectorRef.markForCheck(); });
};
MatDatepickerToggle.decorators = [
{ type: core.Component, args: [{ selector: 'mat-datepicker-toggle',
template: "<button mat-icon-button type=\"button\" [attr.aria-label]=\"_intl.openCalendarLabel\" [disabled]=\"disabled\" (click)=\"_open($event)\"><svg *ngIf=\"!_customIcon\" class=\"mat-datepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/></svg><ng-content select=\"[matDatepickerToggleIcon]\"></ng-content></button>",
styles: [".mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}"],
host: {
'class': 'mat-datepicker-toggle',
'[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
},
exportAs: 'matDatepickerToggle',
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatDatepickerToggle.ctorParameters = function () {
return [
{ type: MatDatepickerIntl, },
{ type: core.ChangeDetectorRef, },
];
};
MatDatepickerToggle.propDecorators = {
"datepicker": [{ type: core.Input, args: ['for',] },],
"disabled": [{ type: core.Input },],
"_customIcon": [{ type: core.ContentChild, args: [MatDatepickerToggleIcon,] },],
};
return MatDatepickerToggle;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatDivider = (function () {
function MatDivider() {
this._vertical = false;
this._inset = false;
}
Object.defineProperty(MatDivider.prototype, "vertical", {
get: /**
* Whether the divider is vertically aligned.
* @return {?}
*/ function () { return this._vertical; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._vertical = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDivider.prototype, "inset", {
get: /**
* Whether the divider is an inset divider.
* @return {?}
*/ function () { return this._inset; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._inset = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
MatDivider.decorators = [
{ type: core.Component, args: [{ selector: 'mat-divider',
host: {
'role': 'separator',
'[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
'[class.mat-divider-vertical]': 'vertical',
'[class.mat-divider-inset]': 'inset',
'class': 'mat-divider'
},
template: '',
styles: [".mat-divider{display:block;margin:0;border-top-width:1px;border-top-style:solid}.mat-divider.mat-divider-vertical{border-top:0;border-right-width:1px;border-right-style:solid}.mat-divider.mat-divider-inset{margin-left:80px}[dir=rtl] .mat-divider.mat-divider-inset{margin-left:auto;margin-right:80px}"],
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatDivider.ctorParameters = function () { return []; };
MatDivider.propDecorators = {
"vertical": [{ type: core.Input },],
"inset": [{ type: core.Input },],
};
return MatDivider;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Used to generate unique ID for each accordion.
*/
var nextId$1 = 0;
/**
* Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
*/
var CdkAccordion = (function () {
function CdkAccordion() {
/**
* A readonly id value to use for unique selection coordination.
*/
this.id = "cdk-accordion-" + nextId$1++;
this._multi = false;
}
Object.defineProperty(CdkAccordion.prototype, "multi", {
get: /**
* Whether the accordion should allow multiple expanded accordion items simultaneously.
* @return {?}
*/ function () { return this._multi; },
set: /**
* @param {?} multi
* @return {?}
*/ function (multi) { this._multi = coercion.coerceBooleanProperty(multi); },
enumerable: true,
configurable: true
});
CdkAccordion.decorators = [
{ type: core.Directive, args: [{
selector: 'cdk-accordion, [cdkAccordion]',
exportAs: 'cdkAccordion',
},] },
];
/** @nocollapse */
CdkAccordion.ctorParameters = function () { return []; };
CdkAccordion.propDecorators = {
"multi": [{ type: core.Input },],
};
return CdkAccordion;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Used to generate unique ID for each accordion item.
*/
var nextId = 0;
/**
* An basic directive expected to be extended and decorated as a component. Sets up all
* events and attributes needed to be managed by a CdkAccordion parent.
*/
var CdkAccordionItem = (function () {
function CdkAccordionItem(accordion, _changeDetectorRef, _expansionDispatcher) {
var _this = this;
this.accordion = accordion;
this._changeDetectorRef = _changeDetectorRef;
this._expansionDispatcher = _expansionDispatcher;
/**
* Event emitted every time the AccordionItem is closed.
*/
this.closed = new core.EventEmitter();
/**
* Event emitted every time the AccordionItem is opened.
*/
this.opened = new core.EventEmitter();
/**
* Event emitted when the AccordionItem is destroyed.
*/
this.destroyed = new core.EventEmitter();
/**
* Emits whenever the expanded state of the accordion changes.
* Primarily used to facilitate two-way binding.
* \@docs-private
*/
this.expandedChange = new core.EventEmitter();
/**
* The unique AccordionItem id.
*/
this.id = "cdk-accordion-child-" + nextId++;
this._expanded = false;
this._disabled = false;
/**
* Unregister function for _expansionDispatcher.
*/
this._removeUniqueSelectionListener = function () { };
this._removeUniqueSelectionListener =
_expansionDispatcher.listen(function (id, accordionId) {
if (_this.accordion && !_this.accordion.multi &&
_this.accordion.id === accordionId && _this.id !== id) {
_this.expanded = false;
}
});
}
Object.defineProperty(CdkAccordionItem.prototype, "expanded", {
get: /**
* Whether the AccordionItem is expanded.
* @return {?}
*/ function () { return this._expanded; },
set: /**
* @param {?} expanded
* @return {?}
*/ function (expanded) {
expanded = coercion.coerceBooleanProperty(expanded);
// Only emit events and update the internal value if the value changes.
if (this._expanded !== expanded) {
this._expanded = expanded;
this.expandedChange.emit(expanded);
if (expanded) {
this.opened.emit();
/**
* In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,
* the name value is the id of the accordion.
*/
var /** @type {?} */ accordionId = this.accordion ? this.accordion.id : this.id;
this._expansionDispatcher.notify(this.id, accordionId);
}
else {
this.closed.emit();
}
// Ensures that the animation will run when the value is set outside of an `@Input`.
// This includes cases like the open, close and toggle methods.
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkAccordionItem.prototype, "disabled", {
get: /**
* Whether the AccordionItem is disabled.
* @return {?}
*/ function () { return this._disabled; },
set: /**
* @param {?} disabled
* @return {?}
*/ function (disabled) { this._disabled = coercion.coerceBooleanProperty(disabled); },
enumerable: true,
configurable: true
});
/** Emits an event for the accordion item being destroyed. */
/**
* Emits an event for the accordion item being destroyed.
* @return {?}
*/
CdkAccordionItem.prototype.ngOnDestroy = /**
* Emits an event for the accordion item being destroyed.
* @return {?}
*/
function () {
this.destroyed.emit();
this._removeUniqueSelectionListener();
};
/** Toggles the expanded state of the accordion item. */
/**
* Toggles the expanded state of the accordion item.
* @return {?}
*/
CdkAccordionItem.prototype.toggle = /**
* Toggles the expanded state of the accordion item.
* @return {?}
*/
function () {
if (!this.disabled) {
this.expanded = !this.expanded;
}
};
/** Sets the expanded state of the accordion item to false. */
/**
* Sets the expanded state of the accordion item to false.
* @return {?}
*/
CdkAccordionItem.prototype.close = /**
* Sets the expanded state of the accordion item to false.
* @return {?}
*/
function () {
if (!this.disabled) {
this.expanded = false;
}
};
/** Sets the expanded state of the accordion item to true. */
/**
* Sets the expanded state of the accordion item to true.
* @return {?}
*/
CdkAccordionItem.prototype.open = /**
* Sets the expanded state of the accordion item to true.
* @return {?}
*/
function () {
if (!this.disabled) {
this.expanded = true;
}
};
CdkAccordionItem.decorators = [
{ type: core.Directive, args: [{
selector: 'cdk-accordion-item',
exportAs: 'cdkAccordionItem',
},] },
];
/** @nocollapse */
CdkAccordionItem.ctorParameters = function () {
return [
{ type: CdkAccordion, decorators: [{ type: core.Optional },] },
{ type: core.ChangeDetectorRef, },
{ type: collections.UniqueSelectionDispatcher, },
];
};
CdkAccordionItem.propDecorators = {
"closed": [{ type: core.Output },],
"opened": [{ type: core.Output },],
"destroyed": [{ type: core.Output },],
"expandedChange": [{ type: core.Output },],
"expanded": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
};
return CdkAccordionItem;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Directive for a Material Design Accordion.
*/
var MatAccordion = (function (_super) {
__extends(MatAccordion, _super);
function MatAccordion() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._hideToggle = false;
/**
* The display mode used for all expansion panels in the accordion. Currently two display
* modes exist:
* default - a gutter-like spacing is placed around any expanded panel, placing the expanded
* panel at a different elevation from the reset of the accordion.
* flat - no spacing is placed around expanded panels, showing all panels at the same
* elevation.
*/
_this.displayMode = 'default';
return _this;
}
Object.defineProperty(MatAccordion.prototype, "hideToggle", {
get: /**
* Whether the expansion indicator should be hidden.
* @return {?}
*/ function () { return this._hideToggle; },
set: /**
* @param {?} show
* @return {?}
*/ function (show) { this._hideToggle = coercion.coerceBooleanProperty(show); },
enumerable: true,
configurable: true
});
MatAccordion.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-accordion',
exportAs: 'matAccordion',
host: {
class: 'mat-accordion'
}
},] },
];
/** @nocollapse */
MatAccordion.ctorParameters = function () { return []; };
MatAccordion.propDecorators = {
"hideToggle": [{ type: core.Input },],
"displayMode": [{ type: core.Input },],
};
return MatAccordion;
}(CdkAccordion));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Expansion panel content that will be rendered lazily
* after the panel is opened for the first time.
*/
var MatExpansionPanelContent = (function () {
function MatExpansionPanelContent(_template) {
this._template = _template;
}
MatExpansionPanelContent.decorators = [
{ type: core.Directive, args: [{
selector: 'ng-template[matExpansionPanelContent]'
},] },
];
/** @nocollapse */
MatExpansionPanelContent.ctorParameters = function () {
return [
{ type: core.TemplateRef, },
];
};
return MatExpansionPanelContent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Time and timing curve for expansion panel animations.
*/
var EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
/**
* Animations used by the Material expansion panel.
*/
var matExpansionAnimations = {
/** Animation that rotates the indicator arrow. */
indicatorRotate: animations.trigger('indicatorRotate', [
animations.state('collapsed', animations.style({ transform: 'rotate(0deg)' })),
animations.state('expanded', animations.style({ transform: 'rotate(180deg)' })),
animations.transition('expanded <=> collapsed', animations.animate(EXPANSION_PANEL_ANIMATION_TIMING)),
]),
/** Animation that expands and collapses the panel header height. */
expansionHeaderHeight: animations.trigger('expansionHeight', [
animations.state('collapsed', animations.style({
height: '{{collapsedHeight}}',
}), {
params: { collapsedHeight: '48px' },
}),
animations.state('expanded', animations.style({
height: '{{expandedHeight}}'
}), {
params: { expandedHeight: '64px' }
}),
animations.transition('expanded <=> collapsed', animations.animate(EXPANSION_PANEL_ANIMATION_TIMING)),
]),
/** Animation that expands and collapses the panel content. */
bodyExpansion: animations.trigger('bodyExpansion', [
animations.state('collapsed', animations.style({ height: '0px', visibility: 'hidden' })),
animations.state('expanded', animations.style({ height: '*', visibility: 'visible' })),
animations.transition('expanded <=> collapsed', animations.animate(EXPANSION_PANEL_ANIMATION_TIMING)),
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Counter for generating unique element ids.
*/
var uniqueId$1 = 0;
/**
* `<mat-expansion-panel>`
*
* This component can be used as a single element to show expandable content, or as one of
* multiple children of an element with the MdAccordion directive attached.
*/
var MatExpansionPanel = (function (_super) {
__extends(MatExpansionPanel, _super);
function MatExpansionPanel(accordion, _changeDetectorRef, _uniqueSelectionDispatcher, _viewContainerRef) {
var _this = _super.call(this, accordion, _changeDetectorRef, _uniqueSelectionDispatcher) || this;
_this._viewContainerRef = _viewContainerRef;
_this._hideToggle = false;
/**
* Stream that emits for changes in `\@Input` properties.
*/
_this._inputChanges = new Subject.Subject();
/**
* ID for the associated header element. Used for a11y labelling.
*/
_this._headerId = "mat-expansion-panel-header-" + uniqueId$1++;
_this.accordion = accordion;
return _this;
}
Object.defineProperty(MatExpansionPanel.prototype, "hideToggle", {
get: /**
* Whether the toggle indicator should be hidden.
* @return {?}
*/ function () { return this._hideToggle; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._hideToggle = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/** Whether the expansion indicator should be hidden. */
/**
* Whether the expansion indicator should be hidden.
* @return {?}
*/
MatExpansionPanel.prototype._getHideToggle = /**
* Whether the expansion indicator should be hidden.
* @return {?}
*/
function () {
if (this.accordion) {
return this.accordion.hideToggle;
}
return this.hideToggle;
};
/** Determines whether the expansion panel should have spacing between it and its siblings. */
/**
* Determines whether the expansion panel should have spacing between it and its siblings.
* @return {?}
*/
MatExpansionPanel.prototype._hasSpacing = /**
* Determines whether the expansion panel should have spacing between it and its siblings.
* @return {?}
*/
function () {
if (this.accordion) {
return (this.expanded ? this.accordion.displayMode : this._getExpandedState()) === 'default';
}
return false;
};
/** Gets the expanded state string. */
/**
* Gets the expanded state string.
* @return {?}
*/
MatExpansionPanel.prototype._getExpandedState = /**
* Gets the expanded state string.
* @return {?}
*/
function () {
return this.expanded ? 'expanded' : 'collapsed';
};
/**
* @return {?}
*/
MatExpansionPanel.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this._lazyContent) {
// Render the content as soon as the panel becomes open.
this.opened.pipe(startWith_2(/** @type {?} */ ((null))), filter_2(function () { return _this.expanded && !_this._portal; }), take_2(1)).subscribe(function () {
_this._portal = new portal.TemplatePortal(_this._lazyContent._template, _this._viewContainerRef);
});
}
};
/**
* @param {?} changes
* @return {?}
*/
MatExpansionPanel.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
this._inputChanges.next(changes);
};
/**
* @return {?}
*/
MatExpansionPanel.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
_super.prototype.ngOnDestroy.call(this);
this._inputChanges.complete();
};
/**
* @param {?} event
* @return {?}
*/
MatExpansionPanel.prototype._bodyAnimation = /**
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ classList = event.element.classList;
var /** @type {?} */ cssClass = 'mat-expanded';
var phaseName = event.phaseName, toState = event.toState;
// Toggle the body's `overflow: hidden` class when closing starts or when expansion ends in
// order to prevent the cases where switching too early would cause the animation to jump.
// Note that we do it directly on the DOM element to avoid the slight delay that comes
// with doing it via change detection.
if (phaseName === 'done' && toState === 'expanded') {
classList.add(cssClass);
}
else if (phaseName === 'start' && toState === 'collapsed') {
classList.remove(cssClass);
}
};
MatExpansionPanel.decorators = [
{ type: core.Component, args: [{ styles: [".mat-expansion-panel{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);box-sizing:content-box;display:block;margin:0;transition:margin 225ms cubic-bezier(.4,0,.2,1)}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-expansion-panel-content{overflow:hidden}.mat-expansion-panel-content.mat-expanded{overflow:visible}.mat-expansion-panel-body{padding:0 24px 16px}.mat-expansion-panel-spacing{margin:16px 0}.mat-accordion .mat-expansion-panel-spacing:first-child{margin-top:0}.mat-accordion .mat-expansion-panel-spacing:last-child{margin-bottom:0}.mat-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.mat-action-row button.mat-button{margin-left:8px}[dir=rtl] .mat-action-row button.mat-button{margin-left:0;margin-right:8px}"],
selector: 'mat-expansion-panel',
exportAs: 'matExpansionPanel',
template: "<ng-content select=\"mat-expansion-panel-header\"></ng-content><div class=\"mat-expansion-panel-content\" role=\"region\" [@bodyExpansion]=\"_getExpandedState()\" (@bodyExpansion.done)=\"_bodyAnimation($event)\" (@bodyExpansion.start)=\"_bodyAnimation($event)\" [class.mat-expanded]=\"expanded\" [attr.aria-labelledby]=\"_headerId\" [id]=\"id\" #body><div class=\"mat-expansion-panel-body\"><ng-content></ng-content><ng-template [cdkPortalOutlet]=\"_portal\"></ng-template></div><ng-content select=\"mat-action-row\"></ng-content></div>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
inputs: ['disabled', 'expanded'],
outputs: ['opened', 'closed', 'expandedChange'],
animations: [matExpansionAnimations.bodyExpansion],
host: {
'class': 'mat-expansion-panel',
'[class.mat-expanded]': 'expanded',
'[class.mat-expansion-panel-spacing]': '_hasSpacing()',
}
},] },
];
/** @nocollapse */
MatExpansionPanel.ctorParameters = function () {
return [
{ type: MatAccordion, decorators: [{ type: core.Optional }, { type: core.Host },] },
{ type: core.ChangeDetectorRef, },
{ type: collections.UniqueSelectionDispatcher, },
{ type: core.ViewContainerRef, },
];
};
MatExpansionPanel.propDecorators = {
"hideToggle": [{ type: core.Input },],
"_lazyContent": [{ type: core.ContentChild, args: [MatExpansionPanelContent,] },],
};
return MatExpansionPanel;
}(CdkAccordionItem));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* `<mat-expansion-panel-header>`
*
* This component corresponds to the header element of an `<mat-expansion-panel>`.
*/
var MatExpansionPanelHeader = (function () {
function MatExpansionPanelHeader(panel, _element, _focusMonitor, _changeDetectorRef) {
var _this = this;
this.panel = panel;
this._element = _element;
this._focusMonitor = _focusMonitor;
this._changeDetectorRef = _changeDetectorRef;
this._parentChangeSubscription = Subscription.Subscription.EMPTY;
// Since the toggle state depends on an @Input on the panel, we
// need to subscribe and trigger change detection manually.
this._parentChangeSubscription = merge.merge(panel.opened, panel.closed, panel._inputChanges.pipe(filter_2(function (changes) { return !!(changes["hideToggle"] || changes["disabled"]); })))
.subscribe(function () { return _this._changeDetectorRef.markForCheck(); });
_focusMonitor.monitor(_element.nativeElement);
}
/** Toggles the expanded state of the panel. */
/**
* Toggles the expanded state of the panel.
* @return {?}
*/
MatExpansionPanelHeader.prototype._toggle = /**
* Toggles the expanded state of the panel.
* @return {?}
*/
function () {
this.panel.toggle();
};
/** Gets whether the panel is expanded. */
/**
* Gets whether the panel is expanded.
* @return {?}
*/
MatExpansionPanelHeader.prototype._isExpanded = /**
* Gets whether the panel is expanded.
* @return {?}
*/
function () {
return this.panel.expanded;
};
/** Gets the expanded state string of the panel. */
/**
* Gets the expanded state string of the panel.
* @return {?}
*/
MatExpansionPanelHeader.prototype._getExpandedState = /**
* Gets the expanded state string of the panel.
* @return {?}
*/
function () {
return this.panel._getExpandedState();
};
/** Gets the panel id. */
/**
* Gets the panel id.
* @return {?}
*/
MatExpansionPanelHeader.prototype._getPanelId = /**
* Gets the panel id.
* @return {?}
*/
function () {
return this.panel.id;
};
/** Gets whether the expand indicator should be shown. */
/**
* Gets whether the expand indicator should be shown.
* @return {?}
*/
MatExpansionPanelHeader.prototype._showToggle = /**
* Gets whether the expand indicator should be shown.
* @return {?}
*/
function () {
return !this.panel.hideToggle && !this.panel.disabled;
};
/** Handle keydown event calling to toggle() if appropriate. */
/**
* Handle keydown event calling to toggle() if appropriate.
* @param {?} event
* @return {?}
*/
MatExpansionPanelHeader.prototype._keydown = /**
* Handle keydown event calling to toggle() if appropriate.
* @param {?} event
* @return {?}
*/
function (event) {
switch (event.keyCode) {
// Toggle for space and enter keys.
case keycodes.SPACE:
case keycodes.ENTER:
event.preventDefault();
this._toggle();
break;
default:
return;
}
};
/**
* @return {?}
*/
MatExpansionPanelHeader.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._parentChangeSubscription.unsubscribe();
this._focusMonitor.stopMonitoring(this._element.nativeElement);
};
MatExpansionPanelHeader.decorators = [
{ type: core.Component, args: [{ selector: 'mat-expansion-panel-header',
styles: [".mat-expansion-panel-header{display:flex;flex-direction:row;align-items:center;padding:0 24px}.mat-expansion-panel-header:focus,.mat-expansion-panel-header:hover{outline:0}.mat-expansion-panel-header.mat-expanded:focus,.mat-expansion-panel-header.mat-expanded:hover{background:inherit}.mat-expansion-panel-header:not([aria-disabled=true]){cursor:pointer}.mat-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.mat-expansion-panel-header-description,.mat-expansion-panel-header-title{display:flex;flex-grow:1;margin-right:16px}[dir=rtl] .mat-expansion-panel-header-description,[dir=rtl] .mat-expansion-panel-header-title{margin-right:0;margin-left:16px}.mat-expansion-panel-header-description{flex-grow:2}.mat-expansion-indicator::after{border-style:solid;border-width:0 2px 2px 0;content:'';display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}"],
template: "<span class=\"mat-content\"><ng-content select=\"mat-panel-title\"></ng-content><ng-content select=\"mat-panel-description\"></ng-content><ng-content></ng-content></span><span [@indicatorRotate]=\"_getExpandedState()\" *ngIf=\"_showToggle()\" class=\"mat-expansion-indicator\"></span>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
animations: [
matExpansionAnimations.indicatorRotate,
matExpansionAnimations.expansionHeaderHeight
],
host: {
'class': 'mat-expansion-panel-header',
'role': 'button',
'[attr.id]': 'panel._headerId',
'[attr.tabindex]': 'panel.disabled ? -1 : 0',
'[attr.aria-controls]': '_getPanelId()',
'[attr.aria-expanded]': '_isExpanded()',
'[attr.aria-disabled]': 'panel.disabled',
'[class.mat-expanded]': '_isExpanded()',
'(click)': '_toggle()',
'(keydown)': '_keydown($event)',
'[@expansionHeight]': "{\n value: _getExpandedState(),\n params: {\n collapsedHeight: collapsedHeight,\n expandedHeight: expandedHeight\n }\n }",
},
},] },
];
/** @nocollapse */
MatExpansionPanelHeader.ctorParameters = function () {
return [
{ type: MatExpansionPanel, decorators: [{ type: core.Host },] },
{ type: core.ElementRef, },
{ type: a11y.FocusMonitor, },
{ type: core.ChangeDetectorRef, },
];
};
MatExpansionPanelHeader.propDecorators = {
"expandedHeight": [{ type: core.Input },],
"collapsedHeight": [{ type: core.Input },],
};
return MatExpansionPanelHeader;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Converts values into strings. Falsy values become empty strings.
* \@docs-private
* @param {?} value
* @return {?}
*/
function coerceToString(value) {
return "" + (value || '');
}
/**
* Converts a value that might be a string into a number.
* \@docs-private
* @param {?} value
* @return {?}
*/
function coerceToNumber(value) {
return typeof value === 'string' ? parseInt(value, 10) : value;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatGridTile = (function () {
function MatGridTile(_element) {
this._element = _element;
this._rowspan = 1;
this._colspan = 1;
}
Object.defineProperty(MatGridTile.prototype, "rowspan", {
get: /**
* Amount of rows that the grid tile takes up.
* @return {?}
*/ function () { return this._rowspan; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._rowspan = coerceToNumber(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatGridTile.prototype, "colspan", {
get: /**
* Amount of columns that the grid tile takes up.
* @return {?}
*/ function () { return this._colspan; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._colspan = coerceToNumber(value); },
enumerable: true,
configurable: true
});
/**
* Sets the style of the grid-tile element. Needs to be set manually to avoid
* "Changed after checked" errors that would occur with HostBinding.
*/
/**
* Sets the style of the grid-tile element. Needs to be set manually to avoid
* "Changed after checked" errors that would occur with HostBinding.
* @param {?} property
* @param {?} value
* @return {?}
*/
MatGridTile.prototype._setStyle = /**
* Sets the style of the grid-tile element. Needs to be set manually to avoid
* "Changed after checked" errors that would occur with HostBinding.
* @param {?} property
* @param {?} value
* @return {?}
*/
function (property, value) {
this._element.nativeElement.style[property] = value;
};
MatGridTile.decorators = [
{ type: core.Component, args: [{ selector: 'mat-grid-tile',
exportAs: 'matGridTile',
host: {
'class': 'mat-grid-tile',
},
template: "<figure class=\"mat-figure\"><ng-content></ng-content></figure>",
styles: [".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-figure{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}.mat-grid-tile .mat-grid-tile-footer,.mat-grid-tile .mat-grid-tile-header{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-footer>*,.mat-grid-tile .mat-grid-tile-header>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-tile-footer.mat-2-line,.mat-grid-tile .mat-grid-tile-header.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatGridTile.ctorParameters = function () {
return [
{ type: core.ElementRef, },
];
};
MatGridTile.propDecorators = {
"rowspan": [{ type: core.Input },],
"colspan": [{ type: core.Input },],
};
return MatGridTile;
}());
var MatGridTileText = (function () {
function MatGridTileText(_element) {
this._element = _element;
}
/**
* @return {?}
*/
MatGridTileText.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._lineSetter = new MatLineSetter(this._lines, this._element);
};
MatGridTileText.decorators = [
{ type: core.Component, args: [{ selector: 'mat-grid-tile-header, mat-grid-tile-footer',
template: "<ng-content select=\"[mat-grid-avatar], [matGridAvatar]\"></ng-content><div class=\"mat-grid-list-text\"><ng-content select=\"[mat-line], [matLine]\"></ng-content></div><ng-content></ng-content>",
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatGridTileText.ctorParameters = function () {
return [
{ type: core.ElementRef, },
];
};
MatGridTileText.propDecorators = {
"_lines": [{ type: core.ContentChildren, args: [MatLine,] },],
};
return MatGridTileText;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Class for determining, from a list of tiles, the (row, col) position of each of those tiles
* in the grid. This is necessary (rather than just rendering the tiles in normal document flow)
* because the tiles can have a rowspan.
*
* The positioning algorithm greedily places each tile as soon as it encounters a gap in the grid
* large enough to accommodate it so that the tiles still render in the same order in which they
* are given.
*
* The basis of the algorithm is the use of an array to track the already placed tiles. Each
* element of the array corresponds to a column, and the value indicates how many cells in that
* column are already occupied; zero indicates an empty cell. Moving "down" to the next row
* decrements each value in the tracking array (indicating that the column is one cell closer to
* being free).
*
* \@docs-private
*/
var TileCoordinator = (function () {
function TileCoordinator(numColumns, tiles) {
var _this = this;
/**
* Index at which the search for the next gap will start.
*/
this.columnIndex = 0;
/**
* The current row index.
*/
this.rowIndex = 0;
this.tracker = new Array(numColumns);
this.tracker.fill(0, 0, this.tracker.length);
this.positions = tiles.map(function (tile) { return _this._trackTile(tile); });
}
Object.defineProperty(TileCoordinator.prototype, "rowCount", {
/** Gets the total number of rows occupied by tiles */
get: /**
* Gets the total number of rows occupied by tiles
* @return {?}
*/ function () { return this.rowIndex + 1; },
enumerable: true,
configurable: true
});
Object.defineProperty(TileCoordinator.prototype, "rowspan", {
/**
* Gets the total span of rows occupied by tiles.
* Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2.
*/
get: /**
* Gets the total span of rows occupied by tiles.
* Ex: A list with 1 row that contains a tile with rowspan 2 will have a total rowspan of 2.
* @return {?}
*/ function () {
var /** @type {?} */ lastRowMax = Math.max.apply(Math, this.tracker);
// if any of the tiles has a rowspan that pushes it beyond the total row count,
// add the difference to the rowcount
return lastRowMax > 1 ? this.rowCount + lastRowMax - 1 : this.rowCount;
},
enumerable: true,
configurable: true
});
/**
* Calculates the row and col position of a tile.
* @param {?} tile
* @return {?}
*/
TileCoordinator.prototype._trackTile = /**
* Calculates the row and col position of a tile.
* @param {?} tile
* @return {?}
*/
function (tile) {
// Find a gap large enough for this tile.
var /** @type {?} */ gapStartIndex = this._findMatchingGap(tile.colspan);
// Place tile in the resulting gap.
this._markTilePosition(gapStartIndex, tile);
// The next time we look for a gap, the search will start at columnIndex, which should be
// immediately after the tile that has just been placed.
this.columnIndex = gapStartIndex + tile.colspan;
return new TilePosition(this.rowIndex, gapStartIndex);
};
/**
* Finds the next available space large enough to fit the tile.
* @param {?} tileCols
* @return {?}
*/
TileCoordinator.prototype._findMatchingGap = /**
* Finds the next available space large enough to fit the tile.
* @param {?} tileCols
* @return {?}
*/
function (tileCols) {
if (tileCols > this.tracker.length) {
throw Error("mat-grid-list: tile with colspan " + tileCols + " is wider than " +
("grid with cols=\"" + this.tracker.length + "\"."));
}
// Start index is inclusive, end index is exclusive.
var /** @type {?} */ gapStartIndex = -1;
var /** @type {?} */ gapEndIndex = -1;
// Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.
do {
// If we've reached the end of the row, go to the next row.
if (this.columnIndex + tileCols > this.tracker.length) {
this._nextRow();
continue;
}
gapStartIndex = this.tracker.indexOf(0, this.columnIndex);
// If there are no more empty spaces in this row at all, move on to the next row.
if (gapStartIndex == -1) {
this._nextRow();
continue;
}
gapEndIndex = this._findGapEndIndex(gapStartIndex);
// If a gap large enough isn't found, we want to start looking immediately after the current
// gap on the next iteration.
this.columnIndex = gapStartIndex + 1;
// Continue iterating until we find a gap wide enough for this tile.
} while (gapEndIndex - gapStartIndex < tileCols);
// If we still didn't manage to find a gap, ensure that the index is
// at least zero so the tile doesn't get pulled out of the grid.
return Math.max(gapStartIndex, 0);
};
/**
* Move "down" to the next row.
* @return {?}
*/
TileCoordinator.prototype._nextRow = /**
* Move "down" to the next row.
* @return {?}
*/
function () {
this.columnIndex = 0;
this.rowIndex++;
// Decrement all spaces by one to reflect moving down one row.
for (var /** @type {?} */ i = 0; i < this.tracker.length; i++) {
this.tracker[i] = Math.max(0, this.tracker[i] - 1);
}
};
/**
* Finds the end index (exclusive) of a gap given the index from which to start looking.
* The gap ends when a non-zero value is found.
* @param {?} gapStartIndex
* @return {?}
*/
TileCoordinator.prototype._findGapEndIndex = /**
* Finds the end index (exclusive) of a gap given the index from which to start looking.
* The gap ends when a non-zero value is found.
* @param {?} gapStartIndex
* @return {?}
*/
function (gapStartIndex) {
for (var /** @type {?} */ i = gapStartIndex + 1; i < this.tracker.length; i++) {
if (this.tracker[i] != 0) {
return i;
}
}
// The gap ends with the end of the row.
return this.tracker.length;
};
/**
* Update the tile tracker to account for the given tile in the given space.
* @param {?} start
* @param {?} tile
* @return {?}
*/
TileCoordinator.prototype._markTilePosition = /**
* Update the tile tracker to account for the given tile in the given space.
* @param {?} start
* @param {?} tile
* @return {?}
*/
function (start, tile) {
for (var /** @type {?} */ i = 0; i < tile.colspan; i++) {
this.tracker[start + i] = tile.rowspan;
}
};
return TileCoordinator;
}());
/**
* Simple data structure for tile position (row, col).
* \@docs-private
*/
var TilePosition = (function () {
function TilePosition(row, col) {
this.row = row;
this.col = col;
}
return TilePosition;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Sets the style properties for an individual tile, given the position calculated by the
* Tile Coordinator.
* \@docs-private
* @abstract
*/
var TileStyler = (function () {
function TileStyler() {
this._rows = 0;
this._rowspan = 0;
}
/**
* Adds grid-list layout info once it is available. Cannot be processed in the constructor
* because these properties haven't been calculated by that point.
*
* @param gutterSize Size of the grid's gutter.
* @param tracker Instance of the TileCoordinator.
* @param cols Amount of columns in the grid.
* @param direction Layout direction of the grid.
*/
/**
* Adds grid-list layout info once it is available. Cannot be processed in the constructor
* because these properties haven't been calculated by that point.
*
* @param {?} gutterSize Size of the grid's gutter.
* @param {?} tracker Instance of the TileCoordinator.
* @param {?} cols Amount of columns in the grid.
* @param {?} direction Layout direction of the grid.
* @return {?}
*/
TileStyler.prototype.init = /**
* Adds grid-list layout info once it is available. Cannot be processed in the constructor
* because these properties haven't been calculated by that point.
*
* @param {?} gutterSize Size of the grid's gutter.
* @param {?} tracker Instance of the TileCoordinator.
* @param {?} cols Amount of columns in the grid.
* @param {?} direction Layout direction of the grid.
* @return {?}
*/
function (gutterSize, tracker, cols, direction) {
this._gutterSize = normalizeUnits(gutterSize);
this._rows = tracker.rowCount;
this._rowspan = tracker.rowspan;
this._cols = cols;
this._direction = direction;
};
/**
* Computes the amount of space a single 1x1 tile would take up (width or height).
* Used as a basis for other calculations.
* @param sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
* @param gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
* @return The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
*/
/**
* Computes the amount of space a single 1x1 tile would take up (width or height).
* Used as a basis for other calculations.
* @param {?} sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
* @param {?} gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
* @return {?} The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
*/
TileStyler.prototype.getBaseTileSize = /**
* Computes the amount of space a single 1x1 tile would take up (width or height).
* Used as a basis for other calculations.
* @param {?} sizePercent Percent of the total grid-list space that one 1x1 tile would take up.
* @param {?} gutterFraction Fraction of the gutter size taken up by one 1x1 tile.
* @return {?} The size of a 1x1 tile as an expression that can be evaluated via CSS calc().
*/
function (sizePercent, gutterFraction) {
// Take the base size percent (as would be if evenly dividing the size between cells),
// and then subtracting the size of one gutter. However, since there are no gutters on the
// edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
// size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
// edge evenly among the cells).
return "(" + sizePercent + "% - (" + this._gutterSize + " * " + gutterFraction + "))";
};
/**
* Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
* @param offset Number of tiles that have already been rendered in the row/column.
* @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @return Position of the tile as a CSS calc() expression.
*/
/**
* Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
* @param {?} baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @param {?} offset Number of tiles that have already been rendered in the row/column.
* @return {?} Position of the tile as a CSS calc() expression.
*/
TileStyler.prototype.getTilePosition = /**
* Gets The horizontal or vertical position of a tile, e.g., the 'top' or 'left' property value.
* @param {?} baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @param {?} offset Number of tiles that have already been rendered in the row/column.
* @return {?} Position of the tile as a CSS calc() expression.
*/
function (baseSize, offset) {
// The position comes the size of a 1x1 tile plus gutter for each previous tile in the
// row/column (offset).
return offset === 0 ? '0' : calc("(" + baseSize + " + " + this._gutterSize + ") * " + offset);
};
/**
* Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
* @param baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @param span The tile's rowspan or colspan.
* @return Size of the tile as a CSS calc() expression.
*/
/**
* Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
* @param {?} baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @param {?} span The tile's rowspan or colspan.
* @return {?} Size of the tile as a CSS calc() expression.
*/
TileStyler.prototype.getTileSize = /**
* Gets the actual size of a tile, e.g., width or height, taking rowspan or colspan into account.
* @param {?} baseSize Base size of a 1x1 tile (as computed in getBaseTileSize).
* @param {?} span The tile's rowspan or colspan.
* @return {?} Size of the tile as a CSS calc() expression.
*/
function (baseSize, span) {
return "(" + baseSize + " * " + span + ") + (" + (span - 1) + " * " + this._gutterSize + ")";
};
/**
* Sets the style properties to be applied to a tile for the given row and column index.
* @param tile Tile to which to apply the styling.
* @param rowIndex Index of the tile's row.
* @param colIndex Index of the tile's column.
*/
/**
* Sets the style properties to be applied to a tile for the given row and column index.
* @param {?} tile Tile to which to apply the styling.
* @param {?} rowIndex Index of the tile's row.
* @param {?} colIndex Index of the tile's column.
* @return {?}
*/
TileStyler.prototype.setStyle = /**
* Sets the style properties to be applied to a tile for the given row and column index.
* @param {?} tile Tile to which to apply the styling.
* @param {?} rowIndex Index of the tile's row.
* @param {?} colIndex Index of the tile's column.
* @return {?}
*/
function (tile, rowIndex, colIndex) {
// Percent of the available horizontal space that one column takes up.
var /** @type {?} */ percentWidthPerTile = 100 / this._cols;
// Fraction of the vertical gutter size that each column takes up.
// For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
var /** @type {?} */ gutterWidthFractionPerTile = (this._cols - 1) / this._cols;
this.setColStyles(tile, colIndex, percentWidthPerTile, gutterWidthFractionPerTile);
this.setRowStyles(tile, rowIndex, percentWidthPerTile, gutterWidthFractionPerTile);
};
/** Sets the horizontal placement of the tile in the list. */
/**
* Sets the horizontal placement of the tile in the list.
* @param {?} tile
* @param {?} colIndex
* @param {?} percentWidth
* @param {?} gutterWidth
* @return {?}
*/
TileStyler.prototype.setColStyles = /**
* Sets the horizontal placement of the tile in the list.
* @param {?} tile
* @param {?} colIndex
* @param {?} percentWidth
* @param {?} gutterWidth
* @return {?}
*/
function (tile, colIndex, percentWidth, gutterWidth) {
// Base horizontal size of a column.
var /** @type {?} */ baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth);
// The width and horizontal position of each tile is always calculated the same way, but the
// height and vertical position depends on the rowMode.
var /** @type {?} */ side = this._direction === 'ltr' ? 'left' : 'right';
tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
};
/**
* Calculates the total size taken up by gutters across one axis of a list.
*/
/**
* Calculates the total size taken up by gutters across one axis of a list.
* @return {?}
*/
TileStyler.prototype.getGutterSpan = /**
* Calculates the total size taken up by gutters across one axis of a list.
* @return {?}
*/
function () {
return this._gutterSize + " * (" + this._rowspan + " - 1)";
};
/**
* Calculates the total size taken up by tiles across one axis of a list.
* @param tileHeight Height of the tile.
*/
/**
* Calculates the total size taken up by tiles across one axis of a list.
* @param {?} tileHeight Height of the tile.
* @return {?}
*/
TileStyler.prototype.getTileSpan = /**
* Calculates the total size taken up by tiles across one axis of a list.
* @param {?} tileHeight Height of the tile.
* @return {?}
*/
function (tileHeight) {
return this._rowspan + " * " + this.getTileSize(tileHeight, 1);
};
/**
* Calculates the computed height and returns the correct style property to set.
* This method can be implemented by each type of TileStyler.
* @docs-private
*/
/**
* Calculates the computed height and returns the correct style property to set.
* This method can be implemented by each type of TileStyler.
* \@docs-private
* @return {?}
*/
TileStyler.prototype.getComputedHeight = /**
* Calculates the computed height and returns the correct style property to set.
* This method can be implemented by each type of TileStyler.
* \@docs-private
* @return {?}
*/
function () { return null; };
return TileStyler;
}());
/**
* This type of styler is instantiated when the user passes in a fixed row height.
* Example `<mat-grid-list cols="3" rowHeight="100px">`
* \@docs-private
*/
var FixedTileStyler = (function (_super) {
__extends(FixedTileStyler, _super);
function FixedTileStyler(fixedRowHeight) {
var _this = _super.call(this) || this;
_this.fixedRowHeight = fixedRowHeight;
return _this;
}
/**
* @param {?} gutterSize
* @param {?} tracker
* @param {?} cols
* @param {?} direction
* @return {?}
*/
FixedTileStyler.prototype.init = /**
* @param {?} gutterSize
* @param {?} tracker
* @param {?} cols
* @param {?} direction
* @return {?}
*/
function (gutterSize, tracker, cols, direction) {
_super.prototype.init.call(this, gutterSize, tracker, cols, direction);
this.fixedRowHeight = normalizeUnits(this.fixedRowHeight);
};
/**
* @param {?} tile
* @param {?} rowIndex
* @return {?}
*/
FixedTileStyler.prototype.setRowStyles = /**
* @param {?} tile
* @param {?} rowIndex
* @return {?}
*/
function (tile, rowIndex) {
tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex));
tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan)));
};
/**
* @return {?}
*/
FixedTileStyler.prototype.getComputedHeight = /**
* @return {?}
*/
function () {
return [
'height', calc(this.getTileSpan(this.fixedRowHeight) + " + " + this.getGutterSpan())
];
};
/**
* @param {?} list
* @return {?}
*/
FixedTileStyler.prototype.reset = /**
* @param {?} list
* @return {?}
*/
function (list) {
list._setListStyle(['height', null]);
list._tiles.forEach(function (tile) {
tile._setStyle('top', null);
tile._setStyle('height', null);
});
};
return FixedTileStyler;
}(TileStyler));
/**
* This type of styler is instantiated when the user passes in a width:height ratio
* for the row height. Example `<mat-grid-list cols="3" rowHeight="3:1">`
* \@docs-private
*/
var RatioTileStyler = (function (_super) {
__extends(RatioTileStyler, _super);
function RatioTileStyler(value) {
var _this = _super.call(this) || this;
_this._parseRatio(value);
return _this;
}
/**
* @param {?} tile
* @param {?} rowIndex
* @param {?} percentWidth
* @param {?} gutterWidth
* @return {?}
*/
RatioTileStyler.prototype.setRowStyles = /**
* @param {?} tile
* @param {?} rowIndex
* @param {?} percentWidth
* @param {?} gutterWidth
* @return {?}
*/
function (tile, rowIndex, percentWidth, gutterWidth) {
var /** @type {?} */ percentHeightPerTile = percentWidth / this.rowHeightRatio;
this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth);
// Use padding-top and margin-top to maintain the given aspect ratio, as
// a percentage-based value for these properties is applied versus the *width* of the
// containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
tile._setStyle('margin-top', this.getTilePosition(this.baseTileHeight, rowIndex));
tile._setStyle('padding-top', calc(this.getTileSize(this.baseTileHeight, tile.rowspan)));
};
/**
* @return {?}
*/
RatioTileStyler.prototype.getComputedHeight = /**
* @return {?}
*/
function () {
return [
'padding-bottom', calc(this.getTileSpan(this.baseTileHeight) + " + " + this.getGutterSpan())
];
};
/**
* @param {?} list
* @return {?}
*/
RatioTileStyler.prototype.reset = /**
* @param {?} list
* @return {?}
*/
function (list) {
list._setListStyle(['padding-bottom', null]);
list._tiles.forEach(function (tile) {
tile._setStyle('margin-top', null);
tile._setStyle('padding-top', null);
});
};
/**
* @param {?} value
* @return {?}
*/
RatioTileStyler.prototype._parseRatio = /**
* @param {?} value
* @return {?}
*/
function (value) {
var /** @type {?} */ ratioParts = value.split(':');
if (ratioParts.length !== 2) {
throw Error("mat-grid-list: invalid ratio given for row-height: \"" + value + "\"");
}
this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]);
};
return RatioTileStyler;
}(TileStyler));
/**
* This type of styler is instantiated when the user selects a "fit" row height mode.
* In other words, the row height will reflect the total height of the container divided
* by the number of rows. Example `<mat-grid-list cols="3" rowHeight="fit">`
*
* \@docs-private
*/
var FitTileStyler = (function (_super) {
__extends(FitTileStyler, _super);
function FitTileStyler() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* @param {?} tile
* @param {?} rowIndex
* @return {?}
*/
FitTileStyler.prototype.setRowStyles = /**
* @param {?} tile
* @param {?} rowIndex
* @return {?}
*/
function (tile, rowIndex) {
// Percent of the available vertical space that one row takes up.
var /** @type {?} */ percentHeightPerTile = 100 / this._rowspan;
// Fraction of the horizontal gutter size that each column takes up.
var /** @type {?} */ gutterHeightPerTile = (this._rows - 1) / this._rows;
// Base vertical size of a column.
var /** @type {?} */ baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightPerTile);
tile._setStyle('top', this.getTilePosition(baseTileHeight, rowIndex));
tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan)));
};
/**
* @param {?} list
* @return {?}
*/
FitTileStyler.prototype.reset = /**
* @param {?} list
* @return {?}
*/
function (list) {
list._tiles.forEach(function (tile) {
tile._setStyle('top', null);
tile._setStyle('height', null);
});
};
return FitTileStyler;
}(TileStyler));
/**
* Wraps a CSS string in a calc function
* @param {?} exp
* @return {?}
*/
function calc(exp) { return "calc(" + exp + ")"; }
/**
* Appends pixels to a CSS string if no units are given.
* @param {?} value
* @return {?}
*/
function normalizeUnits(value) {
return (value.match(/px|em|rem/)) ? value : value + 'px';
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// TODO(kara): Conditional (responsive) column count / row size.
// TODO(kara): Re-layout on window resize / media change (debounced).
// TODO(kara): gridTileHeader and gridTileFooter.
var MAT_FIT_MODE = 'fit';
var MatGridList = (function () {
function MatGridList(_element, _dir) {
this._element = _element;
this._dir = _dir;
/**
* The amount of space between tiles. This will be something like '5px' or '2em'.
*/
this._gutter = '1px';
}
Object.defineProperty(MatGridList.prototype, "cols", {
get: /**
* Amount of columns in the grid list.
* @return {?}
*/ function () { return this._cols; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._cols = coerceToNumber(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatGridList.prototype, "gutterSize", {
get: /**
* Size of the grid list's gutter in pixels.
* @return {?}
*/ function () { return this._gutter; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._gutter = coerceToString(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatGridList.prototype, "rowHeight", {
set: /**
* Set internal representation of row height from the user-provided value.
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ newValue = coerceToString(value);
if (newValue !== this._rowHeight) {
this._rowHeight = newValue;
this._setTileStyler(this._rowHeight);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatGridList.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._checkCols();
this._checkRowHeight();
};
/**
* The layout calculation is fairly cheap if nothing changes, so there's little cost
* to run it frequently.
*/
/**
* The layout calculation is fairly cheap if nothing changes, so there's little cost
* to run it frequently.
* @return {?}
*/
MatGridList.prototype.ngAfterContentChecked = /**
* The layout calculation is fairly cheap if nothing changes, so there's little cost
* to run it frequently.
* @return {?}
*/
function () {
this._layoutTiles();
};
/**
* Throw a friendly error if cols property is missing
* @return {?}
*/
MatGridList.prototype._checkCols = /**
* Throw a friendly error if cols property is missing
* @return {?}
*/
function () {
if (!this.cols) {
throw Error("mat-grid-list: must pass in number of columns. " +
"Example: <mat-grid-list cols=\"3\">");
}
};
/**
* Default to equal width:height if rowHeight property is missing
* @return {?}
*/
MatGridList.prototype._checkRowHeight = /**
* Default to equal width:height if rowHeight property is missing
* @return {?}
*/
function () {
if (!this._rowHeight) {
this._setTileStyler('1:1');
}
};
/**
* Creates correct Tile Styler subtype based on rowHeight passed in by user
* @param {?} rowHeight
* @return {?}
*/
MatGridList.prototype._setTileStyler = /**
* Creates correct Tile Styler subtype based on rowHeight passed in by user
* @param {?} rowHeight
* @return {?}
*/
function (rowHeight) {
if (this._tileStyler) {
this._tileStyler.reset(this);
}
if (rowHeight === MAT_FIT_MODE) {
this._tileStyler = new FitTileStyler();
}
else if (rowHeight && rowHeight.indexOf(':') > -1) {
this._tileStyler = new RatioTileStyler(rowHeight);
}
else {
this._tileStyler = new FixedTileStyler(rowHeight);
}
};
/**
* Computes and applies the size and position for all children grid tiles.
* @return {?}
*/
MatGridList.prototype._layoutTiles = /**
* Computes and applies the size and position for all children grid tiles.
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ tracker = new TileCoordinator(this.cols, this._tiles);
var /** @type {?} */ direction = this._dir ? this._dir.value : 'ltr';
this._tileStyler.init(this.gutterSize, tracker, this.cols, direction);
this._tiles.forEach(function (tile, index) {
var /** @type {?} */ pos = tracker.positions[index];
_this._tileStyler.setStyle(tile, pos.row, pos.col);
});
this._setListStyle(this._tileStyler.getComputedHeight());
};
/** Sets style on the main grid-list element, given the style name and value. */
/**
* Sets style on the main grid-list element, given the style name and value.
* @param {?} style
* @return {?}
*/
MatGridList.prototype._setListStyle = /**
* Sets style on the main grid-list element, given the style name and value.
* @param {?} style
* @return {?}
*/
function (style$$1) {
if (style$$1) {
this._element.nativeElement.style[style$$1[0]] = style$$1[1];
}
};
MatGridList.decorators = [
{ type: core.Component, args: [{ selector: 'mat-grid-list',
exportAs: 'matGridList',
template: "<div><ng-content></ng-content></div>",
styles: [".mat-grid-list{display:block;position:relative}.mat-grid-tile{display:block;position:absolute;overflow:hidden}.mat-grid-tile .mat-figure{top:0;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;padding:0;margin:0}.mat-grid-tile .mat-grid-tile-footer,.mat-grid-tile .mat-grid-tile-header{display:flex;align-items:center;height:48px;color:#fff;background:rgba(0,0,0,.38);overflow:hidden;padding:0 16px;position:absolute;left:0;right:0}.mat-grid-tile .mat-grid-tile-footer>*,.mat-grid-tile .mat-grid-tile-header>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-tile-footer.mat-2-line,.mat-grid-tile .mat-grid-tile-header.mat-2-line{height:68px}.mat-grid-tile .mat-grid-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden}.mat-grid-tile .mat-grid-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-grid-tile .mat-grid-list-text:empty{display:none}.mat-grid-tile .mat-grid-tile-header{top:0}.mat-grid-tile .mat-grid-tile-footer{bottom:0}.mat-grid-tile .mat-grid-avatar{padding-right:16px}[dir=rtl] .mat-grid-tile .mat-grid-avatar{padding-right:0;padding-left:16px}.mat-grid-tile .mat-grid-avatar:empty{display:none}"],
host: {
'class': 'mat-grid-list',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatGridList.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
];
};
MatGridList.propDecorators = {
"_tiles": [{ type: core.ContentChildren, args: [MatGridTile,] },],
"cols": [{ type: core.Input },],
"gutterSize": [{ type: core.Input },],
"rowHeight": [{ type: core.Input },],
};
return MatGridList;
}());
var __extends$26 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Catches errors on the observable to be handled by returning a new observable or throwing an error.
*
* <img src="./img/catch.png" width="100%">
*
* @example <caption>Continues with a different Observable when there's an error</caption>
*
* Observable.of(1, 2, 3, 4, 5)
* .map(n => {
* if (n == 4) {
* throw 'four!';
* }
* return n;
* })
* .catch(err => Observable.of('I', 'II', 'III', 'IV', 'V'))
* .subscribe(x => console.log(x));
* // 1, 2, 3, I, II, III, IV, V
*
* @example <caption>Retries the caught source Observable again in case of error, similar to retry() operator</caption>
*
* Observable.of(1, 2, 3, 4, 5)
* .map(n => {
* if (n === 4) {
* throw 'four!';
* }
* return n;
* })
* .catch((err, caught) => caught)
* .take(30)
* .subscribe(x => console.log(x));
* // 1, 2, 3, 1, 2, 3, ...
*
* @example <caption>Throws a new error when the source Observable throws an error</caption>
*
* Observable.of(1, 2, 3, 4, 5)
* .map(n => {
* if (n == 4) {
* throw 'four!';
* }
* return n;
* })
* .catch(err => {
* throw 'error in source. Details: ' + err;
* })
* .subscribe(
* x => console.log(x),
* err => console.log(err)
* );
* // 1, 2, 3, error in source. Details: four!
*
* @param {function} selector a function that takes as arguments `err`, which is the error, and `caught`, which
* is the source observable, in case you'd like to "retry" that observable by returning it again. Whatever observable
* is returned by the `selector` will be used to continue the observable chain.
* @return {Observable} An observable that originates from either the source or the observable returned by the
* catch `selector` function.
* @name catchError
*/
function catchError(selector) {
return function catchErrorOperatorFunction(source) {
var operator = new CatchOperator(selector);
var caught = source.lift(operator);
return (operator.caught = caught);
};
}
var catchError_2 = catchError;
var CatchOperator = (function () {
function CatchOperator(selector) {
this.selector = selector;
}
CatchOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new CatchSubscriber(subscriber, this.selector, this.caught));
};
return CatchOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var CatchSubscriber = (function (_super) {
__extends$26(CatchSubscriber, _super);
function CatchSubscriber(destination, selector, caught) {
_super.call(this, destination);
this.selector = selector;
this.caught = caught;
}
// NOTE: overriding `error` instead of `_error` because we don't want
// to have this flag this subscriber as `isStopped`. We can mimic the
// behavior of the RetrySubscriber (from the `retry` operator), where
// we unsubscribe from our source chain, reset our Subscriber flags,
// then subscribe to the selector result.
CatchSubscriber.prototype.error = function (err) {
if (!this.isStopped) {
var result = void 0;
try {
result = this.selector(err, this.caught);
}
catch (err2) {
_super.prototype.error.call(this, err2);
return;
}
this._unsubscribeAndRecycle();
this.add(subscribeToResult_1.subscribeToResult(this, result));
}
};
return CatchSubscriber;
}(OuterSubscriber_1.OuterSubscriber));
var __extends$27 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Returns an Observable that mirrors the source Observable, but will call a specified function when
* the source terminates on complete or error.
* @param {function} callback Function to be called when source terminates.
* @return {Observable} An Observable that mirrors the source, but will call the specified function on termination.
* @method finally
* @owner Observable
*/
function finalize(callback) {
return function (source) { return source.lift(new FinallyOperator(callback)); };
}
var finalize_2 = finalize;
var FinallyOperator = (function () {
function FinallyOperator(callback) {
this.callback = callback;
}
FinallyOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new FinallySubscriber(subscriber, this.callback));
};
return FinallyOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var FinallySubscriber = (function (_super) {
__extends$27(FinallySubscriber, _super);
function FinallySubscriber(destination, callback) {
_super.call(this, destination);
this.add(new Subscription_1.Subscription(callback));
}
return FinallySubscriber;
}(Subscriber_1.Subscriber));
var __extends$28 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Applies a given `project` function to each value emitted by the source
* Observable, and emits the resulting values as an Observable.
*
* <span class="informal">Like [Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map),
* it passes each source value through a transformation function to get
* corresponding output values.</span>
*
* <img src="./img/map.png" width="100%">
*
* Similar to the well known `Array.prototype.map` function, this operator
* applies a projection to each value and emits that projection in the output
* Observable.
*
* @example <caption>Map every click to the clientX position of that click</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var positions = clicks.map(ev => ev.clientX);
* positions.subscribe(x => console.log(x));
*
* @see {@link mapTo}
* @see {@link pluck}
*
* @param {function(value: T, index: number): R} project The function to apply
* to each `value` emitted by the source Observable. The `index` parameter is
* the number `i` for the i-th emission that has happened since the
* subscription, starting from the number `0`.
* @param {any} [thisArg] An optional argument to define what `this` is in the
* `project` function.
* @return {Observable<R>} An Observable that emits the values from the source
* Observable transformed by the given `project` function.
* @method map
* @owner Observable
*/
function map(project, thisArg) {
return function mapOperation(source) {
if (typeof project !== 'function') {
throw new TypeError('argument is not a function. Are you looking for `mapTo()`?');
}
return source.lift(new MapOperator(project, thisArg));
};
}
var map_2 = map;
var MapOperator = (function () {
function MapOperator(project, thisArg) {
this.project = project;
this.thisArg = thisArg;
}
MapOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new MapSubscriber(subscriber, this.project, this.thisArg));
};
return MapOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var MapSubscriber = (function (_super) {
__extends$28(MapSubscriber, _super);
function MapSubscriber(destination, project, thisArg) {
_super.call(this, destination);
this.project = project;
this.count = 0;
this.thisArg = thisArg || this;
}
// NOTE: This looks unoptimized, but it's actually purposefully NOT
// using try/catch optimizations.
MapSubscriber.prototype._next = function (value) {
var result;
try {
result = this.project.call(this.thisArg, value, this.count++);
}
catch (err) {
this.destination.error(err);
return;
}
this.destination.next(result);
};
return MapSubscriber;
}(Subscriber_1.Subscriber));
var __extends$31 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* An error thrown when an action is invalid because the object has been
* unsubscribed.
*
* @see {@link Subject}
* @see {@link BehaviorSubject}
*
* @class ObjectUnsubscribedError
*/
var ObjectUnsubscribedError = (function (_super) {
__extends$31(ObjectUnsubscribedError, _super);
function ObjectUnsubscribedError() {
var err = _super.call(this, 'object unsubscribed');
this.name = err.name = 'ObjectUnsubscribedError';
this.stack = err.stack;
this.message = err.message;
}
return ObjectUnsubscribedError;
}(Error));
var ObjectUnsubscribedError_2 = ObjectUnsubscribedError;
var ObjectUnsubscribedError_1 = {
ObjectUnsubscribedError: ObjectUnsubscribedError_2
};
var __extends$32 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var SubjectSubscription = (function (_super) {
__extends$32(SubjectSubscription, _super);
function SubjectSubscription(subject, subscriber) {
_super.call(this);
this.subject = subject;
this.subscriber = subscriber;
this.closed = false;
}
SubjectSubscription.prototype.unsubscribe = function () {
if (this.closed) {
return;
}
this.closed = true;
var subject = this.subject;
var observers$$1 = subject.observers;
this.subject = null;
if (!observers$$1 || observers$$1.length === 0 || subject.isStopped || subject.closed) {
return;
}
var subscriberIndex = observers$$1.indexOf(this.subscriber);
if (subscriberIndex !== -1) {
observers$$1.splice(subscriberIndex, 1);
}
};
return SubjectSubscription;
}(Subscription_1.Subscription));
var SubjectSubscription_2 = SubjectSubscription;
var SubjectSubscription_1 = {
SubjectSubscription: SubjectSubscription_2
};
var __extends$30 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* @class SubjectSubscriber<T>
*/
var SubjectSubscriber = (function (_super) {
__extends$30(SubjectSubscriber, _super);
function SubjectSubscriber(destination) {
_super.call(this, destination);
this.destination = destination;
}
return SubjectSubscriber;
}(Subscriber_1.Subscriber));
var SubjectSubscriber_1 = SubjectSubscriber;
/**
* @class Subject<T>
*/
var Subject$2 = (function (_super) {
__extends$30(Subject$$1, _super);
function Subject$$1() {
_super.call(this);
this.observers = [];
this.closed = false;
this.isStopped = false;
this.hasError = false;
this.thrownError = null;
}
Subject$$1.prototype[rxSubscriber.rxSubscriber] = function () {
return new SubjectSubscriber(this);
};
Subject$$1.prototype.lift = function (operator) {
var subject = new AnonymousSubject(this, this);
subject.operator = operator;
return subject;
};
Subject$$1.prototype.next = function (value) {
if (this.closed) {
throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError();
}
if (!this.isStopped) {
var observers$$1 = this.observers;
var len = observers$$1.length;
var copy = observers$$1.slice();
for (var i = 0; i < len; i++) {
copy[i].next(value);
}
}
};
Subject$$1.prototype.error = function (err) {
if (this.closed) {
throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError();
}
this.hasError = true;
this.thrownError = err;
this.isStopped = true;
var observers$$1 = this.observers;
var len = observers$$1.length;
var copy = observers$$1.slice();
for (var i = 0; i < len; i++) {
copy[i].error(err);
}
this.observers.length = 0;
};
Subject$$1.prototype.complete = function () {
if (this.closed) {
throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError();
}
this.isStopped = true;
var observers$$1 = this.observers;
var len = observers$$1.length;
var copy = observers$$1.slice();
for (var i = 0; i < len; i++) {
copy[i].complete();
}
this.observers.length = 0;
};
Subject$$1.prototype.unsubscribe = function () {
this.isStopped = true;
this.closed = true;
this.observers = null;
};
Subject$$1.prototype._trySubscribe = function (subscriber) {
if (this.closed) {
throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError();
}
else {
return _super.prototype._trySubscribe.call(this, subscriber);
}
};
Subject$$1.prototype._subscribe = function (subscriber) {
if (this.closed) {
throw new ObjectUnsubscribedError_1.ObjectUnsubscribedError();
}
else if (this.hasError) {
subscriber.error(this.thrownError);
return Subscription_1.Subscription.EMPTY;
}
else if (this.isStopped) {
subscriber.complete();
return Subscription_1.Subscription.EMPTY;
}
else {
this.observers.push(subscriber);
return new SubjectSubscription_1.SubjectSubscription(this, subscriber);
}
};
Subject$$1.prototype.asObservable = function () {
var observable = new Observable_1.Observable();
observable.source = this;
return observable;
};
Subject$$1.create = function (destination, source) {
return new AnonymousSubject(destination, source);
};
return Subject$$1;
}(Observable_1.Observable));
var Subject_2 = Subject$2;
/**
* @class AnonymousSubject<T>
*/
var AnonymousSubject = (function (_super) {
__extends$30(AnonymousSubject, _super);
function AnonymousSubject(destination, source) {
_super.call(this);
this.destination = destination;
this.source = source;
}
AnonymousSubject.prototype.next = function (value) {
var destination = this.destination;
if (destination && destination.next) {
destination.next(value);
}
};
AnonymousSubject.prototype.error = function (err) {
var destination = this.destination;
if (destination && destination.error) {
this.destination.error(err);
}
};
AnonymousSubject.prototype.complete = function () {
var destination = this.destination;
if (destination && destination.complete) {
this.destination.complete();
}
};
AnonymousSubject.prototype._subscribe = function (subscriber) {
var source = this.source;
if (source) {
return this.source.subscribe(subscriber);
}
else {
return Subscription_1.Subscription.EMPTY;
}
};
return AnonymousSubject;
}(Subject$2));
var AnonymousSubject_1 = AnonymousSubject;
var Subject_1 = {
SubjectSubscriber: SubjectSubscriber_1,
Subject: Subject_2,
AnonymousSubject: AnonymousSubject_1
};
var __extends$33 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
function refCount() {
return function refCountOperatorFunction(source) {
return source.lift(new RefCountOperator$1(source));
};
}
var refCount_2 = refCount;
var RefCountOperator$1 = (function () {
function RefCountOperator(connectable) {
this.connectable = connectable;
}
RefCountOperator.prototype.call = function (subscriber, source) {
var connectable = this.connectable;
connectable._refCount++;
var refCounter = new RefCountSubscriber$1(subscriber, connectable);
var subscription = source.subscribe(refCounter);
if (!refCounter.closed) {
refCounter.connection = connectable.connect();
}
return subscription;
};
return RefCountOperator;
}());
var RefCountSubscriber$1 = (function (_super) {
__extends$33(RefCountSubscriber, _super);
function RefCountSubscriber(destination, connectable) {
_super.call(this, destination);
this.connectable = connectable;
}
RefCountSubscriber.prototype._unsubscribe = function () {
var connectable = this.connectable;
if (!connectable) {
this.connection = null;
return;
}
this.connectable = null;
var refCount = connectable._refCount;
if (refCount <= 0) {
this.connection = null;
return;
}
connectable._refCount = refCount - 1;
if (refCount > 1) {
this.connection = null;
return;
}
///
// Compare the local RefCountSubscriber's connection Subscription to the
// connection Subscription on the shared ConnectableObservable. In cases
// where the ConnectableObservable source synchronously emits values, and
// the RefCountSubscriber's downstream Observers synchronously unsubscribe,
// execution continues to here before the RefCountOperator has a chance to
// supply the RefCountSubscriber with the shared connection Subscription.
// For example:
// ```
// Observable.range(0, 10)
// .publish()
// .refCount()
// .take(5)
// .subscribe();
// ```
// In order to account for this case, RefCountSubscriber should only dispose
// the ConnectableObservable's shared connection Subscription if the
// connection Subscription exists, *and* either:
// a. RefCountSubscriber doesn't have a reference to the shared connection
// Subscription yet, or,
// b. RefCountSubscriber's connection Subscription reference is identical
// to the shared connection Subscription
///
var connection = this.connection;
var sharedConnection = connectable._connection;
this.connection = null;
if (sharedConnection && (!connection || sharedConnection === connection)) {
sharedConnection.unsubscribe();
}
};
return RefCountSubscriber;
}(Subscriber_1.Subscriber));
var refCount_1 = {
refCount: refCount_2
};
var __extends$29 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* @class ConnectableObservable<T>
*/
var ConnectableObservable = (function (_super) {
__extends$29(ConnectableObservable, _super);
function ConnectableObservable(source, subjectFactory) {
_super.call(this);
this.source = source;
this.subjectFactory = subjectFactory;
this._refCount = 0;
this._isComplete = false;
}
ConnectableObservable.prototype._subscribe = function (subscriber) {
return this.getSubject().subscribe(subscriber);
};
ConnectableObservable.prototype.getSubject = function () {
var subject = this._subject;
if (!subject || subject.isStopped) {
this._subject = this.subjectFactory();
}
return this._subject;
};
ConnectableObservable.prototype.connect = function () {
var connection = this._connection;
if (!connection) {
this._isComplete = false;
connection = this._connection = new Subscription_1.Subscription();
connection.add(this.source
.subscribe(new ConnectableSubscriber(this.getSubject(), this)));
if (connection.closed) {
this._connection = null;
connection = Subscription_1.Subscription.EMPTY;
}
else {
this._connection = connection;
}
}
return connection;
};
ConnectableObservable.prototype.refCount = function () {
return refCount_1.refCount()(this);
};
return ConnectableObservable;
}(Observable_1.Observable));
var ConnectableObservable_2 = ConnectableObservable;
var connectableProto = ConnectableObservable.prototype;
var connectableObservableDescriptor = {
operator: { value: null },
_refCount: { value: 0, writable: true },
_subject: { value: null, writable: true },
_connection: { value: null, writable: true },
_subscribe: { value: connectableProto._subscribe },
_isComplete: { value: connectableProto._isComplete, writable: true },
getSubject: { value: connectableProto.getSubject },
connect: { value: connectableProto.connect },
refCount: { value: connectableProto.refCount }
};
var ConnectableSubscriber = (function (_super) {
__extends$29(ConnectableSubscriber, _super);
function ConnectableSubscriber(destination, connectable) {
_super.call(this, destination);
this.connectable = connectable;
}
ConnectableSubscriber.prototype._error = function (err) {
this._unsubscribe();
_super.prototype._error.call(this, err);
};
ConnectableSubscriber.prototype._complete = function () {
this.connectable._isComplete = true;
this._unsubscribe();
_super.prototype._complete.call(this);
};
ConnectableSubscriber.prototype._unsubscribe = function () {
var connectable = this.connectable;
if (connectable) {
this.connectable = null;
var connection = connectable._connection;
connectable._refCount = 0;
connectable._subject = null;
connectable._connection = null;
if (connection) {
connection.unsubscribe();
}
}
};
return ConnectableSubscriber;
}(Subject_1.SubjectSubscriber));
var RefCountSubscriber = (function (_super) {
__extends$29(RefCountSubscriber, _super);
function RefCountSubscriber(destination, connectable) {
_super.call(this, destination);
this.connectable = connectable;
}
RefCountSubscriber.prototype._unsubscribe = function () {
var connectable = this.connectable;
if (!connectable) {
this.connection = null;
return;
}
this.connectable = null;
var refCount = connectable._refCount;
if (refCount <= 0) {
this.connection = null;
return;
}
connectable._refCount = refCount - 1;
if (refCount > 1) {
this.connection = null;
return;
}
///
// Compare the local RefCountSubscriber's connection Subscription to the
// connection Subscription on the shared ConnectableObservable. In cases
// where the ConnectableObservable source synchronously emits values, and
// the RefCountSubscriber's downstream Observers synchronously unsubscribe,
// execution continues to here before the RefCountOperator has a chance to
// supply the RefCountSubscriber with the shared connection Subscription.
// For example:
// ```
// Observable.range(0, 10)
// .publish()
// .refCount()
// .take(5)
// .subscribe();
// ```
// In order to account for this case, RefCountSubscriber should only dispose
// the ConnectableObservable's shared connection Subscription if the
// connection Subscription exists, *and* either:
// a. RefCountSubscriber doesn't have a reference to the shared connection
// Subscription yet, or,
// b. RefCountSubscriber's connection Subscription reference is identical
// to the shared connection Subscription
///
var connection = this.connection;
var sharedConnection = connectable._connection;
this.connection = null;
if (sharedConnection && (!connection || sharedConnection === connection)) {
sharedConnection.unsubscribe();
}
};
return RefCountSubscriber;
}(Subscriber_1.Subscriber));
var ConnectableObservable_1 = {
ConnectableObservable: ConnectableObservable_2,
connectableObservableDescriptor: connectableObservableDescriptor
};
/* tslint:enable:max-line-length */
/**
* Returns an Observable that emits the results of invoking a specified selector on items
* emitted by a ConnectableObservable that shares a single subscription to the underlying stream.
*
* <img src="./img/multicast.png" width="100%">
*
* @param {Function|Subject} subjectOrSubjectFactory - Factory function to create an intermediate subject through
* which the source sequence's elements will be multicast to the selector function
* or Subject to push source elements into.
* @param {Function} [selector] - Optional selector function that can use the multicasted source stream
* as many times as needed, without causing multiple subscriptions to the source stream.
* Subscribers to the given source will receive all notifications of the source from the
* time of the subscription forward.
* @return {Observable} An Observable that emits the results of invoking the selector
* on the items emitted by a `ConnectableObservable` that shares a single subscription to
* the underlying stream.
* @method multicast
* @owner Observable
*/
function multicast(subjectOrSubjectFactory, selector) {
return function multicastOperatorFunction(source) {
var subjectFactory;
if (typeof subjectOrSubjectFactory === 'function') {
subjectFactory = subjectOrSubjectFactory;
}
else {
subjectFactory = function subjectFactory() {
return subjectOrSubjectFactory;
};
}
if (typeof selector === 'function') {
return source.lift(new MulticastOperator(subjectFactory, selector));
}
var connectable = Object.create(source, ConnectableObservable_1.connectableObservableDescriptor);
connectable.source = source;
connectable.subjectFactory = subjectFactory;
return connectable;
};
}
var multicast_2 = multicast;
var MulticastOperator = (function () {
function MulticastOperator(subjectFactory, selector) {
this.subjectFactory = subjectFactory;
this.selector = selector;
}
MulticastOperator.prototype.call = function (subscriber, source) {
var selector = this.selector;
var subject = this.subjectFactory();
var subscription = selector(subject).subscribe(subscriber);
subscription.add(source.subscribe(subject));
return subscription;
};
return MulticastOperator;
}());
var MulticastOperator_1 = MulticastOperator;
var multicast_1 = {
multicast: multicast_2,
MulticastOperator: MulticastOperator_1
};
function shareSubjectFactory() {
return new Subject_1.Subject();
}
/**
* Returns a new Observable that multicasts (shares) the original Observable. As long as there is at least one
* Subscriber this Observable will be subscribed and emitting data. When all subscribers have unsubscribed it will
* unsubscribe from the source Observable. Because the Observable is multicasting it makes the stream `hot`.
* This is an alias for .multicast(() => new Subject()).refCount().
*
* <img src="./img/share.png" width="100%">
*
* @return {Observable<T>} An Observable that upon connection causes the source Observable to emit items to its Observers.
* @method share
* @owner Observable
*/
function share() {
return function (source) { return refCount_1.refCount()(multicast_1.multicast(shareSubjectFactory)(source)); };
}
var share_2 = share;
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Returns an exception to be thrown in the case when attempting to
* load an icon with a name that cannot be found.
* \@docs-private
* @param {?} iconName
* @return {?}
*/
function getMatIconNameNotFoundError(iconName) {
return Error("Unable to find icon with the name \"" + iconName + "\"");
}
/**
* Returns an exception to be thrown when the consumer attempts to use
* `<mat-icon>` without including \@angular/http.
* \@docs-private
* @return {?}
*/
function getMatIconNoHttpProviderError() {
return Error('Could not find HttpClient provider for use with Angular Material icons. ' +
'Please include the HttpClientModule from @angular/common/http in your ' +
'app imports.');
}
/**
* Returns an exception to be thrown when a URL couldn't be sanitized.
* \@docs-private
* @param {?} url URL that was attempted to be sanitized.
* @return {?}
*/
function getMatIconFailedToSanitizeError(url) {
return Error("The URL provided to MatIconRegistry was not trusted as a resource URL " +
("via Angular's DomSanitizer. Attempted URL was \"" + url + "\"."));
}
/**
* Configuration for an icon, including the URL and possibly the cached SVG element.
* \@docs-private
*/
var SvgIconConfig = (function () {
function SvgIconConfig(url) {
this.url = url;
this.svgElement = null;
}
return SvgIconConfig;
}());
/**
* Service to register and display icons used by the `<mat-icon>` component.
* - Registers icon URLs by namespace and name.
* - Registers icon set URLs by namespace.
* - Registers aliases for CSS classes, for use with icon fonts.
* - Loads icons from URLs and extracts individual icons from icon sets.
*/
var MatIconRegistry = (function () {
function MatIconRegistry(_httpClient, _sanitizer, document) {
this._httpClient = _httpClient;
this._sanitizer = _sanitizer;
/**
* URLs and cached SVG elements for individual icons. Keys are of the format "[namespace]:[icon]".
*/
this._svgIconConfigs = new Map();
/**
* SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace.
* Multiple icon sets can be registered under the same namespace.
*/
this._iconSetConfigs = new Map();
/**
* Cache for icons loaded by direct URLs.
*/
this._cachedIconsByUrl = new Map();
/**
* In-progress icon fetches. Used to coalesce multiple requests to the same URL.
*/
this._inProgressUrlFetches = new Map();
/**
* Map from font identifiers to their CSS class names. Used for icon fonts.
*/
this._fontCssClassesByAlias = new Map();
/**
* The CSS class to apply when an `<mat-icon>` component has no icon name, url, or font specified.
* The default 'material-icons' value assumes that the material icon font has been loaded as
* described at http://google.github.io/material-design-icons/#icon-font-for-the-web
*/
this._defaultFontSetClass = 'material-icons';
// TODO(crisbeto): make _document required next major release.
this._document = document;
}
/**
* Registers an icon by URL in the default namespace.
* @param iconName Name under which the icon should be registered.
* @param url
*/
/**
* Registers an icon by URL in the default namespace.
* @param {?} iconName Name under which the icon should be registered.
* @param {?} url
* @return {?}
*/
MatIconRegistry.prototype.addSvgIcon = /**
* Registers an icon by URL in the default namespace.
* @param {?} iconName Name under which the icon should be registered.
* @param {?} url
* @return {?}
*/
function (iconName, url) {
return this.addSvgIconInNamespace('', iconName, url);
};
/**
* Registers an icon by URL in the specified namespace.
* @param namespace Namespace in which the icon should be registered.
* @param iconName Name under which the icon should be registered.
* @param url
*/
/**
* Registers an icon by URL in the specified namespace.
* @param {?} namespace Namespace in which the icon should be registered.
* @param {?} iconName Name under which the icon should be registered.
* @param {?} url
* @return {?}
*/
MatIconRegistry.prototype.addSvgIconInNamespace = /**
* Registers an icon by URL in the specified namespace.
* @param {?} namespace Namespace in which the icon should be registered.
* @param {?} iconName Name under which the icon should be registered.
* @param {?} url
* @return {?}
*/
function (namespace, iconName, url) {
var /** @type {?} */ key = iconKey(namespace, iconName);
this._svgIconConfigs.set(key, new SvgIconConfig(url));
return this;
};
/**
* Registers an icon set by URL in the default namespace.
* @param url
*/
/**
* Registers an icon set by URL in the default namespace.
* @param {?} url
* @return {?}
*/
MatIconRegistry.prototype.addSvgIconSet = /**
* Registers an icon set by URL in the default namespace.
* @param {?} url
* @return {?}
*/
function (url) {
return this.addSvgIconSetInNamespace('', url);
};
/**
* Registers an icon set by URL in the specified namespace.
* @param namespace Namespace in which to register the icon set.
* @param url
*/
/**
* Registers an icon set by URL in the specified namespace.
* @param {?} namespace Namespace in which to register the icon set.
* @param {?} url
* @return {?}
*/
MatIconRegistry.prototype.addSvgIconSetInNamespace = /**
* Registers an icon set by URL in the specified namespace.
* @param {?} namespace Namespace in which to register the icon set.
* @param {?} url
* @return {?}
*/
function (namespace, url) {
var /** @type {?} */ config = new SvgIconConfig(url);
var /** @type {?} */ configNamespace = this._iconSetConfigs.get(namespace);
if (configNamespace) {
configNamespace.push(config);
}
else {
this._iconSetConfigs.set(namespace, [config]);
}
return this;
};
/**
* Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon
* component with the alias as the fontSet input will cause the class name to be applied
* to the `<mat-icon>` element.
*
* @param alias Alias for the font.
* @param className Class name override to be used instead of the alias.
*/
/**
* Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon
* component with the alias as the fontSet input will cause the class name to be applied
* to the `<mat-icon>` element.
*
* @param {?} alias Alias for the font.
* @param {?=} className Class name override to be used instead of the alias.
* @return {?}
*/
MatIconRegistry.prototype.registerFontClassAlias = /**
* Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon
* component with the alias as the fontSet input will cause the class name to be applied
* to the `<mat-icon>` element.
*
* @param {?} alias Alias for the font.
* @param {?=} className Class name override to be used instead of the alias.
* @return {?}
*/
function (alias, className) {
if (className === void 0) {
className = alias;
}
this._fontCssClassesByAlias.set(alias, className);
return this;
};
/**
* Returns the CSS class name associated with the alias by a previous call to
* registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.
*/
/**
* Returns the CSS class name associated with the alias by a previous call to
* registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.
* @param {?} alias
* @return {?}
*/
MatIconRegistry.prototype.classNameForFontAlias = /**
* Returns the CSS class name associated with the alias by a previous call to
* registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.
* @param {?} alias
* @return {?}
*/
function (alias) {
return this._fontCssClassesByAlias.get(alias) || alias;
};
/**
* Sets the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
* have a fontSet input value, and is not loading an icon by name or URL.
*
* @param className
*/
/**
* Sets the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
* have a fontSet input value, and is not loading an icon by name or URL.
*
* @param {?} className
* @return {?}
*/
MatIconRegistry.prototype.setDefaultFontSetClass = /**
* Sets the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
* have a fontSet input value, and is not loading an icon by name or URL.
*
* @param {?} className
* @return {?}
*/
function (className) {
this._defaultFontSetClass = className;
return this;
};
/**
* Returns the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
* have a fontSet input value, and is not loading an icon by name or URL.
*/
/**
* Returns the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
* have a fontSet input value, and is not loading an icon by name or URL.
* @return {?}
*/
MatIconRegistry.prototype.getDefaultFontSetClass = /**
* Returns the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
* have a fontSet input value, and is not loading an icon by name or URL.
* @return {?}
*/
function () {
return this._defaultFontSetClass;
};
/**
* Returns an Observable that produces the icon (as an `<svg>` DOM element) from the given URL.
* The response from the URL may be cached so this will not always cause an HTTP request, but
* the produced element will always be a new copy of the originally fetched icon. (That is,
* it will not contain any modifications made to elements previously returned).
*
* @param safeUrl URL from which to fetch the SVG icon.
*/
/**
* Returns an Observable that produces the icon (as an `<svg>` DOM element) from the given URL.
* The response from the URL may be cached so this will not always cause an HTTP request, but
* the produced element will always be a new copy of the originally fetched icon. (That is,
* it will not contain any modifications made to elements previously returned).
*
* @param {?} safeUrl URL from which to fetch the SVG icon.
* @return {?}
*/
MatIconRegistry.prototype.getSvgIconFromUrl = /**
* Returns an Observable that produces the icon (as an `<svg>` DOM element) from the given URL.
* The response from the URL may be cached so this will not always cause an HTTP request, but
* the produced element will always be a new copy of the originally fetched icon. (That is,
* it will not contain any modifications made to elements previously returned).
*
* @param {?} safeUrl URL from which to fetch the SVG icon.
* @return {?}
*/
function (safeUrl) {
var _this = this;
var /** @type {?} */ url = this._sanitizer.sanitize(core.SecurityContext.RESOURCE_URL, safeUrl);
if (!url) {
throw getMatIconFailedToSanitizeError(safeUrl);
}
var /** @type {?} */ cachedIcon = this._cachedIconsByUrl.get(url);
if (cachedIcon) {
return of.of(cloneSvg(cachedIcon));
}
return this._loadSvgIconFromConfig(new SvgIconConfig(safeUrl)).pipe(tap_2(function (svg) { return _this._cachedIconsByUrl.set(/** @type {?} */ ((url)), svg); }), map_2(function (svg) { return cloneSvg(svg); }));
};
/**
* Returns an Observable that produces the icon (as an `<svg>` DOM element) with the given name
* and namespace. The icon must have been previously registered with addIcon or addIconSet;
* if not, the Observable will throw an error.
*
* @param name Name of the icon to be retrieved.
* @param namespace Namespace in which to look for the icon.
*/
/**
* Returns an Observable that produces the icon (as an `<svg>` DOM element) with the given name
* and namespace. The icon must have been previously registered with addIcon or addIconSet;
* if not, the Observable will throw an error.
*
* @param {?} name Name of the icon to be retrieved.
* @param {?=} namespace Namespace in which to look for the icon.
* @return {?}
*/
MatIconRegistry.prototype.getNamedSvgIcon = /**
* Returns an Observable that produces the icon (as an `<svg>` DOM element) with the given name
* and namespace. The icon must have been previously registered with addIcon or addIconSet;
* if not, the Observable will throw an error.
*
* @param {?} name Name of the icon to be retrieved.
* @param {?=} namespace Namespace in which to look for the icon.
* @return {?}
*/
function (name, namespace) {
if (namespace === void 0) {
namespace = '';
}
// Return (copy of) cached icon if possible.
var /** @type {?} */ key = iconKey(namespace, name);
var /** @type {?} */ config = this._svgIconConfigs.get(key);
if (config) {
return this._getSvgFromConfig(config);
}
// See if we have any icon sets registered for the namespace.
var /** @type {?} */ iconSetConfigs = this._iconSetConfigs.get(namespace);
if (iconSetConfigs) {
return this._getSvgFromIconSetConfigs(name, iconSetConfigs);
}
return _throw._throw(getMatIconNameNotFoundError(key));
};
/**
* Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not.
* @param {?} config
* @return {?}
*/
MatIconRegistry.prototype._getSvgFromConfig = /**
* Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not.
* @param {?} config
* @return {?}
*/
function (config) {
if (config.svgElement) {
// We already have the SVG element for this icon, return a copy.
return of.of(cloneSvg(config.svgElement));
}
else {
// Fetch the icon from the config's URL, cache it, and return a copy.
return this._loadSvgIconFromConfig(config).pipe(tap_2(function (svg) { return config.svgElement = svg; }), map_2(function (svg) { return cloneSvg(svg); }));
}
};
/**
* Attempts to find an icon with the specified name in any of the SVG icon sets.
* First searches the available cached icons for a nested element with a matching name, and
* if found copies the element to a new `<svg>` element. If not found, fetches all icon sets
* that have not been cached, and searches again after all fetches are completed.
* The returned Observable produces the SVG element if possible, and throws
* an error if no icon with the specified name can be found.
* @param {?} name
* @param {?} iconSetConfigs
* @return {?}
*/
MatIconRegistry.prototype._getSvgFromIconSetConfigs = /**
* Attempts to find an icon with the specified name in any of the SVG icon sets.
* First searches the available cached icons for a nested element with a matching name, and
* if found copies the element to a new `<svg>` element. If not found, fetches all icon sets
* that have not been cached, and searches again after all fetches are completed.
* The returned Observable produces the SVG element if possible, and throws
* an error if no icon with the specified name can be found.
* @param {?} name
* @param {?} iconSetConfigs
* @return {?}
*/
function (name, iconSetConfigs) {
var _this = this;
// For all the icon set SVG elements we've fetched, see if any contain an icon with the
// requested name.
var /** @type {?} */ namedIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);
if (namedIcon) {
// We could cache namedIcon in _svgIconConfigs, but since we have to make a copy every
// time anyway, there's probably not much advantage compared to just always extracting
// it from the icon set.
return of.of(namedIcon);
}
// Not found in any cached icon sets. If there are icon sets with URLs that we haven't
// fetched, fetch them now and look for iconName in the results.
var /** @type {?} */ iconSetFetchRequests = iconSetConfigs
.filter(function (iconSetConfig) { return !iconSetConfig.svgElement; })
.map(function (iconSetConfig) {
return _this._loadSvgIconSetFromConfig(iconSetConfig).pipe(catchError_2(function (err) {
var /** @type {?} */ url = _this._sanitizer.sanitize(core.SecurityContext.RESOURCE_URL, iconSetConfig.url);
// Swallow errors fetching individual URLs so the combined Observable won't
// necessarily fail.
console.log("Loading icon set URL: " + url + " failed: " + err);
return of.of(null);
}));
});
// Fetch all the icon set URLs. When the requests complete, every IconSet should have a
// cached SVG element (unless the request failed), and we can check again for the icon.
return forkJoin.forkJoin(iconSetFetchRequests).pipe(map_2(function () {
var /** @type {?} */ foundIcon = _this._extractIconWithNameFromAnySet(name, iconSetConfigs);
if (!foundIcon) {
throw getMatIconNameNotFoundError(name);
}
return foundIcon;
}));
};
/**
* Searches the cached SVG elements for the given icon sets for a nested icon element whose "id"
* tag matches the specified name. If found, copies the nested element to a new SVG element and
* returns it. Returns null if no matching element is found.
* @param {?} iconName
* @param {?} iconSetConfigs
* @return {?}
*/
MatIconRegistry.prototype._extractIconWithNameFromAnySet = /**
* Searches the cached SVG elements for the given icon sets for a nested icon element whose "id"
* tag matches the specified name. If found, copies the nested element to a new SVG element and
* returns it. Returns null if no matching element is found.
* @param {?} iconName
* @param {?} iconSetConfigs
* @return {?}
*/
function (iconName, iconSetConfigs) {
// Iterate backwards, so icon sets added later have precedence.
for (var /** @type {?} */ i = iconSetConfigs.length - 1; i >= 0; i--) {
var /** @type {?} */ config = iconSetConfigs[i];
if (config.svgElement) {
var /** @type {?} */ foundIcon = this._extractSvgIconFromSet(config.svgElement, iconName);
if (foundIcon) {
return foundIcon;
}
}
}
return null;
};
/**
* Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element
* from it.
* @param {?} config
* @return {?}
*/
MatIconRegistry.prototype._loadSvgIconFromConfig = /**
* Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element
* from it.
* @param {?} config
* @return {?}
*/
function (config) {
var _this = this;
return this._fetchUrl(config.url)
.pipe(map_2(function (svgText) { return _this._createSvgElementForSingleIcon(svgText); }));
};
/**
* Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element
* from it.
* @param {?} config
* @return {?}
*/
MatIconRegistry.prototype._loadSvgIconSetFromConfig = /**
* Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element
* from it.
* @param {?} config
* @return {?}
*/
function (config) {
var _this = this;
// If the SVG for this icon set has already been parsed, do nothing.
if (config.svgElement) {
return of.of(config.svgElement);
}
return this._fetchUrl(config.url).pipe(map_2(function (svgText) {
// It is possible that the icon set was parsed and cached by an earlier request, so parsing
// only needs to occur if the cache is yet unset.
if (!config.svgElement) {
config.svgElement = _this._svgElementFromString(svgText);
}
return config.svgElement;
}));
};
/**
* Creates a DOM element from the given SVG string, and adds default attributes.
* @param {?} responseText
* @return {?}
*/
MatIconRegistry.prototype._createSvgElementForSingleIcon = /**
* Creates a DOM element from the given SVG string, and adds default attributes.
* @param {?} responseText
* @return {?}
*/
function (responseText) {
var /** @type {?} */ svg = this._svgElementFromString(responseText);
this._setSvgAttributes(svg);
return svg;
};
/**
* Searches the cached element of the given SvgIconConfig for a nested icon element whose "id"
* tag matches the specified name. If found, copies the nested element to a new SVG element and
* returns it. Returns null if no matching element is found.
* @param {?} iconSet
* @param {?} iconName
* @return {?}
*/
MatIconRegistry.prototype._extractSvgIconFromSet = /**
* Searches the cached element of the given SvgIconConfig for a nested icon element whose "id"
* tag matches the specified name. If found, copies the nested element to a new SVG element and
* returns it. Returns null if no matching element is found.
* @param {?} iconSet
* @param {?} iconName
* @return {?}
*/
function (iconSet, iconName) {
var /** @type {?} */ iconSource = iconSet.querySelector('#' + iconName);
if (!iconSource) {
return null;
}
// Clone the element and remove the ID to prevent multiple elements from being added
// to the page with the same ID.
var /** @type {?} */ iconElement = (iconSource.cloneNode(true));
iconElement.id = '';
// If the icon node is itself an <svg> node, clone and return it directly. If not, set it as
// the content of a new <svg> node.
if (iconElement.nodeName.toLowerCase() === 'svg') {
return this._setSvgAttributes(/** @type {?} */ (iconElement));
}
// If the node is a <symbol>, it won't be rendered so we have to convert it into <svg>. Note
// that the same could be achieved by referring to it via <use href="#id">, however the <use>
// tag is problematic on Firefox, because it needs to include the current page path.
if (iconElement.nodeName.toLowerCase() === 'symbol') {
return this._setSvgAttributes(this._toSvgElement(iconElement));
}
// createElement('SVG') doesn't work as expected; the DOM ends up with
// the correct nodes, but the SVG content doesn't render. Instead we
// have to create an empty SVG node using innerHTML and append its content.
// Elements created using DOMParser.parseFromString have the same problem.
// http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display
var /** @type {?} */ svg = this._svgElementFromString('<svg></svg>');
// Clone the node so we don't remove it from the parent icon set element.
svg.appendChild(iconElement);
return this._setSvgAttributes(svg);
};
/**
* Creates a DOM element from the given SVG string.
* @param {?} str
* @return {?}
*/
MatIconRegistry.prototype._svgElementFromString = /**
* Creates a DOM element from the given SVG string.
* @param {?} str
* @return {?}
*/
function (str) {
if (this._document || typeof document !== 'undefined') {
var /** @type {?} */ div = (this._document || document).createElement('DIV');
div.innerHTML = str;
var /** @type {?} */ svg = (div.querySelector('svg'));
if (!svg) {
throw Error('<svg> tag not found');
}
return svg;
}
throw new Error('MatIconRegistry could not resolve document.');
};
/**
* Converts an element into an SVG node by cloning all of its children.
* @param {?} element
* @return {?}
*/
MatIconRegistry.prototype._toSvgElement = /**
* Converts an element into an SVG node by cloning all of its children.
* @param {?} element
* @return {?}
*/
function (element) {
var /** @type {?} */ svg = this._svgElementFromString('<svg></svg>');
for (var /** @type {?} */ i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeType === this._document.ELEMENT_NODE) {
svg.appendChild(element.childNodes[i].cloneNode(true));
}
}
return svg;
};
/**
* Sets the default attributes for an SVG element to be used as an icon.
* @param {?} svg
* @return {?}
*/
MatIconRegistry.prototype._setSvgAttributes = /**
* Sets the default attributes for an SVG element to be used as an icon.
* @param {?} svg
* @return {?}
*/
function (svg) {
if (!svg.getAttribute('xmlns')) {
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
}
svg.setAttribute('fit', '');
svg.setAttribute('height', '100%');
svg.setAttribute('width', '100%');
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.
return svg;
};
/**
* Returns an Observable which produces the string contents of the given URL. Results may be
* cached, so future calls with the same URL may not cause another HTTP request.
* @param {?} safeUrl
* @return {?}
*/
MatIconRegistry.prototype._fetchUrl = /**
* Returns an Observable which produces the string contents of the given URL. Results may be
* cached, so future calls with the same URL may not cause another HTTP request.
* @param {?} safeUrl
* @return {?}
*/
function (safeUrl) {
var _this = this;
if (!this._httpClient) {
throw getMatIconNoHttpProviderError();
}
var /** @type {?} */ url = this._sanitizer.sanitize(core.SecurityContext.RESOURCE_URL, safeUrl);
if (!url) {
throw getMatIconFailedToSanitizeError(safeUrl);
}
// Store in-progress fetches to avoid sending a duplicate request for a URL when there is
// already a request in progress for that URL. It's necessary to call share() on the
// Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.
var /** @type {?} */ inProgressFetch = this._inProgressUrlFetches.get(url);
if (inProgressFetch) {
return inProgressFetch;
}
// TODO(jelbourn): for some reason, the `finally` operator "loses" the generic type on the
// Observable. Figure out why and fix it.
var /** @type {?} */ req = this._httpClient.get(url, { responseType: 'text' }).pipe(finalize_2(function () { return _this._inProgressUrlFetches.delete(url); }), share_2());
this._inProgressUrlFetches.set(url, req);
return req;
};
MatIconRegistry.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatIconRegistry.ctorParameters = function () {
return [
{ type: http.HttpClient, decorators: [{ type: core.Optional },] },
{ type: platformBrowser.DomSanitizer, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
return MatIconRegistry;
}());
/**
* \@docs-private
* @param {?} parentRegistry
* @param {?} httpClient
* @param {?} sanitizer
* @param {?=} document
* @return {?}
*/
function ICON_REGISTRY_PROVIDER_FACTORY(parentRegistry, httpClient, sanitizer, document) {
return parentRegistry || new MatIconRegistry(httpClient, sanitizer, document);
}
/**
* \@docs-private
*/
var ICON_REGISTRY_PROVIDER = {
// If there is already an MatIconRegistry available, use that. Otherwise, provide a new one.
provide: MatIconRegistry,
deps: [
[new core.Optional(), new core.SkipSelf(), MatIconRegistry],
[new core.Optional(), http.HttpClient],
platformBrowser.DomSanitizer,
[new core.Optional(), /** @type {?} */ (common.DOCUMENT)],
],
useFactory: ICON_REGISTRY_PROVIDER_FACTORY,
};
/**
* Clones an SVGElement while preserving type information.
* @param {?} svg
* @return {?}
*/
function cloneSvg(svg) {
return /** @type {?} */ (svg.cloneNode(true));
}
/**
* Returns the cache key to use for an icon namespace and name.
* @param {?} namespace
* @param {?} name
* @return {?}
*/
function iconKey(namespace, name) {
return namespace + ':' + name;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatIconBase = (function () {
function MatIconBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatIconBase;
}());
var _MatIconMixinBase = mixinColor(MatIconBase);
/**
* Component to display an icon. It can be used in the following ways:
*
* - Specify the svgIcon input to load an SVG icon from a URL previously registered with the
* addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of
* MatIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format
* "[namespace]:[name]", if not the value will be the name of an icon in the default namespace.
* Examples:
* `<mat-icon svgIcon="left-arrow"></mat-icon>
* <mat-icon svgIcon="animals:cat"></mat-icon>`
*
* - Use a font ligature as an icon by putting the ligature text in the content of the `<mat-icon>`
* component. By default the Material icons font is used as described at
* http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an
* alternate font by setting the fontSet input to either the CSS class to apply to use the
* desired font, or to an alias previously registered with MatIconRegistry.registerFontClassAlias.
* Examples:
* `<mat-icon>home</mat-icon>
* <mat-icon fontSet="myfont">sun</mat-icon>`
*
* - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
* font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a
* CSS class which causes the glyph to be displayed via a :before selector, as in
* https://fortawesome.github.io/Font-Awesome/examples/
* Example:
* `<mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>`
*/
var MatIcon = (function (_super) {
__extends(MatIcon, _super);
function MatIcon(elementRef, _iconRegistry, ariaHidden) {
var _this = _super.call(this, elementRef) || this;
_this._iconRegistry = _iconRegistry;
// If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is
// the right thing to do for the majority of icon use-cases.
if (!ariaHidden) {
elementRef.nativeElement.setAttribute('aria-hidden', 'true');
}
return _this;
}
Object.defineProperty(MatIcon.prototype, "fontSet", {
get: /**
* Font set that the icon is a part of.
* @return {?}
*/ function () { return this._fontSet; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._fontSet = this._cleanupFontValue(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatIcon.prototype, "fontIcon", {
get: /**
* Name of an icon within a font set.
* @return {?}
*/ function () { return this._fontIcon; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._fontIcon = this._cleanupFontValue(value);
},
enumerable: true,
configurable: true
});
/**
* Splits an svgIcon binding value into its icon set and icon name components.
* Returns a 2-element array of [(icon set), (icon name)].
* The separator for the two fields is ':'. If there is no separator, an empty
* string is returned for the icon set and the entire value is returned for
* the icon name. If the argument is falsy, returns an array of two empty strings.
* Throws an error if the name contains two or more ':' separators.
* Examples:
* `'social:cake' -> ['social', 'cake']
* 'penguin' -> ['', 'penguin']
* null -> ['', '']
* 'a:b:c' -> (throws Error)`
* @param {?} iconName
* @return {?}
*/
MatIcon.prototype._splitIconName = /**
* Splits an svgIcon binding value into its icon set and icon name components.
* Returns a 2-element array of [(icon set), (icon name)].
* The separator for the two fields is ':'. If there is no separator, an empty
* string is returned for the icon set and the entire value is returned for
* the icon name. If the argument is falsy, returns an array of two empty strings.
* Throws an error if the name contains two or more ':' separators.
* Examples:
* `'social:cake' -> ['social', 'cake']
* 'penguin' -> ['', 'penguin']
* null -> ['', '']
* 'a:b:c' -> (throws Error)`
* @param {?} iconName
* @return {?}
*/
function (iconName) {
if (!iconName) {
return ['', ''];
}
var /** @type {?} */ parts = iconName.split(':');
switch (parts.length) {
case 1: return ['', parts[0]]; // Use default namespace.
case 2: return /** @type {?} */ (parts);
default: throw Error("Invalid icon name: \"" + iconName + "\"");
}
};
/**
* @param {?} changes
* @return {?}
*/
MatIcon.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
// Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.
if (changes["svgIcon"]) {
if (this.svgIcon) {
var _a = this._splitIconName(this.svgIcon), namespace = _a[0], iconName = _a[1];
this._iconRegistry.getNamedSvgIcon(iconName, namespace).pipe(take_2(1)).subscribe(function (svg) { return _this._setSvgElement(svg); }, function (err) { return console.log("Error retrieving icon: " + err.message); });
}
else {
this._clearSvgElement();
}
}
if (this._usingFontIcon()) {
this._updateFontIconClasses();
}
};
/**
* @return {?}
*/
MatIcon.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// Update font classes because ngOnChanges won't be called if none of the inputs are present,
// e.g. <mat-icon>arrow</mat-icon> In this case we need to add a CSS class for the default font.
if (this._usingFontIcon()) {
this._updateFontIconClasses();
}
};
/**
* @return {?}
*/
MatIcon.prototype._usingFontIcon = /**
* @return {?}
*/
function () {
return !this.svgIcon;
};
/**
* @param {?} svg
* @return {?}
*/
MatIcon.prototype._setSvgElement = /**
* @param {?} svg
* @return {?}
*/
function (svg) {
this._clearSvgElement();
this._elementRef.nativeElement.appendChild(svg);
};
/**
* @return {?}
*/
MatIcon.prototype._clearSvgElement = /**
* @return {?}
*/
function () {
var /** @type {?} */ layoutElement = this._elementRef.nativeElement;
var /** @type {?} */ childCount = layoutElement.childNodes.length;
// Remove existing child nodes and add the new SVG element. Note that we can't
// use innerHTML, because IE will throw if the element has a data binding.
for (var /** @type {?} */ i = 0; i < childCount; i++) {
layoutElement.removeChild(layoutElement.childNodes[i]);
}
};
/**
* @return {?}
*/
MatIcon.prototype._updateFontIconClasses = /**
* @return {?}
*/
function () {
if (!this._usingFontIcon()) {
return;
}
var /** @type {?} */ elem = this._elementRef.nativeElement;
var /** @type {?} */ fontSetClass = this.fontSet ?
this._iconRegistry.classNameForFontAlias(this.fontSet) :
this._iconRegistry.getDefaultFontSetClass();
if (fontSetClass != this._previousFontSetClass) {
if (this._previousFontSetClass) {
elem.classList.remove(this._previousFontSetClass);
}
if (fontSetClass) {
elem.classList.add(fontSetClass);
}
this._previousFontSetClass = fontSetClass;
}
if (this.fontIcon != this._previousFontIconClass) {
if (this._previousFontIconClass) {
elem.classList.remove(this._previousFontIconClass);
}
if (this.fontIcon) {
elem.classList.add(this.fontIcon);
}
this._previousFontIconClass = this.fontIcon;
}
};
/**
* Cleans up a value to be used as a fontIcon or fontSet.
* Since the value ends up being assigned as a CSS class, we
* have to trim the value and omit space-separated values.
* @param {?} value
* @return {?}
*/
MatIcon.prototype._cleanupFontValue = /**
* Cleans up a value to be used as a fontIcon or fontSet.
* Since the value ends up being assigned as a CSS class, we
* have to trim the value and omit space-separated values.
* @param {?} value
* @return {?}
*/
function (value) {
return typeof value === 'string' ? value.trim().split(' ')[0] : value;
};
MatIcon.decorators = [
{ type: core.Component, args: [{ template: '<ng-content></ng-content>',
selector: 'mat-icon',
exportAs: 'matIcon',
styles: [".mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}"],
inputs: ['color'],
host: {
'role': 'img',
'class': 'mat-icon',
},
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatIcon.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: MatIconRegistry, },
{ type: undefined, decorators: [{ type: core.Attribute, args: ['aria-hidden',] },] },
];
};
MatIcon.propDecorators = {
"svgIcon": [{ type: core.Input },],
"fontSet": [{ type: core.Input },],
"fontIcon": [{ type: core.Input },],
};
return MatIcon;
}(_MatIconMixinBase));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatListBase = (function () {
function MatListBase() {
}
return MatListBase;
}());
var _MatListMixinBase = mixinDisableRipple(MatListBase);
/**
* \@docs-private
*/
var MatListItemBase = (function () {
function MatListItemBase() {
}
return MatListItemBase;
}());
var _MatListItemMixinBase = mixinDisableRipple(MatListItemBase);
var MatNavList = (function (_super) {
__extends(MatNavList, _super);
function MatNavList() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatNavList.decorators = [
{ type: core.Component, args: [{ selector: 'mat-nav-list',
exportAs: 'matNavList',
host: {
'role': 'navigation',
'class': 'mat-nav-list'
},
template: "<ng-content></ng-content>",
styles: [".mat-divider{display:block;margin:0;border-top-width:1px;border-top-style:solid}.mat-divider.mat-divider-vertical{border-top:0;border-right-width:1px;border-right-style:solid}.mat-divider.mat-divider-inset{margin-left:80px}[dir=rtl] .mat-divider.mat-divider-inset{margin-left:auto;margin-right:80px}.mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{margin:0}.mat-list,.mat-nav-list,.mat-selection-list{padding-top:8px;display:block}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{height:48px;line-height:16px}.mat-list .mat-subheader:first-child,.mat-nav-list .mat-subheader:first-child,.mat-selection-list .mat-subheader:first-child{margin-top:-8px}.mat-list .mat-list-item,.mat-list .mat-list-option,.mat-nav-list .mat-list-item,.mat-nav-list .mat-list-option,.mat-selection-list .mat-list-item,.mat-selection-list .mat-list-option{display:block;height:48px}.mat-list .mat-list-item .mat-list-item-content,.mat-list .mat-list-option .mat-list-item-content,.mat-nav-list .mat-list-item .mat-list-item-content,.mat-nav-list .mat-list-option .mat-list-item-content,.mat-selection-list .mat-list-item .mat-list-item-content,.mat-selection-list .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list .mat-list-item .mat-list-item-content-reverse,.mat-list .mat-list-option .mat-list-item-content-reverse,.mat-nav-list .mat-list-item .mat-list-item-content-reverse,.mat-nav-list .mat-list-option .mat-list-item-content-reverse,.mat-selection-list .mat-list-item .mat-list-item-content-reverse,.mat-selection-list .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list .mat-list-item .mat-list-item-ripple,.mat-list .mat-list-option .mat-list-item-ripple,.mat-nav-list .mat-list-item .mat-list-item-ripple,.mat-nav-list .mat-list-option .mat-list-item-ripple,.mat-selection-list .mat-list-item .mat-list-item-ripple,.mat-selection-list .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list .mat-list-item.mat-list-item-avatar,.mat-list .mat-list-option.mat-list-item-avatar,.mat-nav-list .mat-list-item.mat-list-item-avatar,.mat-nav-list .mat-list-option.mat-list-item-avatar,.mat-selection-list .mat-list-item.mat-list-item-avatar,.mat-selection-list .mat-list-option.mat-list-item-avatar{height:56px}.mat-list .mat-list-item.mat-2-line,.mat-list .mat-list-option.mat-2-line,.mat-nav-list .mat-list-item.mat-2-line,.mat-nav-list .mat-list-option.mat-2-line,.mat-selection-list .mat-list-item.mat-2-line,.mat-selection-list .mat-list-option.mat-2-line{height:72px}.mat-list .mat-list-item.mat-3-line,.mat-list .mat-list-option.mat-3-line,.mat-nav-list .mat-list-item.mat-3-line,.mat-nav-list .mat-list-option.mat-3-line,.mat-selection-list .mat-list-item.mat-3-line,.mat-selection-list .mat-list-option.mat-3-line{height:88px}.mat-list .mat-list-item.mat-multi-line,.mat-list .mat-list-option.mat-multi-line,.mat-nav-list .mat-list-item.mat-multi-line,.mat-nav-list .mat-list-option.mat-multi-line,.mat-selection-list .mat-list-item.mat-multi-line,.mat-selection-list .mat-list-option.mat-multi-line{height:auto}.mat-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list .mat-list-option.mat-multi-line .mat-list-item-content,.mat-nav-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-nav-list .mat-list-option.mat-multi-line .mat-list-item-content,.mat-selection-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-selection-list .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list .mat-list-item .mat-list-text,.mat-list .mat-list-option .mat-list-text,.mat-nav-list .mat-list-item .mat-list-text,.mat-nav-list .mat-list-option .mat-list-text,.mat-selection-list .mat-list-item .mat-list-text,.mat-selection-list .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list .mat-list-item .mat-list-text>*,.mat-list .mat-list-option .mat-list-text>*,.mat-nav-list .mat-list-item .mat-list-text>*,.mat-nav-list .mat-list-option .mat-list-text>*,.mat-selection-list .mat-list-item .mat-list-text>*,.mat-selection-list .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list .mat-list-item .mat-list-text:empty,.mat-list .mat-list-option .mat-list-text:empty,.mat-nav-list .mat-list-item .mat-list-text:empty,.mat-nav-list .mat-list-option .mat-list-text:empty,.mat-selection-list .mat-list-item .mat-list-text:empty,.mat-selection-list .mat-list-option .mat-list-text:empty{display:none}.mat-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}[dir=rtl] .mat-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:16px;padding-left:0}.mat-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-left:0;padding-right:16px}[dir=rtl] .mat-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}.mat-list .mat-list-item .mat-list-avatar,.mat-list .mat-list-option .mat-list-avatar,.mat-nav-list .mat-list-item .mat-list-avatar,.mat-nav-list .mat-list-option .mat-list-avatar,.mat-selection-list .mat-list-item .mat-list-avatar,.mat-selection-list .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%}.mat-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-nav-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-nav-list .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-selection-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-selection-list .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list .mat-list-item .mat-list-icon,.mat-list .mat-list-option .mat-list-icon,.mat-nav-list .mat-list-item .mat-list-icon,.mat-nav-list .mat-list-option .mat-list-icon,.mat-selection-list .mat-list-item .mat-list-icon,.mat-selection-list .mat-list-option .mat-list-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-nav-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-nav-list .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-selection-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-selection-list .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list .mat-list-item .mat-divider,.mat-list .mat-list-option .mat-divider,.mat-nav-list .mat-list-item .mat-divider,.mat-nav-list .mat-list-option .mat-divider,.mat-selection-list .mat-list-item .mat-divider,.mat-selection-list .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list .mat-list-item .mat-divider,[dir=rtl] .mat-list .mat-list-option .mat-divider,[dir=rtl] .mat-nav-list .mat-list-item .mat-divider,[dir=rtl] .mat-nav-list .mat-list-option .mat-divider,[dir=rtl] .mat-selection-list .mat-list-item .mat-divider,[dir=rtl] .mat-selection-list .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list .mat-list-item .mat-divider.mat-divider-inset,.mat-list .mat-list-option .mat-divider.mat-divider-inset,.mat-nav-list .mat-list-item .mat-divider.mat-divider-inset,.mat-nav-list .mat-list-option .mat-divider.mat-divider-inset,.mat-selection-list .mat-list-item .mat-divider.mat-divider-inset,.mat-selection-list .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list[dense],.mat-nav-list[dense],.mat-selection-list[dense]{padding-top:4px;display:block}.mat-list[dense] .mat-subheader,.mat-nav-list[dense] .mat-subheader,.mat-selection-list[dense] .mat-subheader{height:40px;line-height:8px}.mat-list[dense] .mat-subheader:first-child,.mat-nav-list[dense] .mat-subheader:first-child,.mat-selection-list[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list[dense] .mat-list-item,.mat-list[dense] .mat-list-option,.mat-nav-list[dense] .mat-list-item,.mat-nav-list[dense] .mat-list-option,.mat-selection-list[dense] .mat-list-item,.mat-selection-list[dense] .mat-list-option{display:block;height:40px}.mat-list[dense] .mat-list-item .mat-list-item-content,.mat-list[dense] .mat-list-option .mat-list-item-content,.mat-nav-list[dense] .mat-list-item .mat-list-item-content,.mat-nav-list[dense] .mat-list-option .mat-list-item-content,.mat-selection-list[dense] .mat-list-item .mat-list-item-content,.mat-selection-list[dense] .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list[dense] .mat-list-option .mat-list-item-content-reverse,.mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse,.mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list[dense] .mat-list-item .mat-list-item-ripple,.mat-list[dense] .mat-list-option .mat-list-item-ripple,.mat-nav-list[dense] .mat-list-item .mat-list-item-ripple,.mat-nav-list[dense] .mat-list-option .mat-list-item-ripple,.mat-selection-list[dense] .mat-list-item .mat-list-item-ripple,.mat-selection-list[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list[dense] .mat-list-item.mat-list-item-avatar,.mat-list[dense] .mat-list-option.mat-list-item-avatar,.mat-nav-list[dense] .mat-list-item.mat-list-item-avatar,.mat-nav-list[dense] .mat-list-option.mat-list-item-avatar,.mat-selection-list[dense] .mat-list-item.mat-list-item-avatar,.mat-selection-list[dense] .mat-list-option.mat-list-item-avatar{height:48px}.mat-list[dense] .mat-list-item.mat-2-line,.mat-list[dense] .mat-list-option.mat-2-line,.mat-nav-list[dense] .mat-list-item.mat-2-line,.mat-nav-list[dense] .mat-list-option.mat-2-line,.mat-selection-list[dense] .mat-list-item.mat-2-line,.mat-selection-list[dense] .mat-list-option.mat-2-line{height:60px}.mat-list[dense] .mat-list-item.mat-3-line,.mat-list[dense] .mat-list-option.mat-3-line,.mat-nav-list[dense] .mat-list-item.mat-3-line,.mat-nav-list[dense] .mat-list-option.mat-3-line,.mat-selection-list[dense] .mat-list-item.mat-3-line,.mat-selection-list[dense] .mat-list-option.mat-3-line{height:76px}.mat-list[dense] .mat-list-item.mat-multi-line,.mat-list[dense] .mat-list-option.mat-multi-line,.mat-nav-list[dense] .mat-list-item.mat-multi-line,.mat-nav-list[dense] .mat-list-option.mat-multi-line,.mat-selection-list[dense] .mat-list-item.mat-multi-line,.mat-selection-list[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content,.mat-nav-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-nav-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content,.mat-selection-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-selection-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list[dense] .mat-list-item .mat-list-text,.mat-list[dense] .mat-list-option .mat-list-text,.mat-nav-list[dense] .mat-list-item .mat-list-text,.mat-nav-list[dense] .mat-list-option .mat-list-text,.mat-selection-list[dense] .mat-list-item .mat-list-text,.mat-selection-list[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list[dense] .mat-list-item .mat-list-text>*,.mat-list[dense] .mat-list-option .mat-list-text>*,.mat-nav-list[dense] .mat-list-item .mat-list-text>*,.mat-nav-list[dense] .mat-list-option .mat-list-text>*,.mat-selection-list[dense] .mat-list-item .mat-list-text>*,.mat-selection-list[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list[dense] .mat-list-item .mat-list-text:empty,.mat-list[dense] .mat-list-option .mat-list-text:empty,.mat-nav-list[dense] .mat-list-item .mat-list-text:empty,.mat-nav-list[dense] .mat-list-option .mat-list-text:empty,.mat-selection-list[dense] .mat-list-item .mat-list-text:empty,.mat-selection-list[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:16px;padding-left:0}.mat-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-left:0;padding-right:16px}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}.mat-list[dense] .mat-list-item .mat-list-avatar,.mat-list[dense] .mat-list-option .mat-list-avatar,.mat-nav-list[dense] .mat-list-item .mat-list-avatar,.mat-nav-list[dense] .mat-list-option .mat-list-avatar,.mat-selection-list[dense] .mat-list-item .mat-list-avatar,.mat-selection-list[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%}.mat-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list[dense] .mat-list-item .mat-list-icon,.mat-list[dense] .mat-list-option .mat-list-icon,.mat-nav-list[dense] .mat-list-item .mat-list-icon,.mat-nav-list[dense] .mat-list-option .mat-list-icon,.mat-selection-list[dense] .mat-list-item .mat-list-icon,.mat-selection-list[dense] .mat-list-option .mat-list-icon{flex-shrink:0;width:20px;height:20px;font-size:20px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list[dense] .mat-list-item .mat-divider,.mat-list[dense] .mat-list-option .mat-divider,.mat-nav-list[dense] .mat-list-item .mat-divider,.mat-nav-list[dense] .mat-list-option .mat-divider,.mat-selection-list[dense] .mat-list-item .mat-divider,.mat-selection-list[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list[dense] .mat-list-option .mat-divider,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-divider,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-divider.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-divider.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-nav-list a{text-decoration:none;color:inherit}.mat-nav-list .mat-list-item-content{cursor:pointer}.mat-nav-list .mat-list-item-content.mat-list-item-focus,.mat-nav-list .mat-list-item-content:hover{outline:0}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer}"],
inputs: ['disableRipple'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatNavList.ctorParameters = function () { return []; };
return MatNavList;
}(_MatListMixinBase));
var MatList = (function (_super) {
__extends(MatList, _super);
function MatList() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatList.decorators = [
{ type: core.Component, args: [{ selector: 'mat-list',
exportAs: 'matList',
template: "<ng-content></ng-content>",
host: { 'class': 'mat-list' },
styles: [".mat-divider{display:block;margin:0;border-top-width:1px;border-top-style:solid}.mat-divider.mat-divider-vertical{border-top:0;border-right-width:1px;border-right-style:solid}.mat-divider.mat-divider-inset{margin-left:80px}[dir=rtl] .mat-divider.mat-divider-inset{margin-left:auto;margin-right:80px}.mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{margin:0}.mat-list,.mat-nav-list,.mat-selection-list{padding-top:8px;display:block}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{height:48px;line-height:16px}.mat-list .mat-subheader:first-child,.mat-nav-list .mat-subheader:first-child,.mat-selection-list .mat-subheader:first-child{margin-top:-8px}.mat-list .mat-list-item,.mat-list .mat-list-option,.mat-nav-list .mat-list-item,.mat-nav-list .mat-list-option,.mat-selection-list .mat-list-item,.mat-selection-list .mat-list-option{display:block;height:48px}.mat-list .mat-list-item .mat-list-item-content,.mat-list .mat-list-option .mat-list-item-content,.mat-nav-list .mat-list-item .mat-list-item-content,.mat-nav-list .mat-list-option .mat-list-item-content,.mat-selection-list .mat-list-item .mat-list-item-content,.mat-selection-list .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list .mat-list-item .mat-list-item-content-reverse,.mat-list .mat-list-option .mat-list-item-content-reverse,.mat-nav-list .mat-list-item .mat-list-item-content-reverse,.mat-nav-list .mat-list-option .mat-list-item-content-reverse,.mat-selection-list .mat-list-item .mat-list-item-content-reverse,.mat-selection-list .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list .mat-list-item .mat-list-item-ripple,.mat-list .mat-list-option .mat-list-item-ripple,.mat-nav-list .mat-list-item .mat-list-item-ripple,.mat-nav-list .mat-list-option .mat-list-item-ripple,.mat-selection-list .mat-list-item .mat-list-item-ripple,.mat-selection-list .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list .mat-list-item.mat-list-item-avatar,.mat-list .mat-list-option.mat-list-item-avatar,.mat-nav-list .mat-list-item.mat-list-item-avatar,.mat-nav-list .mat-list-option.mat-list-item-avatar,.mat-selection-list .mat-list-item.mat-list-item-avatar,.mat-selection-list .mat-list-option.mat-list-item-avatar{height:56px}.mat-list .mat-list-item.mat-2-line,.mat-list .mat-list-option.mat-2-line,.mat-nav-list .mat-list-item.mat-2-line,.mat-nav-list .mat-list-option.mat-2-line,.mat-selection-list .mat-list-item.mat-2-line,.mat-selection-list .mat-list-option.mat-2-line{height:72px}.mat-list .mat-list-item.mat-3-line,.mat-list .mat-list-option.mat-3-line,.mat-nav-list .mat-list-item.mat-3-line,.mat-nav-list .mat-list-option.mat-3-line,.mat-selection-list .mat-list-item.mat-3-line,.mat-selection-list .mat-list-option.mat-3-line{height:88px}.mat-list .mat-list-item.mat-multi-line,.mat-list .mat-list-option.mat-multi-line,.mat-nav-list .mat-list-item.mat-multi-line,.mat-nav-list .mat-list-option.mat-multi-line,.mat-selection-list .mat-list-item.mat-multi-line,.mat-selection-list .mat-list-option.mat-multi-line{height:auto}.mat-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list .mat-list-option.mat-multi-line .mat-list-item-content,.mat-nav-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-nav-list .mat-list-option.mat-multi-line .mat-list-item-content,.mat-selection-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-selection-list .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list .mat-list-item .mat-list-text,.mat-list .mat-list-option .mat-list-text,.mat-nav-list .mat-list-item .mat-list-text,.mat-nav-list .mat-list-option .mat-list-text,.mat-selection-list .mat-list-item .mat-list-text,.mat-selection-list .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list .mat-list-item .mat-list-text>*,.mat-list .mat-list-option .mat-list-text>*,.mat-nav-list .mat-list-item .mat-list-text>*,.mat-nav-list .mat-list-option .mat-list-text>*,.mat-selection-list .mat-list-item .mat-list-text>*,.mat-selection-list .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list .mat-list-item .mat-list-text:empty,.mat-list .mat-list-option .mat-list-text:empty,.mat-nav-list .mat-list-item .mat-list-text:empty,.mat-nav-list .mat-list-option .mat-list-text:empty,.mat-selection-list .mat-list-item .mat-list-text:empty,.mat-selection-list .mat-list-option .mat-list-text:empty{display:none}.mat-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}[dir=rtl] .mat-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:16px;padding-left:0}.mat-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-left:0;padding-right:16px}[dir=rtl] .mat-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}.mat-list .mat-list-item .mat-list-avatar,.mat-list .mat-list-option .mat-list-avatar,.mat-nav-list .mat-list-item .mat-list-avatar,.mat-nav-list .mat-list-option .mat-list-avatar,.mat-selection-list .mat-list-item .mat-list-avatar,.mat-selection-list .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%}.mat-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-nav-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-nav-list .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-selection-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-selection-list .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list .mat-list-item .mat-list-icon,.mat-list .mat-list-option .mat-list-icon,.mat-nav-list .mat-list-item .mat-list-icon,.mat-nav-list .mat-list-option .mat-list-icon,.mat-selection-list .mat-list-item .mat-list-icon,.mat-selection-list .mat-list-option .mat-list-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-nav-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-nav-list .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-selection-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-selection-list .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list .mat-list-item .mat-divider,.mat-list .mat-list-option .mat-divider,.mat-nav-list .mat-list-item .mat-divider,.mat-nav-list .mat-list-option .mat-divider,.mat-selection-list .mat-list-item .mat-divider,.mat-selection-list .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list .mat-list-item .mat-divider,[dir=rtl] .mat-list .mat-list-option .mat-divider,[dir=rtl] .mat-nav-list .mat-list-item .mat-divider,[dir=rtl] .mat-nav-list .mat-list-option .mat-divider,[dir=rtl] .mat-selection-list .mat-list-item .mat-divider,[dir=rtl] .mat-selection-list .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list .mat-list-item .mat-divider.mat-divider-inset,.mat-list .mat-list-option .mat-divider.mat-divider-inset,.mat-nav-list .mat-list-item .mat-divider.mat-divider-inset,.mat-nav-list .mat-list-option .mat-divider.mat-divider-inset,.mat-selection-list .mat-list-item .mat-divider.mat-divider-inset,.mat-selection-list .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list[dense],.mat-nav-list[dense],.mat-selection-list[dense]{padding-top:4px;display:block}.mat-list[dense] .mat-subheader,.mat-nav-list[dense] .mat-subheader,.mat-selection-list[dense] .mat-subheader{height:40px;line-height:8px}.mat-list[dense] .mat-subheader:first-child,.mat-nav-list[dense] .mat-subheader:first-child,.mat-selection-list[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list[dense] .mat-list-item,.mat-list[dense] .mat-list-option,.mat-nav-list[dense] .mat-list-item,.mat-nav-list[dense] .mat-list-option,.mat-selection-list[dense] .mat-list-item,.mat-selection-list[dense] .mat-list-option{display:block;height:40px}.mat-list[dense] .mat-list-item .mat-list-item-content,.mat-list[dense] .mat-list-option .mat-list-item-content,.mat-nav-list[dense] .mat-list-item .mat-list-item-content,.mat-nav-list[dense] .mat-list-option .mat-list-item-content,.mat-selection-list[dense] .mat-list-item .mat-list-item-content,.mat-selection-list[dense] .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list[dense] .mat-list-option .mat-list-item-content-reverse,.mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse,.mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list[dense] .mat-list-item .mat-list-item-ripple,.mat-list[dense] .mat-list-option .mat-list-item-ripple,.mat-nav-list[dense] .mat-list-item .mat-list-item-ripple,.mat-nav-list[dense] .mat-list-option .mat-list-item-ripple,.mat-selection-list[dense] .mat-list-item .mat-list-item-ripple,.mat-selection-list[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list[dense] .mat-list-item.mat-list-item-avatar,.mat-list[dense] .mat-list-option.mat-list-item-avatar,.mat-nav-list[dense] .mat-list-item.mat-list-item-avatar,.mat-nav-list[dense] .mat-list-option.mat-list-item-avatar,.mat-selection-list[dense] .mat-list-item.mat-list-item-avatar,.mat-selection-list[dense] .mat-list-option.mat-list-item-avatar{height:48px}.mat-list[dense] .mat-list-item.mat-2-line,.mat-list[dense] .mat-list-option.mat-2-line,.mat-nav-list[dense] .mat-list-item.mat-2-line,.mat-nav-list[dense] .mat-list-option.mat-2-line,.mat-selection-list[dense] .mat-list-item.mat-2-line,.mat-selection-list[dense] .mat-list-option.mat-2-line{height:60px}.mat-list[dense] .mat-list-item.mat-3-line,.mat-list[dense] .mat-list-option.mat-3-line,.mat-nav-list[dense] .mat-list-item.mat-3-line,.mat-nav-list[dense] .mat-list-option.mat-3-line,.mat-selection-list[dense] .mat-list-item.mat-3-line,.mat-selection-list[dense] .mat-list-option.mat-3-line{height:76px}.mat-list[dense] .mat-list-item.mat-multi-line,.mat-list[dense] .mat-list-option.mat-multi-line,.mat-nav-list[dense] .mat-list-item.mat-multi-line,.mat-nav-list[dense] .mat-list-option.mat-multi-line,.mat-selection-list[dense] .mat-list-item.mat-multi-line,.mat-selection-list[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content,.mat-nav-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-nav-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content,.mat-selection-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-selection-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list[dense] .mat-list-item .mat-list-text,.mat-list[dense] .mat-list-option .mat-list-text,.mat-nav-list[dense] .mat-list-item .mat-list-text,.mat-nav-list[dense] .mat-list-option .mat-list-text,.mat-selection-list[dense] .mat-list-item .mat-list-text,.mat-selection-list[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list[dense] .mat-list-item .mat-list-text>*,.mat-list[dense] .mat-list-option .mat-list-text>*,.mat-nav-list[dense] .mat-list-item .mat-list-text>*,.mat-nav-list[dense] .mat-list-option .mat-list-text>*,.mat-selection-list[dense] .mat-list-item .mat-list-text>*,.mat-selection-list[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list[dense] .mat-list-item .mat-list-text:empty,.mat-list[dense] .mat-list-option .mat-list-text:empty,.mat-nav-list[dense] .mat-list-item .mat-list-text:empty,.mat-nav-list[dense] .mat-list-option .mat-list-text:empty,.mat-selection-list[dense] .mat-list-item .mat-list-text:empty,.mat-selection-list[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:16px;padding-left:0}.mat-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-left:0;padding-right:16px}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}.mat-list[dense] .mat-list-item .mat-list-avatar,.mat-list[dense] .mat-list-option .mat-list-avatar,.mat-nav-list[dense] .mat-list-item .mat-list-avatar,.mat-nav-list[dense] .mat-list-option .mat-list-avatar,.mat-selection-list[dense] .mat-list-item .mat-list-avatar,.mat-selection-list[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%}.mat-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list[dense] .mat-list-item .mat-list-icon,.mat-list[dense] .mat-list-option .mat-list-icon,.mat-nav-list[dense] .mat-list-item .mat-list-icon,.mat-nav-list[dense] .mat-list-option .mat-list-icon,.mat-selection-list[dense] .mat-list-item .mat-list-icon,.mat-selection-list[dense] .mat-list-option .mat-list-icon{flex-shrink:0;width:20px;height:20px;font-size:20px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list[dense] .mat-list-item .mat-divider,.mat-list[dense] .mat-list-option .mat-divider,.mat-nav-list[dense] .mat-list-item .mat-divider,.mat-nav-list[dense] .mat-list-option .mat-divider,.mat-selection-list[dense] .mat-list-item .mat-divider,.mat-selection-list[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list[dense] .mat-list-option .mat-divider,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-divider,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-divider.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-divider.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-nav-list a{text-decoration:none;color:inherit}.mat-nav-list .mat-list-item-content{cursor:pointer}.mat-nav-list .mat-list-item-content.mat-list-item-focus,.mat-nav-list .mat-list-item-content:hover{outline:0}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer}"],
inputs: ['disableRipple'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatList.ctorParameters = function () { return []; };
return MatList;
}(_MatListMixinBase));
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* \@docs-private
*/
var MatListAvatarCssMatStyler = (function () {
function MatListAvatarCssMatStyler() {
}
MatListAvatarCssMatStyler.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-list-avatar], [matListAvatar]',
host: { 'class': 'mat-list-avatar' }
},] },
];
/** @nocollapse */
MatListAvatarCssMatStyler.ctorParameters = function () { return []; };
return MatListAvatarCssMatStyler;
}());
/**
* An item within a Material Design list.
*/
var MatListItem = (function (_super) {
__extends(MatListItem, _super);
function MatListItem(_element, _navList) {
var _this = _super.call(this) || this;
_this._element = _element;
_this._navList = _navList;
_this._isNavList = false;
_this._isNavList = !!_navList;
return _this;
}
Object.defineProperty(MatListItem.prototype, "_hasAvatar", {
set: /**
* @param {?} avatar
* @return {?}
*/ function (avatar) {
if (avatar != null) {
this._element.nativeElement.classList.add('mat-list-item-avatar');
}
else {
this._element.nativeElement.classList.remove('mat-list-item-avatar');
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatListItem.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._lineSetter = new MatLineSetter(this._lines, this._element);
};
/** Whether this list item should show a ripple effect when clicked. */
/**
* Whether this list item should show a ripple effect when clicked.
* @return {?}
*/
MatListItem.prototype._isRippleDisabled = /**
* Whether this list item should show a ripple effect when clicked.
* @return {?}
*/
function () {
return !this._isNavList || this.disableRipple || this._navList.disableRipple;
};
/**
* @return {?}
*/
MatListItem.prototype._handleFocus = /**
* @return {?}
*/
function () {
this._element.nativeElement.classList.add('mat-list-item-focus');
};
/**
* @return {?}
*/
MatListItem.prototype._handleBlur = /**
* @return {?}
*/
function () {
this._element.nativeElement.classList.remove('mat-list-item-focus');
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @return {?}
*/
MatListItem.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @return {?}
*/
function () {
return this._element.nativeElement;
};
MatListItem.decorators = [
{ type: core.Component, args: [{ selector: 'mat-list-item, a[mat-list-item]',
exportAs: 'matListItem',
host: {
'class': 'mat-list-item',
'(focus)': '_handleFocus()',
'(blur)': '_handleBlur()',
},
inputs: ['disableRipple'],
template: "<div class=\"mat-list-item-content\"><div class=\"mat-list-item-ripple\" mat-ripple [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"_isRippleDisabled()\"></div><ng-content select=\"[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]\"></ng-content><div class=\"mat-list-text\"><ng-content select=\"[mat-line], [matLine]\"></ng-content></div><ng-content></ng-content></div>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatListItem.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: MatNavList, decorators: [{ type: core.Optional },] },
];
};
MatListItem.propDecorators = {
"_lines": [{ type: core.ContentChildren, args: [MatLine,] },],
"_hasAvatar": [{ type: core.ContentChild, args: [MatListAvatarCssMatStyler,] },],
};
return MatListItem;
}(_MatListItemMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatSelectionListBase = (function () {
function MatSelectionListBase() {
}
return MatSelectionListBase;
}());
var _MatSelectionListMixinBase = mixinTabIndex(mixinDisableRipple(mixinDisabled(MatSelectionListBase)));
/**
* \@docs-private
*/
var MatListOptionBase = (function () {
function MatListOptionBase() {
}
return MatListOptionBase;
}());
var _MatListOptionMixinBase = mixinDisableRipple(MatListOptionBase);
/**
* \@docs-private
*/
var MAT_SELECTION_LIST_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatSelectionList; }),
multi: true
};
/**
* Change event object emitted by MatListOption whenever the selected state changes.
* @deprecated Use the `MatSelectionListChange` event on the selection list instead.
* \@deletion-target 6.0.0
*/
var MatListOptionChange = (function () {
function MatListOptionChange(source, selected) {
this.source = source;
this.selected = selected;
}
return MatListOptionChange;
}());
/**
* Change event that is being fired whenever the selected state of an option changes.
*/
var MatSelectionListChange = (function () {
function MatSelectionListChange(source, option) {
this.source = source;
this.option = option;
}
return MatSelectionListChange;
}());
/**
* Component for list-options of selection-list. Each list-option can automatically
* generate a checkbox and can put current item into the selectionModel of selection-list
* if the current item is selected.
*/
var MatListOption = (function (_super) {
__extends(MatListOption, _super);
function MatListOption(_element, _changeDetector, /** @docs-private */ selectionList) {
var _this = _super.call(this) || this;
_this._element = _element;
_this._changeDetector = _changeDetector;
_this.selectionList = selectionList;
_this._selected = false;
_this._disabled = false;
/**
* Whether the option has focus.
*/
_this._hasFocus = false;
/**
* Whether the label should appear before or after the checkbox. Defaults to 'after'
*/
_this.checkboxPosition = 'after';
/**
* Emits a change event whenever the selected state of an option changes.
* @deprecated Use the `selectionChange` event on the `<mat-selection-list>` instead.
* \@deletion-target 6.0.0
*/
_this.selectionChange = new core.EventEmitter();
return _this;
}
Object.defineProperty(MatListOption.prototype, "disabled", {
get: /**
* Whether the option is disabled.
* @return {?}
*/ function () { return this._disabled || (this.selectionList && this.selectionList.disabled); },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._disabled) {
this._disabled = newValue;
this._changeDetector.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatListOption.prototype, "selected", {
get: /**
* Whether the option is selected.
* @return {?}
*/ function () { return this.selectionList.selectedOptions.isSelected(this); },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ isSelected = coercion.coerceBooleanProperty(value);
if (isSelected !== this._selected) {
this._setSelected(isSelected);
this.selectionList._reportValueChange();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatListOption.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this._selected) {
// List options that are selected at initialization can't be reported properly to the form
// control. This is because it takes some time until the selection-list knows about all
// available options. Also it can happen that the ControlValueAccessor has an initial value
// that should be used instead. Deferring the value change report to the next tick ensures
// that the form control value is not being overwritten.
Promise.resolve().then(function () { return _this.selected = true; });
}
};
/**
* @return {?}
*/
MatListOption.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._lineSetter = new MatLineSetter(this._lines, this._element);
};
/**
* @return {?}
*/
MatListOption.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
if (this.selected) {
// We have to delay this until the next tick in order
// to avoid changed after checked errors.
Promise.resolve().then(function () { return _this.selected = false; });
}
this.selectionList._removeOptionFromList(this);
};
/** Toggles the selection state of the option. */
/**
* Toggles the selection state of the option.
* @return {?}
*/
MatListOption.prototype.toggle = /**
* Toggles the selection state of the option.
* @return {?}
*/
function () {
this.selected = !this.selected;
};
/** Allows for programmatic focusing of the option. */
/**
* Allows for programmatic focusing of the option.
* @return {?}
*/
MatListOption.prototype.focus = /**
* Allows for programmatic focusing of the option.
* @return {?}
*/
function () {
this._element.nativeElement.focus();
};
/**
* Returns the list item's text label. Implemented as a part of the FocusKeyManager.
* @docs-private
*/
/**
* Returns the list item's text label. Implemented as a part of the FocusKeyManager.
* \@docs-private
* @return {?}
*/
MatListOption.prototype.getLabel = /**
* Returns the list item's text label. Implemented as a part of the FocusKeyManager.
* \@docs-private
* @return {?}
*/
function () {
return this._text ? this._text.nativeElement.textContent : '';
};
/** Whether this list item should show a ripple effect when clicked. */
/**
* Whether this list item should show a ripple effect when clicked.
* @return {?}
*/
MatListOption.prototype._isRippleDisabled = /**
* Whether this list item should show a ripple effect when clicked.
* @return {?}
*/
function () {
return this.disabled || this.disableRipple || this.selectionList.disableRipple;
};
/**
* @return {?}
*/
MatListOption.prototype._handleClick = /**
* @return {?}
*/
function () {
if (!this.disabled) {
this.toggle();
// Emit a change event if the selected state of the option changed through user interaction.
this.selectionList._emitChangeEvent(this);
// TODO: the `selectionChange` event on the option is deprecated. Remove that in the future.
this._emitDeprecatedChangeEvent();
}
};
/**
* @return {?}
*/
MatListOption.prototype._handleFocus = /**
* @return {?}
*/
function () {
this._hasFocus = true;
this.selectionList._setFocusedOption(this);
};
/**
* @return {?}
*/
MatListOption.prototype._handleBlur = /**
* @return {?}
*/
function () {
this._hasFocus = false;
this.selectionList._onTouched();
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @return {?}
*/
MatListOption.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @return {?}
*/
function () {
return this._element.nativeElement;
};
/** Sets the selected state of the option. */
/**
* Sets the selected state of the option.
* @param {?} selected
* @return {?}
*/
MatListOption.prototype._setSelected = /**
* Sets the selected state of the option.
* @param {?} selected
* @return {?}
*/
function (selected) {
if (selected === this._selected) {
return;
}
this._selected = selected;
if (selected) {
this.selectionList.selectedOptions.select(this);
}
else {
this.selectionList.selectedOptions.deselect(this);
}
this._changeDetector.markForCheck();
};
/** Emits a selectionChange event for this option. */
/**
* Emits a selectionChange event for this option.
* @return {?}
*/
MatListOption.prototype._emitDeprecatedChangeEvent = /**
* Emits a selectionChange event for this option.
* @return {?}
*/
function () {
// TODO: the `selectionChange` event on the option is deprecated. Remove that in the future.
this.selectionChange.emit(new MatListOptionChange(this, this.selected));
};
MatListOption.decorators = [
{ type: core.Component, args: [{ selector: 'mat-list-option',
exportAs: 'matListOption',
inputs: ['disableRipple'],
host: {
'role': 'option',
'class': 'mat-list-item mat-list-option',
'(focus)': '_handleFocus()',
'(blur)': '_handleBlur()',
'(click)': '_handleClick()',
'tabindex': '-1',
'[class.mat-list-item-disabled]': 'disabled',
'[class.mat-list-item-focus]': '_hasFocus',
'[attr.aria-selected]': 'selected.toString()',
'[attr.aria-disabled]': 'disabled.toString()',
},
template: "<div class=\"mat-list-item-content\" [class.mat-list-item-content-reverse]=\"checkboxPosition == 'after'\" [class.mat-list-item-disabled]=\"disabled\"><div mat-ripple class=\"mat-list-item-ripple\" [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"_isRippleDisabled()\"></div><mat-pseudo-checkbox [state]=\"selected ? 'checked' : 'unchecked'\" [disabled]=\"disabled\"></mat-pseudo-checkbox><div class=\"mat-list-text\" #text><ng-content></ng-content></div></div>",
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatListOption.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: MatSelectionList, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatSelectionList; }),] },] },
];
};
MatListOption.propDecorators = {
"_lines": [{ type: core.ContentChildren, args: [MatLine,] },],
"_text": [{ type: core.ViewChild, args: ['text',] },],
"checkboxPosition": [{ type: core.Input },],
"value": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"selected": [{ type: core.Input },],
"selectionChange": [{ type: core.Output },],
};
return MatListOption;
}(_MatListOptionMixinBase));
/**
* Material Design list component where each item is a selectable option. Behaves as a listbox.
*/
var MatSelectionList = (function (_super) {
__extends(MatSelectionList, _super);
function MatSelectionList(_element, tabIndex) {
var _this = _super.call(this) || this;
_this._element = _element;
/**
* Emits a change event whenever the selected state of an option changes.
*/
_this.selectionChange = new core.EventEmitter();
/**
* The currently selected options.
*/
_this.selectedOptions = new collections.SelectionModel(true);
/**
* View to model callback that should be called whenever the selected options change.
*/
_this._onChange = function (_) { };
_this._modelChanges = Subscription.Subscription.EMPTY;
/**
* View to model callback that should be called if the list or its options lost focus.
*/
_this._onTouched = function () { };
_this.tabIndex = parseInt(tabIndex) || 0;
return _this;
}
/**
* @return {?}
*/
MatSelectionList.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._keyManager = new a11y.FocusKeyManager(this.options).withWrap().withTypeAhead();
if (this._tempValues) {
this._setOptionsFromValues(this._tempValues);
this._tempValues = null;
}
// Sync external changes to the model back to the options.
this._modelChanges = /** @type {?} */ ((this.selectedOptions.onChange)).subscribe(function (event) {
if (event.added) {
for (var _i = 0, _a = event.added; _i < _a.length; _i++) {
var item = _a[_i];
item.selected = true;
}
}
if (event.removed) {
for (var _b = 0, _c = event.removed; _b < _c.length; _b++) {
var item = _c[_b];
item.selected = false;
}
}
});
};
/**
* @return {?}
*/
MatSelectionList.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._modelChanges.unsubscribe();
};
/** Focus the selection-list. */
/**
* Focus the selection-list.
* @return {?}
*/
MatSelectionList.prototype.focus = /**
* Focus the selection-list.
* @return {?}
*/
function () {
this._element.nativeElement.focus();
};
/** Selects all of the options. */
/**
* Selects all of the options.
* @return {?}
*/
MatSelectionList.prototype.selectAll = /**
* Selects all of the options.
* @return {?}
*/
function () {
this.options.forEach(function (option) { return option._setSelected(true); });
this._reportValueChange();
};
/** Deselects all of the options. */
/**
* Deselects all of the options.
* @return {?}
*/
MatSelectionList.prototype.deselectAll = /**
* Deselects all of the options.
* @return {?}
*/
function () {
this.options.forEach(function (option) { return option._setSelected(false); });
this._reportValueChange();
};
/** Sets the focused option of the selection-list. */
/**
* Sets the focused option of the selection-list.
* @param {?} option
* @return {?}
*/
MatSelectionList.prototype._setFocusedOption = /**
* Sets the focused option of the selection-list.
* @param {?} option
* @return {?}
*/
function (option) {
this._keyManager.updateActiveItemIndex(this._getOptionIndex(option));
};
/** Removes an option from the selection list and updates the active item. */
/**
* Removes an option from the selection list and updates the active item.
* @param {?} option
* @return {?}
*/
MatSelectionList.prototype._removeOptionFromList = /**
* Removes an option from the selection list and updates the active item.
* @param {?} option
* @return {?}
*/
function (option) {
if (option._hasFocus) {
var /** @type {?} */ optionIndex = this._getOptionIndex(option);
// Check whether the option is the last item
if (optionIndex > 0) {
this._keyManager.setPreviousItemActive();
}
else if (optionIndex === 0 && this.options.length > 1) {
this._keyManager.setNextItemActive();
}
}
};
/** Passes relevant key presses to our key manager. */
/**
* Passes relevant key presses to our key manager.
* @param {?} event
* @return {?}
*/
MatSelectionList.prototype._keydown = /**
* Passes relevant key presses to our key manager.
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled) {
return;
}
switch (event.keyCode) {
case keycodes.SPACE:
case keycodes.ENTER:
this._toggleSelectOnFocusedOption();
// Always prevent space from scrolling the page since the list has focus
event.preventDefault();
break;
case keycodes.HOME:
case keycodes.END:
event.keyCode === keycodes.HOME ? this._keyManager.setFirstItemActive() :
this._keyManager.setLastItemActive();
event.preventDefault();
break;
default:
this._keyManager.onKeydown(event);
}
};
/** Reports a value change to the ControlValueAccessor */
/**
* Reports a value change to the ControlValueAccessor
* @return {?}
*/
MatSelectionList.prototype._reportValueChange = /**
* Reports a value change to the ControlValueAccessor
* @return {?}
*/
function () {
if (this.options) {
this._onChange(this._getSelectedOptionValues());
}
};
/** Emits a change event if the selected state of an option changed. */
/**
* Emits a change event if the selected state of an option changed.
* @param {?} option
* @return {?}
*/
MatSelectionList.prototype._emitChangeEvent = /**
* Emits a change event if the selected state of an option changed.
* @param {?} option
* @return {?}
*/
function (option) {
this.selectionChange.emit(new MatSelectionListChange(this, option));
};
/** Implemented as part of ControlValueAccessor. */
/**
* Implemented as part of ControlValueAccessor.
* @param {?} values
* @return {?}
*/
MatSelectionList.prototype.writeValue = /**
* Implemented as part of ControlValueAccessor.
* @param {?} values
* @return {?}
*/
function (values) {
if (this.options) {
this._setOptionsFromValues(values || []);
}
else {
this._tempValues = values;
}
};
/** Implemented as a part of ControlValueAccessor. */
/**
* Implemented as a part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
MatSelectionList.prototype.setDisabledState = /**
* Implemented as a part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
if (this.options) {
this.options.forEach(function (option) { return option.disabled = isDisabled; });
}
};
/** Implemented as part of ControlValueAccessor. */
/**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
MatSelectionList.prototype.registerOnChange = /**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/** Implemented as part of ControlValueAccessor. */
/**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
MatSelectionList.prototype.registerOnTouched = /**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* Returns the option with the specified value.
* @param {?} value
* @return {?}
*/
MatSelectionList.prototype._getOptionByValue = /**
* Returns the option with the specified value.
* @param {?} value
* @return {?}
*/
function (value) {
return this.options.find(function (option) { return option.value === value; });
};
/**
* Sets the selected options based on the specified values.
* @param {?} values
* @return {?}
*/
MatSelectionList.prototype._setOptionsFromValues = /**
* Sets the selected options based on the specified values.
* @param {?} values
* @return {?}
*/
function (values) {
var _this = this;
this.options.forEach(function (option) { return option._setSelected(false); });
values
.map(function (value) { return _this._getOptionByValue(value); })
.filter(Boolean)
.forEach(function (option) { return ((option))._setSelected(true); });
};
/**
* Returns the values of the selected options.
* @return {?}
*/
MatSelectionList.prototype._getSelectedOptionValues = /**
* Returns the values of the selected options.
* @return {?}
*/
function () {
return this.options.filter(function (option) { return option.selected; }).map(function (option) { return option.value; });
};
/**
* Toggles the selected state of the currently focused option.
* @return {?}
*/
MatSelectionList.prototype._toggleSelectOnFocusedOption = /**
* Toggles the selected state of the currently focused option.
* @return {?}
*/
function () {
var /** @type {?} */ focusedIndex = this._keyManager.activeItemIndex;
if (focusedIndex != null && this._isValidIndex(focusedIndex)) {
var /** @type {?} */ focusedOption = this.options.toArray()[focusedIndex];
if (focusedOption) {
focusedOption.toggle();
// Emit a change event because the focused option changed its state through user
// interaction.
this._emitChangeEvent(focusedOption);
// TODO: the `selectionChange` event on the option is deprecated. Remove that in the future.
focusedOption._emitDeprecatedChangeEvent();
}
}
};
/**
* Utility to ensure all indexes are valid.
* @param {?} index The index to be checked.
* @return {?} True if the index is valid for our list of options.
*/
MatSelectionList.prototype._isValidIndex = /**
* Utility to ensure all indexes are valid.
* @param {?} index The index to be checked.
* @return {?} True if the index is valid for our list of options.
*/
function (index) {
return index >= 0 && index < this.options.length;
};
/**
* Returns the index of the specified list option.
* @param {?} option
* @return {?}
*/
MatSelectionList.prototype._getOptionIndex = /**
* Returns the index of the specified list option.
* @param {?} option
* @return {?}
*/
function (option) {
return this.options.toArray().indexOf(option);
};
MatSelectionList.decorators = [
{ type: core.Component, args: [{ selector: 'mat-selection-list',
exportAs: 'matSelectionList',
inputs: ['disabled', 'disableRipple', 'tabIndex'],
host: {
'role': 'listbox',
'[tabIndex]': 'tabIndex',
'class': 'mat-selection-list',
'(focus)': 'focus()',
'(blur)': '_onTouched()',
'(keydown)': '_keydown($event)',
'[attr.aria-disabled]': 'disabled.toString()',
},
template: '<ng-content></ng-content>',
styles: [".mat-divider{display:block;margin:0;border-top-width:1px;border-top-style:solid}.mat-divider.mat-divider-vertical{border-top:0;border-right-width:1px;border-right-style:solid}.mat-divider.mat-divider-inset{margin-left:80px}[dir=rtl] .mat-divider.mat-divider-inset{margin-left:auto;margin-right:80px}.mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{margin:0}.mat-list,.mat-nav-list,.mat-selection-list{padding-top:8px;display:block}.mat-list .mat-subheader,.mat-nav-list .mat-subheader,.mat-selection-list .mat-subheader{height:48px;line-height:16px}.mat-list .mat-subheader:first-child,.mat-nav-list .mat-subheader:first-child,.mat-selection-list .mat-subheader:first-child{margin-top:-8px}.mat-list .mat-list-item,.mat-list .mat-list-option,.mat-nav-list .mat-list-item,.mat-nav-list .mat-list-option,.mat-selection-list .mat-list-item,.mat-selection-list .mat-list-option{display:block;height:48px}.mat-list .mat-list-item .mat-list-item-content,.mat-list .mat-list-option .mat-list-item-content,.mat-nav-list .mat-list-item .mat-list-item-content,.mat-nav-list .mat-list-option .mat-list-item-content,.mat-selection-list .mat-list-item .mat-list-item-content,.mat-selection-list .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list .mat-list-item .mat-list-item-content-reverse,.mat-list .mat-list-option .mat-list-item-content-reverse,.mat-nav-list .mat-list-item .mat-list-item-content-reverse,.mat-nav-list .mat-list-option .mat-list-item-content-reverse,.mat-selection-list .mat-list-item .mat-list-item-content-reverse,.mat-selection-list .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list .mat-list-item .mat-list-item-ripple,.mat-list .mat-list-option .mat-list-item-ripple,.mat-nav-list .mat-list-item .mat-list-item-ripple,.mat-nav-list .mat-list-option .mat-list-item-ripple,.mat-selection-list .mat-list-item .mat-list-item-ripple,.mat-selection-list .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list .mat-list-item.mat-list-item-avatar,.mat-list .mat-list-option.mat-list-item-avatar,.mat-nav-list .mat-list-item.mat-list-item-avatar,.mat-nav-list .mat-list-option.mat-list-item-avatar,.mat-selection-list .mat-list-item.mat-list-item-avatar,.mat-selection-list .mat-list-option.mat-list-item-avatar{height:56px}.mat-list .mat-list-item.mat-2-line,.mat-list .mat-list-option.mat-2-line,.mat-nav-list .mat-list-item.mat-2-line,.mat-nav-list .mat-list-option.mat-2-line,.mat-selection-list .mat-list-item.mat-2-line,.mat-selection-list .mat-list-option.mat-2-line{height:72px}.mat-list .mat-list-item.mat-3-line,.mat-list .mat-list-option.mat-3-line,.mat-nav-list .mat-list-item.mat-3-line,.mat-nav-list .mat-list-option.mat-3-line,.mat-selection-list .mat-list-item.mat-3-line,.mat-selection-list .mat-list-option.mat-3-line{height:88px}.mat-list .mat-list-item.mat-multi-line,.mat-list .mat-list-option.mat-multi-line,.mat-nav-list .mat-list-item.mat-multi-line,.mat-nav-list .mat-list-option.mat-multi-line,.mat-selection-list .mat-list-item.mat-multi-line,.mat-selection-list .mat-list-option.mat-multi-line{height:auto}.mat-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list .mat-list-option.mat-multi-line .mat-list-item-content,.mat-nav-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-nav-list .mat-list-option.mat-multi-line .mat-list-item-content,.mat-selection-list .mat-list-item.mat-multi-line .mat-list-item-content,.mat-selection-list .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list .mat-list-item .mat-list-text,.mat-list .mat-list-option .mat-list-text,.mat-nav-list .mat-list-item .mat-list-text,.mat-nav-list .mat-list-option .mat-list-text,.mat-selection-list .mat-list-item .mat-list-text,.mat-selection-list .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list .mat-list-item .mat-list-text>*,.mat-list .mat-list-option .mat-list-text>*,.mat-nav-list .mat-list-item .mat-list-text>*,.mat-nav-list .mat-list-option .mat-list-text>*,.mat-selection-list .mat-list-item .mat-list-text>*,.mat-selection-list .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list .mat-list-item .mat-list-text:empty,.mat-list .mat-list-option .mat-list-text:empty,.mat-nav-list .mat-list-item .mat-list-text:empty,.mat-nav-list .mat-list-option .mat-list-text:empty,.mat-selection-list .mat-list-item .mat-list-text:empty,.mat-selection-list .mat-list-option .mat-list-text:empty{display:none}.mat-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}[dir=rtl] .mat-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:16px;padding-left:0}.mat-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-left:0;padding-right:16px}[dir=rtl] .mat-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}.mat-list .mat-list-item .mat-list-avatar,.mat-list .mat-list-option .mat-list-avatar,.mat-nav-list .mat-list-item .mat-list-avatar,.mat-nav-list .mat-list-option .mat-list-avatar,.mat-selection-list .mat-list-item .mat-list-avatar,.mat-selection-list .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%}.mat-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-nav-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-nav-list .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-selection-list .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-selection-list .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list .mat-list-item .mat-list-icon,.mat-list .mat-list-option .mat-list-icon,.mat-nav-list .mat-list-item .mat-list-icon,.mat-nav-list .mat-list-option .mat-list-icon,.mat-selection-list .mat-list-item .mat-list-icon,.mat-selection-list .mat-list-option .mat-list-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-nav-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-nav-list .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-selection-list .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-selection-list .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list .mat-list-item .mat-divider,.mat-list .mat-list-option .mat-divider,.mat-nav-list .mat-list-item .mat-divider,.mat-nav-list .mat-list-option .mat-divider,.mat-selection-list .mat-list-item .mat-divider,.mat-selection-list .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list .mat-list-item .mat-divider,[dir=rtl] .mat-list .mat-list-option .mat-divider,[dir=rtl] .mat-nav-list .mat-list-item .mat-divider,[dir=rtl] .mat-nav-list .mat-list-option .mat-divider,[dir=rtl] .mat-selection-list .mat-list-item .mat-divider,[dir=rtl] .mat-selection-list .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list .mat-list-item .mat-divider.mat-divider-inset,.mat-list .mat-list-option .mat-divider.mat-divider-inset,.mat-nav-list .mat-list-item .mat-divider.mat-divider-inset,.mat-nav-list .mat-list-option .mat-divider.mat-divider-inset,.mat-selection-list .mat-list-item .mat-divider.mat-divider-inset,.mat-selection-list .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list[dense],.mat-nav-list[dense],.mat-selection-list[dense]{padding-top:4px;display:block}.mat-list[dense] .mat-subheader,.mat-nav-list[dense] .mat-subheader,.mat-selection-list[dense] .mat-subheader{height:40px;line-height:8px}.mat-list[dense] .mat-subheader:first-child,.mat-nav-list[dense] .mat-subheader:first-child,.mat-selection-list[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list[dense] .mat-list-item,.mat-list[dense] .mat-list-option,.mat-nav-list[dense] .mat-list-item,.mat-nav-list[dense] .mat-list-option,.mat-selection-list[dense] .mat-list-item,.mat-selection-list[dense] .mat-list-option{display:block;height:40px}.mat-list[dense] .mat-list-item .mat-list-item-content,.mat-list[dense] .mat-list-option .mat-list-item-content,.mat-nav-list[dense] .mat-list-item .mat-list-item-content,.mat-nav-list[dense] .mat-list-option .mat-list-item-content,.mat-selection-list[dense] .mat-list-item .mat-list-item-content,.mat-selection-list[dense] .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list[dense] .mat-list-option .mat-list-item-content-reverse,.mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse,.mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse,.mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list[dense] .mat-list-item .mat-list-item-ripple,.mat-list[dense] .mat-list-option .mat-list-item-ripple,.mat-nav-list[dense] .mat-list-item .mat-list-item-ripple,.mat-nav-list[dense] .mat-list-option .mat-list-item-ripple,.mat-selection-list[dense] .mat-list-item .mat-list-item-ripple,.mat-selection-list[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list[dense] .mat-list-item.mat-list-item-avatar,.mat-list[dense] .mat-list-option.mat-list-item-avatar,.mat-nav-list[dense] .mat-list-item.mat-list-item-avatar,.mat-nav-list[dense] .mat-list-option.mat-list-item-avatar,.mat-selection-list[dense] .mat-list-item.mat-list-item-avatar,.mat-selection-list[dense] .mat-list-option.mat-list-item-avatar{height:48px}.mat-list[dense] .mat-list-item.mat-2-line,.mat-list[dense] .mat-list-option.mat-2-line,.mat-nav-list[dense] .mat-list-item.mat-2-line,.mat-nav-list[dense] .mat-list-option.mat-2-line,.mat-selection-list[dense] .mat-list-item.mat-2-line,.mat-selection-list[dense] .mat-list-option.mat-2-line{height:60px}.mat-list[dense] .mat-list-item.mat-3-line,.mat-list[dense] .mat-list-option.mat-3-line,.mat-nav-list[dense] .mat-list-item.mat-3-line,.mat-nav-list[dense] .mat-list-option.mat-3-line,.mat-selection-list[dense] .mat-list-item.mat-3-line,.mat-selection-list[dense] .mat-list-option.mat-3-line{height:76px}.mat-list[dense] .mat-list-item.mat-multi-line,.mat-list[dense] .mat-list-option.mat-multi-line,.mat-nav-list[dense] .mat-list-item.mat-multi-line,.mat-nav-list[dense] .mat-list-option.mat-multi-line,.mat-selection-list[dense] .mat-list-item.mat-multi-line,.mat-selection-list[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content,.mat-nav-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-nav-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content,.mat-selection-list[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-selection-list[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list[dense] .mat-list-item .mat-list-text,.mat-list[dense] .mat-list-option .mat-list-text,.mat-nav-list[dense] .mat-list-item .mat-list-text,.mat-nav-list[dense] .mat-list-option .mat-list-text,.mat-selection-list[dense] .mat-list-item .mat-list-text,.mat-selection-list[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list[dense] .mat-list-item .mat-list-text>*,.mat-list[dense] .mat-list-option .mat-list-text>*,.mat-nav-list[dense] .mat-list-item .mat-list-text>*,.mat-nav-list[dense] .mat-list-option .mat-list-text>*,.mat-selection-list[dense] .mat-list-item .mat-list-text>*,.mat-selection-list[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list[dense] .mat-list-item .mat-list-text:empty,.mat-list[dense] .mat-list-option .mat-list-text:empty,.mat-nav-list[dense] .mat-list-item .mat-list-text:empty,.mat-nav-list[dense] .mat-list-option .mat-list-text:empty,.mat-selection-list[dense] .mat-list-item .mat-list-text:empty,.mat-selection-list[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-item-content .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-item-content .mat-list-text:not(:nth-child(2)){padding-right:16px;padding-left:0}.mat-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),.mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-left:0;padding-right:16px}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)),[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-item-content-reverse .mat-list-text:not(:nth-child(2)){padding-right:0;padding-left:16px}.mat-list[dense] .mat-list-item .mat-list-avatar,.mat-list[dense] .mat-list-option .mat-list-avatar,.mat-nav-list[dense] .mat-list-item .mat-list-avatar,.mat-nav-list[dense] .mat-list-option .mat-list-avatar,.mat-selection-list[dense] .mat-list-item .mat-list-avatar,.mat-selection-list[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%}.mat-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list[dense] .mat-list-item .mat-list-icon,.mat-list[dense] .mat-list-option .mat-list-icon,.mat-nav-list[dense] .mat-list-item .mat-list-icon,.mat-nav-list[dense] .mat-list-option .mat-list-icon,.mat-selection-list[dense] .mat-list-item .mat-list-icon,.mat-selection-list[dense] .mat-list-option .mat-list-icon{flex-shrink:0;width:20px;height:20px;font-size:20px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list[dense] .mat-list-item .mat-divider,.mat-list[dense] .mat-list-option .mat-divider,.mat-nav-list[dense] .mat-list-item .mat-divider,.mat-nav-list[dense] .mat-list-option .mat-divider,.mat-selection-list[dense] .mat-list-item .mat-divider,.mat-selection-list[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list[dense] .mat-list-option .mat-divider,[dir=rtl] .mat-nav-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-nav-list[dense] .mat-list-option .mat-divider,[dir=rtl] .mat-selection-list[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-selection-list[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list[dense] .mat-list-option .mat-divider.mat-divider-inset,.mat-nav-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-nav-list[dense] .mat-list-option .mat-divider.mat-divider-inset,.mat-selection-list[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-selection-list[dense] .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-nav-list a{text-decoration:none;color:inherit}.mat-nav-list .mat-list-item-content{cursor:pointer}.mat-nav-list .mat-list-item-content.mat-list-item-focus,.mat-nav-list .mat-list-item-content:hover{outline:0}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer}"],
encapsulation: core.ViewEncapsulation.None,
providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MatSelectionList.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: undefined, decorators: [{ type: core.Attribute, args: ['tabindex',] },] },
];
};
MatSelectionList.propDecorators = {
"options": [{ type: core.ContentChildren, args: [MatListOption,] },],
"selectionChange": [{ type: core.Output },],
};
return MatSelectionList;
}(_MatSelectionListMixinBase));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Animations used by the mat-menu component.
* Animation duration and timing values are based on:
* https://material.io/guidelines/components/menus.html#menus-usage
*/
var matMenuAnimations = {
/**
* This animation controls the menu panel's entry and exit from the page.
*
* When the menu panel is added to the DOM, it scales in and fades in its border.
*
* When the menu panel is removed from the DOM, it simply fades out after a brief
* delay to display the ripple.
*/
transformMenu: animations.trigger('transformMenu', [
// TODO(kara): switch to :enter and :leave once Mobile Safari is sorted out.
animations.state('void', animations.style({
opacity: 0,
// This starts off from 0.01, instead of 0, because there's an issue in the Angular animations
// as of 4.2, which causes the animation to be skipped if it starts from 0.
transform: 'scale(0.01, 0.01)'
})),
animations.state('enter-start', animations.style({
opacity: 1,
transform: 'scale(1, 0.5)'
})),
animations.state('enter', animations.style({
transform: 'scale(1, 1)'
})),
animations.transition('void => enter-start', animations.animate('100ms linear')),
animations.transition('enter-start => enter', animations.animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
animations.transition('* => void', animations.animate('150ms 50ms linear', animations.style({ opacity: 0 })))
]),
/**
* This animation fades in the background color and content of the menu panel
* after its containing element is scaled in.
*/
fadeInItems: animations.trigger('fadeInItems', [
animations.state('showing', animations.style({ opacity: 1 })),
animations.transition('void => *', [
animations.style({ opacity: 0 }),
animations.animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
])
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Throws an exception for the case when menu trigger doesn't have a valid mat-menu instance
* \@docs-private
* @return {?}
*/
function throwMatMenuMissingError() {
throw Error("mat-menu-trigger: must pass in an mat-menu instance.\n\n Example:\n <mat-menu #menu=\"matMenu\"></mat-menu>\n <button [matMenuTriggerFor]=\"menu\"></button>");
}
/**
* Throws an exception for the case when menu's x-position value isn't valid.
* In other words, it doesn't match 'before' or 'after'.
* \@docs-private
* @return {?}
*/
function throwMatMenuInvalidPositionX() {
throw Error("x-position value must be either 'before' or after'.\n Example: <mat-menu x-position=\"before\" #menu=\"matMenu\"></mat-menu>");
}
/**
* Throws an exception for the case when menu's y-position value isn't valid.
* In other words, it doesn't match 'above' or 'below'.
* \@docs-private
* @return {?}
*/
function throwMatMenuInvalidPositionY() {
throw Error("y-position value must be either 'above' or below'.\n Example: <mat-menu y-position=\"above\" #menu=\"matMenu\"></mat-menu>");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatMenuItemBase = (function () {
function MatMenuItemBase() {
}
return MatMenuItemBase;
}());
var _MatMenuItemMixinBase = mixinDisableRipple(mixinDisabled(MatMenuItemBase));
/**
* This directive is intended to be used inside an mat-menu tag.
* It exists mostly to set the role attribute.
*/
var MatMenuItem = (function (_super) {
__extends(MatMenuItem, _super);
function MatMenuItem(_elementRef, document, _focusMonitor) {
var _this =
// @deletion-target 6.0.0 make `_focusMonitor` and `document` required params.
_super.call(this) || this;
_this._elementRef = _elementRef;
_this._focusMonitor = _focusMonitor;
/**
* Stream that emits when the menu item is hovered.
*/
_this._hovered = new Subject.Subject();
/**
* Whether the menu item is highlighted.
*/
_this._highlighted = false;
/**
* Whether the menu item acts as a trigger for a sub-menu.
*/
_this._triggersSubmenu = false;
if (_focusMonitor) {
// Start monitoring the element so it gets the appropriate focused classes. We want
// to show the focus style for menu items only when the focus was not caused by a
// mouse or touch interaction.
_focusMonitor.monitor(_this._getHostElement(), false);
}
_this._document = document;
return _this;
}
/** Focuses the menu item. */
/**
* Focuses the menu item.
* @param {?=} origin
* @return {?}
*/
MatMenuItem.prototype.focus = /**
* Focuses the menu item.
* @param {?=} origin
* @return {?}
*/
function (origin) {
if (origin === void 0) {
origin = 'program';
}
if (this._focusMonitor) {
this._focusMonitor.focusVia(this._getHostElement(), origin);
}
else {
this._getHostElement().focus();
}
};
/**
* @return {?}
*/
MatMenuItem.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._focusMonitor) {
this._focusMonitor.stopMonitoring(this._getHostElement());
}
this._hovered.complete();
};
/** Used to set the `tabindex`. */
/**
* Used to set the `tabindex`.
* @return {?}
*/
MatMenuItem.prototype._getTabIndex = /**
* Used to set the `tabindex`.
* @return {?}
*/
function () {
return this.disabled ? '-1' : '0';
};
/** Returns the host DOM element. */
/**
* Returns the host DOM element.
* @return {?}
*/
MatMenuItem.prototype._getHostElement = /**
* Returns the host DOM element.
* @return {?}
*/
function () {
return this._elementRef.nativeElement;
};
/** Prevents the default element actions if it is disabled. */
/**
* Prevents the default element actions if it is disabled.
* @param {?} event
* @return {?}
*/
MatMenuItem.prototype._checkDisabled = /**
* Prevents the default element actions if it is disabled.
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled) {
event.preventDefault();
event.stopPropagation();
}
};
/** Emits to the hover stream. */
/**
* Emits to the hover stream.
* @return {?}
*/
MatMenuItem.prototype._emitHoverEvent = /**
* Emits to the hover stream.
* @return {?}
*/
function () {
if (!this.disabled) {
this._hovered.next(this);
}
};
/** Gets the label to be used when determining whether the option should be focused. */
/**
* Gets the label to be used when determining whether the option should be focused.
* @return {?}
*/
MatMenuItem.prototype.getLabel = /**
* Gets the label to be used when determining whether the option should be focused.
* @return {?}
*/
function () {
var /** @type {?} */ element = this._elementRef.nativeElement;
var /** @type {?} */ textNodeType = this._document ? this._document.TEXT_NODE : 3;
var /** @type {?} */ output = '';
if (element.childNodes) {
var /** @type {?} */ length_1 = element.childNodes.length;
// Go through all the top-level text nodes and extract their text.
// We skip anything that's not a text node to prevent the text from
// being thrown off by something like an icon.
for (var /** @type {?} */ i = 0; i < length_1; i++) {
if (element.childNodes[i].nodeType === textNodeType) {
output += element.childNodes[i].textContent;
}
}
}
return output.trim();
};
MatMenuItem.decorators = [
{ type: core.Component, args: [{ selector: '[mat-menu-item]',
exportAs: 'matMenuItem',
inputs: ['disabled', 'disableRipple'],
host: {
'role': 'menuitem',
'class': 'mat-menu-item',
'[class.mat-menu-item-highlighted]': '_highlighted',
'[class.mat-menu-item-submenu-trigger]': '_triggersSubmenu',
'[attr.tabindex]': '_getTabIndex()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.disabled]': 'disabled || null',
'(click)': '_checkDisabled($event)',
'(mouseenter)': '_emitHoverEvent()',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
template: "<ng-content></ng-content><div class=\"mat-menu-ripple\" matRipple [matRippleDisabled]=\"disableRipple || disabled\" [matRippleTrigger]=\"_getHostElement()\"></div>",
},] },
];
/** @nocollapse */
MatMenuItem.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] },] },
{ type: a11y.FocusMonitor, },
];
};
return MatMenuItem;
}(_MatMenuItemMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Menu content that will be rendered lazily once the menu is opened.
*/
var MatMenuContent = (function () {
function MatMenuContent(_template, _componentFactoryResolver, _appRef, _injector, _viewContainerRef, _document) {
this._template = _template;
this._componentFactoryResolver = _componentFactoryResolver;
this._appRef = _appRef;
this._injector = _injector;
this._viewContainerRef = _viewContainerRef;
this._document = _document;
}
/**
* Attaches the content with a particular context.
* @docs-private
*/
/**
* Attaches the content with a particular context.
* \@docs-private
* @param {?=} context
* @return {?}
*/
MatMenuContent.prototype.attach = /**
* Attaches the content with a particular context.
* \@docs-private
* @param {?=} context
* @return {?}
*/
function (context) {
if (context === void 0) {
context = {};
}
if (!this._portal) {
this._portal = new portal.TemplatePortal(this._template, this._viewContainerRef);
}
else if (this._portal.isAttached) {
this._portal.detach();
}
if (!this._outlet) {
this._outlet = new portal.DomPortalOutlet(this._document.createElement('div'), this._componentFactoryResolver, this._appRef, this._injector);
}
var /** @type {?} */ element = this._template.elementRef.nativeElement; /** @type {?} */
((
// Because we support opening the same menu from different triggers (which in turn have their
// own `OverlayRef` panel), we have to re-insert the host element every time, otherwise we
// risk it staying attached to a pane that's no longer in the DOM.
element.parentNode)).insertBefore(this._outlet.outletElement, element);
this._portal.attach(this._outlet, context);
};
/**
* @return {?}
*/
MatMenuContent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._outlet) {
this._outlet.dispose();
}
};
MatMenuContent.decorators = [
{ type: core.Directive, args: [{
selector: 'ng-template[matMenuContent]'
},] },
];
/** @nocollapse */
MatMenuContent.ctorParameters = function () {
return [
{ type: core.TemplateRef, },
{ type: core.ComponentFactoryResolver, },
{ type: core.ApplicationRef, },
{ type: core.Injector, },
{ type: core.ViewContainerRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
return MatMenuContent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Default `mat-menu` options that can be overridden.
* @record
*/
/**
* Injection token to be used to override the default options for `mat-menu`.
*/
var MAT_MENU_DEFAULT_OPTIONS = new core.InjectionToken('mat-menu-default-options');
/**
* Start elevation for the menu panel.
* \@docs-private
*/
var MAT_MENU_BASE_ELEVATION = 2;
var MatMenu = (function () {
function MatMenu(_elementRef, _ngZone, _defaultOptions) {
this._elementRef = _elementRef;
this._ngZone = _ngZone;
this._defaultOptions = _defaultOptions;
this._xPosition = this._defaultOptions.xPosition;
this._yPosition = this._defaultOptions.yPosition;
/**
* Subscription to tab events on the menu panel
*/
this._tabSubscription = Subscription.Subscription.EMPTY;
/**
* Config object to be passed into the menu's ngClass
*/
this._classList = {};
/**
* Current state of the panel animation.
*/
this._panelAnimationState = 'void';
this._overlapTrigger = this._defaultOptions.overlapTrigger;
/**
* Event emitted when the menu is closed.
*/
this.closed = new core.EventEmitter();
/**
* Event emitted when the menu is closed.
* @deprecated Switch to `closed` instead
* \@deletion-target 6.0.0
*/
this.close = this.closed;
}
Object.defineProperty(MatMenu.prototype, "xPosition", {
get: /**
* Position of the menu in the X axis.
* @return {?}
*/ function () { return this._xPosition; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value !== 'before' && value !== 'after') {
throwMatMenuInvalidPositionX();
}
this._xPosition = value;
this.setPositionClasses();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMenu.prototype, "yPosition", {
get: /**
* Position of the menu in the Y axis.
* @return {?}
*/ function () { return this._yPosition; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value !== 'above' && value !== 'below') {
throwMatMenuInvalidPositionY();
}
this._yPosition = value;
this.setPositionClasses();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMenu.prototype, "overlapTrigger", {
get: /**
* Whether the menu should overlap its trigger.
* @return {?}
*/ function () { return this._overlapTrigger; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._overlapTrigger = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMenu.prototype, "panelClass", {
set: /**
* This method takes classes set on the host mat-menu element and applies them on the
* menu template that displays in the overlay container. Otherwise, it's difficult
* to style the containing menu from outside the component.
* @param {?} classes list of class names
* @return {?}
*/ function (classes) {
if (classes && classes.length) {
this._classList = classes.split(' ').reduce(function (obj, className) {
obj[className] = true;
return obj;
}, {});
this._elementRef.nativeElement.className = '';
this.setPositionClasses();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMenu.prototype, "classList", {
get: /**
* This method takes classes set on the host mat-menu element and applies them on the
* menu template that displays in the overlay container. Otherwise, it's difficult
* to style the containing menu from outside the component.
* @deprecated Use `panelClass` instead.
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this.panelClass; },
set: /**
* @param {?} classes
* @return {?}
*/ function (classes) { this.panelClass = classes; },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatMenu.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._keyManager = new a11y.FocusKeyManager(this.items).withWrap().withTypeAhead();
this._tabSubscription = this._keyManager.tabOut.subscribe(function () { return _this.close.emit('keydown'); });
};
/**
* @return {?}
*/
MatMenu.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._tabSubscription.unsubscribe();
this.closed.complete();
};
/** Stream that emits whenever the hovered menu item changes. */
/**
* Stream that emits whenever the hovered menu item changes.
* @return {?}
*/
MatMenu.prototype._hovered = /**
* Stream that emits whenever the hovered menu item changes.
* @return {?}
*/
function () {
var _this = this;
if (this.items) {
return this.items.changes.pipe(startWith_2(this.items), switchMap_2(function (items) { return merge.merge.apply(void 0, items.map(function (item) { return item._hovered; })); }));
}
return this._ngZone.onStable
.asObservable()
.pipe(take_2(1), switchMap_2(function () { return _this._hovered(); }));
};
/** Handle a keyboard event from the menu, delegating to the appropriate action. */
/**
* Handle a keyboard event from the menu, delegating to the appropriate action.
* @param {?} event
* @return {?}
*/
MatMenu.prototype._handleKeydown = /**
* Handle a keyboard event from the menu, delegating to the appropriate action.
* @param {?} event
* @return {?}
*/
function (event) {
switch (event.keyCode) {
case keycodes.ESCAPE:
this.closed.emit('keydown');
event.stopPropagation();
break;
case keycodes.LEFT_ARROW:
if (this.parentMenu && this.direction === 'ltr') {
this.closed.emit('keydown');
}
break;
case keycodes.RIGHT_ARROW:
if (this.parentMenu && this.direction === 'rtl') {
this.closed.emit('keydown');
}
break;
default:
this._keyManager.onKeydown(event);
}
};
/**
* Focus the first item in the menu.
* @param origin Action from which the focus originated. Used to set the correct styling.
*/
/**
* Focus the first item in the menu.
* @param {?=} origin Action from which the focus originated. Used to set the correct styling.
* @return {?}
*/
MatMenu.prototype.focusFirstItem = /**
* Focus the first item in the menu.
* @param {?=} origin Action from which the focus originated. Used to set the correct styling.
* @return {?}
*/
function (origin) {
var _this = this;
if (origin === void 0) {
origin = 'program';
}
// When the content is rendered lazily, it takes a bit before the items are inside the DOM.
if (this.lazyContent) {
this._ngZone.onStable.asObservable()
.pipe(take_2(1))
.subscribe(function () { return _this._keyManager.setFocusOrigin(origin).setFirstItemActive(); });
}
else {
this._keyManager.setFocusOrigin(origin).setFirstItemActive();
}
};
/**
* Resets the active item in the menu. This is used when the menu is opened, allowing
* the user to start from the first option when pressing the down arrow.
*/
/**
* Resets the active item in the menu. This is used when the menu is opened, allowing
* the user to start from the first option when pressing the down arrow.
* @return {?}
*/
MatMenu.prototype.resetActiveItem = /**
* Resets the active item in the menu. This is used when the menu is opened, allowing
* the user to start from the first option when pressing the down arrow.
* @return {?}
*/
function () {
this._keyManager.setActiveItem(-1);
};
/**
* It's necessary to set position-based classes to ensure the menu panel animation
* folds out from the correct direction.
*/
/**
* It's necessary to set position-based classes to ensure the menu panel animation
* folds out from the correct direction.
* @param {?=} posX
* @param {?=} posY
* @return {?}
*/
MatMenu.prototype.setPositionClasses = /**
* It's necessary to set position-based classes to ensure the menu panel animation
* folds out from the correct direction.
* @param {?=} posX
* @param {?=} posY
* @return {?}
*/
function (posX, posY) {
if (posX === void 0) {
posX = this.xPosition;
}
if (posY === void 0) {
posY = this.yPosition;
}
this._classList['mat-menu-before'] = posX === 'before';
this._classList['mat-menu-after'] = posX === 'after';
this._classList['mat-menu-above'] = posY === 'above';
this._classList['mat-menu-below'] = posY === 'below';
};
/**
* Sets the menu panel elevation.
* @param depth Number of parent menus that come before the menu.
*/
/**
* Sets the menu panel elevation.
* @param {?} depth Number of parent menus that come before the menu.
* @return {?}
*/
MatMenu.prototype.setElevation = /**
* Sets the menu panel elevation.
* @param {?} depth Number of parent menus that come before the menu.
* @return {?}
*/
function (depth) {
// The elevation starts at the base and increases by one for each level.
var /** @type {?} */ newElevation = "mat-elevation-z" + (MAT_MENU_BASE_ELEVATION + depth);
var /** @type {?} */ customElevation = Object.keys(this._classList).find(function (c) { return c.startsWith('mat-elevation-z'); });
if (!customElevation || customElevation === this._previousElevation) {
if (this._previousElevation) {
this._classList[this._previousElevation] = false;
}
this._classList[newElevation] = true;
this._previousElevation = newElevation;
}
};
/** Starts the enter animation. */
/**
* Starts the enter animation.
* @return {?}
*/
MatMenu.prototype._startAnimation = /**
* Starts the enter animation.
* @return {?}
*/
function () {
this._panelAnimationState = 'enter-start';
};
/** Resets the panel animation to its initial state. */
/**
* Resets the panel animation to its initial state.
* @return {?}
*/
MatMenu.prototype._resetAnimation = /**
* Resets the panel animation to its initial state.
* @return {?}
*/
function () {
this._panelAnimationState = 'void';
};
/** Callback that is invoked when the panel animation completes. */
/**
* Callback that is invoked when the panel animation completes.
* @param {?} event
* @return {?}
*/
MatMenu.prototype._onAnimationDone = /**
* Callback that is invoked when the panel animation completes.
* @param {?} event
* @return {?}
*/
function (event) {
// After the initial expansion is done, trigger the second phase of the enter animation.
if (event.toState === 'enter-start') {
this._panelAnimationState = 'enter';
}
};
MatMenu.decorators = [
{ type: core.Component, args: [{ selector: 'mat-menu',
template: "<ng-template><div class=\"mat-menu-panel\" [ngClass]=\"_classList\" (keydown)=\"_handleKeydown($event)\" (click)=\"closed.emit('click')\" [@transformMenu]=\"_panelAnimationState\" (@transformMenu.done)=\"_onAnimationDone($event)\" tabindex=\"-1\" role=\"menu\"><div class=\"mat-menu-content\" [@fadeInItems]=\"'showing'\"><ng-content></ng-content></div></div></ng-template>",
styles: [".mat-menu-panel{-webkit-backface-visibility:hidden;backface-visibility:hidden;min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 48px);border-radius:2px;outline:0}.mat-menu-panel:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-menu-panel.mat-menu-after.mat-menu-below{transform-origin:left top}.mat-menu-panel.mat-menu-after.mat-menu-above{transform-origin:left bottom}.mat-menu-panel.mat-menu-before.mat-menu-below{transform-origin:right top}.mat-menu-panel.mat-menu-before.mat-menu-above{transform-origin:right bottom}[dir=rtl] .mat-menu-panel.mat-menu-after.mat-menu-below{transform-origin:right top}[dir=rtl] .mat-menu-panel.mat-menu-after.mat-menu-above{transform-origin:right bottom}[dir=rtl] .mat-menu-panel.mat-menu-before.mat-menu-below{transform-origin:left top}[dir=rtl] .mat-menu-panel.mat-menu-before.mat-menu-above{transform-origin:left bottom}.mat-menu-panel.ng-animating{pointer-events:none}@media screen and (-ms-high-contrast:active){.mat-menu-panel{outline:solid 1px}}.mat-menu-content{padding-top:8px;padding-bottom:8px}.mat-menu-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;position:relative}.mat-menu-item[disabled]{cursor:default}[dir=rtl] .mat-menu-item{text-align:right}.mat-menu-item .mat-icon{margin-right:16px;vertical-align:middle}[dir=rtl] .mat-menu-item .mat-icon{margin-left:16px;margin-right:0}.mat-menu-item-submenu-trigger{padding-right:32px}.mat-menu-item-submenu-trigger::after{width:0;height:0;border-style:solid;border-width:5px 0 5px 5px;border-color:transparent transparent transparent currentColor;content:'';display:inline-block;position:absolute;top:50%;right:16px;transform:translateY(-50%)}[dir=rtl] .mat-menu-item-submenu-trigger{padding-right:16px;padding-left:32px}[dir=rtl] .mat-menu-item-submenu-trigger::after{right:auto;left:16px;transform:rotateY(180deg) translateY(-50%)}button.mat-menu-item{width:100%}.mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}"],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
animations: [
matMenuAnimations.transformMenu,
matMenuAnimations.fadeInItems
],
exportAs: 'matMenu'
},] },
];
/** @nocollapse */
MatMenu.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.NgZone, },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_MENU_DEFAULT_OPTIONS,] },] },
];
};
MatMenu.propDecorators = {
"xPosition": [{ type: core.Input },],
"yPosition": [{ type: core.Input },],
"templateRef": [{ type: core.ViewChild, args: [core.TemplateRef,] },],
"items": [{ type: core.ContentChildren, args: [MatMenuItem, { descendants: true },] },],
"lazyContent": [{ type: core.ContentChild, args: [MatMenuContent,] },],
"overlapTrigger": [{ type: core.Input },],
"panelClass": [{ type: core.Input, args: ['class',] },],
"classList": [{ type: core.Input },],
"closed": [{ type: core.Output },],
"close": [{ type: core.Output },],
};
return MatMenu;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Injection token that determines the scroll handling while the menu is open.
*/
var MAT_MENU_SCROLL_STRATEGY = new core.InjectionToken('mat-menu-scroll-strategy');
/**
* Default top padding of the menu panel.
*/
var MENU_PANEL_TOP_PADDING = 8;
/**
* This directive is intended to be used in conjunction with an mat-menu tag. It is
* responsible for toggling the display of the provided menu instance.
*/
var MatMenuTrigger = (function () {
function MatMenuTrigger(_overlay, _element, _viewContainerRef, _scrollStrategy, _parentMenu, _menuItemInstance, _dir, _focusMonitor) {
this._overlay = _overlay;
this._element = _element;
this._viewContainerRef = _viewContainerRef;
this._scrollStrategy = _scrollStrategy;
this._parentMenu = _parentMenu;
this._menuItemInstance = _menuItemInstance;
this._dir = _dir;
this._focusMonitor = _focusMonitor;
this._overlayRef = null;
this._menuOpen = false;
this._closeSubscription = Subscription.Subscription.EMPTY;
this._hoverSubscription = Subscription.Subscription.EMPTY;
this._openedByMouse = false;
/**
* Event emitted when the associated menu is opened.
*/
this.menuOpened = new core.EventEmitter();
/**
* Event emitted when the associated menu is opened.
* @deprecated Switch to `menuOpened` instead
* \@deletion-target 6.0.0
*/
this.onMenuOpen = this.menuOpened;
/**
* Event emitted when the associated menu is closed.
*/
this.menuClosed = new core.EventEmitter();
/**
* Event emitted when the associated menu is closed.
* @deprecated Switch to `menuClosed` instead
* \@deletion-target 6.0.0
*/
this.onMenuClose = this.menuClosed;
if (_menuItemInstance) {
_menuItemInstance._triggersSubmenu = this.triggersSubmenu();
}
}
Object.defineProperty(MatMenuTrigger.prototype, "_deprecatedMatMenuTriggerFor", {
get: /**
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () {
return this.menu;
},
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this.menu = v;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatMenuTrigger.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._checkMenu();
this.menu.close.subscribe(function (reason) {
_this._destroyMenu();
// If a click closed the menu, we should close the entire chain of nested menus.
if (reason === 'click' && _this._parentMenu) {
_this._parentMenu.closed.emit(reason);
}
});
if (this.triggersSubmenu()) {
// Subscribe to changes in the hovered item in order to toggle the panel.
this._hoverSubscription = this._parentMenu._hovered()
.pipe(filter_2(function (active) { return active === _this._menuItemInstance; }))
.subscribe(function () {
_this._openedByMouse = true;
_this.openMenu();
});
}
};
/**
* @return {?}
*/
MatMenuTrigger.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._overlayRef) {
this._overlayRef.dispose();
this._overlayRef = null;
}
this._cleanUpSubscriptions();
};
Object.defineProperty(MatMenuTrigger.prototype, "menuOpen", {
/** Whether the menu is open. */
get: /**
* Whether the menu is open.
* @return {?}
*/ function () {
return this._menuOpen;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatMenuTrigger.prototype, "dir", {
/** The text direction of the containing app. */
get: /**
* The text direction of the containing app.
* @return {?}
*/ function () {
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
},
enumerable: true,
configurable: true
});
/** Whether the menu triggers a sub-menu or a top-level one. */
/**
* Whether the menu triggers a sub-menu or a top-level one.
* @return {?}
*/
MatMenuTrigger.prototype.triggersSubmenu = /**
* Whether the menu triggers a sub-menu or a top-level one.
* @return {?}
*/
function () {
return !!(this._menuItemInstance && this._parentMenu);
};
/** Toggles the menu between the open and closed states. */
/**
* Toggles the menu between the open and closed states.
* @return {?}
*/
MatMenuTrigger.prototype.toggleMenu = /**
* Toggles the menu between the open and closed states.
* @return {?}
*/
function () {
return this._menuOpen ? this.closeMenu() : this.openMenu();
};
/** Opens the menu. */
/**
* Opens the menu.
* @return {?}
*/
MatMenuTrigger.prototype.openMenu = /**
* Opens the menu.
* @return {?}
*/
function () {
var _this = this;
if (this._menuOpen) {
return;
}
this._createOverlay().attach(this._portal);
if (this.menu.lazyContent) {
this.menu.lazyContent.attach(this.menuData);
}
this._closeSubscription = this._menuClosingActions().subscribe(function () { return _this.closeMenu(); });
this._initMenu();
if (this.menu instanceof MatMenu) {
this.menu._startAnimation();
}
};
/** Closes the menu. */
/**
* Closes the menu.
* @return {?}
*/
MatMenuTrigger.prototype.closeMenu = /**
* Closes the menu.
* @return {?}
*/
function () {
this.menu.close.emit();
};
/**
* Focuses the menu trigger.
* @param origin Source of the menu trigger's focus.
*/
/**
* Focuses the menu trigger.
* @param {?=} origin Source of the menu trigger's focus.
* @return {?}
*/
MatMenuTrigger.prototype.focus = /**
* Focuses the menu trigger.
* @param {?=} origin Source of the menu trigger's focus.
* @return {?}
*/
function (origin) {
if (origin === void 0) {
origin = 'program';
}
if (this._focusMonitor) {
this._focusMonitor.focusVia(this._element.nativeElement, origin);
}
else {
this._element.nativeElement.focus();
}
};
/**
* Closes the menu and does the necessary cleanup.
* @return {?}
*/
MatMenuTrigger.prototype._destroyMenu = /**
* Closes the menu and does the necessary cleanup.
* @return {?}
*/
function () {
if (this._overlayRef && this.menuOpen) {
this._resetMenu();
this._closeSubscription.unsubscribe();
this._overlayRef.detach();
if (this.menu instanceof MatMenu) {
this.menu._resetAnimation();
}
}
};
/**
* This method sets the menu state to open and focuses the first item if
* the menu was opened via the keyboard.
* @return {?}
*/
MatMenuTrigger.prototype._initMenu = /**
* This method sets the menu state to open and focuses the first item if
* the menu was opened via the keyboard.
* @return {?}
*/
function () {
this.menu.parentMenu = this.triggersSubmenu() ? this._parentMenu : undefined;
this.menu.direction = this.dir;
this._setMenuElevation();
this._setIsMenuOpen(true);
this.menu.focusFirstItem(this._openedByMouse ? 'mouse' : 'program');
};
/**
* Updates the menu elevation based on the amount of parent menus that it has.
* @return {?}
*/
MatMenuTrigger.prototype._setMenuElevation = /**
* Updates the menu elevation based on the amount of parent menus that it has.
* @return {?}
*/
function () {
if (this.menu.setElevation) {
var /** @type {?} */ depth = 0;
var /** @type {?} */ parentMenu = this.menu.parentMenu;
while (parentMenu) {
depth++;
parentMenu = parentMenu.parentMenu;
}
this.menu.setElevation(depth);
}
};
/**
* This method resets the menu when it's closed, most importantly restoring
* focus to the menu trigger if the menu was opened via the keyboard.
* @return {?}
*/
MatMenuTrigger.prototype._resetMenu = /**
* This method resets the menu when it's closed, most importantly restoring
* focus to the menu trigger if the menu was opened via the keyboard.
* @return {?}
*/
function () {
this._setIsMenuOpen(false);
// We should reset focus if the user is navigating using a keyboard or
// if we have a top-level trigger which might cause focus to be lost
// when clicking on the backdrop.
if (!this._openedByMouse) {
// Note that the focus style will show up both for `program` and
// `keyboard` so we don't have to specify which one it is.
this.focus();
}
else if (!this.triggersSubmenu()) {
this.focus('mouse');
}
this._openedByMouse = false;
};
/**
* @param {?} isOpen
* @return {?}
*/
MatMenuTrigger.prototype._setIsMenuOpen = /**
* @param {?} isOpen
* @return {?}
*/
function (isOpen) {
this._menuOpen = isOpen;
this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit();
if (this.triggersSubmenu()) {
this._menuItemInstance._highlighted = isOpen;
}
};
/**
* This method checks that a valid instance of MatMenu has been passed into
* matMenuTriggerFor. If not, an exception is thrown.
* @return {?}
*/
MatMenuTrigger.prototype._checkMenu = /**
* This method checks that a valid instance of MatMenu has been passed into
* matMenuTriggerFor. If not, an exception is thrown.
* @return {?}
*/
function () {
if (!this.menu) {
throwMatMenuMissingError();
}
};
/**
* This method creates the overlay from the provided menu's template and saves its
* OverlayRef so that it can be attached to the DOM when openMenu is called.
* @return {?}
*/
MatMenuTrigger.prototype._createOverlay = /**
* This method creates the overlay from the provided menu's template and saves its
* OverlayRef so that it can be attached to the DOM when openMenu is called.
* @return {?}
*/
function () {
if (!this._overlayRef) {
this._portal = new portal.TemplatePortal(this.menu.templateRef, this._viewContainerRef);
var /** @type {?} */ config = this._getOverlayConfig();
this._subscribeToPositions(/** @type {?} */ (config.positionStrategy));
this._overlayRef = this._overlay.create(config);
}
return this._overlayRef;
};
/**
* This method builds the configuration object needed to create the overlay, the OverlayState.
* @return {?} OverlayConfig
*/
MatMenuTrigger.prototype._getOverlayConfig = /**
* This method builds the configuration object needed to create the overlay, the OverlayState.
* @return {?} OverlayConfig
*/
function () {
return new overlay.OverlayConfig({
positionStrategy: this._getPosition(),
hasBackdrop: !this.triggersSubmenu(),
backdropClass: 'cdk-overlay-transparent-backdrop',
direction: this.dir,
scrollStrategy: this._scrollStrategy()
});
};
/**
* Listens to changes in the position of the overlay and sets the correct classes
* on the menu based on the new position. This ensures the animation origin is always
* correct, even if a fallback position is used for the overlay.
* @param {?} position
* @return {?}
*/
MatMenuTrigger.prototype._subscribeToPositions = /**
* Listens to changes in the position of the overlay and sets the correct classes
* on the menu based on the new position. This ensures the animation origin is always
* correct, even if a fallback position is used for the overlay.
* @param {?} position
* @return {?}
*/
function (position) {
var _this = this;
position.onPositionChange.subscribe(function (change) {
var /** @type {?} */ posX = change.connectionPair.overlayX === 'start' ? 'after' : 'before';
var /** @type {?} */ posY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
_this.menu.setPositionClasses(posX, posY);
});
};
/**
* This method builds the position strategy for the overlay, so the menu is properly connected
* to the trigger.
* @return {?} ConnectedPositionStrategy
*/
MatMenuTrigger.prototype._getPosition = /**
* This method builds the position strategy for the overlay, so the menu is properly connected
* to the trigger.
* @return {?} ConnectedPositionStrategy
*/
function () {
var _a = this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'], originX = _a[0], originFallbackX = _a[1];
var _b = this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'], overlayY = _b[0], overlayFallbackY = _b[1];
var _c = [overlayY, overlayFallbackY], originY = _c[0], originFallbackY = _c[1];
var _d = [originX, originFallbackX], overlayX = _d[0], overlayFallbackX = _d[1];
var /** @type {?} */ offsetY = 0;
if (this.triggersSubmenu()) {
// When the menu is a sub-menu, it should always align itself
// to the edges of the trigger, instead of overlapping it.
overlayFallbackX = originX = this.menu.xPosition === 'before' ? 'start' : 'end';
originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
offsetY = overlayY === 'bottom' ? MENU_PANEL_TOP_PADDING : -MENU_PANEL_TOP_PADDING;
}
else if (!this.menu.overlapTrigger) {
originY = overlayY === 'top' ? 'bottom' : 'top';
originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
}
return this._overlay.position()
.connectedTo(this._element, { originX: originX, originY: originY }, { overlayX: overlayX, overlayY: overlayY })
.withDirection(this.dir)
.withOffsetY(offsetY)
.withFallbackPosition({ originX: originFallbackX, originY: originY }, { overlayX: overlayFallbackX, overlayY: overlayY })
.withFallbackPosition({ originX: originX, originY: originFallbackY }, { overlayX: overlayX, overlayY: overlayFallbackY }, undefined, -offsetY)
.withFallbackPosition({ originX: originFallbackX, originY: originFallbackY }, { overlayX: overlayFallbackX, overlayY: overlayFallbackY }, undefined, -offsetY);
};
/**
* Cleans up the active subscriptions.
* @return {?}
*/
MatMenuTrigger.prototype._cleanUpSubscriptions = /**
* Cleans up the active subscriptions.
* @return {?}
*/
function () {
this._closeSubscription.unsubscribe();
this._hoverSubscription.unsubscribe();
};
/**
* Returns a stream that emits whenever an action that should close the menu occurs.
* @return {?}
*/
MatMenuTrigger.prototype._menuClosingActions = /**
* Returns a stream that emits whenever an action that should close the menu occurs.
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ backdrop = ((this._overlayRef)).backdropClick();
var /** @type {?} */ detachments = ((this._overlayRef)).detachments();
var /** @type {?} */ parentClose = this._parentMenu ? this._parentMenu.close : of.of();
var /** @type {?} */ hover = this._parentMenu ? this._parentMenu._hovered().pipe(filter_2(function (active) { return active !== _this._menuItemInstance; }), filter_2(function () { return _this._menuOpen; })) : of.of();
return merge.merge(backdrop, parentClose, hover, detachments);
};
/** Handles mouse presses on the trigger. */
/**
* Handles mouse presses on the trigger.
* @param {?} event
* @return {?}
*/
MatMenuTrigger.prototype._handleMousedown = /**
* Handles mouse presses on the trigger.
* @param {?} event
* @return {?}
*/
function (event) {
if (!a11y.isFakeMousedownFromScreenReader(event)) {
this._openedByMouse = true;
// Since clicking on the trigger won't close the menu if it opens a sub-menu,
// we should prevent focus from moving onto it via click to avoid the
// highlight from lingering on the menu item.
if (this.triggersSubmenu()) {
event.preventDefault();
}
}
};
/** Handles key presses on the trigger. */
/**
* Handles key presses on the trigger.
* @param {?} event
* @return {?}
*/
MatMenuTrigger.prototype._handleKeydown = /**
* Handles key presses on the trigger.
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ keyCode = event.keyCode;
if (this.triggersSubmenu() && ((keyCode === keycodes.RIGHT_ARROW && this.dir === 'ltr') ||
(keyCode === keycodes.LEFT_ARROW && this.dir === 'rtl'))) {
this.openMenu();
}
};
/** Handles click events on the trigger. */
/**
* Handles click events on the trigger.
* @param {?} event
* @return {?}
*/
MatMenuTrigger.prototype._handleClick = /**
* Handles click events on the trigger.
* @param {?} event
* @return {?}
*/
function (event) {
if (this.triggersSubmenu()) {
// Stop event propagation to avoid closing the parent menu.
event.stopPropagation();
this.openMenu();
}
else {
this.toggleMenu();
}
};
MatMenuTrigger.decorators = [
{ type: core.Directive, args: [{
selector: "[mat-menu-trigger-for], [matMenuTriggerFor]",
host: {
'aria-haspopup': 'true',
'(mousedown)': '_handleMousedown($event)',
'(keydown)': '_handleKeydown($event)',
'(click)': '_handleClick($event)',
},
exportAs: 'matMenuTrigger'
},] },
];
/** @nocollapse */
MatMenuTrigger.ctorParameters = function () {
return [
{ type: overlay.Overlay, },
{ type: core.ElementRef, },
{ type: core.ViewContainerRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_MENU_SCROLL_STRATEGY,] },] },
{ type: MatMenu, decorators: [{ type: core.Optional },] },
{ type: MatMenuItem, decorators: [{ type: core.Optional }, { type: core.Self },] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: a11y.FocusMonitor, },
];
};
MatMenuTrigger.propDecorators = {
"_deprecatedMatMenuTriggerFor": [{ type: core.Input, args: ['mat-menu-trigger-for',] },],
"menu": [{ type: core.Input, args: ['matMenuTriggerFor',] },],
"menuData": [{ type: core.Input, args: ['matMenuTriggerData',] },],
"menuOpened": [{ type: core.Output },],
"onMenuOpen": [{ type: core.Output },],
"menuClosed": [{ type: core.Output },],
"onMenuClose": [{ type: core.Output },],
};
return MatMenuTrigger;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The following are all the animations for the mat-select component, with each
* const containing the metadata for one animation.
*
* The values below match the implementation of the AngularJS Material mat-select animation.
*/
var matSelectAnimations = {
/**
* This animation transforms the select's overlay panel on and off the page.
*
* When the panel is attached to the DOM, it expands its width by the amount of padding, scales it
* up to 100% on the Y axis, fades in its border, and translates slightly up and to the
* side to ensure the option text correctly overlaps the trigger text.
*
* When the panel is removed from the DOM, it simply fades out linearly.
*/
transformPanel: animations.trigger('transformPanel', [
animations.state('showing', animations.style({
opacity: 1,
minWidth: 'calc(100% + 32px)',
// 32px = 2 * 16px padding
transform: 'scaleY(1)'
})),
animations.state('showing-multiple', animations.style({
opacity: 1,
minWidth: 'calc(100% + 64px)',
// 64px = 48px padding on the left + 16px padding on the right
transform: 'scaleY(1)'
})),
animations.transition('void => *', [
animations.style({
opacity: 0,
minWidth: '100%',
transform: 'scaleY(0)'
}),
animations.animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
]),
animations.transition('* => void', [
animations.animate('250ms 100ms linear', animations.style({ opacity: 0 }))
])
]),
/**
* This animation fades in the background color and text content of the
* select's options. It is time delayed to occur 100ms after the overlay
* panel has transformed in.
*/
fadeInContent: animations.trigger('fadeInContent', [
animations.state('showing', animations.style({ opacity: 1 })),
animations.transition('void => showing', [
animations.style({ opacity: 0 }),
animations.animate('150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
])
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Returns an exception to be thrown when attempting to change a select's `multiple` option
* after initialization.
* \@docs-private
* @return {?}
*/
function getMatSelectDynamicMultipleError() {
return Error('Cannot change `multiple` mode of select after initialization.');
}
/**
* Returns an exception to be thrown when attempting to assign a non-array value to a select
* in `multiple` mode. Note that `undefined` and `null` are still valid values to allow for
* resetting the value.
* \@docs-private
* @return {?}
*/
function getMatSelectNonArrayValueError() {
return Error('Value must be an array in multiple-selection mode.');
}
/**
* Returns an exception to be thrown when assigning a non-function value to the comparator
* used to determine if a value corresponds to an option. Note that whether the function
* actually takes two values and returns a boolean is not checked.
* @return {?}
*/
function getMatSelectNonFunctionValueError() {
return Error('`compareWith` must be a function.');
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var nextUniqueId$4 = 0;
/**
* The max height of the select's overlay panel
*/
var SELECT_PANEL_MAX_HEIGHT = 256;
/**
* The panel's padding on the x-axis
*/
var SELECT_PANEL_PADDING_X = 16;
/**
* The panel's x axis padding if it is indented (e.g. there is an option group).
*/
var SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
/**
* The height of the select items in `em` units.
*/
var SELECT_ITEM_HEIGHT_EM = 3;
/**
* Distance between the panel edge and the option text in
* multi-selection mode.
*
* (SELECT_PANEL_PADDING_X * 1.5) + 20 = 44
* The padding is multiplied by 1.5 because the checkbox's margin is half the padding.
* The checkbox width is 20px.
*/
var SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + 20;
/**
* The select panel will only "fit" inside the viewport if it is positioned at
* this value or more away from the viewport boundary.
*/
var SELECT_PANEL_VIEWPORT_PADDING = 8;
/**
* Injection token that determines the scroll handling while a select is open.
*/
var MAT_SELECT_SCROLL_STRATEGY = new core.InjectionToken('mat-select-scroll-strategy');
/**
* Change event object that is emitted when the select value has changed.
*/
var MatSelectChange = (function () {
function MatSelectChange(source, value) {
this.source = source;
this.value = value;
}
return MatSelectChange;
}());
/**
* \@docs-private
*/
var MatSelectBase = (function () {
function MatSelectBase(_elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
this._elementRef = _elementRef;
this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
this._parentForm = _parentForm;
this._parentFormGroup = _parentFormGroup;
this.ngControl = ngControl;
}
return MatSelectBase;
}());
var _MatSelectMixinBase = mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));
/**
* Allows the user to customize the trigger that is displayed when the select has a value.
*/
var MatSelectTrigger = (function () {
function MatSelectTrigger() {
}
MatSelectTrigger.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-select-trigger'
},] },
];
/** @nocollapse */
MatSelectTrigger.ctorParameters = function () { return []; };
return MatSelectTrigger;
}());
var MatSelect = (function (_super) {
__extends(MatSelect, _super);
function MatSelect(_viewportRuler, _changeDetectorRef, _ngZone, _defaultErrorStateMatcher, elementRef, _dir, _parentForm, _parentFormGroup, _parentFormField, ngControl, tabIndex, _scrollStrategyFactory) {
var _this = _super.call(this, elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
_this._viewportRuler = _viewportRuler;
_this._changeDetectorRef = _changeDetectorRef;
_this._ngZone = _ngZone;
_this._dir = _dir;
_this._parentFormField = _parentFormField;
_this.ngControl = ngControl;
_this._scrollStrategyFactory = _scrollStrategyFactory;
/**
* Whether or not the overlay panel is open.
*/
_this._panelOpen = false;
/**
* Whether filling out the select is required in the form.
*/
_this._required = false;
/**
* The scroll position of the overlay panel, calculated to center the selected option.
*/
_this._scrollTop = 0;
/**
* Whether the component is in multiple selection mode.
*/
_this._multiple = false;
/**
* Comparison function to specify which option is displayed. Defaults to object equality.
*/
_this._compareWith = function (o1, o2) { return o1 === o2; };
/**
* Unique id for this input.
*/
_this._uid = "mat-select-" + nextUniqueId$4++;
/**
* Emits whenever the component is destroyed.
*/
_this._destroy = new Subject.Subject();
/**
* The cached font-size of the trigger element.
*/
_this._triggerFontSize = 0;
/**
* `View -> model callback called when value changes`
*/
_this._onChange = function () { };
/**
* `View -> model callback called when select has been touched`
*/
_this._onTouched = function () { };
/**
* The IDs of child options to be passed to the aria-owns attribute.
*/
_this._optionIds = '';
/**
* The value of the select panel's transform-origin property.
*/
_this._transformOrigin = 'top';
/**
* Whether the panel's animation is done.
*/
_this._panelDoneAnimating = false;
/**
* Strategy that will be used to handle scrolling while the select panel is open.
*/
_this._scrollStrategy = _this._scrollStrategyFactory();
/**
* The y-offset of the overlay panel in relation to the trigger's top start corner.
* This must be adjusted to align the selected option text over the trigger text.
* when the panel opens. Will change based on the y-position of the selected option.
*/
_this._offsetY = 0;
/**
* This position config ensures that the top "start" corner of the overlay
* is aligned with with the top "start" of the origin by default (overlapping
* the trigger completely). If the panel cannot fit below the trigger, it
* will fall back to a position above the trigger.
*/
_this._positions = [
{
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'top',
},
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'bottom',
},
];
/**
* Whether the select is focused.
*/
_this.focused = false;
/**
* A name for this control that can be used by `mat-form-field`.
*/
_this.controlType = 'mat-select';
/**
* Aria label of the select. If not specified, the placeholder will be used as label.
*/
_this.ariaLabel = '';
/**
* Combined stream of all of the child options' change events.
*/
_this.optionSelectionChanges = defer.defer(function () {
if (_this.options) {
return merge.merge.apply(void 0, _this.options.map(function (option) { return option.onSelectionChange; }));
}
return _this._ngZone.onStable
.asObservable()
.pipe(take_2(1), switchMap_2(function () { return _this.optionSelectionChanges; }));
});
/**
* Event emitted when the select panel has been toggled.
*/
_this.openedChange = new core.EventEmitter();
/**
* Event emitted when the select has been opened.
* @deprecated Use `openedChange` instead.
* \@deletion-target 6.0.0
*/
_this.onOpen = _this._openedStream;
/**
* Event emitted when the select has been closed.
* @deprecated Use `openedChange` instead.
* \@deletion-target 6.0.0
*/
_this.onClose = _this._closedStream;
/**
* Event emitted when the selected value has been changed by the user.
*/
_this.selectionChange = new core.EventEmitter();
/**
* Event emitted when the selected value has been changed by the user.
* @deprecated Use `selectionChange` instead.
* \@deletion-target 6.0.0
*/
_this.change = _this.selectionChange;
/**
* Event that emits whenever the raw value of the select changes. This is here primarily
* to facilitate the two-way binding for the `value` input.
* \@docs-private
*/
_this.valueChange = new core.EventEmitter();
if (_this.ngControl) {
// Note: we provide the value accessor through here, instead of
// the `providers` to avoid running into a circular import.
// Note: we provide the value accessor through here, instead of
// the `providers` to avoid running into a circular import.
_this.ngControl.valueAccessor = _this;
}
_this.tabIndex = parseInt(tabIndex) || 0;
// Force setter to be called in case id was not specified.
// Force setter to be called in case id was not specified.
_this.id = _this.id;
return _this;
}
Object.defineProperty(MatSelect.prototype, "placeholder", {
get: /**
* Placeholder to be shown if no value has been selected.
* @return {?}
*/ function () { return this._placeholder; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._placeholder = value;
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "required", {
get: /**
* Whether the component is required.
* @return {?}
*/ function () { return this._required; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._required = coercion.coerceBooleanProperty(value);
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "multiple", {
get: /**
* Whether the user should be allowed to select multiple options.
* @return {?}
*/ function () { return this._multiple; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (this._selectionModel) {
throw getMatSelectDynamicMultipleError();
}
this._multiple = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "compareWith", {
get: /**
* A function to compare the option values with the selected values. The first argument
* is a value from an option. The second is a value from the selection. A boolean
* should be returned.
* @return {?}
*/ function () { return this._compareWith; },
set: /**
* @param {?} fn
* @return {?}
*/ function (fn) {
if (typeof fn !== 'function') {
throw getMatSelectNonFunctionValueError();
}
this._compareWith = fn;
if (this._selectionModel) {
// A different comparator means the selection could change.
this._initializeSelection();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "value", {
get: /**
* Value of the select control.
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} newValue
* @return {?}
*/ function (newValue) {
if (newValue !== this._value) {
this.writeValue(newValue);
this._value = newValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "id", {
get: /**
* Unique id of the element.
* @return {?}
*/ function () { return this._id; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._id = value || this._uid;
this.stateChanges.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "_openedStream", {
get: /**
* Event emitted when the select has been opened.
* @return {?}
*/ function () {
return this.openedChange.pipe(filter_2(function (o) { return o; }), map_2(function () { }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "_closedStream", {
get: /**
* Event emitted when the select has been closed.
* @return {?}
*/ function () {
return this.openedChange.pipe(filter_2(function (o) { return !o; }), map_2(function () { }));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatSelect.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._selectionModel = new collections.SelectionModel(this.multiple, undefined, false);
this.stateChanges.next();
};
/**
* @return {?}
*/
MatSelect.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._initKeyManager();
this.options.changes.pipe(startWith_2(null), takeUntil_2(this._destroy)).subscribe(function () {
_this._resetOptions();
_this._initializeSelection();
});
};
/**
* @return {?}
*/
MatSelect.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this.ngControl) {
this.updateErrorState();
}
};
/**
* @param {?} changes
* @return {?}
*/
MatSelect.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
// Updating the disabled state is handled by `mixinDisabled`, but we need to additionally let
// the parent form field know to run change detection when the disabled state changes.
if (changes["disabled"]) {
this.stateChanges.next();
}
};
/**
* @return {?}
*/
MatSelect.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroy.next();
this._destroy.complete();
this.stateChanges.complete();
};
/** Toggles the overlay panel open or closed. */
/**
* Toggles the overlay panel open or closed.
* @return {?}
*/
MatSelect.prototype.toggle = /**
* Toggles the overlay panel open or closed.
* @return {?}
*/
function () {
this.panelOpen ? this.close() : this.open();
};
/** Opens the overlay panel. */
/**
* Opens the overlay panel.
* @return {?}
*/
MatSelect.prototype.open = /**
* Opens the overlay panel.
* @return {?}
*/
function () {
var _this = this;
if (this.disabled || !this.options || !this.options.length) {
return;
}
this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();
// Note: The computed font-size will be a string pixel value (e.g. "16px").
// `parseInt` ignores the trailing 'px' and converts this to a number.
this._triggerFontSize = parseInt(getComputedStyle(this.trigger.nativeElement)['font-size']);
this._panelOpen = true;
this._keyManager.withHorizontalOrientation(null);
this._calculateOverlayPosition();
this._highlightCorrectOption();
this._changeDetectorRef.markForCheck();
// Set the font size on the panel element once it exists.
this._ngZone.onStable.asObservable().pipe(take_2(1)).subscribe(function () {
if (_this._triggerFontSize && _this.overlayDir.overlayRef &&
_this.overlayDir.overlayRef.overlayElement) {
_this.overlayDir.overlayRef.overlayElement.style.fontSize = _this._triggerFontSize + "px";
}
});
};
/** Closes the overlay panel and focuses the host element. */
/**
* Closes the overlay panel and focuses the host element.
* @return {?}
*/
MatSelect.prototype.close = /**
* Closes the overlay panel and focuses the host element.
* @return {?}
*/
function () {
if (this._panelOpen) {
this._panelOpen = false;
this._keyManager.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');
this._changeDetectorRef.markForCheck();
this._onTouched();
}
};
/**
* Sets the select's value. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*
* @param value New value to be written to the model.
*/
/**
* Sets the select's value. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*
* @param {?} value New value to be written to the model.
* @return {?}
*/
MatSelect.prototype.writeValue = /**
* Sets the select's value. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*
* @param {?} value New value to be written to the model.
* @return {?}
*/
function (value) {
if (this.options) {
this._setSelectionByValue(value);
}
};
/**
* Saves a callback function to be invoked when the select's value
* changes from user input. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*
* @param fn Callback to be triggered when the value changes.
*/
/**
* Saves a callback function to be invoked when the select's value
* changes from user input. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*
* @param {?} fn Callback to be triggered when the value changes.
* @return {?}
*/
MatSelect.prototype.registerOnChange = /**
* Saves a callback function to be invoked when the select's value
* changes from user input. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*
* @param {?} fn Callback to be triggered when the value changes.
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* Saves a callback function to be invoked when the select is blurred
* by the user. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*
* @param fn Callback to be triggered when the component has been touched.
*/
/**
* Saves a callback function to be invoked when the select is blurred
* by the user. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*
* @param {?} fn Callback to be triggered when the component has been touched.
* @return {?}
*/
MatSelect.prototype.registerOnTouched = /**
* Saves a callback function to be invoked when the select is blurred
* by the user. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*
* @param {?} fn Callback to be triggered when the component has been touched.
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* Disables the select. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*
* @param isDisabled Sets whether the component is disabled.
*/
/**
* Disables the select. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*
* @param {?} isDisabled Sets whether the component is disabled.
* @return {?}
*/
MatSelect.prototype.setDisabledState = /**
* Disables the select. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*
* @param {?} isDisabled Sets whether the component is disabled.
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
this._changeDetectorRef.markForCheck();
this.stateChanges.next();
};
Object.defineProperty(MatSelect.prototype, "panelOpen", {
/** Whether or not the overlay panel is open. */
get: /**
* Whether or not the overlay panel is open.
* @return {?}
*/ function () {
return this._panelOpen;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "selected", {
/** The currently selected option. */
get: /**
* The currently selected option.
* @return {?}
*/ function () {
return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0];
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSelect.prototype, "triggerValue", {
/** The value displayed in the trigger. */
get: /**
* The value displayed in the trigger.
* @return {?}
*/ function () {
if (this.empty) {
return '';
}
if (this._multiple) {
var /** @type {?} */ selectedOptions = this._selectionModel.selected.map(function (option) { return option.viewValue; });
if (this._isRtl()) {
selectedOptions.reverse();
}
// TODO(crisbeto): delimiter should be configurable for proper localization.
return selectedOptions.join(', ');
}
return this._selectionModel.selected[0].viewValue;
},
enumerable: true,
configurable: true
});
/** Whether the element is in RTL mode. */
/**
* Whether the element is in RTL mode.
* @return {?}
*/
MatSelect.prototype._isRtl = /**
* Whether the element is in RTL mode.
* @return {?}
*/
function () {
return this._dir ? this._dir.value === 'rtl' : false;
};
/** Handles all keydown events on the select. */
/**
* Handles all keydown events on the select.
* @param {?} event
* @return {?}
*/
MatSelect.prototype._handleKeydown = /**
* Handles all keydown events on the select.
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.disabled) {
this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
}
};
/**
* Handles keyboard events while the select is closed.
* @param {?} event
* @return {?}
*/
MatSelect.prototype._handleClosedKeydown = /**
* Handles keyboard events while the select is closed.
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ keyCode = event.keyCode;
var /** @type {?} */ isArrowKey = keyCode === keycodes.DOWN_ARROW || keyCode === keycodes.UP_ARROW ||
keyCode === keycodes.LEFT_ARROW || keyCode === keycodes.RIGHT_ARROW;
var /** @type {?} */ isOpenKey = keyCode === keycodes.ENTER || keyCode === keycodes.SPACE;
// Open the select on ALT + arrow key to match the native <select>
if (isOpenKey || ((this.multiple || event.altKey) && isArrowKey)) {
event.preventDefault(); // prevents the page from scrolling down when pressing space
this.open();
}
else if (!this.multiple) {
this._keyManager.onKeydown(event);
}
};
/**
* Handles keyboard events when the selected is open.
* @param {?} event
* @return {?}
*/
MatSelect.prototype._handleOpenKeydown = /**
* Handles keyboard events when the selected is open.
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ keyCode = event.keyCode;
var /** @type {?} */ isArrowKey = keyCode === keycodes.DOWN_ARROW || keyCode === keycodes.UP_ARROW;
var /** @type {?} */ manager = this._keyManager;
if (keyCode === keycodes.HOME || keyCode === keycodes.END) {
event.preventDefault();
keyCode === keycodes.HOME ? manager.setFirstItemActive() : manager.setLastItemActive();
}
else if (isArrowKey && event.altKey) {
// Close the select on ALT + arrow key to match the native <select>
event.preventDefault();
this.close();
}
else if ((keyCode === keycodes.ENTER || keyCode === keycodes.SPACE) && manager.activeItem) {
event.preventDefault();
manager.activeItem._selectViaInteraction();
}
else {
var /** @type {?} */ previouslyFocusedIndex = manager.activeItemIndex;
manager.onKeydown(event);
if (this._multiple && isArrowKey && event.shiftKey && manager.activeItem &&
manager.activeItemIndex !== previouslyFocusedIndex) {
manager.activeItem._selectViaInteraction();
}
}
};
/**
* When the panel element is finished transforming in (though not fading in), it
* emits an event and focuses an option if the panel is open.
*/
/**
* When the panel element is finished transforming in (though not fading in), it
* emits an event and focuses an option if the panel is open.
* @return {?}
*/
MatSelect.prototype._onPanelDone = /**
* When the panel element is finished transforming in (though not fading in), it
* emits an event and focuses an option if the panel is open.
* @return {?}
*/
function () {
if (this.panelOpen) {
this._scrollTop = 0;
this.openedChange.emit(true);
}
else {
this.openedChange.emit(false);
this._panelDoneAnimating = false;
this.overlayDir.offsetX = 0;
this._changeDetectorRef.markForCheck();
}
};
/**
* When the panel content is done fading in, the _panelDoneAnimating property is
* set so the proper class can be added to the panel.
*/
/**
* When the panel content is done fading in, the _panelDoneAnimating property is
* set so the proper class can be added to the panel.
* @return {?}
*/
MatSelect.prototype._onFadeInDone = /**
* When the panel content is done fading in, the _panelDoneAnimating property is
* set so the proper class can be added to the panel.
* @return {?}
*/
function () {
this._panelDoneAnimating = this.panelOpen;
this._changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
MatSelect.prototype._onFocus = /**
* @return {?}
*/
function () {
if (!this.disabled) {
this.focused = true;
this.stateChanges.next();
}
};
/**
* Calls the touched callback only if the panel is closed. Otherwise, the trigger will
* "blur" to the panel when it opens, causing a false positive.
*/
/**
* Calls the touched callback only if the panel is closed. Otherwise, the trigger will
* "blur" to the panel when it opens, causing a false positive.
* @return {?}
*/
MatSelect.prototype._onBlur = /**
* Calls the touched callback only if the panel is closed. Otherwise, the trigger will
* "blur" to the panel when it opens, causing a false positive.
* @return {?}
*/
function () {
this.focused = false;
if (!this.disabled && !this.panelOpen) {
this._onTouched();
this._changeDetectorRef.markForCheck();
this.stateChanges.next();
}
};
/**
* Callback that is invoked when the overlay panel has been attached.
*/
/**
* Callback that is invoked when the overlay panel has been attached.
* @return {?}
*/
MatSelect.prototype._onAttached = /**
* Callback that is invoked when the overlay panel has been attached.
* @return {?}
*/
function () {
var _this = this;
this.overlayDir.positionChange.pipe(take_2(1)).subscribe(function () {
_this._changeDetectorRef.detectChanges();
_this._calculateOverlayOffsetX();
_this.panel.nativeElement.scrollTop = _this._scrollTop;
});
};
/** Returns the theme to be used on the panel. */
/**
* Returns the theme to be used on the panel.
* @return {?}
*/
MatSelect.prototype._getPanelTheme = /**
* Returns the theme to be used on the panel.
* @return {?}
*/
function () {
return this._parentFormField ? "mat-" + this._parentFormField.color : '';
};
Object.defineProperty(MatSelect.prototype, "empty", {
/** Whether the select has a value. */
get: /**
* Whether the select has a value.
* @return {?}
*/ function () {
return !this._selectionModel || this._selectionModel.isEmpty();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatSelect.prototype._initializeSelection = /**
* @return {?}
*/
function () {
var _this = this;
// Defer setting the value in order to avoid the "Expression
// has changed after it was checked" errors from Angular.
Promise.resolve().then(function () {
_this._setSelectionByValue(_this.ngControl ? _this.ngControl.value : _this._value);
});
};
/**
* Sets the selected option based on a value. If no option can be
* found with the designated value, the select trigger is cleared.
* @param {?} value
* @param {?=} isUserInput
* @return {?}
*/
MatSelect.prototype._setSelectionByValue = /**
* Sets the selected option based on a value. If no option can be
* found with the designated value, the select trigger is cleared.
* @param {?} value
* @param {?=} isUserInput
* @return {?}
*/
function (value, isUserInput) {
var _this = this;
if (isUserInput === void 0) {
isUserInput = false;
}
if (this.multiple && value) {
if (!Array.isArray(value)) {
throw getMatSelectNonArrayValueError();
}
this._clearSelection();
value.forEach(function (currentValue) { return _this._selectValue(currentValue, isUserInput); });
this._sortValues();
}
else {
this._clearSelection();
var /** @type {?} */ correspondingOption = this._selectValue(value, isUserInput);
// Shift focus to the active item. Note that we shouldn't do this in multiple
// mode, because we don't know what option the user interacted with last.
if (correspondingOption) {
this._keyManager.setActiveItem(this.options.toArray().indexOf(correspondingOption));
}
}
this._changeDetectorRef.markForCheck();
};
/**
* Finds and selects and option based on its value.
* @param {?} value
* @param {?=} isUserInput
* @return {?} Option that has the corresponding value.
*/
MatSelect.prototype._selectValue = /**
* Finds and selects and option based on its value.
* @param {?} value
* @param {?=} isUserInput
* @return {?} Option that has the corresponding value.
*/
function (value, isUserInput) {
var _this = this;
if (isUserInput === void 0) {
isUserInput = false;
}
var /** @type {?} */ correspondingOption = this.options.find(function (option) {
try {
// Treat null as a special reset value.
return option.value != null && _this._compareWith(option.value, value);
}
catch (error) {
if (core.isDevMode()) {
// Notify developers of errors in their comparator.
console.warn(error);
}
return false;
}
});
if (correspondingOption) {
isUserInput ? correspondingOption._selectViaInteraction() : correspondingOption.select();
this._selectionModel.select(correspondingOption);
this.stateChanges.next();
}
return correspondingOption;
};
/**
* Clears the select trigger and deselects every option in the list.
* @param {?=} skip Option that should not be deselected.
* @return {?}
*/
MatSelect.prototype._clearSelection = /**
* Clears the select trigger and deselects every option in the list.
* @param {?=} skip Option that should not be deselected.
* @return {?}
*/
function (skip) {
this._selectionModel.clear();
this.options.forEach(function (option) {
if (option !== skip) {
option.deselect();
}
});
this.stateChanges.next();
};
/**
* Sets up a key manager to listen to keyboard events on the overlay panel.
* @return {?}
*/
MatSelect.prototype._initKeyManager = /**
* Sets up a key manager to listen to keyboard events on the overlay panel.
* @return {?}
*/
function () {
var _this = this;
this._keyManager = new a11y.ActiveDescendantKeyManager(this.options)
.withTypeAhead()
.withVerticalOrientation()
.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');
this._keyManager.tabOut.pipe(takeUntil_2(this._destroy)).subscribe(function () { return _this.close(); });
this._keyManager.change.pipe(takeUntil_2(this._destroy)).subscribe(function () {
if (_this._panelOpen && _this.panel) {
_this._scrollActiveOptionIntoView();
}
else if (!_this._panelOpen && !_this.multiple && _this._keyManager.activeItem) {
_this._keyManager.activeItem._selectViaInteraction();
}
});
};
/**
* Drops current option subscriptions and IDs and resets from scratch.
* @return {?}
*/
MatSelect.prototype._resetOptions = /**
* Drops current option subscriptions and IDs and resets from scratch.
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ changedOrDestroyed = merge.merge(this.options.changes, this._destroy);
this.optionSelectionChanges
.pipe(takeUntil_2(changedOrDestroyed), filter_2(function (event) { return event.isUserInput; }))
.subscribe(function (event) {
_this._onSelect(event.source);
if (!_this.multiple && _this._panelOpen) {
_this.close();
_this.focus();
}
});
// Listen to changes in the internal state of the options and react accordingly.
// Handles cases like the labels of the selected options changing.
merge.merge.apply(void 0, this.options.map(function (option) { return option._stateChanges; })).pipe(takeUntil_2(changedOrDestroyed))
.subscribe(function () {
_this._changeDetectorRef.markForCheck();
_this.stateChanges.next();
});
this._setOptionIds();
};
/**
* Invoked when an option is clicked.
* @param {?} option
* @return {?}
*/
MatSelect.prototype._onSelect = /**
* Invoked when an option is clicked.
* @param {?} option
* @return {?}
*/
function (option) {
var /** @type {?} */ wasSelected = this._selectionModel.isSelected(option);
// TODO(crisbeto): handle blank/null options inside multi-select.
if (this.multiple) {
this._selectionModel.toggle(option);
this.stateChanges.next();
wasSelected ? option.deselect() : option.select();
this._keyManager.setActiveItem(/** @type {?} */ ((this._getOptionIndex(option))));
this._sortValues();
}
else {
this._clearSelection(option.value == null ? undefined : option);
if (option.value == null) {
this._propagateChanges(option.value);
}
else {
this._selectionModel.select(option);
this.stateChanges.next();
}
}
if (wasSelected !== this._selectionModel.isSelected(option)) {
this._propagateChanges();
}
};
/**
* Sorts the model values, ensuring that they keep the same
* order that they have in the panel.
* @return {?}
*/
MatSelect.prototype._sortValues = /**
* Sorts the model values, ensuring that they keep the same
* order that they have in the panel.
* @return {?}
*/
function () {
var _this = this;
if (this._multiple) {
this._selectionModel.clear();
this.options.forEach(function (option) {
if (option.selected) {
_this._selectionModel.select(option);
}
});
this.stateChanges.next();
}
};
/**
* Emits change event to set the model value.
* @param {?=} fallbackValue
* @return {?}
*/
MatSelect.prototype._propagateChanges = /**
* Emits change event to set the model value.
* @param {?=} fallbackValue
* @return {?}
*/
function (fallbackValue) {
var /** @type {?} */ valueToEmit = null;
if (this.multiple) {
valueToEmit = ((this.selected)).map(function (option) { return option.value; });
}
else {
valueToEmit = this.selected ? ((this.selected)).value : fallbackValue;
}
this._value = valueToEmit;
this.valueChange.emit(valueToEmit);
this._onChange(valueToEmit);
this.selectionChange.emit(new MatSelectChange(this, valueToEmit));
this._changeDetectorRef.markForCheck();
};
/**
* Records option IDs to pass to the aria-owns property.
* @return {?}
*/
MatSelect.prototype._setOptionIds = /**
* Records option IDs to pass to the aria-owns property.
* @return {?}
*/
function () {
this._optionIds = this.options.map(function (option) { return option.id; }).join(' ');
};
/**
* Highlights the selected item. If no option is selected, it will highlight
* the first item instead.
* @return {?}
*/
MatSelect.prototype._highlightCorrectOption = /**
* Highlights the selected item. If no option is selected, it will highlight
* the first item instead.
* @return {?}
*/
function () {
if (this._keyManager) {
if (this.empty) {
this._keyManager.setFirstItemActive();
}
else {
this._keyManager.setActiveItem(/** @type {?} */ ((this._getOptionIndex(this._selectionModel.selected[0]))));
}
}
};
/**
* Scrolls the active option into view.
* @return {?}
*/
MatSelect.prototype._scrollActiveOptionIntoView = /**
* Scrolls the active option into view.
* @return {?}
*/
function () {
var /** @type {?} */ activeOptionIndex = this._keyManager.activeItemIndex || 0;
var /** @type {?} */ labelCount = _countGroupLabelsBeforeOption(activeOptionIndex, this.options, this.optionGroups);
this.panel.nativeElement.scrollTop = _getOptionScrollPosition(activeOptionIndex + labelCount, this._getItemHeight(), this.panel.nativeElement.scrollTop, SELECT_PANEL_MAX_HEIGHT);
};
/** Focuses the select element. */
/**
* Focuses the select element.
* @return {?}
*/
MatSelect.prototype.focus = /**
* Focuses the select element.
* @return {?}
*/
function () {
this._elementRef.nativeElement.focus();
};
/**
* Gets the index of the provided option in the option list.
* @param {?} option
* @return {?}
*/
MatSelect.prototype._getOptionIndex = /**
* Gets the index of the provided option in the option list.
* @param {?} option
* @return {?}
*/
function (option) {
return this.options.reduce(function (result, current, index) {
return result === undefined ? (option === current ? index : undefined) : result;
}, undefined);
};
/**
* Calculates the scroll position and x- and y-offsets of the overlay panel.
* @return {?}
*/
MatSelect.prototype._calculateOverlayPosition = /**
* Calculates the scroll position and x- and y-offsets of the overlay panel.
* @return {?}
*/
function () {
var /** @type {?} */ itemHeight = this._getItemHeight();
var /** @type {?} */ items = this._getItemCount();
var /** @type {?} */ panelHeight = Math.min(items * itemHeight, SELECT_PANEL_MAX_HEIGHT);
var /** @type {?} */ scrollContainerHeight = items * itemHeight;
// The farthest the panel can be scrolled before it hits the bottom
var /** @type {?} */ maxScroll = scrollContainerHeight - panelHeight;
// If no value is selected we open the popup to the first item.
var /** @type {?} */ selectedOptionOffset = this.empty ? 0 : /** @type {?} */ ((this._getOptionIndex(this._selectionModel.selected[0])));
selectedOptionOffset += _countGroupLabelsBeforeOption(selectedOptionOffset, this.options, this.optionGroups);
// We must maintain a scroll buffer so the selected option will be scrolled to the
// center of the overlay panel rather than the top.
var /** @type {?} */ scrollBuffer = panelHeight / 2;
this._scrollTop = this._calculateOverlayScroll(selectedOptionOffset, scrollBuffer, maxScroll);
this._offsetY = this._calculateOverlayOffsetY(selectedOptionOffset, scrollBuffer, maxScroll);
this._checkOverlayWithinViewport(maxScroll);
};
/**
* Calculates the scroll position of the select's overlay panel.
*
* Attempts to center the selected option in the panel. If the option is
* too high or too low in the panel to be scrolled to the center, it clamps the
* scroll position to the min or max scroll positions respectively.
*/
/**
* Calculates the scroll position of the select's overlay panel.
*
* Attempts to center the selected option in the panel. If the option is
* too high or too low in the panel to be scrolled to the center, it clamps the
* scroll position to the min or max scroll positions respectively.
* @param {?} selectedIndex
* @param {?} scrollBuffer
* @param {?} maxScroll
* @return {?}
*/
MatSelect.prototype._calculateOverlayScroll = /**
* Calculates the scroll position of the select's overlay panel.
*
* Attempts to center the selected option in the panel. If the option is
* too high or too low in the panel to be scrolled to the center, it clamps the
* scroll position to the min or max scroll positions respectively.
* @param {?} selectedIndex
* @param {?} scrollBuffer
* @param {?} maxScroll
* @return {?}
*/
function (selectedIndex, scrollBuffer, maxScroll) {
var /** @type {?} */ itemHeight = this._getItemHeight();
var /** @type {?} */ optionOffsetFromScrollTop = itemHeight * selectedIndex;
var /** @type {?} */ halfOptionHeight = itemHeight / 2;
// Starts at the optionOffsetFromScrollTop, which scrolls the option to the top of the
// scroll container, then subtracts the scroll buffer to scroll the option down to
// the center of the overlay panel. Half the option height must be re-added to the
// scrollTop so the option is centered based on its middle, not its top edge.
var /** @type {?} */ optimalScrollPosition = optionOffsetFromScrollTop - scrollBuffer + halfOptionHeight;
return Math.min(Math.max(0, optimalScrollPosition), maxScroll);
};
Object.defineProperty(MatSelect.prototype, "_ariaLabel", {
/** Returns the aria-label of the select component. */
get: /**
* Returns the aria-label of the select component.
* @return {?}
*/ function () {
// If an ariaLabelledby value has been set, the select should not overwrite the
// `aria-labelledby` value by setting the ariaLabel to the placeholder.
return this.ariaLabelledby ? null : this.ariaLabel || this.placeholder;
},
enumerable: true,
configurable: true
});
/** Determines the `aria-activedescendant` to be set on the host. */
/**
* Determines the `aria-activedescendant` to be set on the host.
* @return {?}
*/
MatSelect.prototype._getAriaActiveDescendant = /**
* Determines the `aria-activedescendant` to be set on the host.
* @return {?}
*/
function () {
if (this.panelOpen && this._keyManager && this._keyManager.activeItem) {
return this._keyManager.activeItem.id;
}
return null;
};
/**
* Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
* This must be adjusted to align the selected option text over the trigger text when
* the panel opens. Will change based on LTR or RTL text direction. Note that the offset
* can't be calculated until the panel has been attached, because we need to know the
* content width in order to constrain the panel within the viewport.
* @return {?}
*/
MatSelect.prototype._calculateOverlayOffsetX = /**
* Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
* This must be adjusted to align the selected option text over the trigger text when
* the panel opens. Will change based on LTR or RTL text direction. Note that the offset
* can't be calculated until the panel has been attached, because we need to know the
* content width in order to constrain the panel within the viewport.
* @return {?}
*/
function () {
var /** @type {?} */ overlayRect = this.overlayDir.overlayRef.overlayElement.getBoundingClientRect();
var /** @type {?} */ viewportSize = this._viewportRuler.getViewportSize();
var /** @type {?} */ isRtl = this._isRtl();
var /** @type {?} */ paddingWidth = this.multiple ? SELECT_MULTIPLE_PANEL_PADDING_X + SELECT_PANEL_PADDING_X :
SELECT_PANEL_PADDING_X * 2;
var /** @type {?} */ offsetX;
// Adjust the offset, depending on the option padding.
if (this.multiple) {
offsetX = SELECT_MULTIPLE_PANEL_PADDING_X;
}
else {
var /** @type {?} */ selected = this._selectionModel.selected[0] || this.options.first;
offsetX = selected && selected.group ? SELECT_PANEL_INDENT_PADDING_X : SELECT_PANEL_PADDING_X;
}
// Invert the offset in LTR.
if (!isRtl) {
offsetX *= -1;
}
// Determine how much the select overflows on each side.
var /** @type {?} */ leftOverflow = 0 - (overlayRect.left + offsetX - (isRtl ? paddingWidth : 0));
var /** @type {?} */ rightOverflow = overlayRect.right + offsetX - viewportSize.width
+ (isRtl ? 0 : paddingWidth);
// If the element overflows on either side, reduce the offset to allow it to fit.
if (leftOverflow > 0) {
offsetX += leftOverflow + SELECT_PANEL_VIEWPORT_PADDING;
}
else if (rightOverflow > 0) {
offsetX -= rightOverflow + SELECT_PANEL_VIEWPORT_PADDING;
}
// Set the offset directly in order to avoid having to go through change detection and
// potentially triggering "changed after it was checked" errors.
this.overlayDir.offsetX = offsetX;
this.overlayDir.overlayRef.updatePosition();
};
/**
* Calculates the y-offset of the select's overlay panel in relation to the
* top start corner of the trigger. It has to be adjusted in order for the
* selected option to be aligned over the trigger when the panel opens.
* @param {?} selectedIndex
* @param {?} scrollBuffer
* @param {?} maxScroll
* @return {?}
*/
MatSelect.prototype._calculateOverlayOffsetY = /**
* Calculates the y-offset of the select's overlay panel in relation to the
* top start corner of the trigger. It has to be adjusted in order for the
* selected option to be aligned over the trigger when the panel opens.
* @param {?} selectedIndex
* @param {?} scrollBuffer
* @param {?} maxScroll
* @return {?}
*/
function (selectedIndex, scrollBuffer, maxScroll) {
var /** @type {?} */ itemHeight = this._getItemHeight();
var /** @type {?} */ optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2;
var /** @type {?} */ maxOptionsDisplayed = Math.floor(SELECT_PANEL_MAX_HEIGHT / itemHeight);
var /** @type {?} */ optionOffsetFromPanelTop;
if (this._scrollTop === 0) {
optionOffsetFromPanelTop = selectedIndex * itemHeight;
}
else if (this._scrollTop === maxScroll) {
var /** @type {?} */ firstDisplayedIndex = this._getItemCount() - maxOptionsDisplayed;
var /** @type {?} */ selectedDisplayIndex = selectedIndex - firstDisplayedIndex;
// The first item is partially out of the viewport. Therefore we need to calculate what
// portion of it is shown in the viewport and account for it in our offset.
var /** @type {?} */ partialItemHeight = itemHeight - (this._getItemCount() * itemHeight - SELECT_PANEL_MAX_HEIGHT) % itemHeight;
// Because the panel height is longer than the height of the options alone,
// there is always extra padding at the top or bottom of the panel. When
// scrolled to the very bottom, this padding is at the top of the panel and
// must be added to the offset.
optionOffsetFromPanelTop = selectedDisplayIndex * itemHeight + partialItemHeight;
}
else {
// If the option was scrolled to the middle of the panel using a scroll buffer,
// its offset will be the scroll buffer minus the half height that was added to
// center it.
optionOffsetFromPanelTop = scrollBuffer - itemHeight / 2;
}
// The final offset is the option's offset from the top, adjusted for the height
// difference, multiplied by -1 to ensure that the overlay moves in the correct
// direction up the page.
return optionOffsetFromPanelTop * -1 - optionHeightAdjustment;
};
/**
* Checks that the attempted overlay position will fit within the viewport.
* If it will not fit, tries to adjust the scroll position and the associated
* y-offset so the panel can open fully on-screen. If it still won't fit,
* sets the offset back to 0 to allow the fallback position to take over.
* @param {?} maxScroll
* @return {?}
*/
MatSelect.prototype._checkOverlayWithinViewport = /**
* Checks that the attempted overlay position will fit within the viewport.
* If it will not fit, tries to adjust the scroll position and the associated
* y-offset so the panel can open fully on-screen. If it still won't fit,
* sets the offset back to 0 to allow the fallback position to take over.
* @param {?} maxScroll
* @return {?}
*/
function (maxScroll) {
var /** @type {?} */ itemHeight = this._getItemHeight();
var /** @type {?} */ viewportSize = this._viewportRuler.getViewportSize();
var /** @type {?} */ topSpaceAvailable = this._triggerRect.top - SELECT_PANEL_VIEWPORT_PADDING;
var /** @type {?} */ bottomSpaceAvailable = viewportSize.height - this._triggerRect.bottom - SELECT_PANEL_VIEWPORT_PADDING;
var /** @type {?} */ panelHeightTop = Math.abs(this._offsetY);
var /** @type {?} */ totalPanelHeight = Math.min(this._getItemCount() * itemHeight, SELECT_PANEL_MAX_HEIGHT);
var /** @type {?} */ panelHeightBottom = totalPanelHeight - panelHeightTop - this._triggerRect.height;
if (panelHeightBottom > bottomSpaceAvailable) {
this._adjustPanelUp(panelHeightBottom, bottomSpaceAvailable);
}
else if (panelHeightTop > topSpaceAvailable) {
this._adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll);
}
else {
this._transformOrigin = this._getOriginBasedOnOption();
}
};
/**
* Adjusts the overlay panel up to fit in the viewport.
* @param {?} panelHeightBottom
* @param {?} bottomSpaceAvailable
* @return {?}
*/
MatSelect.prototype._adjustPanelUp = /**
* Adjusts the overlay panel up to fit in the viewport.
* @param {?} panelHeightBottom
* @param {?} bottomSpaceAvailable
* @return {?}
*/
function (panelHeightBottom, bottomSpaceAvailable) {
// Browsers ignore fractional scroll offsets, so we need to round.
var /** @type {?} */ distanceBelowViewport = Math.round(panelHeightBottom - bottomSpaceAvailable);
// Scrolls the panel up by the distance it was extending past the boundary, then
// adjusts the offset by that amount to move the panel up into the viewport.
this._scrollTop -= distanceBelowViewport;
this._offsetY -= distanceBelowViewport;
this._transformOrigin = this._getOriginBasedOnOption();
// If the panel is scrolled to the very top, it won't be able to fit the panel
// by scrolling, so set the offset to 0 to allow the fallback position to take
// effect.
if (this._scrollTop <= 0) {
this._scrollTop = 0;
this._offsetY = 0;
this._transformOrigin = "50% bottom 0px";
}
};
/**
* Adjusts the overlay panel down to fit in the viewport.
* @param {?} panelHeightTop
* @param {?} topSpaceAvailable
* @param {?} maxScroll
* @return {?}
*/
MatSelect.prototype._adjustPanelDown = /**
* Adjusts the overlay panel down to fit in the viewport.
* @param {?} panelHeightTop
* @param {?} topSpaceAvailable
* @param {?} maxScroll
* @return {?}
*/
function (panelHeightTop, topSpaceAvailable, maxScroll) {
// Browsers ignore fractional scroll offsets, so we need to round.
var /** @type {?} */ distanceAboveViewport = Math.round(panelHeightTop - topSpaceAvailable);
// Scrolls the panel down by the distance it was extending past the boundary, then
// adjusts the offset by that amount to move the panel down into the viewport.
this._scrollTop += distanceAboveViewport;
this._offsetY += distanceAboveViewport;
this._transformOrigin = this._getOriginBasedOnOption();
// If the panel is scrolled to the very bottom, it won't be able to fit the
// panel by scrolling, so set the offset to 0 to allow the fallback position
// to take effect.
if (this._scrollTop >= maxScroll) {
this._scrollTop = maxScroll;
this._offsetY = 0;
this._transformOrigin = "50% top 0px";
return;
}
};
/**
* Sets the transform origin point based on the selected option.
* @return {?}
*/
MatSelect.prototype._getOriginBasedOnOption = /**
* Sets the transform origin point based on the selected option.
* @return {?}
*/
function () {
var /** @type {?} */ itemHeight = this._getItemHeight();
var /** @type {?} */ optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2;
var /** @type {?} */ originY = Math.abs(this._offsetY) - optionHeightAdjustment + itemHeight / 2;
return "50% " + originY + "px 0px";
};
/**
* Calculates the amount of items in the select. This includes options and group labels.
* @return {?}
*/
MatSelect.prototype._getItemCount = /**
* Calculates the amount of items in the select. This includes options and group labels.
* @return {?}
*/
function () {
return this.options.length + this.optionGroups.length;
};
/**
* Calculates the height of the select's options.
* @return {?}
*/
MatSelect.prototype._getItemHeight = /**
* Calculates the height of the select's options.
* @return {?}
*/
function () {
return this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
};
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @param {?} ids
* @return {?}
*/
MatSelect.prototype.setDescribedByIds = /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @param {?} ids
* @return {?}
*/
function (ids) {
this._ariaDescribedby = ids.join(' ');
};
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
/**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/
MatSelect.prototype.onContainerClick = /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/
function () {
this.focus();
this.open();
};
Object.defineProperty(MatSelect.prototype, "shouldPlaceholderFloat", {
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get: /**
* Implemented as part of MatFormFieldControl.
* \@docs-private
* @return {?}
*/ function () {
return this._panelOpen || !this.empty;
},
enumerable: true,
configurable: true
});
MatSelect.decorators = [
{ type: core.Component, args: [{ selector: 'mat-select',
exportAs: 'matSelect',
template: "<div cdk-overlay-origin class=\"mat-select-trigger\" aria-hidden=\"true\" (click)=\"toggle()\" #origin=\"cdkOverlayOrigin\" #trigger><div class=\"mat-select-value\" [ngSwitch]=\"empty\"><span class=\"mat-select-placeholder\" *ngSwitchCase=\"true\">{{placeholder || '\u00A0'}}</span> <span class=\"mat-select-value-text\" *ngSwitchCase=\"false\" [ngSwitch]=\"!!customTrigger\"><span *ngSwitchDefault>{{triggerValue}}</span><ng-content select=\"mat-select-trigger\" *ngSwitchCase=\"true\"></ng-content></span></div><div class=\"mat-select-arrow-wrapper\"><div class=\"mat-select-arrow\"></div></div></div><ng-template cdk-connected-overlay hasBackdrop cdkConnectedOverlayLockPosition backdropClass=\"cdk-overlay-transparent-backdrop\" [scrollStrategy]=\"_scrollStrategy\" [origin]=\"origin\" [open]=\"panelOpen\" [positions]=\"_positions\" [minWidth]=\"_triggerRect?.width\" [offsetY]=\"_offsetY\" (backdropClick)=\"close()\" (attach)=\"_onAttached()\" (detach)=\"close()\"><div #panel class=\"mat-select-panel {{ _getPanelTheme() }}\" [ngClass]=\"panelClass\" [@transformPanel]=\"multiple ? 'showing-multiple' : 'showing'\" (@transformPanel.done)=\"_onPanelDone()\" [style.transformOrigin]=\"_transformOrigin\" [class.mat-select-panel-done-animating]=\"_panelDoneAnimating\" [style.font-size.px]=\"_triggerFontSize\" (keydown)=\"_handleKeydown($event)\"><div class=\"mat-select-content\" [@fadeInContent]=\"'showing'\" (@fadeInContent.done)=\"_onFadeInDone()\"><ng-content></ng-content></div></div></ng-template>",
styles: [".mat-select{display:inline-block;width:100%;outline:0}.mat-select-trigger{display:inline-table;cursor:pointer;position:relative;box-sizing:border-box}.mat-select-disabled .mat-select-trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.mat-select-value{display:table-cell;max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-select-arrow-wrapper{display:table-cell;vertical-align:middle}.mat-select-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px}.mat-select-panel{-webkit-backface-visibility:hidden;backface-visibility:hidden;min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;padding-top:0;padding-bottom:0;max-height:256px;min-width:100%}.mat-select-panel:not([class*=mat-elevation-z]){box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}@media screen and (-ms-high-contrast:active){.mat-select-panel{outline:solid 1px}}.mat-select-panel .mat-optgroup-label,.mat-select-panel .mat-option{font-size:inherit;line-height:3em;height:3em}.mat-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-form-field-flex{cursor:pointer}.mat-form-field-type-mat-select .mat-form-field-label{width:calc(100% - 18px)}.mat-select-placeholder{transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-form-field-hide-placeholder .mat-select-placeholder{color:transparent;transition:none}"],
inputs: ['disabled', 'disableRipple', 'tabIndex'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: {
'role': 'listbox',
'[attr.id]': 'id',
'[attr.tabindex]': 'tabIndex',
'[attr.aria-label]': '_ariaLabel',
'[attr.aria-labelledby]': 'ariaLabelledby',
'[attr.aria-required]': 'required.toString()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.aria-invalid]': 'errorState',
'[attr.aria-owns]': 'panelOpen ? _optionIds : null',
'[attr.aria-multiselectable]': 'multiple',
'[attr.aria-describedby]': '_ariaDescribedby || null',
'[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
'[class.mat-select-disabled]': 'disabled',
'[class.mat-select-invalid]': 'errorState',
'[class.mat-select-required]': 'required',
'class': 'mat-select',
'(keydown)': '_handleKeydown($event)',
'(focus)': '_onFocus()',
'(blur)': '_onBlur()',
},
animations: [
matSelectAnimations.transformPanel,
matSelectAnimations.fadeInContent
],
providers: [
{ provide: MatFormFieldControl, useExisting: MatSelect },
{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect }
],
},] },
];
/** @nocollapse */
MatSelect.ctorParameters = function () {
return [
{ type: overlay.ViewportRuler, },
{ type: core.ChangeDetectorRef, },
{ type: core.NgZone, },
{ type: ErrorStateMatcher, },
{ type: core.ElementRef, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: forms.NgForm, decorators: [{ type: core.Optional },] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional },] },
{ type: MatFormField, decorators: [{ type: core.Optional },] },
{ type: forms.NgControl, decorators: [{ type: core.Self }, { type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Attribute, args: ['tabindex',] },] },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_SELECT_SCROLL_STRATEGY,] },] },
];
};
MatSelect.propDecorators = {
"trigger": [{ type: core.ViewChild, args: ['trigger',] },],
"panel": [{ type: core.ViewChild, args: ['panel',] },],
"overlayDir": [{ type: core.ViewChild, args: [overlay.CdkConnectedOverlay,] },],
"options": [{ type: core.ContentChildren, args: [MatOption, { descendants: true },] },],
"optionGroups": [{ type: core.ContentChildren, args: [MatOptgroup,] },],
"panelClass": [{ type: core.Input },],
"customTrigger": [{ type: core.ContentChild, args: [MatSelectTrigger,] },],
"placeholder": [{ type: core.Input },],
"required": [{ type: core.Input },],
"multiple": [{ type: core.Input },],
"compareWith": [{ type: core.Input },],
"value": [{ type: core.Input },],
"ariaLabel": [{ type: core.Input, args: ['aria-label',] },],
"ariaLabelledby": [{ type: core.Input, args: ['aria-labelledby',] },],
"errorStateMatcher": [{ type: core.Input },],
"id": [{ type: core.Input },],
"openedChange": [{ type: core.Output },],
"_openedStream": [{ type: core.Output, args: ['opened',] },],
"_closedStream": [{ type: core.Output, args: ['closed',] },],
"onOpen": [{ type: core.Output },],
"onClose": [{ type: core.Output },],
"selectionChange": [{ type: core.Output },],
"change": [{ type: core.Output },],
"valueChange": [{ type: core.Output },],
};
return MatSelect;
}(_MatSelectMixinBase));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Global registry for all dynamically-created, injected style tags.
*/
var styleElementForWebkitCompatibility = new Map();
/**
* A utility for calling matchMedia queries.
*/
var MediaMatcher = (function () {
function MediaMatcher(platform$$1) {
this.platform = platform$$1;
this._matchMedia = this.platform.isBrowser && window.matchMedia ?
// matchMedia is bound to the window scope intentionally as it is an illegal invocation to
// call it from a different scope.
window.matchMedia.bind(window) :
noopMatchMedia;
}
/**
* Evaluates the given media query and returns the native MediaQueryList from which results
* can be retrieved.
* Confirms the layout engine will trigger for the selector query provided and returns the
* MediaQueryList for the query provided.
*/
/**
* Evaluates the given media query and returns the native MediaQueryList from which results
* can be retrieved.
* Confirms the layout engine will trigger for the selector query provided and returns the
* MediaQueryList for the query provided.
* @param {?} query
* @return {?}
*/
MediaMatcher.prototype.matchMedia = /**
* Evaluates the given media query and returns the native MediaQueryList from which results
* can be retrieved.
* Confirms the layout engine will trigger for the selector query provided and returns the
* MediaQueryList for the query provided.
* @param {?} query
* @return {?}
*/
function (query$$1) {
if (this.platform.WEBKIT) {
createEmptyStyleRule(query$$1);
}
return this._matchMedia(query$$1);
};
MediaMatcher.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MediaMatcher.ctorParameters = function () {
return [
{ type: platform.Platform, },
];
};
return MediaMatcher;
}());
/**
* For Webkit engines that only trigger the MediaQueryListListener when there is at least one CSS
* selector for the respective media query.
* @param {?} query
* @return {?}
*/
function createEmptyStyleRule(query$$1) {
if (!styleElementForWebkitCompatibility.has(query$$1)) {
try {
var /** @type {?} */ style$$1 = document.createElement('style');
style$$1.setAttribute('type', 'text/css');
if (!style$$1.sheet) {
var /** @type {?} */ cssText = "@media " + query$$1 + " {.fx-query-test{ }}";
style$$1.appendChild(document.createTextNode(cssText));
}
document.getElementsByTagName('head')[0].appendChild(style$$1);
// Store in private global registry
styleElementForWebkitCompatibility.set(query$$1, style$$1);
}
catch (e) {
console.error(e);
}
}
}
/**
* No-op matchMedia replacement for non-browser platforms.
* @param {?} query
* @return {?}
*/
function noopMatchMedia(query$$1) {
return {
matches: query$$1 === 'all' || query$$1 === '',
media: query$$1,
addListener: function () { },
removeListener: function () { }
};
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The current state of a layout breakpoint.
* @record
*/
/**
* Utility for checking the matching state of \@media queries.
*/
var BreakpointObserver = (function () {
function BreakpointObserver(mediaMatcher, zone) {
this.mediaMatcher = mediaMatcher;
this.zone = zone;
/**
* A map of all media queries currently being listened for.
*/
this._queries = new Map();
/**
* A subject for all other observables to takeUntil based on.
*/
this._destroySubject = new Subject.Subject();
}
/** Completes the active subject, signalling to all other observables to complete. */
/**
* Completes the active subject, signalling to all other observables to complete.
* @return {?}
*/
BreakpointObserver.prototype.ngOnDestroy = /**
* Completes the active subject, signalling to all other observables to complete.
* @return {?}
*/
function () {
this._destroySubject.next();
this._destroySubject.complete();
};
/**
* Whether one or more media queries match the current viewport size.
* @param value One or more media queries to check.
* @returns Whether any of the media queries match.
*/
/**
* Whether one or more media queries match the current viewport size.
* @param {?} value One or more media queries to check.
* @return {?} Whether any of the media queries match.
*/
BreakpointObserver.prototype.isMatched = /**
* Whether one or more media queries match the current viewport size.
* @param {?} value One or more media queries to check.
* @return {?} Whether any of the media queries match.
*/
function (value) {
var _this = this;
var /** @type {?} */ queries = coercion.coerceArray(value);
return queries.some(function (mediaQuery) { return _this._registerQuery(mediaQuery).mql.matches; });
};
/**
* Gets an observable of results for the given queries that will emit new results for any changes
* in matching of the given queries.
* @returns A stream of matches for the given queries.
*/
/**
* Gets an observable of results for the given queries that will emit new results for any changes
* in matching of the given queries.
* @param {?} value
* @return {?} A stream of matches for the given queries.
*/
BreakpointObserver.prototype.observe = /**
* Gets an observable of results for the given queries that will emit new results for any changes
* in matching of the given queries.
* @param {?} value
* @return {?} A stream of matches for the given queries.
*/
function (value) {
var _this = this;
var /** @type {?} */ queries = coercion.coerceArray(value);
var /** @type {?} */ observables = queries.map(function (query$$1) { return _this._registerQuery(query$$1).observable; });
return combineLatest.combineLatest(observables, function (a, b) {
return {
matches: !!((a && a.matches) || (b && b.matches)),
};
});
};
/**
* Registers a specific query to be listened for.
* @param {?} query
* @return {?}
*/
BreakpointObserver.prototype._registerQuery = /**
* Registers a specific query to be listened for.
* @param {?} query
* @return {?}
*/
function (query$$1) {
var _this = this;
// Only set up a new MediaQueryList if it is not already being listened for.
if (this._queries.has(query$$1)) {
return /** @type {?} */ ((this._queries.get(query$$1)));
}
var /** @type {?} */ mql = this.mediaMatcher.matchMedia(query$$1);
// Create callback for match changes and add it is as a listener.
var /** @type {?} */ queryObservable = fromEventPattern.fromEventPattern(
// Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
// back into the zone because matchMedia is only included in Zone.js by loading the
// webapis-media-query.js file alongside the zone.js file. Additionally, some browsers do not
// have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
// patches it.
// Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
// back into the zone because matchMedia is only included in Zone.js by loading the
// webapis-media-query.js file alongside the zone.js file. Additionally, some browsers do not
// have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js
// patches it.
function (listener) {
mql.addListener(function (e) { return _this.zone.run(function () { return listener(e); }); });
}, function (listener) {
mql.removeListener(function (e) { return _this.zone.run(function () { return listener(e); }); });
})
.pipe(takeUntil_2(this._destroySubject), startWith_2(mql), map_2(function (nextMql) { return ({ matches: nextMql.matches }); }));
// Add the MediaQueryList to the set of queries.
var /** @type {?} */ output = { observable: queryObservable, mql: mql };
this._queries.set(query$$1, output);
return output;
};
BreakpointObserver.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
BreakpointObserver.ctorParameters = function () {
return [
{ type: MediaMatcher, },
{ type: core.NgZone, },
];
};
return BreakpointObserver;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var Breakpoints = {
XSmall: '(max-width: 599px)',
Small: '(min-width: 600px) and (max-width: 959px)',
Medium: '(min-width: 960px) and (max-width: 1279px)',
Large: '(min-width: 1280px) and (max-width: 1919px)',
XLarge: '(min-width: 1920px)',
Handset: '(max-width: 599px) and (orientation: portrait), ' +
'(max-width: 959px) and (orientation: landscape)',
Tablet: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +
'(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
Web: '(min-width: 840px) and (orientation: portrait), ' +
'(min-width: 1280px) and (orientation: landscape)',
HandsetPortrait: '(max-width: 599px) and (orientation: portrait)',
TabletPortrait: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait)',
WebPortrait: '(min-width: 840px) and (orientation: portrait)',
HandsetLandscape: '(max-width: 959px) and (orientation: landscape)',
TabletLandscape: '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Animations used by MatTooltip.
*/
var matTooltipAnimations = {
/** Animation that transitions a tooltip in and out. */
tooltipState: animations.trigger('state', [
animations.state('initial, void, hidden', animations.style({ transform: 'scale(0)' })),
animations.state('visible', animations.style({ transform: 'scale(1)' })),
animations.transition('* => visible', animations.animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
animations.transition('* => hidden', animations.animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
])
};
/**
* CSS class that will be attached to the overlay panel.
*/
var TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel';
/**
* Creates an error to be thrown if the user supplied an invalid tooltip position.
* @param {?} position
* @return {?}
*/
function getMatTooltipInvalidPositionError(position) {
return Error("Tooltip position \"" + position + "\" is invalid.");
}
/**
* Injection token that determines the scroll handling while a tooltip is visible.
*/
var MAT_TOOLTIP_SCROLL_STRATEGY = new core.InjectionToken('mat-tooltip-scroll-strategy');
/**
* Default `matTooltip` options that can be overridden.
* @record
*/
/**
* Injection token to be used to override the default options for `matTooltip`.
*/
var MAT_TOOLTIP_DEFAULT_OPTIONS = new core.InjectionToken('mat-tooltip-default-options');
/**
* Directive that attaches a material design tooltip to the host element. Animates the showing and
* hiding of a tooltip provided position (defaults to below the element).
*
* https://material.google.com/components/tooltips.html
*/
var MatTooltip = (function () {
function MatTooltip(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, _platform, _ariaDescriber, _focusMonitor, _scrollStrategy, _dir, _defaultOptions) {
// TODO(crisbeto): make the `_defaultOptions` a required param next time we do breaking changes.
// @deletion-target 6.0.0
var _this = this;
this._overlay = _overlay;
this._elementRef = _elementRef;
this._scrollDispatcher = _scrollDispatcher;
this._viewContainerRef = _viewContainerRef;
this._ngZone = _ngZone;
this._platform = _platform;
this._ariaDescriber = _ariaDescriber;
this._focusMonitor = _focusMonitor;
this._scrollStrategy = _scrollStrategy;
this._dir = _dir;
this._defaultOptions = _defaultOptions;
this._position = 'below';
this._disabled = false;
/**
* The default delay in ms before showing the tooltip after show is called
*/
this.showDelay = this._defaultOptions ? this._defaultOptions.showDelay : 0;
/**
* The default delay in ms before hiding the tooltip after hide is called
*/
this.hideDelay = this._defaultOptions ? this._defaultOptions.hideDelay : 0;
this._message = '';
this._manualListeners = new Map();
var /** @type {?} */ element = _elementRef.nativeElement;
// The mouse events shouldn't be bound on iOS devices, because
// they can prevent the first tap from firing its click event.
if (!_platform.IOS) {
this._manualListeners.set('mouseenter', function () { return _this.show(); });
this._manualListeners.set('mouseleave', function () { return _this.hide(); });
this._manualListeners
.forEach(function (listener, event) { return _elementRef.nativeElement.addEventListener(event, listener); });
}
else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
// When we bind a gesture event on an element (in this case `longpress`), HammerJS
// will add some inline styles by default, including `user-select: none`. This is
// problematic on iOS, because it will prevent users from typing in inputs. If
// we're on iOS and the tooltip is attached on an input or textarea, we clear
// the `user-select` to avoid these issues.
element.style.webkitUserSelect = element.style.userSelect = '';
}
_focusMonitor.monitor(element).subscribe(function (origin) {
// Note that the focus monitor runs outside the Angular zone.
if (!origin) {
_ngZone.run(function () { return _this.hide(0); });
}
else if (origin !== 'program') {
_ngZone.run(function () { return _this.show(); });
}
});
}
Object.defineProperty(MatTooltip.prototype, "position", {
get: /**
* Allows the user to define the position of the tooltip relative to the parent element
* @return {?}
*/ function () { return this._position; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value !== this._position) {
this._position = value;
// TODO(andrewjs): When the overlay's position can be dynamically changed, do not destroy
// the tooltip.
if (this._tooltipInstance) {
this._disposeTooltip();
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTooltip.prototype, "disabled", {
get: /**
* Disables the display of the tooltip.
* @return {?}
*/ function () { return this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._disabled = coercion.coerceBooleanProperty(value);
// If tooltip is disabled, hide immediately.
if (this._disabled) {
this.hide(0);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTooltip.prototype, "_positionDeprecated", {
get: /**
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this._position; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._position = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatTooltip.prototype, "message", {
get: /**
* The message to be displayed in the tooltip
* @return {?}
*/ function () { return this._message; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message);
// If the message is not a string (e.g. number), convert it to a string and trim it.
this._message = value != null ? ("" + value).trim() : '';
if (!this._message && this._isTooltipVisible()) {
this.hide(0);
}
else {
this._updateTooltipMessage();
this._ariaDescriber.describe(this._elementRef.nativeElement, this.message);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTooltip.prototype, "tooltipClass", {
get: /**
* Classes to be passed to the tooltip. Supports the same syntax as `ngClass`.
* @return {?}
*/ function () { return this._tooltipClass; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._tooltipClass = value;
if (this._tooltipInstance) {
this._setTooltipClass(this._tooltipClass);
}
},
enumerable: true,
configurable: true
});
/**
* Dispose the tooltip when destroyed.
*/
/**
* Dispose the tooltip when destroyed.
* @return {?}
*/
MatTooltip.prototype.ngOnDestroy = /**
* Dispose the tooltip when destroyed.
* @return {?}
*/
function () {
var _this = this;
if (this._tooltipInstance) {
this._disposeTooltip();
}
// Clean up the event listeners set in the constructor
if (!this._platform.IOS) {
this._manualListeners.forEach(function (listener, event) {
_this._elementRef.nativeElement.removeEventListener(event, listener);
});
this._manualListeners.clear();
}
this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message);
this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
};
/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
/**
* Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input
* @param {?=} delay
* @return {?}
*/
MatTooltip.prototype.show = /**
* Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input
* @param {?=} delay
* @return {?}
*/
function (delay) {
if (delay === void 0) {
delay = this.showDelay;
}
if (this.disabled || !this.message) {
return;
}
if (!this._tooltipInstance) {
this._createTooltip();
}
this._setTooltipClass(this._tooltipClass);
this._updateTooltipMessage(); /** @type {?} */
((this._tooltipInstance)).show(this._position, delay);
};
/** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
/**
* Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input
* @param {?=} delay
* @return {?}
*/
MatTooltip.prototype.hide = /**
* Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input
* @param {?=} delay
* @return {?}
*/
function (delay) {
if (delay === void 0) {
delay = this.hideDelay;
}
if (this._tooltipInstance) {
this._tooltipInstance.hide(delay);
}
};
/** Shows/hides the tooltip */
/**
* Shows/hides the tooltip
* @return {?}
*/
MatTooltip.prototype.toggle = /**
* Shows/hides the tooltip
* @return {?}
*/
function () {
this._isTooltipVisible() ? this.hide() : this.show();
};
/** Returns true if the tooltip is currently visible to the user */
/**
* Returns true if the tooltip is currently visible to the user
* @return {?}
*/
MatTooltip.prototype._isTooltipVisible = /**
* Returns true if the tooltip is currently visible to the user
* @return {?}
*/
function () {
return !!this._tooltipInstance && this._tooltipInstance.isVisible();
};
/** Handles the keydown events on the host element. */
/**
* Handles the keydown events on the host element.
* @param {?} e
* @return {?}
*/
MatTooltip.prototype._handleKeydown = /**
* Handles the keydown events on the host element.
* @param {?} e
* @return {?}
*/
function (e) {
if (this._isTooltipVisible() && e.keyCode === keycodes.ESCAPE) {
e.stopPropagation();
this.hide(0);
}
};
/** Handles the touchend events on the host element. */
/**
* Handles the touchend events on the host element.
* @return {?}
*/
MatTooltip.prototype._handleTouchend = /**
* Handles the touchend events on the host element.
* @return {?}
*/
function () {
this.hide(this._defaultOptions ? this._defaultOptions.touchendHideDelay : 1500);
};
/**
* Create the tooltip to display
* @return {?}
*/
MatTooltip.prototype._createTooltip = /**
* Create the tooltip to display
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ overlayRef = this._createOverlay();
var /** @type {?} */ portal$$1 = new portal.ComponentPortal(TooltipComponent, this._viewContainerRef);
this._tooltipInstance = overlayRef.attach(portal$$1).instance;
// Dispose of the tooltip when the overlay is detached.
merge.merge(/** @type {?} */ ((this._tooltipInstance)).afterHidden(), overlayRef.detachments()).subscribe(function () {
// Check first if the tooltip has already been removed through this components destroy.
if (_this._tooltipInstance) {
_this._disposeTooltip();
}
});
};
/**
* Create the overlay config and position strategy
* @return {?}
*/
MatTooltip.prototype._createOverlay = /**
* Create the overlay config and position strategy
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ origin = this._getOrigin();
var /** @type {?} */ overlay$$1 = this._getOverlayPosition();
// Create connected position strategy that listens for scroll events to reposition.
var /** @type {?} */ strategy = this._overlay
.position()
.connectedTo(this._elementRef, origin.main, overlay$$1.main)
.withFallbackPosition(origin.fallback, overlay$$1.fallback);
var /** @type {?} */ scrollableAncestors = this._scrollDispatcher
.getAncestorScrollContainers(this._elementRef);
strategy.withScrollableContainers(scrollableAncestors);
strategy.onPositionChange.subscribe(function (change) {
if (_this._tooltipInstance) {
if (change.scrollableViewProperties.isOverlayClipped && _this._tooltipInstance.isVisible()) {
// After position changes occur and the overlay is clipped by
// a parent scrollable then close the tooltip.
// After position changes occur and the overlay is clipped by
// a parent scrollable then close the tooltip.
_this._ngZone.run(function () { return _this.hide(0); });
}
else {
// Otherwise recalculate the origin based on the new position.
// Otherwise recalculate the origin based on the new position.
_this._tooltipInstance._setTransformOrigin(change.connectionPair);
}
}
});
var /** @type {?} */ config = new overlay.OverlayConfig({
direction: this._dir ? this._dir.value : 'ltr',
positionStrategy: strategy,
panelClass: TOOLTIP_PANEL_CLASS,
scrollStrategy: this._scrollStrategy()
});
this._overlayRef = this._overlay.create(config);
return this._overlayRef;
};
/**
* Disposes the current tooltip and the overlay it is attached to
* @return {?}
*/
MatTooltip.prototype._disposeTooltip = /**
* Disposes the current tooltip and the overlay it is attached to
* @return {?}
*/
function () {
if (this._overlayRef) {
this._overlayRef.dispose();
this._overlayRef = null;
}
this._tooltipInstance = null;
};
/**
* Returns the origin position and a fallback position based on the user's position preference.
* The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
*/
/**
* Returns the origin position and a fallback position based on the user's position preference.
* The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
* @return {?}
*/
MatTooltip.prototype._getOrigin = /**
* Returns the origin position and a fallback position based on the user's position preference.
* The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
* @return {?}
*/
function () {
var /** @type {?} */ isDirectionLtr = !this._dir || this._dir.value == 'ltr';
var /** @type {?} */ position;
if (this.position == 'above' || this.position == 'below') {
position = { originX: 'center', originY: this.position == 'above' ? 'top' : 'bottom' };
}
else if (this.position == 'left' ||
this.position == 'before' && isDirectionLtr ||
this.position == 'after' && !isDirectionLtr) {
position = { originX: 'start', originY: 'center' };
}
else if (this.position == 'right' ||
this.position == 'after' && isDirectionLtr ||
this.position == 'before' && !isDirectionLtr) {
position = { originX: 'end', originY: 'center' };
}
else {
throw getMatTooltipInvalidPositionError(this.position);
}
var _a = this._invertPosition(position.originX, position.originY), x = _a.x, y = _a.y;
return {
main: position,
fallback: { originX: x, originY: y }
};
};
/** Returns the overlay position and a fallback position based on the user's preference */
/**
* Returns the overlay position and a fallback position based on the user's preference
* @return {?}
*/
MatTooltip.prototype._getOverlayPosition = /**
* Returns the overlay position and a fallback position based on the user's preference
* @return {?}
*/
function () {
var /** @type {?} */ isLtr = !this._dir || this._dir.value == 'ltr';
var /** @type {?} */ position;
if (this.position == 'above') {
position = { overlayX: 'center', overlayY: 'bottom' };
}
else if (this.position == 'below') {
position = { overlayX: 'center', overlayY: 'top' };
}
else if (this.position == 'left' ||
this.position == 'before' && isLtr ||
this.position == 'after' && !isLtr) {
position = { overlayX: 'end', overlayY: 'center' };
}
else if (this.position == 'right' ||
this.position == 'after' && isLtr ||
this.position == 'before' && !isLtr) {
position = { overlayX: 'start', overlayY: 'center' };
}
else {
throw getMatTooltipInvalidPositionError(this.position);
}
var _a = this._invertPosition(position.overlayX, position.overlayY), x = _a.x, y = _a.y;
return {
main: position,
fallback: { overlayX: x, overlayY: y }
};
};
/**
* Updates the tooltip message and repositions the overlay according to the new message length
* @return {?}
*/
MatTooltip.prototype._updateTooltipMessage = /**
* Updates the tooltip message and repositions the overlay according to the new message length
* @return {?}
*/
function () {
var _this = this;
// Must wait for the message to be painted to the tooltip so that the overlay can properly
// calculate the correct positioning based on the size of the text.
if (this._tooltipInstance) {
this._tooltipInstance.message = this.message;
this._tooltipInstance._markForCheck();
this._ngZone.onMicrotaskEmpty.asObservable().pipe(take_2(1)).subscribe(function () {
if (_this._tooltipInstance) {
/** @type {?} */ ((_this._overlayRef)).updatePosition();
}
});
}
};
/**
* Updates the tooltip class
* @param {?} tooltipClass
* @return {?}
*/
MatTooltip.prototype._setTooltipClass = /**
* Updates the tooltip class
* @param {?} tooltipClass
* @return {?}
*/
function (tooltipClass) {
if (this._tooltipInstance) {
this._tooltipInstance.tooltipClass = tooltipClass;
this._tooltipInstance._markForCheck();
}
};
/**
* Inverts an overlay position.
* @param {?} x
* @param {?} y
* @return {?}
*/
MatTooltip.prototype._invertPosition = /**
* Inverts an overlay position.
* @param {?} x
* @param {?} y
* @return {?}
*/
function (x, y) {
if (this.position === 'above' || this.position === 'below') {
if (y === 'top') {
y = 'bottom';
}
else if (y === 'bottom') {
y = 'top';
}
}
else {
if (x === 'end') {
x = 'start';
}
else if (x === 'start') {
x = 'end';
}
}
return { x: x, y: y };
};
MatTooltip.decorators = [
{ type: core.Directive, args: [{
selector: '[matTooltip]',
exportAs: 'matTooltip',
host: {
'(longpress)': 'show()',
'(keydown)': '_handleKeydown($event)',
'(touchend)': '_handleTouchend()',
},
},] },
];
/** @nocollapse */
MatTooltip.ctorParameters = function () {
return [
{ type: overlay.Overlay, },
{ type: core.ElementRef, },
{ type: scrolling.ScrollDispatcher, },
{ type: core.ViewContainerRef, },
{ type: core.NgZone, },
{ type: platform.Platform, },
{ type: a11y.AriaDescriber, },
{ type: a11y.FocusMonitor, },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_TOOLTIP_SCROLL_STRATEGY,] },] },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_TOOLTIP_DEFAULT_OPTIONS,] },] },
];
};
MatTooltip.propDecorators = {
"position": [{ type: core.Input, args: ['matTooltipPosition',] },],
"disabled": [{ type: core.Input, args: ['matTooltipDisabled',] },],
"_positionDeprecated": [{ type: core.Input, args: ['tooltip-position',] },],
"showDelay": [{ type: core.Input, args: ['matTooltipShowDelay',] },],
"hideDelay": [{ type: core.Input, args: ['matTooltipHideDelay',] },],
"message": [{ type: core.Input, args: ['matTooltip',] },],
"tooltipClass": [{ type: core.Input, args: ['matTooltipClass',] },],
};
return MatTooltip;
}());
/**
* Internal component that wraps the tooltip's content.
* \@docs-private
*/
var TooltipComponent = (function () {
function TooltipComponent(_changeDetectorRef, _breakpointObserver) {
this._changeDetectorRef = _changeDetectorRef;
this._breakpointObserver = _breakpointObserver;
/**
* Property watched by the animation framework to show or hide the tooltip
*/
this._visibility = 'initial';
/**
* Whether interactions on the page should close the tooltip
*/
this._closeOnInteraction = false;
/**
* The transform origin used in the animation for showing and hiding the tooltip
*/
this._transformOrigin = 'bottom';
/**
* Subject for notifying that the tooltip has been hidden from the view
*/
this._onHide = new Subject.Subject();
/**
* Stream that emits whether the user has a handset-sized display.
*/
this._isHandset = this._breakpointObserver.observe(Breakpoints.Handset);
}
/**
* Shows the tooltip with an animation originating from the provided origin
* @param position Position of the tooltip.
* @param delay Amount of milliseconds to the delay showing the tooltip.
*/
/**
* Shows the tooltip with an animation originating from the provided origin
* @param {?} position Position of the tooltip.
* @param {?} delay Amount of milliseconds to the delay showing the tooltip.
* @return {?}
*/
TooltipComponent.prototype.show = /**
* Shows the tooltip with an animation originating from the provided origin
* @param {?} position Position of the tooltip.
* @param {?} delay Amount of milliseconds to the delay showing the tooltip.
* @return {?}
*/
function (position, delay) {
var _this = this;
// Cancel the delayed hide if it is scheduled
if (this._hideTimeoutId) {
clearTimeout(this._hideTimeoutId);
}
// Body interactions should cancel the tooltip if there is a delay in showing.
this._closeOnInteraction = true;
this._position = position;
this._showTimeoutId = setTimeout(function () {
_this._visibility = 'visible';
// Mark for check so if any parent component has set the
// ChangeDetectionStrategy to OnPush it will be checked anyways
// Mark for check so if any parent component has set the
// ChangeDetectionStrategy to OnPush it will be checked anyways
_this._markForCheck();
}, delay);
};
/**
* Begins the animation to hide the tooltip after the provided delay in ms.
* @param delay Amount of milliseconds to delay showing the tooltip.
*/
/**
* Begins the animation to hide the tooltip after the provided delay in ms.
* @param {?} delay Amount of milliseconds to delay showing the tooltip.
* @return {?}
*/
TooltipComponent.prototype.hide = /**
* Begins the animation to hide the tooltip after the provided delay in ms.
* @param {?} delay Amount of milliseconds to delay showing the tooltip.
* @return {?}
*/
function (delay) {
var _this = this;
// Cancel the delayed show if it is scheduled
if (this._showTimeoutId) {
clearTimeout(this._showTimeoutId);
}
this._hideTimeoutId = setTimeout(function () {
_this._visibility = 'hidden';
// Mark for check so if any parent component has set the
// ChangeDetectionStrategy to OnPush it will be checked anyways
// Mark for check so if any parent component has set the
// ChangeDetectionStrategy to OnPush it will be checked anyways
_this._markForCheck();
}, delay);
};
/** Returns an observable that notifies when the tooltip has been hidden from view. */
/**
* Returns an observable that notifies when the tooltip has been hidden from view.
* @return {?}
*/
TooltipComponent.prototype.afterHidden = /**
* Returns an observable that notifies when the tooltip has been hidden from view.
* @return {?}
*/
function () {
return this._onHide.asObservable();
};
/** Whether the tooltip is being displayed. */
/**
* Whether the tooltip is being displayed.
* @return {?}
*/
TooltipComponent.prototype.isVisible = /**
* Whether the tooltip is being displayed.
* @return {?}
*/
function () {
return this._visibility === 'visible';
};
/** Sets the tooltip transform origin according to the position of the tooltip overlay. */
/**
* Sets the tooltip transform origin according to the position of the tooltip overlay.
* @param {?} overlayPosition
* @return {?}
*/
TooltipComponent.prototype._setTransformOrigin = /**
* Sets the tooltip transform origin according to the position of the tooltip overlay.
* @param {?} overlayPosition
* @return {?}
*/
function (overlayPosition) {
var /** @type {?} */ axis = (this._position === 'above' || this._position === 'below') ? 'Y' : 'X';
var /** @type {?} */ position = axis == 'X' ? overlayPosition.overlayX : overlayPosition.overlayY;
if (position === 'top' || position === 'bottom') {
this._transformOrigin = position;
}
else if (position === 'start') {
this._transformOrigin = 'left';
}
else if (position === 'end') {
this._transformOrigin = 'right';
}
else {
throw getMatTooltipInvalidPositionError(this._position);
}
};
/**
* @return {?}
*/
TooltipComponent.prototype._animationStart = /**
* @return {?}
*/
function () {
this._closeOnInteraction = false;
};
/**
* @param {?} event
* @return {?}
*/
TooltipComponent.prototype._animationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
var /** @type {?} */ toState = (event.toState);
if (toState === 'hidden' && !this.isVisible()) {
this._onHide.next();
}
if (toState === 'visible' || toState === 'hidden') {
this._closeOnInteraction = true;
}
};
/**
* Interactions on the HTML body should close the tooltip immediately as defined in the
* material design spec.
* https://material.google.com/components/tooltips.html#tooltips-interaction
*/
/**
* Interactions on the HTML body should close the tooltip immediately as defined in the
* material design spec.
* https://material.google.com/components/tooltips.html#tooltips-interaction
* @return {?}
*/
TooltipComponent.prototype._handleBodyInteraction = /**
* Interactions on the HTML body should close the tooltip immediately as defined in the
* material design spec.
* https://material.google.com/components/tooltips.html#tooltips-interaction
* @return {?}
*/
function () {
if (this._closeOnInteraction) {
this.hide(0);
}
};
/**
* Marks that the tooltip needs to be checked in the next change detection run.
* Mainly used for rendering the initial text before positioning a tooltip, which
* can be problematic in components with OnPush change detection.
*/
/**
* Marks that the tooltip needs to be checked in the next change detection run.
* Mainly used for rendering the initial text before positioning a tooltip, which
* can be problematic in components with OnPush change detection.
* @return {?}
*/
TooltipComponent.prototype._markForCheck = /**
* Marks that the tooltip needs to be checked in the next change detection run.
* Mainly used for rendering the initial text before positioning a tooltip, which
* can be problematic in components with OnPush change detection.
* @return {?}
*/
function () {
this._changeDetectorRef.markForCheck();
};
TooltipComponent.decorators = [
{ type: core.Component, args: [{ selector: 'mat-tooltip-component',
template: "<div class=\"mat-tooltip\" [ngClass]=\"tooltipClass\" [class.mat-tooltip-handset]=\"(_isHandset | async)!.matches\" [style.transform-origin]=\"_transformOrigin\" [@state]=\"_visibility\" (@state.start)=\"_animationStart()\" (@state.done)=\"_animationDone($event)\">{{message}}</div>",
styles: [".mat-tooltip-panel{pointer-events:none!important}.mat-tooltip{color:#fff;border-radius:2px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px}@media screen and (-ms-high-contrast:active){.mat-tooltip{outline:solid 1px}}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
animations: [matTooltipAnimations.tooltipState],
host: {
// Forces the element to have a layout in IE and Edge. This fixes issues where the element
// won't be rendered if the animations are disabled or there is no web animations polyfill.
'[style.zoom]': '_visibility === "visible" ? 1 : null',
'(body:click)': 'this._handleBodyInteraction()',
'aria-hidden': 'true',
}
},] },
];
/** @nocollapse */
TooltipComponent.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef, },
{ type: BreakpointObserver, },
];
};
return TooltipComponent;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* To modify the labels and text displayed, create a new instance of MatPaginatorIntl and
* include it in a custom provider
*/
var MatPaginatorIntl = (function () {
function MatPaginatorIntl() {
/**
* Stream that emits whenever the labels here are changed. Use this to notify
* components if the labels have changed after initialization.
*/
this.changes = new Subject.Subject();
/**
* A label for the page size selector.
*/
this.itemsPerPageLabel = 'Items per page:';
/**
* A label for the button that increments the current page.
*/
this.nextPageLabel = 'Next page';
/**
* A label for the button that decrements the current page.
*/
this.previousPageLabel = 'Previous page';
/**
* A label for the button that moves to the first page.
*/
this.firstPageLabel = 'First page';
/**
* A label for the button that moves to the last page.
*/
this.lastPageLabel = 'Last page';
/**
* A label for the range of items within the current page and the length of the whole list.
*/
this.getRangeLabel = function (page, pageSize, length) {
if (length == 0 || pageSize == 0) {
return "0 of " + length;
}
length = Math.max(length, 0);
var /** @type {?} */ startIndex = page * pageSize;
// If the start index exceeds the list length, do not try and fix the end index to the end.
var /** @type {?} */ endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return startIndex + 1 + " - " + endIndex + " of " + length;
};
}
MatPaginatorIntl.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatPaginatorIntl.ctorParameters = function () { return []; };
return MatPaginatorIntl;
}());
/**
* \@docs-private
* @param {?} parentIntl
* @return {?}
*/
function MAT_PAGINATOR_INTL_PROVIDER_FACTORY(parentIntl) {
return parentIntl || new MatPaginatorIntl();
}
/**
* \@docs-private
*/
var MAT_PAGINATOR_INTL_PROVIDER = {
// If there is already an MatPaginatorIntl available, use that. Otherwise, provide a new one.
provide: MatPaginatorIntl,
deps: [[new core.Optional(), new core.SkipSelf(), MatPaginatorIntl]],
useFactory: MAT_PAGINATOR_INTL_PROVIDER_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The default page size if there is no page size and there are no provided page size options.
*/
var DEFAULT_PAGE_SIZE = 50;
/**
* Component to provide navigation between paged information. Displays the size of the current
* page, user-selectable options to change that size, what items are being shown, and
* navigational button to go to the previous or next page.
*/
var MatPaginator = (function () {
function MatPaginator(_intl, _changeDetectorRef) {
var _this = this;
this._intl = _intl;
this._changeDetectorRef = _changeDetectorRef;
this._pageIndex = 0;
this._length = 0;
this._pageSizeOptions = [];
this._hidePageSize = false;
this._showFirstLastButtons = false;
/**
* Event emitted when the paginator changes the page size or page index.
*/
this.page = new core.EventEmitter();
this._intlChanges = _intl.changes.subscribe(function () { return _this._changeDetectorRef.markForCheck(); });
}
Object.defineProperty(MatPaginator.prototype, "pageIndex", {
get: /**
* The zero-based page index of the displayed list of items. Defaulted to 0.
* @return {?}
*/ function () { return this._pageIndex; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._pageIndex = coercion.coerceNumberProperty(value);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatPaginator.prototype, "length", {
get: /**
* The length of the total number of items that are being paginated. Defaulted to 0.
* @return {?}
*/ function () { return this._length; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._length = coercion.coerceNumberProperty(value);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatPaginator.prototype, "pageSize", {
get: /**
* Number of items to display on a page. By default set to 50.
* @return {?}
*/ function () { return this._pageSize; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._pageSize = coercion.coerceNumberProperty(value);
this._updateDisplayedPageSizeOptions();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatPaginator.prototype, "pageSizeOptions", {
get: /**
* The set of provided page size options to display to the user.
* @return {?}
*/ function () { return this._pageSizeOptions; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._pageSizeOptions = (value || []).map(function (p) { return coercion.coerceNumberProperty(p); });
this._updateDisplayedPageSizeOptions();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatPaginator.prototype, "hidePageSize", {
get: /**
* Whether to hide the page size selection UI from the user.
* @return {?}
*/ function () { return this._hidePageSize; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._hidePageSize = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatPaginator.prototype, "showFirstLastButtons", {
get: /**
* Whether to show the first/last buttons UI to the user.
* @return {?}
*/ function () { return this._showFirstLastButtons; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._showFirstLastButtons = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatPaginator.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._initialized = true;
this._updateDisplayedPageSizeOptions();
};
/**
* @return {?}
*/
MatPaginator.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._intlChanges.unsubscribe();
};
/** Advances to the next page if it exists. */
/**
* Advances to the next page if it exists.
* @return {?}
*/
MatPaginator.prototype.nextPage = /**
* Advances to the next page if it exists.
* @return {?}
*/
function () {
if (!this.hasNextPage()) {
return;
}
this.pageIndex++;
this._emitPageEvent();
};
/** Move back to the previous page if it exists. */
/**
* Move back to the previous page if it exists.
* @return {?}
*/
MatPaginator.prototype.previousPage = /**
* Move back to the previous page if it exists.
* @return {?}
*/
function () {
if (!this.hasPreviousPage()) {
return;
}
this.pageIndex--;
this._emitPageEvent();
};
/** Move to the first page if not already there. */
/**
* Move to the first page if not already there.
* @return {?}
*/
MatPaginator.prototype.firstPage = /**
* Move to the first page if not already there.
* @return {?}
*/
function () {
// hasPreviousPage being false implies at the start
if (!this.hasPreviousPage()) {
return;
}
this.pageIndex = 0;
this._emitPageEvent();
};
/** Move to the last page if not already there. */
/**
* Move to the last page if not already there.
* @return {?}
*/
MatPaginator.prototype.lastPage = /**
* Move to the last page if not already there.
* @return {?}
*/
function () {
// hasNextPage being false implies at the end
if (!this.hasNextPage()) {
return;
}
this.pageIndex = this.getNumberOfPages();
this._emitPageEvent();
};
/** Whether there is a previous page. */
/**
* Whether there is a previous page.
* @return {?}
*/
MatPaginator.prototype.hasPreviousPage = /**
* Whether there is a previous page.
* @return {?}
*/
function () {
return this.pageIndex >= 1 && this.pageSize != 0;
};
/** Whether there is a next page. */
/**
* Whether there is a next page.
* @return {?}
*/
MatPaginator.prototype.hasNextPage = /**
* Whether there is a next page.
* @return {?}
*/
function () {
var /** @type {?} */ numberOfPages = this.getNumberOfPages();
return this.pageIndex < numberOfPages && this.pageSize != 0;
};
/** Calculate the number of pages */
/**
* Calculate the number of pages
* @return {?}
*/
MatPaginator.prototype.getNumberOfPages = /**
* Calculate the number of pages
* @return {?}
*/
function () {
return Math.ceil(this.length / this.pageSize) - 1;
};
/**
* Changes the page size so that the first item displayed on the page will still be
* displayed using the new page size.
*
* For example, if the page size is 10 and on the second page (items indexed 10-19) then
* switching so that the page size is 5 will set the third page as the current page so
* that the 10th item will still be displayed.
*/
/**
* Changes the page size so that the first item displayed on the page will still be
* displayed using the new page size.
*
* For example, if the page size is 10 and on the second page (items indexed 10-19) then
* switching so that the page size is 5 will set the third page as the current page so
* that the 10th item will still be displayed.
* @param {?} pageSize
* @return {?}
*/
MatPaginator.prototype._changePageSize = /**
* Changes the page size so that the first item displayed on the page will still be
* displayed using the new page size.
*
* For example, if the page size is 10 and on the second page (items indexed 10-19) then
* switching so that the page size is 5 will set the third page as the current page so
* that the 10th item will still be displayed.
* @param {?} pageSize
* @return {?}
*/
function (pageSize) {
// Current page needs to be updated to reflect the new page size. Navigate to the page
// containing the previous page's first item.
var /** @type {?} */ startIndex = this.pageIndex * this.pageSize;
this.pageIndex = Math.floor(startIndex / pageSize) || 0;
this.pageSize = pageSize;
this._emitPageEvent();
};
/**
* Updates the list of page size options to display to the user. Includes making sure that
* the page size is an option and that the list is sorted.
* @return {?}
*/
MatPaginator.prototype._updateDisplayedPageSizeOptions = /**
* Updates the list of page size options to display to the user. Includes making sure that
* the page size is an option and that the list is sorted.
* @return {?}
*/
function () {
if (!this._initialized) {
return;
}
// If no page size is provided, use the first page size option or the default page size.
if (!this.pageSize) {
this._pageSize = this.pageSizeOptions.length != 0 ?
this.pageSizeOptions[0] :
DEFAULT_PAGE_SIZE;
}
this._displayedPageSizeOptions = this.pageSizeOptions.slice();
if (this._displayedPageSizeOptions.indexOf(this.pageSize) == -1) {
this._displayedPageSizeOptions.push(this.pageSize);
}
// Sort the numbers using a number-specific sort function.
this._displayedPageSizeOptions.sort(function (a, b) { return a - b; });
this._changeDetectorRef.markForCheck();
};
/**
* Emits an event notifying that a change of the paginator's properties has been triggered.
* @return {?}
*/
MatPaginator.prototype._emitPageEvent = /**
* Emits an event notifying that a change of the paginator's properties has been triggered.
* @return {?}
*/
function () {
this.page.emit({
pageIndex: this.pageIndex,
pageSize: this.pageSize,
length: this.length
});
};
MatPaginator.decorators = [
{ type: core.Component, args: [{ selector: 'mat-paginator',
exportAs: 'matPaginator',
template: "<div class=\"mat-paginator-container\"><div class=\"mat-paginator-page-size\" *ngIf=\"!hidePageSize\"><div class=\"mat-paginator-page-size-label\">{{_intl.itemsPerPageLabel}}</div><mat-form-field *ngIf=\"_displayedPageSizeOptions.length > 1\" class=\"mat-paginator-page-size-select\"><mat-select [value]=\"pageSize\" [aria-label]=\"_intl.itemsPerPageLabel\" (change)=\"_changePageSize($event.value)\"><mat-option *ngFor=\"let pageSizeOption of _displayedPageSizeOptions\" [value]=\"pageSizeOption\">{{pageSizeOption}}</mat-option></mat-select></mat-form-field><div *ngIf=\"_displayedPageSizeOptions.length <= 1\">{{pageSize}}</div></div><div class=\"mat-paginator-range-actions\"><div class=\"mat-paginator-range-label\">{{_intl.getRangeLabel(pageIndex, pageSize, length)}}</div><button mat-icon-button type=\"button\" class=\"mat-paginator-navigation-first\" (click)=\"firstPage()\" [attr.aria-label]=\"_intl.firstPageLabel\" [matTooltip]=\"_intl.firstPageLabel\" [matTooltipPosition]=\"'above'\" [disabled]=\"!hasPreviousPage()\" *ngIf=\"showFirstLastButtons\"><div class=\"mat-paginator-first\"></div><div class=\"mat-paginator-decrement\"></div></button> <button mat-icon-button type=\"button\" class=\"mat-paginator-navigation-previous\" (click)=\"previousPage()\" [attr.aria-label]=\"_intl.previousPageLabel\" [matTooltip]=\"_intl.previousPageLabel\" [matTooltipPosition]=\"'above'\" [disabled]=\"!hasPreviousPage()\"><div class=\"mat-paginator-decrement\"></div></button> <button mat-icon-button type=\"button\" class=\"mat-paginator-navigation-next\" (click)=\"nextPage()\" [attr.aria-label]=\"_intl.nextPageLabel\" [matTooltip]=\"_intl.nextPageLabel\" [matTooltipPosition]=\"'above'\" [disabled]=\"!hasNextPage()\"><div class=\"mat-paginator-increment\"></div></button> <button mat-icon-button type=\"button\" class=\"mat-paginator-navigation-last\" (click)=\"lastPage()\" [attr.aria-label]=\"_intl.lastPageLabel\" [matTooltip]=\"_intl.lastPageLabel\" [matTooltipPosition]=\"'above'\" [disabled]=\"!hasNextPage()\" *ngIf=\"showFirstLastButtons\"><div class=\"mat-paginator-increment\"></div><div class=\"mat-paginator-last\"></div></button></div></div>",
styles: [".mat-paginator{display:block}.mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;min-height:56px;padding:0 8px;flex-wrap:wrap-reverse}.mat-paginator-page-size{display:flex;align-items:baseline;margin-right:8px}.mat-paginator-page-size-label{margin:0 4px}.mat-paginator-page-size-select{margin:6px 4px 0 4px;width:56px}.mat-paginator-range-label{margin:0 32px 0 24px}.mat-paginator-decrement-button+.mat-paginator-decrement-button{margin:0 0 0 8px}[dir=rtl] .mat-paginator-decrement-button+.mat-paginator-decrement-button{margin:0 8px 0 0}.mat-paginator-decrement,.mat-paginator-increment{width:8px;height:8px}.mat-paginator-increment,[dir=rtl] .mat-paginator-decrement{transform:rotate(45deg)}.mat-paginator-decrement,[dir=rtl] .mat-paginator-increment{transform:rotate(225deg)}.mat-paginator-increment{margin-left:12px}[dir=rtl] .mat-paginator-increment{margin-right:12px}.mat-paginator-decrement{margin-left:16px}[dir=rtl] .mat-paginator-decrement{margin-right:16px}.mat-paginator-first{transform:rotate(90deg);width:14px;height:8px;float:left;margin-left:3px}.mat-paginator-navigation-first .mat-paginator-decrement{margin-left:21px}.mat-paginator-navigation-last .mat-paginator-increment{float:left;margin-left:9px}.mat-paginator-last{transform:rotate(90deg);width:14px;height:8px;margin-left:15px}.mat-paginator-range-actions{display:flex;align-items:center;min-height:48px}"],
host: {
'class': 'mat-paginator',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatPaginator.ctorParameters = function () {
return [
{ type: MatPaginatorIntl, },
{ type: core.ChangeDetectorRef, },
];
};
MatPaginator.propDecorators = {
"pageIndex": [{ type: core.Input },],
"length": [{ type: core.Input },],
"pageSize": [{ type: core.Input },],
"pageSizeOptions": [{ type: core.Input },],
"hidePageSize": [{ type: core.Input },],
"showFirstLastButtons": [{ type: core.Input },],
"page": [{ type: core.Output },],
};
return MatPaginator;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatProgressBarBase = (function () {
function MatProgressBarBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatProgressBarBase;
}());
var _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary');
/**
* Counter used to generate unique IDs for progress bars.
*/
var progressbarId = 0;
/**
* `<mat-progress-bar>` component.
*/
var MatProgressBar = (function (_super) {
__extends(MatProgressBar, _super);
function MatProgressBar(_elementRef) {
var _this = _super.call(this, _elementRef) || this;
_this._elementRef = _elementRef;
_this._value = 0;
_this._bufferValue = 0;
/**
* Mode of the progress bar.
*
* Input must be one of these values: determinate, indeterminate, buffer, query, defaults to
* 'determinate'.
* Mirrored to mode attribute.
*/
_this.mode = 'determinate';
/**
* The id of the progress bar.
*/
_this.progressbarId = "mat-progress-bar-" + progressbarId++;
return _this;
}
Object.defineProperty(MatProgressBar.prototype, "value", {
get: /**
* Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) { this._value = clamp(v || 0); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressBar.prototype, "bufferValue", {
get: /**
* Buffer value of the progress bar. Defaults to zero.
* @return {?}
*/ function () { return this._bufferValue; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) { this._bufferValue = clamp(v || 0); },
enumerable: true,
configurable: true
});
/** Gets the current transform value for the progress bar's primary indicator. */
/**
* Gets the current transform value for the progress bar's primary indicator.
* @return {?}
*/
MatProgressBar.prototype._primaryTransform = /**
* Gets the current transform value for the progress bar's primary indicator.
* @return {?}
*/
function () {
var /** @type {?} */ scale = this.value / 100;
return { transform: "scaleX(" + scale + ")" };
};
/**
* Gets the current transform value for the progress bar's buffer indicator. Only used if the
* progress mode is set to buffer, otherwise returns an undefined, causing no transformation.
*/
/**
* Gets the current transform value for the progress bar's buffer indicator. Only used if the
* progress mode is set to buffer, otherwise returns an undefined, causing no transformation.
* @return {?}
*/
MatProgressBar.prototype._bufferTransform = /**
* Gets the current transform value for the progress bar's buffer indicator. Only used if the
* progress mode is set to buffer, otherwise returns an undefined, causing no transformation.
* @return {?}
*/
function () {
if (this.mode === 'buffer') {
var /** @type {?} */ scale = this.bufferValue / 100;
return { transform: "scaleX(" + scale + ")" };
}
};
MatProgressBar.decorators = [
{ type: core.Component, args: [{ selector: 'mat-progress-bar',
exportAs: 'matProgressBar',
host: {
'role': 'progressbar',
'aria-valuemin': '0',
'aria-valuemax': '100',
'[attr.aria-valuenow]': 'value',
'[attr.mode]': 'mode',
'class': 'mat-progress-bar',
},
inputs: ['color'],
template: "<svg width=\"100%\" height=\"5\" focusable=\"false\" class=\"mat-progress-bar-background mat-progress-bar-element\"><defs><pattern [id]=\"progressbarId\" x=\"5\" y=\"0\" width=\"10\" height=\"5\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\"/></pattern></defs><rect [attr.fill]=\"'url(#' + progressbarId + ')'\" width=\"100%\" height=\"100%\"/></svg><div class=\"mat-progress-bar-buffer mat-progress-bar-element\" [ngStyle]=\"_bufferTransform()\"></div><div class=\"mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element\" [ngStyle]=\"_primaryTransform()\"></div><div class=\"mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element\"></div>",
styles: [".mat-progress-bar{display:block;height:5px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:'';display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.70173,.49582);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.30244,.38135,.55,.95635);transform:translateX(83.67142%)}100%{transform:translateX(200.61106%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.33473,.12482,.78584,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.66148)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:translateX(37.65191%)}48.35%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:translateX(84.38617%)}100%{transform:translateX(160.27778%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:scaleX(.4571)}44.15%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-10px)}}"],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatProgressBar.ctorParameters = function () {
return [
{ type: core.ElementRef, },
];
};
MatProgressBar.propDecorators = {
"value": [{ type: core.Input },],
"bufferValue": [{ type: core.Input },],
"mode": [{ type: core.Input },],
};
return MatProgressBar;
}(_MatProgressBarMixinBase));
/**
* Clamps a value to be between two numbers, by default 0 and 100.
* @param {?} v
* @param {?=} min
* @param {?=} max
* @return {?}
*/
function clamp(v, min, max) {
if (min === void 0) {
min = 0;
}
if (max === void 0) {
max = 100;
}
return Math.max(min, Math.min(max, v));
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Base reference size of the spinner.
* \@docs-private
*/
var BASE_SIZE = 100;
/**
* Base reference stroke width of the spinner.
* \@docs-private
*/
var BASE_STROKE_WIDTH = 10;
/**
* \@docs-private
*/
var MatProgressSpinnerBase = (function () {
function MatProgressSpinnerBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatProgressSpinnerBase;
}());
var _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary');
// .0001 percentage difference is necessary in order to avoid unwanted animation frames
// for example because the animation duration is 4 seconds, .1% accounts to 4ms
// which are enough to see the flicker described in
// https://github.com/angular/material2/issues/8984
var INDETERMINATE_ANIMATION_TEMPLATE = "\n @keyframes mat-progress-spinner-stroke-rotate-DIAMETER {\n 0% { stroke-dashoffset: START_VALUE; transform: rotate(0); }\n 12.5% { stroke-dashoffset: END_VALUE; transform: rotate(0); }\n 12.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(72.5deg); }\n 25% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(72.5deg); }\n\n 25.0001% { stroke-dashoffset: START_VALUE; transform: rotate(270deg); }\n 37.5% { stroke-dashoffset: END_VALUE; transform: rotate(270deg); }\n 37.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(161.5deg); }\n 50% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(161.5deg); }\n\n 50.0001% { stroke-dashoffset: START_VALUE; transform: rotate(180deg); }\n 62.5% { stroke-dashoffset: END_VALUE; transform: rotate(180deg); }\n 62.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(251.5deg); }\n 75% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(251.5deg); }\n\n 75.0001% { stroke-dashoffset: START_VALUE; transform: rotate(90deg); }\n 87.5% { stroke-dashoffset: END_VALUE; transform: rotate(90deg); }\n 87.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(341.5deg); }\n 100% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(341.5deg); }\n }\n";
/**
* `<mat-progress-spinner>` component.
*/
var MatProgressSpinner = (function (_super) {
__extends(MatProgressSpinner, _super);
function MatProgressSpinner(_elementRef, platform$$1, _document) {
var _this = _super.call(this, _elementRef) || this;
_this._elementRef = _elementRef;
_this._document = _document;
_this._value = 0;
_this._fallbackAnimation = false;
/**
* The width and height of the host element. Will grow with stroke width.
*/
_this._elementSize = BASE_SIZE;
_this._diameter = BASE_SIZE;
/**
* Mode of the progress circle
*/
_this.mode = 'determinate';
_this._fallbackAnimation = platform$$1.EDGE || platform$$1.TRIDENT;
// On IE and Edge, we can't animate the `stroke-dashoffset`
// reliably so we fall back to a non-spec animation.
var /** @type {?} */ animationClass = "mat-progress-spinner-indeterminate" + (_this._fallbackAnimation ? '-fallback' : '') + "-animation";
_elementRef.nativeElement.classList.add(animationClass);
return _this;
}
Object.defineProperty(MatProgressSpinner.prototype, "diameter", {
get: /**
* The diameter of the progress spinner (will set width and height of svg).
* @return {?}
*/ function () { return this._diameter; },
set: /**
* @param {?} size
* @return {?}
*/ function (size) {
this._diameter = coercion.coerceNumberProperty(size);
if (!this._fallbackAnimation && !MatProgressSpinner.diameters.has(this._diameter)) {
this._attachStyleNode();
}
this._updateElementSize();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressSpinner.prototype, "strokeWidth", {
get: /**
* Stroke width of the progress spinner.
* @return {?}
*/ function () {
return this._strokeWidth || this.diameter / 10;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._strokeWidth = coercion.coerceNumberProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressSpinner.prototype, "value", {
get: /**
* Value of the progress circle.
* @return {?}
*/ function () {
return this.mode === 'determinate' ? this._value : 0;
},
set: /**
* @param {?} newValue
* @return {?}
*/ function (newValue) {
this._value = Math.max(0, Math.min(100, coercion.coerceNumberProperty(newValue)));
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
MatProgressSpinner.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes["strokeWidth"] || changes["diameter"]) {
this._updateElementSize();
}
};
Object.defineProperty(MatProgressSpinner.prototype, "_circleRadius", {
/** The radius of the spinner, adjusted for stroke width. */
get: /**
* The radius of the spinner, adjusted for stroke width.
* @return {?}
*/ function () {
return (this.diameter - BASE_STROKE_WIDTH) / 2;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressSpinner.prototype, "_viewBox", {
/** The view box of the spinner's svg element. */
get: /**
* The view box of the spinner's svg element.
* @return {?}
*/ function () {
var /** @type {?} */ viewBox = this._circleRadius * 2 + this.strokeWidth;
return "0 0 " + viewBox + " " + viewBox;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressSpinner.prototype, "_strokeCircumference", {
/** The stroke circumference of the svg circle. */
get: /**
* The stroke circumference of the svg circle.
* @return {?}
*/ function () {
return 2 * Math.PI * this._circleRadius;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressSpinner.prototype, "_strokeDashOffset", {
/** The dash offset of the svg circle. */
get: /**
* The dash offset of the svg circle.
* @return {?}
*/ function () {
if (this.mode === 'determinate') {
return this._strokeCircumference * (100 - this._value) / 100;
}
// In fallback mode set the circle to 80% and rotate it with CSS.
if (this._fallbackAnimation && this.mode === 'indeterminate') {
return this._strokeCircumference * 0.2;
}
return null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatProgressSpinner.prototype, "_circleStrokeWidth", {
/** Stroke width of the circle in percent. */
get: /**
* Stroke width of the circle in percent.
* @return {?}
*/ function () {
return this.strokeWidth / this._elementSize * 100;
},
enumerable: true,
configurable: true
});
/**
* Dynamically generates a style tag containing the correct animation for this diameter.
* @return {?}
*/
MatProgressSpinner.prototype._attachStyleNode = /**
* Dynamically generates a style tag containing the correct animation for this diameter.
* @return {?}
*/
function () {
var /** @type {?} */ styleTag = MatProgressSpinner.styleTag;
if (!styleTag) {
styleTag = this._document.createElement('style');
this._document.head.appendChild(styleTag);
MatProgressSpinner.styleTag = styleTag;
}
if (styleTag && styleTag.sheet) {
((styleTag.sheet)).insertRule(this._getAnimationText(), 0);
}
MatProgressSpinner.diameters.add(this.diameter);
};
/**
* Generates animation styles adjusted for the spinner's diameter.
* @return {?}
*/
MatProgressSpinner.prototype._getAnimationText = /**
* Generates animation styles adjusted for the spinner's diameter.
* @return {?}
*/
function () {
return INDETERMINATE_ANIMATION_TEMPLATE
.replace(/START_VALUE/g, "" + 0.95 * this._strokeCircumference)
.replace(/END_VALUE/g, "" + 0.2 * this._strokeCircumference)
.replace(/DIAMETER/g, "" + this.diameter);
};
/**
* Updates the spinner element size based on its diameter.
* @return {?}
*/
MatProgressSpinner.prototype._updateElementSize = /**
* Updates the spinner element size based on its diameter.
* @return {?}
*/
function () {
this._elementSize = this._diameter + Math.max(this.strokeWidth - BASE_STROKE_WIDTH, 0);
};
/**
* Tracks diameters of existing instances to de-dupe generated styles (default d = 100)
*/
MatProgressSpinner.diameters = new Set([BASE_SIZE]);
/**
* Used for storing all of the generated keyframe animations.
* \@dynamic
*/
MatProgressSpinner.styleTag = null;
MatProgressSpinner.decorators = [
{ type: core.Component, args: [{ selector: 'mat-progress-spinner',
exportAs: 'matProgressSpinner',
host: {
'role': 'progressbar',
'class': 'mat-progress-spinner',
'[style.width.px]': '_elementSize',
'[style.height.px]': '_elementSize',
'[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null',
'[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null',
'[attr.aria-valuenow]': 'value',
'[attr.mode]': 'mode',
},
inputs: ['color'],
template: "<svg [style.width.px]=\"_elementSize\" [style.height.px]=\"_elementSize\" [attr.viewBox]=\"_viewBox\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><circle cx=\"50%\" cy=\"50%\" [attr.r]=\"_circleRadius\" [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + diameter\" [style.stroke-dashoffset.px]=\"_strokeDashOffset\" [style.stroke-dasharray.px]=\"_strokeCircumference\" [style.stroke-width.%]=\"_circleStrokeWidth\"></circle></svg>",
styles: [".mat-progress-spinner{display:block;position:relative}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate]{animation:mat-progress-spinner-linear-rotate 2s linear infinite}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4s;animation-timing-function:cubic-bezier(.35,0,.25,1);animation-iteration-count:infinite}.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate]{animation:mat-progress-spinner-stroke-rotate-fallback 10s cubic-bezier(.87,.03,.33,1) infinite}.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate] circle{transition-property:stroke}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.60617px;transform:rotate(0)}12.5%{stroke-dashoffset:56.54867px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.60617px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.54867px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.60617px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.54867px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.60617px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.54867px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(341.5deg)}}@keyframes mat-progress-spinner-stroke-rotate-fallback{0%{transform:rotate(0)}25%{transform:rotate(1170deg)}50%{transform:rotate(2340deg)}75%{transform:rotate(3510deg)}100%{transform:rotate(4680deg)}}"],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatProgressSpinner.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: platform.Platform, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
MatProgressSpinner.propDecorators = {
"diameter": [{ type: core.Input },],
"strokeWidth": [{ type: core.Input },],
"mode": [{ type: core.Input },],
"value": [{ type: core.Input },],
};
return MatProgressSpinner;
}(_MatProgressSpinnerMixinBase));
/**
* `<mat-spinner>` component.
*
* This is a component definition to be used as a convenience reference to create an
* indeterminate `<mat-progress-spinner>` instance.
*/
var MatSpinner = (function (_super) {
__extends(MatSpinner, _super);
function MatSpinner(elementRef, platform$$1, document) {
var _this = _super.call(this, elementRef, platform$$1, document) || this;
_this.mode = 'indeterminate';
return _this;
}
MatSpinner.decorators = [
{ type: core.Component, args: [{ selector: 'mat-spinner',
host: {
'role': 'progressbar',
'mode': 'indeterminate',
'class': 'mat-spinner mat-progress-spinner',
'[style.width.px]': '_elementSize',
'[style.height.px]': '_elementSize',
},
inputs: ['color'],
template: "<svg [style.width.px]=\"_elementSize\" [style.height.px]=\"_elementSize\" [attr.viewBox]=\"_viewBox\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><circle cx=\"50%\" cy=\"50%\" [attr.r]=\"_circleRadius\" [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + diameter\" [style.stroke-dashoffset.px]=\"_strokeDashOffset\" [style.stroke-dasharray.px]=\"_strokeCircumference\" [style.stroke-width.%]=\"_circleStrokeWidth\"></circle></svg>",
styles: [".mat-progress-spinner{display:block;position:relative}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate]{animation:mat-progress-spinner-linear-rotate 2s linear infinite}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4s;animation-timing-function:cubic-bezier(.35,0,.25,1);animation-iteration-count:infinite}.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate]{animation:mat-progress-spinner-stroke-rotate-fallback 10s cubic-bezier(.87,.03,.33,1) infinite}.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate] circle{transition-property:stroke}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.60617px;transform:rotate(0)}12.5%{stroke-dashoffset:56.54867px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.60617px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.54867px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.60617px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.54867px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.60617px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.54867px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(341.5deg)}}@keyframes mat-progress-spinner-stroke-rotate-fallback{0%{transform:rotate(0)}25%{transform:rotate(1170deg)}50%{transform:rotate(2340deg)}75%{transform:rotate(3510deg)}100%{transform:rotate(4680deg)}}"],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatSpinner.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: platform.Platform, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
return MatSpinner;
}(MatProgressSpinner));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// Increasing integer for generating unique ids for radio components.
var nextUniqueId$5 = 0;
/**
* Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This
* allows it to support [(ngModel)] and ngControl.
* \@docs-private
*/
var MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatRadioGroup; }),
multi: true
};
/**
* Change event object emitted by MatRadio and MatRadioGroup.
*/
var MatRadioChange = (function () {
function MatRadioChange(source, value) {
this.source = source;
this.value = value;
}
return MatRadioChange;
}());
/**
* \@docs-private
*/
var MatRadioGroupBase = (function () {
function MatRadioGroupBase() {
}
return MatRadioGroupBase;
}());
var _MatRadioGroupMixinBase = mixinDisabled(MatRadioGroupBase);
/**
* A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
*/
var MatRadioGroup = (function (_super) {
__extends(MatRadioGroup, _super);
function MatRadioGroup(_changeDetector) {
var _this = _super.call(this) || this;
_this._changeDetector = _changeDetector;
/**
* Selected value for group. Should equal the value of the selected radio button if there *is*
* a corresponding radio button with a matching value. If there is *not* such a corresponding
* radio button, this value persists to be applied in case a new radio button is added with a
* matching value.
*/
_this._value = null;
/**
* The HTML name attribute applied to radio buttons in this group.
*/
_this._name = "mat-radio-group-" + nextUniqueId$5++;
/**
* The currently selected radio button. Should match value.
*/
_this._selected = null;
/**
* Whether the `value` has been set to its initial value.
*/
_this._isInitialized = false;
/**
* Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
*/
_this._labelPosition = 'after';
/**
* Whether the radio group is disabled.
*/
_this._disabled = false;
/**
* Whether the radio group is required.
*/
_this._required = false;
/**
* The method to be called in order to update ngModel
*/
_this._controlValueAccessorChangeFn = function () { };
/**
* onTouch function registered via registerOnTouch (ControlValueAccessor).
* \@docs-private
*/
_this.onTouched = function () { };
/**
* Event emitted when the group value changes.
* Change events are only emitted when the value changes due to user interaction with
* a radio button (the same behavior as `<input type-"radio">`).
*/
_this.change = new core.EventEmitter();
return _this;
}
Object.defineProperty(MatRadioGroup.prototype, "name", {
get: /**
* Name of the radio button group. All radio buttons inside this group will use this name.
* @return {?}
*/ function () { return this._name; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._name = value;
this._updateRadioButtonNames();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioGroup.prototype, "align", {
get: /**
* Alignment of the radio-buttons relative to their labels. Can be 'before' or 'after'.
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () {
// align refers to the checkbox relative to the label, while labelPosition refers to the
// label relative to the checkbox. As such, they are inverted.
return this.labelPosition == 'after' ? 'start' : 'end';
},
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this.labelPosition = (v == 'start') ? 'after' : 'before';
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioGroup.prototype, "labelPosition", {
get: /**
* Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
* @return {?}
*/ function () {
return this._labelPosition;
},
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this._labelPosition = (v == 'before') ? 'before' : 'after';
this._markRadiosForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioGroup.prototype, "value", {
get: /**
* Value of the radio button.
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} newValue
* @return {?}
*/ function (newValue) {
if (this._value != newValue) {
// Set this before proceeding to ensure no circular loop occurs with selection.
this._value = newValue;
this._updateSelectedRadioFromValue();
this._checkSelectedRadioButton();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatRadioGroup.prototype._checkSelectedRadioButton = /**
* @return {?}
*/
function () {
if (this._selected && !this._selected.checked) {
this._selected.checked = true;
}
};
Object.defineProperty(MatRadioGroup.prototype, "selected", {
get: /**
* Whether the radio button is selected.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} selected
* @return {?}
*/ function (selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
this._checkSelectedRadioButton();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioGroup.prototype, "disabled", {
get: /**
* Whether the radio group is disabled
* @return {?}
*/ function () { return this._disabled; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._disabled = coercion.coerceBooleanProperty(value);
this._markRadiosForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioGroup.prototype, "required", {
get: /**
* Whether the radio group is required
* @return {?}
*/ function () { return this._required; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._required = coercion.coerceBooleanProperty(value);
this._markRadiosForCheck();
},
enumerable: true,
configurable: true
});
/**
* Initialize properties once content children are available.
* This allows us to propagate relevant attributes to associated buttons.
*/
/**
* Initialize properties once content children are available.
* This allows us to propagate relevant attributes to associated buttons.
* @return {?}
*/
MatRadioGroup.prototype.ngAfterContentInit = /**
* Initialize properties once content children are available.
* This allows us to propagate relevant attributes to associated buttons.
* @return {?}
*/
function () {
// Mark this component as initialized in AfterContentInit because the initial value can
// possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the
// NgModel occurs *after* the OnInit of the MatRadioGroup.
this._isInitialized = true;
};
/**
* Mark this group as being "touched" (for ngModel). Meant to be called by the contained
* radio buttons upon their blur.
*/
/**
* Mark this group as being "touched" (for ngModel). Meant to be called by the contained
* radio buttons upon their blur.
* @return {?}
*/
MatRadioGroup.prototype._touch = /**
* Mark this group as being "touched" (for ngModel). Meant to be called by the contained
* radio buttons upon their blur.
* @return {?}
*/
function () {
if (this.onTouched) {
this.onTouched();
}
};
/**
* @return {?}
*/
MatRadioGroup.prototype._updateRadioButtonNames = /**
* @return {?}
*/
function () {
var _this = this;
if (this._radios) {
this._radios.forEach(function (radio) {
radio.name = _this.name;
});
}
};
/**
* Updates the `selected` radio button from the internal _value state.
* @return {?}
*/
MatRadioGroup.prototype._updateSelectedRadioFromValue = /**
* Updates the `selected` radio button from the internal _value state.
* @return {?}
*/
function () {
var _this = this;
// If the value already matches the selected radio, do nothing.
var /** @type {?} */ isAlreadySelected = this._selected != null && this._selected.value == this._value;
if (this._radios != null && !isAlreadySelected) {
this._selected = null;
this._radios.forEach(function (radio) {
radio.checked = _this.value == radio.value;
if (radio.checked) {
_this._selected = radio;
}
});
}
};
/** Dispatch change event with current selection and group value. */
/**
* Dispatch change event with current selection and group value.
* @return {?}
*/
MatRadioGroup.prototype._emitChangeEvent = /**
* Dispatch change event with current selection and group value.
* @return {?}
*/
function () {
if (this._isInitialized) {
this.change.emit(new MatRadioChange(/** @type {?} */ ((this._selected)), this._value));
}
};
/**
* @return {?}
*/
MatRadioGroup.prototype._markRadiosForCheck = /**
* @return {?}
*/
function () {
if (this._radios) {
this._radios.forEach(function (radio) { return radio._markForCheck(); });
}
};
/**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param value
*/
/**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
MatRadioGroup.prototype.writeValue = /**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this._changeDetector.markForCheck();
};
/**
* Registers a callback to be triggered when the model value changes.
* Implemented as part of ControlValueAccessor.
* @param fn Callback to be registered.
*/
/**
* Registers a callback to be triggered when the model value changes.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
MatRadioGroup.prototype.registerOnChange = /**
* Registers a callback to be triggered when the model value changes.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
function (fn) {
this._controlValueAccessorChangeFn = fn;
};
/**
* Registers a callback to be triggered when the control is touched.
* Implemented as part of ControlValueAccessor.
* @param fn Callback to be registered.
*/
/**
* Registers a callback to be triggered when the control is touched.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
MatRadioGroup.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control is touched.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
* @param isDisabled Whether the control should be disabled.
*/
/**
* Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
* @param {?} isDisabled Whether the control should be disabled.
* @return {?}
*/
MatRadioGroup.prototype.setDisabledState = /**
* Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
* @param {?} isDisabled Whether the control should be disabled.
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
this._changeDetector.markForCheck();
};
MatRadioGroup.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-radio-group',
exportAs: 'matRadioGroup',
providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
host: {
'role': 'radiogroup',
'class': 'mat-radio-group',
},
inputs: ['disabled'],
},] },
];
/** @nocollapse */
MatRadioGroup.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef, },
];
};
MatRadioGroup.propDecorators = {
"change": [{ type: core.Output },],
"_radios": [{ type: core.ContentChildren, args: [core.forwardRef(function () { return MatRadioButton; }), { descendants: true },] },],
"name": [{ type: core.Input },],
"align": [{ type: core.Input },],
"labelPosition": [{ type: core.Input },],
"value": [{ type: core.Input },],
"selected": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"required": [{ type: core.Input },],
};
return MatRadioGroup;
}(_MatRadioGroupMixinBase));
/**
* \@docs-private
*/
var MatRadioButtonBase = (function () {
function MatRadioButtonBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatRadioButtonBase;
}());
// As per Material design specifications the selection control radio should use the accent color
// palette by default. https://material.io/guidelines/components/selection-controls.html
var _MatRadioButtonMixinBase = mixinColor(mixinDisableRipple(mixinTabIndex(MatRadioButtonBase)), 'accent');
/**
* A Material design radio-button. Typically placed inside of `<mat-radio-group>` elements.
*/
var MatRadioButton = (function (_super) {
__extends(MatRadioButton, _super);
function MatRadioButton(radioGroup, elementRef, _changeDetector, _focusMonitor, _radioDispatcher) {
var _this = _super.call(this, elementRef) || this;
_this._changeDetector = _changeDetector;
_this._focusMonitor = _focusMonitor;
_this._radioDispatcher = _radioDispatcher;
_this._uniqueId = "mat-radio-" + ++nextUniqueId$5;
/**
* The unique ID for the radio button.
*/
_this.id = _this._uniqueId;
/**
* Event emitted when the checked state of this radio button changes.
* Change events are only emitted when the value changes due to user interaction with
* the radio button (the same behavior as `<input type-"radio">`).
*/
_this.change = new core.EventEmitter();
/**
* Whether this radio is checked.
*/
_this._checked = false;
/**
* Value assigned to this radio.
*/
_this._value = null;
/**
* Unregister function for _radioDispatcher
*/
_this._removeUniqueSelectionListener = function () { };
// Assertions. Ideally these should be stripped out by the compiler.
// TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
// Assertions. Ideally these should be stripped out by the compiler.
// TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
_this.radioGroup = radioGroup;
_this._removeUniqueSelectionListener =
_radioDispatcher.listen(function (id, name) {
if (id != _this.id && name == _this.name) {
_this.checked = false;
}
});
return _this;
}
Object.defineProperty(MatRadioButton.prototype, "checked", {
get: /**
* Whether this radio button is checked.
* @return {?}
*/ function () { return this._checked; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ newCheckedState = coercion.coerceBooleanProperty(value);
if (this._checked != newCheckedState) {
this._checked = newCheckedState;
if (newCheckedState && this.radioGroup && this.radioGroup.value != this.value) {
this.radioGroup.selected = this;
}
else if (!newCheckedState && this.radioGroup && this.radioGroup.value == this.value) {
// When unchecking the selected radio button, update the selected radio
// property on the group.
this.radioGroup.selected = null;
}
if (newCheckedState) {
// Notify all radio buttons with the same name to un-check.
this._radioDispatcher.notify(this.id, this.name);
}
this._changeDetector.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioButton.prototype, "value", {
get: /**
* The value of this radio button.
* @return {?}
*/ function () { return this._value; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (this._value != value) {
this._value = value;
if (this.radioGroup != null) {
if (!this.checked) {
// Update checked when the value changed to match the radio group's value
this.checked = this.radioGroup.value == value;
}
if (this.checked) {
this.radioGroup.selected = this;
}
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioButton.prototype, "align", {
get: /**
* Whether or not the radio-button should appear before or after the label.
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () {
// align refers to the checkbox relative to the label, while labelPosition refers to the
// label relative to the checkbox. As such, they are inverted.
return this.labelPosition == 'after' ? 'start' : 'end';
},
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this.labelPosition = (v == 'start') ? 'after' : 'before';
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioButton.prototype, "labelPosition", {
get: /**
* Whether the label should appear after or before the radio button. Defaults to 'after'
* @return {?}
*/ function () {
return this._labelPosition || (this.radioGroup && this.radioGroup.labelPosition) || 'after';
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._labelPosition = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioButton.prototype, "disabled", {
get: /**
* Whether the radio button is disabled.
* @return {?}
*/ function () {
return this._disabled || (this.radioGroup != null && this.radioGroup.disabled);
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._disabled = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioButton.prototype, "required", {
get: /**
* Whether the radio button is required.
* @return {?}
*/ function () {
return this._required || (this.radioGroup && this.radioGroup.required);
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._required = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatRadioButton.prototype, "inputId", {
/** ID of the native input element inside `<mat-radio-button>` */
get: /**
* ID of the native input element inside `<mat-radio-button>`
* @return {?}
*/ function () { return (this.id || this._uniqueId) + "-input"; },
enumerable: true,
configurable: true
});
/** Focuses the radio button. */
/**
* Focuses the radio button.
* @return {?}
*/
MatRadioButton.prototype.focus = /**
* Focuses the radio button.
* @return {?}
*/
function () {
this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
};
/**
* Marks the radio button as needing checking for change detection.
* This method is exposed because the parent radio group will directly
* update bound properties of the radio button.
*/
/**
* Marks the radio button as needing checking for change detection.
* This method is exposed because the parent radio group will directly
* update bound properties of the radio button.
* @return {?}
*/
MatRadioButton.prototype._markForCheck = /**
* Marks the radio button as needing checking for change detection.
* This method is exposed because the parent radio group will directly
* update bound properties of the radio button.
* @return {?}
*/
function () {
// When group value changes, the button will not be notified. Use `markForCheck` to explicit
// update radio button's status
this._changeDetector.markForCheck();
};
/**
* @return {?}
*/
MatRadioButton.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.radioGroup) {
// If the radio is inside a radio group, determine if it should be checked
this.checked = this.radioGroup.value === this._value;
// Copy name from parent radio group
this.name = this.radioGroup.name;
}
};
/**
* @return {?}
*/
MatRadioButton.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this._focusMonitor
.monitor(this._inputElement.nativeElement)
.subscribe(function (focusOrigin) { return _this._onInputFocusChange(focusOrigin); });
};
/**
* @return {?}
*/
MatRadioButton.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._focusMonitor.stopMonitoring(this._inputElement.nativeElement);
this._removeUniqueSelectionListener();
};
/**
* Dispatch change event with current value.
* @return {?}
*/
MatRadioButton.prototype._emitChangeEvent = /**
* Dispatch change event with current value.
* @return {?}
*/
function () {
this.change.emit(new MatRadioChange(this, this._value));
};
/**
* @return {?}
*/
MatRadioButton.prototype._isRippleDisabled = /**
* @return {?}
*/
function () {
return this.disableRipple || this.disabled;
};
/**
* @param {?} event
* @return {?}
*/
MatRadioButton.prototype._onInputClick = /**
* @param {?} event
* @return {?}
*/
function (event) {
// We have to stop propagation for click events on the visual hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `radio-button` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
};
/**
* Triggered when the radio button received a click or the input recognized any change.
* Clicking on a label element, will trigger a change event on the associated input.
*/
/**
* Triggered when the radio button received a click or the input recognized any change.
* Clicking on a label element, will trigger a change event on the associated input.
* @param {?} event
* @return {?}
*/
MatRadioButton.prototype._onInputChange = /**
* Triggered when the radio button received a click or the input recognized any change.
* Clicking on a label element, will trigger a change event on the associated input.
* @param {?} event
* @return {?}
*/
function (event) {
// We always have to stop propagation on the change event.
// Otherwise the change event, from the input element, will bubble up and
// emit its event object to the `change` output.
event.stopPropagation();
var /** @type {?} */ groupValueChanged = this.radioGroup && this.value != this.radioGroup.value;
this.checked = true;
this._emitChangeEvent();
if (this.radioGroup) {
this.radioGroup._controlValueAccessorChangeFn(this.value);
this.radioGroup._touch();
if (groupValueChanged) {
this.radioGroup._emitChangeEvent();
}
}
};
/**
* Function is called whenever the focus changes for the input element.
* @param {?} focusOrigin
* @return {?}
*/
MatRadioButton.prototype._onInputFocusChange = /**
* Function is called whenever the focus changes for the input element.
* @param {?} focusOrigin
* @return {?}
*/
function (focusOrigin) {
if (!this._focusRipple && focusOrigin === 'keyboard') {
this._focusRipple = this._ripple.launch(0, 0, { persistent: true });
}
else if (!focusOrigin) {
if (this.radioGroup) {
this.radioGroup._touch();
}
if (this._focusRipple) {
this._focusRipple.fadeOut();
this._focusRipple = null;
}
}
};
MatRadioButton.decorators = [
{ type: core.Component, args: [{ selector: 'mat-radio-button',
template: "<label [attr.for]=\"inputId\" class=\"mat-radio-label\" #label><div class=\"mat-radio-container\"><div class=\"mat-radio-outer-circle\"></div><div class=\"mat-radio-inner-circle\"></div><div mat-ripple class=\"mat-radio-ripple\" [matRippleTrigger]=\"label\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleCentered]=\"true\" [matRippleRadius]=\"23\" [matRippleAnimation]=\"{enterDuration: 150}\"></div></div><input #input class=\"mat-radio-input cdk-visually-hidden\" type=\"radio\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [required]=\"required\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaDescribedby\" (change)=\"_onInputChange($event)\" (click)=\"_onInputClick($event)\"><div class=\"mat-radio-label-content\" [class.mat-radio-label-before]=\"labelPosition == 'before'\"><span style=\"display:none\"> </span><ng-content></ng-content></div></label>",
styles: [".mat-radio-button{display:inline-block}.mat-radio-label{cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;vertical-align:middle}.mat-radio-container{box-sizing:border-box;display:inline-block;position:relative;width:20px;height:20px;flex-shrink:0}.mat-radio-outer-circle{box-sizing:border-box;height:20px;left:0;position:absolute;top:0;transition:border-color ease 280ms;width:20px;border-width:2px;border-style:solid;border-radius:50%}.mat-radio-inner-circle{border-radius:50%;box-sizing:border-box;height:20px;left:0;position:absolute;top:0;transition:transform ease 280ms,background-color ease 280ms;width:20px;transform:scale(.001)}.mat-radio-checked .mat-radio-inner-circle{transform:scale(.5)}.mat-radio-label-content{display:inline-block;order:0;line-height:inherit;padding-left:8px;padding-right:0}[dir=rtl] .mat-radio-label-content{padding-right:8px;padding-left:0}.mat-radio-label-content.mat-radio-label-before{order:-1;padding-left:0;padding-right:8px}[dir=rtl] .mat-radio-label-content.mat-radio-label-before{padding-right:0;padding-left:8px}.mat-radio-disabled,.mat-radio-disabled .mat-radio-label{cursor:default}.mat-radio-ripple{position:absolute;left:calc(50% - 25px);top:calc(50% - 25px);height:50px;width:50px;z-index:1;pointer-events:none}"],
inputs: ['color', 'disableRipple', 'tabIndex'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
exportAs: 'matRadioButton',
host: {
'class': 'mat-radio-button',
'[class.mat-radio-checked]': 'checked',
'[class.mat-radio-disabled]': 'disabled',
'[attr.id]': 'id',
// Note: under normal conditions focus shouldn't land on this element, however it may be
// programmatically set, for example inside of a focus trap, in this case we want to forward
// the focus to the native element.
'(focus)': '_inputElement.nativeElement.focus()',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatRadioButton.ctorParameters = function () {
return [
{ type: MatRadioGroup, decorators: [{ type: core.Optional },] },
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: a11y.FocusMonitor, },
{ type: collections.UniqueSelectionDispatcher, },
];
};
MatRadioButton.propDecorators = {
"id": [{ type: core.Input },],
"name": [{ type: core.Input },],
"ariaLabel": [{ type: core.Input, args: ['aria-label',] },],
"ariaLabelledby": [{ type: core.Input, args: ['aria-labelledby',] },],
"ariaDescribedby": [{ type: core.Input, args: ['aria-describedby',] },],
"checked": [{ type: core.Input },],
"value": [{ type: core.Input },],
"align": [{ type: core.Input },],
"labelPosition": [{ type: core.Input },],
"disabled": [{ type: core.Input },],
"required": [{ type: core.Input },],
"change": [{ type: core.Output },],
"_ripple": [{ type: core.ViewChild, args: [MatRipple,] },],
"_inputElement": [{ type: core.ViewChild, args: ['input',] },],
};
return MatRadioButton;
}(_MatRadioButtonMixinBase));
var __extends$34 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* Emits a value from the source Observable only after a particular time span
* has passed without another source emission.
*
* <span class="informal">It's like {@link delay}, but passes only the most
* recent value from each burst of emissions.</span>
*
* <img src="./img/debounceTime.png" width="100%">
*
* `debounceTime` delays values emitted by the source Observable, but drops
* previous pending delayed emissions if a new value arrives on the source
* Observable. This operator keeps track of the most recent value from the
* source Observable, and emits that only when `dueTime` enough time has passed
* without any other value appearing on the source Observable. If a new value
* appears before `dueTime` silence occurs, the previous value will be dropped
* and will not be emitted on the output Observable.
*
* This is a rate-limiting operator, because it is impossible for more than one
* value to be emitted in any time window of duration `dueTime`, but it is also
* a delay-like operator since output emissions do not occur at the same time as
* they did on the source Observable. Optionally takes a {@link IScheduler} for
* managing timers.
*
* @example <caption>Emit the most recent click after a burst of clicks</caption>
* var clicks = Rx.Observable.fromEvent(document, 'click');
* var result = clicks.debounceTime(1000);
* result.subscribe(x => console.log(x));
*
* @see {@link auditTime}
* @see {@link debounce}
* @see {@link delay}
* @see {@link sampleTime}
* @see {@link throttleTime}
*
* @param {number} dueTime The timeout duration in milliseconds (or the time
* unit determined internally by the optional `scheduler`) for the window of
* time required to wait for emission silence before emitting the most recent
* source value.
* @param {Scheduler} [scheduler=async] The {@link IScheduler} to use for
* managing the timers that handle the timeout for each value.
* @return {Observable} An Observable that delays the emissions of the source
* Observable by the specified `dueTime`, and may drop some values if they occur
* too frequently.
* @method debounceTime
* @owner Observable
*/
function debounceTime(dueTime, scheduler) {
if (scheduler === void 0) {
scheduler = async.async;
}
return function (source) { return source.lift(new DebounceTimeOperator(dueTime, scheduler)); };
}
var debounceTime_2 = debounceTime;
var DebounceTimeOperator = (function () {
function DebounceTimeOperator(dueTime, scheduler) {
this.dueTime = dueTime;
this.scheduler = scheduler;
}
DebounceTimeOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new DebounceTimeSubscriber(subscriber, this.dueTime, this.scheduler));
};
return DebounceTimeOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var DebounceTimeSubscriber = (function (_super) {
__extends$34(DebounceTimeSubscriber, _super);
function DebounceTimeSubscriber(destination, dueTime, scheduler) {
_super.call(this, destination);
this.dueTime = dueTime;
this.scheduler = scheduler;
this.debouncedSubscription = null;
this.lastValue = null;
this.hasValue = false;
}
DebounceTimeSubscriber.prototype._next = function (value) {
this.clearDebounce();
this.lastValue = value;
this.hasValue = true;
this.add(this.debouncedSubscription = this.scheduler.schedule(dispatchNext$1, this.dueTime, this));
};
DebounceTimeSubscriber.prototype._complete = function () {
this.debouncedNext();
this.destination.complete();
};
DebounceTimeSubscriber.prototype.debouncedNext = function () {
this.clearDebounce();
if (this.hasValue) {
this.destination.next(this.lastValue);
this.lastValue = null;
this.hasValue = false;
}
};
DebounceTimeSubscriber.prototype.clearDebounce = function () {
var debouncedSubscription = this.debouncedSubscription;
if (debouncedSubscription !== null) {
this.remove(debouncedSubscription);
debouncedSubscription.unsubscribe();
this.debouncedSubscription = null;
}
};
return DebounceTimeSubscriber;
}(Subscriber_1.Subscriber));
function dispatchNext$1(subscriber) {
subscriber.debouncedNext();
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Animations used by the Material drawers.
*/
var matDrawerAnimations = {
/** Animation that slides a drawer in and out. */
transformDrawer: animations.trigger('transform', [
animations.state('open, open-instant', animations.style({
transform: 'translate3d(0, 0, 0)',
visibility: 'visible',
})),
animations.state('void', animations.style({
visibility: 'hidden',
})),
animations.transition('void => open-instant', animations.animate('0ms')),
animations.transition('void <=> open, open-instant => void', animations.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Throws an exception when two MatDrawer are matching the same position.
* @param {?} position
* @return {?}
*/
function throwMatDuplicatedDrawerError(position) {
throw Error("A drawer was already declared for 'position=\"" + position + "\"'");
}
/**
* Drawer toggle promise result.
* @deprecated
* \@deletion-target 6.0.0
*/
var MatDrawerToggleResult = (function () {
function MatDrawerToggleResult(type, animationFinished) {
this.type = type;
this.animationFinished = animationFinished;
}
return MatDrawerToggleResult;
}());
/**
* Configures whether drawers should use auto sizing by default.
*/
var MAT_DRAWER_DEFAULT_AUTOSIZE = new core.InjectionToken('MAT_DRAWER_DEFAULT_AUTOSIZE');
var MatDrawerContent = (function () {
function MatDrawerContent(_changeDetectorRef, _container) {
this._changeDetectorRef = _changeDetectorRef;
this._container = _container;
/**
* Margins to be applied to the content. These are used to push / shrink the drawer content when a
* drawer is open. We use margin rather than transform even for push mode because transform breaks
* fixed position elements inside of the transformed element.
*/
this._margins = { left: null, right: null };
}
/**
* @return {?}
*/
MatDrawerContent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._container._contentMargins.subscribe(function (margins) {
_this._margins = margins;
_this._changeDetectorRef.markForCheck();
});
};
MatDrawerContent.decorators = [
{ type: core.Component, args: [{ selector: 'mat-drawer-content',
template: '<ng-content></ng-content>',
host: {
'class': 'mat-drawer-content',
'[style.margin-left.px]': '_margins.left',
'[style.margin-right.px]': '_margins.right',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatDrawerContent.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef, },
{ type: MatDrawerContainer, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatDrawerContainer; }),] },] },
];
};
return MatDrawerContent;
}());
/**
* This component corresponds to a drawer that can be opened on the drawer container.
*/
var MatDrawer = (function () {
function MatDrawer(_elementRef, _focusTrapFactory, _focusMonitor, _platform, _doc) {
var _this = this;
this._elementRef = _elementRef;
this._focusTrapFactory = _focusTrapFactory;
this._focusMonitor = _focusMonitor;
this._platform = _platform;
this._doc = _doc;
this._elementFocusedBeforeDrawerWasOpened = null;
/**
* Whether the drawer is initialized. Used for disabling the initial animation.
*/
this._enableAnimations = false;
this._position = 'start';
this._mode = 'over';
this._disableClose = false;
/**
* Emits whenever the drawer has started animating.
*/
this._animationStarted = new core.EventEmitter();
/**
* Current state of the sidenav animation.
*/
this._animationState = 'void';
/**
* Event emitted when the drawer open state is changed.
*/
this.openedChange =
// Note this has to be async in order to avoid some issues with two-bindings (see #8872).
new core.EventEmitter(/* isAsync */ /* isAsync */ true);
/**
* Event emitted when the drawer is fully opened.
* @deprecated Use `opened` instead.
* \@deletion-target 6.0.0
*/
this.onOpen = this._openedStream;
/**
* Event emitted when the drawer is fully closed.
* @deprecated Use `closed` instead.
* \@deletion-target 6.0.0
*/
this.onClose = this._closedStream;
/**
* Event emitted when the drawer's position changes.
*/
this.onPositionChanged = new core.EventEmitter();
/**
* @deprecated
* \@deletion-target 6.0.0
*/
this.onAlignChanged = new core.EventEmitter();
/**
* An observable that emits when the drawer mode changes. This is used by the drawer container to
* to know when to when the mode changes so it can adapt the margins on the content.
*/
this._modeChanged = new Subject.Subject();
this._opened = false;
this.openedChange.subscribe(function (opened) {
if (opened) {
if (_this._doc) {
_this._elementFocusedBeforeDrawerWasOpened = /** @type {?} */ (_this._doc.activeElement);
}
if (_this._isFocusTrapEnabled && _this._focusTrap) {
_this._trapFocus();
}
}
else {
_this._restoreFocus();
}
});
}
Object.defineProperty(MatDrawer.prototype, "position", {
get: /**
* The side that the drawer is attached to.
* @return {?}
*/ function () { return this._position; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
// Make sure we have a valid value.
value = value === 'end' ? 'end' : 'start';
if (value != this._position) {
this._position = value;
this.onAlignChanged.emit();
this.onPositionChanged.emit();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "align", {
get: /**
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this.position; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this.position = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "mode", {
get: /**
* Mode of the drawer; one of 'over', 'push' or 'side'.
* @return {?}
*/ function () { return this._mode; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._mode = value;
this._modeChanged.next();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "disableClose", {
get: /**
* Whether the drawer can be closed with the escape key or by clicking on the backdrop.
* @return {?}
*/ function () { return this._disableClose; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._disableClose = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "_openedStream", {
get: /**
* Event emitted when the drawer has been opened.
* @return {?}
*/ function () {
return this.openedChange.pipe(filter_2(function (o) { return o; }), map_2(function () { }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "openedStart", {
get: /**
* Event emitted when the drawer has started opening.
* @return {?}
*/ function () {
return this._animationStarted.pipe(filter_2(function (e) { return e.fromState !== e.toState && e.toState.indexOf('open') === 0; }), map_2(function () { }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "_closedStream", {
get: /**
* Event emitted when the drawer has been closed.
* @return {?}
*/ function () {
return this.openedChange.pipe(filter_2(function (o) { return !o; }), map_2(function () { }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "closedStart", {
get: /**
* Event emitted when the drawer has started closing.
* @return {?}
*/ function () {
return this._animationStarted.pipe(filter_2(function (e) { return e.fromState !== e.toState && e.toState === 'void'; }), map_2(function () { }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawer.prototype, "_isFocusTrapEnabled", {
get: /**
* @return {?}
*/ function () {
// The focus trap is only enabled when the drawer is open in any mode other than side.
return this.opened && this.mode !== 'side';
},
enumerable: true,
configurable: true
});
/**
* Traps focus inside the drawer.
* @return {?}
*/
MatDrawer.prototype._trapFocus = /**
* Traps focus inside the drawer.
* @return {?}
*/
function () {
var _this = this;
this._focusTrap.focusInitialElementWhenReady().then(function (hasMovedFocus) {
// If there were no focusable elements, focus the sidenav itself so the keyboard navigation
// still works. We need to check that `focus` is a function due to Universal.
if (!hasMovedFocus && typeof _this._elementRef.nativeElement.focus === 'function') {
_this._elementRef.nativeElement.focus();
}
});
};
/**
* If focus is currently inside the drawer, restores it to where it was before the drawer
* opened.
* @return {?}
*/
MatDrawer.prototype._restoreFocus = /**
* If focus is currently inside the drawer, restores it to where it was before the drawer
* opened.
* @return {?}
*/
function () {
var /** @type {?} */ activeEl = this._doc && this._doc.activeElement;
if (activeEl && this._elementRef.nativeElement.contains(activeEl)) {
if (this._elementFocusedBeforeDrawerWasOpened instanceof HTMLElement) {
this._focusMonitor.focusVia(this._elementFocusedBeforeDrawerWasOpened, this._openedVia);
}
else {
this._elementRef.nativeElement.blur();
}
}
this._elementFocusedBeforeDrawerWasOpened = null;
this._openedVia = null;
};
/**
* @return {?}
*/
MatDrawer.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
this._focusTrap.enabled = this._isFocusTrapEnabled;
};
/**
* @return {?}
*/
MatDrawer.prototype.ngAfterContentChecked = /**
* @return {?}
*/
function () {
// Enable the animations after the lifecycle hooks have run, in order to avoid animating
// drawers that are open by default. When we're on the server, we shouldn't enable the
// animations, because we don't want the drawer to animate the first time the user sees
// the page.
if (this._platform.isBrowser) {
this._enableAnimations = true;
}
};
/**
* @return {?}
*/
MatDrawer.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._focusTrap) {
this._focusTrap.destroy();
}
};
Object.defineProperty(MatDrawer.prototype, "opened", {
get: /**
* Whether the drawer is opened. We overload this because we trigger an event when it
* starts or end.
* @return {?}
*/ function () { return this._opened; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this.toggle(coercion.coerceBooleanProperty(value)); },
enumerable: true,
configurable: true
});
/**
* Open the drawer.
* @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
* Used for focus management after the sidenav is closed.
*/
/**
* Open the drawer.
* @param {?=} openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
* Used for focus management after the sidenav is closed.
* @return {?}
*/
MatDrawer.prototype.open = /**
* Open the drawer.
* @param {?=} openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
* Used for focus management after the sidenav is closed.
* @return {?}
*/
function (openedVia) {
return this.toggle(true, openedVia);
};
/** Close the drawer. */
/**
* Close the drawer.
* @return {?}
*/
MatDrawer.prototype.close = /**
* Close the drawer.
* @return {?}
*/
function () {
return this.toggle(false);
};
/**
* Toggle this drawer.
* @param isOpen Whether the drawer should be open.
* @param openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
* Used for focus management after the sidenav is closed.
*/
/**
* Toggle this drawer.
* @param {?=} isOpen Whether the drawer should be open.
* @param {?=} openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
* Used for focus management after the sidenav is closed.
* @return {?}
*/
MatDrawer.prototype.toggle = /**
* Toggle this drawer.
* @param {?=} isOpen Whether the drawer should be open.
* @param {?=} openedVia Whether the drawer was opened by a key press, mouse click or programmatically.
* Used for focus management after the sidenav is closed.
* @return {?}
*/
function (isOpen, openedVia) {
var _this = this;
if (isOpen === void 0) {
isOpen = !this.opened;
}
if (openedVia === void 0) {
openedVia = 'program';
}
this._opened = isOpen;
if (isOpen) {
this._animationState = this._enableAnimations ? 'open' : 'open-instant';
this._openedVia = openedVia;
}
else {
this._animationState = 'void';
this._restoreFocus();
}
if (this._focusTrap) {
this._focusTrap.enabled = this._isFocusTrapEnabled;
}
// TODO(crisbeto): This promise is here for backwards-compatibility.
// It should be removed next time we do breaking changes in the drawer.
// @deletion-target 6.0.0
return new Promise(function (resolve) {
_this.openedChange.pipe(take_2(1)).subscribe(function (open) {
resolve(new MatDrawerToggleResult(open ? 'open' : 'close', true));
});
});
};
/**
* Handles the keyboard events.
* @docs-private
*/
/**
* Handles the keyboard events.
* \@docs-private
* @param {?} event
* @return {?}
*/
MatDrawer.prototype.handleKeydown = /**
* Handles the keyboard events.
* \@docs-private
* @param {?} event
* @return {?}
*/
function (event) {
if (event.keyCode === keycodes.ESCAPE && !this.disableClose) {
this.close();
event.stopPropagation();
}
};
/**
* @param {?} event
* @return {?}
*/
MatDrawer.prototype._onAnimationStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
this._animationStarted.emit(event);
};
/**
* @param {?} event
* @return {?}
*/
MatDrawer.prototype._onAnimationEnd = /**
* @param {?} event
* @return {?}
*/
function (event) {
var fromState = event.fromState, toState = event.toState;
if ((toState.indexOf('open') === 0 && fromState === 'void') ||
(toState === 'void' && fromState.indexOf('open') === 0)) {
this.openedChange.emit(this._opened);
}
};
Object.defineProperty(MatDrawer.prototype, "_width", {
get: /**
* @return {?}
*/ function () {
return this._elementRef.nativeElement ? (this._elementRef.nativeElement.offsetWidth || 0) : 0;
},
enumerable: true,
configurable: true
});
MatDrawer.decorators = [
{ type: core.Component, args: [{ selector: 'mat-drawer',
exportAs: 'matDrawer',
template: '<ng-content></ng-content>',
animations: [matDrawerAnimations.transformDrawer],
host: {
'class': 'mat-drawer',
'[@transform]': '_animationState',
'(@transform.start)': '_onAnimationStart($event)',
'(@transform.done)': '_onAnimationEnd($event)',
'(keydown)': 'handleKeydown($event)',
// must prevent the browser from aligning text based on value
'[attr.align]': 'null',
'[class.mat-drawer-end]': 'position === "end"',
'[class.mat-drawer-over]': 'mode === "over"',
'[class.mat-drawer-push]': 'mode === "push"',
'[class.mat-drawer-side]': 'mode === "side"',
'tabIndex': '-1',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatDrawer.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: a11y.FocusTrapFactory, },
{ type: a11y.FocusMonitor, },
{ type: platform.Platform, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
MatDrawer.propDecorators = {
"position": [{ type: core.Input },],
"align": [{ type: core.Input },],
"mode": [{ type: core.Input },],
"disableClose": [{ type: core.Input },],
"openedChange": [{ type: core.Output },],
"_openedStream": [{ type: core.Output, args: ['opened',] },],
"openedStart": [{ type: core.Output },],
"_closedStream": [{ type: core.Output, args: ['closed',] },],
"closedStart": [{ type: core.Output },],
"onOpen": [{ type: core.Output, args: ['open',] },],
"onClose": [{ type: core.Output, args: ['close',] },],
"onPositionChanged": [{ type: core.Output, args: ['positionChanged',] },],
"onAlignChanged": [{ type: core.Output, args: ['align-changed',] },],
"opened": [{ type: core.Input },],
};
return MatDrawer;
}());
/**
* `<mat-drawer-container>` component.
*
* This is the parent component to one or two `<mat-drawer>`s that validates the state internally
* and coordinates the backdrop and content styling.
*/
var MatDrawerContainer = (function () {
function MatDrawerContainer(_dir, _element, _ngZone, _changeDetectorRef, defaultAutosize) {
if (defaultAutosize === void 0) {
defaultAutosize = false;
}
var _this = this;
this._dir = _dir;
this._element = _element;
this._ngZone = _ngZone;
this._changeDetectorRef = _changeDetectorRef;
/**
* Event emitted when the drawer backdrop is clicked.
*/
this.backdropClick = new core.EventEmitter();
/**
* Emits when the component is destroyed.
*/
this._destroyed = new Subject.Subject();
/**
* Emits on every ngDoCheck. Used for debouncing reflows.
*/
this._doCheckSubject = new Subject.Subject();
this._contentMargins = new Subject.Subject();
// If a `Dir` directive exists up the tree, listen direction changes
// and update the left/right properties to point to the proper start/end.
if (_dir) {
_dir.change.pipe(takeUntil_2(this._destroyed)).subscribe(function () {
_this._validateDrawers();
_this._updateContentMargins();
});
}
this._autosize = defaultAutosize;
}
Object.defineProperty(MatDrawerContainer.prototype, "start", {
/** The drawer child with the `start` position. */
get: /**
* The drawer child with the `start` position.
* @return {?}
*/ function () { return this._start; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawerContainer.prototype, "end", {
/** The drawer child with the `end` position. */
get: /**
* The drawer child with the `end` position.
* @return {?}
*/ function () { return this._end; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatDrawerContainer.prototype, "autosize", {
get: /**
* Whether to automatically resize the container whenever
* the size of any of its drawers changes.
*
* **Use at your own risk!** Enabling this option can cause layout thrashing by measuring
* the drawers on every change detection cycle. Can be configured globally via the
* `MAT_DRAWER_DEFAULT_AUTOSIZE` token.
* @return {?}
*/ function () { return this._autosize; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._autosize = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatDrawerContainer.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._drawers.changes.pipe(startWith_2(null)).subscribe(function () {
_this._validateDrawers();
_this._drawers.forEach(function (drawer) {
_this._watchDrawerToggle(drawer);
_this._watchDrawerPosition(drawer);
_this._watchDrawerMode(drawer);
});
if (!_this._drawers.length ||
_this._isDrawerOpen(_this._start) ||
_this._isDrawerOpen(_this._end)) {
_this._updateContentMargins();
}
_this._changeDetectorRef.markForCheck();
});
this._doCheckSubject.pipe(debounceTime_2(10), // Arbitrary debounce time, less than a frame at 60fps
// Arbitrary debounce time, less than a frame at 60fps
takeUntil_2(this._destroyed)).subscribe(function () { return _this._updateContentMargins(); });
};
/**
* @return {?}
*/
MatDrawerContainer.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._doCheckSubject.complete();
this._destroyed.next();
this._destroyed.complete();
};
/** Calls `open` of both start and end drawers */
/**
* Calls `open` of both start and end drawers
* @return {?}
*/
MatDrawerContainer.prototype.open = /**
* Calls `open` of both start and end drawers
* @return {?}
*/
function () {
this._drawers.forEach(function (drawer) { return drawer.open(); });
};
/** Calls `close` of both start and end drawers */
/**
* Calls `close` of both start and end drawers
* @return {?}
*/
MatDrawerContainer.prototype.close = /**
* Calls `close` of both start and end drawers
* @return {?}
*/
function () {
this._drawers.forEach(function (drawer) { return drawer.close(); });
};
/**
* @return {?}
*/
MatDrawerContainer.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
var _this = this;
// If users opted into autosizing, do a check every change detection cycle.
if (this._autosize && this._isPushed()) {
// Run outside the NgZone, otherwise the debouncer will throw us into an infinite loop.
this._ngZone.runOutsideAngular(function () { return _this._doCheckSubject.next(); });
}
};
/**
* Subscribes to drawer events in order to set a class on the main container element when the
* drawer is open and the backdrop is visible. This ensures any overflow on the container element
* is properly hidden.
* @param {?} drawer
* @return {?}
*/
MatDrawerContainer.prototype._watchDrawerToggle = /**
* Subscribes to drawer events in order to set a class on the main container element when the
* drawer is open and the backdrop is visible. This ensures any overflow on the container element
* is properly hidden.
* @param {?} drawer
* @return {?}
*/
function (drawer) {
var _this = this;
drawer._animationStarted.pipe(takeUntil_2(this._drawers.changes), filter_2(function (event) { return event.fromState !== event.toState; }))
.subscribe(function (event) {
// Set the transition class on the container so that the animations occur. This should not
// be set initially because animations should only be triggered via a change in state.
if (event.toState !== 'open-instant') {
_this._element.nativeElement.classList.add('mat-drawer-transition');
}
_this._updateContentMargins();
_this._changeDetectorRef.markForCheck();
});
if (drawer.mode !== 'side') {
drawer.openedChange.pipe(takeUntil_2(this._drawers.changes)).subscribe(function () {
return _this._setContainerClass(drawer.opened);
});
}
};
/**
* Subscribes to drawer onPositionChanged event in order to
* re-validate drawers when the position changes.
* @param {?} drawer
* @return {?}
*/
MatDrawerContainer.prototype._watchDrawerPosition = /**
* Subscribes to drawer onPositionChanged event in order to
* re-validate drawers when the position changes.
* @param {?} drawer
* @return {?}
*/
function (drawer) {
var _this = this;
if (!drawer) {
return;
}
// NOTE: We need to wait for the microtask queue to be empty before validating,
// since both drawers may be swapping positions at the same time.
drawer.onPositionChanged.pipe(takeUntil_2(this._drawers.changes)).subscribe(function () {
_this._ngZone.onMicrotaskEmpty.asObservable().pipe(take_2(1)).subscribe(function () {
_this._validateDrawers();
});
});
};
/**
* Subscribes to changes in drawer mode so we can run change detection.
* @param {?} drawer
* @return {?}
*/
MatDrawerContainer.prototype._watchDrawerMode = /**
* Subscribes to changes in drawer mode so we can run change detection.
* @param {?} drawer
* @return {?}
*/
function (drawer) {
var _this = this;
if (drawer) {
drawer._modeChanged.pipe(takeUntil_2(merge.merge(this._drawers.changes, this._destroyed)))
.subscribe(function () {
_this._updateContentMargins();
_this._changeDetectorRef.markForCheck();
});
}
};
/**
* Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element.
* @param {?} isAdd
* @return {?}
*/
MatDrawerContainer.prototype._setContainerClass = /**
* Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element.
* @param {?} isAdd
* @return {?}
*/
function (isAdd) {
if (isAdd) {
this._element.nativeElement.classList.add('mat-drawer-opened');
}
else {
this._element.nativeElement.classList.remove('mat-drawer-opened');
}
};
/**
* Validate the state of the drawer children components.
* @return {?}
*/
MatDrawerContainer.prototype._validateDrawers = /**
* Validate the state of the drawer children components.
* @return {?}
*/
function () {
var _this = this;
this._start = this._end = null;
// Ensure that we have at most one start and one end drawer.
this._drawers.forEach(function (drawer) {
if (drawer.position == 'end') {
if (_this._end != null) {
throwMatDuplicatedDrawerError('end');
}
_this._end = drawer;
}
else {
if (_this._start != null) {
throwMatDuplicatedDrawerError('start');
}
_this._start = drawer;
}
});
this._right = this._left = null;
// Detect if we're LTR or RTL.
if (!this._dir || this._dir.value == 'ltr') {
this._left = this._start;
this._right = this._end;
}
else {
this._left = this._end;
this._right = this._start;
}
};
/**
* Whether the container is being pushed to the side by one of the drawers.
* @return {?}
*/
MatDrawerContainer.prototype._isPushed = /**
* Whether the container is being pushed to the side by one of the drawers.
* @return {?}
*/
function () {
return (this._isDrawerOpen(this._start) && /** @type {?} */ ((this._start)).mode != 'over') ||
(this._isDrawerOpen(this._end) && /** @type {?} */ ((this._end)).mode != 'over');
};
/**
* @return {?}
*/
MatDrawerContainer.prototype._onBackdropClicked = /**
* @return {?}
*/
function () {
this.backdropClick.emit();
this._closeModalDrawer();
};
/**
* @return {?}
*/
MatDrawerContainer.prototype._closeModalDrawer = /**
* @return {?}
*/
function () {
// Close all open drawers where closing is not disabled and the mode is not `side`.
[this._start, this._end]
.filter(function (drawer) { return drawer && !drawer.disableClose && drawer.mode !== 'side'; })
.forEach(function (drawer) { return ((drawer)).close(); });
};
/**
* @return {?}
*/
MatDrawerContainer.prototype._isShowingBackdrop = /**
* @return {?}
*/
function () {
return (this._isDrawerOpen(this._start) && /** @type {?} */ ((this._start)).mode != 'side')
|| (this._isDrawerOpen(this._end) && /** @type {?} */ ((this._end)).mode != 'side');
};
/**
* @param {?} drawer
* @return {?}
*/
MatDrawerContainer.prototype._isDrawerOpen = /**
* @param {?} drawer
* @return {?}
*/
function (drawer) {
return drawer != null && drawer.opened;
};
/**
* Recalculates and updates the inline styles for the content. Note that this should be used
* sparingly, because it causes a reflow.
* @return {?}
*/
MatDrawerContainer.prototype._updateContentMargins = /**
* Recalculates and updates the inline styles for the content. Note that this should be used
* sparingly, because it causes a reflow.
* @return {?}
*/
function () {
var _this = this;
// 1. For drawers in `over` mode, they don't affect the content.
// 2. For drawers in `side` mode they should shrink the content. We do this by adding to the
// left margin (for left drawer) or right margin (for right the drawer).
// 3. For drawers in `push` mode the should shift the content without resizing it. We do this by
// adding to the left or right margin and simultaneously subtracting the same amount of
// margin from the other side.
var /** @type {?} */ left = 0;
var /** @type {?} */ right = 0;
if (this._left && this._left.opened) {
if (this._left.mode == 'side') {
left += this._left._width;
}
else if (this._left.mode == 'push') {
var /** @type {?} */ width = this._left._width;
left += width;
right -= width;
}
}
if (this._right && this._right.opened) {
if (this._right.mode == 'side') {
right += this._right._width;
}
else if (this._right.mode == 'push') {
var /** @type {?} */ width = this._right._width;
right += width;
left -= width;
}
}
// Pull back into the NgZone since in some cases we could be outside.
this._ngZone.run(function () { return _this._contentMargins.next({ left: left, right: right }); });
};
MatDrawerContainer.decorators = [
{ type: core.Component, args: [{ selector: 'mat-drawer-container',
exportAs: 'matDrawerContainer',
template: "<div class=\"mat-drawer-backdrop\" (click)=\"_onBackdropClicked()\" [class.mat-drawer-shown]=\"_isShowingBackdrop()\"></div><ng-content select=\"mat-drawer\"></ng-content><ng-content select=\"mat-drawer-content\"></ng-content><mat-drawer-content *ngIf=\"!_content\" cdkScrollable><ng-content></ng-content></mat-drawer-content>",
styles: [".mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-opened{overflow:hidden}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media screen and (-ms-high-contrast:active){.mat-drawer-backdrop{opacity:.5}}.mat-drawer-content{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer:not(.mat-drawer-side){box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.mat-sidenav-fixed{position:fixed}"],
host: {
'class': 'mat-drawer-container',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatDrawerContainer.ctorParameters = function () {
return [
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: core.ElementRef, },
{ type: core.NgZone, },
{ type: core.ChangeDetectorRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_DRAWER_DEFAULT_AUTOSIZE,] },] },
];
};
MatDrawerContainer.propDecorators = {
"_drawers": [{ type: core.ContentChildren, args: [MatDrawer,] },],
"_content": [{ type: core.ContentChild, args: [MatDrawerContent,] },],
"autosize": [{ type: core.Input },],
"backdropClick": [{ type: core.Output },],
"scrollable": [{ type: core.ViewChild, args: [scrolling.CdkScrollable,] },],
};
return MatDrawerContainer;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatSidenavContent = (function (_super) {
__extends(MatSidenavContent, _super);
function MatSidenavContent(changeDetectorRef, container) {
return _super.call(this, changeDetectorRef, container) || this;
}
MatSidenavContent.decorators = [
{ type: core.Component, args: [{ selector: 'mat-sidenav-content',
template: '<ng-content></ng-content>',
host: {
'class': 'mat-drawer-content mat-sidenav-content',
'[style.margin-left.px]': '_margins.left',
'[style.margin-right.px]': '_margins.right',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatSidenavContent.ctorParameters = function () {
return [
{ type: core.ChangeDetectorRef, },
{ type: MatSidenavContainer, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatSidenavContainer; }),] },] },
];
};
return MatSidenavContent;
}(MatDrawerContent));
var MatSidenav = (function (_super) {
__extends(MatSidenav, _super);
function MatSidenav() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._fixedInViewport = false;
_this._fixedTopGap = 0;
_this._fixedBottomGap = 0;
return _this;
}
Object.defineProperty(MatSidenav.prototype, "fixedInViewport", {
get: /**
* Whether the sidenav is fixed in the viewport.
* @return {?}
*/ function () { return this._fixedInViewport; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._fixedInViewport = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatSidenav.prototype, "fixedTopGap", {
get: /**
* The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed
* mode.
* @return {?}
*/ function () { return this._fixedTopGap; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._fixedTopGap = coercion.coerceNumberProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatSidenav.prototype, "fixedBottomGap", {
get: /**
* The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in
* fixed mode.
* @return {?}
*/ function () { return this._fixedBottomGap; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._fixedBottomGap = coercion.coerceNumberProperty(value); },
enumerable: true,
configurable: true
});
MatSidenav.decorators = [
{ type: core.Component, args: [{ selector: 'mat-sidenav',
exportAs: 'matSidenav',
template: '<ng-content></ng-content>',
animations: [matDrawerAnimations.transformDrawer],
host: {
'class': 'mat-drawer mat-sidenav',
'tabIndex': '-1',
'[@transform]': '_animationState',
'(@transform.start)': '_onAnimationStart($event)',
'(@transform.done)': '_onAnimationEnd($event)',
'(keydown)': 'handleKeydown($event)',
// must prevent the browser from aligning text based on value
'[attr.align]': 'null',
'[class.mat-drawer-end]': 'position === "end"',
'[class.mat-drawer-over]': 'mode === "over"',
'[class.mat-drawer-push]': 'mode === "push"',
'[class.mat-drawer-side]': 'mode === "side"',
'[class.mat-sidenav-fixed]': 'fixedInViewport',
'[style.top.px]': 'fixedInViewport ? fixedTopGap : null',
'[style.bottom.px]': 'fixedInViewport ? fixedBottomGap : null',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatSidenav.ctorParameters = function () { return []; };
MatSidenav.propDecorators = {
"fixedInViewport": [{ type: core.Input },],
"fixedTopGap": [{ type: core.Input },],
"fixedBottomGap": [{ type: core.Input },],
};
return MatSidenav;
}(MatDrawer));
var MatSidenavContainer = (function (_super) {
__extends(MatSidenavContainer, _super);
function MatSidenavContainer() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatSidenavContainer.decorators = [
{ type: core.Component, args: [{ selector: 'mat-sidenav-container',
exportAs: 'matSidenavContainer',
template: "<div class=\"mat-drawer-backdrop\" (click)=\"_onBackdropClicked()\" [class.mat-drawer-shown]=\"_isShowingBackdrop()\"></div><ng-content select=\"mat-sidenav\"></ng-content><ng-content select=\"mat-sidenav-content\"></ng-content><mat-sidenav-content *ngIf=\"!_content\" cdkScrollable><ng-content></ng-content></mat-sidenav-content>",
styles: [".mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-opened{overflow:hidden}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media screen and (-ms-high-contrast:active){.mat-drawer-backdrop{opacity:.5}}.mat-drawer-content{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer:not(.mat-drawer-side){box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.mat-sidenav-fixed{position:fixed}"],
host: {
'class': 'mat-drawer-container mat-sidenav-container',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatSidenavContainer.ctorParameters = function () { return []; };
MatSidenavContainer.propDecorators = {
"_drawers": [{ type: core.ContentChildren, args: [MatSidenav,] },],
"_content": [{ type: core.ContentChild, args: [MatSidenavContent,] },],
};
return MatSidenavContainer;
}(MatDrawerContainer));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// Increasing integer for generating unique ids for slide-toggle components.
var nextUniqueId$6 = 0;
var MAT_SLIDE_TOGGLE_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatSlideToggle; }),
multi: true
};
/**
* Change event object emitted by a MatSlideToggle.
*/
var MatSlideToggleChange = (function () {
function MatSlideToggleChange(source, checked) {
this.source = source;
this.checked = checked;
}
return MatSlideToggleChange;
}());
/**
* \@docs-private
*/
var MatSlideToggleBase = (function () {
function MatSlideToggleBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatSlideToggleBase;
}());
var _MatSlideToggleMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent'));
/**
* Represents a slidable "switch" toggle that can be moved between on and off.
*/
var MatSlideToggle = (function (_super) {
__extends(MatSlideToggle, _super);
function MatSlideToggle(elementRef, _platform, _focusMonitor, _changeDetectorRef, tabIndex) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
_this._focusMonitor = _focusMonitor;
_this._changeDetectorRef = _changeDetectorRef;
_this.onChange = function (_) { };
_this.onTouched = function () { };
_this._uniqueId = "mat-slide-toggle-" + ++nextUniqueId$6;
_this._required = false;
_this._checked = false;
/**
* Name value will be applied to the input element if present
*/
_this.name = null;
/**
* A unique id for the slide-toggle input. If none is supplied, it will be auto-generated.
*/
_this.id = _this._uniqueId;
/**
* Whether the label should appear after or before the slide-toggle. Defaults to 'after'
*/
_this.labelPosition = 'after';
/**
* Used to set the aria-label attribute on the underlying input element.
*/
_this.ariaLabel = null;
/**
* Used to set the aria-labelledby attribute on the underlying input element.
*/
_this.ariaLabelledby = null;
/**
* An event will be dispatched each time the slide-toggle changes its value.
*/
_this.change = new core.EventEmitter();
_this.tabIndex = parseInt(tabIndex) || 0;
return _this;
}
Object.defineProperty(MatSlideToggle.prototype, "required", {
get: /**
* Whether the slide-toggle is required.
* @return {?}
*/ function () { return this._required; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._required = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlideToggle.prototype, "checked", {
get: /**
* Whether the slide-toggle element is checked or not
* @return {?}
*/ function () { return this._checked; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._checked = coercion.coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlideToggle.prototype, "inputId", {
/** Returns the unique id for the visual hidden input. */
get: /**
* Returns the unique id for the visual hidden input.
* @return {?}
*/ function () { return (this.id || this._uniqueId) + "-input"; },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatSlideToggle.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._slideRenderer = new SlideToggleRenderer(this._elementRef, this._platform);
this._focusMonitor
.monitor(this._inputElement.nativeElement)
.subscribe(function (focusOrigin) { return _this._onInputFocusChange(focusOrigin); });
};
/**
* @return {?}
*/
MatSlideToggle.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._focusMonitor.stopMonitoring(this._inputElement.nativeElement);
};
/** Method being called whenever the underlying input emits a change event. */
/**
* Method being called whenever the underlying input emits a change event.
* @param {?} event
* @return {?}
*/
MatSlideToggle.prototype._onChangeEvent = /**
* Method being called whenever the underlying input emits a change event.
* @param {?} event
* @return {?}
*/
function (event) {
// We always have to stop propagation on the change event.
// Otherwise the change event, from the input element, will bubble up and
// emit its event object to the component's `change` output.
event.stopPropagation();
// Releasing the pointer over the `<label>` element while dragging triggers another
// click event on the `<label>` element. This means that the checked state of the underlying
// input changed unintentionally and needs to be changed back.
if (this._slideRenderer.dragging) {
this._inputElement.nativeElement.checked = this.checked;
return;
}
// Sync the value from the underlying input element with the component instance.
this.checked = this._inputElement.nativeElement.checked;
// Emit our custom change event only if the underlying input emitted one. This ensures that
// there is no change event, when the checked state changes programmatically.
this._emitChangeEvent();
};
/** Method being called whenever the slide-toggle has been clicked. */
/**
* Method being called whenever the slide-toggle has been clicked.
* @param {?} event
* @return {?}
*/
MatSlideToggle.prototype._onInputClick = /**
* Method being called whenever the slide-toggle has been clicked.
* @param {?} event
* @return {?}
*/
function (event) {
// We have to stop propagation for click events on the visual hidden input element.
// By default, when a user clicks on a label element, a generated click event will be
// dispatched on the associated input element. Since we are using a label element as our
// root container, the click event on the `slide-toggle` will be executed twice.
// The real click event will bubble up, and the generated click event also tries to bubble up.
// This will lead to multiple click events.
// Preventing bubbling for the second event will solve that issue.
event.stopPropagation();
};
/** Implemented as part of ControlValueAccessor. */
/**
* Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
MatSlideToggle.prototype.writeValue = /**
* Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = !!value;
};
/** Implemented as part of ControlValueAccessor. */
/**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
MatSlideToggle.prototype.registerOnChange = /**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/** Implemented as part of ControlValueAccessor. */
/**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
MatSlideToggle.prototype.registerOnTouched = /**
* Implemented as part of ControlValueAccessor.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/** Implemented as a part of ControlValueAccessor. */
/**
* Implemented as a part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
MatSlideToggle.prototype.setDisabledState = /**
* Implemented as a part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
this._changeDetectorRef.markForCheck();
};
/** Focuses the slide-toggle. */
/**
* Focuses the slide-toggle.
* @return {?}
*/
MatSlideToggle.prototype.focus = /**
* Focuses the slide-toggle.
* @return {?}
*/
function () {
this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
};
/** Toggles the checked state of the slide-toggle. */
/**
* Toggles the checked state of the slide-toggle.
* @return {?}
*/
MatSlideToggle.prototype.toggle = /**
* Toggles the checked state of the slide-toggle.
* @return {?}
*/
function () {
this.checked = !this.checked;
};
/**
* Function is called whenever the focus changes for the input element.
* @param {?} focusOrigin
* @return {?}
*/
MatSlideToggle.prototype._onInputFocusChange = /**
* Function is called whenever the focus changes for the input element.
* @param {?} focusOrigin
* @return {?}
*/
function (focusOrigin) {
if (!this._focusRipple && focusOrigin === 'keyboard') {
// For keyboard focus show a persistent ripple as focus indicator.
this._focusRipple = this._ripple.launch(0, 0, { persistent: true });
}
else if (!focusOrigin) {
this.onTouched();
// Fade out and clear the focus ripple if one is currently present.
if (this._focusRipple) {
this._focusRipple.fadeOut();
this._focusRipple = null;
}
}
};
/**
* Emits a change event on the `change` output. Also notifies the FormControl about the change.
* @return {?}
*/
MatSlideToggle.prototype._emitChangeEvent = /**
* Emits a change event on the `change` output. Also notifies the FormControl about the change.
* @return {?}
*/
function () {
this.onChange(this.checked);
this.change.emit(new MatSlideToggleChange(this, this.checked));
};
/**
* @return {?}
*/
MatSlideToggle.prototype._onDragStart = /**
* @return {?}
*/
function () {
if (!this.disabled) {
this._slideRenderer.startThumbDrag(this.checked);
}
};
/**
* @param {?} event
* @return {?}
*/
MatSlideToggle.prototype._onDrag = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this._slideRenderer.dragging) {
this._slideRenderer.updateThumbPosition(event.deltaX);
}
};
/**
* @return {?}
*/
MatSlideToggle.prototype._onDragEnd = /**
* @return {?}
*/
function () {
var _this = this;
if (this._slideRenderer.dragging) {
var /** @type {?} */ newCheckedValue = this._slideRenderer.dragPercentage > 50;
if (newCheckedValue !== this.checked) {
this.checked = newCheckedValue;
this._emitChangeEvent();
}
// The drag should be stopped outside of the current event handler, because otherwise the
// click event will be fired before and will revert the drag change.
setTimeout(function () { return _this._slideRenderer.stopThumbDrag(); });
}
};
/** Method being called whenever the label text changes. */
/**
* Method being called whenever the label text changes.
* @return {?}
*/
MatSlideToggle.prototype._onLabelTextChange = /**
* Method being called whenever the label text changes.
* @return {?}
*/
function () {
// This method is getting called whenever the label of the slide-toggle changes.
// Since the slide-toggle uses the OnPush strategy we need to notify it about the change
// that has been recognized by the cdkObserveContent directive.
this._changeDetectorRef.markForCheck();
};
MatSlideToggle.decorators = [
{ type: core.Component, args: [{ selector: 'mat-slide-toggle',
exportAs: 'matSlideToggle',
host: {
'class': 'mat-slide-toggle',
'[id]': 'id',
'[class.mat-checked]': 'checked',
'[class.mat-disabled]': 'disabled',
'[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',
},
template: "<label class=\"mat-slide-toggle-label\" #label><div class=\"mat-slide-toggle-bar\" [class.mat-slide-toggle-bar-no-side-margin]=\"!labelContent.textContent || !labelContent.textContent.trim()\"><input #input class=\"mat-slide-toggle-input cdk-visually-hidden\" type=\"checkbox\" [id]=\"inputId\" [required]=\"required\" [tabIndex]=\"tabIndex\" [checked]=\"checked\" [disabled]=\"disabled\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onChangeEvent($event)\" (click)=\"_onInputClick($event)\"><div class=\"mat-slide-toggle-thumb-container\" (slidestart)=\"_onDragStart()\" (slide)=\"_onDrag($event)\" (slideend)=\"_onDragEnd()\"><div class=\"mat-slide-toggle-thumb\"></div><div class=\"mat-slide-toggle-ripple\" mat-ripple [matRippleTrigger]=\"label\" [matRippleDisabled]=\"disableRipple || disabled\" [matRippleCentered]=\"true\" [matRippleRadius]=\"23\" [matRippleAnimation]=\"{enterDuration: 150}\"></div></div></div><span class=\"mat-slide-toggle-content\" #labelContent (cdkObserveContent)=\"_onLabelTextChange()\"><ng-content></ng-content></span></label>",
styles: [".mat-slide-toggle{display:inline-block;height:24px;max-width:100%;line-height:24px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(16px,0,0)}.mat-slide-toggle.mat-disabled .mat-slide-toggle-label,.mat-slide-toggle.mat-disabled .mat-slide-toggle-thumb-container{cursor:default}.mat-slide-toggle-label{display:flex;flex:1;flex-direction:row;align-items:center;height:inherit;cursor:pointer}.mat-slide-toggle-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-slide-toggle-label-before .mat-slide-toggle-label{order:1}.mat-slide-toggle-label-before .mat-slide-toggle-bar{order:2}.mat-slide-toggle-bar,[dir=rtl] .mat-slide-toggle-label-before .mat-slide-toggle-bar{margin-right:8px;margin-left:0}.mat-slide-toggle-label-before .mat-slide-toggle-bar,[dir=rtl] .mat-slide-toggle-bar{margin-left:8px;margin-right:0}.mat-slide-toggle-bar-no-side-margin{margin-left:0;margin-right:0}.mat-slide-toggle-thumb-container{position:absolute;z-index:1;width:20px;height:20px;top:-3px;left:0;transform:translate3d(0,0,0);transition:all 80ms linear;transition-property:transform;cursor:-webkit-grab;cursor:grab}.mat-slide-toggle-thumb-container.mat-dragging,.mat-slide-toggle-thumb-container:active{cursor:-webkit-grabbing;cursor:grabbing;transition-duration:0s}.mat-slide-toggle-thumb{height:20px;width:20px;border-radius:50%;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}@media screen and (-ms-high-contrast:active){.mat-slide-toggle-thumb{background:#fff;border:solid 1px #000}}.mat-slide-toggle-bar{position:relative;width:36px;height:14px;flex-shrink:0;border-radius:8px}@media screen and (-ms-high-contrast:active){.mat-slide-toggle-bar{background:#fff}}.mat-slide-toggle-input{bottom:0;left:10px}.mat-slide-toggle-bar,.mat-slide-toggle-thumb{transition:all 80ms linear;transition-property:background-color;transition-delay:50ms}.mat-slide-toggle-ripple{position:absolute;top:calc(50% - 23px);left:calc(50% - 23px);height:46px;width:46px;z-index:1;pointer-events:none}"],
providers: [MAT_SLIDE_TOGGLE_VALUE_ACCESSOR],
inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatSlideToggle.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: platform.Platform, },
{ type: a11y.FocusMonitor, },
{ type: core.ChangeDetectorRef, },
{ type: undefined, decorators: [{ type: core.Attribute, args: ['tabindex',] },] },
];
};
MatSlideToggle.propDecorators = {
"name": [{ type: core.Input },],
"id": [{ type: core.Input },],
"labelPosition": [{ type: core.Input },],
"ariaLabel": [{ type: core.Input, args: ['aria-label',] },],
"ariaLabelledby": [{ type: core.Input, args: ['aria-labelledby',] },],
"required": [{ type: core.Input },],
"checked": [{ type: core.Input },],
"change": [{ type: core.Output },],
"_inputElement": [{ type: core.ViewChild, args: ['input',] },],
"_ripple": [{ type: core.ViewChild, args: [MatRipple,] },],
};
return MatSlideToggle;
}(_MatSlideToggleMixinBase));
/**
* Renderer for the Slide Toggle component, which separates DOM modification in its own class
*/
var SlideToggleRenderer = (function () {
function SlideToggleRenderer(elementRef, platform$$1) {
/**
* Whether the thumb is currently being dragged.
*/
this.dragging = false;
// We only need to interact with these elements when we're on the browser, so only grab
// the reference in that case.
if (platform$$1.isBrowser) {
this._thumbEl = elementRef.nativeElement.querySelector('.mat-slide-toggle-thumb-container');
this._thumbBarEl = elementRef.nativeElement.querySelector('.mat-slide-toggle-bar');
}
}
/** Initializes the drag of the slide-toggle. */
/**
* Initializes the drag of the slide-toggle.
* @param {?} checked
* @return {?}
*/
SlideToggleRenderer.prototype.startThumbDrag = /**
* Initializes the drag of the slide-toggle.
* @param {?} checked
* @return {?}
*/
function (checked) {
if (this.dragging) {
return;
}
this._thumbBarWidth = this._thumbBarEl.clientWidth - this._thumbEl.clientWidth;
this._thumbEl.classList.add('mat-dragging');
this._previousChecked = checked;
this.dragging = true;
};
/** Resets the current drag and returns the new checked value. */
/**
* Resets the current drag and returns the new checked value.
* @return {?}
*/
SlideToggleRenderer.prototype.stopThumbDrag = /**
* Resets the current drag and returns the new checked value.
* @return {?}
*/
function () {
if (!this.dragging) {
return false;
}
this.dragging = false;
this._thumbEl.classList.remove('mat-dragging');
// Reset the transform because the component will take care of the thumb position after drag.
this._thumbEl.style.transform = '';
return this.dragPercentage > 50;
};
/** Updates the thumb containers position from the specified distance. */
/**
* Updates the thumb containers position from the specified distance.
* @param {?} distance
* @return {?}
*/
SlideToggleRenderer.prototype.updateThumbPosition = /**
* Updates the thumb containers position from the specified distance.
* @param {?} distance
* @return {?}
*/
function (distance) {
this.dragPercentage = this._getDragPercentage(distance);
// Calculate the moved distance based on the thumb bar width.
var /** @type {?} */ dragX = (this.dragPercentage / 100) * this._thumbBarWidth;
this._thumbEl.style.transform = "translate3d(" + dragX + "px, 0, 0)";
};
/**
* Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100.
* @param {?} distance
* @return {?}
*/
SlideToggleRenderer.prototype._getDragPercentage = /**
* Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100.
* @param {?} distance
* @return {?}
*/
function (distance) {
var /** @type {?} */ percentage = (distance / this._thumbBarWidth) * 100;
// When the toggle was initially checked, then we have to start the drag at the end.
if (this._previousChecked) {
percentage += 100;
}
return Math.max(0, Math.min(percentage, 100));
};
return SlideToggleRenderer;
}());
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Visually, a 30px separation between tick marks looks best. This is very subjective but it is
* the default separation we chose.
*/
var MIN_AUTO_TICK_SEPARATION = 30;
/**
* The thumb gap size for a disabled slider.
*/
var DISABLED_THUMB_GAP = 7;
/**
* The thumb gap size for a non-active slider at its minimum value.
*/
var MIN_VALUE_NONACTIVE_THUMB_GAP = 7;
/**
* The thumb gap size for an active slider at its minimum value.
*/
var MIN_VALUE_ACTIVE_THUMB_GAP = 10;
/**
* Provider Expression that allows mat-slider to register as a ControlValueAccessor.
* This allows it to support [(ngModel)] and [formControl].
*/
var MAT_SLIDER_VALUE_ACCESSOR = {
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatSlider; }),
multi: true
};
/**
* A simple change event emitted by the MatSlider component.
*/
var MatSliderChange = (function () {
function MatSliderChange() {
}
return MatSliderChange;
}());
/**
* \@docs-private
*/
var MatSliderBase = (function () {
function MatSliderBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatSliderBase;
}());
var _MatSliderMixinBase = mixinTabIndex(mixinColor(mixinDisabled(MatSliderBase), 'accent'));
/**
* Allows users to select from a range of values by moving the slider thumb. It is similar in
* behavior to the native `<input type="range">` element.
*/
var MatSlider = (function (_super) {
__extends(MatSlider, _super);
function MatSlider(elementRef, _focusMonitor, _changeDetectorRef, _dir, tabIndex) {
var _this = _super.call(this, elementRef) || this;
_this._focusMonitor = _focusMonitor;
_this._changeDetectorRef = _changeDetectorRef;
_this._dir = _dir;
_this._invert = false;
_this._max = 100;
_this._min = 0;
_this._step = 1;
_this._thumbLabel = false;
_this._tickInterval = 0;
_this._value = null;
_this._vertical = false;
/**
* Event emitted when the slider value has changed.
*/
_this.change = new core.EventEmitter();
/**
* Event emitted when the slider thumb moves.
*/
_this.input = new core.EventEmitter();
/**
* onTouch function registered via registerOnTouch (ControlValueAccessor).
*/
_this.onTouched = function () { };
_this._percent = 0;
/**
* Whether or not the thumb is sliding.
* Used to determine if there should be a transition for the thumb and fill track.
*/
_this._isSliding = false;
/**
* Whether or not the slider is active (clicked or sliding).
* Used to shrink and grow the thumb as according to the Material Design spec.
*/
_this._isActive = false;
/**
* The size of a tick interval as a percentage of the size of the track.
*/
_this._tickIntervalPercent = 0;
/**
* The dimensions of the slider.
*/
_this._sliderDimensions = null;
_this._controlValueAccessorChangeFn = function () { };
/**
* Subscription to the Directionality change EventEmitter.
*/
_this._dirChangeSubscription = Subscription.Subscription.EMPTY;
_this.tabIndex = parseInt(tabIndex) || 0;
return _this;
}
Object.defineProperty(MatSlider.prototype, "invert", {
get: /**
* Whether the slider is inverted.
* @return {?}
*/ function () { return this._invert; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._invert = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "max", {
get: /**
* The maximum value that the slider can have.
* @return {?}
*/ function () { return this._max; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this._max = coercion.coerceNumberProperty(v, this._max);
this._percent = this._calculatePercentage(this._value);
// Since this also modifies the percentage, we need to let the change detection know.
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "min", {
get: /**
* The minimum value that the slider can have.
* @return {?}
*/ function () { return this._min; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this._min = coercion.coerceNumberProperty(v, this._min);
// If the value wasn't explicitly set by the user, set it to the min.
if (this._value === null) {
this.value = this._min;
}
this._percent = this._calculatePercentage(this._value);
// Since this also modifies the percentage, we need to let the change detection know.
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "step", {
get: /**
* The values at which the thumb will snap.
* @return {?}
*/ function () { return this._step; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this._step = coercion.coerceNumberProperty(v, this._step);
if (this._step % 1 !== 0) {
this._roundLabelTo = /** @type {?} */ ((this._step.toString().split('.').pop())).length;
}
// Since this could modify the label, we need to notify the change detection.
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "thumbLabel", {
get: /**
* Whether or not to show the thumb label.
* @return {?}
*/ function () { return this._thumbLabel; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._thumbLabel = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_thumbLabelDeprecated", {
get: /**
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this._thumbLabel; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._thumbLabel = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "tickInterval", {
get: /**
* How often to show ticks. Relative to the step so that a tick always appears on a step.
* Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values).
* @return {?}
*/ function () { return this._tickInterval; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value === 'auto') {
this._tickInterval = 'auto';
}
else if (typeof value === 'number' || typeof value === 'string') {
this._tickInterval = coercion.coerceNumberProperty(value, /** @type {?} */ (this._tickInterval));
}
else {
this._tickInterval = 0;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_tickIntervalDeprecated", {
get: /**
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this.tickInterval; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) { this.tickInterval = v; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "value", {
get: /**
* Value of the slider.
* @return {?}
*/ function () {
// If the value needs to be read and it is still uninitialized, initialize it to the min.
if (this._value === null) {
this.value = this._min;
}
return this._value;
},
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
if (v !== this._value) {
this._value = coercion.coerceNumberProperty(v);
this._percent = this._calculatePercentage(this._value);
// Since this also modifies the percentage, we need to let the change detection know.
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "vertical", {
get: /**
* Whether the slider is vertical.
* @return {?}
*/ function () { return this._vertical; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._vertical = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "displayValue", {
/** The value to be used for display purposes. */
get: /**
* The value to be used for display purposes.
* @return {?}
*/ function () {
// Note that this could be improved further by rounding something like 0.999 to 1 or
// 0.899 to 0.9, however it is very performance sensitive, because it gets called on
// every change detection cycle.
if (this._roundLabelTo && this.value && this.value % 1 !== 0) {
return this.value.toFixed(this._roundLabelTo);
}
return this.value || 0;
},
enumerable: true,
configurable: true
});
/** set focus to the host element */
/**
* set focus to the host element
* @return {?}
*/
MatSlider.prototype.focus = /**
* set focus to the host element
* @return {?}
*/
function () {
this._focusHostElement();
};
/** blur the host element */
/**
* blur the host element
* @return {?}
*/
MatSlider.prototype.blur = /**
* blur the host element
* @return {?}
*/
function () {
this._blurHostElement();
};
Object.defineProperty(MatSlider.prototype, "percent", {
/** The percentage of the slider that coincides with the value. */
get: /**
* The percentage of the slider that coincides with the value.
* @return {?}
*/ function () { return this._clamp(this._percent); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_invertAxis", {
/**
* Whether the axis of the slider is inverted.
* (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
*/
get: /**
* Whether the axis of the slider is inverted.
* (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).
* @return {?}
*/ function () {
// Standard non-inverted mode for a vertical slider should be dragging the thumb from bottom to
// top. However from a y-axis standpoint this is inverted.
return this.vertical ? !this.invert : this.invert;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_isMinValue", {
/** Whether the slider is at its minimum value. */
get: /**
* Whether the slider is at its minimum value.
* @return {?}
*/ function () {
return this.percent === 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_thumbGap", {
/**
* The amount of space to leave between the slider thumb and the track fill & track background
* elements.
*/
get: /**
* The amount of space to leave between the slider thumb and the track fill & track background
* elements.
* @return {?}
*/ function () {
if (this.disabled) {
return DISABLED_THUMB_GAP;
}
if (this._isMinValue && !this.thumbLabel) {
return this._isActive ? MIN_VALUE_ACTIVE_THUMB_GAP : MIN_VALUE_NONACTIVE_THUMB_GAP;
}
return 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_trackBackgroundStyles", {
/** CSS styles for the track background element. */
get: /**
* CSS styles for the track background element.
* @return {?}
*/ function () {
var /** @type {?} */ axis = this.vertical ? 'Y' : 'X';
var /** @type {?} */ sign = this._invertMouseCoords ? '-' : '';
return {
'transform': "translate" + axis + "(" + sign + this._thumbGap + "px) scale" + axis + "(" + (1 - this.percent) + ")"
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_trackFillStyles", {
/** CSS styles for the track fill element. */
get: /**
* CSS styles for the track fill element.
* @return {?}
*/ function () {
var /** @type {?} */ axis = this.vertical ? 'Y' : 'X';
var /** @type {?} */ sign = this._invertMouseCoords ? '' : '-';
return {
'transform': "translate" + axis + "(" + sign + this._thumbGap + "px) scale" + axis + "(" + this.percent + ")"
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_ticksContainerStyles", {
/** CSS styles for the ticks container element. */
get: /**
* CSS styles for the ticks container element.
* @return {?}
*/ function () {
var /** @type {?} */ axis = this.vertical ? 'Y' : 'X';
// For a horizontal slider in RTL languages we push the ticks container off the left edge
// instead of the right edge to avoid causing a horizontal scrollbar to appear.
var /** @type {?} */ sign = !this.vertical && this._direction == 'rtl' ? '' : '-';
var /** @type {?} */ offset = this._tickIntervalPercent / 2 * 100;
return {
'transform': "translate" + axis + "(" + sign + offset + "%)"
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_ticksStyles", {
/** CSS styles for the ticks element. */
get: /**
* CSS styles for the ticks element.
* @return {?}
*/ function () {
var /** @type {?} */ tickSize = this._tickIntervalPercent * 100;
var /** @type {?} */ backgroundSize = this.vertical ? "2px " + tickSize + "%" : tickSize + "% 2px";
var /** @type {?} */ axis = this.vertical ? 'Y' : 'X';
// Depending on the direction we pushed the ticks container, push the ticks the opposite
// direction to re-center them but clip off the end edge. In RTL languages we need to flip the
// ticks 180 degrees so we're really cutting off the end edge abd not the start.
var /** @type {?} */ sign = !this.vertical && this._direction == 'rtl' ? '-' : '';
var /** @type {?} */ rotate = !this.vertical && this._direction == 'rtl' ? ' rotate(180deg)' : '';
var /** @type {?} */ styles = {
'backgroundSize': backgroundSize,
// Without translateZ ticks sometimes jitter as the slider moves on Chrome & Firefox.
'transform': "translateZ(0) translate" + axis + "(" + sign + tickSize / 2 + "%)" + rotate
};
if (this._isMinValue && this._thumbGap) {
var /** @type {?} */ side = this.vertical ?
(this._invertAxis ? 'Bottom' : 'Top') :
(this._invertAxis ? 'Right' : 'Left');
styles["padding" + side] = this._thumbGap + "px";
}
return styles;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_thumbContainerStyles", {
get: /**
* @return {?}
*/ function () {
var /** @type {?} */ axis = this.vertical ? 'Y' : 'X';
// For a horizontal slider in RTL languages we push the thumb container off the left edge
// instead of the right edge to avoid causing a horizontal scrollbar to appear.
var /** @type {?} */ invertOffset = (this._direction == 'rtl' && !this.vertical) ? !this._invertAxis : this._invertAxis;
var /** @type {?} */ offset = (invertOffset ? this.percent : 1 - this.percent) * 100;
return {
'transform': "translate" + axis + "(-" + offset + "%)"
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_invertMouseCoords", {
get: /**
* Whether mouse events should be converted to a slider position by calculating their distance
* from the right or bottom edge of the slider as opposed to the top or left.
* @return {?}
*/ function () {
return (this._direction == 'rtl' && !this.vertical) ? !this._invertAxis : this._invertAxis;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSlider.prototype, "_direction", {
get: /**
* The language direction for this slider element.
* @return {?}
*/ function () {
return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr';
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatSlider.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._focusMonitor
.monitor(this._elementRef.nativeElement, true)
.subscribe(function (origin) {
_this._isActive = !!origin && origin !== 'keyboard';
_this._changeDetectorRef.detectChanges();
});
if (this._dir) {
this._dirChangeSubscription = this._dir.change.subscribe(function () {
_this._changeDetectorRef.markForCheck();
});
}
};
/**
* @return {?}
*/
MatSlider.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
this._dirChangeSubscription.unsubscribe();
};
/**
* @return {?}
*/
MatSlider.prototype._onMouseenter = /**
* @return {?}
*/
function () {
if (this.disabled) {
return;
}
// We save the dimensions of the slider here so we can use them to update the spacing of the
// ticks and determine where on the slider click and slide events happen.
this._sliderDimensions = this._getSliderDimensions();
this._updateTickIntervalPercent();
};
/**
* @param {?} event
* @return {?}
*/
MatSlider.prototype._onClick = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled) {
return;
}
var /** @type {?} */ oldValue = this.value;
this._isSliding = false;
this._focusHostElement();
this._updateValueFromPosition({ x: event.clientX, y: event.clientY });
// Emit a change and input event if the value changed.
if (oldValue != this.value) {
this._emitInputEvent();
this._emitChangeEvent();
}
};
/**
* @param {?} event
* @return {?}
*/
MatSlider.prototype._onSlide = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled) {
return;
}
// The slide start event sometimes fails to fire on iOS, so if we're not already in the sliding
// state, call the slide start handler manually.
if (!this._isSliding) {
this._onSlideStart(null);
}
// Prevent the slide from selecting anything else.
event.preventDefault();
var /** @type {?} */ oldValue = this.value;
this._updateValueFromPosition({ x: event.center.x, y: event.center.y });
// Native range elements always emit `input` events when the value changed while sliding.
if (oldValue != this.value) {
this._emitInputEvent();
}
};
/**
* @param {?} event
* @return {?}
*/
MatSlider.prototype._onSlideStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled || this._isSliding) {
return;
}
// Simulate mouseenter in case this is a mobile device.
this._onMouseenter();
this._isSliding = true;
this._focusHostElement();
this._valueOnSlideStart = this.value;
if (event) {
this._updateValueFromPosition({ x: event.center.x, y: event.center.y });
event.preventDefault();
}
};
/**
* @return {?}
*/
MatSlider.prototype._onSlideEnd = /**
* @return {?}
*/
function () {
this._isSliding = false;
if (this._valueOnSlideStart != this.value && !this.disabled) {
this._emitChangeEvent();
}
this._valueOnSlideStart = null;
};
/**
* @return {?}
*/
MatSlider.prototype._onFocus = /**
* @return {?}
*/
function () {
// We save the dimensions of the slider here so we can use them to update the spacing of the
// ticks and determine where on the slider click and slide events happen.
this._sliderDimensions = this._getSliderDimensions();
this._updateTickIntervalPercent();
};
/**
* @return {?}
*/
MatSlider.prototype._onBlur = /**
* @return {?}
*/
function () {
this.onTouched();
};
/**
* @param {?} event
* @return {?}
*/
MatSlider.prototype._onKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled) {
return;
}
var /** @type {?} */ oldValue = this.value;
switch (event.keyCode) {
case keycodes.PAGE_UP:
this._increment(10);
break;
case keycodes.PAGE_DOWN:
this._increment(-10);
break;
case keycodes.END:
this.value = this.max;
break;
case keycodes.HOME:
this.value = this.min;
break;
case keycodes.LEFT_ARROW:
// NOTE: For a sighted user it would make more sense that when they press an arrow key on an
// inverted slider the thumb moves in that direction. However for a blind user, nothing
// about the slider indicates that it is inverted. They will expect left to be decrement,
// regardless of how it appears on the screen. For speakers ofRTL languages, they probably
// expect left to mean increment. Therefore we flip the meaning of the side arrow keys for
// RTL. For inverted sliders we prefer a good a11y experience to having it "look right" for
// sighted users, therefore we do not swap the meaning.
this._increment(this._direction == 'rtl' ? 1 : -1);
break;
case keycodes.UP_ARROW:
this._increment(1);
break;
case keycodes.RIGHT_ARROW:
// See comment on LEFT_ARROW about the conditions under which we flip the meaning.
this._increment(this._direction == 'rtl' ? -1 : 1);
break;
case keycodes.DOWN_ARROW:
this._increment(-1);
break;
default:
// Return if the key is not one that we explicitly handle to avoid calling preventDefault on
// it.
return;
}
if (oldValue != this.value) {
this._emitInputEvent();
this._emitChangeEvent();
}
this._isSliding = true;
event.preventDefault();
};
/**
* @return {?}
*/
MatSlider.prototype._onKeyup = /**
* @return {?}
*/
function () {
this._isSliding = false;
};
/**
* Increments the slider by the given number of steps (negative number decrements).
* @param {?} numSteps
* @return {?}
*/
MatSlider.prototype._increment = /**
* Increments the slider by the given number of steps (negative number decrements).
* @param {?} numSteps
* @return {?}
*/
function (numSteps) {
this.value = this._clamp((this.value || 0) + this.step * numSteps, this.min, this.max);
};
/**
* Calculate the new value from the new physical location. The value will always be snapped.
* @param {?} pos
* @return {?}
*/
MatSlider.prototype._updateValueFromPosition = /**
* Calculate the new value from the new physical location. The value will always be snapped.
* @param {?} pos
* @return {?}
*/
function (pos) {
if (!this._sliderDimensions) {
return;
}
var /** @type {?} */ offset = this.vertical ? this._sliderDimensions.top : this._sliderDimensions.left;
var /** @type {?} */ size = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width;
var /** @type {?} */ posComponent = this.vertical ? pos.y : pos.x;
// The exact value is calculated from the event and used to find the closest snap value.
var /** @type {?} */ percent = this._clamp((posComponent - offset) / size);
if (this._invertMouseCoords) {
percent = 1 - percent;
}
var /** @type {?} */ exactValue = this._calculateValue(percent);
// This calculation finds the closest step by finding the closest whole number divisible by the
// step relative to the min.
var /** @type {?} */ closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;
// The value needs to snap to the min and max.
this.value = this._clamp(closestValue, this.min, this.max);
};
/**
* Emits a change event if the current value is different from the last emitted value.
* @return {?}
*/
MatSlider.prototype._emitChangeEvent = /**
* Emits a change event if the current value is different from the last emitted value.
* @return {?}
*/
function () {
this._controlValueAccessorChangeFn(this.value);
this.change.emit(this._createChangeEvent());
};
/**
* Emits an input event when the current value is different from the last emitted value.
* @return {?}
*/
MatSlider.prototype._emitInputEvent = /**
* Emits an input event when the current value is different from the last emitted value.
* @return {?}
*/
function () {
this.input.emit(this._createChangeEvent());
};
/**
* Updates the amount of space between ticks as a percentage of the width of the slider.
* @return {?}
*/
MatSlider.prototype._updateTickIntervalPercent = /**
* Updates the amount of space between ticks as a percentage of the width of the slider.
* @return {?}
*/
function () {
if (!this.tickInterval || !this._sliderDimensions) {
return;
}
if (this.tickInterval == 'auto') {
var /** @type {?} */ trackSize = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width;
var /** @type {?} */ pixelsPerStep = trackSize * this.step / (this.max - this.min);
var /** @type {?} */ stepsPerTick = Math.ceil(MIN_AUTO_TICK_SEPARATION / pixelsPerStep);
var /** @type {?} */ pixelsPerTick = stepsPerTick * this.step;
this._tickIntervalPercent = pixelsPerTick / trackSize;
}
else {
this._tickIntervalPercent = this.tickInterval * this.step / (this.max - this.min);
}
};
/**
* Creates a slider change object from the specified value.
* @param {?=} value
* @return {?}
*/
MatSlider.prototype._createChangeEvent = /**
* Creates a slider change object from the specified value.
* @param {?=} value
* @return {?}
*/
function (value) {
if (value === void 0) {
value = this.value;
}
var /** @type {?} */ event = new MatSliderChange();
event.source = this;
event.value = value;
return event;
};
/**
* Calculates the percentage of the slider that a value is.
* @param {?} value
* @return {?}
*/
MatSlider.prototype._calculatePercentage = /**
* Calculates the percentage of the slider that a value is.
* @param {?} value
* @return {?}
*/
function (value) {
return ((value || 0) - this.min) / (this.max - this.min);
};
/**
* Calculates the value a percentage of the slider corresponds to.
* @param {?} percentage
* @return {?}
*/
MatSlider.prototype._calculateValue = /**
* Calculates the value a percentage of the slider corresponds to.
* @param {?} percentage
* @return {?}
*/
function (percentage) {
return this.min + percentage * (this.max - this.min);
};
/**
* Return a number between two numbers.
* @param {?} value
* @param {?=} min
* @param {?=} max
* @return {?}
*/
MatSlider.prototype._clamp = /**
* Return a number between two numbers.
* @param {?} value
* @param {?=} min
* @param {?=} max
* @return {?}
*/
function (value, min, max) {
if (min === void 0) {
min = 0;
}
if (max === void 0) {
max = 1;
}
return Math.max(min, Math.min(value, max));
};
/**
* Get the bounding client rect of the slider track element.
* The track is used rather than the native element to ignore the extra space that the thumb can
* take up.
* @return {?}
*/
MatSlider.prototype._getSliderDimensions = /**
* Get the bounding client rect of the slider track element.
* The track is used rather than the native element to ignore the extra space that the thumb can
* take up.
* @return {?}
*/
function () {
return this._sliderWrapper ? this._sliderWrapper.nativeElement.getBoundingClientRect() : null;
};
/**
* Focuses the native element.
* Currently only used to allow a blur event to fire but will be used with keyboard input later.
* @return {?}
*/
MatSlider.prototype._focusHostElement = /**
* Focuses the native element.
* Currently only used to allow a blur event to fire but will be used with keyboard input later.
* @return {?}
*/
function () {
this._elementRef.nativeElement.focus();
};
/**
* Blurs the native element.
* @return {?}
*/
MatSlider.prototype._blurHostElement = /**
* Blurs the native element.
* @return {?}
*/
function () {
this._elementRef.nativeElement.blur();
};
/**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param value
*/
/**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
MatSlider.prototype.writeValue = /**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* Registers a callback to eb triggered when the value has changed.
* Implemented as part of ControlValueAccessor.
* @param fn Callback to be registered.
*/
/**
* Registers a callback to eb triggered when the value has changed.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
MatSlider.prototype.registerOnChange = /**
* Registers a callback to eb triggered when the value has changed.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
function (fn) {
this._controlValueAccessorChangeFn = fn;
};
/**
* Registers a callback to be triggered when the component is touched.
* Implemented as part of ControlValueAccessor.
* @param fn Callback to be registered.
*/
/**
* Registers a callback to be triggered when the component is touched.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
MatSlider.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the component is touched.
* Implemented as part of ControlValueAccessor.
* @param {?} fn Callback to be registered.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Sets whether the component should be disabled.
* Implemented as part of ControlValueAccessor.
* @param isDisabled
*/
/**
* Sets whether the component should be disabled.
* Implemented as part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
MatSlider.prototype.setDisabledState = /**
* Sets whether the component should be disabled.
* Implemented as part of ControlValueAccessor.
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
MatSlider.decorators = [
{ type: core.Component, args: [{ selector: 'mat-slider',
exportAs: 'matSlider',
providers: [MAT_SLIDER_VALUE_ACCESSOR],
host: {
'(focus)': '_onFocus()',
'(blur)': '_onBlur()',
'(click)': '_onClick($event)',
'(keydown)': '_onKeydown($event)',
'(keyup)': '_onKeyup()',
'(mouseenter)': '_onMouseenter()',
'(slide)': '_onSlide($event)',
'(slideend)': '_onSlideEnd()',
'(slidestart)': '_onSlideStart($event)',
'class': 'mat-slider',
'role': 'slider',
'[tabIndex]': 'tabIndex',
'[attr.aria-disabled]': 'disabled',
'[attr.aria-valuemax]': 'max',
'[attr.aria-valuemin]': 'min',
'[attr.aria-valuenow]': 'value',
'[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
'[class.mat-slider-disabled]': 'disabled',
'[class.mat-slider-has-ticks]': 'tickInterval',
'[class.mat-slider-horizontal]': '!vertical',
'[class.mat-slider-axis-inverted]': '_invertAxis',
'[class.mat-slider-sliding]': '_isSliding',
'[class.mat-slider-thumb-label-showing]': 'thumbLabel',
'[class.mat-slider-vertical]': 'vertical',
'[class.mat-slider-min-value]': '_isMinValue',
'[class.mat-slider-hide-last-tick]': 'disabled || _isMinValue && _thumbGap && _invertAxis',
},
template: "<div class=\"mat-slider-wrapper\" #sliderWrapper><div class=\"mat-slider-track-wrapper\"><div class=\"mat-slider-track-background\" [ngStyle]=\"_trackBackgroundStyles\"></div><div class=\"mat-slider-track-fill\" [ngStyle]=\"_trackFillStyles\"></div></div><div class=\"mat-slider-ticks-container\" [ngStyle]=\"_ticksContainerStyles\"><div class=\"mat-slider-ticks\" [ngStyle]=\"_ticksStyles\"></div></div><div class=\"mat-slider-thumb-container\" [ngStyle]=\"_thumbContainerStyles\"><div class=\"mat-slider-focus-ring\"></div><div class=\"mat-slider-thumb\"></div><div class=\"mat-slider-thumb-label\"><span class=\"mat-slider-thumb-label-text\">{{displayValue}}</span></div></div></div>",
styles: [".mat-slider{display:inline-block;position:relative;box-sizing:border-box;padding:8px;outline:0;vertical-align:middle}.mat-slider-wrapper{position:absolute}.mat-slider-track-wrapper{position:absolute;top:0;left:0;overflow:hidden}.mat-slider-track-fill{position:absolute;transform-origin:0 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-track-background{position:absolute;transform-origin:100% 100%;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-ticks-container{position:absolute;left:0;top:0;overflow:hidden}.mat-slider-ticks{background-repeat:repeat;background-clip:content-box;box-sizing:border-box;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-thumb-container{position:absolute;z-index:1;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-focus-ring{position:absolute;width:30px;height:30px;border-radius:50%;transform:scale(0);opacity:0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),opacity .4s cubic-bezier(.25,.8,.25,1)}.cdk-keyboard-focused .mat-slider-focus-ring,.cdk-program-focused .mat-slider-focus-ring{transform:scale(1);opacity:1}.mat-slider:not(.mat-slider-disabled) .mat-slider-thumb,.mat-slider:not(.mat-slider-disabled) .mat-slider-thumb-label{cursor:-webkit-grab;cursor:grab}.mat-slider-sliding:not(.mat-slider-disabled) .mat-slider-thumb,.mat-slider-sliding:not(.mat-slider-disabled) .mat-slider-thumb-label,.mat-slider:not(.mat-slider-disabled) .mat-slider-thumb-label:active,.mat-slider:not(.mat-slider-disabled) .mat-slider-thumb:active{cursor:-webkit-grabbing;cursor:grabbing}.mat-slider-thumb{position:absolute;right:-10px;bottom:-10px;box-sizing:border-box;width:20px;height:20px;border:3px solid transparent;border-radius:50%;transform:scale(.7);transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),border-color .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-thumb-label{display:none;align-items:center;justify-content:center;position:absolute;width:28px;height:28px;border-radius:50%;transition:transform .4s cubic-bezier(.25,.8,.25,1),border-radius .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-thumb-label-text{z-index:1;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-sliding .mat-slider-thumb-container,.mat-slider-sliding .mat-slider-track-background,.mat-slider-sliding .mat-slider-track-fill{transition-duration:0s}.mat-slider-has-ticks .mat-slider-wrapper::after{content:'';position:absolute;border-width:0;border-style:solid;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mat-slider-has-ticks.cdk-focused:not(.mat-slider-hide-last-tick) .mat-slider-wrapper::after,.mat-slider-has-ticks:hover:not(.mat-slider-hide-last-tick) .mat-slider-wrapper::after{opacity:1}.mat-slider-has-ticks.cdk-focused:not(.mat-slider-disabled) .mat-slider-ticks,.mat-slider-has-ticks:hover:not(.mat-slider-disabled) .mat-slider-ticks{opacity:1}.mat-slider-thumb-label-showing .mat-slider-focus-ring{transform:scale(0);opacity:0}.mat-slider-thumb-label-showing .mat-slider-thumb-label{display:flex}.mat-slider-axis-inverted .mat-slider-track-fill{transform-origin:100% 100%}.mat-slider-axis-inverted .mat-slider-track-background{transform-origin:0 0}.mat-slider:not(.mat-slider-disabled).cdk-focused.mat-slider-thumb-label-showing .mat-slider-thumb{transform:scale(0)}.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label{border-radius:50% 50% 0}.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label-text{opacity:1}.mat-slider:not(.mat-slider-disabled).cdk-mouse-focused .mat-slider-thumb,.mat-slider:not(.mat-slider-disabled).cdk-program-focused .mat-slider-thumb,.mat-slider:not(.mat-slider-disabled).cdk-touch-focused .mat-slider-thumb{border-width:2px;transform:scale(1)}.mat-slider-disabled .mat-slider-focus-ring{transform:scale(0);opacity:0}.mat-slider-disabled .mat-slider-thumb{border-width:4px;transform:scale(.5)}.mat-slider-disabled .mat-slider-thumb-label{display:none}.mat-slider-horizontal{height:48px;min-width:128px}.mat-slider-horizontal .mat-slider-wrapper{height:2px;top:23px;left:8px;right:8px}.mat-slider-horizontal .mat-slider-wrapper::after{height:2px;border-left-width:2px;right:0;top:0}.mat-slider-horizontal .mat-slider-track-wrapper{height:2px;width:100%}.mat-slider-horizontal .mat-slider-track-fill{height:2px;width:100%;transform:scaleX(0)}.mat-slider-horizontal .mat-slider-track-background{height:2px;width:100%;transform:scaleX(1)}.mat-slider-horizontal .mat-slider-ticks-container{height:2px;width:100%}@media screen and (-ms-high-contrast:active){.mat-slider-horizontal .mat-slider-ticks-container{height:0;outline:solid 2px;top:1px}}.mat-slider-horizontal .mat-slider-ticks{height:2px;width:100%}.mat-slider-horizontal .mat-slider-thumb-container{width:100%;height:0;top:50%}.mat-slider-horizontal .mat-slider-focus-ring{top:-15px;right:-15px}.mat-slider-horizontal .mat-slider-thumb-label{right:-14px;top:-40px;transform:translateY(26px) scale(.01) rotate(45deg)}.mat-slider-horizontal .mat-slider-thumb-label-text{transform:rotate(-45deg)}.mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(45deg)}.mat-slider-vertical{width:48px;min-height:128px}.mat-slider-vertical .mat-slider-wrapper{width:2px;top:8px;bottom:8px;left:23px}.mat-slider-vertical .mat-slider-wrapper::after{width:2px;border-top-width:2px;bottom:0;left:0}.mat-slider-vertical .mat-slider-track-wrapper{height:100%;width:2px}.mat-slider-vertical .mat-slider-track-fill{height:100%;width:2px;transform:scaleY(0)}.mat-slider-vertical .mat-slider-track-background{height:100%;width:2px;transform:scaleY(1)}.mat-slider-vertical .mat-slider-ticks-container{width:2px;height:100%}@media screen and (-ms-high-contrast:active){.mat-slider-vertical .mat-slider-ticks-container{width:0;outline:solid 2px;left:1px}}.mat-slider-vertical .mat-slider-focus-ring{bottom:-15px;left:-15px}.mat-slider-vertical .mat-slider-ticks{width:2px;height:100%}.mat-slider-vertical .mat-slider-thumb-container{height:100%;width:0;left:50%}.mat-slider-vertical .mat-slider-thumb{-webkit-backface-visibility:hidden;backface-visibility:hidden}.mat-slider-vertical .mat-slider-thumb-label{bottom:-14px;left:-40px;transform:translateX(26px) scale(.01) rotate(-45deg)}.mat-slider-vertical .mat-slider-thumb-label-text{transform:rotate(45deg)}.mat-slider-vertical.cdk-focused .mat-slider-thumb-label{transform:rotate(-45deg)}[dir=rtl] .mat-slider-wrapper::after{left:0;right:auto}[dir=rtl] .mat-slider-horizontal .mat-slider-track-fill{transform-origin:100% 100%}[dir=rtl] .mat-slider-horizontal .mat-slider-track-background{transform-origin:0 0}[dir=rtl] .mat-slider-horizontal.mat-slider-axis-inverted .mat-slider-track-fill{transform-origin:0 0}[dir=rtl] .mat-slider-horizontal.mat-slider-axis-inverted .mat-slider-track-background{transform-origin:100% 100%}"],
inputs: ['disabled', 'color', 'tabIndex'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatSlider.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: a11y.FocusMonitor, },
{ type: core.ChangeDetectorRef, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: undefined, decorators: [{ type: core.Attribute, args: ['tabindex',] },] },
];
};
MatSlider.propDecorators = {
"invert": [{ type: core.Input },],
"max": [{ type: core.Input },],
"min": [{ type: core.Input },],
"step": [{ type: core.Input },],
"thumbLabel": [{ type: core.Input },],
"_thumbLabelDeprecated": [{ type: core.Input, args: ['thumb-label',] },],
"tickInterval": [{ type: core.Input },],
"_tickIntervalDeprecated": [{ type: core.Input, args: ['tick-interval',] },],
"value": [{ type: core.Input },],
"vertical": [{ type: core.Input },],
"change": [{ type: core.Output },],
"input": [{ type: core.Output },],
"_sliderWrapper": [{ type: core.ViewChild, args: ['sliderWrapper',] },],
};
return MatSlider;
}(_MatSliderMixinBase));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Event that is emitted when a snack bar is dismissed.
* @record
*/
/**
* Reference to a snack bar dispatched from the snack bar service.
*/
var MatSnackBarRef = (function () {
function MatSnackBarRef(containerInstance, _overlayRef) {
var _this = this;
this._overlayRef = _overlayRef;
/**
* Subject for notifying the user that the snack bar has been dismissed.
*/
this._afterDismissed = new Subject.Subject();
/**
* Subject for notifying the user that the snack bar has opened and appeared.
*/
this._afterOpened = new Subject.Subject();
/**
* Subject for notifying the user that the snack bar action was called.
*/
this._onAction = new Subject.Subject();
/**
* Whether the snack bar was dismissed using the action button.
*/
this._dismissedByAction = false;
this.containerInstance = containerInstance;
// Dismiss snackbar on action.
this.onAction().subscribe(function () { return _this.dismiss(); });
containerInstance._onExit.subscribe(function () { return _this._finishDismiss(); });
}
/** Dismisses the snack bar. */
/**
* Dismisses the snack bar.
* @return {?}
*/
MatSnackBarRef.prototype.dismiss = /**
* Dismisses the snack bar.
* @return {?}
*/
function () {
if (!this._afterDismissed.closed) {
this.containerInstance.exit();
}
clearTimeout(this._durationTimeoutId);
};
/** Marks the snackbar action clicked. */
/**
* Marks the snackbar action clicked.
* @return {?}
*/
MatSnackBarRef.prototype.dismissWithAction = /**
* Marks the snackbar action clicked.
* @return {?}
*/
function () {
if (!this._onAction.closed) {
this._dismissedByAction = true;
this._onAction.next();
this._onAction.complete();
}
};
/**
* Marks the snackbar action clicked.
* @deprecated Use `dismissWithAction` instead.
* @deletion-target 7.0.0
*/
/**
* Marks the snackbar action clicked.
* @deprecated Use `dismissWithAction` instead.
* \@deletion-target 7.0.0
* @return {?}
*/
MatSnackBarRef.prototype.closeWithAction = /**
* Marks the snackbar action clicked.
* @deprecated Use `dismissWithAction` instead.
* \@deletion-target 7.0.0
* @return {?}
*/
function () {
this.dismissWithAction();
};
/** Dismisses the snack bar after some duration */
/**
* Dismisses the snack bar after some duration
* @param {?} duration
* @return {?}
*/
MatSnackBarRef.prototype._dismissAfter = /**
* Dismisses the snack bar after some duration
* @param {?} duration
* @return {?}
*/
function (duration) {
var _this = this;
this._durationTimeoutId = setTimeout(function () { return _this.dismiss(); }, duration);
};
/** Marks the snackbar as opened */
/**
* Marks the snackbar as opened
* @return {?}
*/
MatSnackBarRef.prototype._open = /**
* Marks the snackbar as opened
* @return {?}
*/
function () {
if (!this._afterOpened.closed) {
this._afterOpened.next();
this._afterOpened.complete();
}
};
/**
* Cleans up the DOM after closing.
* @return {?}
*/
MatSnackBarRef.prototype._finishDismiss = /**
* Cleans up the DOM after closing.
* @return {?}
*/
function () {
this._overlayRef.dispose();
if (!this._onAction.closed) {
this._onAction.complete();
}
this._afterDismissed.next({ dismissedByAction: this._dismissedByAction });
this._afterDismissed.complete();
this._dismissedByAction = false;
};
/** Gets an observable that is notified when the snack bar is finished closing. */
/**
* Gets an observable that is notified when the snack bar is finished closing.
* @return {?}
*/
MatSnackBarRef.prototype.afterDismissed = /**
* Gets an observable that is notified when the snack bar is finished closing.
* @return {?}
*/
function () {
return this._afterDismissed.asObservable();
};
/** Gets an observable that is notified when the snack bar has opened and appeared. */
/**
* Gets an observable that is notified when the snack bar has opened and appeared.
* @return {?}
*/
MatSnackBarRef.prototype.afterOpened = /**
* Gets an observable that is notified when the snack bar has opened and appeared.
* @return {?}
*/
function () {
return this.containerInstance._onEnter;
};
/** Gets an observable that is notified when the snack bar action is called. */
/**
* Gets an observable that is notified when the snack bar action is called.
* @return {?}
*/
MatSnackBarRef.prototype.onAction = /**
* Gets an observable that is notified when the snack bar action is called.
* @return {?}
*/
function () {
return this._onAction.asObservable();
};
return MatSnackBarRef;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Injection token that can be used to access the data that was passed in to a snack bar.
*/
var MAT_SNACK_BAR_DATA = new core.InjectionToken('MatSnackBarData');
/**
* Configuration used when opening a snack-bar.
*/
var MatSnackBarConfig = (function () {
function MatSnackBarConfig() {
/**
* The politeness level for the MatAriaLiveAnnouncer announcement.
*/
this.politeness = 'assertive';
/**
* Message to be announced by the MatAriaLiveAnnouncer
*/
this.announcementMessage = '';
/**
* The length of time in milliseconds to wait before automatically dismissing the snack bar.
*/
this.duration = 0;
/**
* Text layout direction for the snack bar.
*/
this.direction = 'ltr';
/**
* Data being injected into the child component.
*/
this.data = null;
/**
* The horizontal position to place the snack bar.
*/
this.horizontalPosition = 'center';
/**
* The vertical position to place the snack bar.
*/
this.verticalPosition = 'bottom';
}
return MatSnackBarConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var SHOW_ANIMATION = AnimationDurations.ENTERING + " " + AnimationCurves.DECELERATION_CURVE;
/**
* \@docs-private
*/
var HIDE_ANIMATION = AnimationDurations.EXITING + " " + AnimationCurves.ACCELERATION_CURVE;
/**
* Animations used by the Material snack bar.
*/
var matSnackBarAnimations = {
/** Animation that slides the dialog in and out of view and fades the opacity. */
contentFade: animations.trigger('contentFade', [
animations.transition(':enter', [
animations.style({ opacity: '0' }),
animations.animate(AnimationDurations.COMPLEX + " " + AnimationCurves.STANDARD_CURVE)
])
]),
/** Animation that shows and hides a snack bar. */
snackBarState: animations.trigger('state', [
animations.state('visible-top, visible-bottom', animations.style({ transform: 'translateY(0%)' })),
animations.transition('visible-top => hidden-top, visible-bottom => hidden-bottom', animations.animate(HIDE_ANIMATION)),
animations.transition('void => visible-top, void => visible-bottom', animations.animate(SHOW_ANIMATION)),
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* A component used to open as the default snack bar, matching material spec.
* This should only be used internally by the snack bar service.
*/
var SimpleSnackBar = (function () {
function SimpleSnackBar(snackBarRef, data) {
this.snackBarRef = snackBarRef;
this.data = data;
}
/** Performs the action on the snack bar. */
/**
* Performs the action on the snack bar.
* @return {?}
*/
SimpleSnackBar.prototype.action = /**
* Performs the action on the snack bar.
* @return {?}
*/
function () {
this.snackBarRef.dismissWithAction();
};
Object.defineProperty(SimpleSnackBar.prototype, "hasAction", {
/** If the action button should be shown. */
get: /**
* If the action button should be shown.
* @return {?}
*/ function () {
return !!this.data.action;
},
enumerable: true,
configurable: true
});
SimpleSnackBar.decorators = [
{ type: core.Component, args: [{ selector: 'simple-snack-bar',
template: "{{data.message}} <button class=\"mat-simple-snackbar-action\" *ngIf=\"hasAction\" (click)=\"action()\">{{data.action}}</button>",
styles: [".mat-simple-snackbar{display:flex;justify-content:space-between;line-height:20px;opacity:1}.mat-simple-snackbar-action{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;background:0 0;flex-shrink:0;margin-left:48px}[dir=rtl] .mat-simple-snackbar-action{margin-right:48px;margin-left:0}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
animations: [matSnackBarAnimations.contentFade],
host: {
'[@contentFade]': '',
'class': 'mat-simple-snackbar',
}
},] },
];
/** @nocollapse */
SimpleSnackBar.ctorParameters = function () {
return [
{ type: MatSnackBarRef, },
{ type: undefined, decorators: [{ type: core.Inject, args: [MAT_SNACK_BAR_DATA,] },] },
];
};
return SimpleSnackBar;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Internal component that wraps user-provided snack bar content.
* \@docs-private
*/
var MatSnackBarContainer = (function (_super) {
__extends(MatSnackBarContainer, _super);
function MatSnackBarContainer(_ngZone, _elementRef, _changeDetectorRef) {
var _this = _super.call(this) || this;
_this._ngZone = _ngZone;
_this._elementRef = _elementRef;
_this._changeDetectorRef = _changeDetectorRef;
/**
* Whether the component has been destroyed.
*/
_this._destroyed = false;
/**
* Subject for notifying that the snack bar has exited from view.
*/
_this._onExit = new Subject.Subject();
/**
* Subject for notifying that the snack bar has finished entering the view.
*/
_this._onEnter = new Subject.Subject();
/**
* The state of the snack bar animations.
*/
_this._animationState = 'void';
return _this;
}
/** Attach a component portal as content to this snack bar container. */
/**
* Attach a component portal as content to this snack bar container.
* @template T
* @param {?} portal
* @return {?}
*/
MatSnackBarContainer.prototype.attachComponentPortal = /**
* Attach a component portal as content to this snack bar container.
* @template T
* @param {?} portal
* @return {?}
*/
function (portal$$1) {
if (this._portalOutlet.hasAttached()) {
throw Error('Attempting to attach snack bar content after content is already attached');
}
var /** @type {?} */ element = this._elementRef.nativeElement;
if (this.snackBarConfig.panelClass || this.snackBarConfig.extraClasses) {
this._setCssClasses(this.snackBarConfig.panelClass);
this._setCssClasses(this.snackBarConfig.extraClasses);
}
if (this.snackBarConfig.horizontalPosition === 'center') {
element.classList.add('mat-snack-bar-center');
}
if (this.snackBarConfig.verticalPosition === 'top') {
element.classList.add('mat-snack-bar-top');
}
return this._portalOutlet.attachComponentPortal(portal$$1);
};
/** Attach a template portal as content to this snack bar container. */
/**
* Attach a template portal as content to this snack bar container.
* @return {?}
*/
MatSnackBarContainer.prototype.attachTemplatePortal = /**
* Attach a template portal as content to this snack bar container.
* @return {?}
*/
function () {
throw Error('Not yet implemented');
};
/** Handle end of animations, updating the state of the snackbar. */
/**
* Handle end of animations, updating the state of the snackbar.
* @param {?} event
* @return {?}
*/
MatSnackBarContainer.prototype.onAnimationEnd = /**
* Handle end of animations, updating the state of the snackbar.
* @param {?} event
* @return {?}
*/
function (event) {
var fromState = event.fromState, toState = event.toState;
if ((toState === 'void' && fromState !== 'void') || toState.startsWith('hidden')) {
this._completeExit();
}
if (toState.startsWith('visible')) {
// Note: we shouldn't use `this` inside the zone callback,
// because it can cause a memory leak.
var /** @type {?} */ onEnter_1 = this._onEnter;
this._ngZone.run(function () {
onEnter_1.next();
onEnter_1.complete();
});
}
};
/** Begin animation of snack bar entrance into view. */
/**
* Begin animation of snack bar entrance into view.
* @return {?}
*/
MatSnackBarContainer.prototype.enter = /**
* Begin animation of snack bar entrance into view.
* @return {?}
*/
function () {
if (!this._destroyed) {
this._animationState = "visible-" + this.snackBarConfig.verticalPosition;
this._changeDetectorRef.detectChanges();
}
};
/** Begin animation of the snack bar exiting from view. */
/**
* Begin animation of the snack bar exiting from view.
* @return {?}
*/
MatSnackBarContainer.prototype.exit = /**
* Begin animation of the snack bar exiting from view.
* @return {?}
*/
function () {
this._animationState = "hidden-" + this.snackBarConfig.verticalPosition;
return this._onExit;
};
/** Makes sure the exit callbacks have been invoked when the element is destroyed. */
/**
* Makes sure the exit callbacks have been invoked when the element is destroyed.
* @return {?}
*/
MatSnackBarContainer.prototype.ngOnDestroy = /**
* Makes sure the exit callbacks have been invoked when the element is destroyed.
* @return {?}
*/
function () {
this._destroyed = true;
this._completeExit();
};
/**
* Waits for the zone to settle before removing the element. Helps prevent
* errors where we end up removing an element which is in the middle of an animation.
* @return {?}
*/
MatSnackBarContainer.prototype._completeExit = /**
* Waits for the zone to settle before removing the element. Helps prevent
* errors where we end up removing an element which is in the middle of an animation.
* @return {?}
*/
function () {
var _this = this;
this._ngZone.onMicrotaskEmpty.asObservable().pipe(take_2(1)).subscribe(function () {
_this._onExit.next();
_this._onExit.complete();
});
};
/**
* Applies the user-specified list of CSS classes to the element.
* @param {?} classList
* @return {?}
*/
MatSnackBarContainer.prototype._setCssClasses = /**
* Applies the user-specified list of CSS classes to the element.
* @param {?} classList
* @return {?}
*/
function (classList) {
if (!classList) {
return;
}
var /** @type {?} */ element = this._elementRef.nativeElement;
if (Array.isArray(classList)) {
// Note that we can't use a spread here, because IE doesn't support multiple arguments.
classList.forEach(function (cssClass) { return element.classList.add(cssClass); });
}
else {
element.classList.add(classList);
}
};
MatSnackBarContainer.decorators = [
{ type: core.Component, args: [{ selector: 'snack-bar-container',
template: "<ng-template cdkPortalOutlet></ng-template>",
styles: [".mat-snack-bar-container{border-radius:2px;box-sizing:border-box;display:block;margin:24px;max-width:568px;min-width:288px;padding:14px 24px;transform:translateY(100%) translateY(24px)}.mat-snack-bar-container.mat-snack-bar-center{margin:0;transform:translateY(100%)}.mat-snack-bar-container.mat-snack-bar-top{transform:translateY(-100%) translateY(-24px)}.mat-snack-bar-container.mat-snack-bar-top.mat-snack-bar-center{transform:translateY(-100%)}@media screen and (-ms-high-contrast:active){.mat-snack-bar-container{border:solid 1px}}.mat-snack-bar-handset{width:100%}.mat-snack-bar-handset .mat-snack-bar-container{margin:0;max-width:inherit;width:100%}"],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
animations: [matSnackBarAnimations.snackBarState],
host: {
'role': 'alert',
'class': 'mat-snack-bar-container',
'[@state]': '_animationState',
'(@state.done)': 'onAnimationEnd($event)'
},
},] },
];
/** @nocollapse */
MatSnackBarContainer.ctorParameters = function () {
return [
{ type: core.NgZone, },
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
];
};
MatSnackBarContainer.propDecorators = {
"_portalOutlet": [{ type: core.ViewChild, args: [portal.CdkPortalOutlet,] },],
};
return MatSnackBarContainer;
}(portal.BasePortalOutlet));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Service to dispatch Material Design snack bar messages.
*/
var MatSnackBar = (function () {
function MatSnackBar(_overlay, _live, _injector, _breakpointObserver, _parentSnackBar) {
this._overlay = _overlay;
this._live = _live;
this._injector = _injector;
this._breakpointObserver = _breakpointObserver;
this._parentSnackBar = _parentSnackBar;
/**
* Reference to the current snack bar in the view *at this level* (in the Angular injector tree).
* If there is a parent snack-bar service, all operations should delegate to that parent
* via `_openedSnackBarRef`.
*/
this._snackBarRefAtThisLevel = null;
}
Object.defineProperty(MatSnackBar.prototype, "_openedSnackBarRef", {
/** Reference to the currently opened snackbar at *any* level. */
get: /**
* Reference to the currently opened snackbar at *any* level.
* @return {?}
*/ function () {
var /** @type {?} */ parent = this._parentSnackBar;
return parent ? parent._openedSnackBarRef : this._snackBarRefAtThisLevel;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (this._parentSnackBar) {
this._parentSnackBar._openedSnackBarRef = value;
}
else {
this._snackBarRefAtThisLevel = value;
}
},
enumerable: true,
configurable: true
});
/**
* Creates and dispatches a snack bar with a custom component for the content, removing any
* currently opened snack bars.
*
* @param component Component to be instantiated.
* @param config Extra configuration for the snack bar.
*/
/**
* Creates and dispatches a snack bar with a custom component for the content, removing any
* currently opened snack bars.
*
* @template T
* @param {?} component Component to be instantiated.
* @param {?=} config Extra configuration for the snack bar.
* @return {?}
*/
MatSnackBar.prototype.openFromComponent = /**
* Creates and dispatches a snack bar with a custom component for the content, removing any
* currently opened snack bars.
*
* @template T
* @param {?} component Component to be instantiated.
* @param {?=} config Extra configuration for the snack bar.
* @return {?}
*/
function (component, config) {
var _this = this;
var /** @type {?} */ _config = _applyConfigDefaults$1(config);
var /** @type {?} */ snackBarRef = this._attach(component, _config);
// When the snackbar is dismissed, clear the reference to it.
snackBarRef.afterDismissed().subscribe(function () {
// Clear the snackbar ref if it hasn't already been replaced by a newer snackbar.
if (_this._openedSnackBarRef == snackBarRef) {
_this._openedSnackBarRef = null;
}
});
if (this._openedSnackBarRef) {
// If a snack bar is already in view, dismiss it and enter the
// new snack bar after exit animation is complete.
this._openedSnackBarRef.afterDismissed().subscribe(function () {
snackBarRef.containerInstance.enter();
});
this._openedSnackBarRef.dismiss();
}
else {
// If no snack bar is in view, enter the new snack bar.
snackBarRef.containerInstance.enter();
}
// If a dismiss timeout is provided, set up dismiss based on after the snackbar is opened.
if (_config.duration && _config.duration > 0) {
snackBarRef.afterOpened().subscribe(function () { return snackBarRef._dismissAfter(/** @type {?} */ ((((_config)).duration))); });
}
if (_config.announcementMessage) {
this._live.announce(_config.announcementMessage, _config.politeness);
}
this._openedSnackBarRef = snackBarRef;
return this._openedSnackBarRef;
};
/**
* Opens a snackbar with a message and an optional action.
* @param message The message to show in the snackbar.
* @param action The label for the snackbar action.
* @param config Additional configuration options for the snackbar.
*/
/**
* Opens a snackbar with a message and an optional action.
* @param {?} message The message to show in the snackbar.
* @param {?=} action The label for the snackbar action.
* @param {?=} config Additional configuration options for the snackbar.
* @return {?}
*/
MatSnackBar.prototype.open = /**
* Opens a snackbar with a message and an optional action.
* @param {?} message The message to show in the snackbar.
* @param {?=} action The label for the snackbar action.
* @param {?=} config Additional configuration options for the snackbar.
* @return {?}
*/
function (message, action, config) {
if (action === void 0) {
action = '';
}
var /** @type {?} */ _config = _applyConfigDefaults$1(config);
// Since the user doesn't have access to the component, we can
// override the data to pass in our own message and action.
_config.data = { message: message, action: action };
_config.announcementMessage = message;
return this.openFromComponent(SimpleSnackBar, _config);
};
/**
* Dismisses the currently-visible snack bar.
*/
/**
* Dismisses the currently-visible snack bar.
* @return {?}
*/
MatSnackBar.prototype.dismiss = /**
* Dismisses the currently-visible snack bar.
* @return {?}
*/
function () {
if (this._openedSnackBarRef) {
this._openedSnackBarRef.dismiss();
}
};
/**
* Attaches the snack bar container component to the overlay.
* @param {?} overlayRef
* @param {?} config
* @return {?}
*/
MatSnackBar.prototype._attachSnackBarContainer = /**
* Attaches the snack bar container component to the overlay.
* @param {?} overlayRef
* @param {?} config
* @return {?}
*/
function (overlayRef, config) {
var /** @type {?} */ containerPortal = new portal.ComponentPortal(MatSnackBarContainer, config.viewContainerRef);
var /** @type {?} */ containerRef = overlayRef.attach(containerPortal);
containerRef.instance.snackBarConfig = config;
return containerRef.instance;
};
/**
* Places a new component as the content of the snack bar container.
* @template T
* @param {?} component
* @param {?} config
* @return {?}
*/
MatSnackBar.prototype._attach = /**
* Places a new component as the content of the snack bar container.
* @template T
* @param {?} component
* @param {?} config
* @return {?}
*/
function (component, config) {
var /** @type {?} */ overlayRef = this._createOverlay(config);
var /** @type {?} */ container = this._attachSnackBarContainer(overlayRef, config);
var /** @type {?} */ snackBarRef = new MatSnackBarRef(container, overlayRef);
var /** @type {?} */ injector = this._createInjector(config, snackBarRef);
var /** @type {?} */ portal$$1 = new portal.ComponentPortal(component, undefined, injector);
var /** @type {?} */ contentRef = container.attachComponentPortal(portal$$1);
// We can't pass this via the injector, because the injector is created earlier.
snackBarRef.instance = contentRef.instance;
// Subscribe to the breakpoint observer and attach the mat-snack-bar-handset class as
// appropriate. This class is applied to the overlay element because the overlay must expand to
// fill the width of the screen for full width snackbars.
this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntil_2(overlayRef.detachments().pipe(take_2(1)))).subscribe(function (state$$1) {
if (state$$1.matches) {
overlayRef.overlayElement.classList.add('mat-snack-bar-handset');
}
else {
overlayRef.overlayElement.classList.remove('mat-snack-bar-handset');
}
});
return snackBarRef;
};
/**
* Creates a new overlay and places it in the correct location.
* @param {?} config The user-specified snack bar config.
* @return {?}
*/
MatSnackBar.prototype._createOverlay = /**
* Creates a new overlay and places it in the correct location.
* @param {?} config The user-specified snack bar config.
* @return {?}
*/
function (config) {
var /** @type {?} */ overlayConfig = new overlay.OverlayConfig();
overlayConfig.direction = config.direction;
var /** @type {?} */ positionStrategy = this._overlay.position().global();
// Set horizontal position.
var /** @type {?} */ isRtl = config.direction === 'rtl';
var /** @type {?} */ isLeft = (config.horizontalPosition === 'left' ||
(config.horizontalPosition === 'start' && !isRtl) ||
(config.horizontalPosition === 'end' && isRtl));
var /** @type {?} */ isRight = !isLeft && config.horizontalPosition !== 'center';
if (isLeft) {
positionStrategy.left('0');
}
else if (isRight) {
positionStrategy.right('0');
}
else {
positionStrategy.centerHorizontally();
}
// Set horizontal position.
if (config.verticalPosition === 'top') {
positionStrategy.top('0');
}
else {
positionStrategy.bottom('0');
}
overlayConfig.positionStrategy = positionStrategy;
return this._overlay.create(overlayConfig);
};
/**
* Creates an injector to be used inside of a snack bar component.
* @template T
* @param {?} config Config that was used to create the snack bar.
* @param {?} snackBarRef Reference to the snack bar.
* @return {?}
*/
MatSnackBar.prototype._createInjector = /**
* Creates an injector to be used inside of a snack bar component.
* @template T
* @param {?} config Config that was used to create the snack bar.
* @param {?} snackBarRef Reference to the snack bar.
* @return {?}
*/
function (config, snackBarRef) {
var /** @type {?} */ userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
var /** @type {?} */ injectionTokens = new WeakMap();
injectionTokens.set(MatSnackBarRef, snackBarRef);
injectionTokens.set(MAT_SNACK_BAR_DATA, config.data);
return new portal.PortalInjector(userInjector || this._injector, injectionTokens);
};
MatSnackBar.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatSnackBar.ctorParameters = function () {
return [
{ type: overlay.Overlay, },
{ type: a11y.LiveAnnouncer, },
{ type: core.Injector, },
{ type: BreakpointObserver, },
{ type: MatSnackBar, decorators: [{ type: core.Optional }, { type: core.SkipSelf },] },
];
};
return MatSnackBar;
}());
/**
* Applies default options to the snackbar config.
* @param {?=} config The configuration to which the defaults will be applied.
* @return {?} The new configuration object with defaults applied.
*/
function _applyConfigDefaults$1(config) {
return __assign({}, new MatSnackBarConfig(), config);
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
* @param {?} id
* @return {?}
*/
function getSortDuplicateSortableIdError(id) {
return Error("Cannot have two MatSortables with the same id (" + id + ").");
}
/**
* \@docs-private
* @return {?}
*/
function getSortHeaderNotContainedWithinSortError() {
return Error("MatSortHeader must be placed within a parent element with the MatSort directive.");
}
/**
* \@docs-private
* @return {?}
*/
function getSortHeaderMissingIdError() {
return Error("MatSortHeader must be provided with a unique id.");
}
/**
* \@docs-private
* @param {?} direction
* @return {?}
*/
function getSortInvalidDirectionError(direction) {
return Error(direction + " is not a valid sort direction ('asc' or 'desc').");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Interface for a directive that holds sorting state consumed by `MatSortHeader`.
* @record
*/
/**
* The current sort state.
* @record
*/
/**
* \@docs-private
*/
var MatSortBase = (function () {
function MatSortBase() {
}
return MatSortBase;
}());
var _MatSortMixinBase = mixinDisabled(MatSortBase);
/**
* Container for MatSortables to manage the sort state and provide default sort parameters.
*/
var MatSort = (function (_super) {
__extends(MatSort, _super);
function MatSort() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/**
* Collection of all registered sortables that this directive manages.
*/
_this.sortables = new Map();
/**
* Used to notify any child components listening to state changes.
*/
_this._stateChanges = new Subject.Subject();
/**
* The direction to set when an MatSortable is initially sorted.
* May be overriden by the MatSortable's sort start.
*/
_this.start = 'asc';
_this._direction = '';
/**
* Event emitted when the user changes either the active sort or sort direction.
*/
_this.sortChange = new core.EventEmitter();
return _this;
}
Object.defineProperty(MatSort.prototype, "direction", {
get: /**
* The sort direction of the currently active MatSortable.
* @return {?}
*/ function () { return this._direction; },
set: /**
* @param {?} direction
* @return {?}
*/ function (direction) {
if (core.isDevMode() && direction && direction !== 'asc' && direction !== 'desc') {
throw getSortInvalidDirectionError(direction);
}
this._direction = direction;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatSort.prototype, "disableClear", {
get: /**
* Whether to disable the user from clearing the sort by finishing the sort direction cycle.
* May be overriden by the MatSortable's disable clear input.
* @return {?}
*/ function () { return this._disableClear; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) { this._disableClear = coercion.coerceBooleanProperty(v); },
enumerable: true,
configurable: true
});
/**
* Register function to be used by the contained MatSortables. Adds the MatSortable to the
* collection of MatSortables.
*/
/**
* Register function to be used by the contained MatSortables. Adds the MatSortable to the
* collection of MatSortables.
* @param {?} sortable
* @return {?}
*/
MatSort.prototype.register = /**
* Register function to be used by the contained MatSortables. Adds the MatSortable to the
* collection of MatSortables.
* @param {?} sortable
* @return {?}
*/
function (sortable) {
if (!sortable.id) {
throw getSortHeaderMissingIdError();
}
if (this.sortables.has(sortable.id)) {
throw getSortDuplicateSortableIdError(sortable.id);
}
this.sortables.set(sortable.id, sortable);
};
/**
* Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
* collection of contained MatSortables.
*/
/**
* Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
* collection of contained MatSortables.
* @param {?} sortable
* @return {?}
*/
MatSort.prototype.deregister = /**
* Unregister function to be used by the contained MatSortables. Removes the MatSortable from the
* collection of contained MatSortables.
* @param {?} sortable
* @return {?}
*/
function (sortable) {
this.sortables.delete(sortable.id);
};
/** Sets the active sort id and determines the new sort direction. */
/**
* Sets the active sort id and determines the new sort direction.
* @param {?} sortable
* @return {?}
*/
MatSort.prototype.sort = /**
* Sets the active sort id and determines the new sort direction.
* @param {?} sortable
* @return {?}
*/
function (sortable) {
if (this.active != sortable.id) {
this.active = sortable.id;
this.direction = sortable.start ? sortable.start : this.start;
}
else {
this.direction = this.getNextSortDirection(sortable);
}
this.sortChange.emit({ active: this.active, direction: this.direction });
};
/** Returns the next sort direction of the active sortable, checking for potential overrides. */
/**
* Returns the next sort direction of the active sortable, checking for potential overrides.
* @param {?} sortable
* @return {?}
*/
MatSort.prototype.getNextSortDirection = /**
* Returns the next sort direction of the active sortable, checking for potential overrides.
* @param {?} sortable
* @return {?}
*/
function (sortable) {
if (!sortable) {
return '';
}
// Get the sort direction cycle with the potential sortable overrides.
var /** @type {?} */ disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear;
var /** @type {?} */ sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear);
// Get and return the next direction in the cycle
var /** @type {?} */ nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1;
if (nextDirectionIndex >= sortDirectionCycle.length) {
nextDirectionIndex = 0;
}
return sortDirectionCycle[nextDirectionIndex];
};
/**
* @return {?}
*/
MatSort.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this._stateChanges.next();
};
/**
* @return {?}
*/
MatSort.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._stateChanges.complete();
};
MatSort.decorators = [
{ type: core.Directive, args: [{
selector: '[matSort]',
exportAs: 'matSort',
inputs: ['disabled: matSortDisabled']
},] },
];
/** @nocollapse */
MatSort.ctorParameters = function () { return []; };
MatSort.propDecorators = {
"active": [{ type: core.Input, args: ['matSortActive',] },],
"start": [{ type: core.Input, args: ['matSortStart',] },],
"direction": [{ type: core.Input, args: ['matSortDirection',] },],
"disableClear": [{ type: core.Input, args: ['matSortDisableClear',] },],
"sortChange": [{ type: core.Output, args: ['matSortChange',] },],
};
return MatSort;
}(_MatSortMixinBase));
/**
* Returns the sort direction cycle to use given the provided parameters of order and clear.
* @param {?} start
* @param {?} disableClear
* @return {?}
*/
function getSortDirectionCycle(start, disableClear) {
var /** @type {?} */ sortOrder = ['asc', 'desc'];
if (start == 'desc') {
sortOrder.reverse();
}
if (!disableClear) {
sortOrder.push('');
}
return sortOrder;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
* include it in a custom provider.
*/
var MatSortHeaderIntl = (function () {
function MatSortHeaderIntl() {
/**
* Stream that emits whenever the labels here are changed. Use this to notify
* components if the labels have changed after initialization.
*/
this.changes = new Subject.Subject();
/**
* ARIA label for the sorting button.
*/
this.sortButtonLabel = function (id) {
return "Change sorting for " + id;
};
/**
* A label to describe the current sort (visible only to screenreaders).
*/
this.sortDescriptionLabel = function (id, direction) {
return "Sorted by " + id + " " + (direction == 'asc' ? 'ascending' : 'descending');
};
}
MatSortHeaderIntl.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatSortHeaderIntl.ctorParameters = function () { return []; };
return MatSortHeaderIntl;
}());
/**
* \@docs-private
* @param {?} parentIntl
* @return {?}
*/
function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) {
return parentIntl || new MatSortHeaderIntl();
}
/**
* \@docs-private
*/
var MAT_SORT_HEADER_INTL_PROVIDER = {
// If there is already an MatSortHeaderIntl available, use that. Otherwise, provide a new one.
provide: MatSortHeaderIntl,
deps: [[new core.Optional(), new core.SkipSelf(), MatSortHeaderIntl]],
useFactory: MAT_SORT_HEADER_INTL_PROVIDER_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' +
AnimationCurves.STANDARD_CURVE;
/**
* Animations used by MatSort.
*/
var matSortAnimations = {
/** Animation that moves the sort indicator. */
indicator: animations.trigger('indicator', [
animations.state('active-asc, asc', animations.style({ transform: 'translateY(0px)' })),
// 10px is the height of the sort indicator, minus the width of the pointers
animations.state('active-desc, desc', animations.style({ transform: 'translateY(10px)' })),
animations.transition('active-asc <=> active-desc', animations.animate(SORT_ANIMATION_TRANSITION))
]),
/** Animation that rotates the left pointer of the indicator based on the sorting direction. */
leftPointer: animations.trigger('leftPointer', [
animations.state('active-asc, asc', animations.style({ transform: 'rotate(-45deg)' })),
animations.state('active-desc, desc', animations.style({ transform: 'rotate(45deg)' })),
animations.transition('active-asc <=> active-desc', animations.animate(SORT_ANIMATION_TRANSITION))
]),
/** Animation that rotates the right pointer of the indicator based on the sorting direction. */
rightPointer: animations.trigger('rightPointer', [
animations.state('active-asc, asc', animations.style({ transform: 'rotate(45deg)' })),
animations.state('active-desc, desc', animations.style({ transform: 'rotate(-45deg)' })),
animations.transition('active-asc <=> active-desc', animations.animate(SORT_ANIMATION_TRANSITION))
]),
/** Animation that controls the arrow opacity. */
arrowOpacity: animations.trigger('arrowOpacity', [
animations.state('desc-to-active, asc-to-active, active', animations.style({ opacity: 1 })),
animations.state('desc-to-hint, asc-to-hint, hint', animations.style({ opacity: .54 })),
animations.state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc', animations.style({ opacity: 0 })),
// Transition between all states except for immediate transitions
animations.transition('* => asc, * => desc, * => active, * => hint', animations.animate('0ms')),
animations.transition('* <=> *', animations.animate(SORT_ANIMATION_TRANSITION))
]),
/**
* Animation for the translation of the arrow as a whole. States are separated into two
* groups: ones with animations and others that are immediate. Immediate states are asc, desc,
* peek, and active. The other states define a specific animation (source-to-destination)
* and are determined as a function of their prev user-perceived state and what the next state
* should be.
*/
arrowPosition: animations.trigger('arrowPosition', [
// Hidden Above => Hint Center
animations.transition('* => desc-to-hint, * => desc-to-active', animations.animate(SORT_ANIMATION_TRANSITION, animations.keyframes([
animations.style({ transform: 'translateY(-25%)' }),
animations.style({ transform: 'translateY(0)' })
]))),
// Hint Center => Hidden Below
animations.transition('* => hint-to-desc, * => active-to-desc', animations.animate(SORT_ANIMATION_TRANSITION, animations.keyframes([
animations.style({ transform: 'translateY(0)' }),
animations.style({ transform: 'translateY(25%)' })
]))),
// Hidden Below => Hint Center
animations.transition('* => asc-to-hint, * => asc-to-active', animations.animate(SORT_ANIMATION_TRANSITION, animations.keyframes([
animations.style({ transform: 'translateY(25%)' }),
animations.style({ transform: 'translateY(0)' })
]))),
// Hint Center => Hidden Above
animations.transition('* => hint-to-asc, * => active-to-asc', animations.animate(SORT_ANIMATION_TRANSITION, animations.keyframes([
animations.style({ transform: 'translateY(0)' }),
animations.style({ transform: 'translateY(-25%)' })
]))),
animations.state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', animations.style({ transform: 'translateY(0)' })),
animations.state('hint-to-desc, active-to-desc, desc', animations.style({ transform: 'translateY(-25%)' })),
animations.state('hint-to-asc, active-to-asc, asc', animations.style({ transform: 'translateY(25%)' })),
]),
/** Necessary trigger that calls animate on children animations. */
allowChildren: animations.trigger('allowChildren', [
animations.transition('* <=> *', [
animations.query('@*', animations.animateChild(), { optional: true })
])
]),
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatSortHeaderBase = (function () {
function MatSortHeaderBase() {
}
return MatSortHeaderBase;
}());
var _MatSortHeaderMixinBase = mixinDisabled(MatSortHeaderBase);
/**
* States describing the arrow's animated position (animating fromState to toState).
* If the fromState is not defined, there will be no animated transition to the toState.
* \@docs-private
* @record
*/
/**
* Applies sorting behavior (click to change sort) and styles to an element, including an
* arrow to display the current sort direction.
*
* Must be provided with an id and contained within a parent MatSort directive.
*
* If used on header cells in a CdkTable, it will automatically default its id from its containing
* column definition.
*/
var MatSortHeader = (function (_super) {
__extends(MatSortHeader, _super);
function MatSortHeader(_intl, changeDetectorRef, _sort, _cdkColumnDef) {
var _this = _super.call(this) || this;
_this._intl = _intl;
_this._sort = _sort;
_this._cdkColumnDef = _cdkColumnDef;
/**
* Flag set to true when the indicator should be displayed while the sort is not active. Used to
* provide an affordance that the header is sortable by showing on focus and hover.
*/
_this._showIndicatorHint = false;
/**
* The direction the arrow should be facing according to the current state.
*/
_this._arrowDirection = '';
/**
* Whether the view state animation should show the transition between the `from` and `to` states.
*/
_this._disableViewStateAnimation = false;
/**
* Sets the position of the arrow that displays when sorted.
*/
_this.arrowPosition = 'after';
if (!_sort) {
throw getSortHeaderNotContainedWithinSortError();
}
_this._rerenderSubscription = merge.merge(_sort.sortChange, _sort._stateChanges, _intl.changes)
.subscribe(function () {
if (_this._isSorted()) {
_this._updateArrowDirection();
}
// If this header was recently active and now no longer sorted, animate away the arrow.
if (!_this._isSorted() && _this._viewState && _this._viewState.toState === 'active') {
_this._disableViewStateAnimation = false;
_this._setAnimationTransitionState({ fromState: 'active', toState: _this._arrowDirection });
}
changeDetectorRef.markForCheck();
});
return _this;
}
Object.defineProperty(MatSortHeader.prototype, "disableClear", {
get: /**
* Overrides the disable clear value of the containing MatSort for this MatSortable.
* @return {?}
*/ function () { return this._disableClear; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) { this._disableClear = coercion.coerceBooleanProperty(v); },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatSortHeader.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (!this.id && this._cdkColumnDef) {
this.id = this._cdkColumnDef.name;
}
// Initialize the direction of the arrow and set the view state to be immediately that state.
this._updateArrowDirection();
this._setAnimationTransitionState({ toState: this._isSorted() ? 'active' : this._arrowDirection });
this._sort.register(this);
};
/**
* @return {?}
*/
MatSortHeader.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._sort.deregister(this);
this._rerenderSubscription.unsubscribe();
};
/**
* Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the
* user showing what the active sort will become. If set to false, the arrow will fade away.
*/
/**
* Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the
* user showing what the active sort will become. If set to false, the arrow will fade away.
* @param {?} visible
* @return {?}
*/
MatSortHeader.prototype._setIndicatorHintVisible = /**
* Sets the "hint" state such that the arrow will be semi-transparently displayed as a hint to the
* user showing what the active sort will become. If set to false, the arrow will fade away.
* @param {?} visible
* @return {?}
*/
function (visible) {
// No-op if the sort header is disabled - should not make the hint visible.
if (this._isDisabled() && visible) {
return;
}
this._showIndicatorHint = visible;
if (!this._isSorted()) {
this._updateArrowDirection();
if (this._showIndicatorHint) {
this._setAnimationTransitionState({ fromState: this._arrowDirection, toState: 'hint' });
}
else {
this._setAnimationTransitionState({ fromState: 'hint', toState: this._arrowDirection });
}
}
};
/**
* Sets the animation transition view state for the arrow's position and opacity. If the
* `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that
* no animation appears.
*/
/**
* Sets the animation transition view state for the arrow's position and opacity. If the
* `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that
* no animation appears.
* @param {?} viewState
* @return {?}
*/
MatSortHeader.prototype._setAnimationTransitionState = /**
* Sets the animation transition view state for the arrow's position and opacity. If the
* `disableViewStateAnimation` flag is set to true, the `fromState` will be ignored so that
* no animation appears.
* @param {?} viewState
* @return {?}
*/
function (viewState) {
this._viewState = viewState;
// If the animation for arrow position state (opacity/translation) should be disabled,
// remove the fromState so that it jumps right to the toState.
if (this._disableViewStateAnimation) {
this._viewState = { toState: viewState.toState };
}
};
/** Triggers the sort on this sort header and removes the indicator hint. */
/**
* Triggers the sort on this sort header and removes the indicator hint.
* @return {?}
*/
MatSortHeader.prototype._handleClick = /**
* Triggers the sort on this sort header and removes the indicator hint.
* @return {?}
*/
function () {
if (this._isDisabled()) {
return;
}
this._sort.sort(this);
// Do not show the animation if the header was already shown in the right position.
if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {
this._disableViewStateAnimation = true;
}
// If the arrow is now sorted, animate the arrow into place. Otherwise, animate it away into
// the direction it is facing.
var /** @type {?} */ viewState = this._isSorted() ?
{ fromState: this._arrowDirection, toState: 'active' } :
{ fromState: 'active', toState: this._arrowDirection };
this._setAnimationTransitionState(viewState);
this._showIndicatorHint = false;
};
/** Whether this MatSortHeader is currently sorted in either ascending or descending order. */
/**
* Whether this MatSortHeader is currently sorted in either ascending or descending order.
* @return {?}
*/
MatSortHeader.prototype._isSorted = /**
* Whether this MatSortHeader is currently sorted in either ascending or descending order.
* @return {?}
*/
function () {
return this._sort.active == this.id &&
(this._sort.direction === 'asc' || this._sort.direction === 'desc');
};
/** Returns the animation state for the arrow direction (indicator and pointers). */
/**
* Returns the animation state for the arrow direction (indicator and pointers).
* @return {?}
*/
MatSortHeader.prototype._getArrowDirectionState = /**
* Returns the animation state for the arrow direction (indicator and pointers).
* @return {?}
*/
function () {
return "" + (this._isSorted() ? 'active-' : '') + this._arrowDirection;
};
/** Returns the arrow position state (opacity, translation). */
/**
* Returns the arrow position state (opacity, translation).
* @return {?}
*/
MatSortHeader.prototype._getArrowViewState = /**
* Returns the arrow position state (opacity, translation).
* @return {?}
*/
function () {
var /** @type {?} */ fromState = this._viewState.fromState;
return (fromState ? fromState + "-to-" : '') + this._viewState.toState;
};
/**
* Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
* facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
* active sorted direction. The reason this is updated through a function is because the direction
* should only be changed at specific times - when deactivated but the hint is displayed and when
* the sort is active and the direction changes. Otherwise the arrow's direction should linger
* in cases such as the sort becoming deactivated but we want to animate the arrow away while
* preserving its direction, even though the next sort direction is actually different and should
* only be changed once the arrow displays again (hint or activation).
*/
/**
* Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
* facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
* active sorted direction. The reason this is updated through a function is because the direction
* should only be changed at specific times - when deactivated but the hint is displayed and when
* the sort is active and the direction changes. Otherwise the arrow's direction should linger
* in cases such as the sort becoming deactivated but we want to animate the arrow away while
* preserving its direction, even though the next sort direction is actually different and should
* only be changed once the arrow displays again (hint or activation).
* @return {?}
*/
MatSortHeader.prototype._updateArrowDirection = /**
* Updates the direction the arrow should be pointing. If it is not sorted, the arrow should be
* facing the start direction. Otherwise if it is sorted, the arrow should point in the currently
* active sorted direction. The reason this is updated through a function is because the direction
* should only be changed at specific times - when deactivated but the hint is displayed and when
* the sort is active and the direction changes. Otherwise the arrow's direction should linger
* in cases such as the sort becoming deactivated but we want to animate the arrow away while
* preserving its direction, even though the next sort direction is actually different and should
* only be changed once the arrow displays again (hint or activation).
* @return {?}
*/
function () {
this._arrowDirection = this._isSorted() ?
this._sort.direction :
(this.start || this._sort.start);
};
/**
* @return {?}
*/
MatSortHeader.prototype._isDisabled = /**
* @return {?}
*/
function () {
return this._sort.disabled || this.disabled;
};
MatSortHeader.decorators = [
{ type: core.Component, args: [{ selector: '[mat-sort-header]',
exportAs: 'matSortHeader',
template: "<div class=\"mat-sort-header-container\" [class.mat-sort-header-sorted]=\"_isSorted()\" [class.mat-sort-header-position-before]=\"arrowPosition == 'before'\"><button class=\"mat-sort-header-button\" type=\"button\" [attr.disabled]=\"_isDisabled() || null\" [attr.aria-label]=\"_intl.sortButtonLabel(id)\" (focus)=\"_setIndicatorHintVisible(true)\" (blur)=\"_setIndicatorHintVisible(false)\"><ng-content></ng-content></button><div class=\"mat-sort-header-arrow\" [@arrowOpacity]=\"_getArrowViewState()\" [@arrowPosition]=\"_getArrowViewState()\" [@allowChildren]=\"_getArrowDirectionState()\" (@arrowPosition.start)=\"_disableViewStateAnimation = true\" (@arrowPosition.done)=\"_disableViewStateAnimation = false\"><div class=\"mat-sort-header-stem\"></div><div class=\"mat-sort-header-indicator\" [@indicator]=\"_getArrowDirectionState()\"><div class=\"mat-sort-header-pointer-left\" [@leftPointer]=\"_getArrowDirectionState()\"></div><div class=\"mat-sort-header-pointer-right\" [@rightPointer]=\"_getArrowDirectionState()\"></div><div class=\"mat-sort-header-pointer-middle\"></div></div></div></div><span class=\"cdk-visually-hidden\" *ngIf=\"_isSorted()\"> {{_intl.sortDescriptionLabel(id, _sort.direction)}}</span>",
styles: [".mat-sort-header-container{display:flex;cursor:pointer}.mat-sort-header-disabled .mat-sort-header-container{cursor:default}.mat-sort-header-position-before{flex-direction:row-reverse}.mat-sort-header-button{border:none;background:0 0;display:flex;align-items:center;padding:0;cursor:inherit;outline:0;font:inherit;color:currentColor}.mat-sort-header-arrow{height:12px;width:12px;min-width:12px;margin:0 0 0 6px;position:relative;display:flex}.mat-sort-header-position-before .mat-sort-header-arrow{margin:0 6px 0 0}.mat-sort-header-stem{background:currentColor;height:10px;width:2px;margin:auto;display:flex;align-items:center}.mat-sort-header-indicator{width:100%;height:2px;display:flex;align-items:center;position:absolute;top:0;left:0}.mat-sort-header-pointer-middle{margin:auto;height:2px;width:2px;background:currentColor;transform:rotate(45deg)}.mat-sort-header-pointer-left,.mat-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}.mat-sort-header-pointer-left{transform-origin:right;left:0}.mat-sort-header-pointer-right{transform-origin:left;right:0}"],
host: {
'(click)': '_handleClick()',
'(mouseenter)': '_setIndicatorHintVisible(true)',
'(longpress)': '_setIndicatorHintVisible(true)',
'(mouseleave)': '_setIndicatorHintVisible(false)',
'[class.mat-sort-header-disabled]': '_isDisabled()',
},
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
inputs: ['disabled'],
animations: [
matSortAnimations.indicator,
matSortAnimations.leftPointer,
matSortAnimations.rightPointer,
matSortAnimations.arrowOpacity,
matSortAnimations.arrowPosition,
matSortAnimations.allowChildren,
]
},] },
];
/** @nocollapse */
MatSortHeader.ctorParameters = function () {
return [
{ type: MatSortHeaderIntl, },
{ type: core.ChangeDetectorRef, },
{ type: MatSort, decorators: [{ type: core.Optional },] },
{ type: table.CdkColumnDef, decorators: [{ type: core.Optional },] },
];
};
MatSortHeader.propDecorators = {
"id": [{ type: core.Input, args: ['mat-sort-header',] },],
"arrowPosition": [{ type: core.Input },],
"start": [{ type: core.Input },],
"disableClear": [{ type: core.Input },],
};
return MatSortHeader;
}(_MatSortHeaderMixinBase));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatStepLabel = (function (_super) {
__extends(MatStepLabel, _super);
function MatStepLabel(template) {
return _super.call(this, template) || this;
}
MatStepLabel.decorators = [
{ type: core.Directive, args: [{
selector: '[matStepLabel]',
},] },
];
/** @nocollapse */
MatStepLabel.ctorParameters = function () {
return [
{ type: core.TemplateRef, },
];
};
return MatStepLabel;
}(stepper.CdkStepLabel));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Stepper data that is required for internationalization.
*/
var MatStepperIntl = (function () {
function MatStepperIntl() {
/**
* Stream that emits whenever the labels here are changed. Use this to notify
* components if the labels have changed after initialization.
*/
this.changes = new Subject.Subject();
/**
* Label that is rendered below optional steps.
*/
this.optionalLabel = 'Optional';
}
MatStepperIntl.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatStepperIntl.ctorParameters = function () { return []; };
return MatStepperIntl;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatStepHeader = (function () {
function MatStepHeader(_intl, _focusMonitor, _element, changeDetectorRef) {
this._intl = _intl;
this._focusMonitor = _focusMonitor;
this._element = _element;
_focusMonitor.monitor(_element.nativeElement, true);
this._intlSubscription = _intl.changes.subscribe(function () { return changeDetectorRef.markForCheck(); });
}
Object.defineProperty(MatStepHeader.prototype, "index", {
get: /**
* Index of the given step.
* @return {?}
*/ function () { return this._index; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._index = coercion.coerceNumberProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatStepHeader.prototype, "selected", {
get: /**
* Whether the given step is selected.
* @return {?}
*/ function () { return this._selected; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._selected = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatStepHeader.prototype, "active", {
get: /**
* Whether the given step label is active.
* @return {?}
*/ function () { return this._active; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._active = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatStepHeader.prototype, "optional", {
get: /**
* Whether the given step is optional.
* @return {?}
*/ function () { return this._optional; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._optional = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatStepHeader.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._intlSubscription.unsubscribe();
this._focusMonitor.stopMonitoring(this._element.nativeElement);
};
/** Returns string label of given step if it is a text label. */
/**
* Returns string label of given step if it is a text label.
* @return {?}
*/
MatStepHeader.prototype._stringLabel = /**
* Returns string label of given step if it is a text label.
* @return {?}
*/
function () {
return this.label instanceof MatStepLabel ? null : this.label;
};
/** Returns MatStepLabel if the label of given step is a template label. */
/**
* Returns MatStepLabel if the label of given step is a template label.
* @return {?}
*/
MatStepHeader.prototype._templateLabel = /**
* Returns MatStepLabel if the label of given step is a template label.
* @return {?}
*/
function () {
return this.label instanceof MatStepLabel ? this.label : null;
};
/** Returns the host HTML element. */
/**
* Returns the host HTML element.
* @return {?}
*/
MatStepHeader.prototype._getHostElement = /**
* Returns the host HTML element.
* @return {?}
*/
function () {
return this._element.nativeElement;
};
MatStepHeader.decorators = [
{ type: core.Component, args: [{ selector: 'mat-step-header',
template: "<div class=\"mat-step-header-ripple\" mat-ripple [matRippleTrigger]=\"_getHostElement()\"></div><div [class.mat-step-icon]=\"state !== 'number' || selected\" [class.mat-step-icon-not-touched]=\"state == 'number' && !selected\" [ngSwitch]=\"state\"><span *ngSwitchCase=\"'number'\">{{index + 1}}</span><ng-container *ngSwitchCase=\"'edit'\" [ngSwitch]=\"!!(iconOverrides && iconOverrides.edit)\"><ng-container *ngSwitchCase=\"true\" [ngTemplateOutlet]=\"iconOverrides.edit\"></ng-container><mat-icon *ngSwitchDefault>create</mat-icon></ng-container><ng-container *ngSwitchCase=\"'done'\" [ngSwitch]=\"!!(iconOverrides && iconOverrides.done)\"><ng-container *ngSwitchCase=\"true\" [ngTemplateOutlet]=\"iconOverrides.done\"></ng-container><mat-icon *ngSwitchDefault>done</mat-icon></ng-container></div><div class=\"mat-step-label\" [class.mat-step-label-active]=\"active\" [class.mat-step-label-selected]=\"selected\"><ng-container *ngIf=\"_templateLabel()\" [ngTemplateOutlet]=\"_templateLabel()!.template\"></ng-container><div class=\"mat-step-text-label\" *ngIf=\"_stringLabel()\">{{label}}</div><div class=\"mat-step-optional\" *ngIf=\"optional\">{{_intl.optionalLabel}}</div></div>",
styles: [".mat-step-header{overflow:hidden;outline:0;cursor:pointer;position:relative;box-sizing:content-box}.mat-step-optional{font-size:12px}.mat-step-icon,.mat-step-icon-not-touched{border-radius:50%;height:24px;width:24px;align-items:center;justify-content:center;display:flex}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}"],
host: {
'class': 'mat-step-header',
'role': 'tab',
},
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatStepHeader.ctorParameters = function () {
return [
{ type: MatStepperIntl, },
{ type: a11y.FocusMonitor, },
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
];
};
MatStepHeader.propDecorators = {
"state": [{ type: core.Input },],
"label": [{ type: core.Input },],
"iconOverrides": [{ type: core.Input },],
"index": [{ type: core.Input },],
"selected": [{ type: core.Input },],
"active": [{ type: core.Input },],
"optional": [{ type: core.Input },],
};
return MatStepHeader;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Animations used by the Material steppers.
*/
var matStepperAnimations = {
/** Animation that transitions the step along the X axis in a horizontal stepper. */
horizontalStepTransition: animations.trigger('stepTransition', [
animations.state('previous', animations.style({ transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden' })),
animations.state('current', animations.style({ transform: 'none', visibility: 'visible' })),
animations.state('next', animations.style({ transform: 'translate3d(100%, 0, 0)', visibility: 'hidden' })),
animations.transition('* => *', animations.animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
]),
/** Animation that transitions the step along the Y axis in a vertical stepper. */
verticalStepTransition: animations.trigger('stepTransition', [
animations.state('previous', animations.style({ height: '0px', visibility: 'hidden' })),
animations.state('next', animations.style({ height: '0px', visibility: 'hidden' })),
animations.state('current', animations.style({ height: '*', visibility: 'visible' })),
animations.transition('* <=> current', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Template to be used to override the icons inside the step header.
*/
var MatStepperIcon = (function () {
function MatStepperIcon(templateRef) {
this.templateRef = templateRef;
}
MatStepperIcon.decorators = [
{ type: core.Directive, args: [{
selector: 'ng-template[matStepperIcon]',
},] },
];
/** @nocollapse */
MatStepperIcon.ctorParameters = function () {
return [
{ type: core.TemplateRef, },
];
};
MatStepperIcon.propDecorators = {
"name": [{ type: core.Input, args: ['matStepperIcon',] },],
};
return MatStepperIcon;
}());
var MatStep = (function (_super) {
__extends(MatStep, _super);
function MatStep(stepper$$1, _errorStateMatcher) {
var _this = _super.call(this, stepper$$1) || this;
_this._errorStateMatcher = _errorStateMatcher;
return _this;
}
/** Custom error state matcher that additionally checks for validity of interacted form. */
/**
* Custom error state matcher that additionally checks for validity of interacted form.
* @param {?} control
* @param {?} form
* @return {?}
*/
MatStep.prototype.isErrorState = /**
* Custom error state matcher that additionally checks for validity of interacted form.
* @param {?} control
* @param {?} form
* @return {?}
*/
function (control, form) {
var /** @type {?} */ originalErrorState = this._errorStateMatcher.isErrorState(control, form);
// Custom error state checks for the validity of form that is not submitted or touched
// since user can trigger a form change by calling for another step without directly
// interacting with the current form.
var /** @type {?} */ customErrorState = !!(control && control.invalid && this.interacted);
return originalErrorState || customErrorState;
};
MatStep.decorators = [
{ type: core.Component, args: [{ selector: 'mat-step',
template: "<ng-template><ng-content></ng-content></ng-template>",
providers: [{ provide: ErrorStateMatcher, useExisting: MatStep }],
encapsulation: core.ViewEncapsulation.None,
exportAs: 'matStep',
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatStep.ctorParameters = function () {
return [
{ type: MatStepper, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatStepper; }),] },] },
{ type: ErrorStateMatcher, decorators: [{ type: core.SkipSelf },] },
];
};
MatStep.propDecorators = {
"stepLabel": [{ type: core.ContentChild, args: [MatStepLabel,] },],
};
return MatStep;
}(stepper.CdkStep));
var MatStepper = (function (_super) {
__extends(MatStepper, _super);
function MatStepper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/**
* Consumer-specified template-refs to be used to override the header icons.
*/
_this._iconOverrides = {};
return _this;
}
/**
* @return {?}
*/
MatStepper.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ icons = this._icons.toArray();
var /** @type {?} */ editOverride = icons.find(function (icon) { return icon.name === 'edit'; });
var /** @type {?} */ doneOverride = icons.find(function (icon) { return icon.name === 'done'; });
if (editOverride) {
this._iconOverrides["edit"] = editOverride.templateRef;
}
if (doneOverride) {
this._iconOverrides["done"] = doneOverride.templateRef;
}
// Mark the component for change detection whenever the content children query changes
this._steps.changes.pipe(takeUntil_2(this._destroyed)).subscribe(function () { return _this._stateChanged(); });
};
MatStepper.decorators = [
{ type: core.Directive, args: [{
selector: '[matStepper]'
},] },
];
/** @nocollapse */
MatStepper.ctorParameters = function () { return []; };
MatStepper.propDecorators = {
"_stepHeader": [{ type: core.ViewChildren, args: [MatStepHeader, { read: core.ElementRef },] },],
"_steps": [{ type: core.ContentChildren, args: [MatStep,] },],
"_icons": [{ type: core.ContentChildren, args: [MatStepperIcon,] },],
};
return MatStepper;
}(stepper.CdkStepper));
var MatHorizontalStepper = (function (_super) {
__extends(MatHorizontalStepper, _super);
function MatHorizontalStepper() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatHorizontalStepper.decorators = [
{ type: core.Component, args: [{ selector: 'mat-horizontal-stepper',
exportAs: 'matHorizontalStepper',
template: "<div class=\"mat-horizontal-stepper-header-container\"><ng-container *ngFor=\"let step of _steps; let i = index; let isLast = last\"><mat-step-header class=\"mat-horizontal-stepper-header\" (click)=\"step.select()\" (keydown)=\"_onKeydown($event)\" [tabIndex]=\"_focusIndex === i ? 0 : -1\" [id]=\"_getStepLabelId(i)\" [attr.aria-controls]=\"_getStepContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [index]=\"i\" [state]=\"_getIndicatorType(i)\" [label]=\"step.stepLabel || step.label\" [selected]=\"selectedIndex === i\" [active]=\"step.completed || selectedIndex === i || !linear\" [optional]=\"step.optional\" [iconOverrides]=\"_iconOverrides\"></mat-step-header><div *ngIf=\"!isLast\" class=\"mat-stepper-horizontal-line\"></div></ng-container></div><div class=\"mat-horizontal-content-container\"><div *ngFor=\"let step of _steps; let i = index\" class=\"mat-horizontal-stepper-content\" role=\"tabpanel\" [@stepTransition]=\"_getAnimationDirection(i)\" [id]=\"_getStepContentId(i)\" [attr.aria-labelledby]=\"_getStepLabelId(i)\" [attr.aria-expanded]=\"selectedIndex === i\"><ng-container [ngTemplateOutlet]=\"step.content\"></ng-container></div></div>",
styles: [".mat-stepper-horizontal,.mat-stepper-vertical{display:block}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.mat-horizontal-stepper-header .mat-step-icon,.mat-horizontal-stepper-header .mat-step-icon-not-touched{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon,[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon-not-touched{margin-right:0;margin-left:8px}.mat-vertical-stepper-header{display:flex;align-items:center;padding:24px;max-height:24px}.mat-vertical-stepper-header .mat-step-icon,.mat-vertical-stepper-header .mat-step-icon-not-touched{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon,[dir=rtl] .mat-vertical-stepper-header .mat-step-icon-not-touched{margin-right:0;margin-left:12px}.mat-horizontal-stepper-content{overflow:hidden}.mat-horizontal-stepper-content[aria-expanded=false]{height:0}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}.mat-vertical-content-container{margin-left:36px;border:0;position:relative}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}.mat-stepper-vertical-line::before{content:'';position:absolute;top:-16px;bottom:-16px;left:0;border-left-width:1px;border-left-style:solid}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden}.mat-vertical-content{padding:0 24px 24px 24px}.mat-step:last-child .mat-vertical-content-container{border:none}"],
inputs: ['selectedIndex'],
host: {
'class': 'mat-stepper-horizontal',
'aria-orientation': 'horizontal',
'role': 'tablist',
},
animations: [matStepperAnimations.horizontalStepTransition],
providers: [{ provide: MatStepper, useExisting: MatHorizontalStepper }],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatHorizontalStepper.ctorParameters = function () { return []; };
return MatHorizontalStepper;
}(MatStepper));
var MatVerticalStepper = (function (_super) {
__extends(MatVerticalStepper, _super);
function MatVerticalStepper(dir, changeDetectorRef) {
var _this = _super.call(this, dir, changeDetectorRef) || this;
_this._orientation = 'vertical';
return _this;
}
MatVerticalStepper.decorators = [
{ type: core.Component, args: [{ selector: 'mat-vertical-stepper',
exportAs: 'matVerticalStepper',
template: "<div class=\"mat-step\" *ngFor=\"let step of _steps; let i = index; let isLast = last\"><mat-step-header class=\"mat-vertical-stepper-header\" (click)=\"step.select()\" (keydown)=\"_onKeydown($event)\" [tabIndex]=\"_focusIndex == i ? 0 : -1\" [id]=\"_getStepLabelId(i)\" [attr.aria-controls]=\"_getStepContentId(i)\" [attr.aria-selected]=\"selectedIndex === i\" [index]=\"i\" [state]=\"_getIndicatorType(i)\" [label]=\"step.stepLabel || step.label\" [selected]=\"selectedIndex === i\" [active]=\"step.completed || selectedIndex === i || !linear\" [optional]=\"step.optional\" [iconOverrides]=\"_iconOverrides\"></mat-step-header><div class=\"mat-vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\"><div class=\"mat-vertical-stepper-content\" role=\"tabpanel\" [@stepTransition]=\"_getAnimationDirection(i)\" [id]=\"_getStepContentId(i)\" [attr.aria-labelledby]=\"_getStepLabelId(i)\" [attr.aria-expanded]=\"selectedIndex === i\"><div class=\"mat-vertical-content\"><ng-container [ngTemplateOutlet]=\"step.content\"></ng-container></div></div></div></div>",
styles: [".mat-stepper-horizontal,.mat-stepper-vertical{display:block}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.mat-horizontal-stepper-header .mat-step-icon,.mat-horizontal-stepper-header .mat-step-icon-not-touched{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon,[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon-not-touched{margin-right:0;margin-left:8px}.mat-vertical-stepper-header{display:flex;align-items:center;padding:24px;max-height:24px}.mat-vertical-stepper-header .mat-step-icon,.mat-vertical-stepper-header .mat-step-icon-not-touched{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon,[dir=rtl] .mat-vertical-stepper-header .mat-step-icon-not-touched{margin-right:0;margin-left:12px}.mat-horizontal-stepper-content{overflow:hidden}.mat-horizontal-stepper-content[aria-expanded=false]{height:0}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}.mat-vertical-content-container{margin-left:36px;border:0;position:relative}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}.mat-stepper-vertical-line::before{content:'';position:absolute;top:-16px;bottom:-16px;left:0;border-left-width:1px;border-left-style:solid}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden}.mat-vertical-content{padding:0 24px 24px 24px}.mat-step:last-child .mat-vertical-content-container{border:none}"],
inputs: ['selectedIndex'],
host: {
'class': 'mat-stepper-vertical',
'aria-orientation': 'vertical',
'role': 'tablist',
},
animations: [matStepperAnimations.verticalStepTransition],
providers: [{ provide: MatStepper, useExisting: MatVerticalStepper }],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatVerticalStepper.ctorParameters = function () {
return [
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: core.ChangeDetectorRef, },
];
};
return MatVerticalStepper;
}(MatStepper));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Button that moves to the next step in a stepper workflow.
*/
var MatStepperNext = (function (_super) {
__extends(MatStepperNext, _super);
function MatStepperNext() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatStepperNext.decorators = [
{ type: core.Directive, args: [{
selector: 'button[matStepperNext]',
host: {
'(click)': '_stepper.next()',
'[type]': 'type',
},
inputs: ['type'],
providers: [{ provide: stepper.CdkStepper, useExisting: MatStepper }]
},] },
];
/** @nocollapse */
MatStepperNext.ctorParameters = function () { return []; };
return MatStepperNext;
}(stepper.CdkStepperNext));
/**
* Button that moves to the previous step in a stepper workflow.
*/
var MatStepperPrevious = (function (_super) {
__extends(MatStepperPrevious, _super);
function MatStepperPrevious() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatStepperPrevious.decorators = [
{ type: core.Directive, args: [{
selector: 'button[matStepperPrevious]',
host: {
'(click)': '_stepper.previous()',
'[type]': 'type',
},
inputs: ['type'],
providers: [{ provide: stepper.CdkStepper, useExisting: MatStepper }]
},] },
];
/** @nocollapse */
MatStepperPrevious.ctorParameters = function () { return []; };
return MatStepperPrevious;
}(stepper.CdkStepperPrevious));
var __extends$35 = (commonjsGlobal && commonjsGlobal.__extends) || function (d, b) {
for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var none = {};
/* tslint:enable:max-line-length */
/**
* Combines multiple Observables to create an Observable whose values are
* calculated from the latest values of each of its input Observables.
*
* <span class="informal">Whenever any input Observable emits a value, it
* computes a formula using the latest values from all the inputs, then emits
* the output of that formula.</span>
*
* <img src="./img/combineLatest.png" width="100%">
*
* `combineLatest` combines the values from this Observable with values from
* Observables passed as arguments. This is done by subscribing to each
* Observable, in order, and collecting an array of each of the most recent
* values any time any of the input Observables emits, then either taking that
* array and passing it as arguments to an optional `project` function and
* emitting the return value of that, or just emitting the array of recent
* values directly if there is no `project` function.
*
* @example <caption>Dynamically calculate the Body-Mass Index from an Observable of weight and one for height</caption>
* var weight = Rx.Observable.of(70, 72, 76, 79, 75);
* var height = Rx.Observable.of(1.76, 1.77, 1.78);
* var bmi = weight.combineLatest(height, (w, h) => w / (h * h));
* bmi.subscribe(x => console.log('BMI is ' + x));
*
* // With output to console:
* // BMI is 24.212293388429753
* // BMI is 23.93948099205209
* // BMI is 23.671253629592222
*
* @see {@link combineAll}
* @see {@link merge}
* @see {@link withLatestFrom}
*
* @param {ObservableInput} other An input Observable to combine with the source
* Observable. More than one input Observables may be given as argument.
* @param {function} [project] An optional function to project the values from
* the combined latest values into a new value on the output Observable.
* @return {Observable} An Observable of projected values from the most recent
* values from each input Observable, or an array of the most recent values from
* each input Observable.
* @method combineLatest
* @owner Observable
*/
function combineLatest$2() {
var observables = [];
for (var _i = 0; _i < arguments.length; _i++) {
observables[_i - 0] = arguments[_i];
}
var project = null;
if (typeof observables[observables.length - 1] === 'function') {
project = observables.pop();
}
// if the first and only other argument besides the resultSelector is an array
// assume it's been called with `combineLatest([obs1, obs2, obs3], project)`
if (observables.length === 1 && isArray.isArray(observables[0])) {
observables = observables[0].slice();
}
return function (source) { return source.lift.call(new ArrayObservable_1.ArrayObservable([source].concat(observables)), new CombineLatestOperator(project)); };
}
var combineLatest_2 = combineLatest$2;
var CombineLatestOperator = (function () {
function CombineLatestOperator(project) {
this.project = project;
}
CombineLatestOperator.prototype.call = function (subscriber, source) {
return source.subscribe(new CombineLatestSubscriber(subscriber, this.project));
};
return CombineLatestOperator;
}());
/**
* We need this JSDoc comment for affecting ESDoc.
* @ignore
* @extends {Ignored}
*/
var CombineLatestSubscriber = (function (_super) {
__extends$35(CombineLatestSubscriber, _super);
function CombineLatestSubscriber(destination, project) {
_super.call(this, destination);
this.project = project;
this.active = 0;
this.values = [];
this.observables = [];
}
CombineLatestSubscriber.prototype._next = function (observable) {
this.values.push(none);
this.observables.push(observable);
};
CombineLatestSubscriber.prototype._complete = function () {
var observables = this.observables;
var len = observables.length;
if (len === 0) {
this.destination.complete();
}
else {
this.active = len;
this.toRespond = len;
for (var i = 0; i < len; i++) {
var observable = observables[i];
this.add(subscribeToResult_1.subscribeToResult(this, observable, observable, i));
}
}
};
CombineLatestSubscriber.prototype.notifyComplete = function (unused) {
if ((this.active -= 1) === 0) {
this.destination.complete();
}
};
CombineLatestSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
var values = this.values;
var oldVal = values[outerIndex];
var toRespond = !this.toRespond
? 0
: oldVal === none ? --this.toRespond : this.toRespond;
values[outerIndex] = innerValue;
if (toRespond === 0) {
if (this.project) {
this._tryProject(values);
}
else {
this.destination.next(values.slice());
}
}
};
CombineLatestSubscriber.prototype._tryProject = function (values) {
var result;
try {
result = this.project.apply(this, values);
}
catch (err) {
this.destination.error(err);
return;
}
this.destination.next(result);
};
return CombineLatestSubscriber;
}(OuterSubscriber_1.OuterSubscriber));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Wrapper for the CdkTable with Material design styles.
*/
var MatTable = (function (_super) {
__extends(MatTable, _super);
function MatTable() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatTable.decorators = [
{ type: core.Component, args: [{ selector: 'mat-table',
exportAs: 'matTable',
template: table.CDK_TABLE_TEMPLATE,
styles: [".mat-table{display:block}.mat-header-row{min-height:56px}.mat-row{min-height:48px}.mat-header-row,.mat-row{display:flex;border-bottom-width:1px;border-bottom-style:solid;align-items:center;padding:0 24px;box-sizing:border-box}.mat-header-row::after,.mat-row::after{display:inline-block;min-height:inherit;content:''}.mat-cell,.mat-header-cell{flex:1;overflow:hidden;word-wrap:break-word}"],
host: {
'class': 'mat-table',
},
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatTable.ctorParameters = function () { return []; };
return MatTable;
}(table.CdkTable));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Cell definition for the mat-table.
* Captures the template of a column's data row cell as well as cell-specific properties.
*/
var MatCellDef = (function (_super) {
__extends(MatCellDef, _super);
function MatCellDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatCellDef.decorators = [
{ type: core.Directive, args: [{
selector: '[matCellDef]',
providers: [{ provide: table.CdkCellDef, useExisting: MatCellDef }]
},] },
];
/** @nocollapse */
MatCellDef.ctorParameters = function () { return []; };
return MatCellDef;
}(table.CdkCellDef));
/**
* Header cell definition for the mat-table.
* Captures the template of a column's header cell and as well as cell-specific properties.
*/
var MatHeaderCellDef = (function (_super) {
__extends(MatHeaderCellDef, _super);
function MatHeaderCellDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatHeaderCellDef.decorators = [
{ type: core.Directive, args: [{
selector: '[matHeaderCellDef]',
providers: [{ provide: table.CdkHeaderCellDef, useExisting: MatHeaderCellDef }]
},] },
];
/** @nocollapse */
MatHeaderCellDef.ctorParameters = function () { return []; };
return MatHeaderCellDef;
}(table.CdkHeaderCellDef));
/**
* Column definition for the mat-table.
* Defines a set of cells available for a table column.
*/
var MatColumnDef = (function (_super) {
__extends(MatColumnDef, _super);
function MatColumnDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatColumnDef.decorators = [
{ type: core.Directive, args: [{
selector: '[matColumnDef]',
providers: [{ provide: table.CdkColumnDef, useExisting: MatColumnDef }],
},] },
];
/** @nocollapse */
MatColumnDef.ctorParameters = function () { return []; };
MatColumnDef.propDecorators = {
"name": [{ type: core.Input, args: ['matColumnDef',] },],
};
return MatColumnDef;
}(table.CdkColumnDef));
/**
* Header cell template container that adds the right classes and role.
*/
var MatHeaderCell = (function (_super) {
__extends(MatHeaderCell, _super);
function MatHeaderCell(columnDef, elementRef) {
var _this = _super.call(this, columnDef, elementRef) || this;
elementRef.nativeElement.classList.add("mat-column-" + columnDef.cssClassFriendlyName);
return _this;
}
MatHeaderCell.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-header-cell',
host: {
'class': 'mat-header-cell',
'role': 'columnheader',
},
},] },
];
/** @nocollapse */
MatHeaderCell.ctorParameters = function () {
return [
{ type: table.CdkColumnDef, },
{ type: core.ElementRef, },
];
};
return MatHeaderCell;
}(table.CdkHeaderCell));
/**
* Cell template container that adds the right classes and role.
*/
var MatCell = (function (_super) {
__extends(MatCell, _super);
function MatCell(columnDef, elementRef) {
var _this = _super.call(this, columnDef, elementRef) || this;
elementRef.nativeElement.classList.add("mat-column-" + columnDef.cssClassFriendlyName);
return _this;
}
MatCell.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-cell',
host: {
'class': 'mat-cell',
'role': 'gridcell',
},
},] },
];
/** @nocollapse */
MatCell.ctorParameters = function () {
return [
{ type: table.CdkColumnDef, },
{ type: core.ElementRef, },
];
};
return MatCell;
}(table.CdkCell));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Header row definition for the mat-table.
* Captures the header row's template and other header properties such as the columns to display.
*/
var MatHeaderRowDef = (function (_super) {
__extends(MatHeaderRowDef, _super);
function MatHeaderRowDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatHeaderRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[matHeaderRowDef]',
providers: [{ provide: table.CdkHeaderRowDef, useExisting: MatHeaderRowDef }],
inputs: ['columns: matHeaderRowDef'],
},] },
];
/** @nocollapse */
MatHeaderRowDef.ctorParameters = function () { return []; };
return MatHeaderRowDef;
}(table.CdkHeaderRowDef));
/**
* Data row definition for the mat-table.
* Captures the header row's template and other row properties such as the columns to display and
* a when predicate that describes when this row should be used.
*/
var MatRowDef = (function (_super) {
__extends(MatRowDef, _super);
function MatRowDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[matRowDef]',
providers: [{ provide: table.CdkRowDef, useExisting: MatRowDef }],
inputs: ['columns: matRowDefColumns', 'when: matRowDefWhen'],
},] },
];
/** @nocollapse */
MatRowDef.ctorParameters = function () { return []; };
return MatRowDef;
}(table.CdkRowDef));
/**
* Header template container that contains the cell outlet. Adds the right class and role.
*/
var MatHeaderRow = (function (_super) {
__extends(MatHeaderRow, _super);
function MatHeaderRow() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatHeaderRow.decorators = [
{ type: core.Component, args: [{ selector: 'mat-header-row',
template: table.CDK_ROW_TEMPLATE,
host: {
'class': 'mat-header-row',
'role': 'row',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
exportAs: 'matHeaderRow',
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatHeaderRow.ctorParameters = function () { return []; };
return MatHeaderRow;
}(table.CdkHeaderRow));
/**
* Data row template container that contains the cell outlet. Adds the right class and role.
*/
var MatRow = (function (_super) {
__extends(MatRow, _super);
function MatRow() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatRow.decorators = [
{ type: core.Component, args: [{ selector: 'mat-row',
template: table.CDK_ROW_TEMPLATE,
host: {
'class': 'mat-row',
'role': 'row',
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
exportAs: 'matRow',
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatRow.ctorParameters = function () { return []; };
return MatRow;
}(table.CdkRow));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Data source that accepts a client-side data array and includes native support of filtering,
* sorting (using MatSort), and pagination (using MatPaginator).
*
* Allows for sort customization by overriding sortingDataAccessor, which defines how data
* properties are accessed. Also allows for filter customization by overriding filterTermAccessor,
* which defines how row data is converted to a string for filter matching.
*/
var MatTableDataSource = (function (_super) {
__extends(MatTableDataSource, _super);
function MatTableDataSource(initialData) {
if (initialData === void 0) {
initialData = [];
}
var _this = _super.call(this) || this;
/**
* Stream emitting render data to the table (depends on ordered data changes).
*/
_this._renderData = new BehaviorSubject.BehaviorSubject([]);
/**
* Stream that emits when a new filter string is set on the data source.
*/
_this._filter = new BehaviorSubject.BehaviorSubject('');
/**
* Data accessor function that is used for accessing data properties for sorting through
* the default sortData function.
* This default function assumes that the sort header IDs (which defaults to the column name)
* matches the data's properties (e.g. column Xyz represents data['Xyz']).
* May be set to a custom function for different behavior.
* @param data Data object that is being accessed.
* @param sortHeaderId The name of the column that represents the data.
*/
_this.sortingDataAccessor = function (data, sortHeaderId) {
var /** @type {?} */ value = data[sortHeaderId];
return coercion._isNumberValue(value) ? Number(value) : value;
};
/**
* Gets a sorted copy of the data array based on the state of the MatSort. Called
* after changes are made to the filtered data or when sort changes are emitted from MatSort.
* By default, the function retrieves the active sort and its direction and compares data
* by retrieving data using the sortingDataAccessor. May be overridden for a custom implementation
* of data ordering.
* @param data The array of data that should be sorted.
* @param sort The connected MatSort that holds the current sort state.
*/
_this.sortData = function (data, sort) {
var /** @type {?} */ active = sort.active;
var /** @type {?} */ direction = sort.direction;
if (!active || direction == '') {
return data;
}
return data.sort(function (a, b) {
var /** @type {?} */ valueA = _this.sortingDataAccessor(a, active);
var /** @type {?} */ valueB = _this.sortingDataAccessor(b, active);
// If both valueA and valueB exist (truthy), then compare the two. Otherwise, check if
// one value exists while the other doesn't. In this case, existing value should come first.
// This avoids inconsistent results when comparing values to undefined/null.
// If neither value exists, return 0 (equal).
var /** @type {?} */ comparatorResult = 0;
if (valueA && valueB) {
// Check if one value is greater than the other; if equal, comparatorResult should remain 0.
if (valueA > valueB) {
comparatorResult = 1;
}
else if (valueA < valueB) {
comparatorResult = -1;
}
}
else if (valueA) {
comparatorResult = 1;
}
else if (valueB) {
comparatorResult = -1;
}
return comparatorResult * (direction == 'asc' ? 1 : -1);
});
};
/**
* Checks if a data object matches the data source's filter string. By default, each data object
* is converted to a string of its properties and returns true if the filter has
* at least one occurrence in that string. By default, the filter string has its whitespace
* trimmed and the match is case-insensitive. May be overridden for a custom implementation of
* filter matching.
* @param data Data object used to check against the filter.
* @param filter Filter string that has been set on the data source.
* @return Whether the filter matches against the data
*/
_this.filterPredicate = function (data, filter) {
// Transform the data into a lowercase string of all property values.
var /** @type {?} */ accumulator = function (currentTerm, key) { return currentTerm + data[key]; };
var /** @type {?} */ dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();
// Transform the filter by converting it to lowercase and removing whitespace.
var /** @type {?} */ transformedFilter = filter.trim().toLowerCase();
return dataStr.indexOf(transformedFilter) != -1;
};
_this._data = new BehaviorSubject.BehaviorSubject(initialData);
_this._updateChangeSubscription();
return _this;
}
Object.defineProperty(MatTableDataSource.prototype, "data", {
/** Array of data that should be rendered by the table, where each object represents one row. */
get: /**
* Array of data that should be rendered by the table, where each object represents one row.
* @return {?}
*/ function () { return this._data.value; },
set: /**
* @param {?} data
* @return {?}
*/ function (data) { this._data.next(data); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatTableDataSource.prototype, "filter", {
/**
* Filter term that should be used to filter out objects from the data array. To override how
* data objects match to this filter string, provide a custom function for filterPredicate.
*/
get: /**
* Filter term that should be used to filter out objects from the data array. To override how
* data objects match to this filter string, provide a custom function for filterPredicate.
* @return {?}
*/ function () { return this._filter.value; },
set: /**
* @param {?} filter
* @return {?}
*/ function (filter) { this._filter.next(filter); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatTableDataSource.prototype, "sort", {
/**
* Instance of the MatSort directive used by the table to control its sorting. Sort changes
* emitted by the MatSort will trigger an update to the table's rendered data.
*/
get: /**
* Instance of the MatSort directive used by the table to control its sorting. Sort changes
* emitted by the MatSort will trigger an update to the table's rendered data.
* @return {?}
*/ function () { return this._sort; },
set: /**
* @param {?} sort
* @return {?}
*/ function (sort) {
this._sort = sort;
this._updateChangeSubscription();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTableDataSource.prototype, "paginator", {
/**
* Instance of the MatPaginator component used by the table to control what page of the data is
* displayed. Page changes emitted by the MatPaginator will trigger an update to the
* table's rendered data.
*
* Note that the data source uses the paginator's properties to calculate which page of data
* should be displayed. If the paginator receives its properties as template inputs,
* e.g. `[pageLength]=100` or `[pageIndex]=1`, then be sure that the paginator's view has been
* initialized before assigning it to this data source.
*/
get: /**
* Instance of the MatPaginator component used by the table to control what page of the data is
* displayed. Page changes emitted by the MatPaginator will trigger an update to the
* table's rendered data.
*
* Note that the data source uses the paginator's properties to calculate which page of data
* should be displayed. If the paginator receives its properties as template inputs,
* e.g. `[pageLength]=100` or `[pageIndex]=1`, then be sure that the paginator's view has been
* initialized before assigning it to this data source.
* @return {?}
*/ function () { return this._paginator; },
set: /**
* @param {?} paginator
* @return {?}
*/ function (paginator) {
this._paginator = paginator;
this._updateChangeSubscription();
},
enumerable: true,
configurable: true
});
/**
* Subscribe to changes that should trigger an update to the table's rendered rows. When the
* changes occur, process the current state of the filter, sort, and pagination along with
* the provided base data and send it to the table for rendering.
*/
/**
* Subscribe to changes that should trigger an update to the table's rendered rows. When the
* changes occur, process the current state of the filter, sort, and pagination along with
* the provided base data and send it to the table for rendering.
* @return {?}
*/
MatTableDataSource.prototype._updateChangeSubscription = /**
* Subscribe to changes that should trigger an update to the table's rendered rows. When the
* changes occur, process the current state of the filter, sort, and pagination along with
* the provided base data and send it to the table for rendering.
* @return {?}
*/
function () {
var _this = this;
// Sorting and/or pagination should be watched if MatSort and/or MatPaginator are provided.
// Otherwise, use an empty observable stream to take their place.
var /** @type {?} */ sortChange = this._sort ? this._sort.sortChange : empty.empty();
var /** @type {?} */ pageChange = this._paginator ? this._paginator.page : empty.empty();
if (this._renderChangesSubscription) {
this._renderChangesSubscription.unsubscribe();
}
// Watch for base data or filter changes to provide a filtered set of data.
this._renderChangesSubscription = this._data.pipe(combineLatest_2(this._filter), map_2(function (_a) {
var data = _a[0];
return _this._filterData(data);
}),
// Watch for filtered data or sort changes to provide an ordered set of data.
combineLatest_2(sortChange.pipe(startWith_2(/** @type {?} */ ((null))))), map_2(function (_a) {
var data = _a[0];
return _this._orderData(data);
}),
// Watch for ordered data or page changes to provide a paged set of data.
combineLatest_2(pageChange.pipe(startWith_2(/** @type {?} */ ((null))))), map_2(function (_a) {
var data = _a[0];
return _this._pageData(data);
}))
.subscribe(function (data) { return _this._renderData.next(data); });
};
/**
* Returns a filtered data array where each filter object contains the filter string within
* the result of the filterTermAccessor function. If no filter is set, returns the data array
* as provided.
*/
/**
* Returns a filtered data array where each filter object contains the filter string within
* the result of the filterTermAccessor function. If no filter is set, returns the data array
* as provided.
* @param {?} data
* @return {?}
*/
MatTableDataSource.prototype._filterData = /**
* Returns a filtered data array where each filter object contains the filter string within
* the result of the filterTermAccessor function. If no filter is set, returns the data array
* as provided.
* @param {?} data
* @return {?}
*/
function (data) {
var _this = this;
// If there is a filter string, filter out data that does not contain it.
// Each data object is converted to a string using the function defined by filterTermAccessor.
// May be overridden for customization.
this.filteredData =
!this.filter ? data : data.filter(function (obj) { return _this.filterPredicate(obj, _this.filter); });
if (this.paginator) {
this._updatePaginator(this.filteredData.length);
}
return this.filteredData;
};
/**
* Returns a sorted copy of the data if MatSort has a sort applied, otherwise just returns the
* data array as provided. Uses the default data accessor for data lookup, unless a
* sortDataAccessor function is defined.
*/
/**
* Returns a sorted copy of the data if MatSort has a sort applied, otherwise just returns the
* data array as provided. Uses the default data accessor for data lookup, unless a
* sortDataAccessor function is defined.
* @param {?} data
* @return {?}
*/
MatTableDataSource.prototype._orderData = /**
* Returns a sorted copy of the data if MatSort has a sort applied, otherwise just returns the
* data array as provided. Uses the default data accessor for data lookup, unless a
* sortDataAccessor function is defined.
* @param {?} data
* @return {?}
*/
function (data) {
// If there is no active sort or direction, return the data without trying to sort.
if (!this.sort) {
return data;
}
return this.sortData(data.slice(), this.sort);
};
/**
* Returns a paged splice of the provided data array according to the provided MatPaginator's page
* index and length. If there is no paginator provided, returns the data array as provided.
*/
/**
* Returns a paged splice of the provided data array according to the provided MatPaginator's page
* index and length. If there is no paginator provided, returns the data array as provided.
* @param {?} data
* @return {?}
*/
MatTableDataSource.prototype._pageData = /**
* Returns a paged splice of the provided data array according to the provided MatPaginator's page
* index and length. If there is no paginator provided, returns the data array as provided.
* @param {?} data
* @return {?}
*/
function (data) {
if (!this.paginator) {
return data;
}
var /** @type {?} */ startIndex = this.paginator.pageIndex * this.paginator.pageSize;
return data.slice().splice(startIndex, this.paginator.pageSize);
};
/**
* Updates the paginator to reflect the length of the filtered data, and makes sure that the page
* index does not exceed the paginator's last page. Values are changed in a resolved promise to
* guard against making property changes within a round of change detection.
*/
/**
* Updates the paginator to reflect the length of the filtered data, and makes sure that the page
* index does not exceed the paginator's last page. Values are changed in a resolved promise to
* guard against making property changes within a round of change detection.
* @param {?} filteredDataLength
* @return {?}
*/
MatTableDataSource.prototype._updatePaginator = /**
* Updates the paginator to reflect the length of the filtered data, and makes sure that the page
* index does not exceed the paginator's last page. Values are changed in a resolved promise to
* guard against making property changes within a round of change detection.
* @param {?} filteredDataLength
* @return {?}
*/
function (filteredDataLength) {
var _this = this;
Promise.resolve().then(function () {
if (!_this.paginator) {
return;
}
_this.paginator.length = filteredDataLength;
// If the page index is set beyond the page, reduce it to the last page.
if (_this.paginator.pageIndex > 0) {
var /** @type {?} */ lastPageIndex = Math.ceil(_this.paginator.length / _this.paginator.pageSize) - 1 || 0;
_this.paginator.pageIndex = Math.min(_this.paginator.pageIndex, lastPageIndex);
}
});
};
/**
* Used by the MatTable. Called when it connects to the data source.
* @docs-private
*/
/**
* Used by the MatTable. Called when it connects to the data source.
* \@docs-private
* @return {?}
*/
MatTableDataSource.prototype.connect = /**
* Used by the MatTable. Called when it connects to the data source.
* \@docs-private
* @return {?}
*/
function () { return this._renderData; };
/**
* Used by the MatTable. Called when it is destroyed. No-op.
* @docs-private
*/
/**
* Used by the MatTable. Called when it is destroyed. No-op.
* \@docs-private
* @return {?}
*/
MatTableDataSource.prototype.disconnect = /**
* Used by the MatTable. Called when it is destroyed. No-op.
* \@docs-private
* @return {?}
*/
function () { };
return MatTableDataSource;
}(table.DataSource));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The ink-bar is used to display and animate the line underneath the current active tab label.
* \@docs-private
*/
var MatInkBar = (function () {
function MatInkBar(_elementRef, _ngZone) {
this._elementRef = _elementRef;
this._ngZone = _ngZone;
}
/**
* Calculates the styles from the provided element in order to align the ink-bar to that element.
* Shows the ink bar if previously set as hidden.
* @param element
*/
/**
* Calculates the styles from the provided element in order to align the ink-bar to that element.
* Shows the ink bar if previously set as hidden.
* @param {?} element
* @return {?}
*/
MatInkBar.prototype.alignToElement = /**
* Calculates the styles from the provided element in order to align the ink-bar to that element.
* Shows the ink bar if previously set as hidden.
* @param {?} element
* @return {?}
*/
function (element) {
var _this = this;
this.show();
if (typeof requestAnimationFrame !== 'undefined') {
this._ngZone.runOutsideAngular(function () {
requestAnimationFrame(function () { return _this._setStyles(element); });
});
}
else {
this._setStyles(element);
}
};
/** Shows the ink bar. */
/**
* Shows the ink bar.
* @return {?}
*/
MatInkBar.prototype.show = /**
* Shows the ink bar.
* @return {?}
*/
function () {
this._elementRef.nativeElement.style.visibility = 'visible';
};
/** Hides the ink bar. */
/**
* Hides the ink bar.
* @return {?}
*/
MatInkBar.prototype.hide = /**
* Hides the ink bar.
* @return {?}
*/
function () {
this._elementRef.nativeElement.style.visibility = 'hidden';
};
/**
* Sets the proper styles to the ink bar element.
* @param {?} element
* @return {?}
*/
MatInkBar.prototype._setStyles = /**
* Sets the proper styles to the ink bar element.
* @param {?} element
* @return {?}
*/
function (element) {
var /** @type {?} */ inkBar = this._elementRef.nativeElement;
inkBar.style.left = element ? (element.offsetLeft || 0) + 'px' : '0';
inkBar.style.width = element ? (element.offsetWidth || 0) + 'px' : '0';
};
MatInkBar.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-ink-bar',
host: {
'class': 'mat-ink-bar',
},
},] },
];
/** @nocollapse */
MatInkBar.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.NgZone, },
];
};
return MatInkBar;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Used to flag tab labels for use with the portal directive
*/
var MatTabLabel = (function (_super) {
__extends(MatTabLabel, _super);
function MatTabLabel(templateRef, viewContainerRef) {
return _super.call(this, templateRef, viewContainerRef) || this;
}
MatTabLabel.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-tab-label], [matTabLabel]',
},] },
];
/** @nocollapse */
MatTabLabel.ctorParameters = function () {
return [
{ type: core.TemplateRef, },
{ type: core.ViewContainerRef, },
];
};
return MatTabLabel;
}(portal.CdkPortal));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatTabBase = (function () {
function MatTabBase() {
}
return MatTabBase;
}());
var _MatTabMixinBase = mixinDisabled(MatTabBase);
var MatTab = (function (_super) {
__extends(MatTab, _super);
function MatTab(_viewContainerRef) {
var _this = _super.call(this) || this;
_this._viewContainerRef = _viewContainerRef;
/**
* The plain text label for the tab, used when there is no template label.
*/
_this.textLabel = '';
/**
* The portal that will be the hosted content of the tab
*/
_this._contentPortal = null;
/**
* Emits whenever the label changes.
*/
_this._labelChange = new Subject.Subject();
/**
* Emits whenever the disable changes
*/
_this._disableChange = new Subject.Subject();
/**
* The relatively indexed position where 0 represents the center, negative is left, and positive
* represents the right.
*/
_this.position = null;
/**
* The initial relatively index origin of the tab if it was created and selected after there
* was already a selected tab. Provides context of what position the tab should originate from.
*/
_this.origin = null;
/**
* Whether the tab is currently active.
*/
_this.isActive = false;
return _this;
}
Object.defineProperty(MatTab.prototype, "content", {
/** @docs-private */
get: /**
* \@docs-private
* @return {?}
*/ function () {
return this._contentPortal;
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
MatTab.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.hasOwnProperty('textLabel')) {
this._labelChange.next();
}
if (changes.hasOwnProperty('disabled')) {
this._disableChange.next();
}
};
/**
* @return {?}
*/
MatTab.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._disableChange.complete();
this._labelChange.complete();
};
/**
* @return {?}
*/
MatTab.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._contentPortal = new portal.TemplatePortal(this._content, this._viewContainerRef);
};
MatTab.decorators = [
{ type: core.Component, args: [{ selector: 'mat-tab',
template: "<ng-template><ng-content></ng-content></ng-template>",
inputs: ['disabled'],
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
exportAs: 'matTab',
},] },
];
/** @nocollapse */
MatTab.ctorParameters = function () {
return [
{ type: core.ViewContainerRef, },
];
};
MatTab.propDecorators = {
"templateLabel": [{ type: core.ContentChild, args: [MatTabLabel,] },],
"_content": [{ type: core.ViewChild, args: [core.TemplateRef,] },],
"textLabel": [{ type: core.Input, args: ['label',] },],
};
return MatTab;
}(_MatTabMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Animations used by the Material tabs.
*/
var matTabsAnimations = {
/** Animation translates a tab along the X axis. */
translateTab: animations.trigger('translateTab', [
// Note: transitions to `none` instead of 0, because some browsers might blur the content.
animations.state('center, void, left-origin-center, right-origin-center', animations.style({ transform: 'none' })),
animations.state('left', animations.style({ transform: 'translate3d(-100%, 0, 0)' })),
animations.state('right', animations.style({ transform: 'translate3d(100%, 0, 0)' })),
animations.transition('* => left, * => right, left => center, right => center', animations.animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')),
animations.transition('void => left-origin-center', [
animations.style({ transform: 'translate3d(-100%, 0, 0)' }),
animations.animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')
]),
animations.transition('void => right-origin-center', [
animations.style({ transform: 'translate3d(100%, 0, 0)' }),
animations.animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')
])
])
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The portal host directive for the contents of the tab.
* \@docs-private
*/
var MatTabBodyPortal = (function (_super) {
__extends(MatTabBodyPortal, _super);
function MatTabBodyPortal(_componentFactoryResolver, _viewContainerRef, _host) {
var _this = _super.call(this, _componentFactoryResolver, _viewContainerRef) || this;
_this._host = _host;
return _this;
}
/** Set initial visibility or set up subscription for changing visibility. */
/**
* Set initial visibility or set up subscription for changing visibility.
* @return {?}
*/
MatTabBodyPortal.prototype.ngOnInit = /**
* Set initial visibility or set up subscription for changing visibility.
* @return {?}
*/
function () {
var _this = this;
if (this._host._isCenterPosition(this._host._position)) {
this.attach(this._host._content);
}
this._centeringSub = this._host._beforeCentering.subscribe(function (isCentering) {
if (isCentering) {
if (!_this.hasAttached()) {
_this.attach(_this._host._content);
}
}
});
this._leavingSub = this._host._afterLeavingCenter.subscribe(function () {
_this.detach();
});
};
/** Clean up centering subscription. */
/**
* Clean up centering subscription.
* @return {?}
*/
MatTabBodyPortal.prototype.ngOnDestroy = /**
* Clean up centering subscription.
* @return {?}
*/
function () {
if (this._centeringSub && !this._centeringSub.closed) {
this._centeringSub.unsubscribe();
}
if (this._leavingSub && !this._leavingSub.closed) {
this._leavingSub.unsubscribe();
}
};
MatTabBodyPortal.decorators = [
{ type: core.Directive, args: [{
selector: '[matTabBodyHost]'
},] },
];
/** @nocollapse */
MatTabBodyPortal.ctorParameters = function () {
return [
{ type: core.ComponentFactoryResolver, },
{ type: core.ViewContainerRef, },
{ type: MatTabBody, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return MatTabBody; }),] },] },
];
};
return MatTabBodyPortal;
}(portal.CdkPortalOutlet));
/**
* Wrapper for the contents of a tab.
* \@docs-private
*/
var MatTabBody = (function () {
function MatTabBody(_elementRef, _dir) {
this._elementRef = _elementRef;
this._dir = _dir;
/**
* Event emitted when the tab begins to animate towards the center as the active tab.
*/
this._onCentering = new core.EventEmitter();
/**
* Event emitted before the centering of the tab begins.
*/
this._beforeCentering = new core.EventEmitter();
/**
* Event emitted before the centering of the tab begins.
*/
this._afterLeavingCenter = new core.EventEmitter();
/**
* Event emitted when the tab completes its animation towards the center.
*/
this._onCentered = new core.EventEmitter(true);
}
Object.defineProperty(MatTabBody.prototype, "position", {
set: /**
* The shifted index position of the tab body, where zero represents the active center tab.
* @param {?} position
* @return {?}
*/ function (position) {
if (position < 0) {
this._position = this._getLayoutDirection() == 'ltr' ? 'left' : 'right';
}
else if (position > 0) {
this._position = this._getLayoutDirection() == 'ltr' ? 'right' : 'left';
}
else {
this._position = 'center';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTabBody.prototype, "origin", {
set: /**
* The origin position from which this tab should appear when it is centered into view.
* @param {?} origin
* @return {?}
*/ function (origin) {
if (origin == null) {
return;
}
var /** @type {?} */ dir = this._getLayoutDirection();
if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {
this._origin = 'left';
}
else {
this._origin = 'right';
}
},
enumerable: true,
configurable: true
});
/**
* After initialized, check if the content is centered and has an origin. If so, set the
* special position states that transition the tab from the left or right before centering.
*/
/**
* After initialized, check if the content is centered and has an origin. If so, set the
* special position states that transition the tab from the left or right before centering.
* @return {?}
*/
MatTabBody.prototype.ngOnInit = /**
* After initialized, check if the content is centered and has an origin. If so, set the
* special position states that transition the tab from the left or right before centering.
* @return {?}
*/
function () {
if (this._position == 'center' && this._origin) {
this._position = this._origin == 'left' ? 'left-origin-center' : 'right-origin-center';
}
};
/**
* @param {?} e
* @return {?}
*/
MatTabBody.prototype._onTranslateTabStarted = /**
* @param {?} e
* @return {?}
*/
function (e) {
var /** @type {?} */ isCentering = this._isCenterPosition(e.toState);
this._beforeCentering.emit(isCentering);
if (isCentering) {
this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
}
};
/**
* @param {?} e
* @return {?}
*/
MatTabBody.prototype._onTranslateTabComplete = /**
* @param {?} e
* @return {?}
*/
function (e) {
// If the transition to the center is complete, emit an event.
if (this._isCenterPosition(e.toState) && this._isCenterPosition(this._position)) {
this._onCentered.emit();
}
if (this._isCenterPosition(e.fromState) && !this._isCenterPosition(this._position)) {
this._afterLeavingCenter.emit();
}
};
/** The text direction of the containing app. */
/**
* The text direction of the containing app.
* @return {?}
*/
MatTabBody.prototype._getLayoutDirection = /**
* The text direction of the containing app.
* @return {?}
*/
function () {
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
};
/** Whether the provided position state is considered center, regardless of origin. */
/**
* Whether the provided position state is considered center, regardless of origin.
* @param {?} position
* @return {?}
*/
MatTabBody.prototype._isCenterPosition = /**
* Whether the provided position state is considered center, regardless of origin.
* @param {?} position
* @return {?}
*/
function (position) {
return position == 'center' ||
position == 'left-origin-center' ||
position == 'right-origin-center';
};
MatTabBody.decorators = [
{ type: core.Component, args: [{ selector: 'mat-tab-body',
template: "<div class=\"mat-tab-body-content\" #content [@translateTab]=\"_position\" (@translateTab.start)=\"_onTranslateTabStarted($event)\" (@translateTab.done)=\"_onTranslateTabComplete($event)\"><ng-template matTabBodyHost></ng-template></div>",
styles: [".mat-tab-body-content{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;overflow:auto}.mat-tab-group-dynamic-height .mat-tab-body-content{overflow:hidden}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
animations: [matTabsAnimations.translateTab],
host: {
'class': 'mat-tab-body',
},
},] },
];
/** @nocollapse */
MatTabBody.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
];
};
MatTabBody.propDecorators = {
"_onCentering": [{ type: core.Output },],
"_beforeCentering": [{ type: core.Output },],
"_afterLeavingCenter": [{ type: core.Output },],
"_onCentered": [{ type: core.Output },],
"_content": [{ type: core.Input, args: ['content',] },],
"position": [{ type: core.Input },],
"origin": [{ type: core.Input },],
};
return MatTabBody;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Used to generate unique ID's for each tab component
*/
var nextId$1$1 = 0;
/**
* A simple change event emitted on focus or selection changes.
*/
var MatTabChangeEvent = (function () {
function MatTabChangeEvent() {
}
return MatTabChangeEvent;
}());
/**
* \@docs-private
*/
var MatTabGroupBase = (function () {
function MatTabGroupBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatTabGroupBase;
}());
var _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBase), 'primary');
/**
* Material design tab-group component. Supports basic tab pairs (label + content) and includes
* animated ink-bar, keyboard navigation, and screen reader.
* See: https://www.google.com/design/spec/components/tabs.html
*/
var MatTabGroup = (function (_super) {
__extends(MatTabGroup, _super);
function MatTabGroup(elementRef, _changeDetectorRef) {
var _this = _super.call(this, elementRef) || this;
_this._changeDetectorRef = _changeDetectorRef;
/**
* The tab index that should be selected after the content has been checked.
*/
_this._indexToSelect = 0;
/**
* Snapshot of the height of the tab body wrapper before another tab is activated.
*/
_this._tabBodyWrapperHeight = 0;
/**
* Subscription to tabs being added/removed.
*/
_this._tabsSubscription = Subscription.Subscription.EMPTY;
/**
* Subscription to changes in the tab labels.
*/
_this._tabLabelSubscription = Subscription.Subscription.EMPTY;
_this._dynamicHeight = false;
_this._selectedIndex = null;
/**
* Position of the tab header.
*/
_this.headerPosition = 'above';
/**
* Output to enable support for two-way binding on `[(selectedIndex)]`
*/
_this.selectedIndexChange = new core.EventEmitter();
/**
* Event emitted when focus has changed within a tab group.
*/
_this.focusChange = new core.EventEmitter();
/**
* Event emitted when the body animation has completed
*/
_this.animationDone = new core.EventEmitter();
/**
* Event emitted when the tab selection has changed.
*/
_this.selectedTabChange = new core.EventEmitter(true);
/**
* Event emitted when the tab selection has changed.
* @deprecated Use `selectedTabChange` instead.
* \@deletion-target 6.0.0
*/
_this.selectChange = _this.selectedTabChange;
_this._groupId = nextId$1$1++;
return _this;
}
Object.defineProperty(MatTabGroup.prototype, "dynamicHeight", {
get: /**
* Whether the tab group should grow to the size of the active tab.
* @return {?}
*/ function () { return this._dynamicHeight; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._dynamicHeight = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatTabGroup.prototype, "_dynamicHeightDeprecated", {
get: /**
* @deprecated
* \@deletion-target 6.0.0
* @return {?}
*/ function () { return this._dynamicHeight; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) { this._dynamicHeight = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatTabGroup.prototype, "selectedIndex", {
get: /**
* The index of the active tab.
* @return {?}
*/ function () { return this._selectedIndex; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._indexToSelect = coercion.coerceNumberProperty(value, null);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTabGroup.prototype, "backgroundColor", {
get: /**
* Background color of the tab group.
* @return {?}
*/ function () { return this._backgroundColor; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ nativeElement = this._elementRef.nativeElement;
nativeElement.classList.remove("mat-background-" + this.backgroundColor);
if (value) {
nativeElement.classList.add("mat-background-" + value);
}
this._backgroundColor = value;
},
enumerable: true,
configurable: true
});
/**
* After the content is checked, this component knows what tabs have been defined
* and what the selected index should be. This is where we can know exactly what position
* each tab should be in according to the new selected index, and additionally we know how
* a new selected tab should transition in (from the left or right).
*/
/**
* After the content is checked, this component knows what tabs have been defined
* and what the selected index should be. This is where we can know exactly what position
* each tab should be in according to the new selected index, and additionally we know how
* a new selected tab should transition in (from the left or right).
* @return {?}
*/
MatTabGroup.prototype.ngAfterContentChecked = /**
* After the content is checked, this component knows what tabs have been defined
* and what the selected index should be. This is where we can know exactly what position
* each tab should be in according to the new selected index, and additionally we know how
* a new selected tab should transition in (from the left or right).
* @return {?}
*/
function () {
var _this = this;
// Clamp the next selected index to the boundsof 0 and the tabs length.
// Note the `|| 0`, which ensures that values like NaN can't get through
// and which would otherwise throw the component into an infinite loop
// (since Math.max(NaN, 0) === NaN).
var /** @type {?} */ indexToSelect = this._indexToSelect =
Math.min(this._tabs.length - 1, Math.max(this._indexToSelect || 0, 0));
// If there is a change in selected index, emit a change event. Should not trigger if
// the selected index has not yet been initialized.
if (this._selectedIndex != indexToSelect && this._selectedIndex != null) {
var /** @type {?} */ tabChangeEvent = this._createChangeEvent(indexToSelect);
this.selectedTabChange.emit(tabChangeEvent);
// Emitting this value after change detection has run
// since the checked content may contain this variable'
Promise.resolve().then(function () { return _this.selectedIndexChange.emit(indexToSelect); });
}
// Setup the position for each tab and optionally setup an origin on the next selected tab.
this._tabs.forEach(function (tab, index) {
tab.position = index - indexToSelect;
tab.isActive = index === indexToSelect;
// If there is already a selected tab, then set up an origin for the next selected tab
// if it doesn't have one already.
if (_this._selectedIndex != null && tab.position == 0 && !tab.origin) {
tab.origin = indexToSelect - _this._selectedIndex;
}
});
if (this._selectedIndex !== indexToSelect) {
this._selectedIndex = indexToSelect;
this._changeDetectorRef.markForCheck();
}
};
/**
* @return {?}
*/
MatTabGroup.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._subscribeToTabLabels();
// Subscribe to changes in the amount of tabs, in order to be
// able to re-render the content as new tabs are added or removed.
this._tabsSubscription = this._tabs.changes.subscribe(function () {
_this._subscribeToTabLabels();
_this._changeDetectorRef.markForCheck();
});
};
/**
* @return {?}
*/
MatTabGroup.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._tabsSubscription.unsubscribe();
this._tabLabelSubscription.unsubscribe();
};
/**
* @param {?} index
* @return {?}
*/
MatTabGroup.prototype._focusChanged = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.focusChange.emit(this._createChangeEvent(index));
};
/**
* @param {?} index
* @return {?}
*/
MatTabGroup.prototype._createChangeEvent = /**
* @param {?} index
* @return {?}
*/
function (index) {
var /** @type {?} */ event = new MatTabChangeEvent;
event.index = index;
if (this._tabs && this._tabs.length) {
event.tab = this._tabs.toArray()[index];
}
return event;
};
/**
* Subscribes to changes in the tab labels. This is needed, because the \@Input for the label is
* on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
* binding to be updated, we need to subscribe to changes in it and trigger change detection
* manually.
* @return {?}
*/
MatTabGroup.prototype._subscribeToTabLabels = /**
* Subscribes to changes in the tab labels. This is needed, because the \@Input for the label is
* on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
* binding to be updated, we need to subscribe to changes in it and trigger change detection
* manually.
* @return {?}
*/
function () {
var _this = this;
if (this._tabLabelSubscription) {
this._tabLabelSubscription.unsubscribe();
}
this._tabLabelSubscription = merge.merge.apply(void 0, this._tabs.map(function (tab) { return tab._disableChange; }).concat(this._tabs.map(function (tab) { return tab._labelChange; }))).subscribe(function () {
_this._changeDetectorRef.markForCheck();
});
};
/** Returns a unique id for each tab label element */
/**
* Returns a unique id for each tab label element
* @param {?} i
* @return {?}
*/
MatTabGroup.prototype._getTabLabelId = /**
* Returns a unique id for each tab label element
* @param {?} i
* @return {?}
*/
function (i) {
return "mat-tab-label-" + this._groupId + "-" + i;
};
/** Returns a unique id for each tab content element */
/**
* Returns a unique id for each tab content element
* @param {?} i
* @return {?}
*/
MatTabGroup.prototype._getTabContentId = /**
* Returns a unique id for each tab content element
* @param {?} i
* @return {?}
*/
function (i) {
return "mat-tab-content-" + this._groupId + "-" + i;
};
/**
* Sets the height of the body wrapper to the height of the activating tab if dynamic
* height property is true.
*/
/**
* Sets the height of the body wrapper to the height of the activating tab if dynamic
* height property is true.
* @param {?} tabHeight
* @return {?}
*/
MatTabGroup.prototype._setTabBodyWrapperHeight = /**
* Sets the height of the body wrapper to the height of the activating tab if dynamic
* height property is true.
* @param {?} tabHeight
* @return {?}
*/
function (tabHeight) {
if (!this._dynamicHeight || !this._tabBodyWrapperHeight) {
return;
}
var /** @type {?} */ wrapper = this._tabBodyWrapper.nativeElement;
wrapper.style.height = this._tabBodyWrapperHeight + 'px';
// This conditional forces the browser to paint the height so that
// the animation to the new height can have an origin.
if (this._tabBodyWrapper.nativeElement.offsetHeight) {
wrapper.style.height = tabHeight + 'px';
}
};
/** Removes the height of the tab body wrapper. */
/**
* Removes the height of the tab body wrapper.
* @return {?}
*/
MatTabGroup.prototype._removeTabBodyWrapperHeight = /**
* Removes the height of the tab body wrapper.
* @return {?}
*/
function () {
this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight;
this._tabBodyWrapper.nativeElement.style.height = '';
this.animationDone.emit();
};
/** Handle click events, setting new selected index if appropriate. */
/**
* Handle click events, setting new selected index if appropriate.
* @param {?} tab
* @param {?} tabHeader
* @param {?} idx
* @return {?}
*/
MatTabGroup.prototype._handleClick = /**
* Handle click events, setting new selected index if appropriate.
* @param {?} tab
* @param {?} tabHeader
* @param {?} idx
* @return {?}
*/
function (tab, tabHeader, idx) {
if (!tab.disabled) {
this.selectedIndex = tabHeader.focusIndex = idx;
}
};
/** Retrieves the tabindex for the tab. */
/**
* Retrieves the tabindex for the tab.
* @param {?} tab
* @param {?} idx
* @return {?}
*/
MatTabGroup.prototype._getTabIndex = /**
* Retrieves the tabindex for the tab.
* @param {?} tab
* @param {?} idx
* @return {?}
*/
function (tab, idx) {
if (tab.disabled) {
return null;
}
return this.selectedIndex === idx ? 0 : -1;
};
MatTabGroup.decorators = [
{ type: core.Component, args: [{ selector: 'mat-tab-group',
exportAs: 'matTabGroup',
template: "<mat-tab-header #tabHeader [selectedIndex]=\"selectedIndex\" [disableRipple]=\"disableRipple\" (indexFocused)=\"_focusChanged($event)\" (selectFocusedIndex)=\"selectedIndex = $event\"><div class=\"mat-tab-label\" role=\"tab\" matTabLabelWrapper mat-ripple *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabLabelId(i)\" [attr.tabIndex]=\"_getTabIndex(tab, i)\" [attr.aria-controls]=\"_getTabContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [class.mat-tab-label-active]=\"selectedIndex == i\" [disabled]=\"tab.disabled\" [matRippleDisabled]=\"tab.disabled || disableRipple\" (click)=\"_handleClick(tab, tabHeader, i)\"><div class=\"mat-tab-label-content\"><ng-template [ngIf]=\"tab.templateLabel\"><ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template></ng-template><ng-template [ngIf]=\"!tab.templateLabel\">{{tab.textLabel}}</ng-template></div></div></mat-tab-header><div class=\"mat-tab-body-wrapper\" #tabBodyWrapper><mat-tab-body role=\"tabpanel\" *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabContentId(i)\" [attr.aria-labelledby]=\"_getTabLabelId(i)\" [class.mat-tab-body-active]=\"selectedIndex == i\" [content]=\"tab.content\" [position]=\"tab.position\" [origin]=\"tab.origin\" (_onCentered)=\"_removeTabBodyWrapperHeight()\" (_onCentering)=\"_setTabBodyWrapperHeight($event)\"></mat-tab-body></div>",
styles: [".mat-tab-group{display:flex;flex-direction:column}.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:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.mat-tab-label.mat-tab-disabled{cursor:default}.mat-tab-label.mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@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-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height .5s cubic-bezier(.35,0,.25,1)}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden}.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}"],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
inputs: ['color', 'disableRipple'],
host: {
'class': 'mat-tab-group',
'[class.mat-tab-group-dynamic-height]': 'dynamicHeight',
'[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
},
},] },
];
/** @nocollapse */
MatTabGroup.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
];
};
MatTabGroup.propDecorators = {
"_tabs": [{ type: core.ContentChildren, args: [MatTab,] },],
"_tabBodyWrapper": [{ type: core.ViewChild, args: ['tabBodyWrapper',] },],
"dynamicHeight": [{ type: core.Input },],
"_dynamicHeightDeprecated": [{ type: core.Input, args: ['mat-dynamic-height',] },],
"selectedIndex": [{ type: core.Input },],
"headerPosition": [{ type: core.Input },],
"backgroundColor": [{ type: core.Input },],
"selectedIndexChange": [{ type: core.Output },],
"focusChange": [{ type: core.Output },],
"animationDone": [{ type: core.Output },],
"selectedTabChange": [{ type: core.Output },],
"selectChange": [{ type: core.Output },],
};
return MatTabGroup;
}(_MatTabGroupMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatTabLabelWrapperBase = (function () {
function MatTabLabelWrapperBase() {
}
return MatTabLabelWrapperBase;
}());
var _MatTabLabelWrapperMixinBase = mixinDisabled(MatTabLabelWrapperBase);
/**
* Used in the `mat-tab-group` view to display tab labels.
* \@docs-private
*/
var MatTabLabelWrapper = (function (_super) {
__extends(MatTabLabelWrapper, _super);
function MatTabLabelWrapper(elementRef) {
var _this = _super.call(this) || this;
_this.elementRef = elementRef;
return _this;
}
/** Sets focus on the wrapper element */
/**
* Sets focus on the wrapper element
* @return {?}
*/
MatTabLabelWrapper.prototype.focus = /**
* Sets focus on the wrapper element
* @return {?}
*/
function () {
this.elementRef.nativeElement.focus();
};
/**
* @return {?}
*/
MatTabLabelWrapper.prototype.getOffsetLeft = /**
* @return {?}
*/
function () {
return this.elementRef.nativeElement.offsetLeft;
};
/**
* @return {?}
*/
MatTabLabelWrapper.prototype.getOffsetWidth = /**
* @return {?}
*/
function () {
return this.elementRef.nativeElement.offsetWidth;
};
MatTabLabelWrapper.decorators = [
{ type: core.Directive, args: [{
selector: '[matTabLabelWrapper]',
inputs: ['disabled'],
host: {
'[class.mat-tab-disabled]': 'disabled'
}
},] },
];
/** @nocollapse */
MatTabLabelWrapper.ctorParameters = function () {
return [
{ type: core.ElementRef, },
];
};
return MatTabLabelWrapper;
}(_MatTabLabelWrapperMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* The distance in pixels that will be overshot when scrolling a tab label into view. This helps
* provide a small affordance to the label next to it.
*/
var EXAGGERATED_OVERSCROLL = 60;
/**
* \@docs-private
*/
var MatTabHeaderBase = (function () {
function MatTabHeaderBase() {
}
return MatTabHeaderBase;
}());
var _MatTabHeaderMixinBase = mixinDisableRipple(MatTabHeaderBase);
/**
* The header of the tab group which displays a list of all the tabs in the tab group. Includes
* an ink bar that follows the currently selected tab. When the tabs list's width exceeds the
* width of the header container, then arrows will be displayed to allow the user to scroll
* left and right across the header.
* \@docs-private
*/
var MatTabHeader = (function (_super) {
__extends(MatTabHeader, _super);
function MatTabHeader(_elementRef, _changeDetectorRef, _viewportRuler, _dir) {
var _this = _super.call(this) || this;
_this._elementRef = _elementRef;
_this._changeDetectorRef = _changeDetectorRef;
_this._viewportRuler = _viewportRuler;
_this._dir = _dir;
/**
* The tab index that is focused.
*/
_this._focusIndex = 0;
/**
* The distance in pixels that the tab labels should be translated to the left.
*/
_this._scrollDistance = 0;
/**
* Whether the header should scroll to the selected index after the view has been checked.
*/
_this._selectedIndexChanged = false;
/**
* Combines listeners that will re-align the ink bar whenever they're invoked.
*/
_this._realignInkBar = Subscription.Subscription.EMPTY;
/**
* Whether the controls for pagination should be displayed
*/
_this._showPaginationControls = false;
/**
* Whether the tab list can be scrolled more towards the end of the tab label list.
*/
_this._disableScrollAfter = true;
/**
* Whether the tab list can be scrolled more towards the beginning of the tab label list.
*/
_this._disableScrollBefore = true;
_this._selectedIndex = 0;
/**
* Event emitted when the option is selected.
*/
_this.selectFocusedIndex = new core.EventEmitter();
/**
* Event emitted when a label is focused.
*/
_this.indexFocused = new core.EventEmitter();
return _this;
}
Object.defineProperty(MatTabHeader.prototype, "selectedIndex", {
get: /**
* The index of the active tab.
* @return {?}
*/ function () { return this._selectedIndex; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
value = coercion.coerceNumberProperty(value);
this._selectedIndexChanged = this._selectedIndex != value;
this._selectedIndex = value;
this._focusIndex = value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatTabHeader.prototype.ngAfterContentChecked = /**
* @return {?}
*/
function () {
// If the number of tab labels have changed, check if scrolling should be enabled
if (this._tabLabelCount != this._labelWrappers.length) {
this._updatePagination();
this._tabLabelCount = this._labelWrappers.length;
this._changeDetectorRef.markForCheck();
}
// If the selected index has changed, scroll to the label and check if the scrolling controls
// should be disabled.
if (this._selectedIndexChanged) {
this._scrollToLabel(this._selectedIndex);
this._checkScrollingControls();
this._alignInkBarToSelectedTab();
this._selectedIndexChanged = false;
this._changeDetectorRef.markForCheck();
}
// If the scroll distance has been changed (tab selected, focused, scroll controls activated),
// then translate the header to reflect this.
if (this._scrollDistanceChanged) {
this._updateTabScrollPosition();
this._scrollDistanceChanged = false;
this._changeDetectorRef.markForCheck();
}
};
/**
* @param {?} event
* @return {?}
*/
MatTabHeader.prototype._handleKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
switch (event.keyCode) {
case keycodes.RIGHT_ARROW:
this._focusNextTab();
break;
case keycodes.LEFT_ARROW:
this._focusPreviousTab();
break;
case keycodes.HOME:
this._focusFirstTab();
event.preventDefault();
break;
case keycodes.END:
this._focusLastTab();
event.preventDefault();
break;
case keycodes.ENTER:
case keycodes.SPACE:
this.selectFocusedIndex.emit(this.focusIndex);
event.preventDefault();
break;
}
};
/**
* Aligns the ink bar to the selected tab on load.
*/
/**
* Aligns the ink bar to the selected tab on load.
* @return {?}
*/
MatTabHeader.prototype.ngAfterContentInit = /**
* Aligns the ink bar to the selected tab on load.
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ dirChange = this._dir ? this._dir.change : of.of(null);
var /** @type {?} */ resize = this._viewportRuler.change(150);
var /** @type {?} */ realign = function () {
_this._updatePagination();
_this._alignInkBarToSelectedTab();
};
// Defer the first call in order to allow for slower browsers to lay out the elements.
// This helps in cases where the user lands directly on a page with paginated tabs.
typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(realign) : realign();
this._realignInkBar = merge.merge(dirChange, resize).subscribe(realign);
};
/**
* @return {?}
*/
MatTabHeader.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._realignInkBar.unsubscribe();
};
/**
* Callback for when the MutationObserver detects that the content has changed.
*/
/**
* Callback for when the MutationObserver detects that the content has changed.
* @return {?}
*/
MatTabHeader.prototype._onContentChanges = /**
* Callback for when the MutationObserver detects that the content has changed.
* @return {?}
*/
function () {
this._updatePagination();
this._alignInkBarToSelectedTab();
this._changeDetectorRef.markForCheck();
};
/**
* Updating the view whether pagination should be enabled or not
*/
/**
* Updating the view whether pagination should be enabled or not
* @return {?}
*/
MatTabHeader.prototype._updatePagination = /**
* Updating the view whether pagination should be enabled or not
* @return {?}
*/
function () {
this._checkPaginationEnabled();
this._checkScrollingControls();
this._updateTabScrollPosition();
};
Object.defineProperty(MatTabHeader.prototype, "focusIndex", {
/** Tracks which element has focus; used for keyboard navigation */
get: /**
* Tracks which element has focus; used for keyboard navigation
* @return {?}
*/ function () { return this._focusIndex; },
/** When the focus index is set, we must manually send focus to the correct label */
set: /**
* When the focus index is set, we must manually send focus to the correct label
* @param {?} value
* @return {?}
*/ function (value) {
if (!this._isValidIndex(value) || this._focusIndex == value) {
return;
}
this._focusIndex = value;
this.indexFocused.emit(value);
this._setTabFocus(value);
},
enumerable: true,
configurable: true
});
/**
* Determines if an index is valid. If the tabs are not ready yet, we assume that the user is
* providing a valid index and return true.
*/
/**
* Determines if an index is valid. If the tabs are not ready yet, we assume that the user is
* providing a valid index and return true.
* @param {?} index
* @return {?}
*/
MatTabHeader.prototype._isValidIndex = /**
* Determines if an index is valid. If the tabs are not ready yet, we assume that the user is
* providing a valid index and return true.
* @param {?} index
* @return {?}
*/
function (index) {
if (!this._labelWrappers) {
return true;
}
var /** @type {?} */ tab = this._labelWrappers ? this._labelWrappers.toArray()[index] : null;
return !!tab && !tab.disabled;
};
/**
* Sets focus on the HTML element for the label wrapper and scrolls it into the view if
* scrolling is enabled.
*/
/**
* Sets focus on the HTML element for the label wrapper and scrolls it into the view if
* scrolling is enabled.
* @param {?} tabIndex
* @return {?}
*/
MatTabHeader.prototype._setTabFocus = /**
* Sets focus on the HTML element for the label wrapper and scrolls it into the view if
* scrolling is enabled.
* @param {?} tabIndex
* @return {?}
*/
function (tabIndex) {
if (this._showPaginationControls) {
this._scrollToLabel(tabIndex);
}
if (this._labelWrappers && this._labelWrappers.length) {
this._labelWrappers.toArray()[tabIndex].focus();
// Do not let the browser manage scrolling to focus the element, this will be handled
// by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width
// should be the full width minus the offset width.
var /** @type {?} */ containerEl = this._tabListContainer.nativeElement;
var /** @type {?} */ dir = this._getLayoutDirection();
if (dir == 'ltr') {
containerEl.scrollLeft = 0;
}
else {
containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;
}
}
};
/**
* Moves the focus towards the beginning or the end of the list depending on the offset provided.
* Valid offsets are 1 and -1.
*/
/**
* Moves the focus towards the beginning or the end of the list depending on the offset provided.
* Valid offsets are 1 and -1.
* @param {?} offset
* @return {?}
*/
MatTabHeader.prototype._moveFocus = /**
* Moves the focus towards the beginning or the end of the list depending on the offset provided.
* Valid offsets are 1 and -1.
* @param {?} offset
* @return {?}
*/
function (offset) {
if (this._labelWrappers) {
var /** @type {?} */ tabs = this._labelWrappers.toArray();
for (var /** @type {?} */ i = this.focusIndex + offset; i < tabs.length && i >= 0; i += offset) {
if (this._isValidIndex(i)) {
this.focusIndex = i;
return;
}
}
}
};
/** Increment the focus index by 1 until a valid tab is found. */
/**
* Increment the focus index by 1 until a valid tab is found.
* @return {?}
*/
MatTabHeader.prototype._focusNextTab = /**
* Increment the focus index by 1 until a valid tab is found.
* @return {?}
*/
function () {
this._moveFocus(this._getLayoutDirection() == 'ltr' ? 1 : -1);
};
/** Decrement the focus index by 1 until a valid tab is found. */
/**
* Decrement the focus index by 1 until a valid tab is found.
* @return {?}
*/
MatTabHeader.prototype._focusPreviousTab = /**
* Decrement the focus index by 1 until a valid tab is found.
* @return {?}
*/
function () {
this._moveFocus(this._getLayoutDirection() == 'ltr' ? -1 : 1);
};
/**
* Focuses the first tab.
* @return {?}
*/
MatTabHeader.prototype._focusFirstTab = /**
* Focuses the first tab.
* @return {?}
*/
function () {
for (var /** @type {?} */ i = 0; i < this._labelWrappers.length; i++) {
if (this._isValidIndex(i)) {
this.focusIndex = i;
break;
}
}
};
/**
* Focuses the last tab.
* @return {?}
*/
MatTabHeader.prototype._focusLastTab = /**
* Focuses the last tab.
* @return {?}
*/
function () {
for (var /** @type {?} */ i = this._labelWrappers.length - 1; i > -1; i--) {
if (this._isValidIndex(i)) {
this.focusIndex = i;
break;
}
}
};
/** The layout direction of the containing app. */
/**
* The layout direction of the containing app.
* @return {?}
*/
MatTabHeader.prototype._getLayoutDirection = /**
* The layout direction of the containing app.
* @return {?}
*/
function () {
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
};
/** Performs the CSS transformation on the tab list that will cause the list to scroll. */
/**
* Performs the CSS transformation on the tab list that will cause the list to scroll.
* @return {?}
*/
MatTabHeader.prototype._updateTabScrollPosition = /**
* Performs the CSS transformation on the tab list that will cause the list to scroll.
* @return {?}
*/
function () {
var /** @type {?} */ scrollDistance = this.scrollDistance;
var /** @type {?} */ translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
this._tabList.nativeElement.style.transform = "translate3d(" + translateX + "px, 0, 0)";
};
Object.defineProperty(MatTabHeader.prototype, "scrollDistance", {
/** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
get: /**
* Sets the distance in pixels that the tab header should be transformed in the X-axis.
* @return {?}
*/ function () { return this._scrollDistance; },
set: /**
* @param {?} v
* @return {?}
*/ function (v) {
this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), v));
// Mark that the scroll distance has changed so that after the view is checked, the CSS
// transformation can move the header.
this._scrollDistanceChanged = true;
this._checkScrollingControls();
},
enumerable: true,
configurable: true
});
/**
* Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
* the end of the list, respectively). The distance to scroll is computed to be a third of the
* length of the tab list view window.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
*/
/**
* Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
* the end of the list, respectively). The distance to scroll is computed to be a third of the
* length of the tab list view window.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @param {?} scrollDir
* @return {?}
*/
MatTabHeader.prototype._scrollHeader = /**
* Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
* the end of the list, respectively). The distance to scroll is computed to be a third of the
* length of the tab list view window.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @param {?} scrollDir
* @return {?}
*/
function (scrollDir) {
var /** @type {?} */ viewLength = this._tabListContainer.nativeElement.offsetWidth;
// Move the scroll distance one-third the length of the tab list's viewport.
this.scrollDistance += (scrollDir == 'before' ? -1 : 1) * viewLength / 3;
};
/**
* Moves the tab list such that the desired tab label (marked by index) is moved into view.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
*/
/**
* Moves the tab list such that the desired tab label (marked by index) is moved into view.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @param {?} labelIndex
* @return {?}
*/
MatTabHeader.prototype._scrollToLabel = /**
* Moves the tab list such that the desired tab label (marked by index) is moved into view.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @param {?} labelIndex
* @return {?}
*/
function (labelIndex) {
var /** @type {?} */ selectedLabel = this._labelWrappers ? this._labelWrappers.toArray()[labelIndex] : null;
if (!selectedLabel) {
return;
}
// The view length is the visible width of the tab labels.
var /** @type {?} */ viewLength = this._tabListContainer.nativeElement.offsetWidth;
var /** @type {?} */ labelBeforePos, /** @type {?} */ labelAfterPos;
if (this._getLayoutDirection() == 'ltr') {
labelBeforePos = selectedLabel.getOffsetLeft();
labelAfterPos = labelBeforePos + selectedLabel.getOffsetWidth();
}
else {
labelAfterPos = this._tabList.nativeElement.offsetWidth - selectedLabel.getOffsetLeft();
labelBeforePos = labelAfterPos - selectedLabel.getOffsetWidth();
}
var /** @type {?} */ beforeVisiblePos = this.scrollDistance;
var /** @type {?} */ afterVisiblePos = this.scrollDistance + viewLength;
if (labelBeforePos < beforeVisiblePos) {
// Scroll header to move label to the before direction
this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
}
else if (labelAfterPos > afterVisiblePos) {
// Scroll header to move label to the after direction
this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
}
};
/**
* Evaluate whether the pagination controls should be displayed. If the scroll width of the
* tab list is wider than the size of the header container, then the pagination controls should
* be shown.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
*/
/**
* Evaluate whether the pagination controls should be displayed. If the scroll width of the
* tab list is wider than the size of the header container, then the pagination controls should
* be shown.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @return {?}
*/
MatTabHeader.prototype._checkPaginationEnabled = /**
* Evaluate whether the pagination controls should be displayed. If the scroll width of the
* tab list is wider than the size of the header container, then the pagination controls should
* be shown.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @return {?}
*/
function () {
var /** @type {?} */ isEnabled = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
if (!isEnabled) {
this.scrollDistance = 0;
}
if (isEnabled !== this._showPaginationControls) {
this._changeDetectorRef.markForCheck();
}
this._showPaginationControls = isEnabled;
};
/**
* Evaluate whether the before and after controls should be enabled or disabled.
* If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
* before button. If the header is at the end of the list (scroll distance is equal to the
* maximum distance we can scroll), then disable the after button.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
*/
/**
* Evaluate whether the before and after controls should be enabled or disabled.
* If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
* before button. If the header is at the end of the list (scroll distance is equal to the
* maximum distance we can scroll), then disable the after button.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @return {?}
*/
MatTabHeader.prototype._checkScrollingControls = /**
* Evaluate whether the before and after controls should be enabled or disabled.
* If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
* before button. If the header is at the end of the list (scroll distance is equal to the
* maximum distance we can scroll), then disable the after button.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @return {?}
*/
function () {
// Check if the pagination arrows should be activated.
this._disableScrollBefore = this.scrollDistance == 0;
this._disableScrollAfter = this.scrollDistance == this._getMaxScrollDistance();
this._changeDetectorRef.markForCheck();
};
/**
* Determines what is the maximum length in pixels that can be set for the scroll distance. This
* is equal to the difference in width between the tab list container and tab header container.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
*/
/**
* Determines what is the maximum length in pixels that can be set for the scroll distance. This
* is equal to the difference in width between the tab list container and tab header container.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @return {?}
*/
MatTabHeader.prototype._getMaxScrollDistance = /**
* Determines what is the maximum length in pixels that can be set for the scroll distance. This
* is equal to the difference in width between the tab list container and tab header container.
*
* This is an expensive call that forces a layout reflow to compute box and scroll metrics and
* should be called sparingly.
* @return {?}
*/
function () {
var /** @type {?} */ lengthOfTabList = this._tabList.nativeElement.scrollWidth;
var /** @type {?} */ viewLength = this._tabListContainer.nativeElement.offsetWidth;
return (lengthOfTabList - viewLength) || 0;
};
/**
* Tells the ink-bar to align itself to the current label wrapper
* @return {?}
*/
MatTabHeader.prototype._alignInkBarToSelectedTab = /**
* Tells the ink-bar to align itself to the current label wrapper
* @return {?}
*/
function () {
var /** @type {?} */ selectedLabelWrapper = this._labelWrappers && this._labelWrappers.length ?
this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement :
null;
this._inkBar.alignToElement(selectedLabelWrapper);
};
MatTabHeader.decorators = [
{ type: core.Component, args: [{ selector: 'mat-tab-header',
template: "<div class=\"mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4\" aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\" (click)=\"_scrollHeader('before')\"><div class=\"mat-tab-header-pagination-chevron\"></div></div><div class=\"mat-tab-label-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\"><div class=\"mat-tab-list\" #tabList role=\"tablist\" (cdkObserveContent)=\"_onContentChanges()\"><div class=\"mat-tab-labels\"><ng-content></ng-content></div><mat-ink-bar></mat-ink-bar></div></div><div class=\"mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4\" aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\" (click)=\"_scrollHeader('after')\"><div class=\"mat-tab-header-pagination-chevron\"></div></div>",
styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.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:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.mat-tab-label.mat-tab-disabled{cursor:default}.mat-tab-label.mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (max-width:599px){.mat-tab-label{min-width:72px}}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media screen and (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}.mat-tab-header-pagination{position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2}.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-pagination-after,.mat-tab-header-rtl .mat-tab-header-pagination-before{padding-right:4px}.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-before .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-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mat-tab-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-tab-labels{display:flex}"],
inputs: ['disableRipple'],
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: {
'class': 'mat-tab-header',
'[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',
'[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
},
},] },
];
/** @nocollapse */
MatTabHeader.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: scrolling.ViewportRuler, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
];
};
MatTabHeader.propDecorators = {
"_labelWrappers": [{ type: core.ContentChildren, args: [MatTabLabelWrapper,] },],
"_inkBar": [{ type: core.ViewChild, args: [MatInkBar,] },],
"_tabListContainer": [{ type: core.ViewChild, args: ['tabListContainer',] },],
"_tabList": [{ type: core.ViewChild, args: ['tabList',] },],
"selectedIndex": [{ type: core.Input },],
"selectFocusedIndex": [{ type: core.Output },],
"indexFocused": [{ type: core.Output },],
};
return MatTabHeader;
}(_MatTabHeaderMixinBase));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatTabNavBase = (function () {
function MatTabNavBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatTabNavBase;
}());
var _MatTabNavMixinBase = mixinColor(MatTabNavBase, 'primary');
/**
* Navigation component matching the styles of the tab group header.
* Provides anchored navigation with animated ink bar.
*/
var MatTabNav = (function (_super) {
__extends(MatTabNav, _super);
function MatTabNav(elementRef, _dir, _ngZone, _changeDetectorRef, _viewportRuler) {
var _this = _super.call(this, elementRef) || this;
_this._dir = _dir;
_this._ngZone = _ngZone;
_this._changeDetectorRef = _changeDetectorRef;
_this._viewportRuler = _viewportRuler;
/**
* Subject that emits when the component has been destroyed.
*/
_this._onDestroy = new Subject.Subject();
_this._disableRipple = false;
return _this;
}
Object.defineProperty(MatTabNav.prototype, "backgroundColor", {
get: /**
* Background color of the tab nav.
* @return {?}
*/ function () { return this._backgroundColor; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
var /** @type {?} */ nativeElement = this._elementRef.nativeElement;
nativeElement.classList.remove("mat-background-" + this.backgroundColor);
if (value) {
nativeElement.classList.add("mat-background-" + value);
}
this._backgroundColor = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTabNav.prototype, "disableRipple", {
get: /**
* Whether ripples should be disabled for all links or not.
* @return {?}
*/ function () { return this._disableRipple; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._disableRipple = coercion.coerceBooleanProperty(value);
this._setLinkDisableRipple();
},
enumerable: true,
configurable: true
});
/** Notifies the component that the active link has been changed. */
/**
* Notifies the component that the active link has been changed.
* @param {?} element
* @return {?}
*/
MatTabNav.prototype.updateActiveLink = /**
* Notifies the component that the active link has been changed.
* @param {?} element
* @return {?}
*/
function (element) {
this._activeLinkChanged = this._activeLinkElement != element;
this._activeLinkElement = element;
if (this._activeLinkChanged) {
this._changeDetectorRef.markForCheck();
}
};
/**
* @return {?}
*/
MatTabNav.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._ngZone.runOutsideAngular(function () {
var /** @type {?} */ dirChange = _this._dir ? _this._dir.change : of.of(null);
return merge.merge(dirChange, _this._viewportRuler.change(10)).pipe(takeUntil_2(_this._onDestroy))
.subscribe(function () { return _this._alignInkBar(); });
});
this._setLinkDisableRipple();
};
/** Checks if the active link has been changed and, if so, will update the ink bar. */
/**
* Checks if the active link has been changed and, if so, will update the ink bar.
* @return {?}
*/
MatTabNav.prototype.ngAfterContentChecked = /**
* Checks if the active link has been changed and, if so, will update the ink bar.
* @return {?}
*/
function () {
if (this._activeLinkChanged) {
this._alignInkBar();
this._activeLinkChanged = false;
}
};
/**
* @return {?}
*/
MatTabNav.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._onDestroy.next();
this._onDestroy.complete();
};
/** Aligns the ink bar to the active link. */
/**
* Aligns the ink bar to the active link.
* @return {?}
*/
MatTabNav.prototype._alignInkBar = /**
* Aligns the ink bar to the active link.
* @return {?}
*/
function () {
if (this._activeLinkElement) {
this._inkBar.alignToElement(this._activeLinkElement.nativeElement);
}
};
/**
* Sets the `disableRipple` property on each link of the navigation bar.
* @return {?}
*/
MatTabNav.prototype._setLinkDisableRipple = /**
* Sets the `disableRipple` property on each link of the navigation bar.
* @return {?}
*/
function () {
var _this = this;
if (this._tabLinks) {
this._tabLinks.forEach(function (link) { return link.disableRipple = _this.disableRipple; });
}
};
MatTabNav.decorators = [
{ type: core.Component, args: [{ selector: '[mat-tab-nav-bar]',
exportAs: 'matTabNavBar, matTabNav',
inputs: ['color'],
template: "<div class=\"mat-tab-links\" (cdkObserveContent)=\"_alignInkBar()\"><ng-content></ng-content><mat-ink-bar></mat-ink-bar></div>",
styles: [".mat-tab-nav-bar{overflow:hidden;position:relative;flex-shrink:0}.mat-tab-links{position:relative}.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}.mat-tab-link:focus{outline:0}.mat-tab-link:focus:not(.mat-tab-disabled){opacity:1}.mat-tab-link.mat-tab-disabled{cursor:default}.mat-tab-link.mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (max-width:599px){.mat-tab-link{min-width:72px}}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media screen and (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}"],
host: { 'class': 'mat-tab-nav-bar' },
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
MatTabNav.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: bidi.Directionality, decorators: [{ type: core.Optional },] },
{ type: core.NgZone, },
{ type: core.ChangeDetectorRef, },
{ type: scrolling.ViewportRuler, },
];
};
MatTabNav.propDecorators = {
"_inkBar": [{ type: core.ViewChild, args: [MatInkBar,] },],
"_tabLinks": [{ type: core.ContentChildren, args: [core.forwardRef(function () { return MatTabLink; }), { descendants: true },] },],
"backgroundColor": [{ type: core.Input },],
"disableRipple": [{ type: core.Input },],
};
return MatTabNav;
}(_MatTabNavMixinBase));
var MatTabLinkBase = (function () {
function MatTabLinkBase() {
}
return MatTabLinkBase;
}());
var _MatTabLinkMixinBase = mixinTabIndex(mixinDisableRipple(mixinDisabled(MatTabLinkBase)));
/**
* Link inside of a `mat-tab-nav-bar`.
*/
var MatTabLink = (function (_super) {
__extends(MatTabLink, _super);
function MatTabLink(_tabNavBar, _elementRef, ngZone, platform$$1, globalOptions, tabIndex) {
var _this = _super.call(this) || this;
_this._tabNavBar = _tabNavBar;
_this._elementRef = _elementRef;
/**
* Whether the tab link is active or not.
*/
_this._isActive = false;
/**
* Ripple configuration for ripples that are launched on pointer down.
* \@docs-private
*/
_this.rippleConfig = {};
_this._tabLinkRipple = new RippleRenderer(_this, ngZone, _elementRef, platform$$1);
_this._tabLinkRipple.setupTriggerEvents(_elementRef.nativeElement);
_this.tabIndex = parseInt(tabIndex) || 0;
if (globalOptions) {
_this.rippleConfig = {
terminateOnPointerUp: globalOptions.terminateOnPointerUp,
speedFactor: globalOptions.baseSpeedFactor,
animation: globalOptions.animation,
};
}
return _this;
}
Object.defineProperty(MatTabLink.prototype, "active", {
get: /**
* Whether the link is active.
* @return {?}
*/ function () { return this._isActive; },
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._isActive = value;
if (value) {
this._tabNavBar.updateActiveLink(this._elementRef);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatTabLink.prototype, "rippleDisabled", {
/**
* Whether ripples are disabled on interaction
* @docs-private
*/
get: /**
* Whether ripples are disabled on interaction
* \@docs-private
* @return {?}
*/ function () {
return this.disabled || this.disableRipple;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatTabLink.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._tabLinkRipple._removeTriggerEvents();
};
/**
* Handles the click event, preventing default navigation if the tab link is disabled.
*/
/**
* Handles the click event, preventing default navigation if the tab link is disabled.
* @param {?} event
* @return {?}
*/
MatTabLink.prototype._handleClick = /**
* Handles the click event, preventing default navigation if the tab link is disabled.
* @param {?} event
* @return {?}
*/
function (event) {
if (this.disabled) {
event.preventDefault();
}
};
MatTabLink.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-tab-link], [matTabLink]',
exportAs: 'matTabLink',
inputs: ['disabled', 'disableRipple', 'tabIndex'],
host: {
'class': 'mat-tab-link',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.tabIndex]': 'tabIndex',
'[class.mat-tab-disabled]': 'disabled',
'[class.mat-tab-label-active]': 'active',
'(click)': '_handleClick($event)'
}
},] },
];
/** @nocollapse */
MatTabLink.ctorParameters = function () {
return [
{ type: MatTabNav, },
{ type: core.ElementRef, },
{ type: core.NgZone, },
{ type: platform.Platform, },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_RIPPLE_GLOBAL_OPTIONS,] },] },
{ type: undefined, decorators: [{ type: core.Attribute, args: ['tabindex',] },] },
];
};
MatTabLink.propDecorators = {
"active": [{ type: core.Input },],
};
return MatTabLink;
}(_MatTabLinkMixinBase));
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* \@docs-private
*/
var MatToolbarBase = (function () {
function MatToolbarBase(_elementRef) {
this._elementRef = _elementRef;
}
return MatToolbarBase;
}());
var _MatToolbarMixinBase = mixinColor(MatToolbarBase);
var MatToolbarRow = (function () {
function MatToolbarRow() {
}
MatToolbarRow.decorators = [
{ type: core.Directive, args: [{
selector: 'mat-toolbar-row',
exportAs: 'matToolbarRow',
host: { 'class': 'mat-toolbar-row' },
},] },
];
/** @nocollapse */
MatToolbarRow.ctorParameters = function () { return []; };
return MatToolbarRow;
}());
var MatToolbar = (function (_super) {
__extends(MatToolbar, _super);
function MatToolbar(elementRef, _platform, document) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
// TODO: make the document a required param when doing breaking changes.
// TODO: make the document a required param when doing breaking changes.
_this._document = document;
return _this;
}
/**
* @return {?}
*/
MatToolbar.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (!core.isDevMode() || !this._platform.isBrowser) {
return;
}
this._checkToolbarMixedModes();
this._toolbarRows.changes.subscribe(function () { return _this._checkToolbarMixedModes(); });
};
/**
* Throws an exception when developers are attempting to combine the different toolbar row modes.
* @return {?}
*/
MatToolbar.prototype._checkToolbarMixedModes = /**
* Throws an exception when developers are attempting to combine the different toolbar row modes.
* @return {?}
*/
function () {
var _this = this;
if (!this._toolbarRows.length) {
return;
}
// Check if there are any other DOM nodes that can display content but aren't inside of
// a <mat-toolbar-row> element.
var /** @type {?} */ isCombinedUsage = [].slice.call(this._elementRef.nativeElement.childNodes)
.filter(function (node) { return !(node.classList && node.classList.contains('mat-toolbar-row')); })
.filter(function (node) { return node.nodeType !== (_this._document ? _this._document.COMMENT_NODE : 8); })
.some(function (node) { return node.textContent.trim(); });
if (isCombinedUsage) {
throwToolbarMixedModesError();
}
};
MatToolbar.decorators = [
{ type: core.Component, args: [{ selector: 'mat-toolbar',
exportAs: 'matToolbar',
template: "<ng-content></ng-content><ng-content select=\"mat-toolbar-row\"></ng-content>",
styles: [".mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media (max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}"],
inputs: ['color'],
host: {
'class': 'mat-toolbar',
'[class.mat-toolbar-multiple-rows]': 'this._toolbarRows.length',
'[class.mat-toolbar-single-row]': '!this._toolbarRows.length'
},
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
MatToolbar.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: platform.Platform, },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] },] },
];
};
MatToolbar.propDecorators = {
"_toolbarRows": [{ type: core.ContentChildren, args: [MatToolbarRow,] },],
};
return MatToolbar;
}(_MatToolbarMixinBase));
/**
* Throws an exception when attempting to combine the different toolbar row modes.
* \@docs-private
* @return {?}
*/
function throwToolbarMixedModesError() {
throw Error('MatToolbar: Attempting to combine different toolbar modes. ' +
'Either specify multiple `<mat-toolbar-row>` elements explicitly or just place content ' +
'inside of a `<mat-toolbar>` for a single row.');
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Current version of Angular Material.
*/
var VERSION = new core.Version('5.2.2');
/**
* Contant used as empty color
*/
var EMPTY_COLOR = 'none';
/**
* Verify if color has # as a first char. If not, add this char
* to the color
* @param {?} color string
* @return {?}
*/
function coerceHexaColor(color) {
if (!isValidColor(color)) {
return EMPTY_COLOR;
}
if (color.indexOf('#') !== 0) {
color = "#" + color;
}
return color.toUpperCase();
}
/**
* Validate if the color is valid
* @param {?} color string
* @return {?}
*/
function isValidColor(color) {
// validate if color is an hexadecimal
if (!color ||
color.length < 6 ||
color.length > 7) {
return false;
}
// validate rgb of the color
var /** @type {?} */ hex = color.replace('#', '');
var /** @type {?} */ r = parseInt(hex.slice(0, 2), 16);
var /** @type {?} */ g = parseInt(hex.slice(2, 4), 16);
var /** @type {?} */ b = parseInt(hex.slice(4, 6), 16);
if (Number.isNaN(r) ||
Number.isNaN(g) ||
Number.isNaN(b)) {
return false;
}
return true;
}
var MatColorPickerService = /** @class */ (function () {
function MatColorPickerService() {
/**
* Array of all used colors
*/
this._colors = new BehaviorSubject.BehaviorSubject([]);
}
/**
* Add new color to used colors
* @param {?} color string
* @return {?}
*/
MatColorPickerService.prototype.addColor = function (color) {
if (!color || !isValidColor(color)) {
return;
}
color = coerceHexaColor(color);
var /** @type {?} */ colors = this._colors.getValue();
if (!colors.find(function (_color) { return _color === color; })) {
colors.push(color);
this._colors.next(colors);
}
};
/**
* Return Observable of colors
* @return {?}
*/
MatColorPickerService.prototype.getColors = function () {
return this._colors.asObservable();
};
return MatColorPickerService;
}());
MatColorPickerService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
MatColorPickerService.ctorParameters = function () { return []; };
var MatColorPickerCollectionComponent = /** @class */ (function () {
/**
* @param {?} changeDetectorRef
*/
function MatColorPickerCollectionComponent(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this._hideEmpty = false;
/**
* Size limit of the collection
*/
this.size = 30;
/**
* Show transparent option
*/
this.transparent = false;
/**
* Emit selected color value
*/
this.changeColor = new core.EventEmitter();
}
Object.defineProperty(MatColorPickerCollectionComponent.prototype, "hideEmpty", {
/**
* Hide empty slots
* Empty slots are the difference between the collection size and limit
* @param {?} value
* @return {?}
*/
set: function (value) { this._hideEmpty = coercion.coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerCollectionComponent.prototype, "label", {
/**
* Name of the collection
* @return {?}
*/
get: function () { return this._label; },
/**
* @param {?} value
* @return {?}
*/
set: function (value) { this._label = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerCollectionComponent.prototype, "colors", {
/**
* Array of colors to be displayed
* @return {?}
*/
get: function () { return this._colors; },
/**
* @param {?} values
* @return {?}
*/
set: function (values) { this._colors = values; },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatColorPickerCollectionComponent.prototype.ngAfterContentChecked = function () {
if (this._colors && this._colors.length !== this.size) {
this._colors = this._colors.slice(0, this.size).concat(new Array(this._getCollectionDiffSize()));
this.changeDetectorRef.markForCheck();
}
};
/**
* Return the difference between the limit and the collection size.
* Always return 0 when hideEmpty is true
* @return {?} number
*/
MatColorPickerCollectionComponent.prototype._getCollectionDiffSize = function () {
if (this._colors.length > this.size || this._hideEmpty) {
return 0;
}
return this.size - this._colors.length;
};
/**
* Remove color
* @return {?}
*/
MatColorPickerCollectionComponent.prototype.setTransparent = function () {
this.changeColor.emit(EMPTY_COLOR);
};
/**
* Emit selected color value
* @param {?} option MatColorPickerOption
* @return {?}
*/
MatColorPickerCollectionComponent.prototype.setColor = function (option) {
var /** @type {?} */ color = typeof option === 'string' ? option : option.value;
this.changeColor.emit(color);
};
return MatColorPickerCollectionComponent;
}());
MatColorPickerCollectionComponent.decorators = [
{ type: core.Component, args: [{
selector: 'mat-color-picker-collection',
template: "\n <div class=\"color-picker-collection\" role=\"listbox\" aria-label=\"Select a color\">\n <h3>{{ label }}</h3>\n\n <button mat-mini-fab *ngIf=\"transparent\"\n class=\"color-picker-remove-color mat-elevation-z0\"\n role=\"option\" aria-label=\"transparent\"\n (click)=\"setTransparent()\">\n <div class=\"transparent\"></div>\n </button>\n\n <button *ngFor=\"let color of colors\" \n mat-mini-fab\n class=\"mat-elevation-z0\"\n role=\"option\"\n [disabled]=\"!color || color === 'none'\"\n [matColorPickerOption]=\"color\"\n (click)=\"setColor(color)\">\n </button>\n </div>\n ",
styles: ["\n .color-picker-collection {\n min-height: 50px;\n padding: 10px 18px; }\n .color-picker-collection h3 {\n color: #100214;\n text-transform: uppercase;\n font-family: \"Open Sans\", sans-serif;\n font-size: 12px;\n font-weight: 700;\n margin: 0 0 10px 0; }\n\n .color-picker-remove-color {\n background-color: #ffffff;\n border: 1px solid #E1E1E1; }\n .color-picker-remove-color .transparent {\n width: 20px;\n height: 1px;\n border-bottom: 1px solid red;\n transform: translateY(-4px) translateX(0px) rotate(45deg);\n -webkit-transform: translateY(-4px) translateX(0px) rotate(45deg); }\n\n button {\n width: 22px;\n height: 22px;\n cursor: pointer;\n margin: 3px; }\n "],
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/**
* @nocollapse
*/
MatColorPickerCollectionComponent.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef, },
]; };
MatColorPickerCollectionComponent.propDecorators = {
'hideEmpty': [{ type: core.Input },],
'label': [{ type: core.Input },],
'colors': [{ type: core.Input },],
'size': [{ type: core.Input },],
'transparent': [{ type: core.Input },],
'changeColor': [{ type: core.Output },],
};
var MatColorPickerComponent = /** @class */ (function () {
/**
* @param {?} elementRef
* @param {?} changeDetectorRef
* @param {?} colorPickerService
*/
function MatColorPickerComponent(elementRef, changeDetectorRef, colorPickerService) {
this.elementRef = elementRef;
this.changeDetectorRef = changeDetectorRef;
this.colorPickerService = colorPickerService;
this._usedColorLabel = 'Used Colors';
this._hideEmpty = false;
this._hideUsedColors = false;
this._selectedColor = 'none';
this._isOpen = false;
this._overlay = true;
this._hideButtons = false;
/**
* Set the size of the used colors
*/
this.usedSizeColors = 30;
/**
* Change btnCancel label
*/
this.btnCancel = 'Cancel';
/**
* Change btnConfirm label
*/
this.btnConfirm = 'Confirm';
/**
* Event emitted when user change the selected color (without confirm)
*/
this.change = new core.EventEmitter();
/**
* Event emitted when selected color is confirm
*/
this.selected = new core.EventEmitter();
/**
* Event emitted when is clicked outside of the component
*/
this.clickOut = new core.EventEmitter();
/**
* Array of subscriptions from the collections
*/
this._collectionSubs = [];
}
Object.defineProperty(MatColorPickerComponent.prototype, "usedColorLabel", {
/**
* Change label of the collection UsedColors
* @return {?}
*/
get: function () {
return this._usedColorLabel;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._usedColorLabel = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "usedColorStart", {
/**
* Set initial value for used color
* @param {?} colors
* @return {?}
*/
set: function (colors) {
if (colors && colors.length > 0) {
for (var _e = 0, colors_1 = colors; _e < colors_1.length; _e++) {
var color = colors_1[_e];
this.colorPickerService.addColor(color);
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "hideEmpty", {
/**
* Hide empty slots from the collection UsedColors
* @return {?}
*/
get: function () {
return this._hideEmpty;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._hideEmpty = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "hideUsedColors", {
/**
* Hide UsedColors collection
* @return {?}
*/
get: function () {
return this._hideUsedColors;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._hideUsedColors = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "selectedColor", {
/**
* Start with a color selected
* @return {?}
*/
get: function () {
return this._selectedColor;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
if (this._selectedColor !== value) {
this.changeDetectorRef.markForCheck();
}
this._selectedColor = coerceHexaColor(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "isOpen", {
/**
* Define if the panel will be initiated open
* @return {?}
*/
get: function () {
return this._isOpen;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._isOpen = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "overlay", {
/**
* Define if the panel will show in overlay or not
* @return {?}
*/
get: function () {
return this._overlay;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._overlay = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "hideButtons", {
/**
* Hide the action buttons (cancel/confirm)
* @return {?}
*/
get: function () {
return this._hideButtons;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._hideButtons = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerComponent.prototype, "tmpSelectedColor$", {
/**
* Return a Observable with the color the user is picking
* @return {?}
*/
get: function () {
return this._tmpSelectedColor.asObservable();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatColorPickerComponent.prototype.ngOnInit = function () {
this.usedColors$ = this.colorPickerService.getColors();
this._tmpSelectedColor = new BehaviorSubject.BehaviorSubject(this._selectedColor);
};
/**
* Walk throw all collections and subcribe to changes
* @return {?}
*/
MatColorPickerComponent.prototype.ngAfterContentInit = function () {
var _this = this;
if (this._collections) {
this._collections.forEach(function (collection) {
var /** @type {?} */ subscription = collection.changeColor.subscribe(function (color) {
_this.updateTmpSelectedColor(color);
});
_this._collectionSubs.push(subscription);
});
}
};
/**
* Destroy all subscriptions
* @return {?}
*/
MatColorPickerComponent.prototype.ngOnDestroy = function () {
if (this._collectionSubs) {
this._collectionSubs.forEach(function (subscription) {
if (subscription && !subscription.closed) {
subscription.unsubscribe();
}
});
}
};
/**
* Update selected color and emit the change
* @return {?}
*/
MatColorPickerComponent.prototype._updateSelectedColor = function () {
if (this._isOpen || !this.overlay) {
var /** @type {?} */ tmpSelectedColor = this._tmpSelectedColor.getValue();
if (this._selectedColor !== tmpSelectedColor) {
this._selectedColor = tmpSelectedColor;
this.selected.next(this._selectedColor);
}
}
};
/**
* Open/close color picker panel
* @return {?}
*/
MatColorPickerComponent.prototype.toggle = function () {
this._isOpen = !this._isOpen;
if (!this._isOpen && this._selectedColor !== EMPTY_COLOR) {
this.colorPickerService.addColor(this._selectedColor);
}
};
/**
* Update selected color, close the panel and notify the user
* @return {?}
*/
MatColorPickerComponent.prototype.backdropClick = function () {
this.confirmSelectedColor();
this.clickOut.emit(null);
};
/**
* Update tmpSelectedColor
* @param {?} color string
* @return {?}
*/
MatColorPickerComponent.prototype.updateTmpSelectedColor = function (color) {
if (color) {
this._tmpSelectedColor.next(color);
this.change.next(color);
if (this._hideButtons) {
this._updateSelectedColor();
}
}
};
/**
* Cancel the selection and close the panel
* @return {?}
*/
MatColorPickerComponent.prototype.cancelSelection = function () {
this.selected.emit(this._selectedColor);
this.toggle();
};
/**
* Update selectedColor and close the panel
* @return {?}
*/
MatColorPickerComponent.prototype.confirmSelectedColor = function () {
this._updateSelectedColor();
this.toggle();
};
return MatColorPickerComponent;
}());
MatColorPickerComponent.decorators = [
{ type: core.Component, args: [{
selector: 'mat-color-picker',
template: "\n <!-- color picker overlay -->\n <ng-container *ngIf=\"overlay\">\n <button type=\"button\" class=\"btn-picker\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [ngClass]=\"{ 'empty': selectedColor === 'none' }\"\n [style.background]=\"selectedColor\"\n (click)=\"toggle()\">\n <div class=\"transparent\" *ngIf=\"selectedColor === 'none'\"></div>\n </button>\n\n <ng-template\n cdkConnectedOverlay\n hasBackdrop\n cdkConnectedOverlayBackdropClass=\"mat-color-picker-backdrop\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (backdropClick)=\"backdropClick()\">\n\n <ng-template [cdkPortalOutlet]=\"overlayPanel\"></ng-template>\n\n </ng-template>\n </ng-container>\n\n <!-- color picker flat -->\n <ng-template *ngIf=\"!overlay\" [cdkPortalOutlet]=\"overlayPanel\"></ng-template>\n\n <!-- color picker component content -->\n <ng-template cdkPortal #overlayPanel=\"cdkPortal\">\n\n <div class=\"mat-color-picker-overlay mat-elevation-z6\"\n role=\"dialog\" aria-label=\"Color picker\">\n\n <mat-color-picker-selector\n [selectedColor]=\"tmpSelectedColor$ | async\"\n (changeSelectedColor)=\"updateTmpSelectedColor($event)\">\n </mat-color-picker-selector>\n\n <mat-color-picker-collection *ngIf=\"!hideUsedColors\" [label]=\"usedColorLabel\"\n [size]=\"usedSizeColors\"\n [transparent]=\"true\"\n [hideEmpty]=\"hideEmpty\"\n [colors]=\"usedColors$ | async\"\n (changeColor)=\"updateTmpSelectedColor($event)\">\n </mat-color-picker-collection>\n\n <ng-content></ng-content>\n\n <div *ngIf=\"!hideButtons\" class=\"mat-color-picker-actions\">\n\n <button mat-button role=\"button\" aria-label=\"Cancel\" (click)=\"cancelSelection()\">\n {{ btnCancel }}\n </button>\n\n <button mat-button role=\"button\" aria-label=\"Confirm\" (click)=\"confirmSelectedColor()\">\n {{ btnConfirm }}\n </button>\n\n </div>\n\n </div>\n\n </ng-template>\n ",
styles: ["\n @import url(\"https://fonts.googleapis.com/css?family=Open+Sans:400,700\");\n .btn-picker {\n width: 25px;\n height: 25px;\n cursor: pointer;\n background: none;\n border: 2px solid #dddddd; }\n .btn-picker.empty {\n background: #ffffff !important; }\n\n .mat-color-picker-overlay {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 260px;\n min-height: 80px;\n position: relative;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: 0;\n background: #ffffff;\n font-family: 'Open Sans', sans-serif; }\n .mat-color-picker-overlay .mat-color-picker-preview {\n width: 100%;\n height: 8px; }\n\n .transparent {\n width: 32px;\n height: 2px;\n border-bottom: 2px solid red;\n transform: translateY(-3px) translateX(-2px) rotate(45deg);\n -webkit-transform: translateY(-2px) translateX(-11px) rotate(45deg);\n position: absolute; }\n\n .mat-color-picker-actions {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 4px;\n border-top: 1px #dddddd solid; }\n .mat-color-picker-actions button {\n color: #100214;\n text-transform: uppercase;\n font-family: 'Open Sans', sans-serif;\n font-size: 12px;\n font-weight: 400;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1; }\n "],
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush,
},] },
];
/**
* @nocollapse
*/
MatColorPickerComponent.ctorParameters = function () { return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
{ type: MatColorPickerService, },
]; };
MatColorPickerComponent.propDecorators = {
'_collections': [{ type: core.ContentChildren, args: [MatColorPickerCollectionComponent,] },],
'usedColorLabel': [{ type: core.Input },],
'usedColorStart': [{ type: core.Input },],
'hideEmpty': [{ type: core.Input, args: ['hideEmptyUsedColors',] },],
'hideUsedColors': [{ type: core.Input, args: ['hideUsedColors',] },],
'selectedColor': [{ type: core.Input },],
'isOpen': [{ type: core.Input },],
'overlay': [{ type: core.Input },],
'hideButtons': [{ type: core.Input },],
'usedSizeColors': [{ type: core.Input },],
'btnCancel': [{ type: core.Input },],
'btnConfirm': [{ type: core.Input },],
'change': [{ type: core.Output },],
'selected': [{ type: core.Output },],
'clickOut': [{ type: core.Output },],
};
var MatColorPickerSelectorComponent = /** @class */ (function () {
/**
* @param {?} formBuilder
* @param {?} render
*/
function MatColorPickerSelectorComponent(formBuilder, render) {
this.formBuilder = formBuilder;
this.render = render;
this._selectedColor = '';
/**
* Emit update when a color is selected
*/
this.changeSelectedColor = new core.EventEmitter;
/**
* RGBA current color
*/
this._rgbaColor = 'rgba(255,0,0,1)';
/**
* Handle color of the text
*/
this.textClass = 'black';
/**
* Validate if the mouse button is pressed
*/
this._isPressed = false;
/**
* Form and keys of the fields in RGB
*/
this.rgbKeys = ['R', 'G', 'B'];
}
Object.defineProperty(MatColorPickerSelectorComponent.prototype, "blockCursor", {
/**
* Canvas of the block
* @param {?} el
* @return {?}
*/
set: function (el) { this._bc = el; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerSelectorComponent.prototype, "stripCursor", {
/**
* Container of the strip
* @param {?} el
* @return {?}
*/
set: function (el) { this._sc = el; },
enumerable: true,
configurable: true
});
Object.defineProperty(MatColorPickerSelectorComponent.prototype, "selectedColor", {
/**
* Receive selected color from the component
* @return {?}
*/
get: function () { return this._selectedColor; },
/**
* @param {?} value
* @return {?}
*/
set: function (value) { this._selectedColor = value || EMPTY_COLOR; },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatColorPickerSelectorComponent.prototype.ngOnInit = function () {
var _this = this;
this._tmpSelectedColor = new BehaviorSubject.BehaviorSubject(this._selectedColor);
this._tmpSelectedColorSub = this._tmpSelectedColor.subscribe(function (color) {
if (color !== _this._selectedColor && isValidColor(color)) {
if (_this.hexForm.get('hexCode').value !== color) {
_this.hexForm.setValue({ hexCode: color });
}
_this.changeSelectedColor.emit(coerceHexaColor(color));
}
});
// hex form
this.hexForm = this.formBuilder.group({
hexCode: [this.selectedColor, [forms.Validators.minLength(7), forms.Validators.maxLength(7)]]
});
// rgb dynamic form
var /** @type {?} */ rgbGroup = {};
var /** @type {?} */ rgbValue = this._getRGB();
this.rgbKeys.forEach(function (key, index) { return rgbGroup[key] =
new forms.FormControl(rgbValue[index], {
validators: [
forms.Validators.min(0),
forms.Validators.max(256),
forms.Validators.minLength(1),
forms.Validators.maxLength(3)
],
updateOn: 'blur'
}); });
this.rgbForm = this.formBuilder.group(rgbGroup);
// watch changes on forms
this._onChanges();
};
/**
* Update RGB, RGBA and Gradient when selectedColor change and
* the mouse button is pressed
* @param {?} changes SimpleChanges
* @return {?}
*/
MatColorPickerSelectorComponent.prototype.ngOnChanges = function (changes) {
if ('selectedColor' in changes && changes['selectedColor'].currentValue !== EMPTY_COLOR) {
if (!this._isPressed) {
this._updateRGB();
this._updateRGBA();
if (this._blockContext) {
this._fillGradient();
}
}
var /** @type {?} */ rgb = this._getRGB();
var /** @type {?} */ o = Math.round(((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000);
this.textClass = (o > 125) ? 'black' : 'white';
}
};
/**
* Destroy all subscriptions
* @return {?}
*/
MatColorPickerSelectorComponent.prototype.ngOnDestroy = function () {
if (this._tmpSelectedColorSub && !this._tmpSelectedColorSub.closed) {
this._tmpSelectedColorSub.unsubscribe();
}
if (this._hexValuesSub && !this._hexValuesSub.closed) {
this._hexValuesSub.unsubscribe();
}
if (this._rgbValuesSub && !this._rgbValuesSub.closed) {
this._rgbValuesSub.unsubscribe();
}
};
/**
* @return {?}
*/
MatColorPickerSelectorComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.render.listen(this._block.nativeElement, 'mousedown', function (e) {
_this._isPressed = true;
_this.changeColor(e);
});
this.render.listen(this._block.nativeElement, 'mouseup', function () { return _this._isPressed = false; });
this.render.listen(this._block.nativeElement, 'mouseout', function () { return _this._isPressed = false; });
this.render.listen(this._block.nativeElement, 'mousemove', function (e) { return _this.changeColor(e); });
this._blockContext = this._bc.nativeElement.getContext('2d');
this._blockContext.rect(0, 0, this._bc.nativeElement.width, this._bc.nativeElement.height);
this.render.listen(this._strip.nativeElement, 'mousedown', function (e) {
_this._isPressed = true;
_this.changeBaseColor(e);
});
this.render.listen(this._strip.nativeElement, 'mouseup', function () { return _this._isPressed = false; });
this.render.listen(this._strip.nativeElement, 'mouseout', function () { return _this._isPressed = false; });
this.render.listen(this._strip.nativeElement, 'mousemove', function (e) { return _this.changeBaseColor(e); });
this._stripContext = this._strip.nativeElement.getContext('2d');
this._stripContext.rect(0, 0, this._strip.nativeElement.width, this._strip.nativeElement.height);
var /** @type {?} */ grd1 = this._stripContext.createLinearGradient(0, 0, 0, this._bc.nativeElement.height);
grd1.addColorStop(0, 'rgba(255, 0, 0, 1)');
grd1.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
grd1.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
grd1.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
grd1.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
grd1.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
grd1.addColorStop(1, 'rgba(255, 0, 0, 1)');
this._stripContext.fillStyle = grd1;
this._stripContext.fill();
this._fillGradient();
};
/**
* Generate colors based on the RGBA color
* @return {?}
*/
MatColorPickerSelectorComponent.prototype._fillGradient = function () {
this._blockContext.fillStyle = this._rgbaColor;
this._blockContext.fillRect(0, 0, this._bc.nativeElement.width, this._bc.nativeElement.height);
var /** @type {?} */ grdWhite = this._stripContext.createLinearGradient(0, 0, this._bc.nativeElement.width, 0);
grdWhite.addColorStop(0, 'rgba(255,255,255,1)');
grdWhite.addColorStop(1, 'rgba(255,255,255,0)');
this._blockContext.fillStyle = grdWhite;
this._blockContext.fillRect(0, 0, this._bc.nativeElement.width, this._bc.nativeElement.height);
var /** @type {?} */ grdBlack = this._stripContext.createLinearGradient(0, 0, 0, this._bc.nativeElement.height);
grdBlack.addColorStop(0, 'rgba(0,0,0,0)');
grdBlack.addColorStop(1, 'rgba(0,0,0,1)');
this._blockContext.fillStyle = grdBlack;
this._blockContext.fillRect(0, 0, this._bc.nativeElement.width, this._bc.nativeElement.height);
};
/**
* Watch change on forms
* @return {?}
*/
MatColorPickerSelectorComponent.prototype._onChanges = function () {
var _this = this;
// validate digited code and update when digitation is finished
this._hexValuesSub = this.hexForm.get('hexCode').valueChanges.subscribe(function (value) {
if (!_this._isPressed && isValidColor(value)) {
_this._tmpSelectedColor.next(coerceHexaColor(value));
}
});
this._rgbValuesSub = this.rgbForm.valueChanges.subscribe(function (controls) {
var /** @type {?} */ data = [];
for (var /** @type {?} */ key in controls) {
if (!controls[key] || controls[key] > 255) {
data.push(0);
continue;
}
data.push(controls[key]);
}
var /** @type {?} */ hex = _this._getHex(data);
if (hex !== _this._selectedColor && hex.length === 7) {
_this._tmpSelectedColor.next(hex);
}
});
};
/**
* Convert HEX/canvas value to rgb
* @param {?=} data any
* @return {?} number[]
*/
MatColorPickerSelectorComponent.prototype._getRGB = function (data) {
if (data) {
return [data[0], data[1], data[2]];
}
var /** @type {?} */ hex = this._selectedColor.replace('#', '');
var /** @type {?} */ r = parseInt(hex.slice(0, 2), 16);
var /** @type {?} */ g = parseInt(hex.slice(2, 4), 16);
var /** @type {?} */ b = parseInt(hex.slice(4, 6), 16);
return [r, g, b];
};
/**
* Convert RGB value to HEX
* @param {?} data any
* @return {?} string
*/
MatColorPickerSelectorComponent.prototype._getHex = function (data) {
var /** @type {?} */ hex = new Array(3);
hex[0] = data[0].toString(16);
hex[1] = data[1].toString(16);
hex[2] = data[2].toString(16);
hex.forEach(function (val, key) {
if (val.length === 1) {
hex[key] += '0';
}
});
return coerceHexaColor("" + hex[0] + hex[1] + hex[2]);
};
/**
* Update RGBA color
* @param {?=} data any
* @return {?}
*/
MatColorPickerSelectorComponent.prototype._updateRGBA = function (data) {
if (!this._selectedColor && !data) {
this._rgbaColor = 'rgba(255,0,0,1)';
}
var /** @type {?} */ rgb = this._getRGB(data);
this._rgbaColor = "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", 1)";
};
/**
* Update RGB form
* @param {?=} data any
* @return {?}
*/
MatColorPickerSelectorComponent.prototype._updateRGB = function (data) {
if (!this.rgbForm) {
return;
}
if (!data) {
data = this._getRGB();
}
this.rgbForm.setValue({ 'R': data[0], 'G': data[1], 'B': data[2] });
};
/**
* Get selected base color from the canvas
* @param {?} e MouseEvent
* @return {?}
*/
MatColorPickerSelectorComponent.prototype.changeBaseColor = function (e) {
if (this._isPressed) {
this.render.setStyle(this._sc.nativeElement, 'background-position-y', e.offsetY + "px");
var /** @type {?} */ data = this._stripContext.getImageData(e.offsetX, e.offsetY, 1, 1).data;
this._updateRGBA(data);
this._fillGradient();
this.updateValues(data);
}
};
/**
* Get selected color from the canvas
* @param {?} e MouseEvent
* @return {?}
*/
MatColorPickerSelectorComponent.prototype.changeColor = function (e) {
if (this._isPressed) {
this.render.setStyle(this._bp.nativeElement, 'top', e.offsetY - 5 + "px");
this.render.setStyle(this._bp.nativeElement, 'left', e.offsetX - 5 + "px");
var /** @type {?} */ data = this._blockContext.getImageData(e.offsetX, e.offsetY, 1, 1).data;
this.updateValues(data);
}
};
/**
* Emit update from the selected color
* @param {?} data any
* @return {?}
*/
MatColorPickerSelectorComponent.prototype.updateValues = function (data) {
if (data) {
this._updateRGB(data);
this._tmpSelectedColor.next(this._getHex(data));
}
};
return MatColorPickerSelectorComponent;
}());
MatColorPickerSelectorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'mat-color-picker-selector',
template: "\n <div class=\"color-picker-selector\">\n \n <div #block class=\"picker-selector\"></div>\n <canvas #blockCanvas height=\"170\" width=\"230\" id=\"picker\"></canvas>\n <div #blockPointer class=\"picker-position\" style=\"top: 0px;left: 220px;\"></div>\n \n\n <div #stripContainer class=\"colors-position\" style=\"background-position-y: 0px;\">\n <canvas #strip height=\"160\" width=\"20\" id=\"colors\"></canvas>\n </div>\n </div>\n\n <div class=\"color-picker-selector-preview\" [style.background]=\"selectedColor\">\n\n <form [formGroup]=\"hexForm\">\n <mat-form-field class=\"hex-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n <input matInput placeholder=\"HEX\" maxlength=\"7\"\n formControlName=\"hexCode\" [value]=\"selectedColor\"/>\n </mat-form-field>\n </form>\n\n <form [formGroup]=\"rgbForm\">\n <mat-form-field class=\"rgb-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n <input matInput type=\"number\" placeholder=\"RGB\" maxlength=\"3\" formControlName=\"R\"/>\n </mat-form-field>\n <mat-form-field class=\"rgb-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n <input matInput type=\"number\" maxlength=\"3\" formControlName=\"G\"/>\n </mat-form-field>\n <mat-form-field class=\"rgb-input\" floatLabel=\"always\" [ngClass]=\"textClass\">\n <input matInput type=\"number\" maxlength=\"3\" formControlName=\"B\"/>\n </mat-form-field>\n </form>\n\n </div>\n ",
styles: ["\n canvas#colors {\n margin: 5px; }\n\n canvas:hover {\n cursor: crosshair; }\n\n .picker-selector {\n position: absolute;\n width: 230px;\n height: 170px;\n top: 0;\n left: 0;\n z-index: 10;\n cursor: crosshair; }\n\n .picker-position {\n position: absolute;\n width: 10px;\n height: 10px;\n z-index: 1;\n border: 1px #ddd solid;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.3); }\n\n .colors-position {\n position: absolute;\n width: 30px;\n height: 160px;\n top: 0px;\n right: 0px;\n z-index: 1;\n background: url(\"data:image/gif;base64,R0lGODdhHgAIALMAAAAAADU1NTk5OUJCQkpKSlZWVltbW2pqaoCAgP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAAoALAAAAAAeAAgAAAQw0BhFq734yjJm/p8xFEVAeGCqGERACmahgkUrvPH81cFdnjoQy8VBBTOiguSokkQAADs=\") no-repeat; }\n\n .color-picker-selector {\n height: 170px; }\n\n /deep/ mat-form-field {\n font-family: \"Open Sans\";\n font-size: 11px;\n font-weight: bold; }\n /deep/ mat-form-field.black {\n color: #100214; }\n /deep/ mat-form-field.black label {\n color: #100214; }\n /deep/ mat-form-field.black .mat-form-field-underline {\n background-color: #100214; }\n /deep/ mat-form-field.white {\n color: #ffffff; }\n /deep/ mat-form-field.white label {\n color: #ffffff; }\n /deep/ mat-form-field.white .mat-form-field-underline {\n background-color: #ffffff; }\n\n .color-picker-selector-preview {\n height: 40px;\n padding: 15px;\n border-bottom: 1px #E1E1E1 solid; }\n .color-picker-selector-preview form {\n display: inline-block;\n position: relative; }\n .color-picker-selector-preview .hex-input {\n width: 75px;\n margin-right: 20px; }\n .color-picker-selector-preview .hex-input input {\n font-size: 16px;\n font-weight: normal; }\n .color-picker-selector-preview .rgb-input {\n width: 40px;\n margin-right: 5px; }\n .color-picker-selector-preview .rgb-input input {\n font-size: 16px;\n font-weight: normal; }\n "],
preserveWhitespaces: false,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/**
* @nocollapse
*/
MatColorPickerSelectorComponent.ctorParameters = function () { return [
{ type: forms.FormBuilder, },
{ type: core.Renderer2, },
]; };
MatColorPickerSelectorComponent.propDecorators = {
'_block': [{ type: core.ViewChild, args: ['block',] },],
'_bp': [{ type: core.ViewChild, args: ['blockPointer',] },],
'blockCursor': [{ type: core.ViewChild, args: ['blockCanvas',] },],
'_strip': [{ type: core.ViewChild, args: ['strip',] },],
'stripCursor': [{ type: core.ViewChild, args: ['stripContainer',] },],
'selectedColor': [{ type: core.Input },],
'changeSelectedColor': [{ type: core.Output },],
};
/**
* This directive change the background of the button
*/
var MatColorPickerOptionDirective = /** @class */ (function () {
/**
* @param {?} elementRef
* @param {?} render
*/
function MatColorPickerOptionDirective(elementRef, render) {
this.elementRef = elementRef;
this.render = render;
this._color = EMPTY_COLOR;
}
Object.defineProperty(MatColorPickerOptionDirective.prototype, "color", {
/**
* Receive the color
* @return {?}
*/
get: function () { return this._color; },
/**
* @param {?} value
* @return {?}
*/
set: function (value) { this._color = value; },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MatColorPickerOptionDirective.prototype.ngAfterViewInit = function () {
if (this.color) {
var /** @type {?} */ color = void 0;
if (typeof this.color === 'string') {
color = this.color;
}
else {
color = this.color.value;
this.render.setAttribute(this.elementRef.nativeElement, 'aria-label', this.color.text);
}
if (isValidColor(color)) {
// apply the color
this.render.setStyle(this.elementRef.nativeElement, 'background', coerceHexaColor(color));
}
}
};
return MatColorPickerOptionDirective;
}());
MatColorPickerOptionDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[matColorPickerOption], [mat-color-picker-option]',
exportAs: 'matColorPickerOption'
},] },
];
/**
* @nocollapse
*/
MatColorPickerOptionDirective.ctorParameters = function () { return [
{ type: core.ElementRef, },
{ type: core.Renderer2, },
]; };
MatColorPickerOptionDirective.propDecorators = {
'color': [{ type: core.Input, args: ['matColorPickerOption',] },],
};
/**
* Directive applied to an element to make it usable as an origin for an ColorPicker.
*/
var MatColorPickerOriginDirective = /** @class */ (function () {
/**
* Reference to the element on which the directive is applied.
* @param {?} elementRef
* @param {?} renderer
*/
function MatColorPickerOriginDirective(elementRef, renderer) {
var _this = this;
this.elementRef = elementRef;
this.renderer = renderer;
/**
* Emit changes from the origin
*/
this.change = new BehaviorSubject.BehaviorSubject('');
// listen changes onkeyup and update color picker
renderer.listen(elementRef.nativeElement, 'keyup', function (event) {
var value = event.currentTarget['value'];
if (event.isTrusted && isValidColor(value)) {
_this.writeValueFromKeyup(coerceHexaColor(value));
}
else {
_this.writeValueFromKeyup(EMPTY_COLOR);
}
});
}
/**
* This method will be called by the forms API to write to the view when
* programmatic (model -> view) changes are requested.
* @param {?} color
* @return {?}
*/
MatColorPickerOriginDirective.prototype.writeValue = function (color) {
this.renderer.setProperty(this.elementRef.nativeElement, 'value', color);
this.change.next(color);
if (this.propagateChanges) {
this.propagateChanges(color);
}
};
/**
* This method will be called by the color picker
* @param {?} color
* @return {?}
*/
MatColorPickerOriginDirective.prototype.writeValueFromColorPicker = function (color) {
this.renderer.setProperty(this.elementRef.nativeElement, 'value', color);
this.propagateChanges(color);
};
/**
* This method will be called from origin whe key is up
* @param {?} color
* @return {?}
*/
MatColorPickerOriginDirective.prototype.writeValueFromKeyup = function (color) {
this.change.next(color);
this.propagateChanges(color);
};
/**
* This is called by the forms API on initialization so it can update the
* form model when values propagate from the view (view -> model).
* @param {?} fn any
* @return {?}
*/
MatColorPickerOriginDirective.prototype.registerOnChange = function (fn) {
this.propagateChanges = fn;
};
/**
* This is called by the forms API on initialization so it can update the form model on blur
* @param {?} fn any
* @return {?}
*/
MatColorPickerOriginDirective.prototype.registerOnTouched = function (fn) { };
/**
* called by the forms API when the control status changes to or from "DISABLED"
* @param {?} isDisabled boolean
* @return {?}
*/
MatColorPickerOriginDirective.prototype.setDisabledState = function (isDisabled) {
this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
};
return MatColorPickerOriginDirective;
}());
MatColorPickerOriginDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-color-picker-origin], [matColorPickerOrigin]',
exportAs: 'matColorPickerOrigin',
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return MatColorPickerOriginDirective; }),
multi: true
}
]
},] },
];
/**
* @nocollapse
*/
MatColorPickerOriginDirective.ctorParameters = function () { return [
{ type: core.ElementRef, },
{ type: core.Renderer2, },
]; };
MatColorPickerOriginDirective.propDecorators = {
'change': [{ type: core.Output },],
};
/**
* Directive connect an color picker with any input, select or textarea.
* The color picker will be automatically updated when the value of the origin is
* changed.
*/
var MatConnectedColorPickerDirective = /** @class */ (function () {
/**
* @param {?} colorPicker
* @param {?} changeDetectorRef
*/
function MatConnectedColorPickerDirective(colorPicker, changeDetectorRef) {
this.colorPicker = colorPicker;
this.changeDetectorRef = changeDetectorRef;
}
/**
* @return {?}
*/
MatConnectedColorPickerDirective.prototype.ngAfterViewInit = function () {
if (!this._colorPickerSub) {
this._attachColorPicker();
}
};
/**
* @return {?}
*/
MatConnectedColorPickerDirective.prototype.ngOnDestroy = function () {
if (this._colorPickerSub && !this._colorPickerSub.closed) {
this._colorPickerSub.unsubscribe();
}
if (this._originSub && !this._originSub.closed) {
this._originSub.unsubscribe();
}
};
/**
* Attach color picker and origin
* @return {?}
*/
MatConnectedColorPickerDirective.prototype._attachColorPicker = function () {
var _this = this;
// subscribe to origin change to update color picker
this._originSub = this.origin.change.subscribe(function (value) {
_this.colorPicker.selectedColor = value;
_this.changeDetectorRef.detectChanges();
});
// subscribe to color picker changes and set on origin element
this._colorPickerSub = this.colorPicker.change.subscribe(function (value) { return _this.origin.writeValueFromColorPicker(value); });
};
return MatConnectedColorPickerDirective;
}());
MatConnectedColorPickerDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[mat-connected-color-picker], [matConnectedColorPicker]',
exportAs: 'matConnectedColorPicker'
},] },
];
/**
* @nocollapse
*/
MatConnectedColorPickerDirective.ctorParameters = function () { return [
{ type: MatColorPickerComponent, },
{ type: core.ChangeDetectorRef, },
]; };
MatConnectedColorPickerDirective.propDecorators = {
'origin': [{ type: core.Input, args: ['matConnectedColorPickerOrigin',] },],
};
var MatColorPickerModule = /** @class */ (function () {
function MatColorPickerModule() {
}
return MatColorPickerModule;
}());
MatColorPickerModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
portal.PortalModule,
overlay.OverlayModule,
forms.ReactiveFormsModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
],
declarations: [
MatColorPickerComponent,
MatConnectedColorPickerDirective,
MatColorPickerSelectorComponent,
MatColorPickerOriginDirective,
MatColorPickerOptionDirective,
MatColorPickerCollectionComponent,
],
exports: [
MatColorPickerComponent,
MatConnectedColorPickerDirective,
MatColorPickerOriginDirective,
MatColorPickerCollectionComponent,
],
providers: [MatColorPickerService],
},] },
];
/**
* @nocollapse
*/
MatColorPickerModule.ctorParameters = function () { return []; };
exports.MatColorPickerModule = MatColorPickerModule;
exports.ɵb = MatColorPickerCollectionComponent;
exports.ɵg = MatColorPickerSelectorComponent;
exports.ɵa = MatColorPickerComponent;
exports.ɵd = MatColorPickerOptionDirective;
exports.ɵe = MatColorPickerOriginDirective;
exports.ɵf = MatConnectedColorPickerDirective;
exports.ɵc = MatColorPickerService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=mat-color-picker.umd.js.map