@esri/solutions-components 5.1.0-next.157 → 5.1.0-next.159

package/dist/components/buffer-tools/customElement.d.ts

@@ -31,7 +31,11 @@ export abstract class BufferTools extends LitElement {
    * @default 'text'
    */
   accessor appearance: "slider" | "text";
-  /** @default false */
+  /**
+   * boolean: When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
   accessor disabled: boolean;
   /**
    * number: The distance used for buffer

package/dist/components/card-manager/customElement.d.ts

@@ -117,6 +117,8 @@ export abstract class CardManager extends LitElement {
   readonly backFromCreateWorkFlow: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emits when create work flow started */
   readonly createWorkFlowStarted: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when the paste action should be disabled */
+  readonly disablePaste: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emits when feature/record is submitted */
   readonly featureOrRecordSubmitted: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when the features have been copied to the clipboard */
@@ -126,6 +128,7 @@ export abstract class CardManager extends LitElement {
   readonly "@eventTypes": {
     backFromCreateWorkFlow: CardManager["backFromCreateWorkFlow"]["detail"];
     createWorkFlowStarted: CardManager["createWorkFlowStarted"]["detail"];
+    disablePaste: CardManager["disablePaste"]["detail"];
     featureOrRecordSubmitted: CardManager["featureOrRecordSubmitted"]["detail"];
     featuresCopied: CardManager["featuresCopied"]["detail"];
     featuresPasted: CardManager["featuresPasted"]["detail"];

package/dist/components/card-manager/customElement.js

@@ -1,25 +1,36 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as w } from "../../chunks/runtime.js";
-import { css as g, html as o } from "lit";
+import { css as b, html as o } from "lit";
 import { a as h } from "../../chunks/queryUtils.js";
 import { g as f } from "../../chunks/mapViewUtils.js";
-import { u as _ } from "../../chunks/useT9n.js";
-import { createRef as p, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as y, createEvent as r, noShadowRoot as F, safeClassMap as v } from "@arcgis/lumina";
-const $ = g`@layer{:host{display:block!important}.display-none{display:none}.padding-1{padding:1rem}.position-relative{position:relative}.overflow-auto{overflow:auto}.height-full{height:100%}.paste-component{--arcgis-paste-height: 100%;--arcgis-paste-width: 100%;height:100%;width:100%}.position-static{position:static!important}.z-index-500{z-index:500!important}.margin-top-10{margin-top:10px}card-manager{display:block}}`;
+import { u as g } from "../../chunks/useT9n.js";
+import { createRef as d, ref as p } from "lit-html/directives/ref.js";
+import { LitElement as y, createEvent as n, noShadowRoot as F, safeClassMap as v } from "@arcgis/lumina";
+import * as $ from "@arcgis/core/core/reactiveUtils.js";
+const k = b`@layer{:host{display:block!important}.display-none{display:none}.padding-1{padding:1rem}.position-relative{position:relative}.overflow-auto{overflow:auto}.height-full{height:100%}.paste-component{--arcgis-paste-height: 100%;--arcgis-paste-width: 100%;height:100%;width:100%}.position-static{position:static!important}.z-index-500{z-index:500!important}.margin-top-10{margin-top:10px}card-manager{display:block}}`;
 class S extends y {
   constructor() {
-    super(), this.customInfoText = "", this.enableEditGeometry = !1, this.enableSnapping = !1, this.isMobile = !1, this.zoomAndScrollToSelected = !1, this.selectedFeaturesIds = [], this.enableCreateFeatures = !0, this.createBtnLabel = "", this.selectingFeatureFromMap = !1, this.showSketchWidgets = !1, this.mapComponentId = "", this.pasteEnabled = !1, this.showCopyPasteActions = !1, this.allowedPasteLayerIds = [], this._cardLoading = !1, this._graphics = [], this._showCreateFeatureComponent = !1, this._showSubmitBtn = !1, this._activeFeatureCreationCount = 1, this._translations = _({ name: "card-manager", blocking: !0 }), this._isFeatureCreated = !1, this._createFeature = p(), this._pasteComponent = p(), this.createWorkFlowStarted = r(), this.backFromCreateWorkFlow = r(), this.featureOrRecordSubmitted = r(), this.featuresCopied = r(), this.featuresPasted = r(), this._featuresAdded = () => {
+    super(), this.customInfoText = "", this.enableEditGeometry = !1, this.enableSnapping = !1, this.isMobile = !1, this.zoomAndScrollToSelected = !1, this.selectedFeaturesIds = [], this.enableCreateFeatures = !0, this.createBtnLabel = "", this.selectingFeatureFromMap = !1, this.showSketchWidgets = !1, this.mapComponentId = "", this.pasteEnabled = !1, this.showCopyPasteActions = !1, this.allowedPasteLayerIds = [], this._cardLoading = !1, this._graphics = [], this._showCreateFeatureComponent = !1, this._showSubmitBtn = !1, this._activeFeatureCreationCount = 1, this._createAndBackBtnDisabled = !1, this._translations = g({ name: "card-manager", blocking: !0 }), this._isFeatureCreated = !1, this._createFeature = d(), this._pasteComponent = d(), this.createWorkFlowStarted = n(), this.backFromCreateWorkFlow = n(), this.featureOrRecordSubmitted = n(), this.featuresCopied = n(), this.featuresPasted = n(), this.disablePaste = n(), this._handleCreateAndBackBtn = (e) => {
+      this._createFeatureEditor && (this._createAndBackBtnDisabled = e);
+    }, this._featuresAdded = () => {
       this._pasteComponent.value && this._resetPasteWorkflow();
     }, this._initCreateComponent = () => {
       this._showCreateFeatureComponent = !0;
+    }, this._createFeatureEditorInitialized = (e) => {
+      this._createFeatureEditor = e.detail;
+    }, this._createFeatureEditorClosed = () => {
+      this._createFeatureEditor = void 0;
     }, this._pasteComponentReady = async () => {
-      if (this._pasteComponent.value && this.mapComponentId && this._pasteComponent.value.referenceElement === void 0) {
-        const e = document.getElementById(this.mapComponentId);
-        await e.viewOnReady(), this._pasteComponent.value.referenceElement = e;
+      const e = this._pasteComponent.value;
+      if (e && this.mapComponentId && e.referenceElement === void 0) {
+        const t = document.getElementById(this.mapComponentId);
+        await t.viewOnReady(), e.referenceElement = t;
       }
+      e && !this._clipboardWatchHandle && (this._clipboardWatchHandle = $.watch(() => e.clipboard.hasItems, (t) => {
+        t || this.disablePaste.emit();
+      }));
     }, this._applyPasteCommand = async (e) => {
-      const t = new Promise((a, i) => {
+      const t = new Promise((a, s) => {
         if (!this._pasteComponent.value) {
           console.error("Paste failed: paste component is not available."), a();
           return;
@@ -27,21 +38,21 @@ class S extends y {
         try {
           e.detail.applySet ? this._pasteComponent.value.writeChanges(e.detail.applySet).then(() => {
             this._resetPasteWorkflow(), a();
-          }).catch((s) => {
-            console.log(s), i(s);
+          }).catch((i) => {
+            console.log(i), s(i);
           }) : a();
-        } catch (s) {
-          i(s), console.error("Paste failed:", s);
+        } catch (i) {
+          s(i), console.error("Paste failed:", i);
         }
       });
       e.detail.completionCallback = t;
-    }, this.listenOn(window, "featureSelectionChange", this.featureSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled), this.listenOn(window, "copyFeatures", this._copyFeatures), this.listenOn(window, "pasteFeatures", this._pasteFeatures), this.listenOn(window, "featuresAdded", this._featuresAdded), this.listenOn(window, "initCreateComponent", this._initCreateComponent);
+    }, this.listenOn(window, "featureSelectionChange", this.featureSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled), this.listenOn(window, "copyFeatures", this._copyFeatures), this.listenOn(window, "pasteFeatures", this._pasteFeatures), this.listenOn(window, "featuresAdded", this._featuresAdded), this.listenOn(window, "initCreateComponent", this._initCreateComponent), this.listenOn(window, "createFeatureEditorInitialized", this._createFeatureEditorInitialized), this.listenOn(window, "createFeatureEditorClosed", this._createFeatureEditorClosed), this.listenOn(window, "continueEditing", () => this._handleCreateAndBackBtn(!1)), this.listenOn(window, "beforeLayerSelectionChange", () => this._handleCreateAndBackBtn(!0)), this.listenOn(window, "beforeMapInfoChange", () => this._handleCreateAndBackBtn(!0)), this.listenOn(window, "beforeFeatureSelectionChange", () => this._handleCreateAndBackBtn(!0));
   }
   static {
-    this.properties = { customInfoText: 1, enableEditGeometry: 5, enableSnapping: 5, isMobile: 5, layerOrTable: 0, mapView: 0, zoomAndScrollToSelected: 5, selectedFeaturesIds: 0, enableCreateFeatures: 5, createBtnLabel: 1, selectingFeatureFromMap: 5, showSketchWidgets: 5, mapComponentId: 1, pasteEnabled: 5, showCopyPasteActions: 5, allowedPasteLayerIds: 0, _cardLoading: 16, _graphics: 16, _showCreateFeatureComponent: 16, _showSubmitBtn: 16, _activeFeatureCreationCount: 16, _translations: 16 };
+    this.properties = { customInfoText: 1, enableEditGeometry: 5, enableSnapping: 5, isMobile: 5, layerOrTable: 0, mapView: 0, zoomAndScrollToSelected: 5, selectedFeaturesIds: 0, enableCreateFeatures: 5, createBtnLabel: 1, selectingFeatureFromMap: 5, showSketchWidgets: 5, mapComponentId: 1, pasteEnabled: 5, showCopyPasteActions: 5, allowedPasteLayerIds: 0, _cardLoading: 16, _graphics: 16, _showCreateFeatureComponent: 16, _showSubmitBtn: 16, _activeFeatureCreationCount: 16, _createAndBackBtnDisabled: 16, _translations: 16 };
   }
   static {
-    this.styles = $;
+    this.styles = k;
   }
   static {
     this.shadowRootOptions = F;
@@ -66,15 +77,15 @@ class S extends y {
   async _copyFeatures(e) {
     if (!this._pasteComponent.value)
       return;
-    const t = e.detail.featuresIds, a = this.layerOrTable, i = await h(t, a, [], !0, this.mapView?.spatialReference), s = [];
-    i.forEach((n) => {
+    const t = e.detail.featuresIds, a = this.layerOrTable, s = await h(t, a, [], !0, this.mapView?.spatialReference), i = [];
+    s.forEach((r) => {
       const l = {
-        layer: n.layer,
-        graphic: n,
+        layer: r.layer,
+        graphic: r,
         type: "feature"
       };
-      s.push(l);
-    }), this._pasteComponent.value.clipboard.setData(s), this.featuresCopied.emit(), this.requestUpdate();
+      i.push(l);
+    }), this._pasteComponent.value.clipboard.setData(i), this.featuresCopied.emit(), this.requestUpdate();
   }
   async _pasteFeatures(e) {
     if (!this._pasteComponent.value) {
@@ -107,11 +118,14 @@ class S extends y {
   async load() {
     this.selectedFeaturesIds?.length > 0 && (this._graphics = await this._getFeaturesByIds(this.selectedFeaturesIds));
   }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clipboardWatchHandle?.remove(), this._clipboardWatchHandle = void 0;
+  }
   render() {
-    const e = (this._pasteComponent.value?.closed || !this.showCopyPasteActions) && this._graphics?.length > 0, t = this._pasteComponent.value?.closed ? "display-none" : "", a = this._graphics?.length === 0 && this._showCreateFeatureComponent ? "" : "display-none", i = this._graphics?.length > 0 || this._showCreateFeatureComponent || !this._pasteComponent.value?.closed && this.showCopyPasteActions ? "display-none" : "", s = this.layerOrTable?.isTable, n = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart, l = this.enableCreateFeatures && this.layerOrTable?.editingEnabled && this.layerOrTable?.capabilities?.operations?.supportsAdd, c = this.createBtnLabel ? this.createBtnLabel : s ? this._translations.createRecord : this._translations.createFeature, u = !this.layerOrTable, m = this.enableSnapping && !this.layerOrTable?.isTable, C = this.layerOrTable?.isTable ? ["paste"] : ["paste", "paste-as"], b = !this.layerOrTable?.isTable;
-    return o`<calcite-panel><div class="overflow-auto height-full">${e && o`<calcite-shell class=${"position-relative"}><div class="position-static z-index-500 height-full"><info-card .allowEditing=${this.layerOrTable?.editingEnabled} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${m} .graphics=${this._graphics.reverse()} .isLoading=${this._cardLoading} .isMobile=${this.isMobile} .mapView=${this.mapView} .featuresReferenceId=${this.mapComponentId} position=relative .pasteEnabled=${this.pasteEnabled} show-close-btn .showCopyPasteActions=${this.showCopyPasteActions}></info-card></div></calcite-shell>` || ""}<calcite-shell class=${`position-relative ${i}`}><calcite-panel><div class=padding-1><calcite-notice .icon=${this.selectingFeatureFromMap ? "map" : "table"} icon-flip-rtl open><div slot=message>${n}</div></calcite-notice></div>${!this.isMobile && l && o`<calcite-button .disabled=${u} @click=${() => this._createFeatureBtnClicked()} slot=footer width=full>${c}</calcite-button>` || ""}</calcite-panel></calcite-shell><calcite-shell class=${`position-relative ${a}`}><calcite-flow-item selected><calcite-panel .heading=${c}><calcite-action class="back-button hydrated" icon=chevron-left @click=${this._backFromCreateFeature} scale=s slot=header-actions-start .text=${this._translations.back}></calcite-action>${this.getEditorComponent()}${this._showSubmitBtn && o`<calcite-button appearance=solid class="footer-top-button footer-button" @click=${() => this._createFeature.value && void this._createFeature.value.submit()} slot=footer width=full>${this._activeFeatureCreationCount > 1 ? this._translations.createMultiple.replace("{{n}}", String(this._activeFeatureCreationCount)) : this._translations.create}</calcite-button>` || ""}</calcite-panel></calcite-flow-item></calcite-shell>${this.showCopyPasteActions && o`<calcite-panel class=${v(t)}><arcgis-paste always-show-feature-form class=${`paste-component ${t}`} closed @arcgisReady=${this._pasteComponentReady} @arcgisApplyPasteCommand=${this._applyPasteCommand} @arcgisClose=${() => {
+    const e = (this._pasteComponent.value?.closed || !this.showCopyPasteActions) && this._graphics?.length > 0, t = this._pasteComponent.value?.closed ? "display-none" : "", a = this._graphics?.length === 0 && this._showCreateFeatureComponent ? "" : "display-none", s = this._graphics?.length > 0 || this._showCreateFeatureComponent || !this._pasteComponent.value?.closed && this.showCopyPasteActions ? "display-none" : "", i = this.layerOrTable?.isTable, r = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart, l = this.enableCreateFeatures && this.layerOrTable?.editingEnabled && this.layerOrTable?.capabilities?.operations?.supportsAdd, c = this.createBtnLabel ? this.createBtnLabel : i ? this._translations.createRecord : this._translations.createFeature, u = !this.layerOrTable, m = this.enableSnapping && !this.layerOrTable?.isTable, C = this.layerOrTable?.isTable ? ["paste"] : ["paste", "paste-as"], _ = !this.layerOrTable?.isTable;
+    return o`<calcite-panel><div class="overflow-auto height-full">${e && o`<calcite-shell class=${"position-relative"}><div class="position-static z-index-500 height-full"><info-card .allowEditing=${this.layerOrTable?.editingEnabled} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${m} .graphics=${this._graphics.reverse()} .isLoading=${this._cardLoading} .isMobile=${this.isMobile} .mapView=${this.mapView} .featuresReferenceId=${this.mapComponentId} position=relative .pasteEnabled=${this.pasteEnabled} show-close-btn .showCopyPasteActions=${this.showCopyPasteActions}></info-card></div></calcite-shell>` || ""}<calcite-shell class=${`position-relative ${s}`}><calcite-panel><div class=padding-1><calcite-notice .icon=${this.selectingFeatureFromMap ? "map" : "table"} icon-flip-rtl open><div slot=message>${r}</div></calcite-notice></div>${!this.isMobile && l && o`<calcite-button .disabled=${u} @click=${() => this._createFeatureBtnClicked()} slot=footer width=full>${c}</calcite-button>` || ""}</calcite-panel></calcite-shell><calcite-shell class=${`position-relative ${a}`}><calcite-flow-item selected><calcite-panel .heading=${c}><calcite-action class="back-button hydrated" .disabled=${this._createAndBackBtnDisabled} icon=chevron-left @click=${this._backFromCreateFeature} scale=s slot=header-actions-start .text=${this._translations.back}></calcite-action>${this.getEditorComponent()}${this._showSubmitBtn && o`<calcite-button appearance=solid class="footer-top-button footer-button" .disabled=${this._createAndBackBtnDisabled} @click=${() => this._createFeature.value && void this._createFeature.value.submit()} slot=footer width=full>${this._activeFeatureCreationCount > 1 ? this._translations.createMultiple.replace("{{n}}", String(this._activeFeatureCreationCount)) : this._translations.create}</calcite-button>` || ""}</calcite-panel></calcite-flow-item></calcite-shell>${this.showCopyPasteActions && o`<calcite-panel class=${v(t)}><arcgis-paste always-show-feature-form class=${`paste-component ${t}`} closed @arcgisReady=${this._pasteComponentReady} @arcgisApplyPasteCommand=${this._applyPasteCommand} @arcgisClose=${() => {
       this._resetPasteWorkflow();
-    }} paste-with-multiple-layers-enabled paste-with-multiple-features-enabled .layerPermissionsCheck=${this._getLayerPermissionsCheck()} .supportedCommands=${C} .view=${this.mapView} ${d(this._pasteComponent)}>${b && o`<calcite-notice slot=commands-page-message class="margin-top-10" open icon=move><div slot=message>${this._translations.moveClipboardFeatures}</div></calcite-notice>` || ""}</arcgis-paste></calcite-panel>` || ""}</div></calcite-panel>`;
+    }} paste-with-multiple-layers-enabled paste-with-multiple-features-enabled .layerPermissionsCheck=${this._getLayerPermissionsCheck()} .supportedCommands=${C} .view=${this.mapView} ${p(this._pasteComponent)}>${_ && o`<calcite-notice slot=commands-page-message class="margin-top-10" open icon=move><div slot=message>${this._translations.moveClipboardFeatures}</div></calcite-notice>` || ""}</arcgis-paste></calcite-panel>` || ""}</div></calcite-panel>`;
   }
   getEditorComponent() {
     const e = this.enableSnapping && !this.layerOrTable?.isTable && this.enableCreateFeatures;
@@ -125,16 +139,32 @@ class S extends y {
       setTimeout(() => {
         this._isFeatureCreated = !1;
       }, 2e3);
-    }} @success=${this._featureCreated} .showSketchWidgets=${this.showSketchWidgets} .selectedLayerId=${this.layerOrTable?.id} show-guiding-msg .showLayerVisibilityMsg=${this.layerOrTable?.visible === !1} ${d(this._createFeature)}></create-feature>` || ""}</div>`;
+    }} @success=${this._featureCreated} .showSketchWidgets=${this.showSketchWidgets} .selectedLayerId=${this.layerOrTable?.id} show-guiding-msg .showLayerVisibilityMsg=${this.layerOrTable?.visible === !1} ${p(this._createFeature)}></create-feature>` || ""}</div>`;
   }
   async _getFeaturesByIds(e) {
-    return (e.length > 0 && this.layerOrTable && this.mapView ? await h(e, this.layerOrTable, [], !0, this.mapView?.spatialReference) : []).sort((a, i) => e.indexOf(Number(a.getObjectId())) - e.indexOf(Number(i.getObjectId())));
+    return (e.length > 0 && this.layerOrTable && this.mapView ? await h(e, this.layerOrTable, [], !0, this.mapView?.spatialReference) : []).sort((a, s) => e.indexOf(Number(a.getObjectId())) - e.indexOf(Number(s.getObjectId())));
   }
   _createFeatureBtnClicked() {
-    this._showCreateFeatureComponent = !0, this.createWorkFlowStarted.emit();
+    this._showCreateFeatureComponent = !0, this._handleCreateAndBackBtn(!1), this.createWorkFlowStarted.emit();
   }
   async _backFromCreateFeature() {
-    this._createFeature.value && (this._showCreateFeatureComponent = !1, this.backFromCreateWorkFlow.emit()), this._showSubmitBtn = !1;
+    this._createFeatureEditor && await this._validateActiveEdits() && (this._showCreateFeatureComponent = !1, this.backFromCreateWorkFlow.emit(), this._showSubmitBtn = !1, this._handleCreateAndBackBtn(!1));
+  }
+  async _validateActiveEdits() {
+    let e = !0;
+    if (this._createFeatureEditor && this._hasPendingEdits()) {
+      let a = !1;
+      try {
+        this._handleCreateAndBackBtn(!0), this._createFeatureEditor.activeWorkflow && await this._createFeatureEditor.activeWorkflow.cancel({ force: !1 });
+      } catch (s) {
+        a = s?.name === "workflow:cancel-denied";
+      }
+      a && (this._handleCreateAndBackBtn(!1), e = !1);
+    }
+    return e;
+  }
+  _hasPendingEdits() {
+    return this._createFeatureEditor?.activeWorkflow?.hasPendingEdits;
   }
   _featureCreated() {
     this._showCreateFeatureComponent = !1, this._showSubmitBtn = !1, this._isFeatureCreated = !0, this.featureOrRecordSubmitted.emit();

package/dist/components/create-feature/customElement.d.ts

@@ -2,6 +2,7 @@
 import type MapView from "@arcgis/core/views/MapView.js";
 import type { IImageExtraction, ISearchConfiguration, ITextExtraction } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisEditor } from "@arcgis/map-components/components/arcgis-editor/customElement";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 export abstract class CreateFeature extends LitElement {
@@ -225,6 +226,13 @@ export abstract class CreateFeature extends LitElement {
    * The number of features being created is passed as an argument.
    */
   readonly activeFeatureCountChange: import("@arcgis/lumina").TargetedEvent<this, number>;
+  /** Emitted on demand when the create feature component is closed */
+  readonly createFeatureEditorClosed: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Emitted once the editor for creating feature is initialized and ready to use
+   * The ArcgisEditor instance is passed as an argument.
+   */
+  readonly createFeatureEditorInitialized: import("@arcgis/lumina").TargetedEvent<this, ArcgisEditor>;
   /** Emitted on demand when drawing is completed */
   readonly drawComplete: import("@arcgis/lumina").TargetedEvent<this, boolean>;
   /** Emitted on demand when editing attachments */
@@ -241,6 +249,8 @@ export abstract class CreateFeature extends LitElement {
   readonly success: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     activeFeatureCountChange: CreateFeature["activeFeatureCountChange"]["detail"];
+    createFeatureEditorClosed: CreateFeature["createFeatureEditorClosed"]["detail"];
+    createFeatureEditorInitialized: CreateFeature["createFeatureEditorInitialized"]["detail"];
     drawComplete: CreateFeature["drawComplete"]["detail"];
     editingAttachment: CreateFeature["editingAttachment"]["detail"];
     editingLocation: CreateFeature["editingLocation"]["detail"];

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

@@ -2,14 +2,14 @@
 import { c as I } from "../../chunks/runtime.js";
 import { a as x, g as w } from "../../chunks/mapViewUtils.js";
 import { u as A } from "../../chunks/useT9n.js";
-import { css as M, html as o, nothing as y } from "lit";
+import { css as M, html as n, nothing as y } from "lit";
 import { createRef as p, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as L, createEvent as c, noShadowRoot as E, safeClassMap as v } from "@arcgis/lumina";
+import { LitElement as E, createEvent as c, noShadowRoot as L, safeClassMap as v } from "@arcgis/lumina";
 import { p as k } from "../../chunks/queryUtils.js";
 import P from "@arcgis/core/form/ExpressionInfo.js";
 import S from "@arcgis/core/layers/FeatureLayer.js";
-import $ from "@arcgis/core/form/elements/FieldElement.js";
-import C from "@arcgis/core/form/FormTemplate.js";
+import C from "@arcgis/core/form/elements/FieldElement.js";
+import $ from "@arcgis/core/form/FormTemplate.js";
 import F from "@arcgis/core/views/MapView.js";
 import V from "@arcgis/core/Graphic.js";
 import * as f from "@arcgis/core/core/reactiveUtils.js";
@@ -19,9 +19,9 @@ import * as R from "exifr";
 import U from "@arcgis/core/geometry/Point.js";
 import z from "@arcgis/core/geometry/SpatialReference.js";
 const H = M`@layer{: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%!important;visibility:hidden;position:static!important}.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}.image-preview-container{padding:10px}.esri-editor{height:auto!important}.height-fit-content{height:fit-content!important}.content-container{padding:1.5rem}.instruction-text{margin-bottom:1.5rem;font-size:1rem}.selected-card{border:2px solid var(--calcite-ui-brand)}.upload-img-footer-container{width:100%;gap:5px;display:grid}.info-container{display:flex;align-items:center;gap:6px;margin-bottom:10px}.info-container calcite-icon{--calcite-icon-color: var(--calcite-color-brand)}.info-container span{font-size:12px;color:var(--calcite-ui-text-3)}.padding-10{padding:10px}.report-selection-container{display:flex;flex-direction:column;padding:10px;--calcite-card-border-color: var(--calcite-color-border-1)}.pb-12{padding-bottom:12px!important}.pt-0{padding-top:0!important}.pt-15{padding-top:15px!important}.option-description-container{display:flex;align-items:center;gap:6px}.cursor-pointer{cursor:pointer;padding:6px 0}.card-body-content{display:flex;flex-direction:row;align-items:center;padding:10px 5px;gap:15px}.text-stack{display:flex;flex-direction:column;gap:2px}.option-title{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size--1)}.option-description{color:var(--calcite-ui-text-3);font-size:var(--calcite-font-size--1)}.action-footer{display:flex;justify-content:center;margin-top:16px}.analysis-wrapper{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;margin:auto}.analyzing-icon{--calcite-icon-color: var(--calcite-color-brand);animation:sparkle 2s infinite ease-in-out}.adjusted-height{height:30px!important;min-height:auto!important}@keyframes sparkle{0%,to{transform:scale(1)}50%{transform:scale(1.5)}}@media only screen and (max-width:600px){.esri-editor__panel-content{padding-block:0!important;min-height:0!important}}}`, _ = "geocodedLocation", D = `Extract the address from the user's message and return it in JSON format '{"address":"<address>"}'. If no address is found, return null.`;
-class N extends L {
+class N extends E {
   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.showLayerVisibilityMsg = !1, this.enablePhotoLocation = !1, this.enableMessageLocation = !1, this._currentPage = "templatePicker", this._showSearchComponent = this.enableSearch, this._layerInfos = [], this._inValidGeometryDrawn = !1, this._selectedImageBase64 = "", this._enteredMessage = "", this._analysisFailed = !1, this._translations = A({ name: "create-feature", blocking: !0 }), this._addingAttachment = !1, this._uploadedImage = null, this._calciteNotice = p(), this._editor = p(), this._mapViewContainer = p(), this._searchRef = p(), this._inputImageForAI = p(), this._guidingMessageRefNode = p(), this._abortController = new AbortController(), this._awaitingLayerEdits = !1, this._pendingAttachmentUpload = !1, this.success = c(), this.fail = c(), this.drawComplete = c(), this.editingLocation = c(), this.editingAttachment = c(), this.progressStatus = c(), this.modeChanged = c(), this.activeFeatureCountChange = c(), this._onLayerEdits = async (e) => {
+    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.showLayerVisibilityMsg = !1, this.enablePhotoLocation = !1, this.enableMessageLocation = !1, this._currentPage = "templatePicker", this._showSearchComponent = this.enableSearch, this._layerInfos = [], this._inValidGeometryDrawn = !1, this._selectedImageBase64 = "", this._enteredMessage = "", this._analysisFailed = !1, this._translations = A({ name: "create-feature", blocking: !0 }), this._addingAttachment = !1, this._uploadedImage = null, this._calciteNotice = p(), this._editor = p(), this._mapViewContainer = p(), this._searchRef = p(), this._inputImageForAI = p(), this._guidingMessageRefNode = p(), this._abortController = new AbortController(), this._awaitingLayerEdits = !1, this._pendingAttachmentUpload = !1, this.success = c(), this.fail = c(), this.drawComplete = c(), this.editingLocation = c(), this.editingAttachment = c(), this.progressStatus = c(), this.modeChanged = c(), this.activeFeatureCountChange = c(), this.createFeatureEditorInitialized = c(), this.createFeatureEditorClosed = c(), this._onLayerEdits = async (e) => {
       if (!this._awaitingLayerEdits)
         return;
       const t = [
@@ -58,7 +58,7 @@ class N extends L {
     this.styles = H;
   }
   static {
-    this.shadowRootOptions = E;
+    this.shadowRootOptions = L;
   }
   willUpdate(e) {
     e.has("mapView") && this.hasUpdated && this.mapViewWatchHandler(), e.has("isMobile") && this.hasUpdated && this.isMobileHandler(), e.has("enableSearch") && this.hasUpdated && this.searchHandler(), e.has("searchConfiguration") && this.hasUpdated && this.searchConfigurationHandler(this.searchConfiguration, e.get("searchConfiguration"));
@@ -109,15 +109,15 @@ class N extends L {
     this.reportingAreaMessage && this._guidingMessageRefNode.value?.children[0] && (this._guidingMessageRefNode.value.children[0].style.margin = "0px");
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._editor.value && (this._editor.value.destroy(), this.enableSnapping && this.mapView?.ui.view && (this.mapView.ui.view.grid = null), this._removeHandlers());
+    super.disconnectedCallback(), this._editor.value && (this._editor.value.destroy(), this.enableSnapping && this.mapView?.ui.view && (this.mapView.ui.view.grid = null), this._removeHandlers(), this.createFeatureEditorClosed.emit());
   }
   render() {
-    const e = this._currentPage === "loading" ? "" : "display-none", t = this.isMobile && this.updateMapPosition ? "show-map" : "display-none", i = this._inValidGeometryDrawn ? "danger" : "success", a = this._inValidGeometryDrawn ? "exclamation-mark-triangle" : "lightbulb", s = this.showLayerVisibilityMsg && this._currentPage === "templatePicker", n = (this.showGuidingMsg || s) && this._currentPage !== "loading" && this._currentPage !== "drawingMultipleFeatures";
-    let r = this._translations.chooseCategoryMsg;
+    const e = this._currentPage === "loading" ? "" : "display-none", t = this.isMobile && this.updateMapPosition ? "show-map" : "display-none", i = this._inValidGeometryDrawn ? "danger" : "success", a = this._inValidGeometryDrawn ? "exclamation-mark-triangle" : "lightbulb", s = this.showLayerVisibilityMsg && this._currentPage === "templatePicker", r = (this.showGuidingMsg || s) && this._currentPage !== "loading" && this._currentPage !== "drawingMultipleFeatures";
+    let o = this._translations.chooseCategoryMsg;
     const l = this._aiAnalysisInfo?.results?.filter((h) => !h.success && h.key !== _), d = l?.length ? !0 : this._analysisFailed, m = this._getAnalysisErrorMessage(l?.length), g = this._aiAnalysisInfo?.canUseAI && ["chooseReportType", "analyzingImage", "analyzingMessage", "imageUpload", "messageInput"].includes(this._currentPage);
-    return this._inValidGeometryDrawn ? r = this.reportingAreaMessage || this._translations.reportOutsideAreaMessage : this._currentPage === "drawing" || this._currentPage === "editing" ? r = this._translations.provideLocationMsg : this._currentPage === "featureForm" ? r = this._aiAnalysisInfo?.results?.filter((h) => h.success).length ? this._analysisMode === "text" ? this._translations.textReviewMsg : this._translations.formReviewMsg : this._translations.provideDetailsMsg : s && (r = this._translations.enableFeatureTemplatesMessage), o`${d && o`<calcite-alert auto-close icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    return this._inValidGeometryDrawn ? o = this.reportingAreaMessage || this._translations.reportOutsideAreaMessage : this._currentPage === "drawing" || this._currentPage === "editing" ? o = this._translations.provideLocationMsg : this._currentPage === "featureForm" ? o = this._aiAnalysisInfo?.results?.filter((h) => h.success).length ? this._analysisMode === "text" ? this._translations.textReviewMsg : this._translations.formReviewMsg : this._translations.provideDetailsMsg : s && (o = this._translations.enableFeatureTemplatesMessage), n`${d && n`<calcite-alert auto-close icon=x-octagon kind=danger label @calciteAlertClose=${() => {
       this._analysisFailed = !1;
-    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${m}</div></calcite-alert>` || ""}${g && o`<calcite-panel>${this._currentPage === "chooseReportType" && this._getReportTypePage() || ""}${this._currentPage === "imageUpload" && this._aiImageExtractionPage() || ""}${this._currentPage === "messageInput" && this._aiTextExtractionPage() || ""}${this._currentPage === "analyzingImage" && this._getAnalyzingImagePage() || ""}${this._currentPage === "analyzingMessage" && this._getAnalyzingMessagePage() || ""}</calcite-panel>` || ""}${!g && o`${n && o`<calcite-notice class="notice-msg" .icon=${a} .kind=${i} open ${u(this._calciteNotice)}><div slot=message .innerHTML=${r ?? ""} ${u(this._guidingMessageRefNode)}></div></calcite-notice>` || ""}${this._selectedImageBase64 && this._currentPage === "featureForm" && o`<div class="image-preview-container"><calcite-label>${this._translations.photo}</calcite-label><img class="width-full" src=${this._selectedImageBase64 ?? y}></div>` || ""}<calcite-loader class=${v(e)} label scale=s></calcite-loader>${this._currentPage === "featureForm" && this.isMobile && o`<calcite-button appearance=transparent class="edit-location-btn" icon-start=pin @click=${this.editLocation}>${this._translations.editLocationLabel}</calcite-button>` || ""}${this._showSearchComponent && this._updatedMapView && this._selectedLayer && this._getSearchComponent() || ""}${this._updatedMapView && this._selectedLayer && this._getEditor() || ""}` || ""}<div class=${v(t)} ${u(this._mapViewContainer)}></div>`;
+    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${m}</div></calcite-alert>` || ""}${g && n`<calcite-panel>${this._currentPage === "chooseReportType" && this._getReportTypePage() || ""}${this._currentPage === "imageUpload" && this._aiImageExtractionPage() || ""}${this._currentPage === "messageInput" && this._aiTextExtractionPage() || ""}${this._currentPage === "analyzingImage" && this._getAnalyzingImagePage() || ""}${this._currentPage === "analyzingMessage" && this._getAnalyzingMessagePage() || ""}</calcite-panel>` || ""}${!g && n`${r && n`<calcite-notice class="notice-msg" .icon=${a} .kind=${i} open ${u(this._calciteNotice)}><div slot=message .innerHTML=${o ?? ""} ${u(this._guidingMessageRefNode)}></div></calcite-notice>` || ""}${this._selectedImageBase64 && this._currentPage === "featureForm" && n`<div class="image-preview-container"><calcite-label>${this._translations.photo}</calcite-label><img class="width-full" src=${this._selectedImageBase64 ?? y}></div>` || ""}<calcite-loader class=${v(e)} label scale=s></calcite-loader>${this._currentPage === "featureForm" && this.isMobile && n`<calcite-button appearance=transparent class="edit-location-btn" icon-start=pin @click=${this.editLocation}>${this._translations.editLocationLabel}</calcite-button>` || ""}${this._showSearchComponent && this._updatedMapView && this._selectedLayer && this._getSearchComponent() || ""}${this._updatedMapView && this._selectedLayer && this._getEditor() || ""}` || ""}<div class=${v(t)} ${u(this._mapViewContainer)}></div>`;
   }
   async init() {
     this.mapView && this.selectedLayerId && (this._updatedMapView = this.mapView, await (this.isMobile && this.updateMapPosition ? this.createMobileMapView() : this._loadLayerInfos()));
@@ -157,13 +157,13 @@ class N extends L {
   }
   _getReportTypePage() {
     const e = this._hasImageExtraction(), t = this._hasTextExtraction();
-    return o`<div class="report-selection-container"><calcite-label class="pb-12">${this._translations.createReportHeading}</calcite-label><div class="option-description-container"><span class="option-description">${this._translations.aiAssistedReport}</span><calcite-icon icon=effects scale=s></calcite-icon></div>${t && o`<calcite-card class="cursor-pointer pt-0" @click=${() => {
+    return n`<div class="report-selection-container"><calcite-label class="pb-12">${this._translations.createReportHeading}</calcite-label><div class="option-description-container"><span class="option-description">${this._translations.aiAssistedReport}</span><calcite-icon icon=effects scale=s></calcite-icon></div>${t && n`<calcite-card class="cursor-pointer pt-0" @click=${() => {
       this._analysisMode = "text", this.progressStatus.emit(35), this._currentPage = "messageInput";
     }} @keydown=${(i) => {
       this._activateCardFromKeyboard(i, () => {
         this._analysisMode = "text", this.progressStatus.emit(35), this._currentPage = "messageInput";
       });
-    }}><div slot=description class="card-body-content"><calcite-icon icon=speech-bubble scale=m></calcite-icon><div class="text-stack"><span class="option-title">${this._translations.useDescription}</span><span class="option-description">${this._translations.aiTextAssistantDescription}</span></div></div></calcite-card>` || ""}${e && o`<calcite-card class="cursor-pointer" @click=${() => {
+    }}><div slot=description class="card-body-content"><calcite-icon icon=speech-bubble scale=m></calcite-icon><div class="text-stack"><span class="option-title">${this._translations.useDescription}</span><span class="option-description">${this._translations.aiTextAssistantDescription}</span></div></div></calcite-card>` || ""}${e && n`<calcite-card class="cursor-pointer" @click=${() => {
       this._analysisMode = "image", this.progressStatus.emit(35), this._currentPage = "imageUpload";
     }} @keydown=${(i) => {
       this._activateCardFromKeyboard(i, () => {
@@ -181,29 +181,29 @@ class N extends L {
     (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t());
   }
   _getEditor() {
-    return o`<arcgis-editor class=height-fit-content .view=${this._updatedMapView} .layerInfos=${this._layerInfos} hide-edit-features-section .hideSettingsMenu=${!this.enableSnapping} .hideSketch=${!this.showSketchWidgets || this._selectedLayer?.geometryType === "point"} .hideSnappingControlsElementsEnabledToggle=${!this.enableSnapping} @arcgisReady=${this._onEditorComponentReady} @arcgisPropertyChange=${this._onEditorPropertyChange} @arcgisSketchUpdate=${this._onSketchUpdate} ${u(this._editor)}></arcgis-editor>`;
+    return n`<arcgis-editor class=height-fit-content .view=${this._updatedMapView} .layerInfos=${this._layerInfos} hide-edit-features-section .hideSettingsMenu=${!this.enableSnapping} .hideSketch=${!this.showSketchWidgets || this._selectedLayer?.geometryType === "point"} .hideSnappingControlsElementsEnabledToggle=${!this.enableSnapping} @arcgisReady=${this._onEditorComponentReady} @arcgisPropertyChange=${this._onEditorPropertyChange} @arcgisSketchUpdate=${this._onSketchUpdate} ${u(this._editor)}></arcgis-editor>`;
   }
   _getSearchComponent() {
     const e = this._currentPage === "drawing" || this._currentPage === "editing" ? "" : "display-none", t = this.searchConfiguration && this._updatedMapView ? this._getSearchConfig(this.searchConfiguration, this._updatedMapView) : void 0;
-    return this._updateSearchActiveSourceIndex(), o`<arcgis-search class=${`search-widget ${e}`} .view=${this._updatedMapView} @arcgisSearchComplete=${this.searchComplete} popup-disabled result-graphic-disabled .includeDefaultSourcesDisabled=${!!t?.sources?.length} .sources=${t?.sources || []} .allPlaceholder=${t?.allPlaceholder} .searchAllDisabled=${!t?.searchAllEnabled} ${u(this._searchRef)}></arcgis-search>`;
+    return this._updateSearchActiveSourceIndex(), n`<arcgis-search class=${`search-widget ${e}`} .view=${this._updatedMapView} @arcgisSearchComplete=${this.searchComplete} popup-disabled result-graphic-disabled .includeDefaultSourcesDisabled=${!!t?.sources?.length} .sources=${t?.sources || []} .allPlaceholder=${t?.allPlaceholder} .searchAllDisabled=${!t?.searchAllEnabled} ${u(this._searchRef)}></arcgis-search>`;
   }
   _aiImageExtractionPage() {
     const e = this._selectedImageBase64 !== "", t = e ? this._translations.replaceImage : this._translations.imageUploadLimitHint;
-    return o`<calcite-notice class="notice-msg" icon=effects kind=brand open><div slot=message>${this._translations.aiAssistantProcessingHint}</div></calcite-notice><div class="padding-10"><calcite-label><div>${this._translations.photo}<span style="color: var(--calcite-color-status-danger)">*</span></div><calcite-input type=file accept="image/*;capture=camera" @calciteInputInput=${this._onImageUpload} ${u(this._inputImageForAI)}></calcite-input></calcite-label><div class="info-container"><calcite-icon aria-hidden=true icon=information scale=s></calcite-icon><span>${t}</span></div>${e && o`<img alt=${this._translations.photo ?? y} class="width-full" src=${this._selectedImageBase64 ?? y}>` || ""}</div><div slot=footer class="upload-img-footer-container"><calcite-button width=full .disabled=${!e} id=next-btn @click=${this._analyzeImage}>${this._translations.next}</calcite-button><calcite-button width=full appearance=outline kind=brand @click=${() => this.modeChanged.emit()}>${this._translations.cancel}</calcite-button></div>`;
+    return n`<calcite-notice class="notice-msg" icon=effects kind=brand open><div slot=message>${this._translations.aiAssistantProcessingHint}</div></calcite-notice><div class="padding-10"><calcite-label><div>${this._translations.photo}<span style="color: var(--calcite-color-status-danger)">*</span></div><calcite-input type=file accept="image/*;capture=camera" @calciteInputInput=${this._onImageUpload} ${u(this._inputImageForAI)}></calcite-input></calcite-label><div class="info-container"><calcite-icon aria-hidden=true icon=information scale=s></calcite-icon><span>${t}</span></div>${e && n`<img alt=${this._translations.photo ?? y} class="width-full" src=${this._selectedImageBase64 ?? y}>` || ""}</div><div slot=footer class="upload-img-footer-container"><calcite-button width=full .disabled=${!e} id=next-btn @click=${this._analyzeImage}>${this._translations.next}</calcite-button><calcite-button width=full appearance=outline kind=brand @click=${() => this.modeChanged.emit()}>${this._translations.cancel}</calcite-button></div>`;
   }
   _aiTextExtractionPage() {
     const e = this._enteredMessage.trim();
-    return o`<calcite-notice class="notice-msg" icon=effects kind=brand open><div slot=message>${this._translations.aiTextProcessingHint}</div></calcite-notice><div class="padding-10"><calcite-label><div>${this._translations.description}<span style="color: var(--calcite-color-status-danger)">*</span></div><calcite-text-area @input=${(t) => {
+    return n`<calcite-notice class="notice-msg" icon=effects kind=brand open><div slot=message>${this._translations.aiTextProcessingHint}</div></calcite-notice><div class="padding-10"><calcite-label><div>${this._translations.description}<span style="color: var(--calcite-color-status-danger)">*</span></div><calcite-text-area @input=${(t) => {
       this._enteredMessage = t.target.value;
     }} .placeholder=${this._translations.messageInputHint} resize=vertical rows=6 .value=${this._enteredMessage}></calcite-text-area></calcite-label><div class="info-container"><calcite-icon icon=information scale=s></calcite-icon><span>${this._translations.descriptionRequiredHint}</span></div></div><div slot=footer class="upload-img-footer-container"><calcite-button width=full .disabled=${!e} id=next-btn @click=${this._analyzeMessage}>${this._translations.next}</calcite-button><calcite-button width=full appearance=outline kind=brand @click=${() => this.modeChanged.emit()}>${this._translations.cancel}</calcite-button></div>`;
   }
   _getAnalyzingImagePage() {
-    return o`<div class="analysis-wrapper"><calcite-label layout=inline><calcite-icon class="analyzing-icon" icon=effects scale=s></calcite-icon><span>${this._translations.analyzingImage}</span></calcite-label><calcite-button class="skip-btn" appearance=transparent @click=${() => {
+    return n`<div class="analysis-wrapper"><calcite-label layout=inline><calcite-icon class="analyzing-icon" icon=effects scale=s></calcite-icon><span>${this._translations.analyzingImage}</span></calcite-label><calcite-button class="skip-btn" appearance=transparent @click=${() => {
       this._abortController.abort(), this._currentPage = "templatePicker";
     }}>${this._translations.skip}</calcite-button></div>`;
   }
   _getAnalyzingMessagePage() {
-    return o`<div class="analysis-wrapper"><calcite-label layout=inline><calcite-icon class="analyzing-icon" icon=effects scale=s></calcite-icon><span>${this._translations.analyzingText}</span></calcite-label><calcite-button class="skip-btn" appearance=transparent @click=${() => {
+    return n`<div class="analysis-wrapper"><calcite-label layout=inline><calcite-icon class="analyzing-icon" icon=effects scale=s></calcite-icon><span>${this._translations.analyzingText}</span></calcite-label><calcite-button class="skip-btn" appearance=transparent @click=${() => {
       this._abortController.abort(), this._currentPage = "templatePicker";
     }}>${this._translations.skip}</calcite-button></div>`;
   }
@@ -225,38 +225,38 @@ class N extends L {
     }
     try {
       this._analysisMode = "image", this._currentPage = "analyzingImage", this.progressStatus.emit(45);
-      const i = this._inputImageForAI.value.files[0], a = await new Promise((n, r) => {
+      const i = this._inputImageForAI.value.files[0], a = await new Promise((r, o) => {
         const l = new FileReader();
-        l.onloadend = () => n(l.result), l.onerror = r, this._inputImageForAI.value && l.readAsDataURL(i);
+        l.onloadend = () => r(l.result), l.onerror = o, this._inputImageForAI.value && l.readAsDataURL(i);
       });
       if (this.enablePhotoLocation) {
-        const n = await R.gps(i);
-        if (n?.longitude && n.latitude && this.mapView?.spatialReference) {
-          const r = new U({
-            longitude: n.longitude,
-            latitude: n.latitude,
+        const r = await R.gps(i);
+        if (r?.longitude && r.latitude && this.mapView?.spatialReference) {
+          const o = new U({
+            longitude: r.longitude,
+            latitude: r.latitude,
             spatialReference: new z({ wkid: 4326 })
-          }), l = await k(r, this.mapView.spatialReference);
+          }), l = await k(o, this.mapView.spatialReference);
           this._aiAnalysisInfo && (this._aiAnalysisInfo.location = l);
         }
       }
       const s = this._getImageExtractionData();
       if (s.length) {
-        const n = {
+        const r = {
           input: a,
           data: s
-        }, r = await b(t.imageUrl, {
+        }, o = await b(t.imageUrl, {
           method: "post",
           headers: {
             "Content-Type": "application/json",
             "x-esri-authorization": `Bearer ${t.token}`,
             "x-esri-request-source": `instantapps/${this.appName}`
           },
-          body: JSON.stringify(n),
+          body: JSON.stringify(r),
           responseType: "json",
           signal: e
         });
-        this._aiAnalysisInfo && (this._aiAnalysisInfo.results = r.data.results);
+        this._aiAnalysisInfo && (this._aiAnalysisInfo.results = o.data.results);
       }
       this._currentPage = "loading", await this.init();
     } catch (i) {
@@ -273,7 +273,7 @@ class N extends L {
     }
     try {
       this._analysisMode = "text", this._currentPage = "analyzingMessage", this.progressStatus.emit(45);
-      const n = await b(t.textUrl, {
+      const r = await b(t.textUrl, {
         method: "post",
         headers: {
           "Content-Type": "application/json",
@@ -287,16 +287,16 @@ class N extends L {
         responseType: "json",
         signal: e
       });
-      if (this._aiAnalysisInfo && (this._aiAnalysisInfo.results = n.data.results, s.url)) {
-        const r = this._getExtractedAddress(n.data.results);
-        r && (this._aiAnalysisInfo.location = await this._geocodeExtractedAddress(r, {
+      if (this._aiAnalysisInfo && (this._aiAnalysisInfo.results = r.data.results, s.url)) {
+        const o = this._getExtractedAddress(r.data.results);
+        o && (this._aiAnalysisInfo.location = await this._geocodeExtractedAddress(o, {
           url: s.url,
           singleLineFieldName: s.singleLineFieldName
         }));
       }
       this._currentPage = "loading", await this.init();
-    } catch (n) {
-      n.name === "AbortError" ? console.error("Aborted", n) : (this._analysisFailed = !0, console.error("Analyzing failed", n)), this._resetAIAnalysisInfo(), this.init();
+    } catch (r) {
+      r.name === "AbortError" ? console.error("Aborted", r) : (this._analysisFailed = !0, console.error("Analyzing failed", r)), this._resetAIAnalysisInfo(), this.init();
     }
   }
   _resetAIAnalysisInfo() {
@@ -346,17 +346,23 @@ class N extends L {
       };
       await this._editor.value.startCreateFeaturesWorkflowAtFeatureCreation(t);
     }
-    await this.hideEditorsElements();
+    await this.hideEditorsElements(), this._editor.value && this.createFeatureEditorInitialized.emit(this._editor.value);
   }
   async _onEditorPropertyChange() {
     const e = this._editor.value;
     e?.state && (this._drawingHandler || (this._drawingHandler = f.watch(() => e.state, async (t) => {
       const i = this._editor.value?.activeWorkflow;
-      t === "creating-features" && i?.formViewModel?.state === "disabled" && (this._mapViewContainer.value?.classList.replace("hide-map", "show-map"), this._selectedLayer && !this._selectedLayer.isTable && (this._currentPage = "drawing", this.progressStatus.emit(50), i?.sketchViewModel?.createGraphic && this._aiAnalysisInfo?.location && (await this._goToAndWaitForStationary({ center: this._aiAnalysisInfo.location }), this._selectedLayer.geometryType === "point" && await this._initializeSketchPoint(this._aiAnalysisInfo.location.clone()))), this.isMobile && this._adjustPanelContentHeight(), this._searchRef.value && await this._searchRef.value.setFocus()), t === "adding-attachment" || t === "editing-attachment" ? (this._addingAttachment = !0, this.editingAttachment.emit(!0)) : this._addingAttachment && (this.editingAttachment.emit(!1), this._addingAttachment = !1);
-    })), this._featureFormHandler || (this._featureFormHandler = f.watch(() => e.activeWorkflow?.formViewModel?.state, (t) => {
-      t === "ready" && this._currentPage !== "editing" ? (this._mapViewContainer.value?.classList?.replace("show-map", "hide-map"), setTimeout(() => {
-        this._setFloorLevel(this.floorLevel), this._aiAnalysisInfo?.results && this._setAttributeValuesFromAIAnalysis();
-      }, 500), !this.allowMultipleCreation && this._editor.value?.activeWorkflow && (this._editor.value.activeWorkflow.data.creationInfo.maxFeatures = 1), this._currentPage = "featureForm", this.progressStatus.emit(100), this.drawComplete.emit(!1)) : t === "disabled" && this.allowMultipleCreation && this._currentPage !== "editing" && (this._currentPage = "drawingMultipleFeatures");
+      t === "creating-features" && i?.formViewModel?.status === "not-loaded" && (this._mapViewContainer.value?.classList.replace("hide-map", "show-map"), this._selectedLayer && !this._selectedLayer.isTable && (this._currentPage = "drawing", this.progressStatus.emit(50), i?.sketchViewModel?.createGraphic && this._aiAnalysisInfo?.location && (await this._goToAndWaitForStationary({ center: this._aiAnalysisInfo.location }), this._selectedLayer.geometryType === "point" && await this._initializeSketchPoint(this._aiAnalysisInfo.location.clone()))), this.isMobile && this._adjustPanelContentHeight(), this._searchRef.value && await this._searchRef.value.setFocus()), t === "adding-attachment" || t === "editing-attachment" ? (this._addingAttachment = !0, this.editingAttachment.emit(!0)) : this._addingAttachment && (this.editingAttachment.emit(!1), this._addingAttachment = !1);
+    })), this._featureFormHandler || (this._featureFormHandler = f.watch(() => e.activeWorkflow?.formViewModel?.status, (t) => {
+      if (t === "loaded" && this._currentPage !== "editing")
+        this._mapViewContainer.value?.classList?.replace("show-map", "hide-map"), setTimeout(() => {
+          this._setFloorLevel(this.floorLevel), this._aiAnalysisInfo?.results && this._setAttributeValuesFromAIAnalysis();
+        }, 500), !this.allowMultipleCreation && this._editor.value?.activeWorkflow && (this._editor.value.activeWorkflow.data.creationInfo.maxFeatures = 1), this._currentPage = "featureForm", this.progressStatus.emit(100), this.drawComplete.emit(!1);
+      else if (t === "not-loaded" && this.allowMultipleCreation && this._currentPage !== "editing") {
+        this._currentPage = "drawingMultipleFeatures";
+        const i = this._updatedMapView, a = e.activeWorkflow;
+        i && !i.activeTool && a?.sketchViewModel && this._selectedLayer?.geometryType && a.sketchViewModel.create(this._selectedLayer.geometryType);
+      }
     })), this.allowMultipleCreation && e.activeWorkflow && (this._activeFeatureCountHandler || (this._activeFeatureCountHandler = f.watch(() => e.activeWorkflow?.data?.viewModel?.activeFeatureCount, (t) => {
       t === 0 && (this._currentPage = "drawing"), this.activeFeatureCountChange.emit(t);
     }))), await this.hideEditorsElements());
@@ -411,17 +417,17 @@ class N extends L {
     const i = e.sources;
     return i && i?.length > 0 ? (i.forEach((a) => {
       if (a.hasOwnProperty("layer")) {
-        const n = a, r = n.layer?.id, l = r ? t.map?.findLayerById(r) : "", d = n?.layer?.url;
-        l ? n.layer = l : d && (n.layer = new S(d));
+        const r = a, o = r.layer?.id, l = o ? t.map?.findLayerById(o) : "", d = r?.layer?.url;
+        l ? r.layer = l : d && (r.layer = new S(d));
       }
     }), i?.forEach((a) => {
       if (a.hasOwnProperty("locator")) {
-        const n = a;
-        if (n?.name === "ArcGIS World Geocoding Service") {
-          const r = n.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
-          n.outFields = r, n.singleLineFieldName = "SingleLine";
+        const r = a;
+        if (r?.name === "ArcGIS World Geocoding Service") {
+          const o = r.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+          r.outFields = o, r.singleLineFieldName = "SingleLine";
         }
-        n.url = n.url, delete n.url;
+        r.url = r.url, delete r.url;
       }
     })) : e = {
       ...e
@@ -437,15 +443,15 @@ class N extends L {
     if (i) {
       const a = t.fields.find((s) => s.name === i);
       if (a && !t?.formTemplate) {
-        const s = this._editor.value?.activeWorkflow;
-        s?.formViewModel && (s.formViewModel?.setValue?.(a.name, e), a.editable = !1);
+        const r = this._editor.value?.activeWorkflow?.formViewModel;
+        r && (await r.setValueForFieldName?.(a.name, e, r.features), a.editable = !1);
       } else if (t.formTemplate && this.formElements) {
         const s = new P({
           expression: `'${e}'`,
           name: "floor-info-test",
           title: "Floor Info",
           returnType: "string"
-        }), n = new $({
+        }), r = new C({
           label: i,
           editableExpression: "false",
           fieldName: i,
@@ -456,16 +462,16 @@ class N extends L {
           },
           valueExpression: s.name
         });
-        this._updatedMapView?.map.editableLayers.forEach((r) => {
+        this._updatedMapView?.map.editableLayers.forEach((o) => {
           const l = this.formElements.orgElements, d = this.formElements.orgExpressionInfos, m = [...l];
-          if (m.push(n), r.type === "feature") {
-            const g = r, h = new C({
+          if (m.push(r), o.type === "feature") {
+            const g = o, h = new $({
               title: g?.formTemplate?.title,
               description: g?.formTemplate?.description,
               elements: m,
               expressionInfos: [s].concat(d)
             });
-            r.formTemplate = h;
+            o.formTemplate = h;
           }
         });
       }
@@ -473,8 +479,8 @@ class N extends L {
   }
   _setAttributeValuesFromAIAnalysis() {
     this._aiAnalysisInfo?.results && this._aiAnalysisInfo.results.forEach((e) => {
-      const t = this._editor?.value?.activeWorkflow;
-      t?.formViewModel && e.key && e.key !== _ && e.success && t.formViewModel.setValue(e.key, e.value);
+      const i = this._editor?.value?.activeWorkflow?.formViewModel;
+      i && e.key && e.key !== _ && e.success && i.setValueForFieldName(e.key, e.value, i.features);
     });
   }
   _getImageExtractionData() {