@esri/solutions-components 0.7.8 → 0.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/assets/t9n/layer-table/resources.json +1 -0
  2. package/dist/assets/t9n/layer-table/resources_en.json +1 -0
  3. package/dist/cjs/calcite-combobox_6.cjs.entry.js +15 -6
  4. package/dist/cjs/card-manager_3.cjs.entry.js +42 -5
  5. package/dist/cjs/crowdsource-manager.cjs.entry.js +12 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/solutions-components.cjs.js +1 -1
  8. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +20 -2
  9. package/dist/collection/components/layer-table/layer-table.js +42 -5
  10. package/dist/collection/components/map-layer-picker/map-layer-picker.css +1 -0
  11. package/dist/collection/components/map-layer-picker/map-layer-picker.js +69 -5
  12. package/dist/collection/utils/interfaces.ts +5 -0
  13. package/dist/components/crowdsource-manager.js +15 -3
  14. package/dist/components/layer-table2.js +42 -5
  15. package/dist/components/map-layer-picker2.js +17 -6
  16. package/dist/esm/calcite-combobox_6.entry.js +15 -6
  17. package/dist/esm/card-manager_3.entry.js +42 -5
  18. package/dist/esm/crowdsource-manager.entry.js +12 -1
  19. package/dist/esm/loader.js +1 -1
  20. package/dist/esm/solutions-components.js +1 -1
  21. package/dist/solutions-components/{p-546a3d3c.entry.js → p-a9bbd352.entry.js} +1 -1
  22. package/dist/solutions-components/p-c9b4d52f.entry.js +6 -0
  23. package/dist/solutions-components/p-f7870ec1.entry.js +6 -0
  24. package/dist/solutions-components/solutions-components.esm.js +1 -1
  25. package/dist/solutions-components/utils/interfaces.ts +5 -0
  26. package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +8 -0
  27. package/dist/types/components/layer-table/layer-table.d.ts +14 -0
  28. package/dist/types/components/map-layer-picker/map-layer-picker.d.ts +15 -1
  29. package/dist/types/components.d.ts +23 -2
  30. package/dist/types/preact.d.ts +2 -1
  31. package/dist/types/utils/interfaces.d.ts +4 -0
  32. package/package.json +1 -1
  33. package/dist/solutions-components/p-1b9709ce.entry.js +0 -6
  34. package/dist/solutions-components/p-4f1c4004.entry.js +0 -6
@@ -62,6 +62,7 @@ export class CrowdsourceManager {
62
62
  this._layoutMode = ELayoutMode.GRID;
63
63
  this._mapView = undefined;
64
64
  this._panelOpen = true;
65
+ this._tableOnly = false;
65
66
  }
66
67
  //--------------------------------------------------------------------------
67
68
  //
@@ -111,6 +112,16 @@ export class CrowdsourceManager {
111
112
  // Events (public)
112
113
  //
113
114
  //--------------------------------------------------------------------------
115
+ /**
116
+ * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
117
+ */
118
+ async idsFound(evt) {
119
+ const ids = evt.detail;
120
+ this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
121
+ if (this._tableOnly) {
122
+ this._expandPopup = true;
123
+ }
124
+ }
114
125
  /**
115
126
  * Listen for layoutChanged event to be fired so we can adjust the layout
116
127
  */
@@ -308,7 +319,7 @@ export class CrowdsourceManager {
308
319
  const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
309
320
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
310
321
  const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 ? "position-absolute-0" : "position-absolute-50";
311
- 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())));
322
+ 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())));
312
323
  }
