devextreme/bundles/dx.all.d.ts

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (dx.all.d.ts)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
declare global {
  interface JQuery<TElement = HTMLElement> {}
  interface JQueryEventObject {}
  interface JQueryPromise<T> {}
}
declare module DevExpress {
  /**
   * A base class for all components and UI components.
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export class Component<TProperties> {
    constructor(options?: TProperties);
    /**
     * Postpones rendering that can negatively affect performance until the endUpdate() method is called.
     */
    beginUpdate(): void;
    /**
     * Refreshes the UI component after a call of the beginUpdate() method.
     */
    endUpdate(): void;
    /**
     * Gets the UI component&apos;s instance. Use it to access other methods of the UI component.
     */
    instance(): this;
    /**
     * Detaches all event handlers from a single event.
     */
    off(eventName: string): this;
    /**
     * Detaches a particular event handler from a single event.
     */
    off(eventName: string, eventHandler: Function): this;
    /**
     * Subscribes to an event.
     */
    on(eventName: string, eventHandler: Function): this;
    /**
     * Subscribes to events.
     */
    on(events: { [key: string]: Function }): this;
    /**
     * Gets all UI component properties.
     */
    option(): TProperties;
    /**
     * Gets the value of a single property.
     */
    option<TPropertyName extends string>(
      optionName: TPropertyName
    ): TPropertyName extends keyof TProperties
      ? TProperties[TPropertyName]
      : unknown;
    /**
     * Updates the value of a single property.
     */
    option<TPropertyName extends string>(
      optionName: TPropertyName,
      optionValue: TPropertyName extends keyof TProperties
        ? TProperties[TPropertyName]
        : unknown
    ): void;
    /**
     * Updates the values of several properties.
     */
    option(options: Partial<TProperties>): void;
    /**
     * Resets a property to its default value.
     */
    resetOption(optionName: string): void;
  }
  /**
   * 
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export interface ComponentOptions<
    TDisposingEvent,
    TInitializedEvent,
    TOptionChangedEvent
  > {
    /**
     * A function that is executed before the UI component is disposed of.
     */
    onDisposing?: (e: TDisposingEvent) => void;
    /**
     * A function used in JavaScript frameworks to save the UI component instance.
     */
    onInitialized?: (e: TInitializedEvent) => void;
    /**
     * A function that is executed after a UI component property is changed.
     */
    onOptionChanged?: (e: TOptionChangedEvent) => void;
  }
  /**
   * Gets the current global configuration.
   */
  export function config(): DevExpress.common.GlobalConfig;
  /**
   * Configures your application before its launch.
   */
  export function config(config: DevExpress.common.GlobalConfig): void;
  /**
   * 
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export class DataHelperMixin {
    /**
     * Gets the DataSource instance.
     */
    getDataSource(): DevExpress.common.data.DataSource;
  }
  /**
   * Specifies the device-dependent default configuration properties for a component.
   */
  export type DefaultOptionsRule<T> = {
    device?:
      | DevExpress.common.core.environment.Device
      | DevExpress.common.core.environment.Device[]
      | ((device: DevExpress.common.core.environment.Device) => boolean);
    options: DevExpress.core.DeepPartial<T>;
  };
  /**
   * A base class for all components.
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export class DOMComponent<
    TProperties = DevExpress.DOMComponent.Properties
  > extends Component<TProperties> {
    _templateManager: DevExpress.core.TemplateManager;

    _cancelOptionChange?: string | boolean;

    constructor(
      element: DevExpress.core.UserDefinedElement,
      options?: TProperties
    );

    /**
     * Gets the instance of a UI component found using its DOM node.
     */
    static getInstance(
      element: DevExpress.core.UserDefinedElement
    ): DOMComponent<DevExpress.DOMComponent.Properties>;

    /**
     * Specifies the device-dependent default configuration properties for this component.
     */
    static defaultOptions<TProperties = DevExpress.DOMComponent.Properties>(
      rule: DefaultOptionsRule<TProperties>
    ): void;

    /**
     * Disposes of all the resources allocated to the widget instance.
     */
    dispose(): void;
    /**
     * Gets the root UI component element.
     */
    element(): DevExpress.core.DxElement;

    $element(): DevExpress.core.InternalElement<Element>;
    _getTemplate(template: unknown): DevExpress.core.FunctionTemplate;
    _invalidate(): void;
    _refresh(): void;
    _notifyOptionChanged(
      fullName: string,
      value: unknown,
      previousValue: unknown
    ): void;
    _createElement(element: HTMLElement): void;
    _validateOptions(options: TProperties): TProperties;
  }
  module DOMComponent {
    /**
     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
     */
    interface DOMComponentInstance extends DOMComponent<Properties> {}
    /**
     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
     */
    export type OptionChangedEventInfo<TComponent> =
      DevExpress.common.core.events.EventInfo<TComponent> &
        DevExpress.common.core.events.ChangedOptionInfo;
    /**
     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
     */
    type Properties = DOMComponentOptions<DOMComponentInstance>;
  }

  /**
   * 
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export interface DOMComponentOptions<TComponent>
    extends ComponentOptions<
      DevExpress.common.core.events.EventInfo<TComponent>,
      DevExpress.common.core.events.InitializedEventInfo<TComponent>,
      DevExpress.DOMComponent.OptionChangedEventInfo<TComponent>
    > {
    /**
     * 
     */
    bindingOptions?: { [key: string]: any };
    /**
     * Specifies the global attributes to be attached to the UI component&apos;s container element.
     */
    elementAttr?: { [key: string]: any };
    /**
     * Specifies the UI component&apos;s height.
     */
    height?: number | string | (() => number | string) | undefined;
    /**
     * A function that is executed before the UI component is disposed of.
     */
    onDisposing?: (
      e: DevExpress.common.core.events.EventInfo<TComponent>
    ) => void;
    /**
     * A function that is executed after a UI component property is changed.
     */
    onOptionChanged?: (
      e: DevExpress.DOMComponent.OptionChangedEventInfo<TComponent>
    ) => void;
    /**
     * Switches the UI component to a right-to-left representation.
     */
    rtlEnabled?: boolean;
    /**
     * Specifies the UI component&apos;s width.
     */
    width?: number | string | (() => number | string) | undefined;
  }
  /**
   * Configures the load panel.
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export interface ExportLoadPanel {
    /**
     * Specifies whether the load panel is enabled.
     */
    enabled?: boolean;
    /**
     * Specifies text displayed on the load panel.
     */
    text?: string;
    /**
     * Specifies the width of the load panel in pixels.
     */
    width?: number;
    /**
     * Specifies the height of the load panel in pixels.
     */
    height?: number;
    /**
     * Specifies whether to show the loading indicator.
     */
    showIndicator?: boolean;
    /**
     * Specifies a URL pointing to an image to be used as a loading indicator.
     */
    indicatorSrc?: string;
    /**
     * Specifies whether to show the pane of the load panel.
     */
    showPane?: boolean;
    /**
     * Specifies whether to shade the UI component when the load panel is shown.
     */
    shading?: boolean;
    /**
     * Specifies the shading color. Applies only if shading is true.
     */
    shadingColor?: string;
  }
  export type FloatingActionButtonDirection = 'auto' | 'up' | 'down';
  /**
   * Registers a new component in the DevExpress.ui namespace.
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export function registerComponent<TComponent>(
    name: string,
    componentClass: DevExpress.core.ComponentFactory<TComponent>
  ): void;
  /**
   * Registers a new component in the specified namespace.
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export function registerComponent<TComponent>(
    name: string,
    namespace: {
      [key: string]: DevExpress.core.ComponentFactory<DOMComponent>;
    },
    componentClass: DevExpress.core.ComponentFactory<TComponent>
  ): void;
  /**
   * Sets custom functions that compile and render templates.
   */
  export function setTemplateEngine(templateEngineOptions: {
    compile?: Function;
    render?: Function;
  }): void;
  /**
   * A template notation used to specify templates for UI component elements.
   */
  export type template = string | Function | DevExpress.core.UserDefinedElement;
  /**
   * An object that serves as a namespace for the methods required to perform validation.
   */
  export class validationEngine {
    /**
     * Gets the default validation group.
     */
    static getGroupConfig(): any;
    /**
     * Gets a validation group with a specific key.
     */
    static getGroupConfig(group: string | any): any;
    /**
     * Registers all the Validator objects extending fields of the specified ViewModel.
     */
    static registerModelForValidation(model: any): void;
    /**
     * Resets the values and validation result of the editors that belong to the default validation group.
     */
    static resetGroup(): void;
    /**
     * Resets the values and validation result of the editors that belong to the specified validation group.
     */
    static resetGroup(group: string | any): void;
    /**
     * Unregisters all the Validator objects extending fields of the specified ViewModel.
     */
    static unregisterModelForValidation(model: any): void;
    /**
     * Validates editors from the default validation group.
     */
    static validateGroup(): DevExpress.ui.dxValidationGroup.ValidationResult;
    /**
     * Validates editors from a specific validation group.
     */
    static validateGroup(
      group: string | any
    ): DevExpress.ui.dxValidationGroup.ValidationResult;
    /**
     * Validates a view model.
     */
    static validateModel(model: any): any;
  }
}
declare module DevExpress.animation {
  /**
   * @deprecated Use the DevExpress.common.core.animation.AnimationConfig type from common/core/animation instead
   */
  export type animationConfig =
    DevExpress.common.core.animation.AnimationConfig;
  /**
   * @deprecated Use the DevExpress.common.core.animation.PositionConfig type from common/core/animation instead
   */
  export interface positionConfig
    extends DevExpress.common.core.animation.PositionConfig {}
}
declare module DevExpress.common {
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export type AnimationType =
    | 'css'
    | 'fade'
    | 'fadeIn'
    | 'fadeOut'
    | 'pop'
    | 'slide'
    | 'slideIn'
    | 'slideOut';
  export type ApplyValueMode = 'instantly' | 'useButtons';
  /**
   * A custom validation rule that is checked asynchronously. Use async rules for server-side validation.
   */
  export type AsyncRule = {
    /**
     * If true, the validationCallback is not executed for null, undefined, false, and empty strings.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Indicates whether the rule should always be checked for the target value or only when the value changes.
     */
    reevaluate?: boolean;
    /**
     * Specifies the rule type. Set it to &apos;async&apos; to use the AsyncRule.
     */
    type: 'async';
    /**
     * A function that validates the target value.
     */
    validationCallback?: (options: ValidationCallbackData) => PromiseLike<any>;
  };
  export type ButtonStyle = 'text' | 'outlined' | 'contained';
  export type ButtonType = 'danger' | 'default' | 'normal' | 'success';
  /**
   * A validation rule that demands that a validated editor has a value that is equal to a specified expression.
   */
  export type CompareRule = {
    /**
     * Specifies the function whose return value is used for comparison with the validated value.
     */
    comparisonTarget?: () => any;
    /**
     * Specifies the operator to be used for comparing the validated value with the target.
     */
    comparisonType?: ComparisonOperator;
    /**
     * If set to true, empty values are valid.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Specifies the rule type. Set it to &apos;compare&apos; to use the CompareRule.
     */
    type: 'compare';
  };
  export type ComparisonOperator =
    | '!='
    | '!=='
    | '<'
    | '<='
    | '=='
    | '==='
    | '>'
    | '>=';
  /**
   * A rule with custom validation logic.
   */
  export type CustomRule = {
    /**
     * If true, the validationCallback is not executed for null, undefined, false, and empty strings.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Indicates whether the rule should be always checked for the target value or only when the target value changes.
     */
    reevaluate?: boolean;
    /**
     * Specifies the rule type. Set it to &apos;custom&apos; to use the CustomRule.
     */
    type: 'custom';
    /**
     * A function that validates the target value.
     */
    validationCallback?: (options: ValidationCallbackData) => boolean;
  };
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  type DataSourceEventName = 'changed' | 'loadError' | 'loadingChanged';
  export type DataStructure = 'plain' | 'tree';
  export type DataType =
    | 'string'
    | 'number'
    | 'date'
    | 'boolean'
    | 'object'
    | 'datetime';
  export type Direction = 'bottom' | 'left' | 'right' | 'top';
  export type DisplayMode = 'adaptive' | 'compact' | 'full';
  export type DragDirection = 'both' | 'horizontal' | 'vertical';
  export type Draggable =
    DevExpress.core.OmitInternal<DevExpress.ui.dxDraggable>;
  export type DragHighlight = 'push' | 'indicate';
  export type EditorStyle = 'outlined' | 'underlined' | 'filled';
  /**
   * A validation rule that requires that the validated field match the Email pattern.
   */
  export type EmailRule = {
    /**
     * If set to true, empty values are valid.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Specifies the rule type. Set it to &apos;email&apos; to use the EmailRule.
     */
    type: 'email';
  };
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  type EventName = 'orientationChanged';
  export type ExportFormat = 'GIF' | 'JPEG' | 'PDF' | 'PNG' | 'SVG';
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  type ExternalFormat = Intl.DateTimeFormatOptions | Intl.NumberFormatOptions;
  export type FieldChooserLayout = 0 | 1 | 2;
  export type FirstDayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
  export type Format =
    | 'billions'
    | 'currency'
    | 'day'
    | 'decimal'
    | 'exponential'
    | 'fixedPoint'
    | 'largeNumber'
    | 'longDate'
    | 'longTime'
    | 'millions'
    | 'millisecond'
    | 'month'
    | 'monthAndDay'
    | 'monthAndYear'
    | 'percent'
    | 'quarter'
    | 'quarterAndYear'
    | 'shortDate'
    | 'shortTime'
    | 'thousands'
    | 'trillions'
    | 'year'
    | 'dayOfWeek'
    | 'hour'
    | 'longDateLongTime'
    | 'minute'
    | 'second'
    | 'shortDateShortTime';
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export interface FormatObject {
    /**
     * Specifies a 3-letter ISO 4217 code for currency. Applies only if the type is &apos;currency&apos;.
     */
    currency?: string;
    /**
     * Specifies whether to apply the accounting style to formatted numbers of the `currency` type.
     */
    useCurrencyAccountingStyle?: boolean;
    /**
     * A function that converts numeric or date-time values to a string.
     */
    formatter?: (value: number | Date) => string;
    /**
     * Parses string values into numeric or date-time values. Should be used with formatter or one of the predefined formats.
     */
    parser?: (value: string) => number | Date;
    /**
     * Specifies a precision for values of numeric or currency format types.
     */
    precision?: number;
    /**
     * Specifies a predefined format. Does not apply if you have specified the formatter function.
     */
    type?: PredefinedFormat | string;
  }
  /**
   * Specifies settings that affect all DevExtreme UI components.
   */
  export type GlobalConfig = {
    /**
     * A decimal separator. No longer applies.
     * @deprecated 
     */
    decimalSeparator?: string;
    /**
     * The default currency. Accepts a 3-letter ISO 4217 code.
     */
    defaultCurrency?: string;
    /**
     * Specifies whether to apply the accounting style to formatted numbers of the `currency` type.
     */
    defaultUseCurrencyAccountingStyle?: boolean;
    /**
     * Specifies how editors&apos; text fields are styled in your application.
     */
    editorStylingMode?: EditorStyle | undefined;
    /**
     * Configures a Floating Action Button (FAB) that emits a stack of related actions (speed dial).
     */
    floatingActionButtonConfig?: {
      /**
       * Specifies the icon the FAB displays when the speed dial is opened.
       */
      closeIcon?: string;
      /**
       * Specifies the direction in which to open the speed dial menu.
       */
      direction?: FloatingActionButtonDirection;
      /**
       * Specifies the icon the FAB displays when the speed dial is closed.
       */
      icon?: string;
      /**
       * Specifies the text label displayed inside the FAB.
       */
      label?: string;
      /**
       * Limits the number of speed dial actions.
       */
      maxSpeedDialActionCount?: number;
      /**
       * Positions the FAB on the screen.
       */
      position?:
        | PositionAlignment
        | DevExpress.common.core.animation.PositionConfig
        | Function;
      /**
       * If true, the background should be shaded when the speed dial menu is open.
       */
      shading?: boolean;
    };
    /**
     * Specifies whether dates are parsed and serialized according to the ISO 8601 standard in all browsers.
     */
    forceIsoDateParsing?: boolean;
    /**
     * Specifies whether to convert string values to lowercase in filter and search requests to OData services. Applies to the following operations: &apos;startswith&apos;, &apos;endswith&apos;, &apos;contains&apos;, and &apos;notcontains&apos;.
     */
    oDataFilterToLower?: boolean;
    /**
     * @deprecated Attention! This field is not documented and should only be specified in a limited number of use cases. For more information, please submit a ticket to our Support Center.
     */
    pointerEventStrategy?: 'mouse-and-touch' | 'mouse' | 'touch';
    /**
     * @deprecated Attention! This field is not documented and should only be specified in a limited number of use cases. For more information, please submit a ticket to our Support Center.
     */
    timezones?: unknown[];
    /**
     * Specifies whether the UI components support a right-to-left representation. Available for individual UI components as well.
     */
    rtlEnabled?: boolean;
    /**
     * The decimal separator that is used when submitting a value to the server.
     */
    serverDecimalSeparator?: string;
    /**
     * A group separator. No longer applies.
     * @deprecated 
     */
    thousandsSeparator?: string;
    /**
     * 
     */
    useLegacyStoreResult?: boolean;
    /**
     * 
     */
    useLegacyVisibleIndex?: boolean;
    /**
     * A license key.
     */
    licenseKey?: string;
    buyNowLink?: string;
    licensingDocLink?: string;
  };
  export type HorizontalAlignment = 'center' | 'left' | 'right';
  export type HorizontalEdge = 'left' | 'right';
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export type HttpMethod = 'GET' | 'POST' | 'PATCH' | 'MERGE';
  export type LabelMode = 'static' | 'floating' | 'hidden' | 'outside';
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  type LoadFunctionResult<T> =
    | T
    | DevExpress.core.utils.DxPromise<T>
    | PromiseLike<T>;
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  type LoadResultArray<TItem = any> =
    | Array<TItem>
    | Array<DevExpress.common.data.GroupItem<TItem>>;
  export type MaskMode = 'always' | 'onFocus';
  export type Mode = 'auto';

