@angular/material 21.0.0-next.8 → 21.0.0-rc.0

package/fesm2022/_option-chunk.mjs

@@ -8,340 +8,377 @@ import { MatPseudoCheckbox } from './_pseudo-checkbox-chunk.mjs';
 import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
 import { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';
 
-/**
- * Injection token used to provide the parent component to options.
- */
 const MAT_OPTION_PARENT_COMPONENT = new InjectionToken('MAT_OPTION_PARENT_COMPONENT');
 
-// Notes on the accessibility pattern used for `mat-optgroup`.
-// The option group has two different "modes": regular and inert. The regular mode uses the
-// recommended a11y pattern which has `role="group"` on the group element with `aria-labelledby`
-// pointing to the label. This works for `mat-select`, but it seems to hit a bug for autocomplete
-// under VoiceOver where the group doesn't get read out at all. The bug appears to be that if
-// there's __any__ a11y-related attribute on the group (e.g. `role` or `aria-labelledby`),
-// VoiceOver on Safari won't read it out.
-// We've introduced the `inert` mode as a workaround. Under this mode, all a11y attributes are
-// removed from the group, and we get the screen reader to read out the group label by mirroring it
-// inside an invisible element in the option. This is sub-optimal, because the screen reader will
-// repeat the group label on each navigation, whereas the default pattern only reads the group when
-// the user enters a new group. The following alternate approaches were considered:
-// 1. Reading out the group label using the `LiveAnnouncer` solves the problem, but we can't control
-//    when the text will be read out so sometimes it comes in too late or never if the user
-//    navigates quickly.
-// 2. `<mat-option aria-describedby="groupLabel"` - This works on Safari, but VoiceOver in Chrome
-//    won't read out the description at all.
-// 3. `<mat-option aria-labelledby="optionLabel groupLabel"` - This works on Chrome, but Safari
-//     doesn't read out the text at all. Furthermore, on
-/**
- * Injection token that can be used to reference instances of `MatOptgroup`. It serves as
- * alternative token to the actual `MatOptgroup` class which could cause unnecessary
- * retention of the class and its component metadata.
- */
 const MAT_OPTGROUP = new InjectionToken('MatOptgroup');
-/**
- * Component that is used to group instances of `mat-option`.
- */
 class MatOptgroup {
-    /** Label for the option group. */
-    label;
-    /** whether the option group is disabled. */
-    disabled = false;
-    /** Unique id for the underlying label. */
-    _labelId = inject(_IdGenerator).getId('mat-optgroup-label-');
-    /** Whether the group is in inert a11y mode. */
-    _inert;
-    constructor() {
-        const parent = inject(MAT_OPTION_PARENT_COMPONENT, { optional: true });
-        this._inert = parent?.inertGroups ?? false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatOptgroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.0-next.2", type: MatOptgroup, isStandalone: true, selector: "mat-optgroup", inputs: { label: "label", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "attr.role": "_inert ? null : \"group\"", "attr.aria-disabled": "_inert ? null : disabled.toString()", "attr.aria-labelledby": "_inert ? null : _labelId" }, classAttribute: "mat-mdc-optgroup" }, providers: [{ provide: MAT_OPTGROUP, useExisting: MatOptgroup }], exportAs: ["matOptgroup"], ngImport: i0, template: "<span\n  class=\"mat-mdc-optgroup-label\"\n  role=\"presentation\"\n  [class.mdc-list-item--disabled]=\"disabled\"\n  [id]=\"_labelId\">\n  <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\n</span>\n\n<ng-content select=\"mat-option, ng-container\"></ng-content>\n", styles: [".mat-mdc-optgroup{color:var(--mat-optgroup-label-text-color, var(--mat-sys-on-surface-variant));font-family:var(--mat-optgroup-label-text-font, var(--mat-sys-title-small-font));line-height:var(--mat-optgroup-label-text-line-height, var(--mat-sys-title-small-line-height));font-size:var(--mat-optgroup-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-optgroup-label-text-tracking, var(--mat-sys-title-small-tracking));font-weight:var(--mat-optgroup-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;outline:none}.mat-mdc-optgroup-label.mdc-list-item--disabled{opacity:.38}.mat-mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  label;
+  disabled = false;
+  _labelId = inject(_IdGenerator).getId('mat-optgroup-label-');
+  _inert;
+  constructor() {
+    const parent = inject(MAT_OPTION_PARENT_COMPONENT, {
+      optional: true
+    });
+    this._inert = parent?.inertGroups ?? false;
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatOptgroup,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Component
+  });
+  static ɵcmp = i0.ɵɵngDeclareComponent({
+    minVersion: "16.1.0",
+    version: "20.2.0-next.2",
+    type: MatOptgroup,
+    isStandalone: true,
+    selector: "mat-optgroup",
+    inputs: {
+      label: "label",
+      disabled: ["disabled", "disabled", booleanAttribute]
+    },
+    host: {
+      properties: {
+        "attr.role": "_inert ? null : \"group\"",
+        "attr.aria-disabled": "_inert ? null : disabled.toString()",
+        "attr.aria-labelledby": "_inert ? null : _labelId"
+      },
+      classAttribute: "mat-mdc-optgroup"
+    },
+    providers: [{
+      provide: MAT_OPTGROUP,
+      useExisting: MatOptgroup
+    }],
+    exportAs: ["matOptgroup"],
+    ngImport: i0,
+    template: "<span\n  class=\"mat-mdc-optgroup-label\"\n  role=\"presentation\"\n  [class.mdc-list-item--disabled]=\"disabled\"\n  [id]=\"_labelId\">\n  <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\n</span>\n\n<ng-content select=\"mat-option, ng-container\"></ng-content>\n",
+    styles: [".mat-mdc-optgroup{color:var(--mat-optgroup-label-text-color, var(--mat-sys-on-surface-variant));font-family:var(--mat-optgroup-label-text-font, var(--mat-sys-title-small-font));line-height:var(--mat-optgroup-label-text-line-height, var(--mat-sys-title-small-line-height));font-size:var(--mat-optgroup-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-optgroup-label-text-tracking, var(--mat-sys-title-small-tracking));font-weight:var(--mat-optgroup-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;outline:none}.mat-mdc-optgroup-label.mdc-list-item--disabled{opacity:.38}.mat-mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"],
+    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+    encapsulation: i0.ViewEncapsulation.None
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatOptgroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-optgroup', exportAs: 'matOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'mat-mdc-optgroup',
-                        '[attr.role]': '_inert ? null : "group"',
-                        '[attr.aria-disabled]': '_inert ? null : disabled.toString()',
-                        '[attr.aria-labelledby]': '_inert ? null : _labelId',
-                    }, providers: [{ provide: MAT_OPTGROUP, useExisting: MatOptgroup }], template: "<span\n  class=\"mat-mdc-optgroup-label\"\n  role=\"presentation\"\n  [class.mdc-list-item--disabled]=\"disabled\"\n  [id]=\"_labelId\">\n  <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\n</span>\n\n<ng-content select=\"mat-option, ng-container\"></ng-content>\n", styles: [".mat-mdc-optgroup{color:var(--mat-optgroup-label-text-color, var(--mat-sys-on-surface-variant));font-family:var(--mat-optgroup-label-text-font, var(--mat-sys-title-small-font));line-height:var(--mat-optgroup-label-text-line-height, var(--mat-sys-title-small-line-height));font-size:var(--mat-optgroup-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-optgroup-label-text-tracking, var(--mat-sys-title-small-tracking));font-weight:var(--mat-optgroup-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;outline:none}.mat-mdc-optgroup-label.mdc-list-item--disabled{opacity:.38}.mat-mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: MatOptgroup,
+  decorators: [{
+    type: Component,
+    args: [{
+      selector: 'mat-optgroup',
+      exportAs: 'matOptgroup',
+      encapsulation: ViewEncapsulation.None,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      host: {
+        'class': 'mat-mdc-optgroup',
+        '[attr.role]': '_inert ? null : "group"',
+        '[attr.aria-disabled]': '_inert ? null : disabled.toString()',
+        '[attr.aria-labelledby]': '_inert ? null : _labelId'
+      },
+      providers: [{
+        provide: MAT_OPTGROUP,
+        useExisting: MatOptgroup
+      }],
+      template: "<span\n  class=\"mat-mdc-optgroup-label\"\n  role=\"presentation\"\n  [class.mdc-list-item--disabled]=\"disabled\"\n  [id]=\"_labelId\">\n  <span class=\"mdc-list-item__primary-text\">{{ label }} <ng-content></ng-content></span>\n</span>\n\n<ng-content select=\"mat-option, ng-container\"></ng-content>\n",
+      styles: [".mat-mdc-optgroup{color:var(--mat-optgroup-label-text-color, var(--mat-sys-on-surface-variant));font-family:var(--mat-optgroup-label-text-font, var(--mat-sys-title-small-font));line-height:var(--mat-optgroup-label-text-line-height, var(--mat-sys-title-small-line-height));font-size:var(--mat-optgroup-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-optgroup-label-text-tracking, var(--mat-sys-title-small-tracking));font-weight:var(--mat-optgroup-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-optgroup-label{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;outline:none}.mat-mdc-optgroup-label.mdc-list-item--disabled{opacity:.38}.mat-mdc-optgroup-label .mdc-list-item__primary-text{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;white-space:normal;color:inherit}\n"]
+    }]
+  }],
+  ctorParameters: () => [],
+  propDecorators: {
+    label: [{
+      type: Input
+    }],
+    disabled: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }]
+  }
+});
 
