@esri/solutions-components 0.10.7 → 0.10.9

package/dist/esm/calcite-shell-panel_14.entry.js

@@ -2203,7 +2203,7 @@ const SolutionItemDetails = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'd4443b28db9314e9c6976d97af02e7af14d2a5ff' }, h("div", { key: 'bd2969f299df5fab6bab10a6cd6dbe7c7213aba4', class: "parent-container" }, h("div", { key: 'd7226027bddc89eb4ff89899ee45728534331a5d', class: "inputBottomSeparation" }, h("calcite-input", { key: '9fcd5e9c9d5fe7ac652fff4fa06801fec240380f', id: "item-title", value: this.itemDetails.title })), h("div", { key: '9542faf04236ec293eff1f1abf0667ee4d26ab45', class: "inputBottomSeparation" }, h("input", { key: '9a431fef50c9be4f084b33003c6be4cab65a7da0', accept: ".jpg,.gif,.png,image/jpg,image/gif,image/png", class: "display-none", onChange: (event) => (this._updateThumbnail(event)), ref: (el) => (this.browseForThumbnail = el), type: "file" }), h("button", { key: '9ed82a0e807acd0344bd52bcef653728419d3fc1', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { key: '230d6a270cd61f4785b7f39e951e996a7b37a1ca', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { key: '96a6c77691e152072aa0de03f63d8ec82f1ca051', d: "M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z" })), this._translations.editThumbnail), h("div", { key: 'de04396607c0a61eb1e13bb56581aae9e939b286', class: "flex" }, h("div", { key: '3df8a6cde94bc275b85db55375aaa351453c46fb', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { key: 'a5084eff2ebee0514c5cac6acf4e1b8dcaaf47d5', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { key: '73199d7582082575282f36ecb6afed3ee6bd900e', class: "snippet-count-container" }, h("calcite-input", { key: '7aa7c61d42be36c237c6bd9b72e4ec24ef6dc07d', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { key: '9ae2f293b2cb64a475a0969b7e00951a1b55e251', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", { key: '98cf6dd0f1f53e15c857baeb4f3a580586935762' }, this._translations.description, h("label", { key: '2f54c0fd6d75e4b08e74cf5b30d9794d0375a267', id: "item-description-label" }, h("calcite-input", { key: '91cf40b10f1bed0cd4bc83a988d9a4151ddec2e6', id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", { key: '4261ff6e21385fb681cb6a52dbaa8e3d75973d8b' }, this._translations.tags, h("label", { key: 'cde48f34fd18fe530dea6be06c8fb5e602048266', id: "item-tags-label" }, h("calcite-input", { key: 'e11931c90df113bd512bab39be092257ffd92e42', id: "item-tags", value: (this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(",") }))), this.itemType !== "Group" ? h("calcite-label", null, this._translations.credits, h("label", { id: "item-credits-label" }, h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? h("calcite-label", null, h("label", { id: "item-terms-label" }, this._translations.termsOfUse, h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
+        return (h(Host, { key: 'f93ee5d1152024c4c9d4b7376d8e19e5a0ebaccd' }, h("div", { key: 'd03106d1566be78c478a8ca798cea04161e835a2', class: "parent-container" }, h("div", { key: '78f52543e511e7deecffdc998808fce766863ef3', class: "inputBottomSeparation" }, h("calcite-input", { key: '70783f0059d5e526f56a4ff2cff18e20348c4c16', id: "item-title", value: this.itemDetails.title })), h("div", { key: 'b2cfc981837ee9fd8549dc62057bc98429f3f50a', class: "inputBottomSeparation" }, h("input", { key: '47bdb6fe76a080c297c01ee8624088a501f31f17', accept: ".jpg,.gif,.png,image/jpg,image/gif,image/png", class: "display-none", onChange: (event) => (this._updateThumbnail(event)), ref: (el) => (this.browseForThumbnail = el), type: "file" }), h("button", { key: '7c2b6882f87d63f97c609c071b60b62474931c93', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { key: 'b530933142b3aa03de26baa33e4be11ea9f4c806', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { key: '57388aa06be3e6c3bed24673ab63386cc433f6c0', d: "M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z" })), this._translations.editThumbnail), h("div", { key: '3906eeaa6bd72d0c53a0e472c3606f0ab879a3d3', class: "flex" }, h("div", { key: 'fa88b2ea055748202ed7c34ce7df2cfc9a1592a0', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { key: '2b5e960405c8f41a66bdf93f47e669d5eae646ad', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { key: '7762aca4498ef2ca8d70beb59cfc5906229c3e5d', class: "snippet-count-container" }, h("calcite-input", { key: '1a6e9e299e551f2c7a3f99395a789fd4e1bf1e88', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { key: 'a66a1569c45189e013d230f7d2c11fd315ffaa29', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", { key: '1befca128558c7b638d86521f162bcbf44e889a1' }, this._translations.description, h("label", { key: '496939ec6171b926b8f7d6610fa153a0ee63243c', id: "item-description-label" }, h("calcite-input", { key: 'a97b85340d620f4fa909b4b697e058e5398df145', id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", { key: 'eecadd422f35b01124dbf9ac8ce030c561f8b76d' }, this._translations.tags, h("label", { key: 'be9ba3c1c3e4d3bff74bcaf586cef39a8a5c76f2', id: "item-tags-label" }, h("calcite-input", { key: '9772f1e364dcb9810ea81bbf2871ee3c81bb0f92', id: "item-tags", value: (this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(",") }))), this.itemType !== "Group" ? h("calcite-label", null, this._translations.credits, h("label", { id: "item-credits-label" }, h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? h("calcite-label", null, h("label", { id: "item-terms-label" }, this._translations.termsOfUse, h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
     }
     componentDidRender() {
         this._loadThumb();
@@ -2381,7 +2381,7 @@ const SolutionItemSharing = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7042ab9382712488f9184b305e417dd93379422f' }, h("div", { key: '00baf7fac31f03b249592eb8603a74d6f93f2615', class: "container-border" }, h("calcite-label", { key: '5328280b6ee86819366800e43eda0c44b55ca277' }, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (h(Host, { key: 'b2086d83295956bff47fd5951056000043a4db72' }, h("div", { key: '1344ce75b7ae023544d0c177d883ba1c6eaed05b', class: "container-border" }, h("calcite-label", { key: 'abbd7a7f1e9dbf94d54ef61a2182b2659d60026e' }, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2500,7 +2500,7 @@ const SolutionOrganizationVariables = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'a4456905e1abde8eca22dfb6f3da81959d509b75' }, h("div", { key: '8fc37e2a59237ed0cca05b096f901a82da696151' }, h("h4", { key: '7bdd9e95f37297c51778a866542517048622e5ca', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: '10bfcebd83ddc363f04149a03298b0c5247fd265', class: "container-border" }, h("calcite-tree", { key: '1d168ebbceaf566fb8f4ddea85acba39c08bbd53', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (h(Host, { key: '387c9a17b83de9f4aa2dc60666e4c45268b7d656' }, h("div", { key: '5181a83dbd700220b8ec55828a37d35fd1406ed1' }, h("h4", { key: '88eea182594f50b86ba873289d84ea0e1b7cc3eb', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: 'dcbaf3f135d1a6d660e4f17bce722feb6d2fed3e', class: "container-border" }, h("calcite-tree", { key: '4b85c9bd443deb82e570e58ae59c546d8ea9d36d', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2598,7 +2598,7 @@ const SolutionResourceItem = class {
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (h(Host, { key: 'c36fddfce9c4c97b281281ec11dfa017d496141e' }, h("div", { key: 'e1166173669689e9acee92cc7e53747ebcec0c09', class: "resource-item" }, h("div", { key: '86c8e1d498d7b84e9587cdcf4a3bb971fc1ecaad', class: "margin-bottom-1" }, h("calcite-button", { key: 'f382275e75efeb5beadef582ddd343a283f014e2', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: 'c487e618472b047f8db71e8989f849c844682080', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '08733ba234cba9b5ea19455256fa961d23ae933b', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (h(Host, { key: '3209042541d0df8440c8ae7b1564ddad9adb4466' }, h("div", { key: '11d0ad8b5ad181a4db7836e9f3f05fa3e79b924b', class: "resource-item" }, h("div", { key: '1b768c980d3679dd8ce0557cd24c18ab397cac16', class: "margin-bottom-1" }, h("calcite-button", { key: '33a827d3df40e68d985a0f6f8c9fdfb89b78ef25', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: '22adce285d7eb9c5fb5a189b0bee43cd25eb89a3', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '20b41623ed7ab10202a5ea929b9ddd63b62d0c0e', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     _removedResources = {};
     //--------------------------------------------------------------------------
@@ -2880,7 +2880,7 @@ const SolutionTemplateData = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '5a417f81d9b0d98ad28f9139406fee4b37204169' }, h("div", { key: '0dd5d77a961473bf45f7654ccb2e0507b492a6c7', class: "solution-data-container" }, h("calcite-shell", { key: '3b839b36a89f1a9db10a6ad8b3f7d088248770bc', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: '9f6ce42fdad56cf7a9f6b2f9ccac707eb655f4f1', class: "json-editor" }, h("div", { key: 'a1ba50c8fd13cf6d4934aa72083c0519c317721d', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: '8f832aecde35b6b82e16b3d201b738fe202e86a3', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), h("calcite-shell-panel", { key: 'c24f19fcc440884123f59842b392063925b5cbf6', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: '8d9c25baada3e2ca03ee192f44121d7bdab85432', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: '247b542336578c5404c7246552424c16030d90a7', appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: '963c1802c7828557cec5493602c3a1669e21683c', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: '566f672a97401d77ed7180d5fc7b2367027fcc57', value: this.organizationVariables })), h("div", { key: '79508bfcde2ac8507acd40bbc3edceb944c3e717', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: '51756082f8d13c73d7ae1349fc5625994a3354bb', value: this.solutionVariables }))))))));
+        return (h(Host, { key: '2ac01aadffbe8719d947d3258721a24e79c5827a' }, h("div", { key: '8576d2c273b557393ae9c959817c3a1803000ca6', class: "solution-data-container" }, h("calcite-shell", { key: '7962b2da3ebce8428119e95dee13a79fb06a71ca', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: '49c9e36a219e8f09431f88b7e698bd53bc538e43', class: "json-editor" }, h("div", { key: 'ef96fb9a8d9bced4a36dca4786b7c77f06bd3dc7', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: 'f8e1662a22f6b36e0be929aec00c539508527a81', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), h("calcite-shell-panel", { key: '853f9c2df14fe53cc305b290cd1e5b9a8f694b4d', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: '0bc3d510ba7dc9d4ca1339bf6d5fa1a52c249723', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: '2c316175ebe7bdbd4911abbdd58c2bcac8c6e39c', appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: 'e436c6dba30492a9eda496c4da41a7632cc03232', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: '4956e3bf41676ccf3dd0168f6f4f573f14927110', value: this.organizationVariables })), h("div", { key: '3376d0034d66f01cd78d01adf5653aeeca63b47f', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: 'bb3978deedbe0a439d85d1bb7a8d26380e226dd7', value: this.solutionVariables }))))))));
     }
     _initializing = false;
     //--------------------------------------------------------------------------
@@ -2954,7 +2954,7 @@ const SolutionVariables = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '4367694cf20a2063b57679f1a955ef827eea1c05' }, h("div", { key: '875e6e1532e7406ddf6cca804e421980aa23b7cd' }, h("h4", { key: 'b6798506cf71d3c84e2c33a3d12a0729591a73a7', class: "org-var-header" }, this._translations.solVariables)), h("div", { key: '413d3c7ebae5afa05a8cb5c87f766db64f43e106', class: "container-border" }, h("calcite-tree", { key: 'ba5bf27e005ce7536cdfe0c8022c96cd0b4ad920', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
+        return (h(Host, { key: '207eba2b3a7c2ae6958bc253c50a30ba05e4ad53' }, h("div", { key: '258351a67b1ffac4ce9290bdbc7a15fe045e1cf8' }, h("h4", { key: 'e8b6c6ff6b78d2ee885f352069426a79e12a4376', class: "org-var-header" }, this._translations.solVariables)), h("div", { key: 'e68c85b552c5313300250d4e7a29aee50e3d070d', class: "container-border" }, h("calcite-tree", { key: '011383a8abb007bd6d7a59f6a7681f24fc32d3b0', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/esm/calcite-tree_3.entry.js

@@ -610,7 +610,7 @@ const SolutionItemIcon = class {
      * Renders the component.
      */
     render() {
-        return h("div", { key: '3b732e3c889dc83eb649af9d66742304e549d229', title: this.type }, h("img", { key: '262f4891209996264e8c0248c926a60f71b9e674', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
+        return h("div", { key: '3a30434531363d13bcc0207dbc90f1ee32454113', title: this.type }, h("img", { key: '8ae2eaaeaa00bb86aed97665036fdb1edd14b6be', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
     }
     //--------------------------------------------------------------------------
     //

package/dist/esm/card-manager_3.entry.js

@@ -3,9 +3,9 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, g as getElement, h, H as Host, c as createEvent } from './index-e3f04fa1.js';
+import { r as registerInstance, g as getElement, h, H as Host, c as createEvent, F as Fragment } from './index-e3f04fa1.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-7162b55a.js';
-import { q as queryFeaturesByID, g as getLayerOrTable, e as goToSelection, f as queryAllIds, i as queryAllOidsWithQueryFeatures, j as queryFeaturesByGlobalID, c as getFeatureLayerView } from './mapViewUtils-3e3d33ea.js';
+import { g as getLayerOrTable, q as queryFeaturesByID, e as goToSelection, f as queryAllIds, i as queryAllOidsWithQueryFeatures, j as queryFeaturesByGlobalID, c as getFeatureLayerView } from './mapViewUtils-3e3d33ea.js';
 import { d as downloadCSV } from './downloadUtils-16c51b10.js';
 import './esri-loader-c6842c6b.js';
 import './_commonjsHelpers-089957fe.js';
@@ -24,6 +24,7 @@ const CardManager = class {
         this.layer = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.selectedFeaturesIds = undefined;
         this._cardLoading = false;
         this._graphics = undefined;
         this._translations = undefined;
@@ -49,12 +50,7 @@ const CardManager = class {
      */
     async featureSelectionChange(evt) {
         const ids = evt.detail;
-        this._cardLoading = true;
-        // only query if we have some ids...query with no ids will result in all features being returned
-        const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
-        // https://github.com/Esri/solutions-components/issues/365
-        this._graphics = featureSet.sort((a, b) => ids.indexOf(a.getObjectId()) - ids.indexOf(b.getObjectId()));
-        this._cardLoading = false;
+        this._graphics = await this._getFeaturesByIds(ids);
     }
     /**
      * Get the layer view for the provided layer id
@@ -75,6 +71,9 @@ const CardManager = class {
      */
     async componentWillLoad() {
         await this._getTranslations();
+        if (this.selectedFeaturesIds?.length > 0) {
+            this._graphics = await this._getFeaturesByIds(this.selectedFeaturesIds);
+        }
     }
     /**
      * Renders the component.
@@ -82,13 +81,25 @@ const CardManager = class {
     render() {
         const featuresClass = this._graphics?.length > 0 ? "" : "display-none";
         const messageClass = this._graphics?.length > 0 ? "display-none" : "";
-        return (h(Host, { key: 'ff2b82f23cc912a79d4f2d04a3263215e54ff03d' }, h("div", { key: '64a96d7162508794b955dc4b557fa94d18f8ab53', class: "overflow-auto height-full" }, h("calcite-shell", { key: '77b8ad0b9a459d2fb9399ccfebc6d0211147bb01', class: "position-relative " + featuresClass }, h("div", { key: 'e0725835f5c1c32a9164e04d6321ba5853a3892c' }, h("info-card", { key: '6712a077c4746585e7b2474aedd14e1869b37c34', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '38c85dbb72df9b9b1225f1488c3bf384f67d7db4', class: "position-relative " + messageClass }, h("div", { key: '66386d1a0d19fb4a023515e5dc4b41ac73a8c257', class: "padding-1" }, h("calcite-notice", { key: '12a843bede7b688651b436bcb9b7ad9e7f6217e0', icon: "table", open: true }, h("div", { key: '28862f4aa25802ca6b2bdc0ef2af3bcb825267f9', slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, { key: '0309205d485d9c7a5c558b3619a6c5ac03fcb528' }, h("div", { key: 'a5d291f6073b0e0a918573549c6eb29fe1d892dd', class: "overflow-auto height-full" }, h("calcite-shell", { key: '572b9cdf002e0c8c46e6c4bc5e2f1f8494228e93', class: "position-relative " + featuresClass }, h("div", { key: 'f8ba07deb9786d64f3d25011ff66ead43d809bf1' }, h("info-card", { key: '6eda3ab2cfa2e5fb948f5a7ddaeb6b9022aa5543', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: 'f32d9cfe3a41bbd7d58cdc732c8abe99b232beb7', class: "position-relative " + messageClass }, h("div", { key: 'b97eb023c5d57a4a8dda09467d8599166da40f3c', class: "padding-1" }, h("calcite-notice", { key: '23a204782bd254909e3ab803a944d10004e4954a', icon: "table", open: true }, h("div", { key: 'ea25078647612b8fa40e26b4474a91c853dae126', slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Gets the Feature using its ids
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getFeaturesByIds(ids) {
+        // only query if we have some ids...query with no ids will result in all features being returned
+        const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
+        // https://github.com/Esri/solutions-components/issues/365
+        return featureSet.sort((a, b) => ids.indexOf(a.getObjectId()) - ids.indexOf(b.getObjectId()));
+    }
     /**
      * Fetches the component's translations
      *
@@ -109,6 +120,7 @@ const LayerTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
+        this.toggleFilter = createEvent(this, "toggleFilter", 7);
         this.defaultGlobalId = undefined;
         this.defaultLayerId = undefined;
         this.defaultOid = undefined;
@@ -128,6 +140,7 @@ const LayerTable = class {
         this.showNewestFirst = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.zoomToScale = undefined;
+        this.createFilterModal = true;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -379,7 +392,9 @@ const LayerTable = class {
      */
     async mapInfoWatchHandler() {
         this._resetColumnTemplates();
-        this._initLayerExpressions();
+        if (this.createFilterModal) {
+            this._initLayerExpressions();
+        }
         this._initToolInfos();
         this._updateToolbar();
         await this._sortTable();
@@ -409,7 +424,9 @@ const LayerTable = class {
             this._floorField = this._layer.floorInfo?.floorField;
             this._updateFloorDefinitionExpression();
             await this._resetTable();
-            this._initLayerExpressions();
+            if (this.createFilterModal) {
+                this._initLayerExpressions();
+            }
             this._updateShareUrl();
             this._fetchingData = false;
         });
@@ -433,6 +450,30 @@ const LayerTable = class {
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Reset the filter
+     */
+    async filterReset() {
+        void this._handleFilterListReset();
+    }
+    /**
+     * Updates the filter
+     */
+    async filterUpdate() {
+        this._handleFilterUpdate();
+    }
+    /**
+     * Closes the filter
+     */
+    async closeFilter() {
+        await this._closeFilter();
+    }
+    /**
+     * refresh the feature table
+     */
+    async refresh() {
+        await this._refresh();
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -442,6 +483,10 @@ const LayerTable = class {
      * Emitted on demand when a layer is selected
      */
     featureSelectionChange;
+    /**
+     * Emitted on demand when filter action is clicked
+     */
+    toggleFilter;
     /**
      * Scroll and zoom to the selected feature from the Features widget.
      *
@@ -473,6 +518,14 @@ const LayerTable = class {
             }
         }
     }
+    /**
+   * Handles layer selection change to show new table
+   *
+   * @param evt CustomEvent the id for the current layer
+   */
+    async layerSelectionChange(evt) {
+        await this._layerSelectionChanged(evt);
+    }
     /**
      * Refresh the table when edits are completed
      */
@@ -540,9 +593,9 @@ const LayerTable = class {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: '547a08c45cc3a0b0bdb5ab841ee202d2d43018dc' }, h("calcite-shell", { key: '7ac39e863586727df7685eb5c3faffd87c46bf9d' }, this._getTableControlRow("header"), h("div", { key: '322dc4820b17365f3f202ce43d85330d25081eb5', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '764955f3cf9371a5ff554821613fffbc9e0bd705', class: "height-full width-full" }, h("calcite-loader", { key: '031fc6520de11b166111626501f0208f1b69c9ff', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '8d62258ee356fdf6bc6c03f88848a32270ce5eed', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '17071727cb283d84afb8beab8382bd3623f35920' }, h("calcite-shell", { key: 'f8508d67fd4b100fdc3f52b7db63194714cf216b' }, this._getTableControlRow("header"), h("div", { key: '5c1ebcb0530764a9568dc5dae153632a3d9491c8', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '7a6420894e4e50e2b4cda6e5ebe043134f4c0397', class: "height-full width-full" }, h("calcite-loader", { key: '48d4fe7e27fae877ca0e4caa22555968636f6c33', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'cce71356e8ca141d1a18b32944d4fa03af8aae33', 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()));
+            .replace("{{selected}}", selected))) : undefined)), this.createFilterModal && this._filterModal()));
     }
     /**
      * Called once after the component is loaded
@@ -611,7 +664,7 @@ const LayerTable = class {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this._layer ? [this._layer?.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -656,15 +709,19 @@ const LayerTable = class {
      */
     _validateEnabledActions() {
         const featuresSelected = this._featuresSelected();
+        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
         const selectionDependant = [
             "zoom-to-object",
+            "pencil",
             "trash",
             "erase",
             "selected-items-filter"
         ];
         this._toolInfos?.forEach(ti => {
             if (ti && selectionDependant.indexOf(ti.icon) > -1) {
-                ti.disabled = !featuresSelected;
+                // disable the pencil icon if multiple features are not selected
+                // For other icons disable them if any feature is not selected
+                ti.disabled = ti.icon === "pencil" ? !showMultipleEdits : !featuresSelected;
             }
         });
     }
@@ -698,6 +755,7 @@ const LayerTable = class {
      */
     _initToolInfos() {
         const featuresSelected = this._featuresSelected();
+        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
@@ -716,10 +774,20 @@ const LayerTable = class {
                     icon: "filter",
                     indicator: false,
                     label: this._translations.filters,
-                    func: () => this._toggleFilter(),
+                    func: () => this.createFilterModal ? this._toggleFilter() : this.toggleFilter.emit(),
                     disabled: false,
                     isOverflow: false
                 } : undefined,
+                !this.mapHidden ? {
+                    active: false,
+                    icon: "pencil",
+                    indicator: false,
+                    label: this._translations.editMultiple,
+                    func: () => alert(this._translations.editMultiple),
+                    disabled: !showMultipleEdits,
+                    isOverflow: false,
+                    isSublist: false
+                } : undefined,
                 this._deleteEnabled ? {
                     active: undefined,
                     icon: "trash",
@@ -904,7 +972,7 @@ const LayerTable = class {
     _setControlsThatFit(controlsThatFit, skipControls) {
         let update = JSON.stringify(controlsThatFit) !== JSON.stringify(this._controlsThatFit);
         const actionbar = document.getElementById("solutions-action-bar");
-        actionbar.childNodes.forEach((n) => {
+        actionbar?.childNodes?.forEach((n) => {
             if (skipControls.indexOf(n.id) < 0 && !update) {
                 update = this._controlsThatFit.map(c => c.id).indexOf(n.id) < 0;
             }
@@ -1794,7 +1862,7 @@ function joinAppProxies(map, config, appProxies) {
     return map;
 }
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.height-50-px{height:50px}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
 const MapCardStyle0 = mapCardCss;
 
 const MapCard = class {
@@ -1802,8 +1870,10 @@ const MapCard = class {
         registerInstance(this, hostRef);
         this.mapChanged = createEvent(this, "mapChanged", 7);
         this.beforeMapChanged = createEvent(this, "beforeMapChanged", 7);
+        this.toggleFilter = createEvent(this, "toggleFilter", 7);
         this.appProxies = undefined;
         this.defaultWebmapId = "";
+        this.defaultLayerId = undefined;
         this.enableHome = undefined;
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
@@ -1824,8 +1894,17 @@ const MapCard = class {
         this.stackTools = true;
         this.theme = undefined;
         this.toolOrder = undefined;
+        this.isMapLayout = undefined;
+        this.selectedFeaturesIds = undefined;
+        this.selectedLayer = undefined;
+        this.zoomToScale = undefined;
+        this.onlyShowUpdatableLayers = undefined;
+        this.isMobile = undefined;
+        this.mapInfo = undefined;
+        this._translations = undefined;
         this._searchConfiguration = undefined;
         this._webMapInfo = undefined;
+        this._showHideOpen = false;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
@@ -1873,6 +1952,22 @@ const MapCard = class {
      * HTMLMapToolsElement: the container div for the map tools
      */
     _mapTools;
+    /**
+     * HTMLCalciteDropdownElement: Dropdown the will support overflow tools that won't fit in the current display
+     */
+    _moreDropdown;
+    /**
+     * boolean: When true the show/hide fields list is forced open
+     */
+    _mapListExpanded = false;
+    /**
+     * boolean: When true an indicator will be shown on the action
+     */
+    _filterActive = false;
+    /**
+     * string: The current layers definition expression
+     */
+    _definitionExpression;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -1884,11 +1979,31 @@ const MapCard = class {
     enableHomeWatchHandler() {
         this._initHome();
     }
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async selectedLayerWatchHandler() {
+        await this.selectedLayer?.when(async () => {
+            this._definitionExpression = this.selectedLayer.definitionExpression;
+        });
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Reset the filter
+     */
+    async filterReset() {
+        this._filterActive = false;
+    }
+    /**
+     * updates the filter
+     */
+    async updateFilter() {
+        this._filterActive = this._definitionExpression !== this.selectedLayer.definitionExpression;
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -1902,12 +2017,23 @@ const MapCard = class {
      * Emitted before a new map is loaded
      */
     beforeMapChanged;
+    /**
+     * Emitted on demand when filter action is clicked
+     */
+    toggleFilter;
     /**
      * Listen for changes to map info and load the appropriate map
      */
     async mapInfoChange(evt) {
         await this._loadMap(evt.detail);
     }
+    /**
+     * Listen for change when mapview doesn't contain any layer
+     */
+    noLayersFound() {
+        this.selectedLayer = undefined;
+        this.selectedFeaturesIds = [];
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -1917,17 +2043,28 @@ const MapCard = class {
      * StencilJS: Called once just after the component is first connected to the DOM.
      */
     async componentWillLoad() {
+        await this._getTranslations();
         await this._initModules();
     }
     /**
      * Renders the component.
      */
     render() {
+        const mapContainerClass = this.isMapLayout ? "display-flex height-50-px" : "";
         const mapClass = this.hidden ? "visibility-hidden-1" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = this.mapInfos?.length > 1 ? "" : "display-none";
         const mapHeightClass = this.mapInfos?.length > 1 ? "map-height" : "height-full";
-        return (h(Host, { key: '4f5c0cd408f92856ceb2ba281a02856064ef6a5a' }, h("map-picker", { key: 'f69742384dc5ba13bbf257592cc8c35de77590f0', class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { key: '3ddddf3f674d49ae59fe627af1c67ec59718c9a3', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '6cb9518e74af0594ab6b657f0caec3598c250cb2', 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 })));
+        const containerClass = this.isMobile ? "width-full" : "";
+        const mobileClass = this.isMobile ? "border-top" : "";
+        const headerElements = this.isMapLayout ? "" : "display-none";
+        return (h(Host, { key: '7029e518173a8c1e6e00049b8e68e23bed23d9cb' }, h("div", { key: '2b8d9197dcb68529562728fddeb53d0a7e9cbb86', class: `${mapContainerClass}` }, h("map-picker", { key: '2e50b7c70832f4151fafd06e860846a5efa8f6f1', class: mapPickerClass, isMapLayout: this.isMapLayout, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { key: 'bc01ef7fb34400e3ff58151cab6abbabd9fa8a6f', class: `mapView-header display-flex ${headerElements}` }, h("div", { key: '1f1bf6ffb92fbc182be8333b4ae3d70271ea2f1b', class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && h("map-layer-picker", { key: '47320f3794f060262c4ed29ec1400a50d9744a97', appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getDropDownItem())), h("div", { key: '7101bfed6c0e0932275b0d28eea0ea5e1603aa8e', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '8ca28e50a77a25699cd6c17fe4f31788ca1cb49d', 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 })));
+    }
+    /**
+     * Called each time after the component is loaded
+     */
+    async componentDidRender() {
+        document.onclick = (e) => this._handleDocumentClick(e);
     }
     //--------------------------------------------------------------------------
     //
@@ -2026,8 +2163,99 @@ const MapCard = class {
             this.mapView.ui.remove(this._homeWidget);
         }
     }
+    /**
+     * Toggle show/hide dropdown
+     */
+    _toggleShowHide() {
+        this._showHideOpen = !this._showHideOpen;
+    }
+    /**
+     * Open show/hide dropdown
+     */
+    _forceShowHide() {
+        if (this._moreDropdown) {
+            this._moreDropdown.open = this._showHideOpen;
+        }
+    }
+    /**
+     * Close show/hide dropdown when the user clicks outside of it
+     */
+    _handleDocumentClick(e) {
+        const id = e.target?.id;
+        if (this._showHideOpen && id !== "solutions-subset-list" && id !== "solutions-more" && id !== "chevron-down") {
+            if (this._moreDropdown) {
+                this._showHideOpen = false;
+                this._moreDropdown.open = false;
+            }
+        }
+        // if clicked on map picker then toggle the dropdown
+        if (e.target.tagName === 'MAP-PICKER') {
+            this._mapListExpanded = !this._mapListExpanded;
+            void this._mapPicker.toggle(this._mapListExpanded);
+        }
+        // if clicked on other place then just close the dropdown
+        if (e.target.tagName !== 'MAP-PICKER') {
+            this._mapListExpanded = false;
+            void this._mapPicker.close();
+        }
+    }
+    /**
+   * Zoom to all selected features
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+    async _zoom() {
+        if (this.selectedLayer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayer.id);
+            await goToSelection(this.selectedFeaturesIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
+    }
+    async _toggleFilter() {
+        this.toggleFilter.emit();
+    }
+    /**
+     * Return true when we have at least 1 layer expression for the current layer
+     *
+     * @returns boolean
+     */
+    _hasFilterExpressions() {
+        let layerExpressions;
+        if (this.mapInfo?.filterConfig?.layerExpressions && this.selectedLayer?.id) {
+            layerExpressions = this.mapInfo.filterConfig.layerExpressions.filter((exp) => exp.id === this.selectedLayer.id);
+        }
+        return layerExpressions?.length > 0;
+    }
+    /**
+     * Get Dropdown action item
+     * @returns Dropdown item
+     */
+    _getDropDownItem() {
+        return (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this.selectedLayer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el, widthScale: "l" }, h("calcite-action", { appearance: "solid", id: 'solutions-more', label: "", onClick: () => this._toggleShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: this._showHideOpen ? "chevron-up" : "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { selectionMode: "none" }, this._getDropDownItems())));
+    }
+    /**
+     * Gets the dropdown items
+     * @returns dropdown items
+     */
+    _getDropDownItems() {
+        const featureSelected = this.selectedFeaturesIds?.length > 0;
+        const showMultipleEdits = this.selectedFeaturesIds?.length > 1;
+        const hasFilterExpressions = this._hasFilterExpressions();
+        return (h(Fragment, null, h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { disabled: !showMultipleEdits, iconStart: "pencil", id: "solutions-subset-list", onClick: () => alert(this._translations.editMultiple) }, this._translations.editMultiple)), h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { iconStart: "refresh", id: "solutions-subset-list", onClick: () => { this.selectedLayer.refresh(); } }, this._translations.refresh)), h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { disabled: !featureSelected, iconStart: "zoom-to-object", id: "solutions-subset-list", onClick: this._zoom.bind(this) }, this._translations.zoom)), hasFilterExpressions &&
+            h("calcite-dropdown-group", null, h("calcite-dropdown-item", { disabled: false, iconStart: "filter", id: "solutions-subset-list", onClick: this._toggleFilter.bind(this), selected: this._filterActive }, this._translations.filters))));
+    }
+    /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
     static get watchers() { return {
-        "enableHome": ["enableHomeWatchHandler"]
+        "enableHome": ["enableHomeWatchHandler"],
+        "selectedLayer": ["selectedLayerWatchHandler"]
     }; }
 };
 MapCard.style = MapCardStyle0;