@esri/solutions-components 0.6.8 → 0.6.10

package/dist/cjs/{utils-cd14113f.js → utils-09191c93.js}

@@ -8,7 +8,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
  */
 const CSS = {
   container: "container",
@@ -54,7 +54,7 @@ const ICONS = {
 /*!
  * 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 listSelector = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";

package/dist/cjs/{utils-acfeed9d.js → utils-651e6663.js}

@@ -6,13 +6,13 @@
 'use strict';
 
 const index = require('./index-0e50040c.js');
-const date = require('./date-cec32b0e.js');
-const locale = require('./locale-c63a1b57.js');
+const date = require('./date-0fec6f6b.js');
+const locale = require('./locale-79c3d30e.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
  */
 /**
  * CLDR cache.

package/dist/cjs/{utils-ae9bdd59.js → utils-852fe124.js}

@@ -5,12 +5,12 @@
  */
 'use strict';
 
-const dom = require('./dom-c1807fc1.js');
+const dom = require('./dom-456f9f13.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 ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -22,7 +22,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
  */
 function getAncestors(element) {
   const parent = element.parentElement?.closest(ComboboxChildSelector);

package/dist/cjs/{utils-bae432a9.js → utils-a194dc3d.js}

@@ -8,7 +8,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
  */
 const hexChar = /^[0-9A-F]$/i;
 const shorthandHex = /^#[0-9A-F]{3}$/i;
@@ -79,7 +79,10 @@ function hexToRGB(hex, hasAlpha = false) {
     return null;
   }
   hex = hex.replace("#", "");
-  let r, g, b, a;
+  let r;
+  let g;
+  let b;
+  let a;
   const isShorthand = hex.length === 3 || hex.length === 4;
   if (isShorthand) {
     const [first, second, third, fourth] = hex.split("");

package/dist/cjs/{vi-1c9fe343.js → vi-60ed6e30.js}

@@ -5,21 +5,21 @@
  */
 'use strict';
 
-const calciteInputTimePicker_entry = require('./calcite-input-time-picker-b99baf7b.js');
+const calciteInputTimePicker_entry = require('./calcite-input-time-picker-4efcd55d.js');
 require('./index-0e50040c.js');
-require('./form-9d8ebf06.js');
-require('./dom-c1807fc1.js');
-require('./guid-3abe3cc6.js');
-require('./resources-77713c2e.js');
-require('./interactive-2fe0f43a.js');
-require('./key-b8b55ea3.js');
-require('./label-6e33e971.js');
-require('./loadable-bac9cdd6.js');
-require('./locale-c63a1b57.js');
-require('./observers-f5fa975b.js');
-require('./focusTrapComponent-a22fc6a8.js');
-require('./time-5e450ec8.js');
-require('./t9n-1d032c30.js');
+require('./form-7c6054c3.js');
+require('./dom-456f9f13.js');
+require('./guid-d1123d5e.js');
+require('./resources-993f6faf.js');
+require('./interactive-48299817.js');
+require('./key-8de93212.js');
+require('./label-166e2d81.js');
+require('./loadable-6925d840.js');
+require('./locale-79c3d30e.js');
+require('./observers-9912f013.js');
+require('./focusTrapComponent-d8412ddc.js');
+require('./time-24d40c60.js');
+require('./t9n-62d807df.js');
 
 // Vietnamese [vi]
 var locale = {

package/dist/cjs/{zh-cn-28fa1fe1.js → zh-cn-a2f6f51d.js}

@@ -5,21 +5,21 @@
  */
 'use strict';
 
-const calciteInputTimePicker_entry = require('./calcite-input-time-picker-b99baf7b.js');
+const calciteInputTimePicker_entry = require('./calcite-input-time-picker-4efcd55d.js');
 require('./index-0e50040c.js');
-require('./form-9d8ebf06.js');
-require('./dom-c1807fc1.js');
-require('./guid-3abe3cc6.js');
-require('./resources-77713c2e.js');
-require('./interactive-2fe0f43a.js');
-require('./key-b8b55ea3.js');
-require('./label-6e33e971.js');
-require('./loadable-bac9cdd6.js');
-require('./locale-c63a1b57.js');
-require('./observers-f5fa975b.js');
-require('./focusTrapComponent-a22fc6a8.js');
-require('./time-5e450ec8.js');
-require('./t9n-1d032c30.js');
+require('./form-7c6054c3.js');
+require('./dom-456f9f13.js');
+require('./guid-d1123d5e.js');
+require('./resources-993f6faf.js');
+require('./interactive-48299817.js');
+require('./key-8de93212.js');
+require('./label-166e2d81.js');
+require('./loadable-6925d840.js');
+require('./locale-79c3d30e.js');
+require('./observers-9912f013.js');
+require('./focusTrapComponent-d8412ddc.js');
+require('./time-24d40c60.js');
+require('./t9n-62d807df.js');
 
 // Chinese (China) [zh-cn]
 var locale = {

package/dist/cjs/{zh-hk-5abf8eb5.js → zh-hk-e14e2fc0.js}

@@ -5,21 +5,21 @@
  */
 'use strict';
 
-const calciteInputTimePicker_entry = require('./calcite-input-time-picker-b99baf7b.js');
+const calciteInputTimePicker_entry = require('./calcite-input-time-picker-4efcd55d.js');
 require('./index-0e50040c.js');
-require('./form-9d8ebf06.js');
-require('./dom-c1807fc1.js');
-require('./guid-3abe3cc6.js');
-require('./resources-77713c2e.js');
-require('./interactive-2fe0f43a.js');
-require('./key-b8b55ea3.js');
-require('./label-6e33e971.js');
-require('./loadable-bac9cdd6.js');
-require('./locale-c63a1b57.js');
-require('./observers-f5fa975b.js');
-require('./focusTrapComponent-a22fc6a8.js');
-require('./time-5e450ec8.js');
-require('./t9n-1d032c30.js');
+require('./form-7c6054c3.js');
+require('./dom-456f9f13.js');
+require('./guid-d1123d5e.js');
+require('./resources-993f6faf.js');
+require('./interactive-48299817.js');
+require('./key-8de93212.js');
+require('./label-166e2d81.js');
+require('./loadable-6925d840.js');
+require('./locale-79c3d30e.js');
+require('./observers-9912f013.js');
+require('./focusTrapComponent-d8412ddc.js');
+require('./time-24d40c60.js');
+require('./t9n-62d807df.js');
 
 // Chinese (Hong Kong) [zh-hk]
 var locale = {

package/dist/cjs/{zh-tw-07500357.js → zh-tw-7ea0d7e4.js}

@@ -5,21 +5,21 @@
  */
 'use strict';
 
-const calciteInputTimePicker_entry = require('./calcite-input-time-picker-b99baf7b.js');
+const calciteInputTimePicker_entry = require('./calcite-input-time-picker-4efcd55d.js');
 require('./index-0e50040c.js');
-require('./form-9d8ebf06.js');
-require('./dom-c1807fc1.js');
-require('./guid-3abe3cc6.js');
-require('./resources-77713c2e.js');
-require('./interactive-2fe0f43a.js');
-require('./key-b8b55ea3.js');
-require('./label-6e33e971.js');
-require('./loadable-bac9cdd6.js');
-require('./locale-c63a1b57.js');
-require('./observers-f5fa975b.js');
-require('./focusTrapComponent-a22fc6a8.js');
-require('./time-5e450ec8.js');
-require('./t9n-1d032c30.js');
+require('./form-7c6054c3.js');
+require('./dom-456f9f13.js');
+require('./guid-d1123d5e.js');
+require('./resources-993f6faf.js');
+require('./interactive-48299817.js');
+require('./key-8de93212.js');
+require('./label-166e2d81.js');
+require('./loadable-6925d840.js');
+require('./locale-79c3d30e.js');
+require('./observers-9912f013.js');
+require('./focusTrapComponent-d8412ddc.js');
+require('./time-24d40c60.js');
+require('./t9n-62d807df.js');
 
 // Chinese (Taiwan) [zh-tw]
 var locale = {

package/dist/collection/collection-manifest.json

@@ -15,6 +15,7 @@
     "components/map-card/map-card.js",
     "components/map-draw-tools/map-draw-tools.js",
     "components/map-layer-picker/map-layer-picker.js",
+    "components/map-legend/map-legend.js",
     "components/map-picker/map-picker.js",
     "components/map-search/map-search.js",
     "components/map-select-tools/map-select-tools.js",

package/dist/collection/components/card-manager/card-manager.js

@@ -84,7 +84,7 @@ export class CardManager {
     var _a, _b;
     const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
     const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-    return (h(Host, null, h("div", { class: "border-rounded overflow-auto height-full" }, h("calcite-shell", { class: "position-relative padding-1 " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+    return (h(Host, null, h("div", { class: "border-rounded overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/crowdsource-manager/crowdsource-manager.css

@@ -93,13 +93,18 @@
 }
 
 .adjusted-height-50 {
-  height: calc(50% - 0.5rem);
+  height: calc(50% - 0.5rem - 25px);
 }
 
 .adjusted-height-100 {
-  height: calc(100% - 1rem);
+  height: calc(100% - 1rem - 50px);
 }
 
+.adjusted-height-100-50 {
+  height: calc(100% - 50px);
+}
+
+
 .display-none {
   display: none;
 }
@@ -116,3 +121,19 @@
 .display-grid {
   display: grid;
 }
+
+.height-49-px {
+  height: 49px;
+}
+
+.height-50-px {
+  height: 50px;
+}
+
+.padding-inline-end-75 {
+  padding-inline-end: 0.75rem;
+}
+
+.align-items-center {
+  align-items: center;
+}

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -24,12 +24,12 @@ import { ELayoutMode } from "../../utils/interfaces";
 export class CrowdsourceManager {
   constructor() {
     this.classicGrid = false;
-    this.showNewestFirst = false;
-    this.hideHeader = true;
+    this.showNewestFirst = true;
     this.hideMap = false;
     this.mapInfos = [];
     this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
+    this._expandPopup = false;
     this._translations = undefined;
     this._layoutMode = ELayoutMode.GRID;
     this._mapView = undefined;
@@ -37,11 +37,6 @@ export class CrowdsourceManager {
   }
   //--------------------------------------------------------------------------
   //
-  //  Properties (protected)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
@@ -65,7 +60,12 @@ export class CrowdsourceManager {
    * Listen for mapChanged event to be fired then store the new mapView so components will be updated
    */
   async mapChanged(evt) {
-    this._mapView = evt.detail;
+    const mapChange = evt.detail;
+    // close popup by default when the map changes otherwise other components that rely on the view don't work since it
+    // doesn't seem to fully load when it's not visible
+    this._expandPopup = false;
+    this._mapInfo = this._getMapInfo(mapChange.id);
+    this._mapView = mapChange.mapView;
     this._mapView.popupEnabled = false;
   }
   //--------------------------------------------------------------------------
@@ -85,7 +85,7 @@ export class CrowdsourceManager {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
+    return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -200,7 +200,7 @@ export class CrowdsourceManager {
    */
   _getMapAndCard(layoutMode, panelOpen, hideMap) {
     const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
+    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode(), this._getCardNode(layoutMode, hideMap)));
   }
   /**
    * Get the map node based for the current layout options
@@ -214,9 +214,27 @@ export class CrowdsourceManager {
   _getMapNode(layoutMode, hideMap) {
     const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
-    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
+    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
     return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
   }
+  /**
+   * Get the expand node for the popup information
+   *
+   * @returns the expand node
+   * @protected
+   */
+  _getPopupExpandNode() {
+    const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
+    return (h("div", { class: "height-49-px calcite-mode-dark" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { class: "padding-inline-end-75", icon: "information", scale: "s" }), h("div", null, this._translations.information)), h("calcite-action", { class: "height-49-px", icon: icon, onClick: () => this._togglePopup(), slot: "header-actions-end" }))));
+  }
+  /**
+   * Toggle the popup information
+   *
+   * @protected
+   */
+  _togglePopup() {
+    this._expandPopup = !this._expandPopup;
+  }
   /**
    * Get the card node based for the current layout options
    *
@@ -228,9 +246,9 @@ export class CrowdsourceManager {
    */
   _getCardNode(layoutMode, hideMap) {
     const cardManagerHeight = this.classicGrid && layoutMode === ELayoutMode.GRID ? "" :
-      layoutMode === ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
+      layoutMode === ELayoutMode.GRID && !this._expandPopup && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
     const cardManagerContainer = this.classicGrid && layoutMode === ELayoutMode.GRID ?
-      "width-full adjusted-height-100" : "width-50 height-full";
+      "width-full adjusted-height-100" : this._expandPopup ? "width-50 adjusted-height-100-50" : "width-50 height-full";
     return (h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }
   /**
@@ -251,7 +269,7 @@ export class CrowdsourceManager {
     const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -263,6 +281,22 @@ export class CrowdsourceManager {
   _toggleLayout() {
     this._panelOpen = !this._panelOpen;
   }
+  /**
+   * Get the current map info (configuration details) when maps change
+   *
+   * @returns IMapInfo for the provided id
+   * @protected
+   */
+  _getMapInfo(id) {
+    let mapInfo;
+    this.mapInfos.some(mi => {
+      if (mi.id === id) {
+        mapInfo = mi;
+        return true;
+      }
+    });
+    return mapInfo;
+  }
   /**
    * Fetches the component's translations
    *
@@ -320,24 +354,6 @@ export class CrowdsourceManager {
         },
         "attribute": "show-newest-first",
         "reflect": false,
-        "defaultValue": "false"
-      },
-      "hideHeader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: when true no header is displayed for the app"
-        },
-        "attribute": "hide-header",
-        "reflect": false,
         "defaultValue": "true"
       },
       "hideMap": {
@@ -423,6 +439,7 @@ export class CrowdsourceManager {
   }
   static get states() {
     return {
+      "_expandPopup": {},
       "_translations": {},
       "_layoutMode": {},
       "_mapView": {},

package/dist/collection/components/info-card/info-card.css

@@ -66,3 +66,30 @@ tr:nth-child(odd) {
   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;
+}

package/dist/collection/components/info-card/info-card.js

@@ -28,6 +28,7 @@ export class InfoCard {
     this.mapView = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
+    this._count = "";
     this._editRecordOpen = false;
     this._translations = undefined;
   }
@@ -42,7 +43,8 @@ export class InfoCard {
   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 @@ export class InfoCard {
     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 @@ export class InfoCard {
       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
    *
@@ -288,6 +321,7 @@ export class InfoCard {
   static get states() {
     return {
       "_alertOpen": {},
+      "_count": {},
       "_editRecordOpen": {},
       "_translations": {}
     };

package/dist/collection/components/layer-table/layer-table.css

@@ -45,3 +45,23 @@
 .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);
+}