source: trip-planner-front/node_modules/@angular/material/__ivy_ngcc__/fesm2015/chips.js

Last change on this file was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 68.6 KB
Line 
1import { SPACE, BACKSPACE, DELETE, TAB, hasModifierKey, ENTER } from '@angular/cdk/keycodes';
2import { InjectionToken, Directive, EventEmitter, ElementRef, NgZone, Optional, Inject, ChangeDetectorRef, Attribute, ContentChild, Input, Output, Component, ViewEncapsulation, ChangeDetectionStrategy, Self, ContentChildren, NgModule } from '@angular/core';
3import { mixinTabIndex, mixinColor, mixinDisableRipple, RippleRenderer, MAT_RIPPLE_GLOBAL_OPTIONS, mixinErrorState, ErrorStateMatcher, MatCommonModule } from '@angular/material/core';
4import { coerceBooleanProperty } from '@angular/cdk/coercion';
5import { Platform } from '@angular/cdk/platform';
6import { DOCUMENT } from '@angular/common';
7import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
8import { Subject, merge } from 'rxjs';
9import { take, takeUntil, startWith } from 'rxjs/operators';
10import { FocusKeyManager } from '@angular/cdk/a11y';
11import { Directionality } from '@angular/cdk/bidi';
12import { SelectionModel } from '@angular/cdk/collections';
13import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
14import { MatFormFieldControl } from '@angular/material/form-field';
15
16/**
17 * @license
18 * Copyright Google LLC All Rights Reserved.
19 *
20 * Use of this source code is governed by an MIT-style license that can be
21 * found in the LICENSE file at https://angular.io/license
22 */
23/** Event object emitted by MatChip when selected or deselected. */
24import * as ɵngcc0 from '@angular/core';
25import * as ɵngcc1 from '@angular/cdk/platform';
26import * as ɵngcc2 from '@angular/cdk/bidi';
27import * as ɵngcc3 from '@angular/forms';
28import * as ɵngcc4 from '@angular/material/core';
29
30const _c0 = ["*"];
31class MatChipSelectionChange {
32 constructor(
33 /** Reference to the chip that emitted the event. */
34 source,
35 /** Whether the chip that emitted the event is selected. */
36 selected,
37 /** Whether the selection change was a result of a user interaction. */
38 isUserInput = false) {
39 this.source = source;
40 this.selected = selected;
41 this.isUserInput = isUserInput;
42 }
43}
44/**
45 * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
46 * alternative token to the actual `MatChipRemove` class which could cause unnecessary
47 * retention of the class and its directive metadata.
48 */
49const MAT_CHIP_REMOVE = new InjectionToken('MatChipRemove');
50/**
51 * Injection token that can be used to reference instances of `MatChipAvatar`. It serves as
52 * alternative token to the actual `MatChipAvatar` class which could cause unnecessary
53 * retention of the class and its directive metadata.
54 */
55const MAT_CHIP_AVATAR = new InjectionToken('MatChipAvatar');
56/**
57 * Injection token that can be used to reference instances of `MatChipTrailingIcon`. It serves as
58 * alternative token to the actual `MatChipTrailingIcon` class which could cause unnecessary
59 * retention of the class and its directive metadata.
60 */
61const MAT_CHIP_TRAILING_ICON = new InjectionToken('MatChipTrailingIcon');
62// Boilerplate for applying mixins to MatChip.
63/** @docs-private */
64class MatChipBase {
65 constructor(_elementRef) {
66 this._elementRef = _elementRef;
67 }
68}
69const _MatChipMixinBase = mixinTabIndex(mixinColor(mixinDisableRipple(MatChipBase), 'primary'), -1);
70/**
71 * Dummy directive to add CSS class to chip avatar.
72 * @docs-private
73 */
74class MatChipAvatar {
75}
76MatChipAvatar.ɵfac = function MatChipAvatar_Factory(t) { return new (t || MatChipAvatar)(); };
77MatChipAvatar.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatChipAvatar, selectors: [["mat-chip-avatar"], ["", "matChipAvatar", ""]], hostAttrs: [1, "mat-chip-avatar"], features: [ɵngcc0.ɵɵProvidersFeature([{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }])] });
78(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatChipAvatar, [{
79 type: Directive,
80 args: [{
81 selector: 'mat-chip-avatar, [matChipAvatar]',
82 host: { 'class': 'mat-chip-avatar' },
83 providers: [{ provide: MAT_CHIP_AVATAR, useExisting: MatChipAvatar }]
84 }]
85 }], null, null); })();
86/**
87 * Dummy directive to add CSS class to chip trailing icon.
88 * @docs-private
89 */
90class MatChipTrailingIcon {
91}
92MatChipTrailingIcon.ɵfac = function MatChipTrailingIcon_Factory(t) { return new (t || MatChipTrailingIcon)(); };
93MatChipTrailingIcon.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatChipTrailingIcon, selectors: [["mat-chip-trailing-icon"], ["", "matChipTrailingIcon", ""]], hostAttrs: [1, "mat-chip-trailing-icon"], features: [ɵngcc0.ɵɵProvidersFeature([{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }])] });
94(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatChipTrailingIcon, [{
95 type: Directive,
96 args: [{
97 selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
98 host: { 'class': 'mat-chip-trailing-icon' },
99 providers: [{ provide: MAT_CHIP_TRAILING_ICON, useExisting: MatChipTrailingIcon }]
100 }]
101 }], null, null); })();
102/**
103 * Material design styled Chip component. Used inside the MatChipList component.
104 */
105class MatChip extends _MatChipMixinBase {
106 constructor(elementRef, _ngZone, platform, globalRippleOptions, _changeDetectorRef, _document, animationMode, tabIndex) {
107 super(elementRef);
108 this._ngZone = _ngZone;
109 this._changeDetectorRef = _changeDetectorRef;
110 /** Whether the chip has focus. */
111 this._hasFocus = false;
112 /** Whether the chip list is selectable */
113 this.chipListSelectable = true;
114 /** Whether the chip list is in multi-selection mode. */
115 this._chipListMultiple = false;
116 /** Whether the chip list as a whole is disabled. */
117 this._chipListDisabled = false;
118 this._selected = false;
119 this._selectable = true;
120 this._disabled = false;
121 this._removable = true;
122 /** Emits when the chip is focused. */
123 this._onFocus = new Subject();
124 /** Emits when the chip is blured. */
125 this._onBlur = new Subject();
126 /** Emitted when the chip is selected or deselected. */
127 this.selectionChange = new EventEmitter();
128 /** Emitted when the chip is destroyed. */
129 this.destroyed = new EventEmitter();
130 /** Emitted when a chip is to be removed. */
131 this.removed = new EventEmitter();
132 this._addHostClassName();
133 // Dynamically create the ripple target, append it within the chip, and use it as the
134 // chip's ripple target. Adding the class '.mat-chip-ripple' ensures that it will have
135 // the proper styles.
136 this._chipRippleTarget = _document.createElement('div');
137 this._chipRippleTarget.classList.add('mat-chip-ripple');
138 this._elementRef.nativeElement.appendChild(this._chipRippleTarget);
139 this._chipRipple = new RippleRenderer(this, _ngZone, this._chipRippleTarget, platform);
140 this._chipRipple.setupTriggerEvents(elementRef);
141 this.rippleConfig = globalRippleOptions || {};
142 this._animationsDisabled = animationMode === 'NoopAnimations';
143 this.tabIndex = tabIndex != null ? (parseInt(tabIndex) || -1) : -1;
144 }
145 /**
146 * Whether ripples are disabled on interaction
147 * @docs-private
148 */
149 get rippleDisabled() {
150 return this.disabled || this.disableRipple || this._animationsDisabled ||
151 !!this.rippleConfig.disabled;
152 }
153 /** Whether the chip is selected. */
154 get selected() { return this._selected; }
155 set selected(value) {
156 const coercedValue = coerceBooleanProperty(value);
157 if (coercedValue !== this._selected) {
158 this._selected = coercedValue;
159 this._dispatchSelectionChange();
160 }
161 }
162 /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */
163 get value() {
164 return this._value !== undefined
165 ? this._value
166 : this._elementRef.nativeElement.textContent;
167 }
168 set value(value) { this._value = value; }
169 /**
170 * Whether or not the chip is selectable. When a chip is not selectable,
171 * changes to its selected state are always ignored. By default a chip is
172 * selectable, and it becomes non-selectable if its parent chip list is
173 * not selectable.
174 */
175 get selectable() { return this._selectable && this.chipListSelectable; }
176 set selectable(value) {
177 this._selectable = coerceBooleanProperty(value);
178 }
179 /** Whether the chip is disabled. */
180 get disabled() { return this._chipListDisabled || this._disabled; }
181 set disabled(value) {
182 this._disabled = coerceBooleanProperty(value);
183 }
184 /**
185 * Determines whether or not the chip displays the remove styling and emits (removed) events.
186 */
187 get removable() { return this._removable; }
188 set removable(value) {
189 this._removable = coerceBooleanProperty(value);
190 }
191 /** The ARIA selected applied to the chip. */
192 get ariaSelected() {
193 // Remove the `aria-selected` when the chip is deselected in single-selection mode, because
194 // it adds noise to NVDA users where "not selected" will be read out for each chip.
195 return this.selectable && (this._chipListMultiple || this.selected) ?
196 this.selected.toString() : null;
197 }
198 _addHostClassName() {
199 const basicChipAttrName = 'mat-basic-chip';
200 const element = this._elementRef.nativeElement;
201 if (element.hasAttribute(basicChipAttrName) ||
202 element.tagName.toLowerCase() === basicChipAttrName) {
203 element.classList.add(basicChipAttrName);
204 return;
205 }
206 else {
207 element.classList.add('mat-standard-chip');
208 }
209 }
210 ngOnDestroy() {
211 this.destroyed.emit({ chip: this });
212 this._chipRipple._removeTriggerEvents();
213 }
214 /** Selects the chip. */
215 select() {
216 if (!this._selected) {
217 this._selected = true;
218 this._dispatchSelectionChange();
219 this._changeDetectorRef.markForCheck();
220 }
221 }
222 /** Deselects the chip. */
223 deselect() {
224 if (this._selected) {
225 this._selected = false;
226 this._dispatchSelectionChange();
227 this._changeDetectorRef.markForCheck();
228 }
229 }
230 /** Select this chip and emit selected event */
231 selectViaInteraction() {
232 if (!this._selected) {
233 this._selected = true;
234 this._dispatchSelectionChange(true);
235 this._changeDetectorRef.markForCheck();
236 }
237 }
238 /** Toggles the current selected state of this chip. */
239 toggleSelected(isUserInput = false) {
240 this._selected = !this.selected;
241 this._dispatchSelectionChange(isUserInput);
242 this._changeDetectorRef.markForCheck();
243 return this.selected;
244 }
245 /** Allows for programmatic focusing of the chip. */
246 focus() {
247 if (!this._hasFocus) {
248 this._elementRef.nativeElement.focus();
249 this._onFocus.next({ chip: this });
250 }
251 this._hasFocus = true;
252 }
253 /**
254 * Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or
255 * BACKSPACE keys are pressed.
256 *
257 * Informs any listeners of the removal request. Does not remove the chip from the DOM.
258 */
259 remove() {
260 if (this.removable) {
261 this.removed.emit({ chip: this });
262 }
263 }
264 /** Handles click events on the chip. */
265 _handleClick(event) {
266 if (this.disabled) {
267 event.preventDefault();
268 }
269 else {
270 event.stopPropagation();
271 }
272 }
273 /** Handle custom key presses. */
274 _handleKeydown(event) {
275 if (this.disabled) {
276 return;
277 }
278 switch (event.keyCode) {
279 case DELETE:
280 case BACKSPACE:
281 // If we are removable, remove the focused chip
282 this.remove();
283 // Always prevent so page navigation does not occur
284 event.preventDefault();
285 break;
286 case SPACE:
287 // If we are selectable, toggle the focused chip
288 if (this.selectable) {
289 this.toggleSelected(true);
290 }
291 // Always prevent space from scrolling the page since the list has focus
292 event.preventDefault();
293 break;
294 }
295 }
296 _blur() {
297 // When animations are enabled, Angular may end up removing the chip from the DOM a little
298 // earlier than usual, causing it to be blurred and throwing off the logic in the chip list
299 // that moves focus not the next item. To work around the issue, we defer marking the chip
300 // as not focused until the next time the zone stabilizes.
301 this._ngZone.onStable
302 .pipe(take(1))
303 .subscribe(() => {
304 this._ngZone.run(() => {
305 this._hasFocus = false;
306 this._onBlur.next({ chip: this });
307 });
308 });
309 }
310 _dispatchSelectionChange(isUserInput = false) {
311 this.selectionChange.emit({
312 source: this,
313 isUserInput,
314 selected: this._selected
315 });
316 }
317}
318MatChip.ɵfac = function MatChip_Factory(t) { return new (t || MatChip)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.NgZone), ɵngcc0.ɵɵdirectiveInject(ɵngcc1.Platform), ɵngcc0.ɵɵdirectiveInject(MAT_RIPPLE_GLOBAL_OPTIONS, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(DOCUMENT), ɵngcc0.ɵɵdirectiveInject(ANIMATION_MODULE_TYPE, 8), ɵngcc0.ɵɵinjectAttribute('tabindex')); };
319MatChip.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatChip, selectors: [["mat-basic-chip"], ["", "mat-basic-chip", ""], ["mat-chip"], ["", "mat-chip", ""]], contentQueries: function MatChip_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
320 ɵngcc0.ɵɵcontentQuery(dirIndex, MAT_CHIP_AVATAR, 5);
321 ɵngcc0.ɵɵcontentQuery(dirIndex, MAT_CHIP_TRAILING_ICON, 5);
322 ɵngcc0.ɵɵcontentQuery(dirIndex, MAT_CHIP_REMOVE, 5);
323 } if (rf & 2) {
324 let _t;
325 ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.avatar = _t.first);
326 ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.trailingIcon = _t.first);
327 ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.removeIcon = _t.first);
328 } }, hostAttrs: ["role", "option", 1, "mat-chip", "mat-focus-indicator"], hostVars: 14, hostBindings: function MatChip_HostBindings(rf, ctx) { if (rf & 1) {
329 ɵngcc0.ɵɵlistener("click", function MatChip_click_HostBindingHandler($event) { return ctx._handleClick($event); })("keydown", function MatChip_keydown_HostBindingHandler($event) { return ctx._handleKeydown($event); })("focus", function MatChip_focus_HostBindingHandler() { return ctx.focus(); })("blur", function MatChip_blur_HostBindingHandler() { return ctx._blur(); });
330 } if (rf & 2) {
331 ɵngcc0.ɵɵattribute("tabindex", ctx.disabled ? null : ctx.tabIndex)("disabled", ctx.disabled || null)("aria-disabled", ctx.disabled.toString())("aria-selected", ctx.ariaSelected);
332 ɵngcc0.ɵɵclassProp("mat-chip-selected", ctx.selected)("mat-chip-with-avatar", ctx.avatar)("mat-chip-with-trailing-icon", ctx.trailingIcon || ctx.removeIcon)("mat-chip-disabled", ctx.disabled)("_mat-animation-noopable", ctx._animationsDisabled);
333 } }, inputs: { color: "color", disableRipple: "disableRipple", tabIndex: "tabIndex", selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable" }, outputs: { selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, exportAs: ["matChip"], features: [ɵngcc0.ɵɵInheritDefinitionFeature] });
334MatChip.ctorParameters = () => [
335 { type: ElementRef },
336 { type: NgZone },
337 { type: Platform },
338 { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_RIPPLE_GLOBAL_OPTIONS,] }] },
339 { type: ChangeDetectorRef },
340 { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
341 { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] },
342 { type: String, decorators: [{ type: Attribute, args: ['tabindex',] }] }
343];
344MatChip.propDecorators = {
345 avatar: [{ type: ContentChild, args: [MAT_CHIP_AVATAR,] }],
346 trailingIcon: [{ type: ContentChild, args: [MAT_CHIP_TRAILING_ICON,] }],
347 removeIcon: [{ type: ContentChild, args: [MAT_CHIP_REMOVE,] }],
348 selected: [{ type: Input }],
349 value: [{ type: Input }],
350 selectable: [{ type: Input }],
351 disabled: [{ type: Input }],
352 removable: [{ type: Input }],
353 selectionChange: [{ type: Output }],
354 destroyed: [{ type: Output }],
355 removed: [{ type: Output }]
356};
357(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatChip, [{
358 type: Directive,
359 args: [{
360 selector: `mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
361 inputs: ['color', 'disableRipple', 'tabIndex'],
362 exportAs: 'matChip',
363 host: {
364 'class': 'mat-chip mat-focus-indicator',
365 '[attr.tabindex]': 'disabled ? null : tabIndex',
366 'role': 'option',
367 '[class.mat-chip-selected]': 'selected',
368 '[class.mat-chip-with-avatar]': 'avatar',
369 '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
370 '[class.mat-chip-disabled]': 'disabled',
371 '[class._mat-animation-noopable]': '_animationsDisabled',
372 '[attr.disabled]': 'disabled || null',
373 '[attr.aria-disabled]': 'disabled.toString()',
374 '[attr.aria-selected]': 'ariaSelected',
375 '(click)': '_handleClick($event)',
376 '(keydown)': '_handleKeydown($event)',
377 '(focus)': 'focus()',
378 '(blur)': '_blur()'
379 }
380 }]
381 }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.NgZone }, { type: ɵngcc1.Platform }, { type: undefined, decorators: [{
382 type: Optional
383 }, {
384 type: Inject,
385 args: [MAT_RIPPLE_GLOBAL_OPTIONS]
386 }] }, { type: ɵngcc0.ChangeDetectorRef }, { type: undefined, decorators: [{
387 type: Inject,
388 args: [DOCUMENT]
389 }] }, { type: String, decorators: [{
390 type: Optional
391 }, {
392 type: Inject,
393 args: [ANIMATION_MODULE_TYPE]
394 }] }, { type: String, decorators: [{
395 type: Attribute,
396 args: ['tabindex']
397 }] }]; }, { selectionChange: [{
398 type: Output
399 }], destroyed: [{
400 type: Output
401 }], removed: [{
402 type: Output
403 }], selected: [{
404 type: Input
405 }], value: [{
406 type: Input
407 }], selectable: [{
408 type: Input
409 }], disabled: [{
410 type: Input
411 }], removable: [{
412 type: Input
413 }], avatar: [{
414 type: ContentChild,
415 args: [MAT_CHIP_AVATAR]
416 }], trailingIcon: [{
417 type: ContentChild,
418 args: [MAT_CHIP_TRAILING_ICON]
419 }], removeIcon: [{
420 type: ContentChild,
421 args: [MAT_CHIP_REMOVE]
422 }] }); })();
423/**
424 * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon
425 * available at https://material.io/icons/#ic_cancel.
426 *
427 * Example:
428 *
429 * `<mat-chip>
430 * <mat-icon matChipRemove>cancel</mat-icon>
431 * </mat-chip>`
432 *
433 * You *may* use a custom icon, but you may need to override the `mat-chip-remove` positioning
434 * styles to properly center the icon within the chip.
435 */
436class MatChipRemove {
437 constructor(_parentChip, elementRef) {
438 this._parentChip = _parentChip;
439 if (elementRef.nativeElement.nodeName === 'BUTTON') {
440 elementRef.nativeElement.setAttribute('type', 'button');
441 }
442 }
443 /** Calls the parent chip's public `remove()` method if applicable. */
444 _handleClick(event) {
445 const parentChip = this._parentChip;
446 if (parentChip.removable && !parentChip.disabled) {
447 parentChip.remove();
448 }
449 // We need to stop event propagation because otherwise the event will bubble up to the
450 // form field and cause the `onContainerClick` method to be invoked. This method would then
451 // reset the focused chip that has been focused after chip removal. Usually the parent
452 // the parent click listener of the `MatChip` would prevent propagation, but it can happen
453 // that the chip is being removed before the event bubbles up.
454 event.stopPropagation();
455 }
456}
457MatChipRemove.ɵfac = function MatChipRemove_Factory(t) { return new (t || MatChipRemove)(ɵngcc0.ɵɵdirectiveInject(MatChip), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef)); };
458MatChipRemove.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatChipRemove, selectors: [["", "matChipRemove", ""]], hostAttrs: [1, "mat-chip-remove", "mat-chip-trailing-icon"], hostBindings: function MatChipRemove_HostBindings(rf, ctx) { if (rf & 1) {
459 ɵngcc0.ɵɵlistener("click", function MatChipRemove_click_HostBindingHandler($event) { return ctx._handleClick($event); });
460 } }, features: [ɵngcc0.ɵɵProvidersFeature([{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }])] });
461MatChipRemove.ctorParameters = () => [
462 { type: MatChip },
463 { type: ElementRef }
464];
465(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatChipRemove, [{
466 type: Directive,
467 args: [{
468 selector: '[matChipRemove]',
469 host: {
470 'class': 'mat-chip-remove mat-chip-trailing-icon',
471 '(click)': '_handleClick($event)'
472 },
473 providers: [{ provide: MAT_CHIP_REMOVE, useExisting: MatChipRemove }]
474 }]
475 }], function () { return [{ type: MatChip }, { type: ɵngcc0.ElementRef }]; }, null); })();
476
477/**
478 * @license
479 * Copyright Google LLC All Rights Reserved.
480 *
481 * Use of this source code is governed by an MIT-style license that can be
482 * found in the LICENSE file at https://angular.io/license
483 */
484/** Injection token to be used to override the default options for the chips module. */
485const MAT_CHIPS_DEFAULT_OPTIONS = new InjectionToken('mat-chips-default-options');
486
487/**
488 * @license
489 * Copyright Google LLC All Rights Reserved.
490 *
491 * Use of this source code is governed by an MIT-style license that can be
492 * found in the LICENSE file at https://angular.io/license
493 */
494// Boilerplate for applying mixins to MatChipList.
495/** @docs-private */
496const _MatChipListBase = mixinErrorState(class {
497 constructor(_defaultErrorStateMatcher, _parentForm, _parentFormGroup,
498 /** @docs-private */
499 ngControl) {
500 this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
501 this._parentForm = _parentForm;
502 this._parentFormGroup = _parentFormGroup;
503 this.ngControl = ngControl;
504 }
505});
506// Increasing integer for generating unique ids for chip-list components.
507let nextUniqueId$1 = 0;
508/** Change event object that is emitted when the chip list value has changed. */
509class MatChipListChange {
510 constructor(
511 /** Chip list that emitted the event. */
512 source,
513 /** Value of the chip list when the event was emitted. */
514 value) {
515 this.source = source;
516 this.value = value;
517 }
518}
519/**
520 * A material design chips component (named ChipList for its similarity to the List component).
521 */
522class MatChipList extends _MatChipListBase {
523 constructor(_elementRef, _changeDetectorRef, _dir, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, ngControl) {
524 super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
525 this._elementRef = _elementRef;
526 this._changeDetectorRef = _changeDetectorRef;
527 this._dir = _dir;
528 /**
529 * Implemented as part of MatFormFieldControl.
530 * @docs-private
531 */
532 this.controlType = 'mat-chip-list';
533 /**
534 * When a chip is destroyed, we store the index of the destroyed chip until the chips
535 * query list notifies about the update. This is necessary because we cannot determine an
536 * appropriate chip that should receive focus until the array of chips updated completely.
537 */
538 this._lastDestroyedChipIndex = null;
539 /** Subject that emits when the component has been destroyed. */
540 this._destroyed = new Subject();
541 /** Uid of the chip list */
542 this._uid = `mat-chip-list-${nextUniqueId$1++}`;
543 /** Tab index for the chip list. */
544 this._tabIndex = 0;
545 /**
546 * User defined tab index.
547 * When it is not null, use user defined tab index. Otherwise use _tabIndex
548 */
549 this._userTabIndex = null;
550 /** Function when touched */
551 this._onTouched = () => { };
552 /** Function when changed */
553 this._onChange = () => { };
554 this._multiple = false;
555 this._compareWith = (o1, o2) => o1 === o2;
556 this._required = false;
557 this._disabled = false;
558 /** Orientation of the chip list. */
559 this.ariaOrientation = 'horizontal';
560 this._selectable = true;
561 /** Event emitted when the selected chip list value has been changed by the user. */
562 this.change = new EventEmitter();
563 /**
564 * Event that emits whenever the raw value of the chip-list changes. This is here primarily
565 * to facilitate the two-way binding for the `value` input.
566 * @docs-private
567 */
568 this.valueChange = new EventEmitter();
569 if (this.ngControl) {
570 this.ngControl.valueAccessor = this;
571 }
572 }
573 /** The array of selected chips inside chip list. */
574 get selected() {
575 var _a, _b;
576 return this.multiple ? (((_a = this._selectionModel) === null || _a === void 0 ? void 0 : _a.selected) || []) :
577 (_b = this._selectionModel) === null || _b === void 0 ? void 0 : _b.selected[0];
578 }
579 /** The ARIA role applied to the chip list. */
580 get role() { return this.empty ? null : 'listbox'; }
581 /** Whether the user should be allowed to select multiple chips. */
582 get multiple() { return this._multiple; }
583 set multiple(value) {
584 this._multiple = coerceBooleanProperty(value);
585 this._syncChipsState();
586 }
587 /**
588 * A function to compare the option values with the selected values. The first argument
589 * is a value from an option. The second is a value from the selection. A boolean
590 * should be returned.
591 */
592 get compareWith() { return this._compareWith; }
593 set compareWith(fn) {
594 this._compareWith = fn;
595 if (this._selectionModel) {
596 // A different comparator means the selection could change.
597 this._initializeSelection();
598 }
599 }
600 /**
601 * Implemented as part of MatFormFieldControl.
602 * @docs-private
603 */
604 get value() { return this._value; }
605 set value(value) {
606 this.writeValue(value);
607 this._value = value;
608 }
609 /**
610 * Implemented as part of MatFormFieldControl.
611 * @docs-private
612 */
613 get id() {
614 return this._chipInput ? this._chipInput.id : this._uid;
615 }
616 /**
617 * Implemented as part of MatFormFieldControl.
618 * @docs-private
619 */
620 get required() { return this._required; }
621 set required(value) {
622 this._required = coerceBooleanProperty(value);
623 this.stateChanges.next();
624 }
625 /**
626 * Implemented as part of MatFormFieldControl.
627 * @docs-private
628 */
629 get placeholder() {
630 return this._chipInput ? this._chipInput.placeholder : this._placeholder;
631 }
632 set placeholder(value) {
633 this._placeholder = value;
634 this.stateChanges.next();
635 }
636 /** Whether any chips or the matChipInput inside of this chip-list has focus. */
637 get focused() {
638 return (this._chipInput && this._chipInput.focused) || this._hasFocusedChip();
639 }
640 /**
641 * Implemented as part of MatFormFieldControl.
642 * @docs-private
643 */
644 get empty() {
645 return (!this._chipInput || this._chipInput.empty) && (!this.chips || this.chips.length === 0);
646 }
647 /**
648 * Implemented as part of MatFormFieldControl.
649 * @docs-private
650 */
651 get shouldLabelFloat() { return !this.empty || this.focused; }
652 /**
653 * Implemented as part of MatFormFieldControl.
654 * @docs-private
655 */
656 get disabled() { return this.ngControl ? !!this.ngControl.disabled : this._disabled; }
657 set disabled(value) {
658 this._disabled = coerceBooleanProperty(value);
659 this._syncChipsState();
660 }
661 /**
662 * Whether or not this chip list is selectable. When a chip list is not selectable,
663 * the selected states for all the chips inside the chip list are always ignored.
664 */
665 get selectable() { return this._selectable; }
666 set selectable(value) {
667 this._selectable = coerceBooleanProperty(value);
668 if (this.chips) {
669 this.chips.forEach(chip => chip.chipListSelectable = this._selectable);
670 }
671 }
672 set tabIndex(value) {
673 this._userTabIndex = value;
674 this._tabIndex = value;
675 }
676 /** Combined stream of all of the child chips' selection change events. */
677 get chipSelectionChanges() {
678 return merge(...this.chips.map(chip => chip.selectionChange));
679 }
680 /** Combined stream of all of the child chips' focus change events. */
681 get chipFocusChanges() {
682 return merge(...this.chips.map(chip => chip._onFocus));
683 }
684 /** Combined stream of all of the child chips' blur change events. */
685 get chipBlurChanges() {
686 return merge(...this.chips.map(chip => chip._onBlur));
687 }
688 /** Combined stream of all of the child chips' remove change events. */
689 get chipRemoveChanges() {
690 return merge(...this.chips.map(chip => chip.destroyed));
691 }
692 ngAfterContentInit() {
693 this._keyManager = new FocusKeyManager(this.chips)
694 .withWrap()
695 .withVerticalOrientation()
696 .withHomeAndEnd()
697 .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
698 if (this._dir) {
699 this._dir.change
700 .pipe(takeUntil(this._destroyed))
701 .subscribe(dir => this._keyManager.withHorizontalOrientation(dir));
702 }
703 this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
704 this._allowFocusEscape();
705 });
706 // When the list changes, re-subscribe
707 this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
708 if (this.disabled) {
709 // Since this happens after the content has been
710 // checked, we need to defer it to the next tick.
711 Promise.resolve().then(() => {
712 this._syncChipsState();
713 });
714 }
715 this._resetChips();
716 // Reset chips selected/deselected status
717 this._initializeSelection();
718 // Check to see if we need to update our tab index
719 this._updateTabIndex();
720 // Check to see if we have a destroyed chip and need to refocus
721 this._updateFocusForDestroyedChips();
722 this.stateChanges.next();
723 });
724 }
725 ngOnInit() {
726 this._selectionModel = new SelectionModel(this.multiple, undefined, false);
727 this.stateChanges.next();
728 }
729 ngDoCheck() {
730 if (this.ngControl) {
731 // We need to re-evaluate this on every change detection cycle, because there are some
732 // error triggers that we can't subscribe to (e.g. parent form submissions). This means
733 // that whatever logic is in here has to be super lean or we risk destroying the performance.
734 this.updateErrorState();
735 if (this.ngControl.disabled !== this._disabled) {
736 this.disabled = !!this.ngControl.disabled;
737 }
738 }
739 }
740 ngOnDestroy() {
741 this._destroyed.next();
742 this._destroyed.complete();
743 this.stateChanges.complete();
744 this._dropSubscriptions();
745 }
746 /** Associates an HTML input element with this chip list. */
747 registerInput(inputElement) {
748 this._chipInput = inputElement;
749 // We use this attribute to match the chip list to its input in test harnesses.
750 // Set the attribute directly here to avoid "changed after checked" errors.
751 this._elementRef.nativeElement.setAttribute('data-mat-chip-input', inputElement.id);
752 }
753 /**
754 * Implemented as part of MatFormFieldControl.
755 * @docs-private
756 */
757 setDescribedByIds(ids) { this._ariaDescribedby = ids.join(' '); }
758 // Implemented as part of ControlValueAccessor.
759 writeValue(value) {
760 if (this.chips) {
761 this._setSelectionByValue(value, false);
762 }
763 }
764 // Implemented as part of ControlValueAccessor.
765 registerOnChange(fn) {
766 this._onChange = fn;
767 }
768 // Implemented as part of ControlValueAccessor.
769 registerOnTouched(fn) {
770 this._onTouched = fn;
771 }
772 // Implemented as part of ControlValueAccessor.
773 setDisabledState(isDisabled) {
774 this.disabled = isDisabled;
775 this.stateChanges.next();
776 }
777 /**
778 * Implemented as part of MatFormFieldControl.
779 * @docs-private
780 */
781 onContainerClick(event) {
782 if (!this._originatesFromChip(event)) {
783 this.focus();
784 }
785 }
786 /**
787 * Focuses the first non-disabled chip in this chip list, or the associated input when there
788 * are no eligible chips.
789 */
790 focus(options) {
791 if (this.disabled) {
792 return;
793 }
794 // TODO: ARIA says this should focus the first `selected` chip if any are selected.
795 // Focus on first element if there's no chipInput inside chip-list
796 if (this._chipInput && this._chipInput.focused) {
797 // do nothing
798 }
799 else if (this.chips.length > 0) {
800 this._keyManager.setFirstItemActive();
801 this.stateChanges.next();
802 }
803 else {
804 this._focusInput(options);
805 this.stateChanges.next();
806 }
807 }
808 /** Attempt to focus an input if we have one. */
809 _focusInput(options) {
810 if (this._chipInput) {
811 this._chipInput.focus(options);
812 }
813 }
814 /**
815 * Pass events to the keyboard manager. Available here for tests.
816 */
817 _keydown(event) {
818 const target = event.target;
819 if (target && target.classList.contains('mat-chip')) {
820 this._keyManager.onKeydown(event);
821 this.stateChanges.next();
822 }
823 }
824 /**
825 * Check the tab index as you should not be allowed to focus an empty list.
826 */
827 _updateTabIndex() {
828 // If we have 0 chips, we should not allow keyboard focus
829 this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0);
830 }
831 /**
832 * If the amount of chips changed, we need to update the
833 * key manager state and focus the next closest chip.
834 */
835 _updateFocusForDestroyedChips() {
836 // Move focus to the closest chip. If no other chips remain, focus the chip-list itself.
837 if (this._lastDestroyedChipIndex != null) {
838 if (this.chips.length) {
839 const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
840 this._keyManager.setActiveItem(newChipIndex);
841 }
842 else {
843 this.focus();
844 }
845 }
846 this._lastDestroyedChipIndex = null;
847 }
848 /**
849 * Utility to ensure all indexes are valid.
850 *
851 * @param index The index to be checked.
852 * @returns True if the index is valid for our list of chips.
853 */
854 _isValidIndex(index) {
855 return index >= 0 && index < this.chips.length;
856 }
857 _setSelectionByValue(value, isUserInput = true) {
858 this._clearSelection();
859 this.chips.forEach(chip => chip.deselect());
860 if (Array.isArray(value)) {
861 value.forEach(currentValue => this._selectValue(currentValue, isUserInput));
862 this._sortValues();
863 }
864 else {
865 const correspondingChip = this._selectValue(value, isUserInput);
866 // Shift focus to the active item. Note that we shouldn't do this in multiple
867 // mode, because we don't know what chip the user interacted with last.
868 if (correspondingChip) {
869 if (isUserInput) {
870 this._keyManager.setActiveItem(correspondingChip);
871 }
872 }
873 }
874 }
875 /**
876 * Finds and selects the chip based on its value.
877 * @returns Chip that has the corresponding value.
878 */
879 _selectValue(value, isUserInput = true) {
880 const correspondingChip = this.chips.find(chip => {
881 return chip.value != null && this._compareWith(chip.value, value);
882 });
883 if (correspondingChip) {
884 isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();
885 this._selectionModel.select(correspondingChip);
886 }
887 return correspondingChip;
888 }
889 _initializeSelection() {
890 // Defer setting the value in order to avoid the "Expression
891 // has changed after it was checked" errors from Angular.
892 Promise.resolve().then(() => {
893 if (this.ngControl || this._value) {
894 this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false);
895 this.stateChanges.next();
896 }
897 });
898 }
899 /**
900 * Deselects every chip in the list.
901 * @param skip Chip that should not be deselected.
902 */
903 _clearSelection(skip) {
904 this._selectionModel.clear();
905 this.chips.forEach(chip => {
906 if (chip !== skip) {
907 chip.deselect();
908 }
909 });
910 this.stateChanges.next();
911 }
912 /**
913 * Sorts the model values, ensuring that they keep the same
914 * order that they have in the panel.
915 */
916 _sortValues() {
917 if (this._multiple) {
918 this._selectionModel.clear();
919 this.chips.forEach(chip => {
920 if (chip.selected) {
921 this._selectionModel.select(chip);
922 }
923 });
924 this.stateChanges.next();
925 }
926 }
927 /** Emits change event to set the model value. */
928 _propagateChanges(fallbackValue) {
929 let valueToEmit = null;
930 if (Array.isArray(this.selected)) {
931 valueToEmit = this.selected.map(chip => chip.value);
932 }
933 else {
934 valueToEmit = this.selected ? this.selected.value : fallbackValue;
935 }
936 this._value = valueToEmit;
937 this.change.emit(new MatChipListChange(this, valueToEmit));
938 this.valueChange.emit(valueToEmit);
939 this._onChange(valueToEmit);
940 this._changeDetectorRef.markForCheck();
941 }
942 /** When blurred, mark the field as touched when focus moved outside the chip list. */
943 _blur() {
944 if (!this._hasFocusedChip()) {
945 this._keyManager.setActiveItem(-1);
946 }
947 if (!this.disabled) {
948 if (this._chipInput) {
949 // If there's a chip input, we should check whether the focus moved to chip input.
950 // If the focus is not moved to chip input, mark the field as touched. If the focus moved
951 // to chip input, do nothing.
952 // Timeout is needed to wait for the focus() event trigger on chip input.
953 setTimeout(() => {
954 if (!this.focused) {
955 this._markAsTouched();
956 }
957 });
958 }
959 else {
960 // If there's no chip input, then mark the field as touched.
961 this._markAsTouched();
962 }
963 }
964 }
965 /** Mark the field as touched */
966 _markAsTouched() {
967 this._onTouched();
968 this._changeDetectorRef.markForCheck();
969 this.stateChanges.next();
970 }
971 /**
972 * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
973 * user to tab out of it. This prevents the list from capturing focus and redirecting
974 * it back to the first chip, creating a focus trap, if it user tries to tab away.
975 */
976 _allowFocusEscape() {
977 if (this._tabIndex !== -1) {
978 this._tabIndex = -1;
979 setTimeout(() => {
980 this._tabIndex = this._userTabIndex || 0;
981 this._changeDetectorRef.markForCheck();
982 });
983 }
984 }
985 _resetChips() {
986 this._dropSubscriptions();
987 this._listenToChipsFocus();
988 this._listenToChipsSelection();
989 this._listenToChipsRemoved();
990 }
991 _dropSubscriptions() {
992 if (this._chipFocusSubscription) {
993 this._chipFocusSubscription.unsubscribe();
994 this._chipFocusSubscription = null;
995 }
996 if (this._chipBlurSubscription) {
997 this._chipBlurSubscription.unsubscribe();
998 this._chipBlurSubscription = null;
999 }
1000 if (this._chipSelectionSubscription) {
1001 this._chipSelectionSubscription.unsubscribe();
1002 this._chipSelectionSubscription = null;
1003 }
1004 if (this._chipRemoveSubscription) {
1005 this._chipRemoveSubscription.unsubscribe();
1006 this._chipRemoveSubscription = null;
1007 }
1008 }
1009 /** Listens to user-generated selection events on each chip. */
1010 _listenToChipsSelection() {
1011 this._chipSelectionSubscription = this.chipSelectionChanges.subscribe(event => {
1012 event.source.selected
1013 ? this._selectionModel.select(event.source)
1014 : this._selectionModel.deselect(event.source);
1015 // For single selection chip list, make sure the deselected value is unselected.
1016 if (!this.multiple) {
1017 this.chips.forEach(chip => {
1018 if (!this._selectionModel.isSelected(chip) && chip.selected) {
1019 chip.deselect();
1020 }
1021 });
1022 }
1023 if (event.isUserInput) {
1024 this._propagateChanges();
1025 }
1026 });
1027 }
1028 /** Listens to user-generated selection events on each chip. */
1029 _listenToChipsFocus() {
1030 this._chipFocusSubscription = this.chipFocusChanges.subscribe(event => {
1031 let chipIndex = this.chips.toArray().indexOf(event.chip);
1032 if (this._isValidIndex(chipIndex)) {
1033 this._keyManager.updateActiveItem(chipIndex);
1034 }
1035 this.stateChanges.next();
1036 });
1037 this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
1038 this._blur();
1039 this.stateChanges.next();
1040 });
1041 }
1042 _listenToChipsRemoved() {
1043 this._chipRemoveSubscription = this.chipRemoveChanges.subscribe(event => {
1044 const chip = event.chip;
1045 const chipIndex = this.chips.toArray().indexOf(event.chip);
1046 // In case the chip that will be removed is currently focused, we temporarily store
1047 // the index in order to be able to determine an appropriate sibling chip that will
1048 // receive focus.
1049 if (this._isValidIndex(chipIndex) && chip._hasFocus) {
1050 this._lastDestroyedChipIndex = chipIndex;
1051 }
1052 });
1053 }
1054 /** Checks whether an event comes from inside a chip element. */
1055 _originatesFromChip(event) {
1056 let currentElement = event.target;
1057 while (currentElement && currentElement !== this._elementRef.nativeElement) {
1058 if (currentElement.classList.contains('mat-chip')) {
1059 return true;
1060 }
1061 currentElement = currentElement.parentElement;
1062 }
1063 return false;
1064 }
1065 /** Checks whether any of the chips is focused. */
1066 _hasFocusedChip() {
1067 return this.chips && this.chips.some(chip => chip._hasFocus);
1068 }
1069 /** Syncs the list's state with the individual chips. */
1070 _syncChipsState() {
1071 if (this.chips) {
1072 this.chips.forEach(chip => {
1073 chip._chipListDisabled = this._disabled;
1074 chip._chipListMultiple = this.multiple;
1075 });
1076 }
1077 }
1078}
1079MatChipList.ɵfac = function MatChipList_Factory(t) { return new (t || MatChipList)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.Directionality, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.NgForm, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.FormGroupDirective, 8), ɵngcc0.ɵɵdirectiveInject(ɵngcc4.ErrorStateMatcher), ɵngcc0.ɵɵdirectiveInject(ɵngcc3.NgControl, 10)); };
1080MatChipList.ɵcmp = /*@__PURE__*/ ɵngcc0.ɵɵdefineComponent({ type: MatChipList, selectors: [["mat-chip-list"]], contentQueries: function MatChipList_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
1081 ɵngcc0.ɵɵcontentQuery(dirIndex, MatChip, 5);
1082 } if (rf & 2) {
1083 let _t;
1084 ɵngcc0.ɵɵqueryRefresh(_t = ɵngcc0.ɵɵloadQuery()) && (ctx.chips = _t);
1085 } }, hostAttrs: [1, "mat-chip-list"], hostVars: 15, hostBindings: function MatChipList_HostBindings(rf, ctx) { if (rf & 1) {
1086 ɵngcc0.ɵɵlistener("focus", function MatChipList_focus_HostBindingHandler() { return ctx.focus(); })("blur", function MatChipList_blur_HostBindingHandler() { return ctx._blur(); })("keydown", function MatChipList_keydown_HostBindingHandler($event) { return ctx._keydown($event); });
1087 } if (rf & 2) {
1088 ɵngcc0.ɵɵhostProperty("id", ctx._uid);
1089 ɵngcc0.ɵɵattribute("tabindex", ctx.disabled ? null : ctx._tabIndex)("aria-describedby", ctx._ariaDescribedby || null)("aria-required", ctx.role ? ctx.required : null)("aria-disabled", ctx.disabled.toString())("aria-invalid", ctx.errorState)("aria-multiselectable", ctx.multiple)("role", ctx.role)("aria-orientation", ctx.ariaOrientation);
1090 ɵngcc0.ɵɵclassProp("mat-chip-list-disabled", ctx.disabled)("mat-chip-list-invalid", ctx.errorState)("mat-chip-list-required", ctx.required);
1091 } }, inputs: { ariaOrientation: ["aria-orientation", "ariaOrientation"], multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher" }, outputs: { change: "change", valueChange: "valueChange" }, exportAs: ["matChipList"], features: [ɵngcc0.ɵɵProvidersFeature([{ provide: MatFormFieldControl, useExisting: MatChipList }]), ɵngcc0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 2, vars: 0, consts: [[1, "mat-chip-list-wrapper"]], template: function MatChipList_Template(rf, ctx) { if (rf & 1) {
1092 ɵngcc0.ɵɵprojectionDef();
1093 ɵngcc0.ɵɵelementStart(0, "div", 0);
1094 ɵngcc0.ɵɵprojection(1);
1095 ɵngcc0.ɵɵelementEnd();
1096 } }, styles: [".mat-chip{position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transform:translateZ(0);border:none;-webkit-appearance:none;-moz-appearance:none}.mat-standard-chip{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);display:inline-flex;padding:7px 12px;border-radius:16px;align-items:center;cursor:default;min-height:32px;height:1px}._mat-animation-noopable.mat-standard-chip{transition:none;animation:none}.mat-standard-chip .mat-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-standard-chip .mat-chip-remove.mat-icon,.mat-standard-chip .mat-chip-remove .mat-icon{width:18px;height:18px;font-size:18px}.mat-standard-chip::after{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit;opacity:0;content:\"\";pointer-events:none;transition:opacity 200ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-standard-chip:hover::after{opacity:.12}.mat-standard-chip:focus{outline:none}.mat-standard-chip:focus::after{opacity:.16}.cdk-high-contrast-active .mat-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-standard-chip:focus{outline:dotted 2px}.mat-standard-chip.mat-chip-disabled::after{opacity:0}.mat-standard-chip.mat-chip-disabled .mat-chip-remove,.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon{cursor:default}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar,.mat-standard-chip.mat-chip-with-avatar{padding-top:0;padding-bottom:0}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-right:8px;padding-left:0}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-left:8px;padding-right:0}.mat-standard-chip.mat-chip-with-trailing-icon{padding-top:7px;padding-bottom:7px;padding-right:8px;padding-left:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon{padding-left:8px;padding-right:12px}.mat-standard-chip.mat-chip-with-avatar{padding-left:0;padding-right:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-avatar{padding-right:0;padding-left:12px}.mat-standard-chip .mat-chip-avatar{width:24px;height:24px;margin-right:8px;margin-left:4px}[dir=rtl] .mat-standard-chip .mat-chip-avatar{margin-left:8px;margin-right:4px}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{margin-left:8px;margin-right:0}[dir=rtl] .mat-standard-chip .mat-chip-remove,[dir=rtl] .mat-standard-chip .mat-chip-trailing-icon{margin-right:8px;margin-left:0}.mat-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit;overflow:hidden}.mat-chip-list-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin:-4px}.mat-chip-list-wrapper input.mat-input-element,.mat-chip-list-wrapper .mat-standard-chip{margin:4px}.mat-chip-list-stacked .mat-chip-list-wrapper{flex-direction:column;align-items:flex-start}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip{width:100%}.mat-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover}input.mat-chip-input{width:150px;margin:4px;flex:1 0 150px}\n"], encapsulation: 2, changeDetection: 0 });
1097MatChipList.ctorParameters = () => [
1098 { type: ElementRef },
1099 { type: ChangeDetectorRef },
1100 { type: Directionality, decorators: [{ type: Optional }] },
1101 { type: NgForm, decorators: [{ type: Optional }] },
1102 { type: FormGroupDirective, decorators: [{ type: Optional }] },
1103 { type: ErrorStateMatcher },
1104 { type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
1105];
1106MatChipList.propDecorators = {
1107 errorStateMatcher: [{ type: Input }],
1108 multiple: [{ type: Input }],
1109 compareWith: [{ type: Input }],
1110 value: [{ type: Input }],
1111 required: [{ type: Input }],
1112 placeholder: [{ type: Input }],
1113 disabled: [{ type: Input }],
1114 ariaOrientation: [{ type: Input, args: ['aria-orientation',] }],
1115 selectable: [{ type: Input }],
1116 tabIndex: [{ type: Input }],
1117 change: [{ type: Output }],
1118 valueChange: [{ type: Output }],
1119 chips: [{ type: ContentChildren, args: [MatChip, {
1120 // We need to use `descendants: true`, because Ivy will no longer match
1121 // indirect descendants if it's left as false.
1122 descendants: true
1123 },] }]
1124};
1125(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatChipList, [{
1126 type: Component,
1127 args: [{
1128 selector: 'mat-chip-list',
1129 template: `<div class="mat-chip-list-wrapper"><ng-content></ng-content></div>`,
1130 exportAs: 'matChipList',
1131 host: {
1132 '[attr.tabindex]': 'disabled ? null : _tabIndex',
1133 '[attr.aria-describedby]': '_ariaDescribedby || null',
1134 '[attr.aria-required]': 'role ? required : null',
1135 '[attr.aria-disabled]': 'disabled.toString()',
1136 '[attr.aria-invalid]': 'errorState',
1137 '[attr.aria-multiselectable]': 'multiple',
1138 '[attr.role]': 'role',
1139 '[class.mat-chip-list-disabled]': 'disabled',
1140 '[class.mat-chip-list-invalid]': 'errorState',
1141 '[class.mat-chip-list-required]': 'required',
1142 '[attr.aria-orientation]': 'ariaOrientation',
1143 'class': 'mat-chip-list',
1144 '(focus)': 'focus()',
1145 '(blur)': '_blur()',
1146 '(keydown)': '_keydown($event)',
1147 '[id]': '_uid'
1148 },
1149 providers: [{ provide: MatFormFieldControl, useExisting: MatChipList }],
1150 encapsulation: ViewEncapsulation.None,
1151 changeDetection: ChangeDetectionStrategy.OnPush,
1152 styles: [".mat-chip{position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transform:translateZ(0);border:none;-webkit-appearance:none;-moz-appearance:none}.mat-standard-chip{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);display:inline-flex;padding:7px 12px;border-radius:16px;align-items:center;cursor:default;min-height:32px;height:1px}._mat-animation-noopable.mat-standard-chip{transition:none;animation:none}.mat-standard-chip .mat-chip-remove{border:none;-webkit-appearance:none;-moz-appearance:none;padding:0;background:none}.mat-standard-chip .mat-chip-remove.mat-icon,.mat-standard-chip .mat-chip-remove .mat-icon{width:18px;height:18px;font-size:18px}.mat-standard-chip::after{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit;opacity:0;content:\"\";pointer-events:none;transition:opacity 200ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-standard-chip:hover::after{opacity:.12}.mat-standard-chip:focus{outline:none}.mat-standard-chip:focus::after{opacity:.16}.cdk-high-contrast-active .mat-standard-chip{outline:solid 1px}.cdk-high-contrast-active .mat-standard-chip:focus{outline:dotted 2px}.mat-standard-chip.mat-chip-disabled::after{opacity:0}.mat-standard-chip.mat-chip-disabled .mat-chip-remove,.mat-standard-chip.mat-chip-disabled .mat-chip-trailing-icon{cursor:default}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar,.mat-standard-chip.mat-chip-with-avatar{padding-top:0;padding-bottom:0}.mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-right:8px;padding-left:0}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon.mat-chip-with-avatar{padding-left:8px;padding-right:0}.mat-standard-chip.mat-chip-with-trailing-icon{padding-top:7px;padding-bottom:7px;padding-right:8px;padding-left:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-trailing-icon{padding-left:8px;padding-right:12px}.mat-standard-chip.mat-chip-with-avatar{padding-left:0;padding-right:12px}[dir=rtl] .mat-standard-chip.mat-chip-with-avatar{padding-right:0;padding-left:12px}.mat-standard-chip .mat-chip-avatar{width:24px;height:24px;margin-right:8px;margin-left:4px}[dir=rtl] .mat-standard-chip .mat-chip-avatar{margin-left:8px;margin-right:4px}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{width:18px;height:18px;cursor:pointer}.mat-standard-chip .mat-chip-remove,.mat-standard-chip .mat-chip-trailing-icon{margin-left:8px;margin-right:0}[dir=rtl] .mat-standard-chip .mat-chip-remove,[dir=rtl] .mat-standard-chip .mat-chip-trailing-icon{margin-right:8px;margin-left:0}.mat-chip-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit;overflow:hidden}.mat-chip-list-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;margin:-4px}.mat-chip-list-wrapper input.mat-input-element,.mat-chip-list-wrapper .mat-standard-chip{margin:4px}.mat-chip-list-stacked .mat-chip-list-wrapper{flex-direction:column;align-items:flex-start}.mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip{width:100%}.mat-chip-avatar{border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden;object-fit:cover}input.mat-chip-input{width:150px;margin:4px;flex:1 0 150px}\n"]
1153 }]
1154 }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.ChangeDetectorRef }, { type: ɵngcc2.Directionality, decorators: [{
1155 type: Optional
1156 }] }, { type: ɵngcc3.NgForm, decorators: [{
1157 type: Optional
1158 }] }, { type: ɵngcc3.FormGroupDirective, decorators: [{
1159 type: Optional
1160 }] }, { type: ɵngcc4.ErrorStateMatcher }, { type: ɵngcc3.NgControl, decorators: [{
1161 type: Optional
1162 }, {
1163 type: Self
1164 }] }]; }, { ariaOrientation: [{
1165 type: Input,
1166 args: ['aria-orientation']
1167 }], change: [{
1168 type: Output
1169 }], valueChange: [{
1170 type: Output
1171 }], multiple: [{
1172 type: Input
1173 }], compareWith: [{
1174 type: Input
1175 }], value: [{
1176 type: Input
1177 }], required: [{
1178 type: Input
1179 }], placeholder: [{
1180 type: Input
1181 }], disabled: [{
1182 type: Input
1183 }], selectable: [{
1184 type: Input
1185 }], tabIndex: [{
1186 type: Input
1187 }], errorStateMatcher: [{
1188 type: Input
1189 }], chips: [{
1190 type: ContentChildren,
1191 args: [MatChip, {
1192 // We need to use `descendants: true`, because Ivy will no longer match
1193 // indirect descendants if it's left as false.
1194 descendants: true
1195 }]
1196 }] }); })();
1197
1198/**
1199 * @license
1200 * Copyright Google LLC All Rights Reserved.
1201 *
1202 * Use of this source code is governed by an MIT-style license that can be
1203 * found in the LICENSE file at https://angular.io/license
1204 */
1205// Increasing integer for generating unique ids.
1206let nextUniqueId = 0;
1207/**
1208 * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.
1209 * May be placed inside or outside of an `<mat-chip-list>`.
1210 */
1211class MatChipInput {
1212 constructor(_elementRef, _defaultOptions) {
1213 this._elementRef = _elementRef;
1214 this._defaultOptions = _defaultOptions;
1215 /** Whether the control is focused. */
1216 this.focused = false;
1217 this._addOnBlur = false;
1218 /**
1219 * The list of key codes that will trigger a chipEnd event.
1220 *
1221 * Defaults to `[ENTER]`.
1222 */
1223 this.separatorKeyCodes = this._defaultOptions.separatorKeyCodes;
1224 /** Emitted when a chip is to be added. */
1225 this.chipEnd = new EventEmitter();
1226 /** The input's placeholder text. */
1227 this.placeholder = '';
1228 /** Unique id for the input. */
1229 this.id = `mat-chip-list-input-${nextUniqueId++}`;
1230 this._disabled = false;
1231 this.inputElement = this._elementRef.nativeElement;
1232 }
1233 /** Register input for chip list */
1234 set chipList(value) {
1235 if (value) {
1236 this._chipList = value;
1237 this._chipList.registerInput(this);
1238 }
1239 }
1240 /**
1241 * Whether or not the chipEnd event will be emitted when the input is blurred.
1242 */
1243 get addOnBlur() { return this._addOnBlur; }
1244 set addOnBlur(value) { this._addOnBlur = coerceBooleanProperty(value); }
1245 /** Whether the input is disabled. */
1246 get disabled() { return this._disabled || (this._chipList && this._chipList.disabled); }
1247 set disabled(value) { this._disabled = coerceBooleanProperty(value); }
1248 /** Whether the input is empty. */
1249 get empty() { return !this.inputElement.value; }
1250 ngOnChanges() {
1251 this._chipList.stateChanges.next();
1252 }
1253 ngOnDestroy() {
1254 this.chipEnd.complete();
1255 }
1256 ngAfterContentInit() {
1257 this._focusLastChipOnBackspace = this.empty;
1258 }
1259 /** Utility method to make host definition/tests more clear. */
1260 _keydown(event) {
1261 if (event) {
1262 // Allow the user's focus to escape when they're tabbing forward. Note that we don't
1263 // want to do this when going backwards, because focus should go back to the first chip.
1264 if (event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
1265 this._chipList._allowFocusEscape();
1266 }
1267 // To prevent the user from accidentally deleting chips when pressing BACKSPACE continuously,
1268 // We focus the last chip on backspace only after the user has released the backspace button,
1269 // and the input is empty (see behaviour in _keyup)
1270 if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
1271 this._chipList._keyManager.setLastItemActive();
1272 event.preventDefault();
1273 return;
1274 }
1275 else {
1276 this._focusLastChipOnBackspace = false;
1277 }
1278 }
1279 this._emitChipEnd(event);
1280 }
1281 /**
1282 * Pass events to the keyboard manager. Available here for tests.
1283 */
1284 _keyup(event) {
1285 // Allow user to move focus to chips next time he presses backspace
1286 if (!this._focusLastChipOnBackspace && event.keyCode === BACKSPACE && this.empty) {
1287 this._focusLastChipOnBackspace = true;
1288 event.preventDefault();
1289 }
1290 }
1291 /** Checks to see if the blur should emit the (chipEnd) event. */
1292 _blur() {
1293 if (this.addOnBlur) {
1294 this._emitChipEnd();
1295 }
1296 this.focused = false;
1297 // Blur the chip list if it is not focused
1298 if (!this._chipList.focused) {
1299 this._chipList._blur();
1300 }
1301 this._chipList.stateChanges.next();
1302 }
1303 _focus() {
1304 this.focused = true;
1305 this._focusLastChipOnBackspace = this.empty;
1306 this._chipList.stateChanges.next();
1307 }
1308 /** Checks to see if the (chipEnd) event needs to be emitted. */
1309 _emitChipEnd(event) {
1310 if (!this.inputElement.value && !!event) {
1311 this._chipList._keydown(event);
1312 }
1313 if (!event || this._isSeparatorKey(event)) {
1314 this.chipEnd.emit({
1315 input: this.inputElement,
1316 value: this.inputElement.value,
1317 chipInput: this,
1318 });
1319 event === null || event === void 0 ? void 0 : event.preventDefault();
1320 }
1321 }
1322 _onInput() {
1323 // Let chip list know whenever the value changes.
1324 this._chipList.stateChanges.next();
1325 }
1326 /** Focuses the input. */
1327 focus(options) {
1328 this.inputElement.focus(options);
1329 }
1330 /** Clears the input */
1331 clear() {
1332 this.inputElement.value = '';
1333 this._focusLastChipOnBackspace = true;
1334 }
1335 /** Checks whether a keycode is one of the configured separators. */
1336 _isSeparatorKey(event) {
1337 return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
1338 }
1339}
1340MatChipInput.ɵfac = function MatChipInput_Factory(t) { return new (t || MatChipInput)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(MAT_CHIPS_DEFAULT_OPTIONS)); };
1341MatChipInput.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: MatChipInput, selectors: [["input", "matChipInputFor", ""]], hostAttrs: [1, "mat-chip-input", "mat-input-element"], hostVars: 5, hostBindings: function MatChipInput_HostBindings(rf, ctx) { if (rf & 1) {
1342 ɵngcc0.ɵɵlistener("keydown", function MatChipInput_keydown_HostBindingHandler($event) { return ctx._keydown($event); })("keyup", function MatChipInput_keyup_HostBindingHandler($event) { return ctx._keyup($event); })("blur", function MatChipInput_blur_HostBindingHandler() { return ctx._blur(); })("focus", function MatChipInput_focus_HostBindingHandler() { return ctx._focus(); })("input", function MatChipInput_input_HostBindingHandler() { return ctx._onInput(); });
1343 } if (rf & 2) {
1344 ɵngcc0.ɵɵhostProperty("id", ctx.id);
1345 ɵngcc0.ɵɵattribute("disabled", ctx.disabled || null)("placeholder", ctx.placeholder || null)("aria-invalid", ctx._chipList && ctx._chipList.ngControl ? ctx._chipList.ngControl.invalid : null)("aria-required", ctx._chipList && ctx._chipList.required || null);
1346 } }, inputs: { separatorKeyCodes: ["matChipInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", chipList: ["matChipInputFor", "chipList"], addOnBlur: ["matChipInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { chipEnd: "matChipInputTokenEnd" }, exportAs: ["matChipInput", "matChipInputFor"], features: [ɵngcc0.ɵɵNgOnChangesFeature] });
1347MatChipInput.ctorParameters = () => [
1348 { type: ElementRef },
1349 { type: undefined, decorators: [{ type: Inject, args: [MAT_CHIPS_DEFAULT_OPTIONS,] }] }
1350];
1351MatChipInput.propDecorators = {
1352 chipList: [{ type: Input, args: ['matChipInputFor',] }],
1353 addOnBlur: [{ type: Input, args: ['matChipInputAddOnBlur',] }],
1354 separatorKeyCodes: [{ type: Input, args: ['matChipInputSeparatorKeyCodes',] }],
1355 chipEnd: [{ type: Output, args: ['matChipInputTokenEnd',] }],
1356 placeholder: [{ type: Input }],
1357 id: [{ type: Input }],
1358 disabled: [{ type: Input }]
1359};
1360(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatChipInput, [{
1361 type: Directive,
1362 args: [{
1363 selector: 'input[matChipInputFor]',
1364 exportAs: 'matChipInput, matChipInputFor',
1365 host: {
1366 'class': 'mat-chip-input mat-input-element',
1367 '(keydown)': '_keydown($event)',
1368 '(keyup)': '_keyup($event)',
1369 '(blur)': '_blur()',
1370 '(focus)': '_focus()',
1371 '(input)': '_onInput()',
1372 '[id]': 'id',
1373 '[attr.disabled]': 'disabled || null',
1374 '[attr.placeholder]': 'placeholder || null',
1375 '[attr.aria-invalid]': '_chipList && _chipList.ngControl ? _chipList.ngControl.invalid : null',
1376 '[attr.aria-required]': '_chipList && _chipList.required || null'
1377 }
1378 }]
1379 }], function () { return [{ type: ɵngcc0.ElementRef }, { type: undefined, decorators: [{
1380 type: Inject,
1381 args: [MAT_CHIPS_DEFAULT_OPTIONS]
1382 }] }]; }, { separatorKeyCodes: [{
1383 type: Input,
1384 args: ['matChipInputSeparatorKeyCodes']
1385 }], chipEnd: [{
1386 type: Output,
1387 args: ['matChipInputTokenEnd']
1388 }], placeholder: [{
1389 type: Input
1390 }], id: [{
1391 type: Input
1392 }], chipList: [{
1393 type: Input,
1394 args: ['matChipInputFor']
1395 }], addOnBlur: [{
1396 type: Input,
1397 args: ['matChipInputAddOnBlur']
1398 }], disabled: [{
1399 type: Input
1400 }] }); })();
1401
1402/**
1403 * @license
1404 * Copyright Google LLC All Rights Reserved.
1405 *
1406 * Use of this source code is governed by an MIT-style license that can be
1407 * found in the LICENSE file at https://angular.io/license
1408 */
1409const CHIP_DECLARATIONS = [
1410 MatChipList,
1411 MatChip,
1412 MatChipInput,
1413 MatChipRemove,
1414 MatChipAvatar,
1415 MatChipTrailingIcon,
1416];
1417const ɵ0 = {
1418 separatorKeyCodes: [ENTER]
1419};
1420class MatChipsModule {
1421}
1422MatChipsModule.ɵfac = function MatChipsModule_Factory(t) { return new (t || MatChipsModule)(); };
1423MatChipsModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: MatChipsModule });
1424MatChipsModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({ providers: [
1425 ErrorStateMatcher,
1426 {
1427 provide: MAT_CHIPS_DEFAULT_OPTIONS,
1428 useValue: ɵ0
1429 }
1430 ], imports: [[MatCommonModule]] });
1431(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(MatChipsModule, [{
1432 type: NgModule,
1433 args: [{
1434 imports: [MatCommonModule],
1435 exports: CHIP_DECLARATIONS,
1436 declarations: CHIP_DECLARATIONS,
1437 providers: [
1438 ErrorStateMatcher,
1439 {
1440 provide: MAT_CHIPS_DEFAULT_OPTIONS,
1441 useValue: ɵ0
1442 }
1443 ]
1444 }]
1445 }], null, null); })();
1446(function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(MatChipsModule, { declarations: function () { return [MatChipList, MatChip, MatChipInput, MatChipRemove, MatChipAvatar, MatChipTrailingIcon]; }, imports: function () { return [MatCommonModule]; }, exports: function () { return [MatChipList, MatChip, MatChipInput, MatChipRemove, MatChipAvatar, MatChipTrailingIcon]; } }); })();
1447
1448/**
1449 * @license
1450 * Copyright Google LLC All Rights Reserved.
1451 *
1452 * Use of this source code is governed by an MIT-style license that can be
1453 * found in the LICENSE file at https://angular.io/license
1454 */
1455
1456/**
1457 * Generated bundle index. Do not edit.
1458 */
1459
1460export { MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipInput, MatChipList, MatChipListChange, MatChipRemove, MatChipSelectionChange, MatChipTrailingIcon, MatChipsModule, ɵ0 };
1461
1462//# sourceMappingURL=chips.js.map
Note: See TracBrowser for help on using the repository browser.