@esri/solutions-components 0.6.21 → 0.6.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. package/dist/cjs/calcite-combobox_6.cjs.entry.js +1 -1
  2. package/dist/cjs/card-manager_3.cjs.entry.js +2 -2
  3. package/dist/cjs/edit-card_2.cjs.entry.js +9 -2
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/map-select-tools_3.cjs.entry.js +3 -3
  6. package/dist/cjs/solutions-components.cjs.js +1 -1
  7. package/dist/collection/components/edit-card/edit-card.js +9 -1
  8. package/dist/collection/components/info-card/info-card.css +1 -1
  9. package/dist/collection/components/layer-table/layer-table.css +5 -0
  10. package/dist/collection/components/layer-table/layer-table.js +1 -1
  11. package/dist/collection/components/map-layer-picker/map-layer-picker.js +2 -3
  12. package/dist/collection/components/map-select-tools/map-select-tools.js +2 -2
  13. package/dist/collection/components/refine-selection/refine-selection.js +1 -1
  14. package/dist/collection/demos/new-public-notification.html +4 -2
  15. package/dist/components/edit-card2.js +17 -3
  16. package/dist/components/info-card2.js +1 -1
  17. package/dist/components/layer-table2.js +2 -2
  18. package/dist/components/map-layer-picker2.js +1 -1
  19. package/dist/components/map-select-tools2.js +2 -2
  20. package/dist/components/refine-selection2.js +1 -1
  21. package/dist/esm/calcite-combobox_6.entry.js +1 -1
  22. package/dist/esm/card-manager_3.entry.js +2 -2
  23. package/dist/esm/edit-card_2.entry.js +9 -2
  24. package/dist/esm/loader.js +1 -1
  25. package/dist/esm/map-select-tools_3.entry.js +3 -3
  26. package/dist/esm/solutions-components.js +1 -1
  27. package/dist/solutions-components/demos/new-public-notification.html +4 -2
  28. package/dist/solutions-components/{p-ceffb944.entry.js → p-37372a3d.entry.js} +1 -1
  29. package/dist/solutions-components/p-531ab1e1.entry.js +6 -0
  30. package/dist/solutions-components/p-64a0e0e7.entry.js +6 -0
  31. package/dist/solutions-components/p-6dcf404a.entry.js +6 -0
  32. package/dist/solutions-components/solutions-components.esm.js +1 -1
  33. package/dist/types/components/edit-card/edit-card.d.ts +4 -0
  34. package/package.json +1 -1
  35. package/dist/solutions-components/p-79c55b19.entry.js +0 -6
  36. package/dist/solutions-components/p-a3ef570f.entry.js +0 -6
  37. package/dist/solutions-components/p-e03226cf.entry.js +0 -6
@@ -51,7 +51,7 @@ tr:nth-child(odd) {
51
51
  }
52
52
 
53
53
  .display-none {
54
- display: none;
54
+ display: none !important;
55
55
  }
56
56
 
57
57
  .display-flex {
@@ -84,4 +84,9 @@ html[dir="rtl"] .bottom-left {
84
84
 
85
85
  vaadin-grid-cell-content {
86
86
  padding: var(--lumo-space-xs) var(--lumo-space-m) !important;
87
+ font-size: 14px !important;
88
+ }
89
+
90
+ .esri-field-column__header-content {
91
+ background-color: var(--calcite-ui-foreground-3);
87
92
  }
@@ -207,7 +207,7 @@ export class LayerTable {
207
207
  var _a;
208
208
  const featuresSelected = this._selectedIndexes.length > 0;
209
209
  const id = "more-table-options";
210
- 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), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, 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: "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))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
210
+ 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", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, 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: "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))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
211
211
  }
212
212
  /**
213
213
  * Get an action and tooltip
@@ -32,7 +32,7 @@ export class MapLayerPicker {
32
32
  this.placeholderIcon = "";
33
33
  this.selectedIds = [];
34
34
  this.scale = "m";
35
- this.showTables = true;
35
+ this.showTables = undefined;
36
36
  this.type = "select";
37
37
  this._hasValidLayers = true;
38
38
  this.ids = [];
@@ -435,8 +435,7 @@ export class MapLayerPicker {
435
435
  "text": "boolean: when true standalone tables will also be available"
436
436
  },
437
437
  "attribute": "show-tables",
438
- "reflect": false,
439
- "defaultValue": "true"
438
+ "reflect": false
440
439
  },
441
440
  "type": {
442
441
  "type": "string",
@@ -205,7 +205,7 @@ export class MapSelectTools {
205
205
  */
206
206
  _getUseLayerFeaturesOptions() {
207
207
  const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
208
- return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id) }))));
208
+ return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
209
209
  }
210
210
  /**
211
211
  * Renders the number of selected features
@@ -234,7 +234,7 @@ export class MapSelectTools {
234
234
  * @protected
235
235
  */
236
236
  _getMapLayerPicker() {
237
- return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [] }))));
237
+ return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [], showTables: false }))));
238
238
  }
