@c2n/reorder-list 0.0.3

package/README.md

@@ -0,0 +1,5 @@
+# Reorder List
+
+This component supports for drag-and-drop for changering the order of items in the list
+
+## Theme properties

package/dist/reorder-list.js

@@ -0,0 +1,473 @@
+import { nothing as E } from "lit/html.js";
+import { directive as k, PartType as D } from "lit/directive.js";
+import { AsyncDirective as M } from "lit/async-directive.js";
+import { unsafeCSS as $, LitElement as R, html as u } from "lit";
+import { query as S, queryAll as T, property as y, state as O, eventOptions as B, customElement as L } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { styleMap as F } from "lit/directives/style-map.js";
+const z = /* @__PURE__ */ new WeakMap();
+let x = 0;
+const v = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new WeakSet(), P = () => new Promise((i) => requestAnimationFrame(i)), C = (i, t) => {
+  const e = i - t;
+  return e === 0 ? void 0 : e;
+}, w = (i, t) => {
+  const e = i / t;
+  return e === 1 ? void 0 : e;
+}, b = { left: (i, t) => {
+  const e = C(i, t);
+  return { value: e, transform: e && `translateX(${e}px)` };
+}, top: (i, t) => {
+  const e = C(i, t);
+  return { value: e, transform: e && `translateY(${e}px)` };
+}, width: (i, t) => {
+  const e = w(i, t);
+  return { value: e, transform: e && `scaleX(${e})` };
+}, height: (i, t) => {
+  const e = w(i, t);
+  return { value: e, transform: e && `scaleY(${e})` };
+} }, U = { duration: 333, easing: "ease-in-out" }, _ = ["left", "top", "width", "height", "opacity", "color", "background"], A = /* @__PURE__ */ new WeakMap();
+class X extends M {
+  constructor(t) {
+    if (super(t), this.t = null, this.i = null, this.o = !0, this.shouldLog = !1, t.type === D.CHILD)
+      throw Error("The `animate` directive must be used in attribute position.");
+    this.createFinished();
+  }
+  createFinished() {
+    var t;
+    (t = this.resolveFinished) === null || t === void 0 || t.call(this), this.finished = new Promise((e) => {
+      this.h = e;
+    });
+  }
+  async resolveFinished() {
+    var t;
+    (t = this.h) === null || t === void 0 || t.call(this), this.h = void 0;
+  }
+  render(t) {
+    return E;
+  }
+  getController() {
+    return z.get(this.l);
+  }
+  isDisabled() {
+    var t;
+    return this.options.disabled || ((t = this.getController()) === null || t === void 0 ? void 0 : t.disabled);
+  }
+  update(t, [e]) {
+    var s;
+    const o = this.l === void 0;
+    return o && (this.l = (s = t.options) === null || s === void 0 ? void 0 : s.host, this.l.addController(this), this.element = t.element, A.set(this.element, this)), this.optionsOrCallback = e, (o || typeof e != "function") && this.u(e), this.render(e);
+  }
+  u(t) {
+    var e, s;
+    t = t != null ? t : {};
+    const o = this.getController();
+    o !== void 0 && ((t = { ...o.defaultOptions, ...t }).keyframeOptions = { ...o.defaultOptions.keyframeOptions, ...t.keyframeOptions }), (e = (s = t).properties) !== null && e !== void 0 || (s.properties = _), this.options = t;
+  }
+  v() {
+    const t = {}, e = this.element.getBoundingClientRect(), s = getComputedStyle(this.element);
+    return this.options.properties.forEach((o) => {
+      var r;
+      const n = (r = e[o]) !== null && r !== void 0 ? r : b[o] ? void 0 : s[o], l = Number(n);
+      t[o] = isNaN(l) ? n + "" : l;
+    }), t;
+  }
+  p() {
+    let t, e = !0;
+    return this.options.guard && (t = this.options.guard(), e = ((s, o) => {
+      if (Array.isArray(s)) {
+        if (Array.isArray(o) && o.length === s.length && s.every((r, n) => r === o[n]))
+          return !1;
+      } else if (o === s)
+        return !1;
+      return !0;
+    })(t, this.m)), this.o = this.l.hasUpdated && !this.isDisabled() && !this.isAnimating() && e && this.element.isConnected, this.o && (this.m = Array.isArray(t) ? Array.from(t) : t), this.o;
+  }
+  hostUpdate() {
+    var t;
+    typeof this.optionsOrCallback == "function" && this.u(this.optionsOrCallback()), this.p() && (this.g = this.v(), this.t = (t = this.t) !== null && t !== void 0 ? t : this.element.parentNode, this.i = this.element.nextSibling);
+  }
+  async hostUpdated() {
+    if (!this.o || !this.element.isConnected || this.options.skipInitial && !this.isHostRendered)
+      return;
+    let t;
+    this.prepare(), await P;
+    const e = this._(), s = this.A(this.options.keyframeOptions, e), o = this.v();
+    if (this.g !== void 0) {
+      const { from: r, to: n } = this.O(this.g, o, e);
+      this.log("measured", [this.g, o, r, n]), t = this.calculateKeyframes(r, n);
+    } else {
+      const r = v.get(this.options.inId);
+      if (r) {
+        v.delete(this.options.inId);
+        const { from: n, to: l } = this.O(r, o, e);
+        t = this.calculateKeyframes(n, l), t = this.options.in ? [{ ...this.options.in[0], ...t[0] }, ...this.options.in.slice(1), t[1]] : t, x++, t.forEach((d) => d.zIndex = x);
+      } else
+        this.options.in && (t = [...this.options.in, {}]);
+    }
+    this.animate(t, s);
+  }
+  resetStyles() {
+    var t;
+    this.P !== void 0 && (this.element.setAttribute("style", (t = this.P) !== null && t !== void 0 ? t : ""), this.P = void 0);
+  }
+  commitStyles() {
+    var t, e;
+    this.P = this.element.getAttribute("style"), (t = this.webAnimation) === null || t === void 0 || t.commitStyles(), (e = this.webAnimation) === null || e === void 0 || e.cancel();
+  }
+  reconnected() {
+  }
+  async disconnected() {
+    var t;
+    if (!this.o || (this.options.id !== void 0 && v.set(this.options.id, this.g), this.options.out === void 0))
+      return;
+    if (this.prepare(), await P(), (t = this.t) === null || t === void 0 ? void 0 : t.isConnected) {
+      const s = this.i && this.i.parentNode === this.t ? this.i : null;
+      if (this.t.insertBefore(this.element, s), this.options.stabilizeOut) {
+        const o = this.v();
+        this.log("stabilizing out");
+        const r = this.g.left - o.left, n = this.g.top - o.top;
+        getComputedStyle(this.element).position !== "static" || r === 0 && n === 0 || (this.element.style.position = "relative"), r !== 0 && (this.element.style.left = r + "px"), n !== 0 && (this.element.style.top = n + "px");
+      }
+    }
+    const e = this.A(this.options.keyframeOptions);
+    await this.animate(this.options.out, e), this.element.remove();
+  }
+  prepare() {
+    this.createFinished();
+  }
+  start() {
+    var t, e;
+    (e = (t = this.options).onStart) === null || e === void 0 || e.call(t, this);
+  }
+  didFinish(t) {
+    var e, s;
+    t && ((s = (e = this.options).onComplete) === null || s === void 0 || s.call(e, this)), this.g = void 0, this.animatingProperties = void 0, this.frames = void 0, this.resolveFinished();
+  }
+  _() {
+    const t = [];
+    for (let e = this.element.parentNode; e; e = e == null ? void 0 : e.parentNode) {
+      const s = A.get(e);
+      s && !s.isDisabled() && s && t.push(s);
+    }
+    return t;
+  }
+  get isHostRendered() {
+    const t = I.has(this.l);
+    return t || this.l.updateComplete.then(() => {
+      I.add(this.l);
+    }), t;
+  }
+  A(t, e = this._()) {
+    const s = { ...U };
+    return e.forEach((o) => Object.assign(s, o.options.keyframeOptions)), Object.assign(s, t), s;
+  }
+  O(t, e, s) {
+    t = { ...t }, e = { ...e };
+    const o = s.map((l) => l.animatingProperties).filter((l) => l !== void 0);
+    let r = 1, n = 1;
+    return o !== void 0 && (o.forEach((l) => {
+      l.width && (r /= l.width), l.height && (n /= l.height);
+    }), t.left !== void 0 && e.left !== void 0 && (t.left = r * t.left, e.left = r * e.left), t.top !== void 0 && e.top !== void 0 && (t.top = n * t.top, e.top = n * e.top)), { from: t, to: e };
+  }
+  calculateKeyframes(t, e, s = !1) {
+    var o;
+    const r = {}, n = {};
+    let l = !1;
+    const d = {};
+    for (const p in e) {
+      const c = t[p], g = e[p];
+      if (p in b) {
+        const N = b[p];
+        if (c === void 0 || g === void 0)
+          continue;
+        const m = N(c, g);
+        m.transform !== void 0 && (d[p] = m.value, l = !0, r.transform = `${(o = r.transform) !== null && o !== void 0 ? o : ""} ${m.transform}`);
+      } else
+        c !== g && c !== void 0 && g !== void 0 && (l = !0, r[p] = c, n[p] = g);
+    }
+    return r.transformOrigin = n.transformOrigin = s ? "center center" : "top left", this.animatingProperties = d, l ? [r, n] : void 0;
+  }
+  async animate(t, e = this.options.keyframeOptions) {
+    this.start(), this.frames = t;
+    let s = !1;
+    if (!this.isAnimating() && !this.isDisabled() && (this.options.onFrames && (this.frames = t = this.options.onFrames(this), this.log("modified frames", t)), t !== void 0)) {
+      this.log("animate", [t, e]), s = !0, this.webAnimation = this.element.animate(t, e);
+      const o = this.getController();
+      o == null || o.add(this);
+      try {
+        await this.webAnimation.finished;
+      } catch {
+      }
+      o == null || o.remove(this);
+    }
+    return this.didFinish(s), s;
+  }
+  isAnimating() {
+    var t, e;
+    return ((t = this.webAnimation) === null || t === void 0 ? void 0 : t.playState) === "running" || ((e = this.webAnimation) === null || e === void 0 ? void 0 : e.pending);
+  }
+  log(t, e) {
+    this.shouldLog && !this.isDisabled() && console.log(t, this.options.id, e);
+  }
+}
+const Y = k(X), j = ["top", "right", "bottom", "left"];
+class H extends M {
+  constructor(t) {
+    if (super(t), t.type !== D.ELEMENT)
+      throw Error("The `position` directive must be used in attribute position.");
+  }
+  render(t, e) {
+    return E;
+  }
+  update(t, [e, s]) {
+    var o;
+    return this.l === void 0 && (this.l = (o = t.options) === null || o === void 0 ? void 0 : o.host, this.l.addController(this)), this.j = t.element, this.S = e, this.C = s != null ? s : ["left", "top", "width", "height"], this.render(e, s);
+  }
+  hostUpdated() {
+    this.F();
+  }
+  F() {
+    var t, e;
+    const s = typeof this.S == "function" ? this.S() : (t = this.S) === null || t === void 0 ? void 0 : t.value, o = s.offsetParent;
+    if (s === void 0 || !o)
+      return;
+    const r = s.getBoundingClientRect(), n = o.getBoundingClientRect();
+    (e = this.C) === null || e === void 0 || e.forEach((l) => {
+      const d = j.includes(l) ? r[l] - n[l] : r[l];
+      this.j.style[l] = d + "px";
+    });
+  }
+}
+k(H);
+const q = `:host{position:relative}.c2-reorder-list-container{display:flex;flex-direction:column;position:relative;gap:var(--c2-reorder-list-container-gap, 0px);border-width:var(--c2-reorder-list-container-border-width, 0px);border-color:var(--c2-reorder-list-container-border-color, #bcbcc6);border-style:solid;border-radius:var(--c2-reorder-list-container-border-radius, 8px);padding:var(--c2-reorder-list-container-padding, 0px);margin:var(--c2-reorder-list-container-margin, 0px)}.c2-reorder-list-container .list-item{background:var(--c2-reorder-list-item-background, transparent);padding:var(--c2-reorder-list-item-padding, 0px);border-radius:initial;box-sizing:border-box;position:relative}.c2-reorder-list-container .list-item:not(:last-child){border-bottom:var(--c2-reorder-list-divider-height, 0px) solid var(--c2-reorder-list-divider-color, #bcbcc6)}.c2-reorder-list-container .list-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.c2-reorder-list-container .list-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.c2-reorder-list-container .list-item--reorderable{cursor:pointer}.c2-reorder-list-container .list-item--reorderable ::slotted(*){touch-action:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;user-select:none}.c2-reorder-list-container .dragging-placeholder{background-color:var(--c2-reorder-list-placeholder-background, transparent);z-index:1}.dragging-item{box-sizing:border-box;position:fixed;background-color:var(--c2-reorder-list-dragging-item-background, transparent);cursor:pointer;z-index:100000;display:none}.dragging-item.dragging-item--active{display:flex}
+`;
+var K = Object.defineProperty, W = Object.getOwnPropertyDescriptor, h = (i, t, e, s) => {
+  for (var o = s > 1 ? void 0 : s ? W(t, e) : t, r = i.length - 1, n; r >= 0; r--)
+    (n = i[r]) && (o = (s ? n(t, e, o) : n(o)) || o);
+  return s && o && K(t, e, o), o;
+};
+let a = class extends R {
+  constructor() {
+    super(...arguments), this.editable = !1, this.dragStartThreshold = 10, this.autoScrollDisabled = !1, this.placeholderSlotIndex = -1, this.placeholderSize = { width: "0px", height: "0px" }, this.childListObserver = null, this.hostBoundingClientRect = null, this.scrollableParent = null, this.scrollableParentRect = void 0, this.pickupPosition = { x: 0, y: 0 }, this.itemPositions = [], this.currentDraggingItem = null, this.currentDraggingSlotIndex = -1, this.skipAnimation = !1, this.hasStartedDragging = !1, this.scrollingTimer = 0, this.cacheMouseEvent = null, this.handleMouseMove = async (i) => {
+      var t;
+      if (!this.isUpdatePending)
+        if (this.hasStartedDragging) {
+          this.cacheMouseEvent = { pageX: i.pageX, pageY: i.pageY }, this.applyTransform(i);
+          const e = this.getItemIndexFromPointerPosition(i);
+          e > -1 && e !== this.placeholderSlotIndex && (this.placeholderSlotIndex = e);
+        } else {
+          const e = this.getPointerPosition(i), s = Math.abs(e.x - this.pickupPosition.x), o = Math.abs(e.y - this.pickupPosition.y);
+          if (!(s + o >= this.dragStartThreshold))
+            return;
+          this.hasStartedDragging = !0, this.skipAnimation = !0;
+          const n = this.getSlottedTargetIndex(i);
+          if (n == -1)
+            return;
+          const l = i.composedPath()[n], d = l.getAttribute("slot"), p = i.composedPath()[n + 2];
+          if (!d) {
+            this.stopDrag();
+            return;
+          }
+          this.pickupPosition = this.getPointerPosition(i);
+          const c = p.getBoundingClientRect(), g = l.getBoundingClientRect();
+          this.currentDraggingItem = l, this.placeholderSlotIndex = parseInt(d), this.currentDraggingSlotIndex = parseInt(d), this.placeholderSize = { width: `${g.width}px`, height: `${g.height}px` }, this.draggingElement.style.width = `${c.width}px`, this.draggingElement.style.height = `${c.height}px`, this.draggingElement.style.top = `${c.top}px`, this.draggingElement.style.left = `${c.left}px`, l.setAttribute("slot", "dragging-item"), this.applyTransform(i), this.updateItemPositions(), this.scrollableParent = this.getNearestScrollableParent(), this.scrollableParentRect = (t = this.scrollableParent) == null ? void 0 : t.getBoundingClientRect(), this.scrollableParent && this.scrollableParent.addEventListener("scroll", this.handleScroll, { passive: !0 });
+        }
+    }, this.handleScroll = () => {
+      if (this.cacheMouseEvent) {
+        this.updateItemPositions(), this.applyTransform(this.cacheMouseEvent);
+        const i = this.getItemIndexFromPointerPosition(this.cacheMouseEvent);
+        i > -1 && i !== this.placeholderSlotIndex && (this.placeholderSlotIndex = i);
+      }
+    }, this.handleMouseUp = () => {
+      if (this.hasStartedDragging && this.currentDraggingItem) {
+        const i = this.getSortChildrenBySlot(), t = this.placeholderSlotIndex;
+        for (let e = 0; e < i.length; e++) {
+          const s = parseInt(i[e].getAttribute("slot"));
+          t > this.currentDraggingSlotIndex && s > this.currentDraggingSlotIndex && s <= t && i[e].setAttribute("slot", (s - 1).toString()), t < this.currentDraggingSlotIndex && s >= t && s < this.currentDraggingSlotIndex && i[e].setAttribute("slot", (s + 1).toString());
+        }
+        this.currentDraggingItem.setAttribute("slot", this.placeholderSlotIndex.toString()), this.skipAnimation = !0, this.dispatchChangeEvent();
+      }
+      this.stopDrag();
+    }, this.startScrollInterval = (i) => {
+      this.stopScrolling();
+      const t = 2;
+      this.scrollingTimer = window.requestAnimationFrame(() => {
+        var e;
+        this.skipAnimation = !0, (e = this.scrollableParent) == null || e.scrollBy(0, i === "up" ? -t : t), this.startScrollInterval(i);
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.observeChildList(), this.updateSlotMapping();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.childListObserver && this.childListObserver.disconnect();
+  }
+  renderSlots() {
+    const i = { "list-item--reorderable": this.editable }, t = this.createPlaceHolder(i), e = this.getChildItems().length, s = Array.from({ length: e }).map((o, r) => {
+      const n = {
+        id: r,
+        inId: r,
+        skipInitial: !0,
+        disabled: this.skipAnimation || r === e - 1
+      };
+      return this.placeholderSlotIndex !== -1 && this.currentDraggingSlotIndex === r ? u`` : u`<div class="list-item ${f(i)}" ${Y(n)}>
+        <slot name="${r}"></slot>
+      </div>`;
+    });
+    return this.placeholderSlotIndex !== -1 && (this.placeholderSlotIndex === this.currentDraggingSlotIndex ? s[this.placeholderSlotIndex] = t : this.placeholderSlotIndex <= this.currentDraggingSlotIndex ? s.splice(this.placeholderSlotIndex, 0, t) : s.splice(this.placeholderSlotIndex + 1, 0, t)), s;
+  }
+  createPlaceHolder(i) {
+    return u` <div class="list-item placeholder ${f(i)}">
+      <slot name="placeholder">
+        <div class="dragging-placeholder" style=${F(this.placeholderSize)}></div>
+      </slot>
+    </div>`;
+  }
+  render() {
+    const i = { "dragging-item--active": this.placeholderSlotIndex > -1 };
+    return u`
+      <div class="c2-reorder-list-container" @mousedown=${this.handleMouseDown}>${this.renderSlots()}</div>
+      <div class="dragging-item ${f(i)}">
+        <slot name="dragging-item"></slot>
+      </div>
+    `;
+  }
+  handleMouseDown(i) {
+    const t = this.getSlottedTargetIndex(i);
+    if (t == -1)
+      return;
+    i.composedPath()[t].getAttribute("slot") && (this.hostBoundingClientRect = this.getBoundingClientRect(), this.pickupPosition = this.getPointerPosition(i), document.addEventListener("mousemove", this.handleMouseMove, { passive: !0 }), document.addEventListener("mouseup", this.handleMouseUp, { passive: !0 }));
+  }
+  getItemIndexFromPointerPosition(i) {
+    return this.itemPositions.findIndex((s) => {
+      const o = s.x + 5, r = s.y + 5, n = s.width - 5, l = s.height - 5;
+      return o < i.pageX && r < i.pageY && o + n > i.pageX && r + l > i.pageY;
+    });
+  }
+  dispatchChangeEvent() {
+    const i = this.getChildItems().map((t) => parseInt(t.getAttribute("slot")));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        cancelable: !0,
+        detail: i
+      })
+    );
+  }
+  stopDrag() {
+    document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), this.scrollableParent && this.scrollableParent.removeEventListener("scroll", this.handleScroll), this.pickupPosition = { x: 0, y: 0 }, this.itemPositions = [], this.hasStartedDragging = !1, this.placeholderSlotIndex = -1, this.scrollableParent = null, this.cacheMouseEvent = null;
+  }
+  getPointerPosition(i) {
+    var s, o;
+    const t = i.pageX - (((s = this.hostBoundingClientRect) == null ? void 0 : s.left) || 0), e = i.pageY - (((o = this.hostBoundingClientRect) == null ? void 0 : o.top) || 0);
+    return { x: t, y: e };
+  }
+  observeChildList() {
+    this.childListObserver = new MutationObserver(() => {
+      this.updateSlotMapping();
+    }), this.childListObserver.observe(this, { subtree: !1, childList: !0 });
+  }
+  async firstUpdated() {
+    this.updateSlotMapping();
+  }
+  updated(i) {
+    i.has("placeholderSlotIndex") && (this.skipAnimation = !1, this.startScrollingIfNecessary(), this.updateItemPositions()), super.updated(i);
+  }
+  startScrollingIfNecessary() {
+    if (this.placeholderElement && this.scrollableParent) {
+      const i = this.placeholderElement.getBoundingClientRect(), t = i.top;
+      t < this.scrollableParentRect.top ? this.startScrollInterval("up") : t + i.height > this.scrollableParentRect.bottom ? this.startScrollInterval("down") : this.stopScrolling();
+    }
+  }
+  stopScrolling() {
+    window.cancelAnimationFrame(this.scrollingTimer);
+  }
+  updateSlotMapping() {
+    const i = this.getChildItems();
+    let t = /* @__PURE__ */ new Map(), e = 0, s = !1;
+    for (const n of i) {
+      const l = n.getAttribute("slot");
+      l && (Number.isNaN(parseInt(l)) ? l === "dragging-item" && t.set(e, this.currentDraggingSlotIndex) : t.set(e, parseInt(l))), e++;
+    }
+    const o = Array.from(t.keys()).sort(
+      (n, l) => t.get(n) - t.get(l)
+    );
+    o.forEach((n, l) => {
+      t.get(n), i[n].setAttribute("slot", l.toString()), s = !0;
+    });
+    let r = o.length;
+    for (const n of i)
+      n.getAttribute("slot") || (n.setAttribute("slot", r.toString()), r++, s = !0);
+    s && (this.requestUpdate(), this.dispatchChangeEvent());
+  }
+  updateItemPositions() {
+    this.itemPositions = [], this.listItemElements.forEach((i) => {
+      this.itemPositions.push(i.getBoundingClientRect());
+    });
+  }
+  applyTransform(i) {
+    const t = this.getPointerPosition(i), e = t.x - this.pickupPosition.x, s = t.y - this.pickupPosition.y;
+    this.draggingElement.style.transform = this.getTransform(e, s);
+  }
+  getTransform(i, t) {
+    return `translate3d(${Math.round(i)}px, ${Math.round(t)}px, 0)`;
+  }
+  getSlottedTargetIndex(i) {
+    return i.composedPath().findIndex((t) => t instanceof Element && !!t.getAttribute("slot"));
+  }
+  getChildItems() {
+    const i = [];
+    for (const t of this.children) {
+      const e = t.getAttribute("slot");
+      (e === "dragging-item" || !e || !Number.isNaN(parseInt(e))) && i.push(t);
+    }
+    return i;
+  }
+  getSortChildrenBySlot() {
+    return this.getChildItems().filter((i) => i !== this.currentDraggingItem).sort((i, t) => {
+      const e = i.getAttribute("slot"), s = t.getAttribute("slot");
+      return parseInt(e || "") - parseInt(s || "");
+    });
+  }
+  getNearestScrollableParent(i = this) {
+    return i == null ? null : i.scrollHeight > i.clientHeight ? i : this.getNearestScrollableParent(i.parentNode);
+  }
+};
+a.styles = $(q);
+h([
+  S(".dragging-item")
+], a.prototype, "draggingElement", 2);
+h([
+  S(".placeholder")
+], a.prototype, "placeholderElement", 2);
+h([
+  S(".c2-reorder-list-container")
+], a.prototype, "containerElement", 2);
+h([
+  T(".list-item")
+], a.prototype, "listItemElements", 2);
+h([
+  y({ type: Boolean, reflect: !0 })
+], a.prototype, "editable", 2);
+h([
+  y({ type: Number })
+], a.prototype, "dragStartThreshold", 2);
+h([
+  y({ type: Boolean })
+], a.prototype, "autoScrollDisabled", 2);
+h([
+  O()
+], a.prototype, "placeholderSlotIndex", 2);
+h([
+  O()
+], a.prototype, "placeholderSize", 2);
+h([
+  B({ passive: !0 })
+], a.prototype, "handleMouseDown", 1);
+a = h([
+  L("c2-reorder-list")
+], a);
+export {
+  a as ReorderList
+};

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@c2n/reorder-list",
+  "version": "0.0.3",
+  "type": "module",
+  "main": "dist/reorder-list.js",
+  "exports": {
+    ".": "./dist/reorder-list.js"
+  },
+  "types": "types/src/index.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "reorder-list",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer",
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "@c2n/wc-utils": "0.0.3",
+    "@lit-labs/motion": "1.0.3",
+    "lit": "2.3.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "5.33.1",
+    "@typescript-eslint/parser": "5.33.1",
+    "eslint": "8.22.0",
+    "lit-analyzer": "1.2.1",
+    "prettier": "2.7.1",
+    "typescript": "4.7.4",
+    "vite": "3.0.8"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "printWidth": 160,
+    "tabWidth": 2,
+    "semi": false
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2020,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "env": {
+      "browser": true
+    },
+    "rules": {
+      "no-prototype-builtins": "off",
+      "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          "argsIgnorePattern": "^_"
+        }
+      ]
+    },
+    "overrides": [
+      {
+        "files": [
+          "rollup.config.js",
+          "web-test-runner.config.js"
+        ],
+        "env": {
+          "node": true
+        }
+      },
+      {
+        "files": [
+          "*_test.ts",
+          "**/custom_typings/*.ts",
+          "packages/labs/ssr/src/test/integration/tests/**",
+          "packages/labs/ssr/src/lib/util/parse5-utils.ts"
+        ],
+        "rules": {
+          "@typescript-eslint/no-explicit-any": "off"
+        }
+      }
+    ]
+  },
+  "gitHead": "da28e508ee15f842709ffa98937b20fef02a9e1d"
+}

