@fintatech/fintachart 3.1.0 → 3.1.1

package/d.ts/FintaChart.d.ts

@@ -1,19 +1,13 @@
-/// <reference path="./frameworks/jquery.d.ts" />
-/// <reference path="./frameworks/jquery-ui.d.ts" />
 /// <reference path="./frameworks/Intl.d.ts" />
 /// <reference path="./frameworks/moment.d.ts" />
 /// <reference path="./frameworks/detectizr.d.ts" />
 /// <reference path="./frameworks/dom-to-image-more.d.ts" />
 /// <reference path="./frameworks/i18nextXHRBackend.d.ts" />
-/// <reference path="./frameworks/jquery-i18next.d.ts" />
-/// <reference path="./frameworks/jquery.ui.touch-punch.d.ts" />
-/// <reference path="./frameworks-modified/bootstrap-select.d.ts" />
 /// <reference path="./frameworks-modified/i18next.d.ts" />
-/// <reference path="./frameworks-modified/jquery.autocolumnlist.d.ts" />
-/// <reference path="./frameworks-modified/jquery.resizable.d.ts" />
 /// <reference path="./frameworks-modified/spectrum.d.ts" />
 /// <reference path="./frameworks-modified/switchery.d.ts" />
 /// <reference path="./frameworks-modified/toastr.d.ts" />
