@paraboly/pwc-multi-filter/dist/pwc-multi-filter/pwc-tabview.entry.js

A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.

import { r as registerInstance, c as createEvent, h, d as getElement } from './core-ba89e169.js';

const PwcTabview = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.tabRefs = [];
        this.titleToTabMap = {};
        this.titleToHandleMap = {};
        this.titles = [];
        this.tabChanged = createEvent(this, "tabChanged", 7);
    }
    activeTitleWatchHandler(newValue, oldValue) {
        this.parseTabList();
        if (!this.titles.includes(newValue)) {
            // tslint:disable-next-line: no-console
            console.error(`Active title not found! Refusing to update. Requested activeTitle: '${newValue}' Old activeTitle: '${oldValue}' All titles: '${this.titles}'`);
            if (!this.titles.includes(oldValue)) {
                // tslint:disable-next-line: no-console
                console.error(`Old title is not there anymore. Refusing to revert. Requested activeTitle: '${newValue}' Old activeTitle: '${oldValue}' All titles: '${this.titles}'`);
            }
            else {
                this.activeTitle = oldValue;
            }
        }
        else {
            this.tabChanged.emit({
                title: newValue,
                tab: this.titleToTabMap[newValue],
                handle: this.titleToHandleMap[newValue]
            });
        }
    }
    tabModifiedEventHandler() {
        this.parseTabList();
        this.root.forceUpdate();
    }
    handleClickedHandler(event) {
        const title = event.detail.title;
        this.switchToTab(title);
    }
    /**
     * Returns the currently active tab, handle, and title.
     */
    async getActiveState() {
        return {
            title: this.activeTitle,
            tab: this.titleToTabMap[this.activeTitle],
            handle: this.titleToHandleMap[this.activeTitle]
        };
    }
    /**
     * Switches to a tab.
     * @param title Title of the target tab.
     */
    async switchToTab(title) {
        this.activeTitle = title;
    }
    /**
     * Switches to a tab.
     * @param index Index of the target tab.
     */
    async switchToTabIndex(index) {
        const title = this.titles[index];
        return this.switchToTab(title);
    }
    onChildrenChange() {
        this.parseTabList();
        this.root.forceUpdate();
    }
    parseTabList() {
        this.tabRefs = Array.from(this.root.querySelectorAll("pwc-tabview-tab"));
        this.titles = this.tabRefs.map(t => t.title);
        this.titleToTabMap = {};
        this.tabRefs.forEach(t => {
            this.titleToTabMap[t.title] = t;
        });
    }
    componentDidLoad() {
        const observer = new MutationObserver(this.onChildrenChange.bind(this));
        const options = {
            childList: true
        };
        observer.observe(this.root, options);
    }
    async componentWillRender() {
        // refresh internal bookkeeping
        this.parseTabList();
        // if the active title doesn't exist, switch to the first tab (if it exists)
        if (!this.titles.includes(this.activeTitle) && this.titles.length > 0) {
            await this.switchToTabIndex(0);
        }
        // set all tabs inactive
        this.tabRefs.forEach(t => (t.active = false));
        // set the active tab active
        if (this.titleToTabMap.hasOwnProperty(this.activeTitle)) {
            this.titleToTabMap[this.activeTitle].active = true;
        }
        // flush the handle map
        this.titleToHandleMap = {};
    }
    render() {
        return [
            h("div", { class: "pwc-tabview___handle-container" }, this.tabRefs.map(tab => {
                return (h("pwc-tabview-handle", { key: tab.title, title: tab.title, active: this.activeTitle === tab.title, ref: elem => (this.titleToHandleMap[tab.title] = elem) }));
            })),
            h("slot", null)
        ];
    }
    get root() { return getElement(this); }
    static get watchers() { return {
        "activeTitle": ["activeTitleWatchHandler"]
    }; }
    static get style() { return "pwc-tabview {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.pwc-tabview___handle-container {\n  display: -ms-flexbox;\n  display: flex;\n}"; }
};

export { PwcTabview as pwc_tabview };