{"version":3,"sources":["../src/elements/draggable.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-draggable\n * @summary A draggable element with the ability to remember its position.\n *\n * @prop {string} memory - A unique identifier used to store the element's position in local storage.\n * @prop {string} top - The elements top position in pixels.\n * @prop {string} left - The element's left position in pixels.\n * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.\n *\n * @event kemet-start\n * @event kemet-stop\n *\n */\n\n@customElement('kemet-draggable')\nexport default class KemetDraggable extends LitElement {\n  static styles = [css`\n    :host {\n      display: inline-block;\n    }\n\n    #draggable {\n      position: absolute;\n    }\n  `];\n\n  @property({ type: String })\n  memory: string;\n\n  @property({ type: String })\n  top: string = 'auto';\n\n  @property({ type: String })\n  left: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  /** @internal */\n  @state()\n  position1: number;\n\n  /** @internal */\n  @state()\n  position2: number;\n\n  /** @internal */\n  @state()\n  position3: number;\n\n  /** @internal */\n  @state()\n  position4: number;\n\n  /** @internal */\n  @state()\n  mouseMove: (event: MouseEvent) => void;\n\n  /** @internal */\n  @state()\n  mouseUp: () => void;\n\n  /** @internal */\n  @query('#draggable')\n  draggableElement: HTMLElement;\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.position1 = 0;\n    this.position2 = 0;\n    this.position3 = 0;\n    this.position4 = 0;\n    this.mouseMove = event => this.drag(event);\n    this.mouseUp = () => this.stopDrag();\n\n    const savedPosition = JSON.parse(localStorage.getItem(this.memory));\n\n    if (savedPosition) {\n      this.top = savedPosition.top;\n      this.left = savedPosition.left;\n    }\n\n    if (this.measure) {\n      this.measureContent();\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"draggable\" @mousedown=${(event: MouseEvent) => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  startDrag(event: MouseEvent) {\n    if (event) {\n      event.preventDefault();\n\n      this.position3 = event.clientX;\n      this.position4 = event.clientY;\n    }\n\n    document.addEventListener('mouseup', this.mouseUp);\n    document.addEventListener('mousemove', this.mouseMove);\n\n    emitEvent(this, 'kemet-start', this);\n  }\n\n  drag(event: MouseEvent) {\n    event.preventDefault();\n\n    this.position1 = this.position3 - event.clientX;\n    this.position2 = this.position4 - event.clientY;\n    this.position3 = event.clientX;\n    this.position4 = event.clientY;\n\n    if (this.draggableElement) {\n      this.top = `${this.draggableElement.offsetTop - this.position2}px`;\n      this.left = `${this.draggableElement.offsetLeft - this.position1}px`;\n    }\n  }\n\n  stopDrag() {\n    document.removeEventListener('mouseup', this.mouseUp);\n    document.removeEventListener('mousemove', this.mouseMove);\n\n    if (this.memory) {\n      const savedPosition = {\n        top: this.top,\n        left: this.left,\n      };\n\n      localStorage.setItem(this.memory, JSON.stringify(savedPosition));\n    }\n\n    emitEvent(this, 'kemet-stop', this);\n  }\n\n  measureContent() {\n    this.style.width = `${this.draggableElement?.offsetWidth}px`;\n    this.style.height = `${this.draggableElement?.offsetHeight}px`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-draggable': KemetDraggable\n  }\n}\n"],"mappings":"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","names":[]}