'use strict';

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

const index = require('./index-7446596e.js');
const index$1 = require('./index-e6a233be.js');
const helpers = require('./helpers-46584747.js');
const formInput = require('./form-input-52cab7f2.js');
const bem = require('./bem-81bc6a2d.js');
const form = require('./form-2279fb2f.js');
require('./browser-9ac97263.js');
require('./icons.constant-f1294def.js');
require('./config.utils-aef60f18.js');

const balInputSliderCss = ".bal-input-slider{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text);-ms-flex-direction:column;flex-direction:column;min-height:3rem}.bal-input-slider__background{position:absolute;top:1rem;left:0px;right:0px;z-index:0;border-radius:var(--bal-radius-rounded);background:var(--bal-color-green);height:1rem;width:100%;overflow:hidden}.bal-input-slider__background__upper,.bal-input-slider__background__lower{position:absolute;top:0;width:50%;margin:0;cursor:pointer}.bal-input-slider__background__upper>div,.bal-input-slider__background__lower>div{height:1rem;border-radius:var(--bal-radius-none)}.bal-input-slider__background__upper{right:0px}.bal-input-slider__background__upper>div{background:var(--bal-color-green);border-top-right-radius:var(--bal-radius-rounded);border-bottom-right-radius:var(--bal-radius-rounded)}.bal-input-slider__background__lower{left:0px}.bal-input-slider__background__lower>div{background:var(--bal-color-green-5);border-top-left-radius:var(--bal-radius-rounded);border-bottom-left-radius:var(--bal-radius-rounded)}.bal-input-slider__background--disabled{cursor:default;pointer-events:none;background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__upper__inner{background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__lower__inner{background:var(--bal-color-grey-4)}.bal-input-slider__input{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;min-height:3rem}.bal-input-slider__input__native{-webkit-appearance:none;margin:0;background:rgba(0,0,0,0);z-index:1;outline:none;min-width:12.5rem;width:100%}.bal-input-slider__input__native::-webkit-slider-runnable-track{width:100%;cursor:pointer;border:none}.bal-input-slider__input__native::-webkit-slider-thumb{-webkit-box-shadow:var(--bal-shadow-none);box-shadow:var(--bal-shadow-none);border:3px solid var(--bal-color-primary-inverted);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none}.bal-input-slider__input__native:focus-visible{outline:none}.bal-input-slider__input__native:focus-visible::-webkit-slider-thumb{background:var(--bal-color-primary);border:2px solid var(--bal-color-primary)}.bal-input-slider__input__native::-moz-range-track{cursor:pointer;box-shadow:var(--bal-shadow-none);background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-moz-range-thumb{box-shadow:var(--bal-shadow-none);border:3px solid var(--bal-color-primary-inverted);height:.625rem;width:.625rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer}.bal-input-slider__input__native::-ms-track{cursor:pointer;box-shadow:var(--bal-shadow-none);background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-ms-fill-lower{background:rgba(0,0,0,0);border:none;box-shadow:var(--bal-shadow-none)}.bal-input-slider__input__native::-ms-fill-upper{background:rgba(0,0,0,0);border:none;box-shadow:var(--bal-shadow-none)}.bal-input-slider__input__native::-ms-thumb{box-shadow:var(--bal-shadow-none);border:3px solid var(--bal-color-primary-inverted);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none;z-index:2}.bal-input-slider__input__native:focus::-ms-fill-lower{background:rgba(0,0,0,0)}.bal-input-slider__input__native:focus::-ms-fill-upper{background:rgba(0,0,0,0)}.bal-input-slider__input__native--disabled::-webkit-slider-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-ms-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-moz-range-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__steps{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;min-height:.5rem;margin:-0.625rem .5rem;-ms-flex-pack:justify;justify-content:space-between}.bal-input-slider__steps__item{width:.125rem;border-radius:var(--bal-radius-rounded);background-color:var(--bal-color-primary)}.bal-input-slider__steps__item--disabled{background:var(--bal-color-grey-4)}@-moz-document url-prefix(){.bal-input-slider__steps{margin:0 .5rem !important}}";

