@arcgis/map-components 6.0.0-next.2 → 6.0.0-next.21

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

@@ -1,12 +1,12 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as q } from "../../chunks/runtime.js";
-import { css as H, html as p, nothing as _ } from "lit";
+import { css as H, html as p, nothing as b } from "lit";
 import j from "@arcgis/core/core/Accessor.js";
 import f from "@arcgis/core/time/TimeExtent.js";
 import L from "@arcgis/core/webdoc/widgets/TimeSlider.js";
 import G from "@arcgis/core/webdoc/Widgets.js";
 import { a as U, b as X, i as Y } from "../../chunks/async-utils.js";
-import { c as J, e as K, g as Z, i as O, h as Q, j as tt, k as et, l as N, a as it } from "../../chunks/dateUtils.js";
+import { c as J, e as K, g as Z, i as I, h as Q, j as tt, k as et, l as N, a as it } from "../../chunks/dateUtils.js";
 import { convertDateFormatToIntlOptions as E } from "@arcgis/core/intl.js";
 import { r as st, u as at, s as nt } from "../../chunks/time-utils.js";
 import ot from "@arcgis/core/time/TimeInterval.js";
@@ -14,28 +14,28 @@ import { getTimeSliderSettingsFromWebDocument as rt } from "@arcgis/core/support
 import { log as lt } from "@arcgis/toolkit/log";
 import { property as l, subclass as ct } from "@arcgis/core/core/accessorSupport/decorators.js";
 import { watch as g, whenOnce as B } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as ht, createEvent as mt } from "@arcgis/lumina";
-import { createRef as ut, ref as I } from "lit/directives/ref.js";
+import { LitElement as mt, createEvent as ht } from "@arcgis/lumina";
+import { createRef as ut, ref as O } from "lit/directives/ref.js";
 import { getSlotAssignedElements as dt } from "@arcgis/toolkit/dom/slots";
 import { m as pt } from "../../chunks/useViewModel.js";
 import { useDirection as vt, usePropertyChange as gt } from "@arcgis/lumina/controllers";
 import { u as ft } from "../../chunks/useT9n.js";
 const z = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap();
 function yt(t) {
-  const { locale: e, formatOptions: a } = t, n = _t(a), c = new Intl.DateTimeFormat(e, n);
+  const { locale: e, formatOptions: a } = t, o = bt(a), c = new Intl.DateTimeFormat(e, o);
   return z.set(t, c), c;
 }
 function wt(t) {
-  const { locale: e, formatOptions: a } = t, n = new Intl.NumberFormat(e, a);
-  return W.set(t, n), n;
+  const { locale: e, formatOptions: a } = t, o = new Intl.NumberFormat(e, a);
+  return W.set(t, o), o;
 }
 function xt(t) {
   return z.get(t) ?? yt(t);
 }
-function bt(t) {
+function _t(t) {
   return W.get(t) ?? wt(t);
 }
-function _t(t) {
+function bt(t) {
   return t.timeZone ? {
     ...t,
     timeZone: st(t.timeZone)
@@ -106,29 +106,29 @@ const i = (t, e) => ({ tick: t, tickFormat: e }), s = {
 ];
 function Tt(t) {
   return Et.map(({ tick: e, tickFormat: a }) => {
-    const n = new ot(e), c = n.toMilliseconds(), h = {
+    const o = new ot(e), c = o.toMilliseconds(), m = {
       ...a,
       timeZone: t
     };
-    return { duration: c, format: h, timeInterval: n };
+    return { duration: c, format: m, timeInterval: o };
   });
 }
 var St = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, V = (t) => {
   throw TypeError(t);
-}, r = (t, e, a, n) => {
-  for (var c = n > 1 ? void 0 : n ? Mt(e, a) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (c = (n ? u(e, a, c) : u(c)) || c);
-  return n && c && St(e, a, c), c;
-}, R = (t, e, a) => e.has(t) || V("Cannot " + a), T = (t, e, a) => (R(t, e, "read from private field"), a ? a.call(t) : e.get(t)), D = (t, e, a) => e.has(t) ? V("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), $t = (t, e, a, n) => (R(t, e, "write to private field"), e.set(t, a), a), d = (t, e, a) => (R(t, e, "access private method"), a), w, S, m, P, k, A, F, x, M, C;
-let o = class extends j {
+}, r = (t, e, a, o) => {
+  for (var c = o > 1 ? void 0 : o ? Mt(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 && St(e, a, c), c;
+}, R = (t, e, a) => e.has(t) || V("Cannot " + a), T = (t, e, a) => (R(t, e, "read from private field"), a ? a.call(t) : e.get(t)), D = (t, e, a) => e.has(t) ? V("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), $t = (t, e, a, o) => (R(t, e, "write to private field"), e.set(t, a), a), d = (t, e, a) => (R(t, e, "access private method"), a), w, S, h, P, k, F, A, x, M, C;
+let n = class extends j {
   constructor() {
-    super(...arguments), D(this, m), D(this, w, new AbortController()), D(this, S, !1), this.disabled = !1, this.format = "date", this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.reverseAnimation = !1, this.savePersistedSettingsDisabled = !1, this.stops = K;
+    super(...arguments), D(this, h), D(this, w, new AbortController()), D(this, S, !1), this.disabled = !1, this.format = "date", this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.reverseAnimation = !1, this.savePersistedSettingsDisabled = !1, this.stops = K;
   }
   get _adjustedTickFormat() {
     const { era: t, timeZone: e } = this;
     return {
-      ...this.tickFormat,
-      era: this.tickFormat?.year ? t : void 0,
+      ...this.tickFormat?.format,
+      era: this.tickFormat?.format.year ? t : void 0,
       timeZone: e
     };
   }
@@ -162,11 +162,11 @@ let o = class extends j {
   get _thumbStopIndices() {
     const { _thumbPositions: t, effectiveStopsEpoch: e } = this;
     return !t || !e ? null : t.map((a) => {
-      const n = e.indexOf(a);
-      if (n !== -1)
-        return n;
+      const o = e.indexOf(a);
+      if (o !== -1)
+        return o;
       const c = e.reduce(
-        (h, u) => Math.abs(u - a) < Math.abs(h - a) ? u : h
+        (m, u) => Math.abs(u - a) < Math.abs(m - a) ? u : m
       );
       return e.indexOf(c);
     });
@@ -176,31 +176,31 @@ let o = class extends j {
     return { ...E("long-time"), timeZone: t };
   }
   get canPrevious() {
-    return this._thumbStopIndices?.map((t) => --t).every((t) => d(this, m, A).call(this, t)) ?? !1;
+    return this._thumbStopIndices?.map((t) => --t).every((t) => d(this, h, F).call(this, t)) ?? !1;
   }
   get canNext() {
-    return this._thumbStopIndices?.map((t) => ++t).every((t) => d(this, m, A).call(this, t)) ?? !1;
+    return this._thumbStopIndices?.map((t) => ++t).every((t) => d(this, h, F).call(this, t)) ?? !1;
   }
   get effectiveStops() {
     const { fullTimeExtent: t, stops: e } = this;
     if (!e)
       return;
     if (Z(e)) {
-      const { dates: n } = e;
-      if (!n?.length)
+      const { dates: o } = e;
+      if (!o?.length)
         return;
-      const c = n.sort(($, b) => $.getTime() - b.getTime());
+      const c = o.sort(($, _) => $.getTime() - _.getTime());
       if (!t?.start || !t?.end)
         return c;
-      const { start: h, end: u } = t, y = h.getTime(), v = u.getTime();
+      const { start: m, end: u } = t, y = m.getTime(), v = u.getTime();
       return c.filter(($) => {
-        const b = $.getTime();
-        return b >= y && b <= v;
+        const _ = $.getTime();
+        return _ >= y && _ <= v;
       });
     }
     const a = e.timeExtent ?? t;
     if (a)
-      return O(e) ? Q(a, e.count) : tt(a, e.interval);
+      return I(e) ? Q(a, e.count) : tt(a, e.interval);
   }
   get effectiveStopsEpoch() {
     return this.effectiveStops?.map((t) => t.getTime());
@@ -212,14 +212,14 @@ let o = class extends j {
     return !(this.disabled || this.state === "disabled" || this.timeZone === at);
   }
   get isOutOfRange() {
-    const { timeExtent: t, fullTimeExtent: e } = this, { start: a, end: n } = e ?? {};
-    if (!a || !n || !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: c, end: h } = t ?? {}, u = c != null && (c < a || c > n), y = h != null && (h > n || h < a);
+    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" && d(this, m, F).call(this), this._set("playRate", t));
+    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && d(this, h, A).call(this), this._set("playRate", t));
   }
   get state() {
     return this.fullTimeExtent ? this._animationController ? "playing" : "ready" : "disabled";
@@ -230,6 +230,13 @@ let o = class extends j {
   get tickFormats() {
     return Tt(this.timeZone);
   }
+  get tickValues() {
+    const { fullTimeExtent: t, tickFormat: e, timeZone: a } = this;
+    if (!t || !e)
+      return [];
+    const { start: o, end: c } = t;
+    return !o || !c ? [] : et(o, c, e.timeInterval, a).map((u) => u.getTime());
+  }
   get timeZone() {
     return this._userTimeZone ?? this.viewTimeZone ?? nt;
   }
@@ -242,7 +249,7 @@ let o = class extends j {
   //#endregion
   //#region Public Methods
   destroy() {
-    T(this, w).abort(), this.view?.unregisterComponent(this), d(this, m, M).call(this);
+    T(this, w).abort(), this.view?.unregisterComponent(this), d(this, h, M).call(this);
   }
   formatDate(t) {
     return this._formatDate(t, this._dateFormat);
@@ -256,13 +263,6 @@ let o = class extends j {
   formatTime(t) {
     return this._formatDate(t, this._timeFormat);
   }
-  getTickValues(t) {
-    const { fullTimeExtent: e, timeZone: a } = this;
-    if (!e)
-      return [];
-    const { start: n, end: c } = e;
-    return !n || !c ? [] : et(n, 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. */
@@ -347,16 +347,16 @@ let o = class extends j {
     );
   }
   next() {
-    d(this, m, x).call(this, { forward: !0, allowRestart: !1 });
+    d(this, h, x).call(this, { forward: !0, allowRestart: !1 });
   }
   play() {
-    d(this, m, F).call(this);
+    d(this, h, A).call(this);
   }
   previous() {
-    d(this, m, x).call(this, { forward: !1, allowRestart: !1 });
+    d(this, h, x).call(this, { forward: !1, allowRestart: !1 });
   }
   stop() {
-    d(this, m, M).call(this);
+    d(this, h, M).call(this);
   }
   updateWebDocument(t) {
     if (this.savePersistedSettingsDisabled)
@@ -365,7 +365,7 @@ let o = class extends j {
       currentTimeExtent: this.timeExtent,
       fullTimeExtent: this.fullTimeExtent,
       loop: this.loop,
-      numStops: O(this.stops) ? this.stops.count : null,
+      numStops: I(this.stops) ? this.stops.count : null,
       numThumbs: this.mode === "time-window" ? 2 : 1,
       stopDelay: this.playRate,
       stopInterval: it(this.stops) ? this.stops.interval : null,
@@ -377,13 +377,13 @@ let o = class extends j {
     return xt({ locale: this.locale, formatOptions: e }).format(t);
   }
   _formatNumber(t, e) {
-    return bt({ locale: this.locale, formatOptions: e }).format(t);
+    return _t({ locale: this.locale, formatOptions: e }).format(t);
   }
   //#endregion
 };
 w = /* @__PURE__ */ new WeakMap();
 S = /* @__PURE__ */ new WeakMap();
-m = /* @__PURE__ */ new WeakSet();
+h = /* @__PURE__ */ new WeakSet();
 P = async function() {
   try {
     const { view: t } = this, e = this._animationController?.signal;
@@ -392,26 +392,26 @@ P = async function() {
     Y(t) || lt("error", "arcgis-slider-time", "animation error", { detail: { error: t } }), this._animationController = void 0;
     return;
   }
-  d(this, m, x).call(this, { forward: !this.reverseAnimation, allowRestart: !1 }), this._animationController && d(this, m, P).call(this);
+  d(this, h, x).call(this, { forward: !this.reverseAnimation, allowRestart: !1 }), this._animationController && d(this, h, P).call(this);
 };
 k = function(t) {
   return t ? this.canNext : this.canPrevious;
 };
-A = function(t) {
+F = function(t) {
   return t >= 0 && t < (this.effectiveStopsEpoch?.length ?? 0);
 };
-F = function() {
-  d(this, m, M).call(this), this._animationController = new AbortController(), d(this, m, x).call(this, { forward: !this.reverseAnimation, allowRestart: !0 }), d(this, m, P).call(this);
+A = function() {
+  d(this, h, M).call(this), this._animationController = new AbortController(), d(this, h, x).call(this, { forward: !this.reverseAnimation, allowRestart: !0 }), d(this, h, P).call(this);
 };
 x = function({ forward: t, allowRestart: e }) {
-  const { _thumbStopIndices: a, effectiveStopsEpoch: n } = this;
-  if (!(!a || !n))
-    if (d(this, m, k).call(this, t)) {
-      const h = a.map((u) => u + (t ? 1 : -1)).map((u) => n[u]);
-      this.timeExtent = d(this, m, C).call(this, h), !this.loop && !d(this, m, k).call(this, t) && this.stop();
+  const { _thumbStopIndices: a, effectiveStopsEpoch: o } = this;
+  if (!(!a || !o))
+    if (d(this, h, k).call(this, t)) {
+      const m = a.map((u) => u + (t ? 1 : -1)).map((u) => o[u]);
+      this.timeExtent = d(this, h, C).call(this, m), !this.loop && !d(this, h, k).call(this, t) && this.stop();
     } else if (this.loop || e) {
-      const c = Math.min(...a), h = Math.max(...a), y = (t ? a.map((v) => v - c) : a.map((v) => v + (n.length - 1 - h))).map((v) => n[v]);
-      this.timeExtent = d(this, m, C).call(this, y);
+      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, C).call(this, y);
     } else
       this.stop();
 };
@@ -421,120 +421,123 @@ M = function() {
 C = function(t) {
   if (!t)
     return;
-  const e = [...t].sort((a, n) => a - n).map((a) => new Date(a));
+  const e = [...t].sort((a, o) => a - o).map((a) => new Date(a));
   return N(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, "_thumbStopIndices", 1);
+], n.prototype, "_thumbStopIndices", 1);
 r([
   l()
-], o.prototype, "_timeFormat", 1);
+], n.prototype, "_timeFormat", 1);
 r([
   l()
-], o.prototype, "_userTimeZone", 2);
+], n.prototype, "_userTimeZone", 2);
 r([
   l()
-], o.prototype, "canPrevious", 1);
+], n.prototype, "canPrevious", 1);
 r([
   l()
-], o.prototype, "canNext", 1);
+], n.prototype, "canNext", 1);
 r([
   l()
-], o.prototype, "disabled", 2);
+], n.prototype, "disabled", 2);
 r([
   l()
-], o.prototype, "effectiveStops", 1);
+], n.prototype, "effectiveStops", 1);
 r([
   l()
-], o.prototype, "effectiveStopsEpoch", 1);
+], n.prototype, "effectiveStopsEpoch", 1);
 r([
   l()
-], o.prototype, "era", 1);
+], n.prototype, "era", 1);
 r([
   l()
-], o.prototype, "format", 2);
+], n.prototype, "format", 2);
 r([
   l({ type: f })
-], o.prototype, "fullTimeExtent", 2);
+], n.prototype, "fullTimeExtent", 2);
 r([
   l()
-], o.prototype, "interactive", 1);
+], n.prototype, "interactive", 1);
 r([
   l()
-], o.prototype, "isOutOfRange", 1);
+], 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()
-], o.prototype, "reverseAnimation", 2);
+], 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: J })
-], o.prototype, "stops", 2);
+], 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()
+], n.prototype, "tickValues", 1);
 r([
   l({ type: f })
-], o.prototype, "timeExtent", 2);
+], 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([
+], n.prototype, "viewTimeZone", 1);
+n = r([
   ct("components.time-bar.TimeBarViewModel")
-], o);
-const Dt = H`: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-view-corner-radius: var(--arcgis-view-corner-radius, 0px);--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))}`, Pt = pt(o);
-class kt extends ht {
+], n);
+const Dt = H`: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))}`, Pt = pt(n);
+class kt extends mt {
   constructor() {
-    super(...arguments), this._viewModel = Pt(this), this.messages = ft({ name: "time-bar", blocking: !0 }), this.#t = ut(), this.#e = vt(), this.#i = (e) => {
+    super(...arguments), this._direction = vt(), this._viewModel = Pt(this), this.messages = ft({ name: "time-bar", blocking: !0 }), this.#t = ut(), this.#e = (e) => {
       this._settingsActionElement = e;
-    }, 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 = gt()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = mt();
+    }, 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 = gt()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = ht();
   }
   static {
     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 };
@@ -544,7 +547,6 @@ class kt extends ht {
   }
   #t;
   #e;
-  #i;
   async applyTimeSettings(e) {
     this._viewModel.set(e);
   }
@@ -570,14 +572,14 @@ class kt extends ht {
     e.has("messages") && (this._viewModel.locale = this.messages._lang);
   }
   #m(e) {
-    const { currentTarget: a } = e, n = (
+    const { currentTarget: a } = e, o = (
       // prioritizes slotted element (if it exists)
       dt(a).at(0) ?? // fallback to default label
       a.querySelector("arcgis-time-bar-extent")
     );
-    n && (n.messages = this.messages, n.viewModel = this._viewModel);
+    o && (o.messages = this.messages, o.viewModel = this._viewModel);
   }
-  async #u() {
+  async #h() {
     switch (this.state) {
       case "disabled":
       case "playing":
@@ -587,32 +589,32 @@ class kt extends ht {
     }
   }
   render() {
-    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.#h()}${this.#c()}${this.#a()}` : p`${this.#s()}${this.#c()}${this.#h()}${this.#n()}${this.#a()}`}</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._direction === "ltr" ? p`${this.#i()}${this.#a()}${this.#c()}${this.#l()}${this.#s()}` : p`${this.#i()}${this.#l()}${this.#c()}${this.#a()}${this.#s()}`}</calcite-action-bar></div>`;
   }
-  #s() {
+  #i() {
     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() {
+  #s() {
     return p`<slot name=actions-end slot=actions-end></slot>`;
   }
+  #a() {
+    return this.showPrevious || this.showPlay || this.showNext ? p`<calcite-action-group>${this._direction === "ltr" ? p`${this.#o()}${this.#r()}${this.#n()}` : p`${this.#n()}${this.#r()}${this.#o()}`}</calcite-action-group>` : null;
+  }
   #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;
+    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 ?? b}></calcite-action>` : null;
   }
   #o() {
-    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;
+    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} title=${(this.state === "playing" ? this.messages.stop : this.messages.play) ?? b}></calcite-action>` : null;
   }
   #r() {
-    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;
+    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 ?? b}></calcite-action>` : null;
   }
   #l() {
-    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;
-  }
-  #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 ?? _} ${I(this.#i)}></calcite-action>${this._settingsActionElement ? p`<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 title=${this.messages.settings ?? b} ${O(this.#e)}></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 .autoDestroyDisabled=${this.autoDestroyDisabled} class="settings" .messages=${this.messages} .viewModel=${this._viewModel} ${I(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 .autoDestroyDisabled=${this.autoDestroyDisabled} class="settings" .messages=${this.messages} .viewModel=${this._viewModel} ${O(this.#t)}></arcgis-time-bar-settings></slot></calcite-popover>` : void 0}</calcite-action-group>` : null;
   }
-  #h() {
+  #c() {
     return this.showTimeExtent ? p`<calcite-action-group class="time-extent-group"><slot name=time-extent @slotchange=${this.#m}><arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} class="label" .messages=${this.messages} .viewModel=${this._viewModel}></arcgis-time-bar-extent></slot></calcite-action-group>` : null;
   }
 }

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

@@ -1,9 +1,9 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/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 o = 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 d extends c {
+import { css as c, html as s } from "lit";
+import { LitElement as o, safeClassMap as r } from "@arcgis/lumina";
+const d = c`: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 m extends o {
   constructor() {
     super(...arguments), this.align = "center", this.autoDestroyDisabled = !1;
   }
@@ -11,7 +11,7 @@ class d extends c {
     this.properties = { align: 1, autoDestroyDisabled: 5, date: 0, viewModel: 0 };
   }
   static {
-    this.styles = o;
+    this.styles = d;
   }
   async destroy() {
     await this.manager.destroy();
@@ -20,16 +20,16 @@ class d extends c {
     const { align: a, date: e, viewModel: t } = this;
     if (!t || !e)
       return null;
-    const { disabled: s } = t;
+    const { interactive: n } = t, i = !n;
     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>`;
+        return s`<div class=${r({ "table-date": !0, [`align-${a}`]: !0, disabled: i })}><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>`;
+        return s`<div class=${r({ "table-date-time": !0, [`align-${a}`]: !0, disabled: i })}><span class="date">${t.formatDate(e)}</span><span class="time">${t.formatTime(e)}</span></div>`;
     }
   }
 }
-l("arcgis-time-bar-date", d);
+l("arcgis-time-bar-date", m);
 export {
-  d as ArcgisTimeBarDate
+  m as ArcgisTimeBarDate
 };

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

