@esri/solutions-components 0.5.14 → 0.5.16

package/dist/cjs/calcite-input-text_5.cjs.entry.js

@@ -1143,7 +1143,8 @@ const MapSelectTools = class {
     if (!this.selectLayerView || id !== this.selectLayerView.layer.id) {
       this.selectLayerView = await mapViewUtils.getMapLayerView(this.mapView, id);
       this._updateLabel();
-      await this._highlightWithOIDsOrGeoms();
+      this._bufferGeometry ? await this._selectFeatures([this._bufferGeometry]) :
+        await this._highlightWithOIDsOrGeoms();
     }
   }
   /**
@@ -1491,7 +1492,11 @@ const PdfDownload = class {
    * Renders the component.
    */
   render() {
-    return (index.h(index.Host, null, index.h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } }, this._renderItems())));
+    return (index.h(index.Host, null, index.h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } })));
+  }
+  componentDidRender() {
+    // Render the options outside of Stencil's rendering so that it doesn't mangle RTL text with embedded LTR
+    this._renderOptions();
   }
   //--------------------------------------------------------------------------
   //
@@ -1521,7 +1526,8 @@ const PdfDownload = class {
    */
   _getLabelSizeText(labelInfo) {
     const lNum = labelInfo.descriptionPDF.labelsPerPageDisplay;
-    const lSize = `${labelInfo.descriptionPDF.labelWidthDisplay} x ${labelInfo.descriptionPDF.labelHeightDisplay}`;
+    const lSize = "‎" + labelInfo.descriptionPDF.labelWidthDisplay + " x " +
+      labelInfo.descriptionPDF.labelHeightDisplay + "‏";
     return this._translations.pdfLabel.replace("{{n}}", lNum).replace("{{labelSize}}", lSize);
   }
   /**
@@ -1534,28 +1540,29 @@ const PdfDownload = class {
     this._translations = translations[0];
   }
   /**
-   * Renders the pdf export size options
-   *
-   * @returns Node array of size options
+   * Renders the pdf export size options and adds them to the `select` component
    *
    * @protected
    */
-  _renderItems() {
+  _renderOptions() {
     const s = pdfLabelFormats;
     const sortedPdfIndo = (s.default || s).sort((a, b) => {
       const _a = parseInt(a.descriptionPDF.labelsPerPageDisplay, 10);
       const _b = parseInt(b.descriptionPDF.labelsPerPageDisplay, 10);
       return _a < _b ? -1 : _a > _b ? 1 : 0;
     });
-    return sortedPdfIndo.map((l) => {
-      return (index.h("calcite-option", { value: l }, this._getLabelSizeText(l)));
+    sortedPdfIndo.forEach((l) => {
+      const option = document.createElement("calcite-option");
+      option.value = l;
+      option.innerHTML = this._getLabelSizeText(l);
+      this._labelInfoElement.appendChild(option);
     });
   }
   get el() { return index.getElement(this); }
 };
 PdfDownload.style = pdfDownloadCss;
 
-const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:var(--calcite-ui-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}";
+const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:var(--calcite-ui-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.font-weight-500{font-weight:500}";
 
 const RefineSelection = class {
   constructor(hostRef) {
@@ -1613,7 +1620,7 @@ const RefineSelection = class {
   render() {
     var _a, _b;
     const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-    return (index.h(index.Host, null, index.h("div", { class: layerPickerClass + " padding-top-sides-1" }, index.h("div", { class: "display-flex" }, index.h("calcite-label", { class: "font-bold width-full label-margin-0" }, index.h("div", { class: "display-flex" }, this._translations.inputLayer, index.h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), index.h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), index.h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, index.h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), index.h("div", { class: "padding-1" }, index.h("div", { class: "padding-bottom-1" }, index.h("calcite-segmented-control", { class: "w-100" }, index.h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(interfaces.ESelectionMode.ADD), value: interfaces.ESelectionMode.ADD }, this._translations.add), index.h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(interfaces.ESelectionMode.REMOVE), value: interfaces.ESelectionMode.REMOVE }, this._translations.remove))), index.h("div", null, index.h("map-draw-tools", { active: true, drawMode: interfaces.EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), index.h("br", null), (index.h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+    return (index.h(index.Host, null, index.h("div", { class: layerPickerClass + " padding-top-sides-1" }, index.h("div", { class: "display-flex" }, index.h("calcite-label", { class: "font-bold width-full label-margin-0" }, index.h("div", { class: "display-flex" }, this._translations.inputLayer, index.h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), index.h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), index.h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, index.h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), index.h("div", { class: "padding-1" }, index.h("div", { class: "padding-bottom-1" }, index.h("calcite-segmented-control", { class: "w-100" }, index.h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(interfaces.ESelectionMode.ADD), value: interfaces.ESelectionMode.ADD }, index.h("span", { class: "font-weight-500" }, this._translations.add)), index.h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(interfaces.ESelectionMode.REMOVE), value: interfaces.ESelectionMode.REMOVE }, index.h("span", { class: "font-weight-500" }, this._translations.remove)))), index.h("div", null, index.h("map-draw-tools", { active: true, drawMode: interfaces.EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), index.h("br", null), (index.h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/cjs/public-notification.cjs.entry.js

@@ -17,7 +17,7 @@ const downloadUtils = require('./downloadUtils-7a0fd3c0.js');
 require('./index-e1b1954f.js');
 require('./_commonjsHelpers-384729db.js');
 
-const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-ui-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.img-container{width:100%;height:100%}";
+const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-ui-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.img-container{width:100%;height:100%}.font-weight-500{font-weight:500}.background-override{height:100%;width:100%;--calcite-ui-foreground-3:var(--calcite-ui-brand);--calcite-ui-foreground-2:var(--calcite-ui-brand-hover);--calcite-ui-text-1:var(--calcite-ui-text-inverse)}";
 
 const PublicNotification = class {
   constructor(hostRef) {
@@ -286,7 +286,7 @@ const PublicNotification = class {
    */
   _getActionGroup(icon, pageType, tip) {
     const sizeClass = this.showRefineSelection ? " w-1-3" : " w-1-2";
-    return (index.h("calcite-action-group", { class: "action-center" + sizeClass, layout: "horizontal" }, index.h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, index.h("span", null, tip))));
+    return (index.h("calcite-action-group", { class: "action-center" + sizeClass, layout: "horizontal" }, index.h("div", { class: "background-override" }, index.h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" })), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, index.h("span", null, tip))));
   }
   /**
    * Navigate to the defined page type
@@ -333,7 +333,7 @@ const PublicNotification = class {
    */
   _getListPage() {
     const hasSets = this._hasSelections();
-    return (index.h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (this._getOnboardingImage()), index.h("div", { class: "display-flex padding-1" }, index.h("calcite-button", { onClick: () => { this._setPageType(interfaces.EPageType.SELECT); }, width: "full" }, this._translations.add))));
+    return (index.h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (this._getOnboardingImage()), index.h("div", { class: "display-flex padding-1" }, index.h("calcite-button", { onClick: () => { this._setPageType(interfaces.EPageType.SELECT); }, width: "full" }, index.h("span", { class: "font-weight-500" }, this._translations.add)))));
   }
   /**
    * Display an image to help illustrate the basic workflow of the widget
@@ -484,7 +484,7 @@ const PublicNotification = class {
   _getExportPage() {
     const hasSelections = this._hasSelections(this.showRefineSelection);
     const displayDuplicatesClass = this._numDuplicates > 0 ? "display-block" : "display-none";
-    return (index.h("calcite-panel", null, index.h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (index.h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), index.h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, index.h("div", { class: "display-flex" }, index.h("calcite-label", { layout: "inline" }, index.h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), index.h("div", { class: "display-flex" }, this._translations.removeDuplicate, index.h("div", { class: "info-message padding-start-1-2" }, index.h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), index.h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "remove-duplicates-icon", scale: "s" })), index.h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, index.h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), index.h("div", { class: "border-bottom" }), index.h("div", { class: "padding-top-sides-1" }, index.h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt) }, index.h("calcite-segmented-control-item", { checked: this._exportType === interfaces.EExportType.PDF, class: "w-50 end-border", value: interfaces.EExportType.PDF }, this._translations.pdf), index.h("calcite-segmented-control-item", { checked: this._exportType === interfaces.EExportType.CSV, class: "w-50", value: interfaces.EExportType.CSV }, this._translations.csv))), index.h("div", { class: "padding-bottom-1" }, this._getExportOptions()), index.h("div", { class: "padding-1 display-flex" }, index.h("calcite-button", { disabled: !this._downloadActive, onClick: () => void this._export(), width: "full" }, this._translations.export)))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
+    return (index.h("calcite-panel", null, index.h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (index.h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), index.h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, index.h("div", { class: "display-flex" }, index.h("calcite-label", { layout: "inline" }, index.h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), index.h("div", { class: "display-flex" }, this._translations.removeDuplicate, index.h("div", { class: "info-message padding-start-1-2" }, index.h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), index.h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "remove-duplicates-icon", scale: "s" })), index.h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, index.h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), index.h("div", { class: "border-bottom" }), index.h("div", { class: "padding-top-sides-1" }, index.h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt) }, index.h("calcite-segmented-control-item", { checked: this._exportType === interfaces.EExportType.PDF, class: "w-50 end-border", value: interfaces.EExportType.PDF }, index.h("span", { class: "font-weight-500" }, this._translations.pdf)), index.h("calcite-segmented-control-item", { checked: this._exportType === interfaces.EExportType.CSV, class: "w-50", value: interfaces.EExportType.CSV }, index.h("span", { class: "font-weight-500" }, this._translations.csv)))), index.h("div", { class: "padding-bottom-1" }, this._getExportOptions()), index.h("div", { class: "padding-1 display-flex" }, index.h("calcite-button", { disabled: !this._downloadActive, onClick: () => void this._export(), width: "full" }, index.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
@@ -528,7 +528,7 @@ const PublicNotification = class {
    * @protected
    */
   _getPageNavButtons(topLabel, topDisabled, topFunc, bottomLabel, bottomDisabled, bottomFunc) {
-    return (index.h("div", { class: "padding-bottom-1" }, index.h("div", { class: "display-flex padding-top-sides-1" }, index.h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, topLabel)), index.h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, index.h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, bottomLabel))));
+    return (index.h("div", { class: "padding-bottom-1" }, index.h("div", { class: "display-flex padding-top-sides-1" }, index.h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, index.h("span", { class: "font-weight-500" }, topLabel))), index.h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, index.h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, index.h("span", { class: "font-weight-500" }, bottomLabel)))));
   }
   /**
    * Create an informational notice

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

@@ -690,7 +690,8 @@ export class MapSelectTools {
     if (!this.selectLayerView || id !== this.selectLayerView.layer.id) {
       this.selectLayerView = await getMapLayerView(this.mapView, id);
       this._updateLabel();
-      await this._highlightWithOIDsOrGeoms();
+      this._bufferGeometry ? await this._selectFeatures([this._bufferGeometry]) :
+        await this._highlightWithOIDsOrGeoms();
     }
   }
   /**

package/dist/collection/components/pdf-download/pdf-download.js

@@ -84,7 +84,11 @@ export class PdfDownload {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } }, this._renderItems())));
+    return (h(Host, null, h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } })));
+  }
+  componentDidRender() {
+    // Render the options outside of Stencil's rendering so that it doesn't mangle RTL text with embedded LTR
+    this._renderOptions();
   }
   //--------------------------------------------------------------------------
   //
@@ -114,7 +118,8 @@ export class PdfDownload {
    */
   _getLabelSizeText(labelInfo) {
     const lNum = labelInfo.descriptionPDF.labelsPerPageDisplay;
-    const lSize = `${labelInfo.descriptionPDF.labelWidthDisplay} x ${labelInfo.descriptionPDF.labelHeightDisplay}`;
+    const lSize = "‎" + labelInfo.descriptionPDF.labelWidthDisplay + " x " +
+      labelInfo.descriptionPDF.labelHeightDisplay + "‏";
     return this._translations.pdfLabel.replace("{{n}}", lNum).replace("{{labelSize}}", lSize);
   }
   /**
@@ -127,21 +132,22 @@ export class PdfDownload {
     this._translations = translations[0];
   }
   /**
-   * Renders the pdf export size options
-   *
-   * @returns Node array of size options
+   * Renders the pdf export size options and adds them to the `select` component
    *
    * @protected
    */
-  _renderItems() {
+  _renderOptions() {
     const s = pdfLabelFormats;
     const sortedPdfIndo = (s.default || s).sort((a, b) => {
       const _a = parseInt(a.descriptionPDF.labelsPerPageDisplay, 10);
       const _b = parseInt(b.descriptionPDF.labelsPerPageDisplay, 10);
       return _a < _b ? -1 : _a > _b ? 1 : 0;
     });
-    return sortedPdfIndo.map((l) => {
-      return (h("calcite-option", { value: l }, this._getLabelSizeText(l)));
+    sortedPdfIndo.forEach((l) => {
+      const option = document.createElement("calcite-option");
+      option.value = l;
+      option.innerHTML = this._getLabelSizeText(l);
+      this._labelInfoElement.appendChild(option);
     });
   }
   static get is() { return "pdf-download"; }

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

@@ -222,3 +222,15 @@
   width: 100%;
   height: 100%;
 }
+
+.font-weight-500 {
+  font-weight: 500;
+}
+
+.background-override {
+  height: 100%;
+  width: 100%;
+  --calcite-ui-foreground-3: var(--calcite-ui-brand);
+  --calcite-ui-foreground-2: var(--calcite-ui-brand-hover);
+  --calcite-ui-text-1: var(--calcite-ui-text-inverse)
+}

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

@@ -291,7 +291,7 @@ export class PublicNotification {
    */
   _getActionGroup(icon, pageType, tip) {
     const sizeClass = this.showRefineSelection ? " w-1-3" : " w-1-2";
-    return (h("calcite-action-group", { class: "action-center" + sizeClass, layout: "horizontal" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
+    return (h("calcite-action-group", { class: "action-center" + sizeClass, layout: "horizontal" }, h("div", { class: "background-override" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
   }
   /**
    * Navigate to the defined page type
@@ -338,7 +338,7 @@ export class PublicNotification {
    */
   _getListPage() {
     const hasSets = this._hasSelections();
-    return (h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (this._getOnboardingImage()), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
+    return (h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (this._getOnboardingImage()), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, h("span", { class: "font-weight-500" }, this._translations.add)))));
   }
   /**
    * Display an image to help illustrate the basic workflow of the widget
@@ -489,7 +489,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", 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) }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, this._translations.pdf), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, this._translations.csv))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: () => void this._export(), width: "full" }, 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", 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) }, 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, 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
@@ -533,7 +533,7 @@ export class PublicNotification {
    * @protected
    */
   _getPageNavButtons(topLabel, topDisabled, topFunc, bottomLabel, bottomDisabled, bottomFunc) {
-    return (h("div", { class: "padding-bottom-1" }, h("div", { class: "display-flex padding-top-sides-1" }, h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, topLabel)), h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, bottomLabel))));
+    return (h("div", { class: "padding-bottom-1" }, h("div", { class: "display-flex padding-top-sides-1" }, h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, h("span", { class: "font-weight-500" }, topLabel))), h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, h("span", { class: "font-weight-500" }, bottomLabel)))));
   }
   /**
    * Create an informational notice

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

@@ -104,4 +104,8 @@ html[dir="rtl"] .main-label {
 .padding-start-1-2 {
   -webkit-padding-start: 0.5rem;
           padding-inline-start: 0.5rem;
-}
+}
+
+.font-weight-500 {
+  font-weight: 500;
+}

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

@@ -77,7 +77,7 @@ export class RefineSelection {
   render() {
     var _a, _b;
     const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, this._translations.add), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, this._translations.remove))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/demos/new-public-notification.html

@@ -57,6 +57,10 @@
       rel="stylesheet"
       href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
+    <!-- <link
+      rel="stylesheet"
+      href="https://js.arcgis.com/4.27/esri/themes/dark/main.css"
+    /> -->
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
@@ -111,6 +115,7 @@
     </script>
   </head>
 
+  <!-- <body class="calcite-mode-dark"> -->
   <body>
     <div id="viewDiv"></div>
     <public-notification id="demo" class="over-map column"></public-notification>

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

@@ -699,7 +699,8 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (!this.selectLayerView || id !== this.selectLayerView.layer.id) {
       this.selectLayerView = await getMapLayerView(this.mapView, id);
       this._updateLabel();
-      await this._highlightWithOIDsOrGeoms();
+      this._bufferGeometry ? await this._selectFeatures([this._bufferGeometry]) :
+        await this._highlightWithOIDsOrGeoms();
     }
   }
   /**

package/dist/components/pdf-download2.js

@@ -273,7 +273,11 @@ const PdfDownload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } }, this._renderItems())));
+    return (h(Host, null, h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } })));
+  }
+  componentDidRender() {
+    // Render the options outside of Stencil's rendering so that it doesn't mangle RTL text with embedded LTR
+    this._renderOptions();
   }
   //--------------------------------------------------------------------------
   //
@@ -303,7 +307,8 @@ const PdfDownload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   _getLabelSizeText(labelInfo) {
     const lNum = labelInfo.descriptionPDF.labelsPerPageDisplay;
-    const lSize = `${labelInfo.descriptionPDF.labelWidthDisplay} x ${labelInfo.descriptionPDF.labelHeightDisplay}`;
+    const lSize = "‎" + labelInfo.descriptionPDF.labelWidthDisplay + " x " +
+      labelInfo.descriptionPDF.labelHeightDisplay + "‏";
     return this._translations.pdfLabel.replace("{{n}}", lNum).replace("{{labelSize}}", lSize);
   }
   /**
@@ -316,21 +321,22 @@ const PdfDownload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._translations = translations[0];
   }
   /**
-   * Renders the pdf export size options
-   *
-   * @returns Node array of size options
+   * Renders the pdf export size options and adds them to the `select` component
    *
    * @protected
    */
-  _renderItems() {
+  _renderOptions() {
     const s = pdfLabelFormats;
     const sortedPdfIndo = (s.default || s).sort((a, b) => {
       const _a = parseInt(a.descriptionPDF.labelsPerPageDisplay, 10);
       const _b = parseInt(b.descriptionPDF.labelsPerPageDisplay, 10);
       return _a < _b ? -1 : _a > _b ? 1 : 0;
     });
-    return sortedPdfIndo.map((l) => {
-      return (h("calcite-option", { value: l }, this._getLabelSizeText(l)));
+    sortedPdfIndo.forEach((l) => {
+      const option = document.createElement("calcite-option");
+      option.value = l;
+      option.innerHTML = this._getLabelSizeText(l);
+      this._labelInfoElement.appendChild(option);
     });
   }
   get el() { return this; }

package/dist/components/public-notification.js

@@ -48,7 +48,7 @@ import { d as defineCustomElement$4 } from './map-select-tools2.js';
 import { d as defineCustomElement$3 } from './pdf-download2.js';
 import { d as defineCustomElement$2 } from './refine-selection2.js';
 
-const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-ui-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.img-container{width:100%;height:100%}";
+const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-ui-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.img-container{width:100%;height:100%}.font-weight-500{font-weight:500}.background-override{height:100%;width:100%;--calcite-ui-foreground-3:var(--calcite-ui-brand);--calcite-ui-foreground-2:var(--calcite-ui-brand-hover);--calcite-ui-text-1:var(--calcite-ui-text-inverse)}";
 
 const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -318,7 +318,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    */
   _getActionGroup(icon, pageType, tip) {
     const sizeClass = this.showRefineSelection ? " w-1-3" : " w-1-2";
-    return (h("calcite-action-group", { class: "action-center" + sizeClass, layout: "horizontal" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
+    return (h("calcite-action-group", { class: "action-center" + sizeClass, layout: "horizontal" }, h("div", { class: "background-override" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
   }
   /**
    * Navigate to the defined page type
@@ -365,7 +365,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    */
   _getListPage() {
     const hasSets = this._hasSelections();
-    return (h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (this._getOnboardingImage()), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
+    return (h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (this._getOnboardingImage()), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, h("span", { class: "font-weight-500" }, this._translations.add)))));
   }
   /**
    * Display an image to help illustrate the basic workflow of the widget
@@ -516,7 +516,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   _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", 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) }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, this._translations.pdf), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, this._translations.csv))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: () => void this._export(), width: "full" }, 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", 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) }, 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, 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
@@ -560,7 +560,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @protected
    */
   _getPageNavButtons(topLabel, topDisabled, topFunc, bottomLabel, bottomDisabled, bottomFunc) {
-    return (h("div", { class: "padding-bottom-1" }, h("div", { class: "display-flex padding-top-sides-1" }, h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, topLabel)), h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, bottomLabel))));
+    return (h("div", { class: "padding-bottom-1" }, h("div", { class: "display-flex padding-top-sides-1" }, h("calcite-button", { disabled: topDisabled, onClick: topFunc, width: "full" }, h("span", { class: "font-weight-500" }, topLabel))), h("div", { class: "display-flex padding-top-1-2 padding-sides-1" }, h("calcite-button", { appearance: "outline", disabled: bottomDisabled, onClick: bottomFunc, width: "full" }, h("span", { class: "font-weight-500" }, bottomLabel)))));
   }
   /**
    * Create an informational notice

package/dist/components/refine-selection2.js

@@ -29,7 +29,7 @@ import { d as defineCustomElement$4 } from './segmented-control-item.js';
 import { d as defineCustomElement$3 } from './select.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
 
-const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:var(--calcite-ui-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}";
+const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:var(--calcite-ui-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.font-weight-500{font-weight:500}";
 
 const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -88,7 +88,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   render() {
     var _a, _b;
     const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, this._translations.add), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, this._translations.remove))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/esm/calcite-input-text_5.entry.js

@@ -1139,7 +1139,8 @@ const MapSelectTools = class {
     if (!this.selectLayerView || id !== this.selectLayerView.layer.id) {
       this.selectLayerView = await getMapLayerView(this.mapView, id);
       this._updateLabel();
-      await this._highlightWithOIDsOrGeoms();
+      this._bufferGeometry ? await this._selectFeatures([this._bufferGeometry]) :
+        await this._highlightWithOIDsOrGeoms();
     }
   }
   /**
@@ -1487,7 +1488,11 @@ const PdfDownload = class {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } }, this._renderItems())));
+    return (h(Host, null, h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } })));
+  }
+  componentDidRender() {
+    // Render the options outside of Stencil's rendering so that it doesn't mangle RTL text with embedded LTR
+    this._renderOptions();
   }
   //--------------------------------------------------------------------------
   //
@@ -1517,7 +1522,8 @@ const PdfDownload = class {
    */
   _getLabelSizeText(labelInfo) {
     const lNum = labelInfo.descriptionPDF.labelsPerPageDisplay;
-    const lSize = `${labelInfo.descriptionPDF.labelWidthDisplay} x ${labelInfo.descriptionPDF.labelHeightDisplay}`;
+    const lSize = "‎" + labelInfo.descriptionPDF.labelWidthDisplay + " x " +
+      labelInfo.descriptionPDF.labelHeightDisplay + "‏";
     return this._translations.pdfLabel.replace("{{n}}", lNum).replace("{{labelSize}}", lSize);
   }
   /**
@@ -1530,28 +1536,29 @@ const PdfDownload = class {
     this._translations = translations[0];
   }
   /**
-   * Renders the pdf export size options
-   *
-   * @returns Node array of size options
+   * Renders the pdf export size options and adds them to the `select` component
    *
    * @protected
    */
-  _renderItems() {
+  _renderOptions() {
     const s = pdfLabelFormats;
     const sortedPdfIndo = (s.default || s).sort((a, b) => {
       const _a = parseInt(a.descriptionPDF.labelsPerPageDisplay, 10);
       const _b = parseInt(b.descriptionPDF.labelsPerPageDisplay, 10);
       return _a < _b ? -1 : _a > _b ? 1 : 0;
     });
-    return sortedPdfIndo.map((l) => {
-      return (h("calcite-option", { value: l }, this._getLabelSizeText(l)));
+    sortedPdfIndo.forEach((l) => {
+      const option = document.createElement("calcite-option");
+      option.value = l;
+      option.innerHTML = this._getLabelSizeText(l);
+      this._labelInfoElement.appendChild(option);
     });
   }
   get el() { return getElement(this); }
 };
 PdfDownload.style = pdfDownloadCss;
 
-const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:var(--calcite-ui-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}";
+const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:var(--calcite-ui-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.font-weight-500{font-weight:500}";
 
 const RefineSelection = class {
   constructor(hostRef) {
@@ -1609,7 +1616,7 @@ const RefineSelection = class {
   render() {
     var _a, _b;
     const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, this._translations.add), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, this._translations.remove))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id], selectionMode: "single" })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //