@arcgis/common-components 5.2.0-next.5 → 5.2.0-next.51

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

@@ -1,9 +1,9 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as $ } from "../../chunks/runtime.js";
-import { css as M, html as o } from "lit";
-import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as f } from "@arcgis/lumina";
-import { formatNumber as z } from "@arcgis/core/intl.js";
-const n = {
+import { c as M } from "../../chunks/runtime.js";
+import { css as C, html as h } from "lit";
+import { LitElement as F, createEvent as L, safeClassMap as o, nothing as y, safeStyleMap as m } from "@arcgis/lumina";
+import { formatNumber as T } from "@arcgis/core/intl.js";
+const c = {
   container: "container",
   ticksContainer: "ticks-container",
   labelsContainer: "labels-container",
@@ -11,131 +11,152 @@ const n = {
   tickMin: "tick--min",
   tickMax: "tick--max",
   tickLabel: "tick-label",
+  tickLabelFocused: "tick-label--focused",
+  tickLabelText: "tick-label-text",
   baseline: "baseline"
-}, A = M`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
-class F extends _ {
+}, z = C`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}.tick-label-text:hover{text-decoration:underline}.tick-label-text{display:inline-block;line-height:1}.tick-label--focused .tick-label-text{outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick:focus{background-color:var(--calcite-color-brand);outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}`;
+class A extends F {
   constructor() {
-    super(...arguments), this._formatValue = (e) => z(e, this._formatOptions), this._formatOptions = {
+    super(...arguments), this._formatValue = (t) => T(t, this._formatOptions), this._activeTick = null, this._formatOptions = {
       style: "decimal",
       useGrouping: !0,
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
-    }, this.interactive = !1, this.interpolationExponent = 0, this.labelPlacement = "end", this.layout = "horizontal", this.max = 100, this.min = 0, this.mirrored = !1, this.mode = "count", this.showLabels = !1, this.showBaseline = !1, this.values = [], this.arcgisTickClick = C({ cancelable: !1 });
+    }, this.interactive = !1, this.interpolationExponent = 0, this.labelPlacement = "end", this.layout = "horizontal", this.max = 100, this.min = 0, this.mirrored = !1, this.mode = "count", this.showLabels = !1, this.showBaseline = !1, this.values = [], this.arcgisTickClick = L({ cancelable: !1 });
   }
   static {
-    this.properties = { _formatOptions: 16, interactive: 7, interpolationExponent: 9, labelFormatter: 0, labelPlacement: 3, layout: 3, max: 9, min: 9, mirrored: 7, mode: 1, showLabels: 5, showBaseline: 5, values: [9, { converter: {
-      fromAttribute(e) {
-        if (e.includes(","))
-          return e.split(",").filter((t) => t.trim() !== "").map(parseFloat).filter((t) => Number.isFinite(t));
+    this.properties = { _activeTick: 16, _formatOptions: 16, interactive: 7, interpolationExponent: 9, labelFormatter: 0, labelPlacement: 3, layout: 3, max: 9, min: 9, mirrored: 7, mode: 1, showLabels: 5, showBaseline: 5, values: [9, { converter: {
+      fromAttribute(t) {
+        if (t.includes(","))
+          return t.split(",").filter((e) => e.trim() !== "").map(parseFloat).filter((e) => Number.isFinite(e));
         {
-          const t = parseFloat(e);
-          return Number.isFinite(t) ? [t] : [];
+          const e = parseFloat(t);
+          return Number.isFinite(e) ? [e] : [];
         }
       }
     } }] };
   }
   static {
-    this.styles = A;
+    this.styles = z;
   }
   updated() {
-    const e = this.renderRoot.querySelector(`.${n.labelsContainer}`);
-    if (e) {
-      let t = 0, i = 0;
-      for (const r of this.renderRoot.querySelectorAll(`.${n.tickLabel}`)) {
-        const a = r.getBoundingClientRect();
-        t = Math.max(t, a.width), i = Math.max(i, a.height);
+    const t = this.renderRoot.querySelector(`.${c.labelsContainer}`);
+    if (t) {
+      t.style.removeProperty("--labels-container-width"), t.style.removeProperty("--labels-container-height");
+      let e = 0, i = 0;
+      for (const a of this.renderRoot.querySelectorAll(`.${c.tickLabel}`)) {
+        const r = a.getBoundingClientRect();
+        e = Math.max(e, r.width), i = Math.max(i, r.height);
       }
-      t = Math.ceil(t), i = Math.ceil(i), !t || !i ? (e.style.removeProperty("--labels-container-width"), e.style.removeProperty("--labels-container-height")) : (e.style.setProperty("--labels-container-width", `${t}px`), e.style.setProperty("--labels-container-height", `${i}px`));
+      e = Math.ceil(e), i = Math.ceil(i), e && i && (t.style.setProperty("--labels-container-width", `${e}px`), t.style.setProperty("--labels-container-height", `${i}px`));
     }
   }
-  _handleClick(e) {
+  _handleBlur() {
+    this._activeTick = null;
+  }
+  _handleClick(t) {
     if (!this.interactive)
       return;
-    const i = e.target.dataset.value;
+    const i = t.currentTarget.dataset.value;
     i && this.arcgisTickClick.emit({ value: Number(i) });
   }
-  _internalLabelFormatter(e) {
-    const t = this.labelFormatter;
-    if (!t)
-      return this._formatValue(e);
-    const i = t(e, this._formatValue);
-    return i ?? this._formatValue(e);
+  _handleFocus(t) {
+    this._activeTick = t.currentTarget.dataset.value ?? null;
+  }
+  _handleKeyDown(t) {
+    t.key === "Enter" && this._handleClick(t);
+  }
+  _handleMouseDown(t) {
+    this.interactive && t.preventDefault();
+  }
+  _internalLabelFormatter(t) {
+    const e = this.labelFormatter;
+    if (!e)
+      return this._formatValue(t);
+    const i = e(t, this._formatValue);
+    return i ?? this._formatValue(t);
   }
   render() {
-    return o`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
+    return h`<div class=${o(c.container)} touch-action=none>${this._renderContent()}${this._renderBaseline()}</div>`;
   }
   _renderContent() {
-    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: c, mirrored: l, showLabels: w } = this, u = [], b = [];
-    for (const [k, d] of L(r, i, t, e, a)) {
-      const p = { [c === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${k}%` }, x = {
-        [n.tick]: !0,
-        [n.tickMin]: k === 0,
-        [n.tickMax]: k === 100
+    const { interpolationExponent: t, max: e, min: i, mode: a, values: r, layout: n, mirrored: s, showLabels: w, interactive: k } = this, g = [], v = [];
+    for (const [f, d] of P(a, i, e, t, r)) {
+      const p = { [n === "horizontal" ? s ? "right" : "left" : s ? "top" : "bottom"]: `${f}%` }, $ = {
+        [c.tick]: !0,
+        [c.tickMin]: f === 0,
+        [c.tickMax]: f === 100
       };
-      u.push(o`<div class=${h(x)} style=${f(p)} data-value=${d ?? v}></div>`), w && b.push(o`<div class=${h(n.tickLabel)} style=${f(p)} data-value=${d ?? v}>${this._internalLabelFormatter(d)}</div>`);
+      if (g.push(h`<div class=${o($)} .role=${k ? "button" : void 0} .ariaLabel=${k ? this._internalLabelFormatter(d) : void 0} style=${m(p)} data-value=${d ?? y} .tabIndex=${k ? 0 : -1} @blur=${this._handleBlur} @click=${this._handleClick} @focus=${this._handleFocus} @keydown=${this._handleKeyDown} @mousedown=${this._handleMouseDown}></div>`), w) {
+        const _ = {
+          [c.tickLabel]: !0,
+          [c.tickLabelFocused]: this._activeTick === String(d)
+        };
+        v.push(h`<div class=${o(_)} style=${m(p)} data-value=${d ?? y} @click=${this._handleClick}><span class=${o(c.tickLabelText)}>${this._internalLabelFormatter(d)}</span></div>`);
+      }
     }
-    return [o`<div class=${h(n.labelsContainer)}>${b}</div>`, o`<div class=${h(n.ticksContainer)}>${u}</div>`];
+    return [h`<div class=${o(c.labelsContainer)}>${v}</div>`, h`<div class=${o(c.ticksContainer)}>${g}</div>`];
   }
   _renderBaseline() {
-    const { showBaseline: e, layout: t } = this;
-    return e && o`<div class=${h(n.baseline)} style=${f({
-      [t === "horizontal" ? "width" : "height"]: "100%",
-      [t === "horizontal" ? "height" : "width"]: "0.125rem"
+    const { showBaseline: t, layout: e } = this;
+    return t && h`<div class=${o(c.baseline)} style=${m({
+      [e === "horizontal" ? "width" : "height"]: "100%",
+      [e === "horizontal" ? "height" : "width"]: "0.125rem"
     })}></div>` || "";
   }
 }
-function* L(s, e, t, i, r) {
-  switch (s) {
+function* P(l, t, e, i, a) {
+  switch (l) {
     case "value": {
-      const a = Array.isArray(r) ? r : [r];
-      for (const c of a) {
-        const l = P(e, t, c, i) * 100;
-        l >= 0 && l <= 100 && (yield [l, c]);
+      const r = Array.isArray(a) ? a : [a];
+      for (const n of r) {
+        const s = B(t, e, n, i) * 100;
+        s >= 0 && s <= 100 && (yield [s, n]);
       }
       break;
     }
     case "percent": {
-      if (Array.isArray(r))
-        for (const a of r)
-          a >= 0 && a <= 100 && (yield [a, m(e, t, a / 100, i)]);
-      else if (r > 0)
-        for (let a = 0; a <= 100; a += r)
-          yield [a, m(e, t, a / 100, i)];
+      if (Array.isArray(a))
+        for (const r of a)
+          r >= 0 && r <= 100 && (yield [r, u(t, e, r / 100, i)]);
+      else if (a > 0)
+        for (let r = 0; r <= 100; r += a)
+          yield [r, u(t, e, r / 100, i)];
       break;
     }
     case "count": {
-      const a = Array.isArray(r) ? r[0] : r;
-      if (a <= 1)
-        yield [50, m(e, t, 0.5, i)];
+      const r = Array.isArray(a) ? a[0] : a;
+      if (r <= 1)
+        yield [50, u(t, e, 0.5, i)];
       else
-        for (let c = 0; c < a; c++) {
-          const l = c * 100 / (a - 1);
-          yield [l, m(e, t, l / 100, i)];
+        for (let n = 0; n < r; n++) {
+          const s = n * 100 / (r - 1);
+          yield [s, u(t, e, s / 100, i)];
         }
       break;
     }
   }
 }
-function g(s, e, t) {
-  return t < s ? s : t > e ? e : t;
+function b(l, t, e) {
+  return e < l ? l : e > t ? t : e;
 }
-function y(s, e, t) {
-  return s + (e - s) * t;
+function x(l, t, e) {
+  return l + (t - l) * e;
 }
-function P(s, e, t, i = 0) {
-  let r = (t - s) / (e - s);
-  if (r = g(0, 1, r), Math.abs(i) < 1e-9)
-    return r;
-  const a = 1 + Math.expm1(i) * r;
-  return r = Math.log(a) / i, g(0, 1, r);
+function B(l, t, e, i = 0) {
+  let a = (e - l) / (t - l);
+  if (a = b(0, 1, a), Math.abs(i) < 1e-9)
+    return a;
+  const r = 1 + Math.expm1(i) * a;
+  return a = Math.log(r) / i, b(0, 1, a);
 }
-function m(s, e, t, i = 0) {
-  if (t = g(0, 1, t), Math.abs(i) < 1e-9)
-    return y(s, e, t);
-  const r = Math.expm1(i * t) / Math.expm1(i);
-  return y(s, e, r);
+function u(l, t, e, i = 0) {
+  if (e = b(0, 1, e), Math.abs(i) < 1e-9)
+    return x(l, t, e);
+  const a = Math.expm1(i * e) / Math.expm1(i);
+  return x(l, t, a);
 }
-$("arcgis-ticks", F);
+M("arcgis-ticks", A);
 export {
-  F as ArcgisTicks
+  A as ArcgisTicks
 };

package/dist/components/arcgis-unique-values-list/customElement.js

@@ -6,10 +6,10 @@ import { LitElement as K, createEvent as I } from "@arcgis/lumina";
 import { Task as Q } from "@lit/task";
 import { createRef as X, ref as L } from "lit/directives/ref.js";
 import { log as D, composeMissingPropertyMessage as N } from "@arcgis/toolkit/log";
-import { formatDate as F, convertDateFormatToIntlOptions as b, formatDateOnly as Y, formatTimeOnly as ee, formatTimestamp as U, formatNumber as te } from "@arcgis/core/intl.js";
+import { formatDate as F, convertDateFormatToIntlOptions as $, formatDateOnly as Y, formatTimeOnly as ee, formatTimestamp as U, formatNumber as te } from "@arcgis/core/intl.js";
 import ie from "@arcgis/core/smartMapping/statistics/uniqueValues.js";
 import { clone as O } from "@arcgis/core/core/lang.js";
-import { g as T, i as h } from "../../chunks/commonFunctions.js";
+import { g as E, i as h } from "../../chunks/general.js";
 import { f as S, e as z, k as B, d as Z } from "../../chunks/layer-utils.js";
 import { u as se } from "../../chunks/useT9n.js";
 function k(i) {
@@ -21,38 +21,38 @@ function R(i) {
 function ne(i, e, s) {
   let t;
   return e === "unknown" ? t = F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
   }) : t = F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: e
   }), t;
 }
 function oe(i) {
-  return i ? Y(i, b("short-date")) : "";
+  return i ? Y(i, $("short-date")) : "";
 }
 function ae(i) {
   let e;
-  return typeof i == "string" ? e = ee(i, b("short-date-long-time")) : e = F(i, {
-    ...b("long-time"),
+  return typeof i == "string" ? e = ee(i, $("short-date-long-time")) : e = F(i, {
+    ...$("long-time"),
     timeZone: "utc"
   }), e;
 }
 function le(i, e) {
   return typeof i == "string" ? e && "timeZone" in e && e.timeZone === "unknown" ? U(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
   }) : U(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
   }) : e && "timeZone" in e && e.timeZone === "unknown" ? F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
   }) : F(i, {
-    ...b("short-date-short-time"),
+    ...$("short-date-short-time"),
     timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
   });
 }
@@ -60,7 +60,7 @@ function A(i, e, s) {
   if (!S(i) && !z(i) && !B(i) && !Z(i))
     return;
   let t;
-  return T(i, s).fields.forEach((p) => {
+  return E(i, s).fields.forEach((p) => {
     const a = p.name, r = "domain" in p ? p.domain : void 0;
     if (!Z(i) && i.subtypeField === a) {
       let c;
@@ -107,7 +107,7 @@ function A(i, e, s) {
     }
   }), t;
 }
-function E(i, e) {
+function T(i, e) {
   const s = e;
   if (s) {
     let t = "";
@@ -151,7 +151,7 @@ class ue extends K {
         const u = h(e) && h(s) || h(t);
         if (!h(t) && !h(e) && !h(s) ? D("error", this, N("uniqueValues")) : h(t) || (h(e) || D("error", this, N("layer")), h(s) || D("error", this, N("fieldName"))), h(e) && h(s)) {
           const { visualizationSource: p } = this;
-          if (!T(e, p).fields?.filter((c) => c.name === s))
+          if (!E(e, p).fields?.filter((c) => c.name === s))
             throw D("error", this, "Field could not be found."), new Error();
         }
         if (!u)
@@ -185,7 +185,7 @@ class ue extends K {
     this.layer && this.fieldInfo && (setTimeout(() => this.initialRender = !1, 800), this.listNode?.setFocus());
   }
   async processProps() {
-    const { layer: e, fieldName: s, view: t, visualizationSource: u } = this, a = (e ? T(e, u) : void 0)?.fields?.filter((r) => r.name === s)?.[0];
+    const { layer: e, fieldName: s, view: t, visualizationSource: u } = this, a = (e ? E(e, u) : void 0)?.fields?.filter((r) => r.name === s)?.[0];
     if (h(this.uniqueValues))
       this.fieldInfo = {
         layerField: a,
@@ -260,20 +260,20 @@ class ue extends K {
         if (!l?.length)
           return "";
         const g = n ? ["small-integer", "big-integer", "integer", "single", "double", "long", "oid"].includes(n) : !1, v = n ? ["date", "date-only", "time-only"].includes(n) : !1, _ = (y) => {
-          y.sort(($, m) => $.count <= m.count ? 1 : -1);
+          y.sort((m, f) => m.count <= f.count ? 1 : -1);
         }, M = (y) => {
-          const $ = c?.length;
-          y.sort((m, f) => {
-            if (!$ && g)
-              return (typeof m.value == "string" ? Number.parseFloat(m.value) : m.value) - (typeof f.value == "string" ? Number.parseFloat(f.value) : f.value);
+          const m = c?.length;
+          y.sort((f, b) => {
+            if (!m && g)
+              return (typeof f.value == "string" ? Number.parseFloat(f.value) : f.value) - (typeof b.value == "string" ? Number.parseFloat(b.value) : b.value);
             {
-              const q = $ ? E(m.value, c) : m.label ?? m.value, V = $ ? E(f.value, c) : f.label ?? f.value;
+              const q = m ? T(f.value, c) : f.label ?? f.value, V = m ? T(b.value, c) : b.label ?? b.value;
               return `${q}`.startsWith("_") ? 1 : `${V}`.startsWith("_") ? -1 : `${q}`.localeCompare(`${V}`);
             }
           });
-        }, P = (y, $) => {
-          y.sort((m, f) => {
-            const q = $?.indexOf(m.value) ?? -1, V = $?.indexOf(f.value) ?? -1;
+        }, P = (y, m) => {
+          y.sort((f, b) => {
+            const q = m?.indexOf(f.value) ?? -1, V = m?.indexOf(b.value) ?? -1;
             return q === V || q > -1 && V > -1 ? 0 : q > V ? -1 : 1;
           });
         };
@@ -281,7 +281,7 @@ class ue extends K {
         const W = l.map((y) => this.renderUniqueValue(y));
         let x;
         return d && !p && (x = w`<div class="unique-values-content-list-msg">${r.errors.tooManyUniqueValues}</div>`), w`<div class="container"><calcite-list .label=${r.values} class="popover-unique-list" .filterEnabled=${l.length >= a} .selectionMode=${u ? "multiple" : "single"} .filterPlaceholder=${r.searchValues} @calciteListChange=${(y) => {
-          let m = y.target.selectedItems.map((f) => f.value);
+          let m = y.currentTarget.selectedItems.map((f) => f.value);
           !c && n === "date-only" ? m = m?.map((f) => R(f)) : !c && n === "time-only" ? m = m?.map((f) => k(f)) : n && ["date", "oid", "small-integer", "big-integer", "integer", "long"].includes(n) ? m = m?.map((f) => Number.parseInt(f)) : n && ["single", "double"].includes(n) && (m = m?.map((f) => Number.parseFloat(f))), !this.isSameLists(m, this.selectedValues) && (this.selectedValues = m, this.arcgisChange.emit(m));
         }} @calciteListFilter=${() => {
           this.dropdownNode.value && (this.dropdownNode.value.disabled = this.listNode.filteredItems.length < 4);
@@ -295,7 +295,7 @@ class ue extends K {
     return w`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed @calciteDropdownSelect=${this.onSortMenuSelect} ${L(this.dropdownNode)}><calcite-action slot=trigger .label=${u.sortValues} text><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${t === "count" || !h(t)} data-value=count>${u.sortByCount}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "name"} data-value=name>${e || s ? u.sortAscending : u.sortAlphabetical}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "selected"} data-value=selected>${u.sortSelected}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
   }
   renderUniqueValue(e) {
-    const { selectedValues: s, initialRender: t, view: u, fieldInfo: p, numberFormatOptions: a } = this, { fieldDomains: r, uniqueValueInfos: c, simpleType: l } = p, d = u && "timeZone" in u && u.timeZone || "system", o = r?.length ? E(e.value, r) : l === "date" ? ne(e.value, d) : l === "date-only" ? oe(e.value) : l === "time-only" ? ae(e.value) : l === "timestamp-offset" ? le(e.value, u) : typeof e.value == "number" ? te(e.value, a) : e.label ?? e.value, n = s ? l === "date-only" ? s.includes(r?.length ? e.value : R(e.value)) : l === "time-only" ? s.includes(r?.length ? e.value : k(e.value)) : s.includes(e.value) : !1;
+    const { selectedValues: s, initialRender: t, view: u, fieldInfo: p, numberFormatOptions: a } = this, { fieldDomains: r, uniqueValueInfos: c, simpleType: l } = p, d = u && "timeZone" in u && u.timeZone || "system", o = r?.length ? T(e.value, r) : l === "date" ? ne(e.value, d) : l === "date-only" ? oe(e.value) : l === "time-only" ? ae(e.value) : l === "timestamp-offset" ? le(e.value, u) : typeof e.value == "number" ? te(e.value, a) : e.label ?? e.value, n = s ? l === "date-only" ? s.includes(r?.length ? e.value : R(e.value)) : l === "time-only" ? s.includes(r?.length ? e.value : k(e.value)) : s.includes(e.value) : !1;
     return J(`list-item_${e.value}`, w`<calcite-list-item .label=${`${o}`} .value=${`${e.value}`} .selected=${n}>${h(e.count) && (c.length > 200 && !t || c.length <= 200) ? w`<div class="count" slot=actions-end>${`${e.count}`}</div>` : null}</calcite-list-item>`);
   }
 }