@behold/widget 0.5.65 → 0.5.66

package/dist/PopoverGallery-oswhxqGK.js

@@ -1,1905 +0,0 @@
-import { t as throttle, e as getClosestShadowRootOrDocument, c as createElement, a as setClasses, f as forceLayout, p as pushWithLimit, j as getMostVisible, B as BaseElement, k as announceToScreenReader, l as getTruncatedText, h as hasChanges } from './index-zGq7k0wG.js';
-import { a as Video, c as Image, R as RGBStringToHSLArray } from './base-D7ZLOWQ5.js';
-import { c as caretLeftIcon, a as caretRightIcon } from './caret-right-S2XSTDFy.js';
-
-let root = document;
-let containerEl = null;
-let tabbableEls = new Set();
-let excludedEls = new Set();
-let mutationObserver = new MutationObserver(handleMutation);
-let trapped = false;
-function getTabbableEls(container) {
-    const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-        acceptNode: function (node) {
-            return node.tabIndex >= 0
-                ? NodeFilter.FILTER_ACCEPT
-                : NodeFilter.FILTER_SKIP;
-        },
-    });
-    const tabbable = [];
-    let currNode = null;
-    while ((currNode = treeWalker.nextNode())) {
-        {
-            tabbable.push(currNode);
-        }
-    }
-    return tabbable;
-}
-function isVisible(el) {
-    return new Promise((resolve) => {
-        const ob = new IntersectionObserver((entries) => {
-            resolve(entries[0].isIntersecting);
-            ob.disconnect();
-        });
-        ob.observe(el);
-    });
-}
-function isTabbable(el) {
-    return new Promise(async (resolve) => {
-        if (el.disabled) {
-            resolve(false);
-            return;
-        }
-        const visible = await isVisible(el);
-        if (!visible) {
-            resolve(false);
-            return;
-        }
-        resolve([...excludedEls].every((excludedEl) => !excludedEl.contains(el)));
-    });
-}
-async function getCurrentTabbable() {
-    const promiseArray = await Promise.all([...tabbableEls].map(async (el) => {
-        const isTababble = await isTabbable(el);
-        return isTababble ? el : false;
-    }));
-    return promiseArray.filter((item) => !!item);
-}
-async function advance() {
-    const currentTabbable = await getCurrentTabbable();
-    let next = currentTabbable.indexOf(root.activeElement) + 1;
-    if (next > currentTabbable.length - 1 || next < 0) {
-        next = 0;
-    }
-    currentTabbable[next]?.focus();
-}
-async function retreat() {
-    const currentTabbable = await getCurrentTabbable();
-    let next = currentTabbable.indexOf(root.activeElement) - 1;
-    if (next < 0) {
-        next = currentTabbable.length - 1;
-    }
-    currentTabbable[next]?.focus();
-}
-function handleMutation(records) {
-    const shouldUpdate = records.some((record) => {
-        if (record.type === 'attributes')
-            return true;
-        if ([...record.addedNodes, ...record.removedNodes].some((node) => getTabbableEls(node).length > 0)) {
-            return true;
-        }
-        return false;
-    });
-    if (shouldUpdate) {
-        updateTabbableEls({ include: [containerEl], merge: true });
-    }
-}
-function handleKeydown(evt) {
-    const keyList = ['Tab'];
-    if (keyList.includes(evt.code) &&
-        !evt.ctrlKey &&
-        !evt.altKey &&
-        !evt.metaKey) {
-        evt.preventDefault();
-        if (evt.code === 'Tab' && evt.shiftKey) {
-            retreat();
-        }
-        else {
-            advance();
-        }
-    }
-}
-function updateTabbableEls({ include = [], exclude = [], merge = false, }) {
-    if (merge) {
-        include.forEach((el) => {
-            excludedEls.delete(el);
-            getTabbableEls(el).forEach((el) => {
-                if (!tabbableEls.has(el)) {
-                    tabbableEls.add(el);
-                }
-            });
-        });
-        exclude.forEach((el) => excludedEls.add(el));
-    }
-    else {
-        tabbableEls = new Set(include.flatMap((el) => getTabbableEls(el)));
-        excludedEls = new Set(exclude);
-    }
-}
-async function trapFocus(el, exclude = [], initialFocusIndex = 0) {
-    containerEl = el;
-    if (isShadowRoot(el)) {
-        root = el;
-    }
-    else {
-        root = document;
-    }
-    trapped = true;
-    updateTabbableEls({ include: [el], exclude });
-    document.addEventListener('keydown', handleKeydown);
-    mutationObserver.observe(el, {
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['disabled'],
-        childList: true,
-    });
-    const currentTabbable = await getCurrentTabbable();
-    currentTabbable[initialFocusIndex]?.focus();
-}
-function releaseFocus(newFocusEl) {
-    if (!trapped)
-        return;
-    trapped = false;
-    newFocusEl = newFocusEl ?? document.body;
-    document.removeEventListener('keydown', handleKeydown);
-    mutationObserver.disconnect();
-    tabbableEls.clear();
-    excludedEls.clear();
-    containerEl = null;
-    if (newFocusEl)
-        newFocusEl.focus();
-}
-const isShadowRoot = (el) => el instanceof ShadowRoot;
-
-class HurdyGurdy {
-    containerEl;
-    slides;
-    breadcrumbsContainerEl;
-    previousEl;
-    nextEl;
-    keyboardNav;
-    breadcrumbDiameter;
-    onSlideChange;
-    virtualize;
-    proximalSlidesToRender;
-    dynamicBreadCrumbsCutoff;
-    dragLimit;
-    transitionSpeed;
-    baseTransition;
-    momentumToTransition;
-    index;
-    _initialized;
-    _rootEl = document;
-    _innerEl;
-    _slideEls;
-    _breadcrumbsInnerEl;
-    _breadcrumbsCurrent;
-    _breadcrumbs;
-    _raf;
-    _focusRaf;
-    _st;
-    _transitionSt;
-    _isDragging;
-    _draggingDirection;
-    _dragStartPoint;
-    _prevDragPoint;
-    _positions;
-    _dragStartTranslation;
-    _currentPercentTranslation;
-    _progressToNextSlide;
-    _currentDeltaX;
-    _recentDeltas;
-    _resizeObserver;
-    _throttledDrag;
-    _throttledResize;
-    constructor({ slides, containerEl, breadcrumbsContainerEl, previousEl, nextEl, onSlideChange, breadcrumbDiameter = 7, dynamicBreadCrumbsCutoff = 10, keyboardNav = true, dragLimit = 0.5, virtualize = false, proximalSlidesToRender = 1, momentumToTransition = 5, transitionSpeed = 300, baseTransition = '', }) {
-        let ResizeObserver = window.ResizeObserver;
-        if ('ResizeObserver' in window === false) {
-            // @ts-ignore
-            ResizeObserver = window.BeholdResizeObserver;
-        }
-        this.slides = slides;
-        this.containerEl = containerEl;
-        this.breadcrumbsContainerEl = breadcrumbsContainerEl;
-        this.previousEl = previousEl;
-        this.nextEl = nextEl;
-        this.onSlideChange = onSlideChange;
-        this.breadcrumbDiameter = breadcrumbDiameter;
-        this.dynamicBreadCrumbsCutoff = dynamicBreadCrumbsCutoff;
-        this.keyboardNav = keyboardNav;
-        this.dragLimit = dragLimit;
-        this.virtualize = virtualize;
-        this.proximalSlidesToRender = proximalSlidesToRender;
-        this.transitionSpeed = transitionSpeed;
-        this.baseTransition = baseTransition;
-        this.momentumToTransition = momentumToTransition;
-        this.index = 0;
-        this._initialized = false;
-        this._innerEl = null;
-        this._slideEls = null;
-        this._breadcrumbs = null;
-        this._raf = null;
-        this._st = null;
-        this._transitionSt = null;
-        this._isDragging = false;
-        this._draggingDirection = null;
-        this._dragStartPoint = { x: 0, y: 0 };
-        this._prevDragPoint = { x: 0, y: 0 };
-        this._dragStartTranslation = 0;
-        this._currentPercentTranslation = 0;
-        this._progressToNextSlide = 0;
-        this._currentDeltaX = 0;
-        this._recentDeltas = [];
-        this._resizeObserver = new ResizeObserver((entries) => this._throttledResize(entries));
-        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._throttledDrag = throttle(this._drag, 10, this);
-        this._throttledResize = throttle(this._handleResize, 100, 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._addEventListeners = this._addEventListeners.bind(this);
-        this._removeEventListeners = this._removeEventListeners.bind(this);
-    }
-    _addEventListeners() {
-        this._innerEl.addEventListener('mousedown', this._startMouseDrag, {
-            passive: true,
-        });
-        this._innerEl.addEventListener('touchstart', this._startTouchDrag, {
-            passive: true,
-        });
-        document.body.addEventListener('mousemove', this._mouseDrag, {
-            passive: true,
-        });
-        document.body.addEventListener('mouseup', this._endDrag, { passive: true });
-        document.body.addEventListener('mouseleave', this._endDrag, {
-            passive: true,
-        });
-        document.body.addEventListener('touchmove', this._touchDrag, {
-            passive: true,
-        });
-        document.body.addEventListener('touchend', this._endDrag, { passive: true });
-        if (this.previousEl) {
-            this.previousEl.addEventListener('click', this._handlePrevClick, {
-                passive: true,
-            });
-        }
-        if (this.nextEl) {
-            this.nextEl.addEventListener('click', this._handleNextClick, {
-                passive: true,
-            });
-        }
-        if (this.keyboardNav) {
-            document.addEventListener('keydown', this._handleKeyDown);
-        }
-    }
-    _removeEventListeners() {
-        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);
-        if (this._innerEl) {
-            this._innerEl.removeEventListener('mousedown', this._startMouseDrag);
-            this._innerEl.removeEventListener('touchstart', this._startTouchDrag);
-        }
-        if (this.previousEl) {
-            this.previousEl.removeEventListener('click', this._handlePrevClick);
-        }
-        if (this.nextEl) {
-            this.nextEl.removeEventListener('click', this._handleNextClick);
-        }
-        if (this.keyboardNav) {
-            document.removeEventListener('keydown', this._handleKeyDown);
-        }
-    }
-    init(index = 0) {
-        if (this._initialized)
-            return;
-        this._initialized = true;
-        this._rootEl = getClosestShadowRootOrDocument(this.containerEl);
-        this._slideEls = this.slides.map((slide) => {
-            return createElement({
-                classes: 'hg-slide',
-                contents: slide,
-            });
-        });
-        this._breadcrumbs = this.slides.map((slide, i) => createElement({
-            classes: 'hg-breadcrumb',
-            listeners: { click: () => this._goTo({ index: i }) },
-        }));
-        this._breadcrumbsCurrent = createElement({
-            classes: 'hg-breadcrumbs-current',
-        });
-        this._breadcrumbsInnerEl = createElement({
-            classes: 'hg-breadcrumbs',
-            contents: [...this._breadcrumbs, this._breadcrumbsCurrent],
-        });
-        this._innerEl = createElement({
-            classes: 'hg-container',
-            contents: this._slideEls,
-            style: {
-                'touch-action': 'pan-y',
-            },
-        });
-        this.containerEl.appendChild(this._innerEl);
-        if (this.breadcrumbsContainerEl) {
-            this.breadcrumbsContainerEl.style.setProperty('--breadCrumbDiameter', this.breadcrumbDiameter + 'px');
-            this.breadcrumbsContainerEl.appendChild(this._breadcrumbsInnerEl);
-        }
-        this._addEventListeners();
-        // Only one slide? Don't actually make a slideshow
-        if (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, false);
-        this._goTo({ index, animate: false, forceUpdate: true, isInitial: true });
-    }
-    destroy() {
-        if (!this._initialized)
-            return;
-        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._rootEl = null;
-        this._slideEls = null;
-        this._initialized = false;
-    }
-    _handleResize(entries) {
-        if (!entries?.[0])
-            return;
-        this._positions = getElementPositions(this.containerEl, this._slideEls);
-    }
-    _updateBreadcrumbClasses(newIndex, animate = true) {
-        if (this._breadcrumbs.length >= this.dynamicBreadCrumbsCutoff &&
-            this.breadcrumbsContainerEl) {
-            setClasses(this._breadcrumbsInnerEl, {
-                'no-transition': !animate,
-            });
-            requestAnimationFrame(() => {
-                this._breadcrumbsInnerEl.classList.remove('no-transition');
-            });
-            const translate = this._breadcrumbsInnerEl.offsetWidth / 2 -
-                this.breadcrumbDiameter / 2 -
-                this._breadcrumbs[newIndex].offsetLeft;
-            this._breadcrumbsInnerEl.style.transform = `translateX(${translate}px)`;
-            this._breadcrumbs.forEach((crumb, i) => {
-                setClasses(crumb, {
-                    'hg-breadcrumb--hidden': i <= newIndex - 5 || i >= newIndex + 5,
-                    'hg-breadcrumb--4': i === newIndex - 4 || i === newIndex + 4,
-                    'hg-breadcrumb--3': i === newIndex - 3 || i === newIndex + 3,
-                    'hg-breadcrumb--2': i === newIndex - 2 || i === newIndex + 2,
-                    'hg-breadcrumb--1': i === newIndex - 1 || i === newIndex + 1,
-                });
-            });
-        }
-    }
-    _updateBreadcrumbs(newIndex, oldIndex, animate) {
-        if (!this._breadcrumbs?.length)
-            return;
-        this._updateBreadcrumbClasses(newIndex, animate);
-        if (!this.breadcrumbsContainerEl)
-            return;
-        if (!animate ||
-            (this._breadcrumbs.length >= 10 && Math.abs(newIndex - oldIndex) > 1)) {
-            if (newIndex > oldIndex) {
-                this._breadcrumbsCurrent.style.left = '';
-                this._breadcrumbsCurrent.style.right = `${this._breadcrumbsInnerEl.offsetWidth -
-                    (this._breadcrumbs[newIndex].offsetLeft + this.breadcrumbDiameter)}px`;
-            }
-            else {
-                this._breadcrumbsCurrent.style.right = '';
-                this._breadcrumbsCurrent.style.left =
-                    this._breadcrumbs[newIndex].offsetLeft + 'px';
-            }
-        }
-        else {
-            if (newIndex < oldIndex) {
-                this._breadcrumbsCurrent.style.left = '';
-                this._breadcrumbsCurrent.style.right = `${this._breadcrumbsInnerEl.offsetWidth -
-                    this._breadcrumbs[oldIndex]?.offsetLeft -
-                    this.breadcrumbDiameter}px`;
-            }
-            else {
-                this._breadcrumbsCurrent.style.right = '';
-                this._breadcrumbsCurrent.style.left =
-                    this._breadcrumbs[oldIndex]?.offsetLeft + 'px';
-            }
-            forceLayout();
-            this._raf = requestAnimationFrame(() => {
-                if (newIndex > oldIndex) {
-                    this._breadcrumbsCurrent.style.width = `${this._breadcrumbs[newIndex]?.offsetLeft -
-                        this._breadcrumbsCurrent.offsetLeft +
-                        this.breadcrumbDiameter}px`;
-                }
-                else {
-                    this._breadcrumbsCurrent.style.width = `${this._breadcrumbsCurrent.offsetLeft +
-                        this._breadcrumbsCurrent.offsetWidth -
-                        this._breadcrumbs[newIndex]?.offsetLeft}px`;
-                }
-            });
-            this._st = setTimeout(() => {
-                if (newIndex > oldIndex) {
-                    this._breadcrumbsCurrent.style.left = '';
-                    this._breadcrumbsCurrent.style.right = `${this._breadcrumbsInnerEl.offsetWidth -
-                        (this._breadcrumbs[newIndex].offsetLeft + this.breadcrumbDiameter)}px`;
-                }
-                else {
-                    this._breadcrumbsCurrent.style.right = '';
-                    this._breadcrumbsCurrent.style.left =
-                        this._breadcrumbs[newIndex].offsetLeft + 'px';
-                }
-                forceLayout();
-                this._raf = requestAnimationFrame(() => {
-                    this._breadcrumbsCurrent.style.width = '';
-                });
-            }, 200);
-        }
-    }
-    _goTo({ index, animate = true, forceUpdate = false, easing = 'ease', isInitial = false, }) {
-        if (!this._slideEls?.[index])
-            return;
-        if (!this._initialized)
-            return;
-        cancelAnimationFrame(this._focusRaf);
-        const newIndex = index;
-        const oldIndex = this.index;
-        this.index = newIndex;
-        clearTimeout(this._transitionSt);
-        if (this.virtualize) {
-            this._slideEls.forEach((el, i) => {
-                const distance = Math.abs(this.index - i);
-                if (distance > this.proximalSlidesToRender && i !== oldIndex) {
-                    if (el.hasChildNodes()) {
-                        el.beholdReplaceChildren();
-                    }
-                }
-                else if (!el.hasChildNodes()) {
-                    el.beholdReplaceChildren(this.slides[i]);
-                }
-            });
-        }
-        if (window.matchMedia(`(prefers-reduced-motion)`).matches) {
-            animate = false;
-        }
-        this._isDragging = false;
-        this._progressToNextSlide = 0;
-        if (newIndex === oldIndex && !forceUpdate) {
-            this._breadcrumbsCurrent.style.width = '';
-        }
-        else {
-            cancelAnimationFrame(this._raf);
-            clearTimeout(this._st);
-            this._updateBreadcrumbs(newIndex, oldIndex, animate);
-            if (this.onSlideChange)
-                this.onSlideChange(newIndex, isInitial);
-        }
-        if (animate) {
-            this._innerEl.style.transition = `transform ${this.transitionSpeed}ms ${easing}`;
-        }
-        else {
-            this._innerEl.style.transition = this.baseTransition;
-        }
-        this._innerEl.style.transform = `translateX(${newIndex * -100}%)`;
-        this._currentPercentTranslation = newIndex * -100;
-        if (this.previousEl) {
-            if (newIndex < 1) {
-                if (this._rootEl.activeElement === this.previousEl) {
-                    this._focusRaf = requestAnimationFrame(() => {
-                        this.nextEl.focus();
-                    });
-                }
-                this.previousEl.setAttribute('disabled', 'true');
-            }
-            else {
-                this.previousEl.removeAttribute('disabled');
-            }
-        }
-        if (this.nextEl) {
-            if (newIndex >= this._slideEls.length - 1) {
-                if (this._rootEl.activeElement === this.nextEl) {
-                    this._focusRaf = requestAnimationFrame(() => {
-                        this.previousEl.focus();
-                    });
-                }
-                this.nextEl.setAttribute('disabled', 'true');
-            }
-            else {
-                this.nextEl.removeAttribute('disabled');
-            }
-        }
-        this._transitionSt = setTimeout(() => {
-            this._innerEl.style.transition = this.baseTransition;
-        }, this.transitionSpeed);
-    }
-    _handlePrevClick() {
-        this._retreat();
-    }
-    _handleNextClick() {
-        this._advance();
-    }
-    _retreat(easing = 'ease') {
-        if (typeof easing !== 'string')
-            easing = 'ease';
-        if (this.index < 1) {
-            this._goTo({ index: this.index });
-        }
-        else {
-            this._goTo({ index: this.index - 1, easing });
-        }
-    }
-    _advance(easing = 'ease') {
-        if (typeof easing !== 'string')
-            easing = 'ease';
-        if (this.index >= this._slideEls.length - 1) {
-            this._goTo({ index: this.index });
-        }
-        else {
-            this._goTo({ index: this.index + 1, easing });
-        }
-    }
-    _handleKeyDown(evt) {
-        if (evt.code === 'ArrowRight') {
-            evt.preventDefault();
-            this._advance();
-        }
-        if (evt.code === 'ArrowLeft') {
-            evt.preventDefault();
-            this._retreat();
-        }
-    }
-    _startMouseDrag(evt) {
-        evt.stopPropagation();
-        if (evt.button > 0)
-            return;
-        this._startDrag({ x: evt.clientX, y: evt.clientY });
-    }
-    _startTouchDrag(evt) {
-        evt.stopPropagation();
-        this._startDrag({
-            x: evt.touches.item(0).clientX,
-            y: evt.touches.item(0).clientY,
-        });
-    }
-    _startDrag(startPoint) {
-        if (this.slides.length < 2 || !this._initialized)
-            return;
-        this._isDragging = true;
-        clearTimeout(this._transitionSt);
-        cancelAnimationFrame(this._raf);
-        this._positions = getElementPositions(this.containerEl, this._slideEls);
-        this._dragStartTranslation = this._positions.leftDelta;
-        this._currentPercentTranslation =
-            (this._dragStartTranslation / this._positions.parent.width) * 100;
-        this._innerEl.style.transform = `translateX(${this._currentPercentTranslation}%)`;
-        this._innerEl.style.transition = this.baseTransition;
-        this._progressToNextSlide = 0;
-        this._breadcrumbsCurrent.style.transition = 'none';
-        this._dragStartPoint = startPoint;
-        this._prevDragPoint = startPoint;
-        this._currentDeltaX = 0;
-        this._recentDeltas = [];
-    }
-    _drag(currentPosition, isTouch = false) {
-        if (this.slides.length < 2 || !this._isDragging || !this._initialized) {
-            return;
-        }
-        const movementX = currentPosition.x - this._prevDragPoint.x;
-        this._positions = {
-            ...this._positions,
-            leftDelta: this._positions.leftDelta + movementX,
-            rightDelta: this._positions.rightDelta + movementX,
-        };
-        const dragLimitInPixels = this._positions.parent.width * this.dragLimit;
-        pushWithLimit(this._recentDeltas, movementX, 5);
-        this._prevDragPoint = currentPosition;
-        // Dragging past beginning or end
-        const isPastEdge = this._positions.leftDelta > 0 || this._positions.rightDelta < 0;
-        if (isPastEdge) {
-            const movementXWithResistance = applyResistance(movementX, this._currentDeltaX, this._positions.parent.width);
-            this._currentDeltaX = this._currentDeltaX + movementXWithResistance;
-        }
-        else {
-            this._currentDeltaX = this._currentDeltaX + movementX;
-        }
-        let deltaX = currentPosition.x - this._dragStartPoint.x;
-        let deltaY = currentPosition.y - this._dragStartPoint.y;
-        let slope = Math.abs(deltaY) / Math.abs(deltaX);
-        if (isTouch && slope > 0.85) {
-            this._endDrag();
-            return;
-        }
-        this._progressToNextSlide = Math.abs(deltaX / dragLimitInPixels);
-        if (movementX < 0) {
-            this._draggingDirection = 'left';
-        }
-        if (movementX > 0) {
-            this._draggingDirection = 'right';
-        }
-        const pixeltranslation = this._dragStartTranslation + this._currentDeltaX;
-        this._currentPercentTranslation =
-            (pixeltranslation / this._positions.parent.width) * 100;
-        if (this._currentDeltaX < 0) {
-            this._breadcrumbsCurrent.style.right = '';
-            this._breadcrumbsCurrent.style.left = `${this._breadcrumbs[this.index].offsetLeft}px`;
-        }
-        if (this._currentDeltaX > 0) {
-            this._breadcrumbsCurrent.style.left = '';
-            this._breadcrumbsCurrent.style.right = `${this._breadcrumbsInnerEl.offsetWidth -
-                (this._breadcrumbs[this.index].offsetLeft + this.breadcrumbDiameter)}px`;
-        }
-        if (isPastEdge) {
-            this._breadcrumbsCurrent.style.width = `${this.breadcrumbDiameter +
-                Math.abs((this.breadcrumbDiameter *
-                    4 *
-                    (this._currentPercentTranslation + 100 * this.index)) /
-                    100)}px`;
-        }
-        else {
-            this._breadcrumbsCurrent.style.width = `${Math.min(this.breadcrumbDiameter * 2.75, this.breadcrumbDiameter +
-                Math.abs((this.breadcrumbDiameter *
-                    4 *
-                    (this._currentPercentTranslation + 100 * this.index)) /
-                    100))}px`;
-        }
-        this._innerEl.style.transform = `translateX(${this._currentPercentTranslation}%)`;
-        this._innerEl.style.transition = this.baseTransition;
-    }
-    _mouseDrag(evt) {
-        this._throttledDrag({ x: evt.clientX, y: evt.clientY }, false);
-    }
-    _touchDrag(evt) {
-        this._throttledDrag({ x: evt.touches.item(0).clientX, y: evt.touches.item(0).clientY }, true);
-    }
-    _endDrag() {
-        this._isDragging = false;
-        this._breadcrumbsCurrent.style.transition = '';
-        this._innerEl.style.transition = this.baseTransition;
-        this._dragStartPoint = { x: 0, y: 0 };
-        this._prevDragPoint = { x: 0, y: 0 };
-        this._currentDeltaX = 0;
-        const momentum = getAbsArrayAverage(this._recentDeltas);
-        let action = null;
-        if (momentum > this.momentumToTransition ||
-            this._progressToNextSlide >= 1) {
-            if (this._currentPercentTranslation + 100 * this.index < 0 &&
-                this._draggingDirection === 'left') {
-                action = 'advance';
-            }
-            if (this._currentPercentTranslation + 100 * this.index > 0 &&
-                this._draggingDirection === 'right') {
-                action = 'retreat';
-            }
-        }
-        switch (action) {
-            case 'advance':
-                this._raf = requestAnimationFrame(() => this._advance('cubic-bezier(0.25, .25, 0.5, 1)'));
-                break;
-            case 'retreat':
-                this._raf = requestAnimationFrame(() => this._retreat('cubic-bezier(0.25, .25, 0.5, 1)'));
-                break;
-            default:
-                this._raf = requestAnimationFrame(() => this._goTo({ index: this.index }));
-        }
-        this._draggingDirection = null;
-        this._recentDeltas = [];
-    }
-}
-function getElementPositions(containerEl, slideEls) {
-    if (!containerEl || !slideEls?.length)
-        return;
-    const parentBox = containerEl.getBoundingClientRect();
-    const firstSlideBox = slideEls[0].getBoundingClientRect();
-    const lastSlideBox = slideEls[slideEls.length - 1].getBoundingClientRect();
-    return {
-        parent: parentBox,
-        firstSlide: firstSlideBox,
-        lastSlide: lastSlideBox,
-        leftDelta: firstSlideBox.left - parentBox.left,
-        rightDelta: lastSlideBox.right - parentBox.right,
-    };
-}
-function applyResistance(delta, total, limit, slope = 0.125) {
-    const resistance = 1 - (Math.abs(total) / Math.abs(limit)) ** slope;
-    return delta * resistance;
-}
-function getAbsArrayAverage(arr) {
-    return Math.abs(arr.reduce((acc, curr) => acc + curr, 0) / arr.length);
-}
-
-class PopoverScroller {
-    slides;
-    containerEl;
-    onSlideChange;
-    onRequestClose;
-    _initialized;
-    _currentSlide;
-    _scrollContainerEl;
-    _innerEl;
-    _throttledScroll;
-    _goToRaf;
-    constructor({ slides, containerEl, onSlideChange, onRequestClose = null }) {
-        this.slides = slides;
-        this.containerEl = containerEl;
-        this.onSlideChange = onSlideChange;
-        this.onRequestClose = onRequestClose;
-        this.init = this.init.bind(this);
-        this.destroy = this.destroy.bind(this);
-        this._initialized = false;
-        this._currentSlide = null;
-        this._scrollContainerEl = null;
-        this._innerEl = null;
-        this._onBackGroundClick = this._onBackGroundClick.bind(this);
-        this._throttledScroll = throttle(this._handleScroll, 200, this);
-    }
-    init(index = 0) {
-        if (this._initialized)
-            return;
-        this._initialized = true;
-        this._innerEl = createElement({
-            classes: prefixedClass('inner'),
-            contents: this.slides,
-        });
-        this._scrollContainerEl = createElement({
-            classes: prefixedClass('container'),
-            contents: this._innerEl,
-        });
-        this.containerEl.appendChild(this._scrollContainerEl);
-        this._scrollContainerEl.addEventListener('click', this._onBackGroundClick);
-        this._scrollContainerEl.addEventListener('scroll', this._throttledScroll, {
-            passive: true,
-        });
-        this._goTo({ index, animate: false });
-    }
-    destroy() {
-        if (!this._initialized)
-            return;
-        cancelAnimationFrame(this._goToRaf);
-        this._initialized = false;
-        this._scrollContainerEl.removeEventListener('click', this._onBackGroundClick);
-        this._scrollContainerEl.removeEventListener('scroll', this._throttledScroll);
-        this._scrollContainerEl.remove();
-        this._scrollContainerEl = null;
-        this._innerEl = null;
-    }
-    _handleScroll() {
-        getMostVisible(this.slides).then((mostVisible) => {
-            if (this._currentSlide !== mostVisible) {
-                this._currentSlide = mostVisible;
-                if (this.onSlideChange)
-                    this.onSlideChange(this._currentSlide);
-            }
-        });
-    }
-    _onBackGroundClick(evt) {
-        if (evt.target === this._scrollContainerEl && this.onRequestClose) {
-            this.onRequestClose();
-        }
-    }
-    _goTo({ index, animate = true }) {
-        cancelAnimationFrame(this._goToRaf);
-        if (!this.slides?.[index])
-            return;
-        this._currentSlide = index;
-        if (this.onSlideChange)
-            this.onSlideChange(this._currentSlide);
-        this._goToRaf = requestAnimationFrame(() => {
-            const slideTop = this.slides[index].offsetTop;
-            this._scrollContainerEl?.scrollTo({
-                top: slideTop - 10,
-                behavior: animate ? 'smooth' : 'instant',
-            });
-        });
-    }
-}
-function prefixedClass(className) {
-    return 'behold-ps-' + className;
-}
-
-var mutedIcon = "<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>";
-
-var unmutedIcon = "<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>";
-
-/**
- * @description
- * Required props: post
- */
-class PopoverSlideVideo extends BaseElement {
-    label = 'PopoverSlideVideo';
-    // Internal
-    _videoEl;
-    _imageEl;
-    _soundControlEl;
-    // Provided
-    post;
-    constructor() {
-        super();
-        // Register child components
-        Video.register();
-        Image.register();
-        this._onLoad = this._onLoad.bind(this);
-        this._onPlay = this._onPlay.bind(this);
-        this._onPause = this._onPause.bind(this);
-        this._togglePlayback = this._togglePlayback.bind(this);
-        this._toggleSound = this._toggleSound.bind(this);
-        this.play = this.play.bind(this);
-        this.pause = this.pause.bind(this);
-        this.showSoundControl = this.showSoundControl.bind(this);
-        this.hideSoundControl = this.hideSoundControl.bind(this);
-        this.preload = this.preload.bind(this);
-        this.onLocalStateChange(this._handleLocalStateChange, { isPlaying: false });
-        this.onGlobalStateChange(this._handleGlobalStateChange);
-        // Connect
-        this.onConnect(() => {
-            if (this.post.mediaUrl) {
-                this._videoEl = createElement({
-                    type: 'behold-video',
-                    classes: 'video',
-                    props: {
-                        mediaUrl: this.post.mediaUrl,
-                        sizes: this.post.sizes,
-                        renderPlaceholder: true,
-                    },
-                    listeners: {
-                        click: this._togglePlayback,
-                        load: this._onLoad,
-                        play: this._onPlay,
-                        pause: this._onPause,
-                    },
-                });
-                this._soundControlEl = createElement({
-                    type: 'button',
-                    classes: 'video-mute',
-                    contents: this.globalState.isMuted ? mutedIcon : unmutedIcon,
-                    listeners: {
-                        click: this._toggleSound,
-                    },
-                    attributes: {
-                        'aria-label': this.globalState.isMuted ? 'unmute' : 'mute',
-                    },
-                });
-                if (this.globalState.isMuted) {
-                    this._videoEl.mute();
-                }
-                else {
-                    this._videoEl.unmute();
-                }
-                this.classList.add('video-container', 'video-container--paused');
-                this.beholdReplaceChildren(this._videoEl, this._soundControlEl);
-            }
-            else {
-                this._imageEl = createElement({
-                    type: 'behold-image',
-                    props: {
-                        sizes: this.post.sizes,
-                        mediaUrl: this.post.thumbnailUrl,
-                        aspectRatio: this.post.sizes.full.width / this.post.sizes.full.height,
-                    },
-                    listeners: {
-                        load: this._onLoad,
-                    },
-                });
-                this.beholdReplaceChildren(this._imageEl);
-            }
-        });
-    }
-    _handleLocalStateChange({ changedProps, newState }) {
-        if (changedProps.includes('isPlaying') && this._videoEl) {
-            if (newState.isPlaying && !this._videoEl.isPlaying) {
-                this._videoEl.play();
-            }
-            if (!newState.isPlaying && this._videoEl.isPlaying) {
-                this._videoEl.pause();
-            }
-        }
-    }
-    _handleGlobalStateChange({ changedProps, newState }) {
-        if (changedProps.includes('isMuted')) {
-            if (this._videoEl && this._soundControlEl) {
-                if (newState.isMuted) {
-                    this._videoEl.mute();
-                    this._soundControlEl.innerHTML = mutedIcon;
-                }
-                else {
-                    this._videoEl.unmute();
-                    this._soundControlEl.innerHTML = unmutedIcon;
-                }
-            }
-        }
-    }
-    _onLoad() {
-        this.dispatchEvent(new Event('load'));
-        this.classList.add('is-loaded');
-    }
-    _onPlay() {
-        this.classList.remove('video-container--paused');
-    }
-    _onPause() {
-        this.classList.add('video-container--paused');
-    }
-    _togglePlayback() {
-        if (!this._videoEl)
-            return;
-        if (this._videoEl.isPlaying) {
-            this.pause();
-        }
-        else {
-            this.play();
-        }
-    }
-    _toggleSound() {
-        if (!this._videoEl)
-            return;
-        if (this._videoEl.muted) {
-            this.updateGlobalState({ isMuted: false });
-        }
-        else {
-            this.updateGlobalState({ isMuted: true });
-        }
-    }
-    play() {
-        this.updateLocalState({ isPlaying: true });
-        this.showSoundControl();
-    }
-    pause() {
-        this.updateLocalState({ isPlaying: false });
-    }
-    showSoundControl() {
-        if (!this.isConnected || !this._soundControlEl)
-            return;
-        this._soundControlEl.classList.add('video-mute--visible');
-    }
-    hideSoundControl() {
-        if (!this.isConnected || !this._soundControlEl)
-            return;
-        this._soundControlEl.classList.remove('video-mute--visible');
-    }
-    /**
-     * Preload
-     */
-    preload() {
-        this._videoEl?.preload();
-    }
-    /*
-     *   Register
-     */
-    static register(name = 'behold-popover-slide-video') {
-        if (!customElements.get(name)) {
-            customElements.define(name, PopoverSlideVideo);
-        }
-        return name;
-    }
-}
-
-/**
- * @description
- * Required props: 'post'
- */
-class PopoverSlideAlbum extends BaseElement {
-    label = 'PopoverSlideAlbum';
-    // Internal
-    _containerEl;
-    _spaceholderEl;
-    _childEls;
-    _previousEl;
-    _nextEl;
-    _breadcrumbsEl;
-    _childCarousel;
-    currentSlideIndex = 0;
-    // Provided
-    post;
-    constructor() {
-        super();
-        // Listen to Prop changes
-        this.onPropChange(() => { }, ['post']);
-        // Register child components
-        Image.register();
-        PopoverSlideVideo.register();
-        // Bind event handlers
-        this._handleSlideChange = this._handleSlideChange.bind(this);
-        this._handleIntersection = this._handleIntersection.bind(this);
-        this.preload = this.preload.bind(this);
-        // Connect
-        this.onConnect(() => {
-            this._childEls = this._buildSlideEls();
-            const spaceholderSource = this.post.sizes?.full?.height
-                ? `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='${this.post.sizes?.full?.width}' height='${this.post.sizes?.full?.height}'%3E%3C/svg%3E%0A`
-                : this.post.children?.[0]?.sizes?.full.mediaUrl ||
-                    this.post.children?.[0]?.thumbnailUrl ||
-                    null;
-            if (this.post.mediaUrlIsVideo && !spaceholderSource) {
-                this._spaceholderEl = createElement({
-                    type: 'video',
-                    classes: 'slide__carousel-spaceholder',
-                    attributes: {
-                        src: this.post.mediaUrl,
-                        height: this.post.sizes?.full?.height,
-                        width: this.post.sizes?.full?.width,
-                    },
-                    props: {
-                        muted: true,
-                    },
-                });
-            }
-            else {
-                this._spaceholderEl = createElement({
-                    type: 'img',
-                    classes: 'slide__carousel-spaceholder',
-                    attributes: {
-                        src: spaceholderSource,
-                        height: this.post.sizes?.full?.height,
-                        width: this.post.sizes?.full?.width,
-                    },
-                });
-            }
-            this._previousEl = createElement({
-                type: 'button',
-                classes: 'slide__carousel-previous',
-                attributes: { 'aria-label': 'Previous album slide' },
-                contents: caretLeftIcon,
-            });
-            this._nextEl = createElement({
-                type: 'button',
-                classes: 'slide__carousel-next',
-                attributes: { 'aria-label': 'Next album slide' },
-                contents: caretRightIcon,
-            });
-            this._breadcrumbsEl = createElement({
-                classes: 'slide__carousel-breadcrumbs',
-            });
-            this._containerEl = createElement({
-                classes: 'slide__carousel',
-                contents: [
-                    ...this._childEls,
-                    this._previousEl,
-                    this._nextEl,
-                    this._breadcrumbsEl,
-                ],
-            });
-            this.replaceChildren(this._spaceholderEl, this._containerEl);
-            this._childCarousel = new HurdyGurdy({
-                slides: this._childEls,
-                containerEl: this._containerEl,
-                keyboardNav: false,
-                breadcrumbsContainerEl: this._breadcrumbsEl,
-                dynamicBreadCrumbsCutoff: 7,
-                previousEl: this._previousEl,
-                nextEl: this._nextEl,
-                onSlideChange: this._handleSlideChange,
-                virtualize: true,
-                proximalSlidesToRender: 2,
-                dragLimit: 0.6,
-            });
-            this.onIntersection(this, this._handleIntersection);
-        });
-        this.onDisconnect(() => {
-            this._childCarousel.destroy();
-            this._childCarousel = null;
-        });
-    }
-    /**
-     * Update tabbable els
-     */
-    _updateTabbable() {
-        updateTabbableEls({
-            include: [this._childEls[this.currentSlideIndex]],
-            exclude: this._childEls.filter((c, i) => i !== this.currentSlideIndex),
-            merge: true,
-        });
-    }
-    /**
-     * On intersection
-     */
-    _handleIntersection(entry) {
-        if (entry.isIntersecting) {
-            this._childCarousel.init(0);
-        }
-    }
-    /**
-     * On slide change
-     */
-    _handleSlideChange(newIndex, isInitial = false) {
-        if (newIndex !== this.currentSlideIndex &&
-            this.globalState.keyboardNavEnabled) {
-            announceToScreenReader(`Slide ${newIndex + 1} of ${this._childEls.length} in Album`);
-        }
-        this.currentSlideIndex = newIndex;
-        this._childEls.forEach((child, i) => {
-            if (isVideoSlide(child)) {
-                if (i === newIndex) {
-                    child.play();
-                }
-                else {
-                    child.hideSoundControl();
-                    child.pause();
-                }
-            }
-        });
-        const prev = this._childEls[newIndex - 1];
-        const next = this._childEls[newIndex + 1];
-        if (prev)
-            prev.preload();
-        if (next)
-            next.preload();
-        this._updateTabbable();
-        if (!isInitial) {
-            this._setBackgroundColor(newIndex);
-        }
-    }
-    /**
-     * Set background color
-     */
-    _setBackgroundColor(index) {
-        const hslArray = RGBStringToHSLArray(this.post.children[index].colorPalette?.dominant || '100,100,100').map((val) => Math.round(val));
-        this.style.backgroundColor = `hsl(${hslArray[0]} ${Math.min(hslArray[1], 35)}% ${Math.min(hslArray[2], 13)}%)`;
-        const ldrColorHSLArray = RGBStringToHSLArray(this.post.children[index].colorPalette?.dominant || '255,255,255').map((val) => Math.round(val));
-        const ldrColorString = `hsl(${ldrColorHSLArray[0]} ${ldrColorHSLArray[1]}% ${Math.max(ldrColorHSLArray[2], 50)}%)`;
-        this.style.setProperty('--uib-color', ldrColorString);
-        this.updateGlobalState({
-            popoverOverlayHslArray: hslArray,
-        });
-    }
-    /**
-     * Build slide els
-     */
-    _buildSlideEls() {
-        return this.post.children.map((child) => {
-            let mediaEl = null;
-            switch (child.mediaType) {
-                case 'IMAGE':
-                    mediaEl = createElement({
-                        type: 'behold-image',
-                        classes: 'slide__carousel-slide',
-                        props: {
-                            sizes: child.sizes,
-                            mediaUrl: child.mediaUrl,
-                            showLoader: true,
-                            aspectRatio: child.sizes.full.width / child.sizes.full.height,
-                        },
-                    });
-                    break;
-                case 'VIDEO':
-                    mediaEl = createElement({
-                        type: 'behold-popover-slide-video',
-                        classes: 'slide__carousel-slide',
-                        props: {
-                            post: child,
-                        },
-                    });
-                    break;
-            }
-            return mediaEl;
-        });
-    }
-    /**
-     * Play
-     */
-    play() {
-        const currentChild = this._childEls[this.currentSlideIndex];
-        if (isVideoSlide(currentChild)) {
-            currentChild.play();
-        }
-    }
-    /**
-     * Pause
-     */
-    pause() {
-        this._childEls.filter(isVideoSlide).forEach((child) => {
-            child.hideSoundControl();
-            child.pause();
-        });
-    }
-    /**
-     * Preload media
-     */
-    preload() {
-        this._childEls?.[0]?.preload();
-    }
-    /*
-     *   Register
-     */
-    static register(name = 'behold-popover-slide-album') {
-        if (!customElements.get(name)) {
-            customElements.define(name, PopoverSlideAlbum);
-        }
-        return name;
-    }
-}
-const isVideoSlide = (slide) => slide.tagName === 'BEHOLD-POPOVER-SLIDE-VIDEO';
-
-var hashIcon = "<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>";
-
-var externalLinkIcon = "<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>";
-
-/**
- * @description
- * Required props: 'post', 'feedMetadata'
- */
-class PopoverGallerySlide extends BaseElement {
-    label = 'PopoverGallerySlide';
-    // Internal
-    _innerEl;
-    _avatarImageEl;
-    _headerText;
-    _avatarEl;
-    _headerEl;
-    _captionEl;
-    _footerLinkEl;
-    _footerEl;
-    _textEl;
-    _mediaEl;
-    _moreEl;
-    // Provided
-    post;
-    feedMetadata;
-    constructor() {
-        super();
-        // Define which props will trigger _handlePropChange
-        this.onPropChange(this._handlePropChange, ['post', 'feedMetadata']);
-        // Register child components
-        Image.register();
-        PopoverSlideVideo.register();
-        PopoverSlideAlbum.register();
-        // Bind event listeners
-        this.expandCaption = this.expandCaption.bind(this);
-        this.preload = this.preload.bind(this);
-        // Connect
-        this.onConnect(() => {
-            this.render();
-        });
-    }
-    /**
-     * Render contents
-     */
-    render() {
-        this.classList.remove('is-loaded');
-        if (!this.post)
-            return;
-        const hslArray = RGBStringToHSLArray(this.post.colorPalette?.dominant || '100,100,100').map((val) => Math.round(val));
-        const bgColorString = `hsl(${hslArray[0]} ${Math.min(hslArray[1], 35)}% ${Math.min(hslArray[2], 13)}%)`;
-        const ldrColorHSLArray = RGBStringToHSLArray(this.post.colorPalette?.dominant || '255,255,255').map((val) => Math.round(val));
-        const ldrColorString = `hsl(${ldrColorHSLArray[0]} ${ldrColorHSLArray[1]}% ${Math.max(ldrColorHSLArray[2], 50)}%)`;
-        this.style.setProperty('--uib-color', ldrColorString);
-        switch (this.post?.mediaType) {
-            case 'VIDEO':
-                this._mediaEl = createElement({
-                    type: 'behold-popover-slide-video',
-                    classes: 'slide__media',
-                    style: {
-                        backgroundColor: bgColorString,
-                    },
-                    props: {
-                        post: this.post,
-                    },
-                });
-                break;
-            case 'CAROUSEL_ALBUM':
-                this._mediaEl = createElement({
-                    type: 'behold-popover-slide-album',
-                    classes: 'slide__media',
-                    style: {
-                        backgroundColor: bgColorString,
-                    },
-                    props: {
-                        post: this.post,
-                        aspectRatio: this.post.sizes.full.width / this.post.sizes.full.height,
-                    },
-                });
-                break;
-            case 'IMAGE':
-            default:
-                this._mediaEl = createElement({
-                    type: 'behold-image',
-                    classes: 'slide__media',
-                    style: {
-                        backgroundColor: bgColorString,
-                    },
-                    props: {
-                        sizes: this.post.sizes,
-                        mediaUrl: this.post.mediaUrl,
-                        showLoader: true,
-                        aspectRatio: this.post.sizes.full.width / this.post.sizes.full.height,
-                    },
-                });
-        }
-        this._avatarImageEl = !this.feedMetadata?.profilePictureUrl
-            ? null
-            : createElement({
-                type: 'img',
-                attributes: { src: this.feedMetadata.profilePictureUrl },
-            });
-        this._headerText = '@' + this.feedMetadata.username;
-        if (this.feedMetadata.hashtags) {
-            this._avatarImageEl = hashIcon;
-            this._headerText = this.feedMetadata.hashtags.join(', ');
-        }
-        this._avatarEl = this._avatarImageEl
-            ? createElement({
-                classes: 'slide__avatar',
-                contents: this._avatarImageEl,
-                attributes: {
-                    'aria-label': this.feedMetadata.hashtags ? 'hashtags' : 'username',
-                },
-            })
-            : null;
-        this._headerEl = createElement({
-            classes: 'slide__header',
-            contents: [this._avatarEl, this._headerText],
-        });
-        this._captionEl = this.post?.caption?.trim()?.length
-            ? createElement({
-                classes: 'slide__caption',
-                contents: this.post.caption,
-            })
-            : null;
-        this._footerLinkEl = this.post.permalink
-            ? createElement({
-                type: 'a',
-                attributes: {
-                    href: this.post.permalink,
-                    target: '_blank',
-                },
-                classes: 'slide__footer-link',
-                contents: ['Go to post', externalLinkIcon],
-            })
-            : '';
-        this._footerEl = createElement({
-            classes: 'slide__footer',
-            contents: [this._footerLinkEl],
-        });
-        this._textEl = createElement({
-            classes: 'slide__text',
-            contents: [this._headerEl, this._captionEl, this._footerEl],
-        });
-        this._innerEl = createElement({
-            classes: 'slide__inner',
-            contents: [this._mediaEl, this._textEl],
-        });
-        this._moreEl = createElement({
-            type: 'button',
-            classes: 'slide__more',
-            contents: '… more',
-            listeners: { click: this.expandCaption },
-        });
-        this.beholdReplaceChildren(this._innerEl);
-        forceLayout();
-        this.to(() => {
-            this.classList.add('is-loaded');
-        }, 10, 'onConnect');
-    }
-    /*
-     *   Handle prop change
-     */
-    _handlePropChange({ changedProp, newValue }) {
-        switch (changedProp) {
-            case 'feedMetadata':
-                if (!this.isConnected)
-                    return;
-                this._headerText = '@' + newValue.username;
-                if (newValue.hashtags?.length) {
-                    this._avatarImageEl = hashIcon;
-                    this._headerText = newValue.hashtags.join(', ');
-                }
-                else {
-                    this._avatarImageEl = !newValue?.profilePictureUrl
-                        ? null
-                        : createElement({
-                            type: 'img',
-                            attributes: { src: newValue.profilePictureUrl },
-                        });
-                }
-                this._avatarEl = this._avatarImageEl
-                    ? createElement({
-                        classes: 'slide__avatar',
-                        contents: this._avatarImageEl,
-                        attributes: {
-                            'aria-label': this.feedMetadata.hashtags
-                                ? 'hashtags'
-                                : 'username',
-                        },
-                    })
-                    : null;
-                this._headerEl = createElement({
-                    classes: 'slide__header',
-                    contents: [this._avatarEl, this._headerText],
-                });
-                break;
-            case 'post':
-                if (!this._mediaEl) {
-                    this.render();
-                }
-                if (newValue?.mediaType === 'IMAGE') {
-                    Object.assign(this._mediaEl, {
-                        sizes: this.post.sizes,
-                        mediaUrl: this.post.mediaUrl,
-                        showLoader: true,
-                    });
-                }
-                else {
-                    if (!isImage(this._mediaEl)) {
-                        this._mediaEl.post = newValue;
-                    }
-                }
-                break;
-        }
-    }
-    /**
-     * Activate
-     */
-    activate() {
-        if ('VIDEO,CAROUSEL_ALBUM'.includes(this.post.mediaType) && this._mediaEl) {
-            const videoEl = this._mediaEl;
-            videoEl.play();
-        }
-    }
-    /**
-     * Deactivate
-     */
-    deactivate() {
-        if (this.post.mediaType === 'VIDEO' && this._mediaEl) {
-            const el = this._mediaEl;
-            el.pause();
-        }
-        if (this.post.mediaType === 'CAROUSEL_ALBUM' && this._mediaEl) {
-            const el = this._mediaEl;
-            el.pause();
-        }
-    }
-    /**
-     * Preload media
-     */
-    preload() {
-        this._mediaEl?.preload();
-    }
-    /**
-     * Get background color
-     */
-    getBackgroundColor() {
-        let colorSource = this.post;
-        if (this.post?.mediaType === 'CAROUSEL_ALBUM') {
-            const albumEl = this._mediaEl;
-            colorSource = this.post?.children?.[albumEl?.currentSlideIndex ?? 0];
-        }
-        const hslArray = RGBStringToHSLArray(colorSource?.colorPalette?.dominant || '100,100,100').map((val) => Math.round(val));
-        return hslArray;
-    }
-    /**
-     * Expand post caption
-     */
-    expandCaption() {
-        if (!this._captionEl)
-            return;
-        this._captionEl.style.transition = '';
-        this._captionEl.style.height = this._captionEl.offsetHeight + 'px';
-        this._captionEl.innerHTML = this.post?.caption || '';
-        forceLayout();
-        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');
-    }
-    /**
-     * Collapse post caption
-     */
-    collapseCaption() {
-        if (!this._captionEl)
-            return;
-        const truncatedCaption = getTruncatedText({
-            text: this.post.caption,
-            maxChars: 120,
-            maxLines: 4,
-        });
-        this._captionEl.innerHTML = truncatedCaption;
-        if (truncatedCaption?.length < this.post?.caption?.length) {
-            this._captionEl.appendChild(this._moreEl);
-        }
-    }
-    /*
-     *   Register
-     */
-    static register(name = 'behold-popover-gallery-slide') {
-        if (!customElements.get(name)) {
-            customElements.define(name, PopoverGallerySlide);
-        }
-        return name;
-    }
-}
-/*
- *   Types
- */
-const isImage = (el) => el.tagName === 'BEHOLD-IMAGE';
-
-var xIcon = "<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>";
-
-var css_248z$2 = ":host{--icon-play:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M28.4 14.9 9.5 4.2C7.5 3.1 5 4.6 5 6.8v21.3c0 2.3 2.5 3.7 4.5 2.6l19-10.7c2-1 2-4-.1-5.1z'/%3E%3C/svg%3E\");--icon-gallery:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' xml:space='preserve'%3E%3Cpath fill='%23FFF' d='M27.3 22.7v-17c0-2.6-2.1-4.7-4.7-4.7H5.7C3.1 1 1 3.1 1 5.7v17c0 2.6 2.1 4.7 4.7 4.7h17c2.5-.1 4.6-2.2 4.6-4.7zm4-13.4v14.6c0 4.1-3.4 7.4-7.4 7.4H9.2c-.5 0-.8.6-.5 1 .9 1 2.2 1.6 3.7 1.6h12.1c5.2 0 9.3-4.2 9.3-9.3V12.5c0-1.5-.6-2.8-1.6-3.7-.3-.4-.9 0-.9.5z'/%3E%3C/svg%3E\");--bottomPadding:60px;--height:min(calc(100vh - 120px - var(--bottomPadding)),1400px);--width:calc(100vw - 120px);--text-width:400px;--text-color:#262626;--text-background:#fff;--text-size:15px;--border-color:#ededed;--ease-out-back:cubic-bezier(0.085,1.735,0.285,0.995);align-items:center;box-sizing:border-box;height:100vh;justify-content:flex-start;left:0;overflow:hidden;pointer-events:none;position:fixed;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:99999}:host *{box-sizing:border-box}@media (max-width:1200px){:host{--text-width:300px;--text-size:13px}}:host(.is-scroller){--text-width:100%;--height:auto;--width:calc(100vw - 40px)}@media (prefers-color-scheme:dark){:host(.theme--auto){--text-color:#f2f2f2;--text-background:#1a1a1a;--border-color:#292929}}:host(.theme--dark){--text-color:#f2f2f2;--text-background:#1a1a1a;--border-color:#292929}:host(.is-visible){pointer-events:all}.overlay{background-color:rgba(0,0,0,.6);display:block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:all .3s ease;width:100%;will-change:opacity,background-color}@media (min-width:901px){.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}:host(.is-visible) .overlay{opacity:1;pointer-events:all}.inner{display:flex;height:calc(100% - var(--bottomPadding));justify-content:center;pointer-events:none;position:relative;width:100%;z-index:1}:host(.is-scroller) .inner{height:100%}behold-popover-gallery-slide{align-items:center;display:flex;flex-grow:0;flex-shrink:0;height:calc(100% - var(--bottomPadding));justify-content:center;margin:0;opacity:0;padding:0;pointer-events:none;transform:scale(.99);transition:transform .2s ease-out,opacity .2s ease-out;width:100%}@media (min-width:901px){behold-popover-gallery-slide:active{cursor:grabbing}}@media (prefers-reduced-motion){behold-popover-gallery-slide{transform:none;transition:none}}:host(.is-visible) behold-popover-gallery-slide.is-loaded{opacity:1;transform:none}:host(.is-scroller) behold-popover-gallery-slide{height:auto;margin-top:10px}.slide__inner{align-items:center;background-color:var(--text-background);display:flex;justify-content:center;max-height:var(--height);max-width:var(--width);overflow:hidden;pointer-events:all;position:relative}:host(.is-scroller) .slide__inner{border-radius:4px;flex-direction:column}.slide__media{align-items:center;display:flex;flex-shrink:1;height:var(--height);justify-content:center;max-height:var(--height);overflow:hidden;position:relative;transition:background-color .3s ease;z-index:1}behold-image img,behold-image video,behold-video img,behold-video video{height:auto;max-height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center center;object-position:center center;opacity:0;position:relative;width:auto;z-index:1}.behold-ps-container behold-image img,.behold-ps-container behold-image video,.behold-ps-container behold-video img,.behold-ps-container behold-video video{max-width:100%}behold-image{min-height:10px;min-width:10px;pointer-events:none;position:relative}@supports (aspect-ratio:1/1){behold-image img{min-height:100%;min-width:100%}}behold-image.is-loaded img{opacity:1;transition:opacity .4s ease}.slide__carousel{height:100%;left:0;position:absolute;top:0;width:100%}.slide__carousel:before{background:linear-gradient(0deg,rgba(0,0,0,.4),transparent);bottom:0;height:60px;left:0;width:100%;z-index:1}.slide__carousel:after,.slide__carousel:before{content:\"\";pointer-events:none;position:absolute;transform:translateZ(0)}.slide__carousel:after{background:var(--icon-gallery);height:20px;left:20px;opacity:.75;top:20px;width:20px;z-index:2}:host(.is-scroller) .slide__carousel:after{left:auto;right:15px;top:15px}img.slide__carousel-spaceholder,video.slide__carousel-spaceholder{height:auto;max-height:100%;opacity:0;pointer-events:none;visibility:hidden;width:auto}.behold-ps-container img.slide__carousel-spaceholder,.behold-ps-container video.slide__carousel-spaceholder{max-width:100%}.slide__carousel-breadcrumbs{bottom:30px;height:10px;left:50%;position:absolute;transform:translateX(-50%);z-index:2}:host(.is-scroller) .slide__carousel-breadcrumbs{bottom:10px}.slide__carousel-next,.slide__carousel-previous{align-items:center;background-color:hsla(0,0%,100%,.95);border:none;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.2);display:flex;height:30px;justify-content:center;opacity:.75;outline:none;position:absolute;top:50%;touch-action:manipulation;transform:translateY(-50%) translateZ(0);transition:opacity .3s ease;width:30px;z-index:2}:host(.keyboard-nav) .slide__carousel-next:focus,:host(.keyboard-nav) .slide__carousel-previous:focus{background-color:#000;box-shadow:0 0 10px rgba(0,0,0,.2),0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}:host(.keyboard-nav) .slide__carousel-next:focus svg path,:host(.keyboard-nav) .slide__carousel-previous:focus svg path{fill:#fff}.slide__carousel-next:not(:disabled),.slide__carousel-previous:not(:disabled){cursor:pointer}.slide__carousel-next:not(:disabled):hover,.slide__carousel-previous:not(:disabled):hover{opacity:1}.slide__carousel-next:disabled,.slide__carousel-previous:disabled{opacity:.25}.slide__carousel-next:before,.slide__carousel-previous:before{content:\"\";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.slide__carousel-next svg,.slide__carousel-previous svg{height:12px;position:absolute;width:12px}.slide__carousel-next svg path,.slide__carousel-previous svg path{fill:#000}:host(.is-scroller) .slide__carousel-next,:host(.is-scroller) .slide__carousel-previous{background-color:transparent;box-shadow:none;height:20px;width:20px}:host(.is-scroller) .slide__carousel-next svg path,:host(.is-scroller) .slide__carousel-previous svg path{fill:#fff}.slide__carousel-previous{left:20px}.slide__carousel-previous svg{transform:translateX(-1px)}:host(.is-scroller) .slide__carousel-previous{left:10px}.slide__carousel-next{right:20px}.slide__carousel-next svg{transform:translateX(1px)}:host(.is-scroller) .slide__carousel-next{right:10px}.slide__carousel-slide{cursor:grab;display:flex;height:var(--height);overflow:hidden;width:auto}.slide__carousel-slide:active{cursor:grabbing}.slide__carousel-slide-media{height:auto;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;pointer-events:none;width:auto}.video-container{align-items:center;cursor:pointer;display:flex;height:var(--height);justify-content:center;overflow:hidden;position:relative;width:100%}.video-container:after{background:var(--icon-play);content:\"\";filter:drop-shadow(1px 1px 1px rgba(0,0,0,.1));height:80px;left:calc(50% - 40px);opacity:0;pointer-events:none;position:absolute;top:calc(50% - 40px);transform:scale(.5);transition:all .15s ease;width:80px;z-index:2}.video-container.video-container--paused:after{opacity:.8;transform:none;transition:opacity .2s ease,transform .3s var(--ease-out-back)}.video-container:active{cursor:grabbing}behold-video{align-items:center;display:flex;height:100%;width:100%}behold-video.is-loaded video{opacity:1;transition:opacity .4s ease}.video-mute{align-items:center;background:transparent;border:none;bottom:0;cursor:pointer;display:flex;height:60px;justify-content:center;margin:0;opacity:0;outline:none;padding:0;position:absolute;right:0;transform:translateZ(0);transition:opacity .1s ease;width:60px;z-index:2}.video-mute.video-mute--visible{opacity:1;transition:opacity .2s ease .2s}.video-mute:before{background-color:rgba(0,0,0,.5);border-radius:50%;content:\"\";height:28px;left:calc(50% - 14px);position:absolute;top:calc(50% - 14px);width:28px}:host(.keyboard-nav) .video-mute:focus:before{background-color:#000;box-shadow:0 0 10px rgba(0,0,0,.2),0 0 0 2px #4169e1,0 0 0 4px #fff}.video-mute svg{height:20px;left:calc(50% - 10px);position:absolute;top:calc(50% - 10px);width:20px}.slide__text{align-items:stretch;box-shadow:-1px 0 0 var(--border-color);color:var(--text-color);display:flex;flex-direction:column;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:var(--text-size);font-weight:400;height:var(--height);justify-content:flex-start;pointer-events:none;position:relative;transform:translateZ(0);width:var(--text-width);z-index:1}.slide__header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;font-weight:600;line-height:1.25;padding:30px}@media (prefers-color-scheme:dark){.theme--auto .slide__header{border-color:#292929}}.slide__header.theme--dark{border-color:#292929}@media (max-width:1200px){.slide__header{padding:20px}}.slide__avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:42px;justify-content:center;margin-right:10px;overflow:hidden;position:relative;width:42px}.slide__avatar:before{background:radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#c33cbe 12%,#c33cbe 58%);height:100%;left:0;top:0;width:100%}.slide__avatar:after,.slide__avatar:before{border-radius:50%;content:\"\";position:absolute}.slide__avatar:after{background-color:var(--text-background);height:calc(100% - 4px);left:2px;top:2px;width:calc(100% - 4px)}@media (prefers-color-scheme:dark){.theme--auto .slide__avatar{background-color:#333}}.slide__avatar.theme--dark{background-color:#333}.slide__avatar img{border-radius:50%;height:calc(100% - 8px);position:relative;width:calc(100% - 8px);z-index:1}.slide__avatar svg{height:15px;position:relative;width:15px;z-index:1}.slide__avatar svg path{fill:var(--text-color)}:host(.is-scroller) .slide__avatar{height:32px;width:32px}:host(.is-scroller) .slide__avatar svg{height:12px;width:12px}.slide__caption{line-height:1.5;overflow:auto;padding:30px;scrollbar-width:none;white-space:pre-wrap;word-break:break-word}:host(.is-visible) .slide__caption{pointer-events:all}.slide__caption::-webkit-scrollbar{width:0!important}:host(.is-scroller) .slide__caption{overflow:hidden}.slide__more{background:transparent;border:none;color:var(--text-color);cursor:pointer;margin:0;opacity:.75;padding:0}.slide__more:hover{opacity:1;text-decoration:underline}.slide__footer{border-top:1px solid var(--border-color);margin-top:auto}:host(.is-visible) .slide__footer{pointer-events:all}.slide__footer-link{align-items:center;color:var(--text-color);cursor:pointer;display:flex;font-size:.9333em;font-weight:600;padding:30px;text-decoration:none;transition:background .3s ease}:host(.keyboard-nav) .slide__footer-link:focus{background-color:var(--border-color);border:none;box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 3px #4169e1;outline:none;transition:background .1s ease}.slide__footer-link:hover{background-color:var(--border-color)}.slide__footer-link svg{height:17px;margin-left:auto;width:17px}.slide__footer-link svg path{fill:var(--text-color)}@media (max-width:1200px){.slide__footer-link{padding:20px}}.breadcrumbs{align-items:center;bottom:calc(var(--bottomPadding)/2 + 30px - (var(--breadCrumbDiameter) + 10px)/2);display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);justify-content:center;left:50%;opacity:0;position:absolute;transform:translateX(-50%);width:auto;z-index:2}:host(.is-visible) .breadcrumbs{opacity:1}.breadcrumbs-current,.breadcrumbs-current:empty{background-color:#fff;border-radius:calc(var(--breadCrumbDiameter)/2);display:block;height:var(--breadCrumbDiameter);position:absolute;top:5px;transition:width .3s ease;width:var(--breadCrumbDiameter);will-change:left,right,width}.breadcrumb,.breadcrumb:empty{background-color:hsla(0,0%,100%,.4);border-radius:50%;cursor:pointer;display:block;height:7px;transition:all .3s ease;width:7px}.breadcrumb:empty:hover,.breadcrumb:hover{background-color:#fff}.close{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:30px;justify-content:center;margin:0;opacity:0;padding:0;position:absolute;right:15px;top:15px;width:30px;z-index:2}:host(.is-visible) .close{opacity:.75;transition:opacity .3s ease}:host(.is-visible) .close:hover{opacity:1}:host(.keyboard-nav) .close:focus{box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}.close:focus{border:none;outline:none}.close:before{content:\"\";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.close svg{height:20px;width:20px}.close svg path{fill:#fff}:host(.is-scroller) .close{background-color:hsla(0,0%,97%,.85);border-radius:50%;opacity:1;right:5px;top:5px}:host(.is-scroller) .close svg{height:14px;width:14px}:host(.is-scroller) .close svg path{fill:#000}.next,.previous{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:60px;justify-content:center;margin:0;opacity:0;padding:0;position:absolute;top:calc(50% - var(--bottomPadding)/2);touch-action:manipulation;transform:translateY(-50%);width:60px;z-index:2}:host(.is-visible) .next,:host(.is-visible) .previous{opacity:.75;transition:opacity .3s ease}:host(.is-visible) .next:focus,:host(.is-visible) .previous:focus{border:none;outline:none}:host(.is-visible) .next:hover,:host(.is-visible) .previous:hover{opacity:1}:host(.is-visible) .next:disabled,:host(.is-visible) .previous:disabled{cursor:default;opacity:.15}:host(.is-visible) .next:disabled:hover,:host(.is-visible) .previous:disabled:hover{opacity:.15}:host(.keyboard-nav) .next:focus,:host(.keyboard-nav) .previous:focus{box-shadow:0 0 0 2px #4169e1,0 0 0 3px #fff;opacity:1}.next svg,.previous svg{height:16px;width:16px}.next svg path,.previous svg path{fill:#fff}.previous{left:0}.next{right:0}.ldr{--uib-size:50px;--uib-speed:1s;--uib-stroke:2px;--uib-bg-opacity:0.1;align-items:center;border-radius:calc(var(--uib-stroke)/2);contain:strict;display:none;height:var(--uib-stroke);justify-content:center;left:calc(50% - var(--uib-size)/2);overflow:hidden;position:absolute;top:calc(50% - var(--uib-stroke)/2);transform:translateZ(0);width:var(--uib-size)}.ldr.ldr--visible{display:flex}behold-image.is-loaded .ldr{display:none}.ldr:before{left:0;opacity:var(--uib-bg-opacity);position:absolute;top:0}.ldr:after,.ldr:before{background-color:var(--uib-color);content:\"\";height:100%;transition:background-color .3s ease;width:100%}.ldr:after{animation:wobble var(--uib-speed) ease-in-out infinite;border-radius:calc(var(--uib-stroke)/2);transform:translateX(-95%)}@keyframes wobble{0%,to{transform:translateX(-95%)}50%{transform:translateX(95%)}}";
-var styles = css_248z$2;
-
-var css_248z$1 = ".hg-container{align-items:flex-start;backface-visibility:hidden;contain:layout style;justify-content:flex-start;-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform}.hg-container,.hg-slide{display:flex;height:100%;width:100%}.hg-slide{contain:strict;flex-grow:0;flex-shrink:0}.hg-breadcrumbs,.hg-slide{align-items:center;justify-content:center}.hg-breadcrumbs{--ease:cubic-bezier(0.215,0.61,0.355,1);display:flex;gap:calc(var(--breadCrumbDiameter)*.75);height:calc(var(--breadCrumbDiameter) + 10px);pointer-events:all;position:relative;transition:transform .4s var(--ease);width:auto;will-change:transform}.hg-breadcrumbs.no-transition{transition:none}@media (prefers-reduced-motion){.hg-breadcrumbs{transition:none}}.hg-breadcrumbs-current,.hg-breadcrumbs-current:empty{background-color:#fff;border-radius:calc(var(--breadCrumbDiameter)/2);display:block;height:var(--breadCrumbDiameter);position:absolute;top:5px;transition:width .3s var(--ease);width:var(--breadCrumbDiameter);will-change:left,right,width}.hg-breadcrumb,.hg-breadcrumb:empty{cursor:pointer;display:block;flex-shrink:0;height:var(--breadCrumbDiameter);position:relative;width:var(--breadCrumbDiameter)}.hg-breadcrumb:before,.hg-breadcrumb:empty:before{content:\"\";height:60px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--breadCrumbDiameter)*1.75)}.hg-breadcrumb:after,.hg-breadcrumb:empty:after{background-color:hsla(0,0%,100%,.4);border-radius:50%;content:\"\";height:100%;left:0;position:absolute;top:0;transition:all .3s var(--ease);width:100%}.no-transition .hg-breadcrumb:after,.no-transition .hg-breadcrumb:empty:after{transition:none}@media (prefers-reduced-motion){.hg-breadcrumb:after,.hg-breadcrumb:empty:after{transition:none}}.hg-breadcrumb.hg-breadcrumb--1:after,.hg-breadcrumb:empty.hg-breadcrumb--1:after{transform:scale(.85)}.hg-breadcrumb.hg-breadcrumb--2:after,.hg-breadcrumb:empty.hg-breadcrumb--2:after{opacity:.75;transform:scale(.7)}.hg-breadcrumb.hg-breadcrumb--3:after,.hg-breadcrumb:empty.hg-breadcrumb--3:after{opacity:.5;transform:scale(.55)}.hg-breadcrumb.hg-breadcrumb--4:after,.hg-breadcrumb:empty.hg-breadcrumb--4:after{opacity:.25;transform:scale(.4)}.hg-breadcrumb.hg-breadcrumb--hidden,.hg-breadcrumb:empty.hg-breadcrumb--hidden{pointer-events:none}.hg-breadcrumb.hg-breadcrumb--hidden:after,.hg-breadcrumb:empty.hg-breadcrumb--hidden:after{opacity:0;transform:scale(0)}.hg-breadcrumb:empty:hover:after,.hg-breadcrumb:hover:after{background-color:#fff;opacity:1;transform:none}";
-var hgStyles = css_248z$1;
-
-var css_248z = ".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}";
-var psStyles = css_248z;
-
-/**
- * @description
- * Required props: 'posts', 'widgetSettings', 'feedMetadata'
- */
-class PopoverGallery extends BaseElement {
-    label = 'PopoverGallery';
-    // Provided
-    posts;
-    widgetSettings;
-    feedMetadata;
-    closeFocusEl = document.body;
-    onSlideChange;
-    // Internal
-    _isOpen;
-    _verticalScrollBreakpoint = 900;
-    _shadow;
-    _fragment;
-    _styleEl;
-    _overlayEl;
-    _previousEl;
-    _nextEl;
-    _closeEl;
-    _breadcrumbContainer;
-    _innerEl;
-    _postEls;
-    _hurdyGurdy;
-    _popoverScroller;
-    _currentPostIndex = 0;
-    _startingDocumentOverflow = '';
-    _startingDocumentRightPadding = '';
-    constructor() {
-        super();
-        this._shadow = this.attachShadow({ mode: 'open' });
-        this._isOpen = false;
-        // Listen to prop changes
-        this.onPropChange(this._handlePropChange, [
-            'posts',
-            'widgetSettings',
-            'feedMetadata',
-        ]);
-        // Register child components
-        PopoverGallerySlide.register();
-        // Bind handlers
-        this._handleSlideChange = this._handleSlideChange.bind(this);
-        this._close = this._close.bind(this);
-        this._handleKeydown = this._handleKeydown.bind(this);
-        // On global state change
-        this.onGlobalStateChange(this._handleGlobalStateChange);
-        // connected
-        this.onConnect(() => {
-            setClasses(this, {
-                'theme--light': this.widgetSettings.popupColorTheme === 'light',
-                'theme--dark': this.widgetSettings.popupColorTheme === 'dark',
-                'theme--auto': this.widgetSettings.popupColorTheme === 'auto',
-            });
-            setClasses(this, {
-                'keyboard-nav': this.globalState.keyboardNavEnabled,
-            });
-            this._overlayEl = createElement({
-                classes: 'overlay',
-                listeners: { click: this._close },
-            });
-            this._previousEl = createElement({
-                type: 'button',
-                classes: 'previous',
-                attributes: { 'aria-label': 'Previous post' },
-                contents: caretLeftIcon,
-            });
-            this._nextEl = createElement({
-                type: 'button',
-                classes: 'next',
-                attributes: { 'aria-label': 'Next post' },
-                contents: caretRightIcon,
-            });
-            this._closeEl = createElement({
-                type: 'button',
-                classes: 'close',
-                contents: xIcon,
-                attributes: { 'aria-label': 'Close' },
-                listeners: {
-                    click: (evt) => {
-                        evt.preventDefault();
-                        this._close();
-                    },
-                },
-            });
-            this._breadcrumbContainer = createElement({
-                classes: 'breadcrumbs',
-            });
-            this._postEls = this.posts.map((post) => {
-                const el = document.createElement('behold-popover-gallery-slide');
-                el.post = post;
-                el.feedMetadata = this.feedMetadata;
-                return el;
-            });
-            this._innerEl = createElement({
-                classes: 'inner',
-                contents: this._postEls,
-            });
-            this._fragment = document.createDocumentFragment();
-            this._fragment.beholdReplaceChildren(this._overlayEl, this._innerEl, this._breadcrumbContainer, this._previousEl, this._nextEl, this._closeEl);
-            this._styleEl = createElement({
-                type: 'style',
-                contents: [styles.toString(), hgStyles.toString(), psStyles.toString()],
-            });
-            this._hurdyGurdy = new HurdyGurdy({
-                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,
-                virtualize: true,
-                dragLimit: 0.4,
-            });
-            this._popoverScroller = new PopoverScroller({
-                slides: this._postEls,
-                containerEl: this._innerEl,
-                onSlideChange: this._handleSlideChange,
-                onRequestClose: () => {
-                    this._close();
-                },
-            });
-            this.onResize(this, this, this._handleResize);
-        });
-        this.onDisconnect(() => {
-            document.removeEventListener('keydown', this._handleKeydown);
-            releaseFocus(this.closeFocusEl);
-            this._hurdyGurdy.destroy();
-            this._popoverScroller.destroy();
-            this._hurdyGurdy = null;
-            this._popoverScroller = null;
-            document.body.style.overflow = this._startingDocumentOverflow;
-            document.documentElement.style.paddingRight =
-                this._startingDocumentRightPadding;
-        });
-    }
-    /**
-     * Handle prop change
-     */
-    _handlePropChange({ changedProp, oldValue, newValue }) {
-        switch (changedProp) {
-            case 'posts':
-                if (newValue && this._innerEl) {
-                    this.cancelRaf('updatePosts');
-                    this._postEls = newValue.map((post) => {
-                        const el = document.createElement('behold-popover-gallery-slide');
-                        el.post = post;
-                        el.feedMetadata = this.feedMetadata;
-                        return el;
-                    });
-                    this._innerEl.beholdReplaceChildren(...this._postEls);
-                    this._currentPostIndex = Math.min(this._currentPostIndex, this._postEls.length - 1);
-                    if (this._isOpen) {
-                        this._render();
-                        forceLayout();
-                        this.raf(() => {
-                            this._checkSize(this.offsetWidth);
-                        }, 'updatePosts');
-                    }
-                }
-            case 'widgetSettings':
-                if (hasChanges(oldValue, newValue, 'popupColorTheme')) {
-                    setClasses(this, {
-                        'theme--light': this.widgetSettings.popupColorTheme === 'light',
-                        'theme--dark': this.widgetSettings.popupColorTheme === 'dark',
-                        'theme--auto': this.widgetSettings.popupColorTheme === 'auto',
-                    });
-                }
-                break;
-            case 'feedMetadata':
-                if (this._postEls) {
-                    this._postEls.map((el) => {
-                        el.feedMetadata = newValue;
-                    });
-                }
-                break;
-        }
-    }
-    /**
-     * Handle state change
-     */
-    _handleGlobalStateChange({ changedProps, newState }) {
-        if (changedProps.includes('keyboardNavEnabled')) {
-            setClasses(this, {
-                'keyboard-nav': this.globalState.keyboardNavEnabled,
-            });
-        }
-        if (changedProps.includes('popoverOverlayHslArray') ||
-            changedProps.includes('popoverOverlayOpacity')) {
-            const hslArray = newState.popoverOverlayHslArray;
-            const opacity = newState.popoverOverlayOpacity;
-            this.raf(() => {
-                this._overlayEl.style.backgroundColor = `hsl(${hslArray[0]} ${Math.min(hslArray[1], 50)}% ${Math.min(hslArray[2], 15)}% / ${opacity})`;
-            }, 'overlayColor');
-        }
-    }
-    /**
-     * Handle keydown
-     */
-    _handleKeydown(evt) {
-        if (evt.code === 'Escape') {
-            evt.preventDefault();
-            this._close();
-        }
-    }
-    /**
-     * Open
-     */
-    open(index, closeFocusEl) {
-        if (this._isOpen)
-            return;
-        this._isOpen = true;
-        this._currentPostIndex = index;
-        this.cancelRaf('open');
-        this.closeFocusEl = closeFocusEl;
-        this._startingDocumentOverflow = document.body.style.overflow;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        this._startingDocumentRightPadding =
-            document.documentElement.style.paddingRight;
-        const computedRightPadding = parseInt(getComputedStyle(document.documentElement).paddingRight.replace('px', ''));
-        document.documentElement.style.paddingRight = `${computedRightPadding + scrollbarWidth}px`;
-        this.style.paddingRight = `${scrollbarWidth}px`;
-        document.body.style.overflow = 'hidden';
-        this._render();
-        forceLayout();
-        this.raf(() => {
-            this.classList.add('is-visible');
-            trapFocus(this._shadow, this._postEls?.filter((el, i) => i !== index), 1);
-            this._checkSize(this.offsetWidth);
-            document.addEventListener('keydown', this._handleKeydown);
-        }, 'open');
-    }
-    /**
-     * Close
-     */
-    _close() {
-        if (!this._isOpen)
-            return;
-        this._isOpen = false;
-        this.cancelTo('close');
-        this.classList.remove('is-visible');
-        this.to(this.remove.bind(this), 300, 'close');
-        releaseFocus(this.closeFocusEl);
-        document.removeEventListener('keydown', this._handleKeydown);
-        document.body.style.overflow = this._startingDocumentOverflow;
-        document.documentElement.style.paddingRight =
-            this._startingDocumentRightPadding;
-        this.style.paddingRight = '';
-    }
-    /**
-     * Handle slide change
-     */
-    _handleSlideChange(newIndex) {
-        this._currentPostIndex = newIndex;
-        let mediaType = 'image';
-        switch (this.posts[newIndex]?.mediaType) {
-            case 'VIDEO':
-                mediaType = this.posts[newIndex].isReel ? 'reel' : 'video';
-                break;
-            case 'CAROUSEL_ALBUM':
-                mediaType = 'album';
-                break;
-            case 'IMAGE':
-            default:
-                mediaType = 'image';
-        }
-        if (this.globalState.keyboardNavEnabled) {
-            announceToScreenReader(`${mediaType}, post ${newIndex + 1} of ${this._postEls.length} in gallery`);
-        }
-        updateTabbableEls({
-            include: [this._shadow],
-            exclude: this._postEls.filter((el, i) => i !== newIndex),
-            merge: false,
-        });
-        if (this.onSlideChange) {
-            this.onSlideChange(newIndex);
-        }
-        this._postEls.forEach((slide, i) => {
-            if (i === newIndex) {
-                slide.activate();
-            }
-            else {
-                slide.deactivate();
-            }
-        });
-        const prevPostEl = this._postEls[newIndex - 1] ?? null;
-        const nextPostEl = this._postEls[newIndex + 1] ?? null;
-        if (prevPostEl) {
-            this.raf(() => prevPostEl.preload(), 'preloadPrev');
-        }
-        if (nextPostEl) {
-            this.raf(() => nextPostEl.preload(), 'preloadNext');
-        }
-        const hslArray = this._postEls?.[newIndex]
-            ? this._postEls[newIndex].getBackgroundColor()
-            : null;
-        if (hslArray) {
-            this.updateGlobalState({
-                popoverOverlayHslArray: hslArray,
-            });
-        }
-    }
-    /**
-     * Check size and update as needed
-     */
-    _checkSize(containerWidth) {
-        if (containerWidth > this._verticalScrollBreakpoint) {
-            this.classList.remove('is-scroller');
-            this._previousEl.style.display = '';
-            this._nextEl.style.display = '';
-            this._popoverScroller.destroy();
-            this._hurdyGurdy.init(this._currentPostIndex);
-            this._postEls.forEach((slide) => slide.expandCaption());
-            this.updateGlobalState({
-                popoverOverlayOpacity: 0.85,
-            });
-        }
-        else {
-            this.classList.add('is-scroller');
-            this._hurdyGurdy.destroy();
-            this._popoverScroller.init(this._currentPostIndex);
-            this._postEls.forEach((slide) => slide.collapseCaption());
-            this._previousEl.disabled = false;
-            this._previousEl.style.display = 'none';
-            this._nextEl.disabled = false;
-            this._nextEl.style.display = 'none';
-            this.updateGlobalState({
-                popoverOverlayOpacity: 0.9,
-            });
-        }
-    }
-    _handleResize(entry) {
-        const containerWidth = entry?.borderBoxSize?.[0]?.inlineSize || entry?.contentRect?.width || 0;
-        this._checkSize(containerWidth);
-    }
-    /*
-     *   Render
-     */
-    _render() {
-        document.body.append(this);
-        this._shadow.beholdReplaceChildren(this._fragment, this._styleEl);
-    }
-    /*
-     *   Register
-     */
-    static register(name = 'behold-popover-gallery') {
-        if (!customElements.get(name)) {
-            customElements.define(name, PopoverGallery);
-        }
-        return name;
-    }
-}
-
-export { PopoverGallery as default };