@arcgis/common-components 4.29.0-beta.5 → 4.29.0-beta.50

package/dist/components/field-info.js

@@ -0,0 +1,1108 @@
+import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h as h$1, Fragment, Host } from '@stencil/core/internal/client';
+
+const amd = "define" in window && typeof window.define === "function" && "amd" in window.define;
+function requireModule(modulePath) {
+    return new Promise((resolve) => window.require([modulePath], (moduleDefault) => {
+        resolve(moduleDefault);
+    }));
+}
+async function importRestSupportQuery() {
+    if (amd) {
+        return requireModule("esri/rest/support/Query");
+    }
+    const module = await import('@arcgis/core/rest/support/Query.js');
+    return module.default;
+}
+async function importConfig() {
+    if (amd) {
+        return requireModule("esri/config");
+    }
+    const module = await import('@arcgis/core/config.js');
+    return module.default;
+}
+async function importCoreLang() {
+    if (amd) {
+        return requireModule("esri/core/lang");
+    }
+    const module = await import('@arcgis/core/core/lang.js');
+    return module;
+}
+async function importCoreReactiveUtils() {
+    if (amd) {
+        return requireModule("esri/core/reactiveUtils");
+    }
+    const module = await import('@arcgis/core/core/reactiveUtils.js');
+    return module;
+}
+async function importIntl() {
+    if (amd) {
+        return requireModule("esri/intl");
+    }
+    const module = await import('@arcgis/core/intl.js');
+    return module;
+}
+async function importSmartMappingStatisticsSummaryStatistics() {
+    if (amd) {
+        return requireModule("esri/smartMapping/statistics/summaryStatistics");
+    }
+    const module = await import('@arcgis/core/smartMapping/statistics/summaryStatistics.js');
+    return module.default;
+}
+async function importSmartMappingStatisticsUniqueValues() {
+    if (amd) {
+        return requireModule("esri/smartMapping/statistics/uniqueValues");
+    }
+    const module = await import('@arcgis/core/smartMapping/statistics/uniqueValues.js');
+    return module.default;
+}
+
+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/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 {
+        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 {
+        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
+            ({
+                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();
+            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 {
+            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 {
+                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, 
+                    // eslint-disable-next-line no-template-curly-in-string
+                    _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
+                ? // 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 (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 += 1) {
+                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" }, `${Number.parseInt(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, importIntl as i };