npm - @esri/solutions-components - Versions diffs - 0.10.16 → 0.10.17 - Mend

@esri/solutions-components 0.10.16 → 0.10.17

Files changed (1988) hide show

package/dist/esm/calcite-alert_5.entry.js ADDED Viewed

@@ -0,0 +1,1874 @@
+/*!
+ * 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-b793d9aa.js';
+import { s as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted, z as setRequestedIcon, a as getElementDir } from './dom-9e8610a2.js';
+import { g as getIconScale } from './component-0f26d27a.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-4841127f.js';
+import { N as NumberStringFormat, c as connectLocalized, d as disconnectLocalized } from './locale-8a2aae09.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-00e6186d.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-d5539b3a.js';
+import { K as KindIcons } from './resources-f4406546.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-353bf495.js';
+import { S as SLOTS$2 } from './resources-2117aee0.js';
+import { l as loadModules, g as getLocaleComponentStrings } from './locale-b1d53fb1.js';
+import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils-f54edae3.js';
+import { P as PopupUtils } from './popupUtils-75294be5.js';
+import './guid-52aae62c.js';
+import './resources-29504413.js';
+import './browser-d0009bfe.js';
+import './key-a9ffa61d.js';
+import './observers-3af27a40.js';
+import './esri-loader-c6842c6b.js';
+import './_commonjsHelpers-089957fe.js';
+import './interfaces-659e3836.js';
+import './downloadUtils-ee2d6a99.js';
+import './solution-resource-966f8511.js';
+import './restHelpersGet-788d7f7b.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.1
+ */
+const DURATIONS = {
+    slow: 14000,
+    medium: 10000,
+    fast: 6000,
+};
+const SLOTS$1 = {
+    actionsEnd: "actions-end",
+    title: "title",
+    message: "message",
+    link: "link",
+};
+const CSS$1 = {
+    actionsEnd: "actions-end",
+    close: "close",
+    container: "container",
+    containerBottom: "container--bottom",
+    containerBottomEnd: "container--bottom-end",
+    containerBottomStart: "container--bottom-start",
+    containerActive: "container--active",
+    containerTop: "container--top",
+    containerTopEnd: "container--top-end",
+    containerTopStart: "container--top-start",
+    content: "content",
+    contentContainer: "content-container",
+    dismissProgress: "dismiss-progress",
+    footer: "footer",
+    icon: "icon",
+    containerEmbedded: "container--embedded",
+    queueCount: "queue-count",
+    queueCountActive: "queue-count--active",
+    textContainer: "text-container",
+    focused: "focused",
+};
+/*!
+ * 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.1
+ */
+const alertQueueTimeoutMs = 300;
+class AlertManager {
+    constructor() {
+        // --------------------------------------------------------------------------
+        //
+        //  Private Properties
+        //
+        // --------------------------------------------------------------------------
+        this.registeredElements = [];
+        this.queueTimeoutId = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    registerElement(alert) {
+        const { registeredElements } = this;
+        if (!registeredElements.includes(alert)) {
+            switch (alert.queue) {
+                case "immediate":
+                    registeredElements.unshift(alert);
+                    break;
+                case "next":
+                    registeredElements.splice(1, 0, alert);
+                    break;
+                case "last":
+                    registeredElements.push(alert);
+                    break;
+            }
+            this.updateAlerts();
+        }
+    }
+    unregisterElement(alert) {
+        const { registeredElements } = this;
+        const index = registeredElements.indexOf(alert);
+        if (index !== -1) {
+            registeredElements.splice(index, 1);
+        }
+        alert.active = false;
+        this.updateAlerts();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    updateAlerts() {
+        window.clearTimeout(this.queueTimeoutId);
+        this.queueTimeoutId = null;
+        this.registeredElements.forEach((alert, index) => {
+            alert.openAlertCount = this.registeredElements.length;
+            if (index === 0) {
+                this.queueTimeoutId = window.setTimeout(() => (alert.active = true), alertQueueTimeoutMs);
+            }
+            else {
+                alert.active = false;
+            }
+        });
+    }
+}
+const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:-moz-min-content;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:-moz-min-content;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress::after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container--active{border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container--active[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container--active[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress::after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
+const CalciteAlertStyle0 = alertCss;
+const manager = new AlertManager();
+const Alert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteAlertBeforeClose = createEvent(this, "calciteAlertBeforeClose", 6);
+        this.calciteAlertClose = createEvent(this, "calciteAlertClose", 6);
+        this.calciteAlertBeforeOpen = createEvent(this, "calciteAlertBeforeOpen", 6);
+        this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 6);
+        this.handleKeyBoardFocus = () => {
+            this.isFocused = true;
+            this.handleFocus();
+        };
+        this.handleKeyBoardBlur = () => {
+            this.isFocused = false;
+            if (!this.isHovered) {
+                this.handleBlur();
+            }
+        };
+        this.autoCloseTimeoutId = null;
+        this.totalOpenTime = 0;
+        this.totalHoverTime = 0;
+        this.openTransitionProp = "opacity";
+        this.setTransitionEl = (el) => {
+            this.transitionEl = el;
+        };
+        /** close and emit calciteInternalAlertSync event with the updated queue payload */
+        this.closeAlert = () => {
+            this.open = false;
+            this.clearAutoCloseTimeout();
+        };
+        this.actionsEndSlotChangeHandler = (event) => {
+            this.hasEndActions = slotChangeHasAssignedElement(event);
+        };
+        this.handleMouseOver = () => {
+            this.isHovered = true;
+            this.handleFocus();
+        };
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+            if (!this.isFocused) {
+                this.handleBlur();
+            }
+        };
+        this.handleFocus = () => {
+            this.clearAutoCloseTimeout();
+            this.totalOpenTime = Date.now() - this.initialOpenTime;
+            this.lastMouseOverBegin = Date.now();
+        };
+        this.handleBlur = () => {
+            const hoverDuration = Date.now() - this.lastMouseOverBegin;
+            const timeRemaining = DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;
+            this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
+            this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);
+        };
+        this.active = false;
+        this.openAlertCount = 0;
+        this.open = false;
+        this.autoClose = false;
+        this.autoCloseDuration = "medium";
+        this.embedded = false;
+        this.kind = "brand";
+        this.icon = undefined;
+        this.iconFlipRtl = false;
+        this.label = undefined;
+        this.numberingSystem = undefined;
+        this.placement = "bottom";
+        this.scale = "m";
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.queue = "last";
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.numberStringFormatter = new NumberStringFormat();
+        this.hasEndActions = false;
+        this.isFocused = false;
+    }
+    handleActiveChange() {
+        this.clearAutoCloseTimeout();
+        if (this.active && this.autoClose && !this.autoCloseTimeoutId) {
+            this.initialOpenTime = Date.now();
+            this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
+        }
+    }
+    openHandler() {
+        onToggleOpenCloseComponent(this);
+        if (this.open) {
+            manager.registerElement(this.el);
+        }
+        else {
+            manager.unregisterElement(this.el);
+        }
+    }
+    updateDuration() {
+        if (this.autoClose && this.autoCloseTimeoutId) {
+            this.clearAutoCloseTimeout();
+            this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
+        }
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    handleQueueChange() {
+        if (this.open) {
+            manager.unregisterElement(this.el);
+            manager.registerElement(this.el);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectLocalized(this);
+        connectMessages(this);
+        const open = this.open;
+        if (open) {
+            manager.registerElement(this.el);
+        }
+        this.numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            signDisplay: "always",
+        };
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+        if (this.open) {
+            onToggleOpenCloseComponent(this);
+        }
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    disconnectedCallback() {
+        manager.unregisterElement(this.el);
+        this.clearAutoCloseTimeout();
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        this.embedded = false;
+    }
+    render() {
+        const { open, autoClose, label, placement, active, openAlertCount } = this;
+        const role = autoClose ? "alert" : "alertdialog";
+        const hidden = !open;
+        const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+        const hasQueuedAlerts = openAlertCount > 1;
+        return (h(Host, { key: '925efaa1db32fd70f778106456e1dbb11d5a33b1', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { key: 'fc92bdb0f32f2e5461144fcc95d4cf77f1f1c916', class: {
+                [CSS$1.container]: true,
+                [CSS$1.containerActive]: active,
+                [`${CSS$1.container}--${placement}`]: true,
+                [CSS$1.containerEmbedded]: this.embedded,
+                [CSS$1.focused]: this.isFocused,
+            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose ? this.handleMouseLeave : null, ref: this.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), h("div", { key: '52fe536e5f4feb0714431c5a46e0a0a2dbf27110', class: CSS$1.textContainer, onFocusin: this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null }, h("slot", { key: '6037f775c962ba14084e8ec8b86c7a177fef037f', name: SLOTS$1.title }), h("slot", { key: '736344f5602889a2a4a8fc0d22963b827a41519a', name: SLOTS$1.message }), h("slot", { key: '8eea607803b78c9ff554682bb36fbea3e1693d6e', name: SLOTS$1.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && active && autoClose ? h("div", { class: CSS$1.dismissProgress }) : null)));
+    }
+    renderCloseButton() {
+        return (h("button", { "aria-label": this.messages.close, class: CSS$1.close, key: "close", onClick: this.closeAlert, onFocusin: this.autoClose ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
+    }
+    renderQueueCount() {
+        const { openAlertCount } = this;
+        const queueNumber = openAlertCount > 2 ? openAlertCount - 1 : 1;
+        const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);
+        return (h("div", { class: {
+                [CSS$1.queueCount]: true,
+                [CSS$1.queueCountActive]: openAlertCount > 1,
+            }, key: "queue-count" }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
+    }
+    renderActionsEnd() {
+        return (h("div", { class: CSS$1.actionsEnd }, h("slot", { name: SLOTS$1.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
+    }
+    renderIcon(icon) {
+        return (h("div", { class: CSS$1.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's "close" button, the first focusable item.
+     *
+      @returns {Promise<void>}
+     */
+    async setFocus() {
+        await componentFocusable(this);
+        const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
+        if (!this.closeButton && !alertLinkEl) {
+            return;
+        }
+        else if (alertLinkEl) {
+            return alertLinkEl.setFocus();
+        }
+        else if (this.closeButton) {
+            this.closeButton.focus();
+        }
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+        this.numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            signDisplay: "always",
+        };
+    }
+    numberingSystemChange() {
+        this.numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            signDisplay: "always",
+        };
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    clearAutoCloseTimeout() {
+        window.clearTimeout(this.autoCloseTimeoutId);
+        this.autoCloseTimeoutId = null;
+    }
+    onBeforeOpen() {
+        this.calciteAlertBeforeOpen.emit();
+    }
+    onOpen() {
+        this.calciteAlertOpen.emit();
+    }
+    onBeforeClose() {
+        this.calciteAlertBeforeClose.emit();
+    }
+    onClose() {
+        this.calciteAlertClose.emit();
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "active": ["handleActiveChange"],
+        "open": ["openHandler"],
+        "autoCloseDuration": ["updateDuration"],
+        "messageOverrides": ["onMessagesChange"],
+        "queue": ["handleQueueChange"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "numberingSystem": ["numberingSystemChange"]
+    }; }
+};
+Alert.style = CalciteAlertStyle0;
+/*!
+ * 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.1
+ */
+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() {
+        connectInteractive(this);
+        connectLocalized(this);
+        connectMessages(this);
+    }
+    async componentWillLoad() {
+        await setUpMessages(this);
+        setUpLoadableComponent(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        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: '166a2f53829cecc09019a7fa3fe670b5e4e42146' }, h(InteractiveContainer, { key: '53f00fb0e5ec53b8a19efde1592e1bff176302d1', disabled: disabled }, h("calcite-panel", { key: 'a24ff76af240b1403ebfa5810bc8fe0443901040', 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: '9051287e5b89eaca28b440816cbcddc03cefed73', name: SLOTS.actionBar, slot: SLOTS$2.actionBar }), h("slot", { key: '566fb396078d3eac17fbff69e0cd43fb5b8ca13e', name: SLOTS.alerts, slot: SLOTS$2.alerts }), h("slot", { key: '88ced257238e369cd99250c9d5a93fa03746fbd5', name: SLOTS.headerActionsStart, slot: SLOTS$2.headerActionsStart }), h("slot", { key: 'beab9f93af9deed383adc8250ec943b883e058b8', name: SLOTS.headerActionsEnd, slot: SLOTS$2.headerActionsEnd }), h("slot", { key: '1f1c7579d1ac1085004b08d2f57ec8b9e0641e35', name: SLOTS.headerContent, slot: SLOTS$2.headerContent }), h("slot", { key: '3696e4a7e80db48581f438336007a1b63a201040', name: SLOTS.headerMenuActions, slot: SLOTS$2.headerMenuActions }), h("slot", { key: '370e0817cbc13d7cf4c8adaccff8fe9d7c91c859', name: SLOTS.fab, slot: SLOTS$2.fab }), h("slot", { key: 'd55cc859cb1c9c6cc80a63521aad955f6e23d31c', name: SLOTS.contentTop, slot: SLOTS$2.contentTop }), h("slot", { key: '7cea1750cd59d1fdda66516c9b4c78884127dde5', name: SLOTS.contentBottom, slot: SLOTS$2.contentBottom }), h("slot", { key: 'd07ed2f97623023312cdb0a5a01b909286f34373', name: SLOTS.footerStart, slot: SLOTS$2.footerStart }), h("slot", { key: 'fdc209c1e77fd62cadaaad0ee576e71a1f0419d8', name: SLOTS.footer, slot: SLOTS$2.footer }), h("slot", { key: '5348d32cc42b7fa3b07e4b5ef711863f6ce812bc', name: SLOTS.footerEnd, slot: SLOTS$2.footerEnd }), h("slot", { key: 'bad7644787a3ad19ef40931fb38cfe9c18962b27', name: SLOTS.footerActions, slot: SLOTS$2.footerActions }), h("slot", { key: '97675398537cc86f41a219126e17bcf24cf4682b' })))));
+    }
+    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 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 = 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.searchConfiguration = undefined;
+        this.isMobile = undefined;
+        this.floorLevel = undefined;
+        this.formElements = undefined;
+        this.enableSearch = false;
+        this._editorLoading = false;
+        this._showSearchWidget = 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;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * 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)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Destroy the Editor widget instance
+     * @returns Promise that resolves when the operation is complete
+     */
+    async close() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+    }
+    /**
+     * 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.initModules();
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        await this.init();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        const showSearchWidget = this._showSearchWidget ? '' : 'display-none';
+        const loaderClass = this._editorLoading ? "" : "display-none";
+        const featureFormClass = this._editorLoading ? "display-none" : "";
+        const mobileMapClass = this.isMobile ? "show-map" : "display-none";
+        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; } })));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  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
+        }).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));
+                void this._setFloorLevel(this.floorLevel);
+                this._showSearchWidget = false;
+                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') {
+                this._mapViewContainer?.classList?.replace("hide-map", "show-map");
+                this._showSearchWidget = true;
+            }
+        });
+        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));
+    }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"],
+        "isMobile": ["isMobileHandler"],
+        "_editorLoading": ["_editorLoadingWatchHandler"]
+    }; }
+};
+CreateFeature.style = CreateFeatureStyle0;
+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.editsComplete = createEvent(this, "editsComplete", 7);
+        this.refreshGraphics = createEvent(this, "refreshGraphics", 7);
+        this.enableEditGeometry = false;
+        this.graphics = 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
+     */
+    _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);
+        }
+    }
+    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;
+    /**
+     * 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();
+            }
+            this._layerEditHandle = this._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: '702d90ff413f7559cfc85b1e8e709e1076ec00d6' }, h("div", { key: '8a2469c080aee5cc466e587ede8de7a60e6db7bb', 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: 'f9fce7512f023aed9151f8f6022202819e9378cd', class: "position-absolute" }, h("div", { key: '4f5e6afd20e6adb5f34a3940a193c0d858212d88', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '437c74efd97d1cbea536fc33fabab9b46ff2812b', 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({
+                allowedWorkflows: "update",
+                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);
+        }
+    }
+    /**
+     * 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"],
+        "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.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();
+    }
+    /**
+     * 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: '6f425d1817646bd9a9e4a600d391097677026f25' }, h("calcite-shell", { key: 'e717377ce155936033cdcc9ae21de8355cca08ca', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'b5281d2fea94193f85d24019ac02425f9fe7e09d', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '9cc87e384a838a324ebd45bd35c48ff508628eb7', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '3919d8b734caf6639d2a42eb675eecd35c5e5097', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'f07c11a195aaba15a277b9ab0ebd7d0a36d33820', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '15791bdca2014ddd1a09e4ed145b9e871a431636', 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, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '5e86460a3af8b4e24e3c64f03e83a975045ced17', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '2f0915508a261e76980f7bbd550b73dc5888ef3e' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '461230a7f8096d3f6f53b422d724a1fdb406fe92', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '7e9f6d377d776951759c0a7eac4512eda1101088' }, h("calcite-button", { key: 'a3cf2ee2e28f9d2da4a2d0c74f83cd55c3f882cb', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '6cc374cd4dc943fdf09940fc9a7d4c1e13421567', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '67caf535d71dc664c64a1d6b9f7f3512f157d143' }, this._translations.back))), h("calcite-action", { key: '90901930abe85183cd6fb8c7dd850385a6f2f8f8', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '99ee44c6f416b9315fbe157d32f2c64ef5f91ba3', class: "pagination-count" }, this._count)), h("div", { key: 'b96ee80ab7668193b7e29c635692b96d61da07ba' }, h("calcite-button", { key: 'd0257d2159d1e18ecebaad7952a76b1534164996', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '5f7476d0c42127bbf7a2533d422399a6887d308b', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'cc4d1da8990996ebea70688b9a8fa0ccaeeea4cb' }, this._translations.next))))), h("edit-card", { key: '2189a272fae0b15aaa563daa2b8ae411d8e61fb0', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'fb557a7cf23b8711aec88da6483ab385372d9db4', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'a3aa6e09d43f045d69c630d6e8b8c0c5c2eee55e', slot: "title" }, this._translations.editDisabled), h("div", { key: 'a76fd3260afcd35d42091a18690950be44f11365', 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"],
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+InfoCard.style = InfoCardStyle0;
+export { Alert as calcite_alert, FlowItem as calcite_flow_item, CreateFeature as create_feature, EditCard as edit_card, InfoCard as info_card };