@angular-mdc/web
Version:
1,245 lines (1,238 loc) • 38.4 kB
JavaScript
/**
* @license
* Copyright (c) Dominic Carretto
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
*/
import { Directive, ElementRef, Input, InjectionToken, Component, ViewEncapsulation, ChangeDetectionStrategy, EventEmitter, NgZone, ChangeDetectorRef, Optional, Inject, Output, ContentChild, ContentChildren, forwardRef, ViewChild, Attribute, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdcIcon, MdcIconRegistry, MDC_ICON_LOCATION, MdcIconModule } from '@angular-mdc/web/icon';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { Subject, fromEvent, merge } from 'rxjs';
import { takeUntil, startWith } from 'rxjs/operators';
import { MDCRippleFoundation } from '@material/ripple';
import { MDCComponent } from '@angular-mdc/web/base';
import { MdcRipple } from '@angular-mdc/web/ripple';
import { MDCChipFoundation, MDCChipSetFoundation } from '@material/chips';
import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: chips/chip-directives.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcChipPrimaryAction {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.role = 'button';
this.tabIndex = null;
this._root = this.elementRef.nativeElement;
}
}
MdcChipPrimaryAction.decorators = [
{ type: Directive, args: [{
selector: 'mdc-chip-primary-action, [mdcChipPrimaryAction]',
host: {
'[attr.role]': 'role',
'[attr.tabindex]': 'tabIndex',
'class': 'mdc-chip__action--primary'
}
},] },
];
/** @nocollapse */
MdcChipPrimaryAction.ctorParameters = () => [
{ type: ElementRef }
];
MdcChipPrimaryAction.propDecorators = {
role: [{ type: Input }],
tabIndex: [{ type: Input }]
};
class MdcChipText {
}
MdcChipText.decorators = [
{ type: Directive, args: [{
selector: 'mdc-chip-text, [mdcChipText]',
host: {
'class': 'mdc-chip__text'
}
},] },
];
/**
* @fileoverview added by tsickle
* Generated from: chips/chip.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token used to provide the parent MdcChipSet component to MdcChip.
* @type {?}
*/
const MDC_CHIPSET_PARENT_COMPONENT = new InjectionToken('MDC_CHIPSET_PARENT_COMPONENT');
/** @type {?} */
let nextUniqueId = 0;
class MdcChipCheckmark {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
MdcChipCheckmark.decorators = [
{ type: Component, args: [{selector: 'mdc-chip-checkmark',
exportAs: 'mdcChipCheckmark',
host: {
'class': 'mdc-chip__checkmark'
},
template: `
<svg class="mdc-chip__checkmark-svg"
viewBox="-2 -3 30 30"
focusable="false">
<path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcChipCheckmark.ctorParameters = () => [
{ type: ElementRef }
];
class MdcChip extends MDCComponent {
/**
* @param {?} _platform
* @param {?} _ngZone
* @param {?} _changeDetectorRef
* @param {?} _ripple
* @param {?} elementRef
* @param {?} _parent
*/
constructor(_platform, _ngZone, _changeDetectorRef, _ripple, elementRef, _parent) {
super(elementRef);
this._platform = _platform;
this._ngZone = _ngZone;
this._changeDetectorRef = _changeDetectorRef;
this._ripple = _ripple;
this.elementRef = elementRef;
this._parent = _parent;
/**
* Emits whenever the component is destroyed.
*/
this._destroyed = new Subject();
this._id = `mdc-chip-${nextUniqueId++}`;
this._filter = false;
this._choice = false;
this._input = false;
this._removable = true;
this._touch = false;
this._disableRipple = false;
/**
* Emitted when the chip is interacted with.
*/
this.interactionEvent = new EventEmitter();
/**
* Emitted when the chip is selected or deselected.
*/
this.selectionChange = new EventEmitter();
/**
* Emitted as chip navigation event.
*/
this.navigationEvent = new EventEmitter();
/**
* Emitted when trailing icon is interacted with.
*/
this.trailingIconInteraction = new EventEmitter();
/**
* Emitted when a chip is to be removed.
*/
this.removalEvent = new EventEmitter();
this._root = this.elementRef.nativeElement;
this._ripple = this._createRipple();
this._ripple.init();
}
/**
* The unique ID of the chip.
* @return {?}
*/
get id() {
return this._id;
}
/**
* @return {?}
*/
get leadingIcon() {
return this._icons.find((/**
* @param {?} _
* @return {?}
*/
(_) => _.leading));
}
/**
* @return {?}
*/
get trailingIcon() {
return this._icons.find((/**
* @param {?} _
* @return {?}
*/
(_) => _.trailing));
}
/**
* @return {?}
*/
get filter() {
return this._filter;
}
/**
* @param {?} value
* @return {?}
*/
set filter(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._filter) {
this._filter = newValue;
}
}
/**
* @return {?}
*/
get choice() {
return this._choice;
}
/**
* @param {?} value
* @return {?}
*/
set choice(value) {
this._choice = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get input() {
return this._input;
}
/**
* @param {?} value
* @return {?}
*/
set input(value) {
this._input = coerceBooleanProperty(value);
}
/**
* Determines whether or not the chip displays the remove styling and emits (removed) events.
* @return {?}
*/
get removable() {
return this._removable;
}
/**
* @param {?} value
* @return {?}
*/
set removable(value) {
/** @type {?} */
const newValue = coerceBooleanProperty(value);
if (newValue !== this._removable) {
this._removable = value;
this._foundation.setShouldRemoveOnTrailingIconClick(this._removable);
}
}
/**
* @return {?}
*/
get touch() {
return this._touch;
}
/**
* @param {?} value
* @return {?}
*/
set touch(value) {
this._touch = coerceBooleanProperty(value);
}
/**
* Whether the chip ripple is disabled.
* @return {?}
*/
get disableRipple() {
return this._disableRipple;
}
/**
* @param {?} value
* @return {?}
*/
set disableRipple(value) {
this._disableRipple = coerceBooleanProperty(value);
}
/**
* The value of the chip. Defaults to the content inside `<mdc-chip>` tags.
* @return {?}
*/
get value() {
var _a, _b;
return _b = (_a = this._value, (_a !== null && _a !== void 0 ? _a : this._root.textContent)), (_b !== null && _b !== void 0 ? _b : undefined);
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
this._value = value;
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._root.classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._root.classList.remove(className)),
hasClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._root.classList.contains(className)),
addClassToLeadingIcon: (/**
* @param {?} className
* @return {?}
*/
(className) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = this.leadingIcon) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.add(className); }),
removeClassFromLeadingIcon: (/**
* @param {?} className
* @return {?}
*/
(className) => { var _a, _b, _c, _d; return (_d = (_c = (_b = (_a = this.leadingIcon) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove(className); }),
eventTargetHasClass: (/**
* @param {?} target
* @param {?} className
* @return {?}
*/
(target, className) => (target && ((/** @type {?} */ (target))).classList) ? ((/** @type {?} */ (target))).classList.contains(className) : false),
focusPrimaryAction: (/**
* @return {?}
*/
() => this._primaryAction._root.focus()),
focusTrailingAction: (/**
* @return {?}
*/
() => { var _a, _b, _c; return (_c = (_b = (_a = this.trailingIcon) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.focus(); }),
notifyInteraction: (/**
* @return {?}
*/
() => this.interactionEvent.emit({
chipId: this._id,
value: this._value
})),
notifySelection: (/**
* @param {?} selected
* @param {?} chipSetShouldIgnore
* @return {?}
*/
(selected, chipSetShouldIgnore) => this.selectionChange.emit({
chipId: this._id,
selected: selected,
value: selected ? this._value : undefined,
shouldIgnore: chipSetShouldIgnore
})),
notifyNavigation: (/**
* @param {?} key
* @param {?} source
* @return {?}
*/
(key, source) => this.navigationEvent.emit({
chipId: this.id,
value: this._value,
key: key,
source: source
})),
notifyTrailingIconInteraction: (/**
* @return {?}
*/
() => this.trailingIconInteraction.emit({
chipId: this.id,
value: this._value
})),
notifyRemoval: (/**
* @return {?}
*/
() => this.removalEvent.emit({
chipId: this.id,
value: this._value,
removedAnnouncement: null
})),
getComputedStyleValue: (/**
* @param {?} propertyName
* @return {?}
*/
(propertyName) => this._platform.isBrowser ? window.getComputedStyle(this._root).getPropertyValue(propertyName) : ''),
setStyleProperty: (/**
* @param {?} propertyName
* @param {?} value
* @return {?}
*/
(propertyName, value) => ((/** @type {?} */ (this._root))).style.setProperty(propertyName, value)),
setTrailingActionAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
(attr, value) => { var _a, _b, _c; return (_c = (_b = (_a = this.trailingIcon) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.setAttribute(attr, value); }),
hasLeadingIcon: (/**
* @return {?}
*/
() => !!this.leadingIcon),
hasTrailingAction: (/**
* @return {?}
*/
() => !!this.trailingIcon),
setPrimaryActionAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
(attr, value) => this._primaryAction._root.setAttribute(attr, value)),
getRootBoundingClientRect: (/**
* @return {?}
*/
() => this._root.getBoundingClientRect()),
getCheckmarkBoundingClientRect: (/**
* @return {?}
*/
() => { var _a, _b, _c, _d; return _d = (_c = (_b = (_a = this._checkmark) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect(), (_d !== null && _d !== void 0 ? _d : null); }),
isRTL: (/**
* @return {?}
*/
() => typeof window !== 'undefined' ?
window.getComputedStyle(this._root).getPropertyValue('direction') === 'rtl' : false),
getAttribute: (/**
* @param {?} attr
* @return {?}
*/
(attr) => this._root.getAttribute(attr))
};
return new MDCChipFoundation(adapter);
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._foundation.init();
this._setVariantFromChipSet();
this._loadListeners();
}
/**
* @return {?}
*/
ngOnDestroy() {
var _a, _b;
this._destroyed.next();
this._destroyed.complete();
(_a = this._ripple) === null || _a === void 0 ? void 0 : _a.destroy();
(_b = this._foundation) === null || _b === void 0 ? void 0 : _b.destroy();
}
/**
* @param {?} selected
* @param {?} shouldNotifyClients
* @return {?}
*/
setSelectedFromChipSet(selected, shouldNotifyClients) {
this._foundation.setSelectedFromChipSet(selected, shouldNotifyClients);
}
/**
* Allows for programmatic focusing of the chip.
* @return {?}
*/
focus() {
this.focusPrimaryAction();
}
/**
* @return {?}
*/
focusPrimaryAction() {
this._foundation.focusPrimaryAction();
}
/**
* @return {?}
*/
focusTrailingAction() {
this._foundation.focusTrailingAction();
}
/**
* @return {?}
*/
removeFocus() {
this._foundation.removeFocus();
}
/**
* Allows for programmatic removal of the chip.
* Informs any listeners of the removal request. Does not remove the chip from the DOM.
* @return {?}
*/
remove() {
if (this.removable) {
this._foundation.beginExit();
}
}
/**
* @param {?} evt
* @return {?}
*/
_handleInteraction(evt) {
this._foundation.handleInteraction(evt);
}
/**
* @param {?} evt
* @return {?}
*/
_onKeydown(evt) {
this._foundation.handleInteraction(evt);
this._foundation.handleKeydown(evt);
}
/**
* @param {?} evt
* @return {?}
*/
_handleTrailingIconInteraction(evt) {
this._foundation.handleTrailingIconInteraction(evt);
}
/**
* @private
* @return {?}
*/
_createRipple() {
/** @type {?} */
const adapter = Object.assign(Object.assign({}, MdcRipple.createAdapter(this)), { computeBoundingRect: (/**
* @return {?}
*/
() => this._foundation.getDimensions()), isSurfaceDisabled: (/**
* @return {?}
*/
() => this._disableRipple) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
}
/**
* @private
* @return {?}
*/
_setVariantFromChipSet() {
if (this._parent) {
this.input = this._parent.input;
this.filter = this._parent.filter;
this.choice = this._parent.choice;
this._changeDetectorRef.detectChanges();
}
}
/**
* @private
* @return {?}
*/
_loadListeners() {
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => fromEvent(this._root, 'transitionend')
.pipe(takeUntil(this._destroyed))
.subscribe((/**
* @param {?} evt
* @return {?}
*/
evt => this._ngZone.run((/**
* @return {?}
*/
() => this._foundation.handleTransitionEnd(evt)))))));
}
}
MdcChip.decorators = [
{ type: Component, args: [{selector: 'mdc-chip',
exportAs: 'mdcChip',
host: {
'[id]': 'id',
'role': 'row',
'class': 'mdc-chip',
'[class.mdc-chip--selected]': 'selected',
'[class.mdc-chip--touch]': 'touch',
'(click)': '_handleInteraction($event)',
'(keydown)': '_onKeydown($event)'
},
template: `
<div class="mdc-chip__ripple"></div>
<ng-content select="mdc-chip-icon[leading]"></ng-content>
<mdc-chip-checkmark *ngIf="filter"></mdc-chip-checkmark>
<span role="gridcell">
<mdc-chip-primary-action>
<div class="mdc-chip__touch" *ngIf="touch"></div>
<mdc-chip-text *ngIf="label">{{label}}</mdc-chip-text>
<ng-content></ng-content>
</mdc-chip-primary-action>
</span>
<span role="gridcell" *ngIf="!!trailingIcon">
<ng-content select="mdc-chip-icon[trailing]"></ng-content>
</span>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [MdcRipple]
},] },
];
/** @nocollapse */
MdcChip.ctorParameters = () => [
{ type: Platform },
{ type: NgZone },
{ type: ChangeDetectorRef },
{ type: MdcRipple },
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MDC_CHIPSET_PARENT_COMPONENT,] }] }
];
MdcChip.propDecorators = {
selected: [{ type: Input }],
label: [{ type: Input }],
filter: [{ type: Input }],
choice: [{ type: Input }],
input: [{ type: Input }],
removable: [{ type: Input }],
touch: [{ type: Input }],
disableRipple: [{ type: Input }],
value: [{ type: Input }],
interactionEvent: [{ type: Output }],
selectionChange: [{ type: Output }],
navigationEvent: [{ type: Output }],
trailingIconInteraction: [{ type: Output }],
removalEvent: [{ type: Output }],
_checkmark: [{ type: ContentChild, args: [MdcChipCheckmark, { static: false },] }],
_icons: [{ type: ContentChildren, args: [forwardRef((/**
* @return {?}
*/
() => MdcChipIcon)), { descendants: true },] }],
_primaryAction: [{ type: ViewChild, args: [MdcChipPrimaryAction, { static: true },] }],
_chipText: [{ type: ViewChild, args: [MdcChipText, { static: true },] }]
};
class MdcChipIcon extends MdcIcon {
/**
* @param {?} _parentChip
* @param {?} elementRef
* @param {?} iconRegistry
* @param {?} ariaHidden
* @param {?=} location
*/
constructor(_parentChip, elementRef, iconRegistry, ariaHidden, location) {
super(elementRef, iconRegistry, ariaHidden, location);
this._parentChip = _parentChip;
this._leading = false;
this._trailing = false;
}
/**
* @return {?}
*/
get leading() {
return this._leading;
}
/**
* @param {?} value
* @return {?}
*/
set leading(value) {
this._leading = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get trailing() {
return this._trailing;
}
/**
* @param {?} value
* @return {?}
*/
set trailing(value) {
this._trailing = coerceBooleanProperty(value);
}
/**
* @param {?} evt
* @return {?}
*/
_onIconInteraction(evt) {
if (this.trailing) {
this._parentChip._handleTrailingIconInteraction(evt);
}
}
}
MdcChipIcon.decorators = [
{ type: Component, args: [{selector: 'mdc-chip-icon, [mdcChipIcon]',
exportAs: 'mdcChipIcon',
host: {
'class': 'mdc-chip__icon ngx-mdc-icon',
'[attr.role]': 'trailing ? "button" : "img"',
'[attr.tabindex]': 'trailing ? 1 : -1',
'[class.mdc-chip__icon--leading]': 'leading',
'[class.mdc-chip__icon--trailing]': 'trailing',
'[class.mdc-chip__trailing-action]': 'trailing',
'(click)': '_onIconInteraction($event)',
'(keydown)': '_onIconInteraction($event)'
},
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcChipIcon.ctorParameters = () => [
{ type: MdcChip },
{ type: ElementRef },
{ type: MdcIconRegistry },
{ type: String, decorators: [{ type: Attribute, args: ['aria-hidden',] }] },
{ type: undefined, decorators: [{ type: Inject, args: [MDC_ICON_LOCATION,] }] }
];
MdcChipIcon.propDecorators = {
leading: [{ type: Input }],
trailing: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* Generated from: chips/chip-set.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcChipSetChange {
/**
* @param {?} source
* @param {?} value
*/
constructor(source, value) {
this.source = source;
this.value = value;
}
}
class MdcChipSet extends MDCComponent {
/**
* @param {?} _changeDetectorRef
* @param {?} elementRef
* @param {?} _parentForm
* @param {?} _parentFormGroup
* @param {?} ngControl
*/
constructor(_changeDetectorRef, elementRef, _parentForm, _parentFormGroup, ngControl) {
super(elementRef);
this._changeDetectorRef = _changeDetectorRef;
this.elementRef = elementRef;
this.ngControl = ngControl;
/**
* Emits whenever the component is destroyed.
*/
this._destroyed = new Subject();
this._choice = false;
this._filter = false;
this._input = false;
/**
* A function to compare the option values with the selected values. The first argument
* is a value from an option. The second is a value from the selection. A boolean
* should be returned.
*/
this._compareWith = (/**
* @param {?} o1
* @param {?} o2
* @return {?}
*/
(o1, o2) => o1 === o2);
this.change = new EventEmitter();
this.interaction = new EventEmitter();
/**
* Function when touched
*/
this._onTouched = (/**
* @return {?}
*/
() => { });
/**
* Function when changed
*/
this._onChange = (/**
* @return {?}
*/
() => { });
/**
* Subscription to selection events in chips.
*/
this._chipSelectionSubscription = null;
/**
* Subscription to removal changes.
*/
this._chipRemovalSubscription = null;
/**
* Subscription to interaction events in chips.
*/
this._chipInteractionSubscription = null;
/**
* Subscription to navigation events.
*/
this._navigationSubscription = null;
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
/**
* Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
* @return {?}
*/
get choice() {
return this._choice;
}
/**
* @param {?} value
* @return {?}
*/
set choice(value) {
this._choice = coerceBooleanProperty(value);
}
/**
* Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
* @return {?}
*/
get filter() {
return this._filter;
}
/**
* @param {?} value
* @return {?}
*/
set filter(value) {
this._filter = coerceBooleanProperty(value);
}
/**
* Indicates that the chips in the set are input chips, which enable user input by converting text into chips.
* @return {?}
*/
get input() {
return this._input;
}
/**
* @param {?} value
* @return {?}
*/
set input(value) {
this._input = coerceBooleanProperty(value);
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
this._value = value;
this.writeValue(value);
}
/**
* Combined stream of all of the chip selection events.
* @return {?}
*/
get chipSelections() {
return merge(...this.chips.map((/**
* @param {?} chip
* @return {?}
*/
chip => chip.selectionChange)));
}
/**
* Combined stream of all of the chip interaction events.
* @return {?}
*/
get chipInteractions() {
return merge(...this.chips.map((/**
* @param {?} chip
* @return {?}
*/
chip => chip.interactionEvent)));
}
/**
* Combined stream of all of the chip removal events.
* @return {?}
*/
get chipRemovalChanges() {
return merge(...this.chips.map((/**
* @param {?} chip
* @return {?}
*/
chip => chip.removalEvent)));
}
/**
* Combined stream of all of the chip navigation events.
* @return {?}
*/
get chipNavigations() {
return merge(...this.chips.map((/**
* @param {?} chip
* @return {?}
*/
chip => chip.navigationEvent)));
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
hasClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.contains(className)),
focusChipPrimaryActionAtIndex: (/**
* @param {?} index
* @return {?}
*/
(index) => this.chips.toArray()[index].focusPrimaryAction()),
focusChipTrailingActionAtIndex: (/**
* @param {?} index
* @return {?}
*/
(index) => this.chips.toArray()[index].focusTrailingAction()),
getChipListCount: (/**
* @return {?}
*/
() => this.chips.length),
getIndexOfChipById: (/**
* @param {?} chipId
* @return {?}
*/
(chipId) => this._findChipIndex(chipId)),
removeChipAtIndex: (/**
* @param {?} index
* @return {?}
*/
(index) => {
if (index >= 0 && index < this.chips.length) {
this.chips.toArray()[index].destroy();
this.chips.toArray()[index].remove();
this.chips.toArray().splice(index, 1);
}
}),
removeFocusFromChipAtIndex: (/**
* @param {?} index
* @return {?}
*/
(index) => this.chips.toArray()[index].removeFocus()),
selectChipAtIndex: (/**
* @param {?} index
* @param {?} selected
* @param {?} shouldNotifyClients
* @return {?}
*/
(index, selected, shouldNotifyClients) => {
if (index >= 0 && index < this.chips.length) {
this.chips.toArray()[index].setSelectedFromChipSet(selected, shouldNotifyClients);
}
}),
announceMessage: (/**
* @return {?}
*/
() => { }),
isRTL: (/**
* @return {?}
*/
() => typeof window !== 'undefined' ?
window.getComputedStyle(this._getHostElement()).getPropertyValue('direction') === 'rtl' : false)
};
return new MDCChipSetFoundation(adapter);
}
/**
* @return {?}
*/
ngAfterContentInit() {
// When chips change, re-subscribe
this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
() => {
this._resetChipSet();
if (this.chips.length >= 0) {
this._initializeSelection();
}
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
var _a, _b;
this._destroyed.next();
this._destroyed.complete();
this._dropSubscriptions();
(_a = this._chipRemovalSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
(_b = this._foundation) === null || _b === void 0 ? void 0 : _b.destroy();
}
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.selectByValue(value, true);
}
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this._onChange = fn;
}
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @return {?}
*/
getSelectedChipIds() {
return this._foundation.getSelectedChipIds();
}
/**
* @param {?} chipId
* @return {?}
*/
select(chipId) {
this._foundation.select(chipId);
}
/**
* @param {?} value
* @param {?=} shouldIgnore
* @return {?}
*/
selectByValue(value, shouldIgnore = true) {
if (!this.chips) {
return;
}
if (Array.isArray(value)) {
value.forEach((/**
* @param {?} currentValue
* @return {?}
*/
currentValue => this._selectValue(currentValue, shouldIgnore)));
}
else {
this._selectValue(value, shouldIgnore);
}
this._value = value;
}
/**
* Finds and selects the chip based on its value.
* @private
* @param {?} value
* @param {?=} shouldIgnore
* @return {?} Chip that has the corresponding value.
*/
_selectValue(value, shouldIgnore = true) {
/** @type {?} */
const correspondingChip = this.chips.find((/**
* @param {?} chip
* @return {?}
*/
chip => chip.value != null && this._compareWith(chip.value, value)));
if (correspondingChip) {
if (this.choice) {
this.select(correspondingChip.id);
}
else {
correspondingChip.setSelectedFromChipSet(true, shouldIgnore);
}
}
return correspondingChip;
}
/**
* @private
* @return {?}
*/
_initializeSelection() {
// Defer setting the value in order to avoid the "Expression
// has changed after it was checked" errors from Angular.
Promise.resolve().then((/**
* @return {?}
*/
() => {
var _a, _b;
if (this.ngControl || this._value) {
this.selectByValue((_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.value, (_b !== null && _b !== void 0 ? _b : this._value)), false);
}
}));
}
/**
* @private
* @param {?} evt
* @return {?}
*/
_propagateChanges(evt) {
this._value = evt.value;
this.change.emit(new MdcChipSetChange(this, evt));
this._onChange(this._value);
this._changeDetectorRef.markForCheck();
}
/**
* @private
* @param {?} chipId
* @return {?}
*/
_findChipIndex(chipId) {
return this.chips.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
_ => _.id === chipId));
}
/**
* @private
* @return {?}
*/
_resetChipSet() {
this._dropSubscriptions();
this._listenToChipEvents();
}
/**
* @private
* @return {?}
*/
_dropSubscriptions() {
var _a, _b, _c, _d;
(_a = this._chipSelectionSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
(_b = this._chipInteractionSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
(_c = this._chipRemovalSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
(_d = this._navigationSubscription) === null || _d === void 0 ? void 0 : _d.unsubscribe();
}
/**
* Listens to selected events on each chip.
* @private
* @return {?}
*/
_listenToChipEvents() {
this._chipSelectionSubscription = this.chipSelections
.subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => {
this._foundation.handleChipSelection(event);
this._propagateChanges(event);
}));
this._chipInteractionSubscription = this.chipInteractions
.subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => {
this._foundation.handleChipInteraction(event);
this.interaction.emit(event);
}));
this._chipRemovalSubscription = this.chipRemovalChanges
.subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => this._foundation.handleChipRemoval(event)));
this._navigationSubscription = this.chipNavigations
.subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => this._foundation.handleChipNavigation(event)));
}
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcChipSet.decorators = [
{ type: Component, args: [{selector: 'mdc-chip-set',
exportAs: 'mdcChipSet',
host: {
'role': 'grid',
'class': 'mdc-chip-set',
'[class.mdc-chip-set--choice]': 'choice',
'[class.mdc-chip-set--filter]': 'filter',
'[class.mdc-chip-set--input]': 'input'
},
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{ provide: MDC_CHIPSET_PARENT_COMPONENT, useExisting: MdcChipSet }]
},] },
];
/** @nocollapse */
MdcChipSet.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: NgForm, decorators: [{ type: Optional }] },
{ type: FormGroupDirective, decorators: [{ type: Optional }] },
{ type: NgControl, decorators: [{ type: Optional }] }
];
MdcChipSet.propDecorators = {
choice: [{ type: Input }],
filter: [{ type: Input }],
input: [{ type: Input }],
value: [{ type: Input }],
change: [{ type: Output }],
interaction: [{ type: Output }],
chips: [{ type: ContentChildren, args: [MdcChip, { descendants: true },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: chips/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const CHIP_DECLARATIONS = [
MdcChip,
MdcChipCheckmark,
MdcChipIcon,
MdcChipPrimaryAction,
MdcChipSet,
MdcChipText
];
class MdcChipsModule {
}
MdcChipsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, MdcIconModule],
exports: CHIP_DECLARATIONS,
declarations: CHIP_DECLARATIONS
},] },
];
/**
* @fileoverview added by tsickle
* Generated from: chips/constants.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const EventSource = {
PRIMARY: 0,
TRAILING: 1,
NONE: 2,
};
EventSource[EventSource.PRIMARY] = 'PRIMARY';
EventSource[EventSource.TRAILING] = 'TRAILING';
EventSource[EventSource.NONE] = 'NONE';
export { CHIP_DECLARATIONS, EventSource, MDC_CHIPSET_PARENT_COMPONENT, MdcChip, MdcChipCheckmark, MdcChipIcon, MdcChipPrimaryAction, MdcChipSet, MdcChipSetChange, MdcChipText, MdcChipsModule };
//# sourceMappingURL=chips.js.map