@arcgis/map-components 5.2.0-next.6 → 5.2.0-next.61

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

@@ -0,0 +1,587 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as W } from "../../chunks/runtime.js";
+import x from "@arcgis/core/time/TimeExtent.js";
+import { css as V, html as v } from "lit";
+import z from "@arcgis/core/core/Accessor.js";
+import q from "@arcgis/core/webdoc/widgets/TimeSlider.js";
+import H from "@arcgis/core/webdoc/Widgets.js";
+import { b as G, d as L, i as U } from "../../chunks/async-utils.js";
+import { c as Y, e as J, g as F, i as C, h as K, j as Q, k as X, l as Z, a as tt } from "../../chunks/dateUtils.js";
+import { convertDateFormatToIntlOptions as T } from "@arcgis/core/intl.js";
+import { r as et, s as it } from "../../chunks/time-utils.js";
+import k from "@arcgis/core/time/TimeInterval.js";
+import { getTimeSliderSettingsFromWebDocument as st } from "@arcgis/core/support/timeUtils.js";
+import { log as nt } from "@arcgis/toolkit/log";
+import { property as l, subclass as at } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { watch as w, whenOnce as O } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as ot, createEvent as rt } from "@arcgis/lumina";
+import { createRef as lt, ref as A } from "lit/directives/ref.js";
+import { getSlotAssignedElements as ut } from "@arcgis/toolkit/dom/slots";
+import { m as mt } from "../../chunks/useViewModel.js";
+import { useDirection as ct, usePropertyChange as ht } from "@arcgis/lumina/controllers";
+import { u as dt } from "../../chunks/useT9n.js";
+const B = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap();
+function vt(t) {
+  const { locale: e, formatOptions: n } = t, a = yt(n), u = new Intl.DateTimeFormat(e, a);
+  return B.set(t, u), u;
+}
+function pt(t) {
+  const { locale: e, formatOptions: n } = t, a = new Intl.NumberFormat(e, n);
+  return I.set(t, a), a;
+}
+function ft(t) {
+  return B.get(t) ?? vt(t);
+}
+function gt(t) {
+  return I.get(t) ?? pt(t);
+}
+function yt(t) {
+  return t.timeZone ? {
+    ...t,
+    timeZone: et(t.timeZone)
+  } : t;
+}
+const i = (t, e, n) => ({ minorTick: t, majorTick: e, majorTickFormat: n }), s = {
+  sf: { second: "numeric", fractionalSecondDigits: 3 },
+  s: { second: "numeric" },
+  ms: { minute: "numeric", second: "numeric" },
+  mi: { minute: "numeric" },
+  hm: { hour: "numeric", minute: "numeric" },
+  dm: { day: "numeric", month: "short" },
+  m: { month: "short" },
+  my: { month: "short", year: "numeric" },
+  y: { year: "numeric" }
+}, wt = [
+  i({ value: 1, unit: "milliseconds" }, { value: 20, unit: "milliseconds" }, s.sf),
+  i({ value: 2, unit: "milliseconds" }, { value: 50, unit: "milliseconds" }, s.sf),
+  i({ value: 5, unit: "milliseconds" }, { value: 100, unit: "milliseconds" }, s.sf),
+  i({ value: 10, unit: "milliseconds" }, { value: 200, unit: "milliseconds" }, s.sf),
+  i({ value: 20, unit: "milliseconds" }, { value: 500, unit: "milliseconds" }, s.sf),
+  i({ value: 50, unit: "milliseconds" }, { value: 1, unit: "seconds" }, s.s),
+  i({ value: 100, unit: "milliseconds" }, { value: 2, unit: "seconds" }, s.s),
+  i({ value: 200, unit: "milliseconds" }, { value: 5, unit: "seconds" }, s.s),
+  i({ value: 500, unit: "milliseconds" }, { value: 10, unit: "seconds" }, s.s),
+  i({ value: 1, unit: "seconds" }, { value: 20, unit: "seconds" }, s.ms),
+  i({ value: 2, unit: "seconds" }, { value: 30, unit: "seconds" }, s.ms),
+  i({ value: 5, unit: "seconds" }, { value: 1, unit: "minutes" }, s.mi),
+  i({ value: 10, unit: "seconds" }, { value: 2, unit: "minutes" }, s.mi),
+  i({ value: 20, unit: "seconds" }, { value: 5, unit: "minutes" }, s.mi),
+  i({ value: 40, unit: "seconds" }, { value: 10, unit: "minutes" }, s.mi),
+  i({ value: 1, unit: "minutes" }, { value: 30, unit: "minutes" }, s.hm),
+  i({ value: 2, unit: "minutes" }, { value: 1, unit: "hours" }, s.hm),
+  i({ value: 5, unit: "minutes" }, { value: 2, unit: "hours" }, s.hm),
+  i({ value: 10, unit: "minutes" }, { value: 4, unit: "hours" }, s.hm),
+  i({ value: 20, unit: "minutes" }, { value: 8, unit: "hours" }, s.hm),
+  i({ value: 40, unit: "minutes" }, { value: 1, unit: "days" }, s.dm),
+  i({ value: 1, unit: "hours" }, { value: 1, unit: "days" }, s.dm),
+  i({ value: 2, unit: "hours" }, { value: 2, unit: "days" }, s.dm),
+  i({ value: 5, unit: "hours" }, { value: 4, unit: "days" }, s.dm),
+  i({ value: 10, unit: "hours" }, { value: 10, unit: "days" }, s.dm),
+  i({ value: 20, unit: "hours" }, { value: 15, unit: "days" }, s.dm),
+  i({ value: 1, unit: "days" }, { value: 20, unit: "days" }, s.dm),
+  i({ value: 2, unit: "days" }, { value: 1, unit: "months" }, s.m),
+  i({ value: 5, unit: "days" }, { value: 3, unit: "months" }, s.m),
+  i({ value: 10, unit: "days" }, { value: 6, unit: "months" }, s.my),
+  i({ value: 20, unit: "days" }, { value: 1, unit: "years" }, s.y),
+  i({ value: 1, unit: "months" }, { value: 2, unit: "years" }, s.y),
+  i({ value: 2, unit: "months" }, { value: 4, unit: "years" }, s.y),
+  i({ value: 5, unit: "months" }, { value: 10, unit: "years" }, s.y),
+  i({ value: 1, unit: "years" }, { value: 20, unit: "years" }, s.y),
+  i({ value: 2, unit: "years" }, { value: 50, unit: "years" }, s.y),
+  i({ value: 5, unit: "years" }, { value: 100, unit: "years" }, s.y),
+  i({ value: 10, unit: "years" }, { value: 200, unit: "years" }, s.y),
+  i({ value: 20, unit: "years" }, { value: 500, unit: "years" }, s.y),
+  i({ value: 50, unit: "years" }, { value: 1e3, unit: "years" }, s.y),
+  i({ value: 1, unit: "centuries" }, { value: 20, unit: "centuries" }, s.y),
+  i({ value: 2, unit: "centuries" }, { value: 50, unit: "centuries" }, s.y),
+  i({ value: 5, unit: "centuries" }, { value: 100, unit: "centuries" }, s.y),
+  i({ value: 10, unit: "centuries" }, { value: 200, unit: "centuries" }, s.y),
+  i({ value: 20, unit: "centuries" }, { value: 500, unit: "centuries" }, s.y),
+  i({ value: 50, unit: "centuries" }, { value: 1e3, unit: "centuries" }, s.y),
+  i({ value: 100, unit: "centuries" }, { value: 2e3, unit: "centuries" }, s.y),
+  i({ value: 200, unit: "centuries" }, { value: 5e3, unit: "centuries" }, s.y),
+  i({ value: 500, unit: "centuries" }, { value: 1e4, unit: "centuries" }, s.y),
+  i({ value: 1e3, unit: "centuries" }, { value: 2e4, unit: "centuries" }, s.y)
+];
+function xt(t) {
+  return wt.map(({ minorTick: e, majorTick: n, majorTickFormat: a }, u) => {
+    const c = new k(e), f = new k(n), m = c.toMilliseconds(), g = {
+      ...a,
+      timeZone: t
+    };
+    return { minor: c, major: f, duration: m, format: g, index: u };
+  });
+}
+var _t = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, N = (t) => {
+  throw TypeError(t);
+}, r = (t, e, n, a) => {
+  for (var u = a > 1 ? void 0 : a ? Et(e, n) : e, c = t.length - 1, f; c >= 0; c--)
+    (f = t[c]) && (u = (a ? f(e, n, u) : f(u)) || u);
+  return a && u && _t(e, n, u), u;
+}, j = (t, e, n) => e.has(t) || N("Cannot " + n), M = (t, e, n) => (j(t, e, "read from private field"), n ? n.call(t) : e.get(t)), R = (t, e, n) => e.has(t) ? N("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), p = (t, e, n) => (j(t, e, "access private method"), n), _, h, D, $, E, b, P;
+let o = class extends z {
+  constructor() {
+    super(...arguments), R(this, h), R(this, _, new AbortController()), this.disabled = !1, this.format = "date", this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.savePersistedSettingsDisabled = !1, this.stops = J;
+  }
+  get _adjustedMajorTickFormat() {
+    const { era: t, timeZone: e } = this;
+    return {
+      ...this.majorTickFormat,
+      era: this.majorTickFormat?.year ? t : void 0,
+      timeZone: e
+    };
+  }
+  get _dateFormat() {
+    const { era: t, timeZone: e } = this;
+    return { ...T("short-date"), era: t, timeZone: e };
+  }
+  get _dateTimeFormat() {
+    const { era: t, timeZone: e } = this;
+    return {
+      ...T("short-date"),
+      ...T("long-time"),
+      era: t,
+      timeZone: e
+    };
+  }
+  get _thumbPositions() {
+    if (!this.timeExtent || this.timeExtent.isAllTime || this.timeExtent.isEmpty)
+      return null;
+    const { start: t, end: e } = this.timeExtent;
+    switch (this.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        return t ? [t.getTime()] : null;
+      case "cumulative-from-start":
+        return e ? [e.getTime()] : null;
+      case "time-window":
+        return t && e ? [t.getTime(), e.getTime()] : null;
+    }
+  }
+  get _timeFormat() {
+    const { timeZone: t } = this;
+    return { ...T("long-time"), timeZone: t };
+  }
+  get effectiveStops() {
+    const { fullTimeExtent: t, stops: e } = this;
+    if (!e)
+      return;
+    if (F(e)) {
+      const { dates: a } = e;
+      if (!a?.length)
+        return;
+      const u = a.sort((y, d) => y.getTime() - d.getTime());
+      if (!t?.start || !t?.end)
+        return u;
+      const { start: c, end: f } = t, m = c.getTime(), g = f.getTime();
+      return u.filter((y) => {
+        const d = y.getTime();
+        return d >= m && d <= g;
+      });
+    }
+    const n = e.timeExtent ?? t;
+    if (n)
+      return C(e) ? K(n, e.count) : Q(n, e.interval);
+  }
+  get effectiveStopsEpoch() {
+    return this.effectiveStops?.map((t) => t.getTime());
+  }
+  get era() {
+    return (this.fullTimeExtent?.start?.getFullYear() ?? 0) < 0 ? "short" : void 0;
+  }
+  get interactive() {
+    return !(this.disabled || this.state === "disabled");
+  }
+  get isOutOfRange() {
+    const { timeExtent: t, fullTimeExtent: e } = this, { start: n, end: a } = e ?? {};
+    if (!n || !a || !t || t.isAllTime || t.isEmpty)
+      return !0;
+    const { start: u, end: c } = t ?? {}, f = u != null && (u < n || u > a), m = c != null && (c > a || c < n);
+    return f || m;
+  }
+  get majorTickFormatter() {
+    return (t) => this._formatDate(t, this._adjustedMajorTickFormat);
+  }
+  set playRate(t) {
+    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && p(this, h, $).call(this), this._set("playRate", t));
+  }
+  get state() {
+    return this.fullTimeExtent ? this._animationController ? "playing" : "ready" : "disabled";
+  }
+  get tickFormats() {
+    return xt(this.timeZone);
+  }
+  get timeZone() {
+    return this._userTimeZone ?? this.viewTimeZone ?? it;
+  }
+  set timeZone(t) {
+    this._userTimeZone = t ?? void 0;
+  }
+  get viewTimeZone() {
+    return this.view?.type === "2d" ? this.view.timeZone : void 0;
+  }
+  //#endregion
+  //#region Public Methods
+  destroy() {
+    M(this, _).abort(), this.view?.unregisterComponent(this), p(this, h, b).call(this);
+  }
+  formatDate(t) {
+    return this._formatDate(t, this._dateFormat);
+  }
+  formatDateTime(t) {
+    return this._formatDate(t, this._dateTimeFormat);
+  }
+  formatNumber(t, e) {
+    return this._formatNumber(t, e);
+  }
+  formatTime(t) {
+    return this._formatDate(t, this._timeFormat);
+  }
+  getTickValues(t) {
+    const { fullTimeExtent: e, timeZone: n } = this;
+    if (!e)
+      return [];
+    const { start: a, end: u } = e;
+    return !a || !u ? [] : X(a, u, t, n).map((f) => f.getTime());
+  }
+  async initialize() {
+    this.addHandles([
+      /* This watch is used to initialize the timeExtent when the effectiveStops are first computed. */
+      w(
+        () => this.effectiveStops,
+        (t) => {
+          t && (this.timeExtent ??= Z(t, this.mode));
+        },
+        { initial: !0 }
+      ),
+      /* Apply component timeExtent to the view (when it changes) */
+      w(
+        () => this.timeExtent,
+        (t) => {
+          !this.view || this.view.timeExtent && t?.equals(this.view.timeExtent) || (!t || t.isAllTime) && (!this.view.timeExtent || this.view.timeExtent.isAllTime) || (this.view.timeExtent = t);
+        },
+        { initial: !0 }
+      ),
+      /* Apply the view's timeExtent to the component but only when the view changes. */
+      w(
+        () => this.view,
+        (t) => {
+          t?.timeExtent && (this.timeExtent = t.timeExtent);
+        }
+      ),
+      w(
+        () => this.view,
+        (t, e) => {
+          e?.unregisterComponent(this), t?.registerComponent(this);
+        },
+        { initial: !0, sync: !0 }
+      ),
+      /* Apply the view's timeExtent to the component. */
+      w(
+        () => this.view?.timeExtent,
+        (t) => {
+          !t || t.equals(this.timeExtent) || t.isAllTime && (!this.timeExtent || this.timeExtent.isAllTime) || (this.timeExtent = t ?? void 0);
+        }
+      ),
+      w(
+        () => this.mode,
+        (t) => {
+          if (!(!this.timeExtent || this.timeExtent.isAllTime || this.timeExtent.isEmpty || !this.fullTimeExtent?.start || !this.fullTimeExtent.end))
+            switch (t) {
+              case "time-window":
+                this.timeExtent = new x({
+                  start: this.timeExtent.start ?? this.timeExtent.end,
+                  end: this.timeExtent.end ?? this.timeExtent.start
+                });
+                break;
+              case "cumulative-from-start":
+                this.timeExtent = new x({ start: null, end: this.timeExtent.end ?? this.timeExtent.start });
+                break;
+              case "cumulative-from-end":
+                this.timeExtent = new x({ start: this.timeExtent.start ?? this.timeExtent.end, end: null });
+                break;
+              case "instant":
+                this.timeExtent = new x({
+                  start: this.timeExtent.start ?? this.timeExtent.end,
+                  end: this.timeExtent.start ?? this.timeExtent.end
+                });
+                break;
+            }
+        }
+      )
+    ]), await G(
+      (async () => {
+        if (await O(() => this.view?.ready, { signal: M(this, _).signal }), this.loadPersistedSettingsDisabled)
+          return;
+        const t = await st(
+          this.view?.map,
+          M(this, _).signal
+        );
+        t && (this.fullTimeExtent = t.fullTimeExtent ?? void 0, this.loop = t.loop, this.mode = t.mode, this.playRate = t.playRate, this.stops = t.stops ?? void 0, this.timeExtent = t.timeExtent ?? void 0);
+      })()
+    );
+  }
+  next() {
+    p(this, h, E).call(this, { forward: !0, allowRestart: !1 });
+  }
+  play() {
+    p(this, h, $).call(this);
+  }
+  previous() {
+    p(this, h, E).call(this, { forward: !1, allowRestart: !1 });
+  }
+  stop() {
+    p(this, h, b).call(this);
+  }
+  updateWebDocument(t) {
+    if (this.savePersistedSettingsDisabled)
+      return;
+    const e = new q({
+      currentTimeExtent: this.timeExtent,
+      fullTimeExtent: this.fullTimeExtent,
+      loop: this.loop,
+      numStops: C(this.stops) ? this.stops.count : null,
+      numThumbs: this.mode === "time-window" ? 2 : 1,
+      stopDelay: this.playRate,
+      stopInterval: tt(this.stops) ? this.stops.interval : null,
+      stops: F(this.stops) ? this.stops.dates : null
+    });
+    t.widgets ??= new H(), t.widgets.timeSlider = e;
+  }
+  _formatDate(t, e) {
+    return ft({ locale: this.locale, formatOptions: e }).format(t);
+  }
+  _formatNumber(t, e) {
+    return gt({ locale: this.locale, formatOptions: e }).format(t);
+  }
+  //#endregion
+};
+_ = /* @__PURE__ */ new WeakMap();
+h = /* @__PURE__ */ new WeakSet();
+D = async function() {
+  try {
+    const { view: t } = this, e = this._animationController?.signal;
+    await Promise.all([L(this.playRate, e), t && O(() => !t.updating, e)]);
+  } catch (t) {
+    U(t) || nt("error", "arcgis-slider-time", "animation error", { detail: { error: t } }), this._animationController = void 0;
+    return;
+  }
+  p(this, h, E).call(this, { forward: !0, allowRestart: !1 }), this._animationController && p(this, h, D).call(this);
+};
+$ = function() {
+  p(this, h, b).call(this), this._animationController = new AbortController(), p(this, h, E).call(this, { forward: !0, allowRestart: !0 }), p(this, h, D).call(this);
+};
+E = function({ forward: t, allowRestart: e }) {
+  const { _thumbPositions: n, effectiveStopsEpoch: a } = this;
+  if (!n || !a)
+    return;
+  const u = n.map((m) => {
+    const g = a.indexOf(m);
+    if (g !== -1)
+      return g;
+    const S = a.reduce(
+      (y, d) => Math.abs(d - m) < Math.abs(y - m) ? d : y
+    );
+    return a.indexOf(S);
+  }), c = u.map((m) => m += t ? 1 : -1);
+  if (c.some((m) => m < 0 || m > a.length - 1))
+    if (this.loop || e) {
+      const m = Math.min(...u), g = Math.max(...u), y = (t ? u.map((d) => d - m) : u.map((d) => d + (a.length - 1 - g))).map((d) => a[d]);
+      this.timeExtent = p(this, h, P).call(this, y);
+    } else
+      this.state === "playing" && this.stop();
+  else {
+    const m = c.map((g) => a[g]);
+    this.timeExtent = p(this, h, P).call(this, m);
+  }
+};
+b = function() {
+  this._animationController?.abort(), this._animationController = void 0;
+};
+P = function(t) {
+  if (!t)
+    return;
+  const e = [...t].sort((n, a) => n - a).map((n) => new Date(n));
+  return Z(e, this.mode);
+};
+r([
+  l()
+], o.prototype, "_adjustedMajorTickFormat", 1);
+r([
+  l()
+], o.prototype, "_animationController", 2);
+r([
+  l()
+], o.prototype, "_dateFormat", 1);
+r([
+  l()
+], o.prototype, "_dateTimeFormat", 1);
+r([
+  l()
+], o.prototype, "_thumbPositions", 1);
+r([
+  l()
+], o.prototype, "_timeFormat", 1);
+r([
+  l()
+], o.prototype, "_userTimeZone", 2);
+r([
+  l()
+], o.prototype, "disabled", 2);
+r([
+  l()
+], o.prototype, "effectiveStops", 1);
+r([
+  l()
+], o.prototype, "effectiveStopsEpoch", 1);
+r([
+  l()
+], o.prototype, "era", 1);
+r([
+  l()
+], o.prototype, "format", 2);
+r([
+  l({ type: x })
+], o.prototype, "fullTimeExtent", 2);
+r([
+  l()
+], o.prototype, "interactive", 1);
+r([
+  l()
+], o.prototype, "isOutOfRange", 1);
+r([
+  l()
+], o.prototype, "loadPersistedSettingsDisabled", 2);
+r([
+  l()
+], o.prototype, "locale", 2);
+r([
+  l()
+], o.prototype, "loop", 2);
+r([
+  l()
+], o.prototype, "majorTickFormat", 2);
+r([
+  l()
+], o.prototype, "majorTickFormatter", 1);
+r([
+  l()
+], o.prototype, "mode", 2);
+r([
+  l({ value: 1e3 })
+], o.prototype, "playRate", 1);
+r([
+  l()
+], o.prototype, "savePersistedSettingsDisabled", 2);
+r([
+  l()
+], o.prototype, "state", 1);
+r([
+  l({ cast: Y })
+], o.prototype, "stops", 2);
+r([
+  l()
+], o.prototype, "tickFormats", 1);
+r([
+  l({ type: x })
+], o.prototype, "timeExtent", 2);
+r([
+  l()
+], o.prototype, "timeZone", 1);
+r([
+  l()
+], o.prototype, "view", 2);
+r([
+  l()
+], o.prototype, "viewTimeZone", 1);
+o = r([
+  at("components.time-bar.TimeBarViewModel")
+], o);
+const Tt = V`:host{box-shadow:var(--arcgis-internal-box-shadow, var(--calcite-shadow-sm));transition:max-height var(--calcite-internal-animation-timing-medium) ease-in-out}::slotted([slot="actions-end"]){border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);padding-inline-start:var(--calcite-spacing-sm)}.action-bar,.time-extent-group,.time-extent-group>slot{display:flex;flex:1 0 auto;place-items:center}.label{block-size:var(--calcite-size-fixed-xxxl);inline-size:175px}.settings{inline-size:calc(var(--arcgis-internal-panel-width) - 2 * var(--calcite-spacing-lg))}`, bt = mt(o);
+class St extends ot {
+  constructor() {
+    super(...arguments), this._viewModel = bt(this), this.messages = dt({ name: "time-bar", blocking: !0 }), this.#t = lt(), this.#e = ct(), this.#i = (e) => {
+      this._settingsActionElement = e;
+    }, this.autoDestroyDisabled = !1, this.disabled = this._viewModel.disabled, this.effectiveStops = this._viewModel.effectiveStops, this.format = this._viewModel.format, this.fullTimeExtent = this._viewModel.fullTimeExtent, this.icon = "clock", this.loadPersistedSettingsDisabled = this._viewModel.loadPersistedSettingsDisabled, this.loop = this._viewModel.loop, this.mode = this._viewModel.mode, this.playRate = this._viewModel.playRate, this.savePersistedSettingsDisabled = this._viewModel.savePersistedSettingsDisabled, this.showNext = !1, this.showPlay = !1, this.showPrevious = !1, this.showSettings = !1, this.state = this._viewModel.state, this.stops = this._viewModel.stops, this.timeExtent = this._viewModel.timeExtent, this.timeZone = this._viewModel.timeZone, this.view = this._viewModel.view, this.arcgisPropertyChange = ht()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = rt();
+  }
+  static {
+    this.properties = { _settingsActionElement: 16, autoDestroyDisabled: 5, disabled: 5, effectiveStops: 32, format: 1, fullTimeExtent: 0, icon: 1, label: 1, loadPersistedSettingsDisabled: 5, loop: 5, messageOverrides: 0, mode: 1, playRate: 9, referenceElement: 1, savePersistedSettingsDisabled: 5, showNext: 5, showPlay: 5, showPrevious: 5, showSettings: 5, state: 32, stops: 0, timeExtent: 0, timeZone: 1, view: 0 };
+  }
+  static {
+    this.styles = Tt;
+  }
+  #t;
+  #e;
+  #i;
+  async applyTimeSliderSettings(e) {
+    this._viewModel.set(e);
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  async next() {
+    this._viewModel.next();
+  }
+  async play() {
+    this._viewModel.play();
+  }
+  async previous() {
+    this._viewModel.previous();
+  }
+  async stop() {
+    this._viewModel.stop();
+  }
+  async updateWebDocument(e) {
+    this._viewModel.updateWebDocument(e);
+  }
+  willUpdate(e) {
+    e.has("messages") && (this._viewModel.locale = this.messages._lang);
+  }
+  #m(e) {
+    const { currentTarget: n } = e, a = (
+      // prioritizes slotted element (if it exists)
+      ut(n).at(0) ?? // fallback to default label
+      n.querySelector("arcgis-time-bar-extent")
+    );
+    a && (a.viewModel = this._viewModel);
+  }
+  async #c() {
+    switch (this.state) {
+      case "disabled":
+      case "playing":
+        return await this.stop();
+      case "ready":
+        return await this.play();
+    }
+  }
+  render() {
+    return v`<div role=presentation><calcite-action-bar class="action-bar" layout=horizontal expand-disabled floating>${this.#e === "ltr" ? v`${this.#n()}${this.#u()}${this.#l()}${this.#s()}` : v`${this.#l()}${this.#u()}${this.#n()}${this.#s()}`}</calcite-action-bar></div>`;
+  }
+  #s() {
+    return v`<slot name=actions-end slot=actions-end></slot>`;
+  }
+  #n() {
+    return this.showPrevious || this.showPlay || this.showNext ? v`<calcite-action-group>${this.#e === "ltr" ? v`${this.#o()}${this.#r()}${this.#a()}` : v`${this.#a()}${this.#r()}${this.#o()}`}</calcite-action-group>` : null;
+  }
+  #a() {
+    return this.showNext ? v`<calcite-action .disabled=${this._viewModel.isOutOfRange || !this._viewModel.interactive || !this.effectiveStops?.length || this.state === "playing"} icon=forward @click=${this.next} .text=${this.messages.next}></calcite-action>` : null;
+  }
+  #o() {
+    return this.showPlay ? v`<calcite-action .disabled=${this._viewModel.isOutOfRange || !this._viewModel.interactive || !this.effectiveStops?.length} .icon=${this.state === "playing" ? "pause-f" : "play-f"} @click=${this.#c} .text=${this.state === "playing" ? this.messages.stop : this.messages.play}></calcite-action>` : null;
+  }
+  #r() {
+    return this.showPrevious ? v`<calcite-action .disabled=${this._viewModel.isOutOfRange || !this._viewModel.interactive || !this.effectiveStops?.length || this.state === "playing"} icon=reverse @click=${this.previous} .text=${this.messages.previous}></calcite-action>` : null;
+  }
+  #l() {
+    return this.showSettings ? v`<calcite-action-group><calcite-action .disabled=${!this._viewModel.interactive} .text=${this.messages.settings} icon=sliders-horizontal ${A(this.#i)}></calcite-action>${this._settingsActionElement ? v`<calcite-popover auto-close .heading=${this.messages.timeBarSettings} .label=${this.messages.timeBarSettings} .referenceElement=${this._settingsActionElement} @calcitePopoverClose=${() => {
+      this.#t.value?.navigateToOverview();
+    }} overlay-positioning=fixed><slot name=settings><arcgis-time-bar-settings class="settings" .messages=${this.messages} .viewModel=${this._viewModel} ${A(this.#t)}></arcgis-time-bar-settings></slot></calcite-popover>` : void 0}</calcite-action-group>` : null;
+  }
+  #u() {
+    return v`<calcite-action-group class="time-extent-group"><slot name=time-extent @slotchange=${this.#m}><arcgis-time-bar-extent class="label" .viewModel=${this._viewModel}></arcgis-time-bar-extent></slot></calcite-action-group>`;
+  }
+}
+W("arcgis-time-bar", St);
+export {
+  St as ArcgisTimeBar
+};

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

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

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

