@behold/widget 0.5.57 → 0.5.58

package/dist/ElasticCarousel-WWMTzi-V.js

@@ -1,1032 +0,0 @@
-import { c as createElement, p as pushWithLimit, g as getAsyncRect, s as setCssVars, a as setClasses, h as hasChanges } from './index-R4lEDZFo.js';
-import { B as BaseWidget, I as ImagePost, V as VideoPost, A as AlbumPost, b as baseGridStyles, g as getMedianHSL } from './base-GZO73SkY.js';
-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-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-pssVDO_O.js');
-        PopoverGallery.register();
-        this.popoverGalleryEl = document.createElement('behold-popover-gallery');
-        Object.assign(this.popoverGalleryEl, {
-            widgetSettings: this.widgetSettings,
-            feedMetadata: this.feedMetadata,
-            posts: this.posts,
-            closeFocusEl: this,
-            onSlideChange: (slideIndex) => {
-                this.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 };