@mescius/wijmo.input
Version:
UI library for pure JS, Angular, React, Vue and more...
1,409 lines (1,408 loc) • 182 kB
TypeScript
/*!
*
* Wijmo Library 5.20252.44
* https://developer.mescius.com/wijmo
*
* Copyright(c) MESCIUS inc. All rights reserved.
*
* Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
* us.sales@mescius.com
* https://developer.mescius.com/wijmo/licensing
*
*/
/**
* {@module wijmo.input}
* Defines input controls for strings, numbers, dates, times, and colors.
*/
/**
*
*/
export declare var ___keepComment: any;
import { Control, Event, EventArgs, CancelEventArgs, Binding, Rect, ICollectionView, CollectionViewGroup, _ClickRepeater, CollectionView, _MaskProvider, PopupPosition } from '@mescius/wijmo';
import * as selfModule from '@mescius/wijmo.input';
export declare const AutoCompleteClsNames: {
hostElement: string;
};
export declare const CalendarClsNames: {
buttonsOutside: string;
calendarHeader: string;
calendarMonth: string;
calendarMultiMonth: string;
calendarOuter: string;
calendarYear: string;
dayOtherMonth: string;
dayToday: string;
dayWeekend: string;
header: string;
hostElement: string;
monthSelect: string;
weekAfter: string;
weekBefore: string;
yearPicker: string;
focused: string;
selectedYear: string;
confirmationButtonContainer: string;
button: string;
};
export declare const CollectionViewNavigatorClsNames: {
hostElement: string;
pager: string;
};
export declare const ColorPickerClsNames: {
colorBox: string;
hostElement: string;
};
export declare const ComboBoxClsNames: {
hostElement: string;
stateMatch: string;
};
export declare const DropDownClsNames: {
dropDownPanel: string;
hostElement: string;
};
export declare const InputClsNames: {
input: string;
inputBtnVisible: string;
inputGroup: string;
inputGroupBtn: string;
};
export declare const InputColorClsNames: {
hostElement: string;
inputColorBox: string;
};
export declare const InputDateClsNames: {
hostElement: string;
inputDateDropDown: string;
inputDateDropDownContainer: string;
};
export declare const InputDateRangeClsNames: {
hostElement: string;
};
export declare const InputDateTimeClsNames: {
hostElement: string;
showDropDownButton: string;
};
export declare const InputMaskClsNames: {
hostElement: string;
};
export declare const InputNumberClsNames: {
hostElement: string;
numeric: string;
showSpinner: string;
};
export declare const InputTimeClsNames: {
hostElement: string;
};
export declare const ListBoxClsNames: {
header: string;
hostElement: string;
listBoxItem: string;
};
export declare const MenuClsNames: {
hostElement: string;
menuItems: string;
subItems: string;
};
export declare const MultiAutoCompleteClsNames: {
hostElement: string;
token: string;
tokenActive: string;
tokenClose: string;
tokenHelper: string;
tokenLabel: string;
screenReaderOnly: string;
};
export declare const MultiSelectClsNames: {
hostElement: string;
};
export declare const MultiSelectListBoxClsNames: {
header: string;
hostElement: string;
selectAll: string;
};
export declare const PopupClsNames: {
dialogHeader: string;
hostElement: string;
popupBackDrop: string;
dialogBody: string;
dialogFooter: string;
};
/**
* The {@link InputNumber} control allows users to enter numbers.
*
* The control prevents users from accidentally entering invalid data and
* formats the number as it is edited.
*
* Pressing the minus key reverses the sign of the value being edited,
* regardless of cursor position.
*
* You may use the {@link min} and {@link max} properties to limit the range of
* acceptable values, and the {@link step} property to provide spinner buttons
* that increase or decrease the value with a click.
*
* For details about using the {@link min} and {@link max} properties, please see
* the <a href="/wijmo/docs/Topics/Input/Using-Min-Max">Using the min and max properties</a> topic.
*
* Use the {@link value} property to get or set the currently selected number.
*
* The example below creates several {@link InputNumber} controls and shows
* the effect of using different formats.
*
* {@sample Input/InputNumber/Formatting/purejs Example}
*/
export declare class InputNumber extends Control {
_tbx: HTMLInputElement;
_btnUp: HTMLElement;
_btnDn: HTMLElement;
_value: number;
_min: number;
_max: number;
_format: string;
_step: number;
_showBtn: boolean;
_readOnly: boolean;
_handleWheel: boolean;
_oldText: string;
_oldValue: number;
_composing: boolean;
_chrDec: string;
_chrCur: string;
_chrNeg: string;
_chrPls: string;
_chrPct: string;
_chrTho: string;
_fmtSpc: string;
_fmtPrc: number;
_rxSym: RegExp;
_rxNeg: RegExp;
_delKey: boolean;
_rptUp: _ClickRepeater;
_rptDn: _ClickRepeater;
_fromKb: boolean;
static _ctrlTemplate: string;
_inputElementAriaLabel: string;
_ariaLabelledby: string;
/**
* Gets or sets the template used to instantiate {@link InputNumber} controls.
*/
static controlTemplate: string;
/**
* Initializes a new instance of the {@link InputNumber} class.
*
* @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
* @param options The JavaScript object containing initialization data for the control.
*/
constructor(element: any, options?: any);
/**
* Gets the HTML input element hosted by the control.
*
* Use this property in situations where you want to customize the
* attributes of the input element.
*/
readonly inputElement: HTMLInputElement;
/**
* Gets or sets the "type" attribute of the HTML input element hosted by the control.
*
* By default, this property is set to "tel", a value that causes mobile devices to
* show a numeric keypad that includes a negative sign and a decimal separator.
*
* Use this property to change the default setting if the default does not work well
* for the current culture, device, or application. In those cases, try changing
* the value to "number" or "text."
*
* Note that input elements with type "number" prevent selection in Chrome and
* therefore that type is not recommended. For more details, see this link:
* https://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome
*/
inputType: string;
/**
* Gets or sets the current value of the control.
*/
value: number | null;
/**
* Gets or sets a value indicating whether the control value must be
* a number or whether it can be set to null (by deleting the content
* of the control).
*
* The default value for this property is **true**.
*/
isRequired: boolean;
/**
* Gets or sets a value that indicates whether the user can modify
* the control value using the mouse and keyboard.
*
* The default value for this property is **false**.
*/
isReadOnly: boolean;
/**
* Gets or sets a value that determines whether the user can edit the
* value using the mouse wheel.
*
* The default value for this property is **true**.
*/
handleWheel: boolean;
/**
* Gets or sets the smallest number that the user can enter.
*
* For details about using the {@link min} and {@link max} properties, please see the
* <a href="/wijmo/docs/Topics/Input/Using-Min-Max">Using the min and max properties</a> topic.
*/
min: number | null;
/**
* Gets or sets the largest number that the user can enter.
*
* For details about using the {@link min} and {@link max} properties, please see the
* <a href="/wijmo/docs/Topics/Input/Using-Min-Max">Using the min and max properties</a> topic.
*/
max: number | null;
/**
* Gets or sets the amount to add or subtract to the {@link value} property
* when the user clicks the spinner buttons.
*
* The default value for this property is **null**, which hides the spinner
* buttons from the control.
*/
step: number | null;
/**
* Gets or sets the format used to display the number being edited (see {@link Globalize}).
*
* The format string is expressed as a .NET-style
* <a href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings" target="_blank">
* standard numeric format string</a>.
*/
format: string;
/**
* Gets or sets the text shown in the control.
*/
text: string;
/**
* Gets or sets the string shown as a hint when the control is empty.
*/
placeholder: string;
/**
* Gets or sets a value indicating whether the control displays spinner buttons
* to increment or decrement the value (the step property must be set to a
* value other than zero).
*
* The default value for this property is **true**.
*/
showSpinner: boolean;
/**
* Gets or sets a value that determines whether the spinner buttons
* should act as repeat buttons, firing repeatedly as long as the
* button remains pressed.
*
* The default value for this property is **true**.
*/
repeatButtons: boolean;
/**
* Gets or sets the aria-labelledby attribute of input element.
*/
ariaLabelledBy: string;
/**
* Sets the focus to the control and selects all its content.
*/
selectAll(): void;
/**
* Returns a value within the range defined by the {@link min} and {@link max}
* properties.
*
* @param value Value to clamp.
*/
clamp(value: number): number;
/**
* Occurs when the value of the {@link text} property changes.
*/
readonly textChanged: Event<InputNumber, EventArgs>;
/**
* Raises the {@link textChanged} event.
*/
onTextChanged(e?: EventArgs): void;
/**
* Occurs when the value of the {@link value} property changes, either
* as a result of user actions or by assignment in code.
*/
readonly valueChanged: Event<any, EventArgs>;
/**
* Raises the {@link valueChanged} event.
*/
onValueChanged(e?: EventArgs): void;
dispose(): void;
onGotFocus(e: EventArgs): void;
onLostFocus(e?: EventArgs): void;
refresh(fullUpdate?: boolean): void;
private _isEditable;
private _updateSymbols;
private _isNumeric;
private _getInputRange;
private _flipSign;
private _getSelStartDigits;
private _setSelStartDigits;
private _increment;
protected _updateBtn(): void;
_setText(text: string, truncate?: boolean, forceDelete?: boolean): void;
private _handleDecimalInput;
protected _beforeinput(e: any): void;
protected _keypress(e: KeyboardEvent): void;
private _handlePlusSign;
private _handleMinusSign;
protected _keydown(e: KeyboardEvent): void;
protected _input(): void;
/**
* Checks if the value represents a negative currency entered using parentheses.
* Scenario:
* 1. First input "(" → value changes to "-$0.00"
* 2. Then input a digit (e.g., "1") → value changes to "-$01.00"
*/
private _isNegativeCurrencyByParenthesis;
protected _clickSpinner(e: MouseEvent): void;
protected _updateAria(): void;
_updateInputAriaLabel(): void;
getAriaLabelForScreenReader(): any;
}
/**
* The {@link InputMask} control provides a way to govern what a user is allowed
* to enter.
*
* The control prevents users from accidentally entering invalid data and
* saves time by skipping over literals (such as slashes in dates) as the
* user types.
*
* The mask used to validate the input is defined by the {@link InputMask.mask}
* property, which may contain one or more of the following special
* characters:
*
* <dl class="dl-horizontal">
* <dt>0</dt> <dd>Digit.</dd>
* <dt>9</dt> <dd>Digit or space.</dd>
* <dt>#</dt> <dd>Digit, sign, or space.</dd>
* <dt>L</dt> <dd>Letter.</dd>
* <dt>l</dt> <dd>Letter or space.</dd>
* <dt>A</dt> <dd>Alphanumeric.</dd>
* <dt>a</dt> <dd>Alphanumeric or space.</dd>
* <dt>.</dt> <dd>Localized decimal point.</dd>
* <dt>,</dt> <dd>Localized thousand separator.</dd>
* <dt>:</dt> <dd>Localized time separator.</dd>
* <dt>/</dt> <dd>Localized date separator.</dd>
* <dt>$</dt> <dd>Localized currency symbol.</dd>
* <dt><</dt> <dd>Converts characters that follow to lowercase.</dd>
* <dt>></dt> <dd>Converts characters that follow to uppercase.</dd>
* <dt>|</dt> <dd>Disables case conversion.</dd>
* <dt>\</dt> <dd>Escapes any character, turning it into a literal.</dd>
* <dt>９ (\uff19)</dt> <dd>DBCS Digit.</dd>
* <dt>Ｊ (\uff2a)</dt> <dd>DBCS Hiragana.</dd>
* <dt>Ｇ (\uff27)</dt> <dd>DBCS big Hiragana.</dd>
* <dt>Ｋ (\uff2b)</dt> <dd>DBCS Katakana. </dd>
* <dt>Ｎ (\uff2e)</dt> <dd>DBCS big Katakana.</dd>
* <dt>K</dt> <dd>SBCS Katakana.</dd>
* <dt>N</dt> <dd>SBCS big Katakana.</dd>
* <dt>Ｚ (\uff3a)</dt> <dd>Any DBCS character.</dd>
* <dt>H</dt> <dd>Any SBCS character.</dd>
* <dt>All others</dt> <dd>Literals.</dd>
* </dl>
*
* The example below shows how you can use the {@link InputMask} control to
* edit strings with custom formats:
*
* {@sample Input/InputMask/Overview Example}
*/
export declare class InputMask extends Control {
_tbx: HTMLInputElement;
_oldValue: string;
_value: string;
_msk: _MaskProvider;
_fullEdit: boolean;
static _ctrlTemplate: string;
_inputElementAriaLabel: string;
_ariaLabelledby: string;
/**
* Gets or sets the template used to instantiate {@link InputMask} controls.
*/
static controlTemplate: string;
/**
* Initializes a new instance of the {@link InputMask} class.
*
* @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
* @param options The JavaScript object containing initialization data for the control.
*/
constructor(element: any, options?: any);
/**
* Gets the HTML input element hosted by the control.
*
* Use this property in situations where you want to customize the
* attributes of the input element.
*/
readonly inputElement: HTMLInputElement;
/**
* Gets or sets the "type" attribute of the HTML input element hosted
* by the control.
*
* The default value for this property is **'text'**.
*/
inputType: string;
/**
* Gets or sets the text currently shown in the control.
*/
value: string;
/**
* Gets or sets the raw value of the control (excluding mask literals).
*
* The raw value of the control excludes prompt and literal characters.
* For example, if the {@link mask} property is set to "AA-9999" and the
* user enters the value "AB-1234", the {@link rawValue} property will
* return "AB1234", excluding the hyphen that is part of the mask.
*/
rawValue: string;
/**
* Gets or sets the mask used to validate the input as the user types.
*
* The mask is defined as a string with one or more of the masking
* characters listed in the {@link InputMask} topic.
*
* The default value for this property is the empty string **''**.
*/
mask: string;
/**
* Gets or sets the symbol used to show input positions in the control.
*/
promptChar: string;
/**
* Gets or sets a value that determines whether the input element handles input in
* overwrite mode.
*
* In **overwrite mode**, every character you type is displayed at the cursor position.
* If a character is already at that position, it is replaced.
*
* In **insert mode**, each character you type is inserted at the cursor position.
*
* The default value for this property is **false**.
*/
overwriteMode: boolean;
/**
* Gets or sets the string shown as a hint when the control is empty.
*/
placeholder: string;
/**
* Gets a value that indicates whether the mask has been completely filled.
*/
readonly maskFull: boolean;
/**
* Gets or sets a value indicating whether the control value
* must be a non-empty string.
*
* The default value for this property is **true**.
*/
isRequired: boolean;
/**
* Gets or sets a value that indicates whether the user can modify
* the control value using the mouse and keyboard.
*
* The default value for this property is **false**.
*/
isReadOnly: boolean;
/**
* Sets the focus to the control and selects all its content.
*/
selectAll(): void;
/**
* Occurs when the value of the {@link value} property changes, either
* as a result of user actions or by assignment in code.
*/
readonly valueChanged: Event<InputMask, EventArgs>;
/**
* Raises the {@link valueChanged} event.
*/
onValueChanged(e?: EventArgs): void;
_commitText(): void;
dispose(): void;
refresh(fullUpdate?: boolean): void;
onGotFocus(e: any): void;
/**
* Gets or sets the aria-labelledby attribute of input element.
*/
ariaLabelledBy: string;
_updateInputAriaLabel(): void;
getAriaLabelForScreenReader(): any;
}
/**
* Specifies constants that define the action to be performed when the TAB key is pressed.
*/
export declare enum ColorPickerTabKeyAction {
/** No special action (let the browser handle the key). */
None = 0,
/** All buttons in the color picker can be selected using the tab key. */
All = 1
}
/**
* The {@link ColorPicker} control allows users to select a color by clicking
* on panels to adjust color channels (hue, saturation, brightness, alpha).
*
* Use the {@link value} property to get or set the currently selected color.
*
* The control is used as a drop-down for the {@link InputColor} control.
*
* {@sample Input/InputColor/Overview/purejs Example}
*/
export declare class ColorPicker extends Control {
_hsb: number[];
_alpha: number;
_value: string;
_palette: string[];
_eSB: HTMLElement;
_eHue: HTMLElement;
_eAlpha: HTMLElement;
_cSB: HTMLElement;
_cHue: HTMLElement;
_cAlpha: HTMLElement;
_ePal: HTMLElement;
_ePreview: HTMLElement;
_eText: HTMLElement;
_ePalMainFirst: HTMLElement;
_ePalShadeFirst: HTMLElement;
_htDown: Element;
_ariaLabel: string;
private _keyActionTab;
static _ctrlTemplate: string;
/**
* Gets or sets the template used to instantiate {@link ColorPicker} controls.
*/
static controlTemplate: string;
static _tplCursor: string;
/**
* Initializes a new instance of the {@link ColorPicker} class.
*
* @param element The DOM element that hosts the control, or a selector for the host element (e.g. '#theCtrl').
* @param options The JavaScript object containing initialization data for the control.
*/
constructor(element: any, options?: any);
/**
* Gets or sets a value indicating whether the {@link ColorPicker} allows users
* to edit the color's alpha channel (transparency).
*
* The default value for this property is **true**.
*/
showAlphaChannel: boolean;
/**
* Gets or sets a value indicating whether the {@link ColorPicker} shows a string representation
* of the current color.
*
* The default value for this property is **false**.
*/
showColorString: boolean;
/**
* Gets or sets the currently selected color.
*
* The default value for this property is **"#ffffff"** (white).
*
* Setting this property to a string that cannot be interpreted as
* a color causes the assignment to be ignored (no exceptions are
* thrown).
*/
value: string;
/**
* Gets or sets an array that contains the colors in the palette.
*
* The default palette contains up to ten colors, represented by
* an array with color strings.
*
* For each color in the palette, the control generates six buttons
* ranging from light to dark versions of the main color. Users
* may click these color buttons to select the color they want.
*
* You may customize the palette by providing the color string array
* you want to use. Palettes contain up to ten colors, and the first
* two are usually white and black.
*
* Palette arrays with more than 10 colors are truncated, and
* arrays with values that do not represent colors are ignored.
* No exceptions are thrown in these cases.
*/
palette: string[];
/**
* Gets or sets the aria-label attribute of {@link ColorPicker} host element.
*
* The default value for this property is "Color Picker".
*/
ariaLabel: string;
/**
* Gets or sets the action to perform when the Tab key is pressed.
*
* The default setting for this property is {@link ColorPickerTabKeyAction.None},
* This means that pressing the tab key will have no effect and follow the browser's default behavior.
*/
keyActionTab: ColorPickerTabKeyAction;
_setTabOrder(value: number): void;
/**
* Occurs when the value of the {@link value} property changes, either
* as a result of user actions or by assignment in code.
*/
readonly valueChanged: Event<ColorPicker, EventArgs>;
/**
* Raises the {@link valueChanged} event.
*/
onValueChanged(e?: EventArgs): void;
protected _mouseDown(e: MouseEvent): void;
protected _mouseMove(e: MouseEvent): void;
protected _mouseUp(e: MouseEvent): void;
private _updateColor;
private _updatePalette;
private _makePalEntry;
private _updatePanels;
private getColorsDiv;
private _getTargetPanel;
protected getActualTabIndex(): string;
private _updateTabIndex;
protected _setIsDisabled(value: boolean): void;
private _updateAriaValues;
private _keydown;
private _isInColorPalette;
private _handleColorNavigation;
private _handleHSBNavigation;
_refreshSelection(): void;
private _handleAlphaNavigation;
}
/**
* The {@link CollectionViewNavigator} control provides a UI for navigating
* through the data items or pages in a {@link CollectionView} object.
*
* Use the navigator's {@link cv} property to bind it to a {@link CollectionView},
* and the {@link byPage} property to define whether the navigator should show
* data items or pages.
*
* The navigator shows VCR-like buttons that allow users to select the
* first/previous/next/last data item (or page) in the {@link CollectionView},
* and some text showing the current index and total count.
*
* You may use the {@link headerFormat} property to customize the text displayed
* by the navigator.
*/
export declare class CollectionViewNavigator<T = any> extends Control {
private _btnFirst;
private _btnPrev;
private _btnNext;
private _btnLast;
private _txtCurr;
private _view;
private _byPage;
private _rptNext;
private _rptPrev;
private _fmt;
private _liveRegionON;
private _ariaLabel;
private _isDisabled;
static _ctrlTemplate: string;
/**
* Gets or sets the template used to instantiate {@link CollectionViewNavigator} controls.
*/
static controlTemplate: string;
/**
* Initializes a new instance of the {@link CollectionViewNavigator} class.
*
* @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
* @param options The JavaScript object containing initialization data for the control.
*/
constructor(element: any, options?: any);
/**
* Gets or sets the {@link CollectionView} controlled by this {@link CollectionViewNavigator}.
*/
cv: CollectionView<T>;
/**
* Gets or sets a value that determines whether this {@link CollectionViewNavigator} should
* navigate items or pages.
*
* To navigate pages, the {@link CollectionView} associated with the navigator should
* have it's {@link CollectionView.pageSize} property set to a value greater than zero.
*
* The default value for this property is **false**.
*/
byPage: boolean;
/**
* Gets or sets the format string used to display the current
* total item/page values in the control header.
*
* The format string may contain the '{current}' and '{count}'
* replacement strings, which are replaced with values that
* depend on the value of the {@link byPage} property.
*
* The format string may also contain the following replacement
* strings: '{currentItem}', '{itemCount}', '{currentPage}', and
* '{pageCount}', which are replaced with values that do not
* depend on the value of the {@link byPage} property.
*
* The default value for this property is the string
* **"{current:n0} / {count:n0}"**.
*
* The control header element is an input element and contains
* plain text (HTML is not supported).
*/
headerFormat: string;
/**
* Gets or sets a value that determines whether the next/previous buttons
* should act as repeat buttons, firing repeatedly as long as the button
* remains pressed.
*
* The default value for this property is **true**.
*/
repeatButtons: boolean;
/**
* Gets or sets the aria-label attribute of {@link CollectionViewNavigator} element.
*/
ariaLabel: string;
/**
* Gets or sets a value that determines whether the control is disabled.
*
* Disabled controls cannot get mouse or keyboard events.
*/
isDisabled: boolean;
/**
* Sets the focus to this control.
*/
focus(): void;
_update(): void;
_currentChanged(): void;
_collectionChanged(): void;
_click(e: MouseEvent): void;
private _updateAriaLabels;
private _addA11yRelatedHandlers;
protected _setTabOrder(value: number): void;
_keydown(e: KeyboardEvent): void;
protected _setIsDisabled(value: boolean): void;
_updateTabIndex(): void;
}
/**
* Represents a method that formats an item for display in a
* {@link ListBox} control.
*/
export interface IItemFormatter {
/**
* @param index Index of the item being formatted.
* @param item Default text or HTML used to represent the item.
* @returns Customized text or HTML used to represent the item.
*/
(index: number, item: string): string;
}
/**
* The {@link ListBox} control displays a list of items which may contain
* plain text or HTML, and allows users to select items with the mouse
* or the keyboard.
*
* Use the {@link ListBox.selectedIndex} property to determine which item
* is currently selected.
*
* You can populate a {@link ListBox} using an array of strings or you can
* use an array of objects, in which case the {@link ListBox.displayMemberPath}
* property determines which object property is displayed on the list.
*
* To display items that contain HTML rather than plain text, set the
* {@link ListBox.isContentHtml} property to true.
*
* The {@link ListBox} control supports the following keyboard commands:
*
* <table>
* <thead>
* <tr><th>Key Combination</th><th>Action</th></tr>
* </thead>
* <tbody>
* <tr><td>Up/Down</td><td>Select the previous/next item</td></tr>
* <tr><td>PageUp/Down</td><td>Select the item one page above or below the selection</td></tr>
* <tr><td>Home/End</td><td>Select the first/last items</td></tr>
* <tr><td>Space</td><td>Toggle the checkbox in the current item (see the {@link checkedMemberPath} property)</td></tr>
* <tr><td>Other characters</td><td>Search for items that contain the text typed (multi-character auto-search)</td></tr>
* </tbody>
* </table>
*
* The example below creates a {@link ListBox} control and populates it using
* a 'countries' array. The control updates its {@link ListBox.selectedIndex}
* and {@link ListBox.selectedItem} properties as the user moves the selection.
*
* {@sample Input/ListBox/Overview/purejs Example}
*/
export declare class ListBox<T = any> extends Control {
_items: any;
_cv: ICollectionView<T> | null;
_itemFormatter: IItemFormatter | null;
_pathDisplay: Binding;
_pathValue: Binding;
_pathChecked: Binding;
_html: boolean;
_shGroups: boolean;
private _checkedItems;
_itemRole: string;
_caseSensitive: boolean;
_addMode: boolean;
private _isShiftDown;
private _shouldClearOnShift;
_vThreshold: number;
_isVirtual: boolean;
_children: HTMLElement[];
_ignoreItemFormatterTextArray: string[];
_itemFormatterHelper: HTMLDivElement;
_clientHeight: number;
_itemHeight: number;
_itemsAbove: number;
_itemsBelow: number;
_eSizer: HTMLDivElement;
_ePadTop: HTMLDivElement;
_ePadBot: HTMLDivElement;
_checking: boolean;
_ignoredItemChangedEvents: boolean;
_search: string;
_toSearch: any;
_fmtItemHandlers: number;
_itemCount: number;
_oldSel: HTMLElement | null;
_container: HTMLElement | null;
_oldSelectedIndex: number;
_ariaLabel: string;
static _DIDX_KEY: string;
static _VTHRESH: number;
_isNeedUpdateBnd: boolean;
/**
* Initializes a new instance of the {@link ListBox} class.
*
* @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
* @param options The JavaScript object containing initialization data for the control.
*/
constructor(element: any, options?: any);
/**
* Gets or sets the aria-labelledby attribute of {@link ListBox} input element.
*/
ariaLabelledBy: string;
/**
* Gets or sets the array or {@link ICollectionView} object that contains
* the list items.
*/
itemsSource: any;
/**
* Gets the {@link ICollectionView} object used as the item source.
*/
readonly collectionView: ICollectionView<T>;
/**
* Gets or sets the minimum number of rows and/or columns required to enable
* virtualization.
*
* When the {@link ListBox} is virtualized, only the items that are currently
* visible are added to the DOM. This makes a huge difference in performance
* when the {@link ListBox} contains a large number of items (say 1,000 or so).
*
* The default value for this property is a very big number, meaning virtualization is
* disabled. To enable virtualization, set its value to 0 or a positive number.
*
* Virtualization assumes a vertically stacked layout, so it is automatically
* disabled if the {@link ListBox} uses a multi-column display (such as a
* flexbox or grid layout).
*/
virtualizationThreshold: number;
/**
* Gets or sets a value that determines whether the {@link ListBox} should
* include group header items to delimit data groups.
*
* Data groups are created by modifying the {@link ICollectionView.groupDescriptions}
* property of the {@link ICollectionView} object used as an {@link itemsSource}.
*
* The {@link ListBox} only shows the first level of grouping.
*
* The default value for this property is **false**.
*/
showGroups: boolean;
/**
* Gets or sets a value indicating whether items contain plain
* text or HTML.
*
* The default value for this property is **false**.
*/
isContentHtml: boolean;
/**
* Gets or sets a function used to customize the values shown on
* the list.
*
* The function takes two arguments, the item index and the default
* text or html, and returns the new text or html to display.
*
* If the formatting function needs a scope (i.e. a meaningful
* 'this' value), then remember to set the filter using the 'bind'
* function to specify the 'this' object. For example:
*
* ```typescript
* listBox.itemFormatter = customItemFormatter.bind(this);
* function customItemFormatter(index, content) {
* if (this.makeItemBold(index)) {
* content = '<b>' + content + '</b>';
* }
* return content;
* }
* ```
*/
itemFormatter: IItemFormatter;
/**
* Gets or sets the name of the property to use as the visual
* representation of the items.
*
* The default value for this property is the empty string **''**.
*/
displayMemberPath: string;
/**
* Gets or sets the name of the property used to get the
* {@link selectedValue} from the {@link selectedItem}.
*
* The default value for this property is the empty string **''**.
*/
selectedValuePath: string;
/**
* Gets or sets the name of the property used to control
* check boxes placed next to each item.
*
* Use this property to create multi-select ListBoxes.
*
* When an item is checked or unchecked, the control raises the
* {@link itemChecked} event.
*
* Use the {@link selectedItem} property to retrieve the item that
* was checked or unchecked, or use the {@link checkedItems} property
* to retrieve the list of items that are currently checked.
*
* The default value for this property is the empty string **''**.
*/
checkedMemberPath: string;
/**
* Gets or sets a value that determines whether searches performed
* while the user types should case-sensitive.
*
* The default value for this property is **false**.
*/
caseSensitiveSearch: boolean;
/**
* Gets or sets the value or the "role" attribute added to the
* list items.
*
* The default value for this property is the string **"option"**.
*/
itemRole: string;
/**
* Gets the string displayed for the item at a given index.
*
* The string may be plain text or HTML, depending on the setting
* of the {@link isContentHtml} property.
*
* @param index The index of the item in the {@link itemsSource}.
*/
getDisplayValue(index: number, ignoreItemFormatter?: boolean): string;
/**
* Gets the text displayed for the item at a given index (as plain text).
*
* @param index The index of the item in the {@link itemsSource}.
*/
getDisplayText(index: number): string;
_getDisplayText(index: number, notGetByList?: boolean): string;
/**
* Gets a value that determines whether the item at a given index is enabled.
*
* @param index The index of the item in the {@link itemsSource}.
*/
isItemEnabled(index: number): boolean;
/**
* Gets or sets the index of the currently selected item.
*/
selectedIndex: number;
/**
* Gets or sets the item that is currently selected.
*/
selectedItem: any;
/**
* Gets or sets the value of the {@link selectedItem} obtained using
* the {@link selectedValuePath}.
*/
selectedValue: any;
/**
* Gets or sets the maximum height of the list (in pixels).
*
* The default value for this property is **null**, which
* means the {@link ListBox} has no maximum height limit.
*/
maxHeight: number;
/**
* Highlights the selected item and scrolls it into view.
*
* @param setFocus Whether to set the focus to the list after scrolling
* the selected item into view.
*/
showSelection(setFocus?: boolean): void;
/**
* Loads the list with items from the current {@link itemsSource}.
*/
loadList(): void;
/**
* Gets the checked state of an item on the list.
*
* This method can be used with multi-select ListBoxes
* (see the {@link checkedMemberPath} property).
*
* @param index Item index.
*/
getItemChecked(index: number): boolean;
/**
* Sets the checked state of an item on the list.
*
* This method is applicable only on multi-select ListBoxes
* (see the {@link checkedMemberPath} property).
*
* If the checked state of the item changes, the item becomes
* selected.
*
* @param index Item index.
* @param checked Item's new checked state.
*/
setItemChecked(index: number, checked: boolean | null): void;
/**
* Toggles the checked state of an item on the list.
* This method is applicable only to multi-select ListBoxes
* (see the {@link checkedMemberPath} property).
*
* @param index Item index.
*/
toggleItemChecked(index: number): void;
/**
* Gets or sets an array containing the items that are currently checked.
*
* Setting this property does not change the value of the
* {@link selectedIndex} property.
*/
checkedItems: any[];
/**
* Gets the data index of an element within the list.
*
* @param e Element to search for.
* @return The index of the element in the list, or -1 if the element
* is not a member of the list.
*/
indexOf(e: HTMLElement): number;
/**
* Occurs when the value of the {@link selectedIndex} property changes.
*/
readonly selectedIndexChanged: Event<ListBox<any>, EventArgs>;
/**
* Raises the {@link selectedIndexChanged} event.
*/
onSelectedIndexChanged(e?: EventArgs): void;
/**
* Occurs when the list of items changes.
*/
readonly itemsChanged: Event<ListBox<any>, EventArgs>;
/**
* Raises the {@link itemsChanged} event.
*/
onItemsChanged(e?: EventArgs): void;
/**
* Occurs before the list items are generated.
*/
readonly loadingItems: Event<ListBox<any>, EventArgs>;
/**
* Raises the {@link loadingItems} event.
*/
onLoadingItems(e?: EventArgs): void;
/**
* Occurs after the list items have been generated.
*/
readonly loadedItems: Event<ListBox<any>, EventArgs>;
/**
* Raises the {@link loadedItems} event.
*/
onLoadedItems(e?: EventArgs): void;
/**
* Occurs when the current item is checked or unchecked by the user.
*
* This event is raised when the {@link checkedMemberPath} is set to
* the name of a property to add check boxes to each item in the control.
*
* Use the {@link selectedItem} property to retrieve the item that was
* checked or unchecked.
*/
readonly itemChecked: Event<ListBox<any>, EventArgs>;
/**
* Raises the {@link itemChecked} event.
*/
onItemChecked(e?: EventArgs): void;
/**
* Occurs when the value of the {@link checkedItems} property changes.
*/
readonly checkedItemsChanged: Event<ListBox<any>, EventArgs>;
/**
* Raises the {@link checkedItemsChanged} event.
*/
onCheckedItemsChanged(e?: EventArgs): void;
/**
* Occurs when an element representing a list item has been created.
*
* This event can be used to format list items for display. It is similar
* in purpose to the {@link itemFormatter} property, but has the advantage
* of allowing multiple independent handlers.
*
* The {@link FormatItemEventArgs} object passed as a parameter has
* a **data** property that refers to the data item bound to the
* item and an **index** property that provides the item index into
* the current view.
*
* If the {@link showGroups} property is set to **true** and
* the item represents a group header, then the **data** property
* contains a reference to a {@link CollectionViewGroup} object
* represents the group. This object contains the group's **name**,
* **items**, and **groupDescription**.
* Since group headers do not correspond to actual data items,
* the **index** property in this case is set to **-1**.
*/
readonly formatItem: Event<ListBox<any>, FormatItemEventArgs>;
/**
* Raises the {@link formatItem} event.
*
* @param e {@link FormatItemEventArgs} that contains the event data.
*/
onFormatItem(e: FormatItemEventArgs): void;
/**
* Refreshes the control.
*
* @param fullUpdate Whether to update the control layout as well as the content.
*/
refresh(fullUpdate?: boolean): void;
_updateAriaLabel(): void;
_updateCheckedList(arr: any[]): void;
_getBoundingClientRect(e: HTMLElement): Rect;
_updateItemAttributes(e: HTMLElement | null, selected: boolean): void;
_getCheckedItems(): any[];
_arrayEquals(arr1: any[], arr2: any[]): boolean;
_getChild(index: number): HTMLElement;
_getElementIndex(index: number): number;
private _setItemChecked;
private _checkedItemsUpdate;
private _isEqual;
private _findArrayItem;
private _cvCollectionChanged;
private _cvCurrentChanged;
protected _populateList(): void;
_getCanvasContext(): CanvasRenderingContext2D;
_getVirtual(): boolean;
_getMaxSupportedCssHeight(): number;
_updateViewRange(): boolean;
_getSelectedElement(visible: boolean): HTMLElement | null;
_handleResize(): void;
_createItem(i: number, groupIndex?: number): string;
_getAriaSelected(isSelected: boolean, isChecked: boolean | null): boolean;
_createHeaderItem(group: CollectionViewGroup, groupIndex: number): string;
private _click;
private _keydown;
private _handleKeyUp;
private _getCheckboxState;
private _setCheckboxState;
private _getCheckbox;
private _keypress;
private _selectNext;
private _selectPrev;
private _findNextEnabled;
private _findPrevEnabled;
_selectFirst(): boolean;
_selectLast(): boolean;
_selectNextPage(): boolean;
_selectPrevPage(): boolean;
private _findNext;
_initFromSelect(hostElement: HTMLElement): void;
_setIsDisabled(value: boolean): void;
_setTabOrder(value: number): void;
_isMenuItem(): boolean;
_updateTabIndex(): void;
private _selectRange;
/**
* Disposes of the control and all its resources.
*
* Calling the {@link dispose} method is important in applications that create
* and remove controls dynamically. Failing to dispose of the controls may
* cause memory leaks.
*/
dispose(): void;
}
/**
* Provides arguments for the {@link ListBox.formatItem} event.
*/
export declare class FormatItemEventArgs extends EventArgs {
_index: number;
_data: any;
_item: HTMLElement;
/**
* Initializes a new instance of the {@link FormatItemEventArgs} class.
*
* @param index Index of the item being formatted in the source {@link ICollectionView}, or -1 if the item is a group header.
* @param data Data item being formatted, or a {@link CollectionViewGroup} object if the item is a group header.
* @param item Element that represents the list item to be formatted.
*/
constructor(index: number, data: any, item: HTMLElement);
/**
* Gets the index of the data item in the list.
*/
readonly index: number;
/**
* Gets the data item being formatted.
*/
readonly data: any;
/**
* Gets a reference to the element that represents the list item to be formatted.
*/
readonly item: HTMLElement;
}
/**
* The {@link MultiSelectListBox} control contains a {@link ListBox} with
* a "Select All" button and a "Filter" input.
*
* The "Select All" and "Filter" elements can be shown or hidden using
* the {@link showSelectAllCheckbox} and {@link showFilterInput} properties.
*
* The {@link MultiSelectListBox} control is used as a drop-down by the
* {@link MultiSelect} control.
*/
export declare class MultiSelectListBox<T = any> extends Control {
_selectAll: HTMLElement;
_filter: HTMLInputElement;
_lbHost: HTMLElement;
_lbx: ListBox;
_cbSelectAll: HTMLInputElement;
_spSelectAll: HTMLSpanElement;
_ariaLabel: string;
_selectAllLabel: string;
_filterPlaceholder: string;
_filterText: string;
_checkOnFilter: boolean;
_delay: number;
_toSearch: any;
static _DEF_CHECKED_PATH: string;
static _ctrlTemplate: string;
/**
* Gets or sets the template used to instantiate {@link MultiSelectListBox} controls.
*/
static controlTemplate: string;
/**
* Initializes a new instance of the {@link MultiSelectListBox} class.
*
* @param element The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
* @param options The JavaScript object containing initialization data for the control.
*/
constructor(element: any, options?: any);
/**
* Gets or sets the array or {@link ICollectionView} object that contains
* the list items.
*/
itemsSource: any;
/**
* Gets the {@link ICollectionView} object used as the item source.
*/
readonly collectionView: ICollectionView<T>;
/**
* Gets or sets the minimum number of rows and/or columns required to enable
* virtualization in the drop-down {@link ListBox}.
*
* The default value for this property is a very big number, meaning virtualization is
* disabled. To enable virtualization, set its value to 0 or a positive number.
*
* For more detals, please see the {@link ListBox.virtualizationThreshold}
* property.
*/
virtualizationThreshold: number;
/**
* Gets or sets the name of the property to use as the visual
* representation of the items.
*/
displayMemberPath: string;
/**
* Gets or sets a value indicating whether items contain plain
* text or HTML.
*
* The default value for this property is **false**.
*/
isContentHtml: boolean;
/**
* Gets or sets a value that determines whether searches performed
* while the user types should case-sensitive.
*
* The default value for this property is **false**.
*/
caseSensitiveSearch: boolean;
/**
* Gets or sets the delay, in milliseconds, between when a keystroke occurs
* and when the search is performed to update the filter.
*
* This property is relevant only when the {@link showFilterInput}
* property is set to **true**.
*
* The default value for this property is **500** milliseconds.
*/
delay: number;
/**
* Gets or sets a value that determines whether the {@link MultiSelectListBox} should
* include group header items to delimit data groups.
*
* Data groups are created by modifying the {@link ICollectionView.groupDescriptions}
* property of the {@link ICollectionView} object used as an {@link itemsSource}.
*
* The {@link MultiSelectListBox} only shows the first level of grouping.
*
* The default value for this property is **false**.
*/
showGroups: boolean;
/**
* Gets or sets a value that determines whether the {@link MultiSelectListBox}
* should automatically check all filtered items when the filter text changes.
*
* The default value for this property is **true**, which causes the control
* to behave like Excel and check all visible items when the filter is applied.
*
* For example, in a control with three items "Alice", "Bob", and "Mary",
* typing "a" into the filter would cause the control to show items "Alice"
* and "Mary", and both would be checked.
*
* Setting this property to **false** prevents the control from automatically
* checking filtered items, and to keep checked items visible regardless of the
* filter value.
*
* For example, in a control with three items "Alice", "Bob", and "Mary",
* typing "a" into the filter would cause the control to show items "Alice"
* and "Mary", but neither would be checked.
* If the user then checked "Mary", and typed "b" into the filter, the list
* would show items "Mary" (still checked) and "Bob" (unchecked).
*/
checkOnFilter: boolean;
/**
* Gets or sets the index of the currently selected item.
*/
selectedIndex: number;
/**
* Gets a reference to the {@link ListBox} control hosted by this
* {@link MultiSelectListBox}.
*/
readonly listBox: ListBox;
/**
* Gets or sets whether the control should display a "filter" input
* above the items to filter the items displayed.
*
* The default value for this property is **false**.
*/
showFilterInput: boolean;
/**
* Gets or sets the string used as a placeholder for the filter input element.
*
* The default value for this property is **null**, which causes the control
* to show a localized version of the string "Filter".
*/
filterInputPlaceholder: string;
/**
* Gets or sets whether the control should display a "Select All" checkbox
* above the items to select or de-select all items.
*
* The default value for this property is **false**.
*/
showSelectAllCheckbox: boolean;
/**
* Gets or sets the string to be used as a label for the "Select All"
* checkbox that is displayed when the {@link showSelectAllCheckbox}
* property is set to true.
*
* The default value for this property is **null**, which causes the control
* to show a localized version of the string "Select All".
*/
selectAllLabel: string;
/**