@arcgis/map-components 5.2.0-next.12 → 5.2.0-next.121

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

@@ -0,0 +1,168 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as d } from "../../chunks/runtime.js";
+import { css as m, html as a } from "lit";
+import { ref as u } from "lit/directives/ref.js";
+import o from "@arcgis/core/time/TimeExtent.js";
+import { d as h } from "../../chunks/messages.en.js";
+import { LitElement as v, safeClassMap as g } from "@arcgis/lumina";
+const f = 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)}`;
+class p extends v {
+  constructor() {
+    super(...arguments), this.#t = new ResizeObserver(([e]) => {
+      this._sliderWidth = e.contentRect.width;
+    }), this.#a = 100, this.#r = 100, this.autoDestroyDisabled = !1, this.popoverDisplay = "none", this.showMax = !1, this.showMin = !1, this.showTicks = !1;
+  }
+  static {
+    this.properties = { _activeValue: 16, _messages: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, messages: 0, popoverDisplay: 1, showMax: 5, showMin: 5, showTicks: 5, viewModel: 0 };
+  }
+  static {
+    this.styles = f;
+  }
+  #t;
+  #i;
+  #s;
+  #e;
+  #a;
+  #r;
+  get _messages() {
+    return this.messages ?? h;
+  }
+  get _sliderFillPlacement() {
+    switch (this.viewModel?.mode) {
+      case "cumulative-from-end":
+        return "end";
+      case "cumulative-from-start":
+        return "start";
+      case "instant":
+        return "none";
+      default:
+        return;
+    }
+  }
+  get _timeExtentEpochValues() {
+    const { viewModel: e } = this;
+    if (!e)
+      return;
+    const { timeExtent: t, fullTimeExtent: i } = e;
+    if (!t || !i)
+      return;
+    const { start: s, end: r } = t, { start: l, end: n } = i;
+    if (!(!l || !n))
+      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;
+        case "cumulative-from-start":
+          return r ? r.getTime() < l.getTime() ? [l.getTime()] : r.getTime() > n.getTime() ? [n.getTime()] : [r.getTime()] : void 0;
+        case "time-window":
+          return s && r ? [s.getTime(), r.getTime()] : void 0;
+      }
+  }
+  get activeValue() {
+    switch (this.popoverDisplay) {
+      case "none":
+        return;
+      case "always":
+        return this.viewModel?.timeExtent;
+      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();
+  }
+  #n() {
+    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;
+  }
+  #o(e, t) {
+    const { viewModel: i } = this, { start: s, end: r } = e;
+    if (!i || !s || !r)
+      return;
+    const n = (r.getTime() - s.getTime()) / t;
+    return i.tickFormats.find(({ duration: c }) => c > this.#l() * n) ?? i.tickFormats.at(-1);
+  }
+  #c(e) {
+    this._activeValue = e.target.activeValue;
+  }
+  #d(e) {
+    const { viewModel: t } = this, i = t?.mode;
+    i && (t.timeExtent = this.#m(e.target.values, i), this._activeValue = e.target.activeValue);
+  }
+  #m([e, t], i) {
+    switch (i) {
+      case "cumulative-from-end":
+        return new o({ start: new Date(e), end: null });
+      case "cumulative-from-start":
+        return new o({ start: null, end: new Date(e) });
+      case "instant":
+        return new o({ start: new Date(e), end: new Date(e) });
+      case "time-window":
+        return new o({ start: new Date(e), end: new Date(t ?? e) });
+    }
+  }
+  #u() {
+    return this.showMax ? a`<slot name=max><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="max-date" .date=${this.viewModel?.fullTimeExtent?.end} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+  }
+  #h() {
+    return this.showMin ? a`<slot name=min><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="min-date" .date=${this.viewModel?.fullTimeExtent?.start} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+  }
+  #v() {
+    return this.popoverDisplay !== "none" ? a`<div class="popover" slot=popover><slot name=popover>${this.#g()}</slot></div>` : null;
+  }
+  #g() {
+    const { activeValue: e, viewModel: t } = this;
+    if (!e || !t)
+      return null;
+    switch (t.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        return a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${t.timeExtent?.start} .viewModel=${t}></arcgis-time-bar-date>`;
+      case "cumulative-from-start":
+        return a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${t.timeExtent?.end} .viewModel=${t}></arcgis-time-bar-date>`;
+      case "time-window":
+        return e instanceof Date ? a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${e} .viewModel=${t}></arcgis-time-bar-date>` : a`<arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} .viewModel=${t}></arcgis-time-bar-extent>`;
+    }
+  }
+  #f() {
+    const { viewModel: e } = this;
+    if (!e?.fullTimeExtent?.start || !e?.fullTimeExtent?.end)
+      return null;
+    const t = this.#o(e.fullTimeExtent, this._sliderWidth ?? this.#r);
+    if (!t)
+      return null;
+    (!this.#i || !this.#s || this.#i !== t) && (this.#i = t, this.#s = e.getTickValues(t.timeInterval), e.tickFormat = t.format);
+    const i = e.fullTimeExtent.start.getTime(), s = e.fullTimeExtent.end.getTime();
+    return a`<div class="slider-container" ${u(this.#n())}><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} .fillPlacement=${this._sliderFillPlacement} .max=${s} .min=${i} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#d} .popoverLabel=${this._messages.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${e.effectiveStopsEpoch} .values=${this._timeExtentEpochValues}>${this.#v()}${this.#p(e, i, s)}</arcgis-slider></div>`;
+  }
+  #p(e, t, i) {
+    return this.showTicks ? a`<div slot=content-end class="ticks-container"><slot name=content-end><arcgis-ticks .autoDestroyDisabled=${this.autoDestroyDisabled} .labelFormatter=${e.tickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#s}></arcgis-ticks></slot></div>` : null;
+  }
+  render() {
+    return a`<div class="root">${this.#h()}${this.#f()}${this.#u()}</div>`;
+  }
+}
+d("arcgis-time-bar-slider", p);
+export {
+  p as ArcgisTimeBarSlider
+};

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

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1,5 @@
+import "../arcgis-time-bar-date/index.js";
+import "../arcgis-time-bar-extent/index.js";
+import "@arcgis/common-components/components/arcgis-slider";
+import "@arcgis/common-components/components/arcgis-ticks";
+export * from "./customElement.js";

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

