@esri/solutions-components 0.6.28 → 0.6.29

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. package/dist/cjs/basemap-gallery_7.cjs.entry.js +2 -2
  2. package/dist/cjs/calcite-combobox_6.cjs.entry.js +2 -2
  3. package/dist/cjs/card-manager_3.cjs.entry.js +333 -11
  4. package/dist/cjs/crowdsource-manager.cjs.entry.js +4 -4
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/solutions-components.cjs.js +1 -1
  7. package/dist/collection/components/basemap-gallery/basemap-gallery.js +2 -2
  8. package/dist/collection/components/crowdsource-manager/crowdsource-manager.css +0 -4
  9. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +3 -3
  10. package/dist/collection/components/layer-table/layer-table.css +6 -2
  11. package/dist/collection/components/layer-table/layer-table.js +337 -10
  12. package/dist/collection/components/map-layer-picker/map-layer-picker.js +2 -2
  13. package/dist/collection/utils/interfaces.ts +14 -0
  14. package/dist/components/basemap-gallery2.js +2 -2
  15. package/dist/components/crowdsource-manager.js +4 -4
  16. package/dist/components/layer-table2.js +336 -11
  17. package/dist/components/map-layer-picker2.js +2 -2
  18. package/dist/esm/basemap-gallery_7.entry.js +2 -2
  19. package/dist/esm/calcite-combobox_6.entry.js +2 -2
  20. package/dist/esm/card-manager_3.entry.js +333 -11
  21. package/dist/esm/crowdsource-manager.entry.js +4 -4
  22. package/dist/esm/loader.js +1 -1
  23. package/dist/esm/solutions-components.js +1 -1
  24. package/dist/solutions-components/{p-5e446b18.entry.js → p-190c83b9.entry.js} +1 -1
  25. package/dist/solutions-components/p-3c702004.entry.js +6 -0
  26. package/dist/solutions-components/p-d44ad6c4.entry.js +6 -0
  27. package/dist/solutions-components/p-f2dcb05a.entry.js +6 -0
  28. package/dist/solutions-components/solutions-components.esm.js +1 -1
  29. package/dist/solutions-components/utils/interfaces.ts +14 -0
  30. package/dist/types/components/layer-table/layer-table.d.ts +140 -4
  31. package/dist/types/utils/interfaces.d.ts +12 -0
  32. package/package.json +1 -1
  33. package/dist/solutions-components/p-25729b41.entry.js +0 -6
  34. package/dist/solutions-components/p-cd7873ae.entry.js +0 -6
  35. package/dist/solutions-components/p-ea238bbc.entry.js +0 -6
