@behold/widget 0.1.40 → 0.1.42
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{ErrorMessage-YFOZHHFW.js → ErrorMessage-3E_4hjWB.js} +1 -1
- package/dist/GalleryWall-v6WiVqfF.js +1 -0
- package/dist/Grid-PD4oqCS9.js +1 -0
- package/dist/PopoverGallery-4ImwBugP.js +1 -0
- package/dist/{Widget-vhfHRABW.js → Widget-uwrGOl8a.js} +1 -1
- package/dist/Widget.js +1 -1
- package/dist/{base-7DOIGMXq.js → base-LYUfM-C3.js} +1 -1
- package/dist/elements/PopoverGallery.d.ts.map +1 -1
- package/dist/elements/PopoverGallerySlide.d.ts.map +1 -1
- package/dist/widgets/GalleryWall.d.ts +1 -4
- package/dist/widgets/GalleryWall.d.ts.map +1 -1
- package/dist/widgets/Grid.d.ts +1 -4
- package/dist/widgets/Grid.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/GalleryWall-VxfSkctT.js +0 -1
- package/dist/Grid-WfGsYH6w.js +0 -1
- package/dist/PopoverGallery-7UiKU3Vw.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{B as t,c as e,s}from"./Widget-
|
|
1
|
+
import{B as t,c as e,s}from"./Widget-uwrGOl8a.js";class n extends t{label="ErrorMessage";shadow;logoEl;styleEl;errorTitleEl;errorMessageEl;errorMessageTextEl;errorMessage;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.onPropChange(this.t,["errorMessage"]),this.onConnect((()=>{this.onResize(this,this,this.l)})),this.onConnect((()=>{this.render()}))}t({changedProp:t}){this.render()}render(){if(!this.errorMessage)return;let t='<?xml version="1.0" encoding="utf-8"?>\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20.5 20.5" enable-background="new 0 0 20.5 20.5" xml:space="preserve">\n<g>\n\t<path fill="#010101" d="M10.2,20.5c-1.2,0-2.4-0.2-3.8-0.5c-2.9-0.7-5.3-3.1-6-6.1C0.2,12.7,0,11.4,0,10.3C0,9.2,0.1,8,0.4,6.8\n\t\tC1.1,3.6,3.7,1,6.9,0.4c2.4-0.5,4.4-0.5,6.8,0c3.3,0.7,5.8,3.2,6.5,6.5c0.2,1.1,0.4,2.3,0.4,3.3c0,1.1-0.1,2.3-0.4,3.5l0,0\n\t\tc-0.7,3.2-3.2,5.7-6.4,6.4C12.5,20.4,11.3,20.5,10.2,20.5z M10.2,1.5c-0.9,0-2,0.1-3,0.3C4.5,2.4,2.5,4.5,1.9,7.1\n\t\tc-0.2,1.1-0.4,2.2-0.4,3.1c0,1,0.1,2.2,0.4,3.4c0.6,2.4,2.5,4.4,4.9,5c2.3,0.6,4.2,0.6,6.6,0.1c2.6-0.6,4.7-2.7,5.2-5.3\n\t\tc0.2-1.1,0.3-2.1,0.3-3.2c0-1-0.1-2-0.3-3c-0.5-2.7-2.6-4.7-5.3-5.3C12.2,1.6,11.2,1.5,10.2,1.5z"/>\n</g>\n<g>\n\t<g>\n\t\t<path fill="#010101" d="M10.2,13.5c0.6,0,1,0.5,1,1.1c0,0.6-0.5,1.1-1,1.1s-1-0.5-1-1.1C9.2,14,9.7,13.5,10.2,13.5z M9.6,12.3\n\t\t\tL9.3,4.7h1.9l-0.3,7.5H9.6z"/>\n\t</g>\n</g>\n</svg>',s="Error";this.errorMessage.includes("Upgrade")&&(t='<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.54 17.54"><path d="M8.77,17.54c-2.35,0-4.7-.81-6.33-2.44C-.81,11.84-.81,5.69,2.44,2.44,5.69-.81,11.84-.81,15.1,2.44c3.26,3.25,3.25,9.4,0,12.66-1.63,1.63-3.98,2.44-6.33,2.44ZM8.77,1.51c-1.97,0-3.94,.67-5.27,1.99C.84,6.16,.84,11.38,3.5,14.04c2.66,2.66,7.88,2.66,10.54,0,2.66-2.66,2.66-7.88,0-10.54-1.33-1.33-3.3-1.99-5.27-1.99Z"/><path d="M8.76,13.02c-.41,0-.75-.34-.75-.75V5.26c0-.41,.34-.75,.75-.75s.75,.34,.75,.75v7.01c0,.41-.34,.75-.75,.75Z"/><path d="M6.36,8.42c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l2.41-2.41c.29-.29,.77-.29,1.06,0s.29,.77,0,1.06l-2.41,2.41c-.15,.15-.34,.22-.53,.22Z"/><path d="M11.17,8.42c-.19,0-.38-.07-.53-.22l-2.41-2.41c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l2.41,2.41c.29,.29,.29,.77,0,1.06-.15,.15-.34,.22-.53,.22Z"/></svg>',s="Upgrade Required"),this.logoEl=e({type:"a",classes:"logo",contents:'<?xml version="1.0" encoding="utf-8"?>\n<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 91.5 29.5" enable-background="new 0 0 91.5 29.5" xml:space="preserve">\n<g>\n\t<path fill="#3BA566" d="M12,11.7c0.8,0,1.8,0.1,2.8,0.3c1.3,0.3,2.4,1.3,2.6,2.6c0.2,1,0.3,1.9,0.3,2.8s-0.1,1.9-0.3,2.9\n\t\tc-0.3,1.3-1.3,2.3-2.6,2.6c-1,0.2-2,0.4-2.8,0.4c-0.9,0-1.9-0.1-3-0.4s-2-1.2-2.3-2.3s-0.4-2.1-0.4-3c0-0.8,0.1-1.8,0.3-2.8\n\t\tc0.3-1.3,1.3-2.4,2.6-2.6C10.2,11.9,11.2,11.7,12,11.7 M12,5.5c-1.4,0-2.8,0.2-4,0.5c-3.8,0.7-6.7,3.6-7.5,7.4\n\t\tC0.2,14.7,0,16.1,0,17.5c0,1.6,0.2,3.1,0.6,4.5c0.8,3.4,3.5,6.1,6.9,7c1.4,0.3,2.9,0.5,4.5,0.5c1.5,0,2.9-0.2,4.2-0.5\n\t\tc3.7-0.8,6.5-3.7,7.3-7.4c0.3-1.3,0.5-2.7,0.5-4.2c0-1.4-0.2-2.8-0.4-4c-0.8-3.8-3.7-6.6-7.5-7.4C14.8,5.7,13.4,5.5,12,5.5L12,5.5z\n\t\t"/>\n</g>\n<g id="type">\n\t<path fill="#FFFFFF" d="M42.2,20.8c0,2.6-1.9,4.3-5.1,4.3h-5.2c0.5-1.4,0.6-2.5,0.6-3.9v-7.7c0-1.4-0.1-2.5-0.6-3.9H37\n\t\tc2.4,0,4.7,1,4.7,3.6c0,2.1-1.4,3.4-3.1,3.9C40.5,17.5,42.2,18.5,42.2,20.8z M35.2,10.4c0,1.1-0.1,2-0.1,3v3.4h1.4\n\t\tc1.7,0,2.5-1.2,2.5-3.1c0-2.2-1-3.4-3.2-3.4C35.6,10.4,35.4,10.4,35.2,10.4z M39.5,21.3c0-2.4-1.4-3.6-3.3-3.6\n\t\tc-0.2,0-0.6,0-1.1,0.1v3.5c0,0.9,0,2,0.1,2.9c0.5,0.1,0.9,0.1,1.4,0.1C38.6,24.3,39.5,23.2,39.5,21.3z"/>\n\t<path fill="#FFFFFF" d="M52.7,19.1h-6.5c0.2,2.5,1.2,4.1,3.8,4.1c1.1,0,1.8-0.3,2.6-0.9c-0.2,1.6-1.5,3.1-3.9,3.1c-3,0-5-2.4-5-6.2\n\t\tc0-3.4,1.6-6.4,5-6.4c2.9,0,4,2.1,4,4.5C52.7,17.3,52.7,19.1,52.7,19.1z M50.2,17.3c0-2.5-0.7-3.6-1.8-3.6c-1.3,0-2.1,1.5-2.1,4.3\n\t\tv0.3h3C50,18.4,50.2,18.3,50.2,17.3z"/>\n\t<path fill="#FFFFFF" d="M64,25.2h-2.8c-0.2-1.1-0.3-2.4-0.3-3.8v-4.6c0-1.4-0.5-2.1-1.5-2.1c-0.6,0-1.3,0.2-2.1,1.2v5.6\n\t\tc0,1.3,0.1,2.3,0.6,3.6h-3.6c0.5-1.3,0.6-2.3,0.6-3.6v-8.2c0-1.5,0-2.9-0.6-4c1.1-0.3,2-0.7,3-1.2v7c0.9-1.6,2.2-2.2,3.4-2.2\n\t\tc1.6,0,2.6,1,2.6,3.4v5C63.4,22.7,63.5,23.8,64,25.2z"/>\n\t<path fill="#FFFFFF" d="M65.4,19.2c0-3.8,2-6.3,5-6.3c2.9,0,4.8,2.7,4.8,6.3c0,3.8-2,6.3-5,6.3C67.3,25.4,65.4,22.8,65.4,19.2z\n\t\t M72.4,19.9c0-3.1-0.7-6.1-2.4-6.1c-1.3,0-1.9,1.7-1.9,4.6c0,3.2,0.7,6.1,2.4,6.1C71.8,24.5,72.4,23,72.4,19.9z"/>\n\t<path fill="#FFFFFF" d="M77.3,21.5v-8.2c0-1.5,0-2.9-0.6-4c1.1-0.3,2-0.7,3-1.2v13.4c0,1.3,0.1,2.3,0.6,3.6h-3.6\n\t\tC77.2,23.8,77.3,22.8,77.3,21.5z"/>\n\t<path fill="#FFFFFF" d="M89,25.2c-0.2-0.3-0.4-0.8-0.4-1.4c-0.7,1.1-1.6,1.5-2.8,1.5c-2.2,0-4-1.9-4-5.6c0-4.4,2.4-6.8,5-6.8\n\t\tc0.7,0,1.2,0.1,1.7,0.4l0,0c0-1.4,0-2.9-0.6-3.9c1.1-0.3,2-0.7,3-1.2v13.3c0,1.3,0.1,2.2,0.6,3.6H89V25.2z M88.5,23.1v-6.6\n\t\tc0-2-0.8-2.6-1.7-2.6c-1.4,0-2.3,1.5-2.3,4.8c0,3.4,1.1,4.9,2.8,4.9C87.8,23.5,88.2,23.4,88.5,23.1z"/>\n</g>\n<g>\n\t<path fill="#FFFFFF" d="M32.3,4.7V0.1h2.2c1,0,1.6,0.7,1.6,1.5c0,0.8-0.6,1.5-1.6,1.5h-1.2v1.7H32.3z M34.3,0.9h-1.1v1.3h1.1\n\t\tC34.7,2.2,35,2,35,1.6C35,1.2,34.7,0.9,34.3,0.9z"/>\n\t<path fill="#FFFFFF" d="M39.5,0C41,0,42,1,42,2.4c0,1.4-1,2.4-2.4,2.4c-1.4,0-2.4-1-2.4-2.4C37.1,1,38.1,0,39.5,0z M39.5,0.9\n\t\tc-0.9,0-1.4,0.7-1.4,1.5c0,0.9,0.6,1.5,1.4,1.5S41,3.3,41,2.4C41,1.5,40.4,0.9,39.5,0.9z"/>\n\t<path fill="#FFFFFF" d="M46.8,4.7L46,1.5l-0.8,3.2h-1.1l-1.3-4.7h1.1l0.8,3.4l0.9-3.4h0.8l0.9,3.4l0.8-3.4h1.1l-1.3,4.7H46.8z"/>\n\t<path fill="#FFFFFF" d="M50.4,4.7V0.1h3.3v0.9h-2.3v1h2.3v0.9h-2.3v1.1h2.3v0.9H50.4z"/>\n\t<path fill="#FFFFFF" d="M57.8,4.7l-0.9-1.7h-0.7v1.7h-1V0.1h2.2c1,0,1.6,0.6,1.6,1.5c0,0.8-0.5,1.3-1,1.4l1.1,1.8H57.8z M57.2,0.9\n\t\th-1v1.3h1c0.4,0,0.7-0.3,0.7-0.6C57.9,1.2,57.6,0.9,57.2,0.9z"/>\n\t<path fill="#FFFFFF" d="M60.4,4.7V0.1h3.3v0.9h-2.3v1h2.3v0.9h-2.3v1.1h2.3v0.9H60.4z"/>\n\t<path fill="#FFFFFF" d="M65.1,4.7V0.1H67c1.5,0,2.5,0.9,2.5,2.3c0,1.4-1,2.3-2.5,2.3H65.1z M66.1,3.9H67c0.9,0,1.5-0.7,1.5-1.5\n\t\tC68.4,1.6,67.9,1,67,1h-0.8V3.9z"/>\n\t<path fill="#FFFFFF" d="M73.3,4.7V0.1h2.5c0.9,0,1.3,0.6,1.3,1.2c0,0.6-0.4,1-0.8,1.1c0.5,0.1,0.9,0.6,0.9,1.1\n\t\tc0,0.7-0.5,1.3-1.4,1.3H73.3z M74.3,2h1.2c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5h-1.2V2z M74.3,3.9h1.3\n\t\tc0.4,0,0.6-0.2,0.6-0.6c0-0.3-0.2-0.5-0.6-0.5h-1.3V3.9z"/>\n\t<path fill="#FFFFFF" d="M79.8,4.7V2.8L78,0.1h1.1L80.3,2l1.1-1.9h1.1l-1.8,2.8v1.9H79.8z"/>\n</g>\n</svg>',attributes:{href:"https://behold.so",target:"_blank","aria-label":"behold"}}),this.errorTitleEl=e({classes:"message__title",contents:[t,s]}),this.errorMessageTextEl=e({classes:"message__inner"}),this.errorMessageTextEl.innerHTML=this.errorMessage?.replace("Upgrade your plan",'<a href="https://app.behold.so/account" target="blank">Upgrade your plan</a>'),this.errorMessageEl=e({classes:"message",contents:[this.errorTitleEl,this.errorMessageTextEl]}),this.styleEl=e({type:"style",contents:":host{align-items:center;background:#f1f1f1 url(https://behold.pictures/widget:error-background.webp) 0 no-repeat;background-size:auto 100%;border:none;border-radius:20px;box-shadow:none;box-sizing:border-box;color:#000;display:flex;height:200px;justify-content:space-between;margin:0;max-width:750px;min-width:50px;outline:none;overflow:hidden;width:100%}:host *{box-sizing:border-box}:host(.large){height:180px}:host(.medium),:host(.small){background:#f1f1f1 url(https://behold.pictures/widget:error-background-small.webp) top no-repeat;background-size:auto 186px;flex-direction:column;height:auto}.logo{align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.75) 10%,rgba(0,0,0,.5) 75%,transparent);display:flex;flex-grow:0;flex-shrink:0;height:100%;justify-content:center;padding:0 10px 5px 0;width:220px}.logo svg{height:40px;width:auto}:host(.large) .logo{width:180px}:host(.large) .logo svg{height:35px}:host(.medium) .logo,:host(.small) .logo{background:linear-gradient(180deg,rgba(0,0,0,.75) 10%,rgba(0,0,0,.5) 40%,transparent);height:150px;width:100%}.message{align-items:center;display:flex;flex-direction:column;flex-grow:1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;gap:15px;justify-content:center;line-height:1.5;padding:20px 60px 20px 80px;text-align:center}.message a{color:#000;display:inline-block;text-decoration:underline}:host(.large) .message{font-size:15px;gap:10px;padding:20px 30px 20px 70px}:host(.medium) .message{font-size:16px;gap:15px;padding:40px 30px}:host(.small) .message{font-size:15px;gap:15px;padding:30px 20px}.message__title{align-items:center;display:flex;font-size:20px;font-weight:500;justify-content:center}.message__title svg{height:25px;margin-right:15px;width:25px}:host(.large) .message__title{font-size:18px}:host(.large) .message__title svg{height:20px;margin-right:10px;width:20px}:host(.medium) .message__title,:host(.small) .message__title{flex-direction:column;font-size:17px}:host(.medium) .message__title svg,:host(.small) .message__title svg{margin-bottom:7px;margin-right:0}".toString()}),this.shadow.replaceChildren(this.logoEl,this.errorMessageEl,this.styleEl)}l(t){const e=t?.borderBoxSize?.[0]?.inlineSize||0;let n="xlarge";e<600&&(n="large"),e<500&&(n="medium"),e<250&&(n="small"),["small","medium","large","xlarge"].forEach((t=>{s(this,{[`${t}`]:t===n})}))}static register(t="behold-error-message"){return customElements.get(t)||customElements.define(t,n),t}}export{n as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{c as t,s,a as e,f as i,t as h}from"./Widget-uwrGOl8a.js";import{B as a,I as o,V as r,A as n,s as l,g as p}from"./base-LYUfM-C3.js";class d extends a{label="GalleryWall";widgetSettings;feedMetadata;posts;previewLoadingColors=null;containerEl;heightRefEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.t,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),o.register(),r.register(),n.register(),this.i=this.i.bind(this),this.addEventListener("post-focus-next",this.h),this.addEventListener("post-focus-previous",this.o),this.onConnect((()=>{this.style.opacity="0",this.heightRefEl=t({classes:"height-ref"}),this.containerEl=t({type:"figure",classes:"posts",contents:[this.heightRefEl]}),this.renderWidget(this.containerEl,[l,".posts{display:block;min-height:100%;width:100%}.height-ref{position:relative}.post{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;border:none;color:inherit;display:block;font:inherit;height:100px;left:0;line-height:normal;overflow:hidden;position:absolute;top:0;transform-origin:top left;transition:background .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100px}.post--placeholder{background-color:#dedede;position:absolute}"]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this.containerEl,this.l)}))}t({changedProp:t,oldValue:e,newValue:i}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.p();break;case"widgetSettings":this.u(e,i);break;case"feedMetadata":this.m();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),s(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}p(){this.postEls=[],this.renderBreakpoint(this.appliedBreakpoint,!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}u(t,s){"openPopupGallery"!==t?.onPostClick&&"openPopupGallery"===s?.onPostClick&&this.enablePopoverGallery(),this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints)),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings})),this.popoverGalleryEl&&(this.popoverGalleryEl.widgetSettings=this.widgetSettings)}m(){let t=`from @${this.feedMetadata.username}`;this.feedMetadata.hashtags?.length&&(t=`from hashtag${this.feedMetadata.hashtags.length>1?"s":""} ${this.feedMetadata.hashtags.join(", ")}`),this.setAttribute("aria-label",`Gallery of Instagram posts ${t}. Shift + arrow keys to navigate`),this.postEls.forEach((t=>{t.feedMetadata=this.feedMetadata})),this.popoverGalleryEl&&(this.popoverGalleryEl.feedMetadata=this.feedMetadata)}setup(){if("transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter((t=>t.colorPalette)).map((t=>t.colorPalette));this.medianPaletteHSL=p(t,this.widgetSettings.loadingColor)}const t=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(t),this.style.opacity=""}async enablePopoverGallery(){const{default:t}=await import("./PopoverGallery-4ImwBugP.js");t.register(),this.popoverGalleryEl=document.createElement("behold-popover-gallery"),Object.assign(this.popoverGalleryEl,{widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,posts:this.posts,closeFocusEl:this,onSlideChange:t=>{this.popoverGalleryEl.closeFocusEl=this.postEls[t]}})}l(t){const s=t.contentBoxSize?.[0]?.inlineSize,e=this.widgetSettings.breakpoints,i=this.getMatchingBreakpoint(s,e);this.renderBreakpoint(i)}o(){if(!this.postEls.length)return;let t=[...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);t>0?t-=1:t=this.postEls.length-1,this.postEls[t].focus()}h(){if(!this.postEls.length)return;let t=[...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);t>-1&&t<this.postEls.length-1?t+=1:t=0,this.postEls[t].focus()}i(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.postEls=this.createPostEls(t),this.raf((()=>{this.heightRefEl.replaceChildren(...this.postEls)}),"renderPosts")}getMatchingBreakpoint(t,s){return Object.entries(s).map((([t,s])=>({width:t,...s}))).filter((t=>"default"!==t.width)).sort(((t,s)=>s.width.localeCompare(t.width))).reduce(((s,e)=>t<=parseInt(e.width)?e:s),{...s.default,numPosts:s.default.galleryWallLayout.length})}renderBreakpoint(t,s=!1){this.cancelRaf("setContainerHeight"),this.postEls||(s=!0);const h=this.appliedBreakpoint;this.appliedBreakpoint=t;const{gap:a,borderRadius:o,numPosts:r,galleryWallLayout:n,galleryWallNamedLayout:l}=t;switch(this.widgetSettings.alignment){case"left":this.style.justifyContent="flex-start";break;case"right":this.style.justifyContent="flex-end";break;default:this.style.justifyContent="center"}this.widgetSettings.maxWidth&&this.widgetSettings.constrainWidth&&this.containerEl.style.maxWidth!==`${this.widgetSettings.maxWidth}px`&&(this.containerEl.style.maxWidth=`${this.widgetSettings.maxWidth}px`),this.widgetSettings.constrainWidth||(this.containerEl.style.maxWidth=""),this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),e(this.containerEl,"--post-border-radius",`${o}%`),(h?.numPosts!==r||h?.galleryWallNamedLayout!==l.toString()||s)&&this.renderPosts(t);const p=this.containerEl.offsetWidth,d=parseInt(a.x)/1e3*p,c=parseInt(a.y)/1e3*p;this.postEls.forEach(((t,s)=>{const[e,i,h,a]=n?.[s]?n[s].split(",").map((t=>parseInt(t))):[0,0,10,10],o=e*(p/100)+d/2,r=i*(p/100);t.style.transform=`translate(${o}px, ${r}px`,t.style.width=h*(p/100)-d+"px",t.style.height=a*(p/100)-c+"px"})),i(),this.raf((()=>{this.setContainerHeight()}),"setContainerHeight")}createPostEls(s){const{gap:e}=s,i=s?.numPosts||this.posts?.length||200,h=this.posts.filter(((t,s)=>s<i)).map(((s,i,h)=>{let a="behold-image-post";return"VIDEO"===s.mediaType&&(a="behold-video-post"),"CAROUSEL_ALBUM"===s.mediaType&&(a="behold-album-post"),t({type:a,props:{post:s,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.i,hasRowGap:"0"!=`${e.y}`,index:i,totalPosts:h.length}})}));return h.length<s.galleryWallLayout.length&&s.galleryWallLayout.filter(((t,s)=>s>=h.length)).forEach((s=>{const e=t({classes:"post post--placeholder"});h.push(e)})),h}setContainerHeight=h((()=>{this.style.height=`${this.heightRefEl.scrollHeight}px`}),10,this);static register(t="behold-gallery-wall"){return customElements.get(t)||customElements.define(t,d),t}}export{d as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{c as t,s,f as i,a as e}from"./Widget-uwrGOl8a.js";import{B as h,I as a,V as o,A as r,s as n,g as l}from"./base-LYUfM-C3.js";class p extends h{label="Grid";widgetSettings;feedMetadata;posts;previewLoadingColors=null;containerEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.t,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),a.register(),o.register(),r.register(),this.i=this.i.bind(this),this.addEventListener("post-focus-next",this.h),this.addEventListener("post-focus-previous",this.o),this.onConnect((()=>{this.containerEl=t({type:"figure",classes:"posts"}),this.renderWidget(this.containerEl,[n]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this,this.l)}))}t({changedProp:t,oldValue:i,newValue:e}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.p();break;case"widgetSettings":this.u(i,e);break;case"feedMetadata":this.m();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),s(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}p(){console.log("grid.posts",this.posts),this.postEls=[],this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints),!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}u(t,s){"openPopupGallery"!==t?.onPostClick&&"openPopupGallery"===s?.onPostClick&&this.enablePopoverGallery();const i=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(i),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings})),this.popoverGalleryEl&&(this.popoverGalleryEl.widgetSettings=this.widgetSettings)}m(){let t=`from @${this.feedMetadata.username}`;this.feedMetadata.hashtags?.length&&(t=`from hashtag${this.feedMetadata.hashtags.length>1?"s":""} ${this.feedMetadata.hashtags.join(", ")}`),this.setAttribute("aria-label",`Gallery of Instagram posts ${t}. Shift + arrow keys to navigate`),this.postEls.forEach((t=>{t.feedMetadata=this.feedMetadata})),this.popoverGalleryEl&&(this.popoverGalleryEl.feedMetadata=this.feedMetadata)}setup(){if("transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter((t=>t.colorPalette)).map((t=>t.colorPalette));this.medianPaletteHSL=l(t,this.widgetSettings.loadingColor)}const t=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(t),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings,t.feedMetadata=this.feedMetadata}))}async enablePopoverGallery(){if(this.popoverGalleryEl)return;const{default:t}=await import("./PopoverGallery-4ImwBugP.js");t.register(),this.popoverGalleryEl=document.createElement("behold-popover-gallery"),Object.assign(this.popoverGalleryEl,{widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,posts:this.posts,closeFocusEl:this,onSlideChange:t=>{this.popoverGalleryEl.closeFocusEl=this.postEls[t]}})}l(t){const s=t.contentBoxSize?.[0]?.inlineSize,i=this.widgetSettings.breakpoints,e=this.getMatchingBreakpoint(s,i);this.renderBreakpoint(e)}o(){if(!this.postEls.length)return;let t=[...this.containerEl.children].indexOf(this.shadow.activeElement?.parentElement);t>0?t-=1:t=this.postEls.length-1,this.postEls[t].focus()}h(){if(!this.postEls.length)return;let t=[...this.containerEl.children].indexOf(this.shadow.activeElement?.parentElement);t>-1&&t<this.postEls.length-1?t+=1:t=0,this.postEls[t].focus()}i(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.postEls=this.createPostEls(t),this.raf((()=>{this.containerEl.replaceChildren(...this.postEls)}),"renderPosts")}getMatchingBreakpoint(t,s){return Object.entries(s).map((([t,s])=>({width:t,...s}))).filter((t=>"default"!==t.width)).sort(((t,s)=>s.width.localeCompare(t.width))).reduce(((s,i)=>t<=parseInt(i.width)?i:s),{...s.default,numPosts:this.posts.length})}renderBreakpoint(t,s=!1){this.postEls?.length||(s=!0);const h=this.appliedBreakpoint,{numColumns:a,gap:o,borderRadius:r,numPosts:n}=t;switch(h?.numPosts>n&&(this.containerEl.replaceChildren(),i()),this.widgetSettings.alignment){case"left":this.style.justifyContent="flex-start";break;case"right":this.style.justifyContent="flex-end";break;default:this.style.justifyContent="center"}this.widgetSettings.maxWidth&&this.widgetSettings.constrainWidth&&this.containerEl.style.maxWidth!==`${this.widgetSettings.maxWidth}px`&&(this.containerEl.style.maxWidth=`${this.widgetSettings.maxWidth}px`),this.widgetSettings.constrainWidth||(this.containerEl.style.maxWidth=""),this.containerEl.style.gridTemplateColumns=`repeat(${a}, 1fr)`,this.containerEl.style.gap=`${o.y}px ${o.x}px`,this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),e(this.containerEl,"--post-border-radius",`${r}%`),(h?.numPosts!==n||s)&&this.renderPosts(t),this.postEls.forEach(((s,i)=>{s.hasRowGap="0"!=`${t.gap.y}`})),this.appliedBreakpoint=t}createPostEls(s){const{numPosts:i,numColumns:e,gap:h}=s;return this.posts.filter(((t,i)=>i<(s?.numPosts||this.posts?.length||200))).map(((s,a,o)=>{const r=Math.ceil((i||this.posts.length)/e);let n="behold-image-post";return"VIDEO"===s.mediaType&&(n="behold-video-post"),"CAROUSEL_ALBUM"===s.mediaType&&(n="behold-album-post"),t({type:n,props:{post:s,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.i,hasRowGap:"0"!=`${h.y}`,isLastRow:Math.ceil((a+1)/e)===r,index:a,totalPosts:o.length}})}))}static register(t="behold-grid"){return customElements.get(t)||customElements.define(t,p),t}}export{p as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as t,c as e,s as i,f as s,t as o,d as r,B as a,e as h,j as n}from"./Widget-uwrGOl8a.js";import{a as l,b as c,R as d}from"./base-LYUfM-C3.js";let p=document,u=null,b=new Set,m=new Set,g=new MutationObserver((function(t){t.some((t=>"attributes"===t.type||![...t.addedNodes,...t.removedNodes].every((t=>t.tabIndex>=0))&&void 0))&&w({include:[u],merge:!0})})),v=!1;function x(t){const e=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,{acceptNode:function(t){return t.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),i=[];let s=null;for(;s=e.nextNode();)i.push(s);return i}async function f(){return(await Promise.all([...b].map((async t=>!!await function(t){return new Promise((async e=>{if(t.disabled)return void e(!1);const i=await function(t){return new Promise((e=>{const i=new IntersectionObserver((t=>{e(t[0].isIntersecting),i.disconnect()}));i.observe(t)}))}(t);e(!!i&&[...m].every((e=>!e.contains(t))))}))}(t)&&t)))).filter((t=>!!t))}function _(t){!["Tab"].includes(t.code)||t.ctrlKey||t.altKey||t.metaKey||(t.preventDefault(),"Tab"===t.code&&t.shiftKey?async function(){const t=await f();let e=t.indexOf(p.activeElement)-1;e<0&&(e=t.length-1),t[e]?.focus()}():async function(){const t=await f();let e=t.indexOf(p.activeElement)+1;(e>t.length-1||e<0)&&(e=0),t[e]?.focus()}())}function w({include:t=[],exclude:e=[],merge:i=!1}){i?(t.forEach((t=>{m.delete(t),x(t).forEach((t=>{b.has(t)||b.add(t)}))})),e.forEach((t=>m.add(t)))):(b=new Set(t.flatMap((t=>x(t)))),m=new Set(e))}function y(t){v&&(v=!1,t=t??document.body,document.removeEventListener("keydown",_),g.disconnect(),b.clear(),m.clear(),u=null,t&&t.focus())}class k{containerEl;slides;breadcrumbsContainerEl;previousEl;nextEl;keyboardNav;breadcrumbDiameter;onSlideChange;virtualize;proximalSlidesToRender;dynamicBreadCrumbsCutoff;dragLimit;transitionSpeed;momentumToTransition;index;t;i=document;o;h;l;p;u;m;v;_;k;C;M;S;L;D;P;F;$;A;j;constructor({slides:t,containerEl:e,breadcrumbsContainerEl:i,previousEl:s,nextEl:o,onSlideChange:r,breadcrumbDiameter:a=7,dynamicBreadCrumbsCutoff:h=10,keyboardNav:n=!0,dragLimit:l=.5,virtualize:c=!1,proximalSlidesToRender:d=1,momentumToTransition:p=5,transitionSpeed:u=300}){this.slides=t,this.containerEl=e,this.breadcrumbsContainerEl=i,this.previousEl=s,this.nextEl=o,this.onSlideChange=r,this.breadcrumbDiameter=a,this.dynamicBreadCrumbsCutoff=h,this.keyboardNav=n,this.dragLimit=l,this.virtualize=c,this.proximalSlidesToRender=d,this.transitionSpeed=u,this.momentumToTransition=p,this.index=0,this.t=!1,this.o=null,this.h=null,this.u=null,this.m=null,this._=null,this.k=null,this.C=!1,this.M=null,this.S={x:0,y:0},this.L={x:0,y:0},this.D=0,this.P=0,this.F=0,this.$=0,this.A=[],this.j=new ResizeObserver((t=>this.B(t))),this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.T=this.T.bind(this),this.O=this.O.bind(this),this.R=this.R.bind(this),this.I=this.I.bind(this),this.V=this.V.bind(this),this.U=this.U.bind(this),this.q=this.q.bind(this),this.G=this.G.bind(this),this.H=this.H.bind(this),this.N=this.N.bind(this),this.X=this.X.bind(this),this.Z=this.Z.bind(this),this.K=this.K.bind(this),this.Y=this.Y.bind(this),this.W=this.W.bind(this),this.J=this.J.bind(this),this.tt=this.tt.bind(this)}J(){this.o.addEventListener("mousedown",this.N,{passive:!0}),this.o.addEventListener("touchstart",this.X,{passive:!0}),document.body.addEventListener("mousemove",this.q,{passive:!0}),document.body.addEventListener("mouseup",this.K,{passive:!0}),document.body.addEventListener("mouseleave",this.K,{passive:!0}),document.body.addEventListener("touchmove",this.G,{passive:!0}),document.body.addEventListener("touchend",this.K,{passive:!0}),this.previousEl&&this.previousEl.addEventListener("click",this.I),this.nextEl&&this.nextEl.addEventListener("click",this.V),this.keyboardNav&&document.addEventListener("keydown",this.U)}tt(){this.o.removeEventListener("mousedown",this.N),this.o.removeEventListener("touchstart",this.X),document.body.removeEventListener("mousemove",this.q),document.body.removeEventListener("mouseup",this.K),document.body.removeEventListener("mouseleave",this.K),document.body.removeEventListener("touchmove",this.G),document.body.removeEventListener("touchend",this.K),this.previousEl&&this.previousEl.removeEventListener("click",this.I),this.nextEl&&this.nextEl.removeEventListener("click",this.V),this.keyboardNav&&document.removeEventListener("keydown",this.U)}init(i=0){this.t||(this.t=!0,this.i=t(this.containerEl),this.h=this.slides.map(((t,i)=>e({classes:"hg-slide",contents:t}))),this.u=this.slides.map(((t,i)=>e({classes:"hg-breadcrumb",listeners:{click:()=>this.T({index:i})}}))),this.p=e({classes:"hg-breadcrumbs-current"}),this.l=e({classes:"hg-breadcrumbs",contents:[...this.u,this.p]}),this.o=e({classes:"hg-container",contents:this.h,style:{"touch-action":"pan-y"}}),this.containerEl.appendChild(this.o),this.breadcrumbsContainerEl&&(this.breadcrumbsContainerEl.style.setProperty("--breadCrumbDiameter",this.breadcrumbDiameter+"px"),this.breadcrumbsContainerEl.appendChild(this.l)),this.J(),this.slides.length<2&&(this.l.style.display="none",this.previousEl.style.display="none",this.nextEl.style.display="none"),this.j?.observe(this.containerEl),this.Y(this.index,this.index,!1),this.T({index:i,animate:!1,forceUpdate:!0}))}destroy(){this.t&&(clearTimeout(this._),clearTimeout(this.k),cancelAnimationFrame(this.m),cancelAnimationFrame(this.v),this.j.disconnect(),this.tt(),this.u=null,this.p=null,this.l.remove(),this.l=null,this.o.remove(),this.o=null,this.t=!1)}B(t){}W(t,e=!0){if(this.u.length>=this.dynamicBreadCrumbsCutoff&&this.breadcrumbsContainerEl){i(this.l,{"no-transition":!e}),requestAnimationFrame((()=>{this.l.classList.remove("no-transition")}));const s=this.l.offsetWidth/2-this.breadcrumbDiameter/2-this.u[t].offsetLeft;this.l.style.transform=`translateX(${s}px)`,this.u.forEach(((e,s)=>{i(e,{"hg-breadcrumb--hidden":s<=t-5||s>=t+5,"hg-breadcrumb--4":s===t-4||s===t+4,"hg-breadcrumb--3":s===t-3||s===t+3,"hg-breadcrumb--2":s===t-2||s===t+2,"hg-breadcrumb--1":s===t-1||s===t+1})}))}}Y(t,e,i){this.u?.length&&(this.W(t,i),this.breadcrumbsContainerEl&&(!i||this.u.length>=10&&Math.abs(t-e)>1?t>e?(this.p.style.left="",this.p.style.right=this.l.offsetWidth-(this.u[t].offsetLeft+this.breadcrumbDiameter)+"px"):(this.p.style.right="",this.p.style.left=this.u[t].offsetLeft+"px"):(t<e?(this.p.style.left="",this.p.style.right=this.l.offsetWidth-this.u[e]?.offsetLeft-this.breadcrumbDiameter+"px"):(this.p.style.right="",this.p.style.left=this.u[e]?.offsetLeft+"px"),s(),this.m=requestAnimationFrame((()=>{this.p.style.width=t>e?`${this.u[t]?.offsetLeft-this.p.offsetLeft+this.breadcrumbDiameter}px`:this.p.offsetLeft+this.p.offsetWidth-this.u[t]?.offsetLeft+"px"})),this._=setTimeout((()=>{t>e?(this.p.style.left="",this.p.style.right=this.l.offsetWidth-(this.u[t].offsetLeft+this.breadcrumbDiameter)+"px"):(this.p.style.right="",this.p.style.left=this.u[t].offsetLeft+"px"),s(),this.m=requestAnimationFrame((()=>{this.p.style.width=""}))}),200))))}T({index:t,animate:e=!0,forceUpdate:i=!1,easing:s="ease"}){if(!this.h?.[t])return;if(!this.t)return;cancelAnimationFrame(this.v);const o=t,r=this.index;this.index=o,clearTimeout(this.k),this.virtualize&&this.h.forEach(((t,e)=>{Math.abs(this.index-e)>this.proximalSlidesToRender&&e!==r?t.hasChildNodes()&&t.replaceChildren():t.hasChildNodes()||t.replaceChildren(this.slides[e])})),window.matchMedia("(prefers-reduced-motion)").matches&&(e=!1),this.C=!1,this.F=0,o!==r||i?(cancelAnimationFrame(this.m),clearTimeout(this._),this.Y(o,r,e),this.onSlideChange&&this.onSlideChange(o)):this.p.style.width="",this.o.style.transition=e?`transform ${this.transitionSpeed}ms ${s}`:"",this.o.style.transform=`translateX(${-100*o}%)`,this.P=-100*o,this.previousEl&&(o<1?(this.i.activeElement===this.previousEl&&(this.v=requestAnimationFrame((()=>{this.nextEl.focus()}))),this.previousEl.setAttribute("disabled","true")):this.previousEl.removeAttribute("disabled")),this.nextEl&&(o>=this.h.length-1?(this.i.activeElement===this.nextEl&&(this.v=requestAnimationFrame((()=>{this.previousEl.focus()}))),this.nextEl.setAttribute("disabled","true")):this.nextEl.removeAttribute("disabled")),this.k=setTimeout((()=>{this.o.style.transition=""}),this.transitionSpeed)}I(){this.O()}V(){this.R()}O(t="ease"){"string"!=typeof t&&(t="ease"),this.index<1?this.T({index:this.index}):this.T({index:this.index-1,easing:t})}R(t="ease"){"string"!=typeof t&&(t="ease"),this.index>=this.h.length-1?this.T({index:this.index}):this.T({index:this.index+1,easing:t})}U(t){"ArrowRight"===t.code&&(t.preventDefault(),this.R()),"ArrowLeft"===t.code&&(t.preventDefault(),this.O())}N(t){t.stopPropagation(),t.button>0||this.Z({x:t.clientX,y:t.clientY})}X(t){t.stopPropagation(),this.Z({x:t.touches.item(0).clientX,y:t.touches.item(0).clientY})}Z(t){this.slides.length<2||!this.t||(this.C=!0,clearTimeout(this.k),cancelAnimationFrame(this.m),this.D=C(this.o,this.h).leftDelta,this.P=this.D/this.containerEl.offsetWidth*100,this.o.style.transform=`translateX(${this.P}%)`,this.o.style.transition="",this.F=0,this.p.style.transition="none",this.S=t,this.L=t,this.$=0,this.A=[])}H(t,e=!1){if(this.slides.length<2||!this.C||!this.t)return;const i=C(this.o,this.h),s=i.parent.width*this.dragLimit,o=t.x-this.L.x;var r,a;r=this.A,a=o,5===r.length&&r.shift(),r.push(a),this.L=t;const h=i.leftDelta>0||i.rightDelta<0;if(h){const t=function(t,e,i,s=.125){return t*(1-(Math.abs(e)/Math.abs(i))**s)}(o,this.$,i.parent.width);this.$=this.$+t}else this.$=this.$+o;let n=t.x-this.S.x,l=t.y-this.S.y,c=Math.abs(l)/Math.abs(n);if(e&&c>.85)return void this.K();this.F=Math.abs(n/s),o<0&&(this.M="left"),o>0&&(this.M="right");const d=this.D+this.$;this.P=d/this.containerEl.offsetWidth*100,"left"===this.M&&(this.p.style.right="",this.p.style.left=`${this.u[this.index].offsetLeft}px`),"right"===this.M&&(this.p.style.left="",this.p.style.right=this.l.offsetWidth-(this.u[this.index].offsetLeft+this.breadcrumbDiameter)+"px"),this.p.style.width=h?`${this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.P+100*this.index)/100)}px`:`${Math.min(2.75*this.breadcrumbDiameter,this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.P+100*this.index)/100))}px`,this.o.style.transform=`translateX(${this.P}%)`,this.o.style.transition=""}q(t){this.H({x:t.clientX,y:t.clientY},!1)}G(t){o(this.H,10,this)({x:t.touches.item(0).clientX,y:t.touches.item(0).clientY},!0)}K(){var t;this.C=!1,this.p.style.transition="",this.o.style.transition="",this.S={x:0,y:0},this.L={x:0,y:0},this.$=0;let e=null;switch(t=this.A,(Math.abs(t.reduce(((t,e)=>t+e),0)/t.length)>this.momentumToTransition||this.F>=1)&&(this.P+100*this.index<0&&"left"===this.M&&(e="advance"),this.P+100*this.index>0&&"right"===this.M&&(e="retreat")),e){case"advance":this.m=requestAnimationFrame((()=>this.R("cubic-bezier(0.25, .25, 0.5, 1)")));break;case"retreat":this.m=requestAnimationFrame((()=>this.O("cubic-bezier(0.25, .25, 0.5, 1)")));break;default:this.m=requestAnimationFrame((()=>this.T({index:this.index})))}this.M=null,this.A=[]}}function C(t,e){if(!t||!e?.length)return;const i=t.parentNode.getBoundingClientRect(),s=e[0].getBoundingClientRect(),o=e[e.length-1].getBoundingClientRect();return{parent:i,firstSlide:s,lastSlide:o,leftDelta:s.left-i.left,rightDelta:o.right-i.right}}class E{slides;containerEl;onSlideChange;onRequestClose;t;et;it;o;constructor({slides:t,containerEl:e,onSlideChange:i,onRequestClose:s=null}){this.slides=t,this.containerEl=e,this.onSlideChange=i,this.onRequestClose=s,this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.t=!1,this.et=null,this.it=null,this.o=null,this.st=this.st.bind(this),this.ot=this.ot.bind(this)}init(t=0){this.t||(this.t=!0,this.o=e({classes:z("inner"),contents:this.slides}),this.it=e({classes:z("container"),contents:this.o}),this.containerEl.appendChild(this.it),this.it.addEventListener("click",this.st),this.it.addEventListener("scroll",this.ot,{passive:!0}),this.T({index:t,animate:!1}))}destroy(){this.t&&(this.t=!1,this.it.removeEventListener("click",this.st),this.it.removeEventListener("scroll",this.ot),this.it.remove(),this.it=null)}ot(t){r(this.slides).then((t=>{this.et!==t&&(this.et=t,this.onSlideChange&&this.onSlideChange(this.et))}))}st(t){t.target===this.it&&this.onRequestClose&&this.onRequestClose()}T({index:t,animate:e=!0}){if(!this.slides?.[t])return;const i=this.slides[t].offsetTop;this.et=t,this.onSlideChange&&this.onSlideChange(this.et),this.it?.scrollTo({top:i-10,behavior:e?"smooth":"instant"})}}function z(t){return"behold-ps-"+t}var M='<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M4.4,7.3C4.2,7.3,4,7.5,4,7.7v4.6c0,0.2,0.2,0.4,0.4,0.4h2.2\n\tl3.2,3.2c0.2,0.2,0.6,0.1,0.6-0.2v-2.4c0-0.1-0.1-0.2-0.1-0.3L4.8,7.4C4.7,7.4,4.6,7.3,4.5,7.3C4.5,7.3,4.4,7.3,4.4,7.3z M16.1,15.2\n\tl-1.4-1.4c0.5-0.7,1.3-1.9,1.3-3.8c0-2.8-1.8-4.3-1.8-4.3c-0.1-0.2-0.4-0.2-0.6,0L13.3,6c-0.1,0.2-0.1,0.4,0,0.6\n\tc0,0,1.4,1.2,1.4,3.4c0,1.4-0.5,2.3-0.9,2.9L12.9,12c0.3-0.4,0.6-1.1,0.6-2c0-1.7-1-2.6-1-2.6c-0.1-0.2-0.4-0.2-0.6,0l-0.4,0.3\n\tc-0.1,0.2-0.1,0.4,0,0.6c0,0,0.7,0.5,0.7,1.7c0,0.4-0.1,0.8-0.2,1.1l-1.6-1.6V4.3c0-0.3-0.4-0.5-0.6-0.2L7.4,6.5L4.8,3.9\n\tc-0.1-0.1-0.4-0.1-0.5,0L4,4.3C3.8,4.4,3.8,4.7,4,4.8l1,1.1l6.7,6.7l3.5,3.5c0.1,0.1,0.4,0.1,0.5,0l0.4-0.4\n\tC16.2,15.6,16.2,15.3,16.1,15.2z"/>\n</svg>',S='<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<path fill="#FFFFFF" d="M12.5,7.3c-0.3-0.4-0.8-0.4-1.1-0.2C11,7.4,11,7.9,11.2,8.3l0,0c0.4,0.5,0.6,1.1,0.6,1.7\n\tc0,0.6-0.2,1.2-0.6,1.7c-0.3,0.4-0.2,0.9,0.1,1.1c0.4,0.3,0.9,0.2,1.1-0.1c0,0,0,0,0,0c0.6-0.8,0.9-1.7,0.9-2.7\n\tC13.4,9,13.1,8.1,12.5,7.3z M14.6,6c-0.3-0.4-0.8-0.4-1.1-0.1C13.1,6.2,13,6.7,13.3,7c0,0,0,0,0,0c0.7,0.8,1.1,1.9,1.1,3\n\tc0,1.1-0.4,2.1-1.1,3c-0.3,0.4-0.2,0.9,0.1,1.1c0.3,0.3,0.8,0.2,1.1-0.1c0.9-1.1,1.4-2.5,1.4-4C16,8.5,15.5,7.1,14.6,6z M9.7,4\n\tC9.5,4,9.2,4,9.1,4.1L6.3,6.7H4.5C4.2,6.7,4,7,4,7.3v5.5c0,0.3,0.2,0.5,0.5,0.5h1.8l2.7,2.6l0,0c0.2,0.2,0.6,0.2,0.8,0\n\tc0.1-0.1,0.2-0.3,0.2-0.4l0-10.8C10,4.3,9.9,4.1,9.7,4z"/>\n</svg>';class L extends a{label="PopoverSlideVideo";rt;ht;nt;isPlaying=!1;post;constructor(){super(),l.register(),c.register(),this.lt=this.lt.bind(this),this.ct=this.ct.bind(this),this.dt=this.dt.bind(this),this.ut=this.ut.bind(this),this.bt=this.bt.bind(this),this.play=this.play.bind(this),this.pause=this.pause.bind(this),this.showSoundControl=this.showSoundControl.bind(this),this.hideSoundControl=this.hideSoundControl.bind(this),this.preload=this.preload.bind(this),this.onPropChange(this.gt,["isPlaying"],[]),this.onGlobalStateChange(this.vt),this.onConnect((()=>{this.post.mediaUrl?(this.rt=e({type:"behold-video",classes:"video",props:{mediaUrl:this.post.mediaUrl,sizes:this.post.sizes},listeners:{click:this.ut,load:this.lt,play:this.ct,pause:this.dt}}),this.nt=e({type:"button",classes:"video-mute",contents:this.state.isMuted?M:S,listeners:{click:this.bt},attributes:{"aria-label":this.state.isMuted?"unmute":"mute"}}),this.state.isMuted?this.rt.mute():this.rt.unmute(),this.classList.add("video-container","video-container--paused"),this.replaceChildren(this.rt,this.nt)):(this.ht=e({type:"behold-image",props:{sizes:this.post.sizes,mediaUrl:this.post.thumbnailUrl,isSquare:!1},listeners:{load:this.lt}}),this.replaceChildren(this.ht))}))}gt({changedProp:t,newValue:e}){"isPlaying"===t&&e&&this.rt?.isLoaded&&!this.rt.isPlaying&&this.rt.play()}vt({changedProps:t,newState:e}){t.includes("isMuted")&&this.rt&&this.nt&&(e.isMuted?(this.rt.mute(),this.nt.innerHTML=M):(this.rt.unmute(),this.nt.innerHTML=S))}lt(){this.dispatchEvent(new Event("load")),this.classList.add("is-loaded"),this.rt&&this.isPlaying&&!this.rt.isPlaying&&this.rt.play()}ct(){this.classList.remove("video-container--paused")}dt(){this.classList.add("video-container--paused")}ut(){this.rt&&(this.rt.isPlaying?this.pause():this.play())}bt(){this.rt&&(this.rt.muted?this.updateGlobalState({isMuted:!1}):this.updateGlobalState({isMuted:!0}))}play(){this.isPlaying=!0}pause(){this.isConnected&&this.rt?.isPlaying&&this.rt.pause()}showSoundControl(){this.isConnected&&this.nt&&this.nt.classList.add("video-mute--visible")}hideSoundControl(){this.isConnected&&this.nt&&this.nt.classList.remove("video-mute--visible")}preload(){this.rt?.preload()}static register(t="behold-popover-slide-video"){return customElements.get(t)||customElements.define(t,L),t}}var D='<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.83 10.15"><path d="M.22,5.61s.02,.01,.03,.02l4.3,4.3c.29,.29,.77,.29,1.06,0s.29-.77,0-1.06L1.81,5.08,5.61,1.28c.29-.29,.29-.77,0-1.06-.15-.15-.34-.22-.53-.22s-.38,.07-.53,.22L.25,4.52s-.02,.01-.03,.02C.07,4.69,0,4.88,0,5.08c0,.19,.07,.39,.22,.54Z" fill="#081b10"/></svg>',P='<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.83 10.15"><path d="M5.61,4.54s-.02-.01-.03-.02L1.28,.22C.99-.07,.51-.07,.22,.22S-.07,.99,.22,1.28l3.79,3.79L.22,8.87c-.29,.29-.29,.77,0,1.06,.15,.15,.34,.22,.53,.22s.38-.07,.53-.22L5.58,5.63s.02-.01,.03-.02c.15-.15,.22-.34,.22-.54,0-.19-.07-.39-.22-.54Z" fill="#081b10"/></svg>';class F extends a{label="PopoverSlideAlbum";xt;ft;_t;wt;yt;kt;Ct;Et=0;post;constructor(){super(),this.onPropChange((()=>{}),["post"]),c.register(),L.register(),this.zt=this.zt.bind(this),this.Mt=this.Mt.bind(this),this.preload=this.preload.bind(this),this.onConnect((()=>{this._t=this.St();const t=this.post.sizes?.full?.height?`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${this.post.sizes?.full?.width}' height='${this.post.sizes?.full?.height}'%3E%3C/svg%3E%0A`:this.post.children?.[0]?.sizes?.full.mediaUrl||this.post.children?.[0]?.thumbnailUrl||this.post.children?.[0]?.mediaUrl;this.ft=e({type:"img",classes:"slide__carousel-spaceholder",attributes:{src:t,height:this.post.sizes?.full?.height,width:this.post.sizes?.full?.width}}),this.wt=e({type:"button",classes:"slide__carousel-previous",attributes:{"aria-label":"Previous album slide"},contents:D}),this.yt=e({type:"button",classes:"slide__carousel-next",attributes:{"aria-label":"Next album slide"},contents:P}),this.kt=e({classes:"slide__carousel-breadcrumbs"}),this.xt=e({classes:"slide__carousel",contents:[...this._t,this.wt,this.yt,this.kt]}),this.replaceChildren(this.ft,this.xt),this.Ct=new k({slides:this._t,containerEl:this.xt,keyboardNav:!1,breadcrumbsContainerEl:this.kt,dynamicBreadCrumbsCutoff:7,previousEl:this.wt,nextEl:this.yt,onSlideChange:this.zt,virtualize:!0,proximalSlidesToRender:2,dragLimit:.6}),this.onIntersection(this,this.Mt)})),this.onDisconnect((()=>{this.Ct.destroy(),this.Ct=null}))}Lt(){w({include:[this._t[this.Et]],exclude:this._t.filter(((t,e)=>e!==this.Et)),merge:!0})}Mt(t){t.isIntersecting&&(this.Ct.init(0),this.zt(this.Et))}zt(t){t!==this.Et&&this.state.keyboardNavEnabled&&h(`Slide ${t+1} of ${this._t.length} in Album`),this.Et=t,this._t.forEach(((e,i)=>{$(e)&&(i===t?(e.showSoundControl(),e.play()):(e.hideSoundControl(),e.pause()))}));const e=this._t[t-1],i=this._t[t+1];e&&e.preload(),i&&i.preload();const s=d(this.post.children[t].colorPalette?.dominant||"100,100,100").map((t=>Math.round(t)));this.style.backgroundColor=`hsl(${s[0]} ${Math.min(s[1],35)}% ${Math.min(s[2],13)}%)`;const o=d(this.post.children[t].colorPalette?.dominant||"255,255,255").map((t=>Math.round(t))),r=`hsl(${o[0]} ${o[1]}% ${Math.max(o[2],50)}%)`;this.style.setProperty("--uib-color",r),this.Lt(),this.updateGlobalState({popoverOverlayColor:`hsl(${s[0]} ${Math.min(s[1],50)}% ${Math.min(s[2],15)}% / .85)`})}St(){return this.post.children.map((t=>{let i=null;switch(t.mediaType){case"IMAGE":i=e({type:"behold-image",classes:"slide__carousel-slide",props:{sizes:t.sizes,mediaUrl:t.mediaUrl,isSquare:!1,showLoader:!0}});break;case"VIDEO":i=e({type:"behold-popover-slide-video",classes:"slide__carousel-slide",props:{post:t}})}return i}))}play(){const t=this._t[this.Et];$(t)&&(t.showSoundControl(),t.play())}pause(){this._t.filter($).forEach((t=>{t.hideSoundControl(),t.pause()}))}preload(){this._t?.[0]?.preload()}static register(t="behold-popover-slide-album"){return customElements.get(t)||customElements.define(t,F),t}}const $=t=>"BEHOLD-POPOVER-SLIDE-VIDEO"===t.tagName;var A='<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">\n<g>\n\t<path fill="#262626" d="M13.8,5.9H3.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h10.6c0.4,0,0.7,0.3,0.7,0.7S14.1,5.9,13.8,5.9z"/>\n</g>\n<g>\n\t<path fill="#262626" d="M12.8,10.8H2.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h10.6c0.4,0,0.7,0.3,0.7,0.7S13.2,10.8,12.8,10.8z"\n\t\t/>\n</g>\n<g>\n\t<path fill="#262626" d="M8.9,15.3c0,0-0.1,0-0.1,0c-0.4-0.1-0.6-0.4-0.5-0.8l2.4-13.3c0.1-0.4,0.4-0.6,0.8-0.5\n\t\tc0.4,0.1,0.6,0.4,0.5,0.8L9.6,14.8C9.5,15.1,9.2,15.3,8.9,15.3z"/>\n</g>\n<g>\n\t<path fill="#262626" d="M4.7,15.3c0,0-0.1,0-0.1,0c-0.4-0.1-0.6-0.4-0.5-0.8L6.4,1.2c0.1-0.4,0.4-0.6,0.8-0.5\n\t\tc0.4,0.1,0.6,0.4,0.5,0.8L5.3,14.8C5.3,15.1,5,15.3,4.7,15.3z"/>\n</g>\n</svg>';class j extends a{label="PopoverGallerySlide";o;Dt;Pt;Ft;$t;At;jt;Bt;Tt;Ot;Rt;post;feedMetadata;constructor(){super(),this.onPropChange(this.gt,["post","feedMetadata"]),c.register(),L.register(),F.register(),this.expandCaption=this.expandCaption.bind(this),this.preload=this.preload.bind(this),this.onConnect((()=>{this.Ot?this.classList.add("is-loaded"):this.render()}))}render(){if(this.classList.remove("is-loaded"),!this.post)return;const t=d(this.post.colorPalette?.dominant||"100,100,100").map((t=>Math.round(t))),i=`hsl(${t[0]} ${Math.min(t[1],35)}% ${Math.min(t[2],13)}%)`,o=d(this.post.colorPalette?.dominant||"255,255,255").map((t=>Math.round(t))),r=`hsl(${o[0]} ${o[1]}% ${Math.max(o[2],50)}%)`;switch(this.style.setProperty("--uib-color",r),this.post.mediaType){case"IMAGE":this.Ot=e({type:"behold-image",classes:"slide__media",style:{backgroundColor:i},props:{sizes:this.post.sizes,mediaUrl:this.post.mediaUrl,isSquare:!1,showLoader:!0}});break;case"VIDEO":this.Ot=e({type:"behold-popover-slide-video",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}});break;case"CAROUSEL_ALBUM":this.Ot=e({type:"behold-popover-slide-album",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}})}this.Dt=this.feedMetadata?.profilePictureUrl?e({type:"img",attributes:{src:this.feedMetadata.profilePictureUrl}}):null,this.Pt="@"+this.feedMetadata.username,this.feedMetadata.hashtags&&(this.Dt=A,this.Pt=this.feedMetadata.hashtags.join(", ")),this.Ft=this.Dt?e({classes:"slide__avatar",contents:this.Dt,attributes:{"aria-label":this.feedMetadata.hashtags?"hashtags":"username"}}):null,this.$t=e({classes:"slide__header",contents:[this.Ft,this.Pt]}),this.At=this.post?.caption?.trim()?.length?e({classes:"slide__caption",contents:this.post.caption}):null,this.jt=this.post.permalink?e({type:"a",attributes:{href:this.post.permalink,target:"_blank"},classes:"slide__footer-link",contents:["Go to post",'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<g>\n\t<path d="M16,19.8H4c-2.1,0-3.8-1.7-3.8-3.8V4c0-2.1,1.7-3.8,3.8-3.8h12c2.1,0,3.8,1.7,3.8,3.8v12C19.8,18.1,18.1,19.8,16,19.8z\n\t\t M4,1.8c-1.2,0-2.2,1-2.2,2.2v12c0,1.2,1,2.2,2.2,2.2h12c1.2,0,2.2-1,2.2-2.2V4c0-1.2-1-2.2-2.2-2.2H4z"/>\n</g>\n<path d="M14.4,5.6v7.5h-1.5V8.2l-6,6l-1.1-1.1l6-6H6.9V5.6H14.4z"/>\n</svg>']}):"",this.Bt=e({classes:"slide__footer",contents:[this.jt]}),this.Tt=e({classes:"slide__text",contents:[this.$t,this.At,this.Bt]}),this.o=e({classes:"slide__inner",contents:[this.Ot,this.Tt]}),this.Rt=e({type:"button",classes:"slide__more",contents:"… more",listeners:{click:this.expandCaption}}),this.replaceChildren(this.o),s(),this.to((()=>{this.classList.add("is-loaded")}),10,"onConnect")}gt({changedProp:t,newValue:i}){switch(t){case"feedMetadata":if(!this.isConnected)return;this.Pt="@"+i.username,i.hashtags?.length?(this.Dt=A,this.Pt=i.hashtags.join(", ")):this.Dt=i?.profilePictureUrl?e({type:"img",attributes:{src:i.profilePictureUrl}}):null,this.Ft=this.Dt?e({classes:"slide__avatar",contents:this.Dt,attributes:{"aria-label":this.feedMetadata.hashtags?"hashtags":"username"}}):null,this.$t=e({classes:"slide__header",contents:[this.Ft,this.Pt]});break;case"post":this.Ot||this.render(),console.log("popoverGallerySlide:onPostChange this.post, mediaEl",i,this.Ot),"IMAGE"===i.mediaType?Object.assign(this.Ot,{sizes:this.post.sizes,mediaUrl:this.post.mediaUrl,isSquare:!1,showLoader:!0}):B(this.Ot)||(this.Ot.post=i)}}activate(){if("VIDEO"===this.post.mediaType&&this.Ot){const t=this.Ot;t.play(),t.showSoundControl()}}deactivate(){"VIDEO"===this.post.mediaType&&this.Ot&&this.Ot.pause(),"CAROUSEL_ALBUM"===this.post.mediaType&&this.Ot&&this.Ot.pause()}preload(){this.Ot?.preload()}expandCaption(){this.At&&(this.At.style.transition="",this.At.style.height=this.At.offsetHeight+"px",this.At.innerHTML=this.post?.caption||"",s(),this.raf((()=>{this.At.style.transition="height .3s ease",this.At.style.height=this.At.scrollHeight+"px",this.to((()=>{this.At.style.transition="",this.At.style.height=""}),300,"expandCaption")}),"expandCaption"))}collapseCaption(){if(!this.At)return;const t=n({text:this.post.caption,maxChars:120,maxLines:4});this.At.innerHTML=t,t?.length<this.post?.caption?.length&&this.At.appendChild(this.Rt)}static register(t="behold-popover-gallery-slide"){return customElements.get(t)||customElements.define(t,j),t}}const B=t=>"BEHOLD-IMAGE"===t.tagName;class T extends a{label="PopoverGallery";It=900;Vt;Ut;qt;Gt;wt;yt;Ht;Nt;o;Xt;Zt;Kt;Yt=0;posts;widgetSettings;feedMetadata;closeFocusEl=document.body;onSlideChange;constructor(){super(),this.Vt=this.attachShadow({mode:"open"}),this.onPropChange(this.gt,["posts","widgetSettings","feedMetadata"]),j.register(),this.zt=this.zt.bind(this),this.Wt=this.Wt.bind(this),this.Jt=this.Jt.bind(this),this.onGlobalStateChange((()=>{i(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{this.classList.add(`theme--${this.widgetSettings.popupColorTheme||"auto"}`),i(this,{"keyboard-nav":this.state.keyboardNavEnabled}),this.Gt=e({classes:"overlay",listeners:{click:this.Wt}}),this.wt=e({type:"button",classes:"previous",attributes:{"aria-label":"Previous post"},contents:D}),this.yt=e({type:"button",classes:"next",attributes:{"aria-label":"Next post"},contents:P}),this.Ht=e({type:"button",classes:"close",contents:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<path fill-rule="evenodd" clip-rule="evenodd" fill="#081B10" d="M11.6,10.1l5.5-5.7c0.5-0.5,0.5-1.1,0-1.6c-0.5-0.5-1.1-0.5-1.6,0\n\tl-5.5,5.6L4.4,2.8C4,2.4,3.3,2.4,2.8,2.8S2.4,4,2.8,4.4L8.4,10l-5.5,5.6c-0.5,0.5-0.5,1.1,0,1.6c0.5,0.5,1.1,0.5,1.6,0l5.5-5.6\n\tl5.5,5.6c0.5,0.5,1.1,0.5,1.6,0c0.5-0.5,0.5-1.1,0-1.6C17,15.6,11.6,10.1,11.6,10.1z"/>\n</svg>',attributes:{"aria-label":"Close"},listeners:{click:t=>{t.preventDefault(),this.Wt()}}}),this.Nt=e({classes:"breadcrumbs"}),this.Xt=this.posts.map((t=>{const e=document.createElement("behold-popover-gallery-slide");return e.post=t,e.feedMetadata=this.feedMetadata,e})),this.o=e({classes:"inner",contents:this.Xt}),this.Ut=document.createDocumentFragment(),this.Ut.replaceChildren(this.Gt,this.o,this.Nt,this.wt,this.yt,this.Ht),this.qt=e({type:"style",contents:[":host{--icon-play:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M28.4 14.9 9.5 4.2C7.5 3.1 5 4.6 5 6.8v21.3c0 2.3 2.5 3.7 4.5 2.6l19-10.7c2-1 2-4-.1-5.1z'/%3E%3C/svg%3E\");--icon-gallery:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M27.3 22.7v-17c0-2.6-2.1-4.7-4.7-4.7H5.7C3.1 1 1 3.1 1 5.7v17c0 2.6 2.1 4.7 4.7 4.7h17c2.5-.1 4.6-2.2 4.6-4.7zm4-13.4v14.6c0 4.1-3.4 7.4-7.4 7.4H9.2c-.5 0-.8.6-.5 1 .9 1 2.2 1.6 3.7 1.6h12.1c5.2 0 9.3-4.2 9.3-9.3V12.5c0-1.5-.6-2.8-1.6-3.7-.3-.4-.9 0-.9.5z'/%3E%3C/svg%3E\");--bottomPadding:60px;--height:min(calc(100vh - 120px - var(--bottomPadding)),1400px);--width:calc(100vw - 120px);--text-width:400px;--text-color:#262626;--text-background:#fff;--text-size:15px;--border-color:#ededed;--ease-out-back:cubic-bezier(0.085,1.735,0.285,0.995);align-items:center;box-sizing:border-box;height:100vh;justify-content:flex-start;left:0;overflow:hidden;pointer-events:none;position:fixed;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:99999}:host *{box-sizing:border-box}@media (max-width:1200px){:host{--text-width:300px;--text-size:13px}}:host(.is-scroller){--text-width:100%;--height:auto;--width:calc(100vw - 40px)}@media (prefers-color-scheme:dark){:host(.theme--auto){--text-color:#f2f2f2;--text-background:#1a1a1a;--border-color:#292929}}:host(.theme--dark){--text-color:#f2f2f2;--text-background:#1a1a1a;--border-color:#292929}:host(.is-visible){pointer-events:all}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:rgba(0,0,0,.6);display:block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .3s ease;width:100%;will-change:opacity,background-color}:host(.is-visible) .overlay{opacity:1;pointer-events:all}.inner{display:flex;height:calc(100% - var(--bottomPadding));justify-content:center;pointer-events:none;position:relative;width:100%;z-index:1}:host(.is-scroller) .inner{height:100%}behold-popover-gallery-slide{align-items:center;display:flex;flex-grow:0;flex-shrink:0;height:calc(100% - var(--bottomPadding));justify-content:center;margin:0;opacity:0;padding:0;pointer-events:none;transform:scale(.99);transition:transform .2s ease-out,opacity .2s ease-out;width:100%}@media (min-width:901px){behold-popover-gallery-slide:active{cursor:grabbing}}@media (prefers-reduced-motion){behold-popover-gallery-slide{transform:none;transition:none}}:host(.is-visible) behold-popover-gallery-slide.is-loaded{opacity:1;transform:none}:host(.is-scroller) behold-popover-gallery-slide{height:auto;margin-top:10px}.slide__inner{align-items:center;background-color:var(--text-background);display:flex;justify-content:center;max-height:var(--height);max-width:var(--width);overflow:hidden;pointer-events:all;position:relative}:host(.is-scroller) .slide__inner{border-radius:4px;flex-direction:column}.slide__media{align-items:center;display:flex;flex-shrink:1;height:var(--height);justify-content:center;max-height:var(--height);overflow:hidden;position:relative;transition:background-color .3s ease;z-index:1}.slide__media img,.slide__media video{height:auto;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center center;object-position:center center;opacity:0;position:relative;width:auto;z-index:1}behold-image{min-height:10px;min-width:10px;pointer-events:none;position:relative}behold-image.is-loaded img{opacity:1;transition:opacity .4s ease}.slide__carousel{height:100%;left:0;position:absolute;top:0;width:100%}.slide__carousel:before{background:linear-gradient(0deg,rgba(0,0,0,.4),transparent);bottom:0;height:60px;left:0;width:100%;z-index:1}.slide__carousel:after,.slide__carousel:before{content:\"\";pointer-events:none;position:absolute;transform:translateZ(0)}.slide__carousel:after{background:var(--icon-gallery);height:20px;left:20px;opacity:.75;top:20px;width:20px;z-index:2}:host(.is-scroller) .slide__carousel:after{left:auto;right:15px;top:15px}img.slide__carousel-spaceholder{height:auto;max-height:100%;max-width:100%;opacity:0;pointer-events:none;visibility:hidden;width:auto}.slide__carousel-breadcrumbs{bottom:30px;height:10px;left:50%;position:absolute;transform:translateX(-50%);z-index:2}:host(.is-scroller) .slide__carousel-breadcrumbs{bottom:10px}.slide__carousel-next,.slide__carousel-previous{align-items:center;background-color:hsla(0,0%,100%,.95);border:none;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.2);display:flex;height:30px;justify-content:center;opacity:.75;outline:none;position:absolute;top:50%;transform:translateY(-50%) translateZ(0);transition:opacity .3s ease;width:30px;z-index:2}:host(.keyboard-nav) .slide__carousel-next:focus,:host(.keyboard-nav) .slide__carousel-previous:focus{background-color:#000;box-shadow:0 0 10px rgba(0,0,0,.2),0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}:host(.keyboard-nav) .slide__carousel-next:focus svg path,:host(.keyboard-nav) .slide__carousel-previous:focus svg path{fill:#fff}.slide__carousel-next:not(:disabled),.slide__carousel-previous:not(:disabled){cursor:pointer}.slide__carousel-next:not(:disabled):hover,.slide__carousel-previous:not(:disabled):hover{opacity:1}.slide__carousel-next:disabled,.slide__carousel-previous:disabled{opacity:.25}.slide__carousel-next:before,.slide__carousel-previous:before{content:\"\";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.slide__carousel-next svg,.slide__carousel-previous svg{height:12px;position:absolute;width:12px}.slide__carousel-next svg path,.slide__carousel-previous svg path{fill:#000}:host(.is-scroller) .slide__carousel-next,:host(.is-scroller) .slide__carousel-previous{background-color:transparent;box-shadow:none;height:20px;width:20px}:host(.is-scroller) .slide__carousel-next svg path,:host(.is-scroller) .slide__carousel-previous svg path{fill:#fff}.slide__carousel-previous{left:20px}.slide__carousel-previous svg{transform:translateX(-1px)}:host(.is-scroller) .slide__carousel-previous{left:10px}.slide__carousel-next{right:20px}.slide__carousel-next svg{transform:translateX(1px)}:host(.is-scroller) .slide__carousel-next{right:10px}.slide__carousel-slide{cursor:grab;display:flex;height:var(--height);overflow:hidden;width:auto}.slide__carousel-slide:active{cursor:grabbing}.slide__carousel-slide-media{height:auto;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;pointer-events:none;width:auto}.video-container{align-items:center;cursor:pointer;display:flex;height:var(--height);justify-content:center;overflow:hidden;position:relative}.video-container:after{background:var(--icon-play);content:\"\";filter:drop-shadow(1px 1px 1px rgba(0,0,0,.1));height:80px;left:calc(50% - 40px);opacity:0;pointer-events:none;position:absolute;top:calc(50% - 40px);transform:scale(.5);transition:all .15s ease;width:80px;z-index:2}.video-container.video-container--paused:after{opacity:.8;transform:none;transition:opacity .2s ease,transform .3s var(--ease-out-back)}.video-container:active{cursor:grabbing}behold-video{align-items:center;display:flex;height:100%;width:100%}behold-video.is-loaded video{opacity:1;transition:opacity .4s ease}.video-mute{align-items:center;background:transparent;border:none;bottom:0;cursor:pointer;display:flex;height:60px;justify-content:center;margin:0;opacity:0;outline:none;padding:0;position:absolute;right:0;transform:translateZ(0);transition:opacity .1s ease;width:60px;z-index:2}.video-mute.video-mute--visible{opacity:1;transition:opacity .2s ease .2s}.video-mute:before{background-color:rgba(0,0,0,.5);border-radius:50%;content:\"\";height:28px;left:calc(50% - 14px);position:absolute;top:calc(50% - 14px);width:28px}:host(.keyboard-nav) .video-mute:focus:before{background-color:#000;box-shadow:0 0 10px rgba(0,0,0,.2),0 0 0 2px #4169e1,0 0 0 4px #fff}.video-mute svg{height:20px;left:calc(50% - 10px);position:absolute;top:calc(50% - 10px);width:20px}.slide__text{align-items:stretch;box-shadow:-1px 0 0 var(--border-color);color:var(--text-color);display:flex;flex-direction:column;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:var(--text-size);height:var(--height);justify-content:flex-start;pointer-events:none;position:relative;transform:translateZ(0);width:var(--text-width);z-index:1}.slide__header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;font-weight:600;line-height:1.25;padding:30px}@media (prefers-color-scheme:dark){.theme--auto .slide__header{border-color:#292929}}.slide__header.theme--dark{border-color:#292929}@media (max-width:1200px){.slide__header{padding:20px}}.slide__avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:42px;justify-content:center;margin-right:10px;overflow:hidden;position:relative;width:42px}.slide__avatar:before{background:radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#c33cbe 12%,#c33cbe 58%);height:100%;left:0;top:0;width:100%}.slide__avatar:after,.slide__avatar:before{border-radius:50%;content:\"\";position:absolute}.slide__avatar:after{background-color:var(--text-background);height:calc(100% - 4px);left:2px;top:2px;width:calc(100% - 4px)}@media (prefers-color-scheme:dark){.theme--auto .slide__avatar{background-color:#333}}.slide__avatar.theme--dark{background-color:#333}.slide__avatar img{border-radius:50%;height:calc(100% - 8px);position:relative;width:calc(100% - 8px);z-index:1}.slide__avatar svg{height:15px;position:relative;width:15px;z-index:1}.slide__avatar svg path{fill:var(--text-color)}:host(.is-scroller) .slide__avatar{height:32px;width:32px}:host(.is-scroller) .slide__avatar svg{height:12px;width:12px}.slide__caption{line-height:1.5;overflow:auto;padding:30px;scrollbar-width:none;white-space:pre-wrap;word-break:break-word}:host(.is-visible) .slide__caption{pointer-events:all}.slide__caption::-webkit-scrollbar{width:0!important}:host(.is-scroller) .slide__caption{overflow:hidden}.slide__more{background:transparent;border:none;color:var(--text-color);cursor:pointer;margin:0;opacity:.75;padding:0}.slide__more:hover{opacity:1;text-decoration:underline}.slide__footer{border-top:1px solid var(--border-color);margin-top:auto}:host(.is-visible) .slide__footer{pointer-events:all}.slide__footer-link{align-items:center;color:var(--text-color);cursor:pointer;display:flex;font-size:.9333em;font-weight:600;padding:30px;text-decoration:none;transition:background .3s ease}:host(.keyboard-nav) .slide__footer-link:focus{background-color:var(--border-color);border:none;box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 3px #4169e1;outline:none;transition:background .1s ease}.slide__footer-link:hover{background-color:var(--border-color)}.slide__footer-link svg{height:17px;margin-left:auto;width:17px}.slide__footer-link svg path{fill:var(--text-color)}@media (max-width:1200px){.slide__footer-link{padding:20px}}.breadcrumbs{align-items:center;bottom:calc(var(--bottomPadding)/2 + 30px - (var(--breadCrumbDiameter) + 10px)/2);display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);justify-content:center;left:50%;opacity:0;position:absolute;transform:translateX(-50%);width:auto;z-index:2}:host(.is-visible) .breadcrumbs{opacity:1}.breadcrumbs-current{background-color:#fff;border-radius:calc(var(--breadCrumbDiameter)/2);height:var(--breadCrumbDiameter);position:absolute;top:5px;transition:width .3s ease;width:var(--breadCrumbDiameter);will-change:left,right,width}.breadcrumb{background-color:hsla(0,0%,100%,.4);border-radius:50%;cursor:pointer;display:block;height:7px;transition:all .3s ease;width:7px}.breadcrumb:hover{background-color:#fff}.close{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:30px;justify-content:center;margin:0;opacity:0;padding:0;position:absolute;right:15px;top:15px;width:30px;z-index:2}:host(.is-visible) .close{opacity:.75;transition:opacity .3s ease}:host(.is-visible) .close:hover{opacity:1}:host(.keyboard-nav) .close:focus{box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}.close:focus{border:none;outline:none}.close:before{content:\"\";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.close svg{height:20px;width:20px}.close svg path{fill:#fff}:host(.is-scroller) .close{background-color:hsla(0,0%,97%,.85);border-radius:50%;opacity:1;right:5px;top:5px}:host(.is-scroller) .close svg{height:14px;width:14px}:host(.is-scroller) .close svg path{fill:#000}.next,.previous{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:60px;justify-content:center;margin:0;opacity:0;padding:0;position:absolute;top:calc(50% - var(--bottomPadding)/2);transform:translateY(-50%);width:60px;z-index:2}:host(.is-visible) .next,:host(.is-visible) .previous{opacity:.75;transition:opacity .3s ease}:host(.is-visible) .next:focus,:host(.is-visible) .previous:focus{border:none;outline:none}:host(.is-visible) .next:hover,:host(.is-visible) .previous:hover{opacity:1}:host(.is-visible) .next:disabled,:host(.is-visible) .previous:disabled{cursor:default;opacity:.15}:host(.is-visible) .next:disabled:hover,:host(.is-visible) .previous:disabled:hover{opacity:.15}:host(.keyboard-nav) .next:focus,:host(.keyboard-nav) .previous:focus{box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}.next svg,.previous svg{height:16px;width:16px}.next svg path,.previous svg path{fill:#fff}.previous{left:0}.next{right:0}.ldr{--uib-size:50px;--uib-speed:1s;--uib-stroke:2px;--uib-bg-opacity:0.1;align-items:center;border-radius:calc(var(--uib-stroke)/2);contain:strict;display:none;height:var(--uib-stroke);justify-content:center;left:calc(50% - 15px);overflow:hidden;position:absolute;top:calc(50% - 15px);transform:translateZ(0);width:var(--uib-size)}.ldr.ldr--visible{display:flex}behold-image.is-loaded .ldr{display:none}.ldr:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.ldr:after,.ldr:before{background-color:var(--uib-color);content:\"\";height:100%;transition:background-color .3s ease;width:100%}.ldr:after{animation:wobble var(--uib-speed) ease-in-out infinite;border-radius:calc(var(--uib-stroke)/2);transform:translateX(-95%)}@keyframes wobble{0%,to{transform:translateX(-95%)}50%{transform:translateX(95%)}}".toString(),'.hg-container{align-items:flex-start;backface-visibility:hidden;contain:layout style;justify-content:flex-start;-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform}.hg-container,.hg-slide{display:flex;height:100%;width:100%}.hg-slide{contain:strict;flex-grow:0;flex-shrink:0}.hg-breadcrumbs,.hg-slide{align-items:center;justify-content:center}.hg-breadcrumbs{--ease:cubic-bezier(0.215,0.61,0.355,1);display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);pointer-events:all;position:relative;transition:transform .4s var(--ease);width:auto;will-change:transform}.hg-breadcrumbs.no-transition{transition:none}@media (prefers-reduced-motion){.hg-breadcrumbs{transition:none}}.hg-breadcrumbs-current,.hg-breadcrumbs-current:empty{background-color:#fff;border-radius:calc(var(--breadCrumbDiameter)/2);display:block;height:var(--breadCrumbDiameter);position:absolute;top:5px;transition:width .3s var(--ease);width:var(--breadCrumbDiameter);will-change:left,right,width}.hg-breadcrumb,.hg-breadcrumb:empty{cursor:pointer;display:block;flex-shrink:0;height:var(--breadCrumbDiameter);position:relative;width:var(--breadCrumbDiameter)}.hg-breadcrumb:before,.hg-breadcrumb:empty:before{content:"";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--breadCrumbDiameter)*1.75)}.hg-breadcrumb:after,.hg-breadcrumb:empty:after{background-color:hsla(0,0%,100%,.4);border-radius:50%;content:"";height:100%;left:0;position:absolute;top:0;transition:all .3s var(--ease);width:100%}.no-transition .hg-breadcrumb:after,.no-transition .hg-breadcrumb:empty:after{transition:none}@media (prefers-reduced-motion){.hg-breadcrumb:after,.hg-breadcrumb:empty:after{transition:none}}.hg-breadcrumb.hg-breadcrumb--1:after,.hg-breadcrumb:empty.hg-breadcrumb--1:after{transform:scale(.85)}.hg-breadcrumb.hg-breadcrumb--2:after,.hg-breadcrumb:empty.hg-breadcrumb--2:after{opacity:.75;transform:scale(.7)}.hg-breadcrumb.hg-breadcrumb--3:after,.hg-breadcrumb:empty.hg-breadcrumb--3:after{opacity:.5;transform:scale(.55)}.hg-breadcrumb.hg-breadcrumb--4:after,.hg-breadcrumb:empty.hg-breadcrumb--4:after{opacity:.25;transform:scale(.4)}.hg-breadcrumb.hg-breadcrumb--hidden,.hg-breadcrumb:empty.hg-breadcrumb--hidden{pointer-events:none}.hg-breadcrumb.hg-breadcrumb--hidden:after,.hg-breadcrumb:empty.hg-breadcrumb--hidden:after{opacity:0;transform:scale(0)}.hg-breadcrumb:empty:hover:after,.hg-breadcrumb:hover:after{background-color:#fff;opacity:1;transform:none}'.toString(),'.behold-ps-container{display:flex;height:100vh;justify-content:center;overflow:auto;pointer-events:all;scrollbar-width:none;width:100%}.behold-ps-container::-webkit-scrollbar{width:0!important}.behold-ps-inner{max-width:400px}.behold-ps-inner:before{height:10px}.behold-ps-inner:after,.behold-ps-inner:before{content:"";display:block;pointer-events:none;width:100%}.behold-ps-inner:after{height:90px}'.toString()]}),this.Zt=new k({slides:this.Xt,containerEl:this.o,breadcrumbsContainerEl:this.Nt,previousEl:this.wt,nextEl:this.yt,onSlideChange:this.zt,breadcrumbDiameter:this.Xt.length>9?9:8,virtualize:!0,dragLimit:.4}),this.Kt=new E({slides:this.Xt,containerEl:this.o,onSlideChange:this.zt,onRequestClose:()=>{this.Wt()}}),this.onGlobalStateChange(this.vt),this.onResize(this,this,this.B)})),this.onDisconnect((()=>{document.removeEventListener("keydown",this.Jt),y(this.closeFocusEl),this.Zt.destroy(),this.Kt.destroy(),this.Zt=null,this.Kt=null}))}gt({changedProp:t,newValue:e}){switch(t){case"posts":if(e&&this.Xt){console.log("popoverGallery.posts",e);const t=e.reduce(((t,e)=>(t[e.id]=e,t)),{});this.Xt.map((e=>{e.post=t[e.post.id]}))}case"feedMetadata":this.Xt&&this.Xt.map((t=>{t.feedMetadata=e}))}}vt({changedProps:t,newState:e}){t.includes("popoverOverlayColor")&&this.raf((()=>{this.Gt.style.backgroundColor=e.popoverOverlayColor}),"overlayColor")}Jt(t){"Escape"===t.code&&(t.preventDefault(),this.Wt())}open(t,e){this.Yt=t,this.cancelRaf("open"),this.closeFocusEl=e,this.Qt(),s(),this.raf((()=>{this.classList.add("is-visible"),async function(t,e=[],i=0){u=t,p=(t=>t instanceof ShadowRoot)(t)?t:document,v=!0,w({include:[t],exclude:e}),document.addEventListener("keydown",_),g.observe(t,{subtree:!0,attributes:!0,attributeFilter:["disabled"],childList:!0});const s=await f();s[i]?.focus()}(this.Vt,this.Xt?.filter(((e,i)=>i!==t)),1),this.te(this.offsetWidth),this.Xt[t].activate(),document.addEventListener("keydown",this.Jt)}),"open")}Wt(){this.cancelTo("close"),this.classList.remove("is-visible"),this.to(this.remove.bind(this),300,"close"),y(this.closeFocusEl),document.removeEventListener("keydown",this.Jt)}zt(t){this.Yt=t;let e="image";switch(this.posts[t]?.mediaType){case"VIDEO":e=this.posts[t].isReel?"reel":"video";break;case"CAROUSEL_ALBUM":e="album";break;default:e="image"}this.state.keyboardNavEnabled&&h(`${e}, post ${t+1} of ${this.Xt.length} in gallery`),w({include:[this.Vt],exclude:this.Xt.filter(((e,i)=>i!==t)),merge:!1}),this.onSlideChange&&this.onSlideChange(t),this.Xt.forEach(((e,i)=>{i===t?e.activate():e.deactivate()}));const i=this.Xt[t-1]??null,s=this.Xt[t+1]??null;if(i&&this.raf((()=>i.preload()),"preloadPrev"),s&&this.raf((()=>s.preload()),"preloadNext"),"CAROUSEL_ALBUM"!==this.posts[t]?.mediaType){const e=d(this.posts[t]?.colorPalette?.dominant||"100,100,100").map((t=>Math.round(t)));this.updateGlobalState({popoverOverlayColor:`hsl(${e[0]} ${Math.min(e[1],50)}% ${Math.min(e[2],15)}% / .85)`})}}te(t){t>this.It?(this.classList.remove("is-scroller"),this.wt.style.display="",this.yt.style.display="",this.Kt.destroy(),this.Zt.init(this.Yt),this.Xt.forEach((t=>t.expandCaption()))):(this.classList.add("is-scroller"),this.Zt.destroy(),this.Kt.init(this.Yt),this.Xt.forEach((t=>t.collapseCaption())),this.wt.disabled=!1,this.wt.style.display="none",this.yt.disabled=!1,this.yt.style.display="none")}B(t){const e=t?.borderBoxSize?.[0]?.inlineSize||0;this.te(e)}Qt(){document.body.append(this),this.Vt.replaceChildren(this.Ut,this.qt)}static register(t="behold-popover-gallery"){return customElements.get(t)||customElements.define(t,T),t}}export{T as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t){return JSON.parse(JSON.stringify(t,((t,e)=>void 0===e?null:e)))}function e(){return document.body.offsetTop}async function s(t,e){const s=document.createElement(t);return new Promise(((i,n)=>{switch(t){case"img":s.addEventListener("load",(()=>{i(e)}));break;case"video":s.addEventListener("loadeddata",(()=>i(e)))}s.addEventListener("error",(t=>{n(t)})),s.src=e}))}function i({text:t,maxLines:e=2,maxChars:s=50}){if(!t)return;const i=t.match(/.*/g).filter((t=>t.length>0)).slice(0,e).join("").length,n=Math.min(i,s);return t.slice(0,n)}function n(t,e){return`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${t}' height='${e}'%3E%3C/svg%3E%0A`}function o(t){return new Promise((e=>{let s=new IntersectionObserver((t=>{let i=t.reduce(((t,e,s)=>e.intersectionRatio>t.intersectionRatio?{index:s,intersectionRatio:e.intersectionRatio}:t),{intersectionRatio:0,index:null});s.disconnect(),s=null,e(i.index)}));t.forEach((t=>s.observe(t)))}))}function r(t){return t.isConnected?"#document"===t.nodeName||t instanceof ShadowRoot?t:r(t.parentNode):document}function a(t,e,s=null,i=!1){let n=i,o=null;return(...i)=>{n?(clearTimeout(o),o=setTimeout((()=>{n=!1,t.apply(s,i)}),e)):(t.apply(s,i),n=!0,setTimeout((()=>{n=!1}),e))}}function l(t,e){Object.entries(e).forEach((([e,s])=>{s?t.classList.add(e):t.classList.remove(e)}))}function h(t,e,s){t.style.setProperty(e,s)}function d(t,e,s){return"string"==typeof s&&(s=[s]),s.reduce(((s,i)=>!u(t?.[i],e?.[i])||s),!1)}function u(t,e,s=!1,i=!1){if(i&&(Array.isArray(t)&&(t=t.sort()),Array.isArray(e)&&(e=e.sort())),s&&("number"==typeof t&&(t=t.toString()),"number"==typeof e&&(e=e.toString())),typeof t!=typeof e)return!1;if(null===t&&null===e)return!0;if(null===t&&null!==e)return!1;if(null!==t&&null===e)return!1;if(void 0===t&&void 0===e)return!0;if(void 0===t&&void 0!==e)return!1;if(void 0!==t&&void 0===e)return!1;if("object"==typeof t)return Object.keys(t).length===Object.keys(e).length&&Object.entries(t).reduce(((t,[n,o])=>!!u(o,e[n],s,i)&&t),!0);if(Array.isArray(t)){let n=!0;return t.forEach(((t,o)=>{u(t,e[o],s,i)||(n=!1)})),n}return t===e}function c(t,e="assertive"){const s=document.createElement("div");s.innerHTML=t,s.setAttribute("aria-live",e),s.setAttribute("aria-atomic","true"),s.style.cssText="\n position: absolute;\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n ",requestAnimationFrame((()=>{document.body.appendChild(s),setTimeout((()=>{s.remove()}),500)}))}let p={isMuted:!0,popoverOverlayColor:"rgba(0, 0, 0, 0.6)",keyboardNavEnabled:!1},m=!1,w=null,g=null;const b=new Map,f=new Map,v=new Set;class y extends HTMLElement{label="BaseElement";storedProperties=new Map;requiredProperties=[];hasRequiredProps=!1;propChangeHandlers=new Map;queuedPropUpdates=new Set;localState={};localStateChangeHandlers=new Set;connectHandlers=new Set;disconnectHandlers=new Set;rafs=new Map;timeouts=new Map;constructor(){super(),this.t=this.t.bind(this),this.i=this.i.bind(this),this.o=this.o.bind(this),w||(w=new ResizeObserver((t=>{t.forEach((t=>{const e=b.get(t.target);e&&e(t)}))}))),g||(g=new IntersectionObserver((t=>{t.forEach((t=>{const e=f.get(t.target);e&&e(t)}))}))),m||(m=!0,document.addEventListener("keydown",this.t),document.addEventListener("mousedown",this.i),document.addEventListener("mousemove",this.o,{passive:!0}))}connectedCallback(){this.connectHandlers.forEach((t=>t()))}disconnectedCallback(){this.rafs.forEach((t=>cancelAnimationFrame(t))),this.rafs.clear(),this.timeouts.forEach((t=>clearTimeout(t))),this.timeouts.clear(),this.disconnectHandlers.forEach((t=>t()))}onConnect(t){this.connectHandlers.add(t)}onDisconnect(t){this.disconnectHandlers.add(t)}onResize(t,e,s){b.set(e,s.bind(t)),w.observe(e),this.disconnectHandlers.add((()=>{b.delete(e),w.unobserve(e)}))}onIntersection(t,e){f.set(t,e),g.observe(t),this.disconnectHandlers.add((()=>{f.delete(t),g.unobserve(t)}))}onPropChange(e,s,i=null){i?this.requiredProperties.push(...i):this.requiredProperties.push(...s),s.forEach((s=>{void 0!==this[s]&&this.storedProperties.set(s,this[s]),this.propChangeHandlers.get(s)||this.propChangeHandlers.set(s,[]),this.propChangeHandlers.get(s).push(e),Object.defineProperty(this,s,{set(e){void 0===e&&(e=null,console.warn(`Attempted to set value of ${s} as "undefined" on ${this.label}. ${s} was coerced to null instead.`)),e=t(e);const i=this.storedProperties.has(s)?t(this.storedProperties.get(s)):null;this.storedProperties.set(s,e),this.queueHandlers({prop:s,oldValue:i,newValue:e,context:this})},get(){return this.storedProperties.get(s)}})})),this.queueMissingPropsCheck()}queueHandlers({prop:t,oldValue:e,newValue:s}){this.hasRequiredProps=this.requiredProperties.every((t=>this.storedProperties.has(t))),this.hasRequiredProps?(this.queuedPropUpdates.size&&(this.queuedPropUpdates.delete(t),this.runQueuedPropHandlers()),this.propChangeHandlers.get(t).forEach((i=>{i.call(this,{changedProp:t,oldValue:e,newValue:s})}))):this.queuedPropUpdates.add(t)}runQueuedPropHandlers(){this.queuedPropUpdates.forEach((t=>{this.propChangeHandlers.get(t).forEach((e=>{e.call(this,{changedProp:t,oldValue:null,newValue:this[t]})}))})),this.queuedPropUpdates.clear()}updateLocalState(e){const s=t(this.localState);this.localState={...this.localState,...e},this.localStateChangeHandlers.forEach((t=>t({changedProps:Object.keys(e),oldState:s,newState:this.localState})))}onLocalStateChange(t,e){this.localState={...this.localState,...e},this.connectHandlers.add((()=>{const e=t.bind(this);this.localStateChangeHandlers.add(e),this.disconnectHandlers.add((()=>this.localStateChangeHandlers.delete(e)))}))}updateGlobalState(e){const s=t(p);p={...p,...e},v.forEach((t=>t({changedProps:Object.keys(e),oldState:s,newState:p})))}onGlobalStateChange(t){this.connectHandlers.add((()=>{const e=t.bind(this);v.add(e),this.disconnectHandlers.add((()=>v.delete(e)))}))}t(t){"Tab"===t.key&&this.updateGlobalState({keyboardNavEnabled:!0})}i(t){0===t.clientX&&0===t.clientY||this.updateGlobalState({keyboardNavEnabled:!1})}o(t){t.ctrlKey||t.altKey||t.shiftKey||t.metaKey||0===t.movementX||0===t.movementY||this.updateGlobalState({keyboardNavEnabled:!1})}get state(){return p}set state(t){throw new Error("Shared state cannot be set directly. Use this.updateGlobalState() instead.")}raf(t,e,s=!0){s&&cancelAnimationFrame(this.rafs.get(e));const i=requestAnimationFrame((()=>{t(),this.rafs.delete(e)}));return this.rafs.set(e,i),i}cancelRaf(t){cancelAnimationFrame(this.rafs.get(t)),this.rafs.delete(t)}to(t,e,s){const i=setTimeout((()=>{t(),this.timeouts.delete(s)}),e);return this.timeouts.set(s,i),i}cancelTo(t){clearTimeout(this.timeouts.get(t)),this.timeouts.delete(t)}queueMissingPropsCheck(){queueMicrotask((()=>{if(this.requiredProperties.length&&!this.hasRequiredProps){const t=this.requiredProperties.filter((t=>!this.storedProperties.has(t)));console.error(`${this.label||this.tagName} is missing required props: ${t.join(", ")}`)}}))}}function x(t){let{type:e="div",classes:s=[],contents:i=[],attributes:n={},props:o={},style:r={},listeners:a={}}=t;s=Array.isArray(s)?s:[s];const l=document.createElement(e);return Array.isArray(i)||(i=[i]),i=i.filter((t=>null!=t)).map((t=>{if("string"==typeof t&&t.includes("</svg>")){const e=document.createElement("template");return e.innerHTML=t,e.content}return t})),l.replaceChildren(...i),s.length&&(l.className=s.join(" ")),Object.keys(n).forEach((t=>{l.setAttribute(t,n[t])})),Object.assign(l,o),Object.keys(r).forEach((t=>{l.style[t]=r[t]})),Object.keys(a).forEach((t=>{l.addEventListener(t,a[t])})),l}class S extends y{label="BeholdWidget";#t;#e;#s;static get observedAttributes(){return["feed-id"]}constructor(){super(),this.#t=this.attachShadow({mode:"open"}),this.#e=null,this.onPropChange(this.l,["widgetSettings","feedMetadata","posts","previewLoadingColors","errorMessage"],[])}attributeChangedCallback(t,e,s){"feed-id"===t&&s!==e&&this.#i(s)}l({changedProp:t,oldValue:e,newValue:s}){"errorMessage"!==t||e||!s?"widgetSettings"===t&&d(s,e,"type")?this.#n(s?.type):this.#s&&!u(s,e)&&(this.#s[t]=s):this.#n("ErrorMessage")}async#n(t){"classic"===t&&(t="grid");const e=(await this.#o(t.replace(/.?/,(t=>t.toUpperCase())))).register(),s=x({type:e}),i=x({type:"style",contents:":host{align-items:center;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;margin:0;min-width:50px;overflow:hidden;position:relative;width:100%}:host *{box-sizing:border-box}:host([hidden]){display:none}".toString()});this.#t.replaceChildren(s,i),this.#s=this.#t.querySelector(e),this.widgetSettings&&(this.#s.widgetSettings=this.widgetSettings),this.feedMetadata&&(this.#s.feedMetadata=this.feedMetadata),this.posts&&(this.#s.posts=this.posts),this.#s.errorMessage=this.errorMessage||null,window.dispatchEvent(new CustomEvent("behold:widget-loaded",{detail:{id:this["feed-id"]}}))}async#i(t){if(t){this.#e&&this.#e.abort(),this.#e=new AbortController;try{const e=await fetch(`https://feeds.behold.so/${t}`,{mode:"cors",signal:this.#e.signal});if(e.ok){const t=await e.json();this.widgetSettings=t.widgetSettings,this.feedMetadata={username:t.username,profilePictureUrl:t.profilePictureUrl,website:t.website,followersCount:t.followersCount,hashtags:t.hashtags},this.posts=t.media}else{const t=await e.text();this.errorMessage=t}}catch(t){"The user aborted a request."!==t.message&&(this.errorMessage=t.message)}}else this.errorMessage="No feed ID provided"}async#o(t){const{default:e}=await function(t){switch(t){case"./widgets/ErrorMessage.ts":return import("./ErrorMessage-YFOZHHFW.js");case"./widgets/GalleryWall.ts":return import("./GalleryWall-VxfSkctT.js");case"./widgets/Grid.ts":return import("./Grid-WfGsYH6w.js");default:return new Promise((function(e,s){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(s.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}(`./widgets/${t}.ts`);return e}static register(t="behold-widget"){return customElements.get(t)||customElements.define(t,class extends S{}),t}}export{y as B,h as a,t as b,x as c,r as d,o as e,e as f,n as g,d as h,u as i,c as j,i as k,S as l,s as p,l as s,a as t};
|
|
1
|
+
function t(t){return JSON.parse(JSON.stringify(t,((t,e)=>void 0===e?null:e)))}function e(){return document.body.offsetTop}async function s(t,e){const s=document.createElement(t);return new Promise(((i,n)=>{switch(t){case"img":s.addEventListener("load",(()=>{i(e)}));break;case"video":s.addEventListener("loadeddata",(()=>i(e)))}s.addEventListener("error",(t=>{n(t)})),s.src=e}))}function i({text:t,maxLines:e=2,maxChars:s=50}){if(!t)return;const i=t.match(/.*/g).filter((t=>t.length>0)).slice(0,e).join("").length,n=Math.min(i,s);return t.slice(0,n)}function n(t,e){return`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${t}' height='${e}'%3E%3C/svg%3E%0A`}function o(t){return new Promise((e=>{let s=new IntersectionObserver((t=>{let i=t.reduce(((t,e,s)=>e.intersectionRatio>t.intersectionRatio?{index:s,intersectionRatio:e.intersectionRatio}:t),{intersectionRatio:0,index:null});s.disconnect(),s=null,e(i.index)}));t.forEach((t=>s.observe(t)))}))}function r(t){return t.isConnected?"#document"===t.nodeName||t instanceof ShadowRoot?t:r(t.parentNode):document}function a(t,e,s=null,i=!1){let n=i,o=null;return(...i)=>{n?(clearTimeout(o),o=setTimeout((()=>{n=!1,t.apply(s,i)}),e)):(t.apply(s,i),n=!0,setTimeout((()=>{n=!1}),e))}}function l(t,e){Object.entries(e).forEach((([e,s])=>{s?t.classList.add(e):t.classList.remove(e)}))}function h(t,e,s){t.style.setProperty(e,s)}function d(t,e,s){return"string"==typeof s&&(s=[s]),s.reduce(((s,i)=>!u(t?.[i],e?.[i])||s),!1)}function u(t,e,s=!1,i=!1){if(i&&(Array.isArray(t)&&(t=t.sort()),Array.isArray(e)&&(e=e.sort())),s&&("number"==typeof t&&(t=t.toString()),"number"==typeof e&&(e=e.toString())),typeof t!=typeof e)return!1;if(null===t&&null===e)return!0;if(null===t&&null!==e)return!1;if(null!==t&&null===e)return!1;if(void 0===t&&void 0===e)return!0;if(void 0===t&&void 0!==e)return!1;if(void 0!==t&&void 0===e)return!1;if("object"==typeof t)return Object.keys(t).length===Object.keys(e).length&&Object.entries(t).reduce(((t,[n,o])=>!!u(o,e[n],s,i)&&t),!0);if(Array.isArray(t)){let n=!0;return t.forEach(((t,o)=>{u(t,e[o],s,i)||(n=!1)})),n}return t===e}function c(t,e="assertive"){const s=document.createElement("div");s.innerHTML=t,s.setAttribute("aria-live",e),s.setAttribute("aria-atomic","true"),s.style.cssText="\n position: absolute;\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n ",requestAnimationFrame((()=>{document.body.appendChild(s),setTimeout((()=>{s.remove()}),500)}))}let p={isMuted:!0,popoverOverlayColor:"rgba(0, 0, 0, 0.6)",keyboardNavEnabled:!1},m=!1,w=null,g=null;const b=new Map,f=new Map,v=new Set;class y extends HTMLElement{label="BaseElement";storedProperties=new Map;requiredProperties=[];hasRequiredProps=!1;propChangeHandlers=new Map;queuedPropUpdates=new Set;localState={};localStateChangeHandlers=new Set;connectHandlers=new Set;disconnectHandlers=new Set;rafs=new Map;timeouts=new Map;constructor(){super(),this.t=this.t.bind(this),this.i=this.i.bind(this),this.o=this.o.bind(this),w||(w=new ResizeObserver((t=>{t.forEach((t=>{const e=b.get(t.target);e&&e(t)}))}))),g||(g=new IntersectionObserver((t=>{t.forEach((t=>{const e=f.get(t.target);e&&e(t)}))}))),m||(m=!0,document.addEventListener("keydown",this.t),document.addEventListener("mousedown",this.i),document.addEventListener("mousemove",this.o,{passive:!0}))}connectedCallback(){this.connectHandlers.forEach((t=>t()))}disconnectedCallback(){this.rafs.forEach((t=>cancelAnimationFrame(t))),this.rafs.clear(),this.timeouts.forEach((t=>clearTimeout(t))),this.timeouts.clear(),this.disconnectHandlers.forEach((t=>t()))}onConnect(t){this.connectHandlers.add(t)}onDisconnect(t){this.disconnectHandlers.add(t)}onResize(t,e,s){b.set(e,s.bind(t)),w.observe(e),this.disconnectHandlers.add((()=>{b.delete(e),w.unobserve(e)}))}onIntersection(t,e){f.set(t,e),g.observe(t),this.disconnectHandlers.add((()=>{f.delete(t),g.unobserve(t)}))}onPropChange(e,s,i=null){i?this.requiredProperties.push(...i):this.requiredProperties.push(...s),s.forEach((s=>{void 0!==this[s]&&this.storedProperties.set(s,this[s]),this.propChangeHandlers.get(s)||this.propChangeHandlers.set(s,[]),this.propChangeHandlers.get(s).push(e),Object.defineProperty(this,s,{set(e){void 0===e&&(e=null,console.warn(`Attempted to set value of ${s} as "undefined" on ${this.label}. ${s} was coerced to null instead.`)),e=t(e);const i=this.storedProperties.has(s)?t(this.storedProperties.get(s)):null;this.storedProperties.set(s,e),this.queueHandlers({prop:s,oldValue:i,newValue:e,context:this})},get(){return this.storedProperties.get(s)}})})),this.queueMissingPropsCheck()}queueHandlers({prop:t,oldValue:e,newValue:s}){this.hasRequiredProps=this.requiredProperties.every((t=>this.storedProperties.has(t))),this.hasRequiredProps?(this.queuedPropUpdates.size&&(this.queuedPropUpdates.delete(t),this.runQueuedPropHandlers()),this.propChangeHandlers.get(t).forEach((i=>{i.call(this,{changedProp:t,oldValue:e,newValue:s})}))):this.queuedPropUpdates.add(t)}runQueuedPropHandlers(){this.queuedPropUpdates.forEach((t=>{this.propChangeHandlers.get(t).forEach((e=>{e.call(this,{changedProp:t,oldValue:null,newValue:this[t]})}))})),this.queuedPropUpdates.clear()}updateLocalState(e){const s=t(this.localState);this.localState={...this.localState,...e},this.localStateChangeHandlers.forEach((t=>t({changedProps:Object.keys(e),oldState:s,newState:this.localState})))}onLocalStateChange(t,e){this.localState={...this.localState,...e},this.connectHandlers.add((()=>{const e=t.bind(this);this.localStateChangeHandlers.add(e),this.disconnectHandlers.add((()=>this.localStateChangeHandlers.delete(e)))}))}updateGlobalState(e){const s=t(p);p={...p,...e},v.forEach((t=>t({changedProps:Object.keys(e),oldState:s,newState:p})))}onGlobalStateChange(t){this.connectHandlers.add((()=>{const e=t.bind(this);v.add(e),this.disconnectHandlers.add((()=>v.delete(e)))}))}t(t){"Tab"===t.key&&this.updateGlobalState({keyboardNavEnabled:!0})}i(t){0===t.clientX&&0===t.clientY||this.updateGlobalState({keyboardNavEnabled:!1})}o(t){t.ctrlKey||t.altKey||t.shiftKey||t.metaKey||0===t.movementX||0===t.movementY||this.updateGlobalState({keyboardNavEnabled:!1})}get state(){return p}set state(t){throw new Error("Shared state cannot be set directly. Use this.updateGlobalState() instead.")}raf(t,e,s=!0){s&&cancelAnimationFrame(this.rafs.get(e));const i=requestAnimationFrame((()=>{t(),this.rafs.delete(e)}));return this.rafs.set(e,i),i}cancelRaf(t){cancelAnimationFrame(this.rafs.get(t)),this.rafs.delete(t)}to(t,e,s){const i=setTimeout((()=>{t(),this.timeouts.delete(s)}),e);return this.timeouts.set(s,i),i}cancelTo(t){clearTimeout(this.timeouts.get(t)),this.timeouts.delete(t)}queueMissingPropsCheck(){queueMicrotask((()=>{if(this.requiredProperties.length&&!this.hasRequiredProps){const t=this.requiredProperties.filter((t=>!this.storedProperties.has(t)));console.error(`${this.label||this.tagName} is missing required props: ${t.join(", ")}`)}}))}}function x(t){let{type:e="div",classes:s=[],contents:i=[],attributes:n={},props:o={},style:r={},listeners:a={}}=t;s=Array.isArray(s)?s:[s];const l=document.createElement(e);return Array.isArray(i)||(i=[i]),i=i.filter((t=>null!=t)).map((t=>{if("string"==typeof t&&t.includes("</svg>")){const e=document.createElement("template");return e.innerHTML=t,e.content}return t})),l.replaceChildren(...i),s.length&&(l.className=s.join(" ")),Object.keys(n).forEach((t=>{l.setAttribute(t,n[t])})),Object.assign(l,o),Object.keys(r).forEach((t=>{l.style[t]=r[t]})),Object.keys(a).forEach((t=>{l.addEventListener(t,a[t])})),l}class S extends y{label="BeholdWidget";#t;#e;#s;static get observedAttributes(){return["feed-id"]}constructor(){super(),this.#t=this.attachShadow({mode:"open"}),this.#e=null,this.onPropChange(this.l,["widgetSettings","feedMetadata","posts","previewLoadingColors","errorMessage"],[])}attributeChangedCallback(t,e,s){"feed-id"===t&&s!==e&&this.#i(s)}l({changedProp:t,oldValue:e,newValue:s}){"errorMessage"!==t||e||!s?"widgetSettings"===t&&d(s,e,"type")?this.#n(s?.type):this.#s&&!u(s,e)&&(this.#s[t]=s):this.#n("ErrorMessage")}async#n(t){"classic"===t&&(t="grid");const e=(await this.#o(t.replace(/.?/,(t=>t.toUpperCase())))).register(),s=x({type:e}),i=x({type:"style",contents:":host{align-items:center;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;margin:0;min-width:50px;overflow:hidden;position:relative;width:100%}:host *{box-sizing:border-box}:host([hidden]){display:none}".toString()});this.#t.replaceChildren(s,i),this.#s=this.#t.querySelector(e),this.widgetSettings&&(this.#s.widgetSettings=this.widgetSettings),this.feedMetadata&&(this.#s.feedMetadata=this.feedMetadata),this.posts&&(this.#s.posts=this.posts),this.#s.errorMessage=this.errorMessage||null,window.dispatchEvent(new CustomEvent("behold:widget-loaded",{detail:{id:this["feed-id"]}}))}async#i(t){if(t){this.#e&&this.#e.abort(),this.#e=new AbortController;try{const e=await fetch(`https://feeds.behold.so/${t}`,{mode:"cors",signal:this.#e.signal});if(e.ok){const t=await e.json();this.widgetSettings=t.widgetSettings,this.feedMetadata={username:t.username,profilePictureUrl:t.profilePictureUrl,website:t.website,followersCount:t.followersCount,hashtags:t.hashtags},this.posts=t.media}else{const t=await e.text();this.errorMessage=t}}catch(t){"The user aborted a request."!==t.message&&(this.errorMessage=t.message)}}else this.errorMessage="No feed ID provided"}async#o(t){const{default:e}=await function(t){switch(t){case"./widgets/ErrorMessage.ts":return import("./ErrorMessage-3E_4hjWB.js");case"./widgets/GalleryWall.ts":return import("./GalleryWall-v6WiVqfF.js");case"./widgets/Grid.ts":return import("./Grid-PD4oqCS9.js");default:return new Promise((function(e,s){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(s.bind(null,new Error("Unknown variable dynamic import: "+t)))}))}}(`./widgets/${t}.ts`);return e}static register(t="behold-widget"){return customElements.get(t)||customElements.define(t,class extends S{}),t}}export{y as B,h as a,r as b,x as c,o as d,c as e,e as f,n as g,d as h,u as i,i as j,S as k,s as p,l as s,a as t};
|
package/dist/Widget.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{
|
|
1
|
+
export{k as default}from"./Widget-uwrGOl8a.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{B as e,s as t,h as o,a as s,c as i,g as a,f as r,t as h,i as n,p as l}from"./Widget-vhfHRABW.js";function c(e){if(!e)return e;let[t,o,s]=e.split(",");t/=255,o/=255,s/=255;const i=Math.max(t,o,s),a=i-Math.min(t,o,s),r=a?i===t?(o-s)/a:i===o?2+(s-t)/a:4+(t-o)/a:0;return[60*r<0?60*r+360:60*r,100*(a?i<=.5?a/(2*i-a):a/(2-(2*i-a)):0),100*(2*i-a)/2]}function d(e,t){const o=(s=e,i="dominant",s.filter((e=>e[i])).map((e=>e[i]))).map((e=>c(e).join(",")));var s,i;return[f(p(o,0)),f(p(o,1)),f(p(o,2))]}function f(e){const t=[...e];t.sort((function(e,t){return e-t}));const o=Math.floor((t.length-1)/2);return t.length%2?t[o]:(t[o]+t[o+1])/2}function p(e,t){return e.map((e=>parseInt(e.split(",")[t])))}class b extends e{label="BaseWidget";shadow;styleEl;stylesAdded;contents;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.handleKeydown=this.handleKeydown.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleFocusout=this.handleFocusout.bind(this),this.handleShadowFocusout=this.handleShadowFocusout.bind(this),this.onGlobalStateChange((()=>{t(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{this.styleEl=document.createElement("style"),t(this,{"keyboard-nav":this.state.keyboardNavEnabled}),this.addEventListener("focus",this.handleFocus),this.addEventListener("focusout",this.handleFocusout),this.shadowRoot.addEventListener("focusout",this.handleShadowFocusout),this.addEventListener("keydown",this.handleKeydown)}))}focusPreviousPost(){this.dispatchEvent(new CustomEvent("post-focus-previous"))}focusNextPost(){this.dispatchEvent(new CustomEvent("post-focus-next"))}handleKeydown(e){"ArrowLeft"===e.key&&e.shiftKey&&this.focusPreviousPost(),"ArrowRight"===e.key&&e.shiftKey&&this.focusNextPost(),this.shadowRoot.activeElement&&this.classList.remove("has-focus")}handleFocus(e){this.shadow.activeElement||this.classList.add("has-focus")}handleFocusout(){this.classList.remove("has-focus")}handleShadowFocusout(e){e.relatedTarget===this&&this.classList.add("has-focus")}renderWidget(e,t){this.stylesAdded&&this.contents?this.contents.replaceWith(e):(this.contents=e,this.styleEl.replaceChildren(...t.map((e=>e.toString()))),this.shadow.replaceChildren(this.contents,this.styleEl),this.stylesAdded=!0)}}function v(e){return e?`hsl(${e[0]}, ${e[1]}%, ${e[2]}%, ${Math.max(1*Math.random(),.3)})`:""}class m extends e{label="BasePost";post;widgetSettings;feedMetadata;medianPaletteHSL;hasRowGap=!1;isLastRow=!1;onClick;previewLoadingColors=null;index;totalPosts;t;o;i="post--xlarge";constructor(){super(),this.onPropChange(this.h,["post","widgetSettings","feedMetadata","medianPaletteHSL","hasRowGap","isLastRow","previewLoadingColors","index","totalPosts"],["post","widgetSettings","feedMetadata","medianPaletteHSL","index","totalPosts"]),this.l=this.l.bind(this),this.onConnect((()=>{this.onResize(this,this,this.p)}))}h({changedProp:e,oldValue:t,newValue:s}){switch(e){case"post":o(s,t,["colorPalette"])&&this.v();break;case"widgetSettings":s.loadingColor===t?.loadingColor&&s.loadingColorTone===t?.loadingColorTone||this.v(),o(s,t,["onHover","linkTarget","previewVideosOnHover","onPostClick","customLinkURL"])&&this.renderPost(),o(s,t,["hoverOverlayColor","hoverOverlayCustomColor","hoverOverlayOpacity"])&&this.m(),this.u();break;case"previewLoadingColors":this.v();break;case"hasRowGap":case"isLastRow":this.u()}}m(){let e="rgba(0, 0, 0, 0.3)",t=this.widgetSettings.hoverOverlayCustomColor??"0,0,0",o=this.widgetSettings.hoverOverlayOpacity??65;if("auto"===this.widgetSettings.hoverOverlayColor){const t=c(this.post.colorPalette?.dominant||"100,100,100").map((e=>Math.round(e)));e=`hsl(${t[0]} ${Math.min(t[1],50)}% ${Math.min(t[2],40)}% / ${o/100})`}if("custom"===this.widgetSettings.hoverOverlayColor){const s=t.split(",");e=`hsl(${s[0]} ${s[1]}% ${s[2]}% / ${o/100})`}s(this,"--overlay-color",e)}u(){t(this,{post:!0,"post--hover-icon":"showIcon"===this.widgetSettings.onHover,"post--hover-caption":"showCaption"===this.widgetSettings.onHover,"post--has-row-gap":this.hasRowGap,"post--last-row":this.isLastRow}),this.m()}renderPost(e){e||(e=[...this.t.children].filter((e=>e!==this.o))[0]);let t="div",o=this.post.permalink;this.u(),"linkToProfile"===this.widgetSettings.onPostClick&&this.feedMetadata.username&&(o=`https://instagram.com/${this.feedMetadata.username}`),"customLink"===this.widgetSettings.onPostClick&&this.widgetSettings.customLinkURL&&(o=this.widgetSettings?.customLinkURL),this.widgetSettings.onPostClick.toLowerCase().includes("link")&&(t="a"),this.widgetSettings.onPostClick.toLowerCase().includes("popup")&&(t="button");let s=null;if("showCaption"===this.widgetSettings.onHover){const e=i({contents:this.post.prunedCaption?.length?this.post.prunedCaption:this.post.caption,classes:"post-caption__inner"});s=i({contents:e,classes:"post-caption"})}let a="image";switch(this.post?.mediaType){case"VIDEO":a=this.post.isReel?"reel":"video";break;case"CAROUSEL_ALBUM":a="album";break;default:a="image"}this.t=i({type:t,contents:[e,s||""],attributes:{"aria-label":`${a}, post ${this.index+1} of ${this.totalPosts}`,tabindex:-1,..."a"===t?{href:o,target:this.widgetSettings.linkTarget}:{}},listeners:{..."button"===t?{click:this.l}:{}}}),this.replaceChildren(this.t)}v(){const e=this.previewLoadingColors??this.widgetSettings.loadingColor;this.style.backgroundColor=function(e,t,o,s){let i="";switch(e){case"dominant":case"vibrant":case"muted":case"vibrantLight":case"mutedLight":case"vibrantDark":case"mutedDark":i=t?`rgb(${t[e]})`:v(s);break;case"tone":if(o){const e=o.split(",");if(t){const o=(a=c(t.dominant)[2]-s[2],Math.log(Math.abs(a))/Math.log(1.6)*Math.sign(a));i=`hsl(${e[0]},${e[1]}%,${parseInt(e[2])+o}%)`}else i=`hsl(${e[0]},${e[1]}%,${e[2]}%, ${Math.max(1*Math.random(),.3)})`}else i=v(s)}var a;return i}(e,this.post.colorPalette,this.widgetSettings.loadingColorTone,this.medianPaletteHSL)}p(e){const o=e?.borderBoxSize?.[0]?.inlineSize||0;let s="xlarge";o<600&&(s="large"),o<400&&(s="medium"),o<250&&(s="small"),o<175&&(s="xsmall"),["xsmall","small","medium","large","xlarge"].forEach((e=>{this.i=`post--${e}`,t(this,{[this.i]:e===s})}))}l(){this.onClick&&this.onClick(this)}focus(){this.t.focus()}}class u extends e{label="Image";sizes;mediaUrl;isSquare=!1;showLoader=!1;k;F;G;constructor(){super(),this.onPropChange(this._,["sizes","mediaUrl","isSquare","showLoader"],["sizes","mediaUrl","isSquare"]),this.onLocalStateChange(this.S,this.G),this.C=this.C.bind(this),this.P=this.P.bind(this),this.L=this.L.bind(this),this.preload=this.preload.bind(this),this.onConnect((()=>{const e=this.isSquare?300:this.sizes?.full.height??300,t=this.isSquare?300:this.sizes?.full.width??300;this.k=i({type:"img",attributes:{alt:"",role:"presentation",height:e+"px",width:t+"px",tabindex:-1,src:this.localState.shouldPreload||!this.sizes?.full.height?this.mediaUrl??a(t,e):a(t,e)},listeners:{load:this.P,error:this.L}}),this.showLoader?(this.F=i({classes:"ldr"}),this.replaceChildren(this.F,this.k)):this.replaceChildren(this.k),r(),this.raf((()=>{this.onResize(this,this,h(this.p,50,this,!0)),this.onIntersection(this,this.C)}),"connect")})),this.onDisconnect((()=>{this.updateLocalState({isVisible:!1,isLoaded:!1}),this.k&&this.F&&(this.k.remove(),this.F.remove())}))}_({changedProp:e,oldValue:t,newValue:o}){switch(e){case"showLoader":!t&&o&&this.k&&(this.F=i({classes:"ldr"}),this.replaceChildren(this.F,this.k));break;case"sizes":if(n(t,o)||!this.k)return;this.updateLocalState({isLoaded:!1});const e=this.M(this.offsetWidth);this.updateLocalState({imageSize:e})}}S({changedProps:e,newState:o,oldState:s}){if(e.includes("loaderIsShowing")&&this.F&&t(this.F,{"ldr--visible":o.loaderIsShowing&&!o.isLoaded}),e.includes("imageSrc")&&this.k&&(o.isVisible||o.shouldPreload)&&o.imageSrc!==this.k.src&&(this.classList.remove("is-loaded"),this.updateLocalState({isLoaded:!1}),this.k.src=o.imageSrc),e.includes("imageSize")&&!o.didError&&(!s.imageSize||s.imageSize?.width<s.imageSize?.width||!o.isLoaded)){const e=this.mediaUrl;this.updateLocalState({imageSrc:o.imageSize?.mediaUrl??e})}}C(e){e.isIntersecting?(this.updateLocalState({isVisible:!0}),!this.localState.isLoaded&&this.showLoader&&this.to((()=>{this.updateLocalState({loaderIsShowing:!0})}),50,"loader"),this.localState.imageSrc&&this.k.src!==this.localState.imageSrc&&(this.k.src=this.localState.imageSrc)):this.localState.isVisible=!1}p(e){const t=e?.borderBoxSize?.[0]?.inlineSize||0,o=this.M(t);this.updateLocalState({imageSize:o})}P(){this.k.src!==this.localState.imageSrc&&!this.localState.shouldPreload&&this.sizes?.full.height||(this.cancelTo("loader"),this.updateLocalState({isLoaded:!0,loaderIsShowing:!1}),this.dispatchEvent(new Event("load")),this.classList.add("is-loaded"))}L(){this.localState.imageSrc===this.mediaUrl||this.localState.didError||(this.updateLocalState({didError:!0}),this.updateLocalState({imageSrc:this.mediaUrl}))}M(e){if(this.sizes)return this.sizes?Object.values(this.sizes).reduce((function(t,o){return Math.abs(o.width/2-e)<Math.abs(t.width/2-e)?o:t})):null}preload(){this.localState.isLoaded||(this.localState.imageSrc&&this.k.src!==this.localState.imageSrc?this.k.src=this.localState.imageSrc:this.updateLocalState({shouldPreload:!0}))}static register(e="behold-image"){return customElements.get(e)||customElements.define(e,u),e}}class g extends m{label="ImagePost";k;constructor(){super(),u.register(),this.onPropChange(this._,["post"])}_({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post;this.k?Object.assign(this.k,{sizes:e,mediaUrl:t}):(this.k=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}}),this.renderPost(this.k))}}static register(e="behold-image-post"){return customElements.get(e)||customElements.define(e,g),e}}class y extends e{label="Video";mediaUrl;sizes;B;k;constructor(){super(),this.onPropChange((()=>{this.localState.shouldPreload&&this.mediaUrl&&l("video",this.mediaUrl)}),["mediaUrl","sizes"]),this.onLocalStateChange((()=>{}),{isMuted:!0,isLoaded:!1,shouldPreload:!1}),this.C=this.C.bind(this),this.$=this.$.bind(this),this.U=this.U.bind(this),this.j=this.j.bind(this),this.I=this.I.bind(this),this.preload=this.preload.bind(this),document.addEventListener("visibilitychange",this.U),this.onIntersection(this,this.C),this.onConnect((()=>{this.render()})),this.onDisconnect((()=>{document.removeEventListener("visibilitychange",this.U),this.B.removeEventListener("play",this.j),this.B.removeEventListener("pause",this.I)}))}get isPlaying(){return!!(this.B.currentTime>0&&!this.B.paused&&!this.B.ended&&this.B.readyState>2)}get paused(){return this.B?.paused}get muted(){return this.B?.muted}get isLoaded(){return this.localState.isLoaded}render(){this.B=i({type:"video",attributes:{loop:!0,playsinline:!0,crossorigin:"anonymous",tabIndex:-1,disablePictureInPicture:!0,disableremoteplayback:!0,height:this.sizes.full.height,width:this.sizes.full.width},props:{muted:this.localState.isMuted},listeners:{play:this.j,pause:this.I}}),this.k=i({type:"img",attributes:{height:this.sizes.full.height,width:this.sizes.full.width,src:a(this.sizes.full.width,this.sizes.full.height)}}),this.replaceChildren(this.k)}C(e){e.isIntersecting?this.B.src!==this.mediaUrl&&(this.B.addEventListener("loadeddata",this.$,{once:!0}),this.B.src=this.mediaUrl):this.pause()}$(){this.updateLocalState({isLoaded:!0}),this.B.currentTime=.25,this.B.pause(),this.dispatchEvent(new Event("load")),this.replaceChildren(this.B),r(),this.raf((()=>{this.classList.add("is-loaded")}),"_handleVideoLoad")}j(){this.dispatchEvent(new Event("play"))}I(){this.dispatchEvent(new Event("pause"))}async play(){if(this.B)try{await this.B.play()}catch(e){}}pause(){this.B&&this.B.pause()}mute(){this.updateLocalState({isMuted:!0}),this.B&&(this.B.muted=!0)}unmute(){this.updateLocalState({isMuted:!1}),this.B&&(this.B.muted=!1)}U(){document.hidden&&this.pause()}preload(){!this.localState.isLoaded&&this.mediaUrl?l("video",this.mediaUrl):this.updateLocalState({shouldPreload:!0})}static register(e="behold-video"){return customElements.get(e)||customElements.define(e,y),e}}class w extends m{label="VideoPost";B;k;constructor(){super(),this.onPropChange(this._,["post","widgetSettings"]),y.register(),u.register(),this.V=this.V.bind(this),this.O=this.O.bind(this),this.onDisconnect((()=>{this.removeEventListener("mouseover",this.V),this.removeEventListener("mouseleave",this.O)}))}_({changedProp:e,oldValue:t,newValue:s}){if("post"===e||"widgetSettings"===e&&o(t,s,["previewVideosOnHover"])){const{sizes:e,mediaUrl:t,thumbnailUrl:o}=this.post;this.widgetSettings.previewVideosOnHover&&t?(this.B=i({type:"behold-video",props:{mediaUrl:t,sizes:e}}),this.addEventListener("mouseover",this.V,{passive:!0}),this.addEventListener("mouseleave",this.O,{passive:!0}),this.renderPost(this.B)):this.k?Object.assign(this.k,{sizes:e,mediaUrl:o}):(this.k=i({type:"behold-image",props:{sizes:e,mediaUrl:o,isSquare:!0}}),this.renderPost(this.k))}}V(){this.B?.play()}O(){this.B?.pause()}static register(e="behold-video-post"){return customElements.get(e)||customElements.define(e,w),e}}class k extends m{label="AlbumPost";k;constructor(){super(),u.register(),this.onPropChange(this._,["post"])}_({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post;this.k?Object.assign(this.k,{sizes:e,mediaUrl:t}):(this.k=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}}),this.renderPost(this.k))}}static register(e="behold-album-post"){return customElements.get(e)||customElements.define(e,k),e}}var z=":host{--icon-instagram:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M17.6 3.2c4.7 0 5.2 0 7.1.1 1.7.1 2.6.4 3.2.6.8.3 1.4.7 2 1.3.6.6 1 1.2 1.3 2 .2.6.5 1.5.6 3.3.1 1.8.1 2.4.1 7.1s0 5.2-.1 7.1c-.1 1.7-.4 2.6-.6 3.2-.6 1.5-1.8 2.7-3.3 3.3-.6.2-1.5.5-3.2.6-1.8.1-2.4.1-7.1.1s-5.2 0-7.1-.1c-1.7-.1-2.6-.4-3.2-.6-.8-.3-1.4-.7-2-1.3-.6-.6-1-1.2-1.3-2-.2-.6-.5-1.5-.6-3.2-.1-1.8-.1-2.4-.1-7.1s0-5.2.1-7.1c0-1.8.3-2.7.6-3.3.3-.8.7-1.4 1.3-2 .6-.6 1.2-1 2-1.3.6-.2 1.5-.5 3.2-.6 1.9-.1 2.4-.1 7.1-.1m0-3.2c-4.8 0-5.3 0-7.2.1-1.9.1-3.2.4-4.3.8C5 1.4 3.9 2 3 2.9c-.9.9-1.5 2-2 3.1C.6 7.1.3 8.4.2 10.2c-.1 1.9-.1 2.5-.1 7.2s0 5.3.1 7.2c.1 2 .4 3.2.8 4.4.4 1.2 1.1 2.2 2 3.1.9.9 1.9 1.6 3.1 2 1.1.4 2.4.7 4.2.8s2.5.1 7.2.1 5.3 0 7.2-.1c1.9-.1 3.1-.4 4.2-.8 2.3-.9 4.2-2.8 5.1-5.1.4-1.1.7-2.4.8-4.2.1-1.9.1-2.5.1-7.2s0-5.3-.1-7.2c-.1-1.9-.4-3.1-.8-4.2-.4-1.2-1.1-2.2-2-3.1-.9-.9-1.9-1.6-3.1-2-1.1-.4-2.4-.7-4.2-.8-1.8-.3-2.4-.3-7.1-.3z'/%3E%3Cpath fill='%23FFF' d='M17.6 8.5c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 14.8c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8 5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8z'/%3E%3Ccircle fill='%23FFF' cx='26.9' cy='8.2' r='2.1'/%3E%3C/svg%3E\");--icon-video:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M30.1 15.5 7.2 2.3c-1.5-.9-3.5.2-3.5 1.9v26.5c0 1.7 1.9 2.9 3.4 1.9L30 19.4c1.7-.8 1.7-3 .1-3.9z'/%3E%3C/svg%3E\");--icon-album:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M27.3 22.7v-17c0-2.6-2.1-4.7-4.7-4.7H5.7C3.1 1 1 3.1 1 5.7v17c0 2.6 2.1 4.7 4.7 4.7h17c2.5-.1 4.6-2.2 4.6-4.7zm4-13.4v14.6c0 4.1-3.4 7.4-7.4 7.4H9.2c-.5 0-.8.6-.5 1 .9 1 2.2 1.6 3.7 1.6h12.1c5.2 0 9.3-4.2 9.3-9.3V12.5c0-1.5-.6-2.8-1.6-3.7-.3-.4-.9 0-.9.5z'/%3E%3C/svg%3E\");align-items:center;border:none;box-shadow:none;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;margin:0;min-width:50px;outline:none;position:relative;width:100%}:host *{box-sizing:border-box}:host(.keyboard-nav.has-focus){outline:none}:host(.keyboard-nav.has-focus):before{background-color:rgba(0,0,0,.25);border-radius:6px;content:\"\";display:block;height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%;z-index:1}:host(.keyboard-nav.has-focus):after{background-color:#222;border-radius:6px;box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff,0 .6px .4px rgba(0,0,0,.042),0 1.3px 1px rgba(0,0,0,.061),0 2.5px 1.9px rgba(0,0,0,.075),0 4.5px 3.4px rgba(0,0,0,.089),0 8.4px 6.3px rgba(0,0,0,.108),0 20px 15px rgba(0,0,0,.15);color:#fff;content:\"Shift + arrow keys to navigate posts\";font-family:sans-serif;font-size:16px;max-width:80%;padding:15px;position:absolute;text-align:center;z-index:1}@media (max-width:1300px){:host(.keyboard-nav.has-focus):after{font-size:15px}}:host(.keyboard-nav.has-focus) .posts{opacity:.65}.posts{display:grid;margin:0;padding:0;width:100%}.post{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;align-self:stretch;border:none;border-radius:var(--post-border-radius);color:inherit;font:inherit;isolation:isolate;line-height:normal;margin:0 0 -1px;overflow:hidden;transform:translateZ(0);transition:background .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(100% + .5px)}:host(.keyboard-nav) .post.post:focus-within{box-shadow:0 0 0 1px #fff,0 0 0 3px #4169e1,0 0 0 4px #fff;z-index:1}:host(.is-previewing-loading-colors) .post *{opacity:0}.post.post--has-row-gap,.post.post--last-row{margin:0}.post:before{background-color:transparent;border-radius:var(--post-border-radius);content:\"\";height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:all 2s cubic-bezier(.215,.61,.355,1);width:100%;z-index:2}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){[data-hover-effect*=blur i] .post:before{height:calc(100% - 1px);left:0;opacity:0;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}}.post.post--hover-icon:after{background-image:var(--icon);background-position:50%;background-repeat:no-repeat;background-size:auto 100%;border-radius:var(--post-border-radius);content:\"\";height:12%;left:0;max-height:30px;min-height:20px;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%) scale(.75);transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%;will-change:transform;z-index:3}@media (prefers-reduced-motion){.post.post--hover-icon:after{transition:none}}.post>a,.post>button,.post>div{background-color:transparent;border:0;box-shadow:none;color:inherit;display:block;font:inherit;height:100%;line-height:inherit;outline:none;padding:0;transition:opacity .3s ease;width:100%}.post a,.post button{cursor:pointer}behold-image-post{--icon:var(--icon-instagram)}behold-video-post{--icon:var(--icon-video)}behold-album-post{--icon:var(--icon-album)}.post-caption{align-items:center;background-color:var(--overlay-color);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:15px;height:100%;justify-content:center;left:0;line-height:1.5;opacity:0;padding:15%;position:absolute;top:0;transition:opacity .4s ease;width:100%;z-index:2}.post:hover .post-caption,:host(:host(.keyboard-nav)) .post:focus-within .post-caption{opacity:1}.post--xlarge .post-caption{--lines:12;--innerScale:scale(0.98);padding:20%}.post--large .post-caption{--lines:9;--innerScale:scale(0.98)}.post--medium .post-caption{--lines:6;--innerScale:scale(0.97);font-size:14px}.post--small .post-caption{--lines:4;--innerScale:scale(0.95);font-size:13px;line-height:1.25}.post--xsmall .post-caption{--lines:3;--innerScale:scale(0.95);font-size:12px;line-height:1.25}.post-caption__inner{-webkit-line-clamp:var(--lines);-webkit-box-orient:vertical;color:#fff;display:-webkit-box;opacity:0;overflow:hidden;text-align:center;transform:var(--innerScale);transition:all .3s ease;white-space:pre-line;will-change:transform,opacity;word-break:none}@media (prefers-reduced-motion){.post-caption__inner{transform:none}}.post:hover .post-caption__inner,:host(.keyboard-nav) .post:focus-within .post-caption__inner{opacity:1;transform:none;transition:all .3s ease}:host(.keyboard-nav) .post:focus-within:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) .post:focus-within:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=fade] .post:focus-within:before,[data-hover-effect=fade] .post:hover:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=fade] .post:focus-within:after,[data-hover-effect=fade] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-image img,:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-video video,[data-hover-effect=zoomFade] .post:hover behold-image img,[data-hover-effect=zoomFade] .post:hover behold-video video{transform:scale(1.05)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-image img,:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-video video,[data-hover-effect=zoomFade] .post:hover behold-image img,[data-hover-effect=zoomFade] .post:hover behold-video video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within:before,[data-hover-effect=zoomFade] .post:hover:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within:after,[data-hover-effect=zoomFade] .post:hover:after{opacity:1;transform:translateY(-50%)}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within behold-video,[data-hover-effect=blur] .post:hover behold-image,[data-hover-effect=blur] .post:hover behold-video{filter:brightness(97%) blur(3px);transition:all .6s cubic-bezier(.215,.61,.355,1)}}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:before,[data-hover-effect=blur] .post:hover:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:rgba(0,0,0,.002);opacity:1}}:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:after,[data-hover-effect=blur] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{transform:none}}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{filter:brightness(97%) blur(3px)}}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:before,[data-hover-effect=zoomBlur] .post:hover:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:rgba(0,0,0,.002);opacity:1}}:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:after,[data-hover-effect=zoomBlur] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within behold-video,[data-hover-effect=toGreyscale] .post:hover behold-image,[data-hover-effect=toGreyscale] .post:hover behold-video{filter:grayscale(100%);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within:after,[data-hover-effect=toGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-video,[data-hover-effect=zoomToGreyscale] .post:hover behold-image,[data-hover-effect=zoomToGreyscale] .post:hover behold-video{filter:grayscale(100%);transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-video,[data-hover-effect=zoomToGreyscale] .post:hover behold-image,[data-hover-effect=zoomToGreyscale] .post:hover behold-video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within:after,[data-hover-effect=zoomToGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post,[data-hover-effect=fromGreyscale] .post{filter:grayscale(100%)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover,[data-hover-effect=fromGreyscale] .post:focus,[data-hover-effect=fromGreyscale] .post:hover{filter:grayscale(0);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus:after,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover:after,[data-hover-effect=fromGreyscale] .post:focus:after,[data-hover-effect=fromGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post,[data-hover-effect=zoomFromGreyscale] .post{filter:grayscale(100%)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover,[data-hover-effect=zoomFromGreyscale] .post:focus,[data-hover-effect=zoomFromGreyscale] .post:hover{filter:grayscale(0)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-video,[data-hover-effect=zoomFromGreyscale] .post:focus behold-image,[data-hover-effect=zoomFromGreyscale] .post:focus behold-video,[data-hover-effect=zoomFromGreyscale] .post:hover behold-image,[data-hover-effect=zoomFromGreyscale] .post:hover behold-video{opacity:.5;transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-video,[data-hover-effect=zoomFromGreyscale] .post:focus behold-image,[data-hover-effect=zoomFromGreyscale] .post:focus behold-video,[data-hover-effect=zoomFromGreyscale] .post:hover behold-image,[data-hover-effect=zoomFromGreyscale] .post:hover behold-video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus:after,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover:after,[data-hover-effect=zoomFromGreyscale] .post:focus:after,[data-hover-effect=zoomFromGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}behold-image{display:block;height:0;overflow:hidden;padding:0 0 100%;position:relative;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}behold-image img{border-radius:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1),opacity .6s ease;vertical-align:middle;width:100%;will-change:transform;z-index:1}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){[data-hover-effect=blur] behold-image img,[data-hover-effect=zoomBlur] behold-image img{height:calc(100% + 6px);left:-3px;top:-3px;width:calc(100% + 6px)}}.post--reel behold-image img{-o-object-position:center 25%;object-position:center 25%}behold-image.is-loaded img{opacity:1}behold-video{display:block;height:0;overflow:hidden;padding:0 0 100%;position:relative;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}behold-video video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1),opacity .6s ease;vertical-align:middle;width:100%;will-change:transform}.post--reel behold-video video{-o-object-position:center 25%;object-position:center 25%}behold-video.is-loaded video{opacity:1}";export{k as A,b as B,g as I,c as R,w as V,y as a,u as b,d as g,z as s};
|
|
1
|
+
import{B as e,s as t,h as o,a as s,c as i,g as a,f as r,t as h,i as n,p as l}from"./Widget-uwrGOl8a.js";function c(e){if(!e)return e;let[t,o,s]=e.split(",");t/=255,o/=255,s/=255;const i=Math.max(t,o,s),a=i-Math.min(t,o,s),r=a?i===t?(o-s)/a:i===o?2+(s-t)/a:4+(t-o)/a:0;return[60*r<0?60*r+360:60*r,100*(a?i<=.5?a/(2*i-a):a/(2-(2*i-a)):0),100*(2*i-a)/2]}function d(e,t){const o=(s=e,i="dominant",s.filter((e=>e[i])).map((e=>e[i]))).map((e=>c(e).join(",")));var s,i;return[f(p(o,0)),f(p(o,1)),f(p(o,2))]}function f(e){const t=[...e];t.sort((function(e,t){return e-t}));const o=Math.floor((t.length-1)/2);return t.length%2?t[o]:(t[o]+t[o+1])/2}function p(e,t){return e.map((e=>parseInt(e.split(",")[t])))}class b extends e{label="BaseWidget";shadow;styleEl;stylesAdded;contents;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.handleKeydown=this.handleKeydown.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleFocusout=this.handleFocusout.bind(this),this.handleShadowFocusout=this.handleShadowFocusout.bind(this),this.onGlobalStateChange((()=>{t(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{this.styleEl=document.createElement("style"),t(this,{"keyboard-nav":this.state.keyboardNavEnabled}),this.addEventListener("focus",this.handleFocus),this.addEventListener("focusout",this.handleFocusout),this.shadowRoot.addEventListener("focusout",this.handleShadowFocusout),this.addEventListener("keydown",this.handleKeydown)}))}focusPreviousPost(){this.dispatchEvent(new CustomEvent("post-focus-previous"))}focusNextPost(){this.dispatchEvent(new CustomEvent("post-focus-next"))}handleKeydown(e){"ArrowLeft"===e.key&&e.shiftKey&&this.focusPreviousPost(),"ArrowRight"===e.key&&e.shiftKey&&this.focusNextPost(),this.shadowRoot.activeElement&&this.classList.remove("has-focus")}handleFocus(e){this.shadow.activeElement||this.classList.add("has-focus")}handleFocusout(){this.classList.remove("has-focus")}handleShadowFocusout(e){e.relatedTarget===this&&this.classList.add("has-focus")}renderWidget(e,t){this.stylesAdded&&this.contents?this.contents.replaceWith(e):(this.contents=e,this.styleEl.replaceChildren(...t.map((e=>e.toString()))),this.shadow.replaceChildren(this.contents,this.styleEl),this.stylesAdded=!0)}}function v(e){return e?`hsl(${e[0]}, ${e[1]}%, ${e[2]}%, ${Math.max(1*Math.random(),.3)})`:""}class m extends e{label="BasePost";post;widgetSettings;feedMetadata;medianPaletteHSL;hasRowGap=!1;isLastRow=!1;onClick;previewLoadingColors=null;index;totalPosts;t;o;i="post--xlarge";constructor(){super(),this.onPropChange(this.h,["post","widgetSettings","feedMetadata","medianPaletteHSL","hasRowGap","isLastRow","previewLoadingColors","index","totalPosts"],["post","widgetSettings","feedMetadata","medianPaletteHSL","index","totalPosts"]),this.l=this.l.bind(this),this.onConnect((()=>{this.onResize(this,this,this.p)}))}h({changedProp:e,oldValue:t,newValue:s}){switch(e){case"post":o(s,t,["colorPalette"])&&this.v();break;case"widgetSettings":s.loadingColor===t?.loadingColor&&s.loadingColorTone===t?.loadingColorTone||this.v(),o(s,t,["onHover","linkTarget","previewVideosOnHover","onPostClick","customLinkURL"])&&this.renderPost(),o(s,t,["hoverOverlayColor","hoverOverlayCustomColor","hoverOverlayOpacity"])&&this.m(),this.u();break;case"previewLoadingColors":this.v();break;case"hasRowGap":case"isLastRow":this.u()}}m(){let e="rgba(0, 0, 0, 0.3)",t=this.widgetSettings.hoverOverlayCustomColor??"0,0,0",o=this.widgetSettings.hoverOverlayOpacity??65;if("auto"===this.widgetSettings.hoverOverlayColor){const t=c(this.post.colorPalette?.dominant||"100,100,100").map((e=>Math.round(e)));e=`hsl(${t[0]} ${Math.min(t[1],50)}% ${Math.min(t[2],40)}% / ${o/100})`}if("custom"===this.widgetSettings.hoverOverlayColor){const s=t.split(",");e=`hsl(${s[0]} ${s[1]}% ${s[2]}% / ${o/100})`}s(this,"--overlay-color",e)}u(){t(this,{post:!0,"post--hover-icon":"showIcon"===this.widgetSettings.onHover,"post--hover-caption":"showCaption"===this.widgetSettings.onHover,"post--has-row-gap":this.hasRowGap,"post--last-row":this.isLastRow}),this.m()}renderPost(e){e||(e=[...this.t.children].filter((e=>e!==this.o))[0]);let t="div",o=this.post.permalink;this.u(),"linkToProfile"===this.widgetSettings.onPostClick&&this.feedMetadata.username&&(o=`https://instagram.com/${this.feedMetadata.username}`),"customLink"===this.widgetSettings.onPostClick&&this.widgetSettings.customLinkURL&&(o=this.widgetSettings?.customLinkURL),this.widgetSettings.onPostClick.toLowerCase().includes("link")&&(t="a"),this.widgetSettings.onPostClick.toLowerCase().includes("popup")&&(t="button");let s=null;if("showCaption"===this.widgetSettings.onHover){const e=i({contents:this.post.prunedCaption?.length?this.post.prunedCaption:this.post.caption,classes:"post-caption__inner"});s=i({contents:e,classes:"post-caption"})}let a="image";switch(this.post?.mediaType){case"VIDEO":a=this.post.isReel?"reel":"video";break;case"CAROUSEL_ALBUM":a="album";break;default:a="image"}this.t=i({type:t,contents:[e,s||""],attributes:{"aria-label":`${a}, post ${this.index+1} of ${this.totalPosts}`,tabindex:-1,..."a"===t?{href:o,target:this.widgetSettings.linkTarget}:{}},listeners:{..."button"===t?{click:this.l}:{}}}),this.replaceChildren(this.t)}v(){const e=this.previewLoadingColors??this.widgetSettings.loadingColor;this.style.backgroundColor=function(e,t,o,s){let i="";switch(e){case"dominant":case"vibrant":case"muted":case"vibrantLight":case"mutedLight":case"vibrantDark":case"mutedDark":i=t?`rgb(${t[e]})`:v(s);break;case"tone":if(o){const e=o.split(",");if(t){const o=(a=c(t.dominant)[2]-s[2],Math.log(Math.abs(a))/Math.log(1.6)*Math.sign(a));i=`hsl(${e[0]},${e[1]}%,${parseInt(e[2])+o}%)`}else i=`hsl(${e[0]},${e[1]}%,${e[2]}%, ${Math.max(1*Math.random(),.3)})`}else i=v(s)}var a;return i}(e,this.post.colorPalette,this.widgetSettings.loadingColorTone,this.medianPaletteHSL)}p(e){const o=e?.borderBoxSize?.[0]?.inlineSize||0;let s="xlarge";o<600&&(s="large"),o<400&&(s="medium"),o<250&&(s="small"),o<175&&(s="xsmall"),["xsmall","small","medium","large","xlarge"].forEach((e=>{this.i=`post--${e}`,t(this,{[this.i]:e===s})}))}l(){this.onClick&&this.onClick(this)}focus(){this.t.focus()}}class u extends e{label="Image";sizes;mediaUrl;isSquare=!1;showLoader=!1;k;F;G;constructor(){super(),this.onPropChange(this._,["sizes","mediaUrl","isSquare","showLoader"],["sizes","mediaUrl","isSquare"]),this.onLocalStateChange(this.S,this.G),this.C=this.C.bind(this),this.P=this.P.bind(this),this.L=this.L.bind(this),this.preload=this.preload.bind(this),this.onConnect((()=>{const e=this.isSquare?300:this.sizes?.full.height??300,t=this.isSquare?300:this.sizes?.full.width??300;this.k=i({type:"img",attributes:{alt:"",role:"presentation",height:e+"px",width:t+"px",tabindex:-1,src:this.localState.shouldPreload||!this.sizes?.full.height?this.mediaUrl??a(t,e):a(t,e)},listeners:{load:this.P,error:this.L}}),this.showLoader?(this.F=i({classes:"ldr"}),this.replaceChildren(this.F,this.k)):this.replaceChildren(this.k),r(),this.raf((()=>{this.onResize(this,this,h(this.p,50,this,!0)),this.onIntersection(this,this.C)}),"connect")})),this.onDisconnect((()=>{this.updateLocalState({isVisible:!1,isLoaded:!1}),this.k&&this.F&&(this.k.remove(),this.F.remove())}))}_({changedProp:e,oldValue:t,newValue:o}){switch(e){case"showLoader":!t&&o&&this.k&&(this.F=i({classes:"ldr"}),this.replaceChildren(this.F,this.k));break;case"sizes":if(n(t,o)||!this.k)return;this.updateLocalState({isLoaded:!1});const e=this.M(this.offsetWidth);this.updateLocalState({imageSize:e})}}S({changedProps:e,newState:o,oldState:s}){if(e.includes("loaderIsShowing")&&this.F&&t(this.F,{"ldr--visible":o.loaderIsShowing&&!o.isLoaded}),e.includes("imageSrc")&&this.k&&(o.isVisible||o.shouldPreload)&&o.imageSrc!==this.k.src&&(this.classList.remove("is-loaded"),this.updateLocalState({isLoaded:!1}),this.k.src=o.imageSrc),e.includes("imageSize")&&!o.didError&&(!s.imageSize||s.imageSize?.width<s.imageSize?.width||!o.isLoaded)){const e=this.mediaUrl;this.updateLocalState({imageSrc:o.imageSize?.mediaUrl??e})}}C(e){e.isIntersecting?(this.updateLocalState({isVisible:!0}),!this.localState.isLoaded&&this.showLoader&&this.to((()=>{this.updateLocalState({loaderIsShowing:!0})}),50,"loader"),this.localState.imageSrc&&this.k.src!==this.localState.imageSrc&&(this.k.src=this.localState.imageSrc)):this.localState.isVisible=!1}p(e){const t=e?.borderBoxSize?.[0]?.inlineSize||0,o=this.M(t);this.updateLocalState({imageSize:o})}P(){this.k.src!==this.localState.imageSrc&&!this.localState.shouldPreload&&this.sizes?.full.height||(this.cancelTo("loader"),this.updateLocalState({isLoaded:!0,loaderIsShowing:!1}),this.dispatchEvent(new Event("load")),this.classList.add("is-loaded"))}L(){this.localState.imageSrc===this.mediaUrl||this.localState.didError||(this.updateLocalState({didError:!0}),this.updateLocalState({imageSrc:this.mediaUrl}))}M(e){if(this.sizes)return this.sizes?Object.values(this.sizes).reduce((function(t,o){return Math.abs(o.width/2-e)<Math.abs(t.width/2-e)?o:t})):null}preload(){this.localState.isLoaded||(this.localState.imageSrc&&this.k.src!==this.localState.imageSrc?this.k.src=this.localState.imageSrc:this.updateLocalState({shouldPreload:!0}))}static register(e="behold-image"){return customElements.get(e)||customElements.define(e,u),e}}class g extends m{label="ImagePost";k;constructor(){super(),u.register(),this.onPropChange(this._,["post"])}_({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post;this.k?Object.assign(this.k,{sizes:e,mediaUrl:t}):(this.k=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}}),this.renderPost(this.k))}}static register(e="behold-image-post"){return customElements.get(e)||customElements.define(e,g),e}}class y extends e{label="Video";mediaUrl;sizes;B;k;constructor(){super(),this.onPropChange((()=>{this.localState.shouldPreload&&this.mediaUrl&&l("video",this.mediaUrl)}),["mediaUrl","sizes"]),this.onLocalStateChange((()=>{}),{isMuted:!0,isLoaded:!1,shouldPreload:!1}),this.C=this.C.bind(this),this.$=this.$.bind(this),this.U=this.U.bind(this),this.j=this.j.bind(this),this.I=this.I.bind(this),this.preload=this.preload.bind(this),document.addEventListener("visibilitychange",this.U),this.onIntersection(this,this.C),this.onConnect((()=>{this.render()})),this.onDisconnect((()=>{document.removeEventListener("visibilitychange",this.U),this.B.removeEventListener("play",this.j),this.B.removeEventListener("pause",this.I)}))}get isPlaying(){return!!(this.B.currentTime>0&&!this.B.paused&&!this.B.ended&&this.B.readyState>2)}get paused(){return this.B?.paused}get muted(){return this.B?.muted}get isLoaded(){return this.localState.isLoaded}render(){this.B=i({type:"video",attributes:{loop:!0,playsinline:!0,crossorigin:"anonymous",tabIndex:-1,disablePictureInPicture:!0,disableremoteplayback:!0,height:this.sizes.full.height,width:this.sizes.full.width},props:{muted:this.localState.isMuted},listeners:{play:this.j,pause:this.I}}),this.k=i({type:"img",attributes:{height:this.sizes.full.height,width:this.sizes.full.width,src:a(this.sizes.full.width,this.sizes.full.height)}}),this.replaceChildren(this.k)}C(e){e.isIntersecting?this.B.src!==this.mediaUrl&&(this.B.addEventListener("loadeddata",this.$,{once:!0}),this.B.src=this.mediaUrl):this.pause()}$(){this.updateLocalState({isLoaded:!0}),this.B.currentTime=.25,this.B.pause(),this.dispatchEvent(new Event("load")),this.replaceChildren(this.B),r(),this.raf((()=>{this.classList.add("is-loaded")}),"_handleVideoLoad")}j(){this.dispatchEvent(new Event("play"))}I(){this.dispatchEvent(new Event("pause"))}async play(){if(this.B)try{await this.B.play()}catch(e){}}pause(){this.B&&this.B.pause()}mute(){this.updateLocalState({isMuted:!0}),this.B&&(this.B.muted=!0)}unmute(){this.updateLocalState({isMuted:!1}),this.B&&(this.B.muted=!1)}U(){document.hidden&&this.pause()}preload(){!this.localState.isLoaded&&this.mediaUrl?l("video",this.mediaUrl):this.updateLocalState({shouldPreload:!0})}static register(e="behold-video"){return customElements.get(e)||customElements.define(e,y),e}}class w extends m{label="VideoPost";B;k;constructor(){super(),this.onPropChange(this._,["post","widgetSettings"]),y.register(),u.register(),this.V=this.V.bind(this),this.O=this.O.bind(this),this.onDisconnect((()=>{this.removeEventListener("mouseover",this.V),this.removeEventListener("mouseleave",this.O)}))}_({changedProp:e,oldValue:t,newValue:s}){if("post"===e||"widgetSettings"===e&&o(t,s,["previewVideosOnHover"])){const{sizes:e,mediaUrl:t,thumbnailUrl:o}=this.post;this.widgetSettings.previewVideosOnHover&&t?(this.B=i({type:"behold-video",props:{mediaUrl:t,sizes:e}}),this.addEventListener("mouseover",this.V,{passive:!0}),this.addEventListener("mouseleave",this.O,{passive:!0}),this.renderPost(this.B)):this.k?Object.assign(this.k,{sizes:e,mediaUrl:o}):(this.k=i({type:"behold-image",props:{sizes:e,mediaUrl:o,isSquare:!0}}),this.renderPost(this.k))}}V(){this.B?.play()}O(){this.B?.pause()}static register(e="behold-video-post"){return customElements.get(e)||customElements.define(e,w),e}}class k extends m{label="AlbumPost";k;constructor(){super(),u.register(),this.onPropChange(this._,["post"])}_({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post;this.k?Object.assign(this.k,{sizes:e,mediaUrl:t}):(this.k=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}}),this.renderPost(this.k))}}static register(e="behold-album-post"){return customElements.get(e)||customElements.define(e,k),e}}var z=":host{--icon-instagram:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M17.6 3.2c4.7 0 5.2 0 7.1.1 1.7.1 2.6.4 3.2.6.8.3 1.4.7 2 1.3.6.6 1 1.2 1.3 2 .2.6.5 1.5.6 3.3.1 1.8.1 2.4.1 7.1s0 5.2-.1 7.1c-.1 1.7-.4 2.6-.6 3.2-.6 1.5-1.8 2.7-3.3 3.3-.6.2-1.5.5-3.2.6-1.8.1-2.4.1-7.1.1s-5.2 0-7.1-.1c-1.7-.1-2.6-.4-3.2-.6-.8-.3-1.4-.7-2-1.3-.6-.6-1-1.2-1.3-2-.2-.6-.5-1.5-.6-3.2-.1-1.8-.1-2.4-.1-7.1s0-5.2.1-7.1c0-1.8.3-2.7.6-3.3.3-.8.7-1.4 1.3-2 .6-.6 1.2-1 2-1.3.6-.2 1.5-.5 3.2-.6 1.9-.1 2.4-.1 7.1-.1m0-3.2c-4.8 0-5.3 0-7.2.1-1.9.1-3.2.4-4.3.8C5 1.4 3.9 2 3 2.9c-.9.9-1.5 2-2 3.1C.6 7.1.3 8.4.2 10.2c-.1 1.9-.1 2.5-.1 7.2s0 5.3.1 7.2c.1 2 .4 3.2.8 4.4.4 1.2 1.1 2.2 2 3.1.9.9 1.9 1.6 3.1 2 1.1.4 2.4.7 4.2.8s2.5.1 7.2.1 5.3 0 7.2-.1c1.9-.1 3.1-.4 4.2-.8 2.3-.9 4.2-2.8 5.1-5.1.4-1.1.7-2.4.8-4.2.1-1.9.1-2.5.1-7.2s0-5.3-.1-7.2c-.1-1.9-.4-3.1-.8-4.2-.4-1.2-1.1-2.2-2-3.1-.9-.9-1.9-1.6-3.1-2-1.1-.4-2.4-.7-4.2-.8-1.8-.3-2.4-.3-7.1-.3z'/%3E%3Cpath fill='%23FFF' d='M17.6 8.5c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 14.8c-3.2 0-5.8-2.6-5.8-5.8s2.6-5.8 5.8-5.8 5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8z'/%3E%3Ccircle fill='%23FFF' cx='26.9' cy='8.2' r='2.1'/%3E%3C/svg%3E\");--icon-video:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M30.1 15.5 7.2 2.3c-1.5-.9-3.5.2-3.5 1.9v26.5c0 1.7 1.9 2.9 3.4 1.9L30 19.4c1.7-.8 1.7-3 .1-3.9z'/%3E%3C/svg%3E\");--icon-album:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M27.3 22.7v-17c0-2.6-2.1-4.7-4.7-4.7H5.7C3.1 1 1 3.1 1 5.7v17c0 2.6 2.1 4.7 4.7 4.7h17c2.5-.1 4.6-2.2 4.6-4.7zm4-13.4v14.6c0 4.1-3.4 7.4-7.4 7.4H9.2c-.5 0-.8.6-.5 1 .9 1 2.2 1.6 3.7 1.6h12.1c5.2 0 9.3-4.2 9.3-9.3V12.5c0-1.5-.6-2.8-1.6-3.7-.3-.4-.9 0-.9.5z'/%3E%3C/svg%3E\");align-items:center;border:none;box-shadow:none;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;margin:0;min-width:50px;outline:none;position:relative;width:100%}:host *{box-sizing:border-box}:host(.keyboard-nav.has-focus){outline:none}:host(.keyboard-nav.has-focus):before{background-color:rgba(0,0,0,.25);border-radius:6px;content:\"\";display:block;height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%;z-index:1}:host(.keyboard-nav.has-focus):after{background-color:#222;border-radius:6px;box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff,0 .6px .4px rgba(0,0,0,.042),0 1.3px 1px rgba(0,0,0,.061),0 2.5px 1.9px rgba(0,0,0,.075),0 4.5px 3.4px rgba(0,0,0,.089),0 8.4px 6.3px rgba(0,0,0,.108),0 20px 15px rgba(0,0,0,.15);color:#fff;content:\"Shift + arrow keys to navigate posts\";font-family:sans-serif;font-size:16px;max-width:80%;padding:15px;position:absolute;text-align:center;z-index:1}@media (max-width:1300px){:host(.keyboard-nav.has-focus):after{font-size:15px}}:host(.keyboard-nav.has-focus) .posts{opacity:.65}.posts{display:grid;margin:0;padding:0;width:100%}.post{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;align-self:stretch;border:none;border-radius:var(--post-border-radius);color:inherit;font:inherit;isolation:isolate;line-height:normal;margin:0 0 -1px;overflow:hidden;transform:translateZ(0);transition:background .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(100% + .5px)}:host(.keyboard-nav) .post.post:focus-within{box-shadow:0 0 0 1px #fff,0 0 0 3px #4169e1,0 0 0 4px #fff;z-index:1}:host(.is-previewing-loading-colors) .post *{opacity:0}.post.post--has-row-gap,.post.post--last-row{margin:0}.post:before{background-color:transparent;border-radius:var(--post-border-radius);content:\"\";height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:all 2s cubic-bezier(.215,.61,.355,1);width:100%;z-index:2}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){[data-hover-effect*=blur i] .post:before{height:calc(100% - 1px);left:0;opacity:0;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}}.post.post--hover-icon:after{background-image:var(--icon);background-position:50%;background-repeat:no-repeat;background-size:auto 100%;border-radius:var(--post-border-radius);content:\"\";height:12%;left:0;max-height:30px;min-height:20px;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%) scale(.75);transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%;will-change:transform;z-index:3}@media (prefers-reduced-motion){.post.post--hover-icon:after{transition:none}}.post>a,.post>button,.post>div{background-color:transparent;border:0;box-shadow:none;color:inherit;display:block;font:inherit;height:100%;line-height:inherit;outline:none;padding:0;transition:opacity .3s ease;width:100%}.post a,.post button{cursor:pointer}behold-image-post{--icon:var(--icon-instagram)}behold-video-post{--icon:var(--icon-video)}behold-album-post{--icon:var(--icon-album)}.post-caption{align-items:center;background-color:var(--overlay-color);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:15px;height:100%;justify-content:center;left:0;line-height:1.5;opacity:0;padding:15%;position:absolute;top:0;transition:opacity .4s ease;width:100%;z-index:2}.post:hover .post-caption,:host(:host(.keyboard-nav)) .post:focus-within .post-caption{opacity:1}.post--xlarge .post-caption{--lines:12;--innerScale:scale(0.98);padding:20%}.post--large .post-caption{--lines:9;--innerScale:scale(0.98)}.post--medium .post-caption{--lines:6;--innerScale:scale(0.97);font-size:14px}.post--small .post-caption{--lines:4;--innerScale:scale(0.95);font-size:13px;line-height:1.25}.post--xsmall .post-caption{--lines:3;--innerScale:scale(0.95);font-size:12px;line-height:1.25}.post-caption__inner{-webkit-line-clamp:var(--lines);-webkit-box-orient:vertical;color:#fff;display:-webkit-box;opacity:0;overflow:hidden;text-align:center;transform:var(--innerScale);transition:all .3s ease;white-space:pre-line;will-change:transform,opacity;word-break:none}@media (prefers-reduced-motion){.post-caption__inner{transform:none}}.post:hover .post-caption__inner,:host(.keyboard-nav) .post:focus-within .post-caption__inner{opacity:1;transform:none;transition:all .3s ease}:host(.keyboard-nav) .post:focus-within:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) .post:focus-within:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=fade] .post:focus-within:before,[data-hover-effect=fade] .post:hover:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=fade] .post:focus-within:after,[data-hover-effect=fade] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-image img,:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-video video,[data-hover-effect=zoomFade] .post:hover behold-image img,[data-hover-effect=zoomFade] .post:hover behold-video video{transform:scale(1.05)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-image img,:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within behold-video video,[data-hover-effect=zoomFade] .post:hover behold-image img,[data-hover-effect=zoomFade] .post:hover behold-video video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within:before,[data-hover-effect=zoomFade] .post:hover:before{background-color:var(--overlay-color);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=zoomFade] .post:focus-within:after,[data-hover-effect=zoomFade] .post:hover:after{opacity:1;transform:translateY(-50%)}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within behold-video,[data-hover-effect=blur] .post:hover behold-image,[data-hover-effect=blur] .post:hover behold-video{filter:brightness(97%) blur(3px);transition:all .6s cubic-bezier(.215,.61,.355,1)}}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:before,[data-hover-effect=blur] .post:hover:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:rgba(0,0,0,.002);opacity:1}}:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:after,[data-hover-effect=blur] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{transform:none}}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within behold-video,[data-hover-effect=zoomBlur] .post:hover behold-image,[data-hover-effect=zoomBlur] .post:hover behold-video{filter:brightness(97%) blur(3px)}}@supports ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:before,[data-hover-effect=zoomBlur] .post:hover:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:rgba(0,0,0,.002);opacity:1}}:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:after,[data-hover-effect=zoomBlur] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within behold-video,[data-hover-effect=toGreyscale] .post:hover behold-image,[data-hover-effect=toGreyscale] .post:hover behold-video{filter:grayscale(100%);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=toGreyscale] .post:focus-within:after,[data-hover-effect=toGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-video,[data-hover-effect=zoomToGreyscale] .post:hover behold-image,[data-hover-effect=zoomToGreyscale] .post:hover behold-video{filter:grayscale(100%);transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-image,:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within behold-video,[data-hover-effect=zoomToGreyscale] .post:hover behold-image,[data-hover-effect=zoomToGreyscale] .post:hover behold-video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomToGreyscale] .post:focus-within:after,[data-hover-effect=zoomToGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post,[data-hover-effect=fromGreyscale] .post{filter:grayscale(100%)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover,[data-hover-effect=fromGreyscale] .post:focus,[data-hover-effect=fromGreyscale] .post:hover{filter:grayscale(0);transition:all .6s cubic-bezier(.215,.61,.355,1)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus:after,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover:after,[data-hover-effect=fromGreyscale] .post:focus:after,[data-hover-effect=fromGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post,[data-hover-effect=zoomFromGreyscale] .post{filter:grayscale(100%)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover,[data-hover-effect=zoomFromGreyscale] .post:focus,[data-hover-effect=zoomFromGreyscale] .post:hover{filter:grayscale(0)}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-video,[data-hover-effect=zoomFromGreyscale] .post:focus behold-image,[data-hover-effect=zoomFromGreyscale] .post:focus behold-video,[data-hover-effect=zoomFromGreyscale] .post:hover behold-image,[data-hover-effect=zoomFromGreyscale] .post:hover behold-video{opacity:.5;transform:scale(1.05);transition:all .6s cubic-bezier(.215,.61,.355,1)}@media (prefers-reduced-motion){:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover behold-video,[data-hover-effect=zoomFromGreyscale] .post:focus behold-image,[data-hover-effect=zoomFromGreyscale] .post:focus behold-video,[data-hover-effect=zoomFromGreyscale] .post:hover behold-image,[data-hover-effect=zoomFromGreyscale] .post:hover behold-video{transform:none}}:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:focus:after,:host(.keyboard-nav) [data-hover-effect=zoomFromGreyscale] .post:hover:after,[data-hover-effect=zoomFromGreyscale] .post:focus:after,[data-hover-effect=zoomFromGreyscale] .post:hover:after{opacity:1;transform:translateY(-50%)}behold-image{display:block;height:0;overflow:hidden;padding:0 0 100%;position:relative;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}behold-image img{border-radius:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1),opacity .6s ease;vertical-align:middle;width:100%;will-change:transform;z-index:1}@supports not ((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){[data-hover-effect=blur] behold-image img,[data-hover-effect=zoomBlur] behold-image img{height:calc(100% + 6px);left:-3px;top:-3px;width:calc(100% + 6px)}}.post--reel behold-image img{-o-object-position:center 25%;object-position:center 25%}behold-image.is-loaded img{opacity:1}behold-video{display:block;height:0;overflow:hidden;padding:0 0 100%;position:relative;transition:all .6s cubic-bezier(.215,.61,.355,1);width:100%}behold-video video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .6s cubic-bezier(.215,.61,.355,1),opacity .6s ease;vertical-align:middle;width:100%;will-change:transform}.post--reel behold-video video{-o-object-position:center 25%;object-position:center 25%}behold-video.is-loaded video{opacity:1}";export{k as A,b as B,g as I,c as R,w as V,y as a,u as b,d as g,z as s};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverGallery.d.ts","sourceRoot":"","sources":["../../src/elements/PopoverGallery.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAA;AAKvC,OAAO,UAAU,MAAM,sBAAsB,CAAA;AAC7C,OAAO,eAAe,MAAM,2BAA2B,CAAA;AACvD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAQvD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,WAAW;IACrD,KAAK,SAAmB;IAGxB,yBAAyB,SAAM;IAC/B,OAAO,EAAE,UAAU,CAAA;IACnB,SAAS,EAAE,gBAAgB,CAAA;IAC3B,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,UAAU,EAAE,WAAW,CAAA;IACvB,WAAW,EAAE,iBAAiB,CAAA;IAC9B,OAAO,EAAE,iBAAiB,CAAA;IAC1B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,oBAAoB,EAAE,WAAW,CAAA;IACjC,QAAQ,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAA;IACpC,WAAW,EAAE,UAAU,CAAA;IACvB,gBAAgB,EAAE,eAAe,CAAA;IACjC,iBAAiB,EAAE,MAAM,CAAI;IAG7B,KAAK,EAAE,KAAK,CAAA;IACZ,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,YAAY,EAAE,WAAW,CAAgB;IACzC,aAAa,EAAE,QAAQ,CAAA;;IAyIvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE;;;KAAA;
|
|
1
|
+
{"version":3,"file":"PopoverGallery.d.ts","sourceRoot":"","sources":["../../src/elements/PopoverGallery.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAA;AAKvC,OAAO,UAAU,MAAM,sBAAsB,CAAA;AAC7C,OAAO,eAAe,MAAM,2BAA2B,CAAA;AACvD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAQvD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,WAAW;IACrD,KAAK,SAAmB;IAGxB,yBAAyB,SAAM;IAC/B,OAAO,EAAE,UAAU,CAAA;IACnB,SAAS,EAAE,gBAAgB,CAAA;IAC3B,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,UAAU,EAAE,WAAW,CAAA;IACvB,WAAW,EAAE,iBAAiB,CAAA;IAC9B,OAAO,EAAE,iBAAiB,CAAA;IAC1B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,oBAAoB,EAAE,WAAW,CAAA;IACjC,QAAQ,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAA;IACpC,WAAW,EAAE,UAAU,CAAA;IACvB,gBAAgB,EAAE,eAAe,CAAA;IACjC,iBAAiB,EAAE,MAAM,CAAI;IAG7B,KAAK,EAAE,KAAK,CAAA;IACZ,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,YAAY,EAAE,WAAW,CAAgB;IACzC,aAAa,EAAE,QAAQ,CAAA;;IAyIvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE;;;KAAA;IAwB3C;;OAEG;IACH,wBAAwB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE;;;KAAA;IAQnD;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,aAAa;IAOjC;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW;IAiB7C;;OAEG;IACH,MAAM;IAQN;;OAEG;IACH,kBAAkB,CAAC,QAAQ,EAAE,MAAM;IAmEnC;;OAEG;IACH,UAAU,CAAC,cAAc,EAAE,MAAM;IAoBjC,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAQxC,OAAO,IAAI,IAAI;IAQf,MAAM,CAAC,QAAQ,CAAC,IAAI,SAA2B;CAMhD;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,cAAc,CAAA;KACzC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverGallerySlide.d.ts","sourceRoot":"","sources":["../../src/elements/PopoverGallerySlide.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAA;AAGvC,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AACnD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAKnD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,WAAW;IAC1D,KAAK,SAAwB;IAG7B,QAAQ,EAAE,WAAW,CAAA;IACrB,cAAc,EAAE,gBAAgB,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,WAAW,CAAA;IACtB,SAAS,EAAE,WAAW,CAAA;IACtB,UAAU,EAAE,WAAW,CAAA;IACvB,aAAa,EAAE,WAAW,GAAG,MAAM,CAAA;IACnC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,KAAK,GAAG,iBAAiB,GAAG,iBAAiB,CAAA;IACvD,OAAO,EAAE,iBAAiB,CAAA;IAG1B,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,EAAE,YAAY,CAAA;;
|
|
1
|
+
{"version":3,"file":"PopoverGallerySlide.d.ts","sourceRoot":"","sources":["../../src/elements/PopoverGallerySlide.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAA;AAGvC,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AACnD,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAKnD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,WAAW;IAC1D,KAAK,SAAwB;IAG7B,QAAQ,EAAE,WAAW,CAAA;IACrB,cAAc,EAAE,gBAAgB,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,WAAW,CAAA;IACtB,SAAS,EAAE,WAAW,CAAA;IACtB,UAAU,EAAE,WAAW,CAAA;IACvB,aAAa,EAAE,WAAW,GAAG,MAAM,CAAA;IACnC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,KAAK,GAAG,iBAAiB,GAAG,iBAAiB,CAAA;IACvD,OAAO,EAAE,iBAAiB,CAAA;IAG1B,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,EAAE,YAAY,CAAA;;IA2B1B;;OAEG;IACH,MAAM;IAkJN,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE;;;KAAA;IA0D3C;;OAEG;IACH,QAAQ;IAQR;;OAEG;IACH,UAAU;IAWV;;OAEG;IACH,OAAO;IAIP;;OAEG;IACH,aAAa;IAsBb;;OAEG;IACH,eAAe;IAgBf,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAiC;CAMtD;AASD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,mBAAmB,CAAA;KACpD;CACF"}
|
|
@@ -21,10 +21,7 @@ export default class GalleryWall extends Base {
|
|
|
21
21
|
oldValue: any;
|
|
22
22
|
newValue: any;
|
|
23
23
|
}): void;
|
|
24
|
-
_handlePostsChange(
|
|
25
|
-
oldValue: any;
|
|
26
|
-
newValue: any;
|
|
27
|
-
}): void;
|
|
24
|
+
_handlePostsChange(): void;
|
|
28
25
|
_handleSettingsChange(oldValue: any, newValue: any): void;
|
|
29
26
|
_handleMetadataChange(): void;
|
|
30
27
|
setup(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GalleryWall.d.ts","sourceRoot":"","sources":["../../src/widgets/GalleryWall.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"GalleryWall.d.ts","sourceRoot":"","sources":["../../src/widgets/GalleryWall.ts"],"names":[],"mappings":"AAGA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAI5C,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAOnD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,IAAI;IAC3C,KAAK,SAAgB;IAGrB,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,KAAK,CAAA;IACZ,oBAAoB,EAAE,MAAM,CAAO;IAGnC,WAAW,EAAE,WAAW,CAAA;IACxB,WAAW,EAAE,WAAW,CAAA;IACxB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;IACxB,gBAAgB,EAAE,cAAc,CAAA;IAChC,iBAAiB,EAAE,UAAU,CAAA;IAC7B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC/B,eAAe,EAAE,OAAO,CAAQ;IAChC,YAAY,EAAE,QAAQ,CAAA;;IAqDtB,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE;;;;KAAA;IAgCrD,kBAAkB;IAYlB,qBAAqB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IA0BxC,qBAAqB;IAwBrB,KAAK;IAwBL;;OAEG;IACG,oBAAoB;IAoB1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAUxC;;OAEG;IACH,wBAAwB;IAexB;;OAEG;IACH,oBAAoB;IAepB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAO/B,WAAW,CAAC,UAAU,EAAE,UAAU;IAWlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;IAqB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IAmFrE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAkDtD,kBAAkB,WAMjB;IAKD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAwB,GAAG,MAAM;CAMtD;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,WAAW,CAAA;KACnC;CACF"}
|
package/dist/widgets/Grid.d.ts
CHANGED
|
@@ -20,10 +20,7 @@ export default class Grid extends Base {
|
|
|
20
20
|
oldValue: any;
|
|
21
21
|
newValue: any;
|
|
22
22
|
}): void;
|
|
23
|
-
_handlePostsChange(
|
|
24
|
-
oldValue: any;
|
|
25
|
-
newValue: any;
|
|
26
|
-
}): void;
|
|
23
|
+
_handlePostsChange(): void;
|
|
27
24
|
_handleSettingsChange(oldValue: any, newValue: any): void;
|
|
28
25
|
_handleMetadataChange(): void;
|
|
29
26
|
setup(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/widgets/Grid.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/widgets/Grid.ts"],"names":[],"mappings":"AAGA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAI5C,OAAO,KAAK,cAAc,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAA;AAMnD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,IAAI;IACpC,KAAK,SAAS;IAGd,cAAc,EAAE,cAAc,CAAA;IAC9B,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,KAAK,CAAA;IACZ,oBAAoB,EAAE,MAAM,CAAO;IAGnC,WAAW,EAAE,WAAW,CAAA;IACxB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACnB,gBAAgB,EAAE,cAAc,CAAA;IAChC,iBAAiB,EAAE,UAAU,CAAA;IAC7B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC/B,eAAe,EAAE,OAAO,CAAQ;IAChC,YAAY,EAAE,QAAQ,CAAA;;IA+CtB,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE;;;;KAAA;IAgCrD,kBAAkB;IAmBlB,qBAAqB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IA2BxC,qBAAqB;IAwBrB,KAAK;IA4BL;;OAEG;IACG,oBAAoB;IAqB1B,aAAa,CAAC,KAAK,EAAE,mBAAmB;IAUxC;;OAEG;IACH,wBAAwB;IAexB;;OAEG;IACH,oBAAoB;IAepB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ;IAO/B,WAAW,CAAC,UAAU,EAAE,UAAU;IAWlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;IAkB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IA+DrE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAwCtD,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAgB,GAAG,MAAM;CAM9C;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAA;KACpB;CACF"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{c as t,s,i as e,a as i,f as h,t as a,b as o}from"./Widget-vhfHRABW.js";import{B as l,I as n,V as r,A as p,s as d,g as c}from"./base-7DOIGMXq.js";class g extends l{label="GalleryWall";widgetSettings;feedMetadata;posts;previewLoadingColors=null;containerEl;heightRefEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.t,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),n.register(),r.register(),p.register(),this.i=this.i.bind(this),this.addEventListener("post-focus-next",this.h),this.addEventListener("post-focus-previous",this.o),this.onConnect((()=>{this.style.opacity="0",this.heightRefEl=t({classes:"height-ref"}),this.containerEl=t({type:"figure",classes:"posts",contents:[this.heightRefEl]}),this.renderWidget(this.containerEl,[d,".posts{display:block;min-height:100%;width:100%}.height-ref{position:relative}.post{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;border:none;color:inherit;display:block;font:inherit;height:100px;left:0;line-height:normal;overflow:hidden;position:absolute;top:0;transform-origin:top left;transition:background .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100px}.post--placeholder{background-color:#dedede;position:absolute}"]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this.containerEl,this.l)}))}t({changedProp:t,oldValue:e,newValue:i}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.p({oldValue:e,newValue:i});break;case"widgetSettings":this.u(e,i);break;case"feedMetadata":this.m();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),s(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}p({oldValue:t,newValue:s}){function i(t){return t?o(t).map((t=>(delete t.colorPalette,delete t.sizes,t))):null}if(e(i(t),i(s))){const t=s.reduce(((t,s)=>(t[s.id]=s,t)),{});this.postEls.forEach((s=>{s.post={...s.post,colorPalette:t[s.post.id].colorPalette,sizes:t[s.post.id].sizes}}))}else this.postEls=[],this.renderBreakpoint(this.appliedBreakpoint,!0);this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}u(t,s){"openPopupGallery"!==t?.onPostClick&&"openPopupGallery"===s?.onPostClick&&this.enablePopoverGallery(),this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints)),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings})),this.popoverGalleryEl&&(this.popoverGalleryEl.widgetSettings=this.widgetSettings)}m(){let t=`from @${this.feedMetadata.username}`;this.feedMetadata.hashtags?.length&&(t=`from hashtag${this.feedMetadata.hashtags.length>1?"s":""} ${this.feedMetadata.hashtags.join(", ")}`),this.setAttribute("aria-label",`Gallery of Instagram posts ${t}. Shift + arrow keys to navigate`),this.postEls.forEach((t=>{t.feedMetadata=this.feedMetadata})),this.popoverGalleryEl&&(this.popoverGalleryEl.feedMetadata=this.feedMetadata)}setup(){if("transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter((t=>t.colorPalette)).map((t=>t.colorPalette));this.medianPaletteHSL=c(t,this.widgetSettings.loadingColor)}const t=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(t),this.style.opacity=""}async enablePopoverGallery(){const{default:t}=await import("./PopoverGallery-7UiKU3Vw.js");t.register(),this.popoverGalleryEl=document.createElement("behold-popover-gallery"),Object.assign(this.popoverGalleryEl,{widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,posts:this.posts,closeFocusEl:this,onSlideChange:t=>{this.popoverGalleryEl.closeFocusEl=this.postEls[t]}})}l(t){const s=t.contentBoxSize?.[0]?.inlineSize,e=this.widgetSettings.breakpoints,i=this.getMatchingBreakpoint(s,e);this.renderBreakpoint(i)}o(){if(!this.postEls.length)return;let t=[...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);t>0?t-=1:t=this.postEls.length-1,this.postEls[t].focus()}h(){if(!this.postEls.length)return;let t=[...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);t>-1&&t<this.postEls.length-1?t+=1:t=0,this.postEls[t].focus()}i(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.postEls=this.createPostEls(t),this.raf((()=>{this.heightRefEl.replaceChildren(...this.postEls)}),"renderPosts")}getMatchingBreakpoint(t,s){return Object.entries(s).map((([t,s])=>({width:t,...s}))).filter((t=>"default"!==t.width)).sort(((t,s)=>s.width.localeCompare(t.width))).reduce(((s,e)=>t<=parseInt(e.width)?e:s),{...s.default,numPosts:s.default.galleryWallLayout.length})}renderBreakpoint(t,s=!1){this.cancelRaf("setContainerHeight"),this.postEls||(s=!0);const e=this.appliedBreakpoint;this.appliedBreakpoint=t;const{gap:a,borderRadius:o,numPosts:l,galleryWallLayout:n,galleryWallNamedLayout:r}=t;switch(this.widgetSettings.alignment){case"left":this.style.justifyContent="flex-start";break;case"right":this.style.justifyContent="flex-end";break;default:this.style.justifyContent="center"}this.widgetSettings.maxWidth&&this.widgetSettings.constrainWidth&&this.containerEl.style.maxWidth!==`${this.widgetSettings.maxWidth}px`&&(this.containerEl.style.maxWidth=`${this.widgetSettings.maxWidth}px`),this.widgetSettings.constrainWidth||(this.containerEl.style.maxWidth=""),this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),i(this.containerEl,"--post-border-radius",`${o}%`),(e?.numPosts!==l||e?.galleryWallNamedLayout!==r.toString()||s)&&this.renderPosts(t);const p=this.containerEl.offsetWidth,d=parseInt(a.x)/1e3*p,c=parseInt(a.y)/1e3*p;this.postEls.forEach(((t,s)=>{const[e,i,h,a]=n?.[s]?n[s].split(",").map((t=>parseInt(t))):[0,0,10,10],o=e*(p/100)+d/2,l=i*(p/100);t.style.transform=`translate(${o}px, ${l}px`,t.style.width=h*(p/100)-d+"px",t.style.height=a*(p/100)-c+"px"})),h(),this.raf((()=>{this.setContainerHeight()}),"setContainerHeight")}createPostEls(s){const{gap:e}=s,i=s?.numPosts||this.posts?.length||200,h=this.posts.filter(((t,s)=>s<i)).map(((s,i,h)=>{let a="behold-image-post";return"VIDEO"===s.mediaType&&(a="behold-video-post"),"CAROUSEL_ALBUM"===s.mediaType&&(a="behold-album-post"),t({type:a,props:{post:s,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.i,hasRowGap:"0"!=`${e.y}`,index:i,totalPosts:h.length}})}));return h.length<s.galleryWallLayout.length&&s.galleryWallLayout.filter(((t,s)=>s>=h.length)).forEach((s=>{const e=t({classes:"post post--placeholder"});h.push(e)})),h}setContainerHeight=a((()=>{this.style.height=`${this.heightRefEl.scrollHeight}px`}),10,this);static register(t="behold-gallery-wall"){return customElements.get(t)||customElements.define(t,g),t}}export{g as default};
|
package/dist/Grid-WfGsYH6w.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{c as t,s,i,f as e,a as h,b as a}from"./Widget-vhfHRABW.js";import{B as o,I as r,V as l,A as n,s as d,g as p}from"./base-7DOIGMXq.js";class u extends o{label="Grid";widgetSettings;feedMetadata;posts;previewLoadingColors=null;containerEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.t,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),r.register(),l.register(),n.register(),this.i=this.i.bind(this),this.addEventListener("post-focus-next",this.h),this.addEventListener("post-focus-previous",this.o),this.onConnect((()=>{this.containerEl=t({type:"figure",classes:"posts"}),this.renderWidget(this.containerEl,[d]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this,this.l)}))}t({changedProp:t,oldValue:i,newValue:e}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.p({oldValue:i,newValue:e});break;case"widgetSettings":this.u(i,e);break;case"feedMetadata":this.m();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),s(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}p({oldValue:t,newValue:s}){function e(t){return t?a(t).map((t=>(delete t.colorPalette,delete t.sizes,t))):null}if(i(e(t),e(s))){const t=s.reduce(((t,s)=>(t[s.id]=s,t)),{});this.postEls.forEach((s=>{s.post={...s.post,colorPalette:t[s.post.id].colorPalette,sizes:t[s.post.id].sizes}}))}else this.postEls=[],this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints),!0);this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}u(t,s){"openPopupGallery"!==t?.onPostClick&&"openPopupGallery"===s?.onPostClick&&this.enablePopoverGallery();const i=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(i),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings})),this.popoverGalleryEl&&(this.popoverGalleryEl.widgetSettings=this.widgetSettings)}m(){let t=`from @${this.feedMetadata.username}`;this.feedMetadata.hashtags?.length&&(t=`from hashtag${this.feedMetadata.hashtags.length>1?"s":""} ${this.feedMetadata.hashtags.join(", ")}`),this.setAttribute("aria-label",`Gallery of Instagram posts ${t}. Shift + arrow keys to navigate`),this.postEls.forEach((t=>{t.feedMetadata=this.feedMetadata})),this.popoverGalleryEl&&(this.popoverGalleryEl.feedMetadata=this.feedMetadata)}setup(){if("transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter((t=>t.colorPalette)).map((t=>t.colorPalette));this.medianPaletteHSL=p(t,this.widgetSettings.loadingColor)}const t=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(t),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings,t.feedMetadata=this.feedMetadata}))}async enablePopoverGallery(){if(this.popoverGalleryEl)return;const{default:t}=await import("./PopoverGallery-7UiKU3Vw.js");t.register(),this.popoverGalleryEl=document.createElement("behold-popover-gallery"),Object.assign(this.popoverGalleryEl,{widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,posts:this.posts,closeFocusEl:this,onSlideChange:t=>{this.popoverGalleryEl.closeFocusEl=this.postEls[t]}})}l(t){const s=t.contentBoxSize?.[0]?.inlineSize,i=this.widgetSettings.breakpoints,e=this.getMatchingBreakpoint(s,i);this.renderBreakpoint(e)}o(){if(!this.postEls.length)return;let t=[...this.containerEl.children].indexOf(this.shadow.activeElement?.parentElement);t>0?t-=1:t=this.postEls.length-1,this.postEls[t].focus()}h(){if(!this.postEls.length)return;let t=[...this.containerEl.children].indexOf(this.shadow.activeElement?.parentElement);t>-1&&t<this.postEls.length-1?t+=1:t=0,this.postEls[t].focus()}i(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.postEls=this.createPostEls(t),this.raf((()=>{this.containerEl.replaceChildren(...this.postEls)}),"renderPosts")}getMatchingBreakpoint(t,s){return Object.entries(s).map((([t,s])=>({width:t,...s}))).filter((t=>"default"!==t.width)).sort(((t,s)=>s.width.localeCompare(t.width))).reduce(((s,i)=>t<=parseInt(i.width)?i:s),{...s.default,numPosts:this.posts.length})}renderBreakpoint(t,s=!1){this.postEls?.length||(s=!0);const i=this.appliedBreakpoint,{numColumns:a,gap:o,borderRadius:r,numPosts:l}=t;switch(i?.numPosts>l&&(this.containerEl.replaceChildren(),e()),this.widgetSettings.alignment){case"left":this.style.justifyContent="flex-start";break;case"right":this.style.justifyContent="flex-end";break;default:this.style.justifyContent="center"}this.widgetSettings.maxWidth&&this.widgetSettings.constrainWidth&&this.containerEl.style.maxWidth!==`${this.widgetSettings.maxWidth}px`&&(this.containerEl.style.maxWidth=`${this.widgetSettings.maxWidth}px`),this.widgetSettings.constrainWidth||(this.containerEl.style.maxWidth=""),this.containerEl.style.gridTemplateColumns=`repeat(${a}, 1fr)`,this.containerEl.style.gap=`${o.y}px ${o.x}px`,this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),h(this.containerEl,"--post-border-radius",`${r}%`),(i?.numPosts!==l||s)&&this.renderPosts(t),this.postEls.forEach(((s,i)=>{s.hasRowGap="0"!=`${t.gap.y}`})),this.appliedBreakpoint=t}createPostEls(s){const{numPosts:i,numColumns:e,gap:h}=s;return this.posts.filter(((t,i)=>i<(s?.numPosts||this.posts?.length||200))).map(((s,a,o)=>{const r=Math.ceil((i||this.posts.length)/e);let l="behold-image-post";return"VIDEO"===s.mediaType&&(l="behold-video-post"),"CAROUSEL_ALBUM"===s.mediaType&&(l="behold-album-post"),t({type:l,props:{post:s,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.i,hasRowGap:"0"!=`${h.y}`,isLastRow:Math.ceil((a+1)/e)===r,index:a,totalPosts:o.length}})}))}static register(t="behold-grid"){return customElements.get(t)||customElements.define(t,u),t}}export{u as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{d as t,c as e,s as i,f as s,t as o,e as r,B as a,j as h,k as n}from"./Widget-vhfHRABW.js";import{a as l,b as c,R as d}from"./base-7DOIGMXq.js";let p=document,u=null,b=new Set,m=new Set,g=new MutationObserver((function(t){t.some((t=>"attributes"===t.type||![...t.addedNodes,...t.removedNodes].every((t=>t.tabIndex>=0))&&void 0))&&w({include:[u],merge:!0})})),v=!1;function x(t){const e=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,{acceptNode:function(t){return t.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),i=[];let s=null;for(;s=e.nextNode();)i.push(s);return i}async function f(){return(await Promise.all([...b].map((async t=>!!await function(t){return new Promise((async e=>{if(t.disabled)return void e(!1);const i=await function(t){return new Promise((e=>{const i=new IntersectionObserver((t=>{e(t[0].isIntersecting),i.disconnect()}));i.observe(t)}))}(t);e(!!i&&[...m].every((e=>!e.contains(t))))}))}(t)&&t)))).filter((t=>!!t))}function _(t){!["Tab"].includes(t.code)||t.ctrlKey||t.altKey||t.metaKey||(t.preventDefault(),"Tab"===t.code&&t.shiftKey?async function(){const t=await f();let e=t.indexOf(p.activeElement)-1;e<0&&(e=t.length-1),t[e]?.focus()}():async function(){const t=await f();let e=t.indexOf(p.activeElement)+1;(e>t.length-1||e<0)&&(e=0),t[e]?.focus()}())}function w({include:t=[],exclude:e=[],merge:i=!1}){i?(t.forEach((t=>{m.delete(t),x(t).forEach((t=>{b.has(t)||b.add(t)}))})),e.forEach((t=>m.add(t)))):(b=new Set(t.flatMap((t=>x(t)))),m=new Set(e))}function y(t){v&&(v=!1,t=t??document.body,document.removeEventListener("keydown",_),g.disconnect(),b.clear(),m.clear(),u=null,t&&t.focus())}class k{containerEl;slides;breadcrumbsContainerEl;previousEl;nextEl;keyboardNav;breadcrumbDiameter;onSlideChange;virtualize;proximalSlidesToRender;dynamicBreadCrumbsCutoff;dragLimit;transitionSpeed;momentumToTransition;index;t;i=document;o;h;l;p;u;m;v;_;k;C;M;S;L;D;F;P;$;A;j;constructor({slides:t,containerEl:e,breadcrumbsContainerEl:i,previousEl:s,nextEl:o,onSlideChange:r,breadcrumbDiameter:a=7,dynamicBreadCrumbsCutoff:h=10,keyboardNav:n=!0,dragLimit:l=.5,virtualize:c=!1,proximalSlidesToRender:d=1,momentumToTransition:p=5,transitionSpeed:u=300}){this.slides=t,this.containerEl=e,this.breadcrumbsContainerEl=i,this.previousEl=s,this.nextEl=o,this.onSlideChange=r,this.breadcrumbDiameter=a,this.dynamicBreadCrumbsCutoff=h,this.keyboardNav=n,this.dragLimit=l,this.virtualize=c,this.proximalSlidesToRender=d,this.transitionSpeed=u,this.momentumToTransition=p,this.index=0,this.t=!1,this.o=null,this.h=null,this.u=null,this.m=null,this._=null,this.k=null,this.C=!1,this.M=null,this.S={x:0,y:0},this.L={x:0,y:0},this.D=0,this.F=0,this.P=0,this.$=0,this.A=[],this.j=new ResizeObserver((t=>this.B(t))),this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.T=this.T.bind(this),this.O=this.O.bind(this),this.R=this.R.bind(this),this.I=this.I.bind(this),this.V=this.V.bind(this),this.U=this.U.bind(this),this.q=this.q.bind(this),this.H=this.H.bind(this),this.N=this.N.bind(this),this.X=this.X.bind(this),this.G=this.G.bind(this),this.Z=this.Z.bind(this),this.K=this.K.bind(this),this.Y=this.Y.bind(this),this.W=this.W.bind(this),this.J=this.J.bind(this),this.tt=this.tt.bind(this)}J(){this.o.addEventListener("mousedown",this.X,{passive:!0}),this.o.addEventListener("touchstart",this.G,{passive:!0}),document.body.addEventListener("mousemove",this.q,{passive:!0}),document.body.addEventListener("mouseup",this.K,{passive:!0}),document.body.addEventListener("mouseleave",this.K,{passive:!0}),document.body.addEventListener("touchmove",this.H,{passive:!0}),document.body.addEventListener("touchend",this.K,{passive:!0}),this.previousEl&&this.previousEl.addEventListener("click",this.I),this.nextEl&&this.nextEl.addEventListener("click",this.V),this.keyboardNav&&document.addEventListener("keydown",this.U)}tt(){this.o.removeEventListener("mousedown",this.X),this.o.removeEventListener("touchstart",this.G),document.body.removeEventListener("mousemove",this.q),document.body.removeEventListener("mouseup",this.K),document.body.removeEventListener("mouseleave",this.K),document.body.removeEventListener("touchmove",this.H),document.body.removeEventListener("touchend",this.K),this.previousEl&&this.previousEl.removeEventListener("click",this.I),this.nextEl&&this.nextEl.removeEventListener("click",this.V),this.keyboardNav&&document.removeEventListener("keydown",this.U)}init(i=0){this.t||(this.t=!0,this.i=t(this.containerEl),this.h=this.slides.map(((t,i)=>e({classes:"hg-slide",contents:t}))),this.u=this.slides.map(((t,i)=>e({classes:"hg-breadcrumb",listeners:{click:()=>this.T({index:i})}}))),this.p=e({classes:"hg-breadcrumbs-current"}),this.l=e({classes:"hg-breadcrumbs",contents:[...this.u,this.p]}),this.o=e({classes:"hg-container",contents:this.h,style:{"touch-action":"pan-y"}}),this.containerEl.appendChild(this.o),this.breadcrumbsContainerEl&&(this.breadcrumbsContainerEl.style.setProperty("--breadCrumbDiameter",this.breadcrumbDiameter+"px"),this.breadcrumbsContainerEl.appendChild(this.l)),this.J(),this.slides.length<2&&(this.l.style.display="none",this.previousEl.style.display="none",this.nextEl.style.display="none"),this.j?.observe(this.containerEl),this.Y(this.index,this.index,!1),this.T({index:i,animate:!1,forceUpdate:!0}))}destroy(){this.t&&(clearTimeout(this._),clearTimeout(this.k),cancelAnimationFrame(this.m),cancelAnimationFrame(this.v),this.j.disconnect(),this.tt(),this.u=null,this.p=null,this.l.remove(),this.l=null,this.o.remove(),this.o=null,this.t=!1)}B(t){}W(t,e=!0){if(this.u.length>=this.dynamicBreadCrumbsCutoff&&this.breadcrumbsContainerEl){i(this.l,{"no-transition":!e}),requestAnimationFrame((()=>{this.l.classList.remove("no-transition")}));const s=this.l.offsetWidth/2-this.breadcrumbDiameter/2-this.u[t].offsetLeft;this.l.style.transform=`translateX(${s}px)`,this.u.forEach(((e,s)=>{i(e,{"hg-breadcrumb--hidden":s<=t-5||s>=t+5,"hg-breadcrumb--4":s===t-4||s===t+4,"hg-breadcrumb--3":s===t-3||s===t+3,"hg-breadcrumb--2":s===t-2||s===t+2,"hg-breadcrumb--1":s===t-1||s===t+1})}))}}Y(t,e,i){this.u?.length&&(this.W(t,i),this.breadcrumbsContainerEl&&(!i||this.u.length>=10&&Math.abs(t-e)>1?t>e?(this.p.style.left="",this.p.style.right=this.l.offsetWidth-(this.u[t].offsetLeft+this.breadcrumbDiameter)+"px"):(this.p.style.right="",this.p.style.left=this.u[t].offsetLeft+"px"):(t<e?(this.p.style.left="",this.p.style.right=this.l.offsetWidth-this.u[e]?.offsetLeft-this.breadcrumbDiameter+"px"):(this.p.style.right="",this.p.style.left=this.u[e]?.offsetLeft+"px"),s(),this.m=requestAnimationFrame((()=>{this.p.style.width=t>e?`${this.u[t]?.offsetLeft-this.p.offsetLeft+this.breadcrumbDiameter}px`:this.p.offsetLeft+this.p.offsetWidth-this.u[t]?.offsetLeft+"px"})),this._=setTimeout((()=>{t>e?(this.p.style.left="",this.p.style.right=this.l.offsetWidth-(this.u[t].offsetLeft+this.breadcrumbDiameter)+"px"):(this.p.style.right="",this.p.style.left=this.u[t].offsetLeft+"px"),s(),this.m=requestAnimationFrame((()=>{this.p.style.width=""}))}),200))))}T({index:t,animate:e=!0,forceUpdate:i=!1,easing:s="ease"}){if(!this.h?.[t])return;if(!this.t)return;cancelAnimationFrame(this.v);const o=t,r=this.index;this.index=o,clearTimeout(this.k),this.virtualize&&this.h.forEach(((t,e)=>{Math.abs(this.index-e)>this.proximalSlidesToRender&&e!==r?t.hasChildNodes()&&t.replaceChildren():t.hasChildNodes()||t.replaceChildren(this.slides[e])})),window.matchMedia("(prefers-reduced-motion)").matches&&(e=!1),this.C=!1,this.P=0,o!==r||i?(cancelAnimationFrame(this.m),clearTimeout(this._),this.Y(o,r,e),this.onSlideChange&&this.onSlideChange(o)):this.p.style.width="",this.o.style.transition=e?`transform ${this.transitionSpeed}ms ${s}`:"",this.o.style.transform=`translateX(${-100*o}%)`,this.F=-100*o,this.previousEl&&(o<1?(this.i.activeElement===this.previousEl&&(this.v=requestAnimationFrame((()=>{this.nextEl.focus()}))),this.previousEl.setAttribute("disabled","true")):this.previousEl.removeAttribute("disabled")),this.nextEl&&(o>=this.h.length-1?(this.i.activeElement===this.nextEl&&(this.v=requestAnimationFrame((()=>{this.previousEl.focus()}))),this.nextEl.setAttribute("disabled","true")):this.nextEl.removeAttribute("disabled")),this.k=setTimeout((()=>{this.o.style.transition=""}),this.transitionSpeed)}I(){this.O()}V(){this.R()}O(t="ease"){"string"!=typeof t&&(t="ease"),this.index<1?this.T({index:this.index}):this.T({index:this.index-1,easing:t})}R(t="ease"){"string"!=typeof t&&(t="ease"),this.index>=this.h.length-1?this.T({index:this.index}):this.T({index:this.index+1,easing:t})}U(t){"ArrowRight"===t.code&&(t.preventDefault(),this.R()),"ArrowLeft"===t.code&&(t.preventDefault(),this.O())}X(t){t.stopPropagation(),t.button>0||this.Z({x:t.clientX,y:t.clientY})}G(t){t.stopPropagation(),this.Z({x:t.touches.item(0).clientX,y:t.touches.item(0).clientY})}Z(t){this.slides.length<2||!this.t||(this.C=!0,clearTimeout(this.k),cancelAnimationFrame(this.m),this.D=C(this.o,this.h).leftDelta,this.F=this.D/this.containerEl.offsetWidth*100,this.o.style.transform=`translateX(${this.F}%)`,this.o.style.transition="",this.P=0,this.p.style.transition="none",this.S=t,this.L=t,this.$=0,this.A=[])}N(t,e=!1){if(this.slides.length<2||!this.C||!this.t)return;const i=C(this.o,this.h),s=i.parent.width*this.dragLimit,o=t.x-this.L.x;var r,a;r=this.A,a=o,5===r.length&&r.shift(),r.push(a),this.L=t;const h=i.leftDelta>0||i.rightDelta<0;if(h){const t=function(t,e,i,s=.125){return t*(1-(Math.abs(e)/Math.abs(i))**s)}(o,this.$,i.parent.width);this.$=this.$+t}else this.$=this.$+o;let n=t.x-this.S.x,l=t.y-this.S.y,c=Math.abs(l)/Math.abs(n);if(e&&c>.85)return void this.K();this.P=Math.abs(n/s),o<0&&(this.M="left"),o>0&&(this.M="right");const d=this.D+this.$;this.F=d/this.containerEl.offsetWidth*100,"left"===this.M&&(this.p.style.right="",this.p.style.left=`${this.u[this.index].offsetLeft}px`),"right"===this.M&&(this.p.style.left="",this.p.style.right=this.l.offsetWidth-(this.u[this.index].offsetLeft+this.breadcrumbDiameter)+"px"),this.p.style.width=h?`${this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.F+100*this.index)/100)}px`:`${Math.min(2.75*this.breadcrumbDiameter,this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.F+100*this.index)/100))}px`,this.o.style.transform=`translateX(${this.F}%)`,this.o.style.transition=""}q(t){this.N({x:t.clientX,y:t.clientY},!1)}H(t){o(this.N,10,this)({x:t.touches.item(0).clientX,y:t.touches.item(0).clientY},!0)}K(){var t;this.C=!1,this.p.style.transition="",this.o.style.transition="",this.S={x:0,y:0},this.L={x:0,y:0},this.$=0;let e=null;switch(t=this.A,(Math.abs(t.reduce(((t,e)=>t+e),0)/t.length)>this.momentumToTransition||this.P>=1)&&(this.F+100*this.index<0&&"left"===this.M&&(e="advance"),this.F+100*this.index>0&&"right"===this.M&&(e="retreat")),e){case"advance":this.m=requestAnimationFrame((()=>this.R("cubic-bezier(0.25, .25, 0.5, 1)")));break;case"retreat":this.m=requestAnimationFrame((()=>this.O("cubic-bezier(0.25, .25, 0.5, 1)")));break;default:this.m=requestAnimationFrame((()=>this.T({index:this.index})))}this.M=null,this.A=[]}}function C(t,e){if(!t||!e?.length)return;const i=t.parentNode.getBoundingClientRect(),s=e[0].getBoundingClientRect(),o=e[e.length-1].getBoundingClientRect();return{parent:i,firstSlide:s,lastSlide:o,leftDelta:s.left-i.left,rightDelta:o.right-i.right}}class E{slides;containerEl;onSlideChange;onRequestClose;t;et;it;o;constructor({slides:t,containerEl:e,onSlideChange:i,onRequestClose:s=null}){this.slides=t,this.containerEl=e,this.onSlideChange=i,this.onRequestClose=s,this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.t=!1,this.et=null,this.it=null,this.o=null,this.st=this.st.bind(this),this.ot=this.ot.bind(this)}init(t=0){this.t||(this.t=!0,this.o=e({classes:z("inner"),contents:this.slides}),this.it=e({classes:z("container"),contents:this.o}),this.containerEl.appendChild(this.it),this.it.addEventListener("click",this.st),this.it.addEventListener("scroll",this.ot,{passive:!0}),this.T({index:t,animate:!1}))}destroy(){this.t&&(this.t=!1,this.it.removeEventListener("click",this.st),this.it.removeEventListener("scroll",this.ot),this.it.remove(),this.it=null)}ot(t){r(this.slides).then((t=>{this.et!==t&&(this.et=t,this.onSlideChange&&this.onSlideChange(this.et))}))}st(t){t.target===this.it&&this.onRequestClose&&this.onRequestClose()}T({index:t,animate:e=!0}){if(!this.slides?.[t])return;const i=this.slides[t].offsetTop;this.et=t,this.onSlideChange&&this.onSlideChange(this.et),this.it?.scrollTo({top:i-10,behavior:e?"smooth":"instant"})}}function z(t){return"behold-ps-"+t}var M='<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M4.4,7.3C4.2,7.3,4,7.5,4,7.7v4.6c0,0.2,0.2,0.4,0.4,0.4h2.2\n\tl3.2,3.2c0.2,0.2,0.6,0.1,0.6-0.2v-2.4c0-0.1-0.1-0.2-0.1-0.3L4.8,7.4C4.7,7.4,4.6,7.3,4.5,7.3C4.5,7.3,4.4,7.3,4.4,7.3z M16.1,15.2\n\tl-1.4-1.4c0.5-0.7,1.3-1.9,1.3-3.8c0-2.8-1.8-4.3-1.8-4.3c-0.1-0.2-0.4-0.2-0.6,0L13.3,6c-0.1,0.2-0.1,0.4,0,0.6\n\tc0,0,1.4,1.2,1.4,3.4c0,1.4-0.5,2.3-0.9,2.9L12.9,12c0.3-0.4,0.6-1.1,0.6-2c0-1.7-1-2.6-1-2.6c-0.1-0.2-0.4-0.2-0.6,0l-0.4,0.3\n\tc-0.1,0.2-0.1,0.4,0,0.6c0,0,0.7,0.5,0.7,1.7c0,0.4-0.1,0.8-0.2,1.1l-1.6-1.6V4.3c0-0.3-0.4-0.5-0.6-0.2L7.4,6.5L4.8,3.9\n\tc-0.1-0.1-0.4-0.1-0.5,0L4,4.3C3.8,4.4,3.8,4.7,4,4.8l1,1.1l6.7,6.7l3.5,3.5c0.1,0.1,0.4,0.1,0.5,0l0.4-0.4\n\tC16.2,15.6,16.2,15.3,16.1,15.2z"/>\n</svg>',S='<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<path fill="#FFFFFF" d="M12.5,7.3c-0.3-0.4-0.8-0.4-1.1-0.2C11,7.4,11,7.9,11.2,8.3l0,0c0.4,0.5,0.6,1.1,0.6,1.7\n\tc0,0.6-0.2,1.2-0.6,1.7c-0.3,0.4-0.2,0.9,0.1,1.1c0.4,0.3,0.9,0.2,1.1-0.1c0,0,0,0,0,0c0.6-0.8,0.9-1.7,0.9-2.7\n\tC13.4,9,13.1,8.1,12.5,7.3z M14.6,6c-0.3-0.4-0.8-0.4-1.1-0.1C13.1,6.2,13,6.7,13.3,7c0,0,0,0,0,0c0.7,0.8,1.1,1.9,1.1,3\n\tc0,1.1-0.4,2.1-1.1,3c-0.3,0.4-0.2,0.9,0.1,1.1c0.3,0.3,0.8,0.2,1.1-0.1c0.9-1.1,1.4-2.5,1.4-4C16,8.5,15.5,7.1,14.6,6z M9.7,4\n\tC9.5,4,9.2,4,9.1,4.1L6.3,6.7H4.5C4.2,6.7,4,7,4,7.3v5.5c0,0.3,0.2,0.5,0.5,0.5h1.8l2.7,2.6l0,0c0.2,0.2,0.6,0.2,0.8,0\n\tc0.1-0.1,0.2-0.3,0.2-0.4l0-10.8C10,4.3,9.9,4.1,9.7,4z"/>\n</svg>';class L extends a{label="PopoverSlideVideo";rt;ht;nt;isPlaying=!1;post;constructor(){super(),l.register(),c.register(),this.lt=this.lt.bind(this),this.ct=this.ct.bind(this),this.dt=this.dt.bind(this),this.ut=this.ut.bind(this),this.bt=this.bt.bind(this),this.play=this.play.bind(this),this.pause=this.pause.bind(this),this.showSoundControl=this.showSoundControl.bind(this),this.hideSoundControl=this.hideSoundControl.bind(this),this.preload=this.preload.bind(this),this.onPropChange(this.gt,["isPlaying"],[]),this.onGlobalStateChange(this.vt),this.onConnect((()=>{this.post.mediaUrl?(this.rt=e({type:"behold-video",classes:"video",props:{mediaUrl:this.post.mediaUrl,sizes:this.post.sizes},listeners:{click:this.ut,load:this.lt,play:this.ct,pause:this.dt}}),this.nt=e({type:"button",classes:"video-mute",contents:this.state.isMuted?M:S,listeners:{click:this.bt},attributes:{"aria-label":this.state.isMuted?"unmute":"mute"}}),this.state.isMuted?this.rt.mute():this.rt.unmute(),this.classList.add("video-container","video-container--paused"),this.replaceChildren(this.rt,this.nt)):(this.ht=e({type:"behold-image",props:{sizes:this.post.sizes,mediaUrl:this.post.thumbnailUrl,isSquare:!1},listeners:{load:this.lt}}),this.replaceChildren(this.ht))}))}gt({changedProp:t,newValue:e}){"isPlaying"===t&&e&&this.rt?.isLoaded&&!this.rt.isPlaying&&this.rt.play()}vt({changedProps:t,newState:e}){t.includes("isMuted")&&this.rt&&this.nt&&(e.isMuted?(this.rt.mute(),this.nt.innerHTML=M):(this.rt.unmute(),this.nt.innerHTML=S))}lt(){this.dispatchEvent(new Event("load")),this.classList.add("is-loaded"),this.rt&&this.isPlaying&&!this.rt.isPlaying&&this.rt.play()}ct(){this.classList.remove("video-container--paused")}dt(){this.classList.add("video-container--paused")}ut(){this.rt&&(this.rt.isPlaying?this.pause():this.play())}bt(){this.rt&&(this.rt.muted?this.updateGlobalState({isMuted:!1}):this.updateGlobalState({isMuted:!0}))}play(){this.isPlaying=!0}pause(){this.isConnected&&this.rt?.isPlaying&&this.rt.pause()}showSoundControl(){this.isConnected&&this.nt&&this.nt.classList.add("video-mute--visible")}hideSoundControl(){this.isConnected&&this.nt&&this.nt.classList.remove("video-mute--visible")}preload(){this.rt?.preload()}static register(t="behold-popover-slide-video"){return customElements.get(t)||customElements.define(t,L),t}}var D='<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.83 10.15"><path d="M.22,5.61s.02,.01,.03,.02l4.3,4.3c.29,.29,.77,.29,1.06,0s.29-.77,0-1.06L1.81,5.08,5.61,1.28c.29-.29,.29-.77,0-1.06-.15-.15-.34-.22-.53-.22s-.38,.07-.53,.22L.25,4.52s-.02,.01-.03,.02C.07,4.69,0,4.88,0,5.08c0,.19,.07,.39,.22,.54Z" fill="#081b10"/></svg>',F='<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.83 10.15"><path d="M5.61,4.54s-.02-.01-.03-.02L1.28,.22C.99-.07,.51-.07,.22,.22S-.07,.99,.22,1.28l3.79,3.79L.22,8.87c-.29,.29-.29,.77,0,1.06,.15,.15,.34,.22,.53,.22s.38-.07,.53-.22L5.58,5.63s.02-.01,.03-.02c.15-.15,.22-.34,.22-.54,0-.19-.07-.39-.22-.54Z" fill="#081b10"/></svg>';class P extends a{label="PopoverSlideAlbum";xt;ft;_t;wt;yt;kt;Ct;Et=0;post;constructor(){super(),this.onPropChange((()=>{}),["post"]),c.register(),L.register(),this.zt=this.zt.bind(this),this.Mt=this.Mt.bind(this),this.preload=this.preload.bind(this),this.onConnect((()=>{this._t=this.St();const t=this.post.sizes?.full?.height?`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${this.post.sizes?.full?.width}' height='${this.post.sizes?.full?.height}'%3E%3C/svg%3E%0A`:this.post.children?.[0]?.sizes?.full.mediaUrl||this.post.children?.[0]?.thumbnailUrl||this.post.children?.[0]?.mediaUrl;this.ft=e({type:"img",classes:"slide__carousel-spaceholder",attributes:{src:t,height:this.post.sizes?.full?.height,width:this.post.sizes?.full?.width}}),this.wt=e({type:"button",classes:"slide__carousel-previous",attributes:{"aria-label":"Previous album slide"},contents:D}),this.yt=e({type:"button",classes:"slide__carousel-next",attributes:{"aria-label":"Next album slide"},contents:F}),this.kt=e({classes:"slide__carousel-breadcrumbs"}),this.xt=e({classes:"slide__carousel",contents:[...this._t,this.wt,this.yt,this.kt]}),this.replaceChildren(this.ft,this.xt),this.Ct=new k({slides:this._t,containerEl:this.xt,keyboardNav:!1,breadcrumbsContainerEl:this.kt,dynamicBreadCrumbsCutoff:7,previousEl:this.wt,nextEl:this.yt,onSlideChange:this.zt,virtualize:!0,proximalSlidesToRender:2,dragLimit:.6}),this.onIntersection(this,this.Mt)})),this.onDisconnect((()=>{this.Ct.destroy(),this.Ct=null}))}Lt(){w({include:[this._t[this.Et]],exclude:this._t.filter(((t,e)=>e!==this.Et)),merge:!0})}Mt(t){t.isIntersecting&&(this.Ct.init(0),this.zt(this.Et))}zt(t){t!==this.Et&&this.state.keyboardNavEnabled&&h(`Slide ${t+1} of ${this._t.length} in Album`),this.Et=t,this._t.forEach(((e,i)=>{$(e)&&(i===t?(e.showSoundControl(),e.play()):(e.hideSoundControl(),e.pause()))}));const e=this._t[t-1],i=this._t[t+1];e&&e.preload(),i&&i.preload();const s=d(this.post.children[t].colorPalette?.dominant||"100,100,100").map((t=>Math.round(t)));this.style.backgroundColor=`hsl(${s[0]} ${Math.min(s[1],35)}% ${Math.min(s[2],13)}%)`;const o=d(this.post.children[t].colorPalette?.dominant||"255,255,255").map((t=>Math.round(t))),r=`hsl(${o[0]} ${o[1]}% ${Math.max(o[2],50)}%)`;this.style.setProperty("--uib-color",r),this.Lt(),this.updateGlobalState({popoverOverlayColor:`hsl(${s[0]} ${Math.min(s[1],50)}% ${Math.min(s[2],15)}% / .85)`})}St(){return this.post.children.map((t=>{let i=null;switch(t.mediaType){case"IMAGE":i=e({type:"behold-image",classes:"slide__carousel-slide",props:{sizes:t.sizes,mediaUrl:t.mediaUrl,isSquare:!1,showLoader:!0}});break;case"VIDEO":i=e({type:"behold-popover-slide-video",classes:"slide__carousel-slide",props:{post:t}})}return i}))}play(){const t=this._t[this.Et];$(t)&&(t.showSoundControl(),t.play())}pause(){this._t.filter($).forEach((t=>{t.hideSoundControl(),t.pause()}))}preload(){this._t?.[0]?.preload()}static register(t="behold-popover-slide-album"){return customElements.get(t)||customElements.define(t,P),t}}const $=t=>"BEHOLD-POPOVER-SLIDE-VIDEO"===t.tagName;var A='<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">\n<g>\n\t<path fill="#262626" d="M13.8,5.9H3.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h10.6c0.4,0,0.7,0.3,0.7,0.7S14.1,5.9,13.8,5.9z"/>\n</g>\n<g>\n\t<path fill="#262626" d="M12.8,10.8H2.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h10.6c0.4,0,0.7,0.3,0.7,0.7S13.2,10.8,12.8,10.8z"\n\t\t/>\n</g>\n<g>\n\t<path fill="#262626" d="M8.9,15.3c0,0-0.1,0-0.1,0c-0.4-0.1-0.6-0.4-0.5-0.8l2.4-13.3c0.1-0.4,0.4-0.6,0.8-0.5\n\t\tc0.4,0.1,0.6,0.4,0.5,0.8L9.6,14.8C9.5,15.1,9.2,15.3,8.9,15.3z"/>\n</g>\n<g>\n\t<path fill="#262626" d="M4.7,15.3c0,0-0.1,0-0.1,0c-0.4-0.1-0.6-0.4-0.5-0.8L6.4,1.2c0.1-0.4,0.4-0.6,0.8-0.5\n\t\tc0.4,0.1,0.6,0.4,0.5,0.8L5.3,14.8C5.3,15.1,5,15.3,4.7,15.3z"/>\n</g>\n</svg>';class j extends a{label="PopoverGallerySlide";o;Dt;Ft;Pt;$t;At;jt;Bt;Tt;Ot;Rt;post;feedMetadata;constructor(){super(),this.onPropChange(this.gt,["post","feedMetadata"]),c.register(),L.register(),P.register(),this.expandCaption=this.expandCaption.bind(this),this.preload=this.preload.bind(this),this.onConnect((()=>{this.render()}))}render(){if(this.classList.remove("is-loaded"),!this.post)return;const t=d(this.post.colorPalette?.dominant||"100,100,100").map((t=>Math.round(t))),i=`hsl(${t[0]} ${Math.min(t[1],35)}% ${Math.min(t[2],13)}%)`,o=d(this.post.colorPalette?.dominant||"255,255,255").map((t=>Math.round(t))),r=`hsl(${o[0]} ${o[1]}% ${Math.max(o[2],50)}%)`;switch(this.style.setProperty("--uib-color",r),this.post.mediaType){case"IMAGE":this.Ot=e({type:"behold-image",classes:"slide__media",style:{backgroundColor:i},props:{sizes:this.post.sizes,mediaUrl:this.post.mediaUrl,isSquare:!1,showLoader:!0}});break;case"VIDEO":this.Ot=e({type:"behold-popover-slide-video",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}});break;case"CAROUSEL_ALBUM":this.Ot=e({type:"behold-popover-slide-album",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}})}this.Dt=this.feedMetadata?.profilePictureUrl?e({type:"img",attributes:{src:this.feedMetadata.profilePictureUrl}}):null,this.Ft="@"+this.feedMetadata.username,this.feedMetadata.hashtags&&(this.Dt=A,this.Ft=this.feedMetadata.hashtags.join(", ")),this.Pt=this.Dt?e({classes:"slide__avatar",contents:this.Dt,attributes:{"aria-label":this.feedMetadata.hashtags?"hashtags":"username"}}):null,this.$t=e({classes:"slide__header",contents:[this.Pt,this.Ft]}),this.At=this.post?.caption?.trim()?.length?e({classes:"slide__caption",contents:this.post.caption}):null,this.jt=this.post.permalink?e({type:"a",attributes:{href:this.post.permalink,target:"_blank"},classes:"slide__footer-link",contents:["Go to post",'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<g>\n\t<path d="M16,19.8H4c-2.1,0-3.8-1.7-3.8-3.8V4c0-2.1,1.7-3.8,3.8-3.8h12c2.1,0,3.8,1.7,3.8,3.8v12C19.8,18.1,18.1,19.8,16,19.8z\n\t\t M4,1.8c-1.2,0-2.2,1-2.2,2.2v12c0,1.2,1,2.2,2.2,2.2h12c1.2,0,2.2-1,2.2-2.2V4c0-1.2-1-2.2-2.2-2.2H4z"/>\n</g>\n<path d="M14.4,5.6v7.5h-1.5V8.2l-6,6l-1.1-1.1l6-6H6.9V5.6H14.4z"/>\n</svg>']}):"",this.Bt=e({classes:"slide__footer",contents:[this.jt]}),this.Tt=e({classes:"slide__text",contents:[this.$t,this.At,this.Bt]}),this.o=e({classes:"slide__inner",contents:[this.Ot,this.Tt]}),this.Rt=e({type:"button",classes:"slide__more",contents:"… more",listeners:{click:this.expandCaption}}),this.replaceChildren(this.o),s(),this.to((()=>{this.classList.add("is-loaded")}),10,"onConnect")}gt({changedProp:t,newValue:i}){switch(t){case"feedMetadata":if(!this.isConnected)return;this.Ft="@"+i.username,i.hashtags?.length?(this.Dt=A,this.Ft=i.hashtags.join(", ")):this.Dt=i?.profilePictureUrl?e({type:"img",attributes:{src:i.profilePictureUrl}}):null,this.Pt=this.Dt?e({classes:"slide__avatar",contents:this.Dt,attributes:{"aria-label":this.feedMetadata.hashtags?"hashtags":"username"}}):null,this.$t=e({classes:"slide__header",contents:[this.Pt,this.Ft]});break;case"post":if(!this.Ot)return;"IMAGE"===i.mediaType?Object.assign(this.Ot,{sizes:this.post.sizes,mediaUrl:this.post.mediaUrl,isSquare:!1,showLoader:!0}):B(this.Ot)||(this.Ot.post=i)}}activate(){if("VIDEO"===this.post.mediaType&&this.Ot){const t=this.Ot;t.play(),t.showSoundControl()}}deactivate(){"VIDEO"===this.post.mediaType&&this.Ot&&this.Ot.pause(),"CAROUSEL_ALBUM"===this.post.mediaType&&this.Ot&&this.Ot.pause()}preload(){this.Ot.preload()}expandCaption(){this.At&&(this.At.style.transition="",this.At.style.height=this.At.offsetHeight+"px",this.At.innerHTML=this.post?.caption||"",s(),this.raf((()=>{this.At.style.transition="height .3s ease",this.At.style.height=this.At.scrollHeight+"px",this.to((()=>{this.At.style.transition="",this.At.style.height=""}),300,"expandCaption")}),"expandCaption"))}collapseCaption(){if(!this.At)return;const t=n({text:this.post.caption,maxChars:120,maxLines:4});this.At.innerHTML=t,t?.length<this.post?.caption?.length&&this.At.appendChild(this.Rt)}static register(t="behold-popover-gallery-slide"){return customElements.get(t)||customElements.define(t,j),t}}const B=t=>"BEHOLD-IMAGE"===t.tagName;class T extends a{label="PopoverGallery";It=900;Vt;Ut;qt;Ht;wt;yt;Nt;Xt;o;Gt;Zt;Kt;Yt=0;posts;widgetSettings;feedMetadata;closeFocusEl=document.body;onSlideChange;constructor(){super(),this.Vt=this.attachShadow({mode:"open"}),this.onPropChange(this.gt,["posts","widgetSettings","feedMetadata"]),j.register(),this.zt=this.zt.bind(this),this.Wt=this.Wt.bind(this),this.Jt=this.Jt.bind(this),this.onGlobalStateChange((()=>{i(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{this.classList.add(`theme--${this.widgetSettings.popupColorTheme||"auto"}`),i(this,{"keyboard-nav":this.state.keyboardNavEnabled}),this.Ht=e({classes:"overlay",listeners:{click:this.Wt}}),this.wt=e({type:"button",classes:"previous",attributes:{"aria-label":"Previous post"},contents:D}),this.yt=e({type:"button",classes:"next",attributes:{"aria-label":"Next post"},contents:F}),this.Nt=e({type:"button",classes:"close",contents:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">\n<path fill-rule="evenodd" clip-rule="evenodd" fill="#081B10" d="M11.6,10.1l5.5-5.7c0.5-0.5,0.5-1.1,0-1.6c-0.5-0.5-1.1-0.5-1.6,0\n\tl-5.5,5.6L4.4,2.8C4,2.4,3.3,2.4,2.8,2.8S2.4,4,2.8,4.4L8.4,10l-5.5,5.6c-0.5,0.5-0.5,1.1,0,1.6c0.5,0.5,1.1,0.5,1.6,0l5.5-5.6\n\tl5.5,5.6c0.5,0.5,1.1,0.5,1.6,0c0.5-0.5,0.5-1.1,0-1.6C17,15.6,11.6,10.1,11.6,10.1z"/>\n</svg>',attributes:{"aria-label":"Close"},listeners:{click:t=>{t.preventDefault(),this.Wt()}}}),this.Xt=e({classes:"breadcrumbs"}),this.Gt=this.posts.map((t=>{const e=document.createElement("behold-popover-gallery-slide");return e.post=t,e.feedMetadata=this.feedMetadata,e})),this.o=e({classes:"inner",contents:this.Gt}),this.Ut=document.createDocumentFragment(),this.Ut.replaceChildren(this.Ht,this.o,this.Xt,this.wt,this.yt,this.Nt),this.qt=e({type:"style",contents:[":host{--icon-play:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M28.4 14.9 9.5 4.2C7.5 3.1 5 4.6 5 6.8v21.3c0 2.3 2.5 3.7 4.5 2.6l19-10.7c2-1 2-4-.1-5.1z'/%3E%3C/svg%3E\");--icon-gallery:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M27.3 22.7v-17c0-2.6-2.1-4.7-4.7-4.7H5.7C3.1 1 1 3.1 1 5.7v17c0 2.6 2.1 4.7 4.7 4.7h17c2.5-.1 4.6-2.2 4.6-4.7zm4-13.4v14.6c0 4.1-3.4 7.4-7.4 7.4H9.2c-.5 0-.8.6-.5 1 .9 1 2.2 1.6 3.7 1.6h12.1c5.2 0 9.3-4.2 9.3-9.3V12.5c0-1.5-.6-2.8-1.6-3.7-.3-.4-.9 0-.9.5z'/%3E%3C/svg%3E\");--bottomPadding:60px;--height:min(calc(100vh - 120px - var(--bottomPadding)),1400px);--width:calc(100vw - 120px);--text-width:400px;--text-color:#262626;--text-background:#fff;--text-size:15px;--border-color:#ededed;--ease-out-back:cubic-bezier(0.085,1.735,0.285,0.995);align-items:center;box-sizing:border-box;height:100vh;justify-content:flex-start;left:0;overflow:hidden;pointer-events:none;position:fixed;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:99999}:host *{box-sizing:border-box}@media (max-width:1200px){:host{--text-width:300px;--text-size:13px}}:host(.is-scroller){--text-width:100%;--height:auto;--width:calc(100vw - 40px)}@media (prefers-color-scheme:dark){:host(.theme--auto){--text-color:#f2f2f2;--text-background:#1a1a1a;--border-color:#292929}}:host(.theme--dark){--text-color:#f2f2f2;--text-background:#1a1a1a;--border-color:#292929}:host(.is-visible){pointer-events:all}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:rgba(0,0,0,.6);display:block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .3s ease;width:100%;will-change:opacity,background-color}:host(.is-visible) .overlay{opacity:1;pointer-events:all}.inner{display:flex;height:calc(100% - var(--bottomPadding));justify-content:center;pointer-events:none;position:relative;width:100%;z-index:1}:host(.is-scroller) .inner{height:100%}behold-popover-gallery-slide{align-items:center;display:flex;flex-grow:0;flex-shrink:0;height:calc(100% - var(--bottomPadding));justify-content:center;margin:0;opacity:0;padding:0;pointer-events:none;transform:scale(.99);transition:transform .2s ease-out,opacity .2s ease-out;width:100%}@media (min-width:901px){behold-popover-gallery-slide:active{cursor:grabbing}}@media (prefers-reduced-motion){behold-popover-gallery-slide{transform:none;transition:none}}:host(.is-visible) behold-popover-gallery-slide.is-loaded{opacity:1;transform:none}:host(.is-scroller) behold-popover-gallery-slide{height:auto;margin-top:10px}.slide__inner{align-items:center;background-color:var(--text-background);display:flex;justify-content:center;max-height:var(--height);max-width:var(--width);overflow:hidden;pointer-events:all;position:relative}:host(.is-scroller) .slide__inner{border-radius:4px;flex-direction:column}.slide__media{align-items:center;display:flex;flex-shrink:1;height:var(--height);justify-content:center;max-height:var(--height);overflow:hidden;position:relative;transition:background-color .3s ease;z-index:1}.slide__media img,.slide__media video{height:auto;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center center;object-position:center center;opacity:0;position:relative;width:auto;z-index:1}behold-image{pointer-events:none;position:relative}behold-image.is-loaded img{opacity:1;transition:opacity .4s ease}.slide__carousel{height:100%;left:0;position:absolute;top:0;width:100%}.slide__carousel:before{background:linear-gradient(0deg,rgba(0,0,0,.4),transparent);bottom:0;height:60px;left:0;width:100%;z-index:1}.slide__carousel:after,.slide__carousel:before{content:\"\";pointer-events:none;position:absolute;transform:translateZ(0)}.slide__carousel:after{background:var(--icon-gallery);height:20px;left:20px;opacity:.75;top:20px;width:20px;z-index:2}:host(.is-scroller) .slide__carousel:after{left:auto;right:15px;top:15px}img.slide__carousel-spaceholder{height:auto;max-height:100%;max-width:100%;opacity:0;pointer-events:none;visibility:hidden;width:auto}.slide__carousel-breadcrumbs{bottom:30px;height:10px;left:50%;position:absolute;transform:translateX(-50%);z-index:2}:host(.is-scroller) .slide__carousel-breadcrumbs{bottom:10px}.slide__carousel-next,.slide__carousel-previous{align-items:center;background-color:hsla(0,0%,100%,.95);border:none;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.2);display:flex;height:30px;justify-content:center;opacity:.75;outline:none;position:absolute;top:50%;transform:translateY(-50%) translateZ(0);transition:opacity .3s ease;width:30px;z-index:2}:host(.keyboard-nav) .slide__carousel-next:focus,:host(.keyboard-nav) .slide__carousel-previous:focus{background-color:#000;box-shadow:0 0 10px rgba(0,0,0,.2),0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}:host(.keyboard-nav) .slide__carousel-next:focus svg path,:host(.keyboard-nav) .slide__carousel-previous:focus svg path{fill:#fff}.slide__carousel-next:not(:disabled),.slide__carousel-previous:not(:disabled){cursor:pointer}.slide__carousel-next:not(:disabled):hover,.slide__carousel-previous:not(:disabled):hover{opacity:1}.slide__carousel-next:disabled,.slide__carousel-previous:disabled{opacity:.25}.slide__carousel-next:before,.slide__carousel-previous:before{content:\"\";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.slide__carousel-next svg,.slide__carousel-previous svg{height:12px;position:absolute;width:12px}.slide__carousel-next svg path,.slide__carousel-previous svg path{fill:#000}:host(.is-scroller) .slide__carousel-next,:host(.is-scroller) .slide__carousel-previous{background-color:transparent;box-shadow:none;height:20px;width:20px}:host(.is-scroller) .slide__carousel-next svg path,:host(.is-scroller) .slide__carousel-previous svg path{fill:#fff}.slide__carousel-previous{left:20px}.slide__carousel-previous svg{transform:translateX(-1px)}:host(.is-scroller) .slide__carousel-previous{left:10px}.slide__carousel-next{right:20px}.slide__carousel-next svg{transform:translateX(1px)}:host(.is-scroller) .slide__carousel-next{right:10px}.slide__carousel-slide{cursor:grab;display:flex;height:var(--height);overflow:hidden;width:auto}.slide__carousel-slide:active{cursor:grabbing}.slide__carousel-slide-media{height:auto;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;pointer-events:none;width:auto}.video-container{align-items:center;cursor:pointer;display:flex;height:var(--height);justify-content:center;overflow:hidden;position:relative}.video-container:after{background:var(--icon-play);content:\"\";filter:drop-shadow(1px 1px 1px rgba(0,0,0,.1));height:80px;left:calc(50% - 40px);opacity:0;pointer-events:none;position:absolute;top:calc(50% - 40px);transform:scale(.5);transition:all .15s ease;width:80px;z-index:2}.video-container.video-container--paused:after{opacity:.8;transform:none;transition:opacity .2s ease,transform .3s var(--ease-out-back)}.video-container:active{cursor:grabbing}behold-video{align-items:center;display:flex;height:100%;width:100%}behold-video.is-loaded video{opacity:1;transition:opacity .4s ease}.video-mute{align-items:center;background:transparent;border:none;bottom:0;cursor:pointer;display:flex;height:60px;justify-content:center;margin:0;opacity:0;outline:none;padding:0;position:absolute;right:0;transform:translateZ(0);transition:opacity .1s ease;width:60px;z-index:2}.video-mute.video-mute--visible{opacity:1;transition:opacity .2s ease .2s}.video-mute:before{background-color:rgba(0,0,0,.5);border-radius:50%;content:\"\";height:28px;left:calc(50% - 14px);position:absolute;top:calc(50% - 14px);width:28px}:host(.keyboard-nav) .video-mute:focus:before{background-color:#000;box-shadow:0 0 10px rgba(0,0,0,.2),0 0 0 2px #4169e1,0 0 0 4px #fff}.video-mute svg{height:20px;left:calc(50% - 10px);position:absolute;top:calc(50% - 10px);width:20px}.slide__text{align-items:stretch;box-shadow:-1px 0 0 var(--border-color);color:var(--text-color);display:flex;flex-direction:column;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:var(--text-size);height:var(--height);justify-content:flex-start;pointer-events:none;position:relative;transform:translateZ(0);width:var(--text-width);z-index:1}.slide__header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;font-weight:600;line-height:1.25;padding:30px}@media (prefers-color-scheme:dark){.theme--auto .slide__header{border-color:#292929}}.slide__header.theme--dark{border-color:#292929}@media (max-width:1200px){.slide__header{padding:20px}}.slide__avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:42px;justify-content:center;margin-right:10px;overflow:hidden;position:relative;width:42px}.slide__avatar:before{background:radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#c33cbe 12%,#c33cbe 58%);height:100%;left:0;top:0;width:100%}.slide__avatar:after,.slide__avatar:before{border-radius:50%;content:\"\";position:absolute}.slide__avatar:after{background-color:var(--text-background);height:calc(100% - 4px);left:2px;top:2px;width:calc(100% - 4px)}@media (prefers-color-scheme:dark){.theme--auto .slide__avatar{background-color:#333}}.slide__avatar.theme--dark{background-color:#333}.slide__avatar img{border-radius:50%;height:calc(100% - 8px);position:relative;width:calc(100% - 8px);z-index:1}.slide__avatar svg{height:15px;position:relative;width:15px;z-index:1}.slide__avatar svg path{fill:var(--text-color)}:host(.is-scroller) .slide__avatar{height:32px;width:32px}:host(.is-scroller) .slide__avatar svg{height:12px;width:12px}.slide__caption{line-height:1.5;overflow:auto;padding:30px;scrollbar-width:none;white-space:pre-wrap;word-break:break-word}:host(.is-visible) .slide__caption{pointer-events:all}.slide__caption::-webkit-scrollbar{width:0!important}:host(.is-scroller) .slide__caption{overflow:hidden}.slide__more{background:transparent;border:none;color:var(--text-color);cursor:pointer;margin:0;opacity:.75;padding:0}.slide__more:hover{opacity:1;text-decoration:underline}.slide__footer{border-top:1px solid var(--border-color);margin-top:auto}:host(.is-visible) .slide__footer{pointer-events:all}.slide__footer-link{align-items:center;color:var(--text-color);cursor:pointer;display:flex;font-size:.9333em;font-weight:600;padding:30px;text-decoration:none;transition:background .3s ease}:host(.keyboard-nav) .slide__footer-link:focus{background-color:var(--border-color);border:none;box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 3px #4169e1;outline:none;transition:background .1s ease}.slide__footer-link:hover{background-color:var(--border-color)}.slide__footer-link svg{height:17px;margin-left:auto;width:17px}.slide__footer-link svg path{fill:var(--text-color)}@media (max-width:1200px){.slide__footer-link{padding:20px}}.breadcrumbs{align-items:center;bottom:calc(var(--bottomPadding)/2 + 30px - (var(--breadCrumbDiameter) + 10px)/2);display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);justify-content:center;left:50%;opacity:0;position:absolute;transform:translateX(-50%);width:auto;z-index:2}:host(.is-visible) .breadcrumbs{opacity:1}.breadcrumbs-current{background-color:#fff;border-radius:calc(var(--breadCrumbDiameter)/2);height:var(--breadCrumbDiameter);position:absolute;top:5px;transition:width .3s ease;width:var(--breadCrumbDiameter);will-change:left,right,width}.breadcrumb{background-color:hsla(0,0%,100%,.4);border-radius:50%;cursor:pointer;display:block;height:7px;transition:all .3s ease;width:7px}.breadcrumb:hover{background-color:#fff}.close{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:30px;justify-content:center;margin:0;opacity:0;padding:0;position:absolute;right:15px;top:15px;width:30px;z-index:2}:host(.is-visible) .close{opacity:.75;transition:opacity .3s ease}:host(.is-visible) .close:hover{opacity:1}:host(.keyboard-nav) .close:focus{box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}.close:focus{border:none;outline:none}.close:before{content:\"\";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.close svg{height:20px;width:20px}.close svg path{fill:#fff}:host(.is-scroller) .close{background-color:hsla(0,0%,97%,.85);border-radius:50%;opacity:1;right:5px;top:5px}:host(.is-scroller) .close svg{height:14px;width:14px}:host(.is-scroller) .close svg path{fill:#000}.next,.previous{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:60px;justify-content:center;margin:0;opacity:0;padding:0;position:absolute;top:calc(50% - var(--bottomPadding)/2);transform:translateY(-50%);width:60px;z-index:2}:host(.is-visible) .next,:host(.is-visible) .previous{opacity:.75;transition:opacity .3s ease}:host(.is-visible) .next:focus,:host(.is-visible) .previous:focus{border:none;outline:none}:host(.is-visible) .next:hover,:host(.is-visible) .previous:hover{opacity:1}:host(.is-visible) .next:disabled,:host(.is-visible) .previous:disabled{cursor:default;opacity:.15}:host(.is-visible) .next:disabled:hover,:host(.is-visible) .previous:disabled:hover{opacity:.15}:host(.keyboard-nav) .next:focus,:host(.keyboard-nav) .previous:focus{box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}.next svg,.previous svg{height:16px;width:16px}.next svg path,.previous svg path{fill:#fff}.previous{left:0}.next{right:0}.ldr{--uib-size:50px;--uib-speed:1s;--uib-stroke:2px;--uib-bg-opacity:0.1;align-items:center;border-radius:calc(var(--uib-stroke)/2);contain:strict;display:none;height:var(--uib-stroke);justify-content:center;left:calc(50% - 15px);overflow:hidden;position:absolute;top:calc(50% - 15px);transform:translateZ(0);width:var(--uib-size)}.ldr.ldr--visible{display:flex}behold-image.is-loaded .ldr{display:none}.ldr:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.ldr:after,.ldr:before{background-color:var(--uib-color);content:\"\";height:100%;transition:background-color .3s ease;width:100%}.ldr:after{animation:wobble var(--uib-speed) ease-in-out infinite;border-radius:calc(var(--uib-stroke)/2);transform:translateX(-95%)}@keyframes wobble{0%,to{transform:translateX(-95%)}50%{transform:translateX(95%)}}".toString(),'.hg-container{align-items:flex-start;backface-visibility:hidden;contain:layout style;justify-content:flex-start;-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform}.hg-container,.hg-slide{display:flex;height:100%;width:100%}.hg-slide{contain:strict;flex-grow:0;flex-shrink:0}.hg-breadcrumbs,.hg-slide{align-items:center;justify-content:center}.hg-breadcrumbs{--ease:cubic-bezier(0.215,0.61,0.355,1);display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);pointer-events:all;position:relative;transition:transform .4s var(--ease);width:auto;will-change:transform}.hg-breadcrumbs.no-transition{transition:none}@media (prefers-reduced-motion){.hg-breadcrumbs{transition:none}}.hg-breadcrumbs-current,.hg-breadcrumbs-current:empty{background-color:#fff;border-radius:calc(var(--breadCrumbDiameter)/2);display:block;height:var(--breadCrumbDiameter);position:absolute;top:5px;transition:width .3s var(--ease);width:var(--breadCrumbDiameter);will-change:left,right,width}.hg-breadcrumb,.hg-breadcrumb:empty{cursor:pointer;display:block;flex-shrink:0;height:var(--breadCrumbDiameter);position:relative;width:var(--breadCrumbDiameter)}.hg-breadcrumb:before,.hg-breadcrumb:empty:before{content:"";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--breadCrumbDiameter)*1.75)}.hg-breadcrumb:after,.hg-breadcrumb:empty:after{background-color:hsla(0,0%,100%,.4);border-radius:50%;content:"";height:100%;left:0;position:absolute;top:0;transition:all .3s var(--ease);width:100%}.no-transition .hg-breadcrumb:after,.no-transition .hg-breadcrumb:empty:after{transition:none}@media (prefers-reduced-motion){.hg-breadcrumb:after,.hg-breadcrumb:empty:after{transition:none}}.hg-breadcrumb.hg-breadcrumb--1:after,.hg-breadcrumb:empty.hg-breadcrumb--1:after{transform:scale(.85)}.hg-breadcrumb.hg-breadcrumb--2:after,.hg-breadcrumb:empty.hg-breadcrumb--2:after{opacity:.75;transform:scale(.7)}.hg-breadcrumb.hg-breadcrumb--3:after,.hg-breadcrumb:empty.hg-breadcrumb--3:after{opacity:.5;transform:scale(.55)}.hg-breadcrumb.hg-breadcrumb--4:after,.hg-breadcrumb:empty.hg-breadcrumb--4:after{opacity:.25;transform:scale(.4)}.hg-breadcrumb.hg-breadcrumb--hidden,.hg-breadcrumb:empty.hg-breadcrumb--hidden{pointer-events:none}.hg-breadcrumb.hg-breadcrumb--hidden:after,.hg-breadcrumb:empty.hg-breadcrumb--hidden:after{opacity:0;transform:scale(0)}.hg-breadcrumb:empty:hover:after,.hg-breadcrumb:hover:after{background-color:#fff;opacity:1;transform:none}'.toString(),'.behold-ps-container{display:flex;height:100vh;justify-content:center;overflow:auto;pointer-events:all;scrollbar-width:none;width:100%}.behold-ps-container::-webkit-scrollbar{width:0!important}.behold-ps-inner{max-width:400px}.behold-ps-inner:before{height:10px}.behold-ps-inner:after,.behold-ps-inner:before{content:"";display:block;pointer-events:none;width:100%}.behold-ps-inner:after{height:90px}'.toString()]}),this.Zt=new k({slides:this.Gt,containerEl:this.o,breadcrumbsContainerEl:this.Xt,previousEl:this.wt,nextEl:this.yt,onSlideChange:this.zt,breadcrumbDiameter:this.Gt.length>9?9:8,virtualize:!0,dragLimit:.4}),this.Kt=new E({slides:this.Gt,containerEl:this.o,onSlideChange:this.zt,onRequestClose:()=>{this.Wt()}}),this.onGlobalStateChange(this.vt),this.onResize(this,this,this.B)})),this.onDisconnect((()=>{document.removeEventListener("keydown",this.Jt),y(this.closeFocusEl),this.Zt.destroy(),this.Kt.destroy(),this.Zt=null,this.Kt=null}))}gt({changedProp:t,newValue:e}){switch(t){case"posts":if(e&&this.Gt){const t=e.reduce(((t,e)=>(t[e.id]=e,t)),{});this.Gt.map((e=>{e.post=t[e.post.id]}))}case"feedMetadata":this.Gt&&this.Gt.map((t=>{t.feedMetadata=e}))}}vt({changedProps:t,newState:e}){t.includes("popoverOverlayColor")&&this.raf((()=>{this.Ht.style.backgroundColor=e.popoverOverlayColor}),"overlayColor")}Jt(t){"Escape"===t.code&&(t.preventDefault(),this.Wt())}open(t,e){this.Yt=t,this.cancelRaf("open"),this.closeFocusEl=e,this.Qt(),s(),this.raf((()=>{this.classList.add("is-visible"),async function(t,e=[],i=0){u=t,p=(t=>t instanceof ShadowRoot)(t)?t:document,v=!0,w({include:[t],exclude:e}),document.addEventListener("keydown",_),g.observe(t,{subtree:!0,attributes:!0,attributeFilter:["disabled"],childList:!0});const s=await f();s[i]?.focus()}(this.Vt,this.Gt?.filter(((e,i)=>i!==t)),1),this.te(this.offsetWidth),this.Gt[t].activate(),document.addEventListener("keydown",this.Jt)}),"open")}Wt(){this.cancelTo("close"),this.classList.remove("is-visible"),this.to(this.remove.bind(this),300,"close"),y(this.closeFocusEl),document.removeEventListener("keydown",this.Jt)}zt(t){this.Yt=t;let e="image";switch(this.posts[t]?.mediaType){case"VIDEO":e=this.posts[t].isReel?"reel":"video";break;case"CAROUSEL_ALBUM":e="album";break;default:e="image"}this.state.keyboardNavEnabled&&h(`${e}, post ${t+1} of ${this.Gt.length} in gallery`),w({include:[this.Vt],exclude:this.Gt.filter(((e,i)=>i!==t)),merge:!1}),this.onSlideChange&&this.onSlideChange(t),this.Gt.forEach(((e,i)=>{i===t?e.activate():e.deactivate()}));const i=this.Gt[t-1]??null,s=this.Gt[t+1]??null;if(i&&this.raf((()=>i.preload()),"preloadPrev"),s&&this.raf((()=>s.preload()),"preloadNext"),"CAROUSEL_ALBUM"!==this.posts[t]?.mediaType){const e=d(this.posts[t]?.colorPalette?.dominant||"100,100,100").map((t=>Math.round(t)));this.updateGlobalState({popoverOverlayColor:`hsl(${e[0]} ${Math.min(e[1],50)}% ${Math.min(e[2],15)}% / .85)`})}}te(t){t>this.It?(this.classList.remove("is-scroller"),this.wt.style.display="",this.yt.style.display="",this.Kt.destroy(),this.Zt.init(this.Yt),this.Gt.forEach((t=>t.expandCaption()))):(this.classList.add("is-scroller"),this.Zt.destroy(),this.Kt.init(this.Yt),this.Gt.forEach((t=>t.collapseCaption())),this.wt.disabled=!1,this.wt.style.display="none",this.yt.disabled=!1,this.yt.style.display="none")}B(t){const e=t?.borderBoxSize?.[0]?.inlineSize||0;this.te(e)}Qt(){document.body.append(this),this.Vt.replaceChildren(this.Ut,this.qt)}static register(t="behold-popover-gallery"){return customElements.get(t)||customElements.define(t,T),t}}export{T as default};
|