@paraboly/pwc-multi-filter/dist/pwc-multi-filter/pwc-dynamic-form-field.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';

const PwcDynamicFormField = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.fieldChanged = createEvent(this, "fieldChanged", 7);
    }
    changeEventHandler(event) {
        const element = event.target;
        let elementValue;
        if (this.nativeInputRef.type === "checkbox") {
            elementValue = element.checked;
        }
        else {
            elementValue = element.value;
        }
        this.fieldChanged.emit({
            element,
            newValue: elementValue,
            originalEvent: event
        });
    }
    selectedOptionsChangedHandler(event) {
        const element = event.target;
        const value = event.detail;
        this.fieldChanged.emit({
            element,
            newValue: value,
            originalEvent: event
        });
    }
    colorPickedeventHandler(event) {
        event.stopPropagation();
        event.preventDefault();
        const element = event.target;
        const value = event.detail;
        this.fieldChanged.emit({
            element,
            newValue: value,
            originalEvent: event
        });
    }
    async getValue() {
        if (this.nativeInputRef) {
            if (this.nativeInputRef.type === "checkbox") {
                return this.nativeInputRef.checked;
            }
            else {
                return this.nativeInputRef.value;
            }
        }
        if (this.choicesRef) {
            return this.choicesRef.getSelectedOptionsAsValues();
        }
        if (this.colorPickerRef) {
            return this.colorPickerRef.activeColor;
        }
    }
    handleColorPickerRef(ref) {
        this.colorPickerRef = ref;
    }
    handleChoicesRef(ref) {
        this.choicesRef = ref;
    }
    handleNativeInputRef(ref) {
        this.nativeInputRef = ref;
    }
    constructField(field) {
        let castedField;
        const label = field.label;
        delete field.label;
        switch (field.type) {
            case "color":
                castedField = field;
                return [
                    h("label", { htmlFor: castedField.name }, label),
                    h("pwc-color-picker", Object.assign({}, castedField, { ref: this.handleColorPickerRef.bind(this) }))
                ];
            // Special handle reason: using pwc-choices.
            case "select-single":
                castedField = field;
                castedField.type = "single";
                return this.constructPwcChoices(label, castedField);
            // Special handle reason: using pwc-choices.
            case "select-multi":
                castedField = field;
                castedField.type = "multi";
                return this.constructPwcChoices(label, castedField);
            // Special handle reason: label needs to be placed after the input element.
            case "checkbox":
                castedField = field;
                return [
                    h("input", Object.assign({}, castedField, { ref: this.handleNativeInputRef.bind(this) })),
                    h("label", { htmlFor: castedField.name }, label)
                ];
            default:
                castedField = field;
                return [
                    h("label", { htmlFor: castedField.name }, label),
                    h("input", Object.assign({}, castedField))
                ];
        }
    }
    constructPwcChoices(label, castedField) {
        return [
            h("label", { htmlFor: castedField.name }, label),
            h("pwc-choices", Object.assign({}, castedField, { ref: this.handleChoicesRef.bind(this) }))
        ];
    }
    render() {
        return this.constructField(this.config);
    }
    get rootElement() { return getElement(this); }
    static get style() { return "pwc-dynamic-form-field {\n  display: block;\n}"; }
};

export { PwcDynamicFormField as pwc_dynamic_form_field };