@esri/solutions-components 1.0.0-next.20250513.1 → 1.0.0-next.20250521

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

@@ -4,7 +4,7 @@ import { ISearchConfiguration } from '../../utils/interfaces';
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 
-type ICurrentPage = 'drawing' | 'featureForm' | 'templatePicker';
+type ICurrentPage = 'drawing' | 'editing' | 'featureForm' | 'templatePicker';
 export declare class CreateFeature extends LitElement {
     /**
      * boolean: Set this to true when have a custom submit button in the app.
@@ -28,7 +28,7 @@ export declare class CreateFeature extends LitElement {
     /**
      * string: selected floor level
      *
-     * @default ""
+     * @default ''
      */
     floorLevel: string;
     /** string: selected floor level */
@@ -46,7 +46,7 @@ export declare class CreateFeature extends LitElement {
     /**
      * string: Layer id of the feature layer in which the new feature is to be created
      *
-     * @default ""
+     * @default ''
      */
     selectedLayerId: string;
     /**
@@ -58,9 +58,33 @@ export declare class CreateFeature extends LitElement {
     /**
      * string: Text to be displayed that will allow user to know they can submit new reports
      *
-     * @default ""
+     * @default ''
      */
     submitNewReportsMessage: string;
+    /**
+     * boolean: When true the map should shown in the editor component in mobile mode (while drawing graphic)
+     *
+     * @default false
+     */
+    updateMapPosition: boolean;
+    /**
+     * string: polygon layer for the reporting feature
+     *
+     * @default ''
+     */
+    reportingAreaLayer?: string | undefined;
+    /**
+     * string: User configurable message if feature is drawn outside polygon boundary
+     *
+     * @default ''
+     */
+    reportOutsideAreaMessage: string;
+    /**
+     * boolean: When true Editor's sketch widgets will be displayed
+     *
+     * @default false
+     */
+    showSketchWidgets: boolean;
     /**
      * Submit the created feature
      *
@@ -73,12 +97,16 @@ export declare class CreateFeature extends LitElement {
      * @returns Promise that resolves when the operation is complete
      */
     refresh(floorLevel: string): Promise<void>;
+    /** Shows feature form */
+    showForm(): Promise<void>;
     /** Emitted on demand when the feature is created successfully */
     readonly success: TargetedEvent<this, void>;
     /** Emitted on demand when the feature creation is failed */
     readonly fail: TargetedEvent<this, Error>;
     /** Emitted on demand when drawing is completed */
-    readonly drawComplete: TargetedEvent<this, void>;
+    readonly drawComplete: TargetedEvent<this, boolean>;
+    /** Emitted on demand when in editing mode */
+    readonly editingLocation: TargetedEvent<this, void>;
     /** Emitted on demand when editing attachments */
     readonly editingAttachment: TargetedEvent<this, boolean>;
     /** Emitted on demand when editor panel changes */

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

@@ -1,15 +1,15 @@
-import { c as _ } from "../../chunks/runtime.js";
-import { l as g } from "../../chunks/loadModules.js";
-import { j as y, d as M } from "../../chunks/mapViewUtils.js";
+import { c as g } from "../../chunks/runtime.js";
+import { l as y } from "../../chunks/loadModules.js";
+import { j as M, d as f } from "../../chunks/mapViewUtils.js";
 import { u as v } from "../../chunks/useT9n.js";
 import { html as c } from "lit";
 import { createRef as p, ref as m } from "lit-html/directives/ref.js";
-import { LitElement as b, createEvent as l, noShadowRoot as L, safeClassMap as u } from "@arcgis/lumina";
+import { LitElement as L, createEvent as h, noShadowRoot as b, 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.20250513.1 */
-const E = V`@layer{/** @license
+v1.0.0-next.20250521 */
+const S = V`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,22 +23,22 @@ const E = V`@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}.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 S extends b {
+ */: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 E 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._currentPage = "templatePicker", this._editorLoading = !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.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.selectedLayerId = "", this.showGuidingMsg = !0, this.submitNewReportsMessage = "", this.updateMapPosition = !1, this.reportingAreaLayer = "", this.reportOutsideAreaMessage = "", this.showSketchWidgets = !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.success = h(), this.fail = h(), this.drawComplete = h(), this.editingLocation = h(), this.editingAttachment = h(), this.progressStatus = h(), this.modeChanged = h();
   }
   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, _currentPage: 16, _editorLoading: 16, _translations: 16 };
+    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, reportingAreaLayer: 1, reportOutsideAreaMessage: 1, showSketchWidgets: 5, _currentPage: 16, _editorLoading: 16, _inValidGeomtryDrawn: 16, _translations: 16 };
   }
   static {
-    this.styles = E;
+    this.styles = S;
   }
   static {
-    this.shadowRootOptions = L;
+    this.shadowRootOptions = b;
   }
   willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler(), e.has("isMobile") && this.isMobileHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
+    e.has("mapView") && this.hasUpdated && this.mapViewWatchHandler(), e.has("isMobile") && this.hasUpdated && this.isMobileHandler(), e.has("_editorLoading") && (this.hasUpdated || this._editorLoading !== !1) && this._editorLoadingWatchHandler(this._editorLoading);
   }
   async mapViewWatchHandler() {
     this.mapView && await this.mapView.when(async () => {
@@ -69,48 +69,59 @@ class S extends b {
   async refresh(e) {
     this._editor && this._setFloorLevel(e);
   }
+  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();
   }
-  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`;
+  async updated() {
+    if (this.isMobile && this.updateMapPosition) {
+      const e = this._currentPage === "drawing" ? 80 : 30, t = this.enableSearch ? this._searchDiv.value?.offsetHeight : 0;
+      await this._calciteNotice.value?.componentOnReady();
+      const i = (this._calciteNotice.value?.offsetHeight || 0) + t + e;
+      this._mapViewContainer.value && (this._mapViewContainer.value.style.top = `${i}px`);
     }
   }
   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));
   }
   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";
