@esri/solutions-components 0.11.21 → 0.11.23

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

@@ -23,6 +23,7 @@ import { loadModules } from "../../utils/loadModules";
 import { getAllTables } from "../../utils/mapViewUtils";
 export class FeatureDetails {
     constructor() {
+        this.enableSnapping = false;
         this.mapView = undefined;
         this.graphics = undefined;
         this.reportingOptions = undefined;
@@ -182,12 +183,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: '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 })));
+        return (h("calcite-panel", { key: '9fea2f56281419fd95720cd6b0f7369017d975b0', "full-height": true }, h("info-card", { key: 'ae9f7a316ba49b59dbbfaeb011aa3475b70f809b', allowEditing: false, enableSnapping: this.enableSnapping, 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: '7da88cf71d12c05321895a04d8e4039d74a466e9', class: "buttons-container" }, this._commentsAvailable &&
+                h("calcite-button", { key: 'ebc7b32a69c551fe8e2a8dd10d69cde8b9078e4f', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
+                h("calcite-button", { key: 'ef43f47829ebb6b04dbaaf7a20ee9848d9c21c87', 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: '64651be363c2d1a5083002dcad4bff4d040a396a', 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: 'fff5e1ce72310a5a41b2223578165011026e1b8c', 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
@@ -469,6 +470,26 @@ export class FeatureDetails {
     }
     static get properties() {
         return {
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "mapView": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -42,6 +42,7 @@ export class FeatureList {
         this.applyLayerViewFilter = false;
         this.reportingOptions = undefined;
         this.showFullTitle = true;
+        this.filterByMapExtent = false;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -75,6 +76,10 @@ export class FeatureList {
      * Symbol utils
      */
     symbolUtils;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
     /**
      * IPopupUtils: To fetch the list label using popup titles
      */
@@ -87,6 +92,10 @@ export class FeatureList {
      * __esri.Handle: Highlight handle of the selections
      */
     _highlightHandle;
+    /**
+     * __esri.Handle: Handle for filter by map extent
+     */
+    _filterByMapExtentHandle;
     /**
      * __esri.Collection: Highlight options for the selected layer
      */
@@ -147,6 +156,17 @@ export class FeatureList {
     async whereClauseHandler() {
         await this.initializeFeatureItems();
     }
+    /**
+     * Watch for filterByMapExtent change and update the features list
+     */
+    async filterByMapExtentHandler(enabled) {
+        if (enabled) {
+            this.initializeMapExtentFilter();
+        }
+        else if (this._filterByMapExtentHandle) {
+            this._filterByMapExtentHandle.remove();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -200,6 +220,9 @@ export class FeatureList {
             this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
             this._getFullTextSearchInfo();
         }
+        if (this.filterByMapExtent) {
+            this.initializeMapExtentFilter();
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -212,10 +235,10 @@ export class FeatureList {
      */
     render() {
         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 }))));
+        return (h("calcite-panel", { key: '465989fd2befec544d5a49a355a70dc13b6962dc', "full-height": true, "full-width": true }, showSearch &&
+            h("calcite-input", { key: 'b09776016a6d854336b44bbfcb98eabbd50d1e95', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: 'ac945c628e55c6dff43701c39d33c6a3a9ff8874', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '00cb64af86c8cd8600cdf435f918131cc3e66a38', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '29b8bd85b3cb55c6bfb6adc282f8e69a7f9ea2ce', slot: "message" }, this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '002f3171e10af68d189c71dbd9fa86d3106f13a2', 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: '3df744fa6f86db8c092e10dee631907516985fc5', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '0221928e0266e4b57c7ce5a34aa8ec758864312f', 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 }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -228,14 +251,16 @@ export class FeatureList {
      * @protected
      */
     async initModules() {
-        const [Color, esriConfig, symbolUtils] = await loadModules([
+        const [Color, esriConfig, symbolUtils, reactiveUtils] = await loadModules([
             "esri/Color",
             "esri/config",
-            "esri/symbols/support/symbolUtils"
+            "esri/symbols/support/symbolUtils",
+            "esri/core/reactiveUtils"
         ]);
         this.Color = Color;
         this.esriConfig = esriConfig;
         this.symbolUtils = symbolUtils;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Return the where condition string considering the defined where clause and layer's definition expression
@@ -272,12 +297,23 @@ export class FeatureList {
             this._featureItems = await this.queryPage(0);
             const whereCondition = await this.getWhereCondition();
             const query = {
-                where: whereCondition
+                where: whereCondition,
+                geometry: this.filterByMapExtent ? this.mapView.extent : null
             };
             this._featuresCount = await this._selectedLayer.queryFeatureCount(query);
             this._isLoading = false;
         }
     }
+    /**
+     * Updates the feature list based on map view extent
+     */
+    initializeMapExtentFilter() {
+        this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+            void this.initializeFeatureItems();
+        }, {
+            initial: true
+        });
+    }
     /**
      * On page change get the next updated feature list
      * @param event page change event
@@ -476,7 +512,8 @@ export class FeatureList {
             outFields: ["*"],
             returnGeometry: true,
             where: whereCondition,
-            outSpatialReference: this.mapView.spatialReference.toJSON()
+            outSpatialReference: this.mapView.spatialReference.toJSON(),
+            geometry: this.filterByMapExtent ? this.mapView.extent : null
         };
         //sort only when sort field and order is valid
         if (sortField && sortOrder) {
@@ -612,8 +649,8 @@ export class FeatureList {
                     if (width > 30) {
                         imgOrSvgElm.setAttribute('width', '30');
                     }
-                    else if (width < 19) {
-                        imgOrSvgElm.setAttribute('width', '20');
+                    if (height > 30) {
+                        imgOrSvgElm.setAttribute('height', '30');
                     }
                     imgOrSvgElm.setAttribute('viewBox', `0 0 ${width} ${height}`);
                 }
@@ -986,6 +1023,26 @@ export class FeatureList {
                 "attribute": "show-full-title",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "filterByMapExtent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the feature from map view extent will shown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-by-map-extent",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -1067,6 +1124,9 @@ export class FeatureList {
             }, {
                 "propName": "whereClause",
                 "methodName": "whereClauseHandler"
+            }, {
+                "propName": "filterByMapExtent",
+                "methodName": "filterByMapExtentHandler"
             }];
     }
 }

package/dist/collection/components/info-card/info-card.js

@@ -25,6 +25,7 @@ import { PopupUtils } from "../../utils/popupUtils";
 export class InfoCard {
     constructor() {
         this.enableEditGeometry = false;
+        this.enableSnapping = false;
         this.graphics = undefined;
         this.isLoading = false;
         this.isMobile = undefined;
@@ -270,8 +271,8 @@ export class InfoCard {
         // if user has navigated to the related feature then pass the related feature to the graphics
         const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;
         const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
-        return (h(Host, { key: '7662ad49543f574bbcb58f2b9611efefc0420259' }, h("calcite-shell", { key: '10075ee9cdf4d9e8a6dee615755c53eaaece8c21', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'fc668f26163e1135d37a5dee1c08d72d7feee9d5', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '73faf27901ae65feaf4faae8227aa21bfb1fb0a3', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: 'ced1edadc747dd7a087fed7b0a8e378def491381', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: '3f1ab07a2d197730d03497d0c5c5a2970e0f42ec', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '946cb64983426ce95c8a209aa7ae59405124709f', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '4123a740f077f6d203ae75338655a3e4f988b3dd', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '6968a12b2f41737cb221bc7ddbcab834f990fe3c' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '31d228643a734df28880c009f8d9a989f07acedb', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: 'f1dd88d8e5359e8acfc3508890185f8769365ec8' }, h("calcite-button", { key: '86190bfd8442bcf327c8aa60272a4071dead2dbc', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '6cf40e219e228547636a228d306dc6fc2929d186', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '39a43c0568c3d9e71587d3e3a38970a97f16efa4' }, this._translations.back))), h("calcite-action", { key: '373330d9385477e7b8701bff969d93ccf992f8b6', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'badd298438061c4c61b5f5561d0883fd063d1434', class: "pagination-count" }, this._count)), h("div", { key: '501d8970243fa398721c9db04cff5491f59fe045' }, h("calcite-button", { key: '9118e14df5f7932e91e823a5bd35fe6292af1c07', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '29a22347603b730ab160023667bb1fc7654e69d4', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '2404d5b018b0e6478a366d995c61e6ec40e9e486' }, this._translations.next))))), h("edit-card", { key: 'cad638e12cf79d7efbc8d4fa05da14ddd1140197', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'b0ce00184f525e8156d282e5efd30962b018e226', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '35f655f6dc9c274b07ccafe769e8e9af357862d1', slot: "title" }, this._translations.editDisabled), h("div", { key: 'e2b8de0fdb5eac8b37e5bb2a872fd390d9b42d29', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: '5b379325eff02faa0cc5bb93b625f63e75dac557' }, h("calcite-shell", { key: 'ce3b54deb9c64f8f6a4ec58a8dce37bb738e1307', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '3c2824073847b85b0a7a455c1e5ea1dc1d92169a', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '02645c7bc0a5e0c20a7888f6fc6e5ac0c913b908', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: 'f7168748d005c4347295b9f85ebac29f49f197d2', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: '5ff5d61eb97f46789d781ed1c7d3a446542f3a68', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '632f599ee2da0ea49baf4ee5fcff47434b3f2e8d', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '15673c1194d9ce01d6441330423352f54539158d', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: 'bf7f3c471e66a6902863a667642fb49eb2d98938' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '337417e71ee660dff91793b99a74983ca765d616', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '6425566f26dfd1a3e35b44823f7727ddffe80efc' }, h("calcite-button", { key: '7f6cf491407741b95b3f1c2e1d533f903dd402a6', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '1c209dd4229b3b3f1490563f722d19247454cb8f', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '5cdbe55fddd53f430171e286ca0cf7785c564f92' }, this._translations.back))), h("calcite-action", { key: '3964c9e101508084299235ab4e4e15dedd1cd3fd', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '3bc52707b7eac70e13caf9d2a24a09fc09456cf9', class: "pagination-count" }, this._count)), h("div", { key: '7c70dd2f40d1b799aa5c053e623cd43dc1da1594' }, h("calcite-button", { key: '9251259b306f5f0a13f953c742be7ea0606f1a2a', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '4634f29cf4e5c212f1f0fd46c6e5505b2f0d8dfe', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'f6480bb70598aa89547256af8867ab657e17aece' }, this._translations.next))))), h("edit-card", { key: '467a508438eceac82d387238edfaf3da7c644da9', class: editClass, enableEditGeometry: this.enableEditGeometry, enableSnapping: this.enableSnapping, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '53eba21ad693a3655d695fd1d1ae6211f7f1c68a', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '01ecc5c16948cd9f140d523cdc21dee1e45b4bcc', slot: "title" }, this._translations.editDisabled), h("div", { key: 'ae30d08e51b01a2eb1c7d3a6f276ba15b7ccf849', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -486,6 +487,26 @@ export class InfoCard {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "graphics": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -22,6 +22,7 @@ import { h, Fragment } from "@stencil/core";
 import { getAllLayers, getFeatureLayerView, getMapLayerHash } from "../../utils/mapViewUtils";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { formatNumber } from "../../utils/languageUtil";
+import { loadModules } from "esri-loader";
 export class LayerList {
     constructor() {
         this.mapView = undefined;
@@ -30,6 +31,7 @@ export class LayerList {
         this.showFeatureCount = true;
         this.showNextIcon = false;
         this.applyLayerViewFilter = false;
+        this.filterByMapExtent = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -50,6 +52,14 @@ export class LayerList {
      * ILayerItemHash: id/name lookup
      */
     _layerItemsHash;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
+    /**
+     * __esri.Handle: Handle for filter by map extent
+     */
+    _filterByMapExtentHandle;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -63,6 +73,17 @@ export class LayerList {
         this.el.lang = this.locale;
         await this._getTranslations();
     }
+    /**
+     * Watch for filterByMapExtent change and update the layer list
+     */
+    filterByMapExtentWatchHandler(enabled) {
+        if (enabled) {
+            this.initializeMapExtentFilter();
+        }
+        else if (this._filterByMapExtentHandle) {
+            this._filterByMapExtentHandle.remove();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -99,7 +120,11 @@ export class LayerList {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this.initModules();
         await this._getTranslations();
+        if (this.filterByMapExtent) {
+            this.initializeMapExtentFilter();
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -111,15 +136,37 @@ export class LayerList {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: 'a151c8fd65c50aacb23dcd0c858e52c0c7cd7e5e' }, this._isLoading && h("calcite-loader", { key: '544a134bccc29048ca80b996844cc944bcd97a24', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: '7557f91c8c3349c120c043ea59458b4c834dce2e', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'ea8b20f8c7da5053641cfad56e3395ae3c6286f5', slot: "title" }, this._translations.error), h("div", { key: '38aaed7b456aba0b1dd70183be03e9133834dfb4', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '547b0681145fd8d8663b786472be9e5161cbd693', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: 'ac83dce884ea72ee461cc628efb51bce08cf4ce5' }, this._isLoading && h("calcite-loader", { key: '77d15458f7a081acdae63f26ffaf7b2a5ca143ec', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: 'd48169628cdaf271a1263f1ef3218a98e64897f1', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'e5568829b5c90524f0d9313e4812d30837609db2', slot: "title" }, this._translations.error), h("div", { key: '13f04655936656439c1119c56a0f7f919994f402', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: 'b20eeb9052c5f75a2bf798e797ec928d37729484', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
+    async initModules() {
+        const [reactiveUtils] = await loadModules([
+            "esri/core/reactiveUtils"
+        ]);
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Updates the layer list based on map view extent
+     * @protected
+     */
+    initializeMapExtentFilter() {
+        this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+            void this.setLayers();
+        }, {
+            initial: true
+        });
+    }
     /**
      * Fetch the ids of the layers from the map
      * @returns Promise when the operation has completed
@@ -156,6 +203,7 @@ export class LayerList {
                             q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
                         }
                     }
+                    q.geometry = this.filterByMapExtent ? this.mapView.extent : null;
                     const result = eachLayer.queryFeatureCount(q);
                     def.push(result);
                     void result.then(async (resCount) => {
@@ -369,6 +417,26 @@ export class LayerList {
                 "attribute": "apply-layer-view-filter",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "filterByMapExtent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the features count from map view extent will shown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-by-map-extent",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -442,6 +510,9 @@ export class LayerList {
         return [{
                 "propName": "locale",
                 "methodName": "localeWatchHandler"
+            }, {
+                "propName": "filterByMapExtent",
+                "methodName": "filterByMapExtentWatchHandler"
             }];
     }
 }

package/dist/collection/components/layer-table/layer-table.js

@@ -638,8 +638,8 @@ export class LayerTable {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: 'a0a998de3a1b29c311a9fdfa87f3bd836481ba5a' }, h("div", { key: 'aafaf9f925ed7321e1ca7f15fc7db369212dc1dc' }, h("calcite-scrim", { key: '86459aed994823dbf1d774aad01e8207a7df5f4f', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: 'b29896a197cba444d2ac377779670394e29ecaf6' }, this._getTableControlRow("header"), h("div", { key: '0456651ac46f399eb04253387d7aae76995f4683', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '9ba484159832fea630bbb653bc2fc4e99e602674', class: "height-full width-full" }, showSearch &&
-            h("div", { key: 'bd4b72db51f44c2954e893e8ef7ec2a30efc4c45', class: "search-container" }, h("calcite-input", { key: '8811ff1dd71408fda37a0d7d2403671df24b5b7b', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '44a419089cf1e207f52ce19015c2870ce956e261', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '096f4fc7f5cc9500e7982bbfaceb2fcc4c82a1dd', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '5141283322c3492f26768af0b712df01ebb734ad' }, h("div", { key: '3a1742f91134a896a5cf8298e2359d2370a95b51' }, h("calcite-scrim", { key: 'e50e99752b35ad923bfa2adb005cc004d655c6fb', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: '51c5b8cd436c352144f5072ea07f26518b3602f4' }, this._getTableControlRow("header"), h("div", { key: '74ac951ac1a460ed555b70db37d6502585fd702d', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '0afcdaa113b15a7c4a95fb2615f7b8e19bffc5f3', class: "height-full width-full" }, showSearch &&
+            h("div", { key: 'eae1850675897ebf1f2f34a2c13f9b7e19a5b962', class: "search-container" }, h("calcite-input", { key: 'cde8ce3a6bf1d9da95825fc543c7e3d72643a1f6', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '78beeb6521f065fd4dbbf233f6807acefcc7fa66', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'bc258046891b9d8ca3e6e67fb16b9b7c909f2bbc', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19", id: "solutions-selected-count-div" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal())));
     }
@@ -720,16 +720,14 @@ export class LayerTable {
             this._clearSearchDefinitionExpression();
         }
         let searchedIds = [];
-        if (this._fullTextSearchInfo.length) {
-            if (this._fullTextSearchInfo[0].searchTerm) {
-                const searchQueryParams = this._layer.createQuery();
-                searchQueryParams.fullText = this._fullTextSearchInfo;
-                searchedIds = await this._layer.queryObjectIds(searchQueryParams);
-                if (showSelected && selectedIds?.length) {
-                    searchedIds = searchedIds.filter((id) => selectedIds.includes(id));
-                }
-                await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+        if (this._fullTextSearchInfo?.length && this._fullTextSearchInfo[0].searchTerm) {
+            const searchQueryParams = this._layer.createQuery();
+            searchQueryParams.fullText = this._fullTextSearchInfo;
+            searchedIds = await this._layer.queryObjectIds(searchQueryParams);
+            if (showSelected && selectedIds?.length) {
+                searchedIds = searchedIds.filter((id) => selectedIds.includes(id));
             }
+            await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
         }
         // highlight the feature only when selected feature is present in applied filter
         if (showSelected && searchedIds?.length) {
@@ -1901,7 +1899,10 @@ export class LayerTable {
         };
         const fields = this._table.columns.toArray().reduce((prev, cur) => {
             if (!cur.hidden) {
-                prev.push(cur.name.toLocaleLowerCase());
+                const name = cur?.name || cur?.fieldName;
+                if (name) {
+                    prev.push(name.toLocaleLowerCase());
+                }
             }
             return prev;
         }, []);

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -295,7 +295,7 @@ export class MapLayerPicker {
      */
     _getItemTypeIcon() {
         let itemTypeIcon = "layers";
-        if (this.selectedIds.length > 0) {
+        if (this.selectedIds.length > 0 && this._layerNameHash) {
             const id = this.selectedIds[0];
             itemTypeIcon = Object.keys(this._layerNameHash).indexOf(id) > -1 ? "layers" : "table";
         }

package/dist/collection/components/map-select-tools/map-select-tools.css

@@ -91,4 +91,5 @@
   padding: 5px 8px;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-color-text-2);
+  max-width: 400px;
 }

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -322,7 +322,7 @@ export class MapSelectTools {
         }
         const showBufferToolsClass = this.searchDistanceEnabled ? "search-distance" : "div-not-visible";
         const bufferDistance = typeof this.selectionSet?.distance === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this.searchDistanceEnabled, onCalciteSwitchChange: () => this.searchDistanceEnabled = !this.searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this.searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, locale: this.locale, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: this.selectionSet?.unit || this.defaultBufferUnit }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this.searchDistanceEnabled, onCalciteSwitchChange: () => this.searchDistanceEnabled = !this.searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this.searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, locale: this.locale, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: this.selectionSet?.unit || this.defaultBufferUnit }))));
     }
     /**
      * Renders the map layer picker component.
@@ -333,7 +333,7 @@ export class MapSelectTools {
             this.enableLayerFeaturesOnLoad = false;
         }
         const useLayerFeaturesClass = this.useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this.useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this.useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
     }
     /**
      * Renders the number of selected features

package/dist/collection/components/public-notification/public-notification.css

@@ -215,4 +215,11 @@
 
 .word-wrap-anywhere {
   word-wrap: anywhere;
+}
+
+.tooltip-message {
+  padding: 5px 8px;
+  font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-color-text-2);
+  max-width: 400px;
 }

package/dist/collection/components/public-notification/public-notification.js

@@ -625,7 +625,7 @@ export class PublicNotification {
     _getExportPage() {
         const hasSelections = this._hasSelections(this.showRefineSelection);
         const displayDuplicatesClass = this._numDuplicates > 0 ? "display-block" : "display-none";
-        return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt), width: "full" }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, h("span", { class: "font-weight-500" }, this._translations.pdf)), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, h("span", { class: "font-weight-500" }, this._translations.csv)))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: (!this._downloadActive || this._fetchingData) || (!this._addMap && !this._addResults), loading: this._fetchingData, onClick: () => void this._export(), width: "full" }, h("span", { class: "font-weight-500" }, this._translations.export))))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
+        return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt), width: "full" }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, h("span", { class: "font-weight-500" }, this._translations.pdf)), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, h("span", { class: "font-weight-500" }, this._translations.csv)))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: (!this._downloadActive || this._fetchingData) || (!this._addMap && !this._addResults), loading: this._fetchingData, onClick: () => void this._export(), width: "full" }, h("span", { class: "font-weight-500" }, this._translations.export))))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
     }
     /**
      * Store the user selected export type CSV || PDF
@@ -646,7 +646,7 @@ export class PublicNotification {
         const graphicsOptionsClass = this._addMap ? "display-flex" : "display-none";
         const title = this._titleValue ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
         const formatOptionsClass = this._addResults ? "" : "display-none";
-        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, locale: this.locale, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
+        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, locale: this.locale, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
     }
     /**
      * Toggle the _addMap state variable and update the graphics on the map

package/dist/collection/components/refine-selection/refine-selection.css

@@ -113,4 +113,11 @@ html[dir="rtl"] .main-label {
 
 .word-wrap-anywhere {
   word-wrap: anywhere;
+}
+
+.tooltip-message {
+  padding: 5px 8px;
+  font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-color-text-2);
+  max-width: 400px;
 }