import { r as registerInstance, h, g as getElement } from './index-b13326fc.js';

const BceElementSlider = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.value = null;
        this.handleInput = (event) => {
            event.cancelBubble = true;
            const target = event.target;
            this.value = target.value;
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    async validate(silent = false) {
        const slider = this.el.shadowRoot.querySelector('bce-slider');
        return slider.validate(silent);
    }
    render() {
        if (!this.template)
            return null;
        return [
            h("p", null, this.handler.t('question')),
            h("div", null, h("label", null, this.handler.t('minText')), h("label", { class: "bold" }, this.value), h("label", null, this.handler.t('maxText'))),
            h("bce-slider", { block: true, value: this.value, validation: this.template.required ? 'required' : '', step: this.template.step, min: this.template.min, max: this.template.max, onInput: this.handleInput }),
            h("div", null, h("label", null, this.template.min), h("label", null, this.template.max))
        ];
    }
    get el() { return getElement(this); }
    static get style() { return ":host p{font-weight:500;text-align:center}\@media screen and (min-width: 1024px){:host p{text-align:left}}:host div{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .bold{font-weight:bold}"; }
};

export { BceElementSlider as bce_element_slider };
