'use strict';

var index = require('./index-n_pDKBY2.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) {
        index.registerInstance(this, hostRef);
        this.ifxFilterSearchChange = index.createEvent(this, "ifxFilterSearchChange", 7);
        this.disabled = false;
        this.showDeleteIcon = false;
        this.filterOrientation = 'sidebar'; //topbar
    }
    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 (index.h("div", { key: '19979b3514737df346d309c9080cd42d010aee50', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: '6f266b247fb3cc57030f9afe9c59ea7afbf05b6b', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: 'b252531ff2f2754dea952637ce01f9c2f095f92f', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "value": ["valueChanged"]
    }; }
};
FilterSearch.style = filterSearchCss;

exports.ifx_filter_search = FilterSearch;
//# sourceMappingURL=ifx-filter-search.entry.cjs.js.map

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