@esri/solutions-components 5.1.0-next.71 → 5.1.0-next.72

package/dist/components/solution-builder-assistant/customElement.js

@@ -1,379 +1,487 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
-import { css, html } from "lit";
-import { keyed } from "lit/directives/keyed.js";
-import { u as useT9n } from "../../chunks/useT9n.js";
-import { LitElement, nothing } from "@arcgis/lumina";
-import { useContextConsumer } from "@arcgis/lumina/context";
-import { b as builderDesignContext } from "../../chunks/deployAppContexts.js";
-const styles = css`/**
- * @license
- * Copyright 2025 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the 'License');
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.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 with notice and action bar */
-.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;
-}
-
-/* Action bar styling */
-calcite-action-bar {
-  flex-shrink: 0;
-  background: var(--calcite-color-brand);
-  border-left: 1px solid var(--calcite-color-brand-dark);
-}
-
-/* Main content container */
-.content-container {
-  display: flex;
-  gap: var(--calcite-spacing-xl);
-  margin-bottom: var(--calcite-spacing-lg);
-}
-
-/* Solution item section (left side) */
-.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 (right side) */
-.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 */
-.tabs-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.tabs-section calcite-tabs {
-  height: 100%;
-}
-
-.feature-layer-placeholder {
-  padding: var(--calcite-spacing-lg);
-  color: var(--calcite-color-text-3);
-}
-
-/* Item edit popover */
-.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);
-}
-`;
-class SolutionBuilderAssistant extends LitElement {
+import { c as g } from "../../chunks/runtime.js";
+import { css as u, html as n } from "lit";
+import { keyed as _ } from "lit/directives/keyed.js";
+import { u as m } from "../../chunks/useT9n.js";
+import { LitElement as y, nothing as d } from "@arcgis/lumina";
+import { useContextConsumer as b } from "@arcgis/lumina/context";
+import { b as v } from "../../chunks/deployAppContexts.js";
+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)}`;
+class $ extends y {
   constructor() {
-    super();
-    this.design = null;
-    this._design = null;
-    this._translations = useT9n({ name: "solution-builder-assistant", blocking: true });
-    this._isDirty = false;
-    this._openPopoverId = null;
-    this._editingItemTitle = "";
-    this._editingItemDescription = "";
-    this._designContextConsumer = useContextConsumer({
-      context: builderDesignContext,
-      subscribe: true,
-      callback: (value) => {
-        if (value?.design) {
-          this._design = value.design;
-        }
+    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({
+      context: v,
+      subscribe: !0,
+      callback: (e) => {
+        e?.design && (this._design = e.design);
       }
-    });
-    this._handleUndo = () => {
+    }), this._handleUndo = () => {
       console.log("Undo clicked - to be implemented");
-    };
-    this._handleRedo = () => {
+    }, this._handleRedo = () => {
       console.log("Redo clicked - to be implemented");
-    };
-    this._handleTitleChange = (value) => {
+    }, this._handleTitleChange = (e) => {
       if (!this._design)
         return;
-      const updatedDesign = {
+      const i = {
         ...this._design,
         solution: {
           ...this._design.solution,
-          title: value
+          title: e
         }
       };
-      this._design = updatedDesign;
-      this._isDirty = true;
-    };
-    this._handleDescriptionChange = (value) => {
+      this._design = i, this._isDirty = !0;
+    }, this._handleDescriptionChange = (e) => {
       if (!this._design)
         return;
-      const updatedDesign = {
+      const i = {
         ...this._design,
         solution: {
           ...this._design.solution,
-          description: value
+          description: e
         }
       };
-      this._design = updatedDesign;
-      this._isDirty = true;
-    };
-    this._handleTagsChange = (event) => {
+      this._design = i, this._isDirty = !0;
+    }, this._handleTagsChange = (e) => {
       if (!this._design)
         return;
-      const tags = Array.from(event.target.selectedItems).map((item) => item.value);
+      const i = Array.from(e.target.selectedItems).map((t) => t.value);
       this._design = {
         ...this._design,
         solution: {
           ...this._design.solution,
-          tags
+          tags: i
+        }
+      }, this._isDirty = !0;
+    }, this._handleItemPopoverOpen = (e) => {
+      this._openPopoverId = e.id, this._editingItemTitle = e.title || "", this._editingItemDescription = e.description || "", this.requestUpdate();
+    }, this._handleCloseItemPopover = () => {
+      this._openPopoverId = null, this._editingItemTitle = "", this._editingItemDescription = "";
+    }, this._handleClosePopover = async (e) => {
+      const i = this.renderRoot.querySelector(`#${e}`);
+      i && (i.open = !1, await i.updateComplete), this._handleCloseItemPopover();
+    }, this._handleApplyItemChanges = (e) => {
+      if (!this._design)
+        return;
+      const i = this._design.items.map((a) => a.id === e ? { ...a, title: this._editingItemTitle, description: this._editingItemDescription } : a), t = {
+        ...this._design,
+        items: i
+      };
+      this._design = t, this._isDirty = !0;
+    }, this._handleLayerSelect = (e) => {
+      const i = e.target.selectedItems[0];
+      i && (this._selectedLayerIndex = parseInt(i.value, 10));
+    }, this._handleAddLayer = () => {
+      this._isAddingLayer = !0;
+    }, this._handleAddLayerBack = () => {
+      this._isAddingLayer = !1, this._newLayerName = "", this._newLayerType = "Point", this._newLayerDescription = "";
+    }, this._handleAddLayerDone = () => {
+      if (!this._design || !this._newLayerName.trim())
+        return;
+      const e = this._design.featureLayer?.layers || [], i = {
+        id: Date.now(),
+        // Use timestamp as temporary ID
+        type: this._newLayerType,
+        name: this._newLayerName,
+        description: this._newLayerDescription,
+        customFields: [],
+        requiredFields: [],
+        systemFields: [
+          {
+            name: "objectid",
+            type: "oid",
+            alias: "ObjectID",
+            description: "Unique identifier for each record in the dataset."
+          },
+          {
+            name: "globalid",
+            type: "globalid",
+            alias: "GlobalID",
+            description: "Globally unique identifier for the record."
+          },
+          {
+            name: "created_date",
+            type: "date",
+            alias: "Created On",
+            description: "Date when the record was created."
+          },
+          {
+            name: "created_user",
+            type: "string",
+            alias: "Created By",
+            description: "User who created the record.",
+            choiceList: null,
+            length: 255
+          },
+          {
+            name: "last_edited_date",
+            type: "date",
+            alias: "Last Edited On",
+            description: "Date when the record was last edited."
+          },
+          {
+            name: "last_edited_user",
+            type: "string",
+            alias: "Last Edited By",
+            description: "User who last edited the record.",
+            choiceList: null,
+            length: 255
+          }
+        ]
+      };
+      this._design = {
+        ...this._design,
+        featureLayer: {
+          ...this._design.featureLayer,
+          layers: [...e, i]
         }
+      }, this._selectedLayerIndex = e.length, this._isDirty = !0, this._isAddingLayer = !1, this._newLayerName = "", this._newLayerType = "Point", this._newLayerDescription = "";
+    }, this._handleNewLayerNameChange = (e) => {
+      this._newLayerName = e;
+    }, this._handleNewLayerTypeChange = (e) => {
+      const i = e.target.selectedItems[0];
+      i && (this._newLayerType = i.value);
+    }, this._handleNewLayerDescriptionChange = (e) => {
+      this._newLayerDescription = e;
+    }, this._handleAddField = () => {
+      this._newFieldDisplayName = "", this._newFieldName = "", this._newFieldDescription = "", this._newFieldType = "string", this._newFieldLength = 255, this._isAddingNewField = !0, this._scrollFeatureLayerTabToTop();
+    }, this._handleAddFieldBack = () => {
+      this._isAddingNewField = !1, this._newFieldDisplayName = "", this._newFieldName = "", this._newFieldDescription = "", this._newFieldType = "string", this._newFieldLength = 255, this._newFieldChoiceList = null;
+    }, this._handleAddFieldDone = () => {
+      if (!this._design)
+        return;
+      const e = this._design.featureLayer?.layers || [], i = e[this._selectedLayerIndex];
+      if (!i || !this._newFieldName.trim())
+        return;
+      const t = {
+        name: this._newFieldName,
+        type: this._newFieldType,
+        alias: this._newFieldDisplayName || this._newFieldName,
+        description: this._newFieldDescription,
+        choiceList: this._newFieldChoiceList && this._newFieldChoiceList.length > 0 ? this._newFieldChoiceList : null
       };
-      this._isDirty = true;
-    };
-    this._handleItemPopoverOpen = (item) => {
-      this._openPopoverId = item.id;
-      this._editingItemTitle = item.title || "";
-      this._editingItemDescription = item.description || "";
-      this.requestUpdate();
-    };
-    this._handleCloseItemPopover = () => {
-      this._openPopoverId = null;
-      this._editingItemTitle = "";
-      this._editingItemDescription = "";
-    };
-    this._handleClosePopover = async (popoverId) => {
-      const popover = this.renderRoot.querySelector(`#${popoverId}`);
-      if (popover) {
-        popover.open = false;
-        await popover.updateComplete;
+      this._newFieldType === "string" && (t.length = this._newFieldLength);
+      const a = [...i.customFields || [], t], c = e.map((s, o) => o === this._selectedLayerIndex ? { ...s, customFields: a } : s);
+      this._design = {
+        ...this._design,
+        featureLayer: {
+          ...this._design.featureLayer,
+          layers: c
+        }
+      }, this._isDirty = !0, this._handleAddFieldBack();
+    }, this._handleNewFieldTypeChange = (e) => {
+      const i = e.target.selectedItems[0];
+      i && (this._newFieldType = i.value);
+    }, this._handleEditField = (e, i) => {
+      const a = (this._design?.featureLayer?.layers || [])[this._selectedLayerIndex];
+      if (!a)
+        return;
+      const c = a.customFields || [], s = a.requiredFields || [];
+      if (e < c.length)
+        this._editingFieldType = "custom", this._editingFieldIndex = e;
+      else {
+        const o = e - c.length;
+        if (o >= s.length)
+          return;
+        this._editingFieldType = "required", this._editingFieldIndex = o;
       }
-      this._handleCloseItemPopover();
-    };
-    this._handleApplyItemChanges = (itemId) => {
+      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();
+    }, this._handleEditFieldBack = () => {
+      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._handleEditFieldTypeChange = (e) => {
+      const i = e.target.selectedItems[0];
+      i && (this._editingFieldTypeValue = i.value);
+    }, this._handleAddEditFieldChoice = () => {
+      this._editingFieldChoiceList ? this._editingFieldChoiceList = [...this._editingFieldChoiceList, ""] : this._editingFieldChoiceList = [""];
+    }, this._handleRemoveEditFieldChoice = (e) => {
+      this._editingFieldChoiceList && (this._editingFieldChoiceList = this._editingFieldChoiceList.filter((i, t) => t !== e), this._editingFieldChoiceList.length === 0 && (this._editingFieldChoiceList = null));
+    }, this._handleUpdateEditFieldChoice = (e, i) => {
+      if (!this._editingFieldChoiceList)
+        return;
+      const t = [...this._editingFieldChoiceList];
+      t[e] = i, this._editingFieldChoiceList = t;
+    }, this._handleEditFieldChoiceDragStart = (e, i) => {
+      i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", e.toString());
+    }, this._handleEditFieldChoiceDrop = (e, i) => {
+      if (i.preventDefault(), !this._editingFieldChoiceList)
+        return;
+      const t = parseInt(i.dataTransfer.getData("text/plain"));
+      if (t === e)
+        return;
+      const a = [...this._editingFieldChoiceList], c = a[t];
+      a.splice(t, 1), a.splice(e, 0, c), this._editingFieldChoiceList = a;
+    }, this._handleAddNewFieldChoice = () => {
+      this._newFieldChoiceList ? this._newFieldChoiceList = [...this._newFieldChoiceList, ""] : this._newFieldChoiceList = [""];
+    }, this._handleRemoveNewFieldChoice = (e) => {
+      this._newFieldChoiceList && (this._newFieldChoiceList = this._newFieldChoiceList.filter((i, t) => t !== e), this._newFieldChoiceList.length === 0 && (this._newFieldChoiceList = null));
+    }, this._handleUpdateNewFieldChoice = (e, i) => {
+      if (!this._newFieldChoiceList)
+        return;
+      const t = [...this._newFieldChoiceList];
+      t[e] = i, this._newFieldChoiceList = t;
+    }, this._handleNewFieldChoiceDragStart = (e, i) => {
+      i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", e.toString());
+    }, this._handleNewFieldChoiceDrop = (e, i) => {
+      if (i.preventDefault(), !this._newFieldChoiceList)
+        return;
+      const t = parseInt(i.dataTransfer.getData("text/plain"));
+      if (t === e)
+        return;
+      const a = [...this._newFieldChoiceList], c = a[t];
+      a.splice(t, 1), a.splice(e, 0, c), this._newFieldChoiceList = a;
+    }, this._handleDeleteField = () => {
+      if (!this._design || this._editingFieldType !== "custom")
+        return;
+      const e = this._design.featureLayer?.layers || [];
+      if (this._selectedLayerIndex >= e.length)
+        return;
+      const t = [...e[this._selectedLayerIndex].customFields || []];
+      t.splice(this._editingFieldIndex, 1);
+      const a = e.map((c, s) => s === this._selectedLayerIndex ? { ...c, customFields: t } : c);
+      this._design = {
+        ...this._design,
+        featureLayer: {
+          ...this._design.featureLayer,
+          layers: a
+        }
+      }, this._isDirty = !0, this._handleEditFieldBack();
+    }, this._handleApplyFieldChanges = () => {
+      if (!this._design || !this._editingFieldType)
+        return;
+      const e = this._design.featureLayer?.layers || [];
+      if (this._selectedLayerIndex >= e.length)
+        return;
+      const i = e[this._selectedLayerIndex];
+      if (this._editingFieldType === "custom") {
+        const t = [...i.customFields || []];
+        t[this._editingFieldIndex] = {
+          ...t[this._editingFieldIndex],
+          alias: this._editingFieldDisplayName,
+          name: this._editingFieldName,
+          description: this._editingFieldDescription,
+          type: this._editingFieldTypeValue,
+          choiceList: this._editingFieldChoiceList && this._editingFieldChoiceList.length > 0 ? this._editingFieldChoiceList : null,
+          length: this._editingFieldTypeValue === "string" ? this._editingFieldLength : void 0
+        };
+        const a = e.map((c, s) => s === this._selectedLayerIndex ? { ...c, customFields: t } : c);
+        this._design = {
+          ...this._design,
+          featureLayer: {
+            ...this._design.featureLayer,
+            layers: a
+          }
+        };
+      } else if (this._editingFieldType === "required") {
+        const t = [...i.requiredFields || []];
+        t[this._editingFieldIndex] = {
+          ...t[this._editingFieldIndex],
+          alias: this._editingFieldDisplayName,
+          description: this._editingFieldDescription
+        };
+        const a = e.map((c, s) => s === this._selectedLayerIndex ? { ...c, requiredFields: t } : c);
+        this._design = {
+          ...this._design,
+          featureLayer: {
+            ...this._design.featureLayer,
+            layers: a
+          }
+        };
+      }
+      this._isDirty = !0, this._handleEditFieldBack();
+    }, this._handleLayerNameChange = (e) => {
       if (!this._design)
         return;
-      const updatedItems = this._design.items.map((item) => item.id === itemId ? { ...item, title: this._editingItemTitle, description: this._editingItemDescription } : item);
-      const updatedDesign = {
+      const i = this._design.featureLayer?.layers || [];
+      if (this._selectedLayerIndex >= i.length)
+        return;
+      const t = i.map((a, c) => c === this._selectedLayerIndex ? { ...a, name: e } : a);
+      this._design = {
         ...this._design,
-        items: updatedItems
-      };
-      this._design = updatedDesign;
-      this._isDirty = true;
-    };
-    this._handleDeploy = async () => {
+        featureLayer: {
+          ...this._design.featureLayer,
+          layers: t
+        }
+      }, this._isDirty = !0;
+    }, this._handleLayerTypeChange = (e) => {
+      if (!this._design)
+        return;
+      const i = e.target.selectedItems[0];
+      if (!i)
+        return;
+      const t = this._design.featureLayer?.layers || [];
+      if (this._selectedLayerIndex >= t.length)
+        return;
+      const a = i.value, c = t.map((s, o) => o === this._selectedLayerIndex ? { ...s, type: a } : s);
+      this._design = {
+        ...this._design,
+        featureLayer: {
+          ...this._design.featureLayer,
+          layers: c
+        }
+      }, this._isDirty = !0;
+    }, this._handleLayerDescriptionChange = (e) => {
       if (!this._design)
         return;
-      console.log("Deploy design:", this._design);
-    };
-    this._designContextConsumer;
+      const i = this._design.featureLayer?.layers || [];
+      if (this._selectedLayerIndex >= i.length)
+        return;
+      const t = i.map((a, c) => c === this._selectedLayerIndex ? { ...a, description: e } : a);
+      this._design = {
+        ...this._design,
+        featureLayer: {
+          ...this._design.featureLayer,
+          layers: t
+        }
+      }, this._isDirty = !0;
+    }, this._handleRemoveLayer = () => {
+      if (!this._design)
+        return;
+      const e = this._design.featureLayer?.layers || [];
+      if (this._selectedLayerIndex >= e.length)
+        return;
+      const i = e.filter((t, a) => a !== this._selectedLayerIndex);
+      this._design = {
+        ...this._design,
+        featureLayer: {
+          ...this._design.featureLayer,
+          layers: i
+        }
+      }, this._selectedLayerIndex >= i.length && (this._selectedLayerIndex = Math.max(0, i.length - 1)), this._isDirty = !0, this._scrollFeatureLayerTabToTop();
+    }, this._handleDeploy = async () => {
+      this._design && console.log("Deploy design:", this._design);
+    }, this._designContextConsumer;
   }
   static {
-    this.properties = { design: [1, { type: Object }, {}], _design: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _isDirty: [16, {}, { state: true }], _openPopoverId: [16, {}, { state: true }], _editingItemTitle: [16, {}, { state: true }], _editingItemDescription: [16, {}, { state: true }] };
+    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 };
   }
   static {
-    this.styles = styles;
+    this.styles = F;
   }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("design")) {
-      this._design = this.design;
-    }
+  willUpdate(e) {
+    e.has("design") && (this._design = this.design);
   }
   render() {
-    const t = this._translations;
-    if (!t) {
-      return html`<div>Loading...</div>`;
+    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>`;
+  }
+  _getLayerTypeIcon(e) {
+    switch (e) {
+      case "Point":
+        return "point";
+      case "Polyline":
+        return "line";
+      case "Polygon":
+        return "polygon";
+      case "Table":
+        return "table";
+      default:
+        return "layer";
     }
-    if (!this._design) {
-      return this._renderEmptyState();
+  }
+  _getFieldTypeIcon(e) {
+    switch (e) {
+      case "string":
+        return "string";
+      case "integer":
+        return "integer";
+      case "double":
+        return "number";
+      case "date":
+        return "date-time";
+      case "oid":
+      case "globalid":
+      case "guid":
+        return "key";
+      default:
+        return "key";
     }
-    return html`<calcite-panel><div class="header-container">${this._renderNoticeBar()}${this._renderActionBar()}</div><div class="builder-content">${this._renderMainContent()}${this._renderTabsSection()}</div></calcite-panel>`;
+  }
+  _formatFieldType(e) {
+    const t = {
+      string: "String",
+      integer: "Integer",
+      double: "Double",
+      date: "Date",
+      guid: "GUID",
+      globalid: "GlobalID",
+      oid: "ObjectID"
+    }[e.type] || e.type;
+    return e.type === "string" && e.length ? `${t} (${e.length})` : t;
+  }
+  _getSystemFieldsList(e) {
+    return (e.systemFields || []).map((t) => t.name).join(", ");
+  }
+  _shouldShowRemoveLayerButton(e) {
+    return !e || !this._design?.featureLayer ? !1 : e.id && e.id > 1e3;
+  }
+  _scrollFeatureLayerTabToTop() {
+    requestAnimationFrame(() => {
+      const e = this.el.shadowRoot?.querySelector("calcite-tab[selected]");
+      e?.shadowRoot && e.shadowRoot.querySelector(".container")?.scrollTo({ top: 0, behavior: "smooth" });
+    });
+  }
+  _renderFieldRows(e) {
+    const i = [
+      ...e.customFields || [],
+      ...e.requiredFields || []
+    ], t = [];
+    return i.forEach((a, c) => {
+      const s = this._getFieldTypeIcon(a.type), o = this._formatFieldType(a), l = `field-domain-info-${c}`;
+      let h, r = !1;
+      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>`);
+    }), t;
   }
   _renderEmptyState() {
-    return html`<calcite-panel><div class="empty-state"><calcite-icon icon=layer scale=l></calcite-icon><p>No solution design loaded</p></div></calcite-panel>`;
+    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>`;
   }
   _renderNoticeBar() {
-    const t = this._translations;
-    return html`<calcite-notice open kind=brand icon=pencil-square><div slot=title>${t.noticeTitle}</div><div slot=message>${t.noticeMessage}</div></calcite-notice>`;
+    const e = this._translations;
+    return n`<calcite-notice open kind=brand icon=pencil-square><div slot=title>${e.noticeTitle}</div><div slot=message>${e.noticeMessage}</div></calcite-notice>`;
   }
   _renderActionBar() {
-    const t = this._translations;
-    return html`<calcite-action-bar layout=horizontal expand-disabled><calcite-action .text=${t.undo} text-enabled icon=undo disabled @click=${this._handleUndo}></calcite-action><calcite-action .text=${t.redo} text-enabled icon=redo disabled @click=${this._handleRedo}></calcite-action></calcite-action-bar>`;
+    const e = this._translations;
+    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>`;
   }
   _renderMainContent() {
-    return html`<div class="content-container"><div class="solution-item-section">${this._renderSolutionItemInputs()}</div><div class="actions-section">${this._renderActionButtons()}</div></div>`;
+    return n`<div class="content-container"><div class="solution-item-section">${this._renderSolutionItemInputs()}</div><div class="actions-section">${this._renderActionButtons()}</div></div>`;
   }
   _renderSolutionItemInputs() {
-    const t = this._translations;
-    const thumbnailUrl = this._design?.solution?.thumbnailUrl || "";
-    const title = this._design?.solution?.title || "";
-    const description = this._design?.solution?.description || "";
-    const tags = this._design?.solution?.tags || [];
-    return html`<div class="solution-item-inputs"><div class="thumbnail-inputs-row"><div class="thumbnail-container"><img src=${(thumbnailUrl || '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') ?? nothing} alt=${t.solutionThumbnail ?? nothing}></div><div class="stacked-inputs"><calcite-label>${t.name}<calcite-input-text .placeholder=${t.namePlaceholder} .value=${title} @input=${(e) => this._handleTitleChange(e.target.value)}></calcite-input-text></calcite-label><calcite-label>${t.description}<calcite-text-area .placeholder=${t.descriptionPlaceholder} .value=${description} resize=none @input=${(e) => this._handleDescriptionChange(e.target.value)}></calcite-text-area></calcite-label></div></div><div class="tags-row"><calcite-label>${t.tags}${keyed(tags.join(","), html`<calcite-combobox .label=${t.tags} .placeholder=${t.tagsPlaceholder} selection-mode=multiple allow-custom-values @calciteComboboxChange=${(e) => this._handleTagsChange(e)}>${tags.map((tag) => html`<calcite-combobox-item .value=${tag} .heading=${tag} selected></calcite-combobox-item>`)}</calcite-combobox>`)}</calcite-label></div></div>`;
+    const e = this._translations, i = this._design?.solution?.thumbnailUrl || "", t = this._design?.solution?.title || "", a = this._design?.solution?.description || "", c = this._design?.solution?.tags || [];
+    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>`;
   }
   _renderActionButtons() {
-    const t = this._translations;
-    return html`<div class="action-buttons"><calcite-button appearance=solid width=full icon-start=launch>${t.deploy}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=diagram>${t.viewDiagram}</calcite-button><calcite-button appearance=outline kind=neutral width=full icon-start=information>${t.openHelp}</calcite-button><calcite-button appearance=outline kind=danger width=full icon-start=trash>${t.discard}</calcite-button></div>`;
+    const e = this._translations;
+    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>`;
   }
   _renderTabsSection() {
-    const t = this._translations;
-    return html`<div class="tabs-section"><calcite-tabs bordered layout=center><calcite-tab-nav slot=title-group><calcite-tab-title>${t.contents}</calcite-tab-title><calcite-tab-title icon-start=layers>${t.featureLayer}</calcite-tab-title></calcite-tab-nav><calcite-tab>${this._renderContentsTab()}</calcite-tab><calcite-tab>${this._renderFeatureLayerTab()}</calcite-tab></calcite-tabs></div>`;
+    const e = this._translations;
+    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>`;
   }
   _renderContentsTab() {
-    const t = this._translations;
-    const items = this._design?.items || [];
-    return html`<div><calcite-list .label=${t.solutionContentItems}>${items.map((item) => {
-      const actionId = `edit-action-${item.id}`;
-      return html`<calcite-list-item .label=${item.title} .description=${item.description || ""}><solution-item-icon slot=content-start .designType=${item.type}></solution-item-icon><calcite-action slot=actions-end id=${actionId ?? nothing} icon=edit-attributes .text=${t.edit} scale=s></calcite-action></calcite-list-item>`;
-    })}</calcite-list>${items.map((item) => {
-      const actionId = `edit-action-${item.id}`;
-      const popoverId = `edit-popover-${item.id}`;
-      const isEditingThisItem = this._openPopoverId === item.id;
-      return html`<calcite-popover id=${popoverId ?? nothing} .label=${t.editItemContent} .referenceElement=${actionId} placement=auto @calcitePopoverBeforeOpen=${() => this._handleItemPopoverOpen(item)} @calcitePopoverClose=${() => this._handleCloseItemPopover()}><div class="popover-content"><calcite-label>${t.title}<calcite-input-text .value=${isEditingThisItem ? this._editingItemTitle : item.title} @input=${(e) => {
-        this._editingItemTitle = e.target.value;
-      }}></calcite-input-text></calcite-label><calcite-label class="popover-field">${t.description}<calcite-text-area .value=${isEditingThisItem ? this._editingItemDescription : item.description} resize=none rows=4 @input=${(e) => {
-        this._editingItemDescription = e.target.value;
-      }}></calcite-text-area></calcite-label><div class="popover-actions"><calcite-button appearance=solid @click=${(e) => {
-        e.stopPropagation();
-        this._handleApplyItemChanges(item.id);
-      }}>${t.apply}</calcite-button><calcite-button appearance=outline @click=${async (e) => {
-        e.stopPropagation();
-        await this._handleClosePopover(popoverId);
-      }}>${t.close}</calcite-button></div></div></calcite-popover>`;
+    const e = this._translations, i = this._design?.items || [];
+    return n`<div><calcite-list .label=${e.solutionContentItems}>${i.map((t) => {
+      const a = `edit-action-${t.id}`;
+      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>`;
+    })}</calcite-list>${i.map((t) => {
+      const a = `edit-action-${t.id}`, c = `edit-popover-${t.id}`, s = this._openPopoverId === t.id;
+      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) => {
+        this._editingItemTitle = o.target.value;
+      }}></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) => {
+        this._editingItemDescription = o.target.value;
+      }}></calcite-text-area></calcite-label><div class="popover-actions"><calcite-button appearance=solid @click=${(o) => {
+        o.stopPropagation(), this._handleApplyItemChanges(t.id);
+      }}>${e.apply}</calcite-button><calcite-button appearance=outline @click=${async (o) => {
+        o.stopPropagation(), await this._handleClosePopover(c);
+      }}>${e.close}</calcite-button></div></div></calcite-popover>`;
     })}</div>`;
   }
   _renderFeatureLayerTab() {
-    return html`<div class="feature-layer-placeholder">\r\n        Feature Layer configuration will go here</div>`;
+    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";
+    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) => {
+      const r = this._getLayerTypeIcon(l.type);
+      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>`;
+    })}</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>`;
   }
 }
-customElement("solution-builder-assistant", SolutionBuilderAssistant);
+g("solution-builder-assistant", $);
 export {
-  SolutionBuilderAssistant
+  $ as SolutionBuilderAssistant
 };