@@ -54,6 +54,7 @@ export class LayerTable {
54
54
  this.showNewestFirst = undefined;
55
55
  this.zoomAndScrollToSelected = undefined;
56
56
  this._confirmDelete = false;
57
+ this._controlsThatFit = undefined;
57
58
  this._fetchingData = false;
58
59
  this._isDeleting = false;
59
60
  this._layer = undefined;
@@ -67,6 +68,22 @@ export class LayerTable {
67
68
  // Watch handlers
68
69
  //
69
70
  //--------------------------------------------------------------------------
71
+ /**
72
+ * watch for changes to the list of controls that will currently fit in the display
73
+ */
74
+ _controlsThatFitWatchHandler() {
75
+ const ids = this._controlsThatFit ? this._controlsThatFit.reduce((prev, cur) => {
76
+ prev.push(cur.id);
77
+ return prev;
78
+ }, []) : [];
79
+ this._toolInfos = this._toolInfos.map(ti => {
80
+ if (ti && this._controlsThatFit) {
81
+ const id = this._getId(ti.icon);
82
+ ti.isOverflow = ids.indexOf(id) < 0;
83
+ return ti;
84
+ }
85
+ });
86
+ }
70
87
  /**
71
88
  * watch for changes in map view and get the first layer
72
89
  */
@@ -88,6 +105,12 @@ export class LayerTable {
88
105
  await this._resetTable();
89
106
  this._fetchingData = false;
90
107
  }
108
+ /**
109
+ * watch for selection changes
110
+ */
111
+ async _selectedIndexesWatchHandler() {
112
+ this._validateEnabledActions();
113
+ }
91
114
  /**
92
115
  * When sortActive is false the user has not defined a sort and we should use the default sort
93
116
  */
@@ -125,8 +148,8 @@ export class LayerTable {
125
148
  * Refresh the table when edits are completed
126
149
  *
127
150
  */
128
- editsComplete() {
129
- this._refresh();
151
+ async editsComplete() {
152
+ await this._refresh();
130
153
  }
131
154
  /**
132
155
  * Refresh the table when edits are completed
@@ -150,6 +173,8 @@ export class LayerTable {
150
173
  async componentWillLoad() {
151
174
  await this._getTranslations();
152
175
  await this._initModules();
176
+ this._initToolInfos();
177
+ this._resizeObserver = new ResizeObserver(() => this._onResize());
153
178
  }
154
179
  /**
155
180
  * Renders the component.
@@ -159,10 +184,22 @@ export class LayerTable {
159
184
  const loadingClass = this._fetchingData ? "" : "display-none";
160
185
  const total = this._allIds.length.toString();
161
186
  const selected = this._selectedIndexes.length.toString();
162
- return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full-adjusted width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left text-color" }, this._translations.recordsSelected
187
+ return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full-adjusted width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
163
188
  .replace("{{total}}", total)
164
189
  .replace("{{selected}}", selected)))), this._deleteMessage()));
165
190
  }
191
+ /**
192
+ * Called once after the component is loaded
193
+ */
194
+ async componentDidLoad() {
195
+ this._resizeObserver.observe(this._toolbar);
196
+ }
197
+ /**
198
+ * Called after the component is rendered
199
+ */
200
+ componentDidRender() {
201
+ this._updateToolbar();
202
+ }
166
203
  //--------------------------------------------------------------------------
167
204
  //
168
205
  // Functions (protected)
@@ -183,6 +220,14 @@ export class LayerTable {
183
220
  this.FeatureTable = FeatureTable;
184
221
  this.reactiveUtils = reactiveUtils;
185
222
  }
223
+ /**
224
+ * Update the toolbar when its size changes
225
+ *
226
+ * @returns void
227
+ */
228
+ _onResize() {
229
+ this._updateToolbar();
230
+ }
186
231
  /**
187
232
  * Gets a row of controls that can be used for various interactions with the table
188
233
  *
@@ -191,11 +236,261 @@ export class LayerTable {
191
236
  * @returns The dom node that contains the controls
192
237
  */
193
238
  _getTableControlRow(slot) {
239
+ const id = "more-table-options";
240
+ return (h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), this._getDropdown(id), this._getToolTip("", "bottom", id, this._translations.moreOptions)));
241
+ }
242
+ /**
243
+ * Gets a row of controls that can be used for various interactions with the table
244
+ *
245
+ * @param slot string optional slot to display the control within
246
+ *
247
+ * @returns The dom node that contains the controls
248
+ */
249
+ _getActionBar() {
250
+ return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
251
+ }
252
+ /**
253
+ * Get the actions that are used for various interactions with the table
254
+ *
255
+ * @returns VNode[] the action nodes
256
+ */
257
+ _getActions() {
258
+ const actions = this._getActionItems();
259
+ return actions.reduce((prev, cur) => {
260
+ if (cur && !cur.isOverflow) {
261
+ prev.push(cur.isDanger ?
262
+ this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
263
+ this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
264
+ }
265
+ return prev;
266
+ }, []);
267
+ }
268
+ /**
269
+ * Update actions enabled prop based on number of selected indexes
270
+ *
271
+ * @returns void
272
+ */
273
+ _validateEnabledActions() {
274
+ const featuresSelected = this._selectedIndexes.length > 0;
275
+ const selectionDependant = [
276
+ "zoom-to-object",
277
+ "trash",
278
+ "erase",
279
+ "selected-items-filter"
280
+ ];
281
+ this._toolInfos.forEach(ti => {
282
+ if (ti && selectionDependant.indexOf(ti.icon) > -1) {
283
+ ti.disabled = !featuresSelected;
284
+ }
285
+ });
286
+ }
287
+ /**
288
+ * Get the full list of toolInfos.
289
+ * Order is important. They should be listed in the order they should display in the UI from
290
+ * Left to Right for the action bar and Top to Bottom for the dropdown.
291
+ *
292
+ * @returns void
293
+ */
294
+ _initToolInfos() {
194
295
  var _a;
195
296
  const featuresSelected = this._selectedIndexes.length > 0;
196
- const id = "more-table-options";
197
- return (h("div", { class: "display-flex border-bottom 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), this.enableCSV ?
198
- (h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)) : undefined)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
297
+ this._toolInfos = [{
298
+ icon: "zoom-to-object",
299
+ label: this._translations.zoom,
300
+ func: () => this._zoom(),
301
+ disabled: !featuresSelected,
302
+ isOverflow: false
303
+ }, ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
304
+ icon: "filter",
305
+ label: this._translations.filters,
306
+ func: () => this._filter(),
307
+ disabled: false,
308
+ isOverflow: false
309
+ } : undefined,
310
+ this._deleteEnabled ? {
311
+ icon: "trash",
312
+ label: this._translations.delete,
313
+ func: () => this._delete(),
314
+ disabled: !featuresSelected,
315
+ isDanger: true,
316
+ isOverflow: false
317
+ } : undefined, {
318
+ icon: "erase",
319
+ label: this._translations.clearSelection,
320
+ func: () => this._clearSelection(),
321
+ disabled: !featuresSelected,
322
+ isOverflow: false
323
+ }, {
324
+ icon: "selected-items-filter",
325
+ label: this._showOnlySelected ? this._translations.showAll : this._translations.showSelected,
326
+ func: () => this._toggleShowSelected(),
327
+ disabled: !featuresSelected,
328
+ isOverflow: false
329
+ }, {
330
+ icon: "list-check-all",
331
+ func: () => this._selectAll(),
332
+ label: this._translations.selectAll,
333
+ disabled: false,
334
+ isOverflow: true
335
+ }, {
336
+ icon: "compare",
337
+ func: () => this._switchSelected(),
338
+ label: this._translations.switchSelected,
339
+ disabled: false,
340
+ isOverflow: true
341
+ }, {
342
+ icon: "refresh",
343
+ func: () => this._refresh(),
344
+ label: this._translations.refresh,
345
+ disabled: false,
346
+ isOverflow: true
347
+ },
348
+ this.enableCSV ? {
349
+ icon: "export",
350
+ func: () => void this._exportToCSV(),
351
+ label: this._translations.exportCSV,
352
+ disabled: false,
353
+ isOverflow: true
354
+ } : undefined];
355
+ this._defaultVisibleToolSizeInfos = undefined;
356
+ }
357
+ /**
358
+ * Add/Remove tools from the action bar and dropdown based on available size
359
+ *
360
+ * @returns void
361
+ */
362
+ _updateToolbar() {
363
+ if (this._timeout) {
364
+ clearTimeout(this._timeout);
365
+ }
366
+ this._timeout = setTimeout(() => {
367
+ clearTimeout(this._timeout);
368
+ this._setToolbarSizeInfos();
369
+ const toolbarWidth = this._toolbar.offsetWidth;
370
+ let controlsWidth = this._toolbarSizeInfos.reduce((prev, cur) => {
371
+ prev += cur.width;
372
+ return prev;
373
+ }, 0);
374
+ const skipControls = ["solutions-more", "solutions-map-layer-picker-container"];
375
+ if (controlsWidth > toolbarWidth) {
376
+ if (this._toolbarSizeInfos.length > 0) {
377
+ const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
378
+ if (skipControls.indexOf(cur.id) < 0) {
379
+ if (controlsWidth > toolbarWidth) {
380
+ controlsWidth -= cur.width;
381
+ }
382
+ else {
383
+ prev.push(cur);
384
+ }
385
+ }
386
+ return prev;
387
+ }, []).reverse();
388
+ this._setControlsThatFit(controlsThatFit, skipControls);
389
+ }
390
+ }
391
+ else {
392
+ if (this._defaultVisibleToolSizeInfos) {
393
+ const currentTools = this._toolbarSizeInfos.reduce((prev, cur) => {
394
+ prev.push(cur.id);
395
+ return prev;
396
+ }, []);
397
+ const controlsThatFit = [...this._defaultVisibleToolSizeInfos].reduce((prev, cur) => {
398
+ if (skipControls.indexOf(cur.id) < 0 &&
399
+ (currentTools.indexOf(cur.id) > -1 || (controlsWidth + cur.width) <= toolbarWidth)) {
400
+ if (currentTools.indexOf(cur.id) < 0) {
401
+ controlsWidth += cur.width;
402
+ }
403
+ prev.push(cur);
404
+ }
405
+ return prev;
406
+ }, []);
407
+ this._setControlsThatFit(controlsThatFit, skipControls);
408
+ }
409
+ }
410
+ }, 5);
411
+ }
412
+ /**
413
+ * Validate if controls that fit the current display has changed or
414
+ * is different from what is currently displayed
415
+ *
416
+ * @returns void
417
+ */
418
+ _setControlsThatFit(controlsThatFit, skipControls) {
419
+ let update = JSON.stringify(controlsThatFit) !== JSON.stringify(this._controlsThatFit);
420
+ const actionbar = document.getElementById("solutions-action-bar");
421
+ actionbar.childNodes.forEach((n) => {
422
+ if (skipControls.indexOf(n.id) < 0 && !update) {
423
+ update = this._controlsThatFit.map(c => c.id).indexOf(n.id) < 0;
424
+ }
425
+ });
426
+ if (update) {
427
+ this._controlsThatFit = [...controlsThatFit];
428
+ }
429
+ }
430
+ /**
431
+ * Get the id and size for the toolbars current items
432
+ *
433
+ * @returns void
434
+ */
435
+ _setToolbarSizeInfos() {
436
+ let hasWidth = false;
437
+ this._toolbarSizeInfos = [];
438
+ this._toolbar.childNodes.forEach((c, i) => {
439
+ // handle the action bar
440
+ if (i === 0) {
441
+ c.childNodes.forEach((actionbarChild) => {
442
+ this._toolbarSizeInfos.push({
443
+ id: actionbarChild.id,
444
+ width: actionbarChild.offsetWidth
445
+ });
446
+ if (!hasWidth) {
447
+ hasWidth = actionbarChild.offsetWidth > 0;
448
+ }
449
+ });
450
+ }
451
+ else if (!c.referenceElement) {
452
+ // skip tooltips
453
+ this._toolbarSizeInfos.push({
454
+ id: c.id,
455
+ width: c.offsetWidth
456
+ });
457
+ if (!hasWidth) {
458
+ hasWidth = c.offsetWidth > 0;
459
+ }
460
+ }
461
+ });
462
+ if (hasWidth && !this._defaultVisibleToolSizeInfos) {
463
+ this._defaultVisibleToolSizeInfos = [...this._toolbarSizeInfos];
464
+ }
465
+ }
466
+ /**
467
+ * Get a list of toolInfos that should display outside of the dropdown
468
+ *
469
+ * @returns IToolInfo[] the list of toolInfos that should not display in the overflow dropdown
470
+ */
471
+ _getActionItems() {
472
+ return this._toolInfos.filter(toolInfo => toolInfo && !toolInfo.isOverflow);
473
+ }
474
+ /**
475
+ * Get a list of toolInfos that should display in the dropdown
476
+ *
477
+ * @param id string the id for the dropdown and its tooltip
478
+ *
479
+ * @returns VNode the dropdown node
480
+ */
481
+ _getDropdown(id) {
482
+ const dropdownItems = this._getDropdownItems();
483
+ return (h("calcite-dropdown", { disabled: this._layer === undefined, id: "solutions-more" }, 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" }, dropdownItems.map(item => {
484
+ return (h("calcite-dropdown-item", { iconStart: item.icon, onClick: item.func }, item.label));
485
+ }))));
486
+ }
487
+ /**
488
+ * Get a list of toolInfos that should display in the dropdown
489
+ *
490
+ * @returns IToolInfo[] the list of toolInfos that should display in the dropdown
491
+ */
492
+ _getDropdownItems() {
493
+ return this._toolInfos.filter(toolInfo => toolInfo && toolInfo.isOverflow);
199
494
  }