-/** Event object emitted by MatOption when selected or deselected. */
 class MatOptionSelectionChange {
-    source;
-    isUserInput;
-    constructor(
-    /** Reference to the option that emitted the event. */
-    source, 
-    /** Whether the change in the option's value was a result of a user action. */
-    isUserInput = false) {
-        this.source = source;
-        this.isUserInput = isUserInput;
-    }
+  source;
+  isUserInput;
+  constructor(source, isUserInput = false) {
+    this.source = source;
+    this.isUserInput = isUserInput;
+  }
 }
-/**
- * Single option inside of a `<mat-select>` element.
- */
 class MatOption {
-    _element = inject(ElementRef);
-    _changeDetectorRef = inject(ChangeDetectorRef);
-    _parent = inject(MAT_OPTION_PARENT_COMPONENT, { optional: true });
-    group = inject(MAT_OPTGROUP, { optional: true });
-    _signalDisableRipple = false;
-    _selected = false;
-    _active = false;
-    _mostRecentViewValue = '';
-    /** Whether the wrapping component is in multiple selection mode. */
-    get multiple() {
-        return this._parent && this._parent.multiple;
-    }
-    /** Whether or not the option is currently selected. */
-    get selected() {
-        return this._selected;
-    }
-    /** The form value of the option. */
-    value;
-    /** The unique ID of the option. */
-    id = inject(_IdGenerator).getId('mat-option-');
-    /** Whether the option is disabled. */
-    get disabled() {
-        return (this.group && this.group.disabled) || this._disabled();
-    }
-    set disabled(value) {
-        this._disabled.set(value);
-    }
-    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    /** Whether ripples for the option are disabled. */
-    get disableRipple() {
-        return this._signalDisableRipple
-            ? this._parent.disableRipple()
-            : !!this._parent?.disableRipple;
-    }
-    /** Whether to display checkmark for single-selection. */
-    get hideSingleSelectionIndicator() {
-        return !!(this._parent && this._parent.hideSingleSelectionIndicator);
-    }
-    /** Event emitted when the option is selected or deselected. */
-    // tslint:disable-next-line:no-output-on-prefix
-    onSelectionChange = new EventEmitter();
-    /** Element containing the option's text. */
-    _text;
-    /** Emits when the state of the option changes and any parents have to be notified. */
-    _stateChanges = new Subject();
-    constructor() {
-        const styleLoader = inject(_CdkPrivateStyleLoader);
-        styleLoader.load(_StructuralStylesLoader);
-        styleLoader.load(_VisuallyHiddenLoader);
-        this._signalDisableRipple = !!this._parent && isSignal(this._parent.disableRipple);
-    }
-    /**
-     * Whether or not the option is currently active and ready to be selected.
-     * An active option displays styles as if it is focused, but the
-     * focus is actually retained somewhere else. This comes in handy
-     * for components like autocomplete where focus must remain on the input.
-     */
-    get active() {
-        return this._active;
-    }
-    /**
-     * The displayed value of the option. It is necessary to show the selected option in the
-     * select's trigger.
-     */
-    get viewValue() {
-        // TODO(kara): Add input property alternative for node envs.
-        return (this._text?.nativeElement.textContent || '').trim();
-    }
-    /** Selects the option. */
-    select(emitEvent = true) {
-        if (!this._selected) {
-            this._selected = true;
-            this._changeDetectorRef.markForCheck();
-            if (emitEvent) {
-                this._emitSelectionChangeEvent();
-            }
-        }
-    }
-    /** Deselects the option. */
-    deselect(emitEvent = true) {
-        if (this._selected) {
-            this._selected = false;
-            this._changeDetectorRef.markForCheck();
-            if (emitEvent) {
-                this._emitSelectionChangeEvent();
-            }
-        }
+  _element = inject(ElementRef);
+  _changeDetectorRef = inject(ChangeDetectorRef);
+  _parent = inject(MAT_OPTION_PARENT_COMPONENT, {
+    optional: true
+  });
+  group = inject(MAT_OPTGROUP, {
+    optional: true
+  });
+  _signalDisableRipple = false;
+  _selected = false;
+  _active = false;
+  _mostRecentViewValue = '';
+  get multiple() {
+    return this._parent && this._parent.multiple;
+  }
+  get selected() {
+    return this._selected;
+  }
+  value;
+  id = inject(_IdGenerator).getId('mat-option-');
+  get disabled() {
+    return this.group && this.group.disabled || this._disabled();
+  }
+  set disabled(value) {
+    this._disabled.set(value);
+  }
+  _disabled = signal(false, ...(ngDevMode ? [{
+    debugName: "_disabled"
+  }] : []));
+  get disableRipple() {
+    return this._signalDisableRipple ? this._parent.disableRipple() : !!this._parent?.disableRipple;
+  }
+  get hideSingleSelectionIndicator() {
+    return !!(this._parent && this._parent.hideSingleSelectionIndicator);
+  }
+  onSelectionChange = new EventEmitter();
+  _text;
+  _stateChanges = new Subject();
+  constructor() {
+    const styleLoader = inject(_CdkPrivateStyleLoader);
+    styleLoader.load(_StructuralStylesLoader);
+    styleLoader.load(_VisuallyHiddenLoader);
+    this._signalDisableRipple = !!this._parent && isSignal(this._parent.disableRipple);
+  }
+  get active() {
+    return this._active;
+  }
+  get viewValue() {
+    return (this._text?.nativeElement.textContent || '').trim();
+  }
+  select(emitEvent = true) {
+    if (!this._selected) {
+      this._selected = true;
+      this._changeDetectorRef.markForCheck();
+      if (emitEvent) {
+        this._emitSelectionChangeEvent();
+      }
     }
-    /** Sets focus onto this option. */
-    focus(_origin, options) {
-        // Note that we aren't using `_origin`, but we need to keep it because some internal consumers
-        // use `MatOption` in a `FocusKeyManager` and we need it to match `FocusableOption`.
-        const element = this._getHostElement();
-        if (typeof element.focus === 'function') {
-            element.focus(options);
-        }
+  }
+  deselect(emitEvent = true) {
+    if (this._selected) {
+      this._selected = false;
+      this._changeDetectorRef.markForCheck();
+      if (emitEvent) {
+        this._emitSelectionChangeEvent();
+      }
     }
-    /**
-     * This method sets display styles on the option to make it appear
-     * active. This is used by the ActiveDescendantKeyManager so key
-     * events will display the proper options as active on arrow key events.
-     */
-    setActiveStyles() {
-        if (!this._active) {
-            this._active = true;
-            this._changeDetectorRef.markForCheck();
-        }
+  }
+  focus(_origin, options) {
+    const element = this._getHostElement();
+    if (typeof element.focus === 'function') {
+      element.focus(options);
     }
-    /**
-     * This method removes display styles on the option that made it appear
-     * active. This is used by the ActiveDescendantKeyManager so key
-     * events will display the proper options as active on arrow key events.
-     */
-    setInactiveStyles() {
-        if (this._active) {
-            this._active = false;
-            this._changeDetectorRef.markForCheck();
-        }
+  }
+  setActiveStyles() {
+    if (!this._active) {
+      this._active = true;
+      this._changeDetectorRef.markForCheck();
     }
-    /** Gets the label to be used when determining whether the option should be focused. */
-    getLabel() {
-        return this.viewValue;
+  }
+  setInactiveStyles() {
+    if (this._active) {
+      this._active = false;
+      this._changeDetectorRef.markForCheck();
     }
-    /** Ensures the option is selected when activated from the keyboard. */
-    _handleKeydown(event) {
-        if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
-            this._selectViaInteraction();
-            // Prevent the page from scrolling down and form submits.
-            event.preventDefault();
-        }
-    }
-    /**
-     * `Selects the option while indicating the selection came from the user. Used to
-     * determine if the select's view -> model callback should be invoked.`
-     */
-    _selectViaInteraction() {
-        if (!this.disabled) {
-            this._selected = this.multiple ? !this._selected : true;
-            this._changeDetectorRef.markForCheck();
-            this._emitSelectionChangeEvent(true);
-        }
+  }
+  getLabel() {
+    return this.viewValue;
+  }
+  _handleKeydown(event) {
+    if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
+      this._selectViaInteraction();
+      event.preventDefault();
     }
-    /** Returns the correct tabindex for the option depending on disabled state. */
-    // This method is only used by `MatLegacyOption`. Keeping it here to avoid breaking the types.
-    // That's because `MatLegacyOption` use `MatOption` type in a few places such as
-    // `MatOptionSelectionChange`. It is safe to delete this when `MatLegacyOption` is deleted.
-    _getTabIndex() {
-        return this.disabled ? '-1' : '0';
+  }
+  _selectViaInteraction() {
+    if (!this.disabled) {
+      this._selected = this.multiple ? !this._selected : true;
+      this._changeDetectorRef.markForCheck();
+      this._emitSelectionChangeEvent(true);
     }
-    /** Gets the host DOM element. */
-    _getHostElement() {
-        return this._element.nativeElement;
-    }
-    ngAfterViewChecked() {
-        // Since parent components could be using the option's label to display the selected values
-        // (e.g. `mat-select`) and they don't have a way of knowing if the option's label has changed
-        // we have to check for changes in the DOM ourselves and dispatch an event. These checks are
-        // relatively cheap, however we still limit them only to selected options in order to avoid
-        // hitting the DOM too often.
-        if (this._selected) {
-            const viewValue = this.viewValue;
-            if (viewValue !== this._mostRecentViewValue) {
-                if (this._mostRecentViewValue) {
-                    this._stateChanges.next();
-                }
-                this._mostRecentViewValue = viewValue;
-            }
+  }
+  _getTabIndex() {
+    return this.disabled ? '-1' : '0';
+  }
+  _getHostElement() {
+    return this._element.nativeElement;
+  }
+  ngAfterViewChecked() {
+    if (this._selected) {
+      const viewValue = this.viewValue;
+      if (viewValue !== this._mostRecentViewValue) {
+        if (this._mostRecentViewValue) {
+          this._stateChanges.next();
         }
+        this._mostRecentViewValue = viewValue;
+      }
     }
-    ngOnDestroy() {
-        this._stateChanges.complete();
-    }
-    /** Emits the selection change event. */
-    _emitSelectionChangeEvent(isUserInput = false) {
-        this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0-next.2", type: MatOption, isStandalone: true, selector: "mat-option", inputs: { value: "value", id: "id", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "class.mdc-list-item--selected": "selected", "class.mat-mdc-option-multiple": "multiple", "class.mat-mdc-option-active": "active", "class.mdc-list-item--disabled": "disabled", "id": "id", "attr.aria-selected": "selected", "attr.aria-disabled": "disabled.toString()" }, classAttribute: "mat-mdc-option mdc-list-item" }, viewQueries: [{ propertyName: "_text", first: true, predicate: ["text"], descendants: true, static: true }], exportAs: ["matOption"], ngImport: i0, template: "<!-- Set aria-hidden=\"true\" to this DOM node and other decorative nodes in this file. This might\n be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead\n of the Option node (#23202). Most assistive technology will generally ignore non-role,\n non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->\n@if (multiple) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        [state]=\"selected ? 'checked' : 'unchecked'\"\n        aria-hidden=\"true\"></mat-pseudo-checkbox>\n}\n\n<ng-content select=\"mat-icon\"></ng-content>\n\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\n\n<!-- Render checkmark at the end for single-selection. -->\n@if (!multiple && selected && !hideSingleSelectionIndicator) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        state=\"checked\"\n        aria-hidden=\"true\"\n        appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n@if (group && group._inert) {\n    <span class=\"cdk-visually-hidden\">({{ group.label }})</span>\n}\n\n<div class=\"mat-mdc-option-ripple mat-focus-indicator\" aria-hidden=\"true\" mat-ripple\n     [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disabled || disableRipple\">\n</div>\n", styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var(--mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option.mdc-list-item{align-items:center;background:rgba(0,0,0,0)}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors: active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator::before{content:\"\"}\n"], dependencies: [{ kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  }
+  ngOnDestroy() {
+    this._stateChanges.complete();
+  }
+  _emitSelectionChangeEvent(isUserInput = false) {
+    this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput));
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MatOption,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Component
+  });
+  static ɵcmp = i0.ɵɵngDeclareComponent({
+    minVersion: "17.0.0",
+    version: "20.2.0-next.2",
+    type: MatOption,
+    isStandalone: true,
+    selector: "mat-option",
+    inputs: {
+      value: "value",
+      id: "id",
+      disabled: ["disabled", "disabled", booleanAttribute]
+    },
+    outputs: {
+      onSelectionChange: "onSelectionChange"
+    },
+    host: {
+      attributes: {
+        "role": "option"
+      },
+      listeners: {
+        "click": "_selectViaInteraction()",
+        "keydown": "_handleKeydown($event)"
+      },
+      properties: {
+        "class.mdc-list-item--selected": "selected",
+        "class.mat-mdc-option-multiple": "multiple",
+        "class.mat-mdc-option-active": "active",
+        "class.mdc-list-item--disabled": "disabled",
+        "id": "id",
+        "attr.aria-selected": "selected",
+        "attr.aria-disabled": "disabled.toString()"
+      },
+      classAttribute: "mat-mdc-option mdc-list-item"
+    },
+    viewQueries: [{
+      propertyName: "_text",
+      first: true,
+      predicate: ["text"],
+      descendants: true,
+      static: true
+    }],
+    exportAs: ["matOption"],
+    ngImport: i0,
+    template: "<!-- Set aria-hidden=\"true\" to this DOM node and other decorative nodes in this file. This might\n be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead\n of the Option node (#23202). Most assistive technology will generally ignore non-role,\n non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->\n@if (multiple) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        [state]=\"selected ? 'checked' : 'unchecked'\"\n        aria-hidden=\"true\"></mat-pseudo-checkbox>\n}\n\n<ng-content select=\"mat-icon\"></ng-content>\n\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\n\n<!-- Render checkmark at the end for single-selection. -->\n@if (!multiple && selected && !hideSingleSelectionIndicator) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        state=\"checked\"\n        aria-hidden=\"true\"\n        appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n@if (group && group._inert) {\n    <span class=\"cdk-visually-hidden\">({{ group.label }})</span>\n}\n\n<div class=\"mat-mdc-option-ripple mat-focus-indicator\" aria-hidden=\"true\" mat-ripple\n     [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disabled || disableRipple\">\n</div>\n",
+    styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var(--mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option.mdc-list-item{align-items:center;background:rgba(0,0,0,0)}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors: active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator::before{content:\"\"}\n"],
+    dependencies: [{
+      kind: "component",
+      type: MatPseudoCheckbox,
+      selector: "mat-pseudo-checkbox",
+      inputs: ["state", "disabled", "appearance"]
+    }, {
+      kind: "directive",
+      type: MatRipple,
+      selector: "[mat-ripple], [matRipple]",
+      inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"],
+      exportAs: ["matRipple"]
+    }],
+    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+    encapsulation: i0.ViewEncapsulation.None
+  });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatOption, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-option', exportAs: 'matOption', host: {
-                        'role': 'option',
-                        '[class.mdc-list-item--selected]': 'selected',
-                        '[class.mat-mdc-option-multiple]': 'multiple',
-                        '[class.mat-mdc-option-active]': 'active',
-                        '[class.mdc-list-item--disabled]': 'disabled',
-                        '[id]': 'id',
-                        // Set aria-selected to false for non-selected items and true for selected items. Conform to
-                        // [WAI ARIA Listbox authoring practices guide](
-                        //  https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), "If any options are selected, each
-                        // selected option has either aria-selected or aria-checked  set to true. All options that are
-                        // selectable but not selected have either aria-selected or aria-checked set to false." Align
-                        // aria-selected implementation of Chips and List components.
-                        //
-                        // Set `aria-selected="false"` on not-selected listbox options to fix VoiceOver announcing
-                        // every option as "selected" (#21491).
-                        '[attr.aria-selected]': 'selected',
-                        '[attr.aria-disabled]': 'disabled.toString()',
-                        '(click)': '_selectViaInteraction()',
-                        '(keydown)': '_handleKeydown($event)',
-                        'class': 'mat-mdc-option mdc-list-item',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatPseudoCheckbox, MatRipple], template: "<!-- Set aria-hidden=\"true\" to this DOM node and other decorative nodes in this file. This might\n be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead\n of the Option node (#23202). Most assistive technology will generally ignore non-role,\n non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->\n@if (multiple) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        [state]=\"selected ? 'checked' : 'unchecked'\"\n        aria-hidden=\"true\"></mat-pseudo-checkbox>\n}\n\n<ng-content select=\"mat-icon\"></ng-content>\n\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\n\n<!-- Render checkmark at the end for single-selection. -->\n@if (!multiple && selected && !hideSingleSelectionIndicator) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        state=\"checked\"\n        aria-hidden=\"true\"\n        appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n@if (group && group._inert) {\n    <span class=\"cdk-visually-hidden\">({{ group.label }})</span>\n}\n\n<div class=\"mat-mdc-option-ripple mat-focus-indicator\" aria-hidden=\"true\" mat-ripple\n     [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disabled || disableRipple\">\n</div>\n", styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var(--mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option.mdc-list-item{align-items:center;background:rgba(0,0,0,0)}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors: active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator::before{content:\"\"}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], onSelectionChange: [{
-                type: Output
-            }], _text: [{
-                type: ViewChild,
-                args: ['text', { static: true }]
-            }] } });
-/**
- * Counts the amount of option group labels that precede the specified option.
- * @param optionIndex Index of the option at which to start counting.
- * @param options Flat list of all of the options.
- * @param optionGroups Flat list of all of the option groups.
- * @docs-private
- */
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: MatOption,
+  decorators: [{
+    type: Component,
+    args: [{
+      selector: 'mat-option',
+      exportAs: 'matOption',
+      host: {
+        'role': 'option',
+        '[class.mdc-list-item--selected]': 'selected',
+        '[class.mat-mdc-option-multiple]': 'multiple',
+        '[class.mat-mdc-option-active]': 'active',
+        '[class.mdc-list-item--disabled]': 'disabled',
+        '[id]': 'id',
+        '[attr.aria-selected]': 'selected',
+        '[attr.aria-disabled]': 'disabled.toString()',
+        '(click)': '_selectViaInteraction()',
+        '(keydown)': '_handleKeydown($event)',
+        'class': 'mat-mdc-option mdc-list-item'
+      },
+      encapsulation: ViewEncapsulation.None,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      imports: [MatPseudoCheckbox, MatRipple],
+      template: "<!-- Set aria-hidden=\"true\" to this DOM node and other decorative nodes in this file. This might\n be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead\n of the Option node (#23202). Most assistive technology will generally ignore non-role,\n non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->\n@if (multiple) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        [state]=\"selected ? 'checked' : 'unchecked'\"\n        aria-hidden=\"true\"></mat-pseudo-checkbox>\n}\n\n<ng-content select=\"mat-icon\"></ng-content>\n\n<span class=\"mdc-list-item__primary-text\" #text><ng-content></ng-content></span>\n\n<!-- Render checkmark at the end for single-selection. -->\n@if (!multiple && selected && !hideSingleSelectionIndicator) {\n    <mat-pseudo-checkbox\n        class=\"mat-mdc-option-pseudo-checkbox\"\n        [disabled]=\"disabled\"\n        state=\"checked\"\n        aria-hidden=\"true\"\n        appearance=\"minimal\"></mat-pseudo-checkbox>\n}\n\n<!-- See a11y notes inside optgroup.ts for context behind this element. -->\n@if (group && group._inert) {\n    <span class=\"cdk-visually-hidden\">({{ group.label }})</span>\n}\n\n<div class=\"mat-mdc-option-ripple mat-focus-indicator\" aria-hidden=\"true\" mat-ripple\n     [matRippleTrigger]=\"_getHostElement()\" [matRippleDisabled]=\"disabled || disableRipple\">\n</div>\n",
+      styles: [".mat-mdc-option{-webkit-user-select:none;user-select:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;min-height:48px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--mat-option-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-option-label-text-font, var(--mat-sys-label-large-font));line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));font-size:var(--mat-option-label-text-size, var(--mat-sys-body-large-size));letter-spacing:var(--mat-option-label-text-tracking, var(--mat-sys-label-large-tracking));font-weight:var(--mat-option-label-text-weight, var(--mat-sys-body-large-weight))}.mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mat-mdc-option:focus.mdc-list-item,.mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:var(--mat-option-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));outline:0}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover){background-color:var(--mat-option-selected-state-layer-color, var(--mat-sys-secondary-container))}.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,.mat-mdc-option-multiple,:focus,:hover) .mdc-list-item__primary-text{color:var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option .mat-pseudo-checkbox{--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--mat-option-selected-state-label-text-color, var(--mat-sys-on-secondary-container))}.mat-mdc-option.mdc-list-item{align-items:center;background:rgba(0,0,0,0)}.mat-mdc-option.mdc-list-item--disabled{cursor:default;pointer-events:none}.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,.mat-mdc-option.mdc-list-item--disabled>mat-icon{opacity:.38}.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:32px}[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple){padding-left:16px;padding-right:32px}.mat-mdc-option .mat-icon,.mat-mdc-option .mat-pseudo-checkbox-full{margin-right:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-icon,[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:16px}.mat-mdc-option .mat-pseudo-checkbox-minimal{margin-left:16px;flex-shrink:0}[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal{margin-right:16px;margin-left:0}.mat-mdc-option .mat-mdc-option-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-mdc-option .mdc-list-item__primary-text{white-space:normal;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;font-family:inherit;text-decoration:inherit;text-transform:inherit;margin-right:auto}[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text{margin-right:0;margin-left:auto}@media(forced-colors: active){.mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{content:\"\";position:absolute;top:50%;right:16px;transform:translateY(-50%);width:10px;height:0;border-bottom:solid 10px;border-radius:10px}[dir=rtl] .mat-mdc-option.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after{right:auto;left:16px}}.mat-mdc-option-multiple{--mat-list-list-item-selected-container-color: var(--mat-list-list-item-container-color, transparent)}.mat-mdc-option-active .mat-focus-indicator::before{content:\"\"}\n"]
+    }]
+  }],
+  ctorParameters: () => [],
+  propDecorators: {
+    value: [{
+      type: Input
+    }],
+    id: [{
+      type: Input
+    }],
+    disabled: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    onSelectionChange: [{
+      type: Output
+    }],
+    _text: [{
+      type: ViewChild,
+      args: ['text', {
+        static: true
+      }]
+    }]
+  }
+});
 function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
-    if (optionGroups.length) {
-        let optionsArray = options.toArray();
-        let groups = optionGroups.toArray();
-        let groupCounter = 0;
-        for (let i = 0; i < optionIndex + 1; i++) {
-            if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
-                groupCounter++;
-            }
-        }
-        return groupCounter;
+  if (optionGroups.length) {
+    let optionsArray = options.toArray();
+    let groups = optionGroups.toArray();
+    let groupCounter = 0;
+    for (let i = 0; i < optionIndex + 1; i++) {
+      if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
+        groupCounter++;
+      }
     }
-    return 0;
+    return groupCounter;
+  }
+  return 0;
 }
-/**
- * Determines the position to which to scroll a panel in order for an option to be into view.
- * @param optionOffset Offset of the option from the top of the panel.
- * @param optionHeight Height of the options.
- * @param currentScrollPosition Current scroll position of the panel.
- * @param panelHeight Height of the panel.
- * @docs-private
- */
 function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
-    if (optionOffset < currentScrollPosition) {
-        return optionOffset;
-    }
-    if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
-        return Math.max(0, optionOffset - panelHeight + optionHeight);
-    }
-    return currentScrollPosition;
+  if (optionOffset < currentScrollPosition) {
+    return optionOffset;
+  }
+  if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
+    return Math.max(0, optionOffset - panelHeight + optionHeight);
+  }
+  return currentScrollPosition;
 }
 
 export { MAT_OPTGROUP, MAT_OPTION_PARENT_COMPONENT, MatOptgroup, MatOption, MatOptionSelectionChange, _countGroupLabelsBeforeOption, _getOptionScrollPosition };