import { h, Host } from "@stencil/core";
export class BceElementSlider {
    constructor() {
        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 (h(Host, null,
            h("p", null, this.template.question),
            h("div", { class: "top" },
                h("span", null,
                    h("label", null, this.template.minText),
                    h("label", null, this.template.min)),
                h("label", null, this.value),
                h("span", null,
                    h("label", null, this.template.maxText),
                    h("label", null, this.template.max))),
            h("bce-slider", { onInput: this.handleInput, step: this.template.step, "initial-value": this.value, min: this.template.min, max: this.template.max })));
    }
    static get is() { return "bce-element-slider"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-slider.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-slider.css"]
    }; }
    static get properties() { return {
        "template": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Block.ElementSlider.Template",
                "resolved": "undefined | { readonly question: string; readonly required: boolean; readonly min: number; readonly max: number; readonly step: number; readonly minText: string; readonly maxText: string; }",
                "references": {
                    "Block": {
                        "location": "import",
                        "path": "../../models/block"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "value": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get elementRef() { return "el"; }
}
