@arcgis/common-components 5.1.0-next.98 → 5.2.0-next.0

package/dist/components/arcgis-field-info/utils/basic.d.ts

@@ -1,22 +1,26 @@
 import type SceneLayer from "@arcgis/core/layers/SceneLayer.js";
-import type OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";
-import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
-import type WFSLayer from "@arcgis/core/layers/WFSLayer.js";
-import type WCSLayer from "@arcgis/core/layers/WCSLayer.js";
-import type VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";
-import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
-import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
 import type Sublayer from "@arcgis/core/layers/support/Sublayer.js";
-import type StreamLayer from "@arcgis/core/layers/StreamLayer.js";
-import type ParquetLayer from "@arcgis/core/layers/ParquetLayer.js";
-import type OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";
-import type KnowledgeGraphSublayer from "@arcgis/core/layers/knowledgeGraph/KnowledgeGraphSublayer.js";
-import type ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
-import type ImageryLayer from "@arcgis/core/layers/ImageryLayer.js";
-import type GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer.js";
+import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
+import type CatalogFootprintLayer from "@arcgis/core/layers/catalog/CatalogFootprintLayer.js";
 import type CSVLayer from "@arcgis/core/layers/CSVLayer.js";
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer.js";
+import type ImageryLayer from "@arcgis/core/layers/ImageryLayer.js";
+import type ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
+import type KnowledgeGraphSublayer from "@arcgis/core/layers/knowledgeGraph/KnowledgeGraphSublayer.js";
+import type OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";
+import type OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";
+import type ParquetLayer from "@arcgis/core/layers/ParquetLayer.js";
+import type StreamLayer from "@arcgis/core/layers/StreamLayer.js";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
+import type VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";
+import type WCSLayer from "@arcgis/core/layers/WCSLayer.js";
+import type WFSLayer from "@arcgis/core/layers/WFSLayer.js";
 import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
-import type CatalogFootprintLayer from "@arcgis/core/layers/catalog/CatalogFootprintLayer.js";
 
-/** @internal */
+/**
+ * All supported layer types
+ *
+ * @internal
+ */
 export type FieldInfoLayer = CatalogFootprintLayer | CatalogLayer | CSVLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | ImageryTileLayer | KnowledgeGraphSublayer | OGCFeatureLayer | OrientedImageryLayer | ParquetLayer | SceneLayer | StreamLayer | Sublayer | SubtypeGroupLayer | SubtypeSublayer | VoxelLayer | WCSLayer | WFSLayer;

package/dist/components/arcgis-field-pick-list/customElement.js

@@ -1,48 +1,48 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as y } from "../../chunks/runtime.js";
-import { keyed as F } from "lit/directives/keyed.js";
-import { LitElement as w, createEvent as n, renderElement as $, nothing as d, safeStyleMap as g, safeClassMap as S } from "@arcgis/lumina";
-import { createRef as r, ref as h } from "lit/directives/ref.js";
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as F } from "../../chunks/runtime.js";
+import { keyed as y } from "lit/directives/keyed.js";
+import { LitElement as w, createEvent as r, renderElement as $, nothing as h, safeStyleMap as u, safeClassMap as v } from "@arcgis/lumina";
+import { createRef as a, ref as c } from "lit/directives/ref.js";
 import { html as l, css as C } from "lit";
