import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-f2e5998d.js';
import { c as classnames } from './index-713f92a5.js';
import { e as emitEvent } from './utils-524c237e.js';
import { s as statusNote } from './status-note-d227f142.js';

const sliderCss = ":host{--border:1px solid var(--scl-color-grey-60);--background-bar:var(--scl-color-primary);--border-color-thumb:var(--scl-color-grey-60);--box-shadow-thumb:var(--scl-shadow-level-0);--border-color-thumb-hover:var(--scl-color-primary-hover);--border-color-thumb-active:var(--scl-color-primary-active);--box-shadow-thumb-focus:0 0 0 var(--scl-spacing-2) var(--scl-color-focus);--color-display-value:var(--scl-color-grey-60);--font-weight-display-value:var(--scl-font-weight-bold);--font-size-display-value:var(--scl-font-size-12);--background-track:var(--scl-color-grey-50);--background-bar-disabled:var(--scl-color-grey-50);--color-label-disabled:var(--scl-color-grey-50)}.slider{width:100%;display:block;align-items:center}.slider .slider__track-wrapper{display:flex;align-items:center}.slider .slider__track{width:303px;border:var(--border);height:6px;margin:16px 0;display:flex;position:relative;box-sizing:border-box;align-items:center;border-radius:100px}.slider .slider__bar{height:6px;z-index:-1;position:absolute;border-radius:100px;background-color:var(--background-bar)}.slider .slider__thumb-wrapper{width:32px;height:32px;display:flex;z-index:1;position:absolute;text-align:center;align-items:center;margin-left:-16px;justify-content:center;background-color:transparent}.slider .slider__thumb{width:16px;border:1px solid;height:16px;outline:none;box-sizing:border-box;border-color:var(--border-color-thumb);border-radius:50%;background-color:#fff;box-shadow:var(--scl-shadow-level-0)}.slider .slider__display-value{color:var(--color-display-value);margin-left:24px;font-weight:var(--font-weight-display-value);font-size:var(--font-size-display-value)}.slider .slider__thumb:hover{border-color:var(--border-color-thumb-hover)}.slider .slider__thumb:active{border-color:var(--border-color-thumb-active)}.slider .slider__thumb:focus{box-shadow:var(--box-shadow-thumb-focus)}.slider .slider__thumb-wrapper:hover{cursor:grab}.slider .slider__thumb-wrapper:active{cursor:grabbing}.slider--track-small .slider__track{border:none;height:1px;border-top:1px solid transparent;background-color:var(--background-track)}.slider--track-small .slider__bar{border:1px solid transparent;height:3px;z-index:1;box-sizing:border-box}.slider--thumb-large .slider__thumb{width:24px;height:24px}.slider--disabled .slider__track-wrapper{cursor:not-allowed}.slider--disabled .slider__bar{background-color:var(--background-bar-disabled)}.slider--disabled .slider__thumb{display:none}.slider--disabled .slider__label{color:var(--color-label-disabled)}.slider--disabled .slider__thumb-wrapper:hover{cursor:not-allowed}";

