import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cby2wKoI.js';

const filterSearchCss = () => `.sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}`;

const FilterSearch = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.ifxFilterSearchChange = createEvent(this, "ifxFilterSearchChange", 7);
    }
    get host() { return getElement(this); }
    filterName;
    disabled = false;
    filterValue;
    filterKey;
    showDeleteIcon = false;
    filterOrientation = "sidebar"; //topbar
    placeholder;
    ifxFilterSearchChange;
    valueChanged(newValue) {
        this.host.setAttribute("value", newValue.toString());
    }
    handleFilterSearchChange(event) {
        // Check if a search filter with the same filterName already exists
        const existingFilter = this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);
        if (existingFilter && existingFilter !== this.host) {
            throw new Error(`A search filter with the name '${this.filterName}' already exists.`);
        }
        // // Check if the filterName is 'search' and the filter is not the search component
        // if (this.filterName === 'search' && this.filterKey !== 'text') {
        //   throw new Error("The filter name 'search' is reserved for the search component.");
        // }
        this.filterValue = event.detail;
        this.showDeleteIcon = this.filterValue !== "";
        this.ifxFilterSearchChange.emit({
            filterName: this.filterName,
            filterValue: this.filterValue,
            filterKey: this.filterKey,
        }); // Emitting filterKey along with other properties
    }
    render() {
        return (h("div", { key: '3f79ee17d44f49aa638e27e0031103fb13109b41', class: `${this.filterOrientation === "sidebar"
                ? "sidebar-filter-search-wrapper"
                : "topbar-filter-search-wrapper"}` }, h("div", { key: '463f29f7db59aeae88156325997081f88a4c6b43', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '58e6c3238a9d7892ff7f30949932a6260392e3f4', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
    }
    static get watchers() { return {
        "value": [{
                "valueChanged": 0
            }]
    }; }
};
FilterSearch.style = filterSearchCss();

export { FilterSearch as ifx_filter_search };
//# sourceMappingURL=ifx-filter-search.entry.js.map

//# sourceMappingURL=ifx-filter-search.entry.js.map