-import { Task as v } from "@lit/task";
-import { log as u, composeMissingPropertyMessage as k } from "@arcgis/toolkit/log";
-import { F as f } from "../../chunks/internal-types.js";
-import { i as B } from "../../chunks/commonFunctions.js";
-import { u as x } from "../../chunks/useT9n.js";
-const o = /* @__PURE__ */ new Map();
-o.set("oid", "key");
-o.set("guid", "key");
-o.set("global-id", "key");
-o.set("blob", "binary");
-o.set("integer", "integer");
-o.set("small-integer", "integer");
-o.set("big-integer", "integer");
-o.set("single", "number");
-o.set("double", "number");
-o.set("long", "number");
-o.set("number", "number");
-o.set("date", "date-time");
-o.set("date-only", "calendar");
-o.set("time-only", "clock");
-o.set("timestamp-offset", "time-zone");
-o.set("string", "string");
-const b = ({ fieldType: p }) => l`<calcite-icon scale=s .icon=${o.get(p)}></calcite-icon>`, L = C`.panel{min-height:250px}.content{max-height:50vh}.field-icons{display:flex;align-items:center;padding:0 var(--calcite-space-sm)}.selection-button-div{padding:var(--calcite-space-2xs) var(--calcite-space-sm-plus)}.no-match-text{padding:var(--calcite-space-md)}.footer{width:100%}.add-cancel-buttons{display:flex;align-content:space-between}`;
-class E extends w {
+import { Task as k } from "@lit/task";
+import { log as f, composeMissingPropertyMessage as S } from "@arcgis/toolkit/log";
+import { F as g } from "../../chunks/internal-types.js";
+import { i as x } from "../../chunks/commonFunctions.js";
+import { u as b } from "../../chunks/useT9n.js";
+const n = /* @__PURE__ */ new Map();
+n.set("oid", "key");
+n.set("guid", "key");
+n.set("global-id", "key");
+n.set("blob", "binary");
+n.set("integer", "integer");
+n.set("small-integer", "integer");
+n.set("big-integer", "integer");
+n.set("single", "number");
+n.set("double", "number");
+n.set("long", "number");
+n.set("number", "number");
+n.set("date", "date-time");
+n.set("date-only", "calendar");
+n.set("time-only", "clock");
+n.set("timestamp-offset", "time-zone");
+n.set("string", "string");
+const B = ({ fieldType: m }) => l`<calcite-icon scale=s .icon=${n.get(m)}></calcite-icon>`, E = C`.panel{min-height:250px}.content{max-height:50vh}.field-icons{display:flex;align-items:center;padding:0 var(--calcite-space-sm)}.selection-button-div{padding:var(--calcite-space-2xs) var(--calcite-space-sm-plus)}.no-match-text{padding:var(--calcite-space-md)}.footer{width:100%}.add-cancel-buttons{display:flex;align-content:space-between}`;
+class L extends w {
   constructor() {
-    super(...arguments), this._messages = x({ blocking: !0 }), this.popoverNode = r(), this.listNode = r(), this.flowElement = r(), this.panelElement = r(), this.dropdownNode = r(), this.fieldInfoFlowItemEl = r(), this.allLists = [], this.filterText = "", this.panelCutOffHeight = 0, this._propWatcherTask = new v(this, {
+    super(...arguments), this._messages = b({ blocking: !0 }), this.popoverNode = a(), this.listNode = a(), this.flowElement = a(), this.panelElement = a(), this.dropdownNode = a(), this.fieldInfoFlowItemEl = a(), this.allLists = [], this.filterText = "", this.panelCutOffHeight = 0, this._propWatcherTask = new k(this, {
       task: async ([e]) => {
-        if (!this.listOnly && !B(e?.refElement))
-          throw u("error", this, k("popoverProps")), new Error();
+        if (!this.listOnly && !x(e?.refElement))
+          throw f("error", this, S("popoverProps")), new Error();
         this._propWatcherTask.autoRun = !1;
       },
       args: () => [this.popoverProps]
-    }), this.fields = [], this.selectedFields = [], this.listOnly = !1, this.showFieldInfo = !1, this.showFieldTypeIcon = !1, this.showFieldName = !1, this.showDescription = !1, this.showSelectionAll = !1, this.showCancel = !0, this.hideCancel = !1, this.showSort = !0, this.hideSort = !1, this.showFilterLength = 10, this.multiple = !1, this.sortBy = "default", this.groupFieldsAndExpressions = !1, this.arcgisChange = n(), this.arcgisClose = n(), this.arcgisFieldPickListChange = n(), this.arcgisFieldPickListDismissed = n(), this.arcgisFieldPickListSortByChange = n(), this.arcgisSortByChange = n(), this.arcgisEditField = n(), this.arcgisDeleteField = n();
+    }), this.fields = [], this.selectedFields = [], this.listOnly = !1, this.showFieldInfo = !1, this.showFieldTypeIcon = !1, this.showFieldName = !1, this.showDescription = !1, this.showSelectionAll = !1, this.showCancel = !0, this.hideCancel = !1, this.showSort = !0, this.hideSort = !1, this.showFilterLength = 10, this.multiple = !1, this.sortBy = "default", this.groupFieldsAndExpressions = !1, this.arcgisChange = r(), this.arcgisClose = r(), this.arcgisFieldPickListChange = r(), this.arcgisFieldPickListDismissed = r(), this.arcgisFieldPickListSortByChange = r(), this.arcgisSortByChange = r(), this.arcgisEditField = r(), this.arcgisDeleteField = r();
   }
   static {
     this.properties = { lastSortBy: 16, filterFields: 16, mapView: 0, view: 0, layer: 0, fields: 0, selectedFields: 0, listOnly: 5, popoverProps: 0, showFieldInfo: 5, showFieldTypeIcon: 5, showFieldName: 5, showDescription: 5, showSelectionAll: 5, showCancel: 5, hideCancel: 5, showSort: 5, hideSort: 5, showFilterLength: 9, multiple: 5, heading: 1, okBtnText: 1, filterPlaceholderText: 1, filterNoResultsText: 1, sortBy: 1, groupFieldsAndExpressions: 5, fieldsGroupHeading: 1, expressionsGroupHeading: 1, customExpressionCheck: 0 };
   }
   static {
-    this.styles = L;
+    this.styles = E;
   }
   async reposition() {
     await this.popoverNode.value?.reposition();
@@ -56,7 +56,7 @@ class E extends w {
     this.panelElement.value && (this.panelElement.value.disabled = e);
   }
   load() {
-    !this.view && this.mapView && (this.view = this.mapView), !this.showCancel && !this.hideCancel && (this.hideCancel = !0), !this.showSort && !this.hideSort && (this.hideSort = !0), this.listOnly && this.showFieldInfo && (this.showFieldInfo = !1, u("info", this, "showFieldInfo is not supported if listOnly is true.")), !this.multiple && this.selectedFields.length > 1 && (this.selectedFields = [this.selectedFields[0]]), this.lastSortBy = this.sortBy ?? this.lastSortBy, this.updateGroupedLists();
+    !this.view && this.mapView && (this.view = this.mapView), !this.showCancel && !this.hideCancel && (this.hideCancel = !0), !this.showSort && !this.hideSort && (this.hideSort = !0), this.listOnly && this.showFieldInfo && (this.showFieldInfo = !1, f("info", this, "showFieldInfo is not supported if listOnly is true.")), !this.multiple && this.selectedFields.length > 1 && (this.selectedFields = [this.selectedFields[0]]), this.lastSortBy = this.sortBy ?? this.lastSortBy, this.updateGroupedLists();
   }
   willUpdate(e) {
     (e.has("fields") || e.has("lastSortBy") || e.has("customExpressionCheck")) && this.updateGroupedLists();
@@ -88,11 +88,11 @@ class E extends w {
   }
   getSortedList(e) {
     let t = [...e];
-    const s = t.filter((i) => i.type === "none");
-    return t = t.filter((i) => i.type !== "none"), this.lastSortBy === "display" ? t.sort((i, a) => i.alias.localeCompare(a.alias)) : this.lastSortBy === "field" ? t.sort((i, a) => i.name.localeCompare(a.name)) : this.lastSortBy === "type" && t.sort((i, a) => i.type.localeCompare(a.type)), t = t.concat(s), t;
+    const i = t.filter((s) => s.type === "none");
+    return t = t.filter((s) => s.type !== "none"), this.lastSortBy === "display" ? t.sort((s, o) => s.alias.localeCompare(o.alias)) : this.lastSortBy === "field" ? t.sort((s, o) => s.name.localeCompare(o.name)) : this.lastSortBy === "type" && t.sort((s, o) => s.type.localeCompare(o.type)), t = t.concat(i), t;
   }
   isExpression(e) {
-    return this.customExpressionCheck ? this.customExpressionCheck(e) : e.name.includes(f.expression);
+    return this.customExpressionCheck ? this.customExpressionCheck(e) : e.name.includes(g.expression);
   }
   canDeselectAll() {
     const e = this.getAllFields();
@@ -103,7 +103,7 @@ class E extends w {
   }
   showFieldInfoCheck(e) {
     const { layer: t } = this;
-    return this.showFieldInfo ? !(!t || this.isExpression(e) || e.name.includes(f.relationship) || e.type === "none") : !1;
+    return this.showFieldInfo ? !(!t || this.isExpression(e) || e.name.includes(g.relationship) || e.type === "none") : !1;
   }
   updateGroupedLists() {
     if (!this.fields)
@@ -132,12 +132,12 @@ class E extends w {
       ];
   }
   addFieldInfoFlowItem(e, t) {
-    const s = this.flowElement.value, i = $(l`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${g(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(a) => {
-      a.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
+    const i = this.flowElement.value, s = $(l`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${u(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(o) => {
+      o.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
         t.setFocus();
       }, 300);
-    }} ${h(this.fieldInfoFlowItemEl)}><arcgis-field-info lang=${this._messages._lang ?? d} .fieldName=${e.name} .layer=${this.layer} .view=${this.view} class="content"></arcgis-field-info></calcite-flow-item>`);
-    s.appendChild(i), this.panelElement.value.selected = !1, this.fieldInfoFlowItemEl?.value.setFocus();
+    }} ${c(this.fieldInfoFlowItemEl)}><arcgis-field-info lang=${this._messages._lang ?? h} .fieldName=${e.name} .layer=${this.layer} .view=${this.view} class="content"></arcgis-field-info></calcite-flow-item>`);
+    i.appendChild(s), this.panelElement.value.selected = !1, this.fieldInfoFlowItemEl?.value.setFocus();
   }
   usingCustomGroups() {
     return !!this.fields.length && "fields" in this.fields[0];
@@ -145,6 +145,19 @@ class E extends w {
   getAllFields() {
     return this.allLists.map((e) => e.fields).flat();
   }
+  setSortBy(e) {
+    this.lastSortBy = e, this.updateGroupedLists(), this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy), this.reorderSelectedFieldsByCurrentListOrder() && (this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }));
+  }
+  reorderSelectedFieldsByCurrentListOrder() {
+    if (!this.selectedFields.length)
+      return !1;
+    const e = this.getAllFields().map((o) => o.name), t = new Set(this.selectedFields), i = e.filter((o) => t.has(o)), s = (
+      // adding/removing fields
+      i.length !== this.selectedFields.length || // reordering fields
+      i.some((o, p) => o !== this.selectedFields[p])
+    );
+    return s && (this.selectedFields = [...i]), s;
+  }
   render() {
     return this._propWatcherTask.render({
       complete: () => {
@@ -153,48 +166,40 @@ class E extends w {
         const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.popoverProps;
         return this.el.classList.add("js-app-flyout"), l`<calcite-popover .placement=${t.placement ?? "leading-start"} open pointer-disabled .referenceElement=${t.refElement} .offsetDistance=${t.offsetDistance ?? -Math.round(t.refElement.getBoundingClientRect().width)} .offsetSkidding=${t.offsetSkidding ?? 0} .overlayPositioning=${t.overlayPositioning} trigger-disabled .autoClose=${t.autoClose} .label=${this.heading ?? (this.multiple ? this._messages.headerSelect : this._messages.header) ?? ""} @calcitePopoverClose=${() => {
           this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
-        }} ${h(this.popoverNode)}><calcite-flow style=${g({
+        }} ${c(this.popoverNode)}><calcite-flow style=${u({
           width: `${t.popoverWidth ?? t.refElement.getBoundingClientRect().width}px`,
           ...t.maxHeight && { maxHeight: t.maxHeight }
-        })} ${h(this.flowElement)}><calcite-flow-item class="panel" .heading=${e} closable @calciteFlowItemClose=${() => {
+        })} ${c(this.flowElement)}><calcite-flow-item class="panel" .heading=${e} closable @calciteFlowItemClose=${() => {
           this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
-        }} ${h(this.panelElement)}><slot slot=content-top name=content-top></slot>${this.renderList()}<slot slot=content-bottom name=content-bottom></slot>${(this.multiple || !this.hideCancel) && l`<div slot=footer class="footer"><slot name=content-footer></slot>${this.multiple && !this.hideCancel ? l`<div class="add-cancel-buttons">${this.renderAddButton()}${this.renderCancelButton()}</div>` : l`${this.renderAddButton()}${this.renderCancelButton()}`}</div>` || ""}</calcite-flow-item></calcite-flow></calcite-popover>`;
+        }} ${c(this.panelElement)}><slot slot=content-top name=content-top></slot>${this.renderList()}<slot slot=content-bottom name=content-bottom></slot>${(this.multiple || !this.hideCancel) && l`<div slot=footer class="footer"><slot name=content-footer></slot>${this.multiple && !this.hideCancel ? l`<div class="add-cancel-buttons">${this.renderAddButton()}${this.renderCancelButton()}</div>` : l`${this.renderAddButton()}${this.renderCancelButton()}`}</div>` || ""}</calcite-flow-item></calcite-flow></calcite-popover>`;
       },
       error: () => ""
     });
   }
   renderList() {
-    const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.getAllFields(), s = t.length >= this.showFilterLength;
-    return l`${t.length ? l`<calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} class=${S(this.listOnly ? "" : "content")} .filterEnabled=${s} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => {
-      const i = this.listNode.value.selectedItems.map((c) => c.value), a = this.selectedFields.filter((c) => i.includes(c)), m = i.filter((c) => !this.selectedFields.includes(c));
-      this.selectedFields = [.../* @__PURE__ */ new Set([...a, ...m])], this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }), this.multiple || (this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields }));
-    }} @calciteListFilter=${(i) => {
-      i.stopPropagation(), this.filterFields = this.listNode.value.filteredItems?.map((a) => a.value), this.filterText = this.listNode.value.filterText;
-    }} ${h(this.listNode)}>${this.renderSortButton()}<slot name=content-center></slot>${this.multiple && this.showSelectionAll && (!s || !this.filterText || this.filterFields?.length) ? this.renderSelectionButton() : null}${this.renderListItems()}</calcite-list>` : l`<slot name=no-fields></slot>`}${this.filterFields && !this.filterFields.length && this.listNode.value && this.filterNoResultsText?.length !== 0 ? l`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
+    const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.getAllFields(), i = t.length >= this.showFilterLength;
+    return l`${t.length ? l`<calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} class=${v(this.listOnly ? "" : "content")} .filterEnabled=${i} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => {
+      const s = this.listNode.value.selectedItems.map((d) => d.value), o = this.selectedFields.filter((d) => s.includes(d)), p = s.filter((d) => !this.selectedFields.includes(d));
+      this.selectedFields = [.../* @__PURE__ */ new Set([...o, ...p])], this.reorderSelectedFieldsByCurrentListOrder(), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }), this.multiple || (this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields }));
+    }} @calciteListFilter=${(s) => {
+      s.stopPropagation(), this.filterFields = this.listNode.value.filteredItems?.map((o) => o.value), this.filterText = this.listNode.value.filterText;
+    }} ${c(this.listNode)}>${this.renderSortButton()}<slot name=content-center></slot>${this.multiple && this.showSelectionAll && (!i || !this.filterText || this.filterFields?.length) ? this.renderSelectionButton() : null}${this.renderListItems()}</calcite-list>` : l`<slot name=no-fields></slot>`}${this.filterFields && !this.filterFields.length && this.listNode.value && this.filterNoResultsText?.length !== 0 ? l`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
   }
   renderSortButton() {
     const e = this.getAllFields();
     if (!(e.length >= this.showFilterLength && !this.hideSort))
       return "";
-    const s = e.every((i) => !!i.type);
+    const i = e.every((s) => !!s.type);
     return l`<calcite-dropdown slot=filter-actions-end placement=bottom-end overlay-positioning=fixed .disabled=${this.filterFields ? this.filterFields.length < 4 : !1} @calciteDropdownOpen=${() => {
       this.observer?.disconnect(), this.popoverNode.value && this.observer?.observe(this.popoverNode.value, { attributes: !0 });
-    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${h(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? d}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @click=${() => {
-      this.lastSortBy = "default", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy);
-    }} @keydown=${(i) => {
-      i.stopPropagation(), (i.key === " " || i.key === "Enter") && (this.lastSortBy = "default", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy));
-    }}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @click=${() => {
-      this.lastSortBy = "display", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy);
-    }} @keydown=${(i) => {
-      i.stopPropagation(), (i.key === " " || i.key === "Enter") && (this.lastSortBy = "display", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy));
-    }}>${this._messages.displayName}</calcite-dropdown-item>${s && l`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @click=${() => {
-      this.lastSortBy = "type", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy);
-    }} @keydown=${(i) => {
-      i.stopPropagation(), (i.key === " " || i.key === "Enter") && (this.lastSortBy = "type", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy));
-    }}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @click=${() => {
-      this.lastSortBy = "field", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy);
-    }} @keydown=${(i) => {
-      i.stopPropagation(), (i.key === " " || i.key === "Enter") && (this.lastSortBy = "field", this.arcgisSortByChange.emit(this.lastSortBy), this.arcgisFieldPickListSortByChange.emit(this.lastSortBy));
+    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${c(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? h}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @click=${() => this.setSortBy("default")} @keydown=${(s) => {
+      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("default");
+    }}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @click=${() => this.setSortBy("display")} @keydown=${(s) => {
+      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("display");
+    }}>${this._messages.displayName}</calcite-dropdown-item>${i && l`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @click=${() => this.setSortBy("type")} @keydown=${(s) => {
+      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("type");
+    }}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @click=${() => this.setSortBy("field")} @keydown=${(s) => {
+      s.stopPropagation(), (s.key === " " || s.key === "Enter") && this.setSortBy("field");
     }}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
   }
   renderSelectionButton() {
@@ -205,18 +210,18 @@ class E extends w {
         this.selectedFields = [.../* @__PURE__ */ new Set([...this.selectedFields, ...this.filterFields])];
       else {
         const t = this.getAllFields();
-        this.selectedFields = t.map((s) => s.name);
+        this.selectedFields = t.map((i) => i.name);
       }
-      this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields });
+      this.reorderSelectedFieldsByCurrentListOrder(), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields });
     }}>${this.canDeselectAll() ? this._messages.deselectAll : this._messages.selectAll}</calcite-button></div>`;
   }
   renderListItems() {
     const e = this.allLists.filter((t) => !!t.fields.length);
-    return e.length === 1 && !e[0].title ? e[0].fields.map((t) => this.renderCalciteListItem(t)) : e.map((s) => l`<calcite-list-item-group .heading=${s.title}>${s.fields.map((i) => this.renderCalciteListItem(i))}</calcite-list-item-group>`);
+    return e.length === 1 && !e[0].title ? e[0].fields.map((t) => this.renderCalciteListItem(t)) : e.map((i) => l`<calcite-list-item-group .heading=${i.title}>${i.fields.map((s) => this.renderCalciteListItem(s))}</calcite-list-item-group>`);
   }
   renderCalciteListItem(e) {
-    const t = this.showFieldInfoCheck(e), s = this.showFieldTypeIcon && !!e.type;
-    return F(e.name, l`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
+    const t = this.showFieldInfoCheck(e), i = this.showFieldTypeIcon && !!e.type;
+    return y(e.name, l`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
       if (this.showFieldName && e.hideFieldName !== !0)
         return `{${e.name}}`;
       if (this.showDescription && e.hideDescription !== !0 && e.description)
@@ -224,26 +229,26 @@ class E extends w {
     })()} .value=${e.name} .selected=${!this.multiple && e.name === this.selectedFields[0] || this.multiple && this.selectedFields.includes(e.name)} .metadata=${{
       label: e.alias,
       fieldName: e.name
-    }}>${s && l`<div slot=actions-end class="field-icons">${b({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, t)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
+    }}>${i && l`<div slot=actions-end class="field-icons">${B({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, t)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
   }
   renderInfoAction(e, t) {
-    const { _messages: s } = this;
-    return t ? l`<calcite-action slot=actions-end .text=${s.info} title=${s.info ?? d} scale=s icon=information @click=${(i) => {
-      i.stopPropagation();
-      const a = i.currentTarget;
-      this.addFieldInfoFlowItem(e, a);
+    const { _messages: i } = this;
+    return t ? l`<calcite-action slot=actions-end .text=${i.info} title=${i.info ?? h} scale=s icon=information @click=${(s) => {
+      s.stopPropagation();
+      const o = s.currentTarget;
+      this.addFieldInfoFlowItem(e, o);
     }}></calcite-action>` : "";
   }
   renderEditAction(e) {
     const { _messages: t } = this;
-    return e.showEditAction ? l`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? d} scale=s icon=pencil @click=${(s) => {
-      s.stopPropagation(), this.arcgisEditField.emit({ fieldName: e.name });
+    return e.showEditAction ? l`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? h} scale=s icon=pencil @click=${(i) => {
+      i.stopPropagation(), this.arcgisEditField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderDeleteAction(e) {
     const { _messages: t } = this;
-    return e.showDeleteAction ? l`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? d} scale=s icon=trash @click=${(s) => {
-      s.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
+    return e.showDeleteAction ? l`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? h} scale=s icon=trash @click=${(i) => {
+      i.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderAddButton() {
@@ -257,7 +262,7 @@ class E extends w {
     }}>${this._messages.cancel}</calcite-button>`;
   }
 }
-y("arcgis-field-pick-list", E);
+F("arcgis-field-pick-list", L);
 export {
-  E as ArcgisFieldPickList
+  L as ArcgisFieldPickList
 };

package/dist/components/arcgis-field-pick-list/utils/types.d.ts

@@ -1,22 +1,22 @@
-import type WFSLayer from "@arcgis/core/layers/WFSLayer.js";
-import type WCSLayer from "@arcgis/core/layers/WCSLayer.js";
-import type VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";
 import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
-import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
 import type Sublayer from "@arcgis/core/layers/support/Sublayer.js";
-import type StreamLayer from "@arcgis/core/layers/StreamLayer.js";
-import type SceneLayer from "@arcgis/core/layers/SceneLayer.js";
-import type ParquetLayer from "@arcgis/core/layers/ParquetLayer.js";
-import type OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";
-import type OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";
-import type KnowledgeGraphSublayer from "@arcgis/core/layers/knowledgeGraph/KnowledgeGraphSublayer.js";
-import type ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
-import type ImageryLayer from "@arcgis/core/layers/ImageryLayer.js";
-import type GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer.js";
-import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
-import type CSVLayer from "@arcgis/core/layers/CSVLayer.js";
-import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
 import type CatalogFootprintLayer from "@arcgis/core/layers/catalog/CatalogFootprintLayer.js";
+import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
+import type CSVLayer from "@arcgis/core/layers/CSVLayer.js";
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer.js";
+import type ImageryLayer from "@arcgis/core/layers/ImageryLayer.js";
+import type ImageryTileLayer from "@arcgis/core/layers/ImageryTileLayer.js";
+import type KnowledgeGraphSublayer from "@arcgis/core/layers/knowledgeGraph/KnowledgeGraphSublayer.js";
+import type OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer.js";
+import type OrientedImageryLayer from "@arcgis/core/layers/OrientedImageryLayer.js";
+import type ParquetLayer from "@arcgis/core/layers/ParquetLayer.js";
+import type SceneLayer from "@arcgis/core/layers/SceneLayer.js";
+import type StreamLayer from "@arcgis/core/layers/StreamLayer.js";
+import type SubtypeGroupLayer from "@arcgis/core/layers/SubtypeGroupLayer.js";
+import type VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";
+import type WCSLayer from "@arcgis/core/layers/WCSLayer.js";
+import type WFSLayer from "@arcgis/core/layers/WFSLayer.js";
 
 /**
  * All supported layer types

package/dist/components/arcgis-histogram/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as M } from "../../chunks/runtime.js";
 import { u as k } from "../../chunks/useT9n.js";
 import { substitute as E } from "@arcgis/core/intl.js";

package/dist/components/arcgis-label-input/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as o } from "../../chunks/runtime.js";
 import { formatNumber as u } from "@arcgis/core/intl.js";
 import { LitElement as c, createEvent as h, safeClassMap as d } from "@arcgis/lumina";

package/dist/components/arcgis-picker-input/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
 import { css as l, html as o } from "lit";
 import { LitElement as a, createEvent as i, safeStyleMap as r } from "@arcgis/lumina";

package/dist/components/arcgis-ramp-color/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as f } from "../../chunks/runtime.js";
 import w from "@arcgis/core/Color.js";
 import { LitElement as x, nothing as u, safeClassMap as C } from "@arcgis/lumina";

package/dist/components/arcgis-ramp-color-break/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
 import { LitElement as m } from "@arcgis/lumina";
 import { css as p, html as c } from "lit";

package/dist/components/arcgis-ramp-opacity/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c } from "../../chunks/runtime.js";
 import t from "@arcgis/core/Color.js";
 import { LitElement as e } from "@arcgis/lumina";

package/dist/components/arcgis-slider/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as Q } from "../../chunks/runtime.js";
 import { keyed as Z } from "lit/directives/keyed.js";
 import { LitElement as ee, createEvent as $, safeClassMap as P, safeStyleMap as L, nothing as E } from "@arcgis/lumina";
@@ -135,7 +135,7 @@ let w = class extends oe {
       return;
     }
     const e = this._get("values");
-    if (n = n?.map((a) => T(x(a, this.precision), this.min, this.max)).sort((a, i) => a - i), e && n && e.length === n.length && e.every((a, i) => a === n[i]))
+    if (n = n?.map((a) => T(x(a, this.precision), this.min, this.max)).sort((a, i) => a - i), e?.length === n?.length && e.every((a, i) => a === n[i]))
       return;
     const t = new Map(n?.map((a) => [K(), a]));
     this._entries = t, this._set("values", n);
@@ -873,7 +873,7 @@ class Pe extends ee {
   }
   _renderThumb(e, t) {
     const { valueLabelsDisplay: a } = this, i = this._disabledOrInvalid, r = this._activePart === e || this._activePart === "range", o = this._activePart === "range" || this._activePart === e, s = a === "always" || a === "auto" && o, l = this.isHorizontal, c = l ? "horizontal" : "vertical", d = `label-${e}`, h = l ? "center" : this.valueLabelsPlacement === "start" ? "end" : "start";
-    return Z(e, y`<div id=${e ?? E} .ariaLabel=${this.messages.sliderValue} aria-labelledby=${(a ? d : void 0) ?? E} .ariaOrientation=${c} .ariaValueMin=${this._minFormatter(this.min)} .ariaValueMax=${this._maxFormatter(this.max)} .ariaValueNow=${t} .ariaValueText=${this._valueFormatter(t)} class=${P({
+    return Z(e, y`<div id=${e ?? E} .ariaLabel=${this.messages.sliderValue} aria-labelledby=${(a ? d : void 0) ?? E} .ariaOrientation=${c} .ariaValueMin=${this.min} .ariaValueMax=${this.max} .ariaValueNow=${t} .ariaValueText=${this._valueFormatter(t)} class=${P({
       thumb: !0,
       active: r
     })} data-entry=${e ?? E} @pointerdown=${this._onThumbPointerDown} @focus=${this._onThumbFocus} @blur=${this._onThumbBlur} @keydown=${this._onThumbKeyDown} role=slider style=${L({

package/dist/components/arcgis-slider-input/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
 import { css as m, html as o } from "lit";
 import { LitElement as b, createEvent as p } from "@arcgis/lumina";

package/dist/components/arcgis-ticks/customElement.js

@@ -1,7 +1,7 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as $ } from "../../chunks/runtime.js";
-import { css as M, html as c } from "lit";
-import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as u } from "@arcgis/lumina";
+import { css as M, html as o } from "lit";
+import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as f } from "@arcgis/lumina";
 import { formatNumber as z } from "@arcgis/core/intl.js";
 const n = {
   container: "container",
@@ -12,7 +12,7 @@ const n = {
   tickMax: "tick--max",
   tickLabel: "tick-label",
   baseline: "baseline"
-}, A = M`:host{display:flex;--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-gap: 1em;--arcgis-ticks-font-size: var(--calcite-font-size--2)}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--calcite-font-weight-medium);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:.125rem;height:var(--arcgis-ticks-tick-length);transform:translate(-50%)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:.125rem;transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
+}, A = M`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
 class F extends _ {
   constructor() {
     super(...arguments), this._formatValue = (e) => z(e, this._formatOptions), this._formatOptions = {
@@ -62,23 +62,23 @@ class F extends _ {
     return i ?? this._formatValue(e);
   }
   render() {
-    return c`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
+    return o`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
   }
   _renderContent() {
-    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: o, mirrored: l, showLabels: x } = this, g = [], b = [];
-    for (const [d, f] of L(r, i, t, e, a)) {
-      const p = { [o === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${d}%` }, w = {
+    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: c, mirrored: l, showLabels: w } = this, u = [], b = [];
+    for (const [k, d] of L(r, i, t, e, a)) {
+      const p = { [c === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${k}%` }, x = {
         [n.tick]: !0,
-        [n.tickMin]: d === 0,
-        [n.tickMax]: d === 100
+        [n.tickMin]: k === 0,
+        [n.tickMax]: k === 100
       };
-      g.push(c`<div class=${h(w)} style=${u(p)} data-value=${f ?? v}></div>`), x && b.push(c`<div class=${h(n.tickLabel)} style=${u(p)} data-value=${f ?? v}>${this._internalLabelFormatter(f)}</div>`);
+      u.push(o`<div class=${h(x)} style=${f(p)} data-value=${d ?? v}></div>`), w && b.push(o`<div class=${h(n.tickLabel)} style=${f(p)} data-value=${d ?? v}>${this._internalLabelFormatter(d)}</div>`);
     }
-    return [c`<div class=${h(n.labelsContainer)}>${b}</div>`, c`<div class=${h(n.ticksContainer)}>${g}</div>`];
+    return [o`<div class=${h(n.labelsContainer)}>${b}</div>`, o`<div class=${h(n.ticksContainer)}>${u}</div>`];
   }
   _renderBaseline() {
     const { showBaseline: e, layout: t } = this;
-    return e && c`<div class=${h(n.baseline)} style=${u({
+    return e && o`<div class=${h(n.baseline)} style=${f({
       [t === "horizontal" ? "width" : "height"]: "100%",
       [t === "horizontal" ? "height" : "width"]: "0.125rem"
     })}></div>` || "";
@@ -88,9 +88,9 @@ function* L(s, e, t, i, r) {
   switch (s) {
     case "value": {
       const a = Array.isArray(r) ? r : [r];
-      for (const o of a) {
-        const l = P(e, t, o, i) * 100;
-        l >= 0 && l <= 100 && (yield [l, o]);
+      for (const c of a) {
+        const l = P(e, t, c, i) * 100;
+        l >= 0 && l <= 100 && (yield [l, c]);
       }
       break;
     }
@@ -108,15 +108,15 @@ function* L(s, e, t, i, r) {
       if (a <= 1)
         yield [50, m(e, t, 0.5, i)];
       else
-        for (let o = 0; o < a; o++) {
-          const l = o * 100 / (a - 1);
+        for (let c = 0; c < a; c++) {
+          const l = c * 100 / (a - 1);
           yield [l, m(e, t, l / 100, i)];
         }
       break;
     }
   }
 }
-function k(s, e, t) {
+function g(s, e, t) {
   return t < s ? s : t > e ? e : t;
 }
 function y(s, e, t) {
@@ -124,13 +124,13 @@ function y(s, e, t) {
 }
 function P(s, e, t, i = 0) {
   let r = (t - s) / (e - s);
-  if (r = k(0, 1, r), Math.abs(i) < 1e-9)
+  if (r = g(0, 1, r), Math.abs(i) < 1e-9)
     return r;
   const a = 1 + Math.expm1(i) * r;
-  return r = Math.log(a) / i, k(0, 1, r);
+  return r = Math.log(a) / i, g(0, 1, r);
 }
 function m(s, e, t, i = 0) {
-  if (t = k(0, 1, t), Math.abs(i) < 1e-9)
+  if (t = g(0, 1, t), Math.abs(i) < 1e-9)
     return y(s, e, t);
   const r = Math.expm1(i * t) / Math.expm1(i);
   return y(s, e, r);