@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.
- package/dist/cjs/basemap-gallery_7.cjs.entry.js +2 -2
- package/dist/cjs/calcite-combobox_6.cjs.entry.js +2 -2
- package/dist/cjs/card-manager_3.cjs.entry.js +333 -11
- package/dist/cjs/crowdsource-manager.cjs.entry.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/components/basemap-gallery/basemap-gallery.js +2 -2
- package/dist/collection/components/crowdsource-manager/crowdsource-manager.css +0 -4
- package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +3 -3
- package/dist/collection/components/layer-table/layer-table.css +6 -2
- package/dist/collection/components/layer-table/layer-table.js +337 -10
- package/dist/collection/components/map-layer-picker/map-layer-picker.js +2 -2
- package/dist/collection/utils/interfaces.ts +14 -0
- package/dist/components/basemap-gallery2.js +2 -2
- package/dist/components/crowdsource-manager.js +4 -4
- package/dist/components/layer-table2.js +336 -11
- package/dist/components/map-layer-picker2.js +2 -2
- package/dist/esm/basemap-gallery_7.entry.js +2 -2
- package/dist/esm/calcite-combobox_6.entry.js +2 -2
- package/dist/esm/card-manager_3.entry.js +333 -11
- package/dist/esm/crowdsource-manager.entry.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/{p-5e446b18.entry.js → p-190c83b9.entry.js} +1 -1
- package/dist/solutions-components/p-3c702004.entry.js +6 -0
- package/dist/solutions-components/p-d44ad6c4.entry.js +6 -0
- package/dist/solutions-components/p-f2dcb05a.entry.js +6 -0
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/interfaces.ts +14 -0
- package/dist/types/components/layer-table/layer-table.d.ts +140 -4
- package/dist/types/utils/interfaces.d.ts +12 -0
- package/package.json +1 -1
- package/dist/solutions-components/p-25729b41.entry.js +0 -6
- package/dist/solutions-components/p-cd7873ae.entry.js +0 -6
- 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
|
-
|
197
|
-
|
198
|
-
|
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 }),
|
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)),
|
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
|
-
|
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-
|
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", {
|
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
|