text: define(["exports", "../../../@polymer/polymer/polymer-element.js", "../../simple-colors/simple-colors.js", "../../schema-behaviors/schema-behaviors.js", "../../../@polymer/iron-ajax/iron-ajax.js", "../../chartist-render/chartist-render.js"], function (_exports, _polymerElement, _simpleColors, _schemaBehaviors, _ironAjax, _chartistRender) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.LrndesignChartBehaviors = void 0;
  
    function _templateObject_e8a7fe40e53211e9a0cfefb808989d41() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"simple-colors-shared-styles\">\n        :host {\n          display: block;\n        }\n        :host {\n          --chartist-pie-label-color: var(\n            --simple-colors-default-theme-grey-12\n          );\n          --chartist-color-1: var(--simple-colors-default-theme-red-4);\n          --chartist-color-2: var(--simple-colors-default-theme-blue-4);\n          --chartist-color-3: var(--simple-colors-default-theme-yellow-4);\n          --chartist-color-4: var(--simple-colors-default-theme-purple-4);\n          --chartist-color-5: var(--simple-colors-default-theme-green-4);\n          --chartist-color-6: var(--simple-colors-default-theme-orange-5);\n          --chartist-color-7: var(--simple-colors-default-theme-pink-4);\n          --chartist-color-8: var(--simple-colors-default-theme-deep-orange-4);\n          --chartist-color-9: var(--simple-colors-default-theme-red-3);\n          --chartist-color-10: var(--simple-colors-default-theme-blue-3);\n          --chartist-color-11: var(--simple-colors-default-theme-yellow-3);\n          --chartist-color-12: var(--simple-colors-default-theme-purple-3);\n          --chartist-color-13: var(--simple-colors-default-theme-green-3);\n          --chartist-color-14: var(--simple-colors-default-theme-orange-4);\n          --chartist-color-15: var(--simple-colors-default-theme-pink-3);\n        }\n        :host([dark]) {\n          --chartist-color-1: var(--simple-colors-default-theme-red-4);\n          --chartist-color-2: var(--simple-colors-default-theme-light-blue-4);\n          --chartist-color-3: var(--simple-colors-default-theme-green-4);\n          --chartist-color-4: var(--simple-colors-default-theme-purple-4);\n          --chartist-color-5: var(--simple-colors-default-theme-indigo-4);\n          --chartist-color-6: var(--simple-colors-default-theme-pink-4);\n          --chartist-color-7: var(--simple-colors-default-theme-teal-4);\n          --chartist-color-8: var(--simple-colors-default-theme-red-3);\n          --chartist-color-9: var(--simple-colors-default-theme-light-blue-3);\n          --chartist-color-10: var(--simple-colors-default-theme-green-3);\n          --chartist-color-11: var(--simple-colors-default-theme-purple-3);\n          --chartist-color-12: var(--simple-colors-default-theme-indigo-3);\n          --chartist-color-13: var(--simple-colors-default-theme-pink-3);\n          --chartist-color-14: var(--simple-colors-default-theme-teal-3);\n          --chartist-color-15: var(--simple-colors-default-theme-deep-orange-3);\n        }\n        :host([accent-color=\"red\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-red-4);\n          --chartist-color-2: var(--simple-colors-default-theme-red-3);\n          --chartist-color-3: var(--simple-colors-default-theme-red-2);\n          --chartist-color-4: var(--simple-colors-default-theme-pink-4);\n          --chartist-color-5: var(--simple-colors-default-theme-pink-3);\n          --chartist-color-6: var(--simple-colors-default-theme-pink-2);\n          --chartist-color-7: var(--simple-colors-default-theme-deep-orange-4);\n          --chartist-color-8: var(--simple-colors-default-theme-deep-orange-3);\n          --chartist-color-9: var(--simple-colors-default-theme-deep-orange-2);\n          --chartist-color-10: var(--simple-colors-default-theme-purple-4);\n          --chartist-color-11: var(--simple-colors-default-theme-purple-3);\n          --chartist-color-12: var(--simple-colors-default-theme-purple-2);\n          --chartist-color-13: var(--simple-colors-default-theme-orange-4);\n          --chartist-color-14: var(--simple-colors-default-theme-orange-3);\n          --chartist-color-15: var(--simple-colors-default-theme-orange-2);\n        }\n        :host([accent-color=\"pink\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-pink-4);\n          --chartist-color-2: var(--simple-colors-default-theme-pink-3);\n          --chartist-color-3: var(--simple-colors-default-theme-pink-2);\n          --chartist-color-4: var(--simple-colors-default-theme-purple-4);\n          --chartist-color-5: var(--simple-colors-default-theme-purple-3);\n          --chartist-color-6: var(--simple-colors-default-theme-purple-2);\n          --chartist-color-7: var(--simple-colors-default-theme-red-4);\n          --chartist-color-8: var(--simple-colors-default-theme-red-3);\n          --chartist-color-9: var(--simple-colors-default-theme-red-2);\n          --chartist-color-10: var(--simple-colors-default-theme-deep-purple-4);\n          --chartist-color-11: var(--simple-colors-default-theme-deep-purple-3);\n          --chartist-color-12: var(--simple-colors-default-theme-deep-purple-2);\n          --chartist-color-13: var(--simple-colors-default-theme-deep-orange-4);\n          --chartist-color-14: var(--simple-colors-default-theme-deep-orange-3);\n          --chartist-color-15: var(--simple-colors-default-theme-deep-orange-2);\n        }\n        :host([accent-color=\"purple\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-purple-4);\n          --chartist-color-2: var(--simple-colors-default-theme-purple-3);\n          --chartist-color-3: var(--simple-colors-default-theme-purple-2);\n          --chartist-color-4: var(--simple-colors-default-theme-deep-purple-4);\n          --chartist-color-5: var(--simple-colors-default-theme-deep-purple-3);\n          --chartist-color-6: var(--simple-colors-default-theme-deep-purple-2);\n          --chartist-color-7: var(--simple-colors-default-theme-pink-4);\n          --chartist-color-8: var(--simple-colors-default-theme-pink-3);\n          --chartist-color-9: var(--simple-colors-default-theme-pink-2);\n          --chartist-color-10: var(--simple-colors-default-theme-indigo-4);\n          --chartist-color-11: var(--simple-colors-default-theme-indigo-3);\n          --chartist-color-12: var(--simple-colors-default-theme-indigo-2);\n          --chartist-color-13: var(--simple-colors-default-theme-red-4);\n          --chartist-color-14: var(--simple-colors-default-theme-red-3);\n          --chartist-color-15: var(--simple-colors-default-theme-red-2);\n        }\n        :host([accent-color=\"deep-purple\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-deep-purple-4);\n          --chartist-color-2: var(--simple-colors-default-theme-deep-purple-3);\n          --chartist-color-3: var(--simple-colors-default-theme-deep-purple-2);\n          --chartist-color-4: var(--simple-colors-default-theme-indigo-4);\n          --chartist-color-5: var(--simple-colors-default-theme-indigo-3);\n          --chartist-color-6: var(--simple-colors-default-theme-indigo-2);\n          --chartist-color-7: var(--simple-colors-default-theme-purple-4);\n          --chartist-color-8: var(--simple-colors-default-theme-purple-3);\n          --chartist-color-9: var(--simple-colors-default-theme-purple-2);\n          --chartist-color-10: var(--simple-colors-default-theme-blue-4);\n          --chartist-color-11: var(--simple-colors-default-theme-blue-3);\n          --chartist-color-12: var(--simple-colors-default-theme-blue-2);\n          --chartist-color-13: var(--simple-colors-default-theme-pink-4);\n          --chartist-color-14: var(--simple-colors-default-theme-pink-3);\n          --chartist-color-15: var(--simple-colors-default-theme-pink-2);\n        }\n        :host([accent-color=\"indigo\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-indigo-4);\n          --chartist-color-2: var(--simple-colors-default-theme-indigo-3);\n          --chartist-color-3: var(--simple-colors-default-theme-indigo-2);\n          --chartist-color-4: var(--simple-colors-default-theme-blue-4);\n          --chartist-color-5: var(--simple-colors-default-theme-blue-3);\n          --chartist-color-6: var(--simple-colors-default-theme-blue-2);\n          --chartist-color-7: var(--simple-colors-default-theme-deep-purple-4);\n          --chartist-color-8: var(--simple-colors-default-theme-deep-purple-3);\n          --chartist-color-9: var(--simple-colors-default-theme-deep-purple-2);\n          --chartist-color-10: var(--simple-colors-default-theme-light-blue-4);\n          --chartist-color-11: var(--simple-colors-default-theme-light-blue-3);\n          --chartist-color-12: var(--simple-colors-default-theme-light-blue-2);\n          --chartist-color-13: var(--simple-colors-default-theme-purple-4);\n          --chartist-color-14: var(--simple-colors-default-theme-purple-3);\n          --chartist-color-15: var(--simple-colors-default-theme-purple-2);\n        }\n        :host([accent-color=\"blue\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-blue-4);\n          --chartist-color-2: var(--simple-colors-default-theme-blue-3);\n          --chartist-color-3: var(--simple-colors-default-theme-blue-2);\n          --chartist-color-4: var(--simple-colors-default-theme-light-blue-4);\n          --chartist-color-5: var(--simple-colors-default-theme-light-blue-3);\n          --chartist-color-6: var(--simple-colors-default-theme-light-blue-2);\n          --chartist-color-7: var(--simple-colors-default-theme-indigo-4);\n          --chartist-color-8: var(--simple-colors-default-theme-indigo-3);\n          --chartist-color-9: var(--simple-colors-default-theme-indigo-2);\n          --chartist-color-10: var(--simple-colors-default-theme-cyan-4);\n          --chartist-color-11: var(--simple-colors-default-theme-cyan-3);\n          --chartist-color-12: var(--simple-colors-default-theme-cyan-2);\n          --chartist-color-13: var(--simple-colors-default-theme-deep-purple-4);\n          --chartist-color-14: var(--simple-colors-default-theme-deep-purple-3);\n          --chartist-color-15: var(--simple-colors-default-theme-deep-purple-2);\n        }\n        :host([accent-color=\"light-blue\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-light-blue-4);\n          --chartist-color-2: var(--simple-colors-default-theme-light-blue-3);\n          --chartist-color-3: var(--simple-colors-default-theme-light-blue-2);\n          --chartist-color-4: var(--simple-colors-default-theme-cyan-4);\n          --chartist-color-5: var(--simple-colors-default-theme-cyan-3);\n          --chartist-color-6: var(--simple-colors-default-theme-cyan-2);\n          --chartist-color-7: var(--simple-colors-default-theme-blue-4);\n          --chartist-color-8: var(--simple-colors-default-theme-blue-3);\n          --chartist-color-9: var(--simple-colors-default-theme-blue-2);\n          --chartist-color-10: var(--simple-colors-default-theme-teal-4);\n          --chartist-color-11: var(--simple-colors-default-theme-teal-3);\n          --chartist-color-12: var(--simple-colors-default-theme-teal-2);\n          --chartist-color-13: var(--simple-colors-default-theme-indigo-4);\n          --chartist-color-14: var(--simple-colors-default-theme-indigo-3);\n          --chartist-color-15: var(--simple-colors-default-theme-indigo-2);\n        }\n        :host([accent-color=\"cyan\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-cyan-4);\n          --chartist-color-2: var(--simple-colors-default-theme-cyan-3);\n          --chartist-color-3: var(--simple-colors-default-theme-cyan-2);\n          --chartist-color-4: var(--simple-colors-default-theme-teal-4);\n          --chartist-color-5: var(--simple-colors-default-theme-teal-3);\n          --chartist-color-6: var(--simple-colors-default-theme-teal-2);\n          --chartist-color-7: var(--simple-colors-default-theme-light-blue-4);\n          --chartist-color-8: var(--simple-colors-default-theme-light-blue-3);\n          --chartist-color-9: var(--simple-colors-default-theme-light-blue-2);\n          --chartist-color-10: var(--simple-colors-default-theme-green-4);\n          --chartist-color-11: var(--simple-colors-default-theme-green-3);\n          --chartist-color-12: var(--simple-colors-default-theme-green-2);\n          --chartist-color-13: var(--simple-colors-default-theme-blue-4);\n          --chartist-color-14: var(--simple-colors-default-theme-blue-3);\n          --chartist-color-15: var(--simple-colors-default-theme-blue-2);\n        }\n        :host([accent-color=\"teal\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-teal-4);\n          --chartist-color-2: var(--simple-colors-default-theme-teal-3);\n          --chartist-color-3: var(--simple-colors-default-theme-teal-2);\n          --chartist-color-4: var(--simple-colors-default-theme-green-4);\n          --chartist-color-5: var(--simple-colors-default-theme-green-3);\n          --chartist-color-6: var(--simple-colors-default-theme-green-2);\n          --chartist-color-7: var(--simple-colors-default-theme-cyan-4);\n          --chartist-color-8: var(--simple-colors-default-theme-cyan-3);\n          --chartist-color-9: var(--simple-colors-default-theme-cyan-2);\n          --chartist-color-10: var(--simple-colors-default-theme-light-green-4);\n          --chartist-color-11: var(--simple-colors-default-theme-light-green-3);\n          --chartist-color-12: var(--simple-colors-default-theme-light-green-2);\n          --chartist-color-13: var(--simple-colors-default-theme-light-blue-4);\n          --chartist-color-14: var(--simple-colors-default-theme-light-blue-3);\n          --chartist-color-15: var(--simple-colors-default-theme-light-blue-2);\n        }\n        :host([accent-color=\"green\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-green-4);\n          --chartist-color-2: var(--simple-colors-default-theme-green-3);\n          --chartist-color-3: var(--simple-colors-default-theme-green-2);\n          --chartist-color-4: var(--simple-colors-default-theme-light-green-4);\n          --chartist-color-5: var(--simple-colors-default-theme-light-green-3);\n          --chartist-color-6: var(--simple-colors-default-theme-light-green-2);\n          --chartist-color-7: var(--simple-colors-default-theme-teal-4);\n          --chartist-color-8: var(--simple-colors-default-theme-teal-3);\n          --chartist-color-9: var(--simple-colors-default-theme-teal-2);\n          --chartist-color-10: var(--simple-colors-default-theme-lime-4);\n          --chartist-color-11: var(--simple-colors-default-theme-lime-3);\n          --chartist-color-12: var(--simple-colors-default-theme-lime-2);\n          --chartist-color-13: var(--simple-colors-default-theme-cyan-4);\n          --chartist-color-14: var(--simple-colors-default-theme-cyan-3);\n          --chartist-color-15: var(--simple-colors-default-theme-cyan-2);\n        }\n        :host([accent-color=\"light-green\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-light-green-4);\n          --chartist-color-2: var(--simple-colors-default-theme-light-green-3);\n          --chartist-color-3: var(--simple-colors-default-theme-light-green-2);\n          --chartist-color-4: var(--simple-colors-default-theme-lime-4);\n          --chartist-color-5: var(--simple-colors-default-theme-lime-3);\n          --chartist-color-6: var(--simple-colors-default-theme-lime-2);\n          --chartist-color-7: var(--simple-colors-default-theme-green-4);\n          --chartist-color-8: var(--simple-colors-default-theme-green-3);\n          --chartist-color-9: var(--simple-colors-default-theme-green-2);\n          --chartist-color-10: var(--simple-colors-default-theme-yellow-4);\n          --chartist-color-11: var(--simple-colors-default-theme-yellow-3);\n          --chartist-color-12: var(--simple-colors-default-theme-yellow-2);\n          --chartist-color-13: var(--simple-colors-default-theme-teal-4);\n          --chartist-color-14: var(--simple-colors-default-theme-teal-3);\n          --chartist-color-15: var(--simple-colors-default-theme-teal-2);\n        }\n        :host([accent-color=\"lime\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-lime-4);\n          --chartist-color-2: var(--simple-colors-default-theme-lime-3);\n          --chartist-color-3: var(--simple-colors-default-theme-lime-2);\n          --chartist-color-4: var(--simple-colors-default-theme-yellow-4);\n          --chartist-color-5: var(--simple-colors-default-theme-yellow-3);\n          --chartist-color-6: var(--simple-colors-default-theme-yellow-2);\n          --chartist-color-7: var(--simple-colors-default-theme-light-green-4);\n          --chartist-color-8: var(--simple-colors-default-theme-light-green-3);\n          --chartist-color-9: var(--simple-colors-default-theme-light-green-2);\n          --chartist-color-10: var(--simple-colors-default-theme-amber-4);\n          --chartist-color-11: var(--simple-colors-default-theme-amber-3);\n          --chartist-color-12: var(--simple-colors-default-theme-amber-2);\n          --chartist-color-13: var(--simple-colors-default-theme-green-4);\n          --chartist-color-14: var(--simple-colors-default-theme-green-3);\n          --chartist-color-15: var(--simple-colors-default-theme-green-2);\n        }\n        :host([accent-color=\"yellow\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-yellow-4);\n          --chartist-color-2: var(--simple-colors-default-theme-yellow-3);\n          --chartist-color-3: var(--simple-colors-default-theme-yellow-2);\n          --chartist-color-4: var(--simple-colors-default-theme-amber-4);\n          --chartist-color-5: var(--simple-colors-default-theme-amber-3);\n          --chartist-color-6: var(--simple-colors-default-theme-amber-2);\n          --chartist-color-7: var(--simple-colors-default-theme-lime-4);\n          --chartist-color-8: var(--simple-colors-default-theme-lime-3);\n          --chartist-color-9: var(--simple-colors-default-theme-lime-2);\n          --chartist-color-10: var(--simple-colors-default-theme-orange-4);\n          --chartist-color-11: var(--simple-colors-default-theme-orange-3);\n          --chartist-color-12: var(--simple-colors-default-theme-orange-2);\n          --chartist-color-13: var(--simple-colors-default-theme-light-green-4);\n          --chartist-color-14: var(--simple-colors-default-theme-light-green-3);\n          --chartist-color-15: var(--simple-colors-default-theme-light-green-2);\n        }\n        :host([accent-color=\"amber\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-amber-4);\n          --chartist-color-2: var(--simple-colors-default-theme-amber-3);\n          --chartist-color-3: var(--simple-colors-default-theme-amber-2);\n          --chartist-color-4: var(--simple-colors-default-theme-orange-4);\n          --chartist-color-5: var(--simple-colors-default-theme-orange-3);\n          --chartist-color-6: var(--simple-colors-default-theme-orange-2);\n          --chartist-color-7: var(--simple-colors-default-theme-yellow-4);\n          --chartist-color-8: var(--simple-colors-default-theme-yellow-3);\n          --chartist-color-9: var(--simple-colors-default-theme-yellow-2);\n          --chartist-color-10: var(--simple-colors-default-theme-deep-orange-4);\n          --chartist-color-11: var(--simple-colors-default-theme-deep-orange-3);\n          --chartist-color-12: var(--simple-colors-default-theme-deep-orange-2);\n          --chartist-color-13: var(--simple-colors-default-theme-brown-4);\n          --chartist-color-14: var(--simple-colors-default-theme-brown-3);\n          --chartist-color-15: var(--simple-colors-default-theme-brown-2);\n        }\n        :host([accent-color=\"orange\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-orange-4);\n          --chartist-color-2: var(--simple-colors-default-theme-orange-3);\n          --chartist-color-3: var(--simple-colors-default-theme-orange-2);\n          --chartist-color-4: var(--simple-colors-default-theme-deep-orange-4);\n          --chartist-color-5: var(--simple-colors-default-theme-deep-orange-3);\n          --chartist-color-6: var(--simple-colors-default-theme-deep-orange-2);\n          --chartist-color-7: var(--simple-colors-default-theme-amber-4);\n          --chartist-color-8: var(--simple-colors-default-theme-amber-3);\n          --chartist-color-9: var(--simple-colors-default-theme-amber-2);\n          --chartist-color-10: var(--simple-colors-default-theme-red-4);\n          --chartist-color-11: var(--simple-colors-default-theme-red-3);\n          --chartist-color-12: var(--simple-colors-default-theme-red-2);\n          --chartist-color-13: var(--simple-colors-default-theme-brown-4);\n          --chartist-color-14: var(--simple-colors-default-theme-brown-3);\n          --chartist-color-15: var(--simple-colors-default-theme-brown-2);\n        }\n        :host([accent-color=\"deep-orange\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-deep-orange-4);\n          --chartist-color-2: var(--simple-colors-default-theme-deep-orange-3);\n          --chartist-color-3: var(--simple-colors-default-theme-deep-orange-2);\n          --chartist-color-4: var(--simple-colors-default-theme-red-4);\n          --chartist-color-5: var(--simple-colors-default-theme-red-3);\n          --chartist-color-6: var(--simple-colors-default-theme-red-2);\n          --chartist-color-7: var(--simple-colors-default-theme-orange-4);\n          --chartist-color-8: var(--simple-colors-default-theme-orange-3);\n          --chartist-color-9: var(--simple-colors-default-theme-orange-2);\n          --chartist-color-10: var(--simple-colors-default-theme-pink-4);\n          --chartist-color-11: var(--simple-colors-default-theme-pink-3);\n          --chartist-color-12: var(--simple-colors-default-theme-pink-2);\n          --chartist-color-13: var(--simple-colors-default-theme-brown-4);\n          --chartist-color-14: var(--simple-colors-default-theme-brown-3);\n          --chartist-color-15: var(--simple-colors-default-theme-brown-2);\n        }\n        :host([accent-color=\"brown\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-brown-5);\n          --chartist-color-2: var(--simple-colors-default-theme-brown-4);\n          --chartist-color-3: var(--simple-colors-default-theme-brown-3);\n          --chartist-color-4: var(--simple-colors-default-theme-brown-2);\n          --chartist-color-5: var(--simple-colors-default-theme-brown-1);\n          --chartist-color-6: var(--simple-colors-default-theme-red-5);\n          --chartist-color-7: var(--simple-colors-default-theme-red-4);\n          --chartist-color-8: var(--simple-colors-default-theme-red-3);\n          --chartist-color-9: var(--simple-colors-default-theme-red-2);\n          --chartist-color-10: var(--simple-colors-default-theme-red-1);\n          --chartist-color-11: var(--simple-colors-default-theme-deep-orange-5);\n          --chartist-color-12: var(--simple-colors-default-theme-deep-orange-4);\n          --chartist-color-13: var(--simple-colors-default-theme-deep-orange-3);\n          --chartist-color-14: var(--simple-colors-default-theme-deep-orange-2);\n          --chartist-color-15: var(--simple-colors-default-theme-deep-orange-1);\n        }\n        :host([accent-color=\"blue-grey\"]) {\n          --chartist-color-1: var(--simple-colors-default-theme-blue-grey-5);\n          --chartist-color-2: var(--simple-colors-default-theme-blue-grey-4);\n          --chartist-color-3: var(--simple-colors-default-theme-blue-grey-3);\n          --chartist-color-4: var(--simple-colors-default-theme-blue-grey-2);\n          --chartist-color-5: var(--simple-colors-default-theme-blue-grey-1);\n          --chartist-color-6: var(--simple-colors-default-theme-light-blue-5);\n          --chartist-color-7: var(--simple-colors-default-theme-light-blue-4);\n          --chartist-color-8: var(--simple-colors-default-theme-light-blue-3);\n          --chartist-color-9: var(--simple-colors-default-theme-light-blue-2);\n          --chartist-color-10: var(--simple-colors-default-theme-light-blue-1);\n          --chartist-color-11: var(--simple-colors-default-theme-grey-6);\n          --chartist-color-12: var(--simple-colors-default-theme-grey-5);\n          --chartist-color-13: var(--simple-colors-default-theme-grey-4);\n          --chartist-color-14: var(--simple-colors-default-theme-grey-3);\n          --chartist-color-15: var(--simple-colors-default-theme-grey-2);\n        }\n      </style>\n      <iron-ajax\n        auto=\"\"\n        url=\"{{dataSource}}\"\n        handle-as=\"text\"\n        last-response=\"{{rawData}}\"\n        on-response=\"handleResponse\"\n      ></iron-ajax>\n      <chartist-render\n        id=\"chartist\"\n        type=\"[[type]]\"\n        scale$=\"[[scale]]\"\n        chart-title$=\"[[chartTitle]]\"\n        chart-desc$=\"[[chartDesc]]\"\n        data$=\"[[data]]\"\n        on-chartist-render-ready=\"_ready\"\n        options$=\"{{options}}\"\n        responsive-options$=\"[[responsiveOptions]]\"\n      ></chartist-render>\n    "]);
  
      _templateObject_e8a7fe40e53211e9a0cfefb808989d41 = function _templateObject_e8a7fe40e53211e9a0cfefb808989d41() {
        return data;
      };
  
      return data;
    }
  
    /**
     * `lrndesign-chart-behaviors`
     * A line chart
     *
     * @polymer
     * @customElement
     * @demo demo/index.html
     * @demo demo/pie.html pie charts
     * @demo demo/bar.html bar charts
     * @demo demo/line.html line charts
     *
     */
    var LrndesignChartBehaviors =
    /*#__PURE__*/
    function (_SchemaBehaviors) {
      babelHelpers.inherits(LrndesignChartBehaviors, _SchemaBehaviors);
  
      function LrndesignChartBehaviors() {
        babelHelpers.classCallCheck(this, LrndesignChartBehaviors);
        return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(LrndesignChartBehaviors).apply(this, arguments));
      }
  
      babelHelpers.createClass(LrndesignChartBehaviors, [{
        key: "ready",
  
        /**
         * life cycle, element is ready
         */
        value: function ready() {
          babelHelpers.get(babelHelpers.getPrototypeOf(LrndesignChartBehaviors.prototype), "ready", this).call(this);
          var root = this;
          var checkReady = setInterval(function () {
            if (root.__dataReady) {
              root.$.chartist.makeChart();
              clearInterval(checkReady);
            }
          }, 1);
        }
        /**
         * Convert from csv text to an array in the table function
         */
  
      }, {
        key: "handleResponse",
        value: function handleResponse(e) {
          var root = this,
              raw = root.CSVtoArray(root.rawData);
          root.data = {
            labels: raw[0],
            series: root.type !== "pie" ? raw.slice(1, raw.length) : raw[1]
          };
          root.options = root._getOptions();
          root.__dataReady = true;
        }
        /**
         * override this with type-specific options
         */
  
      }, {
        key: "_getOptions",
        value: function _getOptions() {
          return {};
        }
        /**
         * Mix of solutions from https://stackoverflow.com/questions/8493195/how-can-i-parse-a-csv-string-with-javascript-which-contains-comma-in-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;
        }
        /**
         * life cycle, element is removed from the DOM
         */
        //disconnectedCallback() {}
  
      }], [{
        key: "template",
        // render function
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_e8a7fe40e53211e9a0cfefb808989d41());
        } // properties available to the custom element for data binding
  
      }, {
        key: "properties",
        get: function get() {
          return {
            /**
             * The chart title used for accessibility.
             */
            chartTitle: {
              type: String,
              value: null
            },
  
            /**
             * The chart description used for accessibility.
             */
            chartDesc: {
              type: String,
              value: ""
            },
  
            /**
             * 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,
              notify: true,
              value: "ct-octave"
            },
  
            /**
             * Type of chart.
             */
            type: {
              type: String,
              value: "pie"
            },
  
            /**
             * Data as an array.
             */
            data: {
              type: Array,
              notify: true,
              value: []
            },
  
            /**
             * Options as an array.
             */
            options: {
              type: Object,
              notify: true,
              value: {}
            },
  
            /**
             * Fixed width for the chart as a string (i.e. '100px' or '50%').
             */
            width: {
              type: String,
              value: undefined
            },
  
            /**
             * Fixed height for the chart as a string (i.e. '100px' or '50%').
             */
            height: {
              type: String,
              value: undefined
            },
  
            /**
             *  Padding-top for chart.
             */
            paddingTop: {
              type: Number,
              value: 15
            },
  
            /**
             *  Padding-right for chart.
             */
            paddingRight: {
              type: Number,
              value: 15
            },
  
            /**
             *  Padding-bottom for chart.
             */
            paddingBottom: {
              type: Number,
              value: 5
            },
  
            /**
             *  Padding-left for chart.
             */
            paddingLeft: {
              type: Number,
              value: 10
            },
  
            /**
             * Reverse data including labels, the series order as well as
             * the whole series data arrays.
             */
            reverseData: {
              type: Boolean,
              value: false
            },
  
            /**
             * The responsive options.
             * (See https://gionkunz.github.io/chartist-js/api-documentation.html.)
             */
            responsiveOptions: {
              type: Array,
              value: []
            },
  
            /**
             * Location of the CSV file.
             */
            dataSource: {
              type: String,
              notify: true
            },
  
            /**
             * Raw data pulled in from the csv file.
             */
            rawData: {
              type: String,
              notify: true,
              value: ""
            }
          };
        }
        /**
         * Store the tag name to make it easier to obtain directly.
         * @notice function name must be here for tooling to operate correctly
         */
  
      }, {
        key: "tag",
        get: function get() {
          return "lrndesign-chart-behaviors";
        } // haxProperty definition
  
      }, {
        key: "haxProperties",
        get: function get() {
          return {
            canScale: true,
            canPosition: true,
            canEditSource: false,
            gizmo: {
              title: "Pie Chart",
              description: "Creates an accessible pie chart based on a CSV.",
              icon: "editor:pie-chart",
              color: "green darken-4",
              groups: ["Data", "Presentation"],
              handles: [{
                type: "data",
                url: "csvFile"
              }],
              meta: {
                author: "LRNWebComponents"
              }
            },
            settings: {
              quick: [],
              configure: [{
                property: "data-source",
                title: "CSV File",
                description: "The URL for your CSV file.",
                inputMethod: "textfield",
                icon: "link",
                validationType: "url",
                required: true
              }, {
                property: "chartTitle",
                title: "Chart Title",
                description: "Accessible alt text for your chart.",
                inputMethod: "textfield",
                icon: "text-field",
                required: true
              }, {
                property: "chartDesc",
                title: "Chart Description",
                description: "Accessible description of your chart.",
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "width",
                title: "Width",
                description: "The width of the chart.",
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "height",
                title: "Height",
                description: "The height of the chart.",
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "paddingTop",
                title: "Padding-Top",
                description: "The padding at the top of the chart.",
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "paddingRight",
                title: "Padding-Right",
                description: "The padding at the right of the chart.",
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "paddingBottom",
                title: "Padding-Bottom",
                description: "The padding at the bottom of the chart.",
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "paddingLeft",
                title: "Padding-Left",
                description: "The padding at the left of the chart.",
                inputMethod: "textfield",
                icon: "text-field"
              }],
              advanced: [{
                property: "scale",
                title: "Scale Name",
                description: "The ratio of width:height of the chart (See https://gionkunz.github.io/chartist-js/getting-started.html#default-sass-settings for $ct-scales and $ct-scales-names).",
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "total",
                title: "Total of All Slices",
                description: "Optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts.",
                inputMethod: "textfield",
                icon: "text-field",
                validationType: "number"
              }, {
                property: "showLabel",
                title: "Show labels?",
                description: "Should chart labels be shown?",
                inputMethod: "boolean",
                icon: "check-box"
              }, {
                property: "labelOffset",
                title: "Label Offset",
                description: "Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center.",
                inputMethod: "textfield",
                icon: "text-field",
                validationType: "number"
              }, {
                property: "labelPosition",
                title: "Label Position",
                description: 'This option can be set to "inside", "outside" or "center". Positioned with "inside" the labels will be placed on half the distance of the radius to the border of the Pie by respecting the "Label Offset". The "outside" option will place the labels at the border of the pie and "center" will place the labels in the absolute center point of the chart. The "center" option only makes sense in conjunction with the "Label Offset" option.',
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "labelDirection",
                title: "Label Direction",
                description: 'Label direction can be "neutral", "explode" or "implode". The label\'s anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.',
                inputMethod: "textfield",
                icon: "text-field"
              }, {
                property: "reverseData",
                title: "Reverse Data",
                description: "Reverse data including labels, the series order as well as the whole series data arrays.",
                inputMethod: "boolean",
                icon: "check-box"
              }, {
                property: "ignoreEmptyValues",
                title: "Ignore empty values?",
                description: "Empty values will be ignored to avoid drawing unncessary slices and labels.",
                inputMethod: "boolean",
                icon: "check-box"
              }]
            }
          };
        }
      }]);
      return LrndesignChartBehaviors;
    }((0, _schemaBehaviors.SchemaBehaviors)(_simpleColors.SimpleColors));
  
    _exports.LrndesignChartBehaviors = LrndesignChartBehaviors;
    window.customElements.define(LrndesignChartBehaviors.tag, LrndesignChartBehaviors);
  });