@esri/solutions-components 0.8.11 → 0.8.13

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

@@ -78,6 +78,8 @@ export class CrowdsourceManager {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -184,9 +186,7 @@ export class CrowdsourceManager {
      * Renders the component.
      */
     render() {
-        const borderClass = this._isMobile && this._hideTable ? "border-width-0" :
-            this._isMobile ? "border-bottom-width-0" : "";
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: '528818cf99038897353a4390ccf60ed85b676f2e' }, h("calcite-shell", { key: '0389bc8f242c64983629840301b9da5cdb442673', class: "position-relative" }, h("calcite-panel", { key: 'bd0f33a38c6cc3cbd15e3adcbc76929682f6428e', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -356,12 +356,12 @@ export class CrowdsourceManager {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
-        const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
+        const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor,
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor,
-                '--calcite-color-text-3': this.popupHeaderHoverTextColor,
+                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
+                '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
                 '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
             } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
@@ -407,7 +407,7 @@ export class CrowdsourceManager {
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", 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)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", 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)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes
@@ -1137,6 +1137,40 @@ export class CrowdsourceManager {
                 },
                 "attribute": "zoom-to-scale",
                 "reflect": false
+            },
+            "sortField": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Field using which table will be sorted"
+                },
+                "attribute": "sort-field",
+                "reflect": false
+            },
+            "sortOrder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
+                },
+                "attribute": "sort-order",
+                "reflect": false
             }
         };
     }

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

