@esri/solutions-components 0.10.32 → 0.10.34

package/dist/components/map-card2.js

@@ -7,35 +7,36 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { c as getFeatureLayerView, b as goToSelection } from './mapViewUtils.js';
-import { d as defineCustomElement$z } from './basemap-gallery2.js';
-import { d as defineCustomElement$y } from './action.js';
-import { d as defineCustomElement$x } from './action-bar.js';
-import { d as defineCustomElement$w } from './action-group.js';
-import { d as defineCustomElement$v } from './action-menu.js';
-import { d as defineCustomElement$u } from './button.js';
-import { d as defineCustomElement$t } from './chip.js';
-import { d as defineCustomElement$s } from './combobox.js';
-import { d as defineCustomElement$r } from './combobox-item.js';
-import { d as defineCustomElement$q } from './dropdown.js';
-import { d as defineCustomElement$p } from './dropdown-group.js';
-import { d as defineCustomElement$o } from './dropdown-item.js';
-import { d as defineCustomElement$n } from './filter2.js';
-import { d as defineCustomElement$m } from './handle.js';
-import { d as defineCustomElement$l } from './icon.js';
-import { d as defineCustomElement$k } from './input.js';
-import { d as defineCustomElement$j } from './label2.js';
-import { d as defineCustomElement$i } from './list.js';
-import { d as defineCustomElement$h } from './list-item.js';
-import { d as defineCustomElement$g } from './loader.js';
-import { d as defineCustomElement$f } from './notice.js';
-import { d as defineCustomElement$e } from './option.js';
-import { d as defineCustomElement$d } from './popover.js';
-import { d as defineCustomElement$c } from './progress.js';
-import { d as defineCustomElement$b } from './scrim.js';
-import { d as defineCustomElement$a } from './select.js';
-import { d as defineCustomElement$9 } from './stack.js';
-import { d as defineCustomElement$8 } from './tooltip.js';
-import { d as defineCustomElement$7 } from './floor-filter2.js';
+import { d as defineCustomElement$A } from './basemap-gallery2.js';
+import { d as defineCustomElement$z } from './action.js';
+import { d as defineCustomElement$y } from './action-bar.js';
+import { d as defineCustomElement$x } from './action-group.js';
+import { d as defineCustomElement$w } from './action-menu.js';
+import { d as defineCustomElement$v } from './button.js';
+import { d as defineCustomElement$u } from './chip.js';
+import { d as defineCustomElement$t } from './combobox.js';
+import { d as defineCustomElement$s } from './combobox-item.js';
+import { d as defineCustomElement$r } from './dropdown.js';
+import { d as defineCustomElement$q } from './dropdown-group.js';
+import { d as defineCustomElement$p } from './dropdown-item.js';
+import { d as defineCustomElement$o } from './filter2.js';
+import { d as defineCustomElement$n } from './handle.js';
+import { d as defineCustomElement$m } from './icon.js';
+import { d as defineCustomElement$l } from './input.js';
+import { d as defineCustomElement$k } from './label2.js';
+import { d as defineCustomElement$j } from './list.js';
+import { d as defineCustomElement$i } from './list-item.js';
+import { d as defineCustomElement$h } from './loader.js';
+import { d as defineCustomElement$g } from './notice.js';
+import { d as defineCustomElement$f } from './option.js';
+import { d as defineCustomElement$e } from './popover.js';
+import { d as defineCustomElement$d } from './progress.js';
+import { d as defineCustomElement$c } from './scrim.js';
+import { d as defineCustomElement$b } from './select.js';
+import { d as defineCustomElement$a } from './stack.js';
+import { d as defineCustomElement$9 } from './tooltip.js';
+import { d as defineCustomElement$8 } from './floor-filter2.js';
+import { d as defineCustomElement$7 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$6 } from './map-fullscreen2.js';
 import { d as defineCustomElement$5 } from './map-layer-picker2.js';
 import { d as defineCustomElement$4 } from './map-legend2.js';
@@ -93,6 +94,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this.beforeMapChanged = createEvent(this, "beforeMapChanged", 7);
         this.toggleFilter = createEvent(this, "toggleFilter", 7);
         this.clearSelection = createEvent(this, "clearSelection", 7);
+        this.appLayout = undefined;
         this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.defaultLayerId = undefined;
@@ -100,6 +102,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
+        this.enableShare = false;
         this.enableSingleExpand = true;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
@@ -117,6 +120,8 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this.theme = undefined;
         this.toolOrder = undefined;
         this.isMapLayout = undefined;
