@arcgis/common-components 4.29.0-beta.47 → 4.29.0-beta.49

package/dist/cjs/arcgis-field-info.cjs.entry.js

@@ -2,35 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ab5f2576.js');
-const index$2 = require('./index-2e4fbd31.js');
-const index$1 = require('./index-f8bf4df6.js');
+const index = require('./index-e0422bc8.js');
+const index$1 = require('./index-5ec7f592.js');
 
 var Status;
 (function (Status) {
-  Status["MISSING"] = "missing";
-  Status["IN_PROGRESS"] = "inProgress";
-  Status["SUCCESS"] = "success";
-  Status["FAILED"] = "failed";
+    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["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;
+    return value !== undefined && value !== null;
 }
 /**
  * Returns the URL used for queries.
@@ -38,10 +37,10 @@ function isDefined(value) {
  * @param value - value to check
  */
 function getQueryURL(layer) {
-  if (layer.type === "scene") {
-    return layer.associatedLayer?.url;
-  }
-  return layer.url;
+    if (layer.type === "scene") {
+        return layer.associatedLayer?.url;
+    }
+    return layer.url;
 }
 
 /**
@@ -49,231 +48,230 @@ function getQueryURL(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;
+    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/iu.test(fieldName)) {
+            // e.g. "Raster.ServicePixelValue" | "Raster.ItemPixelValue" | "Raster.ServicePixelValue.Raw"
+            // layer.rasterFields reports them as type "string"
+            layerField.type = "double";
+        }
+        const featureFilterField = {
+            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;
-  }
+    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;
+    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");
     }
-    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");
-  }
+    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;
-  }
+    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
-        };
-      });
+    const { layer, modules } = props;
+    if (layer.type !== "feature") {
+        return;
     }
-    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}`;
-                  }
+    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
+            ({
+                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));
+                            }
+                        });
+                    }
                 }
-              });
-              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}`;
+                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 (!found) {
-              fieldDomains.push(modules.esriLang.clone(codedValue));
-            }
-          });
         }
-      });
+        if (!fieldDomains?.length && fieldDomain?.codedValues) {
+            fieldDomains = modules.esriLang.clone(fieldDomain.codedValues);
+        }
     }
-    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;
     }
-  }
-  else if (fieldDomain?.codedValues) {
-    // domains directly on the layer field
-    fieldDomains = field.domain.codedValues;
-  }
-  return fieldDomains?.length ? fieldDomains : null;
+    return fieldDomains?.length ? fieldDomains : null;
 }
 
 /**
@@ -281,66 +279,66 @@ function getCodedValues(fieldName, props) {
  * @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");
+    const { view, layer } = props;
+    if (layer.type === "imagery" || layer.type === "imagery-tile") {
+        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);
-      }
+    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 {
-      // get feature from service
-      return _queryOneFeature(props);
+        // 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);
+    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
@@ -348,673 +346,679 @@ async function _queryOneFeature(props) {
  * @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;
+    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");
-  }
+    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();
+    // 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.arcgisFieldInfoComplete = index.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 index$1.F(this, index.getAssetPath("./assets"));
-    const esriLang = await index$2.importCoreLang();
-    const esriConfig = await index$2.importConfig();
-    const intl = await index$2.importIntl();
-    const Query = await index$2.importRestSupportQuery();
-    const summaryStatistics = await index$2.importSmartMappingStatisticsSummaryStatistics();
-    const uniqueValues = await index$2.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 index$2.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";
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.arcgisFieldInfoComplete = index.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 index$1.F(this, index.getAssetPath("./assets"));
+        const esriLang = await index$1.importCoreLang();
+        const esriConfig = await index$1.importConfig();
+        const intl = await index$1.importIntl();
+        const Query = await index$1.importRestSupportQuery();
+        const summaryStatistics = await index$1.importSmartMappingStatisticsSummaryStatistics();
+        const uniqueValues = await index$1.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 index$1.importCoreReactiveUtils();
+            if (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(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 += 1) {
+                        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;
+            }
         }
-      });
     }
-    this.oneFeatureResponseStatus = Status.IN_PROGRESS;
-    try {
-      const result = await getOneFeature(this.props);
-      this.oneFeatureResponse = result;
-      this.oneFeatureResponseStatus = Status.SUCCESS;
+    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
     }
-    catch (error) {
-      this.oneFeatureResponseStatus = Status.FAILED;
+    disconnectedCallback() {
+        index$1.U(this);
     }
-    if (layer.type === "stream") {
-      this.uniqueValuesStatus = Status.FAILED;
-      this.statisticsStatus = Status.FAILED;
-      return;
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    //--------------------------------------------------------------------------
+    render() {
+        const { props } = this;
+        const { fieldInfo } = props;
+        if (!fieldInfo) {
+            return index.h(index.Fragment, null);
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "container" }, this.renderFieldType(), this.renderFieldAlias(), this.renderFieldDescription(), this.renderFieldValueType(), this.renderFieldSampleValue(), this.renderFieldFormat(), this.renderFieldStatistics())));
     }
-    if (hideStatistics) {
-      this.uniqueValuesStatus = Status.FAILED;
+    renderFieldType() {
+        const { _t9nStrings, props } = this;
+        const { fieldInfo } = props;
+        const fieldType = this._getFieldTypeLabel(fieldInfo.layerField.type);
+        return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldType), index.h("div", null, fieldType)));
     }
-    else {
-      this.uniqueValuesStatus = Status.IN_PROGRESS;
-      try {
-        const uniqueValues = await getUniqueValues(this.props);
-        this.uniqueValues = uniqueValues;
+    renderFieldAlias() {
+        const { _t9nStrings, props } = this;
+        const { fieldInfo } = props;
+        return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldAlias), index.h("div", null, fieldInfo.label)));
+    }
+    renderFieldDescription() {
+        const { _t9nStrings, props } = this;
+        const { layer } = props;
+        if (layer.type !== "feature") {
+            return index.h(index.Fragment, null);
+        }
+        const { fieldInfo } = props;
+        const description = fieldInfo.layerField.description;
+        return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldDescription), index.h("div", { class: {
+                missing: !description
+            } }, description || _t9nStrings.fieldDescriptionNotSet)));
+    }
+    renderFieldValueType() {
+        const { _t9nStrings, props } = this;
+        const { layer } = props;
+        if (layer.type !== "feature") {
+            return index.h(index.Fragment, null);
+        }
+        const { fieldInfo } = props;
+        const fieldValueType = this._getFieldValueTypeCamelCase(fieldInfo);
+        return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldValueType), index.h("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 index.h(index.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 index.h(index.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 (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldSampleValue), index.h("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 index.h(index.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 (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldDecimalPlaces), index.h("div", null, 
+                    // eslint-disable-next-line no-template-curly-in-string
+                    _t9nStrings.fieldNumDecimalPlaces.replace("${number}", num.toString()))));
+                }
+            }
+        }
+        return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldDecimalPlaces), index.h("div", { class: "missing" }, _t9nStrings.fieldDecimalPlacesNotAvailable)));
+    }
+    renderFieldStatistics() {
+        const { statisticsStatus, uniqueValuesStatus, hideStatistics, _t9nStrings, props } = this;
+        const { layer, fieldInfo } = props;
+        if (hideStatistics) {
+            this.arcgisFieldInfoComplete.emit();
+            return index.h(index.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 index.h(index.Fragment, null);
+        }
+        return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldStatistics), !statisticsStatus || statisticsStatus === Status.MISSING || statisticsStatus === Status.IN_PROGRESS ? (index.h("div", { key: "field-info-statistics-content", class: "missing" }, _t9nStrings.fieldStatisticsRetrieving)) : statisticsStatus === Status.FAILED && uniqueValuesStatus !== Status.SUCCESS ? (this.renderNoStatistics()) : (index.h("div", { key: "field-info-statistics-content", ref: () => this.arcgisFieldInfoComplete.emit() }, this.renderStatistics()))));
+    }
+    renderNoStatistics() {
+        const { _t9nStrings } = this;
+        return (index.h("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 index.h(index.Fragment, null);
+        }
+    }
+    renderNumberStatistics() {
+        const { statistics, _t9nStrings } = this;
+        if (!statistics) {
+            return this.renderNoStatistics();
+        }
+        const { statistics: statStrings } = _t9nStrings;
+        return (index.h("div", null, index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfValues), index.h("div", { class: "data" }, this._printNumValue(statistics.totalCount))), isDefined(statistics.sum) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.sumOfValues), index.h("div", { class: "data" }, this._printNumValue(statistics.sum)))) : null, isDefined(statistics.min) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.minimum), index.h("div", { class: "data" }, this._printNumValue(statistics.min)))) : null, isDefined(statistics.max) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.maximum), index.h("div", { class: "data" }, this._printNumValue(statistics.max)))) : null, isDefined(statistics.avg) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.average), index.h("div", { class: "data" }, this._printNumValue(statistics.avg)))) : null, isDefined(statistics.stddev) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.standardDeviation), index.h("div", { class: "data" }, this._printNumValue(statistics.stddev)))) : null, this.renderNullValues()));
+    }
+    renderStringStatistics() {
+        const { statistics, uniqueValuesStatus, _t9nStrings } = this;
+        const { statistics: statStrings } = _t9nStrings;
+        return (index.h("div", null, index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfValues), uniqueValuesStatus !== Status.SUCCESS ? (index.h("div", { class: "missing" }, "--")) : (index.h("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
+                ? // eslint-disable-next-line no-template-curly-in-string
+                    statStrings.timeSpanOptions.years.replace("${years}", years.toString())
+                : "";
+        timeSpan += years > 0 && (months > 0 || days > 0) ? ", " : "";
+        timeSpan +=
+            months === 1
+                ? statStrings.timeSpanOptions.month
+                : months > 1
+                    ? // eslint-disable-next-line no-template-curly-in-string
+                        statStrings.timeSpanOptions.months.replace("${months}", months.toString())
+                    : "";
+        timeSpan += months > 0 && days > 0 ? ", " : "";
+        timeSpan +=
+            days === 1
+                ? statStrings.timeSpanOptions.day
+                : days > 1
+                    ? // eslint-disable-next-line no-template-curly-in-string
+                        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 (index.h("div", null, index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfValues), index.h("div", { class: "data" }, this._printNumValue(statistics?.totalCount))), showStats && isDefined(statistics.min) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, isTimeOnly ? statStrings.minimumTime : statStrings.minimumDate), index.h("div", { class: "data" }, `${this._getDisplayString(statistics.min)}`))) : null, showStats && isDefined(statistics.max) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, isTimeOnly ? statStrings.maximumTime : statStrings.maximumDate), index.h("div", { class: "data" }, `${this._getDisplayString(statistics.max)}`))) : null, showStats && isDefined(statistics.avg) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, isTimeOnly ? statStrings.averageTime : statStrings.averageDate), index.h("div", { class: "data" }, `${this._getDisplayString(statistics.avg)}`))) : null, showStats && !isTimeOnly && isDefined(statistics.min) && isDefined(statistics.max) && dateRange > 0 ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.timespan), index.h("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) {
-          this.uniqueValuesStatus = Status.SUCCESS;
+            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 (index.h("div", { class: "statistics-row" }, index.h("div", { class: "data" }, `${value}`), index.h("div", { class: `$"data" $"count"` }, this._printNumValue(info.count))));
+            });
+            if (!values.length) {
+                return index.h(index.Fragment, null);
+            }
+            return (index.h("div", null, index.h("div", { class: "statistics-row-top-values" }, index.h("div", null, infos.length > 10 ? statStrings.topTenValues : statStrings.topValues), index.h("div", null, statStrings.count)), values));
         }
         else {
-          this.uniqueValuesStatus = Status.FAILED;
+            return (index.h("div", null, index.h("div", { class: "statistics-row-top-values" }, index.h("div", null, statStrings.topValues), index.h("div", null, statStrings.count)), index.h("div", { class: "statistics-row" }, index.h("div", { class: "missing" }, uniqueValuesStatus === Status.FAILED
+                ? _t9nStrings.fieldUniqueValuesNotAvailable
+                : _t9nStrings.fieldSampleRetrieving))));
         }
-      }
-      catch (error) {
-        this.uniqueValuesStatus = Status.FAILED;
-      }
     }
-    if (hideStatistics) {
-      this.statisticsStatus = Status.FAILED;
+    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 += 1) {
+                const info = infos[i];
+                if (info.value === null) {
+                    count = info.count;
+                    break;
+                }
+            }
+        }
+        return (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfNulls), !isDefined(count) ? (index.h("div", { class: "missing" }, "--")) : (index.h("div", { class: "data" }, `${Number.parseInt(count).toLocaleString()}`))));
     }
-    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;
+    // --------------------------------------------------------------------------
+    //
+    //  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;
+                }
             }
-          }
-          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() {
-    index$1.U(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  //--------------------------------------------------------------------------
-  render() {
-    const { props } = this;
-    const { fieldInfo } = props;
-    if (!fieldInfo) {
-      return index.h(index.Fragment, null);
-    }
-    return (index.h(index.Host, null, index.h("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 (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldType), index.h("div", null, fieldType)));
-  }
-  renderFieldAlias() {
-    const { _t9nStrings, props } = this;
-    const { fieldInfo } = props;
-    return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldAlias), index.h("div", null, fieldInfo.label)));
-  }
-  renderFieldDescription() {
-    const { _t9nStrings, props } = this;
-    const { layer } = props;
-    if (layer.type !== "feature") {
-      return index.h(index.Fragment, null);
-    }
-    const { fieldInfo } = props;
-    const description = fieldInfo.layerField.description;
-    return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldDescription), index.h("div", { class: {
-        missing: !description
-      } }, description || _t9nStrings.fieldDescriptionNotSet)));
-  }
-  renderFieldValueType() {
-    const { _t9nStrings, props } = this;
-    const { layer } = props;
-    if (layer.type !== "feature") {
-      return index.h(index.Fragment, null);
-    }
-    const { fieldInfo } = props;
-    const fieldValueType = this._getFieldValueTypeCamelCase(fieldInfo);
-    return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldValueType), index.h("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 index.h(index.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 index.h(index.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 (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldSampleValue), index.h("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 index.h(index.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 (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldDecimalPlaces), index.h("div", null, _t9nStrings.fieldNumDecimalPlaces.replace("${number}", num.toString()))));
-        }
-      }
-    }
-    return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldDecimalPlaces), index.h("div", { class: "missing" }, _t9nStrings.fieldDecimalPlacesNotAvailable)));
-  }
-  renderFieldStatistics() {
-    const { statisticsStatus, uniqueValuesStatus, hideStatistics, _t9nStrings, props } = this;
-    const { layer, fieldInfo } = props;
-    if (hideStatistics) {
-      this.arcgisFieldInfoComplete.emit();
-      return index.h(index.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 index.h(index.Fragment, null);
-    }
-    return (index.h("div", { class: "section" }, index.h("div", { class: "title" }, _t9nStrings.fieldStatistics), !statisticsStatus || statisticsStatus === Status.MISSING || statisticsStatus === Status.IN_PROGRESS ? (index.h("div", { key: "field-info-statistics-content", class: "missing" }, _t9nStrings.fieldStatisticsRetrieving)) : statisticsStatus === Status.FAILED && uniqueValuesStatus !== Status.SUCCESS ? (this.renderNoStatistics()) : (index.h("div", { key: "field-info-statistics-content", ref: () => this.arcgisFieldInfoComplete.emit() }, this.renderStatistics()))));
-  }
-  renderNoStatistics() {
-    const { _t9nStrings } = this;
-    return (index.h("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 index.h(index.Fragment, null);
-    }
-  }
-  renderNumberStatistics() {
-    const { statistics, _t9nStrings } = this;
-    if (!statistics) {
-      return this.renderNoStatistics();
-    }
-    const { statistics: statStrings } = _t9nStrings;
-    return (index.h("div", null, index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfValues), index.h("div", { class: "data" }, this._printNumValue(statistics.totalCount))), isDefined(statistics.sum) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.sumOfValues), index.h("div", { class: "data" }, this._printNumValue(statistics.sum)))) : null, isDefined(statistics.min) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.minimum), index.h("div", { class: "data" }, this._printNumValue(statistics.min)))) : null, isDefined(statistics.max) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.maximum), index.h("div", { class: "data" }, this._printNumValue(statistics.max)))) : null, isDefined(statistics.avg) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.average), index.h("div", { class: "data" }, this._printNumValue(statistics.avg)))) : null, isDefined(statistics.stddev) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.standardDeviation), index.h("div", { class: "data" }, this._printNumValue(statistics.stddev)))) : null, this.renderNullValues()));
-  }
-  renderStringStatistics() {
-    const { statistics, uniqueValuesStatus, _t9nStrings } = this;
-    const { statistics: statStrings } = _t9nStrings;
-    return (index.h("div", null, index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfValues), uniqueValuesStatus !== Status.SUCCESS ? (index.h("div", { class: "missing" }, "--")) : (index.h("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 (index.h("div", null, index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfValues), index.h("div", { class: "data" }, this._printNumValue(statistics?.totalCount))), showStats && isDefined(statistics.min) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, isTimeOnly ? statStrings.minimumTime : statStrings.minimumDate), index.h("div", { class: "data" }, `${this._getDisplayString(statistics.min)}`))) : null, showStats && isDefined(statistics.max) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, isTimeOnly ? statStrings.maximumTime : statStrings.maximumDate), index.h("div", { class: "data" }, `${this._getDisplayString(statistics.max)}`))) : null, showStats && isDefined(statistics.avg) ? (index.h("div", { class: "statistics-row" }, index.h("div", null, isTimeOnly ? statStrings.averageTime : statStrings.averageDate), index.h("div", { class: "data" }, `${this._getDisplayString(statistics.avg)}`))) : null, showStats && !isTimeOnly && isDefined(statistics.min) && isDefined(statistics.max) && dateRange > 0 ? (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.timespan), index.h("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;
+            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 {
-          value = this._getDisplayString(value);
+            // e.g. UNIX timestamp from statistics call
+            return this._getDateString(value);
         }
-        return (index.h("div", { class: "statistics-row" }, index.h("div", { class: "data" }, `${value}`), index.h("div", { class: `$"data" $"count"` }, this._printNumValue(info.count))));
-      });
-      if (!values.length) {
-        return index.h(index.Fragment, null);
-      }
-      return (index.h("div", null, index.h("div", { class: "statistics-row-top-values" }, index.h("div", null, infos.length > 10 ? statStrings.topTenValues : statStrings.topValues), index.h("div", null, statStrings.count)), values));
     }
-    else {
-      return (index.h("div", null, index.h("div", { class: "statistics-row-top-values" }, index.h("div", null, statStrings.topValues), index.h("div", null, statStrings.count)), index.h("div", { class: "statistics-row" }, index.h("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 (index.h("div", { class: "statistics-row" }, index.h("div", null, statStrings.numberOfNulls), !isDefined(count) ? (index.h("div", { class: "missing" }, "--")) : (index.h("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"
-      });
+    _getDateOnlyString(value) {
+        const { props } = this;
+        const { modules } = props;
+        return modules.intl.formatDateOnly(value, modules.intl.convertDateFormatToIntlOptions("short-date"));
     }
-    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"
-        });
-      }
+    _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"
+            });
+        }
     }
-    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"));
+    _getGuidString(value) {
+        return value.startsWith("{") ? value : `{${value}}`;
     }
-    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 index.getElement(this); }
+    _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 index.getElement(this); }
 };
 ArcgisFieldInfo.style = fieldInfoScss;