@esri/solutions-components 1.0.0-next.20250501.2 → 1.0.0-next.20250506.1

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

@@ -9,27 +9,57 @@ export declare class CreateFeature extends LitElement {
     /**
      * boolean: Set this to true when have a custom submit button in the app.
      * This will hide the header and footer elements of the editor and user needs to execute the submit method manually.
+     *
+     * @default false
      */
     customizeSubmit?: boolean;
-    /** boolean: When true the Search box will be displayed */
+    /**
+     * boolean: When true the Search box will be displayed
+     *
+     * @default false
+     */
     enableSearch?: boolean;
-    /** When true the snapping options will be exposed */
+    /**
+     * When true the snapping options will be exposed
+     *
+     * @default false
+     */
     enableSnapping: boolean;
-    /** string: selected floor level */
+    /**
+     * string: selected floor level
+     *
+     * @default ""
+     */
     floorLevel: string;
     /** string: selected floor level */
     formElements: any;
-    /** boolean: When true the application will be in mobile mode, controls the mobile or desktop view */
+    /**
+     * boolean: When true the application will be in mobile mode, controls the mobile or desktop view
+     *
+     * @default false
+     */
     isMobile: boolean;
     /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /** ISearchConfiguration: Configuration details for the Search widget */
     searchConfiguration: ISearchConfiguration | undefined;
-    /** string: Layer id of the feature layer in which the new feature is to be created */
+    /**
+     * string: Layer id of the feature layer in which the new feature is to be created
+     *
+     * @default ""
+     */
     selectedLayerId: string;
-    /** boolean: When true the notice message with the current state should be shown */
+    /**
+     * boolean: When true the notice message with the current state should be shown
+     *
+     * @default true
+     */
     showGuidingMsg?: boolean;
-    /** string: Text to be displayed that will allow user to know they can submit new reports */
+    /**
+     * string: Text to be displayed that will allow user to know they can submit new reports
+     *
+     * @default ""
+     */
     submitNewReportsMessage: string;
     /**
      * Submit the created feature

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

@@ -8,7 +8,7 @@ import { LitElement as b, createEvent as l, noShadowRoot as L, safeClassMap as u
 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.20250501.2 */
+v1.0.0-next.20250506.1 */
 const E = V`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -37,26 +37,17 @@ class S extends b {
   static {
     this.shadowRootOptions = L;
   }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(e) {
     e.has("mapView") && this.mapViewWatchHandler(), e.has("isMobile") && this.isMobileHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /** Called each time the mapView prop is changed. */
   async mapViewWatchHandler() {
     this.mapView && await this.mapView.when(async () => {
       await this.init();
     });
   }
-  /** Called each time when isMobile prop is changed. */
   async isMobileHandler() {
     this.modeChanged.emit();
   }
-  /** When _editorLoading is true the container node will be hidden while starting the create workflow */
   async _editorLoadingWatchHandler(e) {
     if (e) {
       if (this._container?.classList.add("display-none"), this._selectedLayer?.isTable) {
@@ -72,75 +63,35 @@ class S extends b {
       this._container?.classList.remove("display-none"), this._editorLoading = !1;
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Submit the created feature
-   *
-   * @returns Promise that resolves when the operation is complete
-   */
   async submit() {
     this._editor?.viewModel?.featureFormViewModel && (this._isSubmitBtnClicked = !0, this._editor.viewModel.featureFormViewModel.submit());
   }
-  /**
-   * refresh the feature form
-   *
-   * @returns Promise that resolves when the operation is complete
-   */
   async refresh(e) {
     this._editor && this._setFloorLevel(e);
   }
-  /**
-   * Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
   async load() {
     await this.initModules();
   }
-  /** Called once just after the component is fully loaded and the first render() occurs. */
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
   async loaded() {
     await this.init();
   }
-  /**
-   * Called after each render
-   * Used to adjust the map top in case of mobile
-   */
   updated() {
     if (this.isMobile && this._calciteNotice.value && this._searchDiv.value && this._mapViewContainer.value) {
       const e = this._calciteNotice.value.offsetHeight + this._searchDiv.value.offsetHeight + 80;
       this._mapViewContainer.value.style.top = `${e}px`;
     }
   }
-  /** 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 && ((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 ${m(this._calciteNotice)}><div slot=message>${n}</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=${u(i)} ${m(this._mapViewContainer)}></div>`;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /** Init Editor widget and Search widget */
   async init() {
     this.mapView && this.selectedLayerId && (this._updatedMapView = this.mapView, await (this.isMobile ? this.createMobileMapView() : this._loadWidgets()));
   }
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async initModules() {
     const [e, t, s, i, a, n, o] = await g([
       "esri/widgets/Editor",
@@ -153,11 +104,6 @@ class S extends b {
     ]);
     this.Editor = e, this.reactiveUtils = t, this.Search = s, this.ExpressionInfo = i, this.FieldElement = a, this.FormTemplate = n, this.MapView = o;
   }
-  /**
-   * updates the map view (in case of mobile)
-   *
-   * @protected
-   */
   async createMobileMapView() {
     this._mapViewContainer.value && this.MapView && this.mapView && (this._mapViewContainer.value.classList.add("hide-map"), await new this.MapView({
       map: this.mapView.map,
@@ -169,19 +115,9 @@ class S extends b {
       console.log(e);
     }));
   }
-  /**
-   * Loads the Editor and Search widgets
-   *
-   * @protected
-   */
   async _loadWidgets() {
     await this.createEditorWidget(), this.enableSearch && await this.createSearchWidget();
   }
-  /**
-   * Display editor widget to create the new feature
-   *
-   * @protected
-   */
   async createEditorWidget() {
     this._editor && this._editor.destroy();
     const e = [];
@@ -231,11 +167,6 @@ class S extends b {
       o && this._editor.viewModel.addHandles(o);
     }
   }
-  /**
-   * Start creating the feature
-   *
-   * @protected
-   */
   async startCreate() {
     return await this.hideEditorsElements(), new Promise((e, t) => {
       if (this._editor?.viewModel.featureTemplatesViewModel.items?.length) {
@@ -254,11 +185,6 @@ class S extends b {
       }
     });
   }
-  /**
-   * Display search widget to search location
-   *
-   * @protected
-   */
   async createSearchWidget() {
     if (this._updatedMapView && this.Search) {
       let e = {
@@ -279,18 +205,11 @@ class S extends b {
       s && this._search.viewModel.addHandles(s);
     }
   }
-  /**
-   * Initialize the search widget based on user defined configuration
-   *
-   * @param searchConfiguration search configuration defined by the user
-   * @param view the current map view
-   * @protected
-   */
   _getSearchConfig(e, t) {
     const s = "includeDefaultSources", i = e.sources;
     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;
+        const o = a, r = o.layer?.id, h = r ? t.map?.findLayerById(r) : "", d = o?.layer?.url;
         h ? o.layer = h : d && this.FeatureLayer && (o.layer = new this.FeatureLayer(d));
       }
     }), i?.forEach((a) => {
@@ -307,12 +226,6 @@ class S extends b {
       includeDefaultSources: !0
     }, e;
   }
-  /**
-   * Add the floor level value to form
-   *
-   * @param level selected floor level
-   * @protected
-   */
   async _setFloorLevel(e) {
     if (!e)
       return;
@@ -353,23 +266,12 @@ class S extends b {
       }
     }
   }
-  /**
-   * Hides the elements of editor widget
-   *
-   * @protected
-   */
   async hideEditorsElements() {
     this.customizeSubmit && (await this.timeout(700), this.el.querySelector(".esri-editor")?.querySelectorAll("calcite-flow-item")?.forEach((e) => {
       const t = e.shadowRoot?.querySelector("calcite-panel")?.shadowRoot?.querySelector("article");
       t?.querySelector("header")?.setAttribute("style", "display: none"), t?.querySelector("footer")?.setAttribute("style", "display: none");
     }));
   }
-  /**
-   * On creation of feature emit the event that the feature is created
-   *
-   * @param _evt feature submit event
-   * @protected
-   */
   async submitted(e) {
     if (e.invalid.length) {
       this._isSubmitBtnClicked = !1;
@@ -389,12 +291,6 @@ class S extends b {
       this.success.emit();
     }
   }
-  /**
-   * call setTimeout in Promise wrapper
-   *
-   * @param delay The time, in milliseconds that the timer should wait before the promise is resolved
-   * @protected
-   */
   async timeout(e) {
     return new Promise((t) => setTimeout(t, e));
   }

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

@@ -7,15 +7,25 @@ export declare class CreateRelatedFeature extends LitElement {
     /**
      * boolean: Set this to true when have a custom submit button in the app.
      * This will hide the header and footer elements of the editor and user needs to execute the submit method manually.
+     *
+     * @default false
      */
     customizeSubmit?: boolean;
-    /** When true the snapping options will be exposed */
+    /**
+     * When true the snapping options will be exposed
+     *
+     * @default false
+     */
     enableSnapping: boolean;
     /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /** __esri.Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
     selectedFeature: __esri.Graphic | undefined;
-    /** boolean: When true the notice message should be shown */
+    /**
+     * boolean: When true the notice message should be shown
+     *
+     * @default true
+     */
     showGuidingMsg?: boolean;
     /** __esri.FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
     table: __esri.FeatureLayer | undefined;

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

@@ -6,7 +6,7 @@ import { LitElement as p, createEvent as d, noShadowRoot as f, safeClassMap as w
 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.20250501.2 */
+v1.0.0-next.20250506.1 */
 const b = y`@layer{/**
  * @license
  * Copyright 2025 Esri
@@ -36,52 +36,26 @@ class g extends p {
   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("mapView") && this.mapViewWatchHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /** Called each time the mapView prop is changed. */
   async mapViewWatchHandler() {
     await this.mapView?.when(async () => {
       await this.init();
     });
   }
-  /** When _editorLoading is true the container node will be hidden while starting the create workflow */
   async _editorLoadingWatchHandler(e) {
     e && (this._container?.classList.add("display-none"), await this.startCreate(), this._container?.classList.remove("display-none"), this._editorLoading = !1);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /** Submit the comment */
   async submit() {
     this._editor?.viewModel?.featureFormViewModel && (this._isSubmitBtnClicked = !0, this._editor.viewModel.featureFormViewModel.submit());
   }
-  /**
-   * Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
   async load() {
     await this.initModules();
   }
-  /** Init Editor widget and starts the create workflow */
   async init() {
     this.mapView && await this.createEditorWidget();
   }
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async initModules() {
     const [e, t] = await u(["esri/widgets/Editor", "esri/core/reactiveUtils"]);
     this.Editor = e, this.reactiveUtils = t;
@@ -90,19 +64,12 @@ class g extends p {
     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=${w(e)} label scale=s></calcite-loader>`;
   }
-  /** Called once just after the component is fully loaded and the first render() occurs. */
   loaded() {
     this.init();
   }
-  /** Called every time the component is disconnected from the DOM, */
   disconnectedCallback() {
     super.disconnectedCallback(), this._editor && this._editor.destroy();
   }
-  /**
-   * Display editor widget to create the new feature
-   *
-   * @protected
-   */
   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({
       view: this.mapView,
@@ -128,11 +95,6 @@ class g extends p {
       this._editor.viewModel.addHandles(a);
     }
   }
-  /**
-   * Start creating the feature feature form
-   *
-   * @protected
-   */
   async startCreate() {
     const e = this.selectedFeature?.layer, t = this.table;
     if (e?.relationships && t?.relationships && this._editor?.viewModel.featureFormViewModel && this.selectedFeature && t.templates) {
@@ -150,26 +112,12 @@ class g extends p {
       }
     }
   }
-  /**
-   * Hides the elements of editor widget
-   *
-   * @protected
-   */
   async hideEditorsElements() {
     this.customizeSubmit && (await this.timeout(700), this.el.querySelector(".esri-editor")?.querySelectorAll("calcite-flow-item")?.forEach((e) => {
       const t = e.shadowRoot?.querySelector("calcite-panel")?.shadowRoot?.querySelector("article");
       t?.querySelector("header")?.setAttribute("style", "display: none"), t?.querySelector("footer")?.setAttribute("style", "display: none");
     }));
   }
-  /**
-   * Makes attributes for related feature
-   *
-   * @param parentFeature Parent feature
-   * @param parentRelationship Parent relationship
-   * @param childRelationship Child relationship
-   * @returns Attributes for related feature
-   * @protected
-   */
   makeAttributesForRelatedFeature(e, t, a) {
     const i = t.keyField;
     let s;
@@ -181,12 +129,6 @@ class g extends p {
         [o]: s
       };
   }
-  /**
-   * On creation of feature emit the event that the feature is created
-   *
-   * @param _evt feature submit event
-   * @protected
-   */
   async submitted(e) {
     if (e.invalid.length) {
       this._isSubmitBtnClicked = !1;
@@ -206,12 +148,6 @@ class g extends p {
       this.success.emit();
     }
   }
-  /**
-   * call setTimeout in Promise wrapper
-   *
-   * @param delay The time, in milliseconds that the timer should wait before the promise is resolved
-   * @protected
-   */
   async timeout(e) {
     return new Promise((t) => setTimeout(t, e));
   }