monobill-mintui 0.6.612 → 0.6.613

package/dist/components/sortable/browser.js

@@ -0,0 +1,340 @@
+
+const __mintLoadStyle = (key, url) => {
+  if (typeof document === 'undefined') return
+  const href = new URL(url, import.meta.url).href
+  if ([...document.querySelectorAll('link[rel="stylesheet"]')].some(link => link.href === href)) return
+  if (document.querySelector('style[data-mint-ui-style="' + key + '"]') || document.querySelector('link[data-mint-ui-style="' + key + '"]')) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.dataset.mintUiStyle = key
+  document.head.append(link)
+}
+__mintLoadStyle('theme', '../../theme.css')
+__mintLoadStyle('sortable', '../../sortable.css')
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+//#region src/components/sortable/Sortable.ts
+var t = "mint-sortable-placeholder", n = "mint-sortable-dragging", r = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"direction",
+			"gap",
+			"text-align",
+			"align-content",
+			"scroll-max-height",
+			"disabled",
+			"handle-selector",
+			"scroll-sensitivity",
+			"scroll-speed",
+			"animation-duration",
+			"item-key-attribute"
+		];
+	}
+	constructor() {
+		super(), this._pointerId = null, this._dragEl = null, this._placeholder = null, this._listRoot = this, this._startIndex = 0, this._pointerStartX = 0, this._pointerStartY = 0, this._dragStartLeft = 0, this._dragStartTop = 0, this._scrollRaf = null, this._childObserver = null, this._pointerBoundRoot = null, this._restoreAfter = null, this._sortStatus = null, this._keyboardKeydownHandler = (e) => this._onKeyboardReorder(e), this._onListPointerDown = (e) => {
+			let t = e;
+			if (this._isDisabled() || this._pointerId !== null || t.button !== 0) return;
+			let n = t.target;
+			if (!n || !this.contains(n)) return;
+			let r = this._closestSortableItem(n);
+			if (!r || !this._listRoot.contains(r) || r.hasAttribute("data-sortable-disabled")) return;
+			let i = this._getHandleSelector();
+			if (i) {
+				let e = t.target.closest(i);
+				if (!e || !r.contains(e)) return;
+			}
+			t.preventDefault(), this._startDrag(t, r);
+		}, this._boundPointerMove = this._onPointerMove.bind(this), this._boundPointerUp = this._onPointerUp.bind(this), this._boundPointerCancel = this._onPointerCancel.bind(this);
+	}
+	connectedCallback() {
+		this.classList.add("mint-sortable"), this._syncInnerStackAttributes(), this._applyHostScrollAndLayout(), this.addEventListener("keydown", this._keyboardKeydownHandler), this._observeInnerStack();
+	}
+	disconnectedCallback() {
+		this._unobserveInnerStack(), this.removeEventListener("keydown", this._keyboardKeydownHandler), this._teardownDrag(), this._pointerBoundRoot &&= (this._pointerBoundRoot.removeEventListener("pointerdown", this._onListPointerDown), null);
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && (this._syncInnerStackAttributes(), this._applyHostScrollAndLayout());
+	}
+	_observeInnerStack() {
+		this._childObserver || (this._childObserver = new MutationObserver(() => {
+			this._pointerId === null && (this._syncInnerStackAttributes(), this._applyHostScrollAndLayout());
+		}), this._childObserver.observe(this, { childList: !0 }));
+	}
+	_unobserveInnerStack() {
+		this._childObserver &&= (this._childObserver.disconnect(), null);
+	}
+	_getInnerStack() {
+		for (let e = 0; e < this.children.length; e++) {
+			let t = this.children[e];
+			if (t.nodeType === Node.ELEMENT_NODE && t.tagName === "MINT-STACK") return t;
+		}
+		return null;
+	}
+	_resolveListRoot() {
+		return this._getInnerStack() ?? this;
+	}
+	_getItemKeyAttribute() {
+		return this.getAttribute("item-key-attribute")?.trim() || "data-sortable-id";
+	}
+	_collectOrderedKeys() {
+		let e = this._resolveListRoot(), n = this._getItemKeyAttribute(), r = [];
+		for (let i = 0; i < e.children.length; i++) {
+			let a = e.children[i];
+			if (a.nodeType !== Node.ELEMENT_NODE) continue;
+			let o = a;
+			o.classList.contains(t) || o.hasAttribute("data-mint-sortable-status") || r.push(o.getAttribute(n) ?? "");
+		}
+		return r;
+	}
+	_syncInnerStackAttributes() {
+		let e = this._getInnerStack();
+		if (!e) return;
+		let t = this.getDirection(), n = this.getGap(), r = this.getTextAlign();
+		e.setAttribute("direction", t), e.setAttribute("gap", String(n)), r ? e.setAttribute("text-align", r) : e.removeAttribute("text-align");
+		let i = this.getAlignContent();
+		i ? e.setAttribute("align-content", i) : e.removeAttribute("align-content");
+	}
+	_applyHostScrollAndLayout() {
+		this._listRoot = this._resolveListRoot();
+		let e = this.getAttribute("scroll-max-height");
+		e ? (this.style.maxHeight = e, this.style.overflowY = "auto", this.style.overflowX = "hidden", this.classList.add("mint-sortable-scrollable")) : (this.style.maxHeight = "", this.style.overflowY = "", this.style.overflowX = "", this.classList.remove("mint-sortable-scrollable"));
+		let t = this._getInnerStack();
+		this.classList.toggle("mint-sortable-has-inner-stack", !!t);
+		let n = this.getDirection(), r = this.getAlignContent(), i = Math.min(12, Math.max(1, Math.round(this.getGap()))), a = this.getTextAlign();
+		this.style.setProperty("--mint-sortable-direction", n === "horizontal" ? "row" : "column"), this.style.setProperty("--mint-sortable-gap", `${i * .25}rem`), this.style.setProperty("--mint-sortable-text-align", a || "initial"), this.style.setProperty("--mint-sortable-button-justify", a === "left" ? "flex-start" : a === "right" ? "flex-end" : "center");
+		let o = r ? r === "left" ? "flex-start" : r === "right" ? "flex-end" : "center" : "", s = n === "vertical" && o || "stretch", c = n === "horizontal" && o || "flex-start";
+		this.style.setProperty("--mint-sortable-cross-align", s), this.style.setProperty("--mint-sortable-main-align", c), this._ensureListPointerBinding(), this._syncKeyboardAccessibility();
+	}
+	_syncKeyboardAccessibility() {
+		let e = this._resolveListRoot();
+		e.hasAttribute("role") || e.setAttribute("role", "list"), this._sortStatus || (this._sortStatus = document.createElement("div"), this._sortStatus.className = "mint-sortable-status", this._sortStatus.setAttribute("role", "status"), this._sortStatus.setAttribute("aria-live", "polite"), this._sortStatus.setAttribute("aria-atomic", "true"), this._sortStatus.setAttribute("data-mint-sortable-status", ""), this.appendChild(this._sortStatus)), this._getLayoutChildren().forEach((e) => {
+			e.classList.contains(t) || (e.hasAttribute("role") || e.setAttribute("role", "listitem"), e.hasAttribute("tabindex") || (e.tabIndex = 0), e.setAttribute("aria-keyshortcuts", "Alt+ArrowUp Alt+ArrowDown"), e.hasAttribute("aria-roledescription") || e.setAttribute("aria-roledescription", "sortable item"));
+		});
+	}
+	_onKeyboardReorder(e) {
+		if (this._isDisabled() || !e.altKey || !["ArrowUp", "ArrowDown"].includes(e.key)) return;
+		let n = e.target instanceof Element ? e.target : null, r = n ? this._closestSortableItem(n) : null;
+		if (!r || r.hasAttribute("data-sortable-disabled")) return;
+		let i = this._getLayoutChildren().filter((e) => !e.classList.contains(t)), a = i.indexOf(r), o = a + (e.key === "ArrowUp" ? -1 : 1);
+		if (a < 0 || o < 0 || o >= i.length) return;
+		e.preventDefault();
+		let s = i[o];
+		e.key === "ArrowUp" ? this._listRoot.insertBefore(r, s) : this._listRoot.insertBefore(s, r), r.focus({ preventScroll: !0 });
+		let c = this._collectOrderedKeys(), l = this._indexOfItem(r), u = r.getAttribute("aria-label") || r.textContent?.trim().replace(/\s+/g, " ") || "Item";
+		this._sortStatus && (this._sortStatus.textContent = `${u} moved to position ${l + 1} of ${i.length}.`);
+		let d = {
+			oldIndex: a,
+			newIndex: l,
+			keys: c
+		};
+		this.dispatchEvent(new CustomEvent("mint-sortable-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: d
+		})), this.dispatchEvent(new CustomEvent("mint-sortable-order", {
+			bubbles: !0,
+			composed: !0,
+			detail: { keys: c }
+		}));
+	}
+	getDirection() {
+		return (this.getAttribute("direction") || "vertical") === "horizontal" ? "horizontal" : "vertical";
+	}
+	getGap() {
+		let e = this.getAttribute("gap") || "3", t = parseFloat(e);
+		return Number.isFinite(t) ? t : 3;
+	}
+	getTextAlign() {
+		let e = this.getAttribute("text-align") || "";
+		return [
+			"left",
+			"center",
+			"right",
+			"justify"
+		].includes(e) ? e : "";
+	}
+	getAlignContent() {
+		let e = (this.getAttribute("align-content") || "").trim().toLowerCase();
+		return e === "left" || e === "right" || e === "center" ? e : "";
+	}
+	_isDisabled() {
+		return this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+	}
+	_getHandleSelector() {
+		let e = this.getAttribute("handle-selector");
+		return e && e.trim() ? e.trim() : null;
+	}
+	_getScrollSensitivity() {
+		let e = parseFloat(this.getAttribute("scroll-sensitivity") || "48");
+		return Number.isFinite(e) ? e : 48;
+	}
+	_getScrollSpeed() {
+		let e = parseFloat(this.getAttribute("scroll-speed") || "12");
+		return Number.isFinite(e) ? e : 12;
+	}
+	_getAnimationDurationMs() {
+		let e = parseFloat(this.getAttribute("animation-duration") || "220");
+		return Number.isFinite(e) ? Math.max(0, e) : 220;
+	}
+	_ensureListPointerBinding() {
+		let e = this._resolveListRoot();
+		this._pointerBoundRoot !== e && (this._pointerBoundRoot && this._pointerBoundRoot.removeEventListener("pointerdown", this._onListPointerDown), e.addEventListener("pointerdown", this._onListPointerDown), this._pointerBoundRoot = e, this._listRoot = e);
+	}
+	_closestSortableItem(e) {
+		let r = e;
+		for (; r && r !== this._listRoot;) {
+			if (r.nodeType === Node.ELEMENT_NODE) {
+				let e = r;
+				if (e.classList.contains(t) || e.classList.contains(n)) return null;
+				if (r.parentElement === this._listRoot) return e;
+			}
+			r = r.parentElement;
+		}
+		return null;
+	}
+	_startDrag(e, r) {
+		this._listRoot = this._resolveListRoot(), this._restoreAfter = r.nextElementSibling, this._dragEl = r, this._pointerId = e.pointerId, this._startIndex = this._indexOfItem(r);
+		let i = r.getBoundingClientRect();
+		this._pointerStartX = e.clientX, this._pointerStartY = e.clientY, this._dragStartLeft = i.left, this._dragStartTop = i.top;
+		let a = document.createElement("div");
+		a.className = t, a.style.minHeight = `${i.height}px`, a.style.minWidth = `${i.width}px`, a.setAttribute("aria-hidden", "true"), this._placeholder = a, this._listRoot.insertBefore(a, r), r.classList.add(n), r.style.position = "fixed", r.style.left = `${i.left}px`, r.style.top = `${i.top}px`, r.style.width = `${i.width}px`, r.style.height = `${i.height}px`, r.style.margin = "0", r.style.zIndex = "10000", r.style.boxSizing = "border-box", r.style.pointerEvents = "none", r.style.touchAction = "none", r.style.willChange = "transform, left, top", r.setPointerCapture(e.pointerId);
+		let o = this._collectOrderedKeys(), s = {
+			index: this._startIndex,
+			keys: o
+		};
+		this.dispatchEvent(new CustomEvent("mint-sortable-start", {
+			bubbles: !0,
+			composed: !0,
+			detail: s
+		})), this.dispatchEvent(new CustomEvent("sort-start", {
+			bubbles: !0,
+			composed: !0,
+			detail: s
+		})), window.addEventListener("pointermove", this._boundPointerMove, { passive: !1 }), window.addEventListener("pointerup", this._boundPointerUp), window.addEventListener("pointercancel", this._boundPointerCancel);
+	}
+	_indexOfItem(e) {
+		let n = 0;
+		for (let r = 0; r < this._listRoot.children.length; r++) {
+			let i = this._listRoot.children[r];
+			if (i.nodeType !== Node.ELEMENT_NODE) continue;
+			let a = i;
+			if (!a.classList.contains(t)) {
+				if (a === e) return n;
+				n++;
+			}
+		}
+		return -1;
+	}
+	_getLayoutChildren() {
+		return Array.from(this._listRoot.children).filter((e) => e.nodeType === Node.ELEMENT_NODE && !e.hasAttribute("data-mint-sortable-status"));
+	}
+	_onPointerMove(e) {
+		if (e.pointerId !== this._pointerId || !this._dragEl || !this._placeholder) return;
+		e.preventDefault();
+		let t = e.clientX - this._pointerStartX, n = e.clientY - this._pointerStartY;
+		this._dragEl.style.left = `${this._dragStartLeft + t}px`, this._dragEl.style.top = `${this._dragStartTop + n}px`, this._autoScroll(e), this._maybeMovePlaceholder(e);
+	}
+	_autoScroll(e) {
+		let t = this;
+		if (!t.style.maxHeight) return;
+		let n = this._getScrollSensitivity(), r = this._getScrollSpeed(), i = t.getBoundingClientRect();
+		this._scrollRaf !== null && cancelAnimationFrame(this._scrollRaf), this._scrollRaf = requestAnimationFrame(() => {
+			this._scrollRaf = null;
+			let a = 0;
+			e.clientY < i.top + n ? a = -r : e.clientY > i.bottom - n && (a = r), a !== 0 && (t.scrollTop += a, this._maybeMovePlaceholder(e));
+		});
+	}
+	_maybeMovePlaceholder(e) {
+		let t = this._placeholder, n = this._dragEl;
+		if (!t || !n) return;
+		let r = this.getDirection() === "horizontal", i = r ? e.clientX : e.clientY, a = Array.from(this._listRoot.children).filter((e) => e.nodeType === Node.ELEMENT_NODE && e !== n && e !== t), o = null;
+		for (let e of a) {
+			let t = e.getBoundingClientRect();
+			if (i < (r ? t.left + t.width / 2 : t.top + t.height / 2)) {
+				o = e;
+				break;
+			}
+		}
+		let s = Array.from(this._listRoot.children).filter((e) => e.nodeType === Node.ELEMENT_NODE && e !== n), c = s.length > 0 && s[s.length - 1] === t;
+		(o ? !(t.nextSibling === o && t.parentNode === this._listRoot) : !c) && this._flipAnimate(() => {
+			o ? this._listRoot.insertBefore(t, o) : this._listRoot.appendChild(t);
+		});
+	}
+	_flipAnimate(e) {
+		let t = this._dragEl, n = this._getAnimationDurationMs(), r = this._getLayoutChildren().filter((e) => e !== t), i = /* @__PURE__ */ new Map();
+		r.forEach((e) => i.set(e, e.getBoundingClientRect())), e(), !(n <= 0) && r.forEach((e) => {
+			let t = i.get(e);
+			if (!t) return;
+			let r = e.getBoundingClientRect(), a = t.left - r.left, o = t.top - r.top;
+			Math.abs(a) < .5 && Math.abs(o) < .5 || (e.style.transition = "none", e.style.transform = `translate(${a}px, ${o}px)`, requestAnimationFrame(() => {
+				e.style.transition = `transform ${n}ms cubic-bezier(0.2, 0.8, 0.2, 1)`, e.style.transform = "";
+				let t = () => {
+					e.removeEventListener("transitionend", t), e.style.transition = "", e.style.transform = "";
+				};
+				e.addEventListener("transitionend", t, { once: !0 }), setTimeout(t, n + 40);
+			}));
+		});
+	}
+	_onPointerUp(e) {
+		e.pointerId === this._pointerId && this._finishDrag(!1);
+	}
+	_onPointerCancel(e) {
+		e.pointerId === this._pointerId && this._finishDrag(!0);
+	}
+	_finishDrag(e) {
+		let t = this._dragEl, r = this._placeholder;
+		if (!t || this._pointerId === null) {
+			this._teardownDrag();
+			return;
+		}
+		try {
+			t.releasePointerCapture(this._pointerId);
+		} catch {}
+		if (window.removeEventListener("pointermove", this._boundPointerMove), window.removeEventListener("pointerup", this._boundPointerUp), window.removeEventListener("pointercancel", this._boundPointerCancel), e) {
+			let e = this._restoreAfter;
+			e && e.parentNode === this._listRoot ? this._listRoot.insertBefore(t, e) : this._listRoot.appendChild(t);
+		} else r?.parentNode && this._listRoot.insertBefore(t, r);
+		r?.remove(), this._placeholder = null, t.classList.remove(n), t.style.cssText = "";
+		let i = this._indexOfItem(t), a = this._startIndex;
+		this._pointerId = null, this._dragEl = null, this._restoreAfter = null;
+		let o = this._collectOrderedKeys(), s = {
+			oldIndex: a,
+			newIndex: i,
+			cancelled: e,
+			keys: o
+		};
+		this.dispatchEvent(new CustomEvent("mint-sortable-end", {
+			bubbles: !0,
+			composed: !0,
+			detail: s
+		})), this.dispatchEvent(new CustomEvent("sort-stop", {
+			bubbles: !0,
+			composed: !0,
+			detail: s
+		})), !e && i !== a && (this.dispatchEvent(new CustomEvent("mint-sortable-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				oldIndex: a,
+				newIndex: i,
+				keys: o
+			}
+		})), this.dispatchEvent(new CustomEvent("mint-sortable-order", {
+			bubbles: !0,
+			composed: !0,
+			detail: { keys: o }
+		})));
+	}
+	_teardownDrag() {
+		if (this._scrollRaf !== null && (cancelAnimationFrame(this._scrollRaf), this._scrollRaf = null), window.removeEventListener("pointermove", this._boundPointerMove), window.removeEventListener("pointerup", this._boundPointerUp), window.removeEventListener("pointercancel", this._boundPointerCancel), this._dragEl) {
+			try {
+				this._pointerId !== null && this._dragEl.releasePointerCapture(this._pointerId);
+			} catch {}
+			this._dragEl.classList.remove(n), this._dragEl.style.cssText = "";
+		}
+		this._placeholder?.remove(), this._placeholder = null, this._dragEl = null, this._pointerId = null, this._restoreAfter = null;
+	}
+};
+customElements.get("mint-sortable") || e("mint-sortable", r);
+//#endregion
+export { r as default };

