@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
@@ -32,6 +32,11 @@ export class MapCard {
32
32
  * string: the id of map currently displayed
33
33
  */
34
34
  this._loadedId = "";
35
+ this.enableLegend = undefined;
36
+ this.enableFullscreen = undefined;
37
+ this.enableSearch = undefined;
38
+ this.enableBasemap = undefined;
39
+ this.basemapConfig = undefined;
35
40
  this.mapInfos = [];
36
41
  this.mapView = undefined;
37
42
  this._searchConfiguration = undefined;
@@ -58,7 +63,7 @@ export class MapCard {
58
63
  * Renders the component.
59
64
  */
60
65
  render() {
61
- return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "box-shadow", mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
66
+ return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
62
67
  }
63
68
  //--------------------------------------------------------------------------
64
69
  //
@@ -108,16 +113,17 @@ export class MapCard {
108
113
  });
109
114
  this._loadedId = id;
110
115
  this._searchConfiguration = this._webMapInfo.searchConfiguration;
111
- this.mapChanged.emit({
112
- id: id,
113
- mapView: this.mapView
114
- });
116
+ this.beforeMapChanged.emit();
115
117
  await this.mapView.when(() => {
116
118
  const home = new this.Home({
117
119
  view: this.mapView
118
120
  });
119
121
  this.mapView.ui.add(home, { position: "top-left", index: 3 });
120
122
  this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
123
+ this.mapChanged.emit({
124
+ id: id,
125
+ mapView: this.mapView
126
+ });
121
127
  });
122
128
  }
123
129
  }
@@ -134,6 +140,95 @@ export class MapCard {
134
140
  }
135
141
  static get properties() {
136
142
  return {
143
+ "enableLegend": {
144
+ "type": "boolean",
145
+ "mutable": false,
146
+ "complexType": {
147
+ "original": "boolean",
148
+ "resolved": "boolean",
149
+ "references": {}
150
+ },
151
+ "required": false,
152
+ "optional": false,
153
+ "docs": {
154
+ "tags": [],
155
+ "text": "boolean: when true the legend widget will be available"
156
+ },
157
+ "attribute": "enable-legend",
158
+ "reflect": false
159
+ },
160
+ "enableFullscreen": {
161
+ "type": "boolean",
162
+ "mutable": false,
163
+ "complexType": {
164
+ "original": "boolean",
165
+ "resolved": "boolean",
166
+ "references": {}
167
+ },
168
+ "required": false,
169
+ "optional": false,
170
+ "docs": {
171
+ "tags": [],
172
+ "text": "boolean: when true the fullscreen widget will be available"
173
+ },
174
+ "attribute": "enable-fullscreen",
175
+ "reflect": false
176
+ },
177
+ "enableSearch": {
178
+ "type": "boolean",
179
+ "mutable": false,
180
+ "complexType": {
181
+ "original": "boolean",
182
+ "resolved": "boolean",
183
+ "references": {}
184
+ },
185
+ "required": false,
186
+ "optional": false,
187
+ "docs": {
188
+ "tags": [],
189
+ "text": "boolean: when true the search widget will be available"
190
+ },
191
+ "attribute": "enable-search",
192
+ "reflect": false
193
+ },
194
+ "enableBasemap": {
195
+ "type": "boolean",
196
+ "mutable": false,
197
+ "complexType": {
198
+ "original": "boolean",
199
+ "resolved": "boolean",
200
+ "references": {}
201
+ },
202
+ "required": false,
203
+ "optional": false,
204
+ "docs": {
205
+ "tags": [],
206
+ "text": "boolean: when true the basemap widget will be available"
207
+ },
208
+ "attribute": "enable-basemap",
209
+ "reflect": false
210
+ },
211
+ "basemapConfig": {
212
+ "type": "unknown",
213
+ "mutable": false,
214
+ "complexType": {
215
+ "original": "IBasemapConfig",
216
+ "resolved": "IBasemapConfig",
217
+ "references": {
218
+ "IBasemapConfig": {
219
+ "location": "import",
220
+ "path": "../../utils/interfaces",
221
+ "id": "src/utils/interfaces.ts::IBasemapConfig"
222
+ }
223
+ }
224
+ },
225
+ "required": false,
226
+ "optional": false,
227
+ "docs": {
228
+ "tags": [],
229
+ "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
230
+ }
231
+ },
137
232
  "mapInfos": {
138
233
  "type": "unknown",
139
234
  "mutable": false,
@@ -206,6 +301,21 @@ export class MapCard {
206
301
  }
207
302
  }
208
303
  }
304
+ }, {
305
+ "method": "beforeMapChanged",
306
+ "name": "beforeMapChanged",
307
+ "bubbles": true,
308
+ "cancelable": true,
309
+ "composed": true,
310
+ "docs": {
311
+ "tags": [],
312
+ "text": "Emitted before a new map is loaded"
313
+ },
314
+ "complexType": {
315
+ "original": "void",
316
+ "resolved": "void",
317
+ "references": {}
318
+ }
209
319
  }];
