chips.es5.js 76 KB

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