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
|
---|