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

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

@@ -38,7 +38,13 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * buttons displayed and the fallback label displayed in the `time-extent` slot.
  * ```html
  * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
- *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right"></arcgis-time-bar>
+ *   <arcgis-time-bar
+ *     show-play
+ *     show-next
+ *     show-previous
+ *     show-time-extent
+ *     slot="top-right">
+ *   </arcgis-time-bar>
  * </arcgis-map>
  * ```
  * ```js
@@ -65,8 +71,16 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * An alternative to the default label is to use a `<arcgis-time-bar-slider>` component in the `time-extent` slot.
  * ```html
  * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
- *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right">
- *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
+ *   <arcgis-time-bar
+ *     show-play
+ *     show-next
+ *     show-previous
+ *     show-time-extent
+ *     slot="top-right">
+ *     <arcgis-time-bar-slider
+ *       slot="time-extent"
+ *     >
+ *     </arcgis-time-bar-slider>
  *   </arcgis-time-bar>
  * </arcgis-map>
  * ```
@@ -126,7 +140,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * @example
    * ```html
    * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
-   *   <arcgis-time-bar slot="top-right" disabled></arcgis-time-bar>
+   *   <arcgis-time-bar show-time-extent slot="top-right" disabled></arcgis-time-bar>
    * </arcgis-map>
    * ```
    * ```js
@@ -174,7 +188,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * @example
    * ```html
    * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
-   *   <arcgis-time-bar slot="top-right" format="date-time"></arcgis-time-bar>
+   *   <arcgis-time-bar show-time-extent slot="top-right" format="date-time"></arcgis-time-bar>
    * </arcgis-map>
    * ```
    */
@@ -186,7 +200,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * @example
    * ```html
    * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
-   *   <arcgis-time-bar slot="top-right">
+   *   <arcgis-time-bar show-time-extent slot="top-right" >
    *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
    *   </arcgis-time-bar>
    * </arcgis-map>
@@ -233,7 +247,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * Disable loading persisted settings from the associated view's web document.
    * ```html
    * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
-   *   <arcgis-time-bar slot="top-right" loadPersistedSettingsDisabled></arcgis-time-bar>
+   *   <arcgis-time-bar slot="top-right" load-persisted-settings-disabled></arcgis-time-bar>
    * </arcgis-map>
    * ```
    */
@@ -302,6 +316,7 @@ export abstract class ArcgisTimeBar extends LitElement {
       stopsDescription?: string | undefined;
       time?: string | undefined;
       timeBarSettings?: string | undefined;
+      timeExtent?: string | undefined;
       timeUnitOptions?: {
           day?: string | undefined;
           hour?: string | undefined;
@@ -365,6 +380,7 @@ export abstract class ArcgisTimeBar extends LitElement {
       stopsDescription: string;
       time: string;
       timeBarSettings: string;
+      timeExtent: string;
       timeUnitOptions: {
           day: string;
           hour: string;
@@ -426,6 +442,7 @@ export abstract class ArcgisTimeBar extends LitElement {
       stopsDescription: string;
       time: string;
       timeBarSettings: string;
+      timeExtent: string;
       timeUnitOptions: {
           day: string;
           hour: string;
@@ -489,7 +506,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * Disable saving persisted settings to the associated view's web document.
    * ```html
    * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
-   *   <arcgis-time-bar slot="top-right" savePersistedSettingsDisabled></arcgis-time-bar>
+   *   <arcgis-time-bar slot="top-right" save-persisted-settings-disabled></arcgis-time-bar>
    * </arcgis-map>
    * ```
    */
@@ -505,7 +522,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * Add a `arcgis-time-bar` to a map with the *next* button displayed.
    * ```html
    * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
-   *   <arcgis-time-bar slot="top-right" showNext></arcgis-time-bar>
+   *   <arcgis-time-bar slot="top-right" show-next></arcgis-time-bar>
    * </arcgis-map>
    * ```
    * @see [next()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#next)
@@ -521,7 +538,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * Add a `arcgis-time-bar` to a map with the *play* button displayed.
    * ```html
    * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
