@moni-labs/moni-ui 0.4.14 → 0.4.17

package/dist/browser/moni-ui.min.js

@@ -1845,23 +1845,30 @@ function qe(e, t, n) {
 //#region src/components/moni-bottom-sheet.ts
 var Je = class extends W {
 	constructor(...e) {
-		super(...e), this.open = !1, this.size = "medium", this.modal = !0, this.title = "", this.handle = !1, this.positioning = "fixed", this.expandedHeight = "85%", this.maxWidth = "", this._originalParent = null, this._originalSibling = null, this._isDragging = !1, this._startY = 0, this._currentTranslationY = 0, this._sheetHeight = 0, this._defaultHeight = 0, this._justDragged = !1, this._skipRequestClose = !1;
+		super(...e), this.open = !1, this.size = "medium", this.modal = !0, this.title = "", this.handle = !1, this.positioning = "fixed", this.expandedHeight = "85%", this.maxWidth = "", this._originalParent = null, this._originalSibling = null, this._isDragging = !1, this._startY = 0, this._lastDeltaY = 0, this._sheetHeight = 0, this._defaultHeight = 0, this._justDragged = !1, this._skipRequestClose = !1, this._isClosing = !1;
+	}
+	show() {
+		this._isClosing = !1, this._isDragging = !1, this._lastDeltaY = 0, this._dialog && (this._dialog.classList.remove("dragging", "expanded"), this._dialog.style.transform = "", this._dialog.style.height = ""), this.open = !0;
+	}
+	close() {
+		return this._animateAndClose();
 	}
 	willUpdate(e) {
 		e.has("open") && this.open !== e.get("open") && (this.open ? qe(this, "moni-request-open", { cancelable: !0 }) || (this.open = !1) : this._skipRequestClose || qe(this, "moni-request-close", { cancelable: !0 }) || (this.open = !0));
 	}
 	async _animateAndClose() {
-		this._skipRequestClose = !0;
+		if (this._isClosing || !this.open) return !1;
+		this._isClosing = !0, this._skipRequestClose = !0;
 		let e = qe(this, "moni-request-close", { cancelable: !0 });
-		return this._skipRequestClose = !1, e ? (this.dispatchEvent(new Event("close", {
-			bubbles: !0,
-			composed: !0
-		})), qe(this, "moni-close"), this._dialog.classList.remove("expanded"), this._dialog.style.transform = "translateY(100%)", this._dialog.style.height = "", await new Promise((e) => {
+		return this._skipRequestClose = !1, e ? (qe(this, "moni-close"), this._dialog.classList.remove("expanded"), this._dialog.style.transform = "translateY(100%)", this._dialog.style.height = "", await new Promise((e) => {
 			let t = () => {
 				this._dialog.removeEventListener("transitionend", t), e(null);
 			};
 			this._dialog.addEventListener("transitionend", t), setTimeout(t, 300);
-		}), this._dialog.style.transform = "", this._skipRequestClose = !0, this.open = !1, this._skipRequestClose = !1, qe(this, "moni-closed"), !0) : !1;
+		}), this._isClosing = !1, this._isDragging = !1, this._lastDeltaY = 0, this._dialog && (this._dialog.classList.remove("dragging", "expanded"), this._dialog.style.transform = "", this._dialog.style.height = ""), this._skipRequestClose = !0, this.open = !1, this._skipRequestClose = !1, this.dispatchEvent(new Event("close", {
+			bubbles: !0,
+			composed: !0
+		})), qe(this, "moni-closed"), !0) : (this._isClosing = !1, !1);
 	}
 	_getMaxHeightPx() {
 		let e = this.expandedHeight || "85%";
@@ -1869,11 +1876,19 @@ var Je = class extends W {
 	}
 	_onPointerDown(e) {
 		let t = e.target;
-		!t.closest(".handle") && !t.closest("header") || (this._isDragging = !0, this._startY = e.clientY, this._sheetHeight = this._dialog.getBoundingClientRect().height, this._currentTranslationY = 0, this._dialog.classList.contains("expanded") || (this._defaultHeight = this._sheetHeight), t.setPointerCapture(e.pointerId), this._dialog.classList.add("dragging"));
+		if (!(!t.closest(".handle") && !t.closest("header"))) {
+			this._isDragging = !0, this._startY = e.clientY, this._sheetHeight = this._dialog.getBoundingClientRect().height, this._lastDeltaY = 0, this._dialog.classList.contains("expanded") ? this._defaultHeight ||= Math.min(this._sheetHeight * .6, 384) : this._defaultHeight = this._sheetHeight;
+			try {
+				t.setPointerCapture(e.pointerId);
+			} catch {}
+			this._dialog.classList.add("dragging");
+		}
 	}
 	_onPointerMove(e) {
 		if (!this._isDragging) return;
-		let t = e.clientY - this._startY, n = this._dialog.classList.contains("expanded"), r = this._getMaxHeightPx();
+		let t = e.clientY - this._startY;
+		this._lastDeltaY = t;
+		let n = this._dialog.classList.contains("expanded"), r = this._getMaxHeightPx();
 		if (n) {
 			if (t > 0) {
 				let e = this._sheetHeight - t;
@@ -1882,7 +1897,7 @@ var Je = class extends W {
 				let e = this._sheetHeight - t * .2;
 				this._dialog.style.transform = "", this._dialog.style.height = `${Math.min(r, e)}px`;
 			}
-		} else if (t > 0) this._currentTranslationY = t, this._dialog.style.transform = `translateY(${t}px)`, this._dialog.style.height = "";
+		} else if (t > 0) this._dialog.style.transform = `translateY(${t}px)`, this._dialog.style.height = "";
 		else {
 			let e = this._sheetHeight - t;
 			this._dialog.style.transform = "", this._dialog.style.height = `${Math.min(r, e)}px`;
@@ -1890,23 +1905,35 @@ var Je = class extends W {
 	}
 	_onPointerUp(e) {
 		if (!this._isDragging) return;
-		e.target.releasePointerCapture(e.pointerId), this._isDragging = !1, this._dialog.classList.remove("dragging");
-		let t = e.clientY - this._startY;
-		Math.abs(t) > 5 && (this._justDragged = !0, setTimeout(() => {
+		let t = e.target;
+		try {
+			t && t.hasPointerCapture?.(e.pointerId) && t.releasePointerCapture(e.pointerId);
+		} catch {}
+		this._isDragging = !1, this._dialog.classList.remove("dragging");
+		let n = typeof e.clientY == "number" && e.clientY > 0, r = n ? e.clientY - this._startY : this._lastDeltaY;
+		Math.abs(r) > 5 && (this._justDragged = !0, setTimeout(() => {
 			this._justDragged = !1;
 		}, 50));
-		let n = this._dialog.classList.contains("expanded"), r = this._getMaxHeightPx();
-		if (n) {
-			let e = this._sheetHeight - t;
-			e < this._defaultHeight - 80 ? this._animateAndClose().then((e) => {
+		let i = this._dialog.classList.contains("expanded"), a = this._getMaxHeightPx(), o = this._defaultHeight || this._sheetHeight * .6 || 300, s = n && typeof window < "u" && e.clientY >= window.innerHeight - 30;
+		if (i) {
+			let e = this._sheetHeight - r;
+			s || r > this._sheetHeight * .4 || e < o - 80 || e < 100 ? this._animateAndClose().then((e) => {
 				e || (this._dialog.style.transform = "", this._dialog.style.height = "");
-			}) : e < (r + this._defaultHeight) / 2 ? (this._dialog.classList.remove("expanded"), this._dialog.style.transform = "", this._dialog.style.height = "") : (this._dialog.style.transform = "", this._dialog.style.height = "");
-		} else t < 0 ? (this._sheetHeight - t > this._sheetHeight + 80 && this._dialog.classList.add("expanded"), this._dialog.style.transform = "", this._dialog.style.height = "") : this._currentTranslationY > 80 ? this._animateAndClose().then((e) => {
-			e || (this._dialog.style.transform = "");
-		}) : this._dialog.style.transform = "";
+			}) : e < (a + o) / 2 ? (this._dialog.classList.remove("expanded"), this._dialog.style.transform = "", this._dialog.style.height = "") : (this._dialog.style.transform = "", this._dialog.style.height = "");
+		} else if (r < 0 && !s) this._sheetHeight - r > this._sheetHeight + 80 && this._dialog.classList.add("expanded"), this._dialog.style.transform = "", this._dialog.style.height = "";
+		else {
+			let e = Math.min(80, this._sheetHeight * .25);
+			s || r > e ? this._animateAndClose().then((e) => {
+				e || (this._dialog.style.transform = "");
+			}) : this._dialog.style.transform = "";
+		}
+		this._lastDeltaY = 0;
 	}
 	_onPointerCancel(e) {
-		this._isDragging && (e.target.releasePointerCapture(e.pointerId), this._isDragging = !1, this._dialog.classList.remove("dragging"), this._dialog.style.transform = "", this._dialog.style.height = "");
+		this._isDragging && this._onPointerUp(e);
+	}
+	_onLostPointerCapture(e) {
+		this._isDragging && this._onPointerUp(e);
 	}
 	_onDialogClick(e) {
 		if (this._justDragged) {
@@ -1916,7 +1943,27 @@ var Je = class extends W {
 		this.modal && e.target === this._dialog && this._animateAndClose();
 	}
 	updated(e) {
-		super.updated(e), e.has("expandedHeight") && this.style.setProperty("--moni-bottom-sheet-expanded-height", this.expandedHeight), e.has("maxWidth") && this.style.setProperty("--moni-bottom-sheet-max-width", this.maxWidth || "100%"), e.has("open") && (this.open ? (e.get("open") !== void 0 && qe(this, "moni-open"), this.positioning === "body" && this.parentNode !== document.body && (this._originalParent = this.parentNode, this._originalSibling = this.nextSibling, document.body.appendChild(this)), e.get("open") !== void 0 && setTimeout(() => qe(this, "moni-opened"), 300)) : (this._dialog && this._dialog.classList.remove("expanded"), this.positioning === "body" && this._originalParent && this.parentNode === document.body && (this._originalParent.insertBefore(this, this._originalSibling), this._originalParent = null, this._originalSibling = null)));
+		if (super.updated(e), e.has("expandedHeight") && this.style.setProperty("--moni-bottom-sheet-expanded-height", this.expandedHeight), e.has("maxWidth") && this.style.setProperty("--moni-bottom-sheet-max-width", this.maxWidth || "100%"), e.has("open") && (this.open ? (this._isClosing = !1, this._isDragging = !1, this._lastDeltaY = 0, this._dialog && (this._dialog.classList.remove("dragging", "expanded"), this._dialog.style.transform = "", this._dialog.style.height = ""), e.get("open") !== void 0 && qe(this, "moni-open"), this.positioning === "body" && this.parentNode !== document.body && (this._originalParent = this.parentNode, this._originalSibling = this.nextSibling, document.body.appendChild(this)), e.get("open") !== void 0 && setTimeout(() => qe(this, "moni-opened"), 300)) : (this._isClosing = !1, this._isDragging = !1, this._lastDeltaY = 0, this._dialog && (this._dialog.classList.remove("expanded", "dragging"), this._dialog.style.transform = "", this._dialog.style.height = ""), this.positioning === "body" && this._originalParent && this.parentNode === document.body && (this._originalParent.insertBefore(this, this._originalSibling), this._originalParent = null, this._originalSibling = null)), this._dialog)) {
+			let e = this._dialog;
+			if (this.open) {
+				if (this.modal && typeof e.showModal == "function") {
+					let t = !1;
+					try {
+						t = this._dialog.matches(":modal");
+					} catch {
+						t = !1;
+					}
+					if (!t) try {
+						e.showModal();
+					} catch {}
+				} else if (!this.modal && typeof e.show == "function") try {
+					e.show();
+				} catch {}
+				else (this.modal && typeof e.showModal != "function" || !this.modal && typeof e.show != "function") && (this._dialog.open = !0);
+			} else if (typeof e.close == "function") try {
+				e.close();
+			} catch {}
+		}
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.parentNode === document.body && this.positioning === "body" && this._originalParent && this._originalParent.insertBefore(this, this._originalSibling);
@@ -1960,6 +2007,10 @@ var Je = class extends W {
 				transform: translateY(0);
 			}
 
+			dialog::backdrop {
+				background-color: rgb(0 0 0 / 0.5);
+			}
+
 			dialog.fixed {
 				position: fixed;
 				inset: auto 0 0 0;
@@ -2061,6 +2112,7 @@ var Je = class extends W {
 			@pointermove=${this._onPointerMove}
 			@pointerup=${this._onPointerUp}
 			@pointercancel=${this._onPointerCancel}
+			@lostpointercapture=${this._onLostPointerCapture}
 		>
 			${this.handle ? z`<div class="handle" aria-hidden="true"></div>` : B}
 			<header part="header">