@angular-mdc/web/esm2015/list.js

Angular MDC

/**
 * @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 { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Input, InjectionToken, Directive, EventEmitter, ChangeDetectorRef, Optional, Inject, Output, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { merge } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { MDCComponent } from '@angular-mdc/web/base';
import { ENTER, SPACE } from '@angular/cdk/keycodes';
import { MDCRippleFoundation } from '@material/ripple';
import { MdcRipple } from '@angular-mdc/web/ripple';
import { matches } from '@angular-mdc/web/dom';
import { MDCListFoundation, cssClasses, strings } from '@material/list';

/**
 * @fileoverview added by tsickle
 * Generated from: list/list-divider.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MdcListDivider {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
        this._inset = false;
        this._padded = false;
    }
    /**
     * @return {?}
     */
    get inset() {
        return this._inset;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set inset(value) {
        this._inset = coerceBooleanProperty(value);
    }
    /**
     * @return {?}
     */
    get padded() {
        return this._padded;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set padded(value) {
        this._padded = coerceBooleanProperty(value);
    }
}
MdcListDivider.decorators = [
    { type: 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: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush
            },] },
];
/** @nocollapse */
MdcListDivider.ctorParameters = () => [
    { type: ElementRef }
];
MdcListDivider.propDecorators = {
    inset: [{ type: Input }],
    padded: [{ type: Input }]
};

/**
 * @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.
 */
class MdcListSelectionChange {
    /**
     * @param {?} source
     */
    constructor(source) {
        this.source = source;
    }
}
/**
 * Injection token used to provide the parent MdcList component to MdcListItem.
 * @type {?}
 */
