@behold/widget 0.1.10 → 0.1.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/dist/{BeholdWidget-IH-1-Zxz.js → BeholdWidget-tZ68JBrA.js} +1 -1
  2. package/dist/BeholdWidget.js +1 -1
  3. package/dist/GalleryWall-ep4jn4uc.js +1 -0
  4. package/dist/{Grid-tQwJ4eYL.js → Grid-SFwAhs-W.js} +1 -1
  5. package/dist/{Grid-tNDy9g9K.js → Grid-Y5E3_F0F.js} +1 -1
  6. package/dist/{PopoverGallery-5aBK27WQ.js → PopoverGallery-FTEH7t-X.js} +1 -1
  7. package/dist/widgets/GalleryWall.d.ts.map +1 -1
  8. package/package.json +1 -1
  9. package/dist/GalleryWall-nNT-7SSo.js +0 -1
package/dist/{BeholdWidget-IH-1-Zxz.js → BeholdWidget-tZ68JBrA.js} RENAMED
@@ -1 +1 @@
1
- function e(e){return JSON.parse(JSON.stringify(e))}function t(){return document.body.offsetTop}async function s(e,t){const s=document.createElement(e);return new Promise(((n,r)=>{switch(e){case"img":s.addEventListener("load",(()=>{n(t)}));break;case"video":s.addEventListener("loadeddata",(()=>n(t)))}s.addEventListener("error",(e=>{r(e)})),s.src=t}))}function n({text:e,maxLines:t=2,maxChars:s=50}){if(!e)return;const n=e.match(/.*/g).filter((e=>e.length>0)).slice(0,t).join("").length,r=Math.min(n,s);return e.slice(0,r)}function r(e,t){return`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${e}' height='${t}'%3E%3C/svg%3E%0A`}function o(e){return new Promise((t=>{let s=new IntersectionObserver((e=>{let n=e.reduce(((e,t,s)=>t.intersectionRatio>e.intersectionRatio?{index:s,intersectionRatio:t.intersectionRatio}:e),{intersectionRatio:0,index:null});s.disconnect(),s=null,t(n.index)}));e.forEach((e=>s.observe(e)))}))}function i(e){return e.isConnected?"#document"===e.nodeName||e instanceof ShadowRoot?e:i(e.parentNode):document}function a(e,t,s=null){let n=!1,r=null;return(...o)=>{n?(clearTimeout(r),r=setTimeout((()=>{n=!1,e.apply(s,o)}),t)):(e.apply(s,o),n=!0,setTimeout((()=>{n=!1}),t))}}function d(e,t){Object.entries(t).forEach((([t,s])=>{s?e.classList.add(t):e.classList.remove(t)}))}function l(e,t,s){e.style.setProperty(t,s)}function c(e,t,s){return"string"==typeof s&&(s=[s]),s.reduce(((s,n)=>e?.[n]!==t?.[n]||s),!1)}let h={isMuted:!0,popoverOverlayColor:"rgba(0, 0, 0, 0.6)",keyboardNavEnabled:!1},u=!1,p=null,g=null;const m=new Map,b=new Map,f=new Set;class w extends HTMLElement{label="BaseElement";storedProperties=new Map;requiredProperties=[];hasRequiredProps=!1;propChangeHandlers=new Map;queuedPropUpdates=new Set;connectHandlers=new Set;disconnectHandlers=new Set;rafs=new Map;timeouts=new Map;constructor(){super(),this.globalHandleKeydown=this.globalHandleKeydown.bind(this),this.globalHandleMousedown=this.globalHandleMousedown.bind(this),this.globalHandleMousemove=this.globalHandleMousemove.bind(this),p||(p=new ResizeObserver((e=>{e.forEach((e=>{const t=m.get(e.target);t&&t(e)}))}))),g||(g=new IntersectionObserver((e=>{e.forEach((e=>{const t=b.get(e.target);t&&t(e)}))}))),u||(u=!0,document.addEventListener("keydown",this.globalHandleKeydown),document.addEventListener("mousedown",this.globalHandleMousedown),document.addEventListener("mousemove",this.globalHandleMousemove))}connectedCallback(){this.connectHandlers.forEach((e=>e()))}disconnectedCallback(){this.rafs.forEach((e=>cancelAnimationFrame(e))),this.rafs.clear(),this.timeouts.forEach((e=>clearTimeout(e))),this.timeouts.clear(),this.disconnectHandlers.forEach((e=>e()))}onConnect(e){this.connectHandlers.add(e)}onDisconnect(e){this.disconnectHandlers.add(e)}onResize(e,t,s){this.connectHandlers.add((()=>{m.set(t,s.bind(e)),p.observe(t),this.disconnectHandlers.add((()=>{m.delete(t),p.unobserve(t)}))}))}onIntersection(e,t){this.connectHandlers.add((()=>{b.set(e,t),g.observe(e),this.disconnectHandlers.add((()=>{b.delete(e),g.unobserve(e)}))}))}onPropChange(t,s,n=null){n?this.requiredProperties.push(...n):this.requiredProperties.push(...s),this.queueMissingPropsWarning(this),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(t),Object.defineProperty(this,s,{set(t){const n=this.storedProperties.has(s)?e(this.storedProperties.get(s)):null;this.storedProperties.set(s,t),this.queueHandlers({prop:s,oldValue:n,newValue:t,context:this})},get(){return this.storedProperties.get(s)}})}))}queueHandlers({prop:e,oldValue:t,newValue:s}){this.hasRequiredProps=this.requiredProperties.every((e=>this.storedProperties.has(e))),this.hasRequiredProps?(this.queuedPropUpdates.size&&(this.queuedPropUpdates.delete(e),this.runQueuedPropHandlers()),this.propChangeHandlers.get(e).forEach((n=>{n.call(this,{changedProp:e,oldValue:t,newValue:s})}))):this.queuedPropUpdates.add(e)}runQueuedPropHandlers(){this.queuedPropUpdates.forEach((e=>{this.propChangeHandlers.get(e).forEach((t=>{t.call(this,{changedProp:e,oldValue:null,newValue:this[e]})}))})),this.queuedPropUpdates.clear()}globalHandleKeydown(e){"Tab"===e.key&&this.updateState({keyboardNavEnabled:!0})}globalHandleMousedown(e){0===e.clientX&&0===e.clientY||this.updateState({keyboardNavEnabled:!1})}globalHandleMousemove(e){e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||0===e.movementX||0===e.movementY||this.updateState({keyboardNavEnabled:!1})}get state(){return h}set state(e){throw new Error("Shared state cannot be set directly. Use this.updateState() instead.")}updateState(t){const s=e(h);h={...h,...t},f.forEach((e=>e({changedProps:Object.keys(t),oldState:s,newState:h})))}onStateChange(e){this.connectHandlers.add((()=>{const t=e.bind(this);f.add(t),this.disconnectHandlers.add((()=>f.delete(t)))}))}raf(e,t){const s=requestAnimationFrame((()=>{e(),this.rafs.delete(t)}));return this.rafs.set(t,s),s}cancelRaf(e){cancelAnimationFrame(this.rafs.get(e)),this.rafs.delete(e)}to(e,t,s){const n=setTimeout((()=>{e(),this.timeouts.delete(s)}),t);return this.timeouts.set(s,n),n}cancelTo(e){clearTimeout(this.timeouts.get(e)),this.timeouts.delete(e)}queueMissingPropsWarning(e){this.cancelRaf("baseElementMissingPropsWarning"),this.raf((()=>{if(this.requiredProperties.length&&!this.hasRequiredProps){const t=this.requiredProperties.filter((e=>!this.storedProperties.has(e)));console.error(`${e.label||e.tagName} is missing required props: ${t.join(", ")}`)}}),"baseElementMissingPropsWarning")}}function y(e){let{type:t="div",classes:s=[],contents:n=[],attributes:r={},props:o={},style:i={},listeners:a={}}=e;s=Array.isArray(s)?s:[s];const d=document.createElement(t);return Array.isArray(n)||(n=[n]),n=n.filter((e=>null!=e)).map((e=>{if("string"==typeof e&&e.includes("</svg>")){const t=document.createElement("template");return t.innerHTML=e,t.content}return e})),d.replaceChildren(...n),s.length&&(d.className=s.join(" ")),Object.keys(r).forEach((e=>{d.setAttribute(e,r[e])})),Object.assign(d,o),Object.keys(i).forEach((e=>{d.style[e]=i[e]})),Object.keys(a).forEach((e=>{d.addEventListener(e,a[e])})),d}class v extends w{label="BeholdWidget";#e;#t;#s;static get observedAttributes(){return["feed-id"]}constructor(){super(),this.#e=this.attachShadow({mode:"open"}),this.#t=null,this.onPropChange(this.handlePropChange,["feed-id","widgetSettings","feedMetadata","posts","previewLoadingColors"],[]),this.onConnect((()=>{}))}attributeChangedCallback(e,t,s){"feed-id"===e&&s!==t&&this.#n(s)}handlePropChange({changedProp:e,oldValue:t,newValue:s}){"widgetSettings"===e&&s?.type!==t?.type?this.#r(s?.type):this.#s&&(this.#s[e]=s)}async#r(e){"classic"===e&&(e="grid");const t=(await this.#o(e.replace(/.?/,(e=>e.toUpperCase())))).register(),s=y({type:t}),n=y({type:"style",contents:":host{box-sizing:border-box;margin:0;min-width:50px;overflow:hidden;position:relative;width:100%}:host *{box-sizing:border-box}:host([hidden]){display:none}".toString()});this.#e.replaceChildren(s,n),this.#s=this.#e.querySelector(t),this.#s.widgetSettings=this.widgetSettings,this.#s.feedMetadata=this.feedMetadata,this.#s.posts=this.posts,window.dispatchEvent(new CustomEvent("behold:widget-loaded",{detail:{id:this["feed-id"]}}))}async#n(e){if(e){this.#t&&this.#t.abort(),this.#t=new AbortController;try{const t=await fetch(`https://feeds.behold.so/${e}`,{signal:this.#t.signal}),s=await t.json();this.widgetSettings=s.widgetSettings,this.feedMetadata={username:s.username,profilePictureUrl:s.profilePictureUrl,website:s.website,followersCount:s.followersCount,hashtags:s.hashtags},this.posts=s.media}catch(e){"The user aborted a request."!==e.message&&console.log(e)}}else console.log("getFeed requires a feed id")}async#o(e){const{default:t}=await function(e){switch(e){case"./widgets/GalleryWall.ts":return import("./GalleryWall-nNT-7SSo.js");case"./widgets/Grid.ts":return import("./Grid-tQwJ4eYL.js");default:return new Promise((function(t,s){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(s.bind(null,new Error("Unknown variable dynamic import: "+e)))}))}}(`./widgets/${e}.ts`);return t}static register(e="behold-widget"){return customElements.get(e)||customElements.define(e,class extends v{}),e}}export{w as B,l as a,i as b,y as c,o as d,n as e,t as f,r as g,c as h,v as i,s as p,d as s,a as t};
1
+ function e(e){return JSON.parse(JSON.stringify(e))}function t(){return document.body.offsetTop}async function s(e,t){const s=document.createElement(e);return new Promise(((n,r)=>{switch(e){case"img":s.addEventListener("load",(()=>{n(t)}));break;case"video":s.addEventListener("loadeddata",(()=>n(t)))}s.addEventListener("error",(e=>{r(e)})),s.src=t}))}function n({text:e,maxLines:t=2,maxChars:s=50}){if(!e)return;const n=e.match(/.*/g).filter((e=>e.length>0)).slice(0,t).join("").length,r=Math.min(n,s);return e.slice(0,r)}function r(e,t){return`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${e}' height='${t}'%3E%3C/svg%3E%0A`}function o(e){return new Promise((t=>{let s=new IntersectionObserver((e=>{let n=e.reduce(((e,t,s)=>t.intersectionRatio>e.intersectionRatio?{index:s,intersectionRatio:t.intersectionRatio}:e),{intersectionRatio:0,index:null});s.disconnect(),s=null,t(n.index)}));e.forEach((e=>s.observe(e)))}))}function i(e){return e.isConnected?"#document"===e.nodeName||e instanceof ShadowRoot?e:i(e.parentNode):document}function a(e,t,s=null){let n=!1,r=null;return(...o)=>{n?(clearTimeout(r),r=setTimeout((()=>{n=!1,e.apply(s,o)}),t)):(e.apply(s,o),n=!0,setTimeout((()=>{n=!1}),t))}}function d(e,t){Object.entries(t).forEach((([t,s])=>{s?e.classList.add(t):e.classList.remove(t)}))}function l(e,t,s){e.style.setProperty(t,s)}function c(e,t,s){return"string"==typeof s&&(s=[s]),s.reduce(((s,n)=>e?.[n]!==t?.[n]||s),!1)}let h={isMuted:!0,popoverOverlayColor:"rgba(0, 0, 0, 0.6)",keyboardNavEnabled:!1},u=!1,p=null,g=null;const m=new Map,b=new Map,f=new Set;class w extends HTMLElement{label="BaseElement";storedProperties=new Map;requiredProperties=[];hasRequiredProps=!1;propChangeHandlers=new Map;queuedPropUpdates=new Set;connectHandlers=new Set;disconnectHandlers=new Set;rafs=new Map;timeouts=new Map;constructor(){super(),this.globalHandleKeydown=this.globalHandleKeydown.bind(this),this.globalHandleMousedown=this.globalHandleMousedown.bind(this),this.globalHandleMousemove=this.globalHandleMousemove.bind(this),p||(p=new ResizeObserver((e=>{e.forEach((e=>{const t=m.get(e.target);t&&t(e)}))}))),g||(g=new IntersectionObserver((e=>{e.forEach((e=>{const t=b.get(e.target);t&&t(e)}))}))),u||(u=!0,document.addEventListener("keydown",this.globalHandleKeydown),document.addEventListener("mousedown",this.globalHandleMousedown),document.addEventListener("mousemove",this.globalHandleMousemove))}connectedCallback(){this.connectHandlers.forEach((e=>e()))}disconnectedCallback(){this.rafs.forEach((e=>cancelAnimationFrame(e))),this.rafs.clear(),this.timeouts.forEach((e=>clearTimeout(e))),this.timeouts.clear(),this.disconnectHandlers.forEach((e=>e()))}onConnect(e){this.connectHandlers.add(e)}onDisconnect(e){this.disconnectHandlers.add(e)}onResize(e,t,s){this.connectHandlers.add((()=>{m.set(t,s.bind(e)),p.observe(t),this.disconnectHandlers.add((()=>{m.delete(t),p.unobserve(t)}))}))}onIntersection(e,t){this.connectHandlers.add((()=>{b.set(e,t),g.observe(e),this.disconnectHandlers.add((()=>{b.delete(e),g.unobserve(e)}))}))}onPropChange(t,s,n=null){n?this.requiredProperties.push(...n):this.requiredProperties.push(...s),this.queueMissingPropsWarning(this),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(t),Object.defineProperty(this,s,{set(t){const n=this.storedProperties.has(s)?e(this.storedProperties.get(s)):null;this.storedProperties.set(s,t),this.queueHandlers({prop:s,oldValue:n,newValue:t,context:this})},get(){return this.storedProperties.get(s)}})}))}queueHandlers({prop:e,oldValue:t,newValue:s}){this.hasRequiredProps=this.requiredProperties.every((e=>this.storedProperties.has(e))),this.hasRequiredProps?(this.queuedPropUpdates.size&&(this.queuedPropUpdates.delete(e),this.runQueuedPropHandlers()),this.propChangeHandlers.get(e).forEach((n=>{n.call(this,{changedProp:e,oldValue:t,newValue:s})}))):this.queuedPropUpdates.add(e)}runQueuedPropHandlers(){this.queuedPropUpdates.forEach((e=>{this.propChangeHandlers.get(e).forEach((t=>{t.call(this,{changedProp:e,oldValue:null,newValue:this[e]})}))})),this.queuedPropUpdates.clear()}globalHandleKeydown(e){"Tab"===e.key&&this.updateState({keyboardNavEnabled:!0})}globalHandleMousedown(e){0===e.clientX&&0===e.clientY||this.updateState({keyboardNavEnabled:!1})}globalHandleMousemove(e){e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||0===e.movementX||0===e.movementY||this.updateState({keyboardNavEnabled:!1})}get state(){return h}set state(e){throw new Error("Shared state cannot be set directly. Use this.updateState() instead.")}updateState(t){const s=e(h);h={...h,...t},f.forEach((e=>e({changedProps:Object.keys(t),oldState:s,newState:h})))}onStateChange(e){this.connectHandlers.add((()=>{const t=e.bind(this);f.add(t),this.disconnectHandlers.add((()=>f.delete(t)))}))}raf(e,t){const s=requestAnimationFrame((()=>{e(),this.rafs.delete(t)}));return this.rafs.set(t,s),s}cancelRaf(e){cancelAnimationFrame(this.rafs.get(e)),this.rafs.delete(e)}to(e,t,s){const n=setTimeout((()=>{e(),this.timeouts.delete(s)}),t);return this.timeouts.set(s,n),n}cancelTo(e){clearTimeout(this.timeouts.get(e)),this.timeouts.delete(e)}queueMissingPropsWarning(e){this.cancelRaf("baseElementMissingPropsWarning"),this.raf((()=>{if(this.requiredProperties.length&&!this.hasRequiredProps){const t=this.requiredProperties.filter((e=>!this.storedProperties.has(e)));console.error(`${e.label||e.tagName} is missing required props: ${t.join(", ")}`)}}),"baseElementMissingPropsWarning")}}function y(e){let{type:t="div",classes:s=[],contents:n=[],attributes:r={},props:o={},style:i={},listeners:a={}}=e;s=Array.isArray(s)?s:[s];const d=document.createElement(t);return Array.isArray(n)||(n=[n]),n=n.filter((e=>null!=e)).map((e=>{if("string"==typeof e&&e.includes("</svg>")){const t=document.createElement("template");return t.innerHTML=e,t.content}return e})),d.replaceChildren(...n),s.length&&(d.className=s.join(" ")),Object.keys(r).forEach((e=>{d.setAttribute(e,r[e])})),Object.assign(d,o),Object.keys(i).forEach((e=>{d.style[e]=i[e]})),Object.keys(a).forEach((e=>{d.addEventListener(e,a[e])})),d}class v extends w{label="BeholdWidget";#e;#t;#s;static get observedAttributes(){return["feed-id"]}constructor(){super(),this.#e=this.attachShadow({mode:"open"}),this.#t=null,this.onPropChange(this.handlePropChange,["feed-id","widgetSettings","feedMetadata","posts","previewLoadingColors"],[]),this.onConnect((()=>{}))}attributeChangedCallback(e,t,s){"feed-id"===e&&s!==t&&this.#n(s)}handlePropChange({changedProp:e,oldValue:t,newValue:s}){"widgetSettings"===e&&s?.type!==t?.type?this.#r(s?.type):this.#s&&(this.#s[e]=s)}async#r(e){"classic"===e&&(e="grid");const t=(await this.#o(e.replace(/.?/,(e=>e.toUpperCase())))).register(),s=y({type:t}),n=y({type:"style",contents:":host{box-sizing:border-box;margin:0;min-width:50px;overflow:hidden;position:relative;width:100%}:host *{box-sizing:border-box}:host([hidden]){display:none}".toString()});this.#e.replaceChildren(s,n),this.#s=this.#e.querySelector(t),this.#s.widgetSettings=this.widgetSettings,this.#s.feedMetadata=this.feedMetadata,this.#s.posts=this.posts,window.dispatchEvent(new CustomEvent("behold:widget-loaded",{detail:{id:this["feed-id"]}}))}async#n(e){if(e){this.#t&&this.#t.abort(),this.#t=new AbortController;try{const t=await fetch(`https://feeds.behold.so/${e}`,{signal:this.#t.signal}),s=await t.json();this.widgetSettings=s.widgetSettings,this.feedMetadata={username:s.username,profilePictureUrl:s.profilePictureUrl,website:s.website,followersCount:s.followersCount,hashtags:s.hashtags},this.posts=s.media}catch(e){"The user aborted a request."!==e.message&&console.log(e)}}else console.log("getFeed requires a feed id")}async#o(e){const{default:t}=await function(e){switch(e){case"./widgets/GalleryWall.ts":return import("./GalleryWall-ep4jn4uc.js");case"./widgets/Grid.ts":return import("./Grid-SFwAhs-W.js");default:return new Promise((function(t,s){("function"==typeof queueMicrotask?queueMicrotask:setTimeout)(s.bind(null,new Error("Unknown variable dynamic import: "+e)))}))}}(`./widgets/${e}.ts`);return t}static register(e="behold-widget"){return customElements.get(e)||customElements.define(e,class extends v{}),e}}export{w as B,l as a,i as b,y as c,o as d,n as e,t as f,r as g,c as h,v as i,s as p,d as s,a as t};
package/dist/BeholdWidget.js CHANGED
@@ -1 +1 @@
1
- export{i as default}from"./BeholdWidget-IH-1-Zxz.js";
1
+ export{i as default}from"./BeholdWidget-tZ68JBrA.js";
package/dist/GalleryWall-ep4jn4uc.js ADDED
@@ -0,0 +1 @@
1
+ import{c as t,s as e,a as s,f as i,t as o}from"./BeholdWidget-tZ68JBrA.js";import{B as a,I as n,V as h,A as l,s as r,g as d}from"./Grid-Y5E3_F0F.js";var p={popupColorTheme:"auto",hoverOverlayColor:"auto",hoverOverlayCustomColor:"0,0,0",hoverOverlayOpacity:65};class g extends a{label="GalleryWall";widgetSettings=p;feedMetadata;posts;previewLoadingColors=null;containerEl;heightRefEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.handlePropChange,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),n.register(),h.register(),l.register(),this.handlePostClick=this.handlePostClick.bind(this),this.addEventListener("post-focus-next",this.handleFocusNextPost),this.addEventListener("post-focus-previous",this.handleFocusPreviousPost),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,[r,".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;user-select:none;width:100px}"]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this.containerEl,this.handleResize)}))}handlePropChange({changedProp:t}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.handlePostsChange();break;case"widgetSettings":this.handleSettingsChange();break;case"feedMetadata":this.handleMetadataChange();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),e(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}handlePostsChange(){this.postEls=[],this.renderBreakpoint(this.appliedBreakpoint,!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}handleSettingsChange(){"openPopupGallery"===this.widgetSettings.onPostClick&&this.enablePopoverGallery(),this.renderBreakpoint(this.widgetSettings.breakpoints.default),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings}))}handleMetadataChange(){this.postEls.forEach((t=>{t.feedMetadata=this.feedMetadata}))}setup(){if("transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter((t=>t.colorPalette)).map((t=>t.colorPalette));this.medianPaletteHSL=d(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-FTEH7t-X.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]}})}handleResize(t){const e=t.contentBoxSize?.[0]?.inlineSize,s=this.widgetSettings.breakpoints,i=this.getMatchingBreakpoint(e,s);this.renderBreakpoint(i)}handleFocusPreviousPost(){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()}handleFocusNextPost(){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()}handlePostClick(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.cancelRaf("renderPosts"),this.postEls=this.createPostEls(t),this.raf((()=>{this.heightRefEl.replaceChildren(...this.postEls)}),"renderPosts")}getMatchingBreakpoint(t,e){return Object.entries(e).map((([t,e])=>({width:t,...e}))).filter((t=>"default"!==t.width)).sort(((t,e)=>e.width.localeCompare(t.width))).reduce(((e,s)=>t<=parseInt(s.width)?s:e),{...e.default,numPosts:this.posts.length})}renderBreakpoint(t,e=!1){this.postEls||(e=!0);const o=this.appliedBreakpoint;this.appliedBreakpoint=t;const{gap:a,borderRadius:n,numPosts:h,galleryWallLayout:l,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),s(this.containerEl,"--post-border-radius",`${n}%`),(o?.numPosts!==h||o?.galleryWallNamedLayout!==r.toString()||e)&&this.renderPosts(t);const d=this.containerEl.offsetWidth,p=parseInt(a.x)/1e3*d,g=parseInt(a.y)/1e3*d;this.postEls.forEach(((t,e)=>{const[s,i,o,a]=l?.[e]?l[e].split(",").map((t=>parseInt(t))):[0,0,10,10],n=s*(d/100)+p/2,h=i*(d/100);t.style.transform=`translate(${n}px, ${h}px`,t.style.width=o*(d/100)-p+"px",t.style.height=a*(d/100)-g+"px"})),i(),this.raf((()=>{this.setContainerHeight()}),"setContainerHeight")}createPostEls(e){const{gap:s}=e,i=e?.numPosts||this.posts?.length||200;return this.posts.filter(((t,e)=>e<i)).map((i=>{let o="behold-image-post";"VIDEO"===i.mediaType&&(o="behold-video-post"),"CAROUSEL_ALBUM"===i.mediaType&&(o="behold-album-post");return t({type:o,style:{borderRadius:`${e.borderRadius}%`},props:{post:i,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.handlePostClick,hasRowGap:"0"!=`${s.y}`}})}))}setContainerHeight=o((()=>{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-tQwJ4eYL.js → Grid-SFwAhs-W.js} RENAMED
@@ -1 +1 @@
1
- import{c as t,s as e,f as s,a as i}from"./BeholdWidget-IH-1-Zxz.js";import{B as a,I as o,V as n,A as h,s as r,g as l}from"./Grid-tNDy9g9K.js";var d={popupColorTheme:"auto",hoverOverlayColor:"auto",hoverOverlayCustomColor:"0,0,0",hoverOverlayOpacity:65};class p extends a{label="Grid";widgetSettings=d;feedMetadata;posts;previewLoadingColors=null;containerEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.handlePropChange,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),o.register(),n.register(),h.register(),this.handlePostClick=this.handlePostClick.bind(this),this.addEventListener("post-focus-next",this.handleFocusNextPost),this.addEventListener("post-focus-previous",this.handleFocusPreviousPost),this.onConnect((()=>{this.containerEl=t({type:"figure",classes:"posts"}),this.renderWidget(this.containerEl,[r]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this,this.handleResize)}))}handlePropChange({changedProp:t}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.handlePostsChange();break;case"widgetSettings":this.handleSettingsChange();break;case"feedMetadata":this.handleMetadataChange();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),e(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}handlePostsChange(){this.postEls=[],this.renderBreakpoint(this.appliedBreakpoint,!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}handleSettingsChange(){"openPopupGallery"===this.widgetSettings.onPostClick&&this.enablePopoverGallery();const t=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(t),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings}))}handleMetadataChange(){this.postEls.forEach((t=>{t.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(){const{default:t}=await import("./PopoverGallery-5aBK27WQ.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]}})}handleResize(t){const e=t.contentBoxSize?.[0]?.inlineSize,s=this.widgetSettings.breakpoints,i=this.getMatchingBreakpoint(e,s);this.renderBreakpoint(i)}handleFocusPreviousPost(){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()}handleFocusNextPost(){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()}handlePostClick(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.cancelRaf("renderPosts"),this.postEls=this.createPostEls(t),this.raf((()=>{this.containerEl.replaceChildren(...this.postEls)}),"renderPosts")}getMatchingBreakpoint(t,e){return Object.entries(e).map((([t,e])=>({width:t,...e}))).filter((t=>"default"!==t.width)).sort(((t,e)=>e.width.localeCompare(t.width))).reduce(((e,s)=>t<=parseInt(s.width)?s:e),{...e.default,numPosts:this.posts.length})}renderBreakpoint(t,e=!1){this.postEls||(e=!0);const a=this.appliedBreakpoint,{numColumns:o,gap:n,borderRadius:h,numPosts:r}=t;switch(a?.numPosts>r&&(this.containerEl.replaceChildren(),s()),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(${o}, 1fr)`,this.containerEl.style.gap=`${n.y}px ${n.x}px`,this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),i(this.containerEl,"--post-border-radius",`${h}%`),(a?.numPosts!==r||e)&&this.renderPosts(t),this.postEls.forEach(((e,s)=>{e.hasRowGap="0"!=`${t.gap.y}`})),this.appliedBreakpoint=t}createPostEls(e){const{numPosts:s,numColumns:i,gap:a}=e;return this.posts.filter(((t,s)=>s<(e?.numPosts||this.posts?.length||200))).map(((e,o)=>{const n=Math.ceil((s||this.posts.length)/i);let h="behold-image-post";"VIDEO"===e.mediaType&&(h="behold-video-post"),"CAROUSEL_ALBUM"===e.mediaType&&(h="behold-album-post");return t({type:h,props:{post:e,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.handlePostClick,hasRowGap:"0"!=`${a.y}`,isLastRow:Math.ceil((o+1)/i)===n}})}))}static register(t="behold-grid"){return customElements.get(t)||customElements.define(t,p),t}}export{p as default};
1
+ import{c as t,s as e,f as s,a as i}from"./BeholdWidget-tZ68JBrA.js";import{B as a,I as o,V as n,A as h,s as r,g as l}from"./Grid-Y5E3_F0F.js";var d={popupColorTheme:"auto",hoverOverlayColor:"auto",hoverOverlayCustomColor:"0,0,0",hoverOverlayOpacity:65};class p extends a{label="Grid";widgetSettings=d;feedMetadata;posts;previewLoadingColors=null;containerEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.handlePropChange,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),o.register(),n.register(),h.register(),this.handlePostClick=this.handlePostClick.bind(this),this.addEventListener("post-focus-next",this.handleFocusNextPost),this.addEventListener("post-focus-previous",this.handleFocusPreviousPost),this.onConnect((()=>{this.containerEl=t({type:"figure",classes:"posts"}),this.renderWidget(this.containerEl,[r]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this,this.handleResize)}))}handlePropChange({changedProp:t}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.handlePostsChange();break;case"widgetSettings":this.handleSettingsChange();break;case"feedMetadata":this.handleMetadataChange();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),e(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}handlePostsChange(){this.postEls=[],this.renderBreakpoint(this.appliedBreakpoint,!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}handleSettingsChange(){"openPopupGallery"===this.widgetSettings.onPostClick&&this.enablePopoverGallery();const t=this.getMatchingBreakpoint(this.offsetWidth,this.widgetSettings.breakpoints);this.renderBreakpoint(t),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings}))}handleMetadataChange(){this.postEls.forEach((t=>{t.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(){const{default:t}=await import("./PopoverGallery-FTEH7t-X.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]}})}handleResize(t){const e=t.contentBoxSize?.[0]?.inlineSize,s=this.widgetSettings.breakpoints,i=this.getMatchingBreakpoint(e,s);this.renderBreakpoint(i)}handleFocusPreviousPost(){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()}handleFocusNextPost(){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()}handlePostClick(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.cancelRaf("renderPosts"),this.postEls=this.createPostEls(t),this.raf((()=>{this.containerEl.replaceChildren(...this.postEls)}),"renderPosts")}getMatchingBreakpoint(t,e){return Object.entries(e).map((([t,e])=>({width:t,...e}))).filter((t=>"default"!==t.width)).sort(((t,e)=>e.width.localeCompare(t.width))).reduce(((e,s)=>t<=parseInt(s.width)?s:e),{...e.default,numPosts:this.posts.length})}renderBreakpoint(t,e=!1){this.postEls||(e=!0);const a=this.appliedBreakpoint,{numColumns:o,gap:n,borderRadius:h,numPosts:r}=t;switch(a?.numPosts>r&&(this.containerEl.replaceChildren(),s()),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(${o}, 1fr)`,this.containerEl.style.gap=`${n.y}px ${n.x}px`,this.containerEl.setAttribute("data-hover-effect",this.widgetSettings.hoverEffect),i(this.containerEl,"--post-border-radius",`${h}%`),(a?.numPosts!==r||e)&&this.renderPosts(t),this.postEls.forEach(((e,s)=>{e.hasRowGap="0"!=`${t.gap.y}`})),this.appliedBreakpoint=t}createPostEls(e){const{numPosts:s,numColumns:i,gap:a}=e;return this.posts.filter(((t,s)=>s<(e?.numPosts||this.posts?.length||200))).map(((e,o)=>{const n=Math.ceil((s||this.posts.length)/i);let h="behold-image-post";"VIDEO"===e.mediaType&&(h="behold-video-post"),"CAROUSEL_ALBUM"===e.mediaType&&(h="behold-album-post");return t({type:h,props:{post:e,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.handlePostClick,hasRowGap:"0"!=`${a.y}`,isLastRow:Math.ceil((o+1)/i)===n}})}))}static register(t="behold-grid"){return customElements.get(t)||customElements.define(t,p),t}}export{p as default};
package/dist/{Grid-tNDy9g9K.js → Grid-Y5E3_F0F.js} RENAMED
@@ -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,p as n}from"./BeholdWidget-IH-1-Zxz.js";function h(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=>h(e).join(",")));var s,i;return[l(c(o,0)),l(c(o,1)),l(c(o,2))]}function l(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 c(e,t){return e.map((e=>parseInt(e.split(",")[t])))}class p extends e{label="BaseWidget";shadow;styleEl;stylesAdded;contents;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.styleEl=document.createElement("style"),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.onStateChange((()=>{t(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{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 f(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=1.6,r=h(t.dominant)[2]-s[2],Math.log(Math.abs(r))/Math.log(a)*Math.sign(r));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,r;return i}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;innerEl;captionEl;sizeClass="post--xlarge";constructor(){super(),this.onPropChange(this.baseHandlePropChange,["post","widgetSettings","feedMetadata","medianPaletteHSL","hasRowGap","isLastRow","previewLoadingColors"],["post","widgetSettings","feedMetadata","medianPaletteHSL"]),this.handleButtonClick=this.handleButtonClick.bind(this),this.onConnect((()=>{this.onResize(this,this,this.handleResize)}))}baseHandlePropChange({changedProp:e,oldValue:t,newValue:s}){switch(e){case"widgetSettings":s.loadingColor===t?.loadingColor&&s.loadingColorTone===t?.loadingColorTone||this.setBackgroundColor(),o(s,t,["onHover","linkTarget","previewVideosOnHover","onPostClick","customLinkURL"])&&this.renderPost(),o(s,t,["hoverOverlayColor","hoverOverlayCustomColor","hoverOverlayOpacity"])&&this.setOverlayColor();break;case"previewLoadingColors":this.setBackgroundColor();break;case"widgetSettings":case"hasRowGap":case"isLastRow":this.setContainerStyles()}}setOverlayColor(){let e="rgba(0, 0, 0, 0.3)";if("auto"===this.widgetSettings.hoverOverlayColor){const t=h(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)}% / ${this.widgetSettings.hoverOverlayOpacity/100})`}if("custom"===this.widgetSettings.hoverOverlayColor){const t=this.widgetSettings.hoverOverlayCustomColor.split(",");e=`hsl(${t[0]} ${t[1]}% ${t[2]}% / ${this.widgetSettings.hoverOverlayOpacity/100})`}s(this,"--overlay-color",e)}setContainerStyles(){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.setOverlayColor()}renderPost(e){if(!e){e=[...this.innerEl.children].filter((e=>e!==this.captionEl))[0]}let t="div",o=this.post.permalink;this.setContainerStyles(),"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"})}this.innerEl=i({type:t,contents:[e,s||""],attributes:{"aria-label":"Instagram post",tabindex:-1,..."a"===t?{href:o,target:this.widgetSettings.linkTarget}:{}},listeners:{..."button"===t?{click:this.handleButtonClick}:{}}}),this.replaceChildren(this.innerEl)}setBackgroundColor(){const e=this.previewLoadingColors??this.widgetSettings.loadingColor;this.style.backgroundColor=f(e,this.post.colorPalette,this.widgetSettings.loadingColorTone,this.medianPaletteHSL)}focus(){this.innerEl.focus()}handleResize(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.sizeClass=`post--${e}`,t(this,{[this.sizeClass]:e===s})}))}handleButtonClick(){this.onClick&&this.onClick(this)}}class u extends e{label="Image";sizes;mediaUrl;isSquare;imageSrc;imageSize;imageEl;isVisible=!1;isLoaded=!1;constructor(){super(),this.onPropChange(this.handlePropChange,["sizes","mediaUrl","imageSrc","imageSize","isSquare"],["sizes","mediaUrl","isSquare"]),this.handleIntersection=this.handleIntersection.bind(this),this.handleImageLoad=this.handleImageLoad.bind(this),this.onConnect((()=>{this.onResize(this,this,this.handleResize),this.onIntersection(this,this.handleIntersection)}))}handlePropChange({changedProp:e,oldValue:t,newValue:o}){if(!this.imageEl){const e=this.sizes.full.height,t=this.sizes.full.width;this.imageEl=i({type:"img",attributes:{alt:"",role:"presentation",height:this.isSquare?"100px":e+"px",width:this.isSquare?"100px":t+"px",tabindex:-1,src:a(t,e)}}),this.replaceChildren(this.imageEl)}switch(e){case"imageSize":if(!t||t.width<o.width||!this.isLoaded){const e=this.mediaUrl;this.imageSrc=o?.mediaUrl||e}break;case"imageSrc":this.isVisible&&(this.imageEl.src=this.imageSrc)}}handleIntersection(e){e.isIntersecting?(this.imageEl.addEventListener("load",this.handleImageLoad),this.isVisible=!0,this.imageSrc&&this.imageEl.src!==this.imageSrc&&(this.imageEl.src=this.imageSrc)):this.isVisible=!1}handleResize(e){const t=e?.borderBoxSize?.[0]?.inlineSize||0,o=Object.entries(this.sizes).reduce((function(e,o){return Math.abs(o[1].width/2-t)<Math.abs(e[1].width/2-t)?o:e}));this.imageSize=o[1]}handleImageLoad(){this.isLoaded||(this.isLoaded=!0,this.dispatchEvent(new Event("load")),this.raf((()=>{this.classList.add("is-loaded")}),"handleImageLoad"))}preload(){this.isLoaded||(this.imageEl.addEventListener("load",this.handleImageLoad),this.imageSrc&&this.imageEl.src!==this.imageSrc&&(this.imageEl.src=this.imageSrc))}static register(e="behold-image"){return customElements.get(e)||customElements.define(e,u),e}}class b extends m{label="ImagePost";imageEl;constructor(){super(),this.onPropChange(this.handlePropChange,["post"]),u.register()}handlePropChange({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post,o=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}});this.renderPost(o)}}static register(e="behold-image-post"){return customElements.get(e)||customElements.define(e,b),e}}class g extends e{label="Video";mediaUrl;sizes;videoEl;imageEl;isLoaded=!1;isMuted=!0;constructor(){super(),this.onPropChange((()=>{}),["mediaUrl","sizes"]),this.handleIntersection=this.handleIntersection.bind(this),this.handleVideoLoad=this.handleVideoLoad.bind(this),this.handlePageVisibility=this.handlePageVisibility.bind(this),document.addEventListener("visibilitychange",this.handlePageVisibility),this.onIntersection(this,this.handleIntersection),this.onConnect((()=>{this.render()})),this.onDisconnect((()=>{document.removeEventListener("visibilitychange",this.handlePageVisibility)}))}get isPlaying(){return!!(this.videoEl.currentTime>0&&!this.videoEl.paused&&!this.videoEl.ended&&this.videoEl.readyState>2)}get paused(){return this.videoEl?.paused}get muted(){return this.videoEl?.muted}render(){this.videoEl=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.isMuted}}),this.imageEl=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.videoEl.addEventListener("play",(()=>{this.dispatchEvent(new Event("play"))})),this.videoEl.addEventListener("pause",(()=>{this.dispatchEvent(new Event("pause"))})),this.replaceChildren(this.imageEl)}handleIntersection(e){e.isIntersecting?this.videoEl.src!==this.mediaUrl&&(this.videoEl.addEventListener("loadeddata",this.handleVideoLoad,{once:!0}),this.videoEl.src=this.mediaUrl):this.pause()}handleVideoLoad(){this.isLoaded=!0,this.videoEl.currentTime=.25,this.videoEl.pause(),this.dispatchEvent(new Event("load")),this.replaceChildren(this.videoEl),r(),this.raf((()=>{this.classList.add("is-loaded")}),"handleVideoLoad")}async play(){if(this.videoEl)try{await this.videoEl.play()}catch(e){}}pause(){this.videoEl&&this.videoEl.pause()}mute(){this.isMuted=!0,this.videoEl&&(this.videoEl.muted=!0)}unmute(){this.isMuted=!1,this.videoEl&&(this.videoEl.muted=!1)}handlePageVisibility(){document.hidden&&this.pause()}preload(){this.isLoaded||n("video",this.mediaUrl)}static register(e="behold-video"){return customElements.get(e)||customElements.define(e,g),e}}class y extends m{label="VideoPost";videoEl;imageEl;constructor(){super(),this.onPropChange(this.handlePropChange,["post","widgetSettings"]),g.register(),u.register()}handlePropChange({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.videoEl=i({type:"behold-video",props:{mediaUrl:t,sizes:e}}),this.addEventListener("mouseover",(()=>this.videoEl?.play())),this.addEventListener("mouseleave",(()=>this.videoEl?.pause())),this.renderPost(this.videoEl)):(this.imageEl=i({type:"behold-image",props:{sizes:e,mediaUrl:o,isSquare:!0}}),this.renderPost(this.imageEl))}}static register(e="behold-video-post"){return customElements.get(e)||customElements.define(e,y),e}}class w extends m{label="AlbumPost";imageEl;constructor(){super(),this.onPropChange(this.handlePropChange,["post"]),u.register()}handlePropChange({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post,o=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}});this.renderPost(o)}}static register(e="behold-album-post"){return customElements.get(e)||customElements.define(e,w),e}}var k=":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;line-height:normal;margin:0 0 -1px;transform:translateZ(0);transition:background .3s ease;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 (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;border-radius:var(--post-border-radius);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 (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 (backdrop-filter:blur(3px)){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:before,[data-hover-effect=blur] .post:hover:before{backdrop-filter:blur(3px);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 (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 (backdrop-filter:blur(3px)){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:before,[data-hover-effect=zoomBlur] .post:hover:before{backdrop-filter:blur(3px);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:focus,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover,[data-hover-effect=fromGreyscale] .post:focus,[data-hover-effect=fromGreyscale] .post:hover{transition:all .6s cubic-bezier(.215,.61,.355,1)}: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)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-video,[data-hover-effect=fromGreyscale] .post:focus behold-image,[data-hover-effect=fromGreyscale] .post:focus behold-video,[data-hover-effect=fromGreyscale] .post:hover behold-image,[data-hover-effect=fromGreyscale] .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=fromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-video,[data-hover-effect=fromGreyscale] .post:focus behold-image,[data-hover-effect=fromGreyscale] .post:focus behold-video,[data-hover-effect=fromGreyscale] .post:hover behold-image,[data-hover-effect=fromGreyscale] .post:hover behold-video{transform:none}}: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%)}behold-image{border-radius:var(--post-border-radius);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;object-fit:cover;object-position:center center;opacity:0;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 (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{object-position:center 25%}behold-image.is-loaded img{opacity:1}behold-video{border-radius:var(--post-border-radius);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;object-fit:cover;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{object-position:center 25%}behold-video.is-loaded video{opacity:1}";export{w as A,p as B,b as I,h as R,y as V,g as a,u as b,d as g,k 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,p as n}from"./BeholdWidget-tZ68JBrA.js";function h(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=>h(e).join(",")));var s,i;return[l(c(o,0)),l(c(o,1)),l(c(o,2))]}function l(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 c(e,t){return e.map((e=>parseInt(e.split(",")[t])))}class p extends e{label="BaseWidget";shadow;styleEl;stylesAdded;contents;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.styleEl=document.createElement("style"),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.onStateChange((()=>{t(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{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 f(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=1.6,r=h(t.dominant)[2]-s[2],Math.log(Math.abs(r))/Math.log(a)*Math.sign(r));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,r;return i}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;innerEl;captionEl;sizeClass="post--xlarge";constructor(){super(),this.onPropChange(this.baseHandlePropChange,["post","widgetSettings","feedMetadata","medianPaletteHSL","hasRowGap","isLastRow","previewLoadingColors"],["post","widgetSettings","feedMetadata","medianPaletteHSL"]),this.handleButtonClick=this.handleButtonClick.bind(this),this.onConnect((()=>{this.onResize(this,this,this.handleResize)}))}baseHandlePropChange({changedProp:e,oldValue:t,newValue:s}){switch(e){case"widgetSettings":s.loadingColor===t?.loadingColor&&s.loadingColorTone===t?.loadingColorTone||this.setBackgroundColor(),o(s,t,["onHover","linkTarget","previewVideosOnHover","onPostClick","customLinkURL"])&&this.renderPost(),o(s,t,["hoverOverlayColor","hoverOverlayCustomColor","hoverOverlayOpacity"])&&this.setOverlayColor();break;case"previewLoadingColors":this.setBackgroundColor();break;case"widgetSettings":case"hasRowGap":case"isLastRow":this.setContainerStyles()}}setOverlayColor(){let e="rgba(0, 0, 0, 0.3)";if("auto"===this.widgetSettings.hoverOverlayColor){const t=h(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)}% / ${this.widgetSettings.hoverOverlayOpacity/100})`}if("custom"===this.widgetSettings.hoverOverlayColor){const t=this.widgetSettings.hoverOverlayCustomColor.split(",");e=`hsl(${t[0]} ${t[1]}% ${t[2]}% / ${this.widgetSettings.hoverOverlayOpacity/100})`}s(this,"--overlay-color",e)}setContainerStyles(){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.setOverlayColor()}renderPost(e){if(!e){e=[...this.innerEl.children].filter((e=>e!==this.captionEl))[0]}let t="div",o=this.post.permalink;this.setContainerStyles(),"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"})}this.innerEl=i({type:t,contents:[e,s||""],attributes:{"aria-label":"Instagram post",tabindex:-1,..."a"===t?{href:o,target:this.widgetSettings.linkTarget}:{}},listeners:{..."button"===t?{click:this.handleButtonClick}:{}}}),this.replaceChildren(this.innerEl)}setBackgroundColor(){const e=this.previewLoadingColors??this.widgetSettings.loadingColor;this.style.backgroundColor=f(e,this.post.colorPalette,this.widgetSettings.loadingColorTone,this.medianPaletteHSL)}focus(){this.innerEl.focus()}handleResize(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.sizeClass=`post--${e}`,t(this,{[this.sizeClass]:e===s})}))}handleButtonClick(){this.onClick&&this.onClick(this)}}class u extends e{label="Image";sizes;mediaUrl;isSquare;imageSrc;imageSize;imageEl;isVisible=!1;isLoaded=!1;constructor(){super(),this.onPropChange(this.handlePropChange,["sizes","mediaUrl","imageSrc","imageSize","isSquare"],["sizes","mediaUrl","isSquare"]),this.handleIntersection=this.handleIntersection.bind(this),this.handleImageLoad=this.handleImageLoad.bind(this),this.onConnect((()=>{this.onResize(this,this,this.handleResize),this.onIntersection(this,this.handleIntersection)}))}handlePropChange({changedProp:e,oldValue:t,newValue:o}){if(!this.imageEl){const e=this.sizes.full.height,t=this.sizes.full.width;this.imageEl=i({type:"img",attributes:{alt:"",role:"presentation",height:this.isSquare?"100px":e+"px",width:this.isSquare?"100px":t+"px",tabindex:-1,src:a(t,e)}}),this.replaceChildren(this.imageEl)}switch(e){case"imageSize":if(!t||t.width<o.width||!this.isLoaded){const e=this.mediaUrl;this.imageSrc=o?.mediaUrl||e}break;case"imageSrc":this.isVisible&&(this.imageEl.src=this.imageSrc)}}handleIntersection(e){e.isIntersecting?(this.imageEl.addEventListener("load",this.handleImageLoad),this.isVisible=!0,this.imageSrc&&this.imageEl.src!==this.imageSrc&&(this.imageEl.src=this.imageSrc)):this.isVisible=!1}handleResize(e){const t=e?.borderBoxSize?.[0]?.inlineSize||0,o=Object.entries(this.sizes).reduce((function(e,o){return Math.abs(o[1].width/2-t)<Math.abs(e[1].width/2-t)?o:e}));this.imageSize=o[1]}handleImageLoad(){this.isLoaded||(this.isLoaded=!0,this.dispatchEvent(new Event("load")),this.raf((()=>{this.classList.add("is-loaded")}),"handleImageLoad"))}preload(){this.isLoaded||(this.imageEl.addEventListener("load",this.handleImageLoad),this.imageSrc&&this.imageEl.src!==this.imageSrc&&(this.imageEl.src=this.imageSrc))}static register(e="behold-image"){return customElements.get(e)||customElements.define(e,u),e}}class b extends m{label="ImagePost";imageEl;constructor(){super(),this.onPropChange(this.handlePropChange,["post"]),u.register()}handlePropChange({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post,o=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}});this.renderPost(o)}}static register(e="behold-image-post"){return customElements.get(e)||customElements.define(e,b),e}}class g extends e{label="Video";mediaUrl;sizes;videoEl;imageEl;isLoaded=!1;isMuted=!0;constructor(){super(),this.onPropChange((()=>{}),["mediaUrl","sizes"]),this.handleIntersection=this.handleIntersection.bind(this),this.handleVideoLoad=this.handleVideoLoad.bind(this),this.handlePageVisibility=this.handlePageVisibility.bind(this),document.addEventListener("visibilitychange",this.handlePageVisibility),this.onIntersection(this,this.handleIntersection),this.onConnect((()=>{this.render()})),this.onDisconnect((()=>{document.removeEventListener("visibilitychange",this.handlePageVisibility)}))}get isPlaying(){return!!(this.videoEl.currentTime>0&&!this.videoEl.paused&&!this.videoEl.ended&&this.videoEl.readyState>2)}get paused(){return this.videoEl?.paused}get muted(){return this.videoEl?.muted}render(){this.videoEl=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.isMuted}}),this.imageEl=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.videoEl.addEventListener("play",(()=>{this.dispatchEvent(new Event("play"))})),this.videoEl.addEventListener("pause",(()=>{this.dispatchEvent(new Event("pause"))})),this.replaceChildren(this.imageEl)}handleIntersection(e){e.isIntersecting?this.videoEl.src!==this.mediaUrl&&(this.videoEl.addEventListener("loadeddata",this.handleVideoLoad,{once:!0}),this.videoEl.src=this.mediaUrl):this.pause()}handleVideoLoad(){this.isLoaded=!0,this.videoEl.currentTime=.25,this.videoEl.pause(),this.dispatchEvent(new Event("load")),this.replaceChildren(this.videoEl),r(),this.raf((()=>{this.classList.add("is-loaded")}),"handleVideoLoad")}async play(){if(this.videoEl)try{await this.videoEl.play()}catch(e){}}pause(){this.videoEl&&this.videoEl.pause()}mute(){this.isMuted=!0,this.videoEl&&(this.videoEl.muted=!0)}unmute(){this.isMuted=!1,this.videoEl&&(this.videoEl.muted=!1)}handlePageVisibility(){document.hidden&&this.pause()}preload(){this.isLoaded||n("video",this.mediaUrl)}static register(e="behold-video"){return customElements.get(e)||customElements.define(e,g),e}}class y extends m{label="VideoPost";videoEl;imageEl;constructor(){super(),this.onPropChange(this.handlePropChange,["post","widgetSettings"]),g.register(),u.register()}handlePropChange({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.videoEl=i({type:"behold-video",props:{mediaUrl:t,sizes:e}}),this.addEventListener("mouseover",(()=>this.videoEl?.play())),this.addEventListener("mouseleave",(()=>this.videoEl?.pause())),this.renderPost(this.videoEl)):(this.imageEl=i({type:"behold-image",props:{sizes:e,mediaUrl:o,isSquare:!0}}),this.renderPost(this.imageEl))}}static register(e="behold-video-post"){return customElements.get(e)||customElements.define(e,y),e}}class w extends m{label="AlbumPost";imageEl;constructor(){super(),this.onPropChange(this.handlePropChange,["post"]),u.register()}handlePropChange({changedProp:e}){if("post"===e){const{sizes:e,mediaUrl:t}=this.post,o=i({type:"behold-image",props:{sizes:e,mediaUrl:t,isSquare:!0}});this.renderPost(o)}}static register(e="behold-album-post"){return customElements.get(e)||customElements.define(e,w),e}}var k=":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;line-height:normal;margin:0 0 -1px;transform:translateZ(0);transition:background .3s ease;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 (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;border-radius:var(--post-border-radius);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 (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 (backdrop-filter:blur(3px)){:host(.keyboard-nav) [data-hover-effect=blur] .post:focus-within:before,[data-hover-effect=blur] .post:hover:before{backdrop-filter:blur(3px);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 (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 (backdrop-filter:blur(3px)){:host(.keyboard-nav) [data-hover-effect=zoomBlur] .post:focus-within:before,[data-hover-effect=zoomBlur] .post:hover:before{backdrop-filter:blur(3px);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:focus,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover,[data-hover-effect=fromGreyscale] .post:focus,[data-hover-effect=fromGreyscale] .post:hover{transition:all .6s cubic-bezier(.215,.61,.355,1)}: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)}:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-video,[data-hover-effect=fromGreyscale] .post:focus behold-image,[data-hover-effect=fromGreyscale] .post:focus behold-video,[data-hover-effect=fromGreyscale] .post:hover behold-image,[data-hover-effect=fromGreyscale] .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=fromGreyscale] .post:focus behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:focus behold-video,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-image,:host(.keyboard-nav) [data-hover-effect=fromGreyscale] .post:hover behold-video,[data-hover-effect=fromGreyscale] .post:focus behold-image,[data-hover-effect=fromGreyscale] .post:focus behold-video,[data-hover-effect=fromGreyscale] .post:hover behold-image,[data-hover-effect=fromGreyscale] .post:hover behold-video{transform:none}}: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%)}behold-image{border-radius:var(--post-border-radius);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;object-fit:cover;object-position:center center;opacity:0;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 (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{object-position:center 25%}behold-image.is-loaded img{opacity:1}behold-video{border-radius:var(--post-border-radius);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;object-fit:cover;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{object-position:center 25%}behold-video.is-loaded video{opacity:1}";export{w as A,p as B,b as I,h as R,y as V,g as a,u as b,d as g,k as s};
package/dist/{PopoverGallery-5aBK27WQ.js → PopoverGallery-FTEH7t-X.js} RENAMED
@@ -1 +1 @@
1
- import{b as e,c as t,s as i,t as s,d as r,B as a,f as n,e as o}from"./BeholdWidget-IH-1-Zxz.js";import{a as l,b as h,R as d}from"./Grid-tNDy9g9K.js";let c=document,u=null,p=new Set,b=new Set,m=new MutationObserver((function(e){e.some((e=>"attributes"===e.type||![...e.addedNodes,...e.removedNodes].every((e=>e.tabIndex>=0))&&void 0))&&y({include:[u],merge:!0})})),g=!1;function v(e){const t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return e.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),i=[];let s=null;for(;s=t.nextNode();)i.push(s);return i}function f(e){return new Promise((async t=>{if(e.disabled)return void t(!1);const i=await function(e){return new Promise((t=>{const i=new IntersectionObserver((e=>{t(e[0].isIntersecting),i.disconnect()}));i.observe(e)}))}(e);t(!!i&&[...b].every((t=>!t.contains(e))))}))}async function x(){return(await Promise.all([...p].map((async e=>!!await f(e)&&e)))).filter((e=>!!e))}function E(e){!["Tab","ArrowDown","ArrowUp"].includes(e.code)||e.ctrlKey||e.altKey||e.metaKey||(e.preventDefault(),"Tab"===e.code&&e.shiftKey||"ArrowUp"===e.code?async function(){const e=await x();let t=e.indexOf(c.activeElement)-1;t<0&&(t=e.length-1),e[t]?.focus()}():async function(){const e=await x();let t=e.indexOf(c.activeElement)+1;(t>e.length-1||t<0)&&(t=0),e[t]?.focus()}())}function y({include:e=[],exclude:t=[],merge:i=!1}){i?(e.forEach((e=>{b.delete(e),v(e).forEach((e=>{p.has(e)||p.add(e)}))})),t.forEach((e=>b.add(e)))):(p=new Set(e.flatMap((e=>v(e)))),b=new Set(t))}function w(e){g&&(g=!1,e=e??document.body,document.removeEventListener("keydown",E),m.disconnect(),p.clear(),b.clear(),u=null,e&&e.focus())}const C=e=>e instanceof ShadowRoot;class _{initialized;keyboardNav;dynamicBreadCrumbsCutoff;breadcrumbDiameter;dragLimit;index;slides;rootEl=document;containerEl;innerEl;breadcrumbsContainerEl;breadcrumbsInnerEl;breadcrumbsCurrent;previousEl;nextEl;slideEls;breadcrumbs;raf;focusRaf;st;transitionSt;isDragging;dragStartPoint;lastDragPoint;currentPixelTranslation;currentPercentTranslation;progressToNextSlide;resizeObserver;onSlideChange;constructor({slides:e,containerEl:t,breadcrumbsContainerEl:i,previousEl:s,nextEl:r,onSlideChange:a,breadcrumbDiameter:n=7,keyboardNav:o=!0,dynamicBreadCrumbsCutoff:l=10,dragLimit:h=.15}){this.initialized=!1,this.keyboardNav=o,this.dynamicBreadCrumbsCutoff=l,this.breadcrumbDiameter=n,this.dragLimit=h,this.index=0,this.slides=e,this.containerEl=t,this.innerEl=null,this.breadcrumbsContainerEl=i,this.previousEl=s,this.nextEl=r,this.slideEls=null,this.breadcrumbs=null,this.raf=null,this.st=null,this.transitionSt=null,this.isDragging=!1,this.dragStartPoint={x:0,y:0},this.lastDragPoint={x:0,y:0},this.currentPixelTranslation=0,this.currentPercentTranslation=0,this.progressToNextSlide=0,this.resizeObserver=new ResizeObserver((e=>this.handleResize(e))),this.onSlideChange=a,this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.goTo=this.goTo.bind(this),this.retreat=this.retreat.bind(this),this.advance=this.advance.bind(this),this.handlePrevClick=this.handlePrevClick.bind(this),this.handleNextClick=this.handleNextClick.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.mouseDrag=this.mouseDrag.bind(this),this.touchDrag=this.touchDrag.bind(this),this.drag=this.drag.bind(this),this.startMouseDrag=this.startMouseDrag.bind(this),this.startTouchDrag=this.startTouchDrag.bind(this),this.startDrag=this.startDrag.bind(this),this.endDrag=this.endDrag.bind(this),this.updateBreadcrumbs=this.updateBreadcrumbs.bind(this),this.updateBreadcrumbClasses=this.updateBreadcrumbClasses.bind(this),this.handleResize=this.handleResize.bind(this),this.addEventListeners=this.addEventListeners.bind(this),this.removeEventListeners=this.removeEventListeners.bind(this)}addEventListeners(){this.innerEl.addEventListener("mousedown",this.startMouseDrag,{passive:!0}),this.innerEl.addEventListener("touchstart",this.startTouchDrag,{passive:!0}),document.body.addEventListener("mousemove",this.mouseDrag,{passive:!0}),document.body.addEventListener("mouseup",this.endDrag,{passive:!0}),document.body.addEventListener("mouseleave",this.endDrag,{passive:!0}),document.body.addEventListener("touchmove",this.touchDrag,{passive:!0}),document.body.addEventListener("touchend",this.endDrag,{passive:!0}),this.previousEl&&this.previousEl.addEventListener("click",this.handlePrevClick),this.nextEl&&this.nextEl.addEventListener("click",this.handleNextClick),this.keyboardNav&&document.addEventListener("keydown",this.handleKeyDown)}removeEventListeners(){this.innerEl.removeEventListener("mousedown",this.startMouseDrag),this.innerEl.removeEventListener("touchstart",this.startTouchDrag),document.body.removeEventListener("mousemove",this.mouseDrag),document.body.removeEventListener("mouseup",this.endDrag),document.body.removeEventListener("mouseleave",this.endDrag),document.body.removeEventListener("touchmove",this.touchDrag),document.body.removeEventListener("touchend",this.endDrag),this.previousEl&&this.previousEl.removeEventListener("click",this.handlePrevClick),this.nextEl&&this.nextEl.removeEventListener("click",this.handleNextClick),this.keyboardNav&&document.removeEventListener("keydown",this.handleKeyDown)}init(i=0){this.initialized||(this.initialized=!0,this.rootEl=e(this.containerEl),this.slideEls=this.slides.map(((e,i)=>t({classes:"hg-slide",contents:e}))),this.breadcrumbs=this.slides.map(((e,i)=>t({classes:"hg-breadcrumb",listeners:{click:()=>this.goTo({index:i})}}))),this.breadcrumbsCurrent=t({classes:"hg-breadcrumbs-current"}),this.breadcrumbsInnerEl=t({classes:"hg-breadcrumbs",contents:[...this.breadcrumbs,this.breadcrumbsCurrent]}),this.innerEl=t({classes:"hg-container",contents:this.slideEls}),this.containerEl.appendChild(this.innerEl),this.breadcrumbsContainerEl&&(this.breadcrumbsContainerEl.style.setProperty("--breadCrumbDiameter",this.breadcrumbDiameter+"px"),this.breadcrumbsContainerEl.appendChild(this.breadcrumbsInnerEl)),this.addEventListeners(),this.slides.length<2&&(this.breadcrumbsInnerEl.style.display="none",this.previousEl.style.display="none",this.nextEl.style.display="none"),this.resizeObserver?.observe(this.containerEl),this.updateBreadcrumbs(this.index,this.index,!1),this.goTo({index:i,animate:!1,forceUpdate:!0}))}destroy(){this.initialized&&(clearTimeout(this.st),clearTimeout(this.transitionSt),cancelAnimationFrame(this.raf),cancelAnimationFrame(this.focusRaf),this.resizeObserver.disconnect(),this.removeEventListeners(),this.breadcrumbs=null,this.breadcrumbsCurrent=null,this.breadcrumbsInnerEl.remove(),this.breadcrumbsInnerEl=null,this.innerEl.remove(),this.innerEl=null,this.initialized=!1)}handleResize(e){if(!e?.[0])return;const t=e?.[0]?.borderBoxSize?.[0]?.inlineSize||0;t&&(this.currentPixelTranslation=t*this.index*-1)}updateBreadcrumbClasses(e,t=!0){if(this.breadcrumbs.length>=this.dynamicBreadCrumbsCutoff&&this.breadcrumbsContainerEl){i(this.breadcrumbsInnerEl,{"no-transition":!t}),requestAnimationFrame((()=>{this.breadcrumbsInnerEl.classList.remove("no-transition")}));const s=this.breadcrumbsInnerEl.offsetWidth/2-this.breadcrumbDiameter/2-this.breadcrumbs[e].offsetLeft;this.breadcrumbsInnerEl.style.transform=`translateX(${s}px)`,this.breadcrumbs.forEach(((t,s)=>{i(t,{"hg-breadcrumb--hidden":s<=e-5||s>=e+5,"hg-breadcrumb--4":s===e-4||s===e+4,"hg-breadcrumb--3":s===e-3||s===e+3,"hg-breadcrumb--2":s===e-2||s===e+2,"hg-breadcrumb--1":s===e-1||s===e+1})}))}}updateBreadcrumbs(e,t,i){this.breadcrumbs?.length&&(this.updateBreadcrumbClasses(e,i),this.breadcrumbsContainerEl&&(!i||this.breadcrumbs.length>=10&&Math.abs(e-t)>1?e>t?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-(this.breadcrumbs[e].offsetLeft+this.breadcrumbDiameter)+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=this.breadcrumbs[e].offsetLeft+"px"):(e<t?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-this.breadcrumbs[t]?.offsetLeft-this.breadcrumbDiameter+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=this.breadcrumbs[t]?.offsetLeft+"px"),k(),this.raf=requestAnimationFrame((()=>{this.breadcrumbsCurrent.style.width=e>t?`${this.breadcrumbs[e]?.offsetLeft-this.breadcrumbsCurrent.offsetLeft+this.breadcrumbDiameter}px`:this.breadcrumbsCurrent.offsetLeft+this.breadcrumbsCurrent.offsetWidth-this.breadcrumbs[e]?.offsetLeft+"px"})),this.st=setTimeout((()=>{e>t?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-(this.breadcrumbs[e].offsetLeft+this.breadcrumbDiameter)+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=this.breadcrumbs[e].offsetLeft+"px"),k(),this.raf=requestAnimationFrame((()=>{this.breadcrumbsCurrent.style.width=""}))}),200))))}goTo({index:e,animate:t=!0,forceUpdate:i=!1,easing:s="ease"}){if(!this.slideEls?.[e])return;if(!this.initialized)return;cancelAnimationFrame(this.focusRaf);const r=e,a=this.index;this.index=r,clearTimeout(this.transitionSt),window.matchMedia("(prefers-reduced-motion)").matches&&(t=!1),this.isDragging=!1,this.progressToNextSlide=0,r!==a||i?(cancelAnimationFrame(this.raf),clearTimeout(this.st),this.updateBreadcrumbs(r,a,t),this.onSlideChange&&this.onSlideChange(r)):this.breadcrumbsCurrent.style.width="",this.innerEl.style.transition=t?`transform 0.4s ${s}`:"",this.innerEl.style.transform=`translateX(${-100*r}%)`,this.currentPixelTranslation=this.innerEl.scrollWidth/this.slideEls.length*r*-1,this.currentPercentTranslation=-100*r,this.previousEl&&(r<1?(this.rootEl.activeElement===this.previousEl&&(this.focusRaf=requestAnimationFrame((()=>{this.nextEl.focus()}))),this.previousEl.setAttribute("disabled","true")):this.previousEl.removeAttribute("disabled")),this.nextEl&&(r>=this.slideEls.length-1?(this.rootEl.activeElement===this.nextEl&&(this.focusRaf=requestAnimationFrame((()=>{this.previousEl.focus()}))),this.nextEl.setAttribute("disabled","true")):this.nextEl.removeAttribute("disabled")),this.transitionSt=setTimeout((()=>{this.innerEl.style.transition=""}),400)}handlePrevClick(){this.retreat()}handleNextClick(){this.advance()}retreat(e="ease"){"string"!=typeof e&&(e="ease"),this.index<1?this.goTo({index:this.index}):this.goTo({index:this.index-1,easing:e})}advance(e="ease"){"string"!=typeof e&&(e="ease"),this.index>=this.slideEls.length-1?this.goTo({index:this.index}):this.goTo({index:this.index+1,easing:e})}handleKeyDown(e){"ArrowRight"===e.code&&(e.preventDefault(),this.advance()),"ArrowLeft"===e.code&&(e.preventDefault(),this.retreat())}startMouseDrag(e){e.stopPropagation(),e.button>0||this.startDrag({x:e.clientX,y:e.clientY})}startTouchDrag(e){e.stopPropagation(),this.startDrag({x:e.touches.item(0).clientX,y:e.touches.item(0).clientY})}startDrag(e){this.slides.length<2||!this.initialized||(this.isDragging=!0,clearTimeout(this.transitionSt),cancelAnimationFrame(this.raf),this.progressToNextSlide=0,this.currentPixelTranslation=S(this.innerEl),this.breadcrumbsCurrent.style.transition="none",this.dragStartPoint=e,this.lastDragPoint=this.dragStartPoint)}mouseDrag(e){s(this.drag,10,this)({x:e.clientX,y:e.clientY})}touchDrag(e){s(this.drag,10,this)({x:e.touches.item(0).clientX,y:e.touches.item(0).clientY},!0)}drag(e,t=!1){if(this.slides.length<2||!this.isDragging||!this.initialized)return;this.currentPixelTranslation=S(this.innerEl);const i=this.containerEl.offsetWidth*this.dragLimit;let s=e.x-this.dragStartPoint.x,r=e.y-this.dragStartPoint.y,a=Math.abs(r)/Math.abs(s);if(t&&a>.85)return void this.endDrag();const n=e.x-this.lastDragPoint.x;this.progressToNextSlide=Math.abs(s/i);let o=this.currentPixelTranslation+n;const l=0===this.index&&s>0||this.index===this.slideEls.length-1&&s<0;if(l){let e=n*Math.max(1-Math.abs(s)/(.5*this.containerEl.offsetWidth),.1);o=this.currentPixelTranslation+e,this.progressToNextSlide=Math.abs(s/i)}this.lastDragPoint=e,this.currentPixelTranslation=o,this.currentPercentTranslation=this.currentPixelTranslation/this.containerEl.offsetWidth*100,s>0?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-(this.breadcrumbs[this.index].offsetLeft+this.breadcrumbDiameter)+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=`${this.breadcrumbs[this.index].offsetLeft}px`),this.breadcrumbsCurrent.style.width=l?`${this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.currentPercentTranslation+100*this.index)/100)}px`:`${Math.min(2.75*this.breadcrumbDiameter,this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.currentPercentTranslation+100*this.index)/100))}px`,this.innerEl.style.transform=`translateX(${this.currentPercentTranslation}%)`,this.innerEl.style.transition=""}endDrag(){this.isDragging=!1,this.breadcrumbsCurrent.style.transition="",this.innerEl.style.transition="",this.dragStartPoint={x:0,y:0},this.lastDragPoint={x:0,y:0},this.progressToNextSlide>=1?this.currentPercentTranslation+100*this.index<0?this.raf=requestAnimationFrame((()=>this.advance("cubic-bezier(0.25, .25, 0.5, 1)"))):this.raf=requestAnimationFrame((()=>this.retreat("cubic-bezier(0.25, .25, 0.5, 1)"))):this.raf=requestAnimationFrame((()=>this.goTo({index:this.index})))}}function k(){return document.body.offsetTop}function S(e){if(!e)return;const t=e.getBoundingClientRect(),i=e.parentNode.getBoundingClientRect();return t.left-i.left}var L='.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}';class P{initialized;slides;currentSlide;containerEl;scrollContainerEl;innerEl;onSlideChange;onRequestClose;constructor({slides:e,containerEl:t,onSlideChange:i,onRequestClose:s=null}){this.initialized=!1,this.slides=e,this.currentSlide=null,this.containerEl=t,this.scrollContainerEl=null,this.innerEl=null,this.onSlideChange=i,this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.onBackGroundClick=this.onBackGroundClick.bind(this),this.onRequestClose=s,this.handleScroll=this.handleScroll.bind(this)}init(e=0){this.initialized||(this.initialized=!0,this.innerEl=t({classes:D("inner"),contents:this.slides}),this.scrollContainerEl=t({classes:D("container"),contents:this.innerEl}),this.containerEl.appendChild(this.scrollContainerEl),this.scrollContainerEl.addEventListener("click",this.onBackGroundClick),this.scrollContainerEl.addEventListener("scroll",this.handleScroll,{passive:!0}),this.goTo({index:e,animate:!1}))}destroy(){this.initialized&&(this.initialized=!1,this.scrollContainerEl.removeEventListener("click",this.onBackGroundClick),this.scrollContainerEl.removeEventListener("scroll",this.handleScroll),this.scrollContainerEl.remove(),this.scrollContainerEl=null)}handleScroll(e){r(this.slides).then((e=>{this.currentSlide!==e&&(this.currentSlide=e,this.onSlideChange&&this.onSlideChange(this.currentSlide))}))}onBackGroundClick(e){e.target===this.scrollContainerEl&&this.onRequestClose&&this.onRequestClose()}goTo({index:e,animate:t=!0}){if(!this.slides?.[e])return;const i=this.slides[e].offsetTop;this.currentSlide=e,this.onSlideChange&&this.onSlideChange(this.currentSlide),this.scrollContainerEl?.scrollTo({top:i-10,behavior:t?"smooth":"instant"})}}function D(e){return"behold-ps-"+e}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>',z='<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 T extends a{label="PopoverSlideVideo";videoEl;soundControlEl;isPlaying=!1;post;constructor(){super(),l.register(),this.onLoad=this.onLoad.bind(this),this.onPlay=this.onPlay.bind(this),this.onPause=this.onPause.bind(this),this.play=this.play.bind(this),this.pause=this.pause.bind(this),this.togglePlayback=this.togglePlayback.bind(this),this.toggleSound=this.toggleSound.bind(this),this.showSoundControl=this.showSoundControl.bind(this),this.hideSoundControl=this.hideSoundControl.bind(this),this.onPropChange(this.handlePropChange,["isPlaying"],[]),this.onStateChange(this.handleStateChange),this.onConnect((()=>{this.videoEl=t({type:"behold-video",classes:"video",props:{mediaUrl:this.post.mediaUrl,sizes:this.post.sizes},listeners:{click:this.togglePlayback,load:this.onLoad,play:this.onPlay,pause:this.onPause}}),this.soundControlEl=t({type:"button",classes:"video-mute",contents:this.state.isMuted?M:z,listeners:{click:this.toggleSound}}),this.state.isMuted?this.videoEl.mute():this.videoEl.unmute(),this.classList.add("video-container","video-container--paused"),this.replaceChildren(this.videoEl,this.soundControlEl)}))}handlePropChange({changedProp:e,newValue:t}){if("isPlaying"===e)t&&this.videoEl?.isLoaded&&!this.videoEl.isPlaying&&this.videoEl.play()}handleStateChange({changedProps:e,newState:t}){e.includes("isMuted")&&this.videoEl&&this.soundControlEl&&(t.isMuted?(this.videoEl.mute(),this.soundControlEl.innerHTML=M):(this.videoEl.unmute(),this.soundControlEl.innerHTML=z))}onLoad(){this.dispatchEvent(new Event("load")),this.classList.add("is-loaded"),this.isPlaying&&!this.videoEl.isPlaying&&this.videoEl.play()}onPlay(){this.classList.remove("video-container--paused")}onPause(){this.classList.add("video-container--paused")}play(){this.isPlaying=!0}pause(){this.isConnected&&this.videoEl.isPlaying&&this.videoEl.pause()}togglePlayback(){this.videoEl.isPlaying?this.pause():this.play()}toggleSound(){this.videoEl.muted?this.updateState({isMuted:!1}):this.updateState({isMuted:!0})}showSoundControl(){this.isConnected&&this.soundControlEl.classList.add("video-mute--visible")}hideSoundControl(){this.isConnected&&this.soundControlEl.classList.remove("video-mute--visible")}preload(){this.videoEl?.preload()}static register(e="behold-popover-slide-video"){return customElements.get(e)||customElements.define(e,T),e}}var I='<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>',B='<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";containerEl;spaceholderEl;childEls;previousEl;nextEl;breadcrumbsEl;childCarousel;currentSlideIndex=0;post;constructor(){super(),this.onPropChange((()=>{}),["post"]),h.register(),T.register(),this.handleSlideChange=this.handleSlideChange.bind(this),this.onConnect((()=>{this.childEls=this.buildSlideEls(),this.spaceholderEl=t({type:"img",classes:"slide__carousel-spaceholder",attributes:{src:`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`,height:this.post.sizes?.full?.height,width:this.post.sizes?.full?.width}}),this.previousEl=t({type:"button",classes:"slide__carousel-previous",attributes:{"aria-label":"Previous slide"},contents:I}),this.nextEl=t({type:"button",classes:"slide__carousel-next",attributes:{"aria-label":"Next slide"},contents:B}),this.breadcrumbsEl=t({classes:"slide__carousel-breadcrumbs"}),this.containerEl=t({classes:"slide__carousel",contents:[...this.childEls,this.previousEl,this.nextEl,this.breadcrumbsEl]}),this.replaceChildren(this.spaceholderEl,this.containerEl),this.childCarousel=new _({slides:this.childEls,containerEl:this.containerEl,keyboardNav:!1,breadcrumbsContainerEl:this.breadcrumbsEl,dynamicBreadCrumbsCutoff:7,previousEl:this.previousEl,nextEl:this.nextEl,dragLimit:.2,onSlideChange:this.handleSlideChange})}))}activate(){this.childCarousel.init(0),this.handleSlideChange(this.currentSlideIndex)}updateTabbable(){y({include:[this.childEls[this.currentSlideIndex]],exclude:this.childEls.filter(((e,t)=>t!==this.currentSlideIndex)),merge:!0})}handleSlideChange(e){this.currentSlideIndex=e,this.childEls.forEach(((t,i)=>{A(t)&&(i===e?(t.showSoundControl(),t.play()):(t.hideSoundControl(),t.pause()))}));const t=this.childEls[e-1],i=this.childEls[e+1];t&&t.preload(),i&&i.preload();const s=d(this.post.children[e].colorPalette?.dominant||"100,100,100").map((e=>Math.round(e)));this.style.backgroundColor=`hsl(${s[0]} ${Math.min(s[1],35)}% ${Math.min(s[2],13)}%)`,this.updateTabbable(),this.updateState({popoverOverlayColor:`hsl(${s[0]} ${Math.min(s[1],50)}% ${Math.min(s[2],15)}% / .85)`})}buildSlideEls(){return this.post.children.map((e=>{let i=null;switch(e.mediaType){case"IMAGE":i=t({type:"behold-image",classes:"slide__carousel-slide",props:{sizes:e.sizes,mediaUrl:e.mediaUrl,isSquare:!1}});break;case"VIDEO":i=t({type:"behold-popover-slide-video",classes:"slide__carousel-slide",props:{post:e}})}return i}))}play(){const e=this.childEls[this.currentSlideIndex];A(e)&&(e.showSoundControl(),e.play())}pause(){this.childEls.filter(A).forEach((e=>{e.hideSoundControl(),e.pause()}))}preload(){this.childEls?.[0]?.preload()}static register(e="behold-popover-slide-album"){return customElements.get(e)||customElements.define(e,F),e}}const A=e=>"BEHOLD-POPOVER-SLIDE-VIDEO"===e.tagName;var R='<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 N extends a{label="PopoverGallerySlide";innerEl;mediaContainerEl;avatarImageEl;headerText;avatarEl;headerEl;captionEl;footerLinkEl;footerEl;textEl;mediaEl;moreEl;post;feedMetadata;constructor(){super(),this.onPropChange(this.handlePropChange,["post","feedMetadata"]),h.register(),T.register(),F.register(),this.expandCaption=this.expandCaption.bind(this),this.onConnect((()=>{this.render()}))}render(){this.classList.remove("is-loaded");const e=d(this.post.colorPalette?.dominant||"100,100,100").map((e=>Math.round(e))),i=`hsl(${e[0]} ${Math.min(e[1],35)}% ${Math.min(e[2],13)}%)`;switch(this.post.mediaType){case"IMAGE":this.mediaEl=t({type:"behold-image",classes:"slide__media",style:{backgroundColor:i},props:{sizes:this.post.sizes,mediaUrl:this.post.mediaUrl,isSquare:!1}});break;case"VIDEO":this.mediaEl=t({type:"behold-popover-slide-video",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}});break;case"CAROUSEL_ALBUM":this.mediaEl=t({type:"behold-popover-slide-album",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}})}this.avatarImageEl=this.feedMetadata?.profilePictureUrl?t({type:"img",attributes:{src:this.feedMetadata.profilePictureUrl}}):null,this.headerText="@"+this.feedMetadata.username,this.feedMetadata.hashtags&&(this.avatarImageEl=R,this.headerText=this.feedMetadata.hashtags.join(", ")),this.avatarEl=this.avatarImageEl?t({classes:"slide__avatar",contents:this.avatarImageEl,attributes:{"aria-label":this.feedMetadata.hashtags?"hashtags":"username"}}):null,this.headerEl=t({classes:"slide__header",contents:[this.avatarEl,this.headerText]}),this.captionEl=this.post?.caption?.trim()?.length?t({classes:"slide__caption",contents:this.post.caption}):null,this.footerLinkEl=this.post.permalink?t({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.footerEl=t({classes:"slide__footer",contents:[this.footerLinkEl]}),this.textEl=t({classes:"slide__text",contents:[this.headerEl,this.captionEl,this.footerEl]}),this.innerEl=t({classes:"slide__inner",contents:[this.mediaEl,this.textEl]}),this.moreEl=t({type:"button",classes:"slide__more",contents:"… more",listeners:{click:this.expandCaption}}),this.replaceChildren(this.innerEl),n(),this.to((()=>{this.classList.add("is-loaded")}),10,"onConnect")}handlePropChange({changedProp:e}){if("feedMetadata"===e){if(!this.isConnected)return;this.avatarImageEl.src=this.feedMetadata.profilePictureUrl,this.headerText="@"+this.feedMetadata.username,this.feedMetadata.hashtags&&(this.avatarImageEl=R,this.headerText=this.feedMetadata.hashtags.join(", ")),this.avatarEl.replaceChildren(this.avatarImageEl),this.avatarEl.setAttribute("aria-label",this.feedMetadata.hashtags?"hashtags":"username")}}activate(){if("VIDEO"===this.post.mediaType){const e=this.mediaEl;e.play(),e.showSoundControl()}if("CAROUSEL_ALBUM"===this.post.mediaType){this.mediaEl.activate()}}deactivate(){if("VIDEO"===this.post.mediaType){this.mediaEl.pause()}if("CAROUSEL_ALBUM"===this.post.mediaType){this.mediaEl.pause()}}preload(){this.mediaEl.preload()}expandCaption(){this.captionEl&&(this.captionEl.style.transition="",this.captionEl.style.height=this.captionEl.offsetHeight+"px",this.captionEl.innerHTML=this.post?.caption||"",n(),this.raf((()=>{this.captionEl.style.transition="height .3s ease",this.captionEl.style.height=this.captionEl.scrollHeight+"px",this.to((()=>{this.captionEl.style.transition="",this.captionEl.style.height=""}),300,"expandCaption")}),"expandCaption"))}collapseCaption(){if(!this.captionEl)return;const e=o({text:this.post.caption,maxChars:120,maxLines:4});this.captionEl.innerHTML=e,e?.length<this.post?.caption?.length&&this.captionEl.appendChild(this.moreEl)}static register(e="behold-popover-gallery-slide"){return customElements.get(e)||customElements.define(e,N),e}}var O=":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;width:100%;z-index:99999}:host *{box-sizing:border-box}@media (max-width:1200px){:host{--text-width:300px;--text-size:13px}}@media (max-width:900px){:host{--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{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%}: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}@media (max-width:900px){.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}@media (max-width:900px){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}@media (max-width:900px){.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}.slide__media img,.slide__media video{height:auto;max-height:100%;max-width:100%;object-fit:contain;object-position:center center;opacity:0;transition:opacity .4s ease;width:auto}behold-image{pointer-events:none}behold-image.is-loaded img{opacity:1}.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%}.slide__carousel:after,.slide__carousel:before{content:\"\";pointer-events:none;position:absolute;z-index:1}.slide__carousel:after{background:var(--icon-gallery);height:20px;left:20px;opacity:.75;top:20px;width:20px}@media (max-width:900px){.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}@media (max-width:900px){.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%);transition:opacity .3s ease;width:30px;z-index:1}: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}@media (max-width:900px){.slide__carousel-next,.slide__carousel-previous{background-color:transparent;box-shadow:none;height:20px;width:20px}.slide__carousel-next svg path,.slide__carousel-previous svg path{fill:#fff}}.slide__carousel-previous{left:20px}.slide__carousel-previous svg{transform:translateX(-1px)}@media (max-width:900px){.slide__carousel-previous{left:10px}}.slide__carousel-next{right:20px}.slide__carousel-next svg{transform:translateX(1px)}@media (max-width:900px){.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%;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}.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}.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;transition:opacity .1s ease;width:60px}.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;border-left:1px solid 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;min-width:none;pointer-events:none;width:var(--text-width)}.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)}@media (max-width:900px){.slide__avatar{height:32px;width:32px}.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}@media (max-width:900px){.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}: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}@media (max-width:900px){.close{background-color:hsla(0,0%,97%,.85);border-radius:50%;opacity:1;right:5px;top:5px}.close svg{height:14px;width:14px}.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}",j='.hg-container{align-items:flex-start;backface-visibility:hidden;contain:layout style;justify-content:flex-start;user-select:none;will-change:transform}.hg-container,.hg-slide{display:flex;height:100%;width:100%}.hg-slide{align-items:center;contain:content;flex-grow:0;flex-shrink:0;justify-content:center}.hg-slide:active{cursor:grabbing}.hg-breadcrumbs{--ease:cubic-bezier(0.215,0.61,0.355,1);align-items:center;display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);justify-content:center;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}';class $ extends a{label="PopoverGallery";verticalScrollBreakpoint=900;shadow;fragment;styleEl;stylesAdded;overlayEl;previousEl;nextEl;closeEl;breadcrumbContainer;innerEl;postEls;hurdyGurdy;popoverScroller;currentPostIndex=0;posts;widgetSettings;feedMetadata;closeFocusEl=document.body;onSlideChange;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.onPropChange(this.handlePropChange,["posts","widgetSettings","feedMetadata"]),N.register(),this.handleSlideChange=this.handleSlideChange.bind(this),this.close=this.close.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.onStateChange((()=>{i(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{this.classList.add(`theme--${this.widgetSettings.popupColorTheme}`),i(this,{"keyboard-nav":this.state.keyboardNavEnabled}),this.overlayEl=t({classes:"overlay",listeners:{click:this.close}}),this.previousEl=t({type:"button",classes:"previous",attributes:{"aria-label":"Previous slide"},contents:I}),this.nextEl=t({type:"button",classes:"next",attributes:{"aria-label":"Next slide"},contents:B}),this.closeEl=t({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:e=>{e.preventDefault(),this.close()}}}),this.breadcrumbContainer=t({classes:"breadcrumbs"}),this.postEls=this.posts.map((e=>{const t=document.createElement("behold-popover-gallery-slide");return t.post=e,t.feedMetadata=this.feedMetadata,t})),this.innerEl=t({classes:"inner",contents:this.postEls}),this.fragment=document.createDocumentFragment(),this.fragment.replaceChildren(this.overlayEl,this.innerEl,this.breadcrumbContainer,this.previousEl,this.nextEl,this.closeEl),this.styleEl=t({type:"style",contents:[O.toString(),j.toString(),L.toString()]}),this.hurdyGurdy=new _({slides:this.postEls,containerEl:this.innerEl,breadcrumbsContainerEl:this.breadcrumbContainer,previousEl:this.previousEl,nextEl:this.nextEl,onSlideChange:this.handleSlideChange,breadcrumbDiameter:this.postEls.length>9?9:8}),this.popoverScroller=new P({slides:this.postEls,containerEl:this.innerEl,onSlideChange:this.handleSlideChange,onRequestClose:()=>{this.close()}}),this.onStateChange(this.handleStateChange),this.onResize(this,this,this.handleResize),document.addEventListener("keydown",this.handleKeydown)})),this.onDisconnect((()=>{w(this.closeFocusEl),this.hurdyGurdy.destroy(),this.popoverScroller.destroy(),this.shadow.replaceChildren(),this.hurdyGurdy=null,this.popoverScroller=null,this.overlayEl=null,this.previousEl=null,this.nextEl=null,this.closeEl=null,this.breadcrumbContainer=null,this.postEls=null,this.innerEl=null,this.fragment=null,this.styleEl=null}))}handlePropChange({changedProp:e,oldValue:t,newValue:i}){}handleStateChange({changedProps:e,newState:t}){e.includes("popoverOverlayColor")&&(this.overlayEl.style.backgroundColor=t.popoverOverlayColor)}handleKeydown(e){"Escape"===e.code&&(e.preventDefault(),this.close())}open(e,t){this.currentPostIndex=e,this.cancelRaf("open"),this.closeFocusEl=t,this.render(),n(),this.raf((()=>{this.classList.add("is-visible"),async function(e,t=[],i=0){u=e,c=C(e)?e:document,g=!0,y({include:[e],exclude:t}),document.addEventListener("keydown",E),m.observe(e,{subtree:!0,attributes:!0,attributeFilter:["disabled"],childList:!0});const s=await x();s[i]?.focus()}(this.shadow,this.postEls.filter(((t,i)=>i!==e)),1),this.checkSize(this.offsetWidth),this.postEls[e].activate()}),"open")}close(){this.cancelTo("close"),this.classList.remove("is-visible"),this.to(this.remove.bind(this),300,"close"),w(this.closeFocusEl)}handleSlideChange(e){this.currentPostIndex=e,y({include:[this.shadow],exclude:this.postEls.filter(((t,i)=>i!==e)),merge:!1}),this.onSlideChange&&this.onSlideChange(e),this.postEls.forEach(((t,i)=>{i===e?t.activate():t.deactivate()}));const t=this.postEls[e-1]??null,i=this.postEls[e+1]??null;if(t&&this.raf((()=>t.preload()),"preload"),i&&this.raf((()=>i.preload()),"preload"),"CAROUSEL_ALBUM"!==this.posts[e].mediaType){const t=d(this.posts[e]?.colorPalette?.dominant||"100,100,100").map((e=>Math.round(e)));this.updateState({popoverOverlayColor:`hsl(${t[0]} ${Math.min(t[1],50)}% ${Math.min(t[2],15)}% / .85)`})}}checkSize(e){e>this.verticalScrollBreakpoint?(this.previousEl.style.display="",this.nextEl.style.display="",this.popoverScroller.destroy(),this.hurdyGurdy.init(this.currentPostIndex),this.postEls.forEach((e=>e.expandCaption()))):(this.hurdyGurdy.destroy(),this.popoverScroller.init(this.currentPostIndex),this.postEls.forEach((e=>e.collapseCaption())),this.previousEl.disabled=!1,this.previousEl.style.display="none",this.nextEl.disabled=!1,this.nextEl.style.display="none")}handleResize(e){const t=e?.borderBoxSize?.[0]?.inlineSize||0;this.checkSize(t)}render(){document.body.append(this),this.shadow.replaceChildren(this.fragment,this.styleEl)}static register(e="behold-popover-gallery"){return customElements.get(e)||customElements.define(e,$),e}}export{$ as default};
1
+ import{b as e,c as t,s as i,t as s,d as r,B as a,f as n,e as o}from"./BeholdWidget-tZ68JBrA.js";import{a as l,b as h,R as d}from"./Grid-Y5E3_F0F.js";let c=document,u=null,p=new Set,b=new Set,m=new MutationObserver((function(e){e.some((e=>"attributes"===e.type||![...e.addedNodes,...e.removedNodes].every((e=>e.tabIndex>=0))&&void 0))&&y({include:[u],merge:!0})})),g=!1;function v(e){const t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return e.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),i=[];let s=null;for(;s=t.nextNode();)i.push(s);return i}function f(e){return new Promise((async t=>{if(e.disabled)return void t(!1);const i=await function(e){return new Promise((t=>{const i=new IntersectionObserver((e=>{t(e[0].isIntersecting),i.disconnect()}));i.observe(e)}))}(e);t(!!i&&[...b].every((t=>!t.contains(e))))}))}async function x(){return(await Promise.all([...p].map((async e=>!!await f(e)&&e)))).filter((e=>!!e))}function E(e){!["Tab","ArrowDown","ArrowUp"].includes(e.code)||e.ctrlKey||e.altKey||e.metaKey||(e.preventDefault(),"Tab"===e.code&&e.shiftKey||"ArrowUp"===e.code?async function(){const e=await x();let t=e.indexOf(c.activeElement)-1;t<0&&(t=e.length-1),e[t]?.focus()}():async function(){const e=await x();let t=e.indexOf(c.activeElement)+1;(t>e.length-1||t<0)&&(t=0),e[t]?.focus()}())}function y({include:e=[],exclude:t=[],merge:i=!1}){i?(e.forEach((e=>{b.delete(e),v(e).forEach((e=>{p.has(e)||p.add(e)}))})),t.forEach((e=>b.add(e)))):(p=new Set(e.flatMap((e=>v(e)))),b=new Set(t))}function w(e){g&&(g=!1,e=e??document.body,document.removeEventListener("keydown",E),m.disconnect(),p.clear(),b.clear(),u=null,e&&e.focus())}const C=e=>e instanceof ShadowRoot;class _{initialized;keyboardNav;dynamicBreadCrumbsCutoff;breadcrumbDiameter;dragLimit;index;slides;rootEl=document;containerEl;innerEl;breadcrumbsContainerEl;breadcrumbsInnerEl;breadcrumbsCurrent;previousEl;nextEl;slideEls;breadcrumbs;raf;focusRaf;st;transitionSt;isDragging;dragStartPoint;lastDragPoint;currentPixelTranslation;currentPercentTranslation;progressToNextSlide;resizeObserver;onSlideChange;constructor({slides:e,containerEl:t,breadcrumbsContainerEl:i,previousEl:s,nextEl:r,onSlideChange:a,breadcrumbDiameter:n=7,keyboardNav:o=!0,dynamicBreadCrumbsCutoff:l=10,dragLimit:h=.15}){this.initialized=!1,this.keyboardNav=o,this.dynamicBreadCrumbsCutoff=l,this.breadcrumbDiameter=n,this.dragLimit=h,this.index=0,this.slides=e,this.containerEl=t,this.innerEl=null,this.breadcrumbsContainerEl=i,this.previousEl=s,this.nextEl=r,this.slideEls=null,this.breadcrumbs=null,this.raf=null,this.st=null,this.transitionSt=null,this.isDragging=!1,this.dragStartPoint={x:0,y:0},this.lastDragPoint={x:0,y:0},this.currentPixelTranslation=0,this.currentPercentTranslation=0,this.progressToNextSlide=0,this.resizeObserver=new ResizeObserver((e=>this.handleResize(e))),this.onSlideChange=a,this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.goTo=this.goTo.bind(this),this.retreat=this.retreat.bind(this),this.advance=this.advance.bind(this),this.handlePrevClick=this.handlePrevClick.bind(this),this.handleNextClick=this.handleNextClick.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.mouseDrag=this.mouseDrag.bind(this),this.touchDrag=this.touchDrag.bind(this),this.drag=this.drag.bind(this),this.startMouseDrag=this.startMouseDrag.bind(this),this.startTouchDrag=this.startTouchDrag.bind(this),this.startDrag=this.startDrag.bind(this),this.endDrag=this.endDrag.bind(this),this.updateBreadcrumbs=this.updateBreadcrumbs.bind(this),this.updateBreadcrumbClasses=this.updateBreadcrumbClasses.bind(this),this.handleResize=this.handleResize.bind(this),this.addEventListeners=this.addEventListeners.bind(this),this.removeEventListeners=this.removeEventListeners.bind(this)}addEventListeners(){this.innerEl.addEventListener("mousedown",this.startMouseDrag,{passive:!0}),this.innerEl.addEventListener("touchstart",this.startTouchDrag,{passive:!0}),document.body.addEventListener("mousemove",this.mouseDrag,{passive:!0}),document.body.addEventListener("mouseup",this.endDrag,{passive:!0}),document.body.addEventListener("mouseleave",this.endDrag,{passive:!0}),document.body.addEventListener("touchmove",this.touchDrag,{passive:!0}),document.body.addEventListener("touchend",this.endDrag,{passive:!0}),this.previousEl&&this.previousEl.addEventListener("click",this.handlePrevClick),this.nextEl&&this.nextEl.addEventListener("click",this.handleNextClick),this.keyboardNav&&document.addEventListener("keydown",this.handleKeyDown)}removeEventListeners(){this.innerEl.removeEventListener("mousedown",this.startMouseDrag),this.innerEl.removeEventListener("touchstart",this.startTouchDrag),document.body.removeEventListener("mousemove",this.mouseDrag),document.body.removeEventListener("mouseup",this.endDrag),document.body.removeEventListener("mouseleave",this.endDrag),document.body.removeEventListener("touchmove",this.touchDrag),document.body.removeEventListener("touchend",this.endDrag),this.previousEl&&this.previousEl.removeEventListener("click",this.handlePrevClick),this.nextEl&&this.nextEl.removeEventListener("click",this.handleNextClick),this.keyboardNav&&document.removeEventListener("keydown",this.handleKeyDown)}init(i=0){this.initialized||(this.initialized=!0,this.rootEl=e(this.containerEl),this.slideEls=this.slides.map(((e,i)=>t({classes:"hg-slide",contents:e}))),this.breadcrumbs=this.slides.map(((e,i)=>t({classes:"hg-breadcrumb",listeners:{click:()=>this.goTo({index:i})}}))),this.breadcrumbsCurrent=t({classes:"hg-breadcrumbs-current"}),this.breadcrumbsInnerEl=t({classes:"hg-breadcrumbs",contents:[...this.breadcrumbs,this.breadcrumbsCurrent]}),this.innerEl=t({classes:"hg-container",contents:this.slideEls}),this.containerEl.appendChild(this.innerEl),this.breadcrumbsContainerEl&&(this.breadcrumbsContainerEl.style.setProperty("--breadCrumbDiameter",this.breadcrumbDiameter+"px"),this.breadcrumbsContainerEl.appendChild(this.breadcrumbsInnerEl)),this.addEventListeners(),this.slides.length<2&&(this.breadcrumbsInnerEl.style.display="none",this.previousEl.style.display="none",this.nextEl.style.display="none"),this.resizeObserver?.observe(this.containerEl),this.updateBreadcrumbs(this.index,this.index,!1),this.goTo({index:i,animate:!1,forceUpdate:!0}))}destroy(){this.initialized&&(clearTimeout(this.st),clearTimeout(this.transitionSt),cancelAnimationFrame(this.raf),cancelAnimationFrame(this.focusRaf),this.resizeObserver.disconnect(),this.removeEventListeners(),this.breadcrumbs=null,this.breadcrumbsCurrent=null,this.breadcrumbsInnerEl.remove(),this.breadcrumbsInnerEl=null,this.innerEl.remove(),this.innerEl=null,this.initialized=!1)}handleResize(e){if(!e?.[0])return;const t=e?.[0]?.borderBoxSize?.[0]?.inlineSize||0;t&&(this.currentPixelTranslation=t*this.index*-1)}updateBreadcrumbClasses(e,t=!0){if(this.breadcrumbs.length>=this.dynamicBreadCrumbsCutoff&&this.breadcrumbsContainerEl){i(this.breadcrumbsInnerEl,{"no-transition":!t}),requestAnimationFrame((()=>{this.breadcrumbsInnerEl.classList.remove("no-transition")}));const s=this.breadcrumbsInnerEl.offsetWidth/2-this.breadcrumbDiameter/2-this.breadcrumbs[e].offsetLeft;this.breadcrumbsInnerEl.style.transform=`translateX(${s}px)`,this.breadcrumbs.forEach(((t,s)=>{i(t,{"hg-breadcrumb--hidden":s<=e-5||s>=e+5,"hg-breadcrumb--4":s===e-4||s===e+4,"hg-breadcrumb--3":s===e-3||s===e+3,"hg-breadcrumb--2":s===e-2||s===e+2,"hg-breadcrumb--1":s===e-1||s===e+1})}))}}updateBreadcrumbs(e,t,i){this.breadcrumbs?.length&&(this.updateBreadcrumbClasses(e,i),this.breadcrumbsContainerEl&&(!i||this.breadcrumbs.length>=10&&Math.abs(e-t)>1?e>t?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-(this.breadcrumbs[e].offsetLeft+this.breadcrumbDiameter)+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=this.breadcrumbs[e].offsetLeft+"px"):(e<t?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-this.breadcrumbs[t]?.offsetLeft-this.breadcrumbDiameter+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=this.breadcrumbs[t]?.offsetLeft+"px"),k(),this.raf=requestAnimationFrame((()=>{this.breadcrumbsCurrent.style.width=e>t?`${this.breadcrumbs[e]?.offsetLeft-this.breadcrumbsCurrent.offsetLeft+this.breadcrumbDiameter}px`:this.breadcrumbsCurrent.offsetLeft+this.breadcrumbsCurrent.offsetWidth-this.breadcrumbs[e]?.offsetLeft+"px"})),this.st=setTimeout((()=>{e>t?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-(this.breadcrumbs[e].offsetLeft+this.breadcrumbDiameter)+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=this.breadcrumbs[e].offsetLeft+"px"),k(),this.raf=requestAnimationFrame((()=>{this.breadcrumbsCurrent.style.width=""}))}),200))))}goTo({index:e,animate:t=!0,forceUpdate:i=!1,easing:s="ease"}){if(!this.slideEls?.[e])return;if(!this.initialized)return;cancelAnimationFrame(this.focusRaf);const r=e,a=this.index;this.index=r,clearTimeout(this.transitionSt),window.matchMedia("(prefers-reduced-motion)").matches&&(t=!1),this.isDragging=!1,this.progressToNextSlide=0,r!==a||i?(cancelAnimationFrame(this.raf),clearTimeout(this.st),this.updateBreadcrumbs(r,a,t),this.onSlideChange&&this.onSlideChange(r)):this.breadcrumbsCurrent.style.width="",this.innerEl.style.transition=t?`transform 0.4s ${s}`:"",this.innerEl.style.transform=`translateX(${-100*r}%)`,this.currentPixelTranslation=this.innerEl.scrollWidth/this.slideEls.length*r*-1,this.currentPercentTranslation=-100*r,this.previousEl&&(r<1?(this.rootEl.activeElement===this.previousEl&&(this.focusRaf=requestAnimationFrame((()=>{this.nextEl.focus()}))),this.previousEl.setAttribute("disabled","true")):this.previousEl.removeAttribute("disabled")),this.nextEl&&(r>=this.slideEls.length-1?(this.rootEl.activeElement===this.nextEl&&(this.focusRaf=requestAnimationFrame((()=>{this.previousEl.focus()}))),this.nextEl.setAttribute("disabled","true")):this.nextEl.removeAttribute("disabled")),this.transitionSt=setTimeout((()=>{this.innerEl.style.transition=""}),400)}handlePrevClick(){this.retreat()}handleNextClick(){this.advance()}retreat(e="ease"){"string"!=typeof e&&(e="ease"),this.index<1?this.goTo({index:this.index}):this.goTo({index:this.index-1,easing:e})}advance(e="ease"){"string"!=typeof e&&(e="ease"),this.index>=this.slideEls.length-1?this.goTo({index:this.index}):this.goTo({index:this.index+1,easing:e})}handleKeyDown(e){"ArrowRight"===e.code&&(e.preventDefault(),this.advance()),"ArrowLeft"===e.code&&(e.preventDefault(),this.retreat())}startMouseDrag(e){e.stopPropagation(),e.button>0||this.startDrag({x:e.clientX,y:e.clientY})}startTouchDrag(e){e.stopPropagation(),this.startDrag({x:e.touches.item(0).clientX,y:e.touches.item(0).clientY})}startDrag(e){this.slides.length<2||!this.initialized||(this.isDragging=!0,clearTimeout(this.transitionSt),cancelAnimationFrame(this.raf),this.progressToNextSlide=0,this.currentPixelTranslation=S(this.innerEl),this.breadcrumbsCurrent.style.transition="none",this.dragStartPoint=e,this.lastDragPoint=this.dragStartPoint)}mouseDrag(e){s(this.drag,10,this)({x:e.clientX,y:e.clientY})}touchDrag(e){s(this.drag,10,this)({x:e.touches.item(0).clientX,y:e.touches.item(0).clientY},!0)}drag(e,t=!1){if(this.slides.length<2||!this.isDragging||!this.initialized)return;this.currentPixelTranslation=S(this.innerEl);const i=this.containerEl.offsetWidth*this.dragLimit;let s=e.x-this.dragStartPoint.x,r=e.y-this.dragStartPoint.y,a=Math.abs(r)/Math.abs(s);if(t&&a>.85)return void this.endDrag();const n=e.x-this.lastDragPoint.x;this.progressToNextSlide=Math.abs(s/i);let o=this.currentPixelTranslation+n;const l=0===this.index&&s>0||this.index===this.slideEls.length-1&&s<0;if(l){let e=n*Math.max(1-Math.abs(s)/(.5*this.containerEl.offsetWidth),.1);o=this.currentPixelTranslation+e,this.progressToNextSlide=Math.abs(s/i)}this.lastDragPoint=e,this.currentPixelTranslation=o,this.currentPercentTranslation=this.currentPixelTranslation/this.containerEl.offsetWidth*100,s>0?(this.breadcrumbsCurrent.style.left="",this.breadcrumbsCurrent.style.right=this.breadcrumbsInnerEl.offsetWidth-(this.breadcrumbs[this.index].offsetLeft+this.breadcrumbDiameter)+"px"):(this.breadcrumbsCurrent.style.right="",this.breadcrumbsCurrent.style.left=`${this.breadcrumbs[this.index].offsetLeft}px`),this.breadcrumbsCurrent.style.width=l?`${this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.currentPercentTranslation+100*this.index)/100)}px`:`${Math.min(2.75*this.breadcrumbDiameter,this.breadcrumbDiameter+Math.abs(4*this.breadcrumbDiameter*(this.currentPercentTranslation+100*this.index)/100))}px`,this.innerEl.style.transform=`translateX(${this.currentPercentTranslation}%)`,this.innerEl.style.transition=""}endDrag(){this.isDragging=!1,this.breadcrumbsCurrent.style.transition="",this.innerEl.style.transition="",this.dragStartPoint={x:0,y:0},this.lastDragPoint={x:0,y:0},this.progressToNextSlide>=1?this.currentPercentTranslation+100*this.index<0?this.raf=requestAnimationFrame((()=>this.advance("cubic-bezier(0.25, .25, 0.5, 1)"))):this.raf=requestAnimationFrame((()=>this.retreat("cubic-bezier(0.25, .25, 0.5, 1)"))):this.raf=requestAnimationFrame((()=>this.goTo({index:this.index})))}}function k(){return document.body.offsetTop}function S(e){if(!e)return;const t=e.getBoundingClientRect(),i=e.parentNode.getBoundingClientRect();return t.left-i.left}var L='.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}';class P{initialized;slides;currentSlide;containerEl;scrollContainerEl;innerEl;onSlideChange;onRequestClose;constructor({slides:e,containerEl:t,onSlideChange:i,onRequestClose:s=null}){this.initialized=!1,this.slides=e,this.currentSlide=null,this.containerEl=t,this.scrollContainerEl=null,this.innerEl=null,this.onSlideChange=i,this.init=this.init.bind(this),this.destroy=this.destroy.bind(this),this.onBackGroundClick=this.onBackGroundClick.bind(this),this.onRequestClose=s,this.handleScroll=this.handleScroll.bind(this)}init(e=0){this.initialized||(this.initialized=!0,this.innerEl=t({classes:D("inner"),contents:this.slides}),this.scrollContainerEl=t({classes:D("container"),contents:this.innerEl}),this.containerEl.appendChild(this.scrollContainerEl),this.scrollContainerEl.addEventListener("click",this.onBackGroundClick),this.scrollContainerEl.addEventListener("scroll",this.handleScroll,{passive:!0}),this.goTo({index:e,animate:!1}))}destroy(){this.initialized&&(this.initialized=!1,this.scrollContainerEl.removeEventListener("click",this.onBackGroundClick),this.scrollContainerEl.removeEventListener("scroll",this.handleScroll),this.scrollContainerEl.remove(),this.scrollContainerEl=null)}handleScroll(e){r(this.slides).then((e=>{this.currentSlide!==e&&(this.currentSlide=e,this.onSlideChange&&this.onSlideChange(this.currentSlide))}))}onBackGroundClick(e){e.target===this.scrollContainerEl&&this.onRequestClose&&this.onRequestClose()}goTo({index:e,animate:t=!0}){if(!this.slides?.[e])return;const i=this.slides[e].offsetTop;this.currentSlide=e,this.onSlideChange&&this.onSlideChange(this.currentSlide),this.scrollContainerEl?.scrollTo({top:i-10,behavior:t?"smooth":"instant"})}}function D(e){return"behold-ps-"+e}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>',z='<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 T extends a{label="PopoverSlideVideo";videoEl;soundControlEl;isPlaying=!1;post;constructor(){super(),l.register(),this.onLoad=this.onLoad.bind(this),this.onPlay=this.onPlay.bind(this),this.onPause=this.onPause.bind(this),this.play=this.play.bind(this),this.pause=this.pause.bind(this),this.togglePlayback=this.togglePlayback.bind(this),this.toggleSound=this.toggleSound.bind(this),this.showSoundControl=this.showSoundControl.bind(this),this.hideSoundControl=this.hideSoundControl.bind(this),this.onPropChange(this.handlePropChange,["isPlaying"],[]),this.onStateChange(this.handleStateChange),this.onConnect((()=>{this.videoEl=t({type:"behold-video",classes:"video",props:{mediaUrl:this.post.mediaUrl,sizes:this.post.sizes},listeners:{click:this.togglePlayback,load:this.onLoad,play:this.onPlay,pause:this.onPause}}),this.soundControlEl=t({type:"button",classes:"video-mute",contents:this.state.isMuted?M:z,listeners:{click:this.toggleSound}}),this.state.isMuted?this.videoEl.mute():this.videoEl.unmute(),this.classList.add("video-container","video-container--paused"),this.replaceChildren(this.videoEl,this.soundControlEl)}))}handlePropChange({changedProp:e,newValue:t}){if("isPlaying"===e)t&&this.videoEl?.isLoaded&&!this.videoEl.isPlaying&&this.videoEl.play()}handleStateChange({changedProps:e,newState:t}){e.includes("isMuted")&&this.videoEl&&this.soundControlEl&&(t.isMuted?(this.videoEl.mute(),this.soundControlEl.innerHTML=M):(this.videoEl.unmute(),this.soundControlEl.innerHTML=z))}onLoad(){this.dispatchEvent(new Event("load")),this.classList.add("is-loaded"),this.isPlaying&&!this.videoEl.isPlaying&&this.videoEl.play()}onPlay(){this.classList.remove("video-container--paused")}onPause(){this.classList.add("video-container--paused")}play(){this.isPlaying=!0}pause(){this.isConnected&&this.videoEl.isPlaying&&this.videoEl.pause()}togglePlayback(){this.videoEl.isPlaying?this.pause():this.play()}toggleSound(){this.videoEl.muted?this.updateState({isMuted:!1}):this.updateState({isMuted:!0})}showSoundControl(){this.isConnected&&this.soundControlEl.classList.add("video-mute--visible")}hideSoundControl(){this.isConnected&&this.soundControlEl.classList.remove("video-mute--visible")}preload(){this.videoEl?.preload()}static register(e="behold-popover-slide-video"){return customElements.get(e)||customElements.define(e,T),e}}var I='<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>',B='<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";containerEl;spaceholderEl;childEls;previousEl;nextEl;breadcrumbsEl;childCarousel;currentSlideIndex=0;post;constructor(){super(),this.onPropChange((()=>{}),["post"]),h.register(),T.register(),this.handleSlideChange=this.handleSlideChange.bind(this),this.onConnect((()=>{this.childEls=this.buildSlideEls(),this.spaceholderEl=t({type:"img",classes:"slide__carousel-spaceholder",attributes:{src:`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`,height:this.post.sizes?.full?.height,width:this.post.sizes?.full?.width}}),this.previousEl=t({type:"button",classes:"slide__carousel-previous",attributes:{"aria-label":"Previous slide"},contents:I}),this.nextEl=t({type:"button",classes:"slide__carousel-next",attributes:{"aria-label":"Next slide"},contents:B}),this.breadcrumbsEl=t({classes:"slide__carousel-breadcrumbs"}),this.containerEl=t({classes:"slide__carousel",contents:[...this.childEls,this.previousEl,this.nextEl,this.breadcrumbsEl]}),this.replaceChildren(this.spaceholderEl,this.containerEl),this.childCarousel=new _({slides:this.childEls,containerEl:this.containerEl,keyboardNav:!1,breadcrumbsContainerEl:this.breadcrumbsEl,dynamicBreadCrumbsCutoff:7,previousEl:this.previousEl,nextEl:this.nextEl,dragLimit:.2,onSlideChange:this.handleSlideChange})}))}activate(){this.childCarousel.init(0),this.handleSlideChange(this.currentSlideIndex)}updateTabbable(){y({include:[this.childEls[this.currentSlideIndex]],exclude:this.childEls.filter(((e,t)=>t!==this.currentSlideIndex)),merge:!0})}handleSlideChange(e){this.currentSlideIndex=e,this.childEls.forEach(((t,i)=>{A(t)&&(i===e?(t.showSoundControl(),t.play()):(t.hideSoundControl(),t.pause()))}));const t=this.childEls[e-1],i=this.childEls[e+1];t&&t.preload(),i&&i.preload();const s=d(this.post.children[e].colorPalette?.dominant||"100,100,100").map((e=>Math.round(e)));this.style.backgroundColor=`hsl(${s[0]} ${Math.min(s[1],35)}% ${Math.min(s[2],13)}%)`,this.updateTabbable(),this.updateState({popoverOverlayColor:`hsl(${s[0]} ${Math.min(s[1],50)}% ${Math.min(s[2],15)}% / .85)`})}buildSlideEls(){return this.post.children.map((e=>{let i=null;switch(e.mediaType){case"IMAGE":i=t({type:"behold-image",classes:"slide__carousel-slide",props:{sizes:e.sizes,mediaUrl:e.mediaUrl,isSquare:!1}});break;case"VIDEO":i=t({type:"behold-popover-slide-video",classes:"slide__carousel-slide",props:{post:e}})}return i}))}play(){const e=this.childEls[this.currentSlideIndex];A(e)&&(e.showSoundControl(),e.play())}pause(){this.childEls.filter(A).forEach((e=>{e.hideSoundControl(),e.pause()}))}preload(){this.childEls?.[0]?.preload()}static register(e="behold-popover-slide-album"){return customElements.get(e)||customElements.define(e,F),e}}const A=e=>"BEHOLD-POPOVER-SLIDE-VIDEO"===e.tagName;var R='<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 N extends a{label="PopoverGallerySlide";innerEl;mediaContainerEl;avatarImageEl;headerText;avatarEl;headerEl;captionEl;footerLinkEl;footerEl;textEl;mediaEl;moreEl;post;feedMetadata;constructor(){super(),this.onPropChange(this.handlePropChange,["post","feedMetadata"]),h.register(),T.register(),F.register(),this.expandCaption=this.expandCaption.bind(this),this.onConnect((()=>{this.render()}))}render(){this.classList.remove("is-loaded");const e=d(this.post.colorPalette?.dominant||"100,100,100").map((e=>Math.round(e))),i=`hsl(${e[0]} ${Math.min(e[1],35)}% ${Math.min(e[2],13)}%)`;switch(this.post.mediaType){case"IMAGE":this.mediaEl=t({type:"behold-image",classes:"slide__media",style:{backgroundColor:i},props:{sizes:this.post.sizes,mediaUrl:this.post.mediaUrl,isSquare:!1}});break;case"VIDEO":this.mediaEl=t({type:"behold-popover-slide-video",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}});break;case"CAROUSEL_ALBUM":this.mediaEl=t({type:"behold-popover-slide-album",classes:"slide__media",style:{backgroundColor:i},props:{post:this.post}})}this.avatarImageEl=this.feedMetadata?.profilePictureUrl?t({type:"img",attributes:{src:this.feedMetadata.profilePictureUrl}}):null,this.headerText="@"+this.feedMetadata.username,this.feedMetadata.hashtags&&(this.avatarImageEl=R,this.headerText=this.feedMetadata.hashtags.join(", ")),this.avatarEl=this.avatarImageEl?t({classes:"slide__avatar",contents:this.avatarImageEl,attributes:{"aria-label":this.feedMetadata.hashtags?"hashtags":"username"}}):null,this.headerEl=t({classes:"slide__header",contents:[this.avatarEl,this.headerText]}),this.captionEl=this.post?.caption?.trim()?.length?t({classes:"slide__caption",contents:this.post.caption}):null,this.footerLinkEl=this.post.permalink?t({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.footerEl=t({classes:"slide__footer",contents:[this.footerLinkEl]}),this.textEl=t({classes:"slide__text",contents:[this.headerEl,this.captionEl,this.footerEl]}),this.innerEl=t({classes:"slide__inner",contents:[this.mediaEl,this.textEl]}),this.moreEl=t({type:"button",classes:"slide__more",contents:"… more",listeners:{click:this.expandCaption}}),this.replaceChildren(this.innerEl),n(),this.to((()=>{this.classList.add("is-loaded")}),10,"onConnect")}handlePropChange({changedProp:e}){if("feedMetadata"===e){if(!this.isConnected)return;this.avatarImageEl.src=this.feedMetadata.profilePictureUrl,this.headerText="@"+this.feedMetadata.username,this.feedMetadata.hashtags&&(this.avatarImageEl=R,this.headerText=this.feedMetadata.hashtags.join(", ")),this.avatarEl.replaceChildren(this.avatarImageEl),this.avatarEl.setAttribute("aria-label",this.feedMetadata.hashtags?"hashtags":"username")}}activate(){if("VIDEO"===this.post.mediaType){const e=this.mediaEl;e.play(),e.showSoundControl()}if("CAROUSEL_ALBUM"===this.post.mediaType){this.mediaEl.activate()}}deactivate(){if("VIDEO"===this.post.mediaType){this.mediaEl.pause()}if("CAROUSEL_ALBUM"===this.post.mediaType){this.mediaEl.pause()}}preload(){this.mediaEl.preload()}expandCaption(){this.captionEl&&(this.captionEl.style.transition="",this.captionEl.style.height=this.captionEl.offsetHeight+"px",this.captionEl.innerHTML=this.post?.caption||"",n(),this.raf((()=>{this.captionEl.style.transition="height .3s ease",this.captionEl.style.height=this.captionEl.scrollHeight+"px",this.to((()=>{this.captionEl.style.transition="",this.captionEl.style.height=""}),300,"expandCaption")}),"expandCaption"))}collapseCaption(){if(!this.captionEl)return;const e=o({text:this.post.caption,maxChars:120,maxLines:4});this.captionEl.innerHTML=e,e?.length<this.post?.caption?.length&&this.captionEl.appendChild(this.moreEl)}static register(e="behold-popover-gallery-slide"){return customElements.get(e)||customElements.define(e,N),e}}var O=":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;width:100%;z-index:99999}:host *{box-sizing:border-box}@media (max-width:1200px){:host{--text-width:300px;--text-size:13px}}@media (max-width:900px){:host{--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{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%}: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}@media (max-width:900px){.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}@media (max-width:900px){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}@media (max-width:900px){.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}.slide__media img,.slide__media video{height:auto;max-height:100%;max-width:100%;object-fit:contain;object-position:center center;opacity:0;transition:opacity .4s ease;width:auto}behold-image{pointer-events:none}behold-image.is-loaded img{opacity:1}.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%}.slide__carousel:after,.slide__carousel:before{content:\"\";pointer-events:none;position:absolute;z-index:1}.slide__carousel:after{background:var(--icon-gallery);height:20px;left:20px;opacity:.75;top:20px;width:20px}@media (max-width:900px){.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}@media (max-width:900px){.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%);transition:opacity .3s ease;width:30px;z-index:1}: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}@media (max-width:900px){.slide__carousel-next,.slide__carousel-previous{background-color:transparent;box-shadow:none;height:20px;width:20px}.slide__carousel-next svg path,.slide__carousel-previous svg path{fill:#fff}}.slide__carousel-previous{left:20px}.slide__carousel-previous svg{transform:translateX(-1px)}@media (max-width:900px){.slide__carousel-previous{left:10px}}.slide__carousel-next{right:20px}.slide__carousel-next svg{transform:translateX(1px)}@media (max-width:900px){.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%;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}.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}.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;transition:opacity .1s ease;width:60px}.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;border-left:1px solid 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;min-width:none;pointer-events:none;width:var(--text-width)}.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)}@media (max-width:900px){.slide__avatar{height:32px;width:32px}.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}@media (max-width:900px){.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}: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}@media (max-width:900px){.close{background-color:hsla(0,0%,97%,.85);border-radius:50%;opacity:1;right:5px;top:5px}.close svg{height:14px;width:14px}.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}",j='.hg-container{align-items:flex-start;backface-visibility:hidden;contain:layout style;justify-content:flex-start;user-select:none;will-change:transform}.hg-container,.hg-slide{display:flex;height:100%;width:100%}.hg-slide{align-items:center;contain:content;flex-grow:0;flex-shrink:0;justify-content:center}.hg-slide:active{cursor:grabbing}.hg-breadcrumbs{--ease:cubic-bezier(0.215,0.61,0.355,1);align-items:center;display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);justify-content:center;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}';class $ extends a{label="PopoverGallery";verticalScrollBreakpoint=900;shadow;fragment;styleEl;stylesAdded;overlayEl;previousEl;nextEl;closeEl;breadcrumbContainer;innerEl;postEls;hurdyGurdy;popoverScroller;currentPostIndex=0;posts;widgetSettings;feedMetadata;closeFocusEl=document.body;onSlideChange;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.onPropChange(this.handlePropChange,["posts","widgetSettings","feedMetadata"]),N.register(),this.handleSlideChange=this.handleSlideChange.bind(this),this.close=this.close.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.onStateChange((()=>{i(this,{"keyboard-nav":this.state.keyboardNavEnabled})})),this.onConnect((()=>{this.classList.add(`theme--${this.widgetSettings.popupColorTheme}`),i(this,{"keyboard-nav":this.state.keyboardNavEnabled}),this.overlayEl=t({classes:"overlay",listeners:{click:this.close}}),this.previousEl=t({type:"button",classes:"previous",attributes:{"aria-label":"Previous slide"},contents:I}),this.nextEl=t({type:"button",classes:"next",attributes:{"aria-label":"Next slide"},contents:B}),this.closeEl=t({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:e=>{e.preventDefault(),this.close()}}}),this.breadcrumbContainer=t({classes:"breadcrumbs"}),this.postEls=this.posts.map((e=>{const t=document.createElement("behold-popover-gallery-slide");return t.post=e,t.feedMetadata=this.feedMetadata,t})),this.innerEl=t({classes:"inner",contents:this.postEls}),this.fragment=document.createDocumentFragment(),this.fragment.replaceChildren(this.overlayEl,this.innerEl,this.breadcrumbContainer,this.previousEl,this.nextEl,this.closeEl),this.styleEl=t({type:"style",contents:[O.toString(),j.toString(),L.toString()]}),this.hurdyGurdy=new _({slides:this.postEls,containerEl:this.innerEl,breadcrumbsContainerEl:this.breadcrumbContainer,previousEl:this.previousEl,nextEl:this.nextEl,onSlideChange:this.handleSlideChange,breadcrumbDiameter:this.postEls.length>9?9:8}),this.popoverScroller=new P({slides:this.postEls,containerEl:this.innerEl,onSlideChange:this.handleSlideChange,onRequestClose:()=>{this.close()}}),this.onStateChange(this.handleStateChange),this.onResize(this,this,this.handleResize),document.addEventListener("keydown",this.handleKeydown)})),this.onDisconnect((()=>{w(this.closeFocusEl),this.hurdyGurdy.destroy(),this.popoverScroller.destroy(),this.shadow.replaceChildren(),this.hurdyGurdy=null,this.popoverScroller=null,this.overlayEl=null,this.previousEl=null,this.nextEl=null,this.closeEl=null,this.breadcrumbContainer=null,this.postEls=null,this.innerEl=null,this.fragment=null,this.styleEl=null}))}handlePropChange({changedProp:e,oldValue:t,newValue:i}){}handleStateChange({changedProps:e,newState:t}){e.includes("popoverOverlayColor")&&(this.overlayEl.style.backgroundColor=t.popoverOverlayColor)}handleKeydown(e){"Escape"===e.code&&(e.preventDefault(),this.close())}open(e,t){this.currentPostIndex=e,this.cancelRaf("open"),this.closeFocusEl=t,this.render(),n(),this.raf((()=>{this.classList.add("is-visible"),async function(e,t=[],i=0){u=e,c=C(e)?e:document,g=!0,y({include:[e],exclude:t}),document.addEventListener("keydown",E),m.observe(e,{subtree:!0,attributes:!0,attributeFilter:["disabled"],childList:!0});const s=await x();s[i]?.focus()}(this.shadow,this.postEls.filter(((t,i)=>i!==e)),1),this.checkSize(this.offsetWidth),this.postEls[e].activate()}),"open")}close(){this.cancelTo("close"),this.classList.remove("is-visible"),this.to(this.remove.bind(this),300,"close"),w(this.closeFocusEl)}handleSlideChange(e){this.currentPostIndex=e,y({include:[this.shadow],exclude:this.postEls.filter(((t,i)=>i!==e)),merge:!1}),this.onSlideChange&&this.onSlideChange(e),this.postEls.forEach(((t,i)=>{i===e?t.activate():t.deactivate()}));const t=this.postEls[e-1]??null,i=this.postEls[e+1]??null;if(t&&this.raf((()=>t.preload()),"preload"),i&&this.raf((()=>i.preload()),"preload"),"CAROUSEL_ALBUM"!==this.posts[e].mediaType){const t=d(this.posts[e]?.colorPalette?.dominant||"100,100,100").map((e=>Math.round(e)));this.updateState({popoverOverlayColor:`hsl(${t[0]} ${Math.min(t[1],50)}% ${Math.min(t[2],15)}% / .85)`})}}checkSize(e){e>this.verticalScrollBreakpoint?(this.previousEl.style.display="",this.nextEl.style.display="",this.popoverScroller.destroy(),this.hurdyGurdy.init(this.currentPostIndex),this.postEls.forEach((e=>e.expandCaption()))):(this.hurdyGurdy.destroy(),this.popoverScroller.init(this.currentPostIndex),this.postEls.forEach((e=>e.collapseCaption())),this.previousEl.disabled=!1,this.previousEl.style.display="none",this.nextEl.disabled=!1,this.nextEl.style.display="none")}handleResize(e){const t=e?.borderBoxSize?.[0]?.inlineSize||0;this.checkSize(t)}render(){document.body.append(this),this.shadow.replaceChildren(this.fragment,this.styleEl)}static register(e="behold-popover-gallery"){return customElements.get(e)||customElements.define(e,$),e}}export{$ as default};
package/dist/widgets/GalleryWall.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GalleryWall.d.ts","sourceRoot":"","sources":["../../src/widgets/GalleryWall.ts"],"names":[],"mappings":"AAGA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAK5C,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,CAAkB;IAChD,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,gBAAgB,CAAC,EAAE,WAAW,EAAE;;KAAA;IAgChC,iBAAiB;IAYjB,oBAAoB;IAapB,oBAAoB;IASpB,KAAK;IAwBL;;OAEG;IACG,oBAAoB;IAoB1B,YAAY,CAAC,KAAK,EAAE,mBAAmB;IAUvC;;OAEG;IACH,uBAAuB;IAevB;;OAEG;IACH,mBAAmB;IAenB;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,QAAQ;IAO9B,WAAW,CAAC,UAAU,EAAE,UAAU;IAalC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;IAkB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IA8ErE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAsCtD,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"}
1
+ {"version":3,"file":"GalleryWall.d.ts","sourceRoot":"","sources":["../../src/widgets/GalleryWall.ts"],"names":[],"mappings":"AAGA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAK5C,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,CAAkB;IAChD,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,gBAAgB,CAAC,EAAE,WAAW,EAAE;;KAAA;IAgChC,iBAAiB;IAYjB,oBAAoB;IAapB,oBAAoB;IASpB,KAAK;IAwBL;;OAEG;IACG,oBAAoB;IAoB1B,YAAY,CAAC,KAAK,EAAE,mBAAmB;IAUvC;;OAEG;IACH,uBAAuB;IAevB;;OAEG;IACH,mBAAmB;IAenB;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,QAAQ;IAO9B,WAAW,CAAC,UAAU,EAAE,UAAU;IAYlC,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;;;;;;;;;;;IAkB7D,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,GAAE,OAAe;IAkFrE,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;IAsCtD,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@behold/widget",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "author": "Griffin Johnston",
5
5
  "keywords": [
6
6
  "behold",
package/dist/GalleryWall-nNT-7SSo.js DELETED
@@ -1 +0,0 @@
1
- import{c as t,s as e,a as s,t as i}from"./BeholdWidget-IH-1-Zxz.js";import{B as o,I as a,V as n,A as h,s as l,g as r}from"./Grid-tNDy9g9K.js";var d={popupColorTheme:"auto",hoverOverlayColor:"auto",hoverOverlayCustomColor:"0,0,0",hoverOverlayOpacity:65};class p extends o{label="GalleryWall";widgetSettings=d;feedMetadata;posts;previewLoadingColors=null;containerEl;heightRefEl;postEls;popoverGalleryEl;appliedBreakpoint;medianPaletteHSL;setupIsComplete=!1;popupGallery;constructor(){super(),this.onPropChange(this.handlePropChange,["widgetSettings","feedMetadata","posts","previewLoadingColors"],["widgetSettings","feedMetadata","posts"]),a.register(),n.register(),h.register(),this.handlePostClick=this.handlePostClick.bind(this),this.addEventListener("post-focus-next",this.handleFocusNextPost),this.addEventListener("post-focus-previous",this.handleFocusPreviousPost),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;user-select:none;width:100px}"]),this.setAttribute("tabindex","0"),this.setAttribute("aria-label","Gallery of Instagram posts. Shift + arrow keys to navigate"),this.onResize(this,this.containerEl,this.handleResize)}))}handlePropChange({changedProp:t}){switch(this.setupIsComplete||(this.setup(),this.setupIsComplete=!0),t){case"posts":this.handlePostsChange();break;case"widgetSettings":this.handleSettingsChange();break;case"feedMetadata":this.handleMetadataChange();break;case"previewLoadingColors":this.postEls.forEach((t=>{t.previewLoadingColors=this.previewLoadingColors})),e(this,{"is-previewing-loading-colors":!!this.previewLoadingColors})}}handlePostsChange(){this.postEls=[],this.renderBreakpoint(this.appliedBreakpoint,!0),this.popoverGalleryEl&&(this.popoverGalleryEl.posts=this.posts)}handleSettingsChange(){"openPopupGallery"===this.widgetSettings.onPostClick&&this.enablePopoverGallery(),this.renderBreakpoint(this.widgetSettings.breakpoints.default),this.postEls.forEach((t=>{t.widgetSettings=this.widgetSettings}))}handleMetadataChange(){this.postEls.forEach((t=>{t.feedMetadata=this.feedMetadata}))}setup(){if("transparent"!==this.widgetSettings.loadingColor){const t=this.posts.filter((t=>t.colorPalette)).map((t=>t.colorPalette));this.medianPaletteHSL=r(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-5aBK27WQ.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]}})}handleResize(t){const e=t.contentBoxSize?.[0]?.inlineSize,s=this.widgetSettings.breakpoints,i=this.getMatchingBreakpoint(e,s);this.renderBreakpoint(i)}handleFocusPreviousPost(){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()}handleFocusNextPost(){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()}handlePostClick(t){this.popoverGalleryEl.open(this.postEls.indexOf(t),t)}renderPosts(t){this.cancelRaf("renderPosts"),this.postEls=this.createPostEls(t),this.raf((()=>{this.heightRefEl.replaceChildren(...this.postEls),this.setContainerHeight()}),"renderPosts")}getMatchingBreakpoint(t,e){return Object.entries(e).map((([t,e])=>({width:t,...e}))).filter((t=>"default"!==t.width)).sort(((t,e)=>e.width.localeCompare(t.width))).reduce(((e,s)=>t<=parseInt(s.width)?s:e),{...e.default,numPosts:this.posts.length})}renderBreakpoint(t,e=!1){this.postEls||(e=!0);const i=this.appliedBreakpoint;this.appliedBreakpoint=t;const{gap:o,borderRadius:a,numPosts:n,galleryWallLayout:h,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),s(this.containerEl,"--post-border-radius",`${a}%`),(i?.numPosts!==n||i?.galleryWallNamedLayout!==l.toString()||e)&&this.renderPosts(t);const r=this.containerEl.offsetWidth,d=parseInt(o.x)/1e3*r,p=parseInt(o.y)/1e3*r;this.postEls.forEach(((t,e)=>{const[s,i,o,a]=h?.[e]?h[e].split(",").map((t=>parseInt(t))):[0,0,10,10],n=s*(r/100)+d/2,l=i*(r/100);t.style.transform=`translate(${n}px, ${l}px`,t.style.width=o*(r/100)-d+"px",t.style.height=a*(r/100)-p+"px"})),this.setContainerHeight()}createPostEls(e){const{gap:s}=e,i=e?.numPosts||this.posts?.length||200;return this.posts.filter(((t,e)=>e<i)).map((i=>{let o="behold-image-post";"VIDEO"===i.mediaType&&(o="behold-video-post"),"CAROUSEL_ALBUM"===i.mediaType&&(o="behold-album-post");return t({type:o,style:{borderRadius:`${e.borderRadius}%`},props:{post:i,widgetSettings:this.widgetSettings,feedMetadata:this.feedMetadata,medianPaletteHSL:this.medianPaletteHSL,onClick:this.handlePostClick,hasRowGap:"0"!=`${s.y}`}})}))}setContainerHeight=i((()=>{this.style.height=`${this.heightRefEl.scrollHeight}px`}),10,this);static register(t="behold-gallery-wall"){return customElements.get(t)||customElements.define(t,p),t}}export{p as default};