@@ -86,7 +86,7 @@ class j extends T {
   }
   render() {
     const e = this.mode === "single" && !this.disabled;
-    return f(this.messages._lang, m`<arcgis-slider .ariaLabel=${this.label} class=${_({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} fill-placement=none .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: t } }) => {
+    return f(this.messages._lang, m`<arcgis-slider .ariaLabel=${this.label} class=${_({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} .fillPlacement=${this.mode === "range" ? "between" : "none"} .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: t } }) => {
       this.mode === "single" ? this._setStartTime(t[0]) : this._setRange(t[0], t[1]);
     }}>${this.mode === "range" ? this._renderTimeRange() : void 0}<div class="ticks-container" slot=content-end><arcgis-ticks class="main-ticks" .interactive=${e} .labelFormatter=${this._tickLabelFormatter} layout=horizontal min=0 .max=${c} mode=value show-labels .values=${p} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" layout=horizontal min=0 .max=${c} mode=value .values=${I} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks></div></arcgis-slider>`);
   }

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

@@ -86,10 +86,19 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-time-slider auto-destroy-disabled></arcgis-time-slider>
+   * ```
+   *
+   * ```js
+   * timeSliderElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   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
@@ -188,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"
@@ -433,7 +442,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
   accessor timeVisible: boolean;
   /**
    * Dates and times displayed in the component will be displayed in this time zone. By default this time zone is
-   * inherited from [MapView#timeZone](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#timeZone). When a MapView is not associated with the component
+   * inherited from the associated [MapView.timeZone](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#timeZone) or [SceneView.timeZone](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#timeZone). When a view is not associated with the component
    * then the property will fallback to the `system` time zone.
    *
    * **Possible Values**
@@ -441,15 +450,15 @@ 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
    */
   accessor timeZone: string;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-time-slider component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-time-slider component will be associated with a map or scene component rather than using the `view` property.
    *
    * @example
    * ```js
@@ -493,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-chip/customElement.d.ts

@@ -0,0 +1,36 @@
+/// <reference path="../../index.d.ts" />
+import type { TimeZone } from "@arcgis/core/time/types.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Chip as Chip } from "@esri/calcite-components/components/calcite-chip";
+
+/**
+ * A compact time-zone selector.
+ *
+ * @internal
+ */
+export abstract class ArcgisTimeZoneChip extends LitElement {
+  /** @internal */
+  protected _messages: {
+      popoverLabel: string;
+      chipLabel: string;
+  } & T9nMeta<{
+      popoverLabel: string;
+      chipLabel: string;
+  }>;
+  /** @default false */
+  accessor disabled: boolean;
+  /** @default "system" */
+  accessor timeZone: TimeZone;
+  /** @default "m" */
+  accessor visualScale: Chip["scale"];
+  /**
+   * Emitted when the selected time zone changes.
+   *
+   * @internal
+   */
+  readonly arcgisInternalTimeZoneChange: import("@arcgis/lumina").TargetedEvent<this, TimeZone>;
+  readonly "@eventTypes": {
+    arcgisInternalTimeZoneChange: ArcgisTimeZoneChip["arcgisInternalTimeZoneChange"]["detail"];
+  };
+}

package/dist/components/arcgis-time-zone-chip/customElement.js

@@ -0,0 +1,36 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import { substitute as r } from "@arcgis/core/intl.js";
+import { LitElement as p, createEvent as d, nothing as i } from "@arcgis/lumina";
+import { generateGuid as s } from "@arcgis/toolkit/string";
+import { css as m, html as h } from "lit";
+import { u as b } from "../../chunks/useT9n.js";
+import { s as o, a as v, u as g } from "../../chunks/time-utils.js";
+const u = m`:host{display:inline-block;max-inline-size:100%}.container{--arcgis-internal-time-zone-popover-inline-size: min(20rem, calc(100vw - var(--calcite-spacing-xl)));max-inline-size:100%;.trigger{display:block;inline-size:fit-content;max-inline-size:100%;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;&:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:2px}&:disabled{cursor:not-allowed}&[aria-expanded=true] calcite-chip{--calcite-chip-background-color: var(--calcite-color-foreground-3);--calcite-chip-border-color: var(--calcite-color-text-3)}}calcite-chip{--calcite-chip-icon-color: var(--calcite-color-text-2);max-inline-size:100%;pointer-events:none}.chip-label{display:block;overflow:hidden;max-inline-size:calc(6 * var(--calcite-size-md));text-overflow:ellipsis;white-space:nowrap}calcite-popover{--calcite-popover-max-size-x: var(--arcgis-internal-time-zone-popover-inline-size)}.popover-content{box-sizing:border-box;inline-size:var(--arcgis-internal-time-zone-popover-inline-size);padding:var(--calcite-spacing-md)}}`;
+class f extends p {
+  constructor() {
+    super(...arguments), this._messages = b({ blocking: !0 }), this.#e = s(), this.#i = s(), this._open = !1, this.disabled = !1, this.timeZone = o, this.visualScale = "m", this.arcgisInternalTimeZoneChange = d({ bubbles: !1, composed: !1 });
+  }
+  static {
+    this.properties = { _open: 16, disabled: 5, timeZone: 1, visualScale: 1 };
+  }
+  static {
+    this.styles = u;
+  }
+  #e;
+  #i;
+  willUpdate(e) {
+    e.has("disabled") && this.disabled && (this._open = !1);
+  }
+  #t(e) {
+    this.timeZone = e.detail, this.arcgisInternalTimeZoneChange.emit(e.detail);
+  }
+  render() {
+    const { _messages: e } = this, t = this.timeZone === o ? v : this.timeZone === g ? "UTC" : this.timeZone, l = (t.split("/").at(-1) ?? t).replaceAll("_", " "), n = `⁨${t}⁩`, a = r(e.chipLabel, { timeZone: n });
+    return h`<div class="container"><button aria-controls=${this.#e ?? i} aria-expanded=${this._open ?? i} aria-haspopup=dialog aria-label=${a ?? i} class="trigger" .disabled=${this.disabled} id=${this.#i ?? i} title=${t ?? i} type=button @click=${() => this._open = !this._open}><calcite-chip aria-hidden appearance=outline-fill .disabled=${this.disabled} icon=time-zone .label=${a} .scale=${this.visualScale}><span class="chip-label"><bdi>${l}</bdi></span></calcite-chip></button><calcite-popover auto-close id=${this.#e ?? i} .label=${e.popoverLabel} .open=${this._open} overlay-positioning=fixed placement=top-start .referenceElement=${this.#i} trigger-disabled @calcitePopoverClose=${() => this._open = !1} @calcitePopoverOpen=${() => this._open = !0}><div class="popover-content"><arcgis-time-zone-selector .disabled=${this.disabled} .timeZone=${this.timeZone} .visualScale=${this.visualScale} @arcgisInternalTimeZoneChange=${this.#t}></arcgis-time-zone-selector></div></calcite-popover></div>`;
+  }
+}
+c("arcgis-time-zone-chip", f);
+export {
+  f as ArcgisTimeZoneChip
+};

