@arcgis/map-components 5.1.0-next.11 → 5.1.0-next.111

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

@@ -0,0 +1,745 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+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 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 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 W } from "@arcgis/toolkit/log";
+import { u as X, r as tt } from "../../chunks/time-utils.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 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 = {
+  sf: { second: "numeric", fractionalSecondDigits: 3 },
+  s: { second: "numeric" },
+  ms: { minute: "numeric", second: "numeric" },
+  mi: { minute: "numeric" },
+  hm: { hour: "numeric", minute: "numeric" },
+  dm: { day: "numeric", month: "short" },
+  m: { month: "short" },
+  my: { month: "short", year: "numeric" },
+  y: { year: "numeric" }
+}, ut = [
+  n({ value: 1, unit: "milliseconds" }, { value: 20, unit: "milliseconds" }, a.sf),
+  n({ value: 2, unit: "milliseconds" }, { value: 50, unit: "milliseconds" }, a.sf),
+  n({ value: 5, unit: "milliseconds" }, { value: 100, unit: "milliseconds" }, a.sf),
+  n({ value: 10, unit: "milliseconds" }, { value: 200, unit: "milliseconds" }, a.sf),
+  n({ value: 20, unit: "milliseconds" }, { value: 500, unit: "milliseconds" }, a.sf),
+  n({ value: 50, unit: "milliseconds" }, { value: 1, unit: "seconds" }, a.s),
+  n({ value: 100, unit: "milliseconds" }, { value: 2, unit: "seconds" }, a.s),
+  n({ value: 200, unit: "milliseconds" }, { value: 5, unit: "seconds" }, a.s),
+  n({ value: 500, unit: "milliseconds" }, { value: 10, unit: "seconds" }, a.s),
+  n({ value: 1, unit: "seconds" }, { value: 20, unit: "seconds" }, a.ms),
+  n({ value: 2, unit: "seconds" }, { value: 30, unit: "seconds" }, a.ms),
+  n({ value: 5, unit: "seconds" }, { value: 1, unit: "minutes" }, a.mi),
+  n({ value: 10, unit: "seconds" }, { value: 2, unit: "minutes" }, a.mi),
+  n({ value: 20, unit: "seconds" }, { value: 5, unit: "minutes" }, a.mi),
+  n({ value: 40, unit: "seconds" }, { value: 10, unit: "minutes" }, a.mi),
+  n({ value: 1, unit: "minutes" }, { value: 30, unit: "minutes" }, a.hm),
+  n({ value: 2, unit: "minutes" }, { value: 1, unit: "hours" }, a.hm),
+  n({ value: 5, unit: "minutes" }, { value: 2, unit: "hours" }, a.hm),
+  n({ value: 10, unit: "minutes" }, { value: 4, unit: "hours" }, a.hm),
+  n({ value: 20, unit: "minutes" }, { value: 8, unit: "hours" }, a.hm),
+  n({ value: 40, unit: "minutes" }, { value: 12, unit: "hours" }, a.hm),
+  n({ value: 1, unit: "hours" }, { value: 1, unit: "days" }, a.dm),
+  n({ value: 2, unit: "hours" }, { value: 2, unit: "days" }, a.dm),
+  n({ value: 5, unit: "hours" }, { value: 4, unit: "days" }, a.dm),
+  n({ value: 10, unit: "hours" }, { value: 10, unit: "days" }, a.dm),
+  n({ value: 20, unit: "hours" }, { value: 15, unit: "days" }, a.dm),
+  n({ value: 1, unit: "days" }, { value: 20, unit: "days" }, a.dm),
+  n({ value: 2, unit: "days" }, { value: 1, unit: "months" }, a.m),
+  n({ value: 5, unit: "days" }, { value: 3, unit: "months" }, a.m),
+  n({ value: 10, unit: "days" }, { value: 6, unit: "months" }, a.my),
+  n({ value: 20, unit: "days" }, { value: 1, unit: "years" }, a.y),
+  n({ value: 1, unit: "months" }, { value: 2, unit: "years" }, a.y),
+  n({ value: 2, unit: "months" }, { value: 4, unit: "years" }, a.y),
+  n({ value: 5, unit: "months" }, { value: 10, unit: "years" }, a.y),
+  n({ value: 1, unit: "years" }, { value: 20, unit: "years" }, a.y),
+  n({ value: 2, unit: "years" }, { value: 50, unit: "years" }, a.y),
+  n({ value: 5, unit: "years" }, { value: 100, unit: "years" }, a.y),
+  n({ value: 10, unit: "years" }, { value: 200, unit: "years" }, a.y),
+  n({ value: 20, unit: "years" }, { value: 500, unit: "years" }, a.y),
+  n({ value: 50, unit: "years" }, { value: 1e3, unit: "years" }, a.y),
+  n({ value: 1, unit: "centuries" }, { value: 20, unit: "centuries" }, a.y),
+  n({ value: 2, unit: "centuries" }, { value: 50, unit: "centuries" }, a.y),
+  n({ value: 5, unit: "centuries" }, { value: 100, unit: "centuries" }, a.y),
+  n({ value: 10, unit: "centuries" }, { value: 200, unit: "centuries" }, a.y),
+  n({ value: 20, unit: "centuries" }, { value: 500, unit: "centuries" }, a.y),
+  n({ value: 50, unit: "centuries" }, { value: 1e3, unit: "centuries" }, a.y),
+  n({ value: 100, unit: "centuries" }, { value: 2e3, unit: "centuries" }, a.y),
+  n({ value: 200, unit: "centuries" }, { value: 5e3, unit: "centuries" }, a.y),
+  n({ value: 500, unit: "centuries" }, { value: 1e4, unit: "centuries" }, a.y),
+  n({ value: 1e3, unit: "centuries" }, { value: 2e4, unit: "centuries" }, a.y)
+];
+function dt(e) {
+  return ut.map(({ minorTick: t, majorTick: i, majorTickFormat: s }, r) => {
+    const o = new F(t), m = new F(i), c = o.toMilliseconds(), v = {
+      ...s,
+      timeZone: e
+    };
+    return { minor: o, major: m, duration: c, format: v, index: r };
+  });
+}
+function ht(e) {
+  return e === "position" ? "value" : e;
+}
+const S = { count: 10 };
+function vt(e) {
+  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.'
+  ), S) : e;
+}
+function O(e) {
+  return !!e && "count" in e;
+}
+function A(e) {
+  return !!e && "dates" in e;
+}
+function j(e) {
+  return !!e && "interval" in e;
+}
+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 > 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 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 > L)
+    return C(e, S.count);
+  const v = [];
+  let g = i;
+  for (; g.getTime() <= s.getTime(); )
+    v.push(new Date(g)), g = Z(g, r, o);
+  return v;
+}
+function z(e, t) {
+  const [i, s] = e;
+  if (i)
+    switch (t) {
+      case "time-window":
+        return s ? new f({ start: i, end: s }) : void 0;
+      case "cumulative-from-start":
+        return new f({ start: null, end: i });
+      case "cumulative-from-end":
+        return new f({ start: i, end: null });
+      case "instant":
+        return new f({ start: i, end: i });
+    }
+}
+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 = Z(m, r, o, s);
+  return c;
+}
+const I = /* @__PURE__ */ new WeakMap();
+function gt(e) {
+  const { locale: t, formatOptions: i } = e, s = yt(i), r = new Intl.DateTimeFormat(t, s);
+  return I.set(e, r), r;
+}
+function xt(e) {
+  return I.get(e) ?? gt(e);
+}
+function yt(e) {
+  return e.timeZone ? {
+    ...e,
+    timeZone: tt(e.timeZone)
+  } : e;
+}
+var wt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, V = (e) => {
+  throw TypeError(e);
+}, d = (e, t, i, s) => {
+  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, 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, 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;
+    return {
+      ...this.majorTickFormat,
+      era: this.majorTickFormat?.year ? e : void 0,
+      timeZone: t
+    };
+  }
+  get _dateFormat() {
+    const { era: e, timeZone: t } = this;
+    return { ...P("short-date"), era: e, timeZone: t };
+  }
+  get _effectiveStopValues() {
+    return this.effectiveStops?.map((e) => e.getTime()) ?? null;
+  }
+  get _thumbPositions() {
+    if (!this.timeExtent || this.timeExtent.isAllTime || this.timeExtent.isEmpty)
+      return null;
+    const { start: e, end: t } = this.timeExtent;
+    switch (this.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        return e ? [e.getTime()] : null;
+      case "cumulative-from-start":
+        return t ? [t.getTime()] : null;
+      case "time-window":
+        return e && t ? [e.getTime(), t.getTime()] : null;
+    }
+  }
+  get _timeFormat() {
+    const { timeZone: e } = this;
+    return { ...P("long-time"), timeZone: e };
+  }
+  get effectiveStops() {
+    const { fullTimeExtent: e, stops: t } = this;
+    if (!t)
+      return [];
+    if (A(t)) {
+      const { dates: s } = t;
+      if (!s?.length)
+        return;
+      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 p = x.getTime();
+        return p >= c && p <= v;
+      });
+    }
+    const i = t.timeExtent ?? e;
+    if (i)
+      return O(t) ? C(i, t.count) : pt(i, t.interval);
+  }
+  get era() {
+    return (this.fullTimeExtent?.start?.getFullYear() ?? 0) < 0 ? "short" : void 0;
+  }
+  get majorTickFormatter() {
+    return (e) => this._formatDate(e, this._adjustedMajorTickFormat);
+  }
+  set playRate(e) {
+    e <= 0 || e > 1e3 * 60 * 60 || (this.state === "playing" && this._startAnimation(), this._set("playRate", e));
+  }
+  get state() {
+    return this.fullTimeExtent ? this._animationController ? "playing" : "ready" : "disabled";
+  }
+  get tickFormats() {
+    return dt(this.timeZone);
+  }
+  get timeZone() {
+    return this._userTimeZone ?? this.viewTimeZone ?? "system";
+  }
+  set timeZone(e) {
+    this._userTimeZone = e ?? void 0;
+  }
+  get viewTimeZone() {
+    return this.view?.type === "2d" ? this.view.timeZone : void 0;
+  }
+  //#endregion
+  //#region Public Methods
+  destroy() {
+    $(this, E).abort(), this.view?.unregisterComponent(this), this._stopAnimation();
+  }
+  async initialize() {
+    this.addHandles([
+      b(
+        () => this.effectiveStops,
+        (e) => {
+          e && (this.timeExtent ??= z(e, this.mode));
+        },
+        { initial: !0 }
+      ),
+      b(
+        () => this.view,
+        (e, t) => {
+          t?.unregisterComponent(this), e?.registerComponent(this);
+        },
+        { initial: !0, sync: !0 }
+      ),
+      b(
+        () => this.timeExtent,
+        (e) => {
+          if (!this.view)
+            return;
+          const t = this.view.timeExtent;
+          (!e || e.isAllTime) && (!t || t.isAllTime) || t && e?.equals(t) || (this.view.timeExtent = e);
+        },
+        { initial: !0 }
+      ),
+      b(
+        () => this.view?.timeExtent,
+        (e) => {
+          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: $(this, E).signal }).then(async () => {
+        if (this.loadPersistedSettingsDisabled)
+          return;
+        const e = await ot(
+          this.view?.map,
+          $(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);
+      })
+    );
+  }
+  formatDate(e) {
+    return this._formatDate(e, this._dateFormat);
+  }
+  formatTime(e) {
+    return this._formatDate(e, this._timeFormat);
+  }
+  formatTick(e, t) {
+    return new Intl.DateTimeFormat(this.timeZone, t).format(new Date(e));
+  }
+  getTickValues(e) {
+    const { fullTimeExtent: t, timeZone: i } = this;
+    if (!t)
+      return [];
+    const { start: s, end: r } = t;
+    return !s || !r ? [] : ft(s, r, e, i).map((m) => m.getTime());
+  }
+  next() {
+    this._step({ forward: !0, allowRestart: !1 });
+  }
+  play() {
+    this._startAnimation();
+  }
+  previous() {
+    this._step({ forward: !1, allowRestart: !1 });
+  }
+  stop() {
+    this._stopAnimation();
+  }
+  updateWebDocument(e) {
+    if (this.savePersistedSettingsDisabled)
+      return;
+    const t = new st({
+      currentTimeExtent: this.timeExtent,
+      fullTimeExtent: this.fullTimeExtent,
+      loop: this.loop,
+      numStops: O(this.stops) ? this.stops.count : null,
+      numThumbs: this.mode === "time-window" ? 2 : 1,
+      stopDelay: this.playRate,
+      stopInterval: j(this.stops) ? this.stops.interval : null,
+      stops: A(this.stops) ? this.stops.dates : null
+    });
+    e.widgets ??= new it(), e.widgets.timeSlider = t;
+  }
+  //#endregion
+  //#region Private Methods
+  async _animate() {
+    try {
+      const { view: e } = this, t = this._animationController?.signal;
+      await Promise.all([at(this.playRate, t), e && M(() => !e.updating, t)]);
+    } catch (e) {
+      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();
+  }
+  _formatDate(e, t) {
+    return xt({ locale: this.locale, formatOptions: t }).format(e);
+  }
+  _startAnimation() {
+    this._stopAnimation(), this._animationController = new AbortController(), this._step({ forward: !0, allowRestart: !0 }), this._animate();
+  }
+  _step({ forward: e, allowRestart: t }) {
+    const i = this._thumbPositions, s = this._effectiveStopValues;
+    if (!i || !s)
+      return;
+    const r = i.map((c) => {
+      const v = s.indexOf(c);
+      if (v !== -1)
+        return v;
+      const g = s.reduce(
+        (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((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();
+    else {
+      const c = o.map((v) => s[v]);
+      this.timeExtent = this._toTimeExtent(c);
+    }
+  }
+  _stopAnimation() {
+    this._animationController?.abort(), this._animationController = void 0;
+  }
+  /**
+   * This method converts thumb position value(s) into a TimeExtent.
+   */
+  _toTimeExtent(e) {
+    if (!e)
+      return;
+    const t = [...e].sort((i, s) => i - s).map((i) => new Date(i));
+    return z(t, this.mode);
+  }
+  //#endregion
+};
+E = /* @__PURE__ */ new WeakMap();
+k = /* @__PURE__ */ new WeakMap();
+d([
+  h()
+], u.prototype, "_adjustedMajorTickFormat", 1);
+d([
+  h()
+], u.prototype, "_animationController", 2);
+d([
+  h()
+], u.prototype, "_dateFormat", 1);
+d([
+  h()
+], u.prototype, "_effectiveStopValues", 1);
+d([
+  h()
+], u.prototype, "_thumbPositions", 1);
+d([
+  h()
+], u.prototype, "_timeFormat", 1);
+d([
+  h()
+], u.prototype, "_userTimeZone", 2);
+d([
+  h()
+], u.prototype, "effectiveStops", 1);
+d([
+  h()
+], u.prototype, "era", 1);
+d([
+  h({ type: f })
+], u.prototype, "fullTimeExtent", 2);
+d([
+  h()
+], u.prototype, "loadPersistedSettingsDisabled", 2);
+d([
+  h()
+], u.prototype, "locale", 2);
+d([
+  h()
+], u.prototype, "loop", 2);
+d([
+  h()
+], u.prototype, "majorTickFormat", 2);
+d([
+  h()
+], u.prototype, "majorTickFormatter", 1);
+d([
+  h()
+], u.prototype, "mode", 2);
+d([
+  h({ value: 1e3 })
+], u.prototype, "playRate", 1);
+d([
+  h()
+], u.prototype, "savePersistedSettingsDisabled", 2);
+d([
+  h()
+], u.prototype, "state", 1);
+d([
+  h({ cast: vt })
+], u.prototype, "stops", 2);
+d([
+  h()
+], u.prototype, "tickFormats", 1);
+d([
+  h({ type: f })
+], u.prototype, "timeExtent", 2);
+d([
+  h()
+], u.prototype, "timeZone", 1);
+d([
+  h()
+], u.prototype, "view", 2);
+d([
+  h()
+], u.prototype, "viewTimeZone", 1);
+u = d([
+  Q("components.slider-time.SliderTimeViewModel")
+], u);
+const bt = lt(u);
+class Et extends q {
+  constructor() {
+    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, 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;
+  }
+  #n;
+  #a;
+  #r;
+  #o;
+  #e;
+  #i;
+  #c;
+  #m;
+  #l;
+  #s;
+  #t;
+  get _effectiveStopsEpoch() {
+    return this.effectiveStops?.map((t) => t.getTime());
+  }
+  get _interactive() {
+    return !(this.disabled || this.state === "disabled");
+  }
+  get _isOutOfRange() {
+    const { timeExtent: t, fullTimeExtent: i } = this, { start: s, end: r } = i ?? {};
+    if (!s || !r || !t || t.isAllTime || t.isEmpty)
+      return !0;
+    const { start: o, end: m } = t ?? {}, c = o != null && (o < s || o > r), v = m != null && (m > r || m < s);
+    return c || v;
+  }
+  get _sliderFillPlacement() {
+    switch (this.mode) {
+      case "cumulative-from-end":
+        return "end";
+      case "cumulative-from-start":
+        return "start";
+      case "instant":
+        return "none";
+      case "time-window":
+        return;
+    }
+  }
+  get effectiveLayout() {
+    return this.layout === "auto" ? this.el.clientWidth < this.#m ? "compact" : "wide" : this.layout;
+  }
+  async applyTimeSliderSettings(t) {
+    this.#t.set(t);
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  async next() {
+    this.#t.next();
+  }
+  async play() {
+    this.#t.play();
+  }
+  async previous() {
+    this.#t.previous();
+  }
+  async stop() {
+    this.#t.stop();
+  }
+  async updateWebDocument(t) {
+    this.#t.updateWebDocument(t);
+  }
+  willUpdate(t) {
+    t.has("messages") && (this.#t.locale = this.messages._lang);
+  }
+  updated(t) {
+    this.labelFormatFunction && ((t.has("labelFormatFunction") || t.has("timeExtent") || t.has("effectiveLayout")) && this.#s.value && this._formatExtent(this.#s.value), (t.has("labelFormatFunction") || t.has("fullTimeExtent") || t.has("effectiveLayout")) && (this.#e.value && this._formatMax(this.#e.value), this.#i.value && this._formatMin(this.#i.value)));
+  }
+  async loaded() {
+    this.manager.onLifecycle(() => [
+      b(() => this.#a.value, (t) => {
+        this._resizeObserver.disconnect(), t && (this._resizeObserver.observe(t), this._updateSliderWidthContainerWidth());
+      }, { initial: !0 }),
+      ct(() => {
+        this._resizeObserver.disconnect();
+      })
+    ]);
+  }
+  _formatExtent(t) {
+    this.labelFormatFunction?.([this.timeExtent?.start, this.timeExtent?.end], "extent", t, this.effectiveLayout);
+  }
+  _formatMin(t) {
+    this.labelFormatFunction?.(this.fullTimeExtent?.start, "min", t, this.effectiveLayout);
+  }
+  _formatMax(t) {
+    this.labelFormatFunction?.(this.fullTimeExtent?.end, "max", t, this.effectiveLayout);
+  }
+  _getTickFormat(t, i) {
+    const r = (t.end.getTime() - t.start.getTime()) / i;
+    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);
+  }
+  async _playOrStopClick() {
+    switch (this.state) {
+      case "disabled":
+      case "playing":
+        return await this.stop();
+      case "ready":
+        return await this.play();
+    }
+  }
+  _toTimeExtent([t, i]) {
+    switch (this.mode) {
+      case "cumulative-from-end":
+        return new f({
+          start: new Date(t),
+          end: null
+        });
+      case "cumulative-from-start":
+        return new f({
+          start: null,
+          end: new Date(t)
+        });
+      case "instant":
+        return new f({
+          start: new Date(t),
+          end: new Date(t)
+        });
+      case "time-window":
+        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 ?? 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 ?? 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();
+    switch (this.effectiveLayout) {
+      case "compact":
+        return l`<div class="row1">${v}${t}</div><div class="row2">${c}</div><div class="row3">${s}${m}${o}${r}${i}</div>`;
+      case "wide":
+        return l`<div class="row"><div class="playback-controls">${o}${v}${s}${c}${i}${m}${r}</div>${t}</div>`;
+    }
+  }
+  _renderCustomSliderTicks(t, i) {
+    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.#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" ${_(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;
+  }
+  _renderMaxDate(t) {
+    return l`<calcite-label class="max-date" scale=s>${this.#t.formatDate(t)}</calcite-label>`;
+  }
+  _renderMaxTime(t) {
+    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" ${_(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;
+  }
+  _renderMinDate(t) {
+    return l`<calcite-label class="min-date" scale=s>${this.#t.formatDate(t)}</calcite-label>`;
+  }
+  _renderMinTime(t) {
+    return this.showTime ? l`<calcite-label class="min-time" scale=s>${this.#t.formatTime(t)}</calcite-label>` : null;
+  }
+  _renderPlay() {
+    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"} 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"} title=${this.messages.pagination.next ?? w} width=full></calcite-button>`;
+  }
+  _renderSliderContainer() {
+    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.#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 ?? 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" ${_(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()}`;
+  }
+  _renderTimeExtentEnd() {
+    return this.timeExtent?.end && this.timeExtent.start?.getTime() !== this.timeExtent.end.getTime() ? y("time-extent-end-group", l`<div class="time-extent-end-group">${y("time-extent-end-date", l`<calcite-label alignment=center class="time-extent-end-date" scale=s>${this.#t.formatDate(this.timeExtent.end)}</calcite-label>`)}${this.showTime ? y("time-extent-end-time", l`<calcite-label alignment=center class="time-extent-end-time" scale=s>${this.#t.formatTime(this.timeExtent.end)}</calcite-label>`) : null}</div>`) : null;
+  }
+  _renderTimeExtentStart() {
+    return this.timeExtent?.start ? y("time-extent-start-group", l`<div class="time-extent-start-group">${y("time-extent-start-date", l`<calcite-label alignment=center class="time-extent-start-date" scale=s>${this.#t.formatDate(this.timeExtent.start)}</calcite-label>`)}${this.showTime ? y("time-extent-start-time", l`<calcite-label alignment=center class="time-extent-start-time" scale=s>${this.#t.formatTime(this.timeExtent.start)}</calcite-label>`) : null}</div>`) : null;
+  }
+  _renderTimeExtentSeparator() {
+    return this.timeExtent?.start && this.timeExtent?.end && this.timeExtent.start.getTime() !== this.timeExtent.end.getTime() ? y("time-extent-separator", l`<div class="time-extent-separator"></div>`) : null;
+  }
+  _renderTimeExtentValues() {
+    if (!this.timeExtent)
+      return;
+    const { start: t, end: i } = this.timeExtent;
+    switch (this.mode) {
+      case "cumulative-from-end":
+      case "instant":
+        return t ? [t.getTime()] : void 0;
+      case "cumulative-from-start":
+        return i ? [i.getTime()] : void 0;
+      case "time-window":
+        return t && i ? [t.getTime(), i.getTime()] : void 0;
+    }
+  }
+  _renderWarning(t) {
+    return l`<div class="warning"><calcite-icon class="warning-icon" icon=exclamation-mark-triangle></calcite-icon><calcite-label alignment=center class="warning-label" scale=s>${t}</calcite-label></div>`;
+  }
+}
+N("arcgis-slider-time", Et);
+export {
+  Et as ArcgisSliderTime
+};