@esri/solutions-components 0.6.13 → 0.6.14

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 (109) hide show
  1. package/dist/assets/t9n/layer-table/resources.json +1 -1
  2. package/dist/assets/t9n/layer-table/resources_en.json +1 -1
  3. package/dist/assets/t9n/map-layer-picker/resources.json +4 -0
  4. package/dist/assets/t9n/map-layer-picker/resources_en.json +4 -0
  5. package/dist/cjs/basemap-gallery_6.cjs.entry.js +20 -5
  6. package/dist/cjs/buffer-tools_4.cjs.entry.js +1 -1
  7. package/dist/cjs/calcite-chip_3.cjs.entry.js +803 -0
  8. package/dist/cjs/calcite-combobox_6.cjs.entry.js +76 -28
  9. package/dist/cjs/card-manager_3.cjs.entry.js +112 -54
  10. package/dist/cjs/crowdsource-manager.cjs.entry.js +18 -5
  11. package/dist/cjs/{downloadUtils-fb4744e0.js → downloadUtils-34a515ad.js} +2 -2
  12. package/dist/cjs/edit-card_2.cjs.entry.js +5 -0
  13. package/dist/cjs/{index.es-372e33de.js → index.es-0ba11065.js} +2 -2
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/cjs/map-select-tools_3.cjs.entry.js +3 -3
  16. package/dist/cjs/{mapViewUtils-a4dd36ec.js → mapViewUtils-a2884698.js} +39 -55
  17. package/dist/cjs/public-notification.cjs.entry.js +3 -3
  18. package/dist/cjs/{publicNotificationStore-b69862af.js → publicNotificationStore-610bd880.js} +0 -4
  19. package/dist/cjs/solutions-components.cjs.js +1 -1
  20. package/dist/collection/components/basemap-gallery/basemap-gallery.js +23 -1
  21. package/dist/collection/components/card-manager/card-manager.js +2 -2
  22. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +171 -5
  23. package/dist/collection/components/edit-card/edit-card.js +19 -0
  24. package/dist/collection/components/layer-table/layer-table.js +127 -47
  25. package/dist/collection/components/map-card/map-card.js +115 -5
  26. package/dist/collection/components/map-layer-picker/map-layer-picker.css +4 -0
  27. package/dist/collection/components/map-layer-picker/map-layer-picker.js +107 -27
  28. package/dist/collection/components/map-picker/map-picker.css +5 -1
  29. package/dist/collection/components/map-picker/map-picker.js +3 -3
  30. package/dist/collection/components/map-tools/map-tools.js +104 -1
  31. package/dist/collection/utils/interfaces.ts +12 -1
  32. package/dist/collection/utils/mapViewUtils.js +38 -52
  33. package/dist/collection/utils/mapViewUtils.ts +41 -57
  34. package/dist/collection/utils/publicNotificationStore.js +0 -4
  35. package/dist/collection/utils/publicNotificationStore.ts +0 -4
  36. package/dist/components/basemap-gallery2.js +2 -0
  37. package/dist/components/card-manager2.js +2 -2
  38. package/dist/components/crowdsource-manager.js +27 -6
  39. package/dist/components/edit-card2.js +5 -0
  40. package/dist/components/layer-table2.js +136 -78
  41. package/dist/components/map-card2.js +17 -5
  42. package/dist/components/map-layer-picker2.js +114 -52
  43. package/dist/components/map-picker2.js +4 -4
  44. package/dist/components/map-select-tools2.js +55 -43
  45. package/dist/components/map-tools2.js +20 -1
  46. package/dist/components/mapViewUtils.js +39 -53
  47. package/dist/components/public-notification.js +1 -1
  48. package/dist/components/publicNotificationStore.js +0 -4
  49. package/dist/components/refine-selection2.js +61 -49
  50. package/dist/esm/basemap-gallery_6.entry.js +20 -5
  51. package/dist/esm/buffer-tools_4.entry.js +1 -1
  52. package/dist/esm/calcite-chip_3.entry.js +797 -0
  53. package/dist/esm/calcite-combobox_6.entry.js +76 -28
  54. package/dist/esm/card-manager_3.entry.js +112 -54
  55. package/dist/esm/crowdsource-manager.entry.js +18 -5
  56. package/dist/esm/{downloadUtils-67c7a6c8.js → downloadUtils-ac67a786.js} +2 -2
  57. package/dist/esm/edit-card_2.entry.js +5 -0
  58. package/dist/esm/{index.es-59a67d3d.js → index.es-f553598f.js} +2 -2
  59. package/dist/esm/loader.js +1 -1
  60. package/dist/esm/map-select-tools_3.entry.js +3 -3
  61. package/dist/esm/{mapViewUtils-00a04d52.js → mapViewUtils-8141d8c1.js} +39 -53
  62. package/dist/esm/public-notification.entry.js +3 -3
  63. package/dist/esm/{publicNotificationStore-90a6a274.js → publicNotificationStore-dcf39a55.js} +0 -4
  64. package/dist/esm/solutions-components.js +1 -1
  65. package/dist/solutions-components/p-08b52ed8.entry.js +6 -0
  66. package/dist/solutions-components/p-16362eb4.js +36 -0
  67. package/dist/solutions-components/{p-3691a072.js → p-1ab414e0.js} +2 -2
  68. package/dist/solutions-components/{p-73ab9d9a.entry.js → p-3d7aa1b2.entry.js} +1 -1
  69. package/dist/solutions-components/{p-9a8c51bf.entry.js → p-57cf6784.entry.js} +1 -1
  70. package/dist/solutions-components/p-64b22d57.entry.js +6 -0
  71. package/dist/solutions-components/p-654dd5df.entry.js +6 -0
  72. package/dist/solutions-components/{p-f9166fcb.js → p-a26711e8.js} +1 -1
  73. package/dist/solutions-components/p-b1c8c6d7.entry.js +6 -0
  74. package/dist/solutions-components/{p-b892e595.entry.js → p-b9d29f30.entry.js} +1 -1
  75. package/dist/solutions-components/{p-1b41181b.js → p-c8d0ce92.js} +2 -2
  76. package/dist/solutions-components/{p-0219a1a9.entry.js → p-e76949eb.entry.js} +6 -6
  77. package/dist/solutions-components/p-ee7e2f00.entry.js +34 -0
  78. package/dist/solutions-components/solutions-components.esm.js +1 -1
  79. package/dist/solutions-components/utils/interfaces.ts +12 -1
  80. package/dist/solutions-components/utils/mapViewUtils.ts +41 -57
  81. package/dist/solutions-components/utils/publicNotificationStore.ts +0 -4
  82. package/dist/types/components/basemap-gallery/basemap-gallery.d.ts +5 -0
  83. package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +37 -1
  84. package/dist/types/components/edit-card/edit-card.d.ts +8 -0
  85. package/dist/types/components/layer-table/layer-table.d.ts +40 -0
  86. package/dist/types/components/map-card/map-card.d.ts +25 -1
  87. package/dist/types/components/map-layer-picker/map-layer-picker.d.ts +50 -3
  88. package/dist/types/components/map-picker/map-picker.d.ts +2 -2
  89. package/dist/types/components/map-tools/map-tools.d.ts +21 -1
  90. package/dist/types/components.d.ts +182 -2
  91. package/dist/types/preact.d.ts +6 -3
  92. package/dist/types/utils/interfaces.d.ts +10 -1
  93. package/dist/types/utils/mapViewUtils.d.ts +8 -24
  94. package/dist/types/utils/publicNotificationStore.d.ts +0 -2
  95. package/package.json +1 -1
  96. package/dist/cjs/calcite-chip.cjs.entry.js +0 -259
  97. package/dist/cjs/calcite-notice.cjs.entry.js +0 -139
  98. package/dist/cjs/calcite-tooltip.cjs.entry.js +0 -439
  99. package/dist/esm/calcite-chip.entry.js +0 -255
  100. package/dist/esm/calcite-notice.entry.js +0 -135
  101. package/dist/esm/calcite-tooltip.entry.js +0 -435
  102. package/dist/solutions-components/p-2cff8331.entry.js +0 -6
  103. package/dist/solutions-components/p-3a6c8fc3.entry.js +0 -6
  104. package/dist/solutions-components/p-3b1fc7a2.entry.js +0 -6
  105. package/dist/solutions-components/p-767002cd.js +0 -36
  106. package/dist/solutions-components/p-a776b7e6.entry.js +0 -6
  107. package/dist/solutions-components/p-be36d5ed.entry.js +0 -22
  108. package/dist/solutions-components/p-c644edf5.entry.js +0 -11
  109. package/dist/solutions-components/p-cfd88a2f.entry.js +0 -11
