@esri/solutions-components 0.8.4 → 0.8.5

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

@@ -44,6 +44,7 @@ export class CrowdsourceManager {
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
+        this.appProxies = undefined;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -331,7 +332,7 @@ export class CrowdsourceManager {
     _getMapNode(panelOpen) {
         var _a;
         const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", 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._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", 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._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -504,6 +505,23 @@ export class CrowdsourceManager {
     }
     static get properties() {
         return {
+            "appProxies": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of objects containing proxy information for premium platform services."
+                },
+                "attribute": "app-proxies",
+                "reflect": false
+            },
             "defaultCenter": {
                 "type": "string",
                 "mutable": false,

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

@@ -20,6 +20,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
+import { joinAppProxies } from "templates-common-library-esm/functionality/proxy";
 // 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
@@ -36,6 +37,7 @@ export class MapCard {
          * string: the id of map currently displayed
          */
         this._loadedId = "";
+        this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.enableHome = undefined;
         this.enableLegend = undefined;
@@ -112,14 +114,16 @@ export class MapCard {
      * @protected
      */
     async _initModules() {
-        const [WebMap, MapView, Home] = await loadModules([
+        const [WebMap, MapView, Home, esriConfig] = await loadModules([
             "esri/WebMap",
             "esri/views/MapView",
-            "esri/widgets/Home"
+            "esri/widgets/Home",
+            "esri/config"
         ]);
         this.WebMap = WebMap;
         this.MapView = MapView;
         this.Home = Home;
+        this.esriConfig = esriConfig;
     }
     /**
      * Load the webmap for the provided webMapInfo
@@ -140,6 +144,10 @@ export class MapCard {
             const webMap = new this.WebMap({
                 portalItem: { id }
             });
+            if (this.appProxies) {
+                await webMap.load();
+                await joinAppProxies(webMap, this.esriConfig, this.appProxies);
+            }
             this.mapView = new this.MapView({
                 container: this._mapDiv,
                 map: webMap,
@@ -204,6 +212,23 @@ export class MapCard {
     }
     static get properties() {
         return {
+            "appProxies": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of objects containing proxy information for premium platform services."
+                },
+                "attribute": "app-proxies",
+                "reflect": false
+            },
             "defaultWebmapId": {
                 "type": "string",
                 "mutable": false,

package/dist/components/crowdsource-manager.js

@@ -91,6 +91,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
+        this.appProxies = undefined;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -378,7 +379,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getMapNode(panelOpen) {
         var _a;
         const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", 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._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", 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._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -544,6 +545,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     }; }
     static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
+        "appProxies": [8, "app-proxies"],
         "defaultCenter": [1, "default-center"],
         "defaultGlobalId": [1, "default-global-id"],
         "defaultLayer": [1, "default-layer"],

package/dist/components/map-card2.js

@@ -30,6 +30,38 @@ import { d as defineCustomElement$3 } from './map-picker2.js';
 import { d as defineCustomElement$2 } from './map-search2.js';
 import { d as defineCustomElement$1 } from './map-tools2.js';
 
+function joinAppProxies(map, config, appProxies) {
+    if (appProxies) {
+        appProxies.forEach((proxy) => {
+            map.allLayers.forEach((layer) => {
+                if (layer && layer.url === proxy.sourceUrl) {
+                    // directly change the layer url to the proxy url
+                    layer.url = proxy.proxyUrl;
+                    // Replace the layer's portalItem's url with the proxy url too, otherwise anonymous viewers get a sign-in prompt.
+                    if (layer.portalItem) {
+                        layer.portalItem.when(() => {
+                            // layer.portalItem exists, see above. Not sure why typescript thinks it could be undefined here.
+                            layer.portalItem.url = proxy.proxyUrl;
+                        });
+                    }
+                    // also add a request interceptor in case we missed any requests to the original url, or the jsapi team adds new requests in the future.
+                    config.request?.interceptors?.push({
+                        // this interceptor only applies to requests made to this proxy's sourceUrl (the layer's original url).
+                        urls: proxy.sourceUrl,
+                        before: (params) => {
+                            // change requests from the original url to the proxy url
+                            if (params.url && params.url === proxy.sourceUrl) {
+                                params.url = proxy.proxyUrl;
+                            }
+                        },
+                    });
+                }
+            });
+        });
+    }
+    return map;
+}
+
 const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
 
 const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLElement {
@@ -46,6 +78,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
          * string: the id of map currently displayed
          */
         this._loadedId = "";
+        this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.enableHome = undefined;
         this.enableLegend = undefined;
@@ -122,14 +155,16 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * @protected
      */
     async _initModules() {
-        const [WebMap, MapView, Home] = await loadModules([
+        const [WebMap, MapView, Home, esriConfig] = await loadModules([
             "esri/WebMap",
             "esri/views/MapView",
-            "esri/widgets/Home"
+            "esri/widgets/Home",
+            "esri/config"
         ]);
         this.WebMap = WebMap;
         this.MapView = MapView;
         this.Home = Home;
+        this.esriConfig = esriConfig;
     }
     /**
      * Load the webmap for the provided webMapInfo
@@ -150,6 +185,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             const webMap = new this.WebMap({
                 portalItem: { id }
             });
+            if (this.appProxies) {
+                await webMap.load();
+                await joinAppProxies(webMap, this.esriConfig, this.appProxies);
+            }
             this.mapView = new this.MapView({
                 container: this._mapDiv,
                 map: webMap,
@@ -207,6 +246,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     }; }
     static get style() { return mapCardCss; }
 }, [0, "map-card", {
+        "appProxies": [8, "app-proxies"],
         "defaultWebmapId": [1, "default-webmap-id"],
         "enableHome": [4, "enable-home"],
         "enableLegend": [4, "enable-legend"],

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

@@ -1567,6 +1567,38 @@ const LayerTable = class {
 };
 LayerTable.style = layerTableCss;
 
+function joinAppProxies(map, config, appProxies) {
+    if (appProxies) {
+        appProxies.forEach((proxy) => {
+            map.allLayers.forEach((layer) => {
+                if (layer && layer.url === proxy.sourceUrl) {
+                    // directly change the layer url to the proxy url
+                    layer.url = proxy.proxyUrl;
+                    // Replace the layer's portalItem's url with the proxy url too, otherwise anonymous viewers get a sign-in prompt.
+                    if (layer.portalItem) {
+                        layer.portalItem.when(() => {
+                            // layer.portalItem exists, see above. Not sure why typescript thinks it could be undefined here.
+                            layer.portalItem.url = proxy.proxyUrl;
+                        });
+                    }
+                    // also add a request interceptor in case we missed any requests to the original url, or the jsapi team adds new requests in the future.
+                    config.request?.interceptors?.push({
+                        // this interceptor only applies to requests made to this proxy's sourceUrl (the layer's original url).
+                        urls: proxy.sourceUrl,
+                        before: (params) => {
+                            // change requests from the original url to the proxy url
+                            if (params.url && params.url === proxy.sourceUrl) {
+                                params.url = proxy.proxyUrl;
+                            }
+                        },
+                    });
+                }
+            });
+        });
+    }
+    return map;
+}
+
 const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
 
 const MapCard = class {
@@ -1582,6 +1614,7 @@ const MapCard = class {
          * string: the id of map currently displayed
          */
         this._loadedId = "";
+        this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.enableHome = undefined;
         this.enableLegend = undefined;
@@ -1658,14 +1691,16 @@ const MapCard = class {
      * @protected
      */
     async _initModules() {
-        const [WebMap, MapView, Home] = await loadModules([
+        const [WebMap, MapView, Home, esriConfig] = await loadModules([
             "esri/WebMap",
             "esri/views/MapView",
-            "esri/widgets/Home"
+            "esri/widgets/Home",
+            "esri/config"
         ]);
         this.WebMap = WebMap;
         this.MapView = MapView;
         this.Home = Home;
+        this.esriConfig = esriConfig;
     }
     /**
      * Load the webmap for the provided webMapInfo
@@ -1686,6 +1721,10 @@ const MapCard = class {
             const webMap = new this.WebMap({
                 portalItem: { id }
             });
+            if (this.appProxies) {
+                await webMap.load();
+                await joinAppProxies(webMap, this.esriConfig, this.appProxies);
+            }
             this.mapView = new this.MapView({
                 container: this._mapDiv,
                 map: webMap,

package/dist/esm/crowdsource-manager.entry.js

@@ -35,6 +35,7 @@ const CrowdsourceManager = class {
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
+        this.appProxies = undefined;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -322,7 +323,7 @@ const CrowdsourceManager = class {
     _getMapNode(panelOpen) {
         var _a;
         const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", 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._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", 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._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information