'use strict';require('./es.object.keys-258d7358.js');var utils=require('./utils-307b9d48.js'),BaseHoverBox=require('./BaseHoverBox-2dab352f.js'),normalizeComponent=require('./normalize-component-a3a558e7.js');require('./well-known-symbol-f1447879.js'),require('./object-keys-1798218f.js'),require('./typeof-6b9e62b8.js'),require('./unsupportedIterableToArray-40a00645.js'),require('./es.array.join-d5827db6.js'),require('./array-method-is-strict-eaf6e6bc.js'),require('./es.array.map-8b8b1771.js'),require('./array-iteration-ec368d38.js'),require('./function-bind-context-6bee5e36.js'),require('./array-species-create-6d7d1ca3.js'),require('./array-method-has-species-support-43b9931e.js'),require('./regexp-exec-abstract-9fcb71e6.js'),require('./string-multibyte-d552dade.js'),require('./regexp-flags-e93c043d.js'),require('./es.string.split-8e95587e.js'),require('./is-regexp-3d2f5c60.js'),require('./create-property-7113990d.js'),require('./es.object.to-string-6eda7e05.js'),require('./classof-b3ccaaa6.js'),require('./es.regexp.to-string-da3f9988.js'),require('./es.string.replace-0a90b609.js'),require('./es.array.includes-cbacb659.js'),require('./es.string.includes-fd50111e.js'),require('./es.array.sort-71ab4282.js'),require('./web.dom-collections.for-each-a9e9d823.js'),require('./dom-iterables-e2602b7e.js'),require('./BaseImageBox-f9a4958e.js'),require('./es.symbol.description-f8df06f1.js'),require('./set-to-string-tag-6fc79baa.js'),require('./BaseBox-b9c9c13c.js'),require('./BaseIcon-d76fa559.js'),require('./es.array.concat-cf822c2c.js'),require('./BaseImage-37dbfd3d.js'),require('./es.object.values-9cf0473c.js'),require('lazysizes');/**
 * Basic Chip component
 */

