@paraboly/pwc-multi-filter/dist/pwc-multi-filter/pwc-multi-filter.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';
import './_commonjsHelpers-4ab098b6.js';
import { _ } from './lodash-62c1633d.js';

const PwcMultiFilter = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.filterConfigs = [];
        this.filterRefs = {};
        this.filterChangedEventSubscribers = {};
        this.activeFilterChanged = createEvent(this, "activeFilterChanged", 7);
    }
    async tabChangedEventHandler(e) {
        this.setActiveState(e.detail.title);
    }
    async getActiveState() {
        return {
            filterRef: this.filterRefs[this.activeFilterName],
            filterName: this.activeFilterName
        };
    }
    async switchToFilter(name) {
        if (!this.filterRefs.hasOwnProperty(name)) {
            throw new Error(`Cannot find a filter with name '${name}'. Refusing to switch.`);
        }
        // we set the tab's state -> tab emits an event -> we set our inner state -> we emit an event
        return this.tabViewRef.switchToTab(name);
    }
    async addFilter(config) {
        if (!config || !config.name) {
            throw new Error(`Config is invalid. Refusing to add.`);
        }
        this.filterConfigs = _.unionBy(this.filterConfigs, [config], f => f.name);
    }
    async removeFilter(name) {
        if (_.findIndex(this.filterConfigs, { name }) === -1) {
            throw new Error(`Cannot find a filter with name '${name}'. Refusing to delete.`);
        }
        const filtered = this.filterConfigs.filter(val => val.name !== name);
        this.filterConfigs = [...filtered];
        // delete this.filterRefs[name];
    }
    async getFilter(name) {
        return this.filterRefs[name];
    }
    async subscribeToFilterChange(name, callback) {
        if (_.findIndex(this.filterConfigs, { name }) === -1) {
            throw new Error(`Cannot find a filter with name '${name}'. Refusing to process subscription request.`);
        }
        this.filterChangedEventSubscribers[name] =
            this.filterChangedEventSubscribers[name] || [];
        this.filterChangedEventSubscribers[name].push(callback);
    }
    async getFilterResult(name) {
        if (!this.filterRefs.hasOwnProperty(name)) {
            // tslint:disable-next-line: no-console
            console.warn(`Cannot find a filter with name '${name}'. Returning empty array.`);
            return [];
        }
        return this.filterRefs[name].filter();
    }
    setActiveState(activeFilterName) {
        this.activeFilterName = activeFilterName;
        this.activeFilterChanged.emit({
            filterName: this.activeFilterName,
            filterRef: this.filterRefs[this.activeFilterName]
        });
    }
    handleChangeEvent(name, event) {
        const subscribers = this.filterChangedEventSubscribers[name];
        if (subscribers) {
            subscribers.forEach(callback => callback(event));
        }
    }
    registerFilterRef(name, filterRef) {
        if (filterRef) {
            const existingRef = this.filterRefs[name];
            this.filterRefs[name] = filterRef;
            if (existingRef !== filterRef) {
                this.initialFilterSetup(name, filterRef);
            }
        }
    }
    initialFilterSetup(name, filterRef) {
        filterRef.addEventListener("filterChanged", this.handleChangeEvent.bind(this, name));
    }
    switchToFirstFilter() {
        const firstTabName = this.filterConfigs[0].name;
        this.switchToFilter(firstTabName);
    }
    constructFilterTab(filter) {
        return (h("pwc-tabview-tab", { title: filter.name }, h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
    }
    render() {
        return (this.filterConfigs &&
            this.filterConfigs.length > 0 && (h("pwc-tabview", { ref: el => (this.tabViewRef = el) }, this.filterConfigs.map(filter => this.constructFilterTab(filter)))));
    }
    get root() { return getElement(this); }
};

export { PwcMultiFilter as pwc_multi_filter };