@esri/solutions-components 0.7.8 → 0.7.9
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.
- package/dist/assets/t9n/layer-table/resources.json +1 -0
- package/dist/assets/t9n/layer-table/resources_en.json +1 -0
- package/dist/cjs/calcite-combobox_6.cjs.entry.js +15 -6
- package/dist/cjs/card-manager_3.cjs.entry.js +42 -5
- package/dist/cjs/crowdsource-manager.cjs.entry.js +12 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +20 -2
- package/dist/collection/components/layer-table/layer-table.js +42 -5
- package/dist/collection/components/map-layer-picker/map-layer-picker.css +1 -0
- package/dist/collection/components/map-layer-picker/map-layer-picker.js +69 -5
- package/dist/collection/utils/interfaces.ts +5 -0
- package/dist/components/crowdsource-manager.js +15 -3
- package/dist/components/layer-table2.js +42 -5
- package/dist/components/map-layer-picker2.js +17 -6
- package/dist/esm/calcite-combobox_6.entry.js +15 -6
- package/dist/esm/card-manager_3.entry.js +42 -5
- package/dist/esm/crowdsource-manager.entry.js +12 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/{p-546a3d3c.entry.js → p-a9bbd352.entry.js} +1 -1
- package/dist/solutions-components/p-c9b4d52f.entry.js +6 -0
- package/dist/solutions-components/p-f7870ec1.entry.js +6 -0
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/interfaces.ts +5 -0
- package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +8 -0
- package/dist/types/components/layer-table/layer-table.d.ts +14 -0
- package/dist/types/components/map-layer-picker/map-layer-picker.d.ts +15 -1
- package/dist/types/components.d.ts +23 -2
- package/dist/types/preact.d.ts +2 -1
- package/dist/types/utils/interfaces.d.ts +4 -0
- package/package.json +1 -1
- package/dist/solutions-components/p-1b9709ce.entry.js +0 -6
- package/dist/solutions-components/p-4f1c4004.entry.js +0 -6
@@ -62,6 +62,7 @@ export class CrowdsourceManager {
|
|
62
62
|
this._layoutMode = ELayoutMode.GRID;
|
63
63
|
this._mapView = undefined;
|
64
64
|
this._panelOpen = true;
|
65
|
+
this._tableOnly = false;
|
65
66
|
}
|
66
67
|
//--------------------------------------------------------------------------
|
67
68
|
//
|
@@ -111,6 +112,16 @@ export class CrowdsourceManager {
|
|
111
112
|
// Events (public)
|
112
113
|
//
|
113
114
|
//--------------------------------------------------------------------------
|
115
|
+
/**
|
116
|
+
* Listen for idsFound event to be fired so we can know that all layer ids have been fetched
|
117
|
+
*/
|
118
|
+
async idsFound(evt) {
|
119
|
+
const ids = evt.detail;
|
120
|
+
this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
|
121
|
+
if (this._tableOnly) {
|
122
|
+
this._expandPopup = true;
|
123
|
+
}
|
124
|
+
}
|
114
125
|
/**
|
115
126
|
* Listen for layoutChanged event to be fired so we can adjust the layout
|
116
127
|
*/
|
@@ -308,7 +319,7 @@ export class CrowdsourceManager {
|
|
308
319
|
const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
|
309
320
|
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
|
310
321
|
const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 ? "position-absolute-0" : "position-absolute-50";
|
311
|
-
return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, 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", text: "" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
|
322
|
+
return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, 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", { disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
|
312
323
|
}
|
313
324
|
/**
|
314
325
|
* Toggle the popup information
|
@@ -982,7 +993,8 @@ export class CrowdsourceManager {
|
|
982
993
|
"_translations": {},
|
983
994
|
"_layoutMode": {},
|
984
995
|
"_mapView": {},
|
985
|
-
"_panelOpen": {}
|
996
|
+
"_panelOpen": {},
|
997
|
+
"_tableOnly": {}
|
986
998
|
};
|
987
999
|
}
|
988
1000
|
static get elementRef() { return "el"; }
|
@@ -1006,6 +1018,12 @@ export class CrowdsourceManager {
|
|
1006
1018
|
}
|
1007
1019
|
static get listeners() {
|
1008
1020
|
return [{
|
1021
|
+
"name": "idsFound",
|
1022
|
+
"method": "idsFound",
|
1023
|
+
"target": "window",
|
1024
|
+
"capture": false,
|
1025
|
+
"passive": false
|
1026
|
+
}, {
|
1009
1027
|
"name": "layoutChanged",
|
1010
1028
|
"method": "layoutChanged",
|
1011
1029
|
"target": "window",
|
@@ -297,7 +297,7 @@ export class LayerTable {
|
|
297
297
|
* @returns The dom node that contains the controls
|
298
298
|
*/
|
299
299
|
_getActionBar() {
|
300
|
-
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", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
|
300
|
+
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", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
|
301
301
|
}
|
302
302
|
/**
|
303
303
|
* Get the actions that are used for various interactions with the table
|
@@ -1009,9 +1009,9 @@ export class LayerTable {
|
|
1009
1009
|
* @returns void
|
1010
1010
|
*/
|
1011
1011
|
_initLayerExpressions() {
|
1012
|
-
var _a;
|
1013
|
-
const layerExpressions = (_a = this.mapInfo
|
1014
|
-
this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
|
1012
|
+
var _a, _b;
|
1013
|
+
const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
|
1014
|
+
this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
|
1015
1015
|
}
|
1016
1016
|
/**
|
1017
1017
|
* Select all rows that are not currently selectd
|
@@ -1114,6 +1114,7 @@ export class LayerTable {
|
|
1114
1114
|
fieldInfos.some(fieldInfo => {
|
1115
1115
|
if (fieldInfo.name === columnTemplate.fieldName) {
|
1116
1116
|
columnTemplate.label = fieldInfo.alias;
|
1117
|
+
columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
|
1117
1118
|
return true;
|
1118
1119
|
}
|
1119
1120
|
});
|
@@ -1122,12 +1123,48 @@ export class LayerTable {
|
|
1122
1123
|
return {
|
1123
1124
|
type: "field",
|
1124
1125
|
fieldName: fieldInfo.name,
|
1125
|
-
label: fieldInfo.alias
|
1126
|
+
label: fieldInfo.alias,
|
1127
|
+
menuConfig: this._getMenuConfig(fieldInfo.name)
|
1126
1128
|
};
|
1127
1129
|
});
|
1128
1130
|
}
|
1129
1131
|
return columnTemplates;
|
1130
1132
|
}
|
1133
|
+
/**
|
1134
|
+
* Get the menu config that adds the ability to hide the current column
|
1135
|
+
*
|
1136
|
+
* @returns void
|
1137
|
+
* @protected
|
1138
|
+
*/
|
1139
|
+
_getMenuConfig(name) {
|
1140
|
+
return {
|
1141
|
+
items: [
|
1142
|
+
{
|
1143
|
+
label: this._translations.hideField,
|
1144
|
+
iconClass: "esri-icon-non-visible",
|
1145
|
+
autoCloseMenu: true,
|
1146
|
+
clickFunction: () => {
|
1147
|
+
this._handleHideClick(name);
|
1148
|
+
}
|
1149
|
+
}
|
1150
|
+
]
|
1151
|
+
};
|
1152
|
+
}
|
1153
|
+
/**
|
1154
|
+
* Hide the table column for the provided name
|
1155
|
+
*
|
1156
|
+
* @returns void
|
1157
|
+
* @protected
|
1158
|
+
*/
|
1159
|
+
_handleHideClick(name) {
|
1160
|
+
this._columnsInfo[name] = false;
|
1161
|
+
this._table.hideColumn(name);
|
1162
|
+
this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
|
1163
|
+
if (columnTemplate.fieldName === name) {
|
1164
|
+
columnTemplate.visible = false;
|
1165
|
+
}
|
1166
|
+
});
|
1167
|
+
}
|
1131
1168
|
/**
|
1132
1169
|
* Fetches the component's translations
|
1133
1170
|
*
|
@@ -35,8 +35,10 @@ export class MapLayerPicker {
|
|
35
35
|
this.defaultLayerHonored = false;
|
36
36
|
this.appearance = "transparent";
|
37
37
|
this.defaultLayerId = "";
|
38
|
+
this.display = "inline-block";
|
38
39
|
this.enabledLayerIds = [];
|
39
40
|
this.enabledTableIds = [];
|
41
|
+
this.height = undefined;
|
40
42
|
this.mapView = undefined;
|
41
43
|
this.onlyShowUpdatableLayers = undefined;
|
42
44
|
this.placeholderIcon = "";
|
@@ -91,7 +93,9 @@ export class MapLayerPicker {
|
|
91
93
|
*/
|
92
94
|
render() {
|
93
95
|
const id = "map-layer-picker";
|
94
|
-
|
96
|
+
let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
|
97
|
+
style = Object.assign(Object.assign({}, style), { "display": this.display });
|
98
|
+
return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
|
95
99
|
!this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
|
96
100
|
this.type === "combobox" ? this._getCombobox(id) :
|
97
101
|
this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
|
@@ -228,14 +232,18 @@ export class MapLayerPicker {
|
|
228
232
|
async _setLayers() {
|
229
233
|
if (this.mapView) {
|
230
234
|
await this._initLayerTableHash();
|
231
|
-
const
|
235
|
+
const layerIds = this.onlyShowUpdatableLayers ?
|
232
236
|
this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
|
233
|
-
const
|
237
|
+
const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
|
234
238
|
this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
|
235
239
|
this.ids = [
|
236
|
-
...
|
237
|
-
...
|
240
|
+
...layerIds.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; }),
|
241
|
+
...tableIds.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; }),
|
238
242
|
];
|
243
|
+
this.idsFound.emit({
|
244
|
+
layerIds,
|
245
|
+
tableIds
|
246
|
+
});
|
239
247
|
}
|
240
248
|
}
|
241
249
|
/**
|
@@ -354,6 +362,24 @@ export class MapLayerPicker {
|
|
354
362
|
"reflect": false,
|
355
363
|
"defaultValue": "\"\""
|
356
364
|
},
|
365
|
+
"display": {
|
366
|
+
"type": "string",
|
367
|
+
"mutable": false,
|
368
|
+
"complexType": {
|
369
|
+
"original": "\"inline-flex\" | \"inline-block\"",
|
370
|
+
"resolved": "\"inline-block\" | \"inline-flex\"",
|
371
|
+
"references": {}
|
372
|
+
},
|
373
|
+
"required": false,
|
374
|
+
"optional": false,
|
375
|
+
"docs": {
|
376
|
+
"tags": [],
|
377
|
+
"text": "\"inline-flex\" | \"inline-block\": controls the display style of the dropdown"
|
378
|
+
},
|
379
|
+
"attribute": "display",
|
380
|
+
"reflect": false,
|
381
|
+
"defaultValue": "\"inline-block\""
|
382
|
+
},
|
357
383
|
"enabledLayerIds": {
|
358
384
|
"type": "unknown",
|
359
385
|
"mutable": false,
|
@@ -386,6 +412,23 @@ export class MapLayerPicker {
|
|
386
412
|
},
|
387
413
|
"defaultValue": "[]"
|
388
414
|
},
|
415
|
+
"height": {
|
416
|
+
"type": "number",
|
417
|
+
"mutable": false,
|
418
|
+
"complexType": {
|
419
|
+
"original": "number",
|
420
|
+
"resolved": "number",
|
421
|
+
"references": {}
|
422
|
+
},
|
423
|
+
"required": false,
|
424
|
+
"optional": false,
|
425
|
+
"docs": {
|
426
|
+
"tags": [],
|
427
|
+
"text": "number: optional fixed height value for the control.\r\nSpecified as pixel height."
|
428
|
+
},
|
429
|
+
"attribute": "height",
|
430
|
+
"reflect": false
|
431
|
+
},
|
389
432
|
"mapView": {
|
390
433
|
"type": "unknown",
|
391
434
|
"mutable": false,
|
@@ -541,6 +584,27 @@ export class MapLayerPicker {
|
|
541
584
|
}
|
542
585
|
static get events() {
|
543
586
|
return [{
|
587
|
+
"method": "idsFound",
|
588
|
+
"name": "idsFound",
|
589
|
+
"bubbles": true,
|
590
|
+
"cancelable": true,
|
591
|
+
"composed": true,
|
592
|
+
"docs": {
|
593
|
+
"tags": [],
|
594
|
+
"text": "Emitted on demand when no valid layers are found"
|
595
|
+
},
|
596
|
+
"complexType": {
|
597
|
+
"original": "ILayerAndTableIds",
|
598
|
+
"resolved": "ILayerAndTableIds",
|
599
|
+
"references": {
|
600
|
+
"ILayerAndTableIds": {
|
601
|
+
"location": "import",
|
602
|
+
"path": "../../utils/interfaces",
|
603
|
+
"id": "src/utils/interfaces.ts::ILayerAndTableIds"
|
604
|
+
}
|
605
|
+
}
|
606
|
+
}
|
607
|
+
}, {
|
544
608
|
"method": "noLayersFound",
|
545
609
|
"name": "noLayersFound",
|
546
610
|
"bubbles": true,
|
@@ -108,6 +108,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
|
|
108
108
|
this._layoutMode = ELayoutMode.GRID;
|
109
109
|
this._mapView = undefined;
|
110
110
|
this._panelOpen = true;
|
111
|
+
this._tableOnly = false;
|
111
112
|
}
|
112
113
|
//--------------------------------------------------------------------------
|
113
114
|
//
|
@@ -157,6 +158,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
|
|
157
158
|
// Events (public)
|
158
159
|
//
|
159
160
|
//--------------------------------------------------------------------------
|
161
|
+
/**
|
162
|
+
* Listen for idsFound event to be fired so we can know that all layer ids have been fetched
|
163
|
+
*/
|
164
|
+
async idsFound(evt) {
|
165
|
+
const ids = evt.detail;
|
166
|
+
this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
|
167
|
+
if (this._tableOnly) {
|
168
|
+
this._expandPopup = true;
|
169
|
+
}
|
170
|
+
}
|
160
171
|
/**
|
161
172
|
* Listen for layoutChanged event to be fired so we can adjust the layout
|
162
173
|
*/
|
@@ -354,7 +365,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
|
|
354
365
|
const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
|
355
366
|
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
|
356
367
|
const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 ? "position-absolute-0" : "position-absolute-50";
|
357
|
-
return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, 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", text: "" }), h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)), this._getCardNode())));
|
368
|
+
return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, 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", { disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
|
358
369
|
}
|
359
370
|
/**
|
360
371
|
* Toggle the popup information
|
@@ -514,8 +525,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
|
|
514
525
|
"_translations": [32],
|
515
526
|
"_layoutMode": [32],
|
516
527
|
"_mapView": [32],
|
517
|
-
"_panelOpen": [32]
|
518
|
-
|
528
|
+
"_panelOpen": [32],
|
529
|
+
"_tableOnly": [32]
|
530
|
+
}, [[8, "idsFound", "idsFound"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
|
519
531
|
"defaultCenter": ["defaultCenterWatchHandler"],
|
520
532
|
"defaultGlobalId": ["defaultGlobalIdWatchHandler"],
|
521
533
|
"defaultOid": ["defaultOidWatchHandler"],
|
@@ -325,7 +325,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
|
|
325
325
|
* @returns The dom node that contains the controls
|
326
326
|
*/
|
327
327
|
_getActionBar() {
|
328
|
-
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", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
|
328
|
+
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", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
|
329
329
|
}
|
330
330
|
/**
|
331
331
|
* Get the actions that are used for various interactions with the table
|
@@ -1037,9 +1037,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
|
|
1037
1037
|
* @returns void
|
1038
1038
|
*/
|
1039
1039
|
_initLayerExpressions() {
|
1040
|
-
var _a;
|
1041
|
-
const layerExpressions = (_a = this.mapInfo
|
1042
|
-
this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
|
1040
|
+
var _a, _b;
|
1041
|
+
const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
|
1042
|
+
this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
|
1043
1043
|
}
|
1044
1044
|
/**
|
1045
1045
|
* Select all rows that are not currently selectd
|
@@ -1142,6 +1142,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
|
|
1142
1142
|
fieldInfos.some(fieldInfo => {
|
1143
1143
|
if (fieldInfo.name === columnTemplate.fieldName) {
|
1144
1144
|
columnTemplate.label = fieldInfo.alias;
|
1145
|
+
columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
|
1145
1146
|
return true;
|
1146
1147
|
}
|
1147
1148
|
});
|
@@ -1150,12 +1151,48 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
|
|
1150
1151
|
return {
|
1151
1152
|
type: "field",
|
1152
1153
|
fieldName: fieldInfo.name,
|
1153
|
-
label: fieldInfo.alias
|
1154
|
+
label: fieldInfo.alias,
|
1155
|
+
menuConfig: this._getMenuConfig(fieldInfo.name)
|
1154
1156
|
};
|
1155
1157
|
});
|
1156
1158
|
}
|
1157
1159
|
return columnTemplates;
|
1158
1160
|
}
|
1161
|
+
/**
|
1162
|
+
* Get the menu config that adds the ability to hide the current column
|
1163
|
+
*
|
1164
|
+
* @returns void
|
1165
|
+
* @protected
|
1166
|
+
*/
|
1167
|
+
_getMenuConfig(name) {
|
1168
|
+
return {
|
1169
|
+
items: [
|
1170
|
+
{
|
1171
|
+
label: this._translations.hideField,
|
1172
|
+
iconClass: "esri-icon-non-visible",
|
1173
|
+
autoCloseMenu: true,
|
1174
|
+
clickFunction: () => {
|
1175
|
+
this._handleHideClick(name);
|
1176
|
+
}
|
1177
|
+
}
|
1178
|
+
]
|
1179
|
+
};
|
1180
|
+
}
|
1181
|
+
/**
|
1182
|
+
* Hide the table column for the provided name
|
1183
|
+
*
|
1184
|
+
* @returns void
|
1185
|
+
* @protected
|
1186
|
+
*/
|
1187
|
+
_handleHideClick(name) {
|
1188
|
+
this._columnsInfo[name] = false;
|
1189
|
+
this._table.hideColumn(name);
|
1190
|
+
this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
|
1191
|
+
if (columnTemplate.fieldName === name) {
|
1192
|
+
columnTemplate.visible = false;
|
1193
|
+
}
|
1194
|
+
});
|
1195
|
+
}
|
1159
1196
|
/**
|
1160
1197
|
* Fetches the component's translations
|
1161
1198
|
*
|
@@ -23,12 +23,13 @@ import { d as defineCustomElement$3 } from './option.js';
|
|
23
23
|
import { d as defineCustomElement$2 } from './select.js';
|
24
24
|
import { d as defineCustomElement$1 } from './tooltip.js';
|
25
25
|
|
26
|
-
const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100
|
26
|
+
const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
|
27
27
|
|
28
28
|
const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker extends HTMLElement {
|
29
29
|
constructor() {
|
30
30
|
super();
|
31
31
|
this.__registerHost();
|
32
|
+
this.idsFound = createEvent(this, "idsFound", 7);
|
32
33
|
this.noLayersFound = createEvent(this, "noLayersFound", 7);
|
33
34
|
this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
|
34
35
|
//--------------------------------------------------------------------------
|
@@ -42,8 +43,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
|
|
42
43
|
this.defaultLayerHonored = false;
|
43
44
|
this.appearance = "transparent";
|
44
45
|
this.defaultLayerId = "";
|
46
|
+
this.display = "inline-block";
|
45
47
|
this.enabledLayerIds = [];
|
46
48
|
this.enabledTableIds = [];
|
49
|
+
this.height = undefined;
|
47
50
|
this.mapView = undefined;
|
48
51
|
this.onlyShowUpdatableLayers = undefined;
|
49
52
|
this.placeholderIcon = "";
|
@@ -98,7 +101,9 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
|
|
98
101
|
*/
|
99
102
|
render() {
|
100
103
|
const id = "map-layer-picker";
|
101
|
-
|
104
|
+
let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
|
105
|
+
style = Object.assign(Object.assign({}, style), { "display": this.display });
|
106
|
+
return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
|
102
107
|
!this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
|
103
108
|
this.type === "combobox" ? this._getCombobox(id) :
|
104
109
|
this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
|
@@ -235,14 +240,18 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
|
|
235
240
|
async _setLayers() {
|
236
241
|
if (this.mapView) {
|
237
242
|
await this._initLayerTableHash();
|
238
|
-
const
|
243
|
+
const layerIds = this.onlyShowUpdatableLayers ?
|
239
244
|
this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
|
240
|
-
const
|
245
|
+
const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
|
241
246
|
this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
|
242
247
|
this.ids = [
|
243
|
-
...
|
244
|
-
...
|
248
|
+
...layerIds.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; }),
|
249
|
+
...tableIds.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; }),
|
245
250
|
];
|
251
|
+
this.idsFound.emit({
|
252
|
+
layerIds,
|
253
|
+
tableIds
|
254
|
+
});
|
246
255
|
}
|
247
256
|
}
|
248
257
|
/**
|
@@ -320,8 +329,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
|
|
320
329
|
}, [0, "map-layer-picker", {
|
321
330
|
"appearance": [1],
|
322
331
|
"defaultLayerId": [1, "default-layer-id"],
|
332
|
+
"display": [1],
|
323
333
|
"enabledLayerIds": [16],
|
324
334
|
"enabledTableIds": [16],
|
335
|
+
"height": [2],
|
325
336
|
"mapView": [16],
|
326
337
|
"onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
|
327
338
|
"placeholderIcon": [1, "placeholder-icon"],
|
@@ -1895,11 +1895,12 @@ const DropdownItem = class {
|
|
1895
1895
|
};
|
1896
1896
|
DropdownItem.style = dropdownItemCss;
|
1897
1897
|
|
1898
|
-
const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100
|
1898
|
+
const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
|
1899
1899
|
|
1900
1900
|
const MapLayerPicker = class {
|
1901
1901
|
constructor(hostRef) {
|
1902
1902
|
registerInstance(this, hostRef);
|
1903
|
+
this.idsFound = createEvent(this, "idsFound", 7);
|
1903
1904
|
this.noLayersFound = createEvent(this, "noLayersFound", 7);
|
1904
1905
|
this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
|
1905
1906
|
//--------------------------------------------------------------------------
|
@@ -1913,8 +1914,10 @@ const MapLayerPicker = class {
|
|
1913
1914
|
this.defaultLayerHonored = false;
|
1914
1915
|
this.appearance = "transparent";
|
1915
1916
|
this.defaultLayerId = "";
|
1917
|
+
this.display = "inline-block";
|
1916
1918
|
this.enabledLayerIds = [];
|
1917
1919
|
this.enabledTableIds = [];
|
1920
|
+
this.height = undefined;
|
1918
1921
|
this.mapView = undefined;
|
1919
1922
|
this.onlyShowUpdatableLayers = undefined;
|
1920
1923
|
this.placeholderIcon = "";
|
@@ -1969,7 +1972,9 @@ const MapLayerPicker = class {
|
|
1969
1972
|
*/
|
1970
1973
|
render() {
|
1971
1974
|
const id = "map-layer-picker";
|
1972
|
-
|
1975
|
+
let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
|
1976
|
+
style = Object.assign(Object.assign({}, style), { "display": this.display });
|
1977
|
+
return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
|
1973
1978
|
!this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
|
1974
1979
|
this.type === "combobox" ? this._getCombobox(id) :
|
1975
1980
|
this.type === "select" ? this._getSelect(id) : this._getDropdown(id), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchLayer))))));
|
@@ -2106,14 +2111,18 @@ const MapLayerPicker = class {
|
|
2106
2111
|
async _setLayers() {
|
2107
2112
|
if (this.mapView) {
|
2108
2113
|
await this._initLayerTableHash();
|
2109
|
-
const
|
2114
|
+
const layerIds = this.onlyShowUpdatableLayers ?
|
2110
2115
|
this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
|
2111
|
-
const
|
2116
|
+
const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
|
2112
2117
|
this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
|
2113
2118
|
this.ids = [
|
2114
|
-
...
|
2115
|
-
...
|
2119
|
+
...layerIds.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; }),
|
2120
|
+
...tableIds.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; }),
|
2116
2121
|
];
|
2122
|
+
this.idsFound.emit({
|
2123
|
+
layerIds,
|
2124
|
+
tableIds
|
2125
|
+
});
|
2117
2126
|
}
|
2118
2127
|
}
|
2119
2128
|
/**
|
@@ -378,7 +378,7 @@ const LayerTable = class {
|
|
378
378
|
* @returns The dom node that contains the controls
|
379
379
|
*/
|
380
380
|
_getActionBar() {
|
381
|
-
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", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
|
381
|
+
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", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
|
382
382
|
}
|
383
383
|
/**
|
384
384
|
* Get the actions that are used for various interactions with the table
|
@@ -1090,9 +1090,9 @@ const LayerTable = class {
|
|
1090
1090
|
* @returns void
|
1091
1091
|
*/
|
1092
1092
|
_initLayerExpressions() {
|
1093
|
-
var _a;
|
1094
|
-
const layerExpressions = (_a = this.mapInfo
|
1095
|
-
this._layerExpressions = layerExpressions.filter((exp) => exp.id === this._layer.id);
|
1093
|
+
var _a, _b;
|
1094
|
+
const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
|
1095
|
+
this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
|
1096
1096
|
}
|
1097
1097
|
/**
|
1098
1098
|
* Select all rows that are not currently selectd
|
@@ -1195,6 +1195,7 @@ const LayerTable = class {
|
|
1195
1195
|
fieldInfos.some(fieldInfo => {
|
1196
1196
|
if (fieldInfo.name === columnTemplate.fieldName) {
|
1197
1197
|
columnTemplate.label = fieldInfo.alias;
|
1198
|
+
columnTemplate.menuConfig = this._getMenuConfig(fieldInfo.name);
|
1198
1199
|
return true;
|
1199
1200
|
}
|
1200
1201
|
});
|
@@ -1203,12 +1204,48 @@ const LayerTable = class {
|
|
1203
1204
|
return {
|
1204
1205
|
type: "field",
|
1205
1206
|
fieldName: fieldInfo.name,
|
1206
|
-
label: fieldInfo.alias
|
1207
|
+
label: fieldInfo.alias,
|
1208
|
+
menuConfig: this._getMenuConfig(fieldInfo.name)
|
1207
1209
|
};
|
1208
1210
|
});
|
1209
1211
|
}
|
1210
1212
|
return columnTemplates;
|
1211
1213
|
}
|
1214
|
+
/**
|
1215
|
+
* Get the menu config that adds the ability to hide the current column
|
1216
|
+
*
|
1217
|
+
* @returns void
|
1218
|
+
* @protected
|
1219
|
+
*/
|
1220
|
+
_getMenuConfig(name) {
|
1221
|
+
return {
|
1222
|
+
items: [
|
1223
|
+
{
|
1224
|
+
label: this._translations.hideField,
|
1225
|
+
iconClass: "esri-icon-non-visible",
|
1226
|
+
autoCloseMenu: true,
|
1227
|
+
clickFunction: () => {
|
1228
|
+
this._handleHideClick(name);
|
1229
|
+
}
|
1230
|
+
}
|
1231
|
+
]
|
1232
|
+
};
|
1233
|
+
}
|
1234
|
+
/**
|
1235
|
+
* Hide the table column for the provided name
|
1236
|
+
*
|
1237
|
+
* @returns void
|
1238
|
+
* @protected
|
1239
|
+
*/
|
1240
|
+
_handleHideClick(name) {
|
1241
|
+
this._columnsInfo[name] = false;
|
1242
|
+
this._table.hideColumn(name);
|
1243
|
+
this._table.tableTemplate.columnTemplates.forEach((columnTemplate) => {
|
1244
|
+
if (columnTemplate.fieldName === name) {
|
1245
|
+
columnTemplate.visible = false;
|
1246
|
+
}
|
1247
|
+
});
|
1248
|
+
}
|
1212
1249
|
/**
|
1213
1250
|
* Fetches the component's translations
|
1214
1251
|
*
|