@arcgis/map-components 5.2.0-next.59 → 5.2.0-next.60

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

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

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

@@ -0,0 +1,2 @@
+import "../arcgis-time-bar-date/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,352 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as $ } from "../../chunks/runtime.js";
+import { css as y, html as n } from "lit";
+import v from "@arcgis/core/time/TimeExtent.js";
+import u from "@arcgis/core/time/TimeInterval.js";
+import { LitElement as w, safeClassMap as p } from "@arcgis/lumina";
+import { createRef as o, ref as r } from "lit/directives/ref.js";
+import { i as m, a as l, d as b, f as _, b as f } from "../../chunks/dateUtils.js";
+import { u as h, s as g, r as c } from "../../chunks/time-utils.js";
+const I = "TimeBar", T = "Count", k = "Please enter count", D = "Date", O = "Display", S = "Choose how to display date and time.", F = "End", U = "Choose the time bar's end time.", Z = "Every {count} {timeUnit}", C = "Every {duration}", x = { dateAndTime: "Date and time", dateOnly: "Date only" }, z = "Loop", E = "Mode", V = "Choose the time extent type shown by the time bar.", R = { "cumulative-from-end": "Cumulative from end", "cumulative-from-start": "Cumulative from start", instant: "Instant", "time-window": "Time window" }, B = "Next", P = "Overview", M = "Play", L = "Playback rate", N = "The speed at which the time bar progresses.", q = "Previous", A = "Regular interval", j = "Settings", G = "Start", H = "Choose the time bar's start time.", W = "Stop", Y = { discreteDates: "Discrete dates", evenlySpaced: "Evenly spaced", evenlySpacedTemplate: "{count} evenly spaced", freeMovement: "Free movement" }, J = "Stops", K = "Choose how the stops are generated for the time bar.", Q = "Time", X = "Time bar settings", tt = { day: "Day", hour: "Hour", millisecond: "Millisecond", minute: "Minute", month: "Month", second: "Second", week: "Week", year: "Year" }, et = "Time zone", it = "Choose the time zone used to display the date and time in the time bar.", st = { specific: "Specific time zone", system: "Device time zone", unknown: "No adjustment" }, at = "Unit", nt = "Please select unit", lt = "Units", ct = {
+  componentLabel: I,
+  count: T,
+  countPrompt: k,
+  date: D,
+  display: O,
+  displayDescription: S,
+  end: F,
+  endDescription: U,
+  everyDurationPartsTemplate: Z,
+  everyDurationTemplate: C,
+  formatOptions: x,
+  loop: z,
+  mode: E,
+  modeDescription: V,
+  modeOptions: R,
+  next: B,
+  overview: P,
+  play: M,
+  playbackRate: L,
+  playbackRateDescription: N,
+  previous: q,
+  regularInterval: A,
+  settings: j,
+  start: G,
+  startDescription: H,
+  stop: W,
+  stopOptions: Y,
+  stops: J,
+  stopsDescription: K,
+  time: Q,
+  timeBarSettings: X,
+  timeUnitOptions: tt,
+  timeZone: et,
+  timeZoneDescription: it,
+  timeZoneOptions: st,
+  unit: at,
+  unitPrompt: nt,
+  units: lt
+}, ot = y`:host{background-color:var(--calcite-color-surface-2);block-size:calc(var(--calcite-font-size-relative-5xl) * 8);color:var(--calcite-color-text-1);font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:max-content}calcite-flow-item{--calcite-color-background: var(--calcite-color-surface-2)}.disabled{opacity:var(--calcite-opacity-disabled);pointer-events:none}.playback-rate-content{margin-inline-start:var(--calcite-spacing-lg);margin-inline-end:var(--calcite-spacing-lg);margin-block-start:var(--calcite-spacing-lg)}.end-content,.format-content,.mode-content,.start-content,.stops-content,.time-zone-content{margin-inline-start:calc(var(--calcite-spacing-lg) * 3);margin-inline-end:var(--calcite-spacing-lg);margin-block-start:var(--calcite-spacing-lg)}.stops-indent,.time-zone-indent{margin-inline-start:calc(var(--calcite-spacing-lg) * 1.5);margin-block-end:var(--calcite-spacing-lg)}.label-description{font-style:italic}.label-heading{font-weight:var(--calcite-font-weight-semibold)}.list-item--content{--calcite-label-margin-bottom: 0}.time-zone-input{width:calc(var(--calcite-size-md) * 5.5)}.time-zone-label{--calcite-color-background: transparent;--calcite-color-border-input: transparent;font-style:italic;margin-inline-start:calc(var(--calcite-spacing-md) * -1);margin-block-start:calc(var(--calcite-spacing-md) * -.5)}`;
+class rt extends w {
+  constructor() {
+    super(...arguments), this.#e = o(), this.#i = o(), this.#s = o(), this.#a = o(), this.#t = {
+      maximumFractionDigits: 0,
+      style: "unit",
+      unitDisplay: "long"
+    }, this._selectedFlowItem = "overview", this.autoDestroyDisabled = !1;
+  }
+  static {
+    this.properties = { _timeUnitSettings: 16, _defaultTimeZoneMode: 16, _defaultStopCount: 16, _defaultStopIntervalValue: 16, _defaultStopIntervalUnit: 16, _messages: 16, _timeZoneMode: 16, _stopCount: 16, _stopIntervalValue: 16, _stopIntervalUnit: 16, _formatDescription: 16, _playbackRateDescription: 16, _formatStart: 16, _formatEnd: 16, _modeDescription: 16, _selectedFlowItem: 16, _stopDescription: 16, autoDestroyDisabled: 5, messages: 0, viewModel: 0 };
+  }
+  static {
+    this.styles = ot;
+  }
+  #n;
+  #l;
+  #c;
+  #o;
+  #e;
+  #i;
+  #s;
+  #a;
+  #t;
+  get _timeUnitSettings() {
+    const t = {
+      milliseconds: {
+        timeUnit: "milliseconds",
+        heading: this._messages.timeUnitOptions.millisecond,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "millisecond"
+        }
+      },
+      seconds: {
+        timeUnit: "seconds",
+        heading: this._messages.timeUnitOptions.second,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "second"
+        }
+      },
+      minutes: {
+        timeUnit: "minutes",
+        heading: this._messages.timeUnitOptions.minute,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "minute"
+        }
+      },
+      hours: {
+        timeUnit: "hours",
+        heading: this._messages.timeUnitOptions.hour,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "hour"
+        }
+      },
+      days: {
+        timeUnit: "days",
+        heading: this._messages.timeUnitOptions.day,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "day"
+        }
+      },
+      weeks: {
+        timeUnit: "weeks",
+        heading: this._messages.timeUnitOptions.week,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "week"
+        }
+      },
+      months: {
+        timeUnit: "months",
+        heading: this._messages.timeUnitOptions.month,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "month"
+        }
+      },
+      years: {
+        timeUnit: "years",
+        heading: this._messages.timeUnitOptions.year,
+        numberFormatOptions: {
+          ...this.#t,
+          unit: "year"
+        }
+      }
+    };
+    return {
+      get: (e) => t[e],
+      has: (e) => e in t,
+      values: Object.values(t)
+    };
+  }
+  get _defaultTimeZoneMode() {
+    switch (this.viewModel?.timeZone) {
+      case g:
+      case void 0:
+        return "system";
+      case h:
+        return "unknown";
+      default:
+        return "specific";
+    }
+  }
+  get _defaultStopCount() {
+    return m(this.viewModel?.stops) ? this.viewModel.stops.count : 10;
+  }
+  get _defaultStopIntervalValue() {
+    return l(this.viewModel?.stops) ? this.viewModel.stops.interval.value : 1;
+  }
+  get _defaultStopIntervalUnit() {
+    return l(this.viewModel?.stops) ? this.viewModel.stops.interval.unit : "years";
+  }
+  get _messages() {
+    return this.messages ?? ct;
+  }
+  get _timeZoneMode() {
+    return this.#o ?? this._defaultTimeZoneMode;
+  }
+  set _timeZoneMode(t) {
+    const e = this._timeZoneMode;
+    e !== t && (this.#o = t, this.requestUpdate("_timeZoneMode", e));
+  }
+  get _stopCount() {
+    return this.#n ?? this._defaultStopCount;
+  }
+  set _stopCount(t) {
+    const e = this._stopCount;
+    e !== t && (this.#n = t, this.requestUpdate("_stopCount", e));
+  }
+  get _stopIntervalValue() {
+    return this.#l ?? this._defaultStopIntervalValue;
+  }
+  set _stopIntervalValue(t) {
+    const e = this._stopIntervalValue;
+    e !== t && (this.#l = t, this.requestUpdate("_stopIntervalValue", e));
+  }
+  get _stopIntervalUnit() {
+    return this.#c ?? this._defaultStopIntervalUnit;
+  }
+  set _stopIntervalUnit(t) {
+    const e = this._stopIntervalUnit;
+    e !== t && (this.#c = t, this.requestUpdate("_stopIntervalUnit", e));
+  }
+  get _formatDescription() {
+    switch (this.viewModel?.format) {
+      case "date":
+        return this._messages.formatOptions.dateOnly;
+      case "date-time":
+        return this._messages.formatOptions.dateAndTime;
+      default:
+        return "";
+    }
+  }
+  get _playbackRateDescription() {
+    const { viewModel: t } = this;
+    if (!t)
+      return "";
+    const e = t.formatNumber(t.playRate, this._timeUnitSettings.get("milliseconds").numberFormatOptions);
+    return this._messages.everyDurationTemplate.replace("{duration}", e);
+  }
+  get _formatStart() {
+    const { viewModel: t } = this, e = t?.fullTimeExtent?.start;
+    return e ? t.formatDateTime(e) : "";
+  }
+  get _formatEnd() {
+    const { viewModel: t } = this, e = t?.fullTimeExtent?.end;
+    return e ? t.formatDateTime(e) : "";
+  }
+  get _modeDescription() {
+    const t = this.viewModel?.mode;
+    return t ? this._messages.modeOptions[t] : "";
+  }
+  get _stopDescription() {
+    const { viewModel: t } = this, e = t?.stops;
+    if (!e)
+      return this._messages.stopOptions.freeMovement;
+    if (m(e))
+      return this._messages.stopOptions.evenlySpacedTemplate.replace("{count}", `${e.count}`);
+    if (l(e)) {
+      const { value: i, unit: s } = e.interval;
+      if (!this._timeUnitSettings.has(s))
+        return this._messages.everyDurationPartsTemplate.replace("{count}", `${i}`).replace("{timeUnit}", s);
+      const a = this._timeUnitSettings.get(s).numberFormatOptions, d = t.formatNumber(i, a);
+      return this._messages.everyDurationTemplate.replace("{duration}", d);
+    }
+    return this._messages.stopOptions.discreteDates;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  async navigateToOverview() {
+    this._selectedFlowItem = "overview";
+  }
+  #r() {
+    const { viewModel: t } = this;
+    if (!t?.fullTimeExtent || !this.#e.value?.value || !this.#i.value?.value)
+      return;
+    const e = this.#e.value.value, i = this.#i.value.value, s = c(t.timeZone), a = b(e, i, s);
+    a && (t.fullTimeExtent = new v({
+      start: t.fullTimeExtent.start,
+      end: a
+    }));
+  }
+  #m() {
+    const { viewModel: t } = this;
+    if (!t?.fullTimeExtent || !this.#s.value?.value || !this.#a.value?.value)
+      return;
+    const e = this.#s.value.value, i = this.#a.value.value, s = c(t.timeZone), a = b(e, i, s);
+    if (!a)
+      return;
+    const { end: d } = t.fullTimeExtent;
+    t.fullTimeExtent = new v({ start: a, end: d });
+  }
+  render() {
+    const { viewModel: t } = this;
+    if (!t)
+      return null;
+    const { disabled: e } = t;
+    return n`<div class=${p({ disabled: e })}><calcite-flow>${this.#h(t)}${this.#d(t)}${this.#u(t)}${this.#p(t)}${this.#g(t)}${this.#v(t)}${this.#b(t)}${this.#_(t)}</calcite-flow></div>`;
+  }
+  #d(t) {
+    if (this._selectedFlowItem !== "end")
+      return null;
+    const { fullTimeExtent: e, disabled: i, timeZone: s } = t;
+    if (!e?.end)
+      return null;
+    const a = c(s);
+    return n`<calcite-flow-item .description=${this._messages.endDescription} .heading=${this._messages.end} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="end-content"><calcite-label><span>${this._messages.date}</span><calcite-input-date-picker .disabled=${i} @calciteInputDatePickerChange=${this.#r} .value=${_(e.end, a)} ${r(this.#e)}></calcite-input-date-picker></calcite-label><calcite-label><span>${this._messages.time}</span><calcite-input-time-picker .disabled=${i} @calciteInputTimePickerChange=${this.#r} step=1 .value=${f(e.end, a)} ${r(this.#i)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
+  }
+  #u(t) {
+    return this._selectedFlowItem !== "format" ? null : n`<calcite-flow-item .description=${this._messages.displayDescription} .heading=${this._messages.display} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="format-content"><calcite-radio-button-group class="format-radio-button-group" layout=vertical name=format @calciteRadioButtonGroupChange=${(e) => t.format = e.currentTarget.selectedItem?.value}><calcite-radio-button .labelText=${this._messages.formatOptions.dateOnly} value=date .checked=${t.format === "date"}></calcite-radio-button><calcite-radio-button .checked=${t.format === "date-time"} .labelText=${this._messages.formatOptions.dateAndTime} value=date-time></calcite-radio-button></calcite-radio-button-group></div></calcite-flow-item>`;
+  }
+  #p(t) {
+    if (this._selectedFlowItem !== "mode")
+      return null;
+    const e = ["instant", "time-window", "cumulative-from-start", "cumulative-from-end"];
+    return n`<calcite-flow-item .description=${this._messages.modeDescription} .heading=${this._messages.mode} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="mode-content"><calcite-radio-button-group name=mode layout=vertical @calciteRadioButtonGroupChange=${(i) => t.mode = i.currentTarget.selectedItem?.value} class="mode-radio-button-group">${e.map((i) => n`<calcite-radio-button .labelText=${this._messages.modeOptions[i]} .value=${i} .checked=${t.mode === i}></calcite-radio-button>`)}</calcite-radio-button-group></div></calcite-flow-item>`;
+  }
+  #h(t) {
+    return n`<calcite-flow-item .selected=${this._selectedFlowItem === "overview"}><calcite-list .label=${this._messages.overview}><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "format"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${this._messages.display}</calcite-label><calcite-label class="label-description">${this._formatDescription}</calcite-label></div><calcite-icon slot=content-end scale=s icon=chevron-right flip-rtl></calcite-icon></calcite-list-item><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "mode"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${this._messages.mode}</calcite-label><calcite-label class="label-description">${this._modeDescription}</calcite-label></div><calcite-icon slot=content-end scale=s icon=chevron-right flip-rtl></calcite-icon></calcite-list-item><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "time-zone"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${this._messages.timeZone}</calcite-label>${this.#f()}</div><calcite-icon slot=content-end scale=s icon=chevron-right flip-rtl></calcite-icon></calcite-list-item><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "start"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${this._messages.start}</calcite-label><calcite-label class="label-description">${this._formatStart}</calcite-label></div><calcite-icon slot=content-end scale=s icon=chevron-right flip-rtl></calcite-icon></calcite-list-item><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "end"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${this._messages.end}</calcite-label><calcite-label class="label-description">${this._formatEnd}</calcite-label></div><calcite-icon slot=content-end scale=s icon=chevron-right flip-rtl></calcite-icon></calcite-list-item><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "stops"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${this._messages.stops}</calcite-label><calcite-label class="label-description">${this._stopDescription}</calcite-label></div><calcite-icon slot=content-end scale=s icon=chevron-right flip-rtl></calcite-icon></calcite-list-item><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "playback-rate"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${this._messages.playbackRate}</calcite-label><calcite-label class="label-description">${this._playbackRateDescription}</calcite-label></div><calcite-icon slot=content-end scale=s icon=chevron-right flip-rtl></calcite-icon></calcite-list-item><calcite-list-item><calcite-label slot=content class="label-heading">${this._messages.loop}</calcite-label><calcite-switch .checked=${t.loop} .label=${this._messages.loop} @calciteSwitchChange=${(e) => t.loop = e.target.checked} slot=content-end></calcite-switch></calcite-list-item></calcite-list></calcite-flow-item>`;
+  }
+  #g(t) {
+    if (this._selectedFlowItem !== "playback-rate")
+      return null;
+    const { playRate: e, disabled: i } = t;
+    return n`<calcite-flow-item .description=${this._messages.playbackRateDescription} .heading=${this._messages.playbackRate} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="playback-rate-content"><arcgis-slider .disabled=${i} .labelFormatter=${(s) => t.formatNumber(s, this._timeUnitSettings.get("milliseconds").numberFormatOptions)} max=2000 min=100 @arcgisChange=${(s) => t.playRate = s.target.values[0]} precision=0 steps=10 value-labels-display=always .values=${[e]}><arcgis-ticks max=2000 min=100 mode=value show-labels slot=content-end style="flex:1;" .values=${[100, 500, 1e3, 1500, 2e3]}></arcgis-ticks></arcgis-slider></div></calcite-flow-item>`;
+  }
+  #v(t) {
+    if (this._selectedFlowItem !== "start")
+      return null;
+    const { fullTimeExtent: e, disabled: i, timeZone: s } = t;
+    if (!e?.start)
+      return null;
+    const a = c(s);
+    return n`<calcite-flow-item .description=${this._messages.startDescription} .heading=${this._messages.start} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="start-content"><calcite-label><span>${this._messages.date}</span><calcite-input-date-picker .disabled=${i} @calciteInputDatePickerChange=${this.#m} .value=${_(e.start, a)} ${r(this.#s)}></calcite-input-date-picker></calcite-label><calcite-label><span>${this._messages.time}</span><calcite-input-time-picker .disabled=${i} @calciteInputTimePickerChange=${this.#m} step=1 .value=${f(e.start, a)} ${r(this.#a)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
+  }
+  #b(t) {
+    return this._selectedFlowItem !== "stops" ? null : n`<calcite-flow-item .description=${this._messages.stopsDescription} .heading=${this._messages.stops} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="stops-content"><calcite-radio-button-group .disabled=${t.disabled} class="mode-radio-button-group" layout=vertical name=stops><calcite-radio-button .checked=${!t.stops} .labelText=${this._messages.stopOptions.freeMovement} @calciteRadioButtonChange=${() => {
+      t.stops = void 0;
+    }} value></calcite-radio-button><calcite-radio-button .checked=${m(t.stops)} .labelText=${this._messages.stopOptions.evenlySpaced} @calciteRadioButtonChange=${() => {
+      t.stops = { count: 10 };
+    }} value></calcite-radio-button><div class="stops-indent"><calcite-input-number .disabled=${t.disabled || !m(t.stops)} integer min=1 .placeholder=${this._messages.countPrompt} .value=${`${this._stopCount}`} @calciteInputNumberChange=${(e) => {
+      const i = Number.parseInt(e.currentTarget.value, 10);
+      t.stops = { count: i };
+    }}></calcite-input-number></div><calcite-radio-button .checked=${l(t.stops)} .labelText=${this._messages.regularInterval} @calciteRadioButtonChange=${() => {
+      t.stops = {
+        interval: new u({ value: this._stopIntervalValue, unit: this._stopIntervalUnit })
+      };
+    }} value></calcite-radio-button><div class="stops-indent"><calcite-label><span class=${p({ disabled: t.disabled || !l(t.stops) })}>${this._messages.count}</span><calcite-input-number .disabled=${t.disabled || !l(t.stops)} integer min=1 .placeholder=${this._messages.countPrompt} .value=${`${this._stopIntervalValue}`} @calciteInputNumberChange=${(e) => {
+      this._stopIntervalValue = Number.parseInt(e.currentTarget.value, 10), t.stops = {
+        interval: new u({ value: this._stopIntervalValue, unit: this._stopIntervalUnit })
+      };
+    }}></calcite-input-number></calcite-label><calcite-label><span class=${p({ disabled: t.disabled || !l(t.stops) })}>${this._messages.unit}</span><calcite-combobox .disabled=${t.disabled || !l(t.stops)} .label=${this._messages.units} .placeholder=${this._messages.unitPrompt} selection-mode=single-persist @calciteComboboxChange=${(e) => {
+      this._stopIntervalUnit = e.currentTarget.selectedItems[0]?.value, t.stops = {
+        interval: new u({ value: this._stopIntervalValue, unit: this._stopIntervalUnit })
+      };
+    }}>${this._timeUnitSettings.values.map(({ timeUnit: e, heading: i }) => n`<calcite-combobox-item .value=${e} .heading=${i} .selected=${this._stopIntervalUnit === e}></calcite-combobox-item>`)}</calcite-combobox></calcite-label></div></calcite-radio-button-group></div></calcite-flow-item>`;
+  }
+  #_(t) {
+    return this._selectedFlowItem !== "time-zone" ? null : n`<calcite-flow-item .description=${this._messages.timeZoneDescription} .heading=${this._messages.timeZone} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="time-zone-content"><calcite-radio-button-group class="mode-radio-button-group" layout=vertical name=time-zone><calcite-radio-button .checked=${this._timeZoneMode === "system"} .labelText=${this._messages.timeZoneOptions.system} @calciteRadioButtonChange=${() => {
+      t.timeZone = g;
+    }} value></calcite-radio-button><calcite-radio-button .checked=${this._timeZoneMode === "unknown"} .labelText=${this._messages.timeZoneOptions.unknown} @calciteRadioButtonChange=${() => {
+      t.timeZone = h;
+    }} value></calcite-radio-button><calcite-radio-button .checked=${this._timeZoneMode === "specific"} .labelText=${this._messages.timeZoneOptions.specific} @calciteRadioButtonChange=${() => {
+      t.timeZone = g, this._timeZoneMode = "specific";
+    }} value></calcite-radio-button><div class="time-zone-indent"><calcite-input-time-zone class="time-zone-input" .disabled=${this._timeZoneMode !== "specific"} mode=region @calciteInputTimeZoneChange=${(e) => t.timeZone = e.target.value} .value=${c(t.timeZone)}></calcite-input-time-zone></div></calcite-radio-button-group></div></calcite-flow-item>`;
+  }
+  #f() {
+    const { viewModel: t } = this;
+    if (!t)
+      return null;
+    const { timeZone: e } = t;
+    return e === h ? n`<calcite-label class="label-description">${this._messages.timeZoneOptions.unknown}</calcite-label>` : n`<calcite-input-time-zone class="time-zone-label" mode=region overlay-positioning=fixed read-only .value=${c(e)}></calcite-input-time-zone>`;
+  }
+}
+$("arcgis-time-bar-settings", rt);
+export {
+  rt as ArcgisTimeBarSettings
+};

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

@@ -0,0 +1,18 @@
+import "@esri/calcite-components/components/calcite-flow";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-input-date-picker";
+import "@esri/calcite-components/components/calcite-input-time-picker";
+import "@esri/calcite-components/components/calcite-radio-button-group";
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-switch";
+import "@arcgis/common-components/components/arcgis-slider";
+import "@arcgis/common-components/components/arcgis-ticks";
+import "@esri/calcite-components/components/calcite-input-number";
+import "@esri/calcite-components/components/calcite-combobox";
+import "@esri/calcite-components/components/calcite-combobox-item";
+import "@esri/calcite-components/components/calcite-input-time-zone";
+export * from "./customElement.js";

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

@@ -0,0 +1,172 @@
+/// <reference path="../../index.d.ts" />
+import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type { TimeBarViewModel } from "../arcgis-time-bar/TimeBarViewModel.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+/**
+ * The `arcgis-time-bar-slider` component renders a time-based slider intended for use `arcgis-time-bar`'s "time-extent" slot.
+ *
+ * @slot [max    ] - A slot that displays a label for the end date of the slider. If not provided, a default label will be rendered.
+ * @slot [min    ] - A slot that displays a label for the start date of the slider. If not provided, a default label will be rendered.
+ * @slot [popover] - A slot that displays a popover's content while interacting with the slider's thumb or range. If not provided, a default content will be rendered.
+ * @since 5.2
+ * @example
+ * An example of a `<arcgis-time-bar-slider>` slotted into time-bar's `time-extent` slot.
+ * ```html
+ * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+ *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right">
+ *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
+ *   </arcgis-time-bar>
+ * </arcgis-map>
+ * ```
+ * ```js
+ * <script type="module">
+ *   const [TimeExtent] = await $arcgis.import([
+ *     "@arcgis/core/time/TimeExtent.js",
+ *   ]);
+ *
+ *   const viewElement = document.querySelector("arcgis-map");
+ *   const timeBarElement = document.querySelector("arcgis-time-bar");
+ *   const timeBarSliderElement = document.querySelector("arcgis-time-bar-slider");
+ *
+ *   const [_, timeBar] = await Promise.all([
+ *     viewElement.viewOnReady(),
+ *     timeBarElement.componentOnReady(),
+ *     timeBarSliderElement.componentOnReady(),
+ *   ]);
+ *
+ *   timeBar.fullTimeExtent = new TimeExtent({
+ *     start: new Date(2020, 0, 1),
+ *     end: new Date(2021, 0, 1),
+ *   });
+ * </script>
+ * ```
+ */
+export abstract class ArcgisTimeBarSlider extends LitElement {
+  /**
+   * This property is intended to be used when inserting an element in the "popover" slot.
+   * This property will return either a
+   * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or
+   * [TimeExtent](https://developers.arcgis.com/javascript/latest/references/core/time/TimeExtent/)
+   * depending if the user is interacting with either a slider thumb or slider track respectively.
+   *
+   * @example
+   * The following example demonstrates how to use the `activeValue` property to update the content of a popover while
+   * interacting with the slider's thumb or track.
+   *
+   * When the time-bar-slider's thumb is being dragged, the popover will display the day of the week associated with the thumb's position.
+   *
+   * When the time-bar-slider's track is being dragged, the popover will display the day of the week associated with the start and end of the time extent.
+   *
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-bar showPlay showNext showPrevious slot="top-right">
+   *     <arcgis-time-bar-slider slot="time-extent" showTimeExtentPopover>
+   *       <div slot="popover" style="color: red; font-weight: bold; text-align: center; width: 100px;" />
+   *     </arcgis-time-bar-slider>
+   *   </arcgis-time-bar>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, TimeInterval, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/time/TimeInterval.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   const timeBarElement = document.querySelector("arcgis-time-bar");
+   *   const timeBarSliderElement = document.querySelector("arcgis-time-bar-slider");
+   *   const popoverSlotElement = timeBarSliderElement.querySelector('[slot="popover"]');
+   *
+   *   const [_, timeBar, timeBarSlider] = await Promise.all([
+   *     viewElement.viewOnReady(),
+   *     timeBarElement.componentOnReady(),
+   *     timeBarSliderElement.componentOnReady(),
+   *   ]);
+   *
+   *   timeBar.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 5, 22),
+   *     end: new Date(2026, 5, 26),
+   *   });
+   *   timeBar.stops = {
+   *     interval: new TimeInterval({
+   *       value: 1,
+   *       unit: "days",
+   *     }),
+   *   };
+   *
+   * reactiveUtils.watch(
+   *   () => timeBarSlider.activeValue,
+   *   (activeValue) => {
+   *     if (!activeValue) {
+   *       popoverSlotElement.innerHTML = "";
+   *     }
+   *
+   *     // A date is returned when the user is interacting with the slider's thumb.
+   *     if (activeValue instanceof Date) {
+   *       popoverSlotElement.innerHTML = activeValue.toLocaleDateString(undefined, { weekday: "long" });
+   *       popoverSlotElement.style.width = "100px";
+   *     }
+   *
+   *     // A time extent is returned when the user is interacting with the slider's track.
+   *     if (activeValue instanceof TimeExtent) {
+   *       const start = activeValue.start?.toLocaleDateString(undefined, { weekday: "long" });
+   *       const end = activeValue.end?.toLocaleDateString(undefined, { weekday: "long" });
+   *       popoverSlotElement.innerHTML = `${start} - ${end}`;
+   *       popoverSlotElement.style.width = "150px";
+   *     }
+   *   },
+   *   { initial: true },
+   * );
+   * </script>
+   * ```
+   */
+  get activeValue(): Date | TimeExtent | undefined;
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar-slider/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * When `true`, displays a label for the end date of the slider.
+   * The contents of this label can be customized by providing a slotted element in the "max" slot.
+   *
+   * @default false
+   */
+  accessor showMax: boolean;
+  /**
+   * When `true`, displays a label for the start date of the slider.
+   * The contents of this label can be customized by providing a slotted element in the "min" slot.
+   *
+   * @default false
+   */
+  accessor showMin: boolean;
+  /**
+   * When `true`, displays tick marks and labels beneath the slider.
+   *
+   * @default false
+   */
+  accessor showTicks: boolean;
+  /**
+   * When `true`, displays a popover for while interacting the slider's thumb or range.
+   * The contents of this popover can be customized by providing a slotted element in the "popover" slot.
+   *
+   * @default false
+   */
+  accessor showTimeExtentPopover: boolean;
+  /**
+   * The view model for the time bar slider.
+   *
+   * @internal
+   */
+  accessor viewModel: TimeBarViewModel | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+}