'use strict';require('./es.object.keys-c57f02bd.js');var utils=require('./utils-08ccde2c.js'),BaseHoverBox=require('./BaseHoverBox-e84234ac.js'),normalizeComponent=require('./normalize-component-d9981c57.js');require('./export-61511812.js'),require('./object-keys-12f2c5e5.js'),require('./typeof-6b9e62b8.js'),require('./unsupportedIterableToArray-40a00645.js'),require('./es.array.join-88750c41.js'),require('./array-method-is-strict-99341ee3.js'),require('./es.array.map-30953c40.js'),require('./array-iteration-f35df2b6.js'),require('./function-bind-context-e4685306.js'),require('./array-method-has-species-support-983ac207.js'),require('./regexp-exec-abstract-216cd44a.js'),require('./string-multibyte-a2dff6e3.js'),require('./regexp-flags-abc49c4a.js'),require('./es.string.split-98e29ede.js'),require('./is-regexp-d6f1551e.js'),require('./create-property-240c71a5.js'),require('./es.object.to-string-f27a75a8.js'),require('./classof-819fc780.js'),require('./es.regexp.to-string-5606f728.js'),require('./es.string.replace-25e9e098.js'),require('./es.array.includes-3990bfec.js'),require('./es.string.includes-ec03e639.js'),require('./es.array.sort-60060df6.js'),require('./web.dom-collections.for-each-721f3fb0.js'),require('./dom-iterables-e2602b7e.js'),require('./BaseImageBox-904d6172.js'),require('./es.symbol.description-8d069d88.js'),require('./set-to-string-tag-240bb3b0.js'),require('./BaseBox-1df1f27d.js'),require('./BaseIcon-2d6ac6a6.js'),require('vue-svgicon'),require('./BaseImage-16ce6a74.js'),require('./es.object.values-1f44a4ee.js'),require('./es.array.concat-820e1246.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,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70.87 70.87'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:%231d1d1b%3b%7d%3c/style%3e%3c/defs%3e%3ctitle%3eicons-collected%3c/title%3e%3crect class='cls-1' x='-9.83' y='31' width='90.53' height='8.87' transform='translate(35.43 -14.68) rotate(45)'/%3e%3crect class='cls-1' x='-9.83' y='31' width='90.53' height='8.87' transform='translate(85.54 35.43) rotate(135)'/%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;