import { b as a } from "./tslib.es6-CJ7TUrOc.mjs";
import { e as v, R as S } from "./ripple-handlers-_gEIkKpx.mjs";
import { d as f } from "./utils-Dr5MegQq.mjs";
import { S as g, T as r, s as y } from "./mwc-slider.css-CBNgYCJf.mjs";
import { x as o, A as _, e as k } from "./query-assigned-elements-D930kELM.mjs";
import { n as R } from "./property-DJzm_oB9.mjs";
import { t as d } from "./state-B_tK3mBm.mjs";
import { i as u } from "./query-CDOd1Kwm.mjs";
import { o as b } from "./class-map-DPUylGZM.mjs";
import { l as n } from "./if-defined-DGrxuPYz.mjs";
import { o as T } from "./style-map-D2TR7M-D.mjs";
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
class s extends g {
  constructor() {
    super(...arguments), this.valueStart = 0, this.startThumbWithIndicator = !1, this.startThumbTop = !1, this.shouldRenderStartRipple = !1, this.startThumbTransformStyle = "", this.startThumbTransitionStyle = "", this.startThumbCssProperties = {}, this.startRippleHandlers = new S(() => (this.shouldRenderStartRipple = !0, this.startRipple));
  }
  update(t) {
    if (t.has("valueStart") && this.mdcFoundation) {
      this.mdcFoundation.setValueStart(this.valueStart);
      const e = this.mdcFoundation.getValueStart();
      e !== this.valueStart && (this.valueStart = e);
    }
    super.update(t);
  }
  renderRootEl(t) {
    const e = b({
      "mdc-slider--disabled": this.disabled,
      "mdc-slider--discrete": this.discrete
    });
    return o`
    <div
        class="mdc-slider mdc-slider--range ${e}"
        @pointerdown=${this.onPointerdown}
        @pointerup=${this.onPointerup}
        @contextmenu=${this.onContextmenu}>
      ${t}
    </div>`;
  }
  renderStartInput() {
    var t;
    return o`
      <input
          class="mdc-slider__input start"
          type="range"
          step=${this.step}
          min=${this.min}
          max=${this.valueEnd}
          .value=${this.valueStart}
          @change=${this.onStartChange}
          @focus=${this.onStartFocus}
          @blur=${this.onStartBlur}
          ?disabled=${this.disabled}
          aria-label=${n(this.ariaLabel)}
          aria-labelledby=${n(this.ariaLabelledBy)}
          aria-describedby=${n(this.ariaDescribedBy)}
          aria-valuetext=${n((t = this.valueToAriaTextTransform) === null || t === void 0 ? void 0 : t.call(this, this.valueStart))}>
    `;
  }
  renderEndInput() {
    var t;
    return o`
      <input
          class="mdc-slider__input end"
          type="range"
          step=${this.step}
          min=${this.valueStart}
          max=${this.max}
          .value=${this.valueEnd}
          @change=${this.onEndChange.bind(this)}
          @focus=${this.onEndFocus}
          @blur=${this.onEndBlur}
          ?disabled=${this.disabled}
          name=${this.name}
          aria-label=${n(this.ariaLabel)}
          aria-labelledby=${n(this.ariaLabelledBy)}
          aria-describedby=${n(this.ariaDescribedBy)}
          aria-valuetext=${n((t = this.valueToAriaTextTransform) === null || t === void 0 ? void 0 : t.call(this, this.valueEnd))}>
    `;
  }
  renderTrack() {
    const t = T({
      "transform-origin": this.trackTransformOriginStyle,
      left: this.trackLeftStyle ? this.trackLeftStyle : getComputedStyle(this).direction === "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}%)`,
      right: this.trackRightStyle ? this.trackRightStyle : getComputedStyle(this).direction !== "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}%)`,
      "-webkit-transform": `scaleX(${(this.valueEnd - this.valueStart) / (this.max - this.min)})`,
      transform: `scaleX(${(this.valueEnd - this.valueStart) / (this.max - this.min)})`,
      "-webkit-transition": this.trackTransitionStyle,
      transition: this.trackTransitionStyle
    });
    return o`
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div
              class="mdc-slider__track--active_fill"
              style=${t}>
          </div>
        </div>
      </div>`;
  }
  renderStartThumb() {
    const t = b({
      "mdc-slider__thumb--with-indicator": this.startThumbWithIndicator,
      "mdc-slider__thumb--top": this.startThumbTop
    }), e = T(Object.assign({ "-webkit-transform": this.startThumbTransformStyle, transform: this.startThumbTransformStyle, "-webkit-transition": this.startThumbTransitionStyle, transition: this.startThumbTransitionStyle, left: this.startThumbTransformStyle || getComputedStyle(this).direction === "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}% - 24px)`, right: this.startThumbTransformStyle || getComputedStyle(this).direction !== "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}% - 24px)` }, this.startThumbCssProperties)), i = this.shouldRenderStartRipple ? o`<mwc-ripple class="ripple" unbounded></mwc-ripple>` : _;
    return o`
      <div
          class="mdc-slider__thumb start ${t}"
          style=${e}
          @mouseenter=${this.onStartMouseenter}
          @mouseleave=${this.onStartMouseleave}>
        ${i}
        ${this.renderValueIndicator(this.valueToValueIndicatorTransform(this.valueStart))}
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    `;
  }
  createAdapter() {
    return {
      addClass: (t) => {
        switch (t) {
          case "mdc-slider--disabled":
            this.disabled = !0;
            break;
        }
      },
      removeClass: (t) => {
        switch (t) {
          case "mdc-slider--disabled":
            this.disabled = !1;
            break;
        }
      },
      hasClass: (t) => {
        switch (t) {
          case "mdc-slider--disabled":
            return this.disabled;
          case "mdc-slider--range":
            return !0;
          case "mdc-slider--discrete":
            return this.discrete;
          default:
            return !1;
        }
      },
      addThumbClass: (t, e) => {
        if (e === r.START)
          switch (t) {
            case "mdc-slider__thumb--with-indicator":
              this.startThumbWithIndicator = !0;
              break;
            case "mdc-slider__thumb--top":
              this.startThumbTop = !0;
              break;
          }
        else
          switch (t) {
            case "mdc-slider__thumb--with-indicator":
              this.endThumbWithIndicator = !0;
              break;
            case "mdc-slider__thumb--top":
              this.endThumbTop = !0;
              break;
          }
      },
      removeThumbClass: (t, e) => {
        if (e === r.START)
          switch (t) {
            case "mdc-slider__thumb--with-indicator":
              this.startThumbWithIndicator = !1;
              break;
            case "mdc-slider__thumb--top":
              this.startThumbTop = !1;
              break;
          }
        else
          switch (t) {
            case "mdc-slider__thumb--with-indicator":
              this.endThumbWithIndicator = !1;
              break;
            case "mdc-slider__thumb--top":
              this.endThumbTop = !1;
              break;
          }
      },
      registerEventHandler: () => {
      },
      deregisterEventHandler: () => {
      },
      registerBodyEventHandler: (t, e) => {
        document.body.addEventListener(t, e);
      },
      deregisterBodyEventHandler: (t, e) => {
        document.body.removeEventListener(t, e);
      },
      registerInputEventHandler: (t, e, i) => {
        t === r.START ? this.startInput.addEventListener(e, i) : this.formElement.addEventListener(e, i);
      },
      deregisterInputEventHandler: (t, e, i) => {
        t === r.START ? this.startInput.removeEventListener(e, i) : this.formElement.removeEventListener(e, i);
      },
      registerThumbEventHandler: () => {
      },
      deregisterThumbEventHandler: () => {
      },
      registerWindowEventHandler: (t, e) => {
        window.addEventListener(t, e);
      },
      deregisterWindowEventHandler: (t, e) => {
        window.removeEventListener(t, e);
      },
      emitChangeEvent: (t, e) => {
        const i = new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: t, thumb: e } });
        this.dispatchEvent(i);
      },
      emitDragEndEvent: (t, e) => {
        e === r.START ? this.startRippleHandlers.endPress() : this.endRippleHandlers.endPress();
      },
      emitDragStartEvent: (t, e) => {
        e === r.START ? this.startRippleHandlers.startPress() : this.endRippleHandlers.startPress();
      },
      emitInputEvent: (t, e) => {
        const i = new CustomEvent("input", { bubbles: !0, composed: !0, detail: { value: t, thumb: e } });
        this.dispatchEvent(i);
      },
      focusInput: (t) => {
        t === r.START ? this.startInput.focus() : this.formElement.focus();
      },
      getAttribute: () => "",
      getBoundingClientRect: () => this.mdcRoot.getBoundingClientRect(),
      getInputAttribute: (t, e) => {
        if (e === r.START)
          switch (t) {
            case "min":
              return this.min.toString();
            case "max":
              return this.valueEnd.toString();
            case "value":
              return this.valueStart.toString();
            case "step":
              return this.step.toString();
            default:
              return null;
          }
        switch (t) {
          case "min":
            return this.valueStart.toString();
          case "max":
            return this.max.toString();
          case "value":
            return this.valueEnd.toString();
          case "step":
            return this.step.toString();
          default:
            return null;
        }
      },
      getInputValue: (t) => t === r.START ? this.valueStart.toString() : this.valueEnd.toString(),
      getThumbBoundingClientRect: (t) => t === r.START ? this.startThumb.getBoundingClientRect() : this.endThumb.getBoundingClientRect(),
      getThumbKnobWidth: (t) => t === r.START ? this.startThumbKnob.getBoundingClientRect().width : this.endThumbKnob.getBoundingClientRect().width,
      getValueIndicatorContainerWidth: (t) => t === r.START ? this.startValueIndicatorContainer.getBoundingClientRect().width : this.endValueIndicatorContainer.getBoundingClientRect().width,
      getValueToAriaValueTextFn: () => this.valueToAriaTextTransform,
      isInputFocused: (t) => {
        const e = f(), i = e[e.length - 1];
        return t === r.START ? i === this.startInput : i === this.formElement;
      },
      isRTL: () => getComputedStyle(this).direction === "rtl",
      setInputAttribute: (t, e, i) => {
        r.START;
      },
      removeInputAttribute: (t) => {
      },
      setThumbStyleProperty: (t, e, i) => {
        if (i === r.START)
          switch (t) {
            case "transform":
            case "-webkit-transform":
              this.startThumbTransformStyle = e;
              break;
            case "transition":
            case "-webkit-transition":
              this.startThumbTransitionStyle = e;
              break;
            default:
              t.startsWith("--") && (this.startThumbCssProperties[t] = e);
          }
        else
          switch (t) {
            case "transform":
            case "-webkit-transform":
              this.endThumbTransformStyle = e;
              break;
            case "transition":
            case "-webkit-transition":
              this.endThumbTransitionStyle = e;
              break;
            default:
              t.startsWith("--") && (this.endThumbCssProperties[t] = e);
          }
      },
      removeThumbStyleProperty: (t, e) => {
        if (e === r.START)
          switch (t) {
            case "left":
            case "right":
              break;
            case "transition":
            case "-webkit-transition":
              this.startThumbTransitionStyle = "";
              break;
          }
        else
          switch (t) {
            case "left":
            case "right":
              break;
            case "transition":
            case "-webkit-transition":
              this.endThumbTransitionStyle = "";
              break;
          }
      },
      setTrackActiveStyleProperty: (t, e) => {
        switch (t) {
          case "transform-origin":
            this.trackTransformOriginStyle = e;
            break;
          case "left":
            this.trackLeftStyle = e;
            break;
          case "right":
            this.trackRightStyle = e;
            break;
          case "transform":
          case "-webkit-transform":
            break;
          case "transition":
          case "-webkit-transition":
            this.trackTransitionStyle = e;
            break;
        }
      },
      removeTrackActiveStyleProperty: (t) => {
        switch (t) {
          case "transition":
          case "-webkit-transition":
            this.trackTransitionStyle = "";
            break;
        }
      },
      setInputValue: (t, e) => {
        e === r.START ? this.valueStart = Number(t) : this.valueEnd = Number(t);
      },
      setPointerCapture: (t) => {
        this.mdcRoot.setPointerCapture(t);
      },
      setValueIndicatorText: () => {
      },
      updateTickMarks: (t) => {
        this.tickMarks = t;
      }
    };
  }
  onStartChange(t) {
    var e;
    this.valueStart = Number(t.target.value), (e = this.mdcFoundation) === null || e === void 0 || e.handleInputChange(r.START);
  }
  onStartFocus() {
    var t;
    (t = this.mdcFoundation) === null || t === void 0 || t.handleInputFocus(r.START), this.startRippleHandlers.startFocus();
  }
  onStartBlur() {
    var t;
    (t = this.mdcFoundation) === null || t === void 0 || t.handleInputBlur(r.START), this.startRippleHandlers.endFocus();
  }
  onStartMouseenter() {
    var t;
    (t = this.mdcFoundation) === null || t === void 0 || t.handleThumbMouseenter(), this.startRippleHandlers.startHover();
  }
  onStartMouseleave() {
    var t;
    (t = this.mdcFoundation) === null || t === void 0 || t.handleThumbMouseleave(), this.startRippleHandlers.endHover();
  }
  setFormData(t) {
    this.name && (t.append(`${this.name}-start`, `${this.valueStart}`), t.append(`${this.name}-end`, `${this.valueEnd}`));
  }
}
a([
  u("input.start")
], s.prototype, "startInput", void 0);
a([
  u(".start.mdc-slider__thumb")
], s.prototype, "startThumb", void 0);
a([
  u(".start.mdc-slider__thumb .mdc-slider__thumb-knob")
], s.prototype, "startThumbKnob", void 0);
a([
  u(".start.mdc-slider__thumb .mdc-slider__value-indicator-container")
], s.prototype, "startValueIndicatorContainer", void 0);
a([
  v(".start .ripple")
], s.prototype, "startRipple", void 0);
a([
  R({ type: Number })
], s.prototype, "valueStart", void 0);
a([
  d()
], s.prototype, "startThumbWithIndicator", void 0);
a([
  d()
], s.prototype, "startThumbTop", void 0);
a([
  d()
], s.prototype, "shouldRenderStartRipple", void 0);
a([
  d()
], s.prototype, "startThumbTransformStyle", void 0);
a([
  d()
], s.prototype, "startThumbTransitionStyle", void 0);
a([
  d()
], s.prototype, "startThumbCssProperties", void 0);
var w = Object.getOwnPropertyDescriptor, $ = (c, t, e, i) => {
  for (var l = i > 1 ? void 0 : i ? w(t, e) : t, m = c.length - 1, p; m >= 0; m--)
    (p = c[m]) && (l = p(l) || l);
  return l;
};
let h = class extends s {
};
h.styles = [y];
h = $([
  k("cv-slider-range")
], h);
const W = h;
export {
  h as CovalentSliderRange,
  W as default
};
