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

Angular Material

{"version":3,"file":"list.mjs","sources":["../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list-option-types.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list-item-sections.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/tokens.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list-base.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/action-list.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list-item.html","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list-option.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list-option.html","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/subheader.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/nav-list.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/selection-list.ts","../../../../../k8-fastbuild-ST-46c76129e412/bin/src/material/list/list-module.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.dev/license\n */\n\nimport {InjectionToken} from '@angular/core';\n\n/**\n * Type describing possible positions of a checkbox or radio in a list option\n * with respect to the list item's text.\n */\nexport type MatListOptionTogglePosition = '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  _getTogglePosition(): MatListOptionTogglePosition;\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.dev/license\n */\n\nimport {Directive, ElementRef, inject} 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  _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor(...args: unknown[]);\n  constructor() {}\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  _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor(...args: unknown[]);\n  constructor() {}\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` to\n * position content such as icons or checkboxes/radios that comes either before or after the text\n * content respectively. This directive detects the placement of the checkbox/radio 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` to\n    // position content such as icons or checkboxes/radios that comes either before or after the\n    // text content respectively. This directive detects the placement of the checkbox/radio and\n    // applies the 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  _listOption = inject<ListOption>(LIST_OPTION, {optional: true});\n\n  constructor(...args: unknown[]);\n  constructor() {}\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/radio is at the end.\n    return !this._listOption || this._listOption?._getTogglePosition() === '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.dev/license\n */\n\nimport {InjectionToken} from '@angular/core';\n\n/** Object that can be used to configure the default options for the list module. */\nexport interface MatListConfig {\n  /** Whether icon indicators should be hidden for single-selection. */\n  hideSingleSelectionIndicator?: boolean;\n}\n\n/** Injection token that can be used to provide the default options for the list module. */\nexport const MAT_LIST_CONFIG = new InjectionToken<MatListConfig>('MAT_LIST_CONFIG');\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.dev/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  QueryList,\n  ANIMATION_MODULE_TYPE,\n  Injector,\n} from '@angular/core';\nimport {\n  _StructuralStylesLoader,\n  MAT_RIPPLE_GLOBAL_OPTIONS,\n  RippleConfig,\n  RippleGlobalOptions,\n  RippleRenderer,\n  RippleTarget,\n} from '../core';\nimport {_CdkPrivateStyleLoader} from '@angular/cdk/private';\nimport {Subscription, merge} from 'rxjs';\nimport {\n  MatListItemLine,\n  MatListItemTitle,\n  MatListItemIcon,\n  MatListItemAvatar,\n} from './list-item-sections';\nimport {MAT_LIST_CONFIG} from './tokens';\n\n@Directive({\n  host: {\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  protected _defaultOptions = inject(MAT_LIST_CONFIG, {optional: true});\n}\n\n@Directive({\n  host: {\n    '[class.mdc-list-item--disabled]': 'disabled',\n    '[attr.aria-disabled]': 'disabled',\n    '[attr.disabled]': '(_isButtonElement && disabled) || null',\n  },\n})\n/** @docs-private */\nexport abstract class MatListItemBase implements AfterViewInit, OnDestroy, RippleTarget {\n  _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected _ngZone = inject(NgZone);\n  private _listBase = inject(MatListBase, {optional: true});\n  private _platform = inject(Platform);\n\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  /** indicate whether the host element is a button or not */\n  _isButtonElement: boolean;\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  /** Whether ripples for list items are disabled. */\n  @Input()\n  get disableRipple(): boolean {\n    return (\n      this.disabled ||\n      this._disableRipple ||\n      this._noopAnimations ||\n      !!this._listBase?.disableRipple\n    );\n  }\n  set disableRipple(value: BooleanInput) {\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?.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(...args: unknown[]);\n\n  constructor() {\n    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);\n    const globalRippleOptions = inject<RippleGlobalOptions>(MAT_RIPPLE_GLOBAL_OPTIONS, {\n      optional: true,\n    });\n    const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});\n\n    this.rippleConfig = globalRippleOptions || {};\n    this._hostElement = this._elementRef.nativeElement;\n    this._isButtonElement = this._hostElement.nodeName.toLowerCase() === 'button';\n    this._noopAnimations = animationMode === 'NoopAnimations';\n\n    if (this._listBase && !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 (this._isButtonElement && !this._hostElement.hasAttribute('type')) {\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      inject(Injector),\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._lines!.length;\n\n  if (numTitles > 1) {\n    console.warn('A list item cannot have multiple titles.');\n  }\n  if (numTitles === 0 && numLines > 0) {\n    console.warn('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    console.warn('A list item cannot have wrapping content without a title.');\n  }\n  if (numLines > 2 || (numLines === 2 && item._hasUnscopedTextContent)) {\n    console.warn('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.dev/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  styleUrl: '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.dev/license\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  ContentChildren,\n  ElementRef,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n  InjectionToken,\n} from '@angular/core';\nimport {MatListBase, MatListItemBase} from './list-base';\nimport {MatListItemLine, MatListItemMeta, MatListItemTitle} from './list-item-sections';\nimport {coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {CdkObserveContent} from '@angular/cdk/observers';\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  styleUrl: '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    // Utility class that makes it easier to target the case where there's both a leading\n    // and a trailing icon. Avoids having to write out all the combinations.\n    '[class.mat-mdc-list-item-both-leading-and-trailing]': '_hasBothLeadingAndTrailing()',\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  imports: [CdkObserveContent],\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(): boolean {\n    return this._activated;\n  }\n  set activated(activated) {\n    this._activated = coerceBooleanProperty(activated);\n  }\n  _activated = false;\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  protected _hasBothLeadingAndTrailing(): boolean {\n    return this._meta.length !== 0 && (this._avatars.length !== 0 || this._icons.length !== 0);\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-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.dev/license\n */\n\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {SelectionModel} from '@angular/cdk/collections';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  InjectionToken,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport {ThemePalette} from '../core';\nimport {MatListBase, MatListItemBase} from './list-base';\nimport {LIST_OPTION, ListOption, MatListOptionTogglePosition} from './list-option-types';\nimport {MatListItemLine, MatListItemTitle} from './list-item-sections';\nimport {NgTemplateOutlet} from '@angular/common';\nimport {CdkObserveContent} from '@angular/cdk/observers';\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 a 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  hideSingleSelectionIndicator: boolean;\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  styleUrl: '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 without checkbox or radio indicator should receive the\n    // `--selected` class.\n    '[class.mdc-list-item--selected]':\n      'selected && !_selectionList.multiple && _selectionList.hideSingleSelectionIndicator',\n    // Based on the checkbox/radio 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/radio position, we apply the `--leading` or `--trailing` MDC classes\n    // which ensure that the checkbox/radio 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.mdc-list-item--with-leading-radio]': '_hasRadioAt(\"before\")',\n    '[class.mdc-list-item--with-trailing-radio]': '_hasRadioAt(\"after\")',\n\n    // Utility class that makes it easier to target the case where there's both a leading\n    // and a trailing icon. Avoids having to write out all the combinations.\n    '[class.mat-mdc-list-item-both-leading-and-trailing]': '_hasBothLeadingAndTrailing()',\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  imports: [NgTemplateOutlet, CdkObserveContent],\n})\nexport class MatListOption extends MatListItemBase implements ListOption, OnInit, OnDestroy {\n  protected _selectionList = inject<SelectionList>(SELECTION_LIST);\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n\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/radio. Defaults to 'after' */\n  @Input() togglePosition: MatListOptionTogglePosition = 'after';\n\n  /**\n   * Whether the label should appear before or after the checkbox/radio. Defaults to 'after'\n   *\n   * @deprecated Use `togglePosition` instead.\n   * @breaking-change 17.0.0\n   */\n  @Input() get checkboxPosition(): MatListOptionTogglePosition {\n    return this.togglePosition;\n  }\n  set checkboxPosition(value: MatListOptionTogglePosition) {\n    this.togglePosition = value;\n  }\n\n  /**\n   * Theme color of the list option. This sets the color of the checkbox/radio.\n   * This API is supported in M2 themes only, it has no effect in M3 themes. For color customization\n   * in M3, see https://material.angular.io/components/list/styling.\n   *\n   * For information on applying color variants in M3, see\n   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants\n   */\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  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: MatListOptionTogglePosition): boolean {\n    return this._selectionList.multiple && this._getTogglePosition() === position;\n  }\n\n  /** Where a radio indicator is shown at the given position. */\n  _hasRadioAt(position: MatListOptionTogglePosition): boolean {\n    return (\n      !this._selectionList.multiple &&\n      this._getTogglePosition() === position &&\n      !this._selectionList.hideSingleSelectionIndicator\n    );\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/radio is shown at the specified position, neither icons or\n    // avatars can be shown at the position.\n    return (\n      this._getTogglePosition() !== 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/radio. */\n  _getTogglePosition() {\n    return this.togglePosition || '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  protected _hasBothLeadingAndTrailing(): boolean {\n    const hasLeading =\n      this._hasProjected('avatars', 'before') ||\n      this._hasProjected('icons', 'before') ||\n      this._hasCheckboxAt('before') ||\n      this._hasRadioAt('before');\n    const hasTrailing =\n      this._hasProjected('icons', 'after') ||\n      this._hasProjected('avatars', 'after') ||\n      this._hasCheckboxAt('after') ||\n      this._hasRadioAt('after');\n    return hasLeading && hasTrailing;\n  }\n}\n","<!--\n  Save icons and the pseudo checkbox/radio 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<ng-template #radio>\n  <div class=\"mdc-radio\" [class.mdc-radio--disabled]=\"disabled\">\n    <input type=\"radio\" class=\"mdc-radio__native-control\"\n           [checked]=\"selected\" [disabled]=\"disabled\"/>\n    <div class=\"mdc-radio__background\">\n      <div class=\"mdc-radio__outer-circle\"></div>\n      <div class=\"mdc-radio__inner-circle\"></div>\n    </div>\n  </div>\n</ng-template>\n\n@if (_hasCheckboxAt('before')) {\n  <!-- Container for the checkbox at start. -->\n  <span class=\"mdc-list-item__start mat-mdc-list-option-checkbox-before\">\n    <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n  </span>\n} @else if (_hasRadioAt('before')) {\n  <!-- Container for the radio at the start. -->\n  <span class=\"mdc-list-item__start mat-mdc-list-option-radio-before\">\n    <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n  </span>\n}\n<!-- Conditionally renders icons/avatars before the list item text. -->\n@if (_hasIconsOrAvatarsAt('before')) {\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\n}\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@if (_hasCheckboxAt('after')) {\n  <!-- Container for the checkbox at the end. -->\n  <span class=\"mdc-list-item__end\">\n    <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n  </span>\n} @else if (_hasRadioAt('after')) {\n  <!-- Container for the radio at the end. -->\n  <span class=\"mdc-list-item__end\">\n    <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n  </span>\n}\n\n<!-- Conditionally renders icons/avatars after the list item text. -->\n@if (_hasIconsOrAvatarsAt('after')) {\n  <ng-template [ngTemplateOutlet]=\"icons\"></ng-template>\n}\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-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.dev/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.dev/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  styleUrl: '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.dev/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, SPACE, hasModifierKey} from '@angular/cdk/keycodes';\nimport {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  SimpleChanges,\n  ViewEncapsulation,\n  forwardRef,\n  inject,\n} from '@angular/core';\nimport {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {ThemePalette} from '../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    /** 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  styleUrl: '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  _element = inject<ElementRef<HTMLElement>>(ElementRef);\n  private _ngZone = inject(NgZone);\n  private _renderer = inject(Renderer2);\n\n  private _initialized = false;\n  private _keyManager: FocusKeyManager<MatListOption>;\n  private _listenerCleanups: (() => void)[] | undefined;\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  /**\n   * Theme color of the selection list. This sets the checkbox color for all\n   * list options. This API is supported in M2 themes only, it has no effect in\n   * M3 themes. For color customization in M3, see https://material.angular.io/components/list/styling.\n   *\n   * For information on applying color variants in M3, see\n   * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants\n   */\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  /** Whether radio indicator for all list items is hidden. */\n  @Input()\n  get hideSingleSelectionIndicator(): boolean {\n    return this._hideSingleSelectionIndicator;\n  }\n  set hideSingleSelectionIndicator(value: BooleanInput) {\n    this._hideSingleSelectionIndicator = coerceBooleanProperty(value);\n  }\n  private _hideSingleSelectionIndicator: boolean =\n    this._defaultOptions?.hideSingleSelectionIndicator ?? false;\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  private readonly _changeDetectorRef = inject(ChangeDetectorRef);\n\n  constructor(...args: unknown[]);\n\n  constructor() {\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._listenerCleanups = [\n        this._renderer.listen(this._element.nativeElement, 'focusin', this._handleFocusin),\n        this._renderer.listen(this._element.nativeElement, 'focusout', this._handleFocusout),\n      ];\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    const hideSingleSelectionIndicatorChanges = changes['hideSingleSelectionIndicator'];\n\n    if (\n      (disableRippleChanges && !disableRippleChanges.firstChange) ||\n      (disabledChanges && !disabledChanges.firstChange) ||\n      (hideSingleSelectionIndicatorChanges && !hideSingleSelectionIndicatorChanges.firstChange)\n    ) {\n      this._markOptionsForCheck();\n    }\n  }\n\n  ngOnDestroy() {\n    this._keyManager?.destroy();\n    this._listenerCleanups?.forEach(curren