@behold/widget 0.5.55 → 0.5.57

package/dist/ErrorMessage-tHLrPf_h.js

@@ -0,0 +1,110 @@
+import { B as BaseElement, t as throttle, c as createElement, a as setClasses } from './index-R4lEDZFo.js';
+
+var logo = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 91.5 29.5\" enable-background=\"new 0 0 91.5 29.5\" xml:space=\"preserve\">\n<g>\n\t<path fill=\"#3BA566\" d=\"M12,11.7c0.8,0,1.8,0.1,2.8,0.3c1.3,0.3,2.4,1.3,2.6,2.6c0.2,1,0.3,1.9,0.3,2.8s-0.1,1.9-0.3,2.9\n\t\tc-0.3,1.3-1.3,2.3-2.6,2.6c-1,0.2-2,0.4-2.8,0.4c-0.9,0-1.9-0.1-3-0.4s-2-1.2-2.3-2.3s-0.4-2.1-0.4-3c0-0.8,0.1-1.8,0.3-2.8\n\t\tc0.3-1.3,1.3-2.4,2.6-2.6C10.2,11.9,11.2,11.7,12,11.7 M12,5.5c-1.4,0-2.8,0.2-4,0.5c-3.8,0.7-6.7,3.6-7.5,7.4\n\t\tC0.2,14.7,0,16.1,0,17.5c0,1.6,0.2,3.1,0.6,4.5c0.8,3.4,3.5,6.1,6.9,7c1.4,0.3,2.9,0.5,4.5,0.5c1.5,0,2.9-0.2,4.2-0.5\n\t\tc3.7-0.8,6.5-3.7,7.3-7.4c0.3-1.3,0.5-2.7,0.5-4.2c0-1.4-0.2-2.8-0.4-4c-0.8-3.8-3.7-6.6-7.5-7.4C14.8,5.7,13.4,5.5,12,5.5L12,5.5z\n\t\t\"/>\n</g>\n<g id=\"type\">\n\t<path fill=\"#FFFFFF\" d=\"M42.2,20.8c0,2.6-1.9,4.3-5.1,4.3h-5.2c0.5-1.4,0.6-2.5,0.6-3.9v-7.7c0-1.4-0.1-2.5-0.6-3.9H37\n\t\tc2.4,0,4.7,1,4.7,3.6c0,2.1-1.4,3.4-3.1,3.9C40.5,17.5,42.2,18.5,42.2,20.8z M35.2,10.4c0,1.1-0.1,2-0.1,3v3.4h1.4\n\t\tc1.7,0,2.5-1.2,2.5-3.1c0-2.2-1-3.4-3.2-3.4C35.6,10.4,35.4,10.4,35.2,10.4z M39.5,21.3c0-2.4-1.4-3.6-3.3-3.6\n\t\tc-0.2,0-0.6,0-1.1,0.1v3.5c0,0.9,0,2,0.1,2.9c0.5,0.1,0.9,0.1,1.4,0.1C38.6,24.3,39.5,23.2,39.5,21.3z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M52.7,19.1h-6.5c0.2,2.5,1.2,4.1,3.8,4.1c1.1,0,1.8-0.3,2.6-0.9c-0.2,1.6-1.5,3.1-3.9,3.1c-3,0-5-2.4-5-6.2\n\t\tc0-3.4,1.6-6.4,5-6.4c2.9,0,4,2.1,4,4.5C52.7,17.3,52.7,19.1,52.7,19.1z M50.2,17.3c0-2.5-0.7-3.6-1.8-3.6c-1.3,0-2.1,1.5-2.1,4.3\n\t\tv0.3h3C50,18.4,50.2,18.3,50.2,17.3z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M64,25.2h-2.8c-0.2-1.1-0.3-2.4-0.3-3.8v-4.6c0-1.4-0.5-2.1-1.5-2.1c-0.6,0-1.3,0.2-2.1,1.2v5.6\n\t\tc0,1.3,0.1,2.3,0.6,3.6h-3.6c0.5-1.3,0.6-2.3,0.6-3.6v-8.2c0-1.5,0-2.9-0.6-4c1.1-0.3,2-0.7,3-1.2v7c0.9-1.6,2.2-2.2,3.4-2.2\n\t\tc1.6,0,2.6,1,2.6,3.4v5C63.4,22.7,63.5,23.8,64,25.2z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M65.4,19.2c0-3.8,2-6.3,5-6.3c2.9,0,4.8,2.7,4.8,6.3c0,3.8-2,6.3-5,6.3C67.3,25.4,65.4,22.8,65.4,19.2z\n\t\t M72.4,19.9c0-3.1-0.7-6.1-2.4-6.1c-1.3,0-1.9,1.7-1.9,4.6c0,3.2,0.7,6.1,2.4,6.1C71.8,24.5,72.4,23,72.4,19.9z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M77.3,21.5v-8.2c0-1.5,0-2.9-0.6-4c1.1-0.3,2-0.7,3-1.2v13.4c0,1.3,0.1,2.3,0.6,3.6h-3.6\n\t\tC77.2,23.8,77.3,22.8,77.3,21.5z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M89,25.2c-0.2-0.3-0.4-0.8-0.4-1.4c-0.7,1.1-1.6,1.5-2.8,1.5c-2.2,0-4-1.9-4-5.6c0-4.4,2.4-6.8,5-6.8\n\t\tc0.7,0,1.2,0.1,1.7,0.4l0,0c0-1.4,0-2.9-0.6-3.9c1.1-0.3,2-0.7,3-1.2v13.3c0,1.3,0.1,2.2,0.6,3.6H89V25.2z M88.5,23.1v-6.6\n\t\tc0-2-0.8-2.6-1.7-2.6c-1.4,0-2.3,1.5-2.3,4.8c0,3.4,1.1,4.9,2.8,4.9C87.8,23.5,88.2,23.4,88.5,23.1z\"/>\n</g>\n<g>\n\t<path fill=\"#FFFFFF\" d=\"M32.3,4.7V0.1h2.2c1,0,1.6,0.7,1.6,1.5c0,0.8-0.6,1.5-1.6,1.5h-1.2v1.7H32.3z M34.3,0.9h-1.1v1.3h1.1\n\t\tC34.7,2.2,35,2,35,1.6C35,1.2,34.7,0.9,34.3,0.9z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M39.5,0C41,0,42,1,42,2.4c0,1.4-1,2.4-2.4,2.4c-1.4,0-2.4-1-2.4-2.4C37.1,1,38.1,0,39.5,0z M39.5,0.9\n\t\tc-0.9,0-1.4,0.7-1.4,1.5c0,0.9,0.6,1.5,1.4,1.5S41,3.3,41,2.4C41,1.5,40.4,0.9,39.5,0.9z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M46.8,4.7L46,1.5l-0.8,3.2h-1.1l-1.3-4.7h1.1l0.8,3.4l0.9-3.4h0.8l0.9,3.4l0.8-3.4h1.1l-1.3,4.7H46.8z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M50.4,4.7V0.1h3.3v0.9h-2.3v1h2.3v0.9h-2.3v1.1h2.3v0.9H50.4z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M57.8,4.7l-0.9-1.7h-0.7v1.7h-1V0.1h2.2c1,0,1.6,0.6,1.6,1.5c0,0.8-0.5,1.3-1,1.4l1.1,1.8H57.8z M57.2,0.9\n\t\th-1v1.3h1c0.4,0,0.7-0.3,0.7-0.6C57.9,1.2,57.6,0.9,57.2,0.9z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M60.4,4.7V0.1h3.3v0.9h-2.3v1h2.3v0.9h-2.3v1.1h2.3v0.9H60.4z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M65.1,4.7V0.1H67c1.5,0,2.5,0.9,2.5,2.3c0,1.4-1,2.3-2.5,2.3H65.1z M66.1,3.9H67c0.9,0,1.5-0.7,1.5-1.5\n\t\tC68.4,1.6,67.9,1,67,1h-0.8V3.9z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M73.3,4.7V0.1h2.5c0.9,0,1.3,0.6,1.3,1.2c0,0.6-0.4,1-0.8,1.1c0.5,0.1,0.9,0.6,0.9,1.1\n\t\tc0,0.7-0.5,1.3-1.4,1.3H73.3z M74.3,2h1.2c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5h-1.2V2z M74.3,3.9h1.3\n\t\tc0.4,0,0.6-0.2,0.6-0.6c0-0.3-0.2-0.5-0.6-0.5h-1.3V3.9z\"/>\n\t<path fill=\"#FFFFFF\" d=\"M79.8,4.7V2.8L78,0.1h1.1L80.3,2l1.1-1.9h1.1l-1.8,2.8v1.9H79.8z\"/>\n</g>\n</svg>";
+
+var upgradeIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 17.54 17.54\"><path d=\"M8.77,17.54c-2.35,0-4.7-.81-6.33-2.44C-.81,11.84-.81,5.69,2.44,2.44,5.69-.81,11.84-.81,15.1,2.44c3.26,3.25,3.25,9.4,0,12.66-1.63,1.63-3.98,2.44-6.33,2.44ZM8.77,1.51c-1.97,0-3.94,.67-5.27,1.99C.84,6.16,.84,11.38,3.5,14.04c2.66,2.66,7.88,2.66,10.54,0,2.66-2.66,2.66-7.88,0-10.54-1.33-1.33-3.3-1.99-5.27-1.99Z\"/><path d=\"M8.76,13.02c-.41,0-.75-.34-.75-.75V5.26c0-.41,.34-.75,.75-.75s.75,.34,.75,.75v7.01c0,.41-.34,.75-.75,.75Z\"/><path d=\"M6.36,8.42c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l2.41-2.41c.29-.29,.77-.29,1.06,0s.29,.77,0,1.06l-2.41,2.41c-.15,.15-.34,.22-.53,.22Z\"/><path d=\"M11.17,8.42c-.19,0-.38-.07-.53-.22l-2.41-2.41c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l2.41,2.41c.29,.29,.29,.77,0,1.06-.15,.15-.34,.22-.53,.22Z\"/></svg>";
+
+var errorIcon = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 20.5 20.5\" enable-background=\"new 0 0 20.5 20.5\" xml:space=\"preserve\">\n<g>\n\t<path fill=\"#010101\" d=\"M10.2,20.5c-1.2,0-2.4-0.2-3.8-0.5c-2.9-0.7-5.3-3.1-6-6.1C0.2,12.7,0,11.4,0,10.3C0,9.2,0.1,8,0.4,6.8\n\t\tC1.1,3.6,3.7,1,6.9,0.4c2.4-0.5,4.4-0.5,6.8,0c3.3,0.7,5.8,3.2,6.5,6.5c0.2,1.1,0.4,2.3,0.4,3.3c0,1.1-0.1,2.3-0.4,3.5l0,0\n\t\tc-0.7,3.2-3.2,5.7-6.4,6.4C12.5,20.4,11.3,20.5,10.2,20.5z M10.2,1.5c-0.9,0-2,0.1-3,0.3C4.5,2.4,2.5,4.5,1.9,7.1\n\t\tc-0.2,1.1-0.4,2.2-0.4,3.1c0,1,0.1,2.2,0.4,3.4c0.6,2.4,2.5,4.4,4.9,5c2.3,0.6,4.2,0.6,6.6,0.1c2.6-0.6,4.7-2.7,5.2-5.3\n\t\tc0.2-1.1,0.3-2.1,0.3-3.2c0-1-0.1-2-0.3-3c-0.5-2.7-2.6-4.7-5.3-5.3C12.2,1.6,11.2,1.5,10.2,1.5z\"/>\n</g>\n<g>\n\t<g>\n\t\t<path fill=\"#010101\" d=\"M10.2,13.5c0.6,0,1,0.5,1,1.1c0,0.6-0.5,1.1-1,1.1s-1-0.5-1-1.1C9.2,14,9.7,13.5,10.2,13.5z M9.6,12.3\n\t\t\tL9.3,4.7h1.9l-0.3,7.5H9.6z\"/>\n\t</g>\n</g>\n</svg>";
+
+var css_248z = ":host{align-items:center;background:#f1f1f1 url(https://behold.pictures/widget:error-background.webp) 0 no-repeat;background-size:auto 100%;border:none;border-radius:20px;box-shadow:none;box-sizing:border-box;color:#000;display:flex;height:200px;justify-content:space-between;margin:0;max-width:750px;min-width:50px;outline:none;overflow:hidden;width:100%}:host *{box-sizing:border-box}:host(.large){height:180px}:host(.medium),:host(.small){background:#f1f1f1 url(https://behold.pictures/widget:error-background-small.webp) top no-repeat;background-size:auto 186px;flex-direction:column;height:auto}.logo{align-items:center;background:linear-gradient(90deg,rgba(0,0,0,.75) 10%,rgba(0,0,0,.5) 75%,transparent);display:flex;flex-grow:0;flex-shrink:0;height:100%;justify-content:center;padding:0 10px 5px 0;width:220px}.logo svg{height:40px;width:auto}:host(.large) .logo{width:180px}:host(.large) .logo svg{height:35px}:host(.medium) .logo,:host(.small) .logo{background:linear-gradient(180deg,rgba(0,0,0,.75) 10%,rgba(0,0,0,.5) 40%,transparent);height:150px;width:100%}.message{align-items:center;display:flex;flex-direction:column;flex-grow:1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;gap:15px;justify-content:center;line-height:1.5;padding:20px 60px 20px 80px;text-align:center}.message a{color:#000;display:inline-block;text-decoration:underline}:host(.large) .message{font-size:15px;gap:10px;padding:20px 30px 20px 70px}:host(.medium) .message{font-size:16px;gap:15px;padding:40px 30px}:host(.small) .message{font-size:15px;gap:15px;padding:30px 20px}.message__title{align-items:center;display:flex;font-size:20px;font-weight:500;justify-content:center}.message__title svg{height:25px;margin-right:15px;width:25px}:host(.large) .message__title{font-size:18px}:host(.large) .message__title svg{height:20px;margin-right:10px;width:20px}:host(.medium) .message__title,:host(.small) .message__title{flex-direction:column;font-size:17px}:host(.medium) .message__title svg,:host(.small) .message__title svg{margin-bottom:7px;margin-right:0}";
+var styles = css_248z;
+
+/*
+ *   ErrorMessage
+ */
+class ErrorMessage extends BaseElement {
+    label = 'ErrorMessage';
+    // Internal
+    shadow;
+    logoEl;
+    styleEl;
+    errorTitleEl;
+    errorMessageEl;
+    errorMessageTextEl;
+    // Provided
+    errorMessage;
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: 'open' });
+        // Define which props will trigger _handlePropChange
+        this.onPropChange(this._handlePropChange, ['errorMessage']);
+        this.onConnect(() => {
+            this.onResize(this, this, throttle(this._handleResize, 50, this));
+        });
+        this.onConnect(() => {
+            this.render();
+        });
+    }
+    /*
+     *   Handle prop change
+     */
+    _handlePropChange({ changedProp }) {
+        this.render();
+    }
+    /**
+     * Render
+     */
+    render() {
+        if (!this.errorMessage)
+            return;
+        let titleIcon = errorIcon;
+        let errorTitle = 'Error';
+        if (this.errorMessage.includes('Upgrade')) {
+            titleIcon = upgradeIcon;
+            errorTitle = 'Upgrade Required';
+        }
+        this.logoEl = createElement({
+            type: 'a',
+            classes: 'logo',
+            contents: logo,
+            attributes: {
+                href: 'https://behold.so',
+                target: '_blank',
+                'aria-label': 'behold',
+            },
+        });
+        this.errorTitleEl = createElement({
+            classes: 'message__title',
+            contents: [titleIcon, errorTitle],
+        });
+        this.errorMessageTextEl = createElement({ classes: 'message__inner' });
+        this.errorMessageTextEl.innerHTML = this.errorMessage?.replace('Upgrade your plan', '<a href="https://app.behold.so/account" target="blank">Upgrade your plan</a>');
+        this.errorMessageEl = createElement({
+            classes: 'message',
+            contents: [this.errorTitleEl, this.errorMessageTextEl],
+        });
+        this.styleEl = createElement({ type: 'style', contents: styles.toString() });
+        this.shadow.beholdReplaceChildren(this.logoEl, this.errorMessageEl, this.styleEl);
+    }
+    /*
+     *   Handle Resize
+     */
+    _handleResize(entry) {
+        const width = entry?.borderBoxSize?.[0]?.inlineSize || entry?.contentRect?.width || 0;
+        let size = 'xlarge';
+        if (width < 600)
+            size = 'large';
+        if (width < 500)
+            size = 'medium';
+        if (width < 250)
+            size = 'small';
+        const widths = ['small', 'medium', 'large', 'xlarge'];
+        widths.forEach((sizeString) => {
+            const sizeClass = `${sizeString}`;
+            setClasses(this, {
+                [sizeClass]: sizeString === size,
+            });
+        });
+    }
+    /*
+     *   Register
+     */
+    static register(name = 'behold-error-message') {
+        if (!customElements.get(name)) {
+            customElements.define(name, ErrorMessage);
+        }
+        return name;
+    }
+}
+
+export { ErrorMessage as default };