@@ -127,7 +127,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: '197ae2c1b96231124830a044c5a3642107987c85' }, this._reportSubmitted && h("calcite-alert", { key: '2cbdbc22994787e0ac1c204d5043c6c0409503e8', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '88ae73773b51678409fa69e68931714b5fdd951a', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '4b0fa9ae2e597d4a44fe2624debe20b2bbeed037', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '108c6a3b06c3f9c52ff15e158d20a39422bb2ad8', slot: "title" }, this._translations.error), h("div", { key: 'c0e54e5665480a5cbe9e4f4b8a05e3c56c20d825', slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", { key: 'c3417032902e0fc8a6fc33909b2f2eb71ba72650' }, h("calcite-shell", { key: 'e5ac5faedf24bd22aa62f0d0f5a4925b2c5e06d4', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/deduct-calculator/deduct-calculator.js

@@ -41,7 +41,7 @@ export class DeductCalculator {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "label-display" }, h("calcite-label", { class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { class: "label-display" }, "Severity", this._getSeverityInput())), h("div", null, this._getCalculateInput())));
+        return (h(Host, { key: '4fde9075cfece4eb107c303c5425501663902e66' }, h("div", { key: '5c2d7e3116f87eb19d55cb4c207bfb658bcc9376', class: "label-display" }, h("calcite-label", { key: '924692372a5294dc8ab4cd8f5d83e879b48d33e7', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '6afaa68fef4a16718159a297ca421a11b0bd5f6b', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'e147fa289c58bad96e7affde75a5cc6a62739d70', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'd3562ae77e679866031fd1fb0f13c954591d5081' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/delete-button/delete-button.js

@@ -72,7 +72,7 @@ export class DeleteButton {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '885179064344fde1e5387efcf7fe2807bd2786c9' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

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

@@ -111,7 +111,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, null, h("div", { class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { class: "position-absolute" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: 'b806acb1c7ec5a72ce3eecf2260343a099d2afa2' }, h("div", { key: 'c4d10fd157da5b0974b240d37245eb67bca9cce9', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'c1c66ecdb69497d9a376799f579fff913ac7bd52', class: "position-absolute" }, h("div", { key: 'a9aec76ba816e85ca50ce68beb355426da3bd16f', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '2a745303bea886b223bc47aa06950d1ca8e39c1a', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/feature-comments/feature-comments.js

@@ -56,7 +56,7 @@ export class FeatureComments {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '2f5fccede034515212bdcfae66b1a050f63400d0' }, h("slot", { key: '3539f90873c3771e33c8655c12cce9adfbfa772b' })));
     }
     static get is() { return "feature-comments"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feature-details/feature-details.js

@@ -83,10 +83,10 @@ export class FeatureDetails {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable) &&
-            h("div", { class: 'buttons' }, this._likeFieldAvailable &&
-                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_b = (_a = this._likeCount) !== null && _a !== void 0 ? _a : this._selectedGraphic.attributes[this._likeField]) !== null && _b !== void 0 ? _b : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_d = (_c = this._disLikeCount) !== null && _c !== void 0 ? _c : this._selectedGraphic.attributes[this._dislikeField]) !== null && _d !== void 0 ? _d : 0))));
+        return (h("calcite-panel", { key: 'c37e61727e2d94fb11c1c82b68de90b63a68385c', "full-height": true }, h("info-card", { key: 'b8ee6ec6705ec1903800f42f9009d92e0ff41fcc', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable) &&
+            h("div", { key: '3a48acd141dbdcb921b2b24296587b130c4e0fcb', class: 'buttons' }, this._likeFieldAvailable &&
+                h("calcite-button", { key: 'cfde8c0825109ec48beb61348c1846596994f6d2', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_b = (_a = this._likeCount) !== null && _a !== void 0 ? _a : this._selectedGraphic.attributes[this._likeField]) !== null && _b !== void 0 ? _b : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: 'e5e69fefa92a0189b955c4869b7755d0e68436c9', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_d = (_c = this._disLikeCount) !== null && _c !== void 0 ? _c : this._selectedGraphic.attributes[this._dislikeField]) !== null && _d !== void 0 ? _d : 0))));
     }
     /**
      * Load esri javascript api modules

package/dist/collection/components/feature-form-flow-item/feature-form-flow-item.js

@@ -56,7 +56,7 @@ export class FeatureFormFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: 'eafd28a38226545f6e4047bd03fe7eaf0ec20cfa' }, h("slot", { key: '5ad9661525b0126f0848064f5d5bdae69c393d11' })));
     }
     static get is() { return "feature-form-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feature-list/feature-list.js

@@ -86,9 +86,9 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '4cb73ad53f9ce1cced4c6001d45001523cb19c4a', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: 'c88ac531c61ece3284c474a334f281507e69dad0', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '70dafc90052736c5b450f9c9c87ae5627f068b92', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'a0b9b2aafbdb12f945d87242e29271ca0ff732fc', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'a5dd1674092e74bedb06e32b739d14a949b92bea', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '35dc472ed2aa2bd8e83ca42cf12db0469c967505', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'da3acc4616f040d350b198ef759a3d081d06deee', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/features-flow-item/features-flow-item.js

@@ -56,7 +56,7 @@ export class FeaturesFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '47fde9252d4b8eff91b413cf22282b8d61d127a7' }, h("slot", { key: '725e3a0a4ad6ef4827a5036187b2f0e59cf34ecd' })));
     }
     static get is() { return "features-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/floor-filter/floor-filter.js

@@ -57,7 +57,7 @@ export class FloorFilter {
         return this._initModules();
     }
     render() {
-        return (h(Host, null, h("div", { ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '14268f8fb66eb28085ce60b782b15f41285bf923' }, h("div", { key: 'c428424b3d639fa043fef55523de35a9bf07bda0', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -181,8 +181,8 @@ export class InfoCard {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, null, h("calcite-shell", { style: { position: this.position } }, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-action", { class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { class: "pagination-count" }, this._count)), h("div", null, h("calcite-button", { appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.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, { key: 'daf1a2cd9ca191e31c0da05e429a621050d394a8' }, h("calcite-shell", { key: 'c59c1fc96447010119ca85e35e5310a1871b78c9', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '9fe212dc6bd95d98427e8c75143e20047a134189', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'c84ab8459f438e46bcdcefd7c64fff30ab52ac5b', class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { key: '93816adb6c20e64a559b111b9918c036588467b4', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'e359866247284d36cb4e12476daa441c412e9244', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '5d65952fd5908268117e67781ce719ac9baeee21', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: 'b1b741cc4fcd1052b4402b9919fbb8bc21127ab1', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '9c5007aa3fc0ebef1d25ddd392e4d45973347609' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'd6388a8c5aa83b0a0f306f84843e137cb2ba4906', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: 'd9b9b88a240fb35b7c434f368a697040bd33c3b1' }, h("calcite-button", { key: '0c8afd3ce5e83c8c4e2b9c33fe053bc1a9831551', appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '7ef1b84c4262ab45450354959cbbf8a6914b014c', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '990a06361d6006d93a01bdbb61fd5dc103bdf9b2' }, this._translations.back))), h("calcite-action", { key: '31a4270a35da974ab8216a203c44e6aeecf93224', class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'fe734c09dc59c9a8c7117cf19f1970aba0398d51', class: "pagination-count" }, this._count)), h("div", { key: '88a9e56d945ea53870baf87bead02cb03a0ac156' }, h("calcite-button", { key: '8b095fdb66d113a8b893259df3e3331451e7af8e', appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '86ac1d32cb39c39bd0ebcc3d04702c5534f3992f', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '0fad088ab4536dc235dec503fd28346575aad4ed' }, this._translations.next))))), h("edit-card", { key: 'b1d207f660bca7bb83ffaef3fb44819c25107a48', class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '338be8157fe0163e5c3e529942f34dc80efb0721', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'b91e86a5c47bac031d7bb0053ff45f2e9dc3fb99', slot: "title" }, this._translations.editDisabled), h("div", { key: '8923e82d5992e860ac535a4111d9e77b01639549', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/json-editor/json-editor.js

@@ -132,7 +132,7 @@ export class JsonEditor {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { class: "editor-controls" }, h("div", { class: "editor-buttons" }, h("calcite-icon", { id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "undo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "redo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "compare", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "search", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "reset", scale: "s" })))), h("div", { class: "edit-parent" }, h("div", { id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (h(Host, { key: '00ea91a9373e5cecbe52bd51ac7bf3b06b22ccc8' }, h("div", { key: '7afe9bd7953b0c06cd2a4eaf107dd9654a16c37e', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: 'c9bed17775348e586366b81bb37ab1b959300b8c', class: "editor-controls" }, h("div", { key: '846a0f27a14fcf200e473575fa772d68cdc546e7', class: "editor-buttons" }, h("calcite-icon", { key: '723cdd672261b9439750e6fb05a270aa46d97789', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '23edf0b33632971b33b47bafc52f7697bebb6eb5', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'e423f0f1b8fad1db9bd2b94d53ce2a5625ee87d1', icon: "undo", scale: "s" })), h("calcite-button", { key: 'de336e52d61b8575c1ac83a7eef3663520db5e4c', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c864583f66374d5d1d63f630e4069a11a98b8bcd', icon: "redo", scale: "s" })), h("calcite-button", { key: 'c740d3ef25901d6e313d70fccaa35c40ecab9cb4', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '8bf4e985982d227086d3b11ab94b58ad84657970', icon: "compare", scale: "s" })), h("calcite-button", { key: '0c2d9b1498eb41886b2716d182ba9833bbe9a528', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '1979a27bef07cfdd122e5bd0a2cb27c2ada29f6e', icon: "search", scale: "s" })), h("calcite-button", { key: '8b754884ef387235f57806310da7693a25a09699', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'bfa24ac26db7ce6f8ed4ffa7cf39950fc8b959c9', icon: "reset", scale: "s" })))), h("div", { key: '671db1db990eedd2863cca9de51bc376e55085bf', class: "edit-parent" }, h("div", { key: 'a2cb3c42fb1edd5d26f8c52ee2ca2c0124e5d02a', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: '9ec65340bb37c54a77d82e47129b5e07ec7b37cc', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/layer-list/layer-list.js

@@ -77,9 +77,9 @@ export class LayerList {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: '33fe25a29aac6e4eaa429b1a8f58431b66d44d46' }, this._isLoading && h("calcite-loader", { key: 'f5b3c6a90f850db50a3e2b6af9745936802903dc', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: 'a40c96db6ecf36097aacb652156cbd863f6f9a3b', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: '83c3b2982f750a8e69101501aa39b99a8636514f', slot: "title" }, this._translations.error), h("div", { key: '190eb16ca7991773c784c8d77bca9be064064028', slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: '980f20cec107d8e54af0c57448036eac3f342b71', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -21,7 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
+import { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
 import { queryAllIds, queryFeatureIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
@@ -80,7 +80,10 @@ export class LayerTable {
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -235,7 +238,7 @@ export class LayerTable {
                 }
             });
             if (layerView) {
-                await goToSelection([oid], layerView, this.mapView, true);
+                await goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
             }
         }
     }
@@ -306,7 +309,7 @@ export class LayerTable {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: `width-full ${tableHeightClass}` }, 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 })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '67d980e9ed0b2218b90711f0f828c53184ac6a32' }, h("calcite-shell", { key: '63142b7a72fea63dbdc6fe9fab5bd1787dbaaf18' }, this._getTableControlRow("header"), h("div", { key: 'de165431213df10a03f44ad8a620312f7134e23e', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '175dd2c233ae4f889389a9a4b35fc342e9a5fc1f', class: "height-full width-full" }, h("calcite-loader", { key: 'e7c5970984bc458c070806d74a81b958986018e4', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'af72f3f621ffc8d6f6e876c2da06686140bebc56', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -1106,13 +1109,20 @@ export class LayerTable {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the objectid field in descending order
+     * Sort the table with the configured field in the configured sort order
      */
     async _sortTable() {
-        if (this._table && this._layer && this.showNewestFirst) {
+        var _a, _b, _c, _d, _e, _f;
+        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
+            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+        }
+        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
+        if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(this._layer.objectIdField, "desc");
+                this._table.sortColumn(sortField, sortOrder);
             });
         }
     }
