@fintatech/fintachart 3.1.11 → 3.1.12

package/d.ts/FintaChart.d.ts

@@ -42,6 +42,28 @@ declare module FintaChart {
 }
 declare module FintaChart {
 }
+declare module FintaChart {
+    interface BBRun {
+        text: string;
+        bold: boolean;
+        italic: boolean;
+        underline: boolean;
+        color?: string;
+    }
+    class BBCode {
+        private static readonly MAX_LEN;
+        private static readonly MAX_TAGS;
+        private static readonly MAX_DEPTH;
+        private static readonly MAX_COLOR_LEN;
+        private static readonly NAMED_COLORS;
+        static parse(text: string): BBRun[][];
+        private static literal;
+        private static parseInternal;
+        private static readTag;
+        private static safeColor;
+        private static inByteRange;
+    }
+}
 declare module FintaChart {
 }
 interface Math {
@@ -382,6 +404,11 @@ declare module FintaChart {
          * @param width
          * @param height
          */
+        /**
+         * Upper bound for the device pixel ratio used when sizing canvases.
+         * Lower values trade sharpness for far cheaper fills on mobile.
+         */
+        static dprCap: number;
         static canvasRetina(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, width: number, height: number): void;
         /**
          * Returns full screen is enabled
@@ -533,6 +560,15 @@ declare module FintaChart {
          * @param value The CSS property value.
          */
         static css(el: HTMLElement, prop: string, value: string | number): void;
+        private static _rectCache;
+        private static _rectCacheStamp;
+        /**
+         * Bounding rect cached within an 8ms frame bucket.
+         *
+         * @param el The element.
+         * @return The (possibly cached) bounding rect.
+         */
+        static cachedBoundingRect(el: HTMLElement): DOMRect;
         /**
          * Converts client (viewport) coordinates to local element coordinates.
          *
@@ -698,6 +734,8 @@ declare module FintaChart {
         destroy(): void;
         /** Enables or disables dragging. */
         setEnabled(enabled: boolean): void;
+        /** Re-clamps the element inside its containment (e.g. after a resize). */
+        reclamp(): void;
     }
     /**
      * Makes an element draggable using native pointer events.
@@ -2446,6 +2484,10 @@ declare module FintaChart {
          * Event object
          */
         evt: Event;
+        /**
+         * Overrides the native (read-only) `which` button value.
+         */
+        which?: number;
         /**
          * Pane
          */
@@ -2783,7 +2825,6 @@ declare module FintaChart {
          */
         constructor(config?: IContextMenuMotionEventConfig);
         handleEvent(event: IWindowEvent): boolean;
-        private snapshot;
         private finish;
         private startTimer;
         private stopTimer;
@@ -2895,6 +2936,7 @@ declare module FintaChart {
         private _lastScale;
         private _prevScale;
         private _scaleThreshold;
+        private _wheelDeltaAccum;
         /**
          * Delta
          */
@@ -3882,6 +3924,7 @@ declare module FintaChart {
         private _lineDashFunc;
         private _canvas;
         private _context;
+        private _linearGradientCache;
         /**
          * Get canvas
          */
@@ -4751,6 +4794,8 @@ declare module FintaChart {
         private _canvasEl;
         private _parentEl;
         private _renderer;
+        private _sizeCache;
+        private _sizeCacheStamp;
         /**
          * The canvas element.
          */
@@ -5348,14 +5393,29 @@ declare module FintaChart {
          * Control Drag Pane's root container
          */
         protected rootContainer: HTMLElement;
-        /**
-         * Draggable controller instance
-         */
-        private _draggableController;
         /**
          * Bound resize handler reference for cleanup
          */
         private _resizeHandler;
+        /**
+         * Whether the pane has been placed at its initial position
+         */
+        private _positioned;
+        /**
+         * Pointer offset from the pane top-left at drag start
+         */
+        private _dragOffsetX;
+        private _dragOffsetY;
+        /**
+         * Bound drag handlers for cleanup
+         */
+        private _onDragStart;
+        private _onDragMove;
+        private _onDragEnd;
+        /**
+         * Drag handle element
+         */
+        private _handleEl;
         get visible(): boolean;
         /**
          * Creates an instance of DragPane.
@@ -5376,7 +5436,18 @@ declare module FintaChart {
          * Shows Control Drag Pane
          */
         protected show(): void;
-        private adjustPosition;
+        /** Returns the offsetParent rect the pane is positioned against. */
+        private parentRect;
+        /** Places the pane near the top-center of the chart. */
+        private placeInitial;
+        private onDragStart;
+        private onDragMove;
+        private onDragEnd;
+        /** Sets absolute position within the offsetParent, clamped inside it. */
+        private applyPosition;
+        private clampIntoViewport;
+        private eventPoint;
+        private teardownDrag;
         private onResize;
     }
 }
@@ -6041,6 +6112,42 @@ declare module FintaChart {
         private unsubscribe;
     }
 }
+declare module FintaChart {
+    class ToolbarCalendar {
+        private _chart;
+        private _element;
+        private _onSelect;
+        private _selected;
+        private _viewYear;
+        private _viewMonth;
+        private _months;
+        private _weekdaysShort;
+        private _clearText;
+        private _todayText;
+        constructor(chart: Chart, host: HTMLElement);
+        get isVisible(): boolean;
+        /**
+         * Shows the calendar for the given selection.
+         *
+         * @param selected Currently selected date, highlighted in the grid.
+         * @param onSelect Invoked with the picked date, or `null` when cleared.
+         */
+        show(selected: Date | null, onSelect: (date: Date | null) => void): void;
+        hide(): void;
+        private _loadLocalization;
+        private _localize;
+        private _splitLocalized;
+        private _render;
+        private _renderHeader;
+        private _renderNavButton;
+        private _renderGrid;
+        private _renderDay;
+        private _renderFooter;
+        private _pick;
+        private _isSameDay;
+        private _shiftMonth;
+    }
+}
 declare module FintaChart {
     /**
      * Represents Toolbar Config
@@ -6080,6 +6187,14 @@ declare module FintaChart {
         private _logScaleBtn;
         private _percentScaleBtn;
         private _lockShapesBtn;
+        private _dateRangeButtons;
+        private _dateRangeMenuItems;
+        private _applyingDateRangePreset;
+        private _dateRangeFrom;
+        private _dateRangeTo;
+        private _openDateRangePopup;
+        private _dateRangeResizeObserver;
+        private _dateRangeInlineWidth;
         private _scalePercentageAdapter;
         onAmountChanged: (quantity: number) => void;
         /**
@@ -6126,6 +6241,26 @@ declare module FintaChart {
         supportedTimeFramesShow(): void;
         private _createPeriodicityForm;
         private _subscribeToCreateCustomTimeFrame;
+        private _subscribeDateRangeControls;
+        private onDocumentTap;
+        private _subscribeCollapsedDateRange;
+        private _observeDateRangeWidth;
+        private _subscribeCustomDateRange;
+        private updateDateRangeApplyState;
+        private formatDisplayDate;
+        private truncateToDay;
+        private endOfDay;
+        /**
+         * Applies a bottom-toolbar date-range preset (1D, 5D, ..., All).
+         *
+         * @param presetKey
+         */
+        applyDateRangePreset(presetKey: string): void;
+        private applyDateRange;
+        private setActiveDateRangeButton;
+        private closestSupportedTimeFrame;
+        private parseSupportedTimeFrame;
+        private addToDate;
         setTimeFrame(timeFrame: TimeFrame): void;
         /**
          * Refresh toolbar components depend to size
@@ -6136,7 +6271,7 @@ declare module FintaChart {
         /**
          * Update trade panel units value
          *
-         * @param quantity
+         * @param quantity default quantity expressed in units (backend contract)
          */
         updateTradeHandlerUnits(quantity: number): void;
         private activateStayInShapeModeBtn;
@@ -6155,6 +6290,8 @@ declare module FintaChart {
         private onCrossHairChange;
         private onDeleteClick;
         private onHideOptionClick;
+        /** Reflects the hide buttons' active class from real chart state. */
+        private syncHideButtonsState;
         onIndicatorsClick(): void;
         applyIndicator(typeName: string): void;
         private onInstrumentChange;
@@ -6297,6 +6434,13 @@ declare module FintaChart {
         private hideDropDown;
         private init;
         private setValue;
+        /**
+         * Handles a tap/click on the button head, routing to toggle, fire or
+         * drop-down open depending on the button configuration and platform.
+         *
+         * @param e The originating tap/click event.
+         */
+        private handleHeadTap;
         private showDropDown;
         private toggleButton;
         private toggleDropDown;
@@ -8997,6 +9141,14 @@ declare module FintaChart {
     /**
      * Represents indicator state
      */
+    /**
+     * A single indicator plot value for the OHLC card.
+     */
+    interface IIndicatorHoverValue {
+        name: string;
+        color: string;
+        value: string;
+    }
     interface IIndicatorState {
         id?: string;
         parentId?: string;
@@ -9093,6 +9245,11 @@ declare module FintaChart {
         private _hovered;
         private _id;
         private _lineLevels;
+        private _indicatorShapes;
+        private _shapesById;
+        private _shapesPanes;
+        private _shapesForcePricePane;
+        private _shapesFullyAttached;
         private _requireDefaults;
         private _optionsTitle;
         private _parametersContextMenu;
@@ -9148,6 +9305,7 @@ declare module FintaChart {
         get theme(): any;
         set theme(value: any);
         get lineLevels(): any[];
+        get indicatorShapes(): Shape[];
         /**
          * Allow setting dialog state
          */
@@ -9322,6 +9480,15 @@ declare module FintaChart {
          * @param pointY
          */
         addLine(color: string, pointY: number): void;
+        addShape(state: IShapeState): Shape | null;
+        setIndicatorShapes(states: IShapeState[], opts?: {
+            onPricePane?: boolean;
+        }): void;
+        upsertIndicatorShapes(states: IShapeState[]): void;
+        removeIndicatorShapes(): void;
+        private isPixelAnchoredShape;
+        private routeAndAttach;
+        private attachIndicatorShapes;
         /**
          * Add plot
          *
@@ -9418,6 +9585,13 @@ declare module FintaChart {
          */
         updateHoverRecord(record?: number): void;
         getValues(): DataRowsCollection;
+        /**
+         * Per-plot values at a record for the OHLC card.
+         *
+         * @param record Record index; defaults to hovered record.
+         * @return One { name, color, value } per plot.
+         */
+        hoverValues(record?: number): IIndicatorHoverValue[];
         /**
          * Update visibility of title elements
          */
@@ -13540,6 +13714,19 @@ declare module FintaChart {
         containsShape(shape: Shape): boolean;
         dispose(): void;
         paint(): void;
+        /**
+         * Returns true when a shape is fully outside the visible frame and
+         * safe to skip. Extrapolated shapes (lines/rays) and selected shapes
+         * are never culled since they can extend across the viewport.
+         */
+        private isShapeOffscreen;
+        /** Shape types that extend beyond their points and must not be culled. */
+        private static NON_CULLABLE_SHAPES;
+        static pGrid: number;
+        static pObjects: number;
+        static pIndicators: number;
+        static pHover: number;
+        static pWatermark: number;
         /**
          * Executes shapes
          *
@@ -13698,7 +13885,15 @@ declare module FintaChart {
          * @param record
          * @return
          */
+        private _lastHoverKey;
         updateHoverRecord(record?: number): void;
+        /**
+         * Fills the OHLC card indicator rows for the hovered record.
+         *
+         * @param control The card's bar-info control.
+         * @param record  The hovered record index.
+         */
+        private renderOhlcCardIndicators;
         /**
          * Renders the live graphics of an OHLC info card: the volume bar (as a
          * fraction of the max visible volume) and the price sparkline (the last
@@ -15014,6 +15209,12 @@ declare module FintaChart {
         private writeBlobToClipboard;
         private fallbackDownload;
         private showChartMessage;
+        /**
+         * Composites the chart's own canvas layers into one bitmap.
+         * Far cheaper than serializing the whole DOM. Returns null when
+         * no canvases are found so the caller can fall back.
+         */
+        private compositeCanvasLayers;
         private createSnapshot;
         private saveImage;
         /**
@@ -17399,7 +17600,6 @@ declare module FintaChart {
         private updateCoordinateMapper;
         private autoScroll;
         private refresh;
-        private animateZoom;
     }
 }
 declare module FintaChart {
@@ -20654,7 +20854,7 @@ declare module FintaChart {
      */
     class TextShape extends Shape {
         static get type(): string;
-        private _lines;
+        private _parsed;
         /**
          * Creates an instance of TextShape.
          *
@@ -20673,7 +20873,10 @@ declare module FintaChart {
         restoreState(state: IShapeState): void;
         pointsLocalizationKeys(): string[];
         protected paintHovered(oldTheme: any): any;
+        private get baseTextTheme();
         private updateLines;
+        private deriveRunTheme;
+        private measureLineWidth;
     }
 }
 declare module FintaChart {
@@ -22079,6 +22282,10 @@ declare module FintaChart {
         private generateList;
         deleteTemplate(key: string): void;
         selectTemplate(key: string): void;
+        /** Fixed-positions the dropdown so the pane cell does not clip it. */
+        private positionDropList;
+        /** Clears inline fixed-positioning so the closed dropdown returns to flow. */
+        private resetDropListPosition;
         private resetFibonacciLevels;
     }
 }
@@ -22880,6 +23087,14 @@ declare module FintaChart {
         private _takeProfitLine;
         private _stTpLine;
         private _selected;
+        /**
+         * Instance text width for kind.
+         */
+        private _kindTextWidth;
+        /**
+         * Instance text width for quantity.
+         */
+        private _quantityTextWidth;
         /**
          * Gets/Set position.
          */
@@ -23864,6 +24079,14 @@ declare module FintaChart {
         Fok = "fok",
         Ioc = "ioc"
     }
+    /**
+     * Rendering quality: trades sharpness for paint speed on weak devices.
+     */
+    enum RenderQuality {
+        LOW = "low",
+        MEDIUM = "medium",
+        HIGH = "high"
+    }
     /**
      * Provides model of min and max
      */
@@ -23964,6 +24187,10 @@ declare module FintaChart {
     const DEFAULT_BARS_COUNT = 500;
     const DEFAULT_MORE_BARS_COUNT = 1000;
     const DEFAULT_QUANTITY = 1;
+    interface IDateRangeSelection {
+        startDate: Date | null;
+        endDate: Date | null;
+    }
     const version = "2.0.0";
     enum AutoScalePanesKind {
         AllPanes = 0,
@@ -24001,6 +24228,8 @@ declare module FintaChart {
         private _lastObservedWidth;
         private _lastObservedHeight;
         private _resizeRafPending;
+        private _windowResizeRafPending;
+        private _renderQuality;
         private readonly _indicatorAlertsHandler;
         private readonly _addThemeCssClass;
         private readonly _barCountdown;
@@ -24083,6 +24312,8 @@ declare module FintaChart {
         private _lockShapes;
         private _pendingTimeFrameRangeClamp;
         private _pendingInstrumentChangeDateRange;
+        private _pendingDateRangeSelection;
+        private _dateRangeSelectionToken;
         private _lastBid;
         private _lastAsk;
         private _conversionRate;
@@ -24133,6 +24364,13 @@ declare module FintaChart {
         get timezone(): ITimezone | null;
         set timezone(data: ITimezone | null);
         constructor(config: IChartConfig);
+        /**
+         * Dev-only on-screen FPS / frame-time meter, shown only on localhost.
+         * A small toggle button is placed at the right edge; clicking it starts
+         * an independent rAF loop that measures the real display frame rate
+         * (independent of the RefreshOptimizer throttle) during pan/zoom/hover.
+         */
+        private setupFpsMeter;
         get isInReplayMode(): boolean;
         get dateTimezoneConverter(): DateTimezoneConverter;
         get smoothLines(): boolean;
@@ -24437,6 +24675,15 @@ declare module FintaChart {
          */
         get zoomEnabled(): boolean;
         set zoomEnabled(value: boolean);
+        /**
+         * Rendering quality (sharpness vs paint speed).
+         */
+        get renderQuality(): RenderQuality;
+        set renderQuality(value: RenderQuality);
+        /**
+         * Maps render quality to the DPR cap and max visible bars.
+         */
+        private applyRenderQualityCap;
         /**
          * Get trading session hours type
          */
@@ -24473,7 +24720,10 @@ declare module FintaChart {
          * @param event
          * @return Is event handled
          */
+        static evtCount: number;
+        static evtMs: number;
         onMouseEvents(event: Event): boolean;
+        private onMouseEventsImpl;
         /**
          * Scrolling chart to real time arrow
          */
@@ -24593,6 +24843,19 @@ declare module FintaChart {
          * @return Data range
          */
         dateRange(startDate?: Date, endDate?: Date): any;
+        /**
+         * Shows the specified date range, loading missing history first and
+         * optionally switching the time frame (used by the bottom-toolbar
+         * date-range presets: 1D, 5D, ..., All).
+         *
+         * @param startDate Range start; `null` shows all available history.
+         * @param endDate Range end; defaults to the last loaded bar.
+         * @param timeFrame Optional time frame to switch to before applying the range.
+         */
+        setVisibleDateRange(startDate: Date | null, endDate?: Date | null, timeFrame?: ITimeFrame): void;
+        private estimateDateRangeBarsCount;
+        private applyDateRangeSelection;
+        private waitForBarsRequestComplete;
         /**
          * Alias for `dispose()`. Both names are documented across the
          * public guides; both are supported on the runtime.
@@ -24607,6 +24870,7 @@ declare module FintaChart {
         /**
          * Paints horizontal scale and panes container
          */
+        static lastPaintMs: number;
         paint(): void;
         /**
          * Executes indicator or indicators
@@ -24868,6 +25132,15 @@ declare module FintaChart {
          * @param makeAutoScale
          */
         refreshAsync(makeAutoScale?: boolean): void;
+        private _tickRefreshInterval;
+        private _lastTickRefresh;
+        private _tickRefreshTimer;
+        private _restoreIndicatorsTimer;
+        /**
+         * Throttled refresh for the live-tick path so a busy feed cannot force
+         * a full repaint every frame. User gestures still use refreshAsync.
+         */
+        refreshOnTickAsync(): void;
         autoScalePanes(kind?: AutoScalePanesKind): void;
         /**
          * Sets chart window mode
@@ -24914,7 +25187,11 @@ declare module FintaChart {
          *
          * @param updateInstruments
          */
-        private hasRenderSize;
+        static lastRefreshMs: number;
+        static lastLayoutMs: number;
+        static lastChartTypeMs: number;
+        static lastHScaleMs: number;
+        static lastPanesMs: number;
         refresh(updateInstruments?: boolean): void;
         /**
          * Triggers a repaint after direct property mutations (theme,
@@ -24995,6 +25272,10 @@ declare module FintaChart {
          */
         private ohlcCardRootContainer;
         private showOhlcCard;
+        /**
+         * Places the OHLC card at (left, top) but clamps it so the whole card
+         */
+        private clampOhlcCardPosition;
         private hideOhlcCard;
         toggleOhlcCardButton(show: boolean): void;
         setOhlcCardVariant(variant: string): void;

package/htmldialogs/MainSettings.html

@@ -238,6 +238,18 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="tcdDialog-content-items">
+                            <div class="tcdDialog-content-item tcdColorWithBorder selector renderQuality width33">
+                                <div class="selectWrapper w100">
+                                    <label class="settings-label" data-i18n="theme.dialog.renderQuality.title"></label>
+                                    <select class="select-text" id="tcdMainSettings_renderQuality" style="display:block!important;">
+                                        <option value="low" data-i18n="theme.dialog.renderQuality.low"></option>
+                                        <option value="medium" data-i18n="theme.dialog.renderQuality.medium"></option>
+                                        <option value="high" data-i18n="theme.dialog.renderQuality.high"></option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
 <!--                        @@TODO: Hide-->
 <!--                        <div class="tcdDialog-content-items tcdDialog-content-caption">-->
 <!--                            <div class="tcdDialog-left-part">-->

package/htmldialogs/Toolbar.html

@@ -593,7 +593,7 @@
                     <li class="tcdShapeElement tcdToolbarButton-dropdownElement">
                         <div class="tradePanel_amount-box">
                             <input data-input class="tcdNumeric jqNumericField tradePanel_input"
-                                   id="tradePanel_amount-input" data-i18n="[title]trading.quantity">
+                                   id="tradePanel_amount-input" data-i18n="[title]trading.quantity" autocomplete="off">
 							<div class="calc-container" id="tradePanel_calc-container">
 								<div class="calculator-icon tcdSVGIcon" tcdSVGData="calculator"></div>
 								<ul class="calc-list">
@@ -1729,6 +1729,64 @@
 <!--<div class="tcdToolbar-scroll tcdToolbar-left-bottom"></div>-->
 
 <div class="tcdToolbar-bottom">
+    <div class="tcdToolbar-bottom-left-side">
+        <div class="tcdToolbarDateRange">
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="1D" data-i18n="[title]dateRange.presets.1D">1D</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="5D" data-i18n="[title]dateRange.presets.5D">5D</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="1M" data-i18n="[title]dateRange.presets.1M">1M</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="3M" data-i18n="[title]dateRange.presets.3M">3M</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="6M" data-i18n="[title]dateRange.presets.6M">6M</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="YTD" data-i18n="[title]dateRange.presets.YTD">YTD</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="1Y" data-i18n="[title]dateRange.presets.1Y">1Y</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="5Y" data-i18n="[title]dateRange.presets.5Y">5Y</span>
+            <span class="tcdToolbarDateRange-btn" data-tcdrange="All" data-i18n="[title]dateRange.presets.All">All</span>
+            <span class="tcdToolbarDateRange-separator"></span>
+            <span class="tcdToolbarDateRange-btn tcdToolbarDateRange-customBtn" data-i18n="[title]dateRange.custom">
+                <span class="tcdSVGIcon tcdToolbarDateRange-customIcon" tcdSVGData="calendar"></span>
+            </span>
+        </div>
+        <div class="tcdToolbarDateRange-collapsed" style="display: none;">
+            <span class="tcdToolbarDateRange-collapsedBtn">
+                <span class="tcdSVGIcon tcdToolbarDateRange-collapsedIcon" tcdSVGData="calendar"></span>
+                <span class="tcdToolbarDateRange-collapsedLabel" data-i18n="dateRange.label">Date Range</span>
+                <svg viewBox="0 0 10 6" width="10" height="6"><path d="M1 5l4-4 4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </span>
+            <ul class="tcdToolbarDateRange-menu" style="display: none;">
+                <li data-tcdrange="1D" data-i18n="dateRange.menu.1D">1 day in 5 minutes intervals</li>
+                <li data-tcdrange="5D" data-i18n="dateRange.menu.5D">5 days in 15 minutes intervals</li>
+                <li data-tcdrange="1M" data-i18n="dateRange.menu.1M">1 month in 1 hour intervals</li>
+                <li data-tcdrange="3M" data-i18n="dateRange.menu.3M">3 months in 4 hours intervals</li>
+                <li data-tcdrange="6M" data-i18n="dateRange.menu.6M">6 months in 4 hours intervals</li>
+                <li data-tcdrange="YTD" data-i18n="dateRange.menu.YTD">Year to date in 1 day intervals</li>
+                <li data-tcdrange="1Y" data-i18n="dateRange.menu.1Y">1 year in 1 day intervals</li>
+                <li data-tcdrange="5Y" data-i18n="dateRange.menu.5Y">5 years in 1 week intervals</li>
+                <li data-tcdrange="All" data-i18n="dateRange.menu.All">All data in 1 week intervals</li>
+                <li class="tcdToolbarDateRange-menuSeparator"></li>
+                <li class="tcdToolbarDateRange-menuGoto" data-i18n="dateRange.goto">Go to...</li>
+            </ul>
+        </div>
+        <div class="tcdToolbarDateRange-popup" style="display: none;">
+            <div class="tcdToolbarDateRange-popup-title" data-i18n="dateRange.title">Custom date range</div>
+            <div class="tcdToolbarDateRange-popup-row">
+                <label data-i18n="dateRange.from">From</label>
+                <div class="tcdToolbarDateRange-popup-field" data-tcdrangefield="from">
+                    <input type="text" class="tcdToolbarDateRange-popup-from" readonly>
+                    <span class="tcdSVGIcon tcdToolbarDateRange-fieldIcon" tcdSVGData="calendar"></span>
+                </div>
+            </div>
+            <div class="tcdToolbarDateRange-popup-row">
+                <label data-i18n="dateRange.to">To</label>
+                <div class="tcdToolbarDateRange-popup-field" data-tcdrangefield="to">
+                    <input type="text" class="tcdToolbarDateRange-popup-to" readonly>
+                    <span class="tcdSVGIcon tcdToolbarDateRange-fieldIcon" tcdSVGData="calendar"></span>
+                </div>
+            </div>
+            <div class="tcdToolbarDateRange-popup-buttons">
+                <button type="button" class="tcdToolbarDateRange-popup-cancel" data-i18n="dateRange.cancel">Cancel</button>
+                <button type="button" class="tcdToolbarDateRange-popup-apply" data-i18n="dateRange.apply">Apply</button>
+            </div>
+        </div>
+    </div>
     <div class="tcdToolbar-bottom-right-side">
         <div class="tcdToolbarSession drop-down">
             <div class="tcdToolbarSession_selected">

package/img/svg-icons/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><title>calendar</title><path d="M20,5H18V3.5a.5.5,0,0,0-1,0V5H9V3.5a.5.5,0,0,0-1,0V5H6A2,2,0,0,0,4,7V20a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V7A2,2,0,0,0,20,5ZM6,6H8V7.5a.5.5,0,0,0,1,0V6h8V7.5a.5.5,0,0,0,1,0V6h2a1,1,0,0,1,1,1V9.5H5V7A1,1,0,0,1,6,6ZM20,21H6a1,1,0,0,1-1-1V10.5H21V20A1,1,0,0,1,20,21ZM9,13.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1,0-1h1A.5.5,0,0,1,9,13.5Zm4.75,0a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1,0-1h1A.5.5,0,0,1,13.75,13.5Zm4.75,0a.5.5,0,0,1-.5.5H17a.5.5,0,0,1,0-1h1A.5.5,0,0,1,18.5,13.5ZM9,17a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1,0-1h1A.5.5,0,0,1,9,17Zm4.75,0a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1,0-1h1A.5.5,0,0,1,13.75,17Zm4.75,0a.5.5,0,0,1-.5.5H17a.5.5,0,0,1,0-1h1A.5.5,0,0,1,18.5,17Z" fill="#323232"/></svg>