import { n as normalizeComponent, u as use, r as registerComponent } from './normalize-component-63e8c7a0.js';
import './es.array.includes-1f433385.js';
import './es.object.to-string-5a59fbfc.js';
import './es.string.includes-53dbb113.js';
import { a as vuedraggable_umd } from './vuedraggable.umd-8fe09713.js';
import BaseBoxButton from './BaseBoxButton-821f076c.js';
import './export-ecf4b1cb.js';
import './object-keys-a5d351f7.js';
import './classof-b10e7604.js';
import './is-regexp-5558fd03.js';
import './BaseIcon-d03b1fa2.js';
import './es.array.concat-9f3136dc.js';
import './array-species-create-afb281e6.js';
import './create-property-c00b5c27.js';
import './array-method-has-species-support-d96108b0.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';
import './BaseBox-a4447dc8.js';
import './BaseBoxTooltip-e7e1d52e.js';

/**
 * An Element for dropping files or other UI Elements into
 */

var script = {
  name: 'BaseDropBox',
  components: {
    BaseBoxButton: BaseBoxButton,
    Draggable: vuedraggable_umd
  },
  props: {
    /**
     * specify an icon to be displayed centered in the box
     */
    icon: {
      type: String,
      default: null
    },

    /**
     * if true a plus sign is displayed in front of the icon
     */
    showPlus: {
      type: Boolean,
      default: false
    },

    /**
     * the text displayed below the icon
     */
    text: {
      type: String,
      default: ''
    },

    /**
     * specify a potential subtext
     */
    subtext: {
      type: String,
      default: ''
    },

    /**
     * define the box size
     */
    boxSize: {
      type: Object,
      default: function _default() {
        return {
          width: '250px'
        };
      }
    },

    /**
     * define the ratio of width and height of the box
     * (in percent string, e.g. 1:1 --> '100', 1:2 --> '50')
     */
    boxRatio: {
      type: String,
      default: '100'
    },

    /**
     * specify the tag of the button
     */
    renderElementAs: {
      type: String,
      default: 'div'
    },

    /**
     * specify the type of drops <br>
     *     valid options: 'files'|'elements'
     */
    dropType: {
      type: String,
      default: 'files',
      validate: function validate(val) {
        return ['files', 'elements'].includes(val);
      }
    },

    /**
     * if the dropType is 'element', specify the element group name
     * this needs to match the group name of the draggable element that should
     * be dragged into this element
     */
    dropElementName: {
      type: String,
      default: ''
    },

    /**
     * if the dropType is 'element' specify a class name to limit interactions to a certain element
     */
    dragItemClass: {
      type: String,
      default: ''
    },

    /**
     * set button inactive
     */
    disabled: {
      type: Boolean,
      default: false
    },

    /**
     * show tooltip
     */
    showTooltip: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      dragAndDropCapable: false,
      isDragOver: false,
      dragList: []
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.dragAndDropCapable = this.determineDragAndDropCapable();

    if (this.dragAndDropCapable && this.dropType === 'files' && !this.disabled) {
      ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function (evt) {
        _this.$refs.fileform.addEventListener(evt, function (e) {
          e.preventDefault();
          e.stopPropagation();
        }, false);
      });
      this.$refs.fileform.addEventListener('drop', function (e) {
        _this.isDragOver = false;
        /**
         * event emitted when a file or an element is dropped on the box, emitting the type of event
         *
         * @event dropped-file
         * @type { DragEvent }
         */

        _this.$emit('dropped-file', e);
      });
      ['dragenter', 'dragleave'].forEach(function (evt) {
        _this.$refs.fileform.addEventListener(evt, function (originalEvent) {
          // kind of hacky solution to prevent target element to change color
          // only works when draggable prop is set on every draggable element on site
          // otherwise it will light up on file drop boxes!
          if (!originalEvent.dataTransfer.types.includes('draggable')) {
            _this.isDragOver = !_this.isDragOver;
          }
        });
      });
    }
  },
  methods: {
    onDragChange: function onDragChange(evt) {
      if (!this.isDragOver) {
        // check if a drag item class was specified otherwise always
        // set dragging true
        if (!this.dragItemClass) {
          this.isDragOver = true; // else check if cloned element contains class name
        } else if (evt.clone.className.includes(this.dragItemClass)) {
          this.isDragOver = true;
        }
      }

      return evt.newIndex;
    },
    determineDragAndDropCapable: function determineDragAndDropCapable() {
      var div = document.createElement('div');
      return ('draggable' in div || 'ondragstart' in div && 'ondrop' in div) && 'FormData' in window && 'FileReader' in window;
    },

    /**
     * method to get the dropped element id and emit it to parent
     */
    addEntry: function addEntry(event) {
      // check if box is for receiving elements (not files)
      if (this.dropType === 'elements') {
        // and check if item is currently still dragged over box (draggable event will also
        // fire if item was dragged outside again)
        if (this.isDragOver) {
          var draggedElementId = this.dragList[0].id;
          /**
           * event emitted when an element is dropped on the box, emitting the element data id
           *
           * @event dropped-element
           * @type { String }
           */

          this.$emit('dropped-element', draggedElementId);
        }

        this.dragList = []; // otherwise box stays highlighted on touch

        if (event.originalEvent.type === 'touchend') {
          this.isDragOver = false;
        }
      }
    },
    dragEnter: function dragEnter(event) {
      // trigger click event on touch devices
      if (event.pointerType === 'touch' && !this.disabled && !this.isDragOver) {
        this.$emit('clicked', event);
      }
    },
    dragLeave: function dragLeave(event) {
      // to prevent trigger when it is touch device and element was just dropped into box
      if (!(event.pointerType === 'touch' && !event.relatedTarget)) {
        this.isDragOver = false;
      }
    },
    onClicked: function onClicked(event) {
      // on touch devices the click event is handled with dragEnter() due problems on iOS Safari
      if ('ontouchstart' in window || navigator.msMaxTouchPoints > 0) {
        return;
      }
      /**
       * Triggered when the box is clicked
       *
       * @event clicked
       * @type {Event}
       */


      if (!this.disabled) {
        this.$emit('clicked', event);
      }
    },
    onTooltip: function onTooltip(event) {
      /**
       * Triggered when the box is clicked
       *
       * @event clicked
       * @type {Event}
       */
      this.$emit('clicked', event);
    }
  }
};

