@angular-mdc/web
Version:
1,491 lines (1,484 loc) • 49.6 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 { MdcIconRegistry, MDC_ICON_LOCATION, MdcIcon, MdcIconModule } from '@angular-mdc/web/icon';
import { __extends, __assign } from 'tslib';
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
*/
var MdcChipPrimaryAction = /** @class */ (function () {
function MdcChipPrimaryAction(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 = function () { return [
{ type: ElementRef }
]; };
MdcChipPrimaryAction.propDecorators = {
role: [{ type: Input }],
tabIndex: [{ type: Input }]
};
return MdcChipPrimaryAction;
}());
var MdcChipText = /** @class */ (function () {
function MdcChipText() {
}
MdcChipText.decorators = [
{ type: Directive, args: [{
selector: 'mdc-chip-text, [mdcChipText]',
host: {
'class': 'mdc-chip__text'
}
},] },
];
return MdcChipText;
}());
/**
* @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 {?}
*/
var MDC_CHIPSET_PARENT_COMPONENT = new InjectionToken('MDC_CHIPSET_PARENT_COMPONENT');
/** @type {?} */
var nextUniqueId = 0;
var MdcChipCheckmark = /** @class */ (function () {
function MdcChipCheckmark(elementRef) {
this.elementRef = elementRef;
}
MdcChipCheckmark.decorators = [
{ type: Component, args: [{selector: 'mdc-chip-checkmark',
exportAs: 'mdcChipCheckmark',
host: {
'class': 'mdc-chip__checkmark'
},
template: "\n <svg class=\"mdc-chip__checkmark-svg\"\n viewBox=\"-2 -3 30 30\"\n focusable=\"false\">\n <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n </svg>",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcChipCheckmark.ctorParameters = function () { return [
{ type: ElementRef }
]; };
return MdcChipCheckmark;
}());
var MdcChip = /** @class */ (function (_super) {
__extends(MdcChip, _super);
function MdcChip(_platform, _ngZone, _changeDetectorRef, _ripple, elementRef, _parent) {
var _this = _super.call(this, elementRef) || this;
_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();
return _this;
}
Object.defineProperty(MdcChip.prototype, "id", {
/** The unique ID of the chip. */
get: /**
* The unique ID of the chip.
* @return {?}
*/
function () {
return this._id;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "leadingIcon", {
get: /**
* @return {?}
*/
function () {
return this._icons.find((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.leading; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "trailingIcon", {
get: /**
* @return {?}
*/
function () {
return this._icons.find((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.trailing; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "filter", {
get: /**
* @return {?}
*/
function () {
return this._filter;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coerceBooleanProperty(value);
if (newValue !== this._filter) {
this._filter = newValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "choice", {
get: /**
* @return {?}
*/
function () {
return this._choice;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._choice = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "input", {
get: /**
* @return {?}
*/
function () {
return this._input;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._input = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "removable", {
/** Determines whether or not the chip displays the remove styling and emits (removed) events. */
get: /**
* Determines whether or not the chip displays the remove styling and emits (removed) events.
* @return {?}
*/
function () {
return this._removable;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coerceBooleanProperty(value);
if (newValue !== this._removable) {
this._removable = value;
this._foundation.setShouldRemoveOnTrailingIconClick(this._removable);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "touch", {
get: /**
* @return {?}
*/
function () {
return this._touch;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._touch = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "disableRipple", {
/** Whether the chip ripple is disabled. */
get: /**
* Whether the chip ripple is disabled.
* @return {?}
*/
function () {
return this._disableRipple;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._disableRipple = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChip.prototype, "value", {
/** The value of the chip. Defaults to the content inside `<mdc-chip>` tags. */
get: /**
* The value of the chip. Defaults to the content inside `<mdc-chip>` tags.
* @return {?}
*/
function () {
var _a, _b;
return _b = (_a = this._value, (_a !== null && _a !== void 0 ? _a : this._root.textContent)), (_b !== null && _b !== void 0 ? _b : undefined);
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._value = value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcChip.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.remove(className); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.contains(className); }),
addClassToLeadingIcon: (/**
* @param {?} className
* @return {?}
*/
function (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 {?}
*/
function (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 {?}
*/
function (target, className) {
return (target && ((/** @type {?} */ (target))).classList) ? ((/** @type {?} */ (target))).classList.contains(className) : false;
}),
focusPrimaryAction: (/**
* @return {?}
*/
function () { return _this._primaryAction._root.focus(); }),
focusTrailingAction: (/**
* @return {?}
*/
function () { 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 {?}
*/
function () { return _this.interactionEvent.emit({
chipId: _this._id,
value: _this._value
}); }),
notifySelection: (/**
* @param {?} selected
* @param {?} chipSetShouldIgnore
* @return {?}
*/
function (selected, chipSetShouldIgnore) {
return _this.selectionChange.emit({
chipId: _this._id,
selected: selected,
value: selected ? _this._value : undefined,
shouldIgnore: chipSetShouldIgnore
});
}),
notifyNavigation: (/**
* @param {?} key
* @param {?} source
* @return {?}
*/
function (key, source) {
return _this.navigationEvent.emit({
chipId: _this.id,
value: _this._value,
key: key,
source: source
});
}),
notifyTrailingIconInteraction: (/**
* @return {?}
*/
function () { return _this.trailingIconInteraction.emit({
chipId: _this.id,
value: _this._value
}); }),
notifyRemoval: (/**
* @return {?}
*/
function () { return _this.removalEvent.emit({
chipId: _this.id,
value: _this._value,
removedAnnouncement: null
}); }),
getComputedStyleValue: (/**
* @param {?} propertyName
* @return {?}
*/
function (propertyName) {
return _this._platform.isBrowser ? window.getComputedStyle(_this._root).getPropertyValue(propertyName) : '';
}),
setStyleProperty: (/**
* @param {?} propertyName
* @param {?} value
* @return {?}
*/
function (propertyName, value) {
return ((/** @type {?} */ (_this._root))).style.setProperty(propertyName, value);
}),
setTrailingActionAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (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 {?}
*/
function () { return !!_this.leadingIcon; }),
hasTrailingAction: (/**
* @return {?}
*/
function () { return !!_this.trailingIcon; }),
setPrimaryActionAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (attr, value) { return _this._primaryAction._root.setAttribute(attr, value); }),
getRootBoundingClientRect: (/**
* @return {?}
*/
function () { return _this._root.getBoundingClientRect(); }),
getCheckmarkBoundingClientRect: (/**
* @return {?}
*/
function () { 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 {?}
*/
function () { return typeof window !== 'undefined' ?
window.getComputedStyle(_this._root).getPropertyValue('direction') === 'rtl' : false; }),
getAttribute: (/**
* @param {?} attr
* @return {?}
*/
function (attr) { return _this._root.getAttribute(attr); })
};
return new MDCChipFoundation(adapter);
};
/**
* @return {?}
*/
MdcChip.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this._foundation.init();
this._setVariantFromChipSet();
this._loadListeners();
};
/**
* @return {?}
*/
MdcChip.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
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 {?}
*/
MdcChip.prototype.setSelectedFromChipSet = /**
* @param {?} selected
* @param {?} shouldNotifyClients
* @return {?}
*/
function (selected, shouldNotifyClients) {
this._foundation.setSelectedFromChipSet(selected, shouldNotifyClients);
};
/** Allows for programmatic focusing of the chip. */
/**
* Allows for programmatic focusing of the chip.
* @return {?}
*/
MdcChip.prototype.focus = /**
* Allows for programmatic focusing of the chip.
* @return {?}
*/
function () {
this.focusPrimaryAction();
};
/**
* @return {?}
*/
MdcChip.prototype.focusPrimaryAction = /**
* @return {?}
*/
function () {
this._foundation.focusPrimaryAction();
};
/**
* @return {?}
*/
MdcChip.prototype.focusTrailingAction = /**
* @return {?}
*/
function () {
this._foundation.focusTrailingAction();
};
/**
* @return {?}
*/
MdcChip.prototype.removeFocus = /**
* @return {?}
*/
function () {
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.
*/
/**
* Allows for programmatic removal of the chip.
* Informs any listeners of the removal request. Does not remove the chip from the DOM.
* @return {?}
*/
MdcChip.prototype.remove = /**
* Allows for programmatic removal of the chip.
* Informs any listeners of the removal request. Does not remove the chip from the DOM.
* @return {?}
*/
function () {
if (this.removable) {
this._foundation.beginExit();
}
};
/**
* @param {?} evt
* @return {?}
*/
MdcChip.prototype._handleInteraction = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this._foundation.handleInteraction(evt);
};
/**
* @param {?} evt
* @return {?}
*/
MdcChip.prototype._onKeydown = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this._foundation.handleInteraction(evt);
this._foundation.handleKeydown(evt);
};
/**
* @param {?} evt
* @return {?}
*/
MdcChip.prototype._handleTrailingIconInteraction = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this._foundation.handleTrailingIconInteraction(evt);
};
/**
* @private
* @return {?}
*/
MdcChip.prototype._createRipple = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = __assign(__assign({}, MdcRipple.createAdapter(this)), { computeBoundingRect: (/**
* @return {?}
*/
function () { return _this._foundation.getDimensions(); }), isSurfaceDisabled: (/**
* @return {?}
*/
function () { return _this._disableRipple; }) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
};
/**
* @private
* @return {?}
*/
MdcChip.prototype._setVariantFromChipSet = /**
* @private
* @return {?}
*/
function () {
if (this._parent) {
this.input = this._parent.input;
this.filter = this._parent.filter;
this.choice = this._parent.choice;
this._changeDetectorRef.detectChanges();
}
};
/**
* @private
* @return {?}
*/
MdcChip.prototype._loadListeners = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return fromEvent(_this._root, 'transitionend')
.pipe(takeUntil(_this._destroyed))
.subscribe((/**
* @param {?} evt
* @return {?}
*/
function (evt) { return _this._ngZone.run((/**
* @return {?}
*/
function () { 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: "\n <div class=\"mdc-chip__ripple\"></div>\n <ng-content select=\"mdc-chip-icon[leading]\"></ng-content>\n <mdc-chip-checkmark *ngIf=\"filter\"></mdc-chip-checkmark>\n <span role=\"gridcell\">\n <mdc-chip-primary-action>\n <div class=\"mdc-chip__touch\" *ngIf=\"touch\"></div>\n <mdc-chip-text *ngIf=\"label\">{{label}}</mdc-chip-text>\n <ng-content></ng-content>\n </mdc-chip-primary-action>\n </span>\n <span role=\"gridcell\" *ngIf=\"!!trailingIcon\">\n <ng-content select=\"mdc-chip-icon[trailing]\"></ng-content>\n </span>\n ",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [MdcRipple]
},] },
];
/** @nocollapse */
MdcChip.ctorParameters = function () { return [
{ 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 {?}
*/
function () { return MdcChipIcon; })), { descendants: true },] }],
_primaryAction: [{ type: ViewChild, args: [MdcChipPrimaryAction, { static: true },] }],
_chipText: [{ type: ViewChild, args: [MdcChipText, { static: true },] }]
};
return MdcChip;
}(MDCComponent));
var MdcChipIcon = /** @class */ (function (_super) {
__extends(MdcChipIcon, _super);
function MdcChipIcon(_parentChip, elementRef, iconRegistry, ariaHidden, location) {
var _this = _super.call(this, elementRef, iconRegistry, ariaHidden, location) || this;
_this._parentChip = _parentChip;
_this._leading = false;
_this._trailing = false;
return _this;
}
Object.defineProperty(MdcChipIcon.prototype, "leading", {
get: /**
* @return {?}
*/
function () {
return this._leading;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._leading = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipIcon.prototype, "trailing", {
get: /**
* @return {?}
*/
function () {
return this._trailing;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._trailing = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @param {?} evt
* @return {?}
*/
MdcChipIcon.prototype._onIconInteraction = /**
* @param {?} evt
* @return {?}
*/
function (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 = function () { return [
{ 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 }]
};
return MdcChipIcon;
}(MdcIcon));
/**
* @fileoverview added by tsickle
* Generated from: chips/chip-set.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcChipSetChange = /** @class */ (function () {
function MdcChipSetChange(source, value) {
this.source = source;
this.value = value;
}
return MdcChipSetChange;
}());
var MdcChipSet = /** @class */ (function (_super) {
__extends(MdcChipSet, _super);
function MdcChipSet(_changeDetectorRef, elementRef, _parentForm, _parentFormGroup, ngControl) {
var _this = _super.call(this, elementRef) || this;
_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 {?}
*/
function (o1, o2) { return o1 === o2; });
_this.change = new EventEmitter();
_this.interaction = new EventEmitter();
/**
* Function when touched
*/
_this._onTouched = (/**
* @return {?}
*/
function () { });
/**
* Function when changed
*/
_this._onChange = (/**
* @return {?}
*/
function () { });
/**
* 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;
}
return _this;
}
Object.defineProperty(MdcChipSet.prototype, "choice", {
/**
* Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
*/
get: /**
* Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
* @return {?}
*/
function () {
return this._choice;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._choice = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipSet.prototype, "filter", {
/**
* Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
*/
get: /**
* Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
* @return {?}
*/
function () {
return this._filter;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._filter = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipSet.prototype, "input", {
/**
* Indicates that the chips in the set are input chips, which enable user input by converting text into chips.
*/
get: /**
* Indicates that the chips in the set are input chips, which enable user input by converting text into chips.
* @return {?}
*/
function () {
return this._input;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._input = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipSet.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._value = value;
this.writeValue(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipSet.prototype, "chipSelections", {
/** Combined stream of all of the chip selection events. */
get: /**
* Combined stream of all of the chip selection events.
* @return {?}
*/
function () {
return merge.apply(void 0, this.chips.map((/**
* @param {?} chip
* @return {?}
*/
function (chip) { return chip.selectionChange; })));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipSet.prototype, "chipInteractions", {
/** Combined stream of all of the chip interaction events. */
get: /**
* Combined stream of all of the chip interaction events.
* @return {?}
*/
function () {
return merge.apply(void 0, this.chips.map((/**
* @param {?} chip
* @return {?}
*/
function (chip) { return chip.interactionEvent; })));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipSet.prototype, "chipRemovalChanges", {
/** Combined stream of all of the chip removal events. */
get: /**
* Combined stream of all of the chip removal events.
* @return {?}
*/
function () {
return merge.apply(void 0, this.chips.map((/**
* @param {?} chip
* @return {?}
*/
function (chip) { return chip.removalEvent; })));
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcChipSet.prototype, "chipNavigations", {
/** Combined stream of all of the chip navigation events. */
get: /**
* Combined stream of all of the chip navigation events.
* @return {?}
*/
function () {
return merge.apply(void 0, this.chips.map((/**
* @param {?} chip
* @return {?}
*/
function (chip) { return chip.navigationEvent; })));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcChipSet.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.contains(className); }),
focusChipPrimaryActionAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) { return _this.chips.toArray()[index].focusPrimaryAction(); }),
focusChipTrailingActionAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) { return _this.chips.toArray()[index].focusTrailingAction(); }),
getChipListCount: (/**
* @return {?}
*/
function () { return _this.chips.length; }),
getIndexOfChipById: (/**
* @param {?} chipId
* @return {?}
*/
function (chipId) { return _this._findChipIndex(chipId); }),
removeChipAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (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 {?}
*/
function (index) { return _this.chips.toArray()[index].removeFocus(); }),
selectChipAtIndex: (/**
* @param {?} index
* @param {?} selected
* @param {?} shouldNotifyClients
* @return {?}
*/
function (index, selected, shouldNotifyClients) {
if (index >= 0 && index < _this.chips.length) {
_this.chips.toArray()[index].setSelectedFromChipSet(selected, shouldNotifyClients);
}
}),
announceMessage: (/**
* @return {?}
*/
function () { }),
isRTL: (/**
* @return {?}
*/
function () { return typeof window !== 'undefined' ?
window.getComputedStyle(_this._getHostElement()).getPropertyValue('direction') === 'rtl' : false; })
};
return new MDCChipSetFoundation(adapter);
};
/**
* @return {?}
*/
MdcChipSet.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
// When chips change, re-subscribe
this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
function () {
_this._resetChipSet();
if (_this.chips.length >= 0) {
_this._initializeSelection();
}
}));
};
/**
* @return {?}
*/
MdcChipSet.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
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.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
MdcChipSet.prototype.writeValue =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} value
* @return {?}
*/
function (value) {
this.selectByValue(value, true);
};
// Implemented as part of ControlValueAccessor.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MdcChipSet.prototype.registerOnChange =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
// Implemented as part of ControlValueAccessor.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
MdcChipSet.prototype.registerOnTouched =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* @return {?}
*/
MdcChipSet.prototype.getSelectedChipIds = /**
* @return {?}
*/
function () {
return this._foundation.getSelectedChipIds();
};
/**
* @param {?} chipId
* @return {?}
*/
MdcChipSet.prototype.select = /**
* @param {?} chipId
* @return {?}
*/
function (chipId) {
this._foundation.select(chipId);
};
/**
* @param {?} value
* @param {?=} shouldIgnore
* @return {?}
*/
MdcChipSet.prototype.selectByValue = /**
* @param {?} value
* @param {?=} shouldIgnore
* @return {?}
*/
function (value, shouldIgnore) {
var _this = this;
if (shouldIgnore === void 0) { shouldIgnore = true; }
if (!this.chips) {
return;
}
if (Array.isArray(value)) {
value.forEach((/**
* @param {?} currentValue
* @return {?}
*/
function (currentValue) { return _this._selectValue(currentValue, shouldIgnore); }));
}
else {
this._selectValue(value, shouldIgnore);
}
this._value = value;
};
/**
* Finds and selects the chip based on its value.
* @returns Chip that has the corresponding value.
*/
/**
* Finds and selects the chip based on its value.
* @private
* @param {?} value
* @param {?=} shouldIgnore
* @return {?} Chip that has the corresponding value.
*/
MdcChipSet.prototype._selectValue = /**
* Finds and selects the chip based on its value.
* @private
* @param {?} value
* @param {?=} shouldIgnore
* @return {?} Chip that has the corresponding value.
*/
function (value, shouldIgnore) {
var _this = this;
if (shouldIgnore === void 0) { shouldIgnore = true; }
/** @type {?} */
var correspondingChip = this.chips.find((/**
* @param {?} chip
* @return {?}
*/
function (chip) {
return 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 {?}
*/
MdcChipSet.prototype._initializeSelection = /**
* @private
* @return {?}
*/
function () {
var _this = this;
// Defer setting the value in order to avoid the "Expression
// has changed after it was checked" errors from Angular.
Promise.resolve().then((/**
* @return {?}
*/
function () {
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 {?}
*/
MdcChipSet.prototype._propagateChanges = /**
* @private
* @param {?} evt
* @return {?}
*/
function (evt) {
this._value = evt.value;
this.change.emit(new MdcChipSetChange(this, evt));
this._onChange(this._value);
this._changeDetectorRef.markForCheck();
};
/**
* @private
* @param {?} chipId
* @return {?}
*/
MdcChipSet.prototype._findChipIndex = /**
* @private
* @param {?} chipId
* @return {?}
*/
function (chipId) {
return this.chips.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.id === chipId; }));
};
/**
* @private
* @return {?}
*/
MdcChipSet.prototype._resetChipSet = /**
* @private
* @return {?}
*/
function () {
this._dropSubscriptions();
this._listenToChipEvents();
};
/**
* @private
* @return {?}
*/
MdcChipSet.prototype._dropSubscriptions = /**
* @private
* @return {?}
*/
function () {
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. */
/**
* Listens to selected events on each chip.
* @private
* @return {?}
*/
MdcChipSet.prototype._listenToChipEvents = /**
* Listens to selected events on each chip.
* @private
* @return {?}
*/
function () {
var _this = this;
this._chipSelectionSubscription = this.chipSelections
.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
_this._foundation.handleChipSelection(event);
_this._propagateChanges(event);
}));
this._chipInteractionSubscription = this.chipInteractions
.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
_this._foundation.handleChipInteraction(event);
_this.interaction.emit(event);
}));
this._chipRemovalSubscription = this.chipRemovalChanges
.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
return _this._foundation.handleChipRemoval(event);
}));
this._navigationSubscription = this.chipNavigations
.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
return _this._foundation.handleChipNavigation(event);
}));
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
MdcChipSet.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
function () {
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 = function () { return [
{ 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 },] }]
};
return MdcChipSet;
}(MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: chips/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var CHIP_DECLARATIONS = [
MdcChip,
MdcChipCheckmark,
MdcChipIcon,
MdcChipPrimaryAction,
MdcChipSet,
MdcChipText
];
var MdcChipsModule = /** @class */ (function () {
function MdcChipsModule() {
}
MdcChipsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, MdcIconModule],
exports: CHIP_DECLARATIONS,
declarations: CHIP_DECLARATIONS
},] },
];
return MdcChipsModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: chips/constants.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
var 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.es5.js.map