200
495
  /**
201
496
  * Get an action and tooltip
@@ -209,7 +504,30 @@ export class LayerTable {
209
504
  */
210
505
  _getAction(icon, label, func, disabled) {
211
506
  const _disabled = this._layer === undefined ? true : disabled;
212
- 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))));
507
+ return (h("div", { class: "display-flex", id: this._getId(icon) }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
508
+ }
509
+ /**
510
+ * Get a tooltip
511
+ *
512
+ * @param label string accessible name for the component
513
+ * @param placement string where the tooltip should display
514
+ * @param referenceElement string the element the tooltip will be associated with
515
+ * @param text string the text to display in the tooltip
516
+ *
517
+ * @returns VNode The tooltip node
518
+ */
519
+ _getToolTip(label, placement, referenceElement, text) {
520
+ return (h("calcite-tooltip", { label: label, placement: placement, "reference-element": referenceElement }, h("span", null, text)));
521
+ }
522
+ /**
523
+ * Get an id with a prefix to the user supplied value
524
+ *
525
+ * @param id the unique value for the id
526
+ *
527
+ * @returns the new id with the prefix value
528
+ */
529
+ _getId(id) {
530
+ return `solutions-action-${id}`;
213
531
  }
214
532
  /**
215
533
  * Get an action with danger color icon and text
@@ -223,7 +541,7 @@ export class LayerTable {
223
541
  */
224
542
  _getDangerAction(icon, label, func, disabled) {
225
543
  const _disabled = this._layer === undefined ? true : disabled;
226
- 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))));
544
+ return (h("div", { class: "display-flex", id: this._getId(icon) }, h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), this._getToolTip("", "bottom", icon, label)));
227
545
  }
