@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/esm/calcite-flow_6.entry.js

@@ -1,1565 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, h, g as getElement, c as createEvent, H as Host, F as Fragment } from './index-e3f04fa1.js';
-import { c as createObserver } from './observers-fdb7a374.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-01033497.js';
-import { a as getElementDir } from './dom-d675fe65.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-2e2d102f.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-60861d67.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-5800da82.js';
-import { S as SLOTS$1 } from './resources-810e7513.js';
-import { l as loadModules, f as formatNumber, g as getLocaleComponentStrings } from './locale-0f1cdb1f.js';
-import { a as getAllLayers, g as getLayerOrTable, b as getAllTables, d as getMapLayerHash } from './mapViewUtils-e3de60cc.js';
-import './guid-f05d01d5.js';
-import './resources-1febf4c6.js';
-import './browser-7fe78178.js';
-import './key-092b6260.js';
-import './esri-loader-c6842c6b.js';
-import './_commonjsHelpers-089957fe.js';
-import './interfaces-586e863c.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS$1 = {
-    frame: "frame",
-    frameAdvancing: "frame--advancing",
-    frameRetreating: "frame--retreating",
-};
-
-const flowCss = ":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{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0px}:host ::slotted(calcite-flow-item),:host ::slotted(calcite-panel){block-size:100%}:host ::slotted(.calcite-match-height:last-child){display:flex;flex:1 1 auto;overflow:hidden}:host .frame--advancing{animation:calcite-frame-advance var(--calcite-animation-timing)}:host .frame--retreating{animation:calcite-frame-retreat var(--calcite-animation-timing)}@keyframes calcite-frame-advance{0%{--tw-bg-opacity:0.5;transform:translate3d(50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity:0.5;transform:translate3d(-50px, 0, 0)}100%{--tw-bg-opacity:1;transform:translate3d(0, 0, 0)}}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteFlowStyle0 = flowCss;
-
-const Flow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.itemMutationObserver = createObserver("mutation", () => this.updateFlowProps());
-        this.getFlowDirection = (oldFlowItemCount, newFlowItemCount) => {
-            const allowRetreatingDirection = oldFlowItemCount > 1;
-            const allowAdvancingDirection = oldFlowItemCount && newFlowItemCount > 1;
-            if (!allowAdvancingDirection && !allowRetreatingDirection) {
-                return null;
-            }
-            return newFlowItemCount < oldFlowItemCount ? "retreating" : "advancing";
-        };
-        this.updateFlowProps = () => {
-            const { customItemSelectors, el, items } = this;
-            const newItems = Array.from(el.querySelectorAll(`calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : ""}`)).filter((flowItem) => flowItem.closest("calcite-flow") === el);
-            const oldItemCount = items.length;
-            const newItemCount = newItems.length;
-            const activeItem = newItems[newItemCount - 1];
-            const previousItem = newItems[newItemCount - 2];
-            if (newItemCount && activeItem) {
-                newItems.forEach((itemNode) => {
-                    itemNode.showBackButton = itemNode === activeItem && newItemCount > 1;
-                    itemNode.hidden = itemNode !== activeItem;
-                });
-            }
-            if (previousItem) {
-                previousItem.menuOpen = false;
-            }
-            this.items = newItems;
-            if (oldItemCount !== newItemCount) {
-                const flowDirection = this.getFlowDirection(oldItemCount, newItemCount);
-                this.itemCount = newItemCount;
-                this.flowDirection = flowDirection;
-            }
-        };
-        this.customItemSelectors = undefined;
-        this.flowDirection = null;
-        this.itemCount = 0;
-        this.items = [];
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * Removes the currently active `calcite-flow-item`.
-     */
-    async back() {
-        const { items } = this;
-        const lastItem = items[items.length - 1];
-        if (!lastItem) {
-            return;
-        }
-        const beforeBack = lastItem.beforeBack
-            ? lastItem.beforeBack
-            : () => Promise.resolve();
-        try {
-            await beforeBack.call(lastItem);
-        }
-        catch (_error) {
-            // back prevented
-            return;
-        }
-        lastItem.remove();
-        return lastItem;
-    }
-    /**
-     * Sets focus on the component.
-     */
-    async setFocus() {
-        await componentFocusable(this);
-        const { items } = this;
-        const activeItem = items[items.length - 1];
-        return activeItem === null || activeItem === void 0 ? void 0 : activeItem.setFocus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        (_a = this.itemMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-        this.updateFlowProps();
-    }
-    async componentWillLoad() {
-        setUpLoadableComponent(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.itemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    async handleItemBackClick(event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        await this.back();
-        return this.setFocus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        const { flowDirection } = this;
-        const frameDirectionClasses = {
-            [CSS$1.frame]: true,
-            [CSS$1.frameAdvancing]: flowDirection === "advancing",
-            [CSS$1.frameRetreating]: flowDirection === "retreating",
-        };
-        return (h("div", { key: '9d405841d7a1ee2d7a5da28c02ef8d5bf08dd9f5', class: frameDirectionClasses }, h("slot", { key: 'a02231a5002f8b19542e03529aad12771787b26f' })));
-    }
-    get el() { return getElement(this); }
-};
-Flow.style = CalciteFlowStyle0;
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    backButton: "back-button",
-};
-const ICONS = {
-    backLeft: "chevron-left",
-    backRight: "chevron-right",
-};
-const SLOTS = {
-    actionBar: "action-bar",
-    headerActionsStart: "header-actions-start",
-    headerActionsEnd: "header-actions-end",
-    headerMenuActions: "header-menu-actions",
-    headerContent: "header-content",
-    fab: "fab",
-    footer: "footer",
-    footerActions: "footer-actions",
-};
-
-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.handlePanelScroll = (event) => {
-            event.stopPropagation();
-            this.calciteFlowItemScroll.emit();
-        };
-        this.handlePanelClose = (event) => {
-            event.stopPropagation();
-            this.calciteFlowItemClose.emit();
-        };
-        this.handlePanelToggle = (event) => {
-            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.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.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) {
-        var _a;
-        await ((_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.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, scale: "s", slot: "header-actions-start", text: label, title: label,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setBackRef })) : null;
-    }
-    render() {
-        const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, } = this;
-        return (h(Host, { key: 'ab926d381ff2493f3fd49a5c8724260211d69ca9' }, h(InteractiveContainer, { key: '6799b56c2116de5e08739ddc2ec1557bd291f3f8', disabled: disabled }, h("calcite-panel", { key: '2e438b8abf573eabaaa2e966dcca5c4843a53cba', 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.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setContainerRef }, this.renderBackButton(), h("slot", { key: '39b650abdf64df16f535d45f64dc1b367acfcc9e', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: '5b36c56874ad762f842c81f9ffbdcdbd3168cf75', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '2dbf552425d238a4479a12bbec79571d11124577', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: '2dd0a30236844c91c2cf10a9fbacbe9935ea234c', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '1b025f746e2e7d58fb057aab36b24e46872e607e', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '5dd5986e93dcc11e0b0fade6822814b160053c70', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'e7cf2702cd2e423d07a8a8ac57c142bc4738b3ef', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: 'e2561d89aaebe4fbb82b1f546551d05ebb23b0bf', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: 'fb6bf40456038f84486b2858765bb9d147800e84' })))));
-    }
-    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__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}";
-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);
-        /**
-         * boolean: Flag to maintain form submission using submit button
-         */
-        this._isSubmitBtnClicked = false;
-        this.mapView = undefined;
-        this.selectedLayerId = undefined;
-        this.customizeSubmit = false;
-        this.searchConfiguration = undefined;
-        this._editorLoading = false;
-        this._showSearchWidget = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Called each time the mapView prop is changed.
-     */
-    async mapViewWatchHandler() {
-        await this.mapView.when(async () => {
-            await this.init();
-        });
-    }
-    /**
-     * When _editorLoading is true the container node will be hidden while starting the create workflow
-     */
-    async _editorLoadingWatchHandler(v) {
-        var _a, _b;
-        if (v) {
-            (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
-            await this.startCreate();
-            (_b = this._container) === null || _b === void 0 ? void 0 : _b.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();
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  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" : "";
-        return (h(Fragment, { key: 'a4ccd565a52a4cde4e76439629425f19bd4c222e' }, h("calcite-loader", { key: '30e8a3753985a734dd7cba461f26691b51f49ab9', class: loaderClass, label: "", scale: "s" }), h("div", { key: '0845f1fa85a21b578fd18200b43d4a77c34e6808', class: featureFormClass, id: "feature-form" }), h("div", { key: 'af74b6337f5a0dcfdbd552145c88eae5282a3307', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (protected)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Init Editor widget and Search widget
-     */
-    async init() {
-        if (this.mapView && this.selectedLayerId) {
-            await this.createEditorWidget();
-            await this.createSearchWidget();
-        }
-    }
-    /**
-     * Load esri javascript api modules
-     * @returns Promise resolving when function is done
-     * @protected
-     */
-    async initModules() {
-        const [Editor, reactiveUtils, Search] = await loadModules([
-            "esri/widgets/Editor",
-            "esri/core/reactiveUtils",
-            "esri/widgets/Search"
-        ]);
-        this.Editor = Editor;
-        this.reactiveUtils = reactiveUtils;
-        this.Search = Search;
-    }
-    /**
-     * Display editor widget to create the new feature
-     * @protected
-     */
-    async createEditorWidget() {
-        var _a;
-        if (this._editor) {
-            this._editor.destroy();
-        }
-        const layerInfos = [];
-        this._container = document.createElement("div");
-        (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
-        const allMapLayers = await getAllLayers(this.mapView);
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
-            layerInfos.push({
-                layer: eachLayer,
-                enabled: (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.id) === this.selectedLayerId,
-                addEnabled: true, // default is true, set to false to disable the ability to add a new feature
-                updateEnabled: false, // default is true, set to false to disable the ability to edit an existing feature
-                deleteEnabled: false // default is true, set to false to disable the ability to delete features
-            });
-        });
-        this._editor = new this.Editor({
-            allowedWorkflows: "create-features",
-            view: this.mapView,
-            layerInfos: layerInfos,
-            visibleElements: {
-                snappingControls: false
-            },
-            container: this._container
-        });
-        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.progressStatus.emit(0.5);
-                this._editorLoading = true;
-            }
-        });
-        this._editor.viewModel.addHandles(handle);
-        //Add handle to watch featureFormViewModel ready state
-        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
-            if (state === 'ready') {
-                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._editorLoading = true;
-                this._showSearchWidget = true;
-            }
-        });
-        this._editor.viewModel.addHandles(createFeatureHandle);
-    }
-    /**
-     * Start creating the feature
-     * @protected
-     */
-    async startCreate() {
-        return new Promise((resolve, reject) => {
-            var _a;
-            if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.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(() => {
-                        //on form submit
-                        this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
-                        //hides the header and footer elements in editor widget
-                        this.hideEditorsElements().then(() => {
-                            resolve({});
-                        }, e => reject(e));
-                    }, 700);
-                });
-                //if only one feature template then directly start geometry creation for that
-                //else allow feature template selection to user
-                if (items.length === 1) {
-                    this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
-                }
-                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.mapView,
-        };
-        if (this.searchConfiguration) {
-            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
-            searchOptions = Object.assign({}, searchConfiguration);
-        }
-        this._search = new this.Search(searchOptions);
-        this._search.container = 'search-widget-ref';
-        this._search.popupEnabled = false;
-        this._search.resultGraphicEnabled = false;
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        let pointGeometry = null;
-        // on search get the geometry of the searched location and pass it in sketchViewModel and go to featureForm page
-        this._search.on('search-complete', (e) => {
-            var _a;
-            void this.mapView.goTo(e.results[0].results[0].extent);
-            if (layer.geometryType === 'point') {
-                pointGeometry = (_a = e.results[0].results[0]) === null || _a === void 0 ? void 0 : _a.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 === null || sources === void 0 ? void 0 : sources.length) > 0) {
-            searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
-            sources.forEach((source) => {
-                var _a, _b;
-                const isLayerSource = source.hasOwnProperty("layer");
-                if (isLayerSource) {
-                    const layerSource = source;
-                    const layerId = (_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id;
-                    const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
-                    const layerUrl = (_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url;
-                    if (layerFromMap) {
-                        layerSource.layer = layerFromMap;
-                    }
-                    else if (layerUrl) {
-                        layerSource.layer = new this.FeatureLayer(layerUrl);
-                    }
-                }
-            });
-            sources === null || sources === void 0 ? void 0 : sources.forEach((source) => {
-                const isLocatorSource = source.hasOwnProperty("locator");
-                if (isLocatorSource) {
-                    const locatorSource = source;
-                    if ((locatorSource === null || locatorSource === void 0 ? void 0 : 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 = Object.assign(Object.assign({}, searchConfiguration), { includeDefaultSources: true });
-        }
-        return searchConfiguration;
-    }
-    /**
-     * Hides the elements of editor widget
-     * @protected
-     */
-    async hideEditorsElements() {
-        var _a, _b;
-        if (!this.customizeSubmit) {
-            return;
-        }
-        await this.timeout(700);
-        //hides the header and footer on the featureForm
-        (_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.forEach((flowItem) => {
-            var _a, _b, _c, _d, _e;
-            const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
-            //hide the header
-            (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
-            //hide the footer
-            (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.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) {
-        var _a;
-        //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 ((_a = this._editor.viewModel.failures) === null || _a === void 0 ? void 0 : _a.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));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"],
-        "_editorLoading": ["_editorLoadingWatchHandler"]
-    }; }
-};
-CreateFeature.style = CreateFeatureStyle0;
-
-const createRelatedFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.display-none{display:none !important}";
-const CreateRelatedFeatureStyle0 = createRelatedFeatureCss;
-
-const CreateRelatedFeature = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.success = createEvent(this, "success", 7);
-        this.fail = createEvent(this, "fail", 7);
-        this.isActionPending = createEvent(this, "isActionPending", 7);
-        this.formReady = createEvent(this, "formReady", 7);
-        /**
-         * boolean: Flag to maintain form submission using submit button
-         */
-        this._isSubmitBtnClicked = false;
-        this.mapView = undefined;
-        this.table = undefined;
-        this.selectedFeature = undefined;
-        this.customizeSubmit = false;
-        this._editorLoading = false;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
-    /**
-    * Called each time the mapView prop is changed.
-    */
-    async mapViewWatchHandler() {
-        await this.mapView.when(async () => {
-            await this.init();
-        });
-    }
-    /**
-     * When _editorLoading is true the container node will be hidden while starting the create workflow
-     */
-    async _editorLoadingWatchHandler(v) {
-        var _a, _b;
-        if (v) {
-            (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
-            await this.startCreate();
-            (_b = this._container) === null || _b === void 0 ? void 0 : _b.classList.remove("display-none");
-            this._editorLoading = false;
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Destroy the Editor widget instance
-     */
-    async close() {
-        if (this._editor) {
-            this._editor.destroy();
-        }
-    }
-    /**
-     * Submit the comment
-     */
-    async submit() {
-        if (this._editor) {
-            this._isSubmitBtnClicked = true;
-            this._editor.viewModel.featureFormViewModel.submit();
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (lifecycle)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * StencilJS: Called once just after the component is first connected to the DOM.
-     * @returns Promise when complete
-     */
-    async componentWillLoad() {
-        await this.initModules();
-    }
-    /**
-     * Init Editor widget and starts the create workflow
-     */
-    async init() {
-        if (this.mapView) {
-            await this.createEditorWidget();
-        }
-    }
-    /**
-     * Load esri javascript api modules
-     * @returns Promise resolving when function is done
-     * @protected
-     */
-    async initModules() {
-        const [Editor, reactiveUtils] = await loadModules([
-            "esri/widgets/Editor",
-            "esri/core/reactiveUtils"
-        ]);
-        this.Editor = Editor;
-        this.reactiveUtils = reactiveUtils;
-    }
-    render() {
-        const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h("calcite-loader", { key: '2ff33cad94685d22be10389c8c188add0e1992b7', class: loaderClass, label: "", scale: "s" }));
-    }
-    /**
-     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
-     */
-    async componentDidLoad() {
-        await this.init();
-    }
-    /**
-     * Display editor widget to create the new feature
-     * @protected
-     */
-    async createEditorWidget() {
-        var _a;
-        if (this._editor) {
-            this._editor.destroy();
-        }
-        this._container = document.createElement("div");
-        (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
-        this._editor = new this.Editor({
-            view: this.mapView,
-            visibleElements: {
-                snappingControls: false
-            },
-            container: this._container
-        });
-        this.el.appendChild(this._container);
-        //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._editorLoading = true;
-            }
-        });
-        this._editor.viewModel.addHandles(handle);
-        // 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.isActionPending.emit(true);
-            }
-            else {
-                if (this._addingAttachment) {
-                    this.isActionPending.emit(false);
-                    this._addingAttachment = false;
-                }
-            }
-        });
-        this._editor.viewModel.addHandles(attachmentHandle);
-        //Add handle to watch featureFormViewModel ready state
-        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
-            if (state === 'ready') {
-                this.formReady.emit();
-            }
-        });
-        this._editor.viewModel.addHandles(formHandle);
-    }
-    /**
-     * Start creating the feature feature form
-     * @protected
-     */
-    async startCreate() {
-        const parentLayer = this.selectedFeature.layer;
-        const childTable = this.table;
-        const parentRelationship = parentLayer.relationships[0];
-        const childRelationship = childTable.relationships.find((rel) => parentLayer.layerId === rel.relatedTableId);
-        const queryResult = await parentLayer.queryFeatures({
-            objectIds: [this.selectedFeature.getObjectId()],
-            outFields: [parentLayer.objectIdField, parentRelationship.keyField],
-        });
-        const parentFeature = queryResult.features[0];
-        const template = childTable.templates[0];
-        const attributeOverrides = this.makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship);
-        const creationInfo = {
-            attributeOverrides,
-            layer: childTable,
-            template,
-        };
-        await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
-        //hides the header and footer elements in editor widget
-        await this.hideEditorsElements();
-        this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
-    }
-    /**
-     * Hides the elements of editor widget
-     * @protected
-     */
-    async hideEditorsElements() {
-        var _a, _b;
-        if (!this.customizeSubmit) {
-            return;
-        }
-        await this.timeout(700);
-        //hides the header and footer on the featureForm
-        (_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.forEach((flowItem) => {
-            var _a, _b, _c, _d, _e;
-            const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
-            //hide the header
-            (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
-            //hide the footer
-            (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
-        });
-    }
-    /**
-     * Makes attributes for related feature
-     * @param parentFeature Parent feature
-     * @param parentRelationship Parent relationship
-     * @param childRelationship Child relationship
-     * @returns Attributes for related feature
-     * @protected
-     */
-    makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
-        const parentKeyField = parentRelationship.keyField;
-        let parentKeyValue;
-        if (parentFeature.attributes.hasOwnProperty(parentKeyField)) {
-            parentKeyValue = parentFeature.getAttribute(parentKeyField);
-        }
-        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toLowerCase())) {
-            parentKeyValue = parentFeature.getAttribute(parentKeyField.toLowerCase());
-        }
-        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toUpperCase())) {
-            parentKeyValue = parentFeature.getAttribute(parentKeyField.toUpperCase());
-        }
-        let childKeyField = childRelationship.keyField;
-        // get the field from table which name is same as childKeyField and use that field name as childKeyField
-        const field = this.table.fields.find((field) => field.name.toLocaleLowerCase() === childKeyField.toLocaleLowerCase());
-        childKeyField = field.name;
-        const childAttributes = {
-            [childKeyField]: parentKeyValue,
-        };
-        return childAttributes;
-    }
-    /**
-     * On creation of feature emit the event that the feature is created
-     * @param evt feature submit event
-     * @protected
-     */
-    async submitted(evt) {
-        var _a;
-        //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 ((_a = this._editor.viewModel.failures) === null || _a === void 0 ? void 0 : _a.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));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"],
-        "_editorLoading": ["_editorLoadingWatchHandler"]
-    }; }
-};
-CreateRelatedFeature.style = CreateRelatedFeatureStyle0;
-
-const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;color:var(--calcite-color-text-1) !important;background-color:var(--calcite-color-foreground-1) !important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:10px;font-size:var(--calcite-font-size--1);align-items:center;padding:7px 0.75rem}";
-const FeatureDetailsStyle0 = featureDetailsCss;
-
-const FeatureDetails = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.loadingStatus = createEvent(this, "loadingStatus", 7);
-        this.commentSelect = createEvent(this, "commentSelect", 7);
-        this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
-        /**
-         * string[]: Valid field types for like and dislike
-         */
-        this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
-        this.mapView = undefined;
-        this.graphics = undefined;
-        this.reportingOptions = undefined;
-        this.layerItemsHash = undefined;
-        this._likeFieldAvailable = false;
-        this._likeCount = 0;
-        this._disLikeCount = 0;
-        this._dislikeFieldAvailable = false;
-        this._commentsAvailable = false;
-        this._isLikeBtnClicked = false;
-        this._isDislikeBtnClicked = false;
-        this._relatedFeaturesOIDs = undefined;
-        this._updating = false;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Called each time the graphics prop is changed
-     */
-    async graphicsWatchHandler() {
-        await this.getCompleteGraphic(this.graphics[0]);
-        this.checkLikeDislikeFields();
-        await this.processComments();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Refresh the features comments which will fetch like, dislike and update the component
-     * @returns Promise that resolves when the operation is complete
-     */
-    async refresh(graphic) {
-        await this.getCompleteGraphic(graphic);
-        await this.processComments();
-        if (this.isLikeDislikeConfigured(graphic.layer)) {
-            // in case of multiple features selected fetch complete feature and update like dislike for current feature
-            if (graphic && this.graphics.length > 1) {
-                this.checkLikeDislikeFields();
-            }
-        }
-        else {
-            this._likeFieldAvailable = false;
-            this._dislikeFieldAvailable = false;
-        }
-    }
-    /**
-     * Go to the previous feature in the features widget
-     */
-    async back() {
-        void this._infoCard.back();
-    }
-    /**
-     * Go to the next feature in the features widget
-     */
-    async next() {
-        void this._infoCard.next();
-    }
-    /**
-     * Toggle the visibility of the features list view
-     */
-    async toggleListView() {
-        void this._infoCard.toggleListView();
-    }
-    /**
-     * StencilJS: Called once just after the component is first connected to the DOM.
-     *
-     * @returns Promise when complete
-     */
-    async componentWillLoad() {
-        await this._initModules();
-        //Apply query to get complete graphic with complete attributes
-        await this.getCompleteGraphic(this.graphics[0]);
-        this.checkLikeDislikeFields();
-        await this.processComments();
-    }
-    render() {
-        var _a, _b, _c, _d, _e;
-        //When related features found show comments list of only those features else comments list will be empty
-        const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: '7cb798c5d9f580ce030389878aad8d398d075845', "full-height": true }, h("info-card", { key: '329545ca1cbc7cf3e09d450550b756d9be30f904', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '5393e262280ce02b3e39261bc9961f0616d7dc34', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '6c1bd15b82c66ba01549c597b252507e8b9393f2', class: "comment-btn" }, h("span", { key: '16144444fc4ae5d146cb13375cb4e91ea333fe29' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: 'c0336a32f294f8a2aee7322307c7c9d742da3573', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '547be0963b41e13135c60085bb7b590de9a3ae69', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '8feca89e228111cf342057a0c1f6731d2d3ded93', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: 'e6337795da46159973f330ad329a52c56c65dc9d', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
-    }
-    /**
-     * Load esri javascript api modules
-     *
-     * @returns Promise resolving when function is done
-     *
-     * @protected
-     */
-    async _initModules() {
-        const [RelationshipQuery, Graphic] = await loadModules([
-            "esri/rest/support/RelationshipQuery",
-            "esri/Graphic"
-        ]);
-        this.RelationshipQuery = RelationshipQuery;
-        this.Graphic = Graphic;
-    }
-    /**
-     * Get complete graphic with complete attributes
-     * @param graphic selected feature graphic
-     * @protected
-     */
-    async getCompleteGraphic(graphic) {
-        const layer = graphic.layer;
-        const query = layer.createQuery();
-        query.objectIds = [graphic.getObjectId()];
-        const completeGraphic = await layer.queryFeatures(query);
-        this._selectedGraphic = completeGraphic.features[0];
-    }
-    /**
-     * Process the comments functionality.
-     * If comments are configured, fetches the related comments ans creates the input for comments list
-     * @protected
-     */
-    async processComments() {
-        var _a, _b;
-        const selectedLayer = this._selectedGraphic.layer;
-        const commentsConfigured = this.reportingOptions && this.reportingOptions[selectedLayer.id] &&
-            this.reportingOptions[selectedLayer.id].comment && ((_a = selectedLayer.relationships) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        if (commentsConfigured) {
-            //Get comments table id from map
-            const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
-            const allTables = await getAllTables(this.mapView);
-            const allRelatedTables = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
-            const relatedTable = (allRelatedTables === null || allRelatedTables === void 0 ? void 0 : allRelatedTables.length) > 0 ? allRelatedTables[0] : null;
-            this.relatedTableId = (_b = relatedTable === null || relatedTable === void 0 ? void 0 : relatedTable.id) !== null && _b !== void 0 ? _b : '';
-            //**Get the related records for the current selected feature**
-            if (this.relatedTableId) {
-                //current selected feature's objectId
-                const objectId = this._selectedGraphic.attributes[selectedLayer.objectIdField];
-                //create relationship query to get all the related records with the current selected feature
-                const relationshipQuery = new this.RelationshipQuery({
-                    objectIds: [objectId],
-                    outFields: ['*'],
-                    relationshipId: selectedLayer.relationships[0].id
-                });
-                const result = await selectedLayer.queryRelatedFeatures(relationshipQuery).catch((e) => {
-                    console.error(e);
-                });
-                const relatedOIDs = [];
-                if (result[objectId]) {
-                    result[objectId].features.forEach((feature) => {
-                        relatedOIDs.push(feature.attributes[relatedTable.objectIdField]);
-                    });
-                }
-                // Store the objectid's of the related features, this will be used to show the comments and its count
-                this._relatedFeaturesOIDs = relatedOIDs;
-                //Set comments available or not
-                this._commentsAvailable = true;
-            }
-            else {
-                this._relatedFeaturesOIDs = [];
-                this._commentsAvailable = false;
-            }
-        }
-        else {
-            this._relatedFeaturesOIDs = [];
-            this._commentsAvailable = false;
-            this.relatedTableId = '';
-        }
-    }
-    /**
-     * Checks if the layers is configured for like dislike or not
-     * @param selectedLayer Feature layer
-     * @returns boolean
-     * @protected
-     */
-    isLikeDislikeConfigured(selectedLayer) {
-        let likeFieldAvailable = false;
-        let dislikeFieldAvailable = false;
-        // check if reporting options are configured for the current selected feature's layer
-        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
-            //return false if both like and dislike are disabled for the layer
-            if (!this.reportingOptions[selectedLayer.id].like && !this.reportingOptions[selectedLayer.id].dislike) {
-                return false;
-            }
-            const likeField = this.reportingOptions[selectedLayer.id].likeField;
-            const dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
-            //if both fields are not configured return false
-            if (!likeField && !dislikeField) {
-                return false;
-            }
-            //Check if selected layer have the configured like and dislike field and it is of integer types
-            selectedLayer.fields.forEach((eachField) => {
-                if (this._validFieldTypes.indexOf(eachField.type) > -1 && this.layerItemsHash[selectedLayer.id].supportsUpdate) {
-                    if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
-                        likeFieldAvailable = true;
-                    }
-                    else if (eachField.name === dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
-                        dislikeFieldAvailable = true;
-                    }
-                }
-            });
-        }
-        return likeFieldAvailable || dislikeFieldAvailable;
-    }
-    /**
-     * Check if configured like or dislike fields are available in the selected layer
-     * @protected
-     */
-    checkLikeDislikeFields() {
-        this._likeFieldAvailable = false;
-        this._dislikeFieldAvailable = false;
-        this._isLikeBtnClicked = false;
-        this._isDislikeBtnClicked = false;
-        this._likeCount = 0;
-        this._disLikeCount = 0;
-        const selectedLayer = this._selectedGraphic.layer;
-        // check if reporting options are configured for the current selected feature's layer
-        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
-            this._likeField = this.reportingOptions[selectedLayer.id].likeField;
-            this._dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
-            //if both fields are not found return
-            if (!this._likeField && !this._dislikeField) {
-                return;
-            }
-            //Check if selected layer have the configured like and dislike fields
-            //also, get the current value for like and dislike field from the attributes
-            selectedLayer.fields.forEach((eachField) => {
-                if (this._validFieldTypes.indexOf(eachField.type) > -1 && this.layerItemsHash[selectedLayer.id].supportsUpdate) {
-                    if (eachField.name === this._likeField && this.reportingOptions[selectedLayer.id].like) {
-                        this._likeFieldAvailable = true;
-                        this._likeCount = this._selectedGraphic.attributes[eachField.name];
-                    }
-                    else if (eachField.name === this._dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
-                        this._dislikeFieldAvailable = true;
-                        this._disLikeCount = this._selectedGraphic.attributes[eachField.name];
-                    }
-                }
-            });
-            this.getFromLocalStorage();
-        }
-    }
-    /**
-     * On like button click highlight the like button and update the feature
-     * @protected
-     */
-    onLikeButtonClick() {
-        if (this._isDislikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
-            this.onDislikeButtonClick();
-        }
-        this._isLikeBtnClicked = !this._isLikeBtnClicked;
-        if (this._isLikeBtnClicked) {
-            this._likeCount++;
-        }
-        else {
-            this._likeCount--;
-        }
-        void this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
-    }
-    /**
-     * On dislike button click highlight the dislike button and update the feature
-     * @protected
-     */
-    onDislikeButtonClick() {
-        if (this._isLikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].like) {
-            this.onLikeButtonClick();
-        }
-        this._isDislikeBtnClicked = !this._isDislikeBtnClicked;
-        if (this._isDislikeBtnClicked) {
-            this._disLikeCount++;
-        }
-        else {
-            this._disLikeCount--;
-        }
-        void this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
-    }
-    /**
-     * Update the feature if user click on like or dislike button
-     * @param fieldName field name of the feature for like or dislike attribute
-     * @param buttonClicked is like or dislike button clicked
-     * @protected
-     */
-    async updateFeaturesLikeDislikeField(fieldName, buttonClicked) {
-        const attributesToUpdate = {};
-        const selectedLayer = this._selectedGraphic.layer;
-        this._updating = true;
-        //Increment the value if button is clicked or else decrement it
-        const selectFeatureAttr = this._selectedGraphic;
-        selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) + (buttonClicked ? 1 : -1);
-        //use the oid and like/dislike field value to update
-        attributesToUpdate[selectedLayer.objectIdField] = selectFeatureAttr.attributes[selectedLayer.objectIdField];
-        attributesToUpdate[fieldName] = selectFeatureAttr.attributes[fieldName];
-        const newGraphicInstance = new this.Graphic();
-        newGraphicInstance.attributes = attributesToUpdate;
-        // Update the feature attribute in the feature layer
-        const param = { updateFeatures: [newGraphicInstance] };
-        await selectedLayer.applyEdits(param).then(() => {
-            this._selectedGraphic = selectFeatureAttr;
-            //store the like dislike value for the current selected graphic in local storage
-            this.setInLocalStorage();
-            this._updating = false;
-        }, (err) => {
-            this._updating = false;
-            console.log(err);
-        });
-    }
-    /**
-     * Gets the like/dislike information form local storage and updates the like and dislike button states
-     * @protected
-     */
-    getFromLocalStorage() {
-        const uniqueLayerId = this._selectedGraphic.layer.id;
-        //get the data from local storage and check current feature is liked or disliked
-        const localStorageUser = localStorage[uniqueLayerId];
-        if (localStorageUser) {
-            const parseArr = JSON.parse(localStorageUser);
-            const res = parseArr.filter((arr) => arr.id === this._selectedGraphic.getObjectId());
-            if (res.length > 0) {
-                this._isLikeBtnClicked = res[0].like;
-                this._isDislikeBtnClicked = res[0].dislike;
-            }
-        }
-    }
-    /**
-     * Sets the like/dislike information for the current selected graphic in local storage
-     * @protected
-     */
-    setInLocalStorage() {
-        const uniqueLayerId = this._selectedGraphic.layer.id;
-        const localStorageInfo = localStorage[uniqueLayerId];
-        let information = [];
-        //if information for the current layer found in local storage update it
-        //else add new information for the current layer in the local storage
-        if (localStorageInfo) {
-            information = JSON.parse(localStorageInfo);
-            const index = information.findIndex((arr) => arr.id === this._selectedGraphic.getObjectId());
-            //if information for current objectid found delete it, so that we always have info for each oid in a layer only once
-            if (index >= 0) {
-                information.splice(index, 1);
-            }
-        }
-        //add the information for current selected graphic
-        information.push({
-            id: this._selectedGraphic.getObjectId(),
-            like: this._isLikeBtnClicked && this._likeCount !== 0,
-            dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
-        });
-        localStorage.setItem(uniqueLayerId, JSON.stringify(information));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "graphics": ["graphicsWatchHandler"]
-    }; }
-};
-FeatureDetails.style = FeatureDetailsStyle0;
-
-const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}.feature-count{padding-right:12px}";
-const LayerListStyle0 = layerListCss;
-
-const LayerList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.layerSelect = createEvent(this, "layerSelect", 7);
-        this.layersListLoaded = createEvent(this, "layersListLoaded", 7);
-        this.mapView = undefined;
-        this.layers = undefined;
-        this.showFeatureCount = true;
-        this.showNextIcon = false;
-        this._noLayersToDisplay = false;
-        this._mapLayerIds = [];
-        this._isLoading = false;
-        this._translations = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Refresh the layer list which will fetch the latest layer count and update the list
-     * @returns Promise that resolves when the operation is complete
-     */
-    async refresh() {
-        await this.setLayers();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (lifecycle)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * StencilJS: Called once just after the component is first connected to the DOM.
-     * @returns Promise when complete
-     */
-    async componentWillLoad() {
-        await this._getTranslations();
-        this._isLoading = true;
-    }
-    /**
-     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
-     */
-    async componentDidLoad() {
-        await this.setLayers();
-        this._isLoading = false;
-    }
-    /**
-     * Renders the component.
-     */
-    render() {
-        return (h(Fragment, { key: '9366302a704c1dbdd7a65aef5c43d0ad84a44b23' }, this._isLoading && h("calcite-loader", { key: '69974a23fd42bc37ef13816efbe6d06e28cb2749', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: 'a93abb55b4db09727b3634cb1935e482c377d662', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'b9046685353b8894e6c6094cff47fab7a8e07ffa', slot: "title" }, this._translations.error), h("div", { key: '90a052e1d80779a09a32fdd35563a1ce21d582e0', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '709c1b8edd5710a2476ecef638199c2f929b4165', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (protected)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Fetch the ids of the layers from the map
-     * @returns Promise when the operation has completed
-     * @protected
-     */
-    async setLayers() {
-        if (this.mapView) {
-            await this.initLayerHash();
-        }
-    }
-    /**
-     * Create a layer hash for layer name display
-     * @returns Promise when the operation has completed
-     * @protected
-     */
-    async initLayerHash() {
-        const def = [];
-        this._layerItemsHash = await getMapLayerHash(this.mapView, true);
-        const allMapLayers = await getAllLayers(this.mapView);
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
-            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature") {
-                if (this.showFeatureCount) {
-                    const q = eachLayer.createQuery();
-                    const result = eachLayer.queryFeatureCount(q);
-                    def.push(result);
-                    void result.then(async (resCount) => {
-                        const formattedCount = !isNaN(resCount) ? await formatNumber(resCount, {
-                            places: 0,
-                            api: 4,
-                            type: "decimal"
-                        }) : "";
-                        this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
-                    });
-                }
-            }
-        });
-        await Promise.all(def).then(() => {
-            const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
-            this._mapLayerIds = editableLayerIds.reverse();
-            this.handleNoLayersToDisplay();
-        }, () => {
-            this._mapLayerIds = [];
-            this.handleNoLayersToDisplay();
-        });
-    }
-    /**
-     * Set no layers to display state and emit event
-     */
-    handleNoLayersToDisplay() {
-        this._noLayersToDisplay = !(this._mapLayerIds.length > 0);
-        this.layersListLoaded.emit(this._mapLayerIds);
-    }
-    /**
-     * Returns the ids of configured layers that needs to be shown in the list
-     * @param hash each layer item details
-     * @returns array of layer ids
-     */
-    getLayersToBeShownInList(hash) {
-        var _a;
-        const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
-        return Object.keys(hash).reduce((prev, cur) => {
-            if (configuredLayers.indexOf(cur) > -1) {
-                prev.push(cur);
-            }
-            return prev;
-        }, []);
-    }
-    /**
-     * Render feature layer list
-     * @returns layer list
-     * @protected
-     */
-    renderLayerList() {
-        return this._mapLayerIds.length > 0 && this._mapLayerIds.reduce((prev, layerId) => {
-            if (this._layerItemsHash[layerId]) {
-                prev.push(this.getLayerListItem(layerId));
-            }
-            return prev;
-        }, []);
-    }
-    /**
-     * Get each item
-     * @param layerId Layer id
-     * @returns individual item
-     * @protected
-     */
-    getLayerListItem(layerId) {
-        const layerName = this._layerItemsHash[layerId].name;
-        const featureCount = this._layerItemsHash[layerId].formattedFeatureCount;
-        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.onLayerItemSelected(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), this.showFeatureCount && featureCount !== undefined && featureCount !== "" && h("div", { class: !this.showNextIcon ? "feature-count" : "", slot: "content-end" }, "(" + featureCount + ")"), this.showNextIcon && h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
-    }
-    /**On click of layer list item emit the event along with the selected layerId and layerName
-     * @param layerId Layer id
-     * @protected
-     */
-    onLayerItemSelected(layerId) {
-        this.layerSelect.emit({ layerId, layerName: this._layerItemsHash[layerId].name });
-    }
-    /**
-     * Fetches the component's translations
-     * @returns Promise when complete
-     * @protected
-     */
-    async _getTranslations() {
-        const messages = await getLocaleComponentStrings(this.el);
-        this._translations = messages[0];
-    }
-    get el() { return getElement(this); }
-};
-LayerList.style = LayerListStyle0;
-
-export { Flow as calcite_flow, FlowItem as calcite_flow_item, CreateFeature as create_feature, CreateRelatedFeature as create_related_feature, FeatureDetails as feature_details, LayerList as layer_list };