@esri/solutions-components 0.10.35 → 0.10.36

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/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/map-legend2.js

@@ -109,6 +109,7 @@ const MapLegend = /*@__PURE__*/ proxyCustomElement(class MapLegend extends HTMLE
             if (!this.legendWidget) {
                 this.legendWidget = new this.Legend({
                     container: this._legendElement,
+                    respectLayerDefinitionExpression: true,
                     view
                 });
             }

package/dist/esm/basemap-gallery_7.entry.js

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

package/dist/esm/calcite-alert_5.entry.js

@@ -15,7 +15,7 @@ import { u as updateHostInteraction, I as InteractiveContainer } from './interac
 import { S as SLOTS$2 } from './resources-35208c6c.js';
 import { l as loadModules, g as getLocaleComponentStrings } from './locale-0d06fca0.js';
 import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils-f54edae3.js';
-import { P as PopupUtils } from './popupUtils-4570096e.js';
+import { P as PopupUtils } from './popupUtils-03dc398a.js';
 import './guid-b0fb1de3.js';
 import './resources-8e2ed936.js';
 import './browser-b67d8df6.js';
@@ -24,9 +24,9 @@ import './observers-c83631e8.js';
 import './esri-loader-c6842c6b.js';
 import './_commonjsHelpers-089957fe.js';
 import './interfaces-659e3836.js';
-import './downloadUtils-e266e98d.js';
-import './solution-resource-f5809979.js';
+import './downloadUtils-bc7a4ba1.js';
 import './index-e14fade9.js';
+import './solution-resource-f5809979.js';
 import './restHelpersGet-48113381.js';
 
 /*!

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

@@ -6,12 +6,12 @@
 import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-904bc599.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-0d06fca0.js';
 import { g as getLayerOrTable, q as queryFeaturesByID, e as goToSelection, f as queryAllIds, i as queryAllOidsWithQueryFeatures, j as queryFeaturesByGlobalID, c as getFeatureLayerView } from './mapViewUtils-f54edae3.js';
-import { d as downloadCSV } from './downloadUtils-e266e98d.js';
+import { d as downloadCSV } from './downloadUtils-bc7a4ba1.js';
 import './esri-loader-c6842c6b.js';
 import './_commonjsHelpers-089957fe.js';
 import './interfaces-659e3836.js';
-import './solution-resource-f5809979.js';
 import './index-e14fade9.js';
+import './solution-resource-f5809979.js';
 import './restHelpersGet-48113381.js';
 
 const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}.position-static{position:static !important}.z-index-500{z-index:500 !important}card-manager{display:block}";

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

@@ -131,6 +131,22 @@ const CrowdsourceManager = class {
     //  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
      */
@@ -199,7 +215,7 @@ const CrowdsourceManager = class {
         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();
@@ -232,7 +248,7 @@ const CrowdsourceManager = class {
     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
@@ -465,10 +481,9 @@ const CrowdsourceManager = class {
         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 })));
     }
@@ -506,7 +521,7 @@ const CrowdsourceManager = class {
         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
@@ -579,7 +594,7 @@ const CrowdsourceManager = class {
         if (this._isMobile) {
             this.showHideMapPopupAndTable(!this._isMobile);
             this._isPortraitMobile = !!window.matchMedia("(orientation: portrait)").matches;
-            this._changeLayout('splitView');
+            this.appLayout = "splitView";
         }
         else {
             this._isPortraitMobile = false;
@@ -595,34 +610,14 @@ const CrowdsourceManager = class {
     _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);
@@ -635,7 +630,7 @@ const CrowdsourceManager = class {
      * @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);
@@ -720,6 +715,7 @@ const CrowdsourceManager = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "appLayout": ["appLayoutWatchHandler"],
         "enableZoom": ["enableZoomWatchHandler"],
         "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
     }; }