@strifeapp/strife 0.1.0-preview.15 → 0.1.0-preview.16

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-const e={CONNECT:1,HSHK:2,EU:4,SYNC:8};class t extends MessageChannel{constructor(){super(),this.broadcastChannel=new BroadcastChannel('app.broadcast');switch(this.port1.addEventListener('message',(t=>{t.data.cmd===e.CONNECT&&this.onConnected(t)}),{once:!0}),this.port1.start(),this._ready=new Promise(((e,t)=>{this.readyResolve=e,this.readyReject=t})),this._ready.then((()=>{console.log(`SENDING MESSAGE FROM SDK IN WINDOW ${window.name}`),window.top.postMessage({cmd:e.HSHK,context:{name:window.name,height:document.body.scrollHeight}},'*',[this.port2])})),window.addEventListener('beforeunload',(()=>{console.log('unload'),this.send({foo:'bar'})})),window.addEventListener('click',(()=>{this.send({cmd:e.EU,updates:[{action:'click',lastUserInteraction:(new Date).valueOf(),context:window.name}]})}),!1),document.readyState){case'loading':case'interactive':document.onreadystatechange=()=>{'complete'===document.readyState&&this.readyResolve()};break;case'complete':this.readyResolve()}}subscribe(e){if(null==e)throw new Error('Parameter can not be null!');this.broadcastChannel.addEventListener('message',e),this.port1.addEventListener('message',e),this.port1.addEventListener('message',(e=>this.broadcastChannel.postMessage(e.data)))}send(e){this.port1.postMessage(e),this.broadcastChannel.postMessage(e)}onConnected(e){return e}}var s=new t;const i={NONE:8,EDIT:16,RESET:32,INIT:64,SYNC:128},r=()=>s,n=[];s.subscribe((({data:t})=>{try{t.cmd===e.SYNC?(t.sync.forEach((e=>{switch(e.action){case i.INIT:n.forEach((({self:t,handler:s})=>{const i=e.data.find((e=>e.propertyName===t.dataset.propertyName));e.currentPath===window.location.pathname&&i&&(t.dataset.placeholder=i.placeholder)}));break;case i.EDIT:case i.RESET:n.forEach((({self:t,handler:s})=>{if(e.currentPath===window.location.pathname&&(e.action===i.RESET||e.data.some((e=>e.name===t.dataset.propertyName)))){const i=e.data.find((e=>e.name===t.dataset.propertyName))?.value;s(i)}}))}})),s.send({cmd:e.EU,updates:[{action:i.SYNC,context:{name:window.name,height:document.body.scrollHeight}}]})):t.cmd===e.EU&&t.action===i.FOCUS&&t.updates.forEach((e=>{n.forEach((({self:t})=>{e.propertyName===t.dataset.propertyName&&e.currentPath===window.location.pathname&&t.scrollIntoView({behavior:'smooth',block:'center'})}))}))}catch(e){console.error(e)}}));const o=(e,t)=>(n.push({self:e,handler:t}),s),a=new CSSStyleSheet;a.replaceSync(':root {\n  --str-placeholder-text-opacity: 0.3;\n  --str-placeholder-background-color: #0099ff;\n  --str-placeholder-background-opacity: 0.8;\n}\nimg.previewing {\n  --img-previewing-url: \'\';\n  --img-previewing-size: 100%;\n  --img-previewing-position: 0px 0px;\n  background-image: var(--img-previewing-url);\n  background-repeat: no-repeat;\n  background-position: var(--img-previewing-position);\n  background-size: var(--img-previewing-size);\n}\nimg.previewing.previewing--empty {\n  background-image: repeating-linear-gradient(45deg, var(--str-placeholder-background-color) 0, transparent 1px, transparent 0, transparent 50%);\n  background-repeat: repeat;\n  background-position: 0 0;\n  background-size: 15px 15px;\n  outline: solid 1px var(--str-placeholder-background-color);\n  opacity: var(--str-placeholder-background-opacity);\n}\n\n\n\n:where([is^="str-h"]:empty, [is^="str-textarea"]:empty, [is^="str-address"]:empty, [is^="str-anchor"]:empty, [is^="str-p"]:empty)::before {\n  color: inherit;\n\n  opacity: var(--str-placeholder-text-opacity);\n\n  content: attr(data-placeholder);\n}');class c extends HTMLHeadingElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-h1-cpnt',c,{extends:'h1'}),customElements.define('str-h2-cpnt',class extends c{},{extends:'h2'}),customElements.define('str-h3-cpnt',class extends c{},{extends:'h3'}),customElements.define('str-h4-cpnt',class extends c{},{extends:'h4'}),customElements.define('str-h5-cpnt',class extends c{},{extends:'h5'}),customElements.define('str-h6-cpnt',class extends c{},{extends:'h6'});class d extends HTMLElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-address-cpnt',d,{extends:'address'});class h extends HTMLAnchorElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){if(e){this.href=e.href;const t=this.childNodes;if(0===t.length)this.textContent=e.text;else for(const s of t)s.nodeType===Node.TEXT_NODE&&(s.nodeValue=e.text);'_blank'===e.target&&(this.target=e.target)}}}customElements.define('str-anchor-cpnt',h,{extends:'a'});const l='https://cdn.strife.app/AS3SX_-B59mU1hdDS7B_YfI5Lu9Ut-kLpdaAhraKgy4/w:1/h:1/aHR0cHM6Ly9zdHJpZmUuYi1jZG4ubmV0L3RyYW5zcGFyZW50MXgxLnBuZw.png',p=e=>e.startsWith('http://')||e.startsWith('https://')?e:'https:'+e;customElements.define('str-picture-cpnt',class extends HTMLPictureElement{_propertyMedia;_currentSrc;constructor(){super(),this.image=this.querySelector('img'),this.sources=[...this.querySelectorAll('source')],this.tabIndex=0,this.image.complete?this.init():(this.image.addEventListener('load',(e=>{this.init()}),{once:!0}),this.image.addEventListener('error',(e=>{this.init()}),{once:!0})),this._initied=new Promise(((e,t)=>{this.loadedResolve=e,this.loadedReject=t}))}connectedCallback(){}init(){this.initPreview(),o(this,(e=>{this.render(e)}))}initPreview(){console.groupCollapsed('[STR-PICTURE-CPNT ('+window.name+') INIT DEBUG]'),this.image.currentSrc||console.warn('img[currentSrc] is empty.'),this._currentSrc=this.sources.find((e=>{if(this.image.currentSrc){const t=new URL(p(this.image.currentSrc)),s=new URL(p(e.srcset));return t.href===s.href}{const t=window.matchMedia(e.media);return console.log('Trying to match media...',e.media,'matches=',t.matches),t.matches}})),this._currentSrc?(this._propertyMedia=this._currentSrc.dataset?.propertyMedia,console.log('currentSrc set to ',this._currentSrc,' and property media set to ',this._propertyMedia),this.offsetWidth<this._currentSrc.width&&console.log('container width ('+this.offsetWidth+'px) is smaller than given source width ('+this._currentSrc.width+'px). Image is scaled to',(this.offsetWidth/this._currentSrc.width*100).toFixed(0),'%'),!this.image.currentSrc&&this._currentSrc.width&&this._currentSrc.height&&(this.image.classList.add('previewing--empty'),console.log('Image was empty on load.')),this.image.classList.add('previewing'),this.image.style.maxWidth='100%',this.image.style.width=this._currentSrc.width+'px',this.image.style.aspectRatio=this._currentSrc.width/this._currentSrc.height,console.log('image width (max 100%) and aspect ratio set to',this.image.style.width,this.image.style.aspectRatio),this.image.style.setProperty('--img-previewing-url',`url(${this.image.currentSrc||this._currentSrc.srcset})`),console.log('CSS variable --img-previewing-url set to',this.image.currentSrc||this._currentSrc.srcset||'null','[IS TRANSPARENT PIXEL:]',(this.image.currentSrc||this._currentSrc.srcset)===l),this.image.style.setProperty('--img-previewing-size','100%'),this.image.style.setProperty('--img-previewing-position','0px,0px'),this.image.src=l,this.sources.forEach((e=>{e.srcset=l})),this.image.addEventListener('load',(e=>{this.loadedResolve()}),{once:!0})):console.warn('currentSrc could not be set (null)'),console.groupEnd()}render(e){this._initied.then((()=>{if(console.groupCollapsed('[STR-PICTURE-CPNT ('+window.name+') RENDER DEBUG]'),this._propertyMedia&&e&&e[this._propertyMedia]&&e[this._propertyMedia].source&&e[this._propertyMedia].source.crop){const t=this.image.offsetWidth/e[this._propertyMedia].width,s=this.image.offsetWidth/2-e[this._propertyMedia].source.originalWidth*(e[this._propertyMedia].source.crop.zoom*t)*e[this._propertyMedia].source.crop.focusX,i=this.image.offsetHeight/2-e[this._propertyMedia].source.originalHeight*(e[this._propertyMedia].source.crop.zoom*t)*e[this._propertyMedia].source.crop.focusY,r=e[this._propertyMedia].source.originalWidth/this.image.offsetWidth*(e[this._propertyMedia].source.crop.zoom*t);this.image.style.setProperty('--img-previewing-url',`url(${e[this._propertyMedia].source.originalPreview})`),console.log('CSS variable --img-previewing-url set to',e[this._propertyMedia].source.originalPreview||'null','[IS TRANSPARENT PIXEL:]',e[this._propertyMedia].source.originalPreview===l),this.image.style.setProperty('--img-previewing-size',100*r+'%'),this.image.style.setProperty('--img-previewing-position',`${s}px ${i}px`),e[this._propertyMedia].source.originalPreview?this.image.classList.remove('previewing--empty'):this.image.classList.add('previewing--empty'),console.log('Received render request with result',e[this._propertyMedia]),console.log('Calculating: Rendered size',(100*t).toFixed(0),'%'),console.log('Calculating: Translate X',s),console.log('Calculating: Translate Y',i),console.log('Calculating: Zoom',r)}else console.warn('Received invalid result and render aborted');console.groupEnd()}))}disconnectedCallback(){}},{extends:'picture'}),customElements.define('str-img-cpnt',class extends HTMLImageElement{constructor(){super(),this.tabIndex=0,this.complete?this.init():(this.addEventListener('load',(e=>{this.init()}),{once:!0}),this.addEventListener('error',(e=>{this.init()}),{once:!0})),this._loaded=new Promise(((e,t)=>{this.loadedResolve=e,this.loadedReject=t}))}connectedCallback(){}init(){this.initPreview(),o(this,(e=>{this.render(e)}))}initPreview(){this.classList.add('previewing'),this.src||this.classList.add('previewing--empty'),this.style.width=this.width+'px',this.style.height=this.height+'px',this.style.setProperty('--img-previewing-url',`url(${this.src})`),this.style.setProperty('--img-previewing-size','100%'),this.style.setProperty('--img-previewing-position','0px,0px'),this.src='https://cdn.strife.app/AS3SX_-B59mU1hdDS7B_YfI5Lu9Ut-kLpdaAhraKgy4/w:1/h:1/aHR0cHM6Ly9zdHJpZmUuYi1jZG4ubmV0L3RyYW5zcGFyZW50MXgxLnBuZw.png',this.addEventListener('load',(e=>{this.loadedResolve()}),{once:!0})}render(e){this._loaded.then((()=>{if(e&&e.source){const t=this.offsetWidth/e.width,s=this.offsetWidth/2-e.source.originalWidth*(e.source.crop.zoom*t)*e.source.crop.focusX,i=this.offsetHeight/2-e.source.originalHeight*(e.source.crop.zoom*t)*e.source.crop.focusY,r=e.source.originalWidth/this.offsetWidth*(e.source.crop.zoom*t);this.style.setProperty('--img-previewing-url',`url(${e.source.originalPreview})`),this.style.setProperty('--img-previewing-size',100*r+'%'),this.style.setProperty('--img-previewing-position',`${s}px ${i}px`),e.source.originalPreview?this.classList.remove('previewing--empty'):this.classList.add('previewing--empty')}}))}disconnectedCallback(){}},{extends:'img'}),customElements.define('strife-blocks-cpnt',class extends HTMLDivElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.textContent=e))}},{extends:'div'});class m extends HTMLElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-strong-cpnt',m,{extends:'strong'});class u extends HTMLElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this)}}customElements.define('str-template-cpnt',u),customElements.define('str-textarea-cpnt',class extends HTMLDivElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.innerHTML=e}},{extends:'div'});class g extends HTMLSpanElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-span-cpnt',g,{extends:'span'});class y extends HTMLParagraphElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-p-cpnt',y,{extends:'p'}),customElements.define('str-chapters-cpnt',class extends HTMLDivElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(t=>{this.innerHTML='',t.forEach(((e,t)=>{let s=document.getElementById(e['@strife'].type).content;this.appendChild(s.cloneNode(!0));this.querySelectorAll(`[is^="str-"]:not([data-property-name^="${this.dataset.propertyName}."])`).forEach((s=>{const i=s.dataset.propertyName;s.dataset.propertyName=`${this.dataset.propertyName}.${t}.${i}`,s.render(e[i])}))})),s.send({cmd:e.EU,updates:[{action:i.INIT,context:{name:'chapters',propertyName:this.dataset.propertyName}}]})}))}},{extends:'div'}),document.adoptedStyleSheets=[a];export{i as ACTION,e as CMD,r as default,o as useState};
+const e={CONNECT:1,HSHK:2,EU:4,SYNC:8};class t extends MessageChannel{constructor(){super(),this.broadcastChannel=new BroadcastChannel('app.broadcast');switch(this.port1.addEventListener('message',(t=>{t.data.cmd===e.CONNECT&&this.onConnected(t)}),{once:!0}),this.port1.start(),this._ready=new Promise(((e,t)=>{this.readyResolve=e,this.readyReject=t})),this._ready.then((()=>{console.log(`SENDING MESSAGE FROM SDK IN WINDOW ${window.name}`),window.top.postMessage({cmd:e.HSHK,context:{name:window.name,height:document.body.scrollHeight}},'*',[this.port2])})),window.addEventListener('beforeunload',(()=>{console.log('unload'),this.send({foo:'bar'})})),window.addEventListener('click',(()=>{this.send({cmd:e.EU,updates:[{action:'click',lastUserInteraction:(new Date).valueOf(),context:window.name}]})}),!1),document.readyState){case'loading':case'interactive':document.onreadystatechange=()=>{'complete'===document.readyState&&this.readyResolve()};break;case'complete':this.readyResolve()}}subscribe(e){if(null==e)throw new Error('Parameter can not be null!');this.broadcastChannel.addEventListener('message',e),this.port1.addEventListener('message',e),this.port1.addEventListener('message',(e=>this.broadcastChannel.postMessage(e.data)))}send(e){this.port1.postMessage(e),this.broadcastChannel.postMessage(e)}onConnected(e){return e}}var s=new t;const i={NONE:8,EDIT:16,RESET:32,INIT:64,SYNC:128},r=()=>s,n=[];s.subscribe((({data:t})=>{try{t.cmd===e.SYNC?(t.sync.forEach((e=>{switch(e.action){case i.INIT:n.forEach((({self:t,handler:s})=>{const i=e.data.find((e=>e.propertyName===t.dataset.propertyName));e.currentPath===window.location.pathname&&i&&(t.dataset.placeholder=i.placeholder)}));break;case i.EDIT:case i.RESET:n.forEach((({self:t,handler:s})=>{if(e.currentPath===window.location.pathname&&(e.action===i.RESET||e.data.some((e=>e.name===t.dataset.propertyName)))){const i=e.data.find((e=>e.name===t.dataset.propertyName))?.value;s(i)}}))}})),s.send({cmd:e.EU,updates:[{action:i.SYNC,context:{name:window.name,height:document.body.scrollHeight}}]})):t.cmd===e.EU&&t.action===i.FOCUS&&t.updates.forEach((e=>{n.forEach((({self:t})=>{e.propertyName===t.dataset.propertyName&&e.currentPath===window.location.pathname&&t.scrollIntoView({behavior:'smooth',block:'center'})}))}))}catch(e){console.error(e)}}));const o=(e,t)=>(n.push({self:e,handler:t}),s),a=new CSSStyleSheet;a.replaceSync(':root {\n  --str-placeholder-text-opacity: 0.3;\n  --str-placeholder-background-color: #0099ff;\n  --str-placeholder-background-opacity: 0.8;\n}\nimg.previewing {\n  --img-previewing-url: \'\';\n  --img-previewing-size: 100%;\n  --img-previewing-position: 0px 0px;\n  background-image: var(--img-previewing-url);\n  background-repeat: no-repeat;\n  background-position: var(--img-previewing-position);\n  background-size: var(--img-previewing-size);\n}\nimg.previewing.previewing--empty {\n  background-image: repeating-linear-gradient(45deg, var(--str-placeholder-background-color) 0, transparent 1px, transparent 0, transparent 50%);\n  background-repeat: repeat;\n  background-position: 0 0;\n  background-size: 15px 15px;\n  outline: solid 1px var(--str-placeholder-background-color);\n  opacity: var(--str-placeholder-background-opacity);\n}\n\n\n\n:where([is^="str-h"]:empty, [is^="str-textarea"]:empty, [is^="str-address"]:empty, [is^="str-anchor"]:empty, [is^="str-p"]:empty)::before {\n  color: inherit;\n\n  opacity: var(--str-placeholder-text-opacity);\n\n  content: attr(data-placeholder);\n}');class c extends HTMLHeadingElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-h1-cpnt',c,{extends:'h1'}),customElements.define('str-h2-cpnt',class extends c{},{extends:'h2'}),customElements.define('str-h3-cpnt',class extends c{},{extends:'h3'}),customElements.define('str-h4-cpnt',class extends c{},{extends:'h4'}),customElements.define('str-h5-cpnt',class extends c{},{extends:'h5'}),customElements.define('str-h6-cpnt',class extends c{},{extends:'h6'});class d extends HTMLElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-address-cpnt',d,{extends:'address'});class h extends HTMLAnchorElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){if(e){this.href=e.href;const t=this.childNodes;if(0===t.length)this.textContent=e.text;else for(const s of t)s.nodeType===Node.TEXT_NODE&&(s.nodeValue=e.text);'_blank'===e.target&&(this.target=e.target)}}}customElements.define('str-anchor-cpnt',h,{extends:'a'});const l='https://cdn.strife.app/AS3SX_-B59mU1hdDS7B_YfI5Lu9Ut-kLpdaAhraKgy4/w:1/h:1/aHR0cHM6Ly9zdHJpZmUuYi1jZG4ubmV0L3RyYW5zcGFyZW50MXgxLnBuZw.png',p=e=>e.startsWith('http://')||e.startsWith('https://')?e:'https:'+e;customElements.define('str-picture-cpnt',class extends HTMLPictureElement{_propertyMedia;_currentSrc;constructor(){super(),this.image=this.querySelector('img'),this.sources=[...this.querySelectorAll('source')],this.tabIndex=0,this.image.complete?this.init():(this.image.addEventListener('load',(e=>{this.init()}),{once:!0}),this.image.addEventListener('error',(e=>{this.init()}),{once:!0})),this._initied=new Promise(((e,t)=>{this.loadedResolve=e,this.loadedReject=t}))}connectedCallback(){}init(){this.initPreview(),o(this,(e=>{this.render(e)}))}initPreview(){console.groupCollapsed('[STR-PICTURE-CPNT ('+window.name+') INIT DEBUG]'),this.image.currentSrc||console.warn('img[currentSrc] is empty.'),this._currentSrc=this.sources.find((e=>{if(this.image.currentSrc){const t=new URL(p(this.image.currentSrc)),s=new URL(p(e.srcset));return t.href===s.href}{const t=window.matchMedia(e.media);return console.log('Trying to match media...',e.media,'matches=',t.matches),t.matches}})),this._currentSrc?(this._propertyMedia=this._currentSrc.dataset?.propertyMedia,console.log('currentSrc set to ',this._currentSrc,' and property media set to ',this._propertyMedia),this.offsetWidth<this._currentSrc.width&&console.log('container width ('+this.offsetWidth+'px) is smaller than given source width ('+this._currentSrc.width+'px). Image is scaled to',(this.offsetWidth/this._currentSrc.width*100).toFixed(0),'%'),!this.image.currentSrc&&this._currentSrc.width&&this._currentSrc.height&&(this.image.classList.add('previewing--empty'),console.log('Image was empty on load.')),this.image.classList.add('previewing'),this.image.style.maxWidth='100%',this.image.style.width=this._currentSrc.width+'px',this.image.style.aspectRatio=this._currentSrc.width/this._currentSrc.height,console.log('image width (max 100%) and aspect ratio set to',this.image.style.width,this.image.style.aspectRatio),this.image.style.setProperty('--img-previewing-url',`url(${this.image.currentSrc||this._currentSrc.srcset})`),console.log('CSS variable --img-previewing-url set to',this.image.currentSrc||this._currentSrc.srcset||'null','[IS TRANSPARENT PIXEL:]',(this.image.currentSrc||this._currentSrc.srcset)===l),this.image.style.setProperty('--img-previewing-size','100%'),this.image.style.setProperty('--img-previewing-position','0px,0px'),this.image.src=l,this.sources.forEach((e=>{e.srcset=l})),this.image.addEventListener('load',(e=>{this.loadedResolve()}),{once:!0})):console.warn('currentSrc could not be set (null)'),console.groupEnd()}render(e){this._initied.then((()=>{if(console.groupCollapsed('[STR-PICTURE-CPNT ('+window.name+') RENDER DEBUG]'),this._propertyMedia&&e&&e[this._propertyMedia]&&e[this._propertyMedia].source&&e[this._propertyMedia].source.crop){const t=this.image.offsetWidth/e[this._propertyMedia].width,s=this.image.offsetWidth/2-e[this._propertyMedia].source.originalWidth*(e[this._propertyMedia].source.crop.zoom*t)*e[this._propertyMedia].source.crop.focusX,i=this.image.offsetHeight/2-e[this._propertyMedia].source.originalHeight*(e[this._propertyMedia].source.crop.zoom*t)*e[this._propertyMedia].source.crop.focusY,r=e[this._propertyMedia].source.originalWidth/this.image.offsetWidth*(e[this._propertyMedia].source.crop.zoom*t);this.image.style.setProperty('--img-previewing-url',`url(${e[this._propertyMedia].source.originalPreview})`),console.log('CSS variable --img-previewing-url set to',e[this._propertyMedia].source.originalPreview||'null','[IS TRANSPARENT PIXEL:]',e[this._propertyMedia].source.originalPreview===l),this.image.style.setProperty('--img-previewing-size',100*r+'%'),this.image.style.setProperty('--img-previewing-position',`${s}px ${i}px`),e[this._propertyMedia].source.originalPreview?this.image.classList.remove('previewing--empty'):this.image.classList.add('previewing--empty'),console.log('Received render request with result',e[this._propertyMedia]),console.log('Calculating: Rendered size',(100*t).toFixed(0),'%'),console.log('Calculating: Translate X',s),console.log('Calculating: Translate Y',i),console.log('Calculating: Zoom',r)}else console.warn('Received invalid result and render aborted');console.groupEnd()}))}disconnectedCallback(){}},{extends:'picture'}),customElements.define('str-img-cpnt',class extends HTMLImageElement{constructor(){super(),this.tabIndex=0,this.complete?this.init():(this.addEventListener('load',(e=>{this.init()}),{once:!0}),this.addEventListener('error',(e=>{this.init()}),{once:!0})),this._loaded=new Promise(((e,t)=>{this.loadedResolve=e,this.loadedReject=t}))}connectedCallback(){}init(){this.initPreview(),o(this,(e=>{this.render(e)}))}initPreview(){this.classList.add('previewing'),this.src||this.classList.add('previewing--empty'),this.style.width=this.width+'px',this.style.height=this.height+'px',this.style.setProperty('--img-previewing-url',`url(${this.src})`),this.style.setProperty('--img-previewing-size','100%'),this.style.setProperty('--img-previewing-position','0px,0px'),this.src='https://cdn.strife.app/AS3SX_-B59mU1hdDS7B_YfI5Lu9Ut-kLpdaAhraKgy4/w:1/h:1/aHR0cHM6Ly9zdHJpZmUuYi1jZG4ubmV0L3RyYW5zcGFyZW50MXgxLnBuZw.png',this.addEventListener('load',(e=>{this.loadedResolve()}),{once:!0})}render(e){this._loaded.then((()=>{if(e&&e.source){const t=this.offsetWidth/e.width,s=this.offsetWidth/2-e.source.originalWidth*(e.source.crop.zoom*t)*e.source.crop.focusX,i=this.offsetHeight/2-e.source.originalHeight*(e.source.crop.zoom*t)*e.source.crop.focusY,r=e.source.originalWidth/this.offsetWidth*(e.source.crop.zoom*t);this.style.setProperty('--img-previewing-url',`url(${e.source.originalPreview})`),this.style.setProperty('--img-previewing-size',100*r+'%'),this.style.setProperty('--img-previewing-position',`${s}px ${i}px`),e.source.originalPreview?this.classList.remove('previewing--empty'):this.classList.add('previewing--empty')}}))}disconnectedCallback(){}},{extends:'img'}),customElements.define('strife-blocks-cpnt',class extends HTMLDivElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.textContent=e))}},{extends:'div'});class m extends HTMLElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-strong-cpnt',m,{extends:'strong'});class u extends HTMLElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this)}}customElements.define('str-template-cpnt',u),customElements.define('str-textarea-cpnt',class extends HTMLDivElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.innerHTML=e}},{extends:'div'});class g extends HTMLSpanElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-span-cpnt',g,{extends:'span'});class y extends HTMLParagraphElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(e=>this.render(e)))}render(e){this.textContent=e}}customElements.define('str-p-cpnt',y,{extends:'p'}),customElements.define('str-chapters-cpnt',class extends HTMLDivElement{constructor(){super(),this.tabIndex=0}connectedCallback(){o(this,(t=>{this.innerHTML='',t.forEach(((e,t)=>{let s=document.getElementById(e['@strife'].template).content;this.appendChild(s.cloneNode(!0));this.querySelectorAll(`[is^="str-"]:not([data-property-name^="${this.dataset.propertyName}."])`).forEach((s=>{const i=s.dataset.propertyName;s.dataset.propertyName=`${this.dataset.propertyName}.${t}.${i}`,s.render(e[i])}))})),s.send({cmd:e.EU,updates:[{action:i.INIT,context:{name:'chapters',propertyName:this.dataset.propertyName}}]})}))}},{extends:'div'}),document.adoptedStyleSheets=[a];export{i as ACTION,e as CMD,r as default,o as useState};
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strifeapp/strife",
-  "version": "0.1.0-preview.15",
+  "version": "0.1.0-preview.16",
   "keywords": [],
   "files": [
     "dist"