package/types/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './reorder-list';
+//# sourceMappingURL=index.d.ts.map

package/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/types/src/reorder-list.d.ts

@@ -0,0 +1,67 @@
+import { LitElement, PropertyValueMap, TemplateResult } from 'lit';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface MutateMouseEvent {
+    pageX: number;
+    pageY: number;
+}
+export declare class ReorderList extends LitElement {
+    protected draggingElement: HTMLElement;
+    protected placeholderElement: HTMLElement;
+    protected containerElement: HTMLElement;
+    protected listItemElements: NodeListOf<HTMLDivElement>;
+    editable: boolean;
+    dragStartThreshold: number;
+    autoScrollDisabled: boolean;
+    private placeholderSlotIndex;
+    private placeholderSize;
+    private childListObserver;
+    private hostBoundingClientRect;
+    private scrollableParent;
+    private scrollableParentRect;
+    private pickupPosition;
+    private itemPositions;
+    private currentDraggingItem;
+    private currentDraggingSlotIndex;
+    private skipAnimation;
+    private hasStartedDragging;
+    private scrollingTimer;
+    private cacheMouseEvent;
+    /** Cached positions of scrollable parent elements. */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    renderSlots(): TemplateResult<1 | 2>[];
+    private createPlaceHolder;
+    render(): TemplateResult<1>;
+    private handleMouseDown;
+    handleMouseMove: (event: MouseEvent) => Promise<void>;
+    handleScroll: () => void;
+    private getItemIndexFromPointerPosition;
+    handleMouseUp: () => void;
+    private dispatchChangeEvent;
+    private stopDrag;
+    private getPointerPosition;
+    private observeChildList;
+    protected firstUpdated(): Promise<void>;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private startScrollingIfNecessary;
+    private startScrollInterval;
+    private stopScrolling;
+    private updateSlotMapping;
+    private updateItemPositions;
+    private applyTransform;
+    private getTransform;
+    private getSlottedTargetIndex;
+    private getChildItems;
+    private getSortChildrenBySlot;
+    private getNearestScrollableParent;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-reorder-list': ReorderList;
+    }
+}
+//# sourceMappingURL=reorder-list.d.ts.map

