@behold/widget 0.5.63 → 0.5.65

package/dist/ElasticCarousel-6SPFdi5u.js

@@ -0,0 +1,1032 @@
+import { c as createElement, p as pushWithLimit, g as getAsyncRect, s as setCssVars, a as setClasses, h as hasChanges } from './index-zGq7k0wG.js';
+import { B as BaseWidget, I as ImagePost, V as VideoPost, A as AlbumPost, b as baseGridStyles, g as getMedianHSL } from './base-D7ZLOWQ5.js';
+import { c as caretLeftIcon, a as caretRightIcon } from './caret-right-S2XSTDFy.js';
+
+class Gyre {
+    containerEl;
+    slideEls;
+    height;
+    gap;
+    borderRadius;
+    applyBorderRadiusToContainer;
+    snapToSlide;
+    bindToScrollPos;
+    resizeObserver;
+    onSlideChange;
+    _containerWidth;
+    _contentWidth;
+    _slideContentEls;
+    _slideDimensions;
+    _isInitialized;
+    _isDragging;
+    _isScrolling;
+    _velocity;
+    _settledPosition;
+    _currentPosition;
+    _targetPosition;
+    _points;
+    _momentumArray;
+    _lastLoopRun;
+    _minSlideWidth;
+    _adjustment;
+    _numInitialSlides;
+    _frameRate;
+    _shrinkStartMultiplier;
+    _adjustmentMultiplier;
+    _windowHeight;
+    _containerRect;
+    _scrollProgress;
+    _abortScrollCheck;
+    _virtualize;
+    _raf;
+    anchorSlide;
+    finalAnchorSlide;
+    constructor({ onSlideChange }) {
+        this._slideDimensions = [];
+        this._isInitialized = false;
+        this._isDragging = false;
+        this._isScrolling = false;
+        this._velocity = 0;
+        this._settledPosition = 0;
+        this._currentPosition = 0;
+        this.anchorSlide = 0;
+        this._targetPosition = 0;
+        this._points = { start: 0, previous: 0 };
+        this._momentumArray = [];
+        this._lastLoopRun = 0;
+        this._frameRate = 1 / 60;
+        this._shrinkStartMultiplier = 3;
+        this._adjustmentMultiplier = 2;
+        this.borderRadius = 20;
+        this.applyBorderRadiusToContainer = false;
+        this.gap = 20;
+        this.height = 300;
+        this.snapToSlide = false;
+        this.bindToScrollPos = false;
+        this._minSlideWidth = 40;
+        this._adjustment = 0;
+        this._numInitialSlides = 0;
+        this._windowHeight = window.innerHeight;
+        this._containerRect = null;
+        this._scrollProgress = 0;
+        this._abortScrollCheck = () => { };
+        this._virtualize = false;
+        this.onSlideChange = onSlideChange;
+        let ResizeObserver = window.ResizeObserver;
+        if ('ResizeObserver' in window === false) {
+            // @ts-ignore
+            ResizeObserver = window.BeholdResizeObserver;
+        }
+        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));
+        this.handlePointerdown = this.handlePointerdown.bind(this);
+        this.handlePointermove = this.handlePointermove.bind(this);
+        this.handlePointerup = this.handlePointerup.bind(this);
+    }
+    init({ containerEl, slideEls, height = 300, gap = 20, borderRadius = 40, applyBorderRadiusToContainer = true, snapToSlide = false, bindToScrollPos = false, }) {
+        this.containerEl = containerEl;
+        this.slideEls = slideEls.map((slide) => {
+            return createElement({
+                classes: 'ec-slide',
+                contents: slide,
+            });
+        });
+        this._slideContentEls = slideEls;
+        this._containerWidth = containerEl.offsetWidth;
+        this._contentWidth = containerEl?.scrollWidth || 0;
+        this.updateSettings({
+            height,
+            gap,
+            borderRadius,
+            applyBorderRadiusToContainer,
+            snapToSlide,
+            bindToScrollPos,
+        });
+        this.addEventListeners();
+        this.containerEl.style.setProperty('--ec-container-width', `${this._containerWidth}px`);
+        this.containerEl.beholdReplaceChildren(...this.slideEls);
+        this.updateDimensions();
+        this._isInitialized = true;
+        this.loop();
+    }
+    updateSettings({ height = 300, gap = 20, borderRadius = 40, applyBorderRadiusToContainer = true, snapToSlide = false, bindToScrollPos = false, }) {
+        cancelAnimationFrame(this._raf);
+        this._raf = requestAnimationFrame(() => {
+            this.height = height;
+            this.gap = gap;
+            this.borderRadius = Math.min((borderRadius / 100) * this.height, (this._containerWidth * 0.45) / 2);
+            this._minSlideWidth = Math.max(this.borderRadius, 40);
+            this.applyBorderRadiusToContainer = applyBorderRadiusToContainer;
+            this.snapToSlide = snapToSlide;
+            this.bindToScrollPos = bindToScrollPos;
+            this.containerEl.style.setProperty('--ec-height', `${this.height}px`);
+            this.containerEl.style.setProperty('--ec-border-radius', this.applyBorderRadiusToContainer ? `${this.borderRadius}px` : '0px');
+            if (this.snapToSlide) {
+                this._targetPosition = -this.getClosestSlideToPoint(this._targetPosition).leftEdge;
+            }
+        });
+    }
+    destroy() {
+        this._isInitialized = false;
+        cancelAnimationFrame(this._raf);
+        this.removeEventListeners();
+        if (this.slideEls?.length) {
+            this.slideEls.forEach((slide) => {
+                slide.remove();
+            });
+        }
+        this.slideEls = null;
+        this.containerEl = null;
+    }
+    handleResize(entries) {
+        let containerWidth = null;
+        if (entries) {
+            entries.forEach((entry) => {
+                if (entry.target === this.containerEl) {
+                    containerWidth = entry.borderBoxSize
+                        ? entry.borderBoxSize[0].inlineSize
+                        : entry.contentRect.width;
+                }
+            });
+        }
+        this.updateDimensions(containerWidth);
+        this._targetPosition = Math.max(Math.min(0, this._targetPosition), this._containerWidth - this._contentWidth);
+    }
+    addEventListeners() {
+        this.removeEventListeners();
+        if (this.slideEls.length) {
+            this.slideEls.forEach((slide) => {
+                this.resizeObserver.observe(slide);
+            });
+        }
+        if (this.containerEl) {
+            this.resizeObserver.observe(this.containerEl);
+            this.containerEl.addEventListener('pointerdown', this.handlePointerdown);
+            document.addEventListener('pointermove', this.handlePointermove, { passive: true });
+            document.addEventListener('pointerup', this.handlePointerup);
+            document.body.addEventListener('pointerleave', this.handlePointerup);
+        }
+    }
+    removeEventListeners() {
+        this.resizeObserver.disconnect();
+        if (this.containerEl) {
+            this.containerEl.removeEventListener('pointerdown', this.handlePointerdown);
+            document.removeEventListener('pointermove', this.handlePointermove);
+            document.removeEventListener('pointerup', this.handlePointerup);
+        }
+    }
+    handlePointerdown(e) {
+        this._isDragging = true;
+        this._settledPosition = this._currentPosition;
+        this._targetPosition = this._currentPosition;
+        this._points.start = e.clientX;
+        this._points.previous = e.clientX;
+        this.updateDimensions();
+    }
+    handlePointermove(e) {
+        if (!this._isDragging)
+            return;
+        const delta = e.clientX - this._points.start;
+        if (Math.abs(delta) > 10) {
+            this.containerEl.classList.add('ec-is-dragging');
+        }
+        this._targetPosition = this._settledPosition + delta;
+        pushWithLimit(this._momentumArray, e.clientX - this._points.previous, 10);
+        this._points.previous = e.clientX;
+    }
+    handlePointerup() {
+        this.containerEl.classList.remove('ec-is-dragging');
+        this._isDragging = false;
+        this._targetPosition += getArrayAverage(this._momentumArray) * 10;
+        // Keep in bounds
+        this._targetPosition = Math.max(Math.min(0, this._targetPosition), this._containerWidth - this._contentWidth);
+        // Snap to slide
+        if (this.snapToSlide) {
+            this._targetPosition = -this.getClosestSlideToPoint(this._targetPosition)
+                .leftEdge;
+        }
+    }
+    updateDimensions(containerWidth) {
+        this._containerWidth = containerWidth || this.containerEl.offsetWidth;
+        let contentWidth = 0;
+        this._slideDimensions = this.slideEls.map((slide, i) => {
+            let width = slide.offsetWidth;
+            let x = contentWidth;
+            contentWidth += width;
+            if (i < this._slideDimensions.length - 1) {
+                contentWidth += this.gap;
+            }
+            return { width, x };
+        });
+        this._contentWidth = contentWidth;
+        this.finalAnchorSlide = this.getFinalAnchorSlide();
+        this.containerEl.style.setProperty('--ec-container-width', `${this._containerWidth}px`);
+    }
+    getAcceleration({ displacement, velocity, stiffness = 7, mass = 17, friction = 1.25, }) {
+        let val = (-stiffness * displacement) / mass - friction * velocity;
+        if (Math.abs(val) < 0.001)
+            val = 0;
+        return val * this._frameRate;
+    }
+    getClosestSlideToPoint(x) {
+        return this._slideDimensions.reduce((acc, curr, i) => {
+            const distanceFromTarget = Math.abs(acc.cumulativeWidth + x);
+            if (distanceFromTarget < acc.distanceFromTarget) {
+                return {
+                    index: i,
+                    distanceFromTarget,
+                    leftEdge: acc.cumulativeWidth,
+                    cumulativeWidth: acc.cumulativeWidth + curr.width + this.gap,
+                };
+            }
+            return {
+                ...acc,
+                cumulativeWidth: acc.cumulativeWidth + curr.width + this.gap,
+            };
+        }, {
+            index: 0,
+            distanceFromTarget: Infinity,
+            leftEdge: 0,
+            cumulativeWidth: 0,
+        });
+    }
+    getFinalAnchorSlide() {
+        const res = this.slideEls.reduceRight((acc, curr, i) => {
+            if (acc.cumulativeWidth < this._containerWidth) {
+                acc.index = i;
+                acc.cumulativeWidth += this._slideDimensions[i]?.width || 0;
+            }
+            return acc;
+        }, {
+            index: 0,
+            cumulativeWidth: 0,
+        });
+        return res.index;
+    }
+    updateScrollPos() {
+        this._abortScrollCheck();
+        this._abortScrollCheck = getAsyncRect(this.containerEl, (rect) => {
+            this._containerWidth = rect.width;
+            const newProgress = Math.max(Math.min((this._windowHeight - rect.top) /
+                (this._windowHeight + rect.height), 1), 0);
+            if (newProgress !== this._scrollProgress) {
+                this._isScrolling = true;
+                const progressDelta = this._scrollProgress - newProgress;
+                const pixelDelta = this._windowHeight * progressDelta * 0.5;
+                this._targetPosition += pixelDelta;
+                this._targetPosition = Math.max(Math.min(0, this._targetPosition), this._containerWidth - this._contentWidth);
+                this._scrollProgress = newProgress;
+            }
+            this._containerRect = rect;
+        });
+    }
+    updatePosition() {
+        const delta = this._currentPosition - this._targetPosition;
+        let stiffness = 200;
+        let friction = 23;
+        let mass = 80;
+        if (this._isScrolling) {
+            stiffness = 600;
+            friction = 40;
+            mass = 40;
+        }
+        if (this._targetPosition === 0 ||
+            this._targetPosition <= this._containerWidth - this._contentWidth) {
+            stiffness = 100;
+            friction = 16;
+            mass = 45;
+        }
+        const acceleration = this.getAcceleration({
+            displacement: delta,
+            velocity: this._velocity,
+            stiffness,
+            friction,
+            mass,
+        });
+        this._velocity += acceleration;
+        this._currentPosition += roundToDigits(this._velocity);
+    }
+    getSlidePositions() {
+        const currentPosition = roundToDigits(this._currentPosition);
+        let xPos = currentPosition;
+        let needsAdjustment = false;
+        const values = this.slideEls.map((el, i) => {
+            const contentEl = this._slideContentEls[i];
+            const slideWidth = this._slideDimensions[i]?.width;
+            if (i > 0) {
+                xPos += this._slideDimensions[i - 1]?.width + this.gap;
+            }
+            let innerTranslate = 0;
+            let leftClipInset = 0;
+            let rightClipInset = 0;
+            let xOffset = 0;
+            let shrinkStartPoint = Math.min(slideWidth * this._shrinkStartMultiplier, this._containerWidth);
+            const dimensions = this._slideDimensions[i];
+            const isEndingSlide = dimensions &&
+                dimensions.x + dimensions.width * this._shrinkStartMultiplier >
+                    this._contentWidth;
+            // Final slides that would be shrunk when at the end of scroll
+            if (isEndingSlide) {
+                shrinkStartPoint =
+                    slideWidth * (this.slideEls.length - i) + Math.round(this._adjustment);
+            }
+            let shrinkProgress = Math.min(Math.max(shrinkStartPoint -
+                Math.max(this._containerWidth - xPos + Math.round(this._adjustment), 0), 0) /
+                (shrinkStartPoint - this._minSlideWidth), 1);
+            const baseOffset = (slideWidth - this._minSlideWidth) * shrinkProgress;
+            rightClipInset = baseOffset;
+            innerTranslate = -baseOffset / 2;
+            xOffset -= baseOffset;
+            const isRightmost = xPos < this._containerWidth &&
+                xPos + slideWidth - rightClipInset + this.gap >= this._containerWidth;
+            if (isRightmost && currentPosition <= 0) {
+                const visualWidth = slideWidth - leftClipInset - rightClipInset;
+                const overflow = this._minSlideWidth - (this._containerWidth - xPos);
+                const visible = overflow <= 0 ? visualWidth : this._containerWidth - xPos;
+                const visibleGap = this._containerWidth - (xPos + visible);
+                // There is a gap between the last slide and the container edge
+                if (visibleGap > 0 && !this._adjustment) {
+                    this._adjustment = visibleGap * this._adjustmentMultiplier;
+                    this._numInitialSlides = i + 1;
+                    needsAdjustment = true;
+                }
+                // The last slide isn't showing enough
+                if (visible < this._minSlideWidth / 2 && !this._adjustment) {
+                    this._adjustment = (visible + this.gap) * this._adjustmentMultiplier;
+                    this._numInitialSlides = i + 1;
+                    needsAdjustment = true;
+                }
+            }
+            // Leftmost visible slide
+            if (Math.round(xPos - this.gap) <= 0 &&
+                Math.round(slideWidth + xPos) > 0) {
+                if (i !== this.anchorSlide && this.onSlideChange) {
+                    this.onSlideChange(i);
+                }
+                this.anchorSlide = i;
+            }
+            if (xPos <= 0) {
+                const baseOffset = Math.min(Math.abs(xPos), slideWidth - this._minSlideWidth);
+                leftClipInset = baseOffset;
+                innerTranslate = xPos / -2;
+            }
+            // Virtualize
+            if (this._virtualize) {
+                if (xPos > this._containerWidth + 250 || xPos + slideWidth < -250) {
+                    contentEl.remove();
+                }
+                else if (!contentEl.isConnected) {
+                    el.append(contentEl);
+                }
+            }
+            const slideValues = {
+                el,
+                contentEl,
+                xPos,
+                rightClipInset,
+                leftClipInset,
+                innerTranslate,
+            };
+            xPos += xOffset;
+            return slideValues;
+        });
+        if (needsAdjustment) {
+            return this.getSlidePositions();
+        }
+        return values;
+    }
+    positionSlides() {
+        let calculatedValues = this.getSlidePositions();
+        calculatedValues.forEach(({ el, contentEl, xPos, rightClipInset, leftClipInset, innerTranslate }, i) => {
+            const borderRadius = Math.min(this.borderRadius, this._slideDimensions[i]?.width / 2);
+            el.style.transform = `translate3d(${xPos}px, 0 ,0)`;
+            el.style.clipPath = `inset(0 ${rightClipInset}px 0 ${leftClipInset}px round ${borderRadius}px)`;
+            contentEl.style.transform = `translate3d(${innerTranslate}px, 0, 0)`;
+        });
+    }
+    goToSlide(slideIndex) {
+        this.updateDimensions();
+        this._targetPosition =
+            -this._slideDimensions[slideIndex]?.x ?? this._targetPosition;
+        this._targetPosition = Math.max(Math.min(0, this._targetPosition), this._containerWidth - this._contentWidth);
+    }
+    advance() {
+        this.goToSlide(Math.min(this.getClosestSlideToPoint(this._targetPosition).index + 1, this.slideEls.length - 1));
+    }
+    retreat() {
+        this.goToSlide(Math.max(this.getClosestSlideToPoint(this._targetPosition).index - 1, 0));
+    }
+    render() {
+        this._momentumArray.shift();
+        if (!this.slideEls)
+            return;
+        if (this.bindToScrollPos) {
+            this.updateScrollPos();
+        }
+        this.updatePosition();
+        this.positionSlides();
+        this._isScrolling = false;
+    }
+    loop() {
+        if (!this._isInitialized)
+            return;
+        const now = performance.now();
+        if (now - this._lastLoopRun > 16) {
+            this.render();
+            this._lastLoopRun = now;
+        }
+        requestAnimationFrame(() => this.loop());
+    }
+}
+function getArrayAverage(arr) {
+    if (!arr.length)
+        return 0;
+    return arr.reduce((acc, curr) => acc + curr, 0) / arr.length;
+}
+function roundToDigits(num, digits = 3) {
+    return parseFloat(num.toFixed(digits));
+}
+
+var instagramIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1000 1000\"><path d=\"M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34\" transform=\"translate(-2.5 -2.5)\"/><title>Instagram</title></svg>";
+
+var css_248z = ".ec-carousel{--ec-controls-margin:20px;--ec-button-border-radius:40%;--ec-icon-color:#4a4a4a;--ec-text-color:#4a4a4a;--ec-button-color:#f4f4f4;--ec-button-hover-color:#ececec;--ec-button-icon-color:#4a4a4a;--ec-button-icon-hover-color:#2e2e2e;--ec-button-gap:min(calc(var(--ec-controls-margin)/2),5px);flex-direction:column;height:var(--ec-height);margin:0;overflow:hidden;width:100%}.ec-carousel,.ec-inner{display:flex;justify-content:center}.ec-inner{align-items:center}.ec-slides{border-radius:var(--ec-border-radius);contain:style paint;cursor:grab;height:var(--ec-height);justify-content:flex-start;overflow:hidden;position:relative;touch-action:none;width:100%}.ec-slide,.ec-slides{display:flex;isolation:isolate}.ec-slide{contain:content;flex-shrink:0;height:100%;left:0;max-width:calc(var(--ec-container-width)*.45);position:absolute;top:0;-moz-user-select:none;user-select:none;-webkit-user-select:none;will-change:clip-path,transform}.ec-slide .post--placeholder{aspect-ratio:unset;height:100%}.ec-is-dragging{cursor:grabbing}.ec-is-dragging .ec-slide{pointer-events:none}.ec-footer,.ec-header{display:flex;justify-content:center}.ec-carousel--controls-sides .ec-footer,.ec-carousel--controls-sides .ec-header{padding:0 64px}.ec-header{margin-bottom:var(--ec-controls-margin)}.ec-footer{margin-top:var(--ec-controls-margin)}.ec-label{align-items:center;display:flex;flex-shrink:1;gap:7px 5px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;-moz-user-select:none;user-select:none;-webkit-user-select:none}.ec-carousel--controls-center .ec-button+.ec-label,.ec-carousel--controls-split .ec-button+.ec-label{margin:0 max(calc(var(--ec-controls-margin)*1.5),20px)}.ec-carousel--label-right .ec-label{margin-left:auto}.ec-carousel--label-left .ec-label{margin-right:auto}.ec-label svg{flex-shrink:0;height:24px;margin-right:5px;width:24px}.ec-label svg path{fill:var(--ec-icon-color)}.ec-label a,.ec-label div{color:var(--ec-text-color);display:inline-block;font-family:inherit;font-size:19px;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.ec-button,.ec-carousel--controls-center .ec-footer,.ec-carousel--controls-center .ec-header{justify-content:center}.ec-button{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;flex-shrink:0;height:44px;padding:0;transition:all .3s ease;width:44px}.ec-carousel--controls-sides .ec-button{height:var(--ec-height);width:64px}.ec-button:disabled{cursor:default;opacity:.5}.ec-button:before{background-color:var(--ec-button-color);border-radius:var(--ec-button-border-radius);content:\"\";height:44px;position:absolute;transition:all .3s ease;width:44px}.ec-button:not(:disabled):hover:before{background-color:var(--ec-button-hover-color)}.ec-button svg{height:14px;position:relative;width:auto;z-index:1}.ec-button svg path{fill:var(--ec-button-icon-color);transition:all .3s ease}.ec-button:not(:disabled):hover svg path{fill:var(--ec-button-icon-hover-color)}.ec-retreat{padding-right:var(--ec-button-gap);width:calc(44px + var(--ec-button-gap))}.ec-carousel--controls-split .ec-retreat{margin-right:auto}.ec-carousel--controls-right .ec-retreat{margin-left:auto}.ec-advance{padding-left:var(--ec-button-gap);width:calc(44px + var(--ec-button-gap))}.ec-carousel--controls-split .ec-advance{margin-left:auto}.ec-carousel--controls-left .ec-advance{margin-right:auto}.ec-carousel--controls-sides .ec-retreat{padding-right:20px}.ec-carousel--controls-sides .ec-advance{padding-left:20px}.post{height:100%;max-width:calc(var(--ec-container-width)*.45)}.post a{-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.post--placeholder{background-color:#dedede;height:0;padding-bottom:calc(100%/var(--post-aspect-ratio))}";
+var styles = css_248z;
+
+/*
+ *   Grid
+ */
+class ElasticCarousel extends BaseWidget {
+    label = 'ElasticCarousel';
+    // Provided
+    widgetSettings;
+    feedMetadata;
+    posts;
+    previewLoadingColors = null;
+    // Internal
+    containerEl;
+    headerEl;
+    innerEl;
+    footerEl;
+    instagramLogoEl;
+    labelEl;
+    leftArrowEl;
+    rightArrowEl;
+    slidesContainerEl;
+    postEls;
+    popoverGalleryEl;
+    appliedBreakpoint;
+    medianPaletteHSL;
+    gyre;
+    constructor() {
+        super();
+        // Define which props will trigger _handlePropChange
+        this.onPropChange(this._handlePropChange, ['widgetSettings', 'feedMetadata', 'posts', 'previewLoadingColors'], ['widgetSettings', 'feedMetadata', 'posts'], this.setup);
+        // Register child components
+        ImagePost.register();
+        VideoPost.register();
+        AlbumPost.register();
+        // Create Gyre carousel
+        this.gyre = new Gyre({ onSlideChange: (i) => this._handleSlideChange(i) });
+        // Bind event handlers
+        this._handlePostClick = this._handlePostClick.bind(this);
+        // Listen to focus
+        this.addEventListener('post-focus-next', this._handleFocusNextPost);
+        this.addEventListener('post-focus-previous', this._handleFocusPreviousPost);
+        // Connect
+        this.onConnect(() => {
+            this.slidesContainerEl = createElement({
+                classes: 'ec-slides',
+            });
+            this.headerEl = createElement({
+                type: 'header',
+                classes: 'ec-header',
+            });
+            this.innerEl = createElement({
+                classes: 'ec-inner',
+                contents: [this.slidesContainerEl],
+            });
+            this.footerEl = createElement({
+                type: 'footer',
+                classes: 'ec-footer',
+            });
+            this.labelEl = createElement({
+                classes: 'ec-label',
+            });
+            this.leftArrowEl = createElement({
+                type: 'button',
+                classes: 'ec-button ec-retreat',
+                contents: [caretLeftIcon],
+                listeners: {
+                    click: () => this._retreat(),
+                },
+                attributes: {
+                    tabindex: -1,
+                    disabled: true,
+                },
+            });
+            this.rightArrowEl = createElement({
+                type: 'button',
+                classes: 'ec-button ec-advance',
+                contents: [caretRightIcon],
+                listeners: {
+                    click: () => this._advance(),
+                },
+                attributes: {
+                    tabindex: -1,
+                },
+            });
+            this.containerEl = createElement({
+                type: 'figure',
+                classes: 'ec-carousel',
+                contents: [this.innerEl],
+            });
+            this.renderWidget(this.containerEl, [baseGridStyles, styles]);
+            // A11y stuff
+            this.setAttribute('tabindex', '0');
+            this.setAttribute('aria-label', 'Gallery of Instagram posts. Shift + arrow keys to navigate');
+            // listen to resize
+            this.onResize(this, this, this._handleResize);
+        });
+    }
+    /*
+     *   Run initial setup that requires data to be fully loaded
+     */
+    setup() {
+        // Calculate medianPaletteHSL
+        if (this.widgetSettings.loadingColor !== 'transparent') {
+            const palettes = this.posts
+                .filter((post) => post.colorPalette)
+                .map((post) => post.colorPalette);
+            this.medianPaletteHSL = getMedianHSL(palettes, this.widgetSettings.loadingColor);
+        }
+        // Find initial breakpoint
+        const matchingBreakpoint = this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints);
+        // Render posts with current breakpoint styles
+        this.renderBreakpoint(matchingBreakpoint);
+        // Add non-breakpoint CSS vars
+        setCssVars(this.containerEl, {
+            '--ec-icon-color': this.widgetSettings.iconColor,
+            '--ec-text-color': this.widgetSettings.textColor,
+            '--ec-button-color': this.widgetSettings.buttonColor,
+            '--ec-button-hover-color': this.widgetSettings.buttonHoverColor,
+            '--ec-button-icon-color': this.widgetSettings.buttonIconColor,
+            '--ec-button-icon-hover-color': this.widgetSettings.buttonIconHoverColor,
+        });
+        // Pass settings and metadata to posts
+        if (this.postEls) {
+            this.postEls.forEach((postEl) => {
+                postEl.widgetSettings = this.widgetSettings;
+                postEl.feedMetadata = this.feedMetadata;
+            });
+        }
+        // Build label
+        this._buildLabel();
+        // Enable popoverGallery if necessary
+        if (this.widgetSettings.onPostClick === 'openPopupGallery') {
+            this.enablePopoverGallery();
+        }
+    }
+    _buildLabel() {
+        const iconTemplate = document.createElement('template');
+        iconTemplate.innerHTML = instagramIcon;
+        if (this.widgetSettings.label) {
+            const customLabelEl = createElement({
+                type: this.widgetSettings.labelLink ? 'a' : 'div',
+                contents: this.widgetSettings.label,
+                attributes: {
+                    href: this.widgetSettings.labelLink || null,
+                    target: this.widgetSettings.labelLink ? '_blank' : null,
+                },
+            });
+            this.labelEl.beholdReplaceChildren(iconTemplate.content, customLabelEl);
+        }
+        else if (this.feedMetadata.hashtags?.length) {
+            const hashtags = this.feedMetadata.hashtags;
+            const linkEls = hashtags.map((hashtag, i, arr) => {
+                return createElement({
+                    type: 'a',
+                    contents: ['#', hashtag, i < arr.length - 1 ? ', ' : ''],
+                    attributes: {
+                        target: '_blank',
+                        href: `https://instagram.com/explore/tags/${hashtag}`,
+                    },
+                });
+            });
+            this.labelEl.beholdReplaceChildren(iconTemplate.content, ...linkEls);
+        }
+        else {
+            const profileLinkEl = createElement({
+                type: 'a',
+                contents: [this.feedMetadata.username],
+                attributes: {
+                    target: '_blank',
+                    href: `https://instagram.com/${this.feedMetadata.username}`,
+                },
+            });
+            this.labelEl.beholdReplaceChildren(iconTemplate.content, profileLinkEl);
+        }
+    }
+    /**
+     * Handle a slide change
+     */
+    _handleSlideChange(index) {
+        if (index === 0 && this.leftArrowEl) {
+            this.leftArrowEl.disabled = true;
+        }
+        else {
+            this.leftArrowEl.disabled = false;
+        }
+        if (index >= this.gyre.finalAnchorSlide) {
+            this.rightArrowEl.disabled = true;
+        }
+        else {
+            this.rightArrowEl.disabled = false;
+        }
+    }
+    /*
+     *   Handle prop change
+     */
+    _handlePropChange({ changedProp, oldValue, newValue }) {
+        switch (changedProp) {
+            case 'posts':
+                this._handlePostsChange({ oldValue, newValue });
+                break;
+            case 'widgetSettings':
+                this._handleSettingsChange(oldValue, newValue);
+                break;
+            case 'feedMetadata':
+                this._handleMetadataChange();
+                break;
+            case 'previewLoadingColors':
+                this.postEls.forEach((postEl) => {
+                    postEl.previewLoadingColors = this.previewLoadingColors;
+                });
+                setClasses(this, {
+                    'is-previewing-loading-colors': !!this.previewLoadingColors,
+                });
+                break;
+        }
+    }
+    /*
+     *   Handle posts change
+     */
+    _handlePostsChange({ oldValue, newValue }) {
+        this.postEls = [];
+        this.renderBreakpoint(this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints), true);
+        // Pass settings and metadata to posts
+        this.postEls.forEach((postEl) => {
+            postEl.widgetSettings = this.widgetSettings;
+            postEl.feedMetadata = this.feedMetadata;
+        });
+        if (this.popoverGalleryEl) {
+            this.popoverGalleryEl.posts = this.posts;
+        }
+    }
+    /*
+     *   Handle settings change
+     */
+    _handleSettingsChange(oldValue, newValue) {
+        let forceRender = false;
+        if (!this.postEls?.length ||
+            hasChanges(oldValue.breakpoints, newValue.breakpoints, ['postHeight'], 1)) {
+            forceRender = true;
+        }
+        setCssVars(this.containerEl, {
+            '--ec-icon-color': this.widgetSettings.iconColor,
+            '--ec-text-color': this.widgetSettings.textColor,
+            '--ec-button-color': this.widgetSettings.buttonColor,
+            '--ec-button-hover-color': this.widgetSettings.buttonHoverColor,
+            '--ec-button-icon-color': this.widgetSettings.buttonIconColor,
+            '--ec-button-icon-hover-color': this.widgetSettings.buttonIconHoverColor,
+        });
+        if (hasChanges(oldValue, newValue, ['label', 'labelLink'])) {
+            this._buildLabel();
+        }
+        if (oldValue?.onPostClick !== 'openPopupGallery' &&
+            newValue?.onPostClick === 'openPopupGallery') {
+            this.enablePopoverGallery();
+        }
+        const matchingBreakpoint = this.getMatchingBreakpoint(this.offsetWidth, this.widgetSettings.breakpoints);
+        this.renderBreakpoint(matchingBreakpoint, forceRender);
+        this.postEls.forEach((postEl) => {
+            postEl.widgetSettings = this.widgetSettings;
+        });
+        if (this.popoverGalleryEl) {
+            this.popoverGalleryEl.widgetSettings = this.widgetSettings;
+        }
+    }
+    /*
+     *   Handle settings change
+     */
+    _handleMetadataChange() {
+        let description = `from @${this.feedMetadata.username}`;
+        if (this.feedMetadata.hashtags?.length) {
+            description = `from hashtag${this.feedMetadata.hashtags.length > 1 ? 's' : ''} ${this.feedMetadata.hashtags.join(', ')}`;
+        }
+        this.setAttribute('aria-label', `Gallery of Instagram posts ${description}. Shift + arrow keys to navigate`);
+        this.postEls.forEach((postEl) => {
+            postEl.feedMetadata = this.feedMetadata;
+        });
+        if (this.popoverGalleryEl) {
+            this.popoverGalleryEl.feedMetadata = this.feedMetadata;
+        }
+    }
+    /**
+     *   Enable popup carousel
+     */
+    async enablePopoverGallery() {
+        if (this.popoverGalleryEl)
+            return;
+        const { default: PopoverGallery } = await import('./PopoverGallery-oswhxqGK.js');
+        PopoverGallery.register();
+        this.popoverGalleryEl = document.createElement('behold-popover-gallery');
+        Object.assign(this.popoverGalleryEl, {
+            widgetSettings: this.widgetSettings,
+            feedMetadata: this.feedMetadata,
+            posts: this.posts,
+            closeFocusEl: this,
+            onSlideChange: (slideIndex) => {
+                this.gyre.goToSlide(slideIndex);
+                this.popoverGalleryEl.closeFocusEl = this.postEls[slideIndex];
+            },
+        });
+    }
+    /*
+     *   Handle resize
+     */
+    _handleResize(entry) {
+        const widgetWidth = entry.contentBoxSize?.[0]?.inlineSize;
+        const breakpoints = this.widgetSettings.breakpoints;
+        const matchingBreakpoint = this.getMatchingBreakpoint(widgetWidth, breakpoints);
+        this.renderBreakpoint(matchingBreakpoint);
+    }
+    /**
+     * Handle prev post focus
+     */
+    _handleFocusPreviousPost() {
+        if (!this.postEls.length)
+            return;
+        let currentFocusIndex = [...this.postEls].indexOf(this.shadow.activeElement?.parentElement);
+        if (currentFocusIndex > 0) {
+            currentFocusIndex = currentFocusIndex - 1;
+        }
+        this.postEls[currentFocusIndex].focus();
+        this.gyre.goToSlide(currentFocusIndex);
+    }
+    /**
+     * Handle next post focus
+     */
+    _handleFocusNextPost() {
+        if (!this.postEls.length)
+            return;
+        let currentFocusIndex = [...this.postEls].indexOf(this.shadow.activeElement?.parentElement);
+        if (this.gyre.anchorSlide > 0 &&
+            currentFocusIndex < this.gyre.anchorSlide) {
+            currentFocusIndex = this.gyre.anchorSlide;
+        }
+        if (currentFocusIndex > -1 && currentFocusIndex < this.postEls.length - 1) {
+            currentFocusIndex = currentFocusIndex + 1;
+        }
+        if (currentFocusIndex < 0) {
+            currentFocusIndex = 0;
+        }
+        this.postEls[currentFocusIndex].focus();
+        this.gyre.goToSlide(currentFocusIndex);
+    }
+    /**
+     * Handle post click
+     */
+    _handlePostClick(post) {
+        this.popoverGalleryEl.open(this.postEls.indexOf(post), post);
+    }
+    /**
+     * Advance to next slide
+     */
+    _advance() {
+        if (this.gyre) {
+            this.gyre.advance();
+        }
+    }
+    /**
+     * Retreat to previous slide
+     */
+    _retreat() {
+        if (this.gyre) {
+            this.gyre.retreat();
+        }
+    }
+    /*
+     *   Update postEls
+     */
+    renderPosts(breakpoint) {
+        this.postEls = this.createPostEls(breakpoint);
+        this.raf(() => {
+            this.gyre.destroy();
+            this.gyre.init({
+                containerEl: this.slidesContainerEl,
+                slideEls: this.postEls,
+                height: breakpoint.postHeight,
+                gap: breakpoint.gap.x,
+                borderRadius: parseInt(breakpoint.borderRadius),
+                applyBorderRadiusToContainer: breakpoint.applyBorderRadiusToContainer || true,
+                snapToSlide: breakpoint.snapToSlide || false,
+                bindToScrollPos: breakpoint.bindToScrollPos || false,
+            });
+        }, 'renderPosts');
+    }
+    /*
+     *   Get breakpoint that matches a width
+     */
+    getMatchingBreakpoint(width, breakpoints) {
+        return Object.entries(breakpoints)
+            .map(([key, value]) => ({ width: key, ...value }))
+            .filter((bp) => bp.width !== 'default')
+            .sort((a, b) => parseInt(b.width) - parseInt(a.width))
+            .reduce((acc, curr) => {
+            return width <= parseInt(curr.width) ? curr : acc;
+        }, breakpoints.default);
+    }
+    /*
+     *   Render posts with breakpoint
+     */
+    renderBreakpoint(breakpoint, forceRender = false) {
+        if (!this.posts || !this.containerEl)
+            return;
+        const applied = this.appliedBreakpoint;
+        const { showControls, controlsPosition, controlsJustification, showLabel, labelPosition, labelJustification, buttonBorderRadius, controlsMargin, } = breakpoint;
+        if (!this.postEls?.length ||
+            hasChanges(applied, breakpoint, [
+                'numPosts',
+                'forcePostAspectRatio',
+                'postAspectRatio',
+                'postHeight',
+            ])) {
+            forceRender = true;
+        }
+        if (this.widgetSettings.maxWidth &&
+            this.widgetSettings.constrainWidth &&
+            this.containerEl.style.maxWidth !== `${this.widgetSettings.maxWidth}px`) {
+            this.containerEl.style.maxWidth = `${this.widgetSettings.maxWidth}px`;
+        }
+        if (!this.widgetSettings.constrainWidth) {
+            this.containerEl.style.maxWidth = '';
+        }
+        this.leftArrowEl.remove();
+        this.rightArrowEl.remove();
+        if (hasChanges(applied, breakpoint, [
+            'showControls',
+            'controlsPosition',
+            'controlsJustification',
+            'showLabel',
+            'labelPosition',
+            'labelJustification',
+        ]) ||
+            (showControls && !this.leftArrowEl.isConnected) ||
+            (showLabel && !this.labelEl.isConnected)) {
+            this.leftArrowEl.remove();
+            this.rightArrowEl.remove();
+            this.labelEl.remove();
+            this.headerEl.remove();
+            this.footerEl.remove();
+            setCssVars(this.containerEl, {
+                '--ec-button-border-radius': `${buttonBorderRadius}%`,
+                '--ec-controls-margin': `${controlsMargin}px`,
+            });
+            setClasses(this.containerEl, {
+                'ec-carousel--controls-sides': controlsPosition === 'sides',
+                'ec-carousel--controls-left': controlsJustification === 'left',
+                'ec-carousel--controls-right': controlsJustification === 'right',
+                'ec-carousel--controls-center': controlsJustification === 'center',
+                'ec-carousel--controls-split': controlsJustification === 'split',
+                'ec-carousel--label-left': labelJustification === 'left',
+                'ec-carousel--label-right': labelJustification === 'right',
+                'ec-carousel--label-center': labelJustification === 'left',
+            });
+            // Show label?
+            if (showLabel) {
+                if (labelPosition === 'top') {
+                    this.headerEl.append(this.labelEl);
+                }
+                if (labelPosition === 'bottom') {
+                    this.footerEl.append(this.labelEl);
+                }
+            }
+            // Set controls container
+            let controlsContainerEl = this.innerEl;
+            if (controlsPosition === 'top') {
+                controlsContainerEl = this.headerEl;
+            }
+            if (controlsPosition === 'bottom') {
+                controlsContainerEl = this.footerEl;
+            }
+            // Add controls
+            if (showControls && controlsPosition === 'sides') {
+                controlsContainerEl.prepend(this.leftArrowEl);
+                controlsContainerEl.append(this.rightArrowEl);
+            }
+            else if (showControls) {
+                switch (controlsJustification) {
+                    case 'left':
+                        controlsContainerEl.prepend(this.rightArrowEl);
+                        controlsContainerEl.prepend(this.leftArrowEl);
+                        break;
+                    case 'right':
+                        controlsContainerEl.append(this.leftArrowEl);
+                        controlsContainerEl.append(this.rightArrowEl);
+                        break;
+                    default:
+                        controlsContainerEl.prepend(this.leftArrowEl);
+                        controlsContainerEl.append(this.rightArrowEl);
+                        break;
+                }
+            }
+            if (this.headerEl.childElementCount) {
+                this.containerEl.prepend(this.headerEl);
+            }
+            if (this.footerEl.childElementCount) {
+                this.containerEl.append(this.footerEl);
+            }
+        }
+        this.containerEl.setAttribute('data-hover-effect', this.widgetSettings.hoverEffect);
+        // Then render posts into updated container
+        if (forceRender) {
+            this.renderPosts(breakpoint);
+        }
+        else {
+            this.gyre.updateSettings({
+                height: breakpoint.postHeight,
+                gap: breakpoint.gap.x,
+                borderRadius: parseInt(breakpoint.borderRadius),
+                applyBorderRadiusToContainer: breakpoint.applyBorderRadiusToContainer,
+                snapToSlide: breakpoint.snapToSlide,
+                bindToScrollPos: breakpoint.bindToScrollPos,
+            });
+        }
+        this.appliedBreakpoint = breakpoint;
+    }
+    /*
+     *   Create post Els based on a breakpoint
+     */
+    createPostEls(breakpoint) {
+        const { numPosts, postHeight, postAspectRatio, forcePostAspectRatio } = breakpoint;
+        const filteredArray = this.posts.filter((p, i) => {
+            const numPosts = breakpoint?.numPosts || this.posts?.length || 12;
+            return i < numPosts;
+        });
+        const postEls = filteredArray.map((post, i) => {
+            const naturalAspectRatio = [post.sizes.full.width, post.sizes.full.height];
+            const aspectRatioArray = forcePostAspectRatio
+                ? postAspectRatio || [1, 1]
+                : naturalAspectRatio;
+            const aspectRatio = aspectRatioArray.reduce((w, h) => w / h);
+            let postType = 'behold-image-post';
+            if (post.mediaType === 'VIDEO') {
+                postType = 'behold-video-post';
+            }
+            if (post.mediaType === 'CAROUSEL_ALBUM') {
+                postType = 'behold-album-post';
+            }
+            const postEl = createElement({
+                type: postType,
+                props: {
+                    post,
+                    widgetSettings: this.widgetSettings,
+                    feedMetadata: this.feedMetadata,
+                    medianPaletteHSL: this.medianPaletteHSL,
+                    onClick: this._handlePostClick,
+                    hasRowGap: true,
+                    isLastRow: false,
+                    index: i,
+                    aspectRatio: aspectRatioArray,
+                    totalPosts: filteredArray?.length || numPosts || this.posts?.length || 0,
+                },
+                style: {
+                    width: `${postHeight * aspectRatio}px`,
+                    '--post-aspect-ratio': aspectRatio,
+                },
+            });
+            return postEl;
+        });
+        while (postEls.length < breakpoint.numPosts) {
+            const placeholderEl = createElement({
+                classes: 'post post--placeholder',
+                style: {
+                    width: `${postHeight}px`,
+                    '--post-aspect-ratio': 1,
+                },
+            });
+            postEls.push(placeholderEl);
+        }
+        return postEls;
+    }
+    /*
+     *   Register
+     */
+    static register(name = 'behold-elastic-carousel') {
+        if (!customElements.get(name)) {
+            customElements.define(name, ElasticCarousel);
+        }
+        return name;
+    }
+}
+
+export { ElasticCarousel as default };