import { Component, Element, h, Host, Prop, State } from '@stencil/core';
export class DvnDraggableBox {
  constructor() {
    this.isDraggingOver = false;
    this.dragEnterCount = 0;
  }
  render() {
    return (h(Host, null,
      h("div", { class: { 'has-drag-over': this.isDraggingOver }, onDragOver: e => e.preventDefault(), onDragEnter: () => {
          this.isDraggingOver = true;
          this.dragEnterCount = this.dragEnterCount + 1;
        }, onDragLeave: () => {
          if (this.dragEnterCount <= 1) {
            this.isDraggingOver = false;
          }
          this.dragEnterCount = this.dragEnterCount - 1;
        }, onDrop: () => {
          this.isDraggingOver = false;
          this.dragEnterCount = 0;
          this.onDrop();
        } },
        h("slot", null))));
  }
  static get is() { return "dvn-droppable-box"; }
  static get originalStyleUrls() { return {
    "$": ["./dvn-droppable-box.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-droppable-box.css"]
  }; }
  static get properties() { return {
    "onDrop": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "on-drop",
      "reflect": false
    }
  }; }
  static get states() { return {
    "isDraggingOver": {},
    "dragEnterCount": {}
  }; }
  static get elementRef() { return "el"; }
}
