@angular-mdc/web
Version:
1,553 lines • 55.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
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular-mdc/web/icon'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@material/ripple'), require('@angular-mdc/web/base'), require('@angular-mdc/web/ripple'), require('@material/chips'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/chips', ['exports', '@angular/core', '@angular/common', '@angular-mdc/web/icon', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@material/ripple', '@angular-mdc/web/base', '@angular-mdc/web/ripple', '@material/chips', '@angular/forms'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.chips = {}), global.ng.core, global.ng.common, global.ng.web.icon, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.mdc.ripple, global.ng.web.base, global.ng.web.ripple, global.mdc.chips, global.ng.forms));
}(this, (function (exports, core, common, icon, coercion, platform, rxjs, operators, ripple, base, ripple$1, chips, forms) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var _assign = function __assign() {
_assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return _assign.apply(this, arguments);
};
/**
* @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: core.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: core.ElementRef }
]; };
MdcChipPrimaryAction.propDecorators = {
role: [{ type: core.Input }],
tabIndex: [{ type: core.Input }]
};
return MdcChipPrimaryAction;
}());
var MdcChipText = /** @class */ (function () {
function MdcChipText() {
}
MdcChipText.decorators = [
{ type: core.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 core.InjectionToken('MDC_CHIPSET_PARENT_COMPONENT');
/** @type {?} */
var nextUniqueId = 0;
var MdcChipCheckmark = /** @class */ (function () {
function MdcChipCheckmark(elementRef) {
this.elementRef = elementRef;
}
MdcChipCheckmark.decorators = [
{ type: core.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: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcChipCheckmark.ctorParameters = function () { return [
{ type: core.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 rxjs.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 core.EventEmitter();
/**
* Emitted when the chip is selected or deselected.
*/
_this.selectionChange = new core.EventEmitter();
/**
* Emitted as chip navigation event.
*/
_this.navigationEvent = new core.EventEmitter();
/**
* Emitted when trailing icon is interacted with.
*/
_this.trailingIconInteraction = new core.EventEmitter();
/**
* Emitted when a chip is to be removed.
*/
_this.removalEvent = new core.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 = coercion.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 = coercion.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 = coercion.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 = coercion.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 = coercion.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 = coercion.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 chips.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({}, ripple$1.MdcRipple.createAdapter(this)), { computeBoundingRect: (/**
* @return {?}
*/
function () { return _this._foundation.getDimensions(); }), isSurfaceDisabled: (/**
* @return {?}
*/
function () { return _this._disableRipple; }) });
return new ripple$1.MdcRipple(this.elementRef, new ripple.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 rxjs.fromEvent(_this._root, 'transitionend')
.pipe(operators.takeUntil(_this._destroyed))
.subscribe((/**
* @param {?} evt
* @return {?}
*/
function (evt) { return _this._ngZone.run((/**
* @return {?}
*/
function () { return _this._foundation.handleTransitionEnd(evt); })); }));
}));
};
MdcChip.decorators = [
{ type: core.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: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
providers: [ripple$1.MdcRipple]
},] },
];
/** @nocollapse */
MdcChip.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.NgZone },
{ type: core.ChangeDetectorRef },
{ type: ripple$1.MdcRipple },
{ type: core.ElementRef },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MDC_CHIPSET_PARENT_COMPONENT,] }] }
]; };
MdcChip.propDecorators = {
selected: [{ type: core.Input }],
label: [{ type: core.Input }],
filter: [{ type: core.Input }],
choice: [{ type: core.Input }],
input: [{ type: core.Input }],
removable: [{ type: core.Input }],
touch: [{ type: core.Input }],
disableRipple: [{ type: core.Input }],
value: [{ type: core.Input }],
interactionEvent: [{ type: core.Output }],
selectionChange: [{ type: core.Output }],
navigationEvent: [{ type: core.Output }],
trailingIconInteraction: [{ type: core.Output }],
removalEvent: [{ type: core.Output }],
_checkmark: [{ type: core.ContentChild, args: [MdcChipCheckmark, { static: false },] }],
_icons: [{ type: core.ContentChildren, args: [core.forwardRef((/**
* @return {?}
*/
function () { return MdcChipIcon; })), { descendants: true },] }],
_primaryAction: [{ type: core.ViewChild, args: [MdcChipPrimaryAction, { static: true },] }],
_chipText: [{ type: core.ViewChild, args: [MdcChipText, { static: true },] }]
};
return MdcChip;
}(base.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 = coercion.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 = coercion.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: core.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: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcChipIcon.ctorParameters = function () { return [
{ type: MdcChip },
{ type: core.ElementRef },
{ type: icon.MdcIconRegistry },
{ type: String, decorators: [{ type: core.Attribute, args: ['aria-hidden',] }] },
{ type: undefined, decorators: [{ type: core.Inject, args: [icon.MDC_ICON_LOCATION,] }] }
]; };
MdcChipIcon.propDecorators = {
leading: [{ type: core.Input }],
trailing: [{ type: core.Input }]
};
return MdcChipIcon;
}(icon.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 rxjs.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 core.EventEmitter();
_this.interaction = new core.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 = coercion.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 = coercion.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 = coercion.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 rxjs.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 rxjs.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 rxjs.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 rxjs.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 chips.MDCChipSetFoundation(adapter);
};
/**
* @return {?}
*/
MdcChipSet.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
// When chips change, re-subscribe
this.chips.changes.pipe(operators.startWith(null), operators.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: core.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: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
providers: [{ provide: MDC_CHIPSET_PARENT_COMPONENT, useExisting: MdcChipSet }]
},] },
];
/** @nocollapse */
MdcChipSet.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: forms.NgForm, decorators: [{ type: core.Optional }] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
{ type: forms.NgControl, decorators: [{ type: core.Optional }] }
]; };
MdcChipSet.propDecorators = {
choice: [{ type: core.Input }],
filter: [{ type: core.Input }],
input: [{ type: core.Input }],
value: [{ type: core.Input }],
change: [{ type: core.Output }],
interaction: [{ type: core.Output }],
chips: [{ type: core.ContentChildren, args: [MdcChip, { descendants: true },] }]
};
return MdcChipSet;
}(base.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: core.NgModule, args: [{
imports: [common.CommonModule, icon.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';
exports.CHIP_DECLARATIONS = CHIP_DECLARATIONS;
exports.EventSource = EventSource;
exports.MDC_CHIPSET_PARENT_COMPONENT = MDC_CHIPSET_PARENT_COMPONENT;
exports.MdcChip = MdcChip;
exports.MdcChipCheckmark = MdcChipCheckmark;
exports.MdcChipIcon = MdcChipIcon;
exports.MdcChipPrimaryAction = MdcChipPrimaryAction;
exports.MdcChipSet = MdcChipSet;
exports.MdcChipSetChange = MdcChipSetChange;
exports.MdcChipText = MdcChipText;
exports.MdcChipsModule = MdcChipsModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-chips.umd.js.map