@webority/ui-elements 0.22.0 → 0.23.1

package/dist/ui-file-viewer.js

@@ -0,0 +1,303 @@
+import { i as e, r as t, t as n } from "./fileViewerUi-CnRi0mTH.js";
+//#region src/elementBase.js
+var r = typeof HTMLElement > "u" ? class {} : HTMLElement, i = {
+	pdf: "pdf",
+	jpg: "image",
+	jpeg: "image",
+	png: "image",
+	webp: "image",
+	gif: "image",
+	avif: "image",
+	bmp: "image",
+	svg: "image",
+	mp4: "video",
+	m4v: "video",
+	webm: "video",
+	ogv: "video",
+	mp3: "audio",
+	m4a: "audio",
+	aac: "audio",
+	wav: "audio",
+	ogg: "audio",
+	oga: "audio",
+	opus: "audio",
+	flac: "audio"
+}, a = {
+	"application/pdf": "pdf",
+	"image/jpeg": "image",
+	"image/png": "image",
+	"image/webp": "image",
+	"image/gif": "image",
+	"image/avif": "image",
+	"image/bmp": "image",
+	"image/svg+xml": "image",
+	"video/mp4": "video",
+	"video/webm": "video",
+	"video/ogg": "video",
+	"audio/mpeg": "audio",
+	"audio/mp4": "audio",
+	"audio/aac": "audio",
+	"audio/wav": "audio",
+	"audio/x-wav": "audio",
+	"audio/ogg": "audio",
+	"audio/opus": "audio",
+	"audio/webm": "audio",
+	"audio/flac": "audio"
+}, o = "wui-file-viewer:load", s = "wui-file-viewer:error", c = "wui-file-viewer:prefs-change";
+function l(e, t) {
+	let n = String(e ?? "").split(";")[0].trim().toLowerCase();
+	if (n) return a[n] ?? null;
+	let r = String(t ?? "").split(/[?#]/)[0];
+	return i[r.includes(".") ? r.split(".").pop().toLowerCase() : ""] ?? null;
+}
+function u(e) {
+	let t = String(e ?? "").split(/[?#]/)[0].split("/").filter(Boolean).pop() ?? "";
+	try {
+		return decodeURIComponent(t);
+	} catch {
+		return t;
+	}
+}
+var d = {
+	pdf: () => import("./fileViewerPdf-CRBzt1sz.js").then((e) => e.PdfView),
+	image: () => import("./fileViewerImage-BCa3VOzL.js").then((e) => e.ImageView),
+	video: () => import("./fileViewerMedia-nWkR08x2.js").then((e) => e.MediaView),
+	audio: () => import("./fileViewerMedia-nWkR08x2.js").then((e) => e.MediaView)
+}, f = 0, p = class i extends r {
+	static defaultAssetBase = "";
+	static get observedAttributes() {
+		return [
+			"src",
+			"name",
+			"type",
+			"download",
+			"worker-src",
+			"asset-base",
+			"captions"
+		];
+	}
+	constructor() {
+		super(), f += 1, this.uid = `wui-file-viewer-${f}`, this._prefs = {}, this._onFullscreen = () => this._syncFullscreen();
+	}
+	get src() {
+		return this.getAttribute("src") ?? "";
+	}
+	set src(e) {
+		this.setAttribute("src", String(e ?? ""));
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(e) {
+		this.setAttribute("name", String(e ?? ""));
+	}
+	get type() {
+		return this.getAttribute("type") ?? "";
+	}
+	set type(e) {
+		this.setAttribute("type", String(e ?? ""));
+	}
+	get viewKey() {
+		return this.getAttribute("view-key") ?? "";
+	}
+	set viewKey(e) {
+		this.setAttribute("view-key", String(e ?? ""));
+	}
+	get download() {
+		return this.hasAttribute("download");
+	}
+	set download(e) {
+		this.toggleAttribute("download", e === !0 || e === "" || e === "true");
+	}
+	get workerSrc() {
+		return this.getAttribute("worker-src") ?? "";
+	}
+	set workerSrc(e) {
+		this.setAttribute("worker-src", String(e ?? ""));
+	}
+	get captions() {
+		return this.getAttribute("captions") ?? "";
+	}
+	set captions(e) {
+		this.setAttribute("captions", String(e ?? ""));
+	}
+	get assetBase() {
+		return this.getAttribute("asset-base") ?? "";
+	}
+	set assetBase(e) {
+		this.setAttribute("asset-base", String(e ?? ""));
+	}
+	get prefs() {
+		return { ...this._prefs };
+	}
+	set prefs(e) {
+		this._hostPrefs = !0, this._prefs = e && typeof e == "object" ? { ...e } : {};
+	}
+	get actionsContainer() {
+		return this._actionsBox ?? null;
+	}
+	displayName() {
+		return this.name || u(this.src) || "Document";
+	}
+	connectedCallback() {
+		if (Object.hasOwn(this, "prefs")) {
+			let e = this.prefs;
+			delete this.prefs, this.prefs = e;
+		}
+		document.addEventListener("fullscreenchange", this._onFullscreen), this._open();
+	}
+	disconnectedCallback() {
+		document.removeEventListener("fullscreenchange", this._onFullscreen), this._close();
+	}
+	attributeChangedCallback(e, t, n) {
+		!this.isConnected || !this._parts || t === n || (e === "name" ? this._parts.name.textContent = this.displayName() : e === "download" ? this._syncDownload() : this._open());
+	}
+	_close() {
+		this._view?.destroy(), this._view = null, this._loadId = (this._loadId ?? 0) + 1;
+	}
+	async _open() {
+		this._close();
+		let e = this._loadId;
+		this._render(), this._prefs = this._readPrefs();
+		let t = l(this.type, this.name || this.src);
+		if (!this.src) {
+			this._status("No file to show.");
+			return;
+		}
+		if (!t) {
+			this._status("This file can't be shown here.", { offerDownload: !0 });
+			return;
+		}
+		this._status("Loading...");
+		let n;
+		try {
+			n = await d[t]();
+		} catch (t) {
+			e === this._loadId && this._fail(t);
+			return;
+		}
+		e === this._loadId && (this._view = new n(this._shell(e), {
+			src: this.src,
+			kind: t,
+			captions: this.captions,
+			workerSrc: this.workerSrc,
+			assetBase: m(this.assetBase || i.defaultAssetBase)
+		}), this._view.load());
+	}
+	_shell(e) {
+		let t = () => e === this._loadId, n = this._parts;
+		return {
+			host: this,
+			start: n.start,
+			center: n.center,
+			end: n.viewEnd,
+			search: n.search,
+			body: n.body,
+			prefs: { ...this._prefs },
+			name: () => this.displayName(),
+			savePrefs: (e) => {
+				t() && this._savePrefs(e);
+			},
+			loaded: (e) => {
+				t() && (n.body.removeAttribute("aria-busy"), this.dispatchEvent(new CustomEvent(o, {
+					bubbles: !0,
+					detail: e
+				})));
+			},
+			fail: (e) => {
+				t() && this._fail(e);
+			}
+		};
+	}
+	_render() {
+		let r = (e, t) => {
+			let n = document.createElement(e);
+			return n.className = t, n;
+		}, i = r("div", "wui-file-viewer-toolbar"), a = r("div", "wui-file-viewer-group wui-file-viewer-start"), o = r("span", "wui-file-viewer-name");
+		o.textContent = this.displayName(), o.title = this.displayName(), a.append(o);
+		let s = r("div", "wui-file-viewer-group wui-file-viewer-center"), c = r("div", "wui-file-viewer-group wui-file-viewer-end"), l = r("div", "wui-file-viewer-group wui-file-viewer-view-end"), u = r("a", "u-action wui-file-viewer-download");
+		u.style.setProperty("--wui-action-size", "32px"), t(u, "download"), e(u, "Download");
+		let d = n("maximize-4", "Full screen", { className: "wui-file-viewer-fullscreen" });
+		d.addEventListener("click", () => this.toggleFullscreen()), d.hidden = !document.fullscreenEnabled, this._actionsBox ??= r("div", "wui-file-viewer-actions");
+		let f = this._actionsBox;
+		f.append(...this.querySelectorAll(":scope > [slot=\"actions\"]")), c.append(l, u, d, f);
+		let p = r("search", "wui-file-viewer-search");
+		p.hidden = !0, i.append(a, s, c, p);
+		let m = r("div", "wui-file-viewer-body");
+		m.setAttribute("aria-busy", "true"), this.replaceChildren(i, m), this._parts = {
+			toolbar: i,
+			start: a,
+			name: o,
+			center: s,
+			end: c,
+			viewEnd: l,
+			downloadLink: u,
+			fullscreen: d,
+			actionsBox: f,
+			search: p,
+			body: m
+		}, this._syncDownload(), this._syncFullscreen();
+	}
+	_syncDownload() {
+		let e = this._parts.downloadLink;
+		e.hidden = !this.download || !this.src, e.href = this.src, e.setAttribute("download", this.displayName());
+	}
+	_status(e, { offerDownload: t = !1 } = {}) {
+		let n = document.createElement("div");
+		n.className = "wui-file-viewer-status";
+		let r = document.createElement("p");
+		if (r.textContent = e, n.append(r), t && this.src) {
+			let e = document.createElement("a");
+			e.className = "btn btn-sm btn-outline-secondary", e.href = this.src, e.setAttribute("download", this.displayName()), e.textContent = "Download", n.append(e);
+		}
+		this._parts.body.replaceChildren(n);
+	}
+	_fail(e) {
+		this._view?.destroy(), this._view = null, this._parts.body.removeAttribute("aria-busy"), this._status("Couldn't open this file.", { offerDownload: !0 }), this.dispatchEvent(new CustomEvent(s, {
+			bubbles: !0,
+			detail: { message: e?.message ?? String(e) }
+		}));
+	}
+	toggleFullscreen() {
+		if (document.fullscreenElement) {
+			document.exitFullscreen();
+			return;
+		}
+		this.requestFullscreen().catch((e) => {
+			console.warn("[wui-file-viewer] full screen refused:", e?.message);
+		});
+	}
+	_syncFullscreen() {
+		if (!this._parts) return;
+		let n = document.fullscreenElement === this, r = this._parts.fullscreen;
+		t(r, n ? "x" : "maximize-4"), e(r, n ? "Exit full screen" : "Full screen"), this._parts.actionsBox.hidden = n;
+	}
+	_readPrefs() {
+		if (this._hostPrefs || !this.viewKey) return { ...this._prefs };
+		try {
+			return JSON.parse(window.localStorage.getItem(`wui-view:${this.viewKey}`) ?? "{}") ?? {};
+		} catch {
+			return {};
+		}
+	}
+	_savePrefs(e) {
+		if (this._prefs = {
+			...this._prefs,
+			...e
+		}, this.dispatchEvent(new CustomEvent(c, {
+			bubbles: !0,
+			detail: { ...this._prefs }
+		})), !(this._hostPrefs || !this.viewKey)) try {
+			window.localStorage.setItem(`wui-view:${this.viewKey}`, JSON.stringify(this._prefs));
+		} catch {}
+	}
+};
+function m(e) {
+	return e && new URL(e, document.baseURI).href;
+}
+//#endregion
+//#region src/fileViewer.js
+var h = typeof document > "u" ? null : document.currentScript;
+h?.src && (p.defaultAssetBase = new URL("pdfjs/", h.src).href), typeof customElements < "u" && !customElements.get("wui-file-viewer") && customElements.define("wui-file-viewer", p);
+//#endregion
+export { p as WuiFileViewer, l as fileKind, u as fileNameFromUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -14,7 +14,8 @@
     "directory": "packages/elements"
   },
   "files": [
-    "dist"
+    "dist",
+    "THIRD-PARTY-NOTICES.txt"
   ],
   "main": "./dist/ui-elements.js",
   "module": "./dist/ui-elements.js",
@@ -22,13 +23,15 @@
     ".": "./dist/ui-elements.js",
     "./global": "./dist/ui-elements.global.js",
     "./consent-banner": "./dist/ui-consent-banner.global.js",
+    "./file-viewer": "./dist/ui-file-viewer.js",
     "./package.json": "./package.json"
   },
   "sideEffects": [
     "./dist/*"
   ],
   "dependencies": {
-    "libphonenumber-js": "^1.13.9"
+    "libphonenumber-js": "^1.13.9",
+    "pdfjs-dist": "5.4.296"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "5.0.1",
@@ -37,7 +40,7 @@
     "vitest": "5.0.1"
   },
   "scripts": {
-    "build": "vite build && vite build -c vite.consent-banner.config.js && node ../../scripts/sync-rcl-assets.mjs elements",
+    "build": "vite build && vite build -c vite.consent-banner.config.js && vite build -c vite.file-viewer.config.js && node ../../scripts/sync-rcl-assets.mjs elements",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"

package/LICENSE

@@ -1,5 +0,0 @@
-Copyright (c) Webority Technologies. All rights reserved.
-
-This software and its source code are proprietary and confidential to
-Webority Technologies. Use is restricted to Webority products and teams under
-internal license. Redistribution outside Webority Technologies is prohibited.