+    const e = this._currentPage === "drawing" || this._currentPage === "editing" ? "" : "display-none", t = this._editorLoading ? "" : "display-none", s = this._editorLoading ? "display-none" : "", i = this.isMobile && this.updateMapPosition ? "show-map" : "display-none", a = this._inValidGeomtryDrawn ? "danger" : "success", d = this._inValidGeomtryDrawn ? "exclamation-mark-triangle" : "lightbulb", o = 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>`;
+    return this._inValidGeomtryDrawn ? n = this.reportOutsideAreaMessage || this._translations.reportOutsideAreaMessage : this._currentPage === "drawing" || this._currentPage === "editing" ? n = this._translations.provideLocationMsg : this._currentPage === "featureForm" && (n = this._translations.provideDetailsMsg), c`${o && c`<calcite-notice class="notice-msg" .icon=${d} .kind=${a} open ${m(this._calciteNotice)}><div slot=message>${n}</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(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>`;
   }
   async init() {
-    this.mapView && this.selectedLayerId && (this._updatedMapView = this.mapView, await (this.isMobile ? this.createMobileMapView() : this._loadWidgets()));
+    this.mapView && this.selectedLayerId && (this._updatedMapView = this.mapView, await (this.isMobile && this.updateMapPosition ? this.createMobileMapView() : this._loadWidgets()));
   }
   async initModules() {
-    const [e, t, s, i, a, n, o] = await g([
+    const [e, t, s, i, a, d, o, 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/views/MapView",
+      "esri/widgets/Home"
     ]);
-    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 = d, this.MapView = o, this.Home = n;
   }
   async createMobileMapView() {
     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
+      zoom: this.mapView.zoom,
+      center: this.mapView.center
     }).when((e) => {
-      this._updatedMapView = e, this._loadWidgets();
+      this._updatedMapView = e;
+      const t = this.Home && new this.Home({
+        view: this._updatedMapView
+      });
+      t && this._updatedMapView.ui.add(t, "top-left"), this._loadWidgets();
     }, (e) => {
       console.log(e);
     }));
@@ -122,7 +133,7 @@ class S 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 = this._updatedMapView && await y(this._updatedMapView), s = this.mapView && await M(this.mapView, this.selectedLayerId);
+    const t = this._updatedMapView && await M(this._updatedMapView), s = this.mapView && await f(this.mapView, this.selectedLayerId);
     if (s && (this._selectedLayer = s, !this._selectedLayer?.isTable && t && t.forEach((i) => {
       e.push({
         layer: i,
@@ -143,10 +154,10 @@ class S extends b {
         createFeaturesSection: !0,
         editFeaturesSection: !1,
         flow: !0,
-        sketch: !1
+        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._editor) {
+    }), 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) => {
         r === "adding-attachment" || r === "editing-attachment" ? (this._addingAttachment = !0, this.editingAttachment.emit(!0)) : this._addingAttachment && (this.editingAttachment.emit(!1), this._addingAttachment = !1);
       });
@@ -155,18 +166,44 @@ class S extends b {
         r === "ready" && this._editor?.viewModel?.activeWorkflow?.type !== "create-features" && (this.progressStatus.emit(50), this._editorLoading = !0);
       });
       a && 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(() => {
+      const d = this.reactiveUtils?.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._currentPage = "featureForm", this.progressStatus.emit(100), this.drawComplete.emit());
+        }, 50), this._currentPage = "featureForm", this.progressStatus.emit(100), this.drawComplete.emit(!1));
       });
