devextreme/ui/text_box/ui.text_editor.base.d.ts

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (ui/text_box/ui.text_editor.base.d.ts)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import '../../jquery_augmentation';

import {
    dxElement
} from '../../core/element';

import {
    event
} from '../../events/index';

import dxButton, {
    dxButtonOptions
} from '../button';

import Editor, {
    EditorOptions
} from '../editor/editor';

/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface dxTextEditorOptions<T = dxTextEditor> extends EditorOptions<T> {
    /** Allows you to add custom buttons to the input text field. */
    buttons?: Array<string | 'clear' | dxTextEditorButton>;
    /** Specifies whether the widget can be focused using keyboard navigation. */
    focusStateEnabled?: boolean;
    /** Specifies whether the widget changes its state when a user pauses on it. */
    hoverStateEnabled?: boolean;
    /** Specifies the attributes to be passed on to the underlying HTML element. */
    inputAttr?: any;
    /** The editor mask that specifies the custom format of the entered string. */
    mask?: string;
    /** Specifies a mask placeholder. A single character is recommended. */
    maskChar?: string;
    /** A message displayed when the entered text does not match the specified pattern. */
    maskInvalidMessage?: string;
    /** Specifies custom mask rules. */
    maskRules?: any;
    /** The value to be assigned to the `name` attribute of the underlying HTML element. */
    name?: string;
    /** A function that is executed when the widget loses focus after the text field's content was changed using the keyboard. */
    onChange?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when the widget's input has been copied. */
    onCopy?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when the widget's input has been cut. */
    onCut?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when the Enter key has been pressed while the widget is focused. */
    onEnterKey?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when the widget gets focus. */
    onFocusIn?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when the widget loses focus. */
    onFocusOut?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed each time the widget's input is changed while the widget is focused. */
    onInput?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when a user is pressing a key on the keyboard. */
    onKeyDown?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** @deprecated [important]The `keyPress` event is removed from the web standards and will be deprecated in modern browsers soon. Refer to the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event) topic for details. */
/** A function that is executed when a user presses a key on the keyboard. */
    onKeyPress?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when a user releases a key on the keyboard. */
    onKeyUp?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** A function that is executed when the widget's input has been pasted. */
    onPaste?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event }) => any);
    /** The text displayed by the widget when the widget value is empty. */
    placeholder?: string;
    /** Specifies whether to display the Clear button in the widget. */
    showClearButton?: boolean;
    /** Specifies when the widget shows the mask. Applies only if useMaskedValue is true. */
    showMaskMode?: 'always' | 'onFocus';
    /** Specifies whether or not the widget checks the inner text for spelling mistakes. */
    spellcheck?: boolean;
    /** Specifies how the widget's text field is styled. */
    stylingMode?: 'outlined' | 'underlined' | 'filled';
    /** The read-only option that holds the text displayed by the widget input element. */
    text?: string;
    /** Specifies whether the value should contain mask characters or not. */
    useMaskedValue?: boolean;
    /** Specifies the current value displayed by the widget. */
    value?: any;
    /** Specifies the DOM events after which the widget's value should be updated. */
    valueChangeEvent?: string;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
/** A base class for text editing widgets. */
export default class dxTextEditor extends Editor {
    constructor(element: Element, options?: dxTextEditorOptions)
    constructor(element: JQuery, options?: dxTextEditorOptions)
    /** Removes focus from the input element. */
    blur(): void;
    /** Sets focus to the input element representing the widget. */
    focus(): void;
    /** Gets an instance of a custom action button. */
    getButton(name: string): dxButton | undefined;
}

/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface dxTextEditorButton {
    /** Specifies whether to place the button before or after the input text field. */
    location?: 'after' | 'before';
    /** Specifies the button's name. */
    name?: string;
    /** Configures the Button widget used as the action button. */
    options?: dxButtonOptions;
}