import './es.object.keys-6369b884.js';
import { c as createId } from './utils-21c04279.js';
import { B as BaseHoverBox } from './BaseHoverBox-8c86153e.js';
import { n as normalizeComponent } from './normalize-component-63e8c7a0.js';
import './export-ecf4b1cb.js';
import './object-keys-a5d351f7.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';
import './es.array.map-093cfbca.js';
import './array-iteration-dec5536e.js';
import './function-bind-context-b3fabf77.js';
import './array-species-create-afb281e6.js';
import './array-method-has-species-support-d96108b0.js';
import './regexp-exec-abstract-04d119fc.js';
import './string-multibyte-88926e02.js';
import './regexp-flags-b5fc4ddb.js';
import './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';
import './es.array.slice-e9c3dd03.js';
import './create-property-c00b5c27.js';
import './es.object.to-string-5a59fbfc.js';
import './classof-b10e7604.js';
import './es.regexp.to-string-784af81c.js';
import './es.string.replace-07eeebfe.js';
import './es.array.includes-1f433385.js';
import './es.string.includes-53dbb113.js';
import './es.array.sort-92cbfa54.js';
import './web.dom-collections.for-each-917714ef.js';
import './dom-iterables-b6f5ef3b.js';
import './BaseImageBox-0b824f00.js';
import './es.symbol.description-3b56bced.js';
import './set-to-string-tag-452fb9b0.js';
import './BaseBox-a4447dc8.js';
import './BaseIcon-d03b1fa2.js';
import './es.array.concat-9f3136dc.js';
import './BaseImage-7306e391.js';
import './es.object.values-a2198dd7.js';
import 'lazysizes';

/**
 * Basic Chip component
 */

var script = {
  name: 'BaseChip',
  components: {
    BaseHoverBox: BaseHoverBox
  },
  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 createId();
    }
  },
  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
    }]
  }, [_c('div', {
    ref: "chipText",
    staticClass: "base-chip__text",
    style: _vm.textStyling,
    attrs: {
      "contenteditable": _vm.editable ? 'true' : false,
      "aria-labelledby": _vm.assistiveText ? _vm.internalId + "_aria-label" : false,
      "enterkeyhint": "search"
    },
    on: {
      "blur": _vm.updateText,
      "keydown": function keydown($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        $event.preventDefault();
        return _vm.updateText.apply(null, arguments);
      },
      "click": function click($event) {
        $event.stopPropagation();
        return _vm.clickAction.apply(null, arguments);
      },
      "mousedown": _vm.onMouseDown,
      "mousemove": _vm.moveBox,
      "mouseleave": _vm.hideBox
    }
  }, [_vm._v("\n    " + _vm._s(_vm.entryInt) + "\n  ")]), _vm._v(" "), _vm.assistiveText ? _c('span', {
    staticClass: "hide",
    attrs: {
      "id": _vm.internalId + "_aria-label"
    }
  }, [_vm._v("\n    " + _vm._s(_vm.assistiveText) + "\n  ")]) : _vm._e(), _vm._v(" "), _vm.isRemovable ? _c('div', {
    staticClass: "base-chip__icon",
    on: {
      "click": function click($event) {
        $event.stopPropagation();
        return _vm.removeClicked.apply(null, arguments);
      }
    }
  }, [_c('img', {
    staticClass: "base-chip__icon-img",
    attrs: {
      "src": __$_require_static_icons_remove_svg__,
      "alt": "remove"
    }
  })]) : _vm._e(), _vm._v(" "), _c('base-hover-box', _vm._b({
    ref: "hoverBox",
    class: {
      'base-chip__hover-box__hidden': !_vm.hoverBoxEnabled || !_vm.showInfoBox
    }
  }, 'base-hover-box', _vm.hoverBoxContent, false))], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

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

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  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__;

export { BaseChip as default };
