material-autocomplete.umd.js 56 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/core'), require('@angular/material/core'), require('@angular/cdk/bidi'), require('@angular/cdk/keycodes'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), require('rxjs/operators'), require('@angular/cdk/scrolling'), require('@angular/forms'), require('@angular/material/form-field'), require('rxjs')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/autocomplete', ['exports', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/core', '@angular/material/core', '@angular/cdk/bidi', '@angular/cdk/keycodes', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', 'rxjs/operators', '@angular/cdk/scrolling', '@angular/forms', '@angular/material/form-field', 'rxjs'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.autocomplete = {}),global.ng.cdk.a11y,global.ng.cdk.coercion,global.ng.core,global.ng.material.core,global.ng.cdk.bidi,global.ng.cdk.keycodes,global.ng.cdk.overlay,global.ng.cdk.portal,global.ng.common,global.rxjs.operators,global.ng.cdk.scrolling,global.ng.forms,global.ng.material.formField,global.rxjs));
  12. }(this, (function (exports,a11y,coercion,core,core$1,bidi,keycodes,overlay,portal,common,operators,scrolling,forms,formField,rxjs) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. /* global Reflect, Promise */
  26. var extendStatics = function(d, b) {
  27. extendStatics = Object.setPrototypeOf ||
  28. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  29. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  30. return extendStatics(d, b);
  31. };
  32. function __extends(d, b) {
  33. extendStatics(d, b);
  34. function __() { this.constructor = d; }
  35. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  36. }
  37. /**
  38. * @fileoverview added by tsickle
  39. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  40. */
  41. /**
  42. * Autocomplete IDs need to be unique across components, so this counter exists outside of
  43. * the component definition.
  44. * @type {?}
  45. */
  46. var _uniqueAutocompleteIdCounter = 0;
  47. /**
  48. * Event object that is emitted when an autocomplete option is selected.
  49. */
  50. var /**
  51. * Event object that is emitted when an autocomplete option is selected.
  52. */
  53. MatAutocompleteSelectedEvent = /** @class */ (function () {
  54. function MatAutocompleteSelectedEvent(source, option) {
  55. this.source = source;
  56. this.option = option;
  57. }
  58. return MatAutocompleteSelectedEvent;
  59. }());
  60. // Boilerplate for applying mixins to MatAutocomplete.
  61. /**
  62. * \@docs-private
  63. */
  64. var
  65. // Boilerplate for applying mixins to MatAutocomplete.
  66. /**
  67. * \@docs-private
  68. */
  69. MatAutocompleteBase = /** @class */ (function () {
  70. function MatAutocompleteBase() {
  71. }
  72. return MatAutocompleteBase;
  73. }());
  74. /** @type {?} */
  75. var _MatAutocompleteMixinBase = core$1.mixinDisableRipple(MatAutocompleteBase);
  76. /**
  77. * Injection token to be used to override the default options for `mat-autocomplete`.
  78. * @type {?}
  79. */
  80. var MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = new core.InjectionToken('mat-autocomplete-default-options', {
  81. providedIn: 'root',
  82. factory: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY,
  83. });
  84. /**
  85. * \@docs-private
  86. * @return {?}
  87. */
  88. function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY() {
  89. return { autoActiveFirstOption: false };
  90. }
  91. var MatAutocomplete = /** @class */ (function (_super) {
  92. __extends(MatAutocomplete, _super);
  93. function MatAutocomplete(_changeDetectorRef, _elementRef, defaults) {
  94. var _this = _super.call(this) || this;
  95. _this._changeDetectorRef = _changeDetectorRef;
  96. _this._elementRef = _elementRef;
  97. /**
  98. * Whether the autocomplete panel should be visible, depending on option length.
  99. */
  100. _this.showPanel = false;
  101. _this._isOpen = false;
  102. /**
  103. * Function that maps an option's control value to its display value in the trigger.
  104. */
  105. _this.displayWith = null;
  106. /**
  107. * Event that is emitted whenever an option from the list is selected.
  108. */
  109. _this.optionSelected = new core.EventEmitter();
  110. /**
  111. * Event that is emitted when the autocomplete panel is opened.
  112. */
  113. _this.opened = new core.EventEmitter();
  114. /**
  115. * Event that is emitted when the autocomplete panel is closed.
  116. */
  117. _this.closed = new core.EventEmitter();
  118. _this._classList = {};
  119. /**
  120. * Unique ID to be used by autocomplete trigger's "aria-owns" property.
  121. */
  122. _this.id = "mat-autocomplete-" + _uniqueAutocompleteIdCounter++;
  123. _this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
  124. return _this;
  125. }
  126. Object.defineProperty(MatAutocomplete.prototype, "isOpen", {
  127. /** Whether the autocomplete panel is open. */
  128. get: /**
  129. * Whether the autocomplete panel is open.
  130. * @return {?}
  131. */
  132. function () { return this._isOpen && this.showPanel; },
  133. enumerable: true,
  134. configurable: true
  135. });
  136. Object.defineProperty(MatAutocomplete.prototype, "autoActiveFirstOption", {
  137. /**
  138. * Whether the first option should be highlighted when the autocomplete panel is opened.
  139. * Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
  140. */
  141. get: /**
  142. * Whether the first option should be highlighted when the autocomplete panel is opened.
  143. * Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
  144. * @return {?}
  145. */
  146. function () { return this._autoActiveFirstOption; },
  147. set: /**
  148. * @param {?} value
  149. * @return {?}
  150. */
  151. function (value) {
  152. this._autoActiveFirstOption = coercion.coerceBooleanProperty(value);
  153. },
  154. enumerable: true,
  155. configurable: true
  156. });
  157. Object.defineProperty(MatAutocomplete.prototype, "classList", {
  158. /**
  159. * Takes classes set on the host mat-autocomplete element and applies them to the panel
  160. * inside the overlay container to allow for easy styling.
  161. */
  162. set: /**
  163. * Takes classes set on the host mat-autocomplete element and applies them to the panel
  164. * inside the overlay container to allow for easy styling.
  165. * @param {?} value
  166. * @return {?}
  167. */
  168. function (value) {
  169. if (value && value.length) {
  170. this._classList = value.split(' ').reduce((/**
  171. * @param {?} classList
  172. * @param {?} className
  173. * @return {?}
  174. */
  175. function (classList, className) {
  176. classList[className.trim()] = true;
  177. return classList;
  178. }), (/** @type {?} */ ({})));
  179. }
  180. else {
  181. this._classList = {};
  182. }
  183. this._setVisibilityClasses(this._classList);
  184. this._elementRef.nativeElement.className = '';
  185. },
  186. enumerable: true,
  187. configurable: true
  188. });
  189. /**
  190. * @return {?}
  191. */
  192. MatAutocomplete.prototype.ngAfterContentInit = /**
  193. * @return {?}
  194. */
  195. function () {
  196. this._keyManager = new a11y.ActiveDescendantKeyManager(this.options).withWrap();
  197. // Set the initial visibility state.
  198. this._setVisibility();
  199. };
  200. /**
  201. * Sets the panel scrollTop. This allows us to manually scroll to display options
  202. * above or below the fold, as they are not actually being focused when active.
  203. */
  204. /**
  205. * Sets the panel scrollTop. This allows us to manually scroll to display options
  206. * above or below the fold, as they are not actually being focused when active.
  207. * @param {?} scrollTop
  208. * @return {?}
  209. */
  210. MatAutocomplete.prototype._setScrollTop = /**
  211. * Sets the panel scrollTop. This allows us to manually scroll to display options
  212. * above or below the fold, as they are not actually being focused when active.
  213. * @param {?} scrollTop
  214. * @return {?}
  215. */
  216. function (scrollTop) {
  217. if (this.panel) {
  218. this.panel.nativeElement.scrollTop = scrollTop;
  219. }
  220. };
  221. /** Returns the panel's scrollTop. */
  222. /**
  223. * Returns the panel's scrollTop.
  224. * @return {?}
  225. */
  226. MatAutocomplete.prototype._getScrollTop = /**
  227. * Returns the panel's scrollTop.
  228. * @return {?}
  229. */
  230. function () {
  231. return this.panel ? this.panel.nativeElement.scrollTop : 0;
  232. };
  233. /** Panel should hide itself when the option list is empty. */
  234. /**
  235. * Panel should hide itself when the option list is empty.
  236. * @return {?}
  237. */
  238. MatAutocomplete.prototype._setVisibility = /**
  239. * Panel should hide itself when the option list is empty.
  240. * @return {?}
  241. */
  242. function () {
  243. this.showPanel = !!this.options.length;
  244. this._setVisibilityClasses(this._classList);
  245. this._changeDetectorRef.markForCheck();
  246. };
  247. /** Emits the `select` event. */
  248. /**
  249. * Emits the `select` event.
  250. * @param {?} option
  251. * @return {?}
  252. */
  253. MatAutocomplete.prototype._emitSelectEvent = /**
  254. * Emits the `select` event.
  255. * @param {?} option
  256. * @return {?}
  257. */
  258. function (option) {
  259. /** @type {?} */
  260. var event = new MatAutocompleteSelectedEvent(this, option);
  261. this.optionSelected.emit(event);
  262. };
  263. /** Sets the autocomplete visibility classes on a classlist based on the panel is visible. */
  264. /**
  265. * Sets the autocomplete visibility classes on a classlist based on the panel is visible.
  266. * @private
  267. * @param {?} classList
  268. * @return {?}
  269. */
  270. MatAutocomplete.prototype._setVisibilityClasses = /**
  271. * Sets the autocomplete visibility classes on a classlist based on the panel is visible.
  272. * @private
  273. * @param {?} classList
  274. * @return {?}
  275. */
  276. function (classList) {
  277. classList['mat-autocomplete-visible'] = this.showPanel;
  278. classList['mat-autocomplete-hidden'] = !this.showPanel;
  279. };
  280. MatAutocomplete.decorators = [
  281. { type: core.Component, args: [{selector: 'mat-autocomplete',
  282. template: "<ng-template><div class=\"mat-autocomplete-panel\" role=\"listbox\" [id]=\"id\" [ngClass]=\"_classList\" #panel><ng-content></ng-content></div></ng-template>",
  283. styles: [".mat-autocomplete-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;max-width:none;max-height:256px;position:relative;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.mat-autocomplete-panel.mat-autocomplete-visible{visibility:visible}.mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden}.mat-autocomplete-panel-above .mat-autocomplete-panel{border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}.mat-autocomplete-panel .mat-divider-horizontal{margin-top:-1px}@media (-ms-high-contrast:active){.mat-autocomplete-panel{outline:solid 1px}}"],
  284. encapsulation: core.ViewEncapsulation.None,
  285. changeDetection: core.ChangeDetectionStrategy.OnPush,
  286. exportAs: 'matAutocomplete',
  287. inputs: ['disableRipple'],
  288. host: {
  289. 'class': 'mat-autocomplete'
  290. },
  291. providers: [
  292. { provide: core$1.MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }
  293. ]
  294. },] },
  295. ];
  296. /** @nocollapse */
  297. MatAutocomplete.ctorParameters = function () { return [
  298. { type: core.ChangeDetectorRef },
  299. { type: core.ElementRef },
  300. { type: undefined, decorators: [{ type: core.Inject, args: [MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,] }] }
  301. ]; };
  302. MatAutocomplete.propDecorators = {
  303. template: [{ type: core.ViewChild, args: [core.TemplateRef, { static: true },] }],
  304. panel: [{ type: core.ViewChild, args: ['panel', { static: false },] }],
  305. options: [{ type: core.ContentChildren, args: [core$1.MatOption, { descendants: true },] }],
  306. optionGroups: [{ type: core.ContentChildren, args: [core$1.MatOptgroup,] }],
  307. displayWith: [{ type: core.Input }],
  308. autoActiveFirstOption: [{ type: core.Input }],
  309. panelWidth: [{ type: core.Input }],
  310. optionSelected: [{ type: core.Output }],
  311. opened: [{ type: core.Output }],
  312. closed: [{ type: core.Output }],
  313. classList: [{ type: core.Input, args: ['class',] }]
  314. };
  315. return MatAutocomplete;
  316. }(_MatAutocompleteMixinBase));
  317. /**
  318. * @fileoverview added by tsickle
  319. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  320. */
  321. /**
  322. * Directive applied to an element to make it usable
  323. * as a connection point for an autocomplete panel.
  324. */
  325. var MatAutocompleteOrigin = /** @class */ (function () {
  326. function MatAutocompleteOrigin(elementRef) {
  327. this.elementRef = elementRef;
  328. }
  329. MatAutocompleteOrigin.decorators = [
  330. { type: core.Directive, args: [{
  331. selector: '[matAutocompleteOrigin]',
  332. exportAs: 'matAutocompleteOrigin',
  333. },] },
  334. ];
  335. /** @nocollapse */
  336. MatAutocompleteOrigin.ctorParameters = function () { return [
  337. { type: core.ElementRef }
  338. ]; };
  339. return MatAutocompleteOrigin;
  340. }());
  341. /**
  342. * @fileoverview added by tsickle
  343. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  344. */
  345. /**
  346. * The height of each autocomplete option.
  347. * @type {?}
  348. */
  349. var AUTOCOMPLETE_OPTION_HEIGHT = 48;
  350. /**
  351. * The total height of the autocomplete panel.
  352. * @type {?}
  353. */
  354. var AUTOCOMPLETE_PANEL_HEIGHT = 256;
  355. /**
  356. * Injection token that determines the scroll handling while the autocomplete panel is open.
  357. * @type {?}
  358. */
  359. var MAT_AUTOCOMPLETE_SCROLL_STRATEGY = new core.InjectionToken('mat-autocomplete-scroll-strategy');
  360. /**
  361. * \@docs-private
  362. * @param {?} overlay
  363. * @return {?}
  364. */
  365. function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay$$1) {
  366. return (/**
  367. * @return {?}
  368. */
  369. function () { return overlay$$1.scrollStrategies.reposition(); });
  370. }
  371. /**
  372. * \@docs-private
  373. * @type {?}
  374. */
  375. var MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  376. provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
  377. deps: [overlay.Overlay],
  378. useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,
  379. };
  380. /**
  381. * Provider that allows the autocomplete to register as a ControlValueAccessor.
  382. * \@docs-private
  383. * @type {?}
  384. */
  385. var MAT_AUTOCOMPLETE_VALUE_ACCESSOR = {
  386. provide: forms.NG_VALUE_ACCESSOR,
  387. useExisting: core.forwardRef((/**
  388. * @return {?}
  389. */
  390. function () { return MatAutocompleteTrigger; })),
  391. multi: true
  392. };
  393. /**
  394. * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
  395. * \@docs-private
  396. * @return {?}
  397. */
  398. function getMatAutocompleteMissingPanelError() {
  399. return Error('Attempting to open an undefined instance of `mat-autocomplete`. ' +
  400. 'Make sure that the id passed to the `matAutocomplete` is correct and that ' +
  401. 'you\'re attempting to open it after the ngAfterContentInit hook.');
  402. }
  403. var MatAutocompleteTrigger = /** @class */ (function () {
  404. function MatAutocompleteTrigger(_element, _overlay, _viewContainerRef, _zone, _changeDetectorRef, scrollStrategy, _dir, _formField, _document, _viewportRuler) {
  405. var _this = this;
  406. this._element = _element;
  407. this._overlay = _overlay;
  408. this._viewContainerRef = _viewContainerRef;
  409. this._zone = _zone;
  410. this._changeDetectorRef = _changeDetectorRef;
  411. this._dir = _dir;
  412. this._formField = _formField;
  413. this._document = _document;
  414. this._viewportRuler = _viewportRuler;
  415. this._componentDestroyed = false;
  416. this._autocompleteDisabled = false;
  417. /**
  418. * Whether or not the label state is being overridden.
  419. */
  420. this._manuallyFloatingLabel = false;
  421. /**
  422. * Subscription to viewport size changes.
  423. */
  424. this._viewportSubscription = rxjs.Subscription.EMPTY;
  425. /**
  426. * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
  427. * closed autocomplete from being reopened if the user switches to another browser tab and then
  428. * comes back.
  429. */
  430. this._canOpenOnNextFocus = true;
  431. /**
  432. * Stream of keyboard events that can close the panel.
  433. */
  434. this._closeKeyEventStream = new rxjs.Subject();
  435. /**
  436. * Event handler for when the window is blurred. Needs to be an
  437. * arrow function in order to preserve the context.
  438. */
  439. this._windowBlurHandler = (/**
  440. * @return {?}
  441. */
  442. function () {
  443. // If the user blurred the window while the autocomplete is focused, it means that it'll be
  444. // refocused when they come back. In this case we want to skip the first focus event, if the
  445. // pane was closed, in order to avoid reopening it unintentionally.
  446. _this._canOpenOnNextFocus =
  447. _this._document.activeElement !== _this._element.nativeElement || _this.panelOpen;
  448. });
  449. /**
  450. * `View -> model callback called when value changes`
  451. */
  452. this._onChange = (/**
  453. * @return {?}
  454. */
  455. function () { });
  456. /**
  457. * `View -> model callback called when autocomplete has been touched`
  458. */
  459. this._onTouched = (/**
  460. * @return {?}
  461. */
  462. function () { });
  463. /**
  464. * Position of the autocomplete panel relative to the trigger element. A position of `auto`
  465. * will render the panel underneath the trigger if there is enough space for it to fit in
  466. * the viewport, otherwise the panel will be shown above it. If the position is set to
  467. * `above` or `below`, the panel will always be shown above or below the trigger. no matter
  468. * whether it fits completely in the viewport.
  469. */
  470. this.position = 'auto';
  471. /**
  472. * `autocomplete` attribute to be set on the input element.
  473. * \@docs-private
  474. */
  475. this.autocompleteAttribute = 'off';
  476. this._overlayAttached = false;
  477. /**
  478. * Stream of autocomplete option selections.
  479. */
  480. this.optionSelections = (/** @type {?} */ (rxjs.defer((/**
  481. * @return {?}
  482. */
  483. function () {
  484. if (_this.autocomplete && _this.autocomplete.options) {
  485. return rxjs.merge.apply(void 0, _this.autocomplete.options.map((/**
  486. * @param {?} option
  487. * @return {?}
  488. */
  489. function (option) { return option.onSelectionChange; })));
  490. }
  491. // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
  492. // Return a stream that we'll replace with the real one once everything is in place.
  493. return _this._zone.onStable
  494. .asObservable()
  495. .pipe(operators.take(1), operators.switchMap((/**
  496. * @return {?}
  497. */
  498. function () { return _this.optionSelections; })));
  499. }))));
  500. if (typeof window !== 'undefined') {
  501. _zone.runOutsideAngular((/**
  502. * @return {?}
  503. */
  504. function () {
  505. window.addEventListener('blur', _this._windowBlurHandler);
  506. }));
  507. }
  508. this._scrollStrategy = scrollStrategy;
  509. }
  510. Object.defineProperty(MatAutocompleteTrigger.prototype, "autocompleteDisabled", {
  511. /**
  512. * Whether the autocomplete is disabled. When disabled, the element will
  513. * act as a regular input and the user won't be able to open the panel.
  514. */
  515. get: /**
  516. * Whether the autocomplete is disabled. When disabled, the element will
  517. * act as a regular input and the user won't be able to open the panel.
  518. * @return {?}
  519. */
  520. function () { return this._autocompleteDisabled; },
  521. set: /**
  522. * @param {?} value
  523. * @return {?}
  524. */
  525. function (value) {
  526. this._autocompleteDisabled = coercion.coerceBooleanProperty(value);
  527. },
  528. enumerable: true,
  529. configurable: true
  530. });
  531. /**
  532. * @param {?} changes
  533. * @return {?}
  534. */
  535. MatAutocompleteTrigger.prototype.ngOnChanges = /**
  536. * @param {?} changes
  537. * @return {?}
  538. */
  539. function (changes) {
  540. if (changes['position'] && this._positionStrategy) {
  541. this._setStrategyPositions(this._positionStrategy);
  542. if (this.panelOpen) {
  543. (/** @type {?} */ (this._overlayRef)).updatePosition();
  544. }
  545. }
  546. };
  547. /**
  548. * @return {?}
  549. */
  550. MatAutocompleteTrigger.prototype.ngOnDestroy = /**
  551. * @return {?}
  552. */
  553. function () {
  554. if (typeof window !== 'undefined') {
  555. window.removeEventListener('blur', this._windowBlurHandler);
  556. }
  557. this._viewportSubscription.unsubscribe();
  558. this._componentDestroyed = true;
  559. this._destroyPanel();
  560. this._closeKeyEventStream.complete();
  561. };
  562. Object.defineProperty(MatAutocompleteTrigger.prototype, "panelOpen", {
  563. /** Whether or not the autocomplete panel is open. */
  564. get: /**
  565. * Whether or not the autocomplete panel is open.
  566. * @return {?}
  567. */
  568. function () {
  569. return this._overlayAttached && this.autocomplete.showPanel;
  570. },
  571. enumerable: true,
  572. configurable: true
  573. });
  574. /** Opens the autocomplete suggestion panel. */
  575. /**
  576. * Opens the autocomplete suggestion panel.
  577. * @return {?}
  578. */
  579. MatAutocompleteTrigger.prototype.openPanel = /**
  580. * Opens the autocomplete suggestion panel.
  581. * @return {?}
  582. */
  583. function () {
  584. this._attachOverlay();
  585. this._floatLabel();
  586. };
  587. /** Closes the autocomplete suggestion panel. */
  588. /**
  589. * Closes the autocomplete suggestion panel.
  590. * @return {?}
  591. */
  592. MatAutocompleteTrigger.prototype.closePanel = /**
  593. * Closes the autocomplete suggestion panel.
  594. * @return {?}
  595. */
  596. function () {
  597. this._resetLabel();
  598. if (!this._overlayAttached) {
  599. return;
  600. }
  601. if (this.panelOpen) {
  602. // Only emit if the panel was visible.
  603. this.autocomplete.closed.emit();
  604. }
  605. this.autocomplete._isOpen = this._overlayAttached = false;
  606. if (this._overlayRef && this._overlayRef.hasAttached()) {
  607. this._overlayRef.detach();
  608. this._closingActionsSubscription.unsubscribe();
  609. }
  610. // Note that in some cases this can end up being called after the component is destroyed.
  611. // Add a check to ensure that we don't try to run change detection on a destroyed view.
  612. if (!this._componentDestroyed) {
  613. // We need to trigger change detection manually, because
  614. // `fromEvent` doesn't seem to do it at the proper time.
  615. // This ensures that the label is reset when the
  616. // user clicks outside.
  617. this._changeDetectorRef.detectChanges();
  618. }
  619. };
  620. /**
  621. * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
  622. * within the viewport.
  623. */
  624. /**
  625. * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
  626. * within the viewport.
  627. * @return {?}
  628. */
  629. MatAutocompleteTrigger.prototype.updatePosition = /**
  630. * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
  631. * within the viewport.
  632. * @return {?}
  633. */
  634. function () {
  635. if (this._overlayAttached) {
  636. (/** @type {?} */ (this._overlayRef)).updatePosition();
  637. }
  638. };
  639. Object.defineProperty(MatAutocompleteTrigger.prototype, "panelClosingActions", {
  640. /**
  641. * A stream of actions that should close the autocomplete panel, including
  642. * when an option is selected, on blur, and when TAB is pressed.
  643. */
  644. get: /**
  645. * A stream of actions that should close the autocomplete panel, including
  646. * when an option is selected, on blur, and when TAB is pressed.
  647. * @return {?}
  648. */
  649. function () {
  650. var _this = this;
  651. return rxjs.merge(this.optionSelections, this.autocomplete._keyManager.tabOut.pipe(operators.filter((/**
  652. * @return {?}
  653. */
  654. function () { return _this._overlayAttached; }))), this._closeKeyEventStream, this._getOutsideClickStream(), this._overlayRef ?
  655. this._overlayRef.detachments().pipe(operators.filter((/**
  656. * @return {?}
  657. */
  658. function () { return _this._overlayAttached; }))) :
  659. rxjs.of()).pipe(
  660. // Normalize the output so we return a consistent type.
  661. operators.map((/**
  662. * @param {?} event
  663. * @return {?}
  664. */
  665. function (event) { return event instanceof core$1.MatOptionSelectionChange ? event : null; })));
  666. },
  667. enumerable: true,
  668. configurable: true
  669. });
  670. Object.defineProperty(MatAutocompleteTrigger.prototype, "activeOption", {
  671. /** The currently active option, coerced to MatOption type. */
  672. get: /**
  673. * The currently active option, coerced to MatOption type.
  674. * @return {?}
  675. */
  676. function () {
  677. if (this.autocomplete && this.autocomplete._keyManager) {
  678. return this.autocomplete._keyManager.activeItem;
  679. }
  680. return null;
  681. },
  682. enumerable: true,
  683. configurable: true
  684. });
  685. /** Stream of clicks outside of the autocomplete panel. */
  686. /**
  687. * Stream of clicks outside of the autocomplete panel.
  688. * @private
  689. * @return {?}
  690. */
  691. MatAutocompleteTrigger.prototype._getOutsideClickStream = /**
  692. * Stream of clicks outside of the autocomplete panel.
  693. * @private
  694. * @return {?}
  695. */
  696. function () {
  697. var _this = this;
  698. return rxjs.merge((/** @type {?} */ (rxjs.fromEvent(this._document, 'click'))), (/** @type {?} */ (rxjs.fromEvent(this._document, 'touchend'))))
  699. .pipe(operators.filter((/**
  700. * @param {?} event
  701. * @return {?}
  702. */
  703. function (event) {
  704. /** @type {?} */
  705. var clickTarget = (/** @type {?} */ (event.target));
  706. /** @type {?} */
  707. var formField$$1 = _this._formField ?
  708. _this._formField._elementRef.nativeElement : null;
  709. return _this._overlayAttached &&
  710. clickTarget !== _this._element.nativeElement &&
  711. (!formField$$1 || !formField$$1.contains(clickTarget)) &&
  712. (!!_this._overlayRef && !_this._overlayRef.overlayElement.contains(clickTarget));
  713. })));
  714. };
  715. // Implemented as part of ControlValueAccessor.
  716. // Implemented as part of ControlValueAccessor.
  717. /**
  718. * @param {?} value
  719. * @return {?}
  720. */
  721. MatAutocompleteTrigger.prototype.writeValue =
  722. // Implemented as part of ControlValueAccessor.
  723. /**
  724. * @param {?} value
  725. * @return {?}
  726. */
  727. function (value) {
  728. var _this = this;
  729. Promise.resolve(null).then((/**
  730. * @return {?}
  731. */
  732. function () { return _this._setTriggerValue(value); }));
  733. };
  734. // Implemented as part of ControlValueAccessor.
  735. // Implemented as part of ControlValueAccessor.
  736. /**
  737. * @param {?} fn
  738. * @return {?}
  739. */
  740. MatAutocompleteTrigger.prototype.registerOnChange =
  741. // Implemented as part of ControlValueAccessor.
  742. /**
  743. * @param {?} fn
  744. * @return {?}
  745. */
  746. function (fn) {
  747. this._onChange = fn;
  748. };
  749. // Implemented as part of ControlValueAccessor.
  750. // Implemented as part of ControlValueAccessor.
  751. /**
  752. * @param {?} fn
  753. * @return {?}
  754. */
  755. MatAutocompleteTrigger.prototype.registerOnTouched =
  756. // Implemented as part of ControlValueAccessor.
  757. /**
  758. * @param {?} fn
  759. * @return {?}
  760. */
  761. function (fn) {
  762. this._onTouched = fn;
  763. };
  764. // Implemented as part of ControlValueAccessor.
  765. // Implemented as part of ControlValueAccessor.
  766. /**
  767. * @param {?} isDisabled
  768. * @return {?}
  769. */
  770. MatAutocompleteTrigger.prototype.setDisabledState =
  771. // Implemented as part of ControlValueAccessor.
  772. /**
  773. * @param {?} isDisabled
  774. * @return {?}
  775. */
  776. function (isDisabled) {
  777. this._element.nativeElement.disabled = isDisabled;
  778. };
  779. /**
  780. * @param {?} event
  781. * @return {?}
  782. */
  783. MatAutocompleteTrigger.prototype._handleKeydown = /**
  784. * @param {?} event
  785. * @return {?}
  786. */
  787. function (event) {
  788. /** @type {?} */
  789. var keyCode = event.keyCode;
  790. // Prevent the default action on all escape key presses. This is here primarily to bring IE
  791. // in line with other browsers. By default, pressing escape on IE will cause it to revert
  792. // the input value to the one that it had on focus, however it won't dispatch any events
  793. // which means that the model value will be out of sync with the view.
  794. if (keyCode === keycodes.ESCAPE) {
  795. event.preventDefault();
  796. }
  797. if (this.activeOption && keyCode === keycodes.ENTER && this.panelOpen) {
  798. this.activeOption._selectViaInteraction();
  799. this._resetActiveItem();
  800. event.preventDefault();
  801. }
  802. else if (this.autocomplete) {
  803. /** @type {?} */
  804. var prevActiveItem = this.autocomplete._keyManager.activeItem;
  805. /** @type {?} */
  806. var isArrowKey = keyCode === keycodes.UP_ARROW || keyCode === keycodes.DOWN_ARROW;
  807. if (this.panelOpen || keyCode === keycodes.TAB) {
  808. this.autocomplete._keyManager.onKeydown(event);
  809. }
  810. else if (isArrowKey && this._canOpen()) {
  811. this.openPanel();
  812. }
  813. if (isArrowKey || this.autocomplete._keyManager.activeItem !== prevActiveItem) {
  814. this._scrollToOption();
  815. }
  816. }
  817. };
  818. /**
  819. * @param {?} event
  820. * @return {?}
  821. */
  822. MatAutocompleteTrigger.prototype._handleInput = /**
  823. * @param {?} event
  824. * @return {?}
  825. */
  826. function (event) {
  827. /** @type {?} */
  828. var target = (/** @type {?} */ (event.target));
  829. /** @type {?} */
  830. var value = target.value;
  831. // Based on `NumberValueAccessor` from forms.
  832. if (target.type === 'number') {
  833. value = value == '' ? null : parseFloat(value);
  834. }
  835. // If the input has a placeholder, IE will fire the `input` event on page load,
  836. // focus and blur, in addition to when the user actually changed the value. To
  837. // filter out all of the extra events, we save the value on focus and between
  838. // `input` events, and we check whether it changed.
  839. // See: https://connect.microsoft.com/IE/feedback/details/885747/
  840. if (this._previousValue !== value) {
  841. this._previousValue = value;
  842. this._onChange(value);
  843. if (this._canOpen() && this._document.activeElement === event.target) {
  844. this.openPanel();
  845. }
  846. }
  847. };
  848. /**
  849. * @return {?}
  850. */
  851. MatAutocompleteTrigger.prototype._handleFocus = /**
  852. * @return {?}
  853. */
  854. function () {
  855. if (!this._canOpenOnNextFocus) {
  856. this._canOpenOnNextFocus = true;
  857. }
  858. else if (this._canOpen()) {
  859. this._previousValue = this._element.nativeElement.value;
  860. this._attachOverlay();
  861. this._floatLabel(true);
  862. }
  863. };
  864. /**
  865. * In "auto" mode, the label will animate down as soon as focus is lost.
  866. * This causes the value to jump when selecting an option with the mouse.
  867. * This method manually floats the label until the panel can be closed.
  868. * @param shouldAnimate Whether the label should be animated when it is floated.
  869. */
  870. /**
  871. * In "auto" mode, the label will animate down as soon as focus is lost.
  872. * This causes the value to jump when selecting an option with the mouse.
  873. * This method manually floats the label until the panel can be closed.
  874. * @private
  875. * @param {?=} shouldAnimate Whether the label should be animated when it is floated.
  876. * @return {?}
  877. */
  878. MatAutocompleteTrigger.prototype._floatLabel = /**
  879. * In "auto" mode, the label will animate down as soon as focus is lost.
  880. * This causes the value to jump when selecting an option with the mouse.
  881. * This method manually floats the label until the panel can be closed.
  882. * @private
  883. * @param {?=} shouldAnimate Whether the label should be animated when it is floated.
  884. * @return {?}
  885. */
  886. function (shouldAnimate) {
  887. if (shouldAnimate === void 0) { shouldAnimate = false; }
  888. if (this._formField && this._formField.floatLabel === 'auto') {
  889. if (shouldAnimate) {
  890. this._formField._animateAndLockLabel();
  891. }
  892. else {
  893. this._formField.floatLabel = 'always';
  894. }
  895. this._manuallyFloatingLabel = true;
  896. }
  897. };
  898. /** If the label has been manually elevated, return it to its normal state. */
  899. /**
  900. * If the label has been manually elevated, return it to its normal state.
  901. * @private
  902. * @return {?}
  903. */
  904. MatAutocompleteTrigger.prototype._resetLabel = /**
  905. * If the label has been manually elevated, return it to its normal state.
  906. * @private
  907. * @return {?}
  908. */
  909. function () {
  910. if (this._manuallyFloatingLabel) {
  911. this._formField.floatLabel = 'auto';
  912. this._manuallyFloatingLabel = false;
  913. }
  914. };
  915. /**
  916. * Given that we are not actually focusing active options, we must manually adjust scroll
  917. * to reveal options below the fold. First, we find the offset of the option from the top
  918. * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
  919. * the panel height + the option height, so the active option will be just visible at the
  920. * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
  921. * will become the offset. If that offset is visible within the panel already, the scrollTop is
  922. * not adjusted.
  923. */
  924. /**
  925. * Given that we are not actually focusing active options, we must manually adjust scroll
  926. * to reveal options below the fold. First, we find the offset of the option from the top
  927. * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
  928. * the panel height + the option height, so the active option will be just visible at the
  929. * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
  930. * will become the offset. If that offset is visible within the panel already, the scrollTop is
  931. * not adjusted.
  932. * @private
  933. * @return {?}
  934. */
  935. MatAutocompleteTrigger.prototype._scrollToOption = /**
  936. * Given that we are not actually focusing active options, we must manually adjust scroll
  937. * to reveal options below the fold. First, we find the offset of the option from the top
  938. * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
  939. * the panel height + the option height, so the active option will be just visible at the
  940. * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
  941. * will become the offset. If that offset is visible within the panel already, the scrollTop is
  942. * not adjusted.
  943. * @private
  944. * @return {?}
  945. */
  946. function () {
  947. /** @type {?} */
  948. var index = this.autocomplete._keyManager.activeItemIndex || 0;
  949. /** @type {?} */
  950. var labelCount = core$1._countGroupLabelsBeforeOption(index, this.autocomplete.options, this.autocomplete.optionGroups);
  951. /** @type {?} */
  952. var newScrollPosition = core$1._getOptionScrollPosition(index + labelCount, AUTOCOMPLETE_OPTION_HEIGHT, this.autocomplete._getScrollTop(), AUTOCOMPLETE_PANEL_HEIGHT);
  953. this.autocomplete._setScrollTop(newScrollPosition);
  954. };
  955. /**
  956. * This method listens to a stream of panel closing actions and resets the
  957. * stream every time the option list changes.
  958. */
  959. /**
  960. * This method listens to a stream of panel closing actions and resets the
  961. * stream every time the option list changes.
  962. * @private
  963. * @return {?}
  964. */
  965. MatAutocompleteTrigger.prototype._subscribeToClosingActions = /**
  966. * This method listens to a stream of panel closing actions and resets the
  967. * stream every time the option list changes.
  968. * @private
  969. * @return {?}
  970. */
  971. function () {
  972. var _this = this;
  973. /** @type {?} */
  974. var firstStable = this._zone.onStable.asObservable().pipe(operators.take(1));
  975. /** @type {?} */
  976. var optionChanges = this.autocomplete.options.changes.pipe(operators.tap((/**
  977. * @return {?}
  978. */
  979. function () { return _this._positionStrategy.reapplyLastPosition(); })),
  980. // Defer emitting to the stream until the next tick, because changing
  981. // bindings in here will cause "changed after checked" errors.
  982. operators.delay(0));
  983. // When the zone is stable initially, and when the option list changes...
  984. return rxjs.merge(firstStable, optionChanges)
  985. .pipe(
  986. // create a new stream of panelClosingActions, replacing any previous streams
  987. // that were created, and flatten it so our stream only emits closing events...
  988. operators.switchMap((/**
  989. * @return {?}
  990. */
  991. function () {
  992. /** @type {?} */
  993. var wasOpen = _this.panelOpen;
  994. _this._resetActiveItem();
  995. _this.autocomplete._setVisibility();
  996. if (_this.panelOpen) {
  997. (/** @type {?} */ (_this._overlayRef)).updatePosition();
  998. // If the `panelOpen` state changed, we need to make sure to emit the `opened`
  999. // event, because we may not have emitted it when the panel was attached. This
  1000. // can happen if the users opens the panel and there are no options, but the
  1001. // options come in slightly later or as a result of the value changing.
  1002. if (wasOpen !== _this.panelOpen) {
  1003. _this.autocomplete.opened.emit();
  1004. }
  1005. }
  1006. return _this.panelClosingActions;
  1007. })),
  1008. // when the first closing event occurs...
  1009. operators.take(1))
  1010. // set the value, close the panel, and complete.
  1011. .subscribe((/**
  1012. * @param {?} event
  1013. * @return {?}
  1014. */
  1015. function (event) { return _this._setValueAndClose(event); }));
  1016. };
  1017. /** Destroys the autocomplete suggestion panel. */
  1018. /**
  1019. * Destroys the autocomplete suggestion panel.
  1020. * @private
  1021. * @return {?}
  1022. */
  1023. MatAutocompleteTrigger.prototype._destroyPanel = /**
  1024. * Destroys the autocomplete suggestion panel.
  1025. * @private
  1026. * @return {?}
  1027. */
  1028. function () {
  1029. if (this._overlayRef) {
  1030. this.closePanel();
  1031. this._overlayRef.dispose();
  1032. this._overlayRef = null;
  1033. }
  1034. };
  1035. /**
  1036. * @private
  1037. * @param {?} value
  1038. * @return {?}
  1039. */
  1040. MatAutocompleteTrigger.prototype._setTriggerValue = /**
  1041. * @private
  1042. * @param {?} value
  1043. * @return {?}
  1044. */
  1045. function (value) {
  1046. /** @type {?} */
  1047. var toDisplay = this.autocomplete && this.autocomplete.displayWith ?
  1048. this.autocomplete.displayWith(value) :
  1049. value;
  1050. // Simply falling back to an empty string if the display value is falsy does not work properly.
  1051. // The display value can also be the number zero and shouldn't fall back to an empty string.
  1052. /** @type {?} */
  1053. var inputValue = toDisplay != null ? toDisplay : '';
  1054. // If it's used within a `MatFormField`, we should set it through the property so it can go
  1055. // through change detection.
  1056. if (this._formField) {
  1057. this._formField._control.value = inputValue;
  1058. }
  1059. else {
  1060. this._element.nativeElement.value = inputValue;
  1061. }
  1062. this._previousValue = inputValue;
  1063. };
  1064. /**
  1065. * This method closes the panel, and if a value is specified, also sets the associated
  1066. * control to that value. It will also mark the control as dirty if this interaction
  1067. * stemmed from the user.
  1068. */
  1069. /**
  1070. * This method closes the panel, and if a value is specified, also sets the associated
  1071. * control to that value. It will also mark the control as dirty if this interaction
  1072. * stemmed from the user.
  1073. * @private
  1074. * @param {?} event
  1075. * @return {?}
  1076. */
  1077. MatAutocompleteTrigger.prototype._setValueAndClose = /**
  1078. * This method closes the panel, and if a value is specified, also sets the associated
  1079. * control to that value. It will also mark the control as dirty if this interaction
  1080. * stemmed from the user.
  1081. * @private
  1082. * @param {?} event
  1083. * @return {?}
  1084. */
  1085. function (event) {
  1086. if (event && event.source) {
  1087. this._clearPreviousSelectedOption(event.source);
  1088. this._setTriggerValue(event.source.value);
  1089. this._onChange(event.source.value);
  1090. this._element.nativeElement.focus();
  1091. this.autocomplete._emitSelectEvent(event.source);
  1092. }
  1093. this.closePanel();
  1094. };
  1095. /**
  1096. * Clear any previous selected option and emit a selection change event for this option
  1097. */
  1098. /**
  1099. * Clear any previous selected option and emit a selection change event for this option
  1100. * @private
  1101. * @param {?} skip
  1102. * @return {?}
  1103. */
  1104. MatAutocompleteTrigger.prototype._clearPreviousSelectedOption = /**
  1105. * Clear any previous selected option and emit a selection change event for this option
  1106. * @private
  1107. * @param {?} skip
  1108. * @return {?}
  1109. */
  1110. function (skip) {
  1111. this.autocomplete.options.forEach((/**
  1112. * @param {?} option
  1113. * @return {?}
  1114. */
  1115. function (option) {
  1116. if (option != skip && option.selected) {
  1117. option.deselect();
  1118. }
  1119. }));
  1120. };
  1121. /**
  1122. * @private
  1123. * @return {?}
  1124. */
  1125. MatAutocompleteTrigger.prototype._attachOverlay = /**
  1126. * @private
  1127. * @return {?}
  1128. */
  1129. function () {
  1130. var _this = this;
  1131. if (!this.autocomplete) {
  1132. throw getMatAutocompleteMissingPanelError();
  1133. }
  1134. /** @type {?} */
  1135. var overlayRef = this._overlayRef;
  1136. if (!overlayRef) {
  1137. this._portal = new portal.TemplatePortal(this.autocomplete.template, this._viewContainerRef);
  1138. overlayRef = this._overlay.create(this._getOverlayConfig());
  1139. this._overlayRef = overlayRef;
  1140. // Use the `keydownEvents` in order to take advantage of
  1141. // the overlay event targeting provided by the CDK overlay.
  1142. overlayRef.keydownEvents().subscribe((/**
  1143. * @param {?} event
  1144. * @return {?}
  1145. */
  1146. function (event) {
  1147. // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
  1148. // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
  1149. if (event.keyCode === keycodes.ESCAPE || (event.keyCode === keycodes.UP_ARROW && event.altKey)) {
  1150. _this._resetActiveItem();
  1151. _this._closeKeyEventStream.next();
  1152. // We need to stop propagation, otherwise the event will eventually
  1153. // reach the input itself and cause the overlay to be reopened.
  1154. event.stopPropagation();
  1155. event.preventDefault();
  1156. }
  1157. }));
  1158. if (this._viewportRuler) {
  1159. this._viewportSubscription = this._viewportRuler.change().subscribe((/**
  1160. * @return {?}
  1161. */
  1162. function () {
  1163. if (_this.panelOpen && overlayRef) {
  1164. overlayRef.updateSize({ width: _this._getPanelWidth() });
  1165. }
  1166. }));
  1167. }
  1168. }
  1169. else {
  1170. // Update the trigger, panel width and direction, in case anything has changed.
  1171. this._positionStrategy.setOrigin(this._getConnectedElement());
  1172. overlayRef.updateSize({ width: this._getPanelWidth() });
  1173. }
  1174. if (overlayRef && !overlayRef.hasAttached()) {
  1175. overlayRef.attach(this._portal);
  1176. this._closingActionsSubscription = this._subscribeToClosingActions();
  1177. }
  1178. /** @type {?} */
  1179. var wasOpen = this.panelOpen;
  1180. this.autocomplete._setVisibility();
  1181. this.autocomplete._isOpen = this._overlayAttached = true;
  1182. // We need to do an extra `panelOpen` check in here, because the
  1183. // autocomplete won't be shown if there are no options.
  1184. if (this.panelOpen && wasOpen !== this.panelOpen) {
  1185. this.autocomplete.opened.emit();
  1186. }
  1187. };
  1188. /**
  1189. * @private
  1190. * @return {?}
  1191. */
  1192. MatAutocompleteTrigger.prototype._getOverlayConfig = /**
  1193. * @private
  1194. * @return {?}
  1195. */
  1196. function () {
  1197. return new overlay.OverlayConfig({
  1198. positionStrategy: this._getOverlayPosition(),
  1199. scrollStrategy: this._scrollStrategy(),
  1200. width: this._getPanelWidth(),
  1201. direction: this._dir
  1202. });
  1203. };
  1204. /**
  1205. * @private
  1206. * @return {?}
  1207. */
  1208. MatAutocompleteTrigger.prototype._getOverlayPosition = /**
  1209. * @private
  1210. * @return {?}
  1211. */
  1212. function () {
  1213. /** @type {?} */
  1214. var strategy = this._overlay.position()
  1215. .flexibleConnectedTo(this._getConnectedElement())
  1216. .withFlexibleDimensions(false)
  1217. .withPush(false);
  1218. this._setStrategyPositions(strategy);
  1219. this._positionStrategy = strategy;
  1220. return strategy;
  1221. };
  1222. /** Sets the positions on a position strategy based on the directive's input state. */
  1223. /**
  1224. * Sets the positions on a position strategy based on the directive's input state.
  1225. * @private
  1226. * @param {?} positionStrategy
  1227. * @return {?}
  1228. */
  1229. MatAutocompleteTrigger.prototype._setStrategyPositions = /**
  1230. * Sets the positions on a position strategy based on the directive's input state.
  1231. * @private
  1232. * @param {?} positionStrategy
  1233. * @return {?}
  1234. */
  1235. function (positionStrategy) {
  1236. /** @type {?} */
  1237. var belowPosition = {
  1238. originX: 'start',
  1239. originY: 'bottom',
  1240. overlayX: 'start',
  1241. overlayY: 'top'
  1242. };
  1243. /** @type {?} */
  1244. var abovePosition = {
  1245. originX: 'start',
  1246. originY: 'top',
  1247. overlayX: 'start',
  1248. overlayY: 'bottom',
  1249. // The overlay edge connected to the trigger should have squared corners, while
  1250. // the opposite end has rounded corners. We apply a CSS class to swap the
  1251. // border-radius based on the overlay position.
  1252. panelClass: 'mat-autocomplete-panel-above'
  1253. };
  1254. /** @type {?} */
  1255. var positions;
  1256. if (this.position === 'above') {
  1257. positions = [abovePosition];
  1258. }
  1259. else if (this.position === 'below') {
  1260. positions = [belowPosition];
  1261. }
  1262. else {
  1263. positions = [belowPosition, abovePosition];
  1264. }
  1265. positionStrategy.withPositions(positions);
  1266. };
  1267. /**
  1268. * @private
  1269. * @return {?}
  1270. */
  1271. MatAutocompleteTrigger.prototype._getConnectedElement = /**
  1272. * @private
  1273. * @return {?}
  1274. */
  1275. function () {
  1276. if (this.connectedTo) {
  1277. return this.connectedTo.elementRef;
  1278. }
  1279. return this._formField ? this._formField.getConnectedOverlayOrigin() : this._element;
  1280. };
  1281. /**
  1282. * @private
  1283. * @return {?}
  1284. */
  1285. MatAutocompleteTrigger.prototype._getPanelWidth = /**
  1286. * @private
  1287. * @return {?}
  1288. */
  1289. function () {
  1290. return this.autocomplete.panelWidth || this._getHostWidth();
  1291. };
  1292. /** Returns the width of the input element, so the panel width can match it. */
  1293. /**
  1294. * Returns the width of the input element, so the panel width can match it.
  1295. * @private
  1296. * @return {?}
  1297. */
  1298. MatAutocompleteTrigger.prototype._getHostWidth = /**
  1299. * Returns the width of the input element, so the panel width can match it.
  1300. * @private
  1301. * @return {?}
  1302. */
  1303. function () {
  1304. return this._getConnectedElement().nativeElement.getBoundingClientRect().width;
  1305. };
  1306. /**
  1307. * Resets the active item to -1 so arrow events will activate the
  1308. * correct options, or to 0 if the consumer opted into it.
  1309. */
  1310. /**
  1311. * Resets the active item to -1 so arrow events will activate the
  1312. * correct options, or to 0 if the consumer opted into it.
  1313. * @private
  1314. * @return {?}
  1315. */
  1316. MatAutocompleteTrigger.prototype._resetActiveItem = /**
  1317. * Resets the active item to -1 so arrow events will activate the
  1318. * correct options, or to 0 if the consumer opted into it.
  1319. * @private
  1320. * @return {?}
  1321. */
  1322. function () {
  1323. this.autocomplete._keyManager.setActiveItem(this.autocomplete.autoActiveFirstOption ? 0 : -1);
  1324. };
  1325. /** Determines whether the panel can be opened. */
  1326. /**
  1327. * Determines whether the panel can be opened.
  1328. * @private
  1329. * @return {?}
  1330. */
  1331. MatAutocompleteTrigger.prototype._canOpen = /**
  1332. * Determines whether the panel can be opened.
  1333. * @private
  1334. * @return {?}
  1335. */
  1336. function () {
  1337. /** @type {?} */
  1338. var element = this._element.nativeElement;
  1339. return !element.readOnly && !element.disabled && !this._autocompleteDisabled;
  1340. };
  1341. MatAutocompleteTrigger.decorators = [
  1342. { type: core.Directive, args: [{
  1343. selector: "input[matAutocomplete], textarea[matAutocomplete]",
  1344. host: {
  1345. '[attr.autocomplete]': 'autocompleteAttribute',
  1346. '[attr.role]': 'autocompleteDisabled ? null : "combobox"',
  1347. '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"',
  1348. '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null',
  1349. '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()',
  1350. '[attr.aria-owns]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id',
  1351. '[attr.aria-haspopup]': '!autocompleteDisabled',
  1352. // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
  1353. // a little earlier. This avoids issues where IE delays the focusing of the input.
  1354. '(focusin)': '_handleFocus()',
  1355. '(blur)': '_onTouched()',
  1356. '(input)': '_handleInput($event)',
  1357. '(keydown)': '_handleKeydown($event)',
  1358. },
  1359. exportAs: 'matAutocompleteTrigger',
  1360. providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
  1361. },] },
  1362. ];
  1363. /** @nocollapse */
  1364. MatAutocompleteTrigger.ctorParameters = function () { return [
  1365. { type: core.ElementRef },
  1366. { type: overlay.Overlay },
  1367. { type: core.ViewContainerRef },
  1368. { type: core.NgZone },
  1369. { type: core.ChangeDetectorRef },
  1370. { type: undefined, decorators: [{ type: core.Inject, args: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY,] }] },
  1371. { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
  1372. { type: formField.MatFormField, decorators: [{ type: core.Optional }, { type: core.Host }] },
  1373. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [common.DOCUMENT,] }] },
  1374. { type: scrolling.ViewportRuler }
  1375. ]; };
  1376. MatAutocompleteTrigger.propDecorators = {
  1377. autocomplete: [{ type: core.Input, args: ['matAutocomplete',] }],
  1378. position: [{ type: core.Input, args: ['matAutocompletePosition',] }],
  1379. connectedTo: [{ type: core.Input, args: ['matAutocompleteConnectedTo',] }],
  1380. autocompleteAttribute: [{ type: core.Input, args: ['autocomplete',] }],
  1381. autocompleteDisabled: [{ type: core.Input, args: ['matAutocompleteDisabled',] }]
  1382. };
  1383. return MatAutocompleteTrigger;
  1384. }());
  1385. /**
  1386. * @fileoverview added by tsickle
  1387. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1388. */
  1389. var MatAutocompleteModule = /** @class */ (function () {
  1390. function MatAutocompleteModule() {
  1391. }
  1392. MatAutocompleteModule.decorators = [
  1393. { type: core.NgModule, args: [{
  1394. imports: [core$1.MatOptionModule, overlay.OverlayModule, core$1.MatCommonModule, common.CommonModule],
  1395. exports: [
  1396. MatAutocomplete,
  1397. core$1.MatOptionModule,
  1398. MatAutocompleteTrigger,
  1399. MatAutocompleteOrigin,
  1400. core$1.MatCommonModule
  1401. ],
  1402. declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin],
  1403. providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER],
  1404. },] },
  1405. ];
  1406. return MatAutocompleteModule;
  1407. }());
  1408. exports.MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY = MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY;
  1409. exports.MatAutocompleteSelectedEvent = MatAutocompleteSelectedEvent;
  1410. exports.MAT_AUTOCOMPLETE_DEFAULT_OPTIONS = MAT_AUTOCOMPLETE_DEFAULT_OPTIONS;
  1411. exports.MatAutocomplete = MatAutocomplete;
  1412. exports.MatAutocompleteModule = MatAutocompleteModule;
  1413. exports.MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY = MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
  1414. exports.getMatAutocompleteMissingPanelError = getMatAutocompleteMissingPanelError;
  1415. exports.AUTOCOMPLETE_OPTION_HEIGHT = AUTOCOMPLETE_OPTION_HEIGHT;
  1416. exports.AUTOCOMPLETE_PANEL_HEIGHT = AUTOCOMPLETE_PANEL_HEIGHT;
  1417. exports.MAT_AUTOCOMPLETE_SCROLL_STRATEGY = MAT_AUTOCOMPLETE_SCROLL_STRATEGY;
  1418. exports.MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER;
  1419. exports.MAT_AUTOCOMPLETE_VALUE_ACCESSOR = MAT_AUTOCOMPLETE_VALUE_ACCESSOR;
  1420. exports.MatAutocompleteTrigger = MatAutocompleteTrigger;
  1421. exports.MatAutocompleteOrigin = MatAutocompleteOrigin;
  1422. Object.defineProperty(exports, '__esModule', { value: true });
  1423. })));
  1424. //# sourceMappingURL=material-autocomplete.umd.js.map