text: define(["exports", "../../../../@polymer/polymer/polymer-element.js", "./rich-text-editor-button.js", "../../../simple-picker/simple-picker.js", "../../../es-global-bridge/es-global-bridge.js"], function (_exports, _polymerElement, _richTextEditorButton, _simplePicker, _esGlobalBridge) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.RichTextEditorPicker = void 0;
  
    function _templateObject_d17f6f30cf4a11e9b8b15bd4e98e0211() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"rich-text-editor-button-styles\">\n        :host {\n          margin: var(--rich-text-editor-button-margin);\n          --simple-picker-option: {\n            line-height: var(--simple-picker-option-size);\n            height: var(--simple-picker-option-size);\n            max-height: var(--simple-picker-option-size);\n          }\n        }\n      </style>\n      <simple-picker\n        id=\"button\"\n        allow-null$=\"[[allowNull]]\"\n        class=\"rtebutton\"\n        disabled$=\"[[super.disabled]]\"\n        controls$=\"[[super.controls]]\"\n        on-change=\"_pickerChange\"\n        tabindex=\"0\"\n        title-as-html$=\"[[titleAsHtml]]\"\n        options=\"[[options]]\"\n        value=\"{{value}}\"\n      >\n        <span id=\"label\" class$=\"[[super.labelStyle]]\">[[__label]]</span>\n      </simple-picker>\n      <paper-tooltip id=\"tooltip\" for=\"button\">[[__label]]</paper-tooltip>\n    "]);
  
      _templateObject_d17f6f30cf4a11e9b8b15bd4e98e0211 = function _templateObject_d17f6f30cf4a11e9b8b15bd4e98e0211() {
        return data;
      };
  
      return data;
    }
  
    /**
     * `rich-text-editor-picker`
     * `a picker for rich text editor (custom buttons can extend this)`
     *
     * @microcopy - language worth noting:
     *  -
     *
     * @customElement
     * @polymer
     */
    var RichTextEditorPicker =
    /*#__PURE__*/
    function (_RichTextEditorButton) {
      babelHelpers.inherits(RichTextEditorPicker, _RichTextEditorButton);
  
      function RichTextEditorPicker() {
        var _this;
  
        babelHelpers.classCallCheck(this, RichTextEditorPicker);
        _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(RichTextEditorPicker).call(this));
        _this.label = "Insert link";
        return _this;
      } // render function
  
  
      babelHelpers.createClass(RichTextEditorPicker, [{
        key: "_isToggled",
  
        /**
         * determines the value of the picker based on the selected range
         *
         * @param {object} the text selected range
         * @returns {boolean} whether the button is toggled
         *
         */
        value: function _isToggled(range) {
          var _ref;
  
          //get all the possible block selectors from the options
          var selectors = this.options ? (_ref = []).concat.apply(_ref, babelHelpers.toConsumableArray(this.options)) //flatten th eoptions array
          .map(function (option) {
            return option.value;
          }) //get all the values
          .filter( //remove the empty values
          function (option) {
            return option !== null && option !== "";
          } //stringify the list
          ).join(",") : null,
              //get the selected range parent
          parent = range !== null && range.commonAncestorContainer ? range.commonAncestorContainer.parentNode : null;
          this.$.button.value = this.command === "formatBlock" && selectors && parent && parent.closest(selectors) !== null ? parent.closest(selectors).tagName.toLowerCase() : null;
          return false;
        }
        /**
         * Handles default options loaded from an external js file
         */
  
      }, {
        key: "_setOptions",
        value: function _setOptions() {
          this.set("options", this._getPickerOptions(data, this.allowNull, this.icon));
        }
        /**
         * Picker change
         */
  
      }, {
        key: "_pickerChange",
        value: function _pickerChange(e) {
          var val = this.$.button.value;
          e.preventDefault();
  
          if (val !== null && this.range !== undefined && this.range !== null) {
            this.commandVal = this.$.button.value;
            this.doTextOperation();
  
            if (this.block !== true) {
              this.$.button.value = null;
              this.dispatchEvent(new CustomEvent("deselect", {
                detail: this
              }));
            }
          }
        }
        /**
         * Converts option data to picker option data;
         * can be overridden in extended elements
         *
         * @param {object} data about the option
         * @returns {object} picker dato for the option
         */
  
      }, {
        key: "_getOptionData",
        value: function _getOptionData(option) {
          return {
            alt: option.alt,
            icon: option.icon,
            style: option.style,
            value: option.value
          };
        }
        /**
         * gets a list of icons and load them in a format
         * that the simple-picker can take;
         * if no icons are provided, loads a list from iron-meta
         *
         * @param {array} a list of custom icons for the picker
         * @param {array} default list of icons for the picker
         * @param {boolean} allow a null value for the picker
         */
  
      }, {
        key: "_getPickerOptions",
        value: function _getPickerOptions() {
          var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
          var allowNull = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
          var icon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
          var items = [],
              cols = Math.sqrt(options.length) < 11 ? Math.ceil(Math.sqrt(options.length)) : 10;
  
          for (var i = 0; i < options.length; i++) {
            var row = Math.floor(i / cols),
                col = i - row * cols,
                _data = this._getOptionData(options[i]);
  
            if (items[row] === undefined || items[row] === null) items[row] = [];
            items[row][col] = _data;
          }
  
          return items;
        }
      }], [{
        key: "template",
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_d17f6f30cf4a11e9b8b15bd4e98e0211());
        } // properties available to the custom element for data binding
  
      }, {
        key: "properties",
        get: function get() {
          return {
            /**
             * Allow a null option to be selected?
             */
            allowNull: {
              name: "allowNull",
              type: Boolean,
              value: false
            },
  
            /**
             * The command used for document.execCommand.
             */
            command: {
              name: "command",
              type: String,
              value: "insertHTML"
            },
  
            /**
             * Optional icon for null value
             */
            icon: {
              name: "icon",
              type: String,
              value: null
            },
  
            /**
             * The command used for document.execCommand.
             */
            options: {
              name: "options",
              type: Array,
              value: [],
              notify: true
            },
  
            /**
             * Renders html as title. (Good for titles with HTML in them.)
             */
            titleAsHtml: {
              name: "titleAsHtml",
              type: Boolean,
              value: false
            },
  
            /**
             * The value
             */
            value: {
              name: "value",
              type: Object,
              value: null
            }
          };
        }
        /**
         * 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 "rich-text-editor-picker";
        }
      }]);
      return RichTextEditorPicker;
    }(_richTextEditorButton.RichTextEditorButton);
  
    _exports.RichTextEditorPicker = RichTextEditorPicker;
    window.customElements.define(RichTextEditorPicker.tag, RichTextEditorPicker);
  });