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

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

@@ -17,9 +17,9 @@ export declare class CreateRelatedFeature extends LitElement {
      * @default false
      */
     enableSnapping: boolean;
-    /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/MapView: https://next.gha.afd.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 */
+    /** __esri.Graphic: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
     selectedFeature: __esri.Graphic | undefined;
     /**
      * boolean: When true the notice message should be shown
@@ -27,7 +27,7 @@ export declare class CreateRelatedFeature extends LitElement {
      * @default true
      */
     showGuidingMsg?: boolean;
-    /** __esri.FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
+    /** __esri.FeatureLayer: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
     table: __esri.FeatureLayer | undefined;
     /** Submit the comment */
     submit(): Promise<void>;

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

@@ -1,13 +1,14 @@
-import { c as u } from "../../chunks/runtime.js";
-import { u as m } from "../../chunks/useT9n.js";
-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.95 */
-const g = p`@layer{/**
+v1.2.0-next.96 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html } from "lit";
+import { LitElement, createEvent, noShadowRoot, safeClassMap } from "@arcgis/lumina";
+import Editor from "@arcgis/core/widgets/Editor";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
+const styles = css`@layer{
+/**
  * @license
  * Copyright 2025 Esri
  *
@@ -22,129 +23,234 @@ const g = p`@layer{/**
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */:host{display:block}.hide-editor-toolbar .esri-editor__panel-toolbar,.display-none{display:none!important}.esri-editor__panel-content{padding-block:10px!important}.notice-msg{padding:10px;width:calc(100% - 20px)}}`;
-class _ extends f {
+ */
+
+:host {
+  display: block;
+}
+
+/* Override to hide Editor settings panel collapsible */
+.hide-editor-toolbar .esri-editor__panel-toolbar {
+  display: none !important;
+}
+
+.display-none {
+  display: none !important;
+}
+
+/* override the padding of the feature form */
+.esri-editor__panel-content {
+  padding-block: 10px !important;
+}
+
+.notice-msg {
+  padding: 10px;
+  width: calc(100% - 20px);
+}
+}`;
+class CreateRelatedFeature extends LitElement {
   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();
+    super(...arguments);
+    this.customizeSubmit = false;
+    this.enableSnapping = false;
+    this.showGuidingMsg = true;
+    this._editorLoading = false;
+    this._translations = useT9n({ name: "create-related-feature", blocking: true });
+    this._addingAttachment = false;
+    this._isSubmitBtnClicked = false;
+    this.success = createEvent();
+    this.fail = createEvent();
+    this.isActionPending = createEvent();
+    this.formReady = createEvent();
   }
   static {
-    this.properties = { customizeSubmit: 5, enableSnapping: 5, mapView: 0, selectedFeature: 0, showGuidingMsg: 5, table: 0, _editorLoading: 16, _translations: 16 };
+    this.properties = { customizeSubmit: [5, {}, { type: Boolean }], enableSnapping: [5, {}, { type: Boolean }], mapView: [0, {}, { attribute: false }], selectedFeature: [0, {}, { attribute: false }], showGuidingMsg: [5, {}, { type: Boolean }], table: [0, {}, { attribute: false }], _editorLoading: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = g;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
+  willUpdate(changes) {
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
+    if (changes.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== false)) {
+      void this._editorLoadingWatchHandler(this._editorLoading);
+    }
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(async () => {
       await this.init();
     });
   }
-  async _editorLoadingWatchHandler(e) {
-    e && (this._container?.classList.add("display-none"), await this.startCreate(), this._container?.classList.remove("display-none"), this._editorLoading = !1);
+  async _editorLoadingWatchHandler(v) {
+    if (v) {
+      this._container?.classList.add("display-none");
+      await this.startCreate();
+      this._container?.classList.remove("display-none");
+      this._editorLoading = false;
+    }
   }
   async submit() {
-    this._editor?.viewModel?.featureFormViewModel && (this._isSubmitBtnClicked = !0, this._editor.viewModel.featureFormViewModel.submit());
+    if (this._editor?.viewModel?.featureFormViewModel) {
+      this._isSubmitBtnClicked = true;
+      this._editor.viewModel.featureFormViewModel.submit();
+    }
   }
   async init() {
-    this.mapView && await this.createEditorWidget();
+    if (this.mapView) {
+      await this.createEditorWidget();
+    }
   }
   render() {
-    const e = this._editorLoading ? "" : "display-none";
-    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>`;
+    const loaderClass = this._editorLoading ? "" : "display-none";
+    return html`${this.showGuidingMsg && html`<calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.provideDetailsMsg}</div></calcite-notice>` || ""}<calcite-loader class=${safeClassMap(loaderClass)} label scale=s></calcite-loader>`;
   }
   loaded() {
-    this.init();
+    void this.init();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._editor && this._editor.destroy();
+    super.disconnectedCallback();
+    if (this._editor) {
+      this._editor.destroy();
+    }
   }
   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 y({
+    if (this._editor) {
+      this._editor.destroy();
+    }
+    this._container = document.createElement("div");
+    this._container?.classList.add("display-none");
+    if (!this.enableSnapping) {
+      this._container.classList.add("hide-editor-toolbar");
+    }
+    this._editor = new Editor({
       view: this.mapView,
       visibleElements: {
-        flow: !0,
+        flow: true,
         settingsMenu: this.enableSnapping,
-        sketch: !1,
+        sketch: false,
         snappingControls: this.enableSnapping
       },
       container: this._container
-    }), 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.el.appendChild(this._container);
+    const handle = reactiveUtils.watch(() => this._editor?.viewModel.featureTemplatesViewModel.state, (state) => {
+      if (state === "ready") {
+        this._editorLoading = true;
+      }
+    });
+    this._editor?.viewModel.addHandles(handle);
+    const attachmentHandle = reactiveUtils.watch(() => this._editor?.viewModel.state, (state) => {
+      if (state === "adding-attachment" || state === "editing-attachment") {
+        this._addingAttachment = true;
+        this.isActionPending.emit(true);
+      } else {
+        if (this._addingAttachment) {
+          this.isActionPending.emit(false);
+          this._addingAttachment = false;
+        }
+      }
     });
-    this._editor?.viewModel.addHandles(t);
-    const a = l.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (i) => {
-      i === "ready" && this.formReady.emit();
+    this._editor?.viewModel.addHandles(attachmentHandle);
+    const formHandle = reactiveUtils.watch(() => this._editor?.viewModel.featureFormViewModel?.state, (state) => {
+      if (state === "ready") {
+        this.formReady.emit();
+      }
     });
-    this._editor?.viewModel.addHandles(a);
+    this._editor?.viewModel.addHandles(formHandle);
   }
   async startCreate() {
-    const e = this.selectedFeature?.layer, t = this.table;
-    if (e?.relationships && t?.relationships && this.selectedFeature && t.templates) {
-      const a = e.relationships[0], i = t.relationships.find((o) => e.layerId === o.relatedTableId), s = Number(this.selectedFeature.getObjectId());
-      if (!Number.isNaN(s) && i) {
-        const r = (await e.queryFeatures({
-          objectIds: [s],
-          outFields: [e.objectIdField, a.keyField]
-        })).features[0], n = t.templates[0], h = {
-          attributeOverrides: this.makeAttributesForRelatedFeature(r, a, i),
-          layer: t,
-          template: n
+    const parentLayer = this.selectedFeature?.layer;
+    const childTable = this.table;
+    if (parentLayer?.relationships && childTable?.relationships && this.selectedFeature && childTable.templates) {
+      const parentRelationship = parentLayer.relationships[0];
+      const childRelationship = childTable.relationships.find((rel) => parentLayer.layerId === rel.relatedTableId);
+      const oid = Number(this.selectedFeature.getObjectId());
+      if (!Number.isNaN(oid) && childRelationship) {
+        const queryResult = await parentLayer.queryFeatures({
+          objectIds: [oid],
+          outFields: [parentLayer.objectIdField, parentRelationship.keyField]
+        });
+        const parentFeature = queryResult.features[0];
+        const template = childTable.templates[0];
+        const attributeOverrides = this.makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship);
+        const creationInfo = {
+          attributeOverrides,
+          layer: childTable,
+          template
         };
-        await this._editor?.startCreateFeaturesWorkflowAtFeatureCreation(h), await this.hideEditorsElements(), this._editor?.viewModel?.featureFormViewModel?.addHandles(this._editor.viewModel.featureFormViewModel.on("submit", this.submitted.bind(this)));
+        await this._editor?.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
+        await this.hideEditorsElements();
+        this._editor?.viewModel?.featureFormViewModel?.addHandles(this._editor.viewModel.featureFormViewModel.on("submit", this.submitted.bind(this)));
       }
     }
   }
   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");
-    }));
-  }
-  makeAttributesForRelatedFeature(e, t, a) {
-    const i = t.keyField;
-    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());
-    if (r)
-      return o = r.name, {
-        [o]: s
+    if (!this.customizeSubmit) {
+      return;
+    }
+    await this.timeout(700);
+    this.el.querySelector(".esri-editor")?.querySelectorAll("calcite-flow-item")?.forEach((flowItem) => {
+      const article = flowItem.shadowRoot?.querySelector("calcite-panel")?.shadowRoot?.querySelector("article");
+      article?.querySelector("header")?.setAttribute("style", "display: none");
+      article?.querySelector("footer")?.setAttribute("style", "display: none");
+    });
+  }
+  makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
+    const parentKeyField = parentRelationship.keyField;
+    let parentKeyValue;
+    if (parentFeature.attributes.hasOwnProperty(parentKeyField)) {
+      parentKeyValue = parentFeature.getAttribute(parentKeyField);
+    } else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toLowerCase())) {
+      parentKeyValue = parentFeature.getAttribute(parentKeyField.toLowerCase());
+    } else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toUpperCase())) {
+      parentKeyValue = parentFeature.getAttribute(parentKeyField.toUpperCase());
+    }
+    let childKeyField = childRelationship.keyField;
+    const field = this.table?.fields.find((field2) => field2.name.toLocaleLowerCase() === childKeyField.toLocaleLowerCase());
+    if (field) {
+      childKeyField = field.name;
+      const childAttributes = {
+        [childKeyField]: parentKeyValue
       };
+      return childAttributes;
+    } else {
+      return void 0;
+    }
   }
-  async submitted(e) {
-    if (e.invalid.length) {
-      this._isSubmitBtnClicked = !1;
+  async submitted(_evt) {
+    if (_evt.invalid.length) {
+      this._isSubmitBtnClicked = false;
       return;
     }
-    if (e.valid.length && this._isSubmitBtnClicked) {
-      this._isSubmitBtnClicked = !1;
+    if (_evt.valid.length && this._isSubmitBtnClicked) {
+      this._isSubmitBtnClicked = false;
       try {
-        this._editor?.activeWorkflow && (await this._editor.activeWorkflow.commit(), this._editor.viewModel.failures?.length && this._editor.viewModel.failures.some((t) => {
-          if (t.error)
-            throw t.error;
-        }));
-      } catch (t) {
-        this.fail.emit(t);
+        if (this._editor?.activeWorkflow) {
+          await this._editor.activeWorkflow.commit();
+          if (this._editor.viewModel.failures?.length) {
+            this._editor.viewModel.failures.some((failure) => {
+              if (failure.error) {
+                throw failure.error;
+              }
+            });
+          }
+        }
+      } catch (e) {
+        this.fail.emit(e);
         return;
       }
       this.success.emit();
     }
   }
-  async timeout(e) {
-    return new Promise((t) => setTimeout(t, e));
+  async timeout(delay) {
+    return new Promise((resolve) => setTimeout(resolve, delay));
   }
 }
-u("create-related-feature", _);
+customElement("create-related-feature", CreateRelatedFeature);
 export {
-  _ as CreateRelatedFeature
+  CreateRelatedFeature
 };

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-import { AppLayout, IBasemapConfig, IMapInfo, ISearchConfiguration, theme, ELayoutMode } from '../../utils/interfaces';
+import { AppLayout, IBasemapConfig, IMapInfo, ISearchConfiguration, theme, VisibilityIconType, ELayoutMode } from '../../utils/interfaces';
 import { LayerExpression } from '@arcgis/instant-apps-components';
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
@@ -133,6 +133,18 @@ export declare class CrowdsourceManager extends LitElement {
      * @default true
      */
     enableLegend: boolean;
+    /**
+     * boolean: when true the layer list widget will be available
+     *
+     * @default true
+     */
+    enableLayerList: boolean;
+    /**
+     * VisibilityIconType: visibility icon for the layer list widget
+     *
+     * @default 'eyeball'
+     */
+    visibilityIcon: VisibilityIconType;
     /**
      * boolean: when true the search widget will be available
      *
@@ -162,7 +174,7 @@ export declare class CrowdsourceManager extends LitElement {
     /**
      * boolean: When true only editable layers that support the update capability will be available
      *
-     * @default true
+     * @default false
      */
     onlyShowUpdatableLayers: boolean;
     /**