@@ -30,10 +30,18 @@ export class CrowdsourceManager {
30
30
  this._shouldSetMapView = false;
31
31
  this.classicGrid = false;
32
32
  this.enableAutoRefresh = true;
33
+ this.enableFullscreen = true;
33
34
  this.enableInlineEdit = false;
35
+ this.enableLegend = true;
36
+ this.enableSearch = true;
37
+ this.enableHome = true;
38
+ this.enableZoom = true;
39
+ this.enableBasemap = true;
40
+ this.basemapConfig = undefined;
34
41
  this.showNewestFirst = true;
35
42
  this.hideMap = false;
36
43
  this.mapInfos = [];
44
+ this.onlyShowUpdatableLayers = true;
37
45
  this.searchConfiguration = undefined;
38
46
  this.zoomAndScrollToSelected = false;
39
47
  this._expandPopup = false;
@@ -68,13 +76,18 @@ export class CrowdsourceManager {
68
76
  */
69
77
  async mapChanged(evt) {
70
78
  this._mapChange = evt.detail;
79
+ await this._mapChange.mapView.when(() => {
80
+ this._setMapView();
81
+ });
82
+ }
83
+ /**
84
+ * Listen for beforeMapChanged and minimize the popup if it's expanded
85
+ */
86
+ async beforeMapChanged() {
71
87
  if (this._expandPopup) {
72
88
  this._shouldSetMapView = true;
73
89
  this._expandPopup = false;
74
90
  }
75
- else {
76
- this._setMapView();
77
- }
78
91
  }
79
92
  //--------------------------------------------------------------------------
80
93
  //
@@ -233,7 +246,7 @@ export class CrowdsourceManager {
233
246
  const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
234
247
  layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
235
248
  const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
236
- return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
249
+ return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: this.mapInfos })));
237
250
  }