210
320
  }
211
321
  static get elementRef() { return "el"; }
@@ -40,3 +40,7 @@
40
40
  .max-width-350 {
41
41
  max-width: 350px;
42
42
  }
43
+
44
+ .height-100 {
45
+ height: 100%;
46
+ }
@@ -19,7 +19,8 @@
19
19
  * limitations under the License.
20
20
  */
21
21
  import { Host, h } from "@stencil/core";
22
- import { getMapLayerHash, getMapLayerIds, getMapTableHash, getMapTableIds } from "../../utils/mapViewUtils";
22
+ import { getLocaleComponentStrings } from "../../utils/locale";
23
+ import { getMapLayerHash, getMapTableHash } from "../../utils/mapViewUtils";
23
24
  import state from "../../utils/publicNotificationStore";
24
25
  export class MapLayerPicker {
25
26
  constructor() {
@@ -27,13 +28,16 @@ export class MapLayerPicker {
27
28
  this.enabledLayerIds = [];
28
29
  this.enabledTableIds = [];
29
30
  this.mapView = undefined;
31
+ this.onlyShowUpdatableLayers = undefined;
30
32
  this.placeholderIcon = "";
31
33
  this.selectedIds = [];
32
34
  this.scale = "m";
33
35
  this.showTables = true;
34
36
  this.type = "select";
37
+ this._hasValidLayers = true;
35
38
  this.ids = [];
36
39
  this.selectedName = "";
40
+ this._translations = undefined;
37
41
  }
38
42
  //--------------------------------------------------------------------------
39
43
  //
@@ -46,10 +50,13 @@ export class MapLayerPicker {
46
50
  */
47
51
  async mapViewWatchHandler() {
48
52
  await this._setLayers();
49
- const hasLayers = Object.keys(state.layerNameHash).length > 0;
50
- const hasTables = Object.keys(state.tableNameHash).length > 0 && this.showTables;
51
- if (hasLayers || hasTables) {
52
- this._setSelectedLayer(this.ids[0], hasLayers ? "layer" : "table");
53
+ if (this.ids.length > 0) {
54
+ this._hasValidLayers = true;
55
+ this._setSelectedLayer(this.ids[0]);
56
+ }
57
+ else {
58
+ this._hasValidLayers = false;
59
+ this.noLayersFound.emit();
53
60
  }
54
61
  }
55
62
  //--------------------------------------------------------------------------
@@ -61,6 +68,7 @@ export class MapLayerPicker {
61
68
  * StencilJS: Called once just after the component is first connected to the DOM.
62
69
  */
63
70
  async componentWillLoad() {
71
+ await this._getTranslations();
64
72
  await this._setLayers();
65
73
  if (this.ids.length > 0 || this.selectedIds.length === 1) {
66
74
  this.layerSelectionChange.emit(this.selectedIds.length === 1 ? [this.selectedIds[0]] : [this.ids[0]]);
@@ -70,7 +78,7 @@ export class MapLayerPicker {
70
78
  * Renders the component.
71
79
  */
72
80
  render() {
73
- return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, this.type === "combobox" ? this._getCombobox() :
81
+ return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox() :
74
82
  this.type === "select" ? this._getSelect() : this._getDropdown()))));
75
83
  }
76
84
  /**
@@ -83,9 +91,9 @@ export class MapLayerPicker {
83
91
  this._layerElement.value = id;
84
92
  }
85
93
  else if (this.type === "dropdown") {
86
- this.selectedName = Object.keys(state.layerNameHash).indexOf(id) > -1 ?
87
- state.layerNameHash[id] : Object.keys(state.tableNameHash).indexOf(id) > -1 ?
88
- state.tableNameHash[id] : "";
94
+ this.selectedName = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
95
+ this._layerNameHash[id].name : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
96
+ this._tableNameHash[id].name : "";
89
97
  }
90
98
  }
91
99
  }
@@ -94,6 +102,14 @@ export class MapLayerPicker {
94
102
  // Functions (protected)
95
103
  //
96
104
  //--------------------------------------------------------------------------
105
+ /**
106
+ * Create a notice to inform the user that no layers were found
107
+ *
108
+ * @returns Calcite Notice component with the message
109
+ */
110
+ _getInvalidPlaceholder() {
111
+ return (h("div", null, h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, h("div", { slot: "message" }, this._translations.noLayersFound)), h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, h("span", null, this._translations.enableEditUpdate))));
112
+ }
97
113
  /**
98
114
  * Create a list of layers from the map
99
115
  *
@@ -144,16 +160,21 @@ export class MapLayerPicker {
144
160
  * @returns A dom node with the name of the layer or table
145
161
  */
146
162
  _getItem(id, itemType) {
147
- const name = itemType === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
148
- return this.type === "combobox" ? (h("calcite-combobox-item", { textLabel: name, value: id })) :
149
- this.type === "select" ? (h("calcite-option", { label: name, value: id })) :
150
- (h("calcite-dropdown-item", { onClick: () => void this._setSelectedLayer(id, itemType) }, name));
163
+ const item = itemType === "layer" ? this._layerNameHash[id] : this._tableNameHash[id];
164
+ const disabled = this.onlyShowUpdatableLayers ? !item.supportsUpdate : false;
165
+ const name = item.name;
166
+ return this.type === "combobox" ? (h("calcite-combobox-item", { disabled: disabled, textLabel: name, value: id })) :
167
+ this.type === "select" ? (h("calcite-option", { disabled: disabled, label: name, value: id })) :
168
+ (h("calcite-dropdown-item", { disabled: disabled, onClick: disabled ? undefined : () => void this._setSelectedLayer(id) }, name));
151
169
  }
152
170
  /**
153
171
  * Store the layer name based on the user selection
154
172
  */
155
- _setSelectedLayer(id, type) {
156
- this.selectedName = type === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
173
+ _setSelectedLayer(id) {
174
+ const item = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
175
+ this._layerNameHash[id] : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
176
+ this._tableNameHash[id] : undefined;
177
+ this.selectedName = item === null || item === void 0 ? void 0 : item.name;
157
178
  this.selectedIds = [id];
158
179
  this.layerSelectionChange.emit(this.selectedIds);
159
180
  }
@@ -164,25 +185,38 @@ export class MapLayerPicker {
164
185
  */
165
186
  async _setLayers() {
166
187
  if (this.mapView) {
167
- const mapLayerIds = await getMapLayerIds(this.mapView);
168
- const mapTableIds = this.showTables ? await getMapTableIds(this.mapView) : [];
188
+ await this._initLayerTableHash();
189
+ const mapLayerIds = this.onlyShowUpdatableLayers ?
190
+ this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
191
+ const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
192
+ this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
169
193
  this.ids = [
170
194
  ...mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; }),
171
195
  ...mapTableIds.filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.indexOf(n) > -1 : true; }),
172
196
  ];
173
- await this._initStateHash();
174
197
  }
175
198
  }
