@esri/solutions-components 1.0.0-next.20250415 → 1.0.0-next.20250421

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

@@ -3,13 +3,13 @@ import { l as g } from "../../chunks/loadModules.js";
 import { i as y, d as M } from "../../chunks/mapViewUtils.js";
 import { u as v } from "../../chunks/useT9n.js";
 import { html as c } from "lit";
-import { createRef as m, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as b, createEvent as l, noShadowRoot as L, safeClassMap as f } from "@arcgis/lumina";
-import { css as S } from "@lit/reactive-element/css-tag.js";
+import { createRef as p, ref as m } from "lit-html/directives/ref.js";
+import { LitElement as b, createEvent as n, noShadowRoot as L, safeClassMap as u } from "@arcgis/lumina";
+import { css as V } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
-const E = S`@layer{/** @license
+v1.0.0-next.20250421 */
+const E = V`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,9 +24,9 @@ const E = S`@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)}.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 V extends b {
+class S extends b {
   constructor() {
-    super(...arguments), this.customizeSubmit = !1, this.enableSearch = !1, this.enableSnapping = !1, this.showGuidingMsg = !0, this._currentPage = "templatePicker", this._editorLoading = !1, this._translations = v({ name: "create-feature" }), this._calciteNotice = m(), this._isSubmitBtnClicked = !1, this._mapViewContainer = m(), this._searchDiv = m(), this.success = l(), this.fail = l(), this.drawComplete = 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.locale = "", this.selectedLayerId = "", this.showGuidingMsg = !0, this.submitNewReportsMessage = "", this._currentPage = "templatePicker", this._editorLoading = !1, this._translations = v({ name: "create-feature" }), this._addingAttachment = !1, this._calciteNotice = p(), this._isSubmitBtnClicked = !1, this._mapViewContainer = p(), this._searchDiv = p(), this.success = n(), this.fail = n(), this.drawComplete = n(), this.editingAttachment = n(), this.progressStatus = n(), this.modeChanged = n();
   }
   static {
     this.properties = { customizeSubmit: 5, enableSearch: 5, enableSnapping: 5, floorLevel: 1, formElements: 1, isMobile: 5, locale: 1, mapView: 0, searchConfiguration: 0, selectedLayerId: 1, showGuidingMsg: 5, submitNewReportsMessage: 1, _currentPage: 16, _editorLoading: 16, _translations: 16 };
@@ -48,7 +48,7 @@ class V extends b {
   }
   /** Called each time the mapView prop is changed. */
   async mapViewWatchHandler() {
-    await this.mapView.when(async () => {
+    this.mapView && await this.mapView.when(async () => {
       await this.init();
     });
   }
@@ -60,7 +60,7 @@ class V extends b {
   async _editorLoadingWatchHandler(e) {
     if (e) {
       if (this._container?.classList.add("display-none"), this._selectedLayer?.isTable) {
-        if (this._selectedLayer.templates) {
+        if (this._selectedLayer.templates && this._editor) {
           const t = this._selectedLayer.templates[0], s = {
             layer: this._selectedLayer,
             template: t
@@ -118,13 +118,13 @@ class V extends b {
   }
   /** Called every time the component is disconnected from the DOM, */
   disconnectedCallback() {
-    super.disconnectedCallback(), this._editor && (this._editor.viewModel.sketchViewModel && this._editor.viewModel.sketchViewModel?.destroy(), this._editor.destroy(), this.enableSnapping && (this.mapView.ui.view.grid = null));
+    super.disconnectedCallback(), this._editor && (this._editor.viewModel.sketchViewModel && this._editor.viewModel.sketchViewModel?.destroy(), this._editor.destroy(), this.enableSnapping && this.mapView?.ui.view && ((this.mapView?.ui.view).grid = null));
   }
   /** Renders the component. */
   render() {
     const e = this._currentPage === "drawing" ? "" : "display-none", t = this._editorLoading ? "" : "display-none", s = this._editorLoading ? "display-none" : "", i = this.isMobile ? "show-map" : "display-none", a = this.showGuidingMsg && this._currentPage !== "templatePicker";
-    let n = this._translations.chooseCategoryMsg;
-    return this._currentPage === "drawing" ? n = this._translations.provideLocationMsg : this._currentPage === "featureForm" && (n = this._translations.provideDetailsMsg), c`${a && c`<calcite-notice class="notice-msg" icon=lightbulb kind=success open ${p(this._calciteNotice)}><div slot=message>${n}</div></calcite-notice>` || ""}<calcite-loader class=${f(t)} label scale=s></calcite-loader><div class=${f(s)} id=feature-form></div>${this.enableSearch && c`<div class=${`search-widget ${e} ${s}`} id=search-widget-ref ${p(this._searchDiv)}></div>` || ""}<div class=${`${i}`} ${p(this._mapViewContainer)}></div>`;
+    let l = this._translations.chooseCategoryMsg;
+    return this._currentPage === "drawing" ? l = this._translations.provideLocationMsg : this._currentPage === "featureForm" && (l = this._translations.provideDetailsMsg), c`${a && c`<calcite-notice class="notice-msg" icon=lightbulb kind=success open ${m(this._calciteNotice)}><div slot=message>${l}</div></calcite-notice>` || ""}<calcite-loader class=${u(t)} label scale=s></calcite-loader><div class=${u(s)} id=feature-form></div>${this.enableSearch && c`<div class=${`search-widget ${e} ${s}`} id=search-widget-ref ${m(this._searchDiv)}></div>` || ""}<div class=${`${i}`} ${m(this._mapViewContainer)}></div>`;
   }
   //--------------------------------------------------------------------------
   //
@@ -142,7 +142,7 @@ class V extends b {
    * @protected
    */
   async initModules() {
-    const [e, t, s, i, a, n, o] = await g([
+    const [e, t, s, i, a, l, o] = await g([
       "esri/widgets/Editor",
       "esri/core/reactiveUtils",
       "esri/widgets/Search",
@@ -151,7 +151,7 @@ class V extends b {
       "esri/form/FormTemplate",
       "esri/views/MapView"
     ]);
-    this.Editor = e, this.reactiveUtils = t, this.Search = s, this.ExpressionInfo = i, this.FieldElement = a, this.FormTemplate = n, this.MapView = o;
+    this.Editor = e, this.reactiveUtils = t, this.Search = s, this.ExpressionInfo = i, this.FieldElement = a, this.FormTemplate = l, this.MapView = o;
   }
   /**
    * updates the map view (in case of mobile)
@@ -159,7 +159,7 @@ class V extends b {
    * @protected
    */
   async createMobileMapView() {
-    this._mapViewContainer.value && (this._mapViewContainer.value.classList.add("hide-map"), await new this.MapView({
+    this._mapViewContainer.value && this.MapView && this.mapView && (this._mapViewContainer.value.classList.add("hide-map"), await new this.MapView({
       map: this.mapView.map,
       container: this._mapViewContainer.value,
       zoom: this.mapView.zoom
@@ -186,11 +186,11 @@ class V extends b {
     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 = await y(this._updatedMapView), s = await M(this.mapView, this.selectedLayerId);
-    s && (this._selectedLayer = s, this._selectedLayer?.isTable || t.forEach((r) => {
+    const t = this._updatedMapView && await y(this._updatedMapView), s = this.mapView && await M(this.mapView, this.selectedLayerId);
+    if (s && (this._selectedLayer = s, !this._selectedLayer?.isTable && t && t.forEach((i) => {
       e.push({
-        layer: r,
-        enabled: r?.type === "feature" && r?.id === this.selectedLayerId,
+        layer: i,
+        enabled: i?.type === "feature" && i?.id === this.selectedLayerId,
         addEnabled: !0,
         // default is true, set to false to disable the ability to add a new feature
         updateEnabled: !1,
@@ -198,7 +198,7 @@ class V extends b {
         deleteEnabled: !1
         // default is true, set to false to disable the ability to delete features
       });
-    })), this._editor = new this.Editor({
+    })), this.Editor && (this._editor = new this.Editor({
       view: this._updatedMapView,
       layerInfos: e,
       visibleElements: {
@@ -210,25 +210,26 @@ class V extends b {
         sketch: !1
       },
       container: this._container
-    }), this._mapViewContainer.value ? this.el.insertBefore(this._container, this._mapViewContainer.value) : this.el.appendChild(this._container);
-    const i = this.reactiveUtils.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);
-    });
-    this._editor.viewModel.addHandles(i);
-    const a = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (r) => {
-      r === "ready" && this._editor.viewModel?.activeWorkflow?.type !== "create-features" && (this.progressStatus.emit(50), this._editorLoading = !0);
-    });
-    this._editor.viewModel.addHandles(a);
-    const n = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (r) => {
-      r === "ready" && this._editor.viewModel.featureFormViewModel && (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._currentPage = "featureForm", this.progressStatus.emit(100), this.drawComplete.emit());
-    });
-    this._editor.viewModel.addHandles(n);
-    const o = this.reactiveUtils.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"));
-    });
-    this._editor.viewModel.addHandles(o);
+    }), this._mapViewContainer.value ? this.el.insertBefore(this._container, this._mapViewContainer.value) : this.el.appendChild(this._container)), this._editor) {
+      const i = this.reactiveUtils?.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 a = this.reactiveUtils?.watch(() => this._editor?.viewModel.featureTemplatesViewModel.state, (r) => {
+        r === "ready" && this._editor?.viewModel?.activeWorkflow?.type !== "create-features" && (this.progressStatus.emit(50), this._editorLoading = !0);
+      });
+      a && this._editor.viewModel.addHandles(a);
+      const l = this.reactiveUtils?.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (r) => {
+        r === "ready" && this._editor?.viewModel.featureFormViewModel && (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._currentPage = "featureForm", this.progressStatus.emit(100), this.drawComplete.emit());
+      });
+      l && this._editor.viewModel.addHandles(l);
+      const o = this.reactiveUtils?.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"));
+      });
+      o && this._editor.viewModel.addHandles(o);
+    }
   }
   /**
    * Start creating the feature
@@ -237,7 +238,7 @@ class V extends b {
    */
   async startCreate() {
     return await this.hideEditorsElements(), new Promise((e, t) => {
-      if (this._editor.viewModel.featureTemplatesViewModel.items?.length) {
+      if (this._editor?.viewModel.featureTemplatesViewModel.items?.length) {
         const s = this._editor.viewModel.featureTemplatesViewModel.items[0].items;
         this._editor.viewModel.featureTemplatesViewModel.addHandles(this._editor.viewModel.featureTemplatesViewModel.on("select", () => {
           this.progressStatus.emit(75), setTimeout(() => {
@@ -259,22 +260,24 @@ class V extends b {
    * @protected
    */
   async createSearchWidget() {
-    let e = {
-      view: this._updatedMapView
-    };
-    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;
-    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);
-    }));
-    const s = this.reactiveUtils.watch(() => this._search.viewModel.state, (i) => {
-      i === "ready" && setTimeout(() => {
-        this._editor.viewModel.sketchViewModel?.createGraphic && t && (this._editor.viewModel.sketchViewModel.createGraphic.set("geometry", t), this._editor.viewModel.sketchViewModel.complete(), this.hideEditorsElements());
-      }, 100);
-    });
-    this._search.viewModel.addHandles(s);
+    if (this._updatedMapView && this.Search) {
+      let e = {
+        view: this._updatedMapView
+      };
+      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;
+      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);
+      }));
+      const s = this.reactiveUtils?.watch(() => this._search?.viewModel.state, (i) => {
+        i === "ready" && setTimeout(() => {
+          this._editor?.viewModel.sketchViewModel?.createGraphic && t && (this._editor.viewModel.sketchViewModel.createGraphic.set("geometry", t), this._editor.viewModel.sketchViewModel.complete(), this.hideEditorsElements());
+        }, 100);
+      });
+      s && this._search.viewModel.addHandles(s);
+    }
   }
   /**
    * Initialize the search widget based on user defined configuration
@@ -288,7 +291,7 @@ class V extends b {
     return i && i?.length > 0 ? (e[s] = !1, i.forEach((a) => {
       if (a.hasOwnProperty("layer")) {
         const o = a, r = o.layer?.id, h = r ? t.map.findLayerById(r) : "", d = o?.layer?.url;
-        h ? o.layer = h : d && (o.layer = new this.FeatureLayer(d));
+        h ? o.layer = h : d && this.FeatureLayer && (o.layer = new this.FeatureLayer(d));
       }
     }), i?.forEach((a) => {
       if (a.hasOwnProperty("locator")) {
@@ -317,14 +320,14 @@ class V extends b {
     if (s) {
       const i = t.fields.find((a) => a.name === s);
       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._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 a = new this.ExpressionInfo({
           expression: `"${e}"`,
           name: "floor-info-test",
           title: "Floor Info",
           returnType: "string"
-        }), n = new this.FieldElement({
+        }), l = new this.FieldElement({
           label: s,
           editableExpression: "false",
           fieldName: s,
@@ -335,12 +338,12 @@ class V extends b {
           },
           valueExpression: a.name
         });
-        this._updatedMapView.map.editableLayers.forEach((o) => {
+        this._updatedMapView?.map.editableLayers.forEach((o) => {
           const r = this.formElements.orgElements, h = this.formElements.orgExpressionInfos, d = [...r];
-          if (d.push(n), o.type === "feature") {
-            const u = o, w = new this.FormTemplate({
-              title: u?.formTemplate?.title,
-              description: u?.formTemplate?.description,
+          if (d.push(l), o.type === "feature" && this.FormTemplate) {
+            const f = o, w = new this.FormTemplate({
+              title: f?.formTemplate?.title,
+              description: f?.formTemplate?.description,
               elements: d,
               expressionInfos: [a].concat(h)
             });
@@ -400,7 +403,7 @@ class V extends b {
     e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("isMobile") && this.isMobileHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
   }
 }
-_("create-feature", V);
+_("create-feature", S);
 export {
-  V as CreateFeature
+  S as CreateFeature
 };

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

@@ -14,13 +14,13 @@ export declare class CreateRelatedFeature extends LitElement {
     /** string: Locale to use for translation of stings in the UI */
     locale: string;
     /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** __esri.Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
-    selectedFeature: __esri.Graphic;
+    selectedFeature: __esri.Graphic | undefined;
     /** boolean: When true the notice message should be shown */
     showGuidingMsg?: boolean;
     /** __esri.FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
-    table: __esri.FeatureLayer;
+    table: __esri.FeatureLayer | undefined;
     /** Submit the comment */
     submit(): Promise<void>;
     /** Emitted on demand when the comment is submitted successfully */

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

@@ -2,11 +2,11 @@ import { c as h } from "../../chunks/runtime.js";
 import { l as u } from "../../chunks/loadModules.js";
 import { u as m } from "../../chunks/useT9n.js";
 import { html as d } from "lit";
-import { LitElement as p, createEvent as l, safeClassMap as f, noShadowRoot as w } from "@arcgis/lumina";
+import { LitElement as p, createEvent as l, noShadowRoot as f, safeClassMap as w } from "@arcgis/lumina";
 import { css as y } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const b = y`@layer{/**
  * @license
  * Copyright 2025 Esri
@@ -25,11 +25,21 @@ const b = y`@layer{/**
  */: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 p {
   constructor() {
-    super(...arguments), this.customizeSubmit = !1, this.enableSnapping = !1, this.showGuidingMsg = !0, this._editorLoading = !1, this._translations = m({ name: "create-related-feature" }), this._isSubmitBtnClicked = !1, this.success = l(), this.fail = l(), this.isActionPending = l(), this.formReady = l();
+    super(...arguments), this.customizeSubmit = !1, this.enableSnapping = !1, this.locale = "", this.showGuidingMsg = !0, this._editorLoading = !1, this._translations = m({ name: "create-related-feature" }), this._addingAttachment = !1, this._isSubmitBtnClicked = !1, this.success = l(), this.fail = l(), this.isActionPending = l(), this.formReady = l();
   }
   static {
     this.properties = { customizeSubmit: 5, enableSnapping: 5, locale: 1, mapView: 0, selectedFeature: 0, showGuidingMsg: 5, table: 0, _editorLoading: 16, _translations: 16 };
   }
+  static {
+    this.styles = b;
+  }
+  static {
+    this.shadowRootOptions = f;
+  }
+  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
+  willUpdate(e) {
+    e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
+  }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -41,7 +51,7 @@ class g extends p {
   }
   /** Called each time the mapView prop is changed. */
   async mapViewWatchHandler() {
-    await this.mapView.when(async () => {
+    await this.mapView?.when(async () => {
       await this.init();
     });
   }
@@ -82,7 +92,7 @@ class g extends p {
   }
   render() {
     const e = this._editorLoading ? "" : "display-none";
-    return d`${this.showGuidingMsg && d`<calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.provideDetailsMsg}</div></calcite-notice>` || ""}<calcite-loader class=${f(e)} label scale=s></calcite-loader>`;
+    return d`${this.showGuidingMsg && d`<calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.provideDetailsMsg}</div></calcite-notice>` || ""}<calcite-loader class=${w(e)} label scale=s></calcite-loader>`;
   }
   /** Called once just after the component is fully loaded and the first render() occurs. */
   loaded() {
@@ -98,7 +108,7 @@ class g extends p {
    * @protected
    */
   async createEditorWidget() {
-    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 this.Editor({
+    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({
       view: this.mapView,
       visibleElements: {
         flow: !0,
@@ -107,19 +117,20 @@ class g extends p {
         snappingControls: this.enableSnapping
       },
       container: this._container
-    }), this.el.appendChild(this._container);
-    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), 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);
+    }
   }
   /**
    * Start creating the feature feature form
@@ -127,8 +138,8 @@ class g extends p {
    * @protected
    */
   async startCreate() {
-    const e = this.selectedFeature.layer, t = this.table;
-    if (e?.relationships && t?.relationships && this._editor.viewModel.featureFormViewModel && this.selectedFeature && t.templates) {
+    const e = this.selectedFeature?.layer, t = this.table;
+    if (e?.relationships && t?.relationships && this._editor?.viewModel.featureFormViewModel && this.selectedFeature && t.templates) {
       const a = e.relationships[0], i = t.relationships.find((o) => e.layerId === o.relatedTableId), s = Number(this.selectedFeature.getObjectId());
       if (!isNaN(s) && i) {
         const r = (await e.queryFeatures({
@@ -168,7 +179,7 @@ class g extends p {
     let s;
     e.attributes.hasOwnProperty(i) ? s = e.getAttribute(i) : e.attributes.hasOwnProperty(i.toLowerCase()) ? s = e.getAttribute(i.toLowerCase()) : e.attributes.hasOwnProperty(i.toUpperCase()) && (s = e.getAttribute(i.toUpperCase()));
     let o = a.keyField;
-    const r = this.table.fields.find((n) => n.name.toLocaleLowerCase() === o.toLocaleLowerCase());
+    const r = this.table?.fields.find((n) => n.name.toLocaleLowerCase() === o.toLocaleLowerCase());
     if (r)
       return o = r.name, {
         [o]: s
@@ -188,7 +199,7 @@ class g extends p {
     if (e.valid.length && this._isSubmitBtnClicked) {
       this._isSubmitBtnClicked = !1;
       try {
-        this._editor.activeWorkflow && (await this._editor.activeWorkflow.commit(), this._editor.viewModel.failures?.length && this._editor.viewModel.failures.some((t) => {
+        this._editor?.activeWorkflow && (await this._editor.activeWorkflow.commit(), this._editor.viewModel.failures?.length && this._editor.viewModel.failures.some((t) => {
           if (t.error)
             throw t.error;
         }));
@@ -208,16 +219,6 @@ class g extends p {
   timeout(e) {
     return new Promise((t) => setTimeout(t, e));
   }
-  static {
-    this.styles = b;
-  }
-  static {
-    this.shadowRootOptions = w;
-  }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
-  willUpdate(e) {
-    e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
-  }
 }
 h("create-related-feature", g);
 export {

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

@@ -11,11 +11,11 @@ export declare class CrowdsourceManager extends LitElement {
      * AppLayout: The type of layout the application should use.
      * Valid values: "mapView" or "tableView" or "splitView"
      */
-    appLayout: AppLayout;
+    appLayout: AppLayout | undefined;
     /** Array of objects containing proxy information for premium platform services. */
     appProxies: any;
     /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
-    basemapConfig: IBasemapConfig;
+    basemapConfig: IBasemapConfig | undefined;
     /**
      * boolean: When true a cover page has been enabled in the consuming application.
      * Also when true a floating button will be shown in the lower right of the window that
@@ -25,7 +25,7 @@ export declare class CrowdsourceManager extends LitElement {
     /** string: custom notification text to display in the card manager */
     customInfoText: string;
     /** string: default layout the application should use */
-    defaultAppLayout: AppLayout;
+    defaultAppLayout: AppLayout | undefined;
     /**
      * string: default center point values for the map
      * ; delimited x;y pair
@@ -94,7 +94,7 @@ export declare class CrowdsourceManager extends LitElement {
     /** string: The font color to apply to the popup header */
     popupHeaderTextColor: string;
     /** ISearchConfiguration: Configuration details for the Search widget */
-    searchConfiguration: ISearchConfiguration;
+    searchConfiguration: ISearchConfiguration | undefined;
     /** boolean: When true the share options will include embed option */
     shareIncludeEmbed: boolean;
     /** boolean: When true the share options will include social media sharing */
@@ -106,7 +106,7 @@ export declare class CrowdsourceManager extends LitElement {
     /** boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table */
     zoomAndScrollToSelected: boolean;
     /** number: default scale to zoom to when zooming to a single point feature */
-    zoomToScale: number;
+    zoomToScale: number | undefined;
     /** Emitted on demand when a info button is clicked */
     readonly showIntroductionWindow: TargetedEvent<this, undefined>;
     /** Emitted on demand when a cover page button is clicked */