import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DBTJNfo7.js';
import { d as dispatchResizeEvent } from './dispatch-resize-event-z_E3sq3p.js';

const tabPanelCss = () => `:host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}`;

const TabPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.changeTab = createEvent(this, "changeTab");
        /**
         * The tabs to display in the panel
         */
        this.tabs = [];
        this.slotElements = [];
        this.handleChangeTabs = this.handleChangeTabs.bind(this);
        this.setSlotElements = this.setSlotElements.bind(this);
        this.setTabStatus = this.setTabStatus.bind(this);
    }
    connectedCallback() {
        this.initialize();
    }
    componentDidLoad() {
        this.initialize();
    }
    initialize() {
        const slot = this.getSlot();
        if (!slot) {
            return;
        }
        slot.addEventListener('slotchange', this.setSlotElements);
        this.setSlotElements();
        // eslint-disable-next-line unicorn/no-array-for-each
        this.tabs.forEach(this.setTabStatus);
    }
    disconnectedCallback() {
        const slot = this.getSlot();
        slot.removeEventListener('slotchange', this.setSlotElements);
    }
    tabsChanged() {
        this.hidePanels();
        // eslint-disable-next-line unicorn/no-array-for-each
        this.tabs.forEach(this.setTabStatus);
    }
    render() {
        return (h(Host, { key: 'cc2be22eb941e72c7333ee435d912e55bc38fd20', onChangeTab: this.handleChangeTabs }, h("div", { key: 'a5ea8894f2bb8121320dabf15757ec6d667c3e9d', class: "tab-panel" }, h("limel-tab-bar", { key: '42be419551f9c3e1310de21bb89bab89bd759dee', tabs: this.tabs }), h("div", { key: '13e156b564873aaa4de691bd3cefc703ba7d2f65', class: "tab-content" }, h("slot", { key: 'b48cff50f857f337af2c60a0d7411a6b8860ae3d' })))));
    }
    setSlotElements() {
        const slot = this.getSlot();
        this.hidePanels();
        this.slotElements = Array.prototype.slice.call(slot.assignedElements());
        // eslint-disable-next-line unicorn/no-array-for-each
        this.tabs.forEach(this.setTabStatus);
    }
    setTabStatus(tab) {
        const element = this.slotElements.find((e) => e.id === tab.id);
        if (!element) {
            return;
        }
        if (tab.active) {
            element.style.display = '';
        }
        else {
            element.style.display = 'none';
        }
        element['tab'] = tab;
    }
    handleChangeTabs(event) {
        this.tabs = this.tabs.map((tab) => {
            if (tab.id === event.detail.id) {
                return event.detail;
            }
            return tab;
        });
        this.setTabStatus(event.detail);
        // Content inside the newly activated tab may need to redraw once
        // visible, so we use the resize event trick. /Ads
        setTimeout(dispatchResizeEvent);
    }
    getSlot() {
        return this.host.shadowRoot.querySelector('slot');
    }
    hidePanels() {
        for (const element of this.slotElements) {
            element.style.display = 'none';
        }
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "tabs": [{
                "tabsChanged": 0
            }]
    }; }
};
TabPanel.style = tabPanelCss();

export { TabPanel as limel_tab_panel };
