igniteui-webcomponents-charts
Version:
Ignite UI Web Components charting components for building rich data visualizations using TypeScript APIs.
123 lines • 61.8 kB
JavaScript
/*
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 { __makeTemplateObject } from "tslib";
import { TypeRegistrar } from "igniteui-webcomponents-core";
import { html, nothing } from "igniteui-webcomponents-core";
var requiredStyle = "\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 height: 100%;\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\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";
var checked = /*@__PURE__*/ new WeakMap();
var styleInst = null;
function ensureCss(hostElement) {
if (hostElement && hostElement.getRootNode) {
var root = hostElement.getRootNode();
if (root instanceof ShadowRoot) {
if (checked.has(root)) {
return;
}
if (!styleInst) {
styleInst = new CSSStyleSheet();
styleInst.replaceSync(requiredStyle);
}
var shadowRoot = root;
if (shadowRoot.adoptedStyleSheets.indexOf(styleInst) < 0) {
shadowRoot.adoptedStyleSheets.push(styleInst);
}
checked.set(root, true);
return;
}
}
if (!document) {
return;
}
if (checked.has(document)) {
return;
}
for (var i = 0; i < document.head.children.length; i++) {
var child = document.head.children[i];
if (child.tagName &&
child.tagName.toLowerCase() == "style" && child.hasAttribute("data-ig-financial-default-templates-style")) {
return;
}
}
var style = document.createElement("style");
style.textContent = requiredStyle;
style.setAttribute('data-ig-financial-default-templates-style', 'true');
document.head.appendChild(style);
checked.set(document, true);
}
var RangeSelectorTemplate = function (dataContext) {
if (!dataContext || !dataContext.vm) {
return null;
}
var onChange = function (e) {
dataContext.vm.changeSelection.call(dataContext.vm, e.target.value);
if (dataContext.vm.notifyChanged) {
dataContext.vm.notifyChanged();
}
};
return (html(templateObject_7 || (templateObject_7 = __makeTemplateObject(["<div class='financialChartRangeSelector'>\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n </div>"], ["<div class='financialChartRangeSelector'>\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n </div>"])), dataContext.vm.oneMonthVisible ? html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<label class='financialChartRangeSelectorLabel rangeSelectorOneMonth' >\n <input type='radio' value='1m' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"], ["<label class='financialChartRangeSelectorLabel rangeSelectorOneMonth' >\n <input type='radio' value='1m' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"])), dataContext.vm.oneMonthChecked, onChange, dataContext.vm.financialChart_RangeSelector_OneMonth) : nothing, dataContext.vm.threeMonthsVisible ? html(templateObject_2 || (templateObject_2 = __makeTemplateObject(["<label class='financialChartRangeSelectorLabel rangeSelectorThreeMonths' >\n <input type='radio' value='3m' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"], ["<label class='financialChartRangeSelectorLabel rangeSelectorThreeMonths' >\n <input type='radio' value='3m' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"])), dataContext.vm.threeMonthsChecked, onChange, dataContext.vm.financialChart_RangeSelector_ThreeMonths) : nothing, dataContext.vm.sixMonthsVisible ? html(templateObject_3 || (templateObject_3 = __makeTemplateObject(["<label class='financialChartRangeSelectorLabel rangeSelectorSixMonths' >\n <input type='radio' value='6m' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"], ["<label class='financialChartRangeSelectorLabel rangeSelectorSixMonths' >\n <input type='radio' value='6m' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"])), dataContext.vm.sixMonthsChecked, onChange, dataContext.vm.financialChart_RangeSelector_SixMonths) : nothing, dataContext.vm.yearToDateVisible ? html(templateObject_4 || (templateObject_4 = __makeTemplateObject(["<label class='financialChartRangeSelectorLabel rangeSelectorYTD' >\n <input type='radio' value='YTD' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"], ["<label class='financialChartRangeSelectorLabel rangeSelectorYTD' >\n <input type='radio' value='YTD' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"])), dataContext.vm.yearToDateChecked, onChange, dataContext.vm.financialChart_RangeSelector_YearToDate) : nothing, dataContext.vm.oneYearVisible ? html(templateObject_5 || (templateObject_5 = __makeTemplateObject(["<label class='financialChartRangeSelectorLabel rangeSelectorOneYear' >\n <input type='radio' value='1y' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"], ["<label class='financialChartRangeSelectorLabel rangeSelectorOneYear' >\n <input type='radio' value='1y' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"])), dataContext.vm.oneYearChecked, onChange, dataContext.vm.financialChart_RangeSelector_OneYear) : nothing, dataContext.vm.allVisible ? html(templateObject_6 || (templateObject_6 = __makeTemplateObject(["<label class='financialChartRangeSelectorLabel rangeSelectorAll' >\n <input type='radio' value='all' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"], ["<label class='financialChartRangeSelectorLabel rangeSelectorAll' >\n <input type='radio' value='all' .checked=", " @change=", " />\n <span class=\"financialChartRangeSelectorLabelSpan\">", "</span>\n </label>"])), dataContext.vm.allChecked, onChange, dataContext.vm.financialChart_RangeSelector_All) : nothing));
};
var ChartTypePickerTemplate = function (dataContext) {
if (!dataContext || !dataContext.vm) {
return null;
}
var onClick = function (e) {
dataContext.vm.onButtonPressed.call(dataContext.vm);
};
var onDropDownClick = function (e) {
dataContext.vm.handleDropDownClick.call(dataContext.vm, e);
};
return (html(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n <button class='financialChartTypePickerDropDownButton' @click=", " data-value=", " >\n <span class='ui-icon ui-icon-changeable'></span>\n <span class='ui-icon-toolbar-dd'></span>\n </button>\n <div class='financialChartTypePickerDropDownMenu' style='display: ", ";'\n @click=", ">\n <ul>\n <li class='financialChartListItem' data-value='Auto'>\n <span class='ui-icon ui-icon-chartAuto'></span>\n <span>Auto</span>\n </li>\n <li class='financialChartListItem' data-value='Bar'>\n <span class='ui-icon ui-icon-BarIcon'></span>\n <span>Bar</span>\n </li>\n <li class='financialChartListItem' data-value='Line'>\n <span class='ui-icon ui-icon-LineIcon'></span>\n <span>Line</span>\n </li>\n <li class='financialChartListItem' data-value='Candle'>\n <span class='ui-icon ui-icon-CandleIcon'></span>\n <span>Candle</span>\n </li>\n <li class='financialChartListItem' data-value='Column'>\n <span class='ui-icon ui-icon-ColumnIcon'></span>\n <span>Column</span>\n </li>\n </ul>\n </div>\n"], ["\n <button class='financialChartTypePickerDropDownButton' @click=", " data-value=", " >\n <span class='ui-icon ui-icon-changeable'></span>\n <span class='ui-icon-toolbar-dd'></span>\n </button>\n <div class='financialChartTypePickerDropDownMenu' style='display: ", ";'\n @click=", ">\n <ul>\n <li class='financialChartListItem' data-value='Auto'>\n <span class='ui-icon ui-icon-chartAuto'></span>\n <span>Auto</span>\n </li>\n <li class='financialChartListItem' data-value='Bar'>\n <span class='ui-icon ui-icon-BarIcon'></span>\n <span>Bar</span>\n </li>\n <li class='financialChartListItem' data-value='Line'>\n <span class='ui-icon ui-icon-LineIcon'></span>\n <span>Line</span>\n </li>\n <li class='financialChartListItem' data-value='Candle'>\n <span class='ui-icon ui-icon-CandleIcon'></span>\n <span>Candle</span>\n </li>\n <li class='financialChartListItem' data-value='Column'>\n <span class='ui-icon ui-icon-ColumnIcon'></span>\n <span>Column</span>\n </li>\n </ul>\n </div>\n"])), onClick, dataContext.vm.chartTypeString, dataContext.vm.isOpen ? 'block' : 'none', onDropDownClick));
};
var IndicatorMenuTemplate = function (dataContext) {
if (!dataContext || !dataContext.vm) {
return null;
}
var onClick = function (e) {
dataContext.vm.onButtonPressed.call(dataContext.vm);
};
var onDropDownClick = function (e) {
dataContext.vm.handleDropDownClick.call(dataContext.vm, e);
};
return html(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n<button class='financialChartIndicatorMenuDropDownButton' @click=", ">\n <div class='ui-ChartButtonWrapper'>\n <span class='ui-icon ui-icon-IndicatorsIcon'></span>\n <span class='financialChartIndicatorMenuLabel'>", "</span>\n <span class='ui-icon-toolbar-dd'></span>\n </div>\n</button>\n\n<div class='financialChartIndicatorMenuDropDownMenu' style='display: ", ";'\n @click=", ">\n <ul class='financialChartIndicatorMenuDropDownMenuList'>\n <li data-value='FinancialOverlayType'>\n <span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='BollingerBands'>", "</li>\n <li class='financialChartListItem' data-value='PriceChannel'>", "</li>\n </ul>\n </li>\n <li data-value='TrendLineType'>\n <span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='LinearFit'>", "</li>\n <li class='financialChartListItem' data-value='QuadraticFit'>", "</li>\n <li class='financialChartListItem' data-value='CubicFit'>", "</li>\n <li class='financialChartListItem' data-value='QuarticFit'>", "</li>\n <li class='financialChartListItem' data-value='QuinticFit'>", "</li>\n <li class='financialChartListItem' data-value='LogarithmicFit'>", "</li>\n <li class='financialChartListItem' data-value='ExponentialFit'>", "</li>\n <li class='financialChartListItem' data-value='PowerLawFit'>", "</li>\n <li class='financialChartListItem' data-value='SimpleAverage'>", "</li>\n <li class='financialChartListItem' data-value='ExponentialAverage'>", "</li>\n <li class='financialChartListItem' data-value='ModifiedAverage'>", "</li>\n <li class='financialChartListItem' data-value='CumulativeAverage'>", "</li>\n <li class='financialChartListItem' data-value='WeightedAverage'>", "</li>\n </ul>\n </li>\n <li data-value='FinancialChartVolumeType'><span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='Column'>", "</li>\n <li class='financialChartListItem' data-value='Line'>", "</li>\n <li class='financialChartListItem' data-value='Area'>", "</li>\n </ul>\n </li>\n <li data-value='FinancialIndicatorType'><span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='AbsoluteVolumeOscillator'>", "</li>\n <li class='financialChartListItem' data-value='AccumulationDistribution'>", "</li>\n <li class='financialChartListItem' data-value='AverageDirectionalIndex'>", "</li>\n <li class='financialChartListItem' data-value='AverageTrueRange'>", "</li>\n <li class='financialChartListItem' data-value='BollingerBandWidth'>", "</li>\n <li class='financialChartListItem' data-value='ChaikinOscillator'>", "</li>\n <li class='financialChartListItem' data-value='ChaikinVolatility'>", "</li>\n <li class='financialChartListItem' data-value='CommodityChannelIndex'>", "</li>\n <li class='financialChartListItem' data-value='DetrendedPriceOscillator'>", "</li>\n <li class='financialChartListItem' data-value='EaseOfMovement'>", "</li>\n <li class='financialChartListItem' data-value='FastStochasticOscillator'>", "</li>\n <li class='financialChartListItem' data-value='ForceIndex'>", "</li>\n <li class='financialChartListItem' data-value='FullStochasticOscillator'>", "</li>\n <li class='financialChartListItem' data-value='MarketFacilitationIndex'>", "</li>\n <li class='financialChartListItem' data-value='MassIndex'>", "</li>\n <li class='financialChartListItem' data-value='MedianPrice'>", "</li>\n <li class='financialChartListItem' data-value='MoneyFlowIndex'>", "</li>\n <li class='financialChartListItem' data-value='MovingAverageConvergenceDivergence'>", "</li>\n <li class='financialChartListItem' data-value='NegativeVolumeIndex'>", "</li>\n <li class='financialChartListItem' data-value='OnBalanceVolume'>", "</li>\n <li class='financialChartListItem' data-value='PercentagePriceOscillator'>", "</li>\n <li class='financialChartListItem' data-value='PercentageVolumeOscillator'>", "</li>\n <li class='financialChartListItem' data-value='PositiveVolumeIndex'>", "</li>\n <li class='financialChartListItem' data-value='PriceVolumeTrend'>", "</li>\n <li class='financialChartListItem' data-value='RateOfChangeAndMomentum'>", "</li>\n <li class='financialChartListItem' data-value='RelativeStrengthIndex'>", "</li>\n <li class='financialChartListItem' data-value='SlowStochasticOscillator'>", "</li>\n <li class='financialChartListItem' data-value='StandardDeviation'>", "</li>\n <li class='financialChartListItem' data-value='StochRSI'>", "</li>\n <li class='financialChartListItem' data-value='TRIX'>", "</li>\n <li class='financialChartListItem' data-value='TypicalPrice'>", "</li>\n <li class='financialChartListItem' data-value='UltimateOscillator'>", "</li>\n <li class='financialChartListItem' data-value='WeightedClose'>", "</li>\n <li class='financialChartListItem' data-value='WilliamsPercentR'>", "</li>\n </ul>\n </li>\n </ul>\n</div>\n"], ["\n<button class='financialChartIndicatorMenuDropDownButton' @click=", ">\n <div class='ui-ChartButtonWrapper'>\n <span class='ui-icon ui-icon-IndicatorsIcon'></span>\n <span class='financialChartIndicatorMenuLabel'>", "</span>\n <span class='ui-icon-toolbar-dd'></span>\n </div>\n</button>\n\n<div class='financialChartIndicatorMenuDropDownMenu' style='display: ", ";'\n @click=", ">\n <ul class='financialChartIndicatorMenuDropDownMenuList'>\n <li data-value='FinancialOverlayType'>\n <span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='BollingerBands'>", "</li>\n <li class='financialChartListItem' data-value='PriceChannel'>", "</li>\n </ul>\n </li>\n <li data-value='TrendLineType'>\n <span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='LinearFit'>", "</li>\n <li class='financialChartListItem' data-value='QuadraticFit'>", "</li>\n <li class='financialChartListItem' data-value='CubicFit'>", "</li>\n <li class='financialChartListItem' data-value='QuarticFit'>", "</li>\n <li class='financialChartListItem' data-value='QuinticFit'>", "</li>\n <li class='financialChartListItem' data-value='LogarithmicFit'>", "</li>\n <li class='financialChartListItem' data-value='ExponentialFit'>", "</li>\n <li class='financialChartListItem' data-value='PowerLawFit'>", "</li>\n <li class='financialChartListItem' data-value='SimpleAverage'>", "</li>\n <li class='financialChartListItem' data-value='ExponentialAverage'>", "</li>\n <li class='financialChartListItem' data-value='ModifiedAverage'>", "</li>\n <li class='financialChartListItem' data-value='CumulativeAverage'>", "</li>\n <li class='financialChartListItem' data-value='WeightedAverage'>", "</li>\n </ul>\n </li>\n <li data-value='FinancialChartVolumeType'><span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='Column'>", "</li>\n <li class='financialChartListItem' data-value='Line'>", "</li>\n <li class='financialChartListItem' data-value='Area'>", "</li>\n </ul>\n </li>\n <li data-value='FinancialIndicatorType'><span>", "</span>\n <ul>\n <li class='financialChartListItem' data-value='AbsoluteVolumeOscillator'>", "</li>\n <li class='financialChartListItem' data-value='AccumulationDistribution'>", "</li>\n <li class='financialChartListItem' data-value='AverageDirectionalIndex'>", "</li>\n <li class='financialChartListItem' data-value='AverageTrueRange'>", "</li>\n <li class='financialChartListItem' data-value='BollingerBandWidth'>", "</li>\n <li class='financialChartListItem' data-value='ChaikinOscillator'>", "</li>\n <li class='financialChartListItem' data-value='ChaikinVolatility'>", "</li>\n <li class='financialChartListItem' data-value='CommodityChannelIndex'>", "</li>\n <li class='financialChartListItem' data-value='DetrendedPriceOscillator'>", "</li>\n <li class='financialChartListItem' data-value='EaseOfMovement'>", "</li>\n <li class='financialChartListItem' data-value='FastStochasticOscillator'>", "</li>\n <li class='financialChartListItem' data-value='ForceIndex'>", "</li>\n <li class='financialChartListItem' data-value='FullStochasticOscillator'>", "</li>\n <li class='financialChartListItem' data-value='MarketFacilitationIndex'>", "</li>\n <li class='financialChartListItem' data-value='MassIndex'>", "</li>\n <li class='financialChartListItem' data-value='MedianPrice'>", "</li>\n <li class='financialChartListItem' data-value='MoneyFlowIndex'>", "</li>\n <li class='financialChartListItem' data-value='MovingAverageConvergenceDivergence'>", "</li>\n <li class='financialChartListItem' data-value='NegativeVolumeIndex'>", "</li>\n <li class='financialChartListItem' data-value='OnBalanceVolume'>", "</li>\n <li class='financialChartListItem' data-value='PercentagePriceOscillator'>", "</li>\n <li class='financialChartListItem' data-value='PercentageVolumeOscillator'>", "</li>\n <li class='financialChartListItem' data-value='PositiveVolumeIndex'>", "</li>\n <li class='financialChartListItem' data-value='PriceVolumeTrend'>", "</li>\n <li class='financialChartListItem' data-value='RateOfChangeAndMomentum'>", "</li>\n <li class='financialChartListItem' data-value='RelativeStrengthIndex'>", "</li>\n <li class='financialChartListItem' data-value='SlowStochasticOscillator'>", "</li>\n <li class='financialChartListItem' data-value='StandardDeviation'>", "</li>\n <li class='financialChartListItem' data-value='StochRSI'>", "</li>\n <li class='financialChartListItem' data-value='TRIX'>", "</li>\n <li class='financialChartListItem' data-value='TypicalPrice'>", "</li>\n <li class='financialChartListItem' data-value='UltimateOscillator'>", "</li>\n <li class='financialChartListItem' data-value='WeightedClose'>", "</li>\n <li class='financialChartListItem' data-value='WilliamsPercentR'>", "</li>\n </ul>\n </li>\n </ul>\n</div>\n"])), onClick, dataContext.vm.financialChart_IndicatorMenu_Header, dataContext.vm.isOpen ? 'block' : 'none', onDropDownClick, dataContext.vm.financialChart_IndicatorMenu_OverlaysCategoryHeader, dataContext.vm.financialChart_IndicatorsMenu_Overlay_BollingerBands, dataContext.vm.financialChart_IndicatorsMenu_Overlay_PriceChannel, dataContext.vm.financialChart_IndicatorMenu_TrendlinesCategoryHeader, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_LinearFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_QuadraticFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_CubicFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_QuarticFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_QuinticFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_LogarithmicFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_ExponentialFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_PowerLawFit, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_SimpleAverage, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_ExponentialAverage, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_ModifiedAverage, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_CumulativeAverage, dataContext.vm.financialChart_IndicatorsMenu_TrendLine_WeightedAverage, dataContext.vm.financialChart_IndicatorMenu_VolumeCategoryHeader, dataContext.vm.financialChart_IndicatorsMenu_Volume_Column, dataContext.vm.financialChart_IndicatorsMenu_Volume_Line, dataContext.vm.financialChart_IndicatorsMenu_Volume_Area, dataContext.vm.financialChart_IndicatorMenu_IndicatorsCategoryHeader, dataContext.vm.financialChart_IndicatorsMenu_Indicator_AbsoluteVolumeOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_AccumulationDistribution, dataContext.vm.financialChart_IndicatorsMenu_Indicator_AverageDirectionalIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_AverageTrueRange, dataContext.vm.financialChart_IndicatorsMenu_Indicator_BollingerBandWidth, dataContext.vm.financialChart_IndicatorsMenu_Indicator_ChaikinOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_ChaikinVolatility, dataContext.vm.financialChart_IndicatorsMenu_Indicator_CommodityChannelIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_DetrendedPriceOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_EaseOfMovement, dataContext.vm.financialChart_IndicatorsMenu_Indicator_FastStochasticOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_ForceIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_FullStochasticOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_MarketFacilitationIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_MassIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_MedianPrice, dataContext.vm.financialChart_IndicatorsMenu_Indicator_MoneyFlowIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_MovingAverageConvergenceDivergence, dataContext.vm.financialChart_IndicatorsMenu_Indicator_NegativeVolumeIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_OnBalanceVolume, dataContext.vm.financialChart_IndicatorsMenu_Indicator_PercentagePriceOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_PercentageVolumeOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_PositiveVolumeIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_PriceVolumeTrend, dataContext.vm.financialChart_IndicatorsMenu_Indicator_RateOfChangeAndMomentum, dataContext.vm.financialChart_IndicatorsMenu_Indicator_RelativeStrengthIndex, dataContext.vm.financialChart_IndicatorsMenu_Indicator_SlowStochasticOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_StandardDeviation, dataContext.vm.financialChart_IndicatorsMenu_Indicator_StochRSI, dataContext.vm.financialChart_IndicatorsMenu_Indicator_TRIX, dataContext.vm.financialChart_IndicatorsMenu_Indicator_TypicalPrice, dataContext.vm.financialChart_IndicatorsMenu_Indicator_UltimateOscillator, dataContext.vm.financialChart_IndicatorsMenu_Indicator_WeightedClose, dataContext.vm.financialChart_IndicatorsMenu_Indicator_WilliamsPercentR);
};
var ToolbarTemplate = function (dataContext) {
if (!dataContext || !dataContext.vm) {
return null;
}
var onChange = function (e) {
dataContext.vm.changeSelection(e.target.Value);
};
var IndicatorMenu = dataContext.vm.financialChartIndicatorMenu.template;
var RangeSelector = dataContext.vm.financialChartRangeSelector.template;
var TypePicker = dataContext.vm.financialChartTypePicker.template;
return html(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n<div class='financialChartToolbar'>\n <div class='financialChartToolbar'>\n ", "\n <div class='financialChartRangeSelector'>\n ", "\n </div>\n <div class='financialChartTypePicker'>\n ", "\n </div>\n </div>\n</div>\n"], ["\n<div class='financialChartToolbar'>\n <div class='financialChartToolbar'>\n ", "\n <div class='financialChartRangeSelector'>\n ", "\n </div>\n <div class='financialChartTypePicker'>\n ", "\n </div>\n </div>\n</div>\n"])), dataContext.vm.isIndicatorMenuVisible ? html(templateObject_11 || (templateObject_11 = __makeTemplateObject(["<div class='financialChartIndicatorMenu'>\n ", "\n </div>"], ["<div class='financialChartIndicatorMenu'>\n ", "\n </div>"])), IndicatorMenu ? IndicatorMenu(dataContext.vm.financialChartIndicatorMenu) : html(templateObject_10 || (templateObject_10 = __makeTemplateObject(["<div></div>"], ["<div></div>"])))) : nothing, RangeSelector ? RangeSelector(dataContext.vm.financialChartRangeSelector) : html(templateObject_12 || (templateObject_12 = __makeTemplateObject(["<div></div>"], ["<div></div>"]))), TypePicker ? TypePicker(dataContext.vm.financialChartTypePicker) : html(templateObject_13 || (templateObject_13 = __makeTemplateObject(["<div></div>"], ["<div></div>"]))));
};
var IgcFinancialChartDefaultTemplatesComponent = /** @class */ /*@__PURE__*/ (function () {
function IgcFinancialChartDefaultTemplatesComponent(hostElement) {
//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(hostElement);
}
IgcFinancialChartDefaultTemplatesComponent.register = function () {
TypeRegistrar.registerCons("IgcFinancialChartDefaultTemplatesComponent", IgcFinancialChartDefaultTemplatesComponent);
};
return IgcFinancialChartDefaultTemplatesComponent;
}());
export { IgcFinancialChartDefaultTemplatesComponent };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;