@arcgis/map-components 5.2.0-next.99 → 6.0.0-next.1

package/dist/components/arcgis-time-bar-slider/customElement.d.ts

@@ -1,11 +1,13 @@
 /// <reference path="../../index.d.ts" />
 import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type { PopoverDisplay } from "../arcgis-time-bar/types.js";
 import type { TimeBarViewModel } from "../arcgis-time-bar/TimeBarViewModel.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 /**
  * The `arcgis-time-bar-slider` component renders a time-based slider intended for use `arcgis-time-bar`'s "time-extent" slot.
  *
+ * @slot [content-end] - A slot that displays ticks at the end of the slider. If not provided, default ticks will be rendered.
  * @slot [max] - A slot that displays a label for the end date of the slider. If not provided, a default label will be rendered.
  * @slot [min] - A slot that displays a label for the start date of the slider. If not provided, a default label will be rendered.
  * @slot [popover] - A slot that displays a popover's content while interacting with the slider's thumb or range. If not provided, a default content will be rendered.
@@ -14,7 +16,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  * An example of a `<arcgis-time-bar-slider>` slotted into time-bar's `time-extent` slot.
  * ```html
  * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
- *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right">
+ *   <arcgis-time-bar show-play show-next show-previous show-time-extent slot="top-right">
  *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
  *   </arcgis-time-bar>
  * </arcgis-map>
@@ -45,10 +47,18 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 export abstract class ArcgisTimeBarSlider extends LitElement {
   /**
    * This property is intended to be used when inserting an element in the "popover" slot.
-   * This property will return either a
-   * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or
+   * This property will return either `undefined`, a
+   * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or a
    * [TimeExtent](https://developers.arcgis.com/javascript/latest/references/core/time/TimeExtent/)
-   * depending if the user is interacting with either a slider thumb or slider track respectively.
+   * depending on [popoverDisplay](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar-slider/#popoverDisplay) and user interaction.
+   *
+   * When the `popover-display` is set to:
+   * - `"none"`, this property will always return `undefined`
+   * - `"always"`, this property will always return [arcgis-time-bar.timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent),
+   * - `"auto"`, this property will either return a [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+   *             if the user is interacting with a slider thumb, or
+   *             [arcgis-time-bar.timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) if the user is interacting with a slider track, or
+   *             `undefined` if the user is not interacting with either a slider thumb or slider track.
    *
    * @example
    * The following example demonstrates how to use the `activeValue` property to update the content of a popover while
@@ -60,8 +70,8 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    *
    * ```html
    * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
-   *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right">
-   *     <arcgis-time-bar-slider slot="time-extent" showTimeExtentPopover>
+   *   <arcgis-time-bar show-play show-next show-previous show-time-extent slot="top-right">
+   *     <arcgis-time-bar-slider slot="time-extent" popover-display="auto">
    *       <div slot="popover" style="color: red; font-weight: bold; text-align: center; width: 100px;" />
    *     </arcgis-time-bar-slider>
    *   </arcgis-time-bar>
