list.js 73 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, Optional, ViewEncapsulation, ChangeDetectorRef, Attribute, EventEmitter, forwardRef, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
  9. import { MatLine, setLines, mixinDisableRipple, MatCommonModule, MatLineModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
  10. import { Subject } from 'rxjs';
  11. import { takeUntil } from 'rxjs/operators';
  12. import { FocusKeyManager } from '@angular/cdk/a11y';
  13. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  14. import { SelectionModel } from '@angular/cdk/collections';
  15. import { SPACE, ENTER, HOME, END, UP_ARROW, DOWN_ARROW, A, hasModifierKey } from '@angular/cdk/keycodes';
  16. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  17. import { CommonModule } from '@angular/common';
  18. import { MatDividerModule } from '@angular/material/divider';
  19. /**
  20. * @fileoverview added by tsickle
  21. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  22. */
  23. // Boilerplate for applying mixins to MatList.
  24. /**
  25. * \@docs-private
  26. */
  27. class MatListBase {
  28. }
  29. /** @type {?} */
  30. const _MatListMixinBase = mixinDisableRipple(MatListBase);
  31. // Boilerplate for applying mixins to MatListItem.
  32. /**
  33. * \@docs-private
  34. */
  35. class MatListItemBase {
  36. }
  37. /** @type {?} */
  38. const _MatListItemMixinBase = mixinDisableRipple(MatListItemBase);
  39. class MatNavList extends _MatListMixinBase {
  40. constructor() {
  41. super(...arguments);
  42. /**
  43. * Emits when the state of the list changes.
  44. */
  45. this._stateChanges = new Subject();
  46. }
  47. /**
  48. * @return {?}
  49. */
  50. ngOnChanges() {
  51. this._stateChanges.next();
  52. }
  53. /**
  54. * @return {?}
  55. */
  56. ngOnDestroy() {
  57. this._stateChanges.complete();
  58. }
  59. }
  60. MatNavList.decorators = [
  61. { type: Component, args: [{selector: 'mat-nav-list',
  62. exportAs: 'matNavList',
  63. host: {
  64. 'role': 'navigation',
  65. 'class': 'mat-nav-list mat-list-base'
  66. },
  67. template: "<ng-content></ng-content>",
  68. 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:400;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 .mat-list-text,.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-option.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{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:400;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 .mat-list-text,.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-option.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{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:0}mat-action-list button{background:0 0;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:0}@media (-ms-high-contrast:active){.mat-selection-list:focus{outline-style:dotted}.mat-list-option:focus,.mat-list-option:hover,.mat-nav-list .mat-list-item:focus,.mat-nav-list .mat-list-item:hover,mat-action-list .mat-list-item:focus,mat-action-list .mat-list-item:hover{outline:dotted 1px}}@media (hover:none){.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover{background:0 0}}"],
  69. inputs: ['disableRipple'],
  70. encapsulation: ViewEncapsulation.None,
  71. changeDetection: ChangeDetectionStrategy.OnPush,
  72. },] },
  73. ];
  74. class MatList extends _MatListMixinBase {
  75. /**
  76. * @param {?} _elementRef
  77. */
  78. constructor(_elementRef) {
  79. super();
  80. this._elementRef = _elementRef;
  81. /**
  82. * Emits when the state of the list changes.
  83. */
  84. this._stateChanges = new Subject();
  85. if (this._getListType() === 'action-list') {
  86. _elementRef.nativeElement.classList.add('mat-action-list');
  87. }
  88. }
  89. /**
  90. * @return {?}
  91. */
  92. _getListType() {
  93. /** @type {?} */
  94. const nodeName = this._elementRef.nativeElement.nodeName.toLowerCase();
  95. if (nodeName === 'mat-list') {
  96. return 'list';
  97. }
  98. if (nodeName === 'mat-action-list') {
  99. return 'action-list';
  100. }
  101. return null;
  102. }
  103. /**
  104. * @return {?}
  105. */
  106. ngOnChanges() {
  107. this._stateChanges.next();
  108. }
  109. /**
  110. * @return {?}
  111. */
  112. ngOnDestroy() {
  113. this._stateChanges.complete();
  114. }
  115. }
  116. MatList.decorators = [
  117. { type: Component, args: [{selector: 'mat-list, mat-action-list',
  118. exportAs: 'matList',
  119. template: "<ng-content></ng-content>",
  120. host: {
  121. 'class': 'mat-list mat-list-base'
  122. },
  123. 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:400;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 .mat-list-text,.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-option.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{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:400;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 .mat-list-text,.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-option.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{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:0}mat-action-list button{background:0 0;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:0}@media (-ms-high-contrast:active){.mat-selection-list:focus{outline-style:dotted}.mat-list-option:focus,.mat-list-option:hover,.mat-nav-list .mat-list-item:focus,.mat-nav-list .mat-list-item:hover,mat-action-list .mat-list-item:focus,mat-action-list .mat-list-item:hover{outline:dotted 1px}}@media (hover:none){.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover{background:0 0}}"],
  124. inputs: ['disableRipple'],
  125. encapsulation: ViewEncapsulation.None,
  126. changeDetection: ChangeDetectionStrategy.OnPush,
  127. },] },
  128. ];
  129. /** @nocollapse */
  130. MatList.ctorParameters = () => [
  131. { type: ElementRef }
  132. ];
  133. /**
  134. * Directive whose purpose is to add the mat- CSS styling to this selector.
  135. * \@docs-private
  136. */
  137. class MatListAvatarCssMatStyler {
  138. }
  139. MatListAvatarCssMatStyler.decorators = [
  140. { type: Directive, args: [{
  141. selector: '[mat-list-avatar], [matListAvatar]',
  142. host: { 'class': 'mat-list-avatar' }
  143. },] },
  144. ];
  145. /**
  146. * Directive whose purpose is to add the mat- CSS styling to this selector.
  147. * \@docs-private
  148. */
  149. class MatListIconCssMatStyler {
  150. }
  151. MatListIconCssMatStyler.decorators = [
  152. { type: Directive, args: [{
  153. selector: '[mat-list-icon], [matListIcon]',
  154. host: { 'class': 'mat-list-icon' }
  155. },] },
  156. ];
  157. /**
  158. * Directive whose purpose is to add the mat- CSS styling to this selector.
  159. * \@docs-private
  160. */
  161. class MatListSubheaderCssMatStyler {
  162. }
  163. MatListSubheaderCssMatStyler.decorators = [
  164. { type: Directive, args: [{
  165. selector: '[mat-subheader], [matSubheader]',
  166. host: { 'class': 'mat-subheader' }
  167. },] },
  168. ];
  169. /**
  170. * An item within a Material Design list.
  171. */
  172. class MatListItem extends _MatListItemMixinBase {
  173. /**
  174. * @param {?} _element
  175. * @param {?} _changeDetectorRef
  176. * @param {?=} navList
  177. * @param {?=} list
  178. */
  179. constructor(_element, _changeDetectorRef, navList, list) {
  180. super();
  181. this._element = _element;
  182. this._isInteractiveList = false;
  183. this._destroyed = new Subject();
  184. this._isInteractiveList = !!(navList || (list && list._getListType() === 'action-list'));
  185. this._list = navList || list;
  186. // If no type attributed is specified for <button>, set it to "button".
  187. // If a type attribute is already specified, do nothing.
  188. /** @type {?} */
  189. const element = this._getHostElement();
  190. if (element.nodeName.toLowerCase() === 'button' && !element.hasAttribute('type')) {
  191. element.setAttribute('type', 'button');
  192. }
  193. if (this._list) {
  194. // React to changes in the state of the parent list since
  195. // some of the item's properties depend on it (e.g. `disableRipple`).
  196. this._list._stateChanges.pipe(takeUntil(this._destroyed)).subscribe((/**
  197. * @return {?}
  198. */
  199. () => {
  200. _changeDetectorRef.markForCheck();
  201. }));
  202. }
  203. }
  204. /**
  205. * @return {?}
  206. */
  207. ngAfterContentInit() {
  208. setLines(this._lines, this._element);
  209. }
  210. /**
  211. * @return {?}
  212. */
  213. ngOnDestroy() {
  214. this._destroyed.next();
  215. this._destroyed.complete();
  216. }
  217. /**
  218. * Whether this list item should show a ripple effect when clicked.
  219. * @return {?}
  220. */
  221. _isRippleDisabled() {
  222. return !this._isInteractiveList || this.disableRipple ||
  223. !!(this._list && this._list.disableRipple);
  224. }
  225. /**
  226. * Retrieves the DOM element of the component host.
  227. * @return {?}
  228. */
  229. _getHostElement() {
  230. return this._element.nativeElement;
  231. }
  232. }
  233. MatListItem.decorators = [
  234. { type: Component, args: [{selector: 'mat-list-item, a[mat-list-item], button[mat-list-item]',
  235. exportAs: 'matListItem',
  236. host: {
  237. 'class': 'mat-list-item',
  238. // @breaking-change 8.0.0 Remove `mat-list-item-avatar` in favor of `mat-list-item-with-avatar`.
  239. '[class.mat-list-item-avatar]': '_avatar || _icon',
  240. '[class.mat-list-item-with-avatar]': '_avatar || _icon',
  241. },
  242. inputs: ['disableRipple'],
  243. template: "<div class=\"mat-list-item-content\"><div class=\"mat-list-item-ripple\" mat-ripple [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"_isRippleDisabled()\"></div><ng-content select=\"[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]\"></ng-content><div class=\"mat-list-text\"><ng-content select=\"[mat-line], [matLine]\"></ng-content></div><ng-content></ng-content></div>",
  244. encapsulation: ViewEncapsulation.None,
  245. changeDetection: ChangeDetectionStrategy.OnPush,
  246. },] },
  247. ];
  248. /** @nocollapse */
  249. MatListItem.ctorParameters = () => [
  250. { type: ElementRef },
  251. { type: ChangeDetectorRef },
  252. { type: MatNavList, decorators: [{ type: Optional }] },
  253. { type: MatList, decorators: [{ type: Optional }] }
  254. ];
  255. MatListItem.propDecorators = {
  256. _lines: [{ type: ContentChildren, args: [MatLine, { descendants: true },] }],
  257. _avatar: [{ type: ContentChild, args: [MatListAvatarCssMatStyler, { static: false },] }],
  258. _icon: [{ type: ContentChild, args: [MatListIconCssMatStyler, { static: false },] }]
  259. };
  260. /**
  261. * @fileoverview added by tsickle
  262. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  263. */
  264. /**
  265. * \@docs-private
  266. */
  267. class MatSelectionListBase {
  268. }
  269. /** @type {?} */
  270. const _MatSelectionListMixinBase = mixinDisableRipple(MatSelectionListBase);
  271. /**
  272. * \@docs-private
  273. */
  274. class MatListOptionBase {
  275. }
  276. /** @type {?} */
  277. const _MatListOptionMixinBase = mixinDisableRipple(MatListOptionBase);
  278. /**
  279. * \@docs-private
  280. * @type {?}
  281. */
  282. const MAT_SELECTION_LIST_VALUE_ACCESSOR = {
  283. provide: NG_VALUE_ACCESSOR,
  284. useExisting: forwardRef((/**
  285. * @return {?}
  286. */
  287. () => MatSelectionList)),
  288. multi: true
  289. };
  290. /**
  291. * Change event that is being fired whenever the selected state of an option changes.
  292. */
  293. class MatSelectionListChange {
  294. /**
  295. * @param {?} source
  296. * @param {?} option
  297. */
  298. constructor(source, option) {
  299. this.source = source;
  300. this.option = option;
  301. }
  302. }
  303. /**
  304. * Component for list-options of selection-list. Each list-option can automatically
  305. * generate a checkbox and can put current item into the selectionModel of selection-list
  306. * if the current item is selected.
  307. */
  308. class MatListOption extends _MatListOptionMixinBase {
  309. /**
  310. * @param {?} _element
  311. * @param {?} _changeDetector
  312. * @param {?} selectionList
  313. */
  314. constructor(_element, _changeDetector, selectionList) {
  315. super();
  316. this._element = _element;
  317. this._changeDetector = _changeDetector;
  318. this.selectionList = selectionList;
  319. this._selected = false;
  320. this._disabled = false;
  321. this._hasFocus = false;
  322. /**
  323. * Whether the label should appear before or after the checkbox. Defaults to 'after'
  324. */
  325. this.checkboxPosition = 'after';
  326. }
  327. /**
  328. * Theme color of the list option. This sets the color of the checkbox.
  329. * @return {?}
  330. */
  331. get color() { return this._color || this.selectionList.color; }
  332. /**
  333. * @param {?} newValue
  334. * @return {?}
  335. */
  336. set color(newValue) { this._color = newValue; }
  337. /**
  338. * Value of the option
  339. * @return {?}
  340. */
  341. get value() { return this._value; }
  342. /**
  343. * @param {?} newValue
  344. * @return {?}
  345. */
  346. set value(newValue) {
  347. if (this.selected && newValue !== this.value) {
  348. this.selected = false;
  349. }
  350. this._value = newValue;
  351. }
  352. /**
  353. * Whether the option is disabled.
  354. * @return {?}
  355. */
  356. get disabled() { return this._disabled || (this.selectionList && this.selectionList.disabled); }
  357. /**
  358. * @param {?} value
  359. * @return {?}
  360. */
  361. set disabled(value) {
  362. /** @type {?} */
  363. const newValue = coerceBooleanProperty(value);
  364. if (newValue !== this._disabled) {
  365. this._disabled = newValue;
  366. this._changeDetector.markForCheck();
  367. }
  368. }
  369. /**
  370. * Whether the option is selected.
  371. * @return {?}
  372. */
  373. get selected() { return this.selectionList.selectedOptions.isSelected(this); }
  374. /**
  375. * @param {?} value
  376. * @return {?}
  377. */
  378. set selected(value) {
  379. /** @type {?} */
  380. const isSelected = coerceBooleanProperty(value);
  381. if (isSelected !== this._selected) {
  382. this._setSelected(isSelected);
  383. this.selectionList._reportValueChange();
  384. }
  385. }
  386. /**
  387. * @return {?}
  388. */
  389. ngOnInit() {
  390. /** @type {?} */
  391. const list = this.selectionList;
  392. if (list._value && list._value.some((/**
  393. * @param {?} value
  394. * @return {?}
  395. */
  396. value => list.compareWith(value, this._value)))) {
  397. this._setSelected(true);
  398. }
  399. /** @type {?} */
  400. const wasSelected = this._selected;
  401. // List options that are selected at initialization can't be reported properly to the form
  402. // control. This is because it takes some time until the selection-list knows about all
  403. // available options. Also it can happen that the ControlValueAccessor has an initial value
  404. // that should be used instead. Deferring the value change report to the next tick ensures
  405. // that the form control value is not being overwritten.
  406. Promise.resolve().then((/**
  407. * @return {?}
  408. */
  409. () => {
  410. if (this._selected || wasSelected) {
  411. this.selected = true;
  412. this._changeDetector.markForCheck();
  413. }
  414. }));
  415. }
  416. /**
  417. * @return {?}
  418. */
  419. ngAfterContentInit() {
  420. setLines(this._lines, this._element);
  421. }
  422. /**
  423. * @return {?}
  424. */
  425. ngOnDestroy() {
  426. if (this.selected) {
  427. // We have to delay this until the next tick in order
  428. // to avoid changed after checked errors.
  429. Promise.resolve().then((/**
  430. * @return {?}
  431. */
  432. () => {
  433. this.selected = false;
  434. }));
  435. }
  436. /** @type {?} */
  437. const hadFocus = this._hasFocus;
  438. /** @type {?} */
  439. const newActiveItem = this.selectionList._removeOptionFromList(this);
  440. // Only move focus if this option was focused at the time it was destroyed.
  441. if (hadFocus && newActiveItem) {
  442. newActiveItem.focus();
  443. }
  444. }
  445. /**
  446. * Toggles the selection state of the option.
  447. * @return {?}
  448. */
  449. toggle() {
  450. this.selected = !this.selected;
  451. }
  452. /**
  453. * Allows for programmatic focusing of the option.
  454. * @return {?}
  455. */
  456. focus() {
  457. this._element.nativeElement.focus();
  458. }
  459. /**
  460. * Returns the list item's text label. Implemented as a part of the FocusKeyManager.
  461. * \@docs-private
  462. * @return {?}
  463. */
  464. getLabel() {
  465. return this._text ? (this._text.nativeElement.textContent || '') : '';
  466. }
  467. /**
  468. * Whether this list item should show a ripple effect when clicked.
  469. * @return {?}
  470. */
  471. _isRippleDisabled() {
  472. return this.disabled || this.disableRipple || this.selectionList.disableRipple;
  473. }
  474. /**
  475. * @return {?}
  476. */
  477. _handleClick() {
  478. if (!this.disabled) {
  479. this.toggle();
  480. // Emit a change event if the selected state of the option changed through user interaction.
  481. this.selectionList._emitChangeEvent(this);
  482. }
  483. }
  484. /**
  485. * @return {?}
  486. */
  487. _handleFocus() {
  488. this.selectionList._setFocusedOption(this);
  489. this._hasFocus = true;
  490. }
  491. /**
  492. * @return {?}
  493. */
  494. _handleBlur() {
  495. this.selectionList._onTouched();
  496. this._hasFocus = false;
  497. }
  498. /**
  499. * Retrieves the DOM element of the component host.
  500. * @return {?}
  501. */
  502. _getHostElement() {
  503. return this._element.nativeElement;
  504. }
  505. /**
  506. * Sets the selected state of the option. Returns whether the value has changed.
  507. * @param {?} selected
  508. * @return {?}
  509. */
  510. _setSelected(selected) {
  511. if (selected === this._selected) {
  512. return false;
  513. }
  514. this._selected = selected;
  515. if (selected) {
  516. this.selectionList.selectedOptions.select(this);
  517. }
  518. else {
  519. this.selectionList.selectedOptions.deselect(this);
  520. }
  521. this._changeDetector.markForCheck();
  522. return true;
  523. }
  524. /**
  525. * Notifies Angular that the option needs to be checked in the next change detection run. Mainly
  526. * used to trigger an update of the list option if the disabled state of the selection list
  527. * changed.
  528. * @return {?}
  529. */
  530. _markForCheck() {
  531. this._changeDetector.markForCheck();
  532. }
  533. }
  534. MatListOption.decorators = [
  535. { type: Component, args: [{selector: 'mat-list-option',
  536. exportAs: 'matListOption',
  537. inputs: ['disableRipple'],
  538. host: {
  539. 'role': 'option',
  540. 'class': 'mat-list-item mat-list-option',
  541. '(focus)': '_handleFocus()',
  542. '(blur)': '_handleBlur()',
  543. '(click)': '_handleClick()',
  544. 'tabindex': '-1',
  545. '[class.mat-list-item-disabled]': 'disabled',
  546. '[class.mat-list-item-with-avatar]': '_avatar || _icon',
  547. // Manually set the "primary" or "warn" class if the color has been explicitly
  548. // set to "primary" or "warn". The pseudo checkbox picks up these classes for
  549. // its theme. The accent theme palette is the default and doesn't need to be set.
  550. '[class.mat-primary]': 'color === "primary"',
  551. '[class.mat-warn]': 'color === "warn"',
  552. '[attr.aria-selected]': 'selected',
  553. '[attr.aria-disabled]': 'disabled',
  554. },
  555. template: "<div class=\"mat-list-item-content\" [class.mat-list-item-content-reverse]=\"checkboxPosition == 'after'\"><div mat-ripple class=\"mat-list-item-ripple\" [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"_isRippleDisabled()\"></div><mat-pseudo-checkbox [state]=\"selected ? 'checked' : 'unchecked'\" [disabled]=\"disabled\"></mat-pseudo-checkbox><div class=\"mat-list-text\" #text><ng-content></ng-content></div><ng-content select=\"[mat-list-avatar], [mat-list-icon], [matListAvatar], [matListIcon]\"></ng-content></div>",
  556. encapsulation: ViewEncapsulation.None,
  557. changeDetection: ChangeDetectionStrategy.OnPush,
  558. },] },
  559. ];
  560. /** @nocollapse */
  561. MatListOption.ctorParameters = () => [
  562. { type: ElementRef },
  563. { type: ChangeDetectorRef },
  564. { type: MatSelectionList, decorators: [{ type: Inject, args: [forwardRef((/**
  565. * @return {?}
  566. */
  567. () => MatSelectionList)),] }] }
  568. ];
  569. MatListOption.propDecorators = {
  570. _avatar: [{ type: ContentChild, args: [MatListAvatarCssMatStyler, { static: false },] }],
  571. _icon: [{ type: ContentChild, args: [MatListIconCssMatStyler, { static: false },] }],
  572. _lines: [{ type: ContentChildren, args: [MatLine,] }],
  573. _text: [{ type: ViewChild, args: ['text', { static: false },] }],
  574. checkboxPosition: [{ type: Input }],
  575. color: [{ type: Input }],
  576. value: [{ type: Input }],
  577. disabled: [{ type: Input }],
  578. selected: [{ type: Input }]
  579. };
  580. /**
  581. * Material Design list component where each item is a selectable option. Behaves as a listbox.
  582. */
  583. class MatSelectionList extends _MatSelectionListMixinBase {
  584. /**
  585. * @param {?} _element
  586. * @param {?} tabIndex
  587. */
  588. constructor(_element, tabIndex) {
  589. super();
  590. this._element = _element;
  591. /**
  592. * Emits a change event whenever the selected state of an option changes.
  593. */
  594. this.selectionChange = new EventEmitter();
  595. /**
  596. * Tabindex of the selection list.
  597. */
  598. this.tabIndex = 0;
  599. /**
  600. * Theme color of the selection list. This sets the checkbox color for all list options.
  601. */
  602. this.color = 'accent';
  603. /**
  604. * Function used for comparing an option against the selected value when determining which
  605. * options should appear as selected. The first argument is the value of an options. The second
  606. * one is a value from the selected value. A boolean must be returned.
  607. */
  608. this.compareWith = (/**
  609. * @param {?} a1
  610. * @param {?} a2
  611. * @return {?}
  612. */
  613. (a1, a2) => a1 === a2);
  614. this._disabled = false;
  615. /**
  616. * The currently selected options.
  617. */
  618. this.selectedOptions = new SelectionModel(true);
  619. /**
  620. * View to model callback that should be called whenever the selected options change.
  621. */
  622. this._onChange = (/**
  623. * @param {?} _
  624. * @return {?}
  625. */
  626. (_) => { });
  627. /**
  628. * Emits when the list has been destroyed.
  629. */
  630. this._destroyed = new Subject();
  631. /**
  632. * View to model callback that should be called if the list or its options lost focus.
  633. */
  634. this._onTouched = (/**
  635. * @return {?}
  636. */
  637. () => { });
  638. this.tabIndex = parseInt(tabIndex) || 0;
  639. }
  640. /**
  641. * Whether the selection list is disabled.
  642. * @return {?}
  643. */
  644. get disabled() { return this._disabled; }
  645. /**
  646. * @param {?} value
  647. * @return {?}
  648. */
  649. set disabled(value) {
  650. this._disabled = coerceBooleanProperty(value);
  651. // The `MatSelectionList` and `MatListOption` are using the `OnPush` change detection
  652. // strategy. Therefore the options will not check for any changes if the `MatSelectionList`
  653. // changed its state. Since we know that a change to `disabled` property of the list affects
  654. // the state of the options, we manually mark each option for check.
  655. this._markOptionsForCheck();
  656. }
  657. /**
  658. * @return {?}
  659. */
  660. ngAfterContentInit() {
  661. this._keyManager = new FocusKeyManager(this.options)
  662. .withWrap()
  663. .withTypeAhead()
  664. // Allow disabled items to be focusable. For accessibility reasons, there must be a way for
  665. // screenreader users, that allows reading the different options of the list.
  666. .skipPredicate((/**
  667. * @return {?}
  668. */
  669. () => false))
  670. .withAllowedModifierKeys(['shiftKey']);
  671. if (this._value) {
  672. this._setOptionsFromValues(this._value);
  673. }
  674. // Sync external changes to the model back to the options.
  675. this.selectedOptions.onChange.pipe(takeUntil(this._destroyed)).subscribe((/**
  676. * @param {?} event
  677. * @return {?}
  678. */
  679. event => {
  680. if (event.added) {
  681. for (let item of event.added) {
  682. item.selected = true;
  683. }
  684. }
  685. if (event.removed) {
  686. for (let item of event.removed) {
  687. item.selected = false;
  688. }
  689. }
  690. }));
  691. }
  692. /**
  693. * @param {?} changes
  694. * @return {?}
  695. */
  696. ngOnChanges(changes) {
  697. /** @type {?} */
  698. const disableRippleChanges = changes['disableRipple'];
  699. /** @type {?} */
  700. const colorChanges = changes['color'];
  701. if ((disableRippleChanges && !disableRippleChanges.firstChange) ||
  702. (colorChanges && !colorChanges.firstChange)) {
  703. this._markOptionsForCheck();
  704. }
  705. }
  706. /**
  707. * @return {?}
  708. */
  709. ngOnDestroy() {
  710. this._destroyed.next();
  711. this._destroyed.complete();
  712. this._isDestroyed = true;
  713. }
  714. /**
  715. * Focuses the selection list.
  716. * @param {?=} options
  717. * @return {?}
  718. */
  719. focus(options) {
  720. this._element.nativeElement.focus(options);
  721. }
  722. /**
  723. * Selects all of the options.
  724. * @return {?}
  725. */
  726. selectAll() {
  727. this._setAllOptionsSelected(true);
  728. }
  729. /**
  730. * Deselects all of the options.
  731. * @return {?}
  732. */
  733. deselectAll() {
  734. this._setAllOptionsSelected(false);
  735. }
  736. /**
  737. * Sets the focused option of the selection-list.
  738. * @param {?} option
  739. * @return {?}
  740. */
  741. _setFocusedOption(option) {
  742. this._keyManager.updateActiveItem(option);
  743. }
  744. /**
  745. * Removes an option from the selection list and updates the active item.
  746. * @param {?} option
  747. * @return {?} Currently-active item.
  748. */
  749. _removeOptionFromList(option) {
  750. /** @type {?} */
  751. const optionIndex = this._getOptionIndex(option);
  752. if (optionIndex > -1 && this._keyManager.activeItemIndex === optionIndex) {
  753. // Check whether the option is the last item
  754. if (optionIndex > 0) {
  755. this._keyManager.updateActiveItem(optionIndex - 1);
  756. }
  757. else if (optionIndex === 0 && this.options.length > 1) {
  758. this._keyManager.updateActiveItem(Math.min(optionIndex + 1, this.options.length - 1));
  759. }
  760. }
  761. return this._keyManager.activeItem;
  762. }
  763. /**
  764. * Passes relevant key presses to our key manager.
  765. * @param {?} event
  766. * @return {?}
  767. */
  768. _keydown(event) {
  769. /** @type {?} */
  770. const keyCode = event.keyCode;
  771. /** @type {?} */
  772. const manager = this._keyManager;
  773. /** @type {?} */
  774. const previousFocusIndex = manager.activeItemIndex;
  775. /** @type {?} */
  776. const hasModifier = hasModifierKey(event);
  777. switch (keyCode) {
  778. case SPACE:
  779. case ENTER:
  780. if (!hasModifier) {
  781. this._toggleFocusedOption();
  782. // Always prevent space from scrolling the page since the list has focus
  783. event.preventDefault();
  784. }
  785. break;
  786. case HOME:
  787. case END:
  788. if (!hasModifier) {
  789. keyCode === HOME ? manager.setFirstItemActive() : manager.setLastItemActive();
  790. event.preventDefault();
  791. }
  792. break;
  793. case A:
  794. if (hasModifierKey(event, 'ctrlKey')) {
  795. this.options.find((/**
  796. * @param {?} option
  797. * @return {?}
  798. */
  799. option => !option.selected)) ? this.selectAll() : this.deselectAll();
  800. event.preventDefault();
  801. }
  802. break;
  803. default:
  804. manager.onKeydown(event);
  805. }
  806. if ((keyCode === UP_ARROW || keyCode === DOWN_ARROW) && event.shiftKey &&
  807. manager.activeItemIndex !== previousFocusIndex) {
  808. this._toggleFocusedOption();
  809. }
  810. }
  811. /**
  812. * Reports a value change to the ControlValueAccessor
  813. * @return {?}
  814. */
  815. _reportValueChange() {
  816. // Stop reporting value changes after the list has been destroyed. This avoids
  817. // cases where the list might wrongly reset its value once it is removed, but
  818. // the form control is still live.
  819. if (this.options && !this._isDestroyed) {
  820. /** @type {?} */
  821. const value = this._getSelectedOptionValues();
  822. this._onChange(value);
  823. this._value = value;
  824. }
  825. }
  826. /**
  827. * Emits a change event if the selected state of an option changed.
  828. * @param {?} option
  829. * @return {?}
  830. */
  831. _emitChangeEvent(option) {
  832. this.selectionChange.emit(new MatSelectionListChange(this, option));
  833. }
  834. /**
  835. * Implemented as part of ControlValueAccessor.
  836. * @param {?} values
  837. * @return {?}
  838. */
  839. writeValue(values) {
  840. this._value = values;
  841. if (this.options) {
  842. this._setOptionsFromValues(values || []);
  843. }
  844. }
  845. /**
  846. * Implemented as a part of ControlValueAccessor.
  847. * @param {?} isDisabled
  848. * @return {?}
  849. */
  850. setDisabledState(isDisabled) {
  851. this.disabled = isDisabled;
  852. }
  853. /**
  854. * Implemented as part of ControlValueAccessor.
  855. * @param {?} fn
  856. * @return {?}
  857. */
  858. registerOnChange(fn) {
  859. this._onChange = fn;
  860. }
  861. /**
  862. * Implemented as part of ControlValueAccessor.
  863. * @param {?} fn
  864. * @return {?}
  865. */
  866. registerOnTouched(fn) {
  867. this._onTouched = fn;
  868. }
  869. /**
  870. * Sets the selected options based on the specified values.
  871. * @private
  872. * @param {?} values
  873. * @return {?}
  874. */
  875. _setOptionsFromValues(values) {
  876. this.options.forEach((/**
  877. * @param {?} option
  878. * @return {?}
  879. */
  880. option => option._setSelected(false)));
  881. values.forEach((/**
  882. * @param {?} value
  883. * @return {?}
  884. */
  885. value => {
  886. /** @type {?} */
  887. const correspondingOption = this.options.find((/**
  888. * @param {?} option
  889. * @return {?}
  890. */
  891. option => {
  892. // Skip options that are already in the model. This allows us to handle cases
  893. // where the same primitive value is selected multiple times.
  894. return option.selected ? false : this.compareWith(option.value, value);
  895. }));
  896. if (correspondingOption) {
  897. correspondingOption._setSelected(true);
  898. }
  899. }));
  900. }
  901. /**
  902. * Returns the values of the selected options.
  903. * @private
  904. * @return {?}
  905. */
  906. _getSelectedOptionValues() {
  907. return this.options.filter((/**
  908. * @param {?} option
  909. * @return {?}
  910. */
  911. option => option.selected)).map((/**
  912. * @param {?} option
  913. * @return {?}
  914. */
  915. option => option.value));
  916. }
  917. /**
  918. * Toggles the state of the currently focused option if enabled.
  919. * @private
  920. * @return {?}
  921. */
  922. _toggleFocusedOption() {
  923. /** @type {?} */
  924. let focusedIndex = this._keyManager.activeItemIndex;
  925. if (focusedIndex != null && this._isValidIndex(focusedIndex)) {
  926. /** @type {?} */
  927. let focusedOption = this.options.toArray()[focusedIndex];
  928. if (focusedOption && !focusedOption.disabled) {
  929. focusedOption.toggle();
  930. // Emit a change event because the focused option changed its state through user
  931. // interaction.
  932. this._emitChangeEvent(focusedOption);
  933. }
  934. }
  935. }
  936. /**
  937. * Sets the selected state on all of the options
  938. * and emits an event if anything changed.
  939. * @private
  940. * @param {?} isSelected
  941. * @return {?}
  942. */
  943. _setAllOptionsSelected(isSelected) {
  944. // Keep track of whether anything changed, because we only want to
  945. // emit the changed event when something actually changed.
  946. /** @type {?} */
  947. let hasChanged = false;
  948. this.options.forEach((/**
  949. * @param {?} option
  950. * @return {?}
  951. */
  952. option => {
  953. if (option._setSelected(isSelected)) {
  954. hasChanged = true;
  955. }
  956. }));
  957. if (hasChanged) {
  958. this._reportValueChange();
  959. }
  960. }
  961. /**
  962. * Utility to ensure all indexes are valid.
  963. * @private
  964. * @param {?} index The index to be checked.
  965. * @return {?} True if the index is valid for our list of options.
  966. */
  967. _isValidIndex(index) {
  968. return index >= 0 && index < this.options.length;
  969. }
  970. /**
  971. * Returns the index of the specified list option.
  972. * @private
  973. * @param {?} option
  974. * @return {?}
  975. */
  976. _getOptionIndex(option) {
  977. return this.options.toArray().indexOf(option);
  978. }
  979. /**
  980. * Marks all the options to be checked in the next change detection run.
  981. * @private
  982. * @return {?}
  983. */
  984. _markOptionsForCheck() {
  985. if (this.options) {
  986. this.options.forEach((/**
  987. * @param {?} option
  988. * @return {?}
  989. */
  990. option => option._markForCheck()));
  991. }
  992. }
  993. }
  994. MatSelectionList.decorators = [
  995. { type: Component, args: [{selector: 'mat-selection-list',
  996. exportAs: 'matSelectionList',
  997. inputs: ['disableRipple'],
  998. host: {
  999. 'role': 'listbox',
  1000. '[tabIndex]': 'tabIndex',
  1001. 'class': 'mat-selection-list mat-list-base',
  1002. '(blur)': '_onTouched()',
  1003. '(keydown)': '_keydown($event)',
  1004. 'aria-multiselectable': 'true',
  1005. '[attr.aria-disabled]': 'disabled.toString()',
  1006. },
  1007. template: '<ng-content></ng-content>',
  1008. 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:400;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 .mat-list-text,.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-option.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{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:400;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 .mat-list-text,.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-option.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{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:0}mat-action-list button{background:0 0;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:0}@media (-ms-high-contrast:active){.mat-selection-list:focus{outline-style:dotted}.mat-list-option:focus,.mat-list-option:hover,.mat-nav-list .mat-list-item:focus,.mat-nav-list .mat-list-item:hover,mat-action-list .mat-list-item:focus,mat-action-list .mat-list-item:hover{outline:dotted 1px}}@media (hover:none){.mat-action-list .mat-list-item:not(.mat-list-item-disabled):hover,.mat-list-option:not(.mat-list-item-disabled):hover,.mat-nav-list .mat-list-item:not(.mat-list-item-disabled):hover{background:0 0}}"],
  1009. encapsulation: ViewEncapsulation.None,
  1010. providers: [MAT_SELECTION_LIST_VALUE_ACCESSOR],
  1011. changeDetection: ChangeDetectionStrategy.OnPush
  1012. },] },
  1013. ];
  1014. /** @nocollapse */
  1015. MatSelectionList.ctorParameters = () => [
  1016. { type: ElementRef },
  1017. { type: String, decorators: [{ type: Attribute, args: ['tabindex',] }] }
  1018. ];
  1019. MatSelectionList.propDecorators = {
  1020. options: [{ type: ContentChildren, args: [MatListOption, { descendants: true },] }],
  1021. selectionChange: [{ type: Output }],
  1022. tabIndex: [{ type: Input }],
  1023. color: [{ type: Input }],
  1024. compareWith: [{ type: Input }],
  1025. disabled: [{ type: Input }]
  1026. };
  1027. /**
  1028. * @fileoverview added by tsickle
  1029. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1030. */
  1031. class MatListModule {
  1032. }
  1033. MatListModule.decorators = [
  1034. { type: NgModule, args: [{
  1035. imports: [MatLineModule, MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, CommonModule],
  1036. exports: [
  1037. MatList,
  1038. MatNavList,
  1039. MatListItem,
  1040. MatListAvatarCssMatStyler,
  1041. MatLineModule,
  1042. MatCommonModule,
  1043. MatListIconCssMatStyler,
  1044. MatListSubheaderCssMatStyler,
  1045. MatPseudoCheckboxModule,
  1046. MatSelectionList,
  1047. MatListOption,
  1048. MatDividerModule
  1049. ],
  1050. declarations: [
  1051. MatList,
  1052. MatNavList,
  1053. MatListItem,
  1054. MatListAvatarCssMatStyler,
  1055. MatListIconCssMatStyler,
  1056. MatListSubheaderCssMatStyler,
  1057. MatSelectionList,
  1058. MatListOption
  1059. ],
  1060. },] },
  1061. ];
  1062. /**
  1063. * @fileoverview added by tsickle
  1064. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1065. */
  1066. /**
  1067. * @fileoverview added by tsickle
  1068. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1069. */
  1070. export { MatListModule, MatNavList, MatList, MatListAvatarCssMatStyler, MatListIconCssMatStyler, MatListSubheaderCssMatStyler, MatListItem, MAT_SELECTION_LIST_VALUE_ACCESSOR, MatSelectionListChange, MatListOption, MatSelectionList };
  1071. //# sourceMappingURL=list.js.map