@arcgis/map-components 5.2.0-next.112 → 5.2.0-next.114

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

@@ -1,44 +1,44 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as W } from "../../chunks/runtime.js";
-import { css as z, html as d } from "lit";
-import V from "@arcgis/core/core/Accessor.js";
-import x from "@arcgis/core/time/TimeExtent.js";
-import q from "@arcgis/core/webdoc/widgets/TimeSlider.js";
-import H from "@arcgis/core/webdoc/Widgets.js";
-import { b as K, d as j, a as L } from "../../chunks/async-utils.js";
-import { c as G, e as U, g as F, i as C, h as Y, j as J, k as Q, l as R, a as X } from "../../chunks/dateUtils.js";
-import { convertDateFormatToIntlOptions as b } from "@arcgis/core/intl.js";
-import { r as tt, u as et, s as it } from "../../chunks/time-utils.js";
-import st from "@arcgis/core/time/TimeInterval.js";
-import { getTimeSliderSettingsFromWebDocument as nt } from "@arcgis/core/support/timeUtils.js";
-import { log as at } from "@arcgis/toolkit/log";
-import { property as l, subclass as ot } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { watch as w, whenOnce as Z } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as rt, createEvent as lt } from "@arcgis/lumina";
-import { createRef as mt, ref as k } from "lit/directives/ref.js";
-import { getSlotAssignedElements as ct } from "@arcgis/toolkit/dom/slots";
-import { m as ht } from "../../chunks/useViewModel.js";
-import { useDirection as ut, usePropertyChange as dt } from "@arcgis/lumina/controllers";
-import { u as pt } from "../../chunks/useT9n.js";
-const O = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap();
-function vt(t) {
-  const { locale: e, formatOptions: n } = t, a = wt(n), m = new Intl.DateTimeFormat(e, a);
-  return O.set(t, m), m;
-}
+import { c as V } from "../../chunks/runtime.js";
+import { css as q, html as p, nothing as _ } from "lit";
+import H from "@arcgis/core/core/Accessor.js";
+import f from "@arcgis/core/time/TimeExtent.js";
+import j from "@arcgis/core/webdoc/widgets/TimeSlider.js";
+import L from "@arcgis/core/webdoc/Widgets.js";
+import { b as G, d as U, a as X } 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 tt, l as O, a as et } from "../../chunks/dateUtils.js";
+import { convertDateFormatToIntlOptions as E } from "@arcgis/core/intl.js";
+import { r as it, u as st, s as at } from "../../chunks/time-utils.js";
+import nt from "@arcgis/core/time/TimeInterval.js";
+import { getTimeSliderSettingsFromWebDocument as ot } from "@arcgis/core/support/timeUtils.js";
+import { log as rt } from "@arcgis/toolkit/log";
+import { property as l, subclass as lt } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { watch as g, whenOnce as I } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as ct, createEvent as mt } from "@arcgis/lumina";
+import { createRef as ht, ref as R } from "lit/directives/ref.js";
+import { getSlotAssignedElements as ut } from "@arcgis/toolkit/dom/slots";
+import { m as dt } from "../../chunks/useViewModel.js";
+import { useDirection as pt, usePropertyChange as vt } from "@arcgis/lumina/controllers";
+import { u as gt } from "../../chunks/useT9n.js";
+const N = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap();
 function ft(t) {
-  const { locale: e, formatOptions: n } = t, a = new Intl.NumberFormat(e, n);
-  return B.set(t, a), a;
-}
-function gt(t) {
-  return O.get(t) ?? vt(t);
+  const { locale: e, formatOptions: a } = t, o = bt(a), c = new Intl.DateTimeFormat(e, o);
+  return N.set(t, c), c;
 }
 function yt(t) {
-  return B.get(t) ?? ft(t);
+  const { locale: e, formatOptions: a } = t, o = new Intl.NumberFormat(e, a);
+  return B.set(t, o), o;
 }
 function wt(t) {
+  return N.get(t) ?? ft(t);
+}
+function xt(t) {
+  return B.get(t) ?? yt(t);
+}
+function bt(t) {
   return t.timeZone ? {
     ...t,
-    timeZone: tt(t.timeZone)
+    timeZone: it(t.timeZone)
   } : t;
 }
 const i = (t, e) => ({ tick: t, tickFormat: e }), s = {
@@ -51,7 +51,7 @@ const i = (t, e) => ({ tick: t, tickFormat: e }), s = {
   m: { month: "short" },
   my: { month: "short", year: "numeric" },
   y: { year: "numeric" }
-}, xt = [
+}, _t = [
   i({ value: 10, unit: "milliseconds" }, s.sf),
   i({ value: 20, unit: "milliseconds" }, s.sf),
   i({ value: 50, unit: "milliseconds" }, s.sf),
@@ -105,24 +105,24 @@ const i = (t, e) => ({ tick: t, tickFormat: e }), s = {
   i({ value: 2e4, unit: "centuries" }, s.y)
 ];
 function Et(t) {
-  return xt.map(({ tick: e, tickFormat: n }) => {
-    const a = new st(e), m = a.toMilliseconds(), h = {
-      ...n,
+  return _t.map(({ tick: e, tickFormat: a }) => {
+    const o = new nt(e), c = o.toMilliseconds(), m = {
+      ...a,
       timeZone: t
     };
-    return { duration: m, format: h, timeInterval: a };
+    return { duration: c, format: m, timeInterval: o };
   });
 }
-var _t = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, I = (t) => {
+var Tt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, z = (t) => {
   throw TypeError(t);
-}, r = (t, e, n, a) => {
-  for (var m = a > 1 ? void 0 : a ? bt(e, n) : e, h = t.length - 1, f; h >= 0; h--)
-    (f = t[h]) && (m = (a ? f(e, n, m) : f(m)) || m);
-  return a && m && _t(e, n, m), m;
-}, N = (t, e, n) => e.has(t) || I("Cannot " + n), M = (t, e, n) => (N(t, e, "read from private field"), n ? n.call(t) : e.get(t)), A = (t, e, n) => e.has(t) ? I("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), v = (t, e, n) => (N(t, e, "access private method"), n), E, u, $, D, _, T, P;
-let o = class extends V {
+}, r = (t, e, a, o) => {
+  for (var c = o > 1 ? void 0 : o ? St(e, a) : e, m = t.length - 1, u; m >= 0; m--)
+    (u = t[m]) && (c = (o ? u(e, a, c) : u(c)) || c);
+  return o && c && Tt(e, a, c), c;
+}, W = (t, e, a) => e.has(t) || z("Cannot " + a), M = (t, e, a) => (W(t, e, "read from private field"), a ? a.call(t) : e.get(t)), Z = (t, e, a) => e.has(t) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), d = (t, e, a) => (W(t, e, "access private method"), a), w, h, $, D, P, k, x, T, A;
+let n = class extends H {
   constructor() {
-    super(...arguments), A(this, u), A(this, E, new AbortController()), this.disabled = !1, this.format = "date", this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.savePersistedSettingsDisabled = !1, this.stops = U;
+    super(...arguments), Z(this, h), Z(this, w, new AbortController()), this.disabled = !1, this.format = "date", this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.reverseAnimation = !1, this.savePersistedSettingsDisabled = !1, this.stops = J;
   }
   get _adjustedTickFormat() {
     const { era: t, timeZone: e } = this;
@@ -134,13 +134,13 @@ let o = class extends V {
   }
   get _dateFormat() {
     const { era: t, timeZone: e } = this;
-    return { ...b("short-date"), era: t, timeZone: e };
+    return { ...E("short-date"), era: t, timeZone: e };
   }
   get _dateTimeFormat() {
     const { era: t, timeZone: e } = this;
     return {
-      ...b("short-date"),
-      ...b("long-time"),
+      ...E("short-date"),
+      ...E("long-time"),
       era: t,
       timeZone: e
     };
@@ -159,30 +159,48 @@ let o = class extends V {
         return t && e ? [t.getTime(), e.getTime()] : null;
     }
   }
+  get _thumbStopIndices() {
+    const { _thumbPositions: t, effectiveStopsEpoch: e } = this;
+    return !t || !e ? null : t.map((a) => {
+      const o = e.indexOf(a);
+      if (o !== -1)
+        return o;
+      const c = e.reduce(
+        (m, u) => Math.abs(u - a) < Math.abs(m - a) ? u : m
+      );
+      return e.indexOf(c);
+    });
+  }
   get _timeFormat() {
     const { timeZone: t } = this;
-    return { ...b("long-time"), timeZone: t };
+    return { ...E("long-time"), timeZone: t };
+  }
+  get canPrevious() {
+    return this._thumbStopIndices?.map((t) => --t).every((t) => d(this, h, P).call(this, t)) ?? !1;
+  }
+  get canNext() {
+    return this._thumbStopIndices?.map((t) => ++t).every((t) => d(this, h, P).call(this, t)) ?? !1;
   }
   get effectiveStops() {
     const { fullTimeExtent: t, stops: e } = this;
     if (!e)
       return;
     if (F(e)) {
-      const { dates: a } = e;
-      if (!a?.length)
+      const { dates: o } = e;
+      if (!o?.length)
         return;
-      const m = a.sort((y, p) => y.getTime() - p.getTime());
+      const c = o.sort((S, b) => S.getTime() - b.getTime());
       if (!t?.start || !t?.end)
-        return m;
-      const { start: h, end: f } = t, c = h.getTime(), g = f.getTime();
-      return m.filter((y) => {
-        const p = y.getTime();
-        return p >= c && p <= g;
+        return c;
+      const { start: m, end: u } = t, y = m.getTime(), v = u.getTime();
+      return c.filter((S) => {
+        const b = S.getTime();
+        return b >= y && b <= v;
       });
     }
-    const n = e.timeExtent ?? t;
-    if (n)
-      return C(e) ? Y(n, e.count) : J(n, e.interval);
+    const a = e.timeExtent ?? t;
+    if (a)
+      return C(e) ? K(a, e.count) : Q(a, e.interval);
   }
   get effectiveStopsEpoch() {
     return this.effectiveStops?.map((t) => t.getTime());
@@ -191,17 +209,17 @@ let o = class extends V {
     return (this.fullTimeExtent?.start?.getFullYear() ?? 0) < 0 ? "short" : void 0;
   }
   get interactive() {
-    return !(this.disabled || this.state === "disabled" || this.timeZone === et);
+    return !(this.disabled || this.state === "disabled" || this.timeZone === st);
   }
   get isOutOfRange() {
-    const { timeExtent: t, fullTimeExtent: e } = this, { start: n, end: a } = e ?? {};
-    if (!n || !a || !t || t.isAllTime || t.isEmpty)
+    const { timeExtent: t, fullTimeExtent: e } = this, { start: a, end: o } = e ?? {};
+    if (!a || !o || !t || t.isAllTime || t.isEmpty)
       return !0;
-    const { start: m, end: h } = t ?? {}, f = m != null && (m < n || m > a), c = h != null && (h > a || h < n);
-    return f || c;
+    const { start: c, end: m } = t ?? {}, u = c != null && (c < a || c > o), y = m != null && (m > o || m < a);
+    return u || y;
   }
   set playRate(t) {
-    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && v(this, u, D).call(this), this._set("playRate", t));
+    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && d(this, h, k).call(this), this._set("playRate", t));
   }
   get state() {
     return this.fullTimeExtent ? this._animationController ? "playing" : "ready" : "disabled";
@@ -213,7 +231,7 @@ let o = class extends V {
     return Et(this.timeZone);
   }
   get timeZone() {
-    return this._userTimeZone ?? this.viewTimeZone ?? it;
+    return this._userTimeZone ?? this.viewTimeZone ?? at;
   }
   set timeZone(t) {
     this._userTimeZone = t ?? void 0;
@@ -224,7 +242,7 @@ let o = class extends V {
   //#endregion
   //#region Public Methods
   destroy() {
-    M(this, E).abort(), this.view?.unregisterComponent(this), v(this, u, T).call(this);
+    M(this, w).abort(), this.view?.unregisterComponent(this), d(this, h, T).call(this);
   }
   formatDate(t) {
     return this._formatDate(t, this._dateFormat);
@@ -239,38 +257,38 @@ let o = class extends V {
     return this._formatDate(t, this._timeFormat);
   }
   getTickValues(t) {
-    const { fullTimeExtent: e, timeZone: n } = this;
+    const { fullTimeExtent: e, timeZone: a } = this;
     if (!e)
       return [];
-    const { start: a, end: m } = e;
-    return !a || !m ? [] : Q(a, m, t, n).map((f) => f.getTime());
+    const { start: o, end: c } = e;
+    return !o || !c ? [] : tt(o, c, t, a).map((u) => u.getTime());
   }
   async initialize() {
     this.addHandles([
       /* This watch is used to initialize the timeExtent when the effectiveStops are first computed. */
-      w(
+      g(
         () => this.effectiveStops,
         (t) => {
-          t && (this.timeExtent ??= R(t, this.mode));
+          t && (this.timeExtent ??= O(t, this.mode));
         },
         { initial: !0 }
       ),
       /* Apply component timeExtent to the view (when it changes) */
-      w(
+      g(
         () => 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);
+          !this.view || (!t || t.isAllTime) && (!this.view.timeExtent || this.view.timeExtent.isAllTime) || this.view.timeExtent && t?.equals(this.view.timeExtent) || (this.view.timeExtent = t);
         },
         { initial: !0 }
       ),
       /* Apply the view's timeExtent to the component but only when the view changes. */
-      w(
+      g(
         () => this.view,
         (t) => {
           t?.timeExtent && (this.timeExtent = t.timeExtent);
         }
       ),
-      w(
+      g(
         () => this.view,
         (t, e) => {
           e?.unregisterComponent(this), t?.registerComponent(this);
@@ -278,31 +296,31 @@ let o = class extends V {
         { initial: !0, sync: !0 }
       ),
       /* Apply the view's timeExtent to the component. */
-      w(
+      g(
         () => this.view?.timeExtent,
         (t) => {
           !t || t.equals(this.timeExtent) || t.isAllTime && (!this.timeExtent || this.timeExtent.isAllTime) || (this.timeExtent = t ?? void 0);
         }
       ),
-      w(
+      g(
         () => 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({
+                this.timeExtent = new f({
                   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 });
+                this.timeExtent = new f({ 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 });
+                this.timeExtent = new f({ start: this.timeExtent.start ?? this.timeExtent.end, end: null });
                 break;
               case "instant":
-                this.timeExtent = new x({
+                this.timeExtent = new f({
                   start: this.timeExtent.start ?? this.timeExtent.end,
                   end: this.timeExtent.start ?? this.timeExtent.end
                 });
@@ -310,206 +328,212 @@ let o = class extends V {
             }
         }
       )
-    ]), await K(
+    ]), await G(
       (async () => {
-        if (await Z(() => this.view?.ready, { signal: M(this, E).signal }), this.loadPersistedSettingsDisabled)
+        if (await I(() => this.view?.ready, { signal: M(this, w).signal }), this.loadPersistedSettingsDisabled)
           return;
-        const t = await nt(
+        const t = await ot(
           this.view?.map,
-          M(this, E).signal
+          M(this, w).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() {
-    v(this, u, _).call(this, { forward: !0, allowRestart: !1 });
+    d(this, h, x).call(this, { forward: !0, allowRestart: !1 });
   }
   play() {
-    v(this, u, D).call(this);
+    d(this, h, k).call(this);
   }
   previous() {
-    v(this, u, _).call(this, { forward: !1, allowRestart: !1 });
+    d(this, h, x).call(this, { forward: !1, allowRestart: !1 });
   }
   stop() {
-    v(this, u, T).call(this);
+    d(this, h, T).call(this);
   }
   updateWebDocument(t) {
     if (this.savePersistedSettingsDisabled)
       return;
-    const e = new q({
+    const e = new j({
       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: X(this.stops) ? this.stops.interval : null,
+      stopInterval: et(this.stops) ? this.stops.interval : null,
       stops: F(this.stops) ? this.stops.dates : null
     });
-    t.widgets ??= new H(), t.widgets.timeSlider = e;
+    t.widgets ??= new L(), t.widgets.timeSlider = e;
   }
   _formatDate(t, e) {
-    return gt({ locale: this.locale, formatOptions: e }).format(t);
+    return wt({ locale: this.locale, formatOptions: e }).format(t);
   }
   _formatNumber(t, e) {
-    return yt({ locale: this.locale, formatOptions: e }).format(t);
+    return xt({ locale: this.locale, formatOptions: e }).format(t);
   }
   //#endregion
 };
-E = /* @__PURE__ */ new WeakMap();
-u = /* @__PURE__ */ new WeakSet();
+w = /* @__PURE__ */ new WeakMap();
+h = /* @__PURE__ */ new WeakSet();
 $ = async function() {
   try {
     const { view: t } = this, e = this._animationController?.signal;
-    await Promise.all([j(this.playRate, e), t && Z(() => !t.updating, e)]);
+    await Promise.all([U(this.playRate, e), t && I(() => !t.updating, e)]);
   } catch (t) {
-    L(t) || at("error", "arcgis-slider-time", "animation error", { detail: { error: t } }), this._animationController = void 0;
+    X(t) || rt("error", "arcgis-slider-time", "animation error", { detail: { error: t } }), this._animationController = void 0;
     return;
   }
-  v(this, u, _).call(this, { forward: !0, allowRestart: !1 }), this._animationController && v(this, u, $).call(this);
+  d(this, h, x).call(this, { forward: !this.reverseAnimation, allowRestart: !1 }), this._animationController && d(this, h, $).call(this);
 };
-D = function() {
-  v(this, u, T).call(this), this._animationController = new AbortController(), v(this, u, _).call(this, { forward: !0, allowRestart: !0 }), v(this, u, $).call(this);
+D = function(t) {
+  return t ? this.canNext : this.canPrevious;
 };
-_ = function({ forward: t, allowRestart: e }) {
-  const { _thumbPositions: n, effectiveStopsEpoch: a } = this;
-  if (!n || !a)
-    return;
-  const m = n.map((c) => {
-    const g = a.indexOf(c);
-    if (g !== -1)
-      return g;
-    const S = a.reduce(
-      (y, p) => Math.abs(p - c) < Math.abs(y - c) ? p : y
-    );
-    return a.indexOf(S);
-  }), h = m.map((c) => c += t ? 1 : -1);
-  if (h.some((c) => c < 0 || c > a.length - 1))
-    if (this.loop || e) {
-      const c = Math.min(...m), g = Math.max(...m), y = (t ? m.map((p) => p - c) : m.map((p) => p + (a.length - 1 - g))).map((p) => a[p]);
-      this.timeExtent = v(this, u, P).call(this, y);
+P = function(t) {
+  return t >= 0 && t < (this.effectiveStopsEpoch?.length ?? 0);
+};
+k = function() {
+  d(this, h, T).call(this), this._animationController = new AbortController(), d(this, h, x).call(this, { forward: !this.reverseAnimation, allowRestart: !0 }), d(this, h, $).call(this);
+};
+x = function({ forward: t, allowRestart: e }) {
+  const { _thumbStopIndices: a, effectiveStopsEpoch: o } = this;
+  if (!(!a || !o))
+    if (d(this, h, D).call(this, t)) {
+      const m = a.map((u) => u + (t ? 1 : -1)).map((u) => o[u]);
+      this.timeExtent = d(this, h, A).call(this, m), !this.loop && !d(this, h, D).call(this, t) && this.stop();
+    } else if (this.loop || e) {
+      const c = Math.min(...a), m = Math.max(...a), y = (t ? a.map((v) => v - c) : a.map((v) => v + (o.length - 1 - m))).map((v) => o[v]);
+      this.timeExtent = d(this, h, A).call(this, y);
     } else
-      this.state === "playing" && this.stop();
-  else {
-    const c = h.map((g) => a[g]);
-    this.timeExtent = v(this, u, P).call(this, c);
-  }
+      this.stop();
 };
 T = function() {
   this._animationController?.abort(), this._animationController = void 0;
 };
-P = function(t) {
+A = function(t) {
   if (!t)
     return;
-  const e = [...t].sort((n, a) => n - a).map((n) => new Date(n));
-  return R(e, this.mode);
+  const e = [...t].sort((a, o) => a - o).map((a) => new Date(a));
+  return O(e, this.mode);
 };
 r([
   l()
-], o.prototype, "_adjustedTickFormat", 1);
+], n.prototype, "_adjustedTickFormat", 1);
 r([
   l()
-], o.prototype, "_animationController", 2);
+], n.prototype, "_animationController", 2);
 r([
   l()
-], o.prototype, "_dateFormat", 1);
+], n.prototype, "_dateFormat", 1);
 r([
   l()
-], o.prototype, "_dateTimeFormat", 1);
+], n.prototype, "_dateTimeFormat", 1);
 r([
   l()
-], o.prototype, "_thumbPositions", 1);
+], n.prototype, "_thumbPositions", 1);
 r([
   l()
-], o.prototype, "_timeFormat", 1);
+], n.prototype, "_thumbStopIndices", 1);
 r([
   l()
-], o.prototype, "_userTimeZone", 2);
+], n.prototype, "_timeFormat", 1);
 r([
   l()
-], o.prototype, "disabled", 2);
+], n.prototype, "_userTimeZone", 2);
 r([
   l()
-], o.prototype, "effectiveStops", 1);
+], n.prototype, "canPrevious", 1);
 r([
   l()
-], o.prototype, "effectiveStopsEpoch", 1);
+], n.prototype, "canNext", 1);
 r([
   l()
-], o.prototype, "era", 1);
+], n.prototype, "disabled", 2);
 r([
   l()
-], o.prototype, "format", 2);
+], n.prototype, "effectiveStops", 1);
 r([
-  l({ type: x })
-], o.prototype, "fullTimeExtent", 2);
+  l()
+], n.prototype, "effectiveStopsEpoch", 1);
 r([
   l()
-], o.prototype, "interactive", 1);
+], n.prototype, "era", 1);
 r([
   l()
-], o.prototype, "isOutOfRange", 1);
+], n.prototype, "format", 2);
+r([
+  l({ type: f })
+], n.prototype, "fullTimeExtent", 2);
+r([
+  l()
+], n.prototype, "interactive", 1);
+r([
+  l()
+], n.prototype, "isOutOfRange", 1);
 r([
   l()
-], o.prototype, "loadPersistedSettingsDisabled", 2);
+], n.prototype, "loadPersistedSettingsDisabled", 2);
 r([
   l()
-], o.prototype, "locale", 2);
+], n.prototype, "locale", 2);
 r([
   l()
-], o.prototype, "loop", 2);
+], n.prototype, "loop", 2);
 r([
   l()
-], o.prototype, "mode", 2);
+], n.prototype, "mode", 2);
 r([
   l({ value: 1e3 })
-], o.prototype, "playRate", 1);
+], n.prototype, "playRate", 1);
+r([
+  l()
+], n.prototype, "reverseAnimation", 2);
 r([
   l()
-], o.prototype, "savePersistedSettingsDisabled", 2);
+], n.prototype, "savePersistedSettingsDisabled", 2);
 r([
   l()
-], o.prototype, "state", 1);
+], n.prototype, "state", 1);
 r([
-  l({ cast: G })
-], o.prototype, "stops", 2);
+  l({ cast: Y })
+], n.prototype, "stops", 2);
 r([
   l()
-], o.prototype, "tickFormat", 2);
+], n.prototype, "tickFormat", 2);
 r([
   l()
-], o.prototype, "tickFormatter", 1);
+], n.prototype, "tickFormatter", 1);
 r([
   l()
-], o.prototype, "tickFormats", 1);
+], n.prototype, "tickFormats", 1);
 r([
-  l({ type: x })
-], o.prototype, "timeExtent", 2);
+  l({ type: f })
+], n.prototype, "timeExtent", 2);
 r([
   l()
-], o.prototype, "timeZone", 1);
+], n.prototype, "timeZone", 1);
 r([
   l()
-], o.prototype, "view", 2);
+], n.prototype, "view", 2);
 r([
   l()
-], o.prototype, "viewTimeZone", 1);
-o = r([
-  ot("components.time-bar.TimeBarViewModel")
-], o);
-const Tt = z`:host{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight);transition:max-height var(--calcite-internal-animation-timing-medium) ease-in-out;--arcgis-internal-time-bar-shadow: none}::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}.action-bar{--calcite-action-bar-shadow: var(--arcgis-internal-time-bar-shadow);--calcite-action-bar-background-color: var(--calcite-color-foreground-1)}.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))}`, St = ht(o);
-class Mt extends rt {
+], n.prototype, "viewTimeZone", 1);
+n = r([
+  lt("components.time-bar.TimeBarViewModel")
+], n);
+const Mt = q`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight);transition:max-height var(--calcite-internal-animation-timing-medium) ease-in-out}:host([floating]) .action-bar{--calcite-action-bar-shadow: var(--arcgis-internal-box-shadow)}::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}.action-bar{--calcite-action-bar-shadow: none;--calcite-action-bar-background-color: var(--calcite-color-foreground-1)}.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))}`, $t = dt(n);
+class Dt extends ct {
   constructor() {
-    super(...arguments), this._viewModel = St(this), this.messages = pt({ name: "time-bar", blocking: !0 }), this.#t = mt(), this.#e = ut(), this.#i = (e) => {
+    super(...arguments), this._viewModel = $t(this), this.messages = gt({ name: "time-bar", blocking: !0 }), this.#t = ht(), this.#e = pt(), 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.showTimeExtent = !1, this.state = this._viewModel.state, this.stops = this._viewModel.stops, this.timeExtent = this._viewModel.timeExtent, this.timeZone = this._viewModel.timeZone, this.toolbarKind = "floating", this.view = this._viewModel.view, this.arcgisPropertyChange = dt()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = lt();
+    }, this.autoDestroyDisabled = !1, this.disabled = this._viewModel.disabled, this.effectiveStops = this._viewModel.effectiveStops, this.floating = !1, 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.reverseAnimation = this._viewModel.reverseAnimation, this.savePersistedSettingsDisabled = this._viewModel.savePersistedSettingsDisabled, this.showNext = !1, this.showPlay = !1, this.showPrevious = !1, this.showSettings = !1, this.showTimeExtent = !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 = vt()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = mt();
   }
   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, showTimeExtent: 5, state: 32, stops: 0, timeExtent: 0, timeZone: 1, toolbarKind: 1, view: 0 };