-   *   <arcgis-time-bar slot="top-right" showPlay></arcgis-time-bar>
+   *   <arcgis-time-bar slot="top-right" show-play></arcgis-time-bar>
    * </arcgis-map>
    * ```
    * @see [play()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#play)
@@ -538,7 +555,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * Add a `arcgis-time-bar` to a map with the *previous* button displayed.
    * ```html
    * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
-   *   <arcgis-time-bar slot="top-right" showPrevious></arcgis-time-bar>
+   *   <arcgis-time-bar slot="top-right" show-previous></arcgis-time-bar>
    * </arcgis-map>
    * ```
    * @see [previous()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#previous)
@@ -554,11 +571,25 @@ export abstract class ArcgisTimeBar extends LitElement {
    * Add a `arcgis-time-bar` to a map with the *settings* button displayed.
    * ```html
    * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
-   *   <arcgis-time-bar slot="top-right" showSettings></arcgis-time-bar>
+   *   <arcgis-time-bar slot="top-right" show-settings></arcgis-time-bar>
    * </arcgis-map>
    * ```
    */
   accessor showSettings: boolean;
+  /**
+   * When `true`, the `arcgis-time-bar` will display the time extent.
+   * To customize the display of the time extent, use the `time-extent` slot with the `arcgis-time-bar-slider` component.
+   *
+   * @default false
+   * @example
+   * Add a `arcgis-time-bar` to a map with the time extent displayed.
+   * ```html
+   * <arcgis-map item-id="3542f60d24484cb0af84f1a346607722">
+   *   <arcgis-time-bar slot="top-right" show-time-extent></arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   */
+  accessor showTimeExtent: boolean;
   /**
    * The current state of the component.
    *
@@ -566,7 +597,7 @@ export abstract class ArcgisTimeBar extends LitElement {
    * The following snippet will log the `arcgis-time-bar`'s state to the console whenever it changes.
    * ```html
    * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
-   *   <arcgis-time-bar slot="top-right">
+   *   <arcgis-time-bar slot="top-right" show-time-extent>
    *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
    *   </arcgis-time-bar>
    * </arcgis-map>
@@ -623,10 +654,10 @@ export abstract class ArcgisTimeBar extends LitElement {
    * To allow thumbs to be manipulated continuously without snapping to specific dates, set `stops` to `null`:
    * ```js
    * <script type="module">
-   *   const timeSliderElement = document.querySelector("arcgis-slider-time");
-   *   await timeSliderElement.componentOnReady();
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *   await timeBarElement.componentOnReady();
    *
-   *   timeSliderElement.stops = null;
+   *   timeBarElement.stops = null;
    * </script>
    * ```
    * @example

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

@@ -1,12 +1,12 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as W } from "../../chunks/runtime.js";
-import { css as z, html as p } from "lit";
+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 K from "@arcgis/core/webdoc/Widgets.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 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";
@@ -104,7 +104,7 @@ const i = (t, e) => ({ tick: t, tickFormat: e }), s = {
   i({ value: 1e4, unit: "centuries" }, s.y),
   i({ value: 2e4, unit: "centuries" }, s.y)
 ];
-function _t(t) {
+function Et(t) {
   return xt.map(({ tick: e, tickFormat: n }) => {
     const a = new st(e), m = a.toMilliseconds(), h = {
       ...n,
@@ -113,16 +113,16 @@ function _t(t) {
     return { duration: m, format: h, timeInterval: a };
   });
 }
-var Et = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, I = (t) => {
+var _t = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, I = (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 && 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;
+  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 {
   constructor() {
-    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;
+    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;
   }
   get _adjustedTickFormat() {
     const { era: t, timeZone: e } = this;
@@ -171,13 +171,13 @@ let o = class extends V {
       const { dates: a } = e;
       if (!a?.length)
         return;
-      const m = a.sort((y, d) => y.getTime() - d.getTime());
+      const m = a.sort((y, p) => y.getTime() - p.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 d = y.getTime();
-        return d >= c && d <= g;
+        const p = y.getTime();
+        return p >= c && p <= g;
       });
     }
     const n = e.timeExtent ?? t;
@@ -201,7 +201,7 @@ let o = class extends V {
     return f || c;
   }
   set playRate(t) {
-    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && v(this, u, $).call(this), this._set("playRate", t));
+    t <= 0 || t > 1e3 * 60 * 60 || (this.state === "playing" && v(this, u, D).call(this), this._set("playRate", t));
   }
   get state() {
     return this.fullTimeExtent ? this._animationController ? "playing" : "ready" : "disabled";
@@ -210,7 +210,7 @@ let o = class extends V {
     return (t) => this._formatDate(t, this._adjustedTickFormat);
   }
   get tickFormats() {
-    return _t(this.timeZone);
+    return Et(this.timeZone);
   }
   get timeZone() {
     return this._userTimeZone ?? this.viewTimeZone ?? it;
@@ -224,7 +224,7 @@ let o = class extends V {
   //#endregion
   //#region Public Methods
   destroy() {
-    M(this, _).abort(), this.view?.unregisterComponent(this), v(this, u, T).call(this);
+    M(this, E).abort(), this.view?.unregisterComponent(this), v(this, u, T).call(this);
   }
   formatDate(t) {
     return this._formatDate(t, this._dateFormat);
@@ -310,26 +310,26 @@ let o = class extends V {
             }
         }
       )
-    ]), await j(
+    ]), await K(
       (async () => {
-        if (await Z(() => this.view?.ready, { signal: M(this, _).signal }), this.loadPersistedSettingsDisabled)
+        if (await Z(() => this.view?.ready, { signal: M(this, E).signal }), this.loadPersistedSettingsDisabled)
           return;
         const t = await nt(
           this.view?.map,
-          M(this, _).signal
+          M(this, E).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, E).call(this, { forward: !0, allowRestart: !1 });
+    v(this, u, _).call(this, { forward: !0, allowRestart: !1 });
   }
   play() {
-    v(this, u, $).call(this);
+    v(this, u, D).call(this);
   }
   previous() {
-    v(this, u, E).call(this, { forward: !1, allowRestart: !1 });
+    v(this, u, _).call(this, { forward: !1, allowRestart: !1 });
   }
   stop() {
     v(this, u, T).call(this);
@@ -347,7 +347,7 @@ let o = class extends V {
       stopInterval: X(this.stops) ? this.stops.interval : null,
       stops: F(this.stops) ? this.stops.dates : null
     });
-    t.widgets ??= new K(), t.widgets.timeSlider = e;
+    t.widgets ??= new H(), t.widgets.timeSlider = e;
   }
   _formatDate(t, e) {
     return gt({ locale: this.locale, formatOptions: e }).format(t);
@@ -357,22 +357,22 @@ let o = class extends V {
   }
   //#endregion
 };
-_ = /* @__PURE__ */ new WeakMap();
+E = /* @__PURE__ */ new WeakMap();
 u = /* @__PURE__ */ new WeakSet();