313
324
  /**
314
325
  * Toggle the popup information
@@ -982,7 +993,8 @@ export class CrowdsourceManager {
982
993
  "_translations": {},
983
994
  "_layoutMode": {},
984
995
  "_mapView": {},
985
- "_panelOpen": {}
996
+ "_panelOpen": {},
997
+ "_tableOnly": {}
986
998
  };
987
999
  }
988
1000
  static get elementRef() { return "el"; }
@@ -1006,6 +1018,12 @@ export class CrowdsourceManager {
1006
1018
  }
1007
1019
  static get listeners() {
1008
1020
  return [{
1021
+ "name": "idsFound",
1022
+ "method": "idsFound",
1023
+ "target": "window",
1024
+ "capture": false,
1025
+ "passive": false
1026
+ }, {
1009
1027
  "name": "layoutChanged",
1010
1028
  "method": "layoutChanged",
1011
1029
  "target": "window",
@@ -297,7 +297,7 @@ export class LayerTable {
297
297
  * @returns The dom node that contains the controls
298
298
  */
299
299
  _getActionBar() {
300
- 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()));
300
+ 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()));
301
301
  }
302
302
  /**
303
303
  * Get the actions that are used for various interactions with the table
@@ -1009,9 +1009,9 @@ export class LayerTable {
1009
1009
  * @returns void
1010
1010
  */
1011
1011
  _initLayerExpressions() {
1012
- var _a;
1013
- const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
1014
- this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
1012
+ var _a, _b;
1013
+ const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
1014
+ this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
1015
1015
  }
1016
1016
  /**
1017
1017
  * Select all rows that are not currently selectd
@@ -1114,6 +1114,7 @@ export class LayerTable {
1114
1114
  fieldInfos.some(fieldInfo => {
1115
1115
  if (fieldInfo.name === columnTemplate.fieldName) {
1116
1116
  columnTemplate.label = fieldInfo.alias;
1117
+ columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
1117
1118
  return true;
1118
1119
  }
1119
1120
  });
@@ -1122,12 +1123,48 @@ export class LayerTable {
1122
1123
  return {
1123
1124
  type: "field",
1124
1125
  fieldName: fieldInfo.name,
1125
- label: fieldInfo.alias
1126
+ label: fieldInfo.alias,
1127
+ menuConfig: this._getMenuConfig(fieldInfo.name)
1126
1128
  };
1127
1129
  });
1128
1130
  }
1129
1131
  return columnTemplates;
1130
1132
  }
1133
+ /**
1134
+ * Get the menu config that adds the ability to hide the current column
1135
+ *
1136
+ * @returns void
1137
+ * @protected
1138
+ */
1139
+ _getMenuConfig(name) {
1140
+ return {
1141
+ items: [
1142
+ {
1143
+ label: this._translations.hideField,
1144
+ iconClass: "esri-icon-non-visible",
1145
+ autoCloseMenu: true,
1146
+ clickFunction: () => {
1147
+ this._handleHideClick(name);
1148
+ }
1149
+ }
1150
+ ]
1151
+ };
1152
+ }
1153
+ /**
1154
+ * Hide the table column for the provided name
1155
+ *
1156
+ * @returns void
1157
+ * @protected
1158
+ */
1159
+ _handleHideClick(name) {
1160
+ this._columnsInfo[name] = false;
1161
+ this._table.hideColumn(name);
1162
+ this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
1163
+ if (columnTemplate.fieldName === name) {
1164
+ columnTemplate.visible = false;
1165
+ }
1166
+ });
1167
+ }
1131
1168
  /**
1132
1169
  * Fetches the component's translations
1133
1170
  *
@@ -20,6 +20,7 @@
20
20
 
21
21
  .map-layer-picker-container {
22
22
  width: 100%;
23
+ align-items: center;
23
24
  }
24
25
 
25
26
  .map-layer-picker {
@@ -35,8 +35,10 @@ export class MapLayerPicker {
35
35
  this.defaultLayerHonored = false;
36
36
  this.appearance = "transparent";
37
37
  this.defaultLayerId = "";
38
+ this.display = "inline-block";
38
39
  this.enabledLayerIds = [];
39
40
  this.enabledTableIds = [];
41
+ this.height = undefined;
40
42
  this.mapView = undefined;
41
43
  this.onlyShowUpdatableLayers = undefined;
42
44
  this.placeholderIcon = "";
@@ -91,7 +93,9 @@ export class MapLayerPicker {
91
93
  */
