@esri/solutions-components 0.10.16 → 0.10.18

package/dist/components/card-manager2.js

@@ -3,35 +3,40 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
 import { g as getLayerOrTable } from './mapViewUtils.js';
-import { d as defineCustomElement$h } from './action.js';
-import { d as defineCustomElement$g } from './action-menu.js';
-import { d as defineCustomElement$f } from './alert.js';
-import { d as defineCustomElement$e } from './button.js';
-import { d as defineCustomElement$d } from './chip.js';
-import { d as defineCustomElement$c } from './icon.js';
-import { d as defineCustomElement$b } from './loader.js';
-import { d as defineCustomElement$a } from './modal.js';
-import { d as defineCustomElement$9 } from './notice.js';
-import { d as defineCustomElement$8 } from './panel.js';
-import { d as defineCustomElement$7 } from './popover.js';
-import { d as defineCustomElement$6 } from './scrim.js';
-import { d as defineCustomElement$5 } from './shell.js';
-import { d as defineCustomElement$4 } from './tooltip.js';
+import { d as defineCustomElement$j } from './action.js';
+import { d as defineCustomElement$i } from './action-menu.js';
+import { d as defineCustomElement$h } from './alert.js';
+import { d as defineCustomElement$g } from './button.js';
+import { d as defineCustomElement$f } from './chip.js';
+import { d as defineCustomElement$e } from './flow-item.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './loader.js';
+import { d as defineCustomElement$b } from './modal.js';
+import { d as defineCustomElement$a } from './notice.js';
+import { d as defineCustomElement$9 } from './panel.js';
+import { d as defineCustomElement$8 } from './popover.js';
+import { d as defineCustomElement$7 } from './scrim.js';
+import { d as defineCustomElement$6 } from './shell.js';
+import { d as defineCustomElement$5 } from './tooltip.js';
+import { d as defineCustomElement$4 } from './create-feature2.js';
 import { d as defineCustomElement$3 } from './delete-button2.js';
 import { d as defineCustomElement$2 } from './edit-card2.js';
 import { d as defineCustomElement$1 } from './info-card2.js';
 
-const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
+const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}.position-static{position:static !important}.z-index-500{z-index:500 !important}card-manager{display:block}";
 const CardManagerStyle0 = cardManagerCss;
 
 const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.createWorkFlowStarted = createEvent(this, "createWorkFlowStarted", 7);
+        this.backFromCreateWorkFlow = createEvent(this, "backFromCreateWorkFlow", 7);
+        this.featureOrRecordSubmitted = createEvent(this, "featureOrRecordSubmitted", 7);
         this.customInfoText = undefined;
         this.enableEditGeometry = false;
         this.isMobile = undefined;
@@ -39,11 +44,27 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.selectedFeaturesIds = undefined;
+        this.enableCreateFeatures = true;
         this._cardLoading = false;
         this._graphics = undefined;
+        this._showCreateFeatureComponent = false;
+        this._showSubmitBtn = false;
         this._translations = undefined;
     }
     get el() { return this; }
+    /**
+     * boolean: Flag to maintain if recently any feature has been created
+     */
+    _isFeatureCreated = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * HTMLCreateFeatureElement: Create Feature component instance
+     */
+    _createFeature;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -59,10 +80,25 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
     //  Events (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Emits when create work flow started
+     */
+    createWorkFlowStarted;
+    /**
+     * Emits when back from create work flow
+     */
+    backFromCreateWorkFlow;
+    /**
+     * Emits when feature/record is submitted
+     */
+    featureOrRecordSubmitted;
     /**
      * Query the layer for the provided ids and store the result graphics
      */
     async featureSelectionChange(evt) {
+        if (this._showCreateFeatureComponent && !this._isFeatureCreated) {
+            void this._backFromCreateFeature();
+        }
         const ids = evt.detail;
         this._graphics = await this._getFeaturesByIds(ids);
     }
@@ -70,6 +106,9 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
      * Get the layer view for the provided layer id
      */
     async layerSelectionChange(evt) {
+        if (this._showCreateFeatureComponent) {
+            void this._backFromCreateFeature();
+        }
         const id = evt.detail[0];
         this.layer = await getLayerOrTable(this.mapView, id);
     }
