@angular/material 8.0.0-beta.2 → 8.0.0

package/esm2015/chips.js

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { BACKSPACE, DELETE, SPACE, END, HOME, hasModifierKey, ENTER } from '@angular/cdk/keycodes';
+import { BACKSPACE, DELETE, SPACE, END, HOME, hasModifierKey, TAB, ENTER } from '@angular/cdk/keycodes';
 import { Platform } from '@angular/cdk/platform';
 import { ContentChild, Directive, ElementRef, EventEmitter, forwardRef, Inject, Input, NgZone, Optional, Output, InjectionToken, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Self, ViewEncapsulation, NgModule } from '@angular/core';
 import { MAT_RIPPLE_GLOBAL_OPTIONS, mixinColor, mixinDisabled, mixinDisableRipple, RippleRenderer, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
@@ -20,7 +20,7 @@ import { MatFormFieldControl } from '@angular/material/form-field';
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Event object emitted by MatChip when selected or deselected.
@@ -51,8 +51,6 @@ class MatChipBase {
 }
 /** @type {?} */
 const _MatChipMixinBase = mixinColor(mixinDisableRipple(mixinDisabled(MatChipBase)), 'primary');
-/** @type {?} */
-const CHIP_ATTRIBUTE_NAMES = ['mat-basic-chip'];
 /**
  * Dummy directive to add CSS class to chip avatar.
  * \@docs-private
@@ -211,15 +209,18 @@ class MatChip extends _MatChipMixinBase {
      * @return {?}
      */
     _addHostClassName() {
-        // Add class for the different chips
-        for (const attr of CHIP_ATTRIBUTE_NAMES) {
-            if (this._elementRef.nativeElement.hasAttribute(attr) ||
-                this._elementRef.nativeElement.tagName.toLowerCase() === attr) {
-                ((/** @type {?} */ (this._elementRef.nativeElement))).classList.add(attr);
-                return;
-            }
+        /** @type {?} */
+        const basicChipAttrName = 'mat-basic-chip';
+        /** @type {?} */
+        const element = (/** @type {?} */ (this._elementRef.nativeElement));
+        if (element.hasAttribute(basicChipAttrName) ||
+            element.tagName.toLowerCase() === basicChipAttrName) {
+            element.classList.add(basicChipAttrName);
+            return;
+        }
+        else {
+            element.classList.add('mat-standard-chip');
         }
-        ((/** @type {?} */ (this._elementRef.nativeElement))).classList.add('mat-standard-chip');
     }
     /**
      * @return {?}
@@ -342,12 +343,18 @@ class MatChip extends _MatChipMixinBase {
         this._ngZone.onStable
             .asObservable()
             .pipe(take(1))
-            .subscribe(() => {
-            this._ngZone.run(() => {
+            .subscribe((/**
+         * @return {?}
+         */
+        () => {
+            this._ngZone.run((/**
+             * @return {?}
+             */
+            () => {
                 this._hasFocus = false;
                 this._onBlur.next({ chip: this });
-            });
-        });
+            }));
+        }));
     }
     /**
      * @private
@@ -395,7 +402,10 @@ MatChip.ctorParameters = () => [
 MatChip.propDecorators = {
     avatar: [{ type: ContentChild, args: [MatChipAvatar, { static: false },] }],
     trailingIcon: [{ type: ContentChild, args: [MatChipTrailingIcon, { static: false },] }],
-    removeIcon: [{ type: ContentChild, args: [forwardRef(() => MatChipRemove), { static: false },] }],
+    removeIcon: [{ type: ContentChild, args: [forwardRef((/**
+                 * @return {?}
+                 */
+                () => MatChipRemove)), { static: false },] }],
     selected: [{ type: Input }],
     value: [{ type: Input }],
     selectable: [{ type: Input }],
