'use strict';

var index = require('./index-BjHIBY-I.js');
var randomString = require('./random-string-BTzDB2ee.js');

/**
 *
 * @param value
 */
function getPercentageClass(value) {
    const tenPercent = 0.1;
    const twentyPercent = 0.2;
    const thirtyPercent = 0.3;
    const fortyPercent = 0.4;
    const fiftyPercent = 0.5;
    const sixtyPercent = 0.6;
    const seventyPercent = 0.7;
    const eightyPercent = 0.8;
    const ninetyPercent = 0.9;
    if (value === 0) {
        return 'percent-0';
    }
    if (value < tenPercent) {
        return 'percent-0-10';
    }
    if (value < twentyPercent) {
        return 'percent-10-20';
    }
    if (value < thirtyPercent) {
        return 'percent-20-30';
    }
    if (value < fortyPercent) {
        return 'percent-30-40';
    }
    if (value < fiftyPercent) {
        return 'percent-40-50';
    }
    if (value < sixtyPercent) {
        return 'percent-50-60';
    }
    if (value < seventyPercent) {
        return 'percent-60-70';
    }
    if (value < eightyPercent) {
        return 'percent-70-80';
    }
    if (value < ninetyPercent) {
        return 'percent-80-90';
    }
    return 'percent-90-100';
}

const sliderCss = () => `@charset "UTF-8";:host([displays-percentage-colors].percent-0){--lime-primary-color:var(--color-percent--0)}:host([displays-percentage-colors].percent-0-10){--lime-primary-color:var(--color-percent--0to10)}:host([displays-percentage-colors].percent-10-20){--lime-primary-color:var(--color-percent--10to20)}:host([displays-percentage-colors].percent-20-30){--lime-primary-color:var(--color-percent--20to30)}:host([displays-percentage-colors].percent-30-40){--lime-primary-color:var(--color-percent--30to40)}:host([displays-percentage-colors].percent-40-50){--lime-primary-color:var(--color-percent--40to50)}:host([displays-percentage-colors].percent-50-60){--lime-primary-color:var(--color-percent--50to60)}:host([displays-percentage-colors].percent-60-70){--lime-primary-color:var(--color-percent--60to70)}:host([displays-percentage-colors].percent-70-80){--lime-primary-color:var(--color-percent--70to80)}:host([displays-percentage-colors].percent-80-90){--lime-primary-color:var(--color-percent--80to90)}:host([displays-percentage-colors].percent-90-100){--lime-primary-color:var(--color-percent--90to100)}:host([displays-percentage-colors].percent-30-40) .indicator,:host([displays-percentage-colors].percent-40-50) .indicator,:host([displays-percentage-colors].percent-70-80) .indicator{color:rgb(var(--color-gray-darker))}:host([displays-percentage-colors].percent-50-60) .indicator,:host([displays-percentage-colors].percent-60-70) .indicator{color:rgb(var(--color-gray-dark))}:host([readonly]:not([readonly=false])) input[type=range]{cursor:default}:host([readonly]:not([readonly=false])) .track,:host([readonly]:not([readonly=false])) .active,:host([readonly]:not([readonly=false])) .indicator{height:0.75rem}:host([readonly]:not([readonly=false])) .indicator{box-shadow:none}:host([readonly]:not([readonly=false])) .knob{opacity:0}:host([readonly]:not([readonly=false])) .active{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.thumb{position:absolute;left:calc(var(--slider-fraction) * 100%);top:0;bottom:0;width:0;z-index:1}.knob{transition:border-color 0.5s ease;position:absolute;top:50%;left:0;transform:translate3d(-50%, -50%, 0);width:1.25rem;height:1.25rem;border-radius:50%;border:0.5rem solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color));background-color:rgb(var(--contrast-100))}.knob:before,.knob:after{transition:all 0.2s ease 0.2s;content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border:0.375rem solid transparent}:host([disabled]:not([disabled=false])) .knob:before,:host([disabled]:not([disabled=false])) .knob:after{content:none}.knob:before{opacity:calc(var(--slider-fraction) * 100);left:-1rem;transform:rotate(90deg)}.knob:after{opacity:calc((1 - var(--slider-fraction)) * 100);right:-1rem;transform:rotate(-90deg)}.slider:hover .knob,.slider:has(input[type=range]:active) .knob,.slider:has(input[type=range]:focus) .knob{box-shadow:var(--button-shadow-normal)}.slider:hover .knob:before,.slider:has(input[type=range]:active) .knob:before,.slider:has(input[type=range]:focus) .knob:before{left:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.slider:hover .knob:after,.slider:has(input[type=range]:active) .knob:after,.slider:has(input[type=range]:focus) .knob:after{right:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.indicator{user-select:none;position:absolute;left:0;top:50%;z-index:1;transform:translate3d(-50%, -50%, 0);transform-origin:bottom center;transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.5s ease;border-radius:1.25rem;padding:0 0.375rem;height:1.25rem;display:flex;align-items:center;white-space:nowrap;color:rgb(var(--color-white));font-size:0.6875rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));box-shadow:var(--button-shadow-normal)}:host(:not([disabled]):not([readonly])) input[type=range]:active~.thumb .indicator,:host(:not([disabled]):not([readonly])) input[type=range]:focus~.thumb .indicator{transform:translate3d(-50%, calc(-100% - 0.75rem), 0) scale(1.25);box-shadow:var(--shadow-depth-16)}*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0}:host(limel-slider){box-sizing:border-box;isolation:isolate;position:relative;display:flex;flex-direction:column}:host(limel-slider:not([invalid]):not([invalid=true])) .limel-notched-outline,:host(limel-slider[disabled]:not([disabled=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:flex;flex-direction:column;width:100%;padding:0 0.25rem}.slider{position:relative;height:2.5rem;margin:0 0.75rem}input[type=range]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0;appearance:none}:host([disabled]:not([disabled=false])) input[type=range]{cursor:not-allowed}:host([disabled]:not([disabled=false])) .track .active{opacity:0.5}:host([disabled]:not([disabled=false])) .indicator{border-radius:0.125rem;box-shadow:var(--button-shadow-pressed)}.track{transition:background-color 0.5s ease;display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:0.5rem;border-radius:1rem;background-color:rgba(var(--contrast-700), 0.6)}.track:before,.track:after{content:"";display:inline-block;position:absolute;top:0;bottom:0;margin:auto;width:0.375rem;height:0.375rem;border-radius:50%;background-color:rgba(var(--contrast-700), 0.6)}.track:before{left:-0.75rem}.track:after{right:-0.75rem}.track .active{transition:background-color 0.5s ease;position:absolute;height:100%;width:calc(var(--slider-fraction) * 100%);border-radius:inherit;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.step-dot{transform:translateX(-50%);border-radius:50%;height:0.25rem;width:0.25rem;background-color:rgb(var(--contrast-100), 0.6)}.step-dot:first-of-type,.step-dot:last-of-type{opacity:0}.range-labels{display:flex;justify-content:space-between;margin-top:-0.75rem;width:100%}.range-labels .min,.range-labels .max{line-height:1;font-size:0.75rem;color:var(--limel-notched-outline-label-color, rgb(var(--contrast-1200)))}:host(limel-slider:focus),:host(limel-slider:focus-visible),:host(limel-slider:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-slider){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-slider:focus) limel-helper-line,:host(limel-slider:focus-visible) limel-helper-line,:host(limel-slider:focus-within) limel-helper-line,:host(limel-slider:hover) limel-helper-line{will-change:grid-template-rows}`;

