@fintatech/fintachart 3.1.10 → 3.1.11

package/d.ts/FintaChart.d.ts

@@ -590,6 +590,13 @@ declare module FintaChart {
          * @param topOffset The top CSS value (e.g. '6rem').
          */
         static centerHorizontally(el: HTMLElement, topOffset: string): void;
+        /**
+         * Binds a tap handler firing once on touch or click.
+         *
+         * @param el The target element.
+         * @param handler The tap handler.
+         */
+        static onTap(el: HTMLElement, handler: (e: Event) => void): void;
         /**
          * Shows an element by clearing its display style.
          *
@@ -1878,6 +1885,10 @@ declare module FintaChart {
          * The ending date to load bars.
          */
         endDate?: Date;
+        /**
+         * Reset visible range to default view after load.
+         */
+        resetVisibleRange?: boolean;
     }
 }
 declare module FintaChart.Formatters {
@@ -2772,6 +2783,7 @@ declare module FintaChart {
          */
         constructor(config?: IContextMenuMotionEventConfig);
         handleEvent(event: IWindowEvent): boolean;
+        private snapshot;
         private finish;
         private startTimer;
         private stopTimer;
@@ -2963,6 +2975,15 @@ declare module FintaChart {
         hide(): void;
         private init;
         private onClose;
+        private onSubmit;
+        private collectFormData;
+        private validate;
+        private isValidEmail;
+        private sendPurchaseRequest;
+        private sendViaBackend;
+        private showError;
+        private showSuccess;
+        private clearMessages;
     }
 }
 declare module FintaChart {
@@ -5291,6 +5312,7 @@ declare module FintaChart {
         static enable(control: HTMLElement, enable: boolean): void;
         enable(value?: boolean): void;
         private static isElementReady;
+        private static hasSpectrum;
         private initSpectrum;
         private waitForAttach;
         private static initParams;
@@ -5978,6 +6000,7 @@ declare module FintaChart {
         private _hasCustomPicker;
         private _isActive;
         private _last;
+        private _hoverTimer;
         private _windowScrollHandler;
         private _windowResizeHandler;
         private _bodyClickHandler;
@@ -6179,6 +6202,7 @@ declare module FintaChart {
         private resetTradePanelOnInstrumentChange;
         private onLockShapesClick;
         private replaceLockIcon;
+        private getStaticQuantitiesForCalc;
         private getQuantityRules;
         private normalizeAmountByRules;
         private getNumberDecimals;
@@ -6273,7 +6297,6 @@ declare module FintaChart {
         private hideDropDown;
         private init;
         private setValue;
-        private showDropDownForHover;
         private showDropDown;
         private toggleButton;
         private toggleDropDown;
@@ -9504,6 +9527,8 @@ declare module FintaChart {
         SLOW: string;
         VOLUME_DIVISOR: string;
         OFFSET_MULTIPLIER: string;
+        MULTIPLIER: string;
+        BOX_RATIO_SMOOTHING: string;
         ENVELOPE_PERCENTAGE: string;
         BAR_COUNT: string;
         Q_PERIODS: string;
@@ -10840,6 +10865,8 @@ declare module FintaChart {
          */
         get period(): number;
         set period(value: number);
+        get multiplier(): number;
+        set multiplier(value: number);
         /**
          * The signal period.
          */
@@ -11724,6 +11751,8 @@ declare module FintaChart {
          */
         get period(): number;
         set period(value: number);
+        get multiplier(): number;
+        set multiplier(value: number);
         protected onInitializeIndicator(): void;
         protected onResetDefaults(): void;
         protected onInputTick(): void;
@@ -11880,6 +11909,8 @@ declare module FintaChart {
         static get type(): string;
         private _ema;
         private _emv;
+        private _boxRatio;
+        private _smoothedBoxRatio;
         /**
          * The smooth value.
          */
@@ -11890,6 +11921,11 @@ declare module FintaChart {
          */
         get volumeDivisor(): number;
         set volumeDivisor(value: number);
+        /**
+         * The box ratio smoothing period.
+         */
+        get boxRatioSmoothing(): number;
+        set boxRatioSmoothing(value: number);
         protected onInitializeIndicator(): void;
         protected onResetDefaults(): void;
         protected onInputTick(): void;
@@ -11905,6 +11941,8 @@ declare module FintaChart {
         static get type(): string;
         private _smaFast;
         private _smaSlow;
+        private _emaFast;
+        private _emaSlow;
         /**
          * The fast SMA period.
          */
@@ -11920,6 +11958,11 @@ declare module FintaChart {
          */
         get slow(): number;
         set slow(value: number);
+        /**
+         * The maType period.
+         */
+        get maType(): number;
+        set maType(value: number);
         protected onInitializeIndicator(): void;
         protected onResetDefaults(): void;
         protected onInputTick(): void;
@@ -13515,6 +13558,12 @@ declare module FintaChart {
          * @param value
          */
         formatValue(value: number): string;
+        /**
+         * Formats a volume value in a compact form (e.g. 1.03M, 12.4K).
+         *
+         * @param value
+         */
+        formatVolume(value: number): string;
         /**
          * Returns index
          *
@@ -13650,6 +13699,21 @@ declare module FintaChart {
          * @return
          */
         updateHoverRecord(record?: number): void;
+        /**
+         * 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
+         * N closes up to the hovered record).
+         *
+         * @param control The card's bar-info control.
+         * @param record  The hovered record index.
+         * @param color   The up/down colour for the current bar.
+         */
+        private renderOhlcCardGraphics;
+        /**
+         * Draws a price sparkline onto a canvas, scaling to its CSS size and
+         * device pixel ratio for a crisp line.
+         */
+        private drawSparkline;
         preserveAutoScaling(): void;
         cancelAutoScaling(): void;
         verticalAxisLabelMaxWidth(verticalAxis: VerticalAxis): number;
@@ -13692,6 +13756,7 @@ declare module FintaChart {
         private initInstrumentPaneTitle;
         private initPaneTitle;
         private initDraggablePaneTitle;
+        private initOHLCCard;
         private layoutHtmlElements;
         private motionHitTest;
         private updateInstrument;
@@ -14923,9 +14988,6 @@ declare module FintaChart {
     }
 }
 declare module FintaChart {
-    enum MimeType {
-        PNG = "image/png"
-    }
     interface IChartSnapshotHandler extends IChartComponent {
         /**
          * Returns snapshot file name.
@@ -14949,11 +15011,16 @@ declare module FintaChart {
         name(): string;
         save(): void;
         saveToClipboard(): void;
+        private writeBlobToClipboard;
+        private fallbackDownload;
+        private showChartMessage;
         private createSnapshot;
         private saveImage;
-        private writeToClipboard;
-        private canWriteToClipboard;
-        private canvasToBlob;
+        /**
+         * Returns a human-readable reason why the clipboard cannot be used,
+         * or `null` when a clipboard write may be attempted.
+         */
+        private clipboardUnavailableReason;
         private addBorders;
         private trimTransparentMargins;
         private loadImage;
@@ -21296,6 +21363,7 @@ declare module FintaChart {
         private _accountSize;
         private _lotSize;
         private _riskPercentage;
+        private _leverage;
         private _profitTicks;
         private _profitPrice;
         private _stopTicks;
@@ -21303,6 +21371,7 @@ declare module FintaChart {
         private _entryPrice;
         private _input_accountSizeHTMLObj;
         private _input_lotSizeHTMLObj;
+        private _input_leverageHTMLObj;
         private _input_riskPercentageHTMLObj;
         private _input_profitTicksHTMLObj;
         private _input_profitPriceHTMLObj;
@@ -21351,6 +21420,7 @@ declare module FintaChart {
         private handleLevelPriceChange;
         private getRelatedInputField;
         private updateLevel;
+        private applyEntryChange;
         private calculateTicksFromPrice;
         private calculatePriceFromTicks;
         private validatePrice;
@@ -21390,6 +21460,8 @@ declare module FintaChart {
         rewardPips: number;
         calculatedStop: number;
         calculatedTarget: number;
+        accountTooSmall: boolean;
+        minLotSize: number;
     }
     interface IPositionDrawingShapeState extends IShapeState {
         entry: number;
@@ -21442,9 +21514,13 @@ declare module FintaChart {
          */
         lotSize?: number;
         /**
-         * Shape risk percentage
+         * Shape risk percentage (display-only — no longer drives Qty)
          */
         riskPercentage?: number;
+        /**
+         * Account leverage used to size the position: Qty = (accountSize * leverage) / entryPrice
+         */
+        leverage?: number;
     }
     interface IPositionShapeDefaults extends IShapeDefaults {
         /**
@@ -21471,6 +21547,10 @@ declare module FintaChart {
         * Shape risk percentage
         */
         riskPercentage: number;
+        /**
+        * Account leverage used to size the position: Qty = (accountSize * leverage) / entryPrice
+        */
+        leverage: number;
         /**
          * Shape visibility config
          */
@@ -21494,6 +21574,7 @@ declare module FintaChart {
         const COMPACT_MODE_CHANGED = "compactModeChanged";
         const ALWAYS_SHOW_STATS_CHANGED = "alwaysShowStatsChanged";
         const VISIBILITY_CONFIG_CHANGED = "visibilityConfigChanged";
+        const ACCOUNT_TOO_SMALL_CHANGED = "accountTooSmallChanged";
     }
     abstract class PositionDrawingShape extends Shape {
         private _entry;
@@ -21511,6 +21592,7 @@ declare module FintaChart {
         private _dragStartPoints?;
         private _initialTimeframe?;
         private _initialWidthInBars?;
+        private _accountTooSmall;
         static defaults: IPositionShapeDefaults;
         protected get defaults(): IPositionShapeDefaults;
         static get type(): string;
@@ -21531,6 +21613,8 @@ declare module FintaChart {
         set riskPercentage(value: number);
         get lotSize(): number;
         set lotSize(value: number);
+        get leverage(): number;
+        set leverage(value: number);
         get visibilityConfig(): ITimeFrameVisibilityConfig;
         set visibilityConfig(value: ITimeFrameVisibilityConfig);
         setCustomPoints(points: IPositionPoint[]): void;
@@ -21588,6 +21672,7 @@ declare module FintaChart {
         private paintExecutionPoint;
         private addOpacity;
         private getShapeWidth;
+        private decimalPlaces;
         private findClosestBarIndex;
         /**
          * Check if the current timeframe matches the initial timeframe
@@ -21994,6 +22079,7 @@ declare module FintaChart {
         private generateList;
         deleteTemplate(key: string): void;
         selectTemplate(key: string): void;
+        private resetFibonacciLevels;
     }
 }
 declare module FintaChart {
@@ -22402,8 +22488,23 @@ declare module FintaChart {
         private _motions;
         protected state: TradingToolState;
         locked: boolean;
+        protected _dim: number | null;
         protected get canHandleEvents(): boolean;
         get canMove(): boolean;
+        get dim(): number | null;
+        /**
+         * Visually dims the trading tool by multiplying its theme colors by `value`.
+         * Pass `null` (or omit) to undim and restore the original theme.
+         * @param value Number in (0, 1] or null to clear.
+         */
+        setDimmed(value?: number | null): void;
+        /**
+         * Returns a deep clone of `src` with every `strokeColor` and `fillColor`
+         * leaf multiplied by `value`. Used by subclasses inside `actualTheme` when
+         * `_dim` is set.
+         */
+        protected _dimThemeColors<T extends object>(src: T, value: number): T;
+        private _dimWalk;
         protected constructor();
         dispose(): void;
         protected onPaneChanged(oldValue: Pane): void;
@@ -22426,6 +22527,10 @@ declare module FintaChart {
         private formatProfitDescription;
         modifyThemeColor(color: string, opacity?: number): string;
         formatValue(value: number): number;
+        protected getDisplayedBidAsk(fallbackPrice?: number): {
+            bid: number;
+            ask: number;
+        };
         private _initButtons;
         private initMotionEvents;
         protected _handleHoverGesture(gesture?: MouseHoverMotionEvent): boolean;
@@ -22541,6 +22646,10 @@ declare module FintaChart {
     const defaultLabelZIndex = 500;
     const selectedLabelZIndex = 501;
     const blur = 10;
+    const priceTypeBadgeWidth = 22;
+    const priceTypeBadgeGap = 5;
+    const STOP_LIMIT_LIMIT_SUFFIX = "limit";
+    const STOP_LIMIT_STOP_SUFFIX = "stop";
     class OrderBar extends TradingTool {
         private _config;
         get localizedKind(): string;
@@ -22553,6 +22662,7 @@ declare module FintaChart {
         get theme(): IOrderBarTheme;
         set theme(value: IOrderBarTheme);
         get actualTheme(): IOrderBarTheme;
+        setDimmed(value?: number | null): void;
         get defaultTheme(): IOrderBarTheme;
         _cancelButtonOptions: IButtonOptions;
         private _acceptedButtonOptions;
@@ -22629,6 +22739,8 @@ declare module FintaChart {
         private _forceExpanded;
         private _parentOrder?;
         get showlabel(): boolean;
+        get priceType(): 'LP' | 'SP' | null;
+        get priceTypeBadgeReservedWidth(): number;
         get isSelected(): boolean;
         private get _isExitChildOrder();
         private _ensureParentLink;
@@ -22664,6 +22776,7 @@ declare module FintaChart {
          * @inheritdoc
          */
         paint(): void;
+        private _paintPriceTypeBadge;
         finishModifyMode(): void;
         paintVerticalAxisLabels(): void;
         orderModifyStarted(): boolean;
@@ -22808,6 +22921,7 @@ declare module FintaChart {
          * Gets current theme of position tool.
          */
         get actualTheme(): IPositionBarTheme;
+        setDimmed(value?: number | null): void;
         /**
          * Gets default theme of position tool.
          */
@@ -23056,12 +23170,17 @@ declare module FintaChart {
         private DRAG_THRESHOLD;
         _isTP: boolean;
         _isSL: boolean;
-        _isTpDrag: boolean;
+        _isTpDrag: boolean | null;
         sizeOptions: any;
         constructor(parent: OrderBar, isTP: boolean, isSL: boolean);
         paintVerticalAxisLabels(): void;
         protected _handleHoverGesture(gesture: MouseHoverMotionEvent): boolean;
         protected _handleMotionEventPencilDevice(gesture: MoveMotionEvent, event: IWindowEvent): boolean;
+        private _isTakeProfitCreated;
+        private _isStopLossCreated;
+        private _getButtonAreas;
+        private _isOnTakeProfitButton;
+        private _isOnStopLossButton;
         private _detectTP;
         private _updateStopLossTakeProfit;
         /**
@@ -23498,6 +23617,10 @@ declare module FintaChart {
          * Is chart OHLC panel showed
          */
         ohlcShowed?: boolean;
+        /**
+         * Is chart OHLC info card showed
+         */
+        ohlcCardShowed?: boolean;
         /**
          * Scrollbar loaded event emitter
          */
@@ -23578,6 +23701,7 @@ declare module FintaChart {
         orderSettings?: GetOrderSettingsType;
         useExternalSearchInput?: boolean;
         showLogoWatermark?: boolean;
+        useNewBrandedWatermark?: boolean;
         isChartWidget?: boolean;
     }
     /**
@@ -23608,6 +23732,10 @@ declare module FintaChart {
          * Is OHLC panel showed
          */
         ohlcShowed?: boolean;
+        /**
+         * Is OHLC info card showed
+         */
+        ohlcCardShowed?: boolean;
         /**
          * Is chart scroll enabled
          */
@@ -23621,6 +23749,7 @@ declare module FintaChart {
          */
         showInstrumentWatermark: boolean;
         showLogoWatermark: boolean;
+        useNewBrandedWatermark: boolean;
         /**
          * Is hide chart scroll to last bar
          */
@@ -23868,6 +23997,10 @@ declare module FintaChart {
         private readonly _sessionBreakLines;
         private _supportedTimeFrames;
         private readonly _handleWindowResizeEvent;
+        private _rootResizeObserver;
+        private _lastObservedWidth;
+        private _lastObservedHeight;
+        private _resizeRafPending;
         private readonly _indicatorAlertsHandler;
         private readonly _addThemeCssClass;
         private readonly _barCountdown;
@@ -23943,6 +24076,9 @@ declare module FintaChart {
         private _showAlertId;
         private _favoriteIndicators;
         private _shapeTemplates;
+        private static readonly _shapeTemplatesStorageKey;
+        private static loadShapeTemplatesFromStorage;
+        private static saveShapeTemplatesToStorage;
         private _magnetMode;
         private _lockShapes;
         private _pendingTimeFrameRangeClamp;
@@ -23952,6 +24088,7 @@ declare module FintaChart {
         private _conversionRate;
         private _touchPanActive;
         private _touchPanLastX;
+        get isTouchPanActive(): boolean;
         get conversionRate(): {
             ask: number;
             bid: number;
@@ -24167,6 +24304,11 @@ declare module FintaChart {
          */
         get ohlcShowed(): boolean;
         set ohlcShowed(value: boolean);
+        /**
+         * Get is OHLC info card showed
+         */
+        get ohlcCardShowed(): boolean;
+        set ohlcCardShowed(value: boolean);
         /**
          * Get chart panes
          */
@@ -24243,6 +24385,7 @@ declare module FintaChart {
         get showInstrumentWatermark(): boolean;
         set showInstrumentWatermark(value: boolean);
         get showLogoWatermark(): boolean;
+        get useNewBrandedWatermark(): boolean;
         /**
          * Get chart size
          */
@@ -24549,6 +24692,14 @@ declare module FintaChart {
          * @param state
          */
         restoreIndicatorsState(state: string | IIndicatorState[]): void;
+        /**
+         * Removes orphaned panes (non-primary, no indicators, no savable
+         * shapes). Panes claimed by `indicatorStates` via `paneIndex` are kept.
+         *
+         * @param indicatorStates States whose `paneIndex` marks panes to keep.
+         * @return The number of panes removed.
+         */
+        pruneEmptyPanes(indicatorStates?: IIndicatorState[]): number;
         /**
          * Loads shapes state
          *
@@ -24763,6 +24914,7 @@ declare module FintaChart {
          *
          * @param updateInstruments
          */
+        private hasRenderSize;
         refresh(updateInstruments?: boolean): void;
         /**
          * Triggers a repaint after direct property mutations (theme,
@@ -24836,6 +24988,16 @@ declare module FintaChart {
         private showDataInfo;
         private hideDataInfo;
         toggleDataInfo(show: boolean): void;
+        /**
+         * Resolves the root container that holds this chart's OHLC card,
+         * accounting for the multi-chart / mobile layouts where `_rootDiv`
+         * may not be an ancestor of the card element.
+         */
+        private ohlcCardRootContainer;
+        private showOhlcCard;
+        private hideOhlcCard;
+        toggleOhlcCardButton(show: boolean): void;
+        setOhlcCardVariant(variant: string): void;
         private translateClonedShape;
         private subscribe;
         private unsubscribe;

package/htmldialogs/DemoModePopup.html

@@ -3,20 +3,46 @@
         <div class="background tcdSVGIcon default-fill" tcdSVGData="demo-popup-bg"></div>
 
         <div class="content-wrapper">
-            <div class="img-wrapper dark-img default-fill">
-                <div class="tcdSVGIcon default-fill banner dark-banner" tcdSVGData="Illustration-License-b"></div>
-                <div class="tcdSVGIcon default-fill banner light-banner" tcdSVGData="Illustration-License-w"></div>
-            </div>
-
             <div class="logo-wrapper tcdSVGIcon default-fill" tcdSVGData="fintatech"></div>
+
             <div class="text-wrapper">
                 <p>This is a demo version with limited functionality</p>
-                <p>Contact us to get full version</p>
+                <p>Fill in the form below to purchase the full version</p>
             </div>
 
-            <div class="btn-wrapper">
-                <a href="https://fintatech.com/html5-financial-charting-software/" class="btn">Contact us</a>
-            </div>
+            <form class="purchase-form" novalidate>
+                <div class="form-row">
+                    <label for="tcdPurchase_fullName">Name and surname<span class="required-mark">*</span></label>
+                    <input id="tcdPurchase_fullName" name="fullName" type="text" autocomplete="name" required>
+                </div>
+
+                <div class="form-row">
+                    <label for="tcdPurchase_email">Email<span class="required-mark">*</span></label>
+                    <input id="tcdPurchase_email" name="email" type="email" autocomplete="email" required>
+                </div>
+
+                <div class="form-row">
+                    <label for="tcdPurchase_company">Company name<span class="required-mark">*</span></label>
+                    <input id="tcdPurchase_company" name="company" type="text" autocomplete="organization" required>
+                </div>
+
+                <div class="form-row">
+                    <label for="tcdPurchase_mainDomain">Main domain<span class="required-mark">*</span></label>
+                    <input id="tcdPurchase_mainDomain" name="mainDomain" type="text" placeholder="example.com" required>
+                </div>
+
+                <div class="form-row">
+                    <label for="tcdPurchase_secondaryDomain">Secondary domain <span class="optional-mark">(optional)</span></label>
+                    <input id="tcdPurchase_secondaryDomain" name="secondaryDomain" type="text" placeholder="example.org">
+                </div>
+
+                <p class="form-error" hidden></p>
+                <p class="form-success" hidden>Thank you! Your request has been sent.</p>
+
+                <div class="btn-wrapper">
+                    <button type="submit" class="btn purchase-btn">Purchase</button>
+                </div>
+            </form>
 
             <span class="close-btn tcdSVGIcon" tcdSVGData="close-windows"></span>
         </div>

package/htmldialogs/IndicatorSettingsDialog.html

@@ -1,38 +1,76 @@
-<div id="tcdIndicatorDialog" class="tcdDialog custom-modal-dialog" tabindex="-1">
+<div
+    id="tcdIndicatorDialog"
+    class="tcdDialog custom-modal-dialog"
+    tabindex="-1"
+>
     <div class="custom-modal-content">
         <div class="custom-modal-body tcdIndicatorDialog_body">
             <ul class="tcdTabs">
-                <li class="tcdTabItem parameters-tab active" data-id="tcdIndicatorDialog_tab_parameters" data-i18n="indicator.all.dialog.parameters"></li>
-                <li class="tcdTabItem styles-tab" data-id="tcdIndicatorDialog_tab_style" data-i18n="indicator.all.dialog.style"></li>
-<!--                TODO: Hide-->
-<!--                <li class="tcdTabItem visibility-tab" data-id="tcdIndicatorDialog_tab_visibility" data-i18n="indicator.all.dialog.visibility"></li>-->
+                <li
+                    class="tcdTabItem parameters-tab active"
+                    data-id="tcdIndicatorDialog_tab_parameters"
+                    data-i18n="indicator.all.dialog.parameters"
+                ></li>
+                <li
+                    class="tcdTabItem styles-tab"
+                    data-id="tcdIndicatorDialog_tab_style"
+                    data-i18n="indicator.all.dialog.style"
+                ></li>
+                <!--                TODO: Hide-->
+                <!--                <li class="tcdTabItem visibility-tab" data-id="tcdIndicatorDialog_tab_visibility" data-i18n="indicator.all.dialog.visibility"></li>-->
             </ul>
             <div class="tcdTabsContent">
-                <div class="tcdTabPane active" data-id="tcdIndicatorDialog_tab_parameters">
+                <div
+                    class="tcdTabPane active"
+                    data-id="tcdIndicatorDialog_tab_parameters"
+                >
                     <div id="tcdIndicatorDialog_pane_parameters">
-                        <div class="tcdDialog-body-content">
-                        </div>
+                        <div class="tcdDialog-body-content"></div>
                     </div>
                 </div>
                 <div class="tcdTabPane" data-id="tcdIndicatorDialog_tab_style">
                     <div id="tcdIndicatorDialog_pane_figure">
-                        <div class="tcdDialog-body-content">
-                        </div>
+                        <div class="tcdDialog-body-content"></div>
                     </div>
                 </div>
-                <div class="tcdTabPane" data-id="tcdIndicatorDialog_tab_visibility">
+                <div
+                    class="tcdTabPane"
+                    data-id="tcdIndicatorDialog_tab_visibility"
+                >
                     <div id="tcdIndicatorDialog_pane_visibility">
-                        <div class="tcdDialog-body-content">
-                        </div>
+                        <div class="tcdDialog-body-content"></div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="custom-modal-footer tcdIndicatorDialog-footer">
-            <button type="button" class="tcdBtn tcdBtn-link tcd_modalClose tcdBtn-close" tcdModal-data="tcdIndicatorDialog"
-                    data-dismiss="modal" data-i18n="dialog.button.close"></button>
-            <button type="button" class="tcdBtn tcdBtn-primary tcd_modalClose" id="tcdIndicatorDialog_btn_apply"
-                    tcdModal-data="tcdIndicatorDialog" data-i18n="dialog.button.apply"></button>
+            <div class="tcdIndicatorDialog-footer-buttons">
+                <button
+                    type="button"
+                    class="tcdBtn tcdBtn-link defaultBtnColor"
+                    id="tcdIndicatorDialog_btn_default"
+                    tcdModal-data="tcdIndicatorDialog"
+                    data-i18n="dialog.button.defaults"
+                >
+                    Default
+                </button>
+            </div>
+            <div class="tcdIndicatorDialog-footer-buttons">
+                <button
+                    type="button"
+                    class="tcdBtn tcdBtn-link tcd_modalClose tcdBtn-close"
+                    tcdModal-data="tcdIndicatorDialog"
+                    data-dismiss="modal"
+                    data-i18n="dialog.button.close"
+                ></button>
+                <button
+                    type="button"
+                    class="tcdBtn tcdBtn-primary tcd_modalClose"
+                    id="tcdIndicatorDialog_btn_apply"
+                    tcdModal-data="tcdIndicatorDialog"
+                    data-i18n="dialog.button.apply"
+                ></button>
+            </div>
         </div>
     </div>
 </div>