@@ -430,8 +440,10 @@ class MatChipRemove {
      * @return {?}
      */
     _handleClick(event) {
-        if (this._parentChip.removable) {
-            this._parentChip.remove();
+        /** @type {?} */
+        const parentChip = this._parentChip;
+        if (parentChip.removable && !parentChip.disabled) {
+            parentChip.remove();
         }
         // We need to stop event propagation because otherwise the event will bubble up to the
         // form field and cause the `onContainerClick` method to be invoked. This method would then
@@ -457,7 +469,7 @@ MatChipRemove.ctorParameters = () => [
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Injection token to be used to override the default options for the chips module.
@@ -467,7 +479,7 @@ const MAT_CHIPS_DEFAULT_OPTIONS = new InjectionToken('mat-chips-default-options'
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 // Boilerplate for applying mixins to MatChipList.
 /**
@@ -555,13 +567,24 @@ class MatChipList extends _MatChipListMixinBase {
         /**
          * Function when touched
          */
-        this._onTouched = () => { };
+        this._onTouched = (/**
+         * @return {?}
+         */
+        () => { });
         /**
          * Function when changed
          */
-        this._onChange = () => { };
+        this._onChange = (/**
+         * @return {?}
+         */
+        () => { });
         this._multiple = false;
-        this._compareWith = (o1, o2) => o1 === o2;
+        this._compareWith = (/**
+         * @param {?} o1
+         * @param {?} o2
+         * @return {?}
+         */
+        (o1, o2) => o1 === o2);
         this._required = false;
         this._disabled = false;
         /**
@@ -726,7 +749,11 @@ class MatChipList extends _MatChipListMixinBase {
     set selectable(value) {
         this._selectable = coerceBooleanProperty(value);
         if (this.chips) {
-            this.chips.forEach(chip => chip.chipListSelectable = this._selectable);
+            this.chips.forEach((/**
+             * @param {?} chip
+             * @return {?}
+             */
+            chip => chip.chipListSelectable = this._selectable));
         }
     }
     /**
@@ -742,28 +769,44 @@ class MatChipList extends _MatChipListMixinBase {
      * @return {?}
      */
     get chipSelectionChanges() {
-        return merge(...this.chips.map(chip => chip.selectionChange));
+        return merge(...this.chips.map((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => chip.selectionChange)));
     }
     /**
      * Combined stream of all of the child chips' focus change events.
      * @return {?}
      */
     get chipFocusChanges() {
-        return merge(...this.chips.map(chip => chip._onFocus));
+        return merge(...this.chips.map((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => chip._onFocus)));
     }
     /**
      * Combined stream of all of the child chips' blur change events.
      * @return {?}
      */
     get chipBlurChanges() {
-        return merge(...this.chips.map(chip => chip._onBlur));
+        return merge(...this.chips.map((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => chip._onBlur)));
     }
     /**
      * Combined stream of all of the child chips' remove change events.
      * @return {?}
      */
     get chipRemoveChanges() {
-        return merge(...this.chips.map(chip => chip.destroyed));
+        return merge(...this.chips.map((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => chip.destroyed)));
     }
     /**
      * @return {?}
@@ -776,25 +819,32 @@ class MatChipList extends _MatChipListMixinBase {
         if (this._dir) {
             this._dir.change
                 .pipe(takeUntil(this._destroyed))
-                .subscribe(dir => this._keyManager.withHorizontalOrientation(dir));
+                .subscribe((/**
+             * @param {?} dir
+             * @return {?}
+             */
+            dir => this._keyManager.withHorizontalOrientation(dir)));
         }
-        // Prevents the chip list from capturing focus and redirecting
-        // it back to the first chip when the user tabs out.
-        this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
-            this._tabIndex = -1;
-            setTimeout(() => {
-                this._tabIndex = this._userTabIndex || 0;
-                this._changeDetectorRef.markForCheck();
-            });
-        });
+        this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe((/**
+         * @return {?}
+         */
+        () => {
+            this._allowFocusEscape();
+        }));
         // When the list changes, re-subscribe
