@arcgis/common-components 5.1.0-next.6 → 5.1.0-next.60

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

@@ -1,6 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
+/** @internal */
 export abstract class ArcgisSliderInput extends LitElement {
   /**
    * If true, prevents interaction with the component.

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

@@ -1,16 +1,16 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Layout, TickMode, TickValues } from "./types.js";
 
 /**
  * The ticks component displays visual markers along a line to indicate scale, intervals, or specific values. It is often used in conjunction with the
- * [Slider component](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-slider/). Ticks help users understand the
+ * [Slider component](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/). Ticks help users understand the
  * slider’s range and make more precise selections.
  *
- * Tick placement is controlled by the [mode](#mode), which defines how the [values](#values) are parsed and translated into positions along the
- * line. Tick positions are derived from the component’s [min](#min) and [max](#max) range, with optional none-linear scaling via
- * [interpolationExponent](#interpolationExponent). Ticks can be displayed in vertical or horizontal [layouts](#layout), with optional [labels](#showLabels) and a [baseline](#showBaseline).
- * The component can also be made [interactive](#interactive) to respond to user clicks on individual ticks. The [labelFormatter](#labelFormatter) property allows customization of tick label formatting.
+ * Tick placement is controlled by the [mode](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#mode), which defines how the [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) are parsed and translated into positions along the
+ * line. Tick positions are derived from the component’s [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#max) range, with optional none-linear scaling via
+ * [interpolationExponent](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#interpolationExponent). Ticks can be displayed in vertical or horizontal [layout](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#layout), with optional [showLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#showLabels) and a [showBaseline](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#showBaseline).
+ * The component can also be made [interactive](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#interactive) to respond to user clicks on individual ticks. The [labelFormatter](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#labelFormatter) property allows customization of tick label formatting.
  *
  * @cssproperty [--arcgis-ticks-tick-length] - Specifies the length of the ticks.
  * @cssproperty [--arcgis-ticks-tick-color] - Specifies the color of the ticks.
@@ -65,7 +65,7 @@ export abstract class ArcgisTicks extends LitElement {
    * };
    * ```
    */
-  accessor labelFormatter: ((value: number, defaultFormatter: (value: number) => string) => nullish | string) | undefined;
+  accessor labelFormatter: (value: number, defaultFormatter: (value: number) => string) => string | null | undefined;
   /**
    * Determines whether the labels are placed before or after the ticks.
    *
@@ -186,10 +186,4 @@ export abstract class ArcgisTicks extends LitElement {
   readonly "@eventTypes": {
     arcgisTickClick: ArcgisTicks["arcgisTickClick"]["detail"];
   };
-}
-
-export type Layout = "horizontal" | "vertical";
-
-export type TickMode = "count" | "percent" | "value";
-
-export type TickValues = number[] | number;
+}

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

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as $ } from "../../chunks/runtime.js";
 import { css as M, html as c } from "lit";
-import { LitElement as _, createEvent as C, safeClassMap as h, safeStyleMap as u, nothing as v } from "@arcgis/lumina";
+import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as u } from "@arcgis/lumina";
 import { formatNumber as z } from "@arcgis/core/intl.js";
 const n = {
   container: "container",

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

@@ -0,0 +1,23 @@
+/**
+ * The layout of the [arcgis-ticks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/) component, which determines the orientation of the ticks.
+ *
+ * @since 5.0
+ */
+export type Layout = "horizontal" | "vertical";
+
+/**
+ * The mode of positioning ticks along the [arcgis-ticks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/) component. It drives how [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted.
+ * - `count`: Places a fixed number of ticks (provided in the [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) property) at equal distances from each other.
+ * - `percent`: [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is interpreted as percentage. If [arcgis-ticks.values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#values) is a number, it indicates the interval between ticks. If it is an array, it indicates the percentage values at which to place the ticks.
+ * - `value`: Indicates that ticks will only be placed at the values specified in the property.
+ *
+ * @since 5.0
+ */
+export type TickMode = "count" | "percent" | "value";
+
+/**
+ * Indicates where ticks will be rendered along the [arcgis-ticks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/) component.
+ *
+ * @since 5.0
+ */
+export type TickValues = number[] | number;

package/dist/components/arcgis-unique-values-list/customElement.d.ts

@@ -1,10 +1,17 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { UniqueValueCountInfo } from "@arcgis/core/smartMapping/statistics/types.js";
 import type { SupportedLayer } from "./utils/basic.js";
+import type { VisualizationSource } from "../../utils/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-/** Displays a list of unique values taking into account field type formatting and field domains. */
+/**
+ * Displays a list of unique values taking into account field type formatting and field domains.
+ *
+ * @internal
+ */
 export abstract class ArcgisUniqueValuesList extends LitElement {
   /** @internal */
   protected _messages: {
@@ -81,15 +88,17 @@ export abstract class ArcgisUniqueValuesList extends LitElement {
    * List of all unique values. If not provided component will get the unique values from the layer.
    * An empty list would mean that there are no unique values for this field on the layer. The component renders nothing then.
    */
-  accessor uniqueValues: __esri.UniqueValuesResultUniqueValueInfos[] | undefined;
+  accessor uniqueValues: UniqueValueCountInfo[] | undefined;
   /** MapView instance, required if uniqueValues is not provided and/or to display dates in the correct timezone */
-  accessor view: __esri.MapView | __esri.SceneView | undefined;
+  accessor view: MapView | SceneView | undefined;
+  /** Optional, specify visualization source other than the layer itself. */
+  accessor visualizationSource: VisualizationSource | undefined;
   /**
    * Get all unique values.
    * E.g. to be used to limit how often these unique values need to be requested from the layer.
    */
   getUniqueValues(): Promise<{
-      uniqueValues: __esri.UniqueValuesResultUniqueValueInfos[];
+      uniqueValues: UniqueValueCountInfo[];
       partialUniqueValues: boolean;
   } | undefined>;
   /** Sets focus on component */

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

@@ -1,127 +1,127 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as M } from "../../chunks/runtime.js";
-import { css as P, html as q } from "lit";
-import { keyed as W } from "lit/directives/keyed.js";
-import { LitElement as z, createEvent as D } from "@arcgis/lumina";
+import { c as _ } from "../../chunks/runtime.js";
+import { css as M, html as S } from "lit";
+import { keyed as P } from "lit/directives/keyed.js";
+import { LitElement as W, createEvent as F } from "@arcgis/lumina";
 import { Task as H } from "@lit/task";
-import { createRef as j, ref as S } from "lit/directives/ref.js";
-import { log as V, composeMissingPropertyMessage as F } from "@arcgis/toolkit/log";
-import { formatDate as w, convertDateFormatToIntlOptions as v, formatDateOnly as G, formatTimeOnly as J, formatTimestamp as T, formatNumber as K } from "@arcgis/core/intl.js";
-import Q from "@arcgis/core/smartMapping/statistics/uniqueValues.js";
-import { clone as N } from "@arcgis/core/core/lang.js";
-import { i as h } from "../../chunks/commonFunctions.js";
-import { u as X } from "../../chunks/useT9n.js";
-function x(i) {
+import { createRef as G, ref as T } from "lit/directives/ref.js";
+import { log as w, composeMissingPropertyMessage as N } from "@arcgis/toolkit/log";
+import { formatDate as D, convertDateFormatToIntlOptions as b, formatDateOnly as J, formatTimeOnly as K, formatTimestamp as x, formatNumber as Q } from "@arcgis/core/intl.js";
+import X from "@arcgis/core/smartMapping/statistics/uniqueValues.js";
+import { clone as I } from "@arcgis/core/core/lang.js";
+import { g as Z, i as h } from "../../chunks/commonFunctions.js";
+import { u as Y } from "../../chunks/useT9n.js";
+function U(i) {
   return (/* @__PURE__ */ new Date(`1970-01-01T${i}Z`)).getTime();
 }
-function O(i) {
+function L(i) {
   return (/* @__PURE__ */ new Date(`${i} 00:00:00`)).getTime();
 }
-function Y(i, e, t) {
-  let o;
-  return e === "unknown" ? o = w(i, {
-    ...v("short-date-short-time"),
+function ee(i, e, s) {
+  let t;
+  return e === "unknown" ? t = D(i, {
+    ...b("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : o = w(i, {
-    ...v("short-date-short-time"),
+  }) : t = D(i, {
+    ...b("short-date-short-time"),
     timeZone: e
-  }), o;
-}
-function ee(i) {
-  return i ? G(i, v("short-date")) : "";
+  }), t;
 }
 function te(i) {
+  return i ? J(i, b("short-date")) : "";
+}
+function ie(i) {
   let e;
-  return typeof i == "string" ? e = J(i, v("short-date-long-time")) : e = w(i, {
-    ...v("long-time"),
+  return typeof i == "string" ? e = K(i, b("short-date-long-time")) : e = D(i, {
+    ...b("long-time"),
     timeZone: "utc"
   }), e;
 }
-function ie(i, e) {
-  return typeof i == "string" ? e && "timeZone" in e && e.timeZone === "unknown" ? T(i, {
-    ...v("short-date-short-time"),
+function se(i, e) {
+  return typeof i == "string" ? e && "timeZone" in e && e.timeZone === "unknown" ? x(i, {
+    ...b("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : T(i, {
-    ...v("short-date-short-time"),
+  }) : x(i, {
+    ...b("short-date-short-time"),
     timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
-  }) : e && "timeZone" in e && e.timeZone === "unknown" ? w(i, {
-    ...v("short-date-short-time"),
+  }) : e && "timeZone" in e && e.timeZone === "unknown" ? D(i, {
+    ...b("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : w(i, {
-    ...v("short-date-short-time"),
+  }) : D(i, {
+    ...b("short-date-short-time"),
     timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
   });
 }
-function U(i, e) {
+function z(i, e, s) {
   if (i.type !== "feature" && i.type !== "subtype-group" && i.type !== "subtype-sublayer" && i.type !== "imagery")
     return;
   let t;
-  return i.fields.forEach((o) => {
-    const n = o.name, r = o.domain;
-    if (i.type !== "imagery" && i.subtypeField === n) {
-      let m;
-      i.type === "subtype-group" || i.type === "feature" ? m = i.subtypes : m = i.parent.subtypes, m.forEach((u) => {
-        i.type === "subtype-sublayer" && i.subtypeCode !== u.code || (e.name === n && (t = t || [], t.push({ code: u.code, name: u.name })), u.domains && Object.keys(u.domains).forEach((l) => {
-          if (e.name === l) {
-            const s = u.domains[l];
-            s?.type === "coded-value" && s?.codedValues && s.codedValues.forEach((a) => {
-              let p = !1;
-              t = t || [], t.forEach((d) => {
-                d.code === a.code && (p = !0, `| ${d.name} |`.includes(`| ${a.name} |`) || (d.name += ` | ${a.name}`));
-              }), p || t.push({ code: a.code, name: a.name });
+  return Z(i, s).fields.forEach((p) => {
+    const a = p.name, r = "domain" in p ? p.domain : void 0;
+    if (i.type !== "imagery" && i.subtypeField === a) {
+      let c;
+      i.type === "subtype-group" || i.type === "feature" ? c = i.subtypes : c = i.parent.subtypes, c.forEach((l) => {
+        i.type === "subtype-sublayer" && i.subtypeCode !== l.code || (e.name === a && (t = t || [], t.push({ code: l.code, name: l.name })), l.domains && Object.keys(l.domains).forEach((d) => {
+          if (e.name === d) {
+            const o = l.domains[d];
+            o?.type === "coded-value" && o?.codedValues && o.codedValues.forEach((n) => {
+              let g = !1;
+              t = t || [], t.forEach((v) => {
+                v.code === n.code && (g = !0, `| ${v.name} |`.includes(`| ${n.name} |`) || (v.name += ` | ${n.name}`));
+              }), g || t.push({ code: n.code, name: n.name });
             });
           }
         }));
       });
     }
-    if (e.name === n && (i.type === "feature" || i.type === "imagery")) {
-      const m = i.type === "feature" ? i.typeIdField : void 0, u = i.type === "feature" ? i.types : void 0;
-      i.type === "feature" && m && u ? (m === n ? t = u.map(
-        (l) => (
+    if (e.name === a && (i.type === "feature" || i.type === "imagery")) {
+      const c = i.type === "feature" ? i.typeIdField : void 0, l = i.type === "feature" ? i.types : void 0;
+      i.type === "feature" && c && l ? (c === a ? t = l.map(
+        (d) => (
           // fake coded Values
           {
-            code: l.id,
-            name: l.name
+            code: d.id,
+            name: d.name
           }
         )
-      ) : (t = t || [], u.forEach((l) => {
-        if (!l.domains?.[n] || l.domains[n].type === "inherited") {
-          const s = r;
-          s?.codedValues && s.codedValues.forEach((a) => {
-            let p = !1;
-            t.forEach((d) => {
-              d.code === a.code && (p = !0, `| ${d.name} |`.includes(`| ${a.name} |`) || (d.name += ` | ${a.name}`));
-            }), p || t.push(N(a));
+      ) : (t = t || [], l.forEach((d) => {
+        if (!d.domains?.[a] || d.domains[a].type === "inherited") {
+          const o = r;
+          o?.codedValues && o.codedValues.forEach((n) => {
+            let g = !1;
+            t.forEach((v) => {
+              v.code === n.code && (g = !0, `| ${v.name} |`.includes(`| ${n.name} |`) || (v.name += ` | ${n.name}`));
+            }), g || t.push(I(n));
           });
-        } else l.domains?.[n]?.codedValues && l.domains[n].codedValues.forEach((s) => {
-          let a = !1;
-          t.forEach((p) => {
-            p.code === s.code && (a = !0, `| ${p.name} |`.includes(`| ${s.name} |`) || (p.name += ` | ${s.name}`));
-          }), a || t.push(N(s));
+        } else d.domains?.[a]?.codedValues && d.domains[a].codedValues.forEach((o) => {
+          let n = !1;
+          t.forEach((g) => {
+            g.code === o.code && (n = !0, `| ${g.name} |`.includes(`| ${o.name} |`) || (g.name += ` | ${o.name}`));
+          }), n || t.push(I(o));
         });
-      })), !t?.length && r?.codedValues && (t = N(r.codedValues))) : r?.codedValues && (t = r.codedValues);
+      })), !t?.length && r?.codedValues && (t = I(r.codedValues))) : r?.codedValues && (t = r.codedValues);
     }
   }), t;
 }
-function I(i, e) {
-  const t = e;
-  if (t) {
-    let o = "";
-    for (let n = 0; n < t.length; n++) {
-      const r = t[n];
-      r.code == i && (o += (o.length ? " | " : "") + r.name);
+function O(i, e) {
+  const s = e;
+  if (s) {
+    let t = "";
+    for (let u = 0; u < s.length; u++) {
+      const p = s[u];
+      p.code == i && (t += (t.length ? " | " : "") + p.name);
     }
-    return o.length || (o = `${i}`), o;
+    return t.length || (t = `${i}`), t;
   }
   return i;
 }
-function L(i) {
+function B(i) {
   return ["small-integer", "big-integer", "integer", "single", "double", "long"].includes(i.type);
 }
-function B(i) {
+function R(i) {
   switch (i.type) {
     case "small-integer":
     case "big-integer":
@@ -142,26 +142,33 @@ function B(i) {
       return i.type;
   }
 }
-const se = P`:host{width:100%}.container{min-height:30px}.popover-unique-list{width:100%;overflow-y:auto}.unique-values-content-list-msg{font-size:75%;margin:5px}.count{padding:0 6px;font-size:smaller;white-space:nowrap}`;
-class ne extends z {
+const ne = M`:host{width:100%}.container{min-height:30px}.popover-unique-list{width:100%;overflow-y:auto}.unique-values-content-list-msg{font-size:75%;margin:5px}.count{padding:0 6px;font-size:smaller;white-space:nowrap}`;
+class oe extends W {
   constructor() {
-    super(...arguments), this.dropdownNode = j(), this._messages = X({ blocking: !0 }), this._propWatcherTask = new H(this, {
-      task: async ([e, t, o]) => {
-        const n = h(e) && h(t) || h(o);
-        if (!h(o) && !h(e) && !h(t) ? V("error", this, F("uniqueValues")) : h(o) || (h(e) || V("error", this, F("layer")), h(t) || V("error", this, F("fieldName"))), h(e) && h(t) && !e.fields?.filter((m) => m.name === t))
-          throw V("error", this, "Field could not be found."), new Error();
-        if (!n)
+    super(...arguments), this.dropdownNode = G(), this._messages = Y({ blocking: !0 }), this._propWatcherTask = new H(this, {
+      task: async ([e, s, t]) => {
+        const u = h(e) && h(s) || h(t);
+        if (!h(t) && !h(e) && !h(s) ? w("error", this, N("uniqueValues")) : h(t) || (h(e) || w("error", this, N("layer")), h(s) || w("error", this, N("fieldName"))), h(e) && h(s)) {
+          const { visualizationSource: p } = this;
+          if (!Z(e, p).fields?.filter((c) => c.name === s))
+            throw w("error", this, "Field could not be found."), new Error();
+        }
+        if (!u)
           throw new Error();
         await this.processProps();
       },
-      args: () => [this.layer, this.fieldName, this.uniqueValues]
-    }), this.initialRender = !0, this.multiple = !1, this.partialUniqueValues = !1, this.showFilterLength = 10, this.arcgisChange = D(), this.arcgisSortByChange = D(), this.arcgisLoad = D();
+      args: () => [
+        this.layer,
+        this.fieldName,
+        this.uniqueValues
+      ]
+    }), this.initialRender = !0, this.multiple = !1, this.partialUniqueValues = !1, this.showFilterLength = 10, this.arcgisChange = F(), this.arcgisSortByChange = F(), this.arcgisLoad = F();
   }
   static {
-    this.properties = { initialRender: 16, view: 0, layer: 0, fieldName: 1, uniqueValues: 0, numberFormatOptions: 0, selectedValues: 0, sortBy: 1, multiple: 5, partialUniqueValues: 5, showFilterLength: 9, maxHeight: 9 };
+    this.properties = { initialRender: 16, view: 0, layer: 0, visualizationSource: 1, fieldName: 1, uniqueValues: 0, numberFormatOptions: 0, selectedValues: 0, sortBy: 1, multiple: 5, partialUniqueValues: 5, showFilterLength: 9, maxHeight: 9 };
   }
   static {
-    this.styles = se;
+    this.styles = ne;
   }
   async setFocus() {
     this.listNode?.setFocus();
@@ -169,51 +176,51 @@ class ne extends z {
   async getUniqueValues() {
     const { fieldInfo: e } = this;
     if (h(e?.uniqueValueInfos)) {
-      const { uniqueValueInfos: t, partialUniqueValues: o } = e;
-      return { uniqueValues: t, partialUniqueValues: o };
+      const { uniqueValueInfos: s, partialUniqueValues: t } = e;
+      return { uniqueValues: s, partialUniqueValues: t };
     }
   }
   loaded() {
     this.layer && this.fieldInfo && (setTimeout(() => this.initialRender = !1, 800), this.listNode?.setFocus());
   }
   async processProps() {
-    const { layer: e, fieldName: t, view: o } = this, n = e?.fields?.filter((r) => r.name === t)?.[0];
+    const { layer: e, fieldName: s, view: t, visualizationSource: u } = this, a = (e ? Z(e, u) : void 0)?.fields?.filter((r) => r.name === s)?.[0];
     if (h(this.uniqueValues))
       this.fieldInfo = {
-        layerField: n,
-        fieldDomains: e && n ? U(e, n) : void 0,
-        simpleType: e && n ? B(n) : void 0,
+        layerField: a,
+        fieldDomains: e && a ? z(e, a, u) : void 0,
+        simpleType: e && a ? R(a) : void 0,
         partialUniqueValues: this.partialUniqueValues ?? !1,
         uniqueValueInfos: this.uniqueValues
       }, this.arcgisLoad.emit();
-    else if (e && n) {
+    else if (e && a) {
       this.fieldInfo = {
-        layerField: n,
-        fieldDomains: U(e, n),
-        simpleType: B(n),
+        layerField: a,
+        fieldDomains: z(e, a, u),
+        simpleType: R(a),
         partialUniqueValues: !1
       };
       const { fieldInfo: r } = this;
       try {
-        const m = await Q({
+        const c = await X({
           layer: e,
-          view: o,
-          field: t,
+          view: t,
+          field: s,
           sqlWhere: "definitionExpression" in e ? e.definitionExpression ?? void 0 : void 0,
           forBinning: !1
-        }), u = L(n), l = m.uniqueValueInfos.filter((s) => h(s.value) ? n.type === "string" && !u || n.type === "guid" ? s.value !== "<Null>" && `${s.value}`.trim() !== "" : (L(n) || n.type === "oid" || u, s.value !== "<Null>" && s.value !== "") : !1);
-        l.sort((s, a) => s.count > a.count ? -1 : s.count < a.count ? 1 : 0), r.fieldDomains?.length && r.fieldDomains.forEach((s) => {
-          l.find((a) => a.value === s.code) || l.push({
-            value: s.code,
+        }), l = B(a), d = c.uniqueValueInfos.filter((o) => h(o.value) ? a.type === "string" && !l || a.type === "guid" ? o.value !== "<Null>" && `${o.value}`.trim() !== "" : (B(a) || a.type === "oid" || l, o.value !== "<Null>" && o.value !== "") : !1);
+        d.sort((o, n) => o.count > n.count ? -1 : o.count < n.count ? 1 : 0), r.fieldDomains?.length && r.fieldDomains.forEach((o) => {
+          d.find((n) => n.value === o.code) || d.push({
+            value: o.code,
             count: 0
           });
-        }), r.uniqueValueInfos = l, r.partialUniqueValues = m.uniqueValueInfos.length === 2e3, this.arcgisLoad.emit();
-      } catch (m) {
-        if (V("error", this, `uniqueValues() - ${m.message}`), this.hasFieldDomains(r)) {
-          const l = [];
-          r.fieldDomains.forEach((s) => {
-            l.find((a) => a.value === s.code) || l.push({
-              value: s.code,
+        }), r.uniqueValueInfos = d, r.partialUniqueValues = c.uniqueValueInfos.length === 2e3, this.arcgisLoad.emit();
+      } catch (c) {
+        if (w("error", this, `uniqueValues() - ${c.message}`), this.hasFieldDomains(r)) {
+          const d = [];
+          r.fieldDomains.forEach((o) => {
+            d.find((n) => n.value === o.code) || d.push({
+              value: o.code,
               count: void 0
             });
           });
@@ -225,20 +232,20 @@ class ne extends z {
     }
   }
   setListRef(e) {
-    const { maxHeight: t } = this;
-    this.listNode = e, t && e?.setAttribute("style", `max-height: ${t || 400}px`);
+    const { maxHeight: s } = this;
+    this.listNode = e, s && e?.setAttribute("style", `max-height: ${s || 400}px`);
   }
   onSortMenuSelect(e) {
-    const o = e.currentTarget.selectedItems?.[0].getAttribute("data-value");
-    this.sortBy = o || void 0, this.arcgisSortByChange.emit(o || void 0);
+    const t = e.currentTarget.selectedItems?.[0].getAttribute("data-value");
+    this.sortBy = t || void 0, this.arcgisSortByChange.emit(t || void 0);
   }
-  isSameLists(e, t) {
-    if (!e && !t)
+  isSameLists(e, s) {
+    if (!e && !s)
       return !0;
-    if (!e || !t || e?.length !== t?.length)
+    if (!e || !s || e?.length !== s?.length)
       return !1;
-    for (let o = 0; o < e.length; o++)
-      if (e[o] !== t[o])
+    for (let t = 0; t < e.length; t++)
+      if (e[t] !== s[t])
         return !1;
     return !0;
   }
@@ -248,50 +255,50 @@ class ne extends z {
   render() {
     return this._propWatcherTask.render({
       complete: () => {
-        const { fieldInfo: e, selectedValues: t, sortBy: o, multiple: n, initialRender: r, showFilterLength: m, _messages: u } = this, { fieldDomains: l, uniqueValueInfos: s, partialUniqueValues: a, layerField: p } = e, d = p?.type;
-        if (!s?.length)
+        const { fieldInfo: e, selectedValues: s, sortBy: t, multiple: u, initialRender: p, showFilterLength: a, _messages: r } = this, { fieldDomains: c, uniqueValueInfos: l, partialUniqueValues: d, layerField: o } = e, n = o?.type;
+        if (!l?.length)
           return "";
-        const Z = d ? ["small-integer", "big-integer", "integer", "single", "double", "long", "oid"].includes(d) : !1, R = d ? ["date", "date-only", "time-only"].includes(d) : !1, k = (g) => {
-          g.sort((y, c) => y.count <= c.count ? 1 : -1);
-        }, A = (g) => {
-          const y = l?.length;
-          g.sort((c, f) => {
-            if (!y && Z)
-              return (typeof c.value == "string" ? Number.parseFloat(c.value) : c.value) - (typeof f.value == "string" ? Number.parseFloat(f.value) : f.value);
+        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, k = (y) => {
+          y.sort(($, m) => $.count <= m.count ? 1 : -1);
+        }, A = (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 $ = y ? I(c.value, l) : c.value, b = y ? I(f.value, l) : f.value;
-              return `${$}`.startsWith("_") ? 1 : `${b}`.startsWith("_") ? -1 : `${$}`.localeCompare(`${b}`);
+              const q = $ ? O(m.value, c) : m.label ?? m.value, V = $ ? O(f.value, c) : f.label ?? f.value;
+              return `${q}`.startsWith("_") ? 1 : `${V}`.startsWith("_") ? -1 : `${q}`.localeCompare(`${V}`);
             }
           });
-        }, C = (g, y) => {
-          g.sort((c, f) => {
-            const $ = y?.indexOf(c.value) ?? -1, b = y?.indexOf(f.value) ?? -1;
-            return $ === b || $ > -1 && b > -1 ? 0 : $ > b ? -1 : 1;
+        }, C = (y, $) => {
+          y.sort((m, f) => {
+            const q = $?.indexOf(m.value) ?? -1, V = $?.indexOf(f.value) ?? -1;
+            return q === V || q > -1 && V > -1 ? 0 : q > V ? -1 : 1;
           });
         };
-        A(s), !o || o === "count" ? k(s) : o === "selected" && C(s, t);
-        const _ = s.map((g) => this.renderUniqueValue(g));
+        A(l), !t || t === "count" ? k(l) : t === "selected" && C(l, s);
+        const j = l.map((y) => this.renderUniqueValue(y));
         let E;
-        return a && !r && (E = q`<div class="unique-values-content-list-msg">${u.errors.tooManyUniqueValues}</div>`), q`<div class="container"><calcite-list .label=${u.values} class="popover-unique-list" .filterEnabled=${s.length >= m} .selectionMode=${n ? "multiple" : "single"} .filterPlaceholder=${u.searchValues} @calciteListChange=${(g) => {
-          let c = g.target.selectedItems.map((f) => f.value);
-          !l && d === "date-only" ? c = c?.map((f) => O(f)) : !l && d === "time-only" ? c = c?.map((f) => x(f)) : d && ["date", "oid", "small-integer", "big-integer", "integer", "long"].includes(d) ? c = c?.map((f) => Number.parseInt(f)) : d && ["single", "double"].includes(d) && (c = c?.map((f) => Number.parseFloat(f))), !this.isSameLists(c, this.selectedValues) && (this.selectedValues = c, this.arcgisChange.emit(c));
+        return d && !p && (E = S`<div class="unique-values-content-list-msg">${r.errors.tooManyUniqueValues}</div>`), S`<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);
+          !c && n === "date-only" ? m = m?.map((f) => L(f)) : !c && n === "time-only" ? m = m?.map((f) => U(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);
-        }} ${S(this.setListRef)}>${s.length >= m && !r ? this.renderSort(Z, R) : null}${_}</calcite-list>${E}</div>`;
+        }} ${T(this.setListRef)}>${l.length >= a && !p ? this.renderSort(g, v) : null}${j}</calcite-list>${E}</div>`;
       },
       error: () => ""
     });
   }
-  renderSort(e, t) {
-    const { sortBy: o, _messages: n } = this;
-    return q`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed @calciteDropdownSelect=${this.onSortMenuSelect} ${S(this.dropdownNode)}><calcite-action slot=trigger .label=${n.sortValues} text><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${o === "count" || !h(o)} data-value=count>${n.sortByCount}</calcite-dropdown-item><calcite-dropdown-item .selected=${o === "name"} data-value=name>${e || t ? n.sortAscending : n.sortAlphabetical}</calcite-dropdown-item><calcite-dropdown-item .selected=${o === "selected"} data-value=selected>${n.sortSelected}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
+  renderSort(e, s) {
+    const { sortBy: t, _messages: u } = this;
+    return S`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed @calciteDropdownSelect=${this.onSortMenuSelect} ${T(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: t, initialRender: o, view: n, fieldInfo: r, numberFormatOptions: m } = this, { fieldDomains: u, uniqueValueInfos: l, simpleType: s } = r, a = n && "timeZone" in n && n.timeZone || "system", p = u?.length ? I(e.value, u) : s === "date" ? Y(e.value, a) : s === "date-only" ? ee(e.value) : s === "time-only" ? te(e.value) : s === "timestamp-offset" ? ie(e.value, n) : typeof e.value == "number" ? K(e.value, m) : e.value, d = t ? s === "date-only" ? t.includes(u?.length ? e.value : O(e.value)) : s === "time-only" ? t.includes(u?.length ? e.value : x(e.value)) : t.includes(e.value) : !1;
-    return W(`list-item_${e.value}`, q`<calcite-list-item .label=${`${p}`} .value=${`${e.value}`} .selected=${d}>${h(e.count) && (l.length > 200 && !o || l.length <= 200) ? q`<div class="count" slot=actions-end>${`${e.count}`}</div>` : null}</calcite-list-item>`);
+    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 ? O(e.value, r) : l === "date" ? ee(e.value, d) : l === "date-only" ? te(e.value) : l === "time-only" ? ie(e.value) : l === "timestamp-offset" ? se(e.value, u) : typeof e.value == "number" ? Q(e.value, a) : e.label ?? e.value, n = s ? l === "date-only" ? s.includes(r?.length ? e.value : L(e.value)) : l === "time-only" ? s.includes(r?.length ? e.value : U(e.value)) : s.includes(e.value) : !1;
+    return P(`list-item_${e.value}`, S`<calcite-list-item .label=${`${o}`} .value=${`${e.value}`} .selected=${n}>${h(e.count) && (c.length > 200 && !t || c.length <= 200) ? S`<div class="count" slot=actions-end>${`${e.count}`}</div>` : null}</calcite-list-item>`);
   }
 }
-M("arcgis-unique-values-list", ne);
+_("arcgis-unique-values-list", oe);
 export {
-  ne as ArcgisUniqueValuesList
+  oe as ArcgisUniqueValuesList
 };

package/dist/components/arcgis-unique-values-list/utils/basic.d.ts

@@ -1,3 +1,15 @@
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type WFSLayer from "@arcgis/core/layers/WFSLayer.js";
+import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
+import type StreamLayer from "@arcgis/core/layers/StreamLayer.js";
+import type OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";
+import type KnowledgeGraphSublayer from "@arcgis/core/layers/knowledgeGraph/KnowledgeGraphSublayer.js";
+import type ImageryLayer from "@arcgis/core/layers/ImageryLayer.js";
+import type GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer.js";
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type CSVLayer from "@arcgis/core/layers/CSVLayer.js";
+import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
+import type CatalogFootprintLayer from "@arcgis/core/layers/catalog/CatalogFootprintLayer.js";
 
-export type SupportedLayer = __esri.CatalogFootprintLayer | __esri.CatalogLayer | __esri.CSVLayer | __esri.FeatureLayer | __esri.GeoJSONLayer | __esri.ImageryLayer | __esri.KnowledgeGraphSublayer | __esri.OrientedImageryLayer | __esri.StreamLayer | __esri.SubtypeGroupLayer | __esri.SubtypeSublayer | __esri.WFSLayer;
+/** @internal */
+export type SupportedLayer = CatalogFootprintLayer | CatalogLayer | CSVLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | KnowledgeGraphSublayer | OrientedImageryLayer | StreamLayer | SubtypeGroupLayer | SubtypeSublayer | WFSLayer;