{"version":3,"sources":["../src/elements/sortable.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../utilities/events';\nimport { stylesSortable } from '../styles/elements/sortable';\nimport type KemetSortableItem from './sortable-item';\n\nexport interface InterfaceSortableDragDetails {\n  event: DragEvent,\n  current: KemetSortableItem,\n  all: NodeListOf<KemetSortableItem>,\n}\n\nconst getMouseOffset = (event: DragEvent) => {\n  const target = event.target as HTMLElement;\n  const targetRect = target.getBoundingClientRect();\n  return {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n};\n\nconst getElementVerticalCenter = (element: HTMLElement) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-drag-start - Fires when an item starts to be moved.\n * @event kemet-drag-over - Fires when an item is moving to a new spot.\n * @event kemet-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItem;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event: DragEvent) {\n    this.sortableItem = event.target as KemetSortableItem;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n\n      emitEvent(this, 'kemet-drag-start', {\n        event,\n        current: this.sortableItem,\n        all: this.querySelectorAll('kemet-sortable-item'),\n      });\n    }, 0);\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n\n    const target = event.target as KemetSortableItem;\n\n    emitEvent(this, 'kemet-drag-over', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event: DragEvent) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,aAAa;AACrC,SAAS,gBAAgB;AAWzB,IAAM,iBAAiB,CAAC,UAAqB;AAC3C,QAAM,SAAS,MAAM;AACrB,QAAM,aAAa,OAAO,sBAAsB;AAChD,SAAO;AAAA,IACL,GAAG,MAAM,QAAQ,WAAW;AAAA,IAC5B,GAAG,MAAM,QAAQ,WAAW;AAAA,EAC9B;AACF;AAEA,IAAM,2BAA2B,CAAC,YAAyB;AACzD,QAAM,OAAO,QAAQ,sBAAsB;AAC3C,UAAQ,KAAK,SAAS,KAAK,OAAO;AACpC;AAeA,IAAqB,gBAArB,cAA2C,WAAW;AAAA,EAMpD,eAAe;AACb,aAAS;AAET,SAAK,iBAAiB,aAAa,WAAS,KAAK,gBAAgB,KAAK,GAAG,KAAK;AAC9E,SAAK,iBAAiB,aAAa,CAAC,UAAU;AAAE,YAAM,eAAe;AAAA,IAAG,CAAC;AAAA,EAC3E;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB,OAAkB;AAChC,SAAK,eAAe,MAAM;AAE1B,SAAK,iBAAiB,YAAY,mBAAiB,KAAK,eAAe,aAAa,GAAG,KAAK;AAC5F,SAAK,iBAAiB,WAAW,kBAAgB,KAAK,cAAc,YAAY,GAAG,KAAK;AAExF,eAAW,MAAM;AACf,WAAK,aAAa,QAAQ;AAE1B,gBAAU,MAAM,oBAAoB;AAAA,QAClC;AAAA,QACA,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,MAClD,CAAC;AAAA,IACH,GAAG,CAAC;AAAA,EACN;AAAA,EAEA,eAAe,OAAkB;AAC/B,UAAM,eAAe;AAErB,UAAM,SAAS,MAAM;AAErB,cAAU,MAAM,mBAAmB;AAAA,MACjC;AAAA,MACA,SAAS,KAAK;AAAA,MACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,IAClD,CAAC;AAED,QAAI,UAAU,OAAO,YAAY,uBAAuB;AACtD,YAAM,SAAS,eAAe,KAAK;AACnC,YAAM,UAAU,yBAAyB,MAAM;AAE/C,UAAI,OAAO,IAAI,SAAS;AACtB,aAAK,aAAa,KAAK,cAAc,OAAO,WAAW;AAAA,MACzD,OAAO;AACL,aAAK,aAAa,KAAK,cAAc,MAAM;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,cAAc,OAAkB;AAC9B,UAAM,eAAe;AACrB,SAAK,aAAa,QAAQ;AAE1B,cAAU,MAAM,kBAAkB;AAAA,MAChC;AAAA,MACA,SAAS,KAAK;AAAA,MACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,IAClD,CAAC;AAAA,EACH;AACF;AAnEqB,cACZ,SAAS,CAAC,cAAc;AAG/B;AAAA,EADC,MAAM;AAAA,GAHY,cAInB;AAJmB,gBAArB;AAAA,EADC,cAAc,gBAAgB;AAAA,GACV;","names":[]}