199
+ /**
200
+ * Fetch the ids of all layers that support edits with the update capability
201
+ *
202
+ * @returns array of layer ids
203
+ */
204
+ _getEditableIds(hash) {
205
+ return Object.keys(hash).reduce((prev, cur) => {
206
+ if (hash[cur].supportsUpdate) {
207
+ prev.push(cur);
208
+ }
209
+ return prev;
210
+ }, []);
211
+ }
176
212
  /**
177
213
  * Create a layer id:title hash for layer name display
178
214
  *
179
215
  * @returns Promise when the operation has completed
180
216
  */
181
- async _initStateHash() {
182
- if (this.mapView) {
183
- state.layerNameHash = await getMapLayerHash(this.mapView);
184
- state.tableNameHash = this.showTables ? await getMapTableHash(this.mapView) : {};
185
- }
217
+ async _initLayerTableHash() {
218
+ this._layerNameHash = await getMapLayerHash(this.mapView, this.onlyShowUpdatableLayers);
219
+ this._tableNameHash = this.showTables ? await getMapTableHash(this.mapView, this.onlyShowUpdatableLayers) : {};
186
220
  }
187
221
  /**
188
222
  * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -190,9 +224,10 @@ export class MapLayerPicker {
190
224
  * @returns boolean when true the layer will be used in the current layer picker type
191
225
  */
192
226
  _validLayer(id) {
193
- const name = state.layerNameHash[id];
227
+ var _a;
228
+ const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
194
229
  return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
195
- this.enabledLayerIds.indexOf(id) > -1 : name);
230
+ this.enabledLayerIds.indexOf(id) > -1 : true);
196
231
  }
