@behold/widget 0.5.55 → 0.5.57

package/dist/PopoverGallery-pssVDO_O.js

@@ -0,0 +1,1905 @@
+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-R4lEDZFo.js';
+import { a as Video, c as Image, R as RGBStringToHSLArray } from './base-GZO73SkY.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')) {
+            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);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 };