@moni-labs/moni-ui 0.4.16 → 0.4.18

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

@@ -1854,7 +1854,9 @@ var Je = class extends W {
 		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));
+		if (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)), e.has("open") && !this.open && this._dialog && typeof this._dialog.close == "function") try {
+			this._dialog.close();
+		} catch {}
 	}
 	async _animateAndClose() {
 		if (this._isClosing || !this.open) return !1;
@@ -1929,6 +1931,9 @@ var Je = class extends W {
 		}
 		this._lastDeltaY = 0;
 	}
+	_onCancel(e) {
+		e.preventDefault(), this.close();
+	}
 	_onPointerCancel(e) {
 		this._isDragging && this._onPointerUp(e);
 	}
@@ -1943,7 +1948,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 ? (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)));
+		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);
@@ -1987,6 +2012,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;
@@ -2084,6 +2113,7 @@ var Je = class extends W {
 			?open=${this.open}
 			class=${t}
 			@click=${this._onDialogClick}
+			@cancel=${this._onCancel}
 			@pointerdown=${this._onPointerDown}
 			@pointermove=${this._onPointerMove}
 			@pointerup=${this._onPointerUp}