@@ -1358,8 +1368,11 @@ export class LayerTable {
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    _zoom() {
-        this._table.zoomToSelection();
+    async _zoom() {
+        if (this._layer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
+            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
     }
     /**
      * Handles layer selection change to show new table
@@ -1438,7 +1451,7 @@ export class LayerTable {
             items: [
                 {
                     label: this._translations.hideField,
-                    iconClass: "esri-icon-non-visible",
+                    iconClass: "view-hide",
                     autoCloseMenu: true,
                     clickFunction: () => {
                         this._handleHideClick(name);
@@ -1757,6 +1770,40 @@ export class LayerTable {
                 "attribute": "show-newest-first",
                 "reflect": false
             },
+            "sortField": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Field using which table will be sorted"
+                },
+                "attribute": "sort-field",
+                "reflect": false
+            },
+            "sortOrder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
+                },
+                "attribute": "sort-order",
+                "reflect": false
+            },
             "zoomAndScrollToSelected": {
                 "type": "boolean",
                 "mutable": false,
@@ -1773,6 +1820,23 @@ export class LayerTable {
                 },
                 "attribute": "zoom-and-scroll-to-selected",
                 "reflect": false
+            },
+            "zoomToScale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number: default scale to zoom to when zooming to a single point feature"
+                },
+                "attribute": "zoom-to-scale",
+                "reflect": false
             }
         };
     }

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

@@ -51,7 +51,7 @@ export class LayoutManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "display-flex" }, h("div", { class: "display-flex action-center" }, h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { class: "tooltip-message" }, this._translations.appInfo))), h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+        return (h(Host, { key: 'b8c4efb8e0990e7590411a467125edc54f1c9039' }, h("div", { key: 'ac235066e5891e3dd06c55432dd30366e14d702b', class: "display-flex" }, h("div", { key: 'aa743b87f77d2ee066b7594493ca64a0d930fc35', class: "display-flex action-center" }, h("calcite-icon", { key: 'f0b001707fe2b3c6bfb8077ce9f888c7e82fd253', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: '010acee7b5301ce85ddb892683efe6635612a64c', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: 'bc2d7c2b4b2b15ef19ea82ed845282c9d0c7e81b', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: '429386c5b13d349d6a28c5756bc1f0d261259c0e', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/list-flow-item/list-flow-item.js

@@ -56,7 +56,7 @@ export class ListFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: 'b6d40c70e611fdba0e57f85ac707cc852b5a64f1' }, h("slot", { key: '0892b0046607b71954bf4a48496eff72dedf406a' })));
     }
     static get is() { return "list-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/location-flow-item/location-flow-item.js

@@ -56,7 +56,7 @@ export class LocationFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '1b427b1a4898ba492ad3f9ebe36e583ea4942540' }, h("slot", { key: 'ad91e1fcbddf4cc964d27ce6469a8c853c6a9568' })));
     }
     static get is() { return "location-flow-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class MapCard {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
         const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
-        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, { key: 'f654417b12d7683fbe721bd5207254f2836a410c' }, h("map-picker", { key: '69e8274ae170a96b4f5a9d57cca6800d6dde68ad', class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { key: '17bb26bf7ac70a81328bb8a943c5575517b1a564', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: 'c327c9ab51fa38e65c65c32e0e55e9d3a7917b2e', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/map-draw-tools/map-draw-tools.js

@@ -121,7 +121,7 @@ export class MapDrawTools {
             "border" : "border esri-widget esri-sketch__panel";
         const undoRedoClass = this.drawMode === EDrawMode.SKETCH ?
             "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-        return (h(Host, null, h("div", { class: containerClass }, h("div", { ref: (el) => { this._sketchElement = el; } }), h("div", { class: undoRedoClass }, h("calcite-action", { disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (h(Host, { key: '25e36e2bdfd5ec6243ba4f734e045ee67a1adaef' }, h("div", { key: 'd954129149da35b963341affb33257f74a410084', class: containerClass }, h("div", { key: 'eec268afc2ec6948baf17f551d23498014f05df9', ref: (el) => { this._sketchElement = el; } }), h("div", { key: 'e22d903925aec0984a9c77a96a17ab91f0cdab69', class: undoRedoClass }, h("calcite-action", { key: 'dcc9eaa8f434ec919532c3e9406c5e0ad9af949c', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: '876c8b69b6620ac0ff4c4f8b590e89e36a3382e5', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/map-fullscreen/map-fullscreen.js

@@ -55,7 +55,7 @@ export class MapFullscreen {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (h(Host, { key: '415fea7bdb4f9c26231f92f49ad6bb98bcdca22d' }, h("div", { key: '1888034532b129838472b4713f55b7ad23c8b3f0', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -97,7 +97,7 @@ export class MapLayerPicker {
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
         style = Object.assign(Object.assign({}, style), { "display": this.display });
-        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        return (h(Host, { key: '6e3213373ee2ca31f3ee0996f51cb59c0948df5e' }, h("div", { key: '641de287f126b4e7b6d38df8c6d3b5fe882fef2f', class: "map-layer-picker-container", style: style }, h("div", { key: '7bbb3b9e7684a5d62ae6762bb46ec5fe97147b54', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id)))));

package/dist/collection/components/map-legend/map-legend.js

@@ -60,7 +60,7 @@ export class MapLegend {
      * StencilJS: Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { ref: (el) => { this._legendElement = el; } })));
+        return (h(Host, { key: '032c6daa2f4c5d3bcbf83d776c68901c7c137781' }, h("div", { key: 'd773649fce8d3a0a4073ad017ae3906c1de98f07', ref: (el) => { this._legendElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/collection/components/map-picker/map-picker.js

@@ -82,7 +82,7 @@ export class MapPicker {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
+        return (h(Host, { key: 'f703ef70b12ffe3eaa83074a79bdbdf2233b3c30' }, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
     }
     /**
      * Called once after the component has loaded

package/dist/collection/components/map-search/map-search.js

@@ -83,7 +83,7 @@ export class MapSearch {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })));
+        return (h(Host, { key: 'fc649c2fbcb8b39c63408b942f9129dfdee0a99f' }, h("div", { key: '44461b45207d97e2329742f4d915945bd9364ef3', class: "search-widget", ref: (el) => { this._searchElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -191,7 +191,7 @@ export class MapSelectTools {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
+        return (h(Host, { key: '2e23b1179b5d3e850de160e452f9a8fc3787ae6f' }, this._getMapLayerPicker(), h("div", { key: '70380c5b45274d59c93677c6605132e224561d6f', class: "border-bottom" }), h("div", { key: 'abab5c6c336dee0ef5c84f364e307f36d735db9a', class: "padding-top-sides-1" }, h("div", { key: 'e4fd4ccccb65d35fccb6908ae5dbf721ac038339', class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { key: '7b78cfadf89fa08d8c70fd871d06170680b2dab3', class: "padding-top-1" }, h("map-draw-tools", { key: 'bf9c39c36c35064dd78988ee8151e9cfcd0cfb25', active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { key: '75e1f0c5417620f437db1d713ebfb112c1b300a4', class: "border-bottom" }), this._getNameInput()));
     }
     /**
      * Renders the buffer tools component.

package/dist/collection/components/map-tools/map-tools.js

@@ -179,7 +179,7 @@ export class MapTools {
         const toolMarginClass = this.enableSingleExpand ? "margin-top-1-2" : "";
         const toolOrder = this.toolOrder ? this.toolOrder : ["legend", "search", "fullscreen", "floorfilter"];
         const shadowClass = this.stackTools ? "box-shadow" : "";
-        return (h(Host, null, h("div", { class: containerClass }, this.enableSingleExpand ? (h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, h("div", { class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '60d3373785662ecbc79249170fb7b854ade7a288' }, h("div", { key: 'caf43fd67ffed7a957d431537b794c54455507aa', class: containerClass }, this.enableSingleExpand ? (h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, h("div", { key: '646c6bb1edcd21069c5e925deeead0b2f1ada464', class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), h("basemap-gallery", { key: '4ff407d51575c0efabb5e92f6834cb8a6ef9adfd', basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { key: '7d54a20d8112db9384293829a85f5faecb67a631', class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { key: 'ddfafa37f9c1192c1851e2a314cc1062a314939a', class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { key: 'af93e6c0f10249be6c9cc0a25e17d7d7e5726190', class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { key: '0fdfbb13aee43e483946ee4c0169a47b12e6cfab', class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/pci-calculator/pci-calculator.js

@@ -55,7 +55,7 @@ export class PciCalculator {
     render() {
         const pciClass = !this.showAddDeduct ? "display-grid" : "display-none";
         const deductClass = this.showAddDeduct ? "position-relative" : "display-none";
-        return (h(Host, null, h("div", { class: pciClass }, h("div", { class: "label-display" }, h("calcite-label", { class: "label-display" }, "Enter comma delimited deduct values", this._getDeductValuesInput())), h("div", null, this._getCalculateButton())), h("div", { class: deductClass }, h("div", { class: "position-right" }, h("calcite-action", { appearance: 'transparent', class: "float-end", icon: "x", onClick: () => this._toggleShowAddDeduct(), scale: "s", text: '' })), h("deduct-calculator", { class: "display-grid padding-top-1", onDeductValueComplete: (evt) => this._addDeductValue(evt) }))));
+        return (h(Host, { key: '6e8758f4e124db54e45a781bbae92b58bd1ed8e1' }, h("div", { key: 'ab82c774bb0a5f8ee64f10f3f00291874f511253', class: pciClass }, h("div", { key: 'c8d597872e5334d312663e66991ff754fd3d5d4e', class: "label-display" }, h("calcite-label", { key: 'edf4caad7dba17c392f84e709ca59dc5c6622d1f', class: "label-display" }, "Enter comma delimited deduct values", this._getDeductValuesInput())), h("div", { key: '89378553cab7f50dceef5ec644652e2730cc6fc0' }, this._getCalculateButton())), h("div", { key: '796499e000c2bd823b0dcafcfe773b829c63068b', class: deductClass }, h("div", { key: '1c2e3a73952ff086815088ec2af830feeb22e90e', class: "position-right" }, h("calcite-action", { key: '1a3dd30a92def5eda0c3f3f1f9073137d07d40f8', appearance: 'transparent', class: "float-end", icon: "x", onClick: () => this._toggleShowAddDeduct(), scale: "s", text: '' })), h("deduct-calculator", { key: '1bbec05934b7c84660c0fb9478eff2de2c8ea40b', class: "display-grid padding-top-1", onDeductValueComplete: (evt) => this._addDeductValue(evt) }))));
     }
     //--------------------------------------------------------------------------
     //