@esri/solutions-components 0.5.6 → 0.5.8

package/dist/collection/utils/downloadUtils.js

@@ -196,6 +196,38 @@ export function _createFilename(selectionSetNames) {
   const title = selectionSetNames.length > 0 ? selectionSetNames.join(", ") : "download";
   return title;
 }
+/**
+ * Creates relationship queries for each relationship flag in a popup.
+ * @param layer Layer whose popup is to be examined
+ * @return Hash of relationships by their id, or null if there are no relationship flags in the
+ * popup; each relationship has the properties layer and relatedQuery for the related layer
+ * and the query for that layer
+ */
+export function _createRelationshipQueries(layer) {
+  const relationships = {};
+  const relationshipFieldPattern = /\{relationships\/\d+\//gm;
+  const relationshipIdPattern = /\d+/;
+  // Test if this popup has any relationship references
+  const matches = layer.popupTemplate.content[0].text.match(relationshipFieldPattern);
+  if (matches) {
+    matches.forEach(match => {
+      // Add a query to a found relationship if we don't already have one
+      const id = match.match(relationshipIdPattern)[0];
+      if (!relationships.hasOwnProperty(id)) {
+        const relatedQuery = {
+          outFields: ['*'],
+          relationshipId: id,
+          returnGeometry: false
+        };
+        relationships[id] = {
+          layer,
+          relatedQuery
+        };
+      }
+    });
+  }
+  return relationships;
+}
 /**
  * Prepares an attribute's value by applying domain and type information.
  *
@@ -256,7 +288,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
  * @returns Promise resolving when function is done
  */
 async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLayerPopup = true, includeHeaderNames = false) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const [intl] = await loadModules(["esri/intl"]);
   // Get the features to export
   const featureSet = await queryFeaturesByID(ids, layer);
@@ -270,6 +302,7 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
   const attributeFormats = {};
   // Get the label formatting, if any
   let labelFormat;
