/*
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 = `
.ui-financialchart-container {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 12px;
    border-width: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.ui-financialchart-mainChart {
	margin-left: 15px;
}

.ui-financialchart-volumeChart {
	margin-left: 15px;
}

.financialChartMainGrid {
	height: 100%;
	width: 100%;
	display: grid;
	display: -ms-grid;
	-ms-grid-columns: 100%;
}

.financialChartPrice {
	grid-row: 3;
	-ms-grid-row: 3;
	margin-top: 10px;
}
.financialChartPrice, .financialChartPrice > div {
	min-height: 100px;
}
.financialChartIndicators {
	grid-row: 4;
	-ms-grid-row: 4;
}
.financialChartVolume {
	grid-row: 5;
	-ms-grid-row: 5;
}
.financialChartZoomSlider {
	grid-row: 6;
	-ms-grid-row: 6;
}

/*
/////////////////////
*/
/* Toolbar styles */
/*
/////////////////////
*/

.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;
	border: 1px solid #dadada;
	max-height: 45px;
	background: #eeeeee;
}

.financialChartToolbar,
.financialChartToolbar button {
	font:400 13px "Segoe UI", Arial, sans-serif!important;
}

.financialChartRangeSelector {
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	height: 100%;
}

.financialChartRangeSelector input {
	display: none;
}

.financialChartRangeSelectorLabel {
	cursor: pointer;
	height: 100%;
}
.financialChartRangeSelectorLabel:hover .financialChartRangeSelectorLabelSpan {
	color: #4897AA;
}

.financialChartRangeSelectorLabel input:checked + span {
	color: #444444;
	background-color: #dadada;
}

.financialChartRangeSelectorLabelSpan {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	box-sizing: border-box;
}

.financialChartRangeSelectorLastOption {
	border: none;
	padding-right: 0;
}

.financialChartIndicatorMenu,
.financialChartTypePicker {
	position: relative; 
	display: flex;
	align-items: center;
	justify-content: center;
}

.financialChartTypePicker {
	margin-left: auto;
	height: 100%;
	border-left: 1px solid #dadada;
}

.financialChartIndicatorMenu {
	height: 100%;
	padding:0 10px;
	border-right: 1px solid #dadada;
}

