@angular-mdc/web
Version:
1,499 lines • 50.7 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/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@angular/cdk/keycodes'), require('@material/ripple'), require('@angular-mdc/web/ripple'), require('@angular-mdc/web/dom'), require('@material/list')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/list', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@angular/cdk/keycodes', '@material/ripple', '@angular-mdc/web/ripple', '@angular-mdc/web/dom', '@material/list'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.list = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.base, global.ng.cdk.keycodes, global.mdc.ripple, global.ng.web.ripple, global.ng.web.dom, global.mdc.list));
}(this, (function (exports, core, common, coercion, platform, rxjs, operators, base, keycodes, ripple, ripple$1, dom, list) { '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: list/list-divider.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcListDivider = /** @class */ (function () {
function MdcListDivider(elementRef) {
this.elementRef = elementRef;
this._inset = false;
this._padded = false;
}
Object.defineProperty(MdcListDivider.prototype, "inset", {
get: /**
* @return {?}
*/
function () {
return this._inset;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._inset = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcListDivider.prototype, "padded", {
get: /**
* @return {?}
*/
function () {
return this._padded;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._padded = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
MdcListDivider.decorators = [
{ type: core.Component, args: [{selector: '[mdcListDivider], mdc-list-divider',
exportAs: 'mdcListDivider',
host: {
'role': 'separator',
'class': 'mdc-list-divider',
'[class.mdc-list-divider--inset]': 'inset',
'[class.mdc-list-divider--padded]': 'padded'
},
template: '',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcListDivider.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MdcListDivider.propDecorators = {
inset: [{ type: core.Input }],
padded: [{ type: core.Input }]
};
return MdcListDivider;
}());
/**
* @fileoverview added by tsickle
* Generated from: list/list-item.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Change event that is fired whenever the selected state of an option changes.
*/
var /**
* Change event that is fired whenever the selected state of an option changes.
*/
MdcListSelectionChange = /** @class */ (function () {
function MdcListSelectionChange(source) {
this.source = source;
}
return MdcListSelectionChange;
}());
/**
* Injection token used to provide the parent MdcList component to MdcListItem.
* @type {?}
*/
var MDC_LIST_PARENT_COMPONENT = new core.InjectionToken('MDC_LIST_PARENT_COMPONENT');
/** @type {?} */
var uniqueIdCounter = 0;
var MdcListItemGraphic = /** @class */ (function () {
function MdcListItemGraphic(elementRef) {
this.elementRef = elementRef;
}
MdcListItemGraphic.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcListItemGraphic], mdc-list-item-graphic',
exportAs: 'mdcListItemGraphic',
host: {
'role': 'presentation',
'class': 'mdc-list-item__graphic',
'[attr.aria-hidden]': 'true'
}
},] },
];
/** @nocollapse */
MdcListItemGraphic.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcListItemGraphic;
}());
var MdcListItemMeta = /** @class */ (function () {
function MdcListItemMeta(elementRef) {
this.elementRef = elementRef;
}
MdcListItemMeta.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcListItemMeta], mdc-list-item-meta',
exportAs: 'mdcListItemMeta',
host: { 'class': 'mdc-list-item__meta' }
},] },
];
/** @nocollapse */
MdcListItemMeta.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcListItemMeta;
}());
var MdcListItemText = /** @class */ (function () {
function MdcListItemText(elementRef) {
this.elementRef = elementRef;
}
MdcListItemText.decorators = [
{ type: core.Component, args: [{selector: '[mdcListItemText], mdc-list-item-text',
exportAs: 'mdcListItemText',
host: { 'class': 'mdc-list-item__text' },
template: "\n <ng-container>\n <span class=\"mdc-list-item__primary-text\"><ng-content></ng-content></span>\n <span class=\"mdc-list-item__secondary-text\" *ngIf=\"secondaryText\">{{secondaryText}}</span>\n </ng-container>",
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcListItemText.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MdcListItemText.propDecorators = {
secondaryText: [{ type: core.Input }]
};
return MdcListItemText;
}());
var MdcListItemSecondary = /** @class */ (function () {
function MdcListItemSecondary(elementRef) {
this.elementRef = elementRef;
}
MdcListItemSecondary.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcListItemSecondary], mdc-list-item-secondary',
exportAs: 'mdcListItemSecondary',
host: { 'class': 'mdc-list-item__secondary-text' }
},] },
];
/** @nocollapse */
MdcListItemSecondary.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcListItemSecondary;
}());
var MdcListItem = /** @class */ (function () {
function MdcListItem(ripple, _changeDetectorRef, elementRef, _parent) {
this.ripple = ripple;
this._changeDetectorRef = _changeDetectorRef;
this.elementRef = elementRef;
this._parent = _parent;
this._id = "mdc-list-item-" + uniqueIdCounter++;
this.tabIndex = -1;
this._selected = false;
this._activated = false;
this._disabled = false;
this.selectionChange = new core.EventEmitter();
this._root = this.elementRef.nativeElement;
this.ripple = this._createRipple();
this.ripple.init();
}
Object.defineProperty(MdcListItem.prototype, "id", {
/** The unique ID of the list item. */
get: /**
* The unique ID of the list item.
* @return {?}
*/
function () {
return this._id;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcListItem.prototype, "selected", {
/** Whether the list item is selected. */
get: /**
* Whether the list item is selected.
* @return {?}
*/
function () {
return this._selected;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._selected) {
this._selected = newValue;
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcListItem.prototype, "activated", {
/** Whether the list item is activated. */
get: /**
* Whether the list item is activated.
* @return {?}
*/
function () {
return this._activated;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._activated) {
this._activated = newValue;
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcListItem.prototype, "disabled", {
/** Whether the list item is disabled. */
get: /**
* Whether the list item is disabled.
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._disabled) {
this._disabled = newValue;
this._changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcListItem.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.ripple.destroy();
};
/**
* @private
* @return {?}
*/
MdcListItem.prototype._createRipple = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = _assign(_assign({}, ripple$1.MdcRipple.createAdapter(this)), { isSurfaceDisabled: (/**
* @return {?}
*/
function () { return _this._disabled || _this._parent.disableRipple; }) });
return new ripple$1.MdcRipple(this.elementRef, new ripple.MDCRippleFoundation(adapter));
};
/**
* @return {?}
*/
MdcListItem.prototype.focus = /**
* @return {?}
*/
function () {
this.getListItemElement().focus();
};
/**
* @param {?} role
* @return {?}
*/
MdcListItem.prototype.setRole = /**
* @param {?} role
* @return {?}
*/
function (role) {
this.getListItemElement().setAttribute('role', role);
};
/**
* @return {?}
*/
MdcListItem.prototype.getListItemElement = /**
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
/**
* @param {?} evt
* @return {?}
*/
MdcListItem.prototype._onKeydown = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
if (evt.keyCode === keycodes.ENTER || evt.keyCode === keycodes.SPACE) {
this._emitChangeEvent();
}
};
/** Emits a change event if the selected state of an option changed. */
/**
* Emits a change event if the selected state of an option changed.
* @return {?}
*/
MdcListItem.prototype._emitChangeEvent = /**
* Emits a change event if the selected state of an option changed.
* @return {?}
*/
function () {
if (this._disabled) {
return;
}
this.selectionChange.emit(new MdcListSelectionChange(this));
};
MdcListItem.decorators = [
{ type: core.Component, args: [{selector: 'mdc-list-item, a[mdc-list-item]',
exportAs: 'mdcListItem',
host: {
'role': 'listitem',
'[id]': 'id',
'[tabIndex]': 'tabIndex',
'class': 'mdc-list-item',
'[attr.data-value]': 'value',
'[class.mdc-list-item--selected]': 'selected',
'[class.mdc-list-item--activated]': 'activated',
'[class.mdc-list-item--disabled]': 'disabled',
'(click)': '_emitChangeEvent()',
'(keydown)': '_onKeydown($event)'
},
template: '<ng-content></ng-content>',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
providers: [ripple$1.MdcRipple]
},] },
];
/** @nocollapse */
MdcListItem.ctorParameters = function () { return [
{ type: ripple$1.MdcRipple },
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MDC_LIST_PARENT_COMPONENT,] }] }
]; };
MdcListItem.propDecorators = {
value: [{ type: core.Input }],
tabIndex: [{ type: core.Input }],
selected: [{ type: core.Input }],
activated: [{ type: core.Input }],
disabled: [{ type: core.Input }],
selectionChange: [{ type: core.Output }]
};
return MdcListItem;
}());
/**
* @fileoverview added by tsickle
* Generated from: list/list.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Change event that is being fired whenever the selected state of an option changes.
*/
var /**
* Change event that is being fired whenever the selected state of an option changes.
*/
MdcListItemChange = /** @class */ (function () {
function MdcListItemChange(source, option) {
this.source = source;
this.option = option;
}
return MdcListItemChange;
}());
var MdcListGroup = /** @class */ (function () {
function MdcListGroup(elementRef) {
this.elementRef = elementRef;
}
MdcListGroup.decorators = [
{ type: core.Component, args: [{selector: '[mdcListGroup], mdc-list-group',
exportAs: 'mdcListGroup',
host: { 'class': 'mdc-list-group' },
template: "\n <h3 class=\"mdc-list-group__subheader\" *ngIf=\"subheader\">{{subheader}}</h3>\n <ng-content></ng-content>",
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcListGroup.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MdcListGroup.propDecorators = {
subheader: [{ type: core.Input }]
};
return MdcListGroup;
}());
var MdcListGroupSubheader = /** @class */ (function () {
function MdcListGroupSubheader(elementRef) {
this.elementRef = elementRef;
}
MdcListGroupSubheader.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcListGroupSubheader], mdc-list-group-subheader',
exportAs: 'mdcListGroupSubheader',
host: { 'class': 'mdc-list-group__subheader' }
},] },
];
/** @nocollapse */
MdcListGroupSubheader.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcListGroupSubheader;
}());
var MdcList = /** @class */ (function (_super) {
__extends(MdcList, _super);
function MdcList(_platform, _changeDetectorRef, elementRef) {
var _this = _super.call(this, elementRef) || this;
_this._platform = _platform;
_this._changeDetectorRef = _changeDetectorRef;
_this.elementRef = elementRef;
_this._twoLine = false;
_this._dense = false;
_this._border = false;
_this._avatar = false;
_this._interactive = true;
_this._disableRipple = false;
_this._useActivatedClass = false;
_this._useSelectedClass = false;
_this._verticalOrientation = true;
_this._wrapFocus = false;
/**
* Emits a change event whenever the selected state of an option changes.
*/
_this.selectionChange = new core.EventEmitter();
/**
* Emits an event for keyboard and mouse actions.
*/
_this.actionEvent = new core.EventEmitter();
/**
* Subscription to changes in list items.
*/
_this._changeSubscription = null;
/**
* Subscription to selection events in list items.
*/
_this.itemSelectionSubscription = null;
return _this;
}
Object.defineProperty(MdcList.prototype, "twoLine", {
get: /**
* @return {?}
*/
function () {
return this._twoLine;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._twoLine = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "dense", {
get: /**
* @return {?}
*/
function () {
return this._dense;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._dense = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "border", {
get: /**
* @return {?}
*/
function () {
return this._border;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._border = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "avatar", {
get: /**
* @return {?}
*/
function () {
return this._avatar;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._avatar = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "interactive", {
get: /**
* @return {?}
*/
function () {
return this._interactive;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._interactive) {
this._interactive = newValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "disableRipple", {
get: /**
* @return {?}
*/
function () {
return this._disableRipple;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._disableRipple) {
this._disableRipple = newValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "singleSelection", {
get: /**
* @return {?}
*/
function () {
return this._singleSelection;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value !== undefined) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._singleSelection) {
this._singleSelection = newValue;
this._foundation.setSingleSelection(this._singleSelection);
this._changeDetectorRef.markForCheck();
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "useActivatedClass", {
get: /**
* @return {?}
*/
function () {
return this._useActivatedClass;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._useActivatedClass = coercion.coerceBooleanProperty(value);
this._foundation.setUseActivatedClass(this._useActivatedClass);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "useSelectedClass", {
get: /**
* @return {?}
*/
function () {
return this._useSelectedClass;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._useSelectedClass = coercion.coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "verticalOrientation", {
get: /**
* @return {?}
*/
function () {
return this._verticalOrientation;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._verticalOrientation = coercion.coerceBooleanProperty(value);
this._foundation.setVerticalOrientation(this._verticalOrientation);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "wrapFocus", {
get: /**
* @return {?}
*/
function () {
return this._wrapFocus;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._wrapFocus = coercion.coerceBooleanProperty(value);
this._foundation.setWrapFocus(this._wrapFocus);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcList.prototype, "listItemSelections", {
/** Combined stream of all of the list item selection events. */
get: /**
* Combined stream of all of the list item selection events.
* @return {?}
*/
function () {
return rxjs.merge.apply(void 0, this.items.map((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.selectionChange; })));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcList.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
getListItemCount: (/**
* @return {?}
*/
function () { return _this.items.length; }),
getFocusedElementIndex: (/**
* @return {?}
*/
function () {
if (!_this._platform.isBrowser && (/** @type {?} */ (document.activeElement))) {
return -1;
}
return _this.items.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.getListItemElement() === (/** @type {?} */ (document.activeElement)); })) || -1;
}),
setAttributeForElementIndex: (/**
* @param {?} index
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (index, attr, value) {
var _a, _b;
/** @type {?} */
var item = _this.getListItemByIndex(index);
(_b = (_a = item) === null || _a === void 0 ? void 0 : _a.getListItemElement()) === null || _b === void 0 ? void 0 : _b.setAttribute(attr, value);
}),
addClassForElementIndex: (/**
* @param {?} index
* @param {?} className
* @return {?}
*/
function (index, className) {
return _this.items.toArray()[index].getListItemElement().classList.add(className);
}),
removeClassForElementIndex: (/**
* @param {?} index
* @param {?} className
* @return {?}
*/
function (index, className) {
var _a, _b, _c;
/** @type {?} */
var item = _this.getListItemByIndex(index);
(_c = (_b = (_a = item) === null || _a === void 0 ? void 0 : _a.getListItemElement()) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.remove(className);
}),
getAttributeForElementIndex: (/**
* @param {?} index
* @param {?} attr
* @return {?}
*/
function (index, attr) {
return _this.items.toArray()[index].getListItemElement().getAttribute(attr);
}),
focusItemAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) { return _this.focusItemAtIndex(index); }),
setTabIndexForListItemChildren: (/**
* @param {?} listItemIndex
* @param {?} tabIndexValue
* @return {?}
*/
function (listItemIndex, tabIndexValue) {
/** @type {?} */
var listItemChildren = [].slice.call(_this.items.toArray()[listItemIndex].getListItemElement()
.querySelectorAll(list.strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
listItemChildren.forEach((/**
* @param {?} ele
* @return {?}
*/
function (ele) { return ele.setAttribute('tabindex', "" + tabIndexValue); }));
}),
hasCheckboxAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var listItem = _this.items.toArray()[index].getListItemElement();
return !!listItem.querySelector(list.strings.CHECKBOX_SELECTOR);
}),
hasRadioAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var listItem = _this.items.toArray()[index].getListItemElement();
return !!listItem.querySelector(list.strings.RADIO_SELECTOR);
}),
isCheckboxCheckedAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var listItem = _this.items.toArray()[index].getListItemElement();
/** @type {?} */
var toggleEl = listItem.querySelector(list.strings.CHECKBOX_SELECTOR);
return (/** @type {?} */ (toggleEl)).checked;
}),
setCheckedCheckboxOrRadioAtIndex: (/**
* @param {?} index
* @param {?} isChecked
* @return {?}
*/
function (index, isChecked) {
/** @type {?} */
var listItem = _this.items.toArray()[index].getListItemElement();
/** @type {?} */
var toggleEl = listItem.querySelector(list.strings.CHECKBOX_RADIO_SELECTOR);
(/** @type {?} */ (toggleEl)).checked = isChecked;
if (_this._platform.isBrowser) {
/** @type {?} */
var event_1 = document.createEvent('Event');
event_1.initEvent('change', true, true);
(/** @type {?} */ (toggleEl)).dispatchEvent(event_1);
}
}),
isFocusInsideList: (/**
* @return {?}
*/
function () { return _this._platform.isBrowser ?
_this.elementRef.nativeElement.contains(document.activeElement) : false; }),
isRootFocused: (/**
* @return {?}
*/
function () { return _this._platform.isBrowser ? document.activeElement === _this._getHostElement() : false; }),
listItemAtIndexHasClass: (/**
* @param {?} index
* @param {?} className
* @return {?}
*/
function (index, className) {
return _this.items.toArray()[index].getListItemElement().classList.contains(className);
}),
notifyAction: (/**
* @param {?} index
* @return {?}
*/
function (index) { return _this.actionEvent.emit({ index: index }); })
};
return new list.MDCListFoundation(adapter);
};
/**
* @return {?}
*/
MdcList.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this._foundation.init();
this._foundation.layout();
// When list items change, re-subscribe
this._changeSubscription = this.items.changes.pipe(operators.startWith(null))
.subscribe((/**
* @return {?}
*/
function () {
if (_this.items.length) {
_this._resetListItems();
}
}));
};
/**
* @return {?}
*/
MdcList.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _a;
this._dropSubscriptions();
(_a = this._changeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
this._foundation.destroy();
};
/**
* @param {?} index
* @return {?}
*/
MdcList.prototype.setSelectedIndex = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.reset();
this._foundation.setSelectedIndex(index);
if (index === -1) {
return;
}
/** @type {?} */
var selectedItem = this.items.toArray()[index];
if (selectedItem) {
this._applySelectionState(selectedItem);
}
};
/**
* @param {?} value
* @return {?}
*/
MdcList.prototype.setSelectedValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.reset();
if (value === null) {
return;
}
/** @type {?} */
var selectedItem = this.getListItemByValue(value);
this._foundation.setSelectedIndex(this.getListItemIndexByValue(value));
if (selectedItem) {
this._applySelectionState(selectedItem);
}
};
/**
* @return {?}
*/
MdcList.prototype.getSelectedItem = /**
* @return {?}
*/
function () {
return this.items.toArray().find((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.selected || _.activated; }));
};
/**
* @return {?}
*/
MdcList.prototype.getSelectedIndex = /**
* @return {?}
*/
function () {
return this.items.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.selected || _.activated; }));
};
/**
* @return {?}
*/
MdcList.prototype.getSelectedValue = /**
* @return {?}
*/
function () {
/** @type {?} */
var item = this.items ? this.items.find((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.selected; })) : null;
return item && item.value ? item.value : null;
};
/**
* @return {?}
*/
MdcList.prototype.getSelectedText = /**
* @return {?}
*/
function () {
/** @type {?} */
var selectedItem = this.getSelectedItem();
return selectedItem && selectedItem.getListItemElement().textContent || '';
};
/**
* @param {?} value
* @return {?}
*/
MdcList.prototype.getListItemByValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
return this.items.toArray().find((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.value === value; }));
};
/**
* @param {?} index
* @return {?}
*/
MdcList.prototype.getListItemByIndex = /**
* @param {?} index
* @return {?}
*/
function (index) {
return this.items.toArray()[index];
};
/**
* @param {?} value
* @return {?}
*/
MdcList.prototype.getListItemIndexByValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
return this.items.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.value === value; }));
};
/**
* @param {?} index
* @return {?}
*/
MdcList.prototype.focusItemAtIndex = /**
* @param {?} index
* @return {?}
*/
function (index) {
this.items.toArray()[index].getListItemElement().focus();
};
/**
* @return {?}
*/
MdcList.prototype.focusFirstElement = /**
* @return {?}
*/
function () {
return this._foundation.focusFirstElement();
};
/**
* @return {?}
*/
MdcList.prototype.focusLastElement = /**
* @return {?}
*/
function () {
return this._foundation.focusLastElement();
};
/**
* @param {?} index
* @return {?}
*/
MdcList.prototype.focusNextElement = /**
* @param {?} index
* @return {?}
*/
function (index) {
return this._foundation.focusNextElement(index);
};
/**
* @param {?} index
* @return {?}
*/
MdcList.prototype.focusPrevElement = /**
* @param {?} index
* @return {?}
*/
function (index) {
return this._foundation.focusPrevElement(index);
};
/**
* @param {?} role
* @return {?}
*/
MdcList.prototype.setRole = /**
* @param {?} role
* @return {?}
*/
function (role) {
this._getHostElement().setAttribute('role', role);
};
/**
* @param {?} index
* @return {?}
*/
MdcList.prototype.setTabIndex = /**
* @param {?} index
* @return {?}
*/
function (index) {
this._getHostElement().tabIndex = index;
};
/**
* @return {?}
*/
MdcList.prototype.focus = /**
* @return {?}
*/
function () {
this._getHostElement().focus();
};
/**
* @return {?}
*/
MdcList.prototype.reset = /**
* @return {?}
*/
function () {
this.items.forEach((/**
* @param {?} _
* @return {?}
*/
function (_) {
_.selected = false;
_.activated = false;
}));
};
/**
* @private
* @param {?} item
* @return {?}
*/
MdcList.prototype._applySelectionState = /**
* @private
* @param {?} item
* @return {?}
*/
function (item) {
if (this.useActivatedClass) {
item.activated = true;
}
else if (this.useSelectedClass) {
item.selected = true;
}
};
/**
* @private
* @return {?}
*/
MdcList.prototype._resetListItems = /**
* @private
* @return {?}
*/
function () {
this._dropSubscriptions();
this._listenForListItemSelection();
};
/**
* @private
* @return {?}
*/
MdcList.prototype._dropSubscriptions = /**
* @private
* @return {?}
*/
function () {
if (this.itemSelectionSubscription) {
this.itemSelectionSubscription.unsubscribe();
this.itemSelectionSubscription = null;
}
};
/** Listens to selected events on each list item. */
/**
* Listens to selected events on each list item.
* @private
* @return {?}
*/
MdcList.prototype._listenForListItemSelection = /**
* Listens to selected events on each list item.
* @private
* @return {?}
*/
function () {
var _this = this;
this.itemSelectionSubscription = this.listItemSelections.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (_this.singleSelection) {
_this.items.filter((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.id !== event.source.id && (_.activated || _.selected); }))
.forEach((/**
* @param {?} _
* @return {?}
*/
function (_) {
_.selected = false;
_.activated = false;
}));
}
_this._applySelectionState(event.source);
if (!_this.singleSelection) {
event.source.ripple.handleBlur();
}
_this.selectionChange.emit(new MdcListItemChange(_this, event.source));
}));
};
/**
* @param {?} evt
* @return {?}
*/
MdcList.prototype._onFocusIn = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
/** @type {?} */
var index = this._getListItemIndexByEvent(evt);
this._foundation.handleFocusIn(evt, index);
};
/**
* @param {?} evt
* @return {?}
*/
MdcList.prototype._onFocusOut = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
/** @type {?} */
var index = this._getListItemIndexByEvent(evt);
if (index >= 0) {
this._foundation.handleFocusOut(evt, index);
}
};
/**
* @param {?} evt
* @return {?}
*/
MdcList.prototype._onKeydown = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
/** @type {?} */
var index = this._getListItemIndexByEvent(evt);
/** @type {?} */
var target = (/** @type {?} */ (evt.target));
if (index >= 0) {
this._foundation.handleKeydown(evt, target.classList.contains(list.cssClasses.LIST_ITEM_CLASS), index);
}
};
/**
* @param {?} evt
* @return {?}
*/
MdcList.prototype._handleClickEvent = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
/** @type {?} */
var index = this._getListItemIndexByEvent(evt);
/** @type {?} */
var target = (/** @type {?} */ (evt.target));
/** @type {?} */
var listItem = this._getListItemByEventTarget((/** @type {?} */ (evt.target)));
if (listItem && listItem.disabled) {
return;
}
// Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
/** @type {?} */
var toggleCheckbox = !dom.matches(target, list.strings.CHECKBOX_RADIO_SELECTOR);
this._foundation.handleClick(index, toggleCheckbox);
};
/**
* @private
* @param {?} target
* @return {?}
*/
MdcList.prototype._getListItemByEventTarget = /**
* @private
* @param {?} target
* @return {?}
*/
function (target) {
return this.items.toArray().find((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.getListItemElement() === target; }));
};
/**
* @private
* @param {?} evt
* @return {?}
*/
MdcList.prototype._getListItemIndexByEvent = /**
* @private
* @param {?} evt
* @return {?}
*/
function (evt) {
return this.items.toArray().findIndex((/**
* @param {?} _
* @return {?}
*/
function (_) { return _.getListItemElement() === evt.target; }));
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
MdcList.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MdcList.decorators = [
{ type: core.Component, args: [{selector: 'mdc-list',
exportAs: 'mdcList',
host: {
'role': 'list',
'class': 'mdc-list',
'[attr.aria-orientation]': 'verticalOrientation ? "vertical" : "horizontal"',
'[class.mdc-list--dense]': 'dense',
'[class.mdc-list--avatar-list]': 'avatar',
'[class.ngx-mdc-list--border]': 'border',
'[class.mdc-list--non-interactive]': '!interactive',
'[class.mdc-list--two-line]': 'twoLine',
'(click)': '_handleClickEvent($event)',
'(keydown)': '_onKeydown($event)',
'(focusin)': '_onFocusIn($event)',
'(focusout)': '_onFocusOut($event)'
},
template: '<ng-content></ng-content>',
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
providers: [{ provide: MDC_LIST_PARENT_COMPONENT, useExisting: MdcList }]
},] },
];
/** @nocollapse */
MdcList.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef }
]; };
MdcList.propDecorators = {
twoLine: [{ type: core.Input }],
dense: [{ type: core.Input }],
border: [{ type: core.Input }],
avatar: [{ type: core.Input }],
interactive: [{ type: core.Input }],
disableRipple: [{ type: core.Input }],
singleSelection: [{ type: core.Input }],
useActivatedClass: [{ type: core.Input }],
useSelectedClass: [{ type: core.Input }],
verticalOrientation: [{ type: core.Input }],
wrapFocus: [{ type: core.Input }],
items: [{ type: core.ContentChildren, args: [MdcListItem, { descendants: true },] }],
selectionChange: [{ type: core.Output }],
actionEvent: [{ type: core.Output }]
};
return MdcList;
}(base.MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: list/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var LIST_DECLARATIONS = [
MdcList,
MdcListDivider,
MdcListGroup,
MdcListGroupSubheader,
MdcListItem,
MdcListItemGraphic,
MdcListItemMeta,
MdcListItemSecondary,
MdcListItemText
];
var MdcListModule = /** @class */ (function () {
function MdcListModule() {
}
MdcListModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
exports: LIST_DECLARATIONS,
declarations: LIST_DECLARATIONS,
},] },
];
return MdcListModule;
}());
exports.MDC_LIST_PARENT_COMPONENT = MDC_LIST_PARENT_COMPONENT;
exports.MdcList = MdcList;
exports.MdcListDivider = MdcListDivider;
exports.MdcListGroup = MdcListGroup;
exports.MdcListGroupSubheader = MdcListGroupSubheader;
exports.MdcListItem = MdcListItem;
exports.MdcListItemChange = MdcListItemChange;
exports.MdcListItemGraphic = MdcListItemGraphic;
exports.MdcListItemMeta = MdcListItemMeta;
exports.MdcListItemSecondary = MdcListItemSecondary;
exports.MdcListItemText = MdcListItemText;
exports.MdcListModule = MdcListModule;
exports.MdcListSelectionChange = MdcListSelectionChange;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-list.umd.js.map