@esri/solutions-components 0.10.12 → 0.10.13

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

@@ -12,7 +12,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale-21e40b
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-2fb3af62.js';
 import { S as SLOTS$1 } from './resources-64237427.js';
 import { l as loadModules, f as formatNumber, g as getLocaleComponentStrings } from './locale-b1d53fb1.js';
-import { a as getAllLayers, g as getLayerOrTable, b as getAllTables, d as getMapLayerHash } from './mapViewUtils-3e3d33ea.js';
+import { a as getAllLayers, g as getLayerOrTable, b as getAllTables, d as getMapLayerHash, c as getFeatureLayerView } from './mapViewUtils-3e3d33ea.js';
 import './browser-552eb2d0.js';
 import './guid-4c746a7f.js';
 import './resources-defbb49f.js';
@@ -364,6 +364,8 @@ const CreateFeature = class {
         this.customizeSubmit = false;
         this.searchConfiguration = undefined;
         this.isMobile = undefined;
+        this.floorLevel = undefined;
+        this.formElements = undefined;
         this._editorLoading = false;
         this._showSearchWidget = undefined;
     }
@@ -378,6 +380,20 @@ const CreateFeature = class {
      * The Editor constructor
      */
     Editor;
+    /**
+     * esri/form/ExpressionInfo: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-ExpressionInfo.html
+     * The ExpressionInfo constructor
+     */
+    ExpressionInfo;
+    /**
+     * esri/form/elements/FieldElement: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-elements-FieldElement.html
+     * The FieldElement constructor
+     */
+    FieldElement;
+    /**
+     * esri/form/FormTemplate: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html
+     */
+    FormTemplate;
     /**
      * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
      * The Editor instance
@@ -483,6 +499,15 @@ const CreateFeature = class {
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
+    /**
+     * refresh the feature form
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh(floorLevel) {
+        if (this._editor) {
+            void this._setFloorLevel(floorLevel);
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -538,7 +563,7 @@ const CreateFeature = class {
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
         const mobileMapClass = this.isMobile ? "show-map" : "display-none";
-        return (h(Fragment, { key: '8adaa70257dfef9632f82be75dbdff572e2c39b3' }, h("calcite-loader", { key: 'e1a1aba8613d9cea1033513748dd21b7f27f9806', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'e1089ffe60d079f345d358aac7ae1a6bd59a55df', class: featureFormClass, id: "feature-form" }), h("div", { key: '52274b6cd4c9f6886293f858caac9e572697da25', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '64108cfa3bb57f9739bfb4951352c5523c194761', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: '47d29e529402482acf3811c37c0cd5a426ed40ed' }, h("calcite-loader", { key: '283b2c6a0f1722c9a8d955e11390e65e6041b247', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'bb596467d5da22882932259db6a9e8029717850b', class: featureFormClass, id: "feature-form" }), h("div", { key: 'c3887f5c5aa92efdcf588da4918933dadb87937f', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '566069a6202053468a3cf7a221feb071491eabb4', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -561,15 +586,21 @@ const CreateFeature = class {
      * @protected
      */
     async initModules() {
-        const [Editor, reactiveUtils, Search, MapView] = await loadModules([
+        const [Editor, reactiveUtils, Search, ExpressionInfo, FieldElement, FormTemplate, MapView] = await loadModules([
             "esri/widgets/Editor",
             "esri/core/reactiveUtils",
             "esri/widgets/Search",
+            "esri/form/ExpressionInfo",
+            "esri/form/elements/FieldElement",
+            "esri/form/FormTemplate",
             "esri/views/MapView"
         ]);
         this.Editor = Editor;
         this.reactiveUtils = reactiveUtils;
         this.Search = Search;
+        this.ExpressionInfo = ExpressionInfo;
+        this.FieldElement = FieldElement;
+        this.FormTemplate = FormTemplate;
         this.MapView = MapView;
     }
     /**
@@ -660,6 +691,7 @@ const CreateFeature = class {
         const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
             if (state === 'ready') {
                 this._mapViewContainer?.classList?.replace("show-map", "hide-map");
+                void this._setFloorLevel(this.floorLevel);
                 this._showSearchWidget = false;
                 this.progressStatus.emit(1);
                 this.drawComplete.emit();
@@ -804,6 +836,59 @@ const CreateFeature = class {
         }
         return searchConfiguration;
     }
+    /**
+     * Add the floor level value to form
+     * @param level selected floor level
+     *
+     * @protected
+     */
+    async _setFloorLevel(level) {
+        if (!level) {
+            return;
+        }
+        const layer = await getLayerOrTable(this._updatedMapView, this.selectedLayerId);
+        if (layer?.floorInfo?.floorField) {
+            const layerField = layer.fields.find((field) => field.name === layer.floorInfo.floorField);
+            // if layer field is present and form template is not present only then we can set value of floorfield into feature form otherwise create a mannual formtemplate to add the floorfeild element
+            if (layerField && !layer?.formTemplate) {
+                this._editor.viewModel.featureFormViewModel.setValue(layerField.name, level);
+                layerField.editable = false;
+            }
+            else if (layer.formTemplate && this.formElements) {
+                const floorInfoExpression = new this.ExpressionInfo({
+                    expression: `"${level}"`,
+                    name: "floor-info-test",
+                    title: "Floor Info",
+                    returnType: "string"
+                });
+                const levelIdFieldElement = new this.FieldElement({
+                    label: layer.floorInfo.floorField,
+                    editableExpression: 'false',
+                    fieldName: layer.floorInfo.floorField,
+                    input: {
+                        type: "text-box",
+                        maxLength: 50,
+                        minLength: 0
+                    },
+                    valueExpression: floorInfoExpression.name
+                });
+                this._updatedMapView.map.editableLayers.forEach((layer) => {
+                    const orgElements = this.formElements.orgElements;
+                    const orgExpressionInfos = this.formElements.orgExpressionInfos;
+                    const elements = [...orgElements];
+                    elements.push(levelIdFieldElement);
+                    // Creating formtemplate
+                    const floorInfoTemplate = new this.FormTemplate({
+                        title: layer.formTemplate.title,
+                        description: layer.formTemplate.description,
+                        elements,
+                        expressionInfos: [floorInfoExpression].concat(orgExpressionInfos)
+                    });
+                    layer.formTemplate = floorInfoTemplate;
+                });
+            }
+        }
+    }
     /**
      * Hides the elements of editor widget
      * @protected
@@ -1632,6 +1717,7 @@ const LayerList = class {
         this.layers = undefined;
         this.showFeatureCount = true;
         this.showNextIcon = false;
+        this.applyLayerViewFilter = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -1702,9 +1788,9 @@ const LayerList = class {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: '9366302a704c1dbdd7a65aef5c43d0ad84a44b23' }, this._isLoading && h("calcite-loader", { key: '69974a23fd42bc37ef13816efbe6d06e28cb2749', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: 'a93abb55b4db09727b3634cb1935e482c377d662', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'b9046685353b8894e6c6094cff47fab7a8e07ffa', slot: "title" }, this._translations.error), h("div", { key: '90a052e1d80779a09a32fdd35563a1ce21d582e0', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '709c1b8edd5710a2476ecef638199c2f929b4165', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: '19f68b9a5d0b6c85832544e4281e1c4a1707ba86' }, this._isLoading && h("calcite-loader", { key: 'c908f311165f8f520f267a0dcde0bd954863ba6b', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: '56dfb252f998333ed6a671cccddd5683f08ad63d', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'a27ad45ac2b1984152af5a80da36583f7c375be6', slot: "title" }, this._translations.error), h("div", { key: 'a9466cb560b6ee2c72ebd18130ce21371f9e7cdf', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: '40e54ba92d2f48a97dd0987808f4b7fdefd266bb', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -1731,10 +1817,20 @@ const LayerList = class {
         this._layerItemsHash = await getMapLayerHash(this.mapView, true);
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
+        for (const eachLayer of allMapLayers) {
             if (eachLayer?.type === "feature") {
                 if (this.showFeatureCount) {
                     const q = eachLayer.createQuery();
+                    //if layer has definitionExpression append it to the where clause
+                    if (eachLayer?.definitionExpression) {
+                        q.where = q.where + ' AND ' + eachLayer.definitionExpression;
+                    }
+                    if (this.applyLayerViewFilter) {
+                        const featureLayerView = await getFeatureLayerView(this.mapView, eachLayer.id);
+                        if (featureLayerView?.filter?.where) {
+                            q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
+                        }
+                    }
                     const result = eachLayer.queryFeatureCount(q);
                     def.push(result);
                     void result.then(async (resCount) => {
@@ -1747,7 +1843,7 @@ const LayerList = class {
                     });
                 }
             }
-        });
+        }
         await Promise.all(def).then(() => {
             const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
             this._mapLayerIds = editableLayerIds.reverse();

package/dist/esm/crowdsource-reporter.entry.js

@@ -43,11 +43,13 @@ const CrowdsourceReporter = class {
         this.searchConfiguration = undefined;
         this.showComments = undefined;
         this.showUserImageInCommentsList = false;
+        this.showFeatureSymbol = false;
+        this.showMyReportsOnly = false;
         this.theme = "light";
         this.zoomToScale = undefined;
+        this.floorLevel = undefined;
         this._featureCreationFailedErrorMsg = undefined;
         this._filterActive = false;
-        this._filterOpen = false;
         this._flowItems = [];
         this._hasValidLayers = false;
         this._loadingFeatureDetails = undefined;
@@ -142,6 +144,11 @@ const CrowdsourceReporter = class {
      * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
      */
     reactiveUtils;
+    /**
+     * "esri/layers/support/FeatureFilter": https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureFilter.html
+     * Esri FeatureFilter
+     */
+    FeatureFilter;
     /**
      * __esri.Graphic: The selected feature
      */
@@ -178,6 +185,22 @@ const CrowdsourceReporter = class {
      * boolean: when true allow panel to show in full height
      */
     _showFullPanel;
+    /**
+     * string: The current floor expression
+     */
+    _floorExpression;
+    /**
+     * _esri.Element: form elements of the selected layer
+     */
+    _formElements = [];
+    /**
+     * string[]: URL params set by using filters.
+     */
+    _filterUrlParams;
+    /**
+     * FilterInitState: filter's init state
+     */
+    _filterInitState;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -197,6 +220,30 @@ const CrowdsourceReporter = class {
             await this.setMapView();
         });
     }
+    /**
+     * Called each time the floorLevel prop is changed.
+     */
+    async floorLevelWatchHandler() {
+        if (this._editableLayerIds) {
+            // updates all layer's defination expression when floorLevel is changed
+            // then refresh the components to update features
+            for (const layerId of this._editableLayerIds) {
+                const layer = await getLayerOrTable(this.mapView, layerId);
+                if (layer.floorInfo?.floorField) {
+                    this._updateFloorDefinitionExpression(layer);
+                }
+            }
+        }
+        if (this._layerList) {
+            await this._layerList.refresh();
+        }
+        if (this._featureList) {
+            void this._featureList.refresh();
+        }
+        if (this._createFeature) {
+            void this._createFeature.refresh(this.floorLevel);
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -238,7 +285,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'e4d2d075e2667ba3e396178e4b820658655813d3' }, this._reportSubmitted && h("calcite-alert", { key: '0cc4678edca8993e529aed1f328816f7ff00e565', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'cb1bc1c8bed7db3d4535542e7cd6c42119fe1ac3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '83693e1946d2825cf57f6d8ae5ca5a21a0cc7bfc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'c8477c3bcbee4a71ba5169cf80895702bd2adf16', slot: "title" }, this._translations.error), h("div", { key: '30722d6036a5634269cd3e485c94e55a06d008a2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '373b8130788f65dd55106ea3be7fe17aecf80ebb', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '999471c510f95a9699fcb84307bd7daca608725a', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '72accc95ed73545157141ae82b1be1ff0b407a26', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b8beab27be23c9c7f3a9a4a0e839090e63ed9916', slot: "title" }, this._translations.error), h("div", { key: '60d4db0311c00b9bf4ccf56bed1c4d40e003d30d', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '4bcca25c6f33c79eeb013cb469dd4e650bc649fb' }, h("calcite-shell", { key: '5d68b182b17c9a09671f73ec477efd0bf5badcfb', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: '57ea463ae2d3eac3a23e63ed8702f5fde3743e09' }, this._reportSubmitted && h("calcite-alert", { key: '4082ad71fa4d6c3a01ec0ac6477e81b3d3bc40e1', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '9e042989b10a7d68347b7f34b9f31957ede3ca37', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '573dc6a472b00191a1822c95ba0ee2192c486612', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f3799e01a09ccbeec651762833783d3200729f1b', slot: "title" }, this._translations.error), h("div", { key: 'cd80f9a2c8df9a4c7b5b517a9e98ce4622e230c2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '1137ce7794f36419d20a5b5d2d1f390e72713155', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '24a0604c3be1cab965c48ab46435c349a7d67f65', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '86112e4c449e1061fa436822670dc93cb3bfe949', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '94be8a14c1bf22127f8018dfe3a92304870ce70d', slot: "title" }, this._translations.error), h("div", { key: '6b30463e2ee941834fcad93e4cbe32e5a65d592d', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '9b928eab61af6ed84a0059dbc04c633c131f879b' }, h("calcite-shell", { key: 'e07ac5d7d6d8e8c8fd0001586448ab13733e2ed5', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -253,10 +300,12 @@ const CrowdsourceReporter = class {
      * @protected
      */
     async _initModules() {
-        const [reactiveUtils] = await loadModules([
-            "esri/core/reactiveUtils"
+        const [reactiveUtils, FeatureFilter] = await loadModules([
+            "esri/core/reactiveUtils",
+            "esri/layers/support/FeatureFilter"
         ]);
         this.reactiveUtils = reactiveUtils;
+        this.FeatureFilter = FeatureFilter;
     }
     /**
      * Set the selected layer id and layer name
@@ -295,6 +344,10 @@ const CrowdsourceReporter = class {
                 case "feature-list":
                     renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));
                     break;
+                case "filter-panel":
+                    renderLists.push(this.getFilterPanel());
+                    void this._restoreFilters();
+                    break;
                 case "feature-details":
                     renderLists.push(this.getFeatureDetailsFlowItem());
                     break;
@@ -317,32 +370,6 @@ const CrowdsourceReporter = class {
             ? h("calcite-flow", null, renderLists?.length > 0 && renderLists)
             : h("calcite-loader", { label: "", scale: "m" })));
     }
-    /**
-     * Show filter component in modal
-     * @returns node to interact with any configured filters for the current layer
-     */
-    filterModal() {
-        //get layer expression for current selected layer
-        const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
-        return (currentLayersExpressions.length > 0 &&
-            h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
-    }
-    /**
-     * Close the filter modal
-     * @protected
-     */
-    _closeFilter() {
-        if (this._filterOpen) {
-            this._filterOpen = false;
-        }
-    }
-    /**
-     * When true the filter modal will be displayed
-     * @protected
-     */
-    _toggleFilter() {
-        this._filterOpen = !this._filterOpen;
-    }
     /**
      * On sort option click update the sort field and sort order
      * @param sortField sort field
@@ -367,14 +394,27 @@ const CrowdsourceReporter = class {
             h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "sortHighestVoted"); }, selected: this._updatedSortOption === "sortHighestVoted", value: "sortHighestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "sortLowestVoted"); }, selected: this._updatedSortOption === "sortLowestVoted", value: "sortLowestVoted" })))));
     }
     /**
-     * Reset the filter active prop
+     * Restores the applied filters
+     * @protected
+     */
+    _restoreFilters() {
+        // call the restore function when instant-apps-filter-list is ready
+        setTimeout(() => {
+            const canRestoreFilter = this._filterList && this._filterUrlParams && this._filterInitState;
+            if (canRestoreFilter) {
+                void this._filterList.restoreFilters(this._filterUrlParams[0], this._filterInitState);
+            }
+        }, 200);
+    }
+    /**
+     * Reset the filter
      * @protected
      */
-    _handleFilterListReset() {
-        //on reset filter list reset the filter active state
+    async _handleFilterListReset() {
+        //on reset filter list reset the filter states
         this._filterActive = false;
-        //reset the features list to reflect the applied filters
-        void this._featureList.refresh();
+        this._filterUrlParams = null;
+        this._filterInitState = null;
     }
     /**
      * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
@@ -384,8 +424,7 @@ const CrowdsourceReporter = class {
         //if filter are applied the url params will be generated
         //set the filter active state based on the length of applied filters
         this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
-        //reset the features list to reflect the applied filters
-        void this._featureList.refresh();
+        this._filterUrlParams = this._filterList.urlParams.getAll('filter');
     }
     /**
      * Get the feature layer list
@@ -394,7 +433,7 @@ const CrowdsourceReporter = class {
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -413,7 +452,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -550,8 +589,10 @@ const CrowdsourceReporter = class {
      */
     async navigateToCreateFeature(evt) {
         if (evt.detail.layerId && evt.detail.layerName) {
-            void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+            await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
+        // get the form template elements to pass in create-feature to create a LEVELID field in feature-form
+        this._getFormElements();
         this._showSubmitCancelButton = false;
         this.updatePanelState(false, true);
         this._flowItems = [...this._flowItems, "feature-create"];
@@ -608,6 +649,15 @@ const CrowdsourceReporter = class {
         void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
     }
+    /**
+     * On back from filter panel get the filter's init state
+     * @protected
+     */
+    async backFromFilterPanel() {
+        this._filterInitState = await this._filterList.getFilterInitState();
+        void this._featureList.refresh();
+        this.backFromSelectedPanel();
+    }
     /**
      * On back from selected panel navigate to the previous panel
      * @protected
@@ -625,6 +675,10 @@ const CrowdsourceReporter = class {
             (updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
+        // Coming back from feature details refresh the feature list to update the like count
+        if (this.reportingOptions && this.reportingOptions[this._selectedLayerId]?.like && updatedFlowItems[updatedFlowItems.length - 1] === 'feature-details') {
+            void this._featureList.refresh();
+        }
         updatedFlowItems.pop();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
@@ -712,8 +766,19 @@ const CrowdsourceReporter = class {
         const layerExpressions = this.layerExpressions?.filter((exp) => exp.id === this._selectedLayerId);
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = layerExpressions?.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: this._toggleFilter.bind(this), slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId, sortingInfo: this._updatedSorting }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
+    }
+    /**
+     * Get Filter page for apllying filter
+     * @param layerId Layer id
+     * @param layerName Layer name
+     * @returns feature list node
+     * @protected
+     */
+    getFilterPanel() {
+        const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -817,6 +882,8 @@ const CrowdsourceReporter = class {
      */
     async setMapView() {
         await this.getLayersToShowInList();
+        // filter/update the feature(s) if any filter/condition is already applied
+        await this._updateFeatures();
         // if only one valid layer is present then directly render features list
         if (this._editableLayerIds?.length === 1) {
             await this.renderFeaturesList();
@@ -918,6 +985,39 @@ const CrowdsourceReporter = class {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    /**
+     * Applies a definition expression when floor field and level are available
+     *
+     * @returns boolean
+     * @protected
+     */
+    _updateFloorDefinitionExpression(layer) {
+        const floorField = layer.floorInfo.floorField;
+        // update the layer defination expression
+        const floorExp = `${floorField} = '${this.floorLevel}'`;
+        const defExp = layer.definitionExpression;
+        layer.definitionExpression = defExp?.indexOf(this._floorExpression) > -1 ?
+            defExp.replace(this._floorExpression, floorExp) : floorExp;
+        this._floorExpression = floorExp;
+    }
+    /**
+     * Gets the form template elements
+     * @protected
+     */
+    _getFormElements() {
+        const layer = this._selectedLayer;
+        const floorField = layer?.floorInfo?.floorField;
+        if (floorField && this.floorLevel && layer?.formTemplate) {
+            const formElement = this._formElements.find((elm) => elm.id === layer.id);
+            if (this._formElements.length === 0 || !formElement) {
+                this._formElements.push({
+                    id: layer.id,
+                    orgElements: layer.formTemplate.elements,
+                    orgExpressionInfos: layer.formTemplate.expressionInfos
+                });
+            }
+        }
+    }
     /**
      * Returns the ids of all OR configured layers that support edits with the update capability
      * @param hash each layer item details
@@ -935,6 +1035,35 @@ const CrowdsourceReporter = class {
             return prev;
         }, []);
     }
+    /**
+     * updates the features for layer/feature list
+     * @protected
+     */
+    async _updateFeatures() {
+        for (const eachLayerId of this._editableLayerIds) {
+            const featureLayerView = await getFeatureLayerView(this.mapView, eachLayerId);
+            // In case of show my features add filter for Featurelayerview
+            await this._showMyFeaturesOnly(featureLayerView);
+            const floorField = featureLayerView.layer?.floorInfo?.floorField;
+            if (floorField && this.floorLevel) {
+                // Update the layer's defination as per selected floor level from map for all editable layers
+                this._updateFloorDefinitionExpression(featureLayerView.layer);
+            }
+        }
+    }
+    /**
+     * Show only loggedIn user's features
+     * @protected
+     */
+    async _showMyFeaturesOnly(featureLayerView) {
+        const loggedInUserName = this.mapView.map.portalItem.portal?.credential?.userId;
+        if (loggedInUserName) {
+            const creatorField = featureLayerView.layer.editFieldsInfo?.creatorField.toLowerCase();
+            featureLayerView.filter = this.showMyReportsOnly && creatorField ? new this.FeatureFilter({
+                where: creatorField + "='" + loggedInUserName + "'"
+            }) : null;
+        }
+    }
     /**
      * Creates the list of layers to be listed in layer list
      * @protected
@@ -1022,7 +1151,8 @@ const CrowdsourceReporter = class {
     }
     static get watchers() { return {
         "isMobile": ["isMobileWatchHandler"],
-        "mapView": ["mapViewWatchHandler"]
+        "mapView": ["mapViewWatchHandler"],
+        "floorLevel": ["floorLevelWatchHandler"]
     }; }
 };
 CrowdsourceReporter.style = CrowdsourceReporterStyle0;