import { r as registerInstance, h, g as getElement } from './core-095fd691.js';
var BceSlider = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        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 = function () {
            return _this.max < _this.min
                ? _this.min
                : (_this.max - _this.min) / 2 + _this.min;
        };
        this.handleChange = function (event) {
            var newValue = event.target.value;
            _this.setFillWidth(newValue);
            _this.value = newValue;
        };
    }
    class_1.prototype.componentDidLoad = function () {
        this.value = this.value || this.defaultValue();
        this.setFillWidth(this.value);
    };
    class_1.prototype.setFillWidth = function (newValue) {
        var step = (100 / (this.max - this.min)) * this.step;
        var width = newValue * step - step * this.min;
        this.el.style.setProperty("--fill-width", width + "%");
    };
    class_1.prototype.render = function () {
        return [
            h("input", { onInput: this.handleChange, type: "range", step: this.step, min: this.min, max: this.max, value: this.value })
        ];
    };
    Object.defineProperty(class_1.prototype, "el", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { 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)}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
export { BceSlider as bce_slider };
