@esri/solutions-components 0.8.14 → 0.8.15

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

@@ -11,9 +11,8 @@ import { c as connectInteractive, u as updateHostInteraction, d as disconnectInt
 import { c as connectLocalized, d as disconnectLocalized } from './locale-353c1c36.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-165900a5.js';
 import { S as SLOTS$1 } from './resources-810e7513.js';
-import { l as loadModules, g as getLocaleComponentStrings, f as formatNumber } from './locale-a490c4f6.js';
-import { a as getAllLayers, g as getLayerOrTable, b as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash } from './mapViewUtils-c83c03a4.js';
-import { P as PopupUtils } from './popupUtils-2cc3c366.js';
+import { l as loadModules, f as formatNumber, g as getLocaleComponentStrings } from './locale-a490c4f6.js';
+import { a as getAllLayers, g as getLayerOrTable, b as getAllTables, d as getMapLayerHash } from './mapViewUtils-4618ddb8.js';
 import './guid-f05d01d5.js';
 import './resources-1febf4c6.js';
 import './browser-9897260d.js';
@@ -689,13 +688,255 @@ const CreateFeature = class {
 };
 CreateFeature.style = CreateFeatureStyle0;
 
-const featureDetailsCss = ":host{display:block}.buttons{align-items:center;background-color:white;display:flex;padding:10px 0 10px 15px;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:5px;width:35px}";
+const createRelatedFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{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.mapView = undefined;
+        this.table = undefined;
+        this.selectedFeature = undefined;
+        this.customizeSubmit = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+    * Called each time the mapView prop is changed.
+    */
+    async mapViewWatchHandler() {
+        await this.mapView.when(async () => {
+            await this.init();
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Destroy the Editor widget instance
+     */
+    async close() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+    }
+    /**
+     * Submit the comment
+     */
+    async submit() {
+        if (this._editor) {
+            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() {
+        return (h(Host, { key: '383e8fac89d037f77241d856013202d1e04b28ba' }));
+    }
+    /**
+     * 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() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+        const container = document.createElement("div");
+        this._editor = new this.Editor({
+            view: this.mapView,
+            visibleElements: {
+                snappingControls: false
+            },
+            container
+        });
+        this.el.appendChild(container);
+        //Add handle to watch featureFormViewModel ready state and hide the editor elements
+        const hideElementHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this.hideEditorsElements();
+            }
+        });
+        this._editor.viewModel.addHandles(hideElementHandle);
+        //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') {
+                void this.startCreate();
+            }
+        });
+        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);
+    }
+    /**
+     * 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);
+        // Emit an event to show submit cancel buttons
+        this.isActionPending.emit(false);
+        this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+    }
+    /**
+     * Hides the elements of editor widget
+     * @protected
+     */
+    hideEditorsElements() {
+        if (!this.customizeSubmit) {
+            return;
+        }
+        setTimeout(() => {
+            var _a;
+            //hides the header and footer on the featureForm
+            (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.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');
+            });
+        }, 700);
+    }
+    /**
+     * Makes attributes for related feature
+     * @param parentFeature Parent feature
+     * @param parentRelationship Parent relationship
+     * @param childRelationship Child relationship
+     * @returns Attributes for related feature
+     */
+    makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
+        const parentKeyField = parentRelationship.keyField;
+        const parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        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) {
+            return;
+        }
+        //Submit only when valid attributes
+        //emit success or fail based on the result
+        if (evt.valid.length) {
+            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();
+        }
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+CreateRelatedFeature.style = CreateRelatedFeatureStyle0;
+
+const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:10px 0 10px 15px;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:5px;width:37px;font-size:var(--calcite-font-size--2);align-items:center}";
 const FeatureDetailsStyle0 = featureDetailsCss;
 
 const FeatureDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.loadingStatus = createEvent(this, "loadingStatus", 7);
+        this.featureSelect = createEvent(this, "featureSelect", 7);
         /**
          * string[]: Valid field types for like and dislike
          */
@@ -707,8 +948,10 @@ const FeatureDetails = class {
         this._likeCount = 0;
         this._disLikeCount = 0;
         this._dislikeFieldAvailable = false;
+        this._commentsAvailable = false;
         this._isLikeBtnClicked = false;
         this._isDislikeBtnClicked = false;
+        this._relatedFeaturesOIDs = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -721,19 +964,23 @@ const FeatureDetails = class {
     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) {
-                await this.getCompleteGraphic(graphic);
                 this.checkLikeDislikeFields();
             }
         }
@@ -767,15 +1014,21 @@ const FeatureDetails = class {
      */
     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;
-        return (h("calcite-panel", { key: 'c37e61727e2d94fb11c1c82b68de90b63a68385c', "full-height": true }, h("info-card", { key: 'b8ee6ec6705ec1903800f42f9009d92e0ff41fcc', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable) &&
-            h("div", { key: '3a48acd141dbdcb921b2b24296587b130c4e0fcb', class: 'buttons' }, this._likeFieldAvailable &&
-                h("calcite-button", { key: 'cfde8c0825109ec48beb61348c1846596994f6d2', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_b = (_a = this._likeCount) !== null && _a !== void 0 ? _a : this._selectedGraphic.attributes[this._likeField]) !== null && _b !== void 0 ? _b : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: 'e5e69fefa92a0189b955c4869b7755d0e68436c9', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_d = (_c = this._disLikeCount) !== null && _c !== void 0 ? _c : this._selectedGraphic.attributes[this._dislikeField]) !== null && _d !== void 0 ? _d : 0))));
+        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: 'c39c0eec021627b920972f7d4bce0d45bfe0a9c2', "full-height": true }, h("info-card", { key: 'e90cb427a1f874216afcfdf0a33804bf14fb6a2c', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: 'ecfdf111612c92eacfd97dae7bb3080b7ad50e96', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '07a8213e11585041fb1c5f56254447a720033f04', class: "comment-btn" }, h("span", { key: 'f4071fbd03372a0e88857962e9c31530e2dc693a' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '30258e1daae5f1e00d18dd4ec052861de46b45bf', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: 'fa76245789a29e49be06482fd8cd0244f44d19ab', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_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: 'ac9adc799a93f08319b2f0b797cd5d4773b1a6cb', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_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: '165b2ac0af65cbbab945a0dfd4ac878cc41af56c', class: "height-full", mapView: this.mapView, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -785,9 +1038,11 @@ const FeatureDetails = class {
      * @protected
      */
     async _initModules() {
-        const [Graphic] = await loadModules([
+        const [RelationshipQuery, Graphic] = await loadModules([
+            "esri/rest/support/RelationshipQuery",
             "esri/Graphic"
         ]);
+        this.RelationshipQuery = RelationshipQuery;
         this.Graphic = Graphic;
     }
     /**
@@ -802,6 +1057,56 @@ const FeatureDetails = class {
         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;
+        const selectedLayer = this._selectedGraphic.layer;
+        const commentsConfigured = 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 relatedTable = allTables.filter((table) => relatedTableIdFromRelnship === table.layerId);
+            this.relatedTableId = (relatedTable === null || relatedTable === void 0 ? void 0 : relatedTable.length) > 0 ? relatedTable[0].id : '';
+            //**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.OBJECTID);
+                    });
+                }
+                // 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
@@ -823,6 +1128,7 @@ const FeatureDetails = class {
             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) {
                     if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
@@ -997,244 +1303,6 @@ const FeatureDetails = class {
 };
 FeatureDetails.style = FeatureDetailsStyle0;
 
-const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.popup-title{font-weight:500;padding:10px 12px}";
-const FeatureListStyle0 = featureListCss;
-
-const FeatureList = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.featureSelect = createEvent(this, "featureSelect", 7);
-        this.selectedLayerId = undefined;
-        this.mapView = undefined;
-        this.noFeaturesFoundMsg = undefined;
-        this.pageSize = 100;
-        this.highlightOnMap = false;
-        this.highlightOnHover = false;
-        this._featureItems = [];
-        this._featuresCount = 0;
-        this._isLoading = false;
-        this._translations = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Watch handlers
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Watch for selectedLayerId change and update layer instance and features list for new layerId
-     */
-    async selectedLayerWatchHandler() {
-        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        await this.initializeFeatureItems();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    /**
-     * Refresh the feature list which will fetch the latest features and update the features list
-     * @returns Promise that resolves when the operation is complete
-     */
-    async refresh() {
-        await this.initializeFeatureItems();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (lifecycle)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * StencilJS: Called once just after the component is first connected to the DOM.
-     * @returns Promise when complete
-     */
-    async componentWillLoad() {
-        await this.initModules();
-        await this._getTranslations();
-        this._isLoading = true;
-        this._popupUtils = new PopupUtils();
-        if (this.mapView && this.selectedLayerId) {
-            this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        }
-    }
-    /**
-     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
-     */
-    async componentDidLoad() {
-        await this.initializeFeatureItems();
-    }
-    /**
-     * Renders the component.
-     */
-    render() {
-        return (h("calcite-panel", { key: '4cb73ad53f9ce1cced4c6001d45001523cb19c4a', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: 'c88ac531c61ece3284c474a334f281507e69dad0', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '70dafc90052736c5b450f9c9c87ae5627f068b92', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'a0b9b2aafbdb12f945d87242e29271ca0ff732fc', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'a5dd1674092e74bedb06e32b739d14a949b92bea', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '35dc472ed2aa2bd8e83ca42cf12db0469c967505', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'da3acc4616f040d350b198ef759a3d081d06deee', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Functions (protected)
-    //
-    //--------------------------------------------------------------------------
-    /**
-   * Load esri javascript api modules
-   * @returns Promise resolving when function is done
-   * @protected
-   */
-    async initModules() {
-        const [Color] = await loadModules([
-            "esri/Color"
-        ]);
-        this.Color = Color;
-    }
-    /**
-     * Initialize the features list using the selected layer
-     * @protected
-     */
-    async initializeFeatureItems() {
-        if (this._selectedLayer) {
-            this._isLoading = true;
-            this._featureItems = await this.queryPage(0);
-            this._featuresCount = await this._selectedLayer.queryFeatureCount();
-            this._isLoading = false;
-        }
-    }
-    /**
-     * On page change get the next updated feature list
-     * @param event page change event
-     * @protected
-     */
-    async pageChanged(event) {
-        this._isLoading = true;
-        if (this._highlightHandle) {
-            this._highlightHandle.remove();
-            this._highlightHandle = null;
-        }
-        const page = event.target.startItem - 1;
-        this._featureItems = await this.queryPage(page);
-        this._isLoading = false;
-    }
-    /**
-     * On feature click in feature list highlight the feature on the map
-     * @param event feature clicked event
-     * @param selectedFeature selected feature graphic
-     * @protected
-     */
-    async featureClicked(event, selectedFeature) {
-        //clear previous highlight and remove the highlightHandle
-        this.clearHighlights();
-        //highlight on map only if it is selected item
-        if (this.highlightOnMap) {
-            const selectedFeatureObjectId = Number(event.target.value);
-            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
-            this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
-        }
-        await this.emitSelectedFeature(selectedFeature);
-    }
-    /**
-     * Emit selected feature with its complete graphics and attributes
-     * @param graphic selected feature graphic
-     * @protected
-     */
-    async emitSelectedFeature(graphic) {
-        const layer = graphic.layer;
-        const query = layer.createQuery();
-        query.returnGeometry = true;
-        query.objectIds = [graphic.getObjectId()];
-        const completeGraphic = await layer.queryFeatures(query);
-        this.featureSelect.emit(completeGraphic.features[0]);
-    }
-    /**
-     * On feature hover in feature list highlight the feature on the map
-     * @param selectedFeature mouseovered feature graphic
-     * @protected
-     */
-    async onFeatureHover(selectedFeature) {
-        //clear previous highlight and remove the highlightHandle
-        this.clearHighlights();
-        if (this.highlightOnHover) {
-            const oId = selectedFeature.getObjectId();
-            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
-            selectedLayerView.highlightOptions = { color: new this.Color("#FFFF00") };
-            this._highlightHandle = selectedLayerView.highlight([oId]);
-        }
-    }
-    /**
-     * Clears the highlight
-     * @protected
-     */
-    clearHighlights() {
-        //if a feature is already highlighted, then remove the highlight
-        if (this._highlightHandle) {
-            this._highlightHandle.remove();
-        }
-    }
-    /**
-     * Query the selected feature layer, in descending order of object id's
-     * @param page 0th page number in the pagination item
-     * @returns List of features items to be rendered
-     * @protected
-     */
-    async queryPage(page) {
-        const featureLayer = this._selectedLayer;
-        const objectIdField = featureLayer.objectIdField;
-        const query = {
-            start: page,
-            num: this.pageSize,
-            outFields: ["*"],
-            returnGeometry: true,
-            where: featureLayer.definitionExpression,
-            outSpatialReference: this.mapView.spatialReference.toJSON()
-        };
-        //sort only when objectId field is found
-        if (objectIdField) {
-            query.orderByFields = [objectIdField.toString() + " DESC"];
-        }
-        const featureSet = await featureLayer.queryFeatures(query);
-        return await this.createFeatureItem(featureSet);
-    }
-    /**
-     * Creates list of items using the popup titles
-     * @param featureSet Queried FeatureSet
-     * @returns List of features items to be rendered
-     * @protected
-     */
-    async createFeatureItem(featureSet) {
-        const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
-        const items = currentFeatures.map(async (feature) => {
-            const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
-            return this.getFeatureItem(feature, popupTitle);
-        });
-        return Promise.all(items);
-    }
-    /**
-     * Get each feature item
-     * @param selectedFeature Each individual feature instance to be listed
-     * @param popupTitle feature popup title
-     * @returns individual feature item to be rendered
-     * @protected
-     */
-    getFeatureItem(selectedFeature, popupTitle) {
-        //get the object id value of the feature
-        const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
-        //use object id if popupTitle is null or undefined
-        popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
-    }
-    /**
-     * 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); }
-    static get watchers() { return {
-        "selectedLayerId": ["selectedLayerWatchHandler"]
-    }; }
-};
-FeatureList.style = FeatureListStyle0;
-
 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;
 
@@ -1243,11 +1311,8 @@ const LayerList = class {
         registerInstance(this, hostRef);
         this.layerSelect = createEvent(this, "layerSelect", 7);
         this.layersListLoaded = createEvent(this, "layersListLoaded", 7);
-        //HARDCODED IN EN
-        this._noLayerToDisplayErrorMsg = "Web map does not contain any editable layers.";
         this.mapView = undefined;
         this.layers = undefined;
-        this.noLayerErrorMsg = undefined;
         this.showFeatureCount = true;
         this.showNextIcon = false;
         this._noLayersToDisplay = false;
@@ -1296,9 +1361,9 @@ const LayerList = class {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: '33fe25a29aac6e4eaa429b1a8f58431b66d44d46' }, this._isLoading && h("calcite-loader", { key: 'f5b3c6a90f850db50a3e2b6af9745936802903dc', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: 'a40c96db6ecf36097aacb652156cbd863f6f9a3b', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: '83c3b2982f750a8e69101501aa39b99a8636514f', slot: "title" }, this._translations.error), h("div", { key: '190eb16ca7991773c784c8d77bca9be064064028', slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '980f20cec107d8e54af0c57448036eac3f342b71', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: 'c73bf36c13fed8120273d8a5321dd60fe4d4b5f4' }, this._isLoading && h("calcite-loader", { key: 'e748d9cc7d1855d3a2da34702ba853d35d1a2cde', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: '4a06b7694fd91456ee5cdc51d33e4ac633d416b2', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: '63b09f02312aba71826957c5b2c04a7750bdfca1', slot: "title" }, this._translations.error), h("div", { key: '5a19dfe527a6c66a5477a4c6a14f4686cde73bb3', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: 'e8a6170a55f4ba6ea35a1397690c3e365b814886', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -1424,4 +1489,4 @@ const LayerList = class {
 };
 LayerList.style = LayerListStyle0;
 
-export { Flow as calcite_flow, FlowItem as calcite_flow_item, CreateFeature as create_feature, FeatureDetails as feature_details, FeatureList as feature_list, LayerList as layer_list };
+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 };