@@ -0,0 +1,7 @@
+import "@esri/calcite-components/components/calcite-action-bar";
+import "@esri/calcite-components/components/calcite-action-group";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-popover";
+import "../arcgis-time-bar-settings/index.js";
+import "../arcgis-time-bar-extent/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-time-bar/types.d.ts

@@ -0,0 +1,45 @@
+import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type TimeInterval from "@arcgis/core/time/TimeInterval.js";
+import type { DateTimeFormatOptions } from "@arcgis/core/intl/date.js";
+
+/** Defines the different formats for displaying time in the time bar component. */
+export type Format = "date-time" | "date";
+
+/** Defines the different modes of the time slider component. */
+export type Mode = "cumulative-from-end" | "cumulative-from-start" | "instant" | "time-window";
+
+/** Defines the different states of the time bar component. */
+export type State = "disabled" | "playing" | "ready";
+
+/** Stops are positioned at specific dates. */
+export interface StopsByDates {
+  dates: Date[];
+}
+
+/** Stops are positioned at regular intervals defined by a [time interval](https://developers.arcgis.com/javascript/latest/references/core/time/TimeInterval). */
+export interface StopsByInterval {
+  /** The interval at which stops will be created. */
+  interval: TimeInterval;
+  /** The time extent over which the stops will be distributed. */
+  timeExtent?: TimeExtent;
+}
+
+/**
+ * Stops are positioned at a specific number of evenly spaced locations along the time slider.
+ * The exact positions of the stops will be calculated based on the provided count and the time extent of the slider.
+ */
+export interface StopsByCount {
+  /** The number of stops to create along the time slider. */
+  count: number;
+  /** The time extent over which the stops will be distributed. */
+  timeExtent?: TimeExtent;
+}
+
+export type Stops = StopsByCount | StopsByDates | StopsByInterval;
+
+export interface TickFormat {
+  duration: number;
+  format: DateTimeFormatOptions;
+  major: TimeInterval;
+  minor: TimeInterval;
+}

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

