@esri/solutions-components 0.7.8 → 0.7.9

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

@@ -62,6 +62,7 @@ export class CrowdsourceManager {
         this._layoutMode = ELayoutMode.GRID;
         this._mapView = undefined;
         this._panelOpen = true;
+        this._tableOnly = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -111,6 +112,16 @@ export class CrowdsourceManager {
     //  Events (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
+     */
+    async idsFound(evt) {
+        const ids = evt.detail;
+        this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
+        if (this._tableOnly) {
+            this._expandPopup = true;
+        }
+    }
     /**
      * Listen for layoutChanged event to be fired so we can adjust the layout
      */
@@ -308,7 +319,7 @@ export class CrowdsourceManager {
         const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 ? "position-absolute-0" : "position-absolute-50";
-        return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
+        return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { 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())));
     }
     /**
      * Toggle the popup information
@@ -982,7 +993,8 @@ export class CrowdsourceManager {
             "_translations": {},
             "_layoutMode": {},
             "_mapView": {},
-            "_panelOpen": {}
+            "_panelOpen": {},
+            "_tableOnly": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -1006,6 +1018,12 @@ export class CrowdsourceManager {
     }
     static get listeners() {
         return [{
+                "name": "idsFound",
+                "method": "idsFound",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "layoutChanged",
                 "method": "layoutChanged",
                 "target": "window",

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

@@ -297,7 +297,7 @@ export class LayerTable {
      * @returns The dom node that contains the controls
      */
     _getActionBar() {
-        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
+        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -1009,9 +1009,9 @@ export class LayerTable {
      * @returns void
      */
     _initLayerExpressions() {
-        var _a;
-        const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
-        this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
+        var _a, _b;
+        const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
+        this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
     }
     /**
      * Select all rows that are not currently selectd
@@ -1114,6 +1114,7 @@ export class LayerTable {
                 fieldInfos.some(fieldInfo => {
                     if (fieldInfo.name === columnTemplate.fieldName) {
                         columnTemplate.label = fieldInfo.alias;
+                        columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
                         return true;
                     }
                 });
@@ -1122,12 +1123,48 @@ export class LayerTable {
                 return {
                     type: "field",
                     fieldName: fieldInfo.name,
-                    label: fieldInfo.alias
+                    label: fieldInfo.alias,
+                    menuConfig: this._getMenuConfig(fieldInfo.name)
                 };
             });
         }
         return columnTemplates;
     }
+    /**
+     * Get the menu config that adds the ability to hide the current column
+     *
+     * @returns void
+     * @protected
+     */
+    _getMenuConfig(name) {
+        return {
+            items: [
+                {
+                    label: this._translations.hideField,
+                    iconClass: "esri-icon-non-visible",
+                    autoCloseMenu: true,
+                    clickFunction: () => {
+                        this._handleHideClick(name);
+                    }
+                }
+            ]
+        };
+    }
+    /**
+     * Hide the table column for the provided name
+     *
+     * @returns void
+     * @protected
+     */
+    _handleHideClick(name) {
+        this._columnsInfo[name] = false;
+        this._table.hideColumn(name);
+        this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
+            if (columnTemplate.fieldName === name) {
+                columnTemplate.visible = false;
+            }
+        });
+    }
     /**
      * Fetches the component's translations
      *

package/dist/collection/components/map-layer-picker/map-layer-picker.css

@@ -20,6 +20,7 @@
 
 .map-layer-picker-container {
   width: 100%;
+  align-items: center;
 }
 
 .map-layer-picker {

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -35,8 +35,10 @@ export class MapLayerPicker {
         this.defaultLayerHonored = false;
         this.appearance = "transparent";
         this.defaultLayerId = "";
+        this.display = "inline-block";
         this.enabledLayerIds = [];
         this.enabledTableIds = [];
+        this.height = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
         this.placeholderIcon = "";
@@ -91,7 +93,9 @@ export class MapLayerPicker {
      */
     render() {
         const id = "map-layer-picker";
-        return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
+        style = Object.assign(Object.assign({}, style), { "display": this.display });
+        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
@@ -228,14 +232,18 @@ export class MapLayerPicker {
     async _setLayers() {
         if (this.mapView) {
             await this._initLayerTableHash();
-            const mapLayerIds = this.onlyShowUpdatableLayers ?
+            const layerIds = this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
-            const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+            const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
             this.ids = [
-                ...mapLayerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
-                ...mapTableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
+                ...layerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
+                ...tableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
             ];
+            this.idsFound.emit({
+                layerIds,
+                tableIds
+            });
         }
     }
     /**
@@ -354,6 +362,24 @@ export class MapLayerPicker {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "display": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"inline-flex\" | \"inline-block\"",
+                    "resolved": "\"inline-block\" | \"inline-flex\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\"inline-flex\" | \"inline-block\": controls the display style of the dropdown"
+                },
+                "attribute": "display",
+                "reflect": false,
+                "defaultValue": "\"inline-block\""
+            },
             "enabledLayerIds": {
                 "type": "unknown",
                 "mutable": false,
@@ -386,6 +412,23 @@ export class MapLayerPicker {
                 },
                 "defaultValue": "[]"
             },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number: optional fixed height value for the control.\r\nSpecified as pixel height."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
             "mapView": {
                 "type": "unknown",
                 "mutable": false,
@@ -541,6 +584,27 @@ export class MapLayerPicker {
     }
     static get events() {
         return [{
+                "method": "idsFound",
+                "name": "idsFound",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when no valid layers are found"
+                },
+                "complexType": {
+                    "original": "ILayerAndTableIds",
+                    "resolved": "ILayerAndTableIds",
+                    "references": {
+                        "ILayerAndTableIds": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::ILayerAndTableIds"
+                        }
+                    }
+                }
+            }, {
                 "method": "noLayersFound",
                 "name": "noLayersFound",
                 "bubbles": true,

package/dist/collection/utils/interfaces.ts

@@ -532,3 +532,8 @@ export interface IExpression {
   step?: number;
   numDisplayOption?: "slider" | "drop-down";
 }
+
+export interface ILayerAndTableIds {
+  layerIds: string[];
+  tableIds: string[];
+}

package/dist/components/crowdsource-manager.js

@@ -108,6 +108,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._layoutMode = ELayoutMode.GRID;
         this._mapView = undefined;
         this._panelOpen = true;
+        this._tableOnly = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -157,6 +158,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     //  Events (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
+     */
+    async idsFound(evt) {
+        const ids = evt.detail;
+        this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
+        if (this._tableOnly) {
+            this._expandPopup = true;
+        }
+    }
     /**
      * Listen for layoutChanged event to be fired so we can adjust the layout
      */
@@ -354,7 +365,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 ? "position-absolute-0" : "position-absolute-50";
-        return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
+        return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { 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())));
     }
     /**
      * Toggle the popup information
@@ -514,8 +525,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_translations": [32],
         "_layoutMode": [32],
         "_mapView": [32],
-        "_panelOpen": [32]
-    }, [[8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
+        "_panelOpen": [32],
+        "_tableOnly": [32]
+    }, [[8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
         "defaultCenter": ["defaultCenterWatchHandler"],
         "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
         "defaultOid": ["defaultOidWatchHandler"],

package/dist/components/layer-table2.js

@@ -325,7 +325,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns The dom node that contains the controls
      */
     _getActionBar() {
-        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
+        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -1037,9 +1037,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns void
      */
     _initLayerExpressions() {
-        var _a;
-        const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
-        this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
+        var _a, _b;
+        const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
+        this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
     }
     /**
      * Select all rows that are not currently selectd
@@ -1142,6 +1142,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 fieldInfos.some(fieldInfo => {
                     if (fieldInfo.name === columnTemplate.fieldName) {
                         columnTemplate.label = fieldInfo.alias;
+                        columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
                         return true;
                     }
                 });
@@ -1150,12 +1151,48 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 return {
                     type: "field",
                     fieldName: fieldInfo.name,
-                    label: fieldInfo.alias
+                    label: fieldInfo.alias,
+                    menuConfig: this._getMenuConfig(fieldInfo.name)
                 };
             });
         }
         return columnTemplates;
     }
+    /**
+     * Get the menu config that adds the ability to hide the current column
+     *
+     * @returns void
+     * @protected
+     */
+    _getMenuConfig(name) {
+        return {
+            items: [
+                {
+                    label: this._translations.hideField,
+                    iconClass: "esri-icon-non-visible",
+                    autoCloseMenu: true,
+                    clickFunction: () => {
+                        this._handleHideClick(name);
+                    }
+                }
+            ]
+        };
+    }
+    /**
+     * Hide the table column for the provided name
+     *
+     * @returns void
+     * @protected
+     */
+    _handleHideClick(name) {
+        this._columnsInfo[name] = false;
+        this._table.hideColumn(name);
+        this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
+            if (columnTemplate.fieldName === name) {
+                columnTemplate.visible = false;
+            }
+        });
+    }
     /**
      * Fetches the component's translations
      *

package/dist/components/map-layer-picker2.js

@@ -23,12 +23,13 @@ import { d as defineCustomElement$3 } from './option.js';
 import { d as defineCustomElement$2 } from './select.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
 
 const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.idsFound = createEvent(this, "idsFound", 7);
         this.noLayersFound = createEvent(this, "noLayersFound", 7);
         this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
         //--------------------------------------------------------------------------
@@ -42,8 +43,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
         this.defaultLayerHonored = false;
         this.appearance = "transparent";
         this.defaultLayerId = "";
+        this.display = "inline-block";
         this.enabledLayerIds = [];
         this.enabledTableIds = [];
+        this.height = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
         this.placeholderIcon = "";
@@ -98,7 +101,9 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
      */
     render() {
         const id = "map-layer-picker";
-        return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
+        style = Object.assign(Object.assign({}, style), { "display": this.display });
+        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
@@ -235,14 +240,18 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
     async _setLayers() {
         if (this.mapView) {
             await this._initLayerTableHash();
-            const mapLayerIds = this.onlyShowUpdatableLayers ?
+            const layerIds = this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
-            const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+            const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
             this.ids = [
-                ...mapLayerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
-                ...mapTableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
+                ...layerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
+                ...tableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
             ];
+            this.idsFound.emit({
+                layerIds,
+                tableIds
+            });
         }
     }
     /**
@@ -320,8 +329,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
 }, [0, "map-layer-picker", {
         "appearance": [1],
         "defaultLayerId": [1, "default-layer-id"],
+        "display": [1],
         "enabledLayerIds": [16],
         "enabledTableIds": [16],
+        "height": [2],
         "mapView": [16],
         "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
         "placeholderIcon": [1, "placeholder-icon"],

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

@@ -1895,11 +1895,12 @@ const DropdownItem = class {
 };
 DropdownItem.style = dropdownItemCss;
 
-const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
 
 const MapLayerPicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.idsFound = createEvent(this, "idsFound", 7);
         this.noLayersFound = createEvent(this, "noLayersFound", 7);
         this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
         //--------------------------------------------------------------------------
@@ -1913,8 +1914,10 @@ const MapLayerPicker = class {
         this.defaultLayerHonored = false;
         this.appearance = "transparent";
         this.defaultLayerId = "";
+        this.display = "inline-block";
         this.enabledLayerIds = [];
         this.enabledTableIds = [];
+        this.height = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
         this.placeholderIcon = "";
@@ -1969,7 +1972,9 @@ const MapLayerPicker = class {
      */
     render() {
         const id = "map-layer-picker";
-        return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
+        style = Object.assign(Object.assign({}, style), { "display": this.display });
+        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
@@ -2106,14 +2111,18 @@ const MapLayerPicker = class {
     async _setLayers() {
         if (this.mapView) {
             await this._initLayerTableHash();
-            const mapLayerIds = this.onlyShowUpdatableLayers ?
+            const layerIds = this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
-            const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+            const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
             this.ids = [
-                ...mapLayerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
-                ...mapTableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
+                ...layerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
+                ...tableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
             ];
+            this.idsFound.emit({
+                layerIds,
+                tableIds
+            });
         }
     }
     /**

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

@@ -378,7 +378,7 @@ const LayerTable = class {
      * @returns The dom node that contains the controls
      */
     _getActionBar() {
-        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
+        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -1090,9 +1090,9 @@ const LayerTable = class {
      * @returns void
      */
     _initLayerExpressions() {
-        var _a;
-        const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
-        this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
+        var _a, _b;
+        const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
+        this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
     }
     /**
      * Select all rows that are not currently selectd
@@ -1195,6 +1195,7 @@ const LayerTable = class {
                 fieldInfos.some(fieldInfo => {
                     if (fieldInfo.name === columnTemplate.fieldName) {
                         columnTemplate.label = fieldInfo.alias;
+                        columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
                         return true;
                     }
                 });
@@ -1203,12 +1204,48 @@ const LayerTable = class {
                 return {
                     type: "field",
                     fieldName: fieldInfo.name,
-                    label: fieldInfo.alias
+                    label: fieldInfo.alias,
+                    menuConfig: this._getMenuConfig(fieldInfo.name)
                 };
             });
         }
         return columnTemplates;
     }
+    /**
+     * Get the menu config that adds the ability to hide the current column
+     *
+     * @returns void
+     * @protected
+     */
+    _getMenuConfig(name) {
+        return {
+            items: [
+                {
+                    label: this._translations.hideField,
+                    iconClass: "esri-icon-non-visible",
+                    autoCloseMenu: true,
+                    clickFunction: () => {
+                        this._handleHideClick(name);
+                    }
+                }
+            ]
+        };
+    }
+    /**
+     * Hide the table column for the provided name
+     *
+     * @returns void
+     * @protected
+     */
+    _handleHideClick(name) {
+        this._columnsInfo[name] = false;
+        this._table.hideColumn(name);
+        this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
+            if (columnTemplate.fieldName === name) {
+                columnTemplate.visible = false;
+            }
+        });
+    }
     /**
      * Fetches the component's translations
      *