import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { i as isNil } from './index-zWZxKBfo.js';
import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
import { s as stopEventBubbling } from './form-input-DYvzaBlM.js';
import { n as debounceEvent } from './helpers-BNj87EbG.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.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:0}.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:none;box-shadow:none;border:3px solid var(--bal-color-white);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{height:1.5rem;width:1.5rem;background:var(--bal-color-white);border:4px solid var(--bal-color-primary);-webkit-box-shadow:0 0 0 .75rem rgba(255,255,255,.3);box-shadow:0 0 0 .75rem rgba(255,255,255,.3);outline:none;position:relative}.bal-input-slider__input__native:focus-visible::-moz-range-thumb{height:1.5rem;width:1.5rem;background:var(--bal-color-white);border:4px solid var(--bal-color-primary);box-shadow:0 0 0 .75rem rgba(255,255,255,.3);outline:none;position:relative}.bal-input-slider__input__native::-moz-range-track{cursor:pointer;box-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:none;border:3px solid var(--bal-color-white);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: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:none}.bal-input-slider__input__native::-ms-fill-upper{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-thumb{box-shadow:none;border:3px solid var(--bal-color-white);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) {
        registerInstance(this, hostRef);
        this.balInput = createEvent(this, "balInput");
        this.balBlur = createEvent(this, "balBlur");
        this.balKeyPress = createEvent(this, "balKeyPress");
        this.balFocus = createEvent(this, "balFocus");
        this.balChange = createEvent(this, "balChange");
        this.inputId = `bal-input-slider-${inputSliderIds++}`;
        this.didInit = false;
        this.hasFocus = false;
        this.initialValue = '';
        this.ariaForm = defaultBalAriaForm;
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * The step size. 0 means no steps.
         */
        this.step = 0;
        /**
         * Min value of the model.
         */
        this.min = 0;
        /**
         * Max value of the model.
         */
        this.max = 100;
        /**
         * If `true` the component gets a invalid style.
         */
        this.invalid = false;
        /**
         * The tabindex of the control.
         */
        this.balTabindex = 0;
        /**
         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
         */
        this.disabled = false;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = false;
        /**
         * If `true`, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * If `true`, small ticks for the steps are shown.
         */
        this.hasTicks = false;
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
         */
        this.debounce = 0;
        /**
         * The value of the input.
         */
        this.value = '';
        /**
         * If `true`, in Angular reactive forms the control will not be set invalid
         */
        this.autoInvalidOff = false;
        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);
        };
    }
    debounceChanged() {
        this.balChange = debounceEvent(this.balChange, this.debounce);
    }
    listenOnClick(ev) {
        if ((this.disabled || this.readonly) && ev.target && ev.target === this.el) {
            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);
        }
    }
    /**
     * Update the native input element when the value changes
     */
    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 (!isNil(this.value) && this.value !== '') {
            this.valueChanged(this.value, undefined);
        }
    }
    /**
     * Sets focus on the native `input` in `bal-input`. Use this method instead of the global
     * `input.focus()`.
     */
    async setFocus() {
        clearTimeout(this.setFocusTimer);
        this.setFocusTimer = setTimeout(() => {
            if (this.nativeInput) {
                this.nativeInput.focus();
            }
        });
    }
    /**
     * Returns the native `<input>` element used under the hood.
     */
    getInputElement() {
        return Promise.resolve(this.nativeInput);
    }
    /**
     * @internal
     */
    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.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 (h(Host, { key: 'ad6fdbbb33727000cb6ff16e7daf168c6d35602b', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled || this.readonly) }, h("div", { key: '0c3ec1cb883d285ef62d06c47b9a8ead7198e235', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '0c80561dffd1ecbf2ace34f268270dbd0fdd8fe9', class: Object.assign({}, backgroundUpperEl.class()), style: {
                width: this.cssWidth(),
            } }, h("div", { key: '7ae875637c76f930b34acef9c0b1063a14c11110', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: 'd767b75c90733f309a6f2d11eadc22b4c8d8a579', class: Object.assign({}, backgroundLowerEl.class()), style: {
                width: this.cssWidth(true),
            } }, h("div", { key: '414cc007b301fa2f2775c40d4134295797a970b9', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: '8e474c378f92ffe8df9d65a3063114fe3833159e', class: Object.assign({}, inputEl.class()) }, h("div", { key: '811d58e16f4a261065b3f4ad446cc802d4e32c30', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: 'fb5781181cbba5f4438b70429a3d53a6aabdada0', 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": ariaBooleanToString(this.disabled), "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" }), h("div", { key: '48e05291bc6fb797d06bb0d022ac47d4b1f6fc3f', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: '0fd9bcddf9a98ac5c8706c6e7d33d1d0161dd8ed', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "debounce": ["debounceChanged"],
        "value": ["valueChanged"]
    }; }
};
let inputSliderIds = 0;
InputSlider.style = balInputSliderCss;

export { InputSlider as bal_input_slider };
