import { r as registerInstance, h, g as getElement } from './core-095fd691.js';

const BceSlider = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.min = 0;
        this.max = 10;
        // @Prop({ reflect: true })
        // public initialValue: number | undefined = undefined;
        this.step = 1;
        // todo
        this.disabled = false;
        this.discrete = false;
        // todo
        this.value = undefined;
        this.defaultValue = () => {
            return this.max < this.min
                ? this.min
                : (this.max - this.min) / 2 + this.min;
        };
        this.handleChange = (event) => {
            const newValue = event.target.value;
            this.setFillWidth(newValue);
            this.value = newValue;
        };
    }
    componentDidLoad() {
        this.value = this.value || this.defaultValue();
        this.setFillWidth(this.value);
    }
    setFillWidth(newValue) {
        const step = (100 / (this.max - this.min)) * this.step;
        const width = newValue * step - step * this.min;
        this.el.style.setProperty("--fill-width", `${width}%`);
    }
    render() {
        return [
            h("input", { onInput: this.handleChange, type: "range", step: this.step, min: this.min, max: this.max, value: this.value })
        ];
    }
    get el() { return getElement(this); }
    static get style() { return "bce-slider{--bce-color-l:var(--bce-color-primary-l);--bce-color-n:var(--bce-color-primary-n);--bce-color-d:var(--bce-color-primary-d);--bce-color-t:var(--bce-color-primary-t);--fill-width:0;position:relative;width:100%;height:100%}bce-slider input[type=range]{outline:0;border:0;border-radius:20px;width:100%;-webkit-transition:-webkit-box-shadow .2s ease-in-out;transition:-webkit-box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out,-webkit-box-shadow .2s ease-in-out}\@media screen and (-webkit-min-device-pixel-ratio:0){bce-slider input[type=range]{height:5px;-webkit-appearance:none;background:-webkit-gradient(linear,left top,right top,from(var(--bce-color-n)),color-stop(0,var(--bce-color-light-d)));background:linear-gradient(90deg,var(--bce-color-n) var(--fill-width),var(--bce-color-light-d) 0)}bce-slider input[type=range]::-webkit-slider-runnable-track{height:20px;-webkit-appearance:none}bce-slider input[type=range]::-webkit-slider-thumb{position:relative;-webkit-appearance:none;margin-top:-1px;width:20px;height:20px;background:var(--bce-color-n);border-radius:50%}}bce-slider input[type=range]::-moz-range-progress{background-color:var(--bce-color-n)}bce-slider input[type=range]::-moz-range-track{background-color:var(--bce-color-light-d)}bce-slider input[type=range]::-ms-fill-lower{background-color:var(--bce-color-n)}bce-slider input[type=range]::-ms-fill-upper{background-color:var(--bce-color-light-d)}"; }
};

export { BceSlider as bce_slider };
