ngx-select-dropdown
Version:
A angular(4+) select dropdown for single select or multiselct module.
213 lines (212 loc) • 6.43 kB
TypeScript
import { SelectDropDownService } from "./ngx-select-dropdown.service";
import { OnInit, EventEmitter, OnChanges, SimpleChanges, ElementRef, QueryList, AfterViewInit, ChangeDetectorRef } from "@angular/core";
import * as i0 from "@angular/core";
export declare class NgxSelectDropdownComponent implements OnInit, OnChanges, AfterViewInit {
private cdref;
_elementRef: ElementRef;
private dropdownService;
/** value of the dropdown */
_value: any;
/**
* Get the required inputs
*/
options: any;
/**
* configuration options
*/
config: any;
/**
* Whether multiple selection or single selection allowed
*/
multiple: boolean;
/**
* Value
*/
disabled: boolean;
/** unique identifier to uniquely identify particular instance */
instanceId: any;
/**
* change event when value changes to provide user to handle things in change event
*/
change: EventEmitter<any>;
/**
* The search text change event emitter emitted when user type in the search input
*/
searchChange: EventEmitter<any>;
/**
* Event emitted when dropdown is open.
*/
open: EventEmitter<any>;
/**
* Event emitted when dropdown is open.
*/
close: EventEmitter<any>;
/**
* Toogle the dropdown list
*/
toggleDropdown: boolean;
/**
* Available items for selection
*/
availableItems: any;
/**
* Selected Items
*/
selectedItems: any;
/**
* Selection text to be Displayed
*/
selectedDisplayText: string;
/**
* Search text
*/
searchText: string;
/**
* variable to track if clicked inside or outside of component
*/
clickedInside: boolean;
/**
* variable to track keypress event inside and outsid of component
*/
insideKeyPress: boolean;
/**
* variable to track the focused item whenuser uses arrow keys to select item
*/
focusedItemIndex: number;
/**
* element to show not found text when not itmes match the search
*/
showNotFound: boolean;
/**
* The position from the top of the element in pixels to drop according to the visibility in viewport
*/
top: string;
/**
* Flag to indicate is the click initiation was on one of the availabe or selected options
* This is to track the mouse down event especially in Safari.
*/
optionMouseDown: boolean;
/**
* Element ref of the dropdown list DOM element
*/
private dropdownList;
/**
* Hold the reference to available items in the list to focus on the item when scrolling
*/
availableOptions: QueryList<ElementRef>;
get value(): any;
set value(val: any);
constructor(cdref: ChangeDetectorRef, _elementRef: ElementRef, dropdownService: SelectDropDownService);
onChange: any;
onTouched: any;
/**
* click listener for host inside this component i.e
* if many instances are there, this detects if clicked inside
* this instance
*/
clickInsideComponent(): void;
/**
* View reference for the dorpdown list
*/
set dropDownElement(ref: ElementRef);
/**
* Event listener for the blur event to hide the dropdown
*/
blur(): void;
/**
* Event listener for the focus event to show the dropdown when using tab key
*/
focus(): void;
/**
* click handler on documnent to hide the open dropdown if clicked outside
*/
clickOutsideComponent(): void;
/**
* click handler on documnent to hide the open dropdown if clicked outside
*/
KeyPressOutsideComponent(): void;
/**
* Binding to set the tabindex property to set to 0 for accessibilty
*/
tabindex: number;
/**
* Event handler for key up and down event and enter press for selecting element
*/
handleKeyboardEvent($event: KeyboardEvent | any): boolean;
/**
* Component onInit
*/
ngOnInit(): void;
isVisible(): {
visible: boolean;
element: any;
};
serviceSubscriptions(): void;
/**
* after view init to subscribe to available option changes
*/
ngAfterViewInit(): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
writeValue(value: any, internal?: boolean): void;
reset(): void;
/**
* function sets whether to show items not found text or not
*/
setNotFoundState(): void;
/**
* Component onchage i.e when any of the input properties change
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* Deselct a selected items
* @param item: item to be deselected
* @param index: index of the item
*/
deselectItem(item: any, index: number): void;
/**
* Select an item
* @param item: item to be selected
* @param index: index of the item
*/
selectItem(item: string, index?: number): void;
/**
* When selected items changes trigger the chaange back to parent
*/
valueChanged(): void;
/**
* Toggle the dropdownlist on/off
*/
openSelectDropdown(): void;
closeSelectDropdown(): void;
openStateChange(): void;
/**
* The change handler for search text
*/
searchTextChanged(): void;
changeSearchText($event: any): void;
/**
* initialize the config and other properties
*/
private initDropdownValuesAndOptions;
/**
* set the text to be displayed
*/
private setSelectedDisplayText;
/**
* Event handler for arrow key up event thats focuses on a item
*/
private onArrowKeyUp;
/**
* Event handler for arrow key down event thats focuses on a item
*/
private onArrowKeyDown;
private onArrowKey;
/**
* will reset the element that is marked active using arrow keys
*/
private resetArrowKeyActiveElement;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxSelectDropdownComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxSelectDropdownComponent, "ngx-select-dropdown", never, { "_value": "_value"; "options": "options"; "config": "config"; "multiple": "multiple"; "disabled": "disabled"; "instanceId": "instanceId"; }, { "change": "change"; "searchChange": "searchChange"; "open": "open"; "close": "close"; }, never, never, false>;
}