@esri/solutions-components 0.8.18 → 0.8.20

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

@@ -53,6 +53,7 @@ export class CrowdsourceManager {
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
+        this.introductionPageEnabled = false;
         this.enableAutoRefresh = false;
         this.enableBasemap = true;
         this.enableColumnReorder = true;
@@ -79,8 +80,6 @@ export class CrowdsourceManager {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -187,7 +186,9 @@ export class CrowdsourceManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '686aeccc0f97c1eb8bc1b673d8816663e80fdf71' }, h("calcite-shell", { key: 'f3451483cdbafa8b68a00b71e9927bbff55781b9', class: "position-relative" }, h("calcite-panel", { key: '8256440e1cefa8f25bf1af1f9a1e87650c34462d', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        // 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: '175124a05c83f6f02bef1378a20e5a3ed083ce00' }, h("calcite-shell", { key: '10677408a11bbe6196a95622a7a5f69fd3766c20', class: "position-relative" }, h("calcite-panel", { key: 'd3f044385482089d2dd5a457c2de4b3cc748e7c6', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -307,7 +308,8 @@ export class CrowdsourceManager {
     _getBody(layoutMode, panelOpen, hideTable) {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
+            h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
     }
     /**
      * Emit the event when info button clicked
@@ -360,10 +362,10 @@ export class CrowdsourceManager {
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
+                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
+                '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
+                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
             } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
@@ -408,7 +410,7 @@ export class CrowdsourceManager {
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes
@@ -682,6 +684,24 @@ export class CrowdsourceManager {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "introductionPageEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true a introduction page has been enabled in the consuming application.\r\nAlso when true a floating button will be shown in the lower right of the window that\r\nwill emit an event when clicked that the consuming application can respond to that will open the introduction page."
+                },
+                "attribute": "introduction-page-enabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "enableAutoRefresh": {
                 "type": "boolean",
                 "mutable": false,
@@ -1155,40 +1175,6 @@ export class CrowdsourceManager {
                 },
                 "attribute": "zoom-to-scale",
                 "reflect": false
-            },
-            "sortField": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string: Field using which table will be sorted"
-                },
-                "attribute": "sort-field",
-                "reflect": false
-            },
-            "sortOrder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'asc' | 'desc'",
-                    "resolved": "\"asc\" | \"desc\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
-                },
-                "attribute": "sort-order",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/info-card/info-card.css

@@ -104,4 +104,5 @@
 .pagination-count {
   color: var(--calcite-color-brand);
   border-bottom: 1px solid var(--calcite-color-brand);
+  font-weight: bold;
 }

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

@@ -80,8 +80,6 @@ export class LayerTable {
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.zoomToScale = undefined;
         this._allIds = [];
@@ -309,7 +307,7 @@ export class LayerTable {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: '69a8f1d8c41eb82d6f39f6c580f78369f372567f' }, h("calcite-shell", { key: '3cb7997d918af450d04b95e1a236e09400b30af1' }, this._getTableControlRow("header"), h("div", { key: '1f0e84f1759c0333acee402a603923ca96e7d9e4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'b62bedc4c924f0d0a30e2746a532270c2a4d4a4b', class: "height-full width-full" }, h("calcite-loader", { key: 'e28017e4c3aba559774965f2cbff0fcb83f9ab2d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'efc520212f53c3db46574c7caf5d9f9835b83a2c', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '1077bca0d3f59ed86999449c2c5428e4aa65b30f' }, h("calcite-shell", { key: '02b7a7512cfdc8958251ae00709b971f9bfff6df' }, this._getTableControlRow("header"), h("div", { key: '83d03238c368cd332714f4434297a9a4f9d47ec4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '18927c7c65687c9df28f69b1e66f542be05e8c52', class: "height-full width-full" }, h("calcite-loader", { key: '51ed528d5676b983c27b50b098dd8785a3c7b591', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4e51683f468b29b6dcdf1a588cdfedb37a02166f', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -1109,16 +1107,27 @@ export class LayerTable {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the table with the configured field in the configured sort order
+     * Sort the table with the configured field and the sort order
      */
     async _sortTable() {
-        var _a, _b, _c, _d, _e, _f;
-        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        var _a, _b, _c, _d;
+        //By default sort the table using objectIdField and in descending order
+        let sortField = this._layer.objectIdField;
+        let sortOrder = 'desc';
+        let configuredLayer;
+        //get the sortField and sortOrder from the configuration
         if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
-            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+            configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
+            if (configuredLayer && configuredLayer.length > 0) {
+                configuredLayer = configuredLayer[0];
+                //if sort field is defined and sortField is available in the fields then use it 
+                if (configuredLayer.sortField && ((_d = configuredLayer.fields) === null || _d === void 0 ? void 0 : _d.includes(configuredLayer.sortField))) {
+                    sortField = configuredLayer.sortField;
+                }
+                //use sort order if configured
+                sortOrder = (configuredLayer === null || configuredLayer === void 0 ? void 0 : configuredLayer.sortOrder) ? configuredLayer.sortOrder : "desc";
+            }
         }
-        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
         if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
@@ -1770,40 +1779,6 @@ export class LayerTable {
                 "attribute": "show-newest-first",
                 "reflect": false
             },
-            "sortField": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string: Field using which table will be sorted"
-                },
-                "attribute": "sort-field",
-                "reflect": false
-            },
-            "sortOrder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'asc' | 'desc'",
-                    "resolved": "\"asc\" | \"desc\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
-                },
-                "attribute": "sort-order",
-                "reflect": false
-            },
             "zoomAndScrollToSelected": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/demos/crowdsource-manager.html