const InputSlider = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.balInput = index.createEvent(this, "balInput", 7);
        this.balBlur = index.createEvent(this, "balBlur", 7);
        this.balKeyPress = index.createEvent(this, "balKeyPress", 7);
        this.balFocus = index.createEvent(this, "balFocus", 7);
        this.balChange = index.createEvent(this, "balChange", 7);
        this.inputId = `bal-input-slider-${inputSliderIds++}`;
        this.didInit = false;
        this.hasFocus = false;
        this.initialValue = '';
        this.onInput = (ev) => {
            const input = ev.target;
            if (input) {
                this.value = input.value || '';
            }
            this.balInput.emit(this.value);
        };
        this.handleClick = (ev) => {
            if (this.disabled || this.readonly) {
                ev.preventDefault();
                ev.stopPropagation();
            }
        };
        this.onFocus = (ev) => {
            this.hasFocus = true;
            this.balFocus.emit(ev);
        };
        this.onBlur = (ev) => {
            this.hasFocus = false;
            this.balBlur.emit(ev);
            this.balChange.emit(this.value);
        };
        this.ariaForm = form.defaultBalAriaForm;
        this.name = this.inputId;
        this.step = 0;
        this.min = 0;
        this.max = 100;
        this.invalid = false;
        this.balTabindex = 0;
        this.disabled = false;
        this.readonly = false;
        this.required = false;
        this.hasTicks = false;
        this.debounce = 0;
        this.value = '';
    }
    debounceChanged() {
        this.balChange = helpers.debounceEvent(this.balChange, this.debounce);
    }
    listenOnClick(ev) {
        if ((this.disabled || this.readonly) && ev.target && ev.target === this.el) {
            formInput.stopEventBubbling(ev);
        }
    }
    resetHandler(ev) {
        const formElement = ev.target;
        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
            this.value = this.initialValue;
            clearTimeout(this.resetHandlerTimer);
            this.resetHandlerTimer = setTimeout(() => {
                if (this.nativeInput) {
                    this.nativeInput.value = this.initialValue;
                }
            }, 0);
        }
    }
    valueChanged(newValue, oldValue) {
        if (this.didInit && !this.hasFocus && newValue !== oldValue) {
            this.balChange.emit(this.value);
        }
    }
    connectedCallback() {
        this.debounceChanged();
        this.initialValue = this.value;
    }
    componentDidLoad() {
        this.didInit = true;
        if (!index$1.lodash_isnil(this.value) && this.value !== '') {
            this.valueChanged(this.value, undefined);
        }
    }
    async setFocus() {
        clearTimeout(this.setFocusTimer);
        this.setFocusTimer = setTimeout(() => {
            if (this.nativeInput) {
                this.nativeInput.focus();
            }
        });
    }
    getInputElement() {
        return Promise.resolve(this.nativeInput);
    }
    async setAriaForm(ariaForm) {
        this.ariaForm = Object.assign({}, ariaForm);
    }
    get numberOfSteps() {
        const max = this.max - this.min;
        if (this.step <= 0 || this.step >= max) {
            return 0;
        }
        return ~~(max / this.step) + 1;
    }
    cssWidth(isUpper = false) {
        const a = this.value === '' ? 0 : Math.round(Number(this.value) / this.step) * this.step;
        const b = (100 / this.max) * a;
        if (!isUpper) {
            return `${100 - b}%`;
        }
        return `${b}%`;
    }
    getNumberOfSteps() {
        const steps = [];
        for (let step = 0; step < this.numberOfSteps; step++) {
            steps.push(step);
        }
        return steps;
    }
    render() {
        const block = bem.BEM.block('input-slider');
        const backgroundEl = block.element('background');
        const backgroundUpperEl = backgroundEl.element('upper');
        const backgroundUpperInnerEl = backgroundUpperEl.element('inner');
        const backgroundLowerEl = backgroundEl.element('lower');
        const backgroundLowerInnerEl = backgroundLowerEl.element('inner');
        const inputEl = block.element('input');
        const inputNativeEl = inputEl.element('native');
        const inputValueEl = inputEl.element('value');
        const inputValueLeftEl = inputValueEl.modifier('left');
        const inputValueRightEl = inputValueEl.modifier('right');
        const stepsEl = block.element('steps');
        const stepsItemEl = stepsEl.element('item');
        return (index.h(index.Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, index.h("div", { class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, index.h("div", { class: Object.assign({}, backgroundUpperEl.class()), style: {
                width: this.cssWidth(),
            } }, index.h("div", { class: Object.assign({}, backgroundUpperInnerEl.class()) })), index.h("div", { class: Object.assign({}, backgroundLowerEl.class()), style: {
                width: this.cssWidth(true),
            } }, index.h("div", { class: Object.assign({}, backgroundLowerInnerEl.class()) }))), index.h("div", { class: Object.assign({}, inputEl.class()) }, index.h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), index.h("input", { type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), index.h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), index.h("div", { class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (index.h("div", { class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "debounce": ["debounceChanged"],
        "value": ["valueChanged"]
    }; }
};
let inputSliderIds = 0;
InputSlider.style = balInputSliderCss;

exports.bal_input_slider = InputSlider;
