@esri/solutions-components 1.2.0-next.96 → 1.2.0-next.97

package/dist/components/create-feature/customElement.js

@@ -1,22 +1,23 @@
-import { c as y } from "../../chunks/runtime.js";
-import { j as M, d as g } from "../../chunks/mapViewUtils.js";
-import { u as v } from "../../chunks/useT9n.js";
-import { css as b, html as p } from "lit";
-import { createRef as m, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as L, createEvent as l, noShadowRoot as V, safeClassMap as w } from "@arcgis/lumina";
-import S from "@arcgis/core/widgets/Editor";
-import E from "@arcgis/core/form/ExpressionInfo";
-import C from "@arcgis/core/layers/FeatureLayer";
-import F from "@arcgis/core/form/elements/FieldElement";
-import k from "@arcgis/core/form/FormTemplate";
-import A from "@arcgis/core/views/MapView";
-import x from "@arcgis/core/widgets/Home";
-import T from "@arcgis/core/widgets/Search";
-import * as c from "@arcgis/core/core/reactiveUtils";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.95 */
-const I = b`@layer{/** @license
+v1.2.0-next.96 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { j as getAllFeatureLayers, d as getLayerOrTable } from "../../chunks/mapViewUtils.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, noShadowRoot, safeClassMap } from "@arcgis/lumina";
+import Editor from "@arcgis/core/widgets/Editor";
+import ExpressionInfo from "@arcgis/core/form/ExpressionInfo";
+import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
+import FieldElement from "@arcgis/core/form/elements/FieldElement";
+import FormTemplate from "@arcgis/core/form/FormTemplate";
+import MapView from "@arcgis/core/views/MapView";
+import Home from "@arcgis/core/widgets/Home";
+import Search from "@arcgis/core/widgets/Search";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
+const styles = css`@layer{
+/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -30,22 +31,139 @@ const I = b`@layer{/** @license
  * 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.
- */:host{display:block}.hide-editor-toolbar .esri-editor__panel-toolbar{display:none!important}.esri-editor__panel-content{padding-block:0px!important}.esri-editor .esri-item-list__group__header,.esri-editor__panel-content__section .esri-widget__heading{display:none!important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px!important;padding-inline:10px!important}.search-widget{width:92%!important;margin:5px 14px 20px}.display-none{display:none!important}.hide-map{height:1%;visibility:hidden}.show-map{padding:10px!important;position:absolute!important;bottom:0;height:auto!important;width:calc(100% - 22px)}.notice-msg{padding:10px;width:calc(100% - 20px)}.edit-location-btn{margin:5px;display:flex}.esri-editor__panel-content{padding-block:10px!important}@media only screen and (max-width:600px){.esri-editor__panel-content{padding-block:0!important;min-height:0!important}}}`;
-class P extends L {
+ */
+
+:host {
+  display: block;
+}
+
+/* Override to hide Editor settings panel collapsible */
+.hide-editor-toolbar .esri-editor__panel-toolbar {
+  display: none !important;
+}
+
+/* Override to reduce the padding of panel content*/
+.esri-editor__panel-content {
+  padding-block: 0px !important;
+}
+
+/* Override to hide header */
+.esri-editor .esri-item-list__group__header {
+  display: none !important;
+}
+
+/* Override to hide the create feature heading title */
+.esri-editor__panel-content__section .esri-widget__heading {
+  display: none !important;
+}
+
+/* Override to reduce padding for the template filter*/
+.esri-editor .esri-item-list__filter-container--sticky {
+  padding-block: 0px !important;
+  padding-inline: 10px !important;
+}
+
+.search-widget {
+  width: 92% !important;
+  margin: 5px 14px 20px 14px;
+}
+
+.display-none {
+  display: none !important;
+}
+
+.hide-map {
+  height: 1%;
+  visibility: hidden;
+}
+
+.show-map {
+  padding: 10px !important;
+  position: absolute !important;
+  bottom: 0;
+  height: auto !important;
+  width: calc(100% - 22px);
+}
+
+.notice-msg {
+  padding: 10px;
+  width: calc(100% - 20px);
+}
+
+.edit-location-btn {
+  margin: 5px;
+  display: flex;
+}
+
+/* override the padding of the feature form */
+.esri-editor__panel-content {
+  padding-block: 10px !important;
+}
+
+/* overide css for editor widget in case of mobile */
+@media only screen and (max-width: 600px) {
+  .esri-editor__panel-content {
+    padding-block: 0 !important;
+    min-height: 0 !important;
+  }
+}
+}`;
+class CreateFeature extends LitElement {
   constructor() {
-    super(...arguments), this.customizeSubmit = !1, this.enableSearch = !1, this.enableSnapping = !1, this.floorLevel = "", this.isMobile = !1, this.selectedLayerId = "", this.showGuidingMsg = !0, this.submitNewReportsMessage = "", this.updateMapPosition = !1, this.reportingArea = !1, this.reportingAreaLayer = "", this.reportingAreaMessage = "", this.showSketchWidgets = !1, this.allowMultipleCreation = !1, this.popupEnabled = !1, this._currentPage = "templatePicker", this._editorLoading = !1, this._inValidGeomtryDrawn = !1, this._translations = v({ name: "create-feature", blocking: !0 }), this._addingAttachment = !1, this._calciteNotice = m(), this._isSubmitBtnClicked = !1, this._mapViewContainer = m(), this._searchDiv = m(), this._guidingMessageRefNode = m(), this.success = l(), this.fail = l(), this.drawComplete = l(), this.editingLocation = l(), this.editingAttachment = l(), this.progressStatus = l(), this.modeChanged = l();
+    super(...arguments);
+    this.customizeSubmit = false;
+    this.enableSearch = false;
+    this.enableSnapping = false;
+    this.floorLevel = "";
+    this.isMobile = false;
+    this.selectedLayerId = "";
+    this.showGuidingMsg = true;
+    this.submitNewReportsMessage = "";
+    this.updateMapPosition = false;
+    this.reportingArea = false;
+    this.reportingAreaLayer = "";
+    this.reportingAreaMessage = "";
+    this.showSketchWidgets = false;
+    this.allowMultipleCreation = false;
+    this.popupEnabled = false;
+    this.showLayerVisibilityMsg = false;
+    this._currentPage = "templatePicker";
+    this._editorLoading = false;
+    this._inValidGeomtryDrawn = false;
+    this._translations = useT9n({ name: "create-feature", blocking: true });
+    this._addingAttachment = false;
+    this._calciteNotice = createRef();
+    this._isSubmitBtnClicked = false;
+    this._mapViewContainer = createRef();
+    this._searchDiv = createRef();
+    this._guidingMessageRefNode = createRef();
+    this.success = createEvent();
+    this.fail = createEvent();
+    this.drawComplete = createEvent();
+    this.editingLocation = createEvent();
+    this.editingAttachment = createEvent();
+    this.progressStatus = createEvent();
+    this.modeChanged = createEvent();
   }
   static {
-    this.properties = { customizeSubmit: 5, enableSearch: 5, enableSnapping: 5, floorLevel: 1, formElements: 1, isMobile: 5, mapView: 0, searchConfiguration: 0, selectedLayerId: 1, showGuidingMsg: 5, submitNewReportsMessage: 1, updateMapPosition: 5, reportingArea: 5, reportingAreaLayer: 1, reportingAreaMessage: 1, showSketchWidgets: 5, allowMultipleCreation: 5, popupEnabled: 5, _currentPage: 16, _editorLoading: 16, _inValidGeomtryDrawn: 16, _translations: 16 };
+    this.properties = { customizeSubmit: [5, {}, { type: Boolean }], enableSearch: [5, {}, { type: Boolean }], enableSnapping: [5, {}, { type: Boolean }], floorLevel: 1, formElements: 1, isMobile: [5, {}, { type: Boolean }], mapView: [0, {}, { attribute: false }], searchConfiguration: [0, {}, { attribute: false }], selectedLayerId: 1, showGuidingMsg: [5, {}, { type: Boolean }], submitNewReportsMessage: 1, updateMapPosition: [5, {}, { type: Boolean }], reportingArea: [5, {}, { type: Boolean }], reportingAreaLayer: 1, reportingAreaMessage: 1, showSketchWidgets: [5, {}, { type: Boolean }], allowMultipleCreation: [5, {}, { type: Boolean }], popupEnabled: [5, {}, { type: Boolean }], showLayerVisibilityMsg: [5, {}, { type: Boolean }], _currentPage: [16, {}, { state: true }], _editorLoading: [16, {}, { state: true }], _inValidGeomtryDrawn: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = I;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = V;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("mapView") && this.hasUpdated && this.mapViewWatchHandler(), e.has("isMobile") && this.hasUpdated && this.isMobileHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
+  willUpdate(changes) {
+    if (changes.has("mapView") && this.hasUpdated) {
+      void this.mapViewWatchHandler();
+    }
+    if (changes.has("isMobile") && this.hasUpdated) {
+      void this.isMobileHandler();
+    }
+    if (changes.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== false)) {
+      void this._editorLoadingWatchHandler(this._editorLoading);
+    }
   }
   async mapViewWatchHandler() {
     this.mapView && await this.mapView.when(async () => {
@@ -55,284 +173,487 @@ class P extends L {
   async isMobileHandler() {
     this.modeChanged.emit();
   }
-  async _editorLoadingWatchHandler(e) {
-    if (e) {
-      if (this._container?.classList.add("display-none"), this._selectedLayer?.isTable) {
+  async _editorLoadingWatchHandler(v) {
+    if (v) {
+      this._container?.classList.add("display-none");
+      if (this._selectedLayer?.isTable) {
         if (this._selectedLayer.templates && this._editor) {
-          const t = this._selectedLayer.templates[0], o = {
+          const template = this._selectedLayer.templates[0];
+          const creationInfo = {
             layer: this._selectedLayer,
-            template: t
+            template
           };
-          await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(o), await this.hideEditorsElements();
+          await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
+          await this.hideEditorsElements();
         }
-      } else
+      } else {
         await this.startCreate();
-      this._container?.classList.remove("display-none"), this._editorLoading = !1;
+      }
+      this._container?.classList.remove("display-none");
+      this._editorLoading = false;
     }
   }
   async submit() {
-    this._editor?.viewModel?.featureFormViewModel && (this._isSubmitBtnClicked = !0, this._editor.viewModel.featureFormViewModel.submit());
+    if (this._editor?.viewModel?.featureFormViewModel) {
+      this._isSubmitBtnClicked = true;
+      this._editor.viewModel.featureFormViewModel.submit();
+    }
   }
-  async refresh(e) {
-    this._editor && (e ? await this._setFloorLevel(e) : this.reportingArea && this.reportingAreaLayer && this._currentPage !== "drawing" ? await this.queryIntersectingFeatures() : this._currentPage !== "drawing" && (this._inValidGeomtryDrawn = !1, this.drawComplete.emit(this._inValidGeomtryDrawn)));
+  async refresh(floorLevel) {
+    if (this._editor) {
+      if (floorLevel) {
+        await this._setFloorLevel(floorLevel);
+      } else {
+        if (this.reportingArea && this.reportingAreaLayer && this._currentPage !== "drawing") {
+          await this.queryIntersectingFeatures();
+        } else if (this._currentPage !== "drawing") {
+          this._inValidGeomtryDrawn = false;
+          this.drawComplete.emit(this._inValidGeomtryDrawn);
+        }
+      }
+    }
   }
   async showForm() {
-    this.progressStatus.emit(100), this._container?.classList.remove("display-none"), this._mapViewContainer.value?.classList?.replace("show-map", "hide-map"), this._currentPage = "featureForm";
+    this.progressStatus.emit(100);
+    this._container?.classList.remove("display-none");
+    this._mapViewContainer.value?.classList?.replace("show-map", "hide-map");
+    this._currentPage = "featureForm";
   }
   async loaded() {
     await this.init();
   }
   async updated() {
     if (this.isMobile && this.updateMapPosition) {
-      const e = this._currentPage === "drawing" ? 80 : 30, t = this.enableSearch ? this._searchDiv.value?.offsetHeight : 0;
+      const customHeight = this._currentPage === "drawing" ? 80 : 30;
+      const searchDiv = this.enableSearch ? this._searchDiv.value?.offsetHeight : 0;
       await this._calciteNotice.value?.componentOnReady();
-      const i = (this._calciteNotice.value?.offsetHeight || 0) + t + e;
-      this._mapViewContainer.value && (this._mapViewContainer.value.style.top = `${i}px`);
+      const calciteNotice = this._calciteNotice.value?.offsetHeight || 0;
+      const top = calciteNotice + searchDiv + customHeight;
+      if (this._mapViewContainer.value) {
+        this._mapViewContainer.value.style.top = `${top}px`;
+      }
+    }
+    if (this.reportingAreaMessage && this._guidingMessageRefNode.value?.children[0]) {
+      this._guidingMessageRefNode.value.children[0].style.margin = "0px";
     }
-    this.reportingAreaMessage && this._guidingMessageRefNode.value?.children[0] && (this._guidingMessageRefNode.value.children[0].style.margin = "0px");
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._editor && (this._editor.viewModel.sketchViewModel && this._editor.viewModel.sketchViewModel?.destroy(), this._editor.destroy(), this.enableSnapping && this.mapView?.ui.view && ((this.mapView?.ui.view).grid = null));
+    super.disconnectedCallback();
+    if (this._editor) {
+      if (this._editor.viewModel.sketchViewModel) {
+        this._editor.viewModel.sketchViewModel?.destroy();
+      }
+      this._editor.destroy();
+      if (this.enableSnapping && this.mapView?.ui.view) {
+        (this.mapView?.ui.view).grid = null;
+      }
+    }
   }
   render() {
-    const e = this._currentPage === "drawing" || this._currentPage === "editing" ? "" : "display-none", t = this._editorLoading ? "" : "display-none", o = this._editorLoading ? "display-none" : "", i = this.isMobile && this.updateMapPosition ? "show-map" : "display-none", s = this._inValidGeomtryDrawn ? "danger" : "success", d = this._inValidGeomtryDrawn ? "exclamation-mark-triangle" : "lightbulb", a = this.showGuidingMsg && this._currentPage !== "templatePicker";
-    let n = this._translations.chooseCategoryMsg;
-    return this._inValidGeomtryDrawn ? n = this.reportingAreaMessage || this._translations.reportOutsideAreaMessage : this._currentPage === "drawing" || this._currentPage === "editing" ? n = this._translations.provideLocationMsg : this._currentPage === "featureForm" && (n = this._translations.provideDetailsMsg), p`${a && p`<calcite-notice class="notice-msg" .icon=${d} .kind=${s} open ${u(this._calciteNotice)}><div slot=message .innerHTML=${n ?? ""} ${u(this._guidingMessageRefNode)}></div></calcite-notice>` || ""}<calcite-loader class=${w(t)} label scale=s></calcite-loader>${this._currentPage === "featureForm" && this.isMobile && p`<calcite-button appearance=transparent class="edit-location-btn" icon-start=pin @click=${this.editLocation}>${this._translations.editLocationLabel}</calcite-button>` || ""}<div class=${w(o)} id=feature-form></div>${this.enableSearch && p`<div class=${`search-widget ${e} ${o}`} id=search-widget-ref ${u(this._searchDiv)}></div>` || ""}<div class=${w(i)} ${u(this._mapViewContainer)}></div>`;
+    const showSearchWidget = this._currentPage === "drawing" || this._currentPage === "editing" ? "" : "display-none";
+    const loaderClass = this._editorLoading ? "" : "display-none";
+    const featureFormClass = this._editorLoading ? "display-none" : "";
+    const mobileMapClass = this.isMobile && this.updateMapPosition ? "show-map" : "display-none";
+    const noticeKind = this._inValidGeomtryDrawn ? "danger" : "success";
+    const icon = this._inValidGeomtryDrawn ? "exclamation-mark-triangle" : "lightbulb";
+    const showLayerVisibilityGuidingMsgAtTemplatePickerPage = this.showLayerVisibilityMsg && this._currentPage === "templatePicker";
+    const showGuidingMsg = this.showGuidingMsg || showLayerVisibilityGuidingMsgAtTemplatePickerPage;
+    let guidingMsg = this._translations.chooseCategoryMsg;
+    if (this._inValidGeomtryDrawn) {
+      guidingMsg = this.reportingAreaMessage || this._translations.reportOutsideAreaMessage;
+    } else if (this._currentPage === "drawing" || this._currentPage === "editing") {
+      guidingMsg = this._translations.provideLocationMsg;
+    } else if (this._currentPage === "featureForm") {
+      guidingMsg = this._translations.provideDetailsMsg;
+    } else if (showLayerVisibilityGuidingMsgAtTemplatePickerPage) {
+      guidingMsg = this._translations.enableFeatureTemplatesMessage;
+    }
+    return html`${showGuidingMsg && html`<calcite-notice class="notice-msg" .icon=${icon} .kind=${noticeKind} open ${ref(this._calciteNotice)}><div slot=message .innerHTML=${guidingMsg ?? ""} ${ref(this._guidingMessageRefNode)}></div></calcite-notice>` || ""}<calcite-loader class=${safeClassMap(loaderClass)} label scale=s></calcite-loader>${this._currentPage === "featureForm" && this.isMobile && html`<calcite-button appearance=transparent class="edit-location-btn" icon-start=pin @click=${this.editLocation}>${this._translations.editLocationLabel}</calcite-button>` || ""}<div class=${safeClassMap(featureFormClass)} id=feature-form></div>${this.enableSearch && html`<div class=${`search-widget ${showSearchWidget} ${featureFormClass}`} id=search-widget-ref ${ref(this._searchDiv)}></div>` || ""}<div class=${safeClassMap(mobileMapClass)} ${ref(this._mapViewContainer)}></div>`;
   }
   async init() {
-    this.mapView && this.selectedLayerId && (this._updatedMapView = this.mapView, await (this.isMobile && this.updateMapPosition ? this.createMobileMapView() : this._loadWidgets()));
+    if (this.mapView && this.selectedLayerId) {
+      this._updatedMapView = this.mapView;
+      await (this.isMobile && this.updateMapPosition ? this.createMobileMapView() : this._loadWidgets());
+    }
   }
   async createMobileMapView() {
-    this._mapViewContainer.value && this.mapView && (this._mapViewContainer.value.classList.add("hide-map"), await new A({
-      map: this.mapView.map,
-      container: this._mapViewContainer.value,
-      zoom: this.mapView.zoom,
-      center: this.mapView.center,
-      popupEnabled: this.popupEnabled
-    }).when((e) => {
-      this._updatedMapView = e;
-      const t = new x({
-        view: this._updatedMapView
+    if (this._mapViewContainer.value && this.mapView) {
+      this._mapViewContainer.value.classList.add("hide-map");
+      await new MapView({
+        map: this.mapView.map,
+        container: this._mapViewContainer.value,
+        zoom: this.mapView.zoom,
+        center: this.mapView.center,
+        popupEnabled: this.popupEnabled
+      }).when((view) => {
+        this._updatedMapView = view;
+        const home = new Home({
+          view: this._updatedMapView
+        });
+        if (home) {
+          this._updatedMapView.ui.add(home, "top-left");
+        }
+        void this._loadWidgets();
+      }, (e) => {
+        console.log(e);
       });
-      t && this._updatedMapView.ui.add(t, "top-left"), this._loadWidgets();
-    }, (e) => {
-      console.log(e);
-    }));
+    }
   }
   async _loadWidgets() {
-    await this.createEditorWidget(), this.enableSearch && await this.createSearchWidget();
+    await this.createEditorWidget();
+    if (this.enableSearch) {
+      await this.createSearchWidget();
+    }
   }
   async createEditorWidget() {
-    this._editor && this._editor.destroy();
-    const e = [];
-    this._container = document.createElement("div"), this._container?.classList.add("display-none"), this.enableSnapping || this._container.classList.add("hide-editor-toolbar");
-    const t = this._updatedMapView && await M(this._updatedMapView), o = this.mapView && await g(this.mapView, this.selectedLayerId);
-    if (o && (this._selectedLayer = o, !this._selectedLayer?.isTable && t && t.forEach((i) => {
-      e.push({
-        layer: i,
-        enabled: i?.type === "feature" && i?.id === this.selectedLayerId,
-        addEnabled: !0,
-        // default is true, set to false to disable the ability to add a new feature
-        updateEnabled: !1,
-        // if true, enable ability to edit an existing feature
-        deleteEnabled: !1
-        // default is true, set to false to disable the ability to delete features
-      });
-    })), this._editor = new S({
+    if (this._editor) {
+      this._editor.destroy();
+    }
+    const layerInfos = [];
+    this._container = document.createElement("div");
+    this._container?.classList.add("display-none");
+    if (!this.enableSnapping) {
+      this._container.classList.add("hide-editor-toolbar");
+    }
+    const allMapLayers = this._updatedMapView && await getAllFeatureLayers(this._updatedMapView);
+    const selectedLayer = this.mapView && await getLayerOrTable(this.mapView, this.selectedLayerId);
+    if (selectedLayer) {
+      this._selectedLayer = selectedLayer;
+      if (!this._selectedLayer?.isTable && allMapLayers) {
+        allMapLayers.forEach((layer) => {
+          layerInfos.push({
+            layer,
+            enabled: layer?.type === "feature" && layer?.id === this.selectedLayerId,
+            addEnabled: true,
+            // default is true, set to false to disable the ability to add a new feature
+            updateEnabled: false,
+            // if true, enable ability to edit an existing feature
+            deleteEnabled: false
+            // default is true, set to false to disable the ability to delete features
+          });
+        });
+      }
+    }
+    this._editor = new Editor({
       view: this._updatedMapView,
-      layerInfos: e,
+      layerInfos,
       visibleElements: {
         settingsMenu: this.enableSnapping,
         snappingControls: this.enableSnapping,
-        createFeaturesSection: !0,
-        editFeaturesSection: !1,
-        flow: !0,
+        createFeaturesSection: true,
+        editFeaturesSection: false,
+        flow: true,
         sketch: this.showSketchWidgets && this._selectedLayer?.geometryType !== "point"
       },
       container: this._container
-    }), this._mapViewContainer.value ? this.el.insertBefore(this._container, this._mapViewContainer.value) : this.el.appendChild(this._container), this._selectedLayer?.isTable && (this._editorLoading = !0), this._editor) {
-      const i = c.watch(() => this._editor?.viewModel.state, (r) => {
-        r === "adding-attachment" || r === "editing-attachment" ? (this._addingAttachment = !0, this.editingAttachment.emit(!0)) : this._addingAttachment && (this.editingAttachment.emit(!1), this._addingAttachment = !1);
+    });
+    if (this._mapViewContainer.value) {
+      this.el.insertBefore(this._container, this._mapViewContainer.value);
+    } else {
+      this.el.appendChild(this._container);
+    }
+    if (this._selectedLayer?.isTable) {
+      this._editorLoading = true;
+    }
+    if (this._editor) {
+      const attachmentHandle = reactiveUtils.watch(() => this._editor?.viewModel.state, (state) => {
+        if (state === "adding-attachment" || state === "editing-attachment") {
+          this._addingAttachment = true;
+          this.editingAttachment.emit(true);
+        } else {
+          if (this._addingAttachment) {
+            this.editingAttachment.emit(false);
+            this._addingAttachment = false;
+          }
+        }
       });
-      i && this._editor.viewModel.addHandles(i);
-      const s = c?.watch(() => this._editor?.viewModel.featureTemplatesViewModel.state, (r) => {
-        r === "ready" && this._editor?.viewModel?.activeWorkflow?.type !== "create-features" && (this.progressStatus.emit(50), this._editorLoading = !0);
+      attachmentHandle && this._editor.viewModel.addHandles(attachmentHandle);
+      const handle = reactiveUtils?.watch(() => this._editor?.viewModel.featureTemplatesViewModel.state, (state) => {
+        if (state === "ready" && this._editor?.viewModel?.activeWorkflow?.type !== "create-features") {
+          this.progressStatus.emit(50);
+          this._editorLoading = true;
+        }
       });
-      s && this._editor.viewModel.addHandles(s);
-      const d = c?.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (r) => {
-        r === "ready" && this._editor?.viewModel.featureFormViewModel && this._currentPage !== "editing" && (this._mapViewContainer.value?.classList?.replace("show-map", "hide-map"), this._editor.viewModel.featureFormViewModel.addHandles(this._editor.viewModel.featureFormViewModel.on("submit", this.submitted.bind(this))), setTimeout(() => {
-          this._setFloorLevel(this.floorLevel);
-        }, 50), !this.allowMultipleCreation && this._editor.activeWorkflow && (this._editor.activeWorkflow.data.creationInfo.maxFeatures = 1), this._currentPage = "featureForm", this.progressStatus.emit(100), this.drawComplete.emit(!1));
+      handle && this._editor.viewModel.addHandles(handle);
+      const formHandle = reactiveUtils?.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (state) => {
+        if (state === "ready" && this._editor?.viewModel.featureFormViewModel && this._currentPage !== "editing") {
+          this._mapViewContainer.value?.classList?.replace("show-map", "hide-map");
+          this._editor.viewModel.featureFormViewModel.addHandles(this._editor.viewModel.featureFormViewModel.on("submit", this.submitted.bind(this)));
+          setTimeout(() => {
+            void this._setFloorLevel(this.floorLevel);
+          }, 50);
+          if (!this.allowMultipleCreation && this._editor.activeWorkflow) {
+            this._editor.activeWorkflow.data.creationInfo.maxFeatures = 1;
+          }
+          this._currentPage = "featureForm";
+          this.progressStatus.emit(100);
+          this.drawComplete.emit(false);
+        }
       });
-      d && this._editor.viewModel.addHandles(d);
-      const a = c.watch(() => this._editor?.viewModel.state, (r) => {
-        r === "creating-features" && this._editor?.viewModel.featureFormViewModel && this._editor.viewModel.featureFormViewModel.state === "disabled" && (this._mapViewContainer.value?.classList?.replace("hide-map", "show-map"), this._selectedLayer && !this._selectedLayer.isTable && (this._currentPage = "drawing"));
+      formHandle && this._editor.viewModel.addHandles(formHandle);
+      const createFeatureHandle = reactiveUtils.watch(() => this._editor?.viewModel.state, (state) => {
+        if (state === "creating-features" && this._editor?.viewModel.featureFormViewModel) {
+          if (this._editor.viewModel.featureFormViewModel.state === "disabled") {
+            this._mapViewContainer.value?.classList?.replace("hide-map", "show-map");
+            if (this._selectedLayer && !this._selectedLayer.isTable) {
+              this._currentPage = "drawing";
+            }
+          }
+        }
       });
-      a && this._editor.viewModel.addHandles(a), this._editor.on("sketch-create", async (r) => {
-        r.detail.state === "complete" && (this._drawnGeometry = r.detail.graphic?.geometry, this.reportingArea && this.reportingAreaLayer && await this.queryIntersectingFeatures());
+      createFeatureHandle && this._editor.viewModel.addHandles(createFeatureHandle);
+      this._editor.on("sketch-create", async (e) => {
+        if (e.detail.state === "complete") {
+          this._drawnGeometry = e.detail.graphic?.geometry;
+          if (this.reportingArea && this.reportingAreaLayer) {
+            await this.queryIntersectingFeatures();
+          }
+        }
       });
-      let n;
-      this._editor.on("sketch-update", (r) => {
-        clearTimeout(n), n = window.setTimeout(async () => {
-          this._drawnGeometry = r.detail.graphics[0].geometry, this.reportingArea && this.reportingAreaLayer && await this.queryIntersectingFeatures();
+      let debounceTimer;
+      this._editor.on("sketch-update", (e) => {
+        clearTimeout(debounceTimer);
+        debounceTimer = window.setTimeout(async () => {
+          this._drawnGeometry = e.detail.graphics[0].geometry;
+          if (this.reportingArea && this.reportingAreaLayer) {
+            await this.queryIntersectingFeatures();
+          }
         }, 50);
       });
     }
   }
   async queryIntersectingFeatures() {
-    const e = this.mapView && await g(this.mapView, this.reportingAreaLayer);
-    if (e) {
-      const t = e.createQuery();
-      t.geometry = this._drawnGeometry, t.spatialRelationship = "intersects";
-      const i = await e.queryFeatureCount(t) === 0;
-      this._inValidGeomtryDrawn = i, this.drawComplete.emit(this._inValidGeomtryDrawn);
+    const polygonLayer = this.mapView && await getLayerOrTable(this.mapView, this.reportingAreaLayer);
+    if (polygonLayer) {
+      const query = polygonLayer.createQuery();
+      query.geometry = this._drawnGeometry;
+      query.spatialRelationship = "intersects";
+      const intersectingCount = await polygonLayer.queryFeatureCount(query);
+      const nonValidGeomtryDrawn = intersectingCount === 0;
+      this._inValidGeomtryDrawn = nonValidGeomtryDrawn;
+      this.drawComplete.emit(this._inValidGeomtryDrawn);
     }
   }
   editLocation() {
-    this.progressStatus.emit(75), this.editingLocation.emit(), this._container?.classList.add("display-none"), this._mapViewContainer.value?.classList.replace("hide-map", "show-map"), this._currentPage = "editing";
+    this.progressStatus.emit(75);
+    this.editingLocation.emit();
+    this._container?.classList.add("display-none");
+    this._mapViewContainer.value?.classList.replace("hide-map", "show-map");
+    this._currentPage = "editing";
   }
   async startCreate() {
-    return await this.hideEditorsElements(), new Promise((e, t) => {
+    await this.hideEditorsElements();
+    return new Promise((resolve, reject) => {
       if (this._editor?.viewModel.featureTemplatesViewModel.items?.length) {
-        const o = this._editor.viewModel.featureTemplatesViewModel.items[0].items;
+        const items = this._editor.viewModel.featureTemplatesViewModel.items[0].items;
         this._editor.viewModel.featureTemplatesViewModel.addHandles(this._editor.viewModel.featureTemplatesViewModel.on("select", () => {
-          this.progressStatus.emit(75), setTimeout(() => {
+          this.progressStatus.emit(75);
+          setTimeout(() => {
             this.hideEditorsElements().then(() => {
-              e({});
-            }, (s) => t(s));
+              resolve({});
+            }, (e) => reject(e));
           }, 700);
-        })), o.length === 1 && this._editor.viewModel.featureTemplatesViewModel.select(o[0]);
-        const i = o.length > 1;
+        }));
+        if (items.length === 1) {
+          this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+        }
+        const resolvePromise = items.length > 1;
         this.hideEditorsElements().then(() => {
-          i && e({});
-        }, (s) => i && t(s));
+          if (resolvePromise) {
+            resolve({});
+          }
+        }, (e) => resolvePromise && reject(e));
       }
     });
   }
   async createSearchWidget() {
     if (this._updatedMapView) {
-      let e = {
+      let searchOptions = {
         view: this._updatedMapView
       };
-      if (this.searchConfiguration && (e = {
-        ...this._getSearchConfig(this.searchConfiguration, this._updatedMapView)
-      }), this._search = new T(e), !this._search)
+      if (this.searchConfiguration) {
+        const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this._updatedMapView);
+        searchOptions = {
+          ...searchConfiguration
+        };
+      }
+      this._search = new Search(searchOptions);
+      if (!this._search) {
         return;
-      this._search.container = "search-widget-ref", this._search.popupEnabled = !1, this._search.resultGraphicEnabled = !1;
-      let t;
-      this._search.viewModel.addHandles(this._search.on("search-complete", (i) => {
-        i.results[0].results && i.results[0].results[0] && (i.results[0].results[0].extent && this._updatedMapView?.goTo(i.results[0].results[0].extent), this._selectedLayer?.geometryType === "point" && (t = i.results[0].results[0]?.feature.geometry));
-      }));
-      const o = c.watch(() => this._search?.viewModel.state, (i) => {
-        i === "ready" && setTimeout(() => {
-          if (this._editor?.viewModel.sketchViewModel?.createGraphic && t) {
-            const s = t.clone(), a = this._editor.viewModel.sketchViewModel.createGraphic.set("geometry", t).clone();
-            this._editor.viewModel.sketchViewModel.addGraphic(a), this._editor.viewModel.sketchViewModel.emit("create", {
-              graphic: a,
-              state: "complete",
-              toolEventInfo: null,
-              type: "create"
-            }), this._editor.viewModel.sketchViewModel.update(s), this.hideEditorsElements();
-          } else if (this._editor?.viewModel.sketchViewModel && this._editor.viewModel.sketchViewModel.updateGraphics.length > 0 && t) {
-            const s = this._editor?.viewModel.sketchViewModel?.updateGraphics.getItemAt(0);
-            s && (s.set("geometry", t), this._editor?.viewModel.sketchViewModel?.update(s), this.hideEditorsElements());
+      }
+      this._search.container = "search-widget-ref";
+      this._search.popupEnabled = false;
+      this._search.resultGraphicEnabled = false;
+      let pointGeometry = void 0;
+      this._search.viewModel.addHandles(this._search.on("search-complete", (e) => {
+        if (e.results[0].results && e.results[0].results[0]) {
+          e.results[0].results[0].extent && void this._updatedMapView?.goTo(e.results[0].results[0].extent);
+          if (this._selectedLayer?.geometryType === "point") {
+            pointGeometry = e.results[0].results[0]?.feature.geometry;
           }
-        }, 100);
+        }
+      }));
+      const createFeatureHandle = reactiveUtils.watch(() => this._search?.viewModel.state, (state) => {
+        if (state === "ready") {
+          setTimeout(() => {
+            if (this._editor?.viewModel.sketchViewModel?.createGraphic && pointGeometry) {
+              const geomClone = pointGeometry.clone();
+              const graphic = this._editor.viewModel.sketchViewModel.createGraphic.set("geometry", pointGeometry);
+              const graphicClone = graphic.clone();
+              this._editor.viewModel.sketchViewModel.addGraphic(graphicClone);
+              this._editor.viewModel.sketchViewModel.emit("create", {
+                graphic: graphicClone,
+                state: "complete",
+                toolEventInfo: null,
+                type: "create"
+              });
+              this._editor.viewModel.sketchViewModel.update(geomClone);
+              void this.hideEditorsElements();
+            } else if (this._editor?.viewModel.sketchViewModel && this._editor.viewModel.sketchViewModel.updateGraphics.length > 0 && pointGeometry) {
+              const graphic = this._editor?.viewModel.sketchViewModel?.updateGraphics.getItemAt(0);
+              if (graphic) {
+                graphic.set("geometry", pointGeometry);
+                void this._editor?.viewModel.sketchViewModel?.update(graphic);
+                void this.hideEditorsElements();
+              }
+            }
+          }, 100);
+        }
       });
-      o && this._search.viewModel.addHandles(o);
+      createFeatureHandle && this._search.viewModel.addHandles(createFeatureHandle);
     }
   }
-  _getSearchConfig(e, t) {
-    const o = "includeDefaultSources", i = e.sources;
-    return i && i?.length > 0 ? (e[o] = !1, i.forEach((s) => {
-      if (s.hasOwnProperty("layer")) {
-        const a = s, n = a.layer?.id, r = n ? t.map?.findLayerById(n) : "", h = a?.layer?.url;
-        r ? a.layer = r : h && (a.layer = new C(h));
-      }
-    }), i?.forEach((s) => {
-      if (s.hasOwnProperty("locator")) {
-        const a = s;
-        if (a?.name === "ArcGIS World Geocoding Service") {
-          const n = a.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
-          a.outFields = n, a.singleLineFieldName = "SingleLine";
+  _getSearchConfig(searchConfiguration, view) {
+    const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
+    const sources = searchConfiguration.sources;
+    if (sources && sources?.length > 0) {
+      searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
+      sources.forEach((source) => {
+        const isLayerSource = source.hasOwnProperty("layer");
+        if (isLayerSource) {
+          const layerSource = source;
+          const layerId = layerSource.layer?.id;
+          const layerFromMap = layerId ? view.map?.findLayerById(layerId) : "";
+          const layerUrl = layerSource?.layer?.url;
+          if (layerFromMap) {
+            layerSource.layer = layerFromMap;
+          } else if (layerUrl) {
+            layerSource.layer = new FeatureLayer(layerUrl);
+          }
         }
-        a.url = a.url, delete a.url;
-      }
-    })) : e = {
-      ...e,
-      includeDefaultSources: !0
-    }, e;
+      });
+      sources?.forEach((source) => {
+        const isLocatorSource = source.hasOwnProperty("locator");
+        if (isLocatorSource) {
+          const locatorSource = source;
+          if (locatorSource?.name === "ArcGIS World Geocoding Service") {
+            const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+            locatorSource.outFields = outFields;
+            locatorSource.singleLineFieldName = "SingleLine";
+          }
+          locatorSource.url = locatorSource.url;
+          delete locatorSource.url;
+        }
+      });
+    } else {
+      searchConfiguration = {
+        ...searchConfiguration,
+        includeDefaultSources: true
+      };
+    }
+    return searchConfiguration;
   }
-  async _setFloorLevel(e) {
-    if (!e)
+  async _setFloorLevel(level) {
+    if (!level) {
       return;
-    const t = this._selectedLayer, o = t?.floorInfo?.floorField;
-    if (o) {
-      const i = t.fields.find((s) => s.name === o);
-      if (i && !t?.formTemplate)
-        this._editor?.viewModel.featureFormViewModel && (this._editor.viewModel.featureFormViewModel.setValue(i.name, e), i.editable = !1);
-      else if (t.formTemplate && this.formElements) {
-        const s = new E({
-          expression: `'${e}'`,
+    }
+    const layer = this._selectedLayer;
+    const floorField = layer?.floorInfo?.floorField;
+    if (floorField) {
+      const layerField = layer.fields.find((field) => field.name === floorField);
+      if (layerField && !layer?.formTemplate) {
+        if (this._editor?.viewModel.featureFormViewModel) {
+          this._editor.viewModel.featureFormViewModel.setValue(layerField.name, level);
+          layerField.editable = false;
+        }
+      } else if (layer.formTemplate && this.formElements) {
+        const floorInfoExpression = new ExpressionInfo({
+          expression: `'${level}'`,
           name: "floor-info-test",
           title: "Floor Info",
           returnType: "string"
-        }), d = new F({
-          label: o,
+        });
+        const levelIdFieldElement = new FieldElement({
+          label: floorField,
           editableExpression: "false",
-          fieldName: o,
+          fieldName: floorField,
           input: {
             type: "text-box",
             maxLength: 50,
             minLength: 0
           },
-          valueExpression: s.name
+          valueExpression: floorInfoExpression.name
         });
-        this._updatedMapView?.map.editableLayers.forEach((a) => {
-          const n = this.formElements.orgElements, r = this.formElements.orgExpressionInfos, h = [...n];
-          if (h.push(d), a.type === "feature") {
-            const f = a, _ = new k({
-              title: f?.formTemplate?.title,
-              description: f?.formTemplate?.description,
-              elements: h,
-              expressionInfos: [s].concat(r)
+        this._updatedMapView?.map.editableLayers.forEach((layer2) => {
+          const orgElements = this.formElements.orgElements;
+          const orgExpressionInfos = this.formElements.orgExpressionInfos;
+          const elements = [...orgElements];
+          elements.push(levelIdFieldElement);
+          if (layer2.type === "feature") {
+            const featureLayer = layer2;
+            const floorInfoTemplate = new FormTemplate({
+              title: featureLayer?.formTemplate?.title,
+              description: featureLayer?.formTemplate?.description,
+              elements,
+              expressionInfos: [floorInfoExpression].concat(orgExpressionInfos)
             });
-            a.formTemplate = _;
+            layer2.formTemplate = floorInfoTemplate;
           }
         });
       }
     }
   }
   async hideEditorsElements() {
-    this.customizeSubmit && (await this.timeout(700), this.el.querySelector(".esri-editor")?.querySelectorAll("calcite-flow-item")?.forEach((e) => {
-      const t = e.shadowRoot?.querySelector("calcite-panel")?.shadowRoot?.querySelector("article");
-      t?.querySelector("header")?.setAttribute("style", "display: none"), t?.querySelector("footer")?.setAttribute("style", "display: none");
-    }));
+    if (!this.customizeSubmit) {
+      return;
+    }
+    await this.timeout(700);
+    this.el.querySelector(".esri-editor")?.querySelectorAll("calcite-flow-item")?.forEach((flowItem) => {
+      const article = flowItem.shadowRoot?.querySelector("calcite-panel")?.shadowRoot?.querySelector("article");
+      article?.querySelector("header")?.setAttribute("style", "display: none");
+      article?.querySelector("footer")?.setAttribute("style", "display: none");
+    });
   }
-  async submitted(e) {
-    if (e.invalid.length) {
-      this._isSubmitBtnClicked = !1;
+  async submitted(_evt) {
+    if (_evt.invalid.length) {
+      this._isSubmitBtnClicked = false;
       return;
     }
     if (this._isSubmitBtnClicked) {
-      this._isSubmitBtnClicked = !1;
+      this._isSubmitBtnClicked = false;
       try {
-        this._editor?.activeWorkflow && (await this._editor.activeWorkflow.commit(), this._editor.viewModel.failures?.length && this._editor.viewModel.failures.some((t) => {
-          if (t.error)
-            throw t.error;
-        }));
-      } catch (t) {
-        this.fail.emit(t);
+        if (this._editor?.activeWorkflow) {
+          await this._editor.activeWorkflow.commit();
+          if (this._editor.viewModel.failures?.length) {
+            this._editor.viewModel.failures.some((failure) => {
+              if (failure.error) {
+                throw failure.error;
+              }
+            });
+          }
+        }
+      } catch (e) {
+        this.fail.emit(e);
         return;
       }
       this.success.emit();
     }
   }
-  async timeout(e) {
-    return new Promise((t) => setTimeout(t, e));
+  async timeout(delay) {
+    return new Promise((resolve) => setTimeout(resolve, delay));
   }
 }
-y("create-feature", P);
+customElement("create-feature", CreateFeature);
 export {
-  P as CreateFeature
+  CreateFeature
 };