import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { B as Button } from './button.js';
import { af as dropdownMenuButton, ag as dropdownMenu } from './parts.js';
import { d as defineCustomElement$1 } from './custom-popper2.js';

const hasFilters = (params) => {
    const paginationKeys = ['after_cursor', 'before_cursor'];
    const paramKeys = Object.keys(params);
    const filterKeys = paramKeys.filter((paramKey) => !paginationKeys.includes(paramKey));
    return !!filterKeys.length;
};

const TableFiltersMenu = /*@__PURE__*/ proxyCustomElement(class TableFiltersMenu extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.showClearButton = false;
    }
    watchParamsHandler(newValue) {
        this.showClearButton = hasFilters(newValue);
    }
    show() {
        this.menu.classList.add('show');
    }
    hide() {
        this.menu.classList.remove('show');
    }
    componentWillLoad() {
        this.showClearButton = hasFilters(this.params);
    }
    render() {
        return (h("div", { key: 'bcecb736427ce7859174c8f91938f720f8e32782', class: "d-flex gap-2" }, h("div", { key: 'aadd72cb3aac3d676a340068304802dbc5dfeab2', class: "dropdown pb-3" }, h("button", { key: '2dbb5590ea8ed60d2228b0f0b262332e5d377810', type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", part: dropdownMenuButton, "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: 'c516ec2550207e3acc3d0186c6f86d351a6ca4a9', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '4ee1c1bd0e5c9eacccb857986d3f2e37bb3d990b', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'b274f915722d1a59af4578935c4233bcf700c7b2' })))), h("div", { key: 'ce527862135dd31b9b198133a3a2c19699419c5d' }, h(Button, { key: '272022c173de7f8c41ba7a88cf5aa004da11b3a2', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
    }
    static get watchers() { return {
        "params": ["watchParamsHandler"]
    }; }
}, [260, "table-filters-menu", {
        "params": [8],
        "clearParams": [16],
        "anchorButton": [32],
        "menu": [32],
        "showClearButton": [32]
    }, [[0, "showEvent", "show"], [0, "hideEvent", "hide"]], {
        "params": ["watchParamsHandler"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["table-filters-menu", "custom-popper"];
    components.forEach(tagName => { switch (tagName) {
        case "table-filters-menu":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TableFiltersMenu);
            }
            break;
        case "custom-popper":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { TableFiltersMenu as T, defineCustomElement as d };