238
251
  /**
239
252
  * Get the expand node for the popup information
@@ -287,7 +300,7 @@ export class CrowdsourceManager {
287
300
  const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
288
301
  this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
289
302
  layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
290
- return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", 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))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { enableAutoRefresh: this.enableAutoRefresh, enableInlineEdit: this.enableInlineEdit, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
303
+ return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", 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))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { enableAutoRefresh: this.enableAutoRefresh, enableInlineEdit: this.enableInlineEdit, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
291
304
  }
292
305
  /**
293
306
  * Open/Close the appropriate panel.
@@ -384,6 +397,24 @@ export class CrowdsourceManager {
384
397
  "reflect": false,
385
398
  "defaultValue": "true"
386
399
  },
400
+ "enableFullscreen": {
401
+ "type": "boolean",
402
+ "mutable": false,
403
+ "complexType": {
404
+ "original": "boolean",
405
+ "resolved": "boolean",
406
+ "references": {}
407
+ },
408
+ "required": false,
409
+ "optional": false,
410
+ "docs": {
411
+ "tags": [],
412
+ "text": "boolean: when true the fullscreen widget will be available"
413
+ },
414
+ "attribute": "enable-fullscreen",
415
+ "reflect": false,
416
+ "defaultValue": "true"
417
+ },
387
418
  "enableInlineEdit": {
388
419
  "type": "boolean",
389
420
  "mutable": false,
@@ -402,6 +433,117 @@ export class CrowdsourceManager {
402
433
  "reflect": false,
403
434
  "defaultValue": "false"
404
435
  },
436
+ "enableLegend": {
437
+ "type": "boolean",
438
+ "mutable": false,
439
+ "complexType": {
440
+ "original": "boolean",
441
+ "resolved": "boolean",
442
+ "references": {}
443
+ },
444
+ "required": false,
445
+ "optional": false,
446
+ "docs": {
447
+ "tags": [],
448
+ "text": "boolean: when true the legend widget will be available"
449
+ },
450
+ "attribute": "enable-legend",
451
+ "reflect": false,
452
+ "defaultValue": "true"
453
+ },
454
+ "enableSearch": {
455
+ "type": "boolean",
456
+ "mutable": false,
457
+ "complexType": {
458
+ "original": "boolean",
459
+ "resolved": "boolean",
460
+ "references": {}
461
+ },
462
+ "required": false,
463
+ "optional": false,
464
+ "docs": {
465
+ "tags": [],
466
+ "text": "boolean: when true the search widget will be available"
467
+ },
468
+ "attribute": "enable-search",
469
+ "reflect": false,
470
+ "defaultValue": "true"
471
+ },
472
+ "enableHome": {
473
+ "type": "boolean",
474
+ "mutable": false,
475
+ "complexType": {
476
+ "original": "boolean",
477
+ "resolved": "boolean",
478
+ "references": {}
479
+ },
480
+ "required": false,
481
+ "optional": false,
482
+ "docs": {
483
+ "tags": [],
484
+ "text": "boolean: when true the home widget will be available"
485
+ },
486
+ "attribute": "enable-home",
487
+ "reflect": false,
488
+ "defaultValue": "true"
489
+ },
490
+ "enableZoom": {
491
+ "type": "boolean",
492
+ "mutable": false,
493
+ "complexType": {
494
+ "original": "boolean",
495
+ "resolved": "boolean",
496
+ "references": {}
497
+ },
498
+ "required": false,
499
+ "optional": false,
500
+ "docs": {
501
+ "tags": [],
502
+ "text": "boolean: when true the zoom widget will be available"
503
+ },
504
+ "attribute": "enable-zoom",
505
+ "reflect": false,
506
+ "defaultValue": "true"
507
+ },
508
+ "enableBasemap": {
509
+ "type": "boolean",
510
+ "mutable": false,
511
+ "complexType": {
512
+ "original": "boolean",
513
+ "resolved": "boolean",
514
+ "references": {}
515
+ },
516
+ "required": false,
517
+ "optional": false,
518
+ "docs": {
519
+ "tags": [],
520
+ "text": "boolean: when true the basemap widget will be available"
521
+ },
522
+ "attribute": "enable-basemap",
523
+ "reflect": false,
524
+ "defaultValue": "true"
525
+ },
526
+ "basemapConfig": {
527
+ "type": "unknown",
528
+ "mutable": false,
529
+ "complexType": {
530
+ "original": "IBasemapConfig",
531
+ "resolved": "IBasemapConfig",
532
+ "references": {
533
+ "IBasemapConfig": {
534
+ "location": "import",
535
+ "path": "../../utils/interfaces",
536
+ "id": "src/utils/interfaces.ts::IBasemapConfig"
537
+ }
538
+ }
539
+ },
540
+ "required": false,
541
+ "optional": false,
542
+ "docs": {
543
+ "tags": [],
544
+ "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
545
+ }
546
+ },
405
547
  "showNewestFirst": {
406
548
  "type": "boolean",
407
549
  "mutable": false,
@@ -460,6 +602,24 @@ export class CrowdsourceManager {
460
602
  },
461
603
  "defaultValue": "[]"
462
604
  },
605
+ "onlyShowUpdatableLayers": {
606
+ "type": "boolean",
607
+ "mutable": false,
608
+ "complexType": {
609
+ "original": "boolean",
610
+ "resolved": "boolean",
611
+ "references": {}
612
+ },
613
+ "required": false,
614
+ "optional": false,
615
+ "docs": {
616
+ "tags": [],
617
+ "text": "boolean: When true only editable layers that support the update capability will be available"
618
+ },
619
+ "attribute": "only-show-updatable-layers",
620
+ "reflect": false,
621
+ "defaultValue": "true"
622
+ },
463
623
  "searchConfiguration": {
464
624
  "type": "unknown",
465
625
  "mutable": false,
@@ -524,6 +684,12 @@ export class CrowdsourceManager {
524
684
  "target": "window",
525
685
  "capture": false,
526
686
  "passive": false
687
+ }, {
688
+ "name": "beforeMapChanged",
689
+ "method": "beforeMapChanged",
690
+ "target": "window",
691
+ "capture": false,
692
+ "passive": false
527
693
  }];
528
694
  }
529
695
  }
@@ -85,6 +85,10 @@ export class EditCard {
85
85
  }
86
86
  if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.graphics[0]) === null || _b === void 0 ? void 0 : _b.layer)) {
87
87
  this._layer = this.graphics[0].layer;
88
+ if (this._layerEditHandle) {
89
+ this._layerEditHandle.remove();
90
+ }
91
+ this._layerEditHandle = this._layer.on("edits", () => this.editsComplete.emit());
88
92
  }
89
93
  }
90
94
  /**
@@ -284,6 +288,21 @@ export class EditCard {
284
288
  "resolved": "void",
285
289
  "references": {}
286
290
  }
291
+ }, {
292
+ "method": "editsComplete",
293
+ "name": "editsComplete",
294
+ "bubbles": true,
295
+ "cancelable": true,
296
+ "composed": true,
297
+ "docs": {
298
+ "tags": [],
299
+ "text": "Emitted on demand when edits are completed on current edit layer"
300
+ },
301
+ "complexType": {
302
+ "original": "void",
303
+ "resolved": "void",
304
+ "references": {}
305
+ }
287
306
  }];
288
307
  }
289
308
  static get elementRef() { return "el"; }
@@ -21,7 +21,7 @@
21
21
  import { Host, h } from "@stencil/core";
22
22
  import { loadModules } from "../../utils/loadModules";
23
23
  import { getLocaleComponentStrings } from "../../utils/locale";
24
- import { getLayer, getMapLayerIds, goToSelection } from "../../utils/mapViewUtils";
24
+ import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
25
25
  import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
26
26
  import * as downloadUtils from "../../utils/downloadUtils";
27
27
  export class LayerTable {
@@ -49,6 +49,7 @@ export class LayerTable {
49
49
  this.enableInlineEdit = undefined;
50
50
  this.mapInfo = undefined;
51
51
  this.mapView = undefined;
52
+ this.onlyShowUpdatableLayers = undefined;
52
53
  this.showNewestFirst = undefined;
53
54
  this.zoomAndScrollToSelected = undefined;
54
55
  this._alertOpen = false;
@@ -69,13 +70,12 @@ export class LayerTable {
69
70
  * watch for changes in map view and get the first layer
70
71
  */
