@esri/solutions-components 0.10.32 → 0.10.34

package/dist/collection/assets/t9n/map-card/resources.json

@@ -5,5 +5,6 @@
   "zoom": "Zoom",
   "refresh": "Refresh",
   "editMultiple": "Edit multiple",
-  "clearSelection": "Clear selection"
+  "clearSelection": "Clear selection",
+  "share": "Share"
 }

package/dist/collection/assets/t9n/map-card/resources_en.json

@@ -5,5 +5,6 @@
   "zoom": "Zoom",
   "refresh": "Refresh",
   "editMultiple": "Edit multiple",
-  "clearSelection": "Clear selection"
+  "clearSelection": "Clear selection",
+  "share": "Share"
 }

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

@@ -130,9 +130,9 @@ export class CardManager {
         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 guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        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)))))));
+        return (h(Host, { key: '7360aa9c48dd0c3e4a14fe0833b99c301388f93c' }, h("div", { key: '9d610f0c4728c238eceb790e97a4e06b77f1a2d1', class: "overflow-auto height-full" }, h("calcite-shell", { key: '4b6a02205a971c7ff61aab567b2f2a3c5d288f8d', class: "position-relative " + featuresClass }, h("div", { key: '96ee8ce138265dd4b562ac0a33b79a0db4497842', class: "position-static z-index-500" }, h("info-card", { key: '7db359bc1016281fd01b737dc5c424fe78995422', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: 'afc8d06e9aa3213a9ca10c929497ed4618a28e91', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: '46db92a6e259eefea3293310e3e2f43d7639db97' }, h("calcite-panel", { key: 'd2bc23ae7bcf2b7b7b48a35efc0697e0d1f9e23e' }, h("div", { key: '8f7fd13f9ec99beec1d7231dda03eba403a70a69', class: "padding-1" }, h("calcite-notice", { key: '2fbe94292c1dd91ee1691b8e3d295225ff5b534b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '9f91099e4bfa0675c5b098a73b2f132b80ee76b0', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'c1b04e776f3750712992d736e09726cc26eae5db', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: 'a71d4b0abd1ec1a4ed14a2cb3dcb10a075f54bf0', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '85047b527f5995a912b527325f287c3596caf630' }, h("calcite-panel", { key: 'd335be81502e0feb803ee9ad4e501d4c85f184f5', heading: heading }, h("calcite-action", { key: 'b179c3185dbada3bd052d38b98b75cf29240655c', 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: 'f3b6655e3effdb6b09e64acd651a09d6028a6df9', 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

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

@@ -29,6 +29,7 @@ export class CrowdsourceManager {
         this.basemapConfig = undefined;
         this.coverPageEnabled = undefined;
         this.customInfoText = undefined;
+        this.defaultAppLayout = undefined;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -89,6 +90,10 @@ export class CrowdsourceManager {
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * boolean: When true the default appLayout has been applied and should no longer override
+     */
+    _defaultAppLayoutHonored = false;
     /**
      * boolean: When true the map view will be set after render due to popup obstructing the view
      * MapView.when is not fired when mapView is not currently visible
@@ -238,7 +243,7 @@ export class CrowdsourceManager {
     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: '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()));
+        return (h(Host, { key: 'ddb8bb35d74ab89ffd62d7bd0468b5a757fa5ba1' }, h("calcite-shell", { key: '74d941a3b1d4149a57c88cea263a2fd7e2b4f840', class: "position-relative" }, h("calcite-panel", { key: '3ff44942eab43c6f3a1cd92c918c0e2bae3d500a', 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
@@ -257,7 +262,11 @@ export class CrowdsourceManager {
      */
     async componentDidLoad() {
         this._resizeObserver.observe(this.el);
-        if (this.hideMapOnLoad && !this.appLayout) {
+        if (!this._defaultAppLayoutHonored && this.defaultAppLayout) {
+            this._defaultAppLayoutHonored = true;
+            this.appLayout = this.defaultAppLayout;
+        }
+        else if (this.hideMapOnLoad && !this.appLayout) {
             this.appLayout = 'tableView';
         }
         else if (!this.appLayout) {
@@ -433,7 +442,7 @@ export class CrowdsourceManager {
         const isTableLayout = this.appLayout === 'tableView';
         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._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 })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, h("map-card", { appLayout: this.appLayout, 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, enableShare: this.enableShare, 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, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
     }
     /**
      * Get the expand node for the popup information
@@ -495,7 +504,7 @@ export class CrowdsourceManager {
             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._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" })));
+        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", { appLayout: this.appLayout, 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
@@ -828,6 +837,29 @@ export class CrowdsourceManager {
                 "attribute": "custom-info-text",
                 "reflect": false
             },
+            "defaultAppLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AppLayout",
+                    "resolved": "\"mapView\" | \"splitView\" | \"tableView\"",
+                    "references": {
+                        "AppLayout": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::AppLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: default layout the application should use"
+                },
+                "attribute": "default-app-layout",
+                "reflect": false
+            },
             "defaultCenter": {
                 "type": "string",
                 "mutable": false,

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

@@ -83,6 +83,10 @@ export class FeatureList {
      * __esri.Handle: Highlight handle of the selections
      */
     _highlightHandle;
+    /**
+     * __esri.Collection: Highlight options for the selected layer
+     */
+    _highlights;
     /**
      * HTMLCalcitePaginationElement: Calcite pagination element instance
      */
@@ -183,9 +187,9 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: 'fc2cc60231efb7fc4a05d3ade0bad6a3dd649b8e', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '43c8176c2aaf0cc7f36a9f1ff477f53890cfcf2d', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: 'dff1bb7207397ded8a557b61e9185ea788520441', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'c1dd4e7fb8398c4317270b50eba7e6270fd7051b', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '49019c011e8667d193f566826644b0693b0fb6f9', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '12e767a001c4dffec7e771d12b772fb43bbf9b0f', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'd6a8a9eac72fe7217eda926f46baedcb4e6d5859', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '381f7da40e715848d4601810aacedbe3a7a46d6d', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '62d128eee1b0a987fe24764b8cfbff148dcf9084', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '975aef0b4c33676fc2be4aa85a51641d0b203cd4', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'c002eb4d59d8bab086d91266ca4a0ca56a185db3', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '50f0c269f30e9619561ea61f462fb964f91a93a9', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '97f837035b89d3045efd2771c0ef77d12fbb333b', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'd88adbe6499b358395bd7bf5917c3d0c1506d8b1', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -304,7 +308,12 @@ export class FeatureList {
         if (this.highlightOnHover) {
             const oId = selectedFeature.getObjectId();
             const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            // this is a workaround added for https://github.com/Esri/solutions-components/issues/920
+            if (this._highlights) {
+                selectedLayerView.highlights = JSON.parse(this._highlights);
+            }
             selectedLayerView.highlightOptions = { color: new this.Color("#FFFF00") };
+            this._highlights = JSON.stringify(selectedLayerView.highlights);
             this._highlightHandle = selectedLayerView.highlight([oId]);
         }
     }

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

@@ -27,6 +27,7 @@ import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 export class LayerTable {
     constructor() {
+        this.appLayout = undefined;
         this.defaultGlobalId = undefined;
         this.defaultLayerId = undefined;
         this.defaultOid = undefined;
@@ -235,6 +236,12 @@ export class LayerTable {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Update the url params when the appLayout changes
+     */
+    appLayoutWatchHandler() {
+        this._updateShareUrl();
+    }
     /**
      * Handle url defaults when defaultOid is set
      */
@@ -521,8 +528,8 @@ export class LayerTable {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: '46394d7e108068600980efd766fbf5d91243f3c9' }, h("calcite-shell", { key: 'd831121a56070552139386033b02ddc2531c29e9' }, this._getTableControlRow("header"), h("div", { key: '591e0b0bba19f1dbe99049a470b5d3c04253a2c2', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd70244a3c989a5bea8bbbaf33c4ebe9c04fc4515', class: "height-full width-full" }, showSearch &&
-            h("div", { key: 'fd14c6dab7898e27bd61bbc03878c898d26f042a', class: "search-container" }, h("calcite-input", { key: '9675cc22233456446be8a6b9fc24842fbb3f88e2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '74447458a0ac4cee6934e7101a5fee2c180d1330', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '6c2a5ff4a69690fde002005eb9c55047c25ad63d', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: 'aa79d91e6c569393334a38f937a493de227a0e5b' }, h("calcite-shell", { key: '4b7460fc764c5a6027ad5aa8da826bd188e5490e' }, this._getTableControlRow("header"), h("div", { key: '66ea361c6c2c3a5d05c4403a5d3dd1dea5a9e70b', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'b213a696294c94504f394b54082f0183b46691ce', class: "height-full width-full" }, showSearch &&
+            h("div", { key: '866dd2a69bc9e504b459ca8639d13f5babfa65fa', class: "search-container" }, h("calcite-input", { key: '26f80276d08106981ef8c769fd4334528a37d881', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: 'a3d2e215cee3e370ef5645b6422c95eef32beedf', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'e48c86ee1ebcc23121eab08903e55cc41270c4c8', 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.createFilterModal && this._filterModal()));
     }
@@ -1131,6 +1138,7 @@ export class LayerTable {
         else {
             urlObj.searchParams.delete("oid");
         }
+        urlObj.searchParams.set("applayout", this.appLayout);
         this._shareNode.shareUrl = urlObj.href;
     }
     /**
@@ -1887,6 +1895,29 @@ export class LayerTable {
     }
     static get properties() {
         return {
+            "appLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AppLayout",
+                    "resolved": "\"mapView\" | \"splitView\" | \"tableView\"",
+                    "references": {
+                        "AppLayout": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::AppLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "AppLayout: the current app layout"
+                },
+                "attribute": "app-layout",
+                "reflect": false
+            },
             "defaultGlobalId": {
                 "type": "unknown",
                 "mutable": false,
@@ -2360,6 +2391,9 @@ export class LayerTable {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "appLayout",
+                "methodName": "appLayoutWatchHandler"
+            }, {
                 "propName": "defaultOid",
                 "methodName": "defaultOidWatchHandler"
             }, {

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

@@ -23,6 +23,7 @@ import { loadModules } from "../../utils/loadModules";
 import { joinAppProxies } from "templates-common-library-esm/functionality/proxy";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getFeatureLayerView, goToSelection } from "../../utils/mapViewUtils";
+import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 // TODO navigation and accessability isn't right for the map list
 //   tab does not go into the list when it's open
 //   focus is not set when it opens
@@ -31,6 +32,7 @@ import { getFeatureLayerView, goToSelection } from "../../utils/mapViewUtils";
 // TODO map list should close if the user clicks something else...hope this will be easy when I figure out how to set focus when it opens
 export class MapCard {
     constructor() {
+        this.appLayout = undefined;
         this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.defaultLayerId = undefined;
@@ -38,6 +40,7 @@ export class MapCard {
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
+        this.enableShare = false;
         this.enableSingleExpand = true;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
@@ -55,6 +58,8 @@ export class MapCard {
         this.theme = undefined;
         this.toolOrder = undefined;
         this.isMapLayout = undefined;
+        this.shareIncludeEmbed = undefined;
+        this.shareIncludeSocial = undefined;
         this.selectedFeaturesIds = undefined;
         this.selectedLayer = undefined;
         this.zoomToScale = undefined;
@@ -143,6 +148,10 @@ export class MapCard {
      * ResizeObserver: The observer that watches for toolbar size changes
      */
     _resizeObserver;
+    /**
+     * HTMLInstantAppsSocialShareElement: Element to support app sharing to social media
+     */
+    _shareNode;
     /**
      * HTMLCalciteDropdownElement: Dropdown the will support show/hide of table columns
      */
@@ -172,12 +181,36 @@ export class MapCard {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Update the url params when the appLayout changes
+     */
+    appLayoutWatchHandler() {
+        this._updateShareUrl();
+    }
     /**
      * Add/remove home widget
      */
     enableHomeWatchHandler() {
         this._initHome();
     }
+    /**
+     * Update the toolbar when the share button is enabled/disabled
+     */
+    enableShareWatchHandler() {
+        // this should be caught by component did render and is when I test locally
+        // however have had reported case where it is not somehow on devext so adding explicit check here
+        if (this._toolbar) {
+            this._updateToolbar();
+        }
+    }
+    /**
+     * watch for changes in map view and get the first layer
+     */
+    async mapViewWatchHandler() {
+        if (this.mapView) {
+            this._updateShareUrl();
+        }
+    }
     /**
      * watch for changes in layer view and verify if it has editing enabled
      */
@@ -190,6 +223,7 @@ export class MapCard {
      * watch for features ids changes
      */
     async selectedFeaturesIdsWatchHandler() {
+        this._updateShareUrl();
         this._validateEnabledActions();
     }
     /**
@@ -218,12 +252,14 @@ export class MapCard {
      */
     async resetFilter() {
         this._filterActive = false;
+        this._updateShareUrl();
     }
     /**
      * updates the filter
      */
     async updateFilterState() {
         this._filterActive = this._definitionExpression !== this.selectedLayer.definitionExpression;
+        this._updateShareUrl();
     }
     /**
      * updates the layer in map layer picker
@@ -299,7 +335,7 @@ export class MapCard {
         const mapHeightClass = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full";
         const progressClass = this.isMapLayout ? "" : "display-none";
         this._validateActiveActions();
-        return (h(Host, { key: '94d7399ed75c0e90487d6153a0d28ab6f722ae93' }, h("div", { key: 'e194d8800dd7a865e101d779d032d164f3e5562d', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options")), h("calcite-progress", { key: '0abdbf4e8ba5861866aba7791dfdb91a7a5f4daa', class: progressClass, value: 0 }), h("div", { key: '83aa012aeef6ae64e49007d542fd949e7d4602f4', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '229cc18b36885cad12d44c13e1fe37a97403b9d8', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, { key: '790599924cf104116f6961380103aef7c55e6d76' }, h("div", { key: '5467a5d4e3998807fdf243ada3088dba8e69941f', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), h("calcite-progress", { key: '5c82042e0206be05e12d29ba588b26344b1017b8', class: progressClass, value: 0 }), h("div", { key: '0831bc4593f5a7680a8599a9868990734cb013b9', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '5bbf14428cc845d8b889e72d707672250f820686', 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
@@ -318,6 +354,7 @@ export class MapCard {
             this._resizeObserver.observe(this._toolbar);
             this._observerSet = true;
         }
+        this._updateShareUrl();
     }
     //--------------------------------------------------------------------------
     //
@@ -396,6 +433,7 @@ export class MapCard {
                 mapView: this.mapView
             });
         }
+        this._updateShareUrl();
     }
     /**
      * Add/Remove tools from the action bar and dropdown based on available size
@@ -414,7 +452,7 @@ export class MapCard {
                     prev += cur.width;
                     return prev;
                 }, 0);
-                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker"];
+                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker", "solutions-action-share"];
                 if (controlsWidth > toolbarWidth) {
                     if (this._toolbarSizeInfos.length > 0) {
                         const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
@@ -540,6 +578,50 @@ export class MapCard {
             return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.icon, id: "solutions-subset-list", onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })))) : undefined;
     }
+    /**
+     * Get an action and tooltip for share
+     *
+     * @param icon string the name of the icon to display, will also be used in its id
+     *
+     * @returns VNode The node representing the DOM element that will contain the action
+     */
+    _getShare(icon) {
+        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", embed: this.shareIncludeEmbed, popoverButtonIconScale: "s", ref: el => {
+                this._shareNode = el;
+                this._updateShareUrl();
+            }, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", socialMedia: this.shareIncludeSocial, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
+    }
+    /**
+     * Called each time the values that are used for custom url params change
+     */
+    _updateShareUrl() {
+        const url = this._shareNode?.shareUrl;
+        if (!url) {
+            return;
+        }
+        const urlObj = new URL(url);
+        //set the additional search params
+        if (this._loadedId) {
+            urlObj.searchParams.set("webmap", this._loadedId);
+        }
+        else {
+            urlObj.searchParams.delete("webmap");
+        }
+        if (this.selectedLayer?.id) {
+            urlObj.searchParams.set("layer", this.selectedLayer.id);
+        }
+        else {
+            urlObj.searchParams.delete("layer");
+        }
+        if (this.selectedFeaturesIds?.length > 0) {
+            urlObj.searchParams.set("oid", this.selectedFeaturesIds.join(","));
+        }
+        else {
+            urlObj.searchParams.delete("oid");
+        }
+        urlObj.searchParams.set("applayout", this.appLayout);
+        this._shareNode.shareUrl = urlObj.href;
+    }
     /**
      * Open show/hide dropdown
      * @protected
@@ -827,6 +909,29 @@ export class MapCard {
     }
     static get properties() {
         return {
+            "appLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AppLayout",
+                    "resolved": "\"mapView\" | \"splitView\" | \"tableView\"",
+                    "references": {
+                        "AppLayout": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::AppLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "AppLayout: the current app layout"
+                },
+                "attribute": "app-layout",
+                "reflect": false
+            },
             "appProxies": {
                 "type": "any",
                 "mutable": false,
@@ -947,6 +1052,24 @@ export class MapCard {
                 "attribute": "enable-fullscreen",
                 "reflect": false
             },
+            "enableShare": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the share widget will be available"
+                },
+                "attribute": "enable-share",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "enableSingleExpand": {
                 "type": "boolean",
                 "mutable": false,
@@ -1270,6 +1393,40 @@ export class MapCard {
                 "attribute": "is-map-layout",
                 "reflect": false
             },
+            "shareIncludeEmbed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the share options will include embed option"
+                },
+                "attribute": "share-include-embed",
+                "reflect": false
+            },
+            "shareIncludeSocial": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the share options will include social media sharing"
+                },
+                "attribute": "share-include-social",
+                "reflect": false
+            },
             "selectedFeaturesIds": {
                 "type": "unknown",
                 "mutable": false,
@@ -1516,8 +1673,17 @@ export class MapCard {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "appLayout",
+                "methodName": "appLayoutWatchHandler"
+            }, {
                 "propName": "enableHome",
                 "methodName": "enableHomeWatchHandler"
+            }, {
+                "propName": "enableShare",
+                "methodName": "enableShareWatchHandler"
+            }, {
+                "propName": "mapView",
+                "methodName": "mapViewWatchHandler"
             }, {
                 "propName": "selectedLayer",
                 "methodName": "selectedLayerWatchHandler"

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

@@ -79,7 +79,8 @@ export class SolutionItemIcon {
      */
     _getIconUrl(type, typeKeywords) {
         const icon = this._getItemIcon(type, typeKeywords);
-        return getAssetPath(`./item-icons/${icon}16.svg`);
+        return icon === "group" ? getAssetPath(`./item-icons/${icon}16.png`) :
+            getAssetPath(`./item-icons/${icon}16.svg`);
     }
     /**
      * This function was copied and slightly modified from the arcgis-app-components.
@@ -130,6 +131,8 @@ export class SolutionItemIcon {
                     return "utilitynetwork";
                 }
                 return hosted ? "featureshosted" : "features";
+            case "group":
+                return "group";
             case "group layer":
                 if (keywords.includes("Map")) {
                     return "layergroup2d";

package/dist/components/card-manager2.js

@@ -138,9 +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 guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        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)))))));
+        return (h(Host, { key: '7360aa9c48dd0c3e4a14fe0833b99c301388f93c' }, h("div", { key: '9d610f0c4728c238eceb790e97a4e06b77f1a2d1', class: "overflow-auto height-full" }, h("calcite-shell", { key: '4b6a02205a971c7ff61aab567b2f2a3c5d288f8d', class: "position-relative " + featuresClass }, h("div", { key: '96ee8ce138265dd4b562ac0a33b79a0db4497842', class: "position-static z-index-500" }, h("info-card", { key: '7db359bc1016281fd01b737dc5c424fe78995422', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: 'afc8d06e9aa3213a9ca10c929497ed4618a28e91', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: '46db92a6e259eefea3293310e3e2f43d7639db97' }, h("calcite-panel", { key: 'd2bc23ae7bcf2b7b7b48a35efc0697e0d1f9e23e' }, h("div", { key: '8f7fd13f9ec99beec1d7231dda03eba403a70a69', class: "padding-1" }, h("calcite-notice", { key: '2fbe94292c1dd91ee1691b8e3d295225ff5b534b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '9f91099e4bfa0675c5b098a73b2f132b80ee76b0', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'c1b04e776f3750712992d736e09726cc26eae5db', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: 'a71d4b0abd1ec1a4ed14a2cb3dcb10a075f54bf0', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '85047b527f5995a912b527325f287c3596caf630' }, h("calcite-panel", { key: 'd335be81502e0feb803ee9ad4e501d4c85f184f5', heading: heading }, h("calcite-action", { key: 'b179c3185dbada3bd052d38b98b75cf29240655c', 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: 'f3b6655e3effdb6b09e64acd651a09d6028a6df9', 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