92
94
  render() {
93
95
  const id = "map-layer-picker";
94
- return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
96
+ let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
97
+ style = Object.assign(Object.assign({}, style), { "display": this.display });
98
+ 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() :
95
99
  !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
96
100
  this.type === "combobox" ? this._getCombobox(id) :
97
101
  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 {
228
232
  async _setLayers() {
229
233
  if (this.mapView) {
230
234
  await this._initLayerTableHash();
231
- const mapLayerIds = this.onlyShowUpdatableLayers ?
235
+ const layerIds = this.onlyShowUpdatableLayers ?
232
236
  this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
233
- const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
237
+ const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
234
238
  this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
235
239
  this.ids = [
236
- ...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; }),
237
- ...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; }),
240
+ ...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; }),
241
+ ...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; }),
238
242
  ];
243
+ this.idsFound.emit({
244
+ layerIds,
245
+ tableIds
246
+ });
239
247
  }
240
248
  }
241
249
  /**
@@ -354,6 +362,24 @@ export class MapLayerPicker {
354
362
  "reflect": false,
355
363
  "defaultValue": "\"\""
356
364
  },
365
+ "display": {
366
+ "type": "string",
367
+ "mutable": false,
368
+ "complexType": {
369
+ "original": "\"inline-flex\" | \"inline-block\"",
370
+ "resolved": "\"inline-block\" | \"inline-flex\"",
371
+ "references": {}
372
+ },
373
+ "required": false,
374
+ "optional": false,
375
+ "docs": {
376
+ "tags": [],
377
+ "text": "\"inline-flex\" | \"inline-block\": controls the display style of the dropdown"
378
+ },
379
+ "attribute": "display",
380
+ "reflect": false,
381
+ "defaultValue": "\"inline-block\""
382
+ },
357
383
  "enabledLayerIds": {
358
384
  "type": "unknown",
359
385
  "mutable": false,
@@ -386,6 +412,23 @@ export class MapLayerPicker {
386
412
  },
387
413
  "defaultValue": "[]"
388
414
  },
415
+ "height": {
416
+ "type": "number",
417
+ "mutable": false,
418
+ "complexType": {
419
+ "original": "number",
420
+ "resolved": "number",
421
+ "references": {}
422
+ },
423
+ "required": false,
424
+ "optional": false,
425
+ "docs": {
426
+ "tags": [],
427
+ "text": "number: optional fixed height value for the control.\r\nSpecified as pixel height."
428
+ },
429
+ "attribute": "height",
430
+ "reflect": false
431
+ },
389
432
  "mapView": {
390
433
  "type": "unknown",
391
434
  "mutable": false,
@@ -541,6 +584,27 @@ export class MapLayerPicker {
541
584
  }
542
585
  static get events() {
543
586
  return [{
587
+ "method": "idsFound",
588
+ "name": "idsFound",
589
+ "bubbles": true,
590
+ "cancelable": true,
591
+ "composed": true,
592
+ "docs": {
593
+ "tags": [],
594
+ "text": "Emitted on demand when no valid layers are found"
595
+ },
596
+ "complexType": {
597
+ "original": "ILayerAndTableIds",
598
+ "resolved": "ILayerAndTableIds",
599
+ "references": {
600
+ "ILayerAndTableIds": {
601
+ "location": "import",
602
+ "path": "../../utils/interfaces",
603
+ "id": "src/utils/interfaces.ts::ILayerAndTableIds"
604
+ }
605
+ }
606
+ }
607
+ }, {
544
608
  "method": "noLayersFound",
545
609
  "name": "noLayersFound",
546
610
  "bubbles": true,
@@ -532,3 +532,8 @@ export interface IExpression {
532
532
  step?: number;
533
533
  numDisplayOption?: "slider" | "drop-down";
534
534
  }
535
+
536
+ export interface ILayerAndTableIds {
537
+ layerIds: string[];
538
+ tableIds: string[];
539
+ }
@@ -108,6 +108,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
108
108
  this._layoutMode = ELayoutMode.GRID;
109
109
  this._mapView = undefined;
110
110
  this._panelOpen = true;
111
+ this._tableOnly = false;
111
112
  }
112
113
  //--------------------------------------------------------------------------
113
114
  //
@@ -157,6 +158,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
157
158
  // Events (public)
158
159
  //
159
160
  //--------------------------------------------------------------------------
161
+ /**
162
+ * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
163
+ */
164
+ async idsFound(evt) {
165
+ const ids = evt.detail;
166
+ this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
167
+ if (this._tableOnly) {
168
+ this._expandPopup = true;
169
+ }
170
+ }
160
171
  /**
161
172
  * Listen for layoutChanged event to be fired so we can adjust the layout
162
173
  */