-      n && this._editor.viewModel.addHandles(n);
+      d && this._editor.viewModel.addHandles(d);
       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);
+      o && this._editor.viewModel.addHandles(o), this._editor.on("sketch-create", async (r) => {
+        if (r.detail.state === "complete" && this.reportingAreaLayer) {
+          const l = r.detail.graphic.geometry;
+          await this.queryIntersectingFeatures(l);
+        }
+      });
+      let n;
+      this._editor.on("sketch-update", (r) => {
+        clearTimeout(n), n = window.setTimeout(async () => {
+          if (this.reportingAreaLayer) {
+            const l = r.detail.graphics[0].geometry;
+            await this.queryIntersectingFeatures(l);
+          }
+        }, 50);
+      });
+    }
+  }
+  async queryIntersectingFeatures(e) {
+    const t = this.mapView && await f(this.mapView, this.reportingAreaLayer);
+    if (t) {
+      const s = t.createQuery();
+      s.geometry = e, s.spatialRelationship = "intersects";
+      const a = await t.queryFeatureCount(s) === 0;
+      this._inValidGeomtryDrawn = a, this.drawComplete.emit(this._inValidGeomtryDrawn);
     }
   }
+  editLocation() {
+    this.progressStatus.emit(75), this.editingLocation.emit(), this._container?.classList.add("display-none"), this._mapViewContainer.value?.classList.replace("hide-map", "show-map"), this._currentPage = "editing";
+  }
   async startCreate() {
     return await this.hideEditorsElements(), new Promise((e, t) => {
       if (this._editor?.viewModel.featureTemplatesViewModel.items?.length) {
@@ -199,7 +236,12 @@ class S extends b {
       }));
       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());
+          if (this._editor?.viewModel.sketchViewModel?.createGraphic && t)
+            this._editor.viewModel.sketchViewModel.createGraphic.set("geometry", t), this._editor.viewModel.sketchViewModel.complete(), this.hideEditorsElements();
+          else if (this._editor?.viewModel.sketchViewModel && this._editor.viewModel.sketchViewModel.updateGraphics.length > 0 && t) {
+            const a = this._editor?.viewModel.sketchViewModel?.updateGraphics.getItemAt(0);
+            a && (a.set("geometry", t), this._editor?.viewModel.sketchViewModel?.update(a), this.hideEditorsElements());
+          }
         }, 100);
       });
       s && this._search.viewModel.addHandles(s);
@@ -209,15 +251,15 @@ class S extends b {
     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;
-        h ? o.layer = h : d && this.FeatureLayer && (o.layer = new this.FeatureLayer(d));
+        const o = a, n = o.layer?.id, r = n ? t.map?.findLayerById(n) : "", l = o?.layer?.url;
+        r ? o.layer = r : l && this.FeatureLayer && (o.layer = new this.FeatureLayer(l));
       }
     }), i?.forEach((a) => {
       if (a.hasOwnProperty("locator")) {
         const o = a;
         if (o?.name === "ArcGIS World Geocoding Service") {
-          const r = o.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
-          o.outFields = r, o.singleLineFieldName = "SingleLine";
+          const n = o.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+          o.outFields = n, o.singleLineFieldName = "SingleLine";
         }
         o.url = o.url, delete o.url;
       }
@@ -236,11 +278,11 @@ class S extends b {
         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}"`,
+          expression: `'${e}'`,
           name: "floor-info-test",
           title: "Floor Info",
           returnType: "string"
-        }), n = new this.FieldElement({
+        }), d = new this.FieldElement({
           label: s,
           editableExpression: "false",
           fieldName: s,
@@ -252,15 +294,15 @@ class S extends b {
           valueExpression: a.name
         });
         this._updatedMapView?.map.editableLayers.forEach((o) => {
-          const r = this.formElements.orgElements, h = this.formElements.orgExpressionInfos, d = [...r];
-          if (d.push(n), 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)
+          const n = this.formElements.orgElements, r = this.formElements.orgExpressionInfos, l = [...n];
+          if (l.push(d), o.type === "feature" && this.FormTemplate) {
+            const w = o, _ = new this.FormTemplate({
+              title: w?.formTemplate?.title,
+              description: w?.formTemplate?.description,
+              elements: l,
+              expressionInfos: [a].concat(r)
             });
-            o.formTemplate = w;
+            o.formTemplate = _;
           }
         });
       }
@@ -295,7 +337,7 @@ class S extends b {
     return new Promise((t) => setTimeout(t, e));
   }
 }
-_("create-feature", S);
+g("create-feature", E);
 export {
-  S as CreateFeature
+  E as CreateFeature
 };

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

@@ -1,3 +1,4 @@
 import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-loader";
+import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

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

@@ -1,3 +1,4 @@
 import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-loader";
