chips.mjs 226 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167
  1. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  2. import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
  3. import * as i0 from '@angular/core';
  4. import { InjectionToken, Directive, Inject, Input, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Attribute, ContentChildren, Output, ContentChild, ViewChild, inject, QueryList, forwardRef, Self, NgModule } from '@angular/core';
  5. import * as i2 from '@angular/common';
  6. import { DOCUMENT, CommonModule } from '@angular/common';
  7. import * as i3 from '@angular/material/core';
  8. import { mixinTabIndex, mixinColor, mixinDisableRipple, mixinDisabled, MAT_RIPPLE_GLOBAL_OPTIONS, MatRipple, mixinErrorState, MatCommonModule, MatRippleModule, ErrorStateMatcher } from '@angular/material/core';
  9. import * as i1 from '@angular/cdk/a11y';
  10. import { FocusKeyManager } from '@angular/cdk/a11y';
  11. import { Subject, merge } from 'rxjs';
  12. import { take, takeUntil, startWith, switchMap } from 'rxjs/operators';
  13. import { ENTER, SPACE, BACKSPACE, DELETE, TAB, hasModifierKey } from '@angular/cdk/keycodes';
  14. import * as i1$1 from '@angular/cdk/bidi';
  15. import * as i2$1 from '@angular/forms';
  16. import { NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
  17. import * as i1$2 from '@angular/material/form-field';
  18. import { MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material/form-field';
  19. /** Injection token to be used to override the default options for the chips module. */
  20. const MAT_CHIPS_DEFAULT_OPTIONS = new InjectionToken('mat-chips-default-options');
  21. /**
  22. * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
  23. * alternative token to the actual `MatChipAvatar` class which could cause unnecessary
  24. * retention of the class and its directive metadata.
  25. */
  26. const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
  27. /**
  28. * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
  29. * alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
  30. * retention of the class and its directive metadata.
  31. */
  32. const MAT_CHIP_TRAILING_ICON = new InjectionToken('MatChipTrailingIcon');
  33. /**
  34. * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
  35. * alternative token to the actual `MatChipRemove` class which could cause unnecessary
  36. * retention of the class and its directive metadata.
  37. */
  38. const MAT_CHIP_REMOVE = new InjectionToken('MatChipRemove');
  39. /**
  40. * Injection token used to avoid a circular dependency between the `MatChip` and `MatChipAction`.
  41. */
  42. const MAT_CHIP = new InjectionToken('MatChip');
  43. class _MatChipActionBase {
  44. }
  45. const _MatChipActionMixinBase = mixinTabIndex(_MatChipActionBase, -1);
  46. /**
  47. * Section within a chip.
  48. * @docs-private
  49. */
  50. class MatChipAction extends _MatChipActionMixinBase {
  51. /** Whether the action is disabled. */
  52. get disabled() {
  53. return this._disabled || this._parentChip.disabled;
  54. }
  55. set disabled(value) {
  56. this._disabled = coerceBooleanProperty(value);
  57. }
  58. /**
  59. * Determine the value of the disabled attribute for this chip action.
  60. */
  61. _getDisabledAttribute() {
  62. // When this chip action is disabled and focusing disabled chips is not permitted, return empty
  63. // string to indicate that disabled attribute should be included.
  64. return this.disabled && !this._allowFocusWhenDisabled ? '' : null;
  65. }
  66. /**
  67. * Determine the value of the tabindex attribute for this chip action.
  68. */
  69. _getTabindex() {
  70. return (this.disabled && !this._allowFocusWhenDisabled) || !this.isInteractive
  71. ? null
  72. : this.tabIndex.toString();
  73. }
  74. constructor(_elementRef, _parentChip) {
  75. super();
  76. this._elementRef = _elementRef;
  77. this._parentChip = _parentChip;
  78. /** Whether the action is interactive. */
  79. this.isInteractive = true;
  80. /** Whether this is the primary action in the chip. */
  81. this._isPrimary = true;
  82. this._disabled = false;
  83. /**
  84. * Private API to allow focusing this chip when it is disabled.
  85. */
  86. this._allowFocusWhenDisabled = false;
  87. if (_elementRef.nativeElement.nodeName === 'BUTTON') {
  88. _elementRef.nativeElement.setAttribute('type', 'button');
  89. }
  90. }
  91. focus() {
  92. this._elementRef.nativeElement.focus();
  93. }
  94. _handleClick(event) {
  95. if (!this.disabled && this.isInteractive && this._isPrimary) {
  96. event.preventDefault();
  97. this._parentChip._handlePrimaryActionInteraction();
  98. }
  99. }
  100. _handleKeydown(event) {
  101. if ((event.keyCode === ENTER || event.keyCode === SPACE) &&
  102. !this.disabled &&
  103. this.isInteractive &&
  104. this._isPrimary &&
  105. !this._parentChip._isEditing) {
  106. event.preventDefault();
  107. this._parentChip._handlePrimaryActionInteraction();
  108. }
  109. }
  110. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipAction, deps: [{ token: i0.ElementRef }, { token: MAT_CHIP }], target: i0.ɵɵFactoryTarget.Directive }); }
  111. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatChipAction, selector: "[matChipAction]", inputs: { disabled: "disabled", tabIndex: "tabIndex", isInteractive: "isInteractive", _allowFocusWhenDisabled: "_allowFocusWhenDisabled" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)" }, properties: { "class.mdc-evolution-chip__action--primary": "_isPrimary", "class.mdc-evolution-chip__action--presentational": "!isInteractive", "class.mdc-evolution-chip__action--trailing": "!_isPrimary", "attr.tabindex": "_getTabindex()", "attr.disabled": "_getDisabledAttribute()", "attr.aria-disabled": "disabled" }, classAttribute: "mdc-evolution-chip__action mat-mdc-chip-action" }, usesInheritance: true, ngImport: i0 }); }
  112. }
  113. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipAction, decorators: [{
  114. type: Directive,
  115. args: [{
  116. selector: '[matChipAction]',
  117. inputs: ['disabled', 'tabIndex'],
  118. host: {
  119. 'class': 'mdc-evolution-chip__action mat-mdc-chip-action',
  120. '[class.mdc-evolution-chip__action--primary]': '_isPrimary',
  121. '[class.mdc-evolution-chip__action--presentational]': '!isInteractive',
  122. '[class.mdc-evolution-chip__action--trailing]': '!_isPrimary',
  123. '[attr.tabindex]': '_getTabindex()',
  124. '[attr.disabled]': '_getDisabledAttribute()',
  125. '[attr.aria-disabled]': 'disabled',
  126. '(click)': '_handleClick($event)',
  127. '(keydown)': '_handleKeydown($event)',
  128. },
  129. }]
  130. }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
  131. type: Inject,
  132. args: [MAT_CHIP]
  133. }] }]; }, propDecorators: { isInteractive: [{
  134. type: Input
  135. }], disabled: [{
  136. type: Input
  137. }], _allowFocusWhenDisabled: [{
  138. type: Input
  139. }] } });
  140. /** Avatar image within a chip. */
  141. class MatChipAvatar {
  142. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
  143. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]", host: { attributes: { "role": "img" }, classAttribute: "mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary" }, providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }], ngImport: i0 }); }
  144. }
  145. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipAvatar, decorators: [{
  146. type: Directive,
  147. args: [{
  148. selector: 'mat-chip-avatar, [matChipAvatar]',
  149. host: {
  150. 'class': 'mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary',
  151. 'role': 'img',
  152. },
  153. providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }],
  154. }]
  155. }] });
  156. /** Non-interactive trailing icon in a chip. */
  157. class MatChipTrailingIcon extends MatChipAction {
  158. constructor() {
  159. super(...arguments);
  160. /**
  161. * MDC considers all trailing actions as a remove icon,
  162. * but we support non-interactive trailing icons.
  163. */
  164. this.isInteractive = false;
  165. this._isPrimary = false;
  166. }
  167. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipTrailingIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
  168. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing" }, providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }], usesInheritance: true, ngImport: i0 }); }
  169. }
  170. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipTrailingIcon, decorators: [{
  171. type: Directive,
  172. args: [{
  173. selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
  174. host: {
  175. 'class': 'mat-mdc-chip-trailing-icon mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
  176. 'aria-hidden': 'true',
  177. },
  178. providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }],
  179. }]
  180. }] });
  181. /**
  182. * Directive to remove the parent chip when the trailing icon is clicked or
  183. * when the ENTER key is pressed on it.
  184. *
  185. * Recommended for use with the Material Design "cancel" icon
  186. * available at https://material.io/icons/#ic_cancel.
  187. *
  188. * Example:
  189. *
  190. * ```
  191. * <mat-chip>
  192. * <mat-icon matChipRemove>cancel</mat-icon>
  193. * </mat-chip>
  194. * ```
  195. */
  196. class MatChipRemove extends MatChipAction {
  197. constructor() {
  198. super(...arguments);
  199. this._isPrimary = false;
  200. }
  201. _handleClick(event) {
  202. if (!this.disabled) {
  203. event.stopPropagation();
  204. event.preventDefault();
  205. this._parentChip.remove();
  206. }
  207. }
  208. _handleKeydown(event) {
  209. if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
  210. event.stopPropagation();
  211. event.preventDefault();
  212. this._parentChip.remove();
  213. }
  214. }
  215. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipRemove, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
  216. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatChipRemove, selector: "[matChipRemove]", host: { attributes: { "role": "button" }, properties: { "attr.aria-hidden": "null" }, classAttribute: "mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing" }, providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }], usesInheritance: true, ngImport: i0 }); }
  217. }
  218. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipRemove, decorators: [{
  219. type: Directive,
  220. args: [{
  221. selector: '[matChipRemove]',
  222. host: {
  223. 'class': 'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator ' +
  224. 'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
  225. 'role': 'button',
  226. '[attr.aria-hidden]': 'null',
  227. },
  228. providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }],
  229. }]
  230. }] });
  231. let uid = 0;
  232. /**
  233. * Boilerplate for applying mixins to MatChip.
  234. * @docs-private
  235. */
  236. const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(class {
  237. constructor(_elementRef) {
  238. this._elementRef = _elementRef;
  239. }
  240. })), 'primary'), -1);
  241. /**
  242. * Material design styled Chip base component. Used inside the MatChipSet component.
  243. *
  244. * Extended by MatChipOption and MatChipRow for different interaction patterns.
  245. */
  246. class MatChip extends _MatChipMixinBase {
  247. _hasFocus() {
  248. return this._hasFocusInternal;
  249. }
  250. /**
  251. * The value of the chip. Defaults to the content inside
  252. * the `mat-mdc-chip-action-label` element.
  253. */
  254. get value() {
  255. return this._value !== undefined ? this._value : this._textElement.textContent.trim();
  256. }
  257. set value(value) {
  258. this._value = value;
  259. }
  260. /**
  261. * Determines whether or not the chip displays the remove styling and emits (removed) events.
  262. */
  263. get removable() {
  264. return this._removable;
  265. }
  266. set removable(value) {
  267. this._removable = coerceBooleanProperty(value);
  268. }
  269. /**
  270. * Colors the chip for emphasis as if it were selected.
  271. */
  272. get highlighted() {
  273. return this._highlighted;
  274. }
  275. set highlighted(value) {
  276. this._highlighted = coerceBooleanProperty(value);
  277. }
  278. constructor(_changeDetectorRef, elementRef, _ngZone, _focusMonitor, _document, animationMode, _globalRippleOptions, tabIndex) {
  279. super(elementRef);
  280. this._changeDetectorRef = _changeDetectorRef;
  281. this._ngZone = _ngZone;
  282. this._focusMonitor = _focusMonitor;
  283. this._globalRippleOptions = _globalRippleOptions;
  284. /** Whether the ripple is centered on the chip. */
  285. this._isRippleCentered = false;
  286. /** Emits when the chip is focused. */
  287. this._onFocus = new Subject();
  288. /** Emits when the chip is blurred. */
  289. this._onBlur = new Subject();
  290. /** Role for the root of the chip. */
  291. this.role = null;
  292. /** Whether the chip has focus. */
  293. this._hasFocusInternal = false;
  294. /** A unique id for the chip. If none is supplied, it will be auto-generated. */
  295. this.id = `mat-mdc-chip-${uid++}`;
  296. // TODO(#26104): Consider deprecating and using `_computeAriaAccessibleName` instead.
  297. // `ariaLabel` may be unnecessary, and `_computeAriaAccessibleName` only supports
  298. // datepicker's use case.
  299. /** ARIA label for the content of the chip. */
  300. this.ariaLabel = null;
  301. // TODO(#26104): Consider deprecating and using `_computeAriaAccessibleName` instead.
  302. // `ariaDescription` may be unnecessary, and `_computeAriaAccessibleName` only supports
  303. // datepicker's use case.
  304. /** ARIA description for the content of the chip. */
  305. this.ariaDescription = null;
  306. /** Id of a span that contains this chip's aria description. */
  307. this._ariaDescriptionId = `${this.id}-aria-description`;
  308. this._removable = true;
  309. this._highlighted = false;
  310. /** Emitted when a chip is to be removed. */
  311. this.removed = new EventEmitter();
  312. /** Emitted when the chip is destroyed. */
  313. this.destroyed = new EventEmitter();
  314. /** The unstyled chip selector for this component. */
  315. this.basicChipAttrName = 'mat-basic-chip';
  316. this._document = _document;
  317. this._animationsDisabled = animationMode === 'NoopAnimations';
  318. if (tabIndex != null) {
  319. this.tabIndex = parseInt(tabIndex) ?? this.defaultTabIndex;
  320. }
  321. this._monitorFocus();
  322. }
  323. ngOnInit() {
  324. // This check needs to happen in `ngOnInit` so the overridden value of
  325. // `basicChipAttrName` coming from base classes can be picked up.
  326. const element = this._elementRef.nativeElement;
  327. this._isBasicChip =
  328. element.hasAttribute(this.basicChipAttrName) ||
  329. element.tagName.toLowerCase() === this.basicChipAttrName;
  330. }
  331. ngAfterViewInit() {
  332. this._textElement = this._elementRef.nativeElement.querySelector('.mat-mdc-chip-action-label');
  333. if (this._pendingFocus) {
  334. this._pendingFocus = false;
  335. this.focus();
  336. }
  337. }
  338. ngAfterContentInit() {
  339. // Since the styling depends on the presence of some
  340. // actions, we have to mark for check on changes.
  341. this._actionChanges = merge(this._allLeadingIcons.changes, this._allTrailingIcons.changes, this._allRemoveIcons.changes).subscribe(() => this._changeDetectorRef.markForCheck());
  342. }
  343. ngOnDestroy() {
  344. this._focusMonitor.stopMonitoring(this._elementRef);
  345. this._actionChanges?.unsubscribe();
  346. this.destroyed.emit({ chip: this });
  347. this.destroyed.complete();
  348. }
  349. /**
  350. * Allows for programmatic removal of the chip.
  351. *
  352. * Informs any listeners of the removal request. Does not remove the chip from the DOM.
  353. */
  354. remove() {
  355. if (this.removable) {
  356. this.removed.emit({ chip: this });
  357. }
  358. }
  359. /** Whether or not the ripple should be disabled. */
  360. _isRippleDisabled() {
  361. return (this.disabled ||
  362. this.disableRipple ||
  363. this._animationsDisabled ||
  364. this._isBasicChip ||
  365. !!this._globalRippleOptions?.disabled);
  366. }
  367. /** Returns whether the chip has a trailing icon. */
  368. _hasTrailingIcon() {
  369. return !!(this.trailingIcon || this.removeIcon);
  370. }
  371. /** Handles keyboard events on the chip. */
  372. _handleKeydown(event) {
  373. if (event.keyCode === BACKSPACE || event.keyCode === DELETE) {
  374. event.preventDefault();
  375. this.remove();
  376. }
  377. }
  378. /** Allows for programmatic focusing of the chip. */
  379. focus() {
  380. if (!this.disabled) {
  381. // If `focus` is called before `ngAfterViewInit`, we won't have access to the primary action.
  382. // This can happen if the consumer tries to focus a chip immediately after it is added.
  383. // Queue the method to be called again on init.
  384. if (this.primaryAction) {
  385. this.primaryAction.focus();
  386. }
  387. else {
  388. this._pendingFocus = true;
  389. }
  390. }
  391. }
  392. /** Gets the action that contains a specific target node. */
  393. _getSourceAction(target) {
  394. return this._getActions().find(action => {
  395. const element = action._elementRef.nativeElement;
  396. return element === target || element.contains(target);
  397. });
  398. }
  399. /** Gets all of the actions within the chip. */
  400. _getActions() {
  401. const result = [];
  402. if (this.primaryAction) {
  403. result.push(this.primaryAction);
  404. }
  405. if (this.removeIcon) {
  406. result.push(this.removeIcon);
  407. }
  408. if (this.trailingIcon) {
  409. result.push(this.trailingIcon);
  410. }
  411. return result;
  412. }
  413. /** Handles interactions with the primary action of the chip. */
  414. _handlePrimaryActionInteraction() {
  415. // Empty here, but is overwritten in child classes.
  416. }
  417. /** Starts the focus monitoring process on the chip. */
  418. _monitorFocus() {
  419. this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {
  420. const hasFocus = origin !== null;
  421. if (hasFocus !== this._hasFocusInternal) {
  422. this._hasFocusInternal = hasFocus;
  423. if (hasFocus) {
  424. this._onFocus.next({ chip: this });
  425. }
  426. else {
  427. // When animations are enabled, Angular may end up removing the chip from the DOM a little
  428. // earlier than usual, causing it to be blurred and throwing off the logic in the chip list
  429. // that moves focus not the next item. To work around the issue, we defer marking the chip
  430. // as not focused until the next time the zone stabilizes.
  431. this._ngZone.onStable
  432. .pipe(take(1))
  433. .subscribe(() => this._ngZone.run(() => this._onBlur.next({ chip: this })));
  434. }
  435. }
  436. });
  437. }
  438. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: DOCUMENT }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
  439. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: { color: "color", disabled: "disabled", disableRipple: "disableRipple", tabIndex: "tabIndex", role: "role", id: "id", ariaLabel: ["aria-label", "ariaLabel"], ariaDescription: ["aria-description", "ariaDescription"], value: "value", removable: "removable", highlighted: "highlighted" }, outputs: { removed: "removed", destroyed: "destroyed" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mdc-evolution-chip": "!_isBasicChip", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "leadingIcon", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-basic-chip": "_isBasicChip", "class.mat-mdc-standard-chip": "!_isBasicChip", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "class._mat-animation-noopable": "_animationsDisabled", "id": "id", "attr.role": "role", "attr.tabindex": "role ? tabIndex : null", "attr.aria-label": "ariaLabel" }, classAttribute: "mat-mdc-chip" }, providers: [{ provide: MAT_CHIP, useExisting: MatChip }], queries: [{ propertyName: "leadingIcon", first: true, predicate: MAT_CHIP_AVATAR, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: MAT_CHIP_TRAILING_ICON, descendants: true }, { propertyName: "removeIcon", first: true, predicate: MAT_CHIP_REMOVE, descendants: true }, { propertyName: "_allLeadingIcons", predicate: MAT_CHIP_AVATAR, descendants: true }, { propertyName: "_allTrailingIcons", predicate: MAT_CHIP_TRAILING_ICON, descendants: true }, { propertyName: "_allRemoveIcons", predicate: MAT_CHIP_REMOVE, descendants: true }], viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "primaryAction", first: true, predicate: MatChipAction, descendants: true }], exportAs: ["matChip"], usesInheritance: true, ngImport: i0, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <span matChipAction [isInteractive]=\"false\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </span>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none;color:inherit}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385;stroke:currentColor}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mat-mdc-standard-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);height:var(--mdc-chip-container-height, 32px)}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:var(--mdc-chip-with-avatar-avatar-shape-radius, 14px 14px 14px 14px)}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:var(--mdc-chip-with-avatar-avatar-size, 28px);width:var(--mdc-chip-with-avatar-avatar-size, 28px);font-size:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-outline-width, 1px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-outline-width, 1px)}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-selected-outline-width, 0)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-unselected-outline-width, 1px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){background-color:var(--mdc-chip-elevated-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--mdc-chip-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:var(--mdc-chip-with-icon-icon-size, 18px);width:var(--mdc-chip-with-icon-icon-size, 18px);font-size:var(--mdc-chip-with-icon-icon-size, 18px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-disabled-trailing-icon-color, currentColor)}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:CanvasText !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{font:inherit;letter-spacing:inherit;white-space:inherit}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-basic-chip .mdc-evolution-chip__action--primary{font:inherit}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1;color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-chip{position:relative;z-index:0}.mat-mdc-chip-action-label{text-align:left;z-index:1}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-action-label .mat-mdc-focus-indicator::before{margin:calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-mdc-chip-remove::before{margin:calc(var(--mat-mdc-focus-indicator-border-width, 3px) * -1);left:8px;right:8px}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive", "_allowFocusWhenDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
  440. }
  441. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChip, decorators: [{
  442. type: Component,
  443. args: [{ selector: 'mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]', inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'], exportAs: 'matChip', host: {
  444. 'class': 'mat-mdc-chip',
  445. '[class.mdc-evolution-chip]': '!_isBasicChip',
  446. '[class.mdc-evolution-chip--disabled]': 'disabled',
  447. '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
  448. '[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
  449. '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
  450. '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
  451. '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
  452. '[class.mat-mdc-chip-highlighted]': 'highlighted',
  453. '[class.mat-mdc-chip-disabled]': 'disabled',
  454. '[class.mat-mdc-basic-chip]': '_isBasicChip',
  455. '[class.mat-mdc-standard-chip]': '!_isBasicChip',
  456. '[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
  457. '[class._mat-animation-noopable]': '_animationsDisabled',
  458. '[id]': 'id',
  459. '[attr.role]': 'role',
  460. '[attr.tabindex]': 'role ? tabIndex : null',
  461. '[attr.aria-label]': 'ariaLabel',
  462. '(keydown)': '_handleKeydown($event)',
  463. }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MAT_CHIP, useExisting: MatChip }], template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <span matChipAction [isInteractive]=\"false\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </span>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none;color:inherit}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385;stroke:currentColor}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mat-mdc-standard-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);height:var(--mdc-chip-container-height, 32px)}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:var(--mdc-chip-with-avatar-avatar-shape-radius, 14px 14px 14px 14px)}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:var(--mdc-chip-with-avatar-avatar-size, 28px);width:var(--mdc-chip-with-avatar-avatar-size, 28px);font-size:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-outline-width, 1px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-outline-width, 1px)}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-selected-outline-width, 0)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-unselected-outline-width, 1px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){background-color:var(--mdc-chip-elevated-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--mdc-chip-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:var(--mdc-chip-with-icon-icon-size, 18px);width:var(--mdc-chip-with-icon-icon-size, 18px);font-size:var(--mdc-chip-with-icon-icon-size, 18px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-disabled-trailing-icon-color, currentColor)}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:CanvasText !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{font:inherit;letter-spacing:inherit;white-space:inherit}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-basic-chip .mdc-evolution-chip__action--primary{font:inherit}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1;color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-chip{position:relative;z-index:0}.mat-mdc-chip-action-label{text-align:left;z-index:1}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-action-label .mat-mdc-focus-indicator::before{margin:calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-mdc-chip-remove::before{margin:calc(var(--mat-mdc-focus-indicator-border-width, 3px) * -1);left:8px;right:8px}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before{content:\"\"}"] }]
  464. }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
  465. type: Inject,
  466. args: [DOCUMENT]
  467. }] }, { type: undefined, decorators: [{
  468. type: Optional
  469. }, {
  470. type: Inject,
  471. args: [ANIMATION_MODULE_TYPE]
  472. }] }, { type: undefined, decorators: [{
  473. type: Optional
  474. }, {
  475. type: Inject,
  476. args: [MAT_RIPPLE_GLOBAL_OPTIONS]
  477. }] }, { type: undefined, decorators: [{
  478. type: Attribute,
  479. args: ['tabindex']
  480. }] }]; }, propDecorators: { role: [{
  481. type: Input
  482. }], _allLeadingIcons: [{
  483. type: ContentChildren,
  484. args: [MAT_CHIP_AVATAR, { descendants: true }]
  485. }], _allTrailingIcons: [{
  486. type: ContentChildren,
  487. args: [MAT_CHIP_TRAILING_ICON, { descendants: true }]
  488. }], _allRemoveIcons: [{
  489. type: ContentChildren,
  490. args: [MAT_CHIP_REMOVE, { descendants: true }]
  491. }], id: [{
  492. type: Input
  493. }], ariaLabel: [{
  494. type: Input,
  495. args: ['aria-label']
  496. }], ariaDescription: [{
  497. type: Input,
  498. args: ['aria-description']
  499. }], value: [{
  500. type: Input
  501. }], removable: [{
  502. type: Input
  503. }], highlighted: [{
  504. type: Input
  505. }], removed: [{
  506. type: Output
  507. }], destroyed: [{
  508. type: Output
  509. }], leadingIcon: [{
  510. type: ContentChild,
  511. args: [MAT_CHIP_AVATAR]
  512. }], trailingIcon: [{
  513. type: ContentChild,
  514. args: [MAT_CHIP_TRAILING_ICON]
  515. }], removeIcon: [{
  516. type: ContentChild,
  517. args: [MAT_CHIP_REMOVE]
  518. }], ripple: [{
  519. type: ViewChild,
  520. args: [MatRipple]
  521. }], primaryAction: [{
  522. type: ViewChild,
  523. args: [MatChipAction]
  524. }] } });
  525. /** Event object emitted by MatChipOption when selected or deselected. */
  526. class MatChipSelectionChange {
  527. constructor(
  528. /** Reference to the chip that emitted the event. */
  529. source,
  530. /** Whether the chip that emitted the event is selected. */
  531. selected,
  532. /** Whether the selection change was a result of a user interaction. */
  533. isUserInput = false) {
  534. this.source = source;
  535. this.selected = selected;
  536. this.isUserInput = isUserInput;
  537. }
  538. }
  539. /**
  540. * An extension of the MatChip component that supports chip selection. Used with MatChipListbox.
  541. *
  542. * Unlike other chips, the user can focus on disabled chip options inside a MatChipListbox. The
  543. * user cannot click disabled chips.
  544. */
  545. class MatChipOption extends MatChip {
  546. constructor() {
  547. super(...arguments);
  548. /** Default chip options. */
  549. this._defaultOptions = inject(MAT_CHIPS_DEFAULT_OPTIONS, { optional: true });
  550. /** Whether the chip list is selectable. */
  551. this.chipListSelectable = true;
  552. /** Whether the chip list is in multi-selection mode. */
  553. this._chipListMultiple = false;
  554. /** Whether the chip list hides single-selection indicator. */
  555. this._chipListHideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
  556. this._selectable = true;
  557. this._selected = false;
  558. /** The unstyled chip selector for this component. */
  559. this.basicChipAttrName = 'mat-basic-chip-option';
  560. /** Emitted when the chip is selected or deselected. */
  561. this.selectionChange = new EventEmitter();
  562. }
  563. /**
  564. * Whether or not the chip is selectable.
  565. *
  566. * When a chip is not selectable, changes to its selected state are always
  567. * ignored. By default an option chip is selectable, and it becomes
  568. * non-selectable if its parent chip list is not selectable.
  569. */
  570. get selectable() {
  571. return this._selectable && this.chipListSelectable;
  572. }
  573. set selectable(value) {
  574. this._selectable = coerceBooleanProperty(value);
  575. this._changeDetectorRef.markForCheck();
  576. }
  577. /** Whether the chip is selected. */
  578. get selected() {
  579. return this._selected;
  580. }
  581. set selected(value) {
  582. this._setSelectedState(coerceBooleanProperty(value), false, true);
  583. }
  584. /**
  585. * The ARIA selected applied to the chip. Conforms to WAI ARIA best practices for listbox
  586. * interaction patterns.
  587. *
  588. * From [WAI ARIA Listbox authoring practices guide](
  589. * https://www.w3.org/WAI/ARIA/apg/patterns/listbox/):
  590. * "If any options are selected, each selected option has either aria-selected or aria-checked
  591. * set to true. All options that are selectable but not selected have either aria-selected or
  592. * aria-checked set to false."
  593. *
  594. * Set `aria-selected="false"` on not-selected listbox options that are selectable to fix
  595. * VoiceOver reading every option as "selected" (#25736).
  596. */
  597. get ariaSelected() {
  598. return this.selectable ? this.selected.toString() : null;
  599. }
  600. ngOnInit() {
  601. super.ngOnInit();
  602. this.role = 'presentation';
  603. }
  604. /** Selects the chip. */
  605. select() {
  606. this._setSelectedState(true, false, true);
  607. }
  608. /** Deselects the chip. */
  609. deselect() {
  610. this._setSelectedState(false, false, true);
  611. }
  612. /** Selects this chip and emits userInputSelection event */
  613. selectViaInteraction() {
  614. this._setSelectedState(true, true, true);
  615. }
  616. /** Toggles the current selected state of this chip. */
  617. toggleSelected(isUserInput = false) {
  618. this._setSelectedState(!this.selected, isUserInput, true);
  619. return this.selected;
  620. }
  621. _handlePrimaryActionInteraction() {
  622. if (this.selectable && !this.disabled) {
  623. this.toggleSelected(true);
  624. }
  625. }
  626. _hasLeadingGraphic() {
  627. if (this.leadingIcon) {
  628. return true;
  629. }
  630. // The checkmark graphic communicates selected state for both single-select and multi-select.
  631. // Include checkmark in single-select to fix a11y issue where selected state is communicated
  632. // visually only using color (#25886).
  633. return !this._chipListHideSingleSelectionIndicator || this._chipListMultiple;
  634. }
  635. _setSelectedState(isSelected, isUserInput, emitEvent) {
  636. if (isSelected !== this.selected) {
  637. this._selected = isSelected;
  638. if (emitEvent) {
  639. this.selectionChange.emit({
  640. source: this,
  641. isUserInput,
  642. selected: this.selected,
  643. });
  644. }
  645. this._changeDetectorRef.markForCheck();
  646. }
  647. }
  648. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipOption, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
  649. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: { color: "color", disabled: "disabled", disableRipple: "disableRipple", tabIndex: "tabIndex", selectable: "selectable", selected: "selected" }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.mdc-evolution-chip": "!_isBasicChip", "class.mdc-evolution-chip--filter": "!_isBasicChip", "class.mdc-evolution-chip--selectable": "!_isBasicChip", "class.mat-mdc-chip-selected": "selected", "class.mat-mdc-chip-multiple": "_chipListMultiple", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--selected": "selected", "class.mdc-evolution-chip--selecting": "!_animationsDisabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-primary-graphic": "_hasLeadingGraphic()", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-description": "null", "attr.role": "role", "id": "id" }, classAttribute: "mat-mdc-chip mat-mdc-chip-option" }, providers: [
  650. { provide: MatChip, useExisting: MatChipOption },
  651. { provide: MAT_CHIP, useExisting: MatChipOption },
  652. ], usesInheritance: true, ngImport: i0, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [_allowFocusWhenDisabled]=\"true\"\n [attr.aria-selected]=\"ariaSelected\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"_ariaDescriptionId\"\n role=\"option\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"_hasLeadingGraphic()\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-evolution-chip__checkmark\">\n <svg\n class=\"mdc-evolution-chip__checkmark-svg\"\n viewBox=\"-2 -3 30 30\"\n focusable=\"false\"\n aria-hidden=\"true\">\n <path class=\"mdc-evolution-chip__checkmark-path\"\n fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n </svg>\n </span>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n\n<span class=\"cdk-visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none;color:inherit}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385;stroke:currentColor}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mat-mdc-standard-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);height:var(--mdc-chip-container-height, 32px)}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:var(--mdc-chip-with-avatar-avatar-shape-radius, 14px 14px 14px 14px)}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:var(--mdc-chip-with-avatar-avatar-size, 28px);width:var(--mdc-chip-with-avatar-avatar-size, 28px);font-size:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-outline-width, 1px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-outline-width, 1px)}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-selected-outline-width, 0)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-unselected-outline-width, 1px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){background-color:var(--mdc-chip-elevated-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--mdc-chip-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:var(--mdc-chip-with-icon-icon-size, 18px);width:var(--mdc-chip-with-icon-icon-size, 18px);font-size:var(--mdc-chip-with-icon-icon-size, 18px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-disabled-trailing-icon-color, currentColor)}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:CanvasText !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{font:inherit;letter-spacing:inherit;white-space:inherit}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-basic-chip .mdc-evolution-chip__action--primary{font:inherit}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1;color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-chip{position:relative;z-index:0}.mat-mdc-chip-action-label{text-align:left;z-index:1}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-action-label .mat-mdc-focus-indicator::before{margin:calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-mdc-chip-remove::before{margin:calc(var(--mat-mdc-focus-indicator-border-width, 3px) * -1);left:8px;right:8px}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive", "_allowFocusWhenDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
  653. }
  654. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipOption, decorators: [{
  655. type: Component,
  656. args: [{ selector: 'mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]', inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'], host: {
  657. 'class': 'mat-mdc-chip mat-mdc-chip-option',
  658. '[class.mdc-evolution-chip]': '!_isBasicChip',
  659. '[class.mdc-evolution-chip--filter]': '!_isBasicChip',
  660. '[class.mdc-evolution-chip--selectable]': '!_isBasicChip',
  661. '[class.mat-mdc-chip-selected]': 'selected',
  662. '[class.mat-mdc-chip-multiple]': '_chipListMultiple',
  663. '[class.mat-mdc-chip-disabled]': 'disabled',
  664. '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
  665. '[class.mdc-evolution-chip--disabled]': 'disabled',
  666. '[class.mdc-evolution-chip--selected]': 'selected',
  667. // This class enables the transition on the checkmark. Usually MDC adds it when selection
  668. // starts and removes it once the animation is finished. We don't need to go through all
  669. // the trouble, because we only care about the selection animation. MDC needs to do it,
  670. // because they also have an exit animation that we don't care about.
  671. '[class.mdc-evolution-chip--selecting]': '!_animationsDisabled',
  672. '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
  673. '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
  674. '[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingGraphic()',
  675. '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
  676. '[class.mat-mdc-chip-highlighted]': 'highlighted',
  677. '[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
  678. '[attr.tabindex]': 'null',
  679. '[attr.aria-label]': 'null',
  680. '[attr.aria-description]': 'null',
  681. '[attr.role]': 'role',
  682. '[id]': 'id',
  683. }, providers: [
  684. { provide: MatChip, useExisting: MatChipOption },
  685. { provide: MAT_CHIP, useExisting: MatChipOption },
  686. ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n<span class=\"mat-mdc-chip-focus-overlay\"></span>\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\">\n <button\n matChipAction\n [tabIndex]=\"tabIndex\"\n [_allowFocusWhenDisabled]=\"true\"\n [attr.aria-selected]=\"ariaSelected\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"_ariaDescriptionId\"\n role=\"option\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"_hasLeadingGraphic()\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n <span class=\"mdc-evolution-chip__checkmark\">\n <svg\n class=\"mdc-evolution-chip__checkmark-svg\"\n viewBox=\"-2 -3 30 30\"\n focusable=\"false\"\n aria-hidden=\"true\">\n <path class=\"mdc-evolution-chip__checkmark-path\"\n fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n </svg>\n </span>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\">\n <ng-content></ng-content>\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </button>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n\n<span class=\"cdk-visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none;color:inherit}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385;stroke:currentColor}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mat-mdc-standard-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);height:var(--mdc-chip-container-height, 32px)}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:var(--mdc-chip-with-avatar-avatar-shape-radius, 14px 14px 14px 14px)}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:var(--mdc-chip-with-avatar-avatar-size, 28px);width:var(--mdc-chip-with-avatar-avatar-size, 28px);font-size:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-outline-width, 1px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-outline-width, 1px)}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-selected-outline-width, 0)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-unselected-outline-width, 1px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){background-color:var(--mdc-chip-elevated-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--mdc-chip-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:var(--mdc-chip-with-icon-icon-size, 18px);width:var(--mdc-chip-with-icon-icon-size, 18px);font-size:var(--mdc-chip-with-icon-icon-size, 18px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-disabled-trailing-icon-color, currentColor)}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:CanvasText !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{font:inherit;letter-spacing:inherit;white-space:inherit}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-basic-chip .mdc-evolution-chip__action--primary{font:inherit}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1;color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-chip{position:relative;z-index:0}.mat-mdc-chip-action-label{text-align:left;z-index:1}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-action-label .mat-mdc-focus-indicator::before{margin:calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-mdc-chip-remove::before{margin:calc(var(--mat-mdc-focus-indicator-border-width, 3px) * -1);left:8px;right:8px}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before{content:\"\"}"] }]
  687. }], propDecorators: { selectable: [{
  688. type: Input
  689. }], selected: [{
  690. type: Input
  691. }], selectionChange: [{
  692. type: Output
  693. }] } });
  694. /**
  695. * A directive that makes a span editable and exposes functions to modify and retrieve the
  696. * element's contents.
  697. */
  698. class MatChipEditInput {
  699. constructor(_elementRef, _document) {
  700. this._elementRef = _elementRef;
  701. this._document = _document;
  702. }
  703. initialize(initialValue) {
  704. this.getNativeElement().focus();
  705. this.setValue(initialValue);
  706. }
  707. getNativeElement() {
  708. return this._elementRef.nativeElement;
  709. }
  710. setValue(value) {
  711. this.getNativeElement().textContent = value;
  712. this._moveCursorToEndOfInput();
  713. }
  714. getValue() {
  715. return this.getNativeElement().textContent || '';
  716. }
  717. _moveCursorToEndOfInput() {
  718. const range = this._document.createRange();
  719. range.selectNodeContents(this.getNativeElement());
  720. range.collapse(false);
  721. const sel = window.getSelection();
  722. sel.removeAllRanges();
  723. sel.addRange(range);
  724. }
  725. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipEditInput, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
  726. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatChipEditInput, selector: "span[matChipEditInput]", host: { attributes: { "role": "textbox", "tabindex": "-1", "contenteditable": "true" }, classAttribute: "mat-chip-edit-input" }, ngImport: i0 }); }
  727. }
  728. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipEditInput, decorators: [{
  729. type: Directive,
  730. args: [{
  731. selector: 'span[matChipEditInput]',
  732. host: {
  733. 'class': 'mat-chip-edit-input',
  734. 'role': 'textbox',
  735. 'tabindex': '-1',
  736. 'contenteditable': 'true',
  737. },
  738. }]
  739. }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
  740. type: Inject,
  741. args: [DOCUMENT]
  742. }] }]; } });
  743. /**
  744. * An extension of the MatChip component used with MatChipGrid and
  745. * the matChipInputFor directive.
  746. */
  747. class MatChipRow extends MatChip {
  748. constructor(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, animationMode, globalRippleOptions, tabIndex) {
  749. super(changeDetectorRef, elementRef, ngZone, focusMonitor, _document, animationMode, globalRippleOptions, tabIndex);
  750. this.basicChipAttrName = 'mat-basic-chip-row';
  751. /**
  752. * The editing action has to be triggered in a timeout. While we're waiting on it, a blur
  753. * event might occur which will interrupt the editing. This flag is used to avoid interruptions
  754. * while the editing action is being initialized.
  755. */
  756. this._editStartPending = false;
  757. this.editable = false;
  758. /** Emitted when the chip is edited. */
  759. this.edited = new EventEmitter();
  760. this._isEditing = false;
  761. this.role = 'row';
  762. this._onBlur.pipe(takeUntil(this.destroyed)).subscribe(() => {
  763. if (this._isEditing && !this._editStartPending) {
  764. this._onEditFinish();
  765. }
  766. });
  767. }
  768. _hasTrailingIcon() {
  769. // The trailing icon is hidden while editing.
  770. return !this._isEditing && super._hasTrailingIcon();
  771. }
  772. /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
  773. _handleFocus() {
  774. if (!this._isEditing && !this.disabled) {
  775. this.focus();
  776. }
  777. }
  778. _handleKeydown(event) {
  779. if (event.keyCode === ENTER && !this.disabled) {
  780. if (this._isEditing) {
  781. event.preventDefault();
  782. this._onEditFinish();
  783. }
  784. else if (this.editable) {
  785. this._startEditing(event);
  786. }
  787. }
  788. else if (this._isEditing) {
  789. // Stop the event from reaching the chip set in order to avoid navigating.
  790. event.stopPropagation();
  791. }
  792. else {
  793. super._handleKeydown(event);
  794. }
  795. }
  796. _handleDoubleclick(event) {
  797. if (!this.disabled && this.editable) {
  798. this._startEditing(event);
  799. }
  800. }
  801. _startEditing(event) {
  802. if (!this.primaryAction ||
  803. (this.removeIcon && this._getSourceAction(event.target) === this.removeIcon)) {
  804. return;
  805. }
  806. // The value depends on the DOM so we need to extract it before we flip the flag.
  807. const value = this.value;
  808. this._isEditing = true;
  809. this._editStartPending = true;
  810. // Defer initializing the input so it has time to be added to the DOM.
  811. setTimeout(() => {
  812. this._getEditInput().initialize(value);
  813. this._editStartPending = false;
  814. });
  815. }
  816. _onEditFinish() {
  817. this._isEditing = false;
  818. this._editStartPending = false;
  819. this.edited.emit({ chip: this, value: this._getEditInput().getValue() });
  820. // If the edit input is still focused or focus was returned to the body after it was destroyed,
  821. // return focus to the chip contents.
  822. if (this._document.activeElement === this._getEditInput().getNativeElement() ||
  823. this._document.activeElement === this._document.body) {
  824. this.primaryAction.focus();
  825. }
  826. }
  827. /**
  828. * Gets the projected chip edit input, or the default input if none is projected in. One of these
  829. * two values is guaranteed to be defined.
  830. */
  831. _getEditInput() {
  832. return this.contentEditInput || this.defaultEditInput;
  833. }
  834. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.FocusMonitor }, { token: DOCUMENT }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
  835. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: { color: "color", disabled: "disabled", disableRipple: "disableRipple", tabIndex: "tabIndex", editable: "editable" }, outputs: { edited: "edited" }, host: { listeners: { "focus": "_handleFocus($event)", "dblclick": "_handleDoubleclick($event)" }, properties: { "class.mat-mdc-chip-with-avatar": "leadingIcon", "class.mat-mdc-chip-disabled": "disabled", "class.mat-mdc-chip-editing": "_isEditing", "class.mat-mdc-chip-editable": "editable", "class.mdc-evolution-chip--disabled": "disabled", "class.mdc-evolution-chip--with-trailing-action": "_hasTrailingIcon()", "class.mdc-evolution-chip--with-primary-graphic": "leadingIcon", "class.mdc-evolution-chip--with-primary-icon": "leadingIcon", "class.mdc-evolution-chip--with-avatar": "leadingIcon", "class.mat-mdc-chip-highlighted": "highlighted", "class.mat-mdc-chip-with-trailing-icon": "_hasTrailingIcon()", "id": "id", "attr.tabindex": "disabled ? null : -1", "attr.aria-label": "null", "attr.aria-description": "null", "attr.role": "role" }, classAttribute: "mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip" }, providers: [
  836. { provide: MatChip, useExisting: MatChipRow },
  837. { provide: MAT_CHIP, useExisting: MatChipRow },
  838. ], queries: [{ propertyName: "contentEditInput", first: true, predicate: MatChipEditInput, descendants: true }], viewQueries: [{ propertyName: "defaultEditInput", first: true, predicate: MatChipEditInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!_isEditing\">\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n <span class=\"mat-mdc-chip-focus-overlay\"></span>\n</ng-container>\n\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n <span\n matChipAction\n [attr.role]=\"editable ? 'button' : null\"\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"_ariaDescriptionId\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\" [ngSwitch]=\"_isEditing\">\n <ng-container *ngSwitchCase=\"false\"><ng-content></ng-content></ng-container>\n\n <ng-container *ngSwitchCase=\"true\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>\n </ng-container>\n\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </span>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n role=\"gridcell\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n\n<span class=\"cdk-visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none;color:inherit}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385;stroke:currentColor}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mat-mdc-standard-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);height:var(--mdc-chip-container-height, 32px)}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:var(--mdc-chip-with-avatar-avatar-shape-radius, 14px 14px 14px 14px)}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:var(--mdc-chip-with-avatar-avatar-size, 28px);width:var(--mdc-chip-with-avatar-avatar-size, 28px);font-size:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-outline-width, 1px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-outline-width, 1px)}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-selected-outline-width, 0)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-unselected-outline-width, 1px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){background-color:var(--mdc-chip-elevated-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--mdc-chip-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:var(--mdc-chip-with-icon-icon-size, 18px);width:var(--mdc-chip-with-icon-icon-size, 18px);font-size:var(--mdc-chip-with-icon-icon-size, 18px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-disabled-trailing-icon-color, currentColor)}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:CanvasText !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{font:inherit;letter-spacing:inherit;white-space:inherit}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-basic-chip .mdc-evolution-chip__action--primary{font:inherit}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1;color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-chip{position:relative;z-index:0}.mat-mdc-chip-action-label{text-align:left;z-index:1}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-action-label .mat-mdc-focus-indicator::before{margin:calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-mdc-chip-remove::before{margin:calc(var(--mat-mdc-focus-indicator-border-width, 3px) * -1);left:8px;right:8px}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatChipAction, selector: "[matChipAction]", inputs: ["disabled", "tabIndex", "isInteractive", "_allowFocusWhenDisabled"] }, { kind: "directive", type: MatChipEditInput, selector: "span[matChipEditInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
  839. }
  840. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipRow, decorators: [{
  841. type: Component,
  842. args: [{ selector: 'mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]', inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'], host: {
  843. 'class': 'mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip',
  844. '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
  845. '[class.mat-mdc-chip-disabled]': 'disabled',
  846. '[class.mat-mdc-chip-editing]': '_isEditing',
  847. '[class.mat-mdc-chip-editable]': 'editable',
  848. '[class.mdc-evolution-chip--disabled]': 'disabled',
  849. '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
  850. '[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
  851. '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
  852. '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
  853. '[class.mat-mdc-chip-highlighted]': 'highlighted',
  854. '[class.mat-mdc-chip-with-trailing-icon]': '_hasTrailingIcon()',
  855. '[id]': 'id',
  856. // Has to have a negative tabindex in order to capture
  857. // focus and redirect it to the primary action.
  858. '[attr.tabindex]': 'disabled ? null : -1',
  859. '[attr.aria-label]': 'null',
  860. '[attr.aria-description]': 'null',
  861. '[attr.role]': 'role',
  862. '(focus)': '_handleFocus($event)',
  863. '(dblclick)': '_handleDoubleclick($event)',
  864. }, providers: [
  865. { provide: MatChip, useExisting: MatChipRow },
  866. { provide: MAT_CHIP, useExisting: MatChipRow },
  867. ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!_isEditing\">\n <span matRipple class=\"mat-mdc-chip-ripple\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"_isRippleCentered\"\n [matRippleTrigger]=\"_elementRef.nativeElement\"></span>\n <span class=\"mat-mdc-chip-focus-overlay\"></span>\n</ng-container>\n\n\n<span class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--primary\" role=\"gridcell\">\n <span\n matChipAction\n [attr.role]=\"editable ? 'button' : null\"\n [tabIndex]=\"tabIndex\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-describedby]=\"_ariaDescriptionId\">\n <span class=\"mdc-evolution-chip__graphic mat-mdc-chip-graphic\" *ngIf=\"leadingIcon\">\n <ng-content select=\"mat-chip-avatar, [matChipAvatar]\"></ng-content>\n </span>\n <span class=\"mdc-evolution-chip__text-label mat-mdc-chip-action-label\" [ngSwitch]=\"_isEditing\">\n <ng-container *ngSwitchCase=\"false\"><ng-content></ng-content></ng-container>\n\n <ng-container *ngSwitchCase=\"true\">\n <ng-content *ngIf=\"contentEditInput; else defaultMatChipEditInput\"\n select=\"[matChipEditInput]\"></ng-content>\n <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>\n </ng-container>\n\n <span class=\"mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator\"></span>\n </span>\n </span>\n</span>\n\n<span\n class=\"mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing\"\n role=\"gridcell\"\n *ngIf=\"_hasTrailingIcon()\">\n <ng-content select=\"mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]\"></ng-content>\n</span>\n\n<span class=\"cdk-visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\n", styles: [".mdc-evolution-chip,.mdc-evolution-chip__cell,.mdc-evolution-chip__action{display:inline-flex;align-items:center}.mdc-evolution-chip{position:relative;max-width:100%}.mdc-evolution-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-evolution-chip__cell,.mdc-evolution-chip__action{height:100%}.mdc-evolution-chip__cell--primary{overflow-x:hidden}.mdc-evolution-chip__cell--trailing{flex:1 0 auto}.mdc-evolution-chip__action{align-items:center;background:none;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0;text-decoration:none;color:inherit}.mdc-evolution-chip__action--presentational{cursor:auto}.mdc-evolution-chip--disabled,.mdc-evolution-chip__action:disabled{pointer-events:none}.mdc-evolution-chip__action--primary{overflow-x:hidden}.mdc-evolution-chip__action--trailing{position:relative;overflow:visible}.mdc-evolution-chip__action--primary:before{box-sizing:border-box;content:\"\";height:100%;left:0;position:absolute;pointer-events:none;top:0;width:100%;z-index:1}.mdc-evolution-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-evolution-chip__action-touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-evolution-chip__text-label{white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden}.mdc-evolution-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative;flex:1 0 auto}.mdc-evolution-chip__checkmark{position:absolute;opacity:0;top:50%;left:50%}.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--selected):not(.mdc-evolution-chip--with-primary-icon) .mdc-evolution-chip__graphic{width:0}.mdc-evolution-chip__checkmark-background{opacity:0}.mdc-evolution-chip__checkmark-svg{display:block}.mdc-evolution-chip__checkmark-path{stroke-width:2px;stroke-dasharray:29.7833385;stroke-dashoffset:29.7833385;stroke:currentColor}.mdc-evolution-chip--selecting .mdc-evolution-chip__graphic{transition:width 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark{transition:transform 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--selecting .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 45ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__graphic{transition:width 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark{transition:opacity 50ms 0ms linear,transform 100ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-75%, -50%)}.mdc-evolution-chip--deselecting .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--selecting-with-primary-icon .mdc-evolution-chip__checkmark-path{transition:stroke-dashoffset 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__icon--primary{transition:opacity 150ms 75ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark{transition:opacity 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);transform:translate(-50%, -50%)}.mdc-evolution-chip--deselecting-with-primary-icon .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}.mdc-evolution-chip--selected .mdc-evolution-chip__icon--primary{opacity:0}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark{transform:translate(-50%, -50%);opacity:1}.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark-path{stroke-dashoffset:0}@keyframes mdc-evolution-chip-enter{from{transform:scale(0.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-evolution-chip--enter{animation:mdc-evolution-chip-enter 100ms 0ms cubic-bezier(0, 0, 0.2, 1)}@keyframes mdc-evolution-chip-exit{from{opacity:1}to{opacity:0}}.mdc-evolution-chip--exit{animation:mdc-evolution-chip-exit 75ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mdc-evolution-chip--hidden{opacity:0;pointer-events:none;transition:width 150ms 0ms cubic-bezier(0.4, 0, 1, 1)}.mat-mdc-standard-chip .mdc-evolution-chip__checkmark{height:20px;width:20px}.mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:18px;width:18px;font-size:18px}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:12px;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:12px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:6px;padding-right:6px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:6px;padding-right:6px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary{padding-left:0;padding-right:12px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:12px;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic{padding-left:4px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__graphic[dir=rtl]{padding-left:8px;padding-right:4px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{padding-left:8px;padding-right:8px}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing[dir=rtl]{padding-left:8px;padding-right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing{left:8px;right:initial}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__ripple--trailing[dir=rtl]{left:initial;right:8px}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary{padding-left:0;padding-right:0}[dir=rtl] .mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary,.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--primary[dir=rtl]{padding-left:0;padding-right:0}.mdc-evolution-chip--with-avatar.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__graphic{height:24px;width:24px;font-size:24px}.mdc-evolution-chip--with-avatar .mdc-evolution-chip__icon--primary{height:24px;width:24px;font-size:24px}.mat-mdc-standard-chip{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);height:var(--mdc-chip-container-height, 32px)}.mat-mdc-standard-chip .mdc-evolution-chip__ripple{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{border-radius:var(--mdc-chip-with-avatar-avatar-shape-radius, 14px 14px 14px 14px)}.mat-mdc-standard-chip.mdc-evolution-chip--selectable:not(.mdc-evolution-chip--with-primary-icon){--mdc-chip-graphic-selected-width:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__graphic{height:var(--mdc-chip-with-avatar-avatar-size, 28px);width:var(--mdc-chip-with-avatar-avatar-size, 28px);font-size:var(--mdc-chip-with-avatar-avatar-size, 28px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-outline-width, 1px)}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-outline-width, 1px)}.mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-selected-outline-width, 0)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--selected) .mdc-evolution-chip__action--primary:before{border-width:var(--mdc-chip-flat-unselected-outline-width, 1px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){background-color:var(--mdc-chip-elevated-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled{background-color:var(--mdc-chip-elevated-disabled-container-color, transparent)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--mdc-chip-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:var(--mdc-chip-disabled-label-text-color, currentColor)}.mat-mdc-standard-chip .mdc-evolution-chip__icon--primary{height:var(--mdc-chip-with-icon-icon-size, 18px);width:var(--mdc-chip-with-icon-icon-size, 18px);font-size:var(--mdc-chip-with-icon-icon-size, 18px)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--primary{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-selected-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark{color:var(--mdc-chip-with-icon-disabled-icon-color, currentColor)}.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color, currentColor)}.mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing{color:var(--mdc-chip-with-trailing-icon-disabled-trailing-icon-color, currentColor)}.cdk-high-contrast-active .mat-mdc-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-path{stroke:CanvasText !important}.mat-mdc-standard-chip.mdc-evolution-chip--disabled{opacity:.4}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:visible}.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary{width:100%}.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{font:inherit;letter-spacing:inherit;white-space:inherit}.mat-mdc-standard-chip .mat-mdc-chip-graphic,.mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{box-sizing:content-box}.mat-mdc-standard-chip._mat-animation-noopable,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__graphic,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark,.mat-mdc-standard-chip._mat-animation-noopable .mdc-evolution-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.mat-mdc-basic-chip .mdc-evolution-chip__action--primary{font:inherit}.mat-mdc-chip-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity 150ms linear}._mat-animation-noopable .mat-mdc-chip-focus-overlay{transition:none}.mat-mdc-basic-chip .mat-mdc-chip-focus-overlay{display:none}.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{opacity:.04}.mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:.12}.mat-mdc-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-chip-avatar{text-align:center;line-height:1;color:var(--mdc-chip-with-icon-icon-color, currentColor)}.mat-mdc-chip{position:relative;z-index:0}.mat-mdc-chip-action-label{text-align:left;z-index:1}[dir=rtl] .mat-mdc-chip-action-label{text-align:right}.mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{position:relative}.mat-mdc-chip-action-label .mat-mdc-chip-primary-focus-indicator{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.mat-mdc-chip-action-label .mat-mdc-focus-indicator::before{margin:calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)}.mat-mdc-chip-remove{opacity:.54}.mat-mdc-chip-remove:focus{opacity:1}.mat-mdc-chip-remove::before{margin:calc(var(--mat-mdc-focus-indicator-border-width, 3px) * -1);left:8px;right:8px}.mat-mdc-chip-remove .mat-icon{width:inherit;height:inherit;font-size:inherit;box-sizing:content-box}.mat-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}.cdk-high-contrast-active .mat-mdc-chip-selected:not(.mat-mdc-chip-multiple){outline-width:3px}.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before{content:\"\"}"] }]
  868. }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
  869. type: Inject,
  870. args: [DOCUMENT]
  871. }] }, { type: undefined, decorators: [{
  872. type: Optional
  873. }, {
  874. type: Inject,
  875. args: [ANIMATION_MODULE_TYPE]
  876. }] }, { type: undefined, decorators: [{
  877. type: Optional
  878. }, {
  879. type: Inject,
  880. args: [MAT_RIPPLE_GLOBAL_OPTIONS]
  881. }] }, { type: undefined, decorators: [{
  882. type: Attribute,
  883. args: ['tabindex']
  884. }] }]; }, propDecorators: { editable: [{
  885. type: Input
  886. }], edited: [{
  887. type: Output
  888. }], defaultEditInput: [{
  889. type: ViewChild,
  890. args: [MatChipEditInput]
  891. }], contentEditInput: [{
  892. type: ContentChild,
  893. args: [MatChipEditInput]
  894. }] } });
  895. /**
  896. * Boilerplate for applying mixins to MatChipSet.
  897. * @docs-private
  898. */
  899. class MatChipSetBase {
  900. constructor(_elementRef) { }
  901. }
  902. const _MatChipSetMixinBase = mixinTabIndex(MatChipSetBase);
  903. /**
  904. * Basic container component for the MatChip component.
  905. *
  906. * Extended by MatChipListbox and MatChipGrid for different interaction patterns.
  907. */
  908. class MatChipSet extends _MatChipSetMixinBase {
  909. /** Combined stream of all of the child chips' focus events. */
  910. get chipFocusChanges() {
  911. return this._getChipStream(chip => chip._onFocus);
  912. }
  913. /** Combined stream of all of the child chips' remove events. */
  914. get chipDestroyedChanges() {
  915. return this._getChipStream(chip => chip.destroyed);
  916. }
  917. /** Whether the chip set is disabled. */
  918. get disabled() {
  919. return this._disabled;
  920. }
  921. set disabled(value) {
  922. this._disabled = coerceBooleanProperty(value);
  923. this._syncChipsState();
  924. }
  925. /** Whether the chip list contains chips or not. */
  926. get empty() {
  927. return this._chips.length === 0;
  928. }
  929. /** The ARIA role applied to the chip set. */
  930. get role() {
  931. if (this._explicitRole) {
  932. return this._explicitRole;
  933. }
  934. return this.empty ? null : this._defaultRole;
  935. }
  936. set role(value) {
  937. this._explicitRole = value;
  938. }
  939. /** Whether any of the chips inside of this chip-set has focus. */
  940. get focused() {
  941. return this._hasFocusedChip();
  942. }
  943. constructor(_elementRef, _changeDetectorRef, _dir) {
  944. super(_elementRef);
  945. this._elementRef = _elementRef;
  946. this._changeDetectorRef = _changeDetectorRef;
  947. this._dir = _dir;
  948. /** Index of the last destroyed chip that had focus. */
  949. this._lastDestroyedFocusedChipIndex = null;
  950. /** Subject that emits when the component has been destroyed. */
  951. this._destroyed = new Subject();
  952. /** Role to use if it hasn't been overwritten by the user. */
  953. this._defaultRole = 'presentation';
  954. this._disabled = false;
  955. this._explicitRole = null;
  956. /** Flat list of all the actions contained within the chips. */
  957. this._chipActions = new QueryList();
  958. }
  959. ngAfterViewInit() {
  960. this._setUpFocusManagement();
  961. this._trackChipSetChanges();
  962. this._trackDestroyedFocusedChip();
  963. }
  964. ngOnDestroy() {
  965. this._keyManager?.destroy();
  966. this._chipActions.destroy();
  967. this._destroyed.next();
  968. this._destroyed.complete();
  969. }
  970. /** Checks whether any of the chips is focused. */
  971. _hasFocusedChip() {
  972. return this._chips && this._chips.some(chip => chip._hasFocus());
  973. }
  974. /** Syncs the chip-set's state with the individual chips. */
  975. _syncChipsState() {
  976. if (this._chips) {
  977. this._chips.forEach(chip => {
  978. chip.disabled = this._disabled;
  979. chip._changeDetectorRef.markForCheck();
  980. });
  981. }
  982. }
  983. /** Dummy method for subclasses to override. Base chip set cannot be focused. */
  984. focus() { }
  985. /** Handles keyboard events on the chip set. */
  986. _handleKeydown(event) {
  987. if (this._originatesFromChip(event)) {
  988. this._keyManager.onKeydown(event);
  989. }
  990. }
  991. /**
  992. * Utility to ensure all indexes are valid.
  993. *
  994. * @param index The index to be checked.
  995. * @returns True if the index is valid for our list of chips.
  996. */
  997. _isValidIndex(index) {
  998. return index >= 0 && index < this._chips.length;
  999. }
  1000. /**
  1001. * Removes the `tabindex` from the chip set and resets it back afterwards, allowing the
  1002. * user to tab out of it. This prevents the set from capturing focus and redirecting
  1003. * it back to the first chip, creating a focus trap, if it user tries to tab away.
  1004. */
  1005. _allowFocusEscape() {
  1006. if (this.tabIndex !== -1) {
  1007. const previousTabIndex = this.tabIndex;
  1008. this.tabIndex = -1;
  1009. // Note that this needs to be a `setTimeout`, because a `Promise.resolve`
  1010. // doesn't allow enough time for the focus to escape.
  1011. setTimeout(() => (this.tabIndex = previousTabIndex));
  1012. }
  1013. }
  1014. /**
  1015. * Gets a stream of events from all the chips within the set.
  1016. * The stream will automatically incorporate any newly-added chips.
  1017. */
  1018. _getChipStream(mappingFunction) {
  1019. return this._chips.changes.pipe(startWith(null), switchMap(() => merge(...this._chips.map(mappingFunction))));
  1020. }
  1021. /** Checks whether an event comes from inside a chip element. */
  1022. _originatesFromChip(event) {
  1023. let currentElement = event.target;
  1024. while (currentElement && currentElement !== this._elementRef.nativeElement) {
  1025. if (currentElement.classList.contains('mat-mdc-chip')) {
  1026. return true;
  1027. }
  1028. currentElement = currentElement.parentElement;
  1029. }
  1030. return false;
  1031. }
  1032. /** Sets up the chip set's focus management logic. */
  1033. _setUpFocusManagement() {
  1034. // Create a flat `QueryList` containing the actions of all of the chips.
  1035. // This allows us to navigate both within the chip and move to the next/previous
  1036. // one using the existing `ListKeyManager`.
  1037. this._chips.changes.pipe(startWith(this._chips)).subscribe((chips) => {
  1038. const actions = [];
  1039. chips.forEach(chip => chip._getActions().forEach(action => actions.push(action)));
  1040. this._chipActions.reset(actions);
  1041. this._chipActions.notifyOnChanges();
  1042. });
  1043. this._keyManager = new FocusKeyManager(this._chipActions)
  1044. .withVerticalOrientation()
  1045. .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr')
  1046. .withHomeAndEnd()
  1047. .skipPredicate(action => this._skipPredicate(action));
  1048. // Keep the manager active index in sync so that navigation picks
  1049. // up from the current chip if the user clicks into the list directly.
  1050. this.chipFocusChanges.pipe(takeUntil(this._destroyed)).subscribe(({ chip }) => {
  1051. const action = chip._getSourceAction(document.activeElement);
  1052. if (action) {
  1053. this._keyManager.updateActiveItem(action);
  1054. }
  1055. });
  1056. this._dir?.change
  1057. .pipe(takeUntil(this._destroyed))
  1058. .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
  1059. }
  1060. /**
  1061. * Determines if key manager should avoid putting a given chip action in the tab index. Skip
  1062. * non-interactive and disabled actions since the user can't do anything with them.
  1063. */
  1064. _skipPredicate(action) {
  1065. // Skip chips that the user cannot interact with. `mat-chip-set` does not permit focusing disabled
  1066. // chips.
  1067. return !action.isInteractive || action.disabled;
  1068. }
  1069. /** Listens to changes in the chip set and syncs up the state of the individual chips. */
  1070. _trackChipSetChanges() {
  1071. this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
  1072. if (this.disabled) {
  1073. // Since this happens after the content has been
  1074. // checked, we need to defer it to the next tick.
  1075. Promise.resolve().then(() => this._syncChipsState());
  1076. }
  1077. this._redirectDestroyedChipFocus();
  1078. });
  1079. }
  1080. /** Starts tracking the destroyed chips in order to capture the focused one. */
  1081. _trackDestroyedFocusedChip() {
  1082. this.chipDestroyedChanges.pipe(takeUntil(this._destroyed)).subscribe((event) => {
  1083. const chipArray = this._chips.toArray();
  1084. const chipIndex = chipArray.indexOf(event.chip);
  1085. // If the focused chip is destroyed, save its index so that we can move focus to the next
  1086. // chip. We only save the index here, rather than move the focus immediately, because we want
  1087. // to wait until the chip is removed from the chip list before focusing the next one. This
  1088. // allows us to keep focus on the same index if the chip gets swapped out.
  1089. if (this._isValidIndex(chipIndex) && event.chip._hasFocus()) {
  1090. this._lastDestroyedFocusedChipIndex = chipIndex;
  1091. }
  1092. });
  1093. }
  1094. /**
  1095. * Finds the next appropriate chip to move focus to,
  1096. * if the currently-focused chip is destroyed.
  1097. */
  1098. _redirectDestroyedChipFocus() {
  1099. if (this._lastDestroyedFocusedChipIndex == null) {
  1100. return;
  1101. }
  1102. if (this._chips.length) {
  1103. const newIndex = Math.min(this._lastDestroyedFocusedChipIndex, this._chips.length - 1);
  1104. const chipToFocus = this._chips.toArray()[newIndex];
  1105. if (chipToFocus.disabled) {
  1106. // If we're down to one disabled chip, move focus back to the set.
  1107. if (this._chips.length === 1) {
  1108. this.focus();
  1109. }
  1110. else {
  1111. this._keyManager.setPreviousItemActive();
  1112. }
  1113. }
  1114. else {
  1115. chipToFocus.focus();
  1116. }
  1117. }
  1118. else {
  1119. this.focus();
  1120. }
  1121. this._lastDestroyedFocusedChipIndex = null;
  1122. }
  1123. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipSet, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
  1124. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MatChipSet, selector: "mat-chip-set", inputs: { disabled: "disabled", role: "role" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "attr.role": "role" }, classAttribute: "mat-mdc-chip-set mdc-evolution-chip-set" }, queries: [{ propertyName: "_chips", predicate: MatChip, descendants: true }], usesInheritance: true, ngImport: i0, template: `
  1125. <div class="mdc-evolution-chip-set__chips" role="presentation">
  1126. <ng-content></ng-content>
  1127. </div>
  1128. `, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
  1129. }
  1130. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipSet, decorators: [{
  1131. type: Component,
  1132. args: [{ selector: 'mat-chip-set', template: `
  1133. <div class="mdc-evolution-chip-set__chips" role="presentation">
  1134. <ng-content></ng-content>
  1135. </div>
  1136. `, host: {
  1137. 'class': 'mat-mdc-chip-set mdc-evolution-chip-set',
  1138. '(keydown)': '_handleKeydown($event)',
  1139. '[attr.role]': 'role',
  1140. }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}"] }]
  1141. }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Directionality, decorators: [{
  1142. type: Optional
  1143. }] }]; }, propDecorators: { disabled: [{
  1144. type: Input
  1145. }], role: [{
  1146. type: Input
  1147. }], _chips: [{
  1148. type: ContentChildren,
  1149. args: [MatChip, {
  1150. // We need to use `descendants: true`, because Ivy will no longer match
  1151. // indirect descendants if it's left as false.
  1152. descendants: true,
  1153. }]
  1154. }] } });
  1155. /** Change event object that is emitted when the chip listbox value has changed. */
  1156. class MatChipListboxChange {
  1157. constructor(
  1158. /** Chip listbox that emitted the event. */
  1159. source,
  1160. /** Value of the chip listbox when the event was emitted. */
  1161. value) {
  1162. this.source = source;
  1163. this.value = value;
  1164. }
  1165. }
  1166. /**
  1167. * Provider Expression that allows mat-chip-listbox to register as a ControlValueAccessor.
  1168. * This allows it to support [(ngModel)].
  1169. * @docs-private
  1170. */
  1171. const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR = {
  1172. provide: NG_VALUE_ACCESSOR,
  1173. useExisting: forwardRef(() => MatChipListbox),
  1174. multi: true,
  1175. };
  1176. /**
  1177. * An extension of the MatChipSet component that supports chip selection.
  1178. * Used with MatChipOption chips.
  1179. */
  1180. class MatChipListbox extends MatChipSet {
  1181. constructor() {
  1182. super(...arguments);
  1183. /**
  1184. * Function when touched. Set as part of ControlValueAccessor implementation.
  1185. * @docs-private
  1186. */
  1187. this._onTouched = () => { };
  1188. /**
  1189. * Function when changed. Set as part of ControlValueAccessor implementation.
  1190. * @docs-private
  1191. */
  1192. this._onChange = () => { };
  1193. // TODO: MDC uses `grid` here
  1194. this._defaultRole = 'listbox';
  1195. /** Default chip options. */
  1196. this._defaultOptions = inject(MAT_CHIPS_DEFAULT_OPTIONS, { optional: true });
  1197. this._multiple = false;
  1198. /** Orientation of the chip list. */
  1199. this.ariaOrientation = 'horizontal';
  1200. this._selectable = true;
  1201. /**
  1202. * A function to compare the option values with the selected values. The first argument
  1203. * is a value from an option. The second is a value from the selection. A boolean
  1204. * should be returned.
  1205. */
  1206. this.compareWith = (o1, o2) => o1 === o2;
  1207. this._required = false;
  1208. this._hideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
  1209. /** Event emitted when the selected chip listbox value has been changed by the user. */
  1210. this.change = new EventEmitter();
  1211. this._chips = undefined;
  1212. }
  1213. /** Whether the user should be allowed to select multiple chips. */
  1214. get multiple() {
  1215. return this._multiple;
  1216. }
  1217. set multiple(value) {
  1218. this._multiple = coerceBooleanProperty(value);
  1219. this._syncListboxProperties();
  1220. }
  1221. /** The array of selected chips inside the chip listbox. */
  1222. get selected() {
  1223. const selectedChips = this._chips.toArray().filter(chip => chip.selected);
  1224. return this.multiple ? selectedChips : selectedChips[0];
  1225. }
  1226. /**
  1227. * Whether or not this chip listbox is selectable.
  1228. *
  1229. * When a chip listbox is not selectable, the selected states for all
  1230. * the chips inside the chip listbox are always ignored.
  1231. */
  1232. get selectable() {
  1233. return this._selectable;
  1234. }
  1235. set selectable(value) {
  1236. this._selectable = coerceBooleanProperty(value);
  1237. this._syncListboxProperties();
  1238. }
  1239. /** Whether this chip listbox is required. */
  1240. get required() {
  1241. return this._required;
  1242. }
  1243. set required(value) {
  1244. this._required = coerceBooleanProperty(value);
  1245. }
  1246. /** Whether checkmark indicator for single-selection options is hidden. */
  1247. get hideSingleSelectionIndicator() {
  1248. return this._hideSingleSelectionIndicator;
  1249. }
  1250. set hideSingleSelectionIndicator(value) {
  1251. this._hideSingleSelectionIndicator = coerceBooleanProperty(value);
  1252. this._syncListboxProperties();
  1253. }
  1254. /** Combined stream of all of the child chips' selection change events. */
  1255. get chipSelectionChanges() {
  1256. return this._getChipStream(chip => chip.selectionChange);
  1257. }
  1258. /** Combined stream of all of the child chips' blur events. */
  1259. get chipBlurChanges() {
  1260. return this._getChipStream(chip => chip._onBlur);
  1261. }
  1262. /** The value of the listbox, which is the combined value of the selected chips. */
  1263. get value() {
  1264. return this._value;
  1265. }
  1266. set value(value) {
  1267. this.writeValue(value);
  1268. this._value = value;
  1269. }
  1270. ngAfterContentInit() {
  1271. if (this._pendingInitialValue !== undefined) {
  1272. Promise.resolve().then(() => {
  1273. this._setSelectionByValue(this._pendingInitialValue, false);
  1274. this._pendingInitialValue = undefined;
  1275. });
  1276. }
  1277. this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
  1278. // Update listbox selectable/multiple properties on chips
  1279. this._syncListboxProperties();
  1280. });
  1281. this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());
  1282. this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe(event => {
  1283. if (!this.multiple) {
  1284. this._chips.forEach(chip => {
  1285. if (chip !== event.source) {
  1286. chip._setSelectedState(false, false, false);
  1287. }
  1288. });
  1289. }
  1290. if (event.isUserInput) {
  1291. this._propagateChanges();
  1292. }
  1293. });
  1294. }
  1295. /**
  1296. * Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
  1297. * are no selected chips.
  1298. */
  1299. focus() {
  1300. if (this.disabled) {
  1301. return;
  1302. }
  1303. const firstSelectedChip = this._getFirstSelectedChip();
  1304. if (firstSelectedChip && !firstSelectedChip.disabled) {
  1305. firstSelectedChip.focus();
  1306. }
  1307. else if (this._chips.length > 0) {
  1308. this._keyManager.setFirstItemActive();
  1309. }
  1310. else {
  1311. this._elementRef.nativeElement.focus();
  1312. }
  1313. }
  1314. /**
  1315. * Implemented as part of ControlValueAccessor.
  1316. * @docs-private
  1317. */
  1318. writeValue(value) {
  1319. if (this._chips) {
  1320. this._setSelectionByValue(value, false);
  1321. }
  1322. else if (value != null) {
  1323. this._pendingInitialValue = value;
  1324. }
  1325. }
  1326. /**
  1327. * Implemented as part of ControlValueAccessor.
  1328. * @docs-private
  1329. */
  1330. registerOnChange(fn) {
  1331. this._onChange = fn;
  1332. }
  1333. /**
  1334. * Implemented as part of ControlValueAccessor.
  1335. * @docs-private
  1336. */
  1337. registerOnTouched(fn) {
  1338. this._onTouched = fn;
  1339. }
  1340. /**
  1341. * Implemented as part of ControlValueAccessor.
  1342. * @docs-private
  1343. */
  1344. setDisabledState(isDisabled) {
  1345. this.disabled = isDisabled;
  1346. }
  1347. /** Selects all chips with value. */
  1348. _setSelectionByValue(value, isUserInput = true) {
  1349. this._clearSelection();
  1350. if (Array.isArray(value)) {
  1351. value.forEach(currentValue => this._selectValue(currentValue, isUserInput));
  1352. }
  1353. else {
  1354. this._selectValue(value, isUserInput);
  1355. }
  1356. }
  1357. /** When blurred, marks the field as touched when focus moved outside the chip listbox. */
  1358. _blur() {
  1359. if (!this.disabled) {
  1360. // Wait to see if focus moves to an individual chip.
  1361. setTimeout(() => {
  1362. if (!this.focused) {
  1363. this._markAsTouched();
  1364. }
  1365. });
  1366. }
  1367. }
  1368. _keydown(event) {
  1369. if (event.keyCode === TAB) {
  1370. super._allowFocusEscape();
  1371. }
  1372. }
  1373. /** Marks the field as touched */
  1374. _markAsTouched() {
  1375. this._onTouched();
  1376. this._changeDetectorRef.markForCheck();
  1377. }
  1378. /** Emits change event to set the model value. */
  1379. _propagateChanges() {
  1380. let valueToEmit = null;
  1381. if (Array.isArray(this.selected)) {
  1382. valueToEmit = this.selected.map(chip => chip.value);
  1383. }
  1384. else {
  1385. valueToEmit = this.selected ? this.selected.value : undefined;
  1386. }
  1387. this._value = valueToEmit;
  1388. this.change.emit(new MatChipListboxChange(this, valueToEmit));
  1389. this._onChange(valueToEmit);
  1390. this._changeDetectorRef.markForCheck();
  1391. }
  1392. /**
  1393. * Deselects every chip in the listbox.
  1394. * @param skip Chip that should not be deselected.
  1395. */
  1396. _clearSelection(skip) {
  1397. this._chips.forEach(chip => {
  1398. if (chip !== skip) {
  1399. chip.deselect();
  1400. }
  1401. });
  1402. }
  1403. /**
  1404. * Finds and selects the chip based on its value.
  1405. * @returns Chip that has the corresponding value.
  1406. */
  1407. _selectValue(value, isUserInput) {
  1408. const correspondingChip = this._chips.find(chip => {
  1409. return chip.value != null && this.compareWith(chip.value, value);
  1410. });
  1411. if (correspondingChip) {
  1412. isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();
  1413. }
  1414. return correspondingChip;
  1415. }
  1416. /** Syncs the chip-listbox selection state with the individual chips. */
  1417. _syncListboxProperties() {
  1418. if (this._chips) {
  1419. // Defer setting the value in order to avoid the "Expression
  1420. // has changed after it was checked" errors from Angular.
  1421. Promise.resolve().then(() => {
  1422. this._chips.forEach(chip => {
  1423. chip._chipListMultiple = this.multiple;
  1424. chip.chipListSelectable = this._selectable;
  1425. chip._chipListHideSingleSelectionIndicator = this.hideSingleSelectionIndicator;
  1426. chip._changeDetectorRef.markForCheck();
  1427. });
  1428. });
  1429. }
  1430. }
  1431. /** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
  1432. _getFirstSelectedChip() {
  1433. if (Array.isArray(this.selected)) {
  1434. return this.selected.length ? this.selected[0] : undefined;
  1435. }
  1436. else {
  1437. return this.selected;
  1438. }
  1439. }
  1440. /**
  1441. * Determines if key manager should avoid putting a given chip action in the tab index. Skip
  1442. * non-interactive actions since the user can't do anything with them.
  1443. */
  1444. _skipPredicate(action) {
  1445. // Override the skip predicate in the base class to avoid skipping disabled chips. Allow
  1446. // disabled chip options to receive focus to align with WAI ARIA recommendation. Normally WAI
  1447. // ARIA's instructions are to exclude disabled items from the tab order, but it makes a few
  1448. // exceptions for compound widgets.
  1449. //
  1450. // From [Developing a Keyboard Interface](
  1451. // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):
  1452. // "For the following composite widget elements, keep them focusable when disabled: Options in a
  1453. // Listbox..."
  1454. return !action.isInteractive;
  1455. }
  1456. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipListbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
  1457. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MatChipListbox, selector: "mat-chip-listbox", inputs: { tabIndex: "tabIndex", multiple: "multiple", ariaOrientation: ["aria-orientation", "ariaOrientation"], selectable: "selectable", compareWith: "compareWith", required: "required", hideSingleSelectionIndicator: "hideSingleSelectionIndicator", value: "value" }, outputs: { change: "change" }, host: { attributes: { "ngSkipHydration": "" }, listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "attr.role": "role", "tabIndex": "empty ? -1 : tabIndex", "attr.aria-describedby": "_ariaDescribedby || null", "attr.aria-required": "role ? required : null", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "ariaOrientation", "class.mat-mdc-chip-list-disabled": "disabled", "class.mat-mdc-chip-list-required": "required" }, classAttribute: "mdc-evolution-chip-set mat-mdc-chip-listbox" }, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "_chips", predicate: MatChipOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
  1458. <div class="mdc-evolution-chip-set__chips" role="presentation">
  1459. <ng-content></ng-content>
  1460. </div>
  1461. `, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
  1462. }
  1463. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipListbox, decorators: [{
  1464. type: Component,
  1465. args: [{ selector: 'mat-chip-listbox', template: `
  1466. <div class="mdc-evolution-chip-set__chips" role="presentation">
  1467. <ng-content></ng-content>
  1468. </div>
  1469. `, inputs: ['tabIndex'], host: {
  1470. 'class': 'mdc-evolution-chip-set mat-mdc-chip-listbox',
  1471. '[attr.role]': 'role',
  1472. '[tabIndex]': 'empty ? -1 : tabIndex',
  1473. // TODO: replace this binding with use of AriaDescriber
  1474. '[attr.aria-describedby]': '_ariaDescribedby || null',
  1475. '[attr.aria-required]': 'role ? required : null',
  1476. '[attr.aria-disabled]': 'disabled.toString()',
  1477. '[attr.aria-multiselectable]': 'multiple',
  1478. '[attr.aria-orientation]': 'ariaOrientation',
  1479. 'ngSkipHydration': '',
  1480. '[class.mat-mdc-chip-list-disabled]': 'disabled',
  1481. '[class.mat-mdc-chip-list-required]': 'required',
  1482. '(focus)': 'focus()',
  1483. '(blur)': '_blur()',
  1484. '(keydown)': '_keydown($event)',
  1485. }, providers: [MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}"] }]
  1486. }], propDecorators: { multiple: [{
  1487. type: Input
  1488. }], ariaOrientation: [{
  1489. type: Input,
  1490. args: ['aria-orientation']
  1491. }], selectable: [{
  1492. type: Input
  1493. }], compareWith: [{
  1494. type: Input
  1495. }], required: [{
  1496. type: Input
  1497. }], hideSingleSelectionIndicator: [{
  1498. type: Input
  1499. }], value: [{
  1500. type: Input
  1501. }], change: [{
  1502. type: Output
  1503. }], _chips: [{
  1504. type: ContentChildren,
  1505. args: [MatChipOption, {
  1506. // We need to use `descendants: true`, because Ivy will no longer match
  1507. // indirect descendants if it's left as false.
  1508. descendants: true,
  1509. }]
  1510. }] } });
  1511. /** Change event object that is emitted when the chip grid value has changed. */
  1512. class MatChipGridChange {
  1513. constructor(
  1514. /** Chip grid that emitted the event. */
  1515. source,
  1516. /** Value of the chip grid when the event was emitted. */
  1517. value) {
  1518. this.source = source;
  1519. this.value = value;
  1520. }
  1521. }
  1522. /**
  1523. * Boilerplate for applying mixins to MatChipGrid.
  1524. * @docs-private
  1525. */
  1526. class MatChipGridBase extends MatChipSet {
  1527. constructor(elementRef, changeDetectorRef, dir, _defaultErrorStateMatcher, _parentForm, _parentFormGroup,
  1528. /**
  1529. * Form control bound to the component.
  1530. * Implemented as part of `MatFormFieldControl`.
  1531. * @docs-private
  1532. */
  1533. ngControl) {
  1534. super(elementRef, changeDetectorRef, dir);
  1535. this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
  1536. this._parentForm = _parentForm;
  1537. this._parentFormGroup = _parentFormGroup;
  1538. this.ngControl = ngControl;
  1539. /**
  1540. * Emits whenever the component state changes and should cause the parent
  1541. * form-field to update. Implemented as part of `MatFormFieldControl`.
  1542. * @docs-private
  1543. */
  1544. this.stateChanges = new Subject();
  1545. }
  1546. }
  1547. const _MatChipGridMixinBase = mixinErrorState(MatChipGridBase);
  1548. /**
  1549. * An extension of the MatChipSet component used with MatChipRow chips and
  1550. * the matChipInputFor directive.
  1551. */
  1552. class MatChipGrid extends _MatChipGridMixinBase {
  1553. /**
  1554. * Implemented as part of MatFormFieldControl.
  1555. * @docs-private
  1556. */
  1557. get disabled() {
  1558. return this.ngControl ? !!this.ngControl.disabled : this._disabled;
  1559. }
  1560. set disabled(value) {
  1561. this._disabled = coerceBooleanProperty(value);
  1562. this._syncChipsState();
  1563. }
  1564. /**
  1565. * Implemented as part of MatFormFieldControl.
  1566. * @docs-private
  1567. */
  1568. get id() {
  1569. return this._chipInput.id;
  1570. }
  1571. /**
  1572. * Implemented as part of MatFormFieldControl.
  1573. * @docs-private
  1574. */
  1575. get empty() {
  1576. return ((!this._chipInput || this._chipInput.empty) && (!this._chips || this._chips.length === 0));
  1577. }
  1578. /**
  1579. * Implemented as part of MatFormFieldControl.
  1580. * @docs-private
  1581. */
  1582. get placeholder() {
  1583. return this._chipInput ? this._chipInput.placeholder : this._placeholder;
  1584. }
  1585. set placeholder(value) {
  1586. this._placeholder = value;
  1587. this.stateChanges.next();
  1588. }
  1589. /** Whether any chips or the matChipInput inside of this chip-grid has focus. */
  1590. get focused() {
  1591. return this._chipInput.focused || this._hasFocusedChip();
  1592. }
  1593. /**
  1594. * Implemented as part of MatFormFieldControl.
  1595. * @docs-private
  1596. */
  1597. get required() {
  1598. return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
  1599. }
  1600. set required(value) {
  1601. this._required = coerceBooleanProperty(value);
  1602. this.stateChanges.next();
  1603. }
  1604. /**
  1605. * Implemented as part of MatFormFieldControl.
  1606. * @docs-private
  1607. */
  1608. get shouldLabelFloat() {
  1609. return !this.empty || this.focused;
  1610. }
  1611. /**
  1612. * Implemented as part of MatFormFieldControl.
  1613. * @docs-private
  1614. */
  1615. get value() {
  1616. return this._value;
  1617. }
  1618. set value(value) {
  1619. this._value = value;
  1620. }
  1621. /** Combined stream of all of the child chips' blur events. */
  1622. get chipBlurChanges() {
  1623. return this._getChipStream(chip => chip._onBlur);
  1624. }
  1625. constructor(elementRef, changeDetectorRef, dir, parentForm, parentFormGroup, defaultErrorStateMatcher, ngControl) {
  1626. super(elementRef, changeDetectorRef, dir, defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
  1627. /**
  1628. * Implemented as part of MatFormFieldControl.
  1629. * @docs-private
  1630. */
  1631. this.controlType = 'mat-chip-grid';
  1632. this._defaultRole = 'grid';
  1633. /**
  1634. * List of element ids to propagate to the chipInput's aria-describedby attribute.
  1635. */
  1636. this._ariaDescribedbyIds = [];
  1637. /**
  1638. * Function when touched. Set as part of ControlValueAccessor implementation.
  1639. * @docs-private
  1640. */
  1641. this._onTouched = () => { };
  1642. /**
  1643. * Function when changed. Set as part of ControlValueAccessor implementation.
  1644. * @docs-private
  1645. */
  1646. this._onChange = () => { };
  1647. this._value = [];
  1648. /** Emits when the chip grid value has been changed by the user. */
  1649. this.change = new EventEmitter();
  1650. /**
  1651. * Emits whenever the raw value of the chip-grid changes. This is here primarily
  1652. * to facilitate the two-way binding for the `value` input.
  1653. * @docs-private
  1654. */
  1655. this.valueChange = new EventEmitter();
  1656. this._chips = undefined;
  1657. if (this.ngControl) {
  1658. this.ngControl.valueAccessor = this;
  1659. }
  1660. }
  1661. ngAfterContentInit() {
  1662. this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
  1663. this._blur();
  1664. this.stateChanges.next();
  1665. });
  1666. merge(this.chipFocusChanges, this._chips.changes)
  1667. .pipe(takeUntil(this._destroyed))
  1668. .subscribe(() => this.stateChanges.next());
  1669. }
  1670. ngAfterViewInit() {
  1671. super.ngAfterViewInit();
  1672. if (!this._chipInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
  1673. throw Error('mat-chip-grid must be used in combination with matChipInputFor.');
  1674. }
  1675. }
  1676. ngDoCheck() {
  1677. if (this.ngControl) {
  1678. // We need to re-evaluate this on every change detection cycle, because there are some
  1679. // error triggers that we can't subscribe to (e.g. parent form submissions). This means
  1680. // that whatever logic is in here has to be super lean or we risk destroying the performance.
  1681. this.updateErrorState();
  1682. }
  1683. }
  1684. ngOnDestroy() {
  1685. super.ngOnDestroy();
  1686. this.stateChanges.complete();
  1687. }
  1688. /** Associates an HTML input element with this chip grid. */
  1689. registerInput(inputElement) {
  1690. this._chipInput = inputElement;
  1691. this._chipInput.setDescribedByIds(this._ariaDescribedbyIds);
  1692. }
  1693. /**
  1694. * Implemented as part of MatFormFieldControl.
  1695. * @docs-private
  1696. */
  1697. onContainerClick(event) {
  1698. if (!this.disabled && !this._originatesFromChip(event)) {
  1699. this.focus();
  1700. }
  1701. }
  1702. /**
  1703. * Focuses the first chip in this chip grid, or the associated input when there
  1704. * are no eligible chips.
  1705. */
  1706. focus() {
  1707. if (this.disabled || this._chipInput.focused) {
  1708. return;
  1709. }
  1710. if (!this._chips.length || this._chips.first.disabled) {
  1711. // Delay until the next tick, because this can cause a "changed after checked"
  1712. // error if the input does something on focus (e.g. opens an autocomplete).
  1713. Promise.resolve().then(() => this._chipInput.focus());
  1714. }
  1715. else if (this._chips.length) {
  1716. this._keyManager.setFirstItemActive();
  1717. }
  1718. this.stateChanges.next();
  1719. }
  1720. /**
  1721. * Implemented as part of MatFormFieldControl.
  1722. * @docs-private
  1723. */
  1724. setDescribedByIds(ids) {
  1725. // We must keep this up to date to handle the case where ids are set
  1726. // before the chip input is registered.
  1727. this._ariaDescribedbyIds = ids;
  1728. this._chipInput?.setDescribedByIds(ids);
  1729. }
  1730. /**
  1731. * Implemented as part of ControlValueAccessor.
  1732. * @docs-private
  1733. */
  1734. writeValue(value) {
  1735. // The user is responsible for creating the child chips, so we just store the value.
  1736. this._value = value;
  1737. }
  1738. /**
  1739. * Implemented as part of ControlValueAccessor.
  1740. * @docs-private
  1741. */
  1742. registerOnChange(fn) {
  1743. this._onChange = fn;
  1744. }
  1745. /**
  1746. * Implemented as part of ControlValueAccessor.
  1747. * @docs-private
  1748. */
  1749. registerOnTouched(fn) {
  1750. this._onTouched = fn;
  1751. }
  1752. /**
  1753. * Implemented as part of ControlValueAccessor.
  1754. * @docs-private
  1755. */
  1756. setDisabledState(isDisabled) {
  1757. this.disabled = isDisabled;
  1758. this.stateChanges.next();
  1759. }
  1760. /** When blurred, mark the field as touched when focus moved outside the chip grid. */
  1761. _blur() {
  1762. if (!this.disabled) {
  1763. // Check whether the focus moved to chip input.
  1764. // If the focus is not moved to chip input, mark the field as touched. If the focus moved
  1765. // to chip input, do nothing.
  1766. // Timeout is needed to wait for the focus() event trigger on chip input.
  1767. setTimeout(() => {
  1768. if (!this.focused) {
  1769. this._propagateChanges();
  1770. this._markAsTouched();
  1771. }
  1772. });
  1773. }
  1774. }
  1775. /**
  1776. * Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the
  1777. * user to tab out of it. This prevents the grid from capturing focus and redirecting
  1778. * it back to the first chip, creating a focus trap, if it user tries to tab away.
  1779. */
  1780. _allowFocusEscape() {
  1781. if (!this._chipInput.focused) {
  1782. super._allowFocusEscape();
  1783. }
  1784. }
  1785. /** Handles custom keyboard events. */
  1786. _handleKeydown(event) {
  1787. if (event.keyCode === TAB) {
  1788. if (this._chipInput.focused &&
  1789. hasModifierKey(event, 'shiftKey') &&
  1790. this._chips.length &&
  1791. !this._chips.last.disabled) {
  1792. event.preventDefault();
  1793. if (this._keyManager.activeItem) {
  1794. this._keyManager.setActiveItem(this._keyManager.activeItem);
  1795. }
  1796. else {
  1797. this._focusLastChip();
  1798. }
  1799. }
  1800. else {
  1801. // Use the super method here since it doesn't check for the input
  1802. // focused state. This allows focus to escape if there's only one
  1803. // disabled chip left in the list.
  1804. super._allowFocusEscape();
  1805. }
  1806. }
  1807. else if (!this._chipInput.focused) {
  1808. super._handleKeydown(event);
  1809. }
  1810. this.stateChanges.next();
  1811. }
  1812. _focusLastChip() {
  1813. if (this._chips.length) {
  1814. this._chips.last.focus();
  1815. }
  1816. }
  1817. /** Emits change event to set the model value. */
  1818. _propagateChanges() {
  1819. const valueToEmit = this._chips.length ? this._chips.toArray().map(chip => chip.value) : [];
  1820. this._value = valueToEmit;
  1821. this.change.emit(new MatChipGridChange(this, valueToEmit));
  1822. this.valueChange.emit(valueToEmit);
  1823. this._onChange(valueToEmit);
  1824. this._changeDetectorRef.markForCheck();
  1825. }
  1826. /** Mark the field as touched */
  1827. _markAsTouched() {
  1828. this._onTouched();
  1829. this._changeDetectorRef.markForCheck();
  1830. this.stateChanges.next();
  1831. }
  1832. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipGrid, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Directionality, optional: true }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i3.ErrorStateMatcher }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
  1833. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: MatChipGrid, selector: "mat-chip-grid", inputs: { tabIndex: "tabIndex", disabled: "disabled", placeholder: "placeholder", required: "required", value: "value", errorStateMatcher: "errorStateMatcher" }, outputs: { change: "change", valueChange: "valueChange" }, host: { listeners: { "focus": "focus()", "blur": "_blur()" }, properties: { "attr.role": "role", "tabIndex": "_chips && _chips.length === 0 ? -1 : tabIndex", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "class.mat-mdc-chip-list-disabled": "disabled", "class.mat-mdc-chip-list-invalid": "errorState", "class.mat-mdc-chip-list-required": "required" }, classAttribute: "mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set" }, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], queries: [{ propertyName: "_chips", predicate: MatChipRow, descendants: true }], usesInheritance: true, ngImport: i0, template: `
  1834. <div class="mdc-evolution-chip-set__chips" role="presentation">
  1835. <ng-content></ng-content>
  1836. </div>
  1837. `, isInline: true, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
  1838. }
  1839. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipGrid, decorators: [{
  1840. type: Component,
  1841. args: [{ selector: 'mat-chip-grid', template: `
  1842. <div class="mdc-evolution-chip-set__chips" role="presentation">
  1843. <ng-content></ng-content>
  1844. </div>
  1845. `, inputs: ['tabIndex'], host: {
  1846. 'class': 'mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set',
  1847. '[attr.role]': 'role',
  1848. '[tabIndex]': '_chips && _chips.length === 0 ? -1 : tabIndex',
  1849. '[attr.aria-disabled]': 'disabled.toString()',
  1850. '[attr.aria-invalid]': 'errorState',
  1851. '[class.mat-mdc-chip-list-disabled]': 'disabled',
  1852. '[class.mat-mdc-chip-list-invalid]': 'errorState',
  1853. '[class.mat-mdc-chip-list-required]': 'required',
  1854. '(focus)': 'focus()',
  1855. '(blur)': '_blur()',
  1856. }, providers: [{ provide: MatFormFieldControl, useExisting: MatChipGrid }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mdc-evolution-chip-set{display:flex}.mdc-evolution-chip-set:focus{outline:none}.mdc-evolution-chip-set__chips{display:flex;flex-flow:wrap;min-width:0}.mdc-evolution-chip-set--overflow .mdc-evolution-chip-set__chips{flex-flow:nowrap}.mdc-evolution-chip-set .mdc-evolution-chip-set__chips{margin-left:-8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip-set__chips,.mdc-evolution-chip-set .mdc-evolution-chip-set__chips[dir=rtl]{margin-left:0;margin-right:-8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-left:8px;margin-right:0}[dir=rtl] .mdc-evolution-chip-set .mdc-evolution-chip,.mdc-evolution-chip-set .mdc-evolution-chip[dir=rtl]{margin-left:0;margin-right:8px}.mdc-evolution-chip-set .mdc-evolution-chip{margin-top:4px;margin-bottom:4px}.mat-mdc-chip-set .mdc-evolution-chip-set__chips{min-width:100%}.mat-mdc-chip-set-stacked{flex-direction:column;align-items:flex-start}.mat-mdc-chip-set-stacked .mat-mdc-chip{width:100%}.mat-mdc-chip-set-stacked .mdc-evolution-chip__graphic{flex-grow:0}.mat-mdc-chip-set-stacked .mdc-evolution-chip__action--primary{flex-basis:100%;justify-content:start}input.mat-mdc-chip-input{flex:1 0 150px;margin-left:8px}[dir=rtl] input.mat-mdc-chip-input{margin-left:0;margin-right:8px}"] }]
  1857. }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Directionality, decorators: [{
  1858. type: Optional
  1859. }] }, { type: i2$1.NgForm, decorators: [{
  1860. type: Optional
  1861. }] }, { type: i2$1.FormGroupDirective, decorators: [{
  1862. type: Optional
  1863. }] }, { type: i3.ErrorStateMatcher }, { type: i2$1.NgControl, decorators: [{
  1864. type: Optional
  1865. }, {
  1866. type: Self
  1867. }] }]; }, propDecorators: { disabled: [{
  1868. type: Input
  1869. }], placeholder: [{
  1870. type: Input
  1871. }], required: [{
  1872. type: Input
  1873. }], value: [{
  1874. type: Input
  1875. }], errorStateMatcher: [{
  1876. type: Input
  1877. }], change: [{
  1878. type: Output
  1879. }], valueChange: [{
  1880. type: Output
  1881. }], _chips: [{
  1882. type: ContentChildren,
  1883. args: [MatChipRow, {
  1884. // We need to use `descendants: true`, because Ivy will no longer match
  1885. // indirect descendants if it's left as false.
  1886. descendants: true,
  1887. }]
  1888. }] } });
  1889. // Increasing integer for generating unique ids.
  1890. let nextUniqueId = 0;
  1891. /**
  1892. * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.
  1893. * May be placed inside or outside of a `<mat-chip-grid>`.
  1894. */
  1895. class MatChipInput {
  1896. /** Register input for chip list */
  1897. set chipGrid(value) {
  1898. if (value) {
  1899. this._chipGrid = value;
  1900. this._chipGrid.registerInput(this);
  1901. }
  1902. }
  1903. /**
  1904. * Whether or not the chipEnd event will be emitted when the input is blurred.
  1905. */
  1906. get addOnBlur() {
  1907. return this._addOnBlur;
  1908. }
  1909. set addOnBlur(value) {
  1910. this._addOnBlur = coerceBooleanProperty(value);
  1911. }
  1912. /** Whether the input is disabled. */
  1913. get disabled() {
  1914. return this._disabled || (this._chipGrid && this._chipGrid.disabled);
  1915. }
  1916. set disabled(value) {
  1917. this._disabled = coerceBooleanProperty(value);
  1918. }
  1919. /** Whether the input is empty. */
  1920. get empty() {
  1921. return !this.inputElement.value;
  1922. }
  1923. constructor(_elementRef, defaultOptions, formField) {
  1924. this._elementRef = _elementRef;
  1925. /** Whether the control is focused. */
  1926. this.focused = false;
  1927. this._addOnBlur = false;
  1928. /** Emitted when a chip is to be added. */
  1929. this.chipEnd = new EventEmitter();
  1930. /** The input's placeholder text. */
  1931. this.placeholder = '';
  1932. /** Unique id for the input. */
  1933. this.id = `mat-mdc-chip-list-input-${nextUniqueId++}`;
  1934. this._disabled = false;
  1935. this.inputElement = this._elementRef.nativeElement;
  1936. this.separatorKeyCodes = defaultOptions.separatorKeyCodes;
  1937. if (formField) {
  1938. this.inputElement.classList.add('mat-mdc-form-field-input-control');
  1939. }
  1940. }
  1941. ngOnChanges() {
  1942. this._chipGrid.stateChanges.next();
  1943. }
  1944. ngOnDestroy() {
  1945. this.chipEnd.complete();
  1946. }
  1947. ngAfterContentInit() {
  1948. this._focusLastChipOnBackspace = this.empty;
  1949. }
  1950. /** Utility method to make host definition/tests more clear. */
  1951. _keydown(event) {
  1952. if (event) {
  1953. // To prevent the user from accidentally deleting chips when pressing BACKSPACE continuously,
  1954. // We focus the last chip on backspace only after the user has released the backspace button,
  1955. // And the input is empty (see behaviour in _keyup)
  1956. if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
  1957. this._chipGrid._focusLastChip();
  1958. event.preventDefault();
  1959. return;
  1960. }
  1961. else {
  1962. this._focusLastChipOnBackspace = false;
  1963. }
  1964. }
  1965. this._emitChipEnd(event);
  1966. }
  1967. /**
  1968. * Pass events to the keyboard manager. Available here for tests.
  1969. */
  1970. _keyup(event) {
  1971. // Allow user to move focus to chips next time he presses backspace
  1972. if (!this._focusLastChipOnBackspace && event.keyCode === BACKSPACE && this.empty) {
  1973. this._focusLastChipOnBackspace = true;
  1974. event.preventDefault();
  1975. }
  1976. }
  1977. /** Checks to see if the blur should emit the (chipEnd) event. */
  1978. _blur() {
  1979. if (this.addOnBlur) {
  1980. this._emitChipEnd();
  1981. }
  1982. this.focused = false;
  1983. // Blur the chip list if it is not focused
  1984. if (!this._chipGrid.focused) {
  1985. this._chipGrid._blur();
  1986. }
  1987. this._chipGrid.stateChanges.next();
  1988. }
  1989. _focus() {
  1990. this.focused = true;
  1991. this._focusLastChipOnBackspace = this.empty;
  1992. this._chipGrid.stateChanges.next();
  1993. }
  1994. /** Checks to see if the (chipEnd) event needs to be emitted. */
  1995. _emitChipEnd(event) {
  1996. if (!event || this._isSeparatorKey(event)) {
  1997. this.chipEnd.emit({
  1998. input: this.inputElement,
  1999. value: this.inputElement.value,
  2000. chipInput: this,
  2001. });
  2002. event?.preventDefault();
  2003. }
  2004. }
  2005. _onInput() {
  2006. // Let chip list know whenever the value changes.
  2007. this._chipGrid.stateChanges.next();
  2008. }
  2009. /** Focuses the input. */
  2010. focus() {
  2011. this.inputElement.focus();
  2012. }
  2013. /** Clears the input */
  2014. clear() {
  2015. this.inputElement.value = '';
  2016. this._focusLastChipOnBackspace = true;
  2017. }
  2018. setDescribedByIds(ids) {
  2019. const element = this._elementRef.nativeElement;
  2020. // Set the value directly in the DOM since this binding
  2021. // is prone to "changed after checked" errors.
  2022. if (ids.length) {
  2023. element.setAttribute('aria-describedby', ids.join(' '));
  2024. }
  2025. else {
  2026. element.removeAttribute('aria-describedby');
  2027. }
  2028. }
  2029. /** Checks whether a keycode is one of the configured separators. */
  2030. _isSeparatorKey(event) {
  2031. return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
  2032. }
  2033. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipInput, deps: [{ token: i0.ElementRef }, { token: MAT_CHIPS_DEFAULT_OPTIONS }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
  2034. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: MatChipInput, selector: "input[matChipInputFor]", inputs: { chipGrid: ["matChipInputFor", "chipGrid"], addOnBlur: ["matChipInputAddOnBlur", "addOnBlur"], separatorKeyCodes: ["matChipInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", disabled: "disabled" }, outputs: { chipEnd: "matChipInputTokenEnd" }, host: { listeners: { "keydown": "_keydown($event)", "keyup": "_keyup($event)", "blur": "_blur()", "focus": "_focus()", "input": "_onInput()" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null", "attr.aria-invalid": "_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null", "attr.aria-required": "_chipGrid && _chipGrid.required || null", "attr.required": "_chipGrid && _chipGrid.required || null" }, classAttribute: "mat-mdc-chip-input mat-mdc-input-element mdc-text-field__input mat-input-element" }, exportAs: ["matChipInput", "matChipInputFor"], usesOnChanges: true, ngImport: i0 }); }
  2035. }
  2036. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipInput, decorators: [{
  2037. type: Directive,
  2038. args: [{
  2039. selector: 'input[matChipInputFor]',
  2040. exportAs: 'matChipInput, matChipInputFor',
  2041. host: {
  2042. // TODO: eventually we should remove `mat-input-element` from here since it comes from the
  2043. // non-MDC version of the input. It's currently being kept for backwards compatibility, because
  2044. // the MDC chips were landed initially with it.
  2045. 'class': 'mat-mdc-chip-input mat-mdc-input-element mdc-text-field__input mat-input-element',
  2046. '(keydown)': '_keydown($event)',
  2047. '(keyup)': '_keyup($event)',
  2048. '(blur)': '_blur()',
  2049. '(focus)': '_focus()',
  2050. '(input)': '_onInput()',
  2051. '[id]': 'id',
  2052. '[attr.disabled]': 'disabled || null',
  2053. '[attr.placeholder]': 'placeholder || null',
  2054. '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null',
  2055. '[attr.aria-required]': '_chipGrid && _chipGrid.required || null',
  2056. '[attr.required]': '_chipGrid && _chipGrid.required || null',
  2057. },
  2058. }]
  2059. }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
  2060. type: Inject,
  2061. args: [MAT_CHIPS_DEFAULT_OPTIONS]
  2062. }] }, { type: i1$2.MatFormField, decorators: [{
  2063. type: Optional
  2064. }, {
  2065. type: Inject,
  2066. args: [MAT_FORM_FIELD]
  2067. }] }]; }, propDecorators: { chipGrid: [{
  2068. type: Input,
  2069. args: ['matChipInputFor']
  2070. }], addOnBlur: [{
  2071. type: Input,
  2072. args: ['matChipInputAddOnBlur']
  2073. }], separatorKeyCodes: [{
  2074. type: Input,
  2075. args: ['matChipInputSeparatorKeyCodes']
  2076. }], chipEnd: [{
  2077. type: Output,
  2078. args: ['matChipInputTokenEnd']
  2079. }], placeholder: [{
  2080. type: Input
  2081. }], id: [{
  2082. type: Input
  2083. }], disabled: [{
  2084. type: Input
  2085. }] } });
  2086. const CHIP_DECLARATIONS = [
  2087. MatChip,
  2088. MatChipAvatar,
  2089. MatChipEditInput,
  2090. MatChipGrid,
  2091. MatChipInput,
  2092. MatChipListbox,
  2093. MatChipOption,
  2094. MatChipRemove,
  2095. MatChipRow,
  2096. MatChipSet,
  2097. MatChipTrailingIcon,
  2098. ];
  2099. class MatChipsModule {
  2100. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
  2101. static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: MatChipsModule, declarations: [MatChipAction, MatChip,
  2102. MatChipAvatar,
  2103. MatChipEditInput,
  2104. MatChipGrid,
  2105. MatChipInput,
  2106. MatChipListbox,
  2107. MatChipOption,
  2108. MatChipRemove,
  2109. MatChipRow,
  2110. MatChipSet,
  2111. MatChipTrailingIcon], imports: [MatCommonModule, CommonModule, MatRippleModule], exports: [MatCommonModule, MatChip,
  2112. MatChipAvatar,
  2113. MatChipEditInput,
  2114. MatChipGrid,
  2115. MatChipInput,
  2116. MatChipListbox,
  2117. MatChipOption,
  2118. MatChipRemove,
  2119. MatChipRow,
  2120. MatChipSet,
  2121. MatChipTrailingIcon] }); }
  2122. static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipsModule, providers: [
  2123. ErrorStateMatcher,
  2124. {
  2125. provide: MAT_CHIPS_DEFAULT_OPTIONS,
  2126. useValue: {
  2127. separatorKeyCodes: [ENTER],
  2128. },
  2129. },
  2130. ], imports: [MatCommonModule, CommonModule, MatRippleModule, MatCommonModule] }); }
  2131. }
  2132. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MatChipsModule, decorators: [{
  2133. type: NgModule,
  2134. args: [{
  2135. imports: [MatCommonModule, CommonModule, MatRippleModule],
  2136. exports: [MatCommonModule, CHIP_DECLARATIONS],
  2137. declarations: [MatChipAction, CHIP_DECLARATIONS],
  2138. providers: [
  2139. ErrorStateMatcher,
  2140. {
  2141. provide: MAT_CHIPS_DEFAULT_OPTIONS,
  2142. useValue: {
  2143. separatorKeyCodes: [ENTER],
  2144. },
  2145. },
  2146. ],
  2147. }]
  2148. }] });
  2149. /**
  2150. * Generated bundle index. Do not edit.
  2151. */
  2152. export { MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRemove, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipsModule };
  2153. //# sourceMappingURL=chips.mjs.map