text: define(["exports", "../../@polymer/polymer/polymer-element.js", "../simple-colors-shared-styles/lib/simple-colors-styles.js", "../simple-colors-shared-styles/simple-colors-shared-styles.js"], function (_exports, _polymerElement, _simpleColorsStyles, _simpleColorsSharedStyles) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.SimpleColors = void 0;
  
    function _templateObject_8edabc20cf4a11e9b8b15bd4e98e0211() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"simple-colors-shared-styles\"></style>\n      <slot></slot>\n    "]);
  
      _templateObject_8edabc20cf4a11e9b8b15bd4e98e0211 = function _templateObject_8edabc20cf4a11e9b8b15bd4e98e0211() {
        return data;
      };
  
      return data;
    }
  
    /**
     * `simple-colors`
     * `a shared set of styles for @lrnwebcomponents`
     *
     * @microcopy - language worth noting:
     *  -
     *
     * @customElement
     * @polymer
     * @demo demo/index.html demo
     * @demo demo/how.html getting started
     * @demo demo/colors.html all of the colors
     * @demo demo/picker.html simple-colors-picker
     * @demo demo/extending.html extending simple-colors
     */
    var SimpleColors =
    /*#__PURE__*/
    function (_PolymerElement) {
      babelHelpers.inherits(SimpleColors, _PolymerElement);
      babelHelpers.createClass(SimpleColors, null, [{
        key: "template",
        // render function
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_8edabc20cf4a11e9b8b15bd4e98e0211());
        } // properties available to the custom element for data binding
  
      }, {
        key: "properties",
        get: function get() {
          return {
            /**
             * a selected accent-color: grey, red, pink, purple, etc.
             */
            accentColor: {
              name: "accentColor",
              type: String,
              value: "grey",
              reflectToAttribute: true,
              notify: true
            },
  
            /**
             * make the default theme dark?
             */
            dark: {
              name: "dark",
              type: Boolean,
              value: false,
              reflectToAttribute: true,
              notify: true
            },
  
            /**
             * make the default theme dark?
             */
            colors: {
              name: "colors",
              type: Object,
              value: window.SimpleColorsStyles.colors,
              notify: true
            },
            __utils: {
              type: Object
            }
          };
        }
      }, {
        key: "tag",
        get: function get() {
          return "simple-colors";
        }
      }]);
  
      function SimpleColors() {
        var _this;
  
        babelHelpers.classCallCheck(this, SimpleColors);
        _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(SimpleColors).call(this));
        _this.__utils = window.SimpleColorsStyles.requestAvailability();
        _this.__styles = window.SimpleColorsStyles.stylesheet;
        return _this;
      }
  
      babelHelpers.createClass(SimpleColors, [{
        key: "connectedCallback",
        value: function connectedCallback() {
          babelHelpers.get(babelHelpers.getPrototypeOf(SimpleColors.prototype), "connectedCallback", this).call(this); // ensure this only gets applied once even though shouldn't be possible
  
          if (!window.SimpleColorsStylesHead) {
            window.SimpleColorsStylesHead = true;
            document.head.appendChild(_simpleColorsSharedStyles.css.content);
          }
        }
        /**
         * gets the current shade
         *
         * @param {string} the shade
         * @param {number} the inverted shade
         */
  
      }, {
        key: "invertShade",
        value: function invertShade(shade) {
          return this.__utils.invertShade(shade);
        }
        /**
         * gets the color information of a given CSS variable or class
         *
         * @param {string} the CSS variable (eg. `--simple-colors-fixed-theme-red-3`) or a class (eg. `.simple-colors-fixed-theme-red-3-text`)
         * @param {object} an object that includes the theme, color, and shade information
         */
  
      }, {
        key: "getColorInfo",
        value: function getColorInfo(colorName) {
          return this.__utils.getColorInfo(colorName);
        }
        /**
         * returns a variable based on color name, shade, and fixed theme
         *
         * @param {string} the color name
         * @param {number} the color shade
         * @param {boolean} the color shade
         * @returns {string} the CSS Variable
         */
  
      }, {
        key: "makeVariable",
        value: function makeVariable() {
          var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "grey";
          var shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
          var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "default";
          return this.__utils.makeVariable(color = "grey", shade = 1, theme = "default");
        }
        /**
         * for large or small text given a color and its shade,
         * lists all the colors and shades that would be
         * WCAG 2.0 AA-compliant for contrast
         *
         * @param {boolean} large text? >= 18pt || (bold && >= 14pt)
         * @param {string} color name, e.g. "deep-purple"
         * @param {string} color shade, e.g. 3
         * @param {object} all of the WCAG 2.0 AA-compliant colors and shades
         */
  
      }, {
        key: "getContrastingColors",
        value: function getContrastingColors(colorName, colorShade, isLarge) {
          return this.__utils.getContrastingColors(colorName, colorShade, isLarge);
        }
        /**
         * for large or small text given a color and its shade,
         * lists all the shades of another color that would be
         * WCAG 2.0 AA-compliant for contrast
         *
         * @param {boolean} large text? >= 18pt || (bold && >= 14pt)
         * @param {string} color name, e.g. "deep-purple"
         * @param {string} color shade, e.g. 3
         * @param {string} contrasting color name, e.g. "grey"
         * @param {array} all of the WCAG 2.0 AA-compliant shades of the contrasting color
         */
  
      }, {
        key: "getContrastingShades",
        value: function getContrastingShades(isLarge, colorName, colorShade, contrastName) {
          return this.__utils.getContrastingShades(isLarge, colorName, colorShade, contrastName);
        }
        /**
         * determines if two shades are WCAG 2.0 AA-compliant for contrast
         *
         * @param {boolean} large text? >= 18pt || (bold && >= 14pt)
         * @param {string} color name, e.g. "deep-purple"
         * @param {string} color shade, e.g. 3
         * @param {string} contrasting color name, e.g. "grey"
         * @param {string} contrast shade, e.g. 12
         * @param {boolean} whether or not the contrasting shade is WCAG 2.0 AA-compliant
         */
  
      }, {
        key: "isContrastCompliant",
        value: function isContrastCompliant(isLarge, colorName, colorShade, contrastName, contrastShade) {
          return this.__utils.isContrastCompliant(isLarge, colorName, colorShade, contrastName, contrastShade);
        }
      }]);
      return SimpleColors;
    }(_polymerElement.PolymerElement);
  
    _exports.SimpleColors = SimpleColors;
    window.customElements.define(SimpleColors.tag, SimpleColors);
  });