@senx/discovery-code/dist/components/wc-tabs2.js

Discovery Code Editor

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const wcTabsCss = ":host{height:100%;height:-moz-available;height:-webkit-fill-available;height:stretch;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;overflow:hidden;overflow-y:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .wc-tabs-headers-wrapper{display:-ms-flexbox;display:flex}:host .wc-tabs-headers-wrapper .wc-tabs-header{border-bottom:1px solid var(--wc-tab-header-border-color, #dee2e6);display:-ms-flexbox;display:flex}:host .wc-tabs-content{height:100%;width:100%;display:block;overflow-x:hidden;overflow-y:auto;padding:0}";
const WcTabsStyle0 = wcTabsCss;

const WCTabs = /*@__PURE__*/ proxyCustomElement(class WCTabs extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.selection = -1;
        this.selectedIndice = -1;
    }
    onExternalSelection(newValue, _oldValue) {
        if (newValue != this.selectedIndice) {
            this.selectGroupFromIndice(newValue);
            this.selectedIndice = newValue;
        }
    }
    selectGroupFromIndice(i) {
        this.selectGroup(this.tabGroup[i % this.tabGroup.length]);
    }
    // noinspection JSUnusedGlobalSymbols
    componentDidLoad() {
        this.createGroup().then(() => {
            if (this.selection >= 0) {
                this.selectGroupFromIndice(this.selection);
            }
            else {
                const [group] = this.tabGroup;
                this.selectGroup(group);
            }
        });
    }
    onSelectedTab(event) {
        if (this.tabGroup) {
            const group = this.tabGroup.find(group => group.header.id === event.detail.id);
            this.selectGroup(group);
        }
    }
    createGroup() {
        return new Promise(resolve => {
            this.tabsHeader = [];
            this.tabsContent = [];
            const headers = [];
            const contents = [];
            const tabsHeaderEl = Array.from(this.host.querySelectorAll('wc-tabs-header'));
            tabsHeaderEl.map(el => headers.push(el.getChild()));
            const tabsContentEl = Array.from(this.host.querySelectorAll('wc-tabs-content'));
            tabsContentEl.map(el => contents.push(el.getChild()));
            Promise.all(headers).then(rh => {
                rh.map(h => this.tabsHeader.push(h));
                Promise.all(contents).then(rc => {
                    rc.map(c => this.tabsContent.push(c));
                    this.tabGroup = this.tabsHeader.map(header => {
                        const content = this.tabsContent.find(content => content.name === header.name);
                        return {
                            header: header,
                            content: content
                        };
                    });
                    resolve();
                });
            });
        });
    }
    selectGroup(group) {
        this.tabGroup.forEach(t => {
            t.header.unselect();
            t.content.unselect();
        });
        group.header.select();
        group.content.select();
    }
    render() {
        // noinspection JSXNamespaceValidation
        return [
            h("div", { class: "wc-tabs-headers-wrapper" }, h("div", { class: "wc-tabs-header" }, h("slot", { name: "header" }))),
            h("div", { class: "wc-tabs-content" }, h("slot", { name: "content" }))
        ];
    }
    get host() { return this; }
    static get watchers() { return {
        "selection": ["onExternalSelection"]
    }; }
    static get style() { return WcTabsStyle0; }
}, [1, "wc-tabs", {
        "selection": [2]
    }, [[0, "tabSelect", "onSelectedTab"]], {
        "selection": ["onExternalSelection"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["wc-tabs"];
    components.forEach(tagName => { switch (tagName) {
        case "wc-tabs":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, WCTabs);
            }
            break;
    } });
}

export { WCTabs as W, defineCustomElement as d };