@arcgis/common-components 5.2.0-next.66 → 5.2.0-next.67

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 $, 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 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";
+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, {
+  return e === "unknown" ? t = D(i, {
     ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : t = F(i, {
+  }) : t = D(i, {
     ...$("short-date-short-time"),
     timeZone: e
   }), t;
 }
-function oe(i) {
+function ae(i) {
   return i ? Y(i, $("short-date")) : "";
 }
-function ae(i) {
+function le(i) {
   let e;
-  return typeof i == "string" ? e = ee(i, $("short-date-long-time")) : e = F(i, {
+  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, {
+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, {
+  }) : 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, {
+  }) : e && "timeZone" in e && e.timeZone === "unknown" ? D(i, {
     ...$("short-date-short-time"),
     timeZone: "utc",
     timeZoneName: "shortOffset"
-  }) : F(i, {
+  }) : 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 E(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 T(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 T(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 (!E(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());
   }
+  async willUpdate(e) {
+    this.initialized && (e.has("layer") || e.has("visualizationSource") || e.has("fieldName") || e.has("uniqueValues")) && (await this.processProps(), 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 ? E(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, f) => m.count <= f.count ? 1 : -1);
-        }, M = (y) => {
+        }, 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 = m ? T(f.value, c) : f.label ?? f.value, V = m ? T(b.value, c) : b.label ?? b.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, m) => {
+        }, 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 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) => 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));
+          !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 ? 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>`);
+    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
 };