import R from "./resize-observer.js";
import { n as u, C as I } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as P } from "../chunks/component.styles.CRO4Odto.js";
import { f as F } from "../chunks/form-control.styles.CaGWmeAS.js";
import { c as U } from "../chunks/custom-element.L4WJXn1j.js";
import { d as $ } from "../chunks/debounce.DaHuiSGU.js";
import { d as O } from "../chunks/default-value.COZopaet.js";
import { d as w } from "../chunks/drag.DXEXVXPv.js";
import { F as N } from "../chunks/form.Ch1cwYzO.js";
import { L as S } from "../chunks/i18n.BABe9hN4.js";
import { c as d } from "../chunks/math.DqTA6ya4.js";
import { H as A } from "../chunks/slot.j5oheLJC.js";
import { w as v } from "../chunks/watch.BCJD77bD.js";
import { x as M, i as B } from "../chunks/lit-element.jLBm65_O.js";
import { r as g } from "../chunks/state.CSDxrqLd.js";
import { t as E } from "../chunks/event-options.CYHYGOd8.js";
import { e as c } from "../chunks/query.BBf1UFkC.js";
import { e as p } from "../chunks/class-map.BiVq-cVR.js";
import { o as k } from "../chunks/if-defined.BRoBj_Rp.js";
import { l as W } from "../chunks/live.SCz6M8Gs.js";
import { o as f } from "../chunks/style-map.llVFPd__.js";
import H from "./tooltip.js";
import { e as K, n as j } from "../chunks/ref.bzeTdX0K.js";
import { c as q } from "../chunks/repeat.DbF2p5ae.js";
function Y({
  edgeMode: t = "center",
  maxOffset: e,
  minOffset: i,
  percentValue: a
}) {
  const r = t === "inside" ? i : 0, l = t === "inside" ? 100 - e : 100;
  let o = a - i, h = a + e;
  if (t === "inside")
    o < r && (o = r, h = r + i + e), h > l && (h = l, o = l - i - e);
  else {
    if (o < 0) {
      const m = -o;
      o = 0, h += m;
    }
    if (h > 100) {
      const m = h - 100;
      h = 100, o -= m;
    }
  }
  return {
    maxThumbMaxLeft: d(l, 0, 100),
    maxThumbMinLeft: d(h, 0, 100),
    minThumbMaxLeft: d(o, 0, 100),
    minThumbMinLeft: d(r, 0, 100)
  };
}
function y(t, e, i) {
  const a = i - e;
  return a === 0 ? 0 : d((t - e) / a, 0, 1) * 100;
}
function X(t) {
  return t.filter((e) => !e.hidden);
}
function G(t, e) {
  return Math.floor(t / Math.max(e, 1));
}
function J(t, e) {
  const i = (t - 1) / (e + 1);
  return Math.ceil(i);
}
function Q(t, e) {
  return t / e * 100;
}
function Z(t, e, i, a) {
  const r = Math.abs(t - e), l = Math.abs(t - i);
  return r >= a && l >= a;
}
function tt(t) {
  return new Set(t.map((e) => e.value));
}
function et(t) {
  const e = /* @__PURE__ */ new Set(), i = Math.floor(t.length / 2), a = t[i];
  return a && e.add(a.value), e;
}
function it(t, e) {
  const i = /* @__PURE__ */ new Set(), a = t[0], r = t.at(-1);
  return a && i.add(a.value), r && e > 1 && i.add(r.value), i;
}
function at(t, e, i, a, r, l) {
  const o = /* @__PURE__ */ new Set(), h = t[0], m = t.at(-1);
  if (!h || !m)
    return o;
  const x = J(t.length, e), b = Q(i, a), D = y(h.value, r, l), _ = y(m.value, r, l);
  for (let V = 1; V <= e; V++) {
    const C = V * x, T = t[C];
    if (!T || C >= t.length - 1)
      continue;
    const z = y(T.value, r, l);
    Z(
      z,
      D,
      _,
      b
    ) && o.add(T.value);
  }
  return o;
}
function rt(t, e, i, a, r) {
  if (!e || t.length === 0)
    return /* @__PURE__ */ new Set();
  const l = X(t);
  if (l.length === 0)
    return /* @__PURE__ */ new Set();
  const o = G(e, i);
  if (o >= l.length)
    return tt(l);
  if (o <= 1)
    return et(l);
  const h = it(l, o);
  if (o > 2) {
    const m = o - 2;
    at(
      l,
      m,
      i,
      e,
      a,
      r
    ).forEach((b) => h.add(b));
  }
  return h;
}
var st = Object.defineProperty, lt = Object.getOwnPropertyDescriptor, nt = (t, e, i, a) => {
  for (var r = lt(e, i), l = t.length - 1, o; l >= 0; l--)
    (o = t[l]) && (r = o(e, i, r) || r);
  return r && st(e, i, r), r;
};
class L {
  constructor(e) {
    this.marksContainerRef = K(), this.containerWidth = 0, this.marksWithLabels = /* @__PURE__ */ new Set(), this.host = e, this.host.addController(this), this.localize = new S(e), this.handleResize = this.handleResize.bind(this);
  }
  hostConnected() {
  }
  hostDisconnected() {
  }
  hostUpdated() {
  }
  /**
   * Gets all mark elements from the datalist slot.
   * @returns NodeList of option elements or null
   */
  getAllMarks() {
    return this.host.querySelector("datalist")?.querySelectorAll("option");
  }
  /**
   * Initializes marks based on the datalist slot or auto-generates them from step.
   * @returns Array of valid mark objects
   */
  initMarks() {
    if (!this.host.showMarks)
      return [];
    const e = this.getAllMarks(), i = [];
    if (e && e.length > 0)
      e.forEach((a) => {
        const r = a.getAttribute("value");
        if (!r)
          return;
        const l = Number.parseFloat(r);
        Number.isNaN(l) || i.push({
          hidden: a.hasAttribute("hidden"),
          label: a.textContent || "",
          value: l
        });
      });
    else {
      const a = this.host.step || 1, r = this.host.min, l = this.host.max, o = Math.round((l - r) / a);
      for (let h = 0; h <= o; h++) {
        const m = r + h * a;
        i.push({
          hidden: !1,
          label: m.toString(),
          value: m
        });
      }
    }
    return this.calculateVisibleLabels(i), i;
  }
  renderMark(e) {
    const i = this.localize.dir() === "rtl", a = y(
      e.value,
      this.host.min,
      this.host.max
    ), r = i ? 100 - a : a;
    return M`<div class=${p({
      mark__tick: !0,
      "mark__tick--hidden": e.hidden
    })} part="mark-tick" style=${f({ left: `${r}%` })}></div><div class=${p({
      mark__label: !0,
      "mark__label--hidden": e.hidden || !this.marksWithLabels.has(e.value)
    })} part="mark-label" style=${f({ left: `${r}%` })}>${e.label}</div>`;
  }
  /**
   * Calculates which marks should display labels based on available width.
   * Uses a minimum spacing between labels to prevent overcrowding.
   */
  calculateVisibleLabels(e) {
    this.marksWithLabels = rt(
      e,
      this.containerWidth,
      this.host.markLabelSpacing,
      this.host.min,
      this.host.max
    );
  }
  handleResize() {
    const e = this.marksContainerRef.value?.clientWidth ?? 0;
    e !== this.containerWidth && (this.containerWidth = e, this.calculateVisibleLabels(this.host.marks), this.host.requestUpdate());
  }
  renderMarks() {
    return M`<cx-resize-observer @cx-resize=${this.handleResize}><div class="range__marks" ${j(this.marksContainerRef)} style=${f({
      visibility: this.host.showMarks ? "visible" : "hidden"
    })}>${q(
      this.host.marks,
      (e) => e.value,
      (e) => this.renderMark(e)
    )}</div></cx-resize-observer>`;
  }
}
nt([
  $(100)
], L.prototype, "handleResize");
const ot = B`:host{--thumb-color:#fff;--thumb-size:20px;--track-color-active:var(--cx-color-primary);--track-color-inactive:var(--cx-color-neutral-200);--track-active-offset:0%;--track-height:6px;--border-radius:3px;--track-border:none;isolation:isolate;display:block}.range{cursor:pointer;margin:var(--cx-spacing-large) 0;position:relative}.range:before{content:"";background-color:var(--track-color-active);border-radius:var(--border-radius);border:var(--track-border);pointer-events:none;height:100%;width:var(--percent);z-index:1;position:absolute;top:50%;left:0;transform:translateY(-50%)}.range__container{height:var(--track-height);position:relative}.range__control{-webkit-appearance:none;border-radius:var(--border-radius);width:100%;height:var(--track-height);line-height:var(--cx-input-height-medium);vertical-align:middle;background:0 0;background-image:linear-gradient(to right, var(--track-color-inactive) 0%, var(--track-color-inactive) min(var(--percent), var(--track-active-offset)), var(--track-color-active) min(var(--percent), var(--track-active-offset)), var(--track-color-active) max(var(--percent), var(--track-active-offset)), var(--track-color-inactive) max(var(--percent), var(--track-active-offset)), var(--track-color-inactive) 100%);cursor:pointer;margin:0;position:absolute;top:0;left:0}.range--disabled .range__control{cursor:default}.range--rtl .range__control{background-image:linear-gradient(to left, var(--track-color-inactive) 0%, var(--track-color-inactive) min(var(--percent), var(--track-active-offset)), var(--track-color-active) min(var(--percent), var(--track-active-offset)), var(--track-color-active) max(var(--percent), var(--track-active-offset)), var(--track-color-inactive) max(var(--percent), var(--track-active-offset)), var(--track-color-inactive) 100%)}.range__control::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:var(--border-radius);border:var(--track-border)}.range__control::-webkit-slider-thumb{display:none}.range__control::-moz-range-thumb{visibility:hidden;display:none}.range__control::-moz-focus-outer{border:0}.range__control::-moz-range-progress{background-color:var(--track-color-active);border-radius:var(--border-radius);height:var(--track-height)}.range__control::-moz-range-track{width:100%;height:var(--track-height);background-color:var(--track-color-inactive);border-radius:var(--border-radius);border:var(--track-border)}.range__control::-moz-range-thumb{display:none}.range__control:focus-visible{outline:none}.range__control:disabled{opacity:.5}.range__control:disabled::-webkit-slider-thumb{cursor:default}.range__control:disabled::-moz-range-thumb{cursor:default}@media (forced-colors:active){.range__control,.range__control::-webkit-slider-thumb{border:1px solid #0000}.range__control::-moz-range-thumb{border:1px solid #0000}}::slotted([slot=marks]){display:none}.range__marks{width:100%;height:10px;display:flex;position:absolute;transform:translateY(-50%)}.mark__tick{border-left:1px solid var(--cx-color-neutral-1000);height:10px;position:absolute;left:50%;transform:translate(-50%)}.mark__tick--hidden{visibility:hidden}.mark__label{top:var(--cx-spacing-medium);position:absolute;transform:translate(-50%)}.mark__label--hidden{visibility:hidden}.range__thumb{width:var(--thumb-size);height:var(--thumb-size);background-color:var(--thumb-color);border:var(--cx-panel-border-width) solid var(--cx-panel-border-color);box-shadow:var(--cx-shadow-large);top:50%;left:var(--percent);z-index:1;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.range__thumb:dir(rtl){left:calc(100% - var(--percent))}.range__control:focus-visible~.range__thumb{outline:var(--cx-focus-ring);outline-offset:2px}.range--disabled .range__container{opacity:.5;cursor:default}.range-slider{--track-left-inset:0%;--track-right-inset:0%;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;width:100%;height:var(--track-height);display:block;position:relative}.range-slider:before{content:"";top:0;left:var(--track-left-inset);width:calc(100% - var(--track-left-inset) - var(--track-right-inset));background:var(--track-color-inactive);border-radius:calc(var(--track-height) / 2);height:100%;position:absolute}.range-slider--disabled{opacity:.5;cursor:not-allowed}.range-slider__thumb{z-index:3;width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--cx-border-radius-circle);background-color:var(--thumb-color);border:var(--cx-panel-border-width) solid var(--cx-panel-border-color);box-shadow:var(--cx-shadow-large);cursor:pointer;transition:box-shadow .15s;position:absolute;top:50%;transform:translate(-50%,-50%)}.range-slider__thumb:focus{outline:none}.range-slider__thumb:focus-visible{outline:var(--cx-focus-ring);outline-offset:2px}.range-slider__thumb--disabled{z-index:2;cursor:not-allowed;opacity:.6}.range-slider__thumb--slotted{box-shadow:none;background:0 0;border:none;width:auto;height:auto;display:flex}.range-slider__thumb--slotted ::slotted(*){pointer-events:none}.range-slider__range{z-index:1;background:var(--track-color-active);cursor:pointer;border-radius:var(--border-radius);border:var(--track-border);height:100%;position:absolute;top:50%;transform:translateY(-50%)}.range-slider--disabled .range-slider__thumb,.range-slider--disabled .range-slider__range{cursor:not-allowed}.range-slider__input--min,.range-slider__input--max{display:none}`;
var ht = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
  for (var r = a > 1 ? void 0 : a ? ut(e, i) : e, l = t.length - 1, o; l >= 0; l--)
    (o = t[l]) && (r = (a ? o(e, i, r) : o(r)) || r);
  return a && r && ht(e, i, r), r;
};
let s = class extends I {
  constructor() {
    super(), this.formControlController = new N(this), this.hasSlotController = new A(
      this,
      "help-text",
      "label",
      "thumb-min",
      "thumb-max"
    ), this.localize = new S(this), this.markController = new L(this), this.hasFocus = !1, this.hasTooltip = !1, this._multiValue = { max: 75, min: 25 }, this._singleValue = 0, this.multiDragTarget = null, this.multiIsDragging = !1, this.multiRangeWidth = 0, this.multiDragStartValue = { max: 0, min: 0 }, this.thumbConstraints = {
      max: { maxLeft: 100, minLeft: 0 },
      min: { maxLeft: 100, minLeft: 0 }
    }, this.state = "idle", this.title = "", this.name = "", this.multi = !1, this.label = "", this.helpText = "", this.disabled = !1, this.min = 0, this.max = 100, this.markLabelSpacing = 10, this.tooltipPlacement = "top", this.tooltipDisplay = "auto", this.tooltipHoist = !1, this.tooltipFormatter = (t) => t.toString(), this.form = void 0, this.snapThreshold = 12, this.showMarks = !1, this.tooltipOffset = 8, this.minThumbDisabled = !1, this.maxThumbDisabled = !1, this.rangeSlideDisabled = !1, this.thumbsCrossover = "swap", this.noOverlap = !1, this.thumbEdgeMode = "center", this.marks = [], this.defaultValue = 0, this.handleMouseUp = this.handleMouseUp.bind(this), this.handleMultiResize = this.handleMultiResize.bind(this);
  }
  set value(t) {
    Array.isArray(t) ? this._multiValue = { max: t[1], min: t[0] } : this._singleValue = t;
  }
  get value() {
    return this.multi ? [this._multiValue.min, this._multiValue.max] : this._singleValue;
  }
  /** Gets the validity state object */
  get validity() {
    return this.multi ? this.multiInputMin.validity.valid ? this.multiInputMax.validity : this.multiInputMin.validity : this.input.validity;
  }
  /** Gets the validation message */
  get validationMessage() {
    return this.multi ? this.multiInputMin?.validationMessage || this.multiInputMax?.validationMessage || "" : this.input.validationMessage;
  }
  get minThumbSize() {
    return this.minThumb?.getBoundingClientRect().width ?? 0;
  }
  get maxThumbSize() {
    return this.maxThumb?.getBoundingClientRect().width ?? 0;
  }
  get multiContainerSize() {
    return this.multiContainer?.getBoundingClientRect().width ?? 0;
  }
  get minThumbOffset() {
    return this.multiContainerSize === 0 ? 0 : this.minThumbSize / 2 / this.multiContainerSize * 100;
  }
  get maxThumbOffset() {
    return this.multiContainerSize === 0 ? 0 : this.maxThumbSize / 2 / this.multiContainerSize * 100;
  }
  /**
   * Gets the track left inset for 'inside' mode.
   * This trims the track on the left to match the min thumb's visual bounds.
   */
  get trackLeftInset() {
    return this.thumbEdgeMode === "inside" && this.noOverlap && this.multiContainerSize > 0 ? this.minThumbOffset : 0;
  }
  /**
   * Gets the track right inset for 'inside' mode.
   * This trims the track on the right to match the max thumb's visual bounds.
   */
  get trackRightInset() {
    return this.thumbEdgeMode === "inside" && this.noOverlap && this.multiContainerSize > 0 ? this.maxThumbOffset : 0;
  }
  connectedCallback() {
    if (super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
      this.multi && this.handleMultiResize(), this.syncRange();
    }), this.multi) {
      const [t, e] = this.value, i = Math.max(this.min, Math.min(t, this.max)), a = Math.max(this.min, Math.min(e, this.max));
      (t !== i || e !== a) && (this.value = [i, a]);
    } else {
      const t = this.value;
      t < this.min && (this.value = this.min), t > this.max && (this.value = this.max);
    }
    this.marks = this.markController.initMarks(), !this.step && (!this.marks || this.marks.length === 0) && (this.step = 1), this.updateComplete.then(() => {
      this.multi && this.multiContainer ? this.resizeObserver.observe(this.multiContainer) : this.input && this.resizeObserver.observe(this.input), this.syncRange();
    });
  }
  initMarks() {
    this.marks = this.markController.initMarks();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.input && this.resizeObserver?.unobserve(this.input), this.multiContainer && this.resizeObserver?.unobserve(this.multiContainer);
  }
  handleChange() {
    this.emit("cx-change");
  }
  handleInput() {
    this.emit("cx-input"), this.syncRange();
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("cx-blur");
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("cx-focus");
  }
  handleMouseUp() {
    this.handleInput(), this.handleChange();
  }
  /**
   * Snaps the value to the nearest snap point to a given x position
   * @param x the x position that is seeked to
   * @returns whether the value has changed
   */
  snapValue(t) {
    let e = t;
    const i = this.marks.map((h) => h.value);
    let a = 1 / 0, r = 0;
    for (const h of i) {
      const m = this.valueToPercentage(h), x = this.input.clientWidth;
      let b = x * (m / 100);
      this.localize.dir() === "rtl" && (b = x - b);
      const _ = Math.abs(e - b);
      if (_ > a)
        break;
      a = _, r = b;
    }
    this.step ? a <= this.snapThreshold && (e = r) : e = r;
    const l = d(
      this.pixelsToValue(e),
      this.min,
      this.max
    );
    this.input.value = l.toString();
    const o = Number.parseFloat(this.input.value);
    return this.value === o ? !1 : (this.value = o, !0);
  }
  handleThumbDragStart(t) {
    this.disabled || (this.hasTooltip = !0, this.state = "dragging", this.emit("cx-drag-start"), w(this, {
      initialEvent: t,
      onMove: (e) => {
        this.handleInput(), document.body.style.userSelect = "none", this.snapValue(e);
      },
      onStop: () => {
        document.body.style.userSelect = "", this.state = "idle", this.hasTooltip = !1, this.emit("cx-drag-end"), this.handleChange();
      }
    }));
  }
  handleMaxThumbDragStart(t) {
    this.initiateMultiThumbDrag(
      t,
      "max"
      /* MAX */
    );
  }
  handleMinThumbDragStart(t) {
    this.initiateMultiThumbDrag(
      t,
      "min"
      /* MIN */
    );
  }
  handleMinThumbKeyDown(t) {
    this.handleMultiKeyDown(
      t,
      "min"
      /* MIN */
    );
  }
  handleMaxThumbKeyDown(t) {
    this.handleMultiKeyDown(
      t,
      "max"
      /* MAX */
    );
  }
  handleMouseDown(t) {
    if (this.disabled)
      return;
    const e = t.x - this.input.getBoundingClientRect().left;
    this.snapValue(e), this.range.addEventListener("mouseup", this.handleMouseUp, {
      once: !0
    });
  }
  handleKeyDown(t) {
    switch (t.key) {
      case "ArrowLeft":
      case "ArrowDown": {
        t.preventDefault(), this.stepDown(), this.handleInput(), this.handleChange();
        break;
      }
      case "ArrowRight":
      case "ArrowUp": {
        t.preventDefault(), this.stepUp(), this.handleInput(), this.handleChange();
        break;
      }
    }
  }
  valueToPercentage(t) {
    return d((t - this.min) / (this.max - this.min), 0, 1) * 100;
  }
  pixelsToValue(t) {
    const e = this.input.clientWidth;
    return (this.localize.dir() === "rtl" ? e - t : t) / e * 100 / 100 * (this.max - this.min) + this.min;
  }
  syncProgress(t) {
    this.range.style.setProperty("--percent", `${t * 100}%`);
  }
  handleValueChange() {
    this.formControlController.updateValidity(), this.syncRange();
  }
  handleDisabledChange() {
    this.formControlController.setValidity(this.disabled);
  }
  syncRange() {
    if (this.multi) {
      if (!this.minTooltip || !this.maxTooltip)
        return;
      this.tooltipDisplay === "auto" && (this.minTooltip.open = this.hasTooltip && this.multiDragTarget !== "max", this.maxTooltip.open = this.hasTooltip && this.multiDragTarget !== "min");
    } else {
      if (!this.output)
        return;
      const t = this.value, e = d(
        (t - this.min) / (this.max - this.min),
        0,
        1
      );
      this.syncProgress(e), this.tooltipDisplay === "auto" && (this.output.open = this.hasTooltip);
    }
  }
  handleInvalid(t) {
    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(t);
  }
  /**
   * Sets focus on the range. In multi mode, focuses the min thumb by default, or max if min is disabled.
   * @param options - The focus options to pass to the thumb.
   */
  focus(t) {
    this.multi ? this.minThumbDisabled ? this.maxThumbDisabled || this.maxThumb?.focus(t) : this.minThumb?.focus(t) : this.input?.focus(t);
  }
  /**
   * Removes focus from the range. In multi mode, blurs both thumbs.
   */
  blur() {
    this.multi ? (this.minThumb?.blur(), this.maxThumb?.blur()) : this.input?.blur();
  }
  /** Checks if multi mode thumb is available for stepping */
  isMultiThumbAvailable(t) {
    return t ? t === "min" ? !this.minThumbDisabled : !this.maxThumbDisabled : !1;
  }
  /** Updates multi value for a specific thumb and returns whether it changed */
  updateMultiThumbValue(t, e) {
    const i = this._multiValue.min, a = this._multiValue.max;
    let r = t === "min" ? e : this._multiValue.min, l = t === "max" ? e : this._multiValue.max;
    return r > l && (this.thumbsCrossover === "block" ? t === "min" ? r = this._multiValue.max : l = this._multiValue.min : [r, l] = [l, r]), this.setMultiValue(r, l), this._multiValue.min !== i || this._multiValue.max !== a;
  }
  /** Finds the next mark value greater than the current value */
  findNextMark(t) {
    return this.marks.find((e) => e.value > t)?.value;
  }
  /** Finds the previous mark value less than the current value */
  findPreviousMark(t) {
    for (let e = this.marks.length - 1; e >= 0; e--)
      if (this.marks[e].value < t)
        return this.marks[e].value;
  }
  /** Handles step up for single mode */
  stepUpSingle() {
    const t = this.value;
    if (this.step)
      return this.input.stepUp(), t !== Number(this.input.value) ? (this.value = Number(this.input.value), !0) : !1;
    const e = this.findNextMark(t);
    return e !== void 0 ? (this.value = e, !0) : !1;
  }
  /** Handles step down for single mode */
  stepDownSingle() {
    const t = this.value;
    if (this.step)
      return this.input.stepDown(), t !== Number(this.input.value) ? (this.value = Number(this.input.value), !0) : !1;
    const e = this.findPreviousMark(t);
    return e !== void 0 ? (this.value = e, !0) : !1;
  }
  /** Handles step up for multi mode */
  stepUpMulti(t) {
    const e = this._multiValue[t];
    if (this.step)
      return this.updateMultiThumbValue(t, e + this.step);
    const i = this.findNextMark(e);
    return i !== void 0 ? this.updateMultiThumbValue(t, i) : !1;
  }
  /** Handles step down for multi mode */
  stepDownMulti(t) {
    const e = this._multiValue[t];
    if (this.step)
      return this.updateMultiThumbValue(t, e - this.step);
    const i = this.findPreviousMark(e);
    return i !== void 0 ? this.updateMultiThumbValue(t, i) : !1;
  }
  /**
   * Increments the value of the range by the value of the step attribute.
   * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
   * @returns whether the value has changed
   */
  stepUp(t) {
    return this.multi ? this.isMultiThumbAvailable(t) && this.stepUpMulti(t) : this.stepUpSingle();
  }
  /**
   * Decrements the value of the range by the value of the step attribute.
   * @param thumbType - For multi mode, specifies which thumb to move ('min' or 'max')
   * @returns whether the value has changed
   */
  stepDown(t) {
    return this.multi ? this.isMultiThumbAvailable(t) && this.stepDownMulti(t) : this.stepDownSingle();
  }
  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
  checkValidity() {
    return this.multi ? this.multiInputMin?.checkValidity() && this.multiInputMax?.checkValidity() : this.input?.checkValidity();
  }
  /** Gets the associated form, if one exists. */
  getForm() {
    return this.formControlController.getForm();
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  reportValidity() {
    return this.multi ? this.multiInputMin?.reportValidity() ? this.multiInputMax?.reportValidity() : !1 : this.input?.reportValidity();
  }
  /** Sets a custom validation message. Pass an empty string to restore validity. */
  setCustomValidity(t) {
    this.multi ? (this.multiInputMin?.setCustomValidity(t), this.multiInputMax?.setCustomValidity(t)) : this.input?.setCustomValidity(t), this.formControlController.updateValidity();
  }
  handleMultiResize() {
    this.noOverlap && this.updateNoOverlapConstraints(), this.requestUpdate();
  }
  multiValueToPercent(t) {
    return d((t - this.min) / (this.max - this.min), 0, 1) * 100;
  }
  multiPercentToValue(t) {
    return t / 100 * (this.max - this.min) + this.min;
  }
  multiPositionToValue(t, e) {
    const i = t / e * 100;
    return this.multiPercentToValue(i);
  }
  getConstrainedPercent(t) {
    const e = this._multiValue[t];
    let i = this.multiValueToPercent(e);
    if (this.noOverlap) {
      const a = this.thumbConstraints[t];
      i = d(i, a.minLeft, a.maxLeft);
    }
    return d(i, 0, 100);
  }
  getMultiThumbStyle(t) {
    return { left: `${this.getConstrainedPercent(t)}%` };
  }
  /**
   * Gets the style for the range bar (active portion between thumbs).
   * In 'inside' mode, the bar is trimmed to match the track bounds.
   */
  getRangeBarStyle(t, e) {
    const i = this.trackLeftInset, a = this.trackRightInset, r = Math.max(t, i), l = Math.min(e, 100 - a), o = Math.max(0, l - r);
    return {
      left: `${r}%`,
      /**
       * Hide the bar when width is 0 to prevent border from showing
       */
      visibility: o === 0 ? "hidden" : "visible",
      width: `${o}%`
    };
  }
  setMultiValue(t, e) {
    this.multiInputMin.value = String(t), this.multiInputMax.value = String(e);
    let i = Number.parseFloat(this.multiInputMin.value), a = Number.parseFloat(this.multiInputMax.value);
    i = d(i, this.min, this.max), a = d(a, this.min, this.max), i > a && (this.thumbsCrossover === "swap" ? (this.multiDragTarget === "min" ? this.multiDragTarget = "max" : this.multiDragTarget === "max" && (this.multiDragTarget = "min"), [i, a] = [a, i]) : this.multiDragTarget === "min" ? i = this._multiValue.max : this.multiDragTarget === "max" ? a = this._multiValue.min : (i = Math.min(i, a), a = Math.max(i, a))), !(this._multiValue.min === i && this._multiValue.max === a) && (this._multiValue = { max: a, min: i });
  }
  updateNoOverlapConstraints() {
    if (!this.noOverlap)
      return;
    const t = this.multiValueToPercent(this._multiValue.min), e = this.minThumbOffset, i = this.maxThumbOffset;
    if (this.thumbsCrossover === "block") {
      const a = Y({
        edgeMode: this.thumbEdgeMode,
        maxOffset: i,
        minOffset: e,
        percentValue: t
      });
      this.thumbConstraints = {
        max: { maxLeft: a.maxThumbMaxLeft, minLeft: a.maxThumbMinLeft },
        min: { maxLeft: a.minThumbMaxLeft, minLeft: a.minThumbMinLeft }
      };
    } else
      this.thumbConstraints = {
        max: { maxLeft: 100, minLeft: 0 },
        min: { maxLeft: 100, minLeft: 0 }
      };
  }
  initiateMultiThumbDrag(t, e) {
    if (this.disabled || (e === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
      return;
    t.preventDefault(), t.stopPropagation(), this.hasTooltip = !0, this.multiIsDragging = !0, this.multiDragTarget = e === "min" ? "min" : "max", this.emit("cx-thumb-drag-start");
    const r = this.multiContainer.getBoundingClientRect().width;
    w(this, {
      initialEvent: t,
      onMove: (l) => {
        const o = this.multiPositionToValue(l, r);
        this.multiDragTarget === "min" ? this.setMultiValue(o, this._multiValue.max) : this.setMultiValue(this._multiValue.min, o), this.handleInput();
      },
      onStop: () => {
        this.multiIsDragging = !1, this.multiDragTarget = null, this.emit("cx-thumb-drag-end"), this.emit("cx-change"), this.hasTooltip = !1;
      }
    });
  }
  initiateMultiRangeDrag(t) {
    if (this.disabled || this.rangeSlideDisabled || this.minThumbDisabled && this.maxThumbDisabled)
      return;
    t.preventDefault(), t.stopPropagation(), this.multiIsDragging = !0, this.multiDragTarget = "range", this.multiRangeWidth = this._multiValue.max - this._multiValue.min, this.multiDragStartValue = { ...this._multiValue }, this.emit("cx-range-drag-start");
    const e = this.multiContainer.getBoundingClientRect(), i = e.width, a = t.clientX - e.left;
    this.hasTooltip = !0, w(this, {
      initialEvent: t,
      onMove: (r) => {
        const l = this.multiPositionToValue(r, i) - this.multiPositionToValue(a, i);
        let o = this.multiDragStartValue.min + l, h = this.multiDragStartValue.max + l;
        o < this.min && (o = this.min, h = this.min + this.multiRangeWidth), h > this.max && (h = this.max, o = this.max - this.multiRangeWidth), this.minThumbDisabled && (o = this._multiValue.min, h = this._multiValue.min + this.multiRangeWidth), this.maxThumbDisabled && (h = this._multiValue.max, o = this._multiValue.max - this.multiRangeWidth), this.setMultiValue(o, h), this.handleInput();
      },
      onStop: () => {
        this.multiIsDragging = !1, this.multiDragTarget = null, this.emit("cx-range-drag-end"), this.emit("cx-change"), this.hasTooltip = !1;
      }
    });
  }
  handleMultiContainerClick(t) {
    if (this.disabled)
      return;
    const e = t.target;
    if (e.classList.contains("range-slider__thumb") || e.classList.contains("range-slider__range") || this.minThumbDisabled && this.maxThumbDisabled)
      return;
    const i = this.multiContainer.getBoundingClientRect(), a = i.width, r = t.clientX - i.left, l = this.multiPositionToValue(r, a), o = Math.abs(this._multiValue.min - l), h = Math.abs(this._multiValue.max - l);
    this.minThumbDisabled ? l >= this._multiValue.min && this.setMultiValue(this._multiValue.min, l) : this.maxThumbDisabled ? l <= this._multiValue.max && this.setMultiValue(l, this._multiValue.max) : o <= h ? this.setMultiValue(l, this._multiValue.max) : this.setMultiValue(this._multiValue.min, l), this.emit("cx-change");
  }
  handleMultiKeyDown(t, e) {
    if (this.disabled || (e === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
      return;
    let a = !1;
    switch (t.key) {
      case "ArrowLeft":
      case "ArrowDown": {
        t.preventDefault(), a = this.stepDown(e);
        break;
      }
      case "ArrowRight":
      case "ArrowUp": {
        t.preventDefault(), a = this.stepUp(e);
        break;
      }
      case "Home": {
        t.preventDefault(), a = !0, this.updateMultiThumbValue(e, this.min);
        break;
      }
      case "End": {
        t.preventDefault(), a = !0, this.updateMultiThumbValue(e, this.max);
        break;
      }
    }
    a && this.emit("cx-change");
  }
  handleConstraintsChange() {
    this.multi && this.setMultiValue(this._multiValue.min, this._multiValue.max);
  }
  handleMultiValueChange() {
    this.multi && (this.requestUpdate("value"), this.noOverlap && this.updateNoOverlapConstraints());
  }
  renderSingleRange() {
    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), i = this.label ? !0 : !!t, a = this.helpText ? !0 : !!e;
    return M`<div part="form-control" class=${p({
      "form-control": !0,
      "form-control--has-help-text": a,
      // range only has one size
      "form-control--has-label": i,
      "form-control--medium": !0
    })} @focus=${this.focus} @blur=${this.blur} @keydown=${this.handleKeyDown} tabindex="0"><label part="form-control-label" class="form-control__label" for="input" aria-hidden=${i ? "false" : "true"}><slot name="label">${this.label}</slot></label><div part="form-control-input" class="form-control-input"><div part="base" class=${p({
      range: !0,
      "range--disabled": this.disabled,
      "range--focused": this.hasFocus,
      "range--rtl": this.localize.dir() === "rtl",
      "range--tooltip-visible": this.tooltipDisplay === "auto" && this.hasTooltip || this.tooltipDisplay === "on"
    })} @mousedown=${this.handleMouseDown}><div class="range__container"><input part="input" id="input" class="range__control" title=${this.title} type="range" name=${k(this.name)} ?disabled=${this.disabled} min=${k(this.min)} max=${k(this.max)} step=${this.step || Number.MIN_VALUE} .value=${W(this.value.toString())} aria-describedby="help-text" aria-label=${k(this.ariaLabel)} @change=${this.handleChange} @focus=${this.handleFocus} @input=${this.handleInput} @invalid=${this.handleInvalid} @blur=${this.handleBlur}><cx-tooltip open class="range__tooltip" trigger="manual" ?hoist=${this.tooltipHoist} ?disabled=${this.tooltipDisplay === "off"} distance=${this.tooltipOffset} placement=${this.tooltipPlacement} content=${typeof this.tooltipFormatter == "function" ? this.tooltipFormatter(this.value) : this.value}><div part="thumb" class="range__thumb" @mousedown=${this.handleThumbDragStart} @touchstart=${this.handleThumbDragStart}></div></cx-tooltip></div><slot name="marks"> </slot>${this.markController.renderMarks()}</div></div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${a ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
  }
  renderMultiRange() {
    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), i = this.label ? !0 : !!t, a = this.helpText ? !0 : e, r = this.getConstrainedPercent(
      "min"
      /* MIN */
    ), l = this.getConstrainedPercent(
      "max"
      /* MAX */
    );
    return M`<div part="form-control" class=${p({
      "form-control": !0,
      "form-control--has-help-text": a,
      "form-control--has-label": i,
      "form-control--medium": !0
    })} @focus=${this.focus} @blur=${this.blur}><label part="form-control-label" class="form-control__label" for="input" aria-hidden=${i ? "false" : "true"}><slot name="label">${this.label}</slot></label><div part="form-control-input" class="form-control-input"><input type="range" class="range-slider__input--min" hidden min=${this.min} max=${this.max} step=${this.step || Number.MIN_VALUE} .value=${String(this._multiValue.min)}><input type="range" class="range-slider__input--max" hidden min=${this.min} max=${this.max} step=${this.step || Number.MIN_VALUE} .value=${String(this._multiValue.max)}><div part="base" class=${p({
      "range-slider": !0,
      "range-slider--disabled": this.disabled,
      "range-slider--dragging": this.multiIsDragging
    })} style=${f({
      "--track-left-inset": `${this.trackLeftInset}%`,
      "--track-right-inset": `${this.trackRightInset}%`
    })} ?data-disabled=${this.disabled} @pointerdown=${this.handleMultiContainerClick}><cx-tooltip open class="range__tooltip range__tooltip--min" trigger="manual" ?hoist=${this.tooltipHoist} ?disabled=${this.tooltipDisplay === "off"} distance=${this.tooltipOffset} placement=${this.tooltipPlacement} content=${typeof this.tooltipFormatter == "function" ? this.tooltipFormatter(this._multiValue.min) : this._multiValue.min}><div part="thumb thumb-lower" class=${p({
      "range-slider__thumb": !0,
      "range-slider__thumb--active": this.multiDragTarget === "min",
      "range-slider__thumb--disabled": this.minThumbDisabled,
      "range-slider__thumb--min": !0,
      "range-slider__thumb--slotted": this.hasSlotController.test("thumb-min")
    })} style=${f(this.getMultiThumbStyle(
      "min"
      /* MIN */
    ))} role="slider" tabindex=${this.disabled || this.minThumbDisabled ? -1 : 0} aria-label=${this.ariaLabelLower ?? "Lower value"} aria-valuemin=${this.min} aria-valuemax=${this.max} aria-valuenow=${this._multiValue.min} aria-valuetext=${String(this._multiValue.min)} ?data-lower=${!0} ?data-disabled=${this.minThumbDisabled} data-min-left=${this.thumbConstraints.min.minLeft} data-max-left=${this.thumbConstraints.min.maxLeft} @pointerdown=${this.handleMinThumbDragStart} @keydown=${this.handleMinThumbKeyDown}><slot name="thumb-min"></slot></div></cx-tooltip><cx-tooltip open class="range__tooltip range__tooltip--max" trigger="manual" ?hoist=${this.tooltipHoist} ?disabled=${this.tooltipDisplay === "off"} distance=${this.tooltipOffset} placement=${this.tooltipPlacement} content=${typeof this.tooltipFormatter == "function" ? this.tooltipFormatter(this._multiValue.max) : this._multiValue.max}><div part="thumb thumb-upper" class=${p({
      "range-slider__thumb": !0,
      "range-slider__thumb--active": this.multiDragTarget === "max",
      "range-slider__thumb--disabled": this.maxThumbDisabled,
      "range-slider__thumb--max": !0,
      "range-slider__thumb--slotted": this.hasSlotController.test("thumb-max")
    })} style=${f(this.getMultiThumbStyle(
      "max"
      /* MAX */
    ))} role="slider" tabindex=${this.disabled || this.maxThumbDisabled ? -1 : 0} aria-label=${this.ariaLabelUpper ?? "Upper value"} aria-valuemin=${this.min} aria-valuemax=${this.max} aria-valuenow=${this._multiValue.max} aria-valuetext=${String(this._multiValue.max)} ?data-upper=${!0} ?data-disabled=${this.maxThumbDisabled} data-min-left=${this.thumbConstraints.max.minLeft} data-max-left=${this.thumbConstraints.max.maxLeft} @pointerdown=${this.handleMaxThumbDragStart} @keydown=${this.handleMaxThumbKeyDown}><slot name="thumb-max"></slot></div></cx-tooltip><div part="range" class=${p({
      "range-slider__range": !0,
      "range-slider__range--active": this.multiDragTarget === "range"
      /* RANGE */
    })} style=${f(this.getRangeBarStyle(r, l))} ?data-active=${this.multiDragTarget === "range"} @pointerdown=${this.initiateMultiRangeDrag}></div></div></div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${a ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
  }
  render() {
    return this.multi ? this.renderMultiRange() : this.renderSingleRange();
  }
};
s.styles = [
  P,
  F,
  ot
];
s.dependencies = {
  "cx-resize-observer": R,
  "cx-tooltip": H
};
n([
  c(".range__control")
], s.prototype, "input", 2);
n([
  c(".range-slider__input--min")
], s.prototype, "multiInputMin", 2);
n([
  c(".range-slider__input--max")
], s.prototype, "multiInputMax", 2);
n([
  c(".range__tooltip")
], s.prototype, "output", 2);
n([
  c(".range__tooltip--min")
], s.prototype, "minTooltip", 2);
n([
  c(".range__tooltip--max")
], s.prototype, "maxTooltip", 2);
n([
  c(".range-slider__thumb--min")
], s.prototype, "minThumb", 2);
n([
  c(".range-slider__thumb--max")
], s.prototype, "maxThumb", 2);
n([
  c(".range")
], s.prototype, "range", 2);
n([
  c(".range-slider")
], s.prototype, "multiContainer", 2);
n([
  g()
], s.prototype, "hasFocus", 2);
n([
  g()
], s.prototype, "hasTooltip", 2);
n([
  g()
], s.prototype, "_multiValue", 2);
n([
  g()
], s.prototype, "_singleValue", 2);
n([
  g()
], s.prototype, "multiDragTarget", 2);
n([
  g()
], s.prototype, "multiIsDragging", 2);
n([
  u()
], s.prototype, "state", 2);
n([
  u()
], s.prototype, "title", 2);
n([
  u()
], s.prototype, "name", 2);
n([
  u({
    converter: {
      fromAttribute: (t) => {
        if (t.includes(" ")) {
          const e = t.split(" ").map((i) => Number.parseFloat(i.trim()));
          return [e[0] ?? 0, e[1] ?? 0];
        }
        return Number.parseFloat(t) || 0;
      },
      toAttribute: (t) => Array.isArray(t) ? t.join(" ") : String(t)
    },
    reflect: !0
  })
], s.prototype, "value", 1);
n([
  u({ reflect: !0, type: Boolean })
], s.prototype, "multi", 2);
n([
  u()
], s.prototype, "label", 2);
n([
  u({ attribute: "help-text" })
], s.prototype, "helpText", 2);
n([
  u({ reflect: !0, type: Boolean })
], s.prototype, "disabled", 2);
n([
  u({ type: Number })
], s.prototype, "min", 2);
n([
  u({ type: Number })
], s.prototype, "max", 2);
n([
  u({ reflect: !0, type: Number })
], s.prototype, "step", 2);
n([
  u({ attribute: "mark-label-spacing", type: Number })
], s.prototype, "markLabelSpacing", 2);
n([
  u({ attribute: "tooltip-placement" })
], s.prototype, "tooltipPlacement", 2);
n([
  u({ attribute: "tooltip-display" })
], s.prototype, "tooltipDisplay", 2);
n([
  u({ attribute: "tooltip-hoist", type: Boolean })
], s.prototype, "tooltipHoist", 2);
n([
  u({ attribute: "tooltip-formatter" })
], s.prototype, "tooltipFormatter", 2);
n([
  u()
], s.prototype, "form", 2);
n([
  u({ attribute: "snap-threshold", type: Number })
], s.prototype, "snapThreshold", 2);
n([
  u({ attribute: "show-marks", type: Boolean })
], s.prototype, "showMarks", 2);
n([
  u({ attribute: "tooltip-offset", type: Number })
], s.prototype, "tooltipOffset", 2);
n([
  u({ attribute: "min-thumb-disabled", reflect: !0, type: Boolean })
], s.prototype, "minThumbDisabled", 2);
n([
  u({ attribute: "max-thumb-disabled", reflect: !0, type: Boolean })
], s.prototype, "maxThumbDisabled", 2);
n([
  u({ attribute: "range-slide-disabled", type: Boolean })
], s.prototype, "rangeSlideDisabled", 2);
n([
  u({ attribute: "thumbs-crossover" })
], s.prototype, "thumbsCrossover", 2);
n([
  u({ attribute: "aria-label-lower" })
], s.prototype, "ariaLabelLower", 2);
n([
  u({ attribute: "aria-label-upper" })
], s.prototype, "ariaLabelUpper", 2);
n([
  u({ attribute: "no-overlap", reflect: !0, type: Boolean })
], s.prototype, "noOverlap", 2);
n([
  u({ attribute: "thumb-edge-mode" })
], s.prototype, "thumbEdgeMode", 2);
n([
  g()
], s.prototype, "marks", 2);
n([
  O()
], s.prototype, "defaultValue", 2);
n([
  v(["min", "max", "step"])
], s.prototype, "initMarks", 1);
n([
  E({ passive: !0 })
], s.prototype, "handleThumbDragStart", 1);
n([
  v("value", { waitUntilFirstUpdate: !0 })
], s.prototype, "handleValueChange", 1);
n([
  v("disabled", { waitUntilFirstUpdate: !0 })
], s.prototype, "handleDisabledChange", 1);
n([
  v("hasTooltip", { waitUntilFirstUpdate: !0 })
], s.prototype, "syncRange", 1);
n([
  $(100)
], s.prototype, "handleMultiResize", 1);
n([
  v(["min", "max", "step"], { waitUntilFirstUpdate: !0 })
], s.prototype, "handleConstraintsChange", 1);
n([
  v("_multiValue", { waitUntilFirstUpdate: !0 })
], s.prototype, "handleMultiValueChange", 1);
s = n([
  U("cx-range")
], s);
export {
  s as default
};
