@arcgis/common-components 5.2.0-next.2 → 5.2.0-next.21

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

@@ -1,14 +1,14 @@
 /* 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 { keyed as w } from "lit/directives/keyed.js";
+import { LitElement as $, createEvent as r, renderElement as y, 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 k } from "@lit/task";
-import { log as f, composeMissingPropertyMessage as S } from "@arcgis/toolkit/log";
+import { Task as S } from "@lit/task";
+import { log as f, composeMissingPropertyMessage as x } 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";
+import { i as b } from "../../chunks/commonFunctions.js";
+import { u as k } from "../../chunks/useT9n.js";
 const n = /* @__PURE__ */ new Map();
 n.set("oid", "key");
 n.set("guid", "key");
@@ -26,13 +26,13 @@ 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 {
+const L = ({ fieldType: m }) => l`<calcite-icon scale=s .icon=${n.get(m)}></calcite-icon>`, B = 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 I extends $ {
   constructor() {
-    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, {
+    super(...arguments), this._messages = k({ 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 S(this, {
       task: async ([e]) => {
-        if (!this.listOnly && !x(e?.refElement))
-          throw f("error", this, S("popoverProps")), new Error();
+        if (!this.listOnly && !b(e?.refElement))
+          throw f("error", this, x("popoverProps")), new Error();
         this._propWatcherTask.autoRun = !1;
       },
       args: () => [this.popoverProps]
@@ -42,7 +42,7 @@ class L extends w {
     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 = E;
+    this.styles = B;
   }
   async reposition() {
     await this.popoverNode.value?.reposition();
@@ -88,8 +88,8 @@ class L extends w {
   }
   getSortedList(e) {
     let t = [...e];
-    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;
+    const s = t.filter((i) => i.type === "none");
+    return t = t.filter((i) => i.type !== "none"), this.lastSortBy === "display" ? t.sort((i, o) => i.alias.localeCompare(o.alias)) : this.lastSortBy === "field" ? t.sort((i, o) => i.name.localeCompare(o.name)) : this.lastSortBy === "type" && t.sort((i, o) => i.type.localeCompare(o.type)), t = t.concat(s), t;
   }
   isExpression(e) {
     return this.customExpressionCheck ? this.customExpressionCheck(e) : e.name.includes(g.expression);
@@ -132,12 +132,12 @@ class L extends w {
       ];
   }
   addFieldInfoFlowItem(e, t) {
-    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) => {
+    const s = this.flowElement.value, i = y(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);
     }} ${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();
+    s.appendChild(i), this.panelElement.value.selected = !1, this.fieldInfoFlowItemEl?.value.setFocus();
   }
   usingCustomGroups() {
     return !!this.fields.length && "fields" in this.fields[0];
@@ -151,12 +151,12 @@ class L extends w {
   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 = (
+    const e = this.getAllFields().map((o) => o.name), t = new Set(this.selectedFields), s = e.filter((o) => t.has(o)), i = (
       // adding/removing fields
-      i.length !== this.selectedFields.length || // reordering fields
-      i.some((o, p) => o !== this.selectedFields[p])
+      s.length !== this.selectedFields.length || // reordering fields
+      s.some((o, p) => o !== this.selectedFields[p])
     );
-    return s && (this.selectedFields = [...i]), s;
+    return i && (this.selectedFields = [...s]), i;
   }
   render() {
     return this._propWatcherTask.render({
@@ -177,30 +177,22 @@ class L extends w {
     });
   }
   renderList() {
-    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));
+    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=${v(this.listOnly ? "" : "content")} .filterEnabled=${s} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => {
+      const i = this.listNode.value.selectedItems.map((d) => d.value), o = this.selectedFields.filter((d) => i.includes(d)), p = i.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}`;
+    }} @calciteListFilter=${(i) => {
+      i.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 && (!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}`;
   }
   renderSortButton() {
     const e = this.getAllFields();
     if (!(e.length >= this.showFilterLength && !this.hideSort))
       return "";
-    const i = e.every((s) => !!s.type);
+    const s = e.every((i) => !!i.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()} ${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>`;
+    }} @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"} @calciteDropdownItemSelect=${() => this.setSortBy("default")}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @calciteDropdownItemSelect=${() => this.setSortBy("display")}>${this._messages.displayName}</calcite-dropdown-item>${s && l`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @calciteDropdownItemSelect=${() => this.setSortBy("type")}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @calciteDropdownItemSelect=${() => this.setSortBy("field")}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
   }
   renderSelectionButton() {
     return l`<div class="selection-button-div"><calcite-button appearance=transparent scale=s width=full @click=${() => {
@@ -210,18 +202,18 @@ class L extends w {
         this.selectedFields = [.../* @__PURE__ */ new Set([...this.selectedFields, ...this.filterFields])];
       else {
         const t = this.getAllFields();
-        this.selectedFields = t.map((i) => i.name);
+        this.selectedFields = t.map((s) => s.name);
       }
       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((i) => l`<calcite-list-item-group .heading=${i.title}>${i.fields.map((s) => this.renderCalciteListItem(s))}</calcite-list-item-group>`);
+    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>`);
   }
   renderCalciteListItem(e) {
-    const t = this.showFieldInfoCheck(e), i = this.showFieldTypeIcon && !!e.type;
-    return y(e.name, l`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
+    const t = this.showFieldInfoCheck(e), s = this.showFieldTypeIcon && !!e.type;
+    return w(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)
@@ -229,26 +221,26 @@ class L 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
-    }}>${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>`);
+    }}>${s && l`<div slot=actions-end class="field-icons">${L({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, t)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
   }
   renderInfoAction(e, t) {
-    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;
+    const { _messages: s } = this;
+    return t ? l`<calcite-action slot=actions-end .text=${s.info} title=${s.info ?? h} scale=s icon=information @click=${(i) => {
+      i.stopPropagation();
+      const o = i.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 ?? h} scale=s icon=pencil @click=${(i) => {
-      i.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=${(s) => {
+      s.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 ?? h} scale=s icon=trash @click=${(i) => {
-      i.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=${(s) => {
+      s.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderAddButton() {
@@ -262,7 +254,7 @@ class L extends w {
     }}>${this._messages.cancel}</calcite-button>`;
   }
 }
-F("arcgis-field-pick-list", L);
+F("arcgis-field-pick-list", I);
 export {
-  L as ArcgisFieldPickList
+  I as ArcgisFieldPickList
 };

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

@@ -17,10 +17,12 @@ 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 DimensionFeatureLayer from "@arcgis/core/layers/DimensionFeatureLayer.js";
+import type AnnotationFeatureLayer from "@arcgis/core/layers/AnnotationFeatureLayer.js";
 
 /**
  * All supported layer types
  *
  * @internal
  */
-export type FieldPickListLayer = CatalogFootprintLayer | CatalogLayer | CSVLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | ImageryTileLayer | KnowledgeGraphSublayer | OGCFeatureLayer | OrientedImageryLayer | ParquetLayer | SceneLayer | StreamLayer | Sublayer | SubtypeGroupLayer | SubtypeSublayer | VoxelLayer | WCSLayer | WFSLayer;
+export type FieldPickListLayer = AnnotationFeatureLayer | CatalogFootprintLayer | CatalogLayer | CSVLayer | DimensionFeatureLayer | FeatureLayer | GeoJSONLayer | ImageryLayer | ImageryTileLayer | KnowledgeGraphSublayer | OGCFeatureLayer | OrientedImageryLayer | ParquetLayer | SceneLayer | StreamLayer | Sublayer | SubtypeGroupLayer | SubtypeSublayer | VoxelLayer | WCSLayer | WFSLayer;

package/dist/components/arcgis-picker-input/customElement.d.ts

@@ -29,8 +29,12 @@ export abstract class ArcgisPickerInput extends LitElement {
   accessor label: string;
   /** Convenience prop to specify common popover props. */
   accessor popoverProps: PopoverProps | undefined;
-  /** Close the component. */
-  close(): Promise<void>;
+  /**
+   * Close the component.
+   *
+   * @param options
+   */
+  close(options?: { focus: boolean; }): Promise<void>;
   /** Set focus on the component. */
   setFocus(): Promise<void>;
   /** Emitted when the component has been closed. */

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

@@ -14,8 +14,8 @@ class d extends a {
   static {
     this.styles = p;
   }
-  async close() {
-    this.onPopoverClose();
+  async close(e) {
+    this.onPopoverClose(e);
   }
   async setFocus() {
     this.buttonEl?.focus();
@@ -30,16 +30,16 @@ class d extends a {
     this.panelEl.value.closed = !1, this.arcgisPopoverOpen.emit(), e.stopPropagation();
   }
   handlePopoverKeyUp({ key: e }) {
-    e === "Escape" && this.onPopoverClose();
+    e === "Escape" && this.onPopoverClose({ focus: !0 });
   }
   onPopoverOpen(e) {
     this.open && (e.composedPath().includes(this.el) || (this.open = !1));
   }
-  onPopoverClose() {
-    this.open = !1, this.arcgisPopoverClose.emit(), setTimeout(() => this.buttonEl?.focus(), 300);
+  onPopoverClose(e) {
+    this.open = !1, this.arcgisPopoverClose.emit(), e?.focus && setTimeout(() => this.buttonEl?.focus(), 300);
   }
   handlePanelClose(e) {
-    e.stopPropagation(), this.onPopoverClose();
+    e.stopPropagation(), this.onPopoverClose({ focus: !0 });
   }
   handleButtonClick() {
     this.open = !this.open, this.open && setTimeout(() => {
@@ -48,7 +48,7 @@ class d extends a {
   }
   render() {
     const { popoverProps: e } = this;
-    return o`<calcite-popover pointer-disabled trigger-disabled @keyup=${this.handlePopoverKeyUp} .label=${this.label} .offsetDistance=${e?.offsetDistance ?? 0} .offsetSkidding=${e?.offsetSkidding ?? 0} .flipDisabled=${e?.flipDisabled ?? !1} .open=${this.disabled ? !1 : this.open} .overlayPositioning=${e?.overlayPositioning ?? "fixed"} .placement=${e?.placement ?? "bottom"} @calcitePopoverOpen=${this.handlePopoverOpen} @calcitePopoverClose=${(s) => s.stopPropagation()} .referenceElement=${e?.refElement ?? this.previewContainerEl}><calcite-panel closable .heading=${this.heading} style=${r(e?.maxHeight ? { maxHeight: e.maxHeight } : void 0)} @calcitePanelClose=${this.handlePanelClose} ${t(this.panelEl)}><slot name=content></slot><calcite-button appearance=solid slot=footer width=full .label=${this.intlDone} @click=${this.onPopoverClose}>${this.intlDone}</calcite-button></calcite-panel></calcite-popover><div class="container"><div class="preview" ${t(this.setPreviewContainerRef)}><button .disabled=${this.disabled} @click=${this.handleButtonClick} type=button .ariaLabel=${this.label} ${t(this.setButtonRef)}><slot name=preview></slot>${this.iconEnd ? o`<calcite-icon .icon=${this.iconEnd} scale=s></calcite-icon>` : null}</button></div><slot name=content-end></slot></div>`;
+    return o`<calcite-popover pointer-disabled trigger-disabled @keyup=${this.handlePopoverKeyUp} .label=${this.label} .offsetDistance=${e?.offsetDistance ?? 0} .offsetSkidding=${e?.offsetSkidding ?? 0} .flipDisabled=${e?.flipDisabled ?? !1} .open=${this.disabled ? !1 : this.open} .overlayPositioning=${e?.overlayPositioning ?? "fixed"} .placement=${e?.placement ?? "bottom"} @calcitePopoverOpen=${this.handlePopoverOpen} @calcitePopoverClose=${(s) => s.stopPropagation()} .referenceElement=${e?.refElement ?? this.previewContainerEl}><calcite-panel closable .heading=${this.heading} style=${r(e?.maxHeight ? { maxHeight: e.maxHeight } : void 0)} @calcitePanelClose=${this.handlePanelClose} ${t(this.panelEl)}><slot name=content></slot><calcite-button appearance=solid slot=footer width=full .label=${this.intlDone} @click=${() => this.onPopoverClose({ focus: !0 })}>${this.intlDone}</calcite-button></calcite-panel></calcite-popover><div class="container"><div class="preview" ${t(this.setPreviewContainerRef)}><button .disabled=${this.disabled} @click=${this.handleButtonClick} type=button .ariaLabel=${this.label} ${t(this.setButtonRef)}><slot name=preview></slot>${this.iconEnd ? o`<calcite-icon .icon=${this.iconEnd} scale=s></calcite-icon>` : null}</button></div><slot name=content-end></slot></div>`;
   }
 }
 n("arcgis-picker-input", d);

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

@@ -4,7 +4,7 @@ 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";
 import { makeAccessorController as te } from "@arcgis/lumina/controllers/accessor";
 import { slotChangeHasAssignedElement as R, classes as ae, getClosestElement as ne } from "@arcgis/toolkit/dom";
-import { css as re, html as y } from "lit";
+import { css as re, html as w } from "lit";
 import { map as ie } from "lit/directives/map.js";
 import { createRef as B, ref as O } from "lit/directives/ref.js";
 import { u as se } from "../../chunks/useT9n.js";
@@ -50,10 +50,10 @@ function ge(n) {
   const e = Number.isFinite(n) ? Math.floor(n) : 1;
   return Math.max(1, e);
 }
-const me = re`:host{display:flex;width:100%;height:100%;font-family:Avenir Next,Helvetica Neue,helvetica,arial,sans-serif;font-size:var(--calcite-font-size--2);font-variant-numeric:tabular-nums;--arcgis-slider-dash-length: 5px;--arcgis-slider-handle-size: .875rem;--arcgis-slider-track-background-color: var(--calcite-color-border-2);--arcgis-slider-internal-show-range-labels: 0;--arcgis-slider-internal-show-value-labels: 0;--arcgis-slider-internal-value-labels-placement-start: 0;--arcgis-slider-internal-value-labels-placement-end: 0;--arcgis-slider-internal-range-labels-placement-center: 0;--arcgis-slider-internal-range-labels-placement-end: 0;--arcgis-slider-internal-handle-offset: calc(var(--arcgis-slider-handle-size) / 2);--arcgis-slider-internal-label-input-margin: calc(var(--arcgis-slider-internal-handle-offset) + 4px);--arcgis-slider-internal-label-input-height: var(--calcite-input-number-height, 1.5rem);--arcgis-slider-internal-track-size: 2px}:host([show-range-labels]){--arcgis-slider-internal-show-range-labels: 1}:host(:not([value-labels-display="hidden"])){--arcgis-slider-internal-show-value-labels: 1}:host([value-labels-placement="start"]){--arcgis-slider-internal-value-labels-placement-start: var(--arcgis-slider-internal-show-value-labels)}:host([value-labels-placement="end"]){--arcgis-slider-internal-value-labels-placement-end: var(--arcgis-slider-internal-show-value-labels)}:host([range-labels-placement="center"]){--arcgis-slider-internal-range-labels-placement-center: var(--arcgis-slider-internal-show-range-labels)}:host([range-labels-placement="end"]){--arcgis-slider-internal-range-labels-placement-end: var(--arcgis-slider-internal-show-range-labels)}:host([disabled]){cursor:default;opacity:var(--calcite-opacity-disabled);pointer-events:none}.content{direction:ltr;flex:1;touch-action:none;user-select:none;display:grid;word-wrap:normal;word-break:normal;padding-block:var(--arcgis-slider-internal-handle-offset)}.track-container{grid-area:track-container;position:relative;display:flex;justify-content:center;align-items:center}.track{touch-action:none;position:relative}.track-bounds{background-color:var(--calcite-color-border-2)}.track-fill{--arcgis-slider-track-background-color: var(--calcite-color-brand)}:host([layout="vertical"]){.track-effective-start{background:repeating-linear-gradient(to bottom,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}.track-effective-end{background:repeating-linear-gradient(to top,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}}:host([layout="horizontal"]){.track-effective-start{background:repeating-linear-gradient(to right,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}.track-effective-end{background:repeating-linear-gradient(to left,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}}.track-range{background-color:var(--calcite-color-brand);&.active{box-shadow:0 0 8px #00000029;outline:1px solid var(--calcite-color-focus, var(--calcite-color-focus, var(--calcite-color-brand)))}}:host([disabled]) .track-range{background-color:var(--calcite-color-text-3)}:host([disabled]),:host([disabled][layout="horizontal"]),:host([disabled][layout="vertical"]){.track-range.interactive:after{cursor:default;pointer-events:none}}:host([layout="horizontal"]){.track-range.interactive:after{all:initial;cursor:ew-resize;position:absolute;inline-size:100%;content:"";inset-block-start:calc(-1 * var(--arcgis-slider-internal-handle-offset));block-size:var(--arcgis-slider-handle-size);margin-top:1px}}:host([layout="vertical"]){.track-range.interactive:after{all:initial;cursor:ns-resize;position:absolute;inline-size:100%;content:"";inset-block-start:calc(-1 * var(--arcgis-slider-internal-handle-offset));block-size:var(--arcgis-slider-handle-size);margin-left:1px;writing-mode:vertical-lr}}.segment{transform-origin:0 0;inset-block-start:0px;block-size:.125rem;position:absolute;top:0;left:0}.thumb{-webkit-user-select:none;user-select:none;background-color:#4c4c4c;position:absolute}.thumb:focus,.thumb.active{.handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px #00000029;outline:2px solid var(--calcite-color-focus, var(--calcite-color-focus, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}.handle{cursor:pointer;box-sizing:border-box;z-index:1;touch-action:none;background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;border-radius:var(--arcgis-slider-handle-size);width:var(--arcgis-slider-handle-size);height:var(--arcgis-slider-handle-size);transition:all var(--calcite-animation-timing, .125s) ease-in-out;position:absolute;top:calc(var(--arcgis-slider-internal-handle-offset) * -1);left:calc(var(--arcgis-slider-internal-handle-offset) * -1)}.handle:hover{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.label{position:absolute;will-change:transform}.label[hidden]{display:block;opacity:0;pointer-events:none}.min{grid-area:range-start}.max{grid-area:range-end}:host([layout="horizontal"][mirrored][range-labels-placement="center"]),:host([layout="vertical"]:not([mirrored])){.min{grid-area:range-end}.max{grid-area:range-start}}.content-start{grid-area:content-start;display:flex}.content-end{grid-area:content-end;display:flex}:host([layout="vertical"]){.content{grid-template:". range-start range-start range-start ." "content-start content-start track-container content-end content-end" ". range-end range-end range-end .";grid-template-rows:auto 1fr auto;grid-template-columns:1fr auto auto auto 1fr;row-gap:var(--arcgis-slider-internal-handle-offset)}.track-container{flex-direction:column}.track{flex:1;width:var(--arcgis-slider-internal-track-size)}.segment{writing-mode:vertical-lr}.label{top:calc(var(--arcgis-slider-internal-label-input-height) * -.5)}&:host([value-labels-placement="start"]){.label{right:var(--arcgis-slider-internal-label-input-margin)}}&:host([value-labels-placement="end"]){.label{left:var(--arcgis-slider-internal-label-input-margin)}}}:host([layout="horizontal"][range-labels-placement="center"]){.content{--arcgis-slider-internal-content-start-min-height: calc( ((1 - var(--arcgis-slider-internal-show-range-labels)) * var(--arcgis-slider-internal-handle-offset)) + (var(--arcgis-slider-internal-value-labels-placement-start) * var(--arcgis-slider-internal-label-input-height)) );--arcgis-slider-internal-content-end-min-height: calc( ((1 - var(--arcgis-slider-internal-show-range-labels)) * var(--arcgis-slider-internal-handle-offset)) + (var(--arcgis-slider-internal-value-labels-placement-end) * var(--arcgis-slider-internal-label-input-height)) );column-gap:calc(var(--arcgis-slider-internal-show-range-labels) * var(--arcgis-slider-internal-handle-offset) / 2);padding-inline:calc((1 - var(--arcgis-slider-internal-show-range-labels)) * var(--arcgis-slider-internal-handle-offset));grid-template:". content-start ." "range-start content-start range-end" "range-start track-container range-end" "range-start content-end range-end" ". content-end .";grid-template-columns:auto 1fr auto;grid-template-rows:minmax(var(--arcgis-slider-internal-content-start-min-height),auto) calc(var(--arcgis-slider-internal-show-range-labels) * calc(calc(var(--arcgis-slider-internal-label-input-height) / 2) - calc(var(--arcgis-slider-internal-track-size) / 2))) var(--arcgis-slider-internal-track-size) calc(var(--arcgis-slider-internal-show-range-labels) * calc(calc(var(--arcgis-slider-internal-label-input-height) / 2) - calc(var(--arcgis-slider-internal-track-size) / 2))) minmax(var(--arcgis-slider-internal-content-end-min-height),auto)}.track{flex:1;height:var(--arcgis-slider-internal-track-size)}&:host([value-labels-placement="start"]){.label{bottom:var(--arcgis-slider-internal-label-input-margin)}}&:host([value-labels-placement="end"]){.label{top:var(--arcgis-slider-internal-label-input-margin)}}}:host([layout="horizontal"][range-labels-placement="end"]){.content{--arcgis-slider-internal-content-start-min-height: calc( var(--arcgis-slider-internal-handle-offset) + var(--arcgis-slider-internal-value-labels-placement-start) * var(--arcgis-slider-internal-label-input-height) );--arcgis-slider-internal-content-end-min-height: calc( var(--arcgis-slider-internal-value-labels-placement-end) * var(--arcgis-slider-internal-label-input-height) );padding-inline:var(--arcgis-slider-internal-handle-offset);grid-template:"content-start content-start content-start" "track-container track-container track-container" "content-end content-end content-end" "content-end content-end content-end" "content-end content-end content-end";grid-template-columns:auto;grid-template-rows:minmax(var(--arcgis-slider-internal-content-start-min-height),auto) var(--arcgis-slider-internal-track-size) var(--arcgis-slider-internal-handle-offset) calc(var(--arcgis-slider-internal-range-labels-placement-end) * var(--arcgis-slider-internal-label-input-height)) minmax(var(--arcgis-slider-internal-content-end-min-height),auto);column-gap:var(--arcgis-slider-internal-handle-offset)}.track{flex:1;height:var(--arcgis-slider-internal-track-size)}&:host([value-labels-placement="start"]){.label{bottom:var(--arcgis-slider-internal-label-input-margin)}}&:host([value-labels-placement="end"]){.label{top:calc(var(--arcgis-slider-internal-label-input-margin) + var(--arcgis-slider-internal-range-labels-placement-end) * (var(--arcgis-slider-internal-label-input-height)))}}.min,.max{--arcgis-slider-internal-range-translation: calc(var(--arcgis-slider-internal-handle-offset) + .5rem + 1px);grid-area:unset;grid-row:-3}&:host(:not([mirrored])){.min{grid-column:1;transform:translate(calc(var(--arcgis-slider-internal-range-translation) * -1))}.max{grid-column:3;transform:translate(var(--arcgis-slider-internal-range-translation))}}&:host([mirrored]){.min{grid-column:3;transform:translate(var(--arcgis-slider-internal-range-translation))}.max{grid-column:1;transform:translate(calc(var(--arcgis-slider-internal-range-translation) * -1))}}}`;
+const me = re`:host{display:flex;width:100%;height:100%;font-family:Avenir Next,Helvetica Neue,helvetica,arial,sans-serif;font-size:var(--calcite-font-size--2);font-variant-numeric:tabular-nums;--arcgis-slider-dash-length: 5px;--arcgis-slider-handle-size: .875rem;--arcgis-slider-track-background-color: var(--calcite-color-border-2);--arcgis-slider-internal-show-range-labels: 0;--arcgis-slider-internal-show-value-labels: 0;--arcgis-slider-internal-value-labels-placement-start: 0;--arcgis-slider-internal-value-labels-placement-end: 0;--arcgis-slider-internal-range-labels-placement-center: 0;--arcgis-slider-internal-range-labels-placement-end: 0;--arcgis-slider-internal-handle-offset: calc(var(--arcgis-slider-handle-size) / 2);--arcgis-slider-internal-label-input-margin: calc(var(--arcgis-slider-internal-handle-offset) + 4px);--arcgis-slider-internal-label-input-height: var(--calcite-input-number-height, 1.5rem);--arcgis-slider-internal-track-size: 2px}:host([show-range-labels]){--arcgis-slider-internal-show-range-labels: 1}:host(:not([value-labels-display="hidden"])){--arcgis-slider-internal-show-value-labels: 1}:host([value-labels-placement="start"]){--arcgis-slider-internal-value-labels-placement-start: var(--arcgis-slider-internal-show-value-labels)}:host([value-labels-placement="end"]){--arcgis-slider-internal-value-labels-placement-end: var(--arcgis-slider-internal-show-value-labels)}:host([range-labels-placement="center"]){--arcgis-slider-internal-range-labels-placement-center: var(--arcgis-slider-internal-show-range-labels)}:host([range-labels-placement="end"]){--arcgis-slider-internal-range-labels-placement-end: var(--arcgis-slider-internal-show-range-labels)}:host([disabled]){cursor:default;opacity:var(--calcite-opacity-disabled);pointer-events:none}.content{direction:ltr;flex:1;touch-action:none;user-select:none;display:grid;word-wrap:normal;word-break:normal;padding-block:var(--arcgis-slider-internal-handle-offset)}.track-container{grid-area:track-container;position:relative;display:flex;justify-content:center;align-items:center}.track{touch-action:none;position:relative}.track-bounds{background-color:var(--calcite-color-border-2)}:host([layout="vertical"]){.track-effective-start{background:repeating-linear-gradient(to bottom,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}.track-effective-end{background:repeating-linear-gradient(to top,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}}:host([layout="horizontal"]){.track-effective-start{background:repeating-linear-gradient(to right,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}.track-effective-end{background:repeating-linear-gradient(to left,var(--arcgis-slider-track-background-color) 0 var(--arcgis-slider-dash-length),color-mix(in srgb,transparent 75%,var(--arcgis-slider-track-background-color) 25%) var(--arcgis-slider-dash-length) calc(var(--arcgis-slider-dash-length) * 2))}}.track-range{background-color:var(--calcite-color-brand);&.active{box-shadow:0 0 8px #00000029;outline:1px solid var(--calcite-color-focus, var(--calcite-color-focus, var(--calcite-color-brand)))}}:host([disabled]) .track-range{background-color:var(--calcite-color-text-3)}:host([disabled]),:host([disabled][layout="horizontal"]),:host([disabled][layout="vertical"]){.track-range.interactive:after{cursor:default;pointer-events:none}}:host([layout="horizontal"]){.track-range.interactive:after{all:initial;cursor:ew-resize;position:absolute;inline-size:100%;content:"";inset-block-start:calc(-1 * var(--arcgis-slider-internal-handle-offset));block-size:var(--arcgis-slider-handle-size);margin-top:1px}}:host([layout="vertical"]){.track-range.interactive:after{all:initial;cursor:ns-resize;position:absolute;inline-size:100%;content:"";inset-block-start:calc(-1 * var(--arcgis-slider-internal-handle-offset));block-size:var(--arcgis-slider-handle-size);margin-left:1px;writing-mode:vertical-lr}}.segment{transform-origin:0 0;inset-block-start:0px;block-size:.125rem;position:absolute;top:0;left:0}.thumb{-webkit-user-select:none;user-select:none;background-color:#4c4c4c;position:absolute}.thumb:focus,.thumb.active{.handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px #00000029;outline:2px solid var(--calcite-color-focus, var(--calcite-color-focus, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}.handle{cursor:pointer;box-sizing:border-box;z-index:1;touch-action:none;background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;border-radius:var(--arcgis-slider-handle-size);width:var(--arcgis-slider-handle-size);height:var(--arcgis-slider-handle-size);transition:all var(--calcite-animation-timing, .125s) ease-in-out;position:absolute;top:calc(var(--arcgis-slider-internal-handle-offset) * -1);left:calc(var(--arcgis-slider-internal-handle-offset) * -1)}.handle:hover{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.label{position:absolute;will-change:transform}.min{grid-area:range-start}.max{grid-area:range-end}:host([layout="horizontal"][mirrored][range-labels-placement="center"]),:host([layout="vertical"]:not([mirrored])){.min{grid-area:range-end}.max{grid-area:range-start}}.content-start{grid-area:content-start;display:flex}.content-end{grid-area:content-end;display:flex}:host([layout="vertical"]){.content{grid-template:". range-start range-start range-start ." "content-start content-start track-container content-end content-end" ". range-end range-end range-end .";grid-template-rows:auto 1fr auto;grid-template-columns:1fr auto auto auto 1fr;row-gap:var(--arcgis-slider-internal-handle-offset)}.track-container{flex-direction:column}.track{flex:1;width:var(--arcgis-slider-internal-track-size)}.segment{writing-mode:vertical-lr}.label{top:calc(var(--arcgis-slider-internal-label-input-height) * -.5)}&:host([value-labels-placement="start"]){.label{right:var(--arcgis-slider-internal-label-input-margin)}}&:host([value-labels-placement="end"]){.label{left:var(--arcgis-slider-internal-label-input-margin)}}}:host([layout="horizontal"][range-labels-placement="center"]){.content{--arcgis-slider-internal-content-start-min-height: calc( ((1 - var(--arcgis-slider-internal-show-range-labels)) * var(--arcgis-slider-internal-handle-offset)) + (var(--arcgis-slider-internal-value-labels-placement-start) * var(--arcgis-slider-internal-label-input-height)) );--arcgis-slider-internal-content-end-min-height: calc( ((1 - var(--arcgis-slider-internal-show-range-labels)) * var(--arcgis-slider-internal-handle-offset)) + (var(--arcgis-slider-internal-value-labels-placement-end) * var(--arcgis-slider-internal-label-input-height)) );column-gap:calc(var(--arcgis-slider-internal-show-range-labels) * var(--arcgis-slider-internal-handle-offset) / 2);padding-inline:calc((1 - var(--arcgis-slider-internal-show-range-labels)) * var(--arcgis-slider-internal-handle-offset));grid-template:". content-start ." "range-start content-start range-end" "range-start track-container range-end" "range-start content-end range-end" ". content-end .";grid-template-columns:auto 1fr auto;grid-template-rows:minmax(var(--arcgis-slider-internal-content-start-min-height),auto) calc(var(--arcgis-slider-internal-show-range-labels) * calc(calc(var(--arcgis-slider-internal-label-input-height) / 2) - calc(var(--arcgis-slider-internal-track-size) / 2))) var(--arcgis-slider-internal-track-size) calc(var(--arcgis-slider-internal-show-range-labels) * calc(calc(var(--arcgis-slider-internal-label-input-height) / 2) - calc(var(--arcgis-slider-internal-track-size) / 2))) minmax(var(--arcgis-slider-internal-content-end-min-height),auto)}.track{flex:1;height:var(--arcgis-slider-internal-track-size)}&:host([value-labels-placement="start"]){.label{bottom:var(--arcgis-slider-internal-label-input-margin)}}&:host([value-labels-placement="end"]){.label{top:var(--arcgis-slider-internal-label-input-margin)}}}:host([layout="horizontal"][range-labels-placement="end"]){.content{--arcgis-slider-internal-content-start-min-height: calc( var(--arcgis-slider-internal-handle-offset) + var(--arcgis-slider-internal-value-labels-placement-start) * var(--arcgis-slider-internal-label-input-height) );--arcgis-slider-internal-content-end-min-height: calc( var(--arcgis-slider-internal-value-labels-placement-end) * var(--arcgis-slider-internal-label-input-height) );padding-inline:var(--arcgis-slider-internal-handle-offset);grid-template:"content-start content-start content-start" "track-container track-container track-container" "content-end content-end content-end" "content-end content-end content-end" "content-end content-end content-end";grid-template-columns:auto;grid-template-rows:minmax(var(--arcgis-slider-internal-content-start-min-height),auto) var(--arcgis-slider-internal-track-size) var(--arcgis-slider-internal-handle-offset) calc(var(--arcgis-slider-internal-range-labels-placement-end) * var(--arcgis-slider-internal-label-input-height)) minmax(var(--arcgis-slider-internal-content-end-min-height),auto);column-gap:var(--arcgis-slider-internal-handle-offset)}.track{flex:1;height:var(--arcgis-slider-internal-track-size)}&:host([value-labels-placement="start"]){.label{bottom:var(--arcgis-slider-internal-label-input-margin)}}&:host([value-labels-placement="end"]){.label{top:calc(var(--arcgis-slider-internal-label-input-margin) + var(--arcgis-slider-internal-range-labels-placement-end) * (var(--arcgis-slider-internal-label-input-height)))}}.min,.max{--arcgis-slider-internal-range-translation: calc(var(--arcgis-slider-internal-handle-offset) + .5rem + 1px);grid-area:unset;grid-row:-3}&:host(:not([mirrored])){.min{grid-column:1;transform:translate(calc(var(--arcgis-slider-internal-range-translation) * -1))}.max{grid-column:3;transform:translate(var(--arcgis-slider-internal-range-translation))}}&:host([mirrored]){.min{grid-column:3;transform:translate(var(--arcgis-slider-internal-range-translation))}.max{grid-column:1;transform:translate(calc(var(--arcgis-slider-internal-range-translation) * -1))}}}`;
 var fe = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, W = (n) => {
   throw TypeError(n);
-}, D = (n, e, t, a) => {
+}, k = (n, e, t, a) => {
   for (var i = a > 1 ? void 0 : a ? pe(e, t) : e, r = n.length - 1, o; r >= 0; r--)
     (o = n[r]) && (i = (a ? o(e, t, i) : o(i)) || i);
   return a && i && fe(e, t, i), i;
@@ -65,7 +65,7 @@ function xe() {
     values: []
   };
 }
-let w = class extends oe {
+let y = class extends oe {
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -178,42 +178,42 @@ let w = class extends oe {
   }
 };
 F = /* @__PURE__ */ new WeakMap();
-D([
+k([
   I()
-], w.prototype, "_entries", 2);
-D([
+], y.prototype, "_entries", 2);
+k([
   I({ readOnly: !0 })
-], w.prototype, "entries", 1);
-D([
+], y.prototype, "entries", 1);
+k([
   I()
-], w.prototype, "max", 1);
-D([
+], y.prototype, "max", 1);
+k([
   I()
-], w.prototype, "min", 1);
-D([
+], y.prototype, "min", 1);
+k([
   I({ cast: (n) => T(n, 0, 20) })
-], w.prototype, "precision", 2);
-D([
+], y.prototype, "precision", 2);
+k([
   I({ readOnly: !0 })
-], w.prototype, "ready", 2);
-D([
+], y.prototype, "ready", 2);
+k([
   I()
-], w.prototype, "values", 1);
-w = D([
+], y.prototype, "values", 1);
+y = k([
   ce("esri.widgets.Slider.SliderData")
-], w);
+], y);
 function T(n, e, t) {
   return Math.min(Math.max(n, e), t);
 }
 function x(n, e) {
   return Number.parseFloat(n.toFixed(e));
 }
-class ye {
+class we {
   constructor(e) {
     this.steps = e, this.minIndex = 0, this.maxIndex = this.steps.length - 1;
   }
   indexToValue(e) {
-    return this.steps[k(e, this.minIndex, this.maxIndex)];
+    return this.steps[D(e, this.minIndex, this.maxIndex)];
   }
   valueToIndex(e) {
     const t = this.steps.indexOf(e);
@@ -239,20 +239,20 @@ class ye {
     return a;
   }
 }
-class we {
+class ye {
   constructor(e, t, a) {
     this.min = e, this.max = t, this.stepSize = a, this.minIndex = 0, this.maxIndex = Math.round((this.max - this.min) / this.stepSize);
   }
   indexToValue(e) {
-    return this.min + k(e, this.minIndex, this.maxIndex) * this.stepSize;
+    return this.min + D(e, this.minIndex, this.maxIndex) * this.stepSize;
   }
   valueToIndex(e) {
-    return e = k(e, this.min, this.max), Math.round((e - this.min) / this.stepSize);
+    return e = D(e, this.min, this.max), Math.round((e - this.min) / this.stepSize);
   }
   getClosestStepDistances(e, t) {
     if (t <= 0)
       return [];
-    const a = [], i = this.minIndex, r = this.maxIndex, s = (k(e, this.min, this.max) - this.min) / this.stepSize;
+    const a = [], i = this.minIndex, r = this.maxIndex, s = (D(e, this.min, this.max) - this.min) / this.stepSize;
     let l = Math.floor(s), c = l + 1;
     for (; a.length < t && (l >= i || c <= r); ) {
       if (l < i) {
@@ -271,13 +271,13 @@ class we {
     return a;
   }
 }
-function ke(n) {
+function De(n) {
   if (n.steps == null)
     return null;
   const e = n.steps;
-  return Array.isArray(e) ? e.length === 0 ? null : new ye(e) : e <= 0 ? null : new we(n.min, n.max, e);
+  return Array.isArray(e) ? e.length === 0 ? null : new we(e) : e <= 0 ? null : new ye(n.min, n.max, e);
 }
-function De(n, e, t) {
+function ke(n, e, t) {
   if (n == null) {
     const s = /* @__PURE__ */ new Map();
     for (const [l, c] of e.entries())
@@ -303,7 +303,7 @@ function X(n, e, t, a, i) {
   if (!i)
     for (const [u, v] of e.entries())
       u !== t && c.add(n.valueToIndex(v));
-  const d = k(n.valueToIndex(o), s, l);
+  const d = D(n.valueToIndex(o), s, l);
   if (!c.has(d))
     return n.indexToValue(d);
   let h = null, g = 1 / 0;
@@ -365,21 +365,21 @@ function Ve(n, e, t) {
 function H(n, e, t, a) {
   const { allowValuesOverlap: i, stepsProvider: r, resolution: o, min: s, max: l } = n, c = e.get(t);
   if (a = a > 0 ? 1 : -1, !r) {
-    let m = k(c + a * o, s, l);
+    let m = D(c + a * o, s, l);
     if (i)
       return m;
     const b = /* @__PURE__ */ new Set();
     for (const [C, M] of e)
       C !== t && b.add(M);
     for (; b.has(m) && m <= l && m >= s; )
-      m = k(m + a * o, s, l);
+      m = D(m + a * o, s, l);
     return b.has(m) || m > l || m < s ? c : m;
   }
   const d = r.valueToIndex(c);
   if (d === -1)
     return c;
   if (i) {
-    const m = k(d + a, r.minIndex, r.maxIndex);
+    const m = D(d + a, r.minIndex, r.maxIndex);
     return r.indexToValue(m);
   }
   const h = /* @__PURE__ */ new Set();
@@ -467,10 +467,10 @@ function Y(n, e) {
 function Me(n, e) {
   return e - n;
 }
-function k(n, e, t) {
+function D(n, e, t) {
   return Math.max(e, Math.min(t, n));
 }
-const $e = te(w);
+const $e = te(y);
 class Pe extends ee {
   constructor() {
     super(...arguments), this._stepsProvider = null, this._popoverElement = B(), this._trackElement = B(), this.messages = se({}), this._onPointerMoveDragUpdate = (e) => {
@@ -547,7 +547,7 @@ class Pe extends ee {
     this._sliderData.startup();
   }
   willUpdate(e) {
-    if ((e.has("steps") || e.has("min") || e.has("max")) && (this._stepsProvider = ke(this)), e.has("messages") || e.has("min") || e.has("max") || e.has("precision") || e.has("labelFormatter")) {
+    if ((e.has("steps") || e.has("min") || e.has("max")) && (this._stepsProvider = De(this)), e.has("messages") || e.has("min") || e.has("max") || e.has("precision") || e.has("labelFormatter")) {
       const t = this.max != null && this.min != null && this.max - this.min > 10 ? 2 : this.precision;
       this._numberFormatOptions = { maximumFractionDigits: t }, this._minFormatter = this._createFormatter("min", this._numberFormatOptions), this._maxFormatter = this._createFormatter("max", this._numberFormatOptions), this._valueFormatter = this._createFormatter("value", this._numberFormatOptions);
     }
@@ -667,7 +667,7 @@ class Pe extends ee {
     let s = (e - a) * this._fullRange;
     if (t === "range") {
       s = Math.min(o, Math.max(r, s));
-      const l = De(this._stepsProvider, i, s);
+      const l = ke(this._stepsProvider, i, s);
       this._setValues(l);
     } else {
       const l = X(this._stepsProvider, i, t, s, this.allowValuesOverlap);
@@ -793,7 +793,7 @@ class Pe extends ee {
     this._activePart !== e && (this._activePart = e, this.arcgisActiveValueChange.emit());
   }
   render() {
-    return y`<div class=${P({
+    return w`<div class=${P({
       content: !0,
       disabled: this._disabledOrInvalid
     })} @pointerdown=${this._onPointerDown}>${this._renderContentStart()}${this._renderContentEnd()}${this._renderRangeLabel("min")}${this._renderTrackRange()}${this._renderRangeLabel("max")}${this._renderPopover()}</div>`;
@@ -801,25 +801,25 @@ class Pe extends ee {
   _renderPopover() {
     const { _activePart: e, layout: t, popoverPlacement: a, valueLabelsPlacement: i, valueLabelsDisplay: r, popoverLabel: o } = this, s = e ? ze(e) ? e : "track-range" : "", l = this._hasPopoverContent && !!s, c = t === "horizontal" ? a === "start" ? "top" : "bottom" : a === "start" ? "left" : "right";
     let d = 14;
-    return r !== "hidden" && a === i && (d += 24), y`<calcite-popover flip-disabled focus-trap-disabled .label=${o} .open=${l} .offsetDistance=${d} .placement=${c} .referenceElement=${s} scale=s trigger-disabled ${O(this._popoverElement)}><slot name=popover @slotchange=${this._popoverSlotChange}></slot></calcite-popover>`;
+    return r !== "hidden" && a === i && (d += 24), w`<calcite-popover focus-trap-disabled .label=${o} .open=${l} .offsetDistance=${d} .placement=${c} .referenceElement=${s} scale=s trigger-disabled ${O(this._popoverElement)}><slot name=popover @slotchange=${this._popoverSlotChange}></slot></calcite-popover>`;
   }
   _renderContentStart() {
-    return y`<div class="content-start" .hidden=${!this._hasContentStart}><slot name=content-start @slotchange=${this._onContentStartSlotChange}></slot></div>`;
+    return w`<div class="content-start" .hidden=${!this._hasContentStart}><slot name=content-start @slotchange=${this._onContentStartSlotChange}></slot></div>`;
   }
   _renderContentEnd() {
-    return y`<div class="content-end" .hidden=${!this._hasContentEnd}><slot name=content-end @slotchange=${this._onContentEndSlotChange}></slot></div>`;
+    return w`<div class="content-end" .hidden=${!this._hasContentEnd}><slot name=content-end @slotchange=${this._onContentEndSlotChange}></slot></div>`;
   }
   _renderTrackRange() {
-    return y`<div class="track-container">${this._renderTrack()}${this._renderThumbs()}</div>`;
+    return w`<div class="track-container">${this._renderTrack()}${this._renderThumbs()}</div>`;
   }
   _renderTrack() {
-    return y`<div class="track" ${O(this._trackElement)}>${this._renderTrackBackground()}${this._renderFillSegment()}</div>`;
+    return w`<div class="track" ${O(this._trackElement)}>${this._renderTrackBackground()}${this._renderFillSegment()}</div>`;
   }
   _renderTrackBackground() {
     const { max: e, min: t, fillPlacement: a, values: i } = this, r = i.length > 1;
     let o = this._fullMin, s = this._fullMax;
     const l = [];
-    return this._invalid ? y`<div class="segment track-bounds" style=${L({ left: "0%", right: "0%", top: "0%", bottom: "0%" })}></div>` : (o < t && (l.push(this._renderSegment(o, t, [
+    return this._invalid ? w`<div class="segment track-bounds" style=${L({ left: "0%", right: "0%", top: "0%", bottom: "0%" })}></div>` : (o < t && (l.push(this._renderSegment(o, t, [
       this.mirrored ? "track-effective-end" : "track-effective-start",
       !r && a === "start" ? "track-fill" : null
     ])), o = t), s > e && (l.push(this._renderSegment(e, s, [
@@ -865,7 +865,7 @@ class Pe extends ee {
       top: `${l[1]}%`,
       bottom: `${l[0]}%`
     }, d = ae("segment", ...a);
-    return y`<div id=${i?.id ?? E} class=${P(d)} style=${L(c)} .tabIndex=${i?.onPointerDown ? 0 : -1} @focus=${i?.onFocus} @blur=${i?.onBlur} @pointerdown=${i?.onPointerDown} @keydown=${i?.onKeyDown}></div>`;
+    return w`<div id=${i?.id ?? E} class=${P(d)} style=${L(c)} .tabIndex=${i?.onPointerDown ? 0 : -1} @focus=${i?.onFocus} @blur=${i?.onBlur} @pointerdown=${i?.onPointerDown} @keydown=${i?.onKeyDown}></div>`;
   }
   _renderThumbs() {
     const { _sliderData: e } = this, t = Array.from(e.entries).filter(([, a]) => a >= this._fullMin && a <= this._fullMax);
@@ -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.min} .ariaValueMax=${this.max} .ariaValueNow=${t} .ariaValueText=${this._valueFormatter(t)} class=${P({
+    return Z(e, w`<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({
@@ -883,7 +883,7 @@ class Pe extends ee {
   }
   _renderRangeLabel(e) {
     let t = "center";
-    return this.isHorizontal && (t = e === "min" ? "end" : "start", this.rangeLabelsPlacement === "end" && (t = t === "end" ? "start" : "end"), this.mirrored && (t = t === "end" ? "start" : "end")), y`<arcgis-label-input .alignment=${t} class=${P(e)} data-type=${e ?? E} .hidden=${!this.showRangeLabels} .labelFormatter=${this[`_${e}Formatter`]} @arcgisChange=${this._onRangeInputChange} .readOnly=${!this.rangeLabelsEditingEnabled} .value=${this[e]}></arcgis-label-input>`;
+    return this.isHorizontal && (t = e === "min" ? "end" : "start", this.rangeLabelsPlacement === "end" && (t = t === "end" ? "start" : "end"), this.mirrored && (t = t === "end" ? "start" : "end")), w`<arcgis-label-input .alignment=${t} class=${P(e)} data-type=${e ?? E} .hidden=${!this.showRangeLabels} .labelFormatter=${this[`_${e}Formatter`]} @arcgisChange=${this._onRangeInputChange} .readOnly=${!this.rangeLabelsEditingEnabled} .value=${this[e]}></arcgis-label-input>`;
   }
 }
 function Se(n) {