@file-viewer/vue3 2.2.7 → 2.2.9

package/dist/components/image.js

@@ -1,174 +1 @@
-import { i as e, t } from "./messages.js";
-import { d as n, i as r, p as i, r as a } from "./fit.js";
-//#region ../../core/dist/renderers/image.js
-var o = {
-	avif: "image/avif",
-	bmp: "image/bmp",
-	gif: "image/gif",
-	heic: "image/heic",
-	heif: "image/heif",
-	ico: "image/x-icon",
-	jxl: "image/jxl",
-	jpg: "image/jpeg",
-	jpeg: "image/jpeg",
-	png: "image/png",
-	svg: "image/svg+xml",
-	tif: "image/tiff",
-	tiff: "image/tiff",
-	webp: "image/webp"
-}, s = "\n.image-viewer{position:relative;width:100%;height:100%;overflow:auto;background:var(--file-viewer-render-surface-background,#eef1f4);box-sizing:border-box}\n.image-stage{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}\n.image-stage img{display:block;width:auto;max-width:none;margin:0 auto;border:0;box-shadow:0 18px 48px rgba(15,23,42,.16);background:#fff;cursor:zoom-in}\n.image-stage img:focus-visible{outline:3px solid #2563eb;outline-offset:4px}\n.image-lightbox{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(15,23,42,.9);box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}\n.image-lightbox[data-open='true']{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}\n.image-lightbox img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4);cursor:default;transform:scale(.985);transition:transform .18s ease}\n.image-lightbox[data-open='true'] img{transform:scale(1)}\n.image-lightbox button{position:absolute;top:16px;right:16px;display:grid;width:40px;height:40px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(255,255,255,.96);color:#172033;font:400 27px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.24);transition:background-color .14s ease,transform .14s ease}\n.image-lightbox button:hover{background:#fff;transform:scale(1.04)}\n.image-lightbox button:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}\n[data-viewer-theme='dark'] .image-viewer{background:var(--file-viewer-render-surface-background,#101820)}\n@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .image-viewer{background:var(--file-viewer-render-surface-background,#101820)}}\n@media (max-width:767px){.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox button{top:12px;right:12px}}\n@media (prefers-reduced-motion:reduce){.image-lightbox,.image-lightbox img,.image-lightbox button{transition:none}}\n", c = (e) => {
-	let t = e.createElement("style");
-	return t.textContent = s, t;
-}, l = (e) => o[(e || "").trim().toLowerCase()] || "image/*", u = function() {
-	var t = e(function* (e) {
-		return yield new Promise((t, n) => {
-			let r = new FileReader();
-			r.onload = (e) => {
-				var r;
-				let i = (r = e.target) == null ? void 0 : r.result;
-				if (typeof i == "string") {
-					t(i);
-					return;
-				}
-				n(/* @__PURE__ */ Error("Unable to read image data URL."));
-			}, r.onerror = () => n(r.error || /* @__PURE__ */ Error("Unable to read image data URL.")), r.readAsDataURL(e);
-		});
-	});
-	return function(e) {
-		return t.apply(this, arguments);
-	};
-}(), d = function() {
-	var t = e(function* (e, t) {
-		let n = (t || "").trim().toLowerCase();
-		if (n === "heic" || n === "heif") throw Error("HEIC/HEIF image conversion has moved out of @file-viewer/core. Install and pass @file-viewer/renderer-image, or use @file-viewer/preset-all.");
-		return u(new Blob([e], { type: l(n) }));
-	});
-	return function(e, n) {
-		return t.apply(this, arguments);
-	};
-}(), f = (e) => Number(e.toFixed(3)), p = (e, t, n) => {
-	let r = e.createElement("div");
-	r.className = "image-lightbox", r.dataset.open = "false", r.setAttribute("role", "dialog"), r.setAttribute("aria-modal", "true"), r.setAttribute("aria-hidden", "true");
-	let i = e.createElement("img");
-	i.alt = n("image.lightbox.alt"), i.src = t;
-	let a = e.createElement("button");
-	a.type = "button", a.setAttribute("aria-label", n("image.lightbox.close")), a.textContent = "×";
-	let o = null, s = () => {
-		r.dataset.open === "true" && (r.dataset.open = "false", r.setAttribute("aria-hidden", "true"), o != null && o.isConnected && o.focus({ preventScroll: !0 }), o = null);
-	}, c = (e) => {
-		e.key === "Escape" && r.dataset.open === "true" && (e.preventDefault(), s());
-	};
-	return a.addEventListener("click", s), r.addEventListener("click", (e) => {
-		e.target === r && s();
-	}), e.addEventListener("keydown", c), r.append(i, a), {
-		element: r,
-		open(t) {
-			o = t || (e.activeElement instanceof HTMLElement ? e.activeElement : null), r.dataset.open = "true", r.setAttribute("aria-hidden", "false"), a.focus({ preventScroll: !0 });
-		},
-		destroy() {
-			a.removeEventListener("click", s), e.removeEventListener("keydown", c), r.remove();
-		}
-	};
-};
-function m(e, t, n, r) {
-	return h.apply(this, arguments);
-}
-function h() {
-	return h = e(function* (e, o, s, u) {
-		var m, h;
-		let g = t(u == null ? void 0 : u.options), _ = o.ownerDocument || document, v = yield d(e, s);
-		(m = u == null ? void 0 : u.registerThumbnailAdapter) == null || m.call(u, { capture: () => new Blob([e], { type: l(s) }) });
-		let y = 1, b = 1, x = 1, S = 0, C = r(), w = _.createElement("div");
-		w.className = "image-viewer", w.dataset.viewerZoomProvider = "image";
-		let T = _.createElement("div");
-		T.className = "image-stage";
-		let E = _.createElement("img");
-		E.alt = g("image.alt"), E.src = v, E.tabIndex = 0, E.setAttribute("role", "button"), E.setAttribute("aria-haspopup", "dialog"), T.append(E), w.append(T);
-		let D = p(_, v, g), O = () => D.open(E), k = (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), D.open(E));
-		};
-		E.addEventListener("click", O), E.addEventListener("keydown", k);
-		let A = () => Math.min(.1, b || .1), j = (e) => {
-			let t = A();
-			return Math.min(5, Math.max(t, f(e)));
-		}, M = () => {
-			let e = E.naturalWidth || 0, t = E.naturalHeight || 0;
-			if (!e || !t) return 1;
-			let n = Math.max((w.clientWidth || 0) - 48, 1), r = Math.max((w.clientHeight || S || 0) - 48, 1);
-			return Math.min(1, n / e, r / t);
-		}, N = () => {
-			if (b = M(), x = j(b * y), E.naturalWidth && E.naturalHeight) {
-				E.style.width = `${Math.max(1, Math.round(E.naturalWidth * x))}px`, E.style.height = `${Math.max(1, Math.round(E.naturalHeight * x))}px`;
-				return;
-			}
-			E.style.width = "auto", E.style.height = S > 0 ? `${Math.max(1, Math.round(S * y))}px` : `${y * 100}%`;
-		}, P = () => {
-			S = w.clientHeight || 0, N(), C.emit();
-		}, F = new ResizeObserver(P);
-		F.observe(w), E.addEventListener("load", P);
-		let I = () => ({
-			scale: x,
-			label: `${Math.round(x * 100)}%`,
-			canZoomIn: x < 5,
-			canZoomOut: x > A(),
-			canReset: Math.abs(y - 1) > .001,
-			minScale: A(),
-			maxScale: 5
-		}), L = (e) => (y = j(e) / Math.max(b, .001), N(), C.emit(), I());
-		return n(w, {
-			zoomIn: () => L(x + .15),
-			zoomOut: () => L(x - .15),
-			resetZoom: () => (y = 1, N(), C.emit(), I()),
-			setZoom: L,
-			fit: (e) => {
-				var t, n;
-				let r = E.naturalWidth || 0, i = E.naturalHeight || 0;
-				if (!r || !i) return {
-					applied: !1,
-					mode: e.mode,
-					resize: e.resize,
-					source: e.source,
-					reason: "image-not-ready",
-					provider: "zoom"
-				};
-				let o = a({
-					mode: e.mode === "auto" ? "scale-down" : e.mode,
-					viewportWidth: Math.max(1, e.viewportWidth || w.clientWidth || 0),
-					viewportHeight: Math.max(1, e.viewportHeight || w.clientHeight || S || 0),
-					contentWidth: r,
-					contentHeight: i,
-					currentScale: x,
-					minScale: (t = e.minScale) == null ? A() : t,
-					maxScale: (n = e.maxScale) == null ? 5 : n
-				});
-				if (!o) return {
-					applied: !1,
-					mode: e.mode,
-					resize: e.resize,
-					source: e.source,
-					reason: "unmeasurable",
-					provider: "zoom"
-				};
-				let s = L(o);
-				return {
-					applied: !0,
-					mode: e.mode,
-					resize: e.resize,
-					scale: s.scale,
-					source: e.source,
-					provider: "zoom"
-				};
-			},
-			getState: I,
-			subscribe: C.subscribe
-		}), o.replaceChildren(c(_), w), (((h = u == null ? void 0 : u.surface) == null ? void 0 : h.shadowRoot) || o).append(D.element), P(), {
-			$el: o,
-			unmount() {
-				var e;
-				(e = u == null ? void 0 : u.registerThumbnailAdapter) == null || e.call(u, null), i(w), F.disconnect(), E.removeEventListener("load", P), E.removeEventListener("click", O), E.removeEventListener("keydown", k), D.destroy(), o.replaceChildren();
-			}
-		};
-	}), h.apply(this, arguments);
-}
-//#endregion
-export { m as default };
+(function(x,y){const al=g,z=x();while(!![]){try{const A=parseInt(al(0x211))/0x1+-parseInt(al(0x212))/0x2*(parseInt(al(0x20d))/0x3)+-parseInt(al(0x202))/0x4*(parseInt(al(0x1fe))/0x5)+parseInt(al(0x1f8))/0x6+-parseInt(al(0x208))/0x7*(parseInt(al(0x20b))/0x8)+parseInt(al(0x1f2))/0x9*(parseInt(al(0x218))/0xa)+-parseInt(al(0x209))/0xb*(parseInt(al(0x20a))/0xc);if(A===y)break;else z['push'](z['shift']());}catch(B){z['push'](z['shift']());}}}(b,0x30e02));import{i as j,t}from'./messages.js';import{d as k,i as q,p as v,r as w}from'./fit.js';var o={'avif':'image/avif','bmp':'image/bmp','gif':'image/gif','heic':'image/heic','heif':'image/heif','ico':'image/x-icon','jxl':'image/jxl','jpg':'image/jpeg','jpeg':'image/jpeg','png':'image/png','svg':'image/svg+xml','tif':'image/tiff','tiff':'image/tiff','webp':'image/webp'},s='\x0a.image-viewer{position:relative;width:100%;height:100%;overflow:auto;background:var(--file-viewer-render-surface-background,#eef1f4);box-sizing:border-box}\x0a.image-stage{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}\x0a.image-stage\x20img{display:block;width:auto;max-width:none;margin:0\x20auto;border:0;box-shadow:0\x2018px\x2048px\x20rgba(15,23,42,.16);background:#fff;cursor:zoom-in}\x0a.image-stage\x20img:focus-visible{outline:3px\x20solid\x20#2563eb;outline-offset:4px}\x0a.image-lightbox{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(15,23,42,.9);box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:opacity\x20.18s\x20ease,visibility\x200s\x20linear\x20.18s}\x0a.image-lightbox[data-open=\x27true\x27]{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}\x0a.image-lightbox\x20img{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0\x2030px\x2080px\x20rgba(0,0,0,.4);cursor:default;transform:scale(.985);transition:transform\x20.18s\x20ease}\x0a.image-lightbox[data-open=\x27true\x27]\x20img{transform:scale(1)}\x0a.image-lightbox\x20button{position:absolute;top:16px;right:16px;display:grid;width:40px;height:40px;place-items:center;padding:0;border:1px\x20solid\x20rgba(255,255,255,.7);border-radius:999px;background:rgba(255,255,255,.96);color:#172033;font:400\x2027px/1\x20Arial,sans-serif;cursor:pointer;box-shadow:0\x2012px\x2028px\x20rgba(0,0,0,.24);transition:background-color\x20.14s\x20ease,transform\x20.14s\x20ease}\x0a.image-lightbox\x20button:hover{background:#fff;transform:scale(1.04)}\x0a.image-lightbox\x20button:focus-visible{outline:3px\x20solid\x20#60a5fa;outline-offset:2px}\x0a[data-viewer-theme=\x27dark\x27]\x20.image-viewer{background:var(--file-viewer-render-surface-background,#101820)}\x0a@media\x20(prefers-color-scheme:dark){[data-viewer-theme=\x27system\x27]\x20.image-viewer{background:var(--file-viewer-render-surface-background,#101820)}}\x0a@media\x20(max-width:767px){.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox\x20button{top:12px;right:12px}}\x0a@media\x20(prefers-reduced-motion:reduce){.image-lightbox,.image-lightbox\x20img,.image-lightbox\x20button{transition:none}}\x0a',c=x=>{let y=x['createElement']('style');return y['textContent']=s,y;},l=x=>o[(x||'')['trim']()['toLowerCase']()]||'image/*',u=(function(){var x=j(function*(y){return yield new Promise((z,A)=>{const an=g;let B=new FileReader();B['onload']=C=>{const am=g;var D;let E=(D=C[am(0x205)])==null?void 0x0:D['result'];if(typeof E==am(0x1f6)){z(E);return;}A(Error('Unable\x20to\x20read\x20image\x20data\x20URL.'));},B['onerror']=()=>A(B['error']||Error(an(0x21a))),B['readAsDataURL'](y);});});return function(y){return x['apply'](this,arguments);};}()),d=(function(){var x=j(function*(y,z){let A=(z||'')['trim']()['toLowerCase']();if(A==='heic'||A==='heif')throw Error('HEIC/HEIF\x20image\x20conversion\x20has\x20moved\x20out\x20of\x20@file-viewer/core.\x20Install\x20and\x20pass\x20@file-viewer/renderer-image,\x20or\x20use\x20@file-viewer/preset-all.');return u(new Blob([y],{'type':l(A)}));});return function(y,z){return x['apply'](this,arguments);};}()),f=x=>Number(x['toFixed'](0x3)),p=(x,y,z)=>{const ao=g;let A=x[ao(0x1f9)](ao(0x216));A['className']='image-lightbox',A['dataset']['open']='false',A['setAttribute']('role','dialog'),A['setAttribute']('aria-modal',ao(0x210)),A['setAttribute']('aria-hidden','true');let B=x[ao(0x1f9)]('img');B['alt']=z('image.lightbox.alt'),B[ao(0x1fb)]=y;let C=x['createElement']('button');C[ao(0x201)]='button',C['setAttribute']('aria-label',z('image.lightbox.close')),C['textContent']='×';let D=null,E=()=>{const ap=ao;A[ap(0x207)]['open']===ap(0x210)&&(A['dataset']['open']='false',A['setAttribute']('aria-hidden','true'),D!=null&&D['isConnected']&&D['focus']({'preventScroll':!0x0}),D=null);},F=G=>{const aq=ao;G['key']===aq(0x20f)&&A['dataset']['open']==='true'&&(G['preventDefault'](),E());};return C['addEventListener']('click',E),A['addEventListener']('click',G=>{G['target']===A&&E();}),x['addEventListener'](ao(0x1fd),F),A['append'](B,C),{'element':A,'open'(G){const ar=ao;D=G||(x['activeElement']instanceof HTMLElement?x['activeElement']:null),A[ar(0x207)]['open']='true',A['setAttribute']('aria-hidden',ar(0x217)),C[ar(0x20e)]({'preventScroll':!0x0});},'destroy'(){const as=ao;C['removeEventListener']('click',E),x['removeEventListener'](as(0x1fd),F),A['remove']();}};};function g(a,c){a=a-0x1f1;const d=b();let e=d[a];return e;}function b(){const az=['1308390ULYygT','createElement','viewerZoomProvider','src','scale','keydown','5oOvLmg','clientWidth','image.alt','type','715508UXyeTg','surface','height','target','naturalHeight','dataset','36281RToVox','33022lcGMQl','444yKamSg','232bWkLkV','open','100983LABmrF','focus','Escape','true','388317AQrsbJ','10DpNbyz','apply','role','options','div','false','2023750kIpqSY','minScale','Unable\x20to\x20read\x20image\x20data\x20URL.','auto','9LYFtrm','naturalWidth','dialog','image-stage','string','registerThumbnailAdapter'];b=function(){return az;};return b();}function m(x,y,z,A){const at=g;return h[at(0x213)](this,arguments);}function h(){const ay=g;return h=j(function*(z,B,G,H){const au=g;var J,K;let Q=t(H==null?void 0x0:H[au(0x215)]),R=B['ownerDocument']||document,U=yield d(z,G);(J=H==null?void 0x0:H[au(0x1f7)])==null||J['call'](H,{'capture':()=>new Blob([z],{'type':l(G)})});let V=0x1,W=0x1,X=0x1,Y=0x0,Z=q(),a0=R['createElement']('div');a0['className']='image-viewer',a0[au(0x207)][au(0x1fa)]='image';let a1=R['createElement'](au(0x216));a1['className']=au(0x1f5);let a2=R['createElement']('img');a2['alt']=Q(au(0x200)),a2[au(0x1fb)]=U,a2['tabIndex']=0x0,a2['setAttribute'](au(0x214),'button'),a2['setAttribute']('aria-haspopup',au(0x1f4)),a1['append'](a2),a0['append'](a1);let a3=p(R,U,Q),a4=()=>a3['open'](a2),a5=ae=>{const av=au;(ae['key']==='Enter'||ae['key']==='\x20')&&(ae['preventDefault'](),a3[av(0x20c)](a2));};a2['addEventListener']('click',a4),a2['addEventListener'](au(0x1fd),a5);let a6=()=>Math['min'](0.1,W||0.1),a7=ae=>{let af=a6();return Math['min'](0x5,Math['max'](af,f(ae)));},a8=()=>{let ae=a2['naturalWidth']||0x0,af=a2['naturalHeight']||0x0;if(!ae||!af)return 0x1;let ag=Math['max']((a0['clientWidth']||0x0)-0x30,0x1),ah=Math['max']((a0['clientHeight']||Y||0x0)-0x30,0x1);return Math['min'](0x1,ag/ae,ah/af);},a9=()=>{const aw=au;if(W=a8(),X=a7(W*V),a2[aw(0x1f3)]&&a2['naturalHeight']){a2['style']['width']=Math['max'](0x1,Math['round'](a2['naturalWidth']*X))+'px',a2['style']['height']=Math['max'](0x1,Math['round'](a2['naturalHeight']*X))+'px';return;}a2['style']['width']=aw(0x1f1),a2['style'][aw(0x204)]=Y>0x0?Math['max'](0x1,Math['round'](Y*V))+'px':V*0x64+'%';},aa=()=>{Y=a0['clientHeight']||0x0,a9(),Z['emit']();},ab=new ResizeObserver(aa);ab['observe'](a0),a2['addEventListener']('load',aa);let ac=()=>({'scale':X,'label':Math['round'](X*0x64)+'%','canZoomIn':X<0x5,'canZoomOut':X>a6(),'canReset':Math['abs'](V-0x1)>0.001,'minScale':a6(),'maxScale':0x5}),ad=ae=>(V=a7(ae)/Math['max'](W,0.001),a9(),Z['emit'](),ac());return k(a0,{'zoomIn':()=>ad(X+0.15),'zoomOut':()=>ad(X-0.15),'resetZoom':()=>(V=0x1,a9(),Z['emit'](),ac()),'setZoom':ad,'fit':ae=>{const ax=au;var af,ag;let ah=a2[ax(0x1f3)]||0x0,ai=a2[ax(0x206)]||0x0;if(!ah||!ai)return{'applied':!0x1,'mode':ae['mode'],'resize':ae['resize'],'source':ae['source'],'reason':'image-not-ready','provider':'zoom'};let aj=w({'mode':ae['mode']==='auto'?'scale-down':ae['mode'],'viewportWidth':Math['max'](0x1,ae['viewportWidth']||a0[ax(0x1ff)]||0x0),'viewportHeight':Math['max'](0x1,ae['viewportHeight']||a0['clientHeight']||Y||0x0),'contentWidth':ah,'contentHeight':ai,'currentScale':X,'minScale':(af=ae[ax(0x219)])==null?a6():af,'maxScale':(ag=ae['maxScale'])==null?0x5:ag});if(!aj)return{'applied':!0x1,'mode':ae['mode'],'resize':ae['resize'],'source':ae['source'],'reason':'unmeasurable','provider':'zoom'};let ak=ad(aj);return{'applied':!0x0,'mode':ae['mode'],'resize':ae['resize'],'scale':ak[ax(0x1fc)],'source':ae['source'],'provider':'zoom'};},'getState':ac,'subscribe':Z['subscribe']}),B['replaceChildren'](c(R),a0),(((K=H==null?void 0x0:H[au(0x203)])==null?void 0x0:K['shadowRoot'])||B)['append'](a3['element']),aa(),{'$el':B,'unmount'(){var ae;(ae=H==null?void 0x0:H['registerThumbnailAdapter'])==null||ae['call'](H,null),v(a0),ab['disconnect'](),a2['removeEventListener']('load',aa),a2['removeEventListener']('click',a4),a2['removeEventListener']('keydown',a5),a3['destroy'](),B['replaceChildren']();}};}),h[ay(0x213)](this,arguments);}export{m as default};