package/dist/components/sortable/index.cjs

@@ -0,0 +1 @@
+const e=require(`../chunks/register-element-tCL_F1YI.js`);var t=`mint-sortable-placeholder`,n=`mint-sortable-dragging`,r=class extends HTMLElement{static get observedAttributes(){return[`direction`,`gap`,`text-align`,`align-content`,`scroll-max-height`,`disabled`,`handle-selector`,`scroll-sensitivity`,`scroll-speed`,`animation-duration`,`item-key-attribute`]}constructor(){super(),this._pointerId=null,this._dragEl=null,this._placeholder=null,this._listRoot=this,this._startIndex=0,this._pointerStartX=0,this._pointerStartY=0,this._dragStartLeft=0,this._dragStartTop=0,this._scrollRaf=null,this._childObserver=null,this._pointerBoundRoot=null,this._restoreAfter=null,this._sortStatus=null,this._keyboardKeydownHandler=e=>this._onKeyboardReorder(e),this._onListPointerDown=e=>{let t=e;if(this._isDisabled()||this._pointerId!==null||t.button!==0)return;let n=t.target;if(!n||!this.contains(n))return;let r=this._closestSortableItem(n);if(!r||!this._listRoot.contains(r)||r.hasAttribute(`data-sortable-disabled`))return;let i=this._getHandleSelector();if(i){let e=t.target.closest(i);if(!e||!r.contains(e))return}t.preventDefault(),this._startDrag(t,r)},this._boundPointerMove=this._onPointerMove.bind(this),this._boundPointerUp=this._onPointerUp.bind(this),this._boundPointerCancel=this._onPointerCancel.bind(this)}connectedCallback(){this.classList.add(`mint-sortable`),this._syncInnerStackAttributes(),this._applyHostScrollAndLayout(),this.addEventListener(`keydown`,this._keyboardKeydownHandler),this._observeInnerStack()}disconnectedCallback(){this._unobserveInnerStack(),this.removeEventListener(`keydown`,this._keyboardKeydownHandler),this._teardownDrag(),this._pointerBoundRoot&&=(this._pointerBoundRoot.removeEventListener(`pointerdown`,this._onListPointerDown),null)}attributeChangedCallback(e,t,n){t!==n&&(this._syncInnerStackAttributes(),this._applyHostScrollAndLayout())}_observeInnerStack(){this._childObserver||(this._childObserver=new MutationObserver(()=>{this._pointerId===null&&(this._syncInnerStackAttributes(),this._applyHostScrollAndLayout())}),this._childObserver.observe(this,{childList:!0}))}_unobserveInnerStack(){this._childObserver&&=(this._childObserver.disconnect(),null)}_getInnerStack(){for(let e=0;e<this.children.length;e++){let t=this.children[e];if(t.nodeType===Node.ELEMENT_NODE&&t.tagName===`MINT-STACK`)return t}return null}_resolveListRoot(){return this._getInnerStack()??this}_getItemKeyAttribute(){return this.getAttribute(`item-key-attribute`)?.trim()||`data-sortable-id`}_collectOrderedKeys(){let e=this._resolveListRoot(),n=this._getItemKeyAttribute(),r=[];for(let i=0;i<e.children.length;i++){let a=e.children[i];if(a.nodeType!==Node.ELEMENT_NODE)continue;let o=a;o.classList.contains(t)||o.hasAttribute(`data-mint-sortable-status`)||r.push(o.getAttribute(n)??``)}return r}_syncInnerStackAttributes(){let e=this._getInnerStack();if(!e)return;let t=this.getDirection(),n=this.getGap(),r=this.getTextAlign();e.setAttribute(`direction`,t),e.setAttribute(`gap`,String(n)),r?e.setAttribute(`text-align`,r):e.removeAttribute(`text-align`);let i=this.getAlignContent();i?e.setAttribute(`align-content`,i):e.removeAttribute(`align-content`)}_applyHostScrollAndLayout(){this._listRoot=this._resolveListRoot();let e=this.getAttribute(`scroll-max-height`);e?(this.style.maxHeight=e,this.style.overflowY=`auto`,this.style.overflowX=`hidden`,this.classList.add(`mint-sortable-scrollable`)):(this.style.maxHeight=``,this.style.overflowY=``,this.style.overflowX=``,this.classList.remove(`mint-sortable-scrollable`));let t=this._getInnerStack();this.classList.toggle(`mint-sortable-has-inner-stack`,!!t);let n=this.getDirection(),r=this.getAlignContent(),i=Math.min(12,Math.max(1,Math.round(this.getGap()))),a=this.getTextAlign();this.style.setProperty(`--mint-sortable-direction`,n===`horizontal`?`row`:`column`),this.style.setProperty(`--mint-sortable-gap`,`${i*.25}rem`),this.style.setProperty(`--mint-sortable-text-align`,a||`initial`),this.style.setProperty(`--mint-sortable-button-justify`,a===`left`?`flex-start`:a===`right`?`flex-end`:`center`);let o=r?r===`left`?`flex-start`:r===`right`?`flex-end`:`center`:``,s=n===`vertical`&&o||`stretch`,c=n===`horizontal`&&o||`flex-start`;this.style.setProperty(`--mint-sortable-cross-align`,s),this.style.setProperty(`--mint-sortable-main-align`,c),this._ensureListPointerBinding(),this._syncKeyboardAccessibility()}_syncKeyboardAccessibility(){let e=this._resolveListRoot();e.hasAttribute(`role`)||e.setAttribute(`role`,`list`),this._sortStatus||(this._sortStatus=document.createElement(`div`),this._sortStatus.className=`mint-sortable-status`,this._sortStatus.setAttribute(`role`,`status`),this._sortStatus.setAttribute(`aria-live`,`polite`),this._sortStatus.setAttribute(`aria-atomic`,`true`),this._sortStatus.setAttribute(`data-mint-sortable-status`,``),this.appendChild(this._sortStatus)),this._getLayoutChildren().forEach(e=>{e.classList.contains(t)||(e.hasAttribute(`role`)||e.setAttribute(`role`,`listitem`),e.hasAttribute(`tabindex`)||(e.tabIndex=0),e.setAttribute(`aria-keyshortcuts`,`Alt+ArrowUp Alt+ArrowDown`),e.hasAttribute(`aria-roledescription`)||e.setAttribute(`aria-roledescription`,`sortable item`))})}_onKeyboardReorder(e){if(this._isDisabled()||!e.altKey||![`ArrowUp`,`ArrowDown`].includes(e.key))return;let n=e.target instanceof Element?e.target:null,r=n?this._closestSortableItem(n):null;if(!r||r.hasAttribute(`data-sortable-disabled`))return;let i=this._getLayoutChildren().filter(e=>!e.classList.contains(t)),a=i.indexOf(r),o=a+(e.key===`ArrowUp`?-1:1);if(a<0||o<0||o>=i.length)return;e.preventDefault();let s=i[o];e.key===`ArrowUp`?this._listRoot.insertBefore(r,s):this._listRoot.insertBefore(s,r),r.focus({preventScroll:!0});let c=this._collectOrderedKeys(),l=this._indexOfItem(r),u=r.getAttribute(`aria-label`)||r.textContent?.trim().replace(/\s+/g,` `)||`Item`;this._sortStatus&&(this._sortStatus.textContent=`${u} moved to position ${l+1} of ${i.length}.`);let d={oldIndex:a,newIndex:l,keys:c};this.dispatchEvent(new CustomEvent(`mint-sortable-change`,{bubbles:!0,composed:!0,detail:d})),this.dispatchEvent(new CustomEvent(`mint-sortable-order`,{bubbles:!0,composed:!0,detail:{keys:c}}))}getDirection(){return(this.getAttribute(`direction`)||`vertical`)===`horizontal`?`horizontal`:`vertical`}getGap(){let e=this.getAttribute(`gap`)||`3`,t=parseFloat(e);return Number.isFinite(t)?t:3}getTextAlign(){let e=this.getAttribute(`text-align`)||``;return[`left`,`center`,`right`,`justify`].includes(e)?e:``}getAlignContent(){let e=(this.getAttribute(`align-content`)||``).trim().toLowerCase();return e===`left`||e===`right`||e===`center`?e:``}_isDisabled(){return this.hasAttribute(`disabled`)&&this.getAttribute(`disabled`)!==`false`}_getHandleSelector(){let e=this.getAttribute(`handle-selector`);return e&&e.trim()?e.trim():null}_getScrollSensitivity(){let e=parseFloat(this.getAttribute(`scroll-sensitivity`)||`48`);return Number.isFinite(e)?e:48}_getScrollSpeed(){let e=parseFloat(this.getAttribute(`scroll-speed`)||`12`);return Number.isFinite(e)?e:12}_getAnimationDurationMs(){let e=parseFloat(this.getAttribute(`animation-duration`)||`220`);return Number.isFinite(e)?Math.max(0,e):220}_ensureListPointerBinding(){let e=this._resolveListRoot();this._pointerBoundRoot!==e&&(this._pointerBoundRoot&&this._pointerBoundRoot.removeEventListener(`pointerdown`,this._onListPointerDown),e.addEventListener(`pointerdown`,this._onListPointerDown),this._pointerBoundRoot=e,this._listRoot=e)}_closestSortableItem(e){let r=e;for(;r&&r!==this._listRoot;){if(r.nodeType===Node.ELEMENT_NODE){let e=r;if(e.classList.contains(t)||e.classList.contains(n))return null;if(r.parentElement===this._listRoot)return e}r=r.parentElement}return null}_startDrag(e,r){this._listRoot=this._resolveListRoot(),this._restoreAfter=r.nextElementSibling,this._dragEl=r,this._pointerId=e.pointerId,this._startIndex=this._indexOfItem(r);let i=r.getBoundingClientRect();this._pointerStartX=e.clientX,this._pointerStartY=e.clientY,this._dragStartLeft=i.left,this._dragStartTop=i.top;let a=document.createElement(`div`);a.className=t,a.style.minHeight=`${i.height}px`,a.style.minWidth=`${i.width}px`,a.setAttribute(`aria-hidden`,`true`),this._placeholder=a,this._listRoot.insertBefore(a,r),r.classList.add(n),r.style.position=`fixed`,r.style.left=`${i.left}px`,r.style.top=`${i.top}px`,r.style.width=`${i.width}px`,r.style.height=`${i.height}px`,r.style.margin=`0`,r.style.zIndex=`10000`,r.style.boxSizing=`border-box`,r.style.pointerEvents=`none`,r.style.touchAction=`none`,r.style.willChange=`transform, left, top`,r.setPointerCapture(e.pointerId);let o=this._collectOrderedKeys(),s={index:this._startIndex,keys:o};this.dispatchEvent(new CustomEvent(`mint-sortable-start`,{bubbles:!0,composed:!0,detail:s})),this.dispatchEvent(new CustomEvent(`sort-start`,{bubbles:!0,composed:!0,detail:s})),window.addEventListener(`pointermove`,this._boundPointerMove,{passive:!1}),window.addEventListener(`pointerup`,this._boundPointerUp),window.addEventListener(`pointercancel`,this._boundPointerCancel)}_indexOfItem(e){let n=0;for(let r=0;r<this._listRoot.children.length;r++){let i=this._listRoot.children[r];if(i.nodeType!==Node.ELEMENT_NODE)continue;let a=i;if(!a.classList.contains(t)){if(a===e)return n;n++}}return-1}_getLayoutChildren(){return Array.from(this._listRoot.children).filter(e=>e.nodeType===Node.ELEMENT_NODE&&!e.hasAttribute(`data-mint-sortable-status`))}_onPointerMove(e){if(e.pointerId!==this._pointerId||!this._dragEl||!this._placeholder)return;e.preventDefault();let t=e.clientX-this._pointerStartX,n=e.clientY-this._pointerStartY;this._dragEl.style.left=`${this._dragStartLeft+t}px`,this._dragEl.style.top=`${this._dragStartTop+n}px`,this._autoScroll(e),this._maybeMovePlaceholder(e)}_autoScroll(e){let t=this;if(!t.style.maxHeight)return;let n=this._getScrollSensitivity(),r=this._getScrollSpeed(),i=t.getBoundingClientRect();this._scrollRaf!==null&&cancelAnimationFrame(this._scrollRaf),this._scrollRaf=requestAnimationFrame(()=>{this._scrollRaf=null;let a=0;e.clientY<i.top+n?a=-r:e.clientY>i.bottom-n&&(a=r),a!==0&&(t.scrollTop+=a,this._maybeMovePlaceholder(e))})}_maybeMovePlaceholder(e){let t=this._placeholder,n=this._dragEl;if(!t||!n)return;let r=this.getDirection()===`horizontal`,i=r?e.clientX:e.clientY,a=Array.from(this._listRoot.children).filter(e=>e.nodeType===Node.ELEMENT_NODE&&e!==n&&e!==t),o=null;for(let e of a){let t=e.getBoundingClientRect();if(i<(r?t.left+t.width/2:t.top+t.height/2)){o=e;break}}let s=Array.from(this._listRoot.children).filter(e=>e.nodeType===Node.ELEMENT_NODE&&e!==n),c=s.length>0&&s[s.length-1]===t;(o?!(t.nextSibling===o&&t.parentNode===this._listRoot):!c)&&this._flipAnimate(()=>{o?this._listRoot.insertBefore(t,o):this._listRoot.appendChild(t)})}_flipAnimate(e){let t=this._dragEl,n=this._getAnimationDurationMs(),r=this._getLayoutChildren().filter(e=>e!==t),i=new Map;r.forEach(e=>i.set(e,e.getBoundingClientRect())),e(),!(n<=0)&&r.forEach(e=>{let t=i.get(e);if(!t)return;let r=e.getBoundingClientRect(),a=t.left-r.left,o=t.top-r.top;Math.abs(a)<.5&&Math.abs(o)<.5||(e.style.transition=`none`,e.style.transform=`translate(${a}px, ${o}px)`,requestAnimationFrame(()=>{e.style.transition=`transform ${n}ms cubic-bezier(0.2, 0.8, 0.2, 1)`,e.style.transform=``;let t=()=>{e.removeEventListener(`transitionend`,t),e.style.transition=``,e.style.transform=``};e.addEventListener(`transitionend`,t,{once:!0}),setTimeout(t,n+40)}))})}_onPointerUp(e){e.pointerId===this._pointerId&&this._finishDrag(!1)}_onPointerCancel(e){e.pointerId===this._pointerId&&this._finishDrag(!0)}_finishDrag(e){let t=this._dragEl,r=this._placeholder;if(!t||this._pointerId===null){this._teardownDrag();return}try{t.releasePointerCapture(this._pointerId)}catch{}if(window.removeEventListener(`pointermove`,this._boundPointerMove),window.removeEventListener(`pointerup`,this._boundPointerUp),window.removeEventListener(`pointercancel`,this._boundPointerCancel),e){let e=this._restoreAfter;e&&e.parentNode===this._listRoot?this._listRoot.insertBefore(t,e):this._listRoot.appendChild(t)}else r?.parentNode&&this._listRoot.insertBefore(t,r);r?.remove(),this._placeholder=null,t.classList.remove(n),t.style.cssText=``;let i=this._indexOfItem(t),a=this._startIndex;this._pointerId=null,this._dragEl=null,this._restoreAfter=null;let o=this._collectOrderedKeys(),s={oldIndex:a,newIndex:i,cancelled:e,keys:o};this.dispatchEvent(new CustomEvent(`mint-sortable-end`,{bubbles:!0,composed:!0,detail:s})),this.dispatchEvent(new CustomEvent(`sort-stop`,{bubbles:!0,composed:!0,detail:s})),!e&&i!==a&&(this.dispatchEvent(new CustomEvent(`mint-sortable-change`,{bubbles:!0,composed:!0,detail:{oldIndex:a,newIndex:i,keys:o}})),this.dispatchEvent(new CustomEvent(`mint-sortable-order`,{bubbles:!0,composed:!0,detail:{keys:o}})))}_teardownDrag(){if(this._scrollRaf!==null&&(cancelAnimationFrame(this._scrollRaf),this._scrollRaf=null),window.removeEventListener(`pointermove`,this._boundPointerMove),window.removeEventListener(`pointerup`,this._boundPointerUp),window.removeEventListener(`pointercancel`,this._boundPointerCancel),this._dragEl){try{this._pointerId!==null&&this._dragEl.releasePointerCapture(this._pointerId)}catch{}this._dragEl.classList.remove(n),this._dragEl.style.cssText=``}this._placeholder?.remove(),this._placeholder=null,this._dragEl=null,this._pointerId=null,this._restoreAfter=null}};customElements.get(`mint-sortable`)||e.t(`mint-sortable`,r),module.exports=r;

package/dist/components/sortable/index.d.ts

@@ -1,3 +1 @@
-import './Sortable';
-export { default } from './Sortable';
-//# sourceMappingURL=index.d.ts.map
+export { default, MintSortable } from './Sortable'

package/dist/components/sortable/index.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AAEnB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "index.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}