@esri/solutions-components 0.10.48 → 0.11.0

package/dist/esm/calcite-flow-item_5.entry.js

@@ -0,0 +1,1744 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-d233c7a2.js';
+import { g as getElementDir } from './dom-66c5cd46.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-cad37709.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-dc3f24a8.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-911eca09.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-1698878e.js';
+import { S as SLOTS$1 } from './resources-bc66182e.js';
+import { l as loadModules, g as getLocaleComponentStrings } from './locale-586d9375.js';
+import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils-f54edae3.js';
+import { P as PopupUtils } from './popupUtils-ddb1f6fa.js';
+import './guid-45e997d8.js';
+import './resources-ab131744.js';
+import './browser-e42b9848.js';
+import './key-2e7789c2.js';
+import './observers-ab3d6528.js';
+import './esri-loader-c6842c6b.js';
+import './_commonjsHelpers-089957fe.js';
+import './interfaces-659e3836.js';
+import './downloadUtils-8ba094d7.js';
+import './typeof-ef2a007d.js';
+import './index-d88c3eb6.js';
+import './solution-resource-30a29505.js';
+import './restHelpersGet-a7fda344.js';
+import './update-ad0b88fa.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.13.2
+ */
+const CSS = {
+    backButton: "back-button",
+};
+const ICONS = {
+    backLeft: "chevron-left",
+    backRight: "chevron-right",
+};
+const SLOTS = {
+    actionBar: "action-bar",
+    alerts: "alerts",
+    contentTop: "content-top",
+    contentBottom: "content-bottom",
+    headerActionsStart: "header-actions-start",
+    headerActionsEnd: "header-actions-end",
+    headerMenuActions: "header-menu-actions",
+    headerContent: "header-content",
+    fab: "fab",
+    footer: "footer",
+    footerActions: "footer-actions",
+    footerEnd: "footer-end",
+    footerStart: "footer-start",
+};
+
+const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteFlowItemStyle0 = flowItemCss;
+
+const FlowItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteFlowItemBack = createEvent(this, "calciteFlowItemBack", 7);
+        this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 6);
+        this.calciteFlowItemClose = createEvent(this, "calciteFlowItemClose", 6);
+        this.calciteFlowItemToggle = createEvent(this, "calciteFlowItemToggle", 6);
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleInternalPanelScroll = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
+            event.stopPropagation();
+            this.calciteFlowItemScroll.emit();
+        };
+        this.handleInternalPanelClose = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
+            event.stopPropagation();
+            this.closed = true;
+            this.calciteFlowItemClose.emit();
+        };
+        this.handleInternalPanelToggle = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
+            event.stopPropagation();
+            this.collapsed = event.target.collapsed;
+            this.calciteFlowItemToggle.emit();
+        };
+        this.backButtonClick = () => {
+            this.calciteFlowItemBack.emit();
+        };
+        this.setBackRef = (node) => {
+            this.backButtonEl = node;
+        };
+        this.setContainerRef = (node) => {
+            this.containerEl = node;
+        };
+        this.closable = false;
+        this.closed = false;
+        this.collapsed = false;
+        this.collapseDirection = "down";
+        this.collapsible = false;
+        this.beforeBack = undefined;
+        this.beforeClose = undefined;
+        this.description = undefined;
+        this.disabled = false;
+        this.heading = undefined;
+        this.headingLevel = undefined;
+        this.loading = false;
+        this.menuOpen = false;
+        this.messageOverrides = undefined;
+        this.messages = undefined;
+        this.overlayPositioning = "absolute";
+        this.scale = "m";
+        this.showBackButton = false;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectLocalized(this);
+        connectMessages(this);
+    }
+    async componentWillLoad() {
+        await setUpMessages(this);
+        setUpLoadableComponent(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        disconnectLocalized(this);
+        disconnectMessages(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Sets focus on the component.
+     *
+     * @returns promise.
+     */
+    async setFocus() {
+        await componentFocusable(this);
+        const { backButtonEl, containerEl } = this;
+        if (backButtonEl) {
+            return backButtonEl.setFocus();
+        }
+        else if (containerEl) {
+            return containerEl.setFocus();
+        }
+    }
+    /**
+     * Scrolls the component's content to a specified set of coordinates.
+     *
+     * @example
+     * myCalciteFlowItem.scrollContentTo({
+     *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+     *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+     *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+     * });
+     * @param options - allows specific coordinates to be defined.
+     * @returns - promise that resolves once the content is scrolled to.
+     */
+    async scrollContentTo(options) {
+        await this.containerEl?.scrollContentTo(options);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderBackButton() {
+        const { el } = this;
+        const rtl = getElementDir(el) === "rtl";
+        const { showBackButton, backButtonClick, messages } = this;
+        const label = messages.back;
+        const icon = rtl ? ICONS.backRight : ICONS.backLeft;
+        return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label, title: label })) : null;
+    }
+    render() {
+        const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, } = this;
+        return (h(Host, { key: '2e7872bb2687db0b67ddbf375f8ec0beaabbda36' }, h(InteractiveContainer, { key: 'a9418954405a2cec2092bae3be5d77f02306e3c9', disabled: disabled }, h("calcite-panel", { key: 'd563c751421bf2d66c03286deaa613e09f585546', beforeClose: beforeClose, closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handleInternalPanelClose, onCalcitePanelScroll: this.handleInternalPanelScroll, onCalcitePanelToggle: this.handleInternalPanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), h("slot", { key: 'c506ec8bb4debbd6a9da6c7941878de49776f614', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'e76e55e654ff878acff734bdf387402a9e262159', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'f7ab8839d7b101e31087130ebf3e36af1ec7da24', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '2932c4c15b168732356b8e55fcc3064f5b3f4cf5', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: '1ef8a9050683022733695445092f8c626487d87b', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '24c0ab570a601a6c0edfb0c820e580fd24b158ce', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: 'ec55bbe7ba939a6efb35225850c37a1aadb97275', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'aa0bfec47656ef9f7f575cd933897a7909e5badc', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: 'e23532d080e2df529c2aeb6af043c6efe7a0ab6d', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: 'db6ffc0d9300c77067a4c88ab277de685c7713af', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '5f249356da9292f34c4036d0d0741f048fe999e9', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '7476137bacc0f3be5c97682c5027f74d73254765', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: '58f60a46c42a05abe9b100a57d478d991e4f25bc', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: '926a8d94b76b6fcdef6dfd219ba8180c44f81c35' })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+FlowItem.style = CalciteFlowItemStyle0;
+
+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 14px 20px 14px}.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}}";
+const CreateFeatureStyle0 = createFeatureCss;
+
+const CreateFeature = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.success = createEvent(this, "success", 7);
+        this.fail = createEvent(this, "fail", 7);
+        this.drawComplete = createEvent(this, "drawComplete", 7);
+        this.editingAttachment = createEvent(this, "editingAttachment", 7);
+        this.progressStatus = createEvent(this, "progressStatus", 7);
+        this.modeChanged = createEvent(this, "modeChanged", 7);
+        this.mapView = undefined;
+        this.selectedLayerId = undefined;
+        this.customizeSubmit = false;
+        this.locale = undefined;
+        this.searchConfiguration = undefined;
+        this.isMobile = undefined;
+        this.floorLevel = undefined;
+        this.formElements = undefined;
+        this.enableSearch = false;
+        this.showGuidingMsg = true;
+        this.showGuidingMsgWhileDrawing = true;
+        this._editorLoading = false;
+        this._currentPage = "templatePicker";
+        this._translations = undefined;
+    }
+    get el() { return getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
+     * The Editor constructor
+     */
+    Editor;
+    /**
+     * esri/form/ExpressionInfo: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-ExpressionInfo.html
+     * The ExpressionInfo constructor
+     */
+    ExpressionInfo;
+    /**
+     * esri/form/elements/FieldElement: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-elements-FieldElement.html
+     * The FieldElement constructor
+     */
+    FieldElement;
+    /**
+     * esri/form/FormTemplate: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html
+     */
+    FormTemplate;
+    /**
+     * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
+     * The Editor instance
+     */
+    _editor;
+    /**
+     * https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
+     * The Feature layer instance
+     */
+    FeatureLayer;
+    /**
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * The MapView instance
+     */
+    MapView;
+    /**
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * Updated map view instance
+     */
+    _updatedMapView;
+    /**
+     * esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
+     * The Search instance
+     */
+    Search;
+    /**
+     * "esri/widgets/Search": https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
+     * The Search instance
+     */
+    _search;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
+    /**
+     * boolean: Flag to maintain the add attachment
+     */
+    _addingAttachment;
+    /**
+     * HTMLDivElement: The node the editor will be added to
+     */
+    _container;
+    /**
+     * HTMLDivElement: The node for the map view
+     */
+    _mapViewContainer;
+    /**
+     * boolean: Flag to maintain form submission using submit button
+     */
+    _isSubmitBtnClicked = false;
+    /**
+     * __esri.FeatureLayer: selected feature layer;
+     */
+    _selectedLayer;
+    /**
+     * HTMLDivElement: refrence for search div element
+     */
+    _searchDiv;
+    /**
+     * HTMLCalciteNoticeElement: calcite notice refrence element
+     */
+    _calciteNotice;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    /**
+     * Called each time the mapView prop is changed.
+     */
+    async mapViewWatchHandler() {
+        await this.mapView.when(async () => {
+            await this.init();
+        });
+    }
+    /**
+     * Called each time when isMobile prop is changed.
+     */
+    async isMobileHandler() {
+        // emit an event when mode is changed to back to the feature selection panel (to avoid multiple maps conflict)
+        this.modeChanged.emit();
+    }
+    /**
+     * When _editorLoading is true the container node will be hidden while starting the create workflow
+     */
+    async _editorLoadingWatchHandler(v) {
+        if (v) {
+            this._container?.classList.add("display-none");
+            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;
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Submit the created feature
+     * @returns Promise that resolves when the operation is complete
+     */
+    async submit() {
+        if (this._editor) {
+            this._isSubmitBtnClicked = true;
+            this._editor.viewModel.featureFormViewModel.submit();
+        }
+    }
+    /**
+     * refresh the feature form
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh(floorLevel) {
+        if (this._editor) {
+            void this._setFloorLevel(floorLevel);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Emitted on demand when the feature is created successfully
+     */
+    success;
+    /**
+     * Emitted on demand when the feature creation is failed
+     */
+    fail;
+    /**
+     * Emitted on demand when drawing is completed
+     */
+    drawComplete;
+    /**
+    * Emitted on demand when editing attachments
+    */
+    editingAttachment;
+    /**
+     * Emitted on demand when editor panel changes
+     */
+    progressStatus;
+    /**
+     * Emitted on switched form mobile to desktop or vice versa
+     */
+    modeChanged;
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+        await this.initModules();
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        await this.init();
+    }
+    /**
+     * Called after each render
+     * Used to adjust the map top in case of mobile
+     */
+    componentDidRender() {
+        // update the map top according to space occupied by notice msg and search
+        if (this.isMobile) {
+            // get the height of notice, search and add 80px(editor msg) height to adjust the map top
+            const top = this._calciteNotice.offsetHeight + this._searchDiv.offsetHeight + 80;
+            this._mapViewContainer.style.top = `${top}px`;
+        }
+    }
+    /**
+     * StencilJS: Called every time the component is disconnected from the DOM,
+     */
+    disconnectedCallback() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        const showSearchWidget = this._currentPage === 'drawing' ? "" : "display-none";
+        const loaderClass = this._editorLoading ? "" : "display-none";
+        const featureFormClass = this._editorLoading ? "display-none" : "";
+        const mobileMapClass = this.isMobile ? "show-map" : "display-none";
+        // hide guiding msg for drawing page when showGuidingMsgWhileDrawing is false
+        const showGuidingMsg = this.showGuidingMsg && (this.showGuidingMsgWhileDrawing || this._currentPage !== "drawing");
+        let guidingMsg = this._translations.chooseCategoryMsg;
+        if (this._currentPage === 'drawing') {
+            guidingMsg = this._translations.provideLocationMsg;
+        }
+        else if (this._currentPage === 'featureForm') {
+            guidingMsg = this._translations.provideDetailsMsg;
+        }
+        return (h(Fragment, { key: '5ff1ae8fd3d3ca323e4a4cf58118632de8f666e8' }, showGuidingMsg && h("calcite-notice", { key: '908e0893f38e70a76541da6b102ff2664caeb5f1', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '2b070778d3d9d864ba4a3d0be2d766d5a2ddc398', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '1cc22fb1a2db9c69538dc72953c9a6181d197a17', class: loaderClass, label: "", scale: "s" }), h("div", { key: '68f8fb63bfb05aba67ac9b4906d61f0267718033', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
+            h("div", { key: 'a7688f8306d4c10a8abb45200fd89785cda444d8', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: 'ffed98a27fdc673fdbadc88533344d338f554ff3', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Init Editor widget and Search widget
+     */
+    async init() {
+        if (this.mapView && this.selectedLayerId) {
+            this._updatedMapView = this.mapView;
+            // In mobile mode show the map in panel
+            await (this.isMobile ? this.createMobileMapView() : this._loadWidgets());
+        }
+    }
+    /**
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
+    async initModules() {
+        const [Editor, reactiveUtils, Search, ExpressionInfo, FieldElement, FormTemplate, MapView] = await loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils",
+            "esri/widgets/Search",
+            "esri/form/ExpressionInfo",
+            "esri/form/elements/FieldElement",
+            "esri/form/FormTemplate",
+            "esri/views/MapView"
+        ]);
+        this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
+        this.Search = Search;
+        this.ExpressionInfo = ExpressionInfo;
+        this.FieldElement = FieldElement;
+        this.FormTemplate = FormTemplate;
+        this.MapView = MapView;
+    }
+    /**
+     * updates the map view (in case of mobile)
+     * @protected
+     */
+    async createMobileMapView() {
+        this._mapViewContainer.classList.add('hide-map');
+        await new this.MapView({
+            map: this.mapView.map,
+            container: this._mapViewContainer,
+            zoom: this.mapView.zoom
+        }).when((view) => {
+            // update the mapView and load all widgets
+            this._updatedMapView = view;
+            void this._loadWidgets();
+        }, (e) => {
+            console.log(e);
+        });
+    }
+    /**
+     * Loads the Editor and Search widgets
+     * @protected
+     */
+    async _loadWidgets() {
+        await this.createEditorWidget();
+        if (this.enableSearch) {
+            await this.createSearchWidget();
+        }
+    }
+    /**
+     * Display editor widget to create the new feature
+     * @protected
+     */
+    async createEditorWidget() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+        const layerInfos = [];
+        this._container = document.createElement("div");
+        this._container?.classList.add("display-none");
+        const allMapLayers = await getAllLayers(this._updatedMapView);
+        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({
+            view: this._updatedMapView,
+            layerInfos: layerInfos,
+            visibleElements: {
+                snappingControls: false,
+                createFeaturesSection: true,
+                editFeaturesSection: false
+            },
+            container: this._container
+        });
+        if (this._mapViewContainer) {
+            this.el.insertBefore(this._container, this._mapViewContainer);
+        }
+        else {
+            this.el.appendChild(this._container);
+        }
+        //Add handle to watch if attachments are added/edited
+        const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'adding-attachment' || state === 'editing-attachment') {
+                this._addingAttachment = true;
+                this.editingAttachment.emit(true);
+            }
+            else {
+                if (this._addingAttachment) {
+                    this.editingAttachment.emit(false);
+                    this._addingAttachment = false;
+                }
+            }
+        });
+        this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureTemplatesViewModel ready state and then start the creation
+        const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
+            if (state === 'ready' && this._editor.viewModel?.activeWorkflow?.type !== "create-features") {
+                this.progressStatus.emit(0.5);
+                this._editorLoading = true;
+            }
+        });
+        this._editor.viewModel.addHandles(handle);
+        //Add handle to watch featureFormViewModel ready state
+        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));
+                setTimeout(() => {
+                    void this._setFloorLevel(this.floorLevel);
+                }, 50);
+                this._currentPage = 'featureForm';
+                this.progressStatus.emit(1);
+                this.drawComplete.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
+        //Add handle to watch editor viewmodel state and then show the search widget
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'creating-features') {
+                if (this._editor.viewModel.featureFormViewModel.state === 'disabled') {
+                    this._mapViewContainer?.classList?.replace("hide-map", "show-map");
+                    if (this._selectedLayer && !this._selectedLayer.isTable) {
+                        this._currentPage = 'drawing';
+                    }
+                }
+            }
+        });
+        this._editor.viewModel.addHandles(createFeatureHandle);
+    }
+    /**
+     * Start creating the feature
+     * @protected
+     */
+    async startCreate() {
+        // hides the header elements on template picker page
+        await this.hideEditorsElements();
+        return new Promise((resolve, reject) => {
+            if (this._editor.viewModel.featureTemplatesViewModel.items?.length) {
+                const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+                //once the feature template is selected handle the event for formSubmit and sketch complete
+                //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
+                this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                    this.progressStatus.emit(0.75);
+                    setTimeout(() => {
+                        //hides the header and footer elements in editor widget
+                        this.hideEditorsElements().then(() => {
+                            resolve({});
+                        }, e => reject(e));
+                    }, 700);
+                });
+                //if only one feature template then directly start geometry creation for that
+                if (items.length === 1) {
+                    this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+                }
+                const resolvePromise = items.length > 1;
+                this.hideEditorsElements().then(() => {
+                    if (resolvePromise) {
+                        resolve({});
+                    }
+                }, e => resolvePromise && reject(e));
+            }
+        });
+    }
+    /**
+     * Display search widget to search location
+     * @protected
+     */
+    async createSearchWidget() {
+        let searchOptions = {
+            view: this._updatedMapView,
+        };
+        if (this.searchConfiguration) {
+            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this._updatedMapView);
+            searchOptions = {
+                ...searchConfiguration
+            };
+        }
+        this._search = new this.Search(searchOptions);
+        this._search.container = 'search-widget-ref';
+        this._search.popupEnabled = false;
+        this._search.resultGraphicEnabled = false;
+        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 (this._selectedLayer.geometryType === 'point') {
+                pointGeometry = e.results[0].results[0]?.feature.geometry;
+            }
+        });
+        //Add handle to watch if search viewModel state is ready
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._search.viewModel.state, (state) => {
+            if (state === 'ready') {
+                setTimeout(() => {
+                    if (this._editor.viewModel.sketchViewModel.createGraphic && pointGeometry) {
+                        this._editor.viewModel.sketchViewModel.createGraphic.set('geometry', pointGeometry);
+                        this._editor.viewModel.sketchViewModel.complete();
+                        void this.hideEditorsElements();
+                    }
+                }, 100);
+            }
+        });
+        this._search.viewModel.addHandles(createFeatureHandle);
+    }
+    /**
+     * Initialize the search widget based on user defined configuration
+     *
+     * @param searchConfiguration search configuration defined by the user
+     * @param view the current map view
+     *
+     * @protected
+     */
+    _getSearchConfig(searchConfiguration, view) {
+        const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
+        const sources = searchConfiguration.sources;
+        if (sources?.length > 0) {
+            searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
+            sources.forEach((source) => {
+                const isLayerSource = source.hasOwnProperty("layer");
+                if (isLayerSource) {
+                    const layerSource = source;
+                    const layerId = layerSource.layer?.id;
+                    const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
+                    const layerUrl = layerSource?.layer?.url;
+                    if (layerFromMap) {
+                        layerSource.layer = layerFromMap;
+                    }
+                    else if (layerUrl) {
+                        layerSource.layer = new this.FeatureLayer(layerUrl);
+                    }
+                }
+            });
+            sources?.forEach((source) => {
+                const isLocatorSource = source.hasOwnProperty("locator");
+                if (isLocatorSource) {
+                    const locatorSource = source;
+                    if (locatorSource?.name === "ArcGIS World Geocoding Service") {
+                        const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+                        locatorSource.outFields = outFields;
+                        locatorSource.singleLineFieldName = "SingleLine";
+                    }
+                    locatorSource.url = locatorSource.url;
+                    delete locatorSource.url;
+                }
+            });
+        }
+        else {
+            searchConfiguration = {
+                ...searchConfiguration,
+                includeDefaultSources: true
+            };
+        }
+        return searchConfiguration;
+    }
+    /**
+     * Add the floor level value to form
+     * @param level selected floor level
+     *
+     * @protected
+     */
+    async _setFloorLevel(level) {
+        if (!level) {
+            return;
+        }
+        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
+            if (layerField && !layer?.formTemplate) {
+                this._editor.viewModel.featureFormViewModel.setValue(layerField.name, level);
+                layerField.editable = false;
+            }
+            else if (layer.formTemplate && this.formElements) {
+                const floorInfoExpression = new this.ExpressionInfo({
+                    expression: `"${level}"`,
+                    name: "floor-info-test",
+                    title: "Floor Info",
+                    returnType: "string"
+                });
+                const levelIdFieldElement = new this.FieldElement({
+                    label: layer.floorInfo.floorField,
+                    editableExpression: 'false',
+                    fieldName: layer.floorInfo.floorField,
+                    input: {
+                        type: "text-box",
+                        maxLength: 50,
+                        minLength: 0
+                    },
+                    valueExpression: floorInfoExpression.name
+                });
+                this._updatedMapView.map.editableLayers.forEach((layer) => {
+                    const orgElements = this.formElements.orgElements;
+                    const orgExpressionInfos = this.formElements.orgExpressionInfos;
+                    const elements = [...orgElements];
+                    elements.push(levelIdFieldElement);
+                    // Creating formtemplate
+                    const floorInfoTemplate = new this.FormTemplate({
+                        title: layer.formTemplate.title,
+                        description: layer.formTemplate.description,
+                        elements,
+                        expressionInfos: [floorInfoExpression].concat(orgExpressionInfos)
+                    });
+                    layer.formTemplate = floorInfoTemplate;
+                });
+            }
+        }
+    }
+    /**
+     * Hides the elements of editor widget
+     * @protected
+     */
+    async hideEditorsElements() {
+        if (!this.customizeSubmit) {
+            return;
+        }
+        await this.timeout(700);
+        //hides the header and footer on the featureForm
+        this.el.querySelector('.esri-editor')?.querySelectorAll('calcite-flow-item')?.forEach((flowItem) => {
+            const article = flowItem.shadowRoot?.querySelector('calcite-panel')?.shadowRoot?.querySelector('article');
+            //hide the header
+            article?.querySelector('header')?.setAttribute('style', 'display: none');
+            //hide the footer
+            article?.querySelector('footer')?.setAttribute('style', 'display: none');
+        });
+    }
+    /**
+     * On creation of feature emit the event that the feature is created
+     * @param evt feature submit event
+     * @protected
+     */
+    async submitted(evt) {
+        //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
+        if (evt.invalid.length) {
+            this._isSubmitBtnClicked = false;
+            return;
+        }
+        //Submit only when valid attributes
+        //emit success or fail based on the result
+        if (evt.valid.length && this._isSubmitBtnClicked) {
+            this._isSubmitBtnClicked = false;
+            try {
+                await this._editor.activeWorkflow.commit();
+                //throw errors if any failures
+                if (this._editor.viewModel.failures?.length) {
+                    this._editor.viewModel.failures.some((failure) => {
+                        if (failure.error) {
+                            throw (failure.error);
+                        }
+                    });
+                }
+            }
+            catch (e) {
+                this.fail.emit(e);
+                return;
+            }
+            this.success.emit();
+        }
+    }
+    /**
+     * call setTimeout in Promise wrapper
+     * @param delay The time, in milliseconds that the timer should wait before the promise is resolved
+     * @protected
+     */
+    timeout(delay) {
+        return new Promise(resolve => setTimeout(resolve, delay));
+    }
+    /**
+     * Fetches the component's translations
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"],
+        "mapView": ["mapViewWatchHandler"],
+        "isMobile": ["isMobileHandler"],
+        "_editorLoading": ["_editorLoadingWatchHandler"]
+    }; }
+};
+CreateFeature.style = CreateFeatureStyle0;
+
+const deleteButtonCss = ":host{display:block}.delete-modal{position:fixed}";
+const DeleteButtonStyle0 = deleteButtonCss;
+
+const DeleteButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.editsComplete = createEvent(this, "editsComplete", 7);
+        this.deleteDialog = undefined;
+        this.buttonType = "button";
+        this.disabled = false;
+        this.icon = undefined;
+        this.ids = [];
+        this.layer = undefined;
+        this.locale = undefined;
+        this._confirmDelete = false;
+        this._deleteEndabled = false;
+        this._supportsDelete = undefined;
+        this._translations = undefined;
+    }
+    get el() { return getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async idsWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async layerWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Emitted on demand when features have been deleted
+     */
+    editsComplete;
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, { key: '16e40d762fda104d4b5687076a66c8a966c74838' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '43b52554c36cdeffb89e9c6c81bbb0a0549fa20b', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: 'f27147140dedcea99d759d5a84128adfc788becc' }, this._translations.delete))));
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        this._setDeleteEnabled();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Verify if the layer supports delete and that we have 1 or more ids
+     */
+    _setDeleteEnabled() {
+        this._supportsDelete = this.layer?.editingEnabled && this.layer?.capabilities?.operations?.supportsDelete;
+        this._deleteEndabled = !this.disabled || this._supportsDelete && this.ids.length > 0;
+    }
+    /**
+     * Delete all selected records or shows an alert if the layer does not have editing enabled
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
+    _delete() {
+        this._confirmDelete = true;
+    }
+    /**
+     * Show delete confirmation message
+     *
+     * @returns node to confirm or deny the delete operation
+     */
+    _deleteMessage() {
+        return this.deleteDialog ? this.deleteDialog : (h("delete-dialog", { id: "solution-delete-dialog", ids: this.ids, layer: this.layer, locale: this.locale, onDeleteDialogClose: () => this._confirmDelete = false, open: this._confirmDelete }));
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    static get watchers() { return {
+        "ids": ["idsWatchHandler"],
+        "layer": ["layerWatchHandler"],
+        "locale": ["localeWatchHandler"]
+    }; }
+};
+DeleteButton.style = DeleteButtonStyle0;
+
+const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-color-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-color-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-editor__panel-content{padding-block:10px !important}";
+const EditCardStyle0 = editCardCss;
+
+const EditCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeEdit = createEvent(this, "closeEdit", 7);
+        this.editorInitialized = createEvent(this, "editorInitialized", 7);
+        this.editsComplete = createEvent(this, "editsComplete", 7);
+        this.refreshGraphics = createEvent(this, "refreshGraphics", 7);
+        this.enableEditGeometry = false;
+        this.graphics = undefined;
+        this.locale = undefined;
+        this.mapView = undefined;
+        this.open = false;
+        this.graphicIndex = 0;
+        this._editorLoading = false;
+        this._translations = undefined;
+    }
+    get el() { return getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+      * esri/core/Accessor: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html#WatchHandle
+      */
+    _activeWorkflowHandle;
+    /**
+      * esri/core/Accessor: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html#WatchHandle
+      */
+    _addRelatedRecordHandle;
+    /**
+     * esri/core/Accessor: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html#WatchHandle
+     */
+    _attachmentHandle;
+    /**
+     * esri/core/Accessor: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html#WatchHandle
+     */
+    _editHandle;
+    /**
+     * esri/core/Accessor: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Accessor.html#WatchHandle
+     */
+    _layerEditHandle;
+    /**
+     * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
+     * The Editor constructor
+     */
+    Editor;
+    /**
+     * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
+     * The Editor instance
+     */
+    _editor;
+    /**
+     * esri/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
+     * OR
+     * esri/layers/support/SubtypeSublayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-SubtypeSublayer.html
+     */
+    _layer;
+    /**
+     * HTMLDivElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement
+     */
+    _editContainer;
+    /**
+     * any[]: Collection of edit controls created in "MULTI" edit mode
+     * These can be calcite-input-text, calcite-input-number, calcite-input-date-picker, calcite-input-time-picker, or calcite-combobox
+     */
+    _editControlElements;
+    /**
+     * boolean: When true edit controls will be disabled
+     */
+    _editingDisabled;
+    /**
+     * boolean: When true the Editor widget should be closed
+     * Without this logic we are taken to the Editors "Select" workflow step
+     */
+    _shouldClose = false;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for changes to the graphics and update the feature widget
+     */
+    async graphicsWatchHandler() {
+        if (this.graphics.length === 0 && this.open) {
+            await this._closeEdit(true);
+        }
+    }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    async openWatchHandler(v) {
+        if (v && this.graphics?.length > 0 && this.graphicIndex > -1) {
+            this._editorLoading = true;
+            await this._initEditorWidget();
+            if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
+                await this._startUpdate();
+            }
+            this._editorLoading = false;
+        }
+        if (!v) {
+            await this._closeEdit(true);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Emitted on demand when the Editor widget should be closed
+     */
+    closeEdit;
+    /**
+     * Emit the Editor when it is initialized
+     */
+    editorInitialized;
+    /**
+     * Emitted on demand when edits are completed on current edit layer
+     */
+    editsComplete;
+    /**
+     * Emitted on demand when the editor is closed to handle
+     * things like attachment updates that don't fire the standard edit update event when complete
+     */
+    refreshGraphics;
+    async featureSelectionChange() {
+        if (this.open) {
+            await this._closeEdit(false);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._initModules();
+        await this._getTranslations();
+    }
+    /**
+     * Special handeling when used with layer-table.
+     * This allows us to only fetch graphics when the modal is opened rather than with every render of the layer-table.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillRender() {
+        if (this.graphics?.length > 0 && this.graphics[0]?.layer) {
+            this._layer = this.graphics[0].layer;
+            if (this._layerEditHandle) {
+                this._layerEditHandle.remove();
+            }
+            // #896 Editing on sybtype group layer is failing in Manager
+            const layer = this._layer.type === "subtype-sublayer" ? this._layer.parent : this._layer;
+            this._layerEditHandle = layer.on("edits", () => {
+                this.editsComplete.emit();
+            });
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        // This is a temp workaround hopefully...this._editingDisabled should reflect the current state but does not
+        // when you use MULTI edit mode...is fine in SINGLE
+        const editDisabled = this.graphics?.length > 0 && this.graphics[0] ?
+            !this.graphics[0].layer.editingEnabled : true;
+        const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
+        const loadingClass = this._editorLoading ? "" : "display-none";
+        return (h(Host, { key: '07a1ccdba5162490e20fee0ef555cef895f0885e' }, h("div", { key: '845beed84402ca9a4056bd7231eed52a89ff65b8', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '0f8dcb1c8d2cd8df395a5f0b2abf9e1d3a50f11f', class: "position-absolute" }, h("div", { key: 'f0906c8e8c046f8464a5487958b6bc637207b00c', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'cb2e513262d14470287097572c905173a0c63f92', class: loadingClass, label: "", scale: "s" })))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     */
+    async _initModules() {
+        const [Editor, reactiveUtils] = await loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils"
+        ]);
+        this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Init the Editor widget so we can display the popup content
+     */
+    async _initEditorWidget() {
+        if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
+            if (this._editor) {
+                this._editor.destroy();
+            }
+            const container = document.createElement("div");
+            const layers = await getAllLayers(this.mapView);
+            const layerInfos = layers.map(layer => {
+                return {
+                    layer,
+                    geometryUpdatesEnabled: this.enableEditGeometry
+                };
+            });
+            this._editor = new this.Editor({
+                view: this.mapView,
+                layerInfos,
+                visibleElements: {
+                    snappingControls: false
+                },
+                container
+            });
+            if (this._attachmentHandle && this._activeWorkflowHandle) {
+                this._attachmentHandle.remove();
+                this._activeWorkflowHandle.remove();
+            }
+            this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" ||
+                this._editor.viewModel.state === "editing-attachment" ||
+                this._editor.viewModel.state === "creating-features", () => {
+                this._shouldClose = false;
+            });
+            this._activeWorkflowHandle = this.reactiveUtils.watch(() => this._editor.viewModel.activeWorkflow?.activeWorkflow, (activeWorkflow) => {
+                if (activeWorkflow?.type === "update-table-record" || activeWorkflow?.type === "create-features") {
+                    this._shouldClose = false;
+                }
+                // Handle back click and when feature is de-selected from the table
+                // this ensures that we are not shown the Editors "Select" workflow step
+                if ((!activeWorkflow?.type && !activeWorkflow?.hasPendingEdits && !this._editor.activeWorkflow) || !this._editor?.activeWorkflow?.started) {
+                    this.open = false;
+                }
+            });
+            // had issues with destroy before adding like this
+            this._editContainer.appendChild(container);
+            this.editorInitialized.emit(this._editor);
+        }
+    }
+    /**
+     * Close the edit widget
+     */
+    async _closeEdit(destroyOnClose) {
+        this._shouldClose = true;
+        if (destroyOnClose && this._editor?.activeWorkflow) {
+            if (this._editor.activeWorkflow?.activeWorkflow?.hasPendingEdits) {
+                await this._editor.activeWorkflow.reset();
+                await this._editor.cancelWorkflow();
+            }
+            this._editor.destroy();
+        }
+        else {
+            if (this.graphicIndex > -1 && this.graphics?.length > 0) {
+                this.refreshGraphics.emit(this.graphics);
+            }
+        }
+        this._shouldClose = false;
+        this.closeEdit.emit();
+    }
+    /**
+     * Start the update workflow for the editor widget
+     */
+    async _startUpdate() {
+        await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
+        this._shouldClose = true;
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    static get watchers() { return {
+        "graphics": ["graphicsWatchHandler"],
+        "locale": ["localeWatchHandler"],
+        "open": ["openWatchHandler"]
+    }; }
+};
+EditCard.style = EditCardStyle0;
+
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}";
+const InfoCardStyle0 = infoCardCss;
+
+const InfoCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.popupClosed = createEvent(this, "popupClosed", 7);
+        this.selectionChanged = createEvent(this, "selectionChanged", 7);
+        this.enableEditGeometry = false;
+        this.graphics = undefined;
+        this.isLoading = false;
+        this.isMobile = undefined;
+        this.mapView = undefined;
+        this.allowEditing = true;
+        this.highlightEnabled = true;
+        this.locale = undefined;
+        this.paginationEnabled = true;
+        this.position = 'absolute';
+        this._alertOpen = false;
+        this._count = "";
+        this._editRecordOpen = false;
+        this._mobileTitle = "";
+        this._showListView = false;
+        this._translations = undefined;
+    }
+    get el() { return getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * esri/widgets/Feature: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Feature.html
+     * used for module import
+     */
+    Features;
+    /**
+     * boolean: When false alerts will be shown to indicate that the layer must have editing enabled for edit actions
+     */
+    _editEnabled;
+    /**
+     * esri/widgets/Feature: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Feature.html
+     * used for widget instance
+     */
+    _features;
+    /**
+     * esri/widgets/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
+     */
+    _layer;
+    /**
+     * IPopupUtils: When false alerts will be shown to indicate that the layer must have editing enabled for edit actions
+     */
+    _popupUtils;
+    /**
+     * string: unique id for the features node
+     */
+    _featuresNodeId = 'features-node' + new Date().getMilliseconds().toString();
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for changes to the graphic and update the feature widget
+     */
+    async graphicsWatchHandler() {
+        await this.setGraphics();
+    }
+    /**
+     * Watch for changes to the isMobile prop then init the Features widget
+     * We need to know if the title should be displayed by the widget (non mobile)
+     * or by us (mobile)
+     */
+    async isMobileWatchHandler() {
+        await this._initFeaturesWidget();
+    }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+        if (this._features) {
+            const graphics = [...this.graphics];
+            this.graphics = [];
+            this.graphics = graphics;
+        }
+    }
+    /**
+     * Watch for changes to the mapView and re-init the Feature widget
+     */
+    async mapViewWatchHandler() {
+        return await this._initFeaturesWidget();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Get the current selected feature from the Features widget
+     *
+     * @returns Promise resolving with the current feature
+     */
+    async getSelectedFeature() {
+        return this._features.selectedFeature;
+    }
+    /**
+     * Refresh the feature info
+     * @returns Promise when complete
+     */
+    async refresh() {
+        await this.setGraphics();
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    async back() {
+        this._features.previous();
+        this._count = this._getCount();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    async next() {
+        this._features.next();
+        this._count = this._getCount();
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    async toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
+    }
+    /**
+     * update the current graphics to the features widget
+     */
+    async updateCurrentGraphic(selectedGraphic) {
+        this._features.selectedFeatureWidget.graphic = selectedGraphic;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Emitted on demand when the popup is closed
+     */
+    popupClosed;
+    /**
+     * Emitted on demand when the selected index changes
+     */
+    selectionChanged;
+    /**
+     * Respond to and close the edit record display
+     *
+     * @returns a promise when the operation has completed
+     */
+    async closeEdit() {
+        this._editRecordOpen = false;
+    }
+    /**
+     * Reset key properties when the layer selection changes
+     */
+    async layerSelectionChange() {
+        this._showListView = false;
+        if (this._features?.viewModel) {
+            this._features.viewModel.featureMenuOpen = false;
+            this._features.close();
+        }
+    }
+    /**
+     * Refresh the info-card graphics
+     */
+    async refreshGraphics(evt) {
+        this.graphics = [...evt.detail];
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._initModules();
+        await this._getTranslations();
+        this._popupUtils = new PopupUtils();
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     * @returns Promise when complete
+     */
+    async componentDidLoad() {
+        if (this.graphics?.length > 0) {
+            await this.setGraphics();
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        const loadingClass = this.isLoading ? "" : "display-none";
+        const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
+        const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+        const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
+        const nextBackDisabled = this._features?.features?.length < 2;
+        const nextBackClass = this.isMobile ? "display-none" : "";
+        const id = this._features?.selectedFeature?.getObjectId();
+        const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
+        const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
+        return (h(Host, { key: '66070d48134f89d9cf132572fe1adf790b6d3ec6' }, h("calcite-shell", { key: 'b77248dce176df940d8b0c347154b73738a5576d', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'c1638ca8320a0ae12a9ccd1fd8841efde4236ba5', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'cf5ee3be5c0ea3be36205dcf7c0747461802a5f1', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '6fbfa6947fa0fdb1b14a03217da60f07ecff2e1b', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'fdcb078c3b3f183b06dc3a48d27fee46e3a4fffa', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '7193bec80a40f353d24e5d327d99d94a2c5ff356', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '228a9691edd916a5d644cb19db24898cdf7cab3b', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '5c696df370bcf230d3fc06523ec3cb9d96f2fe2b' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'e1b829a888913af6a9d777a2df0d65571ac3bec1', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '8746737a103266efe64a8f80c2359f9e170586d5' }, h("calcite-button", { key: 'ac6fc23dc2831608cc9c86fe384c0a927cd7d7ac', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'd4a1e2753c35e97064ca66d5c30deccd532fb158', placement: "top", "reference-element": "solutions-back" }, h("span", { key: 'caae32b5e32a0d89265293beccef157d227a7600' }, this._translations.back))), h("calcite-action", { key: 'a87f344a06896ad86886815254979793b057e4cd', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '6e6f84ebedb2540edb485fa0789fe8ea67e7188f', class: "pagination-count" }, this._count)), h("div", { key: '6acf22348a508c921865bb4c7e531f9a826a8eed' }, h("calcite-button", { key: 'f1d763e1747cff7e0b6bec08ec4fade3d1582379', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: 'def93e3d1f19b4e6eb3e54c5fbd918fed118cc0c', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'cb9b90a5b3129861b7f58fd0271c6120893dfd53' }, this._translations.next))))), h("edit-card", { key: '524819a6dc64775b88b22aaf24445fd5ebdeae24', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '394c3b416a5dc94381c8b93afd3308121fbebd81', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'f4868bf3b710d91ed7e3f1e34b846bd408febac0', slot: "title" }, this._translations.editDisabled), h("div", { key: '457b7d0c76bfac52340bec73f5d1d2abbd10f25a', slot: "message" }, this._translations.enableEditing)))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Features, reactiveUtils] = await loadModules([
+            "esri/widgets/Features",
+            "esri/core/reactiveUtils"
+        ]);
+        this.Features = Features;
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Initializes the features widget if not created and updates the feature widget and other required states
+     *
+     * @protected
+     */
+    async setGraphics() {
+        if (!this._features) {
+            await this._initFeaturesWidget();
+        }
+        if (this.graphics.length > 0) {
+            this._layer = this.graphics[0]?.layer;
+            this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
+            this._features.open({
+                features: this.graphics
+            });
+        }
+        else {
+            this._features.clear();
+            this._features.close();
+        }
+        this._count = this._getCount();
+    }
+    /**
+     * Init the Feature widget so we can display the popup content
+     *
+     * @returns a promise when the operation has completed
+     *
+     * @protected
+     */
+    async _initFeaturesWidget() {
+        return this.isMobile !== undefined ? await this.mapView?.when(() => {
+            if (!this._features) {
+                this._features = new this.Features({
+                    view: this.mapView,
+                    container: this._featuresNodeId,
+                    visibleElements: {
+                        actionBar: false,
+                        closeButton: false,
+                        heading: !this.isMobile
+                    }
+                });
+                this._features.viewModel.highlightEnabled = this.highlightEnabled;
+                this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
+                    this._count = this._getCount();
+                    if (!isOpen) {
+                        this._showListView = isOpen;
+                    }
+                });
+                this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+                    if (i > -1) {
+                        this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
+                    }
+                });
+            }
+            else {
+                this._features.view = this.mapView;
+                this._features.visibleElements.actionBar = false;
+                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.heading = !this.isMobile;
+            }
+        }) : Promise.resolve();
+    }
+    /**
+     * Get the mobile header
+     *
+     * @returns the header node to display when in mobile mode
+     *
+     * @protected
+     */
+    _getHeader() {
+        return this.isMobile && !this._editRecordOpen ? (h("calcite-panel", { class: "border-width-0", slot: "header" }, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined;
+    }
+    /**
+     * Close the popup and emit the selected features
+     */
+    _closePopup() {
+        this.popupClosed.emit();
+    }
+    /**
+     * Set the alertOpen member to false when the alert is closed
+     */
+    _alertClosed() {
+        this._alertOpen = false;
+    }
+    /**
+     * Open the edit record
+     */
+    _openEditRecord() {
+        if (this._editEnabled) {
+            this._editRecordOpen = true;
+        }
+        else {
+            this._alertOpen = true;
+        }
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    _back() {
+        this._features.previous();
+        this._count = this._getCount();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    _next() {
+        this._features.next();
+        this._count = this._getCount();
+    }
+    /**
+     * Get the current index of total string
+     *
+     * @returns the index of total string
+     */
+    _getCount() {
+        const index = (this._features?.viewModel.selectedFeatureIndex + 1).toString();
+        const total = this._features?.features?.length.toString();
+        return this._translations.indexOfTotal
+            .replace("{{index}}", index)
+            .replace("{{total}}", total);
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    _toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    static get watchers() { return {
+        "graphics": ["graphicsWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
+        "locale": ["localeWatchHandler"],
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+InfoCard.style = InfoCardStyle0;
+
+export { FlowItem as calcite_flow_item, CreateFeature as create_feature, DeleteButton as delete_button, EditCard as edit_card, InfoCard as info_card };