const MDC_LIST_PARENT_COMPONENT = new InjectionToken('MDC_LIST_PARENT_COMPONENT');
/** @type {?} */
let uniqueIdCounter = 0;
class MdcListItemGraphic {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
}
MdcListItemGraphic.decorators = [
    { type: 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 = () => [
    { type: ElementRef }
];
class MdcListItemMeta {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
}
MdcListItemMeta.decorators = [
    { type: Directive, args: [{
                selector: '[mdcListItemMeta], mdc-list-item-meta',
                exportAs: 'mdcListItemMeta',
                host: { 'class': 'mdc-list-item__meta' }
            },] },
];
/** @nocollapse */
MdcListItemMeta.ctorParameters = () => [
    { type: ElementRef }
];
class MdcListItemText {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
}
MdcListItemText.decorators = [
    { type: Component, args: [{selector: '[mdcListItemText], mdc-list-item-text',
                exportAs: 'mdcListItemText',
                host: { 'class': 'mdc-list-item__text' },
                template: `
  <ng-container>
    <span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
    <span class="mdc-list-item__secondary-text" *ngIf="secondaryText">{{secondaryText}}</span>
  </ng-container>`,
                encapsulation: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush
            },] },
];
/** @nocollapse */
MdcListItemText.ctorParameters = () => [
    { type: ElementRef }
];
MdcListItemText.propDecorators = {
    secondaryText: [{ type: Input }]
};
class MdcListItemSecondary {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
}
MdcListItemSecondary.decorators = [
    { type: Directive, args: [{
                selector: '[mdcListItemSecondary], mdc-list-item-secondary',
                exportAs: 'mdcListItemSecondary',
                host: { 'class': 'mdc-list-item__secondary-text' }
            },] },
];
/** @nocollapse */
MdcListItemSecondary.ctorParameters = () => [
    { type: ElementRef }
];
class MdcListItem {
    /**
     * @param {?} ripple
     * @param {?} _changeDetectorRef
     * @param {?} elementRef
     * @param {?} _parent
     */
    constructor(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 EventEmitter();
        this._root = this.elementRef.nativeElement;
        this.ripple = this._createRipple();
        this.ripple.init();
    }
    /**
     * The unique ID of the list item.
     * @return {?}
     */
    get id() {
        return this._id;
    }
    /**
     * Whether the list item is selected.
     * @return {?}
     */
    get selected() {
        return this._selected;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set selected(value) {
        /** @type {?} */
        const newValue = coerceBooleanProperty(value);
        if (newValue !== this._selected) {
            this._selected = newValue;
            this._changeDetectorRef.markForCheck();
        }
    }
    /**
     * Whether the list item is activated.
     * @return {?}
     */
    get activated() {
        return this._activated;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set activated(value) {
        /** @type {?} */
        const newValue = coerceBooleanProperty(value);
        if (newValue !== this._activated) {
            this._activated = newValue;
            this._changeDetectorRef.markForCheck();
        }
    }
    /**
     * Whether the list item is disabled.
     * @return {?}
     */
    get disabled() {
        return this._disabled;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set disabled(value) {
        /** @type {?} */
        const newValue = coerceBooleanProperty(value);
        if (newValue !== this._disabled) {
            this._disabled = newValue;
            this._changeDetectorRef.markForCheck();
        }
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.ripple.destroy();
    }
    /**
     * @private
     * @return {?}
     */
    _createRipple() {
        /** @type {?} */
        const adapter = Object.assign(Object.assign({}, MdcRipple.createAdapter(this)), { isSurfaceDisabled: (/**
             * @return {?}
             */
            () => this._disabled || this._parent.disableRipple) });
        return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
    }
    /**
     * @return {?}
     */
    focus() {
        this.getListItemElement().focus();
    }
    /**
     * @param {?} role
     * @return {?}
     */
    setRole(role) {
        this.getListItemElement().setAttribute('role', role);
    }
    /**
     * @return {?}
     */
    getListItemElement() {
        return this.elementRef.nativeElement;
    }
    /**
     * @param {?} evt
     * @return {?}
     */
    _onKeydown(evt) {
        if (evt.keyCode === ENTER || evt.keyCode === SPACE) {
            this._emitChangeEvent();
        }
    }
    /**
     * Emits a change event if the selected state of an option changed.
     * @return {?}
     */
    _emitChangeEvent() {
        if (this._disabled) {
            return;
        }
        this.selectionChange.emit(new MdcListSelectionChange(this));
    }
}
MdcListItem.decorators = [
    { type: 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: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush,
                providers: [MdcRipple]
            },] },
];
/** @nocollapse */
MdcListItem.ctorParameters = () => [
    { type: MdcRipple },
    { type: ChangeDetectorRef },
    { type: ElementRef },
    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MDC_LIST_PARENT_COMPONENT,] }] }
];
MdcListItem.propDecorators = {
    value: [{ type: Input }],
    tabIndex: [{ type: Input }],
    selected: [{ type: Input }],
    activated: [{ type: Input }],
    disabled: [{ type: Input }],
    selectionChange: [{ type: Output }]
};

/**
 * @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.
 */
