@esri/solutions-components 0.10.25 → 0.10.27

package/dist/collection/components/solution-item-sharing/solution-item-sharing.js

@@ -52,7 +52,7 @@ export class SolutionItemSharing {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '6a9facacd8961a53dd4e49082def5573732d49bf' }, h("div", { key: '6eaf512253573a4db25ec64ebe1439228df4845d', class: "container-border" }, h("calcite-label", { key: 'db5680d010759bdb28b774293b8ae1522c9d8052' }, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (h(Host, { key: 'b79c768f4ba29331fd70ffc8dd55ae0fa77b0aa8' }, h("div", { key: '9b0a681fc53110cebda0246eb19157631dc8bac8', class: "container-border" }, h("calcite-label", { key: '68f56772d51805babdec5b51a9845ec4d54a6bb8' }, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-organization-variables/solution-organization-variables.js

@@ -50,7 +50,7 @@ export class SolutionOrganizationVariables {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '99ef09d7f851a57d42c7f7ad5cd6e303b9508d17' }, h("div", { key: '7217187249febdbbf3899d96cdbb2a45474343b7' }, h("h4", { key: 'd5d01648936de6726d7422f81f58ad998574ea87', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: '22d6f7fb4b0d8f570dbcf9dcac08dce7e2f6383e', class: "container-border" }, h("calcite-tree", { key: '5f21f4fc4b378da1b144dbeb1e19df2f43bcee61', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (h(Host, { key: 'f576bc6c4e1ef9c2c0879896f3b364584c9f4597' }, h("div", { key: '22d459e61c3ead17b9ef3ce5a2c6baeddc79c80e' }, h("h4", { key: '8e65f908893fbeda320f3910de3e48776a13816a', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: '02c6a5f124a4b729dca668afe1693e0d510b11c5', class: "container-border" }, h("calcite-tree", { key: '8b3fc867daa01b80908f9099923099211f807953', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-resource-item/solution-resource-item.js

@@ -61,7 +61,7 @@ export class SolutionResourceItem {
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (h(Host, { key: 'eb76345d460620ea6229c1ac94eaf5dec9943c1e' }, h("div", { key: '8dfb91c0ca0d4201940e29bcb809002da1cd9d76', class: "resource-item" }, h("div", { key: 'a6ec9664d267c25eada0432e6825369fdc82676f', class: "margin-bottom-1" }, h("calcite-button", { key: 'd84827e9dbe4ad68544430c007b28c5e9929e076', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: 'd88b2928ca6994054f899823701327ece50a937b', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '445c0c3e2deb3b546f4c84186a148e8888477d13', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (h(Host, { key: '5047514bc715a5a67ecacf629d303d81482c0b5e' }, h("div", { key: '22a903832d45858fbec839fce90527671a457257', class: "resource-item" }, h("div", { key: 'fea759db7edf7ca84d353060ee6b59aa101bc61b', class: "margin-bottom-1" }, h("calcite-button", { key: 'c76c2d60a856896255554324ba0239ecde2d49eb', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: '4feb64a2b7cc3490c1e0f90ee6dd36a842a8ae0d', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '76c64955841cdc671e1df9b3552fe62e67bfc7f5', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     _removedResources = {};
     //--------------------------------------------------------------------------

package/dist/collection/components/solution-spatial-ref/solution-spatial-ref.js

@@ -61,7 +61,7 @@ export class SolutionSpatialRef {
     }
     render() {
         this._updateUIFromStore();
-        return (h(Host, { key: 'ca1dd62000a2fdbd82a00830fc3ac94b47db73f7' }, h("label", { key: 'fa1ca79af87525ce25a6acf0a5b6a093429f5b77', class: "switch-label" }, h("calcite-switch", { key: '8dbcdbc8f417dfe1a05578fc9bbf3417ae93abfb', checked: this.enabled, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this.enabled = event.target.checked, scale: "m" }), this._translations.enableSpatialReference), h("br", { key: 'd3c2296bf3568e7b5b167fe0516184ae0c2d26f1' }), h("div", { key: 'fee9eac900cae65363658fa769347c3db0783007', class: "spatial-ref-component", id: "spatialRefDefn" }, this._renderFeatureServicesList(this.featureServices)), h("label", { key: '317e1422cdcb2147a961f2edfbcedb30c4246f6d', class: "switch-label spatial-ref-component" }, h("calcite-switch", { key: '6f0b7eb7216d0a663e5f2d436b7523b2d2301841', checked: this.enableDefault, class: "spatial-ref-switch", disabled: !this.enabled, onCalciteSwitchChange: (event) => this.enableDefault = event.target.checked, scale: "m" }), this._translations.enableDefaultSpatialReference)));
+        return (h(Host, { key: '6fe5caeb551c70db11066a785e5fdfc9c7054367' }, h("label", { key: '243b8365253ffe65e78041a7baf72ba56311a7a6', class: "switch-label" }, h("calcite-switch", { key: '63e7b111bb0373b1cca852573a25184acc1bdd98', checked: this.enabled, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this.enabled = event.target.checked, scale: "m" }), this._translations.enableSpatialReference), h("br", { key: '5cafc5b9c37946be7ac0453a9815f55e3dbfbfbb' }), h("div", { key: '353597031dcef6f1ab9b4aeb1593167be6ea69e2', class: "spatial-ref-component", id: "spatialRefDefn" }, this._renderFeatureServicesList(this.featureServices)), h("label", { key: '0bce6624d4658301d4e1d7b3e7b85da4deb0b328', class: "switch-label spatial-ref-component" }, h("calcite-switch", { key: '9376c1fe7b563f155ee3006b3663ce0a526c2715', checked: this.enableDefault, class: "spatial-ref-switch", disabled: !this.enabled, onCalciteSwitchChange: (event) => this.enableDefault = event.target.checked, scale: "m" }), this._translations.enableDefaultSpatialReference)));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-template-data/solution-template-data.js

@@ -77,7 +77,7 @@ export class SolutionTemplateData {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '78d31b01a7b3aac5e3b63ec59fa0225e662c3532' }, h("div", { key: '84ad00f60d5ad98fc14fad50b2db93844e54a842', class: "solution-data-container" }, h("calcite-shell", { key: '0e56c32e9ba92e9e536ce16f30db4e59d1c71094', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: 'ab251fe749493d11b61359f3f018fa87917d83c6', class: "json-editor" }, h("div", { key: '94be603b8c03bccbcc31293839d633ffa0ca5b15', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: '76a5a31ae0dc54d59a300e0d6cc6b543e994d322', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), h("calcite-shell-panel", { key: '5405b6aa574c721965bbdd4aabf90981f82c7da7', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: 'e7b57aa1f91e479a7538b5bb60fff9ff096bc9c9', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: 'ddd017fee5c66d79cd2c6239b847aacef9e04070', 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: 'a45aec86952e3172c76153b01a54076d97050de9', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: 'e138b7ec4c256c916ef52cef6d17f0d9a839d506', value: this.organizationVariables })), h("div", { key: '9444585d82bc85f2cf535ecc8921b2d3f67b398d', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: '030de51ff885c3ddf549fc4898c31ec23bb0d303', value: this.solutionVariables }))))))));
+        return (h(Host, { key: '0f8453b6c096fbac6e90f3e8f7efff3041201ca0' }, h("div", { key: 'e0638b863e6d445c3baf608bd3e52904a78bf670', class: "solution-data-container" }, h("calcite-shell", { key: 'fa3b1e80f768e489133c700f4e729ad2ebde88ef', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: '6fe1596637fce085f18d3a98362088320a72d248', class: "json-editor" }, h("div", { key: 'edcb77ca9a7dcc6c6c4018fd4571c690cd82f7b1', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: 'ea3a8b5d1b7ad20a60456daf107af678a68027a1', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), h("calcite-shell-panel", { key: '34b4c47647738d5a07eac01b4162d7a599c2cc16', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: 'e1609bd8e25b2af8989e4018ac4facaffe830897', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: '87576dba22c378c609710215954d6ea8e016c06c', 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: '279c775502f8cdbb5c01971b7c763cf5bd88de28', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: 'cd357642cb12ec25fe90ca011c90b80f37889d80', value: this.organizationVariables })), h("div", { key: '1adf2eb87308f4b85bc1fec11c80682b5e9dc131', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: 'a836a844cbcf6e9bbbae9e9d2eadead6570ce8f2', value: this.solutionVariables }))))))));
     }
     _initializing = false;
     //--------------------------------------------------------------------------

package/dist/collection/components/solution-variables/solution-variables.js

@@ -50,7 +50,7 @@ export class SolutionVariables {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '5d3ed27bced41fb6bf6c393ddde152fb0056d25b' }, h("div", { key: 'cb05d3c237719abd539b21b38968a41364c1880e' }, h("h4", { key: '367eb15af209dfed31b43f705fb6de05e25bb374', class: "org-var-header" }, this._translations.solVariables)), h("div", { key: '10142202269a9f2eaa82c0b50a1980d9f3051208', class: "container-border" }, h("calcite-tree", { key: 'd89353a7fe357851a697df036ae7795154254759', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
+        return (h(Host, { key: 'bb418465a19b2fa0a8f5e216ba853d7427a78fdf' }, h("div", { key: 'f628616eb2ef38cd657052666e53dfe72cb3f221' }, h("h4", { key: '97348278cfa8ecd968deb135c1fc9fe44971e7d2', class: "org-var-header" }, this._translations.solVariables)), h("div", { key: '91d5822a5358f95d37654d8a9eda66c3fe8f3318', class: "container-border" }, h("calcite-tree", { key: '7982f1e945f1d939ae52867764a438d67ed6a154', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/spatial-ref/spatial-ref.js

@@ -70,7 +70,7 @@ export class SpatialRef {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'f723d08854c429ea7eb3e9c5588089a5dd614440' }, h("div", { key: '5f91149d48e5df3f01479bec291d97c569ffd5d7' }, h("calcite-input", { key: 'fa6cd1622e62b9c830999afc0940adddabbcc2c2', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { key: '02e651be4895c57ddb0fbf319c5a41b5dc39472c', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
+        return (h(Host, { key: '03d381d5ad6c69f6c2d38d297580e3b1d651f733' }, h("div", { key: 'd36702bce1953d05f5954ab1522242033ae9baed' }, h("calcite-input", { key: '584b54ef1114d6792b2817ee23dda5e2cdc7687e', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { key: 'a151d8dbe443302ac6e6bad414642c6eb504ce4b', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
     }
     _lastHighlightedSref;
     //--------------------------------------------------------------------------

package/dist/collection/utils/interfaces.ts

@@ -373,7 +373,7 @@ export interface ITemplateInfo {
   title: string;
   type: string;
   typeKeywords: string[];
-  description: string;
+  snippet: string;
 }
 
 /**

package/dist/components/card-manager2.js

@@ -45,6 +45,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         this.zoomAndScrollToSelected = undefined;
         this.selectedFeaturesIds = undefined;
         this.enableCreateFeatures = true;
+        this.selectingFeatureFromMap = undefined;
         this._cardLoading = false;
         this._graphics = undefined;
         this._showCreateFeatureComponent = false;
@@ -137,8 +138,9 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         const messageClass = this._graphics?.length > 0 || this._showCreateFeatureComponent ? "display-none" : "";
         const isTable = this.layer?.isTable;
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
+        const guideMsg = this.customInfoText || this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '6089a5003e4ee08df4da7ecbcf8e6a3c8628f8bf' }, h("div", { key: '60dc1c21c650cce5165f56a0e040feba3652ae10', class: "overflow-auto height-full" }, h("calcite-shell", { key: '530a3173010e32fe062dc313ed3805833228f0fd', class: "position-relative " + featuresClass }, h("div", { key: 'af2350dac50f8ecc576cdeb528b350557057ff8d', class: "position-static z-index-500" }, h("info-card", { key: '626b34ec1ed2fc7e52f0ee2f9ae4520d1bcceb08', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '642531296a90d92068592eef75bc4632438a4cbc', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: 'b15e856439afdf9f08df9ff22f4e7dd7fee74273' }, h("calcite-panel", { key: '9305e17349e3b653565d1c183e118bdc3b791e23' }, h("div", { key: '25cf89836b8d20c6728842c5372e2c17dda967e6', class: "padding-1" }, h("calcite-notice", { key: '8df4a9c3e037f1b9f6131371d36a23e845db7ee2', icon: "table", open: true }, h("div", { key: '5c613ab8e9b9c25fc9f824e1007c3c4fa48b15b5', slot: "message" }, this.customInfoText || this._translations.selectFeaturesToStart))), showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'ba88fcd64b3cf2ae1fc36da58581974473d4e0b3', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: '5e64963bf756e397c819a4c60112191031d9113f', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '7d93240bffd381e2ed1e6dc10126b30cb1a143f9' }, h("calcite-panel", { key: '6ae7f4917394521b3226e38e07ac8eaf8c29b58e', heading: heading }, h("calcite-action", { key: '60cfdea79ad19ba0b62a9fb2ef3a6495c41b1f53', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "back" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'ab10ab259363cee6b872f7e6619518125141759e', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '7bcc2cfc05bfb95ef444b2036c0fd709f816bfe8' }, h("div", { key: '088e91d3084a43cab7da6e2985784a9675f30bfb', class: "overflow-auto height-full" }, h("calcite-shell", { key: '4ce541bdadc42cc2625756af104e144e61ca0593', class: "position-relative " + featuresClass }, h("div", { key: 'f3fd57ce5a0122df70d36a72e7d8c7ace4ffed0c', class: "position-static z-index-500" }, h("info-card", { key: 'ed1f8e88937d905928e97f1149acdc42fc557d7c', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '21cd22e9d40954324ab68ae0f44305541a78faa4', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: '2206f7bf57133e6249e84eed06363485dc540e89' }, h("calcite-panel", { key: 'a6a43c3eefcc1b03006dc14f39c9ba692620cf51' }, h("div", { key: 'f58c54e68a59e09ce8d51b010876e6f0261d920a', class: "padding-1" }, h("calcite-notice", { key: '5e57dcae6e804c3954a693d972a47171e07419a5', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '9391598f800576d7f8dd2ca5778d8a9d493df5cc', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'f30040df430858472437acef88f216040e4f3a4f', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: '6d14a7483427aa478f53e4ee54664ef2aae999fb', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: 'cace557395071006fcf0fc723f1808cad19f1099' }, h("calcite-panel", { key: '3eaa505ebf1d552775970c4f5b7dfc8f321c3f93', heading: heading }, h("calcite-action", { key: '68a09bb37ea2b6d827de48b13e1a41c74f5c34c6', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '3e326f1e523fe3245365a4dad69372b52a969ae3', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
@@ -149,7 +151,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
-            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id })));
+            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id, showGuidingMsgWhileDrawing: false })));
     }
     //--------------------------------------------------------------------------
     //
@@ -158,7 +160,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
     //--------------------------------------------------------------------------
     /**
      * Gets the Feature using its ids
-     *
+     * @param ids list of ids that are currently selected
      * @returns Promise when complete
      * @protected
      */
@@ -222,6 +224,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "selectedFeaturesIds": [16],
         "enableCreateFeatures": [4, "enable-create-features"],
+        "selectingFeatureFromMap": [4, "selecting-feature-from-map"],
         "_cardLoading": [32],
         "_graphics": [32],
         "_showCreateFeatureComponent": [32],

package/dist/components/create-feature2.js

@@ -33,8 +33,9 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.formElements = undefined;
         this.enableSearch = false;
         this.showGuidingMsg = true;
+        this.showGuidingMsgWhileDrawing = true;
         this._editorLoading = false;
-        this._showSearchWidget = undefined;
+        this._currentPage = "templatePicker";
         this._translations = undefined;
     }
     get el() { return this; }
@@ -116,10 +117,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * __esri.FeatureLayer: selected feature layer;
      */
     _selectedLayer;
-    /**
-     * boolean: flag to maintain if user is on template picker page
-     */
-    _isTemplatePickerPage = true;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -247,18 +244,20 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * Renders the component.
      */
     render() {
-        const showSearchWidget = this._showSearchWidget ? '' : 'display-none';
+        const showSearchWidget = this._currentPage === 'drawing' ? "" : "display-none";
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
         const mobileMapClass = this.isMobile ? "show-map" : "display-none";
-        let guidingMsg = this._translations.provideDetailsMsg;
-        if (this._isTemplatePickerPage) {
-            guidingMsg = this._translations.chooseCategoryMsg;
-        }
-        else if (this._showSearchWidget) {
+        // hide guiding msg for drawing page when showGuidingMsgWhileDrawing is false
+        const showGuidingMsg = this.showGuidingMsg && (this.showGuidingMsgWhileDrawing || this._currentPage !== "drawing");
+        let guidingMsg = this._translations.chooseCategoryMsg;
+        if (this._currentPage === 'drawing') {
             guidingMsg = this._translations.provideLocationMsg;
         }
-        return (h(Fragment, { key: '133234456f7ed2e79da7fa78f2e7dce9b760ffe0' }, this.showGuidingMsg && h("calcite-notice", { key: 'ba137886151c619694596fab63a737ba8172d6b2', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '8cda13ee2dfc2a29b0296bad845ac630e6f9c809', slot: "message" }, guidingMsg)), h("calcite-loader", { key: 'ea62147a93ace75c6ba2c5d139c726c9ae39da2b', class: loaderClass, label: "", scale: "s" }), h("div", { key: '746486adf9ab6776644d9c653faee7fe14c7d0c0', class: featureFormClass, id: "feature-form" }), this.enableSearch && h("div", { key: 'c9935155a8f48dc5ae517f75e83a60bddd860bfe', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '8743be66d70b08247f5209665ffafb808f78c5c2', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        else if (this._currentPage === 'featureForm') {
+            guidingMsg = this._translations.provideDetailsMsg;
+        }
+        return (h(Fragment, { key: '204a51ffceb754c202bcf93fda18560e6101ca65' }, showGuidingMsg && h("calcite-notice", { key: '329daebd157ea330d746508dcf2198fa1d56f852', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '995898cf5e0ea57d41571429758baf6c459097af', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '59bc1bce0936df76a432d75a5a4613d89203571c', class: loaderClass, label: "", scale: "s" }), h("div", { key: '814e3e6c63dc1880f235d2ffc5aa8ca9e22eb51e', class: featureFormClass, id: "feature-form" }), this.enableSearch && h("div", { key: '22146ca4dd94f57dddf80a04b4aeaa92fc0d3b81', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '8863876b3393fdcd4d2cdf254289f80d9fd16ef1', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -395,8 +394,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                 this._mapViewContainer?.classList?.replace("show-map", "hide-map");
                 this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
                 void this._setFloorLevel(this.floorLevel);
-                this._isTemplatePickerPage = false;
-                this._showSearchWidget = false;
+                this._currentPage = 'featureForm';
                 this.progressStatus.emit(1);
                 this.drawComplete.emit();
             }
@@ -405,10 +403,11 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         //Add handle to watch editor viewmodel state and then show the search widget
         const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
-                this._mapViewContainer?.classList?.replace("hide-map", "show-map");
-                this._isTemplatePickerPage = false;
-                if (this._selectedLayer && !this._selectedLayer.isTable) {
-                    this._showSearchWidget = true;
+                if (this._editor.viewModel.featureFormViewModel.state === 'disabled') {
+                    this._mapViewContainer?.classList?.replace("hide-map", "show-map");
+                    if (this._selectedLayer && !this._selectedLayer.isTable) {
+                        this._currentPage = 'drawing';
+                    }
                 }
             }
         });
@@ -675,8 +674,9 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "formElements": [8, "form-elements"],
         "enableSearch": [4, "enable-search"],
         "showGuidingMsg": [4, "show-guiding-msg"],
+        "showGuidingMsgWhileDrawing": [4, "show-guiding-msg-while-drawing"],
         "_editorLoading": [32],
-        "_showSearchWidget": [32],
+        "_currentPage": [32],
         "_translations": [32],
         "close": [64],
         "submit": [64],

package/dist/components/crowdsource-manager.js

@@ -67,7 +67,7 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.height-51{height:51%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-right{border-right:2px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.height-50{height:50%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-51{height:calc(100% - 51px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
 const CrowdsourceManagerStyle0 = crowdsourceManagerCss;
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
@@ -117,6 +117,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._hideFooter = false;
         this._hideTable = false;
         this._isMobile = false;
+        this._isPortraitMobile = false;
         this._translations = undefined;
         this._layer = undefined;
         this._layoutMode = ELayoutMode.GRID;
@@ -126,6 +127,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._numSelected = 0;
         this._filterOpen = false;
         this._showInformationHeader = true;
+        this._layerIds = undefined;
+        this._isLoading = true;
     }
     get el() { return this; }
     //--------------------------------------------------------------------------
@@ -168,6 +171,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * HTMLInstantAppsFilterListElement: Component from Instant Apps that supports interacting with the current filter config
      */
     _filterList;
+    /**
+     * HTMLMapCardElement: Map card refrence element
+     */
+    _mapCard;
     /**
      * boolean: True when app is directly rendered to map view layout
      */
@@ -217,7 +224,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Listen for when the popup is closed in mobile mode and hide the appropriate UI elements
      */
     async popupClosed() {
-        if (this._isMobile) {
+        if (this._isPortraitMobile) {
             this.showHideMapPopupAndTable(false);
         }
     }
@@ -243,10 +250,21 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const id = evt.detail[0];
         const layer = await getLayerOrTable(this._mapView, id);
         layer && await layer.when(() => {
+            // on render if no layer is present and only one table is present in map and app is in map view layer then change it to split layout
+            if (this._layerIds.length === 0 && this.appLayout === 'mapView' && layer.isTable) {
+                this._changeLayout('splitView');
+            }
             this._layer = layer;
             this._initLayerExpressions();
+            this._isLoading = false;
         });
     }
+    /**
+     * Get the layer ids from the map
+     */
+    async idsFound(evt) {
+        this._layerIds = evt.detail.layerIds;
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -267,7 +285,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '28614b892c93b83de202a681a756027472d092c2' }, h("calcite-shell", { key: '8f9c57fa9d1c1c88dbac9706376aad6bbd425691', class: "position-relative" }, h("calcite-panel", { key: '3c156df89f396425c2711a39968017cc23910a55', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (h(Host, { key: '797519a81cbac4330519ad114ca127efb4284b84' }, h("calcite-shell", { key: '253b4a3610a1b448e7db95dbdba9bfe931911d85', class: "position-relative" }, h("calcite-panel", { key: 'ed07e564d0ec7749121201f0e5fc64885d7794f9', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
     }
     /**
      * Called after each render
@@ -309,7 +327,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getFooter() {
         const hasSelectedFeatures = this._numSelected > 0;
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
+        return this._isPortraitMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
     }
     /**
      * sets the active layout to render
@@ -445,7 +463,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     _getMapAndCard(layoutMode, panelOpen, hideTable) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
-        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
+        const borderRight = !this._isPortraitMobile && this._isMobile ? "border-right" : "";
+        return (h("div", { class: `${mapSizeClass} overflow-hidden ${borderRight}` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
@@ -459,9 +478,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getMapNode(panelOpen) {
         const isMapLayout = this.appLayout === 'mapView';
         const isTableLayout = this.appLayout === 'tableView';
-        const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isPortraitMobile || panelOpen) ? "" : "adjusted-height-50";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
-        return (h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: !this._isMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: !this._isPortraitMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._mapCard = el, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
     }
     /**
      * Get the expand node for the popup information
@@ -470,17 +489,17 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _getPopupExpandNode() {
-        const popupNodeClass = "height-full";
-        const headerClass = this._isMobile && this._showInformationHeader ? "display-none height-0" : "";
-        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" : "";
-        const tableViewClass = this.appLayout === "tableView" ? "position-relative top-51" : "";
+        const popupNodeClass = this._isMobile ? "height-full" : "position-relative z-index-0";
+        const headerClass = this._isPortraitMobile && this._showInformationHeader ? "display-none height-0" : "";
+        const headerTheme = this.popupHeaderColor ? "" : !this._isPortraitMobile ? "calcite-mode-dark" : "calcite-mode-light";
+        const containerClass = this._isPortraitMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isPortraitMobile ? "display-none height-0" : "";
+        const tableViewClass = this.mapInfos?.length > 1 && this.appLayout === "tableView" ? "position-relative top-51" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
                 '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
                 '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
                 '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
-            } }, h("calcite-panel", null, !this._isMobile && this._showInformationHeader || this._numSelected > 0 ? (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))) : h("div", null), this._getCardNode())));
+            } }, h("calcite-panel", null, (!this._isPortraitMobile && this._showInformationHeader) || (this._numSelected > 0 && !this._isPortraitMobile) ? (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))) : h("div", null), this._getCardNode())));
     }
     /**
      * Get the card node
@@ -491,15 +510,15 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getCardNode() {
         const isMapLayout = this.appLayout === 'mapView';
         const isTableLayout = this.appLayout === 'tableView';
-        const cardManagerHeight = (isMapLayout || isTableLayout) ? "height-full" : this._numSelected > 0 ? "height-51" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isMobile ? "height-51" : "height-full";
+        const cardManagerHeight = isTableLayout && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : isMapLayout || isTableLayout ? "height-full" : (this._numSelected > 0 && !this._isMobile) ? "height-50" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isPortraitMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isMobile, layer: this._layer, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
+        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isPortraitMobile, layer: this._layer, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
                 this._changeLayout(this.appLayout);
                 this._showInformationHeader = true;
             }, onCreateWorkFlowStarted: () => {
                 this._changeLayout(this._layer.isTable ? "tableView" : "mapView");
                 this._showInformationHeader = false;
-            }, onFeatureOrRecordSubmitted: () => void this._layerTable.refresh(), selectedFeaturesIds: this._layerTable?.selectedIds, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+            }, onFeatureOrRecordSubmitted: () => void this._layerTable.refresh(), selectedFeaturesIds: this._layerTable?.selectedIds, selectingFeatureFromMap: this.appLayout === "mapView", zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
     }
     /**
      * Get the table node based for the current layout
@@ -513,7 +532,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getTable(layoutMode, panelOpen, hideTable) {
         const isMapLayout = this.appLayout === 'mapView';
         const isTableLayout = this.appLayout === 'tableView';
-        const tableClass = hideTable && this._isMobile ? "visibility-hidden" : isMapLayout ? "display-none" : "";
+        const tableClass = hideTable && this._isPortraitMobile ? "visibility-hidden" : isMapLayout ? "display-none" : "";
         const mapClass = isMapLayout ? "height-full width-full z-index-0" : "display-none";
         const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
         const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
@@ -523,7 +542,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, h("layer-table", { createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), h("div", { class: mapClass, id: "full-map-view" })));
+        return (h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, h("layer-table", { createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isPortraitMobile, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), h("div", { class: mapClass, id: "full-map-view" })));
     }
     /**
      * Returns the Actions for table's node
@@ -535,7 +554,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
         const id = "toggle-layout";
-        return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, h("span", null, this._translations.splitView)), h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, h("span", null, this._translations.tableView)), h("calcite-action", { active: this.appLayout === 'mapView', class: "toggle-node", icon: "browser-map", id: "browser-map-action", onClick: () => { this._changeLayout('mapView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, h("span", null, this._translations.mapView)), h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, tooltip))));
+        return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, h("span", null, this._translations.splitView)), h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, h("span", null, this._translations.tableView)), h("calcite-action", { active: this.appLayout === 'mapView', class: "toggle-node", disabled: this._layerIds?.length === 0, icon: "browser-map", id: "browser-map-action", onClick: () => { this._changeLayout('mapView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, h("span", null, this._translations.mapView)), h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, tooltip))));
     }
     /**
      * Show filter component in modal
@@ -544,7 +563,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _filterModal() {
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => void this._layerTable?.filterUpdate(), ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => {
+                this._handleFilterListReset();
+                void this._mapCard.resetFilter();
+            }, onFilterUpdate: () => {
+                void this._layerTable?.filterUpdate();
+                void this._mapCard.updateFilterState();
+            }, ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false }))));
     }
     /**
      * Store any filters for the current layer.
@@ -596,13 +621,18 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const isMobile = this.el.offsetWidth < 1024;
         const forceOpen = !this._isMobile && isMobile;
         this._isMobile = isMobile;
-        this._layoutMode = this._isMobile ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
         if (forceOpen) {
             this._panelOpen = true;
         }
         if (this._isMobile) {
             this.showHideMapPopupAndTable(!this._isMobile);
+            this._isPortraitMobile = !!window.matchMedia("(orientation: portrait)").matches;
+            this._changeLayout('splitView');
         }
+        else {
+            this._isPortraitMobile = false;
+        }
+        this._layoutMode = this._isPortraitMobile ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
     }
     /**
      * Open/Close the appropriate panel.
@@ -623,6 +653,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         if (this.appLayout !== appLayout) {
             this._setActiveLayout(appLayout);
             this.appLayout = appLayout;
+            // update the layer if table selected while switching to map view
+            if (this.appLayout === "mapView" && this._layer.isTable) {
+                void this._mapCard.updateLayer();
+            }
             if (this._isMapViewOnLoad) {
                 void this._layerTable.refresh();
                 this._isMapViewOnLoad = false;
@@ -780,6 +814,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_hideFooter": [32],
         "_hideTable": [32],
         "_isMobile": [32],
+        "_isPortraitMobile": [32],
         "_translations": [32],
         "_layer": [32],
         "_layoutMode": [32],
@@ -788,8 +823,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_panelOpen": [32],
         "_numSelected": [32],
         "_filterOpen": [32],
-        "_showInformationHeader": [32]
-    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "layerSelectionChange", "layerSelectionChange"]], {
+        "_showInformationHeader": [32],
+        "_layerIds": [32],
+        "_isLoading": [32]
+    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "idsFound", "idsFound"]], {
         "enableZoom": ["enableZoomWatchHandler"],
         "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
     }]);

package/dist/components/crowdsource-reporter.js

@@ -354,7 +354,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '16e9300d50c0f297e8907faa6d1b5d0d29db7b5a' }, this._reportSubmitted && h("calcite-alert", { key: '20ce64b9b92b16ddc401c5fef1c98fe41f1ffd6a', "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: '3920ae43163250762cb06218832a040b3b59ada3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '7d0351ebe3b7e44e98bd832ce6f1ce8ae0bd375c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '9cf77e454f532f79af03fea75b164193260a828a', slot: "title" }, this._translations.error), h("div", { key: '5876f176b1f6eaf0cf48ef9ea6a87ee00d9970d5', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '220c51839d4317ccf2c74c1dbf5f38da38463b31', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '959a7ae5c5636c16480f8a5b9c260d2d422aef92', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '4601ba02cfd8effe6826f8615529046df48f688b', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '08c880690050a6796b772c8d740fba1491987e43', slot: "title" }, this._translations.error), h("div", { key: 'e1e4feb46b19f061bc0f4daeede7daa8eff5f51a', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '558b7ccf3ed3acc72bf6b9a8d26523021aed0960' }, h("calcite-shell", { key: '73992f9a17f5723f9da27350a16555edc56dca46', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: '198fe34894f73b66ac15c4f75b05e3159586a392' }, this._reportSubmitted && h("calcite-alert", { key: '2c07a26c0fce4f5b66a2245850f7fca6e7cc2333', "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: 'f3269fd5bc315913f25795fc4dda47d83de7166f', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '974254aa4eec7166ce23c9513633174b26d45a4d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f0e27267cb6bdc626340185ff3af5c8527c5755c', slot: "title" }, this._translations.error), h("div", { key: 'ce443229655784ecc106ef4f90375a0d2ba14679', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '8094e9db5856630b6dbbd4f37de35afc8fc0cab9', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '9fea022654934c6b58064f71e6c7cb59e4429732', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '21cd17c9a43553c40427759070ec5f7d86bcb471', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '82ca845385e34740ab2af082a5338a851ad0c006', slot: "title" }, this._translations.error), h("div", { key: '9dd641fe9e78e83387a266df51b8f709409bd332', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '1977a4e41c0f222385585f0a0a6c19a99432846b' }, h("calcite-shell", { key: '67d0771f744f5ba427cef2b453dee3470d2fe5bc', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //