text: define(["exports", "meta", "../../lit-element/lit-element.js", "../utils/utils.js", "../es-global-bridge/es-global-bridge.js"], function (_exports, meta, _litElement, _utils, _esGlobalBridge) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.ChartistRenderSuper = _exports.ChartistRender = void 0;
    meta = babelHelpers.interopRequireWildcard(meta);
  
    var _templateObject_60c071e0af6311ebbe560fe9c4727db1, _templateObject2_60c071e0af6311ebbe560fe9c4727db1;
  
    function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
  
    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { babelHelpers.defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
  
    function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; }
  
    function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
  
    var ChartistRenderSuper = function ChartistRenderSuper(SuperClass) {
      return /*#__PURE__*/function (_SuperClass) {
        babelHelpers.inherits(_class, _SuperClass);
  
        var _super = _createSuper(_class);
  
        function _class() {
          var _this;
  
          babelHelpers.classCallCheck(this, _class);
          _this = _super.call(this);
          _this.id = "chart";
          _this.type = "bar";
          _this.scale = "ct-minor-seventh";
          _this.responsiveOptions = [];
          _this.data = [];
          _this.dataSource = "";
          _this.showTable = false;
          _this.__chartId = (0, _utils.generateResourceID)("chart-");
          window.ESGlobalBridge.requestAvailability();
  
          _this._loadScripts("chartistLib", "lib/chartist/dist/chartist.min.js", _this._chartistLoaded);
  
          _this._updateData();
  
          _this.observer.observe(babelHelpers.assertThisInitialized(_this), {
            attributes: false,
            childList: true,
            subtree: true
          });
          /**
           * Fired once once chart is ready.
           *
           * @event chartist-render-ready
           *
           */
  
  
          _this.dispatchEvent(new CustomEvent("chartist-render-ready", {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: babelHelpers.assertThisInitialized(_this)
          }));
  
          if ((typeof Chartist === "undefined" ? "undefined" : babelHelpers.typeof(Chartist)) === "object") _this._chartistLoaded.bind(babelHelpers.assertThisInitialized(_this));
          return _this;
        }
        /**
         * Store the tag name to make it easier to obtain directly.
         * @notice function name must be here for tooling to operate correctly
         */
  
  
        babelHelpers.createClass(_class, [{
          key: "render",
          value: // render function
          function render() {
            return (0, _litElement.html)(_templateObject_60c071e0af6311ebbe560fe9c4727db1 || (_templateObject_60c071e0af6311ebbe560fe9c4727db1 = babelHelpers.taggedTemplateLiteral([" <div id=\"", "-title\" class=\"title\">\n          ", "\n          <slot name=\"heading\"></slot>\n        </div>\n        <div id=\"", "-desc\" class=\"desc\">\n          ", "\n          <slot name=\"desc\"></slot>\n        </div>\n        <div\n          id=\"chart\"\n          chart=\"", "\"\n          role=\"presentation\"\n          aria-labelledby=\"", "-title\"\n          aria-describedby=\"", "-table ", "-desc\"\n          class=\"ct-chart ", "\"\n        ></div>\n        <div\n          id=\"", "-table\"\n          class=\"", "\"\n        >\n          <slot></slot>\n        </div>"])), this.__chartId, this.chartTitle, this.__chartId, this.chartDesc, this.__chartId, this.__chartId, this.__chartId, this.__chartId, this.scale, this.__chartId, this.showTable ? "table" : "table sr-only");
          } // properties available to the custom element for data binding
  
        }, {
          key: "plugins",
          get:
          /**
           * an array of plugins to load as [ [classname,  relativePath] ]
           *
           * @readonly
           */
          function get() {
            return [["Chartist.plugins.ctAxisTitle", "lib/chartist-plugin-axistitle/dist/chartist-plugin-axistitle.min.js"], ["Chartist.plugins.CtPointLabels", "lib/chartist-plugin-pointlabels/dist/chartist-plugin-pointlabels.min.js"], ["Chartist.plugins.fillDonut", "lib/chartist-plugin-fill-donut/dist/chartist-plugin-fill-donut.min.js"]];
          }
          /**
           * mutation observer for table
           * @readonly
           * @returns {object}
           */
  
        }, {
          key: "observer",
          get: function get() {
            var _this2 = this;
  
            var callback = function callback(mutationsList, observer) {
              return _this2._updateData(mutationsList, observer);
            };
  
            return new MutationObserver(callback);
          }
        }, {
          key: "updated",
          value: function updated(changedProperties) {
            var _this3 = this;
  
            if (babelHelpers.get(babelHelpers.getPrototypeOf(_class.prototype), "updated", this)) {
              babelHelpers.get(babelHelpers.getPrototypeOf(_class.prototype), "updated", this).call(this, changedProperties);
            }
  
            changedProperties.forEach(function (oldValue, propName) {
              if (propName === "chartData" && JSON.stringify(_this3.chartData) !== JSON.stringify(oldValue)) {
                /**
                 * Fires when chartData changes
                 * @event chart-data-changed
                 */
                _this3.dispatchEvent(new CustomEvent("chart-data-changed", {
                  detail: _this3
                }));
  
                _this3._getChart();
              } else if (propName === "dataSource" && _this3.dataSource !== oldValue) {
                /**
                 * Fires when data-source changes
                 * @event data-source-changed
                 */
                _this3.dispatchEvent(new CustomEvent("data-source-changed", {
                  detail: _this3
                }));
  
                if (_this3.dataSource !== "") fetch(_this3.dataSource).then(function (response) {
                  return response.text();
                }).then(function (data) {
                  return _this3.data = _this3._CSVtoArray(data);
                });
              } else if (propName === "data" && JSON.stringify(_this3.data) !== JSON.stringify(oldValue)) {
                /**
                 * Fires when data changes
                 * @event data-changed
                 */
                _this3.dispatchEvent(new CustomEvent("data-changed", {
                  detail: _this3
                }));
  
                _this3._renderTable();
  
                _this3._updateChartData();
              } else {
                _this3._getChart();
              }
            });
          }
          /**
           * Makes chart and returns the chart object.
           * @memberof ChartistRender
           */
  
        }, {
          key: "makeChart",
          value: function makeChart() {
            this._getChart();
  
            return this.chart;
          } // simple path from a url modifier
  
        }, {
          key: "pathFromUrl",
          value: function pathFromUrl(url) {
            return url.substring(0, url.lastIndexOf("/") + 1);
          }
        }, {
          key: "disconnectedCallback",
          value: function disconnectedCallback() {
            var _this4 = this;
  
            window.removeEventListener("es-bridge-chartistLib-loaded", this._chartistLoaded.bind(this));
            this.plugins.forEach(function (plugin) {
              return window.removeEventListener("es-bridge-".concat(plugin[0], "-loaded"), _this4._getChart.bind(_this4));
            });
            if (this.observer && this.observer.disconnect) this.observer.disconnect();
            babelHelpers.get(babelHelpers.getPrototypeOf(_class.prototype), "disconnectedCallback", this).call(this);
          }
          /**
           * determines if Chartist is ready
           */
  
        }, {
          key: "_chartistLoaded",
          value: function _chartistLoaded() {
            var _this5 = this;
  
            this.__chartistLoaded = true;
  
            this._getChart();
  
            this.plugins.forEach(function (plugin) {
              return _this5._loadScripts(plugin[0], plugin[1]);
            });
          }
          /**
           * Mix of solutions from https://stackoverflow.com/questions/8493195/how-can-i-parse-a-csv-string-with-javascript-which-contains-comma-in-data
           * @param {string} text csv
           * @returns {array} chart raw data
           */
  
        }, {
          key: "_CSVtoArray",
          value: function _CSVtoArray(text) {
            var p = "",
                row = [""],
                ret = [row],
                i = 0,
                r = 0,
                s = !0,
                l;
  
            for (l in text) {
              l = text[l];
  
              if ('"' === l) {
                if (s && l === p) row[i] += l;
                s = !s;
              } else if ("," === l && s) {
                if (row[i].trim().match(/^\d+$/m) !== null) row[i] = parseInt(row[i].trim());
                l = row[++i] = "";
              } else if ("\n" === l && s) {
                if ("\r" === p) row[i] = row[i].slice(0, -1);
                if (row[i].trim().match(/^\d+$/m) !== null) row[i] = parseInt(row[i].trim());
                row = ret[++r] = [l = ""];
                i = 0;
              } else row[i] += l;
  
              p = l;
            }
  
            if (row[i].trim().match(/^\d+$/m) !== null) row[i] = parseInt(row[i].trim());
            return ret;
          }
          /**
           * Get unique ID from the chart
           * @param {string} prefix for unique ID
           * @returns {string} unique ID
           */
  
        }, {
          key: "_getUniqueId",
          value: function _getUniqueId(prefix) {
            var id = prefix + Date.now();
            return id;
          }
          /**
           * gets options plus plugins
           * @readonly
           */
  
        }, {
          key: "fullOptions",
          get: function get() {
            var options = _objectSpread({}, this.options);
  
            if (Chartist.plugins) {
              options.plugins = [];
  
              if (this.type !== "pie" && this.pluginAxisTitle && Chartist.plugins.ctAxisTitle) {
                options.plugins.push(Chartist.plugins.ctAxisTitle(this.pluginAxisTitle));
              }
  
              if (this.type === "line" && this.pluginPointLabels && Chartist.plugins.ctPointLabels) {
                if (!this.pluginPointLabels.labelInterpolationFnc) this.pluginPointLabels.labelInterpolationFnc = Chartist.noop;
                options.plugins.push(Chartist.plugins.ctPointLabels(this.pluginPointLabels));
              }
  
              if (this.type === "pie" && options.donut && this.pluginFillDonutItems && Chartist.plugins.fillDonut) {
                options.plugins.push(Chartist.plugins.fillDonut({
                  items: this.pluginFillDonutItems
                }));
              }
            }
  
            return options;
          }
          /**
           * Renders chart when chartData changes
           */
  
        }, {
          key: "_getChart",
          value: function _getChart() {
            var _this6 = this;
  
            var chart = null,
                target = this.shadowRoot.querySelector("#chart");
  
            if (target !== null && (typeof Chartist === "undefined" ? "undefined" : babelHelpers.typeof(Chartist)) === "object" && this.chartData) {
              if (this.type == "bar") {
                if (this.responsiveOptions !== undefined && this.responsiveOptions.length > 0) {
                  this.responsiveOptions.forEach(function (option) {
                    if (option[1] !== undefined) {
                      if (option[1].axisX && option[1].axisX.labelInterpolationFnc == "noop") option[1].axisX.labelInterpolationFnc = Chartist.noop;
                      if (option[1].axisY && option[1].axisY.labelInterpolationFnc == "noop") option[1].axisY.labelInterpolationFnc = Chartist.noop;
                    }
                  });
                }
  
                chart = Chartist.Bar(target, this.chartData, this.fullOptions, this.responsiveOptions);
              } else if (this.type === "line") {
                chart = Chartist.Line(target, this.chartData, this.fullOptions, this.responsiveOptions);
              } else if (this.type === "pie") {
                chart = Chartist.Pie(target, {
                  labels: this.chartData.labels || [],
                  series: this.chartData.series || []
                }, this.fullOptions, this.responsiveOptions);
              }
              /**
               * Fired when chart is rendering.
               *
               * @event chartist-render-data
               *
               */
  
  
              this.dispatchEvent(new CustomEvent("chartist-render-data", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: chart
              }));
  
              if (chart) {
                chart.on("created", function (e) {
                  /**
                   * Fired once chart is created features are added.
                   *
                   * @event chartist-render-created
                   *
                   */
                  _this6.dispatchEvent(new CustomEvent("chartist-render-created", {
                    bubbles: true,
                    cancelable: true,
                    composed: true,
                    detail: e
                  }));
                });
                chart.on("draw", function (e) {
                  /**
                   * Fired as shapes are being drawn.
                   *
                   * @event chartist-render-draw
                   *
                   */
                  _this6.dispatchEvent(new CustomEvent("chartist-render-draw", {
                    bubbles: true,
                    cancelable: true,
                    composed: true,
                    detail: e
                  }));
                });
                this.chart = chart;
              }
            }
          }
          /**
           * uses ESGlobalBridge to load scripts
           *
           * @param {string} classname class to import from script
           * @param {string} path relative path of script
           * @param {function} [fnc=this._updateData] function to reun when script is loaded
           */
  
        }, {
          key: "_loadScripts",
          value: function _loadScripts(classname, path) {
            var fnc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this._getChart;
            var basePath = this.pathFromUrl(decodeURIComponent(meta.url)),
                location = "".concat(basePath).concat(path);
            window.addEventListener("es-bridge-".concat(classname, "-loaded"), fnc.bind(this));
            window.ESGlobalBridge.instance.load(classname, location);
          }
          /**
           * updates table when data changes
           * @memberof ChartistRender
           */
  
        }, {
          key: "_renderTable",
          value: function _renderTable() {
            var html = "",
                table = this.querySelector("table"),
                data = this.data; // ? [this.data.labels, this.data.series] : false;
  
            if (data) {
              var rowHeads = data[1] && data[1][0] && isNaN(data[1][0]),
                  colHeads = data[0] && data[0][rowHeads ? 1 : 0] && isNaN(data[0][rowHeads ? 1 : 0]),
                  thead = !colHeads ? undefined : {
                row: rowHeads ? data[0][0] : undefined,
                col: rowHeads ? data[0].slice(1, data[0].length) : data[0]
              },
                  tbody = data.series ? data.series : data.slice(thead ? 1 : 0, data.length).map(function (row) {
                return rowHeads ? {
                  th: row[0],
                  td: row.slice(1, row.length)
                } : {
                  td: row
                };
              });
  
              if (!thead && data.labels) {
                thead = data.labels;
              }
  
              table = table || document.createElement("table");
              if (thead) html += "\n          <thead><tr>\n            ".concat(thead.row ? "<th scope=\"row\">".concat(thead.row, "</th>") : "", "\n            ").concat(thead.col ? thead.col.map(function (th) {
                return "<th scope=\"col\">".concat(th, "</th>");
              }).join("") : "", "\n          </tr></thead>");
              if (tbody.length > 0) html += "\n          <tbody>\n            ".concat(tbody.map(function (tr) {
                return "\n              <tr>\n                ".concat(tr.th ? "<th scope=\"row\">".concat(tr.th, "</th>") : "", "\n                ").concat(tr.td ? tr.td.map(function (td) {
                  return "<td>".concat(td, "</td>");
                }).join("") : "", "\n              </tr>\n            ");
              }).join(""), "\n          </tbody>");
              table.innerHTML = html;
              this.appendChild(table);
            } else if (table) {
              table.innerHTML = "";
            }
          }
          /**
           * updates chartData from data
           *
           */
  
        }, {
          key: "_updateChartData",
          value: function _updateChartData() {
            var data = this.data,
                rowHeads = data && data[1] && data[1][0] && isNaN(data[1][0]),
                colHeads = data && data[0] && data[0][rowHeads ? 1 : 0] && isNaN(data[0][rowHeads ? 1 : 0]),
                labels = colHeads ? data[0] : undefined,
                body = colHeads && data[1] ? data.slice(1, data.length) : data;
  
            if (rowHeads) {
              labels = labels.slice(1, labels.length);
              body = body.map(function (row) {
                return row.slice(1, row.length);
              });
            }
  
            this.__dataReady = true;
            this.chartData = {
              labels: labels,
              series: this.type === "pie" ? body[0] : body
            };
          }
          /**
           * Updates data from table
           */
  
        }, {
          key: "_updateData",
          value: function _updateData(mutationsList, observer) {
            var table = this.querySelector("table"),
                data = [];
            if (table) table.querySelectorAll("tr").forEach(function (tr) {
              var temp = [];
              tr.querySelectorAll("th,td").forEach(function (td) {
                var html = td.innerHTML.trim();
                temp.push(isNaN(html) ? html : parseInt(html));
              });
              data.push(temp);
            });
            if (JSON.stringify(this.data) !== JSON.stringify(data)) this.data = data;
          }
        }], [{
          key: "styles",
          get: //styles function
          function get() {
            return [(0, _litElement.css)(_templateObject2_60c071e0af6311ebbe560fe9c4727db1 || (_templateObject2_60c071e0af6311ebbe560fe9c4727db1 = babelHelpers.taggedTemplateLiteral(["\n          .ct-label {\n            fill: rgba(0, 0, 0, 0.4);\n            color: rgba(0, 0, 0, 0.4);\n            font-size: 0.75rem;\n            line-height: 1;\n          }\n\n          .ct-chart-line .ct-label,\n          .ct-chart-bar .ct-label {\n            display: block;\n            display: -webkit-box;\n            display: -moz-box;\n            display: -ms-flexbox;\n            display: -webkit-flex;\n            display: flex;\n          }\n\n          .ct-chart-pie .ct-label,\n          .ct-chart-donut .ct-label {\n            dominant-baseline: central;\n          }\n\n          .ct-label.ct-horizontal.ct-start {\n            -webkit-box-align: flex-end;\n            -webkit-align-items: flex-end;\n            -ms-flex-align: flex-end;\n            align-items: flex-end;\n            -webkit-box-pack: flex-start;\n            -webkit-justify-content: flex-start;\n            -ms-flex-pack: flex-start;\n            justify-content: flex-start;\n            text-align: left;\n            text-anchor: start;\n          }\n\n          .ct-label.ct-horizontal.ct-end {\n            -webkit-box-align: flex-start;\n            -webkit-align-items: flex-start;\n            -ms-flex-align: flex-start;\n            align-items: flex-start;\n            -webkit-box-pack: flex-start;\n            -webkit-justify-content: flex-start;\n            -ms-flex-pack: flex-start;\n            justify-content: flex-start;\n            text-align: left;\n            text-anchor: start;\n          }\n\n          .ct-label.ct-vertical.ct-start {\n            -webkit-box-align: flex-end;\n            -webkit-align-items: flex-end;\n            -ms-flex-align: flex-end;\n            align-items: flex-end;\n            -webkit-box-pack: flex-end;\n            -webkit-justify-content: flex-end;\n            -ms-flex-pack: flex-end;\n            justify-content: flex-end;\n            text-align: right;\n            text-anchor: end;\n          }\n\n          .ct-label.ct-vertical.ct-end {\n            -webkit-box-align: flex-end;\n            -webkit-align-items: flex-end;\n            -ms-flex-align: flex-end;\n            align-items: flex-end;\n            -webkit-box-pack: flex-start;\n            -webkit-justify-content: flex-start;\n            -ms-flex-pack: flex-start;\n            justify-content: flex-start;\n            text-align: left;\n            text-anchor: start;\n          }\n\n          .ct-chart-bar .ct-label.ct-horizontal.ct-start {\n            -webkit-box-align: flex-end;\n            -webkit-align-items: flex-end;\n            -ms-flex-align: flex-end;\n            align-items: flex-end;\n            -webkit-box-pack: center;\n            -webkit-justify-content: center;\n            -ms-flex-pack: center;\n            justify-content: center;\n            text-align: center;\n            text-anchor: start;\n          }\n\n          .ct-chart-bar .ct-label.ct-horizontal.ct-end {\n            -webkit-box-align: flex-start;\n            -webkit-align-items: flex-start;\n            -ms-flex-align: flex-start;\n            align-items: flex-start;\n            -webkit-box-pack: center;\n            -webkit-justify-content: center;\n            -ms-flex-pack: center;\n            justify-content: center;\n            text-align: center;\n            text-anchor: start;\n          }\n\n          .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {\n            -webkit-box-align: flex-end;\n            -webkit-align-items: flex-end;\n            -ms-flex-align: flex-end;\n            align-items: flex-end;\n            -webkit-box-pack: flex-start;\n            -webkit-justify-content: flex-start;\n            -ms-flex-pack: flex-start;\n            justify-content: flex-start;\n            text-align: left;\n            text-anchor: start;\n          }\n\n          .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {\n            -webkit-box-align: flex-start;\n            -webkit-align-items: flex-start;\n            -ms-flex-align: flex-start;\n            align-items: flex-start;\n            -webkit-box-pack: flex-start;\n            -webkit-justify-content: flex-start;\n            -ms-flex-pack: flex-start;\n            justify-content: flex-start;\n            text-align: left;\n            text-anchor: start;\n          }\n\n          .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {\n            -webkit-box-align: center;\n            -webkit-align-items: center;\n            -ms-flex-align: center;\n            align-items: center;\n            -webkit-box-pack: flex-end;\n            -webkit-justify-content: flex-end;\n            -ms-flex-pack: flex-end;\n            justify-content: flex-end;\n            text-align: right;\n            text-anchor: end;\n          }\n\n          .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {\n            -webkit-box-align: center;\n            -webkit-align-items: center;\n            -ms-flex-align: center;\n            align-items: center;\n            -webkit-box-pack: flex-start;\n            -webkit-justify-content: flex-start;\n            -ms-flex-pack: flex-start;\n            justify-content: flex-start;\n            text-align: left;\n            text-anchor: end;\n          }\n\n          .ct-grid {\n            stroke: rgba(0, 0, 0, 0.2);\n            stroke-width: 1px;\n            stroke-dasharray: 2px;\n          }\n\n          .ct-grid-background {\n            fill: none;\n          }\n\n          .ct-point {\n            stroke-width: 10px;\n            stroke-linecap: round;\n          }\n\n          .ct-line {\n            fill: none;\n            stroke-width: 4px;\n          }\n\n          .ct-area {\n            stroke: none;\n            fill-opacity: 0.1;\n          }\n\n          .ct-bar {\n            fill: none;\n            stroke-width: 10px;\n          }\n\n          .ct-slice-donut {\n            fill: none;\n            stroke-width: 60px;\n          }\n\n          .ct-series-a .ct-point,\n          .ct-series-a .ct-line,\n          .ct-series-a .ct-bar,\n          .ct-series-a .ct-slice-donut {\n            stroke: #d70206;\n          }\n\n          .ct-series-a .ct-slice-pie,\n          .ct-series-a .ct-slice-donut-solid,\n          .ct-series-a .ct-area {\n            fill: #d70206;\n          }\n\n          .ct-series-b .ct-point,\n          .ct-series-b .ct-line,\n          .ct-series-b .ct-bar,\n          .ct-series-b .ct-slice-donut {\n            stroke: #f05b4f;\n          }\n\n          .ct-series-b .ct-slice-pie,\n          .ct-series-b .ct-slice-donut-solid,\n          .ct-series-b .ct-area {\n            fill: #f05b4f;\n          }\n\n          .ct-series-c .ct-point,\n          .ct-series-c .ct-line,\n          .ct-series-c .ct-bar,\n          .ct-series-c .ct-slice-donut {\n            stroke: #f4c63d;\n          }\n\n          .ct-series-c .ct-slice-pie,\n          .ct-series-c .ct-slice-donut-solid,\n          .ct-series-c .ct-area {\n            fill: #f4c63d;\n          }\n\n          .ct-series-d .ct-point,\n          .ct-series-d .ct-line,\n          .ct-series-d .ct-bar,\n          .ct-series-d .ct-slice-donut {\n            stroke: #d17905;\n          }\n\n          .ct-series-d .ct-slice-pie,\n          .ct-series-d .ct-slice-donut-solid,\n          .ct-series-d .ct-area {\n            fill: #d17905;\n          }\n\n          .ct-series-e .ct-point,\n          .ct-series-e .ct-line,\n          .ct-series-e .ct-bar,\n          .ct-series-e .ct-slice-donut {\n            stroke: #453d3f;\n          }\n\n          .ct-series-e .ct-slice-pie,\n          .ct-series-e .ct-slice-donut-solid,\n          .ct-series-e .ct-area {\n            fill: #453d3f;\n          }\n\n          .ct-series-f .ct-point,\n          .ct-series-f .ct-line,\n          .ct-series-f .ct-bar,\n          .ct-series-f .ct-slice-donut {\n            stroke: #59922b;\n          }\n\n          .ct-series-f .ct-slice-pie,\n          .ct-series-f .ct-slice-donut-solid,\n          .ct-series-f .ct-area {\n            fill: #59922b;\n          }\n\n          .ct-series-g .ct-point,\n          .ct-series-g .ct-line,\n          .ct-series-g .ct-bar,\n          .ct-series-g .ct-slice-donut {\n            stroke: #0544d3;\n          }\n\n          .ct-series-g .ct-slice-pie,\n          .ct-series-g .ct-slice-donut-solid,\n          .ct-series-g .ct-area {\n            fill: #0544d3;\n          }\n\n          .ct-series-h .ct-point,\n          .ct-series-h .ct-line,\n          .ct-series-h .ct-bar,\n          .ct-series-h .ct-slice-donut {\n            stroke: #6b0392;\n          }\n\n          .ct-series-h .ct-slice-pie,\n          .ct-series-h .ct-slice-donut-solid,\n          .ct-series-h .ct-area {\n            fill: #6b0392;\n          }\n\n          .ct-series-i .ct-point,\n          .ct-series-i .ct-line,\n          .ct-series-i .ct-bar,\n          .ct-series-i .ct-slice-donut {\n            stroke: #f05b4f;\n          }\n\n          .ct-series-i .ct-slice-pie,\n          .ct-series-i .ct-slice-donut-solid,\n          .ct-series-i .ct-area {\n            fill: #f05b4f;\n          }\n\n          .ct-series-j .ct-point,\n          .ct-series-j .ct-line,\n          .ct-series-j .ct-bar,\n          .ct-series-j .ct-slice-donut {\n            stroke: #dda458;\n          }\n\n          .ct-series-j .ct-slice-pie,\n          .ct-series-j .ct-slice-donut-solid,\n          .ct-series-j .ct-area {\n            fill: #dda458;\n          }\n\n          .ct-series-k .ct-point,\n          .ct-series-k .ct-line,\n          .ct-series-k .ct-bar,\n          .ct-series-k .ct-slice-donut {\n            stroke: #eacf7d;\n          }\n\n          .ct-series-k .ct-slice-pie,\n          .ct-series-k .ct-slice-donut-solid,\n          .ct-series-k .ct-area {\n            fill: #eacf7d;\n          }\n\n          .ct-series-l .ct-point,\n          .ct-series-l .ct-line,\n          .ct-series-l .ct-bar,\n          .ct-series-l .ct-slice-donut {\n            stroke: #86797d;\n          }\n\n          .ct-series-l .ct-slice-pie,\n          .ct-series-l .ct-slice-donut-solid,\n          .ct-series-l .ct-area {\n            fill: #86797d;\n          }\n\n          .ct-series-m .ct-point,\n          .ct-series-m .ct-line,\n          .ct-series-m .ct-bar,\n          .ct-series-m .ct-slice-donut {\n            stroke: #b2c326;\n          }\n\n          .ct-series-m .ct-slice-pie,\n          .ct-series-m .ct-slice-donut-solid,\n          .ct-series-m .ct-area {\n            fill: #b2c326;\n          }\n\n          .ct-series-n .ct-point,\n          .ct-series-n .ct-line,\n          .ct-series-n .ct-bar,\n          .ct-series-n .ct-slice-donut {\n            stroke: #6188e2;\n          }\n\n          .ct-series-n .ct-slice-pie,\n          .ct-series-n .ct-slice-donut-solid,\n          .ct-series-n .ct-area {\n            fill: #6188e2;\n          }\n\n          .ct-series-o .ct-point,\n          .ct-series-o .ct-line,\n          .ct-series-o .ct-bar,\n          .ct-series-o .ct-slice-donut {\n            stroke: #a748ca;\n          }\n\n          .ct-series-o .ct-slice-pie,\n          .ct-series-o .ct-slice-donut-solid,\n          .ct-series-o .ct-area {\n            fill: #a748ca;\n          }\n\n          .ct-square {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-square:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 100%;\n          }\n          .ct-square:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-square > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-minor-second {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-minor-second:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 93.75%;\n          }\n          .ct-minor-second:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-minor-second > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-major-second {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-major-second:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 88.88889%;\n          }\n          .ct-major-second:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-major-second > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-minor-third {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-minor-third:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 83.33333%;\n          }\n          .ct-minor-third:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-minor-third > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-major-third {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-major-third:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 80%;\n          }\n          .ct-major-third:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-major-third > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-perfect-fourth {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-perfect-fourth:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 75%;\n          }\n          .ct-perfect-fourth:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-perfect-fourth > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-perfect-fifth {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-perfect-fifth:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 66.66667%;\n          }\n          .ct-perfect-fifth:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-perfect-fifth > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-minor-sixth {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-minor-sixth:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 62.5%;\n          }\n          .ct-minor-sixth:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-minor-sixth > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-golden-section {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-golden-section:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 61.8047%;\n          }\n          .ct-golden-section:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-golden-section > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-major-sixth {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-major-sixth:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 60%;\n          }\n          .ct-major-sixth:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-major-sixth > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-minor-seventh {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-minor-seventh:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 56.25%;\n          }\n          .ct-minor-seventh:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-minor-seventh > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-major-seventh {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-major-seventh:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 53.33333%;\n          }\n          .ct-major-seventh:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-major-seventh > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-octave {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-octave:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 50%;\n          }\n          .ct-octave:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-octave > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-major-tenth {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-major-tenth:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 40%;\n          }\n          .ct-major-tenth:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-major-tenth > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-major-eleventh {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-major-eleventh:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 37.5%;\n          }\n          .ct-major-eleventh:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-major-eleventh > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-major-twelfth {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-major-twelfth:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 33.33333%;\n          }\n          .ct-major-twelfth:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-major-twelfth > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          .ct-double-octave {\n            display: block;\n            position: relative;\n            width: 100%;\n          }\n          .ct-double-octave:before {\n            display: block;\n            float: left;\n            content: \"\";\n            width: 0;\n            height: 0;\n            padding-bottom: 25%;\n          }\n          .ct-double-octave:after {\n            content: \"\";\n            display: table;\n            clear: both;\n          }\n          .ct-double-octave > svg {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n          }\n\n          :host {\n            display: block;\n            width: 100%;\n            padding: var(--chartist-padding, 0px);\n            margin: var(--chartist-margin, 15px 0);\n            background-color: var(--chartist-bg-color, transparent);\n            color: var(--chartist-text-color, #000);\n          }\n\n          .sr-only {\n            position: absolute;\n            left: -999999px;\n            height: 0;\n            overflow: hidden;\n          }\n\n          .ct-axis-title {\n            fill: var(--chartist-text-color);\n          }\n\n          ::slotted(table) {\n            border: 1px solid var(--chartist-text-color);\n            border-collapse: collapse;\n            width: 100%;\n            max-width: 100%;\n            overflow: auto;\n          }\n\n          .ct-label {\n            fill: var(--chartist-text-color, #000);\n            color: var(--chartist-text-color, #000);\n            font-size: var(--chartist-text-size, 0.75rem);\n            line-height: var(--chartist-line-height, 1);\n          }\n\n          .ct-grid {\n            stroke: var(--chartist-grid-color, rgba(0, 0, 0, 0.2));\n            stroke-width: 1px;\n            stroke-dasharray: 2px;\n          }\n\n          .ct-series-a .ct-point,\n          .ct-series-a .ct-line,\n          .ct-series-a .ct-bar,\n          .ct-series-a .ct-slice-donut {\n            stroke: var(--chartist-color-1, #d70206);\n          }\n\n          .ct-series-a .ct-slice-pie,\n          .ct-series-a .ct-slice-donut-solid,\n          .ct-series-a .ct-area {\n            fill: var(--chartist-color-1, #d70206);\n          }\n\n          .ct-series-b .ct-point,\n          .ct-series-b .ct-line,\n          .ct-series-b .ct-bar,\n          .ct-series-b .ct-slice-donut {\n            stroke: var(--chartist-color-2, #f05b4f);\n          }\n\n          .ct-series-b .ct-slice-pie,\n          .ct-series-b .ct-slice-donut-solid,\n          .ct-series-b .ct-area {\n            fill: var(--chartist-color-2, #f05b4f);\n          }\n\n          .ct-series-c .ct-point,\n          .ct-series-c .ct-line,\n          .ct-series-c .ct-bar,\n          .ct-series-c .ct-slice-donut {\n            stroke: var(--chartist-color-3, #f4c63d);\n          }\n\n          .ct-series-c .ct-slice-pie,\n          .ct-series-c .ct-slice-donut-solid,\n          .ct-series-c .ct-area {\n            fill: var(--chartist-color-3, #f4c63d);\n          }\n\n          .ct-series-d .ct-point,\n          .ct-series-d .ct-line,\n          .ct-series-d .ct-bar,\n          .ct-series-d .ct-slice-donut {\n            stroke: var(--chartist-color-4, #d17905);\n          }\n\n          .ct-series-d .ct-slice-pie,\n          .ct-series-d .ct-slice-donut-solid,\n          .ct-series-d .ct-area {\n            fill: var(--chartist-color-4, #d17905);\n          }\n\n          .ct-series-e .ct-point,\n          .ct-series-e .ct-line,\n          .ct-series-e .ct-bar,\n          .ct-series-e .ct-slice-donut {\n            stroke: var(--chartist-color-5, #453d3f);\n          }\n\n          .ct-series-e .ct-slice-pie,\n          .ct-series-e .ct-slice-donut-solid,\n          .ct-series-e .ct-area {\n            fill: var(--chartist-color-5, #453d3f);\n          }\n\n          .ct-series-f .ct-point,\n          .ct-series-f .ct-line,\n          .ct-series-f .ct-bar,\n          .ct-series-f .ct-slice-donut {\n            stroke: var(--chartist-color-6, #59922b);\n          }\n\n          .ct-series-f .ct-slice-pie,\n          .ct-series-f .ct-slice-donut-solid,\n          .ct-series-f .ct-area {\n            fill: var(--chartist-color-6, #59922b);\n          }\n\n          .ct-series-g .ct-point,\n          .ct-series-g .ct-line,\n          .ct-series-g .ct-bar,\n          .ct-series-g .ct-slice-donut {\n            stroke: var(--chartist-color-7, #0544d3);\n          }\n\n          .ct-series-g .ct-slice-pie,\n          .ct-series-g .ct-slice-donut-solid,\n          .ct-series-g .ct-area {\n            fill: var(--chartist-color-7, #0544d3);\n          }\n\n          .ct-series-h .ct-point,\n          .ct-series-h .ct-line,\n          .ct-series-h .ct-bar,\n          .ct-series-h .ct-slice-donut {\n            stroke: var(--chartist-color-8, #6b0392);\n          }\n\n          .ct-series-h .ct-slice-pie,\n          .ct-series-h .ct-slice-donut-solid,\n          .ct-series-h .ct-area {\n            fill: var(--chartist-color-8, #6b0392);\n          }\n\n          .ct-series-i .ct-point,\n          .ct-series-i .ct-line,\n          .ct-series-i .ct-bar,\n          .ct-series-i .ct-slice-donut {\n            stroke: var(--chartist-color-9, #f05b4f);\n          }\n\n          .ct-series-i .ct-slice-pie,\n          .ct-series-i .ct-slice-donut-solid,\n          .ct-series-i .ct-area {\n            fill: var(--chartist-color-9, #f05b4f);\n          }\n\n          .ct-series-j .ct-point,\n          .ct-series-j .ct-line,\n          .ct-series-j .ct-bar,\n          .ct-series-j .ct-slice-donut {\n            stroke: var(--chartist-color-10, #dda458);\n          }\n\n          .ct-series-j .ct-slice-pie,\n          .ct-series-j .ct-slice-donut-solid,\n          .ct-series-j .ct-area {\n            fill: var(--chartist-color-10, #dda458);\n          }\n\n          .ct-series-k .ct-point,\n          .ct-series-k .ct-line,\n          .ct-series-k .ct-bar,\n          .ct-series-k .ct-slice-donut {\n            stroke: var(--chartist-color-11, #eacf7d);\n          }\n\n          .ct-series-k .ct-slice-pie,\n          .ct-series-k .ct-slice-donut-solid,\n          .ct-series-k .ct-area {\n            fill: var(--chartist-color-11, #eacf7d);\n          }\n\n          .ct-series-l .ct-point,\n          .ct-series-l .ct-line,\n          .ct-series-l .ct-bar,\n          .ct-series-l .ct-slice-donut {\n            stroke: var(--chartist-color-12, #86797d);\n          }\n\n          .ct-series-l .ct-slice-pie,\n          .ct-series-l .ct-slice-donut-solid,\n          .ct-series-l .ct-area {\n            fill: var(--chartist-color-12, #86797d);\n          }\n\n          .ct-series-m .ct-point,\n          .ct-series-m .ct-line,\n          .ct-series-m .ct-bar,\n          .ct-series-m .ct-slice-donut {\n            stroke: var(--chartist-color-13, #b2c326);\n          }\n\n          .ct-series-m .ct-slice-pie,\n          .ct-series-m .ct-slice-donut-solid,\n          .ct-series-m .ct-area {\n            fill: var(--chartist-color-13, #b2c326);\n          }\n\n          .ct-series-n .ct-point,\n          .ct-series-n .ct-line,\n          .ct-series-n .ct-bar,\n          .ct-series-n .ct-slice-donut {\n            stroke: var(--chartist-color-14, #6188e2);\n          }\n\n          .ct-series-n .ct-slice-pie,\n          .ct-series-n .ct-slice-donut-solid,\n          .ct-series-n .ct-area {\n            fill: var(--chartist-color-14, #6188e2);\n          }\n\n          .ct-series-o .ct-point,\n          .ct-series-o .ct-line,\n          .ct-series-o .ct-bar,\n          .ct-series-o .ct-slice-donut {\n            stroke: var(--chartist-color-15, #a748ca);\n          }\n\n          .ct-series-o .ct-slice-pie,\n          .ct-series-o .ct-slice-donut-solid,\n          .ct-series-o .ct-area {\n            fill: var(--chartist-color-15, #a748ca);\n          }\n        "])))];
          }
        }, {
          key: "properties",
          get: function get() {
            return _objectSpread(_objectSpread({}, babelHelpers.get(babelHelpers.getPrototypeOf(_class), "properties", this)), {}, {
              /**
               * DEPRECATED: Use heading slot instead for progressive enhancement.
               */
              chartTitle: {
                type: String,
                attribute: "chart-title"
              },
  
              /**
               * Raw data pulled in from the csv file and converted to an array.
               */
              chartData: {
                type: Array,
                attribute: "chart-data"
              },
  
              /**
               * DEPRECATED: Use desc slot instead for progressive enhancement.
               */
              chartDesc: {
                type: String,
                attribute: "chart-desc"
              },
  
              /**
               * Use an accessible table in unnamed slot for maxium accessibility and SEO.
               * As table:
               * <table>
               *     <thead><tr><th scope="col">label 1</th>...</tr></thead>
               *     <tbody><tr><td>1</td>...</tr>...</tbody>
               * </table>
               *
               * DEPRECATED Method:
               * {
               *   labels: ["label 1", "label 2", "label 3"]
               *   series: [
               *     [1,2,3],
               *     [4,5,6]
               *   ]
               * }
               */
              data: {
                type: Object,
                attribute: "data"
              },
  
              /**
               * Location of the CSV file.
               */
              dataSource: {
                type: String,
                attribute: "data-source",
                reflect: true
              },
  
              /**
               * The unique identifier of the chart.
               */
              id: {
                type: String
              },
  
              /**
               * The options available at  https://gionkunz.github.io/chartist-js/api-documentation.html.
               */
              options: {
                type: Object
              },
  
              /**
               * Optional data for chartist-plugin-axistitle,
               * as in { axisX: { axisTitle: "Time (mins)", offset: { x: 0, y: 50 }, textAnchor: "middle" }, axisY: { axisTitle: "Goals", axisClass: "ct-axis-title", offset: { x: 0, y: -1 }, flipTitle: false } }
               * See https://github.com/alexstanbury/chartist-plugin-axistitle
               */
              pluginAxisTitle: {
                type: Object
              },
  
              /**
               * Optional data for chartist-plugin-pointlabels,
               * as in { labelOffset: { x: 0, y: -10 }, textAnchor: 'middle', labelInterpolationFnc: Chartist.noop }
               * See https://github.com/gionkunz/chartist-plugin-pointlabels
               */
              pluginPointLabels: {
                type: Object
              },
  
              /**
               * Optional array of items for chartist-plugin-filldonut,
               * as in items : [{ class : '', id: '', content : 'fillText', position: 'center', offsetY: 0, offsetX: 0 }]
               * See https://github.com/moxx/chartist-plugin-fill-donut
               */
              pluginFillDonutItems: {
                type: Array
              },
  
              /**
              * The responsive options.
              From https://gionkunz.github.io/chartist-js/api-documentation.html:
              In addition to the regular options we specify responsive option 
              overrides that will override the default configutation based 
              on the matching media queries.
              `var responsiveOptions = [
              ['screen and (min-width: 641px) and (max-width: 1024px)', {
              showPoint: false,
              axisX: {
                labelInterpolationFnc: function(value) {
                  // Will return Mon, Tue, Wed etc. on medium screens
                  return value.slice(0, 3);
                }
              }
              }],
              ['screen and (max-width: 640px)', {
              showLine: false,
              axisX: {
                labelInterpolationFnc: function(value) {
                  // Will return M, T, W etc. on small screens
                  return value[0];
                }
              }
              }]
              ];`
              */
              responsiveOptions: {
                type: Array,
                attribute: "responsive-options"
              },
  
              /**
              * The scale of the chart. (See https://gionkunz.github.io/chartist-js/api-documentation.html)```
              Container class	Ratio
              .ct-square          1
              .ct-minor-second	  15:16
              .ct-major-second	  8:9
              .ct-minor-third	    5:6
              .ct-major-third	    4:5
              .ct-perfect-fourth	3:4
              .ct-perfect-fifth	  2:3
              .ct-minor-sixth	    5:8
              .ct-golden-section	1:1.618
              .ct-major-sixth	    3:5
              .ct-minor-seventh	  9:16
              .ct-major-seventh	  8:15
              .ct-octave	        1:2
              .ct-major-tenth	    2:5
              .ct-major-eleventh	3:8
              .ct-major-twelfth	  1:3
              .ct-double-octave	  1:4```
              */
              scale: {
                type: String
              },
  
              /**
               * The show data in table form as well? Default is false.
               */
              showTable: {
                type: Boolean,
                attribute: "show-table"
              },
  
              /**
               * The type of chart:bar, line, or pie
               */
              type: {
                type: String
              }
            });
          }
        }, {
          key: "tag",
          get: function get() {
            return "chartist-render";
          }
        }]);
        return _class;
      }(SuperClass);
    };
    /**
     * @element chartist-render
     * @extends SchemaBehaviors
     * @demo ./demo/index.html 
     * @demo ./demo/csv.html CSV Loading
     * 
     * `chartist-render`
     * uses chartist library to render a chart
     *
    ### Styling
    
    `<chartist-render>` provides the following custom properties
    for styling:
    
    Custom property | Description | Default
    ----------------|-------------|----------
    `--chartist-bg-padding` | padding inside chartist-render | 0px
    `--chartist-bg-margin` | margin chartist chartist-render | 15px 0
    `--chartist-text-color` | default label color for charts | #000
    `--chartist-bg-color` | default label color for charts | #000
    `--chartist-text-color` | default label color for charts | #000
    `--chartist-color-a` | background color for 1st series |  #d70206
    `--chartist-color-label-a` | color for 1st series label |  `--chartist-label-color`
    `--chartist-color-b` | background color for 2nd series |  #f05b4f
    `--chartist-color-label-b` | color for 2nd series label |  `--chartist-label-color`
    `--chartist-color-c` | background color for 3rd series |  #f4c63d
    `--chartist-color-label-c` | color for 3rd series label |  `--chartist-label-color`
    `--chartist-color-d` | background color for 4th series |  #d17905
    `--chartist-color-label-d` | color for 4th series label |  `--chartist-label-color`
    `--chartist-color-e` | background color for 5th series |  #453d3f
    `--chartist-color-label-e` | color for 5th series label |  `--chartist-label-color`
    `--chartist-color-f` | background color for 6th series |  #59922b
    `--chartist-color-label-f` | color for 6th series label |  `--chartist-label-color`
    `--chartist-color-g` | background color for 7th series |  #0544d3
    `--chartist-color-label-g` | color for 7th series label |  `--chartist-label-color`
    `--chartist-color-h` | background color for 8th series |  #6b0392
    `--chartist-color-label-h` | color for 8th series label |  `--chartist-label-color`
    `--chartist-color-i` | background color for 9th series |  #f05b4f
    `--chartist-color-label-i` | color for 9th series label |  `--chartist-label-color`
    `--chartist-color-j` | background color for 10th series |  #dda458
    `--chartist-color-label-j` | color for 10th series label |  `--chartist-label-color`
    `--chartist-color-k` | background color for 11th series |  #eacf7d
    `--chartist-color-label-k` | color for 11th series label |  `--chartist-label-color`
    `--chartist-color-l` | background color for 12th series |  #86797d
    `--chartist-color-label-l` | color for 12th series label |  `--chartist-label-color`
    `--chartist-color-m` | background color for 13th series |  #b2c326
    `--chartist-color-label-m` | color for 13th series label |  `--chartist-label-color`
    `--chartist-color-n` | background color for 14th series |  #6188e2
    `--chartist-color-label-n` | color for 15th series label |  `--chartist-label-color`
    `--chartist-color-0` | background color for 15th series |  #a748ca
    `--chartist-color-label-o` | color for 15th series label |  `--chartist-label-color`
     */
  
  
    _exports.ChartistRenderSuper = ChartistRenderSuper;
  
    var ChartistRender = /*#__PURE__*/function (_ChartistRenderSuper) {
      babelHelpers.inherits(ChartistRender, _ChartistRenderSuper);
  
      var _super2 = _createSuper(ChartistRender);
  
      function ChartistRender() {
        babelHelpers.classCallCheck(this, ChartistRender);
        return _super2.apply(this, arguments);
      }
  
      return ChartistRender;
    }(ChartistRenderSuper(_litElement.LitElement));
  
    _exports.ChartistRender = ChartistRender;
    window.customElements.define(ChartistRender.tag, ChartistRender);
  });