239
239
  //--------------------------------------------------------------------------
240
240
  //
@@ -77,7 +77,7 @@ export class RefineSelection {
77
77
  render() {
78
78
  var _a, _b;
79
79
  const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
80
- return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id] })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
80
+ return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
81
81
  }
82
82
  //--------------------------------------------------------------------------
83
83
  //
@@ -68,11 +68,13 @@
68
68
  <script type="module" src="../solutions-components.esm.js"></script>
69
69
 
70
70
  <script>
71
- require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Legend"], (
71
+ require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Legend", "esri/config"], (
72
72
  WebMap,
73
73
  MapView,
74
- Legend
74
+ Legend,
75
+ esriConfig
75
76
  ) => {
77
+ //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
76
78
  var webMap = new WebMap({
77
79
  portalItem: {
78
80
  // solutions
@@ -6,7 +6,8 @@
6
6
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
7
7
  import { l as loadModules } from './loadModules.js';
8
8
  import { g as getLocaleComponentStrings } from './locale.js';
9
- import { d as defineCustomElement$2 } from './icon.js';
9
+ import { d as defineCustomElement$3 } from './icon.js';
10
+ import { d as defineCustomElement$2 } from './loader.js';
10
11
  import { d as defineCustomElement$1 } from './notice.js';
11
12
 
12
13
  const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}";
@@ -25,6 +26,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
25
26
  this.mapView = undefined;
26
27
  this.open = false;
27
28
  this.graphicIndex = 0;
29
+ this._editorLoading = false;
28
30
  this._translations = undefined;
29
31
  }
30
32
  //--------------------------------------------------------------------------
@@ -44,11 +46,13 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
44
46
  async openWatchHandler(v) {
45
47
  var _a;
46
48
  if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
49
+ this._editorLoading = true;
47
50
  this._initEditorWidget();
48
51
  if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
49
52
  await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
50
53
  this._shouldClose = true;
51
54
  }
55
+ this._editorLoading = false;
52
56
  }
53
57
  if (!v) {
54
58
  this._shouldClose = false;
@@ -88,11 +92,13 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
88
92
  this._layerEditHandle.remove();
89
93
  }
90
94
  this._layerEditHandle = this._layer.on("edits", () => {
95
+ this._editorLoading = true;
91
96
  this.editsComplete.emit();
92
97
  this._shouldClose = false;
93
98
  this._initEditorWidget();
94
99
  void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
95
100
  this._shouldClose = true;
101
+ this._editorLoading = false;
96
102
  });
97
103
  }
98
104
  }
@@ -105,7 +111,9 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
105
111
  // when you use MULTI edit mode...is fine in SINGLE
106
112
  const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
107
113
  !this.graphics[0].layer.editingEnabled : true;
108
- return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { id: "feature-form", ref: (el) => this._editContainer = el })))));
114
+ const tableNodeClass = this._editorLoading ? "display-none" : "";
115
+ const loadingClass = this._editorLoading ? "" : "display-none";
116
+ return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
109
117
  }
110
118
  //--------------------------------------------------------------------------
111
119
  //
@@ -194,6 +202,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
194
202
  "mapView": [16],
195
203
  "open": [1028],
196
204
  "graphicIndex": [2, "graphic-index"],
205
+ "_editorLoading": [32],
197
206
  "_translations": [32]
198
207
  }, undefined, {
199
208
  "graphics": ["graphicsWatchHandler"],
@@ -203,7 +212,7 @@ function defineCustomElement() {
203
212
  if (typeof customElements === "undefined") {
204
213
  return;
205
214
  }
206
- const components = ["edit-card", "calcite-icon", "calcite-notice"];
215
+ const components = ["edit-card", "calcite-icon", "calcite-loader", "calcite-notice"];
207
216
  components.forEach(tagName => { switch (tagName) {
208
217
  case "edit-card":
209
218
  if (!customElements.get(tagName)) {
@@ -211,6 +220,11 @@ function defineCustomElement() {
211
220
  }
212
221
  break;
213
222
  case "calcite-icon":
223
+ if (!customElements.get(tagName)) {
224
+ defineCustomElement$3();
225
+ }
226
+ break;
227
+ case "calcite-loader":
214
228
  if (!customElements.get(tagName)) {
215
229
  defineCustomElement$2();
216
230
  }
@@ -16,7 +16,7 @@ import { d as defineCustomElement$3 } from './shell.js';
16
16
  import { d as defineCustomElement$2 } from './tooltip.js';
17
17
  import { d as defineCustomElement$1 } from './edit-card2.js';
18
18
 
19
- const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-ui-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-ui-foreground-1) !important;height:100% !important}";
19
+ const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-ui-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-ui-foreground-1) !important;height:100% !important}";
20
20
 
21
21
  const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
22
22
  constructor() {
@@ -34,7 +34,7 @@ import { d as defineCustomElement$3 } from './shell.js';
34
34
  import { d as defineCustomElement$2 } from './tooltip.js';
35
35
  import { d as defineCustomElement$1 } from './map-layer-picker2.js';
36
36
 
37
- const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important}";
37
+ const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}.esri-field-column__header-content{background-color:var(--calcite-ui-foreground-3)}";
38
38
 
39
39
  const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
40
40
  constructor() {
@@ -223,7 +223,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
223
223
  var _a;
224
224
  const featuresSelected = this._selectedIndexes.length > 0;
225
225
  const id = "more-table-options";
226
- 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), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, 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: "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))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
226
+ 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", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, 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: "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))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
227
227
  }
