@arcgis/common-components 4.29.0-beta.42 → 4.29.0-beta.44

package/dist/components/field-info.js

@@ -0,0 +1,1048 @@
+import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h as h$1, Fragment, Host } from '@stencil/core/internal/client';
+import { a as importCoreLang, i as importConfig, b as importIntl, c as importRestSupportQuery, d as importSmartMappingStatisticsSummaryStatistics, e as importSmartMappingStatisticsUniqueValues, f as importCoreReactiveUtils } from './index2.js';
+
+function S(e,t){let n=e;for(;n;){if(n===t)return !0;if(!n.parentNode)return !1;n.parentNode instanceof ShadowRoot?n=n.parentNode.host:n=n.parentNode;}return !1}function T(e,t,n=()=>{}){if(!t||t.length<=0)return;let r=new MutationObserver(o=>{for(let i of o)S(e,i.target)&&n();});return r.observe(document.documentElement,{attributes:!0,attributeFilter:t,subtree:!0}),r}function E(e,t){let n=e;for(;n;){let r=n.closest(t);if(r)return r;let o=n.getRootNode();if(o===document)return null;n=o.host;}return null}function C(e){return f(e,"dir","ltr")}function f(e,t,n){return E(e,`[${t}]`)?.getAttribute(t)??n}var x=new Set(["ar","bg","bs","ca","cs","da","de","el","en","es","et","fi","fr","he","hr","hu","id","it","ja","ko","lt","lv","nl","nb","pl","pt-BR","pt-PT","ro","ru","sk","sl","sr","sv","th","tr","uk","vi","zh-CN","zh-HK","zh-TW"]),a=new Map;async function N(e,t,n=""){let r=`${t}/${n}${e}.json`;if(a.has(r))return a.get(r);try{let o=await fetch(r);if(o.ok){let s=await o.json();return a.set(r,s),s}if(e==="en"){a.set(r,void 0);return}let i=await N("en",t,n);return a.set(r,i),i}catch{a.set(r,void 0);return}}function R(e){let t=f(e,"lang",navigator?.language||"en");if(x.has(t))return {lang:t,t9nLocale:t};let n=t.slice(0,2);return {lang:t,t9nLocale:x.has(n)?n:"en"}}var m=new WeakMap,h=new WeakMap,_=new WeakMap;async function F(e,t,n){h.set(e,t),m.set(e,T(e._hostElement,["lang"],()=>{b(e,n);})),await b(e,n);}function U(e){m.get(e)?.disconnect(),m.delete(e),h.delete(e);}async function b(e,t){let{lang:n,t9nLocale:r}=R(e._hostElement);if(n===e._lang&&r===e._t9nLocale||(n!==e._lang&&(e._lang=n),r===e._t9nLocale))return;let o=_.get(e);if(!o){let i=h.get(e)??"",s=e._hostElement.tagName.toLowerCase().replace("arcgis-",""),u=`${i}/${s}/t9n`,l=`${s}.t9n.`;o=await N(r,u,l);}e._t9nLocale=r,e._t9nStrings=o,await t?.call(e);}
+
+var Status;
+(function (Status) {
+  Status["MISSING"] = "missing";
+  Status["IN_PROGRESS"] = "inProgress";
+  Status["SUCCESS"] = "success";
+  Status["FAILED"] = "failed";
+})(Status || (Status = {}));
+var SimpleFieldTypes;
+(function (SimpleFieldTypes) {
+  SimpleFieldTypes["NUMBER"] = "number";
+  SimpleFieldTypes["STRING"] = "string";
+  SimpleFieldTypes["DATE"] = "date";
+  SimpleFieldTypes["DATE_ONLY"] = "date-only";
+  SimpleFieldTypes["TIME_ONLY"] = "time-only";
+  SimpleFieldTypes["TIMESTAMP_OFFSET"] = "timestamp-offset";
+  SimpleFieldTypes["OID"] = "oid";
+  SimpleFieldTypes["GUID"] = "guid";
+  SimpleFieldTypes["UNKNOWN"] = "unknown";
+})(SimpleFieldTypes || (SimpleFieldTypes = {}));
+/**
+ * Returns true if the value is defined
+ * @param value - value to check
+ */
+function isDefined(value) {
+  return value !== undefined && value !== null;
+}
+/**
+ * Returns the URL used for queries.
+ * E.g. SceneLayers need to use the FeatureLayer URL for queries.
+ * @param value - value to check
+ */
+function getQueryURL(layer) {
+  if (layer.type === "scene") {
+    return layer.associatedLayer?.url;
+  }
+  return layer.url;
+}
+
+/**
+ * Returns additional field information from layer
+ * @param props - properties containing layer and fieldName
+ */
+function getFieldInfo(props) {
+  const { layer, fieldName } = props;
+  let fieldInfo = undefined;
+  const { popupTemplate } = layer;
+  const popupFieldInfos = popupTemplate ? popupTemplate.fieldInfos : [];
+  (layer.type === "imagery-tile"
+    ? layer.rasterFields
+    : layer.type === "imagery" && layer.rasterFields?.length
+      ? layer.rasterFields
+      : layer.fields)
+    .filter((layerField) => layerField.name === fieldName)
+    .forEach((layerField) => {
+    const list = popupFieldInfos
+      ? popupFieldInfos.filter((fInfo) => fInfo.fieldName === layerField.name)
+      : null;
+    const label = list?.length ? list[0].label : null;
+    if (/^raster.(item|service)pixelvalue/i.test(fieldName)) {
+      // e.g. "Raster.ServicePixelValue" | "Raster.ItemPixelValue" | "Raster.ServicePixelValue.Raw"
+      // layer.rasterFields reports them as type "string"
+      layerField.type = "double";
+    }
+    const featureFilterField = {
+      layerField: layerField,
+      label: label || layerField.alias || layerField.name
+    };
+    featureFilterField.codedValues = getCodedValues(fieldName, props);
+    _getSimpleFieldType(featureFilterField);
+    if (featureFilterField.simpleFieldType) {
+      fieldInfo = featureFilterField;
+    } // else can't use field
+  });
+  return fieldInfo;
+}
+/**
+ * Returns feature count in layer
+ * @param props - properties containing layer and fieldName
+ */
+async function getFeatureCount(props) {
+  props.statisticsStatus = Status.IN_PROGRESS;
+  const { layer, view } = props;
+  if (layer.type === "imagery" || layer.type === "imagery-tile" || layer.type === "stream") {
+    throw new Error("could not get feature count");
+  }
+  try {
+    return await getFeatureCountCommon(layer, view);
+  }
+  catch (error) {
+    return;
+  }
+}
+/**
+ * Returns summary statistics
+ * @param props - properties containing layer and fieldName
+ */
+async function getStatistics(props) {
+  const { layer, view, fieldName, fieldInfo, modules } = props;
+  if (layer.type === "imagery" || layer.type === "imagery-tile") {
+    throw new Error("could not get statistics for ImageryLayer/ImageryTileLayer");
+  }
+  if (!fieldInfo ||
+    fieldInfo.layerField.type === "oid" ||
+    fieldInfo.layerField.type === "guid" ||
+    fieldInfo.layerField.type === "global-id") {
+    const count = await getFeatureCount(props);
+    return Promise.resolve({ totalCount: count, nullcount: 0 } /*StatisticsResult*/);
+  }
+  try {
+    const result = await modules.summaryStatistics({
+      layer,
+      view,
+      field: fieldName
+    });
+    if (!isDefined(result.count)) {
+      // statistics is unusable
+      throw new Error("could not get statistics");
+    }
+    // if we hit maxRecordCount other stats values are probably not correct either
+    const hitMaxRecordCount = "sourceJSON" in layer && layer.sourceJSON.maxRecordCount === result.count;
+    // count only contains features with a value (!= null)
+    if (isDefined(result.nullcount) && !hitMaxRecordCount) {
+      // we can add the feature count without null and the count of nulls
+      const stats /*StatisticsResult*/ = { ...result, totalCount: result.count + result.nullcount };
+      return stats;
+    }
+    else {
+      // we want the total feature count
+      // happens e.g. for SceneLayers with older stats cache
+      const count = await getFeatureCount(props);
+      const stats = { ...result, totalCount: count };
+      return stats;
+    }
+  }
+  catch (error) {
+    throw new Error("could not get statistics");
+  }
+}
+/**
+ * Returns unique values
+ * @param props - properties containing layer and fieldName
+ */
+async function getUniqueValues(props) {
+  const { layer, view, fieldName, modules } = props;
+  if (layer.type === "imagery" || layer.type === "imagery-tile") {
+    throw new Error("could not get unique values for ImageryLayer/ImageryTileLayer");
+  }
+  if (layer.type === "feature" && !layer.url) {
+    layer.outFields = ["*"];
+  }
+  try {
+    const result = await modules.uniqueValues({
+      layer,
+      view,
+      field: fieldName
+    });
+    return result;
+  }
+  catch (error) {
+    throw new Error("could not get unique values");
+  }
+}
+function _getSimpleFieldType(featureFilterField) {
+  switch (featureFilterField.layerField.type) {
+    case "string":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.STRING;
+      break;
+    case "date":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.DATE;
+      break;
+    case "timestamp-offset":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.TIMESTAMP_OFFSET;
+      break;
+    case "date-only":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.DATE_ONLY;
+      break;
+    case "time-only":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.TIME_ONLY;
+      break;
+    case "oid":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.OID;
+      break;
+    case "guid":
+    case "global-id":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.GUID;
+      break;
+    case "small-integer":
+    case "big-integer":
+    case "integer":
+    case "single":
+    case "double":
+    case "long":
+      featureFilterField.simpleFieldType = SimpleFieldTypes.NUMBER;
+      break;
+  }
+}
+function getCodedValues(fieldName, props) {
+  const { layer, modules } = props;
+  if (layer.type !== "feature") {
+    return;
+  }
+  const typeIdField = layer.typeIdField;
+  const types = layer.types;
+  let fieldDomains = undefined;
+  const field = layer.fields.find((field) => field.name === fieldName);
+  const fieldDomain = field.domain;
+  if (typeIdField && types) {
+    // layer has types
+    if (typeIdField === fieldName) {
+      // this is the field with the types
+      fieldDomains = types.map((type) => {
+        // fake coded Values
+        return {
+          code: type.id,
+          name: type.name
+        };
+      });
+    }
+    else {
+      // field does not have types; look farther inside the types
+      fieldDomains = [];
+      types.forEach((type) => {
+        if (!type.domains || !type.domains[fieldName] || type.domains[fieldName].type === "inherited") {
+          const domain = fieldDomain;
+          if (domain?.codedValues) {
+            domain.codedValues.forEach(async (codedValue) => {
+              let found = false;
+              fieldDomains.forEach((codedVal) => {
+                if (codedVal.code === codedValue.code) {
+                  found = true;
+                  if (`, ${codedVal.name},`.indexOf(`, ${codedValue.name},`) === -1) {
+                    codedVal.name += `, ${codedValue.name}`;
+                  }
+                }
+              });
+              if (!found) {
+                fieldDomains.push(modules.esriLang.clone(codedValue));
+              }
+            });
+          }
+        }
+        else if (type.domains?.[fieldName]?.codedValues) {
+          type.domains[fieldName].codedValues.forEach(async (codedValue) => {
+            let found = false;
+            fieldDomains.forEach((codedVal) => {
+              if (codedVal.code === codedValue.code) {
+                found = true;
+                if (`, ${codedVal.name},`.indexOf(`, ${codedValue.name},`) === -1) {
+                  codedVal.name += `, ${codedValue.name}`;
+                }
+              }
+            });
+            if (!found) {
+              fieldDomains.push(modules.esriLang.clone(codedValue));
+            }
+          });
+        }
+      });
+    }
+    if (!fieldDomains?.length && fieldDomain?.codedValues) {
+      fieldDomains = modules.esriLang.clone(fieldDomain.codedValues);
+    }
+  }
+  else if (fieldDomain?.codedValues) {
+    // domains directly on the layer field
+    fieldDomains = field.domain.codedValues;
+  }
+  return fieldDomains?.length ? fieldDomains : null;
+}
+
+/**
+ * Returns up to 5 features from the layer to get sample data
+ * @param props - properties containing layer and view
+ */
+async function getOneFeature(props) {
+  const { view, layer } = props;
+  if (layer.type === "imagery" || layer.type === "imagery-tile") {
+    throw new Error("could not get feature");
+  }
+  if ((layer.type === "feature" && !layer.url) || layer.type === "wfs") {
+    // feature collection or wfs
+    const query = layer.createQuery();
+    query.start = 0;
+    query.num = 5;
+    query.outFields = ["*"];
+    const result = await layer.queryFeatures(query);
+    if (result.features?.length) {
+      return result;
+    }
+    else {
+      throw new Error("could not get feature");
+    }
+  }
+  else {
+    // service
+    if (!view) {
+      // get feature from service directly
+      return _queryOneFeature(props);
+    }
+    const layerView = (await view.whenLayerView(layer));
+    const hasAllFields = layerView.availableFields.length === layer.fields.length;
+    if (hasAllFields || (["stream", "ogc-feature"].indexOf(layer.type) > -1 && layerView.availableFields.length > 0)) {
+      // features on client have all fields
+      // or we can't make a server query, so we take what we can get
+      const query = layer.createQuery();
+      query.start = 0;
+      query.num = 5;
+      query.outFields = ["*"];
+      const result = await layerView.queryFeatures(query);
+      if (result.features?.length) {
+        // client side features
+        return result;
+      }
+      else {
+        // get feature from service
+        return _queryOneFeature(props);
+      }
+    }
+    else {
+      // get feature from service
+      return _queryOneFeature(props);
+    }
+  }
+}
+async function _queryOneFeature(props) {
+  const { layer, modules } = props;
+  if (["imagery", "imagery-tile", "stream", "ogc-feature"].indexOf(layer.type) > -1) {
+    throw new Error("cannot get feature from service");
+  }
+  const query = new modules.Query({
+    where: "1=1",
+    outFields: ["*"],
+    returnGeometry: false
+  });
+  return layer.queryFeatures(query);
+}
+/**
+ * Returns feature count of layer
+ * @param layer - FeatureLayer | WFSLayer | OGCFeatureLayer | StreamLayer | CSVLayer
+ * @param mapView - View
+ */
+async function getFeatureCountCommon(layer, view) {
+  if (layer.type === "feature" && !layer.url) {
+    return getFeatureCountForCollection(layer);
+  }
+  else if (layer.type === "feature" ||
+    layer.type === "csv" ||
+    layer.type === "scene" ||
+    layer.type === "wfs" ||
+    layer.type === "geojson") {
+    return await layer.queryFeatureCount();
+  }
+  else if (view && (layer.type === "stream" || layer.type === "ogc-feature")) {
+    return getFeatureCountFromView(layer, view);
+  }
+  return undefined;
+}
+/**
+ * Returns feature count of feature collection layer
+ * @param layer - FeatureLayer
+ */
+async function getFeatureCountForCollection(layer) {
+  const query = layer.createQuery();
+  query.outFields = ["*"];
+  const result = await layer.queryFeatures(query);
+  if (result.features?.length) {
+    return result.features.length;
+  }
+  else {
+    throw new Error("could not get feature count");
+  }
+}
+/**
+ * Returns feature count of feature collection layer
+ * @param layer - StreamLayer | OGCFeatureLayer
+ */
+async function getFeatureCountFromView(layer, view) {
+  // we can only get the features from the map
+  const layerView = (await view.whenLayerView(layer));
+  return layerView.queryFeatureCount();
+}
+
+const fieldInfoScss = ":host{height:100%}.container{padding:6px;background-color:white}.title{font-weight:bold;padding:5px 0}.missing{color:#a9a9a9}.data{color:#a9a9a9}.count{white-space:nowrap}.section{padding:6px 0}.statistics-row{border-top:1px solid #e0e0e0;padding:6px 0;display:flex;justify-content:space-between}.statistics-row-top-values{border-top:1px solid #e0e0e0;padding:20px 0 6px 0;display:flex;justify-content:space-between}";
+
+const ArcgisFieldInfo = /*@__PURE__*/ proxyCustomElement(class ArcgisFieldInfo extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.arcgisFieldInfoComplete = createEvent(this, "arcgisFieldInfoComplete", 7);
+    this.view = undefined;
+    this.layer = undefined;
+    this.fieldName = undefined;
+    this.hideStatistics = false;
+    this.oneFeatureResponse = undefined;
+    this.oneFeatureResponseStatus = Status.MISSING;
+    this.statistics = undefined;
+    this.statisticsStatus = Status.MISSING;
+    this.uniqueValues = undefined;
+    this.uniqueValuesStatus = Status.MISSING;
+    this._lang = "";
+    this._t9nLocale = "";
+    this._t9nStrings = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    await F(this, getAssetPath("./assets"));
+    const esriLang = await importCoreLang();
+    const esriConfig = await importConfig();
+    const intl = await importIntl();
+    const Query = await importRestSupportQuery();
+    const summaryStatistics = await importSmartMappingStatisticsSummaryStatistics();
+    const uniqueValues = await importSmartMappingStatisticsUniqueValues();
+    const { view, layer, fieldName, hideStatistics } = this;
+    let sublayerFL;
+    if (layer.declaredClass === "esri.layers.support.Sublayer") {
+      // need to create a FeatureLayer
+      const sublayer = layer;
+      const { whenOnce } = await importCoreReactiveUtils();
+      view && (await whenOnce(() => !view.updating));
+      sublayerFL = await sublayer.createFeatureLayer();
+      await sublayerFL.load();
+    }
+    this.props = {
+      view,
+      layer: sublayerFL || layer,
+      fieldName,
+      hideStatistics,
+      modules: { esriLang, esriConfig, intl, Query, summaryStatistics, uniqueValues }
+    };
+    // required for initial load
+    this.props.fieldInfo = getFieldInfo(this.props);
+    // we don't know if the SceneLayer has an associated FL
+    // don't prompt for a login if it's not accessible
+    if (layer.type === "scene") {
+      esriConfig.request.interceptors?.push({
+        urls: getQueryURL(layer) + "/" + layer.layerId,
+        before: function (params) {
+          params.requestOptions.authMode = "no-prompt";
+        }
+      });
+    }
+    this.oneFeatureResponseStatus = Status.IN_PROGRESS;
+    try {
+      const result = await getOneFeature(this.props);
+      this.oneFeatureResponse = result;
+      this.oneFeatureResponseStatus = Status.SUCCESS;
+    }
+    catch (error) {
+      this.oneFeatureResponseStatus = Status.FAILED;
+    }
+    if (layer.type === "stream") {
+      this.uniqueValuesStatus = Status.FAILED;
+      this.statisticsStatus = Status.FAILED;
+      return;
+    }
+    if (hideStatistics) {
+      this.uniqueValuesStatus = Status.FAILED;
+    }
+    else {
+      this.uniqueValuesStatus = Status.IN_PROGRESS;
+      try {
+        const uniqueValues = await getUniqueValues(this.props);
+        this.uniqueValues = uniqueValues;
+        if (uniqueValues?.uniqueValueInfos?.length) {
+          this.uniqueValuesStatus = Status.SUCCESS;
+        }
+        else {
+          this.uniqueValuesStatus = Status.FAILED;
+        }
+      }
+      catch (error) {
+        this.uniqueValuesStatus = Status.FAILED;
+      }
+    }
+    if (hideStatistics) {
+      this.statisticsStatus = Status.FAILED;
+    }
+    else {
+      this.statisticsStatus = Status.IN_PROGRESS;
+      try {
+        const statistics = await getStatistics(this.props);
+        if (!isDefined(statistics.totalCount) &&
+          isDefined(statistics.count) &&
+          this.uniqueValuesStatus === Status.SUCCESS) {
+          // take null values count from unique values and add with non-null count from statistics
+          const infos = this.uniqueValues.uniqueValueInfos;
+          for (let i = 0; i < infos.length; i++) {
+            const info = infos[i];
+            if (info.value === null) {
+              statistics.totalCount = info.count + statistics.count;
+              break;
+            }
+          }
+          if (!isDefined(statistics.totalCount)) {
+            // no null values
+            statistics.totalCount = statistics.count;
+          }
+        }
+        this.statistics = statistics;
+        this.statisticsStatus = Status.SUCCESS;
+      }
+      catch (error) {
+        this.statisticsStatus = Status.FAILED;
+      }
+    }
+  }
+  async componentDidLoad() {
+    // once component is visible make other calls
+    const { props } = this;
+    const { modules } = props;
+    modules.intl.setLocale(this._lang);
+    // modules.intl.setLocale(this.locale) not returning the correct formatting for e.g. it-ch
+  }
+  disconnectedCallback() {
+    U(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const { props } = this;
+    const { fieldInfo } = props;
+    if (!fieldInfo) {
+      return h$1(Fragment, null);
+    }
+    return (h$1(Host, null, h$1("div", { class: "container" }, this.renderFieldType(), this.renderFieldAlias(), this.renderFieldDescription(), this.renderFieldValueType(), this.renderFieldSampleValue(), this.renderFieldFormat(), this.renderFieldStatistics())));
+  }
+  renderFieldType() {
+    const { _t9nStrings, props } = this;
+    const { fieldInfo } = props;
+    const fieldType = this._getFieldTypeLabel(fieldInfo.layerField.type);
+    return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldType), h$1("div", null, fieldType)));
+  }
+  renderFieldAlias() {
+    const { _t9nStrings, props } = this;
+    const { fieldInfo } = props;
+    return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldAlias), h$1("div", null, fieldInfo.label)));
+  }
+  renderFieldDescription() {
+    const { _t9nStrings, props } = this;
+    const { layer } = props;
+    if (layer.type !== "feature") {
+      return h$1(Fragment, null);
+    }
+    const { fieldInfo } = props;
+    const description = fieldInfo.layerField.description;
+    return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldDescription), h$1("div", { class: {
+        missing: !description
+      } }, description || _t9nStrings.fieldDescriptionNotSet)));
+  }
+  renderFieldValueType() {
+    const { _t9nStrings, props } = this;
+    const { layer } = props;
+    if (layer.type !== "feature") {
+      return h$1(Fragment, null);
+    }
+    const { fieldInfo } = props;
+    const fieldValueType = this._getFieldValueTypeCamelCase(fieldInfo);
+    return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldValueType), h$1("div", { class: !fieldValueType ? "missing" : "" }, fieldValueType
+      ? _t9nStrings.fieldValueTypes[fieldValueType]
+      : _t9nStrings.fieldValueTypeNotSet)));
+  }
+  renderFieldSampleValue() {
+    const { oneFeatureResponse, oneFeatureResponseStatus, statisticsStatus, statistics, uniqueValuesStatus, uniqueValues, _t9nStrings, props } = this;
+    const { layer, fieldName, fieldInfo } = props;
+    const { statistics: statStrings } = _t9nStrings;
+    let value;
+    if (["imagery", "imagery-tile"].indexOf(layer.type) > -1) {
+      return h$1(Fragment, null);
+    }
+    if (layer.type !== "stream" &&
+      [SimpleFieldTypes.STRING, SimpleFieldTypes.OID, SimpleFieldTypes.GUID].indexOf(this._getStatisticsType(fieldInfo)) > -1 &&
+      uniqueValuesStatus !== Status.FAILED) {
+      // we show top values
+      return h$1(Fragment, null);
+    }
+    if (oneFeatureResponseStatus === Status.SUCCESS) {
+      // find first valid value entry
+      oneFeatureResponse.features.forEach((feature) => {
+        if (value === undefined || (value === null && feature.attributes[fieldName] !== null)) {
+          value = feature.attributes[fieldName];
+        }
+      });
+    }
+    else if (statisticsStatus === Status.SUCCESS) {
+      // use statistics min value
+      value = statistics.min;
+    }
+    else if (uniqueValuesStatus === Status.SUCCESS) {
+      // use a non-null value
+      value = uniqueValues.uniqueValueInfos?.[0]?.value || uniqueValues.uniqueValueInfos?.[1]?.value;
+    }
+    const codedValues = fieldInfo.codedValues;
+    if (isDefined(value)) {
+      if (codedValues) {
+        value = codedValues.find((codedValue) => value === codedValue.code)?.name || value;
+      }
+      else {
+        value = this._getDisplayString(value);
+      }
+    }
+    return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldSampleValue), h$1("div", { class: (oneFeatureResponseStatus === Status.FAILED &&
+        statisticsStatus === Status.FAILED &&
+        uniqueValuesStatus === Status.FAILED) ||
+        !isDefined(value)
+        ? "missing"
+        : "" }, oneFeatureResponseStatus === Status.SUCCESS ||
+      statisticsStatus === Status.SUCCESS ||
+      uniqueValuesStatus === Status.SUCCESS
+      ? !isDefined(value)
+        ? statStrings.allNulls
+        : `${value}`
+      : oneFeatureResponseStatus === Status.FAILED &&
+        statisticsStatus === Status.FAILED &&
+        uniqueValuesStatus === Status.FAILED
+        ? _t9nStrings.fieldSampleNotAvailable
+        : _t9nStrings.fieldSampleRetrieving)));
+  }
+  renderFieldFormat() {
+    const { _t9nStrings, props } = this;
+    const { fieldName, fieldInfo, layer } = props;
+    if (["single", "double", "long"].indexOf(fieldInfo.layerField.type) === -1) {
+      return h$1(Fragment, null);
+    }
+    const popupTemplate = layer.popupTemplate;
+    if (popupTemplate?.fieldInfos) {
+      const popFieldInfos = popupTemplate.fieldInfos?.filter((fieldInfo) => fieldInfo.fieldName === fieldName);
+      if (popFieldInfos?.length) {
+        const popFieldInfo = popFieldInfos[0];
+        if (isDefined(popFieldInfo?.format?.places)) {
+          const num = popFieldInfo.format.places;
+          return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldDecimalPlaces), h$1("div", null, _t9nStrings.fieldNumDecimalPlaces.replace("${number}", num.toString()))));
+        }
+      }
+    }
+    return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldDecimalPlaces), h$1("div", { class: "missing" }, _t9nStrings.fieldDecimalPlacesNotAvailable)));
+  }
+  renderFieldStatistics() {
+    const { statisticsStatus, uniqueValuesStatus, hideStatistics, _t9nStrings, props } = this;
+    const { layer, fieldInfo } = props;
+    if (hideStatistics) {
+      this.arcgisFieldInfoComplete.emit();
+      return h$1(Fragment, null);
+    }
+    if (["stream", "imagery", "imagery-tile"].indexOf(layer.type) > -1 ||
+      ["long"].indexOf(fieldInfo.layerField.type) > -1) {
+      // can't get statistics
+      this.arcgisFieldInfoComplete.emit();
+      return h$1(Fragment, null);
+    }
+    return (h$1("div", { class: "section" }, h$1("div", { class: "title" }, _t9nStrings.fieldStatistics), !statisticsStatus || statisticsStatus === Status.MISSING || statisticsStatus === Status.IN_PROGRESS ? (h$1("div", { key: "field-info-statistics-content", class: "missing" }, _t9nStrings.fieldStatisticsRetrieving)) : statisticsStatus === Status.FAILED && uniqueValuesStatus !== Status.SUCCESS ? (this.renderNoStatistics()) : (h$1("div", { key: "field-info-statistics-content", ref: () => this.arcgisFieldInfoComplete.emit() }, this.renderStatistics()))));
+  }
+  renderNoStatistics() {
+    const { _t9nStrings } = this;
+    return (h$1("div", { key: "field-info-statistics-content", ref: () => this.arcgisFieldInfoComplete.emit(), class: "missing" }, _t9nStrings.fieldStatisticsNotAvailable));
+  }
+  renderStatistics() {
+    const { props } = this;
+    const { fieldInfo } = props;
+    switch (this._getStatisticsType(fieldInfo)) {
+      case SimpleFieldTypes.NUMBER:
+        return this.renderNumberStatistics();
+      case SimpleFieldTypes.STRING:
+      case SimpleFieldTypes.OID:
+      case SimpleFieldTypes.GUID:
+        return this.renderStringStatistics();
+      case SimpleFieldTypes.DATE:
+      case SimpleFieldTypes.DATE_ONLY:
+      case SimpleFieldTypes.TIME_ONLY:
+      case SimpleFieldTypes.TIMESTAMP_OFFSET:
+        return this.renderDateStatistics();
+      default:
+        return h$1(Fragment, null);
+    }
+  }
+  renderNumberStatistics() {
+    const { statistics, _t9nStrings } = this;
+    if (!statistics) {
+      return this.renderNoStatistics();
+    }
+    const { statistics: statStrings } = _t9nStrings;
+    return (h$1("div", null, h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.numberOfValues), h$1("div", { class: "data" }, this._printNumValue(statistics.totalCount))), isDefined(statistics.sum) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.sumOfValues), h$1("div", { class: "data" }, this._printNumValue(statistics.sum)))) : null, isDefined(statistics.min) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.minimum), h$1("div", { class: "data" }, this._printNumValue(statistics.min)))) : null, isDefined(statistics.max) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.maximum), h$1("div", { class: "data" }, this._printNumValue(statistics.max)))) : null, isDefined(statistics.avg) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.average), h$1("div", { class: "data" }, this._printNumValue(statistics.avg)))) : null, isDefined(statistics.stddev) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.standardDeviation), h$1("div", { class: "data" }, this._printNumValue(statistics.stddev)))) : null, this.renderNullValues()));
+  }
+  renderStringStatistics() {
+    const { statistics, uniqueValuesStatus, _t9nStrings } = this;
+    const { statistics: statStrings } = _t9nStrings;
+    return (h$1("div", null, h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.numberOfValues), uniqueValuesStatus !== Status.SUCCESS ? (h$1("div", { class: "missing" }, "--")) : (h$1("div", { class: "data" }, this._printNumValue(statistics?.totalCount)))), this.renderNullValues(), this.renderTopValues()));
+  }
+  renderDateStatistics() {
+    // TODO UTC offset
+    const { statistics, view, props, _t9nStrings } = this;
+    const { fieldInfo } = props;
+    if (!statistics) {
+      return this.renderNoStatistics();
+    }
+    const { statistics: statStrings } = _t9nStrings;
+    const dateRange = statistics.max - statistics.min;
+    const years = Math.floor(dateRange / 31536000000);
+    let months = Math.floor((dateRange - years * 31536000000) / 2628000000);
+    let days = Math.ceil((dateRange - months * 2628000000) / 86400000);
+    if (days >= 30) {
+      months += 1;
+      days = 0;
+    }
+    let timeSpan = years === 1
+      ? statStrings.timeSpanOptions.year
+      : years > 1
+        ? statStrings.timeSpanOptions.years.replace("${years}", years.toString())
+        : "";
+    timeSpan += years > 0 && (months > 0 || days > 0) ? ", " : "";
+    timeSpan +=
+      months === 1
+        ? statStrings.timeSpanOptions.month
+        : months > 1
+          ? statStrings.timeSpanOptions.months.replace("${months}", months.toString())
+          : "";
+    timeSpan += months > 0 && days > 0 ? ", " : "";
+    timeSpan +=
+      days === 1
+        ? statStrings.timeSpanOptions.day
+        : days > 1
+          ? statStrings.timeSpanOptions.days.replace("${days}", days.toString())
+          : "";
+    const showStats = fieldInfo.simpleFieldType !== SimpleFieldTypes.TIMESTAMP_OFFSET ||
+      !view ||
+      view.timeZone !== "unknown";
+    const isTimeOnly = fieldInfo.simpleFieldType === SimpleFieldTypes.TIME_ONLY;
+    return (h$1("div", null, h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.numberOfValues), h$1("div", { class: "data" }, this._printNumValue(statistics?.totalCount))), showStats && isDefined(statistics.min) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, isTimeOnly ? statStrings.minimumTime : statStrings.minimumDate), h$1("div", { class: "data" }, `${this._getDisplayString(statistics.min)}`))) : null, showStats && isDefined(statistics.max) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, isTimeOnly ? statStrings.maximumTime : statStrings.maximumDate), h$1("div", { class: "data" }, `${this._getDisplayString(statistics.max)}`))) : null, showStats && isDefined(statistics.avg) ? (h$1("div", { class: "statistics-row" }, h$1("div", null, isTimeOnly ? statStrings.averageTime : statStrings.averageDate), h$1("div", { class: "data" }, `${this._getDisplayString(statistics.avg)}`))) : null, showStats && !isTimeOnly && isDefined(statistics.min) && isDefined(statistics.max) && dateRange > 0 ? (h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.timespan), h$1("div", { class: "data" }, timeSpan))) : null, this.renderNullValues()));
+  }
+  renderTopValues() {
+    const { uniqueValues, uniqueValuesStatus, _t9nStrings, props } = this;
+    const { fieldInfo } = props;
+    const { statistics: statStrings } = _t9nStrings;
+    if (uniqueValues?.uniqueValueInfos?.length) {
+      const infos = uniqueValues.uniqueValueInfos;
+      infos.sort((a, b) => (a.count < b.count ? 1 : a.count > b.count ? -1 : 0));
+      const codedValues = fieldInfo.codedValues;
+      const values = infos
+        .filter((info) => info.value !== null)
+        .filter((info, idx) => info && idx < 10)
+        .map((info) => {
+        let value = info.value;
+        if (codedValues) {
+          codedValues.forEach((codeValue) => {
+            if (value === codeValue.code) {
+              value = codeValue.name;
+            }
+          });
+        }
+        else {
+          value = this._getDisplayString(value);
+        }
+        return (h$1("div", { class: "statistics-row" }, h$1("div", { class: "data" }, `${value}`), h$1("div", { class: `$"data" $"count"` }, this._printNumValue(info.count))));
+      });
+      if (!values.length) {
+        return h$1(Fragment, null);
+      }
+      return (h$1("div", null, h$1("div", { class: "statistics-row-top-values" }, h$1("div", null, infos.length > 10 ? statStrings.topTenValues : statStrings.topValues), h$1("div", null, statStrings.count)), values));
+    }
+    else {
+      return (h$1("div", null, h$1("div", { class: "statistics-row-top-values" }, h$1("div", null, statStrings.topValues), h$1("div", null, statStrings.count)), h$1("div", { class: "statistics-row" }, h$1("div", { class: "missing" }, uniqueValuesStatus === Status.FAILED
+        ? _t9nStrings.fieldUniqueValuesNotAvailable
+        : _t9nStrings.fieldSampleRetrieving))));
+    }
+  }
+  renderNullValues() {
+    const { statistics, uniqueValues, _t9nStrings } = this;
+    const { statistics: statStrings } = _t9nStrings;
+    let count = statistics?.nullcount;
+    if (!isDefined(count) && uniqueValues) {
+      const infos = uniqueValues.uniqueValueInfos;
+      for (let i = 0; i < infos.length; i++) {
+        const info = infos[i];
+        if (info.value === null) {
+          count = info.count;
+          break;
+        }
+      }
+    }
+    return (h$1("div", { class: "statistics-row" }, h$1("div", null, statStrings.numberOfNulls), !isDefined(count) ? (h$1("div", { class: "missing" }, "--")) : (h$1("div", { class: "data" }, `${new Number(count).toLocaleString()}`))));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private methods
+  //
+  // --------------------------------------------------------------------------
+  _getFieldTypeLabel(fieldType) {
+    const { _t9nStrings } = this;
+    const fieldTypes = _t9nStrings.fieldTypes;
+    switch (fieldType) {
+      case "small-integer":
+        return fieldTypes.smallInteger;
+      case "big-integer":
+        return fieldTypes.bigInteger;
+      case "integer":
+        return fieldTypes.integer;
+      case "single":
+        return fieldTypes.single;
+      case "double":
+        return fieldTypes.double;
+      case "long":
+        return fieldTypes.long;
+      case "string":
+        return fieldTypes.string;
+      case "date":
+        return fieldTypes.date;
+      case "date-only":
+        return fieldTypes.dateOnly;
+      case "time-only":
+        return fieldTypes.timeOnly;
+      case "timestamp-offset":
+        return fieldTypes.timestampOffset;
+      case "oid":
+        return fieldTypes.oid;
+      case "guid":
+        return fieldTypes.guid;
+      case "global-id":
+        return fieldTypes.globalId;
+      default:
+        return fieldTypes.string;
+    }
+  }
+  _getStatisticsType(fieldInfo) {
+    // "count-or-amount","percentage-or-ratio","measurement","unique-identifier","coordinate","binary"
+    // "name-or-title","type-or-category","description","location-or-place-name","ordered-or-ranked","date-and-time"
+    switch (fieldInfo.layerField.type) {
+      case "small-integer":
+      case "big-integer":
+      case "integer":
+      case "single":
+      case "double": {
+        if (fieldInfo.codedValues) {
+          return SimpleFieldTypes.STRING;
+        }
+        switch (fieldInfo.layerField.valueType) {
+          case "name-or-title":
+          case "type-or-category":
+          case "description":
+          case "location-or-place-name":
+          case "ordered-or-ranked":
+          case "binary":
+            //case "date-and-time":
+            return SimpleFieldTypes.STRING;
+          default:
+            return SimpleFieldTypes.NUMBER;
+        }
+      }
+      case "string":
+        return SimpleFieldTypes.STRING;
+      case "date":
+        return SimpleFieldTypes.DATE;
+      case "timestamp-offset":
+        return SimpleFieldTypes.TIMESTAMP_OFFSET;
+      case "date-only":
+        return SimpleFieldTypes.DATE_ONLY;
+      case "time-only":
+        return SimpleFieldTypes.TIME_ONLY;
+      default:
+        return SimpleFieldTypes.STRING;
+    }
+  }
+  _getFieldValueTypeCamelCase(field) {
+    switch (field.layerField.valueType) {
+      case "count-or-amount":
+        return "countOrAmount";
+      case "percentage-or-ratio":
+        return "percentageOrRatio";
+      case "unique-identifier":
+        return "uniqueIdentifier";
+      case "name-or-title":
+        return "nameOrTitle";
+      case "type-or-category":
+        return "typeOrCategory";
+      case "location-or-place-name":
+        return "locationOrPlaceName";
+      case "ordered-or-ranked":
+        return "orderedOrRanked";
+      case "date-and-time":
+        return "dateAndTime";
+      default:
+        return field.layerField.valueType;
+    }
+  }
+  _getDisplayString(value) {
+    const { props } = this;
+    const { fieldInfo } = props;
+    switch (fieldInfo.simpleFieldType) {
+      case SimpleFieldTypes.DATE:
+        return this._getDateString(value);
+      case SimpleFieldTypes.TIMESTAMP_OFFSET:
+        return this._getTimestampOffsetString(value);
+      case SimpleFieldTypes.DATE_ONLY:
+        return this._getDateOnlyString(value);
+      case SimpleFieldTypes.TIME_ONLY:
+        return this._getTimeOnlyString(value);
+      case SimpleFieldTypes.NUMBER:
+        return this._getNumberString(value);
+      case SimpleFieldTypes.GUID:
+        return this._getGuidString(value);
+      default:
+        // string, oid, global-id
+        return `${value}`;
+    }
+  }
+  _getDateString(value) {
+    const { modules, view } = this.props;
+    if (view && view.timeZone === "unknown") {
+      return modules.intl.formatDate(value, {
+        ...modules.intl.convertDateFormatToIntlOptions("short-date-short-time"),
+        timeZone: "utc",
+        timeZoneName: "shortOffset"
+      });
+    }
+    else {
+      // known issues with formatting it-CH
+      return modules.intl.formatDate(value, {
+        ...modules.intl.convertDateFormatToIntlOptions("short-date-short-time"),
+        timeZone: view?.timeZone || "system"
+      });
+    }
+  }
+  _getTimestampOffsetString(value) {
+    /*
+    const timestamp = "2023-03-19T16:00:00.123-01:00";
+    console.log("timestamp", timestamp);
+    console.log(
+      "local Time",
+      intl.formatTimestamp(timestamp, intl.convertDateFormatToIntlOptions("short-date-short-time"))
+    );
+    console.log(
+      "mapView Time (except unknown)",
+      intl.formatTimestamp(timestamp, {
+        ...intl.convertDateFormatToIntlOptions("short-date-short-time"),
+        timeZone: view.timeZone,
+      })
+    );
+    console.log(
+      "UTC Time (mapView time unknown)",
+      intl.formatTimestamp(timestamp, {
+        ...intl.convertDateFormatToIntlOptions("short-date-short-time"),
+        timeZone: "utc",
+        timeZoneName: "shortOffset"
+      })
+    );
+    console.log(
+      "Raw",
+      intl.formatTimestamp(timestamp, {
+        ...intl.convertDateFormatToIntlOptions("short-date-short-time"),
+        timeZoneName: "shortOffset"
+      })
+    );
+    */
+    const { modules, view } = this.props;
+    if (typeof value === "string") {
+      // raw value from layer
+      if (view && view.timeZone === "unknown") {
+        return modules.intl.formatTimestamp(value, {
+          ...modules.intl.convertDateFormatToIntlOptions("short-date-short-time"),
+          timeZone: "utc",
+          timeZoneName: "shortOffset"
+        });
+      }
+      else {
+        return modules.intl.formatTimestamp(value, {
+          ...modules.intl.convertDateFormatToIntlOptions("short-date-short-time"),
+          timeZone: view?.timeZone || "system"
+        });
+      }
+    }
+    else {
+      // e.g. UNIX timestamp from statistics call
+      return this._getDateString(value);
+    }
+  }
+  _getDateOnlyString(value) {
+    const { props } = this;
+    const { modules } = props;
+    return modules.intl.formatDateOnly(value, modules.intl.convertDateFormatToIntlOptions("short-date"));
+  }
+  _getTimeOnlyString(value) {
+    const { props } = this;
+    const { modules } = props;
+    if (typeof value === "string") {
+      return modules.intl.formatTimeOnly(value, modules.intl.convertDateFormatToIntlOptions("short-date-long-time"));
+    }
+    else {
+      // UNIX timestamp
+      return modules.intl.formatDate(value, {
+        ...modules.intl.convertDateFormatToIntlOptions("long-time"),
+        timeZone: "utc"
+      });
+    }
+  }
+  _getGuidString(value) {
+    return value.startsWith("{") ? value : `{${value}}`;
+  }
+  _getNumberString(value) {
+    return this.props.modules.intl.formatNumber(value);
+  }
+  _printNumValue(value) {
+    return isDefined(value) ? this._getNumberString(Math.round(value * 100) / 100) : `--`;
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get _hostElement() { return this; }
+  static get style() { return fieldInfoScss; }
+}, [1, "arcgis-field-info", {
+    "view": [16],
+    "layer": [16],
+    "fieldName": [1, "field-name"],
+    "hideStatistics": [4, "hide-statistics"],
+    "oneFeatureResponse": [32],
+    "oneFeatureResponseStatus": [32],
+    "statistics": [32],
+    "statisticsStatus": [32],
+    "uniqueValues": [32],
+    "uniqueValuesStatus": [32],
+    "_lang": [32],
+    "_t9nLocale": [32],
+    "_t9nStrings": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["arcgis-field-info"];
+  components.forEach(tagName => { switch (tagName) {
+    case "arcgis-field-info":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ArcgisFieldInfo);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { ArcgisFieldInfo as A, C, F, U, defineCustomElement as d };