package/dist/components/arcgis-time-zone-chip/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-time-zone-chip/index.js

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-popover";
+import "../arcgis-time-zone-selector/index.js";
+export * from "./customElement.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
    */
@@ -61,13 +61,13 @@ export abstract class ArcgisTimeZoneLabel extends LitElement {
   /** The state of the component. */
   get state(): State;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-time-zone-label component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-time-zone-label component will be associated with a map or scene component rather than using the `view` property.
    */
   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-time-zone-selector/customElement.js

@@ -0,0 +1,56 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { LitElement as l, createEvent as r } from "@arcgis/lumina";
+import { css as m, html as n } from "lit";
+import { u as d } from "../../chunks/useT9n.js";
+import { s as t, u as s, a as u } from "../../chunks/time-utils.js";
+const h = m`:host{--calcite-label-margin-bottom: initial;display:block;inline-size:100%}.time-zone-options{display:flex;flex-direction:column}.time-zone-indent{margin-inline-start:calc(var(--calcite-spacing-lg) * 1.5)}.time-zone-input{inline-size:100%;max-inline-size:100%;&:not([calcite-hydrated]){visibility:hidden}}.status{display:grid;grid-template-columns:min-content 1fr;align-items:start;gap:var(--calcite-spacing-sm);box-sizing:border-box;padding:var(--calcite-spacing-sm);border-radius:var(--calcite-corner-radius-sm);background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.status-text{margin:0}`, p = ["device", "data", "specific"];
+class g extends l {
+  constructor() {
+    super(...arguments), this._messages = d({ blocking: !0 }), this.disabled = !1, this.timeZone = t, this.visualScale = "m", this.arcgisInternalTimeZoneChange = r({ bubbles: !1, composed: !1 });
+  }
+  static {
+    this.properties = { disabled: 5, timeZone: 1, visualScale: 1 };
+  }
+  static {
+    this.styles = h;
+  }
+  #i;
+  get #s() {
+    return this.timeZone === t ? "device" : this.timeZone === s ? "data" : "specific";
+  }
+  get #t() {
+    return this.timeZone !== t && this.timeZone !== s ? this.timeZone : this.#i ?? u;
+  }
+  willUpdate(e) {
+    e.has("timeZone") && this.timeZone !== t && this.timeZone !== s && (this.#i = this.timeZone);
+  }
+  #e(e) {
+    e !== this.timeZone && (this.timeZone = e, this.arcgisInternalTimeZoneChange.emit(e));
+  }
+  #a(e) {
+    switch (e.currentTarget.selectedItem?.value) {
+      case "device":
+        this.#e(t);
+        break;
+      case "specific":
+        this.#e(this.#t);
+        break;
+      case "data":
+        this.#e(s);
+        break;
+    }
+  }
+  #n(e) {
+    const i = e.currentTarget.value;
+    i && this.#e(i);
+  }
+  render() {
+    const { _messages: e } = this, i = this.#s, c = i === "data" ? e.dataStatus : i === "device" ? e.deviceStatus : void 0;
+    return n`<div class="time-zone-options"><calcite-radio-button-group .ariaLabel=${e.timeZone} .disabled=${this.disabled} layout=vertical name=time-zone-mode .scale=${this.visualScale} @calciteRadioButtonGroupChange=${this.#a}>${p.map((a) => n`<calcite-label layout=inline .scale=${this.visualScale}><calcite-radio-button .checked=${i === a} .disabled=${this.disabled} .value=${a}></calcite-radio-button>${e[a]}</calcite-label>`)}</calcite-radio-button-group><div class="time-zone-indent" .hidden=${i !== "specific"}><calcite-input-time-zone .ariaLabel=${e.specificTimeZone} class="time-zone-input" data-testid=time-zone-input .disabled=${this.disabled} mode=region overlay-positioning=fixed .scale=${this.visualScale} .value=${this.#t} @calciteInputTimeZoneChange=${this.#n}></calcite-input-time-zone></div>${c ? n`<div class="status" aria-live=polite><calcite-icon aria-hidden icon=time-zone scale=s></calcite-icon><p class="status-text">${c}</p></div>` : void 0}</div>`;
+  }
+}
+o("arcgis-time-zone-selector", g);
+export {
+  g as ArcgisTimeZoneSelector
+};

