@arcgis/map-components 5.1.0-next.105 → 5.1.0-next.108

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

@@ -2,25 +2,25 @@
 import { c as N } from "../../chunks/runtime.js";
 import { keyed as y } from "lit/directives/keyed.js";
 import { usePropertyChange as H } from "@arcgis/lumina/controllers";
-import { LitElement as q, createEvent as F, nothing as S, safeClassMap as G } from "@arcgis/lumina";
+import { LitElement as q, createEvent as D, nothing as w, safeClassMap as G } from "@arcgis/lumina";
 import { classes as U } from "@arcgis/toolkit/dom";
 import { u as Y } from "../../chunks/useT9n.js";
 import { css as J, html as l } from "lit";
-import p from "@arcgis/core/time/TimeExtent.js";
-import C from "@arcgis/core/time/TimeInterval.js";
+import f from "@arcgis/core/time/TimeExtent.js";
+import F from "@arcgis/core/time/TimeInterval.js";
 import K from "@arcgis/core/core/Accessor.js";
 import { property as h, subclass as Q } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { log as Z } from "@arcgis/toolkit/log";
+import { log as W } from "@arcgis/toolkit/log";
 import { u as X, r as tt } from "../../chunks/time-utils.js";
-import { offsetDate as j, truncateDate as et } from "@arcgis/core/core/timeUtils.js";
-import { watch as w, whenOnce as M } from "@arcgis/core/core/reactiveUtils.js";
+import { offsetDate as Z, truncateDate as et } from "@arcgis/core/core/timeUtils.js";
+import { watch as b, whenOnce as M } from "@arcgis/core/core/reactiveUtils.js";
 import { convertDateFormatToIntlOptions as P } from "@arcgis/core/intl.js";
 import it from "@arcgis/core/webdoc/Widgets.js";
 import st from "@arcgis/core/webdoc/widgets/TimeSlider.js";
 import { b as nt, d as at, i as rt } from "../../chunks/async-utils.js";
 import { getTimeSliderSettingsFromWebDocument as ot } from "@arcgis/core/support/timeUtils.js";
 import { m as lt } from "../../chunks/useViewModel.js";