+import "@esri/calcite-components/components/calcite-button";
 export * from "./customElement.js";

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.20250513.1 */
+v1.0.0-next.20250521 */
 const b = y`@layer{/**
  * @license
  * Copyright 2025 Esri

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

@@ -234,7 +234,7 @@ export declare class CrowdsourceManager extends LitElement {
     /**
      * string: selection mode for the feature selection
      *
-     * @default "multiple"
+     * @default 'multiple'
      */
     featureSelectionMode: string;
     /** Emitted on demand when a info button is clicked */

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

@@ -4,12 +4,12 @@ import { d as v } from "../../chunks/mapViewUtils.js";
 import { defineCustomElements as $ } from "@arcgis/instant-apps-components/loader";
 import { u as C } from "../../chunks/useT9n.js";
 import { html as l, nothing as L } from "lit";
-import { createRef as c, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as x, createEvent as f, noShadowRoot as I, safeStyleMap as T, safeClassMap as b } from "@arcgis/lumina";
+import { createRef as p, ref as u } from "lit-html/directives/ref.js";
+import { LitElement as x, createEvent as b, noShadowRoot as I, safeStyleMap as T, safeClassMap as m } from "@arcgis/lumina";
 import { css as S } 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.20250513.1 */
+v1.0.0-next.20250521 */
 const M = S`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -27,10 +27,10 @@ const M = S`@layer{/** @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}.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-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;right:0;margin:100px 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 F extends x {
   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._isPortraitMobile = !1, this._translations = C({ name: "crowdsource-manager", blocking: !0 }), this._layoutMode = s.GRID, this._panelOpen = !0, this._numSelected = 0, this._filterOpen = !1, this._showInformationHeader = !0, this._layerIds = [], this._isLoading = !0, this._mapExtentFilterChecked = !1, this._defaultAppLayoutHonored = !1, this._defaultCenterHonored = !1, this._defaultLevelHonored = !1, this._deleteIds = [], this._layerTable = c(), this._shouldSetMapView = !1, this._layerExpressions = [], this._filterList = c(), this._mapCard = c(), this._isMapViewOnLoad = !1, this.showIntroductionWindow = f(), this.showCoverPage = f(), 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, "idsFound", this.idsFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled), $(window);
+    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 = C({ name: "crowdsource-manager", blocking: !0 }), this._layoutMode = s.GRID, this._panelOpen = !0, this._numSelected = 0, this._filterOpen = !1, this._showInformationHeader = !0, this._layerIds = [], this._isLoading = !0, this._mapExtentFilterChecked = !1, this._deleteIds = [], this._defaultAppLayoutHonored = !1, this._defaultCenterHonored = !1, this._defaultLevelHonored = !1, this._layerTable = p(), this._shouldSetMapView = !1, this._layerExpressions = [], this._filterList = p(), this._mapCard = p(), this._isMapViewOnLoad = !1, this.showIntroductionWindow = b(), this.showCoverPage = b(), 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, "idsFound", this.idsFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled), $(window);
   }
   static {
-    this.properties = { appLayout: 1, appProxies: 1, basemapConfig: 0, coverPageEnabled: 5, customInfoText: 1, defaultAppLayout: 1, defaultCenter: 1, defaultGlobalId: 1, defaultLayer: 1, defaultLevel: 1, defaultOid: 1, defaultWebmap: 1, honorMapFieldSettings: 5, introductionWindowEnabled: 5, enableAutoRefresh: 5, enableBasemap: 5, enableColumnReorder: 5, enableCSV: 5, enableFloorFilter: 5, enableFullscreen: 5, enableHome: 5, enableLegend: 5, enableSearch: 5, enableShare: 5, enableSnapping: 5, enableZoom: 5, mapInfos: 0, onlyShowUpdatableLayers: 5, popupHeaderColor: 1, popupHeaderHoverColor: 1, popupHeaderHoverTextColor: 1, popupHeaderTextColor: 1, searchConfiguration: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, theme: 1, zoomAndScrollToSelected: 5, zoomToScale: 9, enableSelectionTool: 5, featureSelectionMode: 1, _deleteDialogOpen: 16, _enableCreateFeatures: 16, _hideFooter: 16, _hideTable: 16, _isMobile: 16, _isPortraitMobile: 16, _translations: 16, _layer: 16, _layoutMode: 16, _mapInfo: 16, _mapView: 16, _panelOpen: 16, _numSelected: 16, _filterOpen: 16, _showInformationHeader: 16, _layerIds: 16, _isLoading: 16, _mapExtentFilterChecked: 16 };
+    this.properties = { appLayout: 1, appProxies: 1, basemapConfig: 0, coverPageEnabled: 5, customInfoText: 1, defaultAppLayout: 1, defaultCenter: 1, defaultGlobalId: 1, defaultLayer: 1, defaultLevel: 1, defaultOid: 1, defaultWebmap: 1, honorMapFieldSettings: 5, introductionWindowEnabled: 5, enableAutoRefresh: 5, enableBasemap: 5, enableColumnReorder: 5, enableCSV: 5, enableFloorFilter: 5, enableFullscreen: 5, enableHome: 5, enableLegend: 5, enableSearch: 5, enableShare: 5, enableSnapping: 5, enableZoom: 5, mapInfos: 0, onlyShowUpdatableLayers: 5, popupHeaderColor: 1, popupHeaderHoverColor: 1, popupHeaderHoverTextColor: 1, popupHeaderTextColor: 1, searchConfiguration: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, theme: 1, zoomAndScrollToSelected: 5, zoomToScale: 9, enableSelectionTool: 5, featureSelectionMode: 1, _deleteDialogOpen: 16, _enableCreateFeatures: 16, _hideFooter: 16, _hideTable: 16, _isMobile: 16, _translations: 16, _layer: 16, _layoutMode: 16, _mapInfo: 16, _mapView: 16, _panelOpen: 16, _numSelected: 16, _filterOpen: 16, _showInformationHeader: 16, _layerIds: 16, _isLoading: 16, _mapExtentFilterChecked: 16, _deleteIds: 16 };
   }
   static {
     this.styles = M;
@@ -51,20 +51,20 @@ class F extends x {
     this._numSelected = e.detail?.length;
   }
   async popupClosed() {
-    this._isPortraitMobile && this.showHideMapPopupAndTable(!1);
+    this._isMobile && this.showHideMapPopupAndTable(!1);
   }
   async layoutChanged(e) {
     this._layoutMode = e.detail;
   }
   async mapChanged(e) {
-    this._mapChange = e.detail, await this._mapChange?.mapView.when(async () => {
+    this._mapChange = e.detail, this.showHideMapPopupAndTable(!1), await this._mapChange?.mapView.when(async () => {
       await this._setMapView();
     });
   }
   async layerSelectionChange(e) {
     const t = e.detail[0], i = this._mapView && await v(this._mapView, t);
     i && await i.when(() => {
-      i.isTable && (this.appLayout = "tableView"), this._layer = i, this._initLayerExpressions(), this._handleFilterListReset(), this._isLoading = !1;
+      i.isTable && !this._isMobile && (this.appLayout = "tableView"), this._layer = i, this._initLayerExpressions(), this._handleFilterListReset(), this._isLoading = !1;
     });
   }
   async showDelete(e) {
@@ -85,7 +85,7 @@ class F extends x {
   }
   render() {
     const e = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-    return l`<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._deleteModal()}`;
+    return l`<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() || ""}`;
   }
   async updated() {
     this._shouldSetMapView && (this._shouldSetMapView = !1, this._mapChange && await this._setMapView());
@@ -94,8 +94,11 @@ class F extends x {
     this._resizeObserver?.observe(this.el), !this._defaultAppLayoutHonored && this.defaultAppLayout ? (this._defaultAppLayoutHonored = !0, this.appLayout = this.defaultAppLayout) : this.appLayout || (this.appLayout = "splitView"), this._isMapViewOnLoad = this.appLayout === "mapView", this._setActiveLayout(this.appLayout);
   }
   _getFooter() {
-    const e = this._numSelected > 0, t = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._layerTable.value.selectedRelatedIds : this._layerTable.value?.selectedIds, i = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._relatedTableLayer : this._layer, a = this._layer?.editingEnabled && this._layer.capabilities?.operations.supportsDelete;
-    return this._isPortraitMobile && e && !this._hideFooter ? l`<div class=${"width-100"} slot=footer><div class="display-flex padding-1-2"><calcite-button appearance=solid id=solutions-show @click=${() => this.showHideMapPopupAndTable(!0)} width=full>${this._translations.view.replace("{{n}}", this._numSelected.toString())}</calcite-button>${a ? l`<delete-button class="padding-inline-start-1 width-full" id=solutions-delete .ids=${t} .layer=${i}></delete-button>` : void 0}</div></div>` : void 0;
+    const e = this._numSelected > 0, t = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._relatedTableLayer : this._layer, i = this._layer?.editingEnabled && this._layer.capabilities?.operations.supportsDelete;
+    return this._isMobile && e && !this._hideFooter ? l`<div class=${"width-100"} slot=footer><div class="display-flex padding-1-2"><calcite-button appearance=solid id=solutions-show @click=${() => this.showHideMapPopupAndTable(!0)} width=full>${this._translations.view.replace("{{n}}", this._numSelected.toString())}</calcite-button>${i ? l`<delete-button class="padding-inline-start-1 width-full" id=solutions-delete .ids=${this.updateIdsToBeDeleted()} @deleteClicked=${this.updateIdsToBeDeleted} .layer=${t}></delete-button>` : void 0}</div></div>` : void 0;
+  }
+  updateIdsToBeDeleted() {
+    return this._deleteIds = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._layerTable.value.selectedRelatedIds : this._layerTable.value?.selectedIds, this._deleteIds;
   }
   _setActiveLayout(e) {
     e === "splitView" && !this._panelOpen && this._toggleLayout(), e === "mapView" ? this._showMapInFullView() : this._showMapInCardView();
@@ -156,33 +159,33 @@ class F extends x {
     this.showCoverPage.emit();
   }
   _getMapAndCard(e, t, i) {
-    const a = this._getMapSizeClass(e, t, i), o = !this._isPortraitMobile && this._isMobile ? "border-right" : "";
-    return l`<div class=${`${a} overflow-hidden z-index-1 ${o}`}>${this._getMapNode(t)}${this._getPopupExpandNode()}</div>`;
+    const a = this._getMapSizeClass(e, t, i);
+    return l`<div class=${`${a} overflow-hidden z-index-1`}>${this._getMapNode(t)}${this._getPopupExpandNode()}</div>`;
   }
   _getMapNode(e) {
-    const t = this.appLayout === "mapView", i = this.appLayout === "tableView", a = t || i ? "position-absolute-0" : this._layoutMode === s.HORIZONTAL && (!this._isPortraitMobile || e) ? "" : "adjusted-height-50", o = this.defaultWebmap && this.defaultLayer, n = this.enableSelectionTool && this.featureSelectionMode === "multiple" && !this._layer?.isTable, r = ["home", "legend", "search", "fullscreen", "basemap", "floorfilter", "selectiontool"];
-    return l`<div class=${`${a} overflow-hidden`} id=card-mapView><map-card .appLayout=${this.appLayout} .appProxies=${this.appProxies} .basemapConfig=${this.basemapConfig} class="width-full" .defaultLayerId=${o ? this.defaultLayer : ""} .defaultWebmapId=${this.defaultWebmap} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableSearch=${this.enableSearch} .enableSelectionTool=${n} .enableShare=${this.enableShare} enable-single-expand home-zoom-index=3 home-zoom-position=top-left home-zoom-tools-size=s .isMapLayout=${t} .isMobile=${this._isMobile} .mapInfo=${this._mapInfo} .mapInfos=${this.mapInfos?.filter((h) => h.visible !== !1)} map-widgets-index=0 map-widgets-position=top-right map-widgets-size=m .showOnlyUpdatableLayers=${this.onlyShowUpdatableLayers} @toggleFilter=${this._toggleFilter} .selectedFeaturesIds=${this._layerTable.value?.selectedIds ?? []} .selectedLayer=${this._layer} .shareIncludeEmbed=${this.shareIncludeEmbed} .shareIncludeSocial=${this.shareIncludeSocial} stack-tools .theme=${this.theme} .toolOrder=${r} .zoomToScale=${this.zoomToScale} ${p(this._mapCard)}></map-card></div>`;
+    const t = this.appLayout === "mapView", i = this.appLayout === "tableView", a = this._isMobile ? "height-full" : t || i ? "position-absolute-0" : this._layoutMode === s.HORIZONTAL && (!this._isMobile || e) ? "" : "adjusted-height-50", o = this.defaultWebmap && this.defaultLayer, n = this.enableSelectionTool && this.featureSelectionMode === "multiple" && !this._layer?.isTable, r = ["home", "legend", "search", "fullscreen", "basemap", "floorfilter", "selectiontool"], h = ["map-picker", "map-layer-picker"];
+    return l`<div class=${`${a} overflow-hidden`} id=card-mapView><map-card .appLayout=${this.appLayout} .appProxies=${this.appProxies} .basemapConfig=${this.basemapConfig} class="width-full" .defaultLayerId=${o ? this.defaultLayer : ""} .defaultWebmapId=${this.defaultWebmap} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableSearch=${this.enableSearch} .enableSelectionTool=${n} .enableShare=${this.enableShare} enable-single-expand .hide=${!this._isMobile && i} zoom-tools-size=s .isMapLayout=${t} .isMobile=${this._isMobile} .mapInfo=${this._mapInfo} .mapInfos=${this.mapInfos?.filter((d) => d.visible !== !1)} map-widgets-index=0 map-widgets-position=top-left mobile-map-widgets-position=top-right map-widgets-size=m .showOnlyUpdatableLayers=${this.onlyShowUpdatableLayers} @toggleFilter=${this._toggleFilter} .selectedFeaturesIds=${this._layerTable.value?.selectedIds ?? []} .selectedLayer=${this._layer} .shareIncludeEmbed=${this.shareIncludeEmbed} .shareIncludeSocial=${this.shareIncludeSocial} stack-tools .theme=${this.theme} .mapToolsOrder=${r} .mobileToolsOrder=${h} .zoomToScale=${this.zoomToScale} ${u(this._mapCard)}></map-card></div>`;
   }
   _getPopupExpandNode() {
-    const e = this._isMobile ? "height-full" : "height-full position-relative", t = this._isPortraitMobile && this._showInformationHeader ? "display-none height-0" : "", i = this.popupHeaderColor ? "" : this._isPortraitMobile ? "calcite-mode-light" : "calcite-mode-dark", a = this._isPortraitMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isPortraitMobile ? "display-none height-0" : "", o = this.mapInfos?.length > 1 && this.appLayout === "tableView" ? "position-relative top-51" : "", n = this.appLayout !== "tableView" ? "position-sticky" : "";
+    const e = this._isMobile ? "height-full" : "height-full position-relative", t = this._isMobile && this._showInformationHeader ? "display-none height-0" : "", i = this.popupHeaderColor ? "" : this._isMobile ? "calcite-mode-light" : "calcite-mode-dark", a = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "", o = this.mapInfos?.length > 1 && this.appLayout === "tableView" ? "position-relative top-51" : "", n = this.appLayout !== "tableView" ? "position-sticky" : "";
     return l`<div class=${`${i} ${e} ${a} ${o} ${n}`} style=${T({
       "--calcite-color-foreground-1": this.popupHeaderColor,
       "--calcite-color-foreground-2": this.popupHeaderHoverColor,
       "--calcite-color-text-3": this.popupHeaderTextColor,
       "--calcite-color-text-2": this.popupHeaderTextColor
-    })}><calcite-panel>${!this._isPortraitMobile && this._showInformationHeader || this._numSelected > 0 && !this._isPortraitMobile ? l`<div class=${`display-flex align-items-center ${t}`} slot=header-content><calcite-icon icon=information scale=s></calcite-icon><div class="padding-inline-start-75">${this._translations.information}</div></div>` : l`<div></div>`}${this._getCardNode()}</calcite-panel></div>`;
+    })}><calcite-panel>${!this._isMobile && this._showInformationHeader || this._numSelected > 0 && !this._isMobile ? l`<div class=${`display-flex align-items-center ${t}`} slot=header-content><calcite-icon icon=information scale=s></calcite-icon><div class="padding-inline-start-75">${this._translations.information}</div></div>` : l`<div></div>`}${this._getCardNode()}</calcite-panel></div>`;
   }
   _getCardNode() {
-    const e = this.appLayout === "mapView", t = this.appLayout === "tableView", i = t && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : e || t ? "height-full" : this._numSelected > 0 && !this._isMobile ? "height-50" : this._showInformationHeader ? this._isPortraitMobile ? "height-full" : "height-50" : "adjusted-height-50_25", a = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return l`<div class=${`width-50 height-full ${a}`}><card-manager class=${`${i} width-full`} .customInfoText=${this.customInfoText} .enableCreateFeatures=${this._enableCreateFeatures && !this._isMobile} .enableEditGeometry=${this?._mapInfo?.enableEditGeometry} .enableSnapping=${this.enableSnapping} .isMobile=${this._isPortraitMobile} .layerOrTable=${this._layer} .mapView=${this?._mapView} @backFromCreateWorkFlow=${() => {
+    const e = this.appLayout === "mapView", t = this.appLayout === "tableView", i = this._isMobile ? "height-full" : t && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : e || t ? "height-full" : this._numSelected > 0 && !this._isMobile ? "height-50" : this._showInformationHeader ? this._isMobile ? "height-full" : "height-50" : "adjusted-height-50_25", a = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
+    return l`<div class=${`width-50 height-full ${a}`}><card-manager class=${`${i} width-full`} .customInfoText=${this.customInfoText} .enableCreateFeatures=${this._enableCreateFeatures && !this._isMobile} .enableEditGeometry=${this?._mapInfo?.enableEditGeometry} .enableSnapping=${this.enableSnapping} .isMobile=${this._isMobile} .layerOrTable=${this._layer} .mapView=${this?._mapView} @backFromCreateWorkFlow=${() => {
       this._showInformationHeader = !0;
     }} @createWorkFlowStarted=${() => {
       this.appLayout = this._layer?.isTable ? "tableView" : "mapView", this._showInformationHeader = !1;
-    }} @featureOrRecordSubmitted=${() => this._layerTable.value && void this._layerTable.value.refresh()} .selectedFeaturesIds=${this._layerTable.value?.selectedIds} .selectingFeatureFromMap=${this.appLayout === "mapView"} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected}></card-manager></div>`;
+    }} @featureOrRecordSubmitted=${() => this._layerTable.value && void this._layerTable.value.refresh()} .selectedFeaturesIds=${this._layerTable.value?.selectedIds} .selectingFeatureFromMap=${this.appLayout === "mapView"} .showSketchWidgets=${this._layer?.geometryType !== "point"} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected}></card-manager></div>`;
   }
   _getTable(e, t, i) {
-    const a = this.appLayout === "mapView", o = this.appLayout === "tableView", n = i && this._isPortraitMobile ? "visibility-hidden" : a ? "display-none" : "", r = a ? "height-full width-full z-index-0" : "display-none", h = this._getTableSizeClass(e, t), m = e === s.HORIZONTAL ? "horizontal" : "vertical", _ = e === s.HORIZONTAL ? "header" : "panel-start", d = this.defaultWebmap && this.defaultLayer, u = this.defaultGlobalId ? this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId] : void 0, g = this.defaultOid ? this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map((w) => Number.parseInt(w, 10)) : [Number.parseInt(this.defaultOid, 10)] : void 0;
-    return l`<calcite-shell class=${`${h} border-bottom`}>${this._isMobile ? void 0 : l`<calcite-action-bar class="border-sides" expand-disabled .layout=${m} slot=${_ ?? L}>${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=${d ? u : void 0} .defaultLayerId=${d ? this.defaultLayer : ""} .defaultOid=${d && !u ? g : 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._isPortraitMobile} .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} ${p(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, f = this.defaultGlobalId ? this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId] : void 0, g = this.defaultOid ? this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map((w) => Number.parseInt(w, 10)) : [Number.parseInt(this.defaultOid, 10)] : void 0;
+    return l`<calcite-shell class=${`${h} border-bottom`}>${this._isMobile ? void 0 : l`<calcite-action-bar class="border-sides" expand-disabled .layout=${d} slot=${_ ?? L}>${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 ? g : 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=${m(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";
@@ -200,18 +203,18 @@ class F extends x {
   }
   _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=${m(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>`;
   }
   _filterModal() {
     const e = this._layerExpressions?.length > 0;
-    return l`<calcite-dialog class="filter-content-space" .heading=${this._translations.filter.replace("{{title}}", this._layer?.title || "")} id=solutions-filter-dialog kind=brand modal @calciteDialogClose=${() => void this._closeFilter()} .open=${this._filterOpen} width=s>${!this._layer?.isTable && this._mapExtentFilter() || ""}${e && this._mapView && l`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._layerExpressions} @filterListReset=${this._handleFilterListReset} @filterUpdate=${() => void this._updateFilter()} .view=${this._mapView} ${p(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-dialog>`;
+    return l`<calcite-dialog class="filter-content-space" .heading=${this._translations.filter.replace("{{title}}", this._layer?.title || "")} id=solutions-filter-dialog kind=brand modal @calciteDialogClose=${() => void this._closeFilter()} .open=${this._filterOpen} width=s>${!this._layer?.isTable && this._mapExtentFilter() || ""}${e && this._mapView && l`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._layerExpressions} @filterListReset=${this._handleFilterListReset} @filterUpdate=${() => void this._updateFilter()} .view=${this._mapView} ${u(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-dialog>`;
   }
-  async _updateFilter() {
+  _updateFilter() {
     const e = this._filterList?.value?.filterCount && this._filterList.value.filterCount > 0 || this._mapExtentFilterChecked;
-    this._layerTable.value && await this._layerTable.value?.filterUpdate(e), this._mapCard.value && await this._mapCard.value.updateFilterState(e);
+    this._layerTable.value && this._layerTable.value?.filterUpdate(e), this._mapCard.value && this._mapCard.value.updateFilterState(e);
   }
   _initLayerExpressions() {
     const e = this._mapInfo?.filterConfig?.layerExpressions;
@@ -228,7 +231,7 @@ class F extends x {
   }
   _onResize() {
     const e = this.el.offsetWidth < 1024, t = !this._isMobile && e;
-    this._isMobile = e, t && (this._panelOpen = !0), this._isMobile ? (this.showHideMapPopupAndTable(!this._isMobile), this._isPortraitMobile = !!window.matchMedia("(orientation: portrait)").matches, this.appLayout = "splitView") : (this._layer?.isTable && (this.appLayout = "tableView"), this._isPortraitMobile = !1), this._layoutMode = this._isPortraitMobile ? s.HORIZONTAL : s.GRID;
+    this._isMobile = e, t && (this._panelOpen = !0), this._isMobile ? (this.showHideMapPopupAndTable(!this._isMobile), this.appLayout = "splitView") : (this._layer?.isTable && (this.appLayout = "tableView"), this._isMobile = !1), this._layoutMode = this._isMobile ? s.HORIZONTAL : s.GRID;
   }
   _toggleLayout() {
     this._panelOpen = !this._panelOpen;