@esri/solutions-components 0.6.8 → 0.6.10

package/dist/components/esri-loader.js

@@ -9,7 +9,7 @@ var esriLoader = createCommonjsModule(function (module, exports) {
 (function (global, factory) {
 	factory(exports) ;
 }(commonjsGlobal, (function (exports) {
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 var isBrowser = typeof window !== 'undefined';
 // allow consuming libraries to provide their own Promise implementations
@@ -17,9 +17,9 @@ var utils = {
     Promise: isBrowser ? window['Promise'] : undefined
 };
 
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
-var DEFAULT_VERSION = '4.22';
+var DEFAULT_VERSION = '4.25';
 var NEXT = 'next';
 function parseVersion(version) {
     if (version.toLowerCase() === NEXT) {
@@ -34,16 +34,16 @@ function parseVersion(version) {
 /**
  * Get the CDN url for a given version
  *
- * @param version Ex: '4.22' or '3.39'. Defaults to the latest 4.x version.
+ * @param version Ex: '4.25' or '3.42'. Defaults to the latest 4.x version.
  */
 function getCdnUrl(version) {
     if (version === void 0) { version = DEFAULT_VERSION; }
-    return "https://js.arcgis.com/" + version + "/";
+    return "https://js.arcgis.com/".concat(version, "/");
 }
 /**
  * Get the CDN url for a the CSS for a given version and/or theme
  *
- * @param version Ex: '4.22', '3.39', or 'next'. Defaults to the latest 4.x version.
+ * @param version Ex: '4.25', '3.42', or 'next'. Defaults to the latest 4.x version.
  */
 function getCdnCssUrl(version) {
     if (version === void 0) { version = DEFAULT_VERSION; }
@@ -52,15 +52,15 @@ function getCdnCssUrl(version) {
     if (parsedVersion !== NEXT && parsedVersion.major === 3) {
         // NOTE: at 3.11 the CSS moved from the /js folder to the root
         var path = parsedVersion.minor <= 10 ? 'js/' : '';
-        return "" + baseUrl + path + "esri/css/esri.css";
+        return "".concat(baseUrl).concat(path, "esri/css/esri.css");
     }
     else {
         // assume 4.x
-        return baseUrl + "esri/themes/light/main.css";
+        return "".concat(baseUrl, "esri/themes/light/main.css");
     }
 }
 
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 function createStylesheetLink(href) {
     var link = document.createElement('link');
@@ -81,7 +81,7 @@ function insertLink(link, before) {
 }
 // check if the css url has been injected or added manually
 function getCss(url) {
-    return document.querySelector("link[href*=\"" + url + "\"]");
+    return document.querySelector("link[href*=\"".concat(url, "\"]"));
 }
 function getCssUrl(urlOrVersion) {
     return !urlOrVersion || parseVersion(urlOrVersion)
@@ -102,7 +102,7 @@ function loadCss(urlOrVersion, before) {
     return link;
 }
 
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 var defaultOptions = {};
 function createScript(url) {
@@ -136,7 +136,7 @@ function handleScriptLoad(script, callback, errback) {
 function handleScriptError(script, callback) {
     var onScriptError = function (e) {
         // reject the promise and remove this event listener
-        callback(e.error || new Error("There was an error attempting to load " + script.src));
+        callback(e.error || new Error("There was an error attempting to load ".concat(script.src)));
         // remove this event listener
         script.removeEventListener('error', onScriptError, false);
     };
@@ -184,7 +184,7 @@ function loadScript(options) {
             var src = script.getAttribute('src');
             if (src !== url) {
                 // potentially trying to load a different version of the API
-                reject(new Error("The ArcGIS API for JavaScript is already loaded (" + src + ")."));
+                reject(new Error("The ArcGIS API for JavaScript is already loaded (".concat(src, ").")));
             }
             else {
                 if (isLoaded()) {
@@ -228,7 +228,7 @@ function loadScript(options) {
     });
 }
 
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 // wrap Dojo's require() in a promise
 function requireModules(modules) {
@@ -271,7 +271,7 @@ function loadModules(modules, loadScriptOptions) {
 }
 
 /*
-  Copyright (c) 2017 Esri
+  Copyright (c) 2022 Esri
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

package/dist/components/filter.js

@@ -725,7 +725,7 @@ function forIn(object, iteratee) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const filter = (data, value) => {
   const escapedValue = escapeRegExp(value);

package/dist/components/filter2.js

@@ -17,7 +17,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   container: "container",

package/dist/components/floating-ui.js

@@ -1605,7 +1605,7 @@ function offsetParentPolyfill(element) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 (function setUpFloatingUiForShadowDomPositioning() {
   if (Build.isBrowser) {

package/dist/components/focusTrapComponent.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { j as tabbable, k as focusable, l as isTabbable, m as getTabIndex, n as isFocusable, f as focusElement, o as tabbableOptions } from './dom.js';
+import { k as tabbable, l as focusable, m as isTabbable, n as getTabIndex, o as isFocusable, f as focusElement, p as tabbableOptions } from './dom.js';
 
 /*!
 * focus-trap 7.5.2
@@ -924,7 +924,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * This module allows custom configuration for components.
@@ -935,7 +935,7 @@ const focusTrapStack = customConfig?.focusTrapStack || [];
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * Helper to set up the FocusTrap component.
@@ -958,7 +958,7 @@ function connectFocusTrap(component, options) {
       return false;
     },
     ...options?.focusTrapOptions,
-    // the following options are not overrideable
+    // the following options are not overridable
     document: el.ownerDocument,
     tabbableOptions,
     trapStack: focusTrapStack,

package/dist/components/form.js

@@ -37,7 +37,7 @@ import { h } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * Exported for testing purposes.

package/dist/components/graph.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * Calculate slope of the tangents
@@ -47,8 +47,8 @@ function slopeSingle(p0, p1, m) {
  * Given two points and their tangent slopes,
  * calculate the bezier handle coordinates and return draw command.
  *
- * Translates Hermite Spline to Beziér curve:
- * stackoverflow.com/questions/42574940/
+ * Translates Hermite Spline to Bézier curve:
+ * https://stackoverflow.com/questions/42574940/
  *
  * @param p0
  * @param p1
@@ -146,11 +146,6 @@ const Graph = /*@__PURE__*/ proxyCustomElement(class Graph extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.graphId = `calcite-graph-${guid()}`;
     this.resizeObserver = createObserver("resize", () => forceUpdate(this));
     this.data = [];

package/dist/components/guid.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 function gen(counts) {
   return counts

package/dist/components/handle.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   handle: "handle",

package/dist/components/icon.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   icon: "icon",
@@ -20,7 +20,7 @@ const CSS = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * Icon data cache.

package/dist/components/index.js

@@ -9,7 +9,7 @@ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stenc
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * Emits when the mode is dynamically toggled between light and dark on <body> or in OS preferences.
@@ -40,7 +40,7 @@ function initModeChangeEvent() {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * This file is imported in Stencil's `globalScript` config option.

package/dist/components/info-card2.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.edit-btn{z-index:999;position:absolute}.edit-btn-position{right:0.5rem;top:0.5rem}html[dir=\"rtl\"] .edit-btn-position{left:0}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.min-width-100{min-width:100px}";
 
 const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
   constructor() {
@@ -28,6 +28,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     this.mapView = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
+    this._count = "";
     this._editRecordOpen = false;
     this._translations = undefined;
   }
@@ -42,7 +43,8 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
   async graphicsWatchHandler() {
     var _a;
     if (this.graphics.length > 0) {
-      this._editEnabled = ((_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer).editingEnabled;
+      const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
+      this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
       this._features.open({
         features: this.graphics
       });
@@ -104,7 +106,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
     const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
     const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
-    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: "padding-1-2 display-flex " + editButtonClass, slot: "footer" }, h("calcite-button", { appearance: "outline", iconStart: "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} display-flex padding-1-2 button-container`, slot: "footer" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))), h("div", { class: `${editButtonClass} edit-btn edit-btn-position` }, h("calcite-button", { appearance: "outline", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord() }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -185,6 +187,37 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
       this._alertOpen = true;
     }
   }
+  /**
+   * Go to the previous feature in the features widget
+   *
+   * @returns void
+   */
+  _back() {
+    this._features.previous();
+    this._count = this._getCount();
+  }
+  /**
+   * Go to the next feature in the features widget
+   *
+   * @returns void
+   */
+  _next() {
+    this._features.next();
+    this._count = this._getCount();
+  }
+  /**
+   * Get the current index of total string
+   *
+   * @returns the index of total string
+   */
+  _getCount() {
+    var _a, _b, _c;
+    const index = (((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel.selectedFeatureIndex) + 1).toString();
+    const total = (_c = (_b = this._features) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.length.toString();
+    return this._translations.indexOfTotal
+      .replace("{{index}}", index)
+      .replace("{{total}}", total);
+  }
   /**
    * Fetches the component's translations
    *
@@ -207,6 +240,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     "mapView": [16],
     "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
     "_alertOpen": [32],
+    "_count": [32],
     "_editRecordOpen": [32],
     "_translations": [32],
     "getSelectedFeature": [64]

package/dist/components/input-message.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/components/input-number.js

@@ -20,7 +20,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   loader: "loader",

package/dist/components/input-text.js

@@ -19,7 +19,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   loader: "loader",

package/dist/components/input.js

@@ -20,7 +20,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   loader: "loader",

package/dist/components/interactive.js

@@ -8,7 +8,7 @@ import { Build } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 function getUserAgentData() {
   return navigator.userAgentData;
@@ -26,7 +26,7 @@ function getUserAgentString() {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
 const isFirefox = /firefox/i.test(getUserAgentString());

package/dist/components/key.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 function isActivationKey(key) {
   return key === "Enter" || key === " ";

package/dist/components/label.js

@@ -8,7 +8,7 @@ import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from '
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 /**
  * Exported for testing purposes only
@@ -17,7 +17,7 @@ import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from '
  */
 const labelClickEvent = "calciteInternalLabelClick";
 const labelConnectedEvent = "calciteInternalLabelConnected";
-const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
+const labelDisconnectedEvent = "calciteInternalLabelDisconnected";
 const labelTagName = "calcite-label";
 const onLabelClickMap = new WeakMap();
 const onLabelConnectedMap = new WeakMap();

package/dist/components/label2.js

@@ -9,7 +9,7 @@ import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './label.j
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   container: "container",

package/dist/components/layer-table2.js

@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.height-51{height:51px}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}";
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
   constructor() {
@@ -59,6 +59,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
     };
+    this.mapInfo = undefined;
     this.mapView = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
@@ -166,7 +167,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const alertActionClass = this._alertShowAction ? "" : "display-none";
-    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
+    const total = this._allIds.length.toString();
+    const selected = this._selectedIndexes.length.toString();
+    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
+      .replace("{{total}}", total)
+      .replace("{{selected}}", selected))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -207,7 +212,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    *
    * @returns void
    */
-  async _getTable(node) {
+  async _getTable(node, columnTemplates) {
     if (this._layer) {
       await this._layer.when(async () => {
         this._table = new this.FeatureTable({
@@ -220,6 +225,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             header: false,
             menu: false
           },
+          tableTemplate: {
+            columnTemplates
+          },
           container: node
         });
         await this._table.when(async () => {
@@ -236,8 +244,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             this.featureSelectionChange.emit(this._selectedIndexes);
           });
           this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-            var _a, _b;
-            this._sortActive = sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc";
+            var _a, _b, _c, _d;
+            this._sortActive = (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
+              ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField;
           });
         });
       });
@@ -253,7 +262,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
       this._clearSelection();
       this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
+      const columnTemplates = this._getColumnTemplates(this._layer.id);
       this._table.layer = this._layer;
+      this._table.tableTemplate.columnTemplates = columnTemplates;
       this._editEnabled = this._layer.editingEnabled;
       this._table.view = this.mapView;
       this._table.editingEnabled = this._editEnabled;
@@ -366,14 +377,15 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   _switchSelected() {
     const currentIndexes = [...this._selectedIndexes];
-    this._selectedIndexes = this._allIds.reduce((prev, _cur, i) => {
-      if (currentIndexes.indexOf(i) < 0) {
-        prev.push(i);
+    this._table.highlightIds.removeAll();
+    const ids = this._allIds.reduce((prev, _cur) => {
+      if (currentIndexes.indexOf(_cur) < 0) {
+        prev.push(_cur);
       }
       return prev;
     }, []);
-    this._table.highlightIds.removeAll();
-    this._table.highlightIds.addMany(this._selectedIndexes);
+    this._table.highlightIds.addMany(ids);
+    this._selectedIndexes = ids;
   }
   /**
    * Export all selected rows as CSV
@@ -457,10 +469,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     const id = evt.detail[0];
     if (id !== this._layer.id || this._allIds.length === 0) {
       this._fetchingData = true;
+      const columnTemplates = this._getColumnTemplates(id);
       this._layer = await getLayer(this.mapView, id);
       this._allIds = await queryAllIds(this._layer);
       if (!this._table) {
-        await this._getTable(this._tableNode);
+        await this._getTable(this._tableNode, columnTemplates);
+      }
+      else if (columnTemplates) {
+        this._table.tableTemplate.columnTemplates = columnTemplates;
       }
       await this._table.when(() => {
         this._table.highlightIds.removeAll();
@@ -473,6 +489,24 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     await this._sortTable();
     this._fetchingData = false;
   }
+  /**
+   * Get any columnt templates for the current map
+   *
+   * @param id item ID of the current map
+   *
+   * @returns a list of column templates if they exist
+   */
+  _getColumnTemplates(id) {
+    var _a;
+    let layerInfo;
+    (_a = this.mapInfo.layerInfos) === null || _a === void 0 ? void 0 : _a.some(li => {
+      if (li.id === id) {
+        layerInfo = li;
+        return true;
+      }
+    });
+    return layerInfo === null || layerInfo === void 0 ? void 0 : layerInfo.columnTemplates;
+  }
   /**
    * Fetches the component's translations
    *
@@ -491,6 +525,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   }; }
   static get style() { return layerTableCss; }
 }, [0, "layer-table", {
+    "mapInfo": [16],
     "mapView": [16],
     "showNewestFirst": [4, "show-newest-first"],
     "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],