var script = {
  name: 'BaseChip',
  components: {
    BaseHoverBox: BaseHoverBox.B
  },
  model: {
    prop: 'entry',
    event: 'value-changed'
  },
  props: {
    /**
     * @model
     *
     * pass the text for the chip
     */
    entry: {
      type: String,
      required: true
    },

    /**
     * set if entry is a linked data entry and displayed with grey background
     */
    isLinked: {
      type: Boolean,
      default: true
    },

    /**
     * if a hover box is associated with the chip add all relevant properties here
     * (@see [BaseHoverBox](#basehoverbox) for details)
     */
    hoverBoxContent: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * set chip active (set color)
     */
    chipActive: {
      type: Boolean,
      default: false
    },

    /**
     * flag to specify if chip can be removed
     */
    isRemovable: {
      type: Boolean,
      default: true
    },

    /**
     * add some custom text styling
     */
    textStyling: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * define true if chip should be editable on click
     * <br>
     * CAVEAT: chips can not showhoverBoxContent as soon as it is editable
     * respectively - if both are set true edit functionality takes precedent - chip will
     *  not be draggable, hoverBoxContent will not be shown!
     */
    editable: {
      type: Boolean,
      default: false
    },
    assistiveText: {
      type: String,
      default: ''
    }
  },
  data: function data() {
    return {
      /**
       * internal represenation of string provided by parent
       * @type {string}
       */
      entryInt: '',

      /**
       * handle showing of HoverBox
       * @type {boolean}
       */
      showInfoBox: false
    };
  },
  computed: {
    hoverBoxEnabled: function hoverBoxEnabled() {
      return this.isLinked && !!Object.keys(this.hoverBoxContent).length;
    },
    internalId: function internalId() {
      return utils.c();
    }
  },
  watch: {
    entry: {
      handler: function handler(val) {
        if (val !== this.entryInt) {
          this.entryInt = val;
        }
      },
      immediate: true
    }
  },
  methods: {
    /**
     * update the internal text variable if chip is editable and
     * inform parent
     * @param {KeyboardEvent} event
     */
    updateText: function updateText(event) {
      var textString = event.target.innerText;

      if (this.editable && textString !== this.entryInt) {
        this.entryInt = textString;
        /**
         * if chip is editable value is updated with this event
         *
         * @event value-changed
         * @type {string}
         */

        this.$emit('value-changed', this.entryInt);
      }
    },
    clickAction: function clickAction(e) {
      if (!this.editable) {
        e.stopPropagation();
        /**
         * event emitted when chip is clicked
         *
         * @event clicked
         *
         */

        this.$emit('clicked');

        if (this.isLinked) {
          this.$emit('hoverbox-active', true);
          this.$refs.hoverBox.setPosition(e);
          this.showInfoBox = !this.showInfoBox;
        }
      }
    },
    moveBox: function moveBox(e) {
      if (this.hoverBoxEnabled && this.showInfoBox) {
        this.$refs.hoverBox.setPosition(e);
      }
    },
    hideBox: function hideBox() {
      if (this.hoverBoxEnabled) {
        /**
         * event indicating if hover box was set to show / hide
         *
         * @type {Boolean}
         *
         */
        this.$emit('hoverbox-active', false);
        this.showInfoBox = false;
      }
    },
    onMouseDown: function onMouseDown(event) {
      /**
       * event on mouse down, needed by base chips input to determine active chip
       *
       * @type {Event}
       *
       */
      this.$emit('mouse-down', event);
    },
    removeClicked: function removeClicked() {
      /**
       * triggered when the remove icon is clicked and returns the data behind the chip
       *
       * @event remove-entry
       * @type {Object}
       *
       */
      this.$emit('remove-entry', this.entryInt);
    }
  }
};var img = "data:image/svg+xml,%3c!-- Optimised/Generated by IcoMoon.io --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3ctitle%3eremove%3c/title%3e%3cpath d='M2.962 0.131l28.904 28.904-2.832 2.832-28.904-28.904 2.832-2.832z'%3e%3c/path%3e%3cpath d='M31.865 2.962l-28.904 28.904-2.832-2.832 28.904-28.904 2.832 2.832z'%3e%3c/path%3e%3c/svg%3e";
  var __$_require_static_icons_remove_svg__ = img;/* script */
var __vue_script__ = script;

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    class: ['base-chip', {
      'base-chip__removable': _vm.isRemovable
    }, {
      'base-chip__linked': _vm.isLinked
    }, {
      'base-chip__active': _vm.chipActive
    }]
  }, [_vm._ssrNode("<div" + _vm._ssrAttr("contenteditable", _vm.editable ? 'true' : false) + _vm._ssrAttr("aria-labelledby", _vm.assistiveText ? _vm.internalId + "_aria-label" : false) + " enterkeyhint=\"search\" class=\"base-chip__text\"" + _vm._ssrStyle(null, _vm.textStyling, null) + " data-v-19eead1e>" + _vm._ssrEscape("\n    " + _vm._s(_vm.entryInt) + "\n  ") + "</div> " + (_vm.assistiveText ? "<span" + _vm._ssrAttr("id", _vm.internalId + "_aria-label") + " class=\"hide\" data-v-19eead1e>" + _vm._ssrEscape("\n    " + _vm._s(_vm.assistiveText) + "\n  ") + "</span>" : "<!---->") + " " + (_vm.isRemovable ? "<div class=\"base-chip__icon\" data-v-19eead1e><img" + _vm._ssrAttr("src", __$_require_static_icons_remove_svg__) + " alt=\"remove\" class=\"base-chip__icon-img\" data-v-19eead1e></div>" : "<!---->") + " "), _c('base-hover-box', _vm._b({
    ref: "hoverBox",
    class: {
      'base-chip__hover-box__hidden': !_vm.hoverBoxEnabled || !_vm.showInfoBox
    }
  }, 'base-hover-box', _vm.hoverBoxContent, false))], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-19eead1e";
/* module identifier */

var __vue_module_identifier__ = "data-v-19eead1e";
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent.n({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

var BaseChip = __vue_component__;exports["default"]=BaseChip;