-import { createRef as _, ref as b } from "lit/directives/ref.js";
+import { createRef as T, ref as _ } from "lit/directives/ref.js";
 import { m as ct } from "../../chunks/handle.js";
 import "@arcgis/core/core/Collection.js";
 const mt = J`:host{background-color:var(--calcite-color-foreground-1);box-shadow:var(--arcgis-internal-box-shadow, var(--calcite-shadow-sm));box-sizing:border-box;color:var(--calcite-color-text-2);display:flex;flex-direction:column;flex-wrap:nowrap;font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight);overflow:visible;transition:max-height .25s ease-in-out}:host([disabled]){.max,.min,.time-extent{opacity:var(--calcite-opacity-disabled)}}.wide{min-width:800px;.max,.min,.time-extent{align-items:center;width:calc(var(--calcite-size-lg) * 2.5)}.play{flex:0 0 var(--calcite-size-xxl)}.playback-controls{direction:ltr;display:flex;flex:auto}.previous,.next{flex:0 0 var(--calcite-size-lg)}.row{display:flex;height:calc(var(--calcite-size-lg) * 2)}.slider{flex:1;margin-top:calc(var(--calcite-size-fixed-md) * -1)}.time-extent{display:flex;flex-flow:column nowrap;flex:0 0 auto;font-size:var(--calcite-font-size-sm);justify-content:center;line-height:var(--calcite-font-line-height-relative-tight)}.time-extent-separator{height:var(--calcite-size-px);margin-bottom:var(--calcite-spacing-fixed-xs);margin-top:var(--calcite-spacing-fixed-xxs);opacity:var(--calcite-opacity-disabled);width:75%}.warning{flex-flow:column nowrap}.action-menu,.actions,.min,.previous,.time-extent{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-1)}}.compact{min-width:375px;.action-menu{margin-inline-start:auto}.max,.min{flex:1 0 auto}.max{align-items:flex-end;margin-inline-end:var(--calcite-size-md)}.min{align-items:flex-start;margin-inline-start:var(--calcite-size-md)}.play,.previous,.next{flex:0 0 var(--calcite-size-md)}.row1,.row2,.row3{display:flex}.row1,.row3{height:calc(var(--calcite-size-md) * 1.1)}.row1{align-items:center;position:relative}.row2{height:var(--calcite-size-xxl)}.row3{direction:ltr}.slider{margin-top:calc(var(--calcite-spacing-fixed-sm) * -1)}.time-extent{align-items:center;display:flex;flex-flow:row nowrap;flex:auto;justify-content:center;left:50%;position:absolute;transform:translate(-50%);white-space:nowrap}.time-extent-separator{height:var(--calcite-size-sm);margin-inline:var(--calcite-spacing-fixed-sm);opacity:var(--calcite-opacity-disabled);width:var(--calcite-size-px)}.warning{flex-flow:row nowrap}.warning-label{margin-inline-start:var(--calcite-spacing-xs)}}.max,.min{display:flex;flex-flow:column nowrap;justify-content:center}.max-date,.min-date,.max-time,.min-time{--calcite-label-margin-bottom: 0}.max-date,.min-date{font-weight:var(--calcite-font-weight-bold)}.out-of-range{.slider{--calcite-color-border-2: var(--calcite-color-status-danger)}}.slider{--labels-container-width: 100%}.slider-container{display:flex;background-color:var(--calcite-color-foreground-2);flex:1}.slider-parent{display:flex;flex:1;margin-inline:var(--calcite-spacing-fixed-xxxl)}.slider-ticks-container{flex:1;position:relative;width:100%}.slider-custom-ticks,.slider-major-ticks,.slider-minor-ticks{inset:0;position:absolute}.slider-major-ticks,.slider-minor-ticks{--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}.slider-minor-ticks{--arcgis-ticks-tick-length: var(--calcite-size-fixed-xxs)}.slider-major-ticks{--arcgis-ticks-font-weight: var(--calcite-font-weight-normal)}.time-extent-end-group,.time-extent-start-group{align-items:center;display:flex;flex-flow:column nowrap}.time-extent-end-date,.time-extent-start-date,.time-extent-end-time,.time-extent-start-time{--calcite-label-margin-bottom: 0;--calcite-label-text-color: var(--calcite-color-brand)}.time-extent-end-date,.time-extent-start-date{font-weight:var(--calcite-font-weight-bold)}.time-extent-separator{background-color:var(--calcite-color-brand)}.warning{align-items:center;display:flex;justify-content:center}.warning-label{--calcite-label-margin-bottom: 0;--calcite-label-text-color: var(--calcite-color-status-danger)}.warning-icon{--calcite-icon-color: var(--calcite-color-status-danger)}:dir(rtl){.max-date,.max-time,.min-date,.min-time,.slider,.time-extent-end-date,.time-extent-end-time,.time-extent-start-date,.time-extent-start-time{direction:rtl}}`, n = (e, t, i) => ({ minorTick: e, majorTick: t, majorTickFormat: i }), a = {
@@ -87,7 +87,7 @@ const mt = J`:host{background-color:var(--calcite-color-foreground-1);box-shadow
 ];
 function dt(e) {
   return ut.map(({ minorTick: t, majorTick: i, majorTickFormat: s }, r) => {
-    const o = new C(t), m = new C(i), c = o.toMilliseconds(), v = {
+    const o = new F(t), m = new F(i), c = o.toMilliseconds(), v = {
       ...s,
       timeZone: e
     };
@@ -97,13 +97,13 @@ function dt(e) {
 function ht(e) {
   return e === "position" ? "value" : e;
 }
-const k = { count: 10 };
+const S = { count: 10 };
 function vt(e) {
-  return W(e) && e.interval.unit === X ? (Z(
+  return j(e) && e.interval.unit === X ? (W(
     "warn",
     "arcgis-slider-time",
     'A stop interval with an "unknown" time unit is not supported. The default stop definition will be used.'
-  ), k) : e;
+  ), S) : e;
 }
 function O(e) {
   return !!e && "count" in e;
@@ -111,32 +111,32 @@ function O(e) {
 function A(e) {
   return !!e && "dates" in e;
 }
-function W(e) {
+function j(e) {
   return !!e && "interval" in e;
 }
-const I = 1e4;
-function D(e, t) {
+const L = 1e4;
+function C(e, t) {
   const { start: i, end: s } = e;
   if (!i || !s || i.getTime() > s.getTime() || t <= 0)
     return [];
-  if (t > I)
-    return D(e, k.count);
+  if (t > L)
+    return C(e, S.count);
   const r = [], o = i.getTime(), c = s.getTime() - o;
   for (let v = 0; v <= t; v++)
     r.push(new Date(o + v / t * c));
   return r;
 }
-function ft(e, t) {
+function pt(e, t) {
   const { start: i, end: s } = e, { value: r, unit: o } = t;
   if (!i || !s || i.getTime() > s.getTime() || r <= 0)
     return [];
   const m = s.getTime() - i.getTime(), c = t.toMilliseconds();
-  if (c <= 0 || m / c > I)
-    return D(e, k.count);
+  if (c <= 0 || m / c > L)
+    return C(e, S.count);
   const v = [];
   let g = i;
   for (; g.getTime() <= s.getTime(); )
-    v.push(new Date(g)), g = j(g, r, o);
+    v.push(new Date(g)), g = Z(g, r, o);
   return v;
 }
 function z(e, t) {
@@ -144,32 +144,32 @@ function z(e, t) {
   if (i)
     switch (t) {
       case "time-window":
-        return s ? new p({ start: i, end: s }) : void 0;
+        return s ? new f({ start: i, end: s }) : void 0;
       case "cumulative-from-start":
-        return new p({ start: null, end: i });
+        return new f({ start: null, end: i });
       case "cumulative-from-end":
-        return new p({ start: i, end: null });
+        return new f({ start: i, end: null });
       case "instant":
-        return new p({ start: i, end: i });
+        return new f({ start: i, end: i });
     }
 }
-function pt(e, t, i, s) {
+function ft(e, t, i, s) {
   const { value: r, unit: o } = i;
   if (e.getTime() > t.getTime() || r <= 0 || o === "unknown")
     return [];
   let m = et(e, i, s);
   const c = [];
   for (; m.getTime() <= t.getTime(); )
-    m.getTime() >= e.getTime() && c.push(m), m = j(m, r, o, s);
+    m.getTime() >= e.getTime() && c.push(m), m = Z(m, r, o, s);
   return c;
 }
-const L = /* @__PURE__ */ new WeakMap();
+const I = /* @__PURE__ */ new WeakMap();
 function gt(e) {
   const { locale: t, formatOptions: i } = e, s = yt(i), r = new Intl.DateTimeFormat(t, s);
-  return L.set(e, r), r;
+  return I.set(e, r), r;
 }
 function xt(e) {
-  return L.get(e) ?? gt(e);
+  return I.get(e) ?? gt(e);
 }
 function yt(e) {
   return e.timeZone ? {
@@ -183,10 +183,10 @@ var wt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, V = (e) =>
   for (var r = s > 1 ? void 0 : s ? Tt(t, i) : t, o = e.length - 1, m; o >= 0; o--)
     (m = e[o]) && (r = (s ? m(t, i, r) : m(r)) || r);
   return s && r && wt(t, i, r), r;
-}, B = (e, t, i) => t.has(e) || V("Cannot " + i), E = (e, t, i) => (B(e, t, "read from private field"), i ? i.call(e) : t.get(e)), R = (e, t, i) => t.has(e) ? V("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), _t = (e, t, i, s) => (B(e, t, "write to private field"), t.set(e, i), i), T, $;
+}, B = (e, t, i) => t.has(e) || V("Cannot " + i), $ = (e, t, i) => (B(e, t, "read from private field"), i ? i.call(e) : t.get(e)), R = (e, t, i) => t.has(e) ? V("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), _t = (e, t, i, s) => (B(e, t, "write to private field"), t.set(e, i), i), E, k;
 let u = class extends K {
   constructor() {
-    super(...arguments), R(this, T, new AbortController()), R(this, $, !1), this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.savePersistedSettingsDisabled = !1, this.stops = k;
+    super(...arguments), R(this, E, new AbortController()), R(this, k, !1), this.loadPersistedSettingsDisabled = !1, this.loop = !1, this.mode = "time-window", this.savePersistedSettingsDisabled = !1, this.stops = S;
   }
   get _adjustedMajorTickFormat() {
     const { era: e, timeZone: t } = this;
@@ -229,18 +229,18 @@ let u = class extends K {
       const { dates: s } = t;
       if (!s?.length)
         return;
-      const r = s.sort((x, f) => x.getTime() - f.getTime());
+      const r = s.sort((x, p) => x.getTime() - p.getTime());
       if (!e?.start || !e?.end)
         return r;
       const { start: o, end: m } = e, c = o.getTime(), v = m.getTime();
       return r.filter((x) => {
-        const f = x.getTime();
-        return f >= c && f <= v;
+        const p = x.getTime();
+        return p >= c && p <= v;
       });
     }
     const i = t.timeExtent ?? e;
     if (i)
-      return O(t) ? D(i, t.count) : ft(i, t.interval);
+      return O(t) ? C(i, t.count) : pt(i, t.interval);
   }
   get era() {
     return (this.fullTimeExtent?.start?.getFullYear() ?? 0) < 0 ? "short" : void 0;
@@ -269,25 +269,25 @@ let u = class extends K {
   //#endregion
   //#region Public Methods
   destroy() {
-    E(this, T).abort(), this.view?.unregisterComponent(this), this._stopAnimation();
+    $(this, E).abort(), this.view?.unregisterComponent(this), this._stopAnimation();
   }
   async initialize() {
     this.addHandles([
-      w(
+      b(
         () => this.effectiveStops,
         (e) => {
           e && (this.timeExtent ??= z(e, this.mode));
         },
         { initial: !0 }
       ),
-      w(
+      b(
         () => this.view,
         (e, t) => {
           t?.unregisterComponent(this), e?.registerComponent(this);
         },
         { initial: !0, sync: !0 }
       ),
-      w(
+      b(
         () => this.timeExtent,
         (e) => {
           if (!this.view)
@@ -297,23 +297,23 @@ let u = class extends K {
         },
         { initial: !0 }
       ),
-      w(
+      b(
         () => this.view?.timeExtent,
         (e) => {
-          if (!E(this, $)) {
-            _t(this, $, !0);
+          if (!$(this, k)) {
+            _t(this, k, !0);
             return;
           }
           (!e || e.isAllTime) && (!this.timeExtent || this.timeExtent.isAllTime) || this.timeExtent && e?.equals(this.timeExtent) || (this.timeExtent = e ?? void 0);
         }
       )
     ]), await nt(
-      M(() => this.view?.ready, { signal: E(this, T).signal }).then(async () => {
+      M(() => this.view?.ready, { signal: $(this, E).signal }).then(async () => {
         if (this.loadPersistedSettingsDisabled)
           return;
         const e = await ot(
           this.view?.map,
-          E(this, T).signal
+          $(this, E).signal
         );
         e && (this.fullTimeExtent = e.fullTimeExtent ?? void 0, this.loop = e.loop, this.mode = e.mode, this.playRate = e.playRate, this.stops = e.stops ?? void 0, this.timeExtent = e.timeExtent ?? void 0);
       })
@@ -333,7 +333,7 @@ let u = class extends K {
     if (!t)
       return [];
     const { start: s, end: r } = t;
-    return !s || !r ? [] : pt(s, r, e, i).map((m) => m.getTime());
+    return !s || !r ? [] : ft(s, r, e, i).map((m) => m.getTime());
   }
   next() {
     this._step({ forward: !0, allowRestart: !1 });
@@ -357,7 +357,7 @@ let u = class extends K {
       numStops: O(this.stops) ? this.stops.count : null,
       numThumbs: this.mode === "time-window" ? 2 : 1,
       stopDelay: this.playRate,
-      stopInterval: W(this.stops) ? this.stops.interval : null,
+      stopInterval: j(this.stops) ? this.stops.interval : null,
       stops: A(this.stops) ? this.stops.dates : null
     });
     e.widgets ??= new it(), e.widgets.timeSlider = t;
@@ -369,7 +369,7 @@ let u = class extends K {
       const { view: e } = this, t = this._animationController?.signal;
       await Promise.all([at(this.playRate, t), e && M(() => !e.updating, t)]);
     } catch (e) {
-      rt(e) || Z("error", "arcgis-slider-time", "animation error", { detail: { error: e } }), this._animationController = void 0;
+      rt(e) || W("error", "arcgis-slider-time", "animation error", { detail: { error: e } }), this._animationController = void 0;
       return;
     }
     this._step({ forward: !0, allowRestart: !1 }), this._animationController && this._animate();
@@ -389,13 +389,13 @@ let u = class extends K {
       if (v !== -1)
         return v;
       const g = s.reduce(
-        (x, f) => Math.abs(f - c) < Math.abs(x - c) ? f : x
+        (x, p) => Math.abs(p - c) < Math.abs(x - c) ? p : x
       );
       return s.indexOf(g);
     }), o = r.map((c) => c += e ? 1 : -1);
     if (o.some((c) => c < 0 || c > s.length - 1))
       if (this.loop || t) {
-        const c = Math.min(...r), v = Math.max(...r), x = (e ? r.map((f) => f - c) : r.map((f) => f + (s.length - 1 - v))).map((f) => s[f]);
+        const c = Math.min(...r), v = Math.max(...r), x = (e ? r.map((p) => p - c) : r.map((p) => p + (s.length - 1 - v))).map((p) => s[p]);
         this.timeExtent = this._toTimeExtent(x);
       } else
         this.state === "playing" && this.stop();
@@ -418,8 +418,8 @@ let u = class extends K {
   }
   //#endregion
 };
-T = /* @__PURE__ */ new WeakMap();
-$ = /* @__PURE__ */ new WeakMap();
+E = /* @__PURE__ */ new WeakMap();
+k = /* @__PURE__ */ new WeakMap();
 d([
   h()
 ], u.prototype, "_adjustedMajorTickFormat", 1);
@@ -448,7 +448,7 @@ d([
   h()
 ], u.prototype, "era", 1);
 d([
-  h({ type: p })
+  h({ type: f })
 ], u.prototype, "fullTimeExtent", 2);
 d([
   h()
@@ -484,7 +484,7 @@ d([
   h()
 ], u.prototype, "tickFormats", 1);
 d([
-  h({ type: p })
+  h({ type: f })
 ], u.prototype, "timeExtent", 2);
 d([
   h()
@@ -501,13 +501,12 @@ u = d([
 const bt = lt(u);
 class Et extends q {
   constructor() {
-    super(...arguments), this._resizeObserver = new ResizeObserver((t) => {
-      const i = t.at(0)?.contentRect.width ?? 0;
-      i && (this._sliderContainerWidth = i);
-    }), this.#e = _(), this.#i = _(), this.#l = 3, this.#c = 858, this.#o = _(), this.#s = _(), this.#t = bt(this), this.messages = Y({ blocking: !0 }), this.autoDestroyDisabled = !1, this.disabled = !1, this.effectiveStops = this.#t.effectiveStops, this.fullTimeExtent = this.#t.fullTimeExtent, this.icon = "clock", this.layout = "auto", this.loadPersistedSettingsDisabled = this.#t.loadPersistedSettingsDisabled, this.loop = this.#t.loop, this.mode = this.#t.mode, this.playRate = this.#t.playRate, this.savePersistedSettingsDisabled = this.#t.savePersistedSettingsDisabled, this.showTime = !1, this.state = this.#t.state, this.stops = this.#t.stops, this.timeExtent = this.#t.timeExtent, this.timeZone = this.#t.timeZone, this.view = this.#t.view, this.arcgisPropertyChange = H()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = F(), this.arcgisTriggerAction = F();
+    super(...arguments), this._resizeObserver = new ResizeObserver(() => {
+      this._updateSliderWidthContainerWidth();
+    }), this.#a = T(), this.#e = T(), this.#i = T(), this.#c = 3, this.#m = 858, this.#l = T(), this.#s = T(), this.#t = bt(this), this.messages = Y({ blocking: !0 }), this.autoDestroyDisabled = !1, this.disabled = !1, this.effectiveStops = this.#t.effectiveStops, this.fullTimeExtent = this.#t.fullTimeExtent, this.icon = "clock", this.layout = "auto", this.loadPersistedSettingsDisabled = this.#t.loadPersistedSettingsDisabled, this.loop = this.#t.loop, this.mode = this.#t.mode, this.playRate = this.#t.playRate, this.savePersistedSettingsDisabled = this.#t.savePersistedSettingsDisabled, this.showTime = !1, this.state = this.#t.state, this.stops = this.#t.stops, this.timeExtent = this.#t.timeExtent, this.timeZone = this.#t.timeZone, this.view = this.#t.view, this.arcgisPropertyChange = H()("effectiveStops", "fullTimeExtent", "state", "timeExtent"), this.arcgisReady = D(), this.arcgisTriggerAction = D();
   }
   static {
-    this.properties = { _effectiveStopsEpoch: 16, _interactive: 16, _isOutOfRange: 16, _sliderContainerWidth: 16, _sliderFillPlacement: 16, actions: 0, autoDestroyDisabled: 5, disabled: 7, effectiveStops: 32, fullTimeExtent: 0, icon: 1, label: 1, labelFormatFunction: 0, layout: 1, loadPersistedSettingsDisabled: 5, loop: 5, messageOverrides: 0, mode: 1, playRate: 9, referenceElement: 1, savePersistedSettingsDisabled: 5, showTime: 5, state: 32, stops: 0, tickConfigs: 0, timeExtent: 0, timeZone: 1, view: 0 };
+    this.properties = { _effectiveStopsEpoch: 16, _interactive: 16, _isOutOfRange: 16, _sliderContainerWidth: 16, _sliderFillPlacement: 16, effectiveLayout: 16, actions: 0, autoDestroyDisabled: 5, disabled: 7, effectiveStops: 32, fullTimeExtent: 0, icon: 1, label: 1, labelFormatFunction: 0, layout: 1, loadPersistedSettingsDisabled: 5, loop: 5, messageOverrides: 0, mode: 1, playRate: 9, referenceElement: 1, savePersistedSettingsDisabled: 5, showTime: 5, state: 32, stops: 0, tickConfigs: 0, timeExtent: 0, timeZone: 1, view: 0 };
   }
   static {
     this.styles = mt;
@@ -515,16 +514,14 @@ class Et extends q {
   #n;
   #a;
   #r;
+  #o;
   #e;
   #i;
-  #l;
   #c;
-  #o;
+  #m;
+  #l;
   #s;
   #t;
-  get effectiveLayout() {
-    return this.layout === "auto" ? this.el.clientWidth < this.#c ? "compact" : "wide" : this.layout;
-  }
   get _effectiveStopsEpoch() {
     return this.effectiveStops?.map((t) => t.getTime());
   }
@@ -550,6 +547,9 @@ class Et extends q {
         return;
     }
   }
+  get effectiveLayout() {
+    return this.layout === "auto" ? this.el.clientWidth < this.#m ? "compact" : "wide" : this.layout;
+  }
   async applyTimeSliderSettings(t) {
     this.#t.set(t);
   }
@@ -579,8 +579,8 @@ class Et extends q {
   }
   async loaded() {
     this.manager.onLifecycle(() => [
-      w(() => this.#o.value, (t) => {
-        this._resizeObserver.disconnect(), t && this._resizeObserver.observe(t);
+      b(() => this.#a.value, (t) => {
+        this._resizeObserver.disconnect(), t && (this._resizeObserver.observe(t), this._updateSliderWidthContainerWidth());
       }, { initial: !0 }),
       ct(() => {
         this._resizeObserver.disconnect();
@@ -598,7 +598,7 @@ class Et extends q {
   }
   _getTickFormat(t, i) {
     const r = (t.end.getTime() - t.start.getTime()) / i;
-    return this.#t.tickFormats.find(({ duration: o }) => o > this.#l * r) ?? this.#t.tickFormats.at(-1);
+    return this.#t.tickFormats.find(({ duration: o }) => o > this.#c * r) ?? this.#t.tickFormats.at(-1);
   }
   _onSliderInput(t) {
     this.timeExtent = this._toTimeExtent(t.target.values);
@@ -615,32 +615,36 @@ class Et extends q {
   _toTimeExtent([t, i]) {
     switch (this.mode) {
       case "cumulative-from-end":
-        return new p({
+        return new f({
           start: new Date(t),
           end: null
         });
       case "cumulative-from-start":
-        return new p({
+        return new f({
           start: null,
           end: new Date(t)
         });
       case "instant":
-        return new p({
+        return new f({
           start: new Date(t),
           end: new Date(t)
         });
       case "time-window":
-        return new p({
+        return new f({
           start: new Date(t),
           end: new Date(i)
         });
     }
   }
+  _updateSliderWidthContainerWidth() {
+    const t = this.#l.value?.getBoundingClientRect().width;
+    t && t !== this._sliderContainerWidth && (this._sliderContainerWidth = t);
+  }
   render() {
-    return l`<div aria-label=${this.messages.componentLabel ?? S} class=${G(U("root", this.effectiveLayout, { "out-of-range": this._isOutOfRange }))} role=presentation>${this._renderContent()}</div>`;
+    return l`<div aria-label=${this.messages.componentLabel ?? w} class=${G(U("root", this.effectiveLayout, { "out-of-range": this._isOutOfRange }))} role=presentation ${_(this.#a)}>${this._renderContent()}</div>`;
   }
   _renderActions() {
-    return this.actions?.length ? l`<calcite-action-menu class="action-menu" .label=${this.messages.options}>${this.actions.toArray().map(({ icon: t, id: i, title: s }) => l`<calcite-action .icon=${t} id=${i ?? S} @click=${() => this.arcgisTriggerAction.emit({ action: { icon: t, id: i, title: s } })} .text=${s} text-enabled></calcite-action>`)}</calcite-action-menu>` : null;
+    return this.actions?.length ? l`<calcite-action-menu class="action-menu" .label=${this.messages.options}>${this.actions.toArray().map(({ icon: t, id: i, title: s }) => l`<calcite-action .icon=${t} id=${i ?? w} @click=${() => this.arcgisTriggerAction.emit({ action: { icon: t, id: i, title: s } })} .text=${s} text-enabled></calcite-action>`)}</calcite-action-menu>` : null;
   }
   _renderContent() {
     const t = this._renderActions(), i = this._renderMaxContainer(), s = this._renderMinContainer(), r = this._renderNext(), o = this._renderPlay(), m = this._renderPrevious(), c = this._renderSliderContainer(), v = this._renderTimeExtentContainer();
@@ -655,10 +659,10 @@ class Et extends q {
     return this.tickConfigs?.map(({ labelFormatFunction: s, mode: r, values: o, labelsVisible: m }) => l`<arcgis-ticks class="slider-custom-ticks" .labelFormatter=${s} .max=${i} .min=${t} .mode=${ht(r)} .showLabels=${m} .values=${o}></arcgis-ticks>`);
   }
   _renderDefaultSliderTicks(t, i) {
-    return l`<arcgis-ticks class="slider-minor-ticks" .max=${i} .min=${t} mode=value .values=${this.#r}></arcgis-ticks><arcgis-ticks class="slider-major-ticks" .labelFormatter=${this.#t.majorTickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#a}></arcgis-ticks>`;
+    return l`<arcgis-ticks class="slider-minor-ticks" .max=${i} .min=${t} mode=value .values=${this.#o}></arcgis-ticks><arcgis-ticks class="slider-major-ticks" .labelFormatter=${this.#t.majorTickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#r}></arcgis-ticks>`;
   }
   _renderMaxContainer() {
-    return this.labelFormatFunction ? l`<div class="max" ${b(this.#e)}></div>` : l`<div class="max">${this._renderMaxContent(this.fullTimeExtent?.end)}</div>`;
+    return this.labelFormatFunction ? l`<div class="max" ${_(this.#e)}></div>` : l`<div class="max">${this._renderMaxContent(this.fullTimeExtent?.end)}</div>`;
   }
   _renderMaxContent(t) {
     return t ? l`${this._renderMaxDate(t)}${this._renderMaxTime(t)}` : null;
@@ -670,7 +674,7 @@ class Et extends q {
     return this.showTime ? l`<calcite-label class="max-time" scale=s>${this.#t.formatTime(t)}</calcite-label>` : null;
   }
   _renderMinContainer() {
-    return this.labelFormatFunction ? l`<div class="min" ${b(this.#i)}></div>` : l`<div class="min">${this._renderMinContent(this.fullTimeExtent?.start)}</div>`;
+    return this.labelFormatFunction ? l`<div class="min" ${_(this.#i)}></div>` : l`<div class="min">${this._renderMinContent(this.fullTimeExtent?.start)}</div>`;
   }
   _renderMinContent(t) {
     return t ? l`${this._renderMinDate(t)}${this._renderMinTime(t)}` : null;
@@ -682,27 +686,28 @@ class Et extends q {
     return this.showTime ? l`<calcite-label class="min-time" scale=s>${this.#t.formatTime(t)}</calcite-label>` : null;
   }
   _renderPlay() {
-    return l`<calcite-button appearance=transparent class="play" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length} .iconStart=${this.state === "playing" ? "pause" : "play"} kind=neutral .label=${this.state === "playing" ? this.messages.control.stop : this.messages.control.play} @click=${this._playOrStopClick} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} width=full></calcite-button>`;
+    const t = this.state === "playing" ? this.messages.control.stop : this.messages.control.play;
+    return l`<calcite-button appearance=transparent class="play" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length} .iconStart=${this.state === "playing" ? "pause" : "play"} kind=neutral .label=${t} @click=${this._playOrStopClick} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} title=${t ?? w} width=full></calcite-button>`;
   }
   _renderPrevious() {
-    return l`<calcite-button appearance=transparent class="previous" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length || this.state === "playing"} icon-start=reverse kind=neutral .label=${this.messages.pagination.previous} @click=${this.previous} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} width=full></calcite-button>`;
+    return l`<calcite-button appearance=transparent class="previous" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length || this.state === "playing"} icon-start=reverse kind=neutral .label=${this.messages.pagination.previous} @click=${this.previous} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} title=${this.messages.pagination.previous ?? w} width=full></calcite-button>`;
   }
   _renderNext() {
-    return l`<calcite-button appearance=transparent class="next" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length || this.state === "playing"} icon-start=forward kind=neutral .label=${this.messages.pagination.next} @click=${this.next} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} width=full></calcite-button>`;
+    return l`<calcite-button appearance=transparent class="next" .disabled=${this._isOutOfRange || !this._interactive || !this.effectiveStops?.length || this.state === "playing"} icon-start=forward kind=neutral .label=${this.messages.pagination.next} @click=${this.next} .scale=${this.effectiveLayout === "wide" ? "l" : "m"} title=${this.messages.pagination.next ?? w} width=full></calcite-button>`;
   }
   _renderSliderContainer() {
-    return l`<div class="slider-container"><div class="slider-parent" ${b(this.#o)}>${this._renderSliderContent()}</div></div>`;
+    return l`<div class="slider-container"><div class="slider-parent" ${_(this.#l)}>${this._renderSliderContent()}</div></div>`;
   }
   _renderSliderContent() {
     if (!this.timeExtent || !this.fullTimeExtent?.start || !this.fullTimeExtent.end || !this._sliderContainerWidth)
       return null;
     const t = this._getTickFormat(this.fullTimeExtent, this._sliderContainerWidth);
-    (!this.#n || !this.#r || !this.#a || this.#n !== t) && (this.#n = t, this.#r = this.#t.getTickValues(t.minor), this.#a = this.#t.getTickValues(t.major), this.#t.majorTickFormat = t.format);
+    (!this.#n || !this.#o || !this.#r || this.#n !== t) && (this.#n = t, this.#o = this.#t.getTickValues(t.minor), this.#r = this.#t.getTickValues(t.major), this.#t.majorTickFormat = t.format);
     const i = this.fullTimeExtent.start.getTime(), s = this.fullTimeExtent.end.getTime(), r = this._isOutOfRange ? [] : this._renderTimeExtentValues(), o = this._renderCustomSliderTicks(i, s) ?? this._renderDefaultSliderTicks(i, s);
-    return l`<arcgis-slider class="slider" .disabled=${!this._interactive} fill-placement=${this._sliderFillPlacement ?? S} .max=${s} .min=${i} @arcgisInput=${this._onSliderInput} precision=0 .steps=${this._effectiveStopsEpoch} .values=${r}><div slot=content-end class="slider-ticks-container">${o}</div></arcgis-slider>`;
+    return l`<arcgis-slider class="slider" .disabled=${!this._interactive} fill-placement=${this._sliderFillPlacement ?? w} .max=${s} .min=${i} @arcgisInput=${this._onSliderInput} precision=0 .steps=${this._effectiveStopsEpoch} .values=${r}><div slot=content-end class="slider-ticks-container">${o}</div></arcgis-slider>`;
   }
   _renderTimeExtentContainer() {
-    return this.labelFormatFunction ? l`<div class="time-extent" ${b(this.#s)}></div>` : l`<div class="time-extent">${this._renderTimeExtentContent()}</div>`;
+    return this.labelFormatFunction ? l`<div class="time-extent" ${_(this.#s)}></div>` : l`<div class="time-extent">${this._renderTimeExtentContent()}</div>`;
   }
   _renderTimeExtentContent() {
     return !this.timeExtent || this.timeExtent.isAllTime ? this._renderWarning(this.messages.noTimeExtent) : this.timeExtent.isEmpty ? this._renderWarning(this.messages.emptyTimeExtent) : l`${this._renderTimeExtentStart()}${this._renderTimeExtentSeparator()}${this._renderTimeExtentEnd()}`;

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

@@ -1,22 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
-import { css as r, html as a } from "lit";
-import { LitElement as n, safeStyleMap as l } from "@arcgis/lumina";
-import { t as c } from "../../chunks/screenLocation.js";
-const p = r`:host{display:contents}.root{position:absolute}`;
-class m extends n {
+import { css as n, html as r } from "lit";
+import { LitElement as c, safeStyleMap as l } from "@arcgis/lumina";
+import { t as a } from "../../chunks/screenLocation.js";
+const p = n`:host{display:contents}.root{position:absolute}`;
+class m extends c {
   constructor() {
-    super(...arguments), this.autoDestroyDisabled = !1, this.trackLocation = !1, this.screenLocation = c(this);
+    super(...arguments), this.trackLocation = !1, this.screenLocation = a(this);
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, trackLocation: 5, screenLocation: 32, label: 1, location: 0, view: 0 };
+    this.properties = { trackLocation: 5, screenLocation: 32, label: 1, location: 0, view: 0 };
   }
   static {
     this.styles = p;
   }
-  async destroy() {
-    await this.manager.destroy();
-  }
   _getPositionStyles() {
     const { screenLocation: t, view: s } = this;
     if (s == null || t == null)
@@ -29,7 +26,7 @@ class m extends n {
     };
   }
   render() {
-    return this.screenLocation ? a`<calcite-loader class="root" .label=${this.label ?? ""} inline style=${l(this._getPositionStyles())}></calcite-loader>` : null;
+    return this.screenLocation ? r`<calcite-loader class="root" .label=${this.label ?? ""} inline style=${l(this._getPositionStyles())}></calcite-loader>` : null;
   }
 }
 i("arcgis-spinner", m);

package/dist/components/arcgis-utility-network-validate-network-topology/customElement.d.ts

@@ -91,10 +91,7 @@ export type State = Disabled | Executing | Loading | Ready | Success | ValidateN
  * </calcite-shell>
  * ```
  *
- * <video>
- *   <source src="https://developers.arcgis.com/javascript/latest/assets/references/core/components/utility-network-validate-network-topology/validate-topology-example.webm" autoplay loop muted playsinline type="video/webm">
- *   Your browser does not support the video tag.
- * </video>
+ * <video src="https://developers.arcgis.com/javascript/latest/assets/references/components/utility-network-validate-network-topology/validate-topology-example.webm" autoplay loop muted playsInline></video>
  *
  * @since 5.1
  * @see [Network topology](https://pro.arcgis.com/en/pro-app/latest/help/data/utility-network/about-network-topology.htm)