+    this.properties = { _settingsActionElement: 16, autoDestroyDisabled: 5, disabled: 5, effectiveStops: 32, floating: 7, format: 1, fullTimeExtent: 0, icon: 1, label: 1, loadPersistedSettingsDisabled: 5, loop: 5, messageOverrides: 0, mode: 1, playRate: 9, referenceElement: 1, reverseAnimation: 5, savePersistedSettingsDisabled: 5, showNext: 5, showPlay: 5, showPrevious: 5, showSettings: 5, showTimeExtent: 5, state: 32, stops: 0, timeExtent: 0, timeZone: 1, view: 0 };
   }
   static {
-    this.styles = Tt;
+    this.styles = Mt;
   }
   #t;
   #e;
@@ -539,12 +563,12 @@ class Mt extends rt {
     e.has("messages") && (this._viewModel.locale = this.messages._lang);
   }
   #h(e) {
-    const { currentTarget: n } = e, a = (
+    const { currentTarget: a } = e, o = (
       // prioritizes slotted element (if it exists)
-      ct(n).at(0) ?? // fallback to default label
-      n.querySelector("arcgis-time-bar-extent")
+      ut(a).at(0) ?? // fallback to default label
+      a.querySelector("arcgis-time-bar-extent")
     );
-    a && (a.messages = this.messages, a.viewModel = this._viewModel);
+    o && (o.messages = this.messages, o.viewModel = this._viewModel);
   }
   async #u() {
     switch (this.state) {
@@ -556,36 +580,36 @@ class Mt extends rt {
     }
   }
   render() {
-    return d`<div role=presentation><calcite-action-bar class="action-bar" layout=horizontal expand-toggle-disabled .floating=${this.toolbarKind === "floating"} overflow-mode=none>${this.#e === "ltr" ? d`${this.#s()}${this.#a()}${this.#c()}${this.#m()}${this.#n()}` : d`${this.#s()}${this.#m()}${this.#c()}${this.#a()}${this.#n()}`}</calcite-action-bar></div>`;
+    return p`<div role=presentation><calcite-action-bar class="action-bar" layout=horizontal expand-toggle-disabled .floating=${this.floating} overflow-mode=none>${this.#e === "ltr" ? p`${this.#s()}${this.#n()}${this.#m()}${this.#c()}${this.#a()}` : p`${this.#s()}${this.#c()}${this.#m()}${this.#n()}${this.#a()}`}</calcite-action-bar></div>`;
   }
   #s() {
-    return this.showNext || this.showPlay || this.showPrevious || this.showTimeExtent || this.showSettings ? null : d`<calcite-action disabled .text=${this.messages.componentLabel} text-enabled></calcite-action>`;
-  }
-  #n() {
-    return d`<slot name=actions-end slot=actions-end></slot>`;
+    return this.showNext || this.showPlay || this.showPrevious || this.showTimeExtent || this.showSettings ? null : p`<calcite-action disabled .text=${this.messages.componentLabel} text-enabled></calcite-action>`;
   }
   #a() {
