@esri/solutions-components 5.1.0-next.109 → 5.1.0-next.110

package/dist/components/field-selection/customElement.js

@@ -19,7 +19,7 @@ class C extends T {
     this.styles = v;
   }
   render() {
-    return y`<calcite-action alignment=center appearance=solid class="height-51 width-51" id=solutions-field-selection .text=${this._translations.fieldVisibility} scale=m @click=${() => this._handleFieldVisibilityClick()} @mouseover=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} @mouseout=${() => this._removeTableTooltip()} @focus=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} ${u((e) => this._fieldVisibilityActionNode = e)}><calcite-icon scale=s icon=gear></calcite-icon></calcite-action>`;
+    return y`<calcite-action alignment=center appearance=solid class="height-51 width-51" id=solutions-field-selection .text=${this._translations.fieldVisibility} scale=m @click=${() => this._handleFieldVisibilityClick()} @mouseover=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} @mouseout=${() => this._removeTableTooltip()} @focus=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} ${u((e) => this._fieldVisibilityActionNode = e)}><calcite-icon aria-hidden=true scale=s icon=gear></calcite-icon></calcite-action>`;
   }
   handleColumnReorder() {
     this._fieldSortOrder = "default", this._fieldVisibilityPopoverNode && (this.removeFieldsPickList(), this._handleFieldVisibilityClick());
@@ -30,113 +30,121 @@ class C extends T {
     const e = this.table?.tableTemplate?.columnTemplates;
     if (this.layer && this.mapView && e && this._fieldVisibilityActionNode) {
       document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler);
-      const t = this.table.fieldColumns.map((s) => ({
-        alias: s.field.alias,
-        description: s.field.description,
-        name: s.field.name,
-        type: s.field.type
+      const t = this.table.fieldColumns.map((l) => ({
+        alias: l.field.alias,
+        description: l.field.description,
+        name: l.field.name,
+        type: l.field.type
       }));
       if (this._hasAttachmentsEnabled(this.layer)) {
-        const s = "Attachments";
-        if (this._shouldShowField(s.toUpperCase(), !1)) {
-          if (!e.some((o) => o.fieldName.toUpperCase() === s.toUpperCase())) {
-            const o = {
-              fieldName: s,
+        const l = "Attachments";
+        if (this._shouldShowField(l.toUpperCase(), !1)) {
+          if (!e.some((a) => a.fieldName.toUpperCase() === l.toUpperCase())) {
+            const a = {
+              fieldName: l,
               type: "attachment",
               visible: !0
             };
-            e.push(o);
+            e.push(a);
           }
           t.push({
-            name: s,
+            name: l,
             alias: "Photos and files",
             type: "none",
-            description: s
+            description: l
           });
         }
       }
       if (this.table.relatedRecordsEnabled && this.layer.relationships && this.layer.relationships.length > 0) {
-        const s = this.layer.parent;
-        this.layer.relationships.forEach((o) => {
-          let a, r = this._shouldShowField(o.name || "", !0);
-          if (!e.some((n) => n.fieldName.toLowerCase() === o.name?.toLowerCase() ? (a = o.name, !0) : !1))
-            if (o.name) {
-              a = o.name;
-              const n = {
-                fieldName: a,
+        const l = this.layer.parent;
+        this.layer.relationships.forEach((a, p) => {
+          let o, n = this._shouldShowField(a.name || "", !0);
+          if (!n) {
+            const c = [...l?.layers || [], ...l?.tables || []].find((h) => h.layerId === a.relatedTableId), d = c ? c.title : void 0;
+            d && this._shouldShowField(d, !0) && (a.name = d, n = !0);
+          }
+          if (!n) {
+            const r = a.keyField || `related_${p}`;
+            this._shouldShowField(r, !0) && (a.name = a.name || r, n = !0);
+          }
+          if (!e.some((r) => r.fieldName.toLowerCase() === a.name?.toLowerCase() ? (o = a.name, !0) : !1))
+            if (a.name) {
+              o = a.name;
+              const r = {
+                fieldName: o,
                 type: "relationship",
                 visible: !0
               };
-              r = this._shouldShowField(a, !0), e.push(n);
+              n = this._shouldShowField(o, !0), e.push(r);
             } else {
-              const n = [...s?.layers || [], ...s?.tables];
-              let d;
-              if (n.some((c) => c.layerId === o.relatedTableId ? (d = c, !0) : !1), d) {
-                a = d.title, o.name = a;
-                const c = {
-                  fieldName: a,
+              const r = [...l?.layers || [], ...l?.tables];
+              let c;
+              if (r.some((d) => d.layerId === a.relatedTableId ? (c = d, !0) : !1), c) {
+                o = c.title, a.name = o;
+                const d = {
+                  fieldName: o,
                   type: "relationship",
                   visible: !0
                 };
-                r = this._shouldShowField(a, !0), e.push(c);
+                n = this._shouldShowField(o, !0), e.push(d);
               }
             }
-          a && r && t.push({
-            name: a,
-            alias: `Related ${a}`,
+          o && n && t.push({
+            name: o,
+            alias: `Related ${o}`,
             type: "none",
-            description: `related:${a}`
+            description: `related:${o}`
           });
         });
       }
       const i = this._fieldVisibilityPopoverNode ? this._fieldVisibilityPopoverNode : document.createElement("arcgis-field-pick-list");
       i.layer = this.layer, i.fields = t, i.showFieldInfo = !0, i.showFieldName = !0, i.showDescription = !1, i.showSelectionAll = !0, i.hideCancel = !0, i.hideSort = !1, i.showFilterLength = 5, i.multiple = !0, i.heading = this._translations.fieldVisibility, i.okBtnText = this._translations.doneWithFieldChanges, i.filterPlaceholderText = this._translations.filterFields, i.sortBy = this._fieldSortOrder ?? "default";
-      const p = this.table?.visibleColumns.map((s) => s.fieldName.startsWith("EsriFeatureTableRelationshipColumn") || s.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") ? s.effectiveLabel : s.fieldName);
-      i.selectedFields = e.reduce((s, o) => ((p ? p.indexOf(o.fieldName) > -1 : o.visible) && s.push(o.fieldName), s), []), this._selectedFields = i.selectedFields, i.style.minHeight = "340px", i.popoverProps = {
+      const m = this.table?.visibleColumns.map((l) => l.fieldName.startsWith("EsriFeatureTableRelationshipColumn") || l.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") ? l.effectiveLabel : l.fieldName);
+      i.selectedFields = e.reduce((l, a) => ((m ? m.indexOf(a.fieldName) > -1 : a.visible) && l.push(a.fieldName), l), []), this._selectedFields = i.selectedFields, i.style.minHeight = "340px", i.popoverProps = {
         refElement: this._fieldVisibilityActionNode,
         popoverWidth: 300,
         placement: "bottom-end",
         offsetDistance: -20,
         triggerDisabled: !1,
         autoClose: !1
-      }, i.addEventListener("arcgisChange", (s) => {
-        s.stopPropagation();
-        const o = s.detail.selectedFields, a = this._getDifference(o, this._selectedFields), r = this._getDifference(this._selectedFields, o);
-        a.concat(r).forEach((d) => {
-          const c = this.layer?.relationships?.map((m) => m.name) || [];
-          if (d === "Attachments") {
-            const m = this.table.columns.find((h) => "onShowAttachments" in h);
-            m.hidden = r.indexOf(d) > -1;
-          } else c.indexOf(d) > -1 ? this.table.columns.filter((h) => "relationshipId" in h).forEach((h) => {
-            r.indexOf(d) > -1, d == h.effectiveLabel && (h.hidden = r.indexOf(d) > -1);
-          }) : this.table.toggleColumnVisibility(d);
-        }), this._selectedFields = o, this._updateTable(this.table.tableTemplate);
-      }), i.addEventListener("arcgisSortByChange", (s) => {
-        s.stopPropagation(), this._fieldSortOrder = s.detail, this._sortFields(s.detail);
+      }, i.addEventListener("arcgisChange", (l) => {
+        l.stopPropagation();
+        const a = l.detail.selectedFields, p = this._getDifference(a, this._selectedFields), o = this._getDifference(this._selectedFields, a);
+        p.concat(o).forEach((r) => {
+          const c = this.layer?.relationships?.map((d) => d.name) || [];
+          if (r === "Attachments") {
+            const d = this.table.columns.find((h) => "onShowAttachments" in h);
+            d.hidden = o.indexOf(r) > -1;
+          } else c.indexOf(r) > -1 ? this.table.columns.filter((h) => "relationshipId" in h).forEach((h) => {
+            o.indexOf(r) > -1, r == h.effectiveLabel && (h.hidden = o.indexOf(r) > -1);
+          }) : this.table.toggleColumnVisibility(r);
+        }), this._selectedFields = a, this._updateTable(this.table.tableTemplate);
+      }), i.addEventListener("arcgisSortByChange", (l) => {
+        l.stopPropagation(), this._fieldSortOrder = l.detail, this._sortFields(l.detail);
       }), i.addEventListener("arcgisClose", () => {
         this._closePopovers(), setTimeout(() => this._fieldVisibilityActionNode.setFocus(), 200);
       }), document.body.appendChild(i), this._fieldVisibilityPopoverNode = i, setTimeout(() => document.addEventListener("click", this._fieldVisibilityPopoverClickHandler), 200);
     }
   }
   _shouldShowField(e, t) {
-    return (this.configExtraFields || []).some((l) => t ? l.replace("related:", "").toUpperCase() === e.toUpperCase() : l.toUpperCase() === e.toUpperCase());
+    return (this.configExtraFields || []).some((s) => t ? s.replace("related:", "").toUpperCase() === e.toUpperCase() : s.toUpperCase() === e.toUpperCase());
   }
   removeFieldsPickList() {
     this._fieldVisibilityPopoverNode && (document.body.removeChild(this._fieldVisibilityPopoverNode), this._fieldVisibilityPopoverNode = void 0);
   }
   _sortFields(e) {
-    const t = this.table.tableTemplate.columnTemplates, l = this._getSortOrder(e), p = t.filter((o) => o.type !== "attachment" && o.type !== "relationship").sort((o, a) => {
-      const r = l.indexOf(o.fieldName), n = l.indexOf(a.fieldName);
-      return r === -1 && n !== -1 ? 1 : r !== -1 && n === -1 ? -1 : r === -1 && n === -1 ? 0 : r - n;
-    }), s = t.filter((o) => o.type === "attachment" || o.type === "relationship");
-    this.tableRef.setColumnOrder([...p, ...s]), this._updateTable(this.table.tableTemplate);
+    const t = this.table.tableTemplate.columnTemplates, s = this._getSortOrder(e), m = t.filter((a) => a.type !== "attachment" && a.type !== "relationship").sort((a, p) => {
+      const o = s.indexOf(a.fieldName), n = s.indexOf(p.fieldName);
+      return o === -1 && n !== -1 ? 1 : o !== -1 && n === -1 ? -1 : o === -1 && n === -1 ? 0 : o - n;
+    }), l = t.filter((a) => a.type === "attachment" || a.type === "relationship");
+    this.tableRef.setColumnOrder([...m, ...l]), this._updateTable(this.table.tableTemplate);
   }
   _getSortOrder(e) {
     const t = [...this.layer.fields];
-    return e === "display" ? t.sort((l, i) => l.alias.localeCompare(i.alias)) : e === "field" ? t.sort((l, i) => l.name.localeCompare(i.name)) : e === "type" && t.sort((l, i) => l.type.localeCompare(i.type)), t.map((l) => l.name);
+    return e === "display" ? t.sort((s, i) => s.alias.localeCompare(i.alias)) : e === "field" ? t.sort((s, i) => s.name.localeCompare(i.name)) : e === "type" && t.sort((s, i) => s.type.localeCompare(i.type)), t.map((s) => s.name);
   }
   _getDifference(e, t) {
-    return e.filter((l) => !t.includes(l));
+    return e.filter((s) => !t.includes(s));
   }
   _updateTable(e) {
     this.table.tableTemplate = e, this._isStandardView() && this._syncAttributeTableTemplate();
@@ -144,13 +152,13 @@ class C extends T {
   async _syncAttributeTableTemplate() {
     const e = this.table.layer;
     if (e.attributeTableTemplate) {
-      const { _modules: t } = this, l = e.attributeTableTemplate.clone();
-      t?.attributeTableTemplateUtils.syncAttributeTableTemplate(this.table, l), JSON.stringify(l) !== JSON.stringify(e.attributeTableTemplate) && (e.attributeTableTemplate = l);
+      const { _modules: t } = this, s = e.attributeTableTemplate.clone();
+      t?.attributeTableTemplateUtils.syncAttributeTableTemplate(this.table, s), JSON.stringify(s) !== JSON.stringify(e.attributeTableTemplate) && (e.attributeTableTemplate = s);
     }
     if (e.attributeTableTemplate?.orderByFields?.length > 1) {
-      const t = e.attributeTableTemplate.clone(), l = this.table.activeSortOrders[0];
+      const t = e.attributeTableTemplate.clone(), s = this.table.activeSortOrders[0];
       t.orderByFields = [
-        { field: l.fieldName, order: l.direction }
+        { field: s.fieldName, order: s.direction }
       ], e.attributeTableTemplate = t, this._syncColumnDirectionsWithOrderByFields();
     }
   }
@@ -169,10 +177,10 @@ class C extends T {
     document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler), this._fieldVisibilityPopoverNode && (document.body.removeChild(this._fieldVisibilityPopoverNode), this._fieldVisibilityPopoverNode = void 0);
   }
   _addTableTooltip(e, t) {
-    const l = document.createElement("calcite-tooltip");
-    l.className = "table-tooltip", l.referenceElement = e, l.placement = "trailing-start", l.open = !0;
+    const s = document.createElement("calcite-tooltip");
+    s.className = "table-tooltip", s.referenceElement = e, s.placement = "trailing-start", s.open = !0;
     const i = document.createElement("div");
-    i.className = "tooltip", i.innerHTML = t, l.append(i), document.body.append(l);
+    i.className = "tooltip", i.innerHTML = t, s.append(i), document.body.append(s);
   }
   _removeTableTooltip() {
     document.querySelectorAll(".table-tooltip").forEach((e) => e.parentNode?.removeChild(e));
@@ -188,8 +196,8 @@ class C extends T {
   _hasAttachmentsEnabled(e) {
     if (!e?.capabilities)
       return !1;
-    const { capabilities: { data: { supportsAttachment: t }, operations: { supportsQueryAttachments: l } } } = e;
-    return t && l;
+    const { capabilities: { data: { supportsAttachment: t }, operations: { supportsQueryAttachments: s } } } = e;
+    return t && s;
   }
 }
 f("field-selection", C);

package/dist/components/info-card/customElement.d.ts

@@ -20,6 +20,7 @@ export abstract class InfoCard extends LitElement {
       back: string;
       indexOfTotal: string;
       delete: string;
+      toggleListView: string;
   } & T9nMeta<{
       fetchingData: string;
       edit: string;
@@ -29,6 +30,7 @@ export abstract class InfoCard extends LitElement {
       back: string;
       indexOfTotal: string;
       delete: string;
+      toggleListView: string;
   }>;
   /**
    * boolean: If true will show edit button

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

@@ -85,7 +85,7 @@ class E extends v {
   }
   render() {
     const e = this.isLoading ? "" : "display-none", t = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute", a = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", n = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", o = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature, h = Number(this._features?.selectedFeature?.getObjectId()), p = Number.isNaN(h) ? [] : [h], c = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, u = this._relatedFeature ? [this._relatedFeature] : this.graphics, _ = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex, l = this.isMobile ? "display-none" : "";
-    return s`<calcite-shell class="z-index-1" style=${$({ position: this.position })}>${this._getHeader()}<calcite-loader class=${i(e)} .label=${this._translations.fetchingData}></calcite-loader><div class=${i("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? m}></div><div class=${`${n} width-100`} slot=footer>${this.allowEditing ? s`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && c ? s`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${p} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && c ? s`<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !o && s`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s text text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${i(a)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${_} .graphics=${u} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
+    return s`<calcite-shell class="z-index-1" style=${$({ position: this.position })}>${this._getHeader()}<calcite-loader class=${i(e)} .label=${this._translations.fetchingData}></calcite-loader><div class=${i("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? m}></div><div class=${`${n} width-100`} slot=footer>${this.allowEditing ? s`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && c ? s`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${p} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && c ? s`<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !o && s`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s .text=${this._translations.toggleListView} text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${i(a)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${_} .graphics=${u} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
   }
   async setGraphics() {
     this._features || await this._initFeaturesWidget(), this.graphics.length > 0 ? (this._layer = this.graphics[0]?.layer, this._editEnabled = !!(this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate), this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "", this._features?.open({

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

@@ -108,7 +108,7 @@ class I extends u {
     const i = this._layerItemsHash && this._layerItemsHash[t].name, e = this._layerItemsHash && this._layerItemsHash[t].formattedFeatureCount;
     return a`<calcite-list-item @calciteListItemSelect=${() => {
       this.onLayerItemSelected(t);
-    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
+    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon aria-hidden=true flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
   }
   getExtentNotice() {
     return a`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;

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

@@ -428,7 +428,7 @@ class M extends C {
   }
   _getDangerAction(e, t, i, s) {
     const a = this._layer === void 0 ? !0 : s;
-    return o`<div class="display-flex" id=${this._getId(e) ?? c}>${o`<calcite-action appearance=solid .disabled=${a} .id=${`layer-table-${e}`} @click=${i} text><calcite-icon class="danger-icon-color" .icon=${e} scale=s></calcite-icon><span class="label-override padding-start-1-4 danger-label-color">${t}</span></calcite-action>`}${this._getToolTip("bottom", `layer-table-${e}`, t)}</div>`;
+    return o`<div class="display-flex" id=${this._getId(e) ?? c}>${o`<calcite-action appearance=solid .disabled=${a} .id=${`layer-table-${e}`} @click=${i} .text=${t}><calcite-icon aria-hidden=true class="danger-icon-color" .icon=${e} scale=s></calcite-icon><span class="label-override padding-start-1-4 danger-label-color">${t}</span></calcite-action>`}${this._getToolTip("bottom", `layer-table-${e}`, t)}</div>`;
   }
   _getIds() {
     let e = this._relatedFeatureTable ?? this._table;

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

@@ -3,17 +3,17 @@ import { c as m } from "../../chunks/runtime.js";
 import { g as y, d as b, f } from "../../chunks/mapViewUtils.js";
 import { u as _ } from "../../chunks/useT9n.js";
 import { css as u, html as i, nothing as l } from "lit";
-import { createRef as o, ref as d } from "lit-html/directives/ref.js";
+import { createRef as d, ref as o } from "lit-html/directives/ref.js";
 import { LitElement as g, createEvent as n, noShadowRoot as L, safeStyleMap as c, safeClassMap as p } from "@arcgis/lumina";
 import { useContextConsumer as w } from "@arcgis/lumina/context";
 import { p as v } from "../../chunks/publicNotificationContext.js";
 const I = u`@layer{:host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom: 0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}.popover-list{overflow:auto;width:250px}}`;
 class $ extends g {
   constructor() {
-    super(), this.appearance = "transparent", this.configLayerOrderDefined = !1, this.defaultLayerId = "", this.disabled = !1, this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = _({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = o(), this._layerComboboxElement = o(), this._pnContextConsumer = w({
+    super(), this.appearance = "transparent", this.configLayerOrderDefined = !1, this.defaultLayerId = "", this.disabled = !1, this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = _({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = d(), this._layerComboboxElement = d(), this._pnContextConsumer = w({
       context: v,
       subscribe: !0
-    }), this._skipEditCheck = !1, this._popover = o(), this.beforeLayerSelectionChange = n(), this.idsFound = n(), this.noLayersFound = n(), this.layerSelectionChange = n(), this.listenOn(window, "mapChanged", this.mapChanged);
+    }), this._skipEditCheck = !1, this._popover = d(), this.beforeLayerSelectionChange = n(), this.idsFound = n(), this.noLayersFound = n(), this.layerSelectionChange = n(), this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
     this.properties = { appearance: 1, configLayerOrderDefined: 5, defaultLayerId: 1, disabled: 5, display: 1, enabledLayerIds: 0, height: 9, isMobile: 5, mapView: 0, showOnlyUpdatableLayers: 5, placeholderIcon: 1, selectedIds: 0, scale: 1, showTables: 5, showTablesDisabled: 5, showSingleLayerAsLabel: 5, type: 1, showLayersListInPopover: 5, referenceElement: 1, force: 16, _hasMultipleLayers: 16, _hasValidLayers: 16, _isDropdownOpen: 16, ids: 16, selectedName: 16, _translations: 16 };
@@ -74,26 +74,26 @@ class $ extends g {
   }
   _getMapLayerPopOver() {
     const e = this.height && this.height > 0 ? { "max-height": `${this.height.toString()}px` } : {};
-    return i`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${d(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
+    return i`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${o(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
   }
   _getInvalidPlaceholder() {
     return i`<div><calcite-notice class="height-100" icon=exclamation-mark-triangle id=no-valid-layers kind=danger open><div slot=message>${this._translations.noLayersFound}</div></calcite-notice><calcite-tooltip .label=${this._translations.enableEditUpdate} placement=bottom reference-element=no-valid-layers><span>${this._translations.enableEditUpdate}</span></calcite-tooltip></div>`;
   }
   _getSingleLayerPlaceholder() {
     const e = this._getItemTypeIcon();
-    return i`<div class="layer-picker-label-container cursor-default"><calcite-icon .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
+    return i`<div class="layer-picker-label-container cursor-default"><calcite-icon aria-hidden=true .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
   }
   _getSelect(e) {
-    return i`<calcite-select .disabled=${this.disabled} id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
+    return i`<calcite-select .disabled=${this.disabled} id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${o(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
   }
   _getCombobox(e) {
-    return i`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
+    return i`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${o(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
   }
   _getDropdown(e) {
     return i`<calcite-dropdown class="layer-picker-dropdown" @calciteDropdownBeforeClose=${() => this._isDropdownOpen = !1} @calciteDropdownBeforeOpen=${() => this._isDropdownOpen = !0}>${this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(e)}<calcite-dropdown-group selection-mode=single>${this._getMapLayerOptions()}</calcite-dropdown-group></calcite-dropdown>`;
   }
   _getActionDropdownButton(e) {
-    return i`<calcite-action id=${e ?? l} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
+    return i`<calcite-action id=${e ?? l} slot=trigger .text=${this.selectedName}>${this._getDropdownButton()}</calcite-action>`;
   }
   _getDropdownButton() {
     const e = this._getItemTypeIcon(), t = this.isMobile ? "" : "max-width-350", s = this.isMobile ? "trigger" : "", a = this._isDropdownOpen ? "chevron-up" : "chevron-down";

package/dist/components/map-picker/customElement.d.ts

@@ -10,7 +10,13 @@ export abstract class MapPicker extends LitElement {
    *
    * @internal
    */
-  protected _translations: { switchMap: string; } & T9nMeta<{ switchMap: string; }>;
+  protected _translations: {
+      switchMap: string;
+      mapList: string;
+  } & T9nMeta<{
+      switchMap: string;
+      mapList: string;
+  }>;
   /**
    * number: optional fixed height value for the control.
    * Specified as pixel height.

package/dist/components/map-picker/customElement.js

@@ -73,11 +73,11 @@ class _ extends f {
   }
   _getMapNameList(t) {
     const e = this.showMapListInPopover ? "position-relative" : "position-absolute", i = this.isMapLayout ? "max-width-200 min-width-150" : "width-full", a = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", l = t ? `map-list border-solid ${a} adjusted-height ${i} ${e}` : "display-none";
-    return s`<div class=${d(l)}><calcite-list id=mapList label selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => s`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
+    return s`<div class=${d(l)}><calcite-list id=mapList .label=${this._translations.mapList} selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => s`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
   }
   _getMapListPopover() {
     const t = this.height && this.height > 0 && this.showMapListInPopover ? { "max-height": `${this.height.toString()}px` } : {};
-    return s`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} ${r(this._popover)}><div style=${b(t)} class=popover-map-list>${this._getMapNameList(!0)}</div></calcite-popover>`;
+    return s`<calcite-popover auto-close .label=${this._translations.mapList} placement=left .referenceElement=${this.referenceElement} ${r(this._popover)}><div style=${b(t)} class=popover-map-list>${this._getMapNameList(!0)}</div></calcite-popover>`;
   }
   _getWebMapInfo() {
     let t = this.mapInfos.find((e) => this.selectedWebMapId === e.id);

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

@@ -88,14 +88,14 @@ class U extends I {
   _getBufferOptions() {
     this.enableSearchDistanceOnLoad && (this.searchDistanceEnabled = !0, this.enableSearchDistanceOnLoad = !1);
     const e = this.searchDistanceEnabled ? "search-distance" : "div-not-visible", t = typeof this.selectionSet?.distance == "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.searchDistance}<calcite-icon class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=search-distance-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=search-distance-icon><span class="tooltip-message">${this._translations.useSearchDistanceTootip}</span></calcite-popover><calcite-switch .checked=${this.searchDistanceEnabled} @calciteSwitchChange=${() => this.searchDistanceEnabled = !this.searchDistanceEnabled}></calcite-switch></div><div class=${f(e)}><buffer-tools .disabled=${!this.searchDistanceEnabled} .distance=${t} .geometries=${this.geometries} @bufferComplete=${(s) => {
+    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.searchDistance}<calcite-icon aria-hidden=true class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=search-distance-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=search-distance-icon><span class="tooltip-message">${this._translations.useSearchDistanceTootip}</span></calcite-popover><calcite-switch .checked=${this.searchDistanceEnabled} @calciteSwitchChange=${() => this.searchDistanceEnabled = !this.searchDistanceEnabled}></calcite-switch></div><div class=${f(e)}><buffer-tools .disabled=${!this.searchDistanceEnabled} .distance=${t} .geometries=${this.geometries} @bufferComplete=${(s) => {
       this._bufferComplete(s);
     }} .unit=${this.selectionSet?.unit || this.defaultBufferUnit} ${u(this._bufferTools)}></buffer-tools></div></div>`;
   }
   _getUseLayerFeaturesOptions() {
     this.enableLayerFeaturesOnLoad && (this.useLayerFeaturesEnabled = !0, this.enableLayerFeaturesOnLoad = !1);
     const e = this.useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.useLayerFeatures}<calcite-icon class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=use-layer-features-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=use-layer-features-icon><span class="tooltip-message">${this._translations.useLayerFeaturesTooltip}</span></calcite-popover><calcite-switch .checked=${this.useLayerFeaturesEnabled} @calciteSwitchChange=${() => {
+    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.useLayerFeatures}<calcite-icon aria-hidden=true class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=use-layer-features-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=use-layer-features-icon><span class="tooltip-message">${this._translations.useLayerFeaturesTooltip}</span></calcite-popover><calcite-switch .checked=${this.useLayerFeaturesEnabled} @calciteSwitchChange=${() => {
       this._useLayerFeaturesEnabledChanged();
     }}></calcite-switch></div><div class=${`${e} padding-top-1`}><map-layer-picker .enabledLayerIds=${this.selectionLayerIds} .mapView=${this.mapView} @layerSelectionChange=${(t) => {
       this._layerSelectionChange(t);
@@ -103,7 +103,7 @@ class U extends I {
   }
   _getNumSelected() {
     const e = this._translations._lang === "en" ? `${this._translations.selectionLoading}...` : this._translations.selectionLoading;
-    return c`<div class="padding-top-1 padding-bottom-1" style=${O({ "align-items": "end", display: "flex" })}>${this._selectionLoading ? c`<div><calcite-loader class="info-blue padding-end-1-2" inline .label=${e || ""} scale=m type=indeterminate></calcite-loader></div>` : c`<calcite-icon class="info-blue padding-end-1-2" icon=feature-layer scale=s></calcite-icon>`}<calcite-input-message class="info-blue" scale=m>${this._selectionLoading ? e : this.noResultText && this._numSelected === 0 ? this.noResultText : this._translations.selectedFeatures.replace("{{n}}", this._numSelected.toString())}</calcite-input-message></div>`;
+    return c`<div class="padding-top-1 padding-bottom-1" style=${O({ "align-items": "end", display: "flex" })}>${this._selectionLoading ? c`<div><calcite-loader class="info-blue padding-end-1-2" inline .label=${e || ""} scale=m type=indeterminate></calcite-loader></div>` : c`<calcite-icon aria-hidden=true class="info-blue padding-end-1-2" icon=feature-layer scale=s></calcite-icon>`}<calcite-input-message class="info-blue" scale=m>${this._selectionLoading ? e : this.noResultText && this._numSelected === 0 ? this.noResultText : this._translations.selectedFeatures.replace("{{n}}", this._numSelected.toString())}</calcite-input-message></div>`;
   }
   _getNameInput() {
     const e = this.customLabelEnabled ? "" : "display-none";

package/dist/components/map-tools/customElement.js

@@ -170,7 +170,7 @@ class M extends F {
   }
   _getActionGroup(s, e, t, o, l, i) {
     const c = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", d = this.stackTools ? "" : "margin-bottom-1-2", p = this.stackTools ? "" : "box-shadow";
-    return r`<div><calcite-action alignment=center appearance=solid .indicator=${i} class=${`map-actions ${c} ${d} border-bottom ${p} ${l ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${s} id=${s ?? f} @click=${o} scale=s text ${h(this._mapTool)}><calcite-icon icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && t && r`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${s ?? f}><span>${t}</span></calcite-tooltip>` || ""}</div>`;
+    return r`<div><calcite-action alignment=center appearance=solid .indicator=${i} class=${`map-actions ${c} ${d} border-bottom ${p} ${l ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${s} id=${s ?? f} @click=${o} scale=s .text=${t} ${h(this._mapTool)}><calcite-icon aria-hidden=true icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && t && r`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${s ?? f}><span>${t}</span></calcite-tooltip>` || ""}</div>`;
   }
   _getWidget(s, e, t) {
     if (this._widgets.indexOf(s) < 0 && this.mapView && e) {

package/dist/components/pci-calculator/customElement.js

@@ -2,10 +2,10 @@
 import { c as s } from "../../chunks/runtime.js";
 import { css as d, html as l } from "lit";
 import { b as c } from "../../chunks/pciUtils.js";
-import { createRef as o, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as u, safeClassMap as a } from "@arcgis/lumina";
+import { createRef as o, ref as u } from "lit-html/directives/ref.js";
+import { LitElement as n, safeClassMap as a } from "@arcgis/lumina";
 const r = d`:host{display:block;--calcite-label-margin-bottom: 0}.label-display{display:block;padding-bottom:1rem}.display-flex{display:flex}.display-grid{display:grid}.display-none{display:none}.padding-top-1{padding-top:1rem}.main-input{width:300px;padding-inline-end:1rem}.float-end{float:inline-end}.position-relative{position:relative}.position-right{position:absolute;right:0}`;
-class p extends u {
+class p extends n {
   constructor() {
     super(...arguments), this.showAddDeduct = !1, this._deductValuesElement = o();
   }
@@ -17,10 +17,10 @@ class p extends u {
   }
   render() {
     const e = this.showAddDeduct ? "display-none" : "display-grid", t = this.showAddDeduct ? "position-relative" : "display-none";
-    return l`<div class=${a(e)}><div class="label-display"><calcite-label class="label-display">\r\n              Enter comma delimited deduct values${this._getDeductValuesInput()}</calcite-label></div><div>${this._getCalculateButton()}</div></div><div class=${a(t)}><div class="position-right"><calcite-action appearance=transparent class="float-end" icon=x @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div><deduct-calculator class="display-grid padding-top-1" @deductValueComplete=${this._addDeductValue}></deduct-calculator></div>`;
+    return l`<div class=${a(e)}><div class="label-display"><calcite-label class="label-display">\r\n              Enter comma delimited deduct values${this._getDeductValuesInput()}</calcite-label></div><div>${this._getCalculateButton()}</div></div><div class=${a(t)}><div class="position-right"><calcite-action appearance=transparent class="float-end" icon=x @click=${() => this._toggleShowAddDeduct()} scale=s text=Close></calcite-action></div><deduct-calculator class="display-grid padding-top-1" @deductValueComplete=${this._addDeductValue}></deduct-calculator></div>`;
   }
   _getDeductValuesInput() {
-    return l`<div class="display-flex"><calcite-input class="main-input" ${n(this._deductValuesElement)}></calcite-input><calcite-action appearance=transparent icon=plus-circle @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div>`;
+    return l`<div class="display-flex"><calcite-input class="main-input" ${u(this._deductValuesElement)}></calcite-input><calcite-action appearance=transparent icon=plus-circle @click=${() => this._toggleShowAddDeduct()} scale=s text="Add deduct value"></calcite-action></div>`;
   }
   _getCalculateButton() {
     return this._deductValuesElement.value ? l`<calcite-button @click=${() => this._calculatePCI(this._deductValuesElement?.value?.value || "")}>\r\n        Calculate PCI</calcite-button>` : void 0;

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

@@ -224,7 +224,7 @@ class y extends P {
     return b(a, i, r, e, l, t);
   }
   render() {
-    return s`<calcite-select .disabled=${this.disabled} label ${m(this._labelInfoElement)}>${this._renderOptions()}</calcite-select>`;
+    return s`<calcite-select .disabled=${this.disabled} label="Label format" ${m(this._labelInfoElement)}>${this._renderOptions()}</calcite-select>`;
   }
   _getLabelSizeText(a) {
     const i = a.descriptionPDF.labelsPerPageDisplay, e = a.descriptionPDF.labelWidthDisplay + " x " + a.descriptionPDF.labelHeightDisplay;

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

@@ -134,7 +134,7 @@ class ce extends Y {
     const s = this.showRefineSelection ? "w-1-3" : "w-1-2";
     return l`<calcite-action-group class=${x(s)} layout=horizontal><div class="background-override"><calcite-action .active=${this._pageType === t} alignment=center class="width-full height-full" .icon=${e} id=${e ?? k} @click=${() => {
       this._setPageType(t);
-    }} style=${Z(this._pageType === t ? "background-color: var(--calcite-color-brand)" : "")} text></calcite-action></div><calcite-tooltip placement=bottom .referenceElement=${e}><span>${i}</span></calcite-tooltip></calcite-action-group>`;
+    }} style=${Z(this._pageType === t ? "background-color: var(--calcite-color-brand)" : "")} .text=${i}></calcite-action></div><calcite-tooltip placement=bottom .referenceElement=${e}><span>${i}</span></calcite-tooltip></calcite-action-group>`;
   }
   _setPageType(e) {
     this._pageType = e;
@@ -164,7 +164,7 @@ class ce extends Y {
     }} width=full><span class="font-weight-500">${this._translations.add}</span></calcite-button></div></calcite-panel>`;
   }
   _getOnboardingImage() {
-    return l`<div class="display-flex padding-sides-1"><img class="img-container" role=presentation src=${this._onboardingImageUrl ?? k}></div>`;
+    return l`<div class="display-flex padding-sides-1"><img alt aria-hidden=true class="img-container" src=${this._onboardingImageUrl ?? k}></div>`;
   }
   _getSelectionSetList() {
     return l`<div class="padding-bottom-1-2"><calcite-list class="list-border margin-sides-1" label>${this._selectionSets.reduce((e, t, i) => {
@@ -218,7 +218,7 @@ class ce extends Y {
   }
   _getExportPage() {
     const e = this._hasSelections(this.showRefineSelection), t = this._numDuplicates > 0 ? "display-block" : "display-none", i = this.customExport && this.customExportURL && this._layoutTemplates.length;
-    return l`<calcite-panel><div>${this._getLabel(this._translations.export, !1, "header-label")}${e ? l`<div>${this._getNotice(this._translations.exportTip, "padding-sides-1")}${this._getLabel(this._translations.exportListsLabel, !1, "")}${this._getExportSelectionLists()}<div class=${`padding-sides-1 ${t}`}><div class="display-flex"><calcite-label layout=inline><calcite-checkbox ${_(this._removeDuplicates)}></calcite-checkbox><div class="display-flex">${this._translations.removeDuplicate}<div class="info-message padding-start-1-2"><calcite-input-message class="info-blue margin-top-0" scale=m>${` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`}</calcite-input-message></div></div></calcite-label><calcite-icon class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=remove-duplicates-icon scale=s></calcite-icon></div><calcite-popover closable label overlay-positioning=fixed reference-element=remove-duplicates-icon><span class="tooltip-message">${this._translations.duplicatesTip}</span></calcite-popover></div><div class="border-bottom"></div><div class="segmented-controls padding-top-sides-1">${this._getLabel(this._translations.exportOptions, !0, "", "margin-bottom-0-5")}${this._getSegmentedControls()}</div>${i ? this._getCustomPrintOptions() : l`<div class="padding-1 padding-bottom-0">${this._getExportOptions()}</div>`}<div class="padding-1 display-flex"><calcite-button .disabled=${!this._downloadActive || this._fetchingData || !this._addMap && !this._addResults} .loading=${this._fetchingData} @click=${() => this._segmentType === "CUSTOM" ? this._customExport() : void this._standardExport()} width=full><span class="font-weight-500">${this._translations.export}</span></calcite-button></div></div>` : this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")}</div></calcite-panel>`;
+    return l`<calcite-panel><div>${this._getLabel(this._translations.export, !1, "header-label")}${e ? l`<div>${this._getNotice(this._translations.exportTip, "padding-sides-1")}${this._getLabel(this._translations.exportListsLabel, !1, "")}${this._getExportSelectionLists()}<div class=${`padding-sides-1 ${t}`}><div class="display-flex"><calcite-label layout=inline><calcite-checkbox ${_(this._removeDuplicates)}></calcite-checkbox><div class="display-flex">${this._translations.removeDuplicate}<div class="info-message padding-start-1-2"><calcite-input-message class="info-blue margin-top-0" scale=m>${` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`}</calcite-input-message></div></div></calcite-label><calcite-icon aria-hidden=true class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=remove-duplicates-icon scale=s></calcite-icon></div><calcite-popover closable label overlay-positioning=fixed reference-element=remove-duplicates-icon><span class="tooltip-message">${this._translations.duplicatesTip}</span></calcite-popover></div><div class="border-bottom"></div><div class="segmented-controls padding-top-sides-1">${this._getLabel(this._translations.exportOptions, !0, "", "margin-bottom-0-5")}${this._getSegmentedControls()}</div>${i ? this._getCustomPrintOptions() : l`<div class="padding-1 padding-bottom-0">${this._getExportOptions()}</div>`}<div class="padding-1 display-flex"><calcite-button .disabled=${!this._downloadActive || this._fetchingData || !this._addMap && !this._addResults} .loading=${this._fetchingData} @click=${() => this._segmentType === "CUSTOM" ? this._customExport() : void this._standardExport()} width=full><span class="font-weight-500">${this._translations.export}</span></calcite-button></div></div>` : this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")}</div></calcite-panel>`;
   }
   _customExport() {
     if (!this.mapView)

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

@@ -44,7 +44,7 @@ class R extends L {
   }
   render() {
     const e = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-    return h`<div class=${`${e} padding-top-sides-1`}><div class="display-flex"><calcite-label class="font-bold width-full label-margin-0"><div class="display-flex">${this._translations.inputLayer}<calcite-icon class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=refine-input-layer scale=s></calcite-icon></div><map-layer-picker .enabledLayerIds=${this._enabledLayerIds} .mapView=${this.mapView} @layerSelectionChange=${(t) => {
+    return h`<div class=${`${e} padding-top-sides-1`}><div class="display-flex"><calcite-label class="font-bold width-full label-margin-0"><div class="display-flex">${this._translations.inputLayer}<calcite-icon aria-hidden=true class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=refine-input-layer scale=s></calcite-icon></div><map-layer-picker .enabledLayerIds=${this._enabledLayerIds} .mapView=${this.mapView} @layerSelectionChange=${(t) => {
       this._layerSelectionChange(t);
     }} .selectedIds=${this._refineLayer ? [this._refineLayer.layer.id] : []} ${S(this._layerPicker)}></map-layer-picker></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=refine-input-layer><span class="tooltip-message">${this._translations.inputLayerTip}</span></calcite-popover></div></div><div class="padding-1"><div class="padding-bottom-1"><calcite-segmented-control class="w-100" width=full><calcite-segmented-control-item .checked=${this._addEnabled} class="w-50 word-wrap-anywhere" .iconStart=${this._selectionMode === "ADD" ? "check" : void 0} @click=${() => this._setSelectionMode("ADD")} value=ADD><span class="font-weight-500">${this._translations.add}</span></calcite-segmented-control-item><calcite-segmented-control-item .checked=${!this._addEnabled} class="w-50 word-wrap-anywhere" .iconStart=${this._selectionMode === "REMOVE" ? "check" : void 0} @click=${() => this._setSelectionMode("REMOVE")} value=REMOVE><span class="font-weight-500">${this._translations.remove}</span></calcite-segmented-control-item></calcite-segmented-control></div><div><map-draw-tools active draw-mode=REFINE .mapView=${this.mapView} @drawRedo=${() => this._redo()} @drawUndo=${() => this._undo()} @sketchGraphicsChange=${this._sketchGraphicsChanged} .pointSymbol=${this.sketchPointSymbol} .polygonSymbol=${this.sketchPolygonSymbol} .polylineSymbol=${this.sketchLineSymbol} .redoEnabled=${this._refineSelectionSet?.redoStack && this._refineSelectionSet.redoStack.length > 0} .undoEnabled=${this._refineSelectionSet?.undoStack && this._refineSelectionSet.undoStack.length > 0} ${S(this._drawTools)}></map-draw-tools></div>${this.enableSearchDistance ? this._getBufferOptions() : void 0}<br>${h`<calcite-list class="list-border" label>${this._getRefineSelectionSetList()}</calcite-list>`}</div>`;
   }