@esri/solutions-components 0.10.35 → 0.10.37

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

@@ -142,6 +142,22 @@ export class CrowdsourceManager {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Adjust layout based on current appLayout value
+     */
+    appLayoutWatchHandler(newAppLayout, oldAppLayout) {
+        if (newAppLayout !== oldAppLayout) {
+            this._setActiveLayout(newAppLayout);
+            // 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;
+            }
+        }
+    }
     /**
      * When true the map zoom tools will be available
      */
@@ -210,7 +226,7 @@ export class CrowdsourceManager {
         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.appLayout = "splitView";
             }
             this._layer = layer;
             this._initLayerExpressions();
@@ -243,7 +259,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: '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()));
+        return (h(Host, { key: 'ace73bfa1aa7d460f1cba60d13e94c4f47f77bd0' }, h("calcite-shell", { key: 'f14e70be762bf236be566111b45e40a42f0997f7', class: "position-relative" }, h("calcite-panel", { key: '0dde9426295a780b6a12cd98513f655914c0dab5', 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
@@ -476,10 +492,9 @@ export class CrowdsourceManager {
         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 && !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.appLayout = this._layer.isTable ? "tableView" : "mapView";
                 this._showInformationHeader = false;
             }, onFeatureOrRecordSubmitted: () => void this._layerTable.refresh(), selectedFeaturesIds: this._layerTable?.selectedIds, selectingFeatureFromMap: this.appLayout === "mapView", zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
     }
@@ -517,7 +532,7 @@ export class CrowdsourceManager {
         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", 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))));
+        return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this.appLayout = "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.appLayout = "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.appLayout = "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
@@ -590,7 +605,7 @@ export class CrowdsourceManager {
         if (this._isMobile) {
             this.showHideMapPopupAndTable(!this._isMobile);
             this._isPortraitMobile = !!window.matchMedia("(orientation: portrait)").matches;
-            this._changeLayout('splitView');
+            this.appLayout = "splitView";
         }
         else {
             this._isPortraitMobile = false;
@@ -606,34 +621,14 @@ export class CrowdsourceManager {
     _toggleLayout() {
         this._panelOpen = !this._panelOpen;
     }
-    /**
-     * Changes the layout mode
-     * @param appLayout selected active app layout
-     *
-     * @protected
-     */
-    _changeLayout(appLayout) {
-        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;
-            }
-        }
-    }
     /**
       * shows the map in card view
       *
       * @protected
       */
     _showMapInCardView() {
-        if (this.appLayout === 'mapView') {
-            const fullMapView = document.getElementById('full-map-view').childNodes[0];
+        if (this.appLayout !== "mapView") {
+            const fullMapView = document.getElementById('full-map-view')?.childNodes[0];
             const splitMapClass = document.getElementById('card-mapView');
             if (fullMapView) {
                 splitMapClass.appendChild(fullMapView);
@@ -646,7 +641,7 @@ export class CrowdsourceManager {
      * @protected
      */
     _showMapInFullView() {
-        const splitMap = document.getElementById('card-mapView').childNodes[0];
+        const splitMap = document.getElementById('card-mapView')?.childNodes[0];
         const fullMapViewClass = document.getElementById('full-map-view');
         if (splitMap) {
             fullMapViewClass.appendChild(splitMap);
@@ -1501,6 +1496,9 @@ export class CrowdsourceManager {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "appLayout",
+                "methodName": "appLayoutWatchHandler"
+            }, {
                 "propName": "enableZoom",
                 "methodName": "enableZoomWatchHandler"
             }, {

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

@@ -122,6 +122,7 @@ export class MapLegend {
             if (!this.legendWidget) {
                 this.legendWidget = new this.Legend({
                     container: this._legendElement,
+                    respectLayerDefinitionExpression: true,
                     view
                 });
             }

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

@@ -64,6 +64,8 @@ export class SolutionItemAccordion {
         "Web Scene",
         "Feature Layer (hosted, view)",
         "Feature Layer (hosted)",
+        "Table (hosted, view)",
+        "Table (hosted)",
         "Tile Layer",
         "CSV",
         "Microsoft Excel",
@@ -119,7 +121,7 @@ export class SolutionItemAccordion {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '9a940187b8b91f94346f51cd67cb3c9fd2d8f470' }, this._getAccordion()));
+        return (h(Host, { key: 'bf7f34f247fd1936435394aa8740bfc1136325ed' }, this._getAccordion()));
     }
     //--------------------------------------------------------------------------
     //
@@ -251,8 +253,10 @@ export class SolutionItemAccordion {
     _getTypeForDisplay(type, typeKeywords) {
         let _type = type;
         if (type === "Feature Service") {
-            _type = typeKeywords.indexOf("View Service") > -1 ?
-                "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+            const isView = typeKeywords.indexOf("View Service") > -1;
+            const isTable = typeKeywords.indexOf("Table") > -1;
+            _type = isView && isTable ? "Table (hosted, view)" : isTable ? "Table (hosted)" :
+                isView ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
         }
         if (type === "Web Mapping Application") {
             _type = typeKeywords.indexOf("configurableApp") > -1 ?

package/dist/collection/demos/solution-item-accordion.html

@@ -135,6 +135,38 @@
         ],
         "snippet": "A feature layer view used to share volunteers and clearing activities with the Adopt-A-Catch Basin site."
       },
+      {
+        "id": "aa2a7f901eb9492a829ab918cd38318d",
+        "type": "Feature Service",
+        "title": "CatchBasinVolunteers_public_table",
+        "typeKeywords": [
+          "ArcGIS Server",
+          "Data",
+          "Feature Access",
+          "Feature Service",
+          "Multilayer",
+          "Service",
+          "Hosted Service",
+          "View Service",
+          "Table"
+        ],
+        "snippet": "A feature table view"
+      },
+      {
+        "id": "bb2a7f901eb9492a829ab918cd38318d",
+        "type": "Feature Service",
+        "title": "CatchBasinVolunteers_table",
+        "typeKeywords": [
+          "ArcGIS Server",
+          "Data",
+          "Feature Access",
+          "Feature Service",
+          "Multilayer",
+          "Service",
+          "Table"
+        ],
+        "snippet": "A feature table"
+      },
       {
         "id": "cb7f74af39c64abfbe7c7fc5b69587b1",
         "type": "Feature Service",

package/dist/collection/utils/downloadUtils.js

@@ -23,6 +23,7 @@ import { exportCSV } from "./csvUtils";
 import { exportPDF } from "./pdfUtils";
 import { loadModules } from "./loadModules";
 import { queryFeaturesByID } from "./queryUtils";
+import { Sanitizer } from "@esri/arcgis-html-sanitizer";
 import * as common from "@esri/solution-common";
 const lineSeparatorChar = "|";
 import { queryRelated } from "@esri/arcgis-rest-feature-layer";
@@ -145,12 +146,13 @@ export function _cleanupLabel(labelText) {
     labelText = labelText.replace(/<\/p>/gi, "");
     // Replace \n with the line separator character
     labelText = labelText.replace(/\n/gi, "|");
-    // Remove remaining HTML tags, replace 0xA0 that popup uses for spaces, and replace some char representations
+    // Remove tricky stuff
+    const sanitizer = new Sanitizer();
+    labelText = sanitizer.sanitize(labelText);
+    // Remove remaining HTML tags, replace 0xA0 that popup uses for spaces, and replace &nbsp;
     labelText = labelText
         .replace(/<[\s.]*[^<>]*\/?>/gi, "")
         .replace(/\xA0/gi, " ")
-        .replace(/&lt;/gi, "<")
-        .replace(/&gt;/gi, ">")
         .replace(/&nbsp;/gi, " ");
     // Trim each line
     labelText = labelText.replace(/\s*\|\s*/g, "|");

package/dist/collection/utils/downloadUtils.ts

@@ -21,6 +21,7 @@ import { ILabel, exportPDF } from "./pdfUtils";
 import { loadModules } from "./loadModules";
 import { queryFeaturesByID } from "./queryUtils";
 import { IExportInfo, IExportInfos } from "../utils/interfaces";
+import { Sanitizer } from "@esri/arcgis-html-sanitizer";
 import * as common from "@esri/solution-common";
 
 export { ILabel } from "./pdfUtils";
@@ -277,12 +278,14 @@ export function _cleanupLabel(
   // Replace \n with the line separator character
   labelText = labelText.replace(/\n/gi, "|");
 
-  // Remove remaining HTML tags, replace 0xA0 that popup uses for spaces, and replace some char representations
+  // Remove tricky stuff
+  const sanitizer = new Sanitizer();
+  labelText = sanitizer.sanitize(labelText);
+
+  // Remove remaining HTML tags, replace 0xA0 that popup uses for spaces, and replace  
   labelText = labelText
     .replace(/<[\s.]*[^<>]*\/?>/gi, "")
     .replace(/\xA0/gi, " ")
-    .replace(/&lt;/gi, "<")
-    .replace(/&gt;/gi, ">")
     .replace(/&nbsp;/gi, " ");
 
   // Trim each line

package/dist/collection/utils/test/downloadUtils.spec.tsx

@@ -93,8 +93,16 @@ describe("downloadUtils", () => {
 
     it("handles some special characters", () => {
       const labelText =
-        "<div style='text-align: left;'>&lt;{NAME}&gt;<br />{STREET}<br/>{CITY},&nbsp;{STATE}&nbsp;{ZIP}<br></div>";
-      const expectedCleanedText = "<{NAME}>|{STREET}|{CITY}, {STATE} {ZIP}";
+        "<div style='text-align: left;'>&lt;{NAME}&gt;<br />{STREET}<br/>{CITY},&nbsp;{STATE}\xA0{ZIP}<br></div>";
+      const expectedCleanedText = "&lt;{NAME}&gt;|{STREET}|{CITY}, {STATE} {ZIP}";
+
+      const result: string = downloadUtils._cleanupLabel(labelText);
+      expect(result).toEqual(expectedCleanedText);
+    });
+
+    it("handles embedded script tag", () => {
+      const labelText = "<scrip<script>is removed</script>t>alert(123)</script>";
+      const expectedCleanedText = "&lt;scrip&lt;script&gt;is removed&lt;/script&gt;t&gt;alert(123)&lt;/script&gt;";
 
       const result: string = downloadUtils._cleanupLabel(labelText);
       expect(result).toEqual(expectedCleanedText);
@@ -188,16 +196,6 @@ describe("downloadUtils", () => {
       expect(result.format).toEqual(expectedLabelSpec);
     });
 
-    it("handles some special characters", () => {
-      const popupInfo =
-        "<div style='text-align: left;'>&lt;{NAME}&gt;<br />{STREET}<br/>{CITY},&nbsp;{STATE}&nbsp;{ZIP}<br></div>";
-      const expectedLabelSpec = "<{NAME}>|{STREET}|{CITY}, {STATE} {ZIP}";
-
-      const result: downloadUtils.ILabelFormat = downloadUtils._convertPopupTextToLabelSpec(popupInfo);
-      expect(result.type).toEqual("pattern");
-      expect(result.format).toEqual(expectedLabelSpec);
-    });
-
   });
 
   describe("_convertPopupArcadeToLabelSpec", () => {

package/dist/components/crowdsource-manager.js

@@ -190,6 +190,22 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Adjust layout based on current appLayout value
+     */
+    appLayoutWatchHandler(newAppLayout, oldAppLayout) {
+        if (newAppLayout !== oldAppLayout) {
+            this._setActiveLayout(newAppLayout);
+            // 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;
+            }
+        }
+    }
     /**
      * When true the map zoom tools will be available
      */
@@ -258,7 +274,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         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.appLayout = "splitView";
             }
             this._layer = layer;
             this._initLayerExpressions();
@@ -291,7 +307,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: '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()));
+        return (h(Host, { key: 'ace73bfa1aa7d460f1cba60d13e94c4f47f77bd0' }, h("calcite-shell", { key: 'f14e70be762bf236be566111b45e40a42f0997f7', class: "position-relative" }, h("calcite-panel", { key: '0dde9426295a780b6a12cd98513f655914c0dab5', 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
@@ -524,10 +540,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         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 && !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.appLayout = this._layer.isTable ? "tableView" : "mapView";
                 this._showInformationHeader = false;
             }, onFeatureOrRecordSubmitted: () => void this._layerTable.refresh(), selectedFeaturesIds: this._layerTable?.selectedIds, selectingFeatureFromMap: this.appLayout === "mapView", zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
     }
@@ -565,7 +580,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", 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))));
+        return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this.appLayout = "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.appLayout = "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.appLayout = "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
@@ -638,7 +653,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         if (this._isMobile) {
             this.showHideMapPopupAndTable(!this._isMobile);
             this._isPortraitMobile = !!window.matchMedia("(orientation: portrait)").matches;
-            this._changeLayout('splitView');
+            this.appLayout = "splitView";
         }
         else {
             this._isPortraitMobile = false;
@@ -654,34 +669,14 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _toggleLayout() {
         this._panelOpen = !this._panelOpen;
     }
-    /**
-     * Changes the layout mode
-     * @param appLayout selected active app layout
-     *
-     * @protected
-     */
-    _changeLayout(appLayout) {
-        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;
-            }
-        }
-    }
     /**
       * shows the map in card view
       *
       * @protected
       */
     _showMapInCardView() {
-        if (this.appLayout === 'mapView') {
-            const fullMapView = document.getElementById('full-map-view').childNodes[0];
+        if (this.appLayout !== "mapView") {
+            const fullMapView = document.getElementById('full-map-view')?.childNodes[0];
             const splitMapClass = document.getElementById('card-mapView');
             if (fullMapView) {
                 splitMapClass.appendChild(fullMapView);
@@ -694,7 +689,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _showMapInFullView() {
-        const splitMap = document.getElementById('card-mapView').childNodes[0];
+        const splitMap = document.getElementById('card-mapView')?.childNodes[0];
         const fullMapViewClass = document.getElementById('full-map-view');
         if (splitMap) {
             fullMapViewClass.appendChild(splitMap);
@@ -779,6 +774,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "appLayout": ["appLayoutWatchHandler"],
         "enableZoom": ["enableZoomWatchHandler"],
         "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
     }; }
@@ -839,6 +835,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_layerIds": [32],
         "_isLoading": [32]
     }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "idsFound", "idsFound"]], {
+        "appLayout": ["appLayoutWatchHandler"],
         "enableZoom": ["enableZoomWatchHandler"],
         "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
     }]);

package/dist/components/downloadUtils.js

@@ -7,8 +7,8 @@ import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { getAssetPath } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
+import { S as Sanitizer } from './index2.js';
 import './solution-resource.js';
-import './index2.js';
 import { _ as __assign$1, r as request, c as cleanUrl, g as getJson } from './restHelpersGet.js';
 
 /** @license
@@ -2541,12 +2541,13 @@ function _cleanupLabel(labelText) {
     labelText = labelText.replace(/<\/p>/gi, "");
     // Replace \n with the line separator character
     labelText = labelText.replace(/\n/gi, "|");
-    // Remove remaining HTML tags, replace 0xA0 that popup uses for spaces, and replace some char representations
+    // Remove tricky stuff
+    const sanitizer = new Sanitizer();
+    labelText = sanitizer.sanitize(labelText);
+    // Remove remaining HTML tags, replace 0xA0 that popup uses for spaces, and replace &nbsp;
     labelText = labelText
         .replace(/<[\s.]*[^<>]*\/?>/gi, "")
         .replace(/\xA0/gi, " ")
-        .replace(/&lt;/gi, "<")
-        .replace(/&gt;/gi, ">")
         .replace(/&nbsp;/gi, " ");
     // Trim each line
     labelText = labelText.replace(/\s*\|\s*/g, "|");

package/dist/components/instant-apps-app-guide.js

@@ -19,16 +19,19 @@ import { d as defineCustomElement$2 } from './scrim.js';
 class AppGuideViewModel {
     constructor() {
         this.pages = [];
+        this.headerText = '';
+        this.pages = [];
     }
-    addPage(page) {
-        this.pages = [...this.pages, page];
+    setPages(pages) {
+        this.pages = pages;
+        this.setDefaultHeaderText();
     }
-    removePage(page) {
-        this.pages = this.pages.filter(p => p !== page);
+    setDefaultHeaderText() {
+        this.headerText = !!this.pages.length ? this.pages[0].title : '';
     }
 }
 
-const instantAppsAppGuideCss = ":host{--instant-apps-app-guide-width:300px;--instant-apps-app-guide-height:400px;--instant-apps-app-guide-list-item-bubble-size:22px;width:var(--instant-apps-app-guide-width);height:var(--instant-apps-app-guide-height);display:block}:host calcite-panel{max-width:var(--instant-apps-app-guide-width);max-height:var(--instant-apps-app-guide-height);display:flex}:host calcite-carousel{flex:1;overflow:scroll;height:-moz-fit-content;height:fit-content;background-color:var(--calcite-color-foreground-1)}:host [slot=header-content]{display:flex;gap:var(--calcite-spacing-sm);padding-inline-start:0.25rem}:host .content-heading{font-weight:var(--calcite-font-weight-bold);display:flex;gap:var(--calcite-spacing-sm);line-height:var(--calcite-font-line-height-fixed-lg)}:host calcite-carousel-item{flex-grow:1;display:flex;flex-direction:column}:host .instant-apps-app-guide__content-wrapper{padding-block-start:0.5rem;padding-inline:0.5rem;flex-shrink:1;flex-grow:0}:host calcite-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host .instant-apps-app-guide__content-list{counter-set:item-counter;margin-inline:0;padding-inline-start:var(--calcite-spacing-xxxl);padding-inline-end:var(--calcite-spacing-lg);position:relative}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item{counter-increment:item-counter;margin-block-start:var(--calcite-spacing-lg);display:flex;align-items:flex-start}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::before{content:counter(item-counter);background-color:var(--calcite-color-text-2);color:var(--calcite-color-text-inverse);line-height:var(--calcite-font-line-height-fixed-xl);width:var(--instant-apps-app-guide-list-item-bubble-size);left:0;border-radius:var(--calcite-corner-radius-pill);display:flex;justify-content:center;font-size:var(--calcite-font-size-sm);position:absolute;max-height:var(--instant-apps-app-guide-list-item-bubble-size)}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::marker{color:var(--calcite-color-transparent)}";
+const instantAppsAppGuideCss = ":host{--instant-apps-app-guide-width:300px;--instant-apps-app-guide-height:400px;--instant-apps-app-guide-list-item-bubble-size:22px;width:var(--instant-apps-app-guide-width);height:var(--instant-apps-app-guide-height);display:block}:host calcite-panel{max-width:var(--instant-apps-app-guide-width);max-height:var(--instant-apps-app-guide-height);display:flex}:host calcite-carousel{flex:1;overflow:scroll;height:-moz-fit-content;height:fit-content;background-color:var(--calcite-color-foreground-1)}:host [slot=header-content]{display:flex;gap:var(--calcite-spacing-sm);padding-inline-start:0.25rem;font-weight:var(--calcite-font-weight-bold)}:host calcite-carousel-item{flex-grow:1;display:flex;flex-direction:column}:host .instant-apps-app-guide__content-wrapper{padding-block-start:0.5rem;padding-inline:0.5rem;flex-shrink:1;flex-grow:0}:host calcite-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host .instant-apps-app-guide__content-list{counter-set:item-counter;margin-inline:0;padding-inline-start:var(--calcite-spacing-xxxl);padding-inline-end:var(--calcite-spacing-lg);position:relative}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item{counter-increment:item-counter;margin-block-start:var(--calcite-spacing-lg);display:flex;align-items:flex-start}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::before{content:counter(item-counter);background-color:var(--calcite-color-text-2);color:var(--calcite-color-text-inverse);line-height:var(--calcite-font-line-height-fixed-xl);width:var(--instant-apps-app-guide-list-item-bubble-size);left:0;border-radius:var(--calcite-corner-radius-pill);display:flex;justify-content:center;font-size:var(--calcite-font-size-sm);position:absolute;max-height:var(--instant-apps-app-guide-list-item-bubble-size)}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::marker{color:var(--calcite-color-transparent)}";
 const InstantAppsAppGuideStyle0 = instantAppsAppGuideCss;
 
 const CSS = {
@@ -41,6 +44,9 @@ const InstantAppsAppGuide$1 = /*@__PURE__*/ proxyCustomElement(class InstantApps
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Private Variables
+         */
         this._viewModel = new AppGuideViewModel();
         this.header = true;
         this.data = undefined;
@@ -48,19 +54,25 @@ const InstantAppsAppGuide$1 = /*@__PURE__*/ proxyCustomElement(class InstantApps
         this.headerText = undefined;
     }
     watchPropHandler(newValue) {
-        this._viewModel.pages = newValue;
-        this._updateHeaderText();
+        this._setContent(newValue);
+    }
+    watchStateHandler(newValue) {
+        this._viewModel.headerText = newValue;
     }
-    connectedCallback() {
-        var _a, _b, _c, _d;
-        this._viewModel.pages = (this === null || this === void 0 ? void 0 : this.data) || [];
-        this.headerText = (_c = (_b = (_a = this === null || this === void 0 ? void 0 : this.data) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : (_d = this === null || this === void 0 ? void 0 : this.messages) === null || _d === void 0 ? void 0 : _d.headerText;
+    componentWillLoad() {
+        this._setContent(this === null || this === void 0 ? void 0 : this.data);
     }
     componentDidLoad() {
         getMessages(this);
     }
     render() {
-        return (h(Host, { key: '3c6bf465e2543e62f8e991a22a4f8b8420556285' }, h("calcite-panel", { key: '15a145d4f930de4325716dcd8b73fdcbbe5fa31e', scale: "s" }, this._renderAppGuideHeader(), h("calcite-carousel", { key: '8f962b828f76b8a68f19b71fb79d3f4c93420e38', onCalciteCarouselChange: () => this._updateHeaderText(), ref: el => this._carouselRef = el, "arrow-type": this._getArrowType() }, this._renderAppGuidePages(this._viewModel.pages)))));
+        const pages = this._renderAppGuidePages(this._viewModel.pages);
+        const header = this._renderAppGuideHeader();
+        return (h(Host, { key: 'a6969274bbb9e917869c4c09910ef04b2d40c49a' }, h("calcite-panel", { key: 'f203f430978eed0db5aa0058ae53bd811ba0fdfe', scale: "s" }, header, h("calcite-carousel", { key: 'afd572b169f27b03616e568b9146cb2e52f04cae', onCalciteCarouselChange: () => this._updateHeaderText(), ref: el => this._carouselRef = el, "arrow-type": this._getArrowType() }, pages))));
+    }
+    _setContent(content) {
+        this._viewModel.setPages(content);
+        this.headerText = this._viewModel.headerText;
     }
     _updateHeaderText() {
         var _a;
@@ -102,7 +114,8 @@ const InstantAppsAppGuide$1 = /*@__PURE__*/ proxyCustomElement(class InstantApps
     }
     get el() { return this; }
     static get watchers() { return {
-        "data": ["watchPropHandler"]
+        "data": ["watchPropHandler"],
+        "headerText": ["watchStateHandler"]
     }; }
     static get style() { return InstantAppsAppGuideStyle0; }
 }, [1, "instant-apps-app-guide", {
@@ -111,7 +124,8 @@ const InstantAppsAppGuide$1 = /*@__PURE__*/ proxyCustomElement(class InstantApps
         "messages": [32],
         "headerText": [32]
     }, undefined, {
-        "data": ["watchPropHandler"]
+        "data": ["watchPropHandler"],
+        "headerText": ["watchStateHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {