@esri/solutions-components 1.2.0-next.4 → 1.2.0-next.40

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

@@ -112,6 +112,7 @@ export declare class CreateFeature extends LitElement {
     /**
      * Refreshes the editor state, optionally updating the floor level.
      *
+     * @param floorLevel
      * @param floorLevel - (Optional) The floor level to set. If provided, the editor updates to this floor level.
      * @returns A promise that resolves when the refresh operation is complete.
      */

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

@@ -1,14 +1,22 @@
-import { c as _ } from "../../chunks/runtime.js";
-import { l as y } from "../../chunks/loadModules.js";
-import { j as M, d as f } from "../../chunks/mapViewUtils.js";
+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 c } from "lit";
-import { createRef as p, ref as m } from "lit-html/directives/ref.js";
-import { LitElement as L, createEvent as l, noShadowRoot as V, safeClassMap as u } from "@arcgis/lumina";
+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.4 */
-const E = b`@layer{/** @license
+v1.2.0-next.40 */
+const I = b`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,15 +31,15 @@ const E = b`@layer{/** @license
  * 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 S extends L {
+class P extends L {
   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 = p(), this._isSubmitBtnClicked = !1, this._mapViewContainer = p(), this._searchDiv = p(), this._guidingMessageRefNode = p(), 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 = !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();
   }
   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 };
   }
   static {
-    this.styles = E;
+    this.styles = I;
   }
   static {
     this.shadowRootOptions = V;
@@ -71,9 +79,6 @@ class S extends L {
   async showForm() {
     this.progressStatus.emit(100), this._container?.classList.remove("display-none"), this._mapViewContainer.value?.classList?.replace("show-map", "hide-map"), this._currentPage = "featureForm";
   }
-  async load() {
-    await this.initModules();
-  }
   async loaded() {
     await this.init();
   }
@@ -92,26 +97,13 @@ class S extends L {
   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), c`${a && c`<calcite-notice class="notice-msg" .icon=${d} .kind=${s} open ${m(this._calciteNotice)}><div slot=message .innerHTML=${n ?? ""} ${m(this._guidingMessageRefNode)}></div></calcite-notice>` || ""}<calcite-loader class=${u(t)} label scale=s></calcite-loader>${this._currentPage === "featureForm" && this.isMobile && c`<calcite-button appearance=transparent class="edit-location-btn" icon-start=pin @click=${this.editLocation}>${this._translations.editLocationLabel}</calcite-button>` || ""}<div class=${u(o)} id=feature-form></div>${this.enableSearch && c`<div class=${`search-widget ${e} ${o}`} id=search-widget-ref ${m(this._searchDiv)}></div>` || ""}<div class=${u(i)} ${m(this._mapViewContainer)}></div>`;
+    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>`;
   }
   async init() {
     this.mapView && this.selectedLayerId && (this._updatedMapView = this.mapView, await (this.isMobile && this.updateMapPosition ? this.createMobileMapView() : this._loadWidgets()));
   }
-  async initModules() {
-    const [e, t, o, i, s, d, a, n] = await y([
-      "esri/widgets/Editor",
-      "esri/core/reactiveUtils",
-      "esri/widgets/Search",
-      "esri/form/ExpressionInfo",
-      "esri/form/elements/FieldElement",
-      "esri/form/FormTemplate",
-      "esri/views/MapView",
-      "esri/widgets/Home"
-    ]);
-    this.Editor = e, this.reactiveUtils = t, this.Search = o, this.ExpressionInfo = i, this.FieldElement = s, this.FormTemplate = d, this.MapView = a, this.Home = n;
-  }
   async createMobileMapView() {
-    this._mapViewContainer.value && this.MapView && this.mapView && (this._mapViewContainer.value.classList.add("hide-map"), await new this.MapView({
+    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,
@@ -119,7 +111,7 @@ class S extends L {
       popupEnabled: this.popupEnabled
     }).when((e) => {
       this._updatedMapView = e;
-      const t = this.Home && new this.Home({
+      const t = new x({
         view: this._updatedMapView
       });
       t && this._updatedMapView.ui.add(t, "top-left"), this._loadWidgets();
@@ -134,7 +126,7 @@ class S extends L {
     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 f(this.mapView, this.selectedLayerId);
+    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,
@@ -146,7 +138,7 @@ class S extends L {
         deleteEnabled: !1
         // default is true, set to false to disable the ability to delete features
       });
-    })), this.Editor && (this._editor = new this.Editor({
+    })), this._editor = new S({
       view: this._updatedMapView,
       layerInfos: e,
       visibleElements: {
@@ -158,26 +150,26 @@ class S extends L {
         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 = this.reactiveUtils?.watch(() => this._editor?.viewModel.state, (r) => {
+    }), 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);
       });
       i && this._editor.viewModel.addHandles(i);
-      const s = this.reactiveUtils?.watch(() => this._editor?.viewModel.featureTemplatesViewModel.state, (r) => {
+      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);
       });
       s && this._editor.viewModel.addHandles(s);
-      const d = this.reactiveUtils?.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (r) => {
+      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));
       });
       d && this._editor.viewModel.addHandles(d);
-      const a = this.reactiveUtils?.watch(() => this._editor?.viewModel.state, (r) => {
+      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"));
       });
       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());
+        r.detail.state === "complete" && (this._drawnGeometry = r.detail.graphic?.geometry, this.reportingArea && this.reportingAreaLayer && await this.queryIntersectingFeatures());
       });
       let n;
       this._editor.on("sketch-update", (r) => {
@@ -188,7 +180,7 @@ class S extends L {
     }
   }
   async queryIntersectingFeatures() {
-    const e = this.mapView && await f(this.mapView, this.reportingAreaLayer);
+    const e = this.mapView && await g(this.mapView, this.reportingAreaLayer);
     if (e) {
       const t = e.createQuery();
       t.geometry = this._drawnGeometry, t.spatialRelationship = "intersects";
@@ -218,18 +210,20 @@ class S extends L {
     });
   }
   async createSearchWidget() {
-    if (this._updatedMapView && this.Search) {
+    if (this._updatedMapView) {
       let e = {
         view: this._updatedMapView
       };
-      this.searchConfiguration && (e = {
+      if (this.searchConfiguration && (e = {
         ...this._getSearchConfig(this.searchConfiguration, this._updatedMapView)
-      }), this._search = new this.Search(e), this._search.container = "search-widget-ref", this._search.popupEnabled = !1, this._search.resultGraphicEnabled = !1;
+      }), this._search = new T(e), !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) => {
-        this._updatedMapView?.goTo(i.results[0].results[0].extent), this._selectedLayer?.geometryType === "point" && (t = i.results[0].results[0]?.feature.geometry);
+        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 = this.reactiveUtils?.watch(() => this._search?.viewModel.state, (i) => {
+      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();
@@ -253,7 +247,7 @@ class S extends L {
     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 && this.FeatureLayer && (a.layer = new this.FeatureLayer(h));
+        r ? a.layer = r : h && (a.layer = new C(h));
       }
     }), i?.forEach((s) => {
       if (s.hasOwnProperty("locator")) {
@@ -277,13 +271,13 @@ class S extends L {
       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 && this.ExpressionInfo && this.FieldElement) {
-        const s = new this.ExpressionInfo({
+      else if (t.formTemplate && this.formElements) {
+        const s = new E({
           expression: `'${e}'`,
           name: "floor-info-test",
           title: "Floor Info",
           returnType: "string"
-        }), d = new this.FieldElement({
+        }), d = new F({
           label: o,
           editableExpression: "false",
           fieldName: o,
@@ -296,14 +290,14 @@ class S extends L {
         });
         this._updatedMapView?.map.editableLayers.forEach((a) => {
           const n = this.formElements.orgElements, r = this.formElements.orgExpressionInfos, h = [...n];
-          if (h.push(d), a.type === "feature" && this.FormTemplate) {
-            const w = a, g = new this.FormTemplate({
-              title: w?.formTemplate?.title,
-              description: w?.formTemplate?.description,
+          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)
             });
-            a.formTemplate = g;
+            a.formTemplate = _;
           }
         });
       }
@@ -338,7 +332,7 @@ class S extends L {
     return new Promise((t) => setTimeout(t, e));
   }
 }
-_("create-feature", S);
+y("create-feature", P);
 export {
-  S as CreateFeature
+  P as CreateFeature
 };

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

@@ -1,12 +1,13 @@
-import { c as h } from "../../chunks/runtime.js";
-import { l as u } from "../../chunks/loadModules.js";
+import { c as u } from "../../chunks/runtime.js";
 import { u as m } from "../../chunks/useT9n.js";
-import { css as p, html as l } from "lit";
-import { LitElement as f, createEvent as d, noShadowRoot as w, safeClassMap as y } from "@arcgis/lumina";
+import { css as p, html as c } from "lit";
+import { LitElement as f, createEvent as d, noShadowRoot as w, safeClassMap as b } from "@arcgis/lumina";
+import y from "@arcgis/core/widgets/Editor";
+import * as l 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.4 */
-const b = p`@layer{/**
+v1.2.0-next.40 */
+const g = p`@layer{/**
  * @license
  * Copyright 2025 Esri
  *
@@ -22,7 +23,7 @@ const b = p`@layer{/**
  * 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{display:none!important}.esri-editor__panel-content{padding-block:10px!important}.notice-msg{padding:10px;width:calc(100% - 20px)}}`;
-class g extends f {
+class _ extends f {
   constructor() {
     super(...arguments), this.customizeSubmit = !1, this.enableSnapping = !1, this.showGuidingMsg = !0, this._editorLoading = !1, this._translations = m({ name: "create-related-feature", blocking: !0 }), this._addingAttachment = !1, this._isSubmitBtnClicked = !1, this.success = d(), this.fail = d(), this.isActionPending = d(), this.formReady = d();
   }
@@ -30,7 +31,7 @@ class g extends f {
     this.properties = { customizeSubmit: 5, enableSnapping: 5, mapView: 0, selectedFeature: 0, showGuidingMsg: 5, table: 0, _editorLoading: 16, _translations: 16 };
   }
   static {
-    this.styles = b;
+    this.styles = g;
   }
   static {
     this.shadowRootOptions = w;
@@ -49,19 +50,12 @@ class g extends f {
   async submit() {
     this._editor?.viewModel?.featureFormViewModel && (this._isSubmitBtnClicked = !0, this._editor.viewModel.featureFormViewModel.submit());
   }
-  async load() {
-    await this.initModules();
-  }
   async init() {
     this.mapView && await this.createEditorWidget();
   }
-  async initModules() {
-    const [e, t] = await u(["esri/widgets/Editor", "esri/core/reactiveUtils"]);
-    this.Editor = e, this.reactiveUtils = t;
-  }
   render() {
     const e = this._editorLoading ? "" : "display-none";
-    return l`${this.showGuidingMsg && l`<calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.provideDetailsMsg}</div></calcite-notice>` || ""}<calcite-loader class=${y(e)} label scale=s></calcite-loader>`;
+    return c`${this.showGuidingMsg && c`<calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.provideDetailsMsg}</div></calcite-notice>` || ""}<calcite-loader class=${b(e)} label scale=s></calcite-loader>`;
   }
   loaded() {
     this.init();
@@ -70,7 +64,7 @@ class g extends f {
     super.disconnectedCallback(), this._editor && this._editor.destroy();
   }
   async createEditorWidget() {
-    if (this._editor && this._editor.destroy(), this._container = document.createElement("div"), this._container?.classList.add("display-none"), this.enableSnapping || this._container.classList.add("hide-editor-toolbar"), this.Editor && (this._editor = new this.Editor({
+    this._editor && this._editor.destroy(), this._container = document.createElement("div"), this._container?.classList.add("display-none"), this.enableSnapping || this._container.classList.add("hide-editor-toolbar"), this._editor = new y({
       view: this.mapView,
       visibleElements: {
         flow: !0,
@@ -79,20 +73,19 @@ class g extends f {
         snappingControls: this.enableSnapping
       },
       container: this._container
-    }), this.el.appendChild(this._container), this.reactiveUtils)) {
-      const e = this.reactiveUtils.watch(() => this._editor?.viewModel.featureTemplatesViewModel.state, (i) => {
-        i === "ready" && (this._editorLoading = !0);
-      });
-      this._editor.viewModel.addHandles(e);
-      const t = this.reactiveUtils.watch(() => this._editor?.viewModel.state, (i) => {
-        i === "adding-attachment" || i === "editing-attachment" ? (this._addingAttachment = !0, this.isActionPending.emit(!0)) : this._addingAttachment && (this.isActionPending.emit(!1), this._addingAttachment = !1);
-      });
-      this._editor.viewModel.addHandles(t);
-      const a = this.reactiveUtils.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (i) => {
-        i === "ready" && this.formReady.emit();
-      });
-      this._editor.viewModel.addHandles(a);
-    }
+    }), this.el.appendChild(this._container);
+    const e = l.watch(() => this._editor?.viewModel.featureTemplatesViewModel.state, (i) => {
+      i === "ready" && (this._editorLoading = !0);
+    });
+    this._editor?.viewModel.addHandles(e);
+    const t = l.watch(() => this._editor?.viewModel.state, (i) => {
+      i === "adding-attachment" || i === "editing-attachment" ? (this._addingAttachment = !0, this.isActionPending.emit(!0)) : this._addingAttachment && (this.isActionPending.emit(!1), this._addingAttachment = !1);
+    });
+    this._editor?.viewModel.addHandles(t);
+    const a = l.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (i) => {
+      i === "ready" && this.formReady.emit();
+    });
+    this._editor?.viewModel.addHandles(a);
   }
   async startCreate() {
     const e = this.selectedFeature?.layer, t = this.table;
@@ -102,12 +95,12 @@ class g extends f {
         const r = (await e.queryFeatures({
           objectIds: [s],
           outFields: [e.objectIdField, a.keyField]
-        })).features[0], n = t.templates[0], c = {
+        })).features[0], n = t.templates[0], h = {
           attributeOverrides: this.makeAttributesForRelatedFeature(r, a, i),
           layer: t,
           template: n
         };
-        await this._editor?.startCreateFeaturesWorkflowAtFeatureCreation(c), await this.hideEditorsElements(), this._editor?.viewModel?.featureFormViewModel?.addHandles(this._editor.viewModel.featureFormViewModel.on("submit", this.submitted.bind(this)));
+        await this._editor?.startCreateFeaturesWorkflowAtFeatureCreation(h), await this.hideEditorsElements(), this._editor?.viewModel?.featureFormViewModel?.addHandles(this._editor.viewModel.featureFormViewModel.on("submit", this.submitted.bind(this)));
       }
     }
   }
@@ -151,7 +144,7 @@ class g extends f {
     return new Promise((t) => setTimeout(t, e));
   }
 }
-h("create-related-feature", g);
+u("create-related-feature", _);
 export {
-  g as CreateRelatedFeature
+  _ as CreateRelatedFeature
 };

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

@@ -1,15 +1,13 @@
 /// <reference path="../../index.d.ts" />
-import { AppLayout, IBasemapConfig, IMapChange, IMapInfo, ISearchConfiguration, theme, ELayoutMode } from '../../utils/interfaces';
+import { AppLayout, IBasemapConfig, IMapInfo, ISearchConfiguration, theme, ELayoutMode } from '../../utils/interfaces';
 import { LayerExpression } from '@arcgis/instant-apps-components';
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
-import { MapCard } from '../map-card/customElement.js';
-import { LayerTable } from '../layer-table/customElement.js';
 
 export declare class CrowdsourceManager extends LitElement {
     /**
      * AppLayout: The type of layout the application should use.
-     * Valid values: "mapView" or "tableView" or "splitView"
+     * Valid values: 'mapView' or 'tableView' or 'splitView'
      */
     appLayout: AppLayout | undefined;
     /** Array of objects containing proxy information for premium platform services. */
@@ -212,7 +210,7 @@ export declare class CrowdsourceManager extends LitElement {
      */
     showNewestFirst: boolean;
     /**
-     * theme: "light" | "dark" theme to be used
+     * theme: 'light' | 'dark' theme to be used
      *
      * @default 'light'
      */

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

@@ -5,10 +5,10 @@ import { defineCustomElements as C } from "@arcgis/instant-apps-components/dist/
 import { u as L } from "../../chunks/useT9n.js";
 import { css as I, html as l, nothing as x } from "lit";
 import { createRef as p, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as T, createEvent as m, noShadowRoot as M, safeClassMap as b, safeStyleMap as S } from "@arcgis/lumina";
+import { LitElement as T, createEvent as m, noShadowRoot as M, safeClassMap as f, safeStyleMap as S } from "@arcgis/lumina";
 /*! 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.4 */
+v1.2.0-next.40 */
 const F = I`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -23,7 +23,7 @@ const F = I`@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;--calcite-label-margin-bottom: 0px;--solutions-theme-foreground-color: var(--calcite-color-foreground-1)}.padding-1-2{padding:.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.z-index-1{z-index:1}.z-index-2{z-index:2!important}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-top{border-top:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-right{border-right:2px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.position-sticky{position:sticky}.height-50{height:50%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-51{height:calc(100% - 51px)}.display-none{display:none!important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button,.esri-floor-filter__level-button,.esri-floor-filter__browse-button{width:40px!important;height:40px!important}.position-absolute-50{position:absolute;inset:50px 0 0}.position-absolute-0{position:absolute;inset:0}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;margin:100px 0;z-index:1}.left-0{left:0}.right-0{right:0}.floating-container .floating-button{box-shadow:0 10px 25px #5c5d5e99;-webkit-transform:translatey(5px);transform:translatey(5px);-webkit-transition:all .3s;transition:all .3s}.z-index-0{z-index:0!important}.z-index-1{z-index:1!important}.filter-content-space{--calcite-dialog-content-space: 0px}.background-dark{background:var(--calcite-color-background)}.filter-extent-container{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.filter-modal-buttons{display:flex;padding:12px;gap:10px}.filter-extent-message{align-items:center;display:flex;gap:5px}}`;
+ */:host{display:block;--calcite-label-margin-bottom: 0px;--solutions-theme-foreground-color: var(--calcite-color-foreground-1)}.padding-1-2{padding:.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.z-index-2{z-index:2!important}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-top{border-top:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.position-sticky{position:sticky}.height-50{height:50%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-51{height:calc(100% - 51px)}.display-none{display:none!important}.adjusted-height-50_25{height:calc(50% + 25px)}.display-grid{display:grid}.padding-inline-start-75{padding-inline-start:.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button,.esri-floor-filter__level-button,.esri-floor-filter__browse-button{width:40px!important;height:40px!important}.position-absolute-0{position:absolute;inset:0}.visibility-hidden{visibility:hidden;height:0px}.border-width-0{border-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;margin:100px 0;z-index:1}.left-0{left:0}.right-0{right:0}.floating-container .floating-button{box-shadow:0 10px 25px #5c5d5e99;-webkit-transform:translatey(5px);transform:translatey(5px);-webkit-transition:all .3s;transition:all .3s}.z-index-0{z-index:0!important}.z-index-1{z-index:1!important}.filter-content-space{--calcite-dialog-content-space: 0px}.background-dark{background:var(--calcite-color-background)}.filter-extent-container{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.filter-modal-buttons{display:flex;padding:12px;gap:10px}.filter-extent-message{align-items:center;display:flex;gap:5px}}`;
 class V extends T {
   constructor() {
     super(), this.coverPageEnabled = !1, this.customInfoText = "", this.defaultCenter = "", this.defaultGlobalId = "", this.defaultLayer = "", this.defaultLevel = "", this.defaultOid = "", this.defaultWebmap = "", this.honorMapFieldSettings = !1, this.introductionWindowEnabled = !1, this.enableAutoRefresh = !1, this.enableBasemap = !0, this.enableColumnReorder = !0, this.enableCSV = !0, this.enableFloorFilter = !0, this.enableFullscreen = !0, this.enableHome = !0, this.enableLegend = !0, this.enableSearch = !0, this.enableShare = !1, this.enableSnapping = !0, this.enableZoom = !0, this.mapInfos = [], this.onlyShowUpdatableLayers = !0, this.popupHeaderColor = "", this.popupHeaderHoverColor = "", this.popupHeaderHoverTextColor = "", this.popupHeaderTextColor = "", this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !0, this.theme = "light", this.zoomAndScrollToSelected = !1, this.enableSelectionTool = !0, this.featureSelectionMode = "multiple", this._deleteDialogOpen = !1, this._enableCreateFeatures = !0, this._hideFooter = !1, this._hideTable = !1, this._isMobile = !1, this._translations = L({ name: "crowdsource-manager", blocking: !0 }), this._layoutMode = s.GRID, this._panelOpen = !0, this._numSelected = 0, this._filterOpen = !1, this._showInformationHeader = !0, this._layerExpressions = [], this._layerIds = [], this._isLoading = !0, this._mapExtentFilterChecked = !1, this._deleteIds = [], this._showInvalidMapAlert = !1, this._defaultAppLayoutHonored = !1, this._defaultCenterHonored = !1, this._defaultLevelHonored = !1, this._layerTable = p(), this._shouldSetMapView = !1, this._filterList = p(), this._mapCard = p(), this._isMapViewOnLoad = !1, this.showIntroductionWindow = m(), this.showCoverPage = m(), this.listenOn(window, "featureSelectionChange", this.featureSelectionChange), this.listenOn(window, "popupClosed", this.popupClosed), this.listenOn(window, "layoutChanged", this.layoutChanged), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "showDelete", this.showDelete), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "idsFound", this.idsFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled), this.listenOn(window, "creatingFeature", this.creatingFeature), C(window);
@@ -90,7 +90,7 @@ class V extends T {
   }
   render() {
     const e = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "", t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", i = this._translations.invalidWebMapMsg?.replace("{{web_map}}", this._mapInfo?.name || "");
-    return l`${this._showInvalidMapAlert && l`<calcite-alert auto-close class=${b(t)} icon=check-circle kind=danger label @calciteAlertClose=${() => {
+    return l`${this._showInvalidMapAlert && l`<calcite-alert auto-close class=${f(t)} icon=check-circle kind=danger label @calciteAlertClose=${() => {
       this._showInvalidMapAlert = !1;
     }} open placement=top><div slot=message>${i}</div></calcite-alert>` || ""}<calcite-shell class="position-relative"><calcite-panel class=${`width-full height-full ${e}`} .loading=${this._isLoading}>${this._getBody(this._layoutMode, this._panelOpen, this._hideTable)}</calcite-panel>${this._getFooter()}</calcite-shell>${this._filterModal()}${!this._isMobile && this._deleteModal() || ""}`;
   }
@@ -111,19 +111,7 @@ class V extends T {
     e === "splitView" && !this._panelOpen && this._toggleLayout(), e === "mapView" ? this._showMapInFullView() : this._showMapInCardView();
   }
   _getDividerIcon(e, t) {
-    let i = "";
-    switch (e) {
-      case s.HORIZONTAL:
-        i = t ? "chevrons-up" : "chevrons-down";
-        break;
-      case s.VERTICAL:
-        i = t ? "chevrons-left" : "chevrons-right";
-        break;
-      case s.GRID:
-        i = t ? "chevrons-left" : "chevrons-right";
-        break;
-    }
-    return i;
+    return e === s.HORIZONTAL ? t ? "chevrons-up" : "chevrons-down" : e === s.VERTICAL || e === s.GRID ? t ? "chevrons-left" : "chevrons-right" : void 0;
   }
   _getMapSizeClass(e, t, i) {
     let a = "";
@@ -191,8 +179,8 @@ class V extends T {
     }} @featureOrRecordSubmitted=${() => this._layerTable.value && void this._layerTable.value.refresh()} .selectedFeaturesIds=${this._layerTable.value?.selectedIds} .selectingFeatureFromMap=${this.appLayout === "mapView"} .showSketchWidgets=${o?.geometryType !== "point"} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected}></card-manager></div>`;
   }
   _getTable(e, t, i) {
-    const a = this.appLayout === "mapView", o = this.appLayout === "tableView", n = i && this._isMobile ? "visibility-hidden" : a ? "display-none" : "", r = a ? "height-full width-full z-index-0" : "display-none", h = this._getTableSizeClass(e, t), d = e === s.HORIZONTAL ? "horizontal" : "vertical", _ = e === s.HORIZONTAL ? "header" : "panel-start", c = this.defaultWebmap && this.defaultLayer, g = this._isMobile ? "border-top" : "", f = this.defaultGlobalId ? this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId] : void 0, w = this.defaultOid ? this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map((y) => Number.parseInt(y, 10)) : [Number.parseInt(this.defaultOid, 10)] : void 0;
-    return l`<calcite-shell class=${`${h} ${g} border-bottom z-index-1`}>${this._isMobile ? void 0 : l`<calcite-action-bar class="border-sides" expand-disabled .layout=${d} slot=${_ ?? x}>${this.getActions(e, t)}</calcite-action-bar>`}<div class=${`width-full height-full position-relative z-index-0 ${n}`}><layer-table .appLayout=${this.appLayout} .defaultGlobalId=${c ? f : void 0} .defaultLayerId=${c ? this.defaultLayer : ""} .defaultOid=${c && !f ? w : void 0} .enableAutoRefresh=${this.enableAutoRefresh} .enableCSV=${this.enableCSV} .enableColumnReorder=${this.enableColumnReorder} .enableInlineEdit=${this?._mapInfo?.enableInlineEdit} .enableShare=${this.enableShare} .featureSelectionMode=${this.featureSelectionMode} .honorMapFieldSettings=${this.honorMapFieldSettings} .isMobile=${this._isMobile} .mapHidden=${o} .mapInfo=${this._mapInfo} .mapView=${this?._mapView} .showOnlyUpdatableLayers=${this.onlyShowUpdatableLayers} @toggleFilter=${this._toggleFilter} .shareIncludeEmbed=${this.shareIncludeEmbed} .shareIncludeSocial=${this.shareIncludeSocial} .showNewestFirst=${this.showNewestFirst} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected} .zoomToScale=${this.zoomToScale} ${u(this._layerTable)}></layer-table></div><div class=${b(r)} id=full-map-view></div></calcite-shell>`;
+    const a = this.appLayout === "mapView", o = this.appLayout === "tableView", n = i && this._isMobile ? "visibility-hidden" : a ? "display-none" : "", r = a ? "height-full width-full z-index-0" : "display-none", h = this._getTableSizeClass(e, t), d = e === s.HORIZONTAL ? "horizontal" : "vertical", _ = e === s.HORIZONTAL ? "header" : "panel-start", c = this.defaultWebmap && this.defaultLayer, g = this._isMobile ? "border-top" : "", b = this.defaultGlobalId ? this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId] : void 0, w = this.defaultOid ? this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map((y) => Number.parseInt(y, 10)) : [Number.parseInt(this.defaultOid, 10)] : void 0;
+    return l`<calcite-shell class=${`${h} ${g} border-bottom z-index-1`}>${this._isMobile ? void 0 : l`<calcite-action-bar class="border-sides" expand-disabled .layout=${d} slot=${_ ?? x}>${this.getActions(e, t)}</calcite-action-bar>`}<div class=${`width-full height-full position-relative z-index-0 ${n}`}><layer-table .appLayout=${this.appLayout} .defaultGlobalId=${c ? b : void 0} .defaultLayerId=${c ? this.defaultLayer : ""} .defaultOid=${c && !b ? w : void 0} .enableAutoRefresh=${this.enableAutoRefresh} .enableCSV=${this.enableCSV} .enableColumnReorder=${this.enableColumnReorder} .enableInlineEdit=${this?._mapInfo?.enableInlineEdit} .enableShare=${this.enableShare} .featureSelectionMode=${this.featureSelectionMode} .honorMapFieldSettings=${this.honorMapFieldSettings} .isMobile=${this._isMobile} .mapHidden=${o} .mapInfo=${this._mapInfo} .mapView=${this?._mapView} .showOnlyUpdatableLayers=${this.onlyShowUpdatableLayers} @toggleFilter=${this._toggleFilter} .shareIncludeEmbed=${this.shareIncludeEmbed} .shareIncludeSocial=${this.shareIncludeSocial} .showNewestFirst=${this.showNewestFirst} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected} .zoomToScale=${this.zoomToScale} ${u(this._layerTable)}></layer-table></div><div class=${f(r)} id=full-map-view></div></calcite-shell>`;
   }
   getActions(e, t) {
     const i = this._getDividerIcon(e, t), a = t ? this._translations.close : this._translations.open, o = "toggle-layout";
@@ -210,7 +198,7 @@ class V extends T {
   }
   _mapExtentFilter() {
     const e = this._layerExpressions?.length === 0;
-    return l`<calcite-panel><div><calcite-block class=${b(this.theme === "dark" ? "background-dark" : "")} heading menu-placement=bottom-end open><div class="filter-extent-container"><div class="filter-extent-message"><span>${this._translations.filterByExtentMsg}</span><calcite-icon icon=information id=filter-message-info scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top reference-element=filter-message-info>${this._translations.filterByExtentTooltipMsg}</calcite-tooltip></div><calcite-switch .checked=${this._mapExtentFilterChecked} @calciteSwitchChange=${(t) => {
+    return l`<calcite-panel><div><calcite-block class=${f(this.theme === "dark" ? "background-dark" : "")} heading menu-placement=bottom-end open><div class="filter-extent-container"><div class="filter-extent-message"><span>${this._translations.filterByExtentMsg}</span><calcite-icon icon=information id=filter-message-info scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top reference-element=filter-message-info>${this._translations.filterByExtentTooltipMsg}</calcite-tooltip></div><calcite-switch .checked=${this._mapExtentFilterChecked} @calciteSwitchChange=${(t) => {
       const a = !!(t.target.checked || this._filterList.value?.filterCount && this._filterList.value?.filterCount > 0);
       this._layerTable.value && this._layerTable.value?.filterUpdate(a, t.target.checked), this._mapCard.value && this._mapCard.value?.updateFilterState(a), this._mapExtentFilterChecked = t.target.checked;
     }} scale=m></calcite-switch></div></calcite-block>${e && l`<div class="filter-modal-buttons" slot=footer><calcite-button appearance=outline @click=${this._handleFilterListReset} width=full>${this._translations.Resetfilter}</calcite-button><calcite-button @click=${this._closeFilter} width=full>${this._translations.close}</calcite-button></div>` || ""}</div></calcite-panel>`;

package/dist/components/crowdsource-reporter/customElement.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference path="../../index.d.ts" />
-import { ILayerExpression, ILayerItemsHash, IMapChange, IMapClick, IMapInfo, IReportingOption, IReportingOptions, ISearchConfiguration, ISortingInfo, theme } from '../../utils/interfaces';
+import { ILayerExpression, IMapInfo, IReportingOptions, ISearchConfiguration, ISortingInfo, theme } from '../../utils/interfaces';
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
-import { CreateRelatedFeature } from '../create-related-feature/customElement.js';
-import { LayerList } from '../layer-list/customElement.js';
-import { FeatureList } from '../feature-list/customElement.js';
-import { FeatureDetails } from '../feature-details/customElement.js';
-import { CreateFeature } from '../create-feature/customElement.js';
 
 export declare class CrowdsourceReporter extends LitElement {
     /**
@@ -232,7 +227,11 @@ export declare class CrowdsourceReporter extends LitElement {
      * @default ''
      */
     reportingAreaMessage: string;
-    /** Method to update layerExpressions with the translated values */
+    /**
+     * Method to update layerExpressions with the translated values
+     *
+     * @param t9nLayerExpressions
+     */
     updateLayerExpressionsT9n(t9nLayerExpressions: ILayerExpression[]): Promise<void>;
     /** Emitted when toggle panel button is clicked in reporter */
     readonly togglePanel: TargetedEvent<this, {