@@ -29,7 +29,7 @@
 
   <link rel="stylesheet" href="https://jsdev.arcgis.com/4.30/esri/themes/light/main.css" />
   <!-- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/dark/main.css" /> -->
-  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
+  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.2/calcite.css" />
 
   <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
   <link rel="stylesheet" href="../solutions-components.css" type="text/css">
@@ -175,7 +175,9 @@
               ],
               fieldOrder: [
                 "Your_Stars", "Route", "Location", "URL", "Avg_Stars", "Route_Type", "Rating", "Pitches", "Length", "Area_Latitude", "Area_Longitude", "ObjectId"
-              ]
+              ],
+              sortField: "Avg_Stars",
+              sortOrder: "asc"
             }],
             mapId: "91e220910a994da4abfb0d1763d64ecb"
           }

package/dist/collection/demos/crowdsource-reporter.html

@@ -78,7 +78,7 @@
     <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
-    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
+    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.2/calcite.css" />
 
     <script src="https://jsdev.arcgis.com/4.29/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>

package/dist/collection/utils/interfaces.ts

@@ -470,6 +470,8 @@ export interface ILayerDef {
   sublayerId?: number;
   fields?: string[];
   fieldOrder?: string[];
+  sortField?: string;
+  sortOrder?: 'asc' | 'desc';
 }
 
 export interface IMapChange {

package/dist/components/crowdsource-manager.js

@@ -102,6 +102,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
+        this.introductionPageEnabled = false;
         this.enableAutoRefresh = false;
         this.enableBasemap = true;
         this.enableColumnReorder = true;
@@ -128,8 +129,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -236,7 +235,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '686aeccc0f97c1eb8bc1b673d8816663e80fdf71' }, h("calcite-shell", { key: 'f3451483cdbafa8b68a00b71e9927bbff55781b9', class: "position-relative" }, h("calcite-panel", { key: '8256440e1cefa8f25bf1af1f9a1e87650c34462d', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        // 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: '175124a05c83f6f02bef1378a20e5a3ed083ce00' }, h("calcite-shell", { key: '10677408a11bbe6196a95622a7a5f69fd3766c20', class: "position-relative" }, h("calcite-panel", { key: 'd3f044385482089d2dd5a457c2de4b3cc748e7c6', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -356,7 +357,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getBody(layoutMode, panelOpen, hideTable) {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
+            h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
     }
     /**
      * Emit the event when info button clicked
@@ -409,10 +411,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
+                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
+                '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
+                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
             } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
@@ -457,7 +459,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes
@@ -570,6 +572,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "defaultLevel": [1, "default-level"],
         "defaultOid": [1, "default-oid"],
         "defaultWebmap": [1, "default-webmap"],
+        "introductionPageEnabled": [4, "introduction-page-enabled"],
         "enableAutoRefresh": [4, "enable-auto-refresh"],
         "enableBasemap": [4, "enable-basemap"],
         "enableColumnReorder": [4, "enable-column-reorder"],
@@ -596,8 +599,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "theme": [1],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "zoomToScale": [2, "zoom-to-scale"],
-        "sortField": [1, "sort-field"],
-        "sortOrder": [1, "sort-order"],
         "_expandPopup": [32],
         "_hideFooter": [32],
         "_hideTable": [32],

package/dist/components/info-card2.js

@@ -24,7 +24,7 @@ import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './delete-button2.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand)}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}";
 const InfoCardStyle0 = infoCardCss;
 
 const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {

package/dist/components/layer-table2.js

@@ -110,8 +110,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.zoomToScale = undefined;
         this._allIds = [];
@@ -339,7 +337,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: '69a8f1d8c41eb82d6f39f6c580f78369f372567f' }, h("calcite-shell", { key: '3cb7997d918af450d04b95e1a236e09400b30af1' }, this._getTableControlRow("header"), h("div", { key: '1f0e84f1759c0333acee402a603923ca96e7d9e4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'b62bedc4c924f0d0a30e2746a532270c2a4d4a4b', class: "height-full width-full" }, h("calcite-loader", { key: 'e28017e4c3aba559774965f2cbff0fcb83f9ab2d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'efc520212f53c3db46574c7caf5d9f9835b83a2c', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '1077bca0d3f59ed86999449c2c5428e4aa65b30f' }, h("calcite-shell", { key: '02b7a7512cfdc8958251ae00709b971f9bfff6df' }, this._getTableControlRow("header"), h("div", { key: '83d03238c368cd332714f4434297a9a4f9d47ec4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '18927c7c65687c9df28f69b1e66f542be05e8c52', class: "height-full width-full" }, h("calcite-loader", { key: '51ed528d5676b983c27b50b098dd8785a3c7b591', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4e51683f468b29b6dcdf1a588cdfedb37a02166f', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -1139,16 +1137,27 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the table with the configured field in the configured sort order
+     * Sort the table with the configured field and the sort order
      */
     async _sortTable() {
-        var _a, _b, _c, _d, _e, _f;
-        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        var _a, _b, _c, _d;
+        //By default sort the table using objectIdField and in descending order
+        let sortField = this._layer.objectIdField;
+        let sortOrder = 'desc';
+        let configuredLayer;
+        //get the sortField and sortOrder from the configuration
         if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
-            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+            configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
+            if (configuredLayer && configuredLayer.length > 0) {
+                configuredLayer = configuredLayer[0];
+                //if sort field is defined and sortField is available in the fields then use it 
+                if (configuredLayer.sortField && ((_d = configuredLayer.fields) === null || _d === void 0 ? void 0 : _d.includes(configuredLayer.sortField))) {
+                    sortField = configuredLayer.sortField;
+                }
+                //use sort order if configured
+                sortOrder = (configuredLayer === null || configuredLayer === void 0 ? void 0 : configuredLayer.sortOrder) ? configuredLayer.sortOrder : "desc";
+            }
         }
-        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
         if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
@@ -1544,8 +1553,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "shareIncludeEmbed": [4, "share-include-embed"],
         "shareIncludeSocial": [4, "share-include-social"],
         "showNewestFirst": [4, "show-newest-first"],
-        "sortField": [1, "sort-field"],
-        "sortOrder": [1, "sort-order"],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "zoomToScale": [2, "zoom-to-scale"],
         "_allIds": [32],

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

@@ -666,7 +666,7 @@ const EditCard = class {
 };
 EditCard.style = EditCardStyle0;
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand)}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}";
 const InfoCardStyle0 = infoCardCss;
 
 const InfoCard = class {

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

@@ -162,8 +162,6 @@ const LayerTable = class {
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.zoomToScale = undefined;
         this._allIds = [];
@@ -391,7 +389,7 @@ const LayerTable = class {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: '69a8f1d8c41eb82d6f39f6c580f78369f372567f' }, h("calcite-shell", { key: '3cb7997d918af450d04b95e1a236e09400b30af1' }, this._getTableControlRow("header"), h("div", { key: '1f0e84f1759c0333acee402a603923ca96e7d9e4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'b62bedc4c924f0d0a30e2746a532270c2a4d4a4b', class: "height-full width-full" }, h("calcite-loader", { key: 'e28017e4c3aba559774965f2cbff0fcb83f9ab2d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'efc520212f53c3db46574c7caf5d9f9835b83a2c', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '1077bca0d3f59ed86999449c2c5428e4aa65b30f' }, h("calcite-shell", { key: '02b7a7512cfdc8958251ae00709b971f9bfff6df' }, this._getTableControlRow("header"), h("div", { key: '83d03238c368cd332714f4434297a9a4f9d47ec4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '18927c7c65687c9df28f69b1e66f542be05e8c52', class: "height-full width-full" }, h("calcite-loader", { key: '51ed528d5676b983c27b50b098dd8785a3c7b591', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4e51683f468b29b6dcdf1a588cdfedb37a02166f', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -1191,16 +1189,27 @@ const LayerTable = class {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the table with the configured field in the configured sort order
+     * Sort the table with the configured field and the sort order
      */
     async _sortTable() {
-        var _a, _b, _c, _d, _e, _f;
-        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        var _a, _b, _c, _d;
+        //By default sort the table using objectIdField and in descending order
+        let sortField = this._layer.objectIdField;
+        let sortOrder = 'desc';
+        let configuredLayer;
+        //get the sortField and sortOrder from the configuration
         if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
-            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+            configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
+            if (configuredLayer && configuredLayer.length > 0) {
+                configuredLayer = configuredLayer[0];
+                //if sort field is defined and sortField is available in the fields then use it 
+                if (configuredLayer.sortField && ((_d = configuredLayer.fields) === null || _d === void 0 ? void 0 : _d.includes(configuredLayer.sortField))) {
+                    sortField = configuredLayer.sortField;
+                }
+                //use sort order if configured
+                sortOrder = (configuredLayer === null || configuredLayer === void 0 ? void 0 : configuredLayer.sortOrder) ? configuredLayer.sortOrder : "desc";
+            }
         }
-        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
         if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {

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

@@ -45,6 +45,7 @@ const CrowdsourceManager = class {
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
+        this.introductionPageEnabled = false;
         this.enableAutoRefresh = false;
         this.enableBasemap = true;
         this.enableColumnReorder = true;
@@ -71,8 +72,6 @@ const CrowdsourceManager = class {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -179,7 +178,9 @@ const CrowdsourceManager = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '686aeccc0f97c1eb8bc1b673d8816663e80fdf71' }, h("calcite-shell", { key: 'f3451483cdbafa8b68a00b71e9927bbff55781b9', class: "position-relative" }, h("calcite-panel", { key: '8256440e1cefa8f25bf1af1f9a1e87650c34462d', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        // 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: '175124a05c83f6f02bef1378a20e5a3ed083ce00' }, h("calcite-shell", { key: '10677408a11bbe6196a95622a7a5f69fd3766c20', class: "position-relative" }, h("calcite-panel", { key: 'd3f044385482089d2dd5a457c2de4b3cc748e7c6', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -299,7 +300,8 @@ const CrowdsourceManager = class {
     _getBody(layoutMode, panelOpen, hideTable) {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
+            h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
     }
     /**
      * Emit the event when info button clicked
@@ -352,10 +354,10 @@ const CrowdsourceManager = class {
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
+                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
+                '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
+                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
             } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
@@ -400,7 +402,7 @@ const CrowdsourceManager = class {
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes