@arcgis/map-components 5.2.0-next.102 → 5.2.0-next.104

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

@@ -1,47 +1,47 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as W } from "../../chunks/runtime.js";
-import { css as z, html as v } from "lit";
+import { css as z, html as p } 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 K from "@arcgis/core/webdoc/Widgets.js";
-import { b as H, d as G, a as L } from "../../chunks/async-utils.js";
-import { c as U, e as Y, g as F, i as C, h as J, j as Q, k as X, l as Z, a as tt } from "../../chunks/dateUtils.js";
+import { b as j, d as H, a as G } from "../../chunks/async-utils.js";
+import { c as L, 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 et, u as it, s as st } from "../../chunks/time-utils.js";
-import k from "@arcgis/core/time/TimeInterval.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 O } from "@arcgis/core/core/reactiveUtils.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 ut, ref as A } from "lit/directives/ref.js";
-import { getSlotAssignedElements as mt } from "@arcgis/toolkit/dom/slots";
-import { m as ct } from "../../chunks/useViewModel.js";
-import { useDirection as ht, usePropertyChange as dt } from "@arcgis/lumina/controllers";
-import { u as vt } from "../../chunks/useT9n.js";
-const B = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap();
-function pt(t) {
-  const { locale: e, formatOptions: n } = t, a = wt(n), u = new Intl.DateTimeFormat(e, a);
-  return B.set(t, u), u;
+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;
 }
 function ft(t) {
   const { locale: e, formatOptions: n } = t, a = new Intl.NumberFormat(e, n);
-  return I.set(t, a), a;
+  return B.set(t, a), a;
 }
 function gt(t) {
-  return B.get(t) ?? pt(t);
+  return O.get(t) ?? vt(t);
 }
 function yt(t) {
-  return I.get(t) ?? ft(t);
+  return B.get(t) ?? ft(t);
 }
 function wt(t) {
   return t.timeZone ? {
     ...t,
-    timeZone: et(t.timeZone)
+    timeZone: tt(t.timeZone)
   } : t;
 }
-const i = (t, e, n) => ({ minorTick: t, majorTick: e, majorTickFormat: n }), s = {
+const i = (t, e) => ({ tick: t, tickFormat: e }), s = {
   sf: { second: "numeric", fractionalSecondDigits: 3 },
   s: { second: "numeric" },
   ms: { minute: "numeric", second: "numeric" },
@@ -52,82 +52,83 @@ const i = (t, e, n) => ({ minorTick: t, majorTick: e, majorTickFormat: n }), s =
   my: { month: "short", year: "numeric" },
   y: { year: "numeric" }
 }, xt = [
-  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)
+  i({ value: 10, unit: "milliseconds" }, s.sf),
+  i({ value: 20, unit: "milliseconds" }, s.sf),
+  i({ value: 50, unit: "milliseconds" }, s.sf),
+  i({ value: 100, unit: "milliseconds" }, s.sf),
+  i({ value: 200, unit: "milliseconds" }, s.sf),
+  i({ value: 500, unit: "milliseconds" }, s.sf),
+  i({ value: 1, unit: "seconds" }, s.s),
+  i({ value: 2, unit: "seconds" }, s.s),
+  i({ value: 5, unit: "seconds" }, s.s),
+  i({ value: 10, unit: "seconds" }, s.s),
+  i({ value: 20, unit: "seconds" }, s.ms),
+  i({ value: 30, unit: "seconds" }, s.ms),
+  i({ value: 1, unit: "minutes" }, s.mi),
+  i({ value: 2, unit: "minutes" }, s.mi),
+  i({ value: 5, unit: "minutes" }, s.mi),
+  i({ value: 10, unit: "minutes" }, s.mi),
+  i({ value: 30, unit: "minutes" }, s.hm),
+  i({ value: 1, unit: "hours" }, s.hm),
+  i({ value: 2, unit: "hours" }, s.hm),
+  i({ value: 4, unit: "hours" }, s.hm),
+  i({ value: 8, unit: "hours" }, s.hm),
+  i({ value: 1, unit: "days" }, s.dm),
+  i({ value: 1, unit: "days" }, s.dm),
+  i({ value: 2, unit: "days" }, s.dm),
+  i({ value: 4, unit: "days" }, s.dm),
+  i({ value: 10, unit: "days" }, s.dm),
+  i({ value: 15, unit: "days" }, s.dm),
+  i({ value: 20, unit: "days" }, s.dm),
+  i({ value: 1, unit: "months" }, s.m),
+  i({ value: 3, unit: "months" }, s.m),
+  i({ value: 6, unit: "months" }, s.my),
+  i({ value: 1, unit: "years" }, s.y),
+  i({ value: 2, unit: "years" }, s.y),
+  i({ value: 4, unit: "years" }, s.y),
+  i({ value: 10, unit: "years" }, s.y),
+  i({ value: 20, unit: "years" }, s.y),
+  i({ value: 50, unit: "years" }, s.y),
+  i({ value: 100, unit: "years" }, s.y),
+  i({ value: 200, unit: "years" }, s.y),
+  i({ value: 500, unit: "years" }, s.y),
+  i({ value: 10, unit: "centuries" }, s.y),
+  i({ value: 20, unit: "centuries" }, s.y),
+  i({ value: 50, unit: "centuries" }, s.y),
+  i({ value: 100, unit: "centuries" }, s.y),
+  i({ value: 200, unit: "centuries" }, s.y),
+  i({ value: 500, unit: "centuries" }, s.y),
+  i({ value: 1e3, unit: "centuries" }, s.y),
+  i({ value: 2e3, unit: "centuries" }, s.y),
+  i({ value: 5e3, unit: "centuries" }, s.y),
+  i({ value: 1e4, unit: "centuries" }, s.y),
+  i({ value: 2e4, unit: "centuries" }, s.y)
 ];
 function _t(t) {
-  return xt.map(({ minorTick: e, majorTick: n, majorTickFormat: a }, u) => {
-    const c = new k(e), f = new k(n), m = c.toMilliseconds(), g = {
-      ...a,
+  return xt.map(({ tick: e, tickFormat: n }) => {
+    const a = new st(e), m = a.toMilliseconds(), h = {
+      ...n,
       timeZone: t
     };
-    return { minor: c, major: f, duration: m, format: g, index: u };
+    return { duration: m, format: h, timeInterval: a };
   });
 }
-var Et = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, N = (t) => {
+var Et = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, I = (t) => {
   throw TypeError(t);
 }, r = (t, e, n, a) => {
-  for (var u = a > 1 ? void 0 : a ? bt(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 && Et(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, T, P;
+  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 && Et(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), _, u, D, $, E, T, P;
 let o = class extends V {
   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 = Y;
+    super(...arguments), A(this, u), A(this, _, new AbortController()), this.disabled = !1, this.format = "date", this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.savePersistedSettingsDisabled = !1, this.stops = U;
   }
-  get _adjustedMajorTickFormat() {
+  get _adjustedTickFormat() {
     const { era: t, timeZone: e } = this;
     return {
-      ...this.majorTickFormat,
-      era: this.majorTickFormat?.year ? t : void 0,
+      ...this.tickFormat,
+      era: this.tickFormat?.year ? t : void 0,
       timeZone: e
     };
   }
@@ -170,18 +171,18 @@ let o = class extends V {
       const { dates: a } = e;
       if (!a?.length)
         return;
-      const u = a.sort((y, d) => y.getTime() - d.getTime());
+      const m = 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) => {
+        return m;
+      const { start: h, end: f } = t, c = h.getTime(), g = f.getTime();
+      return m.filter((y) => {
         const d = y.getTime();
-        return d >= m && d <= g;
+        return d >= c && d <= g;
       });
     }
     const n = e.timeExtent ?? t;
     if (n)
-      return C(e) ? J(n, e.count) : Q(n, e.interval);
+      return C(e) ? Y(n, e.count) : J(n, e.interval);
   }
   get effectiveStopsEpoch() {
     return this.effectiveStops?.map((t) => t.getTime());
@@ -190,29 +191,29 @@ 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 === it);
+    return !(this.disabled || this.state === "disabled" || this.timeZone === et);
   }
   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);
+    const { start: m, end: h } = t ?? {}, f = m != null && (m < n || m > a), c = h != null && (h > a || h < n);
+    return f || c;
   }
   set playRate(t) {
-    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && p(this, h, $).call(this), this._set("playRate", t));
+    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && v(this, u, $).call(this), this._set("playRate", t));
   }
   get state() {
     return this.fullTimeExtent ? this._animationController ? "playing" : "ready" : "disabled";
   }
+  get tickFormatter() {
+    return (t) => this._formatDate(t, this._adjustedTickFormat);
+  }
   get tickFormats() {
     return _t(this.timeZone);
   }
   get timeZone() {
-    return this._userTimeZone ?? this.viewTimeZone ?? st;
+    return this._userTimeZone ?? this.viewTimeZone ?? it;
   }
   set timeZone(t) {
     this._userTimeZone = t ?? void 0;
@@ -223,7 +224,7 @@ let o = class extends V {
   //#endregion
   //#region Public Methods
   destroy() {
-    M(this, _).abort(), this.view?.unregisterComponent(this), p(this, h, T).call(this);
+    M(this, _).abort(), this.view?.unregisterComponent(this), v(this, u, T).call(this);
   }
   formatDate(t) {
     return this._formatDate(t, this._dateFormat);
@@ -241,8 +242,8 @@ let o = class extends V {
     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());
+    const { start: a, end: m } = e;
+    return !a || !m ? [] : Q(a, m, t, n).map((f) => f.getTime());
   }
   async initialize() {
     this.addHandles([
@@ -250,7 +251,7 @@ let o = class extends V {
       w(
         () => this.effectiveStops,
         (t) => {
-          t && (this.timeExtent ??= Z(t, this.mode));
+          t && (this.timeExtent ??= R(t, this.mode));
         },
         { initial: !0 }
       ),
@@ -309,9 +310,9 @@ let o = class extends V {
             }
         }
       )
-    ]), await H(
+    ]), await j(
       (async () => {
-        if (await O(() => this.view?.ready, { signal: M(this, _).signal }), this.loadPersistedSettingsDisabled)
+        if (await Z(() => this.view?.ready, { signal: M(this, _).signal }), this.loadPersistedSettingsDisabled)
           return;
         const t = await nt(
           this.view?.map,
@@ -322,16 +323,16 @@ let o = class extends V {
     );
   }
   next() {
-    p(this, h, E).call(this, { forward: !0, allowRestart: !1 });
+    v(this, u, E).call(this, { forward: !0, allowRestart: !1 });
   }
   play() {
-    p(this, h, $).call(this);
+    v(this, u, $).call(this);
   }
   previous() {
-    p(this, h, E).call(this, { forward: !1, allowRestart: !1 });
+    v(this, u, E).call(this, { forward: !1, allowRestart: !1 });
   }
   stop() {
-    p(this, h, T).call(this);
+    v(this, u, T).call(this);
   }
   updateWebDocument(t) {
     if (this.savePersistedSettingsDisabled)
@@ -343,7 +344,7 @@ let o = class extends V {
       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,
+      stopInterval: X(this.stops) ? this.stops.interval : null,
       stops: F(this.stops) ? this.stops.dates : null
     });
     t.widgets ??= new K(), t.widgets.timeSlider = e;
@@ -357,42 +358,42 @@ let o = class extends V {
   //#endregion
 };
 _ = /* @__PURE__ */ new WeakMap();
-h = /* @__PURE__ */ new WeakSet();
+u = /* @__PURE__ */ new WeakSet();
 D = async function() {
   try {
     const { view: t } = this, e = this._animationController?.signal;
-    await Promise.all([G(this.playRate, e), t && O(() => !t.updating, e)]);
+    await Promise.all([H(this.playRate, e), t && Z(() => !t.updating, e)]);
   } catch (t) {
-    L(t) || at("error", "arcgis-slider-time", "animation error", { detail: { error: t } }), this._animationController = void 0;
+    G(t) || at("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);
+  v(this, u, E).call(this, { forward: !0, allowRestart: !1 }), this._animationController && v(this, u, D).call(this);
 };
 $ = function() {
-  p(this, h, T).call(this), this._animationController = new AbortController(), p(this, h, E).call(this, { forward: !0, allowRestart: !0 }), p(this, h, D).call(this);
+  v(this, u, T).call(this), this._animationController = new AbortController(), v(this, u, E).call(this, { forward: !0, allowRestart: !0 }), v(this, u, 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);
+  const m = n.map((c) => {
+    const g = a.indexOf(c);
     if (g !== -1)
       return g;
     const S = a.reduce(
-      (y, d) => Math.abs(d - m) < Math.abs(y - m) ? d : y
+      (y, d) => Math.abs(d - c) < Math.abs(y - c) ? d : y
     );
     return a.indexOf(S);
-  }), c = u.map((m) => m += t ? 1 : -1);
-  if (c.some((m) => m < 0 || m > a.length - 1))
+  }), h = m.map((c) => c += t ? 1 : -1);
+  if (h.some((c) => c < 0 || c > 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);
+      const c = Math.min(...m), g = Math.max(...m), y = (t ? m.map((d) => d - c) : m.map((d) => d + (a.length - 1 - g))).map((d) => a[d]);
+      this.timeExtent = v(this, u, 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);
+    const c = h.map((g) => a[g]);
+    this.timeExtent = v(this, u, P).call(this, c);
   }
 };
 T = function() {
@@ -402,11 +403,11 @@ P = function(t) {
   if (!t)
     return;
   const e = [...t].sort((n, a) => n - a).map((n) => new Date(n));
-  return Z(e, this.mode);
+  return R(e, this.mode);
 };
 r([
   l()
-], o.prototype, "_adjustedMajorTickFormat", 1);
+], o.prototype, "_adjustedTickFormat", 1);
 r([
   l()
 ], o.prototype, "_animationController", 2);
@@ -458,12 +459,6 @@ r([
 r([
   l()
 ], o.prototype, "loop", 2);
-r([
-  l()
-], o.prototype, "majorTickFormat", 2);
-r([
-  l()
-], o.prototype, "majorTickFormatter", 1);
 r([
   l()
 ], o.prototype, "mode", 2);
@@ -477,8 +472,14 @@ r([
   l()
 ], o.prototype, "state", 1);
 r([
-  l({ cast: U })
+  l({ cast: L })
 ], o.prototype, "stops", 2);
+r([
+  l()
+], o.prototype, "tickFormat", 2);
+r([
+  l()
+], o.prototype, "tickFormatter", 1);
 r([
   l()
 ], o.prototype, "tickFormats", 1);
@@ -497,10 +498,10 @@ r([
 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-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-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 = ct(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 {
   constructor() {
-    super(...arguments), this._viewModel = St(this), this.messages = vt({ name: "time-bar", blocking: !0 }), this.#t = ut(), this.#e = ht(), this.#i = (e) => {
+    super(...arguments), this._viewModel = St(this), this.messages = pt({ name: "time-bar", blocking: !0 }), this.#t = mt(), this.#e = ut(), 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.toolbarKind = "floating", this.view = this._viewModel.view, this.arcgisPropertyChange = dt()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = lt();
   }
@@ -537,15 +538,15 @@ class Mt extends rt {
   willUpdate(e) {
     e.has("messages") && (this._viewModel.locale = this.messages._lang);
   }
-  #m(e) {
+  #c(e) {
     const { currentTarget: n } = e, a = (
       // prioritizes slotted element (if it exists)
-      mt(n).at(0) ?? // fallback to default label
+      ct(n).at(0) ?? // fallback to default label
       n.querySelector("arcgis-time-bar-extent")
     );
     a && (a.viewModel = this._viewModel);
   }
-  async #c() {
+  async #h() {
     switch (this.state) {
       case "disabled":
       case "playing":
@@ -555,30 +556,30 @@ class Mt extends rt {
     }
   }
   render() {
-    return v`<div role=presentation><calcite-action-bar class="action-bar" layout=horizontal expand-disabled .floating=${this.toolbarKind === "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>`;
+    return p`<div role=presentation><calcite-action-bar class="action-bar" layout=horizontal expand-disabled .floating=${this.toolbarKind === "floating"}>${this.#e === "ltr" ? p`${this.#n()}${this.#m()}${this.#l()}${this.#s()}` : p`${this.#l()}${this.#m()}${this.#n()}${this.#s()}`}</calcite-action-bar></div>`;
   }
   #s() {
-    return v`<slot name=actions-end slot=actions-end></slot>`;
+    return p`<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;
+    return this.showPrevious || this.showPlay || this.showNext ? p`<calcite-action-group>${this.#e === "ltr" ? p`${this.#o()}${this.#r()}${this.#a()}` : p`${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;
+    return this.showNext ? p`<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;
+    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.#h} .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;
+    return this.showPrevious ? p`<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=${() => {
+    return this.showSettings ? p`<calcite-action-group><calcite-action .disabled=${!this._viewModel.interactive} .text=${this.messages.settings} icon=sliders-horizontal ${k(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} ${A(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} ${k(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>`;
+  #m() {
+    return p`<calcite-action-group class="time-extent-group"><slot name=time-extent @slotchange=${this.#c}><arcgis-time-bar-extent class="label" .viewModel=${this._viewModel}></arcgis-time-bar-extent></slot></calcite-action-group>`;
   }
 }
 W("arcgis-time-bar", Mt);

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

@@ -40,8 +40,7 @@ export type Stops = StopsByCount | StopsByDates | StopsByInterval;
 export interface TickFormat {
   duration: number;
   format: DateTimeFormatOptions;
-  major: TimeInterval;
-  minor: TimeInterval;
+  timeInterval: TimeInterval;
 }
 
 export type ToolbarKind = "docked" | "floating";

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

@@ -6,6 +6,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 /**
  * The `arcgis-time-bar-slider` component renders a time-based slider intended for use `arcgis-time-bar`'s "time-extent" slot.
  *
+ * @slot [content-end] - A slot that displays ticks at the end of the slider. If not provided, default ticks will be rendered.
  * @slot [max] - A slot that displays a label for the end date of the slider. If not provided, a default label will be rendered.
  * @slot [min] - A slot that displays a label for the start date of the slider. If not provided, a default label will be rendered.
  * @slot [popover] - A slot that displays a popover's content while interacting with the slider's thumb or range. If not provided, a default content will be rendered.