@orangelogic/design-system 2.19.0-pr77202.21

package/library/components/range.js

@@ -0,0 +1,1333 @@
+import { i as T, n as h, C as V, x as _, c as D } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as w } from "../chunks/component.styles.DtouHn2g.js";
+import { f as $ } from "../chunks/form-control.styles.j0hNjZTU.js";
+import { d as C } from "../chunks/debounce.DZNkg8Q5.js";
+import { d as S } from "../chunks/default-value.BrNrMtnz.js";
+import { d as y } from "../chunks/drag.DXEXVXPv.js";
+import { F as L } from "../chunks/form.BFLbw9Rz.js";
+import { L as z } from "../chunks/i18n.C6c6_pqI.js";
+import { c as m } from "../chunks/math.DqTA6ya4.js";
+import { H as I } from "../chunks/slot.DJLm4Dig.js";
+import { w as g } from "../chunks/watch.BCJD77bD.js";
+import { r as b } from "../chunks/state.Dt9F_SuS.js";
+import { t as R } from "../chunks/event-options.CYHYGOd8.js";
+import { e as d } from "../chunks/query.BBf1UFkC.js";
+import { e as p } from "../chunks/class-map.DqNfBvJI.js";
+import { o as x } from "../chunks/if-defined.CKupVaWs.js";
+import { l as P } from "../chunks/live.DCdtYl87.js";
+import { o as c } from "../chunks/style-map.lEJHEwk3.js";
+import F from "./tooltip.js";
+const U = T`
+  :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;
+
+    display: block;
+    isolation: isolate;
+  }
+
+  .range {
+    position: relative;
+    cursor: pointer;
+    margin: var(--cx-spacing-large) 0;
+  }
+
+  .range::before {
+    content: '';
+    background-color: var(--track-color-active);
+    border-radius: var(--border-radius);
+    border: var(--track-border);
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--percent);
+    z-index: 1;
+  }
+
+  .range__container {
+    position: relative;
+    height: var(--track-height);
+  }
+
+  .range__control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    -webkit-appearance: none;
+    border-radius: var(--border-radius);
+    width: 100%;
+    height: var(--track-height);
+    background: transparent;
+    line-height: var(--cx-input-height-medium);
+    vertical-align: middle;
+    margin: 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;
+  }
+
+  .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%
+    );
+  }
+
+  /* Webkit */
+  .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 {
+    display: none;
+    visibility: hidden; /** Just display: none doesn't seem to work in Firefox */
+  }
+
+  /* Firefox */
+  .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;
+  }
+
+  /* States */
+  .range__control:focus-visible {
+    outline: none;
+  }
+
+  .range__control:disabled {
+    opacity: 0.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: solid 1px transparent;
+    }
+
+    .range__control::-moz-range-thumb {
+      border: solid 1px transparent;
+    }
+  }
+
+  ::slotted([slot='marks']) {
+    display: none;
+  }
+
+  .range__marks {
+    position: absolute;
+    height: 10px;
+    width: 100%;
+    transform: translateY(-50%);
+    display: flex;
+  }
+
+  .mark__tick {
+    height: 10px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 1px solid var(--cx-color-neutral-1000);
+  }
+  .mark__tick--hidden {
+    visibility: hidden;
+  }
+  .mark__label {
+    position: absolute;
+    top: var(--cx-spacing-medium);
+    transform: translateX(-50%);
+  }
+  .mark__label--hidden {
+    visibility: hidden;
+  }
+
+  .range__thumb {
+    position: absolute;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    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%;
+    transform: translate(-50%, -50%);
+    left: var(--percent);
+    z-index: 1;
+  }
+
+  .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: 0.5;
+    cursor: default;
+  }
+
+  /* ============================================
+   * Multi Range Styles
+   * ============================================ */
+
+  .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;
+    display: block;
+    position: relative;
+    width: 100%;
+    height: var(--track-height);
+  }
+
+  .range-slider::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: var(--track-left-inset);
+    width: calc(100% - var(--track-left-inset) - var(--track-right-inset));
+    height: 100%;
+    background: var(--track-color-inactive);
+    border-radius: calc(var(--track-height) / 2);
+  }
+
+  .range-slider--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .range-slider__thumb {
+    position: absolute;
+    z-index: 3;
+    top: 50%;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    transform: translate(-50%, -50%);
+    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 0.15s ease;
+  }
+
+  .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: 0.6;
+  }
+
+  .range-slider__thumb--slotted {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    width: auto;
+    height: auto;
+    display: flex;
+  }
+
+  .range-slider__thumb--slotted ::slotted(*) {
+    pointer-events: none;
+  }
+
+  .range-slider__range {
+    position: absolute;
+    z-index: 1;
+    transform: translate(0, -50%);
+    top: 50%;
+    height: 100%;
+    background: var(--track-color-active);
+    cursor: pointer;
+    border-radius: var(--border-radius);
+    border: var(--track-border);
+  }
+
+  .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;
+  }
+`;
+function N({
+  edgeMode: t = "center",
+  maxOffset: i,
+  minOffset: e,
+  percentValue: a
+}) {
+  const n = t === "inside" ? e : 0, l = t === "inside" ? 100 - i : 100;
+  let o = a - e, u = a + i;
+  if (t === "inside")
+    o < n && (o = n, u = n + e + i), u > l && (u = l, o = l - e - i);
+  else {
+    if (o < 0) {
+      const f = -o;
+      o = 0, u += f;
+    }
+    if (u > 100) {
+      const f = u - 100;
+      u = 100, o -= f;
+    }
+  }
+  return {
+    maxThumbMaxLeft: m(l, 0, 100),
+    maxThumbMinLeft: m(u, 0, 100),
+    minThumbMaxLeft: m(o, 0, 100),
+    minThumbMinLeft: m(n, 0, 100)
+  };
+}
+var O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, s = (t, i, e, a) => {
+  for (var n = a > 1 ? void 0 : a ? A(i, e) : i, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (n = (a ? o(i, e, n) : o(n)) || n);
+  return a && n && O(i, e, n), n;
+};
+let r = class extends V {
+  constructor() {
+    super(), this.formControlController = new L(this), this.hasSlotController = new I(
+      this,
+      "help-text",
+      "label",
+      "thumb-min",
+      "thumb-max"
+    ), this.localize = new z(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.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, i] = this.value, e = Math.max(this.min, Math.min(t, this.max)), a = Math.max(this.min, Math.min(i, this.max));
+      (t !== e || i !== a) && (this.value = [e, a]);
+    } else {
+      const t = this.value;
+      t < this.min && (this.value = this.min), t > this.max && (this.value = this.max);
+    }
+    this.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() {
+    if (!this.showMarks)
+      return;
+    const t = this.getAllMarks(), i = [];
+    if (t && t.length > 0)
+      t.forEach((e) => {
+        const a = e.getAttribute("value");
+        if (!a)
+          return;
+        const n = Number.parseFloat(a);
+        Number.isNaN(n) || i.push({
+          hidden: e.hasAttribute("hidden"),
+          label: e.textContent || "",
+          value: n
+        });
+      });
+    else {
+      const e = this.step || 1, a = this.min, n = this.max;
+      for (let l = a; l <= n; l += e)
+        i.push({
+          hidden: !1,
+          label: l.toString(),
+          value: l
+        });
+    }
+    this.marks = i;
+  }
+  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 i = t;
+    const e = this.marks.map((u) => u.value);
+    let a = 1 / 0, n = 0;
+    for (const u of e) {
+      const f = this.valueToPercentage(u), M = this.input.clientWidth;
+      let v = M * (f / 100);
+      this.localize.dir() === "rtl" && (v = M - v);
+      const k = Math.abs(i - v);
+      if (k > a)
+        break;
+      a = k, n = v;
+    }
+    this.step ? a <= this.snapThreshold && (i = n) : i = n;
+    const l = m(
+      this.pixelsToValue(i),
+      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"), y(this, {
+      initialEvent: t,
+      onMove: (i) => {
+        this.handleInput(), document.body.style.userSelect = "none", this.snapValue(i);
+      },
+      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 i = t.x - this.input.getBoundingClientRect().left;
+    this.snapValue(i), 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 m((t - this.min) / (this.max - this.min), 0, 1) * 100;
+  }
+  pixelsToValue(t) {
+    const i = this.input.clientWidth;
+    return (this.localize.dir() === "rtl" ? i - t : t) / i * 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, i = m(
+        (t - this.min) / (this.max - this.min),
+        0,
+        1
+      );
+      this.syncProgress(i), 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, i) {
+    const e = this._multiValue.min, a = this._multiValue.max;
+    let n = t === "min" ? i : this._multiValue.min, l = t === "max" ? i : this._multiValue.max;
+    return n > l && (this.thumbsCrossover === "block" ? t === "min" ? n = this._multiValue.max : l = this._multiValue.min : [n, l] = [l, n]), this.setMultiValue(n, l), this._multiValue.min !== e || this._multiValue.max !== a;
+  }
+  /** Finds the next mark value greater than the current value */
+  findNextMark(t) {
+    return this.marks.find((i) => i.value > t)?.value;
+  }
+  /** Finds the previous mark value less than the current value */
+  findPreviousMark(t) {
+    for (let i = this.marks.length - 1; i >= 0; i--)
+      if (this.marks[i].value < t)
+        return this.marks[i].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 i = this.findNextMark(t);
+    return i !== void 0 ? (this.value = i, !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 i = this.findPreviousMark(t);
+    return i !== void 0 ? (this.value = i, !0) : !1;
+  }
+  /** Handles step up for multi mode */
+  stepUpMulti(t) {
+    const i = this._multiValue[t];
+    if (this.step)
+      return this.updateMultiThumbValue(t, i + this.step);
+    const e = this.findNextMark(i);
+    return e !== void 0 ? this.updateMultiThumbValue(t, e) : !1;
+  }
+  /** Handles step down for multi mode */
+  stepDownMulti(t) {
+    const i = this._multiValue[t];
+    if (this.step)
+      return this.updateMultiThumbValue(t, i - this.step);
+    const e = this.findPreviousMark(i);
+    return e !== void 0 ? this.updateMultiThumbValue(t, e) : !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();
+  }
+  getAllMarks() {
+    return this.querySelector(
+      "datalist"
+    )?.querySelectorAll("option");
+  }
+  renderMarks() {
+    const t = this.localize.dir() === "rtl";
+    return this.marks.map((i) => {
+      const e = this.valueToPercentage(
+        t ? 100 - i.value : i.value
+      );
+      return _` <div
+          class=${p({
+        mark__tick: !0,
+        "mark__tick--hidden": i.hidden
+      })}
+          part="mark-tick"
+          style=${c({ left: `${e}%` })}
+        ></div>
+        <div
+          class=${p({
+        mark__label: !0,
+        "mark__label--hidden": i.hidden
+      })}
+          part="mark-label"
+          style=${c({ left: `${e}%` })}
+        >
+          ${i.label}
+        </div>`;
+    });
+  }
+  handleMultiResize() {
+    this.noOverlap && this.updateNoOverlapConstraints(), this.requestUpdate();
+  }
+  multiValueToPercent(t) {
+    return m((t - this.min) / (this.max - this.min), 0, 1) * 100;
+  }
+  multiPercentToValue(t) {
+    return t / 100 * (this.max - this.min) + this.min;
+  }
+  multiPositionToValue(t, i) {
+    const e = t / i * 100;
+    return this.multiPercentToValue(e);
+  }
+  getConstrainedPercent(t) {
+    const i = this._multiValue[t];
+    let e = this.multiValueToPercent(i);
+    if (this.noOverlap) {
+      const a = this.thumbConstraints[t];
+      e = m(e, a.minLeft, a.maxLeft);
+    }
+    return m(e, 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, i) {
+    const e = this.trackLeftInset, a = this.trackRightInset, n = Math.max(t, e), l = Math.min(i, 100 - a), o = Math.max(0, l - n);
+    return {
+      left: `${n}%`,
+      /**
+       * Hide the bar when width is 0 to prevent border from showing
+       */
+      visibility: o === 0 ? "hidden" : "visible",
+      width: `${o}%`
+    };
+  }
+  setMultiValue(t, i) {
+    this.multiInputMin.value = String(t), this.multiInputMax.value = String(i);
+    let e = Number.parseFloat(this.multiInputMin.value), a = Number.parseFloat(this.multiInputMax.value);
+    e = m(e, this.min, this.max), a = m(a, this.min, this.max), e > a && (this.thumbsCrossover === "swap" ? (this.multiDragTarget === "min" ? this.multiDragTarget = "max" : this.multiDragTarget === "max" && (this.multiDragTarget = "min"), [e, a] = [a, e]) : this.multiDragTarget === "min" ? e = this._multiValue.max : this.multiDragTarget === "max" ? a = this._multiValue.min : (e = Math.min(e, a), a = Math.max(e, a))), !(this._multiValue.min === e && this._multiValue.max === a) && (this._multiValue = { max: a, min: e });
+  }
+  updateNoOverlapConstraints() {
+    if (!this.noOverlap)
+      return;
+    const t = this.multiValueToPercent(this._multiValue.min), i = this.minThumbOffset, e = this.maxThumbOffset;
+    if (this.thumbsCrossover === "block") {
+      const a = N({
+        edgeMode: this.thumbEdgeMode,
+        maxOffset: e,
+        minOffset: i,
+        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, i) {
+    if (this.disabled || (i === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
+      return;
+    t.preventDefault(), t.stopPropagation(), this.hasTooltip = !0, this.multiIsDragging = !0, this.multiDragTarget = i === "min" ? "min" : "max", this.emit("cx-thumb-drag-start");
+    const n = this.multiContainer.getBoundingClientRect().width;
+    y(this, {
+      initialEvent: t,
+      onMove: (l) => {
+        const o = this.multiPositionToValue(l, n);
+        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 i = this.multiContainer.getBoundingClientRect(), e = i.width, a = t.clientX - i.left;
+    this.hasTooltip = !0, y(this, {
+      initialEvent: t,
+      onMove: (n) => {
+        const l = this.multiPositionToValue(n, e) - this.multiPositionToValue(a, e);
+        let o = this.multiDragStartValue.min + l, u = this.multiDragStartValue.max + l;
+        o < this.min && (o = this.min, u = this.min + this.multiRangeWidth), u > this.max && (u = this.max, o = this.max - this.multiRangeWidth), this.minThumbDisabled && (o = this._multiValue.min, u = this._multiValue.min + this.multiRangeWidth), this.maxThumbDisabled && (u = this._multiValue.max, o = this._multiValue.max - this.multiRangeWidth), this.setMultiValue(o, u), 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 i = t.target;
+    if (i.classList.contains("range-slider__thumb") || i.classList.contains("range-slider__range") || this.minThumbDisabled && this.maxThumbDisabled)
+      return;
+    const e = this.multiContainer.getBoundingClientRect(), a = e.width, n = t.clientX - e.left, l = this.multiPositionToValue(n, a), o = Math.abs(this._multiValue.min - l), u = 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 <= u ? this.setMultiValue(l, this._multiValue.max) : this.setMultiValue(this._multiValue.min, l), this.emit("cx-change");
+  }
+  handleMultiKeyDown(t, i) {
+    if (this.disabled || (i === "min" ? this.minThumbDisabled : this.maxThumbDisabled))
+      return;
+    let a = !1;
+    switch (t.key) {
+      case "ArrowLeft":
+      case "ArrowDown": {
+        t.preventDefault(), a = this.stepDown(i);
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowUp": {
+        t.preventDefault(), a = this.stepUp(i);
+        break;
+      }
+      case "Home": {
+        t.preventDefault(), a = !0, this.updateMultiThumbValue(i, this.min);
+        break;
+      }
+      case "End": {
+        t.preventDefault(), a = !0, this.updateMultiThumbValue(i, 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"), i = this.hasSlotController.test("help-text"), e = this.label ? !0 : !!t, a = this.helpText ? !0 : !!i;
+    return _`
+      <div
+        part="form-control"
+        class=${p({
+      "form-control": !0,
+      "form-control--has-help-text": a,
+      // range only has one size
+      "form-control--has-label": e,
+      "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=${e ? "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=${x(this.name)}
+                ?disabled=${this.disabled}
+                min=${x(this.min)}
+                max=${x(this.max)}
+                step=${this.step || Number.MIN_VALUE}
+                .value=${P(this.value.toString())}
+                aria-describedby="help-text"
+                aria-label=${x(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>
+
+            <div
+              class="range__marks"
+              style=${c({
+      visibility: this.showMarks ? "visible" : "hidden"
+    })}
+            >
+              ${this.renderMarks()}
+            </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>
+    `;
+  }
+  renderMultiRange() {
+    const t = this.hasSlotController.test("label"), i = this.hasSlotController.test("help-text"), e = this.label ? !0 : !!t, a = this.helpText ? !0 : i, n = this.getConstrainedPercent(
+      "min"
+      /* MIN */
+    ), l = this.getConstrainedPercent(
+      "max"
+      /* MAX */
+    );
+    return _`
+      <div
+        part="form-control"
+        class=${p({
+      "form-control": !0,
+      "form-control--has-help-text": a,
+      "form-control--has-label": e,
+      "form-control--medium": !0
+    })}
+        @focus=${this.focus}
+        @blur=${this.blur}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${e ? "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=${c({
+      "--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=${c(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=${c(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=${c(this.getRangeBarStyle(n, 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();
+  }
+};
+r.styles = [
+  w,
+  $,
+  U
+];
+r.dependencies = {
+  "cx-tooltip": F
+};
+s([
+  d(".range__control")
+], r.prototype, "input", 2);
+s([
+  d(".range-slider__input--min")
+], r.prototype, "multiInputMin", 2);
+s([
+  d(".range-slider__input--max")
+], r.prototype, "multiInputMax", 2);
+s([
+  d(".range__tooltip")
+], r.prototype, "output", 2);
+s([
+  d(".range__tooltip--min")
+], r.prototype, "minTooltip", 2);
+s([
+  d(".range__tooltip--max")
+], r.prototype, "maxTooltip", 2);
+s([
+  d(".range-slider__thumb--min")
+], r.prototype, "minThumb", 2);
+s([
+  d(".range-slider__thumb--max")
+], r.prototype, "maxThumb", 2);
+s([
+  d(".range")
+], r.prototype, "range", 2);
+s([
+  d(".range-slider")
+], r.prototype, "multiContainer", 2);
+s([
+  b()
+], r.prototype, "hasFocus", 2);
+s([
+  b()
+], r.prototype, "hasTooltip", 2);
+s([
+  b()
+], r.prototype, "_multiValue", 2);
+s([
+  b()
+], r.prototype, "_singleValue", 2);
+s([
+  b()
+], r.prototype, "multiDragTarget", 2);
+s([
+  b()
+], r.prototype, "multiIsDragging", 2);
+s([
+  h()
+], r.prototype, "state", 2);
+s([
+  h()
+], r.prototype, "title", 2);
+s([
+  h()
+], r.prototype, "name", 2);
+s([
+  h({
+    converter: {
+      fromAttribute: (t) => {
+        if (t.includes(" ")) {
+          const i = t.split(" ").map((e) => Number.parseFloat(e.trim()));
+          return [i[0] ?? 0, i[1] ?? 0];
+        }
+        return Number.parseFloat(t) || 0;
+      },
+      toAttribute: (t) => Array.isArray(t) ? t.join(" ") : String(t)
+    },
+    reflect: !0
+  })
+], r.prototype, "value", 1);
+s([
+  h({ reflect: !0, type: Boolean })
+], r.prototype, "multi", 2);
+s([
+  h()
+], r.prototype, "label", 2);
+s([
+  h({ attribute: "help-text" })
+], r.prototype, "helpText", 2);
+s([
+  h({ reflect: !0, type: Boolean })
+], r.prototype, "disabled", 2);
+s([
+  h({ type: Number })
+], r.prototype, "min", 2);
+s([
+  h({ type: Number })
+], r.prototype, "max", 2);
+s([
+  h({ reflect: !0, type: Number })
+], r.prototype, "step", 2);
+s([
+  h({ attribute: "tooltip-placement" })
+], r.prototype, "tooltipPlacement", 2);
+s([
+  h({ attribute: "tooltip-display" })
+], r.prototype, "tooltipDisplay", 2);
+s([
+  h({ attribute: "tooltip-hoist", type: Boolean })
+], r.prototype, "tooltipHoist", 2);
+s([
+  h({ attribute: "tooltip-formatter" })
+], r.prototype, "tooltipFormatter", 2);
+s([
+  h()
+], r.prototype, "form", 2);
+s([
+  h({ attribute: "snap-threshold", type: Number })
+], r.prototype, "snapThreshold", 2);
+s([
+  h({ attribute: "show-marks", type: Boolean })
+], r.prototype, "showMarks", 2);
+s([
+  h({ attribute: "tooltip-offset", type: Number })
+], r.prototype, "tooltipOffset", 2);
+s([
+  h({ attribute: "min-thumb-disabled", reflect: !0, type: Boolean })
+], r.prototype, "minThumbDisabled", 2);
+s([
+  h({ attribute: "max-thumb-disabled", reflect: !0, type: Boolean })
+], r.prototype, "maxThumbDisabled", 2);
+s([
+  h({ attribute: "range-slide-disabled", type: Boolean })
+], r.prototype, "rangeSlideDisabled", 2);
+s([
+  h({ attribute: "thumbs-crossover" })
+], r.prototype, "thumbsCrossover", 2);
+s([
+  h({ attribute: "aria-label-lower" })
+], r.prototype, "ariaLabelLower", 2);
+s([
+  h({ attribute: "aria-label-upper" })
+], r.prototype, "ariaLabelUpper", 2);
+s([
+  h({ attribute: "no-overlap", reflect: !0, type: Boolean })
+], r.prototype, "noOverlap", 2);
+s([
+  h({ attribute: "thumb-edge-mode" })
+], r.prototype, "thumbEdgeMode", 2);
+s([
+  b()
+], r.prototype, "marks", 2);
+s([
+  S()
+], r.prototype, "defaultValue", 2);
+s([
+  g(["min", "max", "step"])
+], r.prototype, "initMarks", 1);
+s([
+  R({ passive: !0 })
+], r.prototype, "handleThumbDragStart", 1);
+s([
+  g("value", { waitUntilFirstUpdate: !0 })
+], r.prototype, "handleValueChange", 1);
+s([
+  g("disabled", { waitUntilFirstUpdate: !0 })
+], r.prototype, "handleDisabledChange", 1);
+s([
+  g("hasTooltip", { waitUntilFirstUpdate: !0 })
+], r.prototype, "syncRange", 1);
+s([
+  C(100)
+], r.prototype, "handleMultiResize", 1);
+s([
+  g(["min", "max", "step"], { waitUntilFirstUpdate: !0 })
+], r.prototype, "handleConstraintsChange", 1);
+s([
+  g("_multiValue", { waitUntilFirstUpdate: !0 })
+], r.prototype, "handleMultiValueChange", 1);
+r = s([
+  D("cx-range")
+], r);
+export {
+  r as default
+};