| /** |
| * @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 |
| */ |
| (function (global, factory) { |
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/cdk/bidi'), require('@angular/cdk'), require('@angular/cdk/coercion'), require('rxjs'), require('@angular/cdk/platform'), require('rxjs/operators'), require('@angular/cdk/a11y'), require('@angular/platform-browser/animations'), require('@angular/cdk/keycodes'), require('@angular/common'), require('@angular/animations'), require('@angular/cdk/observers'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/forms'), require('@angular/cdk/layout'), require('@angular/cdk/collections'), require('@angular/cdk/text-field'), require('@angular/cdk/accordion'), require('@angular/common/http'), require('@angular/cdk/stepper'), require('@angular/cdk/table'), require('@angular/cdk/tree')) : |
| typeof define === 'function' && define.amd ? define('@angular/material', ['exports', '@angular/core', '@angular/platform-browser', '@angular/cdk/bidi', '@angular/cdk', '@angular/cdk/coercion', 'rxjs', '@angular/cdk/platform', 'rxjs/operators', '@angular/cdk/a11y', '@angular/platform-browser/animations', '@angular/cdk/keycodes', '@angular/common', '@angular/animations', '@angular/cdk/observers', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/forms', '@angular/cdk/layout', '@angular/cdk/collections', '@angular/cdk/text-field', '@angular/cdk/accordion', '@angular/common/http', '@angular/cdk/stepper', '@angular/cdk/table', '@angular/cdk/tree'], factory) : |
| (factory((global.ng = global.ng || {}, global.ng.material = {}),global.ng.core,global.ng.platformBrowser,global.ng.cdk.bidi,global.ng.cdk,global.ng.cdk.coercion,global.rxjs,global.ng.cdk.platform,global.rxjs.operators,global.ng.cdk.a11y,global.ng.platformBrowser.animations,global.ng.cdk.keycodes,global.ng.common,global.ng.animations,global.ng.cdk.observers,global.ng.cdk.overlay,global.ng.cdk.portal,global.ng.cdk.scrolling,global.ng.forms,global.ng.cdk.layout,global.ng.cdk.collections,global.ng.cdk.textField,global.ng.cdk.accordion,global.ng.common.http,global.ng.cdk.stepper,global.ng.cdk.table,global.ng.cdk.tree)); |
| }(this, (function (exports,core,platformBrowser,bidi,cdk,coercion,rxjs,platform,operators,a11y,animations,keycodes,common,animations$1,observers,overlay,portal,scrolling,forms,layout,collections,textField,accordion,http,stepper,table,tree) { '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 = function(d, b) {
|
| 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]; };
|
| return extendStatics(d, b);
|
| };
|
|
|
| function __extends(d, b) {
|
| extendStatics(d, b);
|
| function __() { this.constructor = d; }
|
| d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
| }
|
|
|
| var __assign = function() {
|
| __assign = Object.assign || function __assign(t) {
|
| for (var s, i = 1, n = arguments.length; i < n; i++) {
|
| s = arguments[i];
|
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
| }
|
| return t;
|
| };
|
| return __assign.apply(this, arguments);
|
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Current version of Angular Material. |
| * @type {?} |
| */ |
| var VERSION$1 = new core.Version('8.1.0'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * \@docs-private |
| */ |
| var AnimationCurves = /** @class */ (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 = /** @class */ (function () { |
| function AnimationDurations() { |
| } |
| AnimationDurations.COMPLEX = '375ms'; |
| AnimationDurations.ENTERING = '225ms'; |
| AnimationDurations.EXITING = '195ms'; |
| return AnimationDurations; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Private version constant to circumvent test/build issues, |
| // i.e. avoid core to depend on the @angular/material primary entry-point |
| // Can be removed once the Material primary entry-point no longer |
| // re-exports all secondary entry-points |
| /** @type {?} */ |
| var VERSION$2 = new core.Version('8.1.0'); |
| /** |
| * Injection token that configures whether the Material sanity checks are enabled. |
| * @type {?} |
| */ |
| var MATERIAL_SANITY_CHECKS = new core.InjectionToken('mat-sanity-checks', { |
| providedIn: 'root', |
| factory: MATERIAL_SANITY_CHECKS_FACTORY, |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MATERIAL_SANITY_CHECKS_FACTORY() { |
| return true; |
| } |
| /** |
| * 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 = /** @class */ (function () { |
| function MatCommonModule(_sanityChecksEnabled, _hammerLoader) { |
| this._sanityChecksEnabled = _sanityChecksEnabled; |
| this._hammerLoader = _hammerLoader; |
| /** |
| * 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._checkCdkVersionMatch(); |
| this._hasDoneGlobalChecks = true; |
| } |
| } |
| /** Whether any sanity checks are enabled */ |
| /** |
| * Whether any sanity checks are enabled |
| * @private |
| * @return {?} |
| */ |
| MatCommonModule.prototype._areChecksEnabled = /** |
| * Whether any sanity checks are enabled |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this._sanityChecksEnabled && core.isDevMode() && !this._isTestEnv(); |
| }; |
| /** Whether the code is running in tests. */ |
| /** |
| * Whether the code is running in tests. |
| * @private |
| * @return {?} |
| */ |
| MatCommonModule.prototype._isTestEnv = /** |
| * Whether the code is running in tests. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var window = (/** @type {?} */ (this._window)); |
| return window && (window.__karma__ || window.jasmine); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatCommonModule.prototype._checkDoctypeIsDefined = /** |
| * @private |
| * @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.'); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatCommonModule.prototype._checkThemeIsPresent = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| // We need to assert that the `body` is defined, because these checks run very early |
| // and the `body` won't be defined if the consumer put their scripts in the `head`. |
| if (!this._document || !this._document.body || typeof getComputedStyle !== 'function') { |
| return; |
| } |
| /** @type {?} */ |
| var testElement = this._document.createElement('div'); |
| testElement.classList.add('mat-theme-loaded-marker'); |
| this._document.body.appendChild(testElement); |
| /** @type {?} */ |
| var 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 the material version matches the cdk version */ |
| /** |
| * Checks whether the material version matches the cdk version |
| * @private |
| * @return {?} |
| */ |
| MatCommonModule.prototype._checkCdkVersionMatch = /** |
| * Checks whether the material version matches the cdk version |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (VERSION$2.full !== cdk.VERSION.full) { |
| console.warn('The Angular Material version (' + VERSION$2.full + ') does not match ' + |
| 'the Angular CDK version (' + cdk.VERSION.full + ').\n' + |
| 'Please ensure the versions of these two packages exactly match.'); |
| } |
| }; |
| /** 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() && !((/** @type {?} */ (this._window)))['Hammer'] && !this._hammerLoader) { |
| 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], |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatCommonModule.ctorParameters = function () { return [ |
| { type: Boolean, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MATERIAL_SANITY_CHECKS,] }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [platformBrowser.HAMMER_LOADER,] }] } |
| ]; }; |
| return MatCommonModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * 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. |
| _this.color = defaultColor; |
| return _this; |
| } |
| Object.defineProperty(class_1.prototype, "color", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this._color; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * 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 rxjs.Subject(); |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| class_1.prototype.updateErrorState = /** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var oldState = this.errorState; |
| /** @type {?} */ |
| var parent = this._parentFormGroup || this._parentForm; |
| /** @type {?} */ |
| var matcher = this.errorStateMatcher || this._defaultErrorStateMatcher; |
| /** @type {?} */ |
| var control = this.ngControl ? (/** @type {?} */ (this.ngControl.control)) : null; |
| /** @type {?} */ |
| var newState = matcher.isErrorState(control, parent); |
| if (newState !== oldState) { |
| this.errorState = newState; |
| this.stateChanges.next(); |
| } |
| }; |
| return class_1; |
| }(base)); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Mixin to augment a directive with an initialized property that will emits when ngOnInit ends. |
| * @template T |
| * @param {?} base |
| * @return {?} |
| */ |
| function mixinInitialized(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 this directive has been marked as initialized. |
| */ |
| _this._isInitialized = false; |
| /** |
| * List of subscribers that subscribed before the directive was initialized. Should be notified |
| * during _markInitialized. Set to null after pending subscribers are notified, and should |
| * not expect to be populated after. |
| */ |
| _this._pendingSubscribers = []; |
| /** |
| * Observable stream that emits when the directive initializes. If already initialized, the |
| * subscriber is stored to be notified once _markInitialized is called. |
| */ |
| _this.initialized = new rxjs.Observable((/** |
| * @param {?} subscriber |
| * @return {?} |
| */ |
| function (subscriber) { |
| // If initialized, immediately notify the subscriber. Otherwise store the subscriber to notify |
| // when _markInitialized is called. |
| if (_this._isInitialized) { |
| _this._notifySubscriber(subscriber); |
| } |
| else { |
| (/** @type {?} */ (_this._pendingSubscribers)).push(subscriber); |
| } |
| })); |
| return _this; |
| } |
| /** |
| * Marks the state as initialized and notifies pending subscribers. Should be called at the end |
| * of ngOnInit. |
| * @docs-private |
| */ |
| /** |
| * Marks the state as initialized and notifies pending subscribers. Should be called at the end |
| * of ngOnInit. |
| * \@docs-private |
| * @return {?} |
| */ |
| class_1.prototype._markInitialized = /** |
| * Marks the state as initialized and notifies pending subscribers. Should be called at the end |
| * of ngOnInit. |
| * \@docs-private |
| * @return {?} |
| */ |
| function () { |
| if (this._isInitialized) { |
| throw Error('This directive has already been marked as initialized and ' + |
| 'should not be called twice.'); |
| } |
| this._isInitialized = true; |
| (/** @type {?} */ (this._pendingSubscribers)).forEach(this._notifySubscriber); |
| this._pendingSubscribers = null; |
| }; |
| /** Emits and completes the subscriber stream (should only emit once). */ |
| /** |
| * Emits and completes the subscriber stream (should only emit once). |
| * @param {?} subscriber |
| * @return {?} |
| */ |
| class_1.prototype._notifySubscriber = /** |
| * Emits and completes the subscriber stream (should only emit once). |
| * @param {?} subscriber |
| * @return {?} |
| */ |
| function (subscriber) { |
| subscriber.next(); |
| subscriber.complete(); |
| }; |
| return class_1; |
| }(base)); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * InjectionToken for datepicker that can be used to override default locale code. |
| * @type {?} |
| */ |
| var MAT_DATE_LOCALE = new core.InjectionToken('MAT_DATE_LOCALE', { |
| providedIn: 'root', |
| factory: MAT_DATE_LOCALE_FACTORY, |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_DATE_LOCALE_FACTORY() { |
| return core.inject(core.LOCALE_ID); |
| } |
| /** |
| * No longer needed since MAT_DATE_LOCALE has been changed to a scoped injectable. |
| * If you are importing and providing this in your code you can simply remove it. |
| * @deprecated |
| * \@breaking-change 8.0.0 |
| * @type {?} |
| */ |
| var MAT_DATE_LOCALE_PROVIDER = { provide: MAT_DATE_LOCALE, useExisting: core.LOCALE_ID }; |
| /** |
| * Adapts type `D` to be usable as a date by cdk-based components that work with dates. |
| * @abstract |
| * @template D |
| */ |
| var /** |
| * Adapts type `D` to be usable as a date by cdk-based components that work with dates. |
| * @abstract |
| * @template D |
| */ |
| DateAdapter = /** @class */ (function () { |
| function DateAdapter() { |
| this._localeChanges = new rxjs.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) { |
| /** @type {?} */ |
| var firstValid = this.isValid(first); |
| /** @type {?} */ |
| var 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var MAT_DATE_FORMATS = new core.InjectionToken('mat-date-formats'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // TODO(mmalerba): Remove when we no longer support safari 9. |
| /** |
| * Whether the browser supports the Intl API. |
| * @type {?} |
| */ |
| var SUPPORTS_INTL_API; |
| // We need a try/catch around the reference to `Intl`, because accessing it in some cases can |
| // cause IE to throw. These cases are tied to particular versions of Windows and can happen if |
| // the consumer is providing a polyfilled `Map`. See: |
| // https://github.com/Microsoft/ChakraCore/issues/3189 |
| // https://github.com/angular/components/issues/15687 |
| try { |
| SUPPORTS_INTL_API = typeof Intl != 'undefined'; |
| } |
| catch (_a) { |
| SUPPORTS_INTL_API = false; |
| } |
| /** |
| * The default month names to use if Intl API is not available. |
| * @type {?} |
| */ |
| 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 = /** |
| * @param {?} i |
| * @return {?} |
| */ |
| function (i) { return String(i + 1); }; |
| /** |
| * The default date names to use if Intl API is not available. |
| * @type {?} |
| */ |
| var DEFAULT_DATE_NAMES = range(31, (ɵ0)); |
| /** |
| * The default day of the week names to use if Intl API is not available. |
| * @type {?} |
| */ |
| 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. |
| * @type {?} |
| */ |
| 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) { |
| /** @type {?} */ |
| var valuesArray = Array(length); |
| for (var 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 = /** @class */ (function (_super) { |
| __extends(NativeDateAdapter, _super); |
| function NativeDateAdapter(matDateLocale, platform$$1) { |
| var _this = _super.call(this) || this; |
| /** |
| * Whether to use `timeZone: 'utc'` with `Intl.DateTimeFormat` when formatting dates. |
| * Without this `Intl.DateTimeFormat` sometimes chooses the wrong timeZone, which can throw off |
| * the result. (e.g. in the en-US locale `new Date(1800, 7, 14).toLocaleDateString()` |
| * will produce `'8/13/1800'`. |
| * |
| * TODO(mmalerba): drop this variable. It's not being used in the code right now. We're now |
| * getting the string representation of a Date object from it's utc representation. We're keeping |
| * it here for sometime, just for precaution, in case we decide to revert some of these changes |
| * though. |
| */ |
| _this.useUtcForDisplay = true; |
| _super.prototype.setLocale.call(_this, matDateLocale); |
| // IE does its own time zone correction, so we disable this on IE. |
| _this.useUtcForDisplay = !platform$$1.TRIDENT; |
| _this._clampDate = platform$$1.TRIDENT || platform$$1.EDGE; |
| 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) { |
| var _this = this; |
| if (SUPPORTS_INTL_API) { |
| /** @type {?} */ |
| var dtf_1 = new Intl.DateTimeFormat(this.locale, { month: style, timeZone: 'utc' }); |
| return range(12, (/** |
| * @param {?} i |
| * @return {?} |
| */ |
| function (i) { |
| return _this._stripDirectionalityCharacters(_this._format(dtf_1, new Date(2017, i, 1))); |
| })); |
| } |
| return DEFAULT_MONTH_NAMES[style]; |
| }; |
| /** |
| * @return {?} |
| */ |
| NativeDateAdapter.prototype.getDateNames = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (SUPPORTS_INTL_API) { |
| /** @type {?} */ |
| var dtf_2 = new Intl.DateTimeFormat(this.locale, { day: 'numeric', timeZone: 'utc' }); |
| return range(31, (/** |
| * @param {?} i |
| * @return {?} |
| */ |
| function (i) { return _this._stripDirectionalityCharacters(_this._format(dtf_2, new Date(2017, 0, i + 1))); })); |
| } |
| return DEFAULT_DATE_NAMES; |
| }; |
| /** |
| * @param {?} style |
| * @return {?} |
| */ |
| NativeDateAdapter.prototype.getDayOfWeekNames = /** |
| * @param {?} style |
| * @return {?} |
| */ |
| function (style) { |
| var _this = this; |
| if (SUPPORTS_INTL_API) { |
| /** @type {?} */ |
| var dtf_3 = new Intl.DateTimeFormat(this.locale, { weekday: style, timeZone: 'utc' }); |
| return range(7, (/** |
| * @param {?} i |
| * @return {?} |
| */ |
| function (i) { return _this._stripDirectionalityCharacters(_this._format(dtf_3, new Date(2017, 0, i + 1))); })); |
| } |
| return DEFAULT_DAY_OF_WEEK_NAMES[style]; |
| }; |
| /** |
| * @param {?} date |
| * @return {?} |
| */ |
| NativeDateAdapter.prototype.getYearName = /** |
| * @param {?} date |
| * @return {?} |
| */ |
| function (date) { |
| if (SUPPORTS_INTL_API) { |
| /** @type {?} */ |
| var dtf = new Intl.DateTimeFormat(this.locale, { year: 'numeric', timeZone: 'utc' }); |
| return this._stripDirectionalityCharacters(this._format(dtf, 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 new Date(date.getTime()); |
| }; |
| /** |
| * @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."); |
| } |
| /** @type {?} */ |
| var 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()))); |
| } |
| displayFormat = __assign({}, displayFormat, { timeZone: 'utc' }); |
| /** @type {?} */ |
| var dtf = new Intl.DateTimeFormat(this.locale, displayFormat); |
| return this._stripDirectionalityCharacters(this._format(dtf, 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) { |
| /** @type {?} */ |
| var 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)) { |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Creates a date but allows the month and date to overflow. |
| * @private |
| * @param {?} year |
| * @param {?} month |
| * @param {?} date |
| * @return {?} |
| */ |
| NativeDateAdapter.prototype._createDateWithOverflow = /** |
| * Creates a date but allows the month and date to overflow. |
| * @private |
| * @param {?} year |
| * @param {?} month |
| * @param {?} date |
| * @return {?} |
| */ |
| function (year, month, date) { |
| /** @type {?} */ |
| var 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. |
| * @returns The padded number. |
| */ |
| /** |
| * Pads a number to make it two digits. |
| * @private |
| * @param {?} n The number to pad. |
| * @return {?} The padded number. |
| */ |
| NativeDateAdapter.prototype._2digit = /** |
| * Pads a number to make it two digits. |
| * @private |
| * @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. |
| * @returns The stripped string. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} str The string to strip direction characters from. |
| * @return {?} The stripped string. |
| */ |
| function (str) { |
| return str.replace(/[\u200e\u200f]/g, ''); |
| }; |
| /** |
| * When converting Date object to string, javascript built-in functions may return wrong |
| * results because it applies its internal DST rules. The DST rules around the world change |
| * very frequently, and the current valid rule is not always valid in previous years though. |
| * We work around this problem building a new Date object which has its internal UTC |
| * representation with the local date and time. |
| * @param dtf Intl.DateTimeFormat object, containg the desired string format. It must have |
| * timeZone set to 'utc' to work fine. |
| * @param date Date from which we want to get the string representation according to dtf |
| * @returns A Date object with its UTC representation based on the passed in date info |
| */ |
| /** |
| * When converting Date object to string, javascript built-in functions may return wrong |
| * results because it applies its internal DST rules. The DST rules around the world change |
| * very frequently, and the current valid rule is not always valid in previous years though. |
| * We work around this problem building a new Date object which has its internal UTC |
| * representation with the local date and time. |
| * @private |
| * @param {?} dtf Intl.DateTimeFormat object, containg the desired string format. It must have |
| * timeZone set to 'utc' to work fine. |
| * @param {?} date Date from which we want to get the string representation according to dtf |
| * @return {?} A Date object with its UTC representation based on the passed in date info |
| */ |
| NativeDateAdapter.prototype._format = /** |
| * When converting Date object to string, javascript built-in functions may return wrong |
| * results because it applies its internal DST rules. The DST rules around the world change |
| * very frequently, and the current valid rule is not always valid in previous years though. |
| * We work around this problem building a new Date object which has its internal UTC |
| * representation with the local date and time. |
| * @private |
| * @param {?} dtf Intl.DateTimeFormat object, containg the desired string format. It must have |
| * timeZone set to 'utc' to work fine. |
| * @param {?} date Date from which we want to get the string representation according to dtf |
| * @return {?} A Date object with its UTC representation based on the passed in date info |
| */ |
| function (dtf, date) { |
| /** @type {?} */ |
| var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds())); |
| return dtf.format(d); |
| }; |
| NativeDateAdapter.decorators = [ |
| { type: core.Injectable }, |
| ]; |
| /** @nocollapse */ |
| NativeDateAdapter.ctorParameters = function () { return [ |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_LOCALE,] }] }, |
| { type: platform.Platform } |
| ]; }; |
| return NativeDateAdapter; |
| }(DateAdapter)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** @type {?} */ |
| var MAT_NATIVE_DATE_FORMATS = { |
| parse: { |
| dateInput: null, |
| }, |
| display: { |
| dateInput: { year: 'numeric', month: 'numeric', day: 'numeric' }, |
| monthYearLabel: { year: 'numeric', month: 'short' }, |
| dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' }, |
| monthYearA11yLabel: { year: 'numeric', month: 'long' }, |
| } |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var NativeDateModule = /** @class */ (function () { |
| function NativeDateModule() { |
| } |
| NativeDateModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [platform.PlatformModule], |
| providers: [ |
| { provide: DateAdapter, useClass: NativeDateAdapter }, |
| ], |
| },] }, |
| ]; |
| return NativeDateModule; |
| }()); |
| var ɵ0$1 = MAT_NATIVE_DATE_FORMATS; |
| var MatNativeDateModule = /** @class */ (function () { |
| function MatNativeDateModule() { |
| } |
| MatNativeDateModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [NativeDateModule], |
| providers: [{ provide: MAT_DATE_FORMATS, useValue: ɵ0$1 }], |
| },] }, |
| ]; |
| return MatNativeDateModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Error state matcher that matches when a control is invalid and dirty. |
| */ |
| var ShowOnDirtyErrorStateMatcher = /** @class */ (function () { |
| function ShowOnDirtyErrorStateMatcher() { |
| } |
| /** |
| * @param {?} control |
| * @param {?} form |
| * @return {?} |
| */ |
| ShowOnDirtyErrorStateMatcher.prototype.isErrorState = /** |
| * @param {?} control |
| * @param {?} form |
| * @return {?} |
| */ |
| function (control, form) { |
| return !!(control && control.invalid && (control.dirty || (form && form.submitted))); |
| }; |
| ShowOnDirtyErrorStateMatcher.decorators = [ |
| { type: core.Injectable }, |
| ]; |
| return ShowOnDirtyErrorStateMatcher; |
| }()); |
| /** |
| * Provider that defines how form controls behave with regards to displaying error messages. |
| */ |
| var ErrorStateMatcher = /** @class */ (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, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ ErrorStateMatcher.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function ErrorStateMatcher_Factory() { return new ErrorStateMatcher(); }, token: ErrorStateMatcher, providedIn: "root" }); |
| return ErrorStateMatcher; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to provide options to the Hammerjs instance. |
| * More info at http://hammerjs.github.io/api/. |
| * @type {?} |
| */ |
| var MAT_HAMMER_OPTIONS = new core.InjectionToken('MAT_HAMMER_OPTIONS'); |
| /** @type {?} */ |
| var ANGULAR_MATERIAL_SUPPORTED_HAMMER_GESTURES = [ |
| 'longpress', |
| 'slide', |
| 'slidestart', |
| 'slideend', |
| 'slideright', |
| 'slideleft' |
| ]; |
| var ɵ0$2 = /** |
| * @return {?} |
| */ |
| function () { }, ɵ1 = /** |
| * @return {?} |
| */ |
| function () { }; |
| /** |
| * Fake HammerInstance that is used when a Hammer instance is requested when HammerJS has not |
| * been loaded on the page. |
| * @type {?} |
| */ |
| var noopHammerInstance = { |
| on: (ɵ0$2), |
| off: (ɵ1), |
| }; |
| /** |
| * Adjusts configuration of our gesture library, Hammer. |
| */ |
| var GestureConfig = /** @class */ (function (_super) { |
| __extends(GestureConfig, _super); |
| function GestureConfig(_hammerOptions, commonModule) { |
| var _this = _super.call(this) || this; |
| _this._hammerOptions = _hammerOptions; |
| /** |
| * List of new event names to add to the gesture support list |
| */ |
| _this.events = ANGULAR_MATERIAL_SUPPORTED_HAMMER_GESTURES; |
| 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://material.io/design/#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://material.io/design/#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://material.io/design/#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) { |
| /** @type {?} */ |
| var hammer = typeof window !== 'undefined' ? ((/** @type {?} */ (window))).Hammer : null; |
| if (!hammer) { |
| // If HammerJS is not loaded here, return the noop HammerInstance. This is necessary to |
| // ensure that omitting HammerJS completely will not cause any errors while *also* supporting |
| // the lazy-loading of HammerJS via the HAMMER_LOADER token introduced in Angular 6.1. |
| // Because we can't depend on HAMMER_LOADER's existance until 7.0, we have to always set |
| // `this.events` to the set we support, instead of conditionally setting it to `[]` if |
| // `HAMMER_LOADER` is present (and then throwing an Error here if `window.Hammer` is |
| // undefined). |
| // @breaking-change 8.0.0 |
| return noopHammerInstance; |
| } |
| /** @type {?} */ |
| var mc = new hammer(element, this._hammerOptions || undefined); |
| // Default Hammer Recognizers. |
| /** @type {?} */ |
| var pan = new hammer.Pan(); |
| /** @type {?} */ |
| var swipe = new hammer.Swipe(); |
| /** @type {?} */ |
| var press = new 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 |
| /** @type {?} */ |
| var slide = this._createRecognizer(pan, { event: 'slide', threshold: 0 }, swipe); |
| /** @type {?} */ |
| var longpress = this._createRecognizer(press, { event: 'longpress', time: 500 }); |
| // Overwrite the default `pan` event to use the swipe event. |
| pan.recognizeWith(swipe); |
| // Since the slide event threshold is set to zero, the slide recognizer can fire and |
| // accidentally reset the longpress recognizer. In order to make sure that the two |
| // recognizers can run simultaneously but don't affect each other, we allow the slide |
| // recognizer to recognize while a longpress is being processed. |
| // See: https://github.com/hammerjs/hammer.js/blob/master/src/manager.js#L123-L124 |
| longpress.recognizeWith(slide); |
| // 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 */ |
| /** |
| * Creates a new recognizer, without affecting the default recognizers of HammerJS |
| * @private |
| * @param {?} base |
| * @param {?} options |
| * @param {...?} inheritances |
| * @return {?} |
| */ |
| GestureConfig.prototype._createRecognizer = /** |
| * Creates a new recognizer, without affecting the default recognizers of HammerJS |
| * @private |
| * @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]; |
| } |
| /** @type {?} */ |
| var recognizer = new ((/** @type {?} */ (base.constructor)))(options); |
| inheritances.push(base); |
| inheritances.forEach((/** |
| * @param {?} item |
| * @return {?} |
| */ |
| 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (function () { |
| function MatLine() { |
| } |
| MatLine.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-line], [matLine]', |
| host: { 'class': 'mat-line' } |
| },] }, |
| ]; |
| return MatLine; |
| }()); |
| /** |
| * Helper that takes a query list of lines and sets the correct class on the host. |
| * \@docs-private |
| * @param {?} lines |
| * @param {?} element |
| * @return {?} |
| */ |
| function setLines(lines, element) { |
| // Note: doesn't need to unsubscribe, because `changes` |
| // gets completed by Angular when the view is destroyed. |
| lines.changes.pipe(operators.startWith(lines)).subscribe((/** |
| * @param {?} __0 |
| * @return {?} |
| */ |
| function (_a) { |
| var length = _a.length; |
| setClass(element, 'mat-2-line', false); |
| setClass(element, 'mat-3-line', false); |
| setClass(element, 'mat-multi-line', false); |
| if (length === 2 || length === 3) { |
| setClass(element, "mat-" + length + "-line", true); |
| } |
| else if (length > 3) { |
| setClass(element, "mat-multi-line", true); |
| } |
| })); |
| } |
| /** |
| * Adds or removes a class from an element. |
| * @param {?} element |
| * @param {?} className |
| * @param {?} isAdd |
| * @return {?} |
| */ |
| function setClass(element, className, isAdd) { |
| /** @type {?} */ |
| var classList = element.nativeElement.classList; |
| isAdd ? classList.add(className) : classList.remove(className); |
| } |
| /** |
| * Helper that takes a query list of lines and sets the correct class on the host. |
| * \@docs-private |
| * @deprecated Use `setLines` instead. |
| * \@breaking-change 8.0.0 |
| */ |
| var /** |
| * Helper that takes a query list of lines and sets the correct class on the host. |
| * \@docs-private |
| * @deprecated Use `setLines` instead. |
| * \@breaking-change 8.0.0 |
| */ |
| MatLineSetter = /** @class */ (function () { |
| function MatLineSetter(lines, element) { |
| setLines(lines, element); |
| } |
| return MatLineSetter; |
| }()); |
| var MatLineModule = /** @class */ (function () { |
| function MatLineModule() { |
| } |
| MatLineModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule], |
| exports: [MatLine, MatCommonModule], |
| declarations: [MatLine], |
| },] }, |
| ]; |
| return MatLineModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 /** |
| * Reference to a previously launched ripple element. |
| */ |
| RippleRef = /** @class */ (function () { |
| function RippleRef(_renderer, element, config) { |
| this._renderer = _renderer; |
| this.element = element; |
| this.config = config; |
| /** |
| * Current state of the ripple. |
| */ |
| 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Default ripple animation configuration for ripples without an explicit |
| * animation config specified. |
| * @type {?} |
| */ |
| 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. |
| * @type {?} |
| */ |
| var ignoreMouseEventsTimeout = 800; |
| /** |
| * Options that apply to all the event listeners that are bound by the ripple renderer. |
| * @type {?} |
| */ |
| var passiveEventOptions = platform.normalizePassiveListenerOptions({ passive: true }); |
| /** |
| * 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 /** |
| * 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 |
| */ |
| RippleRenderer = /** @class */ (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(); |
| /** |
| * Function being called whenever the trigger is being pressed using mouse. |
| */ |
| this._onMousedown = (/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| // Screen readers will fire fake mouse events for space/enter. Skip launching a |
| // ripple in this case for consistency with the non-screen-reader experience. |
| /** @type {?} */ |
| var isFakeMousedown = a11y.isFakeMousedownFromScreenReader(event); |
| /** @type {?} */ |
| var isSyntheticEvent = _this._lastTouchStartEvent && |
| Date.now() < _this._lastTouchStartEvent + ignoreMouseEventsTimeout; |
| if (!_this._target.rippleDisabled && !isFakeMousedown && !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 = (/** |
| * @param {?} event |
| * @return {?} |
| */ |
| 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. |
| _this._lastTouchStartEvent = Date.now(); |
| _this._isPointerDown = true; |
| // Use `changedTouches` so we skip any touches where the user put |
| // their finger down, but used another finger to tap the element again. |
| /** @type {?} */ |
| var touches = event.changedTouches; |
| for (var i = 0; i < touches.length; i++) { |
| _this.fadeInRipple(touches[i].clientX, touches[i].clientY, _this._target.rippleConfig); |
| } |
| } |
| }); |
| /** |
| * Function being called whenever the trigger is being released. |
| */ |
| this._onPointerUp = (/** |
| * @return {?} |
| */ |
| function () { |
| if (!_this._isPointerDown) { |
| return; |
| } |
| _this._isPointerDown = false; |
| // Fade-out all ripples that are visible and not persistent. |
| _this._activeRipples.forEach((/** |
| * @param {?} ripple |
| * @return {?} |
| */ |
| 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. |
| /** @type {?} */ |
| var 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) |
| .set('mouseup', this._onPointerUp) |
| .set('mouseleave', this._onPointerUp) |
| .set('touchstart', this._onTouchStart) |
| .set('touchend', this._onPointerUp) |
| .set('touchcancel', 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 = {}; } |
| /** @type {?} */ |
| var containerRect = this._containerRect = |
| this._containerRect || this._containerElement.getBoundingClientRect(); |
| /** @type {?} */ |
| var animationConfig = __assign({}, defaultRippleAnimationConfig, config.animation); |
| if (config.centered) { |
| x = containerRect.left + containerRect.width / 2; |
| y = containerRect.top + containerRect.height / 2; |
| } |
| /** @type {?} */ |
| var radius = config.radius || distanceToFurthestCorner(x, y, containerRect); |
| /** @type {?} */ |
| var offsetX = x - containerRect.left; |
| /** @type {?} */ |
| var offsetY = y - containerRect.top; |
| /** @type {?} */ |
| var duration = animationConfig.enterDuration; |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var 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); |
| if (!config.persistent) { |
| this._mostRecentTransientRipple = 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((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var isMostRecentTransientRipple = rippleRef === _this._mostRecentTransientRipple; |
| rippleRef.state = RippleState.VISIBLE; |
| // When the timer runs out while the user has kept their pointer down, we want to |
| // keep only the persistent ripples and the latest transient ripple. We do this, |
| // because we don't want stacked transient ripples to appear after their enter |
| // animation has finished. |
| if (!config.persistent && (!isMostRecentTransientRipple || !_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) { |
| /** @type {?} */ |
| var wasActive = this._activeRipples.delete(rippleRef); |
| if (rippleRef === this._mostRecentTransientRipple) { |
| this._mostRecentTransientRipple = null; |
| } |
| // Clear out the cached bounding rect if we have no more ripples. |
| if (!this._activeRipples.size) { |
| this._containerRect = null; |
| } |
| // For ripples that are not active anymore, don't re-run the fade-out animation. |
| if (!wasActive) { |
| return; |
| } |
| /** @type {?} */ |
| var rippleEl = rippleRef.element; |
| /** @type {?} */ |
| var 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((/** |
| * @return {?} |
| */ |
| 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((/** |
| * @param {?} ripple |
| * @return {?} |
| */ |
| 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((/** |
| * @return {?} |
| */ |
| function () { |
| _this._triggerEvents.forEach((/** |
| * @param {?} fn |
| * @param {?} type |
| * @return {?} |
| */ |
| function (fn, type) { |
| element.addEventListener(type, fn, passiveEventOptions); |
| })); |
| })); |
| this._triggerElement = element; |
| }; |
| /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */ |
| /** |
| * Runs a timeout outside of the Angular zone to avoid triggering the change detection. |
| * @private |
| * @param {?} fn |
| * @param {?=} delay |
| * @return {?} |
| */ |
| RippleRenderer.prototype._runTimeoutOutsideZone = /** |
| * Runs a timeout outside of the Angular zone to avoid triggering the change detection. |
| * @private |
| * @param {?} fn |
| * @param {?=} delay |
| * @return {?} |
| */ |
| function (fn, delay) { |
| if (delay === void 0) { delay = 0; } |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| 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((/** |
| * @param {?} fn |
| * @param {?} type |
| * @return {?} |
| */ |
| function (fn, type) { |
| (/** @type {?} */ (_this._triggerElement)).removeEventListener(type, fn, passiveEventOptions); |
| })); |
| } |
| }; |
| 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) { |
| /** @type {?} */ |
| var distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right)); |
| /** @type {?} */ |
| var 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to specify the global ripple options. |
| * @type {?} |
| */ |
| var MAT_RIPPLE_GLOBAL_OPTIONS = new core.InjectionToken('mat-ripple-global-options'); |
| var MatRipple = /** @class */ (function () { |
| function MatRipple(_elementRef, ngZone, platform$$1, globalOptions, animationMode) { |
| 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; |
| 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); |
| if (animationMode === 'NoopAnimations') { |
| this._globalOptions.animation = { enterDuration: 0, exitDuration: 0 }; |
| } |
| } |
| Object.defineProperty(MatRipple.prototype, "disabled", { |
| /** |
| * Whether click events will not trigger the ripple. Ripples can be still launched manually |
| * by using the `launch()` method. |
| */ |
| 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", { |
| /** |
| * The element that triggers the ripple when click events are received. |
| * Defaults to the directive's host element. |
| */ |
| 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) { |
| this._trigger = trigger; |
| 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. |
| * @docs-private Implemented as part of RippleTarget |
| */ |
| get: /** |
| * Ripple configuration from the directive's input values. |
| * \@docs-private Implemented as part of RippleTarget |
| * @return {?} |
| */ |
| function () { |
| return { |
| centered: this.centered, |
| radius: this.radius, |
| color: this.color, |
| animation: __assign({}, this._globalOptions.animation, this.animation), |
| terminateOnPointerUp: this._globalOptions.terminateOnPointerUp, |
| }; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatRipple.prototype, "rippleDisabled", { |
| /** |
| * Whether ripples on pointer-down are disabled or not. |
| * @docs-private Implemented as part of RippleTarget |
| */ |
| get: /** |
| * Whether ripples on pointer-down are disabled or not. |
| * \@docs-private Implemented as part of RippleTarget |
| * @return {?} |
| */ |
| function () { |
| return this.disabled || !!this._globalOptions.disabled; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** Sets up the trigger event listeners if ripples are enabled. */ |
| /** |
| * Sets up the trigger event listeners if ripples are enabled. |
| * @private |
| * @return {?} |
| */ |
| MatRipple.prototype._setupTriggerEventsIfEnabled = /** |
| * Sets up the trigger event listeners if ripples are enabled. |
| * @private |
| * @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,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| 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',] }], |
| 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatRippleModule = /** @class */ (function () { |
| function MatRippleModule() { |
| } |
| MatRippleModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule, platform.PlatformModule], |
| exports: [MatRipple, MatCommonModule], |
| declarations: [MatRipple], |
| },] }, |
| ]; |
| return MatRippleModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (function () { |
| function MatPseudoCheckbox(_animationMode) { |
| this._animationMode = _animationMode; |
| /** |
| * 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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| selector: 'mat-pseudo-checkbox', |
| styles: [".mat-pseudo-checkbox{width:16px;height:16px;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-color:transparent}._mat-animation-noopable.mat-pseudo-checkbox{transition:none;animation:none}._mat-animation-noopable.mat-pseudo-checkbox::after{transition:none}.mat-pseudo-checkbox-disabled{cursor:default}.mat-pseudo-checkbox-indeterminate::after{top:5px;left:1px;width:10px;opacity:1;border-radius:2px}.mat-pseudo-checkbox-checked::after{top:2.4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}"], |
| 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', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatPseudoCheckbox.ctorParameters = function () { return [ |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatPseudoCheckbox.propDecorators = { |
| state: [{ type: core.Input }], |
| disabled: [{ type: core.Input }] |
| }; |
| return MatPseudoCheckbox; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatPseudoCheckboxModule = /** @class */ (function () { |
| function MatPseudoCheckboxModule() { |
| } |
| MatPseudoCheckboxModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| exports: [MatPseudoCheckbox], |
| declarations: [MatPseudoCheckbox] |
| },] }, |
| ]; |
| return MatPseudoCheckboxModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatOptgroup. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatOptgroup. |
| /** |
| * \@docs-private |
| */ |
| MatOptgroupBase = /** @class */ (function () { |
| function MatOptgroupBase() { |
| } |
| return MatOptgroupBase; |
| }()); |
| /** @type {?} */ |
| var _MatOptgroupMixinBase = mixinDisabled(MatOptgroupBase); |
| // Counter for unique group ids. |
| /** @type {?} */ |
| var _uniqueOptgroupIdCounter = 0; |
| /** |
| * Component that is used to group instances of `mat-option`. |
| */ |
| var MatOptgroup = /** @class */ (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 }}<ng-content></ng-content></label><ng-content select=\"mat-option, ng-container\"></ng-content>", |
| encapsulation: core.ViewEncapsulation.None, |
| 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;max-width:100%;-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}.mat-optgroup-label .mat-icon svg{vertical-align:top}[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', |
| } |
| },] }, |
| ]; |
| MatOptgroup.propDecorators = { |
| label: [{ type: core.Input }] |
| }; |
| return MatOptgroup; |
| }(_MatOptgroupMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Option IDs need to be unique across components, so this counter exists outside of |
| * the component definition. |
| * @type {?} |
| */ |
| var _uniqueIdCounter = 0; |
| /** |
| * Event object emitted by MatOption when selected or deselected. |
| */ |
| var /** |
| * Event object emitted by MatOption when selected or deselected. |
| */ |
| MatOptionSelectionChange = /** @class */ (function () { |
| function MatOptionSelectionChange(source, isUserInput) { |
| if (isUserInput === void 0) { isUserInput = false; } |
| this.source = source; |
| this.isUserInput = isUserInput; |
| } |
| return MatOptionSelectionChange; |
| }()); |
| /** |
| * Injection token used to provide the parent component to options. |
| * @type {?} |
| */ |
| var MAT_OPTION_PARENT_COMPONENT = new core.InjectionToken('MAT_OPTION_PARENT_COMPONENT'); |
| /** |
| * Single option inside of a `<mat-select>` element. |
| */ |
| var MatOption = /** @class */ (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._mostRecentViewValue = ''; |
| /** |
| * The unique ID of the option. |
| */ |
| this.id = "mat-option-" + _uniqueIdCounter++; |
| /** |
| * Event emitted when the option is selected or deselected. |
| */ |
| // tslint:disable-next-line:no-output-on-prefix |
| this.onSelectionChange = new core.EventEmitter(); |
| /** |
| * Emits when the state of the option changes and any parents have to be notified. |
| */ |
| this._stateChanges = new rxjs.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, "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", { |
| /** Whether the option is 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 () { |
| if (!this._selected) { |
| this._selected = true; |
| this._changeDetectorRef.markForCheck(); |
| this._emitSelectionChangeEvent(); |
| } |
| }; |
| /** Deselects the option. */ |
| /** |
| * Deselects the option. |
| * @return {?} |
| */ |
| MatOption.prototype.deselect = /** |
| * Deselects the option. |
| * @return {?} |
| */ |
| function () { |
| if (this._selected) { |
| 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 () { |
| /** @type {?} */ |
| var 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) && !keycodes.hasModifierKey(event)) { |
| 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); |
| } |
| }; |
| /** |
| * Gets the `aria-selected` value for the option. We explicitly omit the `aria-selected` |
| * attribute from single-selection, unselected options. Including the `aria-selected="false"` |
| * attributes adds a significant amount of noise to screen-reader users without providing useful |
| * information. |
| */ |
| /** |
| * Gets the `aria-selected` value for the option. We explicitly omit the `aria-selected` |
| * attribute from single-selection, unselected options. Including the `aria-selected="false"` |
| * attributes adds a significant amount of noise to screen-reader users without providing useful |
| * information. |
| * @return {?} |
| */ |
| MatOption.prototype._getAriaSelected = /** |
| * Gets the `aria-selected` value for the option. We explicitly omit the `aria-selected` |
| * attribute from single-selection, unselected options. Including the `aria-selected="false"` |
| * attributes adds a significant amount of noise to screen-reader users without providing useful |
| * information. |
| * @return {?} |
| */ |
| function () { |
| return this.selected || (this.multiple ? false : null); |
| }; |
| /** 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) { |
| /** @type {?} */ |
| var viewValue = this.viewValue; |
| if (viewValue !== this._mostRecentViewValue) { |
| this._mostRecentViewValue = viewValue; |
| this._stateChanges.next(); |
| } |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatOption.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._stateChanges.complete(); |
| }; |
| /** Emits the selection change event. */ |
| /** |
| * Emits the selection change event. |
| * @private |
| * @param {?=} isUserInput |
| * @return {?} |
| */ |
| MatOption.prototype._emitSelectionChangeEvent = /** |
| * Emits the selection change event. |
| * @private |
| * @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]': '_getAriaSelected()', |
| '[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;max-width:100%;position:relative;cursor:pointer;outline:0;display:flex;flex-direction:row;max-width:100%;box-sizing:border-box;align-items:center;-webkit-tap-highlight-color:transparent}.mat-option[disabled]{cursor:default}[dir=rtl] .mat-option{text-align:right}.mat-option .mat-icon{margin-right:16px;vertical-align:middle}.mat-option .mat-icon svg{vertical-align:top}[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}@media (-ms-high-contrast:active){.mat-option{margin:0 1px}.mat-option.mat-active{border:solid 1px currentColor;margin:0}}.mat-option-text{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis}.mat-option .mat-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}@media (-ms-high-contrast:active){.mat-option .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, |
| 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 }], |
| id: [{ 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) { |
| /** @type {?} */ |
| var optionsArray = options.toArray(); |
| /** @type {?} */ |
| var groups = optionGroups.toArray(); |
| /** @type {?} */ |
| var groupCounter = 0; |
| for (var 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) { |
| /** @type {?} */ |
| var 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatOptionModule = /** @class */ (function () { |
| function MatOptionModule() { |
| } |
| MatOptionModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatRippleModule, common.CommonModule, MatPseudoCheckboxModule], |
| exports: [MatOption, MatOptgroup], |
| declarations: [MatOption, MatOptgroup] |
| },] }, |
| ]; |
| return MatOptionModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * InjectionToken that can be used to specify the global label options. |
| * @type {?} |
| */ |
| var MAT_LABEL_GLOBAL_OPTIONS = new core.InjectionToken('mat-label-global-options'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * When constructing a Date, the month is zero-based. This can be confusing, since people are |
| * used to seeing them one-based. So we create these aliases to make writing the tests easier. |
| * \@docs-private |
| * \@breaking-change 8.0.0 Remove this with V8 since it was only targeted for testing. |
| * @type {?} |
| */ |
| var JAN = 0; |
| /** @type {?} */ |
| var FEB = 1; |
| /** @type {?} */ |
| var MAR = 2; |
| /** @type {?} */ |
| var APR = 3; |
| /** @type {?} */ |
| var MAY = 4; |
| /** @type {?} */ |
| var JUN = 5; |
| /** @type {?} */ |
| var JUL = 6; |
| /** @type {?} */ |
| var AUG = 7; |
| /** @type {?} */ |
| var SEP = 8; |
| /** @type {?} */ |
| var OCT = 9; |
| /** @type {?} */ |
| var NOV = 10; |
| /** @type {?} */ |
| var DEC = 11; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var nextUniqueId = 0; |
| /** |
| * Single error message to be shown underneath the form field. |
| */ |
| var MatError = /** @class */ (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', |
| } |
| },] }, |
| ]; |
| MatError.propDecorators = { |
| id: [{ type: core.Input }] |
| }; |
| return MatError; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by the MatFormField. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matFormFieldAnimations = { |
| /** |
| * Animation that transitions the form field's error and hint messages. |
| */ |
| transitionMessages: animations$1.trigger('transitionMessages', [ |
| // TODO(mmalerba): Use angular animations for label animation as well. |
| animations$1.state('enter', animations$1.style({ opacity: 1, transform: 'translateY(0%)' })), |
| animations$1.transition('void => enter', [ |
| animations$1.style({ opacity: 0, transform: 'translateY(-100%)' }), |
| animations$1.animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'), |
| ]), |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * An interface which allows a control to work inside of a `MatFormField`. |
| * @abstract |
| * @template T |
| */ |
| var /** |
| * An interface which allows a control to work inside of a `MatFormField`. |
| * @abstract |
| * @template T |
| */ |
| MatFormFieldControl = /** @class */ (function () { |
| function MatFormFieldControl() { |
| } |
| return MatFormFieldControl; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var nextUniqueId$1 = 0; |
| /** |
| * Hint text to be shown underneath the form field control. |
| */ |
| var MatHint = /** @class */ (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$1++; |
| } |
| 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', |
| } |
| },] }, |
| ]; |
| MatHint.propDecorators = { |
| align: [{ type: core.Input }], |
| id: [{ type: core.Input }] |
| }; |
| return MatHint; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * The floating label for a `mat-form-field`. |
| */ |
| var MatLabel = /** @class */ (function () { |
| function MatLabel() { |
| } |
| MatLabel.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-label' |
| },] }, |
| ]; |
| return MatLabel; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * The placeholder text for an `MatFormField`. |
| * @deprecated Use `<mat-label>` to specify the label and the `placeholder` attribute to specify the |
| * placeholder. |
| * \@breaking-change 8.0.0 |
| */ |
| var MatPlaceholder = /** @class */ (function () { |
| function MatPlaceholder() { |
| } |
| MatPlaceholder.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-placeholder' |
| },] }, |
| ]; |
| return MatPlaceholder; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Prefix to be placed in front of the form field. |
| */ |
| var MatPrefix = /** @class */ (function () { |
| function MatPrefix() { |
| } |
| MatPrefix.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matPrefix]', |
| },] }, |
| ]; |
| return MatPrefix; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Suffix to be placed at the end of the form field. |
| */ |
| var MatSuffix = /** @class */ (function () { |
| function MatSuffix() { |
| } |
| MatSuffix.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matSuffix]', |
| },] }, |
| ]; |
| return MatSuffix; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var nextUniqueId$2 = 0; |
| /** @type {?} */ |
| var floatingLabelScale = 0.75; |
| /** @type {?} */ |
| var outlineGapPadding = 5; |
| /** |
| * Boilerplate for applying mixins to MatFormField. |
| * \@docs-private |
| */ |
| var /** |
| * Boilerplate for applying mixins to MatFormField. |
| * \@docs-private |
| */ |
| MatFormFieldBase = /** @class */ (function () { |
| function MatFormFieldBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatFormFieldBase; |
| }()); |
| /** |
| * Base class to which we're applying the form field mixins. |
| * \@docs-private |
| * @type {?} |
| */ |
| var _MatFormFieldMixinBase = mixinColor(MatFormFieldBase, 'primary'); |
| /** |
| * Injection token that can be used to configure the |
| * default options for all form field within an app. |
| * @type {?} |
| */ |
| var MAT_FORM_FIELD_DEFAULT_OPTIONS = new core.InjectionToken('MAT_FORM_FIELD_DEFAULT_OPTIONS'); |
| /** |
| * Container for form controls that applies Material Design styling and behavior. |
| */ |
| var MatFormField = /** @class */ (function (_super) { |
| __extends(MatFormField, _super); |
| function MatFormField(_elementRef, _changeDetectorRef, labelOptions, _dir, _defaults, _platform, _ngZone, _animationMode) { |
| var _this = _super.call(this, _elementRef) || this; |
| _this._elementRef = _elementRef; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._dir = _dir; |
| _this._defaults = _defaults; |
| _this._platform = _platform; |
| _this._ngZone = _ngZone; |
| /** |
| * Whether the outline gap needs to be calculated |
| * immediately on the next change detection run. |
| */ |
| _this._outlineGapCalculationNeededImmediately = false; |
| /** |
| * Whether the outline gap needs to be calculated next time the zone has stabilized. |
| */ |
| _this._outlineGapCalculationNeededOnStable = false; |
| _this._destroyed = new rxjs.Subject(); |
| /** |
| * 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$2++; |
| // Unique id for the internal form field label. |
| _this._labelId = "mat-form-field-label-" + nextUniqueId$2++; |
| _this._labelOptions = labelOptions ? labelOptions : {}; |
| _this.floatLabel = _this._labelOptions.float || 'auto'; |
| _this._animationsEnabled = _animationMode !== 'NoopAnimations'; |
| // Set the default through here so we invoke the setter on the first run. |
| _this.appearance = (_defaults && _defaults.appearance) ? _defaults.appearance : 'legacy'; |
| return _this; |
| } |
| Object.defineProperty(MatFormField.prototype, "appearance", { |
| /** The form-field appearance style. */ |
| get: /** |
| * The form-field appearance style. |
| * @return {?} |
| */ |
| function () { return this._appearance; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var oldValue = this._appearance; |
| this._appearance = value || (this._defaults && this._defaults.appearance) || 'legacy'; |
| if (this._appearance === 'outline' && oldValue !== value) { |
| this._outlineGapCalculationNeededOnStable = true; |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatFormField.prototype, "hideRequiredMarker", { |
| /** Whether the required marker should be hidden. */ |
| 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", { |
| /** Text for the form field hint. */ |
| 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, "floatLabel", { |
| /** |
| * Whether the label should always float, never float or float as the user types. |
| * |
| * Note: only the legacy appearance supports the `never` option. `never` was originally added as a |
| * way to make the floating label emulate the behavior of a standard input placeholder. However |
| * the form field now supports both floating labels and placeholders. Therefore in the non-legacy |
| * appearances the `never` option has been disabled in favor of just using the placeholder. |
| */ |
| get: /** |
| * Whether the label should always float, never float or float as the user types. |
| * |
| * Note: only the legacy appearance supports the `never` option. `never` was originally added as a |
| * way to make the floating label emulate the behavior of a standard input placeholder. However |
| * the form field now supports both floating labels and placeholders. Therefore in the non-legacy |
| * appearances the `never` option has been disabled in favor of just using the placeholder. |
| * @return {?} |
| */ |
| function () { |
| return this.appearance !== 'legacy' && this._floatLabel === 'never' ? 'auto' : 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 |
| }); |
| Object.defineProperty(MatFormField.prototype, "_control", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| // TODO(crisbeto): we need this hacky workaround in order to support both Ivy |
| // and ViewEngine. We should clean this up once Ivy is the default renderer. |
| return this._explicitFormFieldControl || this._controlNonStatic || this._controlStatic; |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._explicitFormFieldControl = value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatFormField.prototype, "_labelChild", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| return this._labelChildNonStatic || this._labelChildStatic; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * Gets an ElementRef for the element that a overlay attached to the form-field should be |
| * positioned relative to. |
| */ |
| /** |
| * Gets an ElementRef for the element that a overlay attached to the form-field should be |
| * positioned relative to. |
| * @return {?} |
| */ |
| MatFormField.prototype.getConnectedOverlayOrigin = /** |
| * Gets an ElementRef for the element that a overlay attached to the form-field should be |
| * positioned relative to. |
| * @return {?} |
| */ |
| function () { |
| return this._connectionContainerRef || this._elementRef; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatFormField.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._validateControlChild(); |
| /** @type {?} */ |
| var control = this._control; |
| if (control.controlType) { |
| this._elementRef.nativeElement.classList.add("mat-form-field-type-" + control.controlType); |
| } |
| // Subscribe to changes in the child control state in order to update the form field UI. |
| control.stateChanges.pipe(operators.startWith((/** @type {?} */ (null)))).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._validatePlaceholders(); |
| _this._syncDescribedByIds(); |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| // Run change detection if the value changes. |
| if (control.ngControl && control.ngControl.valueChanges) { |
| control.ngControl.valueChanges |
| .pipe(operators.takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._changeDetectorRef.markForCheck(); })); |
| } |
| // Note that we have to run outside of the `NgZone` explicitly, |
| // in order to avoid throwing users into an infinite loop |
| // if `zone-patch-rxjs` is included. |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| _this._ngZone.onStable.asObservable().pipe(operators.takeUntil(_this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this._outlineGapCalculationNeededOnStable) { |
| _this.updateOutlineGap(); |
| } |
| })); |
| })); |
| // Run change detection and update the outline if the suffix or prefix changes. |
| rxjs.merge(this._prefixChildren.changes, this._suffixChildren.changes).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._outlineGapCalculationNeededOnStable = true; |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| // Re-validate when the number of hints changes. |
| this._hintChildren.changes.pipe(operators.startWith(null)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._processHints(); |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| // Update the aria-described by when the number of errors changes. |
| this._errorChildren.changes.pipe(operators.startWith(null)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._syncDescribedByIds(); |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| if (this._dir) { |
| this._dir.change.pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this.updateOutlineGap(); })); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatFormField.prototype.ngAfterContentChecked = /** |
| * @return {?} |
| */ |
| function () { |
| this._validateControlChild(); |
| if (this._outlineGapCalculationNeededImmediately) { |
| this.updateOutlineGap(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatFormField.prototype.ngAfterViewInit = /** |
| * @return {?} |
| */ |
| function () { |
| // Avoid animations on load. |
| this._subscriptAnimationState = 'enter'; |
| this._changeDetectorRef.detectChanges(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatFormField.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._destroyed.next(); |
| this._destroyed.complete(); |
| }; |
| /** 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) { |
| /** @type {?} */ |
| var ngControl = this._control ? this._control.ngControl : null; |
| return ngControl && ngControl[prop]; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatFormField.prototype._hasPlaceholder = /** |
| * @return {?} |
| */ |
| function () { |
| return !!(this._control && 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._shouldAlwaysFloat); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatFormField.prototype._hideControlPlaceholder = /** |
| * @return {?} |
| */ |
| function () { |
| // In the legacy appearance the placeholder is promoted to a label if no label is given. |
| return this.appearance === 'legacy' && !this._hasLabel() || |
| this._hasLabel() && !this._shouldLabelFloat(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatFormField.prototype._hasFloatingLabel = /** |
| * @return {?} |
| */ |
| function () { |
| // In the legacy appearance the placeholder is promoted to a label if no label is given. |
| return this._hasLabel() || this.appearance === 'legacy' && 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) { |
| // If animations are disabled, we shouldn't go in here, |
| // because the `transitionend` will never fire. |
| if (this._animationsEnabled) { |
| this._showAlwaysAnimate = true; |
| rxjs.fromEvent(this._label.nativeElement, 'transitionend').pipe(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._showAlwaysAnimate = false; |
| })); |
| } |
| this.floatLabel = 'always'; |
| 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). |
| */ |
| /** |
| * Ensure that there is only one placeholder (either `placeholder` attribute on the child control |
| * or child element with the `mat-placeholder` directive). |
| * @private |
| * @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). |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this._control.placeholder && this._placeholderChild) { |
| throw getMatFormFieldPlaceholderConflictError(); |
| } |
| }; |
| /** Does any extra processing that is required when handling the hints. */ |
| /** |
| * Does any extra processing that is required when handling the hints. |
| * @private |
| * @return {?} |
| */ |
| MatFormField.prototype._processHints = /** |
| * Does any extra processing that is required when handling the hints. |
| * @private |
| * @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"`. |
| */ |
| /** |
| * Ensure that there is a maximum of one of each `<mat-hint>` alignment specified, with the |
| * attribute being considered as `align="start"`. |
| * @private |
| * @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"`. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._hintChildren) { |
| /** @type {?} */ |
| var startHint_1; |
| /** @type {?} */ |
| var endHint_1; |
| this._hintChildren.forEach((/** |
| * @param {?} hint |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * Sets the list of element IDs that describe the child control. This allows the control to update |
| * its `aria-describedby` attribute accordingly. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this._control) { |
| /** @type {?} */ |
| var ids = []; |
| if (this._getDisplayedMessages() === 'hint') { |
| /** @type {?} */ |
| var startHint = this._hintChildren ? |
| this._hintChildren.find((/** |
| * @param {?} hint |
| * @return {?} |
| */ |
| function (hint) { return hint.align === 'start'; })) : null; |
| /** @type {?} */ |
| var endHint = this._hintChildren ? |
| this._hintChildren.find((/** |
| * @param {?} hint |
| * @return {?} |
| */ |
| 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((/** |
| * @param {?} error |
| * @return {?} |
| */ |
| 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. |
| * @protected |
| * @return {?} |
| */ |
| MatFormField.prototype._validateControlChild = /** |
| * Throws an error if the form field's control is missing. |
| * @protected |
| * @return {?} |
| */ |
| function () { |
| if (!this._control) { |
| throw getMatFormFieldMissingControlError(); |
| } |
| }; |
| /** |
| * Updates the width and position of the gap in the outline. Only relevant for the outline |
| * appearance. |
| */ |
| /** |
| * Updates the width and position of the gap in the outline. Only relevant for the outline |
| * appearance. |
| * @return {?} |
| */ |
| MatFormField.prototype.updateOutlineGap = /** |
| * Updates the width and position of the gap in the outline. Only relevant for the outline |
| * appearance. |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var labelEl = this._label ? this._label.nativeElement : null; |
| if (this.appearance !== 'outline' || !labelEl || !labelEl.children.length || |
| !labelEl.textContent.trim()) { |
| return; |
| } |
| if (!this._platform.isBrowser) { |
| // getBoundingClientRect isn't available on the server. |
| return; |
| } |
| // If the element is not present in the DOM, the outline gap will need to be calculated |
| // the next time it is checked and in the DOM. |
| if (!(/** @type {?} */ (document.documentElement)).contains(this._elementRef.nativeElement)) { |
| this._outlineGapCalculationNeededImmediately = true; |
| return; |
| } |
| /** @type {?} */ |
| var startWidth = 0; |
| /** @type {?} */ |
| var gapWidth = 0; |
| /** @type {?} */ |
| var container = this._connectionContainerRef.nativeElement; |
| /** @type {?} */ |
| var startEls = container.querySelectorAll('.mat-form-field-outline-start'); |
| /** @type {?} */ |
| var gapEls = container.querySelectorAll('.mat-form-field-outline-gap'); |
| if (this._label && this._label.nativeElement.children.length) { |
| /** @type {?} */ |
| var containerRect = container.getBoundingClientRect(); |
| // If the container's width and height are zero, it means that the element is |
| // invisible and we can't calculate the outline gap. Mark the element as needing |
| // to be checked the next time the zone stabilizes. We can't do this immediately |
| // on the next change detection, because even if the element becomes visible, |
| // the `ClientRect` won't be reclaculated immediately. We reset the |
| // `_outlineGapCalculationNeededImmediately` flag some we don't run the checks twice. |
| if (containerRect.width === 0 && containerRect.height === 0) { |
| this._outlineGapCalculationNeededOnStable = true; |
| this._outlineGapCalculationNeededImmediately = false; |
| return; |
| } |
| /** @type {?} */ |
| var containerStart = this._getStartEnd(containerRect); |
| /** @type {?} */ |
| var labelStart = this._getStartEnd(labelEl.children[0].getBoundingClientRect()); |
| /** @type {?} */ |
| var labelWidth = 0; |
| for (var _i = 0, _a = labelEl.children; _i < _a.length; _i++) { |
| var child = _a[_i]; |
| labelWidth += child.offsetWidth; |
| } |
| startWidth = labelStart - containerStart - outlineGapPadding; |
| gapWidth = labelWidth > 0 ? labelWidth * floatingLabelScale + outlineGapPadding * 2 : 0; |
| } |
| for (var i = 0; i < startEls.length; i++) { |
| startEls.item(i).style.width = startWidth + "px"; |
| } |
| for (var i = 0; i < gapEls.length; i++) { |
| gapEls.item(i).style.width = gapWidth + "px"; |
| } |
| this._outlineGapCalculationNeededOnStable = |
| this._outlineGapCalculationNeededImmediately = false; |
| }; |
| /** Gets the start end of the rect considering the current directionality. */ |
| /** |
| * Gets the start end of the rect considering the current directionality. |
| * @private |
| * @param {?} rect |
| * @return {?} |
| */ |
| MatFormField.prototype._getStartEnd = /** |
| * Gets the start end of the rect considering the current directionality. |
| * @private |
| * @param {?} rect |
| * @return {?} |
| */ |
| function (rect) { |
| return this._dir && this._dir.value === 'rtl' ? rect.right : rect.left; |
| }; |
| MatFormField.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-form-field', |
| exportAs: 'matFormField', |
| template: "<div class=\"mat-form-field-wrapper\"><div class=\"mat-form-field-flex\" #connectionContainer (click)=\"_control.onContainerClick && _control.onContainerClick($event)\"><ng-container *ngIf=\"appearance == 'outline'\"><div class=\"mat-form-field-outline\"><div class=\"mat-form-field-outline-start\"></div><div class=\"mat-form-field-outline-gap\"></div><div class=\"mat-form-field-outline-end\"></div></div><div class=\"mat-form-field-outline mat-form-field-outline-thick\"><div class=\"mat-form-field-outline-start\"></div><div class=\"mat-form-field-outline-gap\"></div><div class=\"mat-form-field-outline-end\"></div></div></ng-container><div class=\"mat-form-field-prefix\" *ngIf=\"_prefixChildren.length\"><ng-content select=\"[matPrefix]\"></ng-content></div><div class=\"mat-form-field-infix\" #inputContainer><ng-content></ng-content><span class=\"mat-form-field-label-wrapper\"><label class=\"mat-form-field-label\" (cdkObserveContent)=\"updateOutlineGap()\" [cdkObserveContentDisabled]=\"appearance != 'outline'\" [id]=\"_labelId\" [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-form-field-suffix\" *ngIf=\"_suffixChildren.length\"><ng-content select=\"[matSuffix]\"></ng-content></div></div><div class=\"mat-form-field-underline\" #underline *ngIf=\"appearance != 'outline'\"><span class=\"mat-form-field-ripple\" [class.mat-accent]=\"color == 'accent'\" [class.mat-warn]=\"color == 'warn'\"></span></div><div class=\"mat-form-field-subscript-wrapper\" [ngSwitch]=\"_getDisplayedMessages()\"><div *ngSwitchCase=\"'error'\" [@transitionMessages]=\"_subscriptAnimationState\"><ng-content select=\"mat-error\"></ng-content></div><div class=\"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-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 |
| // in form-field-input.css. 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;box-sizing:border-box;width:100%}.mat-form-field-prefix,.mat-form-field-suffix{white-space:nowrap;flex:none;position:relative}.mat-form-field-infix{display:block;position:relative;flex:auto;min-width:0;width:180px}@media (-ms-high-contrast:active){.mat-form-field-infix{border-image:linear-gradient(transparent,transparent)}}.mat-form-field-label-wrapper{position:absolute;left:0;box-sizing:content-box;width:100%;height:100%;overflow:hidden;pointer-events:none}[dir=rtl] .mat-form-field-label-wrapper{left:auto;right:0}.mat-form-field-label{position:absolute;left:0;font:inherit;pointer-events:none;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;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-label-wrapper .mat-form-field-label,.mat-input-server[placeholder]:not(:placeholder-shown)+.mat-form-field-label-wrapper .mat-form-field-label{display:none}.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,.mat-form-field-can-float .mat-input-server[placeholder]:not(:placeholder-shown)+.mat-form-field-label-wrapper .mat-form-field-label{display:block}.mat-form-field-label:not(.mat-form-field-empty){transition:none}.mat-form-field-underline{position:absolute;width:100%;pointer-events:none;transform:scaleY(1.0001)}.mat-form-field-ripple{position:absolute;left:0;width:100%;transform-origin:50%;transform:scaleX(.5);opacity:0;transition:background-color .3s cubic-bezier(.55,0,.55,.2)}.mat-form-field.mat-focused .mat-form-field-ripple,.mat-form-field.mat-form-field-invalid .mat-form-field-ripple{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;box-sizing:border-box;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-form-field-control-wrapper{position:relative}.mat-form-field._mat-animation-noopable .mat-form-field-label,.mat-form-field._mat-animation-noopable .mat-form-field-ripple{transition:none} .mat-form-field-appearance-fill .mat-form-field-flex{border-radius:4px 4px 0 0;padding:.75em .75em 0 .75em}@media (-ms-high-contrast:active){.mat-form-field-appearance-fill .mat-form-field-flex{outline:solid 1px}}.mat-form-field-appearance-fill .mat-form-field-underline::before{content:'';display:block;position:absolute;bottom:0;height:1px;width:100%}.mat-form-field-appearance-fill .mat-form-field-ripple{bottom:0;height:2px}@media (-ms-high-contrast:active){.mat-form-field-appearance-fill .mat-form-field-ripple{height:0;border-top:solid 2px}}.mat-form-field-appearance-fill:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-underline .mat-form-field-ripple{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.25,.8,.25,1)}.mat-form-field-appearance-fill._mat-animation-noopable:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-underline .mat-form-field-ripple{transition:none}.mat-form-field-appearance-fill .mat-form-field-subscript-wrapper{padding:0 1em} .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,.mat-input-element::-webkit-search-cancel-button,.mat-input-element::-webkit-search-decoration,.mat-input-element::-webkit-search-results-button,.mat-input-element::-webkit-search-results-decoration{-webkit-appearance:none}.mat-input-element::-webkit-caps-lock-indicator,.mat-input-element::-webkit-contacts-auto-fill-button,.mat-input-element::-webkit-credentials-auto-fill-button{visibility:hidden}.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::-webkit-calendar-picker-indicator,.mat-input-element::-webkit-clear-button,.mat-input-element::-webkit-inner-spin-button{font-size:.75em}.mat-input-element::placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-input-element::placeholder:-ms-input-placeholder{-ms-user-select:text}.mat-input-element::-moz-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-input-element::-moz-placeholder:-ms-input-placeholder{-ms-user-select:text}.mat-input-element::-webkit-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-input-element::-webkit-input-placeholder:-ms-input-placeholder{-ms-user-select:text}.mat-input-element:-ms-input-placeholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color .4s .133s cubic-bezier(.25,.8,.25,1)}.mat-input-element:-ms-input-placeholder:-ms-input-placeholder{-ms-user-select:text}.mat-form-field-hide-placeholder .mat-input-element::placeholder{color:transparent!important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-input-element::-moz-placeholder{color:transparent!important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-input-element::-webkit-input-placeholder{color:transparent!important;-webkit-text-fill-color:transparent;transition:none}.mat-form-field-hide-placeholder .mat-input-element:-ms-input-placeholder{color:transparent!important;-webkit-text-fill-color:transparent;transition:none}textarea.mat-input-element{resize:vertical;overflow:auto}textarea.mat-input-element.cdk-textarea-autosize{resize:none}textarea.mat-input-element{padding:2px 0;margin:-2px 0}select.mat-input-element{-moz-appearance:none;-webkit-appearance:none;position:relative;background-color:transparent;display:inline-flex;box-sizing:border-box;padding-top:1em;top:-1em;margin-bottom:-1em}select.mat-input-element::-ms-expand{display:none}select.mat-input-element::-moz-focus-inner{border:0}select.mat-input-element:not(:disabled){cursor:pointer}select.mat-input-element::-ms-value{color:inherit;background:0 0}@media (-ms-high-contrast:active){.mat-focused select.mat-input-element::-ms-value{color:inherit}}.mat-form-field-type-mat-native-select .mat-form-field-infix::after{content:'';width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;position:absolute;top:50%;right:0;margin-top:-2.5px;pointer-events:none}[dir=rtl] .mat-form-field-type-mat-native-select .mat-form-field-infix::after{right:auto;left:0}.mat-form-field-type-mat-native-select .mat-input-element{padding-right:15px}[dir=rtl] .mat-form-field-type-mat-native-select .mat-input-element{padding-right:0;padding-left:15px}.mat-form-field-type-mat-native-select .mat-form-field-label-wrapper{max-width:calc(100% - 10px)}.mat-form-field-type-mat-native-select.mat-form-field-appearance-outline .mat-form-field-infix::after{margin-top:-5px}.mat-form-field-type-mat-native-select.mat-form-field-appearance-fill .mat-form-field-infix::after{margin-top:-10px} .mat-form-field-appearance-legacy .mat-form-field-label{transform:perspective(100px);-ms-transform:none}.mat-form-field-appearance-legacy .mat-form-field-prefix .mat-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-icon{width:1em}.mat-form-field-appearance-legacy .mat-form-field-prefix .mat-icon-button,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-icon-button{font:inherit;vertical-align:baseline}.mat-form-field-appearance-legacy .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-icon-button .mat-icon{font-size:inherit}.mat-form-field-appearance-legacy .mat-form-field-underline{height:1px}@media (-ms-high-contrast:active){.mat-form-field-appearance-legacy .mat-form-field-underline{height:0;border-top:solid 1px}}.mat-form-field-appearance-legacy .mat-form-field-ripple{top:0;height:2px;overflow:hidden}@media (-ms-high-contrast:active){.mat-form-field-appearance-legacy .mat-form-field-ripple{height:0;border-top:solid 2px}}.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline{background-position:0;background-color:transparent}@media (-ms-high-contrast:active){.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline{border-top-style:dotted;border-top-width:2px}}.mat-form-field-appearance-legacy.mat-form-field-invalid:not(.mat-focused) .mat-form-field-ripple{height:1px} .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:.25em 0}.mat-form-field-appearance-outline .mat-form-field-flex{padding:0 .75em 0 .75em;margin-top:-.25em;position:relative}.mat-form-field-appearance-outline .mat-form-field-prefix,.mat-form-field-appearance-outline .mat-form-field-suffix{top:.25em}.mat-form-field-appearance-outline .mat-form-field-outline{display:flex;position:absolute;top:.25em;left:0;right:0;bottom:0;pointer-events:none}.mat-form-field-appearance-outline .mat-form-field-outline-end,.mat-form-field-appearance-outline .mat-form-field-outline-start{border:1px solid currentColor;min-width:5px}.mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:5px 0 0 5px;border-right-style:none}[dir=rtl] .mat-form-field-appearance-outline .mat-form-field-outline-start{border-right-style:solid;border-left-style:none;border-radius:0 5px 5px 0}.mat-form-field-appearance-outline .mat-form-field-outline-end{border-radius:0 5px 5px 0;border-left-style:none;flex-grow:1}[dir=rtl] .mat-form-field-appearance-outline .mat-form-field-outline-end{border-left-style:solid;border-right-style:none;border-radius:5px 0 0 5px}.mat-form-field-appearance-outline .mat-form-field-outline-gap{border-radius:.000001px;border:1px solid currentColor;border-left-style:none;border-right-style:none}.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap{border-top-color:transparent}.mat-form-field-appearance-outline .mat-form-field-outline-thick{opacity:0}.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-end,.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-gap,.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-start{border-width:2px;transition:border-color .3s cubic-bezier(.25,.8,.25,1)}.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline,.mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline{opacity:0;transition:opacity .1s cubic-bezier(.25,.8,.25,1)}.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick,.mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline-thick{opacity:1}.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline{opacity:0;transition:opacity .6s cubic-bezier(.25,.8,.25,1)}.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline-thick{opacity:1}.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper{padding:0 1em}.mat-form-field-appearance-outline._mat-animation-noopable .mat-form-field-outline,.mat-form-field-appearance-outline._mat-animation-noopable .mat-form-field-outline-end,.mat-form-field-appearance-outline._mat-animation-noopable .mat-form-field-outline-gap,.mat-form-field-appearance-outline._mat-animation-noopable .mat-form-field-outline-start,.mat-form-field-appearance-outline._mat-animation-noopable:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-outline{transition:none} .mat-form-field-appearance-standard .mat-form-field-flex{padding-top:.75em}.mat-form-field-appearance-standard .mat-form-field-underline{height:1px}@media (-ms-high-contrast:active){.mat-form-field-appearance-standard .mat-form-field-underline{height:0;border-top:solid 1px}}.mat-form-field-appearance-standard .mat-form-field-ripple{bottom:0;height:2px}@media (-ms-high-contrast:active){.mat-form-field-appearance-standard .mat-form-field-ripple{height:0;border-top:2px}}.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline{background-position:0;background-color:transparent}@media (-ms-high-contrast:active){.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline{border-top-style:dotted;border-top-width:2px}}.mat-form-field-appearance-standard:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-underline .mat-form-field-ripple{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.25,.8,.25,1)}.mat-form-field-appearance-standard._mat-animation-noopable:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-underline .mat-form-field-ripple{transition:none}"], |
| animations: [matFormFieldAnimations.transitionMessages], |
| host: { |
| 'class': 'mat-form-field', |
| '[class.mat-form-field-appearance-standard]': 'appearance == "standard"', |
| '[class.mat-form-field-appearance-fill]': 'appearance == "fill"', |
| '[class.mat-form-field-appearance-outline]': 'appearance == "outline"', |
| '[class.mat-form-field-appearance-legacy]': 'appearance == "legacy"', |
| '[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-has-label]': '_hasFloatingLabel()', |
| '[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()', |
| '[class.mat-form-field-disabled]': '_control.disabled', |
| '[class.mat-form-field-autofilled]': '_control.autofilled', |
| '[class.mat-focused]': '_control.focused', |
| '[class.mat-accent]': 'color == "accent"', |
| '[class.mat-warn]': 'color == "warn"', |
| '[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")', |
| '[class._mat-animation-noopable]': '!_animationsEnabled', |
| }, |
| inputs: ['color'], |
| encapsulation: core.ViewEncapsulation.None, |
| 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,] }] }, |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_FORM_FIELD_DEFAULT_OPTIONS,] }] }, |
| { type: platform.Platform }, |
| { type: core.NgZone }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatFormField.propDecorators = { |
| appearance: [{ type: core.Input }], |
| hideRequiredMarker: [{ type: core.Input }], |
| hintLabel: [{ type: core.Input }], |
| floatLabel: [{ type: core.Input }], |
| underlineRef: [{ type: core.ViewChild, args: ['underline', { static: false },] }], |
| _connectionContainerRef: [{ type: core.ViewChild, args: ['connectionContainer', { static: true },] }], |
| _inputContainerRef: [{ type: core.ViewChild, args: ['inputContainer', { static: false },] }], |
| _label: [{ type: core.ViewChild, args: ['label', { static: false },] }], |
| _controlNonStatic: [{ type: core.ContentChild, args: [MatFormFieldControl, { static: false },] }], |
| _controlStatic: [{ type: core.ContentChild, args: [MatFormFieldControl, { static: true },] }], |
| _labelChildNonStatic: [{ type: core.ContentChild, args: [MatLabel, { static: false },] }], |
| _labelChildStatic: [{ type: core.ContentChild, args: [MatLabel, { static: true },] }], |
| _placeholderChild: [{ type: core.ContentChild, args: [MatPlaceholder, { static: false },] }], |
| _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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatFormFieldModule = /** @class */ (function () { |
| function MatFormFieldModule() { |
| } |
| MatFormFieldModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| declarations: [ |
| MatError, |
| MatFormField, |
| MatHint, |
| MatLabel, |
| MatPlaceholder, |
| MatPrefix, |
| MatSuffix, |
| ], |
| imports: [ |
| common.CommonModule, |
| observers.ObserversModule, |
| ], |
| exports: [ |
| MatError, |
| MatFormField, |
| MatHint, |
| MatLabel, |
| MatPlaceholder, |
| MatPrefix, |
| MatSuffix, |
| ], |
| },] }, |
| ]; |
| return MatFormFieldModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Autocomplete IDs need to be unique across components, so this counter exists outside of |
| * the component definition. |
| * @type {?} |
| */ |
| var _uniqueAutocompleteIdCounter = 0; |
| /** |
| * Event object that is emitted when an autocomplete option is selected. |
| */ |
| var /** |
| * Event object that is emitted when an autocomplete option is selected. |
| */ |
| MatAutocompleteSelectedEvent = /** @class */ (function () { |
| function MatAutocompleteSelectedEvent(source, option) { |
| this.source = source; |
| this.option = option; |
| } |
| return MatAutocompleteSelectedEvent; |
| }()); |
| // Boilerplate for applying mixins to MatAutocomplete. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatAutocomplete. |
| /** |
| * \@docs-private |
| */ |
| MatAutocompleteBase = /** @class */ (function () { |
| function MatAutocompleteBase() { |
| } |
| return MatAutocompleteBase; |
| }()); |
| /** @type {?} */ |
| var _MatAutocompleteMixinBase = mixinDisableRipple(MatAutocompleteBase); |
| /** |
| * Injection token to be used to override the default options for `mat-autocomplete`. |
| * @type {?} |
| */ |
| var MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = new core.InjectionToken('mat-autocomplete-default-options', { |
| providedIn: 'root', |
| factory: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() { |
| return { autoActiveFirstOption: false }; |
| } |
| var MatAutocomplete = /** @class */ (function (_super) { |
| __extends(MatAutocomplete, _super); |
| function MatAutocomplete(_changeDetectorRef, _elementRef, 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(); |
| /** |
| * Event that is emitted when the autocomplete panel is opened. |
| */ |
| _this.opened = new core.EventEmitter(); |
| /** |
| * Event that is emitted when the autocomplete panel is closed. |
| */ |
| _this.closed = 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.autoActiveFirstOption; |
| 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", { |
| /** |
| * Whether the first option should be highlighted when the autocomplete panel is opened. |
| * Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token. |
| */ |
| 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", { |
| /** |
| * Takes classes set on the host mat-autocomplete element and applies them to the panel |
| * inside the overlay container to allow for easy styling. |
| */ |
| 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) { |
| if (value && value.length) { |
| this._classList = value.split(' ').reduce((/** |
| * @param {?} classList |
| * @param {?} className |
| * @return {?} |
| */ |
| function (classList, className) { |
| classList[className.trim()] = true; |
| return classList; |
| }), (/** @type {?} */ ({}))); |
| } |
| else { |
| this._classList = {}; |
| } |
| this._setVisibilityClasses(this._classList); |
| 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 visibility 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._setVisibilityClasses(this._classList); |
| 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) { |
| /** @type {?} */ |
| var event = new MatAutocompleteSelectedEvent(this, option); |
| this.optionSelected.emit(event); |
| }; |
| /** Sets the autocomplete visibility classes on a classlist based on the panel is visible. */ |
| /** |
| * Sets the autocomplete visibility classes on a classlist based on the panel is visible. |
| * @private |
| * @param {?} classList |
| * @return {?} |
| */ |
| MatAutocomplete.prototype._setVisibilityClasses = /** |
| * Sets the autocomplete visibility classes on a classlist based on the panel is visible. |
| * @private |
| * @param {?} classList |
| * @return {?} |
| */ |
| function (classList) { |
| classList['mat-autocomplete-visible'] = this.showPanel; |
| classList['mat-autocomplete-hidden'] = !this.showPanel; |
| }; |
| 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{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;max-width:none;max-height:256px;position:relative;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.mat-autocomplete-panel.mat-autocomplete-visible{visibility:visible}.mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden}.mat-autocomplete-panel-above .mat-autocomplete-panel{border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}.mat-autocomplete-panel .mat-divider-horizontal{margin-top:-1px}@media (-ms-high-contrast:active){.mat-autocomplete-panel{outline:solid 1px}}"], |
| encapsulation: core.ViewEncapsulation.None, |
| 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.Inject, args: [MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| MatAutocomplete.propDecorators = { |
| template: [{ type: core.ViewChild, args: [core.TemplateRef, { static: true },] }], |
| panel: [{ type: core.ViewChild, args: ['panel', { static: false },] }], |
| options: [{ type: core.ContentChildren, args: [MatOption, { descendants: true },] }], |
| optionGroups: [{ type: core.ContentChildren, args: [MatOptgroup,] }], |
| displayWith: [{ type: core.Input }], |
| autoActiveFirstOption: [{ type: core.Input }], |
| panelWidth: [{ type: core.Input }], |
| optionSelected: [{ type: core.Output }], |
| opened: [{ type: core.Output }], |
| closed: [{ type: core.Output }], |
| classList: [{ type: core.Input, args: ['class',] }] |
| }; |
| return MatAutocomplete; |
| }(_MatAutocompleteMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Directive applied to an element to make it usable |
| * as a connection point for an autocomplete panel. |
| */ |
| var MatAutocompleteOrigin = /** @class */ (function () { |
| function MatAutocompleteOrigin(elementRef) { |
| this.elementRef = elementRef; |
| } |
| MatAutocompleteOrigin.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matAutocompleteOrigin]', |
| exportAs: 'matAutocompleteOrigin', |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatAutocompleteOrigin.ctorParameters = function () { return [ |
| { type: core.ElementRef } |
| ]; }; |
| return MatAutocompleteOrigin; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * The height of each autocomplete option. |
| * @type {?} |
| */ |
| var AUTOCOMPLETE_OPTION_HEIGHT = 48; |
| /** |
| * The total height of the autocomplete panel. |
| * @type {?} |
| */ |
| var AUTOCOMPLETE_PANEL_HEIGHT = 256; |
| /** |
| * Injection token that determines the scroll handling while the autocomplete panel is open. |
| * @type {?} |
| */ |
| var MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new core.InjectionToken('mat-autocomplete-scroll-strategy'); |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay$$1) { |
| return (/** |
| * @return {?} |
| */ |
| function () { return overlay$$1.scrollStrategies.reposition(); }); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = { |
| provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, |
| deps: [overlay.Overlay], |
| useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, |
| }; |
| /** |
| * Provider that allows the autocomplete to register as a ControlValueAccessor. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_AUTOCOMPLETE_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatAutocompleteTrigger; })), |
| multi: true |
| }; |
| /** |
| * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel. |
| * \@docs-private |
| * @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 = /** @class */ (function () { |
| function MatAutocompleteTrigger(_element, _overlay, _viewContainerRef, _zone, _changeDetectorRef, scrollStrategy, _dir, _formField, _document, _viewportRuler) { |
| var _this = this; |
| this._element = _element; |
| this._overlay = _overlay; |
| this._viewContainerRef = _viewContainerRef; |
| this._zone = _zone; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._dir = _dir; |
| this._formField = _formField; |
| this._document = _document; |
| this._viewportRuler = _viewportRuler; |
| this._componentDestroyed = false; |
| this._autocompleteDisabled = false; |
| /** |
| * Whether or not the label state is being overridden. |
| */ |
| this._manuallyFloatingLabel = false; |
| /** |
| * Subscription to viewport size changes. |
| */ |
| this._viewportSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * Whether the autocomplete can open the next time it is focused. Used to prevent a focused, |
| * closed autocomplete from being reopened if the user switches to another browser tab and then |
| * comes back. |
| */ |
| this._canOpenOnNextFocus = true; |
| /** |
| * Stream of keyboard events that can close the panel. |
| */ |
| this._closeKeyEventStream = new rxjs.Subject(); |
| /** |
| * Event handler for when the window is blurred. Needs to be an |
| * arrow function in order to preserve the context. |
| */ |
| this._windowBlurHandler = (/** |
| * @return {?} |
| */ |
| function () { |
| // If the user blurred the window while the autocomplete is focused, it means that it'll be |
| // refocused when they come back. In this case we want to skip the first focus event, if the |
| // pane was closed, in order to avoid reopening it unintentionally. |
| _this._canOpenOnNextFocus = |
| _this._document.activeElement !== _this._element.nativeElement || _this.panelOpen; |
| }); |
| /** |
| * `View -> model callback called when value changes` |
| */ |
| this._onChange = (/** |
| * @return {?} |
| */ |
| function () { }); |
| /** |
| * `View -> model callback called when autocomplete has been touched` |
| */ |
| this._onTouched = (/** |
| * @return {?} |
| */ |
| function () { }); |
| /** |
| * Position of the autocomplete panel relative to the trigger element. A position of `auto` |
| * will render the panel underneath the trigger if there is enough space for it to fit in |
| * the viewport, otherwise the panel will be shown above it. If the position is set to |
| * `above` or `below`, the panel will always be shown above or below the trigger. no matter |
| * whether it fits completely in the viewport. |
| */ |
| this.position = 'auto'; |
| /** |
| * `autocomplete` attribute to be set on the input element. |
| * \@docs-private |
| */ |
| this.autocompleteAttribute = 'off'; |
| this._overlayAttached = false; |
| /** |
| * Stream of autocomplete option selections. |
| */ |
| this.optionSelections = (/** @type {?} */ (rxjs.defer((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this.autocomplete && _this.autocomplete.options) { |
| return rxjs.merge.apply(void 0, _this.autocomplete.options.map((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| 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(operators.take(1), operators.switchMap((/** |
| * @return {?} |
| */ |
| function () { return _this.optionSelections; }))); |
| })))); |
| if (typeof window !== 'undefined') { |
| _zone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| window.addEventListener('blur', _this._windowBlurHandler); |
| })); |
| } |
| this._scrollStrategy = scrollStrategy; |
| } |
| Object.defineProperty(MatAutocompleteTrigger.prototype, "autocompleteDisabled", { |
| /** |
| * Whether the autocomplete is disabled. When disabled, the element will |
| * act as a regular input and the user won't be able to open the panel. |
| */ |
| get: /** |
| * Whether the autocomplete is disabled. When disabled, the element will |
| * act as a regular input and the user won't be able to open the panel. |
| * @return {?} |
| */ |
| function () { return this._autocompleteDisabled; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._autocompleteDisabled = coercion.coerceBooleanProperty(value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype.ngOnChanges = /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { |
| if (changes['position'] && this._positionStrategy) { |
| this._setStrategyPositions(this._positionStrategy); |
| if (this.panelOpen) { |
| (/** @type {?} */ (this._overlayRef)).updatePosition(); |
| } |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| if (typeof window !== 'undefined') { |
| window.removeEventListener('blur', this._windowBlurHandler); |
| } |
| this._viewportSubscription.unsubscribe(); |
| 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._overlayAttached && 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._overlayAttached) { |
| return; |
| } |
| if (this.panelOpen) { |
| // Only emit if the panel was visible. |
| this.autocomplete.closed.emit(); |
| } |
| this.autocomplete._isOpen = this._overlayAttached = 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(); |
| } |
| }; |
| /** |
| * Updates the position of the autocomplete suggestion panel to ensure that it fits all options |
| * within the viewport. |
| */ |
| /** |
| * Updates the position of the autocomplete suggestion panel to ensure that it fits all options |
| * within the viewport. |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype.updatePosition = /** |
| * Updates the position of the autocomplete suggestion panel to ensure that it fits all options |
| * within the viewport. |
| * @return {?} |
| */ |
| function () { |
| if (this._overlayAttached) { |
| (/** @type {?} */ (this._overlayRef)).updatePosition(); |
| } |
| }; |
| 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 rxjs.merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(operators.filter((/** |
| * @return {?} |
| */ |
| function () { return _this._overlayAttached; }))), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ? |
| this._overlayRef.detachments().pipe(operators.filter((/** |
| * @return {?} |
| */ |
| function () { return _this._overlayAttached; }))) : |
| rxjs.of()).pipe( |
| // Normalize the output so we return a consistent type. |
| operators.map((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event instanceof MatOptionSelectionChange ? event : null; }))); |
| }, |
| 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 |
| }); |
| /** Stream of clicks outside of the autocomplete panel. */ |
| /** |
| * Stream of clicks outside of the autocomplete panel. |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._getOutsideClickStream = /** |
| * Stream of clicks outside of the autocomplete panel. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| return rxjs.merge((/** @type {?} */ (rxjs.fromEvent(this._document, 'click'))), (/** @type {?} */ (rxjs.fromEvent(this._document, 'touchend')))) |
| .pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var clickTarget = (/** @type {?} */ (event.target)); |
| /** @type {?} */ |
| var formField = _this._formField ? |
| _this._formField._elementRef.nativeElement : null; |
| return _this._overlayAttached && |
| clickTarget !== _this._element.nativeElement && |
| (!formField || !formField.contains(clickTarget)) && |
| (!!_this._overlayRef && !_this._overlayRef.overlayElement.contains(clickTarget)); |
| }))); |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype.writeValue = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| var _this = this; |
| Promise.resolve(null).then((/** |
| * @return {?} |
| */ |
| function () { return _this._setTriggerValue(value); })); |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.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 {?} |
| */ |
| MatAutocompleteTrigger.prototype.registerOnTouched = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._onTouched = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype.setDisabledState = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| function (isDisabled) { |
| this._element.nativeElement.disabled = isDisabled; |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._handleKeydown = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var 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(); |
| } |
| if (this.activeOption && keyCode === keycodes.ENTER && this.panelOpen) { |
| this.activeOption._selectViaInteraction(); |
| this._resetActiveItem(); |
| event.preventDefault(); |
| } |
| else if (this.autocomplete) { |
| /** @type {?} */ |
| var prevActiveItem = this.autocomplete._keyManager.activeItem; |
| /** @type {?} */ |
| var 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) { |
| /** @type {?} */ |
| var target = (/** @type {?} */ (event.target)); |
| /** @type {?} */ |
| var 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._previousValue !== value) { |
| this._previousValue = value; |
| this._onChange(value); |
| if (this._canOpen() && this._document.activeElement === event.target) { |
| this.openPanel(); |
| } |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._handleFocus = /** |
| * @return {?} |
| */ |
| function () { |
| if (!this._canOpenOnNextFocus) { |
| this._canOpenOnNextFocus = true; |
| } |
| else 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @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. */ |
| /** |
| * If the label has been manually elevated, return it to its normal state. |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._resetLabel = /** |
| * If the label has been manually elevated, return it to its normal state. |
| * @private |
| * @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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var index = this.autocomplete._keyManager.activeItemIndex || 0; |
| /** @type {?} */ |
| var labelCount = _countGroupLabelsBeforeOption(index, this.autocomplete.options, this.autocomplete.optionGroups); |
| /** @type {?} */ |
| var 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. |
| */ |
| /** |
| * This method listens to a stream of panel closing actions and resets the |
| * stream every time the option list changes. |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._subscribeToClosingActions = /** |
| * This method listens to a stream of panel closing actions and resets the |
| * stream every time the option list changes. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| /** @type {?} */ |
| var firstStable = this._zone.onStable.asObservable().pipe(operators.take(1)); |
| /** @type {?} */ |
| var optionChanges = this.autocomplete.options.changes.pipe(operators.tap((/** |
| * @return {?} |
| */ |
| function () { return _this._positionStrategy.reapplyLastPosition(); })), |
| // Defer emitting to the stream until the next tick, because changing |
| // bindings in here will cause "changed after checked" errors. |
| operators.delay(0)); |
| // When the zone is stable initially, and when the option list changes... |
| return rxjs.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... |
| operators.switchMap((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var wasOpen = _this.panelOpen; |
| _this._resetActiveItem(); |
| _this.autocomplete._setVisibility(); |
| if (_this.panelOpen) { |
| (/** @type {?} */ (_this._overlayRef)).updatePosition(); |
| // If the `panelOpen` state changed, we need to make sure to emit the `opened` |
| // event, because we may not have emitted it when the panel was attached. This |
| // can happen if the users opens the panel and there are no options, but the |
| // options come in slightly later or as a result of the value changing. |
| if (wasOpen !== _this.panelOpen) { |
| _this.autocomplete.opened.emit(); |
| } |
| } |
| return _this.panelClosingActions; |
| })), |
| // when the first closing event occurs... |
| operators.take(1)) |
| // set the value, close the panel, and complete. |
| .subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return _this._setValueAndClose(event); })); |
| }; |
| /** Destroys the autocomplete suggestion panel. */ |
| /** |
| * Destroys the autocomplete suggestion panel. |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._destroyPanel = /** |
| * Destroys the autocomplete suggestion panel. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this._overlayRef) { |
| this.closePanel(); |
| this._overlayRef.dispose(); |
| this._overlayRef = null; |
| } |
| }; |
| /** |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._setTriggerValue = /** |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var 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._previousValue = 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @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 |
| */ |
| /** |
| * Clear any previous selected option and emit a selection change event for this option |
| * @private |
| * @param {?} skip |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._clearPreviousSelectedOption = /** |
| * Clear any previous selected option and emit a selection change event for this option |
| * @private |
| * @param {?} skip |
| * @return {?} |
| */ |
| function (skip) { |
| this.autocomplete.options.forEach((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { |
| if (option != skip && option.selected) { |
| option.deselect(); |
| } |
| })); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._attachOverlay = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (!this.autocomplete) { |
| throw getMatAutocompleteMissingPanelError(); |
| } |
| /** @type {?} */ |
| var overlayRef = this._overlayRef; |
| if (!overlayRef) { |
| this._portal = new portal.TemplatePortal(this.autocomplete.template, this._viewContainerRef); |
| overlayRef = this._overlay.create(this._getOverlayConfig()); |
| this._overlayRef = overlayRef; |
| // Use the `keydownEvents` in order to take advantage of |
| // the overlay event targeting provided by the CDK overlay. |
| overlayRef.keydownEvents().subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| // 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 (event.keyCode === keycodes.ESCAPE || (event.keyCode === keycodes.UP_ARROW && event.altKey)) { |
| _this._resetActiveItem(); |
| _this._closeKeyEventStream.next(); |
| // We need to stop propagation, otherwise the event will eventually |
| // reach the input itself and cause the overlay to be reopened. |
| event.stopPropagation(); |
| event.preventDefault(); |
| } |
| })); |
| if (this._viewportRuler) { |
| this._viewportSubscription = this._viewportRuler.change().subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this.panelOpen && overlayRef) { |
| overlayRef.updateSize({ width: _this._getPanelWidth() }); |
| } |
| })); |
| } |
| } |
| else { |
| // Update the trigger, panel width and direction, in case anything has changed. |
| this._positionStrategy.setOrigin(this._getConnectedElement()); |
| overlayRef.updateSize({ width: this._getPanelWidth() }); |
| } |
| if (overlayRef && !overlayRef.hasAttached()) { |
| overlayRef.attach(this._portal); |
| this._closingActionsSubscription = this._subscribeToClosingActions(); |
| } |
| /** @type {?} */ |
| var wasOpen = this.panelOpen; |
| this.autocomplete._setVisibility(); |
| this.autocomplete._isOpen = this._overlayAttached = true; |
| // We need to do an extra `panelOpen` check in here, because the |
| // autocomplete won't be shown if there are no options. |
| if (this.panelOpen && wasOpen !== this.panelOpen) { |
| this.autocomplete.opened.emit(); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._getOverlayConfig = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return new overlay.OverlayConfig({ |
| positionStrategy: this._getOverlayPosition(), |
| scrollStrategy: this._scrollStrategy(), |
| width: this._getPanelWidth(), |
| direction: this._dir |
| }); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._getOverlayPosition = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var strategy = this._overlay.position() |
| .flexibleConnectedTo(this._getConnectedElement()) |
| .withFlexibleDimensions(false) |
| .withPush(false); |
| this._setStrategyPositions(strategy); |
| this._positionStrategy = strategy; |
| return strategy; |
| }; |
| /** Sets the positions on a position strategy based on the directive's input state. */ |
| /** |
| * Sets the positions on a position strategy based on the directive's input state. |
| * @private |
| * @param {?} positionStrategy |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._setStrategyPositions = /** |
| * Sets the positions on a position strategy based on the directive's input state. |
| * @private |
| * @param {?} positionStrategy |
| * @return {?} |
| */ |
| function (positionStrategy) { |
| /** @type {?} */ |
| var belowPosition = { |
| originX: 'start', |
| originY: 'bottom', |
| overlayX: 'start', |
| overlayY: 'top' |
| }; |
| /** @type {?} */ |
| var abovePosition = { |
| originX: 'start', |
| originY: 'top', |
| overlayX: 'start', |
| overlayY: 'bottom', |
| // The overlay edge connected to the trigger should have squared corners, while |
| // the opposite end has rounded corners. We apply a CSS class to swap the |
| // border-radius based on the overlay position. |
| panelClass: 'mat-autocomplete-panel-above' |
| }; |
| /** @type {?} */ |
| var positions; |
| if (this.position === 'above') { |
| positions = [abovePosition]; |
| } |
| else if (this.position === 'below') { |
| positions = [belowPosition]; |
| } |
| else { |
| positions = [belowPosition, abovePosition]; |
| } |
| positionStrategy.withPositions(positions); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._getConnectedElement = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this.connectedTo) { |
| return this.connectedTo.elementRef; |
| } |
| return this._formField ? this._formField.getConnectedOverlayOrigin() : this._element; |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._getPanelWidth = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this.autocomplete.panelWidth || this._getHostWidth(); |
| }; |
| /** Returns the width of the input element, so the panel width can match it. */ |
| /** |
| * Returns the width of the input element, so the panel width can match it. |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._getHostWidth = /** |
| * Returns the width of the input element, so the panel width can match it. |
| * @private |
| * @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. |
| */ |
| /** |
| * Resets the active item to -1 so arrow events will activate the |
| * correct options, or to 0 if the consumer opted into it. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this.autocomplete._keyManager.setActiveItem(this.autocomplete.autoActiveFirstOption ? 0 : -1); |
| }; |
| /** Determines whether the panel can be opened. */ |
| /** |
| * Determines whether the panel can be opened. |
| * @private |
| * @return {?} |
| */ |
| MatAutocompleteTrigger.prototype._canOpen = /** |
| * Determines whether the panel can be opened. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var element = this._element.nativeElement; |
| return !element.readOnly && !element.disabled && !this._autocompleteDisabled; |
| }; |
| MatAutocompleteTrigger.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "input[matAutocomplete], textarea[matAutocomplete]", |
| host: { |
| '[attr.autocomplete]': 'autocompleteAttribute', |
| '[attr.role]': 'autocompleteDisabled ? null : "combobox"', |
| '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"', |
| '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null', |
| '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()', |
| '[attr.aria-owns]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id', |
| '[attr.aria-haspopup]': '!autocompleteDisabled', |
| // 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,] }] }, |
| { type: scrolling.ViewportRuler } |
| ]; }; |
| MatAutocompleteTrigger.propDecorators = { |
| autocomplete: [{ type: core.Input, args: ['matAutocomplete',] }], |
| position: [{ type: core.Input, args: ['matAutocompletePosition',] }], |
| connectedTo: [{ type: core.Input, args: ['matAutocompleteConnectedTo',] }], |
| autocompleteAttribute: [{ type: core.Input, args: ['autocomplete',] }], |
| autocompleteDisabled: [{ type: core.Input, args: ['matAutocompleteDisabled',] }] |
| }; |
| return MatAutocompleteTrigger; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatAutocompleteModule = /** @class */ (function () { |
| function MatAutocompleteModule() { |
| } |
| MatAutocompleteModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatOptionModule, overlay.OverlayModule, MatCommonModule, common.CommonModule], |
| exports: [ |
| MatAutocomplete, |
| MatOptionModule, |
| MatAutocompleteTrigger, |
| MatAutocompleteOrigin, |
| MatCommonModule |
| ], |
| declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin], |
| providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], |
| },] }, |
| ]; |
| return MatAutocompleteModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var nextId = 0; |
| // Boilerplate for applying mixins to MatBadge. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatBadge. |
| /** |
| * \@docs-private |
| */ |
| MatBadgeBase = /** @class */ (function () { |
| function MatBadgeBase() { |
| } |
| return MatBadgeBase; |
| }()); |
| /** @type {?} */ |
| var _MatBadgeMixinBase = mixinDisabled(MatBadgeBase); |
| /** |
| * Directive to display a text badge. |
| */ |
| var MatBadge = /** @class */ (function (_super) { |
| __extends(MatBadge, _super); |
| function MatBadge(_ngZone, _elementRef, _ariaDescriber, _renderer, _animationMode) { |
| var _this = _super.call(this) || this; |
| _this._ngZone = _ngZone; |
| _this._elementRef = _elementRef; |
| _this._ariaDescriber = _ariaDescriber; |
| _this._renderer = _renderer; |
| _this._animationMode = _animationMode; |
| /** |
| * Whether the badge has any content. |
| */ |
| _this._hasContent = false; |
| _this._color = 'primary'; |
| _this._overlap = true; |
| /** |
| * Position the badge should reside. |
| * Accepts any combination of 'above'|'below' and 'before'|'after' |
| */ |
| _this.position = 'above after'; |
| /** |
| * Size of the badge. Can be 'small', 'medium', or 'large'. |
| */ |
| _this.size = 'medium'; |
| /** |
| * Unique id for the badge |
| */ |
| _this._id = nextId++; |
| if (core.isDevMode()) { |
| /** @type {?} */ |
| var nativeElement = _elementRef.nativeElement; |
| if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) { |
| throw Error('matBadge must be attached to an element node.'); |
| } |
| } |
| return _this; |
| } |
| Object.defineProperty(MatBadge.prototype, "color", { |
| /** The color of the badge. Can be `primary`, `accent`, or `warn`. */ |
| get: /** |
| * The color of the badge. Can be `primary`, `accent`, or `warn`. |
| * @return {?} |
| */ |
| function () { return this._color; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._setColor(value); |
| this._color = value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatBadge.prototype, "overlap", { |
| /** Whether the badge should overlap its contents or not */ |
| get: /** |
| * Whether the badge should overlap its contents or not |
| * @return {?} |
| */ |
| function () { return this._overlap; }, |
| set: /** |
| * @param {?} val |
| * @return {?} |
| */ |
| function (val) { |
| this._overlap = coercion.coerceBooleanProperty(val); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatBadge.prototype, "description", { |
| /** Message used to describe the decorated element via aria-describedby */ |
| get: /** |
| * Message used to describe the decorated element via aria-describedby |
| * @return {?} |
| */ |
| function () { return this._description; }, |
| set: /** |
| * @param {?} newDescription |
| * @return {?} |
| */ |
| function (newDescription) { |
| if (newDescription !== this._description) { |
| /** @type {?} */ |
| var badgeElement = this._badgeElement; |
| this._updateHostAriaDescription(newDescription, this._description); |
| this._description = newDescription; |
| if (badgeElement) { |
| newDescription ? badgeElement.setAttribute('aria-label', newDescription) : |
| badgeElement.removeAttribute('aria-label'); |
| } |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatBadge.prototype, "hidden", { |
| /** Whether the badge is hidden. */ |
| get: /** |
| * Whether the badge is hidden. |
| * @return {?} |
| */ |
| function () { return this._hidden; }, |
| set: /** |
| * @param {?} val |
| * @return {?} |
| */ |
| function (val) { |
| this._hidden = coercion.coerceBooleanProperty(val); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** Whether the badge is above the host or not */ |
| /** |
| * Whether the badge is above the host or not |
| * @return {?} |
| */ |
| MatBadge.prototype.isAbove = /** |
| * Whether the badge is above the host or not |
| * @return {?} |
| */ |
| function () { |
| return this.position.indexOf('below') === -1; |
| }; |
| /** Whether the badge is after the host or not */ |
| /** |
| * Whether the badge is after the host or not |
| * @return {?} |
| */ |
| MatBadge.prototype.isAfter = /** |
| * Whether the badge is after the host or not |
| * @return {?} |
| */ |
| function () { |
| return this.position.indexOf('before') === -1; |
| }; |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| MatBadge.prototype.ngOnChanges = /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { |
| /** @type {?} */ |
| var contentChange = changes['content']; |
| if (contentChange) { |
| /** @type {?} */ |
| var value = contentChange.currentValue; |
| this._hasContent = value != null && ("" + value).trim().length > 0; |
| this._updateTextContent(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatBadge.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var badgeElement = this._badgeElement; |
| if (badgeElement) { |
| if (this.description) { |
| this._ariaDescriber.removeDescription(badgeElement, this.description); |
| } |
| // When creating a badge through the Renderer, Angular will keep it in an index. |
| // We have to destroy it ourselves, otherwise it'll be retained in memory. |
| if (this._renderer.destroyNode) { |
| this._renderer.destroyNode(badgeElement); |
| } |
| } |
| }; |
| /** |
| * Gets the element into which the badge's content is being rendered. |
| * Undefined if the element hasn't been created (e.g. if the badge doesn't have content). |
| */ |
| /** |
| * Gets the element into which the badge's content is being rendered. |
| * Undefined if the element hasn't been created (e.g. if the badge doesn't have content). |
| * @return {?} |
| */ |
| MatBadge.prototype.getBadgeElement = /** |
| * Gets the element into which the badge's content is being rendered. |
| * Undefined if the element hasn't been created (e.g. if the badge doesn't have content). |
| * @return {?} |
| */ |
| function () { |
| return this._badgeElement; |
| }; |
| /** Injects a span element into the DOM with the content. */ |
| /** |
| * Injects a span element into the DOM with the content. |
| * @private |
| * @return {?} |
| */ |
| MatBadge.prototype._updateTextContent = /** |
| * Injects a span element into the DOM with the content. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!this._badgeElement) { |
| this._badgeElement = this._createBadgeElement(); |
| } |
| else { |
| this._badgeElement.textContent = this.content; |
| } |
| return this._badgeElement; |
| }; |
| /** Creates the badge element */ |
| /** |
| * Creates the badge element |
| * @private |
| * @return {?} |
| */ |
| MatBadge.prototype._createBadgeElement = /** |
| * Creates the badge element |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var badgeElement = this._renderer.createElement('span'); |
| /** @type {?} */ |
| var activeClass = 'mat-badge-active'; |
| /** @type {?} */ |
| var contentClass = 'mat-badge-content'; |
| // Clear any existing badges which may have persisted from a server-side render. |
| this._clearExistingBadges(contentClass); |
| badgeElement.setAttribute('id', "mat-badge-content-" + this._id); |
| badgeElement.classList.add(contentClass); |
| badgeElement.textContent = this.content; |
| if (this._animationMode === 'NoopAnimations') { |
| badgeElement.classList.add('_mat-animation-noopable'); |
| } |
| if (this.description) { |
| badgeElement.setAttribute('aria-label', this.description); |
| } |
| this._elementRef.nativeElement.appendChild(badgeElement); |
| // animate in after insertion |
| if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') { |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| requestAnimationFrame((/** |
| * @return {?} |
| */ |
| function () { |
| badgeElement.classList.add(activeClass); |
| })); |
| })); |
| } |
| else { |
| badgeElement.classList.add(activeClass); |
| } |
| return badgeElement; |
| }; |
| /** Sets the aria-label property on the element */ |
| /** |
| * Sets the aria-label property on the element |
| * @private |
| * @param {?} newDescription |
| * @param {?} oldDescription |
| * @return {?} |
| */ |
| MatBadge.prototype._updateHostAriaDescription = /** |
| * Sets the aria-label property on the element |
| * @private |
| * @param {?} newDescription |
| * @param {?} oldDescription |
| * @return {?} |
| */ |
| function (newDescription, oldDescription) { |
| // ensure content available before setting label |
| /** @type {?} */ |
| var content = this._updateTextContent(); |
| if (oldDescription) { |
| this._ariaDescriber.removeDescription(content, oldDescription); |
| } |
| if (newDescription) { |
| this._ariaDescriber.describe(content, newDescription); |
| } |
| }; |
| /** Adds css theme class given the color to the component host */ |
| /** |
| * Adds css theme class given the color to the component host |
| * @private |
| * @param {?} colorPalette |
| * @return {?} |
| */ |
| MatBadge.prototype._setColor = /** |
| * Adds css theme class given the color to the component host |
| * @private |
| * @param {?} colorPalette |
| * @return {?} |
| */ |
| function (colorPalette) { |
| if (colorPalette !== this._color) { |
| if (this._color) { |
| this._elementRef.nativeElement.classList.remove("mat-badge-" + this._color); |
| } |
| if (colorPalette) { |
| this._elementRef.nativeElement.classList.add("mat-badge-" + colorPalette); |
| } |
| } |
| }; |
| /** Clears any existing badges that might be left over from server-side rendering. */ |
| /** |
| * Clears any existing badges that might be left over from server-side rendering. |
| * @private |
| * @param {?} cssClass |
| * @return {?} |
| */ |
| MatBadge.prototype._clearExistingBadges = /** |
| * Clears any existing badges that might be left over from server-side rendering. |
| * @private |
| * @param {?} cssClass |
| * @return {?} |
| */ |
| function (cssClass) { |
| /** @type {?} */ |
| var element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| var childCount = element.children.length; |
| // Use a reverse while, because we'll be removing elements from the list as we're iterating. |
| while (childCount--) { |
| /** @type {?} */ |
| var currentChild = element.children[childCount]; |
| if (currentChild.classList.contains(cssClass)) { |
| element.removeChild(currentChild); |
| } |
| } |
| }; |
| MatBadge.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matBadge]', |
| inputs: ['disabled: matBadgeDisabled'], |
| host: { |
| 'class': 'mat-badge', |
| '[class.mat-badge-overlap]': 'overlap', |
| '[class.mat-badge-above]': 'isAbove()', |
| '[class.mat-badge-below]': '!isAbove()', |
| '[class.mat-badge-before]': '!isAfter()', |
| '[class.mat-badge-after]': 'isAfter()', |
| '[class.mat-badge-small]': 'size === "small"', |
| '[class.mat-badge-medium]': 'size === "medium"', |
| '[class.mat-badge-large]': 'size === "large"', |
| '[class.mat-badge-hidden]': 'hidden || !_hasContent', |
| '[class.mat-badge-disabled]': 'disabled', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatBadge.ctorParameters = function () { return [ |
| { type: core.NgZone }, |
| { type: core.ElementRef }, |
| { type: a11y.AriaDescriber }, |
| { type: core.Renderer2 }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatBadge.propDecorators = { |
| color: [{ type: core.Input, args: ['matBadgeColor',] }], |
| overlap: [{ type: core.Input, args: ['matBadgeOverlap',] }], |
| position: [{ type: core.Input, args: ['matBadgePosition',] }], |
| content: [{ type: core.Input, args: ['matBadge',] }], |
| description: [{ type: core.Input, args: ['matBadgeDescription',] }], |
| size: [{ type: core.Input, args: ['matBadgeSize',] }], |
| hidden: [{ type: core.Input, args: ['matBadgeHidden',] }] |
| }; |
| return MatBadge; |
| }(_MatBadgeMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatBadgeModule = /** @class */ (function () { |
| function MatBadgeModule() { |
| } |
| MatBadgeModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| a11y.A11yModule, |
| MatCommonModule |
| ], |
| exports: [MatBadge], |
| declarations: [MatBadge], |
| },] }, |
| ]; |
| return MatBadgeModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to access the data that was passed in to a bottom sheet. |
| * @type {?} |
| */ |
| var MAT_BOTTOM_SHEET_DATA = new core.InjectionToken('MatBottomSheetData'); |
| /** |
| * Configuration used when opening a bottom sheet. |
| * @template D |
| */ |
| var /** |
| * Configuration used when opening a bottom sheet. |
| * @template D |
| */ |
| MatBottomSheetConfig = /** @class */ (function () { |
| function MatBottomSheetConfig() { |
| /** |
| * Data being injected into the child component. |
| */ |
| this.data = null; |
| /** |
| * Whether the bottom sheet has a backdrop. |
| */ |
| this.hasBackdrop = true; |
| /** |
| * Whether the user can use escape or clicking outside to close the bottom sheet. |
| */ |
| this.disableClose = false; |
| /** |
| * Aria label to assign to the bottom sheet element. |
| */ |
| this.ariaLabel = null; |
| /** |
| * Whether the bottom sheet should close when the user goes backwards/forwards in history. |
| * Note that this usually doesn't include clicking on links (unless the user is using |
| * the `HashLocationStrategy`). |
| */ |
| this.closeOnNavigation = true; |
| // Note that this is disabled by default, because while the a11y recommendations are to focus |
| // the first focusable element, doing so prevents screen readers from reading out the |
| // rest of the bottom sheet content. |
| /** |
| * Whether the bottom sheet should focus the first focusable element on open. |
| */ |
| this.autoFocus = false; |
| /** |
| * Whether the bottom sheet should restore focus to the |
| * previously-focused element, after it's closed. |
| */ |
| this.restoreFocus = true; |
| } |
| return MatBottomSheetConfig; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by the Material bottom sheet. |
| * @type {?} |
| */ |
| var matBottomSheetAnimations = { |
| /** |
| * Animation that shows and hides a bottom sheet. |
| */ |
| bottomSheetState: animations$1.trigger('state', [ |
| animations$1.state('void, hidden', animations$1.style({ transform: 'translateY(100%)' })), |
| animations$1.state('visible', animations$1.style({ transform: 'translateY(0%)' })), |
| animations$1.transition('visible => void, visible => hidden', animations$1.animate(AnimationDurations.COMPLEX + " " + AnimationCurves.ACCELERATION_CURVE)), |
| animations$1.transition('void => visible', animations$1.animate(AnimationDurations.EXITING + " " + AnimationCurves.DECELERATION_CURVE)), |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // TODO(crisbeto): consolidate some logic between this, MatDialog and MatSnackBar |
| /** |
| * Internal component that wraps user-provided bottom sheet content. |
| * \@docs-private |
| */ |
| var MatBottomSheetContainer = /** @class */ (function (_super) { |
| __extends(MatBottomSheetContainer, _super); |
| function MatBottomSheetContainer(_elementRef, _changeDetectorRef, _focusTrapFactory, breakpointObserver, document, bottomSheetConfig) { |
| var _this = _super.call(this) || this; |
| _this._elementRef = _elementRef; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._focusTrapFactory = _focusTrapFactory; |
| _this.bottomSheetConfig = bottomSheetConfig; |
| /** |
| * The state of the bottom sheet animations. |
| */ |
| _this._animationState = 'void'; |
| /** |
| * Emits whenever the state of the animation changes. |
| */ |
| _this._animationStateChanged = new core.EventEmitter(); |
| /** |
| * Element that was focused before the bottom sheet was opened. |
| */ |
| _this._elementFocusedBeforeOpened = null; |
| _this._document = document; |
| _this._breakpointSubscription = breakpointObserver |
| .observe([layout.Breakpoints.Medium, layout.Breakpoints.Large, layout.Breakpoints.XLarge]) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._toggleClass('mat-bottom-sheet-container-medium', breakpointObserver.isMatched(layout.Breakpoints.Medium)); |
| _this._toggleClass('mat-bottom-sheet-container-large', breakpointObserver.isMatched(layout.Breakpoints.Large)); |
| _this._toggleClass('mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(layout.Breakpoints.XLarge)); |
| })); |
| return _this; |
| } |
| /** Attach a component portal as content to this bottom sheet container. */ |
| /** |
| * Attach a component portal as content to this bottom sheet container. |
| * @template T |
| * @param {?} portal |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype.attachComponentPortal = /** |
| * Attach a component portal as content to this bottom sheet container. |
| * @template T |
| * @param {?} portal |
| * @return {?} |
| */ |
| function (portal$$1) { |
| this._validatePortalAttached(); |
| this._setPanelClass(); |
| this._savePreviouslyFocusedElement(); |
| return this._portalOutlet.attachComponentPortal(portal$$1); |
| }; |
| /** Attach a template portal as content to this bottom sheet container. */ |
| /** |
| * Attach a template portal as content to this bottom sheet container. |
| * @template C |
| * @param {?} portal |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype.attachTemplatePortal = /** |
| * Attach a template portal as content to this bottom sheet container. |
| * @template C |
| * @param {?} portal |
| * @return {?} |
| */ |
| function (portal$$1) { |
| this._validatePortalAttached(); |
| this._setPanelClass(); |
| this._savePreviouslyFocusedElement(); |
| return this._portalOutlet.attachTemplatePortal(portal$$1); |
| }; |
| /** Begin animation of bottom sheet entrance into view. */ |
| /** |
| * Begin animation of bottom sheet entrance into view. |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype.enter = /** |
| * Begin animation of bottom sheet entrance into view. |
| * @return {?} |
| */ |
| function () { |
| if (!this._destroyed) { |
| this._animationState = 'visible'; |
| this._changeDetectorRef.detectChanges(); |
| } |
| }; |
| /** Begin animation of the bottom sheet exiting from view. */ |
| /** |
| * Begin animation of the bottom sheet exiting from view. |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype.exit = /** |
| * Begin animation of the bottom sheet exiting from view. |
| * @return {?} |
| */ |
| function () { |
| if (!this._destroyed) { |
| this._animationState = 'hidden'; |
| this._changeDetectorRef.markForCheck(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._breakpointSubscription.unsubscribe(); |
| this._destroyed = true; |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._onAnimationDone = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (event.toState === 'hidden') { |
| this._restoreFocus(); |
| } |
| else if (event.toState === 'visible') { |
| this._trapFocus(); |
| } |
| this._animationStateChanged.emit(event); |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._onAnimationStart = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| this._animationStateChanged.emit(event); |
| }; |
| /** |
| * @private |
| * @param {?} cssClass |
| * @param {?} add |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._toggleClass = /** |
| * @private |
| * @param {?} cssClass |
| * @param {?} add |
| * @return {?} |
| */ |
| function (cssClass, add) { |
| /** @type {?} */ |
| var classList = this._elementRef.nativeElement.classList; |
| add ? classList.add(cssClass) : classList.remove(cssClass); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._validatePortalAttached = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this._portalOutlet.hasAttached()) { |
| throw Error('Attempting to attach bottom sheet content after content is already attached'); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._setPanelClass = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| var panelClass = this.bottomSheetConfig.panelClass; |
| if (Array.isArray(panelClass)) { |
| // Note that we can't use a spread here, because IE doesn't support multiple arguments. |
| panelClass.forEach((/** |
| * @param {?} cssClass |
| * @return {?} |
| */ |
| function (cssClass) { return element.classList.add(cssClass); })); |
| } |
| else if (panelClass) { |
| element.classList.add(panelClass); |
| } |
| }; |
| /** Moves the focus inside the focus trap. */ |
| /** |
| * Moves the focus inside the focus trap. |
| * @private |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._trapFocus = /** |
| * Moves the focus inside the focus trap. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!this._focusTrap) { |
| this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); |
| } |
| if (this.bottomSheetConfig.autoFocus) { |
| this._focusTrap.focusInitialElementWhenReady(); |
| } |
| }; |
| /** Restores focus to the element that was focused before the bottom sheet was opened. */ |
| /** |
| * Restores focus to the element that was focused before the bottom sheet was opened. |
| * @private |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._restoreFocus = /** |
| * Restores focus to the element that was focused before the bottom sheet was opened. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var toFocus = this._elementFocusedBeforeOpened; |
| // We need the extra check, because IE can set the `activeElement` to null in some cases. |
| if (this.bottomSheetConfig.restoreFocus && toFocus && typeof toFocus.focus === 'function') { |
| toFocus.focus(); |
| } |
| if (this._focusTrap) { |
| this._focusTrap.destroy(); |
| } |
| }; |
| /** Saves a reference to the element that was focused before the bottom sheet was opened. */ |
| /** |
| * Saves a reference to the element that was focused before the bottom sheet was opened. |
| * @private |
| * @return {?} |
| */ |
| MatBottomSheetContainer.prototype._savePreviouslyFocusedElement = /** |
| * Saves a reference to the element that was focused before the bottom sheet was opened. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._elementFocusedBeforeOpened = (/** @type {?} */ (this._document.activeElement)); |
| // The `focus` method isn't available during server-side rendering. |
| if (this._elementRef.nativeElement.focus) { |
| Promise.resolve().then((/** |
| * @return {?} |
| */ |
| function () { return _this._elementRef.nativeElement.focus(); })); |
| } |
| }; |
| MatBottomSheetContainer.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-bottom-sheet-container', |
| template: "<ng-template cdkPortalOutlet></ng-template>", |
| styles: [".mat-bottom-sheet-container{padding:8px 16px;min-width:100vw;box-sizing:border-box;display:block;outline:0;max-height:80vh;overflow:auto}@media (-ms-high-contrast:active){.mat-bottom-sheet-container{outline:1px solid}}.mat-bottom-sheet-container-large,.mat-bottom-sheet-container-medium,.mat-bottom-sheet-container-xlarge{border-top-left-radius:4px;border-top-right-radius:4px}.mat-bottom-sheet-container-medium{min-width:384px;max-width:calc(100vw - 128px)}.mat-bottom-sheet-container-large{min-width:512px;max-width:calc(100vw - 256px)}.mat-bottom-sheet-container-xlarge{min-width:576px;max-width:calc(100vw - 384px)}"], |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| animations: [matBottomSheetAnimations.bottomSheetState], |
| host: { |
| 'class': 'mat-bottom-sheet-container', |
| 'tabindex': '-1', |
| 'role': 'dialog', |
| 'aria-modal': 'true', |
| '[attr.aria-label]': 'bottomSheetConfig?.ariaLabel', |
| '[@state]': '_animationState', |
| '(@state.start)': '_onAnimationStart($event)', |
| '(@state.done)': '_onAnimationDone($event)' |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatBottomSheetContainer.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.ChangeDetectorRef }, |
| { type: a11y.FocusTrapFactory }, |
| { type: layout.BreakpointObserver }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] }, |
| { type: MatBottomSheetConfig } |
| ]; }; |
| MatBottomSheetContainer.propDecorators = { |
| _portalOutlet: [{ type: core.ViewChild, args: [portal.CdkPortalOutlet, { static: true },] }] |
| }; |
| return MatBottomSheetContainer; |
| }(portal.BasePortalOutlet)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatBottomSheetModule = /** @class */ (function () { |
| function MatBottomSheetModule() { |
| } |
| MatBottomSheetModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| overlay.OverlayModule, |
| MatCommonModule, |
| portal.PortalModule, |
| ], |
| exports: [MatBottomSheetContainer, MatCommonModule], |
| declarations: [MatBottomSheetContainer], |
| entryComponents: [MatBottomSheetContainer], |
| },] }, |
| ]; |
| return MatBottomSheetModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Reference to a bottom sheet dispatched from the bottom sheet service. |
| * @template T, R |
| */ |
| var /** |
| * Reference to a bottom sheet dispatched from the bottom sheet service. |
| * @template T, R |
| */ |
| MatBottomSheetRef = /** @class */ (function () { |
| function MatBottomSheetRef(containerInstance, _overlayRef, |
| // @breaking-change 8.0.0 `_location` parameter to be removed. |
| _location) { |
| var _this = this; |
| this._overlayRef = _overlayRef; |
| /** |
| * Subject for notifying the user that the bottom sheet has been dismissed. |
| */ |
| this._afterDismissed = new rxjs.Subject(); |
| /** |
| * Subject for notifying the user that the bottom sheet has opened and appeared. |
| */ |
| this._afterOpened = new rxjs.Subject(); |
| this.containerInstance = containerInstance; |
| this.disableClose = containerInstance.bottomSheetConfig.disableClose; |
| // Emit when opening animation completes |
| containerInstance._animationStateChanged.pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.phaseName === 'done' && event.toState === 'visible'; })), operators.take(1)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._afterOpened.next(); |
| _this._afterOpened.complete(); |
| })); |
| // Dispose overlay when closing animation is complete |
| containerInstance._animationStateChanged |
| .pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.phaseName === 'done' && event.toState === 'hidden'; })), operators.take(1)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| clearTimeout(_this._closeFallbackTimeout); |
| _overlayRef.dispose(); |
| })); |
| _overlayRef.detachments().pipe(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._afterDismissed.next(_this._result); |
| _this._afterDismissed.complete(); |
| })); |
| rxjs.merge(_overlayRef.backdropClick(), _overlayRef.keydownEvents().pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.keyCode === keycodes.ESCAPE; })))).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (!_this.disableClose && |
| (event.type !== 'keydown' || !keycodes.hasModifierKey((/** @type {?} */ (event))))) { |
| event.preventDefault(); |
| _this.dismiss(); |
| } |
| })); |
| } |
| /** |
| * Dismisses the bottom sheet. |
| * @param result Data to be passed back to the bottom sheet opener. |
| */ |
| /** |
| * Dismisses the bottom sheet. |
| * @param {?=} result Data to be passed back to the bottom sheet opener. |
| * @return {?} |
| */ |
| MatBottomSheetRef.prototype.dismiss = /** |
| * Dismisses the bottom sheet. |
| * @param {?=} result Data to be passed back to the bottom sheet opener. |
| * @return {?} |
| */ |
| function (result) { |
| var _this = this; |
| if (!this._afterDismissed.closed) { |
| // Transition the backdrop in parallel to the bottom sheet. |
| this.containerInstance._animationStateChanged.pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.phaseName === 'start'; })), operators.take(1)).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| // The logic that disposes of the overlay depends on the exit animation completing, however |
| // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback |
| // timeout which will clean everything up if the animation hasn't fired within the specified |
| // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the |
| // vast majority of cases the timeout will have been cleared before it has fired. |
| _this._closeFallbackTimeout = setTimeout((/** |
| * @return {?} |
| */ |
| function () { |
| _this._overlayRef.dispose(); |
| }), event.totalTime + 100); |
| _this._overlayRef.detachBackdrop(); |
| })); |
| this._result = result; |
| this.containerInstance.exit(); |
| } |
| }; |
| /** Gets an observable that is notified when the bottom sheet is finished closing. */ |
| /** |
| * Gets an observable that is notified when the bottom sheet is finished closing. |
| * @return {?} |
| */ |
| MatBottomSheetRef.prototype.afterDismissed = /** |
| * Gets an observable that is notified when the bottom sheet is finished closing. |
| * @return {?} |
| */ |
| function () { |
| return this._afterDismissed.asObservable(); |
| }; |
| /** Gets an observable that is notified when the bottom sheet has opened and appeared. */ |
| /** |
| * Gets an observable that is notified when the bottom sheet has opened and appeared. |
| * @return {?} |
| */ |
| MatBottomSheetRef.prototype.afterOpened = /** |
| * Gets an observable that is notified when the bottom sheet has opened and appeared. |
| * @return {?} |
| */ |
| function () { |
| return this._afterOpened.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 {?} |
| */ |
| MatBottomSheetRef.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 {?} |
| */ |
| MatBottomSheetRef.prototype.keydownEvents = /** |
| * Gets an observable that emits when keydown events are targeted on the overlay. |
| * @return {?} |
| */ |
| function () { |
| return this._overlayRef.keydownEvents(); |
| }; |
| return MatBottomSheetRef; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to specify default bottom sheet options. |
| * @type {?} |
| */ |
| var MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = new core.InjectionToken('mat-bottom-sheet-default-options'); |
| /** |
| * Service to trigger Material Design bottom sheets. |
| */ |
| var MatBottomSheet = /** @class */ (function () { |
| function MatBottomSheet(_overlay, _injector, _parentBottomSheet, _location, _defaultOptions) { |
| this._overlay = _overlay; |
| this._injector = _injector; |
| this._parentBottomSheet = _parentBottomSheet; |
| this._location = _location; |
| this._defaultOptions = _defaultOptions; |
| this._bottomSheetRefAtThisLevel = null; |
| } |
| Object.defineProperty(MatBottomSheet.prototype, "_openedBottomSheetRef", { |
| /** Reference to the currently opened bottom sheet. */ |
| get: /** |
| * Reference to the currently opened bottom sheet. |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var parent = this._parentBottomSheet; |
| return parent ? parent._openedBottomSheetRef : this._bottomSheetRefAtThisLevel; |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| if (this._parentBottomSheet) { |
| this._parentBottomSheet._openedBottomSheetRef = value; |
| } |
| else { |
| this._bottomSheetRefAtThisLevel = value; |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @template T, D, R |
| * @param {?} componentOrTemplateRef |
| * @param {?=} config |
| * @return {?} |
| */ |
| MatBottomSheet.prototype.open = /** |
| * @template T, D, R |
| * @param {?} componentOrTemplateRef |
| * @param {?=} config |
| * @return {?} |
| */ |
| function (componentOrTemplateRef, config) { |
| var _this = this; |
| /** @type {?} */ |
| var _config = _applyConfigDefaults(this._defaultOptions || new MatBottomSheetConfig(), config); |
| /** @type {?} */ |
| var overlayRef = this._createOverlay(_config); |
| /** @type {?} */ |
| var container = this._attachContainer(overlayRef, _config); |
| /** @type {?} */ |
| var ref = new MatBottomSheetRef(container, overlayRef, this._location); |
| if (componentOrTemplateRef instanceof core.TemplateRef) { |
| container.attachTemplatePortal(new portal.TemplatePortal(componentOrTemplateRef, (/** @type {?} */ (null)), (/** @type {?} */ ({ |
| $implicit: _config.data, |
| bottomSheetRef: ref |
| })))); |
| } |
| else { |
| /** @type {?} */ |
| var portal$$1 = new portal.ComponentPortal(componentOrTemplateRef, undefined, this._createInjector(_config, ref)); |
| /** @type {?} */ |
| var contentRef = container.attachComponentPortal(portal$$1); |
| ref.instance = contentRef.instance; |
| } |
| // When the bottom sheet is dismissed, clear the reference to it. |
| ref.afterDismissed().subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| // Clear the bottom sheet ref if it hasn't already been replaced by a newer one. |
| if (_this._openedBottomSheetRef == ref) { |
| _this._openedBottomSheetRef = null; |
| } |
| })); |
| if (this._openedBottomSheetRef) { |
| // If a bottom sheet is already in view, dismiss it and enter the |
| // new bottom sheet after exit animation is complete. |
| this._openedBottomSheetRef.afterDismissed().subscribe((/** |
| * @return {?} |
| */ |
| function () { return ref.containerInstance.enter(); })); |
| this._openedBottomSheetRef.dismiss(); |
| } |
| else { |
| // If no bottom sheet is in view, enter the new bottom sheet. |
| ref.containerInstance.enter(); |
| } |
| this._openedBottomSheetRef = ref; |
| return ref; |
| }; |
| /** |
| * Dismisses the currently-visible bottom sheet. |
| */ |
| /** |
| * Dismisses the currently-visible bottom sheet. |
| * @return {?} |
| */ |
| MatBottomSheet.prototype.dismiss = /** |
| * Dismisses the currently-visible bottom sheet. |
| * @return {?} |
| */ |
| function () { |
| if (this._openedBottomSheetRef) { |
| this._openedBottomSheetRef.dismiss(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatBottomSheet.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| if (this._bottomSheetRefAtThisLevel) { |
| this._bottomSheetRefAtThisLevel.dismiss(); |
| } |
| }; |
| /** |
| * Attaches the bottom sheet container component to the overlay. |
| */ |
| /** |
| * Attaches the bottom sheet container component to the overlay. |
| * @private |
| * @param {?} overlayRef |
| * @param {?} config |
| * @return {?} |
| */ |
| MatBottomSheet.prototype._attachContainer = /** |
| * Attaches the bottom sheet container component to the overlay. |
| * @private |
| * @param {?} overlayRef |
| * @param {?} config |
| * @return {?} |
| */ |
| function (overlayRef, config) { |
| /** @type {?} */ |
| var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| /** @type {?} */ |
| var injector = new portal.PortalInjector(userInjector || this._injector, new WeakMap([ |
| [MatBottomSheetConfig, config] |
| ])); |
| /** @type {?} */ |
| var containerPortal = new portal.ComponentPortal(MatBottomSheetContainer, config.viewContainerRef, injector); |
| /** @type {?} */ |
| var containerRef = overlayRef.attach(containerPortal); |
| return containerRef.instance; |
| }; |
| /** |
| * Creates a new overlay and places it in the correct location. |
| * @param config The user-specified bottom sheet config. |
| */ |
| /** |
| * Creates a new overlay and places it in the correct location. |
| * @private |
| * @param {?} config The user-specified bottom sheet config. |
| * @return {?} |
| */ |
| MatBottomSheet.prototype._createOverlay = /** |
| * Creates a new overlay and places it in the correct location. |
| * @private |
| * @param {?} config The user-specified bottom sheet config. |
| * @return {?} |
| */ |
| function (config) { |
| /** @type {?} */ |
| var overlayConfig = new overlay.OverlayConfig({ |
| direction: config.direction, |
| hasBackdrop: config.hasBackdrop, |
| disposeOnNavigation: config.closeOnNavigation, |
| maxWidth: '100%', |
| scrollStrategy: config.scrollStrategy || this._overlay.scrollStrategies.block(), |
| positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0') |
| }); |
| if (config.backdropClass) { |
| overlayConfig.backdropClass = config.backdropClass; |
| } |
| return this._overlay.create(overlayConfig); |
| }; |
| /** |
| * Creates an injector to be used inside of a bottom sheet component. |
| * @param config Config that was used to create the bottom sheet. |
| * @param bottomSheetRef Reference to the bottom sheet. |
| */ |
| /** |
| * Creates an injector to be used inside of a bottom sheet component. |
| * @private |
| * @template T |
| * @param {?} config Config that was used to create the bottom sheet. |
| * @param {?} bottomSheetRef Reference to the bottom sheet. |
| * @return {?} |
| */ |
| MatBottomSheet.prototype._createInjector = /** |
| * Creates an injector to be used inside of a bottom sheet component. |
| * @private |
| * @template T |
| * @param {?} config Config that was used to create the bottom sheet. |
| * @param {?} bottomSheetRef Reference to the bottom sheet. |
| * @return {?} |
| */ |
| function (config, bottomSheetRef) { |
| /** @type {?} */ |
| var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| /** @type {?} */ |
| var injectionTokens = new WeakMap([ |
| [MatBottomSheetRef, bottomSheetRef], |
| [MAT_BOTTOM_SHEET_DATA, config.data] |
| ]); |
| if (config.direction && |
| (!userInjector || !userInjector.get(bidi.Directionality, null))) { |
| injectionTokens.set(bidi.Directionality, { |
| value: config.direction, |
| change: rxjs.of() |
| }); |
| } |
| return new portal.PortalInjector(userInjector || this._injector, injectionTokens); |
| }; |
| MatBottomSheet.decorators = [ |
| { type: core.Injectable, args: [{ providedIn: MatBottomSheetModule },] }, |
| ]; |
| /** @nocollapse */ |
| MatBottomSheet.ctorParameters = function () { return [ |
| { type: overlay.Overlay }, |
| { type: core.Injector }, |
| { type: MatBottomSheet, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] }, |
| { type: common.Location, decorators: [{ type: core.Optional }] }, |
| { type: MatBottomSheetConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_BOTTOM_SHEET_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| /** @nocollapse */ MatBottomSheet.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatBottomSheet_Factory() { return new MatBottomSheet(core.ɵɵinject(overlay.Overlay), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(MatBottomSheet, 12), core.ɵɵinject(common.Location, 8), core.ɵɵinject(MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, 8)); }, token: MatBottomSheet, providedIn: MatBottomSheetModule }); |
| return MatBottomSheet; |
| }()); |
| /** |
| * Applies default options to the bottom sheet config. |
| * @param {?} defaults Object containing the default values to which to fall back. |
| * @param {?=} config The configuration to which the defaults will be applied. |
| * @return {?} The new configuration object with defaults applied. |
| */ |
| function _applyConfigDefaults(defaults, config) { |
| return __assign({}, defaults, config); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Default color palette for round buttons (mat-fab and mat-mini-fab) |
| * @type {?} |
| */ |
| var DEFAULT_ROUND_BUTTON_COLOR = 'accent'; |
| /** |
| * List of classes to add to MatButton instances based on host attributes to |
| * style as different variants. |
| * @type {?} |
| */ |
| var BUTTON_HOST_ATTRIBUTES = [ |
| 'mat-button', |
| 'mat-flat-button', |
| 'mat-icon-button', |
| 'mat-raised-button', |
| 'mat-stroked-button', |
| 'mat-mini-fab', |
| 'mat-fab', |
| ]; |
| // Boilerplate for applying mixins to MatButton. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatButton. |
| /** |
| * \@docs-private |
| */ |
| MatButtonBase = /** @class */ (function () { |
| function MatButtonBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatButtonBase; |
| }()); |
| /** @type {?} */ |
| var _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase))); |
| /** |
| * Material design button. |
| */ |
| var MatButton = /** @class */ (function (_super) { |
| __extends(MatButton, _super); |
| function MatButton(elementRef, _focusMonitor, _animationMode) { |
| var _this = _super.call(this, elementRef) || this; |
| _this._focusMonitor = _focusMonitor; |
| _this._animationMode = _animationMode; |
| /** |
| * 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)) { |
| ((/** @type {?} */ (_this._getHostElement()))).classList.add(attr); |
| } |
| } |
| _this._focusMonitor.monitor(_this._elementRef, true); |
| if (_this.isRoundButton) { |
| _this.color = DEFAULT_ROUND_BUTTON_COLOR; |
| } |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatButton.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| }; |
| /** 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]; |
| } |
| return attributes.some((/** |
| * @param {?} attribute |
| * @return {?} |
| */ |
| 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: { |
| '[attr.disabled]': 'disabled || null', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| }, |
| 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-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media (hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.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-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}@media (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:#fff}}@media (-ms-high-contrast:black-on-white){.mat-button-focus-overlay{background-color:#000}}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}@media (-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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatButton.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: a11y.FocusMonitor }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatButton.propDecorators = { |
| ripple: [{ type: core.ViewChild, args: [MatRipple, { static: false },] }] |
| }; |
| return MatButton; |
| }(_MatButtonMixinBase)); |
| /** |
| * Material design anchor button. |
| */ |
| var MatAnchor = /** @class */ (function (_super) { |
| __extends(MatAnchor, _super); |
| function MatAnchor(focusMonitor, elementRef, animationMode) { |
| return _super.call(this, elementRef, focusMonitor, animationMode) || 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: { |
| // Note that we ignore the user-specified tabindex when it's disabled for |
| // consistency with the `mat-button` applied on native buttons where even |
| // though they have an index, they're not tabbable. |
| '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)', |
| '[attr.disabled]': 'disabled || null', |
| '[attr.aria-disabled]': 'disabled.toString()', |
| '(click)': '_haltDisabledEvents($event)', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| }, |
| 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-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media (hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{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:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.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-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}@media (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:#fff}}@media (-ms-high-contrast:black-on-white){.mat-button-focus-overlay{background-color:#000}}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}@media (-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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatAnchor.ctorParameters = function () { return [ |
| { type: a11y.FocusMonitor }, |
| { type: core.ElementRef }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatAnchor.propDecorators = { |
| tabIndex: [{ type: core.Input }] |
| }; |
| return MatAnchor; |
| }(MatButton)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatButtonModule = /** @class */ (function () { |
| function MatButtonModule() { |
| } |
| MatButtonModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| MatRippleModule, |
| MatCommonModule, |
| ], |
| exports: [ |
| MatButton, |
| MatAnchor, |
| MatCommonModule, |
| ], |
| declarations: [ |
| MatButton, |
| MatAnchor, |
| ], |
| },] }, |
| ]; |
| return MatButtonModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to configure the |
| * default options for all button toggles within an app. |
| * @type {?} |
| */ |
| var MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS = new core.InjectionToken('MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS'); |
| /** |
| * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor. |
| * This allows it to support [(ngModel)]. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatButtonToggleGroup; })), |
| multi: true |
| }; |
| /** |
| * @deprecated Use `MatButtonToggleGroup` instead. |
| * \@breaking-change 8.0.0 |
| */ |
| var /** |
| * @deprecated Use `MatButtonToggleGroup` instead. |
| * \@breaking-change 8.0.0 |
| */ |
| MatButtonToggleGroupMultiple = /** @class */ (function () { |
| function MatButtonToggleGroupMultiple() { |
| } |
| return MatButtonToggleGroupMultiple; |
| }()); |
| /** @type {?} */ |
| var _uniqueIdCounter$1 = 0; |
| /** |
| * Change event object emitted by MatButtonToggle. |
| */ |
| var /** |
| * Change event object emitted by MatButtonToggle. |
| */ |
| MatButtonToggleChange = /** @class */ (function () { |
| function MatButtonToggleChange(source, value) { |
| this.source = source; |
| this.value = value; |
| } |
| return MatButtonToggleChange; |
| }()); |
| /** |
| * Exclusive selection button toggle group that behaves like a radio-button group. |
| */ |
| var MatButtonToggleGroup = /** @class */ (function () { |
| function MatButtonToggleGroup(_changeDetector, defaultOptions) { |
| this._changeDetector = _changeDetector; |
| this._vertical = false; |
| this._multiple = false; |
| this._disabled = false; |
| /** |
| * The method to be called in order to update ngModel. |
| * Now `ngModel` binding is not supported in multiple selection mode. |
| */ |
| this._controlValueAccessorChangeFn = (/** |
| * @return {?} |
| */ |
| function () { }); |
| /** |
| * onTouch function registered via registerOnTouch (ControlValueAccessor). |
| */ |
| this._onTouched = (/** |
| * @return {?} |
| */ |
| function () { }); |
| this._name = "mat-button-toggle-group-" + _uniqueIdCounter$1++; |
| /** |
| * Event that emits whenever the value of the group changes. |
| * Used to facilitate two-way data binding. |
| * \@docs-private |
| */ |
| this.valueChange = new core.EventEmitter(); |
| /** |
| * Event emitted when the group's value changes. |
| */ |
| this.change = new core.EventEmitter(); |
| this.appearance = |
| defaultOptions && defaultOptions.appearance ? defaultOptions.appearance : 'standard'; |
| } |
| Object.defineProperty(MatButtonToggleGroup.prototype, "name", { |
| /** `name` attribute for the underlying `input` element. */ |
| get: /** |
| * `name` attribute for the underlying `input` element. |
| * @return {?} |
| */ |
| function () { return this._name; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| var _this = this; |
| this._name = value; |
| if (this._buttonToggles) { |
| this._buttonToggles.forEach((/** |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { |
| toggle.name = _this._name; |
| toggle._markForCheck(); |
| })); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatButtonToggleGroup.prototype, "vertical", { |
| /** Whether the toggle group is 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", { |
| /** Value of the toggle group. */ |
| get: /** |
| * Value of the toggle group. |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var selected = this._selectionModel ? this._selectionModel.selected : []; |
| if (this.multiple) { |
| return selected.map((/** |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { return toggle.value; })); |
| } |
| return selected[0] ? selected[0].value : undefined; |
| }, |
| set: /** |
| * @param {?} newValue |
| * @return {?} |
| */ |
| function (newValue) { |
| this._setSelectionByValue(newValue); |
| this.valueChange.emit(this.value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatButtonToggleGroup.prototype, "selected", { |
| /** Selected button toggles in the group. */ |
| get: /** |
| * Selected button toggles in the group. |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var selected = this._selectionModel.selected; |
| return this.multiple ? selected : (selected[0] || null); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatButtonToggleGroup.prototype, "multiple", { |
| /** Whether multiple button toggles can be selected. */ |
| get: /** |
| * Whether multiple button toggles can be selected. |
| * @return {?} |
| */ |
| function () { return this._multiple; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._multiple = coercion.coerceBooleanProperty(value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatButtonToggleGroup.prototype, "disabled", { |
| /** Whether multiple button toggle group is disabled. */ |
| get: /** |
| * Whether multiple button toggle group is disabled. |
| * @return {?} |
| */ |
| function () { return this._disabled; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._disabled = coercion.coerceBooleanProperty(value); |
| if (this._buttonToggles) { |
| this._buttonToggles.forEach((/** |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { return toggle._markForCheck(); })); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._selectionModel = new collections.SelectionModel(this.multiple, undefined, false); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _a; |
| (_a = this._selectionModel).select.apply(_a, this._buttonToggles.filter((/** |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { return toggle.checked; }))); |
| }; |
| /** |
| * Sets the model value. Implemented as part of ControlValueAccessor. |
| * @param value Value to be set to the model. |
| */ |
| /** |
| * Sets the model value. Implemented as part of ControlValueAccessor. |
| * @param {?} value Value to be set to the model. |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype.writeValue = /** |
| * Sets the model value. Implemented as part of ControlValueAccessor. |
| * @param {?} value Value to be set to the model. |
| * @return {?} |
| */ |
| function (value) { |
| this.value = value; |
| this._changeDetector.markForCheck(); |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype.registerOnChange = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._controlValueAccessorChangeFn = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype.registerOnTouched = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._onTouched = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype.setDisabledState = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| function (isDisabled) { |
| this.disabled = isDisabled; |
| }; |
| /** 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 () { |
| /** @type {?} */ |
| var selected = this.selected; |
| /** @type {?} */ |
| var source = Array.isArray(selected) ? selected[selected.length - 1] : selected; |
| /** @type {?} */ |
| var event = new MatButtonToggleChange((/** @type {?} */ (source)), this.value); |
| this._controlValueAccessorChangeFn(event.value); |
| this.change.emit(event); |
| }; |
| /** |
| * Syncs a button toggle's selected state with the model value. |
| * @param toggle Toggle to be synced. |
| * @param select Whether the toggle should be selected. |
| * @param isUserInput Whether the change was a result of a user interaction. |
| * @param deferEvents Whether to defer emitting the change events. |
| */ |
| /** |
| * Syncs a button toggle's selected state with the model value. |
| * @param {?} toggle Toggle to be synced. |
| * @param {?} select Whether the toggle should be selected. |
| * @param {?=} isUserInput Whether the change was a result of a user interaction. |
| * @param {?=} deferEvents Whether to defer emitting the change events. |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype._syncButtonToggle = /** |
| * Syncs a button toggle's selected state with the model value. |
| * @param {?} toggle Toggle to be synced. |
| * @param {?} select Whether the toggle should be selected. |
| * @param {?=} isUserInput Whether the change was a result of a user interaction. |
| * @param {?=} deferEvents Whether to defer emitting the change events. |
| * @return {?} |
| */ |
| function (toggle, select, isUserInput, deferEvents) { |
| if (isUserInput === void 0) { isUserInput = false; } |
| if (deferEvents === void 0) { deferEvents = false; } |
| // Deselect the currently-selected toggle, if we're in single-selection |
| // mode and the button being toggled isn't selected at the moment. |
| if (!this.multiple && this.selected && !toggle.checked) { |
| ((/** @type {?} */ (this.selected))).checked = false; |
| } |
| if (select) { |
| this._selectionModel.select(toggle); |
| } |
| else { |
| this._selectionModel.deselect(toggle); |
| } |
| // We need to defer in some cases in order to avoid "changed after checked errors", however |
| // the side-effect is that we may end up updating the model value out of sequence in others |
| // The `deferEvents` flag allows us to decide whether to do it on a case-by-case basis. |
| if (deferEvents) { |
| } |
| else { |
| this._updateModelValue(isUserInput); |
| } |
| }; |
| /** Checks whether a button toggle is selected. */ |
| /** |
| * Checks whether a button toggle is selected. |
| * @param {?} toggle |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype._isSelected = /** |
| * Checks whether a button toggle is selected. |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { |
| return this._selectionModel.isSelected(toggle); |
| }; |
| /** Determines whether a button toggle should be checked on init. */ |
| /** |
| * Determines whether a button toggle should be checked on init. |
| * @param {?} toggle |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype._isPrechecked = /** |
| * Determines whether a button toggle should be checked on init. |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { |
| if (typeof this._rawValue === 'undefined') { |
| return false; |
| } |
| if (this.multiple && Array.isArray(this._rawValue)) { |
| return this._rawValue.some((/** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { return toggle.value != null && value === toggle.value; })); |
| } |
| return toggle.value === this._rawValue; |
| }; |
| /** Updates the selection state of the toggles in the group based on a value. */ |
| /** |
| * Updates the selection state of the toggles in the group based on a value. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype._setSelectionByValue = /** |
| * Updates the selection state of the toggles in the group based on a value. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| var _this = this; |
| this._rawValue = value; |
| if (!this._buttonToggles) { |
| return; |
| } |
| if (this.multiple && value) { |
| if (!Array.isArray(value)) { |
| throw Error('Value must be an array in multiple-selection mode.'); |
| } |
| this._clearSelection(); |
| value.forEach((/** |
| * @param {?} currentValue |
| * @return {?} |
| */ |
| function (currentValue) { return _this._selectValue(currentValue); })); |
| } |
| else { |
| this._clearSelection(); |
| this._selectValue(value); |
| } |
| }; |
| /** Clears the selected toggles. */ |
| /** |
| * Clears the selected toggles. |
| * @private |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype._clearSelection = /** |
| * Clears the selected toggles. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this._selectionModel.clear(); |
| this._buttonToggles.forEach((/** |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { return toggle.checked = false; })); |
| }; |
| /** Selects a value if there's a toggle that corresponds to it. */ |
| /** |
| * Selects a value if there's a toggle that corresponds to it. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype._selectValue = /** |
| * Selects a value if there's a toggle that corresponds to it. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var correspondingOption = this._buttonToggles.find((/** |
| * @param {?} toggle |
| * @return {?} |
| */ |
| function (toggle) { |
| return toggle.value != null && toggle.value === value; |
| })); |
| if (correspondingOption) { |
| correspondingOption.checked = true; |
| this._selectionModel.select(correspondingOption); |
| } |
| }; |
| /** Syncs up the group's value with the model and emits the change event. */ |
| /** |
| * Syncs up the group's value with the model and emits the change event. |
| * @private |
| * @param {?} isUserInput |
| * @return {?} |
| */ |
| MatButtonToggleGroup.prototype._updateModelValue = /** |
| * Syncs up the group's value with the model and emits the change event. |
| * @private |
| * @param {?} isUserInput |
| * @return {?} |
| */ |
| function (isUserInput) { |
| // Only emit the change event for user input. |
| if (isUserInput) { |
| this._emitChangeEvent(); |
| } |
| // Note: we emit this one no matter whether it was a user interaction, because |
| // it is used by Angular to sync up the two-way data binding. |
| this.valueChange.emit(this.value); |
| }; |
| MatButtonToggleGroup.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-button-toggle-group', |
| providers: [ |
| MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, |
| { provide: MatButtonToggleGroupMultiple, useExisting: MatButtonToggleGroup }, |
| ], |
| host: { |
| 'role': 'group', |
| 'class': 'mat-button-toggle-group', |
| '[attr.aria-disabled]': 'disabled', |
| '[class.mat-button-toggle-vertical]': 'vertical', |
| '[class.mat-button-toggle-group-appearance-standard]': 'appearance === "standard"', |
| }, |
| exportAs: 'matButtonToggleGroup', |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatButtonToggleGroup.ctorParameters = function () { return [ |
| { type: core.ChangeDetectorRef }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| MatButtonToggleGroup.propDecorators = { |
| _buttonToggles: [{ type: core.ContentChildren, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatButtonToggle; })),] }], |
| appearance: [{ type: core.Input }], |
| name: [{ type: core.Input }], |
| vertical: [{ type: core.Input }], |
| value: [{ type: core.Input }], |
| valueChange: [{ type: core.Output }], |
| multiple: [{ type: core.Input }], |
| disabled: [{ type: core.Input }], |
| change: [{ type: core.Output }] |
| }; |
| return MatButtonToggleGroup; |
| }()); |
| // Boilerplate for applying mixins to the MatButtonToggle class. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to the MatButtonToggle class. |
| /** |
| * \@docs-private |
| */ |
| MatButtonToggleBase = /** @class */ (function () { |
| function MatButtonToggleBase() { |
| } |
| return MatButtonToggleBase; |
| }()); |
| /** @type {?} */ |
| var _MatButtonToggleMixinBase = mixinDisableRipple(MatButtonToggleBase); |
| /** |
| * Single button inside of a toggle group. |
| */ |
| var MatButtonToggle = /** @class */ (function (_super) { |
| __extends(MatButtonToggle, _super); |
| function MatButtonToggle(toggleGroup, _changeDetectorRef, _elementRef, _focusMonitor, |
| // @breaking-change 8.0.0 `defaultTabIndex` to be made a required parameter. |
| defaultTabIndex, defaultOptions) { |
| var _this = _super.call(this) || this; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._elementRef = _elementRef; |
| _this._focusMonitor = _focusMonitor; |
| _this._isSingleSelector = false; |
| _this._checked = false; |
| /** |
| * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element |
| */ |
| _this.ariaLabelledby = null; |
| _this._disabled = false; |
| /** |
| * Event emitted when the group value changes. |
| */ |
| _this.change = new core.EventEmitter(); |
| /** @type {?} */ |
| var parsedTabIndex = Number(defaultTabIndex); |
| _this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null; |
| _this.buttonToggleGroup = toggleGroup; |
| _this.appearance = |
| defaultOptions && defaultOptions.appearance ? defaultOptions.appearance : 'standard'; |
| return _this; |
| } |
| Object.defineProperty(MatButtonToggle.prototype, "buttonId", { |
| /** Unique ID for the underlying `button` element. */ |
| get: /** |
| * Unique ID for the underlying `button` element. |
| * @return {?} |
| */ |
| function () { return this.id + "-button"; }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatButtonToggle.prototype, "appearance", { |
| /** The appearance style of the button. */ |
| get: /** |
| * The appearance style of the button. |
| * @return {?} |
| */ |
| function () { |
| return this.buttonToggleGroup ? this.buttonToggleGroup.appearance : this._appearance; |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._appearance = value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatButtonToggle.prototype, "checked", { |
| /** Whether the button is checked. */ |
| get: /** |
| * Whether the button is checked. |
| * @return {?} |
| */ |
| function () { |
| return this.buttonToggleGroup ? this.buttonToggleGroup._isSelected(this) : this._checked; |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var newValue = coercion.coerceBooleanProperty(value); |
| if (newValue !== this._checked) { |
| this._checked = newValue; |
| if (this.buttonToggleGroup) { |
| this.buttonToggleGroup._syncButtonToggle(this, this._checked); |
| } |
| this._changeDetectorRef.markForCheck(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatButtonToggle.prototype, "disabled", { |
| /** Whether the button is disabled. */ |
| get: /** |
| * Whether the button is disabled. |
| * @return {?} |
| */ |
| function () { |
| return this._disabled || (this.buttonToggleGroup && this.buttonToggleGroup.disabled); |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this._disabled = coercion.coerceBooleanProperty(value); }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatButtonToggle.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._isSingleSelector = this.buttonToggleGroup && !this.buttonToggleGroup.multiple; |
| this._type = this._isSingleSelector ? 'radio' : 'checkbox'; |
| this.id = this.id || "mat-button-toggle-" + _uniqueIdCounter$1++; |
| if (this._isSingleSelector) { |
| this.name = this.buttonToggleGroup.name; |
| } |
| if (this.buttonToggleGroup && this.buttonToggleGroup._isPrechecked(this)) { |
| this.checked = true; |
| } |
| this._focusMonitor.monitor(this._elementRef, true); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatButtonToggle.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var group = this.buttonToggleGroup; |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| // Remove the toggle from the selection once it's destroyed. Needs to happen |
| // on the next tick in order to avoid "changed after checked" errors. |
| if (group && group._isSelected(this)) { |
| group._syncButtonToggle(this, false, false, true); |
| } |
| }; |
| /** Focuses the button. */ |
| /** |
| * Focuses the button. |
| * @return {?} |
| */ |
| MatButtonToggle.prototype.focus = /** |
| * Focuses the button. |
| * @return {?} |
| */ |
| function () { |
| this._buttonElement.nativeElement.focus(); |
| }; |
| /** Checks the button toggle due to an interaction with the underlying native button. */ |
| /** |
| * Checks the button toggle due to an interaction with the underlying native button. |
| * @return {?} |
| */ |
| MatButtonToggle.prototype._onButtonClick = /** |
| * Checks the button toggle due to an interaction with the underlying native button. |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var newChecked = this._isSingleSelector ? true : !this._checked; |
| if (newChecked !== this._checked) { |
| this._checked = newChecked; |
| if (this.buttonToggleGroup) { |
| this.buttonToggleGroup._syncButtonToggle(this, this._checked, true); |
| this.buttonToggleGroup._onTouched(); |
| } |
| } |
| // Emit a change event when it's the single selector |
| this.change.emit(new MatButtonToggleChange(this, this.value)); |
| }; |
| /** |
| * 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 the 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: "<button #button class=\"mat-button-toggle-button\" type=\"button\" [id]=\"buttonId\" [attr.tabindex]=\"disabled ? -1 : tabIndex\" [attr.aria-pressed]=\"checked\" [disabled]=\"disabled || null\" [attr.name]=\"name || null\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (click)=\"_onButtonClick()\"><div class=\"mat-button-toggle-label-content\"><ng-content></ng-content></div></button><div class=\"mat-button-toggle-focus-overlay\"></div><div class=\"mat-button-toggle-ripple\" matRipple [matRippleTrigger]=\"button\" [matRippleDisabled]=\"this.disableRipple || this.disabled\"></div>", |
| styles: [".mat-button-toggle-group,.mat-button-toggle-standalone{position:relative;display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:2px;-webkit-tap-highlight-color:transparent}@media (-ms-high-contrast:active){.mat-button-toggle-group,.mat-button-toggle-standalone{outline:solid 1px}}.mat-button-toggle-group-appearance-standard,.mat-button-toggle-standalone.mat-button-toggle-appearance-standard{border-radius:4px}@media (-ms-high-contrast:active){.mat-button-toggle-group-appearance-standard,.mat-button-toggle-standalone.mat-button-toggle-appearance-standard{outline:0}}.mat-button-toggle-vertical{flex-direction:column}.mat-button-toggle-vertical .mat-button-toggle-label-content{display:block}.mat-button-toggle{white-space:nowrap;position:relative}.mat-button-toggle .mat-icon svg{vertical-align:top}.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay{opacity:1}@media (-ms-high-contrast:active){.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay{opacity:.5}}.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay{opacity:.04}.mat-button-toggle-appearance-standard.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay{opacity:.12}@media (-ms-high-contrast:active){.mat-button-toggle-appearance-standard.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay{opacity:.5}}@media (hover:none){.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay{display:none}}.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;position:relative}.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:48px;padding:0 12px}.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}.mat-button-toggle-checked .mat-button-toggle-focus-overlay{border-bottom:solid 36px}@media (-ms-high-contrast:active){.mat-button-toggle-checked .mat-button-toggle-focus-overlay{opacity:.5;height:0}}@media (-ms-high-contrast:active){.mat-button-toggle-checked.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay{border-bottom:solid 48px}}.mat-button-toggle .mat-button-toggle-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-button-toggle-button{border:0;background:0 0;color:inherit;padding:0;margin:0;font:inherit;outline:0;width:100%;cursor:pointer}.mat-button-toggle-disabled .mat-button-toggle-button{cursor:default}.mat-button-toggle-button::-moz-focus-inner{border:0}"], |
| encapsulation: core.ViewEncapsulation.None, |
| exportAs: 'matButtonToggle', |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| inputs: ['disableRipple'], |
| host: { |
| '[class.mat-button-toggle-standalone]': '!buttonToggleGroup', |
| '[class.mat-button-toggle-checked]': 'checked', |
| '[class.mat-button-toggle-disabled]': 'disabled', |
| '[class.mat-button-toggle-appearance-standard]': 'appearance === "standard"', |
| 'class': 'mat-button-toggle', |
| // Always reset the tabindex to -1 so it doesn't conflict with the one on the `button`, |
| // but can still receive focus from things like cdkFocusInitial. |
| '[attr.tabindex]': '-1', |
| '[attr.id]': 'id', |
| '[attr.name]': 'null', |
| '(focus)': 'focus()', |
| } |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatButtonToggle.ctorParameters = function () { return [ |
| { type: MatButtonToggleGroup, decorators: [{ type: core.Optional }] }, |
| { type: core.ChangeDetectorRef }, |
| { type: core.ElementRef }, |
| { type: a11y.FocusMonitor }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| MatButtonToggle.propDecorators = { |
| ariaLabel: [{ type: core.Input, args: ['aria-label',] }], |
| ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }], |
| _buttonElement: [{ type: core.ViewChild, args: ['button', { static: false },] }], |
| id: [{ type: core.Input }], |
| name: [{ type: core.Input }], |
| value: [{ type: core.Input }], |
| tabIndex: [{ type: core.Input }], |
| appearance: [{ type: core.Input }], |
| checked: [{ type: core.Input }], |
| disabled: [{ type: core.Input }], |
| change: [{ type: core.Output }] |
| }; |
| return MatButtonToggle; |
| }(_MatButtonToggleMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatButtonToggleModule = /** @class */ (function () { |
| function MatButtonToggleModule() { |
| } |
| MatButtonToggleModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule, MatRippleModule], |
| exports: [MatCommonModule, MatButtonToggleGroup, MatButtonToggle], |
| declarations: [MatButtonToggleGroup, MatButtonToggle], |
| },] }, |
| ]; |
| return MatButtonToggleModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Content of a card, needed as it's used as a selector in the API. |
| * \@docs-private |
| */ |
| var MatCardContent = /** @class */ (function () { |
| function MatCardContent() { |
| } |
| MatCardContent.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-card-content', |
| host: { 'class': 'mat-card-content' } |
| },] }, |
| ]; |
| return MatCardContent; |
| }()); |
| /** |
| * Title of a card, needed as it's used as a selector in the API. |
| * \@docs-private |
| */ |
| var MatCardTitle = /** @class */ (function () { |
| function MatCardTitle() { |
| } |
| MatCardTitle.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "mat-card-title, [mat-card-title], [matCardTitle]", |
| host: { |
| 'class': 'mat-card-title' |
| } |
| },] }, |
| ]; |
| return MatCardTitle; |
| }()); |
| /** |
| * Sub-title of a card, needed as it's used as a selector in the API. |
| * \@docs-private |
| */ |
| var MatCardSubtitle = /** @class */ (function () { |
| function MatCardSubtitle() { |
| } |
| MatCardSubtitle.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]", |
| host: { |
| 'class': 'mat-card-subtitle' |
| } |
| },] }, |
| ]; |
| return MatCardSubtitle; |
| }()); |
| /** |
| * Action section of a card, needed as it's used as a selector in the API. |
| * \@docs-private |
| */ |
| var MatCardActions = /** @class */ (function () { |
| function MatCardActions() { |
| /** |
| * Position of the actions inside the card. |
| */ |
| this.align = 'start'; |
| } |
| MatCardActions.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-card-actions', |
| exportAs: 'matCardActions', |
| host: { |
| 'class': 'mat-card-actions', |
| '[class.mat-card-actions-align-end]': 'align === "end"', |
| } |
| },] }, |
| ]; |
| MatCardActions.propDecorators = { |
| align: [{ type: core.Input }] |
| }; |
| return MatCardActions; |
| }()); |
| /** |
| * Footer of a card, needed as it's used as a selector in the API. |
| * \@docs-private |
| */ |
| var MatCardFooter = /** @class */ (function () { |
| function MatCardFooter() { |
| } |
| MatCardFooter.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-card-footer', |
| host: { 'class': 'mat-card-footer' } |
| },] }, |
| ]; |
| return MatCardFooter; |
| }()); |
| /** |
| * Image used in a card, needed to add the mat- CSS styling. |
| * \@docs-private |
| */ |
| var MatCardImage = /** @class */ (function () { |
| function MatCardImage() { |
| } |
| MatCardImage.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-card-image], [matCardImage]', |
| host: { 'class': 'mat-card-image' } |
| },] }, |
| ]; |
| return MatCardImage; |
| }()); |
| /** |
| * Image used in a card, needed to add the mat- CSS styling. |
| * \@docs-private |
| */ |
| var MatCardSmImage = /** @class */ (function () { |
| function MatCardSmImage() { |
| } |
| MatCardSmImage.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-card-sm-image], [matCardImageSmall]', |
| host: { 'class': 'mat-card-sm-image' } |
| },] }, |
| ]; |
| return MatCardSmImage; |
| }()); |
| /** |
| * Image used in a card, needed to add the mat- CSS styling. |
| * \@docs-private |
| */ |
| var MatCardMdImage = /** @class */ (function () { |
| function MatCardMdImage() { |
| } |
| MatCardMdImage.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-card-md-image], [matCardImageMedium]', |
| host: { 'class': 'mat-card-md-image' } |
| },] }, |
| ]; |
| return MatCardMdImage; |
| }()); |
| /** |
| * Image used in a card, needed to add the mat- CSS styling. |
| * \@docs-private |
| */ |
| var MatCardLgImage = /** @class */ (function () { |
| function MatCardLgImage() { |
| } |
| MatCardLgImage.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-card-lg-image], [matCardImageLarge]', |
| host: { 'class': 'mat-card-lg-image' } |
| },] }, |
| ]; |
| return MatCardLgImage; |
| }()); |
| /** |
| * Large image used in a card, needed to add the mat- CSS styling. |
| * \@docs-private |
| */ |
| var MatCardXlImage = /** @class */ (function () { |
| function MatCardXlImage() { |
| } |
| MatCardXlImage.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-card-xl-image], [matCardImageXLarge]', |
| host: { 'class': 'mat-card-xl-image' } |
| },] }, |
| ]; |
| return MatCardXlImage; |
| }()); |
| /** |
| * Avatar image used in a card, needed to add the mat- CSS styling. |
| * \@docs-private |
| */ |
| var MatCardAvatar = /** @class */ (function () { |
| function MatCardAvatar() { |
| } |
| MatCardAvatar.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-card-avatar], [matCardAvatar]', |
| host: { 'class': 'mat-card-avatar' } |
| },] }, |
| ]; |
| return MatCardAvatar; |
| }()); |
| /** |
| * 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 = /** @class */ (function () { |
| // @breaking-change 9.0.0 `_animationMode` parameter to be made required. |
| function MatCard(_animationMode) { |
| this._animationMode = _animationMode; |
| } |
| 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:16px;border-radius:4px}._mat-animation-noopable.mat-card{transition:none;animation:none}.mat-card .mat-divider-horizontal{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider-horizontal{left:auto;right:0}.mat-card .mat-divider-horizontal.mat-divider-inset{position:static;margin:0}[dir=rtl] .mat-card .mat-divider-horizontal.mat-divider-inset{margin-right:0}@media (-ms-high-contrast:active){.mat-card{outline:solid 1px}}.mat-card-actions,.mat-card-content,.mat-card-subtitle{display:block;margin-bottom:16px}.mat-card-title{display:block;margin-bottom:8px}.mat-card-actions{margin-left:-8px;margin-right:-8px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 32px);margin:0 -16px 16px -16px}.mat-card-footer{display:block;margin:0 -16px -16px -16px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button{margin:0 8px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header .mat-card-title{margin-bottom:12px}.mat-card-header-text{margin:0 16px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;object-fit:cover}.mat-card-title-group{display:flex;justify-content:space-between}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-title-group>.mat-card-xl-image{margin:-8px 0 8px}@media (max-width:599px){.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}}.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:-16px;border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-card>.mat-card-actions:last-child{margin-bottom:-8px;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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| host: { |
| 'class': 'mat-card', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| } |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatCard.ctorParameters = function () { return [ |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| 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 = /** @class */ (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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| host: { 'class': 'mat-card-header' } |
| },] }, |
| ]; |
| 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 = /** @class */ (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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| host: { 'class': 'mat-card-title-group' } |
| },] }, |
| ]; |
| return MatCardTitleGroup; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatCardModule = /** @class */ (function () { |
| function MatCardModule() { |
| } |
| MatCardModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule], |
| exports: [ |
| MatCard, |
| MatCardHeader, |
| MatCardTitleGroup, |
| MatCardContent, |
| MatCardTitle, |
| MatCardSubtitle, |
| MatCardActions, |
| MatCardFooter, |
| MatCardSmImage, |
| MatCardMdImage, |
| MatCardLgImage, |
| MatCardImage, |
| MatCardXlImage, |
| MatCardAvatar, |
| MatCommonModule, |
| ], |
| declarations: [ |
| MatCard, MatCardHeader, MatCardTitleGroup, MatCardContent, MatCardTitle, MatCardSubtitle, |
| MatCardActions, MatCardFooter, MatCardSmImage, MatCardMdImage, MatCardLgImage, MatCardImage, |
| MatCardXlImage, MatCardAvatar, |
| ], |
| },] }, |
| ]; |
| return MatCardModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to specify the checkbox click behavior. |
| * @type {?} |
| */ |
| var MAT_CHECKBOX_CLICK_ACTION = new core.InjectionToken('mat-checkbox-click-action'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Increasing integer for generating unique ids for checkbox components. |
| /** @type {?} */ |
| var nextUniqueId$3 = 0; |
| /** |
| * Provider Expression that allows mat-checkbox to register as a ControlValueAccessor. |
| * This allows it to support [(ngModel)]. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| 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 /** |
| * Change event object emitted by MatCheckbox. |
| */ |
| MatCheckboxChange = /** @class */ (function () { |
| function MatCheckboxChange() { |
| } |
| return MatCheckboxChange; |
| }()); |
| // Boilerplate for applying mixins to MatCheckbox. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatCheckbox. |
| /** |
| * \@docs-private |
| */ |
| MatCheckboxBase = /** @class */ (function () { |
| function MatCheckboxBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatCheckboxBase; |
| }()); |
| /** @type {?} */ |
| 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://material.io/design/components/selection-controls.html |
| */ |
| var MatCheckbox = /** @class */ (function (_super) { |
| __extends(MatCheckbox, _super); |
| function MatCheckbox(elementRef, _changeDetectorRef, _focusMonitor, _ngZone, tabIndex, _clickAction, _animationMode) { |
| var _this = _super.call(this, elementRef) || this; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._focusMonitor = _focusMonitor; |
| _this._ngZone = _ngZone; |
| _this._clickAction = _clickAction; |
| _this._animationMode = _animationMode; |
| /** |
| * Attached to the aria-label attribute of the host element. In most cases, aria-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$3; |
| /** |
| * 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 = (/** |
| * @return {?} |
| */ |
| function () { }); |
| _this._currentAnimationClass = ''; |
| _this._currentCheckState = TransitionCheckState.Init; |
| _this._controlValueAccessorChangeFn = (/** |
| * @return {?} |
| */ |
| function () { }); |
| _this._checked = false; |
| _this._disabled = false; |
| _this._indeterminate = false; |
| _this.tabIndex = parseInt(tabIndex) || 0; |
| _this._focusMonitor.monitor(elementRef, true).subscribe((/** |
| * @param {?} focusOrigin |
| * @return {?} |
| */ |
| function (focusOrigin) { |
| if (!focusOrigin) { |
| // When a focused element becomes disabled, the browser *immediately* fires a blur event. |
| // Angular does not expect events to be raised during change detection, so any state change |
| // (such as a form control's 'ng-touched') will cause a changed-after-checked error. |
| // See https://github.com/angular/angular/issues/17793. To work around this, we defer |
| // telling the form control it has been touched until the next tick. |
| Promise.resolve().then((/** |
| * @return {?} |
| */ |
| function () { |
| _this._onTouched(); |
| _changeDetectorRef.markForCheck(); |
| })); |
| } |
| })); |
| 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", { |
| /** Whether the checkbox is 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 |
| }); |
| // TODO: Delete next major revision. |
| // TODO: Delete next major revision. |
| /** |
| * @return {?} |
| */ |
| MatCheckbox.prototype.ngAfterViewChecked = |
| // TODO: Delete next major revision. |
| /** |
| * @return {?} |
| */ |
| function () { }; |
| /** |
| * @return {?} |
| */ |
| MatCheckbox.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| }; |
| Object.defineProperty(MatCheckbox.prototype, "checked", { |
| /** |
| * Whether the checkbox is 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, "disabled", { |
| /** |
| * Whether the checkbox is disabled. This fully overrides the implementation provided by |
| * mixinDisabled, but the mixin is still required because mixinTabIndex requires it. |
| */ |
| get: /** |
| * Whether the checkbox is disabled. This fully overrides the implementation provided by |
| * mixinDisabled, but the mixin is still required because mixinTabIndex requires it. |
| * @return {?} |
| */ |
| function () { return this._disabled; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var newValue = coercion.coerceBooleanProperty(value); |
| if (newValue !== this.disabled) { |
| this._disabled = newValue; |
| this._changeDetectorRef.markForCheck(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatCheckbox.prototype, "indeterminate", { |
| /** |
| * 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. |
| */ |
| 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) { |
| /** @type {?} */ |
| var 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 () { |
| // Since the event of the `cdkObserveContent` directive runs outside of the zone, the checkbox |
| // component will be only marked for check, but no actual change detection runs automatically. |
| // Instead of going back into the zone in order to trigger a change detection which causes |
| // *all* components to be checked (if explicitly marked or not using OnPush), we only trigger |
| // an explicit change detection for the checkbox view and it's children. |
| this._changeDetectorRef.detectChanges(); |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| MatCheckbox.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 {?} |
| */ |
| MatCheckbox.prototype.registerOnChange = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._controlValueAccessorChangeFn = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| MatCheckbox.prototype.registerOnTouched = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._onTouched = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| MatCheckbox.prototype.setDisabledState = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| function (isDisabled) { |
| this.disabled = isDisabled; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatCheckbox.prototype._getAriaChecked = /** |
| * @return {?} |
| */ |
| function () { |
| return this.checked ? 'true' : (this.indeterminate ? 'mixed' : 'false'); |
| }; |
| /** |
| * @private |
| * @param {?} newState |
| * @return {?} |
| */ |
| MatCheckbox.prototype._transitionCheckState = /** |
| * @private |
| * @param {?} newState |
| * @return {?} |
| */ |
| function (newState) { |
| /** @type {?} */ |
| var oldState = this._currentCheckState; |
| /** @type {?} */ |
| var 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); |
| // Remove the animation class to avoid animation when the checkbox is moved between containers |
| /** @type {?} */ |
| var animationClass_1 = this._currentAnimationClass; |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| setTimeout((/** |
| * @return {?} |
| */ |
| function () { |
| element.classList.remove(animationClass_1); |
| }), 1000); |
| })); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatCheckbox.prototype._emitChangeEvent = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var event = new MatCheckboxChange(); |
| event.source = this; |
| event.checked = this.checked; |
| this._controlValueAccessorChangeFn(this.checked); |
| this.change.emit(event); |
| }; |
| /** 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((/** |
| * @return {?} |
| */ |
| 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, '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(); |
| }; |
| /** |
| * @private |
| * @param {?} oldState |
| * @param {?} newState |
| * @return {?} |
| */ |
| MatCheckbox.prototype._getAnimationClassForCheckStateTransition = /** |
| * @private |
| * @param {?} oldState |
| * @param {?} newState |
| * @return {?} |
| */ |
| function (oldState, newState) { |
| // Don't transition if animations are disabled. |
| if (this._animationMode === 'NoopAnimations') { |
| return ''; |
| } |
| /** @type {?} */ |
| var 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; |
| }; |
| 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 || null\" [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]=\"20\" [matRippleCentered]=\"true\" [matRippleAnimation]=\"{enterDuration: 150}\"><div class=\"mat-ripple-element mat-checkbox-persistent-ripple\"></div></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-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;-webkit-tap-highlight-color:transparent}._mat-animation-noopable.mat-checkbox{transition:none;animation:none}.mat-checkbox .mat-ripple-element:not(.mat-checkbox-persistent-ripple){opacity:.16}.mat-checkbox-layout{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap}.mat-checkbox-label{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.mat-checkbox-inner-container{display:inline-block;height:16px;line-height:0;margin:auto;margin-right:8px;order:0;position:relative;vertical-align:middle;white-space:nowrap;width:16px;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-animation-noopable .mat-checkbox-frame{transition:none}@media (-ms-high-contrast:active){.mat-checkbox.cdk-keyboard-focused .mat-checkbox-frame{border-style:dotted}}.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-animation-noopable .mat-checkbox-background{transition:none}.mat-checkbox-persistent-ripple{width:100%;height:100%;transform:none}.mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{opacity:.04}.mat-checkbox.cdk-keyboard-focused .mat-checkbox-persistent-ripple{opacity:.12}.mat-checkbox-persistent-ripple,.mat-checkbox.mat-checkbox-disabled .mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{opacity:0}@media (hover:none){.mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple{display:none}}.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.13333px}.mat-checkbox-mixedmark{width:calc(100% - 6px);height:2px;opacity:0;transform:scaleX(0) rotate(0);border-radius:2px}@media (-ms-high-contrast:active){.mat-checkbox-mixedmark{height:0;border-top:solid 2px;margin-top:2px}}.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 .mat-checkbox-ripple{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}"], |
| exportAs: 'matCheckbox', |
| host: { |
| 'class': 'mat-checkbox', |
| '[id]': 'id', |
| '[attr.tabindex]': 'null', |
| '[class.mat-checkbox-indeterminate]': 'indeterminate', |
| '[class.mat-checkbox-checked]': 'checked', |
| '[class.mat-checkbox-disabled]': 'disabled', |
| '[class.mat-checkbox-label-before]': 'labelPosition == "before"', |
| '[class._mat-animation-noopable]': "_animationMode === 'NoopAnimations'", |
| }, |
| providers: [MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR], |
| inputs: ['disableRipple', 'color', 'tabIndex'], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatCheckbox.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.ChangeDetectorRef }, |
| { type: a11y.FocusMonitor }, |
| { type: core.NgZone }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_CHECKBOX_CLICK_ACTION,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatCheckbox.propDecorators = { |
| ariaLabel: [{ type: core.Input, args: ['aria-label',] }], |
| ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }], |
| id: [{ type: core.Input }], |
| required: [{ 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', { static: false },] }], |
| ripple: [{ type: core.ViewChild, args: [MatRipple, { static: false },] }], |
| checked: [{ type: core.Input }], |
| disabled: [{ type: core.Input }], |
| indeterminate: [{ type: core.Input }] |
| }; |
| return MatCheckbox; |
| }(_MatCheckboxMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var MAT_CHECKBOX_REQUIRED_VALIDATOR = { |
| provide: forms.NG_VALIDATORS, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| 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 = /** @class */ (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' } |
| },] }, |
| ]; |
| return MatCheckboxRequiredValidator; |
| }(forms.CheckboxRequiredValidator)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * This module is used by both original and MDC-based checkbox implementations. |
| */ |
| var _MatCheckboxRequiredValidatorModule = /** @class */ (function () { |
| function _MatCheckboxRequiredValidatorModule() { |
| } |
| _MatCheckboxRequiredValidatorModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| exports: [MatCheckboxRequiredValidator], |
| declarations: [MatCheckboxRequiredValidator], |
| },] }, |
| ]; |
| return _MatCheckboxRequiredValidatorModule; |
| }()); |
| var MatCheckboxModule = /** @class */ (function () { |
| function MatCheckboxModule() { |
| } |
| MatCheckboxModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, MatRippleModule, MatCommonModule, observers.ObserversModule, |
| _MatCheckboxRequiredValidatorModule |
| ], |
| exports: [MatCheckbox, MatCommonModule, _MatCheckboxRequiredValidatorModule], |
| declarations: [MatCheckbox], |
| },] }, |
| ]; |
| return MatCheckboxModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Event object emitted by MatChip when selected or deselected. |
| */ |
| var /** |
| * Event object emitted by MatChip when selected or deselected. |
| */ |
| MatChipSelectionChange = /** @class */ (function () { |
| function MatChipSelectionChange(source, selected, isUserInput) { |
| if (isUserInput === void 0) { isUserInput = false; } |
| this.source = source; |
| this.selected = selected; |
| this.isUserInput = isUserInput; |
| } |
| return MatChipSelectionChange; |
| }()); |
| // Boilerplate for applying mixins to MatChip. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatChip. |
| /** |
| * \@docs-private |
| */ |
| MatChipBase = /** @class */ (function () { |
| function MatChipBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatChipBase; |
| }()); |
| /** @type {?} */ |
| var _MatChipMixinBase = mixinColor(mixinDisableRipple(mixinDisabled(MatChipBase)), 'primary'); |
| /** |
| * Dummy directive to add CSS class to chip avatar. |
| * \@docs-private |
| */ |
| var MatChipAvatar = /** @class */ (function () { |
| function MatChipAvatar() { |
| } |
| MatChipAvatar.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-chip-avatar, [matChipAvatar]', |
| host: { 'class': 'mat-chip-avatar' } |
| },] }, |
| ]; |
| return MatChipAvatar; |
| }()); |
| /** |
| * Dummy directive to add CSS class to chip trailing icon. |
| * \@docs-private |
| */ |
| var MatChipTrailingIcon = /** @class */ (function () { |
| function MatChipTrailingIcon() { |
| } |
| MatChipTrailingIcon.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]', |
| host: { 'class': 'mat-chip-trailing-icon' } |
| },] }, |
| ]; |
| return MatChipTrailingIcon; |
| }()); |
| /** |
| * Material design styled Chip component. Used inside the MatChipList component. |
| */ |
| var MatChip = /** @class */ (function (_super) { |
| __extends(MatChip, _super); |
| function MatChip(_elementRef, _ngZone, platform$$1, globalRippleOptions, |
| // @breaking-change 8.0.0 `animationMode` parameter to become required. |
| animationMode) { |
| var _this = _super.call(this, _elementRef) || this; |
| _this._elementRef = _elementRef; |
| _this._ngZone = _ngZone; |
| /** |
| * Whether the chip has focus. |
| */ |
| _this._hasFocus = false; |
| /** |
| * Whether the chip list is selectable |
| */ |
| _this.chipListSelectable = true; |
| /** |
| * Whether the chip list is in multi-selection mode. |
| */ |
| _this._chipListMultiple = false; |
| _this._selected = false; |
| _this._selectable = true; |
| _this._removable = true; |
| /** |
| * Emits when the chip is focused. |
| */ |
| _this._onFocus = new rxjs.Subject(); |
| /** |
| * Emits when the chip is blured. |
| */ |
| _this._onBlur = new rxjs.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 a chip is to be removed. |
| */ |
| _this.removed = new core.EventEmitter(); |
| _this._addHostClassName(); |
| _this._chipRipple = new RippleRenderer(_this, _ngZone, _elementRef, platform$$1); |
| _this._chipRipple.setupTriggerEvents(_elementRef.nativeElement); |
| _this.rippleConfig = globalRippleOptions || {}; |
| _this._animationsDisabled = animationMode === 'NoopAnimations'; |
| return _this; |
| } |
| Object.defineProperty(MatChip.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 || !!this.rippleConfig.disabled; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatChip.prototype, "selected", { |
| /** Whether the chip is selected. */ |
| get: /** |
| * Whether the chip is selected. |
| * @return {?} |
| */ |
| function () { return this._selected; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var coercedValue = coercion.coerceBooleanProperty(value); |
| if (coercedValue !== this._selected) { |
| this._selected = coercedValue; |
| this._dispatchSelectionChange(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatChip.prototype, "value", { |
| /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */ |
| 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", { |
| /** |
| * Whether or not the chip is selectable. When a chip is not selectable, |
| * changes to its selected state are always ignored. By default a chip is |
| * selectable, and it becomes non-selectable if its parent chip list is |
| * not selectable. |
| */ |
| get: /** |
| * Whether or not the chip is selectable. When a chip is not selectable, |
| * changes to its selected state are always ignored. By default a chip is |
| * selectable, and it becomes non-selectable if its parent chip list is |
| * not selectable. |
| * @return {?} |
| */ |
| function () { return this._selectable && this.chipListSelectable; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._selectable = coercion.coerceBooleanProperty(value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatChip.prototype, "removable", { |
| /** |
| * Determines whether or not the chip displays the remove styling and emits (removed) events. |
| */ |
| get: /** |
| * Determines whether or not the chip displays the remove styling and emits (removed) 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 () { |
| // Remove the `aria-selected` when the chip is deselected in single-selection mode, because |
| // it adds noise to NVDA users where "not selected" will be read out for each chip. |
| return this.selectable && (this._chipListMultiple || this.selected) ? |
| this.selected.toString() : null; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatChip.prototype._addHostClassName = /** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var basicChipAttrName = 'mat-basic-chip'; |
| /** @type {?} */ |
| var element = (/** @type {?} */ (this._elementRef.nativeElement)); |
| if (element.hasAttribute(basicChipAttrName) || |
| element.tagName.toLowerCase() === basicChipAttrName) { |
| element.classList.add(basicChipAttrName); |
| return; |
| } |
| else { |
| element.classList.add('mat-standard-chip'); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatChip.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this.destroyed.emit({ chip: this }); |
| this._chipRipple._removeTriggerEvents(); |
| }; |
| /** Selects the chip. */ |
| /** |
| * Selects the chip. |
| * @return {?} |
| */ |
| MatChip.prototype.select = /** |
| * Selects the chip. |
| * @return {?} |
| */ |
| function () { |
| if (!this._selected) { |
| this._selected = true; |
| this._dispatchSelectionChange(); |
| } |
| }; |
| /** Deselects the chip. */ |
| /** |
| * Deselects the chip. |
| * @return {?} |
| */ |
| MatChip.prototype.deselect = /** |
| * Deselects the chip. |
| * @return {?} |
| */ |
| function () { |
| if (this._selected) { |
| this._selected = false; |
| this._dispatchSelectionChange(); |
| } |
| }; |
| /** 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 () { |
| if (!this._selected) { |
| this._selected = true; |
| this._dispatchSelectionChange(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._dispatchSelectionChange(isUserInput); |
| 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 () { |
| if (!this._hasFocus) { |
| this._elementRef.nativeElement.focus(); |
| this._onFocus.next({ chip: this }); |
| } |
| this._hasFocus = true; |
| }; |
| /** |
| * 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 }); |
| } |
| }; |
| /** Handles click events on the chip. */ |
| /** |
| * Handles click events on the chip. |
| * @param {?} event |
| * @return {?} |
| */ |
| MatChip.prototype._handleClick = /** |
| * Handles click events on the chip. |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (this.disabled) { |
| event.preventDefault(); |
| } |
| else { |
| event.stopPropagation(); |
| } |
| }; |
| /** 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 () { |
| var _this = this; |
| // When animations are enabled, Angular may end up removing the chip from the DOM a little |
| // earlier than usual, causing it to be blurred and throwing off the logic in the chip list |
| // that moves focus not the next item. To work around the issue, we defer marking the chip |
| // as not focused until the next time the zone stabilizes. |
| this._ngZone.onStable |
| .asObservable() |
| .pipe(operators.take(1)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._ngZone.run((/** |
| * @return {?} |
| */ |
| function () { |
| _this._hasFocus = false; |
| _this._onBlur.next({ chip: _this }); |
| })); |
| })); |
| }; |
| /** |
| * @private |
| * @param {?=} isUserInput |
| * @return {?} |
| */ |
| MatChip.prototype._dispatchSelectionChange = /** |
| * @private |
| * @param {?=} isUserInput |
| * @return {?} |
| */ |
| function (isUserInput) { |
| if (isUserInput === void 0) { isUserInput = false; } |
| this.selectionChange.emit({ |
| source: this, |
| isUserInput: isUserInput, |
| selected: this._selected |
| }); |
| }; |
| MatChip.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", |
| inputs: ['color', 'disabled', 'disableRipple'], |
| exportAs: 'matChip', |
| host: { |
| 'class': 'mat-chip', |
| '[attr.tabindex]': 'disabled ? null : -1', |
| 'role': 'option', |
| '[class.mat-chip-selected]': 'selected', |
| '[class.mat-chip-with-avatar]': 'avatar', |
| '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon', |
| '[class.mat-chip-disabled]': 'disabled', |
| '[class._mat-animation-noopable]': '_animationsDisabled', |
| '[attr.disabled]': 'disabled || null', |
| '[attr.aria-disabled]': 'disabled.toString()', |
| '[attr.aria-selected]': 'ariaSelected', |
| '(click)': '_handleClick($event)', |
| '(keydown)': '_handleKeydown($event)', |
| '(focus)': 'focus()', |
| '(blur)': '_blur()', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatChip.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,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatChip.propDecorators = { |
| avatar: [{ type: core.ContentChild, args: [MatChipAvatar, { static: false },] }], |
| trailingIcon: [{ type: core.ContentChild, args: [MatChipTrailingIcon, { static: false },] }], |
| removeIcon: [{ type: core.ContentChild, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatChipRemove; })), { static: false },] }], |
| selected: [{ type: core.Input }], |
| value: [{ type: core.Input }], |
| selectable: [{ type: core.Input }], |
| removable: [{ type: core.Input }], |
| selectionChange: [{ type: core.Output }], |
| destroyed: [{ type: core.Output }], |
| removed: [{ type: core.Output }] |
| }; |
| return MatChip; |
| }(_MatChipMixinBase)); |
| /** |
| * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon |
| * available at https://material.io/icons/#ic_cancel. |
| * |
| * Example: |
| * |
| * `<mat-chip> |
| * <mat-icon matChipRemove>cancel</mat-icon> |
| * </mat-chip>` |
| * |
| * You *may* use a custom icon, but you may need to override the `mat-chip-remove` positioning |
| * styles to properly center the icon within the chip. |
| */ |
| var MatChipRemove = /** @class */ (function () { |
| function MatChipRemove(_parentChip) { |
| this._parentChip = _parentChip; |
| } |
| /** Calls the parent chip's public `remove()` method if applicable. */ |
| /** |
| * Calls the parent chip's public `remove()` method if applicable. |
| * @param {?} event |
| * @return {?} |
| */ |
| MatChipRemove.prototype._handleClick = /** |
| * Calls the parent chip's public `remove()` method if applicable. |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var parentChip = this._parentChip; |
| if (parentChip.removable && !parentChip.disabled) { |
| parentChip.remove(); |
| } |
| // We need to stop event propagation because otherwise the event will bubble up to the |
| // form field and cause the `onContainerClick` method to be invoked. This method would then |
| // reset the focused chip that has been focused after chip removal. Usually the parent |
| // the parent click listener of the `MatChip` would prevent propagation, but it can happen |
| // that the chip is being removed before the event bubbles up. |
| event.stopPropagation(); |
| }; |
| MatChipRemove.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matChipRemove]', |
| host: { |
| 'class': 'mat-chip-remove mat-chip-trailing-icon', |
| '(click)': '_handleClick($event)', |
| } |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatChipRemove.ctorParameters = function () { return [ |
| { type: MatChip } |
| ]; }; |
| return MatChipRemove; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token to be used to override the default options for the chips module. |
| * @type {?} |
| */ |
| var MAT_CHIPS_DEFAULT_OPTIONS = new core.InjectionToken('mat-chips-default-options'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatChipList. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatChipList. |
| /** |
| * \@docs-private |
| */ |
| MatChipListBase = /** @class */ (function () { |
| function MatChipListBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) { |
| this._defaultErrorStateMatcher = _defaultErrorStateMatcher; |
| this._parentForm = _parentForm; |
| this._parentFormGroup = _parentFormGroup; |
| this.ngControl = ngControl; |
| } |
| return MatChipListBase; |
| }()); |
| /** @type {?} */ |
| var _MatChipListMixinBase = mixinErrorState(MatChipListBase); |
| // Increasing integer for generating unique ids for chip-list components. |
| /** @type {?} */ |
| var nextUniqueId$4 = 0; |
| /** |
| * Change event object that is emitted when the chip list value has changed. |
| */ |
| var /** |
| * Change event object that is emitted when the chip list value has changed. |
| */ |
| MatChipListChange = /** @class */ (function () { |
| function MatChipListChange(source, value) { |
| this.source = source; |
| this.value = value; |
| } |
| return MatChipListChange; |
| }()); |
| /** |
| * A material design chips component (named ChipList for its similarity to the List component). |
| */ |
| var MatChipList = /** @class */ (function (_super) { |
| __extends(MatChipList, _super); |
| function MatChipList(_elementRef, _changeDetectorRef, _dir, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, 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 store the index of the destroyed chip until the chips |
| * query list notifies about the update. This is necessary because we cannot determine an |
| * appropriate chip that should receive focus until the array of chips updated completely. |
| */ |
| _this._lastDestroyedChipIndex = null; |
| /** |
| * Subject that emits when the component has been destroyed. |
| */ |
| _this._destroyed = new rxjs.Subject(); |
| /** |
| * Uid of the chip list |
| */ |
| _this._uid = "mat-chip-list-" + nextUniqueId$4++; |
| /** |
| * 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 = (/** |
| * @return {?} |
| */ |
| function () { }); |
| /** |
| * Function when changed |
| */ |
| _this._onChange = (/** |
| * @return {?} |
| */ |
| function () { }); |
| _this._multiple = false; |
| _this._compareWith = (/** |
| * @param {?} o1 |
| * @param {?} o2 |
| * @return {?} |
| */ |
| 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", { |
| /** Whether the user should be allowed to select multiple chips. */ |
| 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); |
| this._syncChipsState(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatChipList.prototype, "compareWith", { |
| /** |
| * 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. |
| */ |
| 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", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| get: /** |
| * Implemented as part of MatFormFieldControl. |
| * \@docs-private |
| * @return {?} |
| */ |
| function () { |
| return this._chipInput ? this._chipInput.id : this._uid; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatChipList.prototype, "required", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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._chipInput && this._chipInput.focused) || this._hasFocusedChip(); |
| }, |
| 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", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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); |
| this._syncChipsState(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatChipList.prototype, "selectable", { |
| /** |
| * Whether or not this chip list is selectable. When a chip list is not selectable, |
| * the selected states for all the chips inside the chip list are always ignored. |
| */ |
| get: /** |
| * Whether or not this chip list is selectable. When a chip list is not selectable, |
| * the selected states for all the chips inside the chip list are always ignored. |
| * @return {?} |
| */ |
| function () { return this._selectable; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| var _this = this; |
| this._selectable = coercion.coerceBooleanProperty(value); |
| if (this.chips) { |
| this.chips.forEach((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| function (chip) { return chip.chipListSelectable = _this._selectable; })); |
| } |
| }, |
| 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 rxjs.merge.apply(void 0, this.chips.map((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| 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 rxjs.merge.apply(void 0, this.chips.map((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| 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 rxjs.merge.apply(void 0, this.chips.map((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| 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 rxjs.merge.apply(void 0, this.chips.map((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| function (chip) { return chip.destroyed; }))); |
| }, |
| 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'); |
| if (this._dir) { |
| this._dir.change |
| .pipe(operators.takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @param {?} dir |
| * @return {?} |
| */ |
| function (dir) { return _this._keyManager.withHorizontalOrientation(dir); })); |
| } |
| this._keyManager.tabOut.pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._allowFocusEscape(); |
| })); |
| // When the list changes, re-subscribe |
| this.chips.changes.pipe(operators.startWith(null), operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this.disabled) { |
| // Since this happens after the content has been |
| // checked, we need to defer it to the next tick. |
| Promise.resolve().then((/** |
| * @return {?} |
| */ |
| function () { |
| _this._syncChipsState(); |
| })); |
| } |
| _this._resetChips(); |
| // Reset chips selected/deselected status |
| _this._initializeSelection(); |
| // 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 |
| _this._updateFocusForDestroyedChips(); |
| _this.stateChanges.next(); |
| })); |
| }; |
| /** |
| * @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._destroyed.next(); |
| this._destroyed.complete(); |
| this.stateChanges.complete(); |
| this._dropSubscriptions(); |
| }; |
| /** 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. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| MatChipList.prototype.writeValue = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| if (this.chips) { |
| this._setSelectionByValue(value, false); |
| } |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| MatChipList.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 {?} |
| */ |
| MatChipList.prototype.registerOnTouched = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._onTouched = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| MatChipList.prototype.setDisabledState = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| function (isDisabled) { |
| this.disabled = isDisabled; |
| this.stateChanges.next(); |
| }; |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * \@docs-private |
| * @param {?} event |
| * @return {?} |
| */ |
| MatChipList.prototype.onContainerClick = /** |
| * Implemented as part of MatFormFieldControl. |
| * \@docs-private |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (!this._originatesFromChip(event)) { |
| this.focus(); |
| } |
| }; |
| /** |
| * Focuses the first non-disabled chip in this chip list, or the associated input when there |
| * are no eligible chips. |
| */ |
| /** |
| * Focuses 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 first non-disabled chip in this chip list, or the associated input when there |
| * are no eligible chips. |
| * @return {?} |
| */ |
| function () { |
| if (this.disabled) { |
| return; |
| } |
| // 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) { |
| /** @type {?} */ |
| var target = (/** @type {?} */ (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')) { |
| if (event.keyCode === keycodes.HOME) { |
| this._keyManager.setFirstItemActive(); |
| event.preventDefault(); |
| } |
| else if (event.keyCode === keycodes.END) { |
| this._keyManager.setLastItemActive(); |
| event.preventDefault(); |
| } |
| else { |
| 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. |
| * @protected |
| * @return {?} |
| */ |
| MatChipList.prototype._updateTabIndex = /** |
| * Check the tab index as you should not be allowed to focus an empty list. |
| * @protected |
| * @return {?} |
| */ |
| function () { |
| // If we have 0 chips, we should not allow keyboard focus |
| this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0); |
| }; |
| /** |
| * If the amount of chips changed, we need to update the |
| * key manager state and focus the next closest chip. |
| */ |
| /** |
| * If the amount of chips changed, we need to update the |
| * key manager state and focus the next closest chip. |
| * @protected |
| * @return {?} |
| */ |
| MatChipList.prototype._updateFocusForDestroyedChips = /** |
| * If the amount of chips changed, we need to update the |
| * key manager state and focus the next closest chip. |
| * @protected |
| * @return {?} |
| */ |
| function () { |
| // Move focus to the closest chip. If no other chips remain, focus the chip-list itself. |
| if (this._lastDestroyedChipIndex != null) { |
| if (this.chips.length) { |
| /** @type {?} */ |
| var newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1); |
| this._keyManager.setActiveItem(newChipIndex); |
| } |
| else { |
| this.focus(); |
| } |
| } |
| this._lastDestroyedChipIndex = null; |
| }; |
| /** |
| * Utility to ensure all indexes are valid. |
| * |
| * @param index The index to be checked. |
| * @returns True if the index is valid for our list of chips. |
| */ |
| /** |
| * Utility to ensure all indexes are valid. |
| * |
| * @private |
| * @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. |
| * |
| * @private |
| * @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; |
| }; |
| /** |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| MatChipList.prototype._isInputEmpty = /** |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| if (element && element.nodeName.toLowerCase() === 'input') { |
| /** @type {?} */ |
| var input = (/** @type {?} */ (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((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| function (chip) { return chip.deselect(); })); |
| if (Array.isArray(value)) { |
| value.forEach((/** |
| * @param {?} currentValue |
| * @return {?} |
| */ |
| function (currentValue) { return _this._selectValue(currentValue, isUserInput); })); |
| this._sortValues(); |
| } |
| else { |
| /** @type {?} */ |
| var 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) { |
| if (isUserInput) { |
| this._keyManager.setActiveItem(correspondingChip); |
| } |
| } |
| } |
| }; |
| /** |
| * Finds and selects the chip based on its value. |
| * @returns Chip that has the corresponding value. |
| */ |
| /** |
| * Finds and selects the chip based on its value. |
| * @private |
| * @param {?} value |
| * @param {?=} isUserInput |
| * @return {?} Chip that has the corresponding value. |
| */ |
| MatChipList.prototype._selectValue = /** |
| * Finds and selects the chip based on its value. |
| * @private |
| * @param {?} value |
| * @param {?=} isUserInput |
| * @return {?} Chip that has the corresponding value. |
| */ |
| function (value, isUserInput) { |
| var _this = this; |
| if (isUserInput === void 0) { isUserInput = true; } |
| /** @type {?} */ |
| var correspondingChip = this.chips.find((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| function (chip) { |
| return chip.value != null && _this._compareWith(chip.value, value); |
| })); |
| if (correspondingChip) { |
| isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select(); |
| this._selectionModel.select(correspondingChip); |
| } |
| return correspondingChip; |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._initializeSelection = /** |
| * @private |
| * @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((/** |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * Deselects every chip in the list. |
| * @private |
| * @param {?=} skip Chip that should not be deselected. |
| * @return {?} |
| */ |
| MatChipList.prototype._clearSelection = /** |
| * Deselects every chip in the list. |
| * @private |
| * @param {?=} skip Chip that should not be deselected. |
| * @return {?} |
| */ |
| function (skip) { |
| this._selectionModel.clear(); |
| this.chips.forEach((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * Sorts the model values, ensuring that they keep the same |
| * order that they have in the panel. |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._sortValues = /** |
| * Sorts the model values, ensuring that they keep the same |
| * order that they have in the panel. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._multiple) { |
| this._selectionModel.clear(); |
| this.chips.forEach((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| function (chip) { |
| if (chip.selected) { |
| _this._selectionModel.select(chip); |
| } |
| })); |
| this.stateChanges.next(); |
| } |
| }; |
| /** Emits change event to set the model value. */ |
| /** |
| * Emits change event to set the model value. |
| * @private |
| * @param {?=} fallbackValue |
| * @return {?} |
| */ |
| MatChipList.prototype._propagateChanges = /** |
| * Emits change event to set the model value. |
| * @private |
| * @param {?=} fallbackValue |
| * @return {?} |
| */ |
| function (fallbackValue) { |
| /** @type {?} */ |
| var valueToEmit = null; |
| if (Array.isArray(this.selected)) { |
| valueToEmit = this.selected.map((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| 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._hasFocusedChip()) { |
| this._keyManager.setActiveItem(-1); |
| } |
| 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((/** |
| * @return {?} |
| */ |
| 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(); |
| }; |
| /** |
| * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the |
| * user to tab out of it. This prevents the list from capturing focus and redirecting |
| * it back to the first chip, creating a focus trap, if it user tries to tab away. |
| */ |
| /** |
| * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the |
| * user to tab out of it. This prevents the list from capturing focus and redirecting |
| * it back to the first chip, creating a focus trap, if it user tries to tab away. |
| * @return {?} |
| */ |
| MatChipList.prototype._allowFocusEscape = /** |
| * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the |
| * user to tab out of it. This prevents the list from capturing focus and redirecting |
| * it back to the first chip, creating a focus trap, if it user tries to tab away. |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._tabIndex !== -1) { |
| this._tabIndex = -1; |
| setTimeout((/** |
| * @return {?} |
| */ |
| function () { |
| _this._tabIndex = _this._userTabIndex || 0; |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._resetChips = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this._dropSubscriptions(); |
| this._listenToChipsFocus(); |
| this._listenToChipsSelection(); |
| this._listenToChipsRemoved(); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._dropSubscriptions = /** |
| * @private |
| * @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; |
| } |
| if (this._chipRemoveSubscription) { |
| this._chipRemoveSubscription.unsubscribe(); |
| this._chipRemoveSubscription = null; |
| } |
| }; |
| /** Listens to user-generated selection events on each chip. */ |
| /** |
| * Listens to user-generated selection events on each chip. |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._listenToChipsSelection = /** |
| * Listens to user-generated selection events on each chip. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| 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((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| 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. */ |
| /** |
| * Listens to user-generated selection events on each chip. |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._listenToChipsFocus = /** |
| * Listens to user-generated selection events on each chip. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._chipFocusSubscription = this.chipFocusChanges.subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var chipIndex = _this.chips.toArray().indexOf(event.chip); |
| if (_this._isValidIndex(chipIndex)) { |
| _this._keyManager.updateActiveItemIndex(chipIndex); |
| } |
| _this.stateChanges.next(); |
| })); |
| this._chipBlurSubscription = this.chipBlurChanges.subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._blur(); |
| _this.stateChanges.next(); |
| })); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._listenToChipsRemoved = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var chip = event.chip; |
| /** @type {?} */ |
| var chipIndex = _this.chips.toArray().indexOf(event.chip); |
| // In case the chip that will be removed is currently focused, we temporarily store |
| // the index in order to be able to determine an appropriate sibling chip that will |
| // receive focus. |
| if (_this._isValidIndex(chipIndex) && chip._hasFocus) { |
| _this._lastDestroyedChipIndex = chipIndex; |
| } |
| })); |
| }; |
| /** Checks whether an event comes from inside a chip element. */ |
| /** |
| * Checks whether an event comes from inside a chip element. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| MatChipList.prototype._originatesFromChip = /** |
| * Checks whether an event comes from inside a chip element. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var currentElement = (/** @type {?} */ (event.target)); |
| while (currentElement && currentElement !== this._elementRef.nativeElement) { |
| if (currentElement.classList.contains('mat-chip')) { |
| return true; |
| } |
| currentElement = currentElement.parentElement; |
| } |
| return false; |
| }; |
| /** Checks whether any of the chips is focused. */ |
| /** |
| * Checks whether any of the chips is focused. |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._hasFocusedChip = /** |
| * Checks whether any of the chips is focused. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this.chips.some((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| function (chip) { return chip._hasFocus; })); |
| }; |
| /** Syncs the list's state with the individual chips. */ |
| /** |
| * Syncs the list's state with the individual chips. |
| * @private |
| * @return {?} |
| */ |
| MatChipList.prototype._syncChipsState = /** |
| * Syncs the list's state with the individual chips. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this.chips) { |
| this.chips.forEach((/** |
| * @param {?} chip |
| * @return {?} |
| */ |
| function (chip) { |
| chip.disabled = _this._disabled; |
| chip._chipListMultiple = _this.multiple; |
| })); |
| } |
| }; |
| 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]': 'disabled ? null : _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)', |
| '[id]': '_uid', |
| }, |
| providers: [{ provide: MatFormFieldControl, useExisting: MatChipList }], |
| styles: [".mat-chip{position:relative;overflow:hidden;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}.mat-standard-chip{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:inline-flex;padding:7px 12px;border-radius:16px;align-items:center;cursor:default;min-height:32px;height:1px}._mat-animation-noopable.mat-standard-chip{transition:none;animation:none}.mat-standard-chip .mat-chip-remove.mat-icon{width:18px;height:18px}.mat-standard-chip::after{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit;opacity:0;content:'';pointer-events:none;transition:opacity .2s cubic-bezier(.35,0,.25,1)}.mat-standard-chip:hover::after{opacity:.12}.mat-standard-chip:focus{outline:0}.mat-standard-chip:focus::after{opacity:.16}@media (-ms-high-contrast:active){.mat-standard-chip{outline:solid 1px}.mat-standard-chip:focus{outline:dotted 2px}}.mat-standard-chip.mat-chip-disabled::after{opacity:0}.mat-standard-chip.mat-chip-disabled .mat-chip-remove,.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon{cursor:default}.mat-standard-chip.mat-chip-with-avatar,.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-top:0;padding-bottom:0}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-right:8px;padding-left:0}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-left:8px;padding-right:0}.mat-standard-chip.mat-chip-with-trailing-icon{padding-top:7px;padding-bottom:7px;padding-right:8px;padding-left:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon{padding-left:8px;padding-right:12px}.mat-standard-chip.mat-chip-with-avatar{padding-left:0;padding-right:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-avatar{padding-right:0;padding-left:12px}.mat-standard-chip .mat-chip-avatar{width:24px;height:24px;margin-right:8px;margin-left:4px}[dir=rtl] .mat-standard-chip .mat-chip-avatar{margin-left:8px;margin-right:4px}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{margin-left:8px;margin-right:0}[dir=rtl] .mat-standard-chip .mat-chip-remove,[dir=rtl] .mat-standard-chip .mat-chip-trailing-icon{margin-right:8px;margin-left:0}.mat-chip-list-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin:-4px}.mat-chip-list-wrapper .mat-standard-chip,.mat-chip-list-wrapper input.mat-input-element{margin:4px}.mat-chip-list-stacked .mat-chip-list-wrapper{flex-direction:column;align-items:flex-start}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip{width:100%}.mat-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover}input.mat-chip-input{width:150px;margin:4px;flex:1 0 150px}"], |
| encapsulation: core.ViewEncapsulation.None, |
| 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 }], |
| 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, { |
| // We need to use `descendants: true`, because Ivy will no longer match |
| // indirect descendants if it's left as false. |
| descendants: true |
| },] }] |
| }; |
| return MatChipList; |
| }(_MatChipListMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Increasing integer for generating unique ids. |
| /** @type {?} */ |
| var nextUniqueId$1$1 = 0; |
| /** |
| * 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 = /** @class */ (function () { |
| function MatChipInput(_elementRef, _defaultOptions) { |
| this._elementRef = _elementRef; |
| this._defaultOptions = _defaultOptions; |
| /** |
| * 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 = this._defaultOptions.separatorKeyCodes; |
| /** |
| * Emitted when a chip is to be added. |
| */ |
| this.chipEnd = new core.EventEmitter(); |
| /** |
| * The input's placeholder text. |
| */ |
| this.placeholder = ''; |
| /** |
| * Unique id for the input. |
| */ |
| this.id = "mat-chip-list-input-" + nextUniqueId$1$1++; |
| this._disabled = false; |
| this._inputElement = (/** @type {?} */ (this._elementRef.nativeElement)); |
| } |
| Object.defineProperty(MatChipInput.prototype, "chipList", { |
| /** Register input for chip list */ |
| 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", { |
| /** |
| * Whether or not the chipEnd event will be emitted when the input is blurred. |
| */ |
| 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, "disabled", { |
| /** Whether the input is disabled. */ |
| get: /** |
| * Whether the input is disabled. |
| * @return {?} |
| */ |
| function () { return this._disabled || (this._chipList && this._chipList.disabled); }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this._disabled = 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 |
| }); |
| /** |
| * @return {?} |
| */ |
| MatChipInput.prototype.ngOnChanges = /** |
| * @return {?} |
| */ |
| function () { |
| this._chipList.stateChanges.next(); |
| }; |
| /** 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) { |
| // Allow the user's focus to escape when they're tabbing forward. Note that we don't |
| // want to do this when going backwards, because focus should go back to the first chip. |
| if (event && event.keyCode === keycodes.TAB && !keycodes.hasModifierKey(event, 'shiftKey')) { |
| this._chipList._allowFocusEscape(); |
| } |
| 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._isSeparatorKey(event)) { |
| 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(); |
| }; |
| /** Checks whether a keycode is one of the configured separators. */ |
| /** |
| * Checks whether a keycode is one of the configured separators. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| MatChipInput.prototype._isSeparatorKey = /** |
| * Checks whether a keycode is one of the configured separators. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (keycodes.hasModifierKey(event)) { |
| return false; |
| } |
| /** @type {?} */ |
| var separators = this.separatorKeyCodes; |
| /** @type {?} */ |
| var keyCode = event.keyCode; |
| return Array.isArray(separators) ? separators.indexOf(keyCode) > -1 : separators.has(keyCode); |
| }; |
| 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()', |
| '[id]': 'id', |
| '[attr.disabled]': 'disabled || null', |
| '[attr.placeholder]': 'placeholder || null', |
| '[attr.aria-invalid]': '_chipList && _chipList.ngControl ? _chipList.ngControl.invalid : null', |
| } |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatChipInput.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_CHIPS_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| 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 }], |
| id: [{ type: core.Input }], |
| disabled: [{ type: core.Input }] |
| }; |
| return MatChipInput; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var CHIP_DECLARATIONS = [ |
| MatChipList, |
| MatChip, |
| MatChipInput, |
| MatChipRemove, |
| MatChipAvatar, |
| MatChipTrailingIcon, |
| ]; |
| var ɵ0$3 = ({ |
| separatorKeyCodes: [keycodes.ENTER] |
| }); |
| var MatChipsModule = /** @class */ (function () { |
| function MatChipsModule() { |
| } |
| MatChipsModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| exports: CHIP_DECLARATIONS, |
| declarations: CHIP_DECLARATIONS, |
| providers: [ |
| ErrorStateMatcher, |
| { |
| provide: MAT_CHIPS_DEFAULT_OPTIONS, |
| useValue: (/** @type {?} */ (ɵ0$3)) |
| } |
| ] |
| },] }, |
| ]; |
| return MatChipsModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Configuration for opening a modal dialog with the MatDialog service. |
| * @template D |
| */ |
| var /** |
| * Configuration for opening a modal dialog with the MatDialog service. |
| * @template D |
| */ |
| MatDialogConfig = /** @class */ (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 on the backdrop to close the 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; |
| /** |
| * ID of the element that describes the dialog. |
| */ |
| this.ariaDescribedBy = null; |
| /** |
| * ID of the element that labels the dialog. |
| */ |
| this.ariaLabelledBy = 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 restore focus to the |
| * previously-focused element, after it's closed. |
| */ |
| this.restoreFocus = true; |
| /** |
| * Whether the dialog should close when the user goes backwards/forwards in history. |
| * Note that this usually doesn't include clicking on links (unless the user is using |
| * the `HashLocationStrategy`). |
| */ |
| this.closeOnNavigation = true; |
| // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling. |
| } |
| return MatDialogConfig; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var animationBody = [ |
| // Note: The `enter` animation transitions to `transform: none`, 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$1.state('void, exit', animations$1.style({ opacity: 0, transform: 'scale(0.7)' })), |
| animations$1.state('enter', animations$1.style({ transform: 'none' })), |
| animations$1.transition('* => enter', animations$1.animate('150ms cubic-bezier(0, 0, 0.2, 1)', animations$1.style({ transform: 'none', opacity: 1 }))), |
| animations$1.transition('* => void, * => exit', animations$1.animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', animations$1.style({ opacity: 0 }))), |
| ]; |
| /** |
| * Animations used by MatDialog. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matDialogAnimations = { |
| /** |
| * Animation that is applied on the dialog container by defalt. |
| */ |
| dialogContainer: animations$1.trigger('dialogContainer', animationBody), |
| /** |
| * @deprecated \@breaking-change 8.0.0 Use `matDialogAnimations.dialogContainer` instead. |
| */ |
| slideDialog: animations$1.trigger('slideDialog', animationBody) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (function (_super) { |
| __extends(MatDialogContainer, _super); |
| function MatDialogContainer(_elementRef, _focusTrapFactory, _changeDetectorRef, _document, _config) { |
| var _this = _super.call(this) || this; |
| _this._elementRef = _elementRef; |
| _this._focusTrapFactory = _focusTrapFactory; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._document = _document; |
| _this._config = _config; |
| /** |
| * 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(); |
| _this._ariaLabelledBy = _config.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. */ |
| /** |
| * Moves the focus inside the focus trap. |
| * @private |
| * @return {?} |
| */ |
| MatDialogContainer.prototype._trapFocus = /** |
| * Moves the focus inside the focus trap. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var element = this._elementRef.nativeElement; |
| if (!this._focusTrap) { |
| this._focusTrap = this._focusTrapFactory.create(element); |
| } |
| // If we 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(); |
| } |
| else { |
| /** @type {?} */ |
| var activeElement = this._document.activeElement; |
| // Otherwise ensure that focus is on the dialog container. It's possible that a different |
| // component tried to move focus while the open animation was running. See: |
| // https://github.com/angular/components/issues/16215. Note that we only want to do this |
| // if the focus isn't inside the dialog already, because it's possible that the consumer |
| // turned off `autoFocus` in order to move focus themselves. |
| if (activeElement !== element && !element.contains(activeElement)) { |
| element.focus(); |
| } |
| } |
| }; |
| /** Restores focus to the element that was focused before the dialog opened. */ |
| /** |
| * Restores focus to the element that was focused before the dialog opened. |
| * @private |
| * @return {?} |
| */ |
| MatDialogContainer.prototype._restoreFocus = /** |
| * Restores focus to the element that was focused before the dialog opened. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var toFocus = this._elementFocusedBeforeDialogWasOpened; |
| // We need the extra check, because IE can set the `activeElement` to null in some cases. |
| if (this._config.restoreFocus && 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. */ |
| /** |
| * Saves a reference to the element that was focused before the dialog was opened. |
| * @private |
| * @return {?} |
| */ |
| MatDialogContainer.prototype._savePreviouslyFocusedElement = /** |
| * Saves a reference to the element that was focused before the dialog was opened. |
| * @private |
| * @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((/** |
| * @return {?} |
| */ |
| 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{display:block;padding:24px;border-radius:4px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}@media (-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}.mat-dialog-title{margin:0 0 20px;display:block}.mat-dialog-actions{padding:8px 0;display:flex;flex-wrap:wrap;min-height:52px;align-items:center;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, |
| // 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.dialogContainer], |
| host: { |
| 'class': 'mat-dialog-container', |
| 'tabindex': '-1', |
| 'aria-modal': 'true', |
| '[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', |
| '[@dialogContainer]': '_state', |
| '(@dialogContainer.start)': '_onAnimationStart($event)', |
| '(@dialogContainer.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,] }] }, |
| { type: MatDialogConfig } |
| ]; }; |
| MatDialogContainer.propDecorators = { |
| _portalOutlet: [{ type: core.ViewChild, args: [portal.CdkPortalOutlet, { static: true },] }] |
| }; |
| return MatDialogContainer; |
| }(portal.BasePortalOutlet)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // TODO(jelbourn): resizing |
| // Counter for unique dialog ids. |
| /** @type {?} */ |
| var uniqueId = 0; |
| /** |
| * Reference to a dialog opened via the MatDialog service. |
| * @template T, R |
| */ |
| var /** |
| * Reference to a dialog opened via the MatDialog service. |
| * @template T, R |
| */ |
| MatDialogRef = /** @class */ (function () { |
| function MatDialogRef(_overlayRef, _containerInstance, |
| // @breaking-change 8.0.0 `_location` parameter to be removed. |
| _location, id) { |
| var _this = this; |
| if (id === void 0) { id = "mat-dialog-" + uniqueId++; } |
| 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._afterOpened = new rxjs.Subject(); |
| /** |
| * Subject for notifying the user that the dialog has finished closing. |
| */ |
| this._afterClosed = new rxjs.Subject(); |
| /** |
| * Subject for notifying the user that the dialog has started closing. |
| */ |
| this._beforeClosed = new rxjs.Subject(); |
| // Pass the id along to the container. |
| _containerInstance._id = id; |
| // Emit when opening animation completes |
| _containerInstance._animationStateChanged.pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.phaseName === 'done' && event.toState === 'enter'; })), operators.take(1)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._afterOpened.next(); |
| _this._afterOpened.complete(); |
| })); |
| // Dispose overlay when closing animation is complete |
| _containerInstance._animationStateChanged.pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.phaseName === 'done' && event.toState === 'exit'; })), operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| clearTimeout(_this._closeFallbackTimeout); |
| _this._overlayRef.dispose(); |
| })); |
| _overlayRef.detachments().subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._beforeClosed.next(_this._result); |
| _this._beforeClosed.complete(); |
| _this._afterClosed.next(_this._result); |
| _this._afterClosed.complete(); |
| _this.componentInstance = (/** @type {?} */ (null)); |
| _this._overlayRef.dispose(); |
| })); |
| _overlayRef.keydownEvents() |
| .pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| return event.keyCode === keycodes.ESCAPE && !_this.disableClose && !keycodes.hasModifierKey(event); |
| }))) |
| .subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| event.preventDefault(); |
| _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(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.phaseName === 'start'; })), operators.take(1)) |
| .subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| _this._beforeClosed.next(dialogResult); |
| _this._beforeClosed.complete(); |
| _this._overlayRef.detachBackdrop(); |
| // The logic that disposes of the overlay depends on the exit animation completing, however |
| // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback |
| // timeout which will clean everything up if the animation hasn't fired within the specified |
| // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the |
| // vast majority of cases the timeout will have been cleared before it has the chance to fire. |
| _this._closeFallbackTimeout = setTimeout((/** |
| * @return {?} |
| */ |
| function () { |
| _this._overlayRef.dispose(); |
| }), event.totalTime + 100); |
| })); |
| 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.afterOpened = /** |
| * Gets an observable that is notified when the dialog is finished opening. |
| * @return {?} |
| */ |
| function () { |
| return this._afterOpened.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.beforeClosed = /** |
| * Gets an observable that is notified when the dialog has started closing. |
| * @return {?} |
| */ |
| function () { |
| return this._beforeClosed.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. |
| * @template THIS |
| * @this {THIS} |
| * @param {?=} position New dialog position. |
| * @return {THIS} |
| */ |
| MatDialogRef.prototype.updatePosition = /** |
| * Updates the dialog's position. |
| * @template THIS |
| * @this {THIS} |
| * @param {?=} position New dialog position. |
| * @return {THIS} |
| */ |
| function (position) { |
| /** @type {?} */ |
| var strategy = (/** @type {?} */ (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(); |
| } |
| (/** @type {?} */ (this))._overlayRef.updatePosition(); |
| return (/** @type {?} */ (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. |
| * @template THIS |
| * @this {THIS} |
| * @param {?=} width New width of the dialog. |
| * @param {?=} height New height of the dialog. |
| * @return {THIS} |
| */ |
| MatDialogRef.prototype.updateSize = /** |
| * Updates the dialog's width and height. |
| * @template THIS |
| * @this {THIS} |
| * @param {?=} width New width of the dialog. |
| * @param {?=} height New height of the dialog. |
| * @return {THIS} |
| */ |
| function (width, height) { |
| if (width === void 0) { width = ''; } |
| if (height === void 0) { height = ''; } |
| (/** @type {?} */ (this))._getPositionStrategy().width(width).height(height); |
| (/** @type {?} */ (this))._overlayRef.updatePosition(); |
| return (/** @type {?} */ (this)); |
| }; |
| /** Add a CSS class or an array of classes to the overlay pane. */ |
| /** |
| * Add a CSS class or an array of classes to the overlay pane. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} classes |
| * @return {THIS} |
| */ |
| MatDialogRef.prototype.addPanelClass = /** |
| * Add a CSS class or an array of classes to the overlay pane. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} classes |
| * @return {THIS} |
| */ |
| function (classes) { |
| (/** @type {?} */ (this))._overlayRef.addPanelClass(classes); |
| return (/** @type {?} */ (this)); |
| }; |
| /** Remove a CSS class or an array of classes from the overlay pane. */ |
| /** |
| * Remove a CSS class or an array of classes from the overlay pane. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} classes |
| * @return {THIS} |
| */ |
| MatDialogRef.prototype.removePanelClass = /** |
| * Remove a CSS class or an array of classes from the overlay pane. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} classes |
| * @return {THIS} |
| */ |
| function (classes) { |
| (/** @type {?} */ (this))._overlayRef.removePanelClass(classes); |
| return (/** @type {?} */ (this)); |
| }; |
| /** |
| * Gets an observable that is notified when the dialog is finished opening. |
| * @deprecated Use `afterOpened` instead. |
| * @breaking-change 8.0.0 |
| */ |
| /** |
| * Gets an observable that is notified when the dialog is finished opening. |
| * @deprecated Use `afterOpened` instead. |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| MatDialogRef.prototype.afterOpen = /** |
| * Gets an observable that is notified when the dialog is finished opening. |
| * @deprecated Use `afterOpened` instead. |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| function () { |
| return this.afterOpened(); |
| }; |
| /** |
| * Gets an observable that is notified when the dialog has started closing. |
| * @deprecated Use `beforeClosed` instead. |
| * @breaking-change 8.0.0 |
| */ |
| /** |
| * Gets an observable that is notified when the dialog has started closing. |
| * @deprecated Use `beforeClosed` instead. |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| MatDialogRef.prototype.beforeClose = /** |
| * Gets an observable that is notified when the dialog has started closing. |
| * @deprecated Use `beforeClosed` instead. |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| function () { |
| return this.beforeClosed(); |
| }; |
| /** Fetches the position strategy object from the overlay ref. */ |
| /** |
| * Fetches the position strategy object from the overlay ref. |
| * @private |
| * @return {?} |
| */ |
| MatDialogRef.prototype._getPositionStrategy = /** |
| * Fetches the position strategy object from the overlay ref. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return (/** @type {?} */ (this._overlayRef.getConfig().positionStrategy)); |
| }; |
| return MatDialogRef; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to access the data that was passed in to a dialog. |
| * @type {?} |
| */ |
| var MAT_DIALOG_DATA = new core.InjectionToken('MatDialogData'); |
| /** |
| * Injection token that can be used to specify default dialog options. |
| * @type {?} |
| */ |
| var MAT_DIALOG_DEFAULT_OPTIONS = new core.InjectionToken('mat-dialog-default-options'); |
| /** |
| * Injection token that determines the scroll handling while the dialog is open. |
| * @type {?} |
| */ |
| var MAT_DIALOG_SCROLL_STRATEGY = new core.InjectionToken('mat-dialog-scroll-strategy'); |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_DIALOG_SCROLL_STRATEGY_FACTORY(overlay$$1) { |
| return (/** |
| * @return {?} |
| */ |
| function () { return overlay$$1.scrollStrategies.block(); }); |
| } |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay$$1) { |
| return (/** |
| * @return {?} |
| */ |
| function () { return overlay$$1.scrollStrategies.block(); }); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = { |
| provide: MAT_DIALOG_SCROLL_STRATEGY, |
| deps: [overlay.Overlay], |
| useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, |
| }; |
| /** |
| * Service to open Material Design modal dialogs. |
| */ |
| var MatDialog = /** @class */ (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._parentDialog = _parentDialog; |
| this._overlayContainer = _overlayContainer; |
| this._openDialogsAtThisLevel = []; |
| this._afterAllClosedAtThisLevel = new rxjs.Subject(); |
| this._afterOpenedAtThisLevel = new rxjs.Subject(); |
| this._ariaHiddenElements = new Map(); |
| // TODO (jelbourn): tighten the typing right-hand side of this expression. |
| /** |
| * 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 = (/** @type {?} */ (rxjs.defer((/** |
| * @return {?} |
| */ |
| function () { return _this.openDialogs.length ? |
| _this._afterAllClosed : |
| _this._afterAllClosed.pipe(operators.startWith(undefined)); })))); |
| this._scrollStrategy = scrollStrategy; |
| } |
| 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, "afterOpened", { |
| /** 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.afterOpened : this._afterOpenedAtThisLevel; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDialog.prototype, "afterOpen", { |
| /** |
| * Stream that emits when a dialog has been opened. |
| * @deprecated Use `afterOpened` instead. |
| * @breaking-change 8.0.0 |
| */ |
| get: /** |
| * Stream that emits when a dialog has been opened. |
| * @deprecated Use `afterOpened` instead. |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| function () { |
| return this.afterOpened; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDialog.prototype, "_afterAllClosed", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var 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, R |
| * @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, R |
| * @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$1(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."); |
| } |
| /** @type {?} */ |
| var overlayRef = this._createOverlay(config); |
| /** @type {?} */ |
| var dialogContainer = this._attachDialogContainer(overlayRef, config); |
| /** @type {?} */ |
| var 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((/** |
| * @return {?} |
| */ |
| function () { return _this._removeOpenDialog(dialogRef); })); |
| this.afterOpened.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 () { |
| this._closeDialogs(this.openDialogs); |
| }; |
| /** |
| * 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((/** |
| * @param {?} dialog |
| * @return {?} |
| */ |
| function (dialog) { return dialog.id === id; })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatDialog.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| // Only close the dialogs at this level on destroy |
| // since the parent service may still be active. |
| this._closeDialogs(this._openDialogsAtThisLevel); |
| this._afterAllClosedAtThisLevel.complete(); |
| this._afterOpenedAtThisLevel.complete(); |
| }; |
| /** |
| * Creates the overlay into which the dialog will be loaded. |
| * @param config The dialog configuration. |
| * @returns A promise resolving to the OverlayRef for the created overlay. |
| */ |
| /** |
| * Creates the overlay into which the dialog will be loaded. |
| * @private |
| * @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. |
| * @private |
| * @param {?} config The dialog configuration. |
| * @return {?} A promise resolving to the OverlayRef for the created overlay. |
| */ |
| function (config) { |
| /** @type {?} */ |
| var overlayConfig = this._getOverlayConfig(config); |
| return this._overlay.create(overlayConfig); |
| }; |
| /** |
| * Creates an overlay config from a dialog config. |
| * @param dialogConfig The dialog configuration. |
| * @returns The overlay configuration. |
| */ |
| /** |
| * Creates an overlay config from a dialog config. |
| * @private |
| * @param {?} dialogConfig The dialog configuration. |
| * @return {?} The overlay configuration. |
| */ |
| MatDialog.prototype._getOverlayConfig = /** |
| * Creates an overlay config from a dialog config. |
| * @private |
| * @param {?} dialogConfig The dialog configuration. |
| * @return {?} The overlay configuration. |
| */ |
| function (dialogConfig) { |
| /** @type {?} */ |
| var 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, |
| disposeOnNavigation: dialogConfig.closeOnNavigation |
| }); |
| 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. |
| * @returns A promise resolving to a ComponentRef for the attached container. |
| */ |
| /** |
| * Attaches an MatDialogContainer to a dialog's already-created overlay. |
| * @private |
| * @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. |
| * @private |
| * @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) { |
| /** @type {?} */ |
| var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| /** @type {?} */ |
| var injector = new portal.PortalInjector(userInjector || this._injector, new WeakMap([ |
| [MatDialogConfig, config] |
| ])); |
| /** @type {?} */ |
| var containerPortal = new portal.ComponentPortal(MatDialogContainer, config.viewContainerRef, injector); |
| /** @type {?} */ |
| var containerRef = overlay$$1.attach(containerPortal); |
| return containerRef.instance; |
| }; |
| /** |
| * Attaches the user-provided component to the already-created MatDialogContainer. |
| * @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. |
| * @returns A promise resolving to the MatDialogRef that should be returned to the user. |
| */ |
| /** |
| * Attaches the user-provided component to the already-created MatDialogContainer. |
| * @private |
| * @template T, R |
| * @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. |
| * @private |
| * @template T, R |
| * @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. |
| /** @type {?} */ |
| var 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((/** |
| * @return {?} |
| */ |
| 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 { |
| /** @type {?} */ |
| var injector = this._createInjector(config, dialogRef, dialogContainer); |
| /** @type {?} */ |
| var 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. |
| * @param config Config object that is used to construct the dialog. |
| * @param dialogRef Reference to the dialog. |
| * @param container Dialog container element that wraps all of the contents. |
| * @returns The custom injector that can be used inside the dialog. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @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) { |
| /** @type {?} */ |
| var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| // 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. |
| /** @type {?} */ |
| var injectionTokens = new WeakMap([ |
| [MatDialogContainer, dialogContainer], |
| [MAT_DIALOG_DATA, config.data], |
| [MatDialogRef, dialogRef] |
| ]); |
| if (config.direction && |
| (!userInjector || !userInjector.get(bidi.Directionality, null))) { |
| injectionTokens.set(bidi.Directionality, { |
| value: config.direction, |
| change: rxjs.of() |
| }); |
| } |
| return new portal.PortalInjector(userInjector || this._injector, injectionTokens); |
| }; |
| /** |
| * Removes a dialog from the array of open dialogs. |
| * @param dialogRef Dialog to be removed. |
| */ |
| /** |
| * Removes a dialog from the array of open dialogs. |
| * @private |
| * @param {?} dialogRef Dialog to be removed. |
| * @return {?} |
| */ |
| MatDialog.prototype._removeOpenDialog = /** |
| * Removes a dialog from the array of open dialogs. |
| * @private |
| * @param {?} dialogRef Dialog to be removed. |
| * @return {?} |
| */ |
| function (dialogRef) { |
| /** @type {?} */ |
| var 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((/** |
| * @param {?} previousValue |
| * @param {?} element |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * Hides all of the content that isn't an overlay from assistive technology. |
| * @private |
| * @return {?} |
| */ |
| MatDialog.prototype._hideNonDialogContentFromAssistiveTechnology = /** |
| * Hides all of the content that isn't an overlay from assistive technology. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var overlayContainer = this._overlayContainer.getContainerElement(); |
| // Ensure that the overlay container is attached to the DOM. |
| if (overlayContainer.parentElement) { |
| /** @type {?} */ |
| var siblings = overlayContainer.parentElement.children; |
| for (var i = siblings.length - 1; i > -1; i--) { |
| /** @type {?} */ |
| var 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'); |
| } |
| } |
| } |
| }; |
| /** Closes all of the dialogs in an array. */ |
| /** |
| * Closes all of the dialogs in an array. |
| * @private |
| * @param {?} dialogs |
| * @return {?} |
| */ |
| MatDialog.prototype._closeDialogs = /** |
| * Closes all of the dialogs in an array. |
| * @private |
| * @param {?} dialogs |
| * @return {?} |
| */ |
| function (dialogs) { |
| /** @type {?} */ |
| var i = dialogs.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. |
| dialogs[i].close(); |
| } |
| }; |
| MatDialog.decorators = [ |
| { type: core.Injectable }, |
| ]; |
| /** @nocollapse */ |
| MatDialog.ctorParameters = function () { return [ |
| { type: overlay.Overlay }, |
| { type: core.Injector }, |
| { type: common.Location, decorators: [{ type: core.Optional }] }, |
| { type: MatDialogConfig, 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$1(config, defaultOptions) { |
| return __assign({}, defaultOptions, config); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Counter used to generate unique IDs for dialog elements. |
| * @type {?} |
| */ |
| var dialogElementUid = 0; |
| /** |
| * Button that will close the current dialog. |
| */ |
| var MatDialogClose = /** @class */ (function () { |
| function MatDialogClose(dialogRef, _elementRef, _dialog) { |
| this.dialogRef = dialogRef; |
| this._elementRef = _elementRef; |
| this._dialog = _dialog; |
| } |
| /** |
| * @return {?} |
| */ |
| MatDialogClose.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| if (!this.dialogRef) { |
| // When this directive is included in a dialog via TemplateRef (rather than being |
| // in a Component), the DialogRef isn't available via injection because embedded |
| // views cannot be given a custom injector. Instead, we look up the DialogRef by |
| // ID. This must occur in `onInit`, as the ID binding for the dialog container won't |
| // be resolved at constructor time. |
| this.dialogRef = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openDialogs))); |
| } |
| }; |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| MatDialogClose.prototype.ngOnChanges = /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { |
| /** @type {?} */ |
| var proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult']; |
| if (proxiedChange) { |
| this.dialogResult = proxiedChange.currentValue; |
| } |
| }; |
| MatDialogClose.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "button[mat-dialog-close], button[matDialogClose]", |
| exportAs: 'matDialogClose', |
| host: { |
| '(click)': 'dialogRef.close(dialogResult)', |
| '[attr.aria-label]': 'ariaLabel || null', |
| 'type': 'button', |
| } |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatDialogClose.ctorParameters = function () { return [ |
| { type: MatDialogRef, decorators: [{ type: core.Optional }] }, |
| { type: core.ElementRef }, |
| { type: MatDialog } |
| ]; }; |
| MatDialogClose.propDecorators = { |
| ariaLabel: [{ type: core.Input, args: ['aria-label',] }], |
| dialogResult: [{ type: core.Input, args: ['mat-dialog-close',] }], |
| _matDialogClose: [{ type: core.Input, args: ['matDialogClose',] }] |
| }; |
| return MatDialogClose; |
| }()); |
| /** |
| * Title of a dialog element. Stays fixed to the top of the dialog when scrolling. |
| */ |
| var MatDialogTitle = /** @class */ (function () { |
| function MatDialogTitle(_dialogRef, _elementRef, _dialog) { |
| this._dialogRef = _dialogRef; |
| this._elementRef = _elementRef; |
| this._dialog = _dialog; |
| this.id = "mat-dialog-title-" + dialogElementUid++; |
| } |
| /** |
| * @return {?} |
| */ |
| MatDialogTitle.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (!this._dialogRef) { |
| this._dialogRef = (/** @type {?} */ (getClosestDialog(this._elementRef, this._dialog.openDialogs))); |
| } |
| if (this._dialogRef) { |
| Promise.resolve().then((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var container = _this._dialogRef._containerInstance; |
| if (container && !container._ariaLabelledBy) { |
| container._ariaLabelledBy = _this.id; |
| } |
| })); |
| } |
| }; |
| MatDialogTitle.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-dialog-title], [matDialogTitle]', |
| exportAs: 'matDialogTitle', |
| host: { |
| 'class': 'mat-dialog-title', |
| '[id]': 'id', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatDialogTitle.ctorParameters = function () { return [ |
| { type: MatDialogRef, decorators: [{ type: core.Optional }] }, |
| { type: core.ElementRef }, |
| { type: MatDialog } |
| ]; }; |
| MatDialogTitle.propDecorators = { |
| id: [{ type: core.Input }] |
| }; |
| return MatDialogTitle; |
| }()); |
| /** |
| * Scrollable content container of a dialog. |
| */ |
| var MatDialogContent = /** @class */ (function () { |
| function MatDialogContent() { |
| } |
| MatDialogContent.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]", |
| host: { 'class': 'mat-dialog-content' } |
| },] }, |
| ]; |
| return MatDialogContent; |
| }()); |
| /** |
| * Container for the bottom action buttons in a dialog. |
| * Stays fixed to the bottom when scrolling. |
| */ |
| var MatDialogActions = /** @class */ (function () { |
| function MatDialogActions() { |
| } |
| MatDialogActions.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", |
| host: { 'class': 'mat-dialog-actions' } |
| },] }, |
| ]; |
| return MatDialogActions; |
| }()); |
| /** |
| * Finds the closest MatDialogRef to an element by looking at the DOM. |
| * @param {?} element Element relative to which to look for a dialog. |
| * @param {?} openDialogs References to the currently-open dialogs. |
| * @return {?} |
| */ |
| function getClosestDialog(element, openDialogs) { |
| /** @type {?} */ |
| var parent = element.nativeElement.parentElement; |
| while (parent && !parent.classList.contains('mat-dialog-container')) { |
| parent = parent.parentElement; |
| } |
| return parent ? openDialogs.find((/** |
| * @param {?} dialog |
| * @return {?} |
| */ |
| function (dialog) { return dialog.id === (/** @type {?} */ (parent)).id; })) : null; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatDialogModule = /** @class */ (function () { |
| function MatDialogModule() { |
| } |
| MatDialogModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| overlay.OverlayModule, |
| portal.PortalModule, |
| MatCommonModule, |
| ], |
| exports: [ |
| MatDialogContainer, |
| MatDialogClose, |
| MatDialogTitle, |
| MatDialogContent, |
| MatDialogActions, |
| MatCommonModule, |
| ], |
| declarations: [ |
| MatDialogContainer, |
| MatDialogClose, |
| MatDialogTitle, |
| MatDialogActions, |
| MatDialogContent, |
| ], |
| providers: [ |
| MatDialog, |
| MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, |
| ], |
| entryComponents: [MatDialogContainer], |
| },] }, |
| ]; |
| return MatDialogModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Directive to automatically resize a textarea to fit its content. |
| * @deprecated Use `cdkTextareaAutosize` from `\@angular/cdk/text-field` instead. |
| * \@breaking-change 8.0.0 |
| */ |
| var MatTextareaAutosize = /** @class */ (function (_super) { |
| __extends(MatTextareaAutosize, _super); |
| function MatTextareaAutosize() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| Object.defineProperty(MatTextareaAutosize.prototype, "matAutosizeMinRows", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this.minRows; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this.minRows = value; }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatTextareaAutosize.prototype, "matAutosizeMaxRows", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this.maxRows; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this.maxRows = value; }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatTextareaAutosize.prototype, "matAutosize", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this.enabled; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this.enabled = value; }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatTextareaAutosize.prototype, "matTextareaAutosize", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this.enabled; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this.enabled = value; }, |
| enumerable: true, |
| configurable: true |
| }); |
| MatTextareaAutosize.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'textarea[mat-autosize], textarea[matTextareaAutosize]', |
| exportAs: 'matTextareaAutosize', |
| inputs: ['cdkAutosizeMinRows', 'cdkAutosizeMaxRows'], |
| host: { |
| 'class': 'cdk-textarea-autosize 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', |
| '(input)': '_noopInputHandler()', |
| }, |
| },] }, |
| ]; |
| MatTextareaAutosize.propDecorators = { |
| matAutosizeMinRows: [{ type: core.Input }], |
| matAutosizeMaxRows: [{ type: core.Input }], |
| matAutosize: [{ type: core.Input, args: ['mat-autosize',] }], |
| matTextareaAutosize: [{ type: core.Input }] |
| }; |
| return MatTextareaAutosize; |
| }(textField.CdkTextareaAutosize)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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. |
| * @type {?} |
| */ |
| var MAT_INPUT_VALUE_ACCESSOR = new core.InjectionToken('MAT_INPUT_VALUE_ACCESSOR'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError. |
| /** @type {?} */ |
| var MAT_INPUT_INVALID_TYPES = [ |
| 'button', |
| 'checkbox', |
| 'file', |
| 'hidden', |
| 'image', |
| 'radio', |
| 'range', |
| 'reset', |
| 'submit' |
| ]; |
| /** @type {?} */ |
| var nextUniqueId$5 = 0; |
| // Boilerplate for applying mixins to MatInput. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatInput. |
| /** |
| * \@docs-private |
| */ |
| MatInputBase = /** @class */ (function () { |
| function MatInputBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) { |
| this._defaultErrorStateMatcher = _defaultErrorStateMatcher; |
| this._parentForm = _parentForm; |
| this._parentFormGroup = _parentFormGroup; |
| this.ngControl = ngControl; |
| } |
| return MatInputBase; |
| }()); |
| /** @type {?} */ |
| var _MatInputMixinBase = mixinErrorState(MatInputBase); |
| /** |
| * Directive that allows a native input to work inside a `MatFormField`. |
| */ |
| var MatInput = /** @class */ (function (_super) { |
| __extends(MatInput, _super); |
| function MatInput(_elementRef, _platform, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, inputValueAccessor, _autofillMonitor, ngZone) { |
| var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this; |
| _this._elementRef = _elementRef; |
| _this._platform = _platform; |
| _this.ngControl = ngControl; |
| _this._autofillMonitor = _autofillMonitor; |
| _this._uid = "mat-input-" + nextUniqueId$5++; |
| /** |
| * Whether the component is being rendered on the server. |
| */ |
| _this._isServer = false; |
| /** |
| * Whether the component is a native html select. |
| */ |
| _this._isNativeSelect = false; |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * \@docs-private |
| */ |
| _this.focused = false; |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * \@docs-private |
| */ |
| _this.stateChanges = new rxjs.Subject(); |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * \@docs-private |
| */ |
| _this.controlType = 'mat-input'; |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * \@docs-private |
| */ |
| _this.autofilled = false; |
| _this._disabled = false; |
| _this._required = false; |
| _this._type = 'text'; |
| _this._readonly = false; |
| _this._neverEmptyInputTypes = [ |
| 'date', |
| 'datetime', |
| 'datetime-local', |
| 'month', |
| 'time', |
| 'week' |
| ].filter((/** |
| * @param {?} t |
| * @return {?} |
| */ |
| function (t) { return platform.getSupportedInputTypes().has(t); })); |
| /** @type {?} */ |
| var element = _this._elementRef.nativeElement; |
| // If no input value accessor was explicitly specified, use the element as the input value |
| // accessor. |
| _this._inputValueAccessor = inputValueAccessor || element; |
| _this._previousNativeValue = _this.value; |
| // 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) { |
| ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| _elementRef.nativeElement.addEventListener('keyup', (/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var el = (/** @type {?} */ (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; |
| _this._isNativeSelect = element.nodeName.toLowerCase() === 'select'; |
| if (_this._isNativeSelect) { |
| _this.controlType = ((/** @type {?} */ (element))).multiple ? 'mat-native-select-multiple' : |
| 'mat-native-select'; |
| } |
| return _this; |
| } |
| Object.defineProperty(MatInput.prototype, "disabled", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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", { |
| /** Input type of the element. */ |
| 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)) { |
| ((/** @type {?} */ (this._elementRef.nativeElement))).type = this._type; |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatInput.prototype, "value", { |
| /** |
| * Implemented as part of MatFormFieldControl. |
| * @docs-private |
| */ |
| 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", { |
| /** Whether the element is 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.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._platform.isBrowser) { |
| this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| _this.autofilled = event.isAutofilled; |
| _this.stateChanges.next(); |
| })); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatInput.prototype.ngOnChanges = /** |
| * @return {?} |
| */ |
| function () { |
| this.stateChanges.next(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatInput.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this.stateChanges.complete(); |
| if (this._platform.isBrowser) { |
| this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement); |
| } |
| }; |
| /** |
| * @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 || !isFocused)) { |
| 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. |
| * @protected |
| * @return {?} |
| */ |
| MatInput.prototype._dirtyCheckNativeValue = /** |
| * Does some manual dirty checking on the native input `value` property. |
| * @protected |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var newValue = this._elementRef.nativeElement.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. |
| * @protected |
| * @return {?} |
| */ |
| MatInput.prototype._validateType = /** |
| * Make sure the input is a supported type. |
| * @protected |
| * @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. |
| * @protected |
| * @return {?} |
| */ |
| MatInput.prototype._isNeverEmpty = /** |
| * Checks whether the input type is one of the types that are never empty. |
| * @protected |
| * @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. |
| * @protected |
| * @return {?} |
| */ |
| MatInput.prototype._isBadInput = /** |
| * Checks whether the input is invalid based on the native validation. |
| * @protected |
| * @return {?} |
| */ |
| function () { |
| // The `validity` property won't be present on platform-server. |
| /** @type {?} */ |
| var validity = ((/** @type {?} */ (this._elementRef.nativeElement))).validity; |
| return validity && validity.badInput; |
| }; |
| /** Determines if the component host is a textarea. */ |
| /** |
| * Determines if the component host is a textarea. |
| * @protected |
| * @return {?} |
| */ |
| MatInput.prototype._isTextarea = /** |
| * Determines if the component host is a textarea. |
| * @protected |
| * @return {?} |
| */ |
| function () { |
| return this._elementRef.nativeElement.nodeName.toLowerCase() === 'textarea'; |
| }; |
| 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() && |
| !this.autofilled; |
| }, |
| 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 () { |
| if (this._isNativeSelect) { |
| // For a single-selection `<select>`, the label should float when the selected option has |
| // a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid |
| // overlapping the label with the options. |
| /** @type {?} */ |
| var selectElement = (/** @type {?} */ (this._elementRef.nativeElement)); |
| /** @type {?} */ |
| var firstOption = selectElement.options[0]; |
| // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be |
| // -1 if the `value` is set to something, that isn't in the list of options, at a later point. |
| return this.focused || selectElement.multiple || !this.empty || |
| !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label); |
| } |
| else { |
| 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 () { |
| // Do not re-focus the input element if the element is already focused. Otherwise it can happen |
| // that someone clicks on a time input and the cursor resets to the "hours" field while the |
| // "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849 |
| if (!this.focused) { |
| this.focus(); |
| } |
| }; |
| MatInput.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "input[matInput], textarea[matInput], select[matNativeControl],\n input[matNativeControl], textarea[matNativeControl]", |
| exportAs: 'matInput', |
| host: { |
| /** |
| * \@breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor. |
| */ |
| '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', |
| '[attr.placeholder]': 'placeholder', |
| '[disabled]': 'disabled', |
| '[required]': 'required', |
| '[attr.readonly]': 'readonly && !_isNativeSelect || null', |
| '[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,] }] }, |
| { type: textField.AutofillMonitor }, |
| { type: core.NgZone } |
| ]; }; |
| 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatInputModule = /** @class */ (function () { |
| function MatInputModule() { |
| } |
| MatInputModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| declarations: [MatInput, MatTextareaAutosize], |
| imports: [ |
| common.CommonModule, |
| textField.TextFieldModule, |
| MatFormFieldModule, |
| ], |
| exports: [ |
| textField.TextFieldModule, |
| // We re-export the `MatFormFieldModule` since `MatInput` will almost always |
| // be used together with `MatFormField`. |
| MatFormFieldModule, |
| MatInput, |
| MatTextareaAutosize, |
| ], |
| providers: [ErrorStateMatcher], |
| },] }, |
| ]; |
| return MatInputModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Datepicker data that requires internationalization. |
| */ |
| var MatDatepickerIntl = /** @class */ (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 rxjs.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, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ MatDatepickerIntl.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatDatepickerIntl_Factory() { return new MatDatepickerIntl(); }, token: MatDatepickerIntl, providedIn: "root" }); |
| return MatDatepickerIntl; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * An internal class that represents the data corresponding to a single calendar cell. |
| * \@docs-private |
| */ |
| var /** |
| * An internal class that represents the data corresponding to a single calendar cell. |
| * \@docs-private |
| */ |
| MatCalendarCell = /** @class */ (function () { |
| function MatCalendarCell(value, displayValue, ariaLabel, enabled, cssClasses) { |
| this.value = value; |
| this.displayValue = displayValue; |
| this.ariaLabel = ariaLabel; |
| this.enabled = enabled; |
| this.cssClasses = cssClasses; |
| } |
| return MatCalendarCell; |
| }()); |
| /** |
| * An internal component used to display calendar data in a table. |
| * \@docs-private |
| */ |
| var MatCalendarBody = /** @class */ (function () { |
| function MatCalendarBody(_elementRef, _ngZone) { |
| this._elementRef = _elementRef; |
| this._ngZone = _ngZone; |
| /** |
| * The number of columns in the table. |
| */ |
| this.numCols = 7; |
| /** |
| * 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 (cell.enabled) { |
| this.selectedValueChange.emit(cell.value); |
| } |
| }; |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| MatCalendarBody.prototype.ngOnChanges = /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { |
| /** @type {?} */ |
| var columnChanges = changes['numCols']; |
| var _a = this, rows = _a.rows, numCols = _a.numCols; |
| if (changes['rows'] || columnChanges) { |
| this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0; |
| } |
| if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) { |
| this._cellPadding = 50 * this.cellAspectRatio / numCols + "%"; |
| } |
| if (columnChanges || !this._cellWidth) { |
| this._cellWidth = 100 / numCols + "%"; |
| } |
| }; |
| /** |
| * @param {?} rowIndex |
| * @param {?} colIndex |
| * @return {?} |
| */ |
| MatCalendarBody.prototype._isActiveCell = /** |
| * @param {?} rowIndex |
| * @param {?} colIndex |
| * @return {?} |
| */ |
| function (rowIndex, colIndex) { |
| /** @type {?} */ |
| var 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; |
| }; |
| /** Focuses the active cell after the microtask queue is empty. */ |
| /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| MatCalendarBody.prototype._focusActiveCell = /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| _this._ngZone.onStable.asObservable().pipe(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var activeCell = _this._elementRef.nativeElement.querySelector('.mat-calendar-body-active'); |
| if (activeCell) { |
| activeCell.focus(); |
| } |
| })); |
| })); |
| }; |
| 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]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{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]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\">{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}</td><td *ngFor=\"let item of row; let colIndex = index\" role=\"gridcell\" class=\"mat-calendar-body-cell\" [ngClass]=\"item.cssClasses\" [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\" [attr.aria-selected]=\"selectedValue === item.value\" (click)=\"_cellClicked(item)\" [style.width]=\"_cellWidth\" [style.paddingTop]=\"_cellPadding\" [style.paddingBottom]=\"_cellPadding\"><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}@media (-ms-high-contrast:active){.mat-calendar-body-cell-content{border:none}}@media (-ms-high-contrast:active){.mat-calendar-body-selected,.mat-datepicker-popup:not(:empty){outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){outline:dotted 2px}}[dir=rtl] .mat-calendar-body-label{text-align:right}"], |
| host: { |
| 'class': 'mat-calendar-body', |
| 'role': 'grid', |
| 'aria-readonly': 'true' |
| }, |
| exportAs: 'matCalendarBody', |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatCalendarBody.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.NgZone } |
| ]; }; |
| 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 }], |
| activeCell: [{ type: core.Input }], |
| cellAspectRatio: [{ type: core.Input }], |
| selectedValueChange: [{ type: core.Output }] |
| }; |
| return MatCalendarBody; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var DAYS_PER_WEEK = 7; |
| /** |
| * An internal component used to display a single month in the datepicker. |
| * \@docs-private |
| * @template D |
| */ |
| var MatMonthView = /** @class */ (function () { |
| function MatMonthView(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) { |
| this._changeDetectorRef = _changeDetectorRef; |
| this._dateFormats = _dateFormats; |
| this._dateAdapter = _dateAdapter; |
| this._dir = _dir; |
| /** |
| * Emits when a new date is selected. |
| */ |
| this.selectedChange = new core.EventEmitter(); |
| /** |
| * Emits when any date is selected. |
| */ |
| this._userSelection = new core.EventEmitter(); |
| /** |
| * Emits when any date is activated. |
| */ |
| this.activeDateChange = new core.EventEmitter(); |
| if (!this._dateAdapter) { |
| throw createMissingDateImplError('DateAdapter'); |
| } |
| if (!this._dateFormats) { |
| throw createMissingDateImplError('MAT_DATE_FORMATS'); |
| } |
| /** @type {?} */ |
| var firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek(); |
| /** @type {?} */ |
| var narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow'); |
| /** @type {?} */ |
| var longWeekdays = this._dateAdapter.getDayOfWeekNames('long'); |
| // Rotate the labels for days of the week based on the configured first day of the week. |
| /** @type {?} */ |
| var weekdays = longWeekdays.map((/** |
| * @param {?} long |
| * @param {?} i |
| * @return {?} |
| */ |
| 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", { |
| /** |
| * The date to display in this month view (everything other than the month and year is ignored). |
| */ |
| 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) { |
| /** @type {?} */ |
| var oldActiveDate = this._activeDate; |
| /** @type {?} */ |
| var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today(); |
| this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate); |
| if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) { |
| this._init(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatMonthView.prototype, "selected", { |
| /** The currently selected date. */ |
| 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", { |
| /** The minimum selectable date. */ |
| 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", { |
| /** The maximum selectable date. */ |
| 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) { |
| /** @type {?} */ |
| var selectedYear = this._dateAdapter.getYear(this.activeDate); |
| /** @type {?} */ |
| var selectedMonth = this._dateAdapter.getMonth(this.activeDate); |
| /** @type {?} */ |
| var selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date); |
| this.selectedChange.emit(selectedDate); |
| } |
| this._userSelection.emit(); |
| }; |
| /** Handles keydown events on the calendar body when calendar is in month view. */ |
| /** |
| * Handles keydown events on the calendar body when calendar is in month view. |
| * @param {?} event |
| * @return {?} |
| */ |
| MatMonthView.prototype._handleCalendarBodyKeydown = /** |
| * Handles keydown events on the calendar body when calendar is in month view. |
| * @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. |
| // 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. |
| /** @type {?} */ |
| var oldActiveDate = this._activeDate; |
| /** @type {?} */ |
| var 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: |
| case keycodes.SPACE: |
| if (!this.dateFilter || this.dateFilter(this._activeDate)) { |
| this._dateSelected(this._dateAdapter.getDate(this._activeDate)); |
| this._userSelection.emit(); |
| // 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; |
| } |
| if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) { |
| this.activeDateChange.emit(this.activeDate); |
| } |
| this._focusActiveCell(); |
| // Prevent unexpected default actions such as form submission. |
| event.preventDefault(); |
| }; |
| /** 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(); |
| /** @type {?} */ |
| var 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(); |
| }; |
| /** Focuses the active cell after the microtask queue is empty. */ |
| /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| MatMonthView.prototype._focusActiveCell = /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| function () { |
| this._matCalendarBody._focusActiveCell(); |
| }; |
| /** Creates MatCalendarCells for the dates in this month. */ |
| /** |
| * Creates MatCalendarCells for the dates in this month. |
| * @private |
| * @return {?} |
| */ |
| MatMonthView.prototype._createWeekCells = /** |
| * Creates MatCalendarCells for the dates in this month. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate); |
| /** @type {?} */ |
| var dateNames = this._dateAdapter.getDateNames(); |
| this._weeks = [[]]; |
| for (var i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) { |
| if (cell == DAYS_PER_WEEK) { |
| this._weeks.push([]); |
| cell = 0; |
| } |
| /** @type {?} */ |
| var date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1); |
| /** @type {?} */ |
| var enabled = this._shouldEnableDate(date); |
| /** @type {?} */ |
| var ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel); |
| /** @type {?} */ |
| var cellClasses = this.dateClass ? this.dateClass(date) : undefined; |
| this._weeks[this._weeks.length - 1] |
| .push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses)); |
| } |
| }; |
| /** Date filter for the month */ |
| /** |
| * Date filter for the month |
| * @private |
| * @param {?} date |
| * @return {?} |
| */ |
| MatMonthView.prototype._shouldEnableDate = /** |
| * Date filter for the month |
| * @private |
| * @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. |
| */ |
| /** |
| * Gets the date in this month that the given Date falls on. |
| * Returns null if the given Date is in another month. |
| * @private |
| * @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. |
| * @private |
| * @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. */ |
| /** |
| * Checks whether the 2 dates are non-null and fall within the same month of the same year. |
| * @private |
| * @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. |
| * @private |
| * @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. |
| * @returns The given object if it is both a date instance and valid, otherwise null. |
| */ |
| /** |
| * @private |
| * @param {?} obj The object to check. |
| * @return {?} The given object if it is both a date instance and valid, otherwise null. |
| */ |
| MatMonthView.prototype._getValidDateOrNull = /** |
| * @private |
| * @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. */ |
| /** |
| * Determines whether the user has the RTL layout direction. |
| * @private |
| * @return {?} |
| */ |
| MatMonthView.prototype._isRtl = /** |
| * Determines whether the user has the RTL layout direction. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this._dir && this._dir.value === 'rtl'; |
| }; |
| MatMonthView.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-month-view', |
| template: "<table class=\"mat-calendar-table\" role=\"presentation\"><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)\" (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody></table>", |
| exportAs: 'matMonthView', |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatMonthView.ctorParameters = function () { return [ |
| { type: core.ChangeDetectorRef }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] }] }, |
| { type: DateAdapter, decorators: [{ type: core.Optional }] }, |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] } |
| ]; }; |
| MatMonthView.propDecorators = { |
| activeDate: [{ type: core.Input }], |
| selected: [{ type: core.Input }], |
| minDate: [{ type: core.Input }], |
| maxDate: [{ type: core.Input }], |
| dateFilter: [{ type: core.Input }], |
| dateClass: [{ type: core.Input }], |
| selectedChange: [{ type: core.Output }], |
| _userSelection: [{ type: core.Output }], |
| activeDateChange: [{ type: core.Output }], |
| _matCalendarBody: [{ type: core.ViewChild, args: [MatCalendarBody, { static: false },] }] |
| }; |
| return MatMonthView; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var yearsPerPage = 24; |
| /** @type {?} */ |
| var yearsPerRow = 4; |
| /** |
| * An internal component used to display a year selector in the datepicker. |
| * \@docs-private |
| * @template D |
| */ |
| var MatMultiYearView = /** @class */ (function () { |
| function MatMultiYearView(_changeDetectorRef, _dateAdapter, _dir) { |
| this._changeDetectorRef = _changeDetectorRef; |
| this._dateAdapter = _dateAdapter; |
| this._dir = _dir; |
| /** |
| * Emits when a new year is selected. |
| */ |
| this.selectedChange = new core.EventEmitter(); |
| /** |
| * Emits the selected year. This doesn't imply a change on the selected date |
| */ |
| this.yearSelected = new core.EventEmitter(); |
| /** |
| * Emits when any date is activated. |
| */ |
| this.activeDateChange = new core.EventEmitter(); |
| if (!this._dateAdapter) { |
| throw createMissingDateImplError('DateAdapter'); |
| } |
| this._activeDate = this._dateAdapter.today(); |
| } |
| Object.defineProperty(MatMultiYearView.prototype, "activeDate", { |
| /** The date to display in this multi-year view (everything other than the year is ignored). */ |
| 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) { |
| /** @type {?} */ |
| var oldActiveDate = this._activeDate; |
| /** @type {?} */ |
| var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today(); |
| this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate); |
| if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) { |
| this._init(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatMultiYearView.prototype, "selected", { |
| /** The currently selected date. */ |
| 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", { |
| /** The minimum selectable date. */ |
| 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", { |
| /** The maximum selectable date. */ |
| 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()); |
| // We want a range years such that we maximize the number of |
| // enabled dates visible at once. This prevents issues where the minimum year |
| // is the last item of a page OR the maximum year is the first item of a page. |
| // The offset from the active year to the "slot" for the starting year is the |
| // *actual* first rendered year in the multi-year view. |
| /** @type {?} */ |
| var activeYear = this._dateAdapter.getYear(this._activeDate); |
| /** @type {?} */ |
| var minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate); |
| this._years = []; |
| for (var i = 0, row = []; i < yearsPerPage; i++) { |
| row.push(minYearOfPage + i); |
| if (row.length == yearsPerRow) { |
| this._years.push(row.map((/** |
| * @param {?} year |
| * @return {?} |
| */ |
| 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) { |
| this.yearSelected.emit(this._dateAdapter.createDate(year, 0, 1)); |
| /** @type {?} */ |
| var month = this._dateAdapter.getMonth(this.activeDate); |
| /** @type {?} */ |
| var 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))); |
| }; |
| /** Handles keydown events on the calendar body when calendar is in multi-year view. */ |
| /** |
| * Handles keydown events on the calendar body when calendar is in multi-year view. |
| * @param {?} event |
| * @return {?} |
| */ |
| MatMultiYearView.prototype._handleCalendarBodyKeydown = /** |
| * Handles keydown events on the calendar body when calendar is in multi-year view. |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var oldActiveDate = this._activeDate; |
| /** @type {?} */ |
| var isRtl = this._isRtl(); |
| switch (event.keyCode) { |
| case keycodes.LEFT_ARROW: |
| this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1); |
| break; |
| case keycodes.RIGHT_ARROW: |
| this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 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, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate)); |
| break; |
| case keycodes.END: |
| this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 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: |
| case keycodes.SPACE: |
| this._yearSelected(this._dateAdapter.getYear(this._activeDate)); |
| break; |
| default: |
| // Don't prevent default or focus active cell on keys that we don't explicitly handle. |
| return; |
| } |
| if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) { |
| this.activeDateChange.emit(this.activeDate); |
| } |
| this._focusActiveCell(); |
| // Prevent unexpected default actions such as form submission. |
| event.preventDefault(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatMultiYearView.prototype._getActiveCell = /** |
| * @return {?} |
| */ |
| function () { |
| return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate); |
| }; |
| /** Focuses the active cell after the microtask queue is empty. */ |
| /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| MatMultiYearView.prototype._focusActiveCell = /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| function () { |
| this._matCalendarBody._focusActiveCell(); |
| }; |
| /** Creates an MatCalendarCell for the given year. */ |
| /** |
| * Creates an MatCalendarCell for the given year. |
| * @private |
| * @param {?} year |
| * @return {?} |
| */ |
| MatMultiYearView.prototype._createCellForYear = /** |
| * Creates an MatCalendarCell for the given year. |
| * @private |
| * @param {?} year |
| * @return {?} |
| */ |
| function (year) { |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Whether the given year is enabled. |
| * @private |
| * @param {?} year |
| * @return {?} |
| */ |
| MatMultiYearView.prototype._shouldEnableYear = /** |
| * Whether the given year is enabled. |
| * @private |
| * @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; |
| } |
| /** @type {?} */ |
| var firstOfYear = this._dateAdapter.createDate(year, 0, 1); |
| // If any date in the year is enabled count the year as enabled. |
| for (var 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. |
| * @returns The given object if it is both a date instance and valid, otherwise null. |
| */ |
| /** |
| * @private |
| * @param {?} obj The object to check. |
| * @return {?} The given object if it is both a date instance and valid, otherwise null. |
| */ |
| MatMultiYearView.prototype._getValidDateOrNull = /** |
| * @private |
| * @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. */ |
| /** |
| * Determines whether the user has the RTL layout direction. |
| * @private |
| * @return {?} |
| */ |
| MatMultiYearView.prototype._isRtl = /** |
| * Determines whether the user has the RTL layout direction. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this._dir && this._dir.value === 'rtl'; |
| }; |
| MatMultiYearView.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-multi-year-view', |
| template: "<table class=\"mat-calendar-table\" role=\"presentation\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body [rows]=\"_years\" [todayValue]=\"_todayYear\" [selectedValue]=\"_selectedYear\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_getActiveCell()\" (selectedValueChange)=\"_yearSelected($event)\" (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody></table>", |
| exportAs: 'matMultiYearView', |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatMultiYearView.ctorParameters = function () { return [ |
| { type: core.ChangeDetectorRef }, |
| { type: DateAdapter, decorators: [{ type: core.Optional }] }, |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] } |
| ]; }; |
| 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 }], |
| yearSelected: [{ type: core.Output }], |
| activeDateChange: [{ type: core.Output }], |
| _matCalendarBody: [{ type: core.ViewChild, args: [MatCalendarBody, { static: false },] }] |
| }; |
| return MatMultiYearView; |
| }()); |
| /** |
| * @template D |
| * @param {?} dateAdapter |
| * @param {?} date1 |
| * @param {?} date2 |
| * @param {?} minDate |
| * @param {?} maxDate |
| * @return {?} |
| */ |
| function isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) { |
| /** @type {?} */ |
| var year1 = dateAdapter.getYear(date1); |
| /** @type {?} */ |
| var year2 = dateAdapter.getYear(date2); |
| /** @type {?} */ |
| var startingYear = getStartingYear(dateAdapter, minDate, maxDate); |
| return Math.floor((year1 - startingYear) / yearsPerPage) === |
| Math.floor((year2 - startingYear) / yearsPerPage); |
| } |
| /** |
| * When the multi-year view is first opened, the active year will be in view. |
| * So we compute how many years are between the active year and the *slot* where our |
| * "startingYear" will render when paged into view. |
| * @template D |
| * @param {?} dateAdapter |
| * @param {?} activeDate |
| * @param {?} minDate |
| * @param {?} maxDate |
| * @return {?} |
| */ |
| function getActiveOffset(dateAdapter, activeDate, minDate, maxDate) { |
| /** @type {?} */ |
| var activeYear = dateAdapter.getYear(activeDate); |
| return euclideanModulo((activeYear - getStartingYear(dateAdapter, minDate, maxDate)), yearsPerPage); |
| } |
| /** |
| * We pick a "starting" year such that either the maximum year would be at the end |
| * or the minimum year would be at the beginning of a page. |
| * @template D |
| * @param {?} dateAdapter |
| * @param {?} minDate |
| * @param {?} maxDate |
| * @return {?} |
| */ |
| function getStartingYear(dateAdapter, minDate, maxDate) { |
| /** @type {?} */ |
| var startingYear = 0; |
| if (maxDate) { |
| /** @type {?} */ |
| var maxYear = dateAdapter.getYear(maxDate); |
| startingYear = maxYear - yearsPerPage + 1; |
| } |
| else if (minDate) { |
| startingYear = dateAdapter.getYear(minDate); |
| } |
| return startingYear; |
| } |
| /** |
| * Gets remainder that is non-negative, even if first number is negative |
| * @param {?} a |
| * @param {?} b |
| * @return {?} |
| */ |
| function euclideanModulo(a, b) { |
| return (a % b + b) % b; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * An internal component used to display a single year in the datepicker. |
| * \@docs-private |
| * @template D |
| */ |
| var MatYearView = /** @class */ (function () { |
| function MatYearView(_changeDetectorRef, _dateFormats, _dateAdapter, _dir) { |
| this._changeDetectorRef = _changeDetectorRef; |
| this._dateFormats = _dateFormats; |
| this._dateAdapter = _dateAdapter; |
| this._dir = _dir; |
| /** |
| * Emits when a new month is selected. |
| */ |
| this.selectedChange = new core.EventEmitter(); |
| /** |
| * Emits the selected month. This doesn't imply a change on the selected date |
| */ |
| this.monthSelected = new core.EventEmitter(); |
| /** |
| * Emits when any date is activated. |
| */ |
| this.activeDateChange = 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", { |
| /** The date to display in this year view (everything other than the year is ignored). */ |
| 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) { |
| /** @type {?} */ |
| var oldActiveDate = this._activeDate; |
| /** @type {?} */ |
| var validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today(); |
| this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate); |
| if (this._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) { |
| this._init(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatYearView.prototype, "selected", { |
| /** The currently selected date. */ |
| 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", { |
| /** The minimum selectable date. */ |
| 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", { |
| /** The maximum selectable date. */ |
| 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) { |
| /** @type {?} */ |
| var normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1); |
| this.monthSelected.emit(normalizedDate); |
| /** @type {?} */ |
| var daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate); |
| this.selectedChange.emit(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth))); |
| }; |
| /** Handles keydown events on the calendar body when calendar is in year view. */ |
| /** |
| * Handles keydown events on the calendar body when calendar is in year view. |
| * @param {?} event |
| * @return {?} |
| */ |
| MatYearView.prototype._handleCalendarBodyKeydown = /** |
| * Handles keydown events on the calendar body when calendar is in year view. |
| * @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. |
| // 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. |
| /** @type {?} */ |
| var oldActiveDate = this._activeDate; |
| /** @type {?} */ |
| var 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: |
| case keycodes.SPACE: |
| this._monthSelected(this._dateAdapter.getMonth(this._activeDate)); |
| break; |
| default: |
| // Don't prevent default or focus active cell on keys that we don't explicitly handle. |
| return; |
| } |
| if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) { |
| this.activeDateChange.emit(this.activeDate); |
| } |
| this._focusActiveCell(); |
| // Prevent unexpected default actions such as form submission. |
| event.preventDefault(); |
| }; |
| /** 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); |
| /** @type {?} */ |
| var 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((/** |
| * @param {?} row |
| * @return {?} |
| */ |
| function (row) { return row.map((/** |
| * @param {?} month |
| * @return {?} |
| */ |
| function (month) { return _this._createCellForMonth(month, monthNames[month]); })); })); |
| this._changeDetectorRef.markForCheck(); |
| }; |
| /** Focuses the active cell after the microtask queue is empty. */ |
| /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| MatYearView.prototype._focusActiveCell = /** |
| * Focuses the active cell after the microtask queue is empty. |
| * @return {?} |
| */ |
| function () { |
| this._matCalendarBody._focusActiveCell(); |
| }; |
| /** |
| * Gets the month in this year that the given Date falls on. |
| * Returns null if the given Date is in another year. |
| */ |
| /** |
| * Gets the month in this year that the given Date falls on. |
| * Returns null if the given Date is in another year. |
| * @private |
| * @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. |
| * @private |
| * @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. */ |
| /** |
| * Creates an MatCalendarCell for the given month. |
| * @private |
| * @param {?} month |
| * @param {?} monthName |
| * @return {?} |
| */ |
| MatYearView.prototype._createCellForMonth = /** |
| * Creates an MatCalendarCell for the given month. |
| * @private |
| * @param {?} month |
| * @param {?} monthName |
| * @return {?} |
| */ |
| function (month, monthName) { |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Whether the given month is enabled. |
| * @private |
| * @param {?} month |
| * @return {?} |
| */ |
| MatYearView.prototype._shouldEnableMonth = /** |
| * Whether the given month is enabled. |
| * @private |
| * @param {?} month |
| * @return {?} |
| */ |
| function (month) { |
| /** @type {?} */ |
| var 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; |
| } |
| /** @type {?} */ |
| var firstOfMonth = this._dateAdapter.createDate(activeYear, month, 1); |
| // If any date in the month is enabled count the month as enabled. |
| for (var 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 |
| */ |
| /** |
| * Tests whether the combination month/year is after this.maxDate, considering |
| * just the month and year of this.maxDate |
| * @private |
| * @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 |
| * @private |
| * @param {?} year |
| * @param {?} month |
| * @return {?} |
| */ |
| function (year, month) { |
| if (this.maxDate) { |
| /** @type {?} */ |
| var maxYear = this._dateAdapter.getYear(this.maxDate); |
| /** @type {?} */ |
| var 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 |
| */ |
| /** |
| * Tests whether the combination month/year is before this.minDate, considering |
| * just the month and year of this.minDate |
| * @private |
| * @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 |
| * @private |
| * @param {?} year |
| * @param {?} month |
| * @return {?} |
| */ |
| function (year, month) { |
| if (this.minDate) { |
| /** @type {?} */ |
| var minYear = this._dateAdapter.getYear(this.minDate); |
| /** @type {?} */ |
| var minMonth = this._dateAdapter.getMonth(this.minDate); |
| return year < minYear || (year === minYear && month < minMonth); |
| } |
| return false; |
| }; |
| /** |
| * @param obj The object to check. |
| * @returns The given object if it is both a date instance and valid, otherwise null. |
| */ |
| /** |
| * @private |
| * @param {?} obj The object to check. |
| * @return {?} The given object if it is both a date instance and valid, otherwise null. |
| */ |
| MatYearView.prototype._getValidDateOrNull = /** |
| * @private |
| * @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. */ |
| /** |
| * Determines whether the user has the RTL layout direction. |
| * @private |
| * @return {?} |
| */ |
| MatYearView.prototype._isRtl = /** |
| * Determines whether the user has the RTL layout direction. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this._dir && this._dir.value === 'rtl'; |
| }; |
| MatYearView.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-year-view', |
| template: "<table class=\"mat-calendar-table\" role=\"presentation\"><thead class=\"mat-calendar-table-header\"><tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr></thead><tbody mat-calendar-body [label]=\"_yearLabel\" [rows]=\"_months\" [todayValue]=\"_todayMonth\" [selectedValue]=\"_selectedMonth\" [labelMinRequiredCells]=\"2\" [numCols]=\"4\" [cellAspectRatio]=\"4 / 7\" [activeCell]=\"_dateAdapter.getMonth(activeDate)\" (selectedValueChange)=\"_monthSelected($event)\" (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody></table>", |
| exportAs: 'matYearView', |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatYearView.ctorParameters = function () { return [ |
| { type: core.ChangeDetectorRef }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] }] }, |
| { type: DateAdapter, decorators: [{ type: core.Optional }] }, |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] } |
| ]; }; |
| 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 }], |
| monthSelected: [{ type: core.Output }], |
| activeDateChange: [{ type: core.Output }], |
| _matCalendarBody: [{ type: core.ViewChild, args: [MatCalendarBody, { static: false },] }] |
| }; |
| return MatYearView; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Default header for MatCalendar |
| * @template D |
| */ |
| var MatCalendarHeader = /** @class */ (function () { |
| function MatCalendarHeader(_intl, calendar, _dateAdapter, _dateFormats, changeDetectorRef) { |
| this._intl = _intl; |
| this.calendar = calendar; |
| this._dateAdapter = _dateAdapter; |
| this._dateFormats = _dateFormats; |
| this.calendar.stateChanges.subscribe((/** |
| * @return {?} |
| */ |
| function () { return changeDetectorRef.markForCheck(); })); |
| } |
| Object.defineProperty(MatCalendarHeader.prototype, "periodButtonText", { |
| /** The label for the current calendar view. */ |
| get: /** |
| * The label for the current calendar view. |
| * @return {?} |
| */ |
| function () { |
| if (this.calendar.currentView == 'month') { |
| return this._dateAdapter |
| .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel) |
| .toLocaleUpperCase(); |
| } |
| if (this.calendar.currentView == 'year') { |
| return this._dateAdapter.getYearName(this.calendar.activeDate); |
| } |
| // The offset from the active year to the "slot" for the starting year is the |
| // *actual* first rendered year in the multi-year view, and the last year is |
| // just yearsPerPage - 1 away. |
| /** @type {?} */ |
| var activeYear = this._dateAdapter.getYear(this.calendar.activeDate); |
| /** @type {?} */ |
| var minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate); |
| /** @type {?} */ |
| var maxYearOfPage = minYearOfPage + yearsPerPage - 1; |
| return minYearOfPage + " \u2013 " + maxYearOfPage; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatCalendarHeader.prototype, "periodButtonLabel", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| return this.calendar.currentView == 'month' ? |
| this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatCalendarHeader.prototype, "prevButtonLabel", { |
| /** The label for the previous button. */ |
| get: /** |
| * The label for the previous button. |
| * @return {?} |
| */ |
| function () { |
| return { |
| 'month': this._intl.prevMonthLabel, |
| 'year': this._intl.prevYearLabel, |
| 'multi-year': this._intl.prevMultiYearLabel |
| }[this.calendar.currentView]; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatCalendarHeader.prototype, "nextButtonLabel", { |
| /** The label for the next button. */ |
| get: /** |
| * The label for the next button. |
| * @return {?} |
| */ |
| function () { |
| return { |
| 'month': this._intl.nextMonthLabel, |
| 'year': this._intl.nextYearLabel, |
| 'multi-year': this._intl.nextMultiYearLabel |
| }[this.calendar.currentView]; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** Handles user clicks on the period label. */ |
| /** |
| * Handles user clicks on the period label. |
| * @return {?} |
| */ |
| MatCalendarHeader.prototype.currentPeriodClicked = /** |
| * Handles user clicks on the period label. |
| * @return {?} |
| */ |
| function () { |
| this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month'; |
| }; |
| /** Handles user clicks on the previous button. */ |
| /** |
| * Handles user clicks on the previous button. |
| * @return {?} |
| */ |
| MatCalendarHeader.prototype.previousClicked = /** |
| * Handles user clicks on the previous button. |
| * @return {?} |
| */ |
| function () { |
| this.calendar.activeDate = this.calendar.currentView == 'month' ? |
| this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) : |
| this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage); |
| }; |
| /** Handles user clicks on the next button. */ |
| /** |
| * Handles user clicks on the next button. |
| * @return {?} |
| */ |
| MatCalendarHeader.prototype.nextClicked = /** |
| * Handles user clicks on the next button. |
| * @return {?} |
| */ |
| function () { |
| this.calendar.activeDate = this.calendar.currentView == 'month' ? |
| this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) : |
| this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage); |
| }; |
| /** Whether the previous period button is enabled. */ |
| /** |
| * Whether the previous period button is enabled. |
| * @return {?} |
| */ |
| MatCalendarHeader.prototype.previousEnabled = /** |
| * Whether the previous period button is enabled. |
| * @return {?} |
| */ |
| function () { |
| if (!this.calendar.minDate) { |
| return true; |
| } |
| return !this.calendar.minDate || |
| !this._isSameView(this.calendar.activeDate, this.calendar.minDate); |
| }; |
| /** Whether the next period button is enabled. */ |
| /** |
| * Whether the next period button is enabled. |
| * @return {?} |
| */ |
| MatCalendarHeader.prototype.nextEnabled = /** |
| * Whether the next period button is enabled. |
| * @return {?} |
| */ |
| function () { |
| return !this.calendar.maxDate || |
| !this._isSameView(this.calendar.activeDate, this.calendar.maxDate); |
| }; |
| /** Whether the two dates represent the same view in the current view mode (month or year). */ |
| /** |
| * Whether the two dates represent the same view in the current view mode (month or year). |
| * @private |
| * @param {?} date1 |
| * @param {?} date2 |
| * @return {?} |
| */ |
| MatCalendarHeader.prototype._isSameView = /** |
| * Whether the two dates represent the same view in the current view mode (month or year). |
| * @private |
| * @param {?} date1 |
| * @param {?} date2 |
| * @return {?} |
| */ |
| function (date1, date2) { |
| if (this.calendar.currentView == 'month') { |
| return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) && |
| this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2); |
| } |
| if (this.calendar.currentView == 'year') { |
| return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2); |
| } |
| // Otherwise we are in 'multi-year' view. |
| return isSameMultiYearView(this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate); |
| }; |
| MatCalendarHeader.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-calendar-header', |
| template: "<div class=\"mat-calendar-header\"><div class=\"mat-calendar-controls\"><button mat-button type=\"button\" class=\"mat-calendar-period-button\" (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\" cdkAriaLive=\"polite\">{{periodButtonText}}<div class=\"mat-calendar-arrow\" [class.mat-calendar-invert]=\"calendar.currentView != 'month'\"></div></button><div class=\"mat-calendar-spacer\"></div><ng-content></ng-content><button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\" [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\" [attr.aria-label]=\"prevButtonLabel\"></button> <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\" [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\" [attr.aria-label]=\"nextButtonLabel\"></button></div></div>", |
| exportAs: 'matCalendarHeader', |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatCalendarHeader.ctorParameters = function () { return [ |
| { type: MatDatepickerIntl }, |
| { type: MatCalendar, decorators: [{ type: core.Inject, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatCalendar; })),] }] }, |
| { type: DateAdapter, decorators: [{ type: core.Optional }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] }] }, |
| { type: core.ChangeDetectorRef } |
| ]; }; |
| return MatCalendarHeader; |
| }()); |
| /** |
| * A calendar that is used as part of the datepicker. |
| * \@docs-private |
| * @template D |
| */ |
| var MatCalendar = /** @class */ (function () { |
| function MatCalendar(_intl, _dateAdapter, _dateFormats, _changeDetectorRef) { |
| var _this = this; |
| this._dateAdapter = _dateAdapter; |
| this._dateFormats = _dateFormats; |
| this._changeDetectorRef = _changeDetectorRef; |
| /** |
| * Used for scheduling that focus should be moved to the active cell on the next tick. |
| * We need to schedule it, rather than do it immediately, because we have to wait |
| * for Angular to re-evaluate the view children. |
| */ |
| this._moveFocusOnNextTick = false; |
| /** |
| * 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 the year chosen in multiyear view. |
| * This doesn't imply a change on the selected date. |
| */ |
| this.yearSelected = new core.EventEmitter(); |
| /** |
| * Emits the month chosen in year view. |
| * This doesn't imply a change on the selected date. |
| */ |
| this.monthSelected = new core.EventEmitter(); |
| /** |
| * Emits when any date is selected. |
| */ |
| this._userSelection = new core.EventEmitter(); |
| /** |
| * Emits whenever there is a state change that the header may need to respond to. |
| */ |
| this.stateChanges = new rxjs.Subject(); |
| if (!this._dateAdapter) { |
| throw createMissingDateImplError('DateAdapter'); |
| } |
| if (!this._dateFormats) { |
| throw createMissingDateImplError('MAT_DATE_FORMATS'); |
| } |
| this._intlChanges = _intl.changes.subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _changeDetectorRef.markForCheck(); |
| _this.stateChanges.next(); |
| })); |
| } |
| Object.defineProperty(MatCalendar.prototype, "startAt", { |
| /** A date representing the period (month or year) to start the calendar in. */ |
| 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", { |
| /** The currently selected date. */ |
| 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", { |
| /** The minimum selectable date. */ |
| 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", { |
| /** The maximum selectable date. */ |
| 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); |
| this.stateChanges.next(); |
| this._changeDetectorRef.markForCheck(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatCalendar.prototype, "currentView", { |
| /** Whether the calendar is in month view. */ |
| get: /** |
| * Whether the calendar is in month view. |
| * @return {?} |
| */ |
| function () { return this._currentView; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._currentView = value; |
| this._moveFocusOnNextTick = true; |
| this._changeDetectorRef.markForCheck(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatCalendar.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._calendarHeaderPortal = new portal.ComponentPortal(this.headerComponent || MatCalendarHeader); |
| this.activeDate = this.startAt || this._dateAdapter.today(); |
| // Assign to the private property since we don't want to move focus on init. |
| this._currentView = this.startView; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatCalendar.prototype.ngAfterViewChecked = /** |
| * @return {?} |
| */ |
| function () { |
| if (this._moveFocusOnNextTick) { |
| this._moveFocusOnNextTick = false; |
| this.focusActiveCell(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatCalendar.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._intlChanges.unsubscribe(); |
| this.stateChanges.complete(); |
| }; |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| MatCalendar.prototype.ngOnChanges = /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { |
| /** @type {?} */ |
| var change = changes['minDate'] || changes['maxDate'] || changes['dateFilter']; |
| if (change && !change.firstChange) { |
| /** @type {?} */ |
| var view = this._getCurrentViewComponent(); |
| if (view) { |
| // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are |
| // passed down to the view via data bindings which won't be up-to-date when we call `_init`. |
| this._changeDetectorRef.detectChanges(); |
| view._init(); |
| } |
| } |
| this.stateChanges.next(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatCalendar.prototype.focusActiveCell = /** |
| * @return {?} |
| */ |
| function () { |
| this._getCurrentViewComponent()._focusActiveCell(); |
| }; |
| /** Updates today's date after an update of the active date */ |
| /** |
| * Updates today's date after an update of the active date |
| * @return {?} |
| */ |
| MatCalendar.prototype.updateTodaysDate = /** |
| * Updates today's date after an update of the active date |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var view = this.currentView == 'month' ? this.monthView : |
| (this.currentView == 'year' ? this.yearView : this.multiYearView); |
| view.ngAfterContentInit(); |
| }; |
| /** 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); |
| } |
| }; |
| /** Handles year selection in the multiyear view. */ |
| /** |
| * Handles year selection in the multiyear view. |
| * @param {?} normalizedYear |
| * @return {?} |
| */ |
| MatCalendar.prototype._yearSelectedInMultiYearView = /** |
| * Handles year selection in the multiyear view. |
| * @param {?} normalizedYear |
| * @return {?} |
| */ |
| function (normalizedYear) { |
| this.yearSelected.emit(normalizedYear); |
| }; |
| /** Handles month selection in the year view. */ |
| /** |
| * Handles month selection in the year view. |
| * @param {?} normalizedMonth |
| * @return {?} |
| */ |
| MatCalendar.prototype._monthSelectedInYearView = /** |
| * Handles month selection in the year view. |
| * @param {?} normalizedMonth |
| * @return {?} |
| */ |
| function (normalizedMonth) { |
| this.monthSelected.emit(normalizedMonth); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatCalendar.prototype._userSelected = /** |
| * @return {?} |
| */ |
| function () { |
| this._userSelection.emit(); |
| }; |
| /** Handles year/month selection in the multi-year/year views. */ |
| /** |
| * Handles year/month selection in the multi-year/year views. |
| * @param {?} date |
| * @param {?} view |
| * @return {?} |
| */ |
| MatCalendar.prototype._goToDateInView = /** |
| * Handles year/month selection in the multi-year/year views. |
| * @param {?} date |
| * @param {?} view |
| * @return {?} |
| */ |
| function (date, view) { |
| this.activeDate = date; |
| this.currentView = view; |
| }; |
| /** |
| * @param obj The object to check. |
| * @returns The given object if it is both a date instance and valid, otherwise null. |
| */ |
| /** |
| * @private |
| * @param {?} obj The object to check. |
| * @return {?} The given object if it is both a date instance and valid, otherwise null. |
| */ |
| MatCalendar.prototype._getValidDateOrNull = /** |
| * @private |
| * @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; |
| }; |
| /** Returns the component instance that corresponds to the current calendar view. */ |
| /** |
| * Returns the component instance that corresponds to the current calendar view. |
| * @private |
| * @return {?} |
| */ |
| MatCalendar.prototype._getCurrentViewComponent = /** |
| * Returns the component instance that corresponds to the current calendar view. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this.monthView || this.yearView || this.multiYearView; |
| }; |
| MatCalendar.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-calendar', |
| template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template><div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\"><mat-month-view *ngSwitchCase=\"'month'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [dateClass]=\"dateClass\" (selectedChange)=\"_dateSelected($event)\" (_userSelection)=\"_userSelected()\"></mat-month-view><mat-year-view *ngSwitchCase=\"'year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (monthSelected)=\"_monthSelectedInYearView($event)\" (selectedChange)=\"_goToDateInView($event, 'month')\"></mat-year-view><mat-multi-year-view *ngSwitchCase=\"'multi-year'\" [(activeDate)]=\"activeDate\" [selected]=\"selected\" [dateFilter]=\"dateFilter\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" (yearSelected)=\"_yearSelectedInMultiYearView($event)\" (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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatCalendar.ctorParameters = function () { return [ |
| { type: MatDatepickerIntl }, |
| { type: DateAdapter, decorators: [{ type: core.Optional }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_DATE_FORMATS,] }] }, |
| { type: core.ChangeDetectorRef } |
| ]; }; |
| MatCalendar.propDecorators = { |
| headerComponent: [{ type: core.Input }], |
| startAt: [{ type: core.Input }], |
| startView: [{ type: core.Input }], |
| selected: [{ type: core.Input }], |
| minDate: [{ type: core.Input }], |
| maxDate: [{ type: core.Input }], |
| dateFilter: [{ type: core.Input }], |
| dateClass: [{ type: core.Input }], |
| selectedChange: [{ type: core.Output }], |
| yearSelected: [{ type: core.Output }], |
| monthSelected: [{ type: core.Output }], |
| _userSelection: [{ type: core.Output }], |
| monthView: [{ type: core.ViewChild, args: [MatMonthView, { static: false },] }], |
| yearView: [{ type: core.ViewChild, args: [MatYearView, { static: false },] }], |
| multiYearView: [{ type: core.ViewChild, args: [MatMultiYearView, { static: false },] }] |
| }; |
| return MatCalendar; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by the Material datepicker. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matDatepickerAnimations = { |
| /** |
| * Transforms the height of the datepicker's calendar. |
| */ |
| transformPanel: animations$1.trigger('transformPanel', [ |
| animations$1.state('void', animations$1.style({ |
| opacity: 0, |
| transform: 'scale(1, 0.8)' |
| })), |
| animations$1.transition('void => enter', animations$1.animate('120ms cubic-bezier(0, 0, 0.2, 1)', animations$1.style({ |
| opacity: 1, |
| transform: 'scale(1, 1)' |
| }))), |
| animations$1.transition('* => void', animations$1.animate('100ms linear', animations$1.style({ opacity: 0 }))) |
| ]), |
| /** |
| * Fades in the content of the calendar. |
| */ |
| fadeInCalendar: animations$1.trigger('fadeInCalendar', [ |
| animations$1.state('void', animations$1.style({ opacity: 0 })), |
| animations$1.state('enter', animations$1.style({ opacity: 1 })), |
| // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we |
| // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy. |
| animations$1.transition('void => *', animations$1.animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')) |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Used to generate a unique ID for each datepicker instance. |
| * @type {?} |
| */ |
| var datepickerUid = 0; |
| /** |
| * Injection token that determines the scroll handling while the calendar is open. |
| * @type {?} |
| */ |
| var MAT_DATEPICKER_SCROLL_STRATEGY = new core.InjectionToken('mat-datepicker-scroll-strategy'); |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay$$1) { |
| return (/** |
| * @return {?} |
| */ |
| function () { return overlay$$1.scrollStrategies.reposition(); }); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = { |
| provide: MAT_DATEPICKER_SCROLL_STRATEGY, |
| deps: [overlay.Overlay], |
| useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, |
| }; |
| // Boilerplate for applying mixins to MatDatepickerContent. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatDatepickerContent. |
| /** |
| * \@docs-private |
| */ |
| MatDatepickerContentBase = /** @class */ (function () { |
| function MatDatepickerContentBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatDatepickerContentBase; |
| }()); |
| /** @type {?} */ |
| var _MatDatepickerContentMixinBase = mixinColor(MatDatepickerContentBase); |
| /** |
| * 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 |
| * @template D |
| */ |
| var MatDatepickerContent = /** @class */ (function (_super) { |
| __extends(MatDatepickerContent, _super); |
| function MatDatepickerContent(elementRef) { |
| return _super.call(this, elementRef) || this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatDatepickerContent.prototype.ngAfterViewInit = /** |
| * @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\" [headerComponent]=\"datepicker.calendarHeaderComponent\" [selected]=\"datepicker._selected\" [dateClass]=\"datepicker.dateClass\" [@fadeInCalendar]=\"'enter'\" (selectedChange)=\"datepicker.select($event)\" (yearSelected)=\"datepicker._selectYear($event)\" (monthSelected)=\"datepicker._selectMonth($event)\" (_userSelection)=\"datepicker.close()\"></mat-calendar>", |
| styles: [".mat-datepicker-content{display:block;border-radius:4px}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content-touch{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', |
| '[@transformPanel]': '"enter"', |
| '[class.mat-datepicker-content-touch]': 'datepicker.touchUi', |
| }, |
| animations: [ |
| matDatepickerAnimations.transformPanel, |
| matDatepickerAnimations.fadeInCalendar, |
| ], |
| exportAs: 'matDatepickerContent', |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| inputs: ['color'], |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatDatepickerContent.ctorParameters = function () { return [ |
| { type: core.ElementRef } |
| ]; }; |
| MatDatepickerContent.propDecorators = { |
| _calendar: [{ type: core.ViewChild, args: [MatCalendar, { static: false },] }] |
| }; |
| return MatDatepickerContent; |
| }(_MatDatepickerContentMixinBase)); |
| // TODO(mmalerba): We use a component instead of a directive here so the user can use implicit |
| // template reference variables (e.g. #d vs #d="matDatepicker"). We can change this to a directive |
| // if angular adds support for `exportAs: '$implicit'` on directives. |
| /** |
| * Component responsible for managing the datepicker popup/dialog. |
| * @template D |
| */ |
| var MatDatepicker = /** @class */ (function () { |
| function MatDatepicker(_dialog, _overlay, _ngZone, _viewContainerRef, scrollStrategy, _dateAdapter, _dir, _document) { |
| this._dialog = _dialog; |
| this._overlay = _overlay; |
| this._ngZone = _ngZone; |
| this._viewContainerRef = _viewContainerRef; |
| this._dateAdapter = _dateAdapter; |
| this._dir = _dir; |
| this._document = _document; |
| /** |
| * The view that the calendar should start in. |
| */ |
| this.startView = 'month'; |
| this._touchUi = false; |
| /** |
| * Emits selected year in multiyear view. |
| * This doesn't imply a change on the selected date. |
| */ |
| this.yearSelected = new core.EventEmitter(); |
| /** |
| * Emits selected month in year view. |
| * This doesn't imply a change on the selected date. |
| */ |
| this.monthSelected = 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; |
| /** |
| * Subscription to value changes in the associated input element. |
| */ |
| this._inputSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * Emits when the datepicker is disabled. |
| */ |
| this._disabledChange = new rxjs.Subject(); |
| /** |
| * Emits new selected date when selected date changes. |
| */ |
| this._selectedChanged = new rxjs.Subject(); |
| if (!this._dateAdapter) { |
| throw createMissingDateImplError('DateAdapter'); |
| } |
| this._scrollStrategy = scrollStrategy; |
| } |
| Object.defineProperty(MatDatepicker.prototype, "startAt", { |
| /** The date to open the calendar to initially. */ |
| 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, "color", { |
| /** Color palette to use on the datepicker's calendar. */ |
| get: /** |
| * Color palette to use on the datepicker's calendar. |
| * @return {?} |
| */ |
| function () { |
| return this._color || |
| (this._datepickerInput ? this._datepickerInput._getThemePalette() : undefined); |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._color = value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDatepicker.prototype, "touchUi", { |
| /** |
| * 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. |
| */ |
| 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", { |
| /** Whether the datepicker pop-up should be 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) { |
| /** @type {?} */ |
| var newValue = coercion.coerceBooleanProperty(value); |
| if (newValue !== this._disabled) { |
| this._disabled = newValue; |
| this._disabledChange.next(newValue); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDatepicker.prototype, "opened", { |
| /** Whether the calendar is open. */ |
| 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(); |
| this._popupComponentRef = null; |
| } |
| }; |
| /** Selects the given date */ |
| /** |
| * Selects the given date |
| * @param {?} date |
| * @return {?} |
| */ |
| MatDatepicker.prototype.select = /** |
| * Selects the given date |
| * @param {?} date |
| * @return {?} |
| */ |
| function (date) { |
| /** @type {?} */ |
| var oldValue = this._selected; |
| this._selected = date; |
| if (!this._dateAdapter.sameDate(oldValue, this._selected)) { |
| this._selectedChanged.next(date); |
| } |
| }; |
| /** Emits the selected year in multiyear view */ |
| /** |
| * Emits the selected year in multiyear view |
| * @param {?} normalizedYear |
| * @return {?} |
| */ |
| MatDatepicker.prototype._selectYear = /** |
| * Emits the selected year in multiyear view |
| * @param {?} normalizedYear |
| * @return {?} |
| */ |
| function (normalizedYear) { |
| this.yearSelected.emit(normalizedYear); |
| }; |
| /** Emits selected month in year view */ |
| /** |
| * Emits selected month in year view |
| * @param {?} normalizedMonth |
| * @return {?} |
| */ |
| MatDatepicker.prototype._selectMonth = /** |
| * Emits selected month in year view |
| * @param {?} normalizedMonth |
| * @return {?} |
| */ |
| function (normalizedMonth) { |
| this.monthSelected.emit(normalizedMonth); |
| }; |
| /** |
| * 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((/** |
| * @param {?} value |
| * @return {?} |
| */ |
| 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(); |
| } |
| /** @type {?} */ |
| var completeClose = (/** |
| * @return {?} |
| */ |
| 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. */ |
| /** |
| * Open the calendar as a dialog. |
| * @private |
| * @return {?} |
| */ |
| MatDatepicker.prototype._openAsDialog = /** |
| * Open the calendar as a dialog. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| // Usually this would be handled by `open` which ensures that we can only have one overlay |
| // open at a time, however since we reset the variables in async handlers some overlays |
| // may slip through if the user opens and closes multiple times in quick succession (e.g. |
| // by holding down the enter key). |
| if (this._dialogRef) { |
| this._dialogRef.close(); |
| } |
| this._dialogRef = this._dialog.open(MatDatepickerContent, { |
| direction: this._dir ? this._dir.value : 'ltr', |
| viewContainerRef: this._viewContainerRef, |
| panelClass: 'mat-datepicker-dialog', |
| }); |
| this._dialogRef.afterClosed().subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this.close(); })); |
| this._dialogRef.componentInstance.datepicker = this; |
| this._setColor(); |
| }; |
| /** Open the calendar as a popup. */ |
| /** |
| * Open the calendar as a popup. |
| * @private |
| * @return {?} |
| */ |
| MatDatepicker.prototype._openAsPopup = /** |
| * Open the calendar as a popup. |
| * @private |
| * @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()) { |
| this._popupComponentRef = this._popupRef.attach(this._calendarPortal); |
| this._popupComponentRef.instance.datepicker = this; |
| this._setColor(); |
| // Update the position once the calendar has rendered. |
| this._ngZone.onStable.asObservable().pipe(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._popupRef.updatePosition(); |
| })); |
| } |
| }; |
| /** Create the popup. */ |
| /** |
| * Create the popup. |
| * @private |
| * @return {?} |
| */ |
| MatDatepicker.prototype._createPopup = /** |
| * Create the popup. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| /** @type {?} */ |
| var overlayConfig = new overlay.OverlayConfig({ |
| positionStrategy: this._createPopupPositionStrategy(), |
| hasBackdrop: true, |
| backdropClass: 'mat-overlay-transparent-backdrop', |
| direction: this._dir, |
| scrollStrategy: this._scrollStrategy(), |
| panelClass: 'mat-datepicker-popup', |
| }); |
| this._popupRef = this._overlay.create(overlayConfig); |
| this._popupRef.overlayElement.setAttribute('role', 'dialog'); |
| rxjs.merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.keydownEvents().pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| // Closing on alt + up is only valid when there's an input associated with the datepicker. |
| return event.keyCode === keycodes.ESCAPE || |
| (_this._datepickerInput && event.altKey && event.keyCode === keycodes.UP_ARROW); |
| })))).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (event) { |
| event.preventDefault(); |
| } |
| _this.close(); |
| })); |
| }; |
| /** Create the popup PositionStrategy. */ |
| /** |
| * Create the popup PositionStrategy. |
| * @private |
| * @return {?} |
| */ |
| MatDatepicker.prototype._createPopupPositionStrategy = /** |
| * Create the popup PositionStrategy. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this._overlay.position() |
| .flexibleConnectedTo(this._datepickerInput.getConnectedOverlayOrigin()) |
| .withTransformOriginOn('.mat-datepicker-content') |
| .withFlexibleDimensions(false) |
| .withViewportMargin(8) |
| .withLockedPosition() |
| .withPositions([ |
| { |
| originX: 'start', |
| originY: 'bottom', |
| overlayX: 'start', |
| overlayY: 'top' |
| }, |
| { |
| originX: 'start', |
| originY: 'top', |
| overlayX: 'start', |
| overlayY: 'bottom' |
| }, |
| { |
| originX: 'end', |
| originY: 'bottom', |
| overlayX: 'end', |
| overlayY: 'top' |
| }, |
| { |
| originX: 'end', |
| originY: 'top', |
| overlayX: 'end', |
| overlayY: 'bottom' |
| } |
| ]); |
| }; |
| /** |
| * @param obj The object to check. |
| * @returns The given object if it is both a date instance and valid, otherwise null. |
| */ |
| /** |
| * @private |
| * @param {?} obj The object to check. |
| * @return {?} The given object if it is both a date instance and valid, otherwise null. |
| */ |
| MatDatepicker.prototype._getValidDateOrNull = /** |
| * @private |
| * @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; |
| }; |
| /** Passes the current theme color along to the calendar overlay. */ |
| /** |
| * Passes the current theme color along to the calendar overlay. |
| * @private |
| * @return {?} |
| */ |
| MatDatepicker.prototype._setColor = /** |
| * Passes the current theme color along to the calendar overlay. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var color = this.color; |
| if (this._popupComponentRef) { |
| this._popupComponentRef.instance.color = color; |
| } |
| if (this._dialogRef) { |
| this._dialogRef.componentInstance.color = color; |
| } |
| }; |
| MatDatepicker.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-datepicker', |
| template: '', |
| exportAs: 'matDatepicker', |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @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 = { |
| calendarHeaderComponent: [{ type: core.Input }], |
| startAt: [{ type: core.Input }], |
| startView: [{ type: core.Input }], |
| color: [{ type: core.Input }], |
| touchUi: [{ type: core.Input }], |
| disabled: [{ type: core.Input }], |
| yearSelected: [{ type: core.Output }], |
| monthSelected: [{ type: core.Output }], |
| panelClass: [{ type: core.Input }], |
| dateClass: [{ 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_DATEPICKER_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatDatepickerInput; })), |
| multi: true |
| }; |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_DATEPICKER_VALIDATORS = { |
| provide: forms.NG_VALIDATORS, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| 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. |
| * @template D |
| */ |
| var /** |
| * 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. |
| * @template D |
| */ |
| MatDatepickerInputEvent = /** @class */ (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. |
| * @template D |
| */ |
| var MatDatepickerInput = /** @class */ (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 = (/** |
| * @return {?} |
| */ |
| function () { }); |
| this._cvaOnChange = (/** |
| * @return {?} |
| */ |
| function () { }); |
| this._validatorOnChange = (/** |
| * @return {?} |
| */ |
| function () { }); |
| this._datepickerSubscription = rxjs.Subscription.EMPTY; |
| this._localeSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * The form control validator for whether the input parses. |
| */ |
| this._parseValidator = (/** |
| * @return {?} |
| */ |
| function () { |
| return _this._lastValueValid ? |
| null : { 'matDatepickerParse': { 'text': _this._elementRef.nativeElement.value } }; |
| }); |
| /** |
| * The form control validator for the min date. |
| */ |
| this._minValidator = (/** |
| * @param {?} control |
| * @return {?} |
| */ |
| function (control) { |
| /** @type {?} */ |
| var 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 = (/** |
| * @param {?} control |
| * @return {?} |
| */ |
| function (control) { |
| /** @type {?} */ |
| var 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 = (/** |
| * @param {?} control |
| * @return {?} |
| */ |
| function (control) { |
| /** @type {?} */ |
| var 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((/** |
| * @return {?} |
| */ |
| function () { |
| _this.value = _this.value; |
| })); |
| } |
| Object.defineProperty(MatDatepickerInput.prototype, "matDatepicker", { |
| /** The datepicker that this input is associated with. */ |
| set: /** |
| * The datepicker that this input is associated with. |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| var _this = this; |
| if (!value) { |
| return; |
| } |
| this._datepicker = value; |
| this._datepicker._registerInput(this); |
| this._datepickerSubscription.unsubscribe(); |
| this._datepickerSubscription = this._datepicker._selectedChanged.subscribe((/** |
| * @param {?} selected |
| * @return {?} |
| */ |
| 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)); |
| })); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDatepickerInput.prototype, "matDatepickerFilter", { |
| /** Function that can be used to filter out dates within the datepicker. */ |
| 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", { |
| /** The value of the input. */ |
| 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); |
| /** @type {?} */ |
| var oldDate = this.value; |
| this._value = value; |
| this._formatValue(value); |
| if (!this._dateAdapter.sameDate(oldDate, value)) { |
| this._valueChange.emit(value); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDatepickerInput.prototype, "min", { |
| /** The minimum valid date. */ |
| 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", { |
| /** The maximum valid date. */ |
| 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", { |
| /** Whether the datepicker-input is disabled. */ |
| get: /** |
| * Whether the datepicker-input is disabled. |
| * @return {?} |
| */ |
| function () { return !!this._disabled; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var newValue = coercion.coerceBooleanProperty(value); |
| /** @type {?} */ |
| var element = this._elementRef.nativeElement; |
| if (this._disabled !== newValue) { |
| this._disabled = newValue; |
| this._disabledChange.emit(newValue); |
| } |
| // We need to null check the `blur` method, because it's undefined during SSR. |
| if (newValue && element.blur) { |
| // 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. |
| element.blur(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @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; |
| }; |
| /** |
| * @deprecated |
| * @breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead |
| */ |
| /** |
| * @deprecated |
| * \@breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype.getPopupConnectionElementRef = /** |
| * @deprecated |
| * \@breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead |
| * @return {?} |
| */ |
| function () { |
| return this.getConnectedOverlayOrigin(); |
| }; |
| /** |
| * 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.getConnectedOverlayOrigin = /** |
| * 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.getConnectedOverlayOrigin() : this._elementRef; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype.writeValue = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this.value = value; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype.registerOnChange = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._cvaOnChange = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype.registerOnTouched = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| this._onTouched = fn; |
| }; |
| // Implemented as part of ControlValueAccessor. |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype.setDisabledState = |
| // Implemented as part of ControlValueAccessor. |
| /** |
| * @param {?} isDisabled |
| * @return {?} |
| */ |
| function (isDisabled) { |
| this.disabled = isDisabled; |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype._onKeydown = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var isAltDownArrow = event.altKey && event.keyCode === keycodes.DOWN_ARROW; |
| if (this._datepicker && isAltDownArrow && !this._elementRef.nativeElement.readOnly) { |
| this._datepicker.open(); |
| event.preventDefault(); |
| } |
| }; |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype._onInput = /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput); |
| this._lastValueValid = !date || this._dateAdapter.isValid(date); |
| date = this._getValidDateOrNull(date); |
| if (!this._dateAdapter.sameDate(date, this._value)) { |
| this._value = date; |
| this._cvaOnChange(date); |
| this._valueChange.emit(date); |
| this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement)); |
| } |
| else { |
| this._validatorOnChange(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype._onChange = /** |
| * @return {?} |
| */ |
| function () { |
| this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement)); |
| }; |
| /** Returns the palette used by the input's form field, if any. */ |
| /** |
| * Returns the palette used by the input's form field, if any. |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype._getThemePalette = /** |
| * Returns the palette used by the input's form field, if any. |
| * @return {?} |
| */ |
| function () { |
| return this._formField ? this._formField.color : undefined; |
| }; |
| /** Handles blur events on the input. */ |
| /** |
| * Handles blur events on the input. |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype._onBlur = /** |
| * Handles blur events on the input. |
| * @return {?} |
| */ |
| function () { |
| // Reformat the input only if we have a valid value. |
| if (this.value) { |
| this._formatValue(this.value); |
| } |
| this._onTouched(); |
| }; |
| /** Formats a value and sets it on the input element. */ |
| /** |
| * Formats a value and sets it on the input element. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| MatDatepickerInput.prototype._formatValue = /** |
| * Formats a value and sets it on the input element. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._elementRef.nativeElement.value = |
| value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : ''; |
| }; |
| /** |
| * @param obj The object to check. |
| * @returns The given object if it is both a date instance and valid, otherwise null. |
| */ |
| /** |
| * @private |
| * @param {?} obj The object to check. |
| * @return {?} The given object if it is both a date instance and valid, otherwise null. |
| */ |
| MatDatepickerInput.prototype._getValidDateOrNull = /** |
| * @private |
| * @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: { |
| 'aria-haspopup': 'dialog', |
| '[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)': '_onBlur()', |
| '(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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Can be used to override the icon of a `matDatepickerToggle`. |
| */ |
| var MatDatepickerToggleIcon = /** @class */ (function () { |
| function MatDatepickerToggleIcon() { |
| } |
| MatDatepickerToggleIcon.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matDatepickerToggleIcon]' |
| },] }, |
| ]; |
| return MatDatepickerToggleIcon; |
| }()); |
| /** |
| * @template D |
| */ |
| var MatDatepickerToggle = /** @class */ (function () { |
| function MatDatepickerToggle(_intl, _changeDetectorRef, defaultTabIndex) { |
| this._intl = _intl; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._stateChanges = rxjs.Subscription.EMPTY; |
| /** @type {?} */ |
| var parsedTabIndex = Number(defaultTabIndex); |
| this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null; |
| } |
| Object.defineProperty(MatDatepickerToggle.prototype, "disabled", { |
| /** Whether the toggle button is disabled. */ |
| get: /** |
| * Whether the toggle button is disabled. |
| * @return {?} |
| */ |
| function () { |
| if (this._disabled === undefined && this.datepicker) { |
| return this.datepicker.disabled; |
| } |
| return !!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(); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatDatepickerToggle.prototype._watchStateChanges = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| /** @type {?} */ |
| var datepickerDisabled = this.datepicker ? this.datepicker._disabledChange : rxjs.of(); |
| /** @type {?} */ |
| var inputDisabled = this.datepicker && this.datepicker._datepickerInput ? |
| this.datepicker._datepickerInput._disabledChange : rxjs.of(); |
| /** @type {?} */ |
| var datepickerToggled = this.datepicker ? |
| rxjs.merge(this.datepicker.openedStream, this.datepicker.closedStream) : |
| rxjs.of(); |
| this._stateChanges.unsubscribe(); |
| this._stateChanges = rxjs.merge(this._intl.changes, datepickerDisabled, inputDisabled, datepickerToggled).subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._changeDetectorRef.markForCheck(); })); |
| }; |
| MatDatepickerToggle.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-datepicker-toggle', |
| template: "<button #button mat-icon-button type=\"button\" aria-haspopup=\"dialog\" [attr.aria-label]=\"_intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\" [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" (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=\"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-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon{margin:auto}"], |
| host: { |
| 'class': 'mat-datepicker-toggle', |
| // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the |
| // consumer may have provided, while still being able to receive focus. |
| '[attr.tabindex]': '-1', |
| '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened', |
| '[class.mat-accent]': 'datepicker && datepicker.color === "accent"', |
| '[class.mat-warn]': 'datepicker && datepicker.color === "warn"', |
| '(focus)': '_button.focus()', |
| }, |
| exportAs: 'matDatepickerToggle', |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatDatepickerToggle.ctorParameters = function () { return [ |
| { type: MatDatepickerIntl }, |
| { type: core.ChangeDetectorRef }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] } |
| ]; }; |
| MatDatepickerToggle.propDecorators = { |
| datepicker: [{ type: core.Input, args: ['for',] }], |
| tabIndex: [{ type: core.Input }], |
| disabled: [{ type: core.Input }], |
| disableRipple: [{ type: core.Input }], |
| _customIcon: [{ type: core.ContentChild, args: [MatDatepickerToggleIcon, { static: false },] }], |
| _button: [{ type: core.ViewChild, args: ['button', { static: false },] }] |
| }; |
| return MatDatepickerToggle; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatDatepickerModule = /** @class */ (function () { |
| function MatDatepickerModule() { |
| } |
| MatDatepickerModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| MatButtonModule, |
| MatDialogModule, |
| overlay.OverlayModule, |
| a11y.A11yModule, |
| portal.PortalModule, |
| ], |
| exports: [ |
| MatCalendar, |
| MatCalendarBody, |
| MatDatepicker, |
| MatDatepickerContent, |
| MatDatepickerInput, |
| MatDatepickerToggle, |
| MatDatepickerToggleIcon, |
| MatMonthView, |
| MatYearView, |
| MatMultiYearView, |
| MatCalendarHeader, |
| ], |
| declarations: [ |
| MatCalendar, |
| MatCalendarBody, |
| MatDatepicker, |
| MatDatepickerContent, |
| MatDatepickerInput, |
| MatDatepickerToggle, |
| MatDatepickerToggleIcon, |
| MatMonthView, |
| MatYearView, |
| MatMultiYearView, |
| MatCalendarHeader, |
| ], |
| providers: [ |
| MatDatepickerIntl, |
| MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, |
| ], |
| entryComponents: [ |
| MatDatepickerContent, |
| MatCalendarHeader, |
| ] |
| },] }, |
| ]; |
| return MatDatepickerModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatDivider = /** @class */ (function () { |
| function MatDivider() { |
| this._vertical = false; |
| this._inset = false; |
| } |
| Object.defineProperty(MatDivider.prototype, "vertical", { |
| /** Whether the divider is vertically aligned. */ |
| 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", { |
| /** Whether the divider is an inset divider. */ |
| 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-horizontal]': '!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, |
| },] }, |
| ]; |
| MatDivider.propDecorators = { |
| vertical: [{ type: core.Input }], |
| inset: [{ type: core.Input }] |
| }; |
| return MatDivider; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatDividerModule = /** @class */ (function () { |
| function MatDividerModule() { |
| } |
| MatDividerModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule, common.CommonModule], |
| exports: [MatDivider, MatCommonModule], |
| declarations: [MatDivider], |
| },] }, |
| ]; |
| return MatDividerModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Token used to provide a `MatAccordion` to `MatExpansionPanel`. |
| * Used primarily to avoid circular imports between `MatAccordion` and `MatExpansionPanel`. |
| * @type {?} |
| */ |
| var MAT_ACCORDION = new core.InjectionToken('MAT_ACCORDION'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Time and timing curve for expansion panel animations. |
| * @type {?} |
| */ |
| var EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)'; |
| /** |
| * Animations used by the Material expansion panel. |
| * |
| * A bug in angular animation's `state` when ViewContainers are moved using ViewContainerRef.move() |
| * causes the animation state of moved components to become `void` upon exit, and not update again |
| * upon reentry into the DOM. This can lead a to situation for the expansion panel where the state |
| * of the panel is `expanded` or `collapsed` but the animation state is `void`. |
| * |
| * To correctly handle animating to the next state, we animate between `void` and `collapsed` which |
| * are defined to have the same styles. Since angular animates from the current styles to the |
| * destination state's style definition, in situations where we are moving from `void`'s styles to |
| * `collapsed` this acts a noop since no style values change. |
| * |
| * In the case where angular's animation state is out of sync with the expansion panel's state, the |
| * expansion panel being `expanded` and angular animations being `void`, the animation from the |
| * `expanded`'s effective styles (though in a `void` animation state) to the collapsed state will |
| * occur as expected. |
| * |
| * Angular Bug: https://github.com/angular/angular/issues/18847 |
| * |
| * \@docs-private |
| * @type {?} |
| */ |
| var matExpansionAnimations = { |
| /** |
| * Animation that rotates the indicator arrow. |
| */ |
| indicatorRotate: animations$1.trigger('indicatorRotate', [ |
| animations$1.state('collapsed, void', animations$1.style({ transform: 'rotate(0deg)' })), |
| animations$1.state('expanded', animations$1.style({ transform: 'rotate(180deg)' })), |
| animations$1.transition('expanded <=> collapsed, void => collapsed', animations$1.animate(EXPANSION_PANEL_ANIMATION_TIMING)), |
| ]), |
| /** |
| * Animation that expands and collapses the panel header height. |
| */ |
| expansionHeaderHeight: animations$1.trigger('expansionHeight', [ |
| animations$1.state('collapsed, void', animations$1.style({ |
| height: '{{collapsedHeight}}', |
| }), { |
| params: { collapsedHeight: '48px' }, |
| }), |
| animations$1.state('expanded', animations$1.style({ |
| height: '{{expandedHeight}}' |
| }), { |
| params: { expandedHeight: '64px' } |
| }), |
| animations$1.transition('expanded <=> collapsed, void => collapsed', animations$1.group([ |
| animations$1.query('@indicatorRotate', animations$1.animateChild(), { optional: true }), |
| animations$1.animate(EXPANSION_PANEL_ANIMATION_TIMING), |
| ])), |
| ]), |
| /** |
| * Animation that expands and collapses the panel content. |
| */ |
| bodyExpansion: animations$1.trigger('bodyExpansion', [ |
| animations$1.state('collapsed, void', animations$1.style({ height: '0px', visibility: 'hidden' })), |
| animations$1.state('expanded', animations$1.style({ height: '*', visibility: 'visible' })), |
| animations$1.transition('expanded <=> collapsed, void => collapsed', animations$1.animate(EXPANSION_PANEL_ANIMATION_TIMING)), |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Expansion panel content that will be rendered lazily |
| * after the panel is opened for the first time. |
| */ |
| var MatExpansionPanelContent = /** @class */ (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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Counter for generating unique element ids. |
| * @type {?} |
| */ |
| var uniqueId$1 = 0; |
| /** |
| * Injection token that can be used to configure the defalt |
| * options for the expansion panel component. |
| * @type {?} |
| */ |
| var MAT_EXPANSION_PANEL_DEFAULT_OPTIONS = new core.InjectionToken('MAT_EXPANSION_PANEL_DEFAULT_OPTIONS'); |
| var ɵ0$4 = undefined; |
| /** |
| * `<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 MatAccordion directive attached. |
| */ |
| var MatExpansionPanel = /** @class */ (function (_super) { |
| __extends(MatExpansionPanel, _super); |
| function MatExpansionPanel(accordion$$1, _changeDetectorRef, _uniqueSelectionDispatcher, _viewContainerRef, _document, _animationMode, defaultOptions) { |
| var _this = _super.call(this, accordion$$1, _changeDetectorRef, _uniqueSelectionDispatcher) || this; |
| _this._viewContainerRef = _viewContainerRef; |
| _this._animationMode = _animationMode; |
| _this._hideToggle = false; |
| /** |
| * An event emitted after the body's expansion animation happens. |
| */ |
| _this.afterExpand = new core.EventEmitter(); |
| /** |
| * An event emitted after the body's collapse animation happens. |
| */ |
| _this.afterCollapse = new core.EventEmitter(); |
| /** |
| * Stream that emits for changes in `\@Input` properties. |
| */ |
| _this._inputChanges = new rxjs.Subject(); |
| /** |
| * ID for the associated header element. Used for a11y labelling. |
| */ |
| _this._headerId = "mat-expansion-panel-header-" + uniqueId$1++; |
| /** |
| * Stream of body animation done events. |
| */ |
| _this._bodyAnimationDone = new rxjs.Subject(); |
| _this.accordion = accordion$$1; |
| _this._document = _document; |
| // We need a Subject with distinctUntilChanged, because the `done` event |
| // fires twice on some browsers. See https://github.com/angular/angular/issues/24084 |
| _this._bodyAnimationDone.pipe(operators.distinctUntilChanged((/** |
| * @param {?} x |
| * @param {?} y |
| * @return {?} |
| */ |
| function (x, y) { |
| return x.fromState === y.fromState && x.toState === y.toState; |
| }))).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (event.fromState !== 'void') { |
| if (event.toState === 'expanded') { |
| _this.afterExpand.emit(); |
| } |
| else if (event.toState === 'collapsed') { |
| _this.afterCollapse.emit(); |
| } |
| } |
| })); |
| if (defaultOptions) { |
| _this.hideToggle = defaultOptions.hideToggle; |
| } |
| return _this; |
| } |
| Object.defineProperty(MatExpansionPanel.prototype, "hideToggle", { |
| /** Whether the toggle indicator should be hidden. */ |
| get: /** |
| * Whether the toggle indicator should be hidden. |
| * @return {?} |
| */ |
| function () { |
| return this._hideToggle || (this.accordion && this.accordion.hideToggle); |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._hideToggle = coercion.coerceBooleanProperty(value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatExpansionPanel.prototype, "togglePosition", { |
| /** Whether the toggle indicator should be hidden. */ |
| get: /** |
| * Whether the toggle indicator should be hidden. |
| * @return {?} |
| */ |
| function () { |
| return this._togglePosition || (this.accordion && this.accordion.togglePosition); |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._togglePosition = value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** 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) { |
| // We don't need to subscribe to the `stateChanges` of the parent accordion because each time |
| // the [displayMode] input changes, the change detection will also cover the host bindings |
| // of this expansion panel. |
| 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(operators.startWith((/** @type {?} */ (null))), operators.filter((/** |
| * @return {?} |
| */ |
| function () { return _this.expanded && !_this._portal; })), operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| 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._bodyAnimationDone.complete(); |
| this._inputChanges.complete(); |
| }; |
| /** Checks whether the expansion panel's content contains the currently-focused element. */ |
| /** |
| * Checks whether the expansion panel's content contains the currently-focused element. |
| * @return {?} |
| */ |
| MatExpansionPanel.prototype._containsFocus = /** |
| * Checks whether the expansion panel's content contains the currently-focused element. |
| * @return {?} |
| */ |
| function () { |
| if (this._body) { |
| /** @type {?} */ |
| var focusedElement = this._document.activeElement; |
| /** @type {?} */ |
| var bodyElement = this._body.nativeElement; |
| return focusedElement === bodyElement || bodyElement.contains(focusedElement); |
| } |
| return false; |
| }; |
| MatExpansionPanel.decorators = [ |
| { type: core.Component, args: [{styles: [".mat-expansion-panel{box-sizing:content-box;display:block;margin:0;border-radius:4px;overflow:hidden;transition:margin 225ms cubic-bezier(.4,0,.2,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-accordion .mat-expansion-panel:not(.mat-expanded),.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing){border-radius:0}.mat-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:4px;border-top-left-radius:4px}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (-ms-high-contrast:active){.mat-expansion-panel{outline:solid 1px}}.mat-expansion-panel._mat-animation-noopable,.mat-expansion-panel.ng-animate-disabled,.ng-animate-disabled .mat-expansion-panel{transition:none}.mat-expansion-panel-content{display:flex;flex-direction:column;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,.mat-accordion>:first-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{margin-top:0}.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{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)=\"_bodyAnimationDone.next($event)\" [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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| inputs: ['disabled', 'expanded'], |
| outputs: ['opened', 'closed', 'expandedChange'], |
| animations: [matExpansionAnimations.bodyExpansion], |
| providers: [ |
| // Provide MatAccordion as undefined to prevent nested expansion panels from registering |
| // to the same accordion. |
| { provide: MAT_ACCORDION, useValue: ɵ0$4 }, |
| ], |
| host: { |
| 'class': 'mat-expansion-panel', |
| '[class.mat-expanded]': 'expanded', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| '[class.mat-expansion-panel-spacing]': '_hasSpacing()', |
| } |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatExpansionPanel.ctorParameters = function () { return [ |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.SkipSelf }, { type: core.Inject, args: [MAT_ACCORDION,] }] }, |
| { type: core.ChangeDetectorRef }, |
| { type: collections.UniqueSelectionDispatcher }, |
| { type: core.ViewContainerRef }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,] }, { type: core.Optional }] } |
| ]; }; |
| MatExpansionPanel.propDecorators = { |
| hideToggle: [{ type: core.Input }], |
| togglePosition: [{ type: core.Input }], |
| afterExpand: [{ type: core.Output }], |
| afterCollapse: [{ type: core.Output }], |
| _lazyContent: [{ type: core.ContentChild, args: [MatExpansionPanelContent, { static: false },] }], |
| _body: [{ type: core.ViewChild, args: ['body', { static: false },] }] |
| }; |
| return MatExpansionPanel; |
| }(accordion.CdkAccordionItem)); |
| var MatExpansionPanelActionRow = /** @class */ (function () { |
| function MatExpansionPanelActionRow() { |
| } |
| MatExpansionPanelActionRow.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-action-row', |
| host: { |
| class: 'mat-action-row' |
| } |
| },] }, |
| ]; |
| return MatExpansionPanelActionRow; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * `<mat-expansion-panel-header>` |
| * |
| * This component corresponds to the header element of an `<mat-expansion-panel>`. |
| */ |
| var MatExpansionPanelHeader = /** @class */ (function () { |
| function MatExpansionPanelHeader(panel, _element, _focusMonitor, _changeDetectorRef, defaultOptions) { |
| var _this = this; |
| this.panel = panel; |
| this._element = _element; |
| this._focusMonitor = _focusMonitor; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._parentChangeSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * Whether Angular animations in the panel header should be disabled. |
| */ |
| this._animationsDisabled = true; |
| /** @type {?} */ |
| var accordionHideToggleChange = panel.accordion ? |
| panel.accordion._stateChanges.pipe(operators.filter((/** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { return !!(changes['hideToggle'] || changes['togglePosition']); }))) : |
| rxjs.EMPTY; |
| // Since the toggle state depends on an @Input on the panel, we |
| // need to subscribe and trigger change detection manually. |
| this._parentChangeSubscription = |
| rxjs.merge(panel.opened, panel.closed, accordionHideToggleChange, panel._inputChanges.pipe(operators.filter((/** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { |
| return !!(changes['hideToggle'] || |
| changes['disabled'] || |
| changes['togglePosition']); |
| })))) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._changeDetectorRef.markForCheck(); })); |
| // Avoids focus being lost if the panel contained the focused element and was closed. |
| panel.closed |
| .pipe(operators.filter((/** |
| * @return {?} |
| */ |
| function () { return panel._containsFocus(); }))) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _focusMonitor.focusVia(_element, 'program'); })); |
| _focusMonitor.monitor(_element).subscribe((/** |
| * @param {?} origin |
| * @return {?} |
| */ |
| function (origin) { |
| if (origin && panel.accordion) { |
| panel.accordion._handleHeaderFocus(_this); |
| } |
| })); |
| if (defaultOptions) { |
| this.expandedHeight = defaultOptions.expandedHeight; |
| this.collapsedHeight = defaultOptions.collapsedHeight; |
| } |
| } |
| /** |
| * @return {?} |
| */ |
| MatExpansionPanelHeader.prototype._animationStarted = /** |
| * @return {?} |
| */ |
| function () { |
| // Currently the `expansionHeight` animation has a `void => collapsed` transition which is |
| // there to work around a bug in Angular (see #13088), however this introduces a different |
| // issue. The new transition will cause the header to animate in on init (see #16067), if the |
| // consumer has set a header height that is different from the default one. We work around it |
| // by disabling animations on the header and re-enabling them after the first animation has run. |
| // Note that Angular dispatches animation events even if animations are disabled. Ideally this |
| // wouldn't be necessary if we remove the `void => collapsed` transition, but we have to wait |
| // for https://github.com/angular/angular/issues/18847 to be resolved. |
| this._animationsDisabled = false; |
| }; |
| Object.defineProperty(MatExpansionPanelHeader.prototype, "disabled", { |
| /** |
| * Whether the associated panel is disabled. Implemented as a part of `FocusableOption`. |
| * @docs-private |
| */ |
| get: /** |
| * Whether the associated panel is disabled. Implemented as a part of `FocusableOption`. |
| * \@docs-private |
| * @return {?} |
| */ |
| function () { |
| return this.panel.disabled; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** 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 the toggle position for the header. */ |
| /** |
| * Gets the toggle position for the header. |
| * @return {?} |
| */ |
| MatExpansionPanelHeader.prototype._getTogglePosition = /** |
| * Gets the toggle position for the header. |
| * @return {?} |
| */ |
| function () { |
| return this.panel.togglePosition; |
| }; |
| /** 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: |
| if (!keycodes.hasModifierKey(event)) { |
| event.preventDefault(); |
| this._toggle(); |
| } |
| break; |
| default: |
| if (this.panel.accordion) { |
| this.panel.accordion._handleHeaderKeydown(event); |
| } |
| return; |
| } |
| }; |
| /** |
| * Focuses the panel header. Implemented as a part of `FocusableOption`. |
| * @param origin Origin of the action that triggered the focus. |
| * @docs-private |
| */ |
| /** |
| * Focuses the panel header. Implemented as a part of `FocusableOption`. |
| * \@docs-private |
| * @param {?=} origin Origin of the action that triggered the focus. |
| * @return {?} |
| */ |
| MatExpansionPanelHeader.prototype.focus = /** |
| * Focuses the panel header. Implemented as a part of `FocusableOption`. |
| * \@docs-private |
| * @param {?=} origin Origin of the action that triggered the focus. |
| * @return {?} |
| */ |
| function (origin) { |
| if (origin === void 0) { origin = 'program'; } |
| this._focusMonitor.focusVia(this._element, origin); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatExpansionPanelHeader.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._parentChangeSubscription.unsubscribe(); |
| this._focusMonitor.stopMonitoring(this._element); |
| }; |
| 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;border-radius:inherit}.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-expansion-panel-header.mat-expansion-toggle-indicator-before{flex-direction:row-reverse}.mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-expansion-indicator{margin:0 16px 0 0}[dir=rtl] .mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-expansion-indicator{margin:0 0 0 16px}.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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| animations: [ |
| matExpansionAnimations.indicatorRotate, |
| matExpansionAnimations.expansionHeaderHeight |
| ], |
| host: { |
| 'class': 'mat-expansion-panel-header', |
| 'role': 'button', |
| '[attr.id]': 'panel._headerId', |
| '[attr.tabindex]': 'disabled ? -1 : 0', |
| '[attr.aria-controls]': '_getPanelId()', |
| '[attr.aria-expanded]': '_isExpanded()', |
| '[attr.aria-disabled]': 'panel.disabled', |
| '[class.mat-expanded]': '_isExpanded()', |
| '[class.mat-expansion-toggle-indicator-after]': "_getTogglePosition() === 'after'", |
| '[class.mat-expansion-toggle-indicator-before]': "_getTogglePosition() === 'before'", |
| '(click)': '_toggle()', |
| '(keydown)': '_keydown($event)', |
| '[@.disabled]': '_animationsDisabled', |
| '(@expansionHeight.start)': '_animationStarted()', |
| '[@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 }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,] }, { type: core.Optional }] } |
| ]; }; |
| MatExpansionPanelHeader.propDecorators = { |
| expandedHeight: [{ type: core.Input }], |
| collapsedHeight: [{ type: core.Input }] |
| }; |
| return MatExpansionPanelHeader; |
| }()); |
| /** |
| * `<mat-panel-description>` |
| * |
| * This directive is to be used inside of the MatExpansionPanelHeader component. |
| */ |
| var MatExpansionPanelDescription = /** @class */ (function () { |
| function MatExpansionPanelDescription() { |
| } |
| MatExpansionPanelDescription.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-panel-description', |
| host: { |
| class: 'mat-expansion-panel-header-description' |
| } |
| },] }, |
| ]; |
| return MatExpansionPanelDescription; |
| }()); |
| /** |
| * `<mat-panel-title>` |
| * |
| * This directive is to be used inside of the MatExpansionPanelHeader component. |
| */ |
| var MatExpansionPanelTitle = /** @class */ (function () { |
| function MatExpansionPanelTitle() { |
| } |
| MatExpansionPanelTitle.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-panel-title', |
| host: { |
| class: 'mat-expansion-panel-header-title' |
| } |
| },] }, |
| ]; |
| return MatExpansionPanelTitle; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Directive for a Material Design Accordion. |
| */ |
| var MatAccordion = /** @class */ (function (_super) { |
| __extends(MatAccordion, _super); |
| function MatAccordion() { |
| var _this = _super !== null && _super.apply(this, arguments) || this; |
| _this._hideToggle = false; |
| /** |
| * 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 rest of the accordion. |
| * flat - no spacing is placed around expanded panels, showing all panels at the same |
| * elevation. |
| */ |
| _this.displayMode = 'default'; |
| /** |
| * The position of the expansion indicator. |
| */ |
| _this.togglePosition = 'after'; |
| return _this; |
| } |
| Object.defineProperty(MatAccordion.prototype, "hideToggle", { |
| /** Whether the expansion indicator should be hidden. */ |
| 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 |
| }); |
| /** |
| * @return {?} |
| */ |
| MatAccordion.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._keyManager = new a11y.FocusKeyManager(this._headers).withWrap(); |
| }; |
| /** Handles keyboard events coming in from the panel headers. */ |
| /** |
| * Handles keyboard events coming in from the panel headers. |
| * @param {?} event |
| * @return {?} |
| */ |
| MatAccordion.prototype._handleHeaderKeydown = /** |
| * Handles keyboard events coming in from the panel headers. |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| var keyCode = event.keyCode; |
| /** @type {?} */ |
| var manager = this._keyManager; |
| if (keyCode === keycodes.HOME) { |
| if (!keycodes.hasModifierKey(event)) { |
| manager.setFirstItemActive(); |
| event.preventDefault(); |
| } |
| } |
| else if (keyCode === keycodes.END) { |
| if (!keycodes.hasModifierKey(event)) { |
| manager.setLastItemActive(); |
| event.preventDefault(); |
| } |
| } |
| else { |
| this._keyManager.onKeydown(event); |
| } |
| }; |
| /** |
| * @param {?} header |
| * @return {?} |
| */ |
| MatAccordion.prototype._handleHeaderFocus = /** |
| * @param {?} header |
| * @return {?} |
| */ |
| function (header) { |
| this._keyManager.updateActiveItem(header); |
| }; |
| MatAccordion.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-accordion', |
| exportAs: 'matAccordion', |
| inputs: ['multi'], |
| providers: [{ |
| provide: MAT_ACCORDION, |
| useExisting: MatAccordion |
| }], |
| host: { |
| class: 'mat-accordion' |
| } |
| },] }, |
| ]; |
| MatAccordion.propDecorators = { |
| _headers: [{ type: core.ContentChildren, args: [MatExpansionPanelHeader, { descendants: true },] }], |
| hideToggle: [{ type: core.Input }], |
| displayMode: [{ type: core.Input }], |
| togglePosition: [{ type: core.Input }] |
| }; |
| return MatAccordion; |
| }(accordion.CdkAccordion)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatExpansionModule = /** @class */ (function () { |
| function MatExpansionModule() { |
| } |
| MatExpansionModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [common.CommonModule, accordion.CdkAccordionModule, portal.PortalModule], |
| exports: [ |
| MatAccordion, |
| MatExpansionPanel, |
| MatExpansionPanelActionRow, |
| MatExpansionPanelHeader, |
| MatExpansionPanelTitle, |
| MatExpansionPanelDescription, |
| MatExpansionPanelContent, |
| ], |
| declarations: [ |
| MatAccordion, |
| MatExpansionPanel, |
| MatExpansionPanelActionRow, |
| MatExpansionPanelHeader, |
| MatExpansionPanelTitle, |
| MatExpansionPanelDescription, |
| MatExpansionPanelContent, |
| ], |
| },] }, |
| ]; |
| return MatExpansionModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token used to provide a grid list to a tile and to avoid circular imports. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_GRID_LIST = new core.InjectionToken('MAT_GRID_LIST'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatGridTile = /** @class */ (function () { |
| function MatGridTile(_element, _gridList) { |
| this._element = _element; |
| this._gridList = _gridList; |
| this._rowspan = 1; |
| this._colspan = 1; |
| } |
| Object.defineProperty(MatGridTile.prototype, "rowspan", { |
| /** Amount of rows that the grid tile takes up. */ |
| get: /** |
| * Amount of rows that the grid tile takes up. |
| * @return {?} |
| */ |
| function () { return this._rowspan; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this._rowspan = Math.round(coercion.coerceNumberProperty(value)); }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatGridTile.prototype, "colspan", { |
| /** Amount of columns that the grid tile takes up. */ |
| get: /** |
| * Amount of columns that the grid tile takes up. |
| * @return {?} |
| */ |
| function () { return this._colspan; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this._colspan = Math.round(coercion.coerceNumberProperty(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) { |
| ((/** @type {?} */ (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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatGridTile.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_GRID_LIST,] }] } |
| ]; }; |
| MatGridTile.propDecorators = { |
| rowspan: [{ type: core.Input }], |
| colspan: [{ type: core.Input }] |
| }; |
| return MatGridTile; |
| }()); |
| var MatGridTileText = /** @class */ (function () { |
| function MatGridTileText(_element) { |
| this._element = _element; |
| } |
| /** |
| * @return {?} |
| */ |
| MatGridTileText.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| setLines(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, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatGridTileText.ctorParameters = function () { return [ |
| { type: core.ElementRef } |
| ]; }; |
| MatGridTileText.propDecorators = { |
| _lines: [{ type: core.ContentChildren, args: [MatLine,] }] |
| }; |
| return MatGridTileText; |
| }()); |
| /** |
| * Directive whose purpose is to add the mat- CSS styling to this selector. |
| * \@docs-private |
| */ |
| var MatGridAvatarCssMatStyler = /** @class */ (function () { |
| function MatGridAvatarCssMatStyler() { |
| } |
| MatGridAvatarCssMatStyler.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-grid-avatar], [matGridAvatar]', |
| host: { 'class': 'mat-grid-avatar' } |
| },] }, |
| ]; |
| return MatGridAvatarCssMatStyler; |
| }()); |
| /** |
| * Directive whose purpose is to add the mat- CSS styling to this selector. |
| * \@docs-private |
| */ |
| var MatGridTileHeaderCssMatStyler = /** @class */ (function () { |
| function MatGridTileHeaderCssMatStyler() { |
| } |
| MatGridTileHeaderCssMatStyler.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-grid-tile-header', |
| host: { 'class': 'mat-grid-tile-header' } |
| },] }, |
| ]; |
| return MatGridTileHeaderCssMatStyler; |
| }()); |
| /** |
| * Directive whose purpose is to add the mat- CSS styling to this selector. |
| * \@docs-private |
| */ |
| var MatGridTileFooterCssMatStyler = /** @class */ (function () { |
| function MatGridTileFooterCssMatStyler() { |
| } |
| MatGridTileFooterCssMatStyler.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-grid-tile-footer', |
| host: { 'class': 'mat-grid-tile-footer' } |
| },] }, |
| ]; |
| return MatGridTileFooterCssMatStyler; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 /** |
| * 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 |
| */ |
| TileCoordinator = /** @class */ (function () { |
| function TileCoordinator() { |
| /** |
| * Index at which the search for the next gap will start. |
| */ |
| this.columnIndex = 0; |
| /** |
| * The current row index. |
| */ |
| this.rowIndex = 0; |
| } |
| 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 () { |
| /** @type {?} */ |
| var 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 |
| }); |
| /** |
| * Updates the tile positions. |
| * @param numColumns Amount of columns in the grid. |
| */ |
| /** |
| * Updates the tile positions. |
| * @param {?} numColumns Amount of columns in the grid. |
| * @param {?} tiles |
| * @return {?} |
| */ |
| TileCoordinator.prototype.update = /** |
| * Updates the tile positions. |
| * @param {?} numColumns Amount of columns in the grid. |
| * @param {?} tiles |
| * @return {?} |
| */ |
| function (numColumns, tiles) { |
| var _this = this; |
| this.columnIndex = 0; |
| this.rowIndex = 0; |
| this.tracker = new Array(numColumns); |
| this.tracker.fill(0, 0, this.tracker.length); |
| this.positions = tiles.map((/** |
| * @param {?} tile |
| * @return {?} |
| */ |
| function (tile) { return _this._trackTile(tile); })); |
| }; |
| /** Calculates the row and col position of a tile. */ |
| /** |
| * Calculates the row and col position of a tile. |
| * @private |
| * @param {?} tile |
| * @return {?} |
| */ |
| TileCoordinator.prototype._trackTile = /** |
| * Calculates the row and col position of a tile. |
| * @private |
| * @param {?} tile |
| * @return {?} |
| */ |
| function (tile) { |
| // Find a gap large enough for this tile. |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Finds the next available space large enough to fit the tile. |
| * @private |
| * @param {?} tileCols |
| * @return {?} |
| */ |
| TileCoordinator.prototype._findMatchingGap = /** |
| * Finds the next available space large enough to fit the tile. |
| * @private |
| * @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. |
| /** @type {?} */ |
| var gapStartIndex = -1; |
| /** @type {?} */ |
| var 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(); |
| gapStartIndex = this.tracker.indexOf(0, this.columnIndex); |
| gapEndIndex = this._findGapEndIndex(gapStartIndex); |
| 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(); |
| gapStartIndex = this.tracker.indexOf(0, this.columnIndex); |
| gapEndIndex = this._findGapEndIndex(gapStartIndex); |
| 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. Since gapEndIndex is |
| // exclusive, gapEndIndex is 0 means we didn't find a gap and should continue. |
| } while ((gapEndIndex - gapStartIndex < tileCols) || (gapEndIndex == 0)); |
| // 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. */ |
| /** |
| * Move "down" to the next row. |
| * @private |
| * @return {?} |
| */ |
| TileCoordinator.prototype._nextRow = /** |
| * Move "down" to the next row. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this.columnIndex = 0; |
| this.rowIndex++; |
| // Decrement all spaces by one to reflect moving down one row. |
| for (var 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} gapStartIndex |
| * @return {?} |
| */ |
| function (gapStartIndex) { |
| for (var 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. */ |
| /** |
| * Update the tile tracker to account for the given tile in the given space. |
| * @private |
| * @param {?} start |
| * @param {?} tile |
| * @return {?} |
| */ |
| TileCoordinator.prototype._markTilePosition = /** |
| * Update the tile tracker to account for the given tile in the given space. |
| * @private |
| * @param {?} start |
| * @param {?} tile |
| * @return {?} |
| */ |
| function (start, tile) { |
| for (var 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 /** |
| * Simple data structure for tile position (row, col). |
| * \@docs-private |
| */ |
| TilePosition = /** @class */ (function () { |
| function TilePosition(row, col) { |
| this.row = row; |
| this.col = col; |
| } |
| return TilePosition; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * RegExp that can be used to check whether a value will |
| * be allowed inside a CSS `calc()` expression. |
| * @type {?} |
| */ |
| var cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/; |
| /** |
| * Sets the style properties for an individual tile, given the position calculated by the |
| * Tile Coordinator. |
| * \@docs-private |
| * @abstract |
| */ |
| var /** |
| * Sets the style properties for an individual tile, given the position calculated by the |
| * Tile Coordinator. |
| * \@docs-private |
| * @abstract |
| */ |
| TileStyler = /** @class */ (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. |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var side = this._direction === 'rtl' ? 'right' : 'left'; |
| 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 /** |
| * 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 |
| */ |
| FixedTileStyler = /** @class */ (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); |
| if (!cssCalcAllowedValue.test(this.fixedRowHeight)) { |
| throw Error("Invalid value \"" + this.fixedRowHeight + "\" set as rowHeight."); |
| } |
| }; |
| /** |
| * @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]); |
| if (list._tiles) { |
| list._tiles.forEach((/** |
| * @param {?} tile |
| * @return {?} |
| */ |
| 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 /** |
| * 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 |
| */ |
| RatioTileStyler = /** @class */ (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) { |
| /** @type {?} */ |
| var 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('marginTop', this.getTilePosition(this.baseTileHeight, rowIndex)); |
| tile._setStyle('paddingTop', calc(this.getTileSize(this.baseTileHeight, tile.rowspan))); |
| }; |
| /** |
| * @return {?} |
| */ |
| RatioTileStyler.prototype.getComputedHeight = /** |
| * @return {?} |
| */ |
| function () { |
| return [ |
| 'paddingBottom', calc(this.getTileSpan(this.baseTileHeight) + " + " + this.getGutterSpan()) |
| ]; |
| }; |
| /** |
| * @param {?} list |
| * @return {?} |
| */ |
| RatioTileStyler.prototype.reset = /** |
| * @param {?} list |
| * @return {?} |
| */ |
| function (list) { |
| list._setListStyle(['paddingBottom', null]); |
| list._tiles.forEach((/** |
| * @param {?} tile |
| * @return {?} |
| */ |
| function (tile) { |
| tile._setStyle('marginTop', null); |
| tile._setStyle('paddingTop', null); |
| })); |
| }; |
| /** |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| RatioTileStyler.prototype._parseRatio = /** |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var 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 /** |
| * 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 |
| */ |
| FitTileStyler = /** @class */ (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. |
| /** @type {?} */ |
| var percentHeightPerTile = 100 / this._rowspan; |
| // Fraction of the horizontal gutter size that each column takes up. |
| /** @type {?} */ |
| var gutterHeightPerTile = (this._rows - 1) / this._rows; |
| // Base vertical size of a column. |
| /** @type {?} */ |
| var 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) { |
| if (list._tiles) { |
| list._tiles.forEach((/** |
| * @param {?} tile |
| * @return {?} |
| */ |
| 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(/([A-Za-z%]+)$/) ? value : value + "px"; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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. |
| /** @type {?} */ |
| var MAT_FIT_MODE = 'fit'; |
| var MatGridList = /** @class */ (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", { |
| /** Amount of columns in the grid list. */ |
| get: /** |
| * Amount of columns in the grid list. |
| * @return {?} |
| */ |
| function () { return this._cols; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._cols = Math.max(1, Math.round(coercion.coerceNumberProperty(value))); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatGridList.prototype, "gutterSize", { |
| /** Size of the grid list's gutter in pixels. */ |
| get: /** |
| * Size of the grid list's gutter in pixels. |
| * @return {?} |
| */ |
| function () { return this._gutter; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this._gutter = "" + (value == null ? '' : value); }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatGridList.prototype, "rowHeight", { |
| /** Set internal representation of row height from the user-provided value. */ |
| get: /** |
| * Set internal representation of row height from the user-provided value. |
| * @return {?} |
| */ |
| function () { return this._rowHeight; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var newValue = "" + (value == null ? '' : 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 */ |
| /** |
| * Throw a friendly error if cols property is missing |
| * @private |
| * @return {?} |
| */ |
| MatGridList.prototype._checkCols = /** |
| * Throw a friendly error if cols property is missing |
| * @private |
| * @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 */ |
| /** |
| * Default to equal width:height if rowHeight property is missing |
| * @private |
| * @return {?} |
| */ |
| MatGridList.prototype._checkRowHeight = /** |
| * Default to equal width:height if rowHeight property is missing |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!this._rowHeight) { |
| this._setTileStyler('1:1'); |
| } |
| }; |
| /** Creates correct Tile Styler subtype based on rowHeight passed in by user */ |
| /** |
| * Creates correct Tile Styler subtype based on rowHeight passed in by user |
| * @private |
| * @param {?} rowHeight |
| * @return {?} |
| */ |
| MatGridList.prototype._setTileStyler = /** |
| * Creates correct Tile Styler subtype based on rowHeight passed in by user |
| * @private |
| * @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. */ |
| /** |
| * Computes and applies the size and position for all children grid tiles. |
| * @private |
| * @return {?} |
| */ |
| MatGridList.prototype._layoutTiles = /** |
| * Computes and applies the size and position for all children grid tiles. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (!this._tileCoordinator) { |
| this._tileCoordinator = new TileCoordinator(); |
| } |
| /** @type {?} */ |
| var tracker = this._tileCoordinator; |
| /** @type {?} */ |
| var tiles = this._tiles.filter((/** |
| * @param {?} tile |
| * @return {?} |
| */ |
| function (tile) { return !tile._gridList || tile._gridList === _this; })); |
| /** @type {?} */ |
| var direction = this._dir ? this._dir.value : 'ltr'; |
| this._tileCoordinator.update(this.cols, tiles); |
| this._tileStyler.init(this.gutterSize, tracker, this.cols, direction); |
| tiles.forEach((/** |
| * @param {?} tile |
| * @param {?} index |
| * @return {?} |
| */ |
| function (tile, index) { |
| /** @type {?} */ |
| var 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) { |
| if (style) { |
| ((/** @type {?} */ (this._element.nativeElement.style)))[style[0]] = style[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', |
| }, |
| providers: [{ |
| provide: MAT_GRID_LIST, |
| useExisting: MatGridList |
| }], |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatGridList.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] } |
| ]; }; |
| MatGridList.propDecorators = { |
| _tiles: [{ type: core.ContentChildren, args: [MatGridTile, { descendants: true },] }], |
| cols: [{ type: core.Input }], |
| gutterSize: [{ type: core.Input }], |
| rowHeight: [{ type: core.Input }] |
| }; |
| return MatGridList; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatGridListModule = /** @class */ (function () { |
| function MatGridListModule() { |
| } |
| MatGridListModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatLineModule, MatCommonModule], |
| exports: [ |
| MatGridList, |
| MatGridTile, |
| MatGridTileText, |
| MatLineModule, |
| MatCommonModule, |
| MatGridTileHeaderCssMatStyler, |
| MatGridTileFooterCssMatStyler, |
| MatGridAvatarCssMatStyler |
| ], |
| declarations: [ |
| MatGridList, |
| MatGridTile, |
| MatGridTileText, |
| MatGridTileHeaderCssMatStyler, |
| MatGridTileFooterCssMatStyler, |
| MatGridAvatarCssMatStyler |
| ], |
| },] }, |
| ]; |
| return MatGridListModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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/common/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 getMatIconFailedToSanitizeUrlError(url) { |
| return Error("The URL provided to MatIconRegistry was not trusted as a resource URL " + |
| ("via Angular's DomSanitizer. Attempted URL was \"" + url + "\".")); |
| } |
| /** |
| * Returns an exception to be thrown when a HTML string couldn't be sanitized. |
| * \@docs-private |
| * @param {?} literal HTML that was attempted to be sanitized. |
| * @return {?} |
| */ |
| function getMatIconFailedToSanitizeLiteralError(literal) { |
| return Error("The literal provided to MatIconRegistry was not trusted as safe HTML by " + |
| ("Angular's DomSanitizer. Attempted literal was \"" + literal + "\".")); |
| } |
| /** |
| * Configuration for an icon, including the URL and possibly the cached SVG element. |
| * \@docs-private |
| */ |
| var /** |
| * Configuration for an icon, including the URL and possibly the cached SVG element. |
| * \@docs-private |
| */ |
| SvgIconConfig = /** @class */ (function () { |
| function SvgIconConfig(data) { |
| // Note that we can't use `instanceof SVGElement` here, |
| // because it'll break during server-side rendering. |
| if (!!((/** @type {?} */ (data))).nodeName) { |
| this.svgElement = (/** @type {?} */ (data)); |
| } |
| else { |
| this.url = (/** @type {?} */ (data)); |
| } |
| } |
| 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 = /** @class */ (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'; |
| 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. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} url |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIcon = /** |
| * Registers an icon by URL in the default namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} url |
| * @return {THIS} |
| */ |
| function (iconName, url) { |
| return (/** @type {?} */ (this)).addSvgIconInNamespace('', iconName, url); |
| }; |
| /** |
| * Registers an icon using an HTML string in the default namespace. |
| * @param iconName Name under which the icon should be registered. |
| * @param literal SVG source of the icon. |
| */ |
| /** |
| * Registers an icon using an HTML string in the default namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} literal SVG source of the icon. |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIconLiteral = /** |
| * Registers an icon using an HTML string in the default namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} literal SVG source of the icon. |
| * @return {THIS} |
| */ |
| function (iconName, literal) { |
| return (/** @type {?} */ (this)).addSvgIconLiteralInNamespace('', iconName, literal); |
| }; |
| /** |
| * 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. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which the icon should be registered. |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} url |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIconInNamespace = /** |
| * Registers an icon by URL in the specified namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which the icon should be registered. |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} url |
| * @return {THIS} |
| */ |
| function (namespace, iconName, url) { |
| return (/** @type {?} */ (this))._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url)); |
| }; |
| /** |
| * Registers an icon using an HTML string 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 literal SVG source of the icon. |
| */ |
| /** |
| * Registers an icon using an HTML string in the specified namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which the icon should be registered. |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} literal SVG source of the icon. |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIconLiteralInNamespace = /** |
| * Registers an icon using an HTML string in the specified namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which the icon should be registered. |
| * @param {?} iconName Name under which the icon should be registered. |
| * @param {?} literal SVG source of the icon. |
| * @return {THIS} |
| */ |
| function (namespace, iconName, literal) { |
| /** @type {?} */ |
| var sanitizedLiteral = (/** @type {?} */ (this))._sanitizer.sanitize(core.SecurityContext.HTML, literal); |
| if (!sanitizedLiteral) { |
| throw getMatIconFailedToSanitizeLiteralError(literal); |
| } |
| /** @type {?} */ |
| var svgElement = (/** @type {?} */ (this))._createSvgElementForSingleIcon(sanitizedLiteral); |
| return (/** @type {?} */ (this))._addSvgIconConfig(namespace, iconName, new SvgIconConfig(svgElement)); |
| }; |
| /** |
| * Registers an icon set by URL in the default namespace. |
| * @param url |
| */ |
| /** |
| * Registers an icon set by URL in the default namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} url |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIconSet = /** |
| * Registers an icon set by URL in the default namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} url |
| * @return {THIS} |
| */ |
| function (url) { |
| return (/** @type {?} */ (this)).addSvgIconSetInNamespace('', url); |
| }; |
| /** |
| * Registers an icon set using an HTML string in the default namespace. |
| * @param literal SVG source of the icon set. |
| */ |
| /** |
| * Registers an icon set using an HTML string in the default namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} literal SVG source of the icon set. |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIconSetLiteral = /** |
| * Registers an icon set using an HTML string in the default namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} literal SVG source of the icon set. |
| * @return {THIS} |
| */ |
| function (literal) { |
| return (/** @type {?} */ (this)).addSvgIconSetLiteralInNamespace('', literal); |
| }; |
| /** |
| * 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. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon set. |
| * @param {?} url |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIconSetInNamespace = /** |
| * Registers an icon set by URL in the specified namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon set. |
| * @param {?} url |
| * @return {THIS} |
| */ |
| function (namespace, url) { |
| return (/** @type {?} */ (this))._addSvgIconSetConfig(namespace, new SvgIconConfig(url)); |
| }; |
| /** |
| * Registers an icon set using an HTML string in the specified namespace. |
| * @param namespace Namespace in which to register the icon set. |
| * @param literal SVG source of the icon set. |
| */ |
| /** |
| * Registers an icon set using an HTML string in the specified namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon set. |
| * @param {?} literal SVG source of the icon set. |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype.addSvgIconSetLiteralInNamespace = /** |
| * Registers an icon set using an HTML string in the specified namespace. |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon set. |
| * @param {?} literal SVG source of the icon set. |
| * @return {THIS} |
| */ |
| function (namespace, literal) { |
| /** @type {?} */ |
| var sanitizedLiteral = (/** @type {?} */ (this))._sanitizer.sanitize(core.SecurityContext.HTML, literal); |
| if (!sanitizedLiteral) { |
| throw getMatIconFailedToSanitizeLiteralError(literal); |
| } |
| /** @type {?} */ |
| var svgElement = (/** @type {?} */ (this))._svgElementFromString(sanitizedLiteral); |
| return (/** @type {?} */ (this))._addSvgIconSetConfig(namespace, new SvgIconConfig(svgElement)); |
| }; |
| /** |
| * 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. |
| * |
| * @template THIS |
| * @this {THIS} |
| * @param {?} alias Alias for the font. |
| * @param {?=} className Class name override to be used instead of the alias. |
| * @return {THIS} |
| */ |
| 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. |
| * |
| * @template THIS |
| * @this {THIS} |
| * @param {?} alias Alias for the font. |
| * @param {?=} className Class name override to be used instead of the alias. |
| * @return {THIS} |
| */ |
| function (alias, className) { |
| if (className === void 0) { className = alias; } |
| (/** @type {?} */ (this))._fontCssClassesByAlias.set(alias, className); |
| return (/** @type {?} */ (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. |
| * |
| * @template THIS |
| * @this {THIS} |
| * @param {?} className |
| * @return {THIS} |
| */ |
| 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. |
| * |
| * @template THIS |
| * @this {THIS} |
| * @param {?} className |
| * @return {THIS} |
| */ |
| function (className) { |
| (/** @type {?} */ (this))._defaultFontSetClass = className; |
| return (/** @type {?} */ (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; |
| /** @type {?} */ |
| var url = this._sanitizer.sanitize(core.SecurityContext.RESOURCE_URL, safeUrl); |
| if (!url) { |
| throw getMatIconFailedToSanitizeUrlError(safeUrl); |
| } |
| /** @type {?} */ |
| var cachedIcon = this._cachedIconsByUrl.get(url); |
| if (cachedIcon) { |
| return rxjs.of(cloneSvg(cachedIcon)); |
| } |
| return this._loadSvgIconFromConfig(new SvgIconConfig(safeUrl)).pipe(operators.tap((/** |
| * @param {?} svg |
| * @return {?} |
| */ |
| function (svg) { return _this._cachedIconsByUrl.set((/** @type {?} */ (url)), svg); })), operators.map((/** |
| * @param {?} svg |
| * @return {?} |
| */ |
| 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. |
| /** @type {?} */ |
| var key = iconKey(namespace, name); |
| /** @type {?} */ |
| var config = this._svgIconConfigs.get(key); |
| if (config) { |
| return this._getSvgFromConfig(config); |
| } |
| // See if we have any icon sets registered for the namespace. |
| /** @type {?} */ |
| var iconSetConfigs = this._iconSetConfigs.get(namespace); |
| if (iconSetConfigs) { |
| return this._getSvgFromIconSetConfigs(name, iconSetConfigs); |
| } |
| return rxjs.throwError(getMatIconNameNotFoundError(key)); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatIconRegistry.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._svgIconConfigs.clear(); |
| this._iconSetConfigs.clear(); |
| this._cachedIconsByUrl.clear(); |
| }; |
| /** |
| * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not. |
| */ |
| /** |
| * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not. |
| * @private |
| * @param {?} config |
| * @return {?} |
| */ |
| MatIconRegistry.prototype._getSvgFromConfig = /** |
| * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not. |
| * @private |
| * @param {?} config |
| * @return {?} |
| */ |
| function (config) { |
| if (config.svgElement) { |
| // We already have the SVG element for this icon, return a copy. |
| return rxjs.of(cloneSvg(config.svgElement)); |
| } |
| else { |
| // Fetch the icon from the config's URL, cache it, and return a copy. |
| return this._loadSvgIconFromConfig(config).pipe(operators.tap((/** |
| * @param {?} svg |
| * @return {?} |
| */ |
| function (svg) { return config.svgElement = svg; })), operators.map((/** |
| * @param {?} svg |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @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. |
| /** @type {?} */ |
| var 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 rxjs.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. |
| /** @type {?} */ |
| var iconSetFetchRequests = iconSetConfigs |
| .filter((/** |
| * @param {?} iconSetConfig |
| * @return {?} |
| */ |
| function (iconSetConfig) { return !iconSetConfig.svgElement; })) |
| .map((/** |
| * @param {?} iconSetConfig |
| * @return {?} |
| */ |
| function (iconSetConfig) { |
| return _this._loadSvgIconSetFromConfig(iconSetConfig).pipe(operators.catchError((/** |
| * @param {?} err |
| * @return {?} |
| */ |
| function (err) { |
| /** @type {?} */ |
| var url = _this._sanitizer.sanitize(core.SecurityContext.RESOURCE_URL, iconSetConfig.url); |
| // Swallow errors fetching individual URLs so the |
| // combined Observable won't necessarily fail. |
| console.error("Loading icon set URL: " + url + " failed: " + err.message); |
| return rxjs.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 rxjs.forkJoin(iconSetFetchRequests).pipe(operators.map((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} iconName |
| * @param {?} iconSetConfigs |
| * @return {?} |
| */ |
| function (iconName, iconSetConfigs) { |
| // Iterate backwards, so icon sets added later have precedence. |
| for (var i = iconSetConfigs.length - 1; i >= 0; i--) { |
| /** @type {?} */ |
| var config = iconSetConfigs[i]; |
| if (config.svgElement) { |
| /** @type {?} */ |
| var 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. |
| */ |
| /** |
| * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element |
| * from it. |
| * @private |
| * @param {?} config |
| * @return {?} |
| */ |
| MatIconRegistry.prototype._loadSvgIconFromConfig = /** |
| * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element |
| * from it. |
| * @private |
| * @param {?} config |
| * @return {?} |
| */ |
| function (config) { |
| var _this = this; |
| return this._fetchUrl(config.url) |
| .pipe(operators.map((/** |
| * @param {?} svgText |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * Loads the content of the icon set URL specified in the SvgIconConfig and creates an SVG element |
| * from it. |
| * @private |
| * @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. |
| * @private |
| * @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 rxjs.of(config.svgElement); |
| } |
| return this._fetchUrl(config.url).pipe(operators.map((/** |
| * @param {?} svgText |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * Creates a DOM element from the given SVG string, and adds default attributes. |
| * @private |
| * @param {?} responseText |
| * @return {?} |
| */ |
| MatIconRegistry.prototype._createSvgElementForSingleIcon = /** |
| * Creates a DOM element from the given SVG string, and adds default attributes. |
| * @private |
| * @param {?} responseText |
| * @return {?} |
| */ |
| function (responseText) { |
| /** @type {?} */ |
| var 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} iconSet |
| * @param {?} iconName |
| * @return {?} |
| */ |
| function (iconSet, iconName) { |
| // Use the `id="iconName"` syntax in order to escape special |
| // characters in the ID (versus using the #iconName syntax). |
| /** @type {?} */ |
| var iconSource = iconSet.querySelector("[id=\"" + 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. |
| /** @type {?} */ |
| var iconElement = (/** @type {?} */ (iconSource.cloneNode(true))); |
| iconElement.removeAttribute('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 |
| /** @type {?} */ |
| var 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. |
| */ |
| /** |
| * Creates a DOM element from the given SVG string. |
| * @private |
| * @param {?} str |
| * @return {?} |
| */ |
| MatIconRegistry.prototype._svgElementFromString = /** |
| * Creates a DOM element from the given SVG string. |
| * @private |
| * @param {?} str |
| * @return {?} |
| */ |
| function (str) { |
| /** @type {?} */ |
| var div = this._document.createElement('DIV'); |
| div.innerHTML = str; |
| /** @type {?} */ |
| var svg = (/** @type {?} */ (div.querySelector('svg'))); |
| if (!svg) { |
| throw Error('<svg> tag not found'); |
| } |
| return svg; |
| }; |
| /** |
| * Converts an element into an SVG node by cloning all of its children. |
| */ |
| /** |
| * Converts an element into an SVG node by cloning all of its children. |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| MatIconRegistry.prototype._toSvgElement = /** |
| * Converts an element into an SVG node by cloning all of its children. |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| /** @type {?} */ |
| var svg = this._svgElementFromString('<svg></svg>'); |
| for (var 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. |
| */ |
| /** |
| * Sets the default attributes for an SVG element to be used as an icon. |
| * @private |
| * @param {?} svg |
| * @return {?} |
| */ |
| MatIconRegistry.prototype._setSvgAttributes = /** |
| * Sets the default attributes for an SVG element to be used as an icon. |
| * @private |
| * @param {?} svg |
| * @return {?} |
| */ |
| function (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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} safeUrl |
| * @return {?} |
| */ |
| function (safeUrl) { |
| var _this = this; |
| if (!this._httpClient) { |
| throw getMatIconNoHttpProviderError(); |
| } |
| if (safeUrl == null) { |
| throw Error("Cannot fetch icon from URL \"" + safeUrl + "\"."); |
| } |
| /** @type {?} */ |
| var url = this._sanitizer.sanitize(core.SecurityContext.RESOURCE_URL, safeUrl); |
| if (!url) { |
| throw getMatIconFailedToSanitizeUrlError(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. |
| /** @type {?} */ |
| var inProgressFetch = this._inProgressUrlFetches.get(url); |
| if (inProgressFetch) { |
| return inProgressFetch; |
| } |
| // TODO(jelbourn): for some reason, the `finalize` operator "loses" the generic type on the |
| // Observable. Figure out why and fix it. |
| /** @type {?} */ |
| var req = this._httpClient.get(url, { responseType: 'text' }).pipe(operators.finalize((/** |
| * @return {?} |
| */ |
| function () { return _this._inProgressUrlFetches.delete(url); })), operators.share()); |
| this._inProgressUrlFetches.set(url, req); |
| return req; |
| }; |
| /** |
| * Registers an icon config by name in the specified namespace. |
| * @param namespace Namespace in which to register the icon config. |
| * @param iconName Name under which to register the config. |
| * @param config Config to be registered. |
| */ |
| /** |
| * Registers an icon config by name in the specified namespace. |
| * @private |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon config. |
| * @param {?} iconName Name under which to register the config. |
| * @param {?} config Config to be registered. |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype._addSvgIconConfig = /** |
| * Registers an icon config by name in the specified namespace. |
| * @private |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon config. |
| * @param {?} iconName Name under which to register the config. |
| * @param {?} config Config to be registered. |
| * @return {THIS} |
| */ |
| function (namespace, iconName, config) { |
| (/** @type {?} */ (this))._svgIconConfigs.set(iconKey(namespace, iconName), config); |
| return (/** @type {?} */ (this)); |
| }; |
| /** |
| * Registers an icon set config in the specified namespace. |
| * @param namespace Namespace in which to register the icon config. |
| * @param config Config to be registered. |
| */ |
| /** |
| * Registers an icon set config in the specified namespace. |
| * @private |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon config. |
| * @param {?} config Config to be registered. |
| * @return {THIS} |
| */ |
| MatIconRegistry.prototype._addSvgIconSetConfig = /** |
| * Registers an icon set config in the specified namespace. |
| * @private |
| * @template THIS |
| * @this {THIS} |
| * @param {?} namespace Namespace in which to register the icon config. |
| * @param {?} config Config to be registered. |
| * @return {THIS} |
| */ |
| function (namespace, config) { |
| /** @type {?} */ |
| var configNamespace = (/** @type {?} */ (this))._iconSetConfigs.get(namespace); |
| if (configNamespace) { |
| configNamespace.push(config); |
| } |
| else { |
| (/** @type {?} */ (this))._iconSetConfigs.set(namespace, [config]); |
| } |
| return (/** @type {?} */ (this)); |
| }; |
| MatIconRegistry.decorators = [ |
| { type: core.Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @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,] }] } |
| ]; }; |
| /** @nocollapse */ MatIconRegistry.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatIconRegistry_Factory() { return new MatIconRegistry(core.ɵɵinject(http.HttpClient, 8), core.ɵɵinject(platformBrowser.DomSanitizer), core.ɵɵinject(common.DOCUMENT, 8)); }, token: MatIconRegistry, providedIn: "root" }); |
| 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 |
| * @type {?} |
| */ |
| 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatIcon. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatIcon. |
| /** |
| * \@docs-private |
| */ |
| MatIconBase = /** @class */ (function () { |
| function MatIconBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatIconBase; |
| }()); |
| /** @type {?} */ |
| var _MatIconMixinBase = mixinColor(MatIconBase); |
| /** |
| * Injection token used to provide the current location to `MatIcon`. |
| * Used to handle server-side rendering and to stub out during unit tests. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_ICON_LOCATION = new core.InjectionToken('mat-icon-location', { |
| providedIn: 'root', |
| factory: MAT_ICON_LOCATION_FACTORY |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_ICON_LOCATION_FACTORY() { |
| /** @type {?} */ |
| var _document = core.inject(common.DOCUMENT); |
| /** @type {?} */ |
| var _location = _document ? _document.location : null; |
| return { |
| // Note that this needs to be a function, rather than a property, because Angular |
| // will only resolve it once, but we want the current path on each call. |
| getPathname: (/** |
| * @return {?} |
| */ |
| function () { return _location ? (_location.pathname + _location.search) : ''; }) |
| }; |
| } |
| /** |
| * SVG attributes that accept a FuncIRI (e.g. `url(<something>)`). |
| * @type {?} |
| */ |
| var funcIriAttributes = [ |
| 'clip-path', |
| 'color-profile', |
| 'src', |
| 'cursor', |
| 'fill', |
| 'filter', |
| 'marker', |
| 'marker-start', |
| 'marker-mid', |
| 'marker-end', |
| 'mask', |
| 'stroke' |
| ]; |
| var ɵ0$5 = /** |
| * @param {?} attr |
| * @return {?} |
| */ |
| function (attr) { return "[" + attr + "]"; }; |
| /** |
| * Selector that can be used to find all elements that are using a `FuncIRI`. |
| * @type {?} |
| */ |
| var funcIriAttributeSelector = funcIriAttributes.map((ɵ0$5)).join(', '); |
| /** |
| * Regex that can be used to extract the id out of a FuncIRI. |
| * @type {?} |
| */ |
| var funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/; |
| /** |
| * 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 = /** @class */ (function (_super) { |
| __extends(MatIcon, _super); |
| function MatIcon(elementRef, _iconRegistry, ariaHidden, _location) { |
| var _this = _super.call(this, elementRef) || this; |
| _this._iconRegistry = _iconRegistry; |
| _this._location = _location; |
| _this._inline = false; |
| // 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, "inline", { |
| /** |
| * Whether the icon should be inlined, automatically sizing the icon to match the font size of |
| * the element the icon is contained in. |
| */ |
| get: /** |
| * Whether the icon should be inlined, automatically sizing the icon to match the font size of |
| * the element the icon is contained in. |
| * @return {?} |
| */ |
| function () { |
| return this._inline; |
| }, |
| set: /** |
| * @param {?} inline |
| * @return {?} |
| */ |
| function (inline) { |
| this._inline = coercion.coerceBooleanProperty(inline); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatIcon.prototype, "fontSet", { |
| /** Font set that the icon is a part of. */ |
| 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", { |
| /** Name of an icon within a font set. */ |
| 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)` |
| */ |
| /** |
| * 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)` |
| * @private |
| * @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)` |
| * @private |
| * @param {?} iconName |
| * @return {?} |
| */ |
| function (iconName) { |
| if (!iconName) { |
| return ['', '']; |
| } |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var svgIconChanges = changes['svgIcon']; |
| if (svgIconChanges) { |
| if (this.svgIcon) { |
| var _a = this._splitIconName(this.svgIcon), namespace = _a[0], iconName = _a[1]; |
| this._iconRegistry.getNamedSvgIcon(iconName, namespace).pipe(operators.take(1)).subscribe((/** |
| * @param {?} svg |
| * @return {?} |
| */ |
| function (svg) { return _this._setSvgElement(svg); }), (/** |
| * @param {?} err |
| * @return {?} |
| */ |
| function (err) { return console.log("Error retrieving icon: " + err.message); })); |
| } |
| else if (svgIconChanges.previousValue) { |
| 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.ngAfterViewChecked = /** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var cachedElements = this._elementsWithExternalReferences; |
| if (cachedElements && this._location && cachedElements.size) { |
| /** @type {?} */ |
| var newPath = this._location.getPathname(); |
| // We need to check whether the URL has changed on each change detection since |
| // the browser doesn't have an API that will let us react on link clicks and |
| // we can't depend on the Angular router. The references need to be updated, |
| // because while most browsers don't care whether the URL is correct after |
| // the first render, Safari will break if the user navigates to a different |
| // page and the SVG isn't re-rendered. |
| if (newPath !== this._previousPath) { |
| this._previousPath = newPath; |
| this._prependPathToReferences(newPath); |
| } |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatIcon.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| if (this._elementsWithExternalReferences) { |
| this._elementsWithExternalReferences.clear(); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatIcon.prototype._usingFontIcon = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return !this.svgIcon; |
| }; |
| /** |
| * @private |
| * @param {?} svg |
| * @return {?} |
| */ |
| MatIcon.prototype._setSvgElement = /** |
| * @private |
| * @param {?} svg |
| * @return {?} |
| */ |
| function (svg) { |
| this._clearSvgElement(); |
| // Workaround for IE11 and Edge ignoring `style` tags inside dynamically-created SVGs. |
| // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10898469/ |
| // Do this before inserting the element into the DOM, in order to avoid a style recalculation. |
| /** @type {?} */ |
| var styleTags = (/** @type {?} */ (svg.querySelectorAll('style'))); |
| for (var i = 0; i < styleTags.length; i++) { |
| styleTags[i].textContent += ' '; |
| } |
| // Note: we do this fix here, rather than the icon registry, because the |
| // references have to point to the URL at the time that the icon was created. |
| if (this._location) { |
| /** @type {?} */ |
| var path = this._location.getPathname(); |
| this._previousPath = path; |
| this._cacheChildrenWithExternalReferences(svg); |
| this._prependPathToReferences(path); |
| } |
| this._elementRef.nativeElement.appendChild(svg); |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatIcon.prototype._clearSvgElement = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var layoutElement = this._elementRef.nativeElement; |
| /** @type {?} */ |
| var childCount = layoutElement.childNodes.length; |
| if (this._elementsWithExternalReferences) { |
| this._elementsWithExternalReferences.clear(); |
| } |
| // Remove existing non-element child nodes and SVGs, and add the new SVG element. Note that |
| // we can't use innerHTML, because IE will throw if the element has a data binding. |
| while (childCount--) { |
| /** @type {?} */ |
| var child = layoutElement.childNodes[childCount]; |
| // 1 corresponds to Node.ELEMENT_NODE. We remove all non-element nodes in order to get rid |
| // of any loose text nodes, as well as any SVG elements in order to remove any old icons. |
| if (child.nodeType !== 1 || child.nodeName.toLowerCase() === 'svg') { |
| layoutElement.removeChild(child); |
| } |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatIcon.prototype._updateFontIconClasses = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!this._usingFontIcon()) { |
| return; |
| } |
| /** @type {?} */ |
| var elem = this._elementRef.nativeElement; |
| /** @type {?} */ |
| var 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| return typeof value === 'string' ? value.trim().split(' ')[0] : value; |
| }; |
| /** |
| * Prepends the current path to all elements that have an attribute pointing to a `FuncIRI` |
| * reference. This is required because WebKit browsers require references to be prefixed with |
| * the current path, if the page has a `base` tag. |
| */ |
| /** |
| * Prepends the current path to all elements that have an attribute pointing to a `FuncIRI` |
| * reference. This is required because WebKit browsers require references to be prefixed with |
| * the current path, if the page has a `base` tag. |
| * @private |
| * @param {?} path |
| * @return {?} |
| */ |
| MatIcon.prototype._prependPathToReferences = /** |
| * Prepends the current path to all elements that have an attribute pointing to a `FuncIRI` |
| * reference. This is required because WebKit browsers require references to be prefixed with |
| * the current path, if the page has a `base` tag. |
| * @private |
| * @param {?} path |
| * @return {?} |
| */ |
| function (path) { |
| /** @type {?} */ |
| var elements = this._elementsWithExternalReferences; |
| if (elements) { |
| elements.forEach((/** |
| * @param {?} attrs |
| * @param {?} element |
| * @return {?} |
| */ |
| function (attrs, element) { |
| attrs.forEach((/** |
| * @param {?} attr |
| * @return {?} |
| */ |
| function (attr) { |
| element.setAttribute(attr.name, "url('" + path + "#" + attr.value + "')"); |
| })); |
| })); |
| } |
| }; |
| /** |
| * Caches the children of an SVG element that have `url()` |
| * references that we need to prefix with the current path. |
| */ |
| /** |
| * Caches the children of an SVG element that have `url()` |
| * references that we need to prefix with the current path. |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| MatIcon.prototype._cacheChildrenWithExternalReferences = /** |
| * Caches the children of an SVG element that have `url()` |
| * references that we need to prefix with the current path. |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| /** @type {?} */ |
| var elementsWithFuncIri = element.querySelectorAll(funcIriAttributeSelector); |
| /** @type {?} */ |
| var elements = this._elementsWithExternalReferences = |
| this._elementsWithExternalReferences || new Map(); |
| var _loop_1 = function (i) { |
| funcIriAttributes.forEach((/** |
| * @param {?} attr |
| * @return {?} |
| */ |
| function (attr) { |
| /** @type {?} */ |
| var elementWithReference = elementsWithFuncIri[i]; |
| /** @type {?} */ |
| var value = elementWithReference.getAttribute(attr); |
| /** @type {?} */ |
| var match = value ? value.match(funcIriPattern) : null; |
| if (match) { |
| /** @type {?} */ |
| var attributes = elements.get(elementWithReference); |
| if (!attributes) { |
| attributes = []; |
| elements.set(elementWithReference, attributes); |
| } |
| (/** @type {?} */ (attributes)).push({ name: attr, value: match[1] }); |
| } |
| })); |
| }; |
| for (var i = 0; i < elementsWithFuncIri.length; i++) { |
| _loop_1(i); |
| } |
| }; |
| 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}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}"], |
| inputs: ['color'], |
| host: { |
| 'role': 'img', |
| 'class': 'mat-icon notranslate', |
| '[class.mat-icon-inline]': 'inline', |
| '[class.mat-icon-no-color]': 'color !== "primary" && color !== "accent" && color !== "warn"', |
| }, |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatIcon.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: MatIconRegistry }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['aria-hidden',] }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_ICON_LOCATION,] }] } |
| ]; }; |
| MatIcon.propDecorators = { |
| inline: [{ type: core.Input }], |
| svgIcon: [{ type: core.Input }], |
| fontSet: [{ type: core.Input }], |
| fontIcon: [{ type: core.Input }] |
| }; |
| return MatIcon; |
| }(_MatIconMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatIconModule = /** @class */ (function () { |
| function MatIconModule() { |
| } |
| MatIconModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule], |
| exports: [MatIcon, MatCommonModule], |
| declarations: [MatIcon], |
| },] }, |
| ]; |
| return MatIconModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatList. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatList. |
| /** |
| * \@docs-private |
| */ |
| MatListBase = /** @class */ (function () { |
| function MatListBase() { |
| } |
| return MatListBase; |
| }()); |
| /** @type {?} */ |
| var _MatListMixinBase = mixinDisableRipple(MatListBase); |
| // Boilerplate for applying mixins to MatListItem. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatListItem. |
| /** |
| * \@docs-private |
| */ |
| MatListItemBase = /** @class */ (function () { |
| function MatListItemBase() { |
| } |
| return MatListItemBase; |
| }()); |
| /** @type {?} */ |
| var _MatListItemMixinBase = mixinDisableRipple(MatListItemBase); |
| var MatNavList = /** @class */ (function (_super) { |
| __extends(MatNavList, _super); |
| function MatNavList() { |
| var _this = _super !== null && _super.apply(this, arguments) || this; |
| /** |
| * Emits when the state of the list changes. |
| */ |
| _this._stateChanges = new rxjs.Subject(); |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatNavList.prototype.ngOnChanges = /** |
| * @return {?} |
| */ |
| function () { |
| this._stateChanges.next(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatNavList.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._stateChanges.complete(); |
| }; |
| MatNavList.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-nav-list', |
| exportAs: 'matNavList', |
| host: { |
| 'role': 'navigation', |
| 'class': 'mat-nav-list mat-list-base' |
| }, |
| template: "<ng-content></ng-content>", |
| styles: [".mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list-base .mat-subheader{margin:0}.mat-list-base{padding-top:8px;display:block;-webkit-tap-highlight-color:transparent}.mat-list-base .mat-subheader{height:48px;line-height:16px}.mat-list-base .mat-subheader:first-child{margin-top:-8px}.mat-list-base .mat-list-item,.mat-list-base .mat-list-option{display:block;height:48px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base .mat-list-item .mat-list-item-content,.mat-list-base .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-base .mat-list-item .mat-list-item-content-reverse,.mat-list-base .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-base .mat-list-item .mat-list-item-ripple,.mat-list-base .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar,.mat-list-base .mat-list-option.mat-list-item-with-avatar{height:56px}.mat-list-base .mat-list-item.mat-2-line,.mat-list-base .mat-list-option.mat-2-line{height:72px}.mat-list-base .mat-list-item.mat-3-line,.mat-list-base .mat-list-option.mat-3-line{height:88px}.mat-list-base .mat-list-item.mat-multi-line,.mat-list-base .mat-list-option.mat-multi-line{height:auto}.mat-list-base .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base .mat-list-item .mat-list-text,.mat-list-base .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base .mat-list-item .mat-list-text>*,.mat-list-base .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list-base .mat-list-item .mat-list-text:empty,.mat-list-base .mat-list-option .mat-list-text:empty{display:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base .mat-list-item .mat-list-avatar,.mat-list-base .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover}.mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list-base .mat-list-item .mat-list-icon,.mat-list-base .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-base .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list-base .mat-list-item .mat-divider,.mat-list-base .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base .mat-list-item .mat-divider,[dir=rtl] .mat-list-base .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list-base[dense]{padding-top:4px;display:block}.mat-list-base[dense] .mat-subheader{height:40px;line-height:8px}.mat-list-base[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list-base[dense] .mat-list-item,.mat-list-base[dense] .mat-list-option{display:block;height:40px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-item-content,.mat-list-base[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-base[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list-base[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-base[dense] .mat-list-item .mat-list-item-ripple,.mat-list-base[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar{height:48px}.mat-list-base[dense] .mat-list-item.mat-2-line,.mat-list-base[dense] .mat-list-option.mat-2-line{height:60px}.mat-list-base[dense] .mat-list-item.mat-3-line,.mat-list-base[dense] .mat-list-option.mat-3-line{height:76px}.mat-list-base[dense] .mat-list-item.mat-multi-line,.mat-list-base[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list-base[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base[dense] .mat-list-item .mat-list-text,.mat-list-base[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-text>*,.mat-list-base[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list-base[dense] .mat-list-item .mat-list-text:empty,.mat-list-base[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base[dense] .mat-list-item .mat-list-avatar,.mat-list-base[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover}.mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:68px;width:calc(100% - 68px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:68px}.mat-list-base[dense] .mat-list-item .mat-list-icon,.mat-list-base[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-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list-base[dense] .mat-list-item .mat-divider,.mat-list-base[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base[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{cursor:pointer;outline:0}mat-action-list button{background:0 0;color:inherit;border:none;font:inherit;outline:inherit;-webkit-tap-highlight-color:transparent;text-align:left}[dir=rtl] mat-action-list button{text-align:right}mat-action-list button::-moz-focus-inner{border:0}mat-action-list .mat-list-item{cursor:pointer;outline:inherit}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer;outline:0}@media (-ms-high-contrast:active){.mat-selection-list:focus{outline-style:dotted}.mat-list-option:focus,.mat-list-option:hover,.mat-nav-list .mat-list-item:focus,.mat-nav-list .mat-list-item:hover,mat-action-list .mat-list-item:focus,mat-action-list .mat-list-item:hover{outline:dotted 1px}}@media (hover:none){.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover{background:0 0}}"], |
| inputs: ['disableRipple'], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| return MatNavList; |
| }(_MatListMixinBase)); |
| var MatList = /** @class */ (function (_super) { |
| __extends(MatList, _super); |
| function MatList(_elementRef) { |
| var _this = _super.call(this) || this; |
| _this._elementRef = _elementRef; |
| /** |
| * Emits when the state of the list changes. |
| */ |
| _this._stateChanges = new rxjs.Subject(); |
| if (_this._getListType() === 'action-list') { |
| _elementRef.nativeElement.classList.add('mat-action-list'); |
| } |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatList.prototype._getListType = /** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var nodeName = this._elementRef.nativeElement.nodeName.toLowerCase(); |
| if (nodeName === 'mat-list') { |
| return 'list'; |
| } |
| if (nodeName === 'mat-action-list') { |
| return 'action-list'; |
| } |
| return null; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatList.prototype.ngOnChanges = /** |
| * @return {?} |
| */ |
| function () { |
| this._stateChanges.next(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatList.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._stateChanges.complete(); |
| }; |
| MatList.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-list, mat-action-list', |
| exportAs: 'matList', |
| template: "<ng-content></ng-content>", |
| host: { |
| 'class': 'mat-list mat-list-base' |
| }, |
| styles: [".mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list-base .mat-subheader{margin:0}.mat-list-base{padding-top:8px;display:block;-webkit-tap-highlight-color:transparent}.mat-list-base .mat-subheader{height:48px;line-height:16px}.mat-list-base .mat-subheader:first-child{margin-top:-8px}.mat-list-base .mat-list-item,.mat-list-base .mat-list-option{display:block;height:48px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base .mat-list-item .mat-list-item-content,.mat-list-base .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-base .mat-list-item .mat-list-item-content-reverse,.mat-list-base .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-base .mat-list-item .mat-list-item-ripple,.mat-list-base .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar,.mat-list-base .mat-list-option.mat-list-item-with-avatar{height:56px}.mat-list-base .mat-list-item.mat-2-line,.mat-list-base .mat-list-option.mat-2-line{height:72px}.mat-list-base .mat-list-item.mat-3-line,.mat-list-base .mat-list-option.mat-3-line{height:88px}.mat-list-base .mat-list-item.mat-multi-line,.mat-list-base .mat-list-option.mat-multi-line{height:auto}.mat-list-base .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base .mat-list-item .mat-list-text,.mat-list-base .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base .mat-list-item .mat-list-text>*,.mat-list-base .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list-base .mat-list-item .mat-list-text:empty,.mat-list-base .mat-list-option .mat-list-text:empty{display:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base .mat-list-item .mat-list-avatar,.mat-list-base .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover}.mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list-base .mat-list-item .mat-list-icon,.mat-list-base .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-base .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list-base .mat-list-item .mat-divider,.mat-list-base .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base .mat-list-item .mat-divider,[dir=rtl] .mat-list-base .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list-base[dense]{padding-top:4px;display:block}.mat-list-base[dense] .mat-subheader{height:40px;line-height:8px}.mat-list-base[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list-base[dense] .mat-list-item,.mat-list-base[dense] .mat-list-option{display:block;height:40px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-item-content,.mat-list-base[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-base[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list-base[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-base[dense] .mat-list-item .mat-list-item-ripple,.mat-list-base[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar{height:48px}.mat-list-base[dense] .mat-list-item.mat-2-line,.mat-list-base[dense] .mat-list-option.mat-2-line{height:60px}.mat-list-base[dense] .mat-list-item.mat-3-line,.mat-list-base[dense] .mat-list-option.mat-3-line{height:76px}.mat-list-base[dense] .mat-list-item.mat-multi-line,.mat-list-base[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list-base[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base[dense] .mat-list-item .mat-list-text,.mat-list-base[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-text>*,.mat-list-base[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list-base[dense] .mat-list-item .mat-list-text:empty,.mat-list-base[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base[dense] .mat-list-item .mat-list-avatar,.mat-list-base[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover}.mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:68px;width:calc(100% - 68px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:68px}.mat-list-base[dense] .mat-list-item .mat-list-icon,.mat-list-base[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-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list-base[dense] .mat-list-item .mat-divider,.mat-list-base[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base[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{cursor:pointer;outline:0}mat-action-list button{background:0 0;color:inherit;border:none;font:inherit;outline:inherit;-webkit-tap-highlight-color:transparent;text-align:left}[dir=rtl] mat-action-list button{text-align:right}mat-action-list button::-moz-focus-inner{border:0}mat-action-list .mat-list-item{cursor:pointer;outline:inherit}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer;outline:0}@media (-ms-high-contrast:active){.mat-selection-list:focus{outline-style:dotted}.mat-list-option:focus,.mat-list-option:hover,.mat-nav-list .mat-list-item:focus,.mat-nav-list .mat-list-item:hover,mat-action-list .mat-list-item:focus,mat-action-list .mat-list-item:hover{outline:dotted 1px}}@media (hover:none){.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover{background:0 0}}"], |
| inputs: ['disableRipple'], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatList.ctorParameters = function () { return [ |
| { type: core.ElementRef } |
| ]; }; |
| return MatList; |
| }(_MatListMixinBase)); |
| /** |
| * Directive whose purpose is to add the mat- CSS styling to this selector. |
| * \@docs-private |
| */ |
| var MatListAvatarCssMatStyler = /** @class */ (function () { |
| function MatListAvatarCssMatStyler() { |
| } |
| MatListAvatarCssMatStyler.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-list-avatar], [matListAvatar]', |
| host: { 'class': 'mat-list-avatar' } |
| },] }, |
| ]; |
| return MatListAvatarCssMatStyler; |
| }()); |
| /** |
| * Directive whose purpose is to add the mat- CSS styling to this selector. |
| * \@docs-private |
| */ |
| var MatListIconCssMatStyler = /** @class */ (function () { |
| function MatListIconCssMatStyler() { |
| } |
| MatListIconCssMatStyler.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-list-icon], [matListIcon]', |
| host: { 'class': 'mat-list-icon' } |
| },] }, |
| ]; |
| return MatListIconCssMatStyler; |
| }()); |
| /** |
| * Directive whose purpose is to add the mat- CSS styling to this selector. |
| * \@docs-private |
| */ |
| var MatListSubheaderCssMatStyler = /** @class */ (function () { |
| function MatListSubheaderCssMatStyler() { |
| } |
| MatListSubheaderCssMatStyler.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-subheader], [matSubheader]', |
| host: { 'class': 'mat-subheader' } |
| },] }, |
| ]; |
| return MatListSubheaderCssMatStyler; |
| }()); |
| /** |
| * An item within a Material Design list. |
| */ |
| var MatListItem = /** @class */ (function (_super) { |
| __extends(MatListItem, _super); |
| function MatListItem(_element, _changeDetectorRef, navList, list) { |
| var _this = _super.call(this) || this; |
| _this._element = _element; |
| _this._isInteractiveList = false; |
| _this._destroyed = new rxjs.Subject(); |
| _this._isInteractiveList = !!(navList || (list && list._getListType() === 'action-list')); |
| _this._list = navList || list; |
| // If no type attributed is specified for <button>, set it to "button". |
| // If a type attribute is already specified, do nothing. |
| /** @type {?} */ |
| var element = _this._getHostElement(); |
| if (element.nodeName.toLowerCase() === 'button' && !element.hasAttribute('type')) { |
| element.setAttribute('type', 'button'); |
| } |
| if (_this._list) { |
| // React to changes in the state of the parent list since |
| // some of the item's properties depend on it (e.g. `disableRipple`). |
| _this._list._stateChanges.pipe(operators.takeUntil(_this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _changeDetectorRef.markForCheck(); |
| })); |
| } |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatListItem.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| setLines(this._lines, this._element); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatListItem.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._destroyed.next(); |
| this._destroyed.complete(); |
| }; |
| /** 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._isInteractiveList || this.disableRipple || |
| !!(this._list && this._list.disableRipple); |
| }; |
| /** 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], button[mat-list-item]', |
| exportAs: 'matListItem', |
| host: { |
| 'class': 'mat-list-item', |
| // @breaking-change 8.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`. |
| '[class.mat-list-item-avatar]': '_avatar || _icon', |
| '[class.mat-list-item-with-avatar]': '_avatar || _icon', |
| }, |
| 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, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatListItem.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.ChangeDetectorRef }, |
| { type: MatNavList, decorators: [{ type: core.Optional }] }, |
| { type: MatList, decorators: [{ type: core.Optional }] } |
| ]; }; |
| MatListItem.propDecorators = { |
| _lines: [{ type: core.ContentChildren, args: [MatLine, { descendants: true },] }], |
| _avatar: [{ type: core.ContentChild, args: [MatListAvatarCssMatStyler, { static: false },] }], |
| _icon: [{ type: core.ContentChild, args: [MatListIconCssMatStyler, { static: false },] }] |
| }; |
| return MatListItem; |
| }(_MatListItemMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * \@docs-private |
| */ |
| var /** |
| * \@docs-private |
| */ |
| MatSelectionListBase = /** @class */ (function () { |
| function MatSelectionListBase() { |
| } |
| return MatSelectionListBase; |
| }()); |
| /** @type {?} */ |
| var _MatSelectionListMixinBase = mixinDisableRipple(MatSelectionListBase); |
| /** |
| * \@docs-private |
| */ |
| var /** |
| * \@docs-private |
| */ |
| MatListOptionBase = /** @class */ (function () { |
| function MatListOptionBase() { |
| } |
| return MatListOptionBase; |
| }()); |
| /** @type {?} */ |
| var _MatListOptionMixinBase = mixinDisableRipple(MatListOptionBase); |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_SELECTION_LIST_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatSelectionList; })), |
| multi: true |
| }; |
| /** |
| * Change event that is being fired whenever the selected state of an option changes. |
| */ |
| var /** |
| * Change event that is being fired whenever the selected state of an option changes. |
| */ |
| MatSelectionListChange = /** @class */ (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 = /** @class */ (function (_super) { |
| __extends(MatListOption, _super); |
| function MatListOption(_element, _changeDetector, selectionList) { |
| var _this = _super.call(this) || this; |
| _this._element = _element; |
| _this._changeDetector = _changeDetector; |
| _this.selectionList = selectionList; |
| _this._selected = false; |
| _this._disabled = false; |
| _this._hasFocus = false; |
| /** |
| * Whether the label should appear before or after the checkbox. Defaults to 'after' |
| */ |
| _this.checkboxPosition = 'after'; |
| return _this; |
| } |
| Object.defineProperty(MatListOption.prototype, "color", { |
| /** Theme color of the list option. This sets the color of the checkbox. */ |
| get: /** |
| * Theme color of the list option. This sets the color of the checkbox. |
| * @return {?} |
| */ |
| function () { return this._color || this.selectionList.color; }, |
| set: /** |
| * @param {?} newValue |
| * @return {?} |
| */ |
| function (newValue) { this._color = newValue; }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatListOption.prototype, "value", { |
| /** Value of the option */ |
| get: /** |
| * Value of the option |
| * @return {?} |
| */ |
| function () { return this._value; }, |
| set: /** |
| * @param {?} newValue |
| * @return {?} |
| */ |
| function (newValue) { |
| if (this.selected && newValue !== this.value) { |
| this.selected = false; |
| } |
| this._value = newValue; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatListOption.prototype, "disabled", { |
| /** Whether the option is disabled. */ |
| get: /** |
| * Whether the option is disabled. |
| * @return {?} |
| */ |
| function () { return this._disabled || (this.selectionList && this.selectionList.disabled); }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var newValue = coercion.coerceBooleanProperty(value); |
| if (newValue !== this._disabled) { |
| this._disabled = newValue; |
| this._changeDetector.markForCheck(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatListOption.prototype, "selected", { |
| /** Whether the option is selected. */ |
| get: /** |
| * Whether the option is selected. |
| * @return {?} |
| */ |
| function () { return this.selectionList.selectedOptions.isSelected(this); }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var 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; |
| /** @type {?} */ |
| var list = this.selectionList; |
| if (list._value && list._value.some((/** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { return list.compareWith(value, _this._value); }))) { |
| this._setSelected(true); |
| } |
| /** @type {?} */ |
| var wasSelected = 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((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this._selected || wasSelected) { |
| _this.selected = true; |
| _this._changeDetector.markForCheck(); |
| } |
| })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatListOption.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| setLines(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((/** |
| * @return {?} |
| */ |
| function () { |
| _this.selected = false; |
| })); |
| } |
| /** @type {?} */ |
| var hadFocus = this._hasFocus; |
| /** @type {?} */ |
| var newActiveItem = this.selectionList._removeOptionFromList(this); |
| // Only move focus if this option was focused at the time it was destroyed. |
| if (hadFocus && newActiveItem) { |
| newActiveItem.focus(); |
| } |
| }; |
| /** 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); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatListOption.prototype._handleFocus = /** |
| * @return {?} |
| */ |
| function () { |
| this.selectionList._setFocusedOption(this); |
| this._hasFocus = true; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatListOption.prototype._handleBlur = /** |
| * @return {?} |
| */ |
| function () { |
| this.selectionList._onTouched(); |
| this._hasFocus = false; |
| }; |
| /** 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. Returns whether the value has changed. */ |
| /** |
| * Sets the selected state of the option. Returns whether the value has changed. |
| * @param {?} selected |
| * @return {?} |
| */ |
| MatListOption.prototype._setSelected = /** |
| * Sets the selected state of the option. Returns whether the value has changed. |
| * @param {?} selected |
| * @return {?} |
| */ |
| function (selected) { |
| if (selected === this._selected) { |
| return false; |
| } |
| this._selected = selected; |
| if (selected) { |
| this.selectionList.selectedOptions.select(this); |
| } |
| else { |
| this.selectionList.selectedOptions.deselect(this); |
| } |
| this._changeDetector.markForCheck(); |
| return true; |
| }; |
| /** |
| * Notifies Angular that the option needs to be checked in the next change detection run. Mainly |
| * used to trigger an update of the list option if the disabled state of the selection list |
| * changed. |
| */ |
| /** |
| * Notifies Angular that the option needs to be checked in the next change detection run. Mainly |
| * used to trigger an update of the list option if the disabled state of the selection list |
| * changed. |
| * @return {?} |
| */ |
| MatListOption.prototype._markForCheck = /** |
| * Notifies Angular that the option needs to be checked in the next change detection run. Mainly |
| * used to trigger an update of the list option if the disabled state of the selection list |
| * changed. |
| * @return {?} |
| */ |
| function () { |
| this._changeDetector.markForCheck(); |
| }; |
| 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-with-avatar]': '_avatar || _icon', |
| // Manually set the "primary" or "warn" class if the color has been explicitly |
| // set to "primary" or "warn". The pseudo checkbox picks up these classes for |
| // its theme. The accent theme palette is the default and doesn't need to be set. |
| '[class.mat-primary]': 'color === "primary"', |
| '[class.mat-warn]': 'color === "warn"', |
| '[attr.aria-selected]': 'selected', |
| '[attr.aria-disabled]': 'disabled', |
| }, |
| template: "<div class=\"mat-list-item-content\" [class.mat-list-item-content-reverse]=\"checkboxPosition == 'after'\"><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><ng-content select=\"[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]\"></ng-content></div>", |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatListOption.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.ChangeDetectorRef }, |
| { type: MatSelectionList, decorators: [{ type: core.Inject, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatSelectionList; })),] }] } |
| ]; }; |
| MatListOption.propDecorators = { |
| _avatar: [{ type: core.ContentChild, args: [MatListAvatarCssMatStyler, { static: false },] }], |
| _icon: [{ type: core.ContentChild, args: [MatListIconCssMatStyler, { static: false },] }], |
| _lines: [{ type: core.ContentChildren, args: [MatLine,] }], |
| _text: [{ type: core.ViewChild, args: ['text', { static: false },] }], |
| checkboxPosition: [{ type: core.Input }], |
| color: [{ type: core.Input }], |
| value: [{ type: core.Input }], |
| disabled: [{ type: core.Input }], |
| selected: [{ type: core.Input }] |
| }; |
| return MatListOption; |
| }(_MatListOptionMixinBase)); |
| /** |
| * Material Design list component where each item is a selectable option. Behaves as a listbox. |
| */ |
| var MatSelectionList = /** @class */ (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(); |
| /** |
| * Tabindex of the selection list. |
| */ |
| _this.tabIndex = 0; |
| /** |
| * Theme color of the selection list. This sets the checkbox color for all list options. |
| */ |
| _this.color = 'accent'; |
| /** |
| * Function used for comparing an option against the selected value when determining which |
| * options should appear as selected. The first argument is the value of an options. The second |
| * one is a value from the selected value. A boolean must be returned. |
| */ |
| _this.compareWith = (/** |
| * @param {?} a1 |
| * @param {?} a2 |
| * @return {?} |
| */ |
| function (a1, a2) { return a1 === a2; }); |
| _this._disabled = false; |
| /** |
| * 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 = (/** |
| * @param {?} _ |
| * @return {?} |
| */ |
| function (_) { }); |
| /** |
| * Emits when the list has been destroyed. |
| */ |
| _this._destroyed = new rxjs.Subject(); |
| /** |
| * View to model callback that should be called if the list or its options lost focus. |
| */ |
| _this._onTouched = (/** |
| * @return {?} |
| */ |
| function () { }); |
| _this.tabIndex = parseInt(tabIndex) || 0; |
| return _this; |
| } |
| Object.defineProperty(MatSelectionList.prototype, "disabled", { |
| /** Whether the selection list is disabled. */ |
| get: /** |
| * Whether the selection list is disabled. |
| * @return {?} |
| */ |
| function () { return this._disabled; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._disabled = coercion.coerceBooleanProperty(value); |
| // The `MatSelectionList` and `MatListOption` are using the `OnPush` change detection |
| // strategy. Therefore the options will not check for any changes if the `MatSelectionList` |
| // changed its state. Since we know that a change to `disabled` property of the list affects |
| // the state of the options, we manually mark each option for check. |
| this._markOptionsForCheck(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatSelectionList.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._keyManager = new a11y.FocusKeyManager(this.options) |
| .withWrap() |
| .withTypeAhead() |
| // Allow disabled items to be focusable. For accessibility reasons, there must be a way for |
| // screenreader users, that allows reading the different options of the list. |
| .skipPredicate((/** |
| * @return {?} |
| */ |
| function () { return false; })) |
| .withAllowedModifierKeys(['shiftKey']); |
| if (this._value) { |
| this._setOptionsFromValues(this._value); |
| } |
| // Sync external changes to the model back to the options. |
| this.selectedOptions.onChange.pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| 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; |
| } |
| } |
| })); |
| }; |
| /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| MatSelectionList.prototype.ngOnChanges = /** |
| * @param {?} changes |
| * @return {?} |
| */ |
| function (changes) { |
| /** @type {?} */ |
| var disableRippleChanges = changes['disableRipple']; |
| /** @type {?} */ |
| var colorChanges = changes['color']; |
| if ((disableRippleChanges && !disableRippleChanges.firstChange) || |
| (colorChanges && !colorChanges.firstChange)) { |
| this._markOptionsForCheck(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSelectionList.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._destroyed.next(); |
| this._destroyed.complete(); |
| this._isDestroyed = true; |
| }; |
| /** Focuses the selection list. */ |
| /** |
| * Focuses the selection list. |
| * @return {?} |
| */ |
| MatSelectionList.prototype.focus = /** |
| * Focuses 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._setAllOptionsSelected(true); |
| }; |
| /** Deselects all of the options. */ |
| /** |
| * Deselects all of the options. |
| * @return {?} |
| */ |
| MatSelectionList.prototype.deselectAll = /** |
| * Deselects all of the options. |
| * @return {?} |
| */ |
| function () { |
| this._setAllOptionsSelected(false); |
| }; |
| /** 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.updateActiveItem(option); |
| }; |
| /** |
| * Removes an option from the selection list and updates the active item. |
| * @returns Currently-active item. |
| */ |
| /** |
| * Removes an option from the selection list and updates the active item. |
| * @param {?} option |
| * @return {?} Currently-active item. |
| */ |
| MatSelectionList.prototype._removeOptionFromList = /** |
| * Removes an option from the selection list and updates the active item. |
| * @param {?} option |
| * @return {?} Currently-active item. |
| */ |
| function (option) { |
| /** @type {?} */ |
| var optionIndex = this._getOptionIndex(option); |
| if (optionIndex > -1 && this._keyManager.activeItemIndex === optionIndex) { |
| // Check whether the option is the last item |
| if (optionIndex > 0) { |
| this._keyManager.updateActiveItem(optionIndex - 1); |
| } |
| else if (optionIndex === 0 && this.options.length > 1) { |
| this._keyManager.updateActiveItem(Math.min(optionIndex + 1, this.options.length - 1)); |
| } |
| } |
| return this._keyManager.activeItem; |
| }; |
| /** 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) { |
| /** @type {?} */ |
| var keyCode = event.keyCode; |
| /** @type {?} */ |
| var manager = this._keyManager; |
| /** @type {?} */ |
| var previousFocusIndex = manager.activeItemIndex; |
| /** @type {?} */ |
| var hasModifier = keycodes.hasModifierKey(event); |
| switch (keyCode) { |
| case keycodes.SPACE: |
| case keycodes.ENTER: |
| if (!hasModifier) { |
| this._toggleFocusedOption(); |
| // Always prevent space from scrolling the page since the list has focus |
| event.preventDefault(); |
| } |
| break; |
| case keycodes.HOME: |
| case keycodes.END: |
| if (!hasModifier) { |
| keyCode === keycodes.HOME ? manager.setFirstItemActive() : manager.setLastItemActive(); |
| event.preventDefault(); |
| } |
| break; |
| case keycodes.A: |
| if (keycodes.hasModifierKey(event, 'ctrlKey')) { |
| this.options.find((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return !option.selected; })) ? this.selectAll() : this.deselectAll(); |
| event.preventDefault(); |
| } |
| break; |
| default: |
| manager.onKeydown(event); |
| } |
| if ((keyCode === keycodes.UP_ARROW || keyCode === keycodes.DOWN_ARROW) && event.shiftKey && |
| manager.activeItemIndex !== previousFocusIndex) { |
| this._toggleFocusedOption(); |
| } |
| }; |
| /** 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 () { |
| // Stop reporting value changes after the list has been destroyed. This avoids |
| // cases where the list might wrongly reset its value once it is removed, but |
| // the form control is still live. |
| if (this.options && !this._isDestroyed) { |
| /** @type {?} */ |
| var value = this._getSelectedOptionValues(); |
| this._onChange(value); |
| this._value = value; |
| } |
| }; |
| /** 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) { |
| this._value = values; |
| if (this.options) { |
| this._setOptionsFromValues(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) { |
| this.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; |
| }; |
| /** Sets the selected options based on the specified values. */ |
| /** |
| * Sets the selected options based on the specified values. |
| * @private |
| * @param {?} values |
| * @return {?} |
| */ |
| MatSelectionList.prototype._setOptionsFromValues = /** |
| * Sets the selected options based on the specified values. |
| * @private |
| * @param {?} values |
| * @return {?} |
| */ |
| function (values) { |
| var _this = this; |
| this.options.forEach((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option._setSelected(false); })); |
| values.forEach((/** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var correspondingOption = _this.options.find((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { |
| // Skip options that are already in the model. This allows us to handle cases |
| // where the same primitive value is selected multiple times. |
| return option.selected ? false : _this.compareWith(option.value, value); |
| })); |
| if (correspondingOption) { |
| correspondingOption._setSelected(true); |
| } |
| })); |
| }; |
| /** Returns the values of the selected options. */ |
| /** |
| * Returns the values of the selected options. |
| * @private |
| * @return {?} |
| */ |
| MatSelectionList.prototype._getSelectedOptionValues = /** |
| * Returns the values of the selected options. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this.options.filter((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option.selected; })).map((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option.value; })); |
| }; |
| /** Toggles the state of the currently focused option if enabled. */ |
| /** |
| * Toggles the state of the currently focused option if enabled. |
| * @private |
| * @return {?} |
| */ |
| MatSelectionList.prototype._toggleFocusedOption = /** |
| * Toggles the state of the currently focused option if enabled. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var focusedIndex = this._keyManager.activeItemIndex; |
| if (focusedIndex != null && this._isValidIndex(focusedIndex)) { |
| /** @type {?} */ |
| var focusedOption = this.options.toArray()[focusedIndex]; |
| if (focusedOption && !focusedOption.disabled) { |
| focusedOption.toggle(); |
| // Emit a change event because the focused option changed its state through user |
| // interaction. |
| this._emitChangeEvent(focusedOption); |
| } |
| } |
| }; |
| /** |
| * Sets the selected state on all of the options |
| * and emits an event if anything changed. |
| */ |
| /** |
| * Sets the selected state on all of the options |
| * and emits an event if anything changed. |
| * @private |
| * @param {?} isSelected |
| * @return {?} |
| */ |
| MatSelectionList.prototype._setAllOptionsSelected = /** |
| * Sets the selected state on all of the options |
| * and emits an event if anything changed. |
| * @private |
| * @param {?} isSelected |
| * @return {?} |
| */ |
| function (isSelected) { |
| // Keep track of whether anything changed, because we only want to |
| // emit the changed event when something actually changed. |
| /** @type {?} */ |
| var hasChanged = false; |
| this.options.forEach((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { |
| if (option._setSelected(isSelected)) { |
| hasChanged = true; |
| } |
| })); |
| if (hasChanged) { |
| this._reportValueChange(); |
| } |
| }; |
| /** |
| * Utility to ensure all indexes are valid. |
| * @param index The index to be checked. |
| * @returns True if the index is valid for our list of options. |
| */ |
| /** |
| * Utility to ensure all indexes are valid. |
| * @private |
| * @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. |
| * @private |
| * @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. */ |
| /** |
| * Returns the index of the specified list option. |
| * @private |
| * @param {?} option |
| * @return {?} |
| */ |
| MatSelectionList.prototype._getOptionIndex = /** |
| * Returns the index of the specified list option. |
| * @private |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { |
| return this.options.toArray().indexOf(option); |
| }; |
| /** Marks all the options to be checked in the next change detection run. */ |
| /** |
| * Marks all the options to be checked in the next change detection run. |
| * @private |
| * @return {?} |
| */ |
| MatSelectionList.prototype._markOptionsForCheck = /** |
| * Marks all the options to be checked in the next change detection run. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this.options) { |
| this.options.forEach((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option._markForCheck(); })); |
| } |
| }; |
| MatSelectionList.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-selection-list', |
| exportAs: 'matSelectionList', |
| inputs: ['disableRipple'], |
| host: { |
| 'role': 'listbox', |
| '[tabIndex]': 'tabIndex', |
| 'class': 'mat-selection-list mat-list-base', |
| '(blur)': '_onTouched()', |
| '(keydown)': '_keydown($event)', |
| 'aria-multiselectable': 'true', |
| '[attr.aria-disabled]': 'disabled.toString()', |
| }, |
| template: '<ng-content></ng-content>', |
| styles: [".mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list-base .mat-subheader{margin:0}.mat-list-base{padding-top:8px;display:block;-webkit-tap-highlight-color:transparent}.mat-list-base .mat-subheader{height:48px;line-height:16px}.mat-list-base .mat-subheader:first-child{margin-top:-8px}.mat-list-base .mat-list-item,.mat-list-base .mat-list-option{display:block;height:48px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base .mat-list-item .mat-list-item-content,.mat-list-base .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-base .mat-list-item .mat-list-item-content-reverse,.mat-list-base .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-base .mat-list-item .mat-list-item-ripple,.mat-list-base .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar,.mat-list-base .mat-list-option.mat-list-item-with-avatar{height:56px}.mat-list-base .mat-list-item.mat-2-line,.mat-list-base .mat-list-option.mat-2-line{height:72px}.mat-list-base .mat-list-item.mat-3-line,.mat-list-base .mat-list-option.mat-3-line{height:88px}.mat-list-base .mat-list-item.mat-multi-line,.mat-list-base .mat-list-option.mat-multi-line{height:auto}.mat-list-base .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base .mat-list-item .mat-list-text,.mat-list-base .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base .mat-list-item .mat-list-text>*,.mat-list-base .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list-base .mat-list-item .mat-list-text:empty,.mat-list-base .mat-list-option .mat-list-text:empty{display:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base .mat-list-item .mat-list-avatar,.mat-list-base .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover}.mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list-base .mat-list-item .mat-list-icon,.mat-list-base .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-base .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list-base .mat-list-item .mat-divider,.mat-list-base .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base .mat-list-item .mat-divider,[dir=rtl] .mat-list-base .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list-base[dense]{padding-top:4px;display:block}.mat-list-base[dense] .mat-subheader{height:40px;line-height:8px}.mat-list-base[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list-base[dense] .mat-list-item,.mat-list-base[dense] .mat-list-option{display:block;height:40px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-item-content,.mat-list-base[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-base[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list-base[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-base[dense] .mat-list-item .mat-list-item-ripple,.mat-list-base[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar{height:48px}.mat-list-base[dense] .mat-list-item.mat-2-line,.mat-list-base[dense] .mat-list-option.mat-2-line{height:60px}.mat-list-base[dense] .mat-list-item.mat-3-line,.mat-list-base[dense] .mat-list-option.mat-3-line{height:76px}.mat-list-base[dense] .mat-list-item.mat-multi-line,.mat-list-base[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list-base[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base[dense] .mat-list-item .mat-list-text,.mat-list-base[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-text>*,.mat-list-base[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mat-list-base[dense] .mat-list-item .mat-list-text:empty,.mat-list-base[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base[dense] .mat-list-item .mat-list-avatar,.mat-list-base[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover}.mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:68px;width:calc(100% - 68px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:68px}.mat-list-base[dense] .mat-list-item .mat-list-icon,.mat-list-base[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-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list-base[dense] .mat-list-item .mat-divider,.mat-list-base[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base[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{cursor:pointer;outline:0}mat-action-list button{background:0 0;color:inherit;border:none;font:inherit;outline:inherit;-webkit-tap-highlight-color:transparent;text-align:left}[dir=rtl] mat-action-list button{text-align:right}mat-action-list button::-moz-focus-inner{border:0}mat-action-list .mat-list-item{cursor:pointer;outline:inherit}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer;outline:0}@media (-ms-high-contrast:active){.mat-selection-list:focus{outline-style:dotted}.mat-list-option:focus,.mat-list-option:hover,.mat-nav-list .mat-list-item:focus,.mat-nav-list .mat-list-item:hover,mat-action-list .mat-list-item:focus,mat-action-list .mat-list-item:hover{outline:dotted 1px}}@media (hover:none){.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover{background:0 0}}"], |
| encapsulation: core.ViewEncapsulation.None, |
| providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR], |
| changeDetection: core.ChangeDetectionStrategy.OnPush |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatSelectionList.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] } |
| ]; }; |
| MatSelectionList.propDecorators = { |
| options: [{ type: core.ContentChildren, args: [MatListOption, { descendants: true },] }], |
| selectionChange: [{ type: core.Output }], |
| tabIndex: [{ type: core.Input }], |
| color: [{ type: core.Input }], |
| compareWith: [{ type: core.Input }], |
| disabled: [{ type: core.Input }] |
| }; |
| return MatSelectionList; |
| }(_MatSelectionListMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatListModule = /** @class */ (function () { |
| function MatListModule() { |
| } |
| MatListModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatLineModule, MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, common.CommonModule], |
| exports: [ |
| MatList, |
| MatNavList, |
| MatListItem, |
| MatListAvatarCssMatStyler, |
| MatLineModule, |
| MatCommonModule, |
| MatListIconCssMatStyler, |
| MatListSubheaderCssMatStyler, |
| MatPseudoCheckboxModule, |
| MatSelectionList, |
| MatListOption, |
| MatDividerModule |
| ], |
| declarations: [ |
| MatList, |
| MatNavList, |
| MatListItem, |
| MatListAvatarCssMatStyler, |
| MatListIconCssMatStyler, |
| MatListSubheaderCssMatStyler, |
| MatSelectionList, |
| MatListOption |
| ], |
| },] }, |
| ]; |
| return MatListModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 |
| * \@docs-private |
| * @type {?} |
| */ |
| 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$1.trigger('transformMenu', [ |
| animations$1.state('void', animations$1.style({ |
| opacity: 0, |
| transform: 'scale(0.8)' |
| })), |
| animations$1.transition('void => enter', animations$1.group([ |
| animations$1.query('.mat-menu-content, .mat-mdc-menu-content', animations$1.animate('100ms linear', animations$1.style({ |
| opacity: 1 |
| }))), |
| animations$1.animate('120ms cubic-bezier(0, 0, 0.2, 1)', animations$1.style({ transform: 'scale(1)' })), |
| ])), |
| animations$1.transition('* => void', animations$1.animate('100ms 25ms linear', animations$1.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$1.trigger('fadeInItems', [ |
| // TODO(crisbeto): this is inside the `transformMenu` |
| // now. Remove next time we do breaking changes. |
| animations$1.state('showing', animations$1.style({ opacity: 1 })), |
| animations$1.transition('void => *', [ |
| animations$1.style({ opacity: 0 }), |
| animations$1.animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)') |
| ]) |
| ]) |
| }; |
| /** |
| * @deprecated |
| * \@breaking-change 8.0.0 |
| * \@docs-private |
| * @type {?} |
| */ |
| var fadeInItems = matMenuAnimations.fadeInItems; |
| /** |
| * @deprecated |
| * \@breaking-change 8.0.0 |
| * \@docs-private |
| * @type {?} |
| */ |
| var transformMenu = matMenuAnimations.transformMenu; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Menu content that will be rendered lazily once the menu is opened. |
| */ |
| var MatMenuContent = /** @class */ (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; |
| /** |
| * Emits when the menu content has been attached. |
| */ |
| this._attached = new rxjs.Subject(); |
| } |
| /** |
| * 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); |
| } |
| this.detach(); |
| if (!this._outlet) { |
| this._outlet = new portal.DomPortalOutlet(this._document.createElement('div'), this._componentFactoryResolver, this._appRef, this._injector); |
| } |
| /** @type {?} */ |
| var element = this._template.elementRef.nativeElement; |
| // 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. |
| (/** @type {?} */ (element.parentNode)).insertBefore(this._outlet.outletElement, element); |
| this._portal.attach(this._outlet, context); |
| this._attached.next(); |
| }; |
| /** |
| * Detaches the content. |
| * @docs-private |
| */ |
| /** |
| * Detaches the content. |
| * \@docs-private |
| * @return {?} |
| */ |
| MatMenuContent.prototype.detach = /** |
| * Detaches the content. |
| * \@docs-private |
| * @return {?} |
| */ |
| function () { |
| if (this._portal.isAttached) { |
| this._portal.detach(); |
| } |
| }; |
| /** |
| * @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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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("matMenuTriggerFor: 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("xPosition value must be either 'before' or after'.\n Example: <mat-menu xPosition=\"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("yPosition value must be either 'above' or below'.\n Example: <mat-menu yPosition=\"above\" #menu=\"matMenu\"></mat-menu>"); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token used to provide the parent menu to menu-specific components. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_MENU_PANEL = new core.InjectionToken('MAT_MENU_PANEL'); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatMenuItem. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatMenuItem. |
| /** |
| * \@docs-private |
| */ |
| MatMenuItemBase = /** @class */ (function () { |
| function MatMenuItemBase() { |
| } |
| return MatMenuItemBase; |
| }()); |
| /** @type {?} */ |
| 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 = /** @class */ (function (_super) { |
| __extends(MatMenuItem, _super); |
| function MatMenuItem(_elementRef, document, _focusMonitor, _parentMenu) { |
| var _this = |
| // @breaking-change 8.0.0 make `_focusMonitor` and `document` required params. |
| _super.call(this) || this; |
| _this._elementRef = _elementRef; |
| _this._focusMonitor = _focusMonitor; |
| _this._parentMenu = _parentMenu; |
| /** |
| * ARIA role for the menu item. |
| */ |
| _this.role = 'menuitem'; |
| /** |
| * Stream that emits when the menu item is hovered. |
| */ |
| _this._hovered = new rxjs.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._elementRef, false); |
| } |
| if (_parentMenu && _parentMenu.addItem) { |
| _parentMenu.addItem(_this); |
| } |
| _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._elementRef); |
| } |
| if (this._parentMenu && this._parentMenu.removeItem) { |
| this._parentMenu.removeItem(this); |
| } |
| 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. */ |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| /** |
| * Prevents the default element actions if it is disabled. |
| * @param {?} event |
| * @return {?} |
| */ |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| MatMenuItem.prototype._checkDisabled = /** |
| * Prevents the default element actions if it is disabled. |
| * @param {?} event |
| * @return {?} |
| */ |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| function (event) { |
| if (this.disabled) { |
| event.preventDefault(); |
| event.stopPropagation(); |
| } |
| }; |
| /** Emits to the hover stream. */ |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| /** |
| * Emits to the hover stream. |
| * @return {?} |
| */ |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| MatMenuItem.prototype._handleMouseEnter = /** |
| * Emits to the hover stream. |
| * @return {?} |
| */ |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| function () { |
| 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 () { |
| /** @type {?} */ |
| var element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| var textNodeType = this._document ? this._document.TEXT_NODE : 3; |
| /** @type {?} */ |
| var output = ''; |
| if (element.childNodes) { |
| /** @type {?} */ |
| var 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 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: { |
| '[attr.role]': 'role', |
| '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', |
| }, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| 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 }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_MENU_PANEL,] }, { type: core.Optional }] } |
| ]; }; |
| MatMenuItem.propDecorators = { |
| role: [{ type: core.Input }], |
| _checkDisabled: [{ type: core.HostListener, args: ['click', ['$event'],] }], |
| _handleMouseEnter: [{ type: core.HostListener, args: ['mouseenter',] }] |
| }; |
| return MatMenuItem; |
| }(_MatMenuItemMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token to be used to override the default options for `mat-menu`. |
| * @type {?} |
| */ |
| var MAT_MENU_DEFAULT_OPTIONS = new core.InjectionToken('mat-menu-default-options', { |
| providedIn: 'root', |
| factory: MAT_MENU_DEFAULT_OPTIONS_FACTORY |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_MENU_DEFAULT_OPTIONS_FACTORY() { |
| return { |
| overlapTrigger: false, |
| xPosition: 'after', |
| yPosition: 'below', |
| backdropClass: 'cdk-overlay-transparent-backdrop', |
| }; |
| } |
| /** |
| * Start elevation for the menu panel. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_MENU_BASE_ELEVATION = 4; |
| /** |
| * Base class with all of the `MatMenu` functionality. |
| */ |
| // tslint:disable-next-line:class-name |
| var _MatMenuBase = /** @class */ (function () { |
| function _MatMenuBase(_elementRef, _ngZone, _defaultOptions) { |
| this._elementRef = _elementRef; |
| this._ngZone = _ngZone; |
| this._defaultOptions = _defaultOptions; |
| this._xPosition = this._defaultOptions.xPosition; |
| this._yPosition = this._defaultOptions.yPosition; |
| /** |
| * Only the direct descendant menu items. |
| */ |
| this._directDescendantItems = new core.QueryList(); |
| /** |
| * Subscription to tab events on the menu panel |
| */ |
| this._tabSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * Config object to be passed into the menu's ngClass |
| */ |
| this._classList = {}; |
| /** |
| * Current state of the panel animation. |
| */ |
| this._panelAnimationState = 'void'; |
| /** |
| * Emits whenever an animation on the menu completes. |
| */ |
| this._animationDone = new rxjs.Subject(); |
| /** |
| * Class to be added to the backdrop element. |
| */ |
| this.backdropClass = this._defaultOptions.backdropClass; |
| this._overlapTrigger = this._defaultOptions.overlapTrigger; |
| this._hasBackdrop = this._defaultOptions.hasBackdrop; |
| /** |
| * Event emitted when the menu is closed. |
| */ |
| this.closed = new core.EventEmitter(); |
| /** |
| * Event emitted when the menu is closed. |
| * @deprecated Switch to `closed` instead |
| * \@breaking-change 8.0.0 |
| */ |
| this.close = this.closed; |
| } |
| Object.defineProperty(_MatMenuBase.prototype, "xPosition", { |
| /** Position of the menu in the X axis. */ |
| 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(_MatMenuBase.prototype, "yPosition", { |
| /** Position of the menu in the Y axis. */ |
| 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(_MatMenuBase.prototype, "overlapTrigger", { |
| /** Whether the menu should overlap its trigger. */ |
| 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(_MatMenuBase.prototype, "hasBackdrop", { |
| /** Whether the menu has a backdrop. */ |
| get: /** |
| * Whether the menu has a backdrop. |
| * @return {?} |
| */ |
| function () { return this._hasBackdrop; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._hasBackdrop = coercion.coerceBooleanProperty(value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(_MatMenuBase.prototype, "panelClass", { |
| /** |
| * 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 |
| */ |
| 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) { |
| var _this = this; |
| /** @type {?} */ |
| var previousPanelClass = this._previousPanelClass; |
| if (previousPanelClass && previousPanelClass.length) { |
| previousPanelClass.split(' ').forEach((/** |
| * @param {?} className |
| * @return {?} |
| */ |
| function (className) { |
| _this._classList[className] = false; |
| })); |
| } |
| this._previousPanelClass = classes; |
| if (classes && classes.length) { |
| classes.split(' ').forEach((/** |
| * @param {?} className |
| * @return {?} |
| */ |
| function (className) { |
| _this._classList[className] = true; |
| })); |
| this._elementRef.nativeElement.className = ''; |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(_MatMenuBase.prototype, "classList", { |
| /** |
| * 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. |
| * @breaking-change 8.0.0 |
| */ |
| 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. |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| function () { return this.panelClass; }, |
| set: /** |
| * @param {?} classes |
| * @return {?} |
| */ |
| function (classes) { this.panelClass = classes; }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| _MatMenuBase.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| this.setPositionClasses(); |
| }; |
| /** |
| * @return {?} |
| */ |
| _MatMenuBase.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._updateDirectDescendants(); |
| this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems).withWrap().withTypeAhead(); |
| this._tabSubscription = this._keyManager.tabOut.subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this.closed.emit('tab'); })); |
| }; |
| /** |
| * @return {?} |
| */ |
| _MatMenuBase.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._directDescendantItems.destroy(); |
| 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 {?} |
| */ |
| _MatMenuBase.prototype._hovered = /** |
| * Stream that emits whenever the hovered menu item changes. |
| * @return {?} |
| */ |
| function () { |
| return this._directDescendantItems.changes.pipe(operators.startWith(this._directDescendantItems), operators.switchMap((/** |
| * @param {?} items |
| * @return {?} |
| */ |
| function (items) { return rxjs.merge.apply(void 0, items.map((/** |
| * @param {?} item |
| * @return {?} |
| */ |
| function (item) { return item._hovered; }))); }))); |
| }; |
| /* |
| * Registers a menu item with the menu. |
| * @docs-private |
| * @deprecated No longer being used. To be removed. |
| * @breaking-change 9.0.0 |
| */ |
| /* |
| * Registers a menu item with the menu. |
| * @docs-private |
| * @deprecated No longer being used. To be removed. |
| * @breaking-change 9.0.0 |
| */ |
| /** |
| * @param {?} _item |
| * @return {?} |
| */ |
| _MatMenuBase.prototype.addItem = /* |
| * Registers a menu item with the menu. |
| * @docs-private |
| * @deprecated No longer being used. To be removed. |
| * @breaking-change 9.0.0 |
| */ |
| /** |
| * @param {?} _item |
| * @return {?} |
| */ |
| function (_item) { }; |
| /** |
| * Removes an item from the menu. |
| * @docs-private |
| * @deprecated No longer being used. To be removed. |
| * @breaking-change 9.0.0 |
| */ |
| /** |
| * Removes an item from the menu. |
| * \@docs-private |
| * @deprecated No longer being used. To be removed. |
| * \@breaking-change 9.0.0 |
| * @param {?} _item |
| * @return {?} |
| */ |
| _MatMenuBase.prototype.removeItem = /** |
| * Removes an item from the menu. |
| * \@docs-private |
| * @deprecated No longer being used. To be removed. |
| * \@breaking-change 9.0.0 |
| * @param {?} _item |
| * @return {?} |
| */ |
| function (_item) { }; |
| /** 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 {?} |
| */ |
| _MatMenuBase.prototype._handleKeydown = /** |
| * Handle a keyboard event from the menu, delegating to the appropriate action. |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var keyCode = event.keyCode; |
| /** @type {?} */ |
| var manager = this._keyManager; |
| switch (keyCode) { |
| case keycodes.ESCAPE: |
| if (!keycodes.hasModifierKey(event)) { |
| event.preventDefault(); |
| this.closed.emit('keydown'); |
| } |
| 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; |
| case keycodes.HOME: |
| case keycodes.END: |
| if (!keycodes.hasModifierKey(event)) { |
| keyCode === keycodes.HOME ? manager.setFirstItemActive() : manager.setLastItemActive(); |
| event.preventDefault(); |
| } |
| break; |
| default: |
| if (keyCode === keycodes.UP_ARROW || keyCode === keycodes.DOWN_ARROW) { |
| manager.setFocusOrigin('keyboard'); |
| } |
| manager.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 {?} |
| */ |
| _MatMenuBase.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(operators.take(1)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| 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 {?} |
| */ |
| _MatMenuBase.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); |
| }; |
| /** |
| * 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 {?} |
| */ |
| _MatMenuBase.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. |
| /** @type {?} */ |
| var newElevation = "mat-elevation-z" + (MAT_MENU_BASE_ELEVATION + depth); |
| /** @type {?} */ |
| var customElevation = Object.keys(this._classList).find((/** |
| * @param {?} c |
| * @return {?} |
| */ |
| 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; |
| } |
| }; |
| /** |
| * Adds classes to the menu panel based on its position. Can be used by |
| * consumers to add specific styling based on the position. |
| * @param posX Position of the menu along the x axis. |
| * @param posY Position of the menu along the y axis. |
| * @docs-private |
| */ |
| /** |
| * Adds classes to the menu panel based on its position. Can be used by |
| * consumers to add specific styling based on the position. |
| * \@docs-private |
| * @param {?=} posX Position of the menu along the x axis. |
| * @param {?=} posY Position of the menu along the y axis. |
| * @return {?} |
| */ |
| _MatMenuBase.prototype.setPositionClasses = /** |
| * Adds classes to the menu panel based on its position. Can be used by |
| * consumers to add specific styling based on the position. |
| * \@docs-private |
| * @param {?=} posX Position of the menu along the x axis. |
| * @param {?=} posY Position of the menu along the y axis. |
| * @return {?} |
| */ |
| function (posX, posY) { |
| if (posX === void 0) { posX = this.xPosition; } |
| if (posY === void 0) { posY = this.yPosition; } |
| /** @type {?} */ |
| var classes = this._classList; |
| classes['mat-menu-before'] = posX === 'before'; |
| classes['mat-menu-after'] = posX === 'after'; |
| classes['mat-menu-above'] = posY === 'above'; |
| classes['mat-menu-below'] = posY === 'below'; |
| }; |
| /** Starts the enter animation. */ |
| /** |
| * Starts the enter animation. |
| * @return {?} |
| */ |
| _MatMenuBase.prototype._startAnimation = /** |
| * Starts the enter animation. |
| * @return {?} |
| */ |
| function () { |
| // @breaking-change 8.0.0 Combine with _resetAnimation. |
| this._panelAnimationState = 'enter'; |
| }; |
| /** Resets the panel animation to its initial state. */ |
| /** |
| * Resets the panel animation to its initial state. |
| * @return {?} |
| */ |
| _MatMenuBase.prototype._resetAnimation = /** |
| * Resets the panel animation to its initial state. |
| * @return {?} |
| */ |
| function () { |
| // @breaking-change 8.0.0 Combine with _startAnimation. |
| this._panelAnimationState = 'void'; |
| }; |
| /** Callback that is invoked when the panel animation completes. */ |
| /** |
| * Callback that is invoked when the panel animation completes. |
| * @param {?} event |
| * @return {?} |
| */ |
| _MatMenuBase.prototype._onAnimationDone = /** |
| * Callback that is invoked when the panel animation completes. |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| this._animationDone.next(event); |
| this._isAnimating = false; |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| _MatMenuBase.prototype._onAnimationStart = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| this._isAnimating = true; |
| // Scroll the content element to the top as soon as the animation starts. This is necessary, |
| // because we move focus to the first item while it's still being animated, which can throw |
| // the browser off when it determines the scroll position. Alternatively we can move focus |
| // when the animation is done, however moving focus asynchronously will interrupt screen |
| // readers which are in the process of reading out the menu already. We take the `element` |
| // from the `event` since we can't use a `ViewChild` to access the pane. |
| if (event.toState === 'enter' && this._keyManager.activeItemIndex === 0) { |
| event.element.scrollTop = 0; |
| } |
| }; |
| /** |
| * Sets up a stream that will keep track of any newly-added menu items and will update the list |
| * of direct descendants. We collect the descendants this way, because `_allItems` can include |
| * items that are part of child menus, and using a custom way of registering items is unreliable |
| * when it comes to maintaining the item order. |
| */ |
| /** |
| * Sets up a stream that will keep track of any newly-added menu items and will update the list |
| * of direct descendants. We collect the descendants this way, because `_allItems` can include |
| * items that are part of child menus, and using a custom way of registering items is unreliable |
| * when it comes to maintaining the item order. |
| * @private |
| * @return {?} |
| */ |
| _MatMenuBase.prototype._updateDirectDescendants = /** |
| * Sets up a stream that will keep track of any newly-added menu items and will update the list |
| * of direct descendants. We collect the descendants this way, because `_allItems` can include |
| * items that are part of child menus, and using a custom way of registering items is unreliable |
| * when it comes to maintaining the item order. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._allItems.changes |
| .pipe(operators.startWith(this._allItems)) |
| .subscribe((/** |
| * @param {?} items |
| * @return {?} |
| */ |
| function (items) { |
| _this._directDescendantItems.reset(items.filter((/** |
| * @param {?} item |
| * @return {?} |
| */ |
| function (item) { return item._parentMenu === _this; }))); |
| _this._directDescendantItems.notifyOnChanges(); |
| })); |
| }; |
| /** @nocollapse */ |
| _MatMenuBase.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.NgZone }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_MENU_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| _MatMenuBase.propDecorators = { |
| _allItems: [{ type: core.ContentChildren, args: [MatMenuItem, { descendants: true },] }], |
| backdropClass: [{ type: core.Input }], |
| xPosition: [{ type: core.Input }], |
| yPosition: [{ type: core.Input }], |
| templateRef: [{ type: core.ViewChild, args: [core.TemplateRef, { static: false },] }], |
| items: [{ type: core.ContentChildren, args: [MatMenuItem,] }], |
| lazyContent: [{ type: core.ContentChild, args: [MatMenuContent, { static: false },] }], |
| overlapTrigger: [{ type: core.Input }], |
| hasBackdrop: [{ type: core.Input }], |
| panelClass: [{ type: core.Input, args: ['class',] }], |
| classList: [{ type: core.Input }], |
| closed: [{ type: core.Output }], |
| close: [{ type: core.Output }] |
| }; |
| return _MatMenuBase; |
| }()); |
| /** |
| * \@docs-private We show the "_MatMenu" class as "MatMenu" in the docs. |
| */ |
| var /** |
| * \@docs-private We show the "_MatMenu" class as "MatMenu" in the docs. |
| */ |
| MatMenu = /** @class */ (function (_super) { |
| __extends(MatMenu, _super); |
| function MatMenu() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| return MatMenu; |
| }(_MatMenuBase)); |
| // Note on the weird inheritance setup: we need three classes, because the MDC-based menu has to |
| // extend `MatMenu`, however keeping a reference to it will cause the inlined template and styles |
| // to be retained as well. The MDC menu also has to provide itself as a `MatMenu` in order for |
| // queries and DI to work correctly, while still not referencing the actual menu class. |
| // Class responsibility is split up as follows: |
| // * _MatMenuBase - provides all the functionality without any of the Angular metadata. |
| // * MatMenu - keeps the same name symbol name as the current menu and |
| // is used as a provider for DI and query purposes. |
| // * _MatMenu - the actual menu component implementation with the Angular metadata that should |
| // be tree shaken away for MDC. |
| /** |
| * \@docs-public MatMenu |
| */ |
| var _MatMenu = /** @class */ (function (_super) { |
| __extends(_MatMenu, _super); |
| function _MatMenu(elementRef, ngZone, defaultOptions) { |
| return _super.call(this, elementRef, ngZone, defaultOptions) || this; |
| } |
| _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.start)=\"_onAnimationStart($event)\" (@transformMenu.done)=\"_onAnimationDone($event)\" tabindex=\"-1\" role=\"menu\"><div class=\"mat-menu-content\"><ng-content></ng-content></div></div></ng-template>", |
| styles: [".mat-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 48px);border-radius:4px;outline:0;min-height:64px}.mat-menu-panel.ng-animating{pointer-events:none}@media (-ms-high-contrast:active){.mat-menu-panel{outline:solid 1px}}.mat-menu-content:not(:empty){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;max-width:100%;position:relative}.mat-menu-item::-moz-focus-inner{border:0}.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}.mat-menu-item .mat-icon svg{vertical-align:top}[dir=rtl] .mat-menu-item .mat-icon{margin-left:16px;margin-right:0}@media (-ms-high-contrast:active){.mat-menu-item-highlighted,.mat-menu-item.cdk-keyboard-focused,.mat-menu-item.cdk-program-focused{outline:dotted 1px}}.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-item .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}"], |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| exportAs: 'matMenu', |
| animations: [ |
| matMenuAnimations.transformMenu, |
| matMenuAnimations.fadeInItems |
| ], |
| providers: [ |
| { provide: MAT_MENU_PANEL, useExisting: MatMenu }, |
| { provide: MatMenu, useExisting: _MatMenu } |
| ] |
| },] }, |
| ]; |
| /** @nocollapse */ |
| _MatMenu.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.NgZone }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_MENU_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| return _MatMenu; |
| }(MatMenu)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that determines the scroll handling while the menu is open. |
| * @type {?} |
| */ |
| var MAT_MENU_SCROLL_STRATEGY = new core.InjectionToken('mat-menu-scroll-strategy'); |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_MENU_SCROLL_STRATEGY_FACTORY(overlay$$1) { |
| return (/** |
| * @return {?} |
| */ |
| function () { return overlay$$1.scrollStrategies.reposition(); }); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER = { |
| provide: MAT_MENU_SCROLL_STRATEGY, |
| deps: [overlay.Overlay], |
| useFactory: MAT_MENU_SCROLL_STRATEGY_FACTORY, |
| }; |
| /** |
| * Default top padding of the menu panel. |
| * @type {?} |
| */ |
| var MENU_PANEL_TOP_PADDING = 8; |
| /** |
| * Options for binding a passive event listener. |
| * @type {?} |
| */ |
| var passiveEventListenerOptions = platform.normalizePassiveListenerOptions({ passive: true }); |
| // TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors |
| /** |
| * 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 = /** @class */ (function () { |
| function MatMenuTrigger(_overlay, _element, _viewContainerRef, scrollStrategy, _parentMenu, _menuItemInstance, _dir, _focusMonitor) { |
| var _this = this; |
| this._overlay = _overlay; |
| this._element = _element; |
| this._viewContainerRef = _viewContainerRef; |
| this._parentMenu = _parentMenu; |
| this._menuItemInstance = _menuItemInstance; |
| this._dir = _dir; |
| this._focusMonitor = _focusMonitor; |
| this._overlayRef = null; |
| this._menuOpen = false; |
| this._closingActionsSubscription = rxjs.Subscription.EMPTY; |
| this._hoverSubscription = rxjs.Subscription.EMPTY; |
| this._menuCloseSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * Handles touch start events on the trigger. |
| * Needs to be an arrow function so we can easily use addEventListener and removeEventListener. |
| */ |
| this._handleTouchStart = (/** |
| * @return {?} |
| */ |
| function () { return _this._openedBy = 'touch'; }); |
| // Tracking input type is necessary so it's possible to only auto-focus |
| // the first item of the list when the menu is opened via the keyboard |
| this._openedBy = null; |
| /** |
| * Whether focus should be restored when the menu is closed. |
| * Note that disabling this option can have accessibility implications |
| * and it's up to you to manage focus, if you decide to turn it off. |
| */ |
| this.restoreFocus = true; |
| /** |
| * 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 |
| * \@breaking-change 8.0.0 |
| */ |
| // tslint:disable-next-line:no-output-on-prefix |
| 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 |
| * \@breaking-change 8.0.0 |
| */ |
| // tslint:disable-next-line:no-output-on-prefix |
| this.onMenuClose = this.menuClosed; |
| _element.nativeElement.addEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions); |
| if (_menuItemInstance) { |
| _menuItemInstance._triggersSubmenu = this.triggersSubmenu(); |
| } |
| this._scrollStrategy = scrollStrategy; |
| } |
| Object.defineProperty(MatMenuTrigger.prototype, "_deprecatedMatMenuTriggerFor", { |
| /** |
| * @deprecated |
| * @breaking-change 8.0.0 |
| */ |
| get: /** |
| * @deprecated |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| function () { return this.menu; }, |
| set: /** |
| * @param {?} v |
| * @return {?} |
| */ |
| function (v) { |
| this.menu = v; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatMenuTrigger.prototype, "menu", { |
| /** References the menu instance that the trigger is associated with. */ |
| get: /** |
| * References the menu instance that the trigger is associated with. |
| * @return {?} |
| */ |
| function () { return this._menu; }, |
| set: /** |
| * @param {?} menu |
| * @return {?} |
| */ |
| function (menu) { |
| var _this = this; |
| if (menu === this._menu) { |
| return; |
| } |
| this._menu = menu; |
| this._menuCloseSubscription.unsubscribe(); |
| if (menu) { |
| this._menuCloseSubscription = menu.close.asObservable().subscribe((/** |
| * @param {?} reason |
| * @return {?} |
| */ |
| function (reason) { |
| _this._destroyMenu(); |
| // If a click closed the menu, we should close the entire chain of nested menus. |
| if ((reason === 'click' || reason === 'tab') && _this._parentMenu) { |
| _this._parentMenu.closed.emit(reason); |
| } |
| })); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._checkMenu(); |
| this._handleHover(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| if (this._overlayRef) { |
| this._overlayRef.dispose(); |
| this._overlayRef = null; |
| } |
| this._element.nativeElement.removeEventListener('touchstart', this._handleTouchStart, passiveEventListenerOptions); |
| this._menuCloseSubscription.unsubscribe(); |
| this._closingActionsSubscription.unsubscribe(); |
| this._hoverSubscription.unsubscribe(); |
| }; |
| 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._checkMenu(); |
| /** @type {?} */ |
| var overlayRef = this._createOverlay(); |
| /** @type {?} */ |
| var overlayConfig = overlayRef.getConfig(); |
| this._setPosition((/** @type {?} */ (overlayConfig.positionStrategy))); |
| overlayConfig.hasBackdrop = this.menu.hasBackdrop == null ? !this.triggersSubmenu() : |
| this.menu.hasBackdrop; |
| overlayRef.attach(this._getPortal()); |
| if (this.menu.lazyContent) { |
| this.menu.lazyContent.attach(this.menuData); |
| } |
| this._closingActionsSubscription = this._menuClosingActions().subscribe((/** |
| * @return {?} |
| */ |
| 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, origin); |
| } |
| else { |
| this._element.nativeElement.focus(); |
| } |
| }; |
| /** Closes the menu and does the necessary cleanup. */ |
| /** |
| * Closes the menu and does the necessary cleanup. |
| * @private |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._destroyMenu = /** |
| * Closes the menu and does the necessary cleanup. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (!this._overlayRef || !this.menuOpen) { |
| return; |
| } |
| /** @type {?} */ |
| var menu = this.menu; |
| this._closingActionsSubscription.unsubscribe(); |
| this._overlayRef.detach(); |
| if (menu instanceof MatMenu) { |
| menu._resetAnimation(); |
| if (menu.lazyContent) { |
| // Wait for the exit animation to finish before detaching the content. |
| menu._animationDone |
| .pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.toState === 'void'; })), operators.take(1), |
| // Interrupt if the content got re-attached. |
| operators.takeUntil(menu.lazyContent._attached)) |
| .subscribe({ |
| next: (/** |
| * @return {?} |
| */ |
| function () { return (/** @type {?} */ (menu.lazyContent)).detach(); }), |
| // No matter whether the content got re-attached, reset the menu. |
| complete: (/** |
| * @return {?} |
| */ |
| function () { return _this._resetMenu(); }) |
| }); |
| } |
| else { |
| this._resetMenu(); |
| } |
| } |
| else { |
| this._resetMenu(); |
| if (menu.lazyContent) { |
| menu.lazyContent.detach(); |
| } |
| } |
| }; |
| /** |
| * This method sets the menu state to open and focuses the first item if |
| * the menu was opened via the keyboard. |
| */ |
| /** |
| * This method sets the menu state to open and focuses the first item if |
| * the menu was opened via the keyboard. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this.menu.parentMenu = this.triggersSubmenu() ? this._parentMenu : undefined; |
| this.menu.direction = this.dir; |
| this._setMenuElevation(); |
| this._setIsMenuOpen(true); |
| this.menu.focusFirstItem(this._openedBy || 'program'); |
| }; |
| /** Updates the menu elevation based on the amount of parent menus that it has. */ |
| /** |
| * Updates the menu elevation based on the amount of parent menus that it has. |
| * @private |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._setMenuElevation = /** |
| * Updates the menu elevation based on the amount of parent menus that it has. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this.menu.setElevation) { |
| /** @type {?} */ |
| var depth = 0; |
| /** @type {?} */ |
| var 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @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.restoreFocus) { |
| if (!this._openedBy) { |
| // 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(this._openedBy); |
| } |
| } |
| this._openedBy = null; |
| }; |
| // set state rather than toggle to support triggers sharing a menu |
| // set state rather than toggle to support triggers sharing a menu |
| /** |
| * @private |
| * @param {?} isOpen |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._setIsMenuOpen = |
| // set state rather than toggle to support triggers sharing a menu |
| /** |
| * @private |
| * @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. |
| */ |
| /** |
| * This method checks that a valid instance of MatMenu has been passed into |
| * matMenuTriggerFor. If not, an exception is thrown. |
| * @private |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._checkMenu = /** |
| * This method checks that a valid instance of MatMenu has been passed into |
| * matMenuTriggerFor. If not, an exception is thrown. |
| * @private |
| * @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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!this._overlayRef) { |
| /** @type {?} */ |
| var config = this._getOverlayConfig(); |
| this._subscribeToPositions((/** @type {?} */ (config.positionStrategy))); |
| this._overlayRef = this._overlay.create(config); |
| // Consume the `keydownEvents` in order to prevent them from going to another overlay. |
| // Ideally we'd also have our keyboard event logic in here, however doing so will |
| // break anybody that may have implemented the `MatMenuPanel` themselves. |
| this._overlayRef.keydownEvents().subscribe(); |
| } |
| return this._overlayRef; |
| }; |
| /** |
| * This method builds the configuration object needed to create the overlay, the OverlayState. |
| * @returns OverlayConfig |
| */ |
| /** |
| * This method builds the configuration object needed to create the overlay, the OverlayState. |
| * @private |
| * @return {?} OverlayConfig |
| */ |
| MatMenuTrigger.prototype._getOverlayConfig = /** |
| * This method builds the configuration object needed to create the overlay, the OverlayState. |
| * @private |
| * @return {?} OverlayConfig |
| */ |
| function () { |
| return new overlay.OverlayConfig({ |
| positionStrategy: this._overlay.position() |
| .flexibleConnectedTo(this._element) |
| .withLockedPosition() |
| .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel'), |
| backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop', |
| scrollStrategy: this._scrollStrategy(), |
| direction: this._dir |
| }); |
| }; |
| /** |
| * 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} position |
| * @return {?} |
| */ |
| function (position) { |
| var _this = this; |
| if (this.menu.setPositionClasses) { |
| position.positionChanges.subscribe((/** |
| * @param {?} change |
| * @return {?} |
| */ |
| function (change) { |
| /** @type {?} */ |
| var posX = change.connectionPair.overlayX === 'start' ? 'after' : 'before'; |
| /** @type {?} */ |
| var posY = change.connectionPair.overlayY === 'top' ? 'below' : 'above'; |
| (/** @type {?} */ (_this.menu.setPositionClasses))(posX, posY); |
| })); |
| } |
| }; |
| /** |
| * Sets the appropriate positions on a position strategy |
| * so the overlay connects with the trigger correctly. |
| * @param positionStrategy Strategy whose position to update. |
| */ |
| /** |
| * Sets the appropriate positions on a position strategy |
| * so the overlay connects with the trigger correctly. |
| * @private |
| * @param {?} positionStrategy Strategy whose position to update. |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._setPosition = /** |
| * Sets the appropriate positions on a position strategy |
| * so the overlay connects with the trigger correctly. |
| * @private |
| * @param {?} positionStrategy Strategy whose position to update. |
| * @return {?} |
| */ |
| function (positionStrategy) { |
| 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]; |
| /** @type {?} */ |
| var 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'; |
| } |
| positionStrategy.withPositions([ |
| { originX: originX, originY: originY, overlayX: overlayX, overlayY: overlayY, offsetY: offsetY }, |
| { originX: originFallbackX, originY: originY, overlayX: overlayFallbackX, overlayY: overlayY, offsetY: offsetY }, |
| { |
| originX: originX, |
| originY: originFallbackY, |
| overlayX: overlayX, |
| overlayY: overlayFallbackY, |
| offsetY: -offsetY |
| }, |
| { |
| originX: originFallbackX, |
| originY: originFallbackY, |
| overlayX: overlayFallbackX, |
| overlayY: overlayFallbackY, |
| offsetY: -offsetY |
| } |
| ]); |
| }; |
| /** Returns a stream that emits whenever an action that should close the menu occurs. */ |
| /** |
| * Returns a stream that emits whenever an action that should close the menu occurs. |
| * @private |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._menuClosingActions = /** |
| * Returns a stream that emits whenever an action that should close the menu occurs. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| /** @type {?} */ |
| var backdrop = (/** @type {?} */ (this._overlayRef)).backdropClick(); |
| /** @type {?} */ |
| var detachments = (/** @type {?} */ (this._overlayRef)).detachments(); |
| /** @type {?} */ |
| var parentClose = this._parentMenu ? this._parentMenu.closed : rxjs.of(); |
| /** @type {?} */ |
| var hover = this._parentMenu ? this._parentMenu._hovered().pipe(operators.filter((/** |
| * @param {?} active |
| * @return {?} |
| */ |
| function (active) { return active !== _this._menuItemInstance; })), operators.filter((/** |
| * @return {?} |
| */ |
| function () { return _this._menuOpen; }))) : rxjs.of(); |
| return rxjs.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)) { |
| // Since right or middle button clicks won't trigger the `click` event, |
| // we shouldn't consider the menu as opened by mouse in those cases. |
| this._openedBy = event.button === 0 ? 'mouse' : null; |
| // 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) { |
| /** @type {?} */ |
| var 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(); |
| } |
| }; |
| /** Handles the cases where the user hovers over the trigger. */ |
| /** |
| * Handles the cases where the user hovers over the trigger. |
| * @private |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._handleHover = /** |
| * Handles the cases where the user hovers over the trigger. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| // Subscribe to changes in the hovered item in order to toggle the panel. |
| if (!this.triggersSubmenu()) { |
| return; |
| } |
| this._hoverSubscription = this._parentMenu._hovered() |
| // Since we might have multiple competing triggers for the same menu (e.g. a sub-menu |
| // with different data and triggers), we have to delay it by a tick to ensure that |
| // it won't be closed immediately after it is opened. |
| .pipe(operators.filter((/** |
| * @param {?} active |
| * @return {?} |
| */ |
| function (active) { return active === _this._menuItemInstance && !active.disabled; })), operators.delay(0, rxjs.asapScheduler)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._openedBy = 'mouse'; |
| // If the same menu is used between multiple triggers, it might still be animating |
| // while the new trigger tries to re-open it. Wait for the animation to finish |
| // before doing so. Also interrupt if the user moves to another item. |
| if (_this.menu instanceof MatMenu && _this.menu._isAnimating) { |
| // We need the `delay(0)` here in order to avoid |
| // 'changed after checked' errors in some cases. See #12194. |
| _this.menu._animationDone |
| .pipe(operators.take(1), operators.delay(0, rxjs.asapScheduler), operators.takeUntil(_this._parentMenu._hovered())) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this.openMenu(); })); |
| } |
| else { |
| _this.openMenu(); |
| } |
| })); |
| }; |
| /** Gets the portal that should be attached to the overlay. */ |
| /** |
| * Gets the portal that should be attached to the overlay. |
| * @private |
| * @return {?} |
| */ |
| MatMenuTrigger.prototype._getPortal = /** |
| * Gets the portal that should be attached to the overlay. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| // Note that we can avoid this check by keeping the portal on the menu panel. |
| // While it would be cleaner, we'd have to introduce another required method on |
| // `MatMenuPanel`, making it harder to consume. |
| if (!this._portal || this._portal.templateRef !== this.menu.templateRef) { |
| this._portal = new portal.TemplatePortal(this.menu.templateRef, this._viewContainerRef); |
| } |
| return this._portal; |
| }; |
| MatMenuTrigger.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", |
| host: { |
| 'aria-haspopup': 'true', |
| '[attr.aria-expanded]': 'menuOpen || null', |
| '(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',] }], |
| restoreFocus: [{ type: core.Input, args: ['matMenuTriggerRestoreFocus',] }], |
| menuOpened: [{ type: core.Output }], |
| onMenuOpen: [{ type: core.Output }], |
| menuClosed: [{ type: core.Output }], |
| onMenuClose: [{ type: core.Output }] |
| }; |
| return MatMenuTrigger; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Used by both the current `MatMenuModule` and the MDC `MatMenuModule` |
| * to declare the menu-related directives. |
| */ |
| var _MatMenuDirectivesModule = /** @class */ (function () { |
| function _MatMenuDirectivesModule() { |
| } |
| _MatMenuDirectivesModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| exports: [MatMenuTrigger, MatMenuContent, MatCommonModule], |
| declarations: [MatMenuTrigger, MatMenuContent], |
| providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER] |
| },] }, |
| ]; |
| return _MatMenuDirectivesModule; |
| }()); |
| var MatMenuModule = /** @class */ (function () { |
| function MatMenuModule() { |
| } |
| MatMenuModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| MatCommonModule, |
| MatRippleModule, |
| overlay.OverlayModule, |
| _MatMenuDirectivesModule, |
| ], |
| exports: [_MatMenu, MatMenuItem, _MatMenuDirectivesModule], |
| declarations: [_MatMenu, MatMenuItem], |
| providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER] |
| },] }, |
| ]; |
| return MatMenuModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matSelectAnimations = { |
| /** |
| * This animation ensures the select's overlay panel animation (transformPanel) is called when |
| * closing the select. |
| * This is needed due to https://github.com/angular/angular/issues/23302 |
| */ |
| transformPanelWrap: animations$1.trigger('transformPanelWrap', [ |
| animations$1.transition('* => void', animations$1.query('@transformPanel', [animations$1.animateChild()], { optional: true })) |
| ]), |
| /** |
| * 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$1.trigger('transformPanel', [ |
| animations$1.state('void', animations$1.style({ |
| transform: 'scaleY(0.8)', |
| minWidth: '100%', |
| opacity: 0 |
| })), |
| animations$1.state('showing', animations$1.style({ |
| opacity: 1, |
| minWidth: 'calc(100% + 32px)', |
| // 32px = 2 * 16px padding |
| transform: 'scaleY(1)' |
| })), |
| animations$1.state('showing-multiple', animations$1.style({ |
| opacity: 1, |
| minWidth: 'calc(100% + 64px)', |
| // 64px = 48px padding on the left + 16px padding on the right |
| transform: 'scaleY(1)' |
| })), |
| animations$1.transition('void => *', animations$1.animate('120ms cubic-bezier(0, 0, 0.2, 1)')), |
| animations$1.transition('* => void', animations$1.animate('100ms 25ms linear', animations$1.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. |
| * @deprecated Not used anymore. To be removed. |
| * \@breaking-change 8.0.0 |
| */ |
| fadeInContent: animations$1.trigger('fadeInContent', [ |
| animations$1.state('showing', animations$1.style({ opacity: 1 })), |
| animations$1.transition('void => showing', [ |
| animations$1.style({ opacity: 0 }), |
| animations$1.animate('150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)') |
| ]) |
| ]) |
| }; |
| /** |
| * @deprecated |
| * \@breaking-change 8.0.0 |
| * \@docs-private |
| * @type {?} |
| */ |
| var transformPanel = matSelectAnimations.transformPanel; |
| /** |
| * @deprecated |
| * \@breaking-change 8.0.0 |
| * \@docs-private |
| * @type {?} |
| */ |
| var fadeInContent = matSelectAnimations.fadeInContent; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var nextUniqueId$6 = 0; |
| /** |
| * The max height of the select's overlay panel |
| * @type {?} |
| */ |
| var SELECT_PANEL_MAX_HEIGHT = 256; |
| /** |
| * The panel's padding on the x-axis |
| * @type {?} |
| */ |
| var SELECT_PANEL_PADDING_X = 16; |
| /** |
| * The panel's x axis padding if it is indented (e.g. there is an option group). |
| * @type {?} |
| */ |
| var SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2; |
| /** |
| * The height of the select items in `em` units. |
| * @type {?} |
| */ |
| var SELECT_ITEM_HEIGHT_EM = 3; |
| // TODO(josephperrott): Revert to a constant after 2018 spec updates are fully merged. |
| /** |
| * Distance between the panel edge and the option text in |
| * multi-selection mode. |
| * |
| * Calculated as: |
| * (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 16px. |
| * @type {?} |
| */ |
| exports.SELECT_MULTIPLE_PANEL_PADDING_X = 0; |
| /** |
| * The select panel will only "fit" inside the viewport if it is positioned at |
| * this value or more away from the viewport boundary. |
| * @type {?} |
| */ |
| var SELECT_PANEL_VIEWPORT_PADDING = 8; |
| /** |
| * Injection token that determines the scroll handling while a select is open. |
| * @type {?} |
| */ |
| var MAT_SELECT_SCROLL_STRATEGY = new core.InjectionToken('mat-select-scroll-strategy'); |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay$$1) { |
| return (/** |
| * @return {?} |
| */ |
| function () { return overlay$$1.scrollStrategies.reposition(); }); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_SELECT_SCROLL_STRATEGY_PROVIDER = { |
| provide: MAT_SELECT_SCROLL_STRATEGY, |
| deps: [overlay.Overlay], |
| useFactory: MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY, |
| }; |
| /** |
| * Change event object that is emitted when the select value has changed. |
| */ |
| var /** |
| * Change event object that is emitted when the select value has changed. |
| */ |
| MatSelectChange = /** @class */ (function () { |
| function MatSelectChange(source, value) { |
| this.source = source; |
| this.value = value; |
| } |
| return MatSelectChange; |
| }()); |
| // Boilerplate for applying mixins to MatSelect. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatSelect. |
| /** |
| * \@docs-private |
| */ |
| MatSelectBase = /** @class */ (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; |
| }()); |
| /** @type {?} */ |
| 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 = /** @class */ (function () { |
| function MatSelectTrigger() { |
| } |
| MatSelectTrigger.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-select-trigger' |
| },] }, |
| ]; |
| return MatSelectTrigger; |
| }()); |
| var MatSelect = /** @class */ (function (_super) { |
| __extends(MatSelect, _super); |
| function MatSelect(_viewportRuler, _changeDetectorRef, _ngZone, _defaultErrorStateMatcher, elementRef, _dir, _parentForm, _parentFormGroup, _parentFormField, ngControl, tabIndex, scrollStrategyFactory, _liveAnnouncer) { |
| 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._liveAnnouncer = _liveAnnouncer; |
| /** |
| * 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 = (/** |
| * @param {?} o1 |
| * @param {?} o2 |
| * @return {?} |
| */ |
| function (o1, o2) { return o1 === o2; }); |
| /** |
| * Unique id for this input. |
| */ |
| _this._uid = "mat-select-" + nextUniqueId$6++; |
| /** |
| * Emits whenever the component is destroyed. |
| */ |
| _this._destroy = new rxjs.Subject(); |
| /** |
| * The cached font-size of the trigger element. |
| */ |
| _this._triggerFontSize = 0; |
| /** |
| * `View -> model callback called when value changes` |
| */ |
| _this._onChange = (/** |
| * @return {?} |
| */ |
| function () { }); |
| /** |
| * `View -> model callback called when select has been touched` |
| */ |
| _this._onTouched = (/** |
| * @return {?} |
| */ |
| 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'; |
| /** |
| * Emits when the panel element is finished transforming in. |
| */ |
| _this._panelDoneAnimatingStream = new rxjs.Subject(); |
| /** |
| * 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 component is disabling centering of the active option over the trigger. |
| */ |
| _this._disableOptionCentering = false; |
| _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 = (/** @type {?} */ (rxjs.defer((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var options = _this.options; |
| if (options) { |
| return options.changes.pipe(operators.startWith(options), operators.switchMap((/** |
| * @return {?} |
| */ |
| function () { return rxjs.merge.apply(void 0, options.map((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option.onSelectionChange; }))); }))); |
| } |
| return _this._ngZone.onStable |
| .asObservable() |
| .pipe(operators.take(1), operators.switchMap((/** |
| * @return {?} |
| */ |
| 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. |
| */ |
| _this._openedStream = _this.openedChange.pipe(operators.filter((/** |
| * @param {?} o |
| * @return {?} |
| */ |
| function (o) { return o; })), operators.map((/** |
| * @return {?} |
| */ |
| function () { }))); |
| /** |
| * Event emitted when the select has been closed. |
| */ |
| _this._closedStream = _this.openedChange.pipe(operators.filter((/** |
| * @param {?} o |
| * @return {?} |
| */ |
| function (o) { return !o; })), operators.map((/** |
| * @return {?} |
| */ |
| function () { }))); |
| /** |
| * Event emitted when the selected value has been changed by the user. |
| */ |
| _this.selectionChange = new core.EventEmitter(); |
| /** |
| * 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. |
| _this.ngControl.valueAccessor = _this; |
| } |
| _this._scrollStrategyFactory = scrollStrategyFactory; |
| _this._scrollStrategy = _this._scrollStrategyFactory(); |
| _this.tabIndex = parseInt(tabIndex) || 0; |
| // Force setter to be called in case id was not specified. |
| _this.id = _this.id; |
| return _this; |
| } |
| Object.defineProperty(MatSelect.prototype, "focused", { |
| /** Whether the select is focused. */ |
| get: /** |
| * Whether the select is focused. |
| * @return {?} |
| */ |
| function () { |
| return this._focused || this._panelOpen; |
| }, |
| /** |
| * @deprecated Setter to be removed as this property is intended to be readonly. |
| * @breaking-change 8.0.0 |
| */ |
| set: /** |
| * @deprecated Setter to be removed as this property is intended to be readonly. |
| * \@breaking-change 8.0.0 |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._focused = value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatSelect.prototype, "placeholder", { |
| /** Placeholder to be shown if no value has been selected. */ |
| 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", { |
| /** Whether the component is 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", { |
| /** Whether the user should be allowed to select multiple options. */ |
| 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, "disableOptionCentering", { |
| /** Whether to center the active option over the trigger. */ |
| get: /** |
| * Whether to center the active option over the trigger. |
| * @return {?} |
| */ |
| function () { return this._disableOptionCentering; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._disableOptionCentering = coercion.coerceBooleanProperty(value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatSelect.prototype, "compareWith", { |
| /** |
| * 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. |
| */ |
| get: /** |
| * 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", { |
| /** Value of the select control. */ |
| 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", { |
| /** Unique id of the element. */ |
| 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 |
| }); |
| /** |
| * @return {?} |
| */ |
| MatSelect.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._selectionModel = new collections.SelectionModel(this.multiple); |
| this.stateChanges.next(); |
| // We need `distinctUntilChanged` here, because some browsers will |
| // fire the animation end event twice for the same animation. See: |
| // https://github.com/angular/angular/issues/24084 |
| this._panelDoneAnimatingStream |
| .pipe(operators.distinctUntilChanged(), operators.takeUntil(this._destroy)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this.panelOpen) { |
| _this._scrollTop = 0; |
| _this.openedChange.emit(true); |
| } |
| else { |
| _this.openedChange.emit(false); |
| _this.overlayDir.offsetX = 0; |
| _this._changeDetectorRef.markForCheck(); |
| } |
| })); |
| this._viewportRuler.change() |
| .pipe(operators.takeUntil(this._destroy)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this._panelOpen) { |
| _this._triggerRect = _this.trigger.nativeElement.getBoundingClientRect(); |
| _this._changeDetectorRef.markForCheck(); |
| } |
| })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSelect.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._initKeyManager(); |
| this._selectionModel.onChange.pipe(operators.takeUntil(this._destroy)).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| event.added.forEach((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option.select(); })); |
| event.removed.forEach((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option.deselect(); })); |
| })); |
| this.options.changes.pipe(operators.startWith(null), operators.takeUntil(this._destroy)).subscribe((/** |
| * @return {?} |
| */ |
| 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 || this._panelOpen) { |
| 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).fontSize || '0'); |
| 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(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| 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) { |
| /** @type {?} */ |
| var selectedOptions = this._selectionModel.selected.map((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| 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. */ |
| /** |
| * Handles keyboard events while the select is closed. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| MatSelect.prototype._handleClosedKeydown = /** |
| * Handles keyboard events while the select is closed. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var keyCode = event.keyCode; |
| /** @type {?} */ |
| var isArrowKey = keyCode === keycodes.DOWN_ARROW || keyCode === keycodes.UP_ARROW || |
| keyCode === keycodes.LEFT_ARROW || keyCode === keycodes.RIGHT_ARROW; |
| /** @type {?} */ |
| var isOpenKey = keyCode === keycodes.ENTER || keyCode === keycodes.SPACE; |
| /** @type {?} */ |
| var manager = this._keyManager; |
| // Open the select on ALT + arrow key to match the native <select> |
| if ((isOpenKey && !keycodes.hasModifierKey(event)) || ((this.multiple || event.altKey) && isArrowKey)) { |
| event.preventDefault(); // prevents the page from scrolling down when pressing space |
| this.open(); |
| } |
| else if (!this.multiple) { |
| /** @type {?} */ |
| var previouslySelectedOption = this.selected; |
| if (keyCode === keycodes.HOME || keyCode === keycodes.END) { |
| keyCode === keycodes.HOME ? manager.setFirstItemActive() : manager.setLastItemActive(); |
| event.preventDefault(); |
| } |
| else { |
| manager.onKeydown(event); |
| } |
| /** @type {?} */ |
| var selectedOption = this.selected; |
| // Since the value has changed, we need to announce it ourselves. |
| // @breaking-change 8.0.0 remove null check for _liveAnnouncer. |
| if (this._liveAnnouncer && selectedOption && previouslySelectedOption !== selectedOption) { |
| // We set a duration on the live announcement, because we want the live element to be |
| // cleared after a while so that users can't navigate to it using the arrow keys. |
| this._liveAnnouncer.announce(((/** @type {?} */ (selectedOption))).viewValue, 10000); |
| } |
| } |
| }; |
| /** Handles keyboard events when the selected is open. */ |
| /** |
| * Handles keyboard events when the selected is open. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| MatSelect.prototype._handleOpenKeydown = /** |
| * Handles keyboard events when the selected is open. |
| * @private |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var keyCode = event.keyCode; |
| /** @type {?} */ |
| var isArrowKey = keyCode === keycodes.DOWN_ARROW || keyCode === keycodes.UP_ARROW; |
| /** @type {?} */ |
| var 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 && |
| !keycodes.hasModifierKey(event)) { |
| event.preventDefault(); |
| manager.activeItem._selectViaInteraction(); |
| } |
| else if (this._multiple && keyCode === keycodes.A && event.ctrlKey) { |
| event.preventDefault(); |
| /** @type {?} */ |
| var hasDeselectedOptions_1 = this.options.some((/** |
| * @param {?} opt |
| * @return {?} |
| */ |
| function (opt) { return !opt.disabled && !opt.selected; })); |
| this.options.forEach((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { |
| if (!option.disabled) { |
| hasDeselectedOptions_1 ? option.select() : option.deselect(); |
| } |
| })); |
| } |
| else { |
| /** @type {?} */ |
| var previouslyFocusedIndex = manager.activeItemIndex; |
| manager.onKeydown(event); |
| if (this._multiple && isArrowKey && event.shiftKey && manager.activeItem && |
| manager.activeItemIndex !== previouslyFocusedIndex) { |
| manager.activeItem._selectViaInteraction(); |
| } |
| } |
| }; |
| /** |
| * @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(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._setPseudoCheckboxPaddingSize(); |
| _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 : ''; |
| }; |
| // TODO(josephperrott): Remove after 2018 spec updates are fully merged. |
| /** Sets the pseudo checkbox padding size based on the width of the pseudo checkbox. */ |
| // TODO(josephperrott): Remove after 2018 spec updates are fully merged. |
| /** |
| * Sets the pseudo checkbox padding size based on the width of the pseudo checkbox. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._setPseudoCheckboxPaddingSize = |
| // TODO(josephperrott): Remove after 2018 spec updates are fully merged. |
| /** |
| * Sets the pseudo checkbox padding size based on the width of the pseudo checkbox. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!exports.SELECT_MULTIPLE_PANEL_PADDING_X && this.multiple) { |
| /** @type {?} */ |
| var pseudoCheckbox = this.panel.nativeElement.querySelector('.mat-pseudo-checkbox'); |
| if (pseudoCheckbox) { |
| exports.SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + pseudoCheckbox.offsetWidth; |
| } |
| } |
| }; |
| 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 |
| }); |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._initializeSelection = /** |
| * @private |
| * @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((/** |
| * @return {?} |
| */ |
| function () { |
| _this._setSelectionByValue(_this.ngControl ? _this.ngControl.value : _this._value); |
| _this.stateChanges.next(); |
| })); |
| }; |
| /** |
| * Sets the selected option based on a value. If no option can be |
| * found with the designated value, the select trigger is cleared. |
| */ |
| /** |
| * Sets the selected option based on a value. If no option can be |
| * found with the designated value, the select trigger is cleared. |
| * @private |
| * @param {?} value |
| * @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. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| var _this = this; |
| if (this.multiple && value) { |
| if (!Array.isArray(value)) { |
| throw getMatSelectNonArrayValueError(); |
| } |
| this._selectionModel.clear(); |
| value.forEach((/** |
| * @param {?} currentValue |
| * @return {?} |
| */ |
| function (currentValue) { return _this._selectValue(currentValue); })); |
| this._sortValues(); |
| } |
| else { |
| this._selectionModel.clear(); |
| /** @type {?} */ |
| var correspondingOption = this._selectValue(value); |
| // 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(correspondingOption); |
| } |
| } |
| this._changeDetectorRef.markForCheck(); |
| }; |
| /** |
| * Finds and selects and option based on its value. |
| * @returns Option that has the corresponding value. |
| */ |
| /** |
| * Finds and selects and option based on its value. |
| * @private |
| * @param {?} value |
| * @return {?} Option that has the corresponding value. |
| */ |
| MatSelect.prototype._selectValue = /** |
| * Finds and selects and option based on its value. |
| * @private |
| * @param {?} value |
| * @return {?} Option that has the corresponding value. |
| */ |
| function (value) { |
| var _this = this; |
| /** @type {?} */ |
| var correspondingOption = this.options.find((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| 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) { |
| this._selectionModel.select(correspondingOption); |
| } |
| return correspondingOption; |
| }; |
| /** Sets up a key manager to listen to keyboard events on the overlay panel. */ |
| /** |
| * Sets up a key manager to listen to keyboard events on the overlay panel. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._initKeyManager = /** |
| * Sets up a key manager to listen to keyboard events on the overlay panel. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._keyManager = new a11y.ActiveDescendantKeyManager(this.options) |
| .withTypeAhead() |
| .withVerticalOrientation() |
| .withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr') |
| .withAllowedModifierKeys(['shiftKey']); |
| this._keyManager.tabOut.pipe(operators.takeUntil(this._destroy)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| // Restore focus to the trigger before closing. Ensures that the focus |
| // position won't be lost if the user got focus into the overlay. |
| _this.focus(); |
| _this.close(); |
| })); |
| this._keyManager.change.pipe(operators.takeUntil(this._destroy)).subscribe((/** |
| * @return {?} |
| */ |
| 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. */ |
| /** |
| * Drops current option subscriptions and IDs and resets from scratch. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._resetOptions = /** |
| * Drops current option subscriptions and IDs and resets from scratch. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| /** @type {?} */ |
| var changedOrDestroyed = rxjs.merge(this.options.changes, this._destroy); |
| this.optionSelectionChanges.pipe(operators.takeUntil(changedOrDestroyed)).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| _this._onSelect(event.source, event.isUserInput); |
| if (event.isUserInput && !_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. |
| rxjs.merge.apply(void 0, this.options.map((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option._stateChanges; }))).pipe(operators.takeUntil(changedOrDestroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._changeDetectorRef.markForCheck(); |
| _this.stateChanges.next(); |
| })); |
| this._setOptionIds(); |
| }; |
| /** Invoked when an option is clicked. */ |
| /** |
| * Invoked when an option is clicked. |
| * @private |
| * @param {?} option |
| * @param {?} isUserInput |
| * @return {?} |
| */ |
| MatSelect.prototype._onSelect = /** |
| * Invoked when an option is clicked. |
| * @private |
| * @param {?} option |
| * @param {?} isUserInput |
| * @return {?} |
| */ |
| function (option, isUserInput) { |
| /** @type {?} */ |
| var wasSelected = this._selectionModel.isSelected(option); |
| if (option.value == null && !this._multiple) { |
| option.deselect(); |
| this._selectionModel.clear(); |
| this._propagateChanges(option.value); |
| } |
| else { |
| option.selected ? this._selectionModel.select(option) : this._selectionModel.deselect(option); |
| if (isUserInput) { |
| this._keyManager.setActiveItem(option); |
| } |
| if (this.multiple) { |
| this._sortValues(); |
| if (isUserInput) { |
| // In case the user selected the option with their mouse, we |
| // want to restore focus back to the trigger, in order to |
| // prevent the select keyboard controls from clashing with |
| // the ones from `mat-option`. |
| this.focus(); |
| } |
| } |
| } |
| if (wasSelected !== this._selectionModel.isSelected(option)) { |
| this._propagateChanges(); |
| } |
| this.stateChanges.next(); |
| }; |
| /** Sorts the selected values in the selected based on their order in the panel. */ |
| /** |
| * Sorts the selected values in the selected based on their order in the panel. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._sortValues = /** |
| * Sorts the selected values in the selected based on their order in the panel. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this.multiple) { |
| /** @type {?} */ |
| var options_1 = this.options.toArray(); |
| this._selectionModel.sort((/** |
| * @param {?} a |
| * @param {?} b |
| * @return {?} |
| */ |
| function (a, b) { |
| return _this.sortComparator ? _this.sortComparator(a, b, options_1) : |
| options_1.indexOf(a) - options_1.indexOf(b); |
| })); |
| this.stateChanges.next(); |
| } |
| }; |
| /** Emits change event to set the model value. */ |
| /** |
| * Emits change event to set the model value. |
| * @private |
| * @param {?=} fallbackValue |
| * @return {?} |
| */ |
| MatSelect.prototype._propagateChanges = /** |
| * Emits change event to set the model value. |
| * @private |
| * @param {?=} fallbackValue |
| * @return {?} |
| */ |
| function (fallbackValue) { |
| /** @type {?} */ |
| var valueToEmit = null; |
| if (this.multiple) { |
| valueToEmit = ((/** @type {?} */ (this.selected))).map((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option.value; })); |
| } |
| else { |
| valueToEmit = this.selected ? ((/** @type {?} */ (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. */ |
| /** |
| * Records option IDs to pass to the aria-owns property. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._setOptionIds = /** |
| * Records option IDs to pass to the aria-owns property. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this._optionIds = this.options.map((/** |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { return option.id; })).join(' '); |
| }; |
| /** |
| * Highlights the selected item. If no option is selected, it will highlight |
| * the first item instead. |
| */ |
| /** |
| * Highlights the selected item. If no option is selected, it will highlight |
| * the first item instead. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._highlightCorrectOption = /** |
| * Highlights the selected item. If no option is selected, it will highlight |
| * the first item instead. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this._keyManager) { |
| if (this.empty) { |
| this._keyManager.setFirstItemActive(); |
| } |
| else { |
| this._keyManager.setActiveItem(this._selectionModel.selected[0]); |
| } |
| } |
| }; |
| /** Scrolls the active option into view. */ |
| /** |
| * Scrolls the active option into view. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._scrollActiveOptionIntoView = /** |
| * Scrolls the active option into view. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var activeOptionIndex = this._keyManager.activeItemIndex || 0; |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Gets the index of the provided option in the option list. |
| * @private |
| * @param {?} option |
| * @return {?} |
| */ |
| MatSelect.prototype._getOptionIndex = /** |
| * Gets the index of the provided option in the option list. |
| * @private |
| * @param {?} option |
| * @return {?} |
| */ |
| function (option) { |
| return this.options.reduce((/** |
| * @param {?} result |
| * @param {?} current |
| * @param {?} index |
| * @return {?} |
| */ |
| 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. */ |
| /** |
| * Calculates the scroll position and x- and y-offsets of the overlay panel. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._calculateOverlayPosition = /** |
| * Calculates the scroll position and x- and y-offsets of the overlay panel. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var itemHeight = this._getItemHeight(); |
| /** @type {?} */ |
| var items = this._getItemCount(); |
| /** @type {?} */ |
| var panelHeight = Math.min(items * itemHeight, SELECT_PANEL_MAX_HEIGHT); |
| /** @type {?} */ |
| var scrollContainerHeight = items * itemHeight; |
| // The farthest the panel can be scrolled before it hits the bottom |
| /** @type {?} */ |
| var maxScroll = scrollContainerHeight - panelHeight; |
| // If no value is selected we open the popup to the first item. |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var 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) { |
| /** @type {?} */ |
| var itemHeight = this._getItemHeight(); |
| /** @type {?} */ |
| var optionOffsetFromScrollTop = itemHeight * selectedIndex; |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var optimalScrollPosition = optionOffsetFromScrollTop - scrollBuffer + halfOptionHeight; |
| return Math.min(Math.max(0, optimalScrollPosition), maxScroll); |
| }; |
| /** Returns the aria-label of the select component. */ |
| /** |
| * Returns the aria-label of the select component. |
| * @return {?} |
| */ |
| MatSelect.prototype._getAriaLabel = /** |
| * Returns the aria-label of the select component. |
| * @return {?} |
| */ |
| function () { |
| // If an ariaLabelledby value has been set by the consumer, the select should not overwrite the |
| // `aria-labelledby` value by setting the ariaLabel to the placeholder. |
| return this.ariaLabelledby ? null : this.ariaLabel || this.placeholder; |
| }; |
| /** Returns the aria-labelledby of the select component. */ |
| /** |
| * Returns the aria-labelledby of the select component. |
| * @return {?} |
| */ |
| MatSelect.prototype._getAriaLabelledby = /** |
| * Returns the aria-labelledby of the select component. |
| * @return {?} |
| */ |
| function () { |
| if (this.ariaLabelledby) { |
| return this.ariaLabelledby; |
| } |
| // Note: we use `_getAriaLabel` here, because we want to check whether there's a |
| // computed label. `this.ariaLabel` is only the user-specified label. |
| if (!this._parentFormField || !this._parentFormField._hasFloatingLabel() || |
| this._getAriaLabel()) { |
| return null; |
| } |
| return this._parentFormField._labelId || null; |
| }; |
| /** 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var overlayRect = this.overlayDir.overlayRef.overlayElement.getBoundingClientRect(); |
| /** @type {?} */ |
| var viewportSize = this._viewportRuler.getViewportSize(); |
| /** @type {?} */ |
| var isRtl = this._isRtl(); |
| /** @type {?} */ |
| var paddingWidth = this.multiple ? exports.SELECT_MULTIPLE_PANEL_PADDING_X + SELECT_PANEL_PADDING_X : |
| SELECT_PANEL_PADDING_X * 2; |
| /** @type {?} */ |
| var offsetX; |
| // Adjust the offset, depending on the option padding. |
| if (this.multiple) { |
| offsetX = exports.SELECT_MULTIPLE_PANEL_PADDING_X; |
| } |
| else { |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var leftOverflow = 0 - (overlayRect.left + offsetX - (isRtl ? paddingWidth : 0)); |
| /** @type {?} */ |
| var 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. Round the value to avoid |
| // blurry content in some browsers. |
| this.overlayDir.offsetX = Math.round(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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} selectedIndex |
| * @param {?} scrollBuffer |
| * @param {?} maxScroll |
| * @return {?} |
| */ |
| function (selectedIndex, scrollBuffer, maxScroll) { |
| /** @type {?} */ |
| var itemHeight = this._getItemHeight(); |
| /** @type {?} */ |
| var optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2; |
| /** @type {?} */ |
| var maxOptionsDisplayed = Math.floor(SELECT_PANEL_MAX_HEIGHT / itemHeight); |
| /** @type {?} */ |
| var optionOffsetFromPanelTop; |
| // Disable offset if requested by user by returning 0 as value to offset |
| if (this._disableOptionCentering) { |
| return 0; |
| } |
| if (this._scrollTop === 0) { |
| optionOffsetFromPanelTop = selectedIndex * itemHeight; |
| } |
| else if (this._scrollTop === maxScroll) { |
| /** @type {?} */ |
| var firstDisplayedIndex = this._getItemCount() - maxOptionsDisplayed; |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var 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. |
| // The value is rounded to prevent some browsers from blurring the content. |
| return Math.round(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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} maxScroll |
| * @return {?} |
| */ |
| function (maxScroll) { |
| /** @type {?} */ |
| var itemHeight = this._getItemHeight(); |
| /** @type {?} */ |
| var viewportSize = this._viewportRuler.getViewportSize(); |
| /** @type {?} */ |
| var topSpaceAvailable = this._triggerRect.top - SELECT_PANEL_VIEWPORT_PADDING; |
| /** @type {?} */ |
| var bottomSpaceAvailable = viewportSize.height - this._triggerRect.bottom - SELECT_PANEL_VIEWPORT_PADDING; |
| /** @type {?} */ |
| var panelHeightTop = Math.abs(this._offsetY); |
| /** @type {?} */ |
| var totalPanelHeight = Math.min(this._getItemCount() * itemHeight, SELECT_PANEL_MAX_HEIGHT); |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Adjusts the overlay panel up to fit in the viewport. |
| * @private |
| * @param {?} panelHeightBottom |
| * @param {?} bottomSpaceAvailable |
| * @return {?} |
| */ |
| MatSelect.prototype._adjustPanelUp = /** |
| * Adjusts the overlay panel up to fit in the viewport. |
| * @private |
| * @param {?} panelHeightBottom |
| * @param {?} bottomSpaceAvailable |
| * @return {?} |
| */ |
| function (panelHeightBottom, bottomSpaceAvailable) { |
| // Browsers ignore fractional scroll offsets, so we need to round. |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Adjusts the overlay panel down to fit in the viewport. |
| * @private |
| * @param {?} panelHeightTop |
| * @param {?} topSpaceAvailable |
| * @param {?} maxScroll |
| * @return {?} |
| */ |
| MatSelect.prototype._adjustPanelDown = /** |
| * Adjusts the overlay panel down to fit in the viewport. |
| * @private |
| * @param {?} panelHeightTop |
| * @param {?} topSpaceAvailable |
| * @param {?} maxScroll |
| * @return {?} |
| */ |
| function (panelHeightTop, topSpaceAvailable, maxScroll) { |
| // Browsers ignore fractional scroll offsets, so we need to round. |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Sets the transform origin point based on the selected option. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._getOriginBasedOnOption = /** |
| * Sets the transform origin point based on the selected option. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var itemHeight = this._getItemHeight(); |
| /** @type {?} */ |
| var optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2; |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Calculates the amount of items in the select. This includes options and group labels. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._getItemCount = /** |
| * Calculates the amount of items in the select. This includes options and group labels. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return this.options.length + this.optionGroups.length; |
| }; |
| /** Calculates the height of the select's options. */ |
| /** |
| * Calculates the height of the select's options. |
| * @private |
| * @return {?} |
| */ |
| MatSelect.prototype._getItemHeight = /** |
| * Calculates the height of the select's options. |
| * @private |
| * @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, "shouldLabelFloat", { |
| /** |
| * 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 || '\u00A0'}}</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 cdkConnectedOverlayLockPosition cdkConnectedOverlayHasBackdrop cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\" [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\" [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"panelOpen\" [cdkConnectedOverlayPositions]=\"_positions\" [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width\" [cdkConnectedOverlayOffsetY]=\"_offsetY\" (backdropClick)=\"close()\" (attach)=\"_onAttached()\" (detach)=\"close()\"><div class=\"mat-select-panel-wrap\" [@transformPanelWrap]><div #panel class=\"mat-select-panel {{ _getPanelTheme() }}\" [ngClass]=\"panelClass\" [@transformPanel]=\"multiple ? 'showing-multiple' : 'showing'\" (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\" [style.transformOrigin]=\"_transformOrigin\" [style.font-size.px]=\"_triggerFontSize\" (keydown)=\"_handleKeydown($event)\"><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-form-field-appearance-fill .mat-select-arrow-wrapper{transform:translateY(-50%)}.mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(-25%)}.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(-50%)}.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper{transition:transform .4s cubic-bezier(.25,.8,.25,1)}._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty .mat-select-arrow-wrapper{transition:none}.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-wrap{flex-basis:100%}.mat-select-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;padding-top:0;padding-bottom:0;max-height:256px;min-width:100%;border-radius:4px}@media (-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-animation-noopable .mat-select-placeholder{transition:none}.mat-form-field-hide-placeholder .mat-select-placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:none;display:block}"], |
| inputs: ['disabled', 'disableRipple', 'tabIndex'], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| host: { |
| 'role': 'listbox', |
| '[attr.id]': 'id', |
| '[attr.tabindex]': 'tabIndex', |
| '[attr.aria-label]': '_getAriaLabel()', |
| '[attr.aria-labelledby]': '_getAriaLabelledby()', |
| '[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-empty]': 'empty', |
| 'class': 'mat-select', |
| '(keydown)': '_handleKeydown($event)', |
| '(focus)': '_onFocus()', |
| '(blur)': '_onBlur()', |
| }, |
| animations: [ |
| matSelectAnimations.transformPanelWrap, |
| matSelectAnimations.transformPanel |
| ], |
| providers: [ |
| { provide: MatFormFieldControl, useExisting: MatSelect }, |
| { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect } |
| ], |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatSelect.ctorParameters = function () { return [ |
| { type: scrolling.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: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_SELECT_SCROLL_STRATEGY,] }] }, |
| { type: a11y.LiveAnnouncer } |
| ]; }; |
| MatSelect.propDecorators = { |
| trigger: [{ type: core.ViewChild, args: ['trigger', { static: false },] }], |
| panel: [{ type: core.ViewChild, args: ['panel', { static: false },] }], |
| overlayDir: [{ type: core.ViewChild, args: [overlay.CdkConnectedOverlay, { static: false },] }], |
| options: [{ type: core.ContentChildren, args: [MatOption, { descendants: true },] }], |
| optionGroups: [{ type: core.ContentChildren, args: [MatOptgroup,] }], |
| panelClass: [{ type: core.Input }], |
| customTrigger: [{ type: core.ContentChild, args: [MatSelectTrigger, { static: false },] }], |
| placeholder: [{ type: core.Input }], |
| required: [{ type: core.Input }], |
| multiple: [{ type: core.Input }], |
| disableOptionCentering: [{ 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 }], |
| sortComparator: [{ type: core.Input }], |
| id: [{ type: core.Input }], |
| openedChange: [{ type: core.Output }], |
| _openedStream: [{ type: core.Output, args: ['opened',] }], |
| _closedStream: [{ type: core.Output, args: ['closed',] }], |
| selectionChange: [{ type: core.Output }], |
| valueChange: [{ type: core.Output }] |
| }; |
| return MatSelect; |
| }(_MatSelectMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatSelectModule = /** @class */ (function () { |
| function MatSelectModule() { |
| } |
| MatSelectModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| overlay.OverlayModule, |
| MatOptionModule, |
| MatCommonModule, |
| ], |
| exports: [MatFormFieldModule, MatSelect, MatSelectTrigger, MatOptionModule, MatCommonModule], |
| declarations: [MatSelect, MatSelectTrigger], |
| providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER] |
| },] }, |
| ]; |
| return MatSelectModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by MatTooltip. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matTooltipAnimations = { |
| /** |
| * Animation that transitions a tooltip in and out. |
| */ |
| tooltipState: animations$1.trigger('state', [ |
| animations$1.state('initial, void, hidden', animations$1.style({ opacity: 0, transform: 'scale(0)' })), |
| animations$1.state('visible', animations$1.style({ transform: 'scale(1)' })), |
| animations$1.transition('* => visible', animations$1.animate('200ms cubic-bezier(0, 0, 0.2, 1)', animations$1.keyframes([ |
| animations$1.style({ opacity: 0, transform: 'scale(0)', offset: 0 }), |
| animations$1.style({ opacity: 0.5, transform: 'scale(0.99)', offset: 0.5 }), |
| animations$1.style({ opacity: 1, transform: 'scale(1)', offset: 1 }) |
| ]))), |
| animations$1.transition('* => hidden', animations$1.animate('100ms cubic-bezier(0, 0, 0.2, 1)', animations$1.style({ opacity: 0 }))), |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Time in ms to throttle repositioning after scroll events. |
| * @type {?} |
| */ |
| var SCROLL_THROTTLE_MS = 20; |
| /** |
| * CSS class that will be attached to the overlay panel. |
| * @type {?} |
| */ |
| var TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel'; |
| /** |
| * Creates an error to be thrown if the user supplied an invalid tooltip position. |
| * \@docs-private |
| * @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. |
| * @type {?} |
| */ |
| var MAT_TOOLTIP_SCROLL_STRATEGY = new core.InjectionToken('mat-tooltip-scroll-strategy'); |
| /** |
| * \@docs-private |
| * @param {?} overlay |
| * @return {?} |
| */ |
| function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay$$1) { |
| return (/** |
| * @return {?} |
| */ |
| function () { return overlay$$1.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS }); }); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = { |
| provide: MAT_TOOLTIP_SCROLL_STRATEGY, |
| deps: [overlay.Overlay], |
| useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY, |
| }; |
| /** |
| * Injection token to be used to override the default options for `matTooltip`. |
| * @type {?} |
| */ |
| var MAT_TOOLTIP_DEFAULT_OPTIONS = new core.InjectionToken('mat-tooltip-default-options', { |
| providedIn: 'root', |
| factory: MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY() { |
| return { |
| showDelay: 0, |
| hideDelay: 0, |
| touchendHideDelay: 1500, |
| }; |
| } |
| /** |
| * 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.io/design/components/tooltips.html |
| */ |
| var MatTooltip = /** @class */ (function () { |
| function MatTooltip(_overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, platform$$1, _ariaDescriber, _focusMonitor, scrollStrategy, _dir, _defaultOptions, hammerLoader) { |
| var _this = this; |
| this._overlay = _overlay; |
| this._elementRef = _elementRef; |
| this._scrollDispatcher = _scrollDispatcher; |
| this._viewContainerRef = _viewContainerRef; |
| this._ngZone = _ngZone; |
| this._ariaDescriber = _ariaDescriber; |
| this._focusMonitor = _focusMonitor; |
| 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.showDelay; |
| /** |
| * The default delay in ms before hiding the tooltip after hide is called |
| */ |
| this.hideDelay = this._defaultOptions.hideDelay; |
| this._message = ''; |
| this._manualListeners = new Map(); |
| /** |
| * Emits when the component is destroyed. |
| */ |
| this._destroyed = new rxjs.Subject(); |
| this._scrollStrategy = scrollStrategy; |
| /** @type {?} */ |
| var element = _elementRef.nativeElement; |
| /** @type {?} */ |
| var hasGestures = typeof window === 'undefined' || ((/** @type {?} */ (window))).Hammer || hammerLoader; |
| // The mouse events shouldn't be bound on mobile devices, because they can prevent the |
| // first tap from firing its click event or can cause the tooltip to open for clicks. |
| if (!platform$$1.IOS && !platform$$1.ANDROID) { |
| this._manualListeners |
| .set('mouseenter', (/** |
| * @return {?} |
| */ |
| function () { return _this.show(); })) |
| .set('mouseleave', (/** |
| * @return {?} |
| */ |
| function () { return _this.hide(); })); |
| } |
| else if (!hasGestures) { |
| // If Hammerjs isn't loaded, fall back to showing on `touchstart`, otherwise |
| // there's no way for the user to trigger the tooltip on a touch device. |
| this._manualListeners.set('touchstart', (/** |
| * @return {?} |
| */ |
| function () { return _this.show(); })); |
| } |
| this._manualListeners.forEach((/** |
| * @param {?} listener |
| * @param {?} event |
| * @return {?} |
| */ |
| function (listener, event) { return element.addEventListener(event, listener); })); |
| _focusMonitor.monitor(_elementRef).pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @param {?} origin |
| * @return {?} |
| */ |
| function (origin) { |
| // Note that the focus monitor runs outside the Angular zone. |
| if (!origin) { |
| _ngZone.run((/** |
| * @return {?} |
| */ |
| function () { return _this.hide(0); })); |
| } |
| else if (origin === 'keyboard') { |
| _ngZone.run((/** |
| * @return {?} |
| */ |
| function () { return _this.show(); })); |
| } |
| })); |
| if (_defaultOptions && _defaultOptions.position) { |
| this.position = _defaultOptions.position; |
| } |
| } |
| Object.defineProperty(MatTooltip.prototype, "position", { |
| /** Allows the user to define the position of the tooltip relative to the parent element */ |
| 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; |
| if (this._overlayRef) { |
| this._updatePosition(); |
| if (this._tooltipInstance) { |
| (/** @type {?} */ (this._tooltipInstance)).show(0); |
| } |
| this._overlayRef.updatePosition(); |
| } |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatTooltip.prototype, "disabled", { |
| /** Disables the display of the tooltip. */ |
| 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, "message", { |
| /** The message to be displayed in the tooltip */ |
| 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", { |
| /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */ |
| 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 |
| }); |
| /** |
| * Setup styling-specific things |
| */ |
| /** |
| * Setup styling-specific things |
| * @return {?} |
| */ |
| MatTooltip.prototype.ngOnInit = /** |
| * Setup styling-specific things |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| var elementStyle = (/** @type {?} */ (element.style)); |
| 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 and in Safari, because it will prevent users from typing in inputs. |
| // Since `user-select: none` is not needed for the `longpress` event and can cause unexpected |
| // behavior for text fields, we always clear the `user-select` to avoid such issues. |
| elementStyle.webkitUserSelect = elementStyle.userSelect = elementStyle.msUserSelect = ''; |
| } |
| // Hammer applies `-webkit-user-drag: none` on all elements by default, |
| // which breaks the native drag&drop. If the consumer explicitly made |
| // the element draggable, clear the `-webkit-user-drag`. |
| if (element.draggable && elementStyle.webkitUserDrag === 'none') { |
| elementStyle.webkitUserDrag = ''; |
| } |
| }; |
| /** |
| * 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._overlayRef) { |
| this._overlayRef.dispose(); |
| this._tooltipInstance = null; |
| } |
| // Clean up the event listeners set in the constructor |
| this._manualListeners.forEach((/** |
| * @param {?} listener |
| * @param {?} event |
| * @return {?} |
| */ |
| function (listener, event) { |
| _this._elementRef.nativeElement.removeEventListener(event, listener); |
| })); |
| this._manualListeners.clear(); |
| this._destroyed.next(); |
| this._destroyed.complete(); |
| this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.message); |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| }; |
| /** 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) { |
| var _this = this; |
| if (delay === void 0) { delay = this.showDelay; } |
| if (this.disabled || !this.message || (this._isTooltipVisible() && |
| !(/** @type {?} */ (this._tooltipInstance))._showTimeoutId && !(/** @type {?} */ (this._tooltipInstance))._hideTimeoutId)) { |
| return; |
| } |
| /** @type {?} */ |
| var overlayRef = this._createOverlay(); |
| this._detach(); |
| this._portal = this._portal || new portal.ComponentPortal(TooltipComponent, this._viewContainerRef); |
| this._tooltipInstance = overlayRef.attach(this._portal).instance; |
| this._tooltipInstance.afterHidden() |
| .pipe(operators.takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._detach(); })); |
| this._setTooltipClass(this._tooltipClass); |
| this._updateTooltipMessage(); |
| (/** @type {?} */ (this._tooltipInstance)).show(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 && !keycodes.hasModifierKey(e)) { |
| e.preventDefault(); |
| 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.touchendHideDelay); |
| }; |
| /** Create the overlay config and position strategy */ |
| /** |
| * Create the overlay config and position strategy |
| * @private |
| * @return {?} |
| */ |
| MatTooltip.prototype._createOverlay = /** |
| * Create the overlay config and position strategy |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._overlayRef) { |
| return this._overlayRef; |
| } |
| /** @type {?} */ |
| var scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(this._elementRef); |
| // Create connected position strategy that listens for scroll events to reposition. |
| /** @type {?} */ |
| var strategy = this._overlay.position() |
| .flexibleConnectedTo(this._elementRef) |
| .withTransformOriginOn('.mat-tooltip') |
| .withFlexibleDimensions(false) |
| .withViewportMargin(8) |
| .withScrollableContainers(scrollableAncestors); |
| strategy.positionChanges.pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @param {?} change |
| * @return {?} |
| */ |
| 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. |
| _this._ngZone.run((/** |
| * @return {?} |
| */ |
| function () { return _this.hide(0); })); |
| } |
| } |
| })); |
| this._overlayRef = this._overlay.create({ |
| direction: this._dir, |
| positionStrategy: strategy, |
| panelClass: TOOLTIP_PANEL_CLASS, |
| scrollStrategy: this._scrollStrategy() |
| }); |
| this._updatePosition(); |
| this._overlayRef.detachments() |
| .pipe(operators.takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._detach(); })); |
| return this._overlayRef; |
| }; |
| /** Detaches the currently-attached tooltip. */ |
| /** |
| * Detaches the currently-attached tooltip. |
| * @private |
| * @return {?} |
| */ |
| MatTooltip.prototype._detach = /** |
| * Detaches the currently-attached tooltip. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this._overlayRef && this._overlayRef.hasAttached()) { |
| this._overlayRef.detach(); |
| } |
| this._tooltipInstance = null; |
| }; |
| /** Updates the position of the current tooltip. */ |
| /** |
| * Updates the position of the current tooltip. |
| * @private |
| * @return {?} |
| */ |
| MatTooltip.prototype._updatePosition = /** |
| * Updates the position of the current tooltip. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var position = (/** @type {?} */ ((/** @type {?} */ (this._overlayRef)).getConfig().positionStrategy)); |
| /** @type {?} */ |
| var origin = this._getOrigin(); |
| /** @type {?} */ |
| var overlay$$1 = this._getOverlayPosition(); |
| position.withPositions([ |
| __assign({}, origin.main, overlay$$1.main), |
| __assign({}, origin.fallback, overlay$$1.fallback) |
| ]); |
| }; |
| /** |
| * 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 () { |
| /** @type {?} */ |
| var isLtr = !this._dir || this._dir.value == 'ltr'; |
| /** @type {?} */ |
| var position = this.position; |
| /** @type {?} */ |
| var originPosition; |
| if (position == 'above' || position == 'below') { |
| originPosition = { originX: 'center', originY: position == 'above' ? 'top' : 'bottom' }; |
| } |
| else if (position == 'before' || |
| (position == 'left' && isLtr) || |
| (position == 'right' && !isLtr)) { |
| originPosition = { originX: 'start', originY: 'center' }; |
| } |
| else if (position == 'after' || |
| (position == 'right' && isLtr) || |
| (position == 'left' && !isLtr)) { |
| originPosition = { originX: 'end', originY: 'center' }; |
| } |
| else { |
| throw getMatTooltipInvalidPositionError(position); |
| } |
| var _a = this._invertPosition(originPosition.originX, originPosition.originY), x = _a.x, y = _a.y; |
| return { |
| main: originPosition, |
| 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 () { |
| /** @type {?} */ |
| var isLtr = !this._dir || this._dir.value == 'ltr'; |
| /** @type {?} */ |
| var position = this.position; |
| /** @type {?} */ |
| var overlayPosition; |
| if (position == 'above') { |
| overlayPosition = { overlayX: 'center', overlayY: 'bottom' }; |
| } |
| else if (position == 'below') { |
| overlayPosition = { overlayX: 'center', overlayY: 'top' }; |
| } |
| else if (position == 'before' || |
| (position == 'left' && isLtr) || |
| (position == 'right' && !isLtr)) { |
| overlayPosition = { overlayX: 'end', overlayY: 'center' }; |
| } |
| else if (position == 'after' || |
| (position == 'right' && isLtr) || |
| (position == 'left' && !isLtr)) { |
| overlayPosition = { overlayX: 'start', overlayY: 'center' }; |
| } |
| else { |
| throw getMatTooltipInvalidPositionError(position); |
| } |
| var _a = this._invertPosition(overlayPosition.overlayX, overlayPosition.overlayY), x = _a.x, y = _a.y; |
| return { |
| main: overlayPosition, |
| fallback: { overlayX: x, overlayY: y } |
| }; |
| }; |
| /** Updates the tooltip message and repositions the overlay according to the new message length */ |
| /** |
| * Updates the tooltip message and repositions the overlay according to the new message length |
| * @private |
| * @return {?} |
| */ |
| MatTooltip.prototype._updateTooltipMessage = /** |
| * Updates the tooltip message and repositions the overlay according to the new message length |
| * @private |
| * @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(operators.take(1), operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this._tooltipInstance) { |
| (/** @type {?} */ (_this._overlayRef)).updatePosition(); |
| } |
| })); |
| } |
| }; |
| /** Updates the tooltip class */ |
| /** |
| * Updates the tooltip class |
| * @private |
| * @param {?} tooltipClass |
| * @return {?} |
| */ |
| MatTooltip.prototype._setTooltipClass = /** |
| * Updates the tooltip class |
| * @private |
| * @param {?} tooltipClass |
| * @return {?} |
| */ |
| function (tooltipClass) { |
| if (this._tooltipInstance) { |
| this._tooltipInstance.tooltipClass = tooltipClass; |
| this._tooltipInstance._markForCheck(); |
| } |
| }; |
| /** Inverts an overlay position. */ |
| /** |
| * Inverts an overlay position. |
| * @private |
| * @param {?} x |
| * @param {?} y |
| * @return {?} |
| */ |
| MatTooltip.prototype._invertPosition = /** |
| * Inverts an overlay position. |
| * @private |
| * @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,] }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [platformBrowser.HAMMER_LOADER,] }] } |
| ]; }; |
| MatTooltip.propDecorators = { |
| position: [{ type: core.Input, args: ['matTooltipPosition',] }], |
| disabled: [{ type: core.Input, args: ['matTooltipDisabled',] }], |
| 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 = /** @class */ (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; |
| /** |
| * Subject for notifying that the tooltip has been hidden from the view |
| */ |
| this._onHide = new rxjs.Subject(); |
| /** |
| * Stream that emits whether the user has a handset-sized display. |
| */ |
| this._isHandset = this._breakpointObserver.observe(layout.Breakpoints.Handset); |
| } |
| /** |
| * Shows the tooltip with an animation originating from the provided origin |
| * @param delay Amount of milliseconds to the delay showing the tooltip. |
| */ |
| /** |
| * Shows the tooltip with an animation originating from the provided origin |
| * @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 {?} delay Amount of milliseconds to the delay showing the tooltip. |
| * @return {?} |
| */ |
| function (delay) { |
| var _this = this; |
| // Cancel the delayed hide if it is scheduled |
| if (this._hideTimeoutId) { |
| clearTimeout(this._hideTimeoutId); |
| this._hideTimeoutId = null; |
| } |
| // Body interactions should cancel the tooltip if there is a delay in showing. |
| this._closeOnInteraction = true; |
| this._showTimeoutId = setTimeout((/** |
| * @return {?} |
| */ |
| function () { |
| _this._visibility = 'visible'; |
| _this._showTimeoutId = null; |
| // 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._showTimeoutId = null; |
| } |
| this._hideTimeoutId = setTimeout((/** |
| * @return {?} |
| */ |
| function () { |
| _this._visibility = 'hidden'; |
| _this._hideTimeoutId = null; |
| // 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'; |
| }; |
| /** |
| * @return {?} |
| */ |
| TooltipComponent.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._onHide.complete(); |
| }; |
| /** |
| * @return {?} |
| */ |
| TooltipComponent.prototype._animationStart = /** |
| * @return {?} |
| */ |
| function () { |
| this._closeOnInteraction = false; |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| TooltipComponent.prototype._animationDone = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var toState = (/** @type {?} */ (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.io/design/components/tooltips.html#behavior |
| */ |
| /** |
| * Interactions on the HTML body should close the tooltip immediately as defined in the |
| * material design spec. |
| * https://material.io/design/components/tooltips.html#behavior |
| * @return {?} |
| */ |
| TooltipComponent.prototype._handleBodyInteraction = /** |
| * Interactions on the HTML body should close the tooltip immediately as defined in the |
| * material design spec. |
| * https://material.io/design/components/tooltips.html#behavior |
| * @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\" [@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:4px;margin:14px;max-width:250px;padding-left:8px;padding-right:8px;overflow:hidden;text-overflow:ellipsis}@media (-ms-high-contrast:active){.mat-tooltip{outline:solid 1px}}.mat-tooltip-handset{margin:24px;padding-left:16px;padding-right:16px}"], |
| encapsulation: core.ViewEncapsulation.None, |
| 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: layout.BreakpointObserver } |
| ]; }; |
| return TooltipComponent; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatTooltipModule = /** @class */ (function () { |
| function MatTooltipModule() { |
| } |
| MatTooltipModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| a11y.A11yModule, |
| common.CommonModule, |
| overlay.OverlayModule, |
| MatCommonModule, |
| ], |
| exports: [MatTooltip, TooltipComponent, MatCommonModule], |
| declarations: [MatTooltip, TooltipComponent], |
| entryComponents: [TooltipComponent], |
| providers: [ |
| MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, |
| { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: GestureConfig }, |
| ] |
| },] }, |
| ]; |
| return MatTooltipModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (function () { |
| function MatPaginatorIntl() { |
| /** |
| * Stream to emit from when labels are changed. Use this to notify components when the labels have |
| * changed after initialization. |
| */ |
| this.changes = new rxjs.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 = (/** |
| * @param {?} page |
| * @param {?} pageSize |
| * @param {?} length |
| * @return {?} |
| */ |
| function (page, pageSize, length) { |
| if (length == 0 || pageSize == 0) { |
| return "0 of " + length; |
| } |
| length = Math.max(length, 0); |
| /** @type {?} */ |
| var startIndex = page * pageSize; |
| // If the start index exceeds the list length, do not try and fix the end index to the end. |
| /** @type {?} */ |
| var endIndex = startIndex < length ? |
| Math.min(startIndex + pageSize, length) : |
| startIndex + pageSize; |
| return startIndex + 1 + " - " + endIndex + " of " + length; |
| }); |
| } |
| MatPaginatorIntl.decorators = [ |
| { type: core.Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ MatPaginatorIntl.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatPaginatorIntl_Factory() { return new MatPaginatorIntl(); }, token: MatPaginatorIntl, providedIn: "root" }); |
| return MatPaginatorIntl; |
| }()); |
| /** |
| * \@docs-private |
| * @param {?} parentIntl |
| * @return {?} |
| */ |
| function MAT_PAGINATOR_INTL_PROVIDER_FACTORY(parentIntl) { |
| return parentIntl || new MatPaginatorIntl(); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * The default page size if there is no page size and there are no provided page size options. |
| * @type {?} |
| */ |
| var DEFAULT_PAGE_SIZE = 50; |
| /** |
| * Change event object that is emitted when the user selects a |
| * different page size or navigates to another page. |
| */ |
| var /** |
| * Change event object that is emitted when the user selects a |
| * different page size or navigates to another page. |
| */ |
| PageEvent = /** @class */ (function () { |
| function PageEvent() { |
| } |
| return PageEvent; |
| }()); |
| // Boilerplate for applying mixins to MatPaginator. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatPaginator. |
| /** |
| * \@docs-private |
| */ |
| MatPaginatorBase = /** @class */ (function () { |
| function MatPaginatorBase() { |
| } |
| return MatPaginatorBase; |
| }()); |
| /** @type {?} */ |
| var _MatPaginatorBase = mixinDisabled(mixinInitialized(MatPaginatorBase)); |
| /** |
| * 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 = /** @class */ (function (_super) { |
| __extends(MatPaginator, _super); |
| function MatPaginator(_intl, _changeDetectorRef) { |
| var _this = _super.call(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((/** |
| * @return {?} |
| */ |
| function () { return _this._changeDetectorRef.markForCheck(); })); |
| return _this; |
| } |
| Object.defineProperty(MatPaginator.prototype, "pageIndex", { |
| /** The zero-based page index of the displayed list of items. Defaulted to 0. */ |
| 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 = Math.max(coercion.coerceNumberProperty(value), 0); |
| this._changeDetectorRef.markForCheck(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatPaginator.prototype, "length", { |
| /** The length of the total number of items that are being paginated. Defaulted to 0. */ |
| 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", { |
| /** Number of items to display on a page. By default set to 50. */ |
| 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 = Math.max(coercion.coerceNumberProperty(value), 0); |
| this._updateDisplayedPageSizeOptions(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatPaginator.prototype, "pageSizeOptions", { |
| /** The set of provided page size options to display to the user. */ |
| 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((/** |
| * @param {?} p |
| * @return {?} |
| */ |
| function (p) { return coercion.coerceNumberProperty(p); })); |
| this._updateDisplayedPageSizeOptions(); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatPaginator.prototype, "hidePageSize", { |
| /** Whether to hide the page size selection UI from the user. */ |
| 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", { |
| /** Whether to show the first/last buttons UI to the user. */ |
| 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(); |
| this._markInitialized(); |
| }; |
| /** |
| * @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; |
| } |
| /** @type {?} */ |
| var previousPageIndex = this.pageIndex; |
| this.pageIndex++; |
| this._emitPageEvent(previousPageIndex); |
| }; |
| /** 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; |
| } |
| /** @type {?} */ |
| var previousPageIndex = this.pageIndex; |
| this.pageIndex--; |
| this._emitPageEvent(previousPageIndex); |
| }; |
| /** 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; |
| } |
| /** @type {?} */ |
| var previousPageIndex = this.pageIndex; |
| this.pageIndex = 0; |
| this._emitPageEvent(previousPageIndex); |
| }; |
| /** 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; |
| } |
| /** @type {?} */ |
| var previousPageIndex = this.pageIndex; |
| this.pageIndex = this.getNumberOfPages() - 1; |
| this._emitPageEvent(previousPageIndex); |
| }; |
| /** 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 () { |
| /** @type {?} */ |
| var maxPageIndex = this.getNumberOfPages() - 1; |
| return this.pageIndex < maxPageIndex && this.pageSize != 0; |
| }; |
| /** Calculate the number of pages */ |
| /** |
| * Calculate the number of pages |
| * @return {?} |
| */ |
| MatPaginator.prototype.getNumberOfPages = /** |
| * Calculate the number of pages |
| * @return {?} |
| */ |
| function () { |
| if (!this.pageSize) { |
| return 0; |
| } |
| return Math.ceil(this.length / this.pageSize); |
| }; |
| /** |
| * 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. |
| /** @type {?} */ |
| var startIndex = this.pageIndex * this.pageSize; |
| /** @type {?} */ |
| var previousPageIndex = this.pageIndex; |
| this.pageIndex = Math.floor(startIndex / pageSize) || 0; |
| this.pageSize = pageSize; |
| this._emitPageEvent(previousPageIndex); |
| }; |
| /** Checks whether the buttons for going forwards should be disabled. */ |
| /** |
| * Checks whether the buttons for going forwards should be disabled. |
| * @return {?} |
| */ |
| MatPaginator.prototype._nextButtonsDisabled = /** |
| * Checks whether the buttons for going forwards should be disabled. |
| * @return {?} |
| */ |
| function () { |
| return this.disabled || !this.hasNextPage(); |
| }; |
| /** Checks whether the buttons for going backwards should be disabled. */ |
| /** |
| * Checks whether the buttons for going backwards should be disabled. |
| * @return {?} |
| */ |
| MatPaginator.prototype._previousButtonsDisabled = /** |
| * Checks whether the buttons for going backwards should be disabled. |
| * @return {?} |
| */ |
| function () { |
| return this.disabled || !this.hasPreviousPage(); |
| }; |
| /** |
| * 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @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((/** |
| * @param {?} a |
| * @param {?} b |
| * @return {?} |
| */ |
| function (a, b) { return a - b; })); |
| this._changeDetectorRef.markForCheck(); |
| }; |
| /** Emits an event notifying that a change of the paginator's properties has been triggered. */ |
| /** |
| * Emits an event notifying that a change of the paginator's properties has been triggered. |
| * @private |
| * @param {?} previousPageIndex |
| * @return {?} |
| */ |
| MatPaginator.prototype._emitPageEvent = /** |
| * Emits an event notifying that a change of the paginator's properties has been triggered. |
| * @private |
| * @param {?} previousPageIndex |
| * @return {?} |
| */ |
| function (previousPageIndex) { |
| this.page.emit({ |
| previousPageIndex: previousPageIndex, |
| 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-outer-container\"><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\" [color]=\"color\" class=\"mat-paginator-page-size-select\"><mat-select [value]=\"pageSize\" [disabled]=\"disabled\" [aria-label]=\"_intl.itemsPerPageLabel\" (selectionChange)=\"_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\" [matTooltipDisabled]=\"_previousButtonsDisabled()\" [matTooltipPosition]=\"'above'\" [disabled]=\"_previousButtonsDisabled()\" *ngIf=\"showFirstLastButtons\"><svg class=\"mat-paginator-icon\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z\"/></svg></button> <button mat-icon-button type=\"button\" class=\"mat-paginator-navigation-previous\" (click)=\"previousPage()\" [attr.aria-label]=\"_intl.previousPageLabel\" [matTooltip]=\"_intl.previousPageLabel\" [matTooltipDisabled]=\"_previousButtonsDisabled()\" [matTooltipPosition]=\"'above'\" [disabled]=\"_previousButtonsDisabled()\"><svg class=\"mat-paginator-icon\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/></svg></button> <button mat-icon-button type=\"button\" class=\"mat-paginator-navigation-next\" (click)=\"nextPage()\" [attr.aria-label]=\"_intl.nextPageLabel\" [matTooltip]=\"_intl.nextPageLabel\" [matTooltipDisabled]=\"_nextButtonsDisabled()\" [matTooltipPosition]=\"'above'\" [disabled]=\"_nextButtonsDisabled()\"><svg class=\"mat-paginator-icon\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg></button> <button mat-icon-button type=\"button\" class=\"mat-paginator-navigation-last\" (click)=\"lastPage()\" [attr.aria-label]=\"_intl.lastPageLabel\" [matTooltip]=\"_intl.lastPageLabel\" [matTooltipDisabled]=\"_nextButtonsDisabled()\" [matTooltipPosition]=\"'above'\" [disabled]=\"_nextButtonsDisabled()\" *ngIf=\"showFirstLastButtons\"><svg class=\"mat-paginator-icon\" viewBox=\"0 0 24 24\" focusable=\"false\"><path d=\"M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z\"/></svg></button></div></div></div>", |
| styles: [".mat-paginator{display:block}.mat-paginator-outer-container{display:flex}.mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;min-height:56px;padding:0 8px;flex-wrap:wrap-reverse;width:100%}.mat-paginator-page-size{display:flex;align-items:baseline;margin-right:8px}[dir=rtl] .mat-paginator-page-size{margin-right:0;margin-left:8px}.mat-paginator-page-size-label{margin:0 4px}.mat-paginator-page-size-select{margin:6px 4px 0 4px;width:56px}.mat-paginator-page-size-select.mat-form-field-appearance-outline{width:64px}.mat-paginator-page-size-select.mat-form-field-appearance-fill{width:64px}.mat-paginator-range-label{margin:0 32px 0 24px}.mat-paginator-range-actions{display:flex;align-items:center}.mat-paginator-icon{width:28px;fill:currentColor}[dir=rtl] .mat-paginator-icon{transform:rotate(180deg)}"], |
| inputs: ['disabled'], |
| host: { |
| 'class': 'mat-paginator', |
| }, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatPaginator.ctorParameters = function () { return [ |
| { type: MatPaginatorIntl }, |
| { type: core.ChangeDetectorRef } |
| ]; }; |
| MatPaginator.propDecorators = { |
| color: [{ type: core.Input }], |
| 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; |
| }(_MatPaginatorBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatPaginatorModule = /** @class */ (function () { |
| function MatPaginatorModule() { |
| } |
| MatPaginatorModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| MatButtonModule, |
| MatSelectModule, |
| MatTooltipModule, |
| ], |
| exports: [MatPaginator], |
| declarations: [MatPaginator], |
| providers: [MAT_PAGINATOR_INTL_PROVIDER], |
| },] }, |
| ]; |
| return MatPaginatorModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatProgressBar. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatProgressBar. |
| /** |
| * \@docs-private |
| */ |
| MatProgressBarBase = /** @class */ (function () { |
| function MatProgressBarBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatProgressBarBase; |
| }()); |
| /** @type {?} */ |
| var _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary'); |
| /** |
| * Injection token used to provide the current location to `MatProgressBar`. |
| * Used to handle server-side rendering and to stub out during unit tests. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_PROGRESS_BAR_LOCATION = new core.InjectionToken('mat-progress-bar-location', { providedIn: 'root', factory: MAT_PROGRESS_BAR_LOCATION_FACTORY }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_PROGRESS_BAR_LOCATION_FACTORY() { |
| /** @type {?} */ |
| var _document = core.inject(common.DOCUMENT); |
| /** @type {?} */ |
| var _location = _document ? _document.location : null; |
| return { |
| // Note that this needs to be a function, rather than a property, because Angular |
| // will only resolve it once, but we want the current path on each call. |
| getPathname: (/** |
| * @return {?} |
| */ |
| function () { return _location ? (_location.pathname + _location.search) : ''; }) |
| }; |
| } |
| /** |
| * Counter used to generate unique IDs for progress bars. |
| * @type {?} |
| */ |
| var progressbarId = 0; |
| /** |
| * `<mat-progress-bar>` component. |
| */ |
| var MatProgressBar = /** @class */ (function (_super) { |
| __extends(MatProgressBar, _super); |
| function MatProgressBar(_elementRef, _ngZone, _animationMode, |
| /** |
| * @deprecated `location` parameter to be made required. |
| * @breaking-change 8.0.0 |
| */ |
| location) { |
| var _this = _super.call(this, _elementRef) || this; |
| _this._elementRef = _elementRef; |
| _this._ngZone = _ngZone; |
| _this._animationMode = _animationMode; |
| /** |
| * Flag that indicates whether NoopAnimations mode is set to true. |
| */ |
| _this._isNoopAnimation = false; |
| _this._value = 0; |
| _this._bufferValue = 0; |
| /** |
| * Event emitted when animation of the primary progress bar completes. This event will not |
| * be emitted when animations are disabled, nor will it be emitted for modes with continuous |
| * animations (indeterminate and query). |
| */ |
| _this.animationEnd = new core.EventEmitter(); |
| /** |
| * Reference to animation end subscription to be unsubscribed on destroy. |
| */ |
| _this._animationEndSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * 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'; |
| /** |
| * ID of the progress bar. |
| */ |
| _this.progressbarId = "mat-progress-bar-" + progressbarId++; |
| // We need to prefix the SVG reference with the current path, otherwise they won't work |
| // in Safari if the page has a `<base>` tag. Note that we need quotes inside the `url()`, |
| // because named route URLs can contain parentheses (see #12338). Also we don't use since |
| // we can't tell the difference between whether |
| // the consumer is using the hash location strategy or not, because `Location` normalizes |
| // both `/#/foo/bar` and `/foo/bar` to the same thing. |
| /** @type {?} */ |
| var path = location ? location.getPathname().split('#')[0] : ''; |
| _this._rectangleFillValue = "url('" + path + "#" + _this.progressbarId + "')"; |
| _this._isNoopAnimation = _animationMode === 'NoopAnimations'; |
| return _this; |
| } |
| Object.defineProperty(MatProgressBar.prototype, "value", { |
| /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */ |
| 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); |
| // When noop animation is set to true, trigger animationEnd directly. |
| if (this._isNoopAnimation) { |
| this._emitAnimationEnd(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatProgressBar.prototype, "bufferValue", { |
| /** Buffer value of the progress bar. Defaults to zero. */ |
| 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 () { |
| /** @type {?} */ |
| var 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') { |
| /** @type {?} */ |
| var scale = this.bufferValue / 100; |
| return { transform: "scaleX(" + scale + ")" }; |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatProgressBar.prototype.ngAfterViewInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (!this._isNoopAnimation) { |
| // Run outside angular so change detection didn't get triggered on every transition end |
| // instead only on the animation that we care about (primary value bar's transitionend) |
| this._ngZone.runOutsideAngular(((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var element = _this._primaryValueBar.nativeElement; |
| _this._animationEndSubscription = |
| ((/** @type {?} */ (rxjs.fromEvent(element, 'transitionend')))) |
| .pipe(operators.filter(((/** |
| * @param {?} e |
| * @return {?} |
| */ |
| function (e) { return e.target === element; })))) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._ngZone.run((/** |
| * @return {?} |
| */ |
| function () { return _this._emitAnimationEnd(); })); })); |
| }))); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatProgressBar.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._animationEndSubscription.unsubscribe(); |
| }; |
| /** Emit an animationEnd event if in determinate or buffer mode. */ |
| /** |
| * Emit an animationEnd event if in determinate or buffer mode. |
| * @private |
| * @return {?} |
| */ |
| MatProgressBar.prototype._emitAnimationEnd = /** |
| * Emit an animationEnd event if in determinate or buffer mode. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this.mode === 'determinate' || this.mode === 'buffer') { |
| this.animationEnd.next({ value: this.value }); |
| } |
| }; |
| MatProgressBar.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-progress-bar', |
| exportAs: 'matProgressBar', |
| host: { |
| 'role': 'progressbar', |
| 'aria-valuemin': '0', |
| 'aria-valuemax': '100', |
| '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value', |
| '[attr.mode]': 'mode', |
| 'class': 'mat-progress-bar', |
| '[class._mat-animation-noopable]': '_isNoopAnimation', |
| }, |
| inputs: ['color'], |
| template: "<svg width=\"100%\" height=\"4\" focusable=\"false\" class=\"mat-progress-bar-background mat-progress-bar-element\"><defs><pattern [id]=\"progressbarId\" x=\"4\" y=\"0\" width=\"8\" height=\"4\" patternUnits=\"userSpaceOnUse\"><circle cx=\"2\" cy=\"2\" r=\"2\"/></pattern></defs><rect [attr.fill]=\"_rectangleFillValue\" 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()\" #primaryValueBar></div><div class=\"mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element\"></div>", |
| styles: [".mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.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)}@media (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-background{display:none}}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}@media (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}}.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}@media (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}}.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;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@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(-8px)}}"], |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatProgressBar.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.NgZone }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_PROGRESS_BAR_LOCATION,] }] } |
| ]; }; |
| MatProgressBar.propDecorators = { |
| value: [{ type: core.Input }], |
| bufferValue: [{ type: core.Input }], |
| _primaryValueBar: [{ type: core.ViewChild, args: ['primaryValueBar', { static: false },] }], |
| animationEnd: [{ type: core.Output }], |
| 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)); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatProgressBarModule = /** @class */ (function () { |
| function MatProgressBarModule() { |
| } |
| MatProgressBarModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [common.CommonModule, MatCommonModule], |
| exports: [MatProgressBar, MatCommonModule], |
| declarations: [MatProgressBar], |
| },] }, |
| ]; |
| return MatProgressBarModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Base reference size of the spinner. |
| * \@docs-private |
| * @type {?} |
| */ |
| var BASE_SIZE = 100; |
| /** |
| * Base reference stroke width of the spinner. |
| * \@docs-private |
| * @type {?} |
| */ |
| var BASE_STROKE_WIDTH = 10; |
| // Boilerplate for applying mixins to MatProgressSpinner. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatProgressSpinner. |
| /** |
| * \@docs-private |
| */ |
| MatProgressSpinnerBase = /** @class */ (function () { |
| function MatProgressSpinnerBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatProgressSpinnerBase; |
| }()); |
| /** @type {?} */ |
| var _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary'); |
| /** |
| * Injection token to be used to override the default options for `mat-progress-spinner`. |
| * @type {?} |
| */ |
| var MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS = new core.InjectionToken('mat-progress-spinner-default-options', { |
| providedIn: 'root', |
| factory: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY() { |
| return { diameter: BASE_SIZE }; |
| } |
| // .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/components/issues/8984 |
| /** @type {?} */ |
| 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 = /** @class */ (function (_super) { |
| __extends(MatProgressSpinner, _super); |
| function MatProgressSpinner(_elementRef, platform$$1, _document, animationMode, defaults) { |
| var _this = _super.call(this, _elementRef) || this; |
| _this._elementRef = _elementRef; |
| _this._document = _document; |
| _this._diameter = BASE_SIZE; |
| _this._value = 0; |
| _this._fallbackAnimation = false; |
| /** |
| * Mode of the progress circle |
| */ |
| _this.mode = 'determinate'; |
| /** @type {?} */ |
| var trackedDiameters = MatProgressSpinner._diameters; |
| // The base size is already inserted via the component's structural styles. We still |
| // need to track it so we don't end up adding the same styles again. |
| if (!trackedDiameters.has(_document.head)) { |
| trackedDiameters.set(_document.head, new Set([BASE_SIZE])); |
| } |
| _this._styleRoot = _getShadowRoot(_elementRef.nativeElement, _document) || _document.head; |
| _this._fallbackAnimation = platform$$1.EDGE || platform$$1.TRIDENT; |
| _this._noopAnimations = animationMode === 'NoopAnimations' && |
| (!!defaults && !defaults._forceAnimations); |
| if (defaults) { |
| if (defaults.diameter) { |
| _this.diameter = defaults.diameter; |
| } |
| if (defaults.strokeWidth) { |
| _this.strokeWidth = defaults.strokeWidth; |
| } |
| } |
| // On IE and Edge, we can't animate the `stroke-dashoffset` |
| // reliably so we fall back to a non-spec animation. |
| /** @type {?} */ |
| var animationClass = "mat-progress-spinner-indeterminate" + (_this._fallbackAnimation ? '-fallback' : '') + "-animation"; |
| _elementRef.nativeElement.classList.add(animationClass); |
| return _this; |
| } |
| Object.defineProperty(MatProgressSpinner.prototype, "diameter", { |
| /** The diameter of the progress spinner (will set width and height of svg). */ |
| 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) { |
| /** @type {?} */ |
| var trackedDiameters = MatProgressSpinner._diameters; |
| /** @type {?} */ |
| var diametersForElement = trackedDiameters.get(this._styleRoot); |
| if (!diametersForElement || !diametersForElement.has(this._diameter)) { |
| this._attachStyleNode(); |
| } |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatProgressSpinner.prototype, "strokeWidth", { |
| /** Stroke width of the progress spinner. */ |
| 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", { |
| /** Value of the progress circle. */ |
| 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 |
| }); |
| 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 () { |
| /** @type {?} */ |
| var 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.diameter * 100; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** Dynamically generates a style tag containing the correct animation for this diameter. */ |
| /** |
| * Dynamically generates a style tag containing the correct animation for this diameter. |
| * @private |
| * @return {?} |
| */ |
| MatProgressSpinner.prototype._attachStyleNode = /** |
| * Dynamically generates a style tag containing the correct animation for this diameter. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var styleTag = this._document.createElement('style'); |
| /** @type {?} */ |
| var styleRoot = this._styleRoot; |
| /** @type {?} */ |
| var currentDiameter = this._diameter; |
| /** @type {?} */ |
| var diameters = MatProgressSpinner._diameters; |
| /** @type {?} */ |
| var diametersForElement = diameters.get(styleRoot); |
| styleTag.setAttribute('mat-spinner-animation', currentDiameter + ''); |
| styleTag.textContent = this._getAnimationText(); |
| styleRoot.appendChild(styleTag); |
| if (!diametersForElement) { |
| diametersForElement = new Set(); |
| diameters.set(styleRoot, diametersForElement); |
| } |
| diametersForElement.add(currentDiameter); |
| }; |
| /** Generates animation styles adjusted for the spinner's diameter. */ |
| /** |
| * Generates animation styles adjusted for the spinner's diameter. |
| * @private |
| * @return {?} |
| */ |
| MatProgressSpinner.prototype._getAnimationText = /** |
| * Generates animation styles adjusted for the spinner's diameter. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return INDETERMINATE_ANIMATION_TEMPLATE |
| // Animation should begin at 5% and end at 80% |
| .replace(/START_VALUE/g, "" + 0.95 * this._strokeCircumference) |
| .replace(/END_VALUE/g, "" + 0.2 * this._strokeCircumference) |
| .replace(/DIAMETER/g, "" + this.diameter); |
| }; |
| /** |
| * Tracks diameters of existing instances to de-dupe generated styles (default d = 100). |
| * We need to keep track of which elements the diameters were attached to, because for |
| * elements in the Shadow DOM the style tags are attached to the shadow root, rather |
| * than the document head. |
| */ |
| MatProgressSpinner._diameters = new WeakMap(); |
| MatProgressSpinner.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-progress-spinner', |
| exportAs: 'matProgressSpinner', |
| host: { |
| 'role': 'progressbar', |
| 'class': 'mat-progress-spinner', |
| '[class._mat-animation-noopable]': "_noopAnimations", |
| '[style.width.px]': 'diameter', |
| '[style.height.px]': 'diameter', |
| '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null', |
| '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null', |
| '[attr.aria-valuenow]': 'mode === "determinate" ? value : null', |
| '[attr.mode]': 'mode', |
| }, |
| inputs: ['color'], |
| template: "<svg [style.width.px]=\"diameter\" [style.height.px]=\"diameter\" [attr.viewBox]=\"_viewBox\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" [ngSwitch]=\"mode === 'indeterminate'\"><circle *ngSwitchCase=\"true\" 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><circle *ngSwitchCase=\"false\" cx=\"50%\" cy=\"50%\" [attr.r]=\"_circleRadius\" [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-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate]{animation:mat-progress-spinner-linear-rotate 2s linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate]{transition:none;animation:none}.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-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}.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-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate]{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate] circle{transition-property:stroke}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate] circle{transition:none;animation:none}@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, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatProgressSpinner.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: platform.Platform }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| 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 = /** @class */ (function (_super) { |
| __extends(MatSpinner, _super); |
| function MatSpinner(elementRef, platform$$1, document, animationMode, defaults) { |
| var _this = _super.call(this, elementRef, platform$$1, document, animationMode, defaults) || 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', |
| '[class._mat-animation-noopable]': "_noopAnimations", |
| '[style.width.px]': 'diameter', |
| '[style.height.px]': 'diameter', |
| }, |
| inputs: ['color'], |
| template: "<svg [style.width.px]=\"diameter\" [style.height.px]=\"diameter\" [attr.viewBox]=\"_viewBox\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" [ngSwitch]=\"mode === 'indeterminate'\"><circle *ngSwitchCase=\"true\" 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><circle *ngSwitchCase=\"false\" cx=\"50%\" cy=\"50%\" [attr.r]=\"_circleRadius\" [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-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate]{animation:mat-progress-spinner-linear-rotate 2s linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate]{transition:none;animation:none}.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-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}.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-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate]{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate] circle{transition-property:stroke}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode=indeterminate] circle{transition:none;animation:none}@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, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatSpinner.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: platform.Platform }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| return MatSpinner; |
| }(MatProgressSpinner)); |
| /** |
| * Gets the shadow root of an element, if supported and the element is inside the Shadow DOM. |
| * @param {?} element |
| * @param {?} _document |
| * @return {?} |
| */ |
| function _getShadowRoot(element, _document) { |
| // TODO(crisbeto): see whether we should move this into the CDK |
| // feature detection utilities once #15616 gets merged in. |
| if (typeof window !== 'undefined') { |
| /** @type {?} */ |
| var head = _document.head; |
| // Check whether the browser supports Shadow DOM. |
| if (head && (((/** @type {?} */ (head))).createShadowRoot || head.attachShadow)) { |
| /** @type {?} */ |
| var rootNode = element.getRootNode ? element.getRootNode() : null; |
| // We need to take the `ShadowRoot` off of `window`, because the built-in types are |
| // incorrect. See https://github.com/Microsoft/TypeScript/issues/27929. |
| if (rootNode instanceof ((/** @type {?} */ (window))).ShadowRoot) { |
| return rootNode; |
| } |
| } |
| } |
| return null; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatProgressSpinnerModule = /** @class */ (function () { |
| function MatProgressSpinnerModule() { |
| } |
| MatProgressSpinnerModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule, common.CommonModule], |
| exports: [ |
| MatProgressSpinner, |
| MatSpinner, |
| MatCommonModule |
| ], |
| declarations: [ |
| MatProgressSpinner, |
| MatSpinner |
| ], |
| },] }, |
| ]; |
| return MatProgressSpinnerModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var MAT_RADIO_DEFAULT_OPTIONS = new core.InjectionToken('mat-radio-default-options', { |
| providedIn: 'root', |
| factory: MAT_RADIO_DEFAULT_OPTIONS_FACTORY |
| }); |
| /** |
| * @return {?} |
| */ |
| function MAT_RADIO_DEFAULT_OPTIONS_FACTORY() { |
| return { |
| color: 'accent' |
| }; |
| } |
| // Increasing integer for generating unique ids for radio components. |
| /** @type {?} */ |
| var nextUniqueId$7 = 0; |
| /** |
| * Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This |
| * allows it to support [(ngModel)] and ngControl. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatRadioGroup; })), |
| multi: true |
| }; |
| /** |
| * Change event object emitted by MatRadio and MatRadioGroup. |
| */ |
| var /** |
| * Change event object emitted by MatRadio and MatRadioGroup. |
| */ |
| MatRadioChange = /** @class */ (function () { |
| function MatRadioChange(source, value) { |
| this.source = source; |
| this.value = value; |
| } |
| return MatRadioChange; |
| }()); |
| /** |
| * A group of radio buttons. May contain one or more `<mat-radio-button>` elements. |
| */ |
| var MatRadioGroup = /** @class */ (function () { |
| function MatRadioGroup(_changeDetector) { |
| this._changeDetector = _changeDetector; |
| /** |
| * Selected value for the radio group. |
| */ |
| this._value = null; |
| /** |
| * The HTML name attribute applied to radio buttons in this group. |
| */ |
| this._name = "mat-radio-group-" + nextUniqueId$7++; |
| /** |
| * 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 = (/** |
| * @return {?} |
| */ |
| function () { }); |
| /** |
| * onTouch function registered via registerOnTouch (ControlValueAccessor). |
| * \@docs-private |
| */ |
| this.onTouched = (/** |
| * @return {?} |
| */ |
| 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(); |
| } |
| Object.defineProperty(MatRadioGroup.prototype, "name", { |
| /** Name of the radio button group. All radio buttons inside this group will use this 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, "labelPosition", { |
| /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */ |
| 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", { |
| /** |
| * Value for the radio-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. |
| */ |
| get: /** |
| * Value for the radio-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. |
| * @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", { |
| /** |
| * The currently selected radio button. If set to a new radio button, the radio group value |
| * will be updated to match the new selected button. |
| */ |
| get: /** |
| * The currently selected radio button. If set to a new radio button, the radio group value |
| * will be updated to match the new selected button. |
| * @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", { |
| /** Whether the radio group is 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", { |
| /** Whether the radio group is 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(); |
| } |
| }; |
| /** |
| * @private |
| * @return {?} |
| */ |
| MatRadioGroup.prototype._updateRadioButtonNames = /** |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._radios) { |
| this._radios.forEach((/** |
| * @param {?} radio |
| * @return {?} |
| */ |
| function (radio) { |
| radio.name = _this.name; |
| radio._markForCheck(); |
| })); |
| } |
| }; |
| /** Updates the `selected` radio button from the internal _value state. */ |
| /** |
| * Updates the `selected` radio button from the internal _value state. |
| * @private |
| * @return {?} |
| */ |
| MatRadioGroup.prototype._updateSelectedRadioFromValue = /** |
| * Updates the `selected` radio button from the internal _value state. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| // If the value already matches the selected radio, do nothing. |
| /** @type {?} */ |
| var isAlreadySelected = this._selected !== null && this._selected.value === this._value; |
| if (this._radios && !isAlreadySelected) { |
| this._selected = null; |
| this._radios.forEach((/** |
| * @param {?} radio |
| * @return {?} |
| */ |
| 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((/** |
| * @param {?} radio |
| * @return {?} |
| */ |
| 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', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatRadioGroup.ctorParameters = function () { return [ |
| { type: core.ChangeDetectorRef } |
| ]; }; |
| MatRadioGroup.propDecorators = { |
| change: [{ type: core.Output }], |
| _radios: [{ type: core.ContentChildren, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatRadioButton; })), { descendants: true },] }], |
| color: [{ type: core.Input }], |
| name: [{ 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; |
| }()); |
| // Boilerplate for applying mixins to MatRadioButton. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatRadioButton. |
| /** |
| * \@docs-private |
| */ |
| MatRadioButtonBase = /** @class */ (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 |
| /** @type {?} */ |
| var _MatRadioButtonMixinBase = mixinDisableRipple(mixinTabIndex(MatRadioButtonBase)); |
| /** |
| * A Material design radio-button. Typically placed inside of `<mat-radio-group>` elements. |
| */ |
| var MatRadioButton = /** @class */ (function (_super) { |
| __extends(MatRadioButton, _super); |
| function MatRadioButton(radioGroup, elementRef, _changeDetector, _focusMonitor, _radioDispatcher, _animationMode, _providerOverride) { |
| var _this = _super.call(this, elementRef) || this; |
| _this._changeDetector = _changeDetector; |
| _this._focusMonitor = _focusMonitor; |
| _this._radioDispatcher = _radioDispatcher; |
| _this._animationMode = _animationMode; |
| _this._providerOverride = _providerOverride; |
| _this._uniqueId = "mat-radio-" + ++nextUniqueId$7; |
| /** |
| * 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 = (/** |
| * @return {?} |
| */ |
| 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. |
| _this.radioGroup = radioGroup; |
| _this._removeUniqueSelectionListener = |
| _radioDispatcher.listen((/** |
| * @param {?} id |
| * @param {?} name |
| * @return {?} |
| */ |
| function (id, name) { |
| if (id !== _this.id && name === _this.name) { |
| _this.checked = false; |
| } |
| })); |
| return _this; |
| } |
| Object.defineProperty(MatRadioButton.prototype, "checked", { |
| /** Whether this radio button is checked. */ |
| get: /** |
| * Whether this radio button is checked. |
| * @return {?} |
| */ |
| function () { return this._checked; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var 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", { |
| /** The value of this radio button. */ |
| 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, "labelPosition", { |
| /** Whether the label should appear after or before the radio button. Defaults to 'after' */ |
| 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", { |
| /** Whether the radio button is 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) { |
| /** @type {?} */ |
| var newDisabledState = coercion.coerceBooleanProperty(value); |
| if (this._disabled !== newDisabledState) { |
| this._disabled = newDisabledState; |
| this._changeDetector.markForCheck(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatRadioButton.prototype, "required", { |
| /** Whether the radio button is 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, "color", { |
| /** Theme color of the radio button. */ |
| get: /** |
| * Theme color of the radio button. |
| * @return {?} |
| */ |
| function () { |
| return this._color || |
| (this.radioGroup && this.radioGroup.color) || |
| this._providerOverride && this._providerOverride.color || 'accent'; |
| }, |
| set: /** |
| * @param {?} newValue |
| * @return {?} |
| */ |
| function (newValue) { this._color = newValue; }, |
| 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, '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._elementRef, true) |
| .subscribe((/** |
| * @param {?} focusOrigin |
| * @return {?} |
| */ |
| function (focusOrigin) { |
| if (!focusOrigin && _this.radioGroup) { |
| _this.radioGroup._touch(); |
| } |
| })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatRadioButton.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| this._removeUniqueSelectionListener(); |
| }; |
| /** Dispatch change event with current value. */ |
| /** |
| * Dispatch change event with current value. |
| * @private |
| * @return {?} |
| */ |
| MatRadioButton.prototype._emitChangeEvent = /** |
| * Dispatch change event with current value. |
| * @private |
| * @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(); |
| /** @type {?} */ |
| var groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value; |
| this.checked = true; |
| this._emitChangeEvent(); |
| if (this.radioGroup) { |
| this.radioGroup._controlValueAccessorChangeFn(this.value); |
| if (groupValueChanged) { |
| this.radioGroup._emitChangeEvent(); |
| } |
| } |
| }; |
| 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]=\"20\" [matRippleAnimation]=\"{enterDuration: 150}\"><div class=\"mat-ripple-element mat-radio-persistent-ripple\"></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><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;-webkit-tap-highlight-color:transparent;outline:0}.mat-radio-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;vertical-align:middle;width:100%}.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-animation-noopable .mat-radio-outer-circle{transition:none}.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-animation-noopable .mat-radio-inner-circle{transition:none}.mat-radio-checked .mat-radio-inner-circle{transform:scale(.5)}@media (-ms-high-contrast:active){.mat-radio-checked .mat-radio-inner-circle{border:solid 10px}}.mat-radio-label-content{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;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-button .mat-radio-ripple{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}.mat-radio-button .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple){opacity:.16}.mat-radio-persistent-ripple{width:100%;height:100%;transform:none}.mat-radio-container:hover .mat-radio-persistent-ripple{opacity:.04}.mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused .mat-radio-persistent-ripple{opacity:.12}.mat-radio-disabled .mat-radio-container:hover .mat-radio-persistent-ripple,.mat-radio-persistent-ripple{opacity:0}@media (hover:none){.mat-radio-container:hover .mat-radio-persistent-ripple{display:none}}.mat-radio-input{bottom:0;left:50%}@media (-ms-high-contrast:active){.mat-radio-disabled{opacity:.5}}"], |
| inputs: ['disableRipple', 'tabIndex'], |
| encapsulation: core.ViewEncapsulation.None, |
| exportAs: 'matRadioButton', |
| host: { |
| 'class': 'mat-radio-button', |
| '[class.mat-radio-checked]': 'checked', |
| '[class.mat-radio-disabled]': 'disabled', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| '[class.mat-primary]': 'color === "primary"', |
| '[class.mat-accent]': 'color === "accent"', |
| '[class.mat-warn]': 'color === "warn"', |
| // Needs to be -1 so the `focus` event still fires. |
| '[attr.tabindex]': '-1', |
| '[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 }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_RADIO_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| 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 }], |
| labelPosition: [{ type: core.Input }], |
| disabled: [{ type: core.Input }], |
| required: [{ type: core.Input }], |
| color: [{ type: core.Input }], |
| change: [{ type: core.Output }], |
| _inputElement: [{ type: core.ViewChild, args: ['input', { static: false },] }] |
| }; |
| return MatRadioButton; |
| }(_MatRadioButtonMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatRadioModule = /** @class */ (function () { |
| function MatRadioModule() { |
| } |
| MatRadioModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [common.CommonModule, MatRippleModule, MatCommonModule], |
| exports: [MatRadioGroup, MatRadioButton, MatCommonModule], |
| declarations: [MatRadioGroup, MatRadioButton], |
| },] }, |
| ]; |
| return MatRadioModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by the Material drawers. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matDrawerAnimations = { |
| /** |
| * Animation that slides a drawer in and out. |
| */ |
| transformDrawer: animations$1.trigger('transform', [ |
| // We remove the `transform` here completely, rather than setting it to zero, because: |
| // 1. Having a transform can cause elements with ripples or an animated |
| // transform to shift around in Chrome with an RTL layout (see #10023). |
| // 2. 3d transforms causes text to appear blurry on IE and Edge. |
| animations$1.state('open, open-instant', animations$1.style({ |
| 'transform': 'none', |
| 'visibility': 'visible', |
| })), |
| animations$1.state('void', animations$1.style({ |
| // Avoids the shadow showing up when closed in SSR. |
| 'box-shadow': 'none', |
| 'visibility': 'hidden', |
| })), |
| animations$1.transition('void => open-instant', animations$1.animate('0ms')), |
| animations$1.transition('void <=> open, open-instant => void', animations$1.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')) |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Throws an exception when two MatDrawer are matching the same position. |
| * \@docs-private |
| * @param {?} position |
| * @return {?} |
| */ |
| function throwMatDuplicatedDrawerError(position) { |
| throw Error("A drawer was already declared for 'position=\"" + position + "\"'"); |
| } |
| /** |
| * Configures whether drawers should use auto sizing by default. |
| * @type {?} |
| */ |
| var MAT_DRAWER_DEFAULT_AUTOSIZE = new core.InjectionToken('MAT_DRAWER_DEFAULT_AUTOSIZE', { |
| providedIn: 'root', |
| factory: MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY, |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY() { |
| return false; |
| } |
| var MatDrawerContent = /** @class */ (function (_super) { |
| __extends(MatDrawerContent, _super); |
| function MatDrawerContent(_changeDetectorRef, _container, elementRef, scrollDispatcher, ngZone) { |
| var _this = _super.call(this, elementRef, scrollDispatcher, ngZone) || this; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._container = _container; |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatDrawerContent.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._container._contentMarginChanges.subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _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]': '_container._contentMargins.left', |
| '[style.margin-right.px]': '_container._contentMargins.right', |
| }, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatDrawerContent.ctorParameters = function () { return [ |
| { type: core.ChangeDetectorRef }, |
| { type: MatDrawerContainer, decorators: [{ type: core.Inject, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatDrawerContainer; })),] }] }, |
| { type: core.ElementRef }, |
| { type: scrolling.ScrollDispatcher }, |
| { type: core.NgZone } |
| ]; }; |
| return MatDrawerContent; |
| }(scrolling.CdkScrollable)); |
| /** |
| * This component corresponds to a drawer that can be opened on the drawer container. |
| */ |
| var MatDrawer = /** @class */ (function () { |
| function MatDrawer(_elementRef, _focusTrapFactory, _focusMonitor, _platform, _ngZone, _doc) { |
| var _this = this; |
| this._elementRef = _elementRef; |
| this._focusTrapFactory = _focusTrapFactory; |
| this._focusMonitor = _focusMonitor; |
| this._platform = _platform; |
| this._ngZone = _ngZone; |
| 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; |
| this._autoFocus = true; |
| /** |
| * Emits whenever the drawer has started animating. |
| */ |
| this._animationStarted = new rxjs.Subject(); |
| /** |
| * Emits whenever the drawer is done animating. |
| */ |
| this._animationEnd = new rxjs.Subject(); |
| /** |
| * Current state of the sidenav animation. |
| */ |
| // @HostBinding is used in the class as it is expected to be extended. Since @Component decorator |
| // metadata is not inherited by child classes, instead the host binding data is defined in a way |
| // that can be inherited. |
| // tslint:disable:no-host-decorator-in-concrete |
| 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 */ true); |
| /** |
| * Emits when the component is destroyed. |
| */ |
| this._destroyed = new rxjs.Subject(); |
| /** |
| * Event emitted when the drawer's position changes. |
| */ |
| // tslint:disable-next-line:no-output-on-prefix |
| this.onPositionChanged = 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 rxjs.Subject(); |
| this._opened = false; |
| this.openedChange.subscribe((/** |
| * @param {?} opened |
| * @return {?} |
| */ |
| function (opened) { |
| if (opened) { |
| if (_this._doc) { |
| _this._elementFocusedBeforeDrawerWasOpened = (/** @type {?} */ (_this._doc.activeElement)); |
| } |
| if (_this._isFocusTrapEnabled && _this._focusTrap) { |
| _this._trapFocus(); |
| } |
| } |
| else { |
| _this._restoreFocus(); |
| } |
| })); |
| /** |
| * Listen to `keydown` events outside the zone so that change detection is not run every |
| * time a key is pressed. Instead we re-enter the zone only if the `ESC` key is pressed |
| * and we don't have close disabled. |
| */ |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| ((/** @type {?} */ (rxjs.fromEvent(_this._elementRef.nativeElement, 'keydown')))).pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| return event.keyCode === keycodes.ESCAPE && !_this.disableClose && !keycodes.hasModifierKey(event); |
| })), operators.takeUntil(_this._destroyed)).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return _this._ngZone.run((/** |
| * @return {?} |
| */ |
| function () { |
| _this.close(); |
| event.stopPropagation(); |
| event.preventDefault(); |
| })); })); |
| })); |
| // We need a Subject with distinctUntilChanged, because the `done` event |
| // fires twice on some browsers. See https://github.com/angular/angular/issues/24084 |
| this._animationEnd.pipe(operators.distinctUntilChanged((/** |
| * @param {?} x |
| * @param {?} y |
| * @return {?} |
| */ |
| function (x, y) { |
| return x.fromState === y.fromState && x.toState === y.toState; |
| }))).subscribe((/** |
| * @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, "position", { |
| /** The side that the drawer is attached to. */ |
| 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.onPositionChanged.emit(); |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDrawer.prototype, "mode", { |
| /** Mode of the drawer; one of 'over', 'push' or 'side'. */ |
| 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", { |
| /** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */ |
| 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, "autoFocus", { |
| /** Whether the drawer should focus the first focusable element automatically when opened. */ |
| get: /** |
| * Whether the drawer should focus the first focusable element automatically when opened. |
| * @return {?} |
| */ |
| function () { return this._autoFocus; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this._autoFocus = coercion.coerceBooleanProperty(value); }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDrawer.prototype, "_openedStream", { |
| /** Event emitted when the drawer has been opened. */ |
| get: /** |
| * Event emitted when the drawer has been opened. |
| * @return {?} |
| */ |
| function () { |
| return this.openedChange.pipe(operators.filter((/** |
| * @param {?} o |
| * @return {?} |
| */ |
| function (o) { return o; })), operators.map((/** |
| * @return {?} |
| */ |
| function () { }))); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDrawer.prototype, "openedStart", { |
| /** Event emitted when the drawer has started opening. */ |
| get: /** |
| * Event emitted when the drawer has started opening. |
| * @return {?} |
| */ |
| function () { |
| return this._animationStarted.pipe(operators.filter((/** |
| * @param {?} e |
| * @return {?} |
| */ |
| function (e) { return e.fromState !== e.toState && e.toState.indexOf('open') === 0; })), operators.map((/** |
| * @return {?} |
| */ |
| function () { }))); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDrawer.prototype, "_closedStream", { |
| /** Event emitted when the drawer has been closed. */ |
| get: /** |
| * Event emitted when the drawer has been closed. |
| * @return {?} |
| */ |
| function () { |
| return this.openedChange.pipe(operators.filter((/** |
| * @param {?} o |
| * @return {?} |
| */ |
| function (o) { return !o; })), operators.map((/** |
| * @return {?} |
| */ |
| function () { }))); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDrawer.prototype, "closedStart", { |
| /** Event emitted when the drawer has started closing. */ |
| get: /** |
| * Event emitted when the drawer has started closing. |
| * @return {?} |
| */ |
| function () { |
| return this._animationStarted.pipe(operators.filter((/** |
| * @param {?} e |
| * @return {?} |
| */ |
| function (e) { return e.fromState !== e.toState && e.toState === 'void'; })), operators.map((/** |
| * @return {?} |
| */ |
| 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. */ |
| /** |
| * Traps focus inside the drawer. |
| * @private |
| * @return {?} |
| */ |
| MatDrawer.prototype._trapFocus = /** |
| * Traps focus inside the drawer. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (!this.autoFocus) { |
| return; |
| } |
| this._focusTrap.focusInitialElementWhenReady().then((/** |
| * @param {?} hasMovedFocus |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * If focus is currently inside the drawer, restores it to where it was before the drawer |
| * opened. |
| * @private |
| * @return {?} |
| */ |
| MatDrawer.prototype._restoreFocus = /** |
| * If focus is currently inside the drawer, restores it to where it was before the drawer |
| * opened. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!this.autoFocus) { |
| return; |
| } |
| /** @type {?} */ |
| var 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(); |
| } |
| this._animationStarted.complete(); |
| this._animationEnd.complete(); |
| this._modeChanged.complete(); |
| this._destroyed.next(); |
| this._destroyed.complete(); |
| }; |
| Object.defineProperty(MatDrawer.prototype, "opened", { |
| /** |
| * Whether the drawer is opened. We overload this because we trigger an event when it |
| * starts or end. |
| */ |
| 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; |
| } |
| return new Promise((/** |
| * @param {?} resolve |
| * @return {?} |
| */ |
| function (resolve) { |
| _this.openedChange.pipe(operators.take(1)).subscribe((/** |
| * @param {?} open |
| * @return {?} |
| */ |
| function (open) { return resolve(open ? 'open' : 'close'); })); |
| })); |
| }; |
| Object.defineProperty(MatDrawer.prototype, "_width", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| return this._elementRef.nativeElement ? (this._elementRef.nativeElement.offsetWidth || 0) : 0; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatDrawer.prototype._animationStartListener = |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| this._animationStarted.next(event); |
| }; |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatDrawer.prototype._animationDoneListener = |
| // We have to use a `HostListener` here in order to support both Ivy and ViewEngine. |
| // In Ivy the `host` bindings will be merged when this class is extended, whereas in |
| // ViewEngine they're overwritte. |
| // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default. |
| // tslint:disable-next-line:no-host-decorator-in-concrete |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| this._animationEnd.next(event); |
| }; |
| MatDrawer.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-drawer', |
| exportAs: 'matDrawer', |
| template: "<div class=\"mat-drawer-inner-container\"><ng-content></ng-content></div>", |
| animations: [matDrawerAnimations.transformDrawer], |
| host: { |
| 'class': 'mat-drawer', |
| // 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, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatDrawer.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: a11y.FocusTrapFactory }, |
| { type: a11y.FocusMonitor }, |
| { type: platform.Platform }, |
| { type: core.NgZone }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] } |
| ]; }; |
| MatDrawer.propDecorators = { |
| position: [{ type: core.Input }], |
| mode: [{ type: core.Input }], |
| disableClose: [{ type: core.Input }], |
| autoFocus: [{ type: core.Input }], |
| _animationState: [{ type: core.HostBinding, args: ['@transform',] }], |
| openedChange: [{ type: core.Output }], |
| _openedStream: [{ type: core.Output, args: ['opened',] }], |
| openedStart: [{ type: core.Output }], |
| _closedStream: [{ type: core.Output, args: ['closed',] }], |
| closedStart: [{ type: core.Output }], |
| onPositionChanged: [{ type: core.Output, args: ['positionChanged',] }], |
| opened: [{ type: core.Input }], |
| _animationStartListener: [{ type: core.HostListener, args: ['@transform.start', ['$event'],] }], |
| _animationDoneListener: [{ type: core.HostListener, args: ['@transform.done', ['$event'],] }] |
| }; |
| 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 = /** @class */ (function () { |
| function MatDrawerContainer(_dir, _element, _ngZone, _changeDetectorRef, viewportRuler, defaultAutosize, _animationMode) { |
| var _this = this; |
| if (defaultAutosize === void 0) { defaultAutosize = false; } |
| this._dir = _dir; |
| this._element = _element; |
| this._ngZone = _ngZone; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._animationMode = _animationMode; |
| /** |
| * Event emitted when the drawer backdrop is clicked. |
| */ |
| this.backdropClick = new core.EventEmitter(); |
| /** |
| * Emits when the component is destroyed. |
| */ |
| this._destroyed = new rxjs.Subject(); |
| /** |
| * Emits on every ngDoCheck. Used for debouncing reflows. |
| */ |
| this._doCheckSubject = new rxjs.Subject(); |
| /** |
| * 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._contentMargins = { left: null, right: null }; |
| this._contentMarginChanges = new rxjs.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(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._validateDrawers(); |
| _this.updateContentMargins(); |
| })); |
| } |
| // Since the minimum width of the sidenav depends on the viewport width, |
| // we need to recompute the margins if the viewport changes. |
| viewportRuler.change() |
| .pipe(operators.takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { return _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", { |
| /** |
| * 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. |
| */ |
| 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 |
| }); |
| Object.defineProperty(MatDrawerContainer.prototype, "hasBackdrop", { |
| /** |
| * Whether the drawer container should have a backdrop while one of the sidenavs is open. |
| * If explicitly set to `true`, the backdrop will be enabled for drawers in the `side` |
| * mode as well. |
| */ |
| get: /** |
| * Whether the drawer container should have a backdrop while one of the sidenavs is open. |
| * If explicitly set to `true`, the backdrop will be enabled for drawers in the `side` |
| * mode as well. |
| * @return {?} |
| */ |
| function () { |
| if (this._backdropOverride == null) { |
| return !this._start || this._start.mode !== 'side' || !this._end || this._end.mode !== 'side'; |
| } |
| return this._backdropOverride; |
| }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._backdropOverride = value == null ? null : coercion.coerceBooleanProperty(value); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatDrawerContainer.prototype, "scrollable", { |
| /** Reference to the CdkScrollable instance that wraps the scrollable content. */ |
| get: /** |
| * Reference to the CdkScrollable instance that wraps the scrollable content. |
| * @return {?} |
| */ |
| function () { |
| return this._userContent || this._content; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._drawers.changes.pipe(operators.startWith(null)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._validateDrawers(); |
| _this._drawers.forEach((/** |
| * @param {?} drawer |
| * @return {?} |
| */ |
| 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(operators.debounceTime(10), // Arbitrary debounce time, less than a frame at 60fps |
| operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this.updateContentMargins(); })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._contentMarginChanges.complete(); |
| 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((/** |
| * @param {?} drawer |
| * @return {?} |
| */ |
| 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((/** |
| * @param {?} drawer |
| * @return {?} |
| */ |
| function (drawer) { return drawer.close(); })); |
| }; |
| /** |
| * Recalculates and updates the inline styles for the content. Note that this should be used |
| * sparingly, because it causes a reflow. |
| */ |
| /** |
| * 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. |
| /** @type {?} */ |
| var left = 0; |
| /** @type {?} */ |
| var right = 0; |
| if (this._left && this._left.opened) { |
| if (this._left.mode == 'side') { |
| left += this._left._width; |
| } |
| else if (this._left.mode == 'push') { |
| /** @type {?} */ |
| var 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') { |
| /** @type {?} */ |
| var width = this._right._width; |
| right += width; |
| left -= width; |
| } |
| } |
| // If either `right` or `left` is zero, don't set a style to the element. This |
| // allows users to specify a custom size via CSS class in SSR scenarios where the |
| // measured widths will always be zero. Note that we reset to `null` here, rather |
| // than below, in order to ensure that the types in the `if` below are consistent. |
| left = left || (/** @type {?} */ (null)); |
| right = right || (/** @type {?} */ (null)); |
| if (left !== this._contentMargins.left || right !== this._contentMargins.right) { |
| this._contentMargins = { left: left, right: right }; |
| // Pull back into the NgZone since in some cases we could be outside. We need to be careful |
| // to do it only when something changed, otherwise we can end up hitting the zone too often. |
| this._ngZone.run((/** |
| * @return {?} |
| */ |
| function () { return _this._contentMarginChanges.next(_this._contentMargins); })); |
| } |
| }; |
| /** |
| * @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((/** |
| * @return {?} |
| */ |
| 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| function (drawer) { |
| var _this = this; |
| drawer._animationStarted.pipe(operators.filter((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { return event.fromState !== event.toState; })), operators.takeUntil(this._drawers.changes)) |
| .subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| 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._animationMode !== 'NoopAnimations') { |
| _this._element.nativeElement.classList.add('mat-drawer-transition'); |
| } |
| _this.updateContentMargins(); |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| if (drawer.mode !== 'side') { |
| drawer.openedChange.pipe(operators.takeUntil(this._drawers.changes)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| return _this._setContainerClass(drawer.opened); |
| })); |
| } |
| }; |
| /** |
| * Subscribes to drawer onPositionChanged event in order to |
| * re-validate drawers when the position changes. |
| */ |
| /** |
| * Subscribes to drawer onPositionChanged event in order to |
| * re-validate drawers when the position changes. |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._watchDrawerPosition = /** |
| * Subscribes to drawer onPositionChanged event in order to |
| * re-validate drawers when the position changes. |
| * @private |
| * @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(operators.takeUntil(this._drawers.changes)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._ngZone.onMicrotaskEmpty.asObservable().pipe(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._validateDrawers(); |
| })); |
| })); |
| }; |
| /** Subscribes to changes in drawer mode so we can run change detection. */ |
| /** |
| * Subscribes to changes in drawer mode so we can run change detection. |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._watchDrawerMode = /** |
| * Subscribes to changes in drawer mode so we can run change detection. |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| function (drawer) { |
| var _this = this; |
| if (drawer) { |
| drawer._modeChanged.pipe(operators.takeUntil(rxjs.merge(this._drawers.changes, this._destroyed))) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this.updateContentMargins(); |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| } |
| }; |
| /** Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. */ |
| /** |
| * Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. |
| * @private |
| * @param {?} isAdd |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._setContainerClass = /** |
| * Toggles the 'mat-drawer-opened' class on the main 'mat-drawer-container' element. |
| * @private |
| * @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. */ |
| /** |
| * Validate the state of the drawer children components. |
| * @private |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._validateDrawers = /** |
| * Validate the state of the drawer children components. |
| * @private |
| * @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((/** |
| * @param {?} drawer |
| * @return {?} |
| */ |
| 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 === 'rtl') { |
| this._left = this._end; |
| this._right = this._start; |
| } |
| else { |
| this._left = this._start; |
| this._right = this._end; |
| } |
| }; |
| /** Whether the container is being pushed to the side by one of the drawers. */ |
| /** |
| * Whether the container is being pushed to the side by one of the drawers. |
| * @private |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._isPushed = /** |
| * Whether the container is being pushed to the side by one of the drawers. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return (this._isDrawerOpen(this._start) && this._start.mode != 'over') || |
| (this._isDrawerOpen(this._end) && this._end.mode != 'over'); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._onBackdropClicked = /** |
| * @return {?} |
| */ |
| function () { |
| this.backdropClick.emit(); |
| this._closeModalDrawer(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._closeModalDrawer = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| // Close all open drawers where closing is not disabled and the mode is not `side`. |
| [this._start, this._end] |
| .filter((/** |
| * @param {?} drawer |
| * @return {?} |
| */ |
| function (drawer) { return drawer && !drawer.disableClose && _this._canHaveBackdrop(drawer); })) |
| .forEach((/** |
| * @param {?} drawer |
| * @return {?} |
| */ |
| function (drawer) { return (/** @type {?} */ (drawer)).close(); })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._isShowingBackdrop = /** |
| * @return {?} |
| */ |
| function () { |
| return (this._isDrawerOpen(this._start) && this._canHaveBackdrop(this._start)) || |
| (this._isDrawerOpen(this._end) && this._canHaveBackdrop(this._end)); |
| }; |
| /** |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._canHaveBackdrop = /** |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| function (drawer) { |
| return drawer.mode !== 'side' || !!this._backdropOverride; |
| }; |
| /** |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| MatDrawerContainer.prototype._isDrawerOpen = /** |
| * @private |
| * @param {?} drawer |
| * @return {?} |
| */ |
| function (drawer) { |
| return drawer != null && drawer.opened; |
| }; |
| MatDrawerContainer.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-drawer-container', |
| exportAs: 'matDrawerContainer', |
| template: "<div class=\"mat-drawer-backdrop\" (click)=\"_onBackdropClicked()\" *ngIf=\"hasBackdrop\" [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\"><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-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.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 (-ms-high-contrast:active){.mat-drawer-backdrop{opacity:.5}}.mat-drawer-content{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)}@media (-ms-high-contrast:active){.mat-drawer,[dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}}@media (-ms-high-contrast:active){.mat-drawer.mat-drawer-end,[dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}}.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-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}"], |
| host: { |
| 'class': 'mat-drawer-container', |
| '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride', |
| }, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatDrawerContainer.ctorParameters = function () { return [ |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] }, |
| { type: core.ElementRef }, |
| { type: core.NgZone }, |
| { type: core.ChangeDetectorRef }, |
| { type: scrolling.ViewportRuler }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_DRAWER_DEFAULT_AUTOSIZE,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatDrawerContainer.propDecorators = { |
| _drawers: [{ type: core.ContentChildren, args: [MatDrawer,] }], |
| _content: [{ type: core.ContentChild, args: [MatDrawerContent, { static: false },] }], |
| _userContent: [{ type: core.ViewChild, args: [MatDrawerContent, { static: false },] }], |
| autosize: [{ type: core.Input }], |
| hasBackdrop: [{ type: core.Input }], |
| backdropClick: [{ type: core.Output }] |
| }; |
| return MatDrawerContainer; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatSidenavContent = /** @class */ (function (_super) { |
| __extends(MatSidenavContent, _super); |
| function MatSidenavContent(changeDetectorRef, container, elementRef, scrollDispatcher, ngZone) { |
| return _super.call(this, changeDetectorRef, container, elementRef, scrollDispatcher, ngZone) || 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]': '_container._contentMargins.left', |
| '[style.margin-right.px]': '_container._contentMargins.right', |
| }, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatSidenavContent.ctorParameters = function () { return [ |
| { type: core.ChangeDetectorRef }, |
| { type: MatSidenavContainer, decorators: [{ type: core.Inject, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatSidenavContainer; })),] }] }, |
| { type: core.ElementRef }, |
| { type: scrolling.ScrollDispatcher }, |
| { type: core.NgZone } |
| ]; }; |
| return MatSidenavContent; |
| }(MatDrawerContent)); |
| var MatSidenav = /** @class */ (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", { |
| /** Whether the sidenav is fixed in the viewport. */ |
| 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", { |
| /** |
| * The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed |
| * mode. |
| */ |
| 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", { |
| /** |
| * The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in |
| * fixed mode. |
| */ |
| 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: "<div class=\"mat-drawer-inner-container\"><ng-content></ng-content></div>", |
| animations: [matDrawerAnimations.transformDrawer], |
| host: { |
| 'class': 'mat-drawer mat-sidenav', |
| 'tabIndex': '-1', |
| // 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, |
| },] }, |
| ]; |
| MatSidenav.propDecorators = { |
| fixedInViewport: [{ type: core.Input }], |
| fixedTopGap: [{ type: core.Input }], |
| fixedBottomGap: [{ type: core.Input }] |
| }; |
| return MatSidenav; |
| }(MatDrawer)); |
| var MatSidenavContainer = /** @class */ (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()\" *ngIf=\"hasBackdrop\" [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-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.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 (-ms-high-contrast:active){.mat-drawer-backdrop{opacity:.5}}.mat-drawer-content{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)}@media (-ms-high-contrast:active){.mat-drawer,[dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}}@media (-ms-high-contrast:active){.mat-drawer.mat-drawer-end,[dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}}.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-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}"], |
| host: { |
| 'class': 'mat-drawer-container mat-sidenav-container', |
| '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride', |
| }, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| MatSidenavContainer.propDecorators = { |
| _drawers: [{ type: core.ContentChildren, args: [MatSidenav,] }], |
| _content: [{ type: core.ContentChild, args: [MatSidenavContent, { static: false },] }] |
| }; |
| return MatSidenavContainer; |
| }(MatDrawerContainer)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatSidenavModule = /** @class */ (function () { |
| function MatSidenavModule() { |
| } |
| MatSidenavModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| MatCommonModule, |
| scrolling.ScrollingModule, |
| platform.PlatformModule, |
| ], |
| exports: [ |
| MatCommonModule, |
| MatDrawer, |
| MatDrawerContainer, |
| MatDrawerContent, |
| MatSidenav, |
| MatSidenavContainer, |
| MatSidenavContent, |
| ], |
| declarations: [ |
| MatDrawer, |
| MatDrawerContainer, |
| MatDrawerContent, |
| MatSidenav, |
| MatSidenavContainer, |
| MatSidenavContent, |
| ], |
| },] }, |
| ]; |
| return MatSidenavModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token to be used to override the default options for `mat-slide-toggle`. |
| * @type {?} |
| */ |
| var MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = new core.InjectionToken('mat-slide-toggle-default-options', { |
| providedIn: 'root', |
| factory: (/** |
| * @return {?} |
| */ |
| function () { return ({ disableToggleValue: false, disableDragValue: false }); }) |
| }); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Increasing integer for generating unique ids for slide-toggle components. |
| /** @type {?} */ |
| var nextUniqueId$8 = 0; |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_SLIDE_TOGGLE_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatSlideToggle; })), |
| multi: true |
| }; |
| /** |
| * Change event object emitted by a MatSlideToggle. |
| */ |
| var /** |
| * Change event object emitted by a MatSlideToggle. |
| */ |
| MatSlideToggleChange = /** @class */ (function () { |
| function MatSlideToggleChange(source, checked) { |
| this.source = source; |
| this.checked = checked; |
| } |
| return MatSlideToggleChange; |
| }()); |
| // Boilerplate for applying mixins to MatSlideToggle. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatSlideToggle. |
| /** |
| * \@docs-private |
| */ |
| MatSlideToggleBase = /** @class */ (function () { |
| function MatSlideToggleBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatSlideToggleBase; |
| }()); |
| /** @type {?} */ |
| var _MatSlideToggleMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent')); |
| /** |
| * Represents a slidable "switch" toggle that can be moved between on and off. |
| */ |
| var MatSlideToggle = /** @class */ (function (_super) { |
| __extends(MatSlideToggle, _super); |
| function MatSlideToggle(elementRef, _focusMonitor, _changeDetectorRef, tabIndex, _ngZone, defaults, _animationMode, _dir) { |
| var _this = _super.call(this, elementRef) || this; |
| _this._focusMonitor = _focusMonitor; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._ngZone = _ngZone; |
| _this.defaults = defaults; |
| _this._animationMode = _animationMode; |
| _this._dir = _dir; |
| _this._onChange = (/** |
| * @param {?} _ |
| * @return {?} |
| */ |
| function (_) { }); |
| _this._onTouched = (/** |
| * @return {?} |
| */ |
| function () { }); |
| _this._uniqueId = "mat-slide-toggle-" + ++nextUniqueId$8; |
| _this._required = false; |
| _this._checked = false; |
| /** |
| * Whether the thumb is currently being dragged. |
| */ |
| _this._dragging = 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(); |
| /** |
| * An event will be dispatched each time the slide-toggle input is toggled. |
| * This event is always emitted when the user toggles the slide toggle, but this does not mean |
| * the slide toggle's value has changed. The event does not fire when the user drags to change |
| * the slide toggle value. |
| */ |
| _this.toggleChange = new core.EventEmitter(); |
| /** |
| * An event will be dispatched each time the slide-toggle is dragged. |
| * This event is always emitted when the user drags the slide toggle to make a change greater |
| * than 50%. It does not mean the slide toggle's value is changed. The event is not emitted when |
| * the user toggles the slide toggle to change its value. |
| */ |
| _this.dragChange = new core.EventEmitter(); |
| _this.tabIndex = parseInt(tabIndex) || 0; |
| return _this; |
| } |
| Object.defineProperty(MatSlideToggle.prototype, "required", { |
| /** Whether the slide-toggle is 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", { |
| /** Whether the slide-toggle element is checked or not. */ |
| 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._focusMonitor |
| .monitor(this._elementRef, true) |
| .subscribe((/** |
| * @param {?} focusOrigin |
| * @return {?} |
| */ |
| function (focusOrigin) { |
| if (!focusOrigin) { |
| // When a focused element becomes disabled, the browser *immediately* fires a blur event. |
| // Angular does not expect events to be raised during change detection, so any state |
| // change (such as a form control's 'ng-touched') will cause a changed-after-checked |
| // error. See https://github.com/angular/angular/issues/17793. To work around this, |
| // we defer telling the form control it has been touched until the next tick. |
| Promise.resolve().then((/** |
| * @return {?} |
| */ |
| function () { return _this._onTouched(); })); |
| } |
| })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSlideToggle.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| }; |
| /** 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(); |
| if (!this._dragging) { |
| this.toggleChange.emit(); |
| } |
| // 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. Or when the slide toggle's config |
| // disabled toggle change event by setting `disableToggleValue: true`, the slide toggle's value |
| // does not change, and the checked state of the underlying input needs to be changed back. |
| if (this._dragging || this.defaults.disableToggleValue) { |
| 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, '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; |
| this._onChange(this.checked); |
| }; |
| /** |
| * Emits a change event on the `change` output. Also notifies the FormControl about the change. |
| */ |
| /** |
| * Emits a change event on the `change` output. Also notifies the FormControl about the change. |
| * @private |
| * @return {?} |
| */ |
| MatSlideToggle.prototype._emitChangeEvent = /** |
| * Emits a change event on the `change` output. Also notifies the FormControl about the change. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this._onChange(this.checked); |
| this.change.emit(new MatSlideToggleChange(this, this.checked)); |
| }; |
| /** Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100. */ |
| /** |
| * Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100. |
| * @private |
| * @param {?} distance |
| * @return {?} |
| */ |
| MatSlideToggle.prototype._getDragPercentage = /** |
| * Retrieves the percentage of thumb from the moved distance. Percentage as fraction of 100. |
| * @private |
| * @param {?} distance |
| * @return {?} |
| */ |
| function (distance) { |
| /** @type {?} */ |
| var 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 {?} |
| */ |
| MatSlideToggle.prototype._onDragStart = /** |
| * @return {?} |
| */ |
| function () { |
| if (!this.disabled && !this._dragging) { |
| /** @type {?} */ |
| var thumbEl = this._thumbEl.nativeElement; |
| this._thumbBarWidth = this._thumbBarEl.nativeElement.clientWidth - thumbEl.clientWidth; |
| thumbEl.classList.add('mat-dragging'); |
| this._previousChecked = this.checked; |
| this._dragging = true; |
| } |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatSlideToggle.prototype._onDrag = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (this._dragging) { |
| /** @type {?} */ |
| var direction = this._dir && this._dir.value === 'rtl' ? -1 : 1; |
| this._dragPercentage = this._getDragPercentage(event.deltaX * direction); |
| // Calculate the moved distance based on the thumb bar width. |
| /** @type {?} */ |
| var dragX = (this._dragPercentage / 100) * this._thumbBarWidth * direction; |
| this._thumbEl.nativeElement.style.transform = "translate3d(" + dragX + "px, 0, 0)"; |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSlideToggle.prototype._onDragEnd = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._dragging) { |
| /** @type {?} */ |
| var newCheckedValue = this._dragPercentage > 50; |
| if (newCheckedValue !== this.checked) { |
| this.dragChange.emit(); |
| if (!this.defaults.disableDragValue) { |
| this.checked = newCheckedValue; |
| this._emitChangeEvent(); |
| } |
| } |
| // The drag should be stopped outside of the current event handler, otherwise the |
| // click event will be fired before it and will revert the drag change. |
| this._ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { return setTimeout((/** |
| * @return {?} |
| */ |
| function () { |
| if (_this._dragging) { |
| _this._dragging = false; |
| _this._thumbEl.nativeElement.classList.remove('mat-dragging'); |
| // Reset the transform because the component will take care |
| // of the thumb position after drag. |
| _this._thumbEl.nativeElement.style.transform = ''; |
| } |
| })); })); |
| } |
| }; |
| /** 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 () { |
| // Since the event of the `cdkObserveContent` directive runs outside of the zone, the |
| // slide-toggle component will be only marked for check, but no actual change detection runs |
| // automatically. Instead of going back into the zone in order to trigger a change detection |
| // which causes *all* components to be checked (if explicitly marked or not using OnPush), |
| // we only trigger an explicit change detection for the slide-toggle view and it's children. |
| this._changeDetectorRef.detectChanges(); |
| }; |
| MatSlideToggle.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-slide-toggle', |
| exportAs: 'matSlideToggle', |
| host: { |
| 'class': 'mat-slide-toggle', |
| '[id]': 'id', |
| // Needs to be `-1` so it can still receive programmatic focus. |
| '[attr.tabindex]': 'disabled ? null : -1', |
| '[class.mat-checked]': 'checked', |
| '[class.mat-disabled]': 'disabled', |
| '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| '(focus)': '_inputElement.nativeElement.focus()', |
| }, |
| template: "<label [attr.for]=\"inputId\" class=\"mat-slide-toggle-label\" #label><div #toggleBar 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\" role=\"switch\" [id]=\"inputId\" [required]=\"required\" [tabIndex]=\"tabIndex\" [checked]=\"checked\" [disabled]=\"disabled\" [attr.name]=\"name\" [attr.aria-checked]=\"checked.toString()\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (change)=\"_onChangeEvent($event)\" (click)=\"_onInputClick($event)\"><div class=\"mat-slide-toggle-thumb-container\" #thumbContainer (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]=\"20\" [matRippleAnimation]=\"{enterDuration: 150}\"><div class=\"mat-ripple-element mat-slide-toggle-persistent-ripple\"></div></div></div></div><span class=\"mat-slide-toggle-content\" #labelContent (cdkObserveContent)=\"_onLabelTextChange()\"><span style=\"display:none\"> </span><ng-content></ng-content></span></label>", |
| styles: [".mat-slide-toggle{display:inline-block;height:24px;max-width:100%;line-height:24px;white-space:nowrap;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(16px,0,0)}[dir=rtl] .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(-16px,0,0)}.mat-slide-toggle.mat-disabled{opacity:.38}.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{transition-duration:0s}.mat-slide-toggle-thumb-container:active{cursor:-webkit-grabbing;cursor:grabbing}._mat-animation-noopable .mat-slide-toggle-thumb-container{transition:none}[dir=rtl] .mat-slide-toggle-thumb-container{left:auto;right:0}.mat-slide-toggle-thumb{height:20px;width:20px;border-radius:50%}.mat-slide-toggle-bar{position:relative;width:36px;height:14px;flex-shrink:0;border-radius:8px}.mat-slide-toggle-input{bottom:0;left:10px}[dir=rtl] .mat-slide-toggle-input{left:auto;right:10px}.mat-slide-toggle-bar,.mat-slide-toggle-thumb{transition:all 80ms linear;transition-property:background-color;transition-delay:50ms}._mat-animation-noopable .mat-slide-toggle-bar,._mat-animation-noopable .mat-slide-toggle-thumb{transition:none}.mat-slide-toggle .mat-slide-toggle-ripple{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}.mat-slide-toggle .mat-slide-toggle-ripple .mat-ripple-element:not(.mat-slide-toggle-persistent-ripple){opacity:.12}.mat-slide-toggle-persistent-ripple{width:100%;height:100%;transform:none}.mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{opacity:.04}.mat-slide-toggle:not(.mat-disabled).cdk-keyboard-focused .mat-slide-toggle-persistent-ripple{opacity:.12}.mat-slide-toggle-persistent-ripple,.mat-slide-toggle.mat-disabled .mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{opacity:0}@media (hover:none){.mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{display:none}}@media (-ms-high-contrast:active){.mat-slide-toggle-thumb{background:#fff;border:1px solid #000}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background:#000;border:1px solid #fff}.mat-slide-toggle-bar{background:#fff}.mat-slide-toggle.cdk-keyboard-focused .mat-slide-toggle-bar{outline:1px dotted;outline-offset:5px}}@media (-ms-high-contrast:black-on-white){.mat-slide-toggle-bar{border:1px solid #000}}"], |
| providers: [MAT_SLIDE_TOGGLE_VALUE_ACCESSOR], |
| inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatSlideToggle.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: a11y.FocusMonitor }, |
| { type: core.ChangeDetectorRef }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }, |
| { type: core.NgZone }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }, |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] } |
| ]; }; |
| MatSlideToggle.propDecorators = { |
| _thumbEl: [{ type: core.ViewChild, args: ['thumbContainer', { static: false },] }], |
| _thumbBarEl: [{ type: core.ViewChild, args: ['toggleBar', { static: false },] }], |
| 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 }], |
| toggleChange: [{ type: core.Output }], |
| dragChange: [{ type: core.Output }], |
| _inputElement: [{ type: core.ViewChild, args: ['input', { static: false },] }] |
| }; |
| return MatSlideToggle; |
| }(_MatSlideToggleMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatSlideToggleModule = /** @class */ (function () { |
| function MatSlideToggleModule() { |
| } |
| MatSlideToggleModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatRippleModule, MatCommonModule, observers.ObserversModule], |
| exports: [MatSlideToggle, MatCommonModule], |
| declarations: [MatSlideToggle], |
| providers: [ |
| { provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: GestureConfig } |
| ], |
| },] }, |
| ]; |
| return MatSlideToggleModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Visually, a 30px separation between tick marks looks best. This is very subjective but it is |
| * the default separation we chose. |
| * @type {?} |
| */ |
| var MIN_AUTO_TICK_SEPARATION = 30; |
| /** |
| * The thumb gap size for a disabled slider. |
| * @type {?} |
| */ |
| var DISABLED_THUMB_GAP = 7; |
| /** |
| * The thumb gap size for a non-active slider at its minimum value. |
| * @type {?} |
| */ |
| var MIN_VALUE_NONACTIVE_THUMB_GAP = 7; |
| /** |
| * The thumb gap size for an active slider at its minimum value. |
| * @type {?} |
| */ |
| 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]. |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_SLIDER_VALUE_ACCESSOR = { |
| provide: forms.NG_VALUE_ACCESSOR, |
| useExisting: core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatSlider; })), |
| multi: true |
| }; |
| /** |
| * A simple change event emitted by the MatSlider component. |
| */ |
| var /** |
| * A simple change event emitted by the MatSlider component. |
| */ |
| MatSliderChange = /** @class */ (function () { |
| function MatSliderChange() { |
| } |
| return MatSliderChange; |
| }()); |
| // Boilerplate for applying mixins to MatSlider. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatSlider. |
| /** |
| * \@docs-private |
| */ |
| MatSliderBase = /** @class */ (function () { |
| function MatSliderBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatSliderBase; |
| }()); |
| /** @type {?} */ |
| 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 = /** @class */ (function (_super) { |
| __extends(MatSlider, _super); |
| function MatSlider(elementRef, _focusMonitor, _changeDetectorRef, _dir, tabIndex, _animationMode) { |
| var _this = _super.call(this, elementRef) || this; |
| _this._focusMonitor = _focusMonitor; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._dir = _dir; |
| _this._animationMode = _animationMode; |
| _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(); |
| /** |
| * Emits when the raw value of the slider changes. This is here primarily |
| * to facilitate the two-way binding for the `value` input. |
| * \@docs-private |
| */ |
| _this.valueChange = new core.EventEmitter(); |
| /** |
| * onTouch function registered via registerOnTouch (ControlValueAccessor). |
| */ |
| _this.onTouched = (/** |
| * @return {?} |
| */ |
| 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 = (/** |
| * @return {?} |
| */ |
| function () { }); |
| /** |
| * Subscription to the Directionality change EventEmitter. |
| */ |
| _this._dirChangeSubscription = rxjs.Subscription.EMPTY; |
| _this.tabIndex = parseInt(tabIndex) || 0; |
| return _this; |
| } |
| Object.defineProperty(MatSlider.prototype, "invert", { |
| /** Whether the slider is inverted. */ |
| 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", { |
| /** The maximum value that the slider can have. */ |
| 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", { |
| /** The minimum value that the slider can have. */ |
| 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", { |
| /** The values at which the thumb will snap. */ |
| 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._roundToDecimal = (/** @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", { |
| /** Whether or not to show the thumb label. */ |
| 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, "tickInterval", { |
| /** |
| * 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). |
| */ |
| 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, "value", { |
| /** Value of the slider. */ |
| 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) { |
| /** @type {?} */ |
| var value = coercion.coerceNumberProperty(v); |
| // While incrementing by a decimal we can end up with values like 33.300000000000004. |
| // Truncate it to ensure that it matches the label and to make it easier to work with. |
| if (this._roundToDecimal) { |
| value = parseFloat(value.toFixed(this._roundToDecimal)); |
| } |
| this._value = value; |
| 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", { |
| /** Whether the slider is 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 () { |
| if (this.displayWith) { |
| return this.displayWith(this.value); |
| } |
| // 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._roundToDecimal && this.value && this.value % 1 !== 0) { |
| return this.value.toFixed(this._roundToDecimal); |
| } |
| 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 () { |
| /** @type {?} */ |
| var axis = this.vertical ? 'Y' : 'X'; |
| /** @type {?} */ |
| var scale = this.vertical ? "1, " + (1 - this.percent) + ", 1" : 1 - this.percent + ", 1, 1"; |
| /** @type {?} */ |
| var sign = this._shouldInvertMouseCoords() ? '-' : ''; |
| return { |
| // scale3d avoids some rendering issues in Chrome. See #12071. |
| transform: "translate" + axis + "(" + sign + this._thumbGap + "px) scale3d(" + scale + ")" |
| }; |
| }, |
| 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 () { |
| /** @type {?} */ |
| var axis = this.vertical ? 'Y' : 'X'; |
| /** @type {?} */ |
| var scale = this.vertical ? "1, " + this.percent + ", 1" : this.percent + ", 1, 1"; |
| /** @type {?} */ |
| var sign = this._shouldInvertMouseCoords() ? '' : '-'; |
| return { |
| // scale3d avoids some rendering issues in Chrome. See #12071. |
| transform: "translate" + axis + "(" + sign + this._thumbGap + "px) scale3d(" + scale + ")" |
| }; |
| }, |
| 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 () { |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var sign = !this.vertical && this._getDirection() == 'rtl' ? '' : '-'; |
| /** @type {?} */ |
| var 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 () { |
| /** @type {?} */ |
| var tickSize = this._tickIntervalPercent * 100; |
| /** @type {?} */ |
| var backgroundSize = this.vertical ? "2px " + tickSize + "%" : tickSize + "% 2px"; |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var sign = !this.vertical && this._getDirection() == 'rtl' ? '-' : ''; |
| /** @type {?} */ |
| var rotate = !this.vertical && this._getDirection() == 'rtl' ? ' rotate(180deg)' : ''; |
| /** @type {?} */ |
| var 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) { |
| /** @type {?} */ |
| var 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 () { |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var invertOffset = (this._getDirection() == 'rtl' && !this.vertical) ? !this._invertAxis : this._invertAxis; |
| /** @type {?} */ |
| var offset = (invertOffset ? this.percent : 1 - this.percent) * 100; |
| return { |
| 'transform': "translate" + axis + "(-" + offset + "%)" |
| }; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @return {?} |
| */ |
| MatSlider.prototype._shouldInvertMouseCoords = /** |
| * 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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return (this._getDirection() == 'rtl' && !this.vertical) ? !this._invertAxis : this._invertAxis; |
| }; |
| /** The language direction for this slider element. */ |
| /** |
| * The language direction for this slider element. |
| * @private |
| * @return {?} |
| */ |
| MatSlider.prototype._getDirection = /** |
| * The language direction for this slider element. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr'; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSlider.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._focusMonitor |
| .monitor(this._elementRef, true) |
| .subscribe((/** |
| * @param {?} origin |
| * @return {?} |
| */ |
| function (origin) { |
| _this._isActive = !!origin && origin !== 'keyboard'; |
| _this._changeDetectorRef.detectChanges(); |
| })); |
| if (this._dir) { |
| this._dirChangeSubscription = this._dir.change.subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSlider.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| 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._onMousedown = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| // Don't do anything if the slider is disabled or the |
| // user is using anything other than the main mouse button. |
| if (this.disabled || event.button !== 0) { |
| return; |
| } |
| /** @type {?} */ |
| var 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(); |
| /** @type {?} */ |
| var 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 || keycodes.hasModifierKey(event)) { |
| return; |
| } |
| /** @type {?} */ |
| var 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._getDirection() == '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._getDirection() == '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). */ |
| /** |
| * Increments the slider by the given number of steps (negative number decrements). |
| * @private |
| * @param {?} numSteps |
| * @return {?} |
| */ |
| MatSlider.prototype._increment = /** |
| * Increments the slider by the given number of steps (negative number decrements). |
| * @private |
| * @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. */ |
| /** |
| * Calculate the new value from the new physical location. The value will always be snapped. |
| * @private |
| * @param {?} pos |
| * @return {?} |
| */ |
| MatSlider.prototype._updateValueFromPosition = /** |
| * Calculate the new value from the new physical location. The value will always be snapped. |
| * @private |
| * @param {?} pos |
| * @return {?} |
| */ |
| function (pos) { |
| if (!this._sliderDimensions) { |
| return; |
| } |
| /** @type {?} */ |
| var offset = this.vertical ? this._sliderDimensions.top : this._sliderDimensions.left; |
| /** @type {?} */ |
| var size = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width; |
| /** @type {?} */ |
| var posComponent = this.vertical ? pos.y : pos.x; |
| // The exact value is calculated from the event and used to find the closest snap value. |
| /** @type {?} */ |
| var percent = this._clamp((posComponent - offset) / size); |
| if (this._shouldInvertMouseCoords()) { |
| percent = 1 - percent; |
| } |
| // Since the steps may not divide cleanly into the max value, if the user |
| // slid to 0 or 100 percent, we jump to the min/max value. This approach |
| // is slightly more intuitive than using `Math.ceil` below, because it |
| // follows the user's pointer closer. |
| if (percent === 0) { |
| this.value = this.min; |
| } |
| else if (percent === 1) { |
| this.value = this.max; |
| } |
| else { |
| /** @type {?} */ |
| var exactValue = this._calculateValue(percent); |
| // This calculation finds the closest step by finding the closest |
| // whole number divisible by the step relative to the min. |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Emits a change event if the current value is different from the last emitted value. |
| * @private |
| * @return {?} |
| */ |
| MatSlider.prototype._emitChangeEvent = /** |
| * Emits a change event if the current value is different from the last emitted value. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this._controlValueAccessorChangeFn(this.value); |
| this.valueChange.emit(this.value); |
| this.change.emit(this._createChangeEvent()); |
| }; |
| /** Emits an input event when the current value is different from the last emitted value. */ |
| /** |
| * Emits an input event when the current value is different from the last emitted value. |
| * @private |
| * @return {?} |
| */ |
| MatSlider.prototype._emitInputEvent = /** |
| * Emits an input event when the current value is different from the last emitted value. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this.input.emit(this._createChangeEvent()); |
| }; |
| /** Updates the amount of space between ticks as a percentage of the width of the slider. */ |
| /** |
| * Updates the amount of space between ticks as a percentage of the width of the slider. |
| * @private |
| * @return {?} |
| */ |
| MatSlider.prototype._updateTickIntervalPercent = /** |
| * Updates the amount of space between ticks as a percentage of the width of the slider. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (!this.tickInterval || !this._sliderDimensions) { |
| return; |
| } |
| if (this.tickInterval == 'auto') { |
| /** @type {?} */ |
| var trackSize = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width; |
| /** @type {?} */ |
| var pixelsPerStep = trackSize * this.step / (this.max - this.min); |
| /** @type {?} */ |
| var stepsPerTick = Math.ceil(MIN_AUTO_TICK_SEPARATION / pixelsPerStep); |
| /** @type {?} */ |
| var 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. */ |
| /** |
| * Creates a slider change object from the specified value. |
| * @private |
| * @param {?=} value |
| * @return {?} |
| */ |
| MatSlider.prototype._createChangeEvent = /** |
| * Creates a slider change object from the specified value. |
| * @private |
| * @param {?=} value |
| * @return {?} |
| */ |
| function (value) { |
| if (value === void 0) { value = this.value; } |
| /** @type {?} */ |
| var event = new MatSliderChange(); |
| event.source = this; |
| event.value = value; |
| return event; |
| }; |
| /** Calculates the percentage of the slider that a value is. */ |
| /** |
| * Calculates the percentage of the slider that a value is. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| MatSlider.prototype._calculatePercentage = /** |
| * Calculates the percentage of the slider that a value is. |
| * @private |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| return ((value || 0) - this.min) / (this.max - this.min); |
| }; |
| /** Calculates the value a percentage of the slider corresponds to. */ |
| /** |
| * Calculates the value a percentage of the slider corresponds to. |
| * @private |
| * @param {?} percentage |
| * @return {?} |
| */ |
| MatSlider.prototype._calculateValue = /** |
| * Calculates the value a percentage of the slider corresponds to. |
| * @private |
| * @param {?} percentage |
| * @return {?} |
| */ |
| function (percentage) { |
| return this.min + percentage * (this.max - this.min); |
| }; |
| /** Return a number between two numbers. */ |
| /** |
| * Return a number between two numbers. |
| * @private |
| * @param {?} value |
| * @param {?=} min |
| * @param {?=} max |
| * @return {?} |
| */ |
| MatSlider.prototype._clamp = /** |
| * Return a number between two numbers. |
| * @private |
| * @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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @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. |
| */ |
| /** |
| * Focuses the native element. |
| * Currently only used to allow a blur event to fire but will be used with keyboard input later. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| this._elementRef.nativeElement.focus(); |
| }; |
| /** Blurs the native element. */ |
| /** |
| * Blurs the native element. |
| * @private |
| * @return {?} |
| */ |
| MatSlider.prototype._blurHostElement = /** |
| * Blurs the native element. |
| * @private |
| * @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 be triggered when the value has changed. |
| * Implemented as part of ControlValueAccessor. |
| * @param fn Callback to be registered. |
| */ |
| /** |
| * Registers a callback to be 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 be 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()', |
| '(mousedown)': '_onMousedown($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', |
| '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', |
| }, |
| 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)}.mat-slider.cdk-keyboard-focused .mat-slider-focus-ring,.mat-slider.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)}@media (-ms-high-contrast:active){.mat-slider-thumb-label{outline:solid 1px}}.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{display:none}.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 (-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)}@media (-ms-high-contrast:active){.mat-slider-horizontal.cdk-focused .mat-slider-thumb-label,.mat-slider-horizontal.cdk-focused .mat-slider-thumb-label-text{transform:none}}.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 (-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%}.mat-slider._mat-animation-noopable .mat-slider-focus-ring,.mat-slider._mat-animation-noopable .mat-slider-has-ticks .mat-slider-wrapper::after,.mat-slider._mat-animation-noopable .mat-slider-thumb,.mat-slider._mat-animation-noopable .mat-slider-thumb-container,.mat-slider._mat-animation-noopable .mat-slider-thumb-label,.mat-slider._mat-animation-noopable .mat-slider-thumb-label-text,.mat-slider._mat-animation-noopable .mat-slider-ticks,.mat-slider._mat-animation-noopable .mat-slider-track-background,.mat-slider._mat-animation-noopable .mat-slider-track-fill{transition:none}"], |
| inputs: ['disabled', 'color', 'tabIndex'], |
| encapsulation: core.ViewEncapsulation.None, |
| 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: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatSlider.propDecorators = { |
| invert: [{ type: core.Input }], |
| max: [{ type: core.Input }], |
| min: [{ type: core.Input }], |
| step: [{ type: core.Input }], |
| thumbLabel: [{ type: core.Input }], |
| tickInterval: [{ type: core.Input }], |
| value: [{ type: core.Input }], |
| displayWith: [{ type: core.Input }], |
| vertical: [{ type: core.Input }], |
| change: [{ type: core.Output }], |
| input: [{ type: core.Output }], |
| valueChange: [{ type: core.Output }], |
| _sliderWrapper: [{ type: core.ViewChild, args: ['sliderWrapper', { static: false },] }] |
| }; |
| return MatSlider; |
| }(_MatSliderMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatSliderModule = /** @class */ (function () { |
| function MatSliderModule() { |
| } |
| MatSliderModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [common.CommonModule, MatCommonModule], |
| exports: [MatSlider, MatCommonModule], |
| declarations: [MatSlider], |
| providers: [{ provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: GestureConfig }] |
| },] }, |
| ]; |
| return MatSliderModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Reference to a snack bar dispatched from the snack bar service. |
| * @template T |
| */ |
| var /** |
| * Reference to a snack bar dispatched from the snack bar service. |
| * @template T |
| */ |
| MatSnackBarRef = /** @class */ (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 rxjs.Subject(); |
| /** |
| * Subject for notifying the user that the snack bar has opened and appeared. |
| */ |
| this._afterOpened = new rxjs.Subject(); |
| /** |
| * Subject for notifying the user that the snack bar action was called. |
| */ |
| this._onAction = new rxjs.Subject(); |
| /** |
| * Whether the snack bar was dismissed using the action button. |
| */ |
| this._dismissedByAction = false; |
| this.containerInstance = containerInstance; |
| // Dismiss snackbar on action. |
| this.onAction().subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this.dismiss(); })); |
| containerInstance._onExit.subscribe((/** |
| * @return {?} |
| */ |
| 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. |
| * @breaking-change 8.0.0 |
| */ |
| /** |
| * Marks the snackbar action clicked. |
| * @deprecated Use `dismissWithAction` instead. |
| * \@breaking-change 8.0.0 |
| * @return {?} |
| */ |
| MatSnackBarRef.prototype.closeWithAction = /** |
| * Marks the snackbar action clicked. |
| * @deprecated Use `dismissWithAction` instead. |
| * \@breaking-change 8.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((/** |
| * @return {?} |
| */ |
| 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. */ |
| /** |
| * Cleans up the DOM after closing. |
| * @private |
| * @return {?} |
| */ |
| MatSnackBarRef.prototype._finishDismiss = /** |
| * Cleans up the DOM after closing. |
| * @private |
| * @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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to access the data that was passed in to a snack bar. |
| * @type {?} |
| */ |
| var MAT_SNACK_BAR_DATA = new core.InjectionToken('MatSnackBarData'); |
| /** |
| * Configuration used when opening a snack-bar. |
| * @template D |
| */ |
| var /** |
| * Configuration used when opening a snack-bar. |
| * @template D |
| */ |
| MatSnackBarConfig = /** @class */ (function () { |
| function MatSnackBarConfig() { |
| /** |
| * The politeness level for the MatAriaLiveAnnouncer announcement. |
| */ |
| this.politeness = 'assertive'; |
| /** |
| * Message to be announced by the LiveAnnouncer. When opening a snackbar without a custom |
| * component or template, the announcement message will default to the specified message. |
| */ |
| this.announcementMessage = ''; |
| /** |
| * The length of time in milliseconds to wait before automatically dismissing the snack bar. |
| */ |
| this.duration = 0; |
| /** |
| * 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (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: "<span>{{data.message}}</span><div class=\"mat-simple-snackbar-action\" *ngIf=\"hasAction\"><button mat-button (click)=\"action()\">{{data.action}}</button></div>", |
| styles: [".mat-simple-snackbar{display:flex;justify-content:space-between;align-items:center;height:100%;line-height:20px;opacity:1}.mat-simple-snackbar-action{flex-shrink:0;margin:-8px -8px -8px 8px}.mat-simple-snackbar-action button{max-height:36px;min-width:0}[dir=rtl] .mat-simple-snackbar-action{margin-left:-8px;margin-right:8px}"], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| host: { |
| '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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by the Material snack bar. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matSnackBarAnimations = { |
| /** |
| * Animation that shows and hides a snack bar. |
| */ |
| snackBarState: animations$1.trigger('state', [ |
| animations$1.state('void, hidden', animations$1.style({ |
| transform: 'scale(0.8)', |
| opacity: 0, |
| })), |
| animations$1.state('visible', animations$1.style({ |
| transform: 'scale(1)', |
| opacity: 1, |
| })), |
| animations$1.transition('* => visible', animations$1.animate('150ms cubic-bezier(0, 0, 0.2, 1)')), |
| animations$1.transition('* => void, * => hidden', animations$1.animate('75ms cubic-bezier(0.4, 0.0, 1, 1)', animations$1.style({ |
| opacity: 0 |
| }))), |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Internal component that wraps user-provided snack bar content. |
| * \@docs-private |
| */ |
| var MatSnackBarContainer = /** @class */ (function (_super) { |
| __extends(MatSnackBarContainer, _super); |
| function MatSnackBarContainer(_ngZone, _elementRef, _changeDetectorRef, snackBarConfig) { |
| var _this = _super.call(this) || this; |
| _this._ngZone = _ngZone; |
| _this._elementRef = _elementRef; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this.snackBarConfig = snackBarConfig; |
| /** |
| * Whether the component has been destroyed. |
| */ |
| _this._destroyed = false; |
| /** |
| * Subject for notifying that the snack bar has exited from view. |
| */ |
| _this._onExit = new rxjs.Subject(); |
| /** |
| * Subject for notifying that the snack bar has finished entering the view. |
| */ |
| _this._onEnter = new rxjs.Subject(); |
| /** |
| * The state of the snack bar animations. |
| */ |
| _this._animationState = 'void'; |
| // Based on the ARIA spec, `alert` and `status` roles have an |
| // implicit `assertive` and `polite` politeness respectively. |
| if (snackBarConfig.politeness === 'assertive' && !snackBarConfig.announcementMessage) { |
| _this._role = 'alert'; |
| } |
| else if (snackBarConfig.politeness === 'off') { |
| _this._role = null; |
| } |
| else { |
| _this._role = 'status'; |
| } |
| 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) { |
| this._assertNotAttached(); |
| this._applySnackBarClasses(); |
| 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. |
| * @template C |
| * @param {?} portal |
| * @return {?} |
| */ |
| MatSnackBarContainer.prototype.attachTemplatePortal = /** |
| * Attach a template portal as content to this snack bar container. |
| * @template C |
| * @param {?} portal |
| * @return {?} |
| */ |
| function (portal$$1) { |
| this._assertNotAttached(); |
| this._applySnackBarClasses(); |
| return this._portalOutlet.attachTemplatePortal(portal$$1); |
| }; |
| /** 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 === 'hidden') { |
| this._completeExit(); |
| } |
| if (toState === 'visible') { |
| // Note: we shouldn't use `this` inside the zone callback, |
| // because it can cause a memory leak. |
| /** @type {?} */ |
| var onEnter_1 = this._onEnter; |
| this._ngZone.run((/** |
| * @return {?} |
| */ |
| 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._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 () { |
| // Note: this one transitions to `hidden`, rather than `void`, in order to handle the case |
| // where multiple snack bars are opened in quick succession (e.g. two consecutive calls to |
| // `MatSnackBar.open`). |
| this._animationState = 'hidden'; |
| 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. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._ngZone.onMicrotaskEmpty.asObservable().pipe(operators.take(1)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._onExit.next(); |
| _this._onExit.complete(); |
| })); |
| }; |
| /** Applies the various positioning and user-configured CSS classes to the snack bar. */ |
| /** |
| * Applies the various positioning and user-configured CSS classes to the snack bar. |
| * @private |
| * @return {?} |
| */ |
| MatSnackBarContainer.prototype._applySnackBarClasses = /** |
| * Applies the various positioning and user-configured CSS classes to the snack bar. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var element = this._elementRef.nativeElement; |
| /** @type {?} */ |
| var panelClasses = this.snackBarConfig.panelClass; |
| if (panelClasses) { |
| if (Array.isArray(panelClasses)) { |
| // Note that we can't use a spread here, because IE doesn't support multiple arguments. |
| panelClasses.forEach((/** |
| * @param {?} cssClass |
| * @return {?} |
| */ |
| function (cssClass) { return element.classList.add(cssClass); })); |
| } |
| else { |
| element.classList.add(panelClasses); |
| } |
| } |
| if (this.snackBarConfig.horizontalPosition === 'center') { |
| element.classList.add('mat-snack-bar-center'); |
| } |
| if (this.snackBarConfig.verticalPosition === 'top') { |
| element.classList.add('mat-snack-bar-top'); |
| } |
| }; |
| /** Asserts that no content is already attached to the container. */ |
| /** |
| * Asserts that no content is already attached to the container. |
| * @private |
| * @return {?} |
| */ |
| MatSnackBarContainer.prototype._assertNotAttached = /** |
| * Asserts that no content is already attached to the container. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| if (this._portalOutlet.hasAttached()) { |
| throw Error('Attempting to attach snack bar content after content is already attached'); |
| } |
| }; |
| MatSnackBarContainer.decorators = [ |
| { type: core.Component, args: [{selector: 'snack-bar-container', |
| template: "<ng-template cdkPortalOutlet></ng-template>", |
| styles: [".mat-snack-bar-container{border-radius:4px;box-sizing:border-box;display:block;margin:24px;max-width:33vw;min-width:344px;padding:14px 16px;min-height:48px;transform-origin:center}@media (-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:8px;max-width:100%;min-width:0;width:100%}"], |
| // In Ivy embedded views will be change detected from their declaration place, rather than |
| // where they were stamped out. This means that we can't have the snack bar container be OnPush, |
| // because it might cause snack bars that were opened from a template not to be out of date. |
| // tslint:disable-next-line:validate-decorators |
| changeDetection: core.ChangeDetectionStrategy.Default, |
| encapsulation: core.ViewEncapsulation.None, |
| animations: [matSnackBarAnimations.snackBarState], |
| host: { |
| '[attr.role]': '_role', |
| '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 }, |
| { type: MatSnackBarConfig } |
| ]; }; |
| MatSnackBarContainer.propDecorators = { |
| _portalOutlet: [{ type: core.ViewChild, args: [portal.CdkPortalOutlet, { static: true },] }] |
| }; |
| return MatSnackBarContainer; |
| }(portal.BasePortalOutlet)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatSnackBarModule = /** @class */ (function () { |
| function MatSnackBarModule() { |
| } |
| MatSnackBarModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| overlay.OverlayModule, |
| portal.PortalModule, |
| common.CommonModule, |
| MatButtonModule, |
| MatCommonModule, |
| ], |
| exports: [MatSnackBarContainer, MatCommonModule], |
| declarations: [MatSnackBarContainer, SimpleSnackBar], |
| entryComponents: [MatSnackBarContainer, SimpleSnackBar], |
| },] }, |
| ]; |
| return MatSnackBarModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token that can be used to specify default snack bar. |
| * @type {?} |
| */ |
| var MAT_SNACK_BAR_DEFAULT_OPTIONS = new core.InjectionToken('mat-snack-bar-default-options', { |
| providedIn: 'root', |
| factory: MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, |
| }); |
| /** |
| * \@docs-private |
| * @return {?} |
| */ |
| function MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY() { |
| return new MatSnackBarConfig(); |
| } |
| /** |
| * Service to dispatch Material Design snack bar messages. |
| */ |
| var MatSnackBar = /** @class */ (function () { |
| function MatSnackBar(_overlay, _live, _injector, _breakpointObserver, _parentSnackBar, _defaultConfig) { |
| this._overlay = _overlay; |
| this._live = _live; |
| this._injector = _injector; |
| this._breakpointObserver = _breakpointObserver; |
| this._parentSnackBar = _parentSnackBar; |
| this._defaultConfig = _defaultConfig; |
| /** |
| * 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 () { |
| /** @type {?} */ |
| var 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) { |
| return (/** @type {?} */ (this._attach(component, config))); |
| }; |
| /** |
| * Creates and dispatches a snack bar with a custom template for the content, removing any |
| * currently opened snack bars. |
| * |
| * @param template Template to be instantiated. |
| * @param config Extra configuration for the snack bar. |
| */ |
| /** |
| * Creates and dispatches a snack bar with a custom template for the content, removing any |
| * currently opened snack bars. |
| * |
| * @param {?} template Template to be instantiated. |
| * @param {?=} config Extra configuration for the snack bar. |
| * @return {?} |
| */ |
| MatSnackBar.prototype.openFromTemplate = /** |
| * Creates and dispatches a snack bar with a custom template for the content, removing any |
| * currently opened snack bars. |
| * |
| * @param {?} template Template to be instantiated. |
| * @param {?=} config Extra configuration for the snack bar. |
| * @return {?} |
| */ |
| function (template, config) { |
| return this._attach(template, config); |
| }; |
| /** |
| * 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 = ''; } |
| /** @type {?} */ |
| var _config = __assign({}, this._defaultConfig, 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 }; |
| if (!_config.announcementMessage) { |
| _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(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSnackBar.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| // Only dismiss the snack bar at the current level on destroy. |
| if (this._snackBarRefAtThisLevel) { |
| this._snackBarRefAtThisLevel.dismiss(); |
| } |
| }; |
| /** |
| * Attaches the snack bar container component to the overlay. |
| */ |
| /** |
| * Attaches the snack bar container component to the overlay. |
| * @private |
| * @param {?} overlayRef |
| * @param {?} config |
| * @return {?} |
| */ |
| MatSnackBar.prototype._attachSnackBarContainer = /** |
| * Attaches the snack bar container component to the overlay. |
| * @private |
| * @param {?} overlayRef |
| * @param {?} config |
| * @return {?} |
| */ |
| function (overlayRef, config) { |
| /** @type {?} */ |
| var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| /** @type {?} */ |
| var injector = new portal.PortalInjector(userInjector || this._injector, new WeakMap([ |
| [MatSnackBarConfig, config] |
| ])); |
| /** @type {?} */ |
| var containerPortal = new portal.ComponentPortal(MatSnackBarContainer, config.viewContainerRef, injector); |
| /** @type {?} */ |
| var containerRef = overlayRef.attach(containerPortal); |
| containerRef.instance.snackBarConfig = config; |
| return containerRef.instance; |
| }; |
| /** |
| * Places a new component or a template as the content of the snack bar container. |
| */ |
| /** |
| * Places a new component or a template as the content of the snack bar container. |
| * @private |
| * @template T |
| * @param {?} content |
| * @param {?=} userConfig |
| * @return {?} |
| */ |
| MatSnackBar.prototype._attach = /** |
| * Places a new component or a template as the content of the snack bar container. |
| * @private |
| * @template T |
| * @param {?} content |
| * @param {?=} userConfig |
| * @return {?} |
| */ |
| function (content, userConfig) { |
| /** @type {?} */ |
| var config = __assign({}, new MatSnackBarConfig(), this._defaultConfig, userConfig); |
| /** @type {?} */ |
| var overlayRef = this._createOverlay(config); |
| /** @type {?} */ |
| var container = this._attachSnackBarContainer(overlayRef, config); |
| /** @type {?} */ |
| var snackBarRef = new MatSnackBarRef(container, overlayRef); |
| if (content instanceof core.TemplateRef) { |
| /** @type {?} */ |
| var portal$$1 = new portal.TemplatePortal(content, (/** @type {?} */ (null)), (/** @type {?} */ ({ |
| $implicit: config.data, |
| snackBarRef: snackBarRef |
| }))); |
| snackBarRef.instance = container.attachTemplatePortal(portal$$1); |
| } |
| else { |
| /** @type {?} */ |
| var injector = this._createInjector(config, snackBarRef); |
| /** @type {?} */ |
| var portal$$1 = new portal.ComponentPortal(content, undefined, injector); |
| /** @type {?} */ |
| var 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(layout.Breakpoints.Handset).pipe(operators.takeUntil(overlayRef.detachments().pipe(operators.take(1)))).subscribe((/** |
| * @param {?} state |
| * @return {?} |
| */ |
| function (state$$1) { |
| if (state$$1.matches) { |
| overlayRef.overlayElement.classList.add('mat-snack-bar-handset'); |
| } |
| else { |
| overlayRef.overlayElement.classList.remove('mat-snack-bar-handset'); |
| } |
| })); |
| this._animateSnackBar(snackBarRef, config); |
| this._openedSnackBarRef = snackBarRef; |
| return this._openedSnackBarRef; |
| }; |
| /** Animates the old snack bar out and the new one in. */ |
| /** |
| * Animates the old snack bar out and the new one in. |
| * @private |
| * @param {?} snackBarRef |
| * @param {?} config |
| * @return {?} |
| */ |
| MatSnackBar.prototype._animateSnackBar = /** |
| * Animates the old snack bar out and the new one in. |
| * @private |
| * @param {?} snackBarRef |
| * @param {?} config |
| * @return {?} |
| */ |
| function (snackBarRef, config) { |
| var _this = this; |
| // When the snackbar is dismissed, clear the reference to it. |
| snackBarRef.afterDismissed().subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| // Clear the snackbar ref if it hasn't already been replaced by a newer snackbar. |
| if (_this._openedSnackBarRef == snackBarRef) { |
| _this._openedSnackBarRef = null; |
| } |
| if (config.announcementMessage) { |
| _this._live.clear(); |
| } |
| })); |
| 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((/** |
| * @return {?} |
| */ |
| 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((/** |
| * @return {?} |
| */ |
| function () { return snackBarRef._dismissAfter((/** @type {?} */ (config.duration))); })); |
| } |
| if (config.announcementMessage) { |
| this._live.announce(config.announcementMessage, config.politeness); |
| } |
| }; |
| /** |
| * Creates a new overlay and places it in the correct location. |
| * @param config The user-specified snack bar config. |
| */ |
| /** |
| * Creates a new overlay and places it in the correct location. |
| * @private |
| * @param {?} config The user-specified snack bar config. |
| * @return {?} |
| */ |
| MatSnackBar.prototype._createOverlay = /** |
| * Creates a new overlay and places it in the correct location. |
| * @private |
| * @param {?} config The user-specified snack bar config. |
| * @return {?} |
| */ |
| function (config) { |
| /** @type {?} */ |
| var overlayConfig = new overlay.OverlayConfig(); |
| overlayConfig.direction = config.direction; |
| /** @type {?} */ |
| var positionStrategy = this._overlay.position().global(); |
| // Set horizontal position. |
| /** @type {?} */ |
| var isRtl = config.direction === 'rtl'; |
| /** @type {?} */ |
| var isLeft = (config.horizontalPosition === 'left' || |
| (config.horizontalPosition === 'start' && !isRtl) || |
| (config.horizontalPosition === 'end' && isRtl)); |
| /** @type {?} */ |
| var 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. |
| * @param config Config that was used to create the snack bar. |
| * @param snackBarRef Reference to the snack bar. |
| */ |
| /** |
| * Creates an injector to be used inside of a snack bar component. |
| * @private |
| * @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. |
| * @private |
| * @template T |
| * @param {?} config Config that was used to create the snack bar. |
| * @param {?} snackBarRef Reference to the snack bar. |
| * @return {?} |
| */ |
| function (config, snackBarRef) { |
| /** @type {?} */ |
| var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; |
| return new portal.PortalInjector(userInjector || this._injector, new WeakMap([ |
| [MatSnackBarRef, snackBarRef], |
| [MAT_SNACK_BAR_DATA, config.data] |
| ])); |
| }; |
| MatSnackBar.decorators = [ |
| { type: core.Injectable, args: [{ providedIn: MatSnackBarModule },] }, |
| ]; |
| /** @nocollapse */ |
| MatSnackBar.ctorParameters = function () { return [ |
| { type: overlay.Overlay }, |
| { type: a11y.LiveAnnouncer }, |
| { type: core.Injector }, |
| { type: layout.BreakpointObserver }, |
| { type: MatSnackBar, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] }, |
| { type: MatSnackBarConfig, decorators: [{ type: core.Inject, args: [MAT_SNACK_BAR_DEFAULT_OPTIONS,] }] } |
| ]; }; |
| /** @nocollapse */ MatSnackBar.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatSnackBar_Factory() { return new MatSnackBar(core.ɵɵinject(overlay.Overlay), core.ɵɵinject(a11y.LiveAnnouncer), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(layout.BreakpointObserver), core.ɵɵinject(MatSnackBar, 12), core.ɵɵinject(MAT_SNACK_BAR_DEFAULT_OPTIONS)); }, token: MatSnackBar, providedIn: MatSnackBarModule }); |
| return MatSnackBar; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatSort. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatSort. |
| /** |
| * \@docs-private |
| */ |
| MatSortBase = /** @class */ (function () { |
| function MatSortBase() { |
| } |
| return MatSortBase; |
| }()); |
| /** @type {?} */ |
| var _MatSortMixinBase = mixinInitialized(mixinDisabled(MatSortBase)); |
| /** |
| * Container for MatSortables to manage the sort state and provide default sort parameters. |
| */ |
| var MatSort = /** @class */ (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 rxjs.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", { |
| /** The sort direction of the currently active MatSortable. */ |
| 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", { |
| /** |
| * 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. |
| */ |
| 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. |
| /** @type {?} */ |
| var disableClear = sortable.disableClear != null ? sortable.disableClear : this.disableClear; |
| /** @type {?} */ |
| var sortDirectionCycle = getSortDirectionCycle(sortable.start || this.start, disableClear); |
| // Get and return the next direction in the cycle |
| /** @type {?} */ |
| var nextDirectionIndex = sortDirectionCycle.indexOf(this.direction) + 1; |
| if (nextDirectionIndex >= sortDirectionCycle.length) { |
| nextDirectionIndex = 0; |
| } |
| return sortDirectionCycle[nextDirectionIndex]; |
| }; |
| /** |
| * @return {?} |
| */ |
| MatSort.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._markInitialized(); |
| }; |
| /** |
| * @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'] |
| },] }, |
| ]; |
| 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) { |
| /** @type {?} */ |
| var sortOrder = ['asc', 'desc']; |
| if (start == 'desc') { |
| sortOrder.reverse(); |
| } |
| if (!disableClear) { |
| sortOrder.push(''); |
| } |
| return sortOrder; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var SORT_ANIMATION_TRANSITION = AnimationDurations.ENTERING + ' ' + |
| AnimationCurves.STANDARD_CURVE; |
| /** |
| * Animations used by MatSort. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matSortAnimations = { |
| /** |
| * Animation that moves the sort indicator. |
| */ |
| indicator: animations$1.trigger('indicator', [ |
| animations$1.state('active-asc, asc', animations$1.style({ transform: 'translateY(0px)' })), |
| // 10px is the height of the sort indicator, minus the width of the pointers |
| animations$1.state('active-desc, desc', animations$1.style({ transform: 'translateY(10px)' })), |
| animations$1.transition('active-asc <=> active-desc', animations$1.animate(SORT_ANIMATION_TRANSITION)) |
| ]), |
| /** |
| * Animation that rotates the left pointer of the indicator based on the sorting direction. |
| */ |
| leftPointer: animations$1.trigger('leftPointer', [ |
| animations$1.state('active-asc, asc', animations$1.style({ transform: 'rotate(-45deg)' })), |
| animations$1.state('active-desc, desc', animations$1.style({ transform: 'rotate(45deg)' })), |
| animations$1.transition('active-asc <=> active-desc', animations$1.animate(SORT_ANIMATION_TRANSITION)) |
| ]), |
| /** |
| * Animation that rotates the right pointer of the indicator based on the sorting direction. |
| */ |
| rightPointer: animations$1.trigger('rightPointer', [ |
| animations$1.state('active-asc, asc', animations$1.style({ transform: 'rotate(45deg)' })), |
| animations$1.state('active-desc, desc', animations$1.style({ transform: 'rotate(-45deg)' })), |
| animations$1.transition('active-asc <=> active-desc', animations$1.animate(SORT_ANIMATION_TRANSITION)) |
| ]), |
| /** |
| * Animation that controls the arrow opacity. |
| */ |
| arrowOpacity: animations$1.trigger('arrowOpacity', [ |
| animations$1.state('desc-to-active, asc-to-active, active', animations$1.style({ opacity: 1 })), |
| animations$1.state('desc-to-hint, asc-to-hint, hint', animations$1.style({ opacity: .54 })), |
| animations$1.state('hint-to-desc, active-to-desc, desc, hint-to-asc, active-to-asc, asc, void', animations$1.style({ opacity: 0 })), |
| // Transition between all states except for immediate transitions |
| animations$1.transition('* => asc, * => desc, * => active, * => hint, * => void', animations$1.animate('0ms')), |
| animations$1.transition('* <=> *', animations$1.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$1.trigger('arrowPosition', [ |
| // Hidden Above => Hint Center |
| animations$1.transition('* => desc-to-hint, * => desc-to-active', animations$1.animate(SORT_ANIMATION_TRANSITION, animations$1.keyframes([ |
| animations$1.style({ transform: 'translateY(-25%)' }), |
| animations$1.style({ transform: 'translateY(0)' }) |
| ]))), |
| // Hint Center => Hidden Below |
| animations$1.transition('* => hint-to-desc, * => active-to-desc', animations$1.animate(SORT_ANIMATION_TRANSITION, animations$1.keyframes([ |
| animations$1.style({ transform: 'translateY(0)' }), |
| animations$1.style({ transform: 'translateY(25%)' }) |
| ]))), |
| // Hidden Below => Hint Center |
| animations$1.transition('* => asc-to-hint, * => asc-to-active', animations$1.animate(SORT_ANIMATION_TRANSITION, animations$1.keyframes([ |
| animations$1.style({ transform: 'translateY(25%)' }), |
| animations$1.style({ transform: 'translateY(0)' }) |
| ]))), |
| // Hint Center => Hidden Above |
| animations$1.transition('* => hint-to-asc, * => active-to-asc', animations$1.animate(SORT_ANIMATION_TRANSITION, animations$1.keyframes([ |
| animations$1.style({ transform: 'translateY(0)' }), |
| animations$1.style({ transform: 'translateY(-25%)' }) |
| ]))), |
| animations$1.state('desc-to-hint, asc-to-hint, hint, desc-to-active, asc-to-active, active', animations$1.style({ transform: 'translateY(0)' })), |
| animations$1.state('hint-to-desc, active-to-desc, desc', animations$1.style({ transform: 'translateY(-25%)' })), |
| animations$1.state('hint-to-asc, active-to-asc, asc', animations$1.style({ transform: 'translateY(25%)' })), |
| ]), |
| /** |
| * Necessary trigger that calls animate on children animations. |
| */ |
| allowChildren: animations$1.trigger('allowChildren', [ |
| animations$1.transition('* <=> *', [ |
| animations$1.query('@*', animations$1.animateChild(), { optional: true }) |
| ]) |
| ]), |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (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 rxjs.Subject(); |
| /** |
| * ARIA label for the sorting button. |
| */ |
| this.sortButtonLabel = (/** |
| * @param {?} id |
| * @return {?} |
| */ |
| function (id) { |
| return "Change sorting for " + id; |
| }); |
| } |
| MatSortHeaderIntl.decorators = [ |
| { type: core.Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ MatSortHeaderIntl.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatSortHeaderIntl_Factory() { return new MatSortHeaderIntl(); }, token: MatSortHeaderIntl, providedIn: "root" }); |
| return MatSortHeaderIntl; |
| }()); |
| /** |
| * \@docs-private |
| * @param {?} parentIntl |
| * @return {?} |
| */ |
| function MAT_SORT_HEADER_INTL_PROVIDER_FACTORY(parentIntl) { |
| return parentIntl || new MatSortHeaderIntl(); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| 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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to the sort header. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to the sort header. |
| /** |
| * \@docs-private |
| */ |
| MatSortHeaderBase = /** @class */ (function () { |
| function MatSortHeaderBase() { |
| } |
| return MatSortHeaderBase; |
| }()); |
| /** @type {?} */ |
| var _MatSortHeaderMixinBase = mixinDisabled(MatSortHeaderBase); |
| /** |
| * 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 = /** @class */ (function (_super) { |
| __extends(MatSortHeader, _super); |
| function MatSortHeader(_intl, changeDetectorRef, _sort, _columnDef) { |
| var _this = |
| // Note that we use a string token for the `_columnDef`, because the value is provided both by |
| // `material/table` and `cdk/table` and we can't have the CDK depending on Material, |
| // and we want to avoid having the sort header depending on the CDK table because |
| // of this single reference. |
| _super.call(this) || this; |
| _this._intl = _intl; |
| _this._sort = _sort; |
| _this._columnDef = _columnDef; |
| /** |
| * 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 = rxjs.merge(_sort.sortChange, _sort._stateChanges, _intl.changes) |
| .subscribe((/** |
| * @return {?} |
| */ |
| 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", { |
| /** Overrides the disable clear value of the containing MatSort for this MatSortable. */ |
| 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._columnDef) { |
| this.id = this._columnDef.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. |
| /** @type {?} */ |
| var 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 () { |
| /** @type {?} */ |
| var 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; |
| }; |
| /** |
| * Gets the aria-sort attribute that should be applied to this sort header. If this header |
| * is not sorted, returns null so that the attribute is removed from the host element. Aria spec |
| * says that the aria-sort property should only be present on one header at a time, so removing |
| * ensures this is true. |
| */ |
| /** |
| * Gets the aria-sort attribute that should be applied to this sort header. If this header |
| * is not sorted, returns null so that the attribute is removed from the host element. Aria spec |
| * says that the aria-sort property should only be present on one header at a time, so removing |
| * ensures this is true. |
| * @return {?} |
| */ |
| MatSortHeader.prototype._getAriaSortAttribute = /** |
| * Gets the aria-sort attribute that should be applied to this sort header. If this header |
| * is not sorted, returns null so that the attribute is removed from the host element. Aria spec |
| * says that the aria-sort property should only be present on one header at a time, so removing |
| * ensures this is true. |
| * @return {?} |
| */ |
| function () { |
| if (!this._isSorted()) { |
| return null; |
| } |
| return this._sort.direction == 'asc' ? 'ascending' : 'descending'; |
| }; |
| /** Whether the arrow inside the sort header should be rendered. */ |
| /** |
| * Whether the arrow inside the sort header should be rendered. |
| * @return {?} |
| */ |
| MatSortHeader.prototype._renderArrow = /** |
| * Whether the arrow inside the sort header should be rendered. |
| * @return {?} |
| */ |
| function () { |
| return !this._isDisabled() || this._isSorted(); |
| }; |
| 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\" *ngIf=\"_renderArrow()\" [@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>", |
| styles: [".mat-sort-header-container{display:flex;cursor:pointer;align-items:center}.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-button::-moz-focus-inner{border:0}.mat-sort-header-arrow{height:12px;width:12px;min-width:12px;position:relative;display:flex;opacity:0}.mat-sort-header-arrow,[dir=rtl] .mat-sort-header-position-before .mat-sort-header-arrow{margin:0 0 0 6px}.mat-sort-header-position-before .mat-sort-header-arrow,[dir=rtl] .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}@media (-ms-high-contrast:active){.mat-sort-header-stem{width:0;border-left:solid 2px}}.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)}@media (-ms-high-contrast:active){.mat-sort-header-pointer-middle{width:0;height:0;border-top:solid 2px;border-left:solid 2px}}.mat-sort-header-pointer-left,.mat-sort-header-pointer-right{background:currentColor;width:6px;height:2px;position:absolute;top:0}@media (-ms-high-contrast:active){.mat-sort-header-pointer-left,.mat-sort-header-pointer-right{width:0;height:0;border-left:solid 6px;border-top:solid 2px}}.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)', |
| '[attr.aria-sort]': '_getAriaSortAttribute()', |
| '[class.mat-sort-header-disabled]': '_isDisabled()', |
| }, |
| encapsulation: core.ViewEncapsulation.None, |
| 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: undefined, decorators: [{ type: core.Inject, args: ['MAT_SORT_HEADER_COLUMN_DEF',] }, { 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)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatSortModule = /** @class */ (function () { |
| function MatSortModule() { |
| } |
| MatSortModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [common.CommonModule], |
| exports: [MatSort, MatSortHeader], |
| declarations: [MatSort, MatSortHeader], |
| providers: [MAT_SORT_HEADER_INTL_PROVIDER] |
| },] }, |
| ]; |
| return MatSortModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatStepLabel = /** @class */ (function (_super) { |
| __extends(MatStepLabel, _super); |
| function MatStepLabel() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatStepLabel.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matStepLabel]', |
| },] }, |
| ]; |
| return MatStepLabel; |
| }(stepper.CdkStepLabel)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Stepper data that is required for internationalization. |
| */ |
| var MatStepperIntl = /** @class */ (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 rxjs.Subject(); |
| /** |
| * Label that is rendered below optional steps. |
| */ |
| this.optionalLabel = 'Optional'; |
| } |
| MatStepperIntl.decorators = [ |
| { type: core.Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ MatStepperIntl.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function MatStepperIntl_Factory() { return new MatStepperIntl(); }, token: MatStepperIntl, providedIn: "root" }); |
| return MatStepperIntl; |
| }()); |
| /** |
| * \@docs-private |
| * @param {?} parentIntl |
| * @return {?} |
| */ |
| function MAT_STEPPER_INTL_PROVIDER_FACTORY(parentIntl) { |
| return parentIntl || new MatStepperIntl(); |
| } |
| /** |
| * \@docs-private |
| * @type {?} |
| */ |
| var MAT_STEPPER_INTL_PROVIDER = { |
| provide: MatStepperIntl, |
| deps: [[new core.Optional(), new core.SkipSelf(), MatStepperIntl]], |
| useFactory: MAT_STEPPER_INTL_PROVIDER_FACTORY |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatStepHeader = /** @class */ (function (_super) { |
| __extends(MatStepHeader, _super); |
| function MatStepHeader(_intl, _focusMonitor, _elementRef, changeDetectorRef) { |
| var _this = _super.call(this, _elementRef) || this; |
| _this._intl = _intl; |
| _this._focusMonitor = _focusMonitor; |
| _focusMonitor.monitor(_elementRef, true); |
| _this._intlSubscription = _intl.changes.subscribe((/** |
| * @return {?} |
| */ |
| function () { return changeDetectorRef.markForCheck(); })); |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatStepHeader.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._intlSubscription.unsubscribe(); |
| this._focusMonitor.stopMonitoring(this._elementRef); |
| }; |
| /** Focuses the step header. */ |
| /** |
| * Focuses the step header. |
| * @return {?} |
| */ |
| MatStepHeader.prototype.focus = /** |
| * Focuses the step header. |
| * @return {?} |
| */ |
| function () { |
| this._focusMonitor.focusVia(this._elementRef, 'program'); |
| }; |
| /** 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._elementRef.nativeElement; |
| }; |
| /** Template context variables that are exposed to the `matStepperIcon` instances. */ |
| /** |
| * Template context variables that are exposed to the `matStepperIcon` instances. |
| * @return {?} |
| */ |
| MatStepHeader.prototype._getIconContext = /** |
| * Template context variables that are exposed to the `matStepperIcon` instances. |
| * @return {?} |
| */ |
| function () { |
| return { |
| index: this.index, |
| active: this.active, |
| optional: this.optional |
| }; |
| }; |
| /** |
| * @param {?} state |
| * @return {?} |
| */ |
| MatStepHeader.prototype._getDefaultTextForState = /** |
| * @param {?} state |
| * @return {?} |
| */ |
| function (state$$1) { |
| if (state$$1 == 'number') { |
| return "" + (this.index + 1); |
| } |
| if (state$$1 == 'edit') { |
| return 'create'; |
| } |
| if (state$$1 == 'error') { |
| return 'warning'; |
| } |
| return state$$1; |
| }; |
| MatStepHeader.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-step-header', |
| template: "<div class=\"mat-step-header-ripple\" matRipple [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disableRipple\"></div><div class=\"mat-step-icon-state-{{state}} mat-step-icon\" [class.mat-step-icon-selected]=\"selected\"><div class=\"mat-step-icon-content\" [ngSwitch]=\"!!(iconOverrides && iconOverrides[state])\"><ng-container *ngSwitchCase=\"true\" [ngTemplateOutlet]=\"iconOverrides[state]\" [ngTemplateOutletContext]=\"_getIconContext()\"></ng-container><ng-container *ngSwitchDefault [ngSwitch]=\"state\"><span *ngSwitchCase=\"'number'\">{{_getDefaultTextForState(state)}}</span><mat-icon *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon></ng-container></div></div><div class=\"mat-step-label\" [class.mat-step-label-active]=\"active\" [class.mat-step-label-selected]=\"selected\" [class.mat-step-label-error]=\"state == 'error'\"><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 && state != 'error'\">{{_intl.optionalLabel}}</div><div class=\"mat-step-sub-label-error\" *ngIf=\"state == 'error'\">{{errorMessage}}</div></div>", |
| styles: [".mat-step-header{overflow:hidden;outline:0;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:transparent}.mat-step-optional,.mat-step-sub-label-error{font-size:12px}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.mat-step-icon .mat-icon,.mat-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.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 .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, |
| 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 }], |
| errorMessage: [{ type: core.Input }], |
| iconOverrides: [{ type: core.Input }], |
| index: [{ type: core.Input }], |
| selected: [{ type: core.Input }], |
| active: [{ type: core.Input }], |
| optional: [{ type: core.Input }], |
| disableRipple: [{ type: core.Input }] |
| }; |
| return MatStepHeader; |
| }(stepper.CdkStepHeader)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by the Material steppers. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matStepperAnimations = { |
| /** |
| * Animation that transitions the step along the X axis in a horizontal stepper. |
| */ |
| horizontalStepTransition: animations$1.trigger('stepTransition', [ |
| animations$1.state('previous', animations$1.style({ transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden' })), |
| animations$1.state('current', animations$1.style({ transform: 'none', visibility: 'visible' })), |
| animations$1.state('next', animations$1.style({ transform: 'translate3d(100%, 0, 0)', visibility: 'hidden' })), |
| animations$1.transition('* => *', animations$1.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$1.trigger('stepTransition', [ |
| animations$1.state('previous', animations$1.style({ height: '0px', visibility: 'hidden' })), |
| animations$1.state('next', animations$1.style({ height: '0px', visibility: 'hidden' })), |
| animations$1.state('current', animations$1.style({ height: '*', visibility: 'visible' })), |
| animations$1.transition('* <=> current', animations$1.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Template to be used to override the icons inside the step header. |
| */ |
| var MatStepperIcon = /** @class */ (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; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatStep = /** @class */ (function (_super) { |
| __extends(MatStep, _super); |
| /** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */ |
| function MatStep(stepper$$1, _errorStateMatcher, stepperOptions) { |
| var _this = _super.call(this, stepper$$1, stepperOptions) || 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) { |
| /** @type {?} */ |
| var 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. |
| /** @type {?} */ |
| var 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', |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatStep.ctorParameters = function () { return [ |
| { type: MatStepper, decorators: [{ type: core.Inject, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatStepper; })),] }] }, |
| { type: ErrorStateMatcher, decorators: [{ type: core.SkipSelf }] }, |
| { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [stepper.STEPPER_GLOBAL_OPTIONS,] }] } |
| ]; }; |
| MatStep.propDecorators = { |
| stepLabel: [{ type: core.ContentChild, args: [MatStepLabel, { static: false },] }] |
| }; |
| return MatStep; |
| }(stepper.CdkStep)); |
| var MatStepper = /** @class */ (function (_super) { |
| __extends(MatStepper, _super); |
| function MatStepper() { |
| var _this = _super !== null && _super.apply(this, arguments) || this; |
| /** |
| * Event emitted when the current step is done transitioning in. |
| */ |
| _this.animationDone = new core.EventEmitter(); |
| /** |
| * Consumer-specified template-refs to be used to override the header icons. |
| */ |
| _this._iconOverrides = {}; |
| /** |
| * Stream of animation `done` events when the body expands/collapses. |
| */ |
| _this._animationDone = new rxjs.Subject(); |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| MatStepper.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this._icons.forEach((/** |
| * @param {?} __0 |
| * @return {?} |
| */ |
| function (_a) { |
| var name = _a.name, templateRef = _a.templateRef; |
| return _this._iconOverrides[name] = templateRef; |
| })); |
| // Mark the component for change detection whenever the content children query changes |
| this._steps.changes.pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._stateChanged(); })); |
| this._animationDone.pipe( |
| // This needs a `distinctUntilChanged` in order to avoid emitting the same event twice due |
| // to a bug in animations where the `.done` callback gets invoked twice on some browsers. |
| // See https://github.com/angular/angular/issues/24084 |
| operators.distinctUntilChanged((/** |
| * @param {?} x |
| * @param {?} y |
| * @return {?} |
| */ |
| function (x, y) { return x.fromState === y.fromState && x.toState === y.toState; })), operators.takeUntil(this._destroyed)).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| if (((/** @type {?} */ (event.toState))) === 'current') { |
| _this.animationDone.emit(); |
| } |
| })); |
| }; |
| MatStepper.decorators = [ |
| { type: core.Directive, args: [{ selector: '[matStepper]', providers: [{ provide: stepper.CdkStepper, useExisting: MatStepper }] },] }, |
| ]; |
| MatStepper.propDecorators = { |
| _stepHeader: [{ type: core.ViewChildren, args: [MatStepHeader,] }], |
| _steps: [{ type: core.ContentChildren, args: [MatStep,] }], |
| _icons: [{ type: core.ContentChildren, args: [MatStepperIcon,] }], |
| animationDone: [{ type: core.Output }], |
| disableRipple: [{ type: core.Input }] |
| }; |
| return MatStepper; |
| }(stepper.CdkStepper)); |
| var MatHorizontalStepper = /** @class */ (function (_super) { |
| __extends(MatHorizontalStepper, _super); |
| function MatHorizontalStepper() { |
| var _this = _super !== null && _super.apply(this, arguments) || this; |
| /** |
| * Whether the label should display in bottom or end position. |
| */ |
| _this.labelPosition = 'end'; |
| return _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]=\"_getFocusIndex() === i ? 0 : -1\" [id]=\"_getStepLabelId(i)\" [attr.aria-posinset]=\"i + 1\" [attr.aria-setsize]=\"steps.length\" [attr.aria-controls]=\"_getStepContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [attr.aria-label]=\"step.ariaLabel || null\" [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\" [index]=\"i\" [state]=\"_getIndicatorType(i, step.state)\" [label]=\"step.stepLabel || step.label\" [selected]=\"selectedIndex === i\" [active]=\"step.completed || selectedIndex === i || !linear\" [optional]=\"step.optional\" [errorMessage]=\"step.errorMessage\" [iconOverrides]=\"_iconOverrides\" [disableRipple]=\"disableRipple\"></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\" [attr.tabindex]=\"selectedIndex === i ? 0 : null\" class=\"mat-horizontal-stepper-content\" role=\"tabpanel\" [@stepTransition]=\"_getAnimationDirection(i)\" (@stepTransition.done)=\"_animationDone.next($event)\" [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-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{border-top-width:1px;border-top-style:solid;content:'';display:inline-block;height:0;position:absolute;top:36px;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;padding:24px;height:24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-content{outline:0}.mat-horizontal-stepper-content[aria-expanded=false]{height:0;overflow:hidden}.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;outline:0}.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', |
| '[class.mat-stepper-label-position-end]': 'labelPosition == "end"', |
| '[class.mat-stepper-label-position-bottom]': 'labelPosition == "bottom"', |
| 'aria-orientation': 'horizontal', |
| 'role': 'tablist', |
| }, |
| animations: [matStepperAnimations.horizontalStepTransition], |
| providers: [ |
| { provide: MatStepper, useExisting: MatHorizontalStepper }, |
| { provide: stepper.CdkStepper, useExisting: MatHorizontalStepper } |
| ], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| MatHorizontalStepper.propDecorators = { |
| labelPosition: [{ type: core.Input }] |
| }; |
| return MatHorizontalStepper; |
| }(MatStepper)); |
| var MatVerticalStepper = /** @class */ (function (_super) { |
| __extends(MatVerticalStepper, _super); |
| function MatVerticalStepper(dir, changeDetectorRef, |
| // @breaking-change 8.0.0 `elementRef` and `_document` parameters to become required. |
| elementRef, _document) { |
| var _this = _super.call(this, dir, changeDetectorRef, elementRef, _document) || 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]=\"_getFocusIndex() == i ? 0 : -1\" [id]=\"_getStepLabelId(i)\" [attr.aria-posinset]=\"i + 1\" [attr.aria-setsize]=\"steps.length\" [attr.aria-controls]=\"_getStepContentId(i)\" [attr.aria-selected]=\"selectedIndex === i\" [attr.aria-label]=\"step.ariaLabel || null\" [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\" [index]=\"i\" [state]=\"_getIndicatorType(i, step.state)\" [label]=\"step.stepLabel || step.label\" [selected]=\"selectedIndex === i\" [active]=\"step.completed || selectedIndex === i || !linear\" [optional]=\"step.optional\" [errorMessage]=\"step.errorMessage\" [iconOverrides]=\"_iconOverrides\" [disableRipple]=\"disableRipple\"></mat-step-header><div class=\"mat-vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\"><div class=\"mat-vertical-stepper-content\" role=\"tabpanel\" [attr.tabindex]=\"selectedIndex === i ? 0 : null\" [@stepTransition]=\"_getAnimationDirection(i)\" (@stepTransition.done)=\"_animationDone.next($event)\" [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-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:36px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{border-top-width:1px;border-top-style:solid;content:'';display:inline-block;height:0;position:absolute;top:36px;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;padding:24px;height:24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-content{outline:0}.mat-horizontal-stepper-content[aria-expanded=false]{height:0;overflow:hidden}.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;outline:0}.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 }, |
| { provide: stepper.CdkStepper, useExisting: MatVerticalStepper } |
| ], |
| encapsulation: core.ViewEncapsulation.None, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatVerticalStepper.ctorParameters = function () { return [ |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] }, |
| { type: core.ChangeDetectorRef }, |
| { type: core.ElementRef }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] } |
| ]; }; |
| return MatVerticalStepper; |
| }(MatStepper)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Button that moves to the next step in a stepper workflow. |
| */ |
| var MatStepperNext = /** @class */ (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: { |
| '[type]': 'type', |
| }, |
| inputs: ['type'] |
| },] }, |
| ]; |
| return MatStepperNext; |
| }(stepper.CdkStepperNext)); |
| /** |
| * Button that moves to the previous step in a stepper workflow. |
| */ |
| var MatStepperPrevious = /** @class */ (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: { |
| '[type]': 'type', |
| }, |
| inputs: ['type'] |
| },] }, |
| ]; |
| return MatStepperPrevious; |
| }(stepper.CdkStepperPrevious)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatStepperModule = /** @class */ (function () { |
| function MatStepperModule() { |
| } |
| MatStepperModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| MatCommonModule, |
| common.CommonModule, |
| portal.PortalModule, |
| MatButtonModule, |
| stepper.CdkStepperModule, |
| MatIconModule, |
| MatRippleModule, |
| ], |
| exports: [ |
| MatCommonModule, |
| MatHorizontalStepper, |
| MatVerticalStepper, |
| MatStep, |
| MatStepLabel, |
| MatStepper, |
| MatStepperNext, |
| MatStepperPrevious, |
| MatStepHeader, |
| MatStepperIcon, |
| ], |
| declarations: [ |
| MatHorizontalStepper, |
| MatVerticalStepper, |
| MatStep, |
| MatStepLabel, |
| MatStepper, |
| MatStepperNext, |
| MatStepperPrevious, |
| MatStepHeader, |
| MatStepperIcon, |
| ], |
| providers: [MAT_STEPPER_INTL_PROVIDER, ErrorStateMatcher], |
| },] }, |
| ]; |
| return MatStepperModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Wrapper for the CdkTable with Material design styles. |
| * @template T |
| */ |
| var MatTable = /** @class */ (function (_super) { |
| __extends(MatTable, _super); |
| function MatTable() { |
| var _this = _super !== null && _super.apply(this, arguments) || this; |
| /** |
| * Overrides the sticky CSS class set by the `CdkTable`. |
| */ |
| _this.stickyCssClass = 'mat-table-sticky'; |
| return _this; |
| } |
| MatTable.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-table, table[mat-table]', |
| exportAs: 'matTable', |
| template: table.CDK_TABLE_TEMPLATE, |
| styles: ["mat-table{display:block}mat-header-row{min-height:56px}mat-footer-row,mat-row{min-height:48px}mat-footer-row,mat-header-row,mat-row{display:flex;border-width:0;border-bottom-width:1px;border-style:solid;align-items:center;box-sizing:border-box}mat-footer-row::after,mat-header-row::after,mat-row::after{display:inline-block;min-height:inherit;content:''}mat-cell:first-of-type,mat-footer-cell:first-of-type,mat-header-cell:first-of-type{padding-left:24px}[dir=rtl] mat-cell:first-of-type,[dir=rtl] mat-footer-cell:first-of-type,[dir=rtl] mat-header-cell:first-of-type{padding-left:0;padding-right:24px}mat-cell:last-of-type,mat-footer-cell:last-of-type,mat-header-cell:last-of-type{padding-right:24px}[dir=rtl] mat-cell:last-of-type,[dir=rtl] mat-footer-cell:last-of-type,[dir=rtl] mat-header-cell:last-of-type{padding-right:0;padding-left:24px}mat-cell,mat-footer-cell,mat-header-cell{flex:1;display:flex;align-items:center;overflow:hidden;word-wrap:break-word;min-height:inherit}table.mat-table{border-spacing:0}tr.mat-header-row{height:56px}tr.mat-footer-row,tr.mat-row{height:48px}th.mat-header-cell{text-align:left}[dir=rtl] th.mat-header-cell{text-align:right}td.mat-cell,td.mat-footer-cell,th.mat-header-cell{padding:0;border-bottom-width:1px;border-bottom-style:solid}td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type,th.mat-header-cell:first-of-type{padding-left:24px}[dir=rtl] td.mat-cell:first-of-type,[dir=rtl] td.mat-footer-cell:first-of-type,[dir=rtl] th.mat-header-cell:first-of-type{padding-left:0;padding-right:24px}td.mat-cell:last-of-type,td.mat-footer-cell:last-of-type,th.mat-header-cell:last-of-type{padding-right:24px}[dir=rtl] td.mat-cell:last-of-type,[dir=rtl] td.mat-footer-cell:last-of-type,[dir=rtl] th.mat-header-cell:last-of-type{padding-right:0;padding-left:24px}"], |
| host: { |
| 'class': 'mat-table', |
| }, |
| providers: [{ provide: table.CdkTable, useExisting: MatTable }], |
| encapsulation: core.ViewEncapsulation.None, |
| // See note on CdkTable for explanation on why this uses the default change detection strategy. |
| // tslint:disable-next-line:validate-decorators |
| changeDetection: core.ChangeDetectionStrategy.Default, |
| },] }, |
| ]; |
| return MatTable; |
| }(table.CdkTable)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (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 }] |
| },] }, |
| ]; |
| 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 = /** @class */ (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 }] |
| },] }, |
| ]; |
| return MatHeaderCellDef; |
| }(table.CdkHeaderCellDef)); |
| /** |
| * Footer cell definition for the mat-table. |
| * Captures the template of a column's footer cell and as well as cell-specific properties. |
| */ |
| var MatFooterCellDef = /** @class */ (function (_super) { |
| __extends(MatFooterCellDef, _super); |
| function MatFooterCellDef() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatFooterCellDef.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matFooterCellDef]', |
| providers: [{ provide: table.CdkFooterCellDef, useExisting: MatFooterCellDef }] |
| },] }, |
| ]; |
| return MatFooterCellDef; |
| }(table.CdkFooterCellDef)); |
| /** |
| * Column definition for the mat-table. |
| * Defines a set of cells available for a table column. |
| */ |
| var MatColumnDef = /** @class */ (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 }, |
| { provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatColumnDef } |
| ], |
| },] }, |
| ]; |
| MatColumnDef.propDecorators = { |
| name: [{ type: core.Input, args: ['matColumnDef',] }], |
| sticky: [{ type: core.Input }], |
| stickyEnd: [{ type: core.Input }] |
| }; |
| return MatColumnDef; |
| }(table.CdkColumnDef)); |
| /** |
| * Header cell template container that adds the right classes and role. |
| */ |
| var MatHeaderCell = /** @class */ (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, th[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)); |
| /** |
| * Footer cell template container that adds the right classes and role. |
| */ |
| var MatFooterCell = /** @class */ (function (_super) { |
| __extends(MatFooterCell, _super); |
| function MatFooterCell(columnDef, elementRef) { |
| var _this = _super.call(this, columnDef, elementRef) || this; |
| elementRef.nativeElement.classList.add("mat-column-" + columnDef.cssClassFriendlyName); |
| return _this; |
| } |
| MatFooterCell.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-footer-cell, td[mat-footer-cell]', |
| host: { |
| 'class': 'mat-footer-cell', |
| 'role': 'gridcell', |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatFooterCell.ctorParameters = function () { return [ |
| { type: table.CdkColumnDef }, |
| { type: core.ElementRef } |
| ]; }; |
| return MatFooterCell; |
| }(table.CdkFooterCell)); |
| /** |
| * Cell template container that adds the right classes and role. |
| */ |
| var MatCell = /** @class */ (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, td[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,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} 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 = /** @class */ (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', 'sticky: matHeaderRowDefSticky'], |
| },] }, |
| ]; |
| return MatHeaderRowDef; |
| }(table.CdkHeaderRowDef)); |
| /** |
| * Footer row definition for the mat-table. |
| * Captures the footer row's template and other footer properties such as the columns to display. |
| */ |
| var MatFooterRowDef = /** @class */ (function (_super) { |
| __extends(MatFooterRowDef, _super); |
| function MatFooterRowDef() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatFooterRowDef.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matFooterRowDef]', |
| providers: [{ provide: table.CdkFooterRowDef, useExisting: MatFooterRowDef }], |
| inputs: ['columns: matFooterRowDef', 'sticky: matFooterRowDefSticky'], |
| },] }, |
| ]; |
| return MatFooterRowDef; |
| }(table.CdkFooterRowDef)); |
| /** |
| * Data row definition for the mat-table. |
| * Captures the data row's template and other properties such as the columns to display and |
| * a when predicate that describes when this row should be used. |
| * @template T |
| */ |
| var MatRowDef = /** @class */ (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'], |
| },] }, |
| ]; |
| return MatRowDef; |
| }(table.CdkRowDef)); |
| /** |
| * Footer template container that contains the cell outlet. Adds the right class and role. |
| */ |
| var MatHeaderRow = /** @class */ (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, tr[mat-header-row]', |
| template: table.CDK_ROW_TEMPLATE, |
| host: { |
| 'class': 'mat-header-row', |
| 'role': 'row', |
| }, |
| // See note on CdkTable for explanation on why this uses the default change detection strategy. |
| // tslint:disable-next-line:validate-decorators |
| changeDetection: core.ChangeDetectionStrategy.Default, |
| encapsulation: core.ViewEncapsulation.None, |
| exportAs: 'matHeaderRow', |
| providers: [{ provide: table.CdkHeaderRow, useExisting: MatHeaderRow }], |
| },] }, |
| ]; |
| return MatHeaderRow; |
| }(table.CdkHeaderRow)); |
| /** |
| * Footer template container that contains the cell outlet. Adds the right class and role. |
| */ |
| var MatFooterRow = /** @class */ (function (_super) { |
| __extends(MatFooterRow, _super); |
| function MatFooterRow() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatFooterRow.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-footer-row, tr[mat-footer-row]', |
| template: table.CDK_ROW_TEMPLATE, |
| host: { |
| 'class': 'mat-footer-row', |
| 'role': 'row', |
| }, |
| // See note on CdkTable for explanation on why this uses the default change detection strategy. |
| // tslint:disable-next-line:validate-decorators |
| changeDetection: core.ChangeDetectionStrategy.Default, |
| encapsulation: core.ViewEncapsulation.None, |
| exportAs: 'matFooterRow', |
| providers: [{ provide: table.CdkFooterRow, useExisting: MatFooterRow }], |
| },] }, |
| ]; |
| return MatFooterRow; |
| }(table.CdkFooterRow)); |
| /** |
| * Data row template container that contains the cell outlet. Adds the right class and role. |
| */ |
| var MatRow = /** @class */ (function (_super) { |
| __extends(MatRow, _super); |
| function MatRow() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatRow.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-row, tr[mat-row]', |
| template: table.CDK_ROW_TEMPLATE, |
| host: { |
| 'class': 'mat-row', |
| 'role': 'row', |
| }, |
| // See note on CdkTable for explanation on why this uses the default change detection strategy. |
| // tslint:disable-next-line:validate-decorators |
| changeDetection: core.ChangeDetectionStrategy.Default, |
| encapsulation: core.ViewEncapsulation.None, |
| exportAs: 'matRow', |
| providers: [{ provide: table.CdkRow, useExisting: MatRow }], |
| },] }, |
| ]; |
| return MatRow; |
| }(table.CdkRow)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Column that simply shows text content for the header and row cells. Assumes that the table |
| * is using the native table implementation (`<table>`). |
| * |
| * By default, the name of this column will be the header text and data property accessor. |
| * The header text can be overridden with the `headerText` input. Cell values can be overridden with |
| * the `dataAccessor` input. Change the text justification to the start or end using the `justify` |
| * input. |
| * @template T |
| */ |
| var MatTextColumn = /** @class */ (function (_super) { |
| __extends(MatTextColumn, _super); |
| function MatTextColumn() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatTextColumn.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-text-column', |
| template: "\n <ng-container matColumnDef>\n <th mat-header-cell *matHeaderCellDef [style.text-align]=\"justify\">\n {{headerText}}\n </th>\n <td mat-cell *matCellDef=\"let data\" [style.text-align]=\"justify\">\n {{dataAccessor(data, name)}}\n </td>\n </ng-container>\n ", |
| encapsulation: core.ViewEncapsulation.None, |
| // Change detection is intentionally not set to OnPush. This component's template will be provided |
| // to the table to be inserted into its view. This is problematic when change detection runs since |
| // the bindings in this template will be evaluated _after_ the table's view is evaluated, which |
| // mean's the template in the table's view will not have the updated value (and in fact will cause |
| // an ExpressionChangedAfterItHasBeenCheckedError). |
| // tslint:disable-next-line:validate-decorators |
| changeDetection: core.ChangeDetectionStrategy.Default, |
| },] }, |
| ]; |
| return MatTextColumn; |
| }(table.CdkTextColumn)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var EXPORTED_DECLARATIONS = [ |
| // Table |
| MatTable, |
| // Template defs |
| MatHeaderCellDef, |
| MatHeaderRowDef, |
| MatColumnDef, |
| MatCellDef, |
| MatRowDef, |
| MatFooterCellDef, |
| MatFooterRowDef, |
| // Cell directives |
| MatHeaderCell, |
| MatCell, |
| MatFooterCell, |
| // Row directives |
| MatHeaderRow, |
| MatRow, |
| MatFooterRow, |
| MatTextColumn, |
| ]; |
| var MatTableModule = /** @class */ (function () { |
| function MatTableModule() { |
| } |
| MatTableModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| table.CdkTableModule, |
| common.CommonModule, |
| MatCommonModule, |
| ], |
| exports: EXPORTED_DECLARATIONS, |
| declarations: EXPORTED_DECLARATIONS, |
| },] }, |
| ]; |
| return MatTableModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Corresponds to `Number.MAX_SAFE_INTEGER`. Moved out into a variable here due to |
| * flaky browser support and the value not being defined in Closure's typings. |
| * @type {?} |
| */ |
| var MAX_SAFE_INTEGER = 9007199254740991; |
| /** |
| * 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. |
| * @template T |
| */ |
| var /** |
| * 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. |
| * @template T |
| */ |
| MatTableDataSource = /** @class */ (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 rxjs.BehaviorSubject([]); |
| /** |
| * Stream that emits when a new filter string is set on the data source. |
| */ |
| _this._filter = new rxjs.BehaviorSubject(''); |
| /** |
| * Used to react to internal changes of the paginator that are made by the data source itself. |
| */ |
| _this._internalPageChanges = new rxjs.Subject(); |
| /** |
| * Subscription to the changes that should trigger an update to the table's rendered rows, such |
| * as filtering, sorting, pagination, or base data changes. |
| */ |
| _this._renderChangesSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * 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 = (/** |
| * @param {?} data |
| * @param {?} sortHeaderId |
| * @return {?} |
| */ |
| function (data, sortHeaderId) { |
| /** @type {?} */ |
| var value = ((/** @type {?} */ (data)))[sortHeaderId]; |
| if (coercion._isNumberValue(value)) { |
| /** @type {?} */ |
| var numberValue = Number(value); |
| // Numbers beyond `MAX_SAFE_INTEGER` can't be compared reliably so we |
| // leave them as strings. For more info: https://goo.gl/y5vbSg |
| return numberValue < MAX_SAFE_INTEGER ? numberValue : value; |
| } |
| return 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 = (/** |
| * @param {?} data |
| * @param {?} sort |
| * @return {?} |
| */ |
| function (data, sort) { |
| /** @type {?} */ |
| var active = sort.active; |
| /** @type {?} */ |
| var direction = sort.direction; |
| if (!active || direction == '') { |
| return data; |
| } |
| return data.sort((/** |
| * @param {?} a |
| * @param {?} b |
| * @return {?} |
| */ |
| function (a, b) { |
| /** @type {?} */ |
| var valueA = _this.sortingDataAccessor(a, active); |
| /** @type {?} */ |
| var 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). |
| /** @type {?} */ |
| var comparatorResult = 0; |
| if (valueA != null && valueB != null) { |
| // 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 != null) { |
| comparatorResult = 1; |
| } |
| else if (valueB != null) { |
| 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 = (/** |
| * @param {?} data |
| * @param {?} filter |
| * @return {?} |
| */ |
| function (data, filter) { |
| // Transform the data into a lowercase string of all property values. |
| /** @type {?} */ |
| var dataStr = Object.keys(data).reduce((/** |
| * @param {?} currentTerm |
| * @param {?} key |
| * @return {?} |
| */ |
| function (currentTerm, key) { |
| // Use an obscure Unicode character to delimit the words in the concatenated string. |
| // This avoids matches where the values of two columns combined will match the user's query |
| // (e.g. `Flute` and `Stop` will match `Test`). The character is intended to be something |
| // that has a very low chance of being typed in by somebody in a text field. This one in |
| // particular is "White up-pointing triangle with dot" from |
| // https://en.wikipedia.org/wiki/List_of_Unicode_characters |
| return currentTerm + ((/** @type {?} */ (data)))[key] + '◬'; |
| }), '').toLowerCase(); |
| // Transform the filter by converting it to lowercase and removing whitespace. |
| /** @type {?} */ |
| var transformedFilter = filter.trim().toLowerCase(); |
| return dataStr.indexOf(transformedFilter) != -1; |
| }); |
| _this._data = new rxjs.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. |
| // The events should emit whenever the component emits a change or initializes, or if no |
| // component is provided, a stream with just a null event should be provided. |
| // The `sortChange` and `pageChange` acts as a signal to the combineLatests below so that the |
| // pipeline can progress to the next step. Note that the value from these streams are not used, |
| // they purely act as a signal to progress in the pipeline. |
| /** @type {?} */ |
| var sortChange = this._sort ? |
| (/** @type {?} */ (rxjs.merge(this._sort.sortChange, this._sort.initialized))) : |
| rxjs.of(null); |
| /** @type {?} */ |
| var pageChange = this._paginator ? |
| (/** @type {?} */ (rxjs.merge(this._paginator.page, this._internalPageChanges, this._paginator.initialized))) : |
| rxjs.of(null); |
| /** @type {?} */ |
| var dataStream = this._data; |
| // Watch for base data or filter changes to provide a filtered set of data. |
| /** @type {?} */ |
| var filteredData = rxjs.combineLatest(dataStream, this._filter) |
| .pipe(operators.map((/** |
| * @param {?} __0 |
| * @return {?} |
| */ |
| function (_a) { |
| var data = _a[0]; |
| return _this._filterData(data); |
| }))); |
| // Watch for filtered data or sort changes to provide an ordered set of data. |
| /** @type {?} */ |
| var orderedData = rxjs.combineLatest(filteredData, sortChange) |
| .pipe(operators.map((/** |
| * @param {?} __0 |
| * @return {?} |
| */ |
| function (_a) { |
| var data = _a[0]; |
| return _this._orderData(data); |
| }))); |
| // Watch for ordered data or page changes to provide a paged set of data. |
| /** @type {?} */ |
| var paginatedData = rxjs.combineLatest(orderedData, pageChange) |
| .pipe(operators.map((/** |
| * @param {?} __0 |
| * @return {?} |
| */ |
| function (_a) { |
| var data = _a[0]; |
| return _this._pageData(data); |
| }))); |
| // Watched for paged data changes and send the result to the table to render. |
| this._renderChangesSubscription.unsubscribe(); |
| this._renderChangesSubscription = paginatedData.subscribe((/** |
| * @param {?} data |
| * @return {?} |
| */ |
| 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((/** |
| * @param {?} obj |
| * @return {?} |
| */ |
| 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; |
| } |
| /** @type {?} */ |
| var 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((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var paginator = _this.paginator; |
| if (!paginator) { |
| return; |
| } |
| paginator.length = filteredDataLength; |
| // If the page index is set beyond the page, reduce it to the last page. |
| if (paginator.pageIndex > 0) { |
| /** @type {?} */ |
| var lastPageIndex = Math.ceil(paginator.length / paginator.pageSize) - 1 || 0; |
| /** @type {?} */ |
| var newPageIndex = Math.min(paginator.pageIndex, lastPageIndex); |
| if (newPageIndex !== paginator.pageIndex) { |
| paginator.pageIndex = newPageIndex; |
| // Since the paginator only emits after user-generated changes, |
| // we need our own stream so we know to should re-render the data. |
| _this._internalPageChanges.next(); |
| } |
| } |
| })); |
| }; |
| /** |
| * 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)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Injection token for the MatInkBar's Positioner. |
| * @type {?} |
| */ |
| var _MAT_INK_BAR_POSITIONER = new core.InjectionToken('MatInkBarPositioner', { |
| providedIn: 'root', |
| factory: _MAT_INK_BAR_POSITIONER_FACTORY |
| }); |
| /** |
| * The default positioner function for the MatInkBar. |
| * \@docs-private |
| * @return {?} |
| */ |
| function _MAT_INK_BAR_POSITIONER_FACTORY() { |
| /** @type {?} */ |
| var method = (/** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { return ({ |
| left: element ? (element.offsetLeft || 0) + 'px' : '0', |
| width: element ? (element.offsetWidth || 0) + 'px' : '0', |
| }); }); |
| return method; |
| } |
| /** |
| * The ink-bar is used to display and animate the line underneath the current active tab label. |
| * \@docs-private |
| */ |
| var MatInkBar = /** @class */ (function () { |
| function MatInkBar(_elementRef, _ngZone, _inkBarPositioner, _animationMode) { |
| this._elementRef = _elementRef; |
| this._ngZone = _ngZone; |
| this._inkBarPositioner = _inkBarPositioner; |
| this._animationMode = _animationMode; |
| } |
| /** |
| * Calculates the styles from the provided element in order to align the ink-bar to that element. |
| * Shows the ink bar if previously set as hidden. |
| * @param element |
| */ |
| /** |
| * 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((/** |
| * @return {?} |
| */ |
| function () { |
| requestAnimationFrame((/** |
| * @return {?} |
| */ |
| 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 |
| */ |
| /** |
| * Sets the proper styles to the ink bar element. |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| MatInkBar.prototype._setStyles = /** |
| * Sets the proper styles to the ink bar element. |
| * @private |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| /** @type {?} */ |
| var positions = this._inkBarPositioner(element); |
| /** @type {?} */ |
| var inkBar = this._elementRef.nativeElement; |
| inkBar.style.left = positions.left; |
| inkBar.style.width = positions.width; |
| }; |
| MatInkBar.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-ink-bar', |
| host: { |
| 'class': 'mat-ink-bar', |
| '[class._mat-animation-noopable]': "_animationMode === 'NoopAnimations'", |
| }, |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatInkBar.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.NgZone }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [_MAT_INK_BAR_POSITIONER,] }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| return MatInkBar; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Decorates the `ng-template` tags and reads out the template from it. |
| */ |
| var MatTabContent = /** @class */ (function () { |
| function MatTabContent(template) { |
| this.template = template; |
| } |
| MatTabContent.decorators = [ |
| { type: core.Directive, args: [{ selector: '[matTabContent]' },] }, |
| ]; |
| /** @nocollapse */ |
| MatTabContent.ctorParameters = function () { return [ |
| { type: core.TemplateRef } |
| ]; }; |
| return MatTabContent; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Used to flag tab labels for use with the portal directive |
| */ |
| var MatTabLabel = /** @class */ (function (_super) { |
| __extends(MatTabLabel, _super); |
| function MatTabLabel() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatTabLabel.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-tab-label], [matTabLabel]', |
| },] }, |
| ]; |
| return MatTabLabel; |
| }(portal.CdkPortal)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatTab. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatTab. |
| /** |
| * \@docs-private |
| */ |
| MatTabBase = /** @class */ (function () { |
| function MatTabBase() { |
| } |
| return MatTabBase; |
| }()); |
| /** @type {?} */ |
| var _MatTabMixinBase = mixinDisabled(MatTabBase); |
| var MatTab = /** @class */ (function (_super) { |
| __extends(MatTab, _super); |
| function MatTab(_viewContainerRef) { |
| var _this = _super.call(this) || this; |
| _this._viewContainerRef = _viewContainerRef; |
| /** |
| * Plain text label for the tab, used when there is no template label. |
| */ |
| _this.textLabel = ''; |
| /** |
| * Portal that will be the hosted content of the tab |
| */ |
| _this._contentPortal = null; |
| /** |
| * Emits whenever the internal state of the tab changes. |
| */ |
| _this._stateChanges = new rxjs.Subject(); |
| /** |
| * The relatively indexed position where 0 represents the center, negative is left, and positive |
| * represents the right. |
| */ |
| _this.position = null; |
| /** |
| * The initial relatively index origin of the tab if it was created and selected after there |
| * was already a selected tab. Provides context of what position the tab should originate from. |
| */ |
| _this.origin = null; |
| /** |
| * Whether the tab is currently active. |
| */ |
| _this.isActive = false; |
| return _this; |
| } |
| Object.defineProperty(MatTab.prototype, "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') || changes.hasOwnProperty('disabled')) { |
| this._stateChanges.next(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTab.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._stateChanges.complete(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTab.prototype.ngOnInit = /** |
| * @return {?} |
| */ |
| function () { |
| this._contentPortal = new portal.TemplatePortal(this._explicitContent || this._implicitContent, 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, |
| exportAs: 'matTab', |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatTab.ctorParameters = function () { return [ |
| { type: core.ViewContainerRef } |
| ]; }; |
| MatTab.propDecorators = { |
| templateLabel: [{ type: core.ContentChild, args: [MatTabLabel, { static: false },] }], |
| _explicitContent: [{ type: core.ContentChild, args: [MatTabContent, { read: core.TemplateRef, static: true },] }], |
| _implicitContent: [{ type: core.ViewChild, args: [core.TemplateRef, { static: true },] }], |
| textLabel: [{ type: core.Input, args: ['label',] }], |
| ariaLabel: [{ type: core.Input, args: ['aria-label',] }], |
| ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }] |
| }; |
| return MatTab; |
| }(_MatTabMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Animations used by the Material tabs. |
| * \@docs-private |
| * @type {?} |
| */ |
| var matTabsAnimations = { |
| /** |
| * Animation translates a tab along the X axis. |
| */ |
| translateTab: animations$1.trigger('translateTab', [ |
| // Note: transitions to `none` instead of 0, because some browsers might blur the content. |
| animations$1.state('center, void, left-origin-center, right-origin-center', animations$1.style({ transform: 'none' })), |
| // If the tab is either on the left or right, we additionally add a `min-height` of 1px |
| // in order to ensure that the element has a height before its state changes. This is |
| // necessary because Chrome does seem to skip the transition in RTL mode if the element does |
| // not have a static height and is not rendered. See related issue: #9465 |
| animations$1.state('left', animations$1.style({ transform: 'translate3d(-100%, 0, 0)', minHeight: '1px' })), |
| animations$1.state('right', animations$1.style({ transform: 'translate3d(100%, 0, 0)', minHeight: '1px' })), |
| animations$1.transition('* => left, * => right, left => center, right => center', animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)')), |
| animations$1.transition('void => left-origin-center', [ |
| animations$1.style({ transform: 'translate3d(-100%, 0, 0)' }), |
| animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)') |
| ]), |
| animations$1.transition('void => right-origin-center', [ |
| animations$1.style({ transform: 'translate3d(100%, 0, 0)' }), |
| animations$1.animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)') |
| ]) |
| ]) |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * The portal host directive for the contents of the tab. |
| * \@docs-private |
| */ |
| var MatTabBodyPortal = /** @class */ (function (_super) { |
| __extends(MatTabBodyPortal, _super); |
| function MatTabBodyPortal(componentFactoryResolver, viewContainerRef, _host) { |
| var _this = _super.call(this, componentFactoryResolver, viewContainerRef) || this; |
| _this._host = _host; |
| /** |
| * Subscription to events for when the tab body begins centering. |
| */ |
| _this._centeringSub = rxjs.Subscription.EMPTY; |
| /** |
| * Subscription to events for when the tab body finishes leaving from center position. |
| */ |
| _this._leavingSub = rxjs.Subscription.EMPTY; |
| return _this; |
| } |
| /** Set initial visibility or set up subscription for changing visibility. */ |
| /** |
| * 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; |
| _super.prototype.ngOnInit.call(this); |
| this._centeringSub = this._host._beforeCentering |
| .pipe(operators.startWith(this._host._isCenterPosition(this._host._position))) |
| .subscribe((/** |
| * @param {?} isCentering |
| * @return {?} |
| */ |
| function (isCentering) { |
| if (isCentering && !_this.hasAttached()) { |
| _this.attach(_this._host._content); |
| } |
| })); |
| this._leavingSub = this._host._afterLeavingCenter.subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this.detach(); |
| })); |
| }; |
| /** Clean up centering subscription. */ |
| /** |
| * Clean up centering subscription. |
| * @return {?} |
| */ |
| MatTabBodyPortal.prototype.ngOnDestroy = /** |
| * Clean up centering subscription. |
| * @return {?} |
| */ |
| function () { |
| _super.prototype.ngOnDestroy.call(this); |
| this._centeringSub.unsubscribe(); |
| 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((/** |
| * @return {?} |
| */ |
| function () { return MatTabBody; })),] }] } |
| ]; }; |
| return MatTabBodyPortal; |
| }(portal.CdkPortalOutlet)); |
| /** |
| * Wrapper for the contents of a tab. |
| * \@docs-private |
| */ |
| var MatTabBody = /** @class */ (function () { |
| function MatTabBody(_elementRef, _dir, changeDetectorRef) { |
| var _this = this; |
| this._elementRef = _elementRef; |
| this._dir = _dir; |
| /** |
| * Subscription to the directionality change observable. |
| */ |
| this._dirChangeSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * Emits when an animation on the tab is complete. |
| */ |
| this._translateTabComplete = new rxjs.Subject(); |
| /** |
| * Event emitted when the tab begins to animate towards the center as the active tab. |
| */ |
| this._onCentering = new core.EventEmitter(); |
| /** |
| * Event emitted before the centering of the tab begins. |
| */ |
| this._beforeCentering = new core.EventEmitter(); |
| /** |
| * Event emitted before the centering of the tab begins. |
| */ |
| this._afterLeavingCenter = new core.EventEmitter(); |
| /** |
| * Event emitted when the tab completes its animation towards the center. |
| */ |
| this._onCentered = new core.EventEmitter(true); |
| // Note that the default value will always be overwritten by `MatTabBody`, but we need one |
| // anyway to prevent the animations module from throwing an error if the body is used on its own. |
| /** |
| * Duration for the tab's animation. |
| */ |
| this.animationDuration = '500ms'; |
| if (_dir) { |
| this._dirChangeSubscription = _dir.change.subscribe((/** |
| * @param {?} dir |
| * @return {?} |
| */ |
| function (dir) { |
| _this._computePositionAnimationState(dir); |
| changeDetectorRef.markForCheck(); |
| })); |
| } |
| // Ensure that we get unique animation events, because the `.done` callback can get |
| // invoked twice in some browsers. See https://github.com/angular/angular/issues/24084. |
| this._translateTabComplete.pipe(operators.distinctUntilChanged((/** |
| * @param {?} x |
| * @param {?} y |
| * @return {?} |
| */ |
| function (x, y) { |
| return x.fromState === y.fromState && x.toState === y.toState; |
| }))).subscribe((/** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| // If the transition to the center is complete, emit an event. |
| if (_this._isCenterPosition(event.toState) && _this._isCenterPosition(_this._position)) { |
| _this._onCentered.emit(); |
| } |
| if (_this._isCenterPosition(event.fromState) && !_this._isCenterPosition(_this._position)) { |
| _this._afterLeavingCenter.emit(); |
| } |
| })); |
| } |
| Object.defineProperty(MatTabBody.prototype, "position", { |
| /** The shifted index position of the tab body, where zero represents the active center tab. */ |
| set: /** |
| * The shifted index position of the tab body, where zero represents the active center tab. |
| * @param {?} position |
| * @return {?} |
| */ |
| function (position) { |
| this._positionIndex = position; |
| this._computePositionAnimationState(); |
| }, |
| 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 != null) { |
| this._position = this._computePositionFromOrigin(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTabBody.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._dirChangeSubscription.unsubscribe(); |
| this._translateTabComplete.complete(); |
| }; |
| /** |
| * @param {?} event |
| * @return {?} |
| */ |
| MatTabBody.prototype._onTranslateTabStarted = /** |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| /** @type {?} */ |
| var isCentering = this._isCenterPosition(event.toState); |
| this._beforeCentering.emit(isCentering); |
| if (isCentering) { |
| this._onCentering.emit(this._elementRef.nativeElement.clientHeight); |
| } |
| }; |
| /** The text direction of the containing app. */ |
| /** |
| * 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'; |
| }; |
| /** Computes the position state that will be used for the tab-body animation trigger. */ |
| /** |
| * Computes the position state that will be used for the tab-body animation trigger. |
| * @private |
| * @param {?=} dir |
| * @return {?} |
| */ |
| MatTabBody.prototype._computePositionAnimationState = /** |
| * Computes the position state that will be used for the tab-body animation trigger. |
| * @private |
| * @param {?=} dir |
| * @return {?} |
| */ |
| function (dir) { |
| if (dir === void 0) { dir = this._getLayoutDirection(); } |
| if (this._positionIndex < 0) { |
| this._position = dir == 'ltr' ? 'left' : 'right'; |
| } |
| else if (this._positionIndex > 0) { |
| this._position = dir == 'ltr' ? 'right' : 'left'; |
| } |
| else { |
| this._position = 'center'; |
| } |
| }; |
| /** |
| * Computes the position state based on the specified origin position. This is used if the |
| * tab is becoming visible immediately after creation. |
| */ |
| /** |
| * Computes the position state based on the specified origin position. This is used if the |
| * tab is becoming visible immediately after creation. |
| * @private |
| * @return {?} |
| */ |
| MatTabBody.prototype._computePositionFromOrigin = /** |
| * Computes the position state based on the specified origin position. This is used if the |
| * tab is becoming visible immediately after creation. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var dir = this._getLayoutDirection(); |
| if ((dir == 'ltr' && this.origin <= 0) || (dir == 'rtl' && this.origin > 0)) { |
| return 'left-origin-center'; |
| } |
| return 'right-origin-center'; |
| }; |
| MatTabBody.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-tab-body', |
| template: "<div class=\"mat-tab-body-content\" #content [@translateTab]=\"{ value: _position, params: {animationDuration: animationDuration} }\" (@translateTab.start)=\"_onTranslateTabStarted($event)\" (@translateTab.done)=\"_translateTabComplete.next($event)\"><ng-template matTabBodyHost></ng-template></div>", |
| styles: [".mat-tab-body-content{height:100%;overflow:auto}.mat-tab-group-dynamic-height .mat-tab-body-content{overflow:hidden}"], |
| encapsulation: core.ViewEncapsulation.None, |
| 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 }] }, |
| { type: core.ChangeDetectorRef } |
| ]; }; |
| MatTabBody.propDecorators = { |
| _onCentering: [{ type: core.Output }], |
| _beforeCentering: [{ type: core.Output }], |
| _afterLeavingCenter: [{ type: core.Output }], |
| _onCentered: [{ type: core.Output }], |
| _portalHost: [{ type: core.ViewChild, args: [portal.PortalHostDirective, { static: false },] }], |
| _content: [{ type: core.Input, args: ['content',] }], |
| origin: [{ type: core.Input }], |
| animationDuration: [{ type: core.Input }], |
| position: [{ type: core.Input }] |
| }; |
| return MatTabBody; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatTabLabelWrapper. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatTabLabelWrapper. |
| /** |
| * \@docs-private |
| */ |
| MatTabLabelWrapperBase = /** @class */ (function () { |
| function MatTabLabelWrapperBase() { |
| } |
| return MatTabLabelWrapperBase; |
| }()); |
| /** @type {?} */ |
| var _MatTabLabelWrapperMixinBase = mixinDisabled(MatTabLabelWrapperBase); |
| /** |
| * Used in the `mat-tab-group` view to display tab labels. |
| * \@docs-private |
| */ |
| var MatTabLabelWrapper = /** @class */ (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', |
| '[attr.aria-disabled]': '!!disabled', |
| } |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatTabLabelWrapper.ctorParameters = function () { return [ |
| { type: core.ElementRef } |
| ]; }; |
| return MatTabLabelWrapper; |
| }(_MatTabLabelWrapperMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Config used to bind passive event listeners |
| * @type {?} |
| */ |
| var passiveEventListenerOptions$1 = (/** @type {?} */ (platform.normalizePassiveListenerOptions({ passive: true }))); |
| /** |
| * 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. |
| * @type {?} |
| */ |
| var EXAGGERATED_OVERSCROLL = 60; |
| /** |
| * Amount of milliseconds to wait before starting to scroll the header automatically. |
| * Set a little conservatively in order to handle fake events dispatched on touch devices. |
| * @type {?} |
| */ |
| var HEADER_SCROLL_DELAY = 650; |
| /** |
| * Interval in milliseconds at which to scroll the header |
| * while the user is holding their pointer. |
| * @type {?} |
| */ |
| var HEADER_SCROLL_INTERVAL = 100; |
| /** |
| * Base class for a tab header that supported pagination. |
| * @abstract |
| */ |
| var MatPaginatedTabHeader = /** @class */ (function () { |
| function MatPaginatedTabHeader(_elementRef, _changeDetectorRef, _viewportRuler, _dir, _ngZone, _platform, _animationMode) { |
| var _this = this; |
| this._elementRef = _elementRef; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._viewportRuler = _viewportRuler; |
| this._dir = _dir; |
| this._ngZone = _ngZone; |
| this._platform = _platform; |
| this._animationMode = _animationMode; |
| /** |
| * 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; |
| /** |
| * Emits when the component is destroyed. |
| */ |
| this._destroyed = new rxjs.Subject(); |
| /** |
| * 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; |
| /** |
| * Stream that will stop the automated scrolling. |
| */ |
| this._stopScrolling = new rxjs.Subject(); |
| 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(); |
| // Bind the `mouseleave` event on the outside since it doesn't change anything in the view. |
| _ngZone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| function () { |
| rxjs.fromEvent(_elementRef.nativeElement, 'mouseleave') |
| .pipe(operators.takeUntil(_this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._stopInterval(); |
| })); |
| })); |
| } |
| Object.defineProperty(MatPaginatedTabHeader.prototype, "selectedIndex", { |
| /** The index of the active tab. */ |
| get: /** |
| * The index of the active tab. |
| * @return {?} |
| */ |
| function () { return this._selectedIndex; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| value = coercion.coerceNumberProperty(value); |
| if (this._selectedIndex != value) { |
| this._selectedIndexChanged = true; |
| this._selectedIndex = value; |
| if (this._keyManager) { |
| this._keyManager.updateActiveItemIndex(value); |
| } |
| } |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype.ngAfterViewInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| // We need to handle these events manually, because we want to bind passive event listeners. |
| rxjs.fromEvent(this._previousPaginator.nativeElement, 'touchstart', passiveEventListenerOptions$1) |
| .pipe(operators.takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._handlePaginatorPress('before'); |
| })); |
| rxjs.fromEvent(this._nextPaginator.nativeElement, 'touchstart', passiveEventListenerOptions$1) |
| .pipe(operators.takeUntil(this._destroyed)) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| _this._handlePaginatorPress('after'); |
| })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| /** @type {?} */ |
| var dirChange = this._dir ? this._dir.change : rxjs.of(null); |
| /** @type {?} */ |
| var resize = this._viewportRuler.change(150); |
| /** @type {?} */ |
| var realign = (/** |
| * @return {?} |
| */ |
| function () { |
| _this.updatePagination(); |
| _this._alignInkBarToSelectedTab(); |
| }); |
| this._keyManager = new a11y.FocusKeyManager(this._items) |
| .withHorizontalOrientation(this._getLayoutDirection()) |
| .withWrap(); |
| this._keyManager.updateActiveItem(0); |
| // 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(); |
| // On dir change or window resize, realign the ink bar and update the orientation of |
| // the key manager if the direction has changed. |
| rxjs.merge(dirChange, resize, this._items.changes).pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| realign(); |
| _this._keyManager.withHorizontalOrientation(_this._getLayoutDirection()); |
| })); |
| // If there is a change in the focus key manager we need to emit the `indexFocused` |
| // event in order to provide a public event that notifies about focus changes. Also we realign |
| // the tabs container by scrolling the new focused tab into the visible section. |
| this._keyManager.change.pipe(operators.takeUntil(this._destroyed)).subscribe((/** |
| * @param {?} newFocusIndex |
| * @return {?} |
| */ |
| function (newFocusIndex) { |
| _this.indexFocused.emit(newFocusIndex); |
| _this._setTabFocus(newFocusIndex); |
| })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype.ngAfterContentChecked = /** |
| * @return {?} |
| */ |
| function () { |
| // If the number of tab labels have changed, check if scrolling should be enabled |
| if (this._tabLabelCount != this._items.length) { |
| this.updatePagination(); |
| this._tabLabelCount = this._items.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(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._destroyed.next(); |
| this._destroyed.complete(); |
| this._stopScrolling.complete(); |
| }; |
| /** Handles keyboard events on the header. */ |
| /** |
| * Handles keyboard events on the header. |
| * @param {?} event |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype._handleKeydown = /** |
| * Handles keyboard events on the header. |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| // We don't handle any key bindings with a modifier key. |
| if (keycodes.hasModifierKey(event)) { |
| return; |
| } |
| switch (event.keyCode) { |
| case keycodes.HOME: |
| this._keyManager.setFirstItemActive(); |
| event.preventDefault(); |
| break; |
| case keycodes.END: |
| this._keyManager.setLastItemActive(); |
| event.preventDefault(); |
| break; |
| case keycodes.ENTER: |
| case keycodes.SPACE: |
| this.selectFocusedIndex.emit(this.focusIndex); |
| this._itemSelected(event); |
| break; |
| default: |
| this._keyManager.onKeydown(event); |
| } |
| }; |
| /** |
| * Callback for when the MutationObserver detects that the content has changed. |
| */ |
| /** |
| * Callback for when the MutationObserver detects that the content has changed. |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype._onContentChanges = /** |
| * Callback for when the MutationObserver detects that the content has changed. |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| /** @type {?} */ |
| var textContent = this._elementRef.nativeElement.textContent; |
| // We need to diff the text content of the header, because the MutationObserver callback |
| // will fire even if the text content didn't change which is inefficient and is prone |
| // to infinite loops if a poorly constructed expression is passed in (see #14249). |
| if (textContent !== this._currentTextContent) { |
| this._currentTextContent = textContent || ''; |
| // The content observer runs outside the `NgZone` by default, which |
| // means that we need to bring the callback back in ourselves. |
| this._ngZone.run((/** |
| * @return {?} |
| */ |
| function () { |
| _this.updatePagination(); |
| _this._alignInkBarToSelectedTab(); |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| } |
| }; |
| /** |
| * Updates the view whether pagination should be enabled or not. |
| * |
| * WARNING: Calling this method can be very costly in terms of performance. It should be called |
| * as infrequently as possible from outside of the Tabs component as it causes a reflow of the |
| * page. |
| */ |
| /** |
| * Updates the view whether pagination should be enabled or not. |
| * |
| * WARNING: Calling this method can be very costly in terms of performance. It should be called |
| * as infrequently as possible from outside of the Tabs component as it causes a reflow of the |
| * page. |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype.updatePagination = /** |
| * Updates the view whether pagination should be enabled or not. |
| * |
| * WARNING: Calling this method can be very costly in terms of performance. It should be called |
| * as infrequently as possible from outside of the Tabs component as it causes a reflow of the |
| * page. |
| * @return {?} |
| */ |
| function () { |
| this._checkPaginationEnabled(); |
| this._checkScrollingControls(); |
| this._updateTabScrollPosition(); |
| }; |
| Object.defineProperty(MatPaginatedTabHeader.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._keyManager ? (/** @type {?} */ (this._keyManager.activeItemIndex)) : 0; |
| }, |
| /** 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 || !this._keyManager) { |
| return; |
| } |
| this._keyManager.setActiveItem(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 {?} |
| */ |
| MatPaginatedTabHeader.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._items) { |
| return true; |
| } |
| /** @type {?} */ |
| var tab = this._items ? this._items.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 {?} |
| */ |
| MatPaginatedTabHeader.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._items && this._items.length) { |
| this._items.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. |
| /** @type {?} */ |
| var containerEl = this._tabListContainer.nativeElement; |
| /** @type {?} */ |
| var dir = this._getLayoutDirection(); |
| if (dir == 'ltr') { |
| containerEl.scrollLeft = 0; |
| } |
| else { |
| containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth; |
| } |
| } |
| }; |
| /** The layout direction of the containing app. */ |
| /** |
| * The layout direction of the containing app. |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.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 {?} |
| */ |
| MatPaginatedTabHeader.prototype._updateTabScrollPosition = /** |
| * Performs the CSS transformation on the tab list that will cause the list to scroll. |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var scrollDistance = this.scrollDistance; |
| /** @type {?} */ |
| var platform$$1 = this._platform; |
| /** @type {?} */ |
| var translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance; |
| // Don't use `translate3d` here because we don't want to create a new layer. A new layer |
| // seems to cause flickering and overflow in Internet Explorer. For example, the ink bar |
| // and ripples will exceed the boundaries of the visible tab bar. |
| // See: https://github.com/angular/components/issues/10276 |
| // We round the `transform` here, because transforms with sub-pixel precision cause some |
| // browsers to blur the content of the element. |
| this._tabList.nativeElement.style.transform = "translateX(" + Math.round(translateX) + "px)"; |
| // Setting the `transform` on IE will change the scroll offset of the parent, causing the |
| // position to be thrown off in some cases. We have to reset it ourselves to ensure that |
| // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing |
| // with the scroll position throws off Chrome 71+ in RTL mode (see #14689). |
| // @breaking-change 9.0.0 Remove null check for `platform` after it can no longer be undefined. |
| if (platform$$1 && (platform$$1.TRIDENT || platform$$1.EDGE)) { |
| this._tabListContainer.nativeElement.scrollLeft = 0; |
| } |
| }; |
| Object.defineProperty(MatPaginatedTabHeader.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 {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._scrollTo(value); |
| }, |
| 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 {?} direction |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.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 {?} direction |
| * @return {?} |
| */ |
| function (direction) { |
| /** @type {?} */ |
| var viewLength = this._tabListContainer.nativeElement.offsetWidth; |
| // Move the scroll distance one-third the length of the tab list's viewport. |
| /** @type {?} */ |
| var scrollAmount = (direction == 'before' ? -1 : 1) * viewLength / 3; |
| return this._scrollTo(this._scrollDistance + scrollAmount); |
| }; |
| /** Handles click events on the pagination arrows. */ |
| /** |
| * Handles click events on the pagination arrows. |
| * @param {?} direction |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype._handlePaginatorClick = /** |
| * Handles click events on the pagination arrows. |
| * @param {?} direction |
| * @return {?} |
| */ |
| function (direction) { |
| this._stopInterval(); |
| this._scrollHeader(direction); |
| }; |
| /** |
| * 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 {?} |
| */ |
| MatPaginatedTabHeader.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) { |
| /** @type {?} */ |
| var selectedLabel = this._items ? this._items.toArray()[labelIndex] : null; |
| if (!selectedLabel) { |
| return; |
| } |
| // The view length is the visible width of the tab labels. |
| /** @type {?} */ |
| var viewLength = this._tabListContainer.nativeElement.offsetWidth; |
| var _a = selectedLabel.elementRef.nativeElement, offsetLeft = _a.offsetLeft, offsetWidth = _a.offsetWidth; |
| /** @type {?} */ |
| var labelBeforePos; |
| /** @type {?} */ |
| var labelAfterPos; |
| if (this._getLayoutDirection() == 'ltr') { |
| labelBeforePos = offsetLeft; |
| labelAfterPos = labelBeforePos + offsetWidth; |
| } |
| else { |
| labelAfterPos = this._tabList.nativeElement.offsetWidth - offsetLeft; |
| labelBeforePos = labelAfterPos - offsetWidth; |
| } |
| /** @type {?} */ |
| var beforeVisiblePos = this.scrollDistance; |
| /** @type {?} */ |
| var afterVisiblePos = this.scrollDistance + viewLength; |
| if (labelBeforePos < beforeVisiblePos) { |
| // Scroll header to move label to the before direction |
| this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL; |
| } |
| else if (labelAfterPos > afterVisiblePos) { |
| // Scroll header to move label to the after direction |
| this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL; |
| } |
| }; |
| /** |
| * Evaluate whether the pagination controls should be displayed. If the scroll width of the |
| * tab list is wider than the size of the header container, then the pagination controls should |
| * be shown. |
| * |
| * This is an expensive call that forces a layout reflow to compute box and scroll metrics and |
| * should be called sparingly. |
| */ |
| /** |
| * 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 {?} |
| */ |
| MatPaginatedTabHeader.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 () { |
| /** @type {?} */ |
| var 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 {?} |
| */ |
| MatPaginatedTabHeader.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 {?} |
| */ |
| MatPaginatedTabHeader.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 () { |
| /** @type {?} */ |
| var lengthOfTabList = this._tabList.nativeElement.scrollWidth; |
| /** @type {?} */ |
| var viewLength = this._tabListContainer.nativeElement.offsetWidth; |
| return (lengthOfTabList - viewLength) || 0; |
| }; |
| /** Tells the ink-bar to align itself to the current label wrapper */ |
| /** |
| * Tells the ink-bar to align itself to the current label wrapper |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype._alignInkBarToSelectedTab = /** |
| * Tells the ink-bar to align itself to the current label wrapper |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var selectedItem = this._items && this._items.length ? |
| this._items.toArray()[this.selectedIndex] : null; |
| /** @type {?} */ |
| var selectedLabelWrapper = selectedItem ? selectedItem.elementRef.nativeElement : null; |
| if (selectedLabelWrapper) { |
| this._inkBar.alignToElement(selectedLabelWrapper); |
| } |
| else { |
| this._inkBar.hide(); |
| } |
| }; |
| /** Stops the currently-running paginator interval. */ |
| /** |
| * Stops the currently-running paginator interval. |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype._stopInterval = /** |
| * Stops the currently-running paginator interval. |
| * @return {?} |
| */ |
| function () { |
| this._stopScrolling.next(); |
| }; |
| /** |
| * Handles the user pressing down on one of the paginators. |
| * Starts scrolling the header after a certain amount of time. |
| * @param direction In which direction the paginator should be scrolled. |
| */ |
| /** |
| * Handles the user pressing down on one of the paginators. |
| * Starts scrolling the header after a certain amount of time. |
| * @param {?} direction In which direction the paginator should be scrolled. |
| * @return {?} |
| */ |
| MatPaginatedTabHeader.prototype._handlePaginatorPress = /** |
| * Handles the user pressing down on one of the paginators. |
| * Starts scrolling the header after a certain amount of time. |
| * @param {?} direction In which direction the paginator should be scrolled. |
| * @return {?} |
| */ |
| function (direction) { |
| var _this = this; |
| // Avoid overlapping timers. |
| this._stopInterval(); |
| // Start a timer after the delay and keep firing based on the interval. |
| rxjs.timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL) |
| // Keep the timer going until something tells it to stop or the component is destroyed. |
| .pipe(operators.takeUntil(rxjs.merge(this._stopScrolling, this._destroyed))) |
| .subscribe((/** |
| * @return {?} |
| */ |
| function () { |
| var _a = _this._scrollHeader(direction), maxScrollDistance = _a.maxScrollDistance, distance = _a.distance; |
| // Stop the timer if we've reached the start or the end. |
| if (distance === 0 || distance >= maxScrollDistance) { |
| _this._stopInterval(); |
| } |
| })); |
| }; |
| /** |
| * Scrolls the header to a given position. |
| * @param position Position to which to scroll. |
| * @returns Information on the current scroll distance and the maximum. |
| */ |
| /** |
| * Scrolls the header to a given position. |
| * @private |
| * @param {?} position Position to which to scroll. |
| * @return {?} Information on the current scroll distance and the maximum. |
| */ |
| MatPaginatedTabHeader.prototype._scrollTo = /** |
| * Scrolls the header to a given position. |
| * @private |
| * @param {?} position Position to which to scroll. |
| * @return {?} Information on the current scroll distance and the maximum. |
| */ |
| function (position) { |
| /** @type {?} */ |
| var maxScrollDistance = this._getMaxScrollDistance(); |
| this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position)); |
| // 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(); |
| return { maxScrollDistance: maxScrollDistance, distance: this._scrollDistance }; |
| }; |
| /** @nocollapse */ |
| MatPaginatedTabHeader.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: core.ChangeDetectorRef }, |
| { type: scrolling.ViewportRuler }, |
| { type: bidi.Directionality, decorators: [{ type: core.Optional }] }, |
| { type: core.NgZone }, |
| { type: platform.Platform }, |
| { type: String } |
| ]; }; |
| return MatPaginatedTabHeader; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * 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 = /** @class */ (function (_super) { |
| __extends(MatTabHeader, _super); |
| function MatTabHeader(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform$$1, |
| // @breaking-change 9.0.0 `_animationMode` parameter to be made required. |
| animationMode) { |
| var _this = _super.call(this, elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform$$1, animationMode) || this; |
| _this._disableRipple = false; |
| return _this; |
| } |
| Object.defineProperty(MatTabHeader.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 |
| }); |
| /** |
| * @protected |
| * @param {?} event |
| * @return {?} |
| */ |
| MatTabHeader.prototype._itemSelected = /** |
| * @protected |
| * @param {?} event |
| * @return {?} |
| */ |
| function (event) { |
| event.preventDefault(); |
| }; |
| 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\" #previousPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\" (click)=\"_handlePaginatorClick('before')\" (mousedown)=\"_handlePaginatorPress('before')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div><div class=\"mat-tab-label-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\"><div #tabList class=\"mat-tab-list\" [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\" 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\" #nextPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\" (mousedown)=\"_handlePaginatorPress('after')\" (click)=\"_handlePaginatorClick('after')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div>", |
| styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-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-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-ink-bar{transition:none;animation:none}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}.mat-tab-labels{display:flex}[mat-align-tabs=center] .mat-tab-labels{justify-content:center}[mat-align-tabs=end] .mat-tab-labels{justify-content:flex-end}.mat-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}._mat-animation-noopable.mat-tab-list{transition:none;animation:none}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{min-width:72px}}"], |
| inputs: ['selectedIndex'], |
| outputs: ['selectFocusedIndex', 'indexFocused'], |
| encapsulation: core.ViewEncapsulation.None, |
| 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 }] }, |
| { type: core.NgZone }, |
| { type: platform.Platform }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatTabHeader.propDecorators = { |
| _items: [{ type: core.ContentChildren, args: [MatTabLabelWrapper,] }], |
| _inkBar: [{ type: core.ViewChild, args: [MatInkBar, { static: true },] }], |
| _tabListContainer: [{ type: core.ViewChild, args: ['tabListContainer', { static: true },] }], |
| _tabList: [{ type: core.ViewChild, args: ['tabList', { static: true },] }], |
| _nextPaginator: [{ type: core.ViewChild, args: ['nextPaginator', { static: false },] }], |
| _previousPaginator: [{ type: core.ViewChild, args: ['previousPaginator', { static: false },] }], |
| disableRipple: [{ type: core.Input }] |
| }; |
| return MatTabHeader; |
| }(MatPaginatedTabHeader)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Used to generate unique ID's for each tab component |
| * @type {?} |
| */ |
| var nextId$1 = 0; |
| /** |
| * A simple change event emitted on focus or selection changes. |
| */ |
| var /** |
| * A simple change event emitted on focus or selection changes. |
| */ |
| MatTabChangeEvent = /** @class */ (function () { |
| function MatTabChangeEvent() { |
| } |
| return MatTabChangeEvent; |
| }()); |
| /** |
| * Injection token that can be used to provide the default options the tabs module. |
| * @type {?} |
| */ |
| var MAT_TABS_CONFIG = new core.InjectionToken('MAT_TABS_CONFIG'); |
| // Boilerplate for applying mixins to MatTabGroup. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatTabGroup. |
| /** |
| * \@docs-private |
| */ |
| MatTabGroupBase = /** @class */ (function () { |
| function MatTabGroupBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatTabGroupBase; |
| }()); |
| /** @type {?} */ |
| 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://material.io/design/components/tabs.html |
| */ |
| var MatTabGroup = /** @class */ (function (_super) { |
| __extends(MatTabGroup, _super); |
| function MatTabGroup(elementRef, _changeDetectorRef, defaultConfig, _animationMode) { |
| var _this = _super.call(this, elementRef) || this; |
| _this._changeDetectorRef = _changeDetectorRef; |
| _this._animationMode = _animationMode; |
| /** |
| * The tab index that should be selected after the content has been checked. |
| */ |
| _this._indexToSelect = 0; |
| /** |
| * Snapshot of the height of the tab body wrapper before another tab is activated. |
| */ |
| _this._tabBodyWrapperHeight = 0; |
| /** |
| * Subscription to tabs being added/removed. |
| */ |
| _this._tabsSubscription = rxjs.Subscription.EMPTY; |
| /** |
| * Subscription to changes in the tab labels. |
| */ |
| _this._tabLabelSubscription = rxjs.Subscription.EMPTY; |
| _this._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); |
| _this._groupId = nextId$1++; |
| _this.animationDuration = defaultConfig && defaultConfig.animationDuration ? |
| defaultConfig.animationDuration : '500ms'; |
| return _this; |
| } |
| Object.defineProperty(MatTabGroup.prototype, "dynamicHeight", { |
| /** Whether the tab group should grow to the size of the active tab. */ |
| 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, "selectedIndex", { |
| /** The index of the active tab. */ |
| 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, "animationDuration", { |
| /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */ |
| get: /** |
| * Duration for the tab animation. Will be normalized to milliseconds if no units are set. |
| * @return {?} |
| */ |
| function () { return this._animationDuration; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatTabGroup.prototype, "backgroundColor", { |
| /** Background color of the tab group. */ |
| get: /** |
| * Background color of the tab group. |
| * @return {?} |
| */ |
| function () { return this._backgroundColor; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var 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; |
| // Don't clamp the `indexToSelect` immediately in the setter because it can happen that |
| // the amount of tabs changes before the actual change detection runs. |
| /** @type {?} */ |
| var indexToSelect = this._indexToSelect = this._clampTabIndex(this._indexToSelect); |
| // If there is a change in selected index, emit a change event. Should not trigger if |
| // the selected index has not yet been initialized. |
| if (this._selectedIndex != indexToSelect) { |
| /** @type {?} */ |
| var isFirstRun_1 = this._selectedIndex == null; |
| if (!isFirstRun_1) { |
| this.selectedTabChange.emit(this._createChangeEvent(indexToSelect)); |
| } |
| // Changing these values after change detection has run |
| // since the checked content may contain references to them. |
| Promise.resolve().then((/** |
| * @return {?} |
| */ |
| function () { |
| _this._tabs.forEach((/** |
| * @param {?} tab |
| * @param {?} index |
| * @return {?} |
| */ |
| function (tab, index) { return tab.isActive = index === indexToSelect; })); |
| if (!isFirstRun_1) { |
| _this.selectedIndexChange.emit(indexToSelect); |
| } |
| })); |
| } |
| // Setup the position for each tab and optionally setup an origin on the next selected tab. |
| this._tabs.forEach((/** |
| * @param {?} tab |
| * @param {?} index |
| * @return {?} |
| */ |
| function (tab, index) { |
| tab.position = index - indexToSelect; |
| // If there is already a selected tab, then set up an origin for the next selected tab |
| // if it doesn't have one already. |
| if (_this._selectedIndex != null && tab.position == 0 && !tab.origin) { |
| tab.origin = indexToSelect - _this._selectedIndex; |
| } |
| })); |
| if (this._selectedIndex !== indexToSelect) { |
| this._selectedIndex = indexToSelect; |
| this._changeDetectorRef.markForCheck(); |
| } |
| }; |
| /** |
| * @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((/** |
| * @return {?} |
| */ |
| function () { |
| /** @type {?} */ |
| var indexToSelect = _this._clampTabIndex(_this._indexToSelect); |
| // Maintain the previously-selected tab if a new tab is added or removed and there is no |
| // explicit change that selects a different tab. |
| if (indexToSelect === _this._selectedIndex) { |
| /** @type {?} */ |
| var tabs = _this._tabs.toArray(); |
| for (var i = 0; i < tabs.length; i++) { |
| if (tabs[i].isActive) { |
| // Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed |
| // event, otherwise the consumer may end up in an infinite loop in some edge cases like |
| // adding a tab within the `selectedIndexChange` event. |
| _this._indexToSelect = _this._selectedIndex = i; |
| break; |
| } |
| } |
| } |
| _this._subscribeToTabLabels(); |
| _this._changeDetectorRef.markForCheck(); |
| })); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTabGroup.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._tabsSubscription.unsubscribe(); |
| this._tabLabelSubscription.unsubscribe(); |
| }; |
| /** Re-aligns the ink bar to the selected tab element. */ |
| /** |
| * Re-aligns the ink bar to the selected tab element. |
| * @return {?} |
| */ |
| MatTabGroup.prototype.realignInkBar = /** |
| * Re-aligns the ink bar to the selected tab element. |
| * @return {?} |
| */ |
| function () { |
| if (this._tabHeader) { |
| this._tabHeader._alignInkBarToSelectedTab(); |
| } |
| }; |
| /** |
| * @param {?} index |
| * @return {?} |
| */ |
| MatTabGroup.prototype._focusChanged = /** |
| * @param {?} index |
| * @return {?} |
| */ |
| function (index) { |
| this.focusChange.emit(this._createChangeEvent(index)); |
| }; |
| /** |
| * @private |
| * @param {?} index |
| * @return {?} |
| */ |
| MatTabGroup.prototype._createChangeEvent = /** |
| * @private |
| * @param {?} index |
| * @return {?} |
| */ |
| function (index) { |
| /** @type {?} */ |
| var event = new MatTabChangeEvent; |
| event.index = index; |
| if (this._tabs && this._tabs.length) { |
| event.tab = this._tabs.toArray()[index]; |
| } |
| return event; |
| }; |
| /** |
| * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is |
| * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the |
| * binding to be updated, we need to subscribe to changes in it and trigger change detection |
| * manually. |
| */ |
| /** |
| * 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. |
| * @private |
| * @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. |
| * @private |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._tabLabelSubscription) { |
| this._tabLabelSubscription.unsubscribe(); |
| } |
| this._tabLabelSubscription = rxjs.merge.apply(void 0, this._tabs.map((/** |
| * @param {?} tab |
| * @return {?} |
| */ |
| function (tab) { return tab._stateChanges; }))).subscribe((/** |
| * @return {?} |
| */ |
| function () { return _this._changeDetectorRef.markForCheck(); })); |
| }; |
| /** Clamps the given index to the bounds of 0 and the tabs length. */ |
| /** |
| * Clamps the given index to the bounds of 0 and the tabs length. |
| * @private |
| * @param {?} index |
| * @return {?} |
| */ |
| MatTabGroup.prototype._clampTabIndex = /** |
| * Clamps the given index to the bounds of 0 and the tabs length. |
| * @private |
| * @param {?} index |
| * @return {?} |
| */ |
| function (index) { |
| // 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). |
| return Math.min(this._tabs.length - 1, Math.max(index || 0, 0)); |
| }; |
| /** 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; |
| } |
| /** @type {?} */ |
| var 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 () { |
| /** @type {?} */ |
| var wrapper = this._tabBodyWrapper.nativeElement; |
| this._tabBodyWrapperHeight = wrapper.clientHeight; |
| wrapper.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 {?} index |
| * @return {?} |
| */ |
| MatTabGroup.prototype._handleClick = /** |
| * Handle click events, setting new selected index if appropriate. |
| * @param {?} tab |
| * @param {?} tabHeader |
| * @param {?} index |
| * @return {?} |
| */ |
| function (tab, tabHeader, index) { |
| if (!tab.disabled) { |
| this.selectedIndex = tabHeader.focusIndex = index; |
| } |
| }; |
| /** 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 cdkMonitorElementFocus *ngFor=\"let tab of _tabs; let i = index\" [id]=\"_getTabLabelId(i)\" [attr.tabIndex]=\"_getTabIndex(tab, i)\" [attr.aria-posinset]=\"i + 1\" [attr.aria-setsize]=\"_tabs.length\" [attr.aria-controls]=\"_getTabContentId(i)\" [attr.aria-selected]=\"selectedIndex == i\" [attr.aria-label]=\"tab.ariaLabel || null\" [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\" [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\" [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\" #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\" [animationDuration]=\"animationDuration\" (_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}@media (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{padding:0 12px}}@media (max-width:959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height .5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-tab-body-wrapper{transition:none;animation:none}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}"], |
| encapsulation: core.ViewEncapsulation.None, |
| 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 }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [MAT_TABS_CONFIG,] }, { type: core.Optional }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatTabGroup.propDecorators = { |
| _tabs: [{ type: core.ContentChildren, args: [MatTab,] }], |
| _tabBodyWrapper: [{ type: core.ViewChild, args: ['tabBodyWrapper', { static: false },] }], |
| _tabHeader: [{ type: core.ViewChild, args: ['tabHeader', { static: false },] }], |
| dynamicHeight: [{ type: core.Input }], |
| selectedIndex: [{ type: core.Input }], |
| headerPosition: [{ type: core.Input }], |
| animationDuration: [{ type: core.Input }], |
| backgroundColor: [{ type: core.Input }], |
| selectedIndexChange: [{ type: core.Output }], |
| focusChange: [{ type: core.Output }], |
| animationDone: [{ type: core.Output }], |
| selectedTabChange: [{ type: core.Output }] |
| }; |
| return MatTabGroup; |
| }(_MatTabGroupMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Navigation component matching the styles of the tab group header. |
| * Provides anchored navigation with animated ink bar. |
| */ |
| var MatTabNav = /** @class */ (function (_super) { |
| __extends(MatTabNav, _super); |
| function MatTabNav(elementRef, dir, ngZone, changeDetectorRef, viewportRuler, |
| /** |
| * @deprecated @breaking-change 9.0.0 `platform` parameter to become required. |
| */ |
| platform$$1, animationMode) { |
| var _this = _super.call(this, elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform$$1, animationMode) || this; |
| _this._disableRipple = false; |
| /** |
| * Theme color of the nav bar. |
| */ |
| _this.color = 'primary'; |
| return _this; |
| } |
| Object.defineProperty(MatTabNav.prototype, "backgroundColor", { |
| /** Background color of the tab nav. */ |
| get: /** |
| * Background color of the tab nav. |
| * @return {?} |
| */ |
| function () { return this._backgroundColor; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| /** @type {?} */ |
| var classList = this._elementRef.nativeElement.classList; |
| classList.remove("mat-background-" + this.backgroundColor); |
| if (value) { |
| classList.add("mat-background-" + value); |
| } |
| this._backgroundColor = value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| Object.defineProperty(MatTabNav.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 |
| }); |
| /** |
| * @protected |
| * @return {?} |
| */ |
| MatTabNav.prototype._itemSelected = /** |
| * @protected |
| * @return {?} |
| */ |
| function () { |
| // noop |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTabNav.prototype.ngAfterContentInit = /** |
| * @return {?} |
| */ |
| function () { |
| this.updateActiveLink(); |
| _super.prototype.ngAfterContentInit.call(this); |
| }; |
| /** |
| * Notifies the component that the active link has been changed. |
| * @breaking-change 8.0.0 `element` parameter to be removed. |
| */ |
| /** |
| * Notifies the component that the active link has been changed. |
| * \@breaking-change 8.0.0 `element` parameter to be removed. |
| * @param {?=} _element |
| * @return {?} |
| */ |
| MatTabNav.prototype.updateActiveLink = /** |
| * Notifies the component that the active link has been changed. |
| * \@breaking-change 8.0.0 `element` parameter to be removed. |
| * @param {?=} _element |
| * @return {?} |
| */ |
| function (_element) { |
| if (!this._items) { |
| return; |
| } |
| /** @type {?} */ |
| var items = this._items.toArray(); |
| for (var i = 0; i < items.length; i++) { |
| if (items[i].active) { |
| this.selectedIndex = i; |
| this._changeDetectorRef.markForCheck(); |
| return; |
| } |
| } |
| // The ink bar should hide itself if no items are active. |
| this.selectedIndex = -1; |
| this._inkBar.hide(); |
| }; |
| MatTabNav.decorators = [ |
| { type: core.Component, args: [{selector: '[mat-tab-nav-bar]', |
| exportAs: 'matTabNavBar, matTabNav', |
| inputs: ['color'], |
| template: "<div class=\"mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4\" #previousPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollBefore || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollBefore\" (click)=\"_handlePaginatorClick('before')\" (mousedown)=\"_handlePaginatorPress('before')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div><div class=\"mat-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\"><div class=\"mat-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\"><div class=\"mat-tab-links\"><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\" #nextPaginator aria-hidden=\"true\" mat-ripple [matRippleDisabled]=\"_disableScrollAfter || disableRipple\" [class.mat-tab-header-pagination-disabled]=\"_disableScrollAfter\" (mousedown)=\"_handlePaginatorPress('after')\" (click)=\"_handlePaginatorClick('after')\" (touchend)=\"_stopInterval()\"><div class=\"mat-tab-header-pagination-chevron\"></div></div>", |
| styles: [".mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-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-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-tab-links{display:flex}[mat-align-tabs=center] .mat-tab-links{justify-content:center}[mat-align-tabs=end] .mat-tab-links{justify-content:flex-end}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-ink-bar{transition:none;animation:none}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}.mat-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mat-tab-link{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;vertical-align:top;text-decoration:none;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}.mat-tab-link:focus{outline:0}.mat-tab-link:focus:not(.mat-tab-disabled){opacity:1}@media (-ms-high-contrast:active){.mat-tab-link:focus{outline:dotted 2px}}.mat-tab-link.mat-tab-disabled{cursor:default}@media (-ms-high-contrast:active){.mat-tab-link.mat-tab-disabled{opacity:.5}}.mat-tab-link .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media (-ms-high-contrast:active){.mat-tab-link{opacity:1}}[mat-stretch-tabs] .mat-tab-link{flex-basis:0;flex-grow:1}.mat-tab-link.mat-tab-disabled{pointer-events:none}@media (max-width:599px){.mat-tab-link{min-width:72px}}"], |
| host: { |
| 'class': 'mat-tab-nav-bar mat-tab-header', |
| '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls', |
| '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'", |
| '[class.mat-primary]': 'color !== "warn" && color !== "accent"', |
| '[class.mat-accent]': 'color === "accent"', |
| '[class.mat-warn]': 'color === "warn"', |
| }, |
| encapsulation: core.ViewEncapsulation.None, |
| 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 }, |
| { type: platform.Platform, decorators: [{ type: core.Optional }] }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatTabNav.propDecorators = { |
| _items: [{ type: core.ContentChildren, args: [core.forwardRef((/** |
| * @return {?} |
| */ |
| function () { return MatTabLink; })), { descendants: true },] }], |
| _inkBar: [{ type: core.ViewChild, args: [MatInkBar, { static: true },] }], |
| _tabListContainer: [{ type: core.ViewChild, args: ['tabListContainer', { static: true },] }], |
| _tabList: [{ type: core.ViewChild, args: ['tabList', { static: true },] }], |
| _nextPaginator: [{ type: core.ViewChild, args: ['nextPaginator', { static: false },] }], |
| _previousPaginator: [{ type: core.ViewChild, args: ['previousPaginator', { static: false },] }], |
| backgroundColor: [{ type: core.Input }], |
| disableRipple: [{ type: core.Input }], |
| color: [{ type: core.Input }] |
| }; |
| return MatTabNav; |
| }(MatPaginatedTabHeader)); |
| // Boilerplate for applying mixins to MatTabLink. |
| var |
| // Boilerplate for applying mixins to MatTabLink. |
| MatTabLinkBase = /** @class */ (function () { |
| function MatTabLinkBase() { |
| } |
| return MatTabLinkBase; |
| }()); |
| /** @type {?} */ |
| var _MatTabLinkMixinBase = mixinTabIndex(mixinDisableRipple(mixinDisabled(MatTabLinkBase))); |
| /** |
| * Link inside of a `mat-tab-nav-bar`. |
| */ |
| var MatTabLink = /** @class */ (function (_super) { |
| __extends(MatTabLink, _super); |
| function MatTabLink(_tabNavBar, elementRef, ngZone, platform$$1, globalRippleOptions, tabIndex, _focusMonitor, animationMode) { |
| var _this = _super.call(this) || this; |
| _this._tabNavBar = _tabNavBar; |
| _this.elementRef = elementRef; |
| _this._focusMonitor = _focusMonitor; |
| /** |
| * Whether the tab link is active or not. |
| */ |
| _this._isActive = false; |
| _this._tabLinkRipple = new RippleRenderer(_this, ngZone, elementRef, platform$$1); |
| _this._tabLinkRipple.setupTriggerEvents(elementRef.nativeElement); |
| _this.rippleConfig = globalRippleOptions || {}; |
| _this.tabIndex = parseInt(tabIndex) || 0; |
| if (animationMode === 'NoopAnimations') { |
| _this.rippleConfig.animation = { enterDuration: 0, exitDuration: 0 }; |
| } |
| _focusMonitor.monitor(elementRef); |
| return _this; |
| } |
| Object.defineProperty(MatTabLink.prototype, "active", { |
| /** Whether the link is active. */ |
| get: /** |
| * Whether the link is active. |
| * @return {?} |
| */ |
| function () { return this._isActive; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| if (value !== this._isActive) { |
| this._isActive = 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 || this._tabNavBar.disableRipple || |
| !!this.rippleConfig.disabled; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| MatTabLink.prototype.focus = /** |
| * @return {?} |
| */ |
| function () { |
| this.elementRef.nativeElement.focus(); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTabLink.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| this._tabLinkRipple._removeTriggerEvents(); |
| this._focusMonitor.stopMonitoring(this.elementRef); |
| }; |
| MatTabLink.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[mat-tab-link], [matTabLink]', |
| exportAs: 'matTabLink', |
| inputs: ['disabled', 'disableRipple', 'tabIndex'], |
| host: { |
| 'class': 'mat-tab-link', |
| '[attr.aria-current]': 'active', |
| '[attr.aria-disabled]': 'disabled', |
| '[attr.tabIndex]': 'tabIndex', |
| '[class.mat-tab-disabled]': 'disabled', |
| '[class.mat-tab-label-active]': 'active', |
| } |
| },] }, |
| ]; |
| /** @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: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] }, |
| { type: a11y.FocusMonitor }, |
| { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] } |
| ]; }; |
| MatTabLink.propDecorators = { |
| active: [{ type: core.Input }] |
| }; |
| return MatTabLink; |
| }(_MatTabLinkMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatTabsModule = /** @class */ (function () { |
| function MatTabsModule() { |
| } |
| MatTabsModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [ |
| common.CommonModule, |
| MatCommonModule, |
| portal.PortalModule, |
| MatRippleModule, |
| observers.ObserversModule, |
| a11y.A11yModule, |
| ], |
| // Don't export all components because some are only to be used internally. |
| exports: [ |
| MatCommonModule, |
| MatTabGroup, |
| MatTabLabel, |
| MatTab, |
| MatTabNav, |
| MatTabLink, |
| MatTabContent, |
| ], |
| declarations: [ |
| MatTabGroup, |
| MatTabLabel, |
| MatTab, |
| MatInkBar, |
| MatTabLabelWrapper, |
| MatTabNav, |
| MatTabLink, |
| MatTabBody, |
| MatTabBodyPortal, |
| MatTabHeader, |
| MatTabContent, |
| ], |
| },] }, |
| ]; |
| return MatTabsModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| // Boilerplate for applying mixins to MatToolbar. |
| /** |
| * \@docs-private |
| */ |
| var |
| // Boilerplate for applying mixins to MatToolbar. |
| /** |
| * \@docs-private |
| */ |
| MatToolbarBase = /** @class */ (function () { |
| function MatToolbarBase(_elementRef) { |
| this._elementRef = _elementRef; |
| } |
| return MatToolbarBase; |
| }()); |
| /** @type {?} */ |
| var _MatToolbarMixinBase = mixinColor(MatToolbarBase); |
| var MatToolbarRow = /** @class */ (function () { |
| function MatToolbarRow() { |
| } |
| MatToolbarRow.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-toolbar-row', |
| exportAs: 'matToolbarRow', |
| host: { 'class': 'mat-toolbar-row' }, |
| },] }, |
| ]; |
| return MatToolbarRow; |
| }()); |
| var MatToolbar = /** @class */ (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. |
| _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((/** |
| * @return {?} |
| */ |
| function () { return _this._checkToolbarMixedModes(); })); |
| }; |
| /** |
| * Throws an exception when developers are attempting to combine the different toolbar row modes. |
| */ |
| /** |
| * Throws an exception when developers are attempting to combine the different toolbar row modes. |
| * @private |
| * @return {?} |
| */ |
| MatToolbar.prototype._checkToolbarMixedModes = /** |
| * Throws an exception when developers are attempting to combine the different toolbar row modes. |
| * @private |
| * @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. |
| /** @type {?} */ |
| var isCombinedUsage = Array.from(this._elementRef.nativeElement.childNodes) |
| .filter((/** |
| * @param {?} node |
| * @return {?} |
| */ |
| function (node) { return !(node.classList && node.classList.contains('mat-toolbar-row')); })) |
| .filter((/** |
| * @param {?} node |
| * @return {?} |
| */ |
| function (node) { return node.nodeType !== (_this._document ? _this._document.COMMENT_NODE : 8); })) |
| .some((/** |
| * @param {?} node |
| * @return {?} |
| */ |
| function (node) { return !!(node.textContent && 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: ["@media (-ms-high-contrast:active){.mat-toolbar{outline:solid 1px}}.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]': '_toolbarRows.length > 0', |
| '[class.mat-toolbar-single-row]': '_toolbarRows.length === 0', |
| }, |
| changeDetection: core.ChangeDetectionStrategy.OnPush, |
| encapsulation: core.ViewEncapsulation.None, |
| },] }, |
| ]; |
| /** @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.'); |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| var MatToolbarModule = /** @class */ (function () { |
| function MatToolbarModule() { |
| } |
| MatToolbarModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [MatCommonModule], |
| exports: [MatToolbar, MatToolbarRow, MatCommonModule], |
| declarations: [MatToolbar, MatToolbarRow], |
| },] }, |
| ]; |
| return MatToolbarModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes |
| * inside the outlet. |
| */ |
| var MatTreeNodeOutlet = /** @class */ (function () { |
| function MatTreeNodeOutlet(viewContainer, _node) { |
| this.viewContainer = viewContainer; |
| this._node = _node; |
| } |
| MatTreeNodeOutlet.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matTreeNodeOutlet]' |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatTreeNodeOutlet.ctorParameters = function () { return [ |
| { type: core.ViewContainerRef }, |
| { type: undefined, decorators: [{ type: core.Inject, args: [tree.CDK_TREE_NODE_OUTLET_NODE,] }, { type: core.Optional }] } |
| ]; }; |
| return MatTreeNodeOutlet; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var _MatTreeNodeMixinBase = mixinTabIndex(mixinDisabled(tree.CdkTreeNode)); |
| /** @type {?} */ |
| var _MatNestedTreeNodeMixinBase = mixinTabIndex(mixinDisabled(tree.CdkNestedTreeNode)); |
| /** |
| * Wrapper for the CdkTree node with Material design styles. |
| * @template T |
| */ |
| var MatTreeNode = /** @class */ (function (_super) { |
| __extends(MatTreeNode, _super); |
| function MatTreeNode(_elementRef, _tree, tabIndex) { |
| var _this = _super.call(this, _elementRef, _tree) || this; |
| _this._elementRef = _elementRef; |
| _this._tree = _tree; |
| _this.role = 'treeitem'; |
| _this.tabIndex = Number(tabIndex) || 0; |
| return _this; |
| } |
| MatTreeNode.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-tree-node', |
| exportAs: 'matTreeNode', |
| inputs: ['disabled', 'tabIndex'], |
| host: { |
| '[attr.aria-expanded]': 'isExpanded', |
| '[attr.aria-level]': 'role === "treeitem" ? level : null', |
| '[attr.role]': 'role', |
| 'class': 'mat-tree-node' |
| }, |
| providers: [{ provide: tree.CdkTreeNode, useExisting: MatTreeNode }] |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatTreeNode.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: tree.CdkTree }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] } |
| ]; }; |
| MatTreeNode.propDecorators = { |
| role: [{ type: core.Input }] |
| }; |
| return MatTreeNode; |
| }(_MatTreeNodeMixinBase)); |
| /** |
| * Wrapper for the CdkTree node definition with Material design styles. |
| * @template T |
| */ |
| var MatTreeNodeDef = /** @class */ (function (_super) { |
| __extends(MatTreeNodeDef, _super); |
| function MatTreeNodeDef() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatTreeNodeDef.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matTreeNodeDef]', |
| inputs: [ |
| 'when: matTreeNodeDefWhen' |
| ], |
| providers: [{ provide: tree.CdkTreeNodeDef, useExisting: MatTreeNodeDef }] |
| },] }, |
| ]; |
| MatTreeNodeDef.propDecorators = { |
| data: [{ type: core.Input, args: ['matTreeNode',] }] |
| }; |
| return MatTreeNodeDef; |
| }(tree.CdkTreeNodeDef)); |
| /** |
| * Wrapper for the CdkTree nested node with Material design styles. |
| * @template T |
| */ |
| var MatNestedTreeNode = /** @class */ (function (_super) { |
| __extends(MatNestedTreeNode, _super); |
| function MatNestedTreeNode(_elementRef, _tree, _differs, tabIndex) { |
| var _this = _super.call(this, _elementRef, _tree, _differs) || this; |
| _this._elementRef = _elementRef; |
| _this._tree = _tree; |
| _this._differs = _differs; |
| _this.tabIndex = Number(tabIndex) || 0; |
| return _this; |
| } |
| // This is a workaround for https://github.com/angular/angular/issues/23091 |
| // In aot mode, the lifecycle hooks from parent class are not called. |
| // TODO(tinayuangao): Remove when the angular issue #23091 is fixed |
| // This is a workaround for https://github.com/angular/angular/issues/23091 |
| // In aot mode, the lifecycle hooks from parent class are not called. |
| // TODO(tinayuangao): Remove when the angular issue #23091 is fixed |
| /** |
| * @return {?} |
| */ |
| MatNestedTreeNode.prototype.ngAfterContentInit = |
| // This is a workaround for https://github.com/angular/angular/issues/23091 |
| // In aot mode, the lifecycle hooks from parent class are not called. |
| // TODO(tinayuangao): Remove when the angular issue #23091 is fixed |
| /** |
| * @return {?} |
| */ |
| function () { |
| _super.prototype.ngAfterContentInit.call(this); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatNestedTreeNode.prototype.ngOnDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| _super.prototype.ngOnDestroy.call(this); |
| }; |
| MatNestedTreeNode.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: 'mat-nested-tree-node', |
| exportAs: 'matNestedTreeNode', |
| host: { |
| '[attr.aria-expanded]': 'isExpanded', |
| '[attr.role]': 'role', |
| 'class': 'mat-nested-tree-node', |
| }, |
| inputs: ['disabled', 'tabIndex'], |
| providers: [ |
| { provide: tree.CdkNestedTreeNode, useExisting: MatNestedTreeNode }, |
| { provide: tree.CdkTreeNode, useExisting: MatNestedTreeNode }, |
| { provide: tree.CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode } |
| ] |
| },] }, |
| ]; |
| /** @nocollapse */ |
| MatNestedTreeNode.ctorParameters = function () { return [ |
| { type: core.ElementRef }, |
| { type: tree.CdkTree }, |
| { type: core.IterableDiffers }, |
| { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] } |
| ]; }; |
| MatNestedTreeNode.propDecorators = { |
| node: [{ type: core.Input, args: ['matNestedTreeNode',] }], |
| nodeOutlet: [{ type: core.ContentChildren, args: [MatTreeNodeOutlet, { |
| // We need to use `descendants: true`, because Ivy will no longer match |
| // indirect descendants if it's left as false. |
| descendants: true |
| },] }] |
| }; |
| return MatNestedTreeNode; |
| }(_MatNestedTreeNodeMixinBase)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Wrapper for the CdkTree padding with Material design styles. |
| * @template T |
| */ |
| var MatTreeNodePadding = /** @class */ (function (_super) { |
| __extends(MatTreeNodePadding, _super); |
| function MatTreeNodePadding() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatTreeNodePadding.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matTreeNodePadding]', |
| providers: [{ provide: tree.CdkTreeNodePadding, useExisting: MatTreeNodePadding }] |
| },] }, |
| ]; |
| MatTreeNodePadding.propDecorators = { |
| level: [{ type: core.Input, args: ['matTreeNodePadding',] }], |
| indent: [{ type: core.Input, args: ['matTreeNodePaddingIndent',] }] |
| }; |
| return MatTreeNodePadding; |
| }(tree.CdkTreeNodePadding)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Wrapper for the CdkTable with Material design styles. |
| * @template T |
| */ |
| var MatTree = /** @class */ (function (_super) { |
| __extends(MatTree, _super); |
| function MatTree() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| MatTree.decorators = [ |
| { type: core.Component, args: [{selector: 'mat-tree', |
| exportAs: 'matTree', |
| template: "<ng-container matTreeNodeOutlet></ng-container>", |
| host: { |
| 'class': 'mat-tree', |
| 'role': 'tree', |
| }, |
| styles: [".mat-tree{display:block}.mat-tree-node{display:flex;align-items:center;min-height:48px;flex:1;overflow:hidden;word-wrap:break-word}.mat-nested-tree-ndoe{border-bottom-width:0}"], |
| encapsulation: core.ViewEncapsulation.None, |
| // See note on CdkTree for explanation on why this uses the default change detection strategy. |
| // tslint:disable-next-line:validate-decorators |
| changeDetection: core.ChangeDetectionStrategy.Default, |
| providers: [{ provide: tree.CdkTree, useExisting: MatTree }] |
| },] }, |
| ]; |
| MatTree.propDecorators = { |
| _nodeOutlet: [{ type: core.ViewChild, args: [MatTreeNodeOutlet, { static: true },] }] |
| }; |
| return MatTree; |
| }(tree.CdkTree)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Wrapper for the CdkTree's toggle with Material design styles. |
| * @template T |
| */ |
| var MatTreeNodeToggle = /** @class */ (function (_super) { |
| __extends(MatTreeNodeToggle, _super); |
| function MatTreeNodeToggle() { |
| var _this = _super !== null && _super.apply(this, arguments) || this; |
| _this.recursive = false; |
| return _this; |
| } |
| MatTreeNodeToggle.decorators = [ |
| { type: core.Directive, args: [{ |
| selector: '[matTreeNodeToggle]', |
| providers: [{ provide: tree.CdkTreeNodeToggle, useExisting: MatTreeNodeToggle }] |
| },] }, |
| ]; |
| MatTreeNodeToggle.propDecorators = { |
| recursive: [{ type: core.Input, args: ['matTreeNodeToggleRecursive',] }] |
| }; |
| return MatTreeNodeToggle; |
| }(tree.CdkTreeNodeToggle)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| var MAT_TREE_DIRECTIVES = [ |
| MatNestedTreeNode, |
| MatTreeNodeDef, |
| MatTreeNodePadding, |
| MatTreeNodeToggle, |
| MatTree, |
| MatTreeNode, |
| MatTreeNodeOutlet |
| ]; |
| var MatTreeModule = /** @class */ (function () { |
| function MatTreeModule() { |
| } |
| MatTreeModule.decorators = [ |
| { type: core.NgModule, args: [{ |
| imports: [tree.CdkTreeModule, common.CommonModule, MatCommonModule], |
| exports: MAT_TREE_DIRECTIVES, |
| declarations: MAT_TREE_DIRECTIVES, |
| },] }, |
| ]; |
| return MatTreeModule; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Tree flattener to convert a normal type of node to node with children & level information. |
| * Transform nested nodes of type `T` to flattened nodes of type `F`. |
| * |
| * For example, the input data of type `T` is nested, and contains its children data: |
| * SomeNode: { |
| * key: 'Fruits', |
| * children: [ |
| * NodeOne: { |
| * key: 'Apple', |
| * }, |
| * NodeTwo: { |
| * key: 'Pear', |
| * } |
| * ] |
| * } |
| * After flattener flatten the tree, the structure will become |
| * SomeNode: { |
| * key: 'Fruits', |
| * expandable: true, |
| * level: 1 |
| * }, |
| * NodeOne: { |
| * key: 'Apple', |
| * expandable: false, |
| * level: 2 |
| * }, |
| * NodeTwo: { |
| * key: 'Pear', |
| * expandable: false, |
| * level: 2 |
| * } |
| * and the output flattened type is `F` with additional information. |
| * @template T, F |
| */ |
| var /** |
| * Tree flattener to convert a normal type of node to node with children & level information. |
| * Transform nested nodes of type `T` to flattened nodes of type `F`. |
| * |
| * For example, the input data of type `T` is nested, and contains its children data: |
| * SomeNode: { |
| * key: 'Fruits', |
| * children: [ |
| * NodeOne: { |
| * key: 'Apple', |
| * }, |
| * NodeTwo: { |
| * key: 'Pear', |
| * } |
| * ] |
| * } |
| * After flattener flatten the tree, the structure will become |
| * SomeNode: { |
| * key: 'Fruits', |
| * expandable: true, |
| * level: 1 |
| * }, |
| * NodeOne: { |
| * key: 'Apple', |
| * expandable: false, |
| * level: 2 |
| * }, |
| * NodeTwo: { |
| * key: 'Pear', |
| * expandable: false, |
| * level: 2 |
| * } |
| * and the output flattened type is `F` with additional information. |
| * @template T, F |
| */ |
| MatTreeFlattener = /** @class */ (function () { |
| function MatTreeFlattener(transformFunction, getLevel, isExpandable, getChildren) { |
| this.transformFunction = transformFunction; |
| this.getLevel = getLevel; |
| this.isExpandable = isExpandable; |
| this.getChildren = getChildren; |
| } |
| /** |
| * @param {?} node |
| * @param {?} level |
| * @param {?} resultNodes |
| * @param {?} parentMap |
| * @return {?} |
| */ |
| MatTreeFlattener.prototype._flattenNode = /** |
| * @param {?} node |
| * @param {?} level |
| * @param {?} resultNodes |
| * @param {?} parentMap |
| * @return {?} |
| */ |
| function (node, level, resultNodes, parentMap) { |
| var _this = this; |
| /** @type {?} */ |
| var flatNode = this.transformFunction(node, level); |
| resultNodes.push(flatNode); |
| if (this.isExpandable(flatNode)) { |
| /** @type {?} */ |
| var childrenNodes = this.getChildren(node); |
| if (childrenNodes) { |
| if (Array.isArray(childrenNodes)) { |
| this._flattenChildren(childrenNodes, level, resultNodes, parentMap); |
| } |
| else { |
| childrenNodes.pipe(operators.take(1)).subscribe((/** |
| * @param {?} children |
| * @return {?} |
| */ |
| function (children) { |
| _this._flattenChildren(children, level, resultNodes, parentMap); |
| })); |
| } |
| } |
| } |
| return resultNodes; |
| }; |
| /** |
| * @param {?} children |
| * @param {?} level |
| * @param {?} resultNodes |
| * @param {?} parentMap |
| * @return {?} |
| */ |
| MatTreeFlattener.prototype._flattenChildren = /** |
| * @param {?} children |
| * @param {?} level |
| * @param {?} resultNodes |
| * @param {?} parentMap |
| * @return {?} |
| */ |
| function (children, level, resultNodes, parentMap) { |
| var _this = this; |
| children.forEach((/** |
| * @param {?} child |
| * @param {?} index |
| * @return {?} |
| */ |
| function (child, index) { |
| /** @type {?} */ |
| var childParentMap = parentMap.slice(); |
| childParentMap.push(index != children.length - 1); |
| _this._flattenNode(child, level + 1, resultNodes, childParentMap); |
| })); |
| }; |
| /** |
| * Flatten a list of node type T to flattened version of node F. |
| * Please note that type T may be nested, and the length of `structuredData` may be different |
| * from that of returned list `F[]`. |
| */ |
| /** |
| * Flatten a list of node type T to flattened version of node F. |
| * Please note that type T may be nested, and the length of `structuredData` may be different |
| * from that of returned list `F[]`. |
| * @param {?} structuredData |
| * @return {?} |
| */ |
| MatTreeFlattener.prototype.flattenNodes = /** |
| * Flatten a list of node type T to flattened version of node F. |
| * Please note that type T may be nested, and the length of `structuredData` may be different |
| * from that of returned list `F[]`. |
| * @param {?} structuredData |
| * @return {?} |
| */ |
| function (structuredData) { |
| var _this = this; |
| /** @type {?} */ |
| var resultNodes = []; |
| structuredData.forEach((/** |
| * @param {?} node |
| * @return {?} |
| */ |
| function (node) { return _this._flattenNode(node, 0, resultNodes, []); })); |
| return resultNodes; |
| }; |
| /** |
| * Expand flattened node with current expansion status. |
| * The returned list may have different length. |
| */ |
| /** |
| * Expand flattened node with current expansion status. |
| * The returned list may have different length. |
| * @param {?} nodes |
| * @param {?} treeControl |
| * @return {?} |
| */ |
| MatTreeFlattener.prototype.expandFlattenedNodes = /** |
| * Expand flattened node with current expansion status. |
| * The returned list may have different length. |
| * @param {?} nodes |
| * @param {?} treeControl |
| * @return {?} |
| */ |
| function (nodes, treeControl) { |
| var _this = this; |
| /** @type {?} */ |
| var results = []; |
| /** @type {?} */ |
| var currentExpand = []; |
| currentExpand[0] = true; |
| nodes.forEach((/** |
| * @param {?} node |
| * @return {?} |
| */ |
| function (node) { |
| /** @type {?} */ |
| var expand = true; |
| for (var i = 0; i <= _this.getLevel(node); i++) { |
| expand = expand && currentExpand[i]; |
| } |
| if (expand) { |
| results.push(node); |
| } |
| if (_this.isExpandable(node)) { |
| currentExpand[_this.getLevel(node) + 1] = treeControl.isExpanded(node); |
| } |
| })); |
| return results; |
| }; |
| return MatTreeFlattener; |
| }()); |
| /** |
| * Data source for flat tree. |
| * The data source need to handle expansion/collapsion of the tree node and change the data feed |
| * to `MatTree`. |
| * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted |
| * to type `F` for `MatTree` to consume. |
| * @template T, F |
| */ |
| var /** |
| * Data source for flat tree. |
| * The data source need to handle expansion/collapsion of the tree node and change the data feed |
| * to `MatTree`. |
| * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted |
| * to type `F` for `MatTree` to consume. |
| * @template T, F |
| */ |
| MatTreeFlatDataSource = /** @class */ (function (_super) { |
| __extends(MatTreeFlatDataSource, _super); |
| function MatTreeFlatDataSource(_treeControl, _treeFlattener, initialData) { |
| if (initialData === void 0) { initialData = []; } |
| var _this = _super.call(this) || this; |
| _this._treeControl = _treeControl; |
| _this._treeFlattener = _treeFlattener; |
| _this._flattenedData = new rxjs.BehaviorSubject([]); |
| _this._expandedData = new rxjs.BehaviorSubject([]); |
| _this._data = new rxjs.BehaviorSubject(initialData); |
| return _this; |
| } |
| Object.defineProperty(MatTreeFlatDataSource.prototype, "data", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this._data.value; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { |
| this._data.next(value); |
| this._flattenedData.next(this._treeFlattener.flattenNodes(this.data)); |
| this._treeControl.dataNodes = this._flattenedData.value; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} collectionViewer |
| * @return {?} |
| */ |
| MatTreeFlatDataSource.prototype.connect = /** |
| * @param {?} collectionViewer |
| * @return {?} |
| */ |
| function (collectionViewer) { |
| var _this = this; |
| /** @type {?} */ |
| var changes = [ |
| collectionViewer.viewChange, |
| this._treeControl.expansionModel.onChange, |
| this._flattenedData |
| ]; |
| return rxjs.merge.apply(void 0, changes).pipe(operators.map((/** |
| * @return {?} |
| */ |
| function () { |
| _this._expandedData.next(_this._treeFlattener.expandFlattenedNodes(_this._flattenedData.value, _this._treeControl)); |
| return _this._expandedData.value; |
| }))); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTreeFlatDataSource.prototype.disconnect = /** |
| * @return {?} |
| */ |
| function () { |
| // no op |
| }; |
| return MatTreeFlatDataSource; |
| }(collections.DataSource)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** |
| * Data source for nested tree. |
| * |
| * The data source for nested tree doesn't have to consider node flattener, or the way to expand |
| * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node. |
| * @template T |
| */ |
| var /** |
| * Data source for nested tree. |
| * |
| * The data source for nested tree doesn't have to consider node flattener, or the way to expand |
| * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node. |
| * @template T |
| */ |
| MatTreeNestedDataSource = /** @class */ (function (_super) { |
| __extends(MatTreeNestedDataSource, _super); |
| function MatTreeNestedDataSource() { |
| var _this = _super !== null && _super.apply(this, arguments) || this; |
| _this._data = new rxjs.BehaviorSubject([]); |
| return _this; |
| } |
| Object.defineProperty(MatTreeNestedDataSource.prototype, "data", { |
| /** |
| * Data for the nested tree |
| */ |
| get: /** |
| * Data for the nested tree |
| * @return {?} |
| */ |
| function () { return this._data.value; }, |
| set: /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function (value) { this._data.next(value); }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} collectionViewer |
| * @return {?} |
| */ |
| MatTreeNestedDataSource.prototype.connect = /** |
| * @param {?} collectionViewer |
| * @return {?} |
| */ |
| function (collectionViewer) { |
| var _this = this; |
| return rxjs.merge.apply(void 0, [collectionViewer.viewChange, this._data]).pipe(operators.map((/** |
| * @return {?} |
| */ |
| function () { |
| return _this.data; |
| }))); |
| }; |
| /** |
| * @return {?} |
| */ |
| MatTreeNestedDataSource.prototype.disconnect = /** |
| * @return {?} |
| */ |
| function () { |
| // no op |
| }; |
| return MatTreeNestedDataSource; |
| }(collections.DataSource)); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| exports.MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY = MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY; |
| exports.MatAutocompleteSelectedEvent = MatAutocompleteSelectedEvent; |
| exports.MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = MAT_AUTOCOMPLETE_DEFAULT_OPTIONS; |
| exports.MatAutocomplete = MatAutocomplete; |
| exports.MatAutocompleteModule = MatAutocompleteModule; |
| exports.MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY = MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY; |
| exports.getMatAutocompleteMissingPanelError = getMatAutocompleteMissingPanelError; |
| exports.AUTOCOMPLETE_OPTION_HEIGHT = AUTOCOMPLETE_OPTION_HEIGHT; |
| exports.AUTOCOMPLETE_PANEL_HEIGHT = AUTOCOMPLETE_PANEL_HEIGHT; |
| exports.MAT_AUTOCOMPLETE_SCROLL_STRATEGY = MAT_AUTOCOMPLETE_SCROLL_STRATEGY; |
| exports.MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER; |
| exports.MAT_AUTOCOMPLETE_VALUE_ACCESSOR = MAT_AUTOCOMPLETE_VALUE_ACCESSOR; |
| exports.MatAutocompleteTrigger = MatAutocompleteTrigger; |
| exports.MatAutocompleteOrigin = MatAutocompleteOrigin; |
| exports.MatBadgeModule = MatBadgeModule; |
| exports.MatBadge = MatBadge; |
| exports.MatBottomSheetModule = MatBottomSheetModule; |
| exports.MAT_BOTTOM_SHEET_DEFAULT_OPTIONS = MAT_BOTTOM_SHEET_DEFAULT_OPTIONS; |
| exports.MatBottomSheet = MatBottomSheet; |
| exports.MAT_BOTTOM_SHEET_DATA = MAT_BOTTOM_SHEET_DATA; |
| exports.MatBottomSheetConfig = MatBottomSheetConfig; |
| exports.MatBottomSheetContainer = MatBottomSheetContainer; |
| exports.matBottomSheetAnimations = matBottomSheetAnimations; |
| exports.MatBottomSheetRef = MatBottomSheetRef; |
| exports.MatButtonModule = MatButtonModule; |
| exports.MatButton = MatButton; |
| exports.MatAnchor = MatAnchor; |
| exports.MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS = MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS; |
| exports.MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR; |
| exports.MatButtonToggleGroupMultiple = MatButtonToggleGroupMultiple; |
| exports.MatButtonToggleChange = MatButtonToggleChange; |
| exports.MatButtonToggleGroup = MatButtonToggleGroup; |
| exports.MatButtonToggle = MatButtonToggle; |
| exports.MatButtonToggleModule = MatButtonToggleModule; |
| exports.MatCardContent = MatCardContent; |
| exports.MatCardTitle = MatCardTitle; |
| exports.MatCardSubtitle = MatCardSubtitle; |
| exports.MatCardActions = MatCardActions; |
| exports.MatCardFooter = MatCardFooter; |
| exports.MatCardImage = MatCardImage; |
| exports.MatCardSmImage = MatCardSmImage; |
| exports.MatCardMdImage = MatCardMdImage; |
| exports.MatCardLgImage = MatCardLgImage; |
| exports.MatCardXlImage = MatCardXlImage; |
| exports.MatCardAvatar = MatCardAvatar; |
| exports.MatCard = MatCard; |
| exports.MatCardHeader = MatCardHeader; |
| exports.MatCardTitleGroup = MatCardTitleGroup; |
| exports.MatCardModule = MatCardModule; |
| exports.MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR = MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR; |
| exports.TransitionCheckState = TransitionCheckState; |
| exports.MatCheckboxChange = MatCheckboxChange; |
| exports.MatCheckbox = MatCheckbox; |
| exports.MAT_CHECKBOX_CLICK_ACTION = MAT_CHECKBOX_CLICK_ACTION; |
| exports._MatCheckboxRequiredValidatorModule = _MatCheckboxRequiredValidatorModule; |
| exports.MatCheckboxModule = MatCheckboxModule; |
| exports.MAT_CHECKBOX_REQUIRED_VALIDATOR = MAT_CHECKBOX_REQUIRED_VALIDATOR; |
| exports.MatCheckboxRequiredValidator = MatCheckboxRequiredValidator; |
| exports.MatChipsModule = MatChipsModule; |
| exports.MatChipListChange = MatChipListChange; |
| exports.MatChipList = MatChipList; |
| exports.MatChipSelectionChange = MatChipSelectionChange; |
| exports.MatChipAvatar = MatChipAvatar; |
| exports.MatChipTrailingIcon = MatChipTrailingIcon; |
| exports.MatChip = MatChip; |
| exports.MatChipRemove = MatChipRemove; |
| exports.MatChipInput = MatChipInput; |
| exports.MAT_CHIPS_DEFAULT_OPTIONS = MAT_CHIPS_DEFAULT_OPTIONS; |
| exports.ɵa1 = MATERIAL_SANITY_CHECKS_FACTORY; |
| exports.VERSION = VERSION$1; |
| exports.AnimationCurves = AnimationCurves; |
| exports.AnimationDurations = AnimationDurations; |
| exports.MatCommonModule = MatCommonModule; |
| exports.MATERIAL_SANITY_CHECKS = MATERIAL_SANITY_CHECKS; |
| exports.mixinDisabled = mixinDisabled; |
| exports.mixinColor = mixinColor; |
| exports.mixinDisableRipple = mixinDisableRipple; |
| exports.mixinTabIndex = mixinTabIndex; |
| exports.mixinErrorState = mixinErrorState; |
| exports.mixinInitialized = mixinInitialized; |
| exports.NativeDateModule = NativeDateModule; |
| exports.MatNativeDateModule = MatNativeDateModule; |
| exports.MAT_DATE_LOCALE_FACTORY = MAT_DATE_LOCALE_FACTORY; |
| exports.MAT_DATE_LOCALE = MAT_DATE_LOCALE; |
| exports.MAT_DATE_LOCALE_PROVIDER = MAT_DATE_LOCALE_PROVIDER; |
| exports.DateAdapter = DateAdapter; |
| exports.MAT_DATE_FORMATS = MAT_DATE_FORMATS; |
| exports.NativeDateAdapter = NativeDateAdapter; |
| exports.MAT_NATIVE_DATE_FORMATS = MAT_NATIVE_DATE_FORMATS; |
| exports.ShowOnDirtyErrorStateMatcher = ShowOnDirtyErrorStateMatcher; |
| exports.ErrorStateMatcher = ErrorStateMatcher; |
| exports.MAT_HAMMER_OPTIONS = MAT_HAMMER_OPTIONS; |
| exports.GestureConfig = GestureConfig; |
| exports.setLines = setLines; |
| exports.MatLine = MatLine; |
| exports.MatLineSetter = MatLineSetter; |
| exports.MatLineModule = MatLineModule; |
| exports.MatOptionModule = MatOptionModule; |
| exports._countGroupLabelsBeforeOption = _countGroupLabelsBeforeOption; |
| exports._getOptionScrollPosition = _getOptionScrollPosition; |
| exports.MatOptionSelectionChange = MatOptionSelectionChange; |
| exports.MAT_OPTION_PARENT_COMPONENT = MAT_OPTION_PARENT_COMPONENT; |
| exports.MatOption = MatOption; |
| exports.MatOptgroup = MatOptgroup; |
| exports.MAT_LABEL_GLOBAL_OPTIONS = MAT_LABEL_GLOBAL_OPTIONS; |
| exports.MatRippleModule = MatRippleModule; |
| exports.MAT_RIPPLE_GLOBAL_OPTIONS = MAT_RIPPLE_GLOBAL_OPTIONS; |
| exports.MatRipple = MatRipple; |
| exports.RippleState = RippleState; |
| exports.RippleRef = RippleRef; |
| exports.defaultRippleAnimationConfig = defaultRippleAnimationConfig; |
| exports.RippleRenderer = RippleRenderer; |
| exports.MatPseudoCheckboxModule = MatPseudoCheckboxModule; |
| exports.MatPseudoCheckbox = MatPseudoCheckbox; |
| exports.JAN = JAN; |
| exports.FEB = FEB; |
| exports.MAR = MAR; |
| exports.APR = APR; |
| exports.MAY = MAY; |
| exports.JUN = JUN; |
| exports.JUL = JUL; |
| exports.AUG = AUG; |
| exports.SEP = SEP; |
| exports.OCT = OCT; |
| exports.NOV = NOV; |
| exports.DEC = DEC; |
| exports.MatMultiYearView = MatMultiYearView; |
| exports.yearsPerPage = yearsPerPage; |
| exports.yearsPerRow = yearsPerRow; |
| exports.MatDatepickerModule = MatDatepickerModule; |
| exports.MatCalendarHeader = MatCalendarHeader; |
| exports.MatCalendar = MatCalendar; |
| exports.MatCalendarCell = MatCalendarCell; |
| exports.MatCalendarBody = MatCalendarBody; |
| exports.MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY = MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY; |
| exports.MAT_DATEPICKER_SCROLL_STRATEGY = MAT_DATEPICKER_SCROLL_STRATEGY; |
| exports.MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER; |
| exports.MatDatepickerContent = MatDatepickerContent; |
| exports.MatDatepicker = MatDatepicker; |
| exports.matDatepickerAnimations = matDatepickerAnimations; |
| exports.MAT_DATEPICKER_VALUE_ACCESSOR = MAT_DATEPICKER_VALUE_ACCESSOR; |
| exports.MAT_DATEPICKER_VALIDATORS = MAT_DATEPICKER_VALIDATORS; |
| exports.MatDatepickerInputEvent = MatDatepickerInputEvent; |
| exports.MatDatepickerInput = MatDatepickerInput; |
| exports.MatDatepickerIntl = MatDatepickerIntl; |
| exports.MatDatepickerToggleIcon = MatDatepickerToggleIcon; |
| exports.MatDatepickerToggle = MatDatepickerToggle; |
| exports.MatMonthView = MatMonthView; |
| exports.MatYearView = MatYearView; |
| exports.MatDialogModule = MatDialogModule; |
| exports.MAT_DIALOG_SCROLL_STRATEGY_FACTORY = MAT_DIALOG_SCROLL_STRATEGY_FACTORY; |
| exports.MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY = MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY; |
| exports.MAT_DIALOG_DATA = MAT_DIALOG_DATA; |
| exports.MAT_DIALOG_DEFAULT_OPTIONS = MAT_DIALOG_DEFAULT_OPTIONS; |
| exports.MAT_DIALOG_SCROLL_STRATEGY = MAT_DIALOG_SCROLL_STRATEGY; |
| exports.MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = MAT_DIALOG_SCROLL_STRATEGY_PROVIDER; |
| exports.MatDialog = MatDialog; |
| exports.throwMatDialogContentAlreadyAttachedError = throwMatDialogContentAlreadyAttachedError; |
| exports.MatDialogContainer = MatDialogContainer; |
| exports.MatDialogClose = MatDialogClose; |
| exports.MatDialogTitle = MatDialogTitle; |
| exports.MatDialogContent = MatDialogContent; |
| exports.MatDialogActions = MatDialogActions; |
| exports.MatDialogConfig = MatDialogConfig; |
| exports.MatDialogRef = MatDialogRef; |
| exports.matDialogAnimations = matDialogAnimations; |
| exports.MatDivider = MatDivider; |
| exports.MatDividerModule = MatDividerModule; |
| exports.MatExpansionModule = MatExpansionModule; |
| exports.MatAccordion = MatAccordion; |
| exports.MAT_ACCORDION = MAT_ACCORDION; |
| exports.MAT_EXPANSION_PANEL_DEFAULT_OPTIONS = MAT_EXPANSION_PANEL_DEFAULT_OPTIONS; |
| exports.MatExpansionPanel = MatExpansionPanel; |
| exports.MatExpansionPanelActionRow = MatExpansionPanelActionRow; |
| exports.MatExpansionPanelHeader = MatExpansionPanelHeader; |
| exports.MatExpansionPanelDescription = MatExpansionPanelDescription; |
| exports.MatExpansionPanelTitle = MatExpansionPanelTitle; |
| exports.MatExpansionPanelContent = MatExpansionPanelContent; |
| exports.EXPANSION_PANEL_ANIMATION_TIMING = EXPANSION_PANEL_ANIMATION_TIMING; |
| exports.matExpansionAnimations = matExpansionAnimations; |
| exports.MatFormFieldModule = MatFormFieldModule; |
| exports.MatError = MatError; |
| exports.MAT_FORM_FIELD_DEFAULT_OPTIONS = MAT_FORM_FIELD_DEFAULT_OPTIONS; |
| exports.MatFormField = MatFormField; |
| exports.MatFormFieldControl = MatFormFieldControl; |
| exports.getMatFormFieldPlaceholderConflictError = getMatFormFieldPlaceholderConflictError; |
| exports.getMatFormFieldDuplicatedHintError = getMatFormFieldDuplicatedHintError; |
| exports.getMatFormFieldMissingControlError = getMatFormFieldMissingControlError; |
| exports.MatHint = MatHint; |
| exports.MatPlaceholder = MatPlaceholder; |
| exports.MatPrefix = MatPrefix; |
| exports.MatSuffix = MatSuffix; |
| exports.MatLabel = MatLabel; |
| exports.matFormFieldAnimations = matFormFieldAnimations; |
| exports.ɵa6 = MAT_GRID_LIST; |
| exports.MatGridListModule = MatGridListModule; |
| exports.MatGridList = MatGridList; |
| exports.MatGridTile = MatGridTile; |
| exports.MatGridTileText = MatGridTileText; |
| exports.MatGridAvatarCssMatStyler = MatGridAvatarCssMatStyler; |
| exports.MatGridTileHeaderCssMatStyler = MatGridTileHeaderCssMatStyler; |
| exports.MatGridTileFooterCssMatStyler = MatGridTileFooterCssMatStyler; |
| exports.MatIconModule = MatIconModule; |
| exports.MAT_ICON_LOCATION_FACTORY = MAT_ICON_LOCATION_FACTORY; |
| exports.MAT_ICON_LOCATION = MAT_ICON_LOCATION; |
| exports.MatIcon = MatIcon; |
| exports.getMatIconNameNotFoundError = getMatIconNameNotFoundError; |
| exports.getMatIconNoHttpProviderError = getMatIconNoHttpProviderError; |
| exports.getMatIconFailedToSanitizeUrlError = getMatIconFailedToSanitizeUrlError; |
| exports.getMatIconFailedToSanitizeLiteralError = getMatIconFailedToSanitizeLiteralError; |
| exports.ICON_REGISTRY_PROVIDER_FACTORY = ICON_REGISTRY_PROVIDER_FACTORY; |
| exports.MatIconRegistry = MatIconRegistry; |
| exports.ICON_REGISTRY_PROVIDER = ICON_REGISTRY_PROVIDER; |
| exports.MatTextareaAutosize = MatTextareaAutosize; |
| exports.MatInput = MatInput; |
| exports.getMatInputUnsupportedTypeError = getMatInputUnsupportedTypeError; |
| exports.MatInputModule = MatInputModule; |
| exports.MAT_INPUT_VALUE_ACCESSOR = MAT_INPUT_VALUE_ACCESSOR; |
| exports.MatListModule = MatListModule; |
| exports.MatNavList = MatNavList; |
| exports.MatList = MatList; |
| exports.MatListAvatarCssMatStyler = MatListAvatarCssMatStyler; |
| exports.MatListIconCssMatStyler = MatListIconCssMatStyler; |
| exports.MatListSubheaderCssMatStyler = MatListSubheaderCssMatStyler; |
| exports.MatListItem = MatListItem; |
| exports.MAT_SELECTION_LIST_VALUE_ACCESSOR = MAT_SELECTION_LIST_VALUE_ACCESSOR; |
| exports.MatSelectionListChange = MatSelectionListChange; |
| exports.MatListOption = MatListOption; |
| exports.MatSelectionList = MatSelectionList; |
| exports.ɵa24 = MAT_MENU_DEFAULT_OPTIONS_FACTORY; |
| exports.ɵb24 = MAT_MENU_SCROLL_STRATEGY_FACTORY; |
| exports.ɵc24 = MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER; |
| exports.MatMenu = MatMenu; |
| exports.MAT_MENU_DEFAULT_OPTIONS = MAT_MENU_DEFAULT_OPTIONS; |
| exports._MatMenu = _MatMenu; |
| exports._MatMenuBase = _MatMenuBase; |
| exports.MatMenuItem = MatMenuItem; |
| exports.MatMenuTrigger = MatMenuTrigger; |
| exports.MAT_MENU_SCROLL_STRATEGY = MAT_MENU_SCROLL_STRATEGY; |
| exports.MAT_MENU_PANEL = MAT_MENU_PANEL; |
| exports._MatMenuDirectivesModule = _MatMenuDirectivesModule; |
| exports.MatMenuModule = MatMenuModule; |
| exports.matMenuAnimations = matMenuAnimations; |
| exports.fadeInItems = fadeInItems; |
| exports.transformMenu = transformMenu; |
| exports.MatMenuContent = MatMenuContent; |
| exports.MatPaginatorModule = MatPaginatorModule; |
| exports.PageEvent = PageEvent; |
| exports.MatPaginator = MatPaginator; |
| exports.MAT_PAGINATOR_INTL_PROVIDER_FACTORY = MAT_PAGINATOR_INTL_PROVIDER_FACTORY; |
| exports.MatPaginatorIntl = MatPaginatorIntl; |
| exports.MAT_PAGINATOR_INTL_PROVIDER = MAT_PAGINATOR_INTL_PROVIDER; |
| exports.MatProgressBarModule = MatProgressBarModule; |
| exports.MAT_PROGRESS_BAR_LOCATION_FACTORY = MAT_PROGRESS_BAR_LOCATION_FACTORY; |
| exports.MAT_PROGRESS_BAR_LOCATION = MAT_PROGRESS_BAR_LOCATION; |
| exports.MatProgressBar = MatProgressBar; |
| exports.MatProgressSpinner = MatProgressSpinner; |
| exports.MatSpinner = MatSpinner; |
| exports.MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS = MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS; |
| exports.MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY = MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY; |
| exports.MatProgressSpinnerModule = MatProgressSpinnerModule; |
| exports.MatRadioModule = MatRadioModule; |
| exports.MAT_RADIO_DEFAULT_OPTIONS_FACTORY = MAT_RADIO_DEFAULT_OPTIONS_FACTORY; |
| exports.MAT_RADIO_DEFAULT_OPTIONS = MAT_RADIO_DEFAULT_OPTIONS; |
| exports.MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR; |
| exports.MatRadioChange = MatRadioChange; |
| exports.MatRadioGroup = MatRadioGroup; |
| exports.MatRadioButton = MatRadioButton; |
| exports.MatSelectModule = MatSelectModule; |
| exports.MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY = MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY; |
| exports.SELECT_PANEL_MAX_HEIGHT = SELECT_PANEL_MAX_HEIGHT; |
| exports.SELECT_PANEL_PADDING_X = SELECT_PANEL_PADDING_X; |
| exports.SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_INDENT_PADDING_X; |
| exports.SELECT_ITEM_HEIGHT_EM = SELECT_ITEM_HEIGHT_EM; |
| exports.SELECT_PANEL_VIEWPORT_PADDING = SELECT_PANEL_VIEWPORT_PADDING; |
| exports.MAT_SELECT_SCROLL_STRATEGY = MAT_SELECT_SCROLL_STRATEGY; |
| exports.MAT_SELECT_SCROLL_STRATEGY_PROVIDER = MAT_SELECT_SCROLL_STRATEGY_PROVIDER; |
| exports.MatSelectChange = MatSelectChange; |
| exports.MatSelectTrigger = MatSelectTrigger; |
| exports.MatSelect = MatSelect; |
| exports.matSelectAnimations = matSelectAnimations; |
| exports.transformPanel = transformPanel; |
| exports.fadeInContent = fadeInContent; |
| exports.MatSidenavModule = MatSidenavModule; |
| exports.throwMatDuplicatedDrawerError = throwMatDuplicatedDrawerError; |
| exports.MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY = MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY; |
| exports.MAT_DRAWER_DEFAULT_AUTOSIZE = MAT_DRAWER_DEFAULT_AUTOSIZE; |
| exports.MatDrawerContent = MatDrawerContent; |
| exports.MatDrawer = MatDrawer; |
| exports.MatDrawerContainer = MatDrawerContainer; |
| exports.MatSidenavContent = MatSidenavContent; |
| exports.MatSidenav = MatSidenav; |
| exports.MatSidenavContainer = MatSidenavContainer; |
| exports.matDrawerAnimations = matDrawerAnimations; |
| exports.MatSlideToggleModule = MatSlideToggleModule; |
| exports.MAT_SLIDE_TOGGLE_VALUE_ACCESSOR = MAT_SLIDE_TOGGLE_VALUE_ACCESSOR; |
| exports.MatSlideToggleChange = MatSlideToggleChange; |
| exports.MatSlideToggle = MatSlideToggle; |
| exports.MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS; |
| exports.MatSliderModule = MatSliderModule; |
| exports.MAT_SLIDER_VALUE_ACCESSOR = MAT_SLIDER_VALUE_ACCESSOR; |
| exports.MatSliderChange = MatSliderChange; |
| exports.MatSlider = MatSlider; |
| exports.MatSnackBarModule = MatSnackBarModule; |
| exports.MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY = MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY; |
| exports.MAT_SNACK_BAR_DEFAULT_OPTIONS = MAT_SNACK_BAR_DEFAULT_OPTIONS; |
| exports.MatSnackBar = MatSnackBar; |
| exports.MatSnackBarContainer = MatSnackBarContainer; |
| exports.MAT_SNACK_BAR_DATA = MAT_SNACK_BAR_DATA; |
| exports.MatSnackBarConfig = MatSnackBarConfig; |
| exports.MatSnackBarRef = MatSnackBarRef; |
| exports.SimpleSnackBar = SimpleSnackBar; |
| exports.matSnackBarAnimations = matSnackBarAnimations; |
| exports.MatSortModule = MatSortModule; |
| exports.MatSortHeader = MatSortHeader; |
| exports.MAT_SORT_HEADER_INTL_PROVIDER_FACTORY = MAT_SORT_HEADER_INTL_PROVIDER_FACTORY; |
| exports.MatSortHeaderIntl = MatSortHeaderIntl; |
| exports.MAT_SORT_HEADER_INTL_PROVIDER = MAT_SORT_HEADER_INTL_PROVIDER; |
| exports.MatSort = MatSort; |
| exports.matSortAnimations = matSortAnimations; |
| exports.MatStepperModule = MatStepperModule; |
| exports.MatStepLabel = MatStepLabel; |
| exports.MatStep = MatStep; |
| exports.MatStepper = MatStepper; |
| exports.MatHorizontalStepper = MatHorizontalStepper; |
| exports.MatVerticalStepper = MatVerticalStepper; |
| exports.MatStepperNext = MatStepperNext; |
| exports.MatStepperPrevious = MatStepperPrevious; |
| exports.MatStepHeader = MatStepHeader; |
| exports.MAT_STEPPER_INTL_PROVIDER_FACTORY = MAT_STEPPER_INTL_PROVIDER_FACTORY; |
| exports.MatStepperIntl = MatStepperIntl; |
| exports.MAT_STEPPER_INTL_PROVIDER = MAT_STEPPER_INTL_PROVIDER; |
| exports.matStepperAnimations = matStepperAnimations; |
| exports.MatStepperIcon = MatStepperIcon; |
| exports.MatTableModule = MatTableModule; |
| exports.MatCellDef = MatCellDef; |
| exports.MatHeaderCellDef = MatHeaderCellDef; |
| exports.MatFooterCellDef = MatFooterCellDef; |
| exports.MatColumnDef = MatColumnDef; |
| exports.MatHeaderCell = MatHeaderCell; |
| exports.MatFooterCell = MatFooterCell; |
| exports.MatCell = MatCell; |
| exports.MatTable = MatTable; |
| exports.MatHeaderRowDef = MatHeaderRowDef; |
| exports.MatFooterRowDef = MatFooterRowDef; |
| exports.MatRowDef = MatRowDef; |
| exports.MatHeaderRow = MatHeaderRow; |
| exports.MatFooterRow = MatFooterRow; |
| exports.MatRow = MatRow; |
| exports.MatTableDataSource = MatTableDataSource; |
| exports.MatTextColumn = MatTextColumn; |
| exports.ɵa23 = _MAT_INK_BAR_POSITIONER_FACTORY; |
| exports.ɵb23 = MatPaginatedTabHeader; |
| exports.MatInkBar = MatInkBar; |
| exports._MAT_INK_BAR_POSITIONER = _MAT_INK_BAR_POSITIONER; |
| exports.MatTabBody = MatTabBody; |
| exports.MatTabBodyPortal = MatTabBodyPortal; |
| exports.MatTabHeader = MatTabHeader; |
| exports.MatTabLabelWrapper = MatTabLabelWrapper; |
| exports.MatTab = MatTab; |
| exports.MatTabLabel = MatTabLabel; |
| exports.MatTabNav = MatTabNav; |
| exports.MatTabLink = MatTabLink; |
| exports.MatTabContent = MatTabContent; |
| exports.MatTabsModule = MatTabsModule; |
| exports.MatTabChangeEvent = MatTabChangeEvent; |
| exports.MAT_TABS_CONFIG = MAT_TABS_CONFIG; |
| exports.MatTabGroup = MatTabGroup; |
| exports.matTabsAnimations = matTabsAnimations; |
| exports.MatToolbarModule = MatToolbarModule; |
| exports.throwToolbarMixedModesError = throwToolbarMixedModesError; |
| exports.MatToolbarRow = MatToolbarRow; |
| exports.MatToolbar = MatToolbar; |
| exports.MatTooltipModule = MatTooltipModule; |
| exports.getMatTooltipInvalidPositionError = getMatTooltipInvalidPositionError; |
| exports.MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY = MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY; |
| exports.MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY = MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY; |
| exports.SCROLL_THROTTLE_MS = SCROLL_THROTTLE_MS; |
| exports.TOOLTIP_PANEL_CLASS = TOOLTIP_PANEL_CLASS; |
| exports.MAT_TOOLTIP_SCROLL_STRATEGY = MAT_TOOLTIP_SCROLL_STRATEGY; |
| exports.MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER = MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER; |
| exports.MAT_TOOLTIP_DEFAULT_OPTIONS = MAT_TOOLTIP_DEFAULT_OPTIONS; |
| exports.MatTooltip = MatTooltip; |
| exports.TooltipComponent = TooltipComponent; |
| exports.matTooltipAnimations = matTooltipAnimations; |
| exports.MatTreeNode = MatTreeNode; |
| exports.MatTreeNodeDef = MatTreeNodeDef; |
| exports.MatNestedTreeNode = MatNestedTreeNode; |
| exports.MatTreeNodePadding = MatTreeNodePadding; |
| exports.MatTree = MatTree; |
| exports.MatTreeModule = MatTreeModule; |
| exports.MatTreeNodeToggle = MatTreeNodeToggle; |
| exports.MatTreeNodeOutlet = MatTreeNodeOutlet; |
| exports.MatTreeFlattener = MatTreeFlattener; |
| exports.MatTreeFlatDataSource = MatTreeFlatDataSource; |
| exports.MatTreeNestedDataSource = MatTreeNestedDataSource; |
| |
| Object.defineProperty(exports, '__esModule', { value: true }); |
| |
| }))); |
| //# sourceMappingURL=material.umd.js.map |