define(["exports", "../../../../@polymer/polymer/polymer-element.js", "../../simple-colors.js", "./simple-colors-swatch-info.js", "../../../simple-modal/lib/simple-modal-template.js"], function (_exports, _polymerElement, _simpleColors, _simpleColorsSwatchInfo, _simpleModalTemplate) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.simpleColorsSwatches = void 0;

  function _templateObject_615dd0c0c3a111e99204fd28bf05b7e9() {
    var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"simple-colors-shared-styles\">\n        :host {\n          display: block;\n          margin: 15px 0;\n        }\n        :host([hidden]) {\n          display: none;\n        }\n        :host simple-modal-template {\n          --simple-modal-titlebar-color: var(--simple-colors-swatch-contrast);\n          --simple-modal-titlebar-background: var(--simple-colors-swatch-color);\n        }\n        :host .row {\n          display: flex;\n          align-items: stretch;\n        }\n        :host button {\n          width: calc(8% - 6px);\n          height: 80px;\n          margin: 3px;\n          border: 1px solid black;\n          border-radius: 3px;\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-end;\n          align-items: stretch;\n        }\n        :host button div {\n          margin: 0;\n          padding: 2px;\n          font-size: 10px;\n          background: black;\n          color: white;\n          width: calc(100% - 4px);\n        }\n        :host button:focus,\n        :host button:hover {\n          opacity: 0.7;\n          cursor: pointer;\n        }\n      </style>\n      <div>\n        <p>Click on the swatches above to learn more.</p>\n        <div class=\"rows\">\n          <template is=\"dom-repeat\" items=\"[[_getOptions(colors)]]\" as=\"color\">\n            <div class=\"row\">\n              <template is=\"dom-repeat\" items=\"[[colors.grey]]\">\n                <button\n                  id=\"[[color]]_[[index]]\"\n                  controls=\"swatchinfo\"\n                  style$=\"background-color: [[_getHex(color,index)]];\"\n                  title$=\"[[color]]-[[_getShade(index)]]\"\n                  on-click=\"_handleTap\"\n                >\n                  <div>[[color]]-[[_getShade(index)]]</div>\n                </button>\n              </template>\n            </div>\n          </template>\n        </div>\n        <simple-modal-template id=\"modal\" title=\"[[swatchName]]\">\n          <p slot=\"content\">\n            <simple-colors-swatch-info\n              swatch-id$=\"[[swatchId]]\"\n              swatch-name$=\"[[swatchName]]\"\n            >\n            </simple-colors-swatch-info>\n          </p>\n        </simple-modal-template>\n      </div>\n    "]);

    _templateObject_615dd0c0c3a111e99204fd28bf05b7e9 = function _templateObject_615dd0c0c3a111e99204fd28bf05b7e9() {
      return data;
    };

    return data;
  }

  /**
   * `simple-colors-swatches`
   * `A tool to document of all the colors in simple-colors`
   *
   * @microcopy - language worth noting:
   *  -
   *
   * @customElement
   * @polymer
   * @demo demo/colors.html demo
   * @see "../../simple-colors.js"
   * @see "../simple-colors-picker.js"
   */
  var simpleColorsSwatches =
  /*#__PURE__*/
  function (_SimpleColors) {
    babelHelpers.inherits(simpleColorsSwatches, _SimpleColors);

    function simpleColorsSwatches() {
      babelHelpers.classCallCheck(this, simpleColorsSwatches);
      return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(simpleColorsSwatches).apply(this, arguments));
    }

    babelHelpers.createClass(simpleColorsSwatches, [{
      key: "connectedCallback",

      /**
       * life cycle, element is afixed to the DOM
       */
      value: function connectedCallback() {
        babelHelpers.get(babelHelpers.getPrototypeOf(simpleColorsSwatches.prototype), "connectedCallback", this).call(this);
      }
      /**
       * life cycle, element is readt
       */

    }, {
      key: "ready",
      value: function ready() {
        babelHelpers.get(babelHelpers.getPrototypeOf(simpleColorsSwatches.prototype), "ready", this).call(this);
      }
      /**
       * gets the shade number for a hex code at a given index
       *
       * @param {number} index
       * @returns {number} the shade number
       */

    }, {
      key: "_getShade",
      value: function _getShade(index) {
        return parseInt(index) + 1;
      }
      /**
       * gets the hex code for the shade at a given color and index
       *
       * @param {string} the color name, eg. `red`
       * @param {number} index
       * @returns {number} the hex code
       */

    }, {
      key: "_getHex",
      value: function _getHex(color, index) {
        return this.colors[color][index];
      }
      /**
       * when a button is tapped, open the swatch info modal
       */

    }, {
      key: "_handleTap",
      value: function _handleTap(e) {
        this.swatchId = e.path[0].getAttribute("id");
        this.swatchName = e.path[0].getAttribute("title");
        this.$.modal.openModal(e.path[0]);
      }
      /**
       * gets the list of color names from the colors object
       *
       * @param {object} the colors object
       * @returns {array} the array of color names
       */

    }, {
      key: "_getOptions",
      value: function _getOptions(obj) {
        return Object.keys(obj);
      }
      /**
       * life cycle, element is removed from the DOM
       */
      //disconnectedCallback() {}

    }], [{
      key: "template",
      //render function
      get: function get() {
        return (0, _polymerElement.html)(_templateObject_615dd0c0c3a111e99204fd28bf05b7e9());
      }
      /**
       * properties available to the custom element for data binding
       */

    }, {
      key: "properties",
      get: function get() {
        return {
          /**
           * The id of the swatch (`color_index`)
           */
          swatchId: {
            name: "swatchId",
            type: "String",
            value: null
          },

          /**
           * The swatch name (`color-shade`)
           */
          swatchName: {
            name: "swatchName",
            type: "String",
            value: null
          }
        };
      }
      /**
       * gets simple-colors behaviors
       */

    }, {
      key: "behaviors",
      get: function get() {
        return [_simpleColors.SimpleColors];
      }
      /**
       * 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 "simple-colors-swatches";
      }
    }]);
    return simpleColorsSwatches;
  }(_simpleColors.SimpleColors);

  _exports.simpleColorsSwatches = simpleColorsSwatches;
  window.customElements.define(simpleColorsSwatches.tag, simpleColorsSwatches);
});