-        this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+        this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe((/**
+         * @return {?}
+         */
+        () => {
             if (this.disabled) {
                 // Since this happens after the content has been
                 // checked, we need to defer it to the next tick.
-                Promise.resolve().then(() => {
+                Promise.resolve().then((/**
+                 * @return {?}
+                 */
+                () => {
                     this._syncChipsState();
-                });
+                }));
             }
             this._resetChips();
             // Reset chips selected/deselected status
@@ -804,7 +854,7 @@ class MatChipList extends _MatChipListMixinBase {
             // Check to see if we have a destroyed chip and need to refocus
             this._updateFocusForDestroyedChips();
             this.stateChanges.next();
-        });
+        }));
     }
     /**
      * @return {?}
@@ -970,10 +1020,16 @@ class MatChipList extends _MatChipListMixinBase {
      * @return {?}
      */
     _updateFocusForDestroyedChips() {
-        if (this._lastDestroyedChipIndex != null && this.chips.length) {
-            /** @type {?} */
-            const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
-            this._keyManager.setActiveItem(newChipIndex);
+        // Move focus to the closest chip. If no other chips remain, focus the chip-list itself.
+        if (this._lastDestroyedChipIndex != null) {
+            if (this.chips.length) {
+                /** @type {?} */
+                const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
+                this._keyManager.setActiveItem(newChipIndex);
+            }
+            else {
+                this.focus();
+            }
         }
         this._lastDestroyedChipIndex = null;
     }
@@ -1007,9 +1063,17 @@ class MatChipList extends _MatChipListMixinBase {
      */
     _setSelectionByValue(value, isUserInput = true) {
         this._clearSelection();
-        this.chips.forEach(chip => chip.deselect());
+        this.chips.forEach((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => chip.deselect()));
         if (Array.isArray(value)) {
-            value.forEach(currentValue => this._selectValue(currentValue, isUserInput));
+            value.forEach((/**
+             * @param {?} currentValue
+             * @return {?}
+             */
+            currentValue => this._selectValue(currentValue, isUserInput)));
             this._sortValues();
         }
         else {
@@ -1033,9 +1097,13 @@ class MatChipList extends _MatChipListMixinBase {
      */
     _selectValue(value, isUserInput = true) {
         /** @type {?} */
-        const correspondingChip = this.chips.find(chip => {
+        const correspondingChip = this.chips.find((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => {
             return chip.value != null && this._compareWith(chip.value, value);
-        });
+        }));
         if (correspondingChip) {
             isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();
             this._selectionModel.select(correspondingChip);
@@ -1049,12 +1117,15 @@ class MatChipList extends _MatChipListMixinBase {
     _initializeSelection() {
         // Defer setting the value in order to avoid the "Expression
         // has changed after it was checked" errors from Angular.
-        Promise.resolve().then(() => {
+        Promise.resolve().then((/**
+         * @return {?}
+         */
+        () => {
             if (this.ngControl || this._value) {
                 this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false);
                 this.stateChanges.next();
             }
-        });
+        }));
     }
     /**
      * Deselects every chip in the list.
@@ -1064,11 +1135,15 @@ class MatChipList extends _MatChipListMixinBase {
      */
     _clearSelection(skip) {
         this._selectionModel.clear();
-        this.chips.forEach(chip => {
+        this.chips.forEach((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => {
             if (chip !== skip) {
                 chip.deselect();
             }
-        });
+        }));
         this.stateChanges.next();
     }
     /**
@@ -1080,11 +1155,15 @@ class MatChipList extends _MatChipListMixinBase {
     _sortValues() {
         if (this._multiple) {
             this._selectionModel.clear();
-            this.chips.forEach(chip => {
+            this.chips.forEach((/**
+             * @param {?} chip
+             * @return {?}
+             */
+            chip => {
                 if (chip.selected) {
                     this._selectionModel.select(chip);
                 }
-            });
+            }));
             this.stateChanges.next();
         }
     }
@@ -1098,7 +1177,11 @@ class MatChipList extends _MatChipListMixinBase {
         /** @type {?} */
         let valueToEmit = null;
         if (Array.isArray(this.selected)) {
-            valueToEmit = this.selected.map(chip => chip.value);
+            valueToEmit = this.selected.map((/**
+             * @param {?} chip
+             * @return {?}
+             */
+            chip => chip.value));
         }
         else {
             valueToEmit = this.selected ? this.selected.value : fallbackValue;
@@ -1123,11 +1206,14 @@ class MatChipList extends _MatChipListMixinBase {
                 // If the focus is not moved to chip input, mark the field as touched. If the focus moved
                 // to chip input, do nothing.
                 // Timeout is needed to wait for the focus() event trigger on chip input.
-                setTimeout(() => {
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
                     if (!this.focused) {
                         this._markAsTouched();
                     }
-                });
+                }));
             }
             else {
                 // If there's no chip input, then mark the field as touched.
@@ -1144,6 +1230,24 @@ class MatChipList extends _MatChipListMixinBase {
         this._changeDetectorRef.markForCheck();
         this.stateChanges.next();
     }
+    /**
+     * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
+     * user to tab out of it. This prevents the list from capturing focus and redirecting
+     * it back to the first chip, creating a focus trap, if it user tries to tab away.
+     * @return {?}
+     */
+    _allowFocusEscape() {
+        if (this._tabIndex !== -1) {
+            this._tabIndex = -1;
+            setTimeout((/**
+             * @return {?}
+             */
+            () => {
+                this._tabIndex = this._userTabIndex || 0;
+                this._changeDetectorRef.markForCheck();
+            }));
+        }
+    }
     /**
      * @private
      * @return {?}
@@ -1182,22 +1286,30 @@ class MatChipList extends _MatChipListMixinBase {
      * @return {?}
      */
     _listenToChipsSelection() {
-        this._chipSelectionSubscription = this.chipSelectionChanges.subscribe(event => {
+        this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             event.source.selected
                 ? this._selectionModel.select(event.source)
                 : this._selectionModel.deselect(event.source);
             // For single selection chip list, make sure the deselected value is unselected.
             if (!this.multiple) {
-                this.chips.forEach(chip => {
+                this.chips.forEach((/**
+                 * @param {?} chip
+                 * @return {?}
+                 */
+                chip => {
                     if (!this._selectionModel.isSelected(chip) && chip.selected) {
                         chip.deselect();
                     }
-                });
+                }));
             }
             if (event.isUserInput) {
                 this._propagateChanges();
             }
-        });
+        }));
     }
     /**
      * Listens to user-generated selection events on each chip.
@@ -1205,25 +1317,36 @@ class MatChipList extends _MatChipListMixinBase {
      * @return {?}
      */
     _listenToChipsFocus() {
-        this._chipFocusSubscription = this.chipFocusChanges.subscribe(event => {
+        this._chipFocusSubscription = this.chipFocusChanges.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             /** @type {?} */
             let chipIndex = this.chips.toArray().indexOf(event.chip);
             if (this._isValidIndex(chipIndex)) {
                 this._keyManager.updateActiveItemIndex(chipIndex);
             }
             this.stateChanges.next();
-        });
-        this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
+        }));
+        this._chipBlurSubscription = this.chipBlurChanges.subscribe((/**
+         * @return {?}
+         */
+        () => {
             this._blur();
             this.stateChanges.next();
-        });
+        }));
     }
     /**
      * @private
      * @return {?}
      */
     _listenToChipsRemoved() {
-        this._chipRemoveSubscription = this.chipRemoveChanges.subscribe(event => {
+        this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             /** @type {?} */
             const chip = event.chip;
             /** @type {?} */
@@ -1234,7 +1357,7 @@ class MatChipList extends _MatChipListMixinBase {
             if (this._isValidIndex(chipIndex) && chip._hasFocus) {
                 this._lastDestroyedChipIndex = chipIndex;
             }
-        });
+        }));
     }
     /**
      * Checks whether an event comes from inside a chip element.
@@ -1259,7 +1382,11 @@ class MatChipList extends _MatChipListMixinBase {
      * @return {?}
      */
     _hasFocusedChip() {
-        return this.chips.some(chip => chip._hasFocus);
+        return this.chips.some((/**
+         * @param {?} chip
+         * @return {?}
+         */
+        chip => chip._hasFocus));
     }
     /**
      * Syncs the list's state with the individual chips.
@@ -1268,10 +1395,14 @@ class MatChipList extends _MatChipListMixinBase {
      */
     _syncChipsState() {
         if (this.chips) {
-            this.chips.forEach(chip => {
+            this.chips.forEach((/**
+             * @param {?} chip
+             * @return {?}
+             */
+            chip => {
                 chip.disabled = this._disabled;
                 chip._chipListMultiple = this.multiple;
-            });
+            }));
         }
     }
 }
