@arcgis/map-components 5.2.0-next.147 → 5.2.0-next.149

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

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/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";
@@ -22,7 +22,7 @@ import { useDirection as vt, usePropertyChange as gt } from "@arcgis/lumina/cont
 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, n = bt(a), c = new Intl.DateTimeFormat(e, n);
   return z.set(t, c), c;
 }
 function wt(t) {
@@ -32,10 +32,10 @@ function wt(t) {
 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)
@@ -189,13 +189,13 @@ let o = class extends j {
       const { dates: n } = e;
       if (!n?.length)
         return;
-      const c = n.sort(($, b) => $.getTime() - b.getTime());
+      const c = n.sort(($, _) => $.getTime() - _.getTime());
       if (!t?.start || !t?.end)
         return c;
       const { start: h, end: u } = t, y = h.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;
@@ -377,7 +377,7 @@ 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
 };
@@ -532,7 +532,7 @@ o = r([
 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 {
   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();
   }
@@ -544,7 +544,6 @@ class kt extends ht {
   }
   #t;
   #e;
-  #i;
   async applyTimeSettings(e) {
     this._viewModel.set(e);
   }
@@ -569,7 +568,7 @@ class kt extends ht {
   willUpdate(e) {
     e.has("messages") && (this._viewModel.locale = this.messages._lang);
   }
-  #m(e) {
+  #h(e) {
     const { currentTarget: a } = e, n = (
       // prioritizes slotted element (if it exists)
       dt(a).at(0) ?? // fallback to default label
@@ -577,7 +576,7 @@ class kt extends ht {
     );
     n && (n.messages = this.messages, n.viewModel = this._viewModel);
   }
-  async #u() {
+  async #m() {
     switch (this.state) {
       case "disabled":
       case "playing":
@@ -587,33 +586,33 @@ 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.#m} .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} ${I(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;
   }
-  #h() {
-    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;
+  #c() {
+    return this.showTimeExtent ? p`<calcite-action-group class="time-extent-group"><slot name=time-extent @slotchange=${this.#h}><arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} class="label" .messages=${this.messages} .viewModel=${this._viewModel}></arcgis-time-bar-extent></slot></calcite-action-group>` : null;
   }
 }
 q("arcgis-time-bar", kt);

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

@@ -1,13 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
-import { css as m, html as r } from "lit";
+import { css as m, html as a } from "lit";
 import { ref as u } from "lit/directives/ref.js";
 import l from "@arcgis/core/time/TimeExtent.js";
-import { LitElement as h, nothing as v, safeClassMap as g } from "@arcgis/lumina";
-const w = m`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto;--arcgis-internal-time-bar-slider-tick-gap: 100}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{padding-inline:var(--calcite-spacing-md);--labels-container-width: 100%}.slider-container{flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%;arcgis-ticks,>slot::slotted(arcgis-ticks){inset:0;position:absolute;white-space:nowrap;--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-label-width: auto;--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}.lock-time-window{--arcgis-internal-time-bar-slider-border-margin: calc(var(--calcite-spacing-base) + 1px);border-image:linear-gradient(transparent var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--arcgis-internal-time-bar-slider-border-margin)),transparent var(--arcgis-internal-time-bar-slider-border-margin));border-image-slice:1;border-inline-end-style:solid;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-spacing-sm)}`;
-class p extends h {
+import { LitElement as h, nothing as g, safeClassMap as v } from "@arcgis/lumina";
+import { useDirection as w } from "@arcgis/lumina/controllers";
+const p = m`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto;--arcgis-internal-time-bar-slider-tick-gap: 100}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{padding-inline:var(--calcite-spacing-xl);--arcgis-internal-slider-track-size: var(--calcite-size-px);--arcgis-slider-track-background-color: var(--calcite-color-border-1);--labels-container-width: 100%}.slider-container{flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%;arcgis-ticks,>slot::slotted(arcgis-ticks){inset:0;position:absolute;white-space:nowrap;--arcgis-internal-ticks-color: var(--calcite-color-text-1);--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-label-width: auto;--arcgis-ticks-tick-color: var(--calcite-color-border-1);--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}.lock-time-window{--arcgis-internal-time-bar-slider-border-margin: calc(var(--calcite-spacing-base) + 1px);border-image:linear-gradient(transparent var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--arcgis-internal-time-bar-slider-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--arcgis-internal-time-bar-slider-border-margin)),transparent var(--arcgis-internal-time-bar-slider-border-margin));border-image-slice:1}:dir(ltr){.lock-time-window{border-inline-end-style:solid;border-inline-end-width:var(--calcite-border-width-sm);margin-inline-end:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}}:dir(rtl){.lock-time-window{border-inline-start-style:solid;border-inline-start-width:var(--calcite-border-width-sm);margin-inline-start:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm)}}`;
+class f extends h {
   constructor() {
-    super(...arguments), this.#t = new ResizeObserver(([e]) => {
+    super(...arguments), this._direction = w(), this.#t = new ResizeObserver(([e]) => {
       this._sliderWidth = e.contentRect.width;
     }), this.#a = 100, this.#r = 100, this.#n = (e, i) => i === "value" ? this.viewModel?.formatDateTime(new Date(e)) : void 0, this.autoDestroyDisabled = !1, this.lockTimeWindow = !1, this.popoverDisplay = "none", this.showLockTimeWindow = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1;
   }
@@ -15,7 +16,7 @@ class p extends h {
     this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, lockTimeWindow: 5, messages: 0, popoverDisplay: 1, showLockTimeWindow: 5, showMax: 5, showMin: 5, showTicks: 5, viewModel: 0 };
   }
   static {
-    this.styles = w;
+    this.styles = p;
   }
   #t;
   #i;
@@ -46,8 +47,8 @@ class p extends h {
     const { start: t, end: s } = i;
     if (!t || !s)
       return;
-    const { timeExtent: a } = e;
-    if (!a)
+    const { timeExtent: r } = e;
+    if (!r)
       switch (e.mode) {
         case "cumulative-from-end":
         case "instant":
@@ -57,7 +58,7 @@ class p extends h {
         case "time-window":
           return [t.getTime(), s.getTime()];
       }
-    const { start: o, end: n } = a;
+    const { start: o, end: n } = r;
     switch (e.mode) {
       case "cumulative-from-end":
       case "instant":
@@ -88,7 +89,7 @@ class p extends h {
   async destroy() {
     await this.manager.destroy();
   }
-  #o() {
+  #m() {
     return (e) => {
       if (e) {
         this.#e = e, this.#t.observe(e);
@@ -97,28 +98,28 @@ class p extends h {
       this.#e && (this.#t.unobserve(this.#e), this.#e = void 0);
     };
   }
-  #l() {
+  #u() {
     const e = Number.parseInt(window.getComputedStyle(this.el).getPropertyValue("--arcgis-internal-time-bar-slider-tick-gap"), 10);
     return Number.isFinite(e) && e > 0 ? e : this.#a;
   }
-  #c(e, i) {
-    const { viewModel: t } = this, { start: s, end: a } = e;
-    if (!t || !s || !a)
+  #h(e, i) {
+    const { viewModel: t } = this, { start: s, end: r } = e;
+    if (!t || !s || !r)
       return;
-    const n = (a.getTime() - s.getTime()) / i;
-    return t.tickFormats.find(({ duration: c }) => c > this.#l() * n) ?? t.tickFormats.at(-1);
+    const n = (r.getTime() - s.getTime()) / i;
+    return t.tickFormats.find(({ duration: c }) => c > this.#u() * n) ?? t.tickFormats.at(-1);
   }
-  #d() {
+  #g() {
     this.lockTimeWindow = !this.lockTimeWindow;
   }
-  #m(e) {
+  #v(e) {
     this._activeValue = e.target.activeValue;
   }
-  #u(e) {
+  #w(e) {
     const { viewModel: i } = this, t = i?.mode;
-    t && (i.timeExtent = this.#h(e.target.values, t), this._activeValue = e.target.activeValue);
+    t && (i.timeExtent = this.#p(e.target.values, t), this._activeValue = e.target.activeValue);
   }
-  #h([e, i], t) {
+  #p([e, i], t) {
     switch (t) {
       case "cumulative-from-end":
         return new l({ start: new Date(e), end: null });
@@ -130,25 +131,25 @@ class p extends h {
         return new l({ start: new Date(e), end: new Date(i ?? e) });
     }
   }
-  #v() {
+  #o() {
     const { messages: e, showLockTimeWindow: i, viewModel: t } = this;
     if (!e || !i || !t)
       return null;
-    const s = this.lockTimeWindow ? "lock" : "unlock", a = this.lockTimeWindow ? e.unlockTimeWindow : e.lockTimeWindow;
-    return r`<calcite-action .active=${this.lockTimeWindow} class="lock-time-window" .disabled=${t.disabled || t.mode !== "time-window"} .icon=${s} @click=${this.#d} .text=${a} title=${a ?? v}></calcite-action>`;
+    const s = this.lockTimeWindow ? "lock" : "unlock", r = this.lockTimeWindow ? e.unlockTimeWindow : e.lockTimeWindow;
+    return a`<calcite-action .active=${this.lockTimeWindow} class="lock-time-window" .disabled=${t.disabled || t.mode !== "time-window"} .icon=${s} @click=${this.#g} .text=${r} title=${r ?? g}></calcite-action>`;
   }
-  #g() {
+  #l() {
     const e = this.viewModel?.fullTimeExtent?.end;
-    return this.showMax && e ? r`<slot name=max><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="max-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : r`<div class="hidden"></div>`;
+    return this.showMax && e ? a`<slot name=max><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="max-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
   }
-  #w() {
+  #c() {
     const e = this.viewModel?.fullTimeExtent?.start;
-    return this.showMin && e ? r`<slot name=min><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="min-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : r`<div class="hidden"></div>`;
-  }
-  #p() {
-    return this.popoverDisplay !== "none" ? r`<div class="popover" slot=popover><slot name=popover>${this.#f()}</slot></div>` : null;
+    return this.showMin && e ? a`<slot name=min><arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} class="min-date" .date=${e} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
   }
   #f() {
+    return this.popoverDisplay !== "none" ? a`<div class="popover" slot=popover><slot name=popover>${this.#b()}</slot></div>` : null;
+  }
+  #b() {
     const { activeValue: e, messages: i, viewModel: t } = this;
     if (!e || !i || !t)
       return null;
@@ -156,37 +157,37 @@ class p extends h {
       case "cumulative-from-end":
       case "instant":
         const s = t.timeExtent?.start;
-        return s ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${s} .viewModel=${t}></arcgis-time-bar-date>` : null;
+        return s ? a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${s} .viewModel=${t}></arcgis-time-bar-date>` : null;
       case "cumulative-from-start":
-        const a = t.timeExtent?.end;
-        return a ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${a} .viewModel=${t}></arcgis-time-bar-date>` : null;
+        const r = t.timeExtent?.end;
+        return r ? a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${r} .viewModel=${t}></arcgis-time-bar-date>` : null;
       case "time-window":
-        return e instanceof Date ? r`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${e} .viewModel=${t}></arcgis-time-bar-date>` : r`<arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} .messages=${i} .viewModel=${t}></arcgis-time-bar-extent>`;
+        return e instanceof Date ? a`<arcgis-time-bar-date .autoDestroyDisabled=${this.autoDestroyDisabled} .date=${e} .viewModel=${t}></arcgis-time-bar-date>` : a`<arcgis-time-bar-extent .autoDestroyDisabled=${this.autoDestroyDisabled} .messages=${i} .viewModel=${t}></arcgis-time-bar-extent>`;
     }
   }
-  #b() {
+  #d() {
     const { messages: e, viewModel: i } = this;
     if (!i?.fullTimeExtent?.start || !i?.fullTimeExtent?.end || !e)
       return null;
-    const t = this.#c(i.fullTimeExtent, this._sliderWidth ?? this.#r);
+    const t = this.#h(i.fullTimeExtent, this._sliderWidth ?? this.#r);
     if (!t)
       return null;
     (!this.#i || !this.#s || this.#i !== t) && (this.#i = t, this.#s = i.getTickValues(t.timeInterval), i.tickFormat = t.format);
-    const s = i.fullTimeExtent.start.getTime(), a = i.fullTimeExtent.end.getTime();
-    return r`<div class="slider-container" ${u(this.#o())}><arcgis-slider allow-values-overlap .autoDestroyDisabled=${this.autoDestroyDisabled} class=${g({
+    const s = i.fullTimeExtent.start.getTime(), r = i.fullTimeExtent.end.getTime();
+    return a`<div class="slider-container" ${u(this.#m())}><arcgis-slider allow-values-overlap .autoDestroyDisabled=${this.autoDestroyDisabled} class=${v({
       slider: !0,
       "slider--has-ticks": this.showTicks,
       "slider--out-of-range": i.isOutOfRange
-    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .labelFormatter=${this.#n} .max=${a} .min=${s} @arcgisActiveValueChange=${this.#m} @arcgisInput=${this.#u} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} .valuesDraggingDisabled=${this.lockTimeWindow}>${this.#p()}${this.#T(i, s, a)}</arcgis-slider></div>`;
+    })} .disabled=${!i.interactive} .fillPlacement=${this._sliderFillPlacement} .labelFormatter=${this.#n} .max=${r} .min=${s} @arcgisActiveValueChange=${this.#v} @arcgisInput=${this.#w} .popoverLabel=${e.timeExtent} .popoverDisplay=${this.popoverDisplay === "none" ? "auto" : this.popoverDisplay} precision=0 .steps=${i.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} .valuesDraggingDisabled=${this.lockTimeWindow}>${this.#f()}${this.#k(i, s, r)}</arcgis-slider></div>`;
   }
-  #T(e, i, t) {
-    return this.showTicks ? r`<div slot=content-end class="ticks-container"><slot name=content-end><arcgis-ticks .autoDestroyDisabled=${this.autoDestroyDisabled} .labelFormatter=${e.tickFormatter} .max=${t} .min=${i} mode=value show-labels .values=${this.#s}></arcgis-ticks></slot></div>` : null;
+  #k(e, i, t) {
+    return this.showTicks ? a`<div slot=content-end class="ticks-container"><slot name=content-end><arcgis-ticks .autoDestroyDisabled=${this.autoDestroyDisabled} .labelFormatter=${e.tickFormatter} .max=${t} .min=${i} mode=value show-labels .values=${this.#s}></arcgis-ticks></slot></div>` : null;
   }
   render() {
-    return r`<div class="root">${this.#v()}${this.#w()}${this.#b()}${this.#g()}</div>`;
+    return a`<div class="root">${this._direction === "ltr" ? a`${this.#o()}${this.#c()}${this.#d()}${this.#l()}` : a`${this.#l()}${this.#d()}${this.#c()}${this.#o()}`}</div>`;
   }
 }
-d("arcgis-time-bar-slider", p);
+d("arcgis-time-bar-slider", f);
 export {
-  p as ArcgisTimeBarSlider
+  f as ArcgisTimeBarSlider
 };

package/dist/components/arcgis-video/customElement.js

@@ -8,10 +8,10 @@ import { LitElement as c, createEvent as m, safeClassMap as d } from "@arcgis/lu
 import { makeAccessorController as f } from "@arcgis/lumina-toolkit/useAccessor";
 import { createRef as s, ref as a } from "lit/directives/ref.js";
 import { C as r } from "../../chunks/resources.js";
-import { c as p, s as y, S as w } from "../../chunks/slots.js";
-import { s as v } from "../../chunks/esri-main.js";
-const u = h`:host{width:100%;height:100%}`, R = f(l, {
-  omitProps: ["container", "focusRegionEnabled", "navigation", "scale", "ui"]
+import { c as p, s as y, S as u } from "../../chunks/slots.js";
+import { s as w } from "../../chunks/esri-main.js";
+const v = h`:host{width:100%;height:100%}`, R = f(l, {
+  omitProps: ["container", "focusRegionVisible", "focusRegionShortcutEnabled", "navigation", "scale", "ui"]
 });
 class g extends c {
   constructor() {
@@ -21,7 +21,7 @@ class g extends c {
     this.properties = { autoDestroyDisabled: 5, view: 32, aria: 0, attributionMode: 1, ready: 36, layer: 0, map: 0, operationalDataVisible: 5 };
   }
   static {
-    this.styles = [v, y, u];
+    this.styles = [w, y, v];
   }
   get aria() {
     return this.view?.aria;
@@ -47,7 +47,7 @@ class g extends c {
     return e`<div class=${`root ${r.base}`} ${a(this._mapRef)}></div>`;
   }
   render() {
-    return e`${this.renderMain()}<section class=${d(r.containerUI)} ${a(this._containerRef)}>${w({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
+    return e`${this.renderMain()}<section class=${d(r.containerUI)} ${a(this._containerRef)}>${u({ direction: this._direction, slotGroupRefs: this._slotGroupRefs })}</section>`;
   }
 }
 o("arcgis-video", g);