-    return this.showPrevious || this.showPlay || this.showNext ? d`<calcite-action-group>${this.#e === "ltr" ? d`${this.#r()}${this.#l()}${this.#o()}` : d`${this.#o()}${this.#l()}${this.#r()}`}</calcite-action-group>` : null;
+    return p`<slot name=actions-end slot=actions-end></slot>`;
+  }
+  #n() {
+    return this.showPrevious || this.showPlay || this.showNext ? p`<calcite-action-group>${this.#e === "ltr" ? p`${this.#r()}${this.#l()}${this.#o()}` : p`${this.#o()}${this.#l()}${this.#r()}`}</calcite-action-group>` : null;
   }
   #o() {
-    return this.showNext ? d`<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;
+    return this.showNext ? p`<calcite-action .disabled=${this._viewModel.isOutOfRange || !this._viewModel.interactive || !this.effectiveStops?.length || this.state === "playing" || !this.loop && !this._viewModel.canNext} icon=forward @click=${this.next} .text=${this.messages.next} title=${this.messages.next ?? _}></calcite-action>` : null;
   }
   #r() {
-    return this.showPlay ? d`<calcite-action .disabled=${this._viewModel.isOutOfRange || !this._viewModel.interactive || !this.effectiveStops?.length} .icon=${this.state === "playing" ? "pause-f" : "play-f"} @click=${this.#u} .text=${this.state === "playing" ? this.messages.stop : this.messages.play}></calcite-action>` : null;
+    return this.showPlay ? p`<calcite-action .disabled=${this._viewModel.isOutOfRange || !this._viewModel.interactive || !this.effectiveStops?.length} .icon=${this.state === "playing" ? "pause-f" : "play-f"} @click=${this.#u} .text=${this.state === "playing" ? this.messages.stop : this.messages.play} title=${(this.state === "playing" ? this.messages.stop : this.messages.play) ?? _}></calcite-action>` : null;
   }
   #l() {