package/types/src/reorder-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorder-list.d.ts","sourceRoot":"","sources":["../../src/reorder-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAa,MAAM,KAAK,CAAA;AAMnF,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AACD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,qBACa,WAAY,SAAQ,UAAU;IAChB,SAAS,CAAC,eAAe,EAAG,WAAW,CAAA;IACzC,SAAS,CAAC,kBAAkB,EAAG,WAAW,CAAA;IAC5B,SAAS,CAAC,gBAAgB,EAAG,WAAW,CAAA;IACrD,SAAS,CAAC,gBAAgB,EAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEnC,QAAQ,UAAQ;IAChC,kBAAkB,SAAK;IACtB,kBAAkB,UAAQ;IAGvD,OAAO,CAAC,oBAAoB,CAAK;IAGjC,OAAO,CAAC,eAAe,CAAkC;IAEzD,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,sBAAsB,CAAuB;IACrD,OAAO,CAAC,gBAAgB,CAA2B;IACnD,OAAO,CAAC,oBAAoB,CAAiC;IAC7D,OAAO,CAAC,cAAc,CAAwB;IAC9C,OAAO,CAAC,aAAa,CAAgB;IAErC,OAAO,CAAC,mBAAmB,CAAuB;IAClD,OAAO,CAAC,wBAAwB,CAAK;IAErC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,cAAc,CAAI;IAC1B,OAAO,CAAC,eAAe,CAAgC;IACvD,sDAAsD;IAG7C,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAQrC,WAAW;IAiCX,OAAO,CAAC,iBAAiB;IAQhB,MAAM;IAWf,OAAO,CAAC,eAAe;IAcvB,eAAe,UAAiB,UAAU,mBA+CzC;IAED,YAAY,aAcX;IAED,OAAO,CAAC,+BAA+B;IAYvC,aAAa,aAkBZ;IAED,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,gBAAgB;cAOC,YAAY;cAKlB,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IASvG,OAAO,CAAC,yBAAyB;IAcjC,OAAO,CAAC,mBAAmB,CAQ1B;IAED,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAyCzB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,0BAA0B;IAWlC,OAAgB,MAAM,0BAAoB;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}