@nichoth/image
Version:
An image component
32 lines (30 loc) • 27.4 kB
JavaScript
var Q=Object.defineProperty;var U=(s,t,e)=>t in s?Q(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var g=(s,t,e)=>(U(s,typeof t!="symbol"?t+"":t,e),e);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))r(i);new MutationObserver(i=>{for(const o of i)if(o.type==="childList")for(const n of o.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&r(n)}).observe(document,{childList:!0,subtree:!0});function e(i){const o={};return i.integrity&&(o.integrity=i.integrity),i.referrerPolicy&&(o.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?o.credentials="include":i.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(i){if(i.ep)return;i.ep=!0;const o=e(i);fetch(i.href,o)}})();class C{constructor(t,e,r){this.isTonicTemplate=!0,this.unsafe=r,this.rawText=t,this.templateStrings=e}valueOf(){return this.rawText}toString(){return this.rawText}}const a=class extends window.HTMLElement{static get version(){return"15.1.1"}static get SPREAD(){return/\.\.\.\s?(__\w+__\w+__)/g}static get ESC(){return/["&'<>`/]/g}static get AsyncFunctionGenerator(){return async function*(){}.constructor}static get AsyncFunction(){return async function(){}.constructor}static get MAP(){return{'"':""","&":"&","'":"'","<":"<",">":">","`":"`","/":"/"}}constructor(){super();const t=a._states[super.id];delete a._states[super.id],this._state=t||{},this.preventRenderOnReconnect=!1,this.props={},this.elements=[...this.children],this.elements.__children__=!0,this.nodes=[...this.childNodes],this.nodes.__children__=!0,this._events()}get isTonicComponent(){return!0}static _createId(){return`tonic${a._index++}`}static _normalizeAttrs(t,e={}){return[...t].forEach(r=>e[r.name]=r.value),e}_checkId(){const t=super.id;if(!t){const e=this.outerHTML.replace(this.innerHTML,"...");throw new Error(`Component: ${e} has no id`)}return t}get state(){return this._checkId(),this._state}set state(t){this._state=(this._checkId(),t)}_events(){const t=Object.getOwnPropertyNames(window.HTMLElement.prototype);for(const e of this._props)t.indexOf("on"+e)!==-1&&this.addEventListener(e,this)}_prop(t){const e=this._id,r=`__${e}__${a._createId()}__`;return a._data[e]=a._data[e]||{},a._data[e][r]=t,r}_placehold(t){const e=this._id,r=`placehold:${e}:${a._createId()}__`;return a._children[e]=a._children[e]||{},a._children[e][r]=t,r}static match(t,e){return t.matches||(t=t.parentElement),t.matches(e)?t:t.closest(e)}static getTagName(t){return t.match(/[A-Z][a-z0-9]*/g).join("-").toLowerCase()}static getPropertyNames(t){const e=[];for(;t&&t!==a.prototype;)e.push(...Object.getOwnPropertyNames(t)),t=Object.getPrototypeOf(t);return e}static add(t,e){if(!(e||t.name&&t.name.length>1))throw Error("Mangling. https://bit.ly/2TkJ6zP");if(e||(e=a.getTagName(t.name)),!a.ssr&&window.customElements.get(e))throw new Error(`Cannot Tonic.add(${t.name}, '${e}') twice`);if(!t.prototype||!t.prototype.isTonicComponent){const i={[t.name]:class extends a{}}[t.name];i.prototype.render=t,t=i}return t.prototype._props=a.getPropertyNames(t.prototype),a._reg[e]=t,a._tags=Object.keys(a._reg).join(),window.customElements.define(e,t),typeof t.stylesheet=="function"&&a.registerStyles(t.stylesheet),t}static registerStyles(t){if(a._stylesheetRegistry.includes(t))return;a._stylesheetRegistry.push(t);const e=document.createElement("style");a.nonce&&e.setAttribute("nonce",a.nonce),e.appendChild(document.createTextNode(t())),document.head&&document.head.appendChild(e)}static escape(t){return t.replace(a.ESC,e=>a.MAP[e])}static unsafeRawString(t,e){return new C(t,e,!0)}dispatch(t,e=null){const r={bubbles:!0,detail:e};this.dispatchEvent(new window.CustomEvent(t,r))}html(t,...e){const r=n=>{if(n&&n.__children__)return this._placehold(n);if(n&&n.isTonicTemplate)return n.rawText;switch(Object.prototype.toString.call(n)){case"[object HTMLCollection]":case"[object NodeList]":return this._placehold([...n]);case"[object Array]":return n.every(c=>c.isTonicTemplate&&!c.unsafe)?new C(n.join(`
`),null,!1):this._prop(n);case"[object Object]":case"[object Function]":case"[object Set]":case"[object Map]":case"[object WeakMap]":return this._prop(n);case"[object NamedNodeMap]":return this._prop(a._normalizeAttrs(n));case"[object Number]":return`${n}__float`;case"[object String]":return a.escape(n);case"[object Boolean]":return`${n}__boolean`;case"[object Null]":return`${n}__null`;case"[object HTMLElement]":return this._placehold([n])}return typeof n=="object"&&n&&n.nodeType===1&&typeof n.cloneNode=="function"?this._placehold([n]):n},i=[];for(let n=0;n<t.length-1;n++)i.push(t[n],r(e[n]));i.push(t[t.length-1]);const o=i.join("").replace(a.SPREAD,(n,c)=>{const u=a._data[c.split("__")[1]][c];return Object.entries(u).map(([f,d])=>{const A=f.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();return d===!0?A:d?`${A}="${a.escape(String(d))}"`:""}).filter(Boolean).join(" ")});return new C(o,t,!1)}scheduleReRender(t){return this.pendingReRender?this.pendingReRender:(this.pendingReRender=new Promise(e=>setTimeout(()=>{if(!this.isInDocument(this.shadowRoot||this))return;const r=this._set(this.shadowRoot||this,this.render);if(this.pendingReRender=null,r&&r.then)return r.then(()=>{this.updated&&this.updated(t),e(this)});this.updated&&this.updated(t),e(this)},0)),this.pendingReRender)}reRender(t=this.props){const e={...this.props};return this.props=typeof t=="function"?t(e):t,this.scheduleReRender(e)}handleEvent(t){this[t.type](t)}_drainIterator(t,e){return e.next().then(r=>{if(this._set(t,null,r.value),!r.done)return this._drainIterator(t,e)})}_set(t,e,r=""){this.willRender&&this.willRender();for(const i of t.querySelectorAll(a._tags)){if(!i.isTonicComponent)continue;const o=i.getAttribute("id");!o||!a._refIds.includes(o)||(a._states[o]=i.state)}if(e instanceof a.AsyncFunction)return e.call(this,this.html,this.props).then(i=>this._apply(t,i));if(e instanceof a.AsyncFunctionGenerator)return this._drainIterator(t,e.call(this));e===null?this._apply(t,r):e instanceof Function&&this._apply(t,e.call(this,this.html,this.props)||"")}_apply(t,e){if(e&&e.isTonicTemplate?e=e.rawText:typeof e=="string"&&(e=a.escape(e)),typeof e=="string"){if(this.stylesheet&&(e=`<style nonce=${a.nonce||""}>${this.stylesheet()}</style>${e}`),t.innerHTML=e,this.styles){const o=this.styles();for(const n of t.querySelectorAll("[styles]"))for(const c of n.getAttribute("styles").split(/\s+/))Object.assign(n.style,o[c.trim()])}const r=a._children[this._id]||{},i=(o,n)=>{if(o.nodeType===3){const u=o.textContent.trim();r[u]&&n(o,r[u],u)}const c=o.childNodes;if(c)for(let u=0;u<c.length;u++)i(c[u],n)};i(t,(o,n,c)=>{for(const u of n)o.parentNode.insertBefore(u,o);delete a._children[this._id][c],o.parentNode.removeChild(o)})}else t.innerHTML="",t.appendChild(e.cloneNode(!0))}connectedCallback(){this.root=this.shadowRoot||this,super.id&&!a._refIds.includes(super.id)&&a._refIds.push(super.id);const t=e=>e.replace(/-(.)/g,(r,i)=>i.toUpperCase());for(const{name:e,value:r}of this.attributes){const i=t(e),o=this.props[i]=r;if(/__\w+__\w+__/.test(o)){const{1:n}=o.split("__");this.props[i]=a._data[n][o]}else if(/\d+__float/.test(o))this.props[i]=parseFloat(o,10);else if(o==="null__null")this.props[i]=null;else if(/\w+__boolean/.test(o))this.props[i]=o.includes("true");else if(/placehold:\w+:\w+__/.test(o)){const{1:n}=o.split(":");this.props[i]=a._children[n][o][0]}}if(this.props=Object.assign(this.defaults?this.defaults():{},this.props),this._id=this._id||a._createId(),this.willConnect&&this.willConnect(),!!this.isInDocument(this.root)){if(!this.preventRenderOnReconnect){this._source?this.innerHTML=this._source:this._source=this.innerHTML;const e=this._set(this.root,this.render);if(e&&e.then)return e.then(()=>this.connected&&this.connected())}this.connected&&this.connected()}}isInDocument(t){const e=t.getRootNode();return e===document||e.toString()==="[object ShadowRoot]"}disconnectedCallback(){this.disconnected&&this.disconnected(),delete a._data[this._id],delete a._children[this._id]}};let l=a;g(l,"_tags",""),g(l,"_refIds",[]),g(l,"_data",{}),g(l,"_states",{}),g(l,"_children",{}),g(l,"_reg",{}),g(l,"_stylesheetRegistry",[]),g(l,"_index",0);function q(s){return!(typeof s!="object"||s instanceof Array)}class B{filterOutNonSupportedKeys(t,e){const r=Object.create({});return q(t)?(Object.keys(t).forEach(i=>{e.indexOf(i)>=0?r[i]=t[i]:console.warn("Warning - unsupported key provided to configuration: ",i)}),r):Object.create({})}}const z=B,T=["cname","secureDistribution","privateCdn","signUrl","longUrlSignature","shorten","useRootPath","secure","forceVersion","analytics","queryParams"];class b extends z{constructor(t){super();const e=this.filterOutNonSupportedKeys(t,T);Object.assign(this,{secure:!0},e)}extend(t){const e=this.filterOutNonSupportedKeys(t,T);return new b(Object.assign({},this,e))}setCname(t){return this.cname=t,this}setSecureDistribution(t){return this.secureDistribution=t,this}setPrivateCdn(t){return this.privateCdn=t,this}setSignUrl(t){return this.signUrl=t,this}setLongUrlSignature(t){return this.longUrlSignature=t,this}setShorten(t){return this.shorten=t,this}setUseRootPath(t){return this.useRootPath=t,this}setSecure(t){return this.secure=t,this}setForceVersion(t){return this.forceVersion=t,this}setQueryParams(t){return this.queryParams=t,this}}const H=b;class m{constructor(t){this.values=[],this.delimiter=":",this.hasValue(t)&&this.addValue(t)}toString(){return this.values.join(this.delimiter)}hasValue(t){return typeof t<"u"&&t!==null&&t!==""}addValue(t){return Array.isArray(t)?this.values=this.values.concat(t):this.values.push(t),this.values=this.values.filter(e=>this.hasValue(e)),this}setDelimiter(t){return this.delimiter=t,this}}class Y extends Error{constructor(t="Unsupported"){super(t)}}function E(s){return new Y(s)}function J(){return this._qualifierModel||{error:E(`unsupported qualifier ${this.constructor.name}`)}}class K{constructor(){this._qualifierModel={}}toJson(){return J.apply(this)}}class p extends K{constructor(t,e){super(),this.delimiter="_",this.key=t,e instanceof m?this.qualifierValue=e:(this.qualifierValue=new m,this.qualifierValue.addValue(e))}toString(){const{key:t,delimiter:e,qualifierValue:r}=this;return`${t}${e}${r.toString()}`}addValue(t){return this.qualifierValue.addValue(t),this}}class h extends p{constructor(t,e){let r;e?r=new m([t,`${e}`]).setDelimiter(":"):r=t,super("fl",r),this.flagValue=e}toString(){return super.toString().replace(/\./,"%2E")}getFlagValue(){return this.flagValue}}function W(s,t){const e=Array.from(s.entries());return t.forEach(r=>{e.push(["fl",r])}),e.sort().map(r=>r[1])}function Z(){return this._actionModel&&Object.keys(this._actionModel).length?this._actionModel:{error:E(`unsupported action ${this.constructor.name}`)}}class G{constructor(){this._actionModel={}}toJson(){return Z.apply(this)}}class w extends G{constructor(){super(...arguments),this.qualifiers=new Map,this.flags=[],this.delimiter=",",this.actionTag=""}prepareQualifiers(){}getActionTag(){return this.actionTag}setActionTag(t){return this.actionTag=t,this}toString(){return this.prepareQualifiers(),W(this.qualifiers,this.flags).join(this.delimiter)}addQualifier(t){if(typeof t=="string"){const[e,r]=t.toLowerCase().split("_");e==="fl"?this.flags.push(new h(r)):this.qualifiers.set(e,new p(e,r))}else this.qualifiers.set(t.key,t);return this}addFlag(t){return typeof t=="string"?this.flags.push(new h(t)):t instanceof h&&this.flags.push(t),this}addValueToQualifier(t,e){return this.qualifiers.get(t).addValue(e),this}}class X extends w{constructor(t){super(),this.addQualifier(new p("b",new m(t).setDelimiter("_")))}}function tt(s){return s&&(s.match(/^#/)?`rgb:${s.substr(1)}`:s)}class S{constructor(t){this.raw=t}toString(){return this.raw}toJson(){return{error:E(`unsupported action ${this.constructor.name}`)}}}function et(s){const t=s;return"error"in t&&!!t.error}function st(){return new h("ignore_aspect_ratio")}function rt(){return new h("lossy")}function it(){return new h("preserve_transparency")}function nt(s){return new h("progressive",s)}function ot(){return new h("region_relative")}function at(){return new h("relative")}class ct extends m{constructor(t){super(t),this.val=t}getValue(){return this.val}}function y(s){const t={};return Object.keys(s).forEach(e=>{t[s[e]]=e}),t}const V={limitFit:"limit",limitFill:"lfill",minimumFit:"mfit",thumbnail:"thumb",limitPad:"lpad",minimumPad:"mpad"},ut={colorSpace:"cs",dpr:"dpr",density:"dn",defaultImage:"d",format:"f",quality:"q"},lt={redEye:"redeye",advancedRedEye:"adv_redeye",oilPaint:"oil_paint",unsharpMask:"unsharp_mask",makeTransparent:"make_transparent"},dt={autoBest:"auto:best",autoEco:"auto:eco",autoGood:"auto:good",autoLow:"auto:low",jpegminiHigh:"jpegmini:1",jpegminiMedium:"jpegmini:2",jpegminiBest:"jpegmini:0"},ht={fullHd:"full_hd",fullHdWifi:"full_hd_wifi",fullHdLean:"full_hd_lean",hdLean:"hd_lean"},ft={444:"CHROMA_444",420:"CHROMA_420"},pt={noCmyk:"no_cmyk",keepCmyk:"keep_cmyk",tinySrgb:"tinysrgb",srgbTrueColor:"srgb:truecolor"};y(ft);y(pt);const gt=y(V),mt=y(ut);y(lt);y(dt);y(ht);class yt extends w{constructor(t,e,r){super(),this._actionModel={};let i;e instanceof ct?i=e.getValue():i=e,this._actionModel.actionType=mt[t],this._actionModel[r]=i,this.addQualifier(new p(t,e))}}class At extends h{constructor(t){super("progressive",t)}}class _ extends yt{constructor(t,e){super(t,e,"formatType")}lossy(){return this._actionModel.lossy=!0,this.addFlag(rt()),this}progressive(t){return t instanceof At?(this._actionModel.progressive={mode:t.getFlagValue()},this.addFlag(t)):(this._actionModel.progressive={mode:t},this.addFlag(nt(t))),this}preserveTransparency(){return this._actionModel.preserveTransparency=!0,this.addFlag(it()),this}static fromJson(t){const{formatType:e,lossy:r,progressive:i,preserveTransparency:o}=t;let n;return e?n=new this("f",e):n=new this("f"),i&&(i.mode?n.progressive(i.mode):n.progressive()),r&&n.lossy(),o&&n.preserveTransparency(),n}}class R{constructor(){this.actions=[]}addAction(t){let e;if(typeof t=="string"){if(t.indexOf("/")>=0)throw"addAction cannot accept a string with a forward slash in it - /, use .addTransformation() instead";e=new S(t)}else e=t;return this.actions.push(e),this}addTransformation(t){return t instanceof R?this.actions=this.actions.concat(t.actions):this.actions.push(new S(t)),this}toString(){return this.actions.map(t=>t.toString()).filter(t=>t).join("/")}animated(t){return this.addAction(t)}border(t){return this.addAction(t)}reshape(t){return this.addAction(t)}resize(t){return this.addAction(t)}quality(t){return this.addAction(new _("q",t)),this}format(t){return this.addAction(new _("f",t)),this}roundCorners(t){return this.addAction(t)}overlay(t){return this.addAction(t)}underlay(t){return t.setLayerType("u"),this.addAction(t)}addVariable(t){return this.addAction(t)}conditional(t){return this.addAction(t)}effect(t){return this.addAction(t)}adjust(t){return this.addAction(t)}rotate(t){return this.addAction(t)}namedTransformation(t){return this.addAction(t)}delivery(t){return this.addAction(t)}backgroundColor(t){return this.addAction(new X(tt(t)))}psdTools(t){return this.addAction(t)}extract(t){return this.addAction(t)}addFlag(t){const e=new w;let r=t;return typeof t=="string"&&(r=new h(t)),e.addQualifier(r),this.addAction(e)}customFunction(t){return this.addAction(t)}transcode(t){return this.addAction(t)}videoEdit(t){return this.addAction(t)}toJson(){const t=[];for(const e of this.actions){const r=e.toJson();if(et(r))return r;t.push(r)}return{actions:t}}}class _t extends R{}class wt extends R{}function O(s){const t=s.toString();return t.match(/[A-Z]/gi)||t.length>1&&t[0]==="0"?t:!isNaN(parseFloat(t))&&t.indexOf(":")===-1&&t.indexOf(".")===-1?`${t}.0`:t}class Rt extends m{}class Ct extends w{constructor(t,e,r){super(),this._actionModel={dimensions:{}},this._actionModel.actionType=gt[t]||t,this.addQualifier(new p("c",t)),e&&this.width(e),r&&this.height(r)}height(t){return this._actionModel.dimensions.height=t,this.addQualifier(new p("h",t))}width(t){return this._actionModel.dimensions.width=t,this.addQualifier(new p("w",t))}aspectRatio(t){if(t instanceof Rt)return this._actionModel.dimensions.aspectRatio=`${t}`,this.addQualifier(new p("ar",t));if(typeof t=="number"||typeof t=="string")return this._actionModel.dimensions.aspectRatio=O(t),this.addQualifier(new p("ar",O(t)));if(t instanceof h)return this._actionModel.dimensions.aspectRatio=`${t.qualifierValue}`,this.addFlag(t)}relative(){return this._actionModel.relative=!0,this.addFlag(at())}regionRelative(){return this._actionModel.regionRelative=!0,this.addFlag(ot())}static fromJson(t){const{actionType:e,dimensions:r,relative:i,regionRelative:o}=t,{aspectRatio:n,width:c,height:u}=r,f=V[e]||e,d=new this(f,c,u);return n&&d.aspectRatio(n==="ignore_aspect_ratio"?st():n),i&&d.relative(),o&&d.regionRelative(),d}}class bt extends p{constructor(t){super("g",new m(t))}}class Et extends Ct{liquidRescaling(){return this.addQualifier(new bt("liquid"))}}function j(s,t){return new Et("scale",s,t)}function vt(s){return s.match(/^https?:\//)}function Tt(s){return s.indexOf("/")<0}function St(s){return s.match(/^v[0-9]+/)}function Ot(s,t){const e=t.secure,r=t.privateCdn,i=t.cname,o=t.secureDistribution;return!e&&!i?`http://res.cloudinary.com/${s}`:e&&!o&&r?`https://${s}-res.cloudinary.com`:e&&!o?`https://res.cloudinary.com/${s}`:e&&o&&r?`https://${o}`:e&&o?`https://${o}/${s}`:!e&&i?`http://${i}/${s}`:"ERROR"}function Mt(s){return s||"image"}function It(s){return s||"upload"}function Lt(s,t,e){const r=e!==!1;return t?`v${t}`:St(s)||vt(s)||Tt(s)?"":r?"v1":""}function v(s,t,e){let r=t>>0,i=String(typeof e<"u"?e:" ");return s.length>r?String(s):(r=r-s.length,r>i.length&&(i+=Pt(i,r/i.length)),i.slice(0,r)+String(s))}function Pt(s,t){let e=t,r="";for(;e>0;)r+=s,e--;return r}const xt="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",$={};let M=0;xt.split("").forEach(s=>{let t=M.toString(2);t=v(t,6,"0"),$[t]=s,M++});function Vt(s){if(s.split(".").length<2)throw new Error("invalid semVer, must have at least two segments");return s.split(".").reverse().map(t=>{const e=+t;if(isNaN(e)||e<0)throw"Invalid version number provided";return v(t,2,"0")}).join(".")}function I(s){let t="";const r=s.split(".").length*6,i=Vt(s);let n=parseInt(i.split(".").join("")).toString(2);if(n=v(n,r,"0"),n.length%6!==0)throw"Version must be smaller than 43.21.26)";return n.match(/.{1,6}/g).forEach(c=>{t+=$[c]}),t}function jt(s){const t={sdkSemver:s.sdkSemver,techVersion:s.techVersion,sdkCode:s.sdkCode,feature:"0"};return s.accessibility&&(t.feature="D"),s.lazyload&&(t.feature="C"),s.responsive&&(t.feature="A"),s.placeholder&&(t.feature="B"),t}const $t="1.10.0";function Nt(){const s="0.0.0";if(typeof window<"u")return s;try{return process.versions.node||s}catch{return s}}function kt(s){const t={techVersion:Nt(),sdkCode:"T",sdkSemver:$t.split("-")[0],responsive:!1,placeholder:!1,lazyload:!1,accessibility:!1};return s?Object.assign(Object.assign({},t),s):t}function Ft(s){const t=kt(s),e=jt(t);try{const r=Dt(e.techVersion),i=I(e.sdkSemver),o=I(r),n=e.feature;return`A${e.sdkCode}${i}${o}${n}`}catch{return"E"}}function Dt(s){const t=s.split(".");return`${t[0]}.${t[1]}`}const L={"image/upload":"images","image/private":"private_images","image/authenticated":"authenticated_images","raw/upload":"files","video/upload":"videos"};class Qt{constructor(t,e={},r){this.setPublicID(t),this.setCloudConfig(e),this.setURLConfig(r)}setURLConfig(t){return this.urlConfig=new H(t),this}setCloudConfig(t){return this.cloudName=t.cloudName,this.apiKey=t.apiKey,this.apiSecret=t.apiSecret,this.authToken=t.authToken,this}setPublicID(t){return this.publicID=t?t.toString():"",this}setDeliveryType(t){return this.deliveryType=t,this}setSuffix(t){return this.suffix=t,this}setSignature(t){return this.signature=t,this}setVersion(t){return t&&(this.version=t),this}setAssetType(t){return t&&(this.assetType=t),this}sign(){return this}toURL(t={}){return this.createCloudinaryURL(null,t.trackedAnalytics)}validateAssetForURLCreation(){if(typeof this.cloudName>"u")throw"You must supply a cloudName when initializing the asset";const t=this.suffix&&this.suffix.indexOf(".")>=0,e=this.suffix&&this.suffix.indexOf("/")>=0;if(t||e)throw"`suffix`` should not include . or /"}getResourceType(){const t=Mt(this.assetType),e=It(this.deliveryType),r=!!this.suffix,i=`${t}/${e}`,o=L[`${t}/${e}`],n=this.urlConfig.useRootPath,c=this.urlConfig.shorten;if(n){if(i==="image/upload")return"";throw new Error(`useRootPath can only be used with assetType: 'image' and deliveryType: 'upload'. Provided: ${i} instead`)}if(c&&i==="image/upload")return"iu";if(r){if(o)return o;throw new Error(`URL Suffix only supported for ${Object.keys(L).join(", ")}, Provided: ${i} instead`)}return i}getSignature(){return this.signature?`s--${this.signature}--`:""}createCloudinaryURL(t,e){if(!this.publicID)return"";this.validateAssetForURLCreation();const r=Ot(this.cloudName,this.urlConfig),i=t?t.toString():"",o=Lt(this.publicID,this.version,this.urlConfig.forceVersion),n=this.publicID.replace(/,/g,"%2C"),c=[r,this.getResourceType(),this.getSignature(),i,o,n,this.suffix].filter(u=>u).join("/");if(typeof t=="string")return c;{const u=encodeURI(c).replace(/\?/g,"%3F").replace(/=/g,"%3D"),f=new URLSearchParams(this.urlConfig.queryParams);this.urlConfig.analytics!==!1&&!n.includes("?")&&f.set("_a",Ft(e));const d=f.toString();return d?`${u}?${d}`:u}}}class N extends Qt{constructor(t,e,r,i){super(t,e,r),this.transformation=i}animated(t){return this.transformation.animated(t),this}border(t){return this.transformation.border(t),this}reshape(t){return this.transformation.reshape(t),this}resize(t){return this.transformation.resize(t),this}quality(t){return this.addAction(new _("q",t)),this}format(t){return this.addAction(new _("f",t)),this}roundCorners(t){return this.transformation.roundCorners(t),this}overlay(t){return this.transformation.overlay(t),this}addVariable(t){return this.transformation.addVariable(t),this}conditional(t){return this.transformation.conditional(t),this}effect(t){return this.transformation.effect(t),this}adjust(t){return this.transformation.adjust(t),this}rotate(t){return this.transformation.rotate(t),this}namedTransformation(t){return this.transformation.namedTransformation(t),this}delivery(t){return this.transformation.delivery(t),this}backgroundColor(t){return this.transformation.backgroundColor(t),this}psdTools(t){return this.transformation.psdTools(t),this}extract(t){return this.transformation.extract(t),this}addFlag(t){return this.transformation.addFlag(t),this}customFunction(t){return this.transformation.customFunction(t),this}addAction(t){return this.transformation.addAction(t),this}addTransformation(t){return this.transformation.addTransformation(t),this}toString(){return this.transformation.toString()}underlay(t){return this.transformation.underlay(t),this}toURL(t={}){return this.createCloudinaryURL(this.transformation,t==null?void 0:t.trackedAnalytics)}}class Ut extends N{constructor(t,e,r){super(t,e,r,new _t)}}class qt extends N{constructor(t,e,r){super(t,e,r,new wt),this.assetType="video"}transcode(t){return this.transformation.transcode(t),this}videoEdit(t){return this.transformation.videoEdit(t),this}}class Bt{constructor(t){t&&(this.cloudinaryConfig=t)}image(t){return new Ut(t,this.cloudinaryConfig.cloud,this.cloudinaryConfig.url)}video(t){return new qt(t,this.cloudinaryConfig.cloud,this.cloudinaryConfig.url)}setConfig(t){return this.cloudinaryConfig=t,this}getConfig(){return this.cloudinaryConfig}extendConfig(){}}function P(s){function t(r){return[s.image(r).format("auto").quality("auto").toURL()+" 1025w"].concat(e(r,[1024,768,480])).join(", ")}function e(r,i){return i.map(o=>s.image(r).format("auto").quality("auto").resize(j().width(o)).toURL()+` ${o}w`)}return{defaultSrcset:t,getSrcset:e}}const zt=function({cloudName:s}){const t=new Bt({cloud:{cloudName:s},url:{secure:!0}});class e extends l{constructor(){super();const o=new window.Image;o.classList.add("sharp"),this.state={blurry:!0,imgLarge:o},o.onload=async()=>{this.state.blurry=!1,await this.reRender();const n=this.querySelector(".placeholder");o.classList.add("loaded"),n&&n.appendChild(o)}}getImg(){const{filename:o,maxwidth:n,sizes:c}=this.props,{imgLarge:u}=this.state,{defaultSrcset:f}=P(t),d=f(o);u.setAttribute("srcset",d),u.setAttribute("sizes",c),u.src=t.image(o).format("auto").quality("auto").resize(j().width(n)).toURL()}render(){const{blurplaceholder:o,className:n}=this.props,c=this.props.class||n;return this.state.blurry&&this.getImg(),this.html`<div
class=${"placeholder"+(c?` ${c}`:"")}
>
<img class="blurry" src=${o} />
</div>`}}class r extends l{render(){const{sizes:o,className:n,filename:c,decoding:u,loading:f,fetchpriority:d}=this.props,A=this.props.class||n,{defaultSrcset:k}=P(t),F=t.image(c).format("auto").quality("auto").toURL(),D=k(c);return this.html`<div class=${"image"+(A?` ${A}`:"")}>
<img
srcset="${D}"
sizes="${o}"
src=${F}
decoding="${u||"auto"}"
loading="${f||"lazy"}"
fetchpriority="${d||"low"}"
/>
</div>`}}return{BlurredImage:e,ImageTag:r}};const{ImageTag:Ht,BlurredImage:Yt}=zt({cloudName:"nichoth"}),Jt="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgICAgJCAkKCgkNDgwODRMSEBASEx0VFhUWFR0sHCAcHCAcLCcvJiQmLydGNzExN0ZRREBEUWJYWGJ8dnyiotkBCAgICAkICQoKCQ0ODA4NExIQEBITHRUWFRYVHSwcIBwcIBwsJy8mJCYvJ0Y3MTE3RlFEQERRYlhYYnx2fKKi2f/AABEIADIAMgMBIgACEQEDEQH/xAB4AAACAwEBAQAAAAAAAAAAAAAABgQFBwIDARAAAgEEAQMBBQYHAAAAAAAAAQIDAAQFERIGEzFyBxQhQVEVIiNhsbIzNTZxdIGRAQEBAQEAAAAAAAAAAAAAAAACAQMAEQEBAQEBAQEBAAAAAAAAAAABAAJBMRESIf/aAAwDAQACEQMRAD8A1vLJuKL1VRzQco6ZMov4cPqNVipsaoPrLknTmCGPlPMsY3rbECki/wA52LqVYJEkj7Z4EEnRP1q7v+nZ8xlLuRsiqRQvwijC8iBoE7rsez661aFUnfveSQvq2KgFaPHl8UURHuwW0AWIIBNOPSsI+0pXHjsmk296Js4feBcXFzB2zsq3H4BqfuhcbJZ45OcolO3UP9VHioB9EaM68aK9uNFaxoWSH4cXqqBCu9VYZL+EnqqBEwVdmi+15U5tYIbi5lRdM7EtTxYzRnH2bsVLCFCPy+FZXL1NiffXtvel7nMrrR8iuhkcUH7e4OXILrQ8kbo/0fpLky5NIrq7yYcbUlV/4gq5w8EcOPt0QaGm/Ws9yGdx+Ogcc4g7LyEYIBan7AXSXWIspk8PEDVyRWttUV9op0q7IEdlf70hdR9SW+NtzCjBp28LTll45ZrN0il7bkHT63qsCsMI2b6kvsdHkhIYFLyzkedEAgVO1o2NiEj3Vzw+4geWQn5/PVNvRlxDm7+XuKAibdtj6DVJucu0wuUzOPtotxyRwopJ8aQbP+91dezq5t7RsrJNKFkeJEiG6eRULPaZytK6sxdvLeCKIBHHxQ/Xl4Wnv2b3ofECzL7kgLbH5E7pD6pmN1KX1w3GVX5HY8EVc9Av3stFfIw43NnLzUfKRCvOlr1jh/WS2jdFeW6KztZc6od4+n8o6OVZbWUgg6IPGsT9k/8APb7/AAH/AHrRRVul/rH+p8h6o/2CukVfszfEb2aKKePWz3yYevI0jx+FMaBSyNvQ1v7oq69kvi6/KT9VooocnbbRRRUrf//Z",x=["50vw"];class Kt extends l{render(){return this.html`<div class="the-app">
<p>image</p>
<image-tag
id="tag-test"
filename="testing"
sizes=${x.join(", ")}
></image-tag>
<p>image with blur placeholder</p>
<blurred-image
id="test"
filename="testing"
blurplaceholder=${Jt}
sizes=${x.join(", ")}
maxWidth=${[1024]}
></blurred-image>
</div>`}}l.add(Ht,"image-tag");l.add(Yt,"blurred-image");l.add(Kt,"the-app");