| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398 |
- /**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
- import { ActiveDescendantKeyManager, LiveAnnouncer } from '@angular/cdk/a11y';
- import { Directionality } from '@angular/cdk/bidi';
- import { SelectionModel } from '@angular/cdk/collections';
- import { CdkConnectedOverlay, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
- import { ViewportRuler } from '@angular/cdk/scrolling';
- import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
- import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
- import { CanDisable, CanDisableCtor, CanDisableRipple, CanDisableRippleCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, MatOptgroup, MatOption, MatOptionSelectionChange } from '@angular/material/core';
- import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
- import { Observable, Subject } from 'rxjs';
- /**
- * The following style constants are necessary to save here in order
- * to properly calculate the alignment of the selected option over
- * the trigger element.
- */
- /** The max height of the select's overlay panel */
- export declare const SELECT_PANEL_MAX_HEIGHT = 256;
- /** The panel's padding on the x-axis */
- export declare const SELECT_PANEL_PADDING_X = 16;
- /** The panel's x axis padding if it is indented (e.g. there is an option group). */
- export declare const SELECT_PANEL_INDENT_PADDING_X: number;
- /** The height of the select items in `em` units. */
- export declare const SELECT_ITEM_HEIGHT_EM = 3;
- /**
- * Distance between the panel edge and the option text in
- * multi-selection mode.
- *
- * Calculated as:
- * (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40
- * The padding is multiplied by 1.5 because the checkbox's margin is half the padding.
- * The checkbox width is 16px.
- */
- export declare const SELECT_MULTIPLE_PANEL_PADDING_X: number;
- /**
- * The select panel will only "fit" inside the viewport if it is positioned at
- * this value or more away from the viewport boundary.
- */
- export declare const SELECT_PANEL_VIEWPORT_PADDING = 8;
- /** Injection token that determines the scroll handling while a select is open. */
- export declare const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
- /** @docs-private */
- export declare function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
- /** @docs-private */
- export declare const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
- provide: InjectionToken<() => ScrollStrategy>;
- deps: (typeof Overlay)[];
- useFactory: typeof MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY;
- };
- /** Change event object that is emitted when the select value has changed. */
- export declare class MatSelectChange {
- /** Reference to the select that emitted the change event. */
- source: MatSelect;
- /** Current value of the select that emitted the event. */
- value: any;
- constructor(
- /** Reference to the select that emitted the change event. */
- source: MatSelect,
- /** Current value of the select that emitted the event. */
- value: any);
- }
- /** @docs-private */
- declare class MatSelectBase {
- _elementRef: ElementRef;
- _defaultErrorStateMatcher: ErrorStateMatcher;
- _parentForm: NgForm;
- _parentFormGroup: FormGroupDirective;
- ngControl: NgControl;
- constructor(_elementRef: ElementRef, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
- }
- declare const _MatSelectMixinBase: CanDisableCtor & HasTabIndexCtor & CanDisableRippleCtor & CanUpdateErrorStateCtor & typeof MatSelectBase;
- /**
- * Allows the user to customize the trigger that is displayed when the select has a value.
- */
- export declare class MatSelectTrigger {
- }
- export declare class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, MatFormFieldControl<any>, CanUpdateErrorState, CanDisableRipple {
- private _viewportRuler;
- private _changeDetectorRef;
- private _ngZone;
- private _dir;
- private _parentFormField;
- ngControl: NgControl;
- /**
- * @deprecated _liveAnnouncer to be turned into a required parameter.
- * @breaking-change 8.0.0
- */
- private _liveAnnouncer?;
- private _scrollStrategyFactory;
- /** Whether or not the overlay panel is open. */
- private _panelOpen;
- /** Whether filling out the select is required in the form. */
- private _required;
- /** The scroll position of the overlay panel, calculated to center the selected option. */
- private _scrollTop;
- /** The placeholder displayed in the trigger of the select. */
- private _placeholder;
- /** Whether the component is in multiple selection mode. */
- private _multiple;
- /** Comparison function to specify which option is displayed. Defaults to object equality. */
- private _compareWith;
- /** Unique id for this input. */
- private _uid;
- /** Emits whenever the component is destroyed. */
- private readonly _destroy;
- /** The last measured value for the trigger's client bounding rect. */
- _triggerRect: ClientRect;
- /** The aria-describedby attribute on the select for improved a11y. */
- _ariaDescribedby: string;
- /** The cached font-size of the trigger element. */
- _triggerFontSize: number;
- /** Deals with the selection logic. */
- _selectionModel: SelectionModel<MatOption>;
- /** Manages keyboard events for options in the panel. */
- _keyManager: ActiveDescendantKeyManager<MatOption>;
- /** `View -> model callback called when value changes` */
- _onChange: (value: any) => void;
- /** `View -> model callback called when select has been touched` */
- _onTouched: () => void;
- /** The IDs of child options to be passed to the aria-owns attribute. */
- _optionIds: string;
- /** The value of the select panel's transform-origin property. */
- _transformOrigin: string;
- /** Emits when the panel element is finished transforming in. */
- _panelDoneAnimatingStream: Subject<string>;
- /** Strategy that will be used to handle scrolling while the select panel is open. */
- _scrollStrategy: ScrollStrategy;
- /**
- * The y-offset of the overlay panel in relation to the trigger's top start corner.
- * This must be adjusted to align the selected option text over the trigger text.
- * when the panel opens. Will change based on the y-position of the selected option.
- */
- _offsetY: number;
- /**
- * This position config ensures that the top "start" corner of the overlay
- * is aligned with with the top "start" of the origin by default (overlapping
- * the trigger completely). If the panel cannot fit below the trigger, it
- * will fall back to a position above the trigger.
- */
- _positions: {
- originX: string;
- originY: string;
- overlayX: string;
- overlayY: string;
- }[];
- /** Whether the component is disabling centering of the active option over the trigger. */
- private _disableOptionCentering;
- /** Whether the select is focused. */
- /**
- * @deprecated Setter to be removed as this property is intended to be readonly.
- * @breaking-change 8.0.0
- */
- focused: boolean;
- private _focused;
- /** A name for this control that can be used by `mat-form-field`. */
- controlType: string;
- /** Trigger that opens the select. */
- trigger: ElementRef;
- /** Panel containing the select options. */
- panel: ElementRef;
- /** Overlay pane containing the options. */
- overlayDir: CdkConnectedOverlay;
- /** All of the defined select options. */
- options: QueryList<MatOption>;
- /** All of the defined groups of options. */
- optionGroups: QueryList<MatOptgroup>;
- /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
- panelClass: string | string[] | Set<string> | {
- [key: string]: any;
- };
- /** User-supplied override of the trigger element. */
- customTrigger: MatSelectTrigger;
- /** Placeholder to be shown if no value has been selected. */
- placeholder: string;
- /** Whether the component is required. */
- required: boolean;
- /** Whether the user should be allowed to select multiple options. */
- multiple: boolean;
- /** Whether to center the active option over the trigger. */
- disableOptionCentering: boolean;
- /**
- * Function to compare the option values with the selected values. The first argument
- * is a value from an option. The second is a value from the selection. A boolean
- * should be returned.
- */
- compareWith: (o1: any, o2: any) => boolean;
- /** Value of the select control. */
- value: any;
- private _value;
- /** Aria label of the select. If not specified, the placeholder will be used as label. */
- ariaLabel: string;
- /** Input that can be used to specify the `aria-labelledby` attribute. */
- ariaLabelledby: string;
- /** Object used to control when error messages are shown. */
- errorStateMatcher: ErrorStateMatcher;
- /**
- * Function used to sort the values in a select in multiple mode.
- * Follows the same logic as `Array.prototype.sort`.
- */
- sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number;
- /** Unique id of the element. */
- id: string;
- private _id;
- /** Combined stream of all of the child options' change events. */
- readonly optionSelectionChanges: Observable<MatOptionSelectionChange>;
- /** Event emitted when the select panel has been toggled. */
- readonly openedChange: EventEmitter<boolean>;
- /** Event emitted when the select has been opened. */
- readonly _openedStream: Observable<void>;
- /** Event emitted when the select has been closed. */
- readonly _closedStream: Observable<void>;
- /** Event emitted when the selected value has been changed by the user. */
- readonly selectionChange: EventEmitter<MatSelectChange>;
- /**
- * Event that emits whenever the raw value of the select changes. This is here primarily
- * to facilitate the two-way binding for the `value` input.
- * @docs-private
- */
- readonly valueChange: EventEmitter<any>;
- constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any,
- /**
- * @deprecated _liveAnnouncer to be turned into a required parameter.
- * @breaking-change 8.0.0
- */
- _liveAnnouncer?: LiveAnnouncer | undefined);
- ngOnInit(): void;
- ngAfterContentInit(): void;
- ngDoCheck(): void;
- ngOnChanges(changes: SimpleChanges): void;
- ngOnDestroy(): void;
- /** Toggles the overlay panel open or closed. */
- toggle(): void;
- /** Opens the overlay panel. */
- open(): void;
- /** Closes the overlay panel and focuses the host element. */
- close(): void;
- /**
- * Sets the select's value. Part of the ControlValueAccessor interface
- * required to integrate with Angular's core forms API.
- *
- * @param value New value to be written to the model.
- */
- writeValue(value: any): void;
- /**
- * Saves a callback function to be invoked when the select's value
- * changes from user input. Part of the ControlValueAccessor interface
- * required to integrate with Angular's core forms API.
- *
- * @param fn Callback to be triggered when the value changes.
- */
- registerOnChange(fn: (value: any) => void): void;
- /**
- * Saves a callback function to be invoked when the select is blurred
- * by the user. Part of the ControlValueAccessor interface required
- * to integrate with Angular's core forms API.
- *
- * @param fn Callback to be triggered when the component has been touched.
- */
- registerOnTouched(fn: () => {}): void;
- /**
- * Disables the select. Part of the ControlValueAccessor interface required
- * to integrate with Angular's core forms API.
- *
- * @param isDisabled Sets whether the component is disabled.
- */
- setDisabledState(isDisabled: boolean): void;
- /** Whether or not the overlay panel is open. */
- readonly panelOpen: boolean;
- /** The currently selected option. */
- readonly selected: MatOption | MatOption[];
- /** The value displayed in the trigger. */
- readonly triggerValue: string;
- /** Whether the element is in RTL mode. */
- _isRtl(): boolean;
- /** Handles all keydown events on the select. */
- _handleKeydown(event: KeyboardEvent): void;
- /** Handles keyboard events while the select is closed. */
- private _handleClosedKeydown;
- /** Handles keyboard events when the selected is open. */
- private _handleOpenKeydown;
- _onFocus(): void;
- /**
- * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
- * "blur" to the panel when it opens, causing a false positive.
- */
- _onBlur(): void;
- /**
- * Callback that is invoked when the overlay panel has been attached.
- */
- _onAttached(): void;
- /** Returns the theme to be used on the panel. */
- _getPanelTheme(): string;
- /** Whether the select has a value. */
- readonly empty: boolean;
- private _initializeSelection;
- /**
- * Sets the selected option based on a value. If no option can be
- * found with the designated value, the select trigger is cleared.
- */
- private _setSelectionByValue;
- /**
- * Finds and selects and option based on its value.
- * @returns Option that has the corresponding value.
- */
- private _selectValue;
- /** Sets up a key manager to listen to keyboard events on the overlay panel. */
- private _initKeyManager;
- /** Drops current option subscriptions and IDs and resets from scratch. */
- private _resetOptions;
- /** Invoked when an option is clicked. */
- private _onSelect;
- /** Sorts the selected values in the selected based on their order in the panel. */
- private _sortValues;
- /** Emits change event to set the model value. */
- private _propagateChanges;
- /** Records option IDs to pass to the aria-owns property. */
- private _setOptionIds;
- /**
- * Highlights the selected item. If no option is selected, it will highlight
- * the first item instead.
- */
- private _highlightCorrectOption;
- /** Scrolls the active option into view. */
- private _scrollActiveOptionIntoView;
- /** Focuses the select element. */
- focus(options?: FocusOptions): void;
- /** Gets the index of the provided option in the option list. */
- private _getOptionIndex;
- /** Calculates the scroll position and x- and y-offsets of the overlay panel. */
- private _calculateOverlayPosition;
- /**
- * Calculates the scroll position of the select's overlay panel.
- *
- * Attempts to center the selected option in the panel. If the option is
- * too high or too low in the panel to be scrolled to the center, it clamps the
- * scroll position to the min or max scroll positions respectively.
- */
- _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number, maxScroll: number): number;
- /** Returns the aria-label of the select component. */
- _getAriaLabel(): string | null;
- /** Returns the aria-labelledby of the select component. */
- _getAriaLabelledby(): string | null;
- /** Determines the `aria-activedescendant` to be set on the host. */
- _getAriaActiveDescendant(): string | null;
- /**
- * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
- * This must be adjusted to align the selected option text over the trigger text when
- * the panel opens. Will change based on LTR or RTL text direction. Note that the offset
- * can't be calculated until the panel has been attached, because we need to know the
- * content width in order to constrain the panel within the viewport.
- */
- private _calculateOverlayOffsetX;
- /**
- * Calculates the y-offset of the select's overlay panel in relation to the
- * top start corner of the trigger. It has to be adjusted in order for the
- * selected option to be aligned over the trigger when the panel opens.
- */
- private _calculateOverlayOffsetY;
- /**
- * Checks that the attempted overlay position will fit within the viewport.
- * If it will not fit, tries to adjust the scroll position and the associated
- * y-offset so the panel can open fully on-screen. If it still won't fit,
- * sets the offset back to 0 to allow the fallback position to take over.
- */
- private _checkOverlayWithinViewport;
- /** Adjusts the overlay panel up to fit in the viewport. */
- private _adjustPanelUp;
- /** Adjusts the overlay panel down to fit in the viewport. */
- private _adjustPanelDown;
- /** Sets the transform origin point based on the selected option. */
- private _getOriginBasedOnOption;
- /** Calculates the amount of items in the select. This includes options and group labels. */
- private _getItemCount;
- /** Calculates the height of the select's options. */
- private _getItemHeight;
- /**
- * Implemented as part of MatFormFieldControl.
- * @docs-private
- */
- setDescribedByIds(ids: string[]): void;
- /**
- * Implemented as part of MatFormFieldControl.
- * @docs-private
- */
- onContainerClick(): void;
- /**
- * Implemented as part of MatFormFieldControl.
- * @docs-private
- */
- readonly shouldLabelFloat: boolean;
- }
- export {};
|