@esri/solutions-components 0.11.15 → 0.11.17

package/dist/collection/components/create-feature/create-feature.js

@@ -470,7 +470,7 @@ export class CreateFeature {
         //Add handle to watch featureTemplatesViewModel ready state and then start the creation
         const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
             if (state === 'ready' && this._editor.viewModel?.activeWorkflow?.type !== "create-features") {
-                this.progressStatus.emit(0.5);
+                this.progressStatus.emit(50);
                 this._editorLoading = true;
             }
         });
@@ -484,7 +484,7 @@ export class CreateFeature {
                     void this._setFloorLevel(this.floorLevel);
                 }, 50);
                 this._currentPage = 'featureForm';
-                this.progressStatus.emit(1);
+                this.progressStatus.emit(100);
                 this.drawComplete.emit();
             }
         });
@@ -511,11 +511,11 @@ export class CreateFeature {
         await this.hideEditorsElements();
         return new Promise((resolve, reject) => {
             if (this._editor.viewModel.featureTemplatesViewModel.items?.length) {
-                const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+                const items = this._editor.viewModel.featureTemplatesViewModel.items[0].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);
+                    this.progressStatus.emit(75);
                     setTimeout(() => {
                         //hides the header and footer elements in editor widget
                         this.hideEditorsElements().then(() => {
@@ -708,9 +708,8 @@ export class CreateFeature {
             this._isSubmitBtnClicked = false;
             return;
         }
-        //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length && this._isSubmitBtnClicked) {
+        if (this._isSubmitBtnClicked) {
             this._isSubmitBtnClicked = false;
             try {
                 await this._editor.activeWorkflow.commit();

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -749,14 +749,10 @@ export class CrowdsourceManager {
      * @protected
      */
     _filterModal() {
-        return (h("calcite-dialog", { class: "filter-content-space", heading: this._translations?.filter?.replace("{{title}}", this._layer?.title), id: "solutions-filter-dialog", kind: "brand", modal: true, onCalciteDialogClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => {
+        return (h("calcite-dialog", { class: "filter-content-space", heading: this._translations?.filter?.replace("{{title}}", this._layer?.title), id: "solutions-filter-dialog", kind: "brand", modal: true, onCalciteDialogClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => {
                 this._handleFilterListReset();
                 void this._mapCard.resetFilter();
-            }, onFilterUpdate: async () => {
-                const active = this._filterList.filterCount > 0;
-                await this._layerTable?.filterUpdate(active);
-                await this._mapCard.updateFilterState(active);
-            }, ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false })));
+            }, onFilterUpdate: () => void this._updateFilter(), ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false })));
     }
     /**
      * Store any filters for the current layer.
@@ -799,6 +795,16 @@ export class CrowdsourceManager {
             void this._layerTable.closeFilter();
         }
     }
+    /**
+     * Update the filter state
+     *
+     * @protected
+     */
+    async _updateFilter() {
+        const active = this._filterList.filterCount > 0;
+        await this._layerTable?.filterUpdate(active);
+        await this._mapCard.updateFilterState(active);
+    }
     /**
      * Update the component layout when its size changes
      *

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -171,6 +171,10 @@ export class CrowdsourceReporter {
      * string: selected floor level
      */
     floorLevel;
+    /**
+     * boolean: When false comment will shown in single line in the comments list
+     */
+    showFullCommentTitle = true;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -224,7 +228,7 @@ export class CrowdsourceReporter {
     /**
      * number: Show the updated progress bar status
      */
-    _updatedProgressBarStatus = 0.25;
+    _updatedProgressBarStatus = 25;
     /**
      * ISortingInfo: Sort the feature list depending on the sort field and order
      */
@@ -537,7 +541,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '42f88dcb756add8af6af0936b7ef9aef47a43236' }, this._reportSubmitted && h("calcite-alert", { key: '7d5c337096d2e3562bd133d5313acc34f941b8f2', "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: '4ece38e9af3c6eba4e89cf96ca8fe82a96116bcb', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '6c93202ccab7729a523f51f816279df0e7e2f4d4', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'cba71216aa8aa01098b2f9c6295341b9d501372d', slot: "title" }, this._translations.error), h("div", { key: '3d457cfb00cc11208c34a121af6c5592d9540a04', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'f782a94f3e4ea2252b92e6aa1c65d565dcf95b7b', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '57d71698daf2f5cfbb2bb971b8c062baa797d279', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'c132ab8aceff09560f4e8300c6de03f9034443d9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '840e834c1c6597d0bd3841fde4f1014de9e6604b', slot: "title" }, this._translations.error), h("div", { key: 'b8348d5cd55a298dbe42e4ccffb9f951bac1f8e1', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '21f2a585a214dcdac6bec1b313025a5bf48317c4' }, h("calcite-shell", { key: '3b0d3506ea75937c6627f20b3f468b28c00dbd22', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: '03d613fe8f275852672fb546ceb4449fb82580c0' }, this._reportSubmitted && h("calcite-alert", { key: '969a66978549d6993b1e4fce87bbd2387858cdf8', "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: '60ae42443e09a97d97a46bba07b1ea010b382348', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'bf6c346cf976a4b84da3553230239665c712e2b6', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '1f9560e18d802a15bcb3e8ea9f05837a4a6fb8aa', slot: "title" }, this._translations.error), h("div", { key: '1f5ef09cbf94996eeb5783211ed1542a5cf53e93', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '15538e8faabbec476d7586dcc4152b422404c23f', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '925a9a243a79dfb66554a9a51f24396ca2b71c98', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '62c63d3b1c51bdc7879e815e2b2f4d3c4d039c4c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '971f07331a8689b859f2cedc96ba3589a3ad3e16', slot: "title" }, this._translations.error), h("div", { key: '1627f1ab5c4a4aceb7bdb70471aed6b8ca6d67b8', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'b3257ba523357b4444ce7da7d13a86f6b71185d9' }, h("calcite-shell", { key: '35fc5a814528bb0acc22919839719bb4349e9ae4', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -671,7 +675,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getLayerListFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader, selected: this._flowItems[this._flowItems.length - 1] === "layer-list" }, 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", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
@@ -683,7 +687,7 @@ export class CrowdsourceReporter {
         const onlyReportingLayers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
             return this.reportingOptions[layerId].visible && this.reportingOptions[layerId].reporting && this._layerItemsHash[layerId] && this._layerItemsHash[layerId].supportsAdd;
         }) : [];
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, 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.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "reporting-layer-list" }, 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.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -691,7 +695,7 @@ export class CrowdsourceReporter {
      * @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("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, 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), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, 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("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, 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
@@ -772,7 +776,7 @@ export class CrowdsourceReporter {
         void this.updateNonVisibleLayersOnMap(false);
         await this.navigateToHomePage();
         this._reportSubmitted = true;
-        this._updatedProgressBarStatus = 0.25;
+        this._updatedProgressBarStatus = 25;
         //on report submit form will be closed, so update the form state
         if (this._showFullPanel) {
             this.updatePanelState(this._sidePanelCollapsed, false);
@@ -919,7 +923,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     backFromSelectedPanel() {
-        this._updatedProgressBarStatus = 0.25;
+        this._updatedProgressBarStatus = 25;
         const updatedFlowItems = [...this._flowItems];
         // when back from comment details or add comment page don't clear the highlighted feature of map
         if (!(updatedFlowItems[updatedFlowItems.length - 1] === 'comment-details' ||
@@ -990,10 +994,10 @@ export class CrowdsourceReporter {
         this._showLoadingIndicator = isLoading;
     }
     /**
-   * On Feature details change update the Layer title and the current selected layer id
-   * @param evt Event hold the details of current feature graphic from the feature-details
-   * @protected
-   */
+     * On Feature details change update the Layer title and the current selected layer id
+     * @param evt Event hold the details of current feature graphic from the feature-details
+     * @protected
+     */
     async selectionChanged(evt) {
         void this.updatingFeatureDetails(true);
         await this.setCurrentFeature(evt.detail.selectedFeature[0]);
@@ -1027,7 +1031,7 @@ export class CrowdsourceReporter {
     getFeatureListFlowItem(layerId, layerName) {
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = this._currentLayerExpressions?.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._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, 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, locale: this.locale, 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 }))));
     }
     /**
@@ -1036,7 +1040,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFilterPanel() {
-        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", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), 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: this._currentLayerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        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), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, 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", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), 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: this._currentLayerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -1044,7 +1048,7 @@ export class CrowdsourceReporter {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
@@ -1060,14 +1064,14 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
@@ -2214,6 +2218,26 @@ export class CrowdsourceReporter {
                 "setter": false,
                 "attribute": "floor-level",
                 "reflect": false
+            },
+            "showFullCommentTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When false comment will shown in single line in the comments list"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-full-comment-title",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/feature-details/feature-details.js

@@ -57,6 +57,10 @@ export class FeatureDetails {
      * boolean: When true the profile image of the comment creator will be shown in the comments list
      */
     showUserImageInCommentsList = false;
+    /**
+     * boolean: When false comment will shown in single line in the comments list
+     */
+    showFullCommentTitle = true;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -234,12 +238,12 @@ export class FeatureDetails {
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: 'be7bebe9da698d963a2602fcacb95ac7206ac1e9', "full-height": true }, h("info-card", { key: '1e069f52d59d42f3e2b88463ea7c536c65a0a6b5', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: 'd53f5a1726e4c6299ffd04e266d84005181645f6', class: "buttons-container" }, this._commentsAvailable &&
-                h("calcite-button", { key: '4c2616cc9e0107258f5313b66ae96fa31fe582c5', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
-                h("calcite-button", { key: '7c87aa085df04a8b58625097c2ce70e5853b82f9', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '59eb48b91fc2a394cafdcbeeebf5baafae9a8c9b', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: 'f34ee203202944666c40e14bdfdc59265414fbe1', class: "height-full", locale: this.locale, mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: '577f06f7bc41875b38e07a44f3c734ccc839e596', "full-height": true }, h("info-card", { key: 'e815f75d02bcdfe9cc11796c913be2a6c2bfecd2', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '16d0af6b0e75b595573bd0816744f03d9d6dec37', class: "buttons-container" }, this._commentsAvailable &&
+                h("calcite-button", { key: '550b3af830911a1437fa3e967492666ec8c5a2e4', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
+                h("calcite-button", { key: '741848445c2083f4c0a3d9464cd810deee4a1218', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '4d5e8ae279559dbf981b1b91238706adbd6ebeef', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '0daad9b37b13a05afc4b8a3a6eca70a7356afd8f', class: "height-full", locale: this.locale, mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showFullTitle: this.showFullCommentTitle, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -649,6 +653,26 @@ export class FeatureDetails {
                 "attribute": "show-user-image-in-comments-list",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showFullCommentTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When false comment will shown in single line in the comments list"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-full-comment-title",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/feature-list/feature-list.css

@@ -42,16 +42,20 @@
   white-space: pre-line;
 }
 
-.feature-list-popup-title-padding {
-  padding: 10px 12px;
+.feature-list-popup-title-small-ellipsis {
+  font-size: small;
+  white-space: nowrap !important;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.feature-list-popup-title-padding-reduced {
-  padding: 10px 0;
+.popup-title {
+  padding: 0 5px;
+  word-break: break-word;
 }
 
 .profile-img {
-  margin: 0 0.75rem;
+  padding: 0 5px;
   min-width: 32px;
 }
 
@@ -64,8 +68,14 @@
 }
 
 .feature-symbol {
-  padding: 3px 10px;
+  padding: 0 3px;
   min-width: 30px;
   display: flex;
   justify-content: center;
+}
+
+.search {
+  padding: 10px;
+  background-color: var(--calcite-color-foreground-1) !important;
+  border-block-end: 1px solid var(--calcite-color-border-3);
 }

package/dist/collection/components/feature-list/feature-list.js

@@ -99,6 +99,10 @@ export class FeatureList {
      * IReportingOptions: Key options for reporting
      */
     reportingOptions;
+    /**
+     * boolean: When false popup title will shown in single line
+     */
+    showFullTitle = true;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -116,6 +120,14 @@ export class FeatureList {
      * boolean: Check if selected layer's features fetching process is completed
      */
     _isLoading = false;
+    /**
+     * string: Placeholder string to show fields included in full text search
+     */
+    _searchPlaceHolder = '';
+    /**
+     * any[]: Contains full text search info object
+     */
+    _fullTextSearchInfo;
     /**
      * Contains the translations for this component.
      * All UI strings should be defined here.
@@ -161,6 +173,10 @@ export class FeatureList {
      * HTMLCalcitePaginationElement: Calcite pagination element instance
      */
     _pagination;
+    /**
+     * HTMLCalciteListElement: Calcite List element instance
+     */
+    _calciteList;
     /**
      * string[]: Valid field types for like
      */
@@ -173,6 +189,10 @@ export class FeatureList {
      * boolean: When true configured like field is available in selected layer
      */
     _likeFieldAvailable = false;
+    /**
+     * string: The current search expression
+     */
+    _searchExpression;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -222,6 +242,9 @@ export class FeatureList {
             };
             await this.pageChanged(event);
         }
+        else if (this._searchExpression) {
+            await this._searchFullText();
+        }
         else {
             await this.initializeFeatureItems();
         }
@@ -253,6 +276,7 @@ export class FeatureList {
         this._popupUtils = new PopupUtils();
         if (this.mapView && this.selectedLayerId) {
             this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+            this._getFullTextSearchInfo();
         }
     }
     /**
@@ -265,9 +289,11 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '6b6214a3dba7df7c2035203750d547945407ecde', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '1b05d96de0b4d396b13f448311db76315e28b81b', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: 'abe755f0bc5c7ff064249159c3154c9ca1c27594', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '5a8ead1d47151cf088ae9e359052cf35129b09d3', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'cd7049462fb654dad0c4c05f127cf3e5d06bc5de', label: "", "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: 'b65b1f491800e489790d79054affc0ddcd089d1f', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '280aa2b17c78f53a4f110f8dc021e630241ebbe0', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        const showSearch = this._canShowFullTextSearch();
+        return (h("calcite-panel", { key: '56599be334eec65be00681d415db28917133b0c1', "full-height": true, "full-width": true }, showSearch &&
+            h("calcite-input", { key: '6de9873f6b7ab961dffe1334d2fc20b4322d8ea8', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: '4189b0d6c2a85116d529f5b7844c1f2d41657350', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '7f2e8276ad5345e21667b2dedc7e23f5c34672f5', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '63d44ac906c8d5584aac2cfbeec4cf0962d61abe', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '5843f8d7ca994cb799a9be0ab2f43a8f1e407e9a', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '288364bc505fe6bce8b1260dce5173163a795330', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'e30e2d46a0005dd3e0d289deb4721b9155d4df29', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -345,6 +371,112 @@ export class FeatureList {
         this._featureItems = await this.queryPage(page);
         this._isLoading = false;
     }
+    /**
+     * Validates if full text search is enabled and and indexes for fullTextSearch is set as display field on layer
+     * @protected
+     */
+    _canShowFullTextSearch() {
+        return ((this._selectedLayer?.capabilities)?.query)?.supportsFullTextSearch &&
+            this._selectedLayer.indexes.items.filter(i => i.indexType == 'FullText').length > 0;
+    }
+    /**
+     * Create list of full text search info
+     */
+    _getFullTextSearchInfo() {
+        this._fullTextSearchInfo = [];
+        //combine all the fullText index
+        if (((this._selectedLayer?.capabilities)?.query)?.supportsFullTextSearch) {
+            const fullTextIndexes = this._selectedLayer.indexes?.filter(i => i.indexType == 'FullText');
+            if (fullTextIndexes?.length) {
+                //create the search placeholder text
+                const onFields = [];
+                fullTextIndexes.forEach((index) => {
+                    onFields.push(...index.fields.split(','));
+                });
+                //get field alias for fields
+                const fieldAlias = [];
+                onFields.forEach(fieldName => {
+                    //We splitting the fields array so we get leading/trailing spaces, hence trim the fieldName
+                    const fieldInfo = this._selectedLayer.getField(fieldName.trim());
+                    fieldAlias.push(fieldInfo.alias);
+                });
+                this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", fieldAlias.join(', '));
+                this._fullTextSearchInfo.push({
+                    'onFields': ['*'],
+                    'searchTerm': '',
+                    'searchType': 'prefix'
+                });
+            }
+        }
+    }
+    /**
+     * Search using the fullTextSearch on layer and filter the list
+     * @param event The input change event
+     * @protected
+     */
+    async _searchTextChanged(event) {
+        this._fullTextSearchInfo.forEach(searchInfo => {
+            searchInfo.searchTerm = event.target.value;
+        });
+        await this._searchFullText();
+    }
+    /**
+     * Search using the fullTextSearch on layer
+     * @param event The input change event
+     * @protected
+     */
+    async _searchFullText() {
+        //always clear previous search definition
+        if (this._searchExpression) {
+            this._clearSearchDefinitionExpression();
+        }
+        let searchedIds = [];
+        if (this._fullTextSearchInfo) {
+            if (this._fullTextSearchInfo[0].searchTerm) {
+                const searchQueryParams = this._selectedLayer.createQuery();
+                searchQueryParams.fullText = this._fullTextSearchInfo;
+                searchedIds = await this._selectedLayer.queryObjectIds(searchQueryParams);
+                await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+            }
+        }
+        await this.initializeFeatureItems();
+    }
+    /**
+     * Update the search expression in layer
+     * @param searchedIds Array of objectIds satisfying the full search text
+     * @protected
+     */
+    async _updateSearchDefinitionExpression(searchedIds) {
+        const defExp = this._selectedLayer.definitionExpression;
+        if (searchedIds?.length) {
+            const searchExp = `objectId in(${searchedIds})`;
+            this._selectedLayer.definitionExpression = defExp?.indexOf(this._searchExpression) > -1 ?
+                defExp.replace(this._searchExpression, searchExp) :
+                defExp ? `${defExp} AND (${searchExp})` : searchExp;
+            this._searchExpression = searchExp;
+        }
+        else {
+            this._clearSearchDefinitionExpression();
+        }
+    }
+    /**
+     * Clears the applied search expression on the layer
+     *@protected
+     */
+    _clearSearchDefinitionExpression() {
+        const defExp = this._selectedLayer.definitionExpression;
+        //remove previous search expression first
+        if (this._searchExpression && defExp?.indexOf(this._searchExpression) > -1) {
+            // eslint-disable-next-line unicorn/prefer-ternary
+            if (defExp?.indexOf(' AND (' + this._searchExpression) > -1) {
+                this._selectedLayer.definitionExpression = defExp.replace(` AND (${this._searchExpression})`, '');
+            }
+            else {
+                this._selectedLayer.definitionExpression = defExp.replace(this._searchExpression, '');
+            }
+        }
+        this._searchExpression = undefined;
+    }
     /**
      * On feature click in feature list highlight the feature on the map
      * @param event feature clicked event
@@ -498,11 +630,13 @@ export class FeatureList {
         popupTitle = popupTitle ?? oId;
         // get the formatted like count
         const formattedLikeCount = Number(selectedFeature.attributes[this.reportingOptions?.[this._selectedLayer.id].likeField]).toLocaleString();
-        const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
-        const popupTitlePaddingClass = this.showUserImageInList || this.showFeatureSymbol ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
+        const popupTitleClass = (this.textSize === 'small' && !this.showFullTitle) ? 'feature-list-popup-title-small-ellipsis' : this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
+        // Set the width of the popuptitle class depending on calcite list width to avoid icon's overflow
+        const deductedWidth = this.showUserImageInList ? 115 : 65;
+        const width = this._calciteList.offsetWidth - deductedWidth;
         return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
             h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, userId: userInfo?.id, username: userInfo?.fullName ? userInfo.username : undefined }), this.showFeatureSymbol &&
-            h("div", { class: 'feature-symbol', ref: (el) => el && el.replaceChildren(featureSymbol), slot: "content-start" }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
+            h("div", { class: 'feature-symbol', ref: (el) => el && el.replaceChildren(featureSymbol), slot: "content-start" }), h("div", { class: `popup-title ${popupTitleClass}`, slot: "content-start", style: { maxWidth: this.textSize === 'large' ? 'none' : `${width}px` } }, popupTitle), this._likeFieldAvailable &&
             h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, h("span", null, this._abbreviatedLikeCount), h("calcite-icon", { icon: "thumbs-up", scale: 's' }), h("calcite-tooltip", { overlayPositioning: "fixed", placement: "top", "reference-element": oId.concat("like") }, formattedLikeCount)), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
@@ -910,6 +1044,26 @@ export class FeatureList {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "showFullTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When false popup title will shown in single line"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-full-title",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -918,6 +1072,8 @@ export class FeatureList {
             "_featureItems": {},
             "_featuresCount": {},
             "_isLoading": {},
+            "_searchPlaceHolder": {},
+            "_fullTextSearchInfo": {},
             "_translations": {}
         };
     }