@genome-spy/app 0.75.0 → 0.77.0

package/dist/dialog.es.js

@@ -0,0 +1,377 @@
+import { a as e, n as t, o as n, t as r } from "./lit-ymUSmGBw.js";
+import { n as i, r as a, t as o } from "./componentStyles-CIXoKEp0.js";
+//#region src/components/generic/baseDialog.js
+var s = new Set([
+	"text",
+	"search",
+	"email",
+	"url",
+	"password",
+	"tel",
+	"number",
+	"date",
+	"time",
+	"datetime-local",
+	"month",
+	"week"
+]), c = class extends r {
+	static properties = {
+		dialogTitle: {},
+		modal: { type: Boolean }
+	};
+	#e;
+	static styles = [
+		i,
+		o,
+		n`
+            dialog {
+                font-family: var(--gs-font-family, sans-serif);
+                font-size: var(--gs-font-size, 14px);
+                padding: 0;
+
+                box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
+                background: white;
+                border-radius: 3px;
+                border: none;
+                min-width: 300px;
+
+                opacity: 1;
+                transform: translate(0, 0);
+                transition:
+                    opacity 0.2s ease-in-out,
+                    transform 0.2s ease-in-out;
+
+                @starting-style {
+                    opacity: 0;
+                    transform: translate(0, -15px);
+                }
+            }
+
+            dialog.closing {
+                opacity: 0;
+                transform: translate(0, -15px);
+            }
+
+            dialog::backdrop {
+                background-color: rgb(75, 75, 75);
+                opacity: 0.4;
+                transition: opacity 0.3s ease-in-out;
+
+                @starting-style {
+                    opacity: 0;
+                }
+            }
+
+            dialog.closing::backdrop {
+                opacity: 0;
+            }
+
+            header,
+            section,
+            footer {
+                padding: var(--gs-basic-spacing, 10px);
+            }
+
+            header {
+                font-weight: bold;
+                padding-bottom: 0;
+            }
+
+            section {
+                > :first-child {
+                    margin-top: 0;
+                }
+
+                > :last-child {
+                    margin-bottom: 0;
+                }
+            }
+
+            footer {
+                border-top: 1px solid var(--gs-dialog-stroke-color, #d0d0d0);
+                padding: var(--gs-basic-spacing, 10px);
+
+                > div {
+                    display: flex;
+                    justify-content: flex-end;
+                    gap: var(--gs-basic-spacing, 10px);
+                }
+            }
+
+            footer .btn.btn-primary {
+                --gs-dialog-primary-bg: var(--gs-theme-primary, #6c82ab);
+                --gs-dialog-primary-bg-hi: oklch(
+                    from var(--gs-dialog-primary-bg) calc(l + 0.07) c h
+                );
+                --gs-dialog-primary-bg-lo: oklch(
+                    from var(--gs-dialog-primary-bg) calc(l - 0.07) c h
+                );
+                background-color: var(--gs-dialog-primary-bg);
+                background-image: linear-gradient(
+                    to bottom,
+                    var(--gs-dialog-primary-bg-hi),
+                    var(--gs-dialog-primary-bg-lo)
+                );
+                border-color: oklch(
+                    from var(--gs-dialog-primary-bg) calc(l - 0.08) c h
+                );
+                color: var(--gs-theme-on-primary, #ffffff);
+                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+            }
+
+            footer .btn.btn-primary:hover:not(:disabled) {
+                background-image: linear-gradient(
+                    to bottom,
+                    oklch(from var(--gs-dialog-primary-bg) calc(l + 0.1) c h),
+                    oklch(from var(--gs-dialog-primary-bg) calc(l - 0.04) c h)
+                );
+            }
+
+            footer .btn.btn-primary svg {
+                filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
+            }
+
+            footer .btn.btn-primary:disabled {
+                background-color: oklch(
+                    from var(--gs-dialog-primary-bg) calc(l + 0.08) c h
+                );
+                background-image: none;
+                border-color: oklch(
+                    from var(--gs-dialog-primary-bg) calc(l - 0.02) c h
+                );
+                color: oklch(
+                    from var(--gs-theme-on-primary, #ffffff) l c h / 0.6
+                );
+                text-shadow: none;
+            }
+
+            footer .btn.btn-primary:disabled svg {
+                filter: none;
+            }
+        `
+	];
+	constructor() {
+		super(), this.dialogTitle = null, this.modal = !0, this.addEventListener("keydown", (e) => {
+			this.#t(e), e.stopPropagation();
+		});
+	}
+	#t(e) {
+		if (!e.defaultPrevented && e.key == "Enter" && !e.isComposing && !e.altKey && !e.ctrlKey && !e.metaKey) {
+			let t = e.composedPath().find((e) => e instanceof HTMLElement);
+			if (this.#n(t)) {
+				let t = this.#r();
+				t && (e.preventDefault(), t.click());
+			}
+		}
+	}
+	#n(e) {
+		let t = this.renderRoot instanceof ShadowRoot ? this.renderRoot : null, n = e ?? t?.activeElement;
+		if (!n) return !0;
+		let r = n.closest("input");
+		if (!r) return !1;
+		let i = (r.type || "text").toLowerCase();
+		return s.has(i);
+	}
+	#r() {
+		return this.renderRoot.querySelector("footer button[data-primary]:not(:disabled)");
+	}
+	firstUpdated() {
+		this.#e = this.renderRoot.querySelector("dialog"), this.modal ? this.#e.showModal() : this.#e.show(), this.#i();
+	}
+	#i() {
+		let e = this.renderRoot.querySelector("[autofocus]");
+		e && (queueMicrotask(() => {
+			this.isConnected && e.focus();
+		}), requestAnimationFrame(() => {
+			this.isConnected && e.focus();
+		}));
+	}
+	finish(e) {
+		this.dispatchEvent(new CustomEvent("gs-dialog-finished", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	#a(e) {
+		e.preventDefault(), this.finish({
+			ok: !1,
+			reason: "cancel"
+		}), this.triggerClose();
+	}
+	triggerClose() {
+		this.#e.addEventListener("transitionend", () => {
+			this.#e.close(), this.dispatchEvent(new CustomEvent("gs-dialog-closed", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}), this.#e.classList.add("closing"), this.renderRoot.querySelector(".non-modal-backdrop")?.classList.add("closing");
+	}
+	onCloseButtonClick() {
+		"requestClose" in this.#e ? this.#e.requestClose() : (this.finish({
+			ok: !1,
+			reason: "cancel"
+		}), this.triggerClose());
+	}
+	renderHeader() {
+		return e`${this.dialogTitle ? e`${this.dialogTitle}` : t}`;
+	}
+	renderBody() {
+		return e``;
+	}
+	renderFooter() {
+		let n = this.renderButtons();
+		return n?.length ? e`<div>${n}</div>` : t;
+	}
+	renderButtons() {
+		return [this.makeCloseButton()];
+	}
+	makeButton(n, r, i = {}) {
+		let { iconDef: o, disabled: s = !1, preventMouseDown: c = !1, isPrimary: l = !1 } = i, u = n == "Next", d = ["btn"];
+		return u && d.push("reverse"), l && d.push("btn-primary"), e`<button
+            class=${d.join(" ")}
+            type="button"
+            title=${n}
+            ?disabled=${s}
+            ?data-primary=${l}
+            @mousedown=${c ? (e) => e.preventDefault() : void 0}
+            @click=${async () => {
+			await r() || this.triggerClose();
+		}}
+        >
+            ${o ? a(o).node[0] : t} ${n}
+        </button>`;
+	}
+	makeCloseButton(e = "Close") {
+		return this.makeButton(e, () => this.onCloseButtonClick(), { preventMouseDown: !0 });
+	}
+	render() {
+		let n = this.renderHeader(), r = this.renderFooter();
+		return e`
+            ${this.modal ? t : e`<div class="non-modal-backdrop"></div>`}
+            <dialog
+                @cancel=${(e) => this.#a(e)}
+            >
+                ${n ? e`<header>${n}</header>` : t}
+                <section>${this.renderBody()}</section>
+                ${r ? e`<footer>${r}</footer>` : t}
+            </dialog>
+        `;
+	}
+};
+function l(e, t) {
+	return f(e, t).promise;
+}
+function u(e, t, n) {
+	return l(e, t).then(n);
+}
+function d(e, t) {
+	return u(e, t, (e) => !!e.ok);
+}
+function f(e, t) {
+	let n = document.createElement(e);
+	t && t(n);
+	let r = new Promise((e) => {
+		n.addEventListener("gs-dialog-finished", (t) => {
+			e(t.detail);
+		}, { once: !0 });
+	});
+	return n.addEventListener("gs-dialog-closed", () => {
+		n.remove();
+	}), document.body.appendChild(n), {
+		element: n,
+		promise: r
+	};
+}
+//#endregion
+//#region src/components/generic/messageDialog.js
+var p = {
+	warning: {
+		prefix: "fas",
+		iconName: "triangle-exclamation",
+		icon: [
+			512,
+			512,
+			[
+				9888,
+				"exclamation-triangle",
+				"warning"
+			],
+			"f071",
+			"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+		]
+	},
+	error: {
+		prefix: "fas",
+		iconName: "circle-xmark",
+		icon: [
+			512,
+			512,
+			[
+				61532,
+				"times-circle",
+				"xmark-circle"
+			],
+			"f057",
+			"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
+		]
+	},
+	info: {
+		prefix: "fas",
+		iconName: "circle-info",
+		icon: [
+			512,
+			512,
+			["info-circle"],
+			"f05a",
+			"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
+		]
+	}
+}, m = class extends c {
+	static properties = {
+		...super.properties,
+		message: {},
+		type: { type: String },
+		confirm: { type: Boolean }
+	};
+	static styles = [...super.styles, n`
+            .message-flex {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: calc(var(--gs-basic-spacing) * 2);
+                padding: var(--gs-basic-spacing);
+                box-sizing: border-box;
+                max-width: 400px;
+            }
+
+            .icon svg {
+                height: 3em;
+            }
+        `];
+	constructor() {
+		super(), this.message = "", this.type = "info", this.confirm = !1;
+	}
+	renderButtons() {
+		return this.confirm ? [this.makeCloseButton("Cancel"), this.makeButton("OK", () => {
+			this.finish({ ok: !0 }), this.triggerClose();
+		}, { isPrimary: !0 })] : super.renderButtons();
+	}
+	renderBody() {
+		if (this.type) {
+			let n = p[this.type];
+			return e`<div class="message-flex">
+                ${n ? e`<div class="icon">${a(n).node[0]}</div>` : t}
+                <div class="message">${this.message}</div>
+            </div>`;
+		} else return e`${this.message}`;
+	}
+};
+customElements.define("gs-message-dialog", m);
+function h(e, t = {}) {
+	return d("gs-message-dialog", (n) => {
+		n.message = e, n.dialogTitle = t.title, n.type = t.type, n.confirm = t.confirm;
+	});
+}
+//#endregion
+export { c as BaseDialog, l as showDialog, h as showMessageDialog };