@esri/solutions-components 5.1.0-next.70 → 5.1.0-next.72
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/cdn/{CQWUX3VC.js → 5IQSXZTR.js} +1 -1
- package/dist/cdn/JNLWJUWX.js +2 -0
- package/dist/cdn/{3IZ3M36C.js → TZ64DKVD.js} +1 -1
- package/dist/cdn/assets/solution-builder-assistant/t9n/messages.en.json +1 -1
- package/dist/cdn/assets/solution-builder-assistant/t9n/messages.json +1 -1
- package/dist/cdn/index.js +1 -1
- package/dist/components/solution-builder-assistant/customElement.d.ts +48 -0
- package/dist/components/solution-builder-assistant/customElement.js +411 -61
- package/dist/components/solution-builder-assistant/index.js +8 -0
- package/dist/docs/api.json +1 -1
- package/dist/docs/docs.json +1 -1
- package/dist/docs/web-types.json +1 -1
- package/dist/solutions-components_commit.txt +8 -5
- package/dist/utils/interfaces.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cdn/N4UM4VM2.js +0 -2
|
@@ -1,50 +1,50 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
|
|
2
|
-
import { c as
|
|
3
|
-
import { css as
|
|
4
|
-
import { keyed as
|
|
5
|
-
import { u as
|
|
6
|
-
import { LitElement as
|
|
7
|
-
import { useContextConsumer as
|
|
8
|
-
import { b as
|
|
9
|
-
const
|
|
10
|
-
class
|
|
2
|
+
import { c as g } from "../../chunks/runtime.js";
|
|
3
|
+
import { css as u, html as n } from "lit";
|
|
4
|
+
import { keyed as _ } from "lit/directives/keyed.js";
|
|
5
|
+
import { u as m } from "../../chunks/useT9n.js";
|
|
6
|
+
import { LitElement as y, nothing as d } from "@arcgis/lumina";
|
|
7
|
+
import { useContextConsumer as b } from "@arcgis/lumina/context";
|
|
8
|
+
import { b as v } from "../../chunks/deployAppContexts.js";
|
|
9
|
+
const F = u`.builder-content{display:flex;flex-direction:column;flex:1;overflow:auto}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--calcite-spacing-xxl);text-align:center;color:var(--calcite-color-text-3)}.empty-state calcite-icon{margin-bottom:var(--calcite-spacing-md);color:var(--calcite-color-text-3)}.empty-state p{margin:0;font-size:var(--calcite-font-size--1)}.header-container{display:flex;align-items:stretch;gap:var(--calcite-spacing-lg);padding-bottom:var(--calcite-spacing-lg)}.header-container calcite-notice{flex:1;margin:0}calcite-action-bar{flex-shrink:0;background:var(--calcite-color-brand);border-left:1px solid var(--calcite-color-brand-dark)}.content-container{display:flex;gap:var(--calcite-spacing-xl);margin-bottom:var(--calcite-spacing-lg)}.solution-item-section{flex:1;min-width:0;background:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-lg)}.solution-item-inputs{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.thumbnail-inputs-row{display:flex;gap:var(--calcite-spacing-md);align-items:flex-start}.thumbnail-container{flex-shrink:0;width:253px;aspect-ratio:200 / 133;border:1px solid var(--calcite-color-border-2);border-radius:var(--calcite-border-radius);overflow:hidden;background:var(--calcite-color-foreground-2)}.thumbnail-container img{width:100%;height:100%;object-fit:cover}.stacked-inputs{flex:1;display:flex;flex-direction:column;gap:var(--calcite-spacing-md);min-width:0}.stacked-inputs calcite-label{min-width:0}.stacked-inputs calcite-input-text,.stacked-inputs calcite-text-area{width:100%;max-width:100%;min-width:0;box-sizing:border-box}.stacked-inputs calcite-text-area{max-height:150px}.tags-row{width:100%;min-width:0}.tags-row calcite-combobox{width:100%}.actions-section{flex-shrink:0;width:200px;background:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-lg)}.action-buttons{display:flex;flex-direction:column;gap:var(--calcite-spacing-md)}.tabs-section{flex:1;display:flex;flex-direction:column;min-height:0}.tabs-section calcite-tabs{height:100%}.tabs-section calcite-tab{--calcite-tab-content-block-padding: 0}.feature-layer-tab{padding:var(--calcite-spacing-lg)}calcite-flow{--calcite-flow-background-color: var(--calcite-color-foreground-1);display:block;margin:0;padding:0}calcite-flow-item{--calcite-flow-item-content-padding: 0}.layer-selector-container{display:flex;gap:var(--calcite-spacing-md);align-items:end}.layer-selector-container calcite-label{flex:1;min-width:0;margin-bottom:0}.layer-selector-container calcite-combobox{width:100%}.layer-selector-container>calcite-button{flex-shrink:0;margin-bottom:var(--calcite-spacing-md)}.layer-properties-container{display:flex;gap:var(--calcite-spacing-md);margin-top:var(--calcite-spacing-lg)}.layer-properties-container calcite-label{flex:1;min-width:0}.layer-properties-container calcite-input-text,.layer-properties-container calcite-combobox{width:100%}.layer-description-container{margin-top:var(--calcite-spacing-lg)}.layer-description-container calcite-text-area{width:100%;max-height:150px}.fields-section{margin-top:var(--calcite-spacing-xl)}.fields-section calcite-table-cell:last-child{text-align:center;display:flex;justify-content:center;align-items:center}.field-type-cell{display:flex;align-items:center;gap:var(--calcite-spacing-xs)}.domain-cell-content{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--calcite-spacing-sm)}.domain-cell-content calcite-icon{cursor:pointer;color:var(--calcite-color-text-3);flex-shrink:0}.domain-cell-content calcite-icon:hover{color:var(--calcite-color-brand)}.choice-list-tooltip{margin:0;padding-left:var(--calcite-spacing-lg);list-style-type:disc}.choice-list-tooltip li{padding:var(--calcite-spacing-xxs) 0}.fields-section calcite-table calcite-icon{cursor:pointer;color:var(--calcite-color-text-3)}.fields-section calcite-table calcite-icon:hover{color:var(--calcite-color-brand)}.add-field-button{margin-top:var(--calcite-spacing-md)}.add-layer-button{margin-top:var(--calcite-spacing-md);margin-bottom:var(--calcite-spacing-sm)}.system-fields-note{display:flex;align-items:center;gap:var(--calcite-spacing-xs);margin-top:var(--calcite-spacing-md);font-size:var(--calcite-font-size--2);color:var(--calcite-color-text-3)}.system-fields-note span{margin-top:2px}.info-icon-blue{--calcite-icon-color: var(--calcite-color-brand);flex-shrink:0;cursor:default}.domain-section{margin-top:var(--calcite-spacing-lg)}.domain-list{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm)}.domain-item{display:flex;align-items:center;gap:var(--calcite-spacing-sm);padding:var(--calcite-spacing-xs);background:var(--calcite-color-foreground-1);border:1px solid var(--calcite-color-border-2);border-radius:var(--calcite-border-radius);cursor:move}.domain-item:hover{background:var(--calcite-color-foreground-2)}.domain-item .drag-handle{color:var(--calcite-color-text-3);cursor:grab;flex-shrink:0}.domain-item .drag-handle:active{cursor:grabbing}.domain-item calcite-input-text{flex:1;min-width:0}.domain-item calcite-button{flex-shrink:0}.popover-content{padding:var(--calcite-spacing-lg);min-width:300px}.popover-field{margin-top:var(--calcite-spacing-md)}.popover-actions{display:flex;justify-content:flex-end;gap:var(--calcite-spacing-sm);margin-top:var(--calcite-spacing-lg)}`;
|
|
10
|
+
class $ extends y {
|
|
11
11
|
constructor() {
|
|
12
|
-
super(), this.design = null, this._design = null, this._translations =
|
|
13
|
-
context:
|
|
12
|
+
super(), this.design = null, this._design = null, this._translations = m({ name: "solution-builder-assistant", blocking: !0 }), this._isDirty = !1, this._openPopoverId = null, this._editingItemTitle = "", this._editingItemDescription = "", this._selectedLayerIndex = 0, this._isAddingLayer = !1, this._newLayerName = "", this._newLayerType = "Point", this._newLayerDescription = "", this._isEditingField = !1, this._editingFieldIndex = -1, this._editingFieldType = null, this._editingFieldDisplayName = "", this._editingFieldName = "", this._editingFieldDescription = "", this._editingFieldTypeValue = "string", this._editingFieldLength = 255, this._editingFieldChoiceList = null, this._isAddingNewField = !1, this._newFieldDisplayName = "", this._newFieldName = "", this._newFieldDescription = "", this._newFieldType = "string", this._newFieldLength = 255, this._newFieldChoiceList = null, this._designContextConsumer = b({
|
|
13
|
+
context: v,
|
|
14
14
|
subscribe: !0,
|
|
15
|
-
callback: (
|
|
16
|
-
|
|
15
|
+
callback: (e) => {
|
|
16
|
+
e?.design && (this._design = e.design);
|
|
17
17
|
}
|
|
18
18
|
}), this._handleUndo = () => {
|
|
19
19
|
console.log("Undo clicked - to be implemented");
|
|
20
20
|
}, this._handleRedo = () => {
|
|
21
21
|
console.log("Redo clicked - to be implemented");
|
|
22
|
-
}, this._handleTitleChange = (
|
|
22
|
+
}, this._handleTitleChange = (e) => {
|
|
23
23
|
if (!this._design)
|
|
24
24
|
return;
|
|
25
25
|
const i = {
|
|
26
26
|
...this._design,
|
|
27
27
|
solution: {
|
|
28
28
|
...this._design.solution,
|
|
29
|
-
title:
|
|
29
|
+
title: e
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
32
|
this._design = i, this._isDirty = !0;
|
|
33
|
-
}, this._handleDescriptionChange = (
|
|
33
|
+
}, this._handleDescriptionChange = (e) => {
|
|
34
34
|
if (!this._design)
|
|
35
35
|
return;
|
|
36
36
|
const i = {
|
|
37
37
|
...this._design,
|
|
38
38
|
solution: {
|
|
39
39
|
...this._design.solution,
|
|
40
|
-
description:
|
|
40
|
+
description: e
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
this._design = i, this._isDirty = !0;
|
|
44
|
-
}, this._handleTagsChange = (
|
|
44
|
+
}, this._handleTagsChange = (e) => {
|
|
45
45
|
if (!this._design)
|
|
46
46
|
return;
|
|
47
|
-
const i = Array.from(
|
|
47
|
+
const i = Array.from(e.target.selectedItems).map((t) => t.value);
|
|
48
48
|
this._design = {
|
|
49
49
|
...this._design,
|
|
50
50
|
solution: {
|
|
@@ -52,86 +52,436 @@ class v extends u {
|
|
|
52
52
|
tags: i
|
|
53
53
|
}
|
|
54
54
|
}, this._isDirty = !0;
|
|
55
|
-
}, this._handleItemPopoverOpen = (
|
|
56
|
-
this._openPopoverId =
|
|
55
|
+
}, this._handleItemPopoverOpen = (e) => {
|
|
56
|
+
this._openPopoverId = e.id, this._editingItemTitle = e.title || "", this._editingItemDescription = e.description || "", this.requestUpdate();
|
|
57
57
|
}, this._handleCloseItemPopover = () => {
|
|
58
58
|
this._openPopoverId = null, this._editingItemTitle = "", this._editingItemDescription = "";
|
|
59
|
-
}, this._handleClosePopover = async (
|
|
60
|
-
const i = this.renderRoot.querySelector(`#${
|
|
59
|
+
}, this._handleClosePopover = async (e) => {
|
|
60
|
+
const i = this.renderRoot.querySelector(`#${e}`);
|
|
61
61
|
i && (i.open = !1, await i.updateComplete), this._handleCloseItemPopover();
|
|
62
|
-
}, this._handleApplyItemChanges = (
|
|
62
|
+
}, this._handleApplyItemChanges = (e) => {
|
|
63
63
|
if (!this._design)
|
|
64
64
|
return;
|
|
65
|
-
const i = this._design.items.map((
|
|
65
|
+
const i = this._design.items.map((a) => a.id === e ? { ...a, title: this._editingItemTitle, description: this._editingItemDescription } : a), t = {
|
|
66
66
|
...this._design,
|
|
67
67
|
items: i
|
|
68
68
|
};
|
|
69
|
-
this._design =
|
|
69
|
+
this._design = t, this._isDirty = !0;
|
|
70
|
+
}, this._handleLayerSelect = (e) => {
|
|
71
|
+
const i = e.target.selectedItems[0];
|
|
72
|
+
i && (this._selectedLayerIndex = parseInt(i.value, 10));
|
|
73
|
+
}, this._handleAddLayer = () => {
|
|
74
|
+
this._isAddingLayer = !0;
|
|
75
|
+
}, this._handleAddLayerBack = () => {
|
|
76
|
+
this._isAddingLayer = !1, this._newLayerName = "", this._newLayerType = "Point", this._newLayerDescription = "";
|
|
77
|
+
}, this._handleAddLayerDone = () => {
|
|
78
|
+
if (!this._design || !this._newLayerName.trim())
|
|
79
|
+
return;
|
|
80
|
+
const e = this._design.featureLayer?.layers || [], i = {
|
|
81
|
+
id: Date.now(),
|
|
82
|
+
// Use timestamp as temporary ID
|
|
83
|
+
type: this._newLayerType,
|
|
84
|
+
name: this._newLayerName,
|
|
85
|
+
description: this._newLayerDescription,
|
|
86
|
+
customFields: [],
|
|
87
|
+
requiredFields: [],
|
|
88
|
+
systemFields: [
|
|
89
|
+
{
|
|
90
|
+
name: "objectid",
|
|
91
|
+
type: "oid",
|
|
92
|
+
alias: "ObjectID",
|
|
93
|
+
description: "Unique identifier for each record in the dataset."
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
name: "globalid",
|
|
97
|
+
type: "globalid",
|
|
98
|
+
alias: "GlobalID",
|
|
99
|
+
description: "Globally unique identifier for the record."
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
name: "created_date",
|
|
103
|
+
type: "date",
|
|
104
|
+
alias: "Created On",
|
|
105
|
+
description: "Date when the record was created."
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
name: "created_user",
|
|
109
|
+
type: "string",
|
|
110
|
+
alias: "Created By",
|
|
111
|
+
description: "User who created the record.",
|
|
112
|
+
choiceList: null,
|
|
113
|
+
length: 255
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
name: "last_edited_date",
|
|
117
|
+
type: "date",
|
|
118
|
+
alias: "Last Edited On",
|
|
119
|
+
description: "Date when the record was last edited."
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
name: "last_edited_user",
|
|
123
|
+
type: "string",
|
|
124
|
+
alias: "Last Edited By",
|
|
125
|
+
description: "User who last edited the record.",
|
|
126
|
+
choiceList: null,
|
|
127
|
+
length: 255
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
};
|
|
131
|
+
this._design = {
|
|
132
|
+
...this._design,
|
|
133
|
+
featureLayer: {
|
|
134
|
+
...this._design.featureLayer,
|
|
135
|
+
layers: [...e, i]
|
|
136
|
+
}
|
|
137
|
+
}, this._selectedLayerIndex = e.length, this._isDirty = !0, this._isAddingLayer = !1, this._newLayerName = "", this._newLayerType = "Point", this._newLayerDescription = "";
|
|
138
|
+
}, this._handleNewLayerNameChange = (e) => {
|
|
139
|
+
this._newLayerName = e;
|
|
140
|
+
}, this._handleNewLayerTypeChange = (e) => {
|
|
141
|
+
const i = e.target.selectedItems[0];
|
|
142
|
+
i && (this._newLayerType = i.value);
|
|
143
|
+
}, this._handleNewLayerDescriptionChange = (e) => {
|
|
144
|
+
this._newLayerDescription = e;
|
|
145
|
+
}, this._handleAddField = () => {
|
|
146
|
+
this._newFieldDisplayName = "", this._newFieldName = "", this._newFieldDescription = "", this._newFieldType = "string", this._newFieldLength = 255, this._isAddingNewField = !0, this._scrollFeatureLayerTabToTop();
|
|
147
|
+
}, this._handleAddFieldBack = () => {
|
|
148
|
+
this._isAddingNewField = !1, this._newFieldDisplayName = "", this._newFieldName = "", this._newFieldDescription = "", this._newFieldType = "string", this._newFieldLength = 255, this._newFieldChoiceList = null;
|
|
149
|
+
}, this._handleAddFieldDone = () => {
|
|
150
|
+
if (!this._design)
|
|
151
|
+
return;
|
|
152
|
+
const e = this._design.featureLayer?.layers || [], i = e[this._selectedLayerIndex];
|
|
153
|
+
if (!i || !this._newFieldName.trim())
|
|
154
|
+
return;
|
|
155
|
+
const t = {
|
|
156
|
+
name: this._newFieldName,
|
|
157
|
+
type: this._newFieldType,
|
|
158
|
+
alias: this._newFieldDisplayName || this._newFieldName,
|
|
159
|
+
description: this._newFieldDescription,
|
|
160
|
+
choiceList: this._newFieldChoiceList && this._newFieldChoiceList.length > 0 ? this._newFieldChoiceList : null
|
|
161
|
+
};
|
|
162
|
+
this._newFieldType === "string" && (t.length = this._newFieldLength);
|
|
163
|
+
const a = [...i.customFields || [], t], c = e.map((s, o) => o === this._selectedLayerIndex ? { ...s, customFields: a } : s);
|
|
164
|
+
this._design = {
|
|
165
|
+
...this._design,
|
|
166
|
+
featureLayer: {
|
|
167
|
+
...this._design.featureLayer,
|
|
168
|
+
layers: c
|
|
169
|
+
}
|
|
170
|
+
}, this._isDirty = !0, this._handleAddFieldBack();
|
|
171
|
+
}, this._handleNewFieldTypeChange = (e) => {
|
|
172
|
+
const i = e.target.selectedItems[0];
|
|
173
|
+
i && (this._newFieldType = i.value);
|
|
174
|
+
}, this._handleEditField = (e, i) => {
|
|
175
|
+
const a = (this._design?.featureLayer?.layers || [])[this._selectedLayerIndex];
|
|
176
|
+
if (!a)
|
|
177
|
+
return;
|
|
178
|
+
const c = a.customFields || [], s = a.requiredFields || [];
|
|
179
|
+
if (e < c.length)
|
|
180
|
+
this._editingFieldType = "custom", this._editingFieldIndex = e;
|
|
181
|
+
else {
|
|
182
|
+
const o = e - c.length;
|
|
183
|
+
if (o >= s.length)
|
|
184
|
+
return;
|
|
185
|
+
this._editingFieldType = "required", this._editingFieldIndex = o;
|
|
186
|
+
}
|
|
187
|
+
this._editingFieldDisplayName = i.alias || "", this._editingFieldName = i.name || "", this._editingFieldDescription = i.description || "", this._editingFieldTypeValue = i.type || "string", this._editingFieldLength = i.length || 255, this._editingFieldChoiceList = i.choiceList ? [...i.choiceList] : null, this._isEditingField = !0, this._scrollFeatureLayerTabToTop();
|
|
188
|
+
}, this._handleEditFieldBack = () => {
|
|
189
|
+
this._isEditingField = !1, this._editingFieldIndex = -1, this._editingFieldType = null, this._editingFieldDisplayName = "", this._editingFieldName = "", this._editingFieldDescription = "", this._editingFieldTypeValue = "string", this._editingFieldLength = 255, this._editingFieldChoiceList = null;
|
|
190
|
+
}, this._handleEditFieldTypeChange = (e) => {
|
|
191
|
+
const i = e.target.selectedItems[0];
|
|
192
|
+
i && (this._editingFieldTypeValue = i.value);
|
|
193
|
+
}, this._handleAddEditFieldChoice = () => {
|
|
194
|
+
this._editingFieldChoiceList ? this._editingFieldChoiceList = [...this._editingFieldChoiceList, ""] : this._editingFieldChoiceList = [""];
|
|
195
|
+
}, this._handleRemoveEditFieldChoice = (e) => {
|
|
196
|
+
this._editingFieldChoiceList && (this._editingFieldChoiceList = this._editingFieldChoiceList.filter((i, t) => t !== e), this._editingFieldChoiceList.length === 0 && (this._editingFieldChoiceList = null));
|
|
197
|
+
}, this._handleUpdateEditFieldChoice = (e, i) => {
|
|
198
|
+
if (!this._editingFieldChoiceList)
|
|
199
|
+
return;
|
|
200
|
+
const t = [...this._editingFieldChoiceList];
|
|
201
|
+
t[e] = i, this._editingFieldChoiceList = t;
|
|
202
|
+
}, this._handleEditFieldChoiceDragStart = (e, i) => {
|
|
203
|
+
i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", e.toString());
|
|
204
|
+
}, this._handleEditFieldChoiceDrop = (e, i) => {
|
|
205
|
+
if (i.preventDefault(), !this._editingFieldChoiceList)
|
|
206
|
+
return;
|
|
207
|
+
const t = parseInt(i.dataTransfer.getData("text/plain"));
|
|
208
|
+
if (t === e)
|
|
209
|
+
return;
|
|
210
|
+
const a = [...this._editingFieldChoiceList], c = a[t];
|
|
211
|
+
a.splice(t, 1), a.splice(e, 0, c), this._editingFieldChoiceList = a;
|
|
212
|
+
}, this._handleAddNewFieldChoice = () => {
|
|
213
|
+
this._newFieldChoiceList ? this._newFieldChoiceList = [...this._newFieldChoiceList, ""] : this._newFieldChoiceList = [""];
|
|
214
|
+
}, this._handleRemoveNewFieldChoice = (e) => {
|
|
215
|
+
this._newFieldChoiceList && (this._newFieldChoiceList = this._newFieldChoiceList.filter((i, t) => t !== e), this._newFieldChoiceList.length === 0 && (this._newFieldChoiceList = null));
|
|
216
|
+
}, this._handleUpdateNewFieldChoice = (e, i) => {
|
|
217
|
+
if (!this._newFieldChoiceList)
|
|
218
|
+
return;
|
|
219
|
+
const t = [...this._newFieldChoiceList];
|
|
220
|
+
t[e] = i, this._newFieldChoiceList = t;
|
|
221
|
+
}, this._handleNewFieldChoiceDragStart = (e, i) => {
|
|
222
|
+
i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", e.toString());
|
|
223
|
+
}, this._handleNewFieldChoiceDrop = (e, i) => {
|
|
224
|
+
if (i.preventDefault(), !this._newFieldChoiceList)
|
|
225
|
+
return;
|
|
226
|
+
const t = parseInt(i.dataTransfer.getData("text/plain"));
|
|
227
|
+
if (t === e)
|
|
228
|
+
return;
|
|
229
|
+
const a = [...this._newFieldChoiceList], c = a[t];
|
|
230
|
+
a.splice(t, 1), a.splice(e, 0, c), this._newFieldChoiceList = a;
|
|
231
|
+
}, this._handleDeleteField = () => {
|
|
232
|
+
if (!this._design || this._editingFieldType !== "custom")
|
|
233
|
+
return;
|
|
234
|
+
const e = this._design.featureLayer?.layers || [];
|
|
235
|
+
if (this._selectedLayerIndex >= e.length)
|
|
236
|
+
return;
|
|
237
|
+
const t = [...e[this._selectedLayerIndex].customFields || []];
|
|
238
|
+
t.splice(this._editingFieldIndex, 1);
|
|
239
|
+
const a = e.map((c, s) => s === this._selectedLayerIndex ? { ...c, customFields: t } : c);
|
|
240
|
+
this._design = {
|
|
241
|
+
...this._design,
|
|
242
|
+
featureLayer: {
|
|
243
|
+
...this._design.featureLayer,
|
|
244
|
+
layers: a
|
|
245
|
+
}
|
|
246
|
+
}, this._isDirty = !0, this._handleEditFieldBack();
|
|
247
|
+
}, this._handleApplyFieldChanges = () => {
|
|
248
|
+
if (!this._design || !this._editingFieldType)
|
|
249
|
+
return;
|
|
250
|
+
const e = this._design.featureLayer?.layers || [];
|
|
251
|
+
if (this._selectedLayerIndex >= e.length)
|
|
252
|
+
return;
|
|
253
|
+
const i = e[this._selectedLayerIndex];
|
|
254
|
+
if (this._editingFieldType === "custom") {
|
|
255
|
+
const t = [...i.customFields || []];
|
|
256
|
+
t[this._editingFieldIndex] = {
|
|
257
|
+
...t[this._editingFieldIndex],
|
|
258
|
+
alias: this._editingFieldDisplayName,
|
|
259
|
+
name: this._editingFieldName,
|
|
260
|
+
description: this._editingFieldDescription,
|
|
261
|
+
type: this._editingFieldTypeValue,
|
|
262
|
+
choiceList: this._editingFieldChoiceList && this._editingFieldChoiceList.length > 0 ? this._editingFieldChoiceList : null,
|
|
263
|
+
length: this._editingFieldTypeValue === "string" ? this._editingFieldLength : void 0
|
|
264
|
+
};
|
|
265
|
+
const a = e.map((c, s) => s === this._selectedLayerIndex ? { ...c, customFields: t } : c);
|
|
266
|
+
this._design = {
|
|
267
|
+
...this._design,
|
|
268
|
+
featureLayer: {
|
|
269
|
+
...this._design.featureLayer,
|
|
270
|
+
layers: a
|
|
271
|
+
}
|
|
272
|
+
};
|
|
273
|
+
} else if (this._editingFieldType === "required") {
|
|
274
|
+
const t = [...i.requiredFields || []];
|
|
275
|
+
t[this._editingFieldIndex] = {
|
|
276
|
+
...t[this._editingFieldIndex],
|
|
277
|
+
alias: this._editingFieldDisplayName,
|
|
278
|
+
description: this._editingFieldDescription
|
|
279
|
+
};
|
|
280
|
+
const a = e.map((c, s) => s === this._selectedLayerIndex ? { ...c, requiredFields: t } : c);
|
|
281
|
+
this._design = {
|
|
282
|
+
...this._design,
|
|
283
|
+
featureLayer: {
|
|
284
|
+
...this._design.featureLayer,
|
|
285
|
+
layers: a
|
|
286
|
+
}
|
|
287
|
+
};
|
|
288
|
+
}
|
|
289
|
+
this._isDirty = !0, this._handleEditFieldBack();
|
|
290
|
+
}, this._handleLayerNameChange = (e) => {
|
|
291
|
+
if (!this._design)
|
|
292
|
+
return;
|
|
293
|
+
const i = this._design.featureLayer?.layers || [];
|
|
294
|
+
if (this._selectedLayerIndex >= i.length)
|
|
295
|
+
return;
|
|
296
|
+
const t = i.map((a, c) => c === this._selectedLayerIndex ? { ...a, name: e } : a);
|
|
297
|
+
this._design = {
|
|
298
|
+
...this._design,
|
|
299
|
+
featureLayer: {
|
|
300
|
+
...this._design.featureLayer,
|
|
301
|
+
layers: t
|
|
302
|
+
}
|
|
303
|
+
}, this._isDirty = !0;
|
|
304
|
+
}, this._handleLayerTypeChange = (e) => {
|
|
305
|
+
if (!this._design)
|
|
306
|
+
return;
|
|
307
|
+
const i = e.target.selectedItems[0];
|
|
308
|
+
if (!i)
|
|
309
|
+
return;
|
|
310
|
+
const t = this._design.featureLayer?.layers || [];
|
|
311
|
+
if (this._selectedLayerIndex >= t.length)
|
|
312
|
+
return;
|
|
313
|
+
const a = i.value, c = t.map((s, o) => o === this._selectedLayerIndex ? { ...s, type: a } : s);
|
|
314
|
+
this._design = {
|
|
315
|
+
...this._design,
|
|
316
|
+
featureLayer: {
|
|
317
|
+
...this._design.featureLayer,
|
|
318
|
+
layers: c
|
|
319
|
+
}
|
|
320
|
+
}, this._isDirty = !0;
|
|
321
|
+
}, this._handleLayerDescriptionChange = (e) => {
|
|
322
|
+
if (!this._design)
|
|
323
|
+
return;
|
|
324
|
+
const i = this._design.featureLayer?.layers || [];
|
|
325
|
+
if (this._selectedLayerIndex >= i.length)
|
|
326
|
+
return;
|
|
327
|
+
const t = i.map((a, c) => c === this._selectedLayerIndex ? { ...a, description: e } : a);
|
|
328
|
+
this._design = {
|
|
329
|
+
...this._design,
|
|
330
|
+
featureLayer: {
|
|
331
|
+
...this._design.featureLayer,
|
|
332
|
+
layers: t
|
|
333
|
+
}
|
|
334
|
+
}, this._isDirty = !0;
|
|
335
|
+
}, this._handleRemoveLayer = () => {
|
|
336
|
+
if (!this._design)
|
|
337
|
+
return;
|
|
338
|
+
const e = this._design.featureLayer?.layers || [];
|
|
339
|
+
if (this._selectedLayerIndex >= e.length)
|
|
340
|
+
return;
|
|
341
|
+
const i = e.filter((t, a) => a !== this._selectedLayerIndex);
|
|
342
|
+
this._design = {
|
|
343
|
+
...this._design,
|
|
344
|
+
featureLayer: {
|
|
345
|
+
...this._design.featureLayer,
|
|
346
|
+
layers: i
|
|
347
|
+
}
|
|
348
|
+
}, this._selectedLayerIndex >= i.length && (this._selectedLayerIndex = Math.max(0, i.length - 1)), this._isDirty = !0, this._scrollFeatureLayerTabToTop();
|
|
70
349
|
}, this._handleDeploy = async () => {
|
|
71
350
|
this._design && console.log("Deploy design:", this._design);
|
|
72
351
|
}, this._designContextConsumer;
|
|
73
352
|
}
|
|
74
353
|
static {
|
|
75
|
-
this.properties = { design: [1, { type: Object }], _design: 16, _translations: 16, _isDirty: 16, _openPopoverId: 16, _editingItemTitle: 16, _editingItemDescription: 16 };
|
|
354
|
+
this.properties = { design: [1, { type: Object }], _design: 16, _translations: 16, _isDirty: 16, _openPopoverId: 16, _editingItemTitle: 16, _editingItemDescription: 16, _selectedLayerIndex: 16, _isAddingLayer: 16, _newLayerName: 16, _newLayerType: 16, _newLayerDescription: 16, _isEditingField: 16, _editingFieldIndex: 16, _editingFieldType: 16, _editingFieldDisplayName: 16, _editingFieldName: 16, _editingFieldDescription: 16, _editingFieldTypeValue: 16, _editingFieldLength: 16, _editingFieldChoiceList: 16, _isAddingNewField: 16, _newFieldDisplayName: 16, _newFieldName: 16, _newFieldDescription: 16, _newFieldType: 16, _newFieldLength: 16, _newFieldChoiceList: 16 };
|
|
76
355
|
}
|
|
77
356
|
static {
|
|
78
|
-
this.styles =
|
|
357
|
+
this.styles = F;
|
|
79
358
|
}
|
|
80
|
-
willUpdate(
|
|
81
|
-
|
|
359
|
+
willUpdate(e) {
|
|
360
|
+
e.has("design") && (this._design = this.design);
|
|
82
361
|
}
|
|
83
362
|
render() {
|
|
84
|
-
return this._translations ? this._design ?
|
|
363
|
+
return this._translations ? this._design ? n`<calcite-panel><div class="header-container">${this._renderNoticeBar()}${this._renderActionBar()}</div><div class="builder-content">${this._renderMainContent()}${this._renderTabsSection()}</div></calcite-panel>` : this._renderEmptyState() : n`<div>Loading...</div>`;
|
|
364
|
+
}
|
|
365
|
+
_getLayerTypeIcon(e) {
|
|
366
|
+
switch (e) {
|
|
367
|
+
case "Point":
|
|
368
|
+
return "point";
|
|
369
|
+
case "Polyline":
|
|
370
|
+
return "line";
|
|
371
|
+
case "Polygon":
|
|
372
|
+
return "polygon";
|
|
373
|
+
case "Table":
|
|
374
|
+
return "table";
|
|
375
|
+
default:
|
|
376
|
+
return "layer";
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
_getFieldTypeIcon(e) {
|
|
380
|
+
switch (e) {
|
|
381
|
+
case "string":
|
|
382
|
+
return "string";
|
|
383
|
+
case "integer":
|
|
384
|
+
return "integer";
|
|
385
|
+
case "double":
|
|
386
|
+
return "number";
|
|
387
|
+
case "date":
|
|
388
|
+
return "date-time";
|
|
389
|
+
case "oid":
|
|
390
|
+
case "globalid":
|
|
391
|
+
case "guid":
|
|
392
|
+
return "key";
|
|
393
|
+
default:
|
|
394
|
+
return "key";
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
_formatFieldType(e) {
|
|
398
|
+
const t = {
|
|
399
|
+
string: "String",
|
|
400
|
+
integer: "Integer",
|
|
401
|
+
double: "Double",
|
|
402
|
+
date: "Date",
|
|
403
|
+
guid: "GUID",
|
|
404
|
+
globalid: "GlobalID",
|
|
405
|
+
oid: "ObjectID"
|
|
406
|
+
}[e.type] || e.type;
|
|
407
|
+
return e.type === "string" && e.length ? `${t} (${e.length})` : t;
|
|
408
|
+
}
|
|
409
|
+
_getSystemFieldsList(e) {
|
|
410
|
+
return (e.systemFields || []).map((t) => t.name).join(", ");
|
|
411
|
+
}
|
|
412
|
+
_shouldShowRemoveLayerButton(e) {
|
|
413
|
+
return !e || !this._design?.featureLayer ? !1 : e.id && e.id > 1e3;
|
|
414
|
+
}
|
|
415
|
+
_scrollFeatureLayerTabToTop() {
|
|
416
|
+
requestAnimationFrame(() => {
|
|
417
|
+
const e = this.el.shadowRoot?.querySelector("calcite-tab[selected]");
|
|
418
|
+
e?.shadowRoot && e.shadowRoot.querySelector(".container")?.scrollTo({ top: 0, behavior: "smooth" });
|
|
419
|
+
});
|
|
420
|
+
}
|
|
421
|
+
_renderFieldRows(e) {
|
|
422
|
+
const i = [
|
|
423
|
+
...e.customFields || [],
|
|
424
|
+
...e.requiredFields || []
|
|
425
|
+
], t = [];
|
|
426
|
+
return i.forEach((a, c) => {
|
|
427
|
+
const s = this._getFieldTypeIcon(a.type), o = this._formatFieldType(a), l = `field-domain-info-${c}`;
|
|
428
|
+
let h, r = !1;
|
|
429
|
+
a.choiceList && Array.isArray(a.choiceList) ? (r = !0, h = n`<div class="domain-cell-content"><span>List (${a.choiceList.length})</span><calcite-icon id=${l ?? d} icon=information scale=s></calcite-icon></div>`) : h = null, t.push(n`<calcite-table-row><calcite-table-cell>${a.alias}</calcite-table-cell><calcite-table-cell>${a.name}</calcite-table-cell><calcite-table-cell><div class="field-type-cell"><calcite-icon .icon=${s} scale=s></calcite-icon><span>${o}</span></div></calcite-table-cell><calcite-table-cell>${h}</calcite-table-cell><calcite-table-cell><calcite-icon icon=pencil scale=s @click=${() => this._handleEditField(c, a)}></calcite-icon></calcite-table-cell></calcite-table-row>`), r && t.push(n`<calcite-tooltip .referenceElement=${l} placement=left><ul class="choice-list-tooltip">${a.choiceList.map((p) => n`<li>${p}</li>`)}</ul></calcite-tooltip>`);
|
|
430
|
+
}), t;
|
|
85
431
|
}
|
|
86
432
|
_renderEmptyState() {
|
|
87
|
-
return
|
|
433
|
+
return n`<calcite-panel><div class="empty-state"><calcite-icon icon=layer scale=l></calcite-icon><p>No solution design loaded</p></div></calcite-panel>`;
|
|
88
434
|
}
|
|
89
435
|
_renderNoticeBar() {
|
|
90
|
-
const
|
|
91
|
-
return
|
|
436
|
+
const e = this._translations;
|
|
437
|
+
return n`<calcite-notice open kind=brand icon=pencil-square><div slot=title>${e.noticeTitle}</div><div slot=message>${e.noticeMessage}</div></calcite-notice>`;
|
|
92
438
|
}
|
|
93
439
|
_renderActionBar() {
|
|
94
|
-
const
|
|
95
|
-
return
|
|
440
|
+
const e = this._translations;
|
|
441
|
+
return n`<calcite-action-bar layout=horizontal expand-disabled><calcite-action .text=${e.undo} text-enabled icon=undo disabled @click=${this._handleUndo}></calcite-action><calcite-action .text=${e.redo} text-enabled icon=redo disabled @click=${this._handleRedo}></calcite-action></calcite-action-bar>`;
|
|
96
442
|
}
|
|
97
443
|
_renderMainContent() {
|
|
98
|
-
return
|
|
444
|
+
return n`<div class="content-container"><div class="solution-item-section">${this._renderSolutionItemInputs()}</div><div class="actions-section">${this._renderActionButtons()}</div></div>`;
|
|
99
445
|
}
|
|
100
446
|
_renderSolutionItemInputs() {
|
|
101
|
-
const
|
|
102
|
-
return
|
|
447
|
+
const e = this._translations, i = this._design?.solution?.thumbnailUrl || "", t = this._design?.solution?.title || "", a = this._design?.solution?.description || "", c = this._design?.solution?.tags || [];
|
|
448
|
+
return n`<div class="solution-item-inputs"><div class="thumbnail-inputs-row"><div class="thumbnail-container"><img src=${(i || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="133"%3E%3Crect fill="%23ddd" width="200" height="133"/%3E%3C/svg%3E') ?? d} alt=${e.solutionThumbnail ?? d}></div><div class="stacked-inputs"><calcite-label>${e.name}<calcite-input-text .placeholder=${e.namePlaceholder} .value=${t} @input=${(s) => this._handleTitleChange(s.target.value)}></calcite-input-text></calcite-label><calcite-label>${e.description}<calcite-text-area .placeholder=${e.descriptionPlaceholder} .value=${a} resize=none @input=${(s) => this._handleDescriptionChange(s.target.value)}></calcite-text-area></calcite-label></div></div><div class="tags-row"><calcite-label>${e.tags}${_(c.join(","), n`<calcite-combobox .label=${e.tags} .placeholder=${e.tagsPlaceholder} selection-mode=multiple allow-custom-values @calciteComboboxChange=${(s) => this._handleTagsChange(s)}>${c.map((s) => n`<calcite-combobox-item .value=${s} .heading=${s} selected></calcite-combobox-item>`)}</calcite-combobox>`)}</calcite-label></div></div>`;
|
|
103
449
|
}
|
|
104
450
|
_renderActionButtons() {
|
|
105
|
-
const
|
|
106
|
-
return
|
|
451
|
+
const e = this._translations;
|
|
452
|
+
return n`<div class="action-buttons"><calcite-button appearance=solid width=full icon-start=launch>${e.deploy}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=workflow-diagram>${e.viewDiagram}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=information>${e.openHelp}</calcite-button><calcite-button appearance=outline kind=danger width=full icon-start=trash>${e.discard}</calcite-button></div>`;
|
|
107
453
|
}
|
|
108
454
|
_renderTabsSection() {
|
|
109
|
-
const
|
|
110
|
-
return
|
|
455
|
+
const e = this._translations;
|
|
456
|
+
return n`<div class="tabs-section"><calcite-tabs bordered layout=center><calcite-tab-nav slot=title-group><calcite-tab-title>${e.contents}</calcite-tab-title><calcite-tab-title icon-start=layers>${e.featureLayer}</calcite-tab-title></calcite-tab-nav><calcite-tab>${this._renderContentsTab()}</calcite-tab><calcite-tab>${this._renderFeatureLayerTab()}</calcite-tab></calcite-tabs></div>`;
|
|
111
457
|
}
|
|
112
458
|
_renderContentsTab() {
|
|
113
|
-
const
|
|
114
|
-
return
|
|
115
|
-
const
|
|
116
|
-
return
|
|
117
|
-
})}</calcite-list>${i.map((
|
|
118
|
-
const
|
|
119
|
-
return
|
|
120
|
-
this._editingItemTitle =
|
|
121
|
-
}}></calcite-input-text></calcite-label><calcite-label class="popover-field">${
|
|
122
|
-
this._editingItemDescription =
|
|
123
|
-
}}></calcite-text-area></calcite-label><div class="popover-actions"><calcite-button appearance=solid @click=${(
|
|
124
|
-
|
|
125
|
-
}}>${
|
|
126
|
-
|
|
127
|
-
}}>${
|
|
459
|
+
const e = this._translations, i = this._design?.items || [];
|
|
460
|
+
return n`<div><calcite-list .label=${e.solutionContentItems}>${i.map((t) => {
|
|
461
|
+
const a = `edit-action-${t.id}`;
|
|
462
|
+
return n`<calcite-list-item .label=${t.title} .description=${t.description || ""}><solution-item-icon slot=content-start .designType=${t.type}></solution-item-icon><calcite-action slot=actions-end id=${a ?? d} icon=edit-attributes .text=${e.edit} scale=s></calcite-action></calcite-list-item>`;
|
|
463
|
+
})}</calcite-list>${i.map((t) => {
|
|
464
|
+
const a = `edit-action-${t.id}`, c = `edit-popover-${t.id}`, s = this._openPopoverId === t.id;
|
|
465
|
+
return n`<calcite-popover id=${c ?? d} .label=${e.editItemContent} .referenceElement=${a} placement=auto @calcitePopoverBeforeOpen=${() => this._handleItemPopoverOpen(t)} @calcitePopoverClose=${() => this._handleCloseItemPopover()}><div class="popover-content"><calcite-label>${e.title}<calcite-input-text .value=${s ? this._editingItemTitle : t.title} @input=${(o) => {
|
|
466
|
+
this._editingItemTitle = o.target.value;
|
|
467
|
+
}}></calcite-input-text></calcite-label><calcite-label class="popover-field">${e.description}<calcite-text-area .value=${s ? this._editingItemDescription : t.description} resize=none rows=4 @input=${(o) => {
|
|
468
|
+
this._editingItemDescription = o.target.value;
|
|
469
|
+
}}></calcite-text-area></calcite-label><div class="popover-actions"><calcite-button appearance=solid @click=${(o) => {
|
|
470
|
+
o.stopPropagation(), this._handleApplyItemChanges(t.id);
|
|
471
|
+
}}>${e.apply}</calcite-button><calcite-button appearance=outline @click=${async (o) => {
|
|
472
|
+
o.stopPropagation(), await this._handleClosePopover(c);
|
|
473
|
+
}}>${e.close}</calcite-button></div></div></calcite-popover>`;
|
|
128
474
|
})}</div>`;
|
|
129
475
|
}
|
|
130
476
|
_renderFeatureLayerTab() {
|
|
131
|
-
|
|
477
|
+
const e = this._translations, i = this._design?.featureLayer?.layers || [], t = this._design?.featureLayer?.addLayers || !1, a = i[this._selectedLayerIndex], c = a?.name || "", s = a?.description || "", o = a?.type || "Point";
|
|
478
|
+
return n`<calcite-flow><calcite-flow-item .selected=${!this._isAddingLayer && !this._isEditingField && !this._isAddingNewField}><div class="feature-layer-tab"><div class="layer-selector-container"><calcite-label>${e.layer}<calcite-combobox .label=${e.layer} selection-mode=single clear-disabled @calciteComboboxChange=${(l) => this._handleLayerSelect(l)}>${i.map((l, h) => {
|
|
479
|
+
const r = this._getLayerTypeIcon(l.type);
|
|
480
|
+
return n`<calcite-combobox-item .value=${h.toString()} text-label=${l.name ?? d} .heading=${l.name} .icon=${r} .selected=${h === this._selectedLayerIndex}></calcite-combobox-item>`;
|
|
481
|
+
})}</calcite-combobox></calcite-label>${t && n`<calcite-button icon-start=plus appearance=outline @click=${this._handleAddLayer}>${e.addLayer}</calcite-button>` || ""}</div>${a && n`<div class="layer-properties-container"><calcite-label>${e.name}<calcite-input-text .placeholder=${e.layerNamePlaceholder} .value=${c} @input=${(l) => this._handleLayerNameChange(l.target.value)}></calcite-input-text></calcite-label><calcite-label>${e.type}<calcite-combobox .label=${e.type} selection-mode=single clear-disabled @calciteComboboxChange=${(l) => this._handleLayerTypeChange(l)}><calcite-combobox-item value=Point text-label=${e.pointLayer ?? d} .heading=${e.pointLayer} icon=point .selected=${o === "Point"}></calcite-combobox-item><calcite-combobox-item value=Polyline text-label=${e.lineLayer ?? d} .heading=${e.lineLayer} icon=line .selected=${o === "Polyline"}></calcite-combobox-item><calcite-combobox-item value=Polygon text-label=${e.polygonLayer ?? d} .heading=${e.polygonLayer} icon=polygon .selected=${o === "Polygon"}></calcite-combobox-item><calcite-combobox-item value=Table text-label=${e.tableLayer ?? d} .heading=${e.tableLayer} icon=table .selected=${o === "Table"}></calcite-combobox-item></calcite-combobox></calcite-label></div>` || ""}${a && n`<div class="layer-description-container"><calcite-label>${e.description}<calcite-text-area .placeholder=${e.layerDescriptionPlaceholder} .value=${s} resize=none @input=${(l) => this._handleLayerDescriptionChange(l.target.value)}></calcite-text-area></calcite-label></div>` || ""}${a && n`<div class="fields-section"><calcite-label>${e.fields}<calcite-table bordered .caption=${e.fields}><calcite-table-row slot=table-header><calcite-table-header .heading=${e.displayName}></calcite-table-header><calcite-table-header .heading=${e.fieldName}></calcite-table-header><calcite-table-header .heading=${e.type}></calcite-table-header><calcite-table-header .heading=${e.domain}></calcite-table-header><calcite-table-header heading></calcite-table-header></calcite-table-row>${this._renderFieldRows(a)}</calcite-table></calcite-label><calcite-button icon-start=plus appearance=transparent width=auto class="add-field-button" @click=${this._handleAddField}>${e.addField}</calcite-button><div class="system-fields-note"><calcite-icon icon=information scale=s class="info-icon-blue"></calcite-icon><span>${e.systemFieldsNote} ${this._getSystemFieldsList(a)}</span></div></div>` || ""}</div>${this._shouldShowRemoveLayerButton(a) && n`<calcite-button slot=footer appearance=transparent kind=danger width=full @click=${this._handleRemoveLayer}>${e.removeLayer}</calcite-button>` || ""}</calcite-flow-item>${this._isEditingField && n`<calcite-flow-item heading="Edit field" selected @calciteFlowItemBack=${this._handleEditFieldBack}><calcite-button slot=header-actions-end appearance=outline kind=danger scale=m .disabled=${this._editingFieldType === "required"} @click=${this._handleDeleteField}>${e.delete}</calcite-button><calcite-button slot=header-actions-end appearance=outline scale=m @click=${this._handleApplyFieldChanges}>${e.apply}</calcite-button><div class="feature-layer-tab"><div class="layer-properties-container"><calcite-label>${e.displayName}<calcite-input-text .value=${this._editingFieldDisplayName} @input=${(l) => this._editingFieldDisplayName = l.target.value}></calcite-input-text></calcite-label><calcite-label>${e.fieldName}<calcite-input-text .value=${this._editingFieldName} .disabled=${this._editingFieldType === "required"} @input=${(l) => this._editingFieldName = l.target.value}></calcite-input-text></calcite-label></div><div class="layer-description-container"><calcite-label>${e.description}<calcite-text-area .value=${this._editingFieldDescription} resize=none @input=${(l) => this._editingFieldDescription = l.target.value}></calcite-text-area></calcite-label></div><div class="layer-properties-container"><calcite-label>${e.type}<calcite-combobox .label=${e.type} selection-mode=single clear-disabled .disabled=${this._editingFieldType === "required"} @calciteComboboxChange=${(l) => this._handleEditFieldTypeChange(l)}><calcite-combobox-item value=string text-label=${e.stringType ?? d} .heading=${e.stringType} .selected=${this._editingFieldTypeValue === "string"}></calcite-combobox-item><calcite-combobox-item value=integer text-label=${e.integerType ?? d} .heading=${e.integerType} .selected=${this._editingFieldTypeValue === "integer"}></calcite-combobox-item><calcite-combobox-item value=double text-label=${e.doubleType ?? d} .heading=${e.doubleType} .selected=${this._editingFieldTypeValue === "double"}></calcite-combobox-item><calcite-combobox-item value=date text-label=${e.dateType ?? d} .heading=${e.dateType} .selected=${this._editingFieldTypeValue === "date"}></calcite-combobox-item><calcite-combobox-item value=guid text-label=${e.guidType ?? d} .heading=${e.guidType} .selected=${this._editingFieldTypeValue === "guid"}></calcite-combobox-item></calcite-combobox></calcite-label>${this._editingFieldTypeValue === "string" && n`<calcite-label>${e.length}<calcite-input-number .value=${this._editingFieldLength.toString()} .disabled=${this._editingFieldType === "required"} @input=${(l) => this._editingFieldLength = parseInt(l.target.value) || 255}></calcite-input-number></calcite-label>` || ""}</div>${this._editingFieldTypeValue === "string" && n`<div class="domain-section"><calcite-label>Domain</calcite-label>${this._editingFieldChoiceList && this._editingFieldChoiceList.length > 0 ? n`<div><div class="domain-list">${this._editingFieldChoiceList.map((l, h) => n`<div class="domain-item" draggable @dragstart=${(r) => this._handleEditFieldChoiceDragStart(h, r)} @dragover=${(r) => r.preventDefault()} @drop=${(r) => this._handleEditFieldChoiceDrop(h, r)}><calcite-icon icon=drag scale=s class="drag-handle"></calcite-icon><calcite-input-text .value=${l} @input=${(r) => this._handleUpdateEditFieldChoice(h, r.target.value)}></calcite-input-text><calcite-button icon-start=x appearance=transparent scale=s kind=neutral @click=${() => this._handleRemoveEditFieldChoice(h)}></calcite-button></div>`)}</div><calcite-button icon-start=plus appearance=transparent width=auto class="add-field-button" @click=${this._handleAddEditFieldChoice}>\r\n Add value</calcite-button></div>` : n`<calcite-button icon-start=plus appearance=transparent width=auto class="add-field-button" @click=${this._handleAddEditFieldChoice}>\r\n Add domain list</calcite-button>`}</div>` || ""}</div></calcite-flow-item>` || ""}${this._isAddingLayer && n`<calcite-flow-item heading="Add Layer" selected @calciteFlowItemBack=${this._handleAddLayerBack}><calcite-button slot=header-actions-end appearance=outline scale=m @click=${this._handleAddLayerDone}>${e.done}</calcite-button><div class="feature-layer-tab"><div class="layer-properties-container"><calcite-label>${e.name}<calcite-input-text .placeholder=${e.layerNamePlaceholder} .value=${this._newLayerName} @input=${(l) => this._handleNewLayerNameChange(l.target.value)}></calcite-input-text></calcite-label><calcite-label>${e.type}<calcite-combobox .label=${e.type} selection-mode=single clear-disabled @calciteComboboxChange=${(l) => this._handleNewLayerTypeChange(l)}><calcite-combobox-item value=Point text-label=${e.pointLayer ?? d} .heading=${e.pointLayer} icon=point .selected=${this._newLayerType === "Point"}></calcite-combobox-item><calcite-combobox-item value=Polyline text-label=${e.lineLayer ?? d} .heading=${e.lineLayer} icon=line .selected=${this._newLayerType === "Polyline"}></calcite-combobox-item><calcite-combobox-item value=Polygon text-label=${e.polygonLayer ?? d} .heading=${e.polygonLayer} icon=polygon .selected=${this._newLayerType === "Polygon"}></calcite-combobox-item><calcite-combobox-item value=Table text-label=${e.tableLayer ?? d} .heading=${e.tableLayer} icon=table .selected=${this._newLayerType === "Table"}></calcite-combobox-item></calcite-combobox></calcite-label></div><div class="layer-description-container"><calcite-label>${e.description}<calcite-text-area .placeholder=${e.layerDescriptionPlaceholder} .value=${this._newLayerDescription} resize=none @input=${(l) => this._handleNewLayerDescriptionChange(l.target.value)}></calcite-text-area></calcite-label></div></div></calcite-flow-item>` || ""}${this._isAddingNewField && n`<calcite-flow-item heading="Add Field" selected @calciteFlowItemBack=${this._handleAddFieldBack}><calcite-button slot=header-actions-end appearance=outline scale=m @click=${this._handleAddFieldDone}>${e.done}</calcite-button><div class="feature-layer-tab"><div class="layer-properties-container"><calcite-label>${e.displayName}<calcite-input-text .value=${this._newFieldDisplayName} @input=${(l) => this._newFieldDisplayName = l.target.value}></calcite-input-text></calcite-label><calcite-label>${e.fieldName}<calcite-input-text .value=${this._newFieldName} @input=${(l) => this._newFieldName = l.target.value}></calcite-input-text></calcite-label></div><div class="layer-description-container"><calcite-label>${e.description}<calcite-text-area .value=${this._newFieldDescription} resize=none @input=${(l) => this._newFieldDescription = l.target.value}></calcite-text-area></calcite-label></div><div class="layer-properties-container"><calcite-label>${e.type}<calcite-combobox .label=${e.type} selection-mode=single clear-disabled @calciteComboboxChange=${(l) => this._handleNewFieldTypeChange(l)}><calcite-combobox-item value=string text-label=${e.stringType ?? d} .heading=${e.stringType} .selected=${this._newFieldType === "string"}></calcite-combobox-item><calcite-combobox-item value=integer text-label=${e.integerType ?? d} .heading=${e.integerType} .selected=${this._newFieldType === "integer"}></calcite-combobox-item><calcite-combobox-item value=double text-label=${e.doubleType ?? d} .heading=${e.doubleType} .selected=${this._newFieldType === "double"}></calcite-combobox-item><calcite-combobox-item value=date text-label=${e.dateType ?? d} .heading=${e.dateType} .selected=${this._newFieldType === "date"}></calcite-combobox-item><calcite-combobox-item value=guid text-label=${e.guidType ?? d} .heading=${e.guidType} .selected=${this._newFieldType === "guid"}></calcite-combobox-item></calcite-combobox></calcite-label>${this._newFieldType === "string" && n`<calcite-label>${e.length}<calcite-input-number .value=${this._newFieldLength.toString()} @input=${(l) => this._newFieldLength = parseInt(l.target.value) || 255}></calcite-input-number></calcite-label>` || ""}</div>${this._newFieldType === "string" && n`<div class="domain-section"><calcite-label>Domain</calcite-label>${this._newFieldChoiceList && this._newFieldChoiceList.length > 0 ? n`<div><div class="domain-list">${this._newFieldChoiceList.map((l, h) => n`<div class="domain-item" draggable @dragstart=${(r) => this._handleNewFieldChoiceDragStart(h, r)} @dragover=${(r) => r.preventDefault()} @drop=${(r) => this._handleNewFieldChoiceDrop(h, r)}><calcite-icon icon=drag scale=s class="drag-handle"></calcite-icon><calcite-input-text .value=${l} @input=${(r) => this._handleUpdateNewFieldChoice(h, r.target.value)}></calcite-input-text><calcite-button icon-start=x appearance=transparent scale=s kind=neutral @click=${() => this._handleRemoveNewFieldChoice(h)}></calcite-button></div>`)}</div><calcite-button icon-start=plus appearance=transparent width=auto class="add-field-button" @click=${this._handleAddNewFieldChoice}>\r\n Add value</calcite-button></div>` : n`<calcite-button icon-start=plus appearance=transparent width=auto class="add-field-button" @click=${this._handleAddNewFieldChoice}>\r\n Add domain list</calcite-button>`}</div>` || ""}</div></calcite-flow-item>` || ""}</calcite-flow>`;
|
|
132
482
|
}
|
|
133
483
|
}
|
|
134
|
-
|
|
484
|
+
g("solution-builder-assistant", $);
|
|
135
485
|
export {
|
|
136
|
-
|
|
486
|
+
$ as SolutionBuilderAssistant
|
|
137
487
|
};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import "@esri/calcite-components/components/calcite-panel";
|
|
2
2
|
import "@esri/calcite-components/components/calcite-icon";
|
|
3
|
+
import "@esri/calcite-components/components/calcite-table-row";
|
|
4
|
+
import "@esri/calcite-components/components/calcite-table-cell";
|
|
5
|
+
import "@esri/calcite-components/components/calcite-tooltip";
|
|
3
6
|
import "@esri/calcite-components/components/calcite-notice";
|
|
4
7
|
import "@esri/calcite-components/components/calcite-action-bar";
|
|
5
8
|
import "@esri/calcite-components/components/calcite-action";
|
|
@@ -17,4 +20,9 @@ import "@esri/calcite-components/components/calcite-list";
|
|
|
17
20
|
import "@esri/calcite-components/components/calcite-list-item";
|
|
18
21
|
import "../solution-item-icon/index.js";
|
|
19
22
|
import "@esri/calcite-components/components/calcite-popover";
|
|
23
|
+
import "@esri/calcite-components/components/calcite-flow";
|
|
24
|
+
import "@esri/calcite-components/components/calcite-flow-item";
|
|
25
|
+
import "@esri/calcite-components/components/calcite-table";
|
|
26
|
+
import "@esri/calcite-components/components/calcite-table-header";
|
|
27
|
+
import "@esri/calcite-components/components/calcite-input-number";
|
|
20
28
|
export * from "./customElement.js";
|