+/// <reference path="./frameworks-modified/autocolumnlist.d.ts" />
 declare module FintaChart {
     /**
      * Interface contains method to cleanup internal resources
@@ -353,6 +347,8 @@ interface Document {
     msFullscreenElement?: Element;
     msFullscreenEnabled?: boolean;
     webkitFullscreenEnabled?: boolean;
+    querySelector<E extends Element = any>(selectors: string): E | null;
+    querySelectorAll<E extends Element = any>(selectors: string): NodeListOf<E>;
     mozCancelFullScreen(): any;
     msExitFullscreen(): any;
     webkitExitFullscreen(): any;
@@ -361,10 +357,16 @@ interface Element {
     ALLOW_KEYBOARD_INPUT?: number;
     mozFullScreenElement: any;
     msFullscreenElement: any;
+    querySelector<E extends Element = any>(selectors: string): E | null;
+    querySelectorAll<E extends Element = any>(selectors: string): NodeListOf<E>;
+    closest<E extends Element = any>(selectors: string): E | null;
     mozRequestFullScreen(): any;
     msRequestFullscreen(): any;
     webkitRequestFullscreen(flag?: number): any;
 }
+interface Event {
+    key?: string;
+}
 declare module FintaChart {
     /**
      * Represents html extensions
@@ -403,35 +405,35 @@ declare module FintaChart {
          * @param value
          * @return
          */
-        static cleanupHtmlCode(value: string | JQuery): JQuery;
+        static cleanupHtmlCode(value: string | HTMLElement): HTMLElement;
         /**
          * Sets back ground color
          *
          * @param control
          * @param backgroundColors
          */
-        static background(control: JQuery, backgroundColors: string[] | string): void;
+        static background(control: HTMLElement, backgroundColors: string[] | string): void;
         /**
          * Sets back ground color
          *
          * @param control
          * @param color
          */
-        static backgroundColor(control: JQuery, color: string): void;
+        static backgroundColor(control: HTMLElement, color: string): void;
         /**
          * Set background color with gradient
          *
          * @param control
          * @param colors
          */
-        static gradientBackground(control: JQuery, colors: string[]): void;
+        static gradientBackground(control: HTMLElement, colors: string[]): void;
         /**
          * Sets visibility
          *
          * @param control
          * @param visible
          */
-        static visibility(control: JQuery, visible: boolean): void;
+        static visibility(control: HTMLElement, visible: boolean): void;
         /**
          * Updates canvas size
          *
@@ -444,23 +446,298 @@ declare module FintaChart {
         static downloadFile(data: string, fileName: string, fileType?: string): void;
     }
 }
-interface JQuery {
-    jqAppend(tag: string, ...classes: string[]): JQuery;
-    jqAppendCanvas(): JQuery;
-    jqBorder(border: string, theme: FintaChart.IStrokeTheme): JQuery;
-    jqClientToLocalPoint(clientX: number, clientY: number): FintaChart.IPoint;
-    jqContentSize(): FintaChart.ISize;
-    jqFill(theme: FintaChart.IFillTheme): JQuery;
-    jqFrame(frame: FintaChart.IBounds): void;
-    jqLocalToClientPoint(clientX: number, clientY: number): FintaChart.IPoint;
-    jqLocalize(key: string, defaultValue?: string): JQuery;
-    jqPosition(left: number, top: number): JQuery;
-    jqPrepend(tag: string, ...classes: string[]): JQuery;
-    jqSize(): FintaChart.ISize;
-    jqTextStyle(theme: FintaChart.ITextTheme): JQuery;
-    jqTop(offset: string): JQuery;
+declare module FintaChart {
+    /**
+     * Native DOM utility functions replacing legacy patterns.
+     *
+     * @category Utils
+     */
+    class DomUtils {
+        /**
+         * Creates an HTMLElement from an HTML string.
+         * If the string contains multiple root elements, wraps them in a div.
+         *
+         * @param html The HTML string to parse.
+         * @return The created element.
+         */
+        static createElement(html: string): HTMLElement;
+        /**
+         * Creates an array of HTMLElements from an HTML string.
+         * Unlike createElement, this preserves multiple root elements
+         * without wrapping them in a container div.
+         *
+         * @param html The HTML string to parse.
+         * @return Array of created elements.
+         */
+        static createElements(html: string): HTMLElement[];
+        /**
+         * Creates and appends a child element with optional CSS classes.
+         *
+         * @param parent The parent element.
+         * @param tag The tag name for the new element.
+         * @param classes CSS classes to add.
+         * @return The created element.
+         */
+        static appendElement(parent: HTMLElement, tag: string, ...classes: string[]): HTMLElement;
+        /**
+         * Creates and prepends a child element with optional CSS classes.
+         *
+         * @param parent The parent element.
+         * @param tag The tag name for the new element.
+         * @param classes CSS classes to add.
+         * @return The created element.
+         */
+        static prependElement(parent: HTMLElement, tag: string, ...classes: string[]): HTMLElement;
+        /**
+         * Creates and appends an absolutely-positioned canvas element.
+         *
+         * @param parent The parent element.
+         * @return The created canvas element.
+         */
+        static appendCanvas(parent: HTMLElement): HTMLCanvasElement;
+        /**
+         * Applies border style from a stroke theme.
+         *
+         * @param el The target element.
+         * @param border The CSS border property name (e.g. 'border', 'border-top').
+         * @param theme The stroke theme.
+         */
+        static applyBorder(el: HTMLElement, border: string, theme: IStrokeTheme): void;
+        /**
+         * Applies border style with fixed 0.05em width from a stroke theme.
+         *
+         * @param el The target element.
+         * @param border The CSS border property name.
+         * @param theme The stroke theme.
+         */
+        static applyBorderBFT(el: HTMLElement, border: string, theme: IStrokeTheme): void;
+        /**
+         * Applies fill background color from a fill theme.
+         *
+         * @param el The target element.
+         * @param theme The fill theme.
+         */
+        static applyFill(el: HTMLElement, theme: IFillTheme): void;
+        /**
+         * Applies text style from a text theme.
+         *
+         * @param el The target element.
+         * @param theme The text theme.
+         */
+        static applyTextStyle(el: HTMLElement, theme: ITextTheme): void;
+        /**
+         * Sets a CSS property on an element.
+         *
+         * @param el The target element.
+         * @param prop The CSS property name.
+         * @param value The CSS property value.
+         */
+        static css(el: HTMLElement, prop: string, value: string | number): void;
+        /**
+         * Converts client (viewport) coordinates to local element coordinates.
+         *
+         * @param el The reference element.
+         * @param clientX Client X coordinate.
+         * @param clientY Client Y coordinate.
+         * @return Local point coordinates.
+         */
+        static clientToLocalPoint(el: HTMLElement, clientX: number, clientY: number): IPoint;
+        /**
+         * Converts local element coordinates to client (viewport) coordinates.
+         *
+         * @param el The reference element.
+         * @param localX Local X coordinate.
+         * @param localY Local Y coordinate.
+         * @return Client point coordinates.
+         */
+        static localToClientPoint(el: HTMLElement, localX: number, localY: number): IPoint;
+        /**
+         * Returns the content size (inner dimensions excluding borders, including padding).
+         * Equivalent to legacy innerWidth/innerHeight helpers.
+         *
+         * @param el The element.
+         * @return The content size.
+         */
+        static contentSize(el: HTMLElement): ISize;
+        /**
+         * Returns the outer size including borders.
+         * Equivalent to legacy outerWidth/outerHeight helpers.
+         *
+         * @param el The element.
+         * @return The outer size.
+         */
+        static outerSize(el: HTMLElement): ISize;
+        /**
+         * Sets the position and size of an element.
+         *
+         * @param el The target element.
+         * @param frame The bounds to apply.
+         */
+        static setFrame(el: HTMLElement, frame: IBounds): void;
+        /**
+         * Sets the CSS position (left, top) of an element.
+         *
+         * @param el The target element.
+         * @param left Left offset in pixels.
+         * @param top Top offset in pixels.
+         */
+        static setPosition(el: HTMLElement, left: number, top: number): void;
+        /**
+         * Centers element horizontally in the viewport with a given top offset.
+         * Replaces legacy jqTop extension.
+         *
+         * @param el The target element.
+         * @param topOffset The top CSS value (e.g. '6rem').
+         */
+        static centerHorizontally(el: HTMLElement, topOffset: string): void;
+        /**
+         * Shows an element by clearing its display style.
+         *
+         * @param el The element to show.
+         */
+        static show(el: HTMLElement | null): void;
+        /**
+         * Hides an element by setting display to none.
+         *
+         * @param el The element to hide.
+         */
+        static hide(el: HTMLElement | null): void;
+        /**
+         * Toggles element visibility.
+         *
+         * @param el The element to toggle.
+         * @param visible If provided, forces visible/hidden state.
+         */
+        static toggle(el: HTMLElement | null, visible?: boolean): void;
+        /**
+         * Sets the i18n data attribute and optional default text.
+         *
+         * @param el The target element.
+         * @param key The i18n key.
+         * @param defaultValue Optional default text.
+         */
+        static localize(el: HTMLElement, key: string, defaultValue?: string): void;
+        /**
+         * Finds a single descendant matching the selector.
+         *
+         * @param el The parent element.
+         * @param selector CSS selector.
+         * @return The matching element or null.
+         */
+        static find(el: HTMLElement, selector: string): HTMLElement | null;
+        /**
+         * Finds all descendants matching the selector.
+         *
+         * @param el The parent element.
+         * @param selector CSS selector.
+         * @return Array of matching elements.
+         */
+        static findAll(el: HTMLElement, selector: string): HTMLElement[];
+        /**
+         * Removes all child elements matching a tag from an element.
+         * Used for HTML sanitization.
+         *
+         * @param el The parent element.
+         * @param tags Tag names to remove.
+         */
+        static removeChildrenByTag(el: HTMLElement, ...tags: string[]): void;
+        /**
+         * Inserts an element after a reference element.
+         *
+         * @param newElement The element to insert.
+         * @param referenceElement The reference element.
+         * @return The inserted element.
+         */
+        static insertAfter(newElement: HTMLElement, referenceElement: HTMLElement): HTMLElement;
+        /**
+         * Deep clones an object. Replaces $.extend(true, {}, obj).
+         *
+         * @param obj The object to clone.
+         * @return The cloned object.
+         */
+        static deepClone<T>(obj: T): T;
+    }
 }
 declare module FintaChart {
+    /**
+     * Draggable position info passed to callbacks.
+     */
+    interface IDraggablePosition {
+        left: number;
+        top: number;
+    }
+    /**
+     * Configuration options for makeDraggable.
+     */
+    interface IDraggableOptions {
+        /** Element used as drag handle. If not set, the element itself is the handle. */
+        handle?: HTMLElement | string;
+        /** Constrains dragging within the given element, or "window" for viewport. */
+        containment?: HTMLElement | string;
+        /** Restricts dragging to a single axis: 'x' or 'y'. */
+        axis?: 'x' | 'y';
+        /** Called when dragging starts. */
+        onStart?: () => void;
+        /** Called during dragging. */
+        onDrag?: (position: IDraggablePosition) => void;
+        /** Called when dragging stops. */
+        onStop?: (position: IDraggablePosition) => void;
+    }
+    /**
+     * Controller returned by makeDraggable for managing the draggable instance.
+     */
+    interface IDraggableController {
+        /** Destroys the draggable behavior, removing all event listeners. */
+        destroy(): void;
+        /** Enables or disables dragging. */
+        setEnabled(enabled: boolean): void;
+    }
+    /**
+     * Makes an element draggable using native pointer events.
+     * Replaces legacy UI .draggable().
+     *
+     * @param el The element to make draggable.
+     * @param options Configuration options.
+     * @return A controller for managing the draggable.
+     */
+    function makeDraggable(el: HTMLElement, options?: IDraggableOptions): IDraggableController;
+}
+declare module FintaChart {
+    /**
+     * Configuration options for makeResizable.
+     */
+    interface IResizableOptions {
+        /** Direction of resizing: 'horizontal' or 'vertical'. */
+        direction: 'horizontal' | 'vertical';
+        /** Minimum width in pixels (for horizontal). */
+        minWidth?: number;
+        /** Minimum height in pixels (for vertical). */
+        minHeight?: number;
+        /** Container element for boundary constraints. */
+        container?: HTMLElement;
+        /** Called when resizing starts. */
+        onStart?: () => void;
+        /** Called during resizing. */
+        onResize?: () => void;
+        /** Called when resizing stops. */
+        onStop?: () => void;
+    }
+    /**
+     * Controller returned by makeResizable for managing the resizable instance.
+     */
+    interface IResizableController {
+        /** Destroys the resizable behavior, removing all event listeners. */
+        destroy(): void;
+    }
+    /**
+     * Makes an element resizable by adding drag handles on its edges.
+     * Replaces legacy UI .resizable() with custom implementation.
+     *
+     * @param el The element to make resizable.
+     * @param options Configuration options.
+     * @return A controller for managing the resizable.
+     */
+    function makeResizable(el: HTMLElement, options: IResizableOptions): IResizableController;
 }
 declare module FintaChart {
 }