228
228
  /**
229
229
  * Get an action and tooltip
@@ -38,7 +38,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
38
38
  this.placeholderIcon = "";
39
39
  this.selectedIds = [];
40
40
  this.scale = "m";
41
- this.showTables = true;
41
+ this.showTables = undefined;
42
42
  this.type = "select";
43
43
  this._hasValidLayers = true;
44
44
  this.ids = [];
@@ -221,7 +221,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
221
221
  */
222
222
  _getUseLayerFeaturesOptions() {
223
223
  const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
224
- return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id) }))));
224
+ return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
225
225
  }
226
226
  /**
227
227
  * Renders the number of selected features
@@ -250,7 +250,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
250
250
  * @protected
251
251
  */
252
252
  _getMapLayerPicker() {
253
- return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [] }))));
253
+ return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [], showTables: false }))));
254
254
  }
255
255
  //--------------------------------------------------------------------------
256
256
  //
@@ -97,7 +97,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
97
97
  render() {
98
98
  var _a, _b;
99
99
  const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
100
- return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id] })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
100
+ return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
101
101
  }
102
102
  //--------------------------------------------------------------------------
103
103
  //
@@ -1704,7 +1704,7 @@ const MapLayerPicker = class {
1704
1704
  this.placeholderIcon = "";
1705
1705
  this.selectedIds = [];
1706
1706
  this.scale = "m";
1707
- this.showTables = true;
1707
+ this.showTables = undefined;
1708
1708
  this.type = "select";
1709
1709
  this._hasValidLayers = true;
1710
1710
  this.ids = [];
@@ -98,7 +98,7 @@ const CardManager = class {
98
98
  };
99
99
  CardManager.style = cardManagerCss;
100
100
 
101
- const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important}";
101
+ const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}.esri-field-column__header-content{background-color:var(--calcite-ui-foreground-3)}";
102
102
 
103
103
  const LayerTable = class {
104
104
  constructor(hostRef) {
@@ -286,7 +286,7 @@ const LayerTable = class {
286
286
  var _a;
287
287
  const featuresSelected = this._selectedIndexes.length > 0;
288
288
  const id = "more-table-options";
289
- 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), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, 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: "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))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
289
+ 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", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, 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: "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))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
290
290
  }
291
291
  /**
292
292
  * Get an action and tooltip
@@ -23,6 +23,7 @@ const EditCard = class {
23
23
  this.mapView = undefined;
24
24
  this.open = false;
25
25
  this.graphicIndex = 0;
26
+ this._editorLoading = false;
26
27
  this._translations = undefined;
27
28
  }
28
29
  //--------------------------------------------------------------------------
@@ -42,11 +43,13 @@ const EditCard = class {
42
43
  async openWatchHandler(v) {
43
44
  var _a;
44
45
  if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
46
+ this._editorLoading = true;
45
47
  this._initEditorWidget();
46
48
  if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
47
49
  await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
48
50
  this._shouldClose = true;
49
51
  }
52
+ this._editorLoading = false;
50
53
  }
51
54
  if (!v) {
52
55
  this._shouldClose = false;
@@ -86,11 +89,13 @@ const EditCard = class {
86
89
  this._layerEditHandle.remove();
87
90
  }
88
91
  this._layerEditHandle = this._layer.on("edits", () => {
92
+ this._editorLoading = true;
89
93
  this.editsComplete.emit();
90
94
  this._shouldClose = false;
91
95
  this._initEditorWidget();
92
96
  void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
93
97
  this._shouldClose = true;
98
+ this._editorLoading = false;
94
99
  });
95
100
  }
96
101
  }
@@ -103,7 +108,9 @@ const EditCard = class {
103
108
  // when you use MULTI edit mode...is fine in SINGLE
104
109
  const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
105
110
  !this.graphics[0].layer.editingEnabled : true;
106
- return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { id: "feature-form", ref: (el) => this._editContainer = el })))));
111
+ const tableNodeClass = this._editorLoading ? "display-none" : "";
112
+ const loadingClass = this._editorLoading ? "" : "display-none";
113
+ return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
107
114
  }
108
115
  //--------------------------------------------------------------------------
109
116
  //
@@ -189,7 +196,7 @@ const EditCard = class {
189
196
  };
190
197
  EditCard.style = editCardCss;
191
198
 
192
- const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-ui-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-ui-foreground-1) !important;height:100% !important}";
199
+ const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-ui-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-ui-foreground-1) !important;height:100% !important}";
193
200
 
194
201
  const InfoCard = class {
195
202
  constructor(hostRef) {