@esri/calcite-components 5.2.0-next.66 → 5.2.0-next.67

package/dist/components/calcite-slider/customElement.js

@@ -17,6 +17,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
+import { isEqual } from "es-toolkit";
 const CSS = {
   container: "container",
   containerRange: "container--range",
@@ -66,7 +67,7 @@ class Slider extends LitElement {
       }
       this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
-      if (this.dragProp && this.lastDragPropValue != this[this.dragProp]) {
+      if (this.dragProp && !isEqual(this.lastDragPropValue, this.getDragPropValue(this.dragProp))) {
         this.emitChange();
       }
       this.dragProp = void 0;
@@ -97,11 +98,11 @@ class Slider extends LitElement {
             this.maxValueDragRange = this.maxValue - value;
             this.minMaxValueRange = this.maxValue - this.minValue;
           }
-        } else if (isRange(this.value) && isRange(this.previousEmittedValue) && this.dragProp === "maxValue") {
+        } else if (isRange(this.value) && this.previousEmittedValue !== void 0 && isRange(this.previousEmittedValue) && this.dragProp === "maxValue") {
           const [previousEmittedMinValue, previousEmittedMaxValue] = this.previousEmittedValue;
           if (previousEmittedMinValue === previousEmittedMaxValue && value < previousEmittedMinValue) {
             this.dragProp = "minValue";
-            this.minHandle.focus();
+            this.minHandleRef.value.focus();
           } else {
             this.setValue({ [this.dragProp]: this.clamp(value, this.dragProp) });
           }
@@ -122,7 +123,21 @@ class Slider extends LitElement {
       inputType: "range"
     })(this);
     this.guid = IDS.host(guid());
+    this.maxHandleRef = createRef();
+    this.maxValueLabelRefs = {
+      label: createRef(),
+      static: createRef(),
+      transformed: createRef()
+    };
+    this.maxTickLabelRef = createRef();
     this.messages = useT9n({ blocking: true });
+    this.minHandleRef = createRef();
+    this.minValueLabelRefs = {
+      label: createRef(),
+      static: createRef(),
+      transformed: createRef()
+    };
+    this.minTickLabelRef = createRef();
     this.pointerUpDragEnd = (event) => {
       if (this.disabled || !isPrimaryPointerButton(event)) {
         return;
@@ -187,7 +202,7 @@ class Slider extends LitElement {
     this._value = Array.isArray(this._value) ? [this.minValue, this.maxValue] : defaultValue;
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.minHandle || this.maxHandle, options);
+    return this.focusSetter(() => this.minHandleRef.value || this.maxHandleRef.value, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -213,6 +228,9 @@ class Slider extends LitElement {
     }
   }
   updated() {
+    if (!this.isConnected) {
+      return;
+    }
     if (this.labelHandles) {
       this.adjustHostObscuredHandleLabel("value");
       if (isRange(this.value)) {
@@ -287,9 +305,10 @@ class Slider extends LitElement {
         prop = closerToMax || position >= this.maxValue ? "maxValue" : "minValue";
       }
     }
-    this.lastDragPropValue = this[prop];
+    this.lastDragPropValue = this.getDragPropValue(prop);
     this.dragStart(prop);
-    const isThumbActive = this.el.shadowRoot.querySelector(`.${CSS.thumb}:active`);
+    const eventPath = event.composedPath();
+    const isThumbActive = [this.minHandleRef.value, this.maxHandleRef.value].some((handle) => handle && eventPath.includes(handle));
     if (!isThumbActive) {
       this.setValue({ [prop]: this.clamp(position, prop) });
     }
@@ -386,11 +405,14 @@ class Slider extends LitElement {
     window.addEventListener("pointerup", this.pointerUpDragEnd);
     window.addEventListener("pointercancel", this.dragEnd);
   }
+  getDragPropValue(prop) {
+    return prop === "minMaxValue" ? this.value : this[prop];
+  }
   focusActiveHandle(valueX) {
     if (this.dragProp === "minValue") {
-      this.minHandle.focus();
+      this.minHandleRef.value.focus();
     } else if (this.dragProp === "maxValue" || this.dragProp === "value") {
-      this.maxHandle.focus();
+      this.maxHandleRef.value.focus();
     } else if (this.dragProp === "minMaxValue") {
       this.getClosestHandle(valueX).focus();
     }
@@ -408,6 +430,9 @@ class Slider extends LitElement {
     let valueChanged = false;
     Object.keys(values).forEach((propName) => {
       const newValue = values[propName];
+      if (newValue === void 0) {
+        return;
+      }
       if (!valueChanged) {
         const oldValue = this[propName];
         valueChanged = oldValue !== newValue;
@@ -426,17 +451,6 @@ class Slider extends LitElement {
     }
     this.calciteSliderInput.emit();
   }
-  setThumbEl(el) {
-    if (!el) {
-      return;
-    }
-    const valueProp = el.getAttribute("data-value-prop");
-    if (valueProp === "minValue") {
-      this.minHandle = el;
-    } else {
-      this.maxHandle = el;
-    }
-  }
   clamp(value, prop) {
     value = clamp(value, this.min, this.max);
     if (prop === "maxValue") {
@@ -466,7 +480,9 @@ class Slider extends LitElement {
     return snappedValue;
   }
   getClosestHandle(valueX) {
-    return this.getDistanceX(this.maxHandle, valueX) > this.getDistanceX(this.minHandle, valueX) ? this.minHandle : this.maxHandle;
+    const minHandle = this.minHandleRef.value;
+    const maxHandle = this.maxHandleRef.value;
+    return this.getDistanceX(maxHandle, valueX) > this.getDistanceX(minHandle, valueX) ? minHandle : maxHandle;
   }
   getDistanceX(el, valueX) {
     return Math.abs(el.getBoundingClientRect().left - valueX);
@@ -480,27 +496,26 @@ class Slider extends LitElement {
     return (num - this.min) / range;
   }
   adjustHostObscuredHandleLabel(name) {
-    const shadowRoot = this.el.shadowRoot;
-    const label = shadowRoot.querySelector(`.handle__label--${name}`);
-    const labelStatic = shadowRoot.querySelector(`.handle__label--${name}.static`);
-    const labelTransformed = shadowRoot.querySelector(`.handle__label--${name}.transformed`);
+    const labelRefs = name === "minValue" ? this.minValueLabelRefs : this.maxValueLabelRefs;
+    const label = labelRefs.label.value;
+    const labelStatic = labelRefs.static.value;
+    const labelTransformed = labelRefs.transformed.value;
     const labelStaticBounds = labelStatic.getBoundingClientRect();
     const labelStaticOffset = this.getHostOffset(labelStaticBounds.left, labelStaticBounds.right);
     label.style.transform = `translateX(${labelStaticOffset}px)`;
     labelTransformed.style.transform = `translateX(${labelStaticOffset}px)`;
   }
   hyphenateCollidingRangeHandleLabels() {
-    const shadowRoot = this.el.shadowRoot;
     const mirror = this.shouldMirror();
-    const leftModifier = mirror ? "value" : "minValue";
-    const rightModifier = mirror ? "minValue" : "value";
-    const leftValueLabel = shadowRoot.querySelector(`.handle__label--${leftModifier}`);
-    const leftValueLabelStatic = shadowRoot.querySelector(`.handle__label--${leftModifier}.static`);
-    const leftValueLabelTransformed = shadowRoot.querySelector(`.handle__label--${leftModifier}.transformed`);
+    const leftValueLabelRefs = mirror ? this.maxValueLabelRefs : this.minValueLabelRefs;
+    const rightValueLabelRefs = mirror ? this.minValueLabelRefs : this.maxValueLabelRefs;
+    const leftValueLabel = leftValueLabelRefs.label.value;
+    const leftValueLabelStatic = leftValueLabelRefs.static.value;
+    const leftValueLabelTransformed = leftValueLabelRefs.transformed.value;
     const leftValueLabelStaticHostOffset = this.getHostOffset(leftValueLabelStatic.getBoundingClientRect().left, leftValueLabelStatic.getBoundingClientRect().right);
-    const rightValueLabel = shadowRoot.querySelector(`.handle__label--${rightModifier}`);
-    const rightValueLabelStatic = shadowRoot.querySelector(`.handle__label--${rightModifier}.static`);
-    const rightValueLabelTransformed = shadowRoot.querySelector(`.handle__label--${rightModifier}.transformed`);
+    const rightValueLabel = rightValueLabelRefs.label.value;
+    const rightValueLabelStatic = rightValueLabelRefs.static.value;
+    const rightValueLabelTransformed = rightValueLabelRefs.transformed.value;
     const rightValueLabelStaticHostOffset = this.getHostOffset(rightValueLabelStatic.getBoundingClientRect().left, rightValueLabelStatic.getBoundingClientRect().right);
     const labelFontSize = this.getFontSizeForElement(leftValueLabel);
     const labelTransformedOverlap = this.getRangeLabelOverlap(leftValueLabelTransformed, rightValueLabelTransformed);
@@ -564,11 +579,10 @@ class Slider extends LitElement {
     if (this.hasHistogram && !this.precise && !this.labelHandles) {
       return;
     }
-    const shadowRoot = this.el.shadowRoot;
-    const minHandle = shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
-    const maxHandle = shadowRoot.querySelector(`.${CSS.thumbValue}`);
-    const minTickLabel = shadowRoot.querySelector(`.${CSS.tickMin}`);
-    const maxTickLabel = shadowRoot.querySelector(`.${CSS.tickMax}`);
+    const minHandle = this.minHandleRef.value;
+    const maxHandle = this.maxHandleRef.value;
+    const minTickLabel = this.minTickLabelRef.value;
+    const maxTickLabel = this.maxTickLabelRef.value;
     if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
       minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
       maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";
@@ -697,10 +711,11 @@ class Slider extends LitElement {
     const displayedValue = valueProp === "minValue" ? this.internalLabelFormatter(this.minValue, "min") : valueProp === "maxValue" ? this.internalLabelFormatter(this.maxValue, "max") : this.internalLabelFormatter(value, "value");
     const thumbStyle = isMinThumb ? { left: `${mirror ? 100 - minInterval : minInterval}%` } : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };
     const thumbLabelClasses = `${CSS.handleLabel} ${isMinThumb ? CSS.handleLabelMinValue : CSS.handleLabelValue}`;
+    const labelRefs = isMinThumb ? this.minValueLabelRefs : this.maxValueLabelRefs;
     const labels = isLabeled ? [
-      html`<span aria-hidden=true class=${safeClassMap(thumbLabelClasses)}>${displayedValue}</span>`,
-      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.static}`}>${displayedValue}</span>`,
-      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.transformed}`}>${displayedValue}</span>`
+      html`<span aria-hidden=true class=${safeClassMap(thumbLabelClasses)} ${ref(labelRefs.label)}>${displayedValue}</span>`,
+      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.static}`} ${ref(labelRefs.static)}>${displayedValue}</span>`,
+      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.transformed}`} ${ref(labelRefs.transformed)}>${displayedValue}</span>`
     ] : [];
     const thumbContent = [
       ...labels,
@@ -716,7 +731,7 @@ class Slider extends LitElement {
       [CSS.thumbActive]: this.lastDragProp !== "minMaxValue" && this.dragProp === valueProp,
       [CSS.thumbPrecise]: isPrecise,
       [CSS.thumbMinValue]: isMinThumb
-    })} data-value-prop=${valueProp ?? nothing} @blur=${this.onThumbBlur} @focus=${this.onThumbFocus} @pointerdown=${this.onThumbPointerDown} role=slider style=${safeStyleMap(thumbStyle)} tabindex=0 ${ref(this.setThumbEl)}>${thumbContent}</div>`);
+    })} data-value-prop=${valueProp ?? nothing} @blur=${this.onThumbBlur} @focus=${this.onThumbFocus} @pointerdown=${this.onThumbPointerDown} role=slider style=${safeStyleMap(thumbStyle)} tabindex=0 ${ref(isMinThumb ? this.minHandleRef : this.maxHandleRef)}>${thumbContent}</div>`);
   }
   renderGraph() {
     return this.histogram ? html`<calcite-graph class=${safeClassMap(CSS.graph)} .colorStops=${this.histogramStops} .data=${this.histogram} .highlightMax=${isRange(this.value) ? this.maxValue : this.value} .highlightMin=${isRange(this.value) ? this.minValue : this.min} .max=${this.max} .min=${this.min}></calcite-graph>` : null;
@@ -728,11 +743,22 @@ class Slider extends LitElement {
     const isMaxTickLabel = tick === max;
     const isAtEdge = isMinTickLabel || isMaxTickLabel;
     const shouldDisplayLabel = labelTicks && (!hasHistogram && (isAtEdge || !precise || !valueIsRange) || hasHistogram && (isAtEdge || !precise && !labelHandles));
-    return shouldDisplayLabel ? html`<span class=${safeClassMap({
+    if (!shouldDisplayLabel) {
+      return null;
+    }
+    const tickLabelClasses = {
       [CSS.tickLabel]: true,
       [CSS.tickMin]: isMinTickLabel,
       [CSS.tickMax]: isMaxTickLabel
-    })}>${this.internalLabelFormatter(tick, "tick")}</span>` : null;
+    };
+    const tickLabel = this.internalLabelFormatter(tick, "tick");
+    if (isMinTickLabel) {
+      return html`<span class=${safeClassMap(tickLabelClasses)} ${ref(this.minTickLabelRef)}>${tickLabel}</span>`;
+    }
+    if (isMaxTickLabel) {
+      return html`<span class=${safeClassMap(tickLabelClasses)} ${ref(this.maxTickLabelRef)}>${tickLabel}</span>`;
+    }
+    return html`<span class=${safeClassMap(tickLabelClasses)}>${tickLabel}</span>`;
   }
 }
 customElement("calcite-slider", Slider);