'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-0f211bec.js');

const BceElementSlider = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.handleInput = (event) => {
            event.cancelBubble = true;
            const target = event.target;
            this.value = target.value;
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    componentDidLoad() {
        this.value = (this.template && this.template.max / 2) || 0;
    }
    render() {
        if (!this.template)
            return null;
        return (core.h(core.Host, null, core.h("p", null, this.template.question), core.h("div", { class: "top" }, core.h("span", null, core.h("label", null, this.template.minText), core.h("label", null, this.template.min)), core.h("label", null, this.value), core.h("span", null, core.h("label", null, this.template.maxText), core.h("label", null, this.template.max))), core.h("bce-slider", { onInput: this.handleInput, step: this.template.step, min: this.template.min, max: this.template.max })));
    }
    get el() { return core.getElement(this); }
    static get style() { return "bce-element-slider p{font-weight:500;text-align:center}\@media screen and (min-width:1024px){bce-element-slider p{text-align:left}}bce-element-slider>div.top{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}bce-element-slider>div.top>span{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}bce-element-slider>div.top>span:first-child label{margin:5px auto 5px 5px}bce-element-slider>div.top>span:nth-child(2) label{margin:5px 5px 5px auto}"; }
};

exports.bce_element_slider = BceElementSlider;