const DEFAULT_FACTOR = 1;
const DEFAULT_MAX_VALUE = 100;
const DEFAULT_MIN_VALUE = 0;
const MAX_VISIBLE_STEP_DOTS = 20;
const Slider = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        /**
         * Disables the slider when `true`,
         * and visually shows that the field is editable but disabled.
         * This tells the users that if certain requirements are met,
         * the slider may become interactable.
         */
        this.disabled = false;
        /**
         * Disables the slider when `true`. This visualizes the slider slightly differently.
         * But shows no visual sign indicating that the slider field
         * is disabled or can ever become interactable.
         */
        this.readonly = false;
        /**
         * Default value: 1.
         * The factor that the properties `value`, `valuemax`, `valuemin`, and
         * `step` are multiplied by. On `change` divides the value by the factor,
         * so the original format stays the same.
         */
        this.factor = DEFAULT_FACTOR;
        /**
         * Set to `true` to indicate that the slider is required.
         */
        this.required = false;
        /**
         * Set to `true` to indicate that the current value of the slider is invalid.
         */
        this.invalid = false;
        /**
         * Set to `true` to display percentage-based colors on the slider.
         * The colors change in intervals of 10% as the value changes,
         * creating a color spectrum from red (low) → orange → yellow → green → teal (high).
         */
        this.displaysPercentageColors = false;
        /**
         * Unit to display next to the value
         */
        this.unit = '';
        /**
         * The maximum value allowed
         */
        this.valuemax = DEFAULT_MAX_VALUE;
        /**
         * The minimum value allowed
         */
        this.valuemin = DEFAULT_MIN_VALUE;
        this.renderStepDots = (min, max) => {
            if (!this.step) {
                return;
            }
            const step = this.multiplyByFactor(this.step);
            const count = Math.floor((max - min) / step) + 1;
            if (count > MAX_VISIBLE_STEP_DOTS) {
                return;
            }
            return Array.from({ length: count }, () => index.h("span", { class: "step-dot" }));
        };
        this.renderHelperLine = () => {
            if (!this.helperText) {
                return;
            }
            return (index.h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
        };
        this.handleInput = (event) => {
            event.stopPropagation();
            const input = event.target;
            const value = Number(input.value);
            this.displayValue = value;
            this.setPercentageClass(value / this.factor);
        };
        this.handleChange = (event) => {
            event.stopPropagation();
            const input = event.target;
            let value = Number(input.value);
            const step = this.multiplyByFactor(this.step);
            if (!this.isMultipleOfStep(value, step)) {
                value = this.roundToStep(value, step);
            }
            this.change.emit(value / this.factor);
        };
        this.getContainerClassList = () => {
            if (!this.percentageClass) {
                return {};
            }
            return {
                [this.percentageClass]: true,
            };
        };
        this.multiplyByFactor = (value) => {
            return Math.round(value * this.factor);
        };
        this.getValue = () => {
            let value = this.value;
            if (!Number.isFinite(value)) {
                value = this.valuemin;
            }
            return value;
        };
        this.getFraction = () => {
            const min = this.multiplyByFactor(this.valuemin);
            const max = this.multiplyByFactor(this.valuemax);
            if (max === min) {
                return 0;
            }
            return Math.max(0, Math.min(1, (this.displayValue - min) / (max - min)));
        };
        this.setPercentageClass = (value) => {
            this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
        };
        this.isMultipleOfStep = (value, step) => {
            if (!step) {
                return true;
            }
            return value % step === 0;
        };
        this.roundToStep = (value, step) => {
            return Math.round(value / step) * step;
        };
        this.labelId = randomString.createRandomString();
        this.helperTextId = randomString.createRandomString();
    }
    componentWillLoad() {
        this.displayValue = this.multiplyByFactor(this.getValue());
        this.setPercentageClass(this.getValue());
    }
    render() {
        const min = this.multiplyByFactor(this.valuemin);
        const max = this.multiplyByFactor(this.valuemax);
        const fraction = this.getFraction();
        const inputProps = {};
        if (this.step) {
            inputProps.step = this.multiplyByFactor(this.step);
        }
        if (this.disabled || this.readonly) {
            inputProps.disabled = true;
        }
        return (index.h(index.Host, { key: '00987f40cc3a4a7d47a5efec7257acbfcde2df06', class: this.getContainerClassList() }, index.h("limel-notched-outline", { key: '90d73bb40733a3bd85b0c7d6fb0420f4b48de9e9', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, index.h("div", { key: 'd35d56c074af9c68663a7f2c475794f82cc2f924', slot: "content" }, index.h("div", { key: '28367643903a7c888eb4c381e498d179afb2374a', class: "slider", style: { '--slider-fraction': `${fraction}` } }, index.h("input", Object.assign({ key: '9e2f5519e946f39444b21c893fa7c45db769b1d6', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
                ? this.helperTextId
                : undefined, onInput: this.handleInput, onChange: this.handleChange }, inputProps)), index.h("div", { key: '58525aba7ff932188e1395a71f43a5b3a448cfcc', class: "track" }, index.h("div", { key: '4e4c6f0eb6fea869a9e204c79adb8ca2c481f566', class: "active" }), this.renderStepDots(min, max)), index.h("div", { key: '326cefe13667b61450ed270fee96ec6bca479fa6', class: "thumb" }, index.h("div", { key: '716621ccf495c5f9ec27758b62d5f15b9995cf06', class: "knob" }), index.h("div", { key: '110c06b6803a4120ee1c613880b2ea8243702c89', class: "indicator", "aria-hidden": "true" }, this.displayValue))), index.h("div", { key: '0c82e7f841b39be2380a450898c231c37282e502', class: "range-labels" }, index.h("span", { key: '40088f1c268470bc585f5dbcf92f479641a6c2e0', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { key: '8375f191def455fb3967209d18d839ada677c477', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
    }
    watchValue() {
        this.displayValue = this.multiplyByFactor(this.getValue());
        this.setPercentageClass(this.getValue());
    }
    static get watchers() { return {
        "value": [{
                "watchValue": 0
            }]
    }; }
};
Slider.style = sliderCss();

exports.limel_slider = Slider;
