@behold/widget 0.5.57 → 0.5.59

package/dist/ErrorMessage-tHLrPf_h.js

@@ -1,110 +0,0 @@
-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

@@ -1,354 +0,0 @@
-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 };