package/dist/components/arcgis-time-zone-selector/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-radio-button-group";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-input-time-zone";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

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

@@ -42,6 +42,15 @@ export abstract class ArcgisTrack extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-track auto-destroy-disabled></arcgis-track>
+   * ```
+   *
+   * ```js
+   * trackElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -219,8 +228,8 @@ export abstract class ArcgisTrack extends LitElement {
    */
   get tracking(): boolean;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-track component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-track component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | SceneView | undefined;
   /**
@@ -240,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 { i 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-radio-button-group/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as l } from "../../chunks/runtime.js";
-import { css as o, html as e } from "lit";
+import { c as o } from "../../chunks/runtime.js";
+import { css as l, html as e } from "lit";
 import { keyed as n } from "lit/directives/keyed.js";
 import { LitElement as m, createEvent as u } from "@arcgis/lumina";
 import { u as g } from "../../chunks/useT9n.js";
-import { i as d } from "../../chunks/measurementUtils.js";
-const h = o`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}calcite-radio-button-group{padding:var(--calcite-spacing-sm)}`;
+import { i as h } from "../../chunks/measurementUtils.js";
+const d = l`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}calcite-radio-button-group{padding:var(--calcite-spacing-sm)}`;
 class p extends m {
   constructor() {
     super(...arguments), this.messages = g({}), this.options = [], this.scale = "m", this.layout = "block", this.arcgisUnitSelectChange = u();
@@ -14,7 +14,7 @@ class p extends m {
     this.properties = { options: [1, { type: Array }], scale: 1, name: 1, value: 0, messageOverrides: 0, label: 1, layout: 1 };
   }
   static {
-    this.styles = h;
+    this.styles = d;
   }
   async destroy() {
     await this.manager.destroy();
@@ -30,10 +30,10 @@ class p extends m {
     } = this;
     return e`<calcite-radio-button-group layout=vertical .name=${i} @calciteRadioButtonGroupChange=${(t) => {
       c.emit(t.target.selectedItem?.value);
-    }} .scale=${this.scale}>${s.map((t) => e`<calcite-label layout=inline .scale=${this.scale}>${n(t, e`<calcite-radio-button .checked=${t === r} .scale=${this.scale} .value=${t}></calcite-radio-button>`)}${d(t) ? a.systems?.[t] : a.units?.[t]?.pluralCapitalized}</calcite-label>`)}</calcite-radio-button-group>`;
+    }} .scale=${this.scale}>${s.map((t) => e`<calcite-label layout=inline .scale=${this.scale}>${n(t, e`<calcite-radio-button .checked=${t === r} .scale=${this.scale} .value=${t}></calcite-radio-button>`)}${h(t) ? a.systems?.[t] : a.units?.[t]}</calcite-label>`)}</calcite-radio-button-group>`;
   }
 }
-l("arcgis-unit-radio-button-group", p);
+o("arcgis-unit-radio-button-group", p);
 export {
   p as ArcgisUnitRadioButtonGroup
 };

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

@@ -22,15 +22,15 @@ class y extends m {
   render() {
     const {
       messages: t,
-      options: l = [],
+      options: i = [],
       // when running in the CI, sometimes this ends up being `undefined`, for unclear reasons.
       selectLabel: s,
-      value: i,
+      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(l, (e) => e, (e) => a`<calcite-option .selected=${e === i} .value=${e}>${g(e) ? t.systems?.[e] : t.units?.[e]?.pluralCapitalized}</calcite-option>`)}</calcite-select></calcite-label>`;
+    }} .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>`;
   }
 }
 r("arcgis-unit-select", y);