@@ -354,7 +365,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
354
365
  const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
355
366
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
356
367
  const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 ? "position-absolute-0" : "position-absolute-50";
357
- 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())));
368
+ 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())));
358
369
  }
359
370
  /**
360
371
  * Toggle the popup information
@@ -514,8 +525,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
514
525
  "_translations": [32],
515
526
  "_layoutMode": [32],
516
527
  "_mapView": [32],
517
- "_panelOpen": [32]
518
- }, [[8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
528
+ "_panelOpen": [32],
529
+ "_tableOnly": [32]
530
+ }, [[8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
519
531
  "defaultCenter": ["defaultCenterWatchHandler"],
520
532
  "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
521
533
  "defaultOid": ["defaultOidWatchHandler"],
@@ -325,7 +325,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
325
325
  * @returns The dom node that contains the controls
326
326
  */
327
327
  _getActionBar() {
328
- 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()));
328
+ 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()));
329
329
  }
330
330
  /**
331
331
  * Get the actions that are used for various interactions with the table
@@ -1037,9 +1037,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
1037
1037
  * @returns void
1038
1038
  */
1039
1039
  _initLayerExpressions() {
1040
- var _a;
1041
- const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
1042
- this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
1040
+ var _a, _b;
1041
+ const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
1042
+ this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
1043
1043
  }
1044
1044
  /**
1045
1045
  * Select all rows that are not currently selectd
@@ -1142,6 +1142,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
1142
1142
  fieldInfos.some(fieldInfo => {
1143
1143
  if (fieldInfo.name === columnTemplate.fieldName) {
1144
1144
  columnTemplate.label = fieldInfo.alias;
1145
+ columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
1145
1146
  return true;
1146
1147
  }
1147
1148
  });
@@ -1150,12 +1151,48 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
1150
1151
  return {
1151
1152
  type: "field",
1152
1153
  fieldName: fieldInfo.name,
1153
- label: fieldInfo.alias
1154
+ label: fieldInfo.alias,
1155
+ menuConfig: this._getMenuConfig(fieldInfo.name)
1154
1156
  };
1155
1157
  });
1156
1158
  }
1157
1159
  return columnTemplates;
1158
1160
  }
1161
+ /**
1162
+ * Get the menu config that adds the ability to hide the current column
1163
+ *
1164
+ * @returns void
1165
+ * @protected
1166
+ */
1167
+ _getMenuConfig(name) {
1168
+ return {
1169
+ items: [
1170
+ {
1171
+ label: this._translations.hideField,
1172
+ iconClass: "esri-icon-non-visible",
1173
+ autoCloseMenu: true,
1174
+ clickFunction: () => {
1175
+ this._handleHideClick(name);
1176
+ }
1177
+ }
1178
+ ]
1179
+ };
1180
+ }
1181
+ /**
1182
+ * Hide the table column for the provided name
1183
+ *
1184
+ * @returns void
1185
+ * @protected
1186
+ */
1187
+ _handleHideClick(name) {
1188
+ this._columnsInfo[name] = false;
1189
+ this._table.hideColumn(name);
1190
+ this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
1191
+ if (columnTemplate.fieldName === name) {
1192
+ columnTemplate.visible = false;
1193
+ }
1194
+ });
1195
+ }
1159
1196
  /**
1160
1197
  * Fetches the component's translations
1161
1198
  *
@@ -23,12 +23,13 @@ import { d as defineCustomElement$3 } from './option.js';
23
23
  import { d as defineCustomElement$2 } from './select.js';
24
24
  import { d as defineCustomElement$1 } from './tooltip.js';
25
25
 
26
- 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}";
26
+ 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}";
27
27
 
28
28
  const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker extends HTMLElement {
29
29
  constructor() {
30
30
  super();
31
31
  this.__registerHost();
32
+ this.idsFound = createEvent(this, "idsFound", 7);
32
33
  this.noLayersFound = createEvent(this, "noLayersFound", 7);
33
34
  this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
34
35
  //--------------------------------------------------------------------------
@@ -42,8 +43,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
42
43
  this.defaultLayerHonored = false;
43
44
  this.appearance = "transparent";
44
45
  this.defaultLayerId = "";
46
+ this.display = "inline-block";
45
47
  this.enabledLayerIds = [];
46
48
  this.enabledTableIds = [];
49
+ this.height = undefined;
47
50
  this.mapView = undefined;
48
51
  this.onlyShowUpdatableLayers = undefined;
49
52
  this.placeholderIcon = "";
@@ -98,7 +101,9 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
98
101
  */