-    return this.showPrevious ? d`<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;
+    return this.showPrevious ? p`<calcite-action .disabled=${this._viewModel.isOutOfRange || !this._viewModel.interactive || !this.effectiveStops?.length || this.state === "playing" || !this.loop && !this._viewModel.canPrevious} icon=reverse @click=${this.previous} .text=${this.messages.previous} title=${this.messages.previous ?? _}></calcite-action>` : null;
   }
-  #m() {
-    return this.showSettings ? d`<calcite-action-group><calcite-action .disabled=${!this._viewModel.interactive} .text=${this.messages.settings} icon=sliders-horizontal ${k(this.#i)}></calcite-action>${this._settingsActionElement ? d`<calcite-popover auto-close .heading=${this.messages.timeBarSettings} .label=${this.messages.timeBarSettings} .referenceElement=${this._settingsActionElement} @calcitePopoverClose=${() => {
+  #c() {
+    return this.showSettings ? p`<calcite-action-group><calcite-action .disabled=${!this._viewModel.interactive} .text=${this.messages.settings} icon=sliders-horizontal title=${this.messages.settings ?? _} ${R(this.#i)}></calcite-action>${this._settingsActionElement ? p`<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} ${k(this.#t)}></arcgis-time-bar-settings></slot></calcite-popover>` : void 0}</calcite-action-group>` : null;
+    }} overlay-positioning=fixed><slot name=settings><arcgis-time-bar-settings class="settings" .messages=${this.messages} .viewModel=${this._viewModel} ${R(this.#t)}></arcgis-time-bar-settings></slot></calcite-popover>` : void 0}</calcite-action-group>` : null;
   }
-  #c() {
-    return this.showTimeExtent ? d`<calcite-action-group class="time-extent-group"><slot name=time-extent @slotchange=${this.#h}><arcgis-time-bar-extent class="label" .viewModel=${this._viewModel}></arcgis-time-bar-extent></slot></calcite-action-group>` : null;
+  #m() {
+    return this.showTimeExtent ? p`<calcite-action-group class="time-extent-group"><slot name=time-extent @slotchange=${this.#h}><arcgis-time-bar-extent class="label" .viewModel=${this._viewModel}></arcgis-time-bar-extent></slot></calcite-action-group>` : null;
   }
 }
-W("arcgis-time-bar", Mt);
+V("arcgis-time-bar", Dt);
 export {
-  Mt as ArcgisTimeBar
+  Dt as ArcgisTimeBar
 };