71
72
  async mapViewWatchHandler() {
72
- this._fetchingData = true;
73
- const mapLayerIds = await getMapLayerIds(this.mapView);
74
- this._layer = await getLayer(this.mapView, mapLayerIds[0]);
75
- this.reactiveUtils.on(() => this.mapView, "click", (event) => {
73
+ if (this._mapClickHandle) {
74
+ this._mapClickHandle.remove();
75
+ }
76
+ this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
76
77
  void this._mapClicked(event);
77
78
  });
78
- this._fetchingData = false;
79
79
  }
80
80
  /**
81
81
  * watch for changes in layer view and verify if it has editing enabled
@@ -132,6 +132,22 @@ export class LayerTable {
132
132
  }
133
133
  }
134
134
  }
135
+ /**
136
+ * Refresh the table when edits are completed
137
+ *
138
+ */
139
+ editsComplete() {
140
+ this._refresh();
141
+ }
142
+ /**
143
+ * Refresh the table when edits are completed
144
+ *
145
+ */
146
+ noLayersFound() {
147
+ this._layer = undefined;
148
+ this._allIds = [];
149
+ this._clearSelection();
150
+ }
135
151
  //--------------------------------------------------------------------------
136
152
  //
137
153
  // Functions (lifecycle)
@@ -150,9 +166,6 @@ export class LayerTable {
150
166
  * Renders the component.
151
167
  */
152
168
  render() {
153
- if (!this._layer) {
154
- return null;
155
- }
156
169
  const tableNodeClass = this._fetchingData ? "display-none" : "";
157
170
  const loadingClass = this._fetchingData ? "" : "display-none";
158
171
  const total = this._allIds.length.toString();
@@ -190,9 +203,37 @@ export class LayerTable {
190
203
  */
191
204
  _getTableControlRow(slot) {
192
205
  const featuresSelected = this._selectedIndexes.length > 0;
193
- return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "magnifying-glass", id: "magnifying-glass", label: this._translations.zoom, onClick: () => this._zoom(), text: this._translations.zoom, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, h("span", null, this._translations.clearSelection))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
206
+ return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
194
207
  this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
195
208
  }
209
+ /**
210
+ * Get an action and tooltip
211
+ *
212
+ * @param icon string the name of the icon to display, will also be used as the id
213
+ * @param label string the text to display and label the action
214
+ * @param func any the function to execute
215
+ * @param disabled boolean when true the user will not be able to interact with the action
216
+ *
217
+ * @returns VNode The node representing the DOM element that will contain the action
218
+ */
219
+ _getAction(icon, label, func, disabled) {
220
+ const _disabled = this._layer === undefined ? true : disabled;
221
+ return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
222
+ }
223
+ /**
224
+ * Get an action with danger color icon and text
225
+ *
226
+ * @param icon string the name of the icon to display, will also be used as the id
227
+ * @param label string the text to display and label the action
228
+ * @param func any the function to execute
229
+ * @param disabled boolean when true the user will not be able to interact with the action
230
+ *
231
+ * @returns VNode The node representing the DOM element that will contain the action
232
+ */
233
+ _getDangerAction(icon, label, func, disabled) {
234
+ const _disabled = this._layer === undefined ? true : disabled;
235
+ return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
236
+ }
196
237
  /**
197
238
  * Initialize the FeatureTable
198
239
  *
@@ -202,7 +243,7 @@ export class LayerTable {
202
243
  */
203
244
  async _getTable(node, columnTemplates) {
204
245
  if (this._layer) {
205
- await this._layer.when(async () => {
246
+ await this._layer.when(() => {
206
247
  this._table = new this.FeatureTable({
207
248
  autoRefreshEnabled: this.enableAutoRefresh,
208
249
  layer: this._layer,
@@ -219,25 +260,25 @@ export class LayerTable {
219
260
  },
220
261
  container: node
221
262
  });
222
- this._checkEditEnabled();
223
- await this._table.when(async () => {
224
- this._table.highlightIds.on("change", () => {
225
- this._selectedIndexes = this._table.highlightIds.toArray();
226
- if (this._showOnlySelected) {
227
- if (this._selectedIndexes.length > 0) {
228
- this._table.filterBySelection();
229
- }
230
- else {
231
- this._toggleShowSelected();
232
- }
263
+ });
264
+ this._checkEditEnabled();
265
+ await this._table.when(() => {
266
+ this._table.highlightIds.on("change", () => {
267
+ this._selectedIndexes = this._table.highlightIds.toArray();
268
+ if (this._showOnlySelected) {
269
+ if (this._selectedIndexes.length > 0) {
270
+ this._table.filterBySelection();
271
+ }
272
+ else {
273
+ this._toggleShowSelected();
233
274
  }
234
- this.featureSelectionChange.emit(this._selectedIndexes);
235
- });
236
- this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
237
- var _a, _b, _c, _d;
238
- this._sortActive = (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
239
- ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField;
240
- });
275
+ }
276
+ this.featureSelectionChange.emit(this._selectedIndexes);
277
+ });
278
+ this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
279
+ var _a, _b, _c, _d;
280
+ this._sortActive = this._layer ? (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
281
+ ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField : false;
241
282
  });
242
283
  });
243
284
  }
@@ -248,20 +289,30 @@ export class LayerTable {
248
289
  * @returns void
249
290
  */
250
291
  async _resetTable() {
251
- if (this._layer && this._table) {
292
+ if (this._table) {
252
293
  this._clearSelection();
253
294
  this._allIds = [];
254
295
  this.featureSelectionChange.emit(this._selectedIndexes);
255
- const columnTemplates = this._getColumnTemplates(this._layer.id);
256
- this._table.layer = this._layer;
257
- this._table.tableTemplate.columnTemplates = columnTemplates;
258
- this._checkEditEnabled();
259
- this._table.view = this.mapView;
260
- this._table.editingEnabled = this._editEnabled;
261
- this._table.clearSelectionFilter();
262
- this._showOnlySelected = false;
263
- this._sortActive = false;
264
- await this._sortTable();
296
+ if (this._layer) {
297
+ await this._layer.when(() => {
298
+ const columnTemplates = this._getColumnTemplates(this._layer.id);
299
+ this._table.layer = this._layer;
300
+ this._table.tableTemplate.columnTemplates = columnTemplates;
301
+ this._table.view = this.mapView;
302
+ this._checkEditEnabled();
303
+ this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
304
+ });
305
+ await this._table.when(() => {
306
+ this._table.clearSelectionFilter();
307
+ });
308
+ this._showOnlySelected = false;
309
+ this._sortActive = false;
310
+ await this._sortTable();
311
+ }
312
+ else {
313
+ this._table.view = this.mapView;
314
+ this._table.layer = this._layer;
315
+ }
265
316
  }
266
317
  }
267
318
  /**
@@ -282,11 +333,10 @@ export class LayerTable {
282
333
  if (this._table && this._layer && !this._sortActive) {
283
334
  if (!this._tableSorting && this.showNewestFirst) {
284
335
  this._tableSorting = true;
285
- await this._table.when(async () => {
286
- await this._layer.when(async () => {
287
- this._table.sortColumn(this._layer.objectIdField, "desc");
288
- this._tableSorting = false;
289
- });
336
+ await this._table.when();
337
+ await this._layer.when(() => {
338
+ this._table.sortColumn(this._layer.objectIdField, "desc");
339
+ this._tableSorting = false;
290
340
  });
291
341
  }
292
342
  }
@@ -484,11 +534,12 @@ export class LayerTable {
484
534
  * @returns a promise that will resolve when the operation is complete
485
535
  */
486
536
  async _layerSelectionChanged(evt) {
537
+ var _a;
487
538
  const id = evt.detail[0];
488
- if (id !== this._layer.id || this._allIds.length === 0) {
539
+ if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
489
540
  this._fetchingData = true;
490
541
  const columnTemplates = this._getColumnTemplates(id);
491
- this._layer = await getLayer(this.mapView, id);
542
+ this._layer = await getLayerOrTable(this.mapView, id);
492
543
  this._allIds = await queryAllIds(this._layer);
493
544
  if (!this._table) {
494
545
  await this._getTable(this._tableNode, columnTemplates);
@@ -623,6 +674,23 @@ export class LayerTable {
623
674
  "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
624
675
  }
625
676
  },
677
+ "onlyShowUpdatableLayers": {
678
+ "type": "boolean",
679
+ "mutable": false,
680
+ "complexType": {
681
+ "original": "boolean",
682
+ "resolved": "boolean",
683
+ "references": {}
684
+ },
685
+ "required": false,
686
+ "optional": false,
687
+ "docs": {
688
+ "tags": [],
689
+ "text": "boolean: When true only editable layers that support the update capability will be available"
690
+ },
691
+ "attribute": "only-show-updatable-layers",
692
+ "reflect": false
693
+ },
626
694
  "showNewestFirst": {
627
695
  "type": "boolean",
628
696
  "mutable": false,
@@ -737,6 +805,18 @@ export class LayerTable {
737
805
  "target": "window",
738
806
  "capture": false,
739
807
  "passive": false
808
+ }, {
809
+ "name": "editsComplete",
810
+ "method": "editsComplete",
811
+ "target": "window",
812
+ "capture": false,
813
+ "passive": false
814
+ }, {
815
+ "name": "noLayersFound",
816
+ "method": "noLayersFound",
817
+ "target": "window",
818
+ "capture": false,
819
+ "passive": false
740
820
  }];
741
821
  }
742
822
  }