.financialChartIndicatorMenuDropDownMenu,
.financialChartTypePickerDropDownMenu {
	background: #fff;
	display: flex;
	flex-direction: column;
	z-index: 1;
	position: absolute;
	top: calc(100% + 1px);
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.financialChartIndicatorMenuDropDownMenu {
	left:0;
	min-width: 100px;
	height: 300px;
	overflow: auto;
}

.financialChartTypePickerDropDownMenu {
	right:0;
}

.financialChartListItem {
	cursor: pointer;
}

.financialChartListItem:hover,
.financialChartListItem:focus {
	color: #4897AA;
}

.financialChartListItem span {
	position: relative;
	/* TODO: figure out why we need z-index here */
	z-index: -1;
}

.financialChartTypePickerDropDownMenu .financialChartListItem {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.financialChartTypePickerDropDownMenu .ui-icon {
	margin-right: 5px;
}

.financialChartIndicatorMenuDropDownButton,
.financialChartTypePickerDropDownButton {
	background-color:transparent;
	border:none;
	outline:none;
	cursor:pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.financialChartIndicatorMenuDropDownMenuList {
	font-weight: bold;
}

.financialChartIndicatorMenuDropDownMenu li.checked,
.financialChartTypePickerDropDownMenu li.checked {
	color: #4897AA;
}

.financialChartIndicatorMenuDropDownMenu ul,
.financialChartTypePickerDropDownMenu ul {
	list-style-type: none;
	margin: 0;
	padding: 8px;
}

.financialChartIndicatorMenuDropDownMenu ul ul,
.financialChartTypePickerDropDownMenu ul ul {
	padding-left: 15px;
	font-weight: normal;
}

.financialChartIndicatorMenuDropDownMenu ul li,
.financialChartTypePickerDropDownMenu ul li {
	padding-top:4px;
	position: relative;
}

.financialChartIndicatorMenuDropDownMenu li.checked:before{
	margin-left: -15px;
	margin-right: 5px;
	content: "\\2713";
	position: absolute;
}

.financialChartLegend {
	grid-row: 2;
	-ms-grid-row: 2;
}

.ui-ChartButtonWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.financialChartTypePickerDropDownButton .ui-icon-triangle-1-s,
.ui-ChartButtonWrapper .ui-icon-triangle-1-s {
	font-size: 10px;
}

.financialChartTypePickerDropDownButton {
	background-color:transparent;
	height: 100%;
	padding: 0 10px;
}

.financialChartIndicatorMenuLabel {
	margin: 0 5px;
}

/* Icon styles if no theme is includet */
.financialChartToolbar .ui-icon {
	color: #888888;
	width: 16px;
	height: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-indent: -99999px;
	overflow: hidden;
	position: relative;
}
.financialChartToolbar .ui-icon:before {
	display: block;
	height: 1em;
	left: 50%;
	line-height: 1;
	margin-left: -0.5em;
	margin-top: -0.5em;
	position: absolute;
	text-indent: 0;
	top: 50%;
	width: 1em;
}

.ui-icon-IndicatorsIcon:before {
	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");
}

.financialChartIndicatorMenuDropDownButton:hover .ui-icon-IndicatorsIcon:before,
.financialChartIndicatorMenuDropDownButton:focus .ui-icon-IndicatorsIcon:before {
	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");
}

.ui-icon-toolbar-dd {
	position: relative;
	width: 16px;
	height: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
}


.ui-icon-toolbar-dd:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 4px 0 4px;
	border-color: #666 transparent transparent transparent;
}

.financialChartIndicatorMenuDropDownButton:hover .ui-icon-toolbar-dd:before,
.financialChartIndicatorMenuDropDownButton:focus .ui-icon-toolbar-dd:before,
.financialChartTypePickerDropDownButton:hover .ui-icon-toolbar-dd:before,
.financialChartTypePickerDropDownButton:focus .ui-icon-toolbar-dd:before {
	content: '';
	border-color: #4897AA transparent transparent transparent;
}

.financialChartListItem[data-value='Auto'] {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 3px;
}

.financialChartTypePickerDropDownButton[data-value="Auto"] .ui-icon-chartAuto:before,
.financialChartListItem[data-value='Auto'] .ui-icon-changeable:before,
.financialChartListItem[data-value='Auto'] .ui-icon-chartAuto:before,
.financialChartTypePickerDropDownButton[data-value="Auto"] .ui-icon-changeable:before {
	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");
}

.financialChartListItem[data-value='Auto']:hover .ui-icon-chartAuto:before,
.financialChartListItem[data-value='Auto']:focus .ui-icon-chartAuto:before,
.financialChartTypePickerDropDownButton[data-value='Auto']:hover .ui-icon-changeable:before,
.financialChartTypePickerDropDownButton[data-value='Auto']:focus .ui-icon-changeable:before {
	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");
}

.financialChartListItem[data-value='Bar'] .ui-icon-BarIcon:before,
.financialChartTypePickerDropDownButton[data-value="Bar"] .ui-icon-changeable:before {
	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");
}

.financialChartTypePickerDropDownButton[data-value='Bar']:hover .ui-icon-changeable:before,
.financialChartTypePickerDropDownButton[data-value='Bar']:focus .ui-icon-changeable:before,
.financialChartListItem[data-value="Bar"]:hover .ui-icon-BarIcon:before,
.financialChartListItem[data-value="Bar"]:focus .ui-icon-BarIcon:before {
	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");
}

.financialChartListItem[data-value='Line'] .ui-icon-LineIcon:before,
.financialChartTypePickerDropDownButton[data-value="Line"] .ui-icon-changeable:before {
	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");
}

.financialChartTypePickerDropDownButton[data-value='Line']:hover .ui-icon-changeable:before,
.financialChartTypePickerDropDownButton[data-value='Line']:focus .ui-icon-changeable:before,
.financialChartListItem[data-value="Line"]:hover .ui-icon-LineIcon:before,
.financialChartListItem[data-value="Line"]:focus .ui-icon-LineIcon:before {
	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");}

.financialChartListItem[data-value='Candle'] .ui-icon-CandleIcon:before,
.financialChartTypePickerDropDownButton[data-value="Candle"] .ui-icon-changeable:before {
	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");
}

.financialChartTypePickerDropDownButton[data-value='Candle']:hover .ui-icon-changeable:before,
.financialChartTypePickerDropDownButton[data-value='Candle']:focus .ui-icon-changeable:before,
.financialChartListItem[data-value="Candle"]:hover .ui-icon-CandleIcon:before,
.financialChartListItem[data-value="Candle"]:focus .ui-icon-CandleIcon:before {
	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");}

.financialChartListItem[data-value='Column'] .ui-icon-ColumnIcon:before,
.financialChartTypePickerDropDownButton[data-value="Column"] .ui-icon-changeable:before {
	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");
}

.financialChartTypePickerDropDownButton[data-value='Column']:hover .ui-icon-changeable:before,
.financialChartTypePickerDropDownButton[data-value='Column']:focus .ui-icon-changeable:before,
.financialChartListItem[data-value="Column"]:hover .ui-icon-ColumnIcon:before,
.financialChartListItem[data-value="Column"]:focus .ui-icon-ColumnIcon:before {
	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");
}
`;
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);
        if (props.dataContext.vm.notifyChanged) {
            props.dataContext.vm.notifyChanged();
        }
    };
    return (React.createElement("div", { className: 'financialChartRangeSelector' },
        props.dataContext.vm.oneMonthVisible ? React.createElement("label", { className: 'financialChartRangeSelectorLabel rangeSelectorOneMonth' },
            React.createElement("input", { type: 'radio', value: '1m', checked: props.dataContext.vm.oneMonthChecked, onChange: onChange }),
            React.createElement("span", { className: "financialChartRangeSelectorLabelSpan" }, "1m")) : null,
        props.dataContext.vm.threeMonthsVisible ? React.createElement("label", { className: 'financialChartRangeSelectorLabel rangeSelectorThreeMonths' },
            React.createElement("input", { type: 'radio', value: '3m', checked: props.dataContext.vm.threeMonthsChecked, onChange: onChange }),
            React.createElement("span", { className: "financialChartRangeSelectorLabelSpan" }, "3m")) : null,
        props.dataContext.vm.sixMonthsVisible ? React.createElement("label", { className: 'financialChartRangeSelectorLabel rangeSelectorSixMonths' },
            React.createElement("input", { type: 'radio', value: '6m', checked: props.dataContext.vm.sixMonthsChecked, onChange: onChange }),
            React.createElement("span", { className: "financialChartRangeSelectorLabelSpan" }, "6m")) : null,
        props.dataContext.vm.yearToDateVisible ? React.createElement("label", { className: 'financialChartRangeSelectorLabel rangeSelectorYTD' },
            React.createElement("input", { type: 'radio', value: 'YTD', checked: props.dataContext.vm.yearToDateChecked, onChange: onChange }),
            React.createElement("span", { className: "financialChartRangeSelectorLabelSpan" }, "YTD")) : null,
        props.dataContext.vm.oneYearVisible ? React.createElement("label", { className: 'financialChartRangeSelectorLabel rangeSelectorOneYear' },
            React.createElement("input", { type: 'radio', value: '1y', checked: props.dataContext.vm.oneYearChecked, onChange: onChange }),
            React.createElement("span", { className: "financialChartRangeSelectorLabelSpan" }, "1y")) : null,
        props.dataContext.vm.allVisible ? React.createElement("label", { className: 'financialChartRangeSelectorLabel rangeSelectorAll' },
            React.createElement("input", { type: 'radio', value: 'all', checked: props.dataContext.vm.allChecked, onChange: onChange }),
            React.createElement("span", { className: "financialChartRangeSelectorLabelSpan" }, "all")) : null));
};
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": props.dataContext.vm.chartTypeString },
            React.createElement("span", { className: 'ui-icon ui-icon-changeable' }),
            React.createElement("span", { className: 'ui-icon-toolbar-dd' })),
        React.createElement("div", { className: 'financialChartTypePickerDropDownMenu', style: { display: props.dataContext.vm.isOpen ? 'block' : 'none' }, onClick: onDropDownClick },
            React.createElement("ul", null,
                React.createElement("li", { className: 'financialChartListItem', "data-value": 'Auto' },
                    React.createElement("span", { className: 'ui-icon ui-icon-chartAuto' }),
                    React.createElement("span", null, "Auto")),
                React.createElement("li", { className: 'financialChartListItem', "data-value": 'Bar' },
                    React.createElement("span", { className: 'ui-icon ui-icon-BarIcon' }),
                    React.createElement("span", null, "Bar")),
                React.createElement("li", { className: 'financialChartListItem', "data-value": 'Line' },
                    React.createElement("span", { className: 'ui-icon ui-icon-LineIcon' }),
                    React.createElement("span", null, "Line")),
                React.createElement("li", { className: 'financialChartListItem', "data-value": 'Candle' },
                    React.createElement("span", { className: 'ui-icon ui-icon-CandleIcon' }),
                    React.createElement("span", null, "Candle")),
                React.createElement("li", { className: 'financialChartListItem', "data-value": 'Column' },
                    React.createElement("span", { className: 'ui-icon ui-icon-ColumnIcon' }),
                    React.createElement("span", null, "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 },
            React.createElement("div", { className: 'ui-ChartButtonWrapper' },
                React.createElement("span", { className: 'ui-icon ui-icon-IndicatorsIcon' }),
                React.createElement("span", { className: 'financialChartIndicatorMenuLabel' }, "Indicators"),
                React.createElement("span", { className: 'ui-icon-toolbar-dd' }))),
        React.createElement("div", { className: 'financialChartIndicatorMenuDropDownMenu', style: { display: props.dataContext.vm.isOpen ? 'block' : 'none' }, onClick: onDropDownClick },
            React.createElement("ul", { className: 'financialChartIndicatorMenuDropDownMenuList' },
                React.createElement("li", { "data-value": 'FinancialOverlayType' },
                    React.createElement("span", null, "Overlays"),
                    React.createElement("ul", null,
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'BollingerBands' }, "BollingerBands"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'PriceChannel' }, "PriceChannel"))),
                React.createElement("li", { "data-value": 'TrendLineType' },
                    React.createElement("span", null, "Trendlines"),
                    React.createElement("ul", null,
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'LinearFit' }, "LinearFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'QuadraticFit' }, "QuadraticFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'CubicFit' }, "CubicFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'QuarticFit' }, "QuarticFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'QuinticFit' }, "QuinticFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'LogarithmicFit' }, "LogarithmicFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'ExponentialFit' }, "ExponentialFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'PowerLawFit' }, "PowerLawFit"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'SimpleAverage' }, "SimpleAverage"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'ExponentialAverage' }, "ExponentialAverage"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'ModifiedAverage' }, "ModifiedAverage"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'CumulativeAverage' }, "CumulativeAverage"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'WeightedAverage' }, "WeightedAverage"))),
                React.createElement("li", { "data-value": 'FinancialChartVolumeType' },
                    React.createElement("span", null, "Volume"),
                    React.createElement("ul", null,
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'Column' }, "Column"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'Line' }, "Line"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'Area' }, "Area"))),
                React.createElement("li", { "data-value": 'FinancialIndicatorType' },
                    React.createElement("span", null, "Standalone Indicators"),
                    React.createElement("ul", null,
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'AbsoluteVolumeOscillator' }, "AbsoluteVolumeOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'AccumulationDistribution' }, "AccumulationDistribution"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'AverageDirectionalIndex' }, "AverageDirectionalIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'AverageTrueRange' }, "AverageTrueRange"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'BollingerBandWidth' }, "BollingerBandWidth"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'ChaikinOscillator' }, "ChaikinOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'ChaikinVolatility' }, "ChaikinVolatility"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'CommodityChannelIndex' }, "CommodityChannelIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'DetrendedPriceOscillator' }, "DetrendedPriceOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'EaseOfMovement' }, "EaseOfMovement"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'FastStochasticOscillator' }, "FastStochasticOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'ForceIndex' }, "ForceIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'FullStochasticOscillator' }, "FullStochasticOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'MarketFacilitationIndex' }, "MarketFacilitationIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'MassIndex' }, "MassIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'MedianPrice' }, "MedianPrice"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'MoneyFlowIndex' }, "MoneyFlowIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'MovingAverageConvergenceDivergence' }, "MovingAverageConvergenceDivergence"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'NegativeVolumeIndex' }, "NegativeVolumeIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'OnBalanceVolume' }, "OnBalanceVolume"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'PercentagePriceOscillator' }, "PercentagePriceOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'PercentageVolumeOscillator' }, "PercentageVolumeOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'PositiveVolumeIndex' }, "PositiveVolumeIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'PriceVolumeTrend' }, "PriceVolumeTrend"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'RateOfChangeAndMomentum' }, "RateOfChangeAndMomentum"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'RelativeStrengthIndex' }, "RelativeStrengthIndex"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'SlowStochasticOscillator' }, "SlowStochasticOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'StandardDeviation' }, "StandardDeviation"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'StochRSI' }, "StochRSI"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'TRIX' }, "TRIX"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'TypicalPrice' }, "TypicalPrice"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'UltimateOscillator' }, "UltimateOscillator"),
                        React.createElement("li", { className: 'financialChartListItem', "data-value": 'WeightedClose' }, "WeightedClose"),
                        React.createElement("li", { className: 'financialChartListItem', "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);
    }
}