197
232
  /**
198
233
  * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -200,7 +235,8 @@ export class MapLayerPicker {
200
235
  * @returns boolean when true the table will be used in the current layer picker type
201
236
  */
202
237
  _validTable(id) {
203
- const name = state.tableNameHash[id];
238
+ var _a;
239
+ const name = (_a = this._tableNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
204
240
  const validName = name && this.showTables;
205
241
  return validName ? state.managedTables.indexOf(name) < 0 &&
206
242
  (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
@@ -217,6 +253,16 @@ export class MapLayerPicker {
217
253
  this.layerSelectionChange.emit(this.selectedIds);
218
254
  }
219
255
  }
256
+ /**
257
+ * Fetches the component's translations
258
+ *
259
+ * @returns Promise when complete
260
+ * @protected
261
+ */
262
+ async _getTranslations() {
263
+ const messages = await getLocaleComponentStrings(this.el);
264
+ this._translations = messages[0];
265
+ }
220
266
  static get is() { return "map-layer-picker"; }
221
267
  static get originalStyleUrls() {
222
268
  return {
@@ -300,6 +346,23 @@ export class MapLayerPicker {
300
346
  "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
301
347
  }
302
348
  },
349
+ "onlyShowUpdatableLayers": {
350
+ "type": "boolean",
351
+ "mutable": false,
352
+ "complexType": {
353
+ "original": "boolean",
354
+ "resolved": "boolean",
355
+ "references": {}
356
+ },
357
+ "required": false,
358
+ "optional": false,
359
+ "docs": {
360
+ "tags": [],
361
+ "text": "boolean: When true only editable layers that support the update capability will be available"
362
+ },
363
+ "attribute": "only-show-updatable-layers",
364
+ "reflect": false
365
+ },
303
366
  "placeholderIcon": {
304
367
  "type": "string",
305
368
  "mutable": false,
@@ -392,12 +455,29 @@ export class MapLayerPicker {
392
455
  }
393
456
  static get states() {
394
457
  return {
458
+ "_hasValidLayers": {},
395
459
  "ids": {},
396
- "selectedName": {}
460
+ "selectedName": {},
461
+ "_translations": {}
397
462
  };
398
463
  }
399
464
  static get events() {
400
465
  return [{
466
+ "method": "noLayersFound",
467
+ "name": "noLayersFound",
468
+ "bubbles": true,
469
+ "cancelable": true,
470
+ "composed": true,
471
+ "docs": {
472
+ "tags": [],
473
+ "text": "Emitted on demand when no valid layers are found"
474
+ },
475
+ "complexType": {
476
+ "original": "void",
477
+ "resolved": "void",
478
+ "references": {}
479
+ }
480
+ }, {
401
481
  "method": "layerSelectionChange",
402
482
  "name": "layerSelectionChange",
403
483
  "bubbles": true,
@@ -48,7 +48,7 @@
48
48
  flex-direction: column;
49
49
  overflow: hidden;
50
50
  animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
51
- background-color: var(--calcite-scrim-background);
51
+ background-color: var(--calcite-ui-background);
52
52
  z-index: 1000;
53
53
  width: 100%;
54
54
  height: -moz-fit-content;
@@ -62,3 +62,7 @@
62
62
  .action-bar-color {
63
63
  background-color: var(--calcite-ui-border-3) !important;
64
64
  }
65
+
66
+ .align-center {
67
+ align-items: center;
68
+ }
@@ -46,9 +46,9 @@ export class MapPicker {
46
46
  /**
47
47
  * Called each time the mapInfos prop is changed.
48
48
  */
49
- mapInfosWatchHandler(v, oldV) {
49
+ async mapInfosWatchHandler(v, oldV) {
50
50
  if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
51
- this.mapInfoChange.emit(v[0]);
51
+ this._webMapSelected(v[0]);
52
52
  }
53
53
  }
54
54
  //--------------------------------------------------------------------------
@@ -73,7 +73,7 @@ export class MapPicker {
73
73
  /**
74
74
  * Called once after the component has loaded
75
75
  */
76
- componentDidLoad() {
76
+ async componentDidLoad() {
77
77
  const webMapInfo = this.mapInfos && this.mapInfos.length > 0 ? this.mapInfos[0] : undefined;
78
78
  if (webMapInfo) {
79
79
  this._webMapSelected(webMapInfo);
@@ -22,6 +22,11 @@ import { Host, h } from "@stencil/core";
22
22
  import { getLocaleComponentStrings } from "../../utils/locale";
23
23
  export class MapTools {
24
24
  constructor() {
25
+ this.enableLegend = undefined;
26
+ this.enableFullscreen = undefined;
27
+ this.enableSearch = undefined;
28
+ this.enableBasemap = undefined;
29
+ this.basemapConfig = undefined;
25
30
  this.layout = "vertical";
26
31
  this.mapView = undefined;
27
32
  this.searchConfiguration = undefined;
@@ -125,7 +130,16 @@ export class MapTools {
125
130
  const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
126
131
  const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
127
132
  const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;
128
- return (h(Host, null, h("div", null, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
133
+ const containerClass = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "";
134
+ return (h(Host, null, h("div", { class: containerClass }, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this.enableLegend ?
135
+ this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()) :
136
+ undefined, this.enableSearch ?
137
+ this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()) :
138
+ undefined, this.enableFullscreen ?
139
+ this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
140
+ undefined, this.enableBasemap ?
141
+ this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
142
+ undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
129
143
  }
130
144
  //--------------------------------------------------------------------------
131
145
  //
@@ -217,6 +231,95 @@ export class MapTools {
217
231
  }
218
232
  static get properties() {
219
233
  return {
234
+ "enableLegend": {
235
+ "type": "boolean",
236
+ "mutable": false,
237
+ "complexType": {
238
+ "original": "boolean",
239
+ "resolved": "boolean",
240
+ "references": {}
241
+ },
242
+ "required": false,
243
+ "optional": false,
244
+ "docs": {
245
+ "tags": [],
246
+ "text": "boolean: when true the legend widget will be available"
247
+ },
248
+ "attribute": "enable-legend",
249
+ "reflect": false
250
+ },
251
+ "enableFullscreen": {
252
+ "type": "boolean",
253
+ "mutable": false,
254
+ "complexType": {
255
+ "original": "boolean",
256
+ "resolved": "boolean",
257
+ "references": {}
258
+ },
259
+ "required": false,
260
+ "optional": false,
261
+ "docs": {
262
+ "tags": [],
263
+ "text": "boolean: when true the fullscreen widget will be available"
264
+ },
265
+ "attribute": "enable-fullscreen",
266
+ "reflect": false
267
+ },
268
+ "enableSearch": {
269
+ "type": "boolean",
270
+ "mutable": false,
271
+ "complexType": {
272
+ "original": "boolean",
273
+ "resolved": "boolean",
274
+ "references": {}
275
+ },
276
+ "required": false,
277
+ "optional": false,
278
+ "docs": {
279
+ "tags": [],
280
+ "text": "boolean: when true the search widget will be available"
281
+ },
282
+ "attribute": "enable-search",
283
+ "reflect": false
284
+ },
285
+ "enableBasemap": {
286
+ "type": "boolean",
287
+ "mutable": false,
288
+ "complexType": {
289
+ "original": "boolean",
290
+ "resolved": "boolean",
291
+ "references": {}
292
+ },
293
+ "required": false,
294
+ "optional": false,
295
+ "docs": {
296
+ "tags": [],
297
+ "text": "boolean: when true the basemap widget will be available"
298
+ },
299
+ "attribute": "enable-basemap",
300
+ "reflect": false
301
+ },
302
+ "basemapConfig": {
303
+ "type": "unknown",
304
+ "mutable": false,
305
+ "complexType": {
306
+ "original": "IBasemapConfig",
307
+ "resolved": "IBasemapConfig",
308
+ "references": {
309
+ "IBasemapConfig": {
310
+ "location": "import",
311
+ "path": "../../utils/interfaces",
312
+ "id": "src/utils/interfaces.ts::IBasemapConfig"
313
+ }
314
+ }
315
+ },
316
+ "required": false,
317
+ "optional": false,
318
+ "docs": {
319
+ "tags": [],
320
+ "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
321
+ }
322
+ },
220
323
  "layout": {
221
324
  "type": "string",
222
325
  "mutable": false,
@@ -165,7 +165,12 @@ export interface IValueChange {
165
165
  * Layer or table id and title key value pair
166
166
  */
167
167
  export interface IMapItemHash {
168
- [key: string]: string;
168
+ [key: string]: ILayerHashInfo;
169
+ }
170
+
171
+ export interface ILayerHashInfo {
172
+ name: string;
173
+ supportsUpdate: boolean;
169
174
  }
170
175
 
171
176
  /**
@@ -444,6 +449,8 @@ export interface IMapInfo {
444
449
  searchConfiguration?: ISearchConfiguration;
445
450
  filters?: any[]; // TODO generate an interface for this once we know how it will be passed in
446
451
  layerInfos?: ILayerInfo[];
452
+ _hasValidLayers?: boolean;
453
+ visible: boolean;
447
454
  }
448
455
 
449
456
  export interface ILayerInfo {
@@ -466,3 +473,7 @@ export interface IExportInfo {
466
473
  layerView?: __esri.FeatureLayerView;
467
474
  selectionSetNames: string[];
468
475
  }
476
+
477
+ export interface IBasemapConfig {
478
+ basemapIdsToFilter: string[];
479
+ }