99
102
  render() {
100
103
  const id = "map-layer-picker";
101
- return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
104
+ let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
105
+ style = Object.assign(Object.assign({}, style), { "display": this.display });
106
+ 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() :
102
107
  !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
103
108
  this.type === "combobox" ? this._getCombobox(id) :
104
109
  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
235
240
  async _setLayers() {
236
241
  if (this.mapView) {
237
242
  await this._initLayerTableHash();
238
- const mapLayerIds = this.onlyShowUpdatableLayers ?
243
+ const layerIds = this.onlyShowUpdatableLayers ?
239
244
  this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
240
- const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
245
+ const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
241
246
  this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
242
247
  this.ids = [
243
- ...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; }),
244
- ...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; }),
248
+ ...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; }),
249
+ ...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; }),
245
250
  ];
251
+ this.idsFound.emit({
252
+ layerIds,
253
+ tableIds
254
+ });
246
255
  }
247
256
  }
248
257
  /**
@@ -320,8 +329,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
320
329
  }, [0, "map-layer-picker", {
321
330
  "appearance": [1],
322
331
  "defaultLayerId": [1, "default-layer-id"],
332
+ "display": [1],
323
333
  "enabledLayerIds": [16],
324
334
  "enabledTableIds": [16],
335
+ "height": [2],
325
336
  "mapView": [16],
326
337
  "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
327
338
  "placeholderIcon": [1, "placeholder-icon"],
@@ -1895,11 +1895,12 @@ const DropdownItem = class {
1895
1895
  };
1896
1896
  DropdownItem.style = dropdownItemCss;
1897
1897
 
1898
- 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}";
1898
+ 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}";
1899
1899
 
1900
1900
  const MapLayerPicker = class {
1901
1901
  constructor(hostRef) {
1902
1902
  registerInstance(this, hostRef);
1903
+ this.idsFound = createEvent(this, "idsFound", 7);
1903
1904
  this.noLayersFound = createEvent(this, "noLayersFound", 7);
1904
1905
  this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
1905
1906
  //--------------------------------------------------------------------------
@@ -1913,8 +1914,10 @@ const MapLayerPicker = class {
1913
1914
  this.defaultLayerHonored = false;
1914
1915
  this.appearance = "transparent";
1915
1916
  this.defaultLayerId = "";
1917
+ this.display = "inline-block";
1916
1918
  this.enabledLayerIds = [];
1917
1919
  this.enabledTableIds = [];
1920
+ this.height = undefined;
1918
1921
  this.mapView = undefined;
1919
1922
  this.onlyShowUpdatableLayers = undefined;
1920
1923
  this.placeholderIcon = "";
@@ -1969,7 +1972,9 @@ const MapLayerPicker = class {
1969
1972
  */
