@arcgis/common-components 5.2.0-next.11 → 5.2.0-next.111

package/dist/components/arcgis-toolbar-stack/customElement.js

@@ -0,0 +1,174 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as k } from "../../chunks/runtime.js";
+import { ref as _ } from "lit/directives/ref.js";
+import { css as C, render as w, nothing as P, html as p } from "lit";
+import { LitElement as z, nothing as v } from "@arcgis/lumina";
+import { useDirection as L } from "@arcgis/lumina/controllers";
+import { s as x, a as T, b as $, c as A } from "../../chunks/toolbar.js";
+import { AsyncDirective as R } from "lit/async-directive.js";
+import { directive as M, PartType as D } from "lit/directive.js";
+import { getCommittedValue as u, clearPart as E, insertPart as b, setCommittedValue as f } from "lit/directive-helpers.js";
+const V = C`:host{--calcite-internal-animation-timing-slow: 0}.toolbar-stack{align-items:stretch;display:flex;max-inline-size:min(100cqw,100vw);max-block-size:min(100cqh,100vh);min-inline-size:0;min-block-size:0;gap:8px}.stack{display:flex}.stack[data-horizontal-position=right]{justify-content:right}.stack[data-horizontal-position=left]{justify-content:left}.line{display:flex;flex:none;gap:8px}:host([layout="vertical"]) .line{flex-direction:column;max-height:min(100cqh - var(--arcgis-internal-attribution-space-top) - 2 * var(--calcite-space-lg),100vh - 2 * var(--calcite-space-lg))}:host([layout="horizontal"]) .line{flex-direction:row}.line[data-alignment=top]{justify-content:flex-start}.line[data-alignment=bottom]{justify-content:flex-end}.line[data-alignment=left]{justify-content:left}.line[data-alignment=right]{justify-content:right}:host([layout="vertical"]) .toolbar-stack{flex-direction:row}:host([layout="horizontal"]) .toolbar-stack{flex-direction:column}:host([toolbar-kind="docked"][layout="horizontal"]) .toolbar-stack{min-inline-size:100%;calcite-action-bar{min-width:auto}}:host([toolbar-kind="docked"][layout="vertical"]) .toolbar-stack{min-block-size:100%;calcite-action-bar{min-height:auto}}:host([toolbar-kind="floating"]) .toolbar-shadow-wrapper{box-shadow:var(--calcite-shadow-md);background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));min-inline-size:0;min-block-size:0}`;
+class j {
+  constructor(t = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Set()) {
+    this.cachedParts = t, this.directives = e;
+  }
+  moveAllToCache() {
+    for (const t of this.directives)
+      t.moveToCache();
+  }
+}
+class S extends R {
+  #e;
+  #i;
+  #t;
+  constructor(t) {
+    if (super(t), t.type !== D.CHILD)
+      throw new Error("sharedCache() can only be used in child expressions");
+  }
+  /**
+   * @param _store Shared store backing this and other caching directives with the shared cache
+   * @param _key Uniquely identifies the element being rendered
+   * @param value The content to render
+   */
+  render(t, e, o) {
+    return [o];
+  }
+  update(t, [e, o, a]) {
+    this.#t !== e && (this.#t && this.#t.directives.delete(this), e.directives.add(this), this.#t = e), this.#e = t, this.#i = o;
+    const i = e.cachedParts.get(o), s = i ? u(i).pop() : void 0;
+    return s && (E(t), b(t, void 0, s), f(t, [s])), this.render(e, o, a);
+  }
+  /**
+   * During the update phase, a toolbar may need to be pulled from the cache in a situation
+   * where it was still on the page from the previous render.
+   *
+   * To work around this problem, during parent component render phase a pre-caching
+   * step moves all cacheable elements into the cache. This is the method called by
+   * that pre-caching step.
+   *
+   * @returns
+   */
+  moveToCache() {
+    const t = this.#e, e = this.#t;
+    if (!t || !e)
+      return;
+    const a = u(t).pop();
+    if (!a)
+      return;
+    let i = e.cachedParts.get(this.#i);
+    if (!i) {
+      const c = document.createDocumentFragment();
+      i = w(P, c), e.cachedParts.set(this.#i, i);
+    }
+    if (u(i).length > 0)
+      throw new Error("sharedCache() keys must be unique");
+    f(i, [a]), b(i, void 0, a);
+  }
+  disconnected() {
+    this.#t?.directives.delete(this);
+  }
+  reconnected() {
+    this.#t?.directives.add(this);
+  }
+}
+const q = M(S), O = 8;
+class K extends z {
+  constructor() {
+    super(), this.#e = new ResizeObserver((t) => this._updateMeasurement(t)), this.#i = new MutationObserver(() => this._syncToolbars()), this.#r = L(), this.#o = new j(), this._layout = "horizontal", this._availableLength = 0, this.scale = "m", this.tooltipAppearance = "native", this.relativePosition = "top-left", this.toolbarKind = "floating", this.listen("arcgisInternalLayoutUpdate", () => this.requestUpdate());
+  }
+  static {
+    this.properties = { _availableLength: 16, _toolbars: 16, effectiveRelativeDirection: 16, layout: 3, scale: 3, tooltipAppearance: 1, relativePosition: 1, toolbarKind: 3 };
+  }
+  static {
+    this.styles = [V, x, T, $, A];
+  }
+  #e;
+  #i;
+  #t;
+  #r;
+  #o;
+  #a;
+  get effectiveRelativeDirection() {
+    const [t, e] = this.relativePosition.split("-"), o = this.#r;
+    switch (e) {
+      case "left":
+      case "right":
+        return `${t}-${e}`;
+      case "end":
+        return `${t}-${o === "ltr" ? "right" : "left"}`;
+      case "start":
+        return `${t}-${o === "ltr" ? "left" : "right"}`;
+    }
+  }
+  get layout() {
+    return this._layout;
+  }
+  set layout(t) {
+    t !== this._layout && (this._layout = t, this._updateMeasurement());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._connectMeasurement(this.#a), this.#i.observe(this.el, { childList: !0 }), this._syncToolbars();
+  }
+  disconnectedCallback() {
+    this.#e.disconnect(), this.#i.disconnect(), super.disconnectedCallback();
+  }
+  _setRulerEl(t) {
+    this.#a !== t && (this.#a = t, this.isConnected && this._connectMeasurement(t));
+  }
+  _connectMeasurement(t) {
+    this.#e.disconnect(), t && (this.#e.observe(t), this._updateMeasurement());
+  }
+  _updateMeasurement(t) {
+    const e = t?.at(0)?.contentRect ?? this.#a?.getBoundingClientRect();
+    e && (this._availableLength = this.layout === "horizontal" ? e.width : e.height);
+  }
+  _syncToolbars() {
+    this.#t?.abort();
+    const t = Array.from(this.el.children).filter(W), e = new AbortController();
+    this.#t = e, Promise.all(t.map((o) => o.componentOnReady())).then(() => {
+      !this.isConnected || e.signal.aborted || (this._toolbars = t);
+    });
+  }
+  _arrangeToolbarLines(t, e) {
+    const o = t.map((r) => {
+      const d = r.allocate(e, this._availableLength);
+      return { toolbar: r, budget: d.reduce((g, y) => g + y.budget, 0) };
+    }), a = [];
+    let i = [], s = 0;
+    for (const r of o) {
+      const d = s + (i.length === 0 ? 0 : O) + r.budget;
+      i.length > 0 && d > this._availableLength ? (a.push(i), i = [r], s = r.budget) : (i.push(r), s = d);
+    }
+    i.length > 0 && a.push(i);
+    const [c, h] = e.relativePosition.split("-"), l = e.layout === "vertical";
+    return (l ? h === "right" : c === "bottom") && a.reverse(), (l ? c === "bottom" : h === "right") && a.forEach((r) => r.reverse()), a;
+  }
+  #s;
+  render() {
+    const t = this._toolbars;
+    if (!t?.length) {
+      this.#s?.length && (this.#o.moveAllToCache(), this.#s = []);
+      return;
+    }
+    const e = {
+      layout: this.layout,
+      relativePosition: this.effectiveRelativeDirection,
+      scale: this.scale,
+      tooltipAppearance: this.tooltipAppearance
+    }, o = this._arrangeToolbarLines(t, e);
+    U(this.#s, o) || (this.#o.moveAllToCache(), this.#s = o.map((h) => h.map(({ toolbar: l }) => l)));
+    const [a, i] = e.relativePosition.split("-"), s = this.layout === "vertical" ? a : i, c = this.#o;
+    return p`<div class="stack" data-horizontal-position=${i ?? v}><div class="ruler" ${_(this._setRulerEl)}></div><div class="toolbar-stack">${o.map((h) => p`<div class="line" data-alignment=${s ?? v}>${h.map(({ toolbar: l, budget: m }) => q(c, l, l.proxiedRender(e, m, this.toolbarKind)))}</div>`)}</div></div>`;
+  }
+}
+function W(n) {
+  return n.localName === "arcgis-toolbar";
+}
+function U(n, t) {
+  return n?.length === t.length && t.every((e, o) => e.length === n[o].length && e.every(({ toolbar: a }, i) => a === n[o][i]));
+}
+k("arcgis-toolbar-stack", K);
+export {
+  K as ArcgisToolbarStack
+};

package/dist/components/arcgis-toolbar-stack/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-toolbar-stack/index.js

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -1,71 +1,72 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as H } from "../../chunks/runtime.js";
-import { css as G, html as w } from "lit";
-import { keyed as J } from "lit/directives/keyed.js";
-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 { c as P } from "../../chunks/runtime.js";
+import { keyed as G } from "lit/directives/keyed.js";
+import { LitElement as J, createEvent as T } from "@arcgis/lumina";
+import { Task as K } from "@lit/task";
+import { css as Q, html as F } from "lit";
+import { createRef as X, ref as E } from "lit/directives/ref.js";
+import { log as S, composeMissingPropertyMessage as Z } from "@arcgis/toolkit/log";
+import { formatDate as D, convertDateFormatToIntlOptions as $, formatDateOnly as Y, formatTimeOnly as ee, formatTimestamp as z, 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 { 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";
+import * as se from "@arcgis/core/core/reactiveUtils.js";
+import { clone as I } from "@arcgis/core/core/lang.js";
+import { g as O, i as h } from "../../chunks/general.js";
+import { f as w, e as L, k as A, d as N } from "../../chunks/layer-utils.js";
+import { u as ne } from "../../chunks/useT9n.js";
 function k(i) {
   return (/* @__PURE__ */ new Date(`1970-01-01T${i}Z`)).getTime();
 }
-function R(i) {
+function B(i) {
   return (/* @__PURE__ */ new Date(`${i} 00:00:00`)).getTime();
 }
-function ne(i, e, s) {
+function oe(i, e, s) {
   let t;
-  return e === "unknown" ? t = F(i, {
-    ...b("short-date-short-time"),
+  return e === "unknown" ? t = D(i, {
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : t = F(i, {
-    ...b("short-date-short-time"),
+  }) : t = D(i, {
+    ...$("short-date-short-time"),
     timeZone: e
   }), t;
 }
-function oe(i) {
-  return i ? Y(i, b("short-date")) : "";
-}
 function ae(i) {
+  return i ? Y(i, $("short-date")) : "";
+}
+function le(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 = D(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"),
+function re(i, e) {
+  return typeof i == "string" ? e && "timeZone" in e && e.timeZone === "unknown" ? z(i, {
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : U(i, {
-    ...b("short-date-short-time"),
+  }) : z(i, {
+    ...$("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"),
+  }) : e && "timeZone" in e && e.timeZone === "unknown" ? D(i, {
+    ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : F(i, {
-    ...b("short-date-short-time"),
+  }) : D(i, {
+    ...$("short-date-short-time"),
     timeZone: e && "timeZone" in e && e.timeZone ? e.timeZone : "system"
   });
 }
-function A(i, e, s) {
-  if (!S(i) && !z(i) && !B(i) && !Z(i))
+function R(i, e, s) {
+  if (!w(i) && !L(i) && !A(i) && !N(i))
     return;
   let t;
-  return T(i, s).fields.forEach((p) => {
-    const a = p.name, r = "domain" in p ? p.domain : void 0;
-    if (!Z(i) && i.subtypeField === a) {
+  return O(i, s).fields.forEach((p) => {
+    const a = p.name, u = "domain" in p ? p.domain : void 0;
+    if (!N(i) && i.subtypeField === a) {
       let c;
-      B(i) || S(i) ? c = i.subtypes : c = i.parent.subtypes, c.forEach((l) => {
-        z(i) && 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) => {
+      A(i) || w(i) ? c = i.subtypes : c = i.parent.subtypes, c.forEach((l) => {
+        L(i) && 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) => {
@@ -78,9 +79,9 @@ function A(i, e, s) {
         }));
       });
     }
-    if (e.name === a && (S(i) || Z(i))) {
-      const c = S(i) ? i.typeIdField : void 0, l = S(i) ? i.types : void 0;
-      S(i) && c && l ? (c === a ? t = l.map(
+    if (e.name === a && (w(i) || N(i))) {
+      const c = w(i) ? i.typeIdField : void 0, l = w(i) ? i.types : void 0;
+      w(i) && c && l ? (c === a ? t = l.map(
         (d) => (
           // fake coded Values
           {
@@ -90,29 +91,29 @@ function A(i, e, s) {
         )
       ) : (t = t || [], l.forEach((d) => {
         if (!d.domains?.[a] || d.domains[a].type === "inherited") {
-          const o = r;
+          const o = u;
           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(O(n));
+            }), g || t.push(I(n));
           });
         } 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(O(o));
+          }), n || t.push(I(o));
         });
-      })), !t?.length && r?.codedValues && (t = O(r.codedValues))) : r?.codedValues && (t = r.codedValues);
+      })), !t?.length && u?.codedValues && (t = I(u.codedValues))) : u?.codedValues && (t = u.codedValues);
     }
   }), t;
 }
-function E(i, e) {
+function x(i, e) {
   const s = e;
   if (s) {
     let t = "";
-    for (let u = 0; u < s.length; u++) {
-      const p = s[u];
+    for (let r = 0; r < s.length; r++) {
+      const p = s[r];
       p.code == i && (t += (t.length ? " | " : "") + p.name);
     }
     return t.length || (t = `${i}`), t;
@@ -122,7 +123,7 @@ function E(i, e) {
 function C(i) {
   return ["small-integer", "big-integer", "integer", "single", "double", "long"].includes(i.type);
 }
-function j(i) {
+function H(i) {
   switch (i.type) {
     case "small-integer":
     case "big-integer":
@@ -143,33 +144,33 @@ function j(i) {
       return i.type;
   }
 }
-const re = G`: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 ue extends K {
+const ue = Q`: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 ce extends J {
   constructor() {
-    super(...arguments), this.dropdownNode = X(), this._messages = se({ blocking: !0 }), this._propWatcherTask = new Q(this, {
+    super(...arguments), this.dropdownNode = X(), this.initialized = !1, this._messages = ne({ blocking: !0 }), this._propWatcherTask = new K(this, {
       task: async ([e, s, t]) => {
-        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 r = h(e) && h(s) || h(t);
+        if (!h(t) && !h(e) && !h(s) ? S("error", this, Z("uniqueValues")) : h(t) || (h(e) || S("error", this, Z("layer")), h(s) || S("error", this, Z("fieldName"))), h(e) && h(s)) {
           const { visualizationSource: p } = this;
-          if (!T(e, p).fields?.filter((c) => c.name === s))
-            throw D("error", this, "Field could not be found."), new Error();
+          if (!O(e, p).fields?.filter((c) => c.name === s))
+            throw S("error", this, "Field could not be found."), new Error();
         }
-        if (!u)
+        if (!r)
           throw new Error();
-        await this.processProps();
+        await this.processProps(), this._propWatcherTask.autoRun = !1;
       },
       args: () => [
         this.layer,
         this.fieldName,
         this.uniqueValues
       ]
-    }), this.initialRender = !0, this.multiple = !1, this.partialUniqueValues = !1, this.showFilterLength = 10, this.arcgisChange = I(), this.arcgisSortByChange = I(), this.arcgisLoad = I();
+    }), this.initialRender = !0, this.multiple = !1, this.partialUniqueValues = !1, this.showFilterLength = 10, this.arcgisChange = T(), this.arcgisSortByChange = T(), this.arcgisLoad = T();
   }
   static {
     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 = re;
+    this.styles = ue;
   }
   async setFocus() {
     this.listNode?.setFocus();
@@ -184,48 +185,62 @@ class ue extends K {
   loaded() {
     this.layer && this.fieldInfo && (setTimeout(() => this.initialRender = !1, 800), this.listNode?.setFocus());
   }
+  willUpdate(e) {
+    this.initialized && (e.has("layer") || e.has("visualizationSource") || e.has("fieldName") || e.has("uniqueValues")) && this.processProps().then(() => this.requestUpdate()), e.has("maxHeight") && this.maxHeight && this.listNode?.setAttribute("style", `max-height: ${this.maxHeight || 400}px`);
+  }
   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: r } = this, a = (e ? O(e, r) : void 0)?.fields?.filter((u) => u.name === s)?.[0];
+    if (!a) {
+      S("error", this, `Field '${s}' not found in layer`), this.fieldInfo = {
+        layerField: a,
+        fieldDomains: void 0,
+        simpleType: void 0,
+        partialUniqueValues: !1,
+        uniqueValueInfos: []
+      };
+      return;
+    }
     if (h(this.uniqueValues))
       this.fieldInfo = {
         layerField: a,
-        fieldDomains: e && a ? A(e, a, u) : void 0,
-        simpleType: e && a ? j(a) : void 0,
+        fieldDomains: e && a ? R(e, a, r) : void 0,
+        simpleType: e && a ? H(a) : void 0,
         partialUniqueValues: this.partialUniqueValues ?? !1,
         uniqueValueInfos: this.uniqueValues
       }, this.arcgisLoad.emit();
     else if (e && a) {
       this.fieldInfo = {
         layerField: a,
-        fieldDomains: A(e, a, u),
-        simpleType: j(a),
+        fieldDomains: R(e, a, r),
+        simpleType: H(a),
         partialUniqueValues: !1
       };
-      const { fieldInfo: r } = this;
+      const { fieldInfo: u } = this;
       try {
         const c = await ie({
           layer: e,
           view: t,
           field: s,
           sqlWhere: "definitionExpression" in e ? e.definitionExpression ?? void 0 : void 0,
-          forBinning: !1
+          forBinning: r === "feature-reduction"
         }), l = C(a), d = c.uniqueValueInfos.filter((o) => h(o.value) ? a.type === "string" && !l || a.type === "guid" ? o.value !== "<Null>" && `${o.value}`.trim() !== "" : (C(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.sort((o, n) => o.count > n.count ? -1 : o.count < n.count ? 1 : 0), u.fieldDomains?.length && u.fieldDomains.forEach((o) => {
           d.find((n) => n.value === o.code) || d.push({
             value: o.code,
             count: 0
           });
-        }), r.uniqueValueInfos = d, r.partialUniqueValues = c.uniqueValueInfos.length === 2e3, this.arcgisLoad.emit();
+        }), u.uniqueValueInfos = d, u.partialUniqueValues = c.uniqueValueInfos.length === 2e3, this.initialized || this.arcgisLoad.emit(), this.setUpTimeZoneHandle(), this.initialized = !0;
       } catch (c) {
-        if (D("error", this, `uniqueValues() - ${c.message}`), this.hasFieldDomains(r)) {
+        if (S("error", this, `uniqueValues() - ${c.message}`), this.hasFieldDomains(u)) {
           const d = [];
-          r.fieldDomains.forEach((o) => {
+          u.fieldDomains.forEach((o) => {
             d.find((n) => n.value === o.code) || d.push({
               value: o.code,
               count: void 0
             });
           });
         }
+        this.initialized = !0;
       }
       setTimeout(() => {
         this.initialRender = !1, this.listNode?.setFocus();
@@ -240,6 +255,11 @@ class ue extends K {
     const t = e.currentTarget.selectedItems?.[0].getAttribute("data-value");
     this.sortBy = t || void 0, this.arcgisSortByChange.emit(t || void 0);
   }
+  setUpTimeZoneHandle() {
+    this.timeZoneHandle?.remove();
+    const { view: e, fieldInfo: s } = this;
+    s.simpleType && ["date", "timestamp-offset"].includes(s.simpleType) && (this.timeZoneHandle = se.watch(() => e?.timeZone, () => this.requestUpdate()));
+  }
   isSameLists(e, s) {
     if (!e && !s)
       return !0;
@@ -256,50 +276,50 @@ class ue extends K {
   render() {
     return this._propWatcherTask.render({
       complete: () => {
-        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;
+        const { fieldInfo: e, selectedValues: s, sortBy: t, multiple: r, initialRender: p, showFilterLength: a, _messages: u } = this, { fieldDomains: c, uniqueValueInfos: l, partialUniqueValues: d, layerField: o } = e, n = o?.type;
         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);
-        }, 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);
+          y.sort((m, f) => m.count <= f.count ? 1 : -1);
+        }, j = (y) => {
+          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 ? x(f.value, c) : f.label ?? f.value, V = m ? x(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;
+        }, M = (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;
           });
         };
-        M(l), !t || t === "count" ? _(l) : t === "selected" && P(l, s);
+        j(l), !t || t === "count" ? _(l) : t === "selected" && M(l, s);
         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);
-          !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));
+        let U;
+        return d && !p && (U = F`<div class="unique-values-content-list-msg">${u.errors.tooManyUniqueValues}</div>`), F`<div class="container"><calcite-list .label=${u.values} class="popover-unique-list" .filterEnabled=${l.length >= a} .selectionMode=${r ? "multiple" : "single"} .filterPlaceholder=${u.searchValues} @calciteListChange=${(y) => {
+          let m = y.currentTarget.selectedItems.map((f) => f.value);
+          !c && n === "date-only" ? m = m?.map((f) => B(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);
-        }} ${L(this.setListRef)}>${l.length >= a && !p ? this.renderSort(g, v) : null}${W}</calcite-list>${x}</div>`;
+        }} ${E(this.setListRef)}>${l.length >= a && !p ? this.renderSort(g, v) : null}${W}</calcite-list>${U}</div>`;
       },
       error: () => ""
     });
   }
   renderSort(e, s) {
-    const { sortBy: t, _messages: u } = this;
-    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>`;
+    const { sortBy: t, _messages: r } = this;
+    return F`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed @calciteDropdownSelect=${this.onSortMenuSelect} ${E(this.dropdownNode)}><calcite-action slot=trigger .label=${r.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>${r.sortByCount}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "name"} data-value=name>${e || s ? r.sortAscending : r.sortAlphabetical}</calcite-dropdown-item><calcite-dropdown-item .selected=${t === "selected"} data-value=selected>${r.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;
-    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>`);
+    const { selectedValues: s, initialRender: t, view: r, fieldInfo: p, numberFormatOptions: a } = this, { fieldDomains: u, uniqueValueInfos: c, simpleType: l } = p, d = r && "timeZone" in r && r.timeZone || "system", o = u?.length ? x(e.value, u) : l === "date" ? oe(e.value, d) : l === "date-only" ? ae(e.value) : l === "time-only" ? le(e.value) : l === "timestamp-offset" ? re(e.value, r) : typeof e.value == "number" ? te(e.value, a) : e.label ?? e.value, n = s ? l === "date-only" ? s.includes(u?.length ? e.value : B(e.value)) : l === "time-only" ? s.includes(u?.length ? e.value : k(e.value)) : s.includes(e.value) : !1;
+    return G(`list-item_${e.value}`, F`<calcite-list-item .label=${`${o}`} .value=${`${e.value}`} .selected=${n}>${h(e.count) && (c.length > 200 && !t || c.length <= 200) ? F`<div class="count" slot=actions-end>${`${e.count}`}</div>` : null}</calcite-list-item>`);
   }
 }
-H("arcgis-unique-values-list", ue);
+P("arcgis-unique-values-list", ce);
 export {
-  ue as ArcgisUniqueValuesList
+  ce as ArcgisUniqueValuesList
 };

package/dist/components/arcgis-value-picker/customElement.js

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
 import { LitElement as n, createEvent as i, nothing as l, safeClassMap as h } from "@arcgis/lumina";
-import { getSlotAssignedElements as r } from "@arcgis/toolkit/dom";
+import { getSlotAssignedElements as r } from "@arcgis/toolkit/dom/slots";
 import { css as c, html as s } from "lit";
 import { u as d } from "../../chunks/useT9n.js";
 import { usePropertyChange as m } from "@arcgis/lumina/controllers";
 const p = c`:host{display:inline-flex;max-inline-size:100%}:host([layout="horizontal"]) slot{min-inline-size:300px;min-block-size:48px}:host([layout="vertical"]) slot{min-inline-size:300px;min-block-size:144px}slot{display:flex}slot.empty{display:none}.container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.root{display:flex;flex-direction:row;align-items:stretch}calcite-action{width:var(--calcite-font-line-height-fixed-4xl);height:var(--calcite-font-line-height-fixed-4xl)}calcite-action-bar{--calcite-action-bar-items-space: var(--calcite-space-none);--calcite-spacing-sm: var(--calcite-space-none);background-color:var(--calcite-color-foreground-1)}.separator{border-inline-end:solid 1px var(--calcite-color-border-3);width:1px}`;
 class u extends n {
   constructor() {
-    super(), this.messages = d({ blocking: !0 }), this._isPlaying = !1, this.autoDestroyDisabled = !1, this.disabled = !1, this.hideNextButton = !1, this.hidePlayButton = !1, this.hidePreviousButton = !1, this.icon = "list-rectangle", this.label = "", this.layout = "horizontal", this.loop = !1, this.playRate = 1e3, this.arcgisPropertyChange = m()("layout", "loop", "playRate", "state"), this.arcgisAnimate = i(), this.arcgisNext = i(), this.arcgisPrevious = i(), this.arcgisPlay = i(), this.arcgisPause = i(), this.arcgisSlottedElementChange = i(), this.listen("arcgisPropertyChange", () => this.requestUpdate());
+    super(), this.messages = d({ blocking: !0 }), this._isPlaying = !1, this.autoDestroyDisabled = !1, this.disabled = !1, this.hideNextButton = !1, this.hidePlayButton = !1, this.hidePreviousButton = !1, this.icon = "list-rectangle", this.label = "", this.layout = "horizontal", this.loop = !1, this.playRate = 1e3, this.arcgisAnimate = i(), this.arcgisNext = i(), this.arcgisPause = i(), this.arcgisPlay = i(), this.arcgisPrevious = i(), this.arcgisPropertyChange = m()("layout", "loop", "playRate", "state"), this.arcgisSlottedElementChange = i(), this.listen("arcgisPropertyChange", () => this.requestUpdate());
   }
   static {
     this.properties = { _isPlaying: 16, _slottedElement: 16, autoDestroyDisabled: 5, disabled: 5, hideNextButton: 5, hidePlayButton: 5, hidePreviousButton: 5, icon: 1, label: 1, layout: 3, loop: 5, playRate: 9, state: 32 };
@@ -34,12 +34,12 @@ class u extends n {
   previous() {
     this.arcgisPrevious.emit(), this._slottedElement?.canPrevious && this._slottedElement.step("previous");
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._isPlaying && this.pause();
-  }
   willUpdate(t) {
     t.has("layout") && this._isElementWithLayout(this._slottedElement) && (this._slottedElement.layout = this.layout), t.has("disabled") && this._isElementWithDisabled(this._slottedElement) && (this._slottedElement.disabled = this.disabled);
   }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._isPlaying && this.pause();
+  }
   _handleSlotChange(t) {
     const [e] = r(t);
     this._slottedElement = e, this.arcgisSlottedElementChange.emit({ slottedElement: e }), !e && this._isPlaying && this.pause(), this._isElementWithLayout(e) && (e.layout = this.layout), this._isElementWithDisabled(e) && (e.disabled = this.disabled), this._isElementWithComponentOnReady(e) && e.componentOnReady().then(() => {