package/dist/GalleryWall-Jlau7S7U.js

@@ -0,0 +1,354 @@
+import { c as createElement, a as setClasses, s as setCssVars, f as forceLayout, t as throttle } from './index-R4lEDZFo.js';
+import { B as BaseWidget, I as ImagePost, V as VideoPost, A as AlbumPost, b as baseGridStyles, g as getMedianHSL } from './base-GZO73SkY.js';
+
+var css_248z = ".posts{display:block;min-height:100%;width:100%}.height-ref{position:relative}.post{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;border:none;color:inherit;display:block;font:inherit;height:100px;left:0;line-height:normal;overflow:hidden;position:absolute;top:0;transform-origin:top left;transition:background .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100px}.post--placeholder{background-color:#dedede;position:absolute}";
+var styles = css_248z;
+
+/*
+ *   GalleryWall
+ */
+class GalleryWall extends BaseWidget {
+    label = 'GalleryWall';
+    // Provided
+    widgetSettings;
+    feedMetadata;
+    posts;
+    previewLoadingColors = null;
+    // Internal
+    containerEl;
+    heightRefEl;
+    postEls;
+    popoverGalleryEl;
+    appliedBreakpoint;
+    medianPaletteHSL;
+    constructor() {
+        super();
+        // Define which props will trigger _handlePropChange
+        this.onPropChange(this._handlePropChange, ['widgetSettings', 'feedMetadata', 'posts', 'previewLoadingColors'], ['widgetSettings', 'feedMetadata', 'posts'], this.setup);
+        // Register child components
+        ImagePost.register();
+        VideoPost.register();
+        AlbumPost.register();
+        // Bind event handlers
+        this._handlePostClick = this._handlePostClick.bind(this);
+        // Listen to focus
+        this.addEventListener('post-focus-next', this._handleFocusNextPost);
+        this.addEventListener('post-focus-previous', this._handleFocusPreviousPost);
+        // Connect
+        this.onConnect(() => {
+            this.style.opacity = '0';
+            this.heightRefEl = createElement({
+                classes: 'height-ref',
+            });
+            this.containerEl = createElement({
+                type: 'figure',
+                classes: 'posts',
+                contents: [this.heightRefEl],
+            });
+            this.renderWidget(this.containerEl, [baseGridStyles, styles]);
+            // A11y stuff
+            this.setAttribute('tabindex', '0');
+            this.setAttribute('aria-label', 'Gallery of Instagram posts. Shift + arrow keys to navigate');
+            // listen to resize
+            this.onResize(this, this.containerEl, this._handleResize);
+        });
+    }
+    /*
+     *   Run initial setup that requires data to be fully loaded
+     */
+    setup() {
+        // Calculate medianPaletteHSL
+        if (this.widgetSettings.loadingColor !== 'transparent') {
+            const palettes = this.posts
+                .filter((post) => post.colorPalette)
+                .map((post) => post.colorPalette);
+            this.medianPaletteHSL = getMedianHSL(palettes, this.widgetSettings.loadingColor);
+        }
+        // Find initial breakpoint
+        const matchingBreakpoint = this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints);
+        // Render posts with current breakpoint styles
+        this.renderBreakpoint(matchingBreakpoint);
+        this.style.opacity = '';
+        // Enable popoverGallery if necessary
+        if (this.widgetSettings.onPostClick === 'openPopupGallery') {
+            this.enablePopoverGallery();
+        }
+    }
+    /*
+     *   Handle prop change
+     */
+    _handlePropChange({ changedProp, oldValue, newValue }) {
+        // Handle changes
+        switch (changedProp) {
+            case 'posts':
+                this._handlePostsChange();
+                break;
+            case 'widgetSettings':
+                this._handleSettingsChange(oldValue, newValue);
+                break;
+            case 'feedMetadata':
+                this._handleMetadataChange();
+                break;
+            case 'previewLoadingColors':
+                this.postEls.forEach((postEl) => {
+                    postEl.previewLoadingColors = this.previewLoadingColors;
+                });
+                setClasses(this, {
+                    'is-previewing-loading-colors': !!this.previewLoadingColors,
+                });
+                break;
+        }
+    }
+    /*
+     *   Handle posts change
+     */
+    _handlePostsChange() {
+        this.postEls = [];
+        this.renderBreakpoint(this.appliedBreakpoint, true);
+        if (this.popoverGalleryEl) {
+            this.popoverGalleryEl.posts = this.posts;
+        }
+    }
+    /*
+     *   Handle settings change
+     */
+    _handleSettingsChange(oldValue, newValue) {
+        if (oldValue?.onPostClick !== 'openPopupGallery' &&
+            newValue?.onPostClick === 'openPopupGallery') {
+            this.enablePopoverGallery();
+        }
+        this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints));
+        this.postEls.forEach((postEl) => {
+            postEl.widgetSettings = this.widgetSettings;
+        });
+        if (this.popoverGalleryEl) {
+            this.popoverGalleryEl.widgetSettings = this.widgetSettings;
+        }
+    }
+    /*
+     *   Handle settings change
+     */
+    _handleMetadataChange() {
+        let description = `from @${this.feedMetadata.username}`;
+        if (this.feedMetadata.hashtags?.length) {
+            description = `from hashtag${this.feedMetadata.hashtags.length > 1 ? 's' : ''} ${this.feedMetadata.hashtags.join(', ')}`;
+        }
+        this.setAttribute('aria-label', `Gallery of Instagram posts ${description}. Shift + arrow keys to navigate`);
+        this.postEls.forEach((postEl) => {
+            postEl.feedMetadata = this.feedMetadata;
+        });
+        if (this.popoverGalleryEl) {
+            this.popoverGalleryEl.feedMetadata = this.feedMetadata;
+        }
+    }
+    /**
+     *   Enable popup carousel
+     */
+    async enablePopoverGallery() {
+        const { default: PopoverGallery } = await import('./PopoverGallery-pssVDO_O.js');
+        PopoverGallery.register();
+        this.popoverGalleryEl = document.createElement('behold-popover-gallery');
+        Object.assign(this.popoverGalleryEl, {
+            widgetSettings: this.widgetSettings,
+            feedMetadata: this.feedMetadata,
+            posts: this.posts,
+            closeFocusEl: this,
+            onSlideChange: (slideIndex) => {
+                this.popoverGalleryEl.closeFocusEl = this.postEls[slideIndex];
+            },
+        });
+    }
+    /*
+     *   Handle resize
+     */
+    _handleResize(entry) {
+        const widgetWidth = entry.contentBoxSize?.[0]?.inlineSize;
+        const breakpoints = this.widgetSettings.breakpoints;
+        const matchingBreakpoint = this.getMatchingBreakpoint(widgetWidth, breakpoints);
+        this.renderBreakpoint(matchingBreakpoint);
+    }
+    /**
+     * Handle prev post focus
+     */
+    _handleFocusPreviousPost() {
+        if (!this.postEls.length)
+            return;
+        let currentFocusIndex = [...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);
+        if (currentFocusIndex > 0) {
+            currentFocusIndex = currentFocusIndex - 1;
+        }
+        else {
+            currentFocusIndex = this.postEls.length - 1;
+        }
+        this.postEls[currentFocusIndex].focus();
+    }
+    /**
+     * Handle next post focus
+     */
+    _handleFocusNextPost() {
+        if (!this.postEls.length)
+            return;
+        let currentFocusIndex = [...this.heightRefEl.children].indexOf(this.shadow.activeElement?.parentElement);
+        if (currentFocusIndex > -1 && currentFocusIndex < this.postEls.length - 1) {
+            currentFocusIndex = currentFocusIndex + 1;
+        }
+        else {
+            currentFocusIndex = 0;
+        }
+        this.postEls[currentFocusIndex].focus();
+    }
+    /**
+     * Handle post click
+     */
+    _handlePostClick(post) {
+        this.popoverGalleryEl.open(this.postEls.indexOf(post), post);
+    }
+    /*
+     *   Update postEls
+     */
+    renderPosts(breakpoint) {
+        this.postEls = this.createPostEls(breakpoint);
+        this.raf(() => {
+            this.heightRefEl.beholdReplaceChildren(...this.postEls);
+        }, 'renderPosts');
+    }
+    /*
+     *   Get breakpoint that matches a width
+     */
+    getMatchingBreakpoint(width, breakpoints) {
+        return Object.entries(breakpoints)
+            .map(([key, value]) => ({ width: key, ...value }))
+            .filter((bp) => bp.width !== 'default')
+            .sort((a, b) => b.width.localeCompare(a.width))
+            .reduce((acc, curr) => {
+            return width <= parseInt(curr.width) ? curr : acc;
+        }, 
+        // numPosts doesn't exist on default breakpoint for some reason
+        // @todo fix that
+        {
+            ...breakpoints.default,
+            numPosts: breakpoints.default.galleryWallLayout.length,
+        });
+    }
+    /*
+     *   Render posts with breakpoint
+     */
+    renderBreakpoint(breakpoint, forceRender = false) {
+        this.cancelRaf('setContainerHeight');
+        if (!this.postEls)
+            forceRender = true;
+        const applied = this.appliedBreakpoint;
+        this.appliedBreakpoint = breakpoint;
+        const { gap, borderRadius, numPosts, galleryWallLayout, galleryWallNamedLayout, } = breakpoint;
+        // First apply container styles to prevent FOUC
+        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';
+                break;
+        }
+        if (this.widgetSettings.maxWidth &&
+            this.widgetSettings.constrainWidth &&
+            this.containerEl.style.maxWidth !== `${this.widgetSettings.maxWidth}px`) {
+            this.containerEl.style.maxWidth = `${this.widgetSettings.maxWidth}px`;
+        }
+        if (!this.widgetSettings.constrainWidth) {
+            this.containerEl.style.maxWidth = '';
+        }
+        this.containerEl.setAttribute('data-hover-effect', this.widgetSettings.hoverEffect);
+        setCssVars(this.containerEl, { '--post-border-radius': `${borderRadius}%` });
+        // Then render posts into updated container
+        if (applied?.numPosts !== numPosts ||
+            applied?.galleryWallNamedLayout !== galleryWallNamedLayout.toString() ||
+            forceRender) {
+            this.renderPosts(breakpoint);
+        }
+        const containerWidth = this.containerEl.offsetWidth;
+        const gapX = (gap.x / 1000) * containerWidth;
+        const gapY = (gap.y / 1000) * containerWidth;
+        this.postEls.forEach((el, i) => {
+            const [x, y, w, h] = galleryWallLayout?.[i]
+                ? galleryWallLayout[i].split(',').map((item) => parseInt(item))
+                : [0, 0, 10, 10];
+            const xTranslate = x * (containerWidth / 100) + gapX / 2;
+            const yTranslate = y * (containerWidth / 100);
+            el.style.transform = `translate(${xTranslate}px, ${yTranslate}px`;
+            el.style.width = `${w * (containerWidth / 100) - gapX}px`;
+            el.style.height = `${h * (containerWidth / 100) - gapY}px`;
+        });
+        forceLayout();
+        this.raf(() => {
+            this.setContainerHeight();
+        }, 'setContainerHeight');
+    }
+    /*
+     *   Create post Els based on a breakpoint
+     */
+    createPostEls(breakpoint) {
+        const { gap, postAspectRatio } = breakpoint;
+        const numPosts = breakpoint?.numPosts || this.posts?.length || 200;
+        const filteredPostsArray = this.posts.filter((p, i) => {
+            return i < numPosts;
+        });
+        const postEls = filteredPostsArray.map((post, i) => {
+            let postType = 'behold-image-post';
+            if (post.mediaType === 'VIDEO') {
+                postType = 'behold-video-post';
+            }
+            if (post.mediaType === 'CAROUSEL_ALBUM') {
+                postType = 'behold-album-post';
+            }
+            const postEl = createElement({
+                type: postType,
+                props: {
+                    post,
+                    widgetSettings: this.widgetSettings,
+                    feedMetadata: this.feedMetadata,
+                    medianPaletteHSL: this.medianPaletteHSL,
+                    onClick: this._handlePostClick,
+                    hasRowGap: `${gap.y}` !== '0',
+                    index: i,
+                    aspectRatio: postAspectRatio || [1, 1],
+                    totalPosts: filteredPostsArray?.length ||
+                        breakpoint?.numPosts ||
+                        this.posts?.length ||
+                        0,
+                },
+            });
+            return postEl;
+        });
+        if (postEls.length < breakpoint.galleryWallLayout.length) {
+            breakpoint.galleryWallLayout
+                .filter((item, i) => i >= postEls.length)
+                .forEach((item) => {
+                const placeholderEl = createElement({
+                    classes: 'post post--placeholder',
+                });
+                postEls.push(placeholderEl);
+            });
+        }
+        return postEls;
+    }
+    /*
+     *   Set container height
+     */
+    setContainerHeight = throttle(() => {
+        this.style.height = `${this.heightRefEl.scrollHeight}px`;
+    }, 10, this);
+    /*
+     *   Register
+     */
+    static register(name = 'behold-gallery-wall') {
+        if (!customElements.get(name)) {
+            customElements.define(name, GalleryWall);
+        }
+        return name;
+    }
+}
+
+export { GalleryWall as default };