material-chips.umd.js 78 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285
  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/coercion'), require('@angular/cdk/keycodes'), require('@angular/cdk/platform'), require('@angular/core'), require('@angular/material/core'), require('rxjs'), require('rxjs/operators'), require('@angular/platform-browser/animations'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/collections'), require('@angular/forms'), require('@angular/material/form-field')) :
  10. typeof define === 'function' && define.amd ? define('@angular/material/chips', ['exports', '@angular/cdk/coercion', '@angular/cdk/keycodes', '@angular/cdk/platform', '@angular/core', '@angular/material/core', 'rxjs', 'rxjs/operators', '@angular/platform-browser/animations', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/collections', '@angular/forms', '@angular/material/form-field'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.chips = {}),global.ng.cdk.coercion,global.ng.cdk.keycodes,global.ng.cdk.platform,global.ng.core,global.ng.material.core,global.rxjs,global.rxjs.operators,global.ng.platformBrowser.animations,global.ng.cdk.a11y,global.ng.cdk.bidi,global.ng.cdk.collections,global.ng.forms,global.ng.material.formField));
  12. }(this, (function (exports,coercion,keycodes,platform,core,core$1,rxjs,operators,animations,a11y,bidi,collections,forms,formField) { '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. * Event object emitted by MatChip when selected or deselected.
  43. */
  44. var /**
  45. * Event object emitted by MatChip when selected or deselected.
  46. */
  47. MatChipSelectionChange = /** @class */ (function () {
  48. function MatChipSelectionChange(source, selected, isUserInput) {
  49. if (isUserInput === void 0) { isUserInput = false; }
  50. this.source = source;
  51. this.selected = selected;
  52. this.isUserInput = isUserInput;
  53. }
  54. return MatChipSelectionChange;
  55. }());
  56. // Boilerplate for applying mixins to MatChip.
  57. /**
  58. * \@docs-private
  59. */
  60. var
  61. // Boilerplate for applying mixins to MatChip.
  62. /**
  63. * \@docs-private
  64. */
  65. MatChipBase = /** @class */ (function () {
  66. function MatChipBase(_elementRef) {
  67. this._elementRef = _elementRef;
  68. }
  69. return MatChipBase;
  70. }());
  71. /** @type {?} */
  72. var _MatChipMixinBase = core$1.mixinColor(core$1.mixinDisableRipple(core$1.mixinDisabled(MatChipBase)), 'primary');
  73. /**
  74. * Dummy directive to add CSS class to chip avatar.
  75. * \@docs-private
  76. */
  77. var MatChipAvatar = /** @class */ (function () {
  78. function MatChipAvatar() {
  79. }
  80. MatChipAvatar.decorators = [
  81. { type: core.Directive, args: [{
  82. selector: 'mat-chip-avatar, [matChipAvatar]',
  83. host: { 'class': 'mat-chip-avatar' }
  84. },] },
  85. ];
  86. return MatChipAvatar;
  87. }());
  88. /**
  89. * Dummy directive to add CSS class to chip trailing icon.
  90. * \@docs-private
  91. */
  92. var MatChipTrailingIcon = /** @class */ (function () {
  93. function MatChipTrailingIcon() {
  94. }
  95. MatChipTrailingIcon.decorators = [
  96. { type: core.Directive, args: [{
  97. selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
  98. host: { 'class': 'mat-chip-trailing-icon' }
  99. },] },
  100. ];
  101. return MatChipTrailingIcon;
  102. }());
  103. /**
  104. * Material design styled Chip component. Used inside the MatChipList component.
  105. */
  106. var MatChip = /** @class */ (function (_super) {
  107. __extends(MatChip, _super);
  108. function MatChip(_elementRef, _ngZone, platform$$1, globalRippleOptions,
  109. // @breaking-change 8.0.0 `animationMode` parameter to become required.
  110. animationMode) {
  111. var _this = _super.call(this, _elementRef) || this;
  112. _this._elementRef = _elementRef;
  113. _this._ngZone = _ngZone;
  114. /**
  115. * Whether the chip has focus.
  116. */
  117. _this._hasFocus = false;
  118. /**
  119. * Whether the chip list is selectable
  120. */
  121. _this.chipListSelectable = true;
  122. /**
  123. * Whether the chip list is in multi-selection mode.
  124. */
  125. _this._chipListMultiple = false;
  126. _this._selected = false;
  127. _this._selectable = true;
  128. _this._removable = true;
  129. /**
  130. * Emits when the chip is focused.
  131. */
  132. _this._onFocus = new rxjs.Subject();
  133. /**
  134. * Emits when the chip is blured.
  135. */
  136. _this._onBlur = new rxjs.Subject();
  137. /**
  138. * Emitted when the chip is selected or deselected.
  139. */
  140. _this.selectionChange = new core.EventEmitter();
  141. /**
  142. * Emitted when the chip is destroyed.
  143. */
  144. _this.destroyed = new core.EventEmitter();
  145. /**
  146. * Emitted when a chip is to be removed.
  147. */
  148. _this.removed = new core.EventEmitter();
  149. _this._addHostClassName();
  150. _this._chipRipple = new core$1.RippleRenderer(_this, _ngZone, _elementRef, platform$$1);
  151. _this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);
  152. _this.rippleConfig = globalRippleOptions || {};
  153. _this._animationsDisabled = animationMode === 'NoopAnimations';
  154. return _this;
  155. }
  156. Object.defineProperty(MatChip.prototype, "rippleDisabled", {
  157. /**
  158. * Whether ripples are disabled on interaction
  159. * @docs-private
  160. */
  161. get: /**
  162. * Whether ripples are disabled on interaction
  163. * \@docs-private
  164. * @return {?}
  165. */
  166. function () {
  167. return this.disabled || this.disableRipple || !!this.rippleConfig.disabled;
  168. },
  169. enumerable: true,
  170. configurable: true
  171. });
  172. Object.defineProperty(MatChip.prototype, "selected", {
  173. /** Whether the chip is selected. */
  174. get: /**
  175. * Whether the chip is selected.
  176. * @return {?}
  177. */
  178. function () { return this._selected; },
  179. set: /**
  180. * @param {?} value
  181. * @return {?}
  182. */
  183. function (value) {
  184. /** @type {?} */
  185. var coercedValue = coercion.coerceBooleanProperty(value);
  186. if (coercedValue !== this._selected) {
  187. this._selected = coercedValue;
  188. this._dispatchSelectionChange();
  189. }
  190. },
  191. enumerable: true,
  192. configurable: true
  193. });
  194. Object.defineProperty(MatChip.prototype, "value", {
  195. /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */
  196. get: /**
  197. * The value of the chip. Defaults to the content inside `<mat-chip>` tags.
  198. * @return {?}
  199. */
  200. function () {
  201. return this._value != undefined
  202. ? this._value
  203. : this._elementRef.nativeElement.textContent;
  204. },
  205. set: /**
  206. * @param {?} value
  207. * @return {?}
  208. */
  209. function (value) { this._value = value; },
  210. enumerable: true,
  211. configurable: true
  212. });
  213. Object.defineProperty(MatChip.prototype, "selectable", {
  214. /**
  215. * Whether or not the chip is selectable. When a chip is not selectable,
  216. * changes to its selected state are always ignored. By default a chip is
  217. * selectable, and it becomes non-selectable if its parent chip list is
  218. * not selectable.
  219. */
  220. get: /**
  221. * Whether or not the chip is selectable. When a chip is not selectable,
  222. * changes to its selected state are always ignored. By default a chip is
  223. * selectable, and it becomes non-selectable if its parent chip list is
  224. * not selectable.
  225. * @return {?}
  226. */
  227. function () { return this._selectable && this.chipListSelectable; },
  228. set: /**
  229. * @param {?} value
  230. * @return {?}
  231. */
  232. function (value) {
  233. this._selectable = coercion.coerceBooleanProperty(value);
  234. },
  235. enumerable: true,
  236. configurable: true
  237. });
  238. Object.defineProperty(MatChip.prototype, "removable", {
  239. /**
  240. * Determines whether or not the chip displays the remove styling and emits (removed) events.
  241. */
  242. get: /**
  243. * Determines whether or not the chip displays the remove styling and emits (removed) events.
  244. * @return {?}
  245. */
  246. function () { return this._removable; },
  247. set: /**
  248. * @param {?} value
  249. * @return {?}
  250. */
  251. function (value) {
  252. this._removable = coercion.coerceBooleanProperty(value);
  253. },
  254. enumerable: true,
  255. configurable: true
  256. });
  257. Object.defineProperty(MatChip.prototype, "ariaSelected", {
  258. /** The ARIA selected applied to the chip. */
  259. get: /**
  260. * The ARIA selected applied to the chip.
  261. * @return {?}
  262. */
  263. function () {
  264. // Remove the `aria-selected` when the chip is deselected in single-selection mode, because
  265. // it adds noise to NVDA users where "not selected" will be read out for each chip.
  266. return this.selectable && (this._chipListMultiple || this.selected) ?
  267. this.selected.toString() : null;
  268. },
  269. enumerable: true,
  270. configurable: true
  271. });
  272. /**
  273. * @return {?}
  274. */
  275. MatChip.prototype._addHostClassName = /**
  276. * @return {?}
  277. */
  278. function () {
  279. /** @type {?} */
  280. var basicChipAttrName = 'mat-basic-chip';
  281. /** @type {?} */
  282. var element = (/** @type {?} */ (this._elementRef.nativeElement));
  283. if (element.hasAttribute(basicChipAttrName) ||
  284. element.tagName.toLowerCase() === basicChipAttrName) {
  285. element.classList.add(basicChipAttrName);
  286. return;
  287. }
  288. else {
  289. element.classList.add('mat-standard-chip');
  290. }
  291. };
  292. /**
  293. * @return {?}
  294. */
  295. MatChip.prototype.ngOnDestroy = /**
  296. * @return {?}
  297. */
  298. function () {
  299. this.destroyed.emit({ chip: this });
  300. this._chipRipple._removeTriggerEvents();
  301. };
  302. /** Selects the chip. */
  303. /**
  304. * Selects the chip.
  305. * @return {?}
  306. */
  307. MatChip.prototype.select = /**
  308. * Selects the chip.
  309. * @return {?}
  310. */
  311. function () {
  312. if (!this._selected) {
  313. this._selected = true;
  314. this._dispatchSelectionChange();
  315. }
  316. };
  317. /** Deselects the chip. */
  318. /**
  319. * Deselects the chip.
  320. * @return {?}
  321. */
  322. MatChip.prototype.deselect = /**
  323. * Deselects the chip.
  324. * @return {?}
  325. */
  326. function () {
  327. if (this._selected) {
  328. this._selected = false;
  329. this._dispatchSelectionChange();
  330. }
  331. };
  332. /** Select this chip and emit selected event */
  333. /**
  334. * Select this chip and emit selected event
  335. * @return {?}
  336. */
  337. MatChip.prototype.selectViaInteraction = /**
  338. * Select this chip and emit selected event
  339. * @return {?}
  340. */
  341. function () {
  342. if (!this._selected) {
  343. this._selected = true;
  344. this._dispatchSelectionChange(true);
  345. }
  346. };
  347. /** Toggles the current selected state of this chip. */
  348. /**
  349. * Toggles the current selected state of this chip.
  350. * @param {?=} isUserInput
  351. * @return {?}
  352. */
  353. MatChip.prototype.toggleSelected = /**
  354. * Toggles the current selected state of this chip.
  355. * @param {?=} isUserInput
  356. * @return {?}
  357. */
  358. function (isUserInput) {
  359. if (isUserInput === void 0) { isUserInput = false; }
  360. this._selected = !this.selected;
  361. this._dispatchSelectionChange(isUserInput);
  362. return this.selected;
  363. };
  364. /** Allows for programmatic focusing of the chip. */
  365. /**
  366. * Allows for programmatic focusing of the chip.
  367. * @return {?}
  368. */
  369. MatChip.prototype.focus = /**
  370. * Allows for programmatic focusing of the chip.
  371. * @return {?}
  372. */
  373. function () {
  374. if (!this._hasFocus) {
  375. this._elementRef.nativeElement.focus();
  376. this._onFocus.next({ chip: this });
  377. }
  378. this._hasFocus = true;
  379. };
  380. /**
  381. * Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or
  382. * BACKSPACE keys are pressed.
  383. *
  384. * Informs any listeners of the removal request. Does not remove the chip from the DOM.
  385. */
  386. /**
  387. * Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or
  388. * BACKSPACE keys are pressed.
  389. *
  390. * Informs any listeners of the removal request. Does not remove the chip from the DOM.
  391. * @return {?}
  392. */
  393. MatChip.prototype.remove = /**
  394. * Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or
  395. * BACKSPACE keys are pressed.
  396. *
  397. * Informs any listeners of the removal request. Does not remove the chip from the DOM.
  398. * @return {?}
  399. */
  400. function () {
  401. if (this.removable) {
  402. this.removed.emit({ chip: this });
  403. }
  404. };
  405. /** Handles click events on the chip. */
  406. /**
  407. * Handles click events on the chip.
  408. * @param {?} event
  409. * @return {?}
  410. */
  411. MatChip.prototype._handleClick = /**
  412. * Handles click events on the chip.
  413. * @param {?} event
  414. * @return {?}
  415. */
  416. function (event) {
  417. if (this.disabled) {
  418. event.preventDefault();
  419. }
  420. else {
  421. event.stopPropagation();
  422. }
  423. };
  424. /** Handle custom key presses. */
  425. /**
  426. * Handle custom key presses.
  427. * @param {?} event
  428. * @return {?}
  429. */
  430. MatChip.prototype._handleKeydown = /**
  431. * Handle custom key presses.
  432. * @param {?} event
  433. * @return {?}
  434. */
  435. function (event) {
  436. if (this.disabled) {
  437. return;
  438. }
  439. switch (event.keyCode) {
  440. case keycodes.DELETE:
  441. case keycodes.BACKSPACE:
  442. // If we are removable, remove the focused chip
  443. this.remove();
  444. // Always prevent so page navigation does not occur
  445. event.preventDefault();
  446. break;
  447. case keycodes.SPACE:
  448. // If we are selectable, toggle the focused chip
  449. if (this.selectable) {
  450. this.toggleSelected(true);
  451. }
  452. // Always prevent space from scrolling the page since the list has focus
  453. event.preventDefault();
  454. break;
  455. }
  456. };
  457. /**
  458. * @return {?}
  459. */
  460. MatChip.prototype._blur = /**
  461. * @return {?}
  462. */
  463. function () {
  464. var _this = this;
  465. // When animations are enabled, Angular may end up removing the chip from the DOM a little
  466. // earlier than usual, causing it to be blurred and throwing off the logic in the chip list
  467. // that moves focus not the next item. To work around the issue, we defer marking the chip
  468. // as not focused until the next time the zone stabilizes.
  469. this._ngZone.onStable
  470. .asObservable()
  471. .pipe(operators.take(1))
  472. .subscribe((/**
  473. * @return {?}
  474. */
  475. function () {
  476. _this._ngZone.run((/**
  477. * @return {?}
  478. */
  479. function () {
  480. _this._hasFocus = false;
  481. _this._onBlur.next({ chip: _this });
  482. }));
  483. }));
  484. };
  485. /**
  486. * @private
  487. * @param {?=} isUserInput
  488. * @return {?}
  489. */
  490. MatChip.prototype._dispatchSelectionChange = /**
  491. * @private
  492. * @param {?=} isUserInput
  493. * @return {?}
  494. */
  495. function (isUserInput) {
  496. if (isUserInput === void 0) { isUserInput = false; }
  497. this.selectionChange.emit({
  498. source: this,
  499. isUserInput: isUserInput,
  500. selected: this._selected
  501. });
  502. };
  503. MatChip.decorators = [
  504. { type: core.Directive, args: [{
  505. selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]",
  506. inputs: ['color', 'disabled', 'disableRipple'],
  507. exportAs: 'matChip',
  508. host: {
  509. 'class': 'mat-chip',
  510. '[attr.tabindex]': 'disabled ? null : -1',
  511. 'role': 'option',
  512. '[class.mat-chip-selected]': 'selected',
  513. '[class.mat-chip-with-avatar]': 'avatar',
  514. '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
  515. '[class.mat-chip-disabled]': 'disabled',
  516. '[class._mat-animation-noopable]': '_animationsDisabled',
  517. '[attr.disabled]': 'disabled || null',
  518. '[attr.aria-disabled]': 'disabled.toString()',
  519. '[attr.aria-selected]': 'ariaSelected',
  520. '(click)': '_handleClick($event)',
  521. '(keydown)': '_handleKeydown($event)',
  522. '(focus)': 'focus()',
  523. '(blur)': '_blur()',
  524. },
  525. },] },
  526. ];
  527. /** @nocollapse */
  528. MatChip.ctorParameters = function () { return [
  529. { type: core.ElementRef },
  530. { type: core.NgZone },
  531. { type: platform.Platform },
  532. { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MAT_RIPPLE_GLOBAL_OPTIONS,] }] },
  533. { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [animations.ANIMATION_MODULE_TYPE,] }] }
  534. ]; };
  535. MatChip.propDecorators = {
  536. avatar: [{ type: core.ContentChild, args: [MatChipAvatar, { static: false },] }],
  537. trailingIcon: [{ type: core.ContentChild, args: [MatChipTrailingIcon, { static: false },] }],
  538. removeIcon: [{ type: core.ContentChild, args: [core.forwardRef((/**
  539. * @return {?}
  540. */
  541. function () { return MatChipRemove; })), { static: false },] }],
  542. selected: [{ type: core.Input }],
  543. value: [{ type: core.Input }],
  544. selectable: [{ type: core.Input }],
  545. removable: [{ type: core.Input }],
  546. selectionChange: [{ type: core.Output }],
  547. destroyed: [{ type: core.Output }],
  548. removed: [{ type: core.Output }]
  549. };
  550. return MatChip;
  551. }(_MatChipMixinBase));
  552. /**
  553. * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon
  554. * available at https://material.io/icons/#ic_cancel.
  555. *
  556. * Example:
  557. *
  558. * `<mat-chip>
  559. * <mat-icon matChipRemove>cancel</mat-icon>
  560. * </mat-chip>`
  561. *
  562. * You *may* use a custom icon, but you may need to override the `mat-chip-remove` positioning
  563. * styles to properly center the icon within the chip.
  564. */
  565. var MatChipRemove = /** @class */ (function () {
  566. function MatChipRemove(_parentChip) {
  567. this._parentChip = _parentChip;
  568. }
  569. /** Calls the parent chip's public `remove()` method if applicable. */
  570. /**
  571. * Calls the parent chip's public `remove()` method if applicable.
  572. * @param {?} event
  573. * @return {?}
  574. */
  575. MatChipRemove.prototype._handleClick = /**
  576. * Calls the parent chip's public `remove()` method if applicable.
  577. * @param {?} event
  578. * @return {?}
  579. */
  580. function (event) {
  581. /** @type {?} */
  582. var parentChip = this._parentChip;
  583. if (parentChip.removable && !parentChip.disabled) {
  584. parentChip.remove();
  585. }
  586. // We need to stop event propagation because otherwise the event will bubble up to the
  587. // form field and cause the `onContainerClick` method to be invoked. This method would then
  588. // reset the focused chip that has been focused after chip removal. Usually the parent
  589. // the parent click listener of the `MatChip` would prevent propagation, but it can happen
  590. // that the chip is being removed before the event bubbles up.
  591. event.stopPropagation();
  592. };
  593. MatChipRemove.decorators = [
  594. { type: core.Directive, args: [{
  595. selector: '[matChipRemove]',
  596. host: {
  597. 'class': 'mat-chip-remove mat-chip-trailing-icon',
  598. '(click)': '_handleClick($event)',
  599. }
  600. },] },
  601. ];
  602. /** @nocollapse */
  603. MatChipRemove.ctorParameters = function () { return [
  604. { type: MatChip }
  605. ]; };
  606. return MatChipRemove;
  607. }());
  608. /**
  609. * @fileoverview added by tsickle
  610. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  611. */
  612. /**
  613. * Injection token to be used to override the default options for the chips module.
  614. * @type {?}
  615. */
  616. var MAT_CHIPS_DEFAULT_OPTIONS = new core.InjectionToken('mat-chips-default-options');
  617. /**
  618. * @fileoverview added by tsickle
  619. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  620. */
  621. // Boilerplate for applying mixins to MatChipList.
  622. /**
  623. * \@docs-private
  624. */
  625. var
  626. // Boilerplate for applying mixins to MatChipList.
  627. /**
  628. * \@docs-private
  629. */
  630. MatChipListBase = /** @class */ (function () {
  631. function MatChipListBase(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
  632. this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
  633. this._parentForm = _parentForm;
  634. this._parentFormGroup = _parentFormGroup;
  635. this.ngControl = ngControl;
  636. }
  637. return MatChipListBase;
  638. }());
  639. /** @type {?} */
  640. var _MatChipListMixinBase = core$1.mixinErrorState(MatChipListBase);
  641. // Increasing integer for generating unique ids for chip-list components.
  642. /** @type {?} */
  643. var nextUniqueId = 0;
  644. /**
  645. * Change event object that is emitted when the chip list value has changed.
  646. */
  647. var /**
  648. * Change event object that is emitted when the chip list value has changed.
  649. */
  650. MatChipListChange = /** @class */ (function () {
  651. function MatChipListChange(source, value) {
  652. this.source = source;
  653. this.value = value;
  654. }
  655. return MatChipListChange;
  656. }());
  657. /**
  658. * A material design chips component (named ChipList for its similarity to the List component).
  659. */
  660. var MatChipList = /** @class */ (function (_super) {
  661. __extends(MatChipList, _super);
  662. function MatChipList(_elementRef, _changeDetectorRef, _dir, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, ngControl) {
  663. var _this = _super.call(this, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
  664. _this._elementRef = _elementRef;
  665. _this._changeDetectorRef = _changeDetectorRef;
  666. _this._dir = _dir;
  667. _this.ngControl = ngControl;
  668. /**
  669. * Implemented as part of MatFormFieldControl.
  670. * \@docs-private
  671. */
  672. _this.controlType = 'mat-chip-list';
  673. /**
  674. * When a chip is destroyed, we store the index of the destroyed chip until the chips
  675. * query list notifies about the update. This is necessary because we cannot determine an
  676. * appropriate chip that should receive focus until the array of chips updated completely.
  677. */
  678. _this._lastDestroyedChipIndex = null;
  679. /**
  680. * Subject that emits when the component has been destroyed.
  681. */
  682. _this._destroyed = new rxjs.Subject();
  683. /**
  684. * Uid of the chip list
  685. */
  686. _this._uid = "mat-chip-list-" + nextUniqueId++;
  687. /**
  688. * Tab index for the chip list.
  689. */
  690. _this._tabIndex = 0;
  691. /**
  692. * User defined tab index.
  693. * When it is not null, use user defined tab index. Otherwise use _tabIndex
  694. */
  695. _this._userTabIndex = null;
  696. /**
  697. * Function when touched
  698. */
  699. _this._onTouched = (/**
  700. * @return {?}
  701. */
  702. function () { });
  703. /**
  704. * Function when changed
  705. */
  706. _this._onChange = (/**
  707. * @return {?}
  708. */
  709. function () { });
  710. _this._multiple = false;
  711. _this._compareWith = (/**
  712. * @param {?} o1
  713. * @param {?} o2
  714. * @return {?}
  715. */
  716. function (o1, o2) { return o1 === o2; });
  717. _this._required = false;
  718. _this._disabled = false;
  719. /**
  720. * Orientation of the chip list.
  721. */
  722. _this.ariaOrientation = 'horizontal';
  723. _this._selectable = true;
  724. /**
  725. * Event emitted when the selected chip list value has been changed by the user.
  726. */
  727. _this.change = new core.EventEmitter();
  728. /**
  729. * Event that emits whenever the raw value of the chip-list changes. This is here primarily
  730. * to facilitate the two-way binding for the `value` input.
  731. * \@docs-private
  732. */
  733. _this.valueChange = new core.EventEmitter();
  734. if (_this.ngControl) {
  735. _this.ngControl.valueAccessor = _this;
  736. }
  737. return _this;
  738. }
  739. Object.defineProperty(MatChipList.prototype, "selected", {
  740. /** The array of selected chips inside chip list. */
  741. get: /**
  742. * The array of selected chips inside chip list.
  743. * @return {?}
  744. */
  745. function () {
  746. return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0];
  747. },
  748. enumerable: true,
  749. configurable: true
  750. });
  751. Object.defineProperty(MatChipList.prototype, "role", {
  752. /** The ARIA role applied to the chip list. */
  753. get: /**
  754. * The ARIA role applied to the chip list.
  755. * @return {?}
  756. */
  757. function () { return this.empty ? null : 'listbox'; },
  758. enumerable: true,
  759. configurable: true
  760. });
  761. Object.defineProperty(MatChipList.prototype, "multiple", {
  762. /** Whether the user should be allowed to select multiple chips. */
  763. get: /**
  764. * Whether the user should be allowed to select multiple chips.
  765. * @return {?}
  766. */
  767. function () { return this._multiple; },
  768. set: /**
  769. * @param {?} value
  770. * @return {?}
  771. */
  772. function (value) {
  773. this._multiple = coercion.coerceBooleanProperty(value);
  774. this._syncChipsState();
  775. },
  776. enumerable: true,
  777. configurable: true
  778. });
  779. Object.defineProperty(MatChipList.prototype, "compareWith", {
  780. /**
  781. * A function to compare the option values with the selected values. The first argument
  782. * is a value from an option. The second is a value from the selection. A boolean
  783. * should be returned.
  784. */
  785. get: /**
  786. * A function to compare the option values with the selected values. The first argument
  787. * is a value from an option. The second is a value from the selection. A boolean
  788. * should be returned.
  789. * @return {?}
  790. */
  791. function () { return this._compareWith; },
  792. set: /**
  793. * @param {?} fn
  794. * @return {?}
  795. */
  796. function (fn) {
  797. this._compareWith = fn;
  798. if (this._selectionModel) {
  799. // A different comparator means the selection could change.
  800. this._initializeSelection();
  801. }
  802. },
  803. enumerable: true,
  804. configurable: true
  805. });
  806. Object.defineProperty(MatChipList.prototype, "value", {
  807. /**
  808. * Implemented as part of MatFormFieldControl.
  809. * @docs-private
  810. */
  811. get: /**
  812. * Implemented as part of MatFormFieldControl.
  813. * \@docs-private
  814. * @return {?}
  815. */
  816. function () { return this._value; },
  817. set: /**
  818. * @param {?} value
  819. * @return {?}
  820. */
  821. function (value) {
  822. this.writeValue(value);
  823. this._value = value;
  824. },
  825. enumerable: true,
  826. configurable: true
  827. });
  828. Object.defineProperty(MatChipList.prototype, "id", {
  829. /**
  830. * Implemented as part of MatFormFieldControl.
  831. * @docs-private
  832. */
  833. get: /**
  834. * Implemented as part of MatFormFieldControl.
  835. * \@docs-private
  836. * @return {?}
  837. */
  838. function () {
  839. return this._chipInput ? this._chipInput.id : this._uid;
  840. },
  841. enumerable: true,
  842. configurable: true
  843. });
  844. Object.defineProperty(MatChipList.prototype, "required", {
  845. /**
  846. * Implemented as part of MatFormFieldControl.
  847. * @docs-private
  848. */
  849. get: /**
  850. * Implemented as part of MatFormFieldControl.
  851. * \@docs-private
  852. * @return {?}
  853. */
  854. function () { return this._required; },
  855. set: /**
  856. * @param {?} value
  857. * @return {?}
  858. */
  859. function (value) {
  860. this._required = coercion.coerceBooleanProperty(value);
  861. this.stateChanges.next();
  862. },
  863. enumerable: true,
  864. configurable: true
  865. });
  866. Object.defineProperty(MatChipList.prototype, "placeholder", {
  867. /**
  868. * Implemented as part of MatFormFieldControl.
  869. * @docs-private
  870. */
  871. get: /**
  872. * Implemented as part of MatFormFieldControl.
  873. * \@docs-private
  874. * @return {?}
  875. */
  876. function () {
  877. return this._chipInput ? this._chipInput.placeholder : this._placeholder;
  878. },
  879. set: /**
  880. * @param {?} value
  881. * @return {?}
  882. */
  883. function (value) {
  884. this._placeholder = value;
  885. this.stateChanges.next();
  886. },
  887. enumerable: true,
  888. configurable: true
  889. });
  890. Object.defineProperty(MatChipList.prototype, "focused", {
  891. /** Whether any chips or the matChipInput inside of this chip-list has focus. */
  892. get: /**
  893. * Whether any chips or the matChipInput inside of this chip-list has focus.
  894. * @return {?}
  895. */
  896. function () {
  897. return (this._chipInput && this._chipInput.focused) || this._hasFocusedChip();
  898. },
  899. enumerable: true,
  900. configurable: true
  901. });
  902. Object.defineProperty(MatChipList.prototype, "empty", {
  903. /**
  904. * Implemented as part of MatFormFieldControl.
  905. * @docs-private
  906. */
  907. get: /**
  908. * Implemented as part of MatFormFieldControl.
  909. * \@docs-private
  910. * @return {?}
  911. */
  912. function () {
  913. return (!this._chipInput || this._chipInput.empty) && this.chips.length === 0;
  914. },
  915. enumerable: true,
  916. configurable: true
  917. });
  918. Object.defineProperty(MatChipList.prototype, "shouldLabelFloat", {
  919. /**
  920. * Implemented as part of MatFormFieldControl.
  921. * @docs-private
  922. */
  923. get: /**
  924. * Implemented as part of MatFormFieldControl.
  925. * \@docs-private
  926. * @return {?}
  927. */
  928. function () { return !this.empty || this.focused; },
  929. enumerable: true,
  930. configurable: true
  931. });
  932. Object.defineProperty(MatChipList.prototype, "disabled", {
  933. /**
  934. * Implemented as part of MatFormFieldControl.
  935. * @docs-private
  936. */
  937. get: /**
  938. * Implemented as part of MatFormFieldControl.
  939. * \@docs-private
  940. * @return {?}
  941. */
  942. function () { return this.ngControl ? !!this.ngControl.disabled : this._disabled; },
  943. set: /**
  944. * @param {?} value
  945. * @return {?}
  946. */
  947. function (value) {
  948. this._disabled = coercion.coerceBooleanProperty(value);
  949. this._syncChipsState();
  950. },
  951. enumerable: true,
  952. configurable: true
  953. });
  954. Object.defineProperty(MatChipList.prototype, "selectable", {
  955. /**
  956. * Whether or not this chip list is selectable. When a chip list is not selectable,
  957. * the selected states for all the chips inside the chip list are always ignored.
  958. */
  959. get: /**
  960. * Whether or not this chip list is selectable. When a chip list is not selectable,
  961. * the selected states for all the chips inside the chip list are always ignored.
  962. * @return {?}
  963. */
  964. function () { return this._selectable; },
  965. set: /**
  966. * @param {?} value
  967. * @return {?}
  968. */
  969. function (value) {
  970. var _this = this;
  971. this._selectable = coercion.coerceBooleanProperty(value);
  972. if (this.chips) {
  973. this.chips.forEach((/**
  974. * @param {?} chip
  975. * @return {?}
  976. */
  977. function (chip) { return chip.chipListSelectable = _this._selectable; }));
  978. }
  979. },
  980. enumerable: true,
  981. configurable: true
  982. });
  983. Object.defineProperty(MatChipList.prototype, "tabIndex", {
  984. set: /**
  985. * @param {?} value
  986. * @return {?}
  987. */
  988. function (value) {
  989. this._userTabIndex = value;
  990. this._tabIndex = value;
  991. },
  992. enumerable: true,
  993. configurable: true
  994. });
  995. Object.defineProperty(MatChipList.prototype, "chipSelectionChanges", {
  996. /** Combined stream of all of the child chips' selection change events. */
  997. get: /**
  998. * Combined stream of all of the child chips' selection change events.
  999. * @return {?}
  1000. */
  1001. function () {
  1002. return rxjs.merge.apply(void 0, this.chips.map((/**
  1003. * @param {?} chip
  1004. * @return {?}
  1005. */
  1006. function (chip) { return chip.selectionChange; })));
  1007. },
  1008. enumerable: true,
  1009. configurable: true
  1010. });
  1011. Object.defineProperty(MatChipList.prototype, "chipFocusChanges", {
  1012. /** Combined stream of all of the child chips' focus change events. */
  1013. get: /**
  1014. * Combined stream of all of the child chips' focus change events.
  1015. * @return {?}
  1016. */
  1017. function () {
  1018. return rxjs.merge.apply(void 0, this.chips.map((/**
  1019. * @param {?} chip
  1020. * @return {?}
  1021. */
  1022. function (chip) { return chip._onFocus; })));
  1023. },
  1024. enumerable: true,
  1025. configurable: true
  1026. });
  1027. Object.defineProperty(MatChipList.prototype, "chipBlurChanges", {
  1028. /** Combined stream of all of the child chips' blur change events. */
  1029. get: /**
  1030. * Combined stream of all of the child chips' blur change events.
  1031. * @return {?}
  1032. */
  1033. function () {
  1034. return rxjs.merge.apply(void 0, this.chips.map((/**
  1035. * @param {?} chip
  1036. * @return {?}
  1037. */
  1038. function (chip) { return chip._onBlur; })));
  1039. },
  1040. enumerable: true,
  1041. configurable: true
  1042. });
  1043. Object.defineProperty(MatChipList.prototype, "chipRemoveChanges", {
  1044. /** Combined stream of all of the child chips' remove change events. */
  1045. get: /**
  1046. * Combined stream of all of the child chips' remove change events.
  1047. * @return {?}
  1048. */
  1049. function () {
  1050. return rxjs.merge.apply(void 0, this.chips.map((/**
  1051. * @param {?} chip
  1052. * @return {?}
  1053. */
  1054. function (chip) { return chip.destroyed; })));
  1055. },
  1056. enumerable: true,
  1057. configurable: true
  1058. });
  1059. /**
  1060. * @return {?}
  1061. */
  1062. MatChipList.prototype.ngAfterContentInit = /**
  1063. * @return {?}
  1064. */
  1065. function () {
  1066. var _this = this;
  1067. this._keyManager = new a11y.FocusKeyManager(this.chips)
  1068. .withWrap()
  1069. .withVerticalOrientation()
  1070. .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
  1071. if (this._dir) {
  1072. this._dir.change
  1073. .pipe(operators.takeUntil(this._destroyed))
  1074. .subscribe((/**
  1075. * @param {?} dir
  1076. * @return {?}
  1077. */
  1078. function (dir) { return _this._keyManager.withHorizontalOrientation(dir); }));
  1079. }
  1080. this._keyManager.tabOut.pipe(operators.takeUntil(this._destroyed)).subscribe((/**
  1081. * @return {?}
  1082. */
  1083. function () {
  1084. _this._allowFocusEscape();
  1085. }));
  1086. // When the list changes, re-subscribe
  1087. this.chips.changes.pipe(operators.startWith(null), operators.takeUntil(this._destroyed)).subscribe((/**
  1088. * @return {?}
  1089. */
  1090. function () {
  1091. if (_this.disabled) {
  1092. // Since this happens after the content has been
  1093. // checked, we need to defer it to the next tick.
  1094. Promise.resolve().then((/**
  1095. * @return {?}
  1096. */
  1097. function () {
  1098. _this._syncChipsState();
  1099. }));
  1100. }
  1101. _this._resetChips();
  1102. // Reset chips selected/deselected status
  1103. _this._initializeSelection();
  1104. // Check to see if we need to update our tab index
  1105. _this._updateTabIndex();
  1106. // Check to see if we have a destroyed chip and need to refocus
  1107. _this._updateFocusForDestroyedChips();
  1108. _this.stateChanges.next();
  1109. }));
  1110. };
  1111. /**
  1112. * @return {?}
  1113. */
  1114. MatChipList.prototype.ngOnInit = /**
  1115. * @return {?}
  1116. */
  1117. function () {
  1118. this._selectionModel = new collections.SelectionModel(this.multiple, undefined, false);
  1119. this.stateChanges.next();
  1120. };
  1121. /**
  1122. * @return {?}
  1123. */
  1124. MatChipList.prototype.ngDoCheck = /**
  1125. * @return {?}
  1126. */
  1127. function () {
  1128. if (this.ngControl) {
  1129. // We need to re-evaluate this on every change detection cycle, because there are some
  1130. // error triggers that we can't subscribe to (e.g. parent form submissions). This means
  1131. // that whatever logic is in here has to be super lean or we risk destroying the performance.
  1132. this.updateErrorState();
  1133. }
  1134. };
  1135. /**
  1136. * @return {?}
  1137. */
  1138. MatChipList.prototype.ngOnDestroy = /**
  1139. * @return {?}
  1140. */
  1141. function () {
  1142. this._destroyed.next();
  1143. this._destroyed.complete();
  1144. this.stateChanges.complete();
  1145. this._dropSubscriptions();
  1146. };
  1147. /** Associates an HTML input element with this chip list. */
  1148. /**
  1149. * Associates an HTML input element with this chip list.
  1150. * @param {?} inputElement
  1151. * @return {?}
  1152. */
  1153. MatChipList.prototype.registerInput = /**
  1154. * Associates an HTML input element with this chip list.
  1155. * @param {?} inputElement
  1156. * @return {?}
  1157. */
  1158. function (inputElement) {
  1159. this._chipInput = inputElement;
  1160. };
  1161. /**
  1162. * Implemented as part of MatFormFieldControl.
  1163. * @docs-private
  1164. */
  1165. /**
  1166. * Implemented as part of MatFormFieldControl.
  1167. * \@docs-private
  1168. * @param {?} ids
  1169. * @return {?}
  1170. */
  1171. MatChipList.prototype.setDescribedByIds = /**
  1172. * Implemented as part of MatFormFieldControl.
  1173. * \@docs-private
  1174. * @param {?} ids
  1175. * @return {?}
  1176. */
  1177. function (ids) { this._ariaDescribedby = ids.join(' '); };
  1178. // Implemented as part of ControlValueAccessor.
  1179. // Implemented as part of ControlValueAccessor.
  1180. /**
  1181. * @param {?} value
  1182. * @return {?}
  1183. */
  1184. MatChipList.prototype.writeValue =
  1185. // Implemented as part of ControlValueAccessor.
  1186. /**
  1187. * @param {?} value
  1188. * @return {?}
  1189. */
  1190. function (value) {
  1191. if (this.chips) {
  1192. this._setSelectionByValue(value, false);
  1193. }
  1194. };
  1195. // Implemented as part of ControlValueAccessor.
  1196. // Implemented as part of ControlValueAccessor.
  1197. /**
  1198. * @param {?} fn
  1199. * @return {?}
  1200. */
  1201. MatChipList.prototype.registerOnChange =
  1202. // Implemented as part of ControlValueAccessor.
  1203. /**
  1204. * @param {?} fn
  1205. * @return {?}
  1206. */
  1207. function (fn) {
  1208. this._onChange = fn;
  1209. };
  1210. // Implemented as part of ControlValueAccessor.
  1211. // Implemented as part of ControlValueAccessor.
  1212. /**
  1213. * @param {?} fn
  1214. * @return {?}
  1215. */
  1216. MatChipList.prototype.registerOnTouched =
  1217. // Implemented as part of ControlValueAccessor.
  1218. /**
  1219. * @param {?} fn
  1220. * @return {?}
  1221. */
  1222. function (fn) {
  1223. this._onTouched = fn;
  1224. };
  1225. // Implemented as part of ControlValueAccessor.
  1226. // Implemented as part of ControlValueAccessor.
  1227. /**
  1228. * @param {?} isDisabled
  1229. * @return {?}
  1230. */
  1231. MatChipList.prototype.setDisabledState =
  1232. // Implemented as part of ControlValueAccessor.
  1233. /**
  1234. * @param {?} isDisabled
  1235. * @return {?}
  1236. */
  1237. function (isDisabled) {
  1238. this.disabled = isDisabled;
  1239. this.stateChanges.next();
  1240. };
  1241. /**
  1242. * Implemented as part of MatFormFieldControl.
  1243. * @docs-private
  1244. */
  1245. /**
  1246. * Implemented as part of MatFormFieldControl.
  1247. * \@docs-private
  1248. * @param {?} event
  1249. * @return {?}
  1250. */
  1251. MatChipList.prototype.onContainerClick = /**
  1252. * Implemented as part of MatFormFieldControl.
  1253. * \@docs-private
  1254. * @param {?} event
  1255. * @return {?}
  1256. */
  1257. function (event) {
  1258. if (!this._originatesFromChip(event)) {
  1259. this.focus();
  1260. }
  1261. };
  1262. /**
  1263. * Focuses the first non-disabled chip in this chip list, or the associated input when there
  1264. * are no eligible chips.
  1265. */
  1266. /**
  1267. * Focuses the first non-disabled chip in this chip list, or the associated input when there
  1268. * are no eligible chips.
  1269. * @param {?=} options
  1270. * @return {?}
  1271. */
  1272. MatChipList.prototype.focus = /**
  1273. * Focuses the first non-disabled chip in this chip list, or the associated input when there
  1274. * are no eligible chips.
  1275. * @param {?=} options
  1276. * @return {?}
  1277. */
  1278. function (options) {
  1279. if (this.disabled) {
  1280. return;
  1281. }
  1282. // TODO: ARIA says this should focus the first `selected` chip if any are selected.
  1283. // Focus on first element if there's no chipInput inside chip-list
  1284. if (this._chipInput && this._chipInput.focused) {
  1285. // do nothing
  1286. }
  1287. else if (this.chips.length > 0) {
  1288. this._keyManager.setFirstItemActive();
  1289. this.stateChanges.next();
  1290. }
  1291. else {
  1292. this._focusInput(options);
  1293. this.stateChanges.next();
  1294. }
  1295. };
  1296. /** Attempt to focus an input if we have one. */
  1297. /**
  1298. * Attempt to focus an input if we have one.
  1299. * @param {?=} options
  1300. * @return {?}
  1301. */
  1302. MatChipList.prototype._focusInput = /**
  1303. * Attempt to focus an input if we have one.
  1304. * @param {?=} options
  1305. * @return {?}
  1306. */
  1307. function (options) {
  1308. if (this._chipInput) {
  1309. this._chipInput.focus(options);
  1310. }
  1311. };
  1312. /**
  1313. * Pass events to the keyboard manager. Available here for tests.
  1314. */
  1315. /**
  1316. * Pass events to the keyboard manager. Available here for tests.
  1317. * @param {?} event
  1318. * @return {?}
  1319. */
  1320. MatChipList.prototype._keydown = /**
  1321. * Pass events to the keyboard manager. Available here for tests.
  1322. * @param {?} event
  1323. * @return {?}
  1324. */
  1325. function (event) {
  1326. /** @type {?} */
  1327. var target = (/** @type {?} */ (event.target));
  1328. // If they are on an empty input and hit backspace, focus the last chip
  1329. if (event.keyCode === keycodes.BACKSPACE && this._isInputEmpty(target)) {
  1330. this._keyManager.setLastItemActive();
  1331. event.preventDefault();
  1332. }
  1333. else if (target && target.classList.contains('mat-chip')) {
  1334. if (event.keyCode === keycodes.HOME) {
  1335. this._keyManager.setFirstItemActive();
  1336. event.preventDefault();
  1337. }
  1338. else if (event.keyCode === keycodes.END) {
  1339. this._keyManager.setLastItemActive();
  1340. event.preventDefault();
  1341. }
  1342. else {
  1343. this._keyManager.onKeydown(event);
  1344. }
  1345. this.stateChanges.next();
  1346. }
  1347. };
  1348. /**
  1349. * Check the tab index as you should not be allowed to focus an empty list.
  1350. */
  1351. /**
  1352. * Check the tab index as you should not be allowed to focus an empty list.
  1353. * @protected
  1354. * @return {?}
  1355. */
  1356. MatChipList.prototype._updateTabIndex = /**
  1357. * Check the tab index as you should not be allowed to focus an empty list.
  1358. * @protected
  1359. * @return {?}
  1360. */
  1361. function () {
  1362. // If we have 0 chips, we should not allow keyboard focus
  1363. this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0);
  1364. };
  1365. /**
  1366. * If the amount of chips changed, we need to update the
  1367. * key manager state and focus the next closest chip.
  1368. */
  1369. /**
  1370. * If the amount of chips changed, we need to update the
  1371. * key manager state and focus the next closest chip.
  1372. * @protected
  1373. * @return {?}
  1374. */
  1375. MatChipList.prototype._updateFocusForDestroyedChips = /**
  1376. * If the amount of chips changed, we need to update the
  1377. * key manager state and focus the next closest chip.
  1378. * @protected
  1379. * @return {?}
  1380. */
  1381. function () {
  1382. // Move focus to the closest chip. If no other chips remain, focus the chip-list itself.
  1383. if (this._lastDestroyedChipIndex != null) {
  1384. if (this.chips.length) {
  1385. /** @type {?} */
  1386. var newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
  1387. this._keyManager.setActiveItem(newChipIndex);
  1388. }
  1389. else {
  1390. this.focus();
  1391. }
  1392. }
  1393. this._lastDestroyedChipIndex = null;
  1394. };
  1395. /**
  1396. * Utility to ensure all indexes are valid.
  1397. *
  1398. * @param index The index to be checked.
  1399. * @returns True if the index is valid for our list of chips.
  1400. */
  1401. /**
  1402. * Utility to ensure all indexes are valid.
  1403. *
  1404. * @private
  1405. * @param {?} index The index to be checked.
  1406. * @return {?} True if the index is valid for our list of chips.
  1407. */
  1408. MatChipList.prototype._isValidIndex = /**
  1409. * Utility to ensure all indexes are valid.
  1410. *
  1411. * @private
  1412. * @param {?} index The index to be checked.
  1413. * @return {?} True if the index is valid for our list of chips.
  1414. */
  1415. function (index) {
  1416. return index >= 0 && index < this.chips.length;
  1417. };
  1418. /**
  1419. * @private
  1420. * @param {?} element
  1421. * @return {?}
  1422. */
  1423. MatChipList.prototype._isInputEmpty = /**
  1424. * @private
  1425. * @param {?} element
  1426. * @return {?}
  1427. */
  1428. function (element) {
  1429. if (element && element.nodeName.toLowerCase() === 'input') {
  1430. /** @type {?} */
  1431. var input = (/** @type {?} */ (element));
  1432. return !input.value;
  1433. }
  1434. return false;
  1435. };
  1436. /**
  1437. * @param {?} value
  1438. * @param {?=} isUserInput
  1439. * @return {?}
  1440. */
  1441. MatChipList.prototype._setSelectionByValue = /**
  1442. * @param {?} value
  1443. * @param {?=} isUserInput
  1444. * @return {?}
  1445. */
  1446. function (value, isUserInput) {
  1447. var _this = this;
  1448. if (isUserInput === void 0) { isUserInput = true; }
  1449. this._clearSelection();
  1450. this.chips.forEach((/**
  1451. * @param {?} chip
  1452. * @return {?}
  1453. */
  1454. function (chip) { return chip.deselect(); }));
  1455. if (Array.isArray(value)) {
  1456. value.forEach((/**
  1457. * @param {?} currentValue
  1458. * @return {?}
  1459. */
  1460. function (currentValue) { return _this._selectValue(currentValue, isUserInput); }));
  1461. this._sortValues();
  1462. }
  1463. else {
  1464. /** @type {?} */
  1465. var correspondingChip = this._selectValue(value, isUserInput);
  1466. // Shift focus to the active item. Note that we shouldn't do this in multiple
  1467. // mode, because we don't know what chip the user interacted with last.
  1468. if (correspondingChip) {
  1469. if (isUserInput) {
  1470. this._keyManager.setActiveItem(correspondingChip);
  1471. }
  1472. }
  1473. }
  1474. };
  1475. /**
  1476. * Finds and selects the chip based on its value.
  1477. * @returns Chip that has the corresponding value.
  1478. */
  1479. /**
  1480. * Finds and selects the chip based on its value.
  1481. * @private
  1482. * @param {?} value
  1483. * @param {?=} isUserInput
  1484. * @return {?} Chip that has the corresponding value.
  1485. */
  1486. MatChipList.prototype._selectValue = /**
  1487. * Finds and selects the chip based on its value.
  1488. * @private
  1489. * @param {?} value
  1490. * @param {?=} isUserInput
  1491. * @return {?} Chip that has the corresponding value.
  1492. */
  1493. function (value, isUserInput) {
  1494. var _this = this;
  1495. if (isUserInput === void 0) { isUserInput = true; }
  1496. /** @type {?} */
  1497. var correspondingChip = this.chips.find((/**
  1498. * @param {?} chip
  1499. * @return {?}
  1500. */
  1501. function (chip) {
  1502. return chip.value != null && _this._compareWith(chip.value, value);
  1503. }));
  1504. if (correspondingChip) {
  1505. isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();
  1506. this._selectionModel.select(correspondingChip);
  1507. }
  1508. return correspondingChip;
  1509. };
  1510. /**
  1511. * @private
  1512. * @return {?}
  1513. */
  1514. MatChipList.prototype._initializeSelection = /**
  1515. * @private
  1516. * @return {?}
  1517. */
  1518. function () {
  1519. var _this = this;
  1520. // Defer setting the value in order to avoid the "Expression
  1521. // has changed after it was checked" errors from Angular.
  1522. Promise.resolve().then((/**
  1523. * @return {?}
  1524. */
  1525. function () {
  1526. if (_this.ngControl || _this._value) {
  1527. _this._setSelectionByValue(_this.ngControl ? _this.ngControl.value : _this._value, false);
  1528. _this.stateChanges.next();
  1529. }
  1530. }));
  1531. };
  1532. /**
  1533. * Deselects every chip in the list.
  1534. * @param skip Chip that should not be deselected.
  1535. */
  1536. /**
  1537. * Deselects every chip in the list.
  1538. * @private
  1539. * @param {?=} skip Chip that should not be deselected.
  1540. * @return {?}
  1541. */
  1542. MatChipList.prototype._clearSelection = /**
  1543. * Deselects every chip in the list.
  1544. * @private
  1545. * @param {?=} skip Chip that should not be deselected.
  1546. * @return {?}
  1547. */
  1548. function (skip) {
  1549. this._selectionModel.clear();
  1550. this.chips.forEach((/**
  1551. * @param {?} chip
  1552. * @return {?}
  1553. */
  1554. function (chip) {
  1555. if (chip !== skip) {
  1556. chip.deselect();
  1557. }
  1558. }));
  1559. this.stateChanges.next();
  1560. };
  1561. /**
  1562. * Sorts the model values, ensuring that they keep the same
  1563. * order that they have in the panel.
  1564. */
  1565. /**
  1566. * Sorts the model values, ensuring that they keep the same
  1567. * order that they have in the panel.
  1568. * @private
  1569. * @return {?}
  1570. */
  1571. MatChipList.prototype._sortValues = /**
  1572. * Sorts the model values, ensuring that they keep the same
  1573. * order that they have in the panel.
  1574. * @private
  1575. * @return {?}
  1576. */
  1577. function () {
  1578. var _this = this;
  1579. if (this._multiple) {
  1580. this._selectionModel.clear();
  1581. this.chips.forEach((/**
  1582. * @param {?} chip
  1583. * @return {?}
  1584. */
  1585. function (chip) {
  1586. if (chip.selected) {
  1587. _this._selectionModel.select(chip);
  1588. }
  1589. }));
  1590. this.stateChanges.next();
  1591. }
  1592. };
  1593. /** Emits change event to set the model value. */
  1594. /**
  1595. * Emits change event to set the model value.
  1596. * @private
  1597. * @param {?=} fallbackValue
  1598. * @return {?}
  1599. */
  1600. MatChipList.prototype._propagateChanges = /**
  1601. * Emits change event to set the model value.
  1602. * @private
  1603. * @param {?=} fallbackValue
  1604. * @return {?}
  1605. */
  1606. function (fallbackValue) {
  1607. /** @type {?} */
  1608. var valueToEmit = null;
  1609. if (Array.isArray(this.selected)) {
  1610. valueToEmit = this.selected.map((/**
  1611. * @param {?} chip
  1612. * @return {?}
  1613. */
  1614. function (chip) { return chip.value; }));
  1615. }
  1616. else {
  1617. valueToEmit = this.selected ? this.selected.value : fallbackValue;
  1618. }
  1619. this._value = valueToEmit;
  1620. this.change.emit(new MatChipListChange(this, valueToEmit));
  1621. this.valueChange.emit(valueToEmit);
  1622. this._onChange(valueToEmit);
  1623. this._changeDetectorRef.markForCheck();
  1624. };
  1625. /** When blurred, mark the field as touched when focus moved outside the chip list. */
  1626. /**
  1627. * When blurred, mark the field as touched when focus moved outside the chip list.
  1628. * @return {?}
  1629. */
  1630. MatChipList.prototype._blur = /**
  1631. * When blurred, mark the field as touched when focus moved outside the chip list.
  1632. * @return {?}
  1633. */
  1634. function () {
  1635. var _this = this;
  1636. if (!this._hasFocusedChip()) {
  1637. this._keyManager.setActiveItem(-1);
  1638. }
  1639. if (!this.disabled) {
  1640. if (this._chipInput) {
  1641. // If there's a chip input, we should check whether the focus moved to chip input.
  1642. // If the focus is not moved to chip input, mark the field as touched. If the focus moved
  1643. // to chip input, do nothing.
  1644. // Timeout is needed to wait for the focus() event trigger on chip input.
  1645. setTimeout((/**
  1646. * @return {?}
  1647. */
  1648. function () {
  1649. if (!_this.focused) {
  1650. _this._markAsTouched();
  1651. }
  1652. }));
  1653. }
  1654. else {
  1655. // If there's no chip input, then mark the field as touched.
  1656. this._markAsTouched();
  1657. }
  1658. }
  1659. };
  1660. /** Mark the field as touched */
  1661. /**
  1662. * Mark the field as touched
  1663. * @return {?}
  1664. */
  1665. MatChipList.prototype._markAsTouched = /**
  1666. * Mark the field as touched
  1667. * @return {?}
  1668. */
  1669. function () {
  1670. this._onTouched();
  1671. this._changeDetectorRef.markForCheck();
  1672. this.stateChanges.next();
  1673. };
  1674. /**
  1675. * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
  1676. * user to tab out of it. This prevents the list from capturing focus and redirecting
  1677. * it back to the first chip, creating a focus trap, if it user tries to tab away.
  1678. */
  1679. /**
  1680. * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
  1681. * user to tab out of it. This prevents the list from capturing focus and redirecting
  1682. * it back to the first chip, creating a focus trap, if it user tries to tab away.
  1683. * @return {?}
  1684. */
  1685. MatChipList.prototype._allowFocusEscape = /**
  1686. * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
  1687. * user to tab out of it. This prevents the list from capturing focus and redirecting
  1688. * it back to the first chip, creating a focus trap, if it user tries to tab away.
  1689. * @return {?}
  1690. */
  1691. function () {
  1692. var _this = this;
  1693. if (this._tabIndex !== -1) {
  1694. this._tabIndex = -1;
  1695. setTimeout((/**
  1696. * @return {?}
  1697. */
  1698. function () {
  1699. _this._tabIndex = _this._userTabIndex || 0;
  1700. _this._changeDetectorRef.markForCheck();
  1701. }));
  1702. }
  1703. };
  1704. /**
  1705. * @private
  1706. * @return {?}
  1707. */
  1708. MatChipList.prototype._resetChips = /**
  1709. * @private
  1710. * @return {?}
  1711. */
  1712. function () {
  1713. this._dropSubscriptions();
  1714. this._listenToChipsFocus();
  1715. this._listenToChipsSelection();
  1716. this._listenToChipsRemoved();
  1717. };
  1718. /**
  1719. * @private
  1720. * @return {?}
  1721. */
  1722. MatChipList.prototype._dropSubscriptions = /**
  1723. * @private
  1724. * @return {?}
  1725. */
  1726. function () {
  1727. if (this._chipFocusSubscription) {
  1728. this._chipFocusSubscription.unsubscribe();
  1729. this._chipFocusSubscription = null;
  1730. }
  1731. if (this._chipBlurSubscription) {
  1732. this._chipBlurSubscription.unsubscribe();
  1733. this._chipBlurSubscription = null;
  1734. }
  1735. if (this._chipSelectionSubscription) {
  1736. this._chipSelectionSubscription.unsubscribe();
  1737. this._chipSelectionSubscription = null;
  1738. }
  1739. if (this._chipRemoveSubscription) {
  1740. this._chipRemoveSubscription.unsubscribe();
  1741. this._chipRemoveSubscription = null;
  1742. }
  1743. };
  1744. /** Listens to user-generated selection events on each chip. */
  1745. /**
  1746. * Listens to user-generated selection events on each chip.
  1747. * @private
  1748. * @return {?}
  1749. */
  1750. MatChipList.prototype._listenToChipsSelection = /**
  1751. * Listens to user-generated selection events on each chip.
  1752. * @private
  1753. * @return {?}
  1754. */
  1755. function () {
  1756. var _this = this;
  1757. this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((/**
  1758. * @param {?} event
  1759. * @return {?}
  1760. */
  1761. function (event) {
  1762. event.source.selected
  1763. ? _this._selectionModel.select(event.source)
  1764. : _this._selectionModel.deselect(event.source);
  1765. // For single selection chip list, make sure the deselected value is unselected.
  1766. if (!_this.multiple) {
  1767. _this.chips.forEach((/**
  1768. * @param {?} chip
  1769. * @return {?}
  1770. */
  1771. function (chip) {
  1772. if (!_this._selectionModel.isSelected(chip) && chip.selected) {
  1773. chip.deselect();
  1774. }
  1775. }));
  1776. }
  1777. if (event.isUserInput) {
  1778. _this._propagateChanges();
  1779. }
  1780. }));
  1781. };
  1782. /** Listens to user-generated selection events on each chip. */
  1783. /**
  1784. * Listens to user-generated selection events on each chip.
  1785. * @private
  1786. * @return {?}
  1787. */
  1788. MatChipList.prototype._listenToChipsFocus = /**
  1789. * Listens to user-generated selection events on each chip.
  1790. * @private
  1791. * @return {?}
  1792. */
  1793. function () {
  1794. var _this = this;
  1795. this._chipFocusSubscription = this.chipFocusChanges.subscribe((/**
  1796. * @param {?} event
  1797. * @return {?}
  1798. */
  1799. function (event) {
  1800. /** @type {?} */
  1801. var chipIndex = _this.chips.toArray().indexOf(event.chip);
  1802. if (_this._isValidIndex(chipIndex)) {
  1803. _this._keyManager.updateActiveItemIndex(chipIndex);
  1804. }
  1805. _this.stateChanges.next();
  1806. }));
  1807. this._chipBlurSubscription = this.chipBlurChanges.subscribe((/**
  1808. * @return {?}
  1809. */
  1810. function () {
  1811. _this._blur();
  1812. _this.stateChanges.next();
  1813. }));
  1814. };
  1815. /**
  1816. * @private
  1817. * @return {?}
  1818. */
  1819. MatChipList.prototype._listenToChipsRemoved = /**
  1820. * @private
  1821. * @return {?}
  1822. */
  1823. function () {
  1824. var _this = this;
  1825. this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((/**
  1826. * @param {?} event
  1827. * @return {?}
  1828. */
  1829. function (event) {
  1830. /** @type {?} */
  1831. var chip = event.chip;
  1832. /** @type {?} */
  1833. var chipIndex = _this.chips.toArray().indexOf(event.chip);
  1834. // In case the chip that will be removed is currently focused, we temporarily store
  1835. // the index in order to be able to determine an appropriate sibling chip that will
  1836. // receive focus.
  1837. if (_this._isValidIndex(chipIndex) && chip._hasFocus) {
  1838. _this._lastDestroyedChipIndex = chipIndex;
  1839. }
  1840. }));
  1841. };
  1842. /** Checks whether an event comes from inside a chip element. */
  1843. /**
  1844. * Checks whether an event comes from inside a chip element.
  1845. * @private
  1846. * @param {?} event
  1847. * @return {?}
  1848. */
  1849. MatChipList.prototype._originatesFromChip = /**
  1850. * Checks whether an event comes from inside a chip element.
  1851. * @private
  1852. * @param {?} event
  1853. * @return {?}
  1854. */
  1855. function (event) {
  1856. /** @type {?} */
  1857. var currentElement = (/** @type {?} */ (event.target));
  1858. while (currentElement && currentElement !== this._elementRef.nativeElement) {
  1859. if (currentElement.classList.contains('mat-chip')) {
  1860. return true;
  1861. }
  1862. currentElement = currentElement.parentElement;
  1863. }
  1864. return false;
  1865. };
  1866. /** Checks whether any of the chips is focused. */
  1867. /**
  1868. * Checks whether any of the chips is focused.
  1869. * @private
  1870. * @return {?}
  1871. */
  1872. MatChipList.prototype._hasFocusedChip = /**
  1873. * Checks whether any of the chips is focused.
  1874. * @private
  1875. * @return {?}
  1876. */
  1877. function () {
  1878. return this.chips.some((/**
  1879. * @param {?} chip
  1880. * @return {?}
  1881. */
  1882. function (chip) { return chip._hasFocus; }));
  1883. };
  1884. /** Syncs the list's state with the individual chips. */
  1885. /**
  1886. * Syncs the list's state with the individual chips.
  1887. * @private
  1888. * @return {?}
  1889. */
  1890. MatChipList.prototype._syncChipsState = /**
  1891. * Syncs the list's state with the individual chips.
  1892. * @private
  1893. * @return {?}
  1894. */
  1895. function () {
  1896. var _this = this;
  1897. if (this.chips) {
  1898. this.chips.forEach((/**
  1899. * @param {?} chip
  1900. * @return {?}
  1901. */
  1902. function (chip) {
  1903. chip.disabled = _this._disabled;
  1904. chip._chipListMultiple = _this.multiple;
  1905. }));
  1906. }
  1907. };
  1908. MatChipList.decorators = [
  1909. { type: core.Component, args: [{selector: 'mat-chip-list',
  1910. template: "<div class=\"mat-chip-list-wrapper\"><ng-content></ng-content></div>",
  1911. exportAs: 'matChipList',
  1912. host: {
  1913. '[attr.tabindex]': 'disabled ? null : _tabIndex',
  1914. '[attr.aria-describedby]': '_ariaDescribedby || null',
  1915. '[attr.aria-required]': 'required.toString()',
  1916. '[attr.aria-disabled]': 'disabled.toString()',
  1917. '[attr.aria-invalid]': 'errorState',
  1918. '[attr.aria-multiselectable]': 'multiple',
  1919. '[attr.role]': 'role',
  1920. '[class.mat-chip-list-disabled]': 'disabled',
  1921. '[class.mat-chip-list-invalid]': 'errorState',
  1922. '[class.mat-chip-list-required]': 'required',
  1923. '[attr.aria-orientation]': 'ariaOrientation',
  1924. 'class': 'mat-chip-list',
  1925. '(focus)': 'focus()',
  1926. '(blur)': '_blur()',
  1927. '(keydown)': '_keydown($event)',
  1928. '[id]': '_uid',
  1929. },
  1930. providers: [{ provide: formField.MatFormFieldControl, useExisting: MatChipList }],
  1931. styles: [".mat-chip{position:relative;overflow:hidden;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}.mat-standard-chip{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:inline-flex;padding:7px 12px;border-radius:16px;align-items:center;cursor:default;min-height:32px;height:1px}._mat-animation-noopable.mat-standard-chip{transition:none;animation:none}.mat-standard-chip .mat-chip-remove.mat-icon{width:18px;height:18px}.mat-standard-chip::after{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit;opacity:0;content:'';pointer-events:none;transition:opacity .2s cubic-bezier(.35,0,.25,1)}.mat-standard-chip:hover::after{opacity:.12}.mat-standard-chip:focus{outline:0}.mat-standard-chip:focus::after{opacity:.16}@media (-ms-high-contrast:active){.mat-standard-chip{outline:solid 1px}.mat-standard-chip:focus{outline:dotted 2px}}.mat-standard-chip.mat-chip-disabled::after{opacity:0}.mat-standard-chip.mat-chip-disabled .mat-chip-remove,.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon{cursor:default}.mat-standard-chip.mat-chip-with-avatar,.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-top:0;padding-bottom:0}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-right:8px;padding-left:0}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-left:8px;padding-right:0}.mat-standard-chip.mat-chip-with-trailing-icon{padding-top:7px;padding-bottom:7px;padding-right:8px;padding-left:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon{padding-left:8px;padding-right:12px}.mat-standard-chip.mat-chip-with-avatar{padding-left:0;padding-right:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-avatar{padding-right:0;padding-left:12px}.mat-standard-chip .mat-chip-avatar{width:24px;height:24px;margin-right:8px;margin-left:4px}[dir=rtl] .mat-standard-chip .mat-chip-avatar{margin-left:8px;margin-right:4px}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{margin-left:8px;margin-right:0}[dir=rtl] .mat-standard-chip .mat-chip-remove,[dir=rtl] .mat-standard-chip .mat-chip-trailing-icon{margin-right:8px;margin-left:0}.mat-chip-list-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin:-4px}.mat-chip-list-wrapper .mat-standard-chip,.mat-chip-list-wrapper input.mat-input-element{margin:4px}.mat-chip-list-stacked .mat-chip-list-wrapper{flex-direction:column;align-items:flex-start}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip{width:100%}.mat-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover}input.mat-chip-input{width:150px;margin:4px;flex:1 0 150px}"],
  1932. encapsulation: core.ViewEncapsulation.None,
  1933. changeDetection: core.ChangeDetectionStrategy.OnPush
  1934. },] },
  1935. ];
  1936. /** @nocollapse */
  1937. MatChipList.ctorParameters = function () { return [
  1938. { type: core.ElementRef },
  1939. { type: core.ChangeDetectorRef },
  1940. { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
  1941. { type: forms.NgForm, decorators: [{ type: core.Optional }] },
  1942. { type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
  1943. { type: core$1.ErrorStateMatcher },
  1944. { type: forms.NgControl, decorators: [{ type: core.Optional }, { type: core.Self }] }
  1945. ]; };
  1946. MatChipList.propDecorators = {
  1947. errorStateMatcher: [{ type: core.Input }],
  1948. multiple: [{ type: core.Input }],
  1949. compareWith: [{ type: core.Input }],
  1950. value: [{ type: core.Input }],
  1951. required: [{ type: core.Input }],
  1952. placeholder: [{ type: core.Input }],
  1953. disabled: [{ type: core.Input }],
  1954. ariaOrientation: [{ type: core.Input, args: ['aria-orientation',] }],
  1955. selectable: [{ type: core.Input }],
  1956. tabIndex: [{ type: core.Input }],
  1957. change: [{ type: core.Output }],
  1958. valueChange: [{ type: core.Output }],
  1959. chips: [{ type: core.ContentChildren, args: [MatChip, {
  1960. // We need to use `descendants: true`, because Ivy will no longer match
  1961. // indirect descendants if it's left as false.
  1962. descendants: true
  1963. },] }]
  1964. };
  1965. return MatChipList;
  1966. }(_MatChipListMixinBase));
  1967. /**
  1968. * @fileoverview added by tsickle
  1969. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1970. */
  1971. // Increasing integer for generating unique ids.
  1972. /** @type {?} */
  1973. var nextUniqueId$1 = 0;
  1974. /**
  1975. * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.
  1976. * May be placed inside or outside of an `<mat-chip-list>`.
  1977. */
  1978. var MatChipInput = /** @class */ (function () {
  1979. function MatChipInput(_elementRef, _defaultOptions) {
  1980. this._elementRef = _elementRef;
  1981. this._defaultOptions = _defaultOptions;
  1982. /**
  1983. * Whether the control is focused.
  1984. */
  1985. this.focused = false;
  1986. this._addOnBlur = false;
  1987. /**
  1988. * The list of key codes that will trigger a chipEnd event.
  1989. *
  1990. * Defaults to `[ENTER]`.
  1991. */
  1992. this.separatorKeyCodes = this._defaultOptions.separatorKeyCodes;
  1993. /**
  1994. * Emitted when a chip is to be added.
  1995. */
  1996. this.chipEnd = new core.EventEmitter();
  1997. /**
  1998. * The input's placeholder text.
  1999. */
  2000. this.placeholder = '';
  2001. /**
  2002. * Unique id for the input.
  2003. */
  2004. this.id = "mat-chip-list-input-" + nextUniqueId$1++;
  2005. this._disabled = false;
  2006. this._inputElement = (/** @type {?} */ (this._elementRef.nativeElement));
  2007. }
  2008. Object.defineProperty(MatChipInput.prototype, "chipList", {
  2009. /** Register input for chip list */
  2010. set: /**
  2011. * Register input for chip list
  2012. * @param {?} value
  2013. * @return {?}
  2014. */
  2015. function (value) {
  2016. if (value) {
  2017. this._chipList = value;
  2018. this._chipList.registerInput(this);
  2019. }
  2020. },
  2021. enumerable: true,
  2022. configurable: true
  2023. });
  2024. Object.defineProperty(MatChipInput.prototype, "addOnBlur", {
  2025. /**
  2026. * Whether or not the chipEnd event will be emitted when the input is blurred.
  2027. */
  2028. get: /**
  2029. * Whether or not the chipEnd event will be emitted when the input is blurred.
  2030. * @return {?}
  2031. */
  2032. function () { return this._addOnBlur; },
  2033. set: /**
  2034. * @param {?} value
  2035. * @return {?}
  2036. */
  2037. function (value) { this._addOnBlur = coercion.coerceBooleanProperty(value); },
  2038. enumerable: true,
  2039. configurable: true
  2040. });
  2041. Object.defineProperty(MatChipInput.prototype, "disabled", {
  2042. /** Whether the input is disabled. */
  2043. get: /**
  2044. * Whether the input is disabled.
  2045. * @return {?}
  2046. */
  2047. function () { return this._disabled || (this._chipList && this._chipList.disabled); },
  2048. set: /**
  2049. * @param {?} value
  2050. * @return {?}
  2051. */
  2052. function (value) { this._disabled = coercion.coerceBooleanProperty(value); },
  2053. enumerable: true,
  2054. configurable: true
  2055. });
  2056. Object.defineProperty(MatChipInput.prototype, "empty", {
  2057. /** Whether the input is empty. */
  2058. get: /**
  2059. * Whether the input is empty.
  2060. * @return {?}
  2061. */
  2062. function () { return !this._inputElement.value; },
  2063. enumerable: true,
  2064. configurable: true
  2065. });
  2066. /**
  2067. * @return {?}
  2068. */
  2069. MatChipInput.prototype.ngOnChanges = /**
  2070. * @return {?}
  2071. */
  2072. function () {
  2073. this._chipList.stateChanges.next();
  2074. };
  2075. /** Utility method to make host definition/tests more clear. */
  2076. /**
  2077. * Utility method to make host definition/tests more clear.
  2078. * @param {?=} event
  2079. * @return {?}
  2080. */
  2081. MatChipInput.prototype._keydown = /**
  2082. * Utility method to make host definition/tests more clear.
  2083. * @param {?=} event
  2084. * @return {?}
  2085. */
  2086. function (event) {
  2087. // Allow the user's focus to escape when they're tabbing forward. Note that we don't
  2088. // want to do this when going backwards, because focus should go back to the first chip.
  2089. if (event && event.keyCode === keycodes.TAB && !keycodes.hasModifierKey(event, 'shiftKey')) {
  2090. this._chipList._allowFocusEscape();
  2091. }
  2092. this._emitChipEnd(event);
  2093. };
  2094. /** Checks to see if the blur should emit the (chipEnd) event. */
  2095. /**
  2096. * Checks to see if the blur should emit the (chipEnd) event.
  2097. * @return {?}
  2098. */
  2099. MatChipInput.prototype._blur = /**
  2100. * Checks to see if the blur should emit the (chipEnd) event.
  2101. * @return {?}
  2102. */
  2103. function () {
  2104. if (this.addOnBlur) {
  2105. this._emitChipEnd();
  2106. }
  2107. this.focused = false;
  2108. // Blur the chip list if it is not focused
  2109. if (!this._chipList.focused) {
  2110. this._chipList._blur();
  2111. }
  2112. this._chipList.stateChanges.next();
  2113. };
  2114. /**
  2115. * @return {?}
  2116. */
  2117. MatChipInput.prototype._focus = /**
  2118. * @return {?}
  2119. */
  2120. function () {
  2121. this.focused = true;
  2122. this._chipList.stateChanges.next();
  2123. };
  2124. /** Checks to see if the (chipEnd) event needs to be emitted. */
  2125. /**
  2126. * Checks to see if the (chipEnd) event needs to be emitted.
  2127. * @param {?=} event
  2128. * @return {?}
  2129. */
  2130. MatChipInput.prototype._emitChipEnd = /**
  2131. * Checks to see if the (chipEnd) event needs to be emitted.
  2132. * @param {?=} event
  2133. * @return {?}
  2134. */
  2135. function (event) {
  2136. if (!this._inputElement.value && !!event) {
  2137. this._chipList._keydown(event);
  2138. }
  2139. if (!event || this._isSeparatorKey(event)) {
  2140. this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });
  2141. if (event) {
  2142. event.preventDefault();
  2143. }
  2144. }
  2145. };
  2146. /**
  2147. * @return {?}
  2148. */
  2149. MatChipInput.prototype._onInput = /**
  2150. * @return {?}
  2151. */
  2152. function () {
  2153. // Let chip list know whenever the value changes.
  2154. this._chipList.stateChanges.next();
  2155. };
  2156. /** Focuses the input. */
  2157. /**
  2158. * Focuses the input.
  2159. * @param {?=} options
  2160. * @return {?}
  2161. */
  2162. MatChipInput.prototype.focus = /**
  2163. * Focuses the input.
  2164. * @param {?=} options
  2165. * @return {?}
  2166. */
  2167. function (options) {
  2168. this._inputElement.focus(options);
  2169. };
  2170. /** Checks whether a keycode is one of the configured separators. */
  2171. /**
  2172. * Checks whether a keycode is one of the configured separators.
  2173. * @private
  2174. * @param {?} event
  2175. * @return {?}
  2176. */
  2177. MatChipInput.prototype._isSeparatorKey = /**
  2178. * Checks whether a keycode is one of the configured separators.
  2179. * @private
  2180. * @param {?} event
  2181. * @return {?}
  2182. */
  2183. function (event) {
  2184. if (keycodes.hasModifierKey(event)) {
  2185. return false;
  2186. }
  2187. /** @type {?} */
  2188. var separators = this.separatorKeyCodes;
  2189. /** @type {?} */
  2190. var keyCode = event.keyCode;
  2191. return Array.isArray(separators) ? separators.indexOf(keyCode) > -1 : separators.has(keyCode);
  2192. };
  2193. MatChipInput.decorators = [
  2194. { type: core.Directive, args: [{
  2195. selector: 'input[matChipInputFor]',
  2196. exportAs: 'matChipInput, matChipInputFor',
  2197. host: {
  2198. 'class': 'mat-chip-input mat-input-element',
  2199. '(keydown)': '_keydown($event)',
  2200. '(blur)': '_blur()',
  2201. '(focus)': '_focus()',
  2202. '(input)': '_onInput()',
  2203. '[id]': 'id',
  2204. '[attr.disabled]': 'disabled || null',
  2205. '[attr.placeholder]': 'placeholder || null',
  2206. '[attr.aria-invalid]': '_chipList && _chipList.ngControl ? _chipList.ngControl.invalid : null',
  2207. }
  2208. },] },
  2209. ];
  2210. /** @nocollapse */
  2211. MatChipInput.ctorParameters = function () { return [
  2212. { type: core.ElementRef },
  2213. { type: undefined, decorators: [{ type: core.Inject, args: [MAT_CHIPS_DEFAULT_OPTIONS,] }] }
  2214. ]; };
  2215. MatChipInput.propDecorators = {
  2216. chipList: [{ type: core.Input, args: ['matChipInputFor',] }],
  2217. addOnBlur: [{ type: core.Input, args: ['matChipInputAddOnBlur',] }],
  2218. separatorKeyCodes: [{ type: core.Input, args: ['matChipInputSeparatorKeyCodes',] }],
  2219. chipEnd: [{ type: core.Output, args: ['matChipInputTokenEnd',] }],
  2220. placeholder: [{ type: core.Input }],
  2221. id: [{ type: core.Input }],
  2222. disabled: [{ type: core.Input }]
  2223. };
  2224. return MatChipInput;
  2225. }());
  2226. /**
  2227. * @fileoverview added by tsickle
  2228. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  2229. */
  2230. /** @type {?} */
  2231. var CHIP_DECLARATIONS = [
  2232. MatChipList,
  2233. MatChip,
  2234. MatChipInput,
  2235. MatChipRemove,
  2236. MatChipAvatar,
  2237. MatChipTrailingIcon,
  2238. ];
  2239. var ɵ0 = ({
  2240. separatorKeyCodes: [keycodes.ENTER]
  2241. });
  2242. var MatChipsModule = /** @class */ (function () {
  2243. function MatChipsModule() {
  2244. }
  2245. MatChipsModule.decorators = [
  2246. { type: core.NgModule, args: [{
  2247. exports: CHIP_DECLARATIONS,
  2248. declarations: CHIP_DECLARATIONS,
  2249. providers: [
  2250. core$1.ErrorStateMatcher,
  2251. {
  2252. provide: MAT_CHIPS_DEFAULT_OPTIONS,
  2253. useValue: (/** @type {?} */ (ɵ0))
  2254. }
  2255. ]
  2256. },] },
  2257. ];
  2258. return MatChipsModule;
  2259. }());
  2260. exports.MatChipsModule = MatChipsModule;
  2261. exports.MatChipListChange = MatChipListChange;
  2262. exports.MatChipList = MatChipList;
  2263. exports.MatChipSelectionChange = MatChipSelectionChange;
  2264. exports.MatChipAvatar = MatChipAvatar;
  2265. exports.MatChipTrailingIcon = MatChipTrailingIcon;
  2266. exports.MatChip = MatChip;
  2267. exports.MatChipRemove = MatChipRemove;
  2268. exports.MatChipInput = MatChipInput;
  2269. exports.MAT_CHIPS_DEFAULT_OPTIONS = MAT_CHIPS_DEFAULT_OPTIONS;
  2270. Object.defineProperty(exports, '__esModule', { value: true });
  2271. })));
  2272. //# sourceMappingURL=material-chips.umd.js.map