@angular/material/fesm2020/list.mjs.map

Angular Material

{"version":3,"file":"list.mjs","sources":["../../../../../../src/material/list/list-option-types.ts","../../../../../../src/material/list/list-item-sections.ts","../../../../../../src/material/list/list-base.ts","../../../../../../src/material/list/action-list.ts","../../../../../../src/material/list/list.ts","../../../../../../src/material/list/list-item.html","../../../../../../src/material/list/list-option.ts","../../../../../../src/material/list/list-option.html","../../../../../../src/material/list/subheader.ts","../../../../../../src/material/list/nav-list.ts","../../../../../../src/material/list/selection-list.ts","../../../../../../src/material/list/list-module.ts","../../../../../../src/material/list/public-api.ts","../../../../../../src/material/list/index.ts","../../../../../../src/material/list/list_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {InjectionToken} from '@angular/core';\n\n/**\n * Type describing possible positions of a checkbox in a list option\n * with respect to the list item's text.\n */\nexport type MatListOptionCheckboxPosition = 'before' | 'after';\n\n/**\n * Interface describing a list option. This is used to avoid circular\n * dependencies between the list-option and the styler directives.\n * @docs-private\n */\nexport interface ListOption {\n  _getCheckboxPosition(): MatListOptionCheckboxPosition;\n}\n\n/**\n * Injection token that can be used to reference instances of an `ListOption`. It serves\n * as alternative token to an actual implementation which could result in undesired\n * retention of the class or circular references breaking runtime execution.\n * @docs-private\n */\nexport const LIST_OPTION = new InjectionToken<ListOption>('ListOption');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef, Inject, Optional} from '@angular/core';\nimport {LIST_OPTION, ListOption} from './list-option-types';\n\n/**\n * Directive capturing the title of a list item. A list item usually consists of a\n * title and optional secondary or tertiary lines.\n *\n * Text content for the title never wraps. There can only be a single title per list item.\n */\n@Directive({\n  selector: '[matListItemTitle]',\n  host: {'class': 'mat-mdc-list-item-title mdc-list-item__primary-text'},\n})\nexport class MatListItemTitle {\n  constructor(public _elementRef: ElementRef<HTMLElement>) {}\n}\n\n/**\n * Directive capturing a line in a list item. A list item usually consists of a\n * title and optional secondary or tertiary lines.\n *\n * Text content inside a line never wraps. There can be at maximum two lines per list item.\n */\n@Directive({\n  selector: '[matListItemLine]',\n  host: {'class': 'mat-mdc-list-item-line mdc-list-item__secondary-text'},\n})\nexport class MatListItemLine {\n  constructor(public _elementRef: ElementRef<HTMLElement>) {}\n}\n\n/**\n * Directive matching an optional meta section for list items.\n *\n * List items can reserve space at the end of an item to display a control,\n * button or additional text content.\n */\n@Directive({\n  selector: '[matListItemMeta]',\n  host: {'class': 'mat-mdc-list-item-meta mdc-list-item__end'},\n})\nexport class MatListItemMeta {}\n\n/**\n * @docs-private\n *\n * MDC uses the very intuitively named classes `.mdc-list-item__start` and `.mat-list-item__end`\n * to position content such as icons or checkboxes that comes either before or after the text\n * content respectively. This directive detects the placement of the checkbox and applies the\n * correct MDC class to position the icon/avatar on the opposite side.\n */\n@Directive({\n  host: {\n    // MDC uses intuitively named classes `.mdc-list-item__start` and `.mat-list-item__end`\n    // to position content such as icons or checkboxes that comes either before or after the text\n    // content respectively. This directive detects the placement of the checkbox and applies the\n    // correct MDC class to position the icon/avatar on the opposite side.\n    '[class.mdc-list-item__start]': '_isAlignedAtStart()',\n    '[class.mdc-list-item__end]': '!_isAlignedAtStart()',\n  },\n})\nexport class _MatListItemGraphicBase {\n  constructor(@Optional() @Inject(LIST_OPTION) public _listOption: ListOption) {}\n\n  _isAlignedAtStart() {\n    // By default, in all list items the graphic is aligned at start. In list options,\n    // the graphic is only aligned at start if the checkbox is at the end.\n    return !this._listOption || this._listOption?._getCheckboxPosition() === 'after';\n  }\n}\n\n/**\n * Directive matching an optional avatar within a list item.\n *\n * List items can reserve space at the beginning of an item to display an avatar.\n */\n@Directive({\n  selector: '[matListItemAvatar]',\n  host: {'class': 'mat-mdc-list-item-avatar'},\n})\nexport class MatListItemAvatar extends _MatListItemGraphicBase {}\n\n/**\n * Directive matching an optional icon within a list item.\n *\n * List items can reserve space at the beginning of an item to display an icon.\n */\n@Directive({\n  selector: '[matListItemIcon]',\n  host: {'class': 'mat-mdc-list-item-icon'},\n})\nexport class MatListItemIcon extends _MatListItemGraphicBase {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {BooleanInput, coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';\nimport {Platform} from '@angular/cdk/platform';\nimport {\n  AfterViewInit,\n  ContentChildren,\n  Directive,\n  ElementRef,\n  Inject,\n  Input,\n  NgZone,\n  OnDestroy,\n  Optional,\n  QueryList,\n} from '@angular/core';\nimport {\n  MAT_RIPPLE_GLOBAL_OPTIONS,\n  RippleConfig,\n  RippleGlobalOptions,\n  RippleRenderer,\n  RippleTarget,\n} from '@angular/material/core';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\nimport {Subscription, merge} from 'rxjs';\nimport {\n  MatListItemLine,\n  MatListItemTitle,\n  MatListItemIcon,\n  MatListItemAvatar,\n} from './list-item-sections';\n\n@Directive({\n  host: {\n    '[class.mat-mdc-list-non-interactive]': '_isNonInteractive',\n    '[attr.aria-disabled]': 'disabled',\n  },\n})\n/** @docs-private */\nexport abstract class MatListBase {\n  _isNonInteractive: boolean = true;\n\n  /** Whether ripples for all list items is disabled. */\n  @Input()\n  get disableRipple(): boolean {\n    return this._disableRipple;\n  }\n  set disableRipple(value: BooleanInput) {\n    this._disableRipple = coerceBooleanProperty(value);\n  }\n  private _disableRipple: boolean = false;\n\n  /**\n   * Whether the entire list is disabled. When disabled, the list itself and each of its list items\n   * are disabled.\n   */\n  @Input()\n  get disabled(): boolean {\n    return this._disabled;\n  }\n  set disabled(value: BooleanInput) {\n    this._disabled = coerceBooleanProperty(value);\n  }\n  private _disabled = false;\n}\n\n@Directive({\n  host: {\n    '[class.mdc-list-item--disabled]': 'disabled',\n    '[attr.aria-disabled]': 'disabled',\n  },\n})\n/** @docs-private */\nexport abstract class MatListItemBase implements AfterViewInit, OnDestroy, RippleTarget {\n  /** Query list matching list-item line elements. */\n  abstract _lines: QueryList<MatListItemLine> | undefined;\n\n  /** Query list matching list-item title elements. */\n  abstract _titles: QueryList<MatListItemTitle> | undefined;\n\n  /**\n   * Element reference to the unscoped content in a list item.\n   *\n   * Unscoped content is user-projected text content in a list item that is\n   * not part of an explicit line or title.\n   */\n  abstract _unscopedContent: ElementRef<HTMLSpanElement> | undefined;\n\n  /** Host element for the list item. */\n  _hostElement: HTMLElement;\n\n  /** Whether animations are disabled. */\n  _noopAnimations: boolean;\n\n  @ContentChildren(MatListItemAvatar, {descendants: false}) _avatars: QueryList<never>;\n  @ContentChildren(MatListItemIcon, {descendants: false}) _icons: QueryList<never>;\n\n  /**\n   * The number of lines this list item should reserve space for. If not specified,\n   * lines are inferred based on the projected content.\n   *\n   * Explicitly specifying the number of lines is useful if you want to acquire additional\n   * space and enable the wrapping of text. The unscoped text content of a list item will\n   * always be able to take up the remaining space of the item, unless it represents the title.\n   *\n   * A maximum of three lines is supported as per the Material Design specification.\n   */\n  @Input()\n  set lines(lines: number | string | null) {\n    this._explicitLines = coerceNumberProperty(lines, null);\n    this._updateItemLines(false);\n  }\n  _explicitLines: number | null = null;\n\n  @Input()\n  get disableRipple(): boolean {\n    return (\n      this.disabled || this._disableRipple || this._listBase.disableRipple || this._noopAnimations\n    );\n  }\n  set disableRipple(value: boolean) {\n    this._disableRipple = coerceBooleanProperty(value);\n  }\n  private _disableRipple: boolean = false;\n\n  /** Whether the list-item is disabled. */\n  @Input()\n  get disabled(): boolean {\n    return this._disabled || (this._listBase && this._listBase.disabled);\n  }\n  set disabled(value: BooleanInput) {\n    this._disabled = coerceBooleanProperty(value);\n  }\n  private _disabled = false;\n\n  private _subscriptions = new Subscription();\n  private _rippleRenderer: RippleRenderer | null = null;\n\n  /** Whether the list item has unscoped text content. */\n  _hasUnscopedTextContent: boolean = false;\n\n  /**\n   * Implemented as part of `RippleTarget`.\n   * @docs-private\n   */\n  rippleConfig: RippleConfig & RippleGlobalOptions;\n\n  /**\n   * Implemented as part of `RippleTarget`.\n   * @docs-private\n   */\n  get rippleDisabled(): boolean {\n    return this.disableRipple || !!this.rippleConfig.disabled;\n  }\n\n  constructor(\n    public _elementRef: ElementRef<HTMLElement>,\n    protected _ngZone: NgZone,\n    private _listBase: MatListBase,\n    private _platform: Platform,\n    @Optional()\n    @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)\n    globalRippleOptions?: RippleGlobalOptions,\n    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,\n  ) {\n    this.rippleConfig = globalRippleOptions || {};\n    this._hostElement = this._elementRef.nativeElement;\n    this._noopAnimations = animationMode === 'NoopAnimations';\n\n    if (!this._listBase._isNonInteractive) {\n      this._initInteractiveListItem();\n    }\n\n    // If no type attribute is specified for a host `<button>` element, set it to `button`. If a\n    // type attribute is already specified, we do nothing. We do this for backwards compatibility.\n    // TODO: Determine if we intend to continue doing this for the MDC-based list.\n    if (\n      this._hostElement.nodeName.toLowerCase() === 'button' &&\n      !this._hostElement.hasAttribute('type')\n    ) {\n      this._hostElement.setAttribute('type', 'button');\n    }\n  }\n\n  ngAfterViewInit() {\n    this._monitorProjectedLinesAndTitle();\n    this._updateItemLines(true);\n  }\n\n  ngOnDestroy() {\n    this._subscriptions.unsubscribe();\n    if (this._rippleRenderer !== null) {\n      this._rippleRenderer._removeTriggerEvents();\n    }\n  }\n\n  /** Whether the list item has icons or avatars. */\n  _hasIconOrAvatar() {\n    return !!(this._avatars.length || this._icons.length);\n  }\n\n  private _initInteractiveListItem() {\n    this._hostElement.classList.add('mat-mdc-list-item-interactive');\n    this._rippleRenderer = new RippleRenderer(\n      this,\n      this._ngZone,\n      this._hostElement,\n      this._platform,\n    );\n    this._rippleRenderer.setupTriggerEvents(this._hostElement);\n  }\n\n  /**\n   * Subscribes to changes in the projected title and lines. Triggers a\n   * item lines update whenever a change occurs.\n   */\n  private _monitorProjectedLinesAndTitle() {\n    this._ngZone.runOutsideAngular(() => {\n      this._subscriptions.add(\n        merge(this._lines!.changes, this._titles!.changes).subscribe(() =>\n          this._updateItemLines(false),\n        ),\n      );\n    });\n  }\n\n  /**\n   * Updates the lines of the list item. Based on the projected user content and optional\n   * explicit lines setting, the visual appearance of the list item is determined.\n   *\n   * This method should be invoked whenever the projected user content changes, or\n   * when the explicit lines have been updated.\n   *\n   * @param recheckUnscopedContent Whether the projected unscoped content should be re-checked.\n   *   The unscoped content is not re-checked for every update as it is a rather expensive check\n   *   for content that is expected to not change very often.\n   */\n  _updateItemLines(recheckUnscopedContent: boolean) {\n    // If the updated is triggered too early before the view and content is initialized,\n    // we just skip the update. After view initialization the update is triggered again.\n    if (!this._lines || !this._titles || !this._unscopedContent) {\n      return;\n    }\n\n    // Re-check the DOM for unscoped text content if requested. This needs to\n    // happen before any computation or sanity checks run as these rely on the\n    // result of whether there is unscoped text content or not.\n    if (recheckUnscopedContent) {\n      this._checkDomForUnscopedTextContent();\n    }\n\n    // Sanity check the list item lines and title in the content. This is a dev-mode only\n    // check that can be dead-code eliminated by Terser in production.\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      sanityCheckListItemContent(this);\n    }\n\n    const numberOfLines = this._explicitLines ?? this._inferLinesFromContent();\n    const unscopedContentEl = this._unscopedContent.nativeElement;\n\n    // Update the list item element to reflect the number of lines.\n    this._hostElement.classList.toggle('mat-mdc-list-item-single-line', numberOfLines <= 1);\n    this._hostElement.classList.toggle('mdc-list-item--with-one-line', numberOfLines <= 1);\n    this._hostElement.classList.toggle('mdc-list-item--with-two-lines', numberOfLines === 2);\n    this._hostElement.classList.toggle('mdc-list-item--with-three-lines', numberOfLines === 3);\n\n    // If there is no title and the unscoped content is the is the only line, the\n    // unscoped text content will be treated as the title of the list-item.\n    if (this._hasUnscopedTextContent) {\n      const treatAsTitle = this._titles.length === 0 && numberOfLines === 1;\n      unscopedContentEl.classList.toggle('mdc-list-item__primary-text', treatAsTitle);\n      unscopedContentEl.classList.toggle('mdc-list-item__secondary-text', !treatAsTitle);\n    } else {\n      unscopedContentEl.classList.remove('mdc-list-item__primary-text');\n      unscopedContentEl.classList.remove('mdc-list-item__secondary-text');\n    }\n  }\n\n  /**\n   * Infers the number of lines based on the projected user content. This is useful\n   * if no explicit number of lines has been specified on the list item.\n   *\n   * The number of lines is inferred based on whether there is a title, the number of\n   * additional lines (secondary/tertiary). An additional line is acquired if there is\n   * unscoped text content.\n   */\n  private _inferLinesFromContent() {\n    let numOfLines = this._titles!.length + this._lines!.length;\n    if (this._hasUnscopedTextContent) {\n      numOfLines += 1;\n    }\n    return numOfLines;\n  }\n\n  /** Checks whether the list item has unscoped text content. */\n  private _checkDomForUnscopedTextContent() {\n    this._hasUnscopedTextContent = Array.from<ChildNode>(\n      this._unscopedContent!.nativeElement.childNodes,\n    )\n      .filter(node => node.nodeType !== node.COMMENT_NODE)\n      .some(node => !!(node.textContent && node.textContent.trim()));\n  }\n}\n\n/**\n * Sanity checks the configuration of the list item with respect to the amount\n * of lines, whether there is a title, or if there is unscoped text content.\n *\n * The checks are extracted into a top-level function that can be dead-code\n * eliminated by Terser or other optimizers in production mode.\n */\nfunction sanityCheckListItemContent(item: MatListItemBase) {\n  const numTitles = item._titles!.length;\n  const numLines = item._titles!.length;\n\n  if (numTitles > 1) {\n    throw Error('A list item cannot have multiple titles.');\n  }\n  if (numTitles === 0 && numLines > 0) {\n    throw Error('A list item line can only be used if there is a list item title.');\n  }\n  if (\n    numTitles === 0 &&\n    item._hasUnscopedTextContent &&\n    item._explicitLines !== null &&\n    item._explicitLines > 1\n  ) {\n    throw Error('A list item cannot have wrapping content without a title.');\n  }\n  if (numLines > 2 || (numLines === 2 && item._hasUnscopedTextContent)) {\n    throw Error('A list item can have at maximum three lines.');\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';\nimport {MatListBase} from './list-base';\n\n@Component({\n  selector: 'mat-action-list',\n  exportAs: 'matActionList',\n  template: '<ng-content></ng-content>',\n  host: {\n    'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',\n    'role': 'group',\n  },\n  styleUrls: ['list.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{provide: MatListBase, useExisting: MatActionList}],\n})\nexport class MatActionList extends MatListBase {\n  // An navigation list is considered interactive, but does not extend the interactive list\n  // base class. We do this because as per MDC, items of interactive lists are only reachable\n  // through keyboard shortcuts. We want all items for the navigation list to be reachable\n  // through tab key as we do not intend to provide any special accessibility treatment. The\n  // accessibility treatment depends on how the end-user will interact with it.\n  override _isNonInteractive = false;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Platform} from '@angular/cdk/platform';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  ContentChildren,\n  ElementRef,\n  Inject,\n  NgZone,\n  Optional,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n  InjectionToken,\n} from '@angular/core';\nimport {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions} from '@angular/material/core';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\nimport {MatListBase, MatListItemBase} from './list-base';\nimport {MatListItemLine, MatListItemMeta, MatListItemTitle} from './list-item-sections';\nimport {coerceBooleanProperty} from '@angular/cdk/coercion';\n\n/**\n * Injection token that can be used to inject instances of `MatList`. It serves as\n * alternative token to the actual `MatList` class which could cause unnecessary\n * retention of the class and its component metadata.\n */\nexport const MAT_LIST = new InjectionToken<MatList>('MatList');\n\n@Component({\n  selector: 'mat-list',\n  exportAs: 'matList',\n  template: '<ng-content></ng-content>',\n  host: {\n    'class': 'mat-mdc-list mat-mdc-list-base mdc-list',\n  },\n  styleUrls: ['list.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{provide: MatListBase, useExisting: MatList}],\n})\nexport class MatList extends MatListBase {}\n\n@Component({\n  selector: 'mat-list-item, a[mat-list-item], button[mat-list-item]',\n  exportAs: 'matListItem',\n  host: {\n    'class': 'mat-mdc-list-item mdc-list-item',\n    '[class.mdc-list-item--activated]': 'activated',\n    '[class.mdc-list-item--with-leading-avatar]': '_avatars.length !== 0',\n    '[class.mdc-list-item--with-leading-icon]': '_icons.length !== 0',\n    '[class.mdc-list-item--with-trailing-meta]': '_meta.length !== 0',\n    '[class._mat-animation-noopable]': '_noopAnimations',\n    '[attr.aria-current]': '_getAriaCurrent()',\n  },\n  templateUrl: 'list-item.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatListItem extends MatListItemBase {\n  @ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList<MatListItemLine>;\n  @ContentChildren(MatListItemTitle, {descendants: true}) _titles: QueryList<MatListItemTitle>;\n  @ContentChildren(MatListItemMeta, {descendants: true}) _meta: QueryList<MatListItemMeta>;\n  @ViewChild('unscopedContent') _unscopedContent: ElementRef<HTMLSpanElement>;\n  @ViewChild('text') _itemText: ElementRef<HTMLElement>;\n\n  /** Indicates whether an item in a `<mat-nav-list>` is the currently active page. */\n  @Input()\n  get activated() {\n    return this._activated;\n  }\n  set activated(activated) {\n    this._activated = coerceBooleanProperty(activated);\n  }\n  _activated = false;\n\n  constructor(\n    element: ElementRef,\n    ngZone: NgZone,\n    listBase: MatListBase,\n    platform: Platform,\n    @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalRippleOptions?: RippleGlobalOptions,\n    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,\n  ) {\n    super(element, ngZone, listBase, platform, globalRippleOptions, animationMode);\n  }\n\n  /**\n   * Determine the value of `aria-current`. Return 'page' if this item is an activated anchor tag.\n   * Otherwise, return `null`. This method is safe to use with server-side rendering.\n   */\n  _getAriaCurrent(): string | null {\n    return this._hostElement.nodeName === 'A' && this._activated ? 'page' : null;\n  }\n}\n","<ng-content select=\"[matListItemAvatar],[matListItemIcon]\"></ng-content>\n\n<span class=\"mdc-list-item__content\">\n  <ng-content select=\"[matListItemTitle]\"></ng-content>\n  <ng-content select=\"[matListItemLine]\"></ng-content>\n  <span #unscopedContent class=\"mat-mdc-list-item-unscoped-content\"\n        (cdkObserveContent)=\"_updateItemLines(true)\">\n    <ng-content></ng-content>\n  </span>\n</span>\n\n<ng-content select=\"[matListItemMeta]\"></ng-content>\n\n<ng-content select=\"mat-divider\"></ng-content>\n\n<!--\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\n  focus/hover/selected state, so we need a separate element.\n-->\n<div class=\"mat-mdc-focus-indicator\"></div>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {\n  ANIMATION_MODULE_TYPE,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions, ThemePalette} from '@angular/material/core';\nimport {MatListBase, MatListItemBase} from './list-base';\nimport {LIST_OPTION, ListOption, MatListOptionCheckboxPosition} from './list-option-types';\nimport {MatListItemLine, MatListItemTitle} from './list-item-sections';\nimport {Platform} from '@angular/cdk/platform';\n\n/**\n * Injection token that can be used to reference instances of an `SelectionList`. It serves\n * as alternative token to an actual implementation which would result in circular references.\n * @docs-private\n */\nexport const SELECTION_LIST = new InjectionToken<SelectionList>('SelectionList');\n\n/**\n * Interface describing the containing list of an list option. This is used to avoid\n * circular dependencies between the list-option and the selection list.\n * @docs-private\n */\nexport interface SelectionList extends MatListBase {\n  multiple: boolean;\n  color: ThemePalette;\n  selectedOptions: SelectionModel<MatListOption>;\n  compareWith: (o1: any, o2: any) => boolean;\n  _value: string[] | null;\n  _reportValueChange(): void;\n  _emitChangeEvent(options: MatListOption[]): void;\n  _onTouched(): void;\n}\n\n@Component({\n  selector: 'mat-list-option',\n  exportAs: 'matListOption',\n  styleUrls: ['list-option.css'],\n  host: {\n    'class': 'mat-mdc-list-item mat-mdc-list-option mdc-list-item',\n    'role': 'option',\n    // As per MDC, only list items in single selection mode should receive the `--selected`\n    // class. For multi selection, the checkbox is used as indicator.\n    '[class.mdc-list-item--selected]': 'selected && !_selectionList.multiple',\n    // Based on the checkbox position and whether there are icons or avatars, we apply MDC's\n    // list-item `--leading` and `--trailing` classes.\n    '[class.mdc-list-item--with-leading-avatar]': '_hasProjected(\"avatars\", \"before\")',\n    '[class.mdc-list-item--with-leading-icon]': '_hasProjected(\"icons\", \"before\")',\n    '[class.mdc-list-item--with-trailing-icon]': '_hasProjected(\"icons\", \"after\")',\n    '[class.mat-mdc-list-option-with-trailing-avatar]': '_hasProjected(\"avatars\", \"after\")',\n    // Based on the checkbox position, we apply the `--leading` or `--trailing` MDC classes\n    // which ensure that the checkbox is positioned correctly within the list item.\n    '[class.mdc-list-item--with-leading-checkbox]': '_hasCheckboxAt(\"before\")',\n    '[class.mdc-list-item--with-trailing-checkbox]': '_hasCheckboxAt(\"after\")',\n    '[class.mat-accent]': 'color !== \"primary\" && color !== \"warn\"',\n    '[class.mat-warn]': 'color === \"warn\"',\n    '[class._mat-animation-noopable]': '_noopAnimations',\n    '[attr.aria-selected]': 'selected',\n    '(blur)': '_handleBlur()',\n    '(click)': '_toggleOnInteraction()',\n  },\n  templateUrl: 'list-option.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {provide: MatListItemBase, useExisting: MatListOption},\n    {provide: LIST_OPTION, useExisting: MatListOption},\n  ],\n})\nexport class MatListOption extends MatListItemBase implements ListOption, OnInit, OnDestroy {\n  @ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList<MatListItemLine>;\n  @ContentChildren(MatListItemTitle, {descendants: true}) _titles: QueryList<MatListItemTitle>;\n  @ViewChild('unscopedContent') _unscopedContent: ElementRef<HTMLSpanElement>;\n\n  /**\n   * Emits when the selected state of the option has changed.\n   * Use to facilitate two-data binding to the `selected` property.\n   * @docs-private\n   */\n  @Output()\n  readonly selectedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  /** Whether the label should appear before or after the checkbox. Defaults to 'after' */\n  @Input() checkboxPosition: MatListOptionCheckboxPosition = 'after';\n\n  /** Theme color of the list option. This sets the color of the checkbox. */\n  @Input()\n  get color(): ThemePalette {\n    return this._color || this._selectionList.color;\n  }\n  set color(newValue: ThemePalette) {\n    this._color = newValue;\n  }\n  private _color: ThemePalette;\n\n  /** Value of the option */\n  @Input()\n  get value(): any {\n    return this._value;\n  }\n  set value(newValue: any) {\n    if (this.selected && newValue !== this.value && this._inputsInitialized) {\n      this.selected = false;\n    }\n\n    this._value = newValue;\n  }\n  private _value: any;\n\n  /** Whether the option is selected. */\n  @Input()\n  get selected(): boolean {\n    return this._selectionList.selectedOptions.isSelected(this);\n  }\n  set selected(value: BooleanInput) {\n    const isSelected = coerceBooleanProperty(value);\n\n    if (isSelected !== this._selected) {\n      this._setSelected(isSelected);\n\n      if (isSelected || this._selectionList.multiple) {\n        this._selectionList._reportValueChange();\n      }\n    }\n  }\n  private _selected = false;\n\n  /**\n   * This is set to true after the first OnChanges cycle so we don't\n   * clear the value of `selected` in the first cycle.\n   */\n  private _inputsInitialized = false;\n\n  constructor(\n    elementRef: ElementRef<HTMLElement>,\n    ngZone: NgZone,\n    @Inject(SELECTION_LIST) private _selectionList: SelectionList,\n    platform: Platform,\n    private _changeDetectorRef: ChangeDetectorRef,\n    @Optional()\n    @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)\n    globalRippleOptions?: RippleGlobalOptions,\n    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,\n  ) {\n    super(elementRef, ngZone, _selectionList, platform, globalRippleOptions, animationMode);\n  }\n\n  ngOnInit() {\n    const list = this._selectionList;\n\n    if (list._value && list._value.some(value => list.compareWith(this._value, value))) {\n      this._setSelected(true);\n    }\n\n    const wasSelected = this._selected;\n\n    // List options that are selected at initialization can't be reported properly to the form\n    // control. This is because it takes some time until the selection-list knows about all\n    // available options. Also it can happen that the ControlValueAccessor has an initial value\n    // that should be used instead. Deferring the value change report to the next tick ensures\n    // that the form control value is not being overwritten.\n    Promise.resolve().then(() => {\n      if (this._selected || wasSelected) {\n        this.selected = true;\n        this._changeDetectorRef.markForCheck();\n      }\n    });\n    this._inputsInitialized = true;\n  }\n\n  override ngOnDestroy(): void {\n    super.ngOnDestroy();\n\n    if (this.selected) {\n      // We have to delay this until the next tick in order\n      // to avoid changed after checked errors.\n      Promise.resolve().then(() => {\n        this.selected = false;\n      });\n    }\n  }\n\n  /** Toggles the selection state of the option. */\n  toggle(): void {\n    this.selected = !this.selected;\n  }\n\n  /** Allows for programmatic focusing of the option. */\n  focus(): void {\n    this._hostElement.focus();\n  }\n\n  /** Gets the text label of the list option. Used for the typeahead functionality in the list. */\n  getLabel() {\n    const titleElement = this._titles?.get(0)?._elementRef.nativeElement;\n    // If there is no explicit title element, the unscoped text content\n    // is treated as the list item title.\n    const labelEl = titleElement || this._unscopedContent?.nativeElement;\n    return labelEl?.textContent || '';\n  }\n\n  /** Whether a checkbox is shown at the given position. */\n  _hasCheckboxAt(position: MatListOptionCheckboxPosition): boolean {\n    return this._selectionList.multiple && this._getCheckboxPosition() === position;\n  }\n\n  /** Whether icons or avatars are shown at the given position. */\n  _hasIconsOrAvatarsAt(position: 'before' | 'after'): boolean {\n    return this._hasProjected('icons', position) || this._hasProjected('avatars', position);\n  }\n\n  /** Gets whether the given type of element is projected at the specified position. */\n  _hasProjected(type: 'icons' | 'avatars', position: 'before' | 'after'): boolean {\n    // If the checkbox is shown at the specified position, neither icons or\n    // avatars can be shown at the position.\n    return (\n      this._getCheckboxPosition() !== position &&\n      (type === 'avatars' ? this._avatars.length !== 0 : this._icons.length !== 0)\n    );\n  }\n\n  _handleBlur() {\n    this._selectionList._onTouched();\n  }\n\n  /** Gets the current position of the checkbox. */\n  _getCheckboxPosition() {\n    return this.checkboxPosition || 'after';\n  }\n\n  /**\n   * Sets the selected state of the option.\n   * @returns Whether the value has changed.\n   */\n  _setSelected(selected: boolean): boolean {\n    if (selected === this._selected) {\n      return false;\n    }\n\n    this._selected = selected;\n\n    if (selected) {\n      this._selectionList.selectedOptions.select(this);\n    } else {\n      this._selectionList.selectedOptions.deselect(this);\n    }\n\n    this.selectedChange.emit(selected);\n    this._changeDetectorRef.markForCheck();\n    return true;\n  }\n\n  /**\n   * Notifies Angular that the option needs to be checked in the next change detection run.\n   * Mainly used to trigger an update of the list option if the disabled state of the selection\n   * list changed.\n   */\n  _markForCheck() {\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /** Toggles the option's value based on a user interaction. */\n  _toggleOnInteraction() {\n    if (!this.disabled) {\n      if (this._selectionList.multiple) {\n        this.selected = !this.selected;\n        this._selectionList._emitChangeEvent([this]);\n      } else if (!this.selected) {\n        this.selected = true;\n        this._selectionList._emitChangeEvent([this]);\n      }\n    }\n  }\n\n  /** Sets the tabindex of the list option. */\n  _setTabindex(value: number) {\n    this._hostElement.setAttribute('tabindex', value + '');\n  }\n}\n","<!--\n  Save icons and the pseudo checkbox so that they can be re-used in the template without\n  duplication. Also content can only be injected once so we need to extract icons/avatars\n  into a template since we use it in multiple places.\n-->\n<ng-template #icons>\n  <ng-content select=\"[matListItemAvatar],[matListItemIcon]\">\n  </ng-content>\n</ng-template>\n\n<ng-template #checkbox>\n  <div class=\"mdc-checkbox\" [class.mdc-checkbox--disabled]=\"disabled\">\n    <input type=\"checkbox\" class=\"mdc-checkbox__native-control\"\n           [checked]=\"selected\" [disabled]=\"disabled\"/>\n    <div class=\"mdc-checkbox__background\">\n      <svg class=\"mdc-checkbox__checkmark\"\n           viewBox=\"0 0 24 24\"\n           aria-hidden=\"true\">\n        <path class=\"mdc-checkbox__checkmark-path\"\n              fill=\"none\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n      <div class=\"mdc-checkbox__mixedmark\"></div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Container for the checkbox at start. -->\n<span class=\"mdc-list-item__start mat-mdc-list-option-checkbox-before\"\n      *ngIf=\"_hasCheckboxAt('before')\">\n  <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n</span>\n<!-- Conditionally renders icons/avatars before the list item text. -->\n<ng-template [ngIf]=\"_hasIconsOrAvatarsAt('before')\">\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\n</ng-template>\n\n<!-- Text -->\n<span class=\"mdc-list-item__content\">\n  <ng-content select=\"[matListItemTitle]\"></ng-content>\n  <ng-content select=\"[matListItemLine]\"></ng-content>\n  <span #unscopedContent class=\"mat-mdc-list-item-unscoped-content\"\n        (cdkObserveContent)=\"_updateItemLines(true)\">\n    <ng-content></ng-content>\n  </span>\n</span>\n\n<!-- Container for the checkbox at the end. -->\n<span class=\"mdc-list-item__end\" *ngIf=\"_hasCheckboxAt('after')\">\n  <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n</span>\n<!-- Conditionally renders icons/avatars after the list item text. -->\n<ng-template [ngIf]=\"_hasIconsOrAvatarsAt('after')\">\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\n</ng-template>\n\n<!-- Divider -->\n<ng-content select=\"mat-divider\"></ng-content>\n\n<!--\n  Strong focus indicator element. MDC uses the `::before` pseudo element for the default\n  focus/hover/selected state, so we need a separate element.\n-->\n<div class=\"mat-mdc-focus-indicator\"></div>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive} from '@angular/core';\n\n/**\n * Directive whose purpose is to add the mat- CSS styling to this selector.\n * @docs-private\n */\n@Directive({\n  selector: '[mat-subheader], [matSubheader]',\n  // TODO(mmalerba): MDC's subheader font looks identical to the list item font, figure out why and\n  //  make a change in one of the repos to visually distinguish.\n  host: {'class': 'mat-mdc-subheader mdc-list-group__subheader'},\n})\nexport class MatListSubheaderCssMatStyler {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ChangeDetectionStrategy, Component, InjectionToken, ViewEncapsulation} from '@angular/core';\nimport {MatListBase} from './list-base';\n\n/**\n * Injection token that can be used to inject instances of `MatNavList`. It serves as\n * alternative token to the actual `MatNavList` class which could cause unnecessary\n * retention of the class and its component metadata.\n */\nexport const MAT_NAV_LIST = new InjectionToken<MatNavList>('MatNavList');\n\n@Component({\n  selector: 'mat-nav-list',\n  exportAs: 'matNavList',\n  template: '<ng-content></ng-content>',\n  host: {\n    'class': 'mat-mdc-nav-list mat-mdc-list-base mdc-list',\n    'role': 'navigation',\n  },\n  styleUrls: ['list.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{provide: MatListBase, useExisting: MatNavList}],\n})\nexport class MatNavList extends MatListBase {\n  // An navigation list is considered interactive, but does not extend the interactive list\n  // base class. We do this because as per MDC, items of interactive lists are only reachable\n  // through keyboard shortcuts. We want all items for the navigation list to be reachable\n  // through tab key as we do not intend to provide any special accessibility treatment. The\n  // accessibility treatment depends on how the end-user will interact with it.\n  override _isNonInteractive = false;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {FocusKeyManager} from '@angular/cdk/a11y';\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {A, ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';\nimport {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  Output,\n  QueryList,\n  SimpleChanges,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {ThemePalette} from '@angular/material/core';\nimport {Subject} from 'rxjs';\nimport {takeUntil} from 'rxjs/operators';\nimport {MatListBase} from './list-base';\nimport {MatListOption, SELECTION_LIST, SelectionList} from './list-option';\n\nexport const MAT_SELECTION_LIST_VALUE_ACCESSOR: any = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => MatSelectionList),\n  multi: true,\n};\n\n/** Change event that is being fired whenever the selected state of an option changes. */\nexport class MatSelectionListChange {\n  constructor(\n    /** Reference to the selection list that emitted the event. */\n    public source: MatSelectionList,\n    /**\n     * Reference to the option that has been changed.\n     * @deprecated Use `options` instead, because some events may change more than one option.\n     * @breaking-change 12.0.0\n     */\n    public option: MatListOption,\n    /** Reference to the options that have been changed. */\n    public options: MatListOption[],\n  ) {}\n}\n\n@Component({\n  selector: 'mat-selection-list',\n  exportAs: 'matSelectionList',\n  host: {\n    'class': 'mat-mdc-selection-list mat-mdc-list-base mdc-list',\n    'role': 'listbox',\n    '[attr.aria-multiselectable]': 'multiple',\n    '(keydown)': '_handleKeydown($event)',\n  },\n  template: '<ng-content></ng-content>',\n  styleUrls: ['list.css'],\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    MAT_SELECTION_LIST_VALUE_ACCESSOR,\n    {provide: MatListBase, useExisting: MatSelectionList},\n    {provide: SELECTION_LIST, useExisting: MatSelectionList},\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MatSelectionList\n  extends MatListBase\n  implements SelectionList, ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy\n{\n  private _initialized = false;\n  private _keyManager: FocusKeyManager<MatListOption>;\n\n  /** Emits when the list has been destroyed. */\n  private _destroyed = new Subject<void>();\n\n  /** Whether the list has been destroyed. */\n  private _isDestroyed: boolean;\n\n  /** View to model callback that should be called whenever the selected options change. */\n  private _onChange: (value: any) => void = (_: any) => {};\n\n  @ContentChildren(MatListOption, {descendants: true}) _items: QueryList<MatListOption>;\n\n  /** Emits a change event whenever the selected state of an option changes. */\n  @Output() readonly selectionChange: EventEmitter<MatSelectionListChange> =\n    new EventEmitter<MatSelectionListChange>();\n\n  /** Theme color of the selection list. This sets the checkbox color for all list options. */\n  @Input() color: ThemePalette = 'accent';\n\n  /**\n   * Function used for comparing an option against the selected value when determining which\n   * options should appear as selected. The first argument is the value of an options. The second\n   * one is a value from the selected value. A boolean must be returned.\n   */\n  @Input() compareWith: (o1: any, o2: any) => boolean = (a1, a2) => a1 === a2;\n\n  /** Whether selection is limited to one or multiple items (default multiple). */\n  @Input()\n  get multiple(): boolean {\n    return this._multiple;\n  }\n  set multiple(value: BooleanInput) {\n    const newValue = coerceBooleanProperty(value);\n\n    if (newValue !== this._multiple) {\n      if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._initialized) {\n        throw new Error(\n          'Cannot change `multiple` mode of mat-selection-list after initialization.',\n        );\n      }\n\n      this._multiple = newValue;\n      this.selectedOptions = new SelectionModel(this._multiple, this.selectedOptions.selected);\n    }\n  }\n  private _multiple = true;\n\n  /** The currently selected options. */\n  selectedOptions = new SelectionModel<MatListOption>(this._multiple);\n\n  /** Keeps track of the currently-selected value. */\n  _value: string[] | null;\n\n  /** View to model callback that should be called if the list or its options lost focus. */\n  _onTouched: () => void = () => {};\n\n  constructor(public _element: ElementRef<HTMLElement>, private _ngZone: NgZone) {\n    super();\n    this._isNonInteractive = false;\n  }\n\n  ngAfterViewInit() {\n    // Mark the selection list as initialized so that the `multiple`\n    // binding can no longer be changed.\n    this._initialized = true;\n    this._setupRovingTabindex();\n\n    // These events are bound outside the zone, because they don't change\n    // any change-detected properties and they can trigger timeouts.\n    this._ngZone.runOutsideAngular(() => {\n      this._element.nativeElement.addEventListener('focusin', this._handleFocusin);\n      this._element.nativeElement.addEventListener('focusout', this._handleFocusout);\n    });\n\n    if (this._value) {\n      this._setOptionsFromValues(this._value);\n    }\n\n    this._watchForSelectionChange();\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    const disabledChanges = changes['disabled'];\n    const disableRippleChanges = changes['disableRipple'];\n\n    if (\n      (disableRippleChanges && !disableRippleChanges.firstChange) ||\n      (disabledChanges && !disabledChanges.firstChange)\n    ) {\n      this._markOptionsForCheck();\n    }\n  }\n\n  ngOnDestroy() {\n    this._keyManager?.destroy();\n    this._element.nativeElement.removeEventListener('focusin', this._handleFocusin);\n    this._element.nativeElement.removeEventListener('focusout', this._handleFocusout);\n    this._destroyed.next();\n    this._destroyed.complete();\n    this._isDestroyed = true;\n  }\n\n  /** Focuses the selection list. */\n  focus(options?: FocusOptions) {\n    this._element.nativeElement.focus(options);\n  }\n\n  /** Selects all of the options. Returns the options that changed as a result. */\n  selectAll(): MatListOption[] {\n    return this._setAllOptionsSelected(true);\n  }\n\n  /** Deselects all of the options. Returns the options that changed as a result. */\n  deselectAll(): MatListOption[] {\n    return this._setAllOptionsSelected(false);\n  }\n\n  /** Reports a value change to the ControlValueAccessor */\n  _reportValueChange() {\n    // Stop reporting value changes after the list has been destroyed. This avoids\n    // cases where the list might wrongly reset its value once it is removed, but\n    // the form control is still live.\n    if (this.options && !this._isDestroyed) {\n      const value = this._getSelectedOptionValues();\n      this._onChange(value);\n      this._value = value;\n    }\n  }\n\n  /** Emits a change event if the selected state of an option changed. */\n  _emitChangeEvent(options: MatListOption[]) {\n    this.selectionChange.emit(new MatSelectionListChange(this, options[0], options));\n  }\n\n  /** Implemented as part of ControlValueAccessor. */\n  writeValue(values: string[]): void {\n    this._value = values;\n\n    if (this.options) {\n      this._setOptionsFromValues(values || []);\n    }\n  }\n\n  /** Implemented as a part of ControlValueAccessor. */\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n  }\n\n  /**\n   * Whether the *entire* selection list is disabled. When true, each list item is also disabled\n   * and each list item is removed from the tab order (has tabindex=\"-1\").\n   */\n  @Input()\n  override get disabled(): boolean {\n    return this._selectionListDisabled;\n  }\n  override set disabled(value: BooleanInput) {\n    // Update the disabled state of this list. Write to `this._selectionListDisabled` instead of\n    // `super.disabled`. That is to avoid closure compiler compatibility issues with assigning to\n    // a super property.\n    this._selectionListDisabled = coerceBooleanProperty(value);\n    if (this._selectionListDisabled) {\n      this._keyManager?.setActiveItem(-1);\n    }\n  }\n  private _selectionListDisabled = false;\n\n  /** Implemented as part of ControlValueAccessor. */\n  registerOnChange(fn: (value: any) => void): void {\n    this._onChange = fn;\n  }\n\n  /** Implemented as part of ControlValueAccessor. */\n  registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n\n  /** Watches for changes in the selected state of the options and updates the list accordingly. */\n  private _watchForSelectionChange() {\n    this.selectedOptions.changed.pipe(takeUntil(this._destroyed)).subscribe(event => {\n      // Sync external changes to the model back to the options.\n      for (let item of event.added) {\n        item.selected = true;\n      }\n\n      for (let item of event.removed) {\n        item.selected = false;\n      }\n\n      if (!this._containsFocus()) {\n        this._resetActiveOption();\n      }\n    });\n  }\n\n  /** Sets the selected options based on the specified values. */\n  private _setOptionsFromValues(values: string[]) {\n    this.options.forEach(option => option._setSelected(false));\n\n    values.forEach(value => {\n      const correspondingOption = this.options.find(option => {\n        // Skip options that are already in the model. This allows us to handle cases\n        // where the same primitive value is selected multiple times.\n        return option.selected ? false : this.compareWith(option.value, value);\n      });\n\n      if (correspondingOption) {\n        correspondingOption._setSelected(true);\n      }\n    });\n  }\n\n  /** Returns the values of the selected options. */\n  private _getSelectedOptionValues(): string[] {\n    return this.options.filter(option => option.selected).map(option => option.value);\n  }\n\n  /** Marks all the options to be checked in the next change detection run. */\n  private _markOptionsForCheck() {\n    if (this.options) {\n      this.options.forEach(option => option._markForCheck());\n    }\n  }\n\n  /**\n   * Sets the selected state on all of the options\n   * and emits an event if anything changed.\n   */\n  private _setAllOptionsSelected(isSelected: boolean, skipDisabled?: boolean): MatListOption[] {\n    // Keep track of whether anything changed, because we only want to\n    // emit the changed event when something actually changed.\n    const changedOptions: MatListOption[] = [];\n\n    this.options.forEach(option => {\n      if ((!skipDisabled || !option.disabled) && option._setSelected(isSelected)) {\n        changedOptions.push(option);\n      }\n    });\n\n    if (changedOptions.length) {\n      this._reportValueChange();\n    }\n\n    return changedOptions;\n  }\n\n  // Note: This getter exists for backwards c