/*
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 * as React from 'react';
import { TypeRegistrar } from "igniteui-react-core/ES2015/type";
let requiredStyle = `
.financialChartToolbar {
    font-family: "Verdana",Arial,sans-serif;
    font-family: var(--toolbar-font-family, "Verdana",Arial,sans-serif);
    font-size: 12px;
    font-size: var(--toolbar-font-size, 12px);
    border-width: 0px;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.financialChartToolbar {
	display: grid;
	display: -ms-grid;
	grid-row: 1;
	-ms-grid-rows: 100%;
	-ms-grid-row: 1;
	-ms-grid-columns: 100%;
}
.financialChartToolbar .financialChartToolbar {
	display: flex;
	display: -ms-flexbox;
	align-items: center;
    justify-content: flex-start;
	flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
    background: #eee;
    border: 1px solid #ccc;
}
.financialChartToolbar, .financialChartToolbar button {
	font:400 13px "Segoe UI", Arial, sans-serif!important;
}
/* scrollbar styles */
.financialChartToolbar div::-webkit-scrollbar
{
	width: 14px;
    width: var(--scrollbar-width, 14px);
	background-color: #eee;
    background-color: var(--scrollbar-background, #eee);
}
.financialChartToolbar div::-webkit-scrollbar-track
{
	border-radius: 1px;
    border-radius: var(--scrollbar-track-radius, 1px);
	background-color: #eee;
    background-color: var(--scrollbar-track-background, #eee);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.financialChartToolbar div::-webkit-scrollbar-thumb
{
	border-radius: 1px;
    border-radius: var(--scrollbar-thumb-radius, 1px);
	background-color: #838383;
    background-color: var(--scrollbar-thumb-background, #838383);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}

.financialChartRangeSelector {
	text-align: center;
	text-transform: uppercase;
}
.financialChartRangeSelector input {
	display: none;
}
.financialChartRangeSelector label {
	border-right: 1px solid #758696;
	padding: 0 10px;
	padding:0!important;
	border:none!important;
	background-color:#eee;
}
.financialChartRangeSelectorLastOption {
	border: none !important;
	padding-right: 0;
}
.financialChartRangeSelector label:hover {
	color: #0090ff;
    color: var(--toolbar-checked-foreground, #0090ff);
    cursor: pointer;
}
.financialChartRangeSelector input:checked + span {
	color: #0090ff;
    color: var(--toolbar-checked-foreground, #0090ff);
	background-color: #d5d5d5;
}
.financialChartRangeSelector label span {
	padding:2px 8px 4px;
}
.financialChartTypePicker {
	position: relative; 
	display: inline-block;
	margin-left: auto;
	margin-right: 15px;
}
.financialChartIndicatorMenu {
    border-right: solid 1px;
}
.financialChartIndicatorMenu, .financialChartTypePicker {
	position: relative; 
	display: inline-block;
}
.financialChartIndicatorMenuDropDownMenu {
	height: 300px;
	overflow: auto;
}
.financialChartIndicatorMenuDropDownMenu, .financialChartTypePickerDropDownMenu {
	background-color: white;
	position: relative; 
	display: inline-block;
	z-index: 1;
	position: absolute!important;
	top: 30px;
	left:0;
	-webkit-box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.2);
	box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.2);
}
.financialChartTypePickerDropDownButton {
	height: 25px;
	width: 30px;
}
.financialChartIndicatorMenuDropDownButton, .financialChartTypePickerDropDownButton {
	background-color:transparent;
	border:none;
	outline:none;
	cursor:pointer;
	display: flex;
}
.financialChartIndicatorMenuDropDownButton:after {
	top: calc(0.5em + 3px);
	margin-left: 5px;
}
.financialChartTypePickerDropDownButton:after {
	top: 5px;
	margin-left: 20px;
}
.financialChartIndicatorMenuDropDownButton:after, .financialChartTypePickerDropDownButton:after {
	width: 0; 
	height: 0; 
	border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: #777 transparent transparent transparent;
	content:"";
	position:relative;
	flex: 0;
}
.financialChartIndicatorMenu {
	background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:%23777;}%3C/style%3E%3C/defs%3E%3Ctitle%3EArtboard 2%3C/title%3E%3Crect class='cls-1' x='46.32' y='16.34' width='5.97' height='38.47'/%3E%3Cpolygon class='cls-1' points='36.73 54.8 42.7 54.8 42.7 20.71 40.34 20.71 36.73 23.92 36.73 54.8'/%3E%3Cpolygon class='cls-1' points='27.14 30.07 27.14 54.8 33.11 54.8 33.11 27.15 28.46 31.28 27.14 30.07'/%3E%3Cpolygon class='cls-1' points='30.74 20.71 29.62 20.71 30.12 21.22 30.74 20.71'/%3E%3Cpolygon class='cls-1' points='17.55 26.49 17.55 54.8 23.52 54.8 23.52 26.76 20.26 23.78 17.55 26.49'/%3E%3Cpolygon class='cls-1' points='7.96 24.97 7.96 26.49 9.48 24.97 7.96 24.97'/%3E%3Cpolygon class='cls-1' points='7.96 54.8 13.93 54.8 13.93 30.11 7.96 36.08 7.96 54.8'/%3E%3Cpolygon class='cls-1' points='37.29 0.2 43.23 6.14 30.12 16.96 21.68 8.51 2.5 27.69 7.29 32.48 20.26 19.52 28.46 27.02 47.33 10.23 52.5 15.4 52.5 14.57 52.5 0.2 37.29 0.2'/%3E%3C/svg%3E") no-repeat 0 0;
	padding-left:18px;
}
.financialChartIndicatorMenu:hover {
	background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:%230090ff;}.cls-2{fill:%23777;}%3C/style%3E%3C/defs%3E%3Ctitle%3EArtboard 2%3C/title%3E%3Crect class='cls-1' x='46.32' y='16.34' width='5.97' height='38.47'/%3E%3Cpolygon class='cls-1' points='36.73 54.8 42.7 54.8 42.7 20.71 40.34 20.71 36.73 23.92 36.73 54.8'/%3E%3Cpolygon class='cls-1' points='27.14 30.07 27.14 54.8 33.11 54.8 33.11 27.15 28.46 31.28 27.14 30.07'/%3E%3Cpolygon class='cls-2' points='30.74 20.71 29.62 20.71 30.12 21.22 30.74 20.71'/%3E%3Cpolygon class='cls-1' points='17.55 26.49 17.55 54.8 23.52 54.8 23.52 26.76 20.26 23.78 17.55 26.49'/%3E%3Cpolygon class='cls-2' points='7.96 24.97 7.96 26.49 9.48 24.97 7.96 24.97'/%3E%3Cpolygon class='cls-1' points='7.96 54.8 13.93 54.8 13.93 30.11 7.96 36.08 7.96 54.8'/%3E%3Cpolygon class='cls-1' points='37.29 0.2 43.23 6.14 30.12 16.96 21.68 8.51 2.5 27.69 7.29 32.48 20.26 19.52 28.46 27.02 47.33 10.23 52.5 15.4 52.5 14.57 52.5 0.2 37.29 0.2'/%3E%3C/svg%3E") no-repeat 0 0;
}

.financialChartIndicatorMenu:hover, .financialChartTypePicker:hover {
	cursor:pointer;
    color: black;
    color: var(--toolbar-hover-foreground, black);
}
.financialChartIndicatorMenu:hover button, .financialChartTypePicker:hover button {
	color: #0090ff;
    color: var(--toolbar-hover-foreground, #0090ff);
}
.financialChartIndicatorMenu:hover .financialChartIndicatorMenuDropDownButton:after, .financialChartTypePicker:hover .financialChartTypePickerDropDownButton:after {
	border-color: #0090ff transparent transparent transparent;
}

.financialChartIndicatorMenuDropDownMenu ul {
	font-weight: bold;
}

.financialChartIndicatorMenuDropDownMenu ul, .financialChartTypePickerDropDownMenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.financialChartIndicatorMenuDropDownMenu li > ul, .financialChartTypePickerDropDownMenu li > ul {
	padding-left: 15px;
	font-weight: normal;
}
.financialChartIndicatorMenuDropDownMenu li.checked:before, .financialChartTypePickerDropDownMenu li.checked:before {
	margin-left: -15px;
	margin-right: 5px;
	content: "\\2713"
}
.financialChartTypePickerDropDownMenu li {
	padding-left: 1.5em;
}
.financialChartTypePickerDropDownMenu li[data-value="Bar"],[data-value="Auto"], .financialChartTypePickerDropDownButton {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 3 2 L 3 4 L 3 6 L 3 7 L 0 7 L 0 9 L 3 9 L 3 12 L 5 12 L 5 9 L 5 7 L 5 6 L 8 6 L 8 4 L 5 4 L 5 2 L 3 2 ZM 10 0 L 10 3 L 10 5 L 10 10 L 7 10 L 7 12 L 10 12 L 10 15 L 12 15 L 12 12 L 12 10 L 12 5 L 15 5 L 15 3 L 12 3 L 12 0 L 10 0 Z' fill='#777777' /%3E%3C/svg%3E") no-repeat 0 0;
}
.financialChartTypePickerDropDownButton:hover {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 3 2 L 3 4 L 3 6 L 3 7 L 0 7 L 0 9 L 3 9 L 3 12 L 5 12 L 5 9 L 5 7 L 5 6 L 8 6 L 8 4 L 5 4 L 5 2 L 3 2 ZM 10 0 L 10 3 L 10 5 L 10 10 L 7 10 L 7 12 L 10 12 L 10 15 L 12 15 L 12 12 L 12 10 L 12 5 L 15 5 L 15 3 L 12 3 L 12 0 L 10 0 Z' fill='#0090ff' /%3E%3C/svg%3E") no-repeat 0 0;
}
.financialChartTypePickerDropDownMenu li[data-value="Line"], .financialChartTypePickerDropDownButton[data-value="Line"] {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 0 11.3333 L 1.6842 13 L 6.5 8.8125 L 9.5313 11.3438 L 16 5.5 L 14 3.5 L 9.5313 8.1875 L 6.5 5.625 L 0 11.3333 Z' fill='#777777' /%3E%3C/svg%3E") no-repeat 0 0;
}
.financialChartTypePickerDropDownButton[data-value="Line"]:hover {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 0 11.3333 L 1.6842 13 L 6.5 8.8125 L 9.5313 11.3438 L 16 5.5 L 14 3.5 L 9.5313 8.1875 L 6.5 5.625 L 0 11.3333 Z' fill='#0090ff' /%3E%3C/svg%3E") no-repeat 0 0;
}
.financialChartTypePickerDropDownMenu li[data-value="Candle"], .financialChartTypePickerDropDownButton[data-value="Candle"] {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 8 3 L 8 13 L 10 13 L 10 16 L 12 16 L 12 13 L 14 13 L 14 3 L 12 3 L 12 0 L 10 0 L 10 3 L 8 3 ZM 0 5 L 0 12 L 2 12 L 2 15 L 4 15 L 4 12 L 6 12 L 6 5 L 4 5 L 4 2 L 2 2 L 2 5 L 0 5 Z' fill='#777777' /%3E%3C/svg%3E") no-repeat 0 0;
}
.financialChartTypePickerDropDownButton[data-value="Candle"]:hover {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 8 3 L 8 13 L 10 13 L 10 16 L 12 16 L 12 13 L 14 13 L 14 3 L 12 3 L 12 0 L 10 0 L 10 3 L 8 3 ZM 0 5 L 0 12 L 2 12 L 2 15 L 4 15 L 4 12 L 6 12 L 6 5 L 4 5 L 4 2 L 2 2 L 2 5 L 0 5 Z' fill='#0090ff' /%3E%3C/svg%3E") no-repeat 0 0;
}
.financialChartTypePickerDropDownMenu li[data-value="Column"], .financialChartTypePickerDropDownButton[data-value="Column"] {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 0 16 L 3 16 L 3 11 L 0 11 L 0 16 ZM 11 16 L 11 2 L 8 2 L 8 16 L 11 16 ZM 15 16 L 15 4 L 12 4 L 12 16 L 15 16 ZM 7 16 L 7 6 L 4 6 L 4 16 L 7 16 Z' fill='#777777' /%3E%3C/svg%3E") no-repeat 0 0;
}
.financialChartTypePickerDropDownButton[data-value="Column"]:hover {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M 0 16 L 3 16 L 3 11 L 0 11 L 0 16 ZM 11 16 L 11 2 L 8 2 L 8 16 L 11 16 ZM 15 16 L 15 4 L 12 4 L 12 16 L 15 16 ZM 7 16 L 7 6 L 4 6 L 4 16 L 7 16 Z' fill='#0090ff' /%3E%3C/svg%3E") no-repeat 0 0;
}
`;
function ensureCss() {
    if (!document) {
        return;
    }
    for (let i = 0; i < document.head.children.length; i++) {
        let child = document.head.children[i];
        if (child.tagName == "link" && child.hasAttribute("data-ig-financial-default-templates-style")) {
            return;
        }
    }
    let link = document.createElement("link");
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    link.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(requiredStyle));
    link.setAttribute('data-ig-financial-default-templates-style', 'true');
    document.head.appendChild(link);
}
const RangeSelectorTemplate = (props) => {
    if (!props.dataContext || !props.dataContext.vm) {
        return null;
    }
    let onChange = (e) => {
        props.dataContext.vm.changeSelection.call(props.dataContext.vm, e.target.value);
    };
    return (React.createElement("div", { className: 'financialChartRangeSelector' },
        React.createElement("label", { className: 'rangeSelectorOneMonth' },
            React.createElement("input", { type: 'radio', value: '1m', checked: props.dataContext.vm.oneMonthChecked, onChange: onChange }),
            React.createElement("span", null, "1m")),
        React.createElement("label", { className: 'rangeSelectorThreeMonths' },
            React.createElement("input", { type: 'radio', value: '3m', checked: props.dataContext.vm.threeMonthsChecked, onChange: onChange }),
            React.createElement("span", null, "3m")),
        React.createElement("label", { className: 'rangeSelectorSixMonths' },
            React.createElement("input", { type: 'radio', value: '6m', checked: props.dataContext.vm.sixMonthsChecked, onChange: onChange }),
            React.createElement("span", null, "6m")),
        React.createElement("label", { className: 'rangeSelectorYTD' },
            React.createElement("input", { type: 'radio', value: 'YTD', checked: props.dataContext.vm.yearToDateChecked, onChange: onChange }),
            React.createElement("span", null, "YTD")),
        React.createElement("label", { className: 'rangeSelectorOneYear' },
            React.createElement("input", { type: 'radio', value: '1y', checked: props.dataContext.vm.oneYearChecked, onChange: onChange }),
            React.createElement("span", null, "1y")),
        React.createElement("label", { className: 'rangeSelectorAll' },
            React.createElement("input", { type: 'radio', value: 'all', checked: props.dataContext.vm.allChecked, onChange: onChange }),
            React.createElement("span", null, "all"))));
};
const ChartTypePickerTemplate = (props) => {
    if (!props.dataContext || !props.dataContext.vm) {
        return null;
    }
    let onClick = (e) => {
        props.dataContext.vm.onButtonPressed.call(props.dataContext.vm);
    };
    let onDropDownClick = (e) => {
        props.dataContext.vm.handleDropDownClick.call(props.dataContext.vm, e);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("button", { className: 'financialChartTypePickerDropDownButton', onClick: onClick, "data-value": "vm.chartTypeString" }),
        React.createElement("div", { className: 'financialChartTypePickerDropDownMenu', style: { display: props.dataContext.vm.isOpen ? 'block' : 'none' }, onClick: onDropDownClick },
            React.createElement("ul", null,
                React.createElement("li", { "data-value": 'Auto' }, "Auto"),
                React.createElement("li", { "data-value": 'Bar' }, "Bar"),
                React.createElement("li", { "data-value": 'Line' }, "Line"),
                React.createElement("li", { "data-value": 'Candle' }, "Candle"),
                React.createElement("li", { "data-value": 'Column' }, "Column")))));
};
const IndicatorMenuTemplate = (props) => {
    if (!props.dataContext || !props.dataContext.vm) {
        return null;
    }
    let onClick = (e) => {
        props.dataContext.vm.onButtonPressed.call(props.dataContext.vm);
    };
    let onDropDownClick = (e) => {
        props.dataContext.vm.handleDropDownClick.call(props.dataContext.vm, e);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("button", { className: 'financialChartIndicatorMenuDropDownButton', onClick: onClick }, "Indicators"),
        React.createElement("div", { className: 'financialChartIndicatorMenuDropDownMenu', style: { display: props.dataContext.vm.isOpen ? 'block' : 'none' }, onClick: onDropDownClick },
            React.createElement("ul", null,
                React.createElement("li", { "data-value": 'FinancialOverlayType' },
                    "Overlays",
                    React.createElement("ul", null,
                        React.createElement("li", { "data-value": 'BollingerBands' }, "BollingerBands"),
                        React.createElement("li", { "data-value": 'PriceChannel' }, "PriceChannel"))),
                React.createElement("li", { "data-value": 'TrendLineType' },
                    "Trendlines",
                    React.createElement("ul", null,
                        React.createElement("li", { "data-value": 'LinearFit' }, "LinearFit"),
                        React.createElement("li", { "data-value": 'QuadraticFit' }, "QuadraticFit"),
                        React.createElement("li", { "data-value": 'CubicFit' }, "CubicFit"),
                        React.createElement("li", { "data-value": 'QuarticFit' }, "QuarticFit"),
                        React.createElement("li", { "data-value": 'QuinticFit' }, "QuinticFit"),
                        React.createElement("li", { "data-value": 'LogarithmicFit' }, "LogarithmicFit"),
                        React.createElement("li", { "data-value": 'ExponentialFit' }, "ExponentialFit"),
                        React.createElement("li", { "data-value": 'PowerLawFit' }, "PowerLawFit"),
                        React.createElement("li", { "data-value": 'SimpleAverage' }, "SimpleAverage"),
                        React.createElement("li", { "data-value": 'ExponentialAverage' }, "ExponentialAverage"),
                        React.createElement("li", { "data-value": 'ModifiedAverage' }, "ModifiedAverage"),
                        React.createElement("li", { "data-value": 'CumulativeAverage' }, "CumulativeAverage"),
                        React.createElement("li", { "data-value": 'WeightedAverage' }, "WeightedAverage"))),
                React.createElement("li", { "data-value": 'FinancialChartVolumeType' },
                    "Volume",
                    React.createElement("ul", null,
                        React.createElement("li", { "data-value": 'Column' }, "Column"),
                        React.createElement("li", { "data-value": 'Line' }, "Line"),
                        React.createElement("li", { "data-value": 'Area' }, "Area"))),
                React.createElement("li", { "data-value": 'FinancialIndicatorType' },
                    "Standalone Indicators",
                    React.createElement("ul", null,
                        React.createElement("li", { "data-value": 'AbsoluteVolumeOscillator' }, "AbsoluteVolumeOscillator"),
                        React.createElement("li", { "data-value": 'AccumulationDistribution' }, "AccumulationDistribution"),
                        React.createElement("li", { "data-value": 'AverageDirectionalIndex' }, "AverageDirectionalIndex"),
                        React.createElement("li", { "data-value": 'AverageTrueRange' }, "AverageTrueRange"),
                        React.createElement("li", { "data-value": 'BollingerBandWidth' }, "BollingerBandWidth"),
                        React.createElement("li", { "data-value": 'ChaikinOscillator' }, "ChaikinOscillator"),
                        React.createElement("li", { "data-value": 'ChaikinVolatility' }, "ChaikinVolatility"),
                        React.createElement("li", { "data-value": 'CommodityChannelIndex' }, "CommodityChannelIndex"),
                        React.createElement("li", { "data-value": 'DetrendedPriceOscillator' }, "DetrendedPriceOscillator"),
                        React.createElement("li", { "data-value": 'EaseOfMovement' }, "EaseOfMovement"),
                        React.createElement("li", { "data-value": 'FastStochasticOscillator' }, "FastStochasticOscillator"),
                        React.createElement("li", { "data-value": 'ForceIndex' }, "ForceIndex"),
                        React.createElement("li", { "data-value": 'FullStochasticOscillator' }, "FullStochasticOscillator"),
                        React.createElement("li", { "data-value": 'MarketFacilitationIndex' }, "MarketFacilitationIndex"),
                        React.createElement("li", { "data-value": 'MassIndex' }, "MassIndex"),
                        React.createElement("li", { "data-value": 'MedianPrice' }, "MedianPrice"),
                        React.createElement("li", { "data-value": 'MoneyFlowIndex' }, "MoneyFlowIndex"),
                        React.createElement("li", { "data-value": 'MovingAverageConvergenceDivergence' }, "MovingAverageConvergenceDivergence"),
                        React.createElement("li", { "data-value": 'NegativeVolumeIndex' }, "NegativeVolumeIndex"),
                        React.createElement("li", { "data-value": 'OnBalanceVolume' }, "OnBalanceVolume"),
                        React.createElement("li", { "data-value": 'PercentagePriceOscillator' }, "PercentagePriceOscillator"),
                        React.createElement("li", { "data-value": 'PercentageVolumeOscillator' }, "PercentageVolumeOscillator"),
                        React.createElement("li", { "data-value": 'PositiveVolumeIndex' }, "PositiveVolumeIndex"),
                        React.createElement("li", { "data-value": 'PriceVolumeTrend' }, "PriceVolumeTrend"),
                        React.createElement("li", { "data-value": 'RateOfChangeAndMomentum' }, "RateOfChangeAndMomentum"),
                        React.createElement("li", { "data-value": 'RelativeStrengthIndex' }, "RelativeStrengthIndex"),
                        React.createElement("li", { "data-value": 'SlowStochasticOscillator' }, "SlowStochasticOscillator"),
                        React.createElement("li", { "data-value": 'StandardDeviation' }, "StandardDeviation"),
                        React.createElement("li", { "data-value": 'StochRSI' }, "StochRSI"),
                        React.createElement("li", { "data-value": 'TRIX' }, "TRIX"),
                        React.createElement("li", { "data-value": 'TypicalPrice' }, "TypicalPrice"),
                        React.createElement("li", { "data-value": 'UltimateOscillator' }, "UltimateOscillator"),
                        React.createElement("li", { "data-value": 'WeightedClose' }, "WeightedClose"),
                        React.createElement("li", { "data-value": 'WilliamsPercentR' }, "WilliamsPercentR")))))));
};
const ToolbarTemplate = (props) => {
    if (!props.dataContext || !props.dataContext.vm) {
        return null;
    }
    let onChange = (e) => {
        props.dataContext.vm.changeSelection(e.target.Value);
    };
    let IndicatorMenu = props.dataContext.vm.financialChartIndicatorMenu.template;
    let RangeSelector = props.dataContext.vm.financialChartRangeSelector.template;
    let TypePicker = props.dataContext.vm.financialChartTypePicker.template;
    return (React.createElement("div", { className: 'financialChartToolbar' },
        React.createElement("div", { className: 'financialChartToolbar' },
            props.dataContext.vm.isIndicatorMenuVisible && React.createElement("div", { className: 'financialChartIndicatorMenu' }, IndicatorMenu ? React.createElement(IndicatorMenu, { dataContext: props.dataContext.vm.financialChartIndicatorMenu }) : React.createElement("div", null)),
            React.createElement("div", { className: 'financialChartRangeSelector' }, RangeSelector ? React.createElement(RangeSelector, { dataContext: props.dataContext.vm.financialChartRangeSelector }) : React.createElement("div", null)),
            React.createElement("div", { className: 'financialChartTypePicker' }, TypePicker ? React.createElement(TypePicker, { dataContext: props.dataContext.vm.financialChartTypePicker }) : React.createElement("div", null)))));
};
export class IgrFinancialChartDefaultTemplates {
    constructor() {
        //getSelection(ele: HTMLSelectElement): string[] {
        //    let ret: string[] = [];
        //    for (let i = 0; i < ele.options.length; i++) {
        //        if (ele.options[i].selected) {
        //            ret.push(ele.options[i].value);
        //        }
        //    }
        //    return ret;
        //}
        this.financialChartRangeSelectorTemplate = RangeSelectorTemplate;
        this.financialChartTypePickerTemplate = ChartTypePickerTemplate;
        this.financialChartIndicatorMenuTemplate = IndicatorMenuTemplate;
        this.financialChartToolbarTemplate = ToolbarTemplate;
        ensureCss();
    }
    static register() {
        TypeRegistrar.registerCons("IgrFinancialChartDefaultTemplates", IgrFinancialChartDefaultTemplates);
    }
}