class MdcListItemChange {
    /**
     * @param {?} source
     * @param {?} option
     */
    constructor(source, option) {
        this.source = source;
        this.option = option;
    }
}
class MdcListGroup {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
}
MdcListGroup.decorators = [
    { type: Component, args: [{selector: '[mdcListGroup], mdc-list-group',
                exportAs: 'mdcListGroup',
                host: { 'class': 'mdc-list-group' },
                template: `
  <h3 class="mdc-list-group__subheader" *ngIf="subheader">{{subheader}}</h3>
  <ng-content></ng-content>`,
                encapsulation: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush
            },] },
];
/** @nocollapse */
MdcListGroup.ctorParameters = () => [
    { type: ElementRef }
];
MdcListGroup.propDecorators = {
    subheader: [{ type: Input }]
};
class MdcListGroupSubheader {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
}
MdcListGroupSubheader.decorators = [
    { type: Directive, args: [{
                selector: '[mdcListGroupSubheader], mdc-list-group-subheader',
                exportAs: 'mdcListGroupSubheader',
                host: { 'class': 'mdc-list-group__subheader' }
            },] },
];
/** @nocollapse */
MdcListGroupSubheader.ctorParameters = () => [
    { type: ElementRef }
];
class MdcList extends MDCComponent {
    /**
     * @param {?} _platform
     * @param {?} _changeDetectorRef
     * @param {?} elementRef
     */
    constructor(_platform, _changeDetectorRef, elementRef) {
        super(elementRef);
        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 EventEmitter();
        /**
         * Emits an event for keyboard and mouse actions.
         */
        this.actionEvent = new EventEmitter();
        /**
         * Subscription to changes in list items.
         */
        this._changeSubscription = null;
        /**
         * Subscription to selection events in list items.
         */
        this.itemSelectionSubscription = null;
    }
    /**
     * @return {?}
     */
    get twoLine() {
        return this._twoLine;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set twoLine(value) {
        this._twoLine = coerceBooleanProperty(value);
    }
    /**
     * @return {?}
     */
    get dense() {
        return this._dense;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set dense(value) {
        this._dense = coerceBooleanProperty(value);
    }
    /**
     * @return {?}
     */
    get border() {
        return this._border;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set border(value) {
        this._border = coerceBooleanProperty(value);
    }
    /**
     * @return {?}
     */
    get avatar() {
        return this._avatar;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set avatar(value) {
        this._avatar = coerceBooleanProperty(value);
    }
    /**
     * @return {?}
     */
    get interactive() {
        return this._interactive;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set interactive(value) {
        /** @type {?} */
        const newValue = coerceBooleanProperty(value);
        if (newValue !== this._interactive) {
            this._interactive = newValue;
        }
    }
    /**
     * @return {?}
     */
    get disableRipple() {
        return this._disableRipple;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set disableRipple(value) {
        /** @type {?} */
        const newValue = coerceBooleanProperty(value);
        if (newValue !== this._disableRipple) {
            this._disableRipple = newValue;
        }
    }
    /**
     * @return {?}
     */
    get singleSelection() {
        return this._singleSelection;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set singleSelection(value) {
        if (value !== undefined) {
            /** @type {?} */
            const newValue = coerceBooleanProperty(value);
            if (newValue !== this._singleSelection) {
                this._singleSelection = newValue;
                this._foundation.setSingleSelection(this._singleSelection);
                this._changeDetectorRef.markForCheck();
            }
        }
    }
    /**
     * @return {?}
     */
    get useActivatedClass() {
        return this._useActivatedClass;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set useActivatedClass(value) {
        this._useActivatedClass = coerceBooleanProperty(value);
        this._foundation.setUseActivatedClass(this._useActivatedClass);
        this._changeDetectorRef.markForCheck();
    }
    /**
     * @return {?}
     */
    get useSelectedClass() {
        return this._useSelectedClass;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set useSelectedClass(value) {
        this._useSelectedClass = coerceBooleanProperty(value);
        this._changeDetectorRef.markForCheck();
    }
    /**
     * @return {?}
     */
    get verticalOrientation() {
        return this._verticalOrientation;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set verticalOrientation(value) {
        this._verticalOrientation = coerceBooleanProperty(value);
        this._foundation.setVerticalOrientation(this._verticalOrientation);
        this._changeDetectorRef.markForCheck();
    }
    /**
     * @return {?}
     */
    get wrapFocus() {
        return this._wrapFocus;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set wrapFocus(value) {
        this._wrapFocus = coerceBooleanProperty(value);
        this._foundation.setWrapFocus(this._wrapFocus);
        this._changeDetectorRef.markForCheck();
    }
    /**
     * Combined stream of all of the list item selection events.
     * @return {?}
     */
    get listItemSelections() {
        return merge(...this.items.map((/**
         * @param {?} item
         * @return {?}
         */
        item => item.selectionChange)));
    }
    /**
     * @return {?}
     */
    getDefaultFoundation() {
        /** @type {?} */
        const adapter = {
            getListItemCount: (/**
             * @return {?}
             */
            () => this.items.length),
            getFocusedElementIndex: (/**
             * @return {?}
             */
            () => {
                if (!this._platform.isBrowser && (/** @type {?} */ (document.activeElement))) {
                    return -1;
                }
                return this.items.toArray().findIndex((/**
                 * @param {?} _
                 * @return {?}
                 */
                _ => _.getListItemElement() === (/** @type {?} */ (document.activeElement)))) || -1;
            }),
            setAttributeForElementIndex: (/**
             * @param {?} index
             * @param {?} attr
             * @param {?} value
             * @return {?}
             */
            (index, attr, value) => {
                var _a, _b;
                /** @type {?} */
                const 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 {?}
             */
            (index, className) => this.items.toArray()[index].getListItemElement().classList.add(className)),
            removeClassForElementIndex: (/**
             * @param {?} index
             * @param {?} className
             * @return {?}
             */
            (index, className) => {
                var _a, _b, _c;
                /** @type {?} */
                const 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 {?}
             */
            (index, attr) => this.items.toArray()[index].getListItemElement().getAttribute(attr)),
            focusItemAtIndex: (/**
             * @param {?} index
             * @return {?}
             */
            (index) => this.focusItemAtIndex(index)),
            setTabIndexForListItemChildren: (/**
             * @param {?} listItemIndex
             * @param {?} tabIndexValue
             * @return {?}
             */
            (listItemIndex, tabIndexValue) => {
                /** @type {?} */
                const listItemChildren = [].slice.call(this.items.toArray()[listItemIndex].getListItemElement()
                    .querySelectorAll(strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
                listItemChildren.forEach((/**
                 * @param {?} ele
                 * @return {?}
                 */
                (ele) => ele.setAttribute('tabindex', `${tabIndexValue}`)));
            }),
            hasCheckboxAtIndex: (/**
             * @param {?} index
             * @return {?}
             */
            (index) => {
                /** @type {?} */
                const listItem = this.items.toArray()[index].getListItemElement();
                return !!listItem.querySelector(strings.CHECKBOX_SELECTOR);
            }),
            hasRadioAtIndex: (/**
             * @param {?} index
             * @return {?}
             */
            (index) => {
                /** @type {?} */
                const listItem = this.items.toArray()[index].getListItemElement();
                return !!listItem.querySelector(strings.RADIO_SELECTOR);
            }),
            isCheckboxCheckedAtIndex: (/**
             * @param {?} index
             * @return {?}
             */
            (index) => {
                /** @type {?} */
                const listItem = this.items.toArray()[index].getListItemElement();
                /** @type {?} */
                const toggleEl = listItem.querySelector(strings.CHECKBOX_SELECTOR);
                return (/** @type {?} */ (toggleEl)).checked;
            }),
            setCheckedCheckboxOrRadioAtIndex: (/**
             * @param {?} index
             * @param {?} isChecked
             * @return {?}
             */
            (index, isChecked) => {
                /** @type {?} */
                const listItem = this.items.toArray()[index].getListItemElement();
                /** @type {?} */
                const toggleEl = listItem.querySelector(strings.CHECKBOX_RADIO_SELECTOR);
                (/** @type {?} */ (toggleEl)).checked = isChecked;
                if (this._platform.isBrowser) {
                    /** @type {?} */
                    const event = document.createEvent('Event');
                    event.initEvent('change', true, true);
                    (/** @type {?} */ (toggleEl)).dispatchEvent(event);
                }
            }),
            isFocusInsideList: (/**
             * @return {?}
             */
            () => this._platform.isBrowser ?
                this.elementRef.nativeElement.contains(document.activeElement) : false),
            isRootFocused: (/**
             * @return {?}
             */
            () => this._platform.isBrowser ? document.activeElement === this._getHostElement() : false),
            listItemAtIndexHasClass: (/**
             * @param {?} index
             * @param {?} className
             * @return {?}
             */
            (index, className) => this.items.toArray()[index].getListItemElement().classList.contains(className)),
            notifyAction: (/**
             * @param {?} index
             * @return {?}
             */
            (index) => this.actionEvent.emit({ index: index }))
        };
        return new MDCListFoundation(adapter);
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this._foundation.init();
        this._foundation.layout();
        // When list items change, re-subscribe
        this._changeSubscription = this.items.changes.pipe(startWith(null))
            .subscribe((/**
         * @return {?}
         */
        () => {
            if (this.items.length) {
                this._resetListItems();
            }
        }));
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        var _a;
        this._dropSubscriptions();
        (_a = this._changeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
        this._foundation.destroy();
    }
    /**
     * @param {?} index
     * @return {?}
     */
    setSelectedIndex(index) {
        this.reset();
        this._foundation.setSelectedIndex(index);
        if (index === -1) {
            return;
        }
        /** @type {?} */
        const selectedItem = this.items.toArray()[index];
        if (selectedItem) {
            this._applySelectionState(selectedItem);
        }
    }
    /**
     * @param {?} value
     * @return {?}
     */
    setSelectedValue(value) {
        this.reset();
        if (value === null) {
            return;
        }
        /** @type {?} */
        const selectedItem = this.getListItemByValue(value);
        this._foundation.setSelectedIndex(this.getListItemIndexByValue(value));
        if (selectedItem) {
            this._applySelectionState(selectedItem);
        }
    }
    /**
     * @return {?}
     */
    getSelectedItem() {
        return this.items.toArray().find((/**
         * @param {?} _
         * @return {?}
         */
        _ => _.selected || _.activated));
    }
    /**
     * @return {?}
     */
    getSelectedIndex() {
        return this.items.toArray().findIndex((/**
         * @param {?} _
         * @return {?}
         */
        _ => _.selected || _.activated));
    }
    /**
     * @return {?}
     */
    getSelectedValue() {
        /** @type {?} */
        const item = this.items ? this.items.find((/**
         * @param {?} _
         * @return {?}
         */
        _ => _.selected)) : null;
        return item && item.value ? item.value : null;
    }
    /**
     * @return {?}
     */
    getSelectedText() {
        /** @type {?} */
        const selectedItem = this.getSelectedItem();
        return selectedItem && selectedItem.getListItemElement().textContent || '';
    }
    /**
     * @param {?} value
     * @return {?}
     */
    getListItemByValue(value) {
        return this.items.toArray().find((/**
         * @param {?} _
         * @return {?}
         */
        _ => _.value === value));
    }
    /**
     * @param {?} index
     * @return {?}
     */
    getListItemByIndex(index) {
        return this.items.toArray()[index];
    }
    /**
     * @param {?} value
     * @return {?}
     */
    getListItemIndexByValue(value) {
        return this.items.toArray().findIndex((/**
         * @param {?} _
         * @return {?}
         */
        _ => _.value === value));
    }
    /**
     * @param {?} index
     * @return {?}
     */
    focusItemAtIndex(index) {
        this.items.toArray()[index].getListItemElement().focus();
    }
    /**
     * @return {?}
     */
    focusFirstElement() {
        return this._foundation.focusFirstElement();
    }
    /**
     * @return {?}
     */
    focusLastElement() {
        return this._foundation.focusLastElement();
    }
    /**
     * @param {?} index
     * @return {?}
     */
    focusNextElement(index) {
        return this._foundation.focusNextElement(index);
    }
    /**
     * @param {?} index
     * @return {?}
     */
    focusPrevElement(index) {
        return this._foundation.focusPrevElement(index);
    }
    /**
     * @param {?} role
     * @return {?}
     */
    setRole(role) {
        this._getHostElement().setAttribute('role', role);
    }
    /**
     * @param {?} index
     * @return {?}
     */
    setTabIndex(index) {
        this._getHostElement().tabIndex = index;
    }
    /**
     * @return {?}
     */
    focus() {
        this._getHostElement().focus();
    }
    /**
     * @return {?}
     */
    reset() {
        this.items.forEach((/**
         * @param {?} _
         * @return {?}
         */
        _ => {
            _.selected = false;
            _.activated = false;
        }));
    }
    /**
     * @private
     * @param {?} item
     * @return {?}
     */
    _applySelectionState(item) {
        if (this.useActivatedClass) {
            item.activated = true;
        }
        else if (this.useSelectedClass) {
            item.selected = true;
        }
    }
    /**
     * @private
     * @return {?}
     */
    _resetListItems() {
        this._dropSubscriptions();
        this._listenForListItemSelection();
    }
    /**
     * @private
     * @return {?}
     */
    _dropSubscriptions() {
        if (this.itemSelectionSubscription) {
            this.itemSelectionSubscription.unsubscribe();
            this.itemSelectionSubscription = null;
        }
    }
    /**
     * Listens to selected events on each list item.
     * @private
     * @return {?}
     */
    _listenForListItemSelection() {
        this.itemSelectionSubscription = this.listItemSelections.subscribe((/**
         * @param {?} event
         * @return {?}
         */
        event => {
            if (this.singleSelection) {
                this.items.filter((/**
                 * @param {?} _
                 * @return {?}
                 */
                _ => _.id !== event.source.id && (_.activated || _.selected)))
                    .forEach((/**
                 * @param {?} _
                 * @return {?}
                 */
                _ => {
                    _.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 {?}
     */
    _onFocusIn(evt) {
        /** @type {?} */
        const index = this._getListItemIndexByEvent(evt);
        this._foundation.handleFocusIn(evt, index);
    }
    /**
     * @param {?} evt
     * @return {?}
     */
    _onFocusOut(evt) {
        /** @type {?} */
        const index = this._getListItemIndexByEvent(evt);
        if (index >= 0) {
            this._foundation.handleFocusOut(evt, index);
        }
    }
    /**
     * @param {?} evt
     * @return {?}
     */
    _onKeydown(evt) {
        /** @type {?} */
        const index = this._getListItemIndexByEvent(evt);
        /** @type {?} */
        const target = (/** @type {?} */ (evt.target));
        if (index >= 0) {
            this._foundation.handleKeydown(evt, target.classList.contains(cssClasses.LIST_ITEM_CLASS), index);
        }
    }
    /**
     * @param {?} evt
     * @return {?}
     */
    _handleClickEvent(evt) {
        /** @type {?} */
        const index = this._getListItemIndexByEvent(evt);
        /** @type {?} */
        const target = (/** @type {?} */ (evt.target));
        /** @type {?} */
        const 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 {?} */
        const toggleCheckbox = !matches(target, strings.CHECKBOX_RADIO_SELECTOR);
        this._foundation.handleClick(index, toggleCheckbox);
    }
    /**
     * @private
     * @param {?} target
     * @return {?}
     */
    _getListItemByEventTarget(target) {
        return this.items.toArray().find((/**
         * @param {?} _
         * @return {?}
         */
        _ => _.getListItemElement() === target));
    }
    /**
     * @private
     * @param {?} evt
     * @return {?}
     */
    _getListItemIndexByEvent(evt) {
        return this.items.toArray().findIndex((/**
         * @param {?} _
         * @return {?}
         */
        _ => _.getListItemElement() === evt.target));
    }
    /**
     * Retrieves the DOM element of the component host.
     * @private
     * @return {?}
     */
    _getHostElement() {
        return this.elementRef.nativeElement;
    }
}
MdcList.decorators = [
    { type: 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: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush,
                providers: [{ provide: MDC_LIST_PARENT_COMPONENT, useExisting: MdcList }]
            },] },
];
/** @nocollapse */
MdcList.ctorParameters = () => [
    { type: Platform },
    { type: ChangeDetectorRef },
    { type: ElementRef }
];
MdcList.propDecorators = {
    twoLine: [{ type: Input }],
    dense: [{ type: Input }],
    border: [{ type: Input }],
    avatar: [{ type: Input }],
    interactive: [{ type: Input }],
    disableRipple: [{ type: Input }],
    singleSelection: [{ type: Input }],
    useActivatedClass: [{ type: Input }],
    useSelectedClass: [{ type: Input }],
    verticalOrientation: [{ type: Input }],
    wrapFocus: [{ type: Input }],
    items: [{ type: ContentChildren, args: [MdcListItem, { descendants: true },] }],
    selectionChange: [{ type: Output }],
    actionEvent: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * Generated from: list/module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const LIST_DECLARATIONS = [
    MdcList,
    MdcListDivider,
    MdcListGroup,
    MdcListGroupSubheader,
    MdcListItem,
    MdcListItemGraphic,
    MdcListItemMeta,
    MdcListItemSecondary,
    MdcListItemText
];
class MdcListModule {
}
MdcListModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule],
                exports: LIST_DECLARATIONS,
                declarations: LIST_DECLARATIONS,
            },] },
];

export { MDC_LIST_PARENT_COMPONENT, MdcList, MdcListDivider, MdcListGroup, MdcListGroupSubheader, MdcListItem, MdcListItemChange, MdcListItemGraphic, MdcListItemMeta, MdcListItemSecondary, MdcListItemText, MdcListModule, MdcListSelectionChange };
//# sourceMappingURL=list.js.map