@funidata/ngx-fudis
Version:
Funidata Design System.
311 lines (310 loc) • 11.9 kB
TypeScript
import { ElementRef, EventEmitter, OnChanges, Signal, WritableSignal, AfterViewInit } from '@angular/core';
import { FudisIdService } from '../../../../../services/id/id.service';
import { FudisFocusService } from '../../../../../services/focus/focus.service';
import { FudisInputSize, FudisSelectVariant } from '../../../../../types/forms';
import { SelectDropdownComponent } from '../select-dropdown/select-dropdown.component';
import { FudisComponentChanges } from '../../../../../types/miscellaneous';
import { ControlComponentBaseDirective } from '../../../../../directives/form/control-component-base/control-component-base.directive';
import { SelectOptionsDirective } from '../select-options-directive/select-options.directive';
import { BaseSelectableComponent } from '../interfaces/base-selectable.interface';
import * as i0 from "@angular/core";
export declare class SelectBaseDirective extends ControlComponentBaseDirective implements OnChanges, AfterViewInit {
protected _document: Document;
constructor(_document: Document, _focusService: FudisFocusService, _idService: FudisIdService);
/**
* Reference to child DropdownComponent listing all options
*/
protected _dropdownRef: SelectDropdownComponent;
/**
* Reference to autocomplete element, used to focus to it
*/
protected _selectIconsRef: ElementRef<HTMLDivElement>;
/**
* To lazy load options on first open
*/
protected _selectOptionsDirective: SelectOptionsDirective;
/**
* Reference to child DropdownComponent listing all options
*/
private _selectRef;
/**
* Set dropdown size (should follow the given input element size)
*/
size: FudisInputSize | 'xs';
/**
* Placeholder text for the dropdown input when no selection has been made
*/
placeholder: string;
/**
* Determine if Select has autocompletion filter for user typed text When set to:
*
* - Dropdown: default, normal select dropdown
* - AutocompleteDropdown": dropdown with autocomplete input field
* - AutocompleteType: autocomplete but user must type 3 letters before any results are displayed
*/
variant: FudisSelectVariant;
/**
* Enable / disable button, which clears user selection when there is a selected value
*/
selectionClearButton: boolean;
/**
* By default Autocomplete filters options loaded to the DOM based on user input. When this is set
* to 'false', filtering is disabled and all options available in DOM are displayed regardless of
* user's input. Disabling can be useful, if application wants to implement their own filtering
* logic. E. g. get user's input, run a backend search and create list of options for the Select.
*/
autocompleteFilter: boolean;
/**
* For Autocomplete variants optional helper text displayed as first item in opened dropdown list.
* By default uses internal Fudis translation, which can be disabled by setting this property to
* boolean 'false'
*/
autocompleteHelpText: string | false;
/**
* By default, Autocomplete variant will display "No results found" text when there are 0 options
* matching. When combined with 'autocompleteFilter' false, application can set their own
* 'Fetching options...' etc. text while their own filtering is in progress.
*/
autocompleteNoResultsText: string | null;
/**
* Value output event on selection change
*/
selectionUpdate: EventEmitter<any | null>;
/**
* Output for number of visible options after filtering results
*/
visibleOptionsUpdate: EventEmitter<number>;
/**
* Output for number of visible options after filtering results
*/
filterTextUpdate: EventEmitter<string | null>;
/**
* CSS selector for querying focus states
*/
focusSelector: string;
/**
* For setting dropdown open / closed
*/
protected _dropdownOpen: WritableSignal<boolean>;
/**
* Signal to Select & MultiselectOption for listening autocomplete filter text changes
*/
protected _autocompleteFilterText: WritableSignal<string>;
/**
* Lazy loading check for expanding content, unless component control gets values from
* application, then set to true automatically, so that comparing available options match given
* control value.
*/
protected _optionsLoadedOnce: boolean;
/**
* Used when filtering autocomplete results to check if 'No results found' text is visible
*/
protected _visibleOptions: string[];
/**
* Status of input focus
*/
protected _inputFocused: boolean;
/**
* Used to handle exceptions when mouse click event fires before / after focus event or user has
* clicked autocomplete clear button
*/
protected _preventDropdownReopen: boolean | undefined;
/**
* Focus try counter
*/
private _focusTryCounter;
/**
* Array to store visible options while options are loading.
*/
private _visibleOptionsTemp;
/**
* Store latest option loaded
*/
private _latestVisibleOption;
/**
* Currently focused option
*/
private _focusedOption;
/**
* If clear button is focused
*/
private _clearButtonFocused;
/**
* If click event happens either in input field or in the options
*/
private _mouseDownInsideComponent;
/**
* If click event's target is Select's input field
*/
private _mouseUpOnInput;
/**
* Used to not update visible options to HTML template before some delay has passed in case new
* options are still loading
*/
private _optionLoadInterval;
/**
* If click event originated from Icon used inside input field
*/
private _clickFromIcon;
/**
* Keyboard button pressed down
*/
private _keyDown;
/**
* Subscription for handling the valueChanges observable
*/
private _subscription;
/**
* Used to pass info, that Clear Button was clicked
*/
protected _clearButtonClickTrigger: WritableSignal<boolean>;
ngOnChanges(changes: FudisComponentChanges<BaseSelectableComponent>): void;
/**
* @returns Signal value of autocomplete filter text
*/
getAutocompleteFilterText(): Signal<string>;
/**
* Open dropdown
*/
openDropdown(): void;
/**
* Close dropdown
*
* @param focusToInput: When dropdown closes, focus or not to the input
* @param preventDropdownReopen: For cases, when closing command comes from outside eg. clicking
* an option in the dropdownlist. There's no need to reopen the dropdown when focusing back to
* the input, which usually triggers opening the dropdown.
*/
closeDropdown(focusToInput?: boolean, preventDropdownReopen?: boolean): void;
/**
* Each option sends information to parent if they are visible or not
*
* @param value Option value
* @param visible Is this option visible or not
*/
setOptionVisibility(value: string, visible: boolean): void;
/**
* Add or remove currently focused option. Called from SelectOptionBase.
*/
setFocusedOption(id: string, type: 'add' | 'remove'): void;
/**
* Promise which determines, if some of the components used in this Select has focus or not.
*
* @param event FocusEvent
* @returns
*/
componentFocused(event: FocusEvent): Promise<boolean>;
/**
* When Clear button is clicked
*/
protected _clearButtonClick(): void;
/**
* Set control value to null Control value should reset even when user input does not match any
* option value (i.e. control value is null), so that dropdown shows options correctly
*/
protected _setControlNull(): void;
/**
* To handle input focus
*/
protected _selectInputFocus(event: FocusEvent): void;
/**
* To handle input field blur events
*
* @param event FocusEvent
*/
protected _inputBlur(event: FocusEvent): void;
/**
* To handle click events for input
*/
protected _clickInput(): void;
/**
* Register pressed key inside input field. Used to check that both key down and key up originated
* from same source.
*/
protected _inputKeyDown(event: KeyboardEvent): void;
/**
* Handle keypress for dropdown select
*
* @param event KeyboardEvent
* @param focusSelector CSS selector to focus to on ArrowDown event
*/
protected _inputKeyUp(event: KeyboardEvent): void;
/**
* Generate html id for parent FudisSelect
*/
protected _setParentId(type: 'multiselect' | 'select'): void;
/**
* Toggle dropdown
*/
protected _toggleDropdown(): void;
/**
* Resolve a promise after delay if there hasn't been new options
*
* @returns Boolean
*/
private _optionsLoadDelay;
/**
* Set Clear button's focus state to false
*/
protected _setClearButtonFocusFalse(): void;
/**
* Set focus state of Clear Button and determine if Dropdown should be closed when this function
* is called
*
* @param event FocusEvent
* @param state
*/
protected _setClearButtonFocusState(event: FocusEvent, state: boolean): void;
/**
* Update input filter text
*
* @param text String to set as filter text
* @param nullCheck True by default, check if control should be set as null
*/
setAutocompleteFilterText(text: string, nullCheck?: boolean): void;
/**
* Checks if currently typed filter text is not same as control label value
*
* @param text Filter text value emitted from autocomplete
*/
protected _checkIfAutocompleteValueNull(text: string): void;
/**
* To focus on first option when dropdown opens
*
* @param cssfocusSelector CSS class to focus to
*/
protected _focusToFirstOption(clickFirstOption?: boolean): void;
/**
* When blurring away from Dropdown, check if this Select has focus
*/
protected _dropdownBlur(event: FocusEvent): void;
/**
* Browser focus logic differs. E. g. Firefox tries to focus to Dropdown menu wrapper. This
* function determines that if it should focus to first option or back to input field.
*/
protected _dropdownFocus(event: FocusEvent): void;
/**
* Focus to input field
*/
protected _focusToSelectInput(): void;
/**
* Function declaration overridden and implemented by Select and Multiselect
*/
protected _updateComponentStateFromControlValue(): void;
/**
* When pressing keyboard Esc, focus to Select input and close dropdown
*
* @param event
*/
private _handleEscapePress;
/**
* When user clicks, set status whether click is inside or outside the Select element
*
* @param targetElement
*/
private _handleWindowClick;
private _handleMouseDown;
private _handleMouseUp;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectBaseDirective, "[fudisSelectBase]", never, { "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selectionClearButton": { "alias": "selectionClearButton"; "required": false; }; "autocompleteFilter": { "alias": "autocompleteFilter"; "required": false; }; "autocompleteHelpText": { "alias": "autocompleteHelpText"; "required": false; }; "autocompleteNoResultsText": { "alias": "autocompleteNoResultsText"; "required": false; }; }, { "selectionUpdate": "selectionUpdate"; "visibleOptionsUpdate": "visibleOptionsUpdate"; "filterTextUpdate": "filterTextUpdate"; }, ["_selectOptionsDirective"], never, false, never>;
}