let i = 0;
const Slider = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scaleChange = createEvent(this, "scale-change", 7);
    this.scaleChangeLegacy = createEvent(this, "scaleChange", 7);
    this.scaleInput = createEvent(this, "scale-input", 7);
    this.scaleInputLegacy = createEvent(this, "scaleInput", 7);
    /** t(optional) he minimal value of the slider */
    this.min = 0;
    /** (optional) the maximal value of the slider */
    this.max = 100;
    /** (optional) the step size to increase or decrease when dragging slider */
    this.step = 1;
    /** (optional) slider display value */
    this.showValue = true;
    /** (optional) slider value unit */
    this.unit = '%';
    /** (optional) number of decimal places */
    this.decimals = 0;
    /** (optional) disabled  */
    this.disabled = false;
    /** (optional) smaller track */
    this.trackSmall = false;
    /** (optional) larger thumb */
    this.thumbLarge = false;
    this.onButtonDown = () => {
      if (this.disabled) {
        return;
      }
      this.onDragStart();
      this.addGlobalListeners();
    };
    this.onKeyDown = (event) => {
      let steps = 0;
      if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
        steps = event.key === 'ArrowRight' ? this.step : -this.step;
      }
      if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
        steps = event.key === 'ArrowUp' ? this.step * 10 : -this.step * 10;
      }
      this.setValue(this.value + steps);
    };
    this.onDragStart = () => {
      this.dragging = true;
      this.offsetLeft = this.sliderTrack.getBoundingClientRect().left;
    };
    this.onDragging = (event) => {
      const { dragging, offsetLeft } = this;
      if (dragging) {
        const currentX = this.handleTouchEvent(event).clientX;
        const position = ((currentX - offsetLeft) / this.sliderTrack.offsetWidth) * 100;
        const nextValue = (position * (this.max - this.min)) / 100 + this.min;
        // https://stackoverflow.com/q/14627566
        const roundedNextValue = Math.ceil(nextValue / this.step) * this.step;
        this.setValue(roundedNextValue);
      }
    };
    this.onDragEnd = () => {
      this.dragging = false;
      emitEvent(this, 'scaleChange', this.value);
      this.removeGlobalListeners();
    };
    this.setValue = (nextValue) => {
      this.value = this.clamp(nextValue);
      emitEvent(this, 'scaleInput', this.value);
    };
    this.setPosition = () => {
      if (!this.value) {
        this.position = 0;
        return;
      }
      const clampedValue = this.clamp(this.value);
      // https://stackoverflow.com/a/25835683
      this.position = ((clampedValue - this.min) * 100) / (this.max - this.min);
    };
    this.clamp = (val) => {
      return Math.min(Math.max(val, this.min), this.max);
    };
    this.onDragging = this.onDragging.bind(this);
    this.onDragEnd = this.onDragEnd.bind(this);
  }
  componentWillLoad() {
    if (this.sliderId == null) {
      this.sliderId = 'slider-' + i++;
    }
    this.setPosition();
  }
  disconnectedCallback() {
    this.removeGlobalListeners();
  }
  componentDidLoad() {
    if (this.customColor !== undefined) {
      statusNote({
        tag: 'deprecated',
        message: `Property "customColor" is deprecated. 
          Please use css variable "--background-bar" to set the slider-bar color;
          e.g. <scale-slider value="20" style="--background-bar: green"></scale-slider>`,
        type: 'warn',
        source: this.hostElement,
      });
    }
  }
  handleTouchEvent(event) {
    return event.type.indexOf('touch') === 0 ? event.touches[0] : event;
  }
  handleValueChange() {
    this.setPosition();
  }
  addGlobalListeners() {
    window.addEventListener('mousemove', this.onDragging.bind(this));
    window.addEventListener('mouseup', this.onDragEnd.bind(this));
    window.addEventListener('touchmove', this.onDragging.bind(this));
    window.addEventListener('touchend', this.onDragEnd.bind(this));
  }
  removeGlobalListeners() {
    window.removeEventListener('mousemove', this.onDragging);
    window.removeEventListener('mouseup', this.onDragEnd);
    window.removeEventListener('touchmove', this.onDragging);
    window.removeEventListener('touchend', this.onDragEnd);
  }
  render() {
    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { part: this.getBasePartMap(), class: this.getCssClassMap() }, !!this.label && (h("label", { part: "label", class: "slider__label", id: `${this.sliderId}-label`, htmlFor: this.sliderId }, this.label)), h("div", { part: "track-wrapper", class: "slider__track-wrapper" }, h("div", { part: "track", class: "slider__track", ref: (el) => (this.sliderTrack = el) }, h("div", { part: "bar", class: "slider__bar", style: {
        width: `${this.position}%`,
        backgroundColor: this.customColor
          ? this.customColor
          : this.disabled
            ? `var(--background-bar-disabled)`
            : `var(--background-bar)`,
      } }), h("div", { part: "thumb-wrapper", class: "slider__thumb-wrapper", style: { left: `${this.position}%` }, onMouseDown: this.onButtonDown, onTouchStart: this.onButtonDown }, h("div", { part: "thumb", class: "slider__thumb", tabindex: "0", role: "slider", id: this.sliderId, "aria-valuemin": this.min, "aria-valuenow": this.value, "aria-valuemax": this.max, "aria-valuetext": `${this.value}`, "aria-labelledby": `${this.sliderId}-label`, "aria-orientation": "horizontal", "aria-disabled": this.disabled, onKeyDown: this.onKeyDown }))), h("input", { type: "hidden", value: this.value, name: this.name }), this.showValue && (h("div", { part: "display-value", class: "slider__display-value" }, this.value != null && this.value.toFixed(this.decimals), this.value != null && this.unit))))));
  }
  getBasePartMap() {
    return this.getCssOrBasePartMap('basePart');
  }
  getCssClassMap() {
    return this.getCssOrBasePartMap('css');
  }
  getCssOrBasePartMap(mode) {
    const component = 'slider';
    const prefix = mode === 'basePart' ? '' : `${component}--`;
    return classnames(component, this.disabled && `${prefix}disabled`, this.trackSmall && `${prefix}track-small`, this.thumbLarge && `${prefix}thumb-large`);
  }
  get hostElement() { return getElement(this); }
  static get watchers() { return {
    "value": ["handleValueChange"]
  }; }
};
Slider.style = sliderCss;

export { Slider as scale_slider };
