@esri/solutions-components 0.8.5 → 0.8.6-6.2

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

@@ -0,0 +1,1582 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-696e53e6.js');
+const observers = require('./observers-a2648fc8.js');
+const loadable = require('./loadable-53f1d561.js');
+const dom = require('./dom-1c78fa73.js');
+const interactive = require('./interactive-34bc91a0.js');
+const locale = require('./locale-73a540a5.js');
+const t9n = require('./t9n-d347df79.js');
+const resources = require('./resources-cb14bafc.js');
+const locale$1 = require('./locale-0998a9f9.js');
+const mapViewUtils = require('./mapViewUtils-78b14528.js');
+require('./guid-a7528dfa.js');
+require('./resources-1c0e54c1.js');
+require('./browser-6137dfdf.js');
+require('./key-7ed07912.js');
+require('./esri-loader-08dc41bd.js');
+require('./_commonjsHelpers-baf43783.js');
+require('./interfaces-7cd0a48a.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) {
+        index.registerInstance(this, hostRef);
+        this.itemMutationObserver = observers.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 loadable.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() {
+        loadable.setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        loadable.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 (index.h("div", { key: '9d405841d7a1ee2d7a5da28c02ef8d5bf08dd9f5', class: frameDirectionClasses }, index.h("slot", { key: 'a02231a5002f8b19542e03529aad12771787b26f' })));
+    }
+    get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+        this.calciteFlowItemBack = index.createEvent(this, "calciteFlowItemBack", 7);
+        this.calciteFlowItemScroll = index.createEvent(this, "calciteFlowItemScroll", 6);
+        this.calciteFlowItemClose = index.createEvent(this, "calciteFlowItemClose", 6);
+        this.calciteFlowItemToggle = index.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() {
+        interactive.connectInteractive(this);
+        locale.connectLocalized(this);
+        t9n.connectMessages(this);
+    }
+    async componentWillLoad() {
+        await t9n.setUpMessages(this);
+        loadable.setUpLoadableComponent(this);
+    }
+    componentDidRender() {
+        interactive.updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        interactive.disconnectInteractive(this);
+        locale.disconnectLocalized(this);
+        t9n.disconnectMessages(this);
+    }
+    componentDidLoad() {
+        loadable.setComponentLoaded(this);
+    }
+    effectiveLocaleChange() {
+        t9n.updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Sets focus on the component.
+     *
+     * @returns promise.
+     */
+    async setFocus() {
+        await loadable.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 = dom.getElementDir(el) === "rtl";
+        const { showBackButton, backButtonClick, messages } = this;
+        const label = messages.back;
+        const icon = rtl ? ICONS.backRight : ICONS.backLeft;
+        return showBackButton ? (index.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 (index.h(index.Host, { key: 'ab926d381ff2493f3fd49a5c8724260211d69ca9' }, index.h(interactive.InteractiveContainer, { key: '6799b56c2116de5e08739ddc2ec1557bd291f3f8', disabled: disabled }, index.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(), index.h("slot", { key: '39b650abdf64df16f535d45f64dc1b367acfcc9e', name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { key: '5b36c56874ad762f842c81f9ffbdcdbd3168cf75', name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { key: '2dbf552425d238a4479a12bbec79571d11124577', name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { key: '2dd0a30236844c91c2cf10a9fbacbe9935ea234c', name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { key: '1b025f746e2e7d58fb057aab36b24e46872e607e', name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { key: '5dd5986e93dcc11e0b0fade6822814b160053c70', name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { key: 'e7cf2702cd2e423d07a8a8ac57c142bc4738b3ef', name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { key: 'e2561d89aaebe4fbb82b1f546551d05ebb23b0bf', name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", { key: 'fb6bf40456038f84486b2858765bb9d147800e84' })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return index.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) {
+        index.registerInstance(this, hostRef);
+        this.success = index.createEvent(this, "success", 7);
+        this.fail = index.createEvent(this, "fail", 7);
+        this.drawComplete = index.createEvent(this, "drawComplete", 7);
+        this.editingAttachment = index.createEvent(this, "editingAttachment", 7);
+        this.progressStatus = index.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 (index.h(index.Fragment, { key: 'a4ccd565a52a4cde4e76439629425f19bd4c222e' }, index.h("calcite-loader", { key: '30e8a3753985a734dd7cba461f26691b51f49ab9', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: '0845f1fa85a21b578fd18200b43d4a77c34e6808', class: featureFormClass, id: "feature-form" }), index.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 locale$1.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 mapViewUtils.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 mapViewUtils.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 index.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) {
+        index.registerInstance(this, hostRef);
+        this.success = index.createEvent(this, "success", 7);
+        this.fail = index.createEvent(this, "fail", 7);
+        this.isActionPending = index.createEvent(this, "isActionPending", 7);
+        this.formReady = index.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 locale$1.loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils"
+        ]);
+        this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
+    }
+    render() {
+        const loaderClass = this._editorLoading ? "" : "display-none";
+        return (index.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());
+        }
+        console.log(`parentKeyValue: ${parentKeyValue}`);
+        let childKeyField = childRelationship.keyField;
+        console.log(`childKeyField: ${childKeyField}`);
+        // 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;
+        console.log(`childKeyField 2: ${childKeyField}`);
+        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 index.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) {
+        index.registerInstance(this, hostRef);
+        this.loadingStatus = index.createEvent(this, "loadingStatus", 7);
+        this.commentSelect = index.createEvent(this, "commentSelect", 7);
+        this.featureSelectionChange = index.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 (index.h("calcite-panel", { key: '7cb798c5d9f580ce030389878aad8d398d075845', "full-height": true }, index.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) &&
+            index.h("div", { key: '5393e262280ce02b3e39261bc9961f0616d7dc34', class: "buttons-container" }, this._commentsAvailable &&
+                index.h("div", { key: '6c1bd15b82c66ba01549c597b252507e8b9393f2', class: "comment-btn" }, index.h("span", { key: '16144444fc4ae5d146cb13375cb4e91ea333fe29' }, this._relatedFeaturesOIDs.length), index.h("calcite-icon", { key: 'c0336a32f294f8a2aee7322307c7c9d742da3573', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                index.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 &&
+                index.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 &&
+            index.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 locale$1.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 mapViewUtils.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 : '';
+            console.log(`this.relatedTableId: ${this.relatedTableId}`);
+            //**Get the related records for the current selected feature**
+            if (this.relatedTableId) {
+                //current selected feature's objectId
+                const objectId = this._selectedGraphic.attributes[selectedLayer.objectIdField];
+                console.log(`objectId: ${objectId}`);
+                //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);
+                });
+                console.log(`result: ${JSON.stringify(result)}`);
+                const relatedOIDs = [];
+                if (result[objectId]) {
+                    result[objectId].features.forEach((feature) => {
+                        relatedOIDs.push(feature.attributes[relatedTable.objectIdField]);
+                    });
+                }
+                console.log(`relatedOIDs: ${JSON.stringify(relatedOIDs)}`);
+                // 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 {
+            console.log(`seen as comments not enabled`);
+            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 index.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) {
+        index.registerInstance(this, hostRef);
+        this.layerSelect = index.createEvent(this, "layerSelect", 7);
+        this.layersListLoaded = index.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 (index.h(index.Fragment, { key: '9366302a704c1dbdd7a65aef5c43d0ad84a44b23' }, this._isLoading && index.h("calcite-loader", { key: '69974a23fd42bc37ef13816efbe6d06e28cb2749', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            index.h("calcite-notice", { key: 'a93abb55b4db09727b3634cb1935e482c377d662', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, index.h("div", { key: 'b9046685353b8894e6c6094cff47fab7a8e07ffa', slot: "title" }, this._translations.error), index.h("div", { key: '90a052e1d80779a09a32fdd35563a1ce21d582e0', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            index.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 mapViewUtils.getMapLayerHash(this.mapView, true);
+        const allMapLayers = await mapViewUtils.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 locale$1.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 (index.h("calcite-list-item", { onCalciteListItemSelect: () => { this.onLayerItemSelected(layerId); } }, index.h("div", { class: "layer-name", slot: "content-start" }, layerName), this.showFeatureCount && featureCount !== undefined && featureCount !== "" && index.h("div", { class: !this.showNextIcon ? "feature-count" : "", slot: "content-end" }, "(" + featureCount + ")"), this.showNextIcon && index.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 locale$1.getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return index.getElement(this); }
+};
+LayerList.style = LayerListStyle0;
+
+exports.calcite_flow = Flow;
+exports.calcite_flow_item = FlowItem;
+exports.create_feature = CreateFeature;
+exports.create_related_feature = CreateRelatedFeature;
+exports.feature_details = FeatureDetails;
+exports.layer_list = LayerList;