@webority/ui-elements 0.36.0 → 0.38.0

package/dist/WuiImageCrop-1yaAONTk.js

@@ -1,462 +0,0 @@
-import { t as e } from "./elementBase-Bg1xpvup.js";
-var t = 4096, n = [
-	.92,
-	.8,
-	.65,
-	.5
-], r = .8, i = 8;
-function a(e) {
-	if (e == null || e === "" || e === "free") return null;
-	let t = typeof e == "number" ? e : Number(e);
-	return Number.isFinite(t) && t > 0 ? t : null;
-}
-function o(e, t, n) {
-	if (!n) return {
-		x: 0,
-		y: 0,
-		w: e,
-		h: t
-	};
-	let r = e, i = r / n;
-	return i > t && (i = t, r = i * n), {
-		x: (e - r) / 2,
-		y: (t - i) / 2,
-		w: r,
-		h: i
-	};
-}
-function s(e, t, n) {
-	return {
-		...e,
-		x: Math.min(Math.max(e.x, 0), Math.max(t - e.w, 0)),
-		y: Math.min(Math.max(e.y, 0), Math.max(n - e.h, 0))
-	};
-}
-function c(e, t, n, r, i) {
-	return s({
-		...e,
-		x: e.x + t,
-		y: e.y + n
-	}, r, i);
-}
-function l(e, t) {
-	return Math.min(32, e, t);
-}
-function u(e, t) {
-	return t.w / e.w;
-}
-function d(e, t) {
-	return Math.max(4, u(e, t));
-}
-function f(e, t, n, r, i) {
-	let a = Math.min(Math.max(n, 1), d(e, t)), o = e.h / e.w, c = Math.min(r, i / o), u = Math.min(Math.max(l(r, i), l(r, i) / o), c), f = Math.min(Math.max(t.w / a, u), c), p = f * o, m = e.x + e.w / 2, h = e.y + e.h / 2;
-	return s({
-		x: m - f / 2,
-		y: h - p / 2,
-		w: f,
-		h: p
-	}, r, i);
-}
-var p = [
-	"nw",
-	"ne",
-	"sw",
-	"se"
-];
-function m(e, t, n, r, i, a) {
-	let o = l(i, a), s = t.endsWith("w"), c = t.startsWith("n"), u = s ? e.x + e.w : e.x, d = c ? e.y + e.h : e.y, f = Math.min(Math.max(n, 0), i), p = Math.min(Math.max(r, 0), a);
-	return f = s ? Math.min(f, u - o) : Math.max(f, u + o), p = c ? Math.min(p, d - o) : Math.max(p, d + o), {
-		x: Math.min(f, u),
-		y: Math.min(p, d),
-		w: Math.abs(f - u),
-		h: Math.abs(p - d)
-	};
-}
-function h(e, n = t) {
-	let r = Math.min(1, n / Math.max(e.w, e.h));
-	return {
-		width: Math.max(1, Math.round(e.w * r)),
-		height: Math.max(1, Math.round(e.h * r))
-	};
-}
-function g(e, t) {
-	let n = t / Math.max(e.w, e.h);
-	return {
-		width: Math.max(1, Math.round(e.w * n)),
-		height: Math.max(1, Math.round(e.h * n))
-	};
-}
-function _(e, t, n) {
-	return n % 180 == 0 ? {
-		w: e,
-		h: t
-	} : {
-		w: t,
-		h: e
-	};
-}
-function v(e, t, n) {
-	return s({
-		x: n - (e.y + e.h),
-		y: e.x,
-		w: e.h,
-		h: e.w
-	}, n, t);
-}
-function y(e) {
-	return String(e || "").split(/[\s,]+/).map(Number).filter((e) => Number.isInteger(e) && e > 0);
-}
-var b = [
-	"image/png",
-	"image/jpeg",
-	"image/webp"
-], x = {
-	"image/png": ".png",
-	"image/jpeg": ".jpg",
-	"image/webp": ".webp"
-};
-function S(e) {
-	let t = String(e || "").toLowerCase();
-	return b.includes(t) ? t : "image/png";
-}
-function C(e, t) {
-	let n = String(e || "image"), r = x[t];
-	return (t === "image/jpeg" ? /\.jpe?g$/i.test(n) : n.toLowerCase().endsWith(r)) ? n : `${n.replace(/\.[^./\\]+$/, "") || "image"}${r}`;
-}
-async function w(e, { width: t, height: a, type: o, maxBytes: s }) {
-	let c = o, l = t, u = a, d = null;
-	for (let t = 0; t <= i; t++) {
-		let i = c === "image/png" ? [void 0] : t === 0 ? n : [n[1]];
-		for (let t of i) {
-			if (d = await e(l, u, c, t), !d || (d.type && d.type !== c && (c = d.type), !(s > 0) || d.size <= s)) return d;
-			if (c === "image/png") break;
-		}
-		l = Math.max(1, Math.round(l * r)), u = Math.max(1, Math.round(u * r));
-	}
-	return d;
-}
-//#endregion
-//#region src/WuiImageCrop.js
-var T = .05, E = .2, D = {
-	w: 320,
-	h: 240
-}, O = {
-	nw: "top left",
-	ne: "top right",
-	sw: "bottom left",
-	se: "bottom right"
-}, k = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"/></svg>", A = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5v14\"/></svg>", j = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"/><path d=\"M21 3v5h-5\"/></svg>", M = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"/><path d=\"M3 3v5h5\"/></svg>", N = (e, t) => Math.hypot(e.x - t.x, e.y - t.y), P = class extends e {
-	static get observedAttributes() {
-		return [
-			"src",
-			"aspect",
-			"round",
-			"rotatable",
-			"previews"
-		];
-	}
-	constructor() {
-		super(), this._rect = null, this._base = null, this._natural = null, this._source = null, this._rotation = 0, this._drag = null, this._pointers = /* @__PURE__ */ new Map(), this._pinch = null, this._previewPending = !1, this._resizeObserver = null;
-	}
-	get src() {
-		return this.getAttribute("src") || "";
-	}
-	set src(e) {
-		e == null || e === "" ? this.removeAttribute("src") : this.setAttribute("src", String(e));
-	}
-	get aspect() {
-		return a(this.getAttribute("aspect"));
-	}
-	set aspect(e) {
-		e == null || e === "" ? this.removeAttribute("aspect") : this.setAttribute("aspect", String(e));
-	}
-	get round() {
-		return this.hasAttribute("round");
-	}
-	set round(e) {
-		this.toggleAttribute("round", !!e);
-	}
-	get rotatable() {
-		return this.hasAttribute("rotatable");
-	}
-	set rotatable(e) {
-		this.toggleAttribute("rotatable", !!e);
-	}
-	get previews() {
-		return this.getAttribute("previews") || "";
-	}
-	set previews(e) {
-		e == null || e === "" ? this.removeAttribute("previews") : this.setAttribute("previews", Array.isArray(e) ? e.join(" ") : String(e));
-	}
-	get rect() {
-		return this._rect ? { ...this._rect } : null;
-	}
-	get rotation() {
-		return this._rotation;
-	}
-	set rotation(e) {
-		if (!this._rect) return;
-		let t = (Math.round(Number(e) / 90) * 90 % 360 + 360) % 360;
-		if (!Number.isNaN(t)) for (; this._rotation !== t;) this.rotate();
-	}
-	get zoom() {
-		return this._rect ? u(this._rect, this._base) : 1;
-	}
-	set zoom(e) {
-		this._rect && (this._rect = f(this._rect, this._base, Number(e) || 1, this._natural.w, this._natural.h), this._paint(), this._announce());
-	}
-	connectedCallback() {
-		if (!this._rendered) {
-			this.render();
-			return;
-		}
-		this._observe();
-	}
-	disconnectedCallback() {
-		this._resizeObserver?.disconnect(), this._resizeObserver = null;
-	}
-	attributeChangedCallback(e) {
-		this._rendered && (e === "src" ? this._loadImage() : e === "aspect" ? (this._rebuildHandles(), this._resetRect()) : e === "rotatable" ? this._tools.hidden = !this.rotatable : e === "previews" ? this._renderPreviews() : this._applyRound());
-	}
-	render() {
-		this.innerHTML = `<div>
-        <div class="wui-crop-stage" tabindex="0" role="group" aria-label="Crop area. Drag the frame or use the arrow keys to move it, and plus or minus to zoom.">
-          <img class="wui-crop-img" alt="" draggable="false">
-          <div class="wui-crop-frame"></div>
-        </div>
-        <div class="wui-crop-controls">
-          <button type="button" class="wui-crop-zoombtn" data-zoom="out" aria-label="Zoom out">${k}</button>
-          <input type="range" class="form-range wui-crop-zoom" min="1" max="4" step="0.01" value="1" aria-label="Zoom">
-          <button type="button" class="wui-crop-zoombtn" data-zoom="in" aria-label="Zoom in">${A}</button>
-        </div>
-        <div class="wui-crop-tools" hidden>
-          <button type="button" class="wui-crop-toolbtn" data-crop-action="rotate" aria-label="Rotate 90 degrees clockwise">${j}<span>Rotate</span></button>
-          <button type="button" class="wui-crop-toolbtn" data-crop-action="reset" aria-label="Reset the crop">${M}<span>Reset</span></button>
-        </div>
-        <div class="wui-crop-previews" aria-hidden="true" hidden></div>
-        <div class="visually-hidden" data-wui-crop-live aria-live="polite"></div>
-      </div>`, this._stage = this.querySelector(".wui-crop-stage"), this._img = this.querySelector(".wui-crop-img"), this._frame = this.querySelector(".wui-crop-frame"), this._slider = this.querySelector(".wui-crop-zoom"), this._tools = this.querySelector(".wui-crop-tools"), this._previewBox = this.querySelector(".wui-crop-previews"), this._live = this.querySelector("[data-wui-crop-live]"), this._rendered = !0, this._tools.hidden = !this.rotatable, this._applyRound(), this._rebuildHandles(), this._renderPreviews(), this._wire(), this._observe(), this._loadImage();
-	}
-	_applyRound() {
-		this._frame.classList.toggle("wui-crop-frame--round", this.round), this._previewBox.classList.toggle("wui-crop-previews--round", this.round);
-	}
-	_rebuildHandles() {
-		for (let e of this._frame.querySelectorAll(".wui-crop-handle")) e.remove();
-		if (!this.aspect) for (let e of p) {
-			let t = document.createElement("button");
-			t.type = "button", t.className = `wui-crop-handle wui-crop-handle--${e}`, t.dataset.handle = e, t.setAttribute("aria-label", `Resize ${O[e]} corner`), this._frame.appendChild(t);
-		}
-	}
-	_renderPreviews() {
-		let e = y(this.previews);
-		this._previewBox.replaceChildren(), this._previewBox.hidden = e.length === 0;
-		for (let t of e) {
-			let e = document.createElement("canvas");
-			e.className = "wui-crop-preview", e.dataset.size = String(t), e.style.width = `${t}px`, e.style.height = `${t}px`, this._previewBox.appendChild(e);
-		}
-		this._schedulePreviews();
-	}
-	_loadImage() {
-		this._rect = null, this._natural = null, this._source = null, this._rotation = 0, this._drag = null, this._pinch = null, this._pointers.clear();
-		let e = this.src;
-		this._img.hidden = !e, this._frame.hidden = !0, e && (this._img.onload = () => {
-			this._source = {
-				w: this._img.naturalWidth,
-				h: this._img.naturalHeight
-			}, this._natural = { ...this._source }, this._resetRect(), this.dispatchEvent(new Event("load"));
-		}, this._img.onerror = () => {
-			this._frame.hidden = !0, this.dispatchEvent(new Event("error"));
-		}, this._img.src = e);
-	}
-	_resetRect() {
-		this._natural && (this._base = o(this._natural.w, this._natural.h, this.aspect), this._rect = { ...this._base }, this._frame.hidden = !1, this._paint());
-	}
-	_observe() {
-		typeof ResizeObserver > "u" || this._resizeObserver || (this._resizeObserver = new ResizeObserver(() => this._paint()), this._resizeObserver.observe(this._stage));
-	}
-	_view() {
-		let e = this._stage.clientWidth || D.w, t = this._stage.clientHeight || D.h, n = Math.min(e / this._natural.w, t / this._natural.h), r = this._natural.w * n, i = this._natural.h * n;
-		return {
-			scale: n,
-			left: (e - r) / 2,
-			top: (t - i) / 2,
-			iw: r,
-			ih: i
-		};
-	}
-	_paint() {
-		if (!this._rect) return;
-		let e = this._view(), t = this._rotation % 180 != 0, n = t ? e.ih : e.iw, r = t ? e.iw : e.ih;
-		Object.assign(this._img.style, {
-			left: `${e.left + (e.iw - n) / 2}px`,
-			top: `${e.top + (e.ih - r) / 2}px`,
-			width: `${n}px`,
-			height: `${r}px`,
-			transform: this._rotation ? `rotate(${this._rotation}deg)` : ""
-		});
-		let i = this._rect;
-		Object.assign(this._frame.style, {
-			left: `${e.left + i.x * e.scale}px`,
-			top: `${e.top + i.y * e.scale}px`,
-			width: `${i.w * e.scale}px`,
-			height: `${i.h * e.scale}px`
-		});
-		let a = u(i, this._base), o = d(i, this._base);
-		this._slider.max = String(o), this._slider.value = String(Math.min(Math.max(a, 1), o)), this._slider.setAttribute("aria-valuetext", `${Math.round(a * 100)}%`), this._schedulePreviews();
-	}
-	_schedulePreviews() {
-		if (!this._rect || this._previewBox.hidden || this._previewPending) return;
-		this._previewPending = !0;
-		let e = () => {
-			this._previewPending = !1, this._drawPreviews();
-		};
-		typeof requestAnimationFrame == "function" ? requestAnimationFrame(e) : e();
-	}
-	_drawPreviews() {
-		if (!this._rect) return;
-		let e = s(this._rect, this._natural.w, this._natural.h), t = typeof window < "u" && window.devicePixelRatio || 1;
-		for (let n of this._previewBox.children) {
-			let r = Number(n.dataset.size), i = Math.max(1, Math.round(r * e.h / e.w));
-			n.style.width = `${r}px`, n.style.height = `${i}px`, n.width = Math.round(r * t), n.height = Math.round(i * t);
-			let a = n.getContext("2d");
-			a && this._drawCrop(a, e, n.width, n.height);
-		}
-	}
-	_drawCrop(e, t, n, r) {
-		if (!this._rotation) {
-			e.drawImage(this._img, t.x, t.y, t.w, t.h, 0, 0, n, r);
-			return;
-		}
-		let i = this._source;
-		e.save(), e.scale(n / t.w, r / t.h), e.translate(-t.x, -t.y), e.translate(this._natural.w / 2, this._natural.h / 2), e.rotate(this._rotation * Math.PI / 180), e.drawImage(this._img, -i.w / 2, -i.h / 2, i.w, i.h), e.restore();
-	}
-	_announce() {
-		this.dispatchEvent(new CustomEvent("change", {
-			bubbles: !0,
-			detail: this.rect
-		}));
-	}
-	_say() {
-		let e = this._rect, t = this._rotation ? `, turned ${this._rotation} degrees` : "", n = `Frame ${Math.round(e.w)} by ${Math.round(e.h)} pixels, ${Math.round(e.x)} from the left, ${Math.round(e.y)} from the top, zoom ${Math.round(u(e, this._base) * 100)}%${t}.`;
-		this._live.textContent = n === this._live.textContent ? `${n} ` : n;
-	}
-	rotate() {
-		if (!this._rect) return;
-		let e = v(this._rect, this._natural.w, this._natural.h);
-		this._rotation = (this._rotation + 90) % 360, this._natural = _(this._source.w, this._source.h, this._rotation), this._base = o(this._natural.w, this._natural.h, this.aspect);
-		let t = this.aspect;
-		this._rect = t && t !== 1 ? { ...this._base } : e, this._paint(), this._announce();
-	}
-	reset() {
-		this._source && (this._rotation = 0, this._natural = { ...this._source }, this._resetRect(), this._announce());
-	}
-	_wire() {
-		let e = this._stage;
-		e.addEventListener("pointerdown", (t) => {
-			if (!this._rect || t.button > 0) return;
-			if (this._pointers.set(t.pointerId, {
-				x: t.clientX,
-				y: t.clientY
-			}), e.setPointerCapture?.(t.pointerId), this._pointers.size === 2) {
-				let [e, n] = [...this._pointers.values()];
-				this._drag = null, this._pinch = {
-					distance: N(e, n) || 1,
-					zoom: this.zoom,
-					done: !1
-				}, t.preventDefault();
-				return;
-			}
-			if (this._pinch) return;
-			let n = t.target.closest?.(".wui-crop-handle");
-			this._drag = {
-				id: t.pointerId,
-				corner: n ? n.dataset.handle : null,
-				x: t.clientX,
-				y: t.clientY,
-				start: { ...this._rect }
-			}, n || e.focus(), t.preventDefault();
-		}), e.addEventListener("pointermove", (t) => {
-			if (this._pointers.has(t.pointerId) && this._pointers.set(t.pointerId, {
-				x: t.clientX,
-				y: t.clientY
-			}), this._pinch) {
-				if (this._pinch.done || this._pointers.size < 2 || !this._pointers.has(t.pointerId)) return;
-				let [e, n] = [...this._pointers.values()], r = this._pinch.zoom * N(e, n) / this._pinch.distance;
-				this._rect = f(this._rect, this._base, r, this._natural.w, this._natural.h), this._paint();
-				return;
-			}
-			let n = this._drag;
-			if (!n || n.id !== t.pointerId) return;
-			let r = this._view(), { w: i, h: a } = this._natural;
-			if (n.corner) {
-				let o = e.getBoundingClientRect(), s = (t.clientX - o.left - e.clientLeft - r.left) / r.scale, c = (t.clientY - o.top - e.clientTop - r.top) / r.scale;
-				this._rect = m(this._rect, n.corner, s, c, i, a);
-			} else this._rect = c(n.start, (t.clientX - n.x) / r.scale, (t.clientY - n.y) / r.scale, i, a);
-			this._paint();
-		});
-		let t = (t) => {
-			if (this._pointers.delete(t.pointerId) && e.releasePointerCapture?.(t.pointerId), this._pinch) {
-				!this._pinch.done && this._pointers.size < 2 && (this._pinch.done = !0, this._announce()), this._pointers.size === 0 && (this._pinch = null);
-				return;
-			}
-			let n = this._drag;
-			!n || n.id !== t.pointerId || (this._drag = null, this._announce());
-		};
-		e.addEventListener("pointerup", t), e.addEventListener("pointercancel", t), e.addEventListener("keydown", (e) => this._onKey(e)), e.addEventListener("wheel", (e) => {
-			!this._rect || !this.contains(document.activeElement) || (e.preventDefault(), this.zoom *= e.deltaY < 0 ? 1.1 : 1 / 1.1);
-		}, { passive: !1 });
-		for (let e of ["input", "change"]) this._slider.addEventListener(e, (e) => e.stopPropagation());
-		this._slider.addEventListener("input", () => {
-			this.zoom = Number(this._slider.value);
-		});
-		for (let e of this.querySelectorAll(".wui-crop-zoombtn")) e.addEventListener("click", () => {
-			this.zoom *= e.dataset.zoom === "in" ? 1.25 : .8;
-		});
-		this.querySelector("[data-crop-action=\"rotate\"]").addEventListener("click", () => this.rotate()), this.querySelector("[data-crop-action=\"reset\"]").addEventListener("click", () => this.reset());
-	}
-	_onKey(e) {
-		if (!this._rect || e.altKey || e.ctrlKey || e.metaKey) return;
-		let { w: t, h: n } = this._natural;
-		if (e.key === "+" || e.key === "=") this.zoom *= 1.25, this._say();
-		else if (e.key === "-" || e.key === "_") this.zoom *= .8, this._say();
-		else if ((e.key === "r" || e.key === "R") && this.rotatable) this.rotate(), this._say();
-		else if (e.key.startsWith("Arrow")) {
-			let r = e.shiftKey ? E : T, i = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0, a = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0, o = e.target.closest?.(".wui-crop-handle")?.dataset.handle;
-			if (o) {
-				let e = this._rect, s = (o.endsWith("w") ? e.x : e.x + e.w) + i * r * e.w, c = (o.startsWith("n") ? e.y : e.y + e.h) + a * r * e.h;
-				this._rect = m(e, o, s, c, t, n);
-			} else this._rect = c(this._rect, i * r * this._rect.w, a * r * this._rect.h, t, n);
-			this._paint(), this._announce(), this._say();
-		} else return;
-		e.preventDefault();
-	}
-	async toBlob({ type: e, maxBytes: t = 0, size: n = 0 } = {}) {
-		if (!this._rect) return null;
-		let r = S(e), i = s(this._rect, this._natural.w, this._natural.h), { width: a, height: o } = n > 0 ? g(i, n) : h(i);
-		return w((e, t, n, r) => new Promise((a) => {
-			let o = document.createElement("canvas");
-			o.width = e, o.height = t;
-			let s = o.getContext("2d");
-			if (!s) {
-				a(null);
-				return;
-			}
-			n === "image/jpeg" && (s.fillStyle = "#fff", s.fillRect(0, 0, e, t)), this._drawCrop(s, i, e, t), o.toBlob(a, n, r);
-		}), {
-			width: a,
-			height: o,
-			type: r,
-			maxBytes: t
-		});
-	}
-	async toFile({ name: e, type: t, maxBytes: n = 0, size: r = 0 } = {}) {
-		let i = await this.toBlob({
-			type: t,
-			maxBytes: n,
-			size: r
-		});
-		return i ? new File([i], C(e, i.type), { type: i.type }) : null;
-	}
-};
-//#endregion
-export { P as t };