@@ -94,8 +133,23 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
      */
     render() {
         const featuresClass = this._graphics?.length > 0 ? "" : "display-none";
-        const messageClass = this._graphics?.length > 0 ? "display-none" : "";
-        return (h(Host, { key: 'dafff11793b5ae60164964c346cbb152caceaeb9' }, h("div", { key: '02507fe9e1f4205fe8a9342b466f1ada849c8ed8', class: "overflow-auto height-full" }, h("calcite-shell", { key: '712c42c4044c1386e8bc4ff42e44f250ac4023a2', class: "position-relative " + featuresClass }, h("div", { key: 'f2bc47f58463506f7ea8011495b22cafb63e4f27' }, h("info-card", { key: '1ad1fb78dcc99a43d92ad08d4c7bbeda7c2f276d', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: 'fa9fcada67198c182f918b939826f1f7f19f8e5b', class: "position-relative " + messageClass }, h("div", { key: '0da349d1442b6375cde177780c5f868d2e32072a', class: "padding-1" }, h("calcite-notice", { key: 'c0e04ca03c546f90c942c2eef622fbe9c8e61227', icon: "table", open: true }, h("div", { key: '85e3925e725798189b16270df31c266c55391ec7', slot: "message" }, this.customInfoText || this._translations.selectFeaturesToStart)))))));
+        const createFeatureClass = this._graphics?.length === 0 && this._showCreateFeatureComponent ? "" : "display-none";
+        const messageClass = this._graphics?.length > 0 || this._showCreateFeatureComponent ? "display-none" : "";
+        const isTable = this.layer?.isTable;
+        const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
+        const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
+        return (h(Host, { key: '6089a5003e4ee08df4da7ecbcf8e6a3c8628f8bf' }, h("div", { key: '60dc1c21c650cce5165f56a0e040feba3652ae10', class: "overflow-auto height-full" }, h("calcite-shell", { key: '530a3173010e32fe062dc313ed3805833228f0fd', class: "position-relative " + featuresClass }, h("div", { key: 'af2350dac50f8ecc576cdeb528b350557057ff8d', class: "position-static z-index-500" }, h("info-card", { key: '626b34ec1ed2fc7e52f0ee2f9ae4520d1bcceb08', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '642531296a90d92068592eef75bc4632438a4cbc', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: 'b15e856439afdf9f08df9ff22f4e7dd7fee74273' }, h("calcite-panel", { key: '9305e17349e3b653565d1c183e118bdc3b791e23' }, h("div", { key: '25cf89836b8d20c6728842c5372e2c17dda967e6', class: "padding-1" }, h("calcite-notice", { key: '8df4a9c3e037f1b9f6131371d36a23e845db7ee2', icon: "table", open: true }, h("div", { key: '5c613ab8e9b9c25fc9f824e1007c3c4fa48b15b5', slot: "message" }, this.customInfoText || this._translations.selectFeaturesToStart))), showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'ba88fcd64b3cf2ae1fc36da58581974473d4e0b3', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: '5e64963bf756e397c819a4c60112191031d9113f', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '7d93240bffd381e2ed1e6dc10126b30cb1a143f9' }, h("calcite-panel", { key: '6ae7f4917394521b3226e38e07ac8eaf8c29b58e', heading: heading }, h("calcite-action", { key: '60cfdea79ad19ba0b62a9fb2ef3a6495c41b1f53', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "back" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'ab10ab259363cee6b872f7e6619518125141759e', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+    }
+    /**
+   * Returns the editor component for adding feature
+   * @returns Node
+   */
+    getEditorComponent() {
+        return (h("div", null, this._showCreateFeatureComponent && h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: () => { this._showSubmitBtn = true; }, onEditingAttachment: (evt) => { this._showSubmitBtn = !evt.detail; }, onProgressStatus: () => {
+                setTimeout(() => {
+                    this._isFeatureCreated = false;
+                }, 2000);
+            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id })));
     }
     //--------------------------------------------------------------------------
     //
@@ -110,10 +164,44 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
      */
     async _getFeaturesByIds(ids) {
         // only query if we have some ids...query with no ids will result in all features being returned
-        const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
+        const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layer, [], true, this.mapView.spatialReference) : [];
         // https://github.com/Esri/solutions-components/issues/365
         return featureSet.sort((a, b) => ids.indexOf(a.getObjectId()) - ids.indexOf(b.getObjectId()));
     }
+    /**
+     * Displays the feature creation functionality and changes the layout
+     * @protected
+     */
+    _createFeatureBtnClicked() {
+        this._showCreateFeatureComponent = true;
+        this.createWorkFlowStarted.emit();
+    }
+    /**
+     * Closes the Create feature component
+     * @protected
+     */
+    async _backFromCreateFeature() {
+        if (this._createFeature) {
+            await this._createFeature.close();
+            this._showCreateFeatureComponent = false;
+            this.backFromCreateWorkFlow.emit();
+        }
+        this._showSubmitBtn = false;
+    }
+    /**
+     * On Submitting the form show the creator feature again
+     * @protected
+     */
+    _featureCreated() {
+        void this._createFeature.close();
+        this._showCreateFeatureComponent = false;
+        this._showSubmitBtn = false;
+        this._isFeatureCreated = true;
+        this.featureOrRecordSubmitted.emit();
+        setTimeout(() => {
+            this._showCreateFeatureComponent = true;
+        }, 50);
+    }
     /**
      * Fetches the component's translations
      *
@@ -133,15 +221,18 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         "mapView": [16],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "selectedFeaturesIds": [16],
+        "enableCreateFeatures": [4, "enable-create-features"],
         "_cardLoading": [32],
         "_graphics": [32],
+        "_showCreateFeatureComponent": [32],
+        "_showSubmitBtn": [32],
         "_translations": [32]
     }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "layerSelectionChange", "layerSelectionChange"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["card-manager", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-shell", "calcite-tooltip", "delete-button", "edit-card", "info-card"];
+    const components = ["card-manager", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-flow-item", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-shell", "calcite-tooltip", "create-feature", "delete-button", "edit-card", "info-card"];
     components.forEach(tagName => { switch (tagName) {
         case "card-manager":
             if (!customElements.get(tagName)) {
@@ -150,70 +241,80 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$i();
             }
             break;
         case "calcite-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$g();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$f();
+            }
+            break;
+        case "calcite-flow-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "calcite-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "calcite-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "calcite-shell":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "calcite-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "create-feature":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/checkbox.js

@@ -16,7 +16,7 @@ import { C as CSS_UTILITY } from './resources.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     toggle: "toggle",

package/dist/components/chip.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     title: "title",

package/dist/components/color-picker-hex-input.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './progress.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     container: "container",

package/dist/components/color-picker-swatch.js

@@ -10,7 +10,7 @@ import { v as getModeName } from './dom.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     swatch: "swatch",

package/dist/components/combobox-item-group.js

@@ -10,7 +10,7 @@ import { f as getAncestors, j as getDepth } from './utils2.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     list: "list",

package/dist/components/combobox-item.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     active: "label--active",

package/dist/components/combobox.js

@@ -29,7 +29,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const CSS = {
     button: "x-button",

package/dist/components/component.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 function getIconScale(componentScale) {
     return componentScale === "l" ? "m" : "s";

package/dist/components/conditionalSlot.js

@@ -9,7 +9,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 let mutationObserver;
 const observerOptions = { childList: true };

package/dist/components/config.js

@@ -8,7 +8,7 @@ import { Build } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.12.1
  */
 const existingConfig = globalThis["calciteConfig"];
 const focusTrapStack = existingConfig?.focusTrapStack || [];

package/dist/components/create-feature2.js

@@ -8,7 +8,7 @@ import { l as loadModules } from './loadModules.js';
 import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.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 0 20px 14px}.display-none{display:none !important}.hide-map{height:1%;visibility:hidden}.show-map{padding:10px !important;position:absolute;bottom:0;width:calc(100% - 22px);height:50%}";
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.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 0 20px 14px}.display-none{display:none !important}.hide-map{height:1%;visibility:hidden}.show-map{padding:10px !important;position:absolute;bottom:0;width:calc(100% - 22px);height:50%}.esri-editor__panel-content{padding-block:10px !important}";
 const CreateFeatureStyle0 = createFeatureCss;
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
@@ -28,6 +28,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.isMobile = undefined;
         this.floorLevel = undefined;
         this.formElements = undefined;
+        this.enableSearch = false;
         this._editorLoading = false;
         this._showSearchWidget = undefined;
     }
@@ -106,6 +107,10 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * boolean: Flag to maintain form submission using submit button
      */
     _isSubmitBtnClicked = false;
+    /**
+     * __esri.FeatureLayer: selected feature layer;
+     */
+    _selectedLayer;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -132,7 +137,18 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     async _editorLoadingWatchHandler(v) {
         if (v) {
             this._container?.classList.add("display-none");
-            await this.startCreate();
+            if (this._selectedLayer?.isTable) {
+                const template = this._selectedLayer.templates[0];
+                const creationInfo = {
+                    layer: this._selectedLayer,
+                    template
+                };
+                await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
+                await this.hideEditorsElements();
+            }
+            else {
+                await this.startCreate();
+            }
             this._container?.classList.remove("display-none");
             this._editorLoading = false;
         }
@@ -225,7 +241,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
         const mobileMapClass = this.isMobile ? "show-map" : "display-none";
-        return (h(Fragment, { key: 'aac8fd8fe4ba5d7fb67a2b74a86147e053c1b0b8' }, h("calcite-loader", { key: 'e440bd2e0f4cf5acf4fd6941ada508c8ac5a0380', class: loaderClass, label: "", scale: "s" }), h("div", { key: '055a4e4b30b1fe24e0735257fa54fa9845cbaf2f', class: featureFormClass, id: "feature-form" }), h("div", { key: '342847f06ba99ad3c9693026bc83a8ac18b6c05f', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '0acb837b4604d8d590bbfbcd738a3e09a099c362', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: 'df6ae442c5d339f1cd0922ac32c646e819cc5a0e' }, h("calcite-loader", { key: 'f5d23d229486da63e6fef61edc96af549344985a', class: loaderClass, label: "", scale: "s" }), h("div", { key: '3e33def6c7f9fed3c503c239c46a05e3cad13915', class: featureFormClass, id: "feature-form" }), this.enableSearch && h("div", { key: '77f674b79cf54e9f84fac68bcc4294df3727c6e2', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '8babe32f8d3ad74130ba538f202f896d546f6913', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -288,7 +304,9 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async _loadWidgets() {
         await this.createEditorWidget();
-        await this.createSearchWidget();
+        if (this.enableSearch) {
+            await this.createSearchWidget();
+        }
     }
     /**
      * Display editor widget to create the new feature
@@ -302,22 +320,27 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this._container = document.createElement("div");
         this._container?.classList.add("display-none");
         const allMapLayers = await getAllLayers(this._updatedMapView);
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
-            layerInfos.push({
-                layer: eachLayer,
-                enabled: eachLayer?.type === "feature" && eachLayer?.id === this.selectedLayerId,
-                addEnabled: true, // default is true, set to false to disable the ability to add a new feature
-                updateEnabled: false, // default is true, set to false to disable the ability to edit an existing feature
-                deleteEnabled: false // default is true, set to false to disable the ability to delete features
+        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        // if layer is selected then only use the layerInfos while initializing the editor widget
+        if (!this._selectedLayer?.isTable) {
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            allMapLayers.forEach(async (eachLayer) => {
+                layerInfos.push({
+                    layer: eachLayer,
+                    enabled: eachLayer?.type === "feature" && eachLayer?.id === this.selectedLayerId,
+                    addEnabled: true, // default is true, set to false to disable the ability to add a new feature
+                    updateEnabled: false, // if true, enable ability to edit an existing feature
+                    deleteEnabled: false // default is true, set to false to disable the ability to delete features
+                });
             });
-        });
+        }
         this._editor = new this.Editor({
-            allowedWorkflows: "create-features",
             view: this._updatedMapView,
             layerInfos: layerInfos,
             visibleElements: {
-                snappingControls: false
+                snappingControls: false,
+                createFeaturesSection: true,
+                editFeaturesSection: false
             },
             container: this._container
         });
@@ -353,6 +376,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
             if (state === 'ready') {
                 this._mapViewContainer?.classList?.replace("show-map", "hide-map");
+                this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
                 void this._setFloorLevel(this.floorLevel);
                 this._showSearchWidget = false;
                 this.progressStatus.emit(1);
@@ -384,8 +408,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                 this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
                     this.progressStatus.emit(0.75);
                     setTimeout(() => {
-                        //on form submit
-                        this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
                         //hides the header and footer elements in editor widget
                         this.hideEditorsElements().then(() => {
                             resolve({});
@@ -393,7 +415,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                     }, 700);
                 });
                 //if only one feature template then directly start geometry creation for that
-                //else allow feature template selection to user
                 if (items.length === 1) {
                     this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
                 }
@@ -424,12 +445,11 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this._search.container = 'search-widget-ref';
         this._search.popupEnabled = false;
         this._search.resultGraphicEnabled = false;
-        const layer = await getLayerOrTable(this._updatedMapView, this.selectedLayerId);
         let pointGeometry = null;
         // on search get the geometry of the searched location and pass it in sketchViewModel and go to featureForm page
         this._search.on('search-complete', (e) => {
             void this._updatedMapView.goTo(e.results[0].results[0].extent);
-            if (layer.geometryType === 'point') {
+            if (this._selectedLayer.geometryType === 'point') {
                 pointGeometry = e.results[0].results[0]?.feature.geometry;
             }
         });
@@ -507,7 +527,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         if (!level) {
             return;
         }
-        const layer = await getLayerOrTable(this._updatedMapView, this.selectedLayerId);
+        const layer = this._selectedLayer;
         if (layer?.floorInfo?.floorField) {
             const layerField = layer.fields.find((field) => field.name === layer.floorInfo.floorField);
             // if layer field is present and form template is not present only then we can set value of floorfield into feature form otherwise create a mannual formtemplate to add the floorfeild element
@@ -623,6 +643,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "isMobile": [4, "is-mobile"],
         "floorLevel": [1, "floor-level"],
         "formElements": [8, "form-elements"],
+        "enableSearch": [4, "enable-search"],
         "_editorLoading": [32],
         "_showSearchWidget": [32],
         "close": [64],

package/dist/components/create-related-feature2.js

@@ -158,7 +158,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h("calcite-loader", { key: 'f78b296f74ee01aadc0443abd0bb78b68a7d9f3e', class: loaderClass, label: "", scale: "s" }));
+        return (h("calcite-loader", { key: '1238dfb67ae2c92cf4ca901b004421275921d7e4', class: loaderClass, label: "", scale: "s" }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.