@@ -485,9 +762,6 @@ declare module FintaChart {
 declare module FintaChart {
     function createChart(container: HTMLElement, config: IChartConfig): Chart;
 }
-interface JQuery {
-    FintaChart(config: FintaChart.IChartConfig): FintaChart.Chart;
-}
 declare module FintaChart {
     /**
      * Represents string padding options.
@@ -531,15 +805,12 @@ declare module FintaChart {
         static reverse(str: string): string;
     }
 }
-interface JQuery {
-    tcd(): FintaChart.ITcdJQuery;
-}
 declare module FintaChart {
     /**
-     * Represents jQuery
+     * Represents a chainable DOM helper
      *
      */
-    interface ITcdJQuery {
+    interface ITcdDomHelper {
         /**
          * Returns shape settings drag panel
          *
@@ -588,7 +859,7 @@ declare module FintaChart {
          * @param config
          * @return
          */
-        numericField(config: INumericFieldConfig): JQuery;
+        numericField(config: INumericFieldConfig): HTMLElement;
         /**
          * Returns scroll bar
          *
@@ -637,6 +908,10 @@ declare module FintaChart {
          */
         waitingBar(chart: Chart): IWaitingBar;
     }
+    /**
+     * Standalone native-element factory. Replaces $(el).tcd() pattern.
+     */
+    function tcd(el: HTMLElement): ITcdDomHelper;
 }
 declare module FintaChart {
     type TDataRowsValue = Date | number;
@@ -2113,7 +2388,7 @@ declare module FintaChart {
         /**
          * Event object
          */
-        evt: JQueryEventObject;
+        evt: Event;
         /**
          * Pane
          */
@@ -2987,12 +3262,14 @@ declare module FintaChart {
         private _inFullWindowMode;
         private _scrollbar;
         private _toolbar;
+        private _onFullscreenChanged;
+        private _onFullWindowChanged;
         /**
          * Creates an instance of ChartContainer.
          *
          * @param parent
          */
-        constructor(parent: JQuery);
+        constructor(parent: HTMLElement);
         /**
          * Get shape settings drag pane
          */
@@ -3013,7 +3290,7 @@ declare module FintaChart {
         /**
          * Get parent
          */
-        get parent(): JQuery;
+        get parent(): HTMLElement;
         /**
          * Get scroll bar
          */
@@ -3061,10 +3338,18 @@ declare module FintaChart {
          * Loads html resource.
          *
          * @param relativePath The path to the resource relative to the root HTML dialogs path.
-         * @param clone The flag that indicates whether resulting JQuery element should be cloned.
-         * @return Promise which will be resolved with JQuery element.
+         * @param clone The flag that indicates whether resulting element should be cloned.
+         * @return Promise which will be resolved with HTMLElement.
+         */
+        static loadHtml(relativePath: string, clone?: boolean): Promise<HTMLElement>;
+        /**
+         * Loads html resource as native HTMLElement.
+         *
+         * @param relativePath The path to the resource relative to the root HTML dialogs path.
+         * @param clone The flag that indicates whether resulting element should be cloned.
+         * @return Promise which will be resolved with HTMLElement.
          */
-        static loadHtml(relativePath: string, clone?: boolean): Promise<JQuery>;
+        static loadHtmlElement(relativePath: string, clone?: boolean): Promise<HTMLElement>;
         private static getUri;
     }
 }
@@ -3085,7 +3370,13 @@ declare module FintaChart {
          * @param chart The chart.
          * @param element The element to localize.
          */
-        static localize(chart: Chart, element?: JQuery): Promise<void>;
+        static localize(chart: Chart, element?: HTMLElement): Promise<void>;
+        /**
+         * Localizes an HTMLElement using the internal localization adapter.
+         *
+         * @param element The element to localize.
+         */
+        static localizeElement(element: HTMLElement): void;
         /**
          * @description Localizes text
          * @static
@@ -3126,6 +3417,9 @@ declare module FintaChart {
         private static isInitialized;
         private static init;
         private static prepare;
+        private static _localizeElement;
+        private static _applyLocalization;
+        private static _applyLocalizedValue;
         private static _localize;
     }
 }
@@ -3188,7 +3482,7 @@ declare module FintaChart {
         private static readonly _svgClass;
         private static readonly _svgPerName;
         private static readonly _htmlElementsPerSvgName;
-        private static _container;
+        private static _nativeContainer;
         private static _config;
         /**
          * Initializes
@@ -3201,12 +3495,14 @@ declare module FintaChart {
          *
          * @param htmlElement The HTML element.
          */
-        static load(htmlElement?: JQuery): void;
+        static load(htmlElement?: HTMLElement): void;
         private static getPath;
         private static getContainer;
         private static subscribe;
+        private static resolveNativeElement;
         private static loadElement;
         private static loadFile;
+        private static sanitizeSvg;
         private static updateElements;
         private static updateElement;
     }
@@ -4302,7 +4598,7 @@ declare module FintaChart {
         /**
          * The parent element.
          */
-        parent: JQuery;
+        parent: HTMLElement;
         /**
          * The size of the canvas.
          */
@@ -4313,17 +4609,17 @@ declare module FintaChart {
      *
      */
     class CanvasLayer extends Component {
-        private _canvas;
-        private _parent;
+        private _canvasEl;
+        private _parentEl;
         private _renderer;
         /**
          * The canvas element.
          */
-        get canvas(): JQuery;
+        get canvas(): HTMLCanvasElement;
         /**
          * The parent container.
          */
-        get parent(): JQuery;
+        get parent(): HTMLElement;
         /**
          * The renderer.
          */
@@ -4375,7 +4671,7 @@ declare module FintaChart {
         /**
          * The parent html container.
          */
-        readonly container: JQuery;
+        readonly container: HTMLElement;
         /**
          * Refreshes component.
          */
@@ -4386,14 +4682,14 @@ declare module FintaChart {
      */
     abstract class HtmlComponent extends VisualComponent implements IHtmlComponent {
         private _container;
-        get container(): JQuery;
+        get container(): HTMLElement;
         dispose(): void;
         resize(): void;
         refresh(): void;
         /**
          * Creates html component's container.
          */
-        protected abstract createContainer(): JQuery;
+        protected abstract createContainer(): HTMLElement;
         /**
          * Destroy html component's container
          */
@@ -4510,7 +4806,7 @@ declare module FintaChart {
         /**
          * The parent container.
          */
-        container: JQuery;
+        container: HTMLElement;
         /**
          * The frame rectangle.
          */
@@ -4522,8 +4818,8 @@ declare module FintaChart {
     abstract class HtmlControl extends Control implements IHtmlControl {
         private _frame;
         private _container;
-        get container(): JQuery;
-        protected set container(value: JQuery);
+        get container(): HTMLElement;
+        protected set container(value: HTMLElement);
         get frame(): Bounds;
         dispose(): void;
         hitTest(point: IPoint): boolean;
@@ -4533,7 +4829,7 @@ declare module FintaChart {
          *
          * @return Container element.
          */
-        protected abstract createContainer(): JQuery;
+        protected abstract createContainer(): HTMLElement;
         /**
          * Removes container element.
          */
@@ -4629,7 +4925,7 @@ declare module FintaChart {
          *
          * @param container
          */
-        constructor(container: JQuery);
+        constructor(container: HTMLElement);
         dispose(): void;
         /**
          * Finds SIMPLE Dropdown item
@@ -4662,32 +4958,6 @@ declare module FintaChart {
         private refresh;
     }
 }
-/**
- * Represents Extended JQuery
- */
-interface JQuery {
-    /**
-     * Extended JQuery numeric field
-     *
-     * @return Numeric field
-     */
-    jqNumericField(): JQuery;
-    /**
-     * Extended JQuery numeric field
-     *
-     * @param method
-     * @param params
-     * @return Numeric field
-     */
-    jqNumericField(method: string, ...params: unknown[]): unknown;
-    /**
-     * Extended JQuery numeric field
-     *
-     * @param settings
-     * @return Numeric field
-     */
-    jqNumericField(settings: object): JQuery;
-}
 declare module FintaChart {
     /**
      * Represents Numeric Field Config
@@ -4724,11 +4994,20 @@ declare module FintaChart {
          * @param value
          * @param obj
          */
-        onChange(value: number, obj: JQuery): void;
+        onChange(value: number, obj: HTMLInputElement): void;
     }
     class NumericField {
-        static getValue(control: JQuery): number;
-        static setValue(control: JQuery, value: number): void;
+        /**
+         * Initializes a numeric field on the given HTMLInputElement.
+         */
+        static init(el: HTMLInputElement, options: Partial<INumericFieldConfig>): void;
+        static getValue(control: HTMLElement): number;
+        static setValue(control: HTMLElement, value: number): void;
+        static enable(control: HTMLElement): void;
+        static disable(control: HTMLElement): void;
+        static highlightInvalid(control: HTMLElement): void;
+        static nohighlightInvalid(control: HTMLElement): void;
+        static setBounds(control: HTMLElement, min: number, max: number): void;
     }
 }
 declare module FintaChart {
@@ -4760,7 +5039,7 @@ declare module FintaChart {
         /**
          * Context Menu Config menu container
          */
-        menuContainer?: JQuery;
+        menuContainer?: HTMLElement;
         /**
          * Is show Context Menu on click
          */
@@ -4771,7 +5050,7 @@ declare module FintaChart {
          * @param selectedMenu
          * @param isChecked
          */
-        onItemSelected(selectedMenu: JQuery, isChecked?: boolean): void;
+        onItemSelected(selectedMenu: HTMLElement, isChecked?: boolean): void;
         /**
          * On Context Menu show
          */
@@ -4782,9 +5061,13 @@ declare module FintaChart {
      *
      */
     class ContextMenu<TConfig extends IContextMenuConfig> implements IDisposable {
-        private static Id;
-        private _eventSuffix;
         private _isShown;
+        private _docClickHandler;
+        private _docTouchHandler;
+        private _winScrollHandler;
+        private _winResizeHandler;
+        private _bodyMenuOpenHandler;
+        private _menuClickTouchHandler;
         /**
          * Context Menu's config
          */
@@ -4792,14 +5075,14 @@ declare module FintaChart {
         /**
          * Get Context Menu's container
          */
-        get container(): JQuery;
+        get container(): HTMLElement;
         /**
          * Creates an instance of ContextMenu.
          *
          * @param config
          * @param targetDomObject
          */
-        constructor(config: TConfig, targetDomObject?: JQuery);
+        constructor(config: TConfig, targetDomObject?: HTMLElement);
         dispose(): void;
         /**
          * Hides Context Menu
@@ -4810,7 +5093,7 @@ declare module FintaChart {
          *
          * @param event
          */
-        show(event: JQueryEventObject): void;
+        show(event: Event): void;
         private static _getSubMenuPosition;
         private static _toggleSubMenu;
         private calculateMenuPosition;
@@ -4850,7 +5133,7 @@ declare module FintaChart {
          * @param targetDomObject
          * @param config
          */
-        constructor(targetDomObject: JQuery, config: IChartContextMenuConfig);
+        constructor(targetDomObject: HTMLElement, config: IChartContextMenuConfig);
         dispose(): void;
         private init;
         private onShow;
@@ -4877,10 +5160,11 @@ declare module FintaChart {
          * @param domObjects
          * @param config
          */
-        constructor(domObjects: JQuery, config: Spectrum.Options);
-        static get(control: JQuery): string;
-        static set(control: JQuery, color: string): void;
-        static enable(control: JQuery, enable: boolean): void;
+        constructor(domObjects: HTMLElement, config: Spectrum.Options);
+        static get(control: HTMLElement): string;
+        static set(control: HTMLElement, color: string): void;
+        static hide(control: HTMLElement): void;
+        static enable(control: HTMLElement, enable: boolean): void;
         enable(value?: boolean): void;
         private static initParams;
         private static palette;
@@ -4896,11 +5180,11 @@ declare module FintaChart {
         /**
          * Control Drag Pane Config container
          */
-        container?: JQuery;
+        container?: HTMLElement;
         /**
          * Control Drag Pane Config root container
          */
-        rootContainer?: JQuery;
+        rootContainer?: HTMLElement;
     }
     /**
      * Provides model of Control Drag Pane
@@ -4910,11 +5194,19 @@ declare module FintaChart {
         /**
          * Control Drag Pane's container
          */
-        protected container: JQuery;
+        protected container: HTMLElement;
         /**
          * Control Drag Pane's root container
          */
-        protected rootContainer: JQuery;
+        protected rootContainer: HTMLElement;
+        /**
+         * Draggable controller instance
+         */
+        private _draggableController;
+        /**
+         * Bound resize handler reference for cleanup
+         */
+        private _resizeHandler;
         get visible(): boolean;
         /**
          * Creates an instance of DragPane.
@@ -5163,7 +5455,7 @@ declare module FintaChart {
          *
          * @param selector
          */
-        constructor(selector: JQuery);
+        constructor(selector: HTMLElement);
         /**
          * Retrieves selected Text Style Selector state
          *
@@ -5242,7 +5534,7 @@ declare module FintaChart {
          * @param rootContainer
          * @param config
          */
-        constructor(rootContainer: JQuery, config: IInstrumentSearchConfig);
+        constructor(rootContainer: HTMLElement, config: IInstrumentSearchConfig);
         /**
          * Retrieves Instrument Search's by symbol
          *
@@ -5263,6 +5555,7 @@ declare module FintaChart {
         set(instrument?: IInstrument): void;
         enable(): void;
         disable(): void;
+        private static escapeHtml;
         private static generateListElement;
         private generateExchangeFilters;
         private generateSearchResults;
@@ -5454,7 +5747,7 @@ declare module FintaChart {
          * @param rootElement
          * @param config
          */
-        constructor(rootElement: JQuery, config: ITemplatesConfig);
+        constructor(rootElement: HTMLElement, config: ITemplatesConfig);
         /**
          * Set Templates Manager's new chart
          */
@@ -5504,13 +5797,17 @@ declare module FintaChart {
         private _hasCustomPicker;
         private _isActive;
         private _last;
+        private _windowScrollHandler;
+        private _windowResizeHandler;
+        private _bodyClickHandler;
+        private _bodyTouchHandler;
         /**
          * Creates an instance of TimeFramePicker.
          *
          * @param rootContainer
          * @param config
          */
-        constructor(rootContainer: JQuery, config: ITimeFramePickerConfig);
+        constructor(rootContainer: HTMLElement, config: ITimeFramePickerConfig);
         /**
          * Get Time Frame Picker's chart
          */
@@ -5553,7 +5850,7 @@ declare module FintaChart {
         /**
          * Toolbar Config parent
          */
-        parent: JQuery;
+        parent: HTMLElement;
         /**
          * Is show view mode
          */
@@ -5568,6 +5865,7 @@ declare module FintaChart {
         private _container;
         private _controls;
         private _draggableElements;
+        private _draggableControllers;
         private _leftToolbarScroll;
         private _rootContainer;
         private _toolbarScroll;
@@ -5594,13 +5892,13 @@ declare module FintaChart {
         /**
          * Get Toolbar's container
          */
-        get container(): JQuery;
+        get container(): HTMLElement;
         /**
          * Toolbar's activate button
          *
          * @param draggable
          */
-        activateButton(draggable: JQuery): void;
+        activateButton(draggable: HTMLElement): void;
         getBottomToolbarRightSide(): HTMLElement;
         /**
          * Activates Toolbar's draggable by it self
@@ -5616,7 +5914,7 @@ declare module FintaChart {
          *
          * @param container
          */
-        prependTo(container: JQuery): void;
+        prependTo(container: HTMLElement): void;
         /**
          * Shows Toolbar's supported time frames
          */
@@ -5748,13 +6046,14 @@ declare module FintaChart {
         private _itemsContainer;
         private _itemsWrapper;
         private _isDisabled;
+        private _hoverCloseTimer;
         /**
          * Creates an instance of ToolbarDropDownButton.
          *
          * @param rootElement
          * @param config
          */
-        constructor(rootElement: JQuery, config: IToolbarDropDownButtonConfig);
+        constructor(rootElement: HTMLElement, config: IToolbarDropDownButtonConfig);
         /**
          * Get Toolbar Drop Down Button's chart
          */
@@ -5766,7 +6065,7 @@ declare module FintaChart {
          * @param templateDropdown
          * @param chart
          */
-        alignDropdown(templateDropdown: JQuery, chart: Chart): void;
+        alignDropdown(templateDropdown: HTMLElement, chart: Chart): void;
         /**
          * Activates Toolbar Drop Down Button
          */
@@ -5788,9 +6087,11 @@ declare module FintaChart {
         private activeIcon;
         private deactivateButton;
         private fireFromHead;
+        private scheduleHoverClose;
         private hideDropDown;
         private init;
         private setValue;
+        private showDropDownForHover;
         private showDropDown;
         private toggleButton;
         private toggleDropDown;
@@ -7031,7 +7332,7 @@ declare module FintaChart {
          * @param crossHair
          */
         constructor(crossHair?: CrossHair);
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
         applyTheme(): void;
         resize(): void;
         refresh(): void;
@@ -7096,11 +7397,11 @@ declare module FintaChart {
          *
          * @param container
          */
-        constructor(container: JQuery);
+        constructor(container: HTMLElement);
         /**
          * Get Keyboard Setting's container
          */
-        set container(container: JQuery);
+        set container(container: HTMLElement);
         /**
          * Initializes Keyboard Settings
          *
@@ -7115,6 +7416,7 @@ declare module FintaChart {
          * Set default Keyboard Setting
          */
         resetToDefaults(): void;
+        private _keydownHandler;
         /**
          * Subscribes
          */
@@ -7134,6 +7436,15 @@ declare module FintaChart {
         ALT: number;
         ESC: number;
     };
+    /** Minimal event shape needed by hotkey matching. */
+    interface IKeyLike {
+        ctrlKey?: boolean;
+        metaKey?: boolean;
+        altKey?: boolean;
+        shiftKey?: boolean;
+        keyCode?: number;
+        type: string;
+    }
     /**
      * Describes all the actions to hotkeys in the chart.
      * Also lead to description translations
@@ -7215,7 +7526,7 @@ declare module FintaChart {
          * @param chart The chart.
          * @param event
          */
-        action?(chart: Chart, event?: JQueryEventObject): void;
+        action?(chart: Chart, event?: KeyboardEvent): void;
     }
     interface IHotkeysHandler extends IChartComponent, IStateable<HotkeyCombination[]> {
         /**
@@ -7247,15 +7558,16 @@ declare module FintaChart {
          *
          * @param event
          */
-        onEvent(event: JQueryEventObject): void;
+        onEvent(event: KeyboardEvent): void;
     }
     /**
      * Represents hotkeys handler.
      */
     class HotkeysHandler extends ChartComponent implements IHotkeysHandler {
-        lastEvent: JQueryEventObject;
+        lastEvent: IKeyLike;
         lastEventTime: number;
         private _hotkeys;
+        private _boundOnEvent;
         private readonly _eventDelay;
         /**
          * Creates an instance of [[HotkeysHandler]].
@@ -7263,16 +7575,16 @@ declare module FintaChart {
          * @param config The configuration.
          */
         constructor(config: IChartComponentConfig);
-        onEvent(event: JQueryEventObject): void;
-        isEventSimultaneous(event: JQueryEventObject): boolean;
+        onEvent(event: KeyboardEvent): void;
+        isEventSimultaneous(event: IKeyLike): boolean;
         resetToDefaults(): void;
         all(): HotkeyCombination[];
         findById(id: ChartHotkeyType): HotkeyCombination;
         add(hotkey: HotkeyCombination): boolean;
         saveState(): HotkeyCombination[];
         restoreState(state: HotkeyCombination[]): void;
-        static eventMatchHotkey<T>(hotkey: HotkeyCombination<T>, event: JQueryEventObject): boolean;
-        static getEventCodeCombination(event: JQueryEventObject): string;
+        static eventMatchHotkey<T>(hotkey: HotkeyCombination<T>, event: IKeyLike): boolean;
+        static getEventCodeCombination(event: IKeyLike): string;
         static onCopySnapshotToClipboard(chart: Chart): void;
         static onTogglePercentScale(chart: Chart): void;
         static onMoveFurtherLeft(chart: Chart): void;
@@ -7290,8 +7602,8 @@ declare module FintaChart {
         static onDelete(chart: Chart): void;
         static onUndo(chart: Chart): void;
         static onRedo(chart: Chart): void;
-        static onTimeFrameChange(chart: Chart, event: JQueryEventObject): void;
-        static onInstrumentChange(chart: Chart, event: JQueryEventObject): void;
+        static onTimeFrameChange(chart: Chart, event: KeyboardEvent): void;
+        static onInstrumentChange(chart: Chart, event: KeyboardEvent): void;
         static onHideInstrumentChange(chart: Chart): void;
         static onOpenIndicators(chart: Chart): void;
         static onToggleLogarithmicScale(chart: Chart): void;
@@ -8280,14 +8592,14 @@ declare module FintaChart {
          * @param name
          * @param container
          */
-        protected updateTitle(name: string, container: JQuery): Promise<void>;
+        protected updateTitle(name: string, container: HTMLElement): Promise<void>;
         /**
          * Set localization attribute
          *
          * @param container
          * @param key
          */
-        protected updateTitleAttribute(container: JQuery, key: string): Promise<void>;
+        protected updateTitleAttribute(container: HTMLElement, key: string): Promise<void>;
         /**
          * Shift to the future data rows
          *
@@ -9107,7 +9419,7 @@ declare module FintaChart {
         private _supportedTimeFrames;
         private _indicator;
         constructor(indicator: Indicator, initialValue: boolean);
-        createHtmlElement(): Promise<JQuery>;
+        createHtmlElement(): Promise<HTMLElement>;
         values(): Record<string, unknown>;
         onLocaleChanged(): Promise<void>;
         private static getTimeFrameLocalizationKey;
@@ -12087,22 +12399,12 @@ declare module FintaChart {
          * @param targetDomObject
          * @param config
          */
-        constructor(targetDomObject: JQuery, config: IIndicatorContextMenuConfig);
+        constructor(targetDomObject: HTMLElement, config: IIndicatorContextMenuConfig);
         private applyText;
         private initMenu;
         private static toggleClass;
     }
 }
-/**
- * @ignore
- */
-declare type ISortHandlerFunction = (left: HTMLElement, right: HTMLElement) => number;
-/**
- * @ignore
- */
-interface JQuery {
-    sort(fn: ISortHandlerFunction): number;
-}
 declare module FintaChart {
 }
 declare module FintaChart {
@@ -12207,11 +12509,9 @@ declare module FintaChart {
         private _element;
         private _inp_search;
         private _resultContainer;
-        private _searchDelayTimer;
         private _currentText;
         private _noResults;
         private _resultsCount;
-        private _inputValueOnInit;
         private _selectedFilters;
         private _page;
         private _size;
@@ -12583,7 +12883,7 @@ declare module FintaChart {
          *
          * @param visibility
          */
-        toggleVisibility(visibility: JQuery): void;
+        toggleVisibility(visibility: HTMLElement): void;
         /**
          * Refreshes Instrument Compare Settings
          */
@@ -12646,7 +12946,7 @@ declare module FintaChart {
          * @param targetDomObject
          * @param config
          */
-        constructor(targetDomObject: JQuery, config: ICompareInstrumentContextMenuConfig);
+        constructor(targetDomObject: HTMLElement, config: ICompareInstrumentContextMenuConfig);
         private init;
         private static toggleClass;
     }
@@ -13110,7 +13410,7 @@ declare module FintaChart {
         cancelAutoScaling(): void;
         verticalAxisLabelMaxWidth(verticalAxis: VerticalAxis): number;
         applyLogoWatermark(): void;
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
         protected initMotionEvents(): MotionEventArray;
         /**
          * Subscribes
@@ -13525,7 +13825,7 @@ declare module FintaChart {
          * @return
          */
         totalPanesHeight(): number;
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
         protected initMotionEvents(): MotionEventArray;
         protected subscribe(): void;
         protected unsubscribe(): void;
@@ -13582,7 +13882,7 @@ declare module FintaChart {
         invalidateTheme(): void;
         hitTest(point: IPoint): boolean;
         resize(frame: Bounds): void;
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
         protected initMotionEvents(): MotionEventArray;
         private applyTheme;
         private onMouseHover;
@@ -14114,7 +14414,7 @@ declare module FintaChart {
      * Provides model of Pane Watermark
      */
     abstract class PaneWatermark extends PaneHtmlComponent {
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
     }
 }
 declare module FintaChart {
@@ -14149,7 +14449,7 @@ declare module FintaChart {
         applyText(): void;
         applyTheme(): void;
         refresh(): void;
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
         protected subscribe(): void;
         protected unsubscribe(): void;
     }
@@ -14245,7 +14545,7 @@ declare module FintaChart {
      * @category Market events
      */
     interface IMarketEventPopupBuilder {
-        createPopupElement(event: IMarketEvent, chart: Chart): Promise<JQuery>;
+        createPopupElement(event: IMarketEvent, chart: Chart): Promise<HTMLElement>;
     }
 }
 declare module FintaChart {
@@ -14533,6 +14833,7 @@ declare module FintaChart {
     class LocalStorageChartStateHandler extends ChartComponent implements IChartStateHandler {
         autoLoad: boolean;
         autoSave: boolean;
+        private _boundOnBeforeUnload;
         /**
          * Creates an instance of [[LocalStorageChartStateHandler]].
          *
@@ -14545,7 +14846,6 @@ declare module FintaChart {
         protected subscribe(): void;
         protected unsubscribe(): void;
         private static makeKey;
-        private static onBeforeUnloadWindow;
         private autoSaveState;
     }
 }
@@ -14586,7 +14886,7 @@ declare module FintaChart {
         /**
          * Scrollbar Config parent
          */
-        parent: JQuery;
+        parent: HTMLElement;
     }
     /**
      * Provides model of Scrollbar
@@ -14598,6 +14898,8 @@ declare module FintaChart {
         private _scrollingPaneMinWidth;
         private _scrollingPaneWidth;
         private _isLocked;
+        private _draggableController;
+        private _resizableController;
         /**
          * The parent chart.
          */
@@ -14622,7 +14924,7 @@ declare module FintaChart {
          *
          * @param container The container to append scrollbar to.
          */
-        appendTo(container: JQuery): void;
+        appendTo(container: HTMLElement): void;
         lock(): void;
         private init;
         animateScrollingToLastBar(): void;
@@ -14738,6 +15040,8 @@ declare module FintaChart {
         private _mode;
         private _preFullWindowSize;
         private _prevMode;
+        private _boundOnFullScreenChanged;
+        private _boundOnWindowResize;
         constructor(config: IChartComponentConfig);
         private get isInFullWindowMode();
         get mode(): WindowMode;
@@ -14751,8 +15055,6 @@ declare module FintaChart {
         private enterFullScreen;
         private exitFullScreen;
         private onFullScreenChange;
-        private static onFullScreenChanged;
-        private static onWindowResize;
         private static updateDropDownItemIcon;
         private updateDropdown;
         private toggleWindowMode;
@@ -16218,7 +16520,7 @@ declare module FintaChart {
          */
         layoutPane(frameInChart: Bounds, isTopPane: boolean): Bounds;
         lock(): void;
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
         protected initMotionEvents(): MotionEventArray;
         private clientHeight;
         private onDoubleClick;
@@ -17173,7 +17475,7 @@ declare module FintaChart {
          */
         getWidth(): number;
         resize(frame: Bounds, isLeftPane?: boolean): Bounds;
-        protected createContainer(): JQuery;
+        protected createContainer(): HTMLElement;
     }
 }
 declare module FintaChart {
@@ -18926,6 +19228,7 @@ declare module FintaChart {
      * @category Shapes
      */
     abstract class MultiPointShape extends Shape {
+        private _enterPressHandler;
         constructor(config: IShapeConfig);
         dispose(): void;
         /**
@@ -20687,6 +20990,7 @@ declare module FintaChart {
         private _tabItemsContainer;
         private _tabPanesContainer;
         private _lineColorInput;
+        private _lineColorPicker;
         private _lineStyleInput;
         private _lineWidthInput;
         private _buyColorInput;
@@ -20718,7 +21022,7 @@ declare module FintaChart {
         private _input_stopPriceHTMLObj;
         private _input_entryPriceHTMLObj;
         private _visibilityConfig;
-        constructor(container: JQuery);
+        constructor(container: HTMLElement);
         show(config: IPositionShapeSettingsConfig): void;
         hide(): void;
         /**
@@ -21374,7 +21678,7 @@ declare module FintaChart {
         * @param config The context menu configuration.
         * @param targetDomObject The target DOM element.
         */
-        constructor(config: IShapeContextMenu, targetDomObject?: JQuery);
+        constructor(config: IShapeContextMenu, targetDomObject?: HTMLElement);
     }
 }
 declare module FintaChart {
@@ -21388,14 +21692,16 @@ declare module FintaChart {
     }
     class ShapeTemplateSettings {
         private _container;
+        private _initList;
         private _chart;
         private _selectedShape;
         private _currentListTemplates;
         private _setExternalValues;
+        private _bodyClickHandler;
         set selectedShape(shape: Shape | null);
         get selectedShape(): Shape | null;
         get selectedShapeType(): string;
-        constructor(container: JQuery, chart: Chart, setValues: (key?: string) => void);
+        constructor(container: HTMLElement, chart: Chart, setValues: (key?: string) => void);
         private init;
         private generateList;
         deleteTemplate(key: string): void;
@@ -21474,6 +21780,7 @@ declare module FintaChart {
         private generateLockItem;
         private generatePaneContainer;
         private generatePaneItem;
+        private appendChildrenFrom;
         private generateSettingsItem;
         private generateSizeItem;
         private generateStickItem;
@@ -21482,6 +21789,7 @@ declare module FintaChart {
         private applyThemeChanges;
         private onChartChanged;
         private handleUIEvents;
+        private onContainerClick;
         private hideAllPaneItems;
         private init;
         private initControls;
@@ -22611,10 +22919,10 @@ declare module FintaChart {
          * @constructor
          * @param {Chart} chart
          * @param {any} config
-         * @param {JQuery} [targetDomObject]
+         * @param {HTMLElement} [targetDomObject]
          * @memberof TradingContextMenu
          */
-        constructor(chart: Chart, config: any, targetDomObject?: JQuery);
+        constructor(chart: Chart, config: any, targetDomObject?: HTMLElement);
         _calculatePrices(event: IWindowEvent, scaleCoordinateMapper: ScaleCoordinateMapper): void;
         private _addIndicatorAlertMenuItem;
         getMenuList(): void;
@@ -22708,7 +23016,6 @@ declare module FintaChart {
         get removeButton(): Button;
         set removeButton(value: Button);
         private _closeBtnHover;
-        private _elementPopup;
         private _isShownPopup;
         constructor(config: IAlertLabelConfig);
         protected _handleMotionEventPencilDevice(gesture: MoveMotionEvent, event: IWindowEvent): boolean;
@@ -22834,15 +23141,6 @@ declare module FintaChart {
         private _drawAlertLine;
     }
 }
-/**
- * @ignore
- */
-interface JQueryEventObject {
-    /**
-     * Converted JQuery to HTMLElement
-     */
-    toElement: HTMLElement;
-}
 declare module FintaChart {
     interface IChartObject {
         readonly type?: string;
@@ -22875,9 +23173,11 @@ declare module FintaChart {
          */
         barsCount?: number;
         /**
-         * Chart container
+         * Chart container — either an already-resolved HTMLElement, or a CSS
+         * selector string (for parity with the legacy jQuery-era API that the
+         * HTML examples rely on: `container: '#chartContainer'`).
          */
-        container?: HTMLElement;
+        container?: HTMLElement | string;
         /**
          * Cross hair type
          */
@@ -23302,7 +23602,7 @@ declare module FintaChart {
         hoveredObject: IChartObject;
         isMoving: boolean;
         _suppressMeasureTool: boolean;
-        multiChartRootContainer: JQuery;
+        multiChartRootContainer: HTMLElement;
         preventMouseEvents: boolean;
         selectedObject: SelectedObject;
         showShapeTooltips: boolean;
@@ -23338,6 +23638,9 @@ declare module FintaChart {
         private _options;
         private _panesFrame;
         private _rootDiv;
+        private _boundMouseEvents;
+        private _boundOnLocalize;
+        private _subscribedEvents;
         private _verticalScales;
         private _state;
         private _timeFrame;
@@ -23470,10 +23773,14 @@ declare module FintaChart {
          * Set chart default hot keys
          */
         set defaultHotkeys(combinations: HotkeyCombination[]);
+        /**
+         * Get chart container element (native)
+         */
+        get containerEl(): HTMLElement;
         /**
          * Get chart container
          */
-        get container(): JQuery;
+        get container(): HTMLElement;
         /**
          * Get chart cross hair
          */
@@ -23595,10 +23902,14 @@ declare module FintaChart {
          * Get chart replay mode manager
          */
         get replayMode(): ReplayModeManager;
+        /**
+         * Get chart root div element (native)
+         */
+        get rootDivEl(): HTMLElement;
         /**
          * Get chart root div
          */
-        get rootDiv(): JQuery;
+        get rootDiv(): HTMLElement;
         /**
          * Get chart horizontal scale
          */
@@ -23726,7 +24037,7 @@ declare module FintaChart {
          * @param event
          * @return Is event handled
          */
-        onMouseEvents(event: JQueryEventObject): boolean;
+        onMouseEvents(event: Event): boolean;
         /**
          * Scrolling chart to real time arrow
          */
@@ -23942,11 +24253,11 @@ declare module FintaChart {
         restoreState(state: string | IChartState, preserveObjects?: boolean, toDefault?: boolean): void;
         restoreVisibleRange(recordsState: IRecordsState): void;
         /**
-         * Localizes JQuery element
+         * Localizes target element
          *
          * @param element
          */
-        localize(element?: JQuery): void;
+        localize(element?: HTMLElement): void;
         /**
          * Localizes text
          *