@asoftwareworld/form-builder-pro
Version:
ASW Form Builder Pro helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same b
140 lines (139 loc) • 8.28 kB
TypeScript
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 { AswSelectNoEntriesFoundDirective, AswSelectSearchClearDirective } from '@asoftwareworld/form-builder-pro/common';
import { BehaviorSubject, Observable } from 'rxjs';
import { AswSelectSearchOptions } from './select-search-options';
import * as i0 from "@angular/core";
export declare class AswSelectSearch 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 or not the search field should be cleared after the dropdown menu is closed.
*/
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;
/** Output emitter to send to parent component with the toggle all boolean */
toggleAll: EventEmitter<boolean>;
/** Reference to the search input field */
searchSelectInput?: ElementRef;
/** Reference to the search input field */
innerSelectSearch?: ElementRef;
/** Reference to custom search input clear icon */
clearIcon?: AswSelectSearchClearDirective;
/** Reference to custom no entries found element */
noEntriesFound?: AswSelectNoEntriesFoundDirective;
/** Current search value */
get value(): string | null;
private _lastExternalInputValue?;
onTouched: Function;
/** Reference to the MatSelect options */
set _options(_options: QueryList<MatOption>);
get _options(): QueryList<MatOption>;
_options$: BehaviorSubject<QueryList<MatOption>>;
private optionsList$;
private optionsLength$;
/** Previously selected values when using <mat-select [multiple]="true">*/
private previousSelectedValues;
_formControl: FormControl<string | null>;
/** whether to show the no entries found message */
_showNoEntriesFound$: Observable<boolean | '' | null>;
/** 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: AswSelectSearchOptions);
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 | null) => void): void;
registerOnTouched(fn: Function): 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 <mat-select [multiple]="true">
* 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 Operation 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<AswSelectSearch, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<AswSelectSearch, "asw-select-search", never, { "placeholderLabel": { "alias": "placeholderLabel"; "required": false; }; "type": { "alias": "type"; "required": false; }; "closeIcon": { "alias": "closeIcon"; "required": false; }; "closeSvgIcon": { "alias": "closeSvgIcon"; "required": false; }; "noEntriesFoundLabel": { "alias": "noEntriesFoundLabel"; "required": false; }; "clearSearchInput": { "alias": "clearSearchInput"; "required": false; }; "searching": { "alias": "searching"; "required": false; }; "disableInitialFocus": { "alias": "disableInitialFocus"; "required": false; }; "enableClearOnEscapePressed": { "alias": "enableClearOnEscapePressed"; "required": false; }; "preventHomeEndKeyPropagation": { "alias": "preventHomeEndKeyPropagation"; "required": false; }; "disableScrollToActiveOnOptionsChanged": { "alias": "disableScrollToActiveOnOptionsChanged"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "showToggleAllCheckbox": { "alias": "showToggleAllCheckbox"; "required": false; }; "toggleAllCheckboxChecked": { "alias": "toggleAllCheckboxChecked"; "required": false; }; "toggleAllCheckboxIndeterminate": { "alias": "toggleAllCheckboxIndeterminate"; "required": false; }; "toggleAllCheckboxTooltipMessage": { "alias": "toggleAllCheckboxTooltipMessage"; "required": false; }; "toggleAllCheckboxTooltipPosition": { "alias": "toggleAllCheckboxTooltipPosition"; "required": false; }; "hideClearSearchButton": { "alias": "hideClearSearchButton"; "required": false; }; "alwaysRestoreSelectedOptionsMulti": { "alias": "alwaysRestoreSelectedOptionsMulti"; "required": false; }; }, { "toggleAll": "toggleAll"; }, ["clearIcon", "noEntriesFound"], ["[aswSelectSearchClear]", ".mat-select-search-custom-header-content", "[aswSelectNoEntriesFound]"], false, never>;
}