@@ -123,7 +133,7 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    * </script>
    * ```
    */
-  get activeValue(): Date | TimeExtent | undefined;
+  get activeValue(): Date | TimeExtent | null | undefined;
   /**
    * If true, the component will not be destroyed automatically when it is
    * disconnected from the document. This is useful when you want to move the
@@ -143,6 +153,99 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    * 
    */
   accessor autoDestroyDisabled: boolean;
+  /**
+   * When `true` and the time bar is in `time-window` mode, users will not be able to adjust individual thumbs. The thumbs will maintain a finite stop separation.
+   * This ensures that the time window behaves as a single unit rather than allowing individual thumbs to be moved independently.
+   *
+   * @default false
+   */
+  accessor lockTimeWindow: boolean;
+  accessor messages: {
+      componentLabel: string;
+      count: string;
+      countPrompt: string;
+      date: string;
+      display: string;
+      displayDescription: string;
+      emptyTimeExtent: string;
+      end: string;
+      endDescription: string;
+      everyDurationPartsTemplate: string;
+      everyDurationTemplate: string;
+      formatOptions: {
+          dateAndTime: string;
+          dateOnly: string;
+      };
+      from: string;
+      lockTimeWindow: string;
+      loop: string;
+      mode: string;
+      modeDescription: string;
+      modeOptions: {
+          "cumulative-from-end": string;
+          "cumulative-from-start": string;
+          instant: string;
+          "time-window": string;
+      };
+      next: string;
+      noTimeExtent: string;
+      noTimeZoneAdjustment: string;
+      overview: string;
+      play: string;
+      playbackRate: string;
+      playbackRateDescription: string;
+      previous: string;
+      regularInterval: string;
+      settings: string;
+      start: string;
+      startDescription: string;
+      stop: string;
+      stopOptions: {
+          discreteDates: string;
+          evenlySpaced: string;
+          evenlySpacedTemplate: string;
+          freeMovement: string;
+      };
+      stops: string;
+      stopsDescription: string;
+      through: string;
+      time: string;
+      timeBarSettings: string;
+      timeExtent: string;
+      timeUnitOptions: {
+          day: string;
+          hour: string;
+          millisecond: string;
+          minute: string;
+          month: string;
+          second: string;
+          week: string;
+          year: string;
+      };
+      timeZone: string;
+      timeZoneDescription: string;
+      unit: string;
+      unitPrompt: string;
+      units: string;
+      unlockTimeWindow: string;
+  } | undefined;
+  /**
+   * Defines how and when popovers are displayed for the slider's thumb or range.
+   * When `none`, popovers are not displayed.
+   * When `auto`, popovers are displayed automatically when interacting with a thumb or the slider's range.
+   * When `always`, popovers are always displayed. If the slider is in `time-window` mode, popovers are displayed for the slider range otherwise the thumb.
+   *
+   * @default "none"
+   */
+  accessor popoverDisplay: PopoverDisplay;
+  /**
+   * When `true`, the `arcgis-time-bar-slider` will display a button to toggle the value of the `lockTimeWindow` property.
+   * The button will appear depressed when `lockTimeWindow` is `true`.
+   * The button will appear disabled when the mode is not `time-window`.
+   *
+   * @default false
+   */
+  accessor showLockTimeWindow: boolean;
   /**
    * When `true`, displays a label for the end date of the slider.
    * The contents of this label can be customized by providing a slotted element in the "max" slot.
@@ -163,13 +266,6 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    * @default false
    */
   accessor showTicks: boolean;
-  /**
-   * When `true`, displays a popover for while interacting the slider's thumb or range.
-   * The contents of this popover can be customized by providing a slotted element in the "popover" slot.
-   *
-   * @default false
-   */
-  accessor showTimeExtentPopover: boolean;
   /**
    * The view model for the time bar slider.
    *

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

@@ -1,32 +1,29 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as u } from "../../chunks/runtime.js";
-import { css as h, html as a } from "lit";
-import c from "@arcgis/core/time/TimeExtent.js";
-import { LitElement as v, nothing as f, safeClassMap as g } from "@arcgis/lumina";
-import { createRef as o, ref as d } from "lit/directives/ref.js";
-import { m as w } from "../../chunks/handle.js";
-import { watch as x } from "@arcgis/core/core/reactiveUtils.js";
-const p = h`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{--labels-container-width: 100%;flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%}.major-ticks,.minor-ticks{inset:0;position:absolute}.major-ticks,.minor-ticks{--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}.minor-ticks{--arcgis-ticks-tick-length: var(--calcite-size-fixed-xxs)}.major-ticks{--arcgis-ticks-font-weight: var(--calcite-font-weight-normal)}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}`;
-class T extends v {
+import { c as d } from "../../chunks/runtime.js";
+import { css as m, html as r } from "lit";
+import { ref as u } from "lit/directives/ref.js";
+import l from "@arcgis/core/time/TimeExtent.js";
+import { LitElement as h, nothing as v, safeClassMap as g } from "@arcgis/lumina";
+const w = m`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto;--arcgis-internal-time-bar-slider-tick-gap: 100}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{padding-inline:var(--calcite-spacing-md);--labels-container-width: 100%}.slider-container{flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%;arcgis-ticks,>slot::slotted(arcgis-ticks){inset:0;position:absolute;white-space:nowrap;--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-label-width: auto;--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}.lock-time-window{--arcgis-internal-time-bar-slider-border-margin: calc(var(--calcite-spacing-base) + 1px);border-image:linear-gradient(transparent var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--arcgis-internal-time-bar-slider-border-margin)),transparent var(--arcgis-internal-time-bar-slider-border-margin));border-image-slice:1;border-inline-end-style:solid;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-spacing-sm)}`;
+class p extends h {
   constructor() {
-    super(...arguments), this.#e = new ResizeObserver(() => {
-      const e = this.#r.value?.clientWidth;
-      e && (this._sliderWidth = e);
-    }), this.#n = 3, this.#a = o(), this.#r = o(), this._sliderWidth = 100, this.autoDestroyDisabled = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1, this.showTimeExtentPopover = !1;
+    super(...arguments), this.#t = new ResizeObserver(([e]) => {
+      this._sliderWidth = e.contentRect.width;
+    }), this.#a = 100, this.#r = 100, this.#n = (e, i) => i === "value" ? this.viewModel?.formatDateTime(new Date(e)) : void 0, this.autoDestroyDisabled = !1, this.lockTimeWindow = !1, this.popoverDisplay = "none", this.showLockTimeWindow = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1;
   }
   static {
-    this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, showMax: 5, showMin: 5, showTicks: 5, showTimeExtentPopover: 5, viewModel: 0 };
+    this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, lockTimeWindow: 5, messages: 0, popoverDisplay: 1, showLockTimeWindow: 5, showMax: 5, showMin: 5, showTicks: 5, viewModel: 0 };
   }
   static {
-    this.styles = p;
+    this.styles = w;
   }
-  #e;
   #t;
   #i;
   #s;
-  #n;
+  #e;
   #a;
   #r;
+  #n;
   get _sliderFillPlacement() {
     switch (this.viewModel?.mode) {
       case "cumulative-from-end":
@@ -43,108 +40,153 @@ class T extends v {
     const { viewModel: e } = this;
     if (!e)
       return;
-    const { timeExtent: t, fullTimeExtent: i } = e;
-    if (!t || !i)
+    const { fullTimeExtent: i } = e;
+    if (!i)
       return;
-    const { start: s, end: r } = t, { start: l, end: n } = i;
-    if (!(!l || !n))
+    const { start: t, end: s } = i;
+    if (!t || !s)
+      return;
+    const { timeExtent: a } = e;
+    if (!a)
       switch (e.mode) {
         case "cumulative-from-end":
         case "instant":
-          return s ? s.getTime() < l.getTime() ? [l.getTime()] : s.getTime() > n.getTime() ? [n.getTime()] : [s.getTime()] : void 0;
+          return [t.getTime()];
         case "cumulative-from-start":
-          return r ? r.getTime() < l.getTime() ? [l.getTime()] : r.getTime() > n.getTime() ? [n.getTime()] : [r.getTime()] : void 0;
+          return [s.getTime()];
         case "time-window":
-          return s && r ? [s.getTime(), r.getTime()] : void 0;
+          return [t.getTime(), s.getTime()];
       }
+    const { start: o, end: n } = a;
+    switch (e.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        return o ? o.getTime() < t.getTime() ? [t.getTime()] : o.getTime() > s.getTime() ? [s.getTime()] : [o.getTime()] : void 0;
+      case "cumulative-from-start":
+        return n ? n.getTime() < t.getTime() ? [t.getTime()] : n.getTime() > s.getTime() ? [s.getTime()] : [n.getTime()] : void 0;
+      case "time-window":
+        return o && n ? [o.getTime(), n.getTime()] : void 0;
+    }
   }
   get activeValue() {
-    switch (this._activeValue) {
-      case void 0:
+    switch (this.popoverDisplay) {
+      case "none":
         return;
-      case "all":
+      case "always":
         return this.viewModel?.timeExtent;
-      default:
-        return new Date(this._activeValue);
+      case "auto":
+        switch (this._activeValue) {
+          case void 0:
+            return;
+          case "all":
+            return this.viewModel?.timeExtent;
+          default:
+            return new Date(this._activeValue);
+        }
     }
   }
   async destroy() {
     await this.manager.destroy();
   }
-  async loaded() {
-    this.manager.onLifecycle(() => [
-      x(() => this.#a.value, (e) => {
-        this.#e.disconnect(), e && this.#e.observe(e);
-      }, { initial: !0 }),
-      w(() => {
-        this.#e.disconnect();
-      })
-    ]);
-  }
-  #l(e, t) {
-    const { viewModel: i } = this;
-    if (!i)
-      return;
-    const { start: s, end: r } = e;
-    if (!s || !r)
+  #o() {
+    return (e) => {
+      if (e) {
+        this.#e = e, this.#t.observe(e);
+        return;
+      }
+      this.#e && (this.#t.unobserve(this.#e), this.#e = void 0);
+    };
+  }
+  #l() {
+    const e = Number.parseInt(window.getComputedStyle(this.el).getPropertyValue("--arcgis-internal-time-bar-slider-tick-gap"), 10);
+    return Number.isFinite(e) && e > 0 ? e : this.#a;
+  }
+  #c(e, i) {
+    const { viewModel: t } = this, { start: s, end: a } = e;
+    if (!t || !s || !a)
       return;
-    const n = (r.getTime() - s.getTime()) / t;
-    return i.tickFormats.find(({ duration: m }) => m > this.#n * n) ?? i.tickFormats.at(-1);
+    const n = (a.getTime() - s.getTime()) / i;
+    return t.tickFormats.find(({ duration: c }) => c > this.#l() * n) ?? t.tickFormats.at(-1);
+  }
+  #d() {
+    this.lockTimeWindow = !this.lockTimeWindow;
   }
-  #c(e) {
+  #m(e) {
     this._activeValue = e.target.activeValue;
   }
-  #o(e) {
-    const { viewModel: t } = this, i = t?.mode;
-    i && (t.timeExtent = this.#d(e.target.values, i), this._activeValue = e.target.activeValue);
+  #u(e) {
+    const { viewModel: i } = this, t = i?.mode;
+    t && (i.timeExtent = this.#h(e.target.values, t), this._activeValue = e.target.activeValue);
   }
-  #d([e, t], i) {
-    switch (i) {
+  #h([e, i], t) {
+    switch (t) {
       case "cumulative-from-end":
-        return new c({ start: new Date(e), end: null });
+        return new l({ start: new Date(e), end: null });
       case "cumulative-from-start":
-        return new c({ start: null, end: new Date(e) });
+        return new l({ start: null, end: new Date(e) });
       case "instant":
-        return new c({ start: new Date(e), end: new Date(e) });
+        return new l({ start: new Date(e), end: new Date(e) });
       case "time-window":
-        return new c({ start: new Date(e), end: new Date(t ?? e) });
+        return new l({ start: new Date(e), end: new Date(i ?? e) });
     }
   }
-  render() {
-    return a`<div class="root" ${d(this.#a)}>${this.#u()}${this.#f()}${this.#m()}</div>`;
-  }
-  #m() {
-    return this.showMax ? a`<slot name=max><arcgis-time-bar-date class="max-date" .date=${this.viewModel?.fullTimeExtent?.end} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+  #v() {
+    const { messages: e, showLockTimeWindow: i, viewModel: t } = this;
+    if (!e || !i || !t)
+      return null;
+    const s = this.lockTimeWindow ? "lock" : "unlock", a = this.lockTimeWindow ? e.unlockTimeWindow : e.lockTimeWindow;
+    return r`<calcite-action .active=${this.lockTimeWindow} class="lock-time-window" .disabled=${t.disabled || t.mode !== "time-window"} .icon=${s} @click=${this.#d} .text=${a} title=${a ?? v}></calcite-action>`;
   }
-  #u() {
-    return this.showMin ? a`<slot name=min><arcgis-time-bar-date class="min-date" .date=${this.viewModel?.fullTimeExtent?.start} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+  #g() {
+    const e = this.viewModel?.fullTimeExtent?.end;
+    return this.showMax && e ? r`<slot name=max><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="max-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : r`<div class="hidden"></div>`;
   }
