import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
import { d as defineCustomElement$8 } from './p-CROLVxZq.js';
import { d as defineCustomElement$7 } from './p-Bm-eGlq5.js';
import { d as defineCustomElement$6 } from './p-B-I2VhI5.js';
import { d as defineCustomElement$5 } from './p-Bc_ZM813.js';
import { d as defineCustomElement$4 } from './p-ZCLJED5S.js';
import { d as defineCustomElement$3 } from './p-GP5uSTr1.js';
import { d as defineCustomElement$2 } from './p-B61i82g5.js';

const setFilterCss = "";

const SetFilter = /*@__PURE__*/ proxyCustomElement(class SetFilter extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxFilterSelect = createEvent(this, "ifxFilterSelect", 7);
        this.type = 'text';
        this.filterValues = [];
    }
    handleTextInputChange(event) {
        const target = event.target;
        const value = target.value;
        this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component
    }
    handleSingleSelectChange(event) {
        const value = event.detail.value;
        this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component
    }
    handleMultiselectOptionChange(event) {
        this.filterValues = event.detail.map(option => ({
            label: option.value,
            value: option.value
        }));
        this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });
    }
    render() {
        let optionsArray = [];
        // Parse options if it's a string
        if (typeof this.options === 'string') {
            try {
                optionsArray = JSON.parse(this.options);
            }
            catch (e) {
                console.error('Failed to parse options:', e);
                optionsArray = [];
            }
        }
        else if (Array.isArray(this.options)) {
            optionsArray = this.options;
        }
        switch (this.type) {
            case 'text':
                return (h("ifx-text-field", { error: false, disabled: false, placeholder: this.placeholder, onIfxInput: event => this.handleTextInputChange(event) }, this.filterLabel));
            case 'single-select':
                return (h("ifx-select", { placeholder: "true", "search-enabled": "true", "search-placeholder-value": "Search...", onIfxSelect: event => this.handleSingleSelectChange(event), "ifx-placeholder-value": this.placeholder, "ifx-label": this.filterLabel, "ifx-options": this.options }));
            case 'multi-select':
                return (h("ifx-multiselect", { label: this.filterLabel, placeholder: this.placeholder, onIfxSelect: event => this.handleMultiselectOptionChange(event) }, optionsArray.map(option => (h("ifx-multiselect-option", { value: option.value || option }, option.label || option)))));
            default:
                return null;
        }
    }
    static get style() { return setFilterCss; }
}, [257, "ifx-set-filter", {
        "filterName": [1, "filter-name"],
        "filterLabel": [1, "filter-label"],
        "placeholder": [1],
        "type": [1],
        "options": [1],
        "filterValues": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-set-filter", "ifx-checkbox", "ifx-icon", "ifx-multiselect", "ifx-multiselect-option", "ifx-search-field", "ifx-select", "ifx-text-field"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-set-filter":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SetFilter);
            }
            break;
        case "ifx-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "ifx-multiselect":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "ifx-multiselect-option":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "ifx-search-field":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "ifx-select":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ifx-text-field":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IfxSetFilter = SetFilter;
const defineCustomElement = defineCustomElement$1;

export { IfxSetFilter, defineCustomElement };
//# sourceMappingURL=ifx-set-filter.js.map

//# sourceMappingURL=ifx-set-filter.js.map