@limetech/lime-elements/dist/esm/limel-tab-panel.entry.js

Lime Elements

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: 'ebab881a0b0efc36b64c866b58b919890c526525', onChangeTab: this.handleChangeTabs }, h("div", { key: '1417a34aea0af009e44cd91ac8fd425412a2b706', class: "tab-panel" }, h("limel-tab-bar", { key: '5b420eeec41fdd353ba0ba36bb0e475c3fd26821', tabs: this.tabs }), h("div", { key: 'aa3d6f711a824a07eed6f2b5120497dd4218ed7b', class: "tab-content" }, h("slot", { key: '7ba511fa07bd96018e4d8d288d7b1dca572cead0' })))));
    }
    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 };