@@ -0,0 +1,37 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as l } from "../../chunks/runtime.js";
+import { css as n, html as i } from "lit";
+import { LitElement as c, safeClassMap as r } from "@arcgis/lumina";
+const d = n`:host{block-size:auto;display:inline-grid;inline-size:max-content}.align-center{justify-items:center}.align-end{justify-items:end}.align-start{justify-items:start}.date{font-weight:var(--calcite-font-weight-bold)}.disabled{opacity:var(--calcite-opacity-disabled)}.table-date,.table-date-time{align-content:center;align-items:center;display:grid;grid-template-columns:1fr}.table-date{grid-template-rows:var(--calcite-font-size-sm)}.table-date-time{grid-template-rows:var(--calcite-font-size-sm) var(--calcite-font-size-sm)}.time{font-weight:var(--calcite-font-weight-normal)}`;
+class o extends c {
+  constructor() {
+    super(...arguments), this.align = "center", this.autoDestroyDisabled = !1;
+  }
+  static {
+    this.properties = { align: 1, autoDestroyDisabled: 5, date: 0, viewModel: 0 };
+  }
+  static {
+    this.styles = d;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  render() {
+    const { align: a, date: e, viewModel: t } = this;
+    if (!t)
+      return null;
+    const { disabled: s } = t;
+    if (!e)
+      return i`<div class=${r({ "table-date": !0, [`align-${a}`]: !0, disabled: s })}><span class="date">\u221E</span></div>`;
+    switch (t.format) {
+      case "date":
+        return i`<div class=${r({ "table-date": !0, [`align-${a}`]: !0, disabled: s })}><span class="date">${t.formatDate(e)}</span></div>`;
+      case "date-time":
+        return i`<div class=${r({ "table-date-time": !0, [`align-${a}`]: !0, disabled: s })}><span class="date">${t.formatDate(e)}</span><span class="time">${t.formatTime(e)}</span></div>`;
+    }
+  }
+}
+l("arcgis-time-bar-date", o);
+export {
+  o as ArcgisTimeBarDate
+};