UNPKG

igniteui-angular-charts

Version:

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

62 lines 95.9 kB
/*
THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
https://www.infragistics.com/legal/license/igultimate-la
https://www.infragistics.com/legal/license/igultimate-eula
GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
*/
import { Component, EventEmitter, Output, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { TypeRegistrar } from "igniteui-angular-core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
var IgxFinancialChartDefaultTemplatesComponent = /** @class */ /*@__PURE__*/ (function () {
    function IgxFinancialChartDefaultTemplatesComponent(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
        this.onContentReady = new EventEmitter();
    }
    IgxFinancialChartDefaultTemplatesComponent.prototype.getSelection = function (ele) {
        var ret = [];
        for (var i = 0; i < ele.options.length; i++) {
            if (ele.options[i].selected) {
                ret.push(ele.options[i].value);
            }
        }
        return ret;
    };
    IgxFinancialChartDefaultTemplatesComponent.prototype.asAny = function (ele) {
        return ele;
    };
    IgxFinancialChartDefaultTemplatesComponent.register = function () {
        TypeRegistrar.registerCons("IgxFinancialChartDefaultTemplatesComponent", IgxFinancialChartDefaultTemplatesComponent);
    };
    IgxFinancialChartDefaultTemplatesComponent.prototype.ngAfterContentInit = function () {
        this.onContentReady.emit({});
    };
    IgxFinancialChartDefaultTemplatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxFinancialChartDefaultTemplatesComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    IgxFinancialChartDefaultTemplatesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxFinancialChartDefaultTemplatesComponent, selector: "igx-financial-chart-default-templates", outputs: { onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "financialChartRangeSelectorTemplate", first: true, predicate: ["financialChartRangeSelectorTemplate"], descendants: true, static: true }, { propertyName: "financialChartTypePickerTemplate", first: true, predicate: ["financialChartTypePickerTemplate"], descendants: true, static: true }, { propertyName: "financialChartIndicatorMenuTemplate", first: true, predicate: ["financialChartIndicatorMenuTemplate"], descendants: true, static: true }, { propertyName: "financialChartToolbarTemplate", first: true, predicate: ["financialChartToolbarTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n    <ng-template #financialChartRangeSelectorTemplate let-vm=\"vm\">\n        <div class='financialChartRangeSelector'>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorOneMonth' *ngIf=\"vm.oneMonthVisible\">\n\t\t    \t<input type='radio' value='1m' [checked]=\"vm.oneMonthChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_OneMonth}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorThreeMonths' *ngIf=\"vm.threeMonthsVisible\">\n\t\t    \t<input type='radio' value='3m' [checked]=\"vm.threeMonthsChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_ThreeMonths}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorSixMonths' *ngIf=\"vm.sixMonthsVisible\">\n\t\t    \t<input type='radio' value='6m' [checked]=\"vm.sixMonthsChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_SixMonths}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorYTD' *ngIf=\"vm.yearToDateVisible\">\n\t\t    \t<input type='radio' value='YTD' [checked]=\"vm.yearToDateChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_YearToDate}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorOneYear' *ngIf=\"vm.oneYearVisible\">\n\t\t    \t<input type='radio' value='1y' [checked]=\"vm.oneYearChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_OneYear}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorAll' *ngIf=\"vm.allVisible\">\n\t\t    \t<input type='radio' value='all' [checked]=\"vm.allChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_All}}</span>\n\t\t    </label>\n\t    </div>\n    </ng-template>\n\n    <ng-template #financialChartTypePickerTemplate let-vm=\"vm\">\n        <button class='financialChartTypePickerDropDownButton' (click)=\"vm.onButtonPressed()\" [attr.data-value]=\"vm.chartTypeString\">\n\t    \t<span class='ui-icon ui-icon-changeable'></span>\n\t    \t<span class='ui-icon-toolbar-dd'></span>\n\t    </button>\n\n\t    <div class='financialChartTypePickerDropDownMenu' [style.display]=\"vm.isOpen ? 'block' : 'none'\"\n            (click)=\"vm.handleDropDownClick($event)\">\n\t    \t<ul>\n\t    \t\t<li class='financialChartListItem' data-value='Auto'>\n\t    \t\t    <span class='ui-icon ui-icon-chartAuto'></span>\n\t    \t\t    <span>Auto</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Bar'>\n\t    \t\t\t<span class='ui-icon ui-icon-BarIcon'></span>\n\t    \t\t\t<span>Bar</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Line'>\n\t    \t\t\t<span class='ui-icon ui-icon-LineIcon'></span>\n\t    \t\t\t<span>Line</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Candle'>\n\t    \t\t\t<span class='ui-icon ui-icon-CandleIcon'></span>\n\t    \t\t\t<span>Candle</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Column'>\n\t    \t\t\t<span class='ui-icon ui-icon-ColumnIcon'></span>\n\t    \t\t\t<span>Column</span>\n\t    \t\t</li>\n\t    \t</ul>\n\t    </div>\n    </ng-template>\n\n    <ng-template #financialChartIndicatorMenuTemplate let-vm=\"vm\">\n        <button class='financialChartIndicatorMenuDropDownButton' (click)=\"vm.onButtonPressed()\">\n\t    \t<div class='ui-ChartButtonWrapper'>\n\t    \t\t<span class='ui-icon ui-icon-IndicatorsIcon'></span>\n\t    \t\t<span class='financialChartIndicatorMenuLabel'>{{vm.financialChart_IndicatorMenu_Header}}</span>\n\t    \t\t<span class='ui-icon-toolbar-dd'></span>\n\t    \t</div>\n        </button>\n\n\t    <div class='financialChartIndicatorMenuDropDownMenu' [style.display]=\"vm.isOpen ? 'block' : 'none'\" (click)=\"vm.handleDropDownClick($event)\">\n\t    \t<ul class='financialChartIndicatorMenuDropDownMenuList'>\n\t\t\t<li data-value='FinancialOverlayType'>\n\t\t\t\t<span>{{vm.financialChart_IndicatorMenu_OverlaysCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='BollingerBands'>{{vm.financialChart_IndicatorsMenu_Overlay_BollingerBands}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PriceChannel'>{{vm.financialChart_IndicatorsMenu_Overlay_PriceChannel}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t\t<li data-value='TrendLineType'>\n\t\t\t\t<span>{{vm.financialChart_IndicatorMenu_TrendlinesCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='LinearFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_LinearFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='QuadraticFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_QuadraticFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='CubicFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_CubicFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='QuarticFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_QuarticFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='QuinticFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_QuinticFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='LogarithmicFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_LogarithmicFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ExponentialFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_ExponentialFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PowerLawFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_PowerLawFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='SimpleAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_SimpleAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ExponentialAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_ExponentialAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ModifiedAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_ModifiedAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='CumulativeAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_CumulativeAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='WeightedAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_WeightedAverage}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t\t<li data-value='FinancialChartVolumeType'><span>{{vm.financialChart_IndicatorMenu_VolumeCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='Column'>{{vm.financialChart_IndicatorsMenu_Volume_Column}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='Line'>{{vm.financialChart_IndicatorsMenu_Volume_Line}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='Area'>{{vm.financialChart_IndicatorsMenu_Volume_Area}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t\t<li data-value='FinancialIndicatorType'><span>{{vm.financialChart_IndicatorMenu_IndicatorsCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AbsoluteVolumeOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_AbsoluteVolumeOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AccumulationDistribution'>{{vm.financialChart_IndicatorsMenu_Indicator_AccumulationDistribution}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AverageDirectionalIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_AverageDirectionalIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AverageTrueRange'>{{vm.financialChart_IndicatorsMenu_Indicator_AverageTrueRange}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='BollingerBandWidth'>{{vm.financialChart_IndicatorsMenu_Indicator_BollingerBandWidth}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ChaikinOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_ChaikinOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ChaikinVolatility'>{{vm.financialChart_IndicatorsMenu_Indicator_ChaikinVolatility}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='CommodityChannelIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_CommodityChannelIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='DetrendedPriceOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_DetrendedPriceOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='EaseOfMovement'>{{vm.financialChart_IndicatorsMenu_Indicator_EaseOfMovement}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='FastStochasticOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_FastStochasticOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ForceIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_ForceIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='FullStochasticOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_FullStochasticOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MarketFacilitationIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_MarketFacilitationIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MassIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_MassIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MedianPrice'>{{vm.financialChart_IndicatorsMenu_Indicator_MedianPrice}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MoneyFlowIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_MoneyFlowIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MovingAverageConvergenceDivergence'>{{vm.financialChart_IndicatorsMenu_Indicator_MovingAverageConvergenceDivergence}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='NegativeVolumeIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_NegativeVolumeIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='OnBalanceVolume'>{{vm.financialChart_IndicatorsMenu_Indicator_OnBalanceVolume}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PercentagePriceOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_PercentagePriceOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PercentageVolumeOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_PercentageVolumeOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PositiveVolumeIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_PositiveVolumeIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PriceVolumeTrend'>{{vm.financialChart_IndicatorsMenu_Indicator_PriceVolumeTrend}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='RateOfChangeAndMomentum'>{{vm.financialChart_IndicatorsMenu_Indicator_RateOfChangeAndMomentum}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='RelativeStrengthIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_RelativeStrengthIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='SlowStochasticOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_SlowStochasticOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='StandardDeviation'>{{vm.financialChart_IndicatorsMenu_Indicator_StandardDeviation}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='StochRSI'>{{vm.financialChart_IndicatorsMenu_Indicator_StochRSI}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='TRIX'>{{vm.financialChart_IndicatorsMenu_Indicator_TRIX}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='TypicalPrice'>{{vm.financialChart_IndicatorsMenu_Indicator_TypicalPrice}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='UltimateOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_UltimateOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='WeightedClose'>{{vm.financialChart_IndicatorsMenu_Indicator_WeightedClose}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='WilliamsPercentR'>{{vm.financialChart_IndicatorsMenu_Indicator_WilliamsPercentR}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</ul>\n\t    </div>\n    </ng-template>\n\n    <ng-template #financialChartToolbarTemplate let-vm=\"vm\">\n        <ng-template #defaultTemplate>\n            <div></div>\n        </ng-template>\n\n        <div class='financialChartToolbar'>\n            <div class='financialChartToolbar'>\n                <div class='financialChartIndicatorMenu' *ngIf='vm.isIndicatorMenuVisible'>\n                    <ng-container *ngTemplateOutlet=\"vm.financialChartIndicatorMenu.template ? vm.financialChartIndicatorMenu.template : defaultTemplate; context: vm.financialChartIndicatorMenu\">\n                    </ng-container>\n                </div>\n                <div class='financialChartRangeSelector'>\n                    <ng-container *ngTemplateOutlet=\"vm.financialChartRangeSelector.template ? vm.financialChartRangeSelector.template : defaultTemplate; context: vm.financialChartRangeSelector\">\n                    </ng-container>\n                </div>\n                <div class='financialChartTypePicker'>\n                    <ng-container *ngTemplateOutlet=\"vm.financialChartTypePicker.template ? vm.financialChartTypePicker.template : defaultTemplate; context: vm.financialChartTypePicker\">\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n  ", isInline: true, styles: ["\n.ui-financialchart-container {\n    font-family: \"Segoe UI\",Arial,sans-serif;\n    font-family: var(--financial-toolbar-font-family, \"Segoe UI\",Arial,sans-serif);\n    font-size: 12px;\n    font-size: var(--financial-toolbar-font-size, 12px);\n    border-width: 0;\n    -webkit-tap-highlight-color: rgba(0,0,0,0);\n    -webkit-tap-highlight-color: var(--financial-highlight-color, rgba(0,0,0,0));\n}\n\n.ui-financialchart-mainChart {\n    margin-left: 15px;\n    margin-left: var(--financial-pane-margin-left, 15px);\n}\n\n.ui-financialchart-volumeChart {\n    margin-left: 15px;\n    margin-left: var(--financial-pane-margin-left, 15px);\n}\n\n.financialChartMainGrid {\n    height: 100%;\n    width: 100%;\n    display: grid;\n    display: -ms-grid;\n    -ms-grid-columns: 100%;\n}\n\n.financialChartPrice {\n    grid-row: 3;\n    -ms-grid-row: 3;\n    margin-top: 10px;\n    margin-top: var(--financial-pane-margin-top, 10px);\n}\n.financialChartPrice, .financialChartPrice > div {\n    min-height: 100px;\n}\n.financialChartIndicators {\n    grid-row: 4;\n    -ms-grid-row: 4;\n}\n.financialChartVolume {\n    grid-row: 5;\n    -ms-grid-row: 5;\n}\n.financialChartZoomSlider {\n    grid-row: 6;\n    -ms-grid-row: 6;\n}\n\n/*\n/////////////////////\n*/\n/* Toolbar styles */\n/*\n/////////////////////\n*/\n\n.financialChartToolbar {\n    display: grid;\n    display: -ms-grid;\n    grid-row: 1;\n    -ms-grid-rows: 100%;\n    -ms-grid-row: 1;\n    -ms-grid-columns: 100%;\n    font-family: \"Verdana\",Arial,sans-serif;\n    font-family: var(--financial-toolbar-font-family, \"Verdana\",Arial,sans-serif);\n    font-size: 12px;\n    font-size: var(--financial-toolbar-font-size, 12px);\n}\n\n/* scrollbar styles */\n.financialChartToolbar ::-webkit-scrollbar\n{\n    width: 14px;\n    width: var(--financial-toolbar-scrollbar-width, 14px);\n    background-color: #eee;\n    background-color: var(--financial-toolbar-scrollbar-background, #eee);\n}\n.financialChartToolbar ::-webkit-scrollbar-track\n{\n    border-radius: 1px;\n    border-radius: var(--financial-toolbar-scrollbar-track-radius, 1px);\n    background-color: #eee;\n    background-color: var(--financial-toolbar-scrollbar-track-background, #eee);\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n    -webkit-box-shadow: inset 0 0 var(--financial-toolbar-scrollbar-track-shadow-radius, 6px) var(--financial-toolbar-scrollbar-track-shadow-color, rgba(0,0,0,0.3));\n}\n.financialChartToolbar ::-webkit-scrollbar-thumb\n{\n    border-radius: 1px;\n    border-radius: var(--financial-toolbar-scrollbar-thumb-radius, 1px);\n    background-color: #838383;\n    background-color: var(--financial-toolbar-scrollbar-thumb-background, #838383);\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);\n    -webkit-box-shadow: inset 0 0 var(--financial-toolbar-scrollbar-thumb-shadow-radius, 6px) var(--financial-toolbar-scrollbar-thumb-shadow-color, rgba(0,0,0,0.3));\n}\n\n.financialChartToolbar .financialChartToolbar {\n    display: flex;\n    display: -ms-flexbox;\n    align-items: center;\n    border: 1px solid #dadada;\n    border: var(--financial-toolbar-border-thickness, 1px) solid var(--financial-toolbar-border-color, #dadada);\n    color: black;\n    color: var(--financial-toolbar-text-color, black);\n    max-height: 45px;\n    max-height: var(--financial-toolbar-max-height, 45px);\n    background: #eeeeee;\n    background: var(--financial-toolbar-background, #eeeeee);\n}\n\n.financialChartToolbar,\n.financialChartToolbar button {\n    font: 400 13px \"Segoe UI\", Arial, sans-serif!important;\n    font: var(--financial-toolbar-range-button-font, 400 13px \"Segoe UI\", Arial, sans-serif!important);\n}\n\n.financialChartRangeSelector {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-transform: uppercase;\n    height: 100%;\n}\n\n.financialChartRangeSelector input {\n    display: none;\n}\n\n.financialChartRangeSelectorLabel {\n    cursor: pointer;\n    height: 100%;\n}\n.financialChartRangeSelectorLabel:hover .financialChartRangeSelectorLabelSpan {\n    color: #4897AA;\n    color: var(--financial-toolbar-range-button-hover-color, #4897AA);\n    background: transparent;\n    background: var(--financial-toolbar-range-button-hover-background, transparent);\n}\n\n.financialChartRangeSelectorLabel input:checked + span {\n    color: #444444;\n    color: var(--financial-toolbar-range-button-check-color, #444444);\n    background-color: #dadada;\n    background-color: var(--financial-toolbar-range-button-check-background, #dadada);\n}\n\n.financialChartRangeSelectorLabelSpan {\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 10px;\n    padding: var(--financial-toolbar-range-button-padding, 10px);\n    box-sizing: border-box;\n}\n\n.financialChartRangeSelectorLastOption {\n    border: none;\n    padding-right: 0;\n    padding-right: var(--financial-toolbar-range-button-padding-right, 0px);\n}\n\n.financialChartIndicatorMenu,\n.financialChartTypePicker {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.financialChartTypePicker {\n    margin-left: auto;\n    height: 100%;\n    border-left: 1px solid #dadada;\n    border-left: var(--financial-toolbar-border-thickness, 1px) solid\n                 var(--financial-toolbar-border-color, #dadada);\n}\n\n.financialChartIndicatorMenu {\n    height: 100%;\n    padding:0 10px;\n    border-right: 1px solid #dadada;\n    border-right: var(--financial-toolbar-border-thickness, 1px) solid\n                  var(--financial-toolbar-border-color, #dadada);\n}\n\n.financialChartIndicatorMenuDropDownMenu,\n.financialChartTypePickerDropDownMenu {\n    background: #fff;\n    background: var(--financial-toolbar-dropdown-background-color, #fff);\n    color: black;\n    color: var(--financial-toolbar-dropdown-text-color, black);\n    display: flex;\n    flex-direction: column;\n    z-index: 1;\n    position: absolute;\n    top: calc(100% + 1px);\n    top: calc(100% + var(--financial-toolbar-dropdown-top-offset, 1px));\n    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\n    box-shadow: var(--financial-toolbar-dropdown-shadow,  0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22));\n    white-space: nowrap;\n    font-family: \"Verdana\",Arial,sans-serif;\n    font-family: var(--financial-toolbar-dropdown-font-family, \"Verdana\",Arial,sans-serif);\n    font-size: 12px;\n    font-size: var(--financial-toolbar-dropdown-font-size, 12px);\n}\n\n.financialChartIndicatorMenuDropDownMenu {\n    left: 0;\n    min-width: 100px;\n    min-width: var(--financial-toolbar-dropdown-min-width, 100px);\n    height: 300px;\n    height: var(--financial-toolbar-dropdown-height, 300px);\n    overflow: auto;\n}\n\n.financialChartTypePickerDropDownMenu {\n    right: 0;\n}\n\n.financialChartListItem {\n    cursor: pointer;\n    cursor: var(--financial-toolbar-dropdown-item-cursor, pointer);\n}\n\n.financialChartListItem:hover,\n.financialChartListItem:focus {\n    color: #4897AA;\n    color: var(--financial-toolbar-dropdown-item-hover-color, #4897AA);\n    background: transparent;\n    background: var(--financial-toolbar-dropdown-item-hover-background, transparent);\n}\n\n.financialChartListItem span {\n    position: relative;\n    /* TODO: figure out why we need z-index here */\n    z-index: -1;\n}\n\n.financialChartTypePickerDropDownMenu .financialChartListItem {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n}\n.financialChartTypePickerDropDownMenu .ui-icon {\n    margin-right: 5px;\n    margin-right: var(--financial-toolbar-icon-margin-right, 5px);\n}\n\n.financialChartIndicatorMenuDropDownButton,\n.financialChartTypePickerDropDownButton {\n    background-color: transparent;\n    background-color: var(--financial-toolbar-indicators-background-color, transparent);\n    border: none;\n    outline: none;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.financialChartIndicatorMenuDropDownMenuList {\n    font-weight: bold;\n}\n\n.financialChartIndicatorMenuDropDownMenu li.checked,\n.financialChartTypePickerDropDownMenu li.checked {\n    color: #4897AA;\n    color: var(--financial-toolbar-dropdown-item-check-color, #4897AA);\n    background: transparent;\n    background: var(--financial-toolbar-dropdown-item-check-background, transparent);\n}\n\n.financialChartIndicatorMenuDropDownMenu ul,\n.financialChartTypePickerDropDownMenu ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 8px;\n}\n\n.financialChartIndicatorMenuDropDownMenu ul ul,\n.financialChartTypePickerDropDownMenu ul ul {\n    padding-left: 15px;\n    padding-left: var(--financial-toolbar-dropdown-list-padding-left, 15px);\n    font-weight: normal;\n}\n\n.financialChartIndicatorMenuDropDownMenu ul li,\n.financialChartTypePickerDropDownMenu ul li {\n    padding-top: 4px;\n    padding-top: var(--financial-toolbar-dropdown-list-padding-top, 4px);\n    position: relative;\n}\n\n.financialChartIndicatorMenuDropDownMenu li.checked:before{\n    margin-left: -15px;\n    margin-left:  var(--financial-toolbar-dropdown-list-margin-left, -15px);\n    margin-right: 5px;\n    margin-right: var(--financial-toolbar-dropdown-list-margin-right, 5px);\n    content: \"\\2713\";\n    position: absolute;\n}\n\n.financialChartLegend {\n    grid-row: 2;\n    -ms-grid-row: 2;\n}\n\n.ui-ChartButtonWrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.financialChartTypePickerDropDownButton .ui-icon-triangle-1-s,\n.ui-ChartButtonWrapper .ui-icon-triangle-1-s {\n    font-size: 10px;\n    font-size: var(--financial-toolbar-icon-font-size, 10px);\n}\n\n.financialChartTypePickerDropDownButton {\n    background-color: transparent;\n    background-color: var(--financial-toolbar-chart-picker-background, transparent);\n    height: 100%;\n    padding: 0 10px;\n    padding: var(--financial-toolbar-chart-picker-padding, 0 10px);\n}\n\n.financialChartIndicatorMenuLabel {\n    margin: 0 5px;\n    margin: var(--financial-toolbar-indicators-label-margin, 0 5px);\n    color: inherit;\n    color: var(--financial-toolbar-indicators-label-normal-color, inherit);\n}\n\n/* Icon styles if no theme is included */\n.financialChartToolbar .ui-icon {\n    color: #888888;\n    color: var(--financial-toolbar-icon-color, #888888);\n    width: 16px;\n    width: var(--financial-toolbar-icon-width, 16px);\n    height: 16px;\n    height: var(--financial-toolbar-icon-height, 16px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-indent: -99999px;\n    overflow: hidden;\n    position: relative;\n}\n.financialChartToolbar .ui-icon:before {\n    display: block;\n    height: 1em;\n    left: 50%;\n    line-height: 1;\n    margin-left: -0.5em;\n    margin-top: -0.5em;\n    position: absolute;\n    text-indent: 0;\n    top: 50%;\n    width: 1em;\n}\n\n.ui-icon-IndicatorsIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%23777777%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-indicators-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%23777777%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartIndicatorMenuDropDownButton:hover .ui-icon-IndicatorsIcon:before,\n.financialChartIndicatorMenuDropDownButton:focus .ui-icon-IndicatorsIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%234897AA%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-indicators-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%234897AA%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartIndicatorMenuDropDownButton:hover .financialChartIndicatorMenuLabel,\n.financialChartIndicatorMenuDropDownButton:focus .financialChartIndicatorMenuLabel {\n    color: #4897AA;\n    color: var(--financial-toolbar-indicators-label-hover-color, #4897AA);\n}\n\n.ui-icon-toolbar-dd {\n    position: relative;\n    width: 16px;\n    width: var(--financial-toolbar-dropdown-icon-width, 16px);\n    height: 16px;\n    height: var(--financial-toolbar-dropdown-icon-height, 16px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.ui-icon-toolbar-dd:before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 5px 4px 0 4px;\n    border-color: #666 transparent transparent transparent;\n    border-color: var(--financial-toolbar-dropdown-icon-normal-color, #666) transparent transparent transparent;\n}\n\n.financialChartIndicatorMenuDropDownButton:hover .ui-icon-toolbar-dd:before,\n.financialChartIndicatorMenuDropDownButton:focus .ui-icon-toolbar-dd:before,\n.financialChartTypePickerDropDownButton:hover .ui-icon-toolbar-dd:before,\n.financialChartTypePickerDropDownButton:focus .ui-icon-toolbar-dd:before {\n    content: '';\n    border-color: #4897AA transparent transparent transparent;\n    border-color: var(--financial-toolbar-dropdown-icon-hover-color, #4897AA) transparent transparent transparent;\n}\n\n.financialChartListItem[data-value='Auto'] {\n    padding-bottom: 5px;\n    padding-bottom: var(--financial-toolbar-dropdown-border-bottom-padding, 5px);\n    border-bottom: 1px solid #ddd;\n    border-bottom: 1px solid var(--financial-toolbar-dropdown-border-bottom-color, #ddd);\n    margin-bottom: 3px;\n    margin-bottom: var(--financial-toolbar-dropdown-border-bottom-margin, 3px);\n}\n\n.financialChartTypePickerDropDownButton[data-value=\"Auto\"] .ui-icon-chartAuto:before,\n.financialChartListItem[data-value='Auto'] .ui-icon-changeable:before,\n.financialChartListItem[data-value='Auto'] .ui-icon-chartAuto:before,\n.financialChartTypePickerDropDownButton[data-value=\"Auto\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-auto-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Auto']:hover .ui-icon-chartAuto:before,\n.financialChartListItem[data-value='Auto']:focus .ui-icon-chartAuto:before,\n.financialChartTypePickerDropDownButton[data-value='Auto']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Auto']:focus .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-auto-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Bar'] .ui-icon-BarIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Bar\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-bar-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Bar']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Bar']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Bar\"]:hover .ui-icon-BarIcon:before,\n.financialChartListItem[data-value=\"Bar\"]:focus .ui-icon-BarIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-bar-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Line'] .ui-icon-LineIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Line\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-line-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Line']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Line']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Line\"]:hover .ui-icon-LineIcon:before,\n.financialChartListItem[data-value=\"Line\"]:focus .ui-icon-LineIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-line-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Candle'] .ui-icon-CandleIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Candle\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-candle-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Candle']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Candle']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Candle\"]:hover .ui-icon-CandleIcon:before,\n.financialChartListItem[data-value=\"Candle\"]:focus .ui-icon-CandleIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-candle-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Column'] .ui-icon-ColumnIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Column\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-column-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Column']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Column']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Column\"]:hover .ui-icon-ColumnIcon:before,\n.financialChartListItem[data-value=\"Column\"]:focus .ui-icon-ColumnIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-column-hover-icon,\n        url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
    return IgxFinancialChartDefaultTemplatesComponent;
}());
export { IgxFinancialChartDefaultTemplatesComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxFinancialChartDefaultTemplatesComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'igx-financial-chart-default-templates',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    template: "\n    <ng-template #financialChartRangeSelectorTemplate let-vm=\"vm\">\n        <div class='financialChartRangeSelector'>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorOneMonth' *ngIf=\"vm.oneMonthVisible\">\n\t\t    \t<input type='radio' value='1m' [checked]=\"vm.oneMonthChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_OneMonth}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorThreeMonths' *ngIf=\"vm.threeMonthsVisible\">\n\t\t    \t<input type='radio' value='3m' [checked]=\"vm.threeMonthsChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_ThreeMonths}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorSixMonths' *ngIf=\"vm.sixMonthsVisible\">\n\t\t    \t<input type='radio' value='6m' [checked]=\"vm.sixMonthsChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_SixMonths}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorYTD' *ngIf=\"vm.yearToDateVisible\">\n\t\t    \t<input type='radio' value='YTD' [checked]=\"vm.yearToDateChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_YearToDate}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorOneYear' *ngIf=\"vm.oneYearVisible\">\n\t\t    \t<input type='radio' value='1y' [checked]=\"vm.oneYearChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_OneYear}}</span>\n\t\t    </label>\n\t\t    <label class='financialChartRangeSelectorLabel rangeSelectorAll' *ngIf=\"vm.allVisible\">\n\t\t    \t<input type='radio' value='all' [checked]=\"vm.allChecked\" (change)=\"vm.changeSelection(asAny($event.target).value)\">\n\t\t    \t<span class='financialChartRangeSelectorLabelSpan'>{{vm.financialChart_RangeSelector_All}}</span>\n\t\t    </label>\n\t    </div>\n    </ng-template>\n\n    <ng-template #financialChartTypePickerTemplate let-vm=\"vm\">\n        <button class='financialChartTypePickerDropDownButton' (click)=\"vm.onButtonPressed()\" [attr.data-value]=\"vm.chartTypeString\">\n\t    \t<span class='ui-icon ui-icon-changeable'></span>\n\t    \t<span class='ui-icon-toolbar-dd'></span>\n\t    </button>\n\n\t    <div class='financialChartTypePickerDropDownMenu' [style.display]=\"vm.isOpen ? 'block' : 'none'\"\n            (click)=\"vm.handleDropDownClick($event)\">\n\t    \t<ul>\n\t    \t\t<li class='financialChartListItem' data-value='Auto'>\n\t    \t\t    <span class='ui-icon ui-icon-chartAuto'></span>\n\t    \t\t    <span>Auto</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Bar'>\n\t    \t\t\t<span class='ui-icon ui-icon-BarIcon'></span>\n\t    \t\t\t<span>Bar</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Line'>\n\t    \t\t\t<span class='ui-icon ui-icon-LineIcon'></span>\n\t    \t\t\t<span>Line</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Candle'>\n\t    \t\t\t<span class='ui-icon ui-icon-CandleIcon'></span>\n\t    \t\t\t<span>Candle</span>\n\t    \t\t</li>\n\t    \t\t<li class='financialChartListItem' data-value='Column'>\n\t    \t\t\t<span class='ui-icon ui-icon-ColumnIcon'></span>\n\t    \t\t\t<span>Column</span>\n\t    \t\t</li>\n\t    \t</ul>\n\t    </div>\n    </ng-template>\n\n    <ng-template #financialChartIndicatorMenuTemplate let-vm=\"vm\">\n        <button class='financialChartIndicatorMenuDropDownButton' (click)=\"vm.onButtonPressed()\">\n\t    \t<div class='ui-ChartButtonWrapper'>\n\t    \t\t<span class='ui-icon ui-icon-IndicatorsIcon'></span>\n\t    \t\t<span class='financialChartIndicatorMenuLabel'>{{vm.financialChart_IndicatorMenu_Header}}</span>\n\t    \t\t<span class='ui-icon-toolbar-dd'></span>\n\t    \t</div>\n        </button>\n\n\t    <div class='financialChartIndicatorMenuDropDownMenu' [style.display]=\"vm.isOpen ? 'block' : 'none'\" (click)=\"vm.handleDropDownClick($event)\">\n\t    \t<ul class='financialChartIndicatorMenuDropDownMenuList'>\n\t\t\t<li data-value='FinancialOverlayType'>\n\t\t\t\t<span>{{vm.financialChart_IndicatorMenu_OverlaysCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='BollingerBands'>{{vm.financialChart_IndicatorsMenu_Overlay_BollingerBands}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PriceChannel'>{{vm.financialChart_IndicatorsMenu_Overlay_PriceChannel}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t\t<li data-value='TrendLineType'>\n\t\t\t\t<span>{{vm.financialChart_IndicatorMenu_TrendlinesCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='LinearFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_LinearFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='QuadraticFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_QuadraticFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='CubicFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_CubicFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='QuarticFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_QuarticFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='QuinticFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_QuinticFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='LogarithmicFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_LogarithmicFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ExponentialFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_ExponentialFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PowerLawFit'>{{vm.financialChart_IndicatorsMenu_TrendLine_PowerLawFit}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='SimpleAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_SimpleAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ExponentialAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_ExponentialAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ModifiedAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_ModifiedAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='CumulativeAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_CumulativeAverage}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='WeightedAverage'>{{vm.financialChart_IndicatorsMenu_TrendLine_WeightedAverage}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t\t<li data-value='FinancialChartVolumeType'><span>{{vm.financialChart_IndicatorMenu_VolumeCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='Column'>{{vm.financialChart_IndicatorsMenu_Volume_Column}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='Line'>{{vm.financialChart_IndicatorsMenu_Volume_Line}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='Area'>{{vm.financialChart_IndicatorsMenu_Volume_Area}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t\t<li data-value='FinancialIndicatorType'><span>{{vm.financialChart_IndicatorMenu_IndicatorsCategoryHeader}}</span>\n\t\t\t\t<ul>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AbsoluteVolumeOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_AbsoluteVolumeOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AccumulationDistribution'>{{vm.financialChart_IndicatorsMenu_Indicator_AccumulationDistribution}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AverageDirectionalIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_AverageDirectionalIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='AverageTrueRange'>{{vm.financialChart_IndicatorsMenu_Indicator_AverageTrueRange}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='BollingerBandWidth'>{{vm.financialChart_IndicatorsMenu_Indicator_BollingerBandWidth}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ChaikinOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_ChaikinOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ChaikinVolatility'>{{vm.financialChart_IndicatorsMenu_Indicator_ChaikinVolatility}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='CommodityChannelIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_CommodityChannelIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='DetrendedPriceOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_DetrendedPriceOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='EaseOfMovement'>{{vm.financialChart_IndicatorsMenu_Indicator_EaseOfMovement}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='FastStochasticOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_FastStochasticOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='ForceIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_ForceIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='FullStochasticOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_FullStochasticOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MarketFacilitationIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_MarketFacilitationIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MassIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_MassIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MedianPrice'>{{vm.financialChart_IndicatorsMenu_Indicator_MedianPrice}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MoneyFlowIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_MoneyFlowIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='MovingAverageConvergenceDivergence'>{{vm.financialChart_IndicatorsMenu_Indicator_MovingAverageConvergenceDivergence}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='NegativeVolumeIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_NegativeVolumeIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='OnBalanceVolume'>{{vm.financialChart_IndicatorsMenu_Indicator_OnBalanceVolume}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PercentagePriceOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_PercentagePriceOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PercentageVolumeOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_PercentageVolumeOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PositiveVolumeIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_PositiveVolumeIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='PriceVolumeTrend'>{{vm.financialChart_IndicatorsMenu_Indicator_PriceVolumeTrend}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='RateOfChangeAndMomentum'>{{vm.financialChart_IndicatorsMenu_Indicator_RateOfChangeAndMomentum}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='RelativeStrengthIndex'>{{vm.financialChart_IndicatorsMenu_Indicator_RelativeStrengthIndex}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='SlowStochasticOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_SlowStochasticOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='StandardDeviation'>{{vm.financialChart_IndicatorsMenu_Indicator_StandardDeviation}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='StochRSI'>{{vm.financialChart_IndicatorsMenu_Indicator_StochRSI}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='TRIX'>{{vm.financialChart_IndicatorsMenu_Indicator_TRIX}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='TypicalPrice'>{{vm.financialChart_IndicatorsMenu_Indicator_TypicalPrice}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='UltimateOscillator'>{{vm.financialChart_IndicatorsMenu_Indicator_UltimateOscillator}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='WeightedClose'>{{vm.financialChart_IndicatorsMenu_Indicator_WeightedClose}}</li>\n\t\t\t\t\t<li class='financialChartListItem' data-value='WilliamsPercentR'>{{vm.financialChart_IndicatorsMenu_Indicator_WilliamsPercentR}}</li>\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</ul>\n\t    </div>\n    </ng-template>\n\n    <ng-template #financialChartToolbarTemplate let-vm=\"vm\">\n        <ng-template #defaultTemplate>\n            <div></div>\n        </ng-template>\n\n        <div class='financialChartToolbar'>\n            <div class='financialChartToolbar'>\n                <div class='financialChartIndicatorMenu' *ngIf='vm.isIndicatorMenuVisible'>\n                    <ng-container *ngTemplateOutlet=\"vm.financialChartIndicatorMenu.template ? vm.financialChartIndicatorMenu.template : defaultTemplate; context: vm.financialChartIndicatorMenu\">\n                    </ng-container>\n                </div>\n                <div class='financialChartRangeSelector'>\n                    <ng-container *ngTemplateOutlet=\"vm.financialChartRangeSelector.template ? vm.financialChartRangeSelector.template : defaultTemplate; context: vm.financialChartRangeSelector\">\n                    </ng-container>\n                </div>\n                <div class='financialChartTypePicker'>\n                    <ng-container *ngTemplateOutlet=\"vm.financialChartTypePicker.template ? vm.financialChartTypePicker.template : defaultTemplate; context: vm.financialChartTypePicker\">\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n  ",
                    styles: ["\n.ui-financialchart-container {\n    font-family: \"Segoe UI\",Arial,sans-serif;\n    font-family: var(--financial-toolbar-font-family, \"Segoe UI\",Arial,sans-serif);\n    font-size: 12px;\n    font-size: var(--financial-toolbar-font-size, 12px);\n    border-width: 0;\n    -webkit-tap-highlight-color: rgba(0,0,0,0);\n    -webkit-tap-highlight-color: var(--financial-highlight-color, rgba(0,0,0,0));\n}\n\n.ui-financialchart-mainChart {\n    margin-left: 15px;\n    margin-left: var(--financial-pane-margin-left, 15px);\n}\n\n.ui-financialchart-volumeChart {\n    margin-left: 15px;\n    margin-left: var(--financial-pane-margin-left, 15px);\n}\n\n.financialChartMainGrid {\n    height: 100%;\n    width: 100%;\n    display: grid;\n    display: -ms-grid;\n    -ms-grid-columns: 100%;\n}\n\n.financialChartPrice {\n    grid-row: 3;\n    -ms-grid-row: 3;\n    margin-top: 10px;\n    margin-top: var(--financial-pane-margin-top, 10px);\n}\n.financialChartPrice, .financialChartPrice > div {\n    min-height: 100px;\n}\n.financialChartIndicators {\n    grid-row: 4;\n    -ms-grid-row: 4;\n}\n.financialChartVolume {\n    grid-row: 5;\n    -ms-grid-row: 5;\n}\n.financialChartZoomSlider {\n    grid-row: 6;\n    -ms-grid-row: 6;\n}\n\n/*\n/////////////////////\n*/\n/* Toolbar styles */\n/*\n/////////////////////\n*/\n\n.financialChartToolbar {\n    display: grid;\n    display: -ms-grid;\n    grid-row: 1;\n    -ms-grid-rows: 100%;\n    -ms-grid-row: 1;\n    -ms-grid-columns: 100%;\n    font-family: \"Verdana\",Arial,sans-serif;\n    font-family: var(--financial-toolbar-font-family, \"Verdana\",Arial,sans-serif);\n    font-size: 12px;\n    font-size: var(--financial-toolbar-font-size, 12px);\n}\n\n/* scrollbar styles */\n.financialChartToolbar ::-webkit-scrollbar\n{\n    width: 14px;\n    width: var(--financial-toolbar-scrollbar-width, 14px);\n    background-color: #eee;\n    background-color: var(--financial-toolbar-scrollbar-background, #eee);\n}\n.financialChartToolbar ::-webkit-scrollbar-track\n{\n    border-radius: 1px;\n    border-radius: var(--financial-toolbar-scrollbar-track-radius, 1px);\n    background-color: #eee;\n    background-color: var(--financial-toolbar-scrollbar-track-background, #eee);\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n    -webkit-box-shadow: inset 0 0 var(--financial-toolbar-scrollbar-track-shadow-radius, 6px) var(--financial-toolbar-scrollbar-track-shadow-color, rgba(0,0,0,0.3));\n}\n.financialChartToolbar ::-webkit-scrollbar-thumb\n{\n    border-radius: 1px;\n    border-radius: var(--financial-toolbar-scrollbar-thumb-radius, 1px);\n    background-color: #838383;\n    background-color: var(--financial-toolbar-scrollbar-thumb-background, #838383);\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);\n    -webkit-box-shadow: inset 0 0 var(--financial-toolbar-scrollbar-thumb-shadow-radius, 6px) var(--financial-toolbar-scrollbar-thumb-shadow-color, rgba(0,0,0,0.3));\n}\n\n.financialChartToolbar .financialChartToolbar {\n    display: flex;\n    display: -ms-flexbox;\n    align-items: center;\n    border: 1px solid #dadada;\n    border: var(--financial-toolbar-border-thickness, 1px) solid var(--financial-toolbar-border-color, #dadada);\n    color: black;\n    color: var(--financial-toolbar-text-color, black);\n    max-height: 45px;\n    max-height: var(--financial-toolbar-max-height, 45px);\n    background: #eeeeee;\n    background: var(--financial-toolbar-background, #eeeeee);\n}\n\n.financialChartToolbar,\n.financialChartToolbar button {\n    font: 400 13px \"Segoe UI\", Arial, sans-serif!important;\n    font: var(--financial-toolbar-range-button-font, 400 13px \"Segoe UI\", Arial, sans-serif!important);\n}\n\n.financialChartRangeSelector {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-transform: uppercase;\n    height: 100%;\n}\n\n.financialChartRangeSelector input {\n    display: none;\n}\n\n.financialChartRangeSelectorLabel {\n    cursor: pointer;\n    height: 100%;\n}\n.financialChartRangeSelectorLabel:hover .financialChartRangeSelectorLabelSpan {\n    color: #4897AA;\n    color: var(--financial-toolbar-range-button-hover-color, #4897AA);\n    background: transparent;\n    background: var(--financial-toolbar-range-button-hover-background, transparent);\n}\n\n.financialChartRangeSelectorLabel input:checked + span {\n    color: #444444;\n    color: var(--financial-toolbar-range-button-check-color, #444444);\n    background-color: #dadada;\n    background-color: var(--financial-toolbar-range-button-check-background, #dadada);\n}\n\n.financialChartRangeSelectorLabelSpan {\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 10px;\n    padding: var(--financial-toolbar-range-button-padding, 10px);\n    box-sizing: border-box;\n}\n\n.financialChartRangeSelectorLastOption {\n    border: none;\n    padding-right: 0;\n    padding-right: var(--financial-toolbar-range-button-padding-right, 0px);\n}\n\n.financialChartIndicatorMenu,\n.financialChartTypePicker {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.financialChartTypePicker {\n    margin-left: auto;\n    height: 100%;\n    border-left: 1px solid #dadada;\n    border-left: var(--financial-toolbar-border-thickness, 1px) solid\n                 var(--financial-toolbar-border-color, #dadada);\n}\n\n.financialChartIndicatorMenu {\n    height: 100%;\n    padding:0 10px;\n    border-right: 1px solid #dadada;\n    border-right: var(--financial-toolbar-border-thickness, 1px) solid\n                  var(--financial-toolbar-border-color, #dadada);\n}\n\n.financialChartIndicatorMenuDropDownMenu,\n.financialChartTypePickerDropDownMenu {\n    background: #fff;\n    background: var(--financial-toolbar-dropdown-background-color, #fff);\n    color: black;\n    color: var(--financial-toolbar-dropdown-text-color, black);\n    display: flex;\n    flex-direction: column;\n    z-index: 1;\n    position: absolute;\n    top: calc(100% + 1px);\n    top: calc(100% + var(--financial-toolbar-dropdown-top-offset, 1px));\n    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\n    box-shadow: var(--financial-toolbar-dropdown-shadow,  0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22));\n    white-space: nowrap;\n    font-family: \"Verdana\",Arial,sans-serif;\n    font-family: var(--financial-toolbar-dropdown-font-family, \"Verdana\",Arial,sans-serif);\n    font-size: 12px;\n    font-size: var(--financial-toolbar-dropdown-font-size, 12px);\n}\n\n.financialChartIndicatorMenuDropDownMenu {\n    left: 0;\n    min-width: 100px;\n    min-width: var(--financial-toolbar-dropdown-min-width, 100px);\n    height: 300px;\n    height: var(--financial-toolbar-dropdown-height, 300px);\n    overflow: auto;\n}\n\n.financialChartTypePickerDropDownMenu {\n    right: 0;\n}\n\n.financialChartListItem {\n    cursor: pointer;\n    cursor: var(--financial-toolbar-dropdown-item-cursor, pointer);\n}\n\n.financialChartListItem:hover,\n.financialChartListItem:focus {\n    color: #4897AA;\n    color: var(--financial-toolbar-dropdown-item-hover-color, #4897AA);\n    background: transparent;\n    background: var(--financial-toolbar-dropdown-item-hover-background, transparent);\n}\n\n.financialChartListItem span {\n    position: relative;\n    /* TODO: figure out why we need z-index here */\n    z-index: -1;\n}\n\n.financialChartTypePickerDropDownMenu .financialChartListItem {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n}\n.financialChartTypePickerDropDownMenu .ui-icon {\n    margin-right: 5px;\n    margin-right: var(--financial-toolbar-icon-margin-right, 5px);\n}\n\n.financialChartIndicatorMenuDropDownButton,\n.financialChartTypePickerDropDownButton {\n    background-color: transparent;\n    background-color: var(--financial-toolbar-indicators-background-color, transparent);\n    border: none;\n    outline: none;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.financialChartIndicatorMenuDropDownMenuList {\n    font-weight: bold;\n}\n\n.financialChartIndicatorMenuDropDownMenu li.checked,\n.financialChartTypePickerDropDownMenu li.checked {\n    color: #4897AA;\n    color: var(--financial-toolbar-dropdown-item-check-color, #4897AA);\n    background: transparent;\n    background: var(--financial-toolbar-dropdown-item-check-background, transparent);\n}\n\n.financialChartIndicatorMenuDropDownMenu ul,\n.financialChartTypePickerDropDownMenu ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 8px;\n}\n\n.financialChartIndicatorMenuDropDownMenu ul ul,\n.financialChartTypePickerDropDownMenu ul ul {\n    padding-left: 15px;\n    padding-left: var(--financial-toolbar-dropdown-list-padding-left, 15px);\n    font-weight: normal;\n}\n\n.financialChartIndicatorMenuDropDownMenu ul li,\n.financialChartTypePickerDropDownMenu ul li {\n    padding-top: 4px;\n    padding-top: var(--financial-toolbar-dropdown-list-padding-top, 4px);\n    position: relative;\n}\n\n.financialChartIndicatorMenuDropDownMenu li.checked:before{\n    margin-left: -15px;\n    margin-left:  var(--financial-toolbar-dropdown-list-margin-left, -15px);\n    margin-right: 5px;\n    margin-right: var(--financial-toolbar-dropdown-list-margin-right, 5px);\n    content: \"\\2713\";\n    position: absolute;\n}\n\n.financialChartLegend {\n    grid-row: 2;\n    -ms-grid-row: 2;\n}\n\n.ui-ChartButtonWrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.financialChartTypePickerDropDownButton .ui-icon-triangle-1-s,\n.ui-ChartButtonWrapper .ui-icon-triangle-1-s {\n    font-size: 10px;\n    font-size: var(--financial-toolbar-icon-font-size, 10px);\n}\n\n.financialChartTypePickerDropDownButton {\n    background-color: transparent;\n    background-color: var(--financial-toolbar-chart-picker-background, transparent);\n    height: 100%;\n    padding: 0 10px;\n    padding: var(--financial-toolbar-chart-picker-padding, 0 10px);\n}\n\n.financialChartIndicatorMenuLabel {\n    margin: 0 5px;\n    margin: var(--financial-toolbar-indicators-label-margin, 0 5px);\n    color: inherit;\n    color: var(--financial-toolbar-indicators-label-normal-color, inherit);\n}\n\n/* Icon styles if no theme is included */\n.financialChartToolbar .ui-icon {\n    color: #888888;\n    color: var(--financial-toolbar-icon-color, #888888);\n    width: 16px;\n    width: var(--financial-toolbar-icon-width, 16px);\n    height: 16px;\n    height: var(--financial-toolbar-icon-height, 16px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-indent: -99999px;\n    overflow: hidden;\n    position: relative;\n}\n.financialChartToolbar .ui-icon:before {\n    display: block;\n    height: 1em;\n    left: 50%;\n    line-height: 1;\n    margin-left: -0.5em;\n    margin-top: -0.5em;\n    position: absolute;\n    text-indent: 0;\n    top: 50%;\n    width: 1em;\n}\n\n.ui-icon-IndicatorsIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%23777777%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-indicators-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%23777777%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartIndicatorMenuDropDownButton:hover .ui-icon-IndicatorsIcon:before,\n.financialChartIndicatorMenuDropDownButton:focus .ui-icon-IndicatorsIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%234897AA%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-indicators-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2055%2055%27%20fill%3D%27%234897AA%27%3E%3Crect%20x%3D%2746.32%27%20y%3D%2716.34%27%20width%3D%275.97%27%20height%3D%2738.47%27%2F%3E%3Cpolygon%20points%3D%2736.73%2054.8%2042.7%2054.8%2042.7%2020.71%2040.34%2020.71%2036.73%2023.92%2036.73%2054.8%27%2F%3E%3Cpolygon%20points%3D%2727.14%2030.07%2027.14%2054.8%2033.11%2054.8%2033.11%2027.15%2028.46%2031.28%2027.14%2030.07%27%2F%3E%3Cpolygon%20points%3D%2730.74%2020.71%2029.62%2020.71%2030.12%2021.22%2030.74%2020.71%27%2F%3E%3Cpolygon%20points%3D%2717.55%2026.49%2017.55%2054.8%2023.52%2054.8%2023.52%2026.76%2020.26%2023.78%2017.55%2026.49%27%2F%3E%3Cpolygon%20points%3D%277.96%2024.97%207.96%2026.49%209.48%2024.97%207.96%2024.97%27%2F%3E%3Cpolygon%20points%3D%277.96%2054.8%2013.93%2054.8%2013.93%2030.11%207.96%2036.08%207.96%2054.8%27%2F%3E%3Cpolygon%20points%3D%2737.29%200.2%2043.23%206.14%2030.12%2016.96%2021.68%208.51%202.5%2027.69%207.29%2032.48%2020.26%2019.52%2028.46%2027.02%2047.33%2010.23%2052.5%2015.4%2052.5%2014.57%2052.5%200.2%2037.29%200.2%27%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartIndicatorMenuDropDownButton:hover .financialChartIndicatorMenuLabel,\n.financialChartIndicatorMenuDropDownButton:focus .financialChartIndicatorMenuLabel {\n    color: #4897AA;\n    color: var(--financial-toolbar-indicators-label-hover-color, #4897AA);\n}\n\n.ui-icon-toolbar-dd {\n    position: relative;\n    width: 16px;\n    width: var(--financial-toolbar-dropdown-icon-width, 16px);\n    height: 16px;\n    height: var(--financial-toolbar-dropdown-icon-height, 16px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.ui-icon-toolbar-dd:before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 5px 4px 0 4px;\n    border-color: #666 transparent transparent transparent;\n    border-color: var(--financial-toolbar-dropdown-icon-normal-color, #666) transparent transparent transparent;\n}\n\n.financialChartIndicatorMenuDropDownButton:hover .ui-icon-toolbar-dd:before,\n.financialChartIndicatorMenuDropDownButton:focus .ui-icon-toolbar-dd:before,\n.financialChartTypePickerDropDownButton:hover .ui-icon-toolbar-dd:before,\n.financialChartTypePickerDropDownButton:focus .ui-icon-toolbar-dd:before {\n    content: '';\n    border-color: #4897AA transparent transparent transparent;\n    border-color: var(--financial-toolbar-dropdown-icon-hover-color, #4897AA) transparent transparent transparent;\n}\n\n.financialChartListItem[data-value='Auto'] {\n    padding-bottom: 5px;\n    padding-bottom: var(--financial-toolbar-dropdown-border-bottom-padding, 5px);\n    border-bottom: 1px solid #ddd;\n    border-bottom: 1px solid var(--financial-toolbar-dropdown-border-bottom-color, #ddd);\n    margin-bottom: 3px;\n    margin-bottom: var(--financial-toolbar-dropdown-border-bottom-margin, 3px);\n}\n\n.financialChartTypePickerDropDownButton[data-value=\"Auto\"] .ui-icon-chartAuto:before,\n.financialChartListItem[data-value='Auto'] .ui-icon-changeable:before,\n.financialChartListItem[data-value='Auto'] .ui-icon-chartAuto:before,\n.financialChartTypePickerDropDownButton[data-value=\"Auto\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-auto-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Auto']:hover .ui-icon-chartAuto:before,\n.financialChartListItem[data-value='Auto']:focus .ui-icon-chartAuto:before,\n.financialChartTypePickerDropDownButton[data-value='Auto']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Auto']:focus .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-auto-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Bar'] .ui-icon-BarIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Bar\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-bar-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Bar']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Bar']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Bar\"]:hover .ui-icon-BarIcon:before,\n.financialChartListItem[data-value=\"Bar\"]:focus .ui-icon-BarIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-bar-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%203%202%20L%203%204%20L%203%206%20L%203%207%20L%200%207%20L%200%209%20L%203%209%20L%203%2012%20L%205%2012%20L%205%209%20L%205%207%20L%205%206%20L%208%206%20L%208%204%20L%205%204%20L%205%202%20L%203%202%20ZM%2010%200%20L%2010%203%20L%2010%205%20L%2010%2010%20L%207%2010%20L%207%2012%20L%2010%2012%20L%2010%2015%20L%2012%2015%20L%2012%2012%20L%2012%2010%20L%2012%205%20L%2015%205%20L%2015%203%20L%2012%203%20L%2012%200%20L%2010%200%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Line'] .ui-icon-LineIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Line\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-line-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Line']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Line']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Line\"]:hover .ui-icon-LineIcon:before,\n.financialChartListItem[data-value=\"Line\"]:focus .ui-icon-LineIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-line-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2011.3333%20L%201.6842%2013%20L%206.5%208.8125%20L%209.5313%2011.3438%20L%2016%205.5%20L%2014%203.5%20L%209.5313%208.1875%20L%206.5%205.625%20L%200%2011.3333%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Candle'] .ui-icon-CandleIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Candle\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-candle-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Candle']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Candle']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Candle\"]:hover .ui-icon-CandleIcon:before,\n.financialChartListItem[data-value=\"Candle\"]:focus .ui-icon-CandleIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-candle-hover-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20%3E%3Cpath%20d%3D%27M%208%203%20L%208%2013%20L%2010%2013%20L%2010%2016%20L%2012%2016%20L%2012%2013%20L%2014%2013%20L%2014%203%20L%2012%203%20L%2012%200%20L%2010%200%20L%2010%203%20L%208%203%20ZM%200%205%20L%200%2012%20L%202%2012%20L%202%2015%20L%204%2015%20L%204%2012%20L%206%2012%20L%206%205%20L%204%205%20L%204%202%20L%202%202%20L%202%205%20L%200%205%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n\n.financialChartListItem[data-value='Column'] .ui-icon-ColumnIcon:before,\n.financialChartTypePickerDropDownButton[data-value=\"Column\"] .ui-icon-changeable:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-column-normal-icon,\n             url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%23777777%27%20%2F%3E%3C%2Fsvg%3E\");\n    );\n}\n\n.financialChartTypePickerDropDownButton[data-value='Column']:hover .ui-icon-changeable:before,\n.financialChartTypePickerDropDownButton[data-value='Column']:focus .ui-icon-changeable:before,\n.financialChartListItem[data-value=\"Column\"]:hover .ui-icon-ColumnIcon:before,\n.financialChartListItem[data-value=\"Column\"]:focus .ui-icon-ColumnIcon:before {\n    content: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\");\n    content: var(--financial-toolbar-chart-column-hover-icon,\n        url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M%200%2016%20L%203%2016%20L%203%2011%20L%200%2011%20L%200%2016%20ZM%2011%2016%20L%2011%202%20L%208%202%20L%208%2016%20L%2011%2016%20ZM%2015%2016%20L%2015%204%20L%2012%204%20L%2012%2016%20L%2015%2016%20ZM%207%2016%20L%207%206%20L%204%206%20L%204%2016%20L%207%2016%20Z%27%20fill%3D%27%234897AA%27%20%2F%3E%3C%2Fsvg%3E\")\n    );\n}\n"]
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { financialChartRangeSelectorTemplate: [{
                type: ViewChild,
                args: ["financialChartRangeSelectorTemplate", { static: true }]
            }], financialChartTypePickerTemplate: [{
                type: ViewChild,
                args: ["financialChartTypePickerTemplate", { static: true }]
            }], financialChartIndicatorMenuTemplate: [{
                type: ViewChild,
                args: ["financialChartIndicatorMenuTemplate", { static: true }]
            }], financialChartToolbarTemplate: [{
                type: ViewChild,
                args: ["financialChartToolbarTemplate", { static: true }]
            }], onContentReady: [{
                type: Output
            }] } });