@uploadcare/file-uploader 1.25.0-alpha.2 → 1.25.0-alpha.3

package/web/uc-img.min.js

@@ -23,6 +23,6 @@
  * SOFTWARE.
  * 
  */
-var z=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var T=(r,s,t,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of F(s))!H.call(r,i)&&i!==t&&z(r,i,{get:()=>s[i],enumerable:!(e=N(s,i))||e.enumerable});return r},u=(r,s,t)=>(T(r,s,"default"),t&&T(t,s,"default"));var W=r=>{if(typeof r!="string"||!r)return"";let s=r.trim();return s.startsWith("-/")?s=s.slice(2):s.startsWith("/")&&(s=s.slice(1)),s.endsWith("/")&&(s=s.slice(0,s.length-1)),s},Q=(...r)=>r.filter(s=>typeof s=="string"&&!!s).map(s=>W(s)).join("/-/"),$=(...r)=>{let s=Q(...r);return s?`-/${s}/`:""};function S(r){let s=new URL(r),t=s.pathname+s.search+s.hash,e=t.lastIndexOf("http"),i=t.lastIndexOf("/"),n="";return e>=0?n=t.slice(e):i>=0&&(n=t.slice(i+1)),n}function G(r){let s=new URL(r),t=S(r),e=O(t)?U(t).pathname:t;return s.pathname=s.pathname.replace(e,""),s.search="",s.hash="",s.toString()}function O(r){return r.startsWith("http")}function U(r){let s=new URL(r);return{pathname:`${s.origin}${s.pathname??""}`,search:s.search??"",hash:s.hash??""}}var d=(r,s,t)=>{let e=new URL(G(r)),i=t??S(r),n=s??"";if(e.pathname.startsWith("//")&&(e.pathname=e.pathname.replace("//","/")),i&&O(i)){let a=U(i);e.pathname=`${e.pathname}${n}${a.pathname||""}`,e.search=a.search,e.hash=a.hash}else e.pathname=`${e.pathname}${n}${i||""}`;return e.toString()},_=(r,s)=>{let t=new URL(r);return t.pathname=`${s}/`,t.toString()};var L=(r,s=",")=>r.trim().split(s).map(t=>t.trim()).filter(t=>t.length>0);var q=r=>r;function j(r,s={},t={}){let{openToken:e="{{",closeToken:i="}}",transform:n=q}=t;for(let a in s){let l=s[a],c=l?.toString(),m=typeof c=="string"?n(c):String(c);r=r.replaceAll(e+a+i,m)}return r}var k=r=>[...new Set(r)];var p="--uc-img-",E="unresolved";var w=!window.location.host.trim()||window.location.host.includes(":")||window.location.hostname.includes("localhost"),x=3e3,C=5e3,P=Object.freeze({PREVIEW:"PREVIEW",MAIN:"MAIN"});var o={};u(o,ut);u(o,pt);import"@lit/reactive-element";import"lit-html";import*as ut from"lit-element/lit-element.js";import*as pt from"lit-html/is-server.js";var M="1.25.0-alpha.2";var R="blocks",A=M;var X=/\\([0-9a-fA-F]{1,6} ?)/g;function Y(r){return r.length<2?!1:(r[0]==='"'||r[0]==="'")&&(r[r.length-1]==='"'||r[r.length-1]==="'")}function Z(r){let s=r;return(s[0]==='"'||s[0]==="'")&&(s=s.slice(1)),(s[s.length-1]==='"'||s[s.length-1]==="'")&&(s=s.slice(0,-1)),s}function tt(r){let s="",t="";for(let e=0;e<r.length;e++){let i=r[e+1];r[e]==="\\"&&i==='"'?(s+='\\"',e++):r[e]==='"'&&t!=="\\"?s+='\\"':s+=r[e],t=r[e]??""}return s}function D(r){let s=r;Y(r)&&(s=Z(s),s=s.replace(X,(t,e)=>String.fromCodePoint(parseInt(e.trim(),16))),s=s.replaceAll(`\\
+var z=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var T=(r,s,t,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of F(s))!H.call(r,i)&&i!==t&&z(r,i,{get:()=>s[i],enumerable:!(e=N(s,i))||e.enumerable});return r},u=(r,s,t)=>(T(r,s,"default"),t&&T(t,s,"default"));var W=r=>{if(typeof r!="string"||!r)return"";let s=r.trim();return s.startsWith("-/")?s=s.slice(2):s.startsWith("/")&&(s=s.slice(1)),s.endsWith("/")&&(s=s.slice(0,s.length-1)),s},Q=(...r)=>r.filter(s=>typeof s=="string"&&!!s).map(s=>W(s)).join("/-/"),$=(...r)=>{let s=Q(...r);return s?`-/${s}/`:""};function S(r){let s=new URL(r),t=s.pathname+s.search+s.hash,e=t.lastIndexOf("http"),i=t.lastIndexOf("/"),n="";return e>=0?n=t.slice(e):i>=0&&(n=t.slice(i+1)),n}function G(r){let s=new URL(r),t=S(r),e=O(t)?U(t).pathname:t;return s.pathname=s.pathname.replace(e,""),s.search="",s.hash="",s.toString()}function O(r){return r.startsWith("http")}function U(r){let s=new URL(r);return{pathname:`${s.origin}${s.pathname??""}`,search:s.search??"",hash:s.hash??""}}var d=(r,s,t)=>{let e=new URL(G(r)),i=t??S(r),n=s??"";if(e.pathname.startsWith("//")&&(e.pathname=e.pathname.replace("//","/")),i&&O(i)){let a=U(i);e.pathname=`${e.pathname}${n}${a.pathname||""}`,e.search=a.search,e.hash=a.hash}else e.pathname=`${e.pathname}${n}${i||""}`;return e.toString()},_=(r,s)=>{let t=new URL(r);return t.pathname=`${s}/`,t.toString()};var L=(r,s=",")=>r.trim().split(s).map(t=>t.trim()).filter(t=>t.length>0);var q=r=>r;function j(r,s={},t={}){let{openToken:e="{{",closeToken:i="}}",transform:n=q}=t;for(let a in s){let l=s[a],c=l?.toString(),m=typeof c=="string"?n(c):String(c);r=r.replaceAll(e+a+i,m)}return r}var k=r=>[...new Set(r)];var p="--uc-img-",E="unresolved";var w=!window.location.host.trim()||window.location.host.includes(":")||window.location.hostname.includes("localhost"),x=3e3,C=5e3,P=Object.freeze({PREVIEW:"PREVIEW",MAIN:"MAIN"});var o={};u(o,ut);u(o,pt);import"@lit/reactive-element";import"lit-html";import*as ut from"lit-element/lit-element.js";import*as pt from"lit-html/is-server.js";var M="1.25.0-alpha.3";var R="blocks",A=M;var X=/\\([0-9a-fA-F]{1,6} ?)/g;function Y(r){return r.length<2?!1:(r[0]==='"'||r[0]==="'")&&(r[r.length-1]==='"'||r[r.length-1]==="'")}function Z(r){let s=r;return(s[0]==='"'||s[0]==="'")&&(s=s.slice(1)),(s[s.length-1]==='"'||s[s.length-1]==="'")&&(s=s.slice(0,-1)),s}function tt(r){let s="",t="";for(let e=0;e<r.length;e++){let i=r[e+1];r[e]==="\\"&&i==='"'?(s+='\\"',e++):r[e]==='"'&&t!=="\\"?s+='\\"':s+=r[e],t=r[e]??""}return s}function D(r){let s=r;Y(r)&&(s=Z(s),s=s.replace(X,(t,e)=>String.fromCodePoint(parseInt(e.trim(),16))),s=s.replaceAll(`\\
 `,"\\n"),s=tt(s),s='"'+s+'"');try{return JSON.parse(s)}catch{return}}function B(r){class s extends r{constructor(){super(...arguments);this.cssDataCache=null;this.computedStyle=null}getCssData(i,n=!1){let a=this.cssDataCache??Object.create(null);if(!Object.keys(a).includes(i)||!a[i]){this.computedStyle||(this.computedStyle=window.getComputedStyle(this));let l=this.computedStyle.getPropertyValue(i).trim();try{a[i]=D(l)}catch(c){n||console.warn(`CSS Data error: ${i}`,c),a[i]=null}}return this.cssDataCache=a,a[i]}}return s}function K(r){class s extends r{static reg(e){let i=this,n=window.customElements.get(e);if(n){n!==i&&console.warn([`Element with tag name "${e}" already registered.`,`You're trying to override it with another class "${this.name}".`,"This is most likely a mistake.","New element will not be registered."].join(`
 `));return}window.customElements.define(e,i)}}return s}var et="https://ucarecdn.com",g=Object.freeze({"dev-mode":{},pubkey:{},uuid:{},src:{},lazy:{default:1},intersection:{},breakpoints:{},"cdn-cname":{default:et},"proxy-cname":{},"secure-delivery-proxy":{},"hi-res-support":{default:1},"ultra-res-support":{},format:{},"cdn-operations":{},progressive:{},quality:{},"is-background-for":{},"is-preview-blur":{default:1}});var h=class extends B(K(o.LitElement)){constructor(){super();this._state={};this._subscribers=new Map;this._isnObserver=null;this._observed=null;for(let t in g){let e=g[t];this._state[p+t]=e?.default||""}}createRenderRoot(){return this}$$(t){return this._state[p+t]}set$$(t){for(let e in t){let i=p+e,n=t[e];this._state[i]=n,this._notify(i,n)}}sub$$(t,e){let i=p+t;this._subscribers.has(i)||this._subscribers.set(i,new Set),this._subscribers.get(i).add(e);let n=this._state[i];n!==null&&n!==""&&e(n)}_notify(t,e){this._subscribers.has(t)&&this._subscribers.get(t).forEach(i=>{e===null||e===""||i(e)})}analyticsParams(){return`-/@clib/${R}/${A}/uc-img/`}initAttributes(t){Array.from(this.attributes).forEach(e=>{let i=e;g[i.name]||t.setAttribute(i.name,i.value)})}initIntersection(t,e){let i={root:null,rootMargin:"0px"};this._isnObserver=new IntersectionObserver(n=>{n.forEach(a=>{a.isIntersecting&&(e(),this._isnObserver.unobserve(t))})},i),this._isnObserver.observe(t),this._observed||(this._observed=new Set),this._observed.add(t)}connectedCallback(){super.connectedCallback(),this._initCssProperties()}_initCssProperties(){for(let t in g){let e=p+t,i=this.getCssData(e,!0);i!=null&&(this._state[e]=i)}}disconnectedCallback(){super.disconnectedCallback(),this._isnObserver&&(this._observed?.forEach(t=>{this._isnObserver?.unobserve(t)}),this._isnObserver=null),this._subscribers.clear()}static get observedAttributes(){return Object.keys(g)}attributeChangedCallback(t,e,i){window.setTimeout(()=>{let n=p+t;this._state[n]=i,this._notify(n,i)})}};var V=r=>Object.entries(r).filter(([s,t])=>t!==void 0&&t!=="").map(([s,t])=>s==="cdn-operations"||s==="analytics"?t:`${s}/${t}`);var y=class extends h{constructor(){super(...arguments);this._img=new Image;this._imgPreview=new Image}_fmtAbs(t){return!t.includes("//")&&!w&&(t=new URL(t,document.baseURI).href),t}_validateSize(t){if(t?.trim()!==""){let e=t,i=e.match(/\d+/)[0],n=e.match(/[a-zA-Z]+/)[0],a=parseInt(i,10);if(Number(a)>C&&this.hasFormatJPG)return C+n;if(Number(a)>x&&!this.hasFormatJPG)return x+n}return t}_getCdnModifiers(t,e){let i={format:this._getTypedCssValue("format"),quality:this._getTypedCssValue("quality"),resize:this._validateSize(t),blur:e,"cdn-operations":this._getTypedCssValue("cdn-operations")??void 0,analytics:this.analyticsParams()};return $(...V(i))}_getTypedCssValue(t){let e=this.$$(t);if(e==null||typeof e=="string"||typeof e=="number"||typeof e=="boolean")return e}_getUrlBase(t="",e=""){let i=this.$$("src");if(i.startsWith("data:")||i.startsWith("blob:"))return i;if(w&&i&&!i.includes("//"))return this._proxyUrl(i);let n=this._getCdnModifiers(t,e),a=this.$$("cdn-cname"),l=a;if(i.startsWith(String(a)))return d(i,n);let c=this.$$("uuid");if(l&&c)return this._proxyUrl(d(_(l,c),n));if(c)return this._proxyUrl(d(_(l,c),n));let m=this.$$("proxy-cname");if(m)return this._proxyUrl(d(m,n,this._fmtAbs(i)));let I=this.$$("pubkey");if(I)return this._proxyUrl(d(`https://${I}.ucr.io/`,n,this._fmtAbs(i)))}_proxyUrl(t){let e=this.$$("secure-delivery-proxy");return e?j(e,{previewUrl:t},{transform:i=>window.encodeURIComponent(i)}):t}_getElSize(t,e=1,i=!0){let n=t.getBoundingClientRect(),a=e*Math.round(n.width),l=i?"":e*Math.round(n.height);return a||l?`${a||""}x${l||""}`:null}_setupEventProxy(t){let e=n=>{n.stopPropagation();let a=new Event(n.type,n);this.dispatchEvent(a)},i=["load","error"];for(let n of i)t.addEventListener(n,e)}get img(){return this.hasPreviewImage||(this._setupConfigForImage({elNode:this._img}),this.appendChild(this._img)),this._img}get currentImg(){return this.hasPreviewImage?{type:P.PREVIEW,img:this._imgPreview}:{type:P.MAIN,img:this.img}}get hasPreviewImage(){return this.$$("is-preview-blur")}get bgSelector(){return this.$$("is-background-for")}get breakpoints(){let t=this.$$("breakpoints");if(t){let e=L(t);return k(e.map(i=>parseInt(i,10)))}else return null}get hasFormatJPG(){return this.$$("format").toLowerCase()==="jpeg"}renderBg(t){let e=new Set;e.add(`url("${this._getUrlBase(this._getElSize(t))}") 1x`),this.$$("hi-res-support")&&e.add(`url("${this._getUrlBase(this._getElSize(t,2))}") ${2}x`),this.$$("ultra-res-support")&&e.add(`url("${this._getUrlBase(this._getElSize(t,3))}") ${3}x`);let i=`image-set(${[...e].join(", ")})`;t.style.setProperty("background-image",i),t.style.setProperty("background-image","-webkit-"+i)}getSrcset(){let t=new Set;return this.breakpoints?this.breakpoints.forEach(e=>{t.add(`${this._getUrlBase(`${e}x`)} ${this._validateSize(`${e}w`)}`),this.$$("hi-res-support")&&t.add(`${this._getUrlBase(`${e*2}x`)} ${this._validateSize(`${e*2}w`)}`),this.$$("ultra-res-support")&&t.add(`${this._getUrlBase(`${e*3}x`)} ${this._validateSize(`${e*3}w`)}`)}):(t.add(`${this._getUrlBase(this._getElSize(this.currentImg.img))} 1x`),this.$$("hi-res-support")&&t.add(`${this._getUrlBase(this._getElSize(this.currentImg.img,2))} 2x`),this.$$("ultra-res-support")&&t.add(`${this._getUrlBase(this._getElSize(this.currentImg.img,3))} 3x`)),[...t].join()}getSrc(){return this._getUrlBase()}get srcUrlPreview(){return this._getUrlBase("100x","100")}renderBackground(){let t=this.bgSelector;[...document.querySelectorAll(t)].forEach(e=>{this.$$("intersection")?this.initIntersection(e,()=>{this.renderBg(e)}):this.renderBg(e)})}_appendURL({elNode:t,src:e,srcset:i}){e&&(t.src=e),i&&(t.srcset=i)}_setupConfigForImage({elNode:t}){this._setupEventProxy(t),this.initAttributes(t)}loaderImage({src:t,srcset:e,elNode:i}){return new Promise((n,a)=>{this._setupConfigForImage({elNode:i}),i.setAttribute(E,""),i.addEventListener("load",()=>{i.removeAttribute(E),n(i)}),i.addEventListener("error",()=>{a(!1)}),this._appendURL({elNode:i,src:t,srcset:e})})}async renderImage(){if(this.$$("intersection")){this.hasPreviewImage&&(this._setupConfigForImage({elNode:this._imgPreview}),this.appendChild(this._imgPreview)),this.initIntersection(this.currentImg.img,async()=>{this.hasPreviewImage&&(this._imgPreview.src=this.srcUrlPreview);try{await this.loaderImage({src:this.getSrc(),srcset:this.getSrcset(),elNode:this._img}),this.hasPreviewImage&&await this._imgPreview.remove(),this.appendChild(this._img)}catch{this.hasPreviewImage&&await this._imgPreview?.remove(),this.appendChild(this._img)}});return}try{this.hasPreviewImage&&(await this.loaderImage({src:this.srcUrlPreview,elNode:this._imgPreview}),this.appendChild(this._imgPreview)),await this.loaderImage({src:this.getSrc(),srcset:this.getSrcset(),elNode:this._img}),this.hasPreviewImage&&await this._imgPreview?.remove(),this.appendChild(this._img)}catch{this.hasPreviewImage&&await this._imgPreview?.remove(),this.appendChild(this._img)}}init(){this.bgSelector?this.renderBackground():this.renderImage()}};var v=class extends y{connectedCallback(){super.connectedCallback(),this.sub$$("src",()=>{this.init()}),this.sub$$("uuid",()=>{this.init()}),this.sub$$("lazy",s=>{!this.$$("is-background-for")&&!this.$$("is-preview-blur")&&(this.img.loading=s?"lazy":"eager")})}};v.reg("uc-img");export{v as Img};