  /**
   * A validation rule that demands that the validated field has a numeric value.
   */
  export type NumericRule = {
    /**
     * If set to true, empty values are valid.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Specifies the rule type. Set it to &apos;numeric&apos; to use the NumericRule.
     */
    type: 'numeric';
  };
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export interface ODataRequestOptions {
    accepts: any;
    async: boolean;
    contentType: string | boolean;
    data: any;
    dataType: string;
    headers: any;
    jsonp?: boolean;
    method: string;
    timeout: number;
    url: string;
    xhrFields: any;
  }
  export type Orientation = 'horizontal' | 'vertical';
  export type PageLoadMode = 'nextButton' | 'scrollBottom';
  export type PageOrientation = 'portrait' | 'landscape';
  /**
   * 
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export type PagerBase = {
    /**
     * Specifies the pager&apos;s display mode.
     */
    displayMode?: DisplayMode;
    /**
     * Specifies the page information text.
     */
    infoText?: string;
    /**
     * Specifies whether to show the page information.
     */
    showInfo?: boolean;
    /**
     * Specifies whether to show navigation buttons.
     */
    showNavigationButtons?: boolean;
    /**
     * Specifies whether to show the page size selector.
     */
    showPageSizeSelector?: boolean;
    /**
     * Specifies an aria-label attribute for the pager.
     */
    label?: string;
  };
  /**
   * A validation rule that requires that the validated field match a specified pattern.
   */
  export type PatternRule = {
    /**
     * If set to true, empty values are valid.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Specifies the regular expression that the validated value must match.
     */
    pattern?: RegExp | string;
    /**
     * Specifies the rule type. Set it to &apos;pattern&apos; to use the PatternRule.
     */
    type: 'pattern';
  };
  export type Position = 'bottom' | 'left' | 'right' | 'top';
  export type PositionAlignment =
    | 'bottom'
    | 'center'
    | 'left'
    | 'left bottom'
    | 'left top'
    | 'right'
    | 'right bottom'
    | 'right top'
    | 'top';
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  type PredefinedFormat = Format;
  /**
   * A validation rule that demands the target value be within the specified value range (including the range&apos;s end points).
   */
  export type RangeRule = {
    /**
     * If set to true, empty values are valid.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the maximum value allowed for the validated value.
     */
    max?: Date | number | string;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Specifies the minimum value allowed for the validated value.
     */
    min?: Date | number | string;
    /**
     * Indicates whether the rule should be always checked for the target value or only when the target value changes.
     */
    reevaluate?: boolean;
    /**
     * Specifies the rule type. Set it to &apos;range&apos; to use the RangeRule.
     */
    type: 'range';
  };
  /**
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export type ReducedNativeEventInfo<
    TComponent extends DevExpress.common.grids.GridBase
  > = Required<
    Pick<
      DevExpress.common.core.events.NativeEventInfo<
        TComponent,
        PointerEvent | MouseEvent | TouchEvent
      >,
      'component' | 'event'
    >
  >;
  /**
   * A validation rule that demands that a validated field has a value.
   */
  export type RequiredRule = {
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Indicates whether to remove the Space characters from the validated value.
     */
    trim?: boolean;
    /**
     * Specifies the rule type. Set it to &apos;required&apos; to use the RequiredRule.
     */
    type: 'required';
  };
  export type Scrollable =
    DevExpress.core.OmitInternal<DevExpress.ui.dxScrollable>;
  export type ScrollbarMode = 'always' | 'never' | 'onHover' | 'onScroll';
  export type ScrollDirection = 'both' | 'horizontal' | 'vertical';
  export type ScrollMode = 'standard' | 'virtual';
  export type SearchMode = 'contains' | 'startswith' | 'equals';
  export type SelectAllMode = 'allPages' | 'page';
  export type SimplifiedSearchMode = 'contains' | 'startswith';
  export type SingleMultipleAllOrNone = 'single' | 'multiple' | 'all' | 'none';
  export type SingleMultipleOrNone = 'single' | 'multiple' | 'none';
  export type SingleOrMultiple = 'single' | 'multiple';
  export type SingleOrNone = 'single' | 'none';
  export type SliderValueChangeMode = 'onHandleMove' | 'onHandleRelease';
  export type Sortable = DevExpress.core.OmitInternal<DevExpress.ui.dxSortable>;
  export type SortOrder = 'asc' | 'desc';
  export type StoreType = 'array' | 'local' | 'odata';
  /**
   * A validation rule that demands the target value length be within the specified value range (including the range&apos;s end points).
   */
  export type StringLengthRule = {
    /**
     * If set to true, empty values are valid.
     */
    ignoreEmptyValue?: boolean;
    /**
     * Specifies the maximum length allowed for the validated value.
     */
    max?: number;
    /**
     * Specifies the message that is shown if the rule is broken.
     */
    message?: string;
    /**
     * Specifies the minimum length allowed for the validated value.
     */
    min?: number;
    /**
     * Indicates whether or not to remove the Space characters from the validated value.
     */
    trim?: boolean;
    /**
     * Specifies the rule type. Set it to &apos;stringLength&apos; to use the StringLengthRule.
     */
    type: 'stringLength';
  };
  export type SubmenuShowMode = 'onClick' | 'onHover';
  export type TabsIconPosition = 'top' | 'end' | 'bottom' | 'start';
  export type TabsStyle = 'primary' | 'secondary';
  export type TextBoxPredefinedButton = 'clear';

  /**
   * 
   */
  export type TextEditorButton = {
    /**
     * Specifies whether to place the button before or after the input text field.
     */
    location?: TextEditorButtonLocation;
    /**
     * Specifies the button&apos;s name.
     */
    name?: string | undefined;
    /**
     * Configures the Button UI component used as the action button.
     */
    options?: DevExpress.ui.dxButton.Properties | undefined;
  };
  export type TextEditorButtonLocation = 'after' | 'before';
  export type ToolbarItemComponent =
    | 'dxAutocomplete'
    | 'dxButton'
    | 'dxButtonGroup'
    | 'dxCheckBox'
    | 'dxDateBox'
    | 'dxDropDownButton'
    | 'dxMenu'
    | 'dxSelectBox'
    | 'dxSwitch'
    | 'dxTabs'
    | 'dxTextBox';
  export type ToolbarItemLocation = 'after' | 'before' | 'center';
  export type TooltipShowMode = 'always' | 'onHover';
  export type ValidationCallbackData = {
    value?: any;
    rule: any;
    validator: any;
    data?: any;
    column?: any;
    formItem?: any;
  };
  export type ValidationMessageMode = 'always' | 'auto';
  /**
   * Specifies a validation rule.
   */
  export type ValidationRule =
    | AsyncRule
    | CompareRule
    | CustomRule
    | EmailRule
    | NumericRule
    | PatternRule
    | RangeRule
    | RequiredRule
    | StringLengthRule;
  export type ValidationRuleType =
    | 'required'
    | 'numeric'
    | 'range'
    | 'stringLength'
    | 'custom'
    | 'compare'
    | 'pattern'
    | 'email'
    | 'async';
  export type ValidationStatus = 'valid' | 'invalid' | 'pending';
  export type VerticalAlignment = 'bottom' | 'center' | 'top';
  export type VerticalEdge = 'bottom' | 'top';
}
declare module DevExpress.common.charts {
  export type AnimationEaseMode = 'easeOutCubic' | 'linear';
  export type AnnotationType = 'text' | 'image' | 'custom';
  export type ArgumentAxisHoverMode = 'allArgumentPoints' | 'none';
  export type AxisScaleType = 'continuous' | 'discrete' | 'logarithmic';
  /**
   * 
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export interface BaseLegend {
    /**
     * Colors the legend&apos;s background.
     */
    backgroundColor?: string | undefined;
    /**
     * Configures the legend&apos;s border.
     */
    border?: {
      /**
       * Colors the legend&apos;s border.
       */
      color?: string;
      /**
       * Makes all the legend&apos;s corners rounded.
       */
      cornerRadius?: number;
      /**
       * Sets a dash style for the legend&apos;s border.
       */
      dashStyle?: DashStyle;
      /**
       * Specifies the transparency of the legend&apos;s border.
       */
      opacity?: number | undefined;
      /**
       * Shows the legend&apos;s border.
       */
      visible?: boolean;
      /**
       * Specifies the width of the legend&apos;s border in pixels.
       */
      width?: number;
    };
    /**
     * Arranges legend items into several columns.
     */
    columnCount?: number;
    /**
     * Specifies an empty space between item columns in pixels.
     */
    columnItemSpacing?: number;
    /**
     * Specifies the legend items&apos; font properties.
     */
    font?: Font;
    /**
     * Along with verticalAlignment, specifies the legend&apos;s position.
     */
    horizontalAlignment?: HorizontalAlignment;
    /**
     * Specifies the text&apos;s position relative to the marker in a legend item.
     */
    itemTextPosition?: Position | undefined;
    /**
     * Aligns items in the last column or row (depending on the legend&apos;s orientation). Applies when legend items are not divided into columns or rows equally.
     */
    itemsAlignment?: HorizontalAlignment | undefined;
    /**
     * Generates an empty space, measured in pixels, around the legend.
     */
    margin?:
      | number
      | {
          /**
           * Specifies the legend&apos;s bottom margin in pixels.
           */
          bottom?: number;
          /**
           * Specifies the legend&apos;s left margin in pixels.
           */
          left?: number;
          /**
           * Specifies the legend&apos;s right margin in pixels.
           */
          right?: number;
          /**
           * Specifies the legend&apos;s top margin in pixels.
           */
          top?: number;
        };
    /**
     * Specifies the marker&apos;s size in a legend item in pixels.
     */
    markerSize?: number;
    /**
     * Arranges legend items vertically (in a column) or horizontally (in a row). The default value is &apos;horizontal&apos; if the legend.horizontalAlignment is &apos;center&apos;. Otherwise, it is &apos;vertical&apos;.
     */
    orientation?: Orientation | undefined;
    /**
     * Generates an empty space, measured in pixels, between the legend&apos;s left/right border and its items.
     */
    paddingLeftRight?: number;
    /**
     * Generates an empty space, measured in pixels, between the legend&apos;s top/bottom border and its items.
     */
    paddingTopBottom?: number;
    /**
     * Arranges legend items in several rows.
     */
    rowCount?: number;
    /**
     * Specifies an empty space between item rows in pixels.
     */
    rowItemSpacing?: number;
    /**
     * Configures the legend title.
     */
    title?:
      | {
          /**
           * Specifies the legend title&apos;s font properties.
           */
          font?: Font;
          /**
           * Along with verticalAlignment, specifies the legend title&apos;s position.
           */
          horizontalAlignment?: HorizontalAlignment | undefined;
          /**
           * Generates space around the legend title.
           */
          margin?: {
            /**
             * Specifies the legend title&apos;s bottom margin.
             */
            bottom?: number;
            /**
             * Specifies the legend title&apos;s left margin.
             */
            left?: number;
            /**
             * Specifies the legend title&apos;s right margin.
             */
            right?: number;
            /**
             * Specifies the legend title&apos;s top margin.
             */
            top?: number;
          };
          /**
           * Reserves a pixel-measured space for the legend title.
           */
          placeholderSize?: number | undefined;
          /**
           * Configures the legend subtitle. The subtitle appears only if the title is specified.
           */
          subtitle?:
            | {
                /**
                 * Specifies the legend subtitle&apos;s font properties.
                 */
                font?: Font;
                /**
                 * Specifies the distance between the legend&apos;s title and subtitle in pixels.
                 */
                offset?: number;
                /**
                 * Specifies the subtitle&apos;s text.
                 */
                text?: string;
              }
            | string;
          /**
           * Specifies the legend title&apos;s text.
           */
          text?: string;
          /**
           * Specifies the legend title&apos;s vertical alignment.
           */
          verticalAlignment?: VerticalEdge;
        }
      | string;
    /**
     * Along with horizontalAlignment, specifies the legend&apos;s position.
     */
    verticalAlignment?: VerticalEdge;
    /**
     * Specifies the legend&apos;s visibility.
     */
    visible?: boolean;
  }
  /**
   * 
   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
   */
  export interface BaseLegendItem {
    /**
     * A legend item marker.
     */
    marker?: {
      /**
       * The marker&apos;s color.
       */
      fill?: string;
      /**
       * The marker&apos;s opacity.
       */
      opacity?: number;
      /**
       * The markerSize in pixels.
       */
      size?: number;
      /**
       * The marker&apos;s state.
       */
      state?: LegendMarkerState;
    };
    /**
     * The text that the legend item displays.
     */
    text?: string;
    /**
     * Indicates and specifies whether the legend item is visible.
     */
    visible?: boolean;
  }
  export type ChartsAxisLabelOverlap = 'rotate' | 'stagger' | 'none' | 'hide';
  /**
   * Specifies the chart&apos;s color.
   */
  export type ChartsColor = {
    /**
     * Specifies the base color for series, points and labels.
     */
    base?: string | undefined;
    /**
     * Specifies the id of the gradient or pattern.
     */
    fillId?: string | undefined;
  };
  export type ChartsDataType = 'datetime' | 'numeric' | 'string';
  export type ChartsLabelOverlap = 'hide' | 'none' | 'stack';
  export type DashStyle = 'dash' | 'dot' | 'longDash' | 'solid';
  export type DiscreteAxisDivisionMode = 'betweenLabels' | 'crossLabels';
  /**
   * Font properties.
   */
  export type Font = {
    /**
     * Specifies font color.
     */
    color?: string;
    /**
     * Specifies font family.
     */
    family?: string;
    /**
     * Specifies font opacity.
     */
    opacity?: number;
    /**
     * Specifies font size.
     */
    size?: string | number;
    /**
     * Specifies font weight. Accepts values from 100 to 900 in increments of 100. Higher values increase boldness.
     */
    weight?: number;
  };
  /**
   * Specifies colors on which gradient is based.
   */
  export type GradientColor = {
    /**
     * Specifies the starting point of a color.
     */
    offset: number | string | undefined;
    /**
     * Specifies one of the gradient colors.
     */
    color: string | undefined;
  };
  export type HatchDirection = 'left' | 'none' | 'right';
  export type LabelOverlap = 'hide' | 'none';
  export type LabelPosition = 'columns' | 'inside' | 'outside';
  export type LegendHoverMode = 'excludePoints' | 'includePoints' | 'none';
  /**
   * An object that provides information about a legend item.
   */
  export interface LegendItem extends BaseLegendItem {
    /**
     * The series that the item represents on the legend.
     */
    series?: DevExpress.viz.baseSeriesObject;
  }
  export type LegendMarkerState = 'normal' | 'hovered' | 'selected';
  export type Palette =
    | 'Bright'
    | 'Harmony Light'
    | 'Ocean'
    | 'Pastel'
    | 'Soft'
    | 'Soft Pastel'
    | 'Vintage'
    | 'Violet'
    | 'Carmine'
    | 'Dark Moon'
    | 'Dark Violet'
    | 'Green Mist'
    | 'Soft Blue'
    | 'Material'
    | 'Office';
  export type PaletteColorSet = 'simpleSet' | 'indicatingSet' | 'gradientSet';
  export type PaletteExtensionMode = 'alternate' | 'blend' | 'extrapolate';
  export type PointInteractionMode =
    | 'allArgumentPoints'
    | 'allSeriesPoints'
    | 'none'
    | 'onlyPoint';
  export type PointSymbol =
    | 'circle'
    | 'cross'
    | 'polygon'
    | 'square'
    | 'triangle'
    | 'triangleDown'
    | 'triangleUp';
  /**
   * Registers a new gradient.
   */
  export function registerGradient(
    type: string,
    options: { rotationAngle?: number; colors: Array<GradientColor> }
  ): string;
  /**
   * Registers a new pattern.
   */
  export function registerPattern(options: {
    width: number | string;
    height: number | string;
    template: (container: SVGGElement) => void;
  }): string;
  export type RelativePosition = 'inside' | 'outside';
  /**
   * A class describing a scale break range. Inherited by scale breaks in the Chart and RangeSelector.
   */
  export type ScaleBreak = {
    /**
     * Along with the startValue property, limits the scale break.
     */
    endValue?: number | Date | string | undefined;
    /**
     * Along with the endValue property, limits the scale break.
     */
    startValue?: number | Date | string | undefined;
  };
  export type ScaleBreakLineStyle = 'straight' | 'waved';
  export type SeriesHoverMode =
    | 'allArgumentPoints'
    | 'allSeriesPoints'
    | 'excludePoints'
    | 'includePoints'
    | 'nearestPoint'
    | 'none'
    | 'onlyPoint';
  export interface SeriesLabel {
    /**
     * Aligns point labels in relation to their points.
     */
    alignment?: HorizontalAlignment;
    /**
     * Formats the point argument before it is displayed in the point label. To format the point value, use the format property.
     */
    argumentFormat?: DevExpress.common.core.localization.Format | undefined;
    /**
     * Colors the point labels&apos; background. The default color is inherited from the points.
     */
    backgroundColor?: string | undefined;
    /**
     * Configures the borders of point labels.
     */
    border?: {
      /**
       * Colors the border.
       */
      color?: string | undefined;
      /**
       * Specifies the dash style of the border.
       */
      dashStyle?: DashStyle | undefined;
      /**
       * Makes the border visible.
       */
      visible?: boolean;
      /**
       * Specifies the width of the border in pixels.
       */
      width?: number;
    };
    /**
     * Configures the label connectors.
     */
    connector?: {
      /**
       * Colors the connectors.
       */
      color?: string | undefined;
      /**
       * Makes the connectors visible. Applies only if label.visible is set to true.
       */
      visible?: boolean;
      /**
       * Specifies the width of the connectors in pixels.
       */
      width?: number;
    };
    /**
     * Customizes text displayed by point labels.
     */
    customizeText?: (pointInfo: any) => string;
    /**
     * Specifies font properties for point labels.
     */
    font?: Font;
    /**
     * Formats the point value before it is displayed in the point label.
     */
    format?: DevExpress.common.core.localization.Format | undefined;
    /**
     * Along with verticalOffset, shifts point labels from their initial positions.
     */
    horizontalOffset?: number;
    /**
     * Specifies whether to display point labels inside or outside of series points. Applies only to bubble, range-like and bar-like series.
     */
    position?: RelativePosition;
    /**
     * Rotates point labels.
     */
    rotationAngle?: number;
    /**
     * Specifies whether or not to show labels for points with zero value. Applies only to bar-like series.
     */
    showForZeroValues?: boolean;
    /**
     * Along with horizontalOffset, shifts point labels from their initial positions.
     */
    verticalOffset?: number;
    /**
     * Makes the point labels visible.
     */
    visible?: boolean;
    /**
     * Specifies the label&apos;s text.
     */
    displayFormat?: string | undefined;
  }
  export interface SeriesPoint {
    /**
     * Configures the appearance of the series point border in scatter, line- and area-like series.
     */
    border?: {
      /**
       * Colors the border.
       */
      color?: string | undefined;
      /**
       * Makes the border visible.
       */
      visible?: boolean;
      /**
       * Sets the width of the border in pixels.
       */
      width?: number;
    };
    /**
     * Colors the series points.
     */
    color?: string | ChartsColor | undefined;
    /**
     * Specifies series elements to be highlighted when a user pauses on a series point.
     */
    hoverMode?: PointInteractionMode;
    /**
     * Configures the appearance adopted by a series point when a user pauses on it.
     */
    hoverStyle?: {
      /**
       * Configures the appearance of the point border when a user pauses on the point.
       */
      border?: {
        /**
         * Specifies the color of the point border when the point is in the hovered state.
         */
        color?: string | undefined;
        /**
         * Makes the border visible when a user pauses on the series point.
         */
        visible?: boolean;
        /**
         * Specifies the width of the point border when the point is in the hovered state.
         */
        width?: number;
      };
      /**
       * Specifies the color of series points in the hovered state.
       */
      color?: string | ChartsColor | undefined;
      /**
       * Specfies the diameter of series points in the hovered state.
       */
      size?: number | undefined;
    };
    /**
     * Substitutes the standard point symbols with an image.
     */
    image?:
      | string
      | undefined
      | {
          /**
           * Specifies the height of the image used instead of a point marker.
           */
          height?:
            | number
            | {
                /**
                 * Specifies the height of the image that represents the maximum point in a range area series.
                 */
                rangeMaxPoint?: number | undefined;
                /**
                 * Specifies the height of the image that represents the minimum point in a range area series.
                 */
                rangeMinPoint?: number | undefined;
              };
          /**
           * Specifies the URL of the image to be used as a point marker.
           */
          url?:
            | string
            | undefined
            | {
                /**
                 * Specifies the URL of the image to be used as a maximum point marker.
                 */
                rangeMaxPoint?: string | undefined;
                /**
                 * Specifies the URL of the image to be used as a maximum point marker.
                 */
                rangeMinPoint?: string | undefined;
              };
          /**
           * Specifies the width of an image that is used as a point marker.
           */