@arcgis/common-components 5.2.0-next.7 → 5.2.0-next.71

package/dist/components/arcgis-field-info/customElement.js

@@ -1,71 +1,72 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as G } from "../../chunks/runtime.js";
-import { css as U, html as c } from "lit";
-import { keyed as b } from "lit/directives/keyed.js";
-import { ref as O } from "lit/directives/ref.js";
-import { LitElement as W, createEvent as D, safeClassMap as V } from "@arcgis/lumina";
-import { Task as Q } from "@lit/task";
-import { log as q, composeMissingPropertyMessage as L } from "@arcgis/toolkit/log";
-import H from "@arcgis/core/config.js";
+import { c as H } from "../../chunks/runtime.js";
+import { keyed as S } from "lit/directives/keyed.js";
+import { ref as b } from "lit/directives/ref.js";
+import { LitElement as Q, createEvent as D, safeClassMap as I } from "@arcgis/lumina";
+import { Task as J } from "@lit/task";
+import { log as C, composeMissingPropertyMessage as L } from "@arcgis/toolkit/log";
+import { css as j, html as c } from "lit";
+import z from "@arcgis/core/config.js";
 import * as x from "@arcgis/core/core/reactiveUtils.js";
 import * as h from "@arcgis/core/intl.js";
-import * as E from "@arcgis/core/applications/PortalApp/layerUtils.js";
-import * as I from "@arcgis/core/core/lang.js";
-import J from "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import j from "@arcgis/core/smartMapping/statistics/uniqueValues.js";
-import { i as f } from "../../chunks/commonFunctions.js";
-import { i as y, a as S, b as $, c as R, d as T, e as A, f as v, g as F, h as Z, j as z, k as B, l as K, m as _, n as X, o as P, p as Y } from "../../chunks/layer-utils.js";
-import ee from "@arcgis/core/rest/support/Query.js";
-import { u as te } from "../../chunks/useT9n.js";
-function ie(a) {
+import * as A from "@arcgis/core/applications/PortalApp/layerUtils.js";
+import * as _ from "@arcgis/core/core/lang.js";
+import B from "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
+import K from "@arcgis/core/smartMapping/statistics/uniqueValues.js";
+import { i as f } from "../../chunks/general.js";
+import R from "@arcgis/core/layers/support/CodedValue.js";
+import { i as y, a as $, b as w, c as Z, d as V, e as M, f as v, g as F, h as U, j as X, k as Y, l as ee, m as te, n as O, o as ie, p as W, q as se, r as k, s as E } from "../../chunks/layer-utils.js";
+import ae from "@arcgis/core/rest/support/Query.js";
+import { u as re } from "../../chunks/useT9n.js";
+function ne(a) {
   return a.associatedLayer?.url;
 }
-const se = {
+const oe = {
   dateStyle: "short",
   timeStyle: "short"
-}, ae = {
+}, le = {
   timeStyle: "medium"
 };
-function re(a) {
+function ue(a) {
   const { layer: e, fieldName: t } = a;
   let i;
-  const n = E.supportsFieldConfiguration(e);
+  const r = A.supportsFieldConfiguration(e);
   let s;
   "popupTemplate" in e && (s = e.popupTemplate);
-  const r = s ? s.fieldInfos : [];
-  return M(a)?.filter((u) => u.name === t).forEach((u) => {
-    const o = !n && r ? r.filter((g) => g.fieldName === u.name) : void 0, l = n ? e.getFieldAlias(t) : o?.length ? o[0].label : u.alias;
-    /^raster.(item|service)pixelvalue/iu.test(t) && (u.type = "double");
-    const d = {
-      layerField: u,
-      label: l || u.name
+  const n = s ? s.fieldInfos : [];
+  return G(a)?.filter((d) => d.name === t).forEach((d) => {
+    const l = !r && n ? n.filter((g) => g.fieldName === d.name) : void 0, o = r ? e.getFieldAlias(t) : l?.length ? l[0].label : d.alias;
+    /^raster.(item|service)pixelvalue/iu.test(t) && (d.type = "double");
+    const u = {
+      layerField: d,
+      label: o || d.name
     };
-    d.codedValues = ue(t, a), le(d), d.simpleFieldType && (i = d);
+    u.codedValues = fe(t, a), me(u), u.simpleFieldType && (i = u);
   }), i;
 }
-function M(a) {
+function G(a) {
   const { layer: e } = a;
-  return y(e) || S(e) || T(e) && e.rasterFields.length ? e.rasterFields : e.fields;
+  return y(e) || $(e) || V(e) && e.rasterFields.length ? e.rasterFields : e.fields;
 }
-async function k(a) {
+async function P(a) {
   a.statisticsStatus = "in-progress";
   const { layer: e, view: t } = a;
-  if (y(e) || S(e) || F(e) || $(e))
+  if (y(e) || $(e) || F(e) || w(e))
     throw new Error("could not get feature count");
   try {
-    return await ce(e, t);
+    return await ge(e, t);
   } catch {
     return;
   }
 }
-async function ne(a) {
-  const { layer: e, view: t, fieldName: i, fieldInfo: n } = a;
-  if (y(e) || S(e) || $(e))
+async function ce(a) {
+  const { layer: e, view: t, fieldName: i, fieldInfo: r } = a;
+  if (y(e) || $(e) || w(e))
     throw new Error("could not get statistics for ImageryTileLayer/WCSLayer/VoxelLayer");
-  if (!n || n.layerField.type === "oid" || n.layerField.type === "guid" || n.layerField.type === "global-id")
-    return { totalCount: await k(a), nullcount: 0 };
+  if (!r || r.layerField.type === "oid" || r.layerField.type === "guid" || r.layerField.type === "global-id")
+    return { totalCount: await P(a), nullcount: 0 };
   try {
-    const s = await J({
+    const s = await B({
       layer: e,
       view: t,
       field: i,
@@ -73,24 +74,24 @@ async function ne(a) {
     });
     if (!f(s.count))
       throw new Error("could not get statistics");
-    const r = "sourceJSON" in e && e.sourceJSON.maxRecordCount === s.count;
-    if (f(s.nullcount) && !r)
+    const n = "sourceJSON" in e && e.sourceJSON.maxRecordCount === s.count;
+    if (f(s.nullcount) && !n)
       return { ...s, totalCount: s.count + s.nullcount };
     {
-      const m = await k(a);
+      const m = await P(a);
       return { ...s, totalCount: m };
     }
   } catch {
     throw new Error("could not get statistics");
   }
 }
-async function oe(a) {
+async function de(a) {
   const { layer: e, view: t, fieldName: i } = a;
-  if (y(e) || S(e) || $(e))
+  if (y(e) || $(e) || w(e))
     throw new Error("could not get unique values for ImageryLayer/ImageryTileLayer/WCSLayer/VoxelLayer");
-  R(e) && (e.outFields = ["*"]);
+  Z(e) && (e.outFields = ["*"]);
   try {
-    return await j({
+    return await K({
       layer: e,
       view: t,
       field: i
@@ -99,7 +100,7 @@ async function oe(a) {
     throw new Error("could not get unique values");
   }
 }
-function le(a) {
+function me(a) {
   switch (a.layerField.type) {
     case "string":
       a.simpleFieldType = "string";
@@ -131,96 +132,99 @@ function le(a) {
     case "long":
       a.simpleFieldType = "number";
       break;
+    default:
+      a.simpleFieldType = "string";
   }
 }
-function ue(a, e) {
+function fe(a, e) {
   const { layer: t } = e;
-  if (A(t) && t.subtypeField === a) {
-    const o = t.parent?.subtypes?.find((l) => l.code === t.subtypeCode);
-    if (o)
-      return [{ code: o.code, name: o.name }];
+  if (M(t) && t.subtypeField === a) {
+    const l = t.parent?.subtypes?.find((o) => o.code === t.subtypeCode);
+    if (l)
+      return [new R({ code: l.code, name: l.name })];
   }
-  if (!v(t) && !T(t))
+  if (!v(t) && !V(t))
     return;
-  const i = v(t) ? t.typeIdField : void 0, n = v(t) ? t.types : void 0;
+  const i = v(t) ? t.typeIdField : void 0, r = v(t) ? t.types : void 0;
   let s;
-  const m = M(e)?.find((o) => o.name === a), u = m?.domain;
-  return v(t) && i && n ? (i === a ? s = n.map(
-    (o) => (
+  const m = G(e)?.find((l) => l.name === a), d = m?.domain;
+  return v(t) && i && r ? (i === a ? s = r.map(
+    (l) => (
       // fake coded values
-      {
-        code: o.id,
-        name: o.name
-      }
+      new R({
+        code: l.id,
+        name: l.name
+      })
     )
-  ) : (s = [], n.forEach((o) => {
-    if (!o.domains[a] || o.domains[a].type === "inherited") {
-      const l = u;
-      l?.codedValues && l.codedValues.forEach((d) => {
+  ) : (s = [], r.forEach((l) => {
+    if (!l.domains[a] || l.domains[a].type === "inherited") {
+      const o = d;
+      o?.codedValues && o.codedValues.forEach((u) => {
         let g = !1;
         s.forEach((p) => {
-          p.code === d.code && (g = !0, `, ${p.name},`.includes(`, ${d.name},`) || (p.name += `, ${d.name}`));
-        }), g || s.push(I.clone(d));
+          p.code === u.code && (g = !0, `, ${p.name},`.includes(`, ${u.name},`) || (p.name += `, ${u.name}`));
+        }), g || s.push(_.clone(u));
       });
-    } else o.domains[a].codedValues && o.domains[a].codedValues.forEach((l) => {
-      let d = !1;
+    } else l.domains[a].codedValues && l.domains[a].codedValues.forEach((o) => {
+      let u = !1;
       s.forEach((g) => {
-        g.code === l.code && (d = !0, `, ${g.name},`.includes(`, ${l.name},`) || (g.name += `, ${l.name}`));
-      }), d || s.push(I.clone(l));
+        g.code === o.code && (u = !0, `, ${g.name},`.includes(`, ${o.name},`) || (g.name += `, ${o.name}`));
+      }), u || s.push(_.clone(o));
     });
-  })), !s.length && u?.codedValues && (s = I.clone(u.codedValues))) : u?.codedValues && (s = m.domain.codedValues), s?.length ? s : void 0;
+  })), !s.length && d?.codedValues && (s = _.clone(d.codedValues))) : d?.codedValues && (s = m?.domain?.codedValues), s?.length ? s : void 0;
 }
-async function de(a) {
+async function pe(a) {
   const { view: e, layer: t } = a;
-  if (T(t) || y(t) || S(t))
+  if (V(t) || y(t) || $(t))
     throw new Error("could not get feature");
-  if (v(t) && !t.url || Z(t)) {
+  if (v(t) && !t.url || U(t)) {
     const i = t.createQuery();
     i.start = 0, i.num = 5, i.outFields = ["*"];
-    const n = await t.queryFeatures(i);
-    if (n.features.length)
-      return n;
+    const r = await t.queryFeatures(i);
+    if (r.features.length)
+      return r;
     throw new Error("could not get feature");
   } else {
     if (!e)
-      return await C(a);
+      return await q(a);
     let i;
-    if (A(t) || z(t)) {
+    if (M(t) || X(t)) {
       let s = t.parent;
-      for (; B(s) || K(s); )
+      for (; Y(s) || ee(s); )
         s = s.parent;
-      i = await e.whenLayerView(s);
+      te(s) && (i = await e.whenLayerView(s));
     } else
       i = await e.whenLayerView(t);
-    if (i.availableFields.length === t.fields.length || (F(t) || _(t)) && i.availableFields.length > 0) {
+    const r = i.availableFields.length === t.fields.length;
+    if (i && (r || (F(t) || O(t)) && i.availableFields.length > 0)) {
       const s = i.createQuery();
       s.start = 0, s.num = 5, s.outFields = ["*"];
-      const r = await i.queryFeatures(s);
-      return r.features?.length ? r : await C(a);
+      const n = await i.queryFeatures(s);
+      return n.features?.length ? n : await q(a);
     } else
-      return await C(a);
+      return await q(a);
   }
 }
-async function C(a) {
+async function q(a) {
   const { layer: e } = a;
-  if (T(e) || y(e) || F(e) || _(e))
+  if (V(e) || y(e) || F(e) || O(e))
     throw new Error("cannot get feature from service");
-  const t = new ee({
+  const t = new ae({
     where: "1=1",
     outFields: ["*"],
     returnGeometry: !1
   });
   return "sourceJSON" in e && e.sourceJSON?.advancedQueryCapabilities?.supportsPagination && (t.num = 1), await e.queryFeatures(t);
 }
-async function ce(a, e) {
-  if (R(a))
-    return await me(a);
-  if (v(a) || X(a) || P(a) || Z(a) || Y(a))
+async function ge(a, e) {
+  if (Z(a))
+    return await he(a);
+  if (v(a) || ie(a) || W(a) || U(a) || se(a))
     return await a.queryFeatureCount();
-  if (e && (F(a) || _(a)))
-    return await fe(a, e);
+  if (e && (F(a) || O(a)))
+    return await ve(a, e);
 }
-async function me(a) {
+async function he(a) {
   const e = a.createQuery();
   e.outFields = ["*"];
   const t = await a.queryFeatures(e);
@@ -228,16 +232,16 @@ async function me(a) {
     return t.features.length;
   throw new Error("could not get feature count");
 }
-async function fe(a, e) {
+async function ve(a, e) {
   return await (await e.whenLayerView(a)).queryFeatureCount();
 }
-const pe = U`:host{height:100%}.container{padding:var(--calcite-space-xs);background-color:var(--calcite-color-foreground-1)}.title{font-weight:700;padding:5px 0}.missing,.data{color:#a9a9a9}.count{white-space:nowrap}.section{padding:var(--calcite-space-xs) 0}.statistics-row{border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding:var(--calcite-space-xs) 0;display:flex;justify-content:space-between}.statistics-row-top-values{border-top:var(--calcite-border-width-sm) solid var(--calctie-color-border-2);padding:20px 0 var(--calcite-space-xs) 0;display:flex;justify-content:space-between}`;
-class ge extends W {
+const ye = j`:host{height:100%}.container{padding:var(--calcite-space-xs);background-color:var(--calcite-color-surface-2)}.title{font-weight:700;padding:5px 0}.missing,.data{color:#a9a9a9}.count{white-space:nowrap}.section{padding:var(--calcite-space-xs) 0}.statistics-row{border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding:var(--calcite-space-xs) 0;display:flex;justify-content:space-between}.statistics-row-top-values{border-top:var(--calcite-border-width-sm) solid var(--calctie-color-border-2);padding:20px 0 var(--calcite-space-xs) 0;display:flex;justify-content:space-between}`;
+class Fe extends Q {
   constructor() {
-    super(...arguments), this._messages = te({ blocking: !0 }), this._propWatcherTask = new Q(this, {
+    super(...arguments), this._messages = re({ blocking: !0 }), this.initialized = !1, this._propWatcherTask = new J(this, {
       task: async ([e, t]) => {
         const i = f(e) && f(t);
-        if (f(e) || q("error", this, L("layer")), f(t) || q("error", this, L("fieldName")), !i)
+        if (f(e) || C("error", this, L("layer")), f(t) || C("error", this, L("fieldName")), !i)
           throw new Error();
         await this.processProps(), this._propWatcherTask.autoRun = !1;
       },
@@ -248,85 +252,98 @@ class ge extends W {
     this.properties = { oneFeatureResponseStatus: 16, oneFeatureResponse: 16, statisticsStatus: 16, statistics: 16, uniqueValuesStatus: 16, uniqueValues: 16, view: 0, layer: 0, fieldName: 1, hideAlias: 5, hideNumericFormat: 5, hideStatistics: 5 };
   }
   static {
-    this.styles = pe;
+    this.styles = ye;
   }
   async refresh() {
     await this.processProps(), this.requestUpdate();
   }
+  async willUpdate(e) {
+    this.initialized && (e.has("fieldName") || e.has("layer")) && await this.processProps();
+  }
   disconnectedCallback() {
     super.disconnectedCallback(), this.timeZoneHandle?.remove();
   }
   async processProps() {
-    const { view: e, layer: t, fieldName: i, hideStatistics: n } = this;
+    const { view: e, layer: t, fieldName: i, hideStatistics: r } = this;
     if (!t || !i)
       return;
     let s;
     if (t.declaredClass === "esri.layers.support.Sublayer") {
-      const r = t;
-      e && await x.whenOnce(() => !e.updating), s = await r.createFeatureLayer(), await s?.load();
+      const n = t;
+      e && await x.whenOnce(() => !e.updating), s = await n.createFeatureLayer(), await s?.load();
     }
-    this.props = {
+    if (this.oneFeatureResponseStatus = "missing", this.oneFeatureResponse = void 0, this.statisticsStatus = "missing", this.statistics = void 0, this.uniqueValuesStatus = "missing", this.uniqueValues = void 0, this.props = {
       view: e,
       layer: s ?? t,
       fieldName: i,
-      hideStatistics: n
-    }, this.props.fieldInfo = re(this.props), P(t) && H.request.interceptors?.push({
-      urls: `${ie(t)}/${t.layerId}`,
-      before(r) {
-        r.requestOptions.authMode = "no-prompt";
+      hideStatistics: r
+    }, this.props.fieldInfo = ue(this.props), !this.props.fieldInfo) {
+      C("error", this, `Field ${i} does not exist in layer.`);
+      return;
+    }
+    W(t) && z.request.interceptors?.push({
+      urls: `${ne(t)}/${t.layerId}`,
+      before(n) {
+        n.requestOptions.authMode = "no-prompt";
       }
-    }), this.oneFeatureResponseStatus = "in-progress";
+    }), this.processPropsPart2();
+  }
+  async processPropsPart2() {
+    const { layer: e, hideStatistics: t } = this;
+    if (await this.requestOneFeature(), F(e) || k(e) || E(e)) {
+      this.uniqueValuesStatus = "failed", this.statisticsStatus = "failed";
+      return;
+    }
+    t ? this.uniqueValuesStatus = "failed" : await this.requestUniqueValues(), t ? this.statisticsStatus = "failed" : await this.requestStatistics(), this.setUpTimeZoneHandle(), this.initialized = !0;
+  }
+  async requestOneFeature() {
+    this.oneFeatureResponseStatus = "in-progress";
     try {
-      const r = await de(this.props);
-      this.oneFeatureResponse = r, this.oneFeatureResponseStatus = "success";
+      const e = await pe(this.props);
+      this.oneFeatureResponse = e, this.oneFeatureResponseStatus = "success";
     } catch {
       this.oneFeatureResponseStatus = "failed";
     }
-    if (F(t)) {
-      this.uniqueValuesStatus = "failed", this.statisticsStatus = "failed";
-      return;
-    }
-    if (n)
-      this.uniqueValuesStatus = "failed";
-    else {
-      this.uniqueValuesStatus = "in-progress";
+  }
+  async requestUniqueValues() {
+    return this.uniqueValuesStatus = "in-progress", await new Promise(async (e) => {
       try {
-        const r = await oe(this.props);
-        this.uniqueValues = r, r?.uniqueValueInfos?.length ? this.uniqueValuesStatus = "success" : this.uniqueValuesStatus = "failed";
+        const t = await de(this.props);
+        this.uniqueValues = t, t?.uniqueValueInfos?.length ? this.uniqueValuesStatus = "success" : this.uniqueValuesStatus = "failed";
       } catch {
         this.uniqueValuesStatus = "failed";
+      } finally {
+        e();
       }
-    }
-    if (n)
-      this.statisticsStatus = "failed";
-    else {
-      this.statisticsStatus = "in-progress";
+    });
+  }
+  async requestStatistics() {
+    return await new Promise(async (e) => {
       try {
-        const r = await ne(this.props);
-        if (!f(r.totalCount) && f(r.count) && this.uniqueValuesStatus === "success") {
-          const m = this.uniqueValues?.uniqueValueInfos ?? [];
-          for (let u = 0; u < m.length; u++) {
-            const o = m[u];
-            if (o.value === null) {
-              r.totalCount = o.count + r.count;
+        const t = await ce(this.props);
+        if (!f(t.totalCount) && f(t.count) && this.uniqueValuesStatus === "success") {
+          const i = this.uniqueValues?.uniqueValueInfos ?? [];
+          for (let r = 0; r < i.length; r++) {
+            const s = i[r];
+            if (s.value === null) {
+              t.totalCount = s.count + t.count;
               break;
             }
           }
-          r.totalCount ??= r.count;
+          t.totalCount ??= t.count;
         }
-        this.statistics = r, this.statisticsStatus = "success";
+        this.statistics = t, this.statisticsStatus = "success";
       } catch {
         this.statisticsStatus = "failed";
+      } finally {
+        e();
       }
-    }
-    this.setUpTimeZoneHandle();
+    });
   }
   setUpTimeZoneHandle() {
     this.timeZoneHandle?.remove();
     const { props: e } = this, { view: t, fieldInfo: i } = e;
-    ["date", "timestamp-offset"].includes(this._getStatisticsType(i)) && (this.timeZoneHandle = x.watch(() => t?.timeZone, () => {
-      this.requestUpdate();
-    }));
+    ["date", "timestamp-offset"].includes(this._getStatisticsType(i)) && (this.timeZoneHandle = x.watch(() => t?.timeZone, () => this.requestUpdate()));
   }
   _getFieldTypeLabel(e) {
     const { _messages: t } = this, i = t.fieldTypes;
@@ -427,8 +444,8 @@ class ge extends W {
     }
   }
   _getDisplayString(e, t) {
-    const { props: i } = this, { fieldInfo: n } = i;
-    switch (n.simpleFieldType) {
+    const { props: i } = this, { fieldInfo: r } = i;
+    switch (r.simpleFieldType) {
       case "date":
         return this._getDateString(e, t);
       case "date-only":
@@ -487,8 +504,13 @@ class ge extends W {
   _printNumValue(e, t) {
     return f(e) ? this._getNumberString(e, t) : "--";
   }
-  _setCompleteRef() {
-    this.arcgisComplete.emit(), this.arcgisFieldInfoComplete.emit();
+  _setCompleteRef(e) {
+    if (this.completeRefHandler && clearInterval(this.completeRefHandler), e) {
+      let t = 0;
+      this.completeRefHandler = setInterval(() => {
+        (t > 130 || this.isFinished(this.uniqueValuesStatus) && this.isFinished(this.statisticsStatus)) && (clearInterval(this.completeRefHandler), this.arcgisComplete.emit(), this.arcgisFieldInfoComplete.emit()), t++;
+      }, 1e3);
+    }
   }
   getCurrentFieldFormat() {
     const { props: e } = this, { layer: t, fieldName: i } = e;
@@ -509,17 +531,17 @@ class ge extends W {
     } : void 0;
     if (i)
       return i;
-    const n = this.getPopupTemplateFieldInfo();
+    const r = this.getPopupTemplateFieldInfo();
     return h.convertNumberFormatToIntlOptions({
-      digitSeparator: n?.format?.digitSeparator ?? !0,
-      places: n?.format?.places ?? 2
+      digitSeparator: r?.format?.digitSeparator ?? !0,
+      places: r?.format?.places ?? 2
     });
   }
   getIntlDateTimeFormattingOptions(e, t) {
     const i = this.getCurrentFieldFormat();
     if (!t?.useFieldFormatting)
-      return i ? t?.isTimeOnly ? ae : se : h.convertDateFormatToIntlOptions(e);
-    const n = i ? {
+      return i ? t?.isTimeOnly ? le : oe : h.convertDateFormatToIntlOptions(e);
+    const r = i ? {
       dateStyle: t?.isTimeOnly ? void 0 : i.dateStyle ?? void 0,
       // year/month is overridden if dateStyle is set
       year: i.dateStyle ? void 0 : i.year ?? void 0,
@@ -527,21 +549,25 @@ class ge extends W {
       timeStyle: i.timeStyle ?? void 0,
       hourCycle: i.hour12 === "never" ? "h23" : "h11"
     } : void 0;
-    if (n)
-      return n;
+    if (r)
+      return r;
     const s = this.getPopupTemplateFieldInfo();
     return h.convertDateFormatToIntlOptions(s?.format?.dateFormat ?? e);
   }
   originalLayerSupportsFieldConfigs() {
     const { layer: e } = this;
-    return E.supportsFieldConfiguration(e);
+    return A.supportsFieldConfiguration(e);
   }
   getPopupTemplateFieldInfo() {
     const { props: e } = this, { layer: t, fieldName: i } = e;
     return ("popupTemplate" in t ? t.popupTemplate : void 0)?.fieldInfos?.find((s) => s.fieldName === i);
   }
+  isFinished(e) {
+    return ["success", "failed"].includes(e);
+  }
   render() {
     return this._propWatcherTask.render({
+      pending: () => c`<calcite-scrim loading></calcite-scrim>`,
       complete: () => {
         const { props: e } = this, { fieldInfo: t } = e;
         return t ? c`<div class="container">${this.renderFieldType()}${this.renderFieldAlias()}${this.renderFieldDescription()}${this.renderFieldValueType()}${this.renderFieldSampleValue()}${this.renderFieldNumericFormat()}${this.renderFieldStatistics()}</div>` : "";
@@ -550,19 +576,19 @@ class ge extends W {
     });
   }
   renderFieldType() {
-    const { _messages: e, props: t } = this, { fieldInfo: i } = t, n = this._getFieldTypeLabel(i.layerField.type);
-    return c`<div class="section"><div class="title">${e.fieldType}</div><div>${n}</div></div>`;
+    const { _messages: e, props: t } = this, { fieldInfo: i } = t, r = this._getFieldTypeLabel(i.layerField.type);
+    return c`<div class="section"><div class="title">${e.fieldType}</div><div>${r}</div></div>`;
   }
   renderFieldAlias() {
-    const { _messages: e, props: t, hideAlias: i } = this, { fieldInfo: n } = t;
-    return i ? "" : c`<div class="section"><div class="title">${e.fieldAlias}</div><div>${n.label}</div></div>`;
+    const { _messages: e, props: t, hideAlias: i } = this, { fieldInfo: r } = t;
+    return i ? "" : c`<div class="section"><div class="title">${e.fieldAlias}</div><div>${r.label}</div></div>`;
   }
   renderFieldDescription() {
     const { _messages: e, props: t } = this, { layer: i } = t;
     if (!v(i))
       return "";
-    const { fieldInfo: n } = t, s = n.layerField.description;
-    return c`<div class="section"><div class="title">${e.fieldDescription}</div><div class=${V({
+    const { fieldInfo: r } = t, s = r.layerField.description;
+    return c`<div class="section"><div class="title">${e.fieldDescription}</div><div class=${I({
       missing: !s
     })}>${s || e.fieldDescriptionNotSet}</div></div>`;
   }
@@ -570,49 +596,53 @@ class ge extends W {
     const { _messages: e, props: t } = this, { layer: i } = t;
     if (!v(i))
       return "";
-    const { fieldInfo: n } = t, s = this._getFieldValueTypeCamelCase(n);
-    return c`<div class="section"><div class="title">${e.fieldValueType}</div><div class=${V(s ? "" : "missing")}>${s ? e.fieldValueTypes[s] : e.fieldValueTypeNotSet}</div></div>`;
+    const { fieldInfo: r } = t, s = this._getFieldValueTypeCamelCase(r);
+    return c`<div class="section"><div class="title">${e.fieldValueType}</div><div class=${I(s ? "" : "missing")}>${s ? e.fieldValueTypes[s] : e.fieldValueTypeNotSet}</div></div>`;
   }
   renderFieldSampleValue() {
-    const { oneFeatureResponse: e, oneFeatureResponseStatus: t, statisticsStatus: i, statistics: n, uniqueValuesStatus: s, uniqueValues: r, _messages: m, props: u } = this, { layer: o, fieldName: l, fieldInfo: d } = u, { statistics: g } = m;
+    const { oneFeatureResponse: e, oneFeatureResponseStatus: t, statisticsStatus: i, statistics: r, uniqueValuesStatus: s, uniqueValues: n, _messages: m, props: d } = this, { layer: l, fieldName: o, fieldInfo: u } = d, { statistics: g } = m;
     let p;
-    if (y(o) || $(o) || !F(o) && ["string", "oid", "guid"].includes(this._getStatisticsType(d)) && s !== "failed")
+    if (y(l) || w(l) || !F(l) && ["string", "oid", "guid"].includes(this._getStatisticsType(u)) && s !== "failed")
       return "";
-    t === "success" ? e.features.forEach((w) => {
-      (p === void 0 || p === null && w.attributes[l] !== null) && (p = w.attributes[l]);
-    }) : i === "success" ? p = n?.min ?? void 0 : s === "success" && (p = r?.uniqueValueInfos?.[0]?.value ?? r?.uniqueValueInfos?.[1]?.value ?? void 0);
-    const N = d.codedValues;
-    return f(p) && (N ? p = N.find((w) => p === w.code)?.name || p : p = this._getDisplayString(p, { useFieldFormatting: !0 })), c`<div class="section"><div class="title">${m.fieldSampleValue}</div><div class=${V(t === "failed" && i === "failed" && s === "failed" || !f(p) ? "missing" : "")}>${t === "success" || i === "success" || s === "success" ? p?.toString() ?? g.allNulls : t === "failed" && i === "failed" && s === "failed" ? m.fieldSampleNotAvailable : m.fieldSampleRetrieving}</div></div>`;
+    t === "success" ? e.features.forEach((T) => {
+      (p === void 0 || p === null && T.attributes[o] !== null) && (p = T.attributes[o]);
+    }) : i === "success" ? p = r?.min ?? void 0 : s === "success" && (p = n?.uniqueValueInfos?.[0]?.value ?? n?.uniqueValueInfos?.[1]?.value ?? void 0);
+    const N = u.codedValues;
+    return f(p) && (N ? p = N.find((T) => p === T.code)?.name || p : p = this._getDisplayString(p, { useFieldFormatting: !0 })), c`<div class="section"><div class="title">${m.fieldSampleValue}</div><div class=${I(t === "failed" && i === "failed" && s === "failed" || !f(p) ? "missing" : "")}>${t === "success" || i === "success" || s === "success" ? p?.toString() ?? g.allNulls : t === "failed" && i === "failed" && s === "failed" ? m.fieldSampleNotAvailable : m.fieldSampleRetrieving}</div></div>`;
   }
   renderFieldNumericFormat() {
-    const { _messages: e, props: t, hideNumericFormat: i } = this, { fieldName: n, fieldInfo: s, layer: r } = t;
+    const { _messages: e, props: t, hideNumericFormat: i } = this, { fieldName: r, fieldInfo: s, layer: n } = t;
     if (i || !["double", "long", "single"].includes(s.layerField.type))
       return "";
-    const m = this.originalLayerSupportsFieldConfigs() ? r.getFieldConfiguration(n) : void 0;
+    const m = this.originalLayerSupportsFieldConfigs() ? n.getFieldConfiguration(r) : void 0;
     if (m?.fieldFormat) {
-      const { minimumFractionDigits: o, maximumFractionDigits: l } = m.fieldFormat;
-      return c`<div class="section"><div class="title">${e.fieldDecimalPlaces}</div><div>${e.fieldMinimumFractionDigits.replace("${number}", o.toString())}</div><div>${e.fieldMaximumFractionDigits.replace("${number}", l.toString())}</div></div>`;
+      const { minimumFractionDigits: l, maximumFractionDigits: o } = m.fieldFormat;
+      return c`<div class="section"><div class="title">${e.fieldDecimalPlaces}</div><div>${e.fieldMinimumFractionDigits.replace("${number}", l.toString())}</div><div>${e.fieldMaximumFractionDigits.replace("${number}", o.toString())}</div></div>`;
     }
-    const u = "popupTemplate" in r ? r.popupTemplate : void 0;
-    if (u?.fieldInfos) {
-      const o = u.fieldInfos?.filter((l) => l.fieldName === n);
-      if (o?.length) {
-        const l = o[0];
-        if (f(l?.format?.places)) {
-          const d = l.format.places;
-          return c`<div class="section"><div class="title">${e.fieldDecimalPlaces}</div><div>${e.fieldNumDecimalPlaces.replace("${number}", d.toString())}</div></div>`;
+    const d = "popupTemplate" in n ? n.popupTemplate : void 0;
+    if (d?.fieldInfos) {
+      const l = d.fieldInfos?.filter((o) => o.fieldName === r);
+      if (l?.length) {
+        const o = l[0];
+        if (f(o?.format?.places)) {
+          const u = o.format.places;
+          return c`<div class="section"><div class="title">${e.fieldDecimalPlaces}</div><div>${e.fieldNumDecimalPlaces.replace("${number}", u.toString())}</div></div>`;
         }
       }
     }
     return c`<div class="section"><div class="title">${e.fieldDecimalPlaces}</div><div class="missing">${e.fieldDecimalPlacesNotAvailable}</div></div>`;
   }
   renderFieldStatistics() {
-    const { statisticsStatus: e, uniqueValuesStatus: t, hideStatistics: i, _messages: n, props: s } = this, { layer: r, fieldInfo: m } = s;
-    return i ? (this.arcgisComplete.emit(), this.arcgisFieldInfoComplete.emit(), "") : ["stream", "imagery-tile", "voxel"].includes(r.type) || ["long"].includes(m.layerField.type) ? (this.arcgisComplete.emit(), this.arcgisFieldInfoComplete.emit(), "") : c`<div class="section"><div class="title">${n.fieldStatistics}</div>${!e || e === "missing" || e === "in-progress" ? b("field-info-statistics-content", c`<div class="missing">${n.fieldStatisticsRetrieving}</div>`) : e === "failed" && t !== "success" ? this.renderNoStatistics() : b("field-info-statistics-content", c`<div ${O(this._setCompleteRef)}>${this.renderStatistics()}</div>`)}</div>`;
+    const { statisticsStatus: e, uniqueValuesStatus: t, hideStatistics: i, _messages: r, props: s } = this, { layer: n, fieldInfo: m } = s;
+    return i ? (this.arcgisComplete.emit(), this.arcgisFieldInfoComplete.emit(), "") : k(n) || E(n) || F(n) || y(n) || w(n) || ["long"].includes(m.layerField.type) ? (this.arcgisComplete.emit(), this.arcgisFieldInfoComplete.emit(), "") : c`<div class="section"><div class="title">${r.fieldStatistics}</div>${!this.isFinished(t) && !this.isFinished(e) ? this.renderWaitingForStatistics() : e === "failed" && t === "failed" ? this.renderNoStatistics() : this.renderStatistics()}</div>`;
+  }
+  renderWaitingForStatistics() {
+    const { _messages: e } = this;
+    return S("field-info-statistics-content", c`<div class="missing">${e.fieldStatisticsRetrieving}</div>`);
   }
   renderNoStatistics() {
     const { _messages: e } = this;
-    return b("field-info-statistics-content", c`<div class="missing" ${O(this._setCompleteRef)}>${e.fieldStatisticsNotAvailable}</div>`);
+    return S("field-info-statistics-content", c`<div class="missing" ${b(this._setCompleteRef)}>${e.fieldStatisticsNotAvailable}</div>`);
   }
   renderStatistics() {
     const { props: e } = this, { fieldInfo: t } = e;
@@ -635,58 +665,58 @@ class ge extends W {
   renderNumberStatistics() {
     const { statistics: e, _messages: t } = this;
     if (!e)
-      return this.renderNoStatistics();
+      return this.renderWaitingForStatistics();
     const { statistics: i } = t;
-    return c`<div><div class="statistics-row"><div>${i.numberOfValues}</div><div class="data">${this._printNumValue(e.totalCount)}</div></div>${f(e.sum) ? c`<div class="statistics-row"><div>${i.sumOfValues}</div><div class="data">${this._printNumValue(e.sum)}</div></div>` : null}${f(e.min) ? c`<div class="statistics-row"><div>${i.minimum}</div><div class="data">${this._printNumValue(e.min)}</div></div>` : null}${f(e.max) ? c`<div class="statistics-row"><div>${i.maximum}</div><div class="data">${this._printNumValue(e.max)}</div></div>` : null}${f(e.avg) ? c`<div class="statistics-row"><div>${i.average}</div><div class="data">${this._printNumValue(e.avg)}</div></div>` : null}${f(e.stddev) ? c`<div class="statistics-row"><div>${i.standardDeviation}</div><div class="data">${this._printNumValue(e.stddev)}</div></div>` : null}${this.renderNullValues()}</div>`;
+    return S("field-info-statistics-content", c`<div ${b(this._setCompleteRef)}><div class="statistics-row"><div>${i.numberOfValues}</div><div class="data">${this._printNumValue(e.totalCount)}</div></div>${f(e.sum) ? c`<div class="statistics-row"><div>${i.sumOfValues}</div><div class="data">${this._printNumValue(e.sum)}</div></div>` : null}${f(e.min) ? c`<div class="statistics-row"><div>${i.minimum}</div><div class="data">${this._printNumValue(e.min)}</div></div>` : null}${f(e.max) ? c`<div class="statistics-row"><div>${i.maximum}</div><div class="data">${this._printNumValue(e.max)}</div></div>` : null}${f(e.avg) ? c`<div class="statistics-row"><div>${i.average}</div><div class="data">${this._printNumValue(e.avg)}</div></div>` : null}${f(e.stddev) ? c`<div class="statistics-row"><div>${i.standardDeviation}</div><div class="data">${this._printNumValue(e.stddev)}</div></div>` : null}${this.renderNullValues()}</div>`);
   }
   renderStringStatistics() {
-    const { statistics: e, uniqueValuesStatus: t, _messages: i } = this, { statistics: n } = i;
-    return c`<div><div class="statistics-row"><div>${n.numberOfValues}</div>${t !== "success" ? c`<div class="missing">--</div>` : c`<div class="data">${this._printNumValue(e?.totalCount)}</div>`}</div>${this.renderNullValues()}${this.renderTopValues()}</div>`;
+    const { statistics: e, uniqueValuesStatus: t, _messages: i } = this, { statistics: r } = i;
+    return S("field-info-statistics-content", c`<div ${b(this._setCompleteRef)}><div class="statistics-row"><div>${r.numberOfValues}</div>${t !== "success" ? c`<div class="missing">--</div>` : c`<div class="data">${this._printNumValue(e?.totalCount)}</div>`}</div>${this.renderNullValues()}${this.renderTopValues()}</div>`);
   }
   renderDateStatistics() {
-    const { statistics: e, view: t, props: i, _messages: n } = this, { fieldInfo: s } = i;
+    const { statistics: e, view: t, props: i, _messages: r } = this, { fieldInfo: s } = i;
     if (!e || !f(e.max) || !f(e.min))
-      return this.renderNoStatistics();
-    const { statistics: r } = n, m = e.max - e.min, u = Math.floor(m / 31536e6);
-    let o = Math.floor((m - u * 31536e6) / 2628e6), l = Math.ceil((m - o * 2628e6) / 864e5);
-    l >= 30 && (o += 1, l = 0);
-    let d = u === 1 ? r.timeSpanOptions.year : u > 1 ? r.timeSpanOptions.years.replace("${years}", u.toString()) : "";
-    d += u > 0 && (o > 0 || l > 0) ? ", " : "", d += o === 1 ? r.timeSpanOptions.month : o > 1 ? r.timeSpanOptions.months.replace("${months}", o.toString()) : "", d += o > 0 && l > 0 ? ", " : "", d += l === 1 ? r.timeSpanOptions.day : l > 1 ? r.timeSpanOptions.days.replace("${days}", l.toString()) : "";
+      return this.renderWaitingForStatistics();
+    const { statistics: n } = r, m = e.max - e.min, d = Math.floor(m / 31536e6);
+    let l = Math.floor((m - d * 31536e6) / 2628e6), o = Math.ceil((m - l * 2628e6) / 864e5);
+    o >= 30 && (l += 1, o = 0);
+    let u = d === 1 ? n.timeSpanOptions.year : d > 1 ? n.timeSpanOptions.years.replace("${years}", d.toString()) : "";
+    u += d > 0 && (l > 0 || o > 0) ? ", " : "", u += l === 1 ? n.timeSpanOptions.month : l > 1 ? n.timeSpanOptions.months.replace("${months}", l.toString()) : "", u += l > 0 && o > 0 ? ", " : "", u += o === 1 ? n.timeSpanOptions.day : o > 1 ? n.timeSpanOptions.days.replace("${days}", o.toString()) : "";
     const g = s.simpleFieldType !== "timestamp-offset" || !t || t.timeZone !== "unknown", p = s.simpleFieldType === "time-only";
-    return c`<div><div class="statistics-row"><div>${r.numberOfValues}</div><div class="data">${this._printNumValue(e?.totalCount)}</div></div>${g && f(e.min) ? c`<div class="statistics-row"><div>${p ? r.minimumTime : r.minimumDate}</div><div class="data">${this._getDisplayString(e.min)}</div></div>` : null}${g && f(e.max) ? c`<div class="statistics-row"><div>${p ? r.maximumTime : r.maximumDate}</div><div class="data">${this._getDisplayString(e.max)}</div></div>` : null}${g && f(e.avg) ? c`<div class="statistics-row"><div>${p ? r.averageTime : r.averageDate}</div><div class="data">${this._getDisplayString(e.avg)}</div></div>` : null}${g && !p && f(e.min) && f(e.max) && m > 0 ? c`<div class="statistics-row"><div>${r.timespan}</div><div class="data">${d}</div></div>` : null}${this.renderNullValues()}</div>`;
+    return S("field-info-statistics-content", c`<div ${b(this._setCompleteRef)}><div class="statistics-row"><div>${n.numberOfValues}</div><div class="data">${this._printNumValue(e?.totalCount)}</div></div>${g && f(e.min) ? c`<div class="statistics-row"><div>${p ? n.minimumTime : n.minimumDate}</div><div class="data">${this._getDisplayString(e.min)}</div></div>` : null}${g && f(e.max) ? c`<div class="statistics-row"><div>${p ? n.maximumTime : n.maximumDate}</div><div class="data">${this._getDisplayString(e.max)}</div></div>` : null}${g && f(e.avg) ? c`<div class="statistics-row"><div>${p ? n.averageTime : n.averageDate}</div><div class="data">${this._getDisplayString(e.avg)}</div></div>` : null}${g && !p && f(e.min) && f(e.max) && m > 0 ? c`<div class="statistics-row"><div>${n.timespan}</div><div class="data">${u}</div></div>` : null}${this.renderNullValues()}</div>`);
   }
   renderTopValues() {
-    const { uniqueValues: e, uniqueValuesStatus: t, _messages: i, props: n } = this, { fieldInfo: s } = n, { statistics: r } = i;
+    const { uniqueValues: e, uniqueValuesStatus: t, _messages: i, props: r } = this, { fieldInfo: s } = r, { statistics: n } = i;
     if (e?.uniqueValueInfos?.length) {
       const m = e.uniqueValueInfos;
-      m.sort((l, d) => l.count < d.count ? 1 : l.count > d.count ? -1 : 0);
-      const u = s.codedValues, o = m.filter((l) => l.value !== null).filter((l, d) => l && d < 10).map((l) => {
-        let d = l.value;
-        return u ? u.forEach((g) => {
-          d === g.code && (d = g.name);
-        }) : d = this._getDisplayString(d), c`<div class="statistics-row"><div class="data">${`${d}`}</div><div class="count">${this._printNumValue(l.count)}</div></div>`;
+      m.sort((o, u) => o.count < u.count ? 1 : o.count > u.count ? -1 : 0);
+      const d = s.codedValues, l = m.filter((o) => o.value !== null).filter((o, u) => o && u < 10).map((o) => {
+        let u = o.value;
+        return d ? d.forEach((g) => {
+          u === g.code && (u = g.name);
+        }) : u = this._getDisplayString(u), c`<div class="statistics-row"><div class="data">${`${u}`}</div><div class="count">${this._printNumValue(o.count)}</div></div>`;
       });
-      return o.length ? c`<div><div class="statistics-row-top-values"><div>${m.length > 10 ? r.topTenValues : r.topValues}</div><div>${r.count}</div></div>${o}</div>` : "";
+      return l.length ? c`<div><div class="statistics-row-top-values"><div>${m.length > 10 ? n.topTenValues : n.topValues}</div><div>${n.count}</div></div>${l}</div>` : "";
     } else
-      return c`<div><div class="statistics-row-top-values"><div>${r.topValues}</div><div>${r.count}</div></div><div class="statistics-row"><div class="missing">${t === "failed" ? i.fieldUniqueValuesNotAvailable : i.fieldSampleRetrieving}</div></div></div>`;
+      return c`<div><div class="statistics-row-top-values"><div>${n.topValues}</div><div>${n.count}</div></div><div class="statistics-row"><div class="missing">${t === "failed" ? i.fieldUniqueValuesNotAvailable : i.fieldSampleRetrieving}</div></div></div>`;
   }
   renderNullValues() {
-    const { statistics: e, uniqueValues: t, _messages: i } = this, { statistics: n } = i;
+    const { statistics: e, uniqueValues: t, _messages: i } = this, { statistics: r } = i;
     let s = e?.nullcount;
     if (!f(s) && t) {
-      const r = t.uniqueValueInfos;
-      for (let m = 0; m < r.length; m++) {
-        const u = r[m];
-        if (u.value === null) {
-          s = u.count;
+      const n = t.uniqueValueInfos;
+      for (let m = 0; m < n.length; m++) {
+        const d = n[m];
+        if (d.value === null) {
+          s = d.count;
           break;
         }
       }
     }
-    return c`<div class="statistics-row"><div>${n.numberOfNulls}</div>${f(s) ? c`<div class="data">${this._printNumValue(s)}</div>` : c`<div class="missing">--</div>`}</div>`;
+    return c`<div class="statistics-row"><div>${r.numberOfNulls}</div>${f(s) ? c`<div class="data">${this._printNumValue(s)}</div>` : c`<div class="missing">--</div>`}</div>`;
   }
 }
-G("arcgis-field-info", ge);
+H("arcgis-field-info", Fe);
 export {
-  ge as ArcgisFieldInfo
+  Fe as ArcgisFieldInfo
 };