-D = async function() {
+$ = async function() {
   try {
     const { view: t } = this, e = this._animationController?.signal;
-    await Promise.all([H(this.playRate, e), t && Z(() => !t.updating, e)]);
+    await Promise.all([j(this.playRate, e), t && Z(() => !t.updating, e)]);
   } catch (t) {
-    G(t) || at("error", "arcgis-slider-time", "animation error", { detail: { error: t } }), this._animationController = void 0;
+    L(t) || at("error", "arcgis-slider-time", "animation error", { detail: { error: t } }), this._animationController = void 0;
     return;
   }
-  v(this, u, E).call(this, { forward: !0, allowRestart: !1 }), this._animationController && v(this, u, D).call(this);
+  v(this, u, _).call(this, { forward: !0, allowRestart: !1 }), this._animationController && v(this, u, $).call(this);
 };
-$ = function() {
-  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);
+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);
 };
-E = function({ forward: t, allowRestart: e }) {
+_ = function({ forward: t, allowRestart: e }) {
   const { _thumbPositions: n, effectiveStopsEpoch: a } = this;
   if (!n || !a)
     return;
@@ -381,13 +381,13 @@ E = function({ forward: t, allowRestart: e }) {
     if (g !== -1)
       return g;
     const S = a.reduce(
-      (y, d) => Math.abs(d - c) < Math.abs(y - c) ? d : y
+      (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((d) => d - c) : m.map((d) => d + (a.length - 1 - g))).map((d) => a[d]);
+      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);
     } else
       this.state === "playing" && this.stop();
@@ -472,7 +472,7 @@ r([
   l()
 ], o.prototype, "state", 1);
 r([
-  l({ cast: L })
+  l({ cast: G })
 ], o.prototype, "stops", 2);
 r([
   l()
@@ -503,10 +503,10 @@ class Mt extends rt {
   constructor() {
     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();
+    }, 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();
   }
   static {
-    this.properties = { _settingsActionElement: 16, autoDestroyDisabled: 5, disabled: 5, effectiveStops: 32, format: 1, fullTimeExtent: 0, icon: 1, label: 1, loadPersistedSettingsDisabled: 5, loop: 5, messageOverrides: 0, mode: 1, playRate: 9, referenceElement: 1, savePersistedSettingsDisabled: 5, showNext: 5, showPlay: 5, showPrevious: 5, showSettings: 5, state: 32, stops: 0, timeExtent: 0, timeZone: 1, toolbarKind: 1, view: 0 };
+    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 };
   }
   static {
     this.styles = Tt;
@@ -538,15 +538,15 @@ class Mt extends rt {
   willUpdate(e) {
     e.has("messages") && (this._viewModel.locale = this.messages._lang);
   }
-  #c(e) {
+  #h(e) {
     const { currentTarget: n } = e, a = (
       // prioritizes slotted element (if it exists)
       ct(n).at(0) ?? // fallback to default label
       n.querySelector("arcgis-time-bar-extent")
     );
-    a && (a.viewModel = this._viewModel);
+    a && (a.messages = this.messages, a.viewModel = this._viewModel);
   }
-  async #h() {
+  async #u() {
     switch (this.state) {
       case "disabled":
       case "playing":
@@ -556,30 +556,33 @@ class Mt extends rt {
     }
   }
   render() {
-    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>`;
+    return d`<div role=presentation><calcite-action-bar class="action-bar" layout=horizontal expand-disabled .floating=${this.toolbarKind === "floating"} overflow-actions-disabled>${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>`;
   }
   #s() {
-    return p`<slot name=actions-end slot=actions-end></slot>`;
+    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 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;
+    return d`<slot name=actions-end slot=actions-end></slot>`;
   }
   #a() {
-    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;
+    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;
   }
   #o() {
-    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;
+    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;
   }
   #r() {
-    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;
+    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;
   }
   #l() {
-    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=${() => {
+    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;
+  }
+  #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=${() => {
       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;
   }
-  #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>`;
+  #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;
   }
 }
 W("arcgis-time-bar", Mt);

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

@@ -1,6 +1,6 @@
 import "@esri/calcite-components/components/calcite-action-bar";
-import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-popover";
 import "../arcgis-time-bar-settings/index.js";
 import "../arcgis-time-bar-extent/index.js";

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

@@ -43,4 +43,6 @@ export interface TickFormat {
   timeInterval: TimeInterval;
 }
 
-export type ToolbarKind = "docked" | "floating";
+export type ToolbarKind = "docked" | "floating";
+
+export type PopoverDisplay = "always" | "auto" | "none";