list.es5.js 85 KB

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