+        this.shareIncludeEmbed = undefined;
+        this.shareIncludeSocial = undefined;
         this.selectedFeaturesIds = undefined;
         this.selectedLayer = undefined;
         this.zoomToScale = undefined;
@@ -200,6 +205,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * 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
      */
@@ -229,12 +238,36 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     //  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
      */
@@ -247,6 +280,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * watch for features ids changes
      */
     async selectedFeaturesIdsWatchHandler() {
+        this._updateShareUrl();
         this._validateEnabledActions();
     }
     /**
@@ -275,12 +309,14 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      */
     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
@@ -356,7 +392,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         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
@@ -375,6 +411,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             this._resizeObserver.observe(this._toolbar);
             this._observerSet = true;
         }
+        this._updateShareUrl();
     }
     //--------------------------------------------------------------------------
     //
@@ -453,6 +490,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
                 mapView: this.mapView
             });
         }
+        this._updateShareUrl();
     }
     /**
      * Add/Remove tools from the action bar and dropdown based on available size
@@ -471,7 +509,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
                     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) => {
@@ -597,6 +635,50 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             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
@@ -872,13 +954,17 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "appLayout": ["appLayoutWatchHandler"],
         "enableHome": ["enableHomeWatchHandler"],
+        "enableShare": ["enableShareWatchHandler"],
+        "mapView": ["mapViewWatchHandler"],
         "selectedLayer": ["selectedLayerWatchHandler"],
         "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"]
     }; }
     static get style() { return MapCardStyle0; }
 }, [0, "map-card", {
+        "appLayout": [1, "app-layout"],
         "appProxies": [8, "app-proxies"],
         "defaultWebmapId": [1, "default-webmap-id"],
         "defaultLayerId": [1, "default-layer-id"],
@@ -886,6 +972,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         "enableLegend": [4, "enable-legend"],
         "enableFloorFilter": [4, "enable-floor-filter"],
         "enableFullscreen": [4, "enable-fullscreen"],
+        "enableShare": [4, "enable-share"],
         "enableSingleExpand": [4, "enable-single-expand"],
         "enableSearch": [4, "enable-search"],
         "enableBasemap": [4, "enable-basemap"],
@@ -903,6 +990,8 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         "theme": [1],
         "toolOrder": [16],
         "isMapLayout": [4, "is-map-layout"],
+        "shareIncludeEmbed": [4, "share-include-embed"],
+        "shareIncludeSocial": [4, "share-include-social"],
         "selectedFeaturesIds": [16],
         "selectedLayer": [16],
         "zoomToScale": [2, "zoom-to-scale"],
@@ -919,7 +1008,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         "updateFilterState": [64],
         "updateLayer": [64]
     }, [[8, "mapInfoChange", "mapInfoChange"], [8, "noLayersFound", "noLayersFound"], [8, "layerSelectionChange", "layerSelectionChange"]], {
+        "appLayout": ["appLayoutWatchHandler"],
         "enableHome": ["enableHomeWatchHandler"],
+        "enableShare": ["enableShareWatchHandler"],
+        "mapView": ["mapViewWatchHandler"],
         "selectedLayer": ["selectedLayerWatchHandler"],
         "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"]
@@ -928,7 +1020,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["map-card", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-stack", "calcite-tooltip", "floor-filter", "map-fullscreen", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
+    const components = ["map-card", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-stack", "calcite-tooltip", "floor-filter", "instant-apps-social-share", "map-fullscreen", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
     components.forEach(tagName => { switch (tagName) {
         case "map-card":
             if (!customElements.get(tagName)) {
@@ -937,145 +1029,150 @@ function defineCustomElement() {
             break;
         case "basemap-gallery":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "calcite-action-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "calcite-action-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "calcite-combobox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "calcite-combobox-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "calcite-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "calcite-dropdown-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "calcite-dropdown-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "calcite-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "calcite-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "calcite-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "calcite-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "calcite-option":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "calcite-progress":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "calcite-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "calcite-stack":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "calcite-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "floor-filter":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "instant-apps-social-share":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/components/solution-item-icon2.js

@@ -65,7 +65,8 @@ const SolutionItemIcon = /*@__PURE__*/ proxyCustomElement(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.
@@ -116,6 +117,8 @@ const SolutionItemIcon = /*@__PURE__*/ proxyCustomElement(class SolutionItemIcon
                     return "utilitynetwork";
                 }
                 return hosted ? "featureshosted" : "features";
+            case "group":
+                return "group";
             case "group layer":
                 if (keywords.includes("Map")) {
                     return "layergroup2d";