228
546
  /**
229
547
  * Initialize the FeatureTable
@@ -294,6 +612,7 @@ export class LayerTable {
294
612
  this._table.view = this.mapView;
295
613
  this._checkEditEnabled();
296
614
  this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
615
+ this._initToolInfos();
297
616
  });
298
617
  await this._table.when(() => {
299
618
  this._table.clearSelectionFilter();
@@ -480,8 +799,9 @@ export class LayerTable {
480
799
  *
481
800
  * @returns void
482
801
  */
483
- _refresh() {
484
- void this._table.refresh();
802
+ async _refresh() {
803
+ await this._table.refresh();
804
+ this.featureSelectionChange.emit(this._selectedIndexes);
485
805
  }
486
806
  /**
487
807
  * Zoom to all selected features
@@ -738,6 +1058,7 @@ export class LayerTable {
738
1058
  static get states() {
739
1059
  return {
740
1060
  "_confirmDelete": {},
1061
+ "_controlsThatFit": {},
741
1062
  "_fetchingData": {},
742
1063
  "_isDeleting": {},
743
1064
  "_layer": {},
@@ -783,11 +1104,17 @@ export class LayerTable {
783
1104
  static get elementRef() { return "el"; }
784
1105
  static get watchers() {
785
1106
  return [{
1107
+ "propName": "_controlsThatFit",
1108
+ "methodName": "_controlsThatFitWatchHandler"
1109
+ }, {
786
1110
  "propName": "mapView",
787
1111
  "methodName": "mapViewWatchHandler"
788
1112
  }, {
789
1113
  "propName": "_layer",
790
1114
  "methodName": "_layerWatchHandler"
1115
+ }, {
1116
+ "propName": "_selectedIndexes",
1117
+ "methodName": "_selectedIndexesWatchHandler"
791
1118
  }, {
792
1119
  "propName": "_sortActive",
793
1120
  "methodName": "_sortActiveWatchHandler"
@@ -196,8 +196,8 @@ export class MapLayerPicker {
196
196
  const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
197
197
  this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
198
198
  this.ids = [
199
- ...mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; }),
200
- ...mapTableIds.filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.indexOf(n) > -1 : true; }),
199
+ ...mapLayerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
200
+ ...mapTableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
201
201
  ];
202
202
  }
203
203
  }
@@ -478,3 +478,17 @@ export interface IBasemapConfig {
478
478
  basemapIdsToFilter: string[];
479
479
  basemapGroupId: string;
480
480
  }
481
+
482
+ export interface IToolInfo {
483
+ icon: string;
484
+ func: any;
485
+ label: string;
486
+ disabled: boolean;
487
+ isDanger?: boolean;
488
+ isOverflow: boolean;
489
+ }
490
+
491
+ export interface IToolSizeInfo {
492
+ id: string;
493
+ width: number;
494
+ }
@@ -89,9 +89,9 @@ const BasemapGallery = /*@__PURE__*/ proxyCustomElement(class BasemapGallery ext
89
89
  }
90
90
  const source = new this.PortalBasemapsSource({
91
91
  query: ((_a = this.basemapConfig) === null || _a === void 0 ? void 0 : _a.basemapGroupId) ? `id:${this.basemapConfig.basemapGroupId}` : null,
92
- filterFunction: (basemap) => {
92
+ filterFunction: this.basemapConfig ? (basemap) => {
93
93
  return !this.basemapConfig.basemapIdsToFilter.includes(basemap.portalItem.id);
94
- }
94
+ } : () => true
95
95
  });
96
96
  await source.refresh();
97
97
  this.basemapWidget = new this.BasemapGallery({
@@ -50,7 +50,7 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
50
50
  import { d as defineCustomElement$3 } from './map-search2.js';
51
51
  import { d as defineCustomElement$2 } from './map-tools2.js';
52
52
 
53
- const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-ui-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.border-sides{border-left:1px solid var(--calcite-ui-border-3);border-right:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-49-px{height:49px}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}";
53
+ const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-ui-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.border-sides{border-left:1px solid var(--calcite-ui-border-3);border-right:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}";
54
54
 
55
55
  const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
56
56
  constructor() {
@@ -279,11 +279,11 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
279
279
  * @protected
280
280
  */
281
281
  _getMapNode(layoutMode, hideMap) {
282
- var _a, _b;
282
+ var _a, _b, _c;
283
283
  const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
284
284
  layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
285
285
  const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
286
- return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter && ((_b = (_a = this._mapView) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.floorInfo), enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: this.mapInfos.filter(mapInfo => mapInfo.visible !== false) })));
286
+ return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter && ((_b = (_a = this._mapView) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.floorInfo), enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: (_c = this.mapInfos) === null || _c === void 0 ? void 0 : _c.filter(mapInfo => mapInfo.visible !== false) })));
287
287
  }
288
288
  /**
289
289
  * Get the expand node for the popup information
@@ -296,7 +296,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
296
296
  const id = "expand-popup";
297
297
  const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
298
298
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
299
- return (h("div", { class: "calcite-mode-dark height-full" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { class: "height-49-px", icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
299
+ return (h("div", { class: "calcite-mode-dark height-full" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
300
300
  }
301
301
  /**
302
302
  * Toggle the popup information