@syncfusion/ej2-dropdowns
Version:
Essential JS 2 DropDown Components
483 lines (481 loc) • 14.8 kB
TypeScript
import { KeyboardEventArgs } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';
import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
import { FilteringEventArgs, FilterType } from '../drop-down-base/drop-down-base';
import { DropDownBase, PopupEventArgs, SelectEventArgs } from '../drop-down-base/drop-down-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { MentionModel } from '../mention/mention-model';
import { SortOrder } from '@syncfusion/ej2-lists';
export interface MentionChangeEventArgs extends SelectEventArgs {
/**
* Specifies the selected value.
*
* @isGenericType true
*/
value: number | string | boolean;
/**
* Specifies the element of previous selected list item.
*/
previousItem: HTMLLIElement;
/**
* Specifies the previously selected item as a JSON Object from the data source.
*
*/
previousItemData: FieldSettingsModel;
/**
* Specifies the component root element.
*/
element: HTMLElement;
}
/**
* The Mention component is used to list someone or something based on user input in textarea, input,
* or any other editable element from which the user can select.
*/
export declare class Mention extends DropDownBase {
private initRemoteRender;
private inputElement;
private popupObj;
private isPopupOpen;
private isSelected;
private selectedLI;
private previousSelectedLI;
private previousItemData;
private activeIndex;
private isFiltered;
private beforePopupOpen;
private listHeight;
private isListResetted;
private range;
private displayTempElement;
private isCollided;
private collision;
private spinnerElement;
private spinnerTemplateElement;
private lineBreak;
private selectedElementID;
private isSelectCancel;
private isTyped;
private didPopupOpenByTypingInitialChar;
private isUpDownKey;
private isRTE;
private keyEventName;
/**
* Defines class/multiple classes separated by a space for the mention component.
*
* @default null
*/
cssClass: string;
/**
* Specifies the symbol or single character which triggers the search action in the mention component.
*
* @default '@'
* @aspType char
*/
mentionChar: string;
/**
* Specifies whether to show the configured mentionChar with the text.
*
* @default false
*/
showMentionChar: boolean;
/**
* Defines whether to allow the space in the middle of mention while searching.
* When disabled, the space ends the mention component search.
*
* @default false
*/
allowSpaces: boolean;
/**
* Specifies the custom suffix to append along with the mention component selected item while inserting.
* You can append space or new line character as suffix.
*
* @default null
*/
suffixText: string;
/**
* Specifies the number of items in the suggestion list.
*
* @default 25
* @aspType int
*/
suggestionCount: number;
/**
* Specifies the minimum length of user input to initiate the search action.
* The default value is zero, where suggestion the list opened as soon as the user inputs the mention character.
*
* @default 0
* @aspType int
*/
minLength: number;
/**
* Specifies the order to sort the data source. The possible sort orders are,
* * `None` - The data source is not sorted.
* * `Ascending` - The data source is sorted in ascending order.
* * `Descending` - The data source is sorted in descending order.
*
* @default 'None'
*/
sortOrder: SortOrder;
/**
* Specifies whether the searches are case sensitive to find suggestions.
*
* @default true
*/
ignoreCase: boolean;
/**
* Specifies whether a space is required before the mention character to trigger the suggestion list.
* When set to false, the suggestion list will be triggered even without a space before the mention character.
*
* @default true
*/
requireLeadingSpace: boolean;
/**
* Specifies whether to highlight the searched characters on suggestion list items.
*
* @default false
*/
highlight: boolean;
/**
* Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
*
* @default 'en-US'
*/
locale: string;
/**
* Specifies the width of the popup in pixels/number/percentage. The number value is considered as pixels.
*
* @default 'auto'
* @aspType string
*/
popupWidth: string | number;
/**
* Specifies the height of the popup in pixels/number/percentage. The number value is considered as pixels.
*
* @default '300px'
* @aspType string
*/
popupHeight: string | number;
/**
* Specifies the template for the selected value from the suggestion list.
*
* @default null
* @aspType string
*/
displayTemplate: string | Function;
/**
* Specifies the template for the suggestion list.
*
* @default null
*/
itemTemplate: string;
/**
* Specifies the template for no matched item which is displayed when there are no items to display in the suggestion list.
*
* @default 'No records found'
*/
noRecordsTemplate: string;
/**
* Specifies the template for showing until data is loaded in the popup.
*
* @default null
* @aspType string
*/
spinnerTemplate: string | Function;
/**
* Specifies the target selector where the mention component needs to be displayed.
* The mention component listens to the target's user input and displays suggestions as soon as the user inputs the mention character.
*
*/
target: HTMLElement | string;
/**
* Accepts the list items either through local or remote service and binds it to the component.
* It can be an array of JSON Objects or an instance of `DataManager`.
*
* @default []
*/
dataSource: {
[key: string]: Object;
}[] | DataManager | string[] | number[] | boolean[];
/**
* Specifies the external query, which can be customized and filtered against the data source.
*
* @default null
*/
query: Query;
/**
* Determines on which filter type, the component needs to be considered on search action.
* and its supported data types are
*
* <table>
* <tr>
* <td colSpan=1 rowSpan=1>
* FilterType<br/></td><td colSpan=1 rowSpan=1>
* Description<br/></td><td colSpan=1 rowSpan=1>
* Supported Types<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* StartsWith<br/></td><td colSpan=1 rowSpan=1>
* Checks whether a value begins with the specified value.<br/></td><td colSpan=1 rowSpan=1>
* String<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* EndsWith<br/></td><td colSpan=1 rowSpan=1>
* Checks whether a value ends with a specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
* <br/>String<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* Contains<br/></td><td colSpan=1 rowSpan=1>
* Checks whether a value contains with a specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
* <br/>String<br/></td></tr>
* </table>
*
* The default value set to `Contains`, all the suggestion items which contain typed characters to listed in the suggestion popup.
*
* @default 'Contains'
*/
filterType: FilterType;
/**
* Defines the fields of the Mention to map with the data source and binds the data to the component.
* * text - Specifies the text that maps the text filed from the data source for each list item.
* * value - Specifies the value that maps the value filed from the data source for each list item.
* * iconCss - Specifies the iconCss that map the icon class filed from the data source for each list item.
* * groupBy - Specifies the groupBy that groups the list items with its related items by mapping groupBy field.
*
* @default
* {
* text: null, value: null, iconCss: null, groupBy: null
* }
*/
fields: FieldSettingsModel;
/**
* Triggers before fetching data from the remote server.
*
* @event actionBegin
*/
actionBegin: EmitType<Object>;
/**
* Triggers after data is fetched successfully from the remote server.
*
* @event actionComplete
*/
actionComplete: EmitType<Object>;
/**
* Triggers when the data fetch request from the remote server fails.
*
* @event actionFailure
*/
actionFailure: EmitType<Object>;
/**
* Triggers when an item in a popup is selected and updated in an editor.
*
* @event change
*/
change: EmitType<MentionChangeEventArgs>;
/**
* Triggers before the popup is opened.
*
* @event beforeOpen
*/
beforeOpen: EmitType<PopupEventArgs>;
/**
* Triggers after the popup opens.
*
* @event opened
*/
opened: EmitType<PopupEventArgs>;
/**
* Triggers after the popup is closed.
*
* @event closed
*/
closed: EmitType<PopupEventArgs>;
/**
* Triggers when an item in the popup is selected by the user either with the mouse/tap or with keyboard navigation.
*
* @event select
*/
select: EmitType<SelectEventArgs>;
/**
* Triggers on typing a character in the component.
*
* @event filtering
*/
filtering: EmitType<FilteringEventArgs>;
/**
* Triggers when the component is created.
*
* @event created
*/
created: EmitType<Object>;
/**
* Triggers when the component is destroyed.
*
* @event destroyed
*/
destroyed: EmitType<Object>;
/**
* * Constructor for creating the widget
*
* @param {MentionModel} options - Specifies the MentionComponent model.
* @param {string | HTMLElement} element - Specifies the element to render as component.
* @private
*/
constructor(options?: MentionModel, element?: string | HTMLElement);
/**
* When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
*
* @param {MentionModel} newProp - Returns the dynamic property value of the component.
* @param {MentionModel} oldProp - Returns the previous property value of the component.
* @private
* @returns {void}
*/
onPropertyChanged(newProp: MentionModel, oldProp: MentionModel): void;
private updateCssClass;
private setCssClass;
private initializeData;
/**
* Execute before render the list items
*
* @private
* @returns {void}
*/
protected preRender(): void;
/**
* To Initialize the control rendering
*
* @private
* @returns {void}
*/
render(): void;
private wireEvent;
private unWireEvent;
private bindCommonEvent;
/**
* Hides the spinner loader.
*
* @private
* @returns {void}
*/
hideSpinner(): void;
private hideWaitingSpinner;
private checkAndUpdateInternalComponent;
/**
* Shows the spinner loader.
*
* @returns {void}
*/
private showWaitingSpinner;
private keyDownHandler;
private keyActionHandler;
private updateUpDownAction;
private isSelectFocusItem;
private unBindCommonEvent;
private onKeyUp;
private isMatchedText;
private getCurrentRange;
private searchLists;
private filterAction;
protected onActionComplete(ulElement: HTMLElement, list: {
[key: string]: Object;
}[], e?: Object, isUpdated?: boolean): void;
private setDataIndex;
protected listOption(dataSource: {
[key: string]: Object;
}[], fieldsSettings: FieldSettingsModel): FieldSettingsModel;
private elementValue;
protected getQuery(query: Query): Query;
private renderHightSearch;
private getTextRange;
private getLastLetter;
private isContentEditable;
/**
* Opens the popup that displays the list of items.
*
* @returns {void}
*/
showPopup(): void;
/**
* Hides the popup if it is in an open state.
*
* @returns {void}
*/
hidePopup(e?: MouseEvent | KeyboardEventArgs): void;
private closePopup;
private renderPopup;
private setHeight;
private checkCollision;
private getTriggerCharPosition;
private initializePopup;
private setWidth;
private destroyPopup;
private onDocumentClick;
private getCoordinates;
private initValue;
private updateValues;
protected renderList(): void;
/**
* Event binding for list
*
* @returns {void}
*/
private wireListEvents;
/**
* Event un binding for list items.
*
* @returns {void}
*/
private unWireListEvents;
private onMouseClick;
private updateSelectedItem;
private setSelection;
private setSelectOptions;
private setScrollPosition;
private scrollBottom;
private scrollTop;
private selectEventCallback;
private detachChanges;
private setValue;
private updateMentionValue;
private mentionVal;
private setDisplayTemplate;
private renderTemplates;
private setSpinnerTemplate;
private onChangeEvent;
private detachMentionChanges;
private getItemData;
private removeSelection;
private onMouseOver;
private setHover;
private removeHover;
private isValidLI;
private onMouseLeave;
/**
* Search the entered text and show it in the suggestion list if available.
*
* @returns {void}
*/
search(text: string, positionX: number, positionY: number): void;
/**
* Method to disable specific item in the popup.
*
* @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
* @returns {void}
*/
disableItem(item: string | number | object | HTMLLIElement): void;
/**
* Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
*
* @method destroy
* @returns {void}
*/
destroy(): void;
protected getLocaleName(): string;
protected getNgDirective(): string;
/**
* Return the module name of this component.
*
* @private
* @returns {string} Return the module name of this component.
*/
getModuleName(): string;
}