1970
1973
  render() {
1971
1974
  const id = "map-layer-picker";
1972
- return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
1975
+ let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
1976
+ style = Object.assign(Object.assign({}, style), { "display": this.display });
1977
+ 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() :
1973
1978
  !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
1974
1979
  this.type === "combobox" ? this._getCombobox(id) :
1975
1980
  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 {
2106
2111
  async _setLayers() {
2107
2112
  if (this.mapView) {
2108
2113
  await this._initLayerTableHash();
2109
- const mapLayerIds = this.onlyShowUpdatableLayers ?
2114
+ const layerIds = this.onlyShowUpdatableLayers ?
2110
2115
  this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
2111
- const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
2116
+ const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
2112
2117
  this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
2113
2118
  this.ids = [
2114
- ...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; }),
2115
- ...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; }),
2119
+ ...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; }),
2120
+ ...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; }),
2116
2121
  ];
2122
+ this.idsFound.emit({
2123
+ layerIds,
2124
+ tableIds
2125
+ });
2117
2126
  }
2118
2127
  }
2119
2128
  /**
@@ -378,7 +378,7 @@ const LayerTable = class {
378
378
  * @returns The dom node that contains the controls
379
379
  */
380
380
  _getActionBar() {
381
- 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()));
381
+ 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()));
382
382
  }
383
383
  /**
384
384
  * Get the actions that are used for various interactions with the table
@@ -1090,9 +1090,9 @@ const LayerTable = class {
1090
1090
  * @returns void
1091
1091
  */
1092
1092
  _initLayerExpressions() {
1093
- var _a;
1094
- const layerExpressions = (_a = this.mapInfo.filterConfig) === null || _a === void 0 ? void 0 : _a.layerExpressions;
1095
- this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
1093
+ var _a, _b;
1094
+ const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
1095
+ this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
1096
1096
  }
1097
1097
  /**
1098
1098
  * Select all rows that are not currently selectd
@@ -1195,6 +1195,7 @@ const LayerTable = class {
1195
1195
  fieldInfos.some(fieldInfo => {
1196
1196
  if (fieldInfo.name === columnTemplate.fieldName) {
1197
1197
  columnTemplate.label = fieldInfo.alias;
1198
+ columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
1198
1199
  return true;
1199
1200
  }
1200
1201
  });
@@ -1203,12 +1204,48 @@ const LayerTable = class {
1203
1204
  return {
1204
1205
  type: "field",
1205
1206
  fieldName: fieldInfo.name,
1206
- label: fieldInfo.alias
1207
+ label: fieldInfo.alias,
1208
+ menuConfig: this._getMenuConfig(fieldInfo.name)
1207
1209
  };
1208
1210
  });
1209
1211
  }
1210
1212
  return columnTemplates;
1211
1213
  }
1214
+ /**
1215
+ * Get the menu config that adds the ability to hide the current column
1216
+ *
1217
+ * @returns void
1218
+ * @protected
1219
+ */
1220
+ _getMenuConfig(name) {
1221
+ return {
1222
+ items: [
1223
+ {
1224
+ label: this._translations.hideField,
1225
+ iconClass: "esri-icon-non-visible",
1226
+ autoCloseMenu: true,
1227
+ clickFunction: () => {
1228
+ this._handleHideClick(name);
1229
+ }
1230
+ }
1231
+ ]
1232
+ };
1233
+ }
1234
+ /**
1235
+ * Hide the table column for the provided name
1236
+ *
1237
+ * @returns void
1238
+ * @protected
1239
+ */
1240
+ _handleHideClick(name) {
1241
+ this._columnsInfo[name] = false;
1242
+ this._table.hideColumn(name);
1243
+ this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
1244
+ if (columnTemplate.fieldName === name) {
1245
+ columnTemplate.visible = false;
1246
+ }
1247
+ });
1248
+ }
1212
1249
  /**
1213
1250
  * Fetches the component's translations
1214
1251
  *