Liferay.Loader.define("commerce-product-content-web@3.0.31/js/TagSelector.es", ['module', 'exports', 'require', 'frontend-js-metal-web$metal-component', 'frontend-js-metal-web$metal-soy', 'frontend-js-metal-web$metal-state', './TagSelector.soy'], function (module, exports, require) {
  var define = undefined;
  var global = window;
  {
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.default = exports.TagSelector = void 0;

    var _metalComponent = _interopRequireDefault(require("frontend-js-metal-web$metal-component"));

    var _metalSoy = _interopRequireDefault(require("frontend-js-metal-web$metal-soy"));

    var _metalState = require("frontend-js-metal-web$metal-state");

    var _TagSelector = _interopRequireDefault(require("./TagSelector.soy"));

    function _interopRequireDefault(obj) {
      return obj && obj.__esModule ? obj : { default: obj };
    }

    function _typeof(obj) {
      "@babel/helpers - typeof";
      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
        _typeof = function _typeof(obj) {
          return typeof obj;
        };
      } else {
        _typeof = function _typeof(obj) {
          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
        };
      }return _typeof(obj);
    }

    function _classCallCheck(instance, Constructor) {
      if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
      }
    }

    function _defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    function _createClass(Constructor, protoProps, staticProps) {
      if (protoProps) _defineProperties(Constructor.prototype, protoProps);if (staticProps) _defineProperties(Constructor, staticProps);return Constructor;
    }

    function _possibleConstructorReturn(self, call) {
      if (call && (_typeof(call) === "object" || typeof call === "function")) {
        return call;
      }return _assertThisInitialized(self);
    }

    function _assertThisInitialized(self) {
      if (self === void 0) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
      }return self;
    }

    function _getPrototypeOf(o) {
      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
      };return _getPrototypeOf(o);
    }

    function _inherits(subClass, superClass) {
      if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function");
      }subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } });if (superClass) _setPrototypeOf(subClass, superClass);
    }

    function _setPrototypeOf(o, p) {
      _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
        o.__proto__ = p;return o;
      };return _setPrototypeOf(o, p);
    }

    /**
     * TagSelector is a temporary Component wrapping the existing
     * AUI module liferay-commerce-frontend-asset-tag-selector
     */
    var TagSelector = /*#__PURE__*/function (_Component) {
      _inherits(TagSelector, _Component);

      function TagSelector() {
        _classCallCheck(this, TagSelector);

        return _possibleConstructorReturn(this, _getPrototypeOf(TagSelector).apply(this, arguments));
      }

      _createClass(TagSelector, [{
        key: "focusTagInput_",

        /**
         * Focuses the input field (tagInput ref) used for adding new tags.
         * @private
         */
        value: function focusTagInput_() {
          this.refs.tagInput.focus();
        }
        /**
         * Updates the calculated rule fields for `queryValues` every time a new
         * tag entry is added or removed to the selection
         * @protected
         */

      }, {
        key: "onEntriesChanged_",
        value: function onEntriesChanged_() {
          this.rule.queryValues = this.tagsSelector_.entries.keys.join();
        }
        /**
         * @inheritDoc
         */

      }, {
        key: "rendered",
        value: function rendered() {
          var _this = this;

          this.element.addEventListener('click', this.focusTagInput_.bind(this));
          AUI().use('liferay-commerce-frontend-asset-tag-selector', function () {
            var config = {
              allowAddEntry: true,
              contentBox: _this.element,
              eventName: _this.eventName,
              groupIds: _this.groupIds,
              hiddenInput: "#".concat(_this.refs.hiddenInput.getAttribute('id')),
              input: "#".concat(_this.refs.tagInput.getAttribute('id')),
              portletURL: _this.tagSelectorURL,
              tagNames: _this.rule.queryValues || ''
            };
            _this.tagsSelector_ = new Liferay.AssetTaglibTagsSelector(config);
            var entries = _this.tagsSelector_.entries;
            entries.after('add', _this.onEntriesChanged_, _this);
            entries.after('remove', _this.onEntriesChanged_, _this);

            _this.tagsSelector_.render();

            _this.element.parentNode.removeAttribute('tabindex');
          });
        }
      }]);

      return TagSelector;
    }(_metalComponent.default);

    exports.TagSelector = TagSelector;
    TagSelector.STATE = {
      /**
       * Name of the event that will be fired when the tag selector dialog
       * request being closed
       */
      eventName: _metalState.Config.string().value(''),

      /**
       * Array of group ids (sites) where tags will be searched.
       * It defaults to an empty array, which is the current site.
       */
      groupIds: _metalState.Config.string().value(''),

      /**
       * Id of the hidden input used to pass the selected tags
       */
      hiddenInput: _metalState.Config.string().value(''),

      /**
       * Number used for avoiding conflicts between different
       * instances of the component/portlet.
       */
      index: _metalState.Config.number().value(0),

      /**
       * String used for avoiding conflicts between different
       * instances of the component/portlet.
       */
      namespace: _metalState.Config.string().value(''),

      /**
       * Existing information of the form.
       * Currently only rule.queryValues is present.
       * @prop {string[]} queryValues Tags that are already selected.
       *  This property is updated as the user selects new tags.
       */
      rule: _metalState.Config.object().value({}),

      /**
       * When specified, this porlet (found for the given ID) will
       * be used for tag selection as a popup. If no ID is given,
       * the select button will not appear.
       */
      tagSelectorURL: _metalState.Config.string().value('')
    };

    _metalSoy.default.register(TagSelector, _TagSelector.default);

    var _default = TagSelector;
    exports.default = _default;
    //# sourceMappingURL=TagSelector.es.js.map
  }
});
//# sourceMappingURL=TagSelector.es.js.map