@@ -1,9 +1,9 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as o, html as a } from "lit";
-import { LitElement as d, safeClassMap as l } from "@arcgis/lumina";
-const m = o`:host{background-color:var(--calcite-color-surface-2);block-size:max-content;color:var(--calcite-color-text-1);display:inline-grid;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:max-content;place-items:center}.dash{justify-self:center;border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-text-1);width:50%}.disabled{opacity:var(--calcite-opacity-disabled)}.end{justify-self:start}.start{justify-self:end}.table-cumulative,.table-extent,.table-instant{align-content:center;align-items:center;display:grid;grid-template-rows:1fr}.table-cumulative{grid-template-columns:max-content var(--calcite-spacing-fixed-sm) max-content}.table-extent{grid-template-columns:1fr var(--calcite-spacing-fixed-xxl) 1fr}.table-instant{grid-template-columns:1fr}.text{color:var(--calcite-color-text-3)}`;
-class u extends d {
+import { c as o } from "../../chunks/runtime.js";
+import { css as d, html as a } from "lit";
+import { LitElement as m, safeClassMap as l } from "@arcgis/lumina";
+const u = d`:host{background-color:var(--calcite-color-surface-2);block-size:max-content;color:var(--calcite-color-text-1);display:inline-grid;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:max-content;place-items:center}.dash{justify-self:center;border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-text-1);width:50%}.disabled{opacity:var(--calcite-opacity-disabled)}.end{justify-self:start}.start{justify-self:end}.table-cumulative,.table-extent,.table-instant{align-content:center;align-items:center;display:grid;grid-template-rows:1fr}.table-cumulative{grid-template-columns:max-content var(--calcite-spacing-fixed-sm) max-content}.table-extent{grid-template-columns:1fr var(--calcite-spacing-fixed-xxl) 1fr}.table-instant{grid-template-columns:1fr}.text{color:var(--calcite-color-text-3)}`;
+class b extends m {
   constructor() {
     super(...arguments), this.autoDestroyDisabled = !1;
   }
@@ -11,7 +11,7 @@ class u extends d {
     this.properties = { autoDestroyDisabled: 5, messages: 0, viewModel: 0 };
   }
   static {
-    this.styles = m;
+    this.styles = u;
   }
   async destroy() {
     await this.manager.destroy();
@@ -20,7 +20,7 @@ class u extends d {
     const { messages: s, viewModel: t } = this;
     if (!s || !t)
       return null;
-    const { disabled: i, timeExtent: c } = t;
+    const { interactive: n, timeExtent: c } = t, i = !n;
     if (!c || c.isAllTime)
       return a`<div class="table-instant"><span class=${l({ disabled: i, text: !0 })}>${s.noTimeExtent}</span></div>`;
     if (c.isEmpty)
@@ -29,7 +29,7 @@ class u extends d {
     return e && r ? e.getTime() === r.getTime() ? a`<div class="table-instant"><arcgis-time-bar-date align=center .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : a`<div class="table-extent"><arcgis-time-bar-date align=end .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date><div class=${l({ dash: !0, disabled: i })}></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : e ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.from}</span><div></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : r ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.through}</span><div></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : null;
   }
 }
-n("arcgis-time-bar-extent", u);
+o("arcgis-time-bar-extent", b);
 export {
-  u as ArcgisTimeBarExtent
+  b as ArcgisTimeBarExtent
 };

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

@@ -274,4 +274,12 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
   accessor viewModel: TimeBarViewModel | undefined;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "activeValue" | "lockTimeWindow"; }>;
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisTimeBarSlider["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisTimeBarSlider["arcgisReady"]["detail"];
+  };
 }