import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Co4V4Zk-.js';

const spwSliderCss = () => `html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:var(--spw-ds-font-main)}body{margin:0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:block}.spw-slider{position:relative;width:100%;transition:height 0.3s ease-in-out;min-height:100px}.spw-slider[style*="height: 0px"]{min-height:200px}.spw-slider--arrows-outside{padding:0 56px}.spw-slider:focus-visible{outline:2px solid black;outline-offset:2px}.spw-slider__track{position:relative;width:100%;height:100%;overflow:hidden;cursor:grab;user-select:none}.spw-slider__track:active{cursor:grabbing}.spw-slider__navigation{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 12px;pointer-events:none;width:calc(100% + 64px);margin-left:-32px}@media (min-width: 1024px){.spw-slider__navigation{width:100%;margin-left:0}}.spw-slider--arrows-outside .spw-slider__navigation{width:100%;padding:0;margin-left:0}.spw-slider__arrow{pointer-events:all;width:40px;height:40px;border-radius:50%;border:none;background-color:var(--spw-ds-primary);color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;font-size:1.25rem}.spw-slider__arrow:hover:not(:disabled){transform:scale(0.9)}.spw-slider__arrow:disabled{cursor:not-allowed;background-color:var(--spw-color-themes-grey-grey-300);color:var(--spw-color-themes-grey-grey-400)}.spw-slider__arrow:focus-visible{outline:2px solid black;outline-offset:2px}.spw-slider__dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:0.5rem;z-index:10;background:white;box-shadow:var(--spw-effect-elevation-5);padding:8px;border-radius:999px}.spw-slider__dots--outside{position:relative;bottom:auto;left:auto;transform:none;box-shadow:none;display:inline-flex;border:1px solid var(--spw-color-themes-grey-grey-300)}.spw-slider__dot{width:12px;height:12px;border-radius:50%;background:var(--spw-color-themes-grey-grey-300);cursor:pointer;border:none;transition:all 0.2s ease;padding:0}.spw-slider__dot:hover{transform:scale(1.2)}.spw-slider__dot--active{background-color:var(--spw-ds-primary)}.spw-slider__dot:focus-visible{outline:2px solid black;outline-offset:2px}.spw-slider__dots-container{display:flex;justify-content:center;margin-top:12px}.spw-slider__autoplay-toggle{margin-top:12px}`;

const SpwSlider = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.spwSliderChange = createEvent(this, "spwSliderChange", 7);
        this.spwSliderNext = createEvent(this, "spwSliderNext", 7);
        this.spwSliderPrevious = createEvent(this, "spwSliderPrevious", 7);
        /** Affiche les flèches de navigation */
        this.showArrows = true;
        /** Affiche les dots de navigation */
        this.showDots = true;
        /** Affiche le toggle de défilement automatique */
        this.showAutoplayToggle = false;
        /** Intervalle de défilement automatique en millisecondes */
        this.autoplayInterval = 5000;
        /** Active le défilement automatique par défaut */
        this.autoplayEnabled = false;
        /** Label du toggle de défilement automatique */
        this.autoplayText = 'Défilement automatique';
        /** Position des flèches gauche/droite */
        this.arrowsPosition = 'inside';
        /** Position des dots de navigation */
        this.dotsPosition = 'inside';
        /** Texte aria-label pour la slide suivante */
        this.nextSlideText = 'Slide suivante';
        /** Texte aria-label du slider */
        this.accAriaLabel = 'Slider de contenu';
        /** Texte aria-label pour la slide précédente */
        this.previousSlideText = 'Slide précédente';
        /** Fixe la hauteur du slider à la hauteur de la slide la plus haute */
        this.hasFixedHeight = false;
        /** Index de la slide active */
        this.activeIndex = 0;
        /** Nombre total de slides */
        this.totalSlides = 0;
        /** Hauteur actuelle du slider */
        this.currentHeight = 0;
        /** État du défilement automatique */
        this.isAutoplayActive = false;
        /** Position de départ du swipe/drag */
        this.startX = 0;
        this.startY = 0;
        /** Position actuelle du swipe/drag */
        this.currentX = 0;
        /** Est en train de swiper/dragger */
        this.isDragging = false;
        /** Tableau des slides */
        this.slides = [];
        this.handleSlotChange = () => {
            this.updateSlides();
            this.scheduleHeightUpdate(50);
        };
        this.handleResize = () => {
            this.scheduleHeightUpdate(50);
        };
        this.handlePrevious = () => {
            if (this.activeIndex > 0) {
                this.goToSlide(this.activeIndex - 1, 'previous');
            }
        };
        this.handleNext = () => {
            if (this.activeIndex < this.totalSlides - 1) {
                this.goToSlide(this.activeIndex + 1, 'next');
            }
        };
        this.handleDotClick = (index) => {
            this.goToSlide(index);
        };
        this.startAutoplay = () => {
            this.stopAutoplay();
            this.autoplayTimer = window.setInterval(() => {
                const nextIndex = this.activeIndex < this.totalSlides - 1 ? this.activeIndex + 1 : 0;
                this.goToSlide(nextIndex, 'next');
            }, this.autoplayInterval);
        };
        this.stopAutoplay = () => {
            if (this.autoplayTimer) {
                clearInterval(this.autoplayTimer);
                this.autoplayTimer = null;
            }
        };
        this.handleAutoplayToggle = (event) => {
            this.isAutoplayActive = event.detail;
            if (this.isAutoplayActive) {
                this.startAutoplay();
            }
            else {
                this.stopAutoplay();
            }
        };
    }
    componentDidLoad() {
        this.initializeSlider();
        const slotElement = this.el.shadowRoot.querySelector('slot');
        if (slotElement) {
            slotElement.addEventListener('slotchange', this.handleSlotChange);
        }
        window.addEventListener('resize', this.handleResize);
        this.setupResizeObserver();
        this.isAutoplayActive = this.autoplayEnabled;
        if (this.isAutoplayActive) {
            this.startAutoplay();
        }
    }
    disconnectedCallback() {
        var _a;
        window.removeEventListener('resize', this.handleResize);
        const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
        if (slotElement) {
            slotElement.removeEventListener('slotchange', this.handleSlotChange);
        }
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
        }
        if (this.heightUpdateTimeout) {
            clearTimeout(this.heightUpdateTimeout);
        }
        this.stopAutoplay();
    }
    initializeSlider() {
        this.updateSlides();
        this.scheduleHeightUpdate(200);
        this.scheduleHeightUpdate(500);
    }
    setupResizeObserver() {
        if (typeof ResizeObserver !== 'undefined') {
            this.resizeObserver = new ResizeObserver(() => {
                this.scheduleHeightUpdate(50);
            });
            this.slides.forEach(slide => {
                var _a, _b;
                this.resizeObserver.observe(slide);
                const slotContent = (_b = (_a = slide.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements()[0];
                if (slotContent) {
                    this.resizeObserver.observe(slotContent);
                    if (slotContent.shadowRoot) {
                        const shadowContent = slotContent.shadowRoot.firstElementChild;
                        if (shadowContent) {
                            this.resizeObserver.observe(shadowContent);
                        }
                    }
                }
            });
        }
    }
    scheduleHeightUpdate(delay = 0) {
        if (this.heightUpdateTimeout) {
            clearTimeout(this.heightUpdateTimeout);
        }
        this.heightUpdateTimeout = window.setTimeout(() => {
            this.updateHeight();
        }, delay);
    }
    updateSlides() {
        const slotElement = this.el.shadowRoot.querySelector('slot');
        if (slotElement) {
            const newSlides = slotElement.assignedElements();
            if (this.resizeObserver) {
                this.slides.forEach(slide => {
                    this.resizeObserver.unobserve(slide);
                });
            }
            this.slides = newSlides;
            this.totalSlides = this.slides.length;
            this.slides.forEach((slide, index) => {
                slide.style.transform = `translateX(${index * 100}%)`;
                if (index === this.activeIndex) {
                    slide.removeAttribute('inert');
                }
                else {
                    slide.setAttribute('inert', '');
                }
            });
            if (this.resizeObserver) {
                this.slides.forEach(slide => {
                    this.resizeObserver.observe(slide);
                });
            }
        }
    }
    async updateHeight() {
        if (this.hasFixedHeight) {
            await this.updateFixedHeight();
        }
        else {
            await this.updateActiveSlideHeight();
        }
    }
    async updateFixedHeight() {
        let maxHeight = 0;
        for (const slide of this.slides) {
            const slideHeight = await this.getSlideHeight(slide);
            if (slideHeight > maxHeight) {
                maxHeight = slideHeight;
            }
        }
        if (maxHeight > 0) {
            this.currentHeight = maxHeight;
            this.applyFixedHeightToHeroes(maxHeight);
        }
    }
    applyFixedHeightToHeroes(height) {
        var _a, _b, _c;
        for (const slide of this.slides) {
            const slotContent = (_b = (_a = slide.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements()[0];
            if ((slotContent === null || slotContent === void 0 ? void 0 : slotContent.tagName.toLowerCase()) === 'spw-hero') {
                const heroElement = (_c = slotContent.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.spw-hero');
                if (heroElement) {
                    heroElement.style.height = `${height}px`;
                }
            }
        }
    }
    async updateActiveSlideHeight() {
        if (this.slides[this.activeIndex]) {
            const activeSlide = this.slides[this.activeIndex];
            const slideHeight = await this.getSlideHeight(activeSlide);
            if (slideHeight > 50) {
                this.currentHeight = slideHeight;
            }
            else {
                this.retryHeightCalculation(0);
            }
        }
    }
    async getSlideHeight(slide) {
        var _a, _b;
        const slotContent = (_b = (_a = slide.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements()[0];
        if (slotContent) {
            const tagName = slotContent.tagName.toLowerCase();
            if (tagName.includes('-')) {
                try {
                    await customElements.whenDefined(tagName);
                    await new Promise(resolve => setTimeout(resolve, 50));
                }
                catch (e) { }
            }
            const contentElement = slotContent;
            let slideHeight = contentElement.offsetHeight || contentElement.scrollHeight;
            if (contentElement.shadowRoot) {
                const shadowContent = contentElement.shadowRoot.firstElementChild;
                if (shadowContent) {
                    slideHeight = shadowContent.offsetHeight || shadowContent.scrollHeight;
                }
            }
            if (slideHeight > 0) {
                return slideHeight;
            }
        }
        return slide.offsetHeight || slide.scrollHeight;
    }
    retryHeightCalculation(attempt) {
        if (attempt >= 15)
            return;
        setTimeout(() => {
            var _a, _b;
            const activeSlide = this.slides[this.activeIndex];
            if (!activeSlide)
                return;
            const slotContent = (_b = (_a = activeSlide.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements()[0];
            if (slotContent) {
                let retryHeight = slotContent.offsetHeight || slotContent.scrollHeight;
                if (slotContent.shadowRoot) {
                    const shadowContent = slotContent.shadowRoot.firstElementChild;
                    if (shadowContent) {
                        retryHeight = shadowContent.offsetHeight || shadowContent.scrollHeight;
                    }
                }
                if (retryHeight > 50) {
                    this.currentHeight = retryHeight;
                    return;
                }
            }
            const retryHeight = activeSlide.offsetHeight || activeSlide.scrollHeight;
            if (retryHeight > 50) {
                this.currentHeight = retryHeight;
            }
            else {
                this.retryHeightCalculation(attempt + 1);
            }
        }, 100 * (attempt + 1));
    }
    goToSlide(index, direction) {
        if (index < 0 || index >= this.totalSlides)
            return;
        const previousIndex = this.activeIndex;
        this.activeIndex = index;
        this.spwSliderChange.emit({ index, previousIndex });
        if (direction === 'next')
            this.spwSliderNext.emit({ index });
        if (direction === 'previous')
            this.spwSliderPrevious.emit({ index });
        this.slides.forEach((slide, i) => {
            const offset = (i - this.activeIndex) * 100;
            slide.style.transition = 'transform 0.3s ease-in-out';
            slide.style.transform = `translateX(${offset}%)`;
            if (i === this.activeIndex) {
                slide.removeAttribute('inert');
            }
            else {
                slide.setAttribute('inert', '');
            }
        });
        this.scheduleHeightUpdate(0);
        this.scheduleHeightUpdate(320);
        if (this.isAutoplayActive) {
            this.stopAutoplay();
            this.startAutoplay();
        }
    }
    handleTouchStart(event) {
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
        this.currentX = this.startX;
        this.isDragging = true;
        if (this.isAutoplayActive) {
            this.stopAutoplay();
        }
    }
    handleMouseDown(event) {
        this.startX = event.clientX;
        this.currentX = this.startX;
        this.isDragging = true;
        event.preventDefault();
        if (this.isAutoplayActive) {
            this.stopAutoplay();
        }
    }
    handleTouchMove(event) {
        if (!this.isDragging)
            return;
        const dx = event.touches[0].clientX - this.startX;
        const dy = event.touches[0].clientY - this.startY;
        if (Math.abs(dx) > Math.abs(dy)) {
            event.preventDefault();
        }
        this.currentX = event.touches[0].clientX;
    }
    handleMouseMove(event) {
        if (!this.isDragging)
            return;
        this.currentX = event.clientX;
    }
    handleTouchEnd() {
        this.handleDragEnd();
    }
    handleMouseUp() {
        this.handleDragEnd();
    }
    handleMouseLeave() {
        if (this.isDragging) {
            this.handleDragEnd();
        }
    }
    handleKeyDown(event) {
        if (event.key === 'ArrowLeft') {
            event.preventDefault();
            this.handlePrevious();
        }
        else if (event.key === 'ArrowRight') {
            event.preventDefault();
            this.handleNext();
        }
    }
    handleDragEnd() {
        if (!this.isDragging)
            return;
        const diff = this.startX - this.currentX;
        const threshold = 50;
        if (Math.abs(diff) > threshold) {
            if (diff > 0) {
                this.handleNext();
            }
            else {
                this.handlePrevious();
            }
        }
        this.isDragging = false;
        this.startX = 0;
        this.currentX = 0;
        if (this.isAutoplayActive) {
            this.startAutoplay();
        }
    }
    get elementClass() {
        return {
            'spw-slider': true,
            [`spw-slider--arrows-${this.arrowsPosition}`]: true,
            [`spw-slider--dots-${this.dotsPosition}`]: true,
        };
    }
    renderDots() {
        if (!this.showDots || this.totalSlides <= 1)
            return null;
        return (h("div", { class: { 'spw-slider__dots': true, 'spw-slider__dots--outside': this.dotsPosition === 'outside' } }, Array.from({ length: this.totalSlides }, (_, i) => (h("button", { class: {
                'spw-slider__dot': true,
                'spw-slider__dot--active': i === this.activeIndex,
            }, onClick: () => this.handleDotClick(i), "aria-label": `Slide ${i + 1}`, "aria-current": i === this.activeIndex ? 'true' : 'false' })))));
    }
    render() {
        return (h(Host, { key: '67c85fed7cc665da3cfa60082b5ac76b1f679c0d' }, h("div", { key: '1090245b2710939eb572d26c1ed23ade12c416e9', class: this.elementClass, style: { height: `${this.currentHeight}px` }, tabindex: "0", role: "region", "aria-label": this.accAriaLabel }, h("div", { key: 'e810a8fe4154b2f793041cae72f889a001988b84', class: "spw-slider__track" }, h("slot", { key: '440367be7154291d1d18465fab6dedbd79271792' })), this.showArrows && (h("div", { key: '7e8da39ecafddd9e3967d7a15e9d1838bbb51074', class: "spw-slider__navigation" }, h("button", { key: '48a77dde510252161146311dbd7ee8d75f39abfa', class: "spw-slider__arrow spw-slider__arrow--prev", onClick: this.handlePrevious, disabled: this.activeIndex === 0, "aria-label": this.previousSlideText }, h("spw-icon", { key: 'e8d9234727245e28a6d12d1914420cac33689edf', icon: "fa-chevron-left" })), h("button", { key: '66dd413bb8817caba03b3ca6af41c896459a91cf', class: "spw-slider__arrow spw-slider__arrow--next", onClick: this.handleNext, disabled: this.activeIndex === this.totalSlides - 1, "aria-label": this.nextSlideText }, h("spw-icon", { key: '8f545069639f403f8b4ef7843bf10d9d102609a1', icon: "fa-chevron-right" })))), this.dotsPosition === 'inside' && this.renderDots()), this.dotsPosition === 'outside' && (h("div", { key: '95bc58b0e2de1dc60a1e8f5036b8aec4eaebf9b6', class: "spw-slider__dots-container" }, this.renderDots())), this.showAutoplayToggle && (h("div", { key: 'e6e919ce3bbad911c74914bd19b3e920c028c4f9', class: "spw-slider__autoplay-toggle" }, h("spw-checkbox", { key: 'c8583e3b3a2b47e9ce67c7d6aa448b54dea0a3ec', variant: "toggle", checked: this.isAutoplayActive, onSpwChange: this.handleAutoplayToggle }, this.autoplayText)))));
    }
    get el() { return getElement(this); }
};
SpwSlider.style = spwSliderCss();

export { SpwSlider as spw_slider };
