@behold/widget 0.5.55 → 0.5.57

package/dist/index-R4lEDZFo.js

@@ -0,0 +1,985 @@
+if ('replaceChildren' in Element.prototype === false) {
+    function replaceChildren(...nodes) {
+        // Remove all existing child nodes
+        while (this.firstChild) {
+            this.removeChild(this.firstChild);
+        }
+        // Append new DOM objects
+        this.append(...nodes);
+    }
+    Object.defineProperty(Element.prototype, 'beholdReplaceChildren', {
+        configurable: true,
+        writable: true,
+        value: replaceChildren,
+    });
+    Object.defineProperty(DocumentFragment.prototype, 'beholdReplaceChildren', {
+        configurable: true,
+        writable: true,
+        value: replaceChildren,
+    });
+}
+else {
+    Object.defineProperty(Element.prototype, 'beholdReplaceChildren', {
+        configurable: true,
+        writable: true,
+        value: Element.prototype.replaceChildren,
+    });
+    Object.defineProperty(DocumentFragment.prototype, 'beholdReplaceChildren', {
+        configurable: true,
+        writable: true,
+        value: DocumentFragment.prototype.replaceChildren,
+    });
+}
+
+/**
+ * @param input Object or array to clone
+ * @description A simple clone using JSON.stringify and JSON.parse. Properties with an undefined value will be included in the result with a value of null
+ */
+function clone(input) {
+    return JSON.parse(JSON.stringify(input, (key, value) => {
+        if (typeof value === 'undefined')
+            return null;
+        return value;
+    }));
+}
+/**
+ * @description
+ * Force DOM layout. Coupled with a requestAnimationFrame this can be
+ * used to make sure newly added elements exist in the DOM before performing
+ * some other action, such as an animated transition
+ */
+function forceLayout() {
+    return document.body.offsetTop;
+}
+/**
+ * @async
+ * @param type - Media type
+ * @param src - Media source
+ */
+async function preloadMedia(type, src) {
+    const mediaEl = document.createElement(type);
+    return new Promise((resolve, reject) => {
+        switch (type) {
+            case 'img':
+                mediaEl.addEventListener('load', () => {
+                    resolve(src);
+                });
+                break;
+            case 'video':
+                mediaEl.addEventListener('loadeddata', () => resolve(src));
+                break;
+        }
+        mediaEl.addEventListener('error', (error) => {
+            reject(error);
+        });
+        mediaEl.src = src;
+    });
+}
+/**
+ * @param text - string to truncate
+ * @param maxLines - Restrict to n lines. Determined by line breaks
+ * @param maxChars - Restrict to n total characters
+ */
+function getTruncatedText({ text, maxLines = 2, maxChars = 50 }) {
+    if (!text)
+        return;
+    const lines = text
+        .match(/.*/g)
+        .filter((line) => line.length > 0)
+        .slice(0, maxLines);
+    const totalLineLimitedChars = lines.join('').length;
+    const totalChars = Math.min(totalLineLimitedChars, maxChars);
+    return text.slice(0, totalChars);
+}
+/**
+ * Generate a placeholder svg image
+ */
+function getPlaceholderImage(width, height) {
+    return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${width}' height='${height}'%3E%3C/svg%3E%0A`;
+}
+/**
+ * @async
+ * @param els - An array of elements
+ * @returns A promise that resolve with the index of the most visible el
+ * @description
+ * Find the most visible element in an array. Compares intersectionRatios.
+ * If multiple elements tie for highest intersectionRatio, the most visible
+ * element that appears earliest in the array is returned.
+ */
+function getMostVisible(els) {
+    return new Promise((resolve) => {
+        let observer = new IntersectionObserver((entries) => {
+            let mostVisible = entries.reduce((acc, curr, index) => {
+                return curr.intersectionRatio > acc.intersectionRatio
+                    ? { index, intersectionRatio: curr.intersectionRatio }
+                    : acc;
+            }, { intersectionRatio: 0, index: null });
+            observer.disconnect();
+            observer = null;
+            resolve(mostVisible.index);
+        });
+        els.forEach((el) => observer.observe(el));
+    });
+}
+/**
+ * @param el - The target element
+ * @returns a {result: Promise, abort: Function}
+ * @description More performant async replacement for getBoundingClientRect
+ */
+function getAsyncRect(el, cb) {
+    let aborted = false;
+    let observer = new IntersectionObserver((entries) => {
+        if (aborted)
+            return;
+        observer.disconnect();
+        observer = null;
+        cb(entries[0].boundingClientRect);
+    });
+    function abort() {
+        if (aborted)
+            return;
+        aborted = true;
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+    }
+    observer.observe(el);
+    return abort;
+}
+/**
+ * @param el - the element to query
+ * @description
+ * Get first document or shadowRoot ancestor of an element
+ */
+function getClosestShadowRootOrDocument(el) {
+    if (!el.isConnected)
+        return document;
+    if (el.nodeName === '#document') {
+        return el;
+    }
+    if (el instanceof ShadowRoot) {
+        return el;
+    }
+    return getClosestShadowRootOrDocument(el.parentNode);
+}
+/**
+ * @param callback - function to throttle
+ * @param wait - minimum time between invocations
+ * @param thisArg - this context to apply to callback
+ * @param throttleFirst - start with a delay?
+ */
+function throttle(callback, wait, thisArg = null, throttleFirst = false) {
+    let lastInvocationTime = throttleFirst ? performance.now() : 0;
+    let finalTimeout = null;
+    return (...args) => {
+        let currentTime = performance.now();
+        clearTimeout(finalTimeout);
+        finalTimeout = setTimeout(() => callback.apply(thisArg, args), wait);
+        if (currentTime - lastInvocationTime > wait) {
+            clearTimeout(finalTimeout);
+            lastInvocationTime = currentTime;
+            callback.apply(thisArg, args);
+        }
+    };
+}
+/**
+ * @param target - An element to toggle classes on
+ * @param classes - An object with the format { className: boolean }
+ * @description
+ * Add or remove classes on a target element with classname keys and boolean values
+ */
+function setClasses(target, classes) {
+    Object.entries(classes).forEach(([className, shouldAdd]) => {
+        if (shouldAdd) {
+            target.classList.add(className);
+        }
+        else {
+            target.classList.remove(className);
+        }
+    });
+}
+/**
+ * @param target - An element to set a CSS custom property on
+ * @param vars - An object of the form { "--var-name": "var-value" }
+ */
+function setCssVars(target, vars) {
+    Object.keys(vars).forEach((key) => {
+        target.style.setProperty(key, vars[key]);
+    });
+}
+/**
+ * @param obj1 - Object to compare
+ * @param obj2 - Object to compare
+ * @param props - An array of properties to compare
+ * @description
+ * Compares the properties of two objects. Returns true if, for
+ * any property in the props array, obj1[prop] !== obj2[prop]
+ */
+function hasChanges(obj1, obj2, props, depth = 0) {
+    if (typeof props === 'string') {
+        props = [props];
+    }
+    if (depth > 0) {
+        let val = false;
+        if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+            return true;
+        }
+        Object.keys(obj1).forEach((key) => {
+            if (hasChanges(obj1[key], obj2[key], props)) {
+                val = true;
+            }
+        });
+        return val;
+    }
+    return props.reduce((acc, curr) => {
+        if (!isEqual(obj1?.[curr], obj2?.[curr]))
+            return true;
+        return acc;
+    }, false);
+}
+/**
+ * @param a - value to compare
+ * @param b - value to compare
+ * @param fuzzyNumbers - if set to true '1' will be considered equal to 1. WARNING: this mutates inputs
+ * @param sortArrays - if set to true arrays are sorted before comparing. WARNING: this mutates inputs
+ * @description
+ * Check if two values are the same
+ */
+function isEqual(a, b, fuzzyNumbers = false, sortArrays = false) {
+    if (sortArrays) {
+        if (Array.isArray(a))
+            a = a.sort();
+        if (Array.isArray(b))
+            b = b.sort();
+    }
+    if (fuzzyNumbers) {
+        if (typeof a === 'number')
+            a = a.toString();
+        if (typeof b === 'number')
+            b = b.toString();
+    }
+    if (typeof a !== typeof b)
+        return false;
+    if (a === null && b === null)
+        return true;
+    if (a === null && b !== null)
+        return false;
+    if (a !== null && b === null)
+        return false;
+    if (a === undefined && b === undefined)
+        return true;
+    if (a === undefined && b !== undefined)
+        return false;
+    if (a !== undefined && b === undefined)
+        return false;
+    if (typeof a === 'object') {
+        if (Object.keys(a).length !== Object.keys(b).length)
+            return false;
+        return Object.entries(a).reduce((acc, [key, val]) => {
+            return isEqual(val, b[key], fuzzyNumbers, sortArrays) ? acc : false;
+        }, true);
+    }
+    else if (Array.isArray(a)) {
+        let arrayIsEqual = true;
+        a.forEach((arrVal, index) => {
+            if (!isEqual(arrVal, b[index], fuzzyNumbers, sortArrays))
+                arrayIsEqual = false;
+        });
+        return arrayIsEqual;
+    }
+    else {
+        return a === b;
+    }
+}
+/**
+ * @param text - The text to announce
+ * @param mood - assertive or polite
+ * @description - announces some text to screenreaders only
+ */
+function announceToScreenReader(text, mood = 'assertive') {
+    const containerEl = document.createElement('div');
+    containerEl.innerHTML = text;
+    containerEl.setAttribute('aria-live', mood);
+    containerEl.setAttribute('aria-atomic', 'true');
+    containerEl.style.cssText = `
+    position: absolute;
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0,0,0,0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  `;
+    requestAnimationFrame(() => {
+        document.body.appendChild(containerEl);
+        setTimeout(() => {
+            containerEl.remove();
+        }, 500);
+    });
+}
+/**
+ * @param array - Array to push value into
+ * @param val - Value to push
+ * @param limit - Array length limit
+ * @description - Push a value into an array, remove from beginning of array if array.length > limit
+ */
+function pushWithLimit(array, val, limit) {
+    if (array.length === limit) {
+        array.shift();
+    }
+    array.push(val);
+}
+
+// Global state is shared between all elements across all widgets on the page
+let globalState = {
+    isMuted: true,
+    keyboardNavEnabled: false,
+    popoverOverlayHslArray: [0, 0, 0],
+    popoverOverlayOpacity: 0.6,
+};
+let globalListenersAdded = false;
+let sharedResizeObserver = null;
+let sharedIntersectionObserver = null;
+const resizeHandlers = new Map();
+const intersectionHandlers = new Map();
+const loopHandlers = new Map();
+const globalStateChangeHandlers = new Set();
+function loop() {
+    loopHandlers.forEach((item) => {
+        const now = performance.now();
+        const { minWait, lastInvocation, callback } = item;
+        const timeSinceLastInvocation = now - lastInvocation;
+        if (timeSinceLastInvocation > minWait) {
+            callback(timeSinceLastInvocation);
+            loopHandlers.set(callback, { ...item, lastInvocation: now });
+        }
+    });
+    requestAnimationFrame(loop);
+}
+loop();
+class BaseElement extends HTMLElement {
+    label = 'BaseElement';
+    storedProperties = new Map();
+    requiredProperties = [];
+    hasRequiredProps = false;
+    propChangeHandlers = new Map();
+    delayedPropChangeHandlers = new Map();
+    queuedPropUpdates = new Set();
+    localState = Object.freeze({});
+    localStateChangeHandlers = 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);
+        if (!sharedResizeObserver) {
+            let ResizeObserver = window.ResizeObserver;
+            if ('ResizeObserver' in window === false) {
+                // @ts-ignore
+                ResizeObserver = window.BeholdResizeObserver;
+            }
+            sharedResizeObserver = new ResizeObserver((entries) => {
+                entries.forEach((entry) => {
+                    const cb = resizeHandlers.get(entry.target);
+                    if (cb) {
+                        cb(entry);
+                    }
+                });
+            });
+        }
+        if (!sharedIntersectionObserver) {
+            sharedIntersectionObserver = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    const cb = intersectionHandlers.get(entry.target);
+                    if (cb) {
+                        cb(entry);
+                    }
+                });
+            });
+        }
+    }
+    /**
+     * Connect
+     */
+    connectedCallback() {
+        if (!globalListenersAdded) {
+            globalListenersAdded = true;
+            document.addEventListener('keydown', this._globalHandleKeydown);
+            document.addEventListener('mousedown', this._globalHandleMousedown);
+            document.addEventListener('mousemove', this._globalHandleMousemove, {
+                passive: true,
+            });
+        }
+        this.connectHandlers.forEach((cb) => cb());
+    }
+    /*
+     *   Clean up
+     */
+    disconnectedCallback() {
+        if (globalListenersAdded) {
+            globalListenersAdded = false;
+            document.removeEventListener('keydown', this._globalHandleKeydown);
+            document.removeEventListener('mousedown', this._globalHandleMousedown);
+            document.removeEventListener('mousemove', this._globalHandleMousemove);
+        }
+        this.rafs.forEach((rafId) => cancelAnimationFrame(rafId));
+        this.rafs.clear();
+        this.timeouts.forEach((toId) => clearTimeout(toId));
+        this.timeouts.clear();
+        this.disconnectHandlers.forEach((cb) => cb());
+    }
+    /**
+     * Register a callback to fire on connect
+     */
+    onConnect(cb) {
+        this.connectHandlers.add(cb);
+    }
+    /**
+     * Register a callback to fire on disconnect
+     */
+    onDisconnect(cb) {
+        this.disconnectHandlers.add(cb);
+    }
+    /**
+     * Register a callback to fire on resize
+     */
+    onResize(context, el, cb) {
+        resizeHandlers.set(el, cb.bind(context));
+        sharedResizeObserver.observe(el);
+        this.disconnectHandlers.add(() => {
+            resizeHandlers.delete(el);
+            sharedResizeObserver.unobserve(el);
+        });
+    }
+    /**
+     * Register a callback to fire on intersection
+     *
+     * @param el - element to observe
+     */
+    onIntersection(el, cb) {
+        intersectionHandlers.set(el, cb);
+        sharedIntersectionObserver.observe(el);
+        this.disconnectHandlers.add(() => {
+            intersectionHandlers.delete(el);
+            sharedIntersectionObserver.unobserve(el);
+        });
+    }
+    /**
+     * Register a callback to fire on intersection
+     *
+     * @param callback - callback
+     * @param minWait - min time between invocations
+     */
+    onLoop(callback, minWait = 50) {
+        loopHandlers.set(callback, { minWait, lastInvocation: 0, callback });
+        this.disconnectHandlers.add(() => {
+            loopHandlers.delete(callback);
+        });
+    }
+    /**
+     *
+     */
+    /**
+     * @param handler - Will be called whenever a prop changes with a single object argument: {changedProp, oldValue, newValue}
+     * @param props - An array of prop names to subscribe to
+     * @param required - An array of props that must be set before any handlers are fired. All listed props are required by default or if set to null. No props are required if passed an empty array
+     * @param setupFunction - A function to run after all required props are set. If this is defined, individual prop change handlers won't be fired during initial setup
+     * @description
+     * Register a callback to fire when a property changes. Undefined props in objects will be coerced to null
+     */
+    onPropChange(handler, props, required = null, setupFunction = null) {
+        if (required) {
+            this.requiredProperties.push(...required);
+        }
+        else {
+            this.requiredProperties.push(...props);
+        }
+        props.forEach((prop) => {
+            // Store prop value
+            if (typeof this[prop] !== 'undefined') {
+                this.storedProperties.set(prop, this[prop]);
+            }
+            // Create an empty array of handlers and delayed handlers if they don't exist yet
+            if (!this.propChangeHandlers.get(prop)) {
+                this.propChangeHandlers.set(prop, []);
+                this.delayedPropChangeHandlers.set(prop, []);
+            }
+            // Add handler to prop
+            if (setupFunction) {
+                // There is a setup function, so we wait until after setup to start handling this prop
+                this.delayedPropChangeHandlers.get(prop).push(handler);
+            }
+            else {
+                // No setup function, immediately start firing handlers when this prop changes
+                this.propChangeHandlers.get(prop).push(handler);
+            }
+            // Define Getter & Setter
+            Object.defineProperty(this, prop, {
+                set(newValue) {
+                    // No undefined props allowed
+                    if (newValue === undefined) {
+                        newValue = null;
+                        console.warn(`Attempted to set value of ${prop} as "undefined" on ${this.label}. ${prop} was coerced to null instead.`);
+                    }
+                    // Coerces undefined props in newValue to null
+                    newValue = clone(newValue);
+                    // Save previous value
+                    const oldValue = this.storedProperties.has(prop)
+                        ? clone(this.storedProperties.get(prop))
+                        : null;
+                    // Update props with new value
+                    this.storedProperties.set(prop, newValue);
+                    // Check if all required props are present
+                    this.hasRequiredProps = this.requiredProperties.every((prop) => this.storedProperties.has(prop));
+                    // Queue handlers
+                    this.queueHandlers({ prop, oldValue, newValue });
+                },
+                get() {
+                    return this.storedProperties.get(prop);
+                },
+            });
+        });
+        // All required props are defined
+        if (setupFunction) {
+            setupFunction = setupFunction.bind(this);
+            queueMicrotask(() => {
+                if (this.hasRequiredProps) {
+                    // Run setup function
+                    setupFunction();
+                    // Add delayed handlers to handlers map
+                    this.delayedPropChangeHandlers.forEach((handlers, prop) => {
+                        this.propChangeHandlers.set(prop, [
+                            ...this.propChangeHandlers.get(prop),
+                            ...handlers,
+                        ]);
+                    });
+                }
+            });
+        }
+        // Log a warning if there are missing required props
+        this.queueMissingPropsCheck();
+    }
+    /*
+     *   Queue prop change handlers
+     */
+    queueHandlers({ prop, oldValue, newValue }) {
+        // We're missing required props. Add handler to queue
+        if (!this.hasRequiredProps) {
+            this.queuedPropUpdates.add(prop);
+            // All required props are present
+        }
+        else {
+            // Run queued prop handlers
+            if (this.queuedPropUpdates.size) {
+                // Remove current prop from queue. It will get handled in the next step
+                this.queuedPropUpdates.delete(prop);
+                // Run queued handlers
+                this.runQueuedPropHandlers();
+            }
+            // Run handlers for current prop
+            this.propChangeHandlers.get(prop).forEach((cb) => {
+                cb.call(this, {
+                    changedProp: prop,
+                    oldValue,
+                    newValue: newValue,
+                });
+            });
+        }
+    }
+    /*
+     *   Run queued handlers
+     * @param context - Handlers will be called with this context as the 'this' value
+     */
+    runQueuedPropHandlers() {
+        this.queuedPropUpdates.forEach((prop) => {
+            this.propChangeHandlers.get(prop).forEach((cb) => {
+                cb.call(this, {
+                    changedProp: prop,
+                    oldValue: null,
+                    newValue: this[prop],
+                });
+            });
+        });
+        this.queuedPropUpdates.clear();
+    }
+    /**
+     * @param val - Object to be merged with current shared state
+     * @description - Update shared state
+     */
+    updateLocalState(updates) {
+        const oldState = Object.freeze(clone(this.localState));
+        this.localState = Object.freeze({ ...this.localState, ...updates });
+        this.localStateChangeHandlers.forEach((handler) => handler({
+            changedProps: Object.keys(updates),
+            oldState,
+            newState: this.localState,
+        }));
+    }
+    /**
+     * @param handler - Will be passed an object when local state is updated: {changedProps, oldState, newState}
+     * @description - Register a callback to fire on shared state change
+     */
+    onLocalStateChange(handler, defaultValue) {
+        this.localState = { ...this.localState, ...defaultValue };
+        const func = handler.bind(this);
+        this.localStateChangeHandlers.add(func);
+    }
+    /**
+     * @param val - Object to be merged with current shared state
+     * @description - Update shared state
+     */
+    updateGlobalState(val) {
+        const oldState = clone(globalState);
+        globalState = { ...globalState, ...val };
+        globalStateChangeHandlers.forEach((handler) => handler({
+            changedProps: Object.keys(val),
+            oldState,
+            newState: globalState,
+        }));
+    }
+    /**
+     * @param handler - Will be passed an object when global state is updated: {changedProps, oldState, newState}
+     * @description - Register a callback to fire on shared state change
+     */
+    onGlobalStateChange(handler) {
+        this.connectHandlers.add(() => {
+            const func = handler.bind(this);
+            const removeFunc = () => globalStateChangeHandlers.delete(func);
+            globalStateChangeHandlers.add(func);
+            this.disconnectHandlers.add(removeFunc);
+        });
+    }
+    /**
+     * @description global keydown handler
+     */
+    _globalHandleKeydown(evt) {
+        if (evt.key === 'Tab') {
+            this.updateGlobalState({ keyboardNavEnabled: true });
+        }
+    }
+    /**
+     * @description global mousedown handler
+     */
+    _globalHandleMousedown(evt) {
+        if (evt.clientX === 0 && evt.clientY === 0)
+            return;
+        this.updateGlobalState({ keyboardNavEnabled: false });
+    }
+    /**
+     * @description global mousemove handler
+     */
+    _globalHandleMousemove(evt) {
+        if (evt.ctrlKey ||
+            evt.altKey ||
+            evt.shiftKey ||
+            evt.metaKey ||
+            evt.movementX === 0 ||
+            evt.movementY === 0) {
+            return;
+        }
+        this.updateGlobalState({ keyboardNavEnabled: false });
+    }
+    /**
+     * @description
+     * Get global state value. This state object is shared between all elements across all widget instances on the page
+     */
+    get globalState() {
+        return globalState;
+    }
+    /**
+     * @description
+     * Shared state cannot be set directly. Use this.updateGlobalState() instead.
+     */
+    set globalState(val) {
+        throw new Error('Shared state cannot be set directly. Use this.updateGlobalState() instead.');
+    }
+    /**
+     * @param cb - callback function
+     * @param id - An id for this raf. Can be used to cancel it with cancelRaf()
+     * @description - requestAnimationFrame with cleanup
+     */
+    raf(cb, id, cancelPrev = true) {
+        if (cancelPrev) {
+            cancelAnimationFrame(this.rafs.get(id));
+        }
+        const rafId = requestAnimationFrame(() => {
+            cb();
+            this.rafs.delete(id);
+        });
+        this.rafs.set(id, rafId);
+        return rafId;
+    }
+    /**
+     * @param id - id of the raf, set by previously called raf()
+     * @description - Cancel a raf by id
+     */
+    cancelRaf(id) {
+        cancelAnimationFrame(this.rafs.get(id));
+        this.rafs.delete(id);
+    }
+    /**
+     * @param cb - callback function
+     * @param delay - timeout delay
+     * @param id - An id for this raf. Can be used to cancel it with cancelTo()
+     * @description - setTimeout with cleanup
+     */
+    to(cb, delay, id) {
+        const toId = setTimeout(() => {
+            cb();
+            this.timeouts.delete(id);
+        }, delay);
+        this.timeouts.set(id, toId);
+        return toId;
+    }
+    /**
+     * @param id - id of the timeout, set by previously called to()
+     * @description - Cancel a timeout by id
+     */
+    cancelTo(id) {
+        clearTimeout(this.timeouts.get(id));
+        this.timeouts.delete(id);
+    }
+    /**
+     * @description
+     * Log a warning if any required props aren't set in the same execution context that the element is created
+     */
+    queueMissingPropsCheck() {
+        queueMicrotask(() => {
+            if (this.requiredProperties.length && !this.hasRequiredProps) {
+                const missingProps = this.requiredProperties.filter((prop) => !this.storedProperties.has(prop));
+                console.error(`${this.label || this.tagName} is missing required props: ${missingProps.join(', ')}`);
+            }
+        });
+    }
+}
+
+/*
+ *   Create an El
+ */
+function createElement(args) {
+    let { type = 'div', classes = [], contents = [], attributes = {}, props = {}, style = {}, listeners = {}, } = args;
+    classes = Array.isArray(classes) ? classes : [classes];
+    const el = document.createElement(type);
+    if (!Array.isArray(contents))
+        contents = [contents];
+    // Render SVG strings
+    contents = contents
+        .filter((item) => typeof item !== 'undefined' && item !== null)
+        .map((item) => {
+        if (typeof item === 'string' && item.includes('</svg>')) {
+            const temp = document.createElement('template');
+            temp.innerHTML = item;
+            return temp.content;
+        }
+        return item;
+    });
+    el.beholdReplaceChildren(...contents);
+    if (classes.length) {
+        el.className = classes.join(' ');
+    }
+    Object.keys(attributes).forEach((key) => {
+        if (attributes[key] !== null && typeof attributes[key] !== 'undefined') {
+            el.setAttribute(key, attributes[key]);
+        }
+        else {
+            el.removeAttribute(key);
+        }
+    });
+    Object.assign(el, props);
+    Object.keys(style).forEach((key) => {
+        if (key.substring(0, 2) === '--') {
+            el.style.setProperty(key, style[key]);
+        }
+        else {
+            el.style[key] = style[key];
+        }
+    });
+    Object.keys(listeners).forEach((key) => {
+        el.addEventListener(key, listeners[key]);
+    });
+    return el;
+}
+
+function debugLog(...args) {
+    // @ts-ignore
+    if (window?.location.search.includes('behold-debug-mode')) {
+        console.log(...args);
+    }
+}
+
+var css_248z = ":host{align-items:center;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;margin:0;min-width:50px;overflow:hidden;position:relative;width:100%}:host *{box-sizing:border-box}:host([hidden]){display:none}";
+
+function __variableDynamicImportRuntime1__(path) {
+  switch (path) {
+    case './widgets/ElasticCarousel.ts': return import('./ElasticCarousel-WWMTzi-V.js');
+    case './widgets/ErrorMessage.ts': return import('./ErrorMessage-tHLrPf_h.js');
+    case './widgets/GalleryWall.ts': return import('./GalleryWall-Jlau7S7U.js');
+    case './widgets/Grid.ts': return import('./Grid-2Aag90e0.js');
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+/*
+ *  BeholdWidget
+ *  Accepts a feed ID and dynamically loads the correct widget type
+ */
+class BeholdWidget extends BaseElement {
+    label = 'BeholdWidget';
+    shadow;
+    abortController;
+    loadedWidget;
+    static get observedAttributes() {
+        return ['feed-id'];
+    }
+    constructor() {
+        super();
+        debugLog('v 0.5.57');
+        this.shadow = this.attachShadow({ mode: 'open' });
+        this.abortController = null;
+        this.onPropChange(this._handlePropChange, [
+            'widgetSettings',
+            'feedMetadata',
+            'posts',
+            'previewLoadingColors',
+            'errorMessage',
+        ], []);
+    }
+    /**
+     * Attributes change
+     */
+    attributeChangedCallback(changed, oldValue, newValue) {
+        if (changed === 'feed-id' && newValue !== oldValue) {
+            this.getFeed(newValue);
+        }
+    }
+    /**
+     * Prop change
+     */
+    _handlePropChange({ changedProp, oldValue, newValue }) {
+        if (changedProp === 'errorMessage' && !oldValue && !!newValue) {
+            this.loadWidget('ErrorMessage');
+            return;
+        }
+        if (changedProp === 'widgetSettings' &&
+            hasChanges(newValue, oldValue, 'type') &&
+            newValue?.type) {
+            this.loadWidget(newValue.type);
+            return;
+        }
+        if (this.loadedWidget && !isEqual(newValue, oldValue)) {
+            this.loadedWidget[changedProp] = newValue;
+        }
+    }
+    /*
+     *   Load a widget
+     */
+    async loadWidget(type) {
+        if ('ResizeObserver' in window === false) {
+            const { ResizeObserver } = await import('./resizeObserver-OlrW1x9X.js');
+            // @ts-ignore
+            window.BeholdResizeObserver = ResizeObserver;
+        }
+        const Widget = await this.importWidget(type.replace(/.?/, (match) => {
+            return match.toUpperCase();
+        }));
+        const elName = Widget.register();
+        await customElements.whenDefined(elName);
+        const contents = createElement({ type: elName });
+        const styleEl = createElement({ type: 'style', contents: css_248z.toString() });
+        this.shadow.beholdReplaceChildren(contents, styleEl);
+        this.loadedWidget = contents;
+        if (this.widgetSettings) {
+            this.loadedWidget.widgetSettings = this.widgetSettings;
+        }
+        if (this.feedMetadata) {
+            this.loadedWidget.feedMetadata = this.feedMetadata;
+        }
+        if (this.posts) {
+            this.loadedWidget.posts = this.posts;
+        }
+        this.loadedWidget.errorMessage = this.errorMessage || null;
+        this.dispatchEvent(new Event('load'));
+        // Included for backwards compatibility
+        window.dispatchEvent(new CustomEvent('behold:widget-loaded', {
+            detail: { id: this['feed-id'] },
+        }));
+    }
+    /*
+     *   Fetch a feed
+     */
+    async getFeed(feedId) {
+        if (!feedId) {
+            this.errorMessage = 'No feed ID provided';
+            return;
+        }
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        this.abortController = new AbortController();
+        try {
+            const rawRes = await fetch(`https://feeds.behold.so/${feedId}`, {
+                mode: 'cors',
+                signal: this.abortController.signal,
+            });
+            if (rawRes.ok) {
+                const feedJson = await rawRes.json();
+                if (!feedJson.widgetSettings) {
+                    throw new Error('JSON feeds cannot be used as a widget');
+                }
+                if (feedJson.widgetSettings.klaviyoWebFeedId) {
+                    throw new Error('Klaviyo feeds cannot be used as an embedded widget');
+                }
+                this.widgetSettings = feedJson.widgetSettings;
+                this.feedMetadata = {
+                    username: feedJson.username,
+                    profilePictureUrl: feedJson.profilePictureUrl,
+                    website: feedJson.website,
+                    followersCount: feedJson.followersCount,
+                    hashtags: feedJson.hashtags,
+                };
+                this.posts = feedJson.posts || feedJson.media; // Support v1 && v2 feeds
+            }
+            else {
+                const errorMessage = await rawRes.text();
+                this.errorMessage = errorMessage;
+            }
+        }
+        catch (error) {
+            if (error.message !== 'The user aborted a request.') {
+                this.errorMessage = error.message;
+            }
+        }
+    }
+    /*
+     *   Dynamically import a widget
+     */
+    async importWidget(widgetName) {
+        const { default: widget } = await __variableDynamicImportRuntime1__(`./widgets/${widgetName}.ts`);
+        return widget;
+    }
+}
+/**
+ * Export register function
+ */
+var Widget = {
+    register: (name = 'behold-widget') => {
+        if (!customElements.get(name)) {
+            customElements.define(name, class extends BeholdWidget {
+            });
+        }
+    },
+    element: BeholdWidget,
+};
+
+export { BaseElement as B, Widget as W, setClasses as a, getPlaceholderImage as b, createElement as c, preloadMedia as d, getClosestShadowRootOrDocument as e, forceLayout as f, getAsyncRect as g, hasChanges as h, isEqual as i, getMostVisible as j, announceToScreenReader as k, getTruncatedText as l, pushWithLimit as p, setCssVars as s, throttle as t };