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

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

initial commit

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