/** * Copyright (c) 2018 Bithost GmbH 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 { ViewportRuler } from '@angular/cdk/scrolling'; import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core'; import { ControlValueAccessor, FormControl } from '@angular/forms'; import { MatOption } from '@angular/material/core'; import { MatFormField } from '@angular/material/form-field'; import { MatSelect } from '@angular/material/select'; import { BehaviorSubject, Observable } from 'rxjs'; import { MatSelectSearchClearDirective } from './mat-select-search-clear.directive'; import { MatSelectSearchOptions } from './default-options'; import { MatSelectNoEntriesFoundDirective } from './mat-select-no-entries-found.directive'; import { MatSelectSearchIconDirective } from './mat-select-search-icon.directive'; import * as i0 from "@angular/core"; /** * Component providing an input field for searching MatSelect options. * * Example usage: * * interface Bank { * id: string; * name: string; * } * * @Component({ * selector: 'my-app-data-selection', * template: ` * * * * * * * {{bank.name}} * * * * ` * }) * export class DataSelectionComponent implements OnInit, OnDestroy { * * // control for the selected bank * public bankCtrl: FormControl = new FormControl(); * // control for the MatSelect filter keyword * public bankFilterCtrl: FormControl = new FormControl(); * * // list of banks * private banks: Bank[] = [{name: 'Bank A', id: 'A'}, {name: 'Bank B', id: 'B'}, {name: 'Bank C', id: 'C'}]; * // list of banks filtered by search keyword * public filteredBanks: ReplaySubject = new ReplaySubject(1); * * // Subject that emits when the component has been destroyed. * private _onDestroy = new Subject(); * * * ngOnInit() { * // load the initial bank list * this.filteredBanks.next(this.banks.slice()); * // listen for search field value changes * this.bankFilterCtrl.valueChanges * .pipe(takeUntil(this._onDestroy)) * .subscribe(() => { * this.filterBanks(); * }); * } * * ngOnDestroy() { * this._onDestroy.next(); * this._onDestroy.complete(); * } * * private filterBanks() { * if (!this.banks) { * return; * } * * // get the search keyword * let search = this.bankFilterCtrl.value; * if (!search) { * this.filteredBanks.next(this.banks.slice()); * return; * } else { * search = search.toLowerCase(); * } * * // filter the banks * this.filteredBanks.next( * this.banks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1) * ); * } * } */ export declare class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValueAccessor { matSelect: MatSelect; changeDetectorRef: ChangeDetectorRef; private _viewportRuler; matOption: MatOption; matFormField: MatFormField; /** Label of the search placeholder */ placeholderLabel: string; /** Type of the search input field */ type: string; /** Font-based icon used for displaying Close-Icon */ closeIcon: string; /** SVG-based icon used for displaying Close-Icon. If set, closeIcon is overridden */ closeSvgIcon?: string; /** Label to be shown when no entries are found. Set to null if no message should be shown. */ noEntriesFoundLabel: string; /** * Whether the search field should be cleared after the dropdown menu is closed. * Useful for server-side filtering. See [#3](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/3) */ clearSearchInput: boolean; /** Whether to show the search-in-progress indicator */ searching: boolean; /** Disables initial focusing of the input field */ disableInitialFocus: boolean; /** Enable clear input on escape pressed */ enableClearOnEscapePressed: boolean; /** * Prevents home / end key being propagated to mat-select, * allowing to move the cursor within the search input instead of navigating the options */ preventHomeEndKeyPropagation: boolean; /** Disables scrolling to active options when option list changes. Useful for server-side search */ disableScrollToActiveOnOptionsChanged: boolean; /** Adds 508 screen reader support for search box */ ariaLabel: string; /** Whether to show Select All Checkbox (for mat-select[multi=true]) */ showToggleAllCheckbox: boolean; /** Select all checkbox checked state */ toggleAllCheckboxChecked: boolean; /** select all checkbox indeterminate state */ toggleAllCheckboxIndeterminate: boolean; /** Display a message in a tooltip on the toggle-all checkbox */ toggleAllCheckboxTooltipMessage: string; /** Define the position of the tooltip on the toggle-all checkbox. */ toggleAllCheckboxTooltipPosition: 'left' | 'right' | 'above' | 'below' | 'before' | 'after'; /** Show/Hide the search clear button of the search input */ hideClearSearchButton: boolean; /** * Always restore selected options on selectionChange for mode multi (e.g. for lazy loading/infinity scrolling). * Defaults to false, so selected options are only restored while filtering is active. */ alwaysRestoreSelectedOptionsMulti: boolean; /** * Recreate array of selected values for multi-selects. * * This is useful if the selected values are stored in an immutable data structure. */ recreateValuesArray: boolean; /** Output emitter to send to parent component with the toggle all boolean */ toggleAll: EventEmitter; /** Reference to the search input field */ searchSelectInput: ElementRef; /** Reference to the search input field */ innerSelectSearch: ElementRef; /** Reference to custom search input clear icon */ clearIcon: MatSelectSearchClearDirective; /** Reference to custom no entries found element */ noEntriesFound: MatSelectNoEntriesFoundDirective; /** Reference to custom search icon */ searchIcon: MatSelectSearchIconDirective; /** Current search value */ get value(): string; private _lastExternalInputValue?; onTouched: () => void; /** Reference to the MatSelect options */ set _options(_options: QueryList); get _options(): QueryList; _options$: BehaviorSubject>; private optionsList$; private optionsLength$; /** Previously selected values when using */ private previousSelectedValues; _formControl: FormControl; /** Whether to show the no entries found message */ _showNoEntriesFound$: Observable; /** Subject that emits when the component has been destroyed. */ private _onDestroy; /** Reference to active descendant for ARIA Support. */ private activeDescendant; constructor(matSelect: MatSelect, changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, matOption: MatOption, matFormField: MatFormField, defaultOptions?: MatSelectSearchOptions); private applyDefaultOptions; ngOnInit(): void; _emitSelectAllBooleanToParent(state: boolean): void; ngOnDestroy(): void; _isToggleAllCheckboxVisible(): boolean; /** * Handles the key down event with MatSelect. * Allows e.g. selecting with enter key, navigation with arrow keys, etc. * @param event */ _handleKeydown(event: KeyboardEvent): void; /** * Handles the key up event with MatSelect. * Allows e.g. the announcing of the currently activeDescendant by screen readers. */ _handleKeyup(event: KeyboardEvent): void; writeValue(value: string): void; onBlur(): void; registerOnChange(fn: (value: string) => void): void; registerOnTouched(fn: () => void): void; /** * Focuses the search input field */ _focus(): void; /** * Resets the current search value * @param focus whether to focus after resetting */ _reset(focus?: boolean): void; /** * Initializes handling * Note: to improve this code, mat-select should be extended to allow disabling resetting the selection while filtering. */ private initMultipleHandling; /** * Set the width of the innerSelectSearch to fit even custom scrollbars * And support all Operating Systems */ updateInputWidth(): void; /** * Determine the offset to length that can be caused by the optional matOption used as a search input. */ private getOptionsLengthOffset; private unselectActiveDescendant; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }