'use strict';

var index = require('./index-DuCXzb-X.js');

const spwTabsCss = () => `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}`;

const SpwTabs = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.tabChanged = index.createEvent(this, "tabChanged", 1);
        /** Onglet actif par défaut */
        this.defaultActiveTab = '1';
        /** Variante des onglets */
        this.variant = 'default';
        /** Texte coupé si trop long, affiche un tooltip si le contenu excède la max-width définie */
        this.hasEllipsis = false;
        /** Permet de spécifier la taille de l'onglet */
        this.size = 'small';
        /** Onglet actuellement actif */
        this.activeTab = '1';
    }
    componentWillLoad() {
        if (!this.activeTab || this.activeTab === '1') {
            this.activeTab = this.defaultActiveTab;
        }
    }
    componentDidLoad() {
        this.applyVariantToChildren();
        this.updateActiveStates();
        setTimeout(() => {
            this.applyMaxWidthToChildren();
        }, 100);
    }
    activeTabChanged() {
        this.updateActiveStates();
        this.tabChanged.emit(this.activeTab);
    }
    maxWidthChanged() {
        this.applyMaxWidthToChildren();
    }
    hasEllipsisChanged() {
        this.applyVariantToChildren();
    }
    /**
     * Récupère l'onglet actuellement sélectionné
     * @returns {Promise<string>} L'ID de l'onglet actif
     */
    async getSelectedTab() {
        return this.activeTab;
    }
    /**
     * Définit l'onglet sélectionné
     * @param tabId L'ID de l'onglet à sélectionner
     * @returns {Promise<void>}
     */
    async setSelectedTab(tabId) {
        this.activeTab = tabId;
    }
    handleTabSelected(event) {
        const path = event.composedPath();
        const firstTabsInPath = path.find(el => el.tagName === 'SPW-TABS');
        if (firstTabsInPath !== this.el) {
            return;
        }
        this.activeTab = event.detail;
        event.stopPropagation();
    }
    slotChanged() {
        this.applyVariantToChildren();
        this.updateActiveStates();
        this.applyMaxWidthToChildren();
    }
    updateActiveStates() {
        const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
        const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent);
        const contents = Array.from(this.el.querySelectorAll('spw-tabs-content')).filter(isInThisComponent);
        navItems.forEach(item => {
            item.active = item.tabId === this.activeTab;
        });
        contents.forEach(content => {
            content.active = content.tabId === this.activeTab;
        });
    }
    applyMaxWidthToChildren() {
        if (!this.maxWidth) {
            return;
        }
        requestAnimationFrame(() => {
            const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
            const navItems = Array.from(this.el.querySelectorAll('spw-tabs-navigation-item')).filter(isInThisComponent);
            const ellipsisClass = `--ellipsis`;
            navItems.forEach(item => {
                var _a;
                const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
                if (!textContent) {
                    return;
                }
                const measureEl = document.createElement('div');
                measureEl.style.cssText = `
          position: absolute;
          visibility: hidden;
          white-space: nowrap;
          top: -9999px;
          left: -9999px;
        `;
                measureEl.textContent = textContent;
                const computedStyle = window.getComputedStyle(item);
                measureEl.style.fontSize = computedStyle.fontSize;
                measureEl.style.fontFamily = computedStyle.fontFamily;
                measureEl.style.fontWeight = computedStyle.fontWeight;
                measureEl.style.fontStyle = computedStyle.fontStyle;
                measureEl.style.letterSpacing = computedStyle.letterSpacing;
                measureEl.style.textTransform = computedStyle.textTransform;
                document.body.appendChild(measureEl);
                const contentWidth = measureEl.getBoundingClientRect().width;
                document.body.removeChild(measureEl);
                if (contentWidth > this.maxWidth) {
                    item.style.setProperty('--spw-tabs-max-width-text', `${this.maxWidth}px`);
                    item.setAttribute('has-ellipsis', 'true');
                    item.classList.add(ellipsisClass);
                }
                else {
                    item.style.removeProperty('--spw-tabs-max-width-text');
                    item.setAttribute('has-ellipsis', 'false');
                    item.classList.remove(ellipsisClass);
                }
            });
        });
    }
    applyVariantToChildren() {
        requestAnimationFrame(() => {
            var _a, _b;
            const variantClass = `--${this.variant}`;
            const sizeClass = `--${this.size}`;
            const isInThisComponent = (el) => el.closest('spw-tabs') === this.el;
            const navigationSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="navigation"]');
            const contentSlot = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="content"]');
            const navigationElements = ((navigationSlot === null || navigationSlot === void 0 ? void 0 : navigationSlot.assignedElements({ flatten: true })) || []).filter(isInThisComponent);
            const contentElements = ((contentSlot === null || contentSlot === void 0 ? void 0 : contentSlot.assignedElements({ flatten: true })) || []).filter(isInThisComponent);
            navigationElements.forEach(el => {
                if (el.tagName === 'SPW-TABS-NAVIGATION') {
                    el.classList.add(variantClass);
                    el.querySelectorAll('spw-tabs-navigation-item').forEach(item => {
                        if (isInThisComponent(item)) {
                            item.classList.add(variantClass);
                            item.classList.add(sizeClass);
                        }
                    });
                }
                else if (el.tagName === 'SPW-TABS-NAVIGATION-ITEM') {
                    el.classList.add(variantClass);
                    el.classList.add(sizeClass);
                }
            });
            contentElements.forEach(el => {
                if (el.tagName === 'SPW-TABS-CONTENT') {
                    el.classList.add(variantClass);
                }
                else {
                    el.querySelectorAll('spw-tabs-content').forEach(content => {
                        if (isInThisComponent(content)) {
                            content.classList.add(variantClass);
                        }
                    });
                }
            });
            this.applyMaxWidthToChildren();
        });
    }
    get elementClass() {
        return {
            'spw-tabs': true,
            [`spw-tabs--${this.variant}`]: true,
        };
    }
    render() {
        return (index.h("div", { key: '2959fd77a92e360f81a53fed3af12e027b54d98d', class: this.elementClass }, index.h("slot", { key: 'acc8d785075b425baa8abea8a9fa8fc06a90db03', name: "navigation" }), index.h("slot", { key: 'e8078130f48eeba4d272eb3ba0a5fea9326081ff', name: "content" })));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "activeTab": [{
                "activeTabChanged": 0
            }],
        "maxWidth": [{
                "maxWidthChanged": 0
            }],
        "hasEllipsis": [{
                "hasEllipsisChanged": 0
            }]
    }; }
};
SpwTabs.style = spwTabsCss();

exports.spw_tabs = SpwTabs;
