@esri/solutions-components 0.6.13 → 0.6.14

Sign up to get free protection for your applications and to get access to all the features.
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
  }