source: trip-planner-front/node_modules/@angular/material/bundles/material-select.umd.js@ 59329aa

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

initial commit
  • Property mode set to 100644
File size: 86.8 KB
RevLine 
[6a3a178]1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/core'), require('@angular/material/core'), require('@angular/material/form-field'), require('@angular/cdk/scrolling'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/cdk/keycodes'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/animations')) :
3 typeof define === 'function' && define.amd ? define('@angular/material/select', ['exports', '@angular/cdk/overlay', '@angular/common', '@angular/core', '@angular/material/core', '@angular/material/form-field', '@angular/cdk/scrolling', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/cdk/keycodes', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/animations'], factory) :
4 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.select = {}), global.ng.cdk.overlay, global.ng.common, global.ng.core, global.ng.material.core, global.ng.material.formField, global.ng.cdk.scrolling, global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.cdk.coercion, global.ng.cdk.collections, global.ng.cdk.keycodes, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.animations));
5}(this, (function (exports, overlay, common, core, core$1, formField, scrolling, a11y, bidi, coercion, collections, keycodes, forms, rxjs, operators, animations) { 'use strict';
6
7 /*! *****************************************************************************
8 Copyright (c) Microsoft Corporation.
9
10 Permission to use, copy, modify, and/or distribute this software for any
11 purpose with or without fee is hereby granted.
12
13 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19 PERFORMANCE OF THIS SOFTWARE.
20 ***************************************************************************** */
21 /* global Reflect, Promise */
22 var extendStatics = function (d, b) {
23 extendStatics = Object.setPrototypeOf ||
24 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
25 function (d, b) { for (var p in b)
26 if (Object.prototype.hasOwnProperty.call(b, p))
27 d[p] = b[p]; };
28 return extendStatics(d, b);
29 };
30 function __extends(d, b) {
31 if (typeof b !== "function" && b !== null)
32 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
33 extendStatics(d, b);
34 function __() { this.constructor = d; }
35 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
36 }
37 var __assign = function () {
38 __assign = Object.assign || function __assign(t) {
39 for (var s, i = 1, n = arguments.length; i < n; i++) {
40 s = arguments[i];
41 for (var p in s)
42 if (Object.prototype.hasOwnProperty.call(s, p))
43 t[p] = s[p];
44 }
45 return t;
46 };
47 return __assign.apply(this, arguments);
48 };
49 function __rest(s, e) {
50 var t = {};
51 for (var p in s)
52 if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
53 t[p] = s[p];
54 if (s != null && typeof Object.getOwnPropertySymbols === "function")
55 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
56 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
57 t[p[i]] = s[p[i]];
58 }
59 return t;
60 }
61 function __decorate(decorators, target, key, desc) {
62 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
63 if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
64 r = Reflect.decorate(decorators, target, key, desc);
65 else
66 for (var i = decorators.length - 1; i >= 0; i--)
67 if (d = decorators[i])
68 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
69 return c > 3 && r && Object.defineProperty(target, key, r), r;
70 }
71 function __param(paramIndex, decorator) {
72 return function (target, key) { decorator(target, key, paramIndex); };
73 }
74 function __metadata(metadataKey, metadataValue) {
75 if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
76 return Reflect.metadata(metadataKey, metadataValue);
77 }
78 function __awaiter(thisArg, _arguments, P, generator) {
79 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
80 return new (P || (P = Promise))(function (resolve, reject) {
81 function fulfilled(value) { try {
82 step(generator.next(value));
83 }
84 catch (e) {
85 reject(e);
86 } }
87 function rejected(value) { try {
88 step(generator["throw"](value));
89 }
90 catch (e) {
91 reject(e);
92 } }
93 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
94 step((generator = generator.apply(thisArg, _arguments || [])).next());
95 });
96 }
97 function __generator(thisArg, body) {
98 var _ = { label: 0, sent: function () { if (t[0] & 1)
99 throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
100 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
101 function verb(n) { return function (v) { return step([n, v]); }; }
102 function step(op) {
103 if (f)
104 throw new TypeError("Generator is already executing.");
105 while (_)
106 try {
107 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
108 return t;
109 if (y = 0, t)
110 op = [op[0] & 2, t.value];
111 switch (op[0]) {
112 case 0:
113 case 1:
114 t = op;
115 break;
116 case 4:
117 _.label++;
118 return { value: op[1], done: false };
119 case 5:
120 _.label++;
121 y = op[1];
122 op = [0];
123 continue;
124 case 7:
125 op = _.ops.pop();
126 _.trys.pop();
127 continue;
128 default:
129 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
130 _ = 0;
131 continue;
132 }
133 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
134 _.label = op[1];
135 break;
136 }
137 if (op[0] === 6 && _.label < t[1]) {
138 _.label = t[1];
139 t = op;
140 break;
141 }
142 if (t && _.label < t[2]) {
143 _.label = t[2];
144 _.ops.push(op);
145 break;
146 }
147 if (t[2])
148 _.ops.pop();
149 _.trys.pop();
150 continue;
151 }
152 op = body.call(thisArg, _);
153 }
154 catch (e) {
155 op = [6, e];
156 y = 0;
157 }
158 finally {
159 f = t = 0;
160 }
161 if (op[0] & 5)
162 throw op[1];
163 return { value: op[0] ? op[1] : void 0, done: true };
164 }
165 }
166 var __createBinding = Object.create ? (function (o, m, k, k2) {
167 if (k2 === undefined)
168 k2 = k;
169 Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
170 }) : (function (o, m, k, k2) {
171 if (k2 === undefined)
172 k2 = k;
173 o[k2] = m[k];
174 });
175 function __exportStar(m, o) {
176 for (var p in m)
177 if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
178 __createBinding(o, m, p);
179 }
180 function __values(o) {
181 var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
182 if (m)
183 return m.call(o);
184 if (o && typeof o.length === "number")
185 return {
186 next: function () {
187 if (o && i >= o.length)
188 o = void 0;
189 return { value: o && o[i++], done: !o };
190 }
191 };
192 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
193 }
194 function __read(o, n) {
195 var m = typeof Symbol === "function" && o[Symbol.iterator];
196 if (!m)
197 return o;
198 var i = m.call(o), r, ar = [], e;
199 try {
200 while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
201 ar.push(r.value);
202 }
203 catch (error) {
204 e = { error: error };
205 }
206 finally {
207 try {
208 if (r && !r.done && (m = i["return"]))
209 m.call(i);
210 }
211 finally {
212 if (e)
213 throw e.error;
214 }
215 }
216 return ar;
217 }
218 /** @deprecated */
219 function __spread() {
220 for (var ar = [], i = 0; i < arguments.length; i++)
221 ar = ar.concat(__read(arguments[i]));
222 return ar;
223 }
224 /** @deprecated */
225 function __spreadArrays() {
226 for (var s = 0, i = 0, il = arguments.length; i < il; i++)
227 s += arguments[i].length;
228 for (var r = Array(s), k = 0, i = 0; i < il; i++)
229 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
230 r[k] = a[j];
231 return r;
232 }
233 function __spreadArray(to, from, pack) {
234 if (pack || arguments.length === 2)
235 for (var i = 0, l = from.length, ar; i < l; i++) {
236 if (ar || !(i in from)) {
237 if (!ar)
238 ar = Array.prototype.slice.call(from, 0, i);
239 ar[i] = from[i];
240 }
241 }
242 return to.concat(ar || from);
243 }
244 function __await(v) {
245 return this instanceof __await ? (this.v = v, this) : new __await(v);
246 }
247 function __asyncGenerator(thisArg, _arguments, generator) {
248 if (!Symbol.asyncIterator)
249 throw new TypeError("Symbol.asyncIterator is not defined.");
250 var g = generator.apply(thisArg, _arguments || []), i, q = [];
251 return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
252 function verb(n) { if (g[n])
253 i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
254 function resume(n, v) { try {
255 step(g[n](v));
256 }
257 catch (e) {
258 settle(q[0][3], e);
259 } }
260 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
261 function fulfill(value) { resume("next", value); }
262 function reject(value) { resume("throw", value); }
263 function settle(f, v) { if (f(v), q.shift(), q.length)
264 resume(q[0][0], q[0][1]); }
265 }
266 function __asyncDelegator(o) {
267 var i, p;
268 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
269 function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
270 }
271 function __asyncValues(o) {
272 if (!Symbol.asyncIterator)
273 throw new TypeError("Symbol.asyncIterator is not defined.");
274 var m = o[Symbol.asyncIterator], i;
275 return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
276 function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
277 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
278 }
279 function __makeTemplateObject(cooked, raw) {
280 if (Object.defineProperty) {
281 Object.defineProperty(cooked, "raw", { value: raw });
282 }
283 else {
284 cooked.raw = raw;
285 }
286 return cooked;
287 }
288 ;
289 var __setModuleDefault = Object.create ? (function (o, v) {
290 Object.defineProperty(o, "default", { enumerable: true, value: v });
291 }) : function (o, v) {
292 o["default"] = v;
293 };
294 function __importStar(mod) {
295 if (mod && mod.__esModule)
296 return mod;
297 var result = {};
298 if (mod != null)
299 for (var k in mod)
300 if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
301 __createBinding(result, mod, k);
302 __setModuleDefault(result, mod);
303 return result;
304 }
305 function __importDefault(mod) {
306 return (mod && mod.__esModule) ? mod : { default: mod };
307 }
308 function __classPrivateFieldGet(receiver, state, kind, f) {
309 if (kind === "a" && !f)
310 throw new TypeError("Private accessor was defined without a getter");
311 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
312 throw new TypeError("Cannot read private member from an object whose class did not declare it");
313 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
314 }
315 function __classPrivateFieldSet(receiver, state, value, kind, f) {
316 if (kind === "m")
317 throw new TypeError("Private method is not writable");
318 if (kind === "a" && !f)
319 throw new TypeError("Private accessor was defined without a setter");
320 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
321 throw new TypeError("Cannot write private member to an object whose class did not declare it");
322 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
323 }
324
325 /**
326 * @license
327 * Copyright Google LLC All Rights Reserved.
328 *
329 * Use of this source code is governed by an MIT-style license that can be
330 * found in the LICENSE file at https://angular.io/license
331 */
332 /**
333 * The following are all the animations for the mat-select component, with each
334 * const containing the metadata for one animation.
335 *
336 * The values below match the implementation of the AngularJS Material mat-select animation.
337 * @docs-private
338 */
339 var matSelectAnimations = {
340 /**
341 * This animation ensures the select's overlay panel animation (transformPanel) is called when
342 * closing the select.
343 * This is needed due to https://github.com/angular/angular/issues/23302
344 */
345 transformPanelWrap: animations.trigger('transformPanelWrap', [
346 animations.transition('* => void', animations.query('@transformPanel', [animations.animateChild()], { optional: true }))
347 ]),
348 /**
349 * This animation transforms the select's overlay panel on and off the page.
350 *
351 * When the panel is attached to the DOM, it expands its width by the amount of padding, scales it
352 * up to 100% on the Y axis, fades in its border, and translates slightly up and to the
353 * side to ensure the option text correctly overlaps the trigger text.
354 *
355 * When the panel is removed from the DOM, it simply fades out linearly.
356 */
357 transformPanel: animations.trigger('transformPanel', [
358 animations.state('void', animations.style({
359 transform: 'scaleY(0.8)',
360 minWidth: '100%',
361 opacity: 0
362 })),
363 animations.state('showing', animations.style({
364 opacity: 1,
365 minWidth: 'calc(100% + 32px)',
366 transform: 'scaleY(1)'
367 })),
368 animations.state('showing-multiple', animations.style({
369 opacity: 1,
370 minWidth: 'calc(100% + 64px)',
371 transform: 'scaleY(1)'
372 })),
373 animations.transition('void => *', animations.animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
374 animations.transition('* => void', animations.animate('100ms 25ms linear', animations.style({ opacity: 0 })))
375 ])
376 };
377
378 /**
379 * @license
380 * Copyright Google LLC All Rights Reserved.
381 *
382 * Use of this source code is governed by an MIT-style license that can be
383 * found in the LICENSE file at https://angular.io/license
384 */
385 /**
386 * Returns an exception to be thrown when attempting to change a select's `multiple` option
387 * after initialization.
388 * @docs-private
389 */
390 function getMatSelectDynamicMultipleError() {
391 return Error('Cannot change `multiple` mode of select after initialization.');
392 }
393 /**
394 * Returns an exception to be thrown when attempting to assign a non-array value to a select
395 * in `multiple` mode. Note that `undefined` and `null` are still valid values to allow for
396 * resetting the value.
397 * @docs-private
398 */
399 function getMatSelectNonArrayValueError() {
400 return Error('Value must be an array in multiple-selection mode.');
401 }
402 /**
403 * Returns an exception to be thrown when assigning a non-function value to the comparator
404 * used to determine if a value corresponds to an option. Note that whether the function
405 * actually takes two values and returns a boolean is not checked.
406 */
407 function getMatSelectNonFunctionValueError() {
408 return Error('`compareWith` must be a function.');
409 }
410
411 var nextUniqueId = 0;
412 /**
413 * The following style constants are necessary to save here in order
414 * to properly calculate the alignment of the selected option over
415 * the trigger element.
416 */
417 /** The max height of the select's overlay panel. */
418 var SELECT_PANEL_MAX_HEIGHT = 256;
419 /** The panel's padding on the x-axis. */
420 var SELECT_PANEL_PADDING_X = 16;
421 /** The panel's x axis padding if it is indented (e.g. there is an option group). */
422 var SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
423 /** The height of the select items in `em` units. */
424 var SELECT_ITEM_HEIGHT_EM = 3;
425 // TODO(josephperrott): Revert to a constant after 2018 spec updates are fully merged.
426 /**
427 * Distance between the panel edge and the option text in
428 * multi-selection mode.
429 *
430 * Calculated as:
431 * (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40
432 * The padding is multiplied by 1.5 because the checkbox's margin is half the padding.
433 * The checkbox width is 16px.
434 */
435 var SELECT_MULTIPLE_PANEL_PADDING_X = SELECT_PANEL_PADDING_X * 1.5 + 16;
436 /**
437 * The select panel will only "fit" inside the viewport if it is positioned at
438 * this value or more away from the viewport boundary.
439 */
440 var SELECT_PANEL_VIEWPORT_PADDING = 8;
441 /** Injection token that determines the scroll handling while a select is open. */
442 var MAT_SELECT_SCROLL_STRATEGY = new core.InjectionToken('mat-select-scroll-strategy');
443 /** @docs-private */
444 function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
445 return function () { return overlay.scrollStrategies.reposition(); };
446 }
447 /** Injection token that can be used to provide the default options the select module. */
448 var MAT_SELECT_CONFIG = new core.InjectionToken('MAT_SELECT_CONFIG');
449 /** @docs-private */
450 var MAT_SELECT_SCROLL_STRATEGY_PROVIDER = {
451 provide: MAT_SELECT_SCROLL_STRATEGY,
452 deps: [overlay.Overlay],
453 useFactory: MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY,
454 };
455 /** Change event object that is emitted when the select value has changed. */
456 var MatSelectChange = /** @class */ (function () {
457 function MatSelectChange(
458 /** Reference to the select that emitted the change event. */
459 source,
460 /** Current value of the select that emitted the event. */
461 value) {
462 this.source = source;
463 this.value = value;
464 }
465 return MatSelectChange;
466 }());
467 // Boilerplate for applying mixins to MatSelect.
468 /** @docs-private */
469 var _MatSelectMixinBase = core$1.mixinDisableRipple(core$1.mixinTabIndex(core$1.mixinDisabled(core$1.mixinErrorState(/** @class */ (function () {
470 function class_1(_elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
471 this._elementRef = _elementRef;
472 this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
473 this._parentForm = _parentForm;
474 this._parentFormGroup = _parentFormGroup;
475 this.ngControl = ngControl;
476 }
477 return class_1;
478 }())))));
479 /**
480 * Injection token that can be used to reference instances of `MatSelectTrigger`. It serves as
481 * alternative token to the actual `MatSelectTrigger` class which could cause unnecessary
482 * retention of the class and its directive metadata.
483 */
484 var MAT_SELECT_TRIGGER = new core.InjectionToken('MatSelectTrigger');
485 /**
486 * Allows the user to customize the trigger that is displayed when the select has a value.
487 */
488 var MatSelectTrigger = /** @class */ (function () {
489 function MatSelectTrigger() {
490 }
491 return MatSelectTrigger;
492 }());
493 MatSelectTrigger.decorators = [
494 { type: core.Directive, args: [{
495 selector: 'mat-select-trigger',
496 providers: [{ provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger }],
497 },] }
498 ];
499 /** Base class with all of the `MatSelect` functionality. */
500 var _MatSelectBase = /** @class */ (function (_super) {
501 __extends(_MatSelectBase, _super);
502 function _MatSelectBase(_viewportRuler, _changeDetectorRef, _ngZone, _defaultErrorStateMatcher, elementRef, _dir, _parentForm, _parentFormGroup, _parentFormField, ngControl, tabIndex, scrollStrategyFactory, _liveAnnouncer, _defaultOptions) {
503 var _this = this;
504 var _a, _b, _c;
505 _this = _super.call(this, elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
506 _this._viewportRuler = _viewportRuler;
507 _this._changeDetectorRef = _changeDetectorRef;
508 _this._ngZone = _ngZone;
509 _this._dir = _dir;
510 _this._parentFormField = _parentFormField;
511 _this._liveAnnouncer = _liveAnnouncer;
512 _this._defaultOptions = _defaultOptions;
513 /** Whether or not the overlay panel is open. */
514 _this._panelOpen = false;
515 /** Comparison function to specify which option is displayed. Defaults to object equality. */
516 _this._compareWith = function (o1, o2) { return o1 === o2; };
517 /** Unique id for this input. */
518 _this._uid = "mat-select-" + nextUniqueId++;
519 /** Current `ariar-labelledby` value for the select trigger. */
520 _this._triggerAriaLabelledBy = null;
521 /** Emits whenever the component is destroyed. */
522 _this._destroy = new rxjs.Subject();
523 /** `View -> model callback called when value changes` */
524 _this._onChange = function () { };
525 /** `View -> model callback called when select has been touched` */
526 _this._onTouched = function () { };
527 /** ID for the DOM node containing the select's value. */
528 _this._valueId = "mat-select-value-" + nextUniqueId++;
529 /** Emits when the panel element is finished transforming in. */
530 _this._panelDoneAnimatingStream = new rxjs.Subject();
531 _this._overlayPanelClass = ((_a = _this._defaultOptions) === null || _a === void 0 ? void 0 : _a.overlayPanelClass) || '';
532 _this._focused = false;
533 /** A name for this control that can be used by `mat-form-field`. */
534 _this.controlType = 'mat-select';
535 _this._required = false;
536 _this._multiple = false;
537 _this._disableOptionCentering = (_c = (_b = _this._defaultOptions) === null || _b === void 0 ? void 0 : _b.disableOptionCentering) !== null && _c !== void 0 ? _c : false;
538 /** Aria label of the select. */
539 _this.ariaLabel = '';
540 /** Combined stream of all of the child options' change events. */
541 _this.optionSelectionChanges = rxjs.defer(function () {
542 var options = _this.options;
543 if (options) {
544 return options.changes.pipe(operators.startWith(options), operators.switchMap(function () { return rxjs.merge.apply(void 0, __spreadArray([], __read(options.map(function (option) { return option.onSelectionChange; })))); }));
545 }
546 return _this._ngZone.onStable
547 .pipe(operators.take(1), operators.switchMap(function () { return _this.optionSelectionChanges; }));
548 });
549 /** Event emitted when the select panel has been toggled. */
550 _this.openedChange = new core.EventEmitter();
551 /** Event emitted when the select has been opened. */
552 _this._openedStream = _this.openedChange.pipe(operators.filter(function (o) { return o; }), operators.map(function () { }));
553 /** Event emitted when the select has been closed. */
554 _this._closedStream = _this.openedChange.pipe(operators.filter(function (o) { return !o; }), operators.map(function () { }));
555 /** Event emitted when the selected value has been changed by the user. */
556 _this.selectionChange = new core.EventEmitter();
557 /**
558 * Event that emits whenever the raw value of the select changes. This is here primarily
559 * to facilitate the two-way binding for the `value` input.
560 * @docs-private
561 */
562 _this.valueChange = new core.EventEmitter();
563 if (_this.ngControl) {
564 // Note: we provide the value accessor through here, instead of
565 // the `providers` to avoid running into a circular import.
566 _this.ngControl.valueAccessor = _this;
567 }
568 // Note that we only want to set this when the defaults pass it in, otherwise it should
569 // stay as `undefined` so that it falls back to the default in the key manager.
570 if ((_defaultOptions === null || _defaultOptions === void 0 ? void 0 : _defaultOptions.typeaheadDebounceInterval) != null) {
571 _this._typeaheadDebounceInterval = _defaultOptions.typeaheadDebounceInterval;
572 }
573 _this._scrollStrategyFactory = scrollStrategyFactory;
574 _this._scrollStrategy = _this._scrollStrategyFactory();
575 _this.tabIndex = parseInt(tabIndex) || 0;
576 // Force setter to be called in case id was not specified.
577 _this.id = _this.id;
578 return _this;
579 }
580 Object.defineProperty(_MatSelectBase.prototype, "focused", {
581 /** Whether the select is focused. */
582 get: function () {
583 return this._focused || this._panelOpen;
584 },
585 enumerable: false,
586 configurable: true
587 });
588 Object.defineProperty(_MatSelectBase.prototype, "placeholder", {
589 /** Placeholder to be shown if no value has been selected. */
590 get: function () { return this._placeholder; },
591 set: function (value) {
592 this._placeholder = value;
593 this.stateChanges.next();
594 },
595 enumerable: false,
596 configurable: true
597 });
598 Object.defineProperty(_MatSelectBase.prototype, "required", {
599 /** Whether the component is required. */
600 get: function () { return this._required; },
601 set: function (value) {
602 this._required = coercion.coerceBooleanProperty(value);
603 this.stateChanges.next();
604 },
605 enumerable: false,
606 configurable: true
607 });
608 Object.defineProperty(_MatSelectBase.prototype, "multiple", {
609 /** Whether the user should be allowed to select multiple options. */
610 get: function () { return this._multiple; },
611 set: function (value) {
612 if (this._selectionModel && (typeof ngDevMode === 'undefined' || ngDevMode)) {
613 throw getMatSelectDynamicMultipleError();
614 }
615 this._multiple = coercion.coerceBooleanProperty(value);
616 },
617 enumerable: false,
618 configurable: true
619 });
620 Object.defineProperty(_MatSelectBase.prototype, "disableOptionCentering", {
621 /** Whether to center the active option over the trigger. */
622 get: function () { return this._disableOptionCentering; },
623 set: function (value) {
624 this._disableOptionCentering = coercion.coerceBooleanProperty(value);
625 },
626 enumerable: false,
627 configurable: true
628 });
629 Object.defineProperty(_MatSelectBase.prototype, "compareWith", {
630 /**
631 * Function to compare the option values with the selected values. The first argument
632 * is a value from an option. The second is a value from the selection. A boolean
633 * should be returned.
634 */
635 get: function () { return this._compareWith; },
636 set: function (fn) {
637 if (typeof fn !== 'function' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
638 throw getMatSelectNonFunctionValueError();
639 }
640 this._compareWith = fn;
641 if (this._selectionModel) {
642 // A different comparator means the selection could change.
643 this._initializeSelection();
644 }
645 },
646 enumerable: false,
647 configurable: true
648 });
649 Object.defineProperty(_MatSelectBase.prototype, "value", {
650 /** Value of the select control. */
651 get: function () { return this._value; },
652 set: function (newValue) {
653 // Always re-assign an array, because it might have been mutated.
654 if (newValue !== this._value || (this._multiple && Array.isArray(newValue))) {
655 if (this.options) {
656 this._setSelectionByValue(newValue);
657 }
658 this._value = newValue;
659 }
660 },
661 enumerable: false,
662 configurable: true
663 });
664 Object.defineProperty(_MatSelectBase.prototype, "typeaheadDebounceInterval", {
665 /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
666 get: function () { return this._typeaheadDebounceInterval; },
667 set: function (value) {
668 this._typeaheadDebounceInterval = coercion.coerceNumberProperty(value);
669 },
670 enumerable: false,
671 configurable: true
672 });
673 Object.defineProperty(_MatSelectBase.prototype, "id", {
674 /** Unique id of the element. */
675 get: function () { return this._id; },
676 set: function (value) {
677 this._id = value || this._uid;
678 this.stateChanges.next();
679 },
680 enumerable: false,
681 configurable: true
682 });
683 _MatSelectBase.prototype.ngOnInit = function () {
684 var _this = this;
685 this._selectionModel = new collections.SelectionModel(this.multiple);
686 this.stateChanges.next();
687 // We need `distinctUntilChanged` here, because some browsers will
688 // fire the animation end event twice for the same animation. See:
689 // https://github.com/angular/angular/issues/24084
690 this._panelDoneAnimatingStream
691 .pipe(operators.distinctUntilChanged(), operators.takeUntil(this._destroy))
692 .subscribe(function () { return _this._panelDoneAnimating(_this.panelOpen); });
693 };
694 _MatSelectBase.prototype.ngAfterContentInit = function () {
695 var _this = this;
696 this._initKeyManager();
697 this._selectionModel.changed.pipe(operators.takeUntil(this._destroy)).subscribe(function (event) {
698 event.added.forEach(function (option) { return option.select(); });
699 event.removed.forEach(function (option) { return option.deselect(); });
700 });
701 this.options.changes.pipe(operators.startWith(null), operators.takeUntil(this._destroy)).subscribe(function () {
702 _this._resetOptions();
703 _this._initializeSelection();
704 });
705 };
706 _MatSelectBase.prototype.ngDoCheck = function () {
707 var newAriaLabelledby = this._getTriggerAriaLabelledby();
708 // We have to manage setting the `aria-labelledby` ourselves, because part of its value
709 // is computed as a result of a content query which can cause this binding to trigger a
710 // "changed after checked" error.
711 if (newAriaLabelledby !== this._triggerAriaLabelledBy) {
712 var element = this._elementRef.nativeElement;
713 this._triggerAriaLabelledBy = newAriaLabelledby;
714 if (newAriaLabelledby) {
715 element.setAttribute('aria-labelledby', newAriaLabelledby);
716 }
717 else {
718 element.removeAttribute('aria-labelledby');
719 }
720 }
721 if (this.ngControl) {
722 this.updateErrorState();
723 }
724 };
725 _MatSelectBase.prototype.ngOnChanges = function (changes) {
726 // Updating the disabled state is handled by `mixinDisabled`, but we need to additionally let
727 // the parent form field know to run change detection when the disabled state changes.
728 if (changes['disabled']) {
729 this.stateChanges.next();
730 }
731 if (changes['typeaheadDebounceInterval'] && this._keyManager) {
732 this._keyManager.withTypeAhead(this._typeaheadDebounceInterval);
733 }
734 };
735 _MatSelectBase.prototype.ngOnDestroy = function () {
736 this._destroy.next();
737 this._destroy.complete();
738 this.stateChanges.complete();
739 };
740 /** Toggles the overlay panel open or closed. */
741 _MatSelectBase.prototype.toggle = function () {
742 this.panelOpen ? this.close() : this.open();
743 };
744 /** Opens the overlay panel. */
745 _MatSelectBase.prototype.open = function () {
746 if (this._canOpen()) {
747 this._panelOpen = true;
748 this._keyManager.withHorizontalOrientation(null);
749 this._highlightCorrectOption();
750 this._changeDetectorRef.markForCheck();
751 }
752 };
753 /** Closes the overlay panel and focuses the host element. */
754 _MatSelectBase.prototype.close = function () {
755 if (this._panelOpen) {
756 this._panelOpen = false;
757 this._keyManager.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');
758 this._changeDetectorRef.markForCheck();
759 this._onTouched();
760 }
761 };
762 /**
763 * Sets the select's value. Part of the ControlValueAccessor interface
764 * required to integrate with Angular's core forms API.
765 *
766 * @param value New value to be written to the model.
767 */
768 _MatSelectBase.prototype.writeValue = function (value) {
769 this.value = value;
770 };
771 /**
772 * Saves a callback function to be invoked when the select's value
773 * changes from user input. Part of the ControlValueAccessor interface
774 * required to integrate with Angular's core forms API.
775 *
776 * @param fn Callback to be triggered when the value changes.
777 */
778 _MatSelectBase.prototype.registerOnChange = function (fn) {
779 this._onChange = fn;
780 };
781 /**
782 * Saves a callback function to be invoked when the select is blurred
783 * by the user. Part of the ControlValueAccessor interface required
784 * to integrate with Angular's core forms API.
785 *
786 * @param fn Callback to be triggered when the component has been touched.
787 */
788 _MatSelectBase.prototype.registerOnTouched = function (fn) {
789 this._onTouched = fn;
790 };
791 /**
792 * Disables the select. Part of the ControlValueAccessor interface required
793 * to integrate with Angular's core forms API.
794 *
795 * @param isDisabled Sets whether the component is disabled.
796 */
797 _MatSelectBase.prototype.setDisabledState = function (isDisabled) {
798 this.disabled = isDisabled;
799 this._changeDetectorRef.markForCheck();
800 this.stateChanges.next();
801 };
802 Object.defineProperty(_MatSelectBase.prototype, "panelOpen", {
803 /** Whether or not the overlay panel is open. */
804 get: function () {
805 return this._panelOpen;
806 },
807 enumerable: false,
808 configurable: true
809 });
810 Object.defineProperty(_MatSelectBase.prototype, "selected", {
811 /** The currently selected option. */
812 get: function () {
813 var _a, _b;
814 return this.multiple ? (((_a = this._selectionModel) === null || _a === void 0 ? void 0 : _a.selected) || []) :
815 (_b = this._selectionModel) === null || _b === void 0 ? void 0 : _b.selected[0];
816 },
817 enumerable: false,
818 configurable: true
819 });
820 Object.defineProperty(_MatSelectBase.prototype, "triggerValue", {
821 /** The value displayed in the trigger. */
822 get: function () {
823 if (this.empty) {
824 return '';
825 }
826 if (this._multiple) {
827 var selectedOptions = this._selectionModel.selected.map(function (option) { return option.viewValue; });
828 if (this._isRtl()) {
829 selectedOptions.reverse();
830 }
831 // TODO(crisbeto): delimiter should be configurable for proper localization.
832 return selectedOptions.join(', ');
833 }
834 return this._selectionModel.selected[0].viewValue;
835 },
836 enumerable: false,
837 configurable: true
838 });
839 /** Whether the element is in RTL mode. */
840 _MatSelectBase.prototype._isRtl = function () {
841 return this._dir ? this._dir.value === 'rtl' : false;
842 };
843 /** Handles all keydown events on the select. */
844 _MatSelectBase.prototype._handleKeydown = function (event) {
845 if (!this.disabled) {
846 this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
847 }
848 };
849 /** Handles keyboard events while the select is closed. */
850 _MatSelectBase.prototype._handleClosedKeydown = function (event) {
851 var keyCode = event.keyCode;
852 var isArrowKey = keyCode === keycodes.DOWN_ARROW || keyCode === keycodes.UP_ARROW ||
853 keyCode === keycodes.LEFT_ARROW || keyCode === keycodes.RIGHT_ARROW;
854 var isOpenKey = keyCode === keycodes.ENTER || keyCode === keycodes.SPACE;
855 var manager = this._keyManager;
856 // Open the select on ALT + arrow key to match the native <select>
857 if (!manager.isTyping() && (isOpenKey && !keycodes.hasModifierKey(event)) ||
858 ((this.multiple || event.altKey) && isArrowKey)) {
859 event.preventDefault(); // prevents the page from scrolling down when pressing space
860 this.open();
861 }
862 else if (!this.multiple) {
863 var previouslySelectedOption = this.selected;
864 manager.onKeydown(event);
865 var selectedOption = this.selected;
866 // Since the value has changed, we need to announce it ourselves.
867 if (selectedOption && previouslySelectedOption !== selectedOption) {
868 // We set a duration on the live announcement, because we want the live element to be
869 // cleared after a while so that users can't navigate to it using the arrow keys.
870 this._liveAnnouncer.announce(selectedOption.viewValue, 10000);
871 }
872 }
873 };
874 /** Handles keyboard events when the selected is open. */
875 _MatSelectBase.prototype._handleOpenKeydown = function (event) {
876 var manager = this._keyManager;
877 var keyCode = event.keyCode;
878 var isArrowKey = keyCode === keycodes.DOWN_ARROW || keyCode === keycodes.UP_ARROW;
879 var isTyping = manager.isTyping();
880 if (isArrowKey && event.altKey) {
881 // Close the select on ALT + arrow key to match the native <select>
882 event.preventDefault();
883 this.close();
884 // Don't do anything in this case if the user is typing,
885 // because the typing sequence can include the space key.
886 }
887 else if (!isTyping && (keyCode === keycodes.ENTER || keyCode === keycodes.SPACE) && manager.activeItem &&
888 !keycodes.hasModifierKey(event)) {
889 event.preventDefault();
890 manager.activeItem._selectViaInteraction();
891 }
892 else if (!isTyping && this._multiple && keyCode === keycodes.A && event.ctrlKey) {
893 event.preventDefault();
894 var hasDeselectedOptions_1 = this.options.some(function (opt) { return !opt.disabled && !opt.selected; });
895 this.options.forEach(function (option) {
896 if (!option.disabled) {
897 hasDeselectedOptions_1 ? option.select() : option.deselect();
898 }
899 });
900 }
901 else {
902 var previouslyFocusedIndex = manager.activeItemIndex;
903 manager.onKeydown(event);
904 if (this._multiple && isArrowKey && event.shiftKey && manager.activeItem &&
905 manager.activeItemIndex !== previouslyFocusedIndex) {
906 manager.activeItem._selectViaInteraction();
907 }
908 }
909 };
910 _MatSelectBase.prototype._onFocus = function () {
911 if (!this.disabled) {
912 this._focused = true;
913 this.stateChanges.next();
914 }
915 };
916 /**
917 * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
918 * "blur" to the panel when it opens, causing a false positive.
919 */
920 _MatSelectBase.prototype._onBlur = function () {
921 this._focused = false;
922 if (!this.disabled && !this.panelOpen) {
923 this._onTouched();
924 this._changeDetectorRef.markForCheck();
925 this.stateChanges.next();
926 }
927 };
928 /**
929 * Callback that is invoked when the overlay panel has been attached.
930 */
931 _MatSelectBase.prototype._onAttached = function () {
932 var _this = this;
933 this._overlayDir.positionChange.pipe(operators.take(1)).subscribe(function () {
934 _this._changeDetectorRef.detectChanges();
935 _this._positioningSettled();
936 });
937 };
938 /** Returns the theme to be used on the panel. */
939 _MatSelectBase.prototype._getPanelTheme = function () {
940 return this._parentFormField ? "mat-" + this._parentFormField.color : '';
941 };
942 Object.defineProperty(_MatSelectBase.prototype, "empty", {
943 /** Whether the select has a value. */
944 get: function () {
945 return !this._selectionModel || this._selectionModel.isEmpty();
946 },
947 enumerable: false,
948 configurable: true
949 });
950 _MatSelectBase.prototype._initializeSelection = function () {
951 var _this = this;
952 // Defer setting the value in order to avoid the "Expression
953 // has changed after it was checked" errors from Angular.
954 Promise.resolve().then(function () {
955 _this._setSelectionByValue(_this.ngControl ? _this.ngControl.value : _this._value);
956 _this.stateChanges.next();
957 });
958 };
959 /**
960 * Sets the selected option based on a value. If no option can be
961 * found with the designated value, the select trigger is cleared.
962 */
963 _MatSelectBase.prototype._setSelectionByValue = function (value) {
964 var _this = this;
965 this._selectionModel.selected.forEach(function (option) { return option.setInactiveStyles(); });
966 this._selectionModel.clear();
967 if (this.multiple && value) {
968 if (!Array.isArray(value) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
969 throw getMatSelectNonArrayValueError();
970 }
971 value.forEach(function (currentValue) { return _this._selectValue(currentValue); });
972 this._sortValues();
973 }
974 else {
975 var correspondingOption = this._selectValue(value);
976 // Shift focus to the active item. Note that we shouldn't do this in multiple
977 // mode, because we don't know what option the user interacted with last.
978 if (correspondingOption) {
979 this._keyManager.updateActiveItem(correspondingOption);
980 }
981 else if (!this.panelOpen) {
982 // Otherwise reset the highlighted option. Note that we only want to do this while
983 // closed, because doing it while open can shift the user's focus unnecessarily.
984 this._keyManager.updateActiveItem(-1);
985 }
986 }
987 this._changeDetectorRef.markForCheck();
988 };
989 /**
990 * Finds and selects and option based on its value.
991 * @returns Option that has the corresponding value.
992 */
993 _MatSelectBase.prototype._selectValue = function (value) {
994 var _this = this;
995 var correspondingOption = this.options.find(function (option) {
996 // Skip options that are already in the model. This allows us to handle cases
997 // where the same primitive value is selected multiple times.
998 if (_this._selectionModel.isSelected(option)) {
999 return false;
1000 }
1001 try {
1002 // Treat null as a special reset value.
1003 return option.value != null && _this._compareWith(option.value, value);
1004 }
1005 catch (error) {
1006 if (typeof ngDevMode === 'undefined' || ngDevMode) {
1007 // Notify developers of errors in their comparator.
1008 console.warn(error);
1009 }
1010 return false;
1011 }
1012 });
1013 if (correspondingOption) {
1014 this._selectionModel.select(correspondingOption);
1015 }
1016 return correspondingOption;
1017 };
1018 /** Sets up a key manager to listen to keyboard events on the overlay panel. */
1019 _MatSelectBase.prototype._initKeyManager = function () {
1020 var _this = this;
1021 this._keyManager = new a11y.ActiveDescendantKeyManager(this.options)
1022 .withTypeAhead(this._typeaheadDebounceInterval)
1023 .withVerticalOrientation()
1024 .withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr')
1025 .withHomeAndEnd()
1026 .withAllowedModifierKeys(['shiftKey']);
1027 this._keyManager.tabOut.pipe(operators.takeUntil(this._destroy)).subscribe(function () {
1028 if (_this.panelOpen) {
1029 // Select the active item when tabbing away. This is consistent with how the native
1030 // select behaves. Note that we only want to do this in single selection mode.
1031 if (!_this.multiple && _this._keyManager.activeItem) {
1032 _this._keyManager.activeItem._selectViaInteraction();
1033 }
1034 // Restore focus to the trigger before closing. Ensures that the focus
1035 // position won't be lost if the user got focus into the overlay.
1036 _this.focus();
1037 _this.close();
1038 }
1039 });
1040 this._keyManager.change.pipe(operators.takeUntil(this._destroy)).subscribe(function () {
1041 if (_this._panelOpen && _this.panel) {
1042 _this._scrollOptionIntoView(_this._keyManager.activeItemIndex || 0);
1043 }
1044 else if (!_this._panelOpen && !_this.multiple && _this._keyManager.activeItem) {
1045 _this._keyManager.activeItem._selectViaInteraction();
1046 }
1047 });
1048 };
1049 /** Drops current option subscriptions and IDs and resets from scratch. */
1050 _MatSelectBase.prototype._resetOptions = function () {
1051 var _this = this;
1052 var changedOrDestroyed = rxjs.merge(this.options.changes, this._destroy);
1053 this.optionSelectionChanges.pipe(operators.takeUntil(changedOrDestroyed)).subscribe(function (event) {
1054 _this._onSelect(event.source, event.isUserInput);
1055 if (event.isUserInput && !_this.multiple && _this._panelOpen) {
1056 _this.close();
1057 _this.focus();
1058 }
1059 });
1060 // Listen to changes in the internal state of the options and react accordingly.
1061 // Handles cases like the labels of the selected options changing.
1062 rxjs.merge.apply(void 0, __spreadArray([], __read(this.options.map(function (option) { return option._stateChanges; })))).pipe(operators.takeUntil(changedOrDestroyed))
1063 .subscribe(function () {
1064 _this._changeDetectorRef.markForCheck();
1065 _this.stateChanges.next();
1066 });
1067 };
1068 /** Invoked when an option is clicked. */
1069 _MatSelectBase.prototype._onSelect = function (option, isUserInput) {
1070 var wasSelected = this._selectionModel.isSelected(option);
1071 if (option.value == null && !this._multiple) {
1072 option.deselect();
1073 this._selectionModel.clear();
1074 if (this.value != null) {
1075 this._propagateChanges(option.value);
1076 }
1077 }
1078 else {
1079 if (wasSelected !== option.selected) {
1080 option.selected ? this._selectionModel.select(option) :
1081 this._selectionModel.deselect(option);
1082 }
1083 if (isUserInput) {
1084 this._keyManager.setActiveItem(option);
1085 }
1086 if (this.multiple) {
1087 this._sortValues();
1088 if (isUserInput) {
1089 // In case the user selected the option with their mouse, we
1090 // want to restore focus back to the trigger, in order to
1091 // prevent the select keyboard controls from clashing with
1092 // the ones from `mat-option`.
1093 this.focus();
1094 }
1095 }
1096 }
1097 if (wasSelected !== this._selectionModel.isSelected(option)) {
1098 this._propagateChanges();
1099 }
1100 this.stateChanges.next();
1101 };
1102 /** Sorts the selected values in the selected based on their order in the panel. */
1103 _MatSelectBase.prototype._sortValues = function () {
1104 var _this = this;
1105 if (this.multiple) {
1106 var options_1 = this.options.toArray();
1107 this._selectionModel.sort(function (a, b) {
1108 return _this.sortComparator ? _this.sortComparator(a, b, options_1) :
1109 options_1.indexOf(a) - options_1.indexOf(b);
1110 });
1111 this.stateChanges.next();
1112 }
1113 };
1114 /** Emits change event to set the model value. */
1115 _MatSelectBase.prototype._propagateChanges = function (fallbackValue) {
1116 var valueToEmit = null;
1117 if (this.multiple) {
1118 valueToEmit = this.selected.map(function (option) { return option.value; });
1119 }
1120 else {
1121 valueToEmit = this.selected ? this.selected.value : fallbackValue;
1122 }
1123 this._value = valueToEmit;
1124 this.valueChange.emit(valueToEmit);
1125 this._onChange(valueToEmit);
1126 this.selectionChange.emit(this._getChangeEvent(valueToEmit));
1127 this._changeDetectorRef.markForCheck();
1128 };
1129 /**
1130 * Highlights the selected item. If no option is selected, it will highlight
1131 * the first item instead.
1132 */
1133 _MatSelectBase.prototype._highlightCorrectOption = function () {
1134 if (this._keyManager) {
1135 if (this.empty) {
1136 this._keyManager.setFirstItemActive();
1137 }
1138 else {
1139 this._keyManager.setActiveItem(this._selectionModel.selected[0]);
1140 }
1141 }
1142 };
1143 /** Whether the panel is allowed to open. */
1144 _MatSelectBase.prototype._canOpen = function () {
1145 var _a;
1146 return !this._panelOpen && !this.disabled && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0;
1147 };
1148 /** Focuses the select element. */
1149 _MatSelectBase.prototype.focus = function (options) {
1150 this._elementRef.nativeElement.focus(options);
1151 };
1152 /** Gets the aria-labelledby for the select panel. */
1153 _MatSelectBase.prototype._getPanelAriaLabelledby = function () {
1154 var _a;
1155 if (this.ariaLabel) {
1156 return null;
1157 }
1158 var labelId = (_a = this._parentFormField) === null || _a === void 0 ? void 0 : _a.getLabelId();
1159 var labelExpression = (labelId ? labelId + ' ' : '');
1160 return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;
1161 };
1162 /** Determines the `aria-activedescendant` to be set on the host. */
1163 _MatSelectBase.prototype._getAriaActiveDescendant = function () {
1164 if (this.panelOpen && this._keyManager && this._keyManager.activeItem) {
1165 return this._keyManager.activeItem.id;
1166 }
1167 return null;
1168 };
1169 /** Gets the aria-labelledby of the select component trigger. */
1170 _MatSelectBase.prototype._getTriggerAriaLabelledby = function () {
1171 var _a;
1172 if (this.ariaLabel) {
1173 return null;
1174 }
1175 var labelId = (_a = this._parentFormField) === null || _a === void 0 ? void 0 : _a.getLabelId();
1176 var value = (labelId ? labelId + ' ' : '') + this._valueId;
1177 if (this.ariaLabelledby) {
1178 value += ' ' + this.ariaLabelledby;
1179 }
1180 return value;
1181 };
1182 /** Called when the overlay panel is done animating. */
1183 _MatSelectBase.prototype._panelDoneAnimating = function (isOpen) {
1184 this.openedChange.emit(isOpen);
1185 };
1186 /**
1187 * Implemented as part of MatFormFieldControl.
1188 * @docs-private
1189 */
1190 _MatSelectBase.prototype.setDescribedByIds = function (ids) {
1191 this._ariaDescribedby = ids.join(' ');
1192 };
1193 /**
1194 * Implemented as part of MatFormFieldControl.
1195 * @docs-private
1196 */
1197 _MatSelectBase.prototype.onContainerClick = function () {
1198 this.focus();
1199 this.open();
1200 };
1201 Object.defineProperty(_MatSelectBase.prototype, "shouldLabelFloat", {
1202 /**
1203 * Implemented as part of MatFormFieldControl.
1204 * @docs-private
1205 */
1206 get: function () {
1207 return this._panelOpen || !this.empty || (this._focused && !!this._placeholder);
1208 },
1209 enumerable: false,
1210 configurable: true
1211 });
1212 return _MatSelectBase;
1213 }(_MatSelectMixinBase));
1214 _MatSelectBase.decorators = [
1215 { type: core.Directive }
1216 ];
1217 _MatSelectBase.ctorParameters = function () { return [
1218 { type: scrolling.ViewportRuler },
1219 { type: core.ChangeDetectorRef },
1220 { type: core.NgZone },
1221 { type: core$1.ErrorStateMatcher },
1222 { type: core.ElementRef },
1223 { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
1224 { type: forms.NgForm, decorators: [{ type: core.Optional }] },
1225 { type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
1226 { type: formField.MatFormField, decorators: [{ type: core.Optional }, { type: core.Inject, args: [formField.MAT_FORM_FIELD,] }] },
1227 { type: forms.NgControl, decorators: [{ type: core.Self }, { type: core.Optional }] },
1228 { type: String, decorators: [{ type: core.Attribute, args: ['tabindex',] }] },
1229 { type: undefined, decorators: [{ type: core.Inject, args: [MAT_SELECT_SCROLL_STRATEGY,] }] },
1230 { type: a11y.LiveAnnouncer },
1231 { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MAT_SELECT_CONFIG,] }] }
1232 ]; };
1233 _MatSelectBase.propDecorators = {
1234 trigger: [{ type: core.ViewChild, args: ['trigger',] }],
1235 panel: [{ type: core.ViewChild, args: ['panel',] }],
1236 _overlayDir: [{ type: core.ViewChild, args: [overlay.CdkConnectedOverlay,] }],
1237 panelClass: [{ type: core.Input }],
1238 placeholder: [{ type: core.Input }],
1239 required: [{ type: core.Input }],
1240 multiple: [{ type: core.Input }],
1241 disableOptionCentering: [{ type: core.Input }],
1242 compareWith: [{ type: core.Input }],
1243 value: [{ type: core.Input }],
1244 ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
1245 ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
1246 errorStateMatcher: [{ type: core.Input }],
1247 typeaheadDebounceInterval: [{ type: core.Input }],
1248 sortComparator: [{ type: core.Input }],
1249 id: [{ type: core.Input }],
1250 openedChange: [{ type: core.Output }],
1251 _openedStream: [{ type: core.Output, args: ['opened',] }],
1252 _closedStream: [{ type: core.Output, args: ['closed',] }],
1253 selectionChange: [{ type: core.Output }],
1254 valueChange: [{ type: core.Output }]
1255 };
1256 var MatSelect = /** @class */ (function (_super) {
1257 __extends(MatSelect, _super);
1258 function MatSelect() {
1259 var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
1260 /** The scroll position of the overlay panel, calculated to center the selected option. */
1261 _this._scrollTop = 0;
1262 /** The cached font-size of the trigger element. */
1263 _this._triggerFontSize = 0;
1264 /** The value of the select panel's transform-origin property. */
1265 _this._transformOrigin = 'top';
1266 /**
1267 * The y-offset of the overlay panel in relation to the trigger's top start corner.
1268 * This must be adjusted to align the selected option text over the trigger text.
1269 * when the panel opens. Will change based on the y-position of the selected option.
1270 */
1271 _this._offsetY = 0;
1272 _this._positions = [
1273 {
1274 originX: 'start',
1275 originY: 'top',
1276 overlayX: 'start',
1277 overlayY: 'top',
1278 },
1279 {
1280 originX: 'start',
1281 originY: 'bottom',
1282 overlayX: 'start',
1283 overlayY: 'bottom',
1284 },
1285 ];
1286 return _this;
1287 }
1288 /**
1289 * Calculates the scroll position of the select's overlay panel.
1290 *
1291 * Attempts to center the selected option in the panel. If the option is
1292 * too high or too low in the panel to be scrolled to the center, it clamps the
1293 * scroll position to the min or max scroll positions respectively.
1294 */
1295 MatSelect.prototype._calculateOverlayScroll = function (selectedIndex, scrollBuffer, maxScroll) {
1296 var itemHeight = this._getItemHeight();
1297 var optionOffsetFromScrollTop = itemHeight * selectedIndex;
1298 var halfOptionHeight = itemHeight / 2;
1299 // Starts at the optionOffsetFromScrollTop, which scrolls the option to the top of the
1300 // scroll container, then subtracts the scroll buffer to scroll the option down to
1301 // the center of the overlay panel. Half the option height must be re-added to the
1302 // scrollTop so the option is centered based on its middle, not its top edge.
1303 var optimalScrollPosition = optionOffsetFromScrollTop - scrollBuffer + halfOptionHeight;
1304 return Math.min(Math.max(0, optimalScrollPosition), maxScroll);
1305 };
1306 MatSelect.prototype.ngOnInit = function () {
1307 var _this = this;
1308 _super.prototype.ngOnInit.call(this);
1309 this._viewportRuler.change().pipe(operators.takeUntil(this._destroy)).subscribe(function () {
1310 if (_this.panelOpen) {
1311 _this._triggerRect = _this.trigger.nativeElement.getBoundingClientRect();
1312 _this._changeDetectorRef.markForCheck();
1313 }
1314 });
1315 };
1316 MatSelect.prototype.open = function () {
1317 var _this = this;
1318 if (_super.prototype._canOpen.call(this)) {
1319 _super.prototype.open.call(this);
1320 this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();
1321 // Note: The computed font-size will be a string pixel value (e.g. "16px").
1322 // `parseInt` ignores the trailing 'px' and converts this to a number.
1323 this._triggerFontSize =
1324 parseInt(getComputedStyle(this.trigger.nativeElement).fontSize || '0');
1325 this._calculateOverlayPosition();
1326 // Set the font size on the panel element once it exists.
1327 this._ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
1328 if (_this._triggerFontSize && _this._overlayDir.overlayRef &&
1329 _this._overlayDir.overlayRef.overlayElement) {
1330 _this._overlayDir.overlayRef.overlayElement.style.fontSize = _this._triggerFontSize + "px";
1331 }
1332 });
1333 }
1334 };
1335 /** Scrolls the active option into view. */
1336 MatSelect.prototype._scrollOptionIntoView = function (index) {
1337 var labelCount = core$1._countGroupLabelsBeforeOption(index, this.options, this.optionGroups);
1338 var itemHeight = this._getItemHeight();
1339 if (index === 0 && labelCount === 1) {
1340 // If we've got one group label before the option and we're at the top option,
1341 // scroll the list to the top. This is better UX than scrolling the list to the
1342 // top of the option, because it allows the user to read the top group's label.
1343 this.panel.nativeElement.scrollTop = 0;
1344 }
1345 else {
1346 this.panel.nativeElement.scrollTop = core$1._getOptionScrollPosition((index + labelCount) * itemHeight, itemHeight, this.panel.nativeElement.scrollTop, SELECT_PANEL_MAX_HEIGHT);
1347 }
1348 };
1349 MatSelect.prototype._positioningSettled = function () {
1350 this._calculateOverlayOffsetX();
1351 this.panel.nativeElement.scrollTop = this._scrollTop;
1352 };
1353 MatSelect.prototype._panelDoneAnimating = function (isOpen) {
1354 if (this.panelOpen) {
1355 this._scrollTop = 0;
1356 }
1357 else {
1358 this._overlayDir.offsetX = 0;
1359 this._changeDetectorRef.markForCheck();
1360 }
1361 _super.prototype._panelDoneAnimating.call(this, isOpen);
1362 };
1363 MatSelect.prototype._getChangeEvent = function (value) {
1364 return new MatSelectChange(this, value);
1365 };
1366 /**
1367 * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
1368 * This must be adjusted to align the selected option text over the trigger text when
1369 * the panel opens. Will change based on LTR or RTL text direction. Note that the offset
1370 * can't be calculated until the panel has been attached, because we need to know the
1371 * content width in order to constrain the panel within the viewport.
1372 */
1373 MatSelect.prototype._calculateOverlayOffsetX = function () {
1374 var overlayRect = this._overlayDir.overlayRef.overlayElement.getBoundingClientRect();
1375 var viewportSize = this._viewportRuler.getViewportSize();
1376 var isRtl = this._isRtl();
1377 var paddingWidth = this.multiple ? SELECT_MULTIPLE_PANEL_PADDING_X + SELECT_PANEL_PADDING_X :
1378 SELECT_PANEL_PADDING_X * 2;
1379 var offsetX;
1380 // Adjust the offset, depending on the option padding.
1381 if (this.multiple) {
1382 offsetX = SELECT_MULTIPLE_PANEL_PADDING_X;
1383 }
1384 else if (this.disableOptionCentering) {
1385 offsetX = SELECT_PANEL_PADDING_X;
1386 }
1387 else {
1388 var selected = this._selectionModel.selected[0] || this.options.first;
1389 offsetX = selected && selected.group ? SELECT_PANEL_INDENT_PADDING_X : SELECT_PANEL_PADDING_X;
1390 }
1391 // Invert the offset in LTR.
1392 if (!isRtl) {
1393 offsetX *= -1;
1394 }
1395 // Determine how much the select overflows on each side.
1396 var leftOverflow = 0 - (overlayRect.left + offsetX - (isRtl ? paddingWidth : 0));
1397 var rightOverflow = overlayRect.right + offsetX - viewportSize.width
1398 + (isRtl ? 0 : paddingWidth);
1399 // If the element overflows on either side, reduce the offset to allow it to fit.
1400 if (leftOverflow > 0) {
1401 offsetX += leftOverflow + SELECT_PANEL_VIEWPORT_PADDING;
1402 }
1403 else if (rightOverflow > 0) {
1404 offsetX -= rightOverflow + SELECT_PANEL_VIEWPORT_PADDING;
1405 }
1406 // Set the offset directly in order to avoid having to go through change detection and
1407 // potentially triggering "changed after it was checked" errors. Round the value to avoid
1408 // blurry content in some browsers.
1409 this._overlayDir.offsetX = Math.round(offsetX);
1410 this._overlayDir.overlayRef.updatePosition();
1411 };
1412 /**
1413 * Calculates the y-offset of the select's overlay panel in relation to the
1414 * top start corner of the trigger. It has to be adjusted in order for the
1415 * selected option to be aligned over the trigger when the panel opens.
1416 */
1417 MatSelect.prototype._calculateOverlayOffsetY = function (selectedIndex, scrollBuffer, maxScroll) {
1418 var itemHeight = this._getItemHeight();
1419 var optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2;
1420 var maxOptionsDisplayed = Math.floor(SELECT_PANEL_MAX_HEIGHT / itemHeight);
1421 var optionOffsetFromPanelTop;
1422 // Disable offset if requested by user by returning 0 as value to offset
1423 if (this.disableOptionCentering) {
1424 return 0;
1425 }
1426 if (this._scrollTop === 0) {
1427 optionOffsetFromPanelTop = selectedIndex * itemHeight;
1428 }
1429 else if (this._scrollTop === maxScroll) {
1430 var firstDisplayedIndex = this._getItemCount() - maxOptionsDisplayed;
1431 var selectedDisplayIndex = selectedIndex - firstDisplayedIndex;
1432 // The first item is partially out of the viewport. Therefore we need to calculate what
1433 // portion of it is shown in the viewport and account for it in our offset.
1434 var partialItemHeight = itemHeight - (this._getItemCount() * itemHeight - SELECT_PANEL_MAX_HEIGHT) % itemHeight;
1435 // Because the panel height is longer than the height of the options alone,
1436 // there is always extra padding at the top or bottom of the panel. When
1437 // scrolled to the very bottom, this padding is at the top of the panel and
1438 // must be added to the offset.
1439 optionOffsetFromPanelTop = selectedDisplayIndex * itemHeight + partialItemHeight;
1440 }
1441 else {
1442 // If the option was scrolled to the middle of the panel using a scroll buffer,
1443 // its offset will be the scroll buffer minus the half height that was added to
1444 // center it.
1445 optionOffsetFromPanelTop = scrollBuffer - itemHeight / 2;
1446 }
1447 // The final offset is the option's offset from the top, adjusted for the height difference,
1448 // multiplied by -1 to ensure that the overlay moves in the correct direction up the page.
1449 // The value is rounded to prevent some browsers from blurring the content.
1450 return Math.round(optionOffsetFromPanelTop * -1 - optionHeightAdjustment);
1451 };
1452 /**
1453 * Checks that the attempted overlay position will fit within the viewport.
1454 * If it will not fit, tries to adjust the scroll position and the associated
1455 * y-offset so the panel can open fully on-screen. If it still won't fit,
1456 * sets the offset back to 0 to allow the fallback position to take over.
1457 */
1458 MatSelect.prototype._checkOverlayWithinViewport = function (maxScroll) {
1459 var itemHeight = this._getItemHeight();
1460 var viewportSize = this._viewportRuler.getViewportSize();
1461 var topSpaceAvailable = this._triggerRect.top - SELECT_PANEL_VIEWPORT_PADDING;
1462 var bottomSpaceAvailable = viewportSize.height - this._triggerRect.bottom - SELECT_PANEL_VIEWPORT_PADDING;
1463 var panelHeightTop = Math.abs(this._offsetY);
1464 var totalPanelHeight = Math.min(this._getItemCount() * itemHeight, SELECT_PANEL_MAX_HEIGHT);
1465 var panelHeightBottom = totalPanelHeight - panelHeightTop - this._triggerRect.height;
1466 if (panelHeightBottom > bottomSpaceAvailable) {
1467 this._adjustPanelUp(panelHeightBottom, bottomSpaceAvailable);
1468 }
1469 else if (panelHeightTop > topSpaceAvailable) {
1470 this._adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll);
1471 }
1472 else {
1473 this._transformOrigin = this._getOriginBasedOnOption();
1474 }
1475 };
1476 /** Adjusts the overlay panel up to fit in the viewport. */
1477 MatSelect.prototype._adjustPanelUp = function (panelHeightBottom, bottomSpaceAvailable) {
1478 // Browsers ignore fractional scroll offsets, so we need to round.
1479 var distanceBelowViewport = Math.round(panelHeightBottom - bottomSpaceAvailable);
1480 // Scrolls the panel up by the distance it was extending past the boundary, then
1481 // adjusts the offset by that amount to move the panel up into the viewport.
1482 this._scrollTop -= distanceBelowViewport;
1483 this._offsetY -= distanceBelowViewport;
1484 this._transformOrigin = this._getOriginBasedOnOption();
1485 // If the panel is scrolled to the very top, it won't be able to fit the panel
1486 // by scrolling, so set the offset to 0 to allow the fallback position to take
1487 // effect.
1488 if (this._scrollTop <= 0) {
1489 this._scrollTop = 0;
1490 this._offsetY = 0;
1491 this._transformOrigin = "50% bottom 0px";
1492 }
1493 };
1494 /** Adjusts the overlay panel down to fit in the viewport. */
1495 MatSelect.prototype._adjustPanelDown = function (panelHeightTop, topSpaceAvailable, maxScroll) {
1496 // Browsers ignore fractional scroll offsets, so we need to round.
1497 var distanceAboveViewport = Math.round(panelHeightTop - topSpaceAvailable);
1498 // Scrolls the panel down by the distance it was extending past the boundary, then
1499 // adjusts the offset by that amount to move the panel down into the viewport.
1500 this._scrollTop += distanceAboveViewport;
1501 this._offsetY += distanceAboveViewport;
1502 this._transformOrigin = this._getOriginBasedOnOption();
1503 // If the panel is scrolled to the very bottom, it won't be able to fit the
1504 // panel by scrolling, so set the offset to 0 to allow the fallback position
1505 // to take effect.
1506 if (this._scrollTop >= maxScroll) {
1507 this._scrollTop = maxScroll;
1508 this._offsetY = 0;
1509 this._transformOrigin = "50% top 0px";
1510 return;
1511 }
1512 };
1513 /** Calculates the scroll position and x- and y-offsets of the overlay panel. */
1514 MatSelect.prototype._calculateOverlayPosition = function () {
1515 var itemHeight = this._getItemHeight();
1516 var items = this._getItemCount();
1517 var panelHeight = Math.min(items * itemHeight, SELECT_PANEL_MAX_HEIGHT);
1518 var scrollContainerHeight = items * itemHeight;
1519 // The farthest the panel can be scrolled before it hits the bottom
1520 var maxScroll = scrollContainerHeight - panelHeight;
1521 // If no value is selected we open the popup to the first item.
1522 var selectedOptionOffset;
1523 if (this.empty) {
1524 selectedOptionOffset = 0;
1525 }
1526 else {
1527 selectedOptionOffset =
1528 Math.max(this.options.toArray().indexOf(this._selectionModel.selected[0]), 0);
1529 }
1530 selectedOptionOffset += core$1._countGroupLabelsBeforeOption(selectedOptionOffset, this.options, this.optionGroups);
1531 // We must maintain a scroll buffer so the selected option will be scrolled to the
1532 // center of the overlay panel rather than the top.
1533 var scrollBuffer = panelHeight / 2;
1534 this._scrollTop = this._calculateOverlayScroll(selectedOptionOffset, scrollBuffer, maxScroll);
1535 this._offsetY = this._calculateOverlayOffsetY(selectedOptionOffset, scrollBuffer, maxScroll);
1536 this._checkOverlayWithinViewport(maxScroll);
1537 };
1538 /** Sets the transform origin point based on the selected option. */
1539 MatSelect.prototype._getOriginBasedOnOption = function () {
1540 var itemHeight = this._getItemHeight();
1541 var optionHeightAdjustment = (itemHeight - this._triggerRect.height) / 2;
1542 var originY = Math.abs(this._offsetY) - optionHeightAdjustment + itemHeight / 2;
1543 return "50% " + originY + "px 0px";
1544 };
1545 /** Calculates the height of the select's options. */
1546 MatSelect.prototype._getItemHeight = function () {
1547 return this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
1548 };
1549 /** Calculates the amount of items in the select. This includes options and group labels. */
1550 MatSelect.prototype._getItemCount = function () {
1551 return this.options.length + this.optionGroups.length;
1552 };
1553 return MatSelect;
1554 }(_MatSelectBase));
1555 MatSelect.decorators = [
1556 { type: core.Component, args: [{
1557 selector: 'mat-select',
1558 exportAs: 'matSelect',
1559 template: "<!--\n Note that the select trigger element specifies `aria-owns` pointing to the listbox overlay.\n While aria-owns is not required for the ARIA 1.2 `role=\"combobox\"` interaction pattern,\n it fixes an issue with VoiceOver when the select appears inside of an `aria-model=\"true\"`\n element (e.g. a dialog). Without this `aria-owns`, the `aria-modal` on a dialog prevents\n VoiceOver from \"seeing\" the select's listbox overlay for aria-activedescendant.\n Using `aria-owns` re-parents the select overlay so that it works again.\n See https://github.com/angular/components/issues/20694\n-->\n<div cdk-overlay-origin\n [attr.aria-owns]=\"panelOpen ? id + '-panel' : null\"\n class=\"mat-select-trigger\"\n (click)=\"toggle()\"\n #origin=\"cdkOverlayOrigin\"\n #trigger>\n <div class=\"mat-select-value\" [ngSwitch]=\"empty\" [attr.id]=\"_valueId\">\n <span class=\"mat-select-placeholder mat-select-min-line\" *ngSwitchCase=\"true\">{{placeholder}}</span>\n <span class=\"mat-select-value-text\" *ngSwitchCase=\"false\" [ngSwitch]=\"!!customTrigger\">\n <span class=\"mat-select-min-line\" *ngSwitchDefault>{{triggerValue}}</span>\n <ng-content select=\"mat-select-trigger\" *ngSwitchCase=\"true\"></ng-content>\n </span>\n </div>\n\n <div class=\"mat-select-arrow-wrapper\"><div class=\"mat-select-arrow\"></div></div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\n [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"_positions\"\n [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"_offsetY\"\n (backdropClick)=\"close()\"\n (attach)=\"_onAttached()\"\n (detach)=\"close()\">\n <div class=\"mat-select-panel-wrap\" [@transformPanelWrap]>\n <div\n #panel\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"mat-select-panel {{ _getPanelTheme() }}\"\n [attr.id]=\"id + '-panel'\"\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [ngClass]=\"panelClass\"\n [@transformPanel]=\"multiple ? 'showing-multiple' : 'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n [style.transformOrigin]=\"_transformOrigin\"\n [style.font-size.px]=\"_triggerFontSize\"\n (keydown)=\"_handleKeydown($event)\">\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>\n",
1560 inputs: ['disabled', 'disableRipple', 'tabIndex'],
1561 encapsulation: core.ViewEncapsulation.None,
1562 changeDetection: core.ChangeDetectionStrategy.OnPush,
1563 host: {
1564 'role': 'combobox',
1565 'aria-autocomplete': 'none',
1566 // TODO(crisbeto): the value for aria-haspopup should be `listbox`, but currently it's difficult
1567 // to sync into Google, because of an outdated automated a11y check which flags it as an invalid
1568 // value. At some point we should try to switch it back to being `listbox`.
1569 'aria-haspopup': 'true',
1570 'class': 'mat-select',
1571 '[attr.id]': 'id',
1572 '[attr.tabindex]': 'tabIndex',
1573 '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null',
1574 '[attr.aria-expanded]': 'panelOpen',
1575 '[attr.aria-label]': 'ariaLabel || null',
1576 '[attr.aria-required]': 'required.toString()',
1577 '[attr.aria-disabled]': 'disabled.toString()',
1578 '[attr.aria-invalid]': 'errorState',
1579 '[attr.aria-describedby]': '_ariaDescribedby || null',
1580 '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
1581 '[class.mat-select-disabled]': 'disabled',
1582 '[class.mat-select-invalid]': 'errorState',
1583 '[class.mat-select-required]': 'required',
1584 '[class.mat-select-empty]': 'empty',
1585 '[class.mat-select-multiple]': 'multiple',
1586 '(keydown)': '_handleKeydown($event)',
1587 '(focus)': '_onFocus()',
1588 '(blur)': '_onBlur()',
1589 },
1590 animations: [
1591 matSelectAnimations.transformPanelWrap,
1592 matSelectAnimations.transformPanel
1593 ],
1594 providers: [
1595 { provide: formField.MatFormFieldControl, useExisting: MatSelect },
1596 { provide: core$1.MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect }
1597 ],
1598 styles: [".mat-select{display:inline-block;width:100%;outline:none}.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 400ms cubic-bezier(0.25, 0.8, 0.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;outline:0}.cdk-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 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.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}.mat-select-min-line:empty::before{content:\" \";white-space:pre;width:1px;display:inline-block;opacity:0}\n"]
1599 },] }
1600 ];
1601 MatSelect.propDecorators = {
1602 options: [{ type: core.ContentChildren, args: [core$1.MatOption, { descendants: true },] }],
1603 optionGroups: [{ type: core.ContentChildren, args: [core$1.MAT_OPTGROUP, { descendants: true },] }],
1604 customTrigger: [{ type: core.ContentChild, args: [MAT_SELECT_TRIGGER,] }]
1605 };
1606
1607 /**
1608 * @license
1609 * Copyright Google LLC All Rights Reserved.
1610 *
1611 * Use of this source code is governed by an MIT-style license that can be
1612 * found in the LICENSE file at https://angular.io/license
1613 */
1614 var MatSelectModule = /** @class */ (function () {
1615 function MatSelectModule() {
1616 }
1617 return MatSelectModule;
1618 }());
1619 MatSelectModule.decorators = [
1620 { type: core.NgModule, args: [{
1621 imports: [
1622 common.CommonModule,
1623 overlay.OverlayModule,
1624 core$1.MatOptionModule,
1625 core$1.MatCommonModule,
1626 ],
1627 exports: [
1628 scrolling.CdkScrollableModule,
1629 formField.MatFormFieldModule,
1630 MatSelect,
1631 MatSelectTrigger,
1632 core$1.MatOptionModule,
1633 core$1.MatCommonModule
1634 ],
1635 declarations: [MatSelect, MatSelectTrigger],
1636 providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER]
1637 },] }
1638 ];
1639
1640 /**
1641 * @license
1642 * Copyright Google LLC All Rights Reserved.
1643 *
1644 * Use of this source code is governed by an MIT-style license that can be
1645 * found in the LICENSE file at https://angular.io/license
1646 */
1647
1648 /**
1649 * Generated bundle index. Do not edit.
1650 */
1651
1652 exports.MAT_SELECT_CONFIG = MAT_SELECT_CONFIG;
1653 exports.MAT_SELECT_SCROLL_STRATEGY = MAT_SELECT_SCROLL_STRATEGY;
1654 exports.MAT_SELECT_SCROLL_STRATEGY_PROVIDER = MAT_SELECT_SCROLL_STRATEGY_PROVIDER;
1655 exports.MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY = MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY;
1656 exports.MAT_SELECT_TRIGGER = MAT_SELECT_TRIGGER;
1657 exports.MatSelect = MatSelect;
1658 exports.MatSelectChange = MatSelectChange;
1659 exports.MatSelectModule = MatSelectModule;
1660 exports.MatSelectTrigger = MatSelectTrigger;
1661 exports._MatSelectBase = _MatSelectBase;
1662 exports.matSelectAnimations = matSelectAnimations;
1663
1664 Object.defineProperty(exports, '__esModule', { value: true });
1665
1666})));
1667//# sourceMappingURL=material-select.umd.js.map
Note: See TracBrowser for help on using the repository browser.