-  #h() {
-    return this.showTimeExtentPopover ? a`<div class="popover" slot=popover><slot name=popover>${this.#v()}</slot></div>` : null;
+  #w() {
+    const e = this.viewModel?.fullTimeExtent?.start;
+    return this.showMin && e ? r`<slot name=min><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="min-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : r`<div class="hidden"></div>`;
   }
-  #v() {
-    return this.activeValue ? this.activeValue instanceof Date ? a`<arcgis-time-bar-date .date=${this.activeValue} .viewModel=${this.viewModel}></arcgis-time-bar-date>` : a`<arcgis-time-bar-extent .viewModel=${this.viewModel}></arcgis-time-bar-extent>` : null;
+  #p() {
+    return this.popoverDisplay !== "none" ? r`<div class="popover" slot=popover><slot name=popover>${this.#f()}</slot></div>` : null;
   }
   #f() {
-    const { viewModel: e } = this;
-    if (!e?.fullTimeExtent?.start || !e?.fullTimeExtent?.end || !this._sliderWidth)
+    const { activeValue: e, messages: i, viewModel: t } = this;
+    if (!e || !i || !t)
       return null;
-    const t = this.#l(e.fullTimeExtent, this._sliderWidth);
+    switch (t.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        const s = t.timeExtent?.start;
+        return s ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${s} .viewModel=${t}></arcgis-time-bar-date>` : null;
+      case "cumulative-from-start":
+        const a = t.timeExtent?.end;
+        return a ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${a} .viewModel=${t}></arcgis-time-bar-date>` : null;
+      case "time-window":
+        return e instanceof Date ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${e} .viewModel=${t}></arcgis-time-bar-date>` : r`<arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} .messages=${i} .viewModel=${t}></arcgis-time-bar-extent>`;
+    }
+  }
+  #b() {
+    const { messages: e, viewModel: i } = this;
+    if (!i?.fullTimeExtent?.start || !i?.fullTimeExtent?.end || !e)
+      return null;
+    const t = this.#c(i.fullTimeExtent, this._sliderWidth ?? this.#r);
     if (!t)
       return null;
-    (!this.#t || !this.#s || !this.#i || this.#t !== t) && (this.#t = t, this.#s = e.getTickValues(t.minor), this.#i = e.getTickValues(t.major), e.majorTickFormat = t.format);
-    const i = e.fullTimeExtent.start.getTime(), s = e.fullTimeExtent.end.getTime();
-    return a`<arcgis-slider allow-values-overlap class=${g({
+    (!this.#i || !this.#s || this.#i !== t) && (this.#i = t, this.#s = i.getTickValues(t.timeInterval), i.tickFormat = t.format);
+    const s = i.fullTimeExtent.start.getTime(), a = i.fullTimeExtent.end.getTime();
+    return r`<div class="slider-container" ${u(this.#o())}><arcgis-slider allow-values-overlap .autoDestroyDisabled=${this.autoDestroyDisabled} class=${g({
       slider: !0,
       "slider--has-ticks": this.showTicks,
-      "slider--out-of-range": e.isOutOfRange
-    })} .disabled=${!e.interactive} fill-placement=${this._sliderFillPlacement ?? f} .max=${s} .min=${i} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#o} precision=0 .steps=${e.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} ${d(this.#r)}>${this.#h()}${this.#g(e, i, s)}</arcgis-slider>`;
+      "slider--out-of-range": i.isOutOfRange
+    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .labelFormatter=${this.#n} .max=${a} .min=${s} @arcgisActiveValueChange=${this.#m} @arcgisInput=${this.#u} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} .valuesDraggingDisabled=${this.lockTimeWindow}>${this.#p()}${this.#T(i, s, a)}</arcgis-slider></div>`;
   }
-  #g(e, t, i) {
-    return this.showTicks ? a`<div slot=content-end class="ticks-container"><arcgis-ticks class="minor-ticks" .max=${i} .min=${t} mode=value .values=${this.#s}></arcgis-ticks><arcgis-ticks class="major-ticks" .labelFormatter=${e.majorTickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#i}></arcgis-ticks></div>` : null;
+  #T(e, i, t) {
+    return this.showTicks ? r`<div slot=content-end class="ticks-container"><slot name=content-end><arcgis-ticks .autoDestroyDisabled=${this.autoDestroyDisabled} .labelFormatter=${e.tickFormatter} .max=${t} .min=${i} mode=value show-labels .values=${this.#s}></arcgis-ticks></slot></div>` : null;
+  }
+  render() {
+    return r`<div class="root">${this.#v()}${this.#w()}${this.#b()}${this.#g()}</div>`;
   }
 }
-u("arcgis-time-bar-slider", T);
+d("arcgis-time-bar-slider", p);
 export {
-  T as ArcgisTimeBarSlider
+  p as ArcgisTimeBarSlider
 };

package/dist/components/arcgis-time-bar-slider/index.js

@@ -1,3 +1,4 @@
+import "@esri/calcite-components/components/calcite-action";
 import "../arcgis-time-bar-date/index.js";
 import "../arcgis-time-bar-extent/index.js";
 import "@arcgis/common-components/components/arcgis-slider";

package/dist/components/arcgis-time-slider/customElement.d.ts

@@ -98,7 +98,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
    */
   accessor autoDestroyDisabled: boolean;
   /**
-   * When true, the component is visually withdrawn and cannot receive user interaction.
+   * When true, the component is visually de-emphasized and does not accept user interaction.
    *
    * @default false
    * @example
@@ -197,9 +197,9 @@ export abstract class ArcgisTimeSlider extends LitElement {
    *
    * Possible Values       | Description   | Example |
    * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to the same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` properties to the desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
+   * cumulative-from-start | Similar to `time-window`, where the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
    * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
    *
    * @default "time-window"
@@ -450,7 +450,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * Value | Description |
    * ----- | ----------- |
    * system  | Dates and times will be displayed in the timezone of the device or browser.
-   * unknown | Dates and time are not adjusted for any timezone. [TimeSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/) will be disabled.
+   * unknown | Dates and times are not adjusted for any timezone. [TimeSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/) will be disabled.
    * Specified IANA timezone | Dates and times will be displayed in the specified IANA time zone. See [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
    *
    * @since 4.28
@@ -502,7 +502,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
   };
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "effectiveStops" | "fullTimeExtent" | "timeExtent" | "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when an action is triggered on the component. */
   readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TimeSliderViewModelTriggerActionEvent>;

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

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
 import { usePropertyChange as r } from "@arcgis/lumina/controllers";
-import { reEmitEvent as t } from "@arcgis/lumina/controllers/accessor";
+import { reEmitEvent as t } from "@arcgis/lumina-toolkit/reEmitEvent";
 import o from "@arcgis/core/widgets/TimeSlider.js";
 import { LitElement as s, createEvent as a } from "@arcgis/lumina";
 import { m as l } from "../../chunks/useWidget.js";

package/dist/components/arcgis-time-zone-label/customElement.d.ts

@@ -27,7 +27,7 @@ export abstract class ArcgisTimeZoneLabel extends LitElement {
    */
   accessor actionIcon: Icon["icon"] | undefined;
   /**
-   * When true, the component is visually withdrawn and cannot receive user interaction.
+   * When true, the component is visually de-emphasized and does not accept user interaction.
    *
    * @default false
    */
@@ -67,7 +67,7 @@ export abstract class ArcgisTimeZoneLabel extends LitElement {
   accessor view: MapView | undefined;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisPropertyChange: ArcgisTimeZoneLabel["arcgisPropertyChange"]["detail"];

package/dist/components/arcgis-track/customElement.d.ts

@@ -249,7 +249,7 @@ export abstract class ArcgisTrack extends LitElement {
   readonly arcgisError: import("@arcgis/lumina").TargetedEvent<this, { error: GeolocationPositionError; }>;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisComplete: ArcgisTrack["arcgisComplete"]["detail"];

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

@@ -9,8 +9,8 @@ import { u as y } from "../../chunks/useT9n.js";
 import { m as M } from "../../chunks/useViewModel.js";
 import { g as P } from "../../chunks/globalCss.js";
 import { property as a, subclass as E } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { a as I, b as O } from "../../chunks/async-utils.js";
-import { debounce as C } from "lodash-es";
+import { i as I, a as O } from "../../chunks/async-utils.js";
+import { debounce as C } from "es-toolkit/compat";
 import { G as S } from "../../chunks/GeolocationPositioning.js";
 const D = f`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{width:fit-content;height:fit-content}`;
 var F = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, t, s, c) => {

package/dist/components/arcgis-unit-select/customElement.js

@@ -1,39 +1,43 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as r } from "../../chunks/runtime.js";
-import { repeat as o } from "lit/directives/repeat.js";
-import { css as n, html as a } from "lit";
-import { LitElement as m, createEvent as h } from "@arcgis/lumina";
-import { u } from "../../chunks/useT9n.js";
-import { i as g } from "../../chunks/measurementUtils.js";
-const p = n`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}.root[layout=inline-space-between] calcite-select{width:var(--arcgis-unit-select-inline-size, 180px)}`;
-class y extends m {
+import { c as o } from "../../chunks/runtime.js";
+import { css as m, html as i } from "lit";
+import { repeat as h } from "lit/directives/repeat.js";
+import { LitElement as p, createEvent as l, nothing as g } from "@arcgis/lumina";
+import { createRef as u, ref as d } from "lit/directives/ref.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { i as f } from "../../chunks/measurementUtils.js";
+const $ = m`:host{--calcite-label-margin-bottom: 0;width:100%}.root{display:flex;flex-direction:column;gap:var(--calcite-spacing-xxs);width:100%}.heading{display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;align-items:center;gap:var(--calcite-spacing-xs);min-block-size:1.5rem}.label{min-inline-size:0;overflow-wrap:anywhere}.reset{--calcite-button-text-color: var(--calcite-color-text-3);inline-size:100%}calcite-select{inline-size:100%;min-inline-size:0}`;
+class v extends p {
   constructor() {
-    super(...arguments), this.messages = u({}), this.options = [], this.scale = "m", this.layout = "block", this.arcgisUnitSelectChange = h();
+    super(...arguments), this.messages = b({}), this._selectRef = u(), this.options = [], this.scale = "m", this.canReset = !1, this.arcgisInternalUnitReset = l({ bubbles: !1, composed: !1 }), this.arcgisUnitSelectChange = l();
   }
   static {
-    this.properties = { options: [1, { type: Array }], scale: 1, selectLabel: 1, value: 0, messageOverrides: 0, label: 1, layout: 1 };
+    this.properties = { options: [1, { type: Array }], scale: 1, selectLabel: 1, value: 0, canReset: 5, resetLabel: 1, messageOverrides: 0, label: 1 };
   }
   static {
-    this.styles = p;
+    this.styles = $;
   }
   async destroy() {
     await this.manager.destroy();
   }
+  async _resetUnit() {
+    this.arcgisInternalUnitReset.emit(), await this.updateComplete, await this._selectRef.value?.setFocus();
+  }
   render() {
     const {
       messages: t,
-      options: i = [],
+      options: c = [],
       // when running in the CI, sometimes this ends up being `undefined`, for unclear reasons.
       selectLabel: s,
-      value: l,
-      arcgisUnitSelectChange: c
-    } = this;
-    return a`<calcite-label class="root" .layout=${this.layout} .scale=${this.scale}>${s}<calcite-select .label=${s} @calciteSelectChange=${(e) => {
-      c.emit(e.target.value);
-    }} .scale=${this.scale}>${o(i, (e) => e, (e) => a`<calcite-option .selected=${e === l} .value=${e}>${g(e) ? t.systems?.[e] : t.units?.[e]}</calcite-option>`)}</calcite-select></calcite-label>`;
+      value: r,
+      arcgisUnitSelectChange: n
+    } = this, a = this.resetLabel ?? t.reset;
+    return i`<calcite-label .scale=${this.scale}><div class="root"><div class="heading"><span class="label">${s}</span>${this.canReset && a && i`<calcite-button class="reset" appearance=transparent icon-start=reset kind=neutral .label=${`${a}: ${s}`} title=${a ?? g} scale=s @click=${this._resetUnit}></calcite-button>` || ""}</div><calcite-select .label=${s} @calciteSelectChange=${(e) => {
+      n.emit(e.target.value);
+    }} .scale=${this.scale} ${d(this._selectRef)}>${h(c, (e) => e, (e) => i`<calcite-option .selected=${e === r} .value=${e}>${f(e) ? t.systems?.[e] : t.units?.[e]}</calcite-option>`)}</calcite-select></div></calcite-label>`;
   }
 }
-r("arcgis-unit-select", y);
+o("arcgis-unit-select", v);
 export {
-  y as ArcgisUnitSelect
+  v as ArcgisUnitSelect
 };

package/dist/components/arcgis-unit-select/index.js

@@ -1,4 +1,5 @@
 import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-select";
 import "@esri/calcite-components/components/calcite-option";
 export * from "./customElement.js";