@synergy-design-system/components 2.4.3 → 2.6.0

package/dist/chunks/chunk.X7LEPG3A.js

@@ -0,0 +1,681 @@
+import {
+  SynTooltip
+} from "./chunk.AZVHDONN.js";
+import {
+  arraysDiffer,
+  getNormalizedValueFromClientX,
+  numericSort
+} from "./chunk.WO6VXGWQ.js";
+import {
+  range_styles_default
+} from "./chunk.277APOW3.js";
+import {
+  defaultValue
+} from "./chunk.RBG37CD4.js";
+import {
+  form_control_custom_styles_default,
+  form_control_styles_default
+} from "./chunk.FKKJBKYL.js";
+import {
+  FormControlController,
+  customErrorValidityState,
+  validValidityState
+} from "./chunk.YCNVMJNR.js";
+import {
+  HasSlotController
+} from "./chunk.WVVQK5TE.js";
+import {
+  LocalizeController
+} from "./chunk.QQ3HY3YJ.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.3I5JDTGT.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.HLQ75E45.js";
+
+// src/components/range/range.component.ts
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, queryAll } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var _value, _rangeValues, _hasFocus, _validationError, _validationTimeout, _nextId, _lastChangeValue, _rtl, rtl_get, _onClickTrack, onClickTrack_fn, _onClickThumb, onClickThumb_fn, _onDragThumb, onDragThumb_fn, _onReleaseThumb, onReleaseThumb_fn, _moveThumb, moveThumb_fn, _updateActiveTrack, updateActiveTrack_fn, _onKeyPress, onKeyPress_fn, _onBlur, onBlur_fn, _updateTooltip, updateTooltip_fn, _onFocusThumb, onFocusThumb_fn, _handleInvalid, handleInvalid_fn, _updatePrefixSuffixPosition, updatePrefixSuffixPosition_fn;
+var SynRange = class extends SynergyElement {
+  constructor() {
+    super();
+    __privateAdd(this, _rtl);
+    __privateAdd(this, _onClickTrack);
+    __privateAdd(this, _onClickThumb);
+    __privateAdd(this, _onDragThumb);
+    __privateAdd(this, _onReleaseThumb);
+    __privateAdd(this, _moveThumb);
+    __privateAdd(this, _updateActiveTrack);
+    __privateAdd(this, _onKeyPress);
+    __privateAdd(this, _onBlur);
+    __privateAdd(this, _updateTooltip);
+    __privateAdd(this, _onFocusThumb);
+    __privateAdd(this, _handleInvalid);
+    __privateAdd(this, _updatePrefixSuffixPosition);
+    this.name = "";
+    this.label = "";
+    this.helpText = "";
+    this.disabled = false;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.size = "medium";
+    this.tooltipPlacement = "top";
+    this.defaultValue = "0";
+    this.form = "";
+    this.hasSlotController = new HasSlotController(this, "help-text", "label", "prefix", "suffix", "ticks");
+    this.formControlController = new FormControlController(this, { assumeInteractionOn: ["syn-change"] });
+    this.localize = new LocalizeController(this);
+    __privateAdd(this, _value, [0]);
+    __privateAdd(this, _rangeValues, /* @__PURE__ */ new Map());
+    __privateAdd(this, _hasFocus, false);
+    __privateAdd(this, _validationError, "");
+    __privateAdd(this, _validationTimeout, void 0);
+    __privateAdd(this, _nextId, 1);
+    __privateAdd(this, _lastChangeValue, []);
+    this.tooltipFormatter = this.localize.number.bind(this.localize);
+  }
+  set value(value) {
+    __privateSet(this, _value, value ? value.split(" ").map((n) => +n).sort(numericSort) : []);
+  }
+  get value() {
+    return __privateGet(this, _value).slice().sort(numericSort).join(" ");
+  }
+  /** Gets or sets the current values of the range as an array of numbers */
+  set valueAsArray(value) {
+    const oldValue = __privateGet(this, _value);
+    __privateSet(this, _value, Array.isArray(value) ? value.slice().sort(numericSort) : value || []);
+    if (arraysDiffer(oldValue, __privateGet(this, _value))) {
+      this.requestUpdate("value", oldValue.join(" "));
+    }
+  }
+  get valueAsArray() {
+    return [...__privateGet(this, _value)].sort(numericSort);
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+    __privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
+    this.thumbs.forEach((thumb) => {
+      const tooltip = thumb.parentElement;
+      tooltip.updateComplete.then(() => {
+        const tooltipBody = tooltip.shadowRoot.querySelector(".tooltip__body");
+        tooltipBody == null ? void 0 : tooltipBody.setAttribute("aria-hidden", "true");
+      });
+    });
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (this.min > this.max) {
+      [this.min, this.max] = [this.max, this.min];
+    }
+    if (this.step > this.max - this.min) {
+      this.step = this.max - this.min;
+    }
+    if (this.step <= 0) {
+      this.step = 1;
+    }
+    const adjustedValue = __privateGet(this, _value).map((value) => {
+      if (value <= this.min)
+        return this.min;
+      if (value >= this.max)
+        return this.max;
+      const nextValue = this.min + this.step * Math.round((value - this.min) / this.step);
+      if (nextValue > this.max)
+        return this.max;
+      return nextValue;
+    });
+    if (arraysDiffer(__privateGet(this, _value), adjustedValue)) {
+      __privateSet(this, _value, adjustedValue);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    for (const thumb of this.thumbs) {
+      const rangeId = +thumb.dataset.rangeId;
+      if (!__privateGet(this, _rangeValues).has(rangeId))
+        continue;
+      __privateMethod(this, _moveThumb, moveThumb_fn).call(this, thumb, __privateGet(this, _rangeValues).get(rangeId));
+    }
+    __privateMethod(this, _updateActiveTrack, updateActiveTrack_fn).call(this);
+  }
+  focus(options) {
+    const firstThumb = this.thumbs.item(0);
+    if (firstThumb) {
+      firstThumb.focus(options);
+    } else {
+      super.focus(options);
+    }
+  }
+  /**
+   * Checks for validity but does not show a validation message.
+   * Returns `true` when valid and `false` when invalid.
+   */
+  checkValidity() {
+    if (this.disabled)
+      return true;
+    const isValid = !__privateGet(this, _validationError);
+    if (!isValid) {
+      this.formControlController.emitInvalidEvent();
+    }
+    return isValid;
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.disabled)
+      return true;
+    const isValid = this.validity.valid;
+    this.formControlController.setValidity(isValid);
+    this.validationInput.hidden = true;
+    clearTimeout(__privateGet(this, _validationTimeout));
+    if (!isValid) {
+      this.validationInput.hidden = false;
+      this.validationInput.reportValidity();
+      __privateSet(this, _validationTimeout, setTimeout(() => {
+        this.validationInput.hidden = true;
+      }, 1e4));
+    }
+    return isValid;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    __privateSet(this, _validationError, message);
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (__privateGet(this, _validationError))
+      return customErrorValidityState;
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return __privateGet(this, _validationError);
+  }
+  /* eslint-disable @typescript-eslint/unbound-method */
+  renderThumbs(hasLabel) {
+    const isMultiple = __privateGet(this, _value).length > 1;
+    __privateGet(this, _rangeValues).clear();
+    return __privateGet(this, _value).map((value, index) => {
+      __privateSet(this, _nextId, __privateGet(this, _nextId) + 1);
+      const rangeId = __privateGet(this, _nextId);
+      __privateGet(this, _rangeValues).set(rangeId, value);
+      const id = `thumb-${rangeId}`;
+      let ariaLabel = "";
+      let ariaLabeledBy = "";
+      if (!isMultiple) {
+        ariaLabeledBy = hasLabel ? "label aria-label-hidden" : "";
+      } else {
+        ariaLabeledBy = hasLabel ? `label aria-label-hidden ${id}` : `aria-label-hidden ${id}`;
+        if (index === 0) {
+          ariaLabel = `${this.localize.term("rangeMin")} (${this.tooltipFormatter(value)})`;
+        } else if (index === __privateGet(this, _value).length - 1) {
+          ariaLabel = `${this.localize.term("rangeMax")} (${this.tooltipFormatter(value)})`;
+        } else {
+          ariaLabel = this.tooltipFormatter(value);
+        }
+      }
+      return html`
+        <syn-tooltip
+          hoist
+          .disabled=${this.tooltipPlacement === "none" || this.disabled}
+          .placement=${this.tooltipPlacement}
+          trigger="focus"
+        >
+          <div
+            aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+            aria-labelledby=${ariaLabeledBy}
+            aria-label=${ariaLabel}
+            aria-valuemax="${this.max}"
+            aria-valuemin="${this.min}"
+            aria-valuenow="${value}"
+            aria-valuetext="${this.tooltipFormatter(value)}"
+            class="thumb"
+            data-range-id="${rangeId}"
+            id=${id}
+            part="thumb"
+            role="slider"
+            tabindex="${this.disabled ? -1 : 0}"
+            @pointerdown=${__privateMethod(this, _onClickThumb, onClickThumb_fn)}
+            @pointermove=${__privateMethod(this, _onDragThumb, onDragThumb_fn)}
+            @pointerup=${__privateMethod(this, _onReleaseThumb, onReleaseThumb_fn)}
+            @pointercancel=${__privateMethod(this, _onReleaseThumb, onReleaseThumb_fn)}
+            @keydown=${__privateMethod(this, _onKeyPress, onKeyPress_fn)}
+            @focus=${__privateMethod(this, _onFocusThumb, onFocusThumb_fn)}
+          ></div>
+        </syn-tooltip>
+      `;
+    });
+  }
+  /* eslint-enable @typescript-eslint/unbound-method */
+  /* eslint-disable @typescript-eslint/unbound-method */
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasPrefixSlot = this.hasSlotController.test("prefix");
+    const hasSuffixSlot = this.hasSlotController.test("suffix");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    __privateMethod(this, _updatePrefixSuffixPosition, updatePrefixSuffixPosition_fn).call(this);
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-label": hasLabel,
+      "form-control--has-prefix": hasPrefixSlot,
+      "form-control--has-suffix": hasSuffixSlot,
+      "form-control--is-disabled": this.disabled,
+      "form-control--large": this.size === "large",
+      "form-control--medium": this.size === "medium",
+      "form-control--small": this.size === "small"
+    })}
+        @focusout=${__privateMethod(this, _onBlur, onBlur_fn)}
+      >
+        <label
+          id="label"
+          part="form-control-label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.focus}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <label id="aria-label-hidden" class="visually-hidden">
+          (${__privateGet(this, _value).map(this.tooltipFormatter).join(" - ")})
+        </label>
+
+        <div class="base input__control" part="base">
+          <span part="prefix" class="input__prefix">
+            <slot name="prefix"></slot>
+          </span>
+
+          <div class="input__wrapper" part="input-wrapper">
+            <input
+              class="range__validation-input visually-hidden"
+              tabindex="-1"
+              hidden
+              @invalid=${__privateMethod(this, _handleInvalid, handleInvalid_fn)}
+            />
+
+            <div
+              class="track__wrapper"
+              @click=${__privateMethod(this, _onClickTrack, onClickTrack_fn)}
+              part="track-wrapper"
+              role="presentation"
+            >
+              <div class="track__click-helper"></div>
+              <div class="track" part="track"></div>
+              <div class="active-track" part="active-track"></div>
+            </div>
+
+            ${this.renderThumbs(hasLabel)}
+
+            <div
+              class="ticks"
+              part="ticks"
+              @click=${__privateMethod(this, _onClickTrack, onClickTrack_fn)}
+              role="presentation"
+            >
+              <slot name="ticks"></slot>
+            </div>
+          </div>
+
+          <span part="suffix" class="input__suffix">
+            <slot name="suffix"></slot>
+          </span>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+  /* eslint-enable @typescript-eslint/unbound-method */
+};
+_value = new WeakMap();
+_rangeValues = new WeakMap();
+_hasFocus = new WeakMap();
+_validationError = new WeakMap();
+_validationTimeout = new WeakMap();
+_nextId = new WeakMap();
+_lastChangeValue = new WeakMap();
+_rtl = new WeakSet();
+rtl_get = function() {
+  return this.localize.dir() === "rtl";
+};
+_onClickTrack = new WeakSet();
+onClickTrack_fn = function(event) {
+  if (this.disabled)
+    return;
+  const { clientX } = event;
+  const thumbs = Array.from(this.thumbs);
+  const pos = getNormalizedValueFromClientX(this.baseDiv, clientX, __privateGet(this, _rtl, rtl_get));
+  const unit = this.step / (this.max - this.min);
+  const nextValue = this.min + this.step * Math.round(pos / unit);
+  const thumb = thumbs.reduce((prev, curr) => {
+    const currValue = __privateGet(this, _rangeValues).get(+curr.dataset.rangeId);
+    const prevValue2 = __privateGet(this, _rangeValues).get(+prev.dataset.rangeId);
+    return Math.abs(currValue - nextValue) <= Math.abs(prevValue2 - nextValue) ? curr : prev;
+  });
+  const rangeId = +thumb.dataset.rangeId;
+  if (!rangeId)
+    return;
+  __privateGet(this, _rangeValues).set(rangeId, nextValue);
+  __privateMethod(this, _moveThumb, moveThumb_fn).call(this, thumb, nextValue);
+  const prevValue = __privateGet(this, _value);
+  __privateSet(this, _value, Array.from(__privateGet(this, _rangeValues).values()));
+  __privateMethod(this, _updateActiveTrack, updateActiveTrack_fn).call(this);
+  if (arraysDiffer(prevValue, __privateGet(this, _value))) {
+    __privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
+    this.emit("syn-input");
+    this.emit("syn-change");
+  }
+};
+_onClickThumb = new WeakSet();
+onClickThumb_fn = async function(event) {
+  if (this.disabled)
+    return;
+  const thumb = event.target;
+  __privateMethod(this, _updateTooltip, updateTooltip_fn).call(this, thumb);
+  if (thumb.dataset.pointerId) {
+    thumb.releasePointerCapture(+thumb.dataset.pointerId);
+  }
+  thumb.dataset.pointerId = event.pointerId.toString();
+  thumb.setPointerCapture(event.pointerId);
+  thumb.classList.add("grabbed");
+  await thumb.parentElement.show();
+};
+_onDragThumb = new WeakSet();
+onDragThumb_fn = function(event) {
+  if (this.disabled)
+    return;
+  const thumb = event.target;
+  const rangeId = +thumb.dataset.rangeId;
+  if (!__privateGet(this, _rangeValues).has(rangeId))
+    return;
+  const pointerId = thumb.dataset.pointerId ? +thumb.dataset.pointerId : null;
+  if (pointerId !== event.pointerId)
+    return;
+  const pos = getNormalizedValueFromClientX(this.baseDiv, event.clientX, __privateGet(this, _rtl, rtl_get));
+  const unit = this.step / (this.max - this.min);
+  const value = this.min + this.step * Math.round(pos / unit);
+  const synMove = this.emit("syn-move", {
+    cancelable: true,
+    detail: {
+      element: thumb,
+      value
+    }
+  });
+  if (synMove.defaultPrevented) {
+    return;
+  }
+  __privateGet(this, _rangeValues).set(rangeId, value);
+  __privateMethod(this, _moveThumb, moveThumb_fn).call(this, thumb, value);
+  const prevValue = __privateGet(this, _value);
+  __privateSet(this, _value, Array.from(__privateGet(this, _rangeValues).values()));
+  __privateMethod(this, _updateActiveTrack, updateActiveTrack_fn).call(this);
+  if (arraysDiffer(prevValue, __privateGet(this, _value))) {
+    this.emit("syn-input");
+  }
+};
+_onReleaseThumb = new WeakSet();
+onReleaseThumb_fn = async function(event) {
+  const thumb = event.target;
+  if (!thumb.dataset.pointerId || event.pointerId !== +thumb.dataset.pointerId)
+    return;
+  thumb.classList.remove("grabbed");
+  thumb.releasePointerCapture(event.pointerId);
+  delete thumb.dataset.pointerId;
+  if (arraysDiffer(__privateGet(this, _lastChangeValue), __privateGet(this, _value))) {
+    __privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
+    this.emit("syn-change");
+  }
+  await thumb.parentElement.hide();
+};
+_moveThumb = new WeakSet();
+moveThumb_fn = function(thumb, value) {
+  thumb.setAttribute("aria-valuenow", value.toString());
+  thumb.setAttribute("aria-valuetext", this.tooltipFormatter(value));
+  const pos = (value - this.min) / (this.max - this.min);
+  thumb.style.insetInlineStart = `calc( ${100 * pos}% - var(--full-thumb-size) / 2 )`;
+  __privateMethod(this, _updateTooltip, updateTooltip_fn).call(this, thumb);
+};
+_updateActiveTrack = new WeakSet();
+updateActiveTrack_fn = function() {
+  const { activeTrack } = this;
+  if (!activeTrack)
+    return;
+  if (this.min === this.max) {
+    activeTrack.style.insetInlineStart = "0%";
+    activeTrack.style.insetInlineEnd = "0%";
+    return;
+  }
+  if (__privateGet(this, _value).length === 1) {
+    const start2 = getComputedStyle(this).getPropertyValue("--track-active-offset") || "0%";
+    const end2 = 100 * (__privateGet(this, _value)[0] - this.min) / (this.max - this.min);
+    activeTrack.style.insetInlineStart = `min(${start2}, ${end2}%)`;
+    activeTrack.style.insetInlineEnd = `min(calc(100% - ${start2}), calc(100% - ${end2}%))`;
+    return;
+  }
+  const sortedValues = __privateGet(this, _value).slice().sort(numericSort);
+  const start = 100 * (sortedValues[0] - this.min) / (this.max - this.min);
+  const end = 100 * (sortedValues[sortedValues.length - 1] - this.min) / (this.max - this.min);
+  activeTrack.style.insetInlineStart = `${start}%`;
+  activeTrack.style.insetInlineEnd = `calc(100% - ${end}%)`;
+};
+_onKeyPress = new WeakSet();
+onKeyPress_fn = function(event) {
+  const thumb = event.target;
+  const rangeId = +thumb.dataset.rangeId;
+  const currentValue = __privateGet(this, _rangeValues).get(rangeId);
+  if (currentValue === void 0)
+    return;
+  let value = currentValue;
+  switch (event.key) {
+    case "ArrowUp":
+    case "Up":
+      value = Math.min(currentValue + this.step, this.max);
+      break;
+    case "ArrowDown":
+    case "Down":
+      value = Math.max(currentValue - this.step, this.min);
+      break;
+    case "ArrowLeft":
+    case "Left":
+      value = __privateGet(this, _rtl, rtl_get) ? Math.min(currentValue + this.step, this.max) : Math.max(currentValue - this.step, this.min);
+      break;
+    case "ArrowRight":
+    case "Right":
+      value = __privateGet(this, _rtl, rtl_get) ? Math.max(currentValue - this.step, this.min) : Math.min(currentValue + this.step, this.max);
+      break;
+    case "PageUp":
+      value = Math.min(
+        currentValue + (this.max - this.min) / 5,
+        this.max
+      );
+      break;
+    case "PageDown":
+      value = Math.max(
+        currentValue - (this.max - this.min) / 5,
+        this.min
+      );
+      break;
+    case "Home":
+      value = this.min;
+      break;
+    case "End":
+      value = this.max;
+      break;
+    default:
+      return;
+  }
+  if (value !== currentValue) {
+    const synMove = this.emit("syn-move", {
+      cancelable: true,
+      detail: {
+        element: thumb,
+        value
+      }
+    });
+    if (synMove.defaultPrevented) {
+      return;
+    }
+    __privateMethod(this, _moveThumb, moveThumb_fn).call(this, thumb, value);
+    __privateGet(this, _rangeValues).set(rangeId, value);
+    __privateSet(this, _value, Array.from(__privateGet(this, _rangeValues).values()));
+    __privateMethod(this, _updateActiveTrack, updateActiveTrack_fn).call(this);
+    __privateMethod(this, _updateTooltip, updateTooltip_fn).call(this, thumb);
+    __privateSet(this, _lastChangeValue, Array.from(__privateGet(this, _value)));
+    this.emit("syn-input");
+    this.emit("syn-change");
+  }
+  event.stopPropagation();
+  event.preventDefault();
+};
+_onBlur = new WeakSet();
+onBlur_fn = function(event) {
+  var _a;
+  if (event.relatedTarget && ((_a = this.shadowRoot) == null ? void 0 : _a.contains(event.relatedTarget)))
+    return;
+  this.emit("syn-blur");
+  __privateSet(this, _hasFocus, false);
+};
+_updateTooltip = new WeakSet();
+updateTooltip_fn = function(thumb) {
+  if (this.tooltipPlacement === "none")
+    return;
+  const rangeId = +thumb.dataset.rangeId;
+  if (!__privateGet(this, _rangeValues).has(rangeId))
+    return;
+  const value = __privateGet(this, _rangeValues).get(rangeId);
+  const tooltip = thumb.parentElement;
+  tooltip.content = this.tooltipFormatter(value);
+};
+_onFocusThumb = new WeakSet();
+onFocusThumb_fn = function(event) {
+  var _a;
+  if (this.disabled)
+    return;
+  if (!__privateGet(this, _hasFocus)) {
+    __privateSet(this, _hasFocus, true);
+    this.emit("syn-focus");
+  }
+  const thumb = event.target;
+  if (!((_a = thumb == null ? void 0 : thumb.dataset) == null ? void 0 : _a.rangeId))
+    return;
+  __privateMethod(this, _updateTooltip, updateTooltip_fn).call(this, thumb);
+};
+_handleInvalid = new WeakSet();
+handleInvalid_fn = function(event) {
+  this.formControlController.setValidity(false);
+  this.formControlController.emitInvalidEvent(event);
+};
+_updatePrefixSuffixPosition = new WeakSet();
+updatePrefixSuffixPosition_fn = function() {
+  var _a, _b, _c, _d;
+  const hasTicksSlot = this.hasSlotController.test("ticks");
+  const hasPrefixSlot = this.hasSlotController.test("prefix");
+  const hasSuffixSlot = this.hasSlotController.test("suffix");
+  if (!hasTicksSlot) {
+    return;
+  }
+  let ticksHeight = (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".ticks")) == null ? void 0 : _b.clientHeight;
+  if (ticksHeight) {
+    ticksHeight += 2;
+    ticksHeight /= 2;
+    if (hasPrefixSlot) {
+      const prefix = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(".input__prefix");
+      prefix.style.transform = `translateY(-${ticksHeight}px)`;
+    }
+    if (hasSuffixSlot) {
+      const suffix = (_d = this.shadowRoot) == null ? void 0 : _d.querySelector(".input__suffix");
+      suffix.style.transform = `translateY(-${ticksHeight}px)`;
+    }
+  }
+};
+SynRange.styles = [
+  component_styles_default,
+  form_control_styles_default,
+  form_control_custom_styles_default,
+  range_styles_default
+];
+SynRange.dependencies = {
+  "syn-tooltip": SynTooltip
+};
+__decorateClass([
+  property()
+], SynRange.prototype, "name", 2);
+__decorateClass([
+  property()
+], SynRange.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], SynRange.prototype, "helpText", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynRange.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Number })
+], SynRange.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], SynRange.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], SynRange.prototype, "step", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynRange.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "tooltip-placement", type: String })
+], SynRange.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  property({ type: String })
+], SynRange.prototype, "value", 1);
+__decorateClass([
+  defaultValue()
+], SynRange.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynRange.prototype, "form", 2);
+__decorateClass([
+  property({ attribute: false })
+], SynRange.prototype, "tooltipFormatter", 2);
+__decorateClass([
+  query(".input__wrapper")
+], SynRange.prototype, "baseDiv", 2);
+__decorateClass([
+  query(".active-track")
+], SynRange.prototype, "activeTrack", 2);
+__decorateClass([
+  queryAll(".thumb")
+], SynRange.prototype, "thumbs", 2);
+__decorateClass([
+  query(".range__validation-input")
+], SynRange.prototype, "validationInput", 2);
+
+export {
+  SynRange
+};
+//# sourceMappingURL=chunk.X7LEPG3A.js.map