/* script */
var __vue_script__ = script;
/* template */

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

  var _h = _vm.$createElement;

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

  return _c('base-box-button', _vm._b({
    class: ['base-drop-box', {
      'base-box-button-disabled': _vm.disabled
    }, {
      'is-drag-over': _vm.isDragOver
    }],
    attrs: {
      "box-ratio": _vm.boxRatio,
      "render-element-as": _vm.renderElementAs,
      "disabled": _vm.disabled
    },
    on: {
      "clicked": _vm.onClicked,
      "onTooltip": _vm.onTooltip
    }
  }, 'base-box-button', _vm.$props, false), [_c('div', {
    staticClass: "base-drop-box-inner"
  }, [_vm.dropType === 'elements' ? _c('draggable', {
    staticClass: "base-drop-box-drag-area",
    attrs: {
      "sort": false,
      "group": _vm.dropElementName,
      "on-change": _vm.onDragChange,
      "ghost-class": "base-drop-box-ghost"
    },
    on: {
      "add": _vm.addEntry
    },
    model: {
      value: _vm.dragList,
      callback: function callback($$v) {
        _vm.dragList = $$v;
      },
      expression: "dragList"
    }
  }, [_c('div', {
    staticClass: "base-drop-box-drag-area",
    on: {
      "dragleave": _vm.dragLeave,
      "pointerenter": _vm.dragEnter,
      "pointerleave": _vm.dragLeave
    }
  }, _vm._l(_vm.dragList, function (item) {
    return _c('div', {
      key: item.id,
      staticClass: "base-drop-box-cloned-items"
    }, [_vm._v("\n          " + _vm._s(item) + "\n        ")]);
  }), 0)]) : _c('form', {
    ref: "fileform"
  })], 1)]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-62c857ff";
/* 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 BaseDropBox = __vue_component__;

var Plugin = {
  install: function install(Vue) {
    registerComponent(Vue, BaseDropBox);
  }
};
use(Plugin);

export { BaseDropBox, Plugin as default };
