UNPKG

@angular/material

Version:
535 lines (533 loc) 79.3 kB
import { CommonModule } from '@angular/common'; import { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Directive, ChangeDetectorRef, Optional, ContentChildren, ContentChild, forwardRef, Inject, ViewChild, Input, EventEmitter, Attribute, Output, NgModule } from '@angular/core'; import { mixinDisableRipple, setLines, MatLine, MatLineModule, MatRippleModule, MatCommonModule, MatPseudoCheckboxModule } from '@angular/material/core'; import { __extends, __values } from 'tslib'; import { Subject } from 'rxjs'; import { takeUntil, startWith } from 'rxjs/operators'; import { FocusKeyManager } from '@angular/cdk/a11y'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { SelectionModel } from '@angular/cdk/collections'; import { hasModifierKey, A, END, HOME, ENTER, SPACE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { MatDividerModule } from '@angular/material/divider'; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ // Boilerplate for applying mixins to MatList. /** @docs-private */ var MatListBase = /** @class */ (function () { function MatListBase() { } return MatListBase; }()); var _MatListMixinBase = mixinDisableRipple(MatListBase); // Boilerplate for applying mixins to MatListItem. /** @docs-private */ var MatListItemBase = /** @class */ (function () { function MatListItemBase() { } return MatListItemBase; }()); var _MatListItemMixinBase = mixinDisableRipple(MatListItemBase); var MatNavList = /** @class */ (function (_super) { __extends(MatNavList, _super); function MatNavList() { var _this = _super !== null && _super.apply(this, arguments) || this; /** Emits when the state of the list changes. */ _this._stateChanges = new Subject(); return _this; } MatNavList.prototype.ngOnChanges = function () { this._stateChanges.next(); }; MatNavList.prototype.ngOnDestroy = function () { this._stateChanges.complete(); }; MatNavList.decorators = [ { type: Component, args: [{ selector: 'mat-nav-list', exportAs: 'matNavList', host: { 'role': 'navigation', 'class': 'mat-nav-list mat-list-base' }, template: "<ng-content></ng-content>\n\n", inputs: ['disableRipple'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list-base .mat-subheader{margin:0}.mat-list-base{padding-top:8px;display:block;-webkit-tap-highlight-color:transparent}.mat-list-base .mat-subheader{height:48px;line-height:16px}.mat-list-base .mat-subheader:first-child{margin-top:-8px}.mat-list-base .mat-list-item,.mat-list-base .mat-list-option{display:block;height:48px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base .mat-list-item .mat-list-item-content,.mat-list-base .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list-base .mat-list-item .mat-list-item-content-reverse,.mat-list-base .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list-base .mat-list-item .mat-list-item-ripple,.mat-list-base .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar,.mat-list-base .mat-list-option.mat-list-item-with-avatar{height:56px}.mat-list-base .mat-list-item.mat-2-line,.mat-list-base .mat-list-option.mat-2-line{height:72px}.mat-list-base .mat-list-item.mat-3-line,.mat-list-base .mat-list-option.mat-3-line{height:88px}.mat-list-base .mat-list-item.mat-multi-line,.mat-list-base .mat-list-option.mat-multi-line{height:auto}.mat-list-base .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base .mat-list-item .mat-list-text,.mat-list-base .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base .mat-list-item .mat-list-text>*,.mat-list-base .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-list-base .mat-list-item .mat-list-text:empty,.mat-list-base .mat-list-option .mat-list-text:empty{display:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base .mat-list-item .mat-list-avatar,.mat-list-base .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover}.mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list-base .mat-list-item .mat-list-icon,.mat-list-base .mat-list-option .mat-list-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list-base .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list-base .mat-list-item .mat-divider,.mat-list-base .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base .mat-list-item .mat-divider,[dir=rtl] .mat-list-base .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list-base[dense]{padding-top:4px;display:block}.mat-list-base[dense] .mat-subheader{height:40px;line-height:8px}.mat-list-base[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list-base[dense] .mat-list-item,.mat-list-base[dense] .mat-list-option{display:block;height:40px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-item-content,.mat-list-base[dense] .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list-base[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list-base[dense] .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list-base[dense] .mat-list-item .mat-list-item-ripple,.mat-list-base[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar{height:48px}.mat-list-base[dense] .mat-list-item.mat-2-line,.mat-list-base[dense] .mat-list-option.mat-2-line{height:60px}.mat-list-base[dense] .mat-list-item.mat-3-line,.mat-list-base[dense] .mat-list-option.mat-3-line{height:76px}.mat-list-base[dense] .mat-list-item.mat-multi-line,.mat-list-base[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list-base[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base[dense] .mat-list-item .mat-list-text,.mat-list-base[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-text>*,.mat-list-base[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-list-base[dense] .mat-list-item .mat-list-text:empty,.mat-list-base[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base[dense] .mat-list-item .mat-list-avatar,.mat-list-base[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover}.mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:68px;width:calc(100% - 68px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:68px}.mat-list-base[dense] .mat-list-item .mat-list-icon,.mat-list-base[dense] .mat-list-option .mat-list-icon{flex-shrink:0;width:20px;height:20px;font-size:20px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list-base[dense] .mat-list-item .mat-divider,.mat-list-base[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-nav-list a{text-decoration:none;color:inherit}.mat-nav-list .mat-list-item{cursor:pointer;outline:none}mat-action-list button{background:none;color:inherit;border:none;font:inherit;outline:inherit;-webkit-tap-highlight-color:transparent;text-align:left}[dir=rtl] mat-action-list button{text-align:right}mat-action-list button::-moz-focus-inner{border:0}mat-action-list .mat-list-item{cursor:pointer;outline:inherit}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer;outline:none}.cdk-high-contrast-active .mat-selection-list:focus{outline-style:dotted}.cdk-high-contrast-active .mat-list-option:hover,.cdk-high-contrast-active .mat-list-option:focus,.cdk-high-contrast-active .mat-nav-list .mat-list-item:hover,.cdk-high-contrast-active .mat-nav-list .mat-list-item:focus,.cdk-high-contrast-active mat-action-list .mat-list-item:hover,.cdk-high-contrast-active mat-action-list .mat-list-item:focus{outline:dotted 1px}@media(hover: none){.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover{background:none}}\n"] }] } ]; return MatNavList; }(_MatListMixinBase)); var MatList = /** @class */ (function (_super) { __extends(MatList, _super); function MatList(_elementRef) { var _this = _super.call(this) || this; _this._elementRef = _elementRef; /** Emits when the state of the list changes. */ _this._stateChanges = new Subject(); if (_this._getListType() === 'action-list') { _elementRef.nativeElement.classList.add('mat-action-list'); } return _this; } MatList.prototype._getListType = function () { var nodeName = this._elementRef.nativeElement.nodeName.toLowerCase(); if (nodeName === 'mat-list') { return 'list'; } if (nodeName === 'mat-action-list') { return 'action-list'; } return null; }; MatList.prototype.ngOnChanges = function () { this._stateChanges.next(); }; MatList.prototype.ngOnDestroy = function () { this._stateChanges.complete(); }; MatList.decorators = [ { type: Component, args: [{ selector: 'mat-list, mat-action-list', exportAs: 'matList', template: "<ng-content></ng-content>\n\n", host: { 'class': 'mat-list mat-list-base' }, inputs: ['disableRipple'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-subheader{display:flex;box-sizing:border-box;padding:16px;align-items:center}.mat-list-base .mat-subheader{margin:0}.mat-list-base{padding-top:8px;display:block;-webkit-tap-highlight-color:transparent}.mat-list-base .mat-subheader{height:48px;line-height:16px}.mat-list-base .mat-subheader:first-child{margin-top:-8px}.mat-list-base .mat-list-item,.mat-list-base .mat-list-option{display:block;height:48px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base .mat-list-item .mat-list-item-content,.mat-list-base .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list-base .mat-list-item .mat-list-item-content-reverse,.mat-list-base .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list-base .mat-list-item .mat-list-item-ripple,.mat-list-base .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar,.mat-list-base .mat-list-option.mat-list-item-with-avatar{height:56px}.mat-list-base .mat-list-item.mat-2-line,.mat-list-base .mat-list-option.mat-2-line{height:72px}.mat-list-base .mat-list-item.mat-3-line,.mat-list-base .mat-list-option.mat-3-line{height:88px}.mat-list-base .mat-list-item.mat-multi-line,.mat-list-base .mat-list-option.mat-multi-line{height:auto}.mat-list-base .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base .mat-list-item .mat-list-text,.mat-list-base .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base .mat-list-item .mat-list-text>*,.mat-list-base .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-list-base .mat-list-item .mat-list-text:empty,.mat-list-base .mat-list-option .mat-list-text:empty{display:none}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base .mat-list-item .mat-list-avatar,.mat-list-base .mat-list-option .mat-list-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover}.mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:72px;width:calc(100% - 72px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:72px}.mat-list-base .mat-list-item .mat-list-icon,.mat-list-base .mat-list-option .mat-list-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list-base .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:64px;width:calc(100% - 64px)}[dir=rtl] .mat-list-base .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:64px}.mat-list-base .mat-list-item .mat-divider,.mat-list-base .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base .mat-list-item .mat-divider,[dir=rtl] .mat-list-base .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-list-base[dense]{padding-top:4px;display:block}.mat-list-base[dense] .mat-subheader{height:40px;line-height:8px}.mat-list-base[dense] .mat-subheader:first-child{margin-top:-4px}.mat-list-base[dense] .mat-list-item,.mat-list-base[dense] .mat-list-option{display:block;height:40px;-webkit-tap-highlight-color:transparent;width:100%;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-item-content,.mat-list-base[dense] .mat-list-option .mat-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 16px;position:relative;height:inherit}.mat-list-base[dense] .mat-list-item .mat-list-item-content-reverse,.mat-list-base[dense] .mat-list-option .mat-list-item-content-reverse{display:flex;align-items:center;padding:0 16px;flex-direction:row-reverse;justify-content:space-around}.mat-list-base[dense] .mat-list-item .mat-list-item-ripple,.mat-list-base[dense] .mat-list-option .mat-list-item-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar{height:48px}.mat-list-base[dense] .mat-list-item.mat-2-line,.mat-list-base[dense] .mat-list-option.mat-2-line{height:60px}.mat-list-base[dense] .mat-list-item.mat-3-line,.mat-list-base[dense] .mat-list-option.mat-3-line{height:76px}.mat-list-base[dense] .mat-list-item.mat-multi-line,.mat-list-base[dense] .mat-list-option.mat-multi-line{height:auto}.mat-list-base[dense] .mat-list-item.mat-multi-line .mat-list-item-content,.mat-list-base[dense] .mat-list-option.mat-multi-line .mat-list-item-content{padding-top:16px;padding-bottom:16px}.mat-list-base[dense] .mat-list-item .mat-list-text,.mat-list-base[dense] .mat-list-option .mat-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding:0}.mat-list-base[dense] .mat-list-item .mat-list-text>*,.mat-list-base[dense] .mat-list-option .mat-list-text>*{margin:0;padding:0;font-weight:normal;font-size:inherit}.mat-list-base[dense] .mat-list-item .mat-list-text:empty,.mat-list-base[dense] .mat-list-option .mat-list-text:empty{display:none}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:0;padding-left:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:0}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-left:0;padding-right:16px}[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-item.mat-list-option .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar .mat-list-item-content-reverse .mat-list-text,[dir=rtl] .mat-list-base[dense] .mat-list-option.mat-list-option .mat-list-item-content-reverse .mat-list-text{padding-right:0;padding-left:16px}.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-item.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content-reverse .mat-list-text,.mat-list-base[dense] .mat-list-option.mat-list-item-with-avatar.mat-list-option .mat-list-item-content .mat-list-text{padding-right:16px;padding-left:16px}.mat-list-base[dense] .mat-list-item .mat-list-avatar,.mat-list-base[dense] .mat-list-option .mat-list-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover}.mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:68px;width:calc(100% - 68px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-avatar~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-avatar~.mat-divider-inset{margin-left:auto;margin-right:68px}.mat-list-base[dense] .mat-list-item .mat-list-icon,.mat-list-base[dense] .mat-list-option .mat-list-icon{flex-shrink:0;width:20px;height:20px;font-size:20px;box-sizing:content-box;border-radius:50%;padding:4px}.mat-list-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:60px;width:calc(100% - 60px)}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-list-icon~.mat-divider-inset,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-list-icon~.mat-divider-inset{margin-left:auto;margin-right:60px}.mat-list-base[dense] .mat-list-item .mat-divider,.mat-list-base[dense] .mat-list-option .mat-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mat-list-base[dense] .mat-list-item .mat-divider,[dir=rtl] .mat-list-base[dense] .mat-list-option .mat-divider{margin-left:auto;margin-right:0}.mat-list-base[dense] .mat-list-item .mat-divider.mat-divider-inset,.mat-list-base[dense] .mat-list-option .mat-divider.mat-divider-inset{position:absolute}.mat-nav-list a{text-decoration:none;color:inherit}.mat-nav-list .mat-list-item{cursor:pointer;outline:none}mat-action-list button{background:none;color:inherit;border:none;font:inherit;outline:inherit;-webkit-tap-highlight-color:transparent;text-align:left}[dir=rtl] mat-action-list button{text-align:right}mat-action-list button::-moz-focus-inner{border:0}mat-action-list .mat-list-item{cursor:pointer;outline:inherit}.mat-list-option:not(.mat-list-item-disabled){cursor:pointer;outline:none}.cdk-high-contrast-active .mat-selection-list:focus{outline-style:dotted}.cdk-high-contrast-active .mat-list-option:hover,.cdk-high-contrast-active .mat-list-option:focus,.cdk-high-contrast-active .mat-nav-list .mat-list-item:hover,.cdk-high-contrast-active .mat-nav-list .mat-list-item:focus,.cdk-high-contrast-active mat-action-list .mat-list-item:hover,.cdk-high-contrast-active mat-action-list .mat-list-item:focus{outline:dotted 1px}@media(hover: none){.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover{background:none}}\n"] }] } ]; /** @nocollapse */ MatList.ctorParameters = function () { return [ { type: ElementRef } ]; }; return MatList; }(_MatListMixinBase)); /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ var MatListAvatarCssMatStyler = /** @class */ (function () { function MatListAvatarCssMatStyler() { } MatListAvatarCssMatStyler.decorators = [ { type: Directive, args: [{ selector: '[mat-list-avatar], [matListAvatar]', host: { 'class': 'mat-list-avatar' } },] } ]; return MatListAvatarCssMatStyler; }()); /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ var MatListIconCssMatStyler = /** @class */ (function () { function MatListIconCssMatStyler() { } MatListIconCssMatStyler.decorators = [ { type: Directive, args: [{ selector: '[mat-list-icon], [matListIcon]', host: { 'class': 'mat-list-icon' } },] } ]; return MatListIconCssMatStyler; }()); /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ var MatListSubheaderCssMatStyler = /** @class */ (function () { function MatListSubheaderCssMatStyler() { } MatListSubheaderCssMatStyler.decorators = [ { type: Directive, args: [{ selector: '[mat-subheader], [matSubheader]', host: { 'class': 'mat-subheader' } },] } ]; return MatListSubheaderCssMatStyler; }()); /** An item within a Material Design list. */ var MatListItem = /** @class */ (function (_super) { __extends(MatListItem, _super); function MatListItem(_element, _changeDetectorRef, navList, list) { var _this = _super.call(this) || this; _this._element = _element; _this._isInteractiveList = false; _this._destroyed = new Subject(); _this._isInteractiveList = !!(navList || (list && list._getListType() === 'action-list')); _this._list = navList || list; // If no type attributed is specified for <button>, set it to "button". // If a type attribute is already specified, do nothing. var element = _this._getHostElement(); if (element.nodeName.toLowerCase() === 'button' && !element.hasAttribute('type')) { element.setAttribute('type', 'button'); } if (_this._list) { // React to changes in the state of the parent list since // some of the item's properties depend on it (e.g. `disableRipple`). _this._list._stateChanges.pipe(takeUntil(_this._destroyed)).subscribe(function () { _changeDetectorRef.markForCheck(); }); } return _this; } MatListItem.prototype.ngAfterContentInit = function () { setLines(this._lines, this._element); }; MatListItem.prototype.ngOnDestroy = function () { this._destroyed.next(); this._destroyed.complete(); }; /** Whether this list item should show a ripple effect when clicked. */ MatListItem.prototype._isRippleDisabled = function () { return !this._isInteractiveList || this.disableRipple || !!(this._list && this._list.disableRipple); }; /** Retrieves the DOM element of the component host. */ MatListItem.prototype._getHostElement = function () { return this._element.nativeElement; }; MatListItem.decorators = [ { type: Component, args: [{ selector: 'mat-list-item, a[mat-list-item], button[mat-list-item]', exportAs: 'matListItem', host: { 'class': 'mat-list-item', // @breaking-change 8.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`. '[class.mat-list-item-avatar]': '_avatar || _icon', '[class.mat-list-item-with-avatar]': '_avatar || _icon', }, inputs: ['disableRipple'], template: "<div class=\"mat-list-item-content\">\n <div class=\"mat-list-item-ripple\" mat-ripple\n [matRippleTrigger]=\"_getHostElement()\"\n [matRippleDisabled]=\"_isRippleDisabled()\">\n </div>\n\n <ng-content select=\"[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]\">\n </ng-content>\n\n <div class=\"mat-list-text\"><ng-content select=\"[mat-line], [matLine]\"></ng-content></div>\n\n <ng-content></ng-content>\n</div>\n", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }] } ]; /** @nocollapse */ MatListItem.ctorParameters = function () { return [ { type: ElementRef }, { type: ChangeDetectorRef }, { type: MatNavList, decorators: [{ type: Optional }] }, { type: MatList, decorators: [{ type: Optional }] } ]; }; MatListItem.propDecorators = { _lines: [{ type: ContentChildren, args: [MatLine, { descendants: true },] }], _avatar: [{ type: ContentChild, args: [MatListAvatarCssMatStyler,] }], _icon: [{ type: ContentChild, args: [MatListIconCssMatStyler,] }] }; return MatListItem; }(_MatListItemMixinBase)); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** @docs-private */ var MatSelectionListBase = /** @class */ (function () { function MatSelectionListBase() { } return MatSelectionListBase; }()); var _MatSelectionListMixinBase = mixinDisableRipple(MatSelectionListBase); /** @docs-private */ var MatListOptionBase = /** @class */ (function () { function MatListOptionBase() { } return MatListOptionBase; }()); var _MatListOptionMixinBase = mixinDisableRipple(MatListOptionBase); /** @docs-private */ var MAT_SELECTION_LIST_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(function () { return MatSelectionList; }), multi: true }; /** Change event that is being fired whenever the selected state of an option changes. */ var MatSelectionListChange = /** @class */ (function () { function MatSelectionListChange( /** Reference to the selection list that emitted the event. */ source, /** Reference to the option that has been changed. */ option) { this.source = source; this.option = option; } return MatSelectionListChange; }()); /** * Component for list-options of selection-list. Each list-option can automatically * generate a checkbox and can put current item into the selectionModel of selection-list * if the current item is selected. */ var MatListOption = /** @class */ (function (_super) { __extends(MatListOption, _super); function MatListOption(_element, _changeDetector, /** @docs-private */ selectionList) { var _this = _super.call(this) || this; _this._element = _element; _this._changeDetector = _changeDetector; _this.selectionList = selectionList; _this._selected = false; _this._disabled = false; _this._hasFocus = false; /** Whether the label should appear before or after the checkbox. Defaults to 'after' */ _this.checkboxPosition = 'after'; /** * This is set to true after the first OnChanges cycle so we don't clear the value of `selected` * in the first cycle. */ _this._inputsInitialized = false; return _this; } Object.defineProperty(MatListOption.prototype, "color", { /** Theme color of the list option. This sets the color of the checkbox. */ get: function () { return this._color || this.selectionList.color; }, set: function (newValue) { this._color = newValue; }, enumerable: true, configurable: true }); Object.defineProperty(MatListOption.prototype, "value", { /** Value of the option */ get: function () { return this._value; }, set: function (newValue) { if (this.selected && newValue !== this.value && this._inputsInitialized) { this.selected = false; } this._value = newValue; }, enumerable: true, configurable: true }); Object.defineProperty(MatListOption.prototype, "disabled", { /** Whether the option is disabled. */ get: function () { return this._disabled || (this.selectionList && this.selectionList.disabled); }, set: function (value) { var newValue = coerceBooleanProperty(value); if (newValue !== this._disabled) { this._disabled = newValue; this._changeDetector.markForCheck(); } }, enumerable: true, configurable: true }); Object.defineProperty(MatListOption.prototype, "selected", { /** Whether the option is selected. */ get: function () { return this.selectionList.selectedOptions.isSelected(this); }, set: function (value) { var isSelected = coerceBooleanProperty(value); if (isSelected !== this._selected) { this._setSelected(isSelected); this.selectionList._reportValueChange(); } }, enumerable: true, configurable: true }); MatListOption.prototype.ngOnInit = function () { var _this = this; var list = this.selectionList; if (list._value && list._value.some(function (value) { return list.compareWith(value, _this._value); })) { this._setSelected(true); } var wasSelected = this._selected; // List options that are selected at initialization can't be reported properly to the form // control. This is because it takes some time until the selection-list knows about all // available options. Also it can happen that the ControlValueAccessor has an initial value // that should be used instead. Deferring the value change report to the next tick ensures // that the form control value is not being overwritten. Promise.resolve().then(function () { if (_this._selected || wasSelected) { _this.selected = true; _this._changeDetector.markForCheck(); } }); this._inputsInitialized = true; }; MatListOption.prototype.ngAfterContentInit = function () { setLines(this._lines, this._element); }; MatListOption.prototype.ngOnDestroy = function () { var _this = this; if (this.selected) { // We have to delay this until the next tick in order // to avoid changed after checked errors. Promise.resolve().then(function () { _this.selected = false; }); } var hadFocus = this._hasFocus; var newActiveItem = this.selectionList._removeOptionFromList(this); // Only move focus if this option was focused at the time it was destroyed. if (hadFocus && newActiveItem) { newActiveItem.focus(); } }; /** Toggles the selection state of the option. */ MatListOption.prototype.toggle = function () { this.selected = !this.selected; }; /** Allows for programmatic focusing of the option. */ MatListOption.prototype.focus = function () { this._element.nativeElement.focus(); }; /** * Returns the list item's text label. Implemented as a part of the FocusKeyManager. * @docs-private */ MatListOption.prototype.getLabel = function () { return this._text ? (this._text.nativeElement.textContent || '') : ''; }; /** Whether this list item should show a ripple effect when clicked. */ MatListOption.prototype._isRippleDisabled = function () { return this.disabled || this.disableRipple || this.selectionList.disableRipple; }; MatListOption.prototype._handleClick = function () { if (!this.disabled) { this.toggle(); // Emit a change event if the selected state of the option changed through user interaction. this.selectionList._emitChangeEvent(this); } }; MatListOption.prototype._handleFocus = function () { this.selectionList._setFocusedOption(this); this._hasFocus = true; }; MatListOption.prototype._handleBlur = function () { this.selectionList._onTouched(); this._hasFocus = false; }; /** Retrieves the DOM element of the component host. */ MatListOption.prototype._getHostElement = function () { return this._element.nativeElement; }; /** Sets the selected state of the option. Returns whether the value has changed. */ MatListOption.prototype._setSelected = function (selected) { if (selected === this._selected) { return false; } this._selected = selected; if (selected) { this.selectionList.selectedOptions.select(this); } else { this.selectionList.selectedOptions.deselect(this); } this._changeDetector.markForCheck(); return true; }; /** * Notifies Angular that the option needs to be checked in the next change detection run. Mainly * used to trigger an update of the list option if the disabled state of the selection list * changed. */ MatListOption.prototype._markForCheck = function () { this._changeDetector.markForCheck(); }; MatListOption.decorators = [ { type: Component, args: [{ selector: 'mat-list-option', exportAs: 'matListOption', inputs: ['disableRipple'], host: { 'role': 'option', 'class': 'mat-list-item mat-list-option', '(focus)': '_handleFocus()', '(blur)': '_handleBlur()', '(click)': '_handleClick()', '[class.mat-list-item-disabled]': 'disabled', '[class.mat-list-item-with-avatar]': '_avatar || _icon', // Manually set the "primary" or "warn" class if the color has been explicitly // set to "primary" or "warn". The pseudo checkbox picks up these classes for // its theme. '[class.mat-primary]': 'color === "primary"', // Even though accent is the default, we need to set this class anyway, because the list might // be placed inside a parent that has one of the other colors with a higher specificity. '[class.mat-accent]': 'color !== "primary" && color !== "warn"', '[class.mat-warn]': 'color === "warn"', '[attr.aria-selected]': 'selected', '[attr.aria-disabled]': 'disabled', '[attr.tabindex]': '-1', }, template: "<div class=\"mat-list-item-content\"\n [class.mat-list-item-content-reverse]=\"checkboxPosition == 'after'\">\n\n <div mat-ripple\n class=\"mat-list-item-ripple\"\n [matRippleTrigger]=\"_getHostElement()\"\n [matRippleDisabled]=\"_isRippleDisabled()\"></div>\n\n <mat-pseudo-checkbox\n [state]=\"selected ? 'checked' : 'unchecked'\"\n [disabled]=\"disabled\"></mat-pseudo-checkbox>\n\n <div class=\"mat-list-text\" #text><ng-content></ng-content></div>\n\n <ng-content select=\"[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]\">\n </ng-content>\n\n</div>\n", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }] } ]; /** @nocollapse */ MatListOption.ctorParameters = function () { return [ { type: ElementRef }, { type: ChangeDetectorRef }, { type: MatSelectionList, decorators: [{ type: Inject, args: [forwardRef(function () { return MatSelectionList; }),] }] } ]; }; MatListOption.propDecorators = { _avatar: [{ type: ContentChild, args: [MatListAvatarCssMatStyler,] }], _icon: [{ type: ContentChild, args: [MatListIconCssMatStyler,] }], _lines: [{ type: ContentChildren, args: [MatLine, { descendants: true },] }], _text: [{ type: ViewChild, args: ['text',] }], checkboxPosition: [{ type: Input }], color: [{ type: Input }], value: [{ type: Input }], disabled: [{ type: Input }], selected: [{ type: Input }] }; return MatListOption; }(_MatListOptionMixinBase)); /** * Material Design list component where each item is a selectable option. Behaves as a listbox. */ var MatSelectionList = /** @class */ (function (_super) { __extends(MatSelectionList, _super); function MatSelectionList(_element, // @breaking-change 11.0.0 Remove `tabIndex` parameter. tabIndex, _changeDetector) { var _this = _super.call(this) || this; _this._element = _element; _this._changeDetector = _changeDetector; /** Emits a change event whenever the selected state of an option changes. */ _this.selectionChange = new EventEmitter(); /** * Tabindex of the selection list. * @breaking-change 11.0.0 Remove `tabIndex` input. */ _this.tabIndex = 0; /** Theme color of the selection list. This sets the checkbox color for all list options. */ _this.color = 'accent'; /** * Function used for comparing an option against the selected value when determining which * options should appear as selected. The first argument is the value of an options. The second * one is a value from the selected value. A boolean must be returned. */ _this.compareWith = function (a1, a2) { return a1 === a2; }; _this._disabled = false; /** The currently selected options. */ _this.selectedOptions = new SelectionModel(true); /** The tabindex of the selection list. */ _this._tabIndex = -1; /** View to model callback that should be called whenever the selected options change. */ _this._onChange = function (_) { }; /** Emits when the list has been destroyed. */ _this._destroyed = new Subject(); /** View to model callback that should be called if the list or its options lost focus. */ _this._onTouched = function () { }; return _this; } Object.defineProperty(MatSelectionList.prototype, "disabled", { /** Whether the selection list is disabled. */ get: function () { return this._disabled; }, set: function (value) { this._disabled = coerceBooleanProperty(v