@@ -1326,12 +1457,16 @@ MatChipList.propDecorators = {
     tabIndex: [{ type: Input }],
     change: [{ type: Output }],
     valueChange: [{ type: Output }],
-    chips: [{ type: ContentChildren, args: [MatChip,] }]
+    chips: [{ type: ContentChildren, args: [MatChip, {
+                    // We need to use `descendants: true`, because Ivy will no longer match
+                    // indirect descendants if it's left as false.
+                    descendants: true
+                },] }]
 };
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 // Increasing integer for generating unique ids.
 /** @type {?} */
@@ -1422,6 +1557,11 @@ class MatChipInput {
      * @return {?}
      */
     _keydown(event) {
+        // Allow the user's focus to escape when they're tabbing forward. Note that we don't
+        // want to do this when going backwards, because focus should go back to the first chip.
+        if (event && event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
+            this._chipList._allowFocusEscape();
+        }
         this._emitChipEnd(event);
     }
     /**
@@ -1527,7 +1667,7 @@ MatChipInput.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 const CHIP_DECLARATIONS = [
@@ -1559,13 +1699,13 @@ MatChipsModule.decorators = [
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { MatChipsModule, MatChipListBase, _MatChipListMixinBase, MatChipListChange, MatChipList, MatChipSelectionChange, MatChipBase, _MatChipMixinBase, MatChipAvatar, MatChipTrailingIcon, MatChip, MatChipRemove, MatChipInput, MAT_CHIPS_DEFAULT_OPTIONS };
+export { MatChipsModule, MatChipListChange, MatChipList, MatChipSelectionChange, MatChipAvatar, MatChipTrailingIcon, MatChip, MatChipRemove, MatChipInput, MAT_CHIPS_DEFAULT_OPTIONS };
 //# sourceMappingURL=chips.js.map