@natec/mef-dev-ui-kit 20.0.0-beta.1 → 20.0.1

package/src/lib/v2/select/select.ts

@@ -1,824 +0,0 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import {
-  CdkConnectedOverlay,
-  CdkOverlayOrigin,
-  ConnectedPosition,
-  Overlay,
-  ScrollStrategy,
-  ViewportRuler,
-} from '@angular/cdk/overlay';
-import { NgClass } from '@angular/common';
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ContentChildren,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  forwardRef,
-  inject,
-  InjectionToken,
-  Input,
-  numberAttribute,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  QueryList,
-  Renderer2,
-  SimpleChanges,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
-import { _countGroupLabelsBeforeOption, _getOptionScrollPosition, MDOption, MDOptionSelectionChange } from './option';
-import { MDOptionGroup } from './option-group';
-import { _IdGenerator, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { defer, filter, map, merge, Observable, startWith, Subject, switchMap, take, takeUntil, tap } from 'rxjs';
-import {
-  A,
-  DOWN_ARROW,
-  ENTER,
-  ESCAPE,
-  hasModifierKey,
-  LEFT_ARROW,
-  RIGHT_ARROW,
-  SPACE,
-  UP_ARROW,
-} from '@angular/cdk/keycodes';
-
-/** Event payload emitted when the select's value changes. */
-export class SelectChange<T = any> {
-  constructor(public source: MDSelect, public value: T) {}
-}
-
-/** Token for projecting a custom trigger template (optional). */
-export const MD_SELECT_TRIGGER = new InjectionToken<MDSelectTrigger>('MDSelectTrigger');
-
-@Component({
-  selector: 'md-select',
-  templateUrl: './select.html',
-  styleUrls: ['./select.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    role: 'combobox',
-    'aria-haspopup': 'listbox',
-    class: 'mdc-select',
-    '[attr.id]': 'id',
-    '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-    '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null',
-    '[attr.aria-expanded]': 'panelOpen',
-    '[attr.aria-label]': 'ariaLabel || null',
-    '[attr.aria-required]': 'required.toString()',
-    '[attr.aria-disabled]': 'disabled.toString()',
-    '[attr.aria-invalid]': 'errorState',
-    '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
-    '[class.mdc-select-disabled]': 'disabled',
-    '[class.mdc-select-invalid]': 'errorState',
-    '[class.mdc-select-required]': 'required',
-    '[class.mdc-select-empty]': 'empty',
-    '[class.mdc-select-multiple]': 'multiple',
-    '(keydown)': '_handleKeydown($event)',
-    '(focus)': '_onFocus()',
-    '(blur)': '_onBlur()',
-    '(click)': 'onContainerClick()',
-  },
-  standalone: true,
-  imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgClass],
-})
-/**
- * Material-like Select component with overlayed panel, single/multiple selection,
- * full a11y (combobox + listbox semantics), and CVA integration.
- *
- * @remarks
- * - Uses `ActiveDescendantKeyManager` for keyboard navigation & typeahead.
- * - Supports custom value comparison via `compareWith`.
- * - Works with {@link MDOption} and {@link MDOptionGroup} descendants.
- * - Emits `valueChange`, and structured `selectionChange` ({@link SelectChange}).
- */
-export class MDSelect implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
-  /** Viewport ruler for resize/orientation tracking to recompute overlay width. */
-  protected _viewportRuler = inject(ViewportRuler);
-
-  /** Change detector for OnPush; used throughout for manual marks. */
-  protected _changeDetectorRef = inject(ChangeDetectorRef);
-
-  /** Host element reference. */
-  readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef<HTMLElement>);
-
-  /** CDK Overlay service. */
-  readonly _overlay = inject(Overlay);
-
-  /** RTL/LTR direction (optional). */
-  private _dir = inject(Directionality, { optional: true });
-
-  /** Emits once content is fully initialized. */
-  private _initialized = new Subject<void>();
-
-  /** Control accessor hookup (if used inside forms). */
-  ngControl = inject(NgControl, { self: true, optional: true })!;
-
-  /** Id generator for trigger/value elements. */
-  private _idGenerator = inject(_IdGenerator);
-
-  /** Cleanup fn for overlay detach (animation end / fallback). */
-  private _cleanupDetach: (() => void) | undefined;
-
-  /** Renderer for low-level DOM ops. */
-  private _renderer = inject(Renderer2);
-
-  /** CSS class(es) applied to the overlay panel container. */
-  @Input() panelClass: string | string[] | Set<string> | { [key: string]: any };
-
-  /** Disabled state for the whole control. */
-  @Input({ transform: booleanAttribute }) disabled: boolean = false;
-
-  /** Multiple selection toggle. */
-  @Input({ transform: booleanAttribute })
-  get multiple(): boolean {
-    return this._multiple;
-  }
-  set multiple(value: boolean) {
-    this._multiple = value;
-  }
-  private _multiple: boolean = false;
-
-  /** Current model value (single or array for multiple). */
-  @Input()
-  get value(): any {
-    return this._value;
-  }
-  set value(newValue: any) {
-    const hasAssigned = this._assignValue(newValue);
-    if (hasAssigned) {
-      this._onChange(newValue);
-    }
-  }
-  private _value: any;
-
-  /** Host tabindex (applies when not disabled). */
-  @Input({
-    transform: (value: unknown) => (value == null ? 0 : numberAttribute(value)),
-  })
-  tabIndex: number = 0;
-
-  /**
-   * Required flag; auto-derives from `Validators.required` on the bound control
-   * if not provided explicitly.
-   */
-  @Input({ transform: booleanAttribute })
-  get required(): boolean {
-    return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
-  }
-  set required(value: boolean) {
-    this._required = value;
-    this.stateChanges.next();
-  }
-  private _required: boolean | undefined;
-
-  /** Custom comparator for complex option values. */
-  @Input()
-  get compareWith() {
-    return this._compareWith;
-  }
-  set compareWith(fn: (o1: any, o2: any) => boolean) {
-    this._compareWith = fn;
-    if (this._selectionModel) {
-      this._initializeSelection();
-    }
-  }
-  private _compareWith = (o1: any, o2: any) => o1 === o2;
-
-  /** Placeholder/label when nothing is selected. */
-  @Input()
-  get placeholder(): string {
-    return this._placeholder;
-  }
-  set placeholder(value: string) {
-    this._placeholder = value;
-    this.stateChanges.next();
-  }
-  private _placeholder: string = 'placeholder';
-
-  /** Allow selecting null/undefined values in single mode. */
-  @Input({ transform: booleanAttribute })
-  canSelectNullableOptions: boolean = false;
-
-  /** Optional custom sorting for selected values (multiple mode). */
-  @Input() sortComparator: (a: MDOption, b: MDOption, options: MDOption[]) => number;
-
-  /** Emits raw value whenever internal value changes. */
-  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>();
-
-  /** Emits {@link SelectChange} with source/value when selection changes. */
-  @Output() readonly selectionChange = new EventEmitter<SelectChange>();
-
-  /** Emits `true/false` when panel opens/closes. */
-  @Output() readonly openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  /** Convenience stream: fires once on open. */
-  @Output('opened') readonly _openedStream: Observable<void> = this.openedChange.pipe(
-    filter((o) => o),
-    map(() => {})
-  );
-
-  /** Convenience stream: fires once on close. */
-  @Output('closed') readonly _closedStream: Observable<void> = this.openedChange.pipe(
-    filter((o) => !o),
-    map(() => {})
-  );
-
-  /** Trigger element ref (default trigger template). */
-  @ViewChild('trigger') trigger: ElementRef;
-
-  /** Panel container ref. */
-  @ViewChild('panel') panel: ElementRef;
-
-  /** Overlay directive for positioning/attach/detach. */
-  @ViewChild(CdkConnectedOverlay) protected _overlayDir: CdkConnectedOverlay;
-
-  /** Optional projected custom trigger via injection token. */
-  @ContentChild(MD_SELECT_TRIGGER) customTrigger: MDSelectTrigger;
-
-  /** Descendant options in the content. */
-  @ContentChildren(MDOption, { descendants: true }) options: QueryList<MDOption>;
-
-  /** Descendant option groups in the content. */
-  @ContentChildren(MDOptionGroup, { descendants: true }) optionGroups: QueryList<MDOptionGroup>;
-
-  /** Preferred connected positions for overlay. */
-  _positions: ConnectedPosition[] = [
-    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
-    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
-  ];
-
-  /** True when host is focused or panel is open. */
-  get focused(): boolean {
-    return this._focused || this._panelOpen;
-  }
-  private _focused = false;
-
-  /** Emits when any input that affects layout/state changes. */
-  readonly stateChanges = new Subject<void>();
-
-  /** Destroy notifier for subscriptions. */
-  protected readonly _destroy = new Subject<void>();
-
-  /** Panel visibility flag. */
-  private _panelOpen = false;
-
-  /** Computed overlay width (synced on viewport size changes). */
-  _overlayWidth: string | number;
-
-  /** Scroll strategy for overlay panel. */
-  _scrollStrategy: ScrollStrategy = this._overlay.scrollStrategies.reposition();
-
-  /** Selected options model. */
-  _selectionModel: SelectionModel<any>;
-
-  /** ControlValueAccessor change fn. */
-  _onChange: (value: any) => void = () => {};
-
-  /** ControlValueAccessor touched fn. */
-  _onTouched = () => {};
-
-  /** Keyboard manager for activeDescendant/roving focus/typeahead. */
-  _keyManager: ActiveDescendantKeyManager<MDOption>;
-
-  /** Stream of child option selection events, lazily wired. */
-  readonly optionSelectionChanges: Observable<MDOptionSelectionChange> = defer(() => {
-    const options = this.options;
-    if (options) {
-      return options.changes.pipe(
-        startWith(options),
-        switchMap(() => merge(...options.map((option) => option.onSelectionChange)))
-      );
-    }
-    return this._initialized.pipe(switchMap(() => this.optionSelectionChanges));
-  });
-
-  /** Id for the trigger value region (for aria). */
-  _valueId = this._idGenerator.getId('select-value-');
-
-  /** True when no selection is present. */
-  get empty(): boolean {
-    return !this._selectionModel || this._selectionModel.isEmpty();
-  }
-
-  constructor() {
-    if (this.ngControl) {
-      this.ngControl.valueAccessor = this;
-    }
-  }
-
-  /** Lifecycle: react to `@Input` changes (reserved for future use). */
-  ngOnChanges(changes: SimpleChanges): void {}
-
-  /** After content init: wire key manager, selection model synchronization. */
-  ngAfterContentInit(): void {
-    this._initialized.next();
-    this._initialized.complete();
-    this._initKeyManager();
-
-    this._selectionModel.changed.pipe(takeUntil(this._destroy)).subscribe((event) => {
-      event.added.forEach((option) => option.select());
-      event.removed.forEach((option) => option.deselect());
-    });
-
-    this.options.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {
-      this._resetOptions();
-      this._initializeSelection();
-    });
-  }
-
-  /** Initialize selection model and subscribe to viewport changes. */
-  ngOnInit() {
-    this._selectionModel = new SelectionModel<MDOption>(this.multiple);
-    this.stateChanges.next();
-
-    this._viewportRuler
-      .change()
-      .pipe(takeUntil(this._destroy))
-      .subscribe(() => {
-        if (this.panelOpen) {
-          this._overlayWidth = this._getOverlayWidth();
-          this._changeDetectorRef.detectChanges();
-        }
-      });
-  }
-
-  /** Cleanup listeners/subscriptions. */
-  ngOnDestroy(): void {
-    this._keyManager?.destroy();
-    this._destroy.next();
-    this._destroy.complete();
-  }
-
-  /** Public: whether the panel is currently open. */
-  get panelOpen(): boolean {
-    return this._panelOpen;
-  }
-
-  /** Public: current selection (single `MDOption` or array for multiple). */
-  get selected(): MDOption | MDOption[] {
-    return this.multiple ? this._selectionModel?.selected || [] : this._selectionModel?.selected[0];
-  }
-
-  /** Human-readable value for the trigger display. */
-  get triggerValue(): string {
-    if (this.empty) return '';
-    if (this._multiple) {
-      const selectedOptions = this._selectionModel.selected.map((option) => option.viewValue);
-      if (this._isRtl()) selectedOptions.reverse();
-      return selectedOptions.join(', ');
-    }
-    return this._selectionModel.selected[0].viewValue;
-  }
-
-  // ───────────────────────────── ControlValueAccessor ─────────────────────────────
-
-  writeValue(value: any): void {
-    this._assignValue(value);
-  }
-
-  registerOnChange(fn: (value: any) => void): void {
-    this._onChange = fn;
-  }
-
-  registerOnTouched(fn: () => {}): void {
-    this._onTouched = fn;
-  }
-
-  // ───────────────────────────── Opening / Closing ─────────────────────────────
-
-  /** Guard: can we open now (not disabled, have options, overlay ready)? */
-  protected _canOpen(): boolean {
-    return !this._panelOpen && !this.disabled && this.options?.length > 0 && !!this._overlayDir;
-  }
-
-  /** Open the panel and prepare keyboard/scroll state. */
-  open(): void {
-    if (!this._canOpen()) return;
-
-    this._cleanupDetach?.();
-    this._overlayWidth = this._getOverlayWidth();
-    this._panelOpen = true;
-
-    this._overlayDir.positionChange.pipe(take(1)).subscribe(() => {
-      this._changeDetectorRef.detectChanges();
-      this._positioningSettled();
-    });
-
-    this._overlayDir.attachOverlay();
-    this._keyManager.withHorizontalOrientation(null);
-    this._highlightCorrectOption();
-    this._changeDetectorRef.markForCheck();
-    this.stateChanges.next();
-
-    Promise.resolve().then(() => this.openedChange.emit(true));
-  }
-
-  /** Pick initial active item on open (first enabled or selected). */
-  private _highlightCorrectOption(): void {
-    if (!this._keyManager) return;
-
-    if (this.empty) {
-      let firstEnabledOptionIndex = -1;
-      for (let index = 0; index < this.options.length; index++) {
-        const option = this.options.get(index)!;
-        if (!option.disabled) {
-          firstEnabledOptionIndex = index;
-          break;
-        }
-      }
-      this._keyManager.setActiveItem(firstEnabledOptionIndex);
-    } else {
-      this._keyManager.setActiveItem(this._selectionModel.selected[0]);
-    }
-  }
-
-  /** After attach: ensure active option is scrolled into view. */
-  private _positioningSettled() {
-    this._scrollOptionIntoView(this._keyManager.activeItemIndex || 0);
-  }
-
-  /** Close panel, restore orientation, mark touched, and emit. */
-  close(): void {
-    if (!this._panelOpen) return;
-
-    this._panelOpen = false;
-    this._exitAndDetach();
-    this._keyManager.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');
-    this._changeDetectorRef.markForCheck();
-    this._onTouched();
-    this.stateChanges.next();
-
-    Promise.resolve().then(() => this.openedChange.emit(false));
-  }
-
-  /** Play exit animation (if available), then detach overlay. */
-  private _exitAndDetach() {
-    if (!this.panel) {
-      this._detachOverlay();
-      return;
-    }
-
-    this._cleanupDetach?.();
-    this._cleanupDetach = () => {
-      cleanupEvent();
-      clearTimeout(exitFallbackTimer);
-      this._cleanupDetach = undefined;
-    };
-
-    const panel: HTMLElement = this.panel.nativeElement;
-    const cleanupEvent = this._renderer.listen(panel, 'animationend', (event: AnimationEvent) => {
-      if (event.animationName === 'select-exit') {
-        this._cleanupDetach?.();
-        this._detachOverlay();
-      }
-    });
-
-    const exitFallbackTimer = setTimeout(() => {
-      this._cleanupDetach?.();
-      this._detachOverlay();
-    }, 200);
-
-    panel.classList.add('select-panel-exit');
-  }
-
-  /** Detach overlay and request change detection. */
-  private _detachOverlay() {
-    this._overlayDir.detachOverlay();
-    this._changeDetectorRef.markForCheck();
-  }
-
-  // ───────────────────────────── Keyboard handling ─────────────────────────────
-
-  /** RTL helper. */
-  _isRtl(): boolean {
-    return this._dir ? this._dir.value === 'rtl' : false;
-  }
-
-  _handleKeydown(event: KeyboardEvent): void {
-    if (this.disabled) return;
-    this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
-  }
-
-  /** When closed: open with Enter/Space; navigate single selection. */
-  private _handleClosedKeydown(event: KeyboardEvent): void {
-    const keyCode = event.keyCode;
-    const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW || keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW;
-    const isOpenKey = keyCode === ENTER || keyCode === SPACE;
-    const manager = this._keyManager;
-
-    if ((!manager.isTyping() && isOpenKey && !hasModifierKey(event)) || ((this.multiple || event.altKey) && isArrowKey)) {
-      event.preventDefault();
-      this.open();
-    } else if (!this.multiple) {
-      const previouslySelectedOption = this.selected;
-      manager.onKeydown(event);
-      const selectedOption = this.selected;
-      // Example: announce selection change to screen readers if needed.
-    }
-  }
-
-  /** When open: navigate/select, Ctrl+A (multiple), Alt+Arrow closes. */
-  private _handleOpenKeydown(event: KeyboardEvent): void {
-    const manager = this._keyManager;
-    const keyCode = event.keyCode;
-    const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
-    const isTyping = manager.isTyping();
-
-    if (isArrowKey && event.altKey) {
-      event.preventDefault();
-      this.close();
-    } else if (!isTyping && (keyCode === ENTER || keyCode === SPACE) && manager.activeItem && !hasModifierKey(event)) {
-      event.preventDefault();
-      manager.activeItem._selectViaInteraction();
-    } else if (!isTyping && this._multiple && keyCode === A && event.ctrlKey) {
-      event.preventDefault();
-      const hasDeselectedOptions = this.options.some((opt) => !opt.disabled && !opt.selected);
-      this.options.forEach((option) => {
-        if (!option.disabled) hasDeselectedOptions ? option.select() : option.deselect();
-      });
-    } else {
-      const previouslyFocusedIndex = manager.activeItemIndex;
-      manager.onKeydown(event);
-
-      if (this._multiple && isArrowKey && event.shiftKey && manager.activeItem && manager.activeItemIndex !== previouslyFocusedIndex) {
-        manager.activeItem._selectViaInteraction();
-      }
-    }
-  }
-
-  /** For overlay container keydown (ESC closes). */
-  protected _handleOverlayKeydown(event: KeyboardEvent): void {
-    if (event.keyCode === ESCAPE && !hasModifierKey(event)) {
-      event.preventDefault();
-      this.close();
-    }
-  }
-
-  // ───────────────────────────── Selection & value sync ─────────────────────────────
-
-  /** Assign value and synchronize selection from external model. */
-  private _assignValue(newValue: any | any[]): boolean {
-    if (newValue !== this._value || (this._multiple && Array.isArray(newValue))) {
-      if (this.options) {
-        this._setSelectionByValue(newValue);
-      }
-      this._value = newValue;
-      return true;
-    }
-    return false;
-  }
-
-  /** Compute overlay width from host bounding box. */
-  private _getOverlayWidth(): string | number {
-    return this._elementRef.nativeElement.getBoundingClientRect().width;
-  }
-
-  /** Update selection based on a (possibly array) value. */
-  private _setSelectionByValue(value: any | any[]): void {
-    this.options.forEach((option) => option.setInactiveStyles());
-    this._selectionModel.clear();
-
-    if (this.multiple && value) {
-      value.forEach((currentValue: any) => this._selectOptionByValue(currentValue));
-      this._sortValues();
-    } else {
-      const correspondingOption = this._selectOptionByValue(value);
-      if (correspondingOption) {
-        this._keyManager.updateActiveItem(correspondingOption);
-      } else if (!this.panelOpen) {
-        this._keyManager.updateActiveItem(-1);
-      }
-    }
-
-    this._changeDetectorRef.markForCheck();
-  }
-
-  /** Find option that matches value (using compareWith) and select it. */
-  private _selectOptionByValue(value: any): MDOption | undefined {
-    const correspondingOption = this.options.find((option: MDOption) => {
-      if (this._selectionModel.isSelected(option)) return false;
-      try {
-        return (option.value != null || this.canSelectNullableOptions) && this._compareWith(option.value, value);
-      } catch (error) {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) console.warn(error);
-        return false;
-      }
-    });
-
-    if (correspondingOption) this._selectionModel.select(correspondingOption);
-    return correspondingOption;
-  }
-
-  /** Move focus to host (useful after closing). */
-  focus(options?: FocusOptions): void {
-    this._elementRef.nativeElement.focus(options);
-  }
-
-  /** Default container click behavior: focus + open. */
-  onContainerClick() {
-    this.focus();
-    this.open();
-  }
-
-  /** Initialize selection from bound form control or internal value. */
-  private _initializeSelection(): void {
-    Promise.resolve().then(() => {
-      if (this.ngControl) {
-        this._value = this.ngControl.value;
-      }
-      this._setSelectionByValue(this._value);
-      this.stateChanges.next();
-    });
-  }
-
-  /** Skip disabled options while panel is closed (for key manager). */
-  private _skipPredicate = (option: MDOption) => {
-    if (this.panelOpen) return false;
-    return option.disabled;
-  };
-
-  /** Ensure a given option index is fully visible inside the panel. */
-  _scrollOptionIntoView(index: number): void {
-    const option = this.options.toArray()[index];
-    if (!option) return;
-
-    const panel: HTMLElement = this.panel.nativeElement;
-    const labelCount = _countGroupLabelsBeforeOption(index, this.options, this.optionGroups);
-    const element = option._getHostElement();
-
-    if (index === 0 && labelCount === 1) {
-      panel.scrollTop = 0;
-    } else {
-      panel.scrollTop = _getOptionScrollPosition(
-        element.offsetTop,
-        element.offsetHeight,
-        panel.scrollTop,
-        panel.offsetHeight
-      );
-    }
-  }
-
-  /** Wire option streams and handle user-driven selection/changes. */
-  private _resetOptions(): void {
-    const changedOrDestroyed = merge(this.options.changes, this._destroy);
-
-    this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed)).subscribe((event) => {
-      this._onSelect(event.source, event.isUserInput);
-      if (event.isUserInput && !this.multiple && this._panelOpen) {
-        this.close();
-        this.focus();
-      }
-    });
-
-    merge(...this.options.map((option) => option._stateChanges))
-      .pipe(takeUntil(changedOrDestroyed))
-      .subscribe(() => {
-        this._changeDetectorRef.detectChanges();
-        this.stateChanges.next();
-      });
-  }
-
-  /** Handle a single option's (de)selection and propagate changes. */
-  private _onSelect(option: MDOption, isUserInput: boolean): void {
-    const wasSelected = this._selectionModel.isSelected(option);
-
-    if (option.value == null && !this._multiple) {
-      option.deselect();
-      this._selectionModel.clear();
-
-      if (this.value != null) {
-        this._propagateChanges(option.value);
-      }
-    } else {
-      if (wasSelected !== option.selected) {
-        option.selected ? this._selectionModel.select(option) : this._selectionModel.deselect(option);
-      }
-
-      if (isUserInput) {
-        this._keyManager.setActiveItem(option);
-      }
-
-      if (this.multiple) {
-        this._sortValues();
-        if (isUserInput) this.focus();
-      }
-    }
-
-    if (wasSelected !== this._selectionModel.isSelected(option)) {
-      this._propagateChanges();
-    }
-
-    this.stateChanges.next();
-  }
-
-  /** Sort selected values using custom comparator or DOM order. */
-  private _sortValues() {
-    if (!this.multiple) return;
-
-    const options = this.options.toArray();
-    this._selectionModel.sort((a, b) => {
-      return this.sortComparator ? this.sortComparator(a, b, options) : options.indexOf(a) - options.indexOf(b);
-    });
-    this.stateChanges.next();
-  }
-
-  /** Build `SelectChange` payload. */
-  private _getChangeEvent(value: any) {
-    return new SelectChange(this, value);
-  }
-
-  /** Emit valueChange, call CVA onChange, emit selectionChange, mark for check. */
-  private _propagateChanges(fallbackValue?: any): void {
-    let valueToEmit: any;
-
-    if (this.multiple) {
-      valueToEmit = (this.selected as MDOption[]).map((option) => option.value);
-    } else {
-      valueToEmit = this.selected ? (this.selected as MDOption).value : fallbackValue;
-    }
-
-    this._value = valueToEmit;
-    this.valueChange.emit(valueToEmit);
-    this._onChange(valueToEmit);
-    this.selectionChange.emit(this._getChangeEvent(valueToEmit));
-    this._changeDetectorRef.markForCheck();
-  }
-
-  /** Initialize keyboard manager for navigation, typeahead, and tabOut. */
-  private _initKeyManager() {
-    this._keyManager = new ActiveDescendantKeyManager<MDOption>(this.options)
-      .withTypeAhead(200)
-      .withVerticalOrientation()
-      .withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr')
-      .withHomeAndEnd()
-      .withPageUpDown()
-      .withAllowedModifierKeys(['shiftKey'])
-      .skipPredicate(this._skipPredicate);
-
-    this._keyManager.tabOut.subscribe(() => {
-      if (this.panelOpen) {
-        if (!this.multiple && this._keyManager.activeItem) {
-          this._keyManager.activeItem._selectViaInteraction();
-        }
-        this.focus();
-        this.close();
-      }
-    });
-
-    this._keyManager.change.subscribe(() => {
-      if (this._panelOpen && this.panel) {
-        this._scrollOptionIntoView(this._keyManager.activeItemIndex || 0);
-      } else if (!this._panelOpen && !this.multiple && this._keyManager.activeItem) {
-        this._keyManager.activeItem._selectViaInteraction();
-      }
-    });
-  }
-
-  /** `aria-activedescendant` points to the active option when panel is open. */
-  _getAriaActiveDescendant(): string | null {
-    if (this.panelOpen && this._keyManager && this._keyManager.activeItem) {
-      return this._keyManager.activeItem.id;
-    }
-    return null;
-  }
-
-  /** Focus-in handler: set focused state (unless disabled). */
-  _onFocus() {
-    if (!this.disabled) {
-      this._focused = true;
-      this.stateChanges.next();
-    }
-  }
-
-  /** Focus-out handler: mark touched when closed; cancel typeahead. */
-  _onBlur() {
-    this._focused = false;
-    this._keyManager?.cancelTypeahead();
-
-    if (!this.disabled && !this.panelOpen) {
-      this._onTouched();
-      this._changeDetectorRef.markForCheck();
-      this.stateChanges.next();
-    }
-  }
-}
-
-/** Optional directive to project a custom trigger area for the select. */
-@Directive({
-  selector: 'select-trigger',
-  providers: [{ provide: MD_SELECT_TRIGGER, useExisting: MDSelectTrigger }],
-  standalone: false,
-})
-export class MDSelectTrigger {}