+  let relationshipQueries = {};
   let arcadeExecutors = {};
   if (layer.popupEnabled) {
     layer.popupTemplate.fieldInfos.forEach(
@@ -298,6 +331,8 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
     }
     else if (formatUsingLayerPopup && ((_d = (_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.content[0]) === null || _d === void 0 ? void 0 : _d.type) === "text") {
       labelFormat = _convertPopupTextToLabelSpec(layer.popupTemplate.content[0].text);
+      // Do we need any relationship queries?
+      relationshipQueries = _createRelationshipQueries(layer);
       // Do we need any Arcade executors?
       arcadeExecutors = await _createArcadeExecutors(labelFormat, layer);
     }
@@ -306,36 +341,75 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
   let labels;
   // eslint-disable-next-line unicorn/prefer-ternary
   if (labelFormat) {
+    console.log("labelFormat", labelFormat); //???
     const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
     const attributeRegExp = /\{\w+\}/g;
     // Find the label fields that we need to replace with values
-    const arcadeExpressionMatches = labelFormat.match(arcadeExpressionRegExp);
-    const attributeMatches = labelFormat.match(attributeRegExp);
+    const arcadeExpressionMatches = (_e = labelFormat.match(arcadeExpressionRegExp)) !== null && _e !== void 0 ? _e : [];
+    const attributeMatches = (_f = labelFormat.match(attributeRegExp)) !== null && _f !== void 0 ? _f : [];
     // Convert feature attributes into an array of labels
-    labels = featureSet.features.map(feature => {
+    const relationshipKeys = Object.keys(relationshipQueries);
+    labels = await Promise.all(featureSet.features.map(async (feature) => {
       let labelPrep = labelFormat;
-      // Replace Arcade expressions
-      if (arcadeExpressionMatches) {
-        arcadeExpressionMatches.forEach((match) => {
-          const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
-          const value = arcadeExecutors[expressionName].execute({ "$feature": feature });
-          labelPrep = labelPrep.replace(match, value);
-        });
-      }
-      // Replace non-Arcade fields
-      if (attributeMatches) {
-        attributeMatches.forEach((match) => {
-          const attributeName = match.substring(1, match.length - 1);
-          const value = _prepareAttributeValue(feature.attributes[attributeName], attributeTypes[attributeName], attributeDomains[attributeName], attributeFormats[attributeName], intl);
-          labelPrep = labelPrep.replace(match, value);
+      // Replace Arcade expressions in this feature
+      arcadeExpressionMatches.forEach((match) => {
+        const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+        const value = arcadeExecutors[expressionName].execute({ "$feature": feature });
+        labelPrep = labelPrep.replace(match, value);
+      });
+      // Replace relationship expressions in this feature
+      const relatedFeatureQueries = [];
+      const relationshipIds = [];
+      relationshipKeys.forEach((relationshipId) => {
+        const relationship = relationshipQueries[relationshipId];
+        const objectId = feature.attributes[relationship.layer.objectIdField];
+        const relatedQuery = Object.assign(Object.assign({}, relationship.relatedQuery), { objectIds: [objectId] });
+        relatedFeatureQueries.push(relationship.layer.queryRelatedFeatures(relatedQuery));
+        relationshipIds.push(relationshipId);
+      });
+      // Wait for all of the queries for related records for this label
+      const relatedFeatureQueryResults = await Promise.all(relatedFeatureQueries);
+      console.log("relatedFeatureQueryResults", relatedFeatureQueryResults); //???
+      relatedFeatureQueryResults.forEach((relatedFeatureQueryResult, i) => {
+        // We have an object with FeatureSets grouped by source layer or table objectIds
+        const relationshipId = relationshipIds[i];
+        console.log("relationshipId", relationshipId); //???
+        console.log("relatedFeatureQueryResult", relatedFeatureQueryResult); //???
+        // Run through the source layer or table objectIds
+        Object.keys(relatedFeatureQueryResult).forEach(relatedFeatureSetId => {
+          console.log("relatedFeatureSetId", relatedFeatureSetId); //???
+          // We have a feature set
+          const relatedFeatures = relatedFeatureQueryResult[relatedFeatureSetId].features;
+          console.log("relatedFeatures", relatedFeatures); //???
+          // Get the values from each feature and replace them in the label
+          relatedFeatures.forEach(feature => {
+            // Merge the base and related feature attributes and create the label
+            // Prefix related feature's attributes with "relationships/<id>/" to match popup
+            const rePrefix = "\{relationships/" + relationshipId + "/";
+            const reSuffix = "\}";
+            console.log("/rePrefix + attributeName + reSuffix/g", rePrefix + "attributeName" + reSuffix); //???
+            const attributes = feature.attributes;
+            Object.keys(attributes).forEach(attributeName => {
+              console.log("/rePrefix + attributeName + reSuffix/g", rePrefix + attributeName + reSuffix); //???
+              // Replace the value using the attribute name as a relationship
+              const attributeRelationshipRegExp = new RegExp(rePrefix + attributeName + reSuffix, "g");
+              labelPrep = labelPrep.replaceAll(attributeRelationshipRegExp, attributes[attributeName]);
+            });
+          });
         });
-      }
+      });
+      // Replace non-Arcade fields in this feature
+      attributeMatches.forEach((match) => {
+        const attributeName = match.substring(1, match.length - 1);
+        const value = _prepareAttributeValue(feature.attributes[attributeName], attributeTypes[attributeName], attributeDomains[attributeName], attributeFormats[attributeName], intl);
+        labelPrep = labelPrep.replace(match, value);
+      });
       // Split label into lines
       let label = labelPrep.split(lineSeparatorChar);
       // Trim lines
       label = label.map(line => line.trim());
       return label;
-    });
+    }));
   }
   else {
     // Export all attributes

package/dist/collection/utils/downloadUtils.ts

@@ -43,6 +43,25 @@ interface IAttributeTypes {
   [attributeName: string]: string;
 }
 
+interface ILayerRelationshipQuery {
+  layer: __esri.FeatureLayer;
+  relatedQuery: IRelatedFeaturesQuery;
+}
+
+interface ILayerRelationshipQueryHash {
+  [relationshipId: string]: ILayerRelationshipQuery;
+}
+
+// Class RelationshipQuery doesn't appear to work, and so since
+// https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#queryRelatedFeatures
+// says that the relationshipQuery argument is autocast, we'll set up a variant for the class
+interface IRelatedFeaturesQuery {
+  outFields: string[];
+  relationshipId: string;
+  returnGeometry: boolean;
+  objectIds?: number;
+}
+
 const lineSeparatorChar = "|";
 
 //#endregion
@@ -278,6 +297,44 @@ export function _createFilename(
   return title;
 }
 
+/**
+ * Creates relationship queries for each relationship flag in a popup.
+ * @param layer Layer whose popup is to be examined
+ * @return Hash of relationships by their id, or null if there are no relationship flags in the
+ * popup; each relationship has the properties layer and relatedQuery for the related layer
+ * and the query for that layer
+ */
+export function _createRelationshipQueries(
+  layer: __esri.FeatureLayer,
+): ILayerRelationshipQueryHash {
+
+  const relationships: ILayerRelationshipQueryHash = {};
+  const relationshipFieldPattern = /\{relationships\/\d+\//gm;
+  const relationshipIdPattern = /\d+/;
+
+  // Test if this popup has any relationship references
+  const matches = layer.popupTemplate.content[0].text.match(relationshipFieldPattern);
+  if (matches) {
+    matches.forEach(match => {
+      // Add a query to a found relationship if we don't already have one
+      const id = match.match(relationshipIdPattern)[0];
+      if (!relationships.hasOwnProperty(id)) {
+        const relatedQuery: IRelatedFeaturesQuery = {
+          outFields: ['*'],
+          relationshipId: id,
+          returnGeometry: false
+        };
+        relationships[id] = {
+          layer,
+          relatedQuery
+        } as ILayerRelationshipQuery;
+      }
+    });
+  }
+
+  return relationships;
+}
+
 /**
  * Prepares an attribute's value by applying domain and type information.
  *
@@ -369,6 +426,7 @@ async function _prepareLabels(
 
   // Get the label formatting, if any
   let labelFormat: string;
+  let relationshipQueries: ILayerRelationshipQueryHash = {};
   let arcadeExecutors: IArcadeExecutors = {};
   if (layer.popupEnabled) {
     layer.popupTemplate.fieldInfos.forEach(
@@ -401,6 +459,9 @@ async function _prepareLabels(
     } else if (formatUsingLayerPopup && layer.popupTemplate?.content[0]?.type === "text") {
       labelFormat = _convertPopupTextToLabelSpec(layer.popupTemplate.content[0].text);
 
+      // Do we need any relationship queries?
+      relationshipQueries = _createRelationshipQueries(layer);
+
       // Do we need any Arcade executors?
       arcadeExecutors = await _createArcadeExecutors(labelFormat, layer);
     }
@@ -410,41 +471,100 @@ async function _prepareLabels(
   let labels: string[][];
   // eslint-disable-next-line unicorn/prefer-ternary
   if (labelFormat) {
+    console.log("labelFormat", labelFormat);//???
     const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
     const attributeRegExp = /\{\w+\}/g;
 
     // Find the label fields that we need to replace with values
-    const arcadeExpressionMatches = labelFormat.match(arcadeExpressionRegExp);
-    const attributeMatches = labelFormat.match(attributeRegExp);
+    const arcadeExpressionMatches = labelFormat.match(arcadeExpressionRegExp) ?? [];
+    const attributeMatches = labelFormat.match(attributeRegExp) ?? [];
 
     // Convert feature attributes into an array of labels
-    labels = featureSet.features.map(
-      feature => {
+    const relationshipKeys = Object.keys(relationshipQueries);
+    labels = await Promise.all(featureSet.features.map(
+      async feature => {
         let labelPrep = labelFormat;
 
-        // Replace Arcade expressions
-        if (arcadeExpressionMatches) {
-          arcadeExpressionMatches.forEach(
-            (match: string) => {
-              const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
-              const value = arcadeExecutors[expressionName].execute({"$feature": feature});
-              labelPrep = labelPrep.replace(match, value);
-            }
-          )
-        }
+        // Replace Arcade expressions in this feature
+        arcadeExpressionMatches.forEach(
+          (match: string) => {
+            const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+            const value = arcadeExecutors[expressionName].execute({"$feature": feature});
+            labelPrep = labelPrep.replace(match, value);
+          }
+        )
+
+        // Replace relationship expressions in this feature
+        const relatedFeatureQueries = [] as Promise<__esri.FeatureSet>[];
+        const relationshipIds = [] as string[];
+        relationshipKeys.forEach(
+          (relationshipId) => {
+            const relationship = relationshipQueries[relationshipId];
+            const objectId = feature.attributes[relationship.layer.objectIdField];
+            const relatedQuery = {
+              ...relationship.relatedQuery,
+              objectIds: [objectId]
+            };
+            relatedFeatureQueries.push(relationship.layer.queryRelatedFeatures(relatedQuery as any));
+            relationshipIds.push(relationshipId);
+          }
+        );
 
-        // Replace non-Arcade fields
-        if (attributeMatches) {
-          attributeMatches.forEach(
-            (match: string) => {
-              const attributeName = match.substring(1, match.length - 1);
-              const value = _prepareAttributeValue(feature.attributes[attributeName],
-                attributeTypes[attributeName], attributeDomains[attributeName],
-                attributeFormats[attributeName], intl);
-              labelPrep = labelPrep.replace(match, value);
-            }
-          )
-        }
+        // Wait for all of the queries for related records for this label
+        const relatedFeatureQueryResults = await Promise.all(relatedFeatureQueries);
+        console.log("relatedFeatureQueryResults", relatedFeatureQueryResults);//???
+        relatedFeatureQueryResults.forEach(
+          (relatedFeatureQueryResult, i) => {
+            // We have an object with FeatureSets grouped by source layer or table objectIds
+            const relationshipId = relationshipIds[i];
+            console.log("relationshipId", relationshipId);//???
+            console.log("relatedFeatureQueryResult", relatedFeatureQueryResult);//???
+
+            // Run through the source layer or table objectIds
+            Object.keys(relatedFeatureQueryResult).forEach(
+              relatedFeatureSetId => {
+                console.log("relatedFeatureSetId", relatedFeatureSetId);//???
+                // We have a feature set
+                const relatedFeatures = relatedFeatureQueryResult[relatedFeatureSetId].features;
+                console.log("relatedFeatures", relatedFeatures);//???
+
+                // Get the values from each feature and replace them in the label
+                relatedFeatures.forEach(
+                  feature => {
+                    // Merge the base and related feature attributes and create the label
+                    // Prefix related feature's attributes with "relationships/<id>/" to match popup
+                    const rePrefix = "\{relationships/" + relationshipId + "/";
+                    const reSuffix = "\}";
+                    console.log("/rePrefix + attributeName + reSuffix/g", rePrefix + "attributeName" + reSuffix);//???
+
+                    const attributes = feature.attributes;
+                    Object.keys(attributes).forEach(
+                      attributeName => {
+                        console.log("/rePrefix + attributeName + reSuffix/g", rePrefix + attributeName + reSuffix);//???
+                        // Replace the value using the attribute name as a relationship
+                        const attributeRelationshipRegExp = new RegExp(rePrefix + attributeName + reSuffix, "g");
+                        labelPrep = labelPrep.replaceAll(attributeRelationshipRegExp, attributes[attributeName]);
+                      }
+                    );
+                  }
+                );
+              }
+            );
+          }
+        );
+
+        // Replace non-Arcade fields in this feature
+        attributeMatches.forEach(
+          (match: string) => {
+            const attributeName = match.substring(1, match.length - 1);
+
+            const value = _prepareAttributeValue(feature.attributes[attributeName],
+              attributeTypes[attributeName], attributeDomains[attributeName],
+              attributeFormats[attributeName], intl);
+            labelPrep = labelPrep.replace(match, value);
+
+          }
+        )
 
         // Split label into lines
         let label = labelPrep.split(lineSeparatorChar);
@@ -454,7 +574,7 @@ async function _prepareLabels(
 
         return label;
       }
-    );
+    ));
 
   } else {
     // Export all attributes

package/dist/components/downloadUtils.js

@@ -2425,6 +2425,38 @@ function _createFilename(selectionSetNames) {
   const title = selectionSetNames.length > 0 ? selectionSetNames.join(", ") : "download";
   return title;
 }
+/**
+ * Creates relationship queries for each relationship flag in a popup.
+ * @param layer Layer whose popup is to be examined
+ * @return Hash of relationships by their id, or null if there are no relationship flags in the
+ * popup; each relationship has the properties layer and relatedQuery for the related layer
+ * and the query for that layer
+ */
+function _createRelationshipQueries(layer) {
+  const relationships = {};
+  const relationshipFieldPattern = /\{relationships\/\d+\//gm;
+  const relationshipIdPattern = /\d+/;
+  // Test if this popup has any relationship references
+  const matches = layer.popupTemplate.content[0].text.match(relationshipFieldPattern);
+  if (matches) {
+    matches.forEach(match => {
+      // Add a query to a found relationship if we don't already have one
+      const id = match.match(relationshipIdPattern)[0];
+      if (!relationships.hasOwnProperty(id)) {
+        const relatedQuery = {
+          outFields: ['*'],
+          relationshipId: id,
+          returnGeometry: false
+        };
+        relationships[id] = {
+          layer,
+          relatedQuery
+        };
+      }
+    });
+  }
+  return relationships;
+}
 /**
  * Prepares an attribute's value by applying domain and type information.
  *
@@ -2485,7 +2517,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
  * @returns Promise resolving when function is done
  */
 async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLayerPopup = true, includeHeaderNames = false) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const [intl] = await loadModules(["esri/intl"]);
   // Get the features to export
   const featureSet = await queryFeaturesByID(ids, layer);
@@ -2499,6 +2531,7 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
   const attributeFormats = {};
   // Get the label formatting, if any
   let labelFormat;
+  let relationshipQueries = {};
   let arcadeExecutors = {};
   if (layer.popupEnabled) {
     layer.popupTemplate.fieldInfos.forEach(
@@ -2527,6 +2560,8 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
     }
     else if (formatUsingLayerPopup && ((_d = (_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.content[0]) === null || _d === void 0 ? void 0 : _d.type) === "text") {
       labelFormat = _convertPopupTextToLabelSpec(layer.popupTemplate.content[0].text);
+      // Do we need any relationship queries?
+      relationshipQueries = _createRelationshipQueries(layer);
       // Do we need any Arcade executors?
       arcadeExecutors = await _createArcadeExecutors(labelFormat, layer);
     }
@@ -2535,36 +2570,75 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
   let labels;
   // eslint-disable-next-line unicorn/prefer-ternary
   if (labelFormat) {
+    console.log("labelFormat", labelFormat); //???
     const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
     const attributeRegExp = /\{\w+\}/g;
     // Find the label fields that we need to replace with values
-    const arcadeExpressionMatches = labelFormat.match(arcadeExpressionRegExp);
-    const attributeMatches = labelFormat.match(attributeRegExp);
+    const arcadeExpressionMatches = (_e = labelFormat.match(arcadeExpressionRegExp)) !== null && _e !== void 0 ? _e : [];
+    const attributeMatches = (_f = labelFormat.match(attributeRegExp)) !== null && _f !== void 0 ? _f : [];
     // Convert feature attributes into an array of labels
-    labels = featureSet.features.map(feature => {
+    const relationshipKeys = Object.keys(relationshipQueries);
+    labels = await Promise.all(featureSet.features.map(async (feature) => {
       let labelPrep = labelFormat;
-      // Replace Arcade expressions
-      if (arcadeExpressionMatches) {
-        arcadeExpressionMatches.forEach((match) => {
-          const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
-          const value = arcadeExecutors[expressionName].execute({ "$feature": feature });
-          labelPrep = labelPrep.replace(match, value);
-        });
-      }
-      // Replace non-Arcade fields
-      if (attributeMatches) {
-        attributeMatches.forEach((match) => {
-          const attributeName = match.substring(1, match.length - 1);
-          const value = _prepareAttributeValue(feature.attributes[attributeName], attributeTypes[attributeName], attributeDomains[attributeName], attributeFormats[attributeName], intl);
-          labelPrep = labelPrep.replace(match, value);
+      // Replace Arcade expressions in this feature
+      arcadeExpressionMatches.forEach((match) => {
+        const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+        const value = arcadeExecutors[expressionName].execute({ "$feature": feature });
+        labelPrep = labelPrep.replace(match, value);
+      });
+      // Replace relationship expressions in this feature
+      const relatedFeatureQueries = [];
+      const relationshipIds = [];
+      relationshipKeys.forEach((relationshipId) => {
+        const relationship = relationshipQueries[relationshipId];
+        const objectId = feature.attributes[relationship.layer.objectIdField];
+        const relatedQuery = Object.assign(Object.assign({}, relationship.relatedQuery), { objectIds: [objectId] });
+        relatedFeatureQueries.push(relationship.layer.queryRelatedFeatures(relatedQuery));
+        relationshipIds.push(relationshipId);
+      });
+      // Wait for all of the queries for related records for this label
+      const relatedFeatureQueryResults = await Promise.all(relatedFeatureQueries);
+      console.log("relatedFeatureQueryResults", relatedFeatureQueryResults); //???
+      relatedFeatureQueryResults.forEach((relatedFeatureQueryResult, i) => {
+        // We have an object with FeatureSets grouped by source layer or table objectIds
+        const relationshipId = relationshipIds[i];
+        console.log("relationshipId", relationshipId); //???
+        console.log("relatedFeatureQueryResult", relatedFeatureQueryResult); //???
+        // Run through the source layer or table objectIds
+        Object.keys(relatedFeatureQueryResult).forEach(relatedFeatureSetId => {
+          console.log("relatedFeatureSetId", relatedFeatureSetId); //???
+          // We have a feature set
+          const relatedFeatures = relatedFeatureQueryResult[relatedFeatureSetId].features;
+          console.log("relatedFeatures", relatedFeatures); //???
+          // Get the values from each feature and replace them in the label
+          relatedFeatures.forEach(feature => {
+            // Merge the base and related feature attributes and create the label
+            // Prefix related feature's attributes with "relationships/<id>/" to match popup
+            const rePrefix = "\{relationships/" + relationshipId + "/";
+            const reSuffix = "\}";
+            console.log("/rePrefix + attributeName + reSuffix/g", rePrefix + "attributeName" + reSuffix); //???
+            const attributes = feature.attributes;
+            Object.keys(attributes).forEach(attributeName => {
+              console.log("/rePrefix + attributeName + reSuffix/g", rePrefix + attributeName + reSuffix); //???
+              // Replace the value using the attribute name as a relationship
+              const attributeRelationshipRegExp = new RegExp(rePrefix + attributeName + reSuffix, "g");
+              labelPrep = labelPrep.replaceAll(attributeRelationshipRegExp, attributes[attributeName]);
+            });
+          });
         });
-      }
+      });
+      // Replace non-Arcade fields in this feature
+      attributeMatches.forEach((match) => {
+        const attributeName = match.substring(1, match.length - 1);
+        const value = _prepareAttributeValue(feature.attributes[attributeName], attributeTypes[attributeName], attributeDomains[attributeName], attributeFormats[attributeName], intl);
+        labelPrep = labelPrep.replace(match, value);
+      });
       // Split label into lines
       let label = labelPrep.split(lineSeparatorChar);
       // Trim lines
       label = label.map(line => line.trim());
       return label;
-    });
+    }));
   }
   else {
     // Export all attributes

package/dist/components/map-select-tools2.js

@@ -22,14 +22,14 @@ import { d as defineCustomElement$b } from './input-message.js';
 import { d as defineCustomElement$a } from './label.js';
 import { d as defineCustomElement$9 } from './loader.js';
 import { d as defineCustomElement$8 } from './option.js';
-import { d as defineCustomElement$7 } from './progress.js';
-import { d as defineCustomElement$6 } from './select.js';
-import { d as defineCustomElement$5 } from './slider.js';
-import { d as defineCustomElement$4 } from './switch.js';
-import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$7 } from './popover.js';
+import { d as defineCustomElement$6 } from './progress.js';
+import { d as defineCustomElement$5 } from './select.js';
+import { d as defineCustomElement$4 } from './slider.js';
+import { d as defineCustomElement$3 } from './switch.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
 
-const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.tooltip-container{justify-content:center;display:flex}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}";
+const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.tooltip-container{display:flex}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}";
 
 const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -200,14 +200,14 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     var _a, _b;
     const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
     const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.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", icon: "question", id: "search-distance-icon", scale: "s" }), h("calcite-tooltip", { label: "Data disclaimer", placement: "auto", "reference-element": "search-distance-icon" }, h("span", null, 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, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.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", 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, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
   }
   /**
    * Renders the map layer picker component.
    */
   _getUseLayerFeaturesOptions() {
     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", icon: "question", id: "use-layer-features-icon", scale: "s" }), h("calcite-tooltip", { label: "Data disclaimer", placement: "auto", "reference-element": "use-layer-features-icon" }, h("span", null, 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.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }))));
+    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", 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.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }))));
   }
   /**
    * Renders the number of selected features
@@ -809,7 +809,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["map-select-tools", "buffer-tools", "calcite-action", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-label", "calcite-loader", "calcite-option", "calcite-progress", "calcite-select", "calcite-slider", "calcite-switch", "calcite-tooltip", "map-draw-tools", "map-layer-picker"];
+  const components = ["map-select-tools", "buffer-tools", "calcite-action", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-label", "calcite-loader", "calcite-option", "calcite-popover", "calcite-progress", "calcite-select", "calcite-slider", "calcite-switch", "map-draw-tools", "map-layer-picker"];
   components.forEach(tagName => { switch (tagName) {
     case "map-select-tools":
       if (!customElements.get(tagName)) {
@@ -876,27 +876,27 @@ function defineCustomElement() {
         defineCustomElement$8();
       }
       break;
-    case "calcite-progress":
+    case "calcite-popover":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "calcite-select":
+    case "calcite-progress":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "calcite-slider":
+    case "calcite-select":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "calcite-switch":
+    case "calcite-slider":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "calcite-tooltip":
+    case "calcite-switch":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }