@arcgis/common-components 5.0.1 → 5.0.3

package/dist/components/arcgis-histogram/types.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="@arcgis/core/interfaces.d.ts" />
-
 export type DataLine = {
   value: number;
-  label?: nullish | number | string;
+  label?: number | string | null;
 };
 
 export type HistogramColorStops = HistogramClassedColorStop[] | HistogramContinuousColorStop[];

package/dist/components/arcgis-label-input/customElement.d.ts

@@ -1,5 +1,4 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
 import type { InputNumber as InputNumber } from "@esri/calcite-components/components/calcite-input-number";
@@ -22,7 +21,7 @@ export abstract class ArcgisLabelInput extends LitElement {
    */
   get editing(): boolean;
   /** A function used to format the value. */
-  accessor labelFormatter: ((value: number, defaultFormatter: (value: number) => string) => nullish | string) | undefined;
+  accessor labelFormatter: (value: number, defaultFormatter: (value: number) => string) => string | null | undefined;
   /**
    * Indicates whether the component is in read-only mode.
    *

package/dist/components/arcgis-label-input/customElement.js

@@ -1,24 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as l } from "../../chunks/runtime.js";
-import { formatNumber as r } from "@arcgis/core/intl.js";
-import { LitElement as o, createEvent as u } from "@arcgis/lumina";
-import { createRef as n, ref as a } from "lit/directives/ref.js";
-import { css as h, html as s } from "lit";
-const c = h`:host{display:block}:host([hidden]){display:none}.readOnlyLabel{display:block;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:var(--calcite-font-line-height-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.5rem;padding-block:3px;border-color:var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px);color:var(--calcite-color-text-1)}:host(:not([read-only])) .readOnlyLabel{position:absolute;opacity:0}:host([alignment="start"]){.readOnlyLabel{text-align:start}}:host([alignment="end"]){.readOnlyLabel{text-align:end}}:host([alignment="center"]){.readOnlyLabel{text-align:center}}calcite-button{inline-size:100%;--calcite-offset-invert-focus: 1;--calcite-internal-animation-timing-fast: 0}calcite-input-number{inline-size:100%;--calcite-internal-animation-timing-fast: 0}`;
-class d extends o {
+import { c as o } from "../../chunks/runtime.js";
+import { formatNumber as u } from "@arcgis/core/intl.js";
+import { LitElement as c, createEvent as h, safeClassMap as d } from "@arcgis/lumina";
+import { createRef as s, ref as l } from "lit/directives/ref.js";
+import { css as p, html as n } from "lit";
+const m = p`:host{display:block}:host([hidden]){display:none}.content{display:flex;flex-direction:column}.readOnlyLabel{display:block;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:var(--calcite-font-line-height-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.5rem;padding-block:3px;border-color:var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px);color:var(--calcite-color-text-1)}:host(:not([read-only])) .readOnlyLabel{position:absolute;opacity:0}:host([alignment="start"]){.content{align-items:start}.readOnlyLabel{text-align:start}}:host([alignment="end"]){.content{align-items:end}.readOnlyLabel{text-align:end}}:host([alignment="center"]){.content{align-items:center}.readOnlyLabel{text-align:center}}calcite-button{inline-size:100%;--calcite-offset-invert-focus: 1;--calcite-internal-animation-timing-fast: 0}calcite-input-number{inline-size:100%;--calcite-internal-animation-timing-fast: 0}`;
+class f extends c {
   constructor() {
-    super(...arguments), this._buttonRef = n(), this._inputRef = n(), this._labelRef = n(), this._formatOptions = {
+    super(...arguments), this._buttonRef = s(), this._inputRef = s(), this._labelRef = s(), this._formatOptions = {
       style: "decimal",
       useGrouping: !0,
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
-    }, this._formatValue = (t) => r(t, this._formatOptions), this._pointerDownPosition = null, this._displayedValue = "", this._editing = !1, this.alignment = "center", this.readOnly = !1, this.value = 0, this.arcgisChange = u({ cancelable: !1 });
+    }, this._formatValue = (t) => u(t, this._formatOptions), this._pointerDownPosition = null, this._displayedValue = "", this._editing = !1, this.alignment = "center", this.readOnly = !1, this.value = 0, this.arcgisChange = h({ cancelable: !1 });
   }
   static {
     this.properties = { _displayedValue: 16, _editing: 16, alignment: 3, editing: 39, labelFormatter: 0, readOnly: 7, value: 11 };
   }
   static {
-    this.styles = c;
+    this.styles = m;
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
@@ -39,8 +39,11 @@ class d extends o {
     }
   }
   updated(t) {
-    const e = this._inputRef.value, i = this.renderRoot.querySelector(".readOnlyLabel");
-    e && i && (e.style.width = `${i.offsetWidth}px`);
+    const e = this._inputRef.value, i = this._buttonRef.value, a = this.renderRoot.querySelector(".readOnlyLabel");
+    if (e && i && a) {
+      const r = a.offsetWidth;
+      i.style.width = `${r}px`, e.style.width = `${r}px`;
+    }
   }
   _enterEdit() {
     this._editing || this.readOnly || (this._editing = !0, this.requestUpdate("editing", !1), this.updateComplete.then(async () => {
@@ -49,7 +52,7 @@ class d extends o {
     }));
   }
   _exitEdit(t, e = !1) {
-    this._editing && (t ? this._commitValue(this._inputRef.value) : this._inputRef.value && (this._displayedValue = this._internalLabelFormatter(this.value), this._inputRef.value.value = `${this.value}`), this._editing = !1, this.requestUpdate("editing", !0), e || this.updateComplete.then(async () => {
+    this._editing && (t && this._commitValue(this._inputRef.value), this._displayedValue = this._internalLabelFormatter(this.value), this._inputRef.value && (this._inputRef.value.value = `${this.value}`), this._editing = !1, this.requestUpdate("editing", !0), e || this.updateComplete.then(async () => {
       await this._buttonRef.value?.setFocus();
     }));
   }
@@ -100,12 +103,14 @@ class d extends o {
   }
   render() {
     const { alignment: t, _displayedValue: e } = this, i = [
-      s`<span class="readOnlyLabel"><span ${a(this._labelRef)}>${e}</span></span>`
+      n`<span class="readOnlyLabel"><span ${l(this._labelRef)}>${e}</span></span>`
     ];
-    return this.readOnly || i.push(s`<calcite-button .alignment=${t} appearance=transparent .hidden=${this._editing} kind=neutral @pointerdown=${this._onPointerDown} @click=${this._onClick} scale=s width=full ${a(this._buttonRef)}>${e}</calcite-button>`, s`<calcite-input-number .alignment=${t} group-separator .hidden=${!this._editing} number-button-type=none @calciteInputNumberChange=${this._onValueChange} @keydown=${this._onKeyDown} @blur=${this._onBlur} @input=${this._onInput} scale=s status=idle .value=${`${this.value}`} ${a(this._inputRef)}></calcite-input-number>`), i;
+    return this.readOnly || i.push(n`<calcite-button .alignment=${t} appearance=transparent .hidden=${this._editing} kind=neutral @pointerdown=${this._onPointerDown} @click=${this._onClick} scale=s width=full ${l(this._buttonRef)}>${e}</calcite-button>`, n`<calcite-input-number .alignment=${t} group-separator .hidden=${!this._editing} number-button-type=none @calciteInputNumberChange=${this._onValueChange} @keydown=${this._onKeyDown} @blur=${this._onBlur} @input=${this._onInput} scale=s status=idle .value=${`${this.value}`} ${l(this._inputRef)}></calcite-input-number>`), n`<div class=${d({
+      content: !0
+    })}>${i}</div>`;
   }
 }
-l("arcgis-label-input", d);
+o("arcgis-label-input", f);
 export {
-  d as ArcgisLabelInput
+  f as ArcgisLabelInput
 };

package/dist/components/arcgis-slider/customElement.d.ts

@@ -1,5 +1,4 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { Popover as Popover } from "@esri/calcite-components/components/calcite-popover";
@@ -150,7 +149,7 @@ export abstract class ArcgisSlider extends LitElement {
    * };
    * ```
    */
-  accessor labelFormatter: ((value: number, type: "max" | "min" | "value", defaultFormatter: (value: number) => string) => nullish | string) | undefined;
+  accessor labelFormatter: (value: number, type: "max" | "min" | "value", defaultFormatter: (value: number) => string) => string | null | undefined;
   /**
    * Determines the layout/orientation of the Slider component. By default, the slider will render horizontally with the min value on the left side
    * of the track.

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

@@ -75,7 +75,7 @@ let x = class extends ie {
   startup() {
     const { precision: n } = this;
     let { min: e, max: t, values: a } = this;
-    t = b(t, n), e = b(e, n), a = a?.map((r) => $(b(r, n), e, t)), this._set("min", e), this._set("max", t), this._set("values", a);
+    t = b(t, n), e = b(e, n), a = a?.map((r) => P(b(r, n), e, t)), this._set("min", e), this._set("max", t), this._set("values", a);
     const i = new Map(a?.map((r) => [B(), r]));
     this._entries = i, O(
       () => this.min,
@@ -131,7 +131,7 @@ let x = class extends ie {
       return;
     }
     const e = this._get("values");
-    if (n = n?.map((a) => $(b(a, this.precision), this.min, this.max)).sort((a, i) => a - i), e && n && e.length === n.length && e.every((a, i) => a === n[i]))
+    if (n = n?.map((a) => P(b(a, this.precision), this.min, this.max)).sort((a, i) => a - i), e && n && e.length === n.length && e.every((a, i) => a === n[i]))
       return;
     const t = new Map(n?.map((a) => [B(), a]));
     this._entries = t, this._set("values", n);
@@ -154,7 +154,7 @@ let x = class extends ie {
   setValue(n, e) {
     if (this.values == null)
       return !1;
-    const { min: t, max: a } = this, i = this._entries.get(n), r = $(b(e, this.precision), t, a);
+    const { min: t, max: a } = this, i = this._entries.get(n), r = P(b(e, this.precision), t, a);
     return i === r ? !1 : (this._entries.set(n, r), this._updatesValues(), !0);
   }
   setValues(n) {
@@ -163,7 +163,7 @@ let x = class extends ie {
     let e = !1;
     const { min: t, max: a } = this;
     for (const [i, r] of n) {
-      const l = this._entries.get(i), s = $(b(r, this.precision), t, a);
+      const l = this._entries.get(i), s = P(b(r, this.precision), t, a);
       l !== s && (e = !0, this._entries.set(i, s));
     }
     return e ? (this._updatesValues(), !0) : !1;
@@ -186,7 +186,7 @@ w([
   k()
 ], x.prototype, "min", 1);
 w([
-  k({ cast: (n) => $(n, 0, 20) })
+  k({ cast: (n) => P(n, 0, 20) })
 ], x.prototype, "precision", 2);
 w([
   k({ readOnly: !0 })
@@ -197,7 +197,7 @@ w([
 x = w([
   se("esri.widgets.Slider.SliderData")
 ], x);
-function $(n, e, t) {
+function P(n, e, t) {
   return Math.min(Math.max(n, e), t);
 }
 function b(n, e) {
@@ -324,8 +324,8 @@ function A(n, e, t, a) {
     if (i)
       return g;
     const y = /* @__PURE__ */ new Set();
-    for (const [P, C] of e)
-      P !== t && y.add(C);
+    for (const [$, C] of e)
+      $ !== t && y.add(C);
     for (; y.has(g) && g <= o && g >= s; )
       g = E(g + a * l, s, o);
     return y.has(g) || g > o || g < s ? c : g;
@@ -428,7 +428,7 @@ function E(n, e, t) {
 const Ie = Q(x);
 class Ee extends Y {
   constructor() {
-    super(...arguments), this._popoverElement = H(), this._trackElement = H(), this.messages = ne({}), this._onPointerMoveDragUpdate = (e) => {
+    super(...arguments), this._stepsProvider = null, this._popoverElement = H(), this._trackElement = H(), this.messages = ne({}), this._onPointerMoveDragUpdate = (e) => {
       this._updateDrag(this._mapEventToRange(e));
     }, this._onPointerUpDragEnd = (e) => {
       M(e) && this._endDrag();
@@ -442,7 +442,7 @@ class Ee extends Y {
       return l ?? i.format(a);
     }, this._numberFormatOptions = {}, this._createFormatter = (e, t) => this._formatLabel.bind(this, e, t), this._minFormatter = this._createFormatter("min", this._numberFormatOptions), this._maxFormatter = this._createFormatter("max", this._numberFormatOptions), this._valueFormatter = this._createFormatter("value", this._numberFormatOptions), this._resizeObserver = new ResizeObserver(() => {
       this._layoutLabelInputs();
-    }), this._labelInputsUpdateComplete = null, this._dragInfo = null, this._hasPopoverContent = !1, this._hasContentStart = !1, this._hasContentEnd = !1, this._sliderData = Ie(this), this.allowValuesOverlap = !1, this.autoDestroyDisabled = !1, this.disabled = !1, this.fillPlacement = "start", this.layout = "horizontal", this.max = this._sliderData.max, this.min = this._sliderData.min, this.mirrored = !1, this.popoverLabel = "", this.popoverPlacement = "start", this.precision = this._sliderData.precision, this.rangeLabelsEditingEnabled = !1, this.rangeLabelsPlacement = "center", this.segmentsDraggingDisabled = !1, this.showRangeLabels = !1, this.valueLabelsDisplay = "hidden", this.valueLabelsPlacement = "start", this.valueLabelsEditingEnabled = !1, this.keyboardLargeStep = 10, this.values = this._sliderData.values, this.arcgisActiveValueChange = T({ cancelable: !1 }), this.arcgisChange = T({ cancelable: !1 }), this.arcgisInput = T({ cancelable: !1 }), this.arcgisRangeChange = T({ cancelable: !1 });
+    }), this._labelInputsUpdateComplete = null, this._dragInfo = null, this._hasPopoverContent = !1, this._hasContentStart = !1, this._hasContentEnd = !1, this._activePart = null, this._sliderData = Ie(this), this.allowValuesOverlap = !1, this.autoDestroyDisabled = !1, this.disabled = !1, this.fillPlacement = "start", this.layout = "horizontal", this.max = this._sliderData.max, this.min = this._sliderData.min, this.mirrored = !1, this.popoverLabel = "", this.popoverPlacement = "start", this.precision = this._sliderData.precision, this.rangeLabelsEditingEnabled = !1, this.rangeLabelsPlacement = "center", this.segmentsDraggingDisabled = !1, this.showRangeLabels = !1, this.valueLabelsDisplay = "hidden", this.valueLabelsPlacement = "start", this.valueLabelsEditingEnabled = !1, this.keyboardLargeStep = 10, this.values = this._sliderData.values, this.arcgisActiveValueChange = T({ cancelable: !1 }), this.arcgisChange = T({ cancelable: !1 }), this.arcgisInput = T({ cancelable: !1 }), this.arcgisRangeChange = T({ cancelable: !1 });
   }
   static {
     this.properties = { _dragInfo: 16, _hasPopoverContent: 16, _hasContentStart: 16, _hasContentEnd: 16, _activePart: 16, _sliderData: 16, activeValue: 32, allowValuesOverlap: 5, autoDestroyDisabled: 5, disabled: 7, fullRangeMax: 11, fullRangeMin: 11, fillPlacement: 1, labelFormatter: 0, layout: 3, max: 11, min: 11, mirrored: 7, popoverLabel: 1, popoverPlacement: 3, precision: 11, rangeLabelsEditingEnabled: 5, rangeLabelsPlacement: 3, segmentsDraggingDisabled: 5, showRangeLabels: 7, steps: [9, { converter: {
@@ -543,8 +543,8 @@ class Ee extends Y {
           continue;
         const d = o.getBoundingClientRect(), u = c.getBoundingClientRect(), h = c.getLabelBoundingClientRect(), f = d.width / 2, p = Math.round(d.left + f), v = Math.round(h.width / 2);
         let D = u.width / 2;
-        const g = i.left - f, y = i.right + f, P = p - v, C = p + v;
-        P < g ? D += P - g : C > y && (D += C - y), c.style.transform = `translateX(${-Math.round(D)}px)`;
+        const g = i.left - f, y = i.right + f, $ = p - v, C = p + v;
+        $ < g ? D += $ - g : C > y && (D += C - y), c.style.transform = `translateX(${-Math.round(D)}px)`;
       }
     }
   }
@@ -630,7 +630,7 @@ class Ee extends Y {
     }
   }
   _focusEntry(e) {
-    e && Pe(this, e)?.focus();
+    e && $e(this, e)?.focus();
   }
   _addDragListeners() {
     document.addEventListener("pointerup", this._onPointerUpDragEnd), document.addEventListener("pointermove", this._onPointerMoveDragUpdate), document.addEventListener("pointercancel", this._onPointerCancelDragEnd);
@@ -754,7 +754,7 @@ class Ee extends Y {
     })} @pointerdown=${this._onPointerDown}>${this._renderContentStart()}${this._renderContentEnd()}${this._renderRangeLabel("min")}${this._renderTrackRange()}${this._renderRangeLabel("max")}${this._renderPopover()}</div>`;
   }
   _renderPopover() {
-    const { _activePart: e, layout: t, popoverPlacement: a, valueLabelsPlacement: i, valueLabelsDisplay: r, popoverLabel: l } = this, s = e ? $e(e) ? e : "track-range" : "", o = this._hasPopoverContent && !!s, c = t === "horizontal" ? a === "start" ? "top" : "bottom" : a === "start" ? "left" : "right";
+    const { _activePart: e, layout: t, popoverPlacement: a, valueLabelsPlacement: i, valueLabelsDisplay: r, popoverLabel: l } = this, s = e ? Pe(e) ? e : "track-range" : "", o = this._hasPopoverContent && !!s, c = t === "horizontal" ? a === "start" ? "top" : "bottom" : a === "start" ? "left" : "right";
     let d = 14;
     return r !== "hidden" && a === i && (d += 24), _`<calcite-popover flip-disabled focus-trap-disabled .label=${l} .open=${o} .offsetDistance=${d} .placement=${c} pointer-disabled .referenceElement=${s} scale=s trigger-disabled ${R(this._popoverElement)}><slot name=popover @slotchange=${this._popoverSlotChange}></slot></calcite-popover>`;
   }
@@ -848,10 +848,10 @@ function V(n) {
   const e = ee(n, "[data-entry]");
   return e && "dataset" in e ? e.dataset.entry : null;
 }
-function $e(n) {
+function Pe(n) {
   return typeof n != null && n !== "range";
 }
-function Pe(n, e) {
+function $e(n, e) {
   return e ? n.renderRoot.querySelector(`div[data-entry="${e}"]`) : null;
 }
 function Ce(n, e) {