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

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

@@ -1,53 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as f } from "../../chunks/runtime.js";
-import { css as _, html as n } from "lit";
+import { c as _ } from "../../chunks/runtime.js";
+import { css as f, html as l } from "lit";
 import h from "@arcgis/core/time/TimeExtent.js";
 import u from "@arcgis/core/time/TimeInterval.js";
-import { LitElement as $, safeClassMap as p } from "@arcgis/lumina";
+import { d as $ } from "../../chunks/messages.en.js";
+import { LitElement as I, 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 g, f as v, b } from "../../chunks/dateUtils.js";
-import { r as c, u as y } from "../../chunks/time-utils.js";
-const w = "TimeBar", I = "Count", T = "Please enter count", k = "Date", D = "Display", O = "Choose how to display date and time.", S = "End", F = "Choose the time bar's end time.", U = "Every {count} {timeUnit}", C = "Every {duration}", x = { dateAndTime: "Date and time", dateOnly: "Date only" }, E = "Loop", Z = "Mode", V = "Choose the time extent type shown by the time bar.", P = { "cumulative-from-end": "Cumulative from end", "cumulative-from-start": "Cumulative from start", instant: "Instant", "time-window": "Time window" }, R = "Next", z = "No adjustment", B = "Overview", L = "Play", N = "Playback rate", A = "The speed at which the time bar progresses.", j = "Previous", q = "Regular interval", G = "Settings", H = "Start", W = "Choose the time bar's start time.", Y = "Stop", J = { discreteDates: "Discrete dates", evenlySpaced: "Evenly spaced", evenlySpacedTemplate: "{count} evenly spaced", freeMovement: "Free movement" }, K = "Stops", M = "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 = "Unit", at = "Please select unit", nt = "Units", lt = {
-  componentLabel: w,
-  count: I,
-  countPrompt: T,
-  date: k,
-  display: D,
-  displayDescription: O,
-  end: S,
-  endDescription: F,
-  everyDurationPartsTemplate: U,
-  everyDurationTemplate: C,
-  formatOptions: x,
-  loop: E,
-  mode: Z,
-  modeDescription: V,
-  modeOptions: P,
-  next: R,
-  noTimeZoneAdjustment: z,
-  overview: B,
-  play: L,
-  playbackRate: N,
-  playbackRateDescription: A,
-  previous: j,
-  regularInterval: q,
-  settings: G,
-  start: H,
-  startDescription: W,
-  stop: Y,
-  stopOptions: J,
-  stops: K,
-  stopsDescription: M,
-  time: Q,
-  timeBarSettings: X,
-  timeUnitOptions: tt,
-  timeZone: et,
-  timeZoneDescription: it,
-  unit: st,
-  unitPrompt: at,
-  units: nt
-}, ct = _`: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{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-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 ot extends $ {
+import { i as m, a as n, d as g, f as v, b } from "../../chunks/dateUtils.js";
+import { r as c, u as w } from "../../chunks/time-utils.js";
+const y = f`: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{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-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 T extends I {
   constructor() {
     super(...arguments), this.#e = o(), this.#i = o(), this.#s = o(), this.#a = o(), this.#t = {
       maximumFractionDigits: 0,
@@ -59,10 +21,10 @@ class ot extends $ {
     this.properties = { _timeUnitSettings: 16, _defaultStopCount: 16, _defaultStopIntervalValue: 16, _defaultStopIntervalUnit: 16, _messages: 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 = ct;
+    this.styles = y;
   }
-  #n;
   #l;
+  #n;
   #c;
   #e;
   #i;
@@ -146,27 +108,27 @@ class ot extends $ {
     return m(this.viewModel?.stops) ? this.viewModel.stops.count : 10;
   }
   get _defaultStopIntervalValue() {
-    return l(this.viewModel?.stops) ? this.viewModel.stops.interval.value : 1;
+    return n(this.viewModel?.stops) ? this.viewModel.stops.interval.value : 1;
   }
   get _defaultStopIntervalUnit() {
-    return l(this.viewModel?.stops) ? this.viewModel.stops.interval.unit : "years";
+    return n(this.viewModel?.stops) ? this.viewModel.stops.interval.unit : "years";
   }
   get _messages() {
-    return this.messages ?? lt;
+    return this.messages ?? $;
   }
   get _stopCount() {
-    return this.#n ?? this._defaultStopCount;
+    return this.#l ?? this._defaultStopCount;
   }
   set _stopCount(t) {
     const e = this._stopCount;
-    e !== t && (this.#n = t, this.requestUpdate("_stopCount", e));
+    e !== t && (this.#l = t, this.requestUpdate("_stopCount", e));
   }
   get _stopIntervalValue() {
-    return this.#l ?? this._defaultStopIntervalValue;
+    return this.#n ?? this._defaultStopIntervalValue;
   }
   set _stopIntervalValue(t) {
     const e = this._stopIntervalValue;
-    e !== t && (this.#l = t, this.requestUpdate("_stopIntervalValue", e));
+    e !== t && (this.#n = t, this.requestUpdate("_stopIntervalValue", e));
   }
   get _stopIntervalUnit() {
     return this.#c ?? this._defaultStopIntervalUnit;
@@ -210,7 +172,7 @@ class ot extends $ {
       return this._messages.stopOptions.freeMovement;
     if (m(e))
       return this._messages.stopOptions.evenlySpacedTemplate.replace("{count}", `${e.count}`);
-    if (l(e)) {
+    if (n(e)) {
       const { value: i, unit: s } = e.interval;
       if (!this._timeUnitSettings.has(s))
         return this._messages.everyDurationPartsTemplate.replace("{count}", `${i}`).replace("{timeUnit}", s);
@@ -250,7 +212,7 @@ class ot extends $ {
     if (!t)
       return null;
     const { disabled: e } = t;
-    return n`<div class=${p({ disabled: e })}><calcite-flow>${this.#p(t)}${this.#m(t)}${this.#d(t)}${this.#u(t)}${this.#h(t)}${this.#g(t)}${this.#v(t)}${this.#b(t)}</calcite-flow></div>`;
+    return l`<div class=${p({ disabled: e })}><calcite-flow>${this.#p(t)}${this.#m(t)}${this.#d(t)}${this.#u(t)}${this.#h(t)}${this.#g(t)}${this.#v(t)}${this.#b(t)}</calcite-flow></div>`;
   }
   #m(t) {
     if (this._selectedFlowItem !== "end")
@@ -259,25 +221,25 @@ class ot extends $ {
     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.#o} .value=${v(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.#o} step=1 .value=${b(e.end, a)} ${r(this.#i)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
+    return l`<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.#o} .value=${v(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.#o} step=1 .value=${b(e.end, a)} ${r(this.#i)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
   }
   #d(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>`;
+    return this._selectedFlowItem !== "format" ? null : l`<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>`;
   }
   #u(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>`;
+    return l`<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) => l`<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>`;
   }
   #p(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>`;
+    return l`<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.#_()}</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>`;
   }
   #h(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>`;
+    return l`<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>`;
   }
   #g(t) {
     if (this._selectedFlowItem !== "start")
@@ -286,42 +248,42 @@ class ot extends $ {
     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.#r} .value=${v(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.#r} step=1 .value=${b(e.start, a)} ${r(this.#a)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
+    return l`<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.#r} .value=${v(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.#r} step=1 .value=${b(e.start, a)} ${r(this.#a)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
   }
   #v(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=${() => {
+    return this._selectedFlowItem !== "stops" ? null : l`<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=${() => {
+    }}></calcite-input-number></div><calcite-radio-button .checked=${n(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) => {
+    }} value></calcite-radio-button><div class="stops-indent"><calcite-label><span class=${p({ disabled: t.disabled || !n(t.stops) })}>${this._messages.count}</span><calcite-input-number .disabled=${t.disabled || !n(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) => {
+    }}></calcite-input-number></calcite-label><calcite-label><span class=${p({ disabled: t.disabled || !n(t.stops) })}>${this._messages.unit}</span><calcite-combobox .disabled=${t.disabled || !n(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>`;
+    }}>${this._timeUnitSettings.values.map(({ timeUnit: e, heading: i }) => l`<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>`;
   }
   #b(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"><arcgis-time-zone-selector .disabled=${t.disabled} .timeZone=${t.timeZone} @arcgisInternalTimeZoneChange=${(e) => t.timeZone = e.detail}></arcgis-time-zone-selector></div></calcite-flow-item>`;
+    return this._selectedFlowItem !== "time-zone" ? null : l`<calcite-flow-item .description=${this._messages.timeZoneDescription} .heading=${this._messages.timeZone} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="time-zone-content"><arcgis-time-zone-selector .disabled=${t.disabled} .timeZone=${t.timeZone} @arcgisInternalTimeZoneChange=${(e) => t.timeZone = e.detail}></arcgis-time-zone-selector></div></calcite-flow-item>`;
   }
-  #f() {
+  #_() {
     const { viewModel: t } = this;
     if (!t)
       return null;
     const { timeZone: e } = t;
-    return e === y ? n`<calcite-label class="label-description">${this._messages.noTimeZoneAdjustment}</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>`;
+    return e === w ? l`<calcite-label class="label-description">${this._messages.noTimeZoneAdjustment}</calcite-label>` : l`<calcite-input-time-zone class="time-zone-label" mode=region overlay-positioning=fixed read-only .value=${c(e)}></calcite-input-time-zone>`;
   }
 }
-f("arcgis-time-bar-settings", ot);
+_("arcgis-time-bar-settings", T);
 export {
-  ot as ArcgisTimeBarSettings
+  T as ArcgisTimeBarSettings
 };

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

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type { PopoverDisplay } from "../arcgis-time-bar/types.js";
 import type { TimeBarViewModel } from "../arcgis-time-bar/TimeBarViewModel.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
@@ -15,7 +16,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  * 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 show-play show-next show-previous show-time-extent slot="top-right">
  *     <arcgis-time-bar-slider slot="time-extent"></arcgis-time-bar-slider>
  *   </arcgis-time-bar>
  * </arcgis-map>
@@ -46,10 +47,18 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 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
+   * This property will return either `undefined`, a
+   * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or a
    * [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.
+   * depending on [popoverDisplay](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar-slider/#popoverDisplay) and user interaction.
+   *
+   * When the `popover-display` is set to:
+   * - `"none"`, this property will always return `undefined`
+   * - `"always"`, this property will always return [arcgis-time-bar.timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent),
+   * - `"auto"`, this property will either return a [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+   *             if the user is interacting with a slider thumb, or
+   *             [arcgis-time-bar.timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-bar/#timeExtent) if the user is interacting with a slider track, or
+   *             `undefined` if the user is not interacting with either a slider thumb or slider track.
    *
    * @example
    * The following example demonstrates how to use the `activeValue` property to update the content of a popover while
@@ -61,8 +70,8 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    *
    * ```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>
+   *   <arcgis-time-bar show-play show-next show-previous show-time-extent slot="top-right">
+   *     <arcgis-time-bar-slider slot="time-extent" popover-display="auto">
    *       <div slot="popover" style="color: red; font-weight: bold; text-align: center; width: 100px;" />
    *     </arcgis-time-bar-slider>
    *   </arcgis-time-bar>
@@ -144,6 +153,78 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    * 
    */
   accessor autoDestroyDisabled: boolean;
+  accessor messages: {
+      componentLabel: string;
+      count: string;
+      countPrompt: string;
+      date: string;
+      display: string;
+      displayDescription: string;
+      end: string;
+      endDescription: string;
+      everyDurationPartsTemplate: string;
+      everyDurationTemplate: string;
+      formatOptions: {
+          dateAndTime: string;
+          dateOnly: string;
+      };
+      loop: string;
+      mode: string;
+      modeDescription: string;
+      modeOptions: {
+          "cumulative-from-end": string;
+          "cumulative-from-start": string;
+          instant: string;
+          "time-window": string;
+      };
+      next: string;
+      noTimeZoneAdjustment: string;
+      overview: string;
+      play: string;
+      playbackRate: string;
+      playbackRateDescription: string;
+      previous: string;
+      regularInterval: string;
+      settings: string;
+      start: string;
+      startDescription: string;
+      stop: string;
+      stopOptions: {
+          discreteDates: string;
+          evenlySpaced: string;
+          evenlySpacedTemplate: string;
+          freeMovement: string;
+      };
+      stops: string;
+      stopsDescription: string;
+      time: string;
+      timeBarSettings: string;
+      timeExtent: string;
+      timeUnitOptions: {
+          day: string;
+          hour: string;
+          millisecond: string;
+          minute: string;
+          month: string;
+          second: string;
+          week: string;
+          year: string;
+      };
+      timeZone: string;
+      timeZoneDescription: string;
+      unit: string;
+      unitPrompt: string;
+      units: string;
+  } | undefined;
+  /**
+   * Defines how and when popovers are displayed for the slider's thumb or range.
+   * When `none`, popovers are not displayed.
+   * When `auto`, popovers are displayed automatically when interacting with a thumb or the slider's range.
+   * When `always`, popovers are always displayed. If the slider is in `time-window` mode, popovers are displayed for the slider range otherwise the thumb.
+   *
+   * @default "none"
+   */
+  accessor popoverDisplay: PopoverDisplay;
   /**
    * 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.
@@ -164,13 +245,6 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    * @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.
    *

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

@@ -1,21 +1,22 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as d } from "../../chunks/runtime.js";
-import { css as m, html as a } from "lit";
-import { ref as u } from "lit/directives/ref.js";
+import { c as m } from "../../chunks/runtime.js";
+import { css as u, html as a } from "lit";
+import { ref as h } from "lit/directives/ref.js";
 import o from "@arcgis/core/time/TimeExtent.js";
-import { LitElement as h, nothing as v, safeClassMap as g } from "@arcgis/lumina";
-const f = m`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto;--arcgis-internal-time-bar-slider-tick-gap: 100}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{--labels-container-width: 100%}.slider-container{flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%;arcgis-ticks,>slot::slotted(arcgis-ticks){inset:0;position:absolute;--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}`;
-class w extends h {
+import { d as v } from "../../chunks/messages.en.js";
+import { LitElement as g, nothing as c, safeClassMap as f } from "@arcgis/lumina";
+const p = u`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto;--arcgis-internal-time-bar-slider-tick-gap: 100}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{--labels-container-width: 100%}.slider-container{flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%;arcgis-ticks,>slot::slotted(arcgis-ticks){inset:0;position:absolute;--arcgis-ticks-font-weight: var(--calcite-font-weight-normal);--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}`;
+class w extends g {
   constructor() {
     super(...arguments), this.#t = new ResizeObserver(([e]) => {
       this._sliderWidth = e.contentRect.width;
-    }), this.#a = 100, this.#r = 100, this.autoDestroyDisabled = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1, this.showTimeExtentPopover = !1;
+    }), this.#a = 100, this.#r = 100, this.autoDestroyDisabled = !1, this.popoverDisplay = "none", this.showMax = !1, this.showMin = !1, this.showTicks = !1;
   }
   static {
-    this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, showMax: 5, showMin: 5, showTicks: 5, showTimeExtentPopover: 5, viewModel: 0 };
+    this.properties = { _activeValue: 16, _messages: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, messages: 0, popoverDisplay: 1, showMax: 5, showMin: 5, showTicks: 5, viewModel: 0 };
   }
   static {
-    this.styles = f;
+    this.styles = p;
   }
   #t;
   #i;
@@ -23,6 +24,9 @@ class w extends h {
   #e;
   #a;
   #r;
+  get _messages() {
+    return this.messages ?? v;
+  }
   get _sliderFillPlacement() {
     switch (this.viewModel?.mode) {
       case "cumulative-from-end":
@@ -55,13 +59,20 @@ class w extends h {
       }
   }
   get activeValue() {
-    switch (this._activeValue) {
-      case void 0:
+    switch (this.popoverDisplay) {
+      case "none":
         return;
-      case "all":
+      case "always":
         return this.viewModel?.timeExtent;
-      default:
-        return new Date(this._activeValue);
+      case "auto":
+        switch (this._activeValue) {
+          case void 0:
+            return;
+          case "all":
+            return this.viewModel?.timeExtent;
+          default:
+            return new Date(this._activeValue);
+        }
     }
   }
   async destroy() {
@@ -85,7 +96,7 @@ class w extends h {
     if (!i || !s || !r)
       return;
     const n = (r.getTime() - s.getTime()) / t;
-    return i.tickFormats.find(({ duration: c }) => c > this.#l() * n) ?? i.tickFormats.at(-1);
+    return i.tickFormats.find(({ duration: d }) => d > this.#l() * n) ?? i.tickFormats.at(-1);
   }
   #c(e) {
     this._activeValue = e.target.activeValue;
@@ -113,7 +124,7 @@ class w extends h {
     return this.showMin ? a`<slot name=min><arcgis-time-bar-date class="min-date" .date=${this.viewModel?.fullTimeExtent?.start} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
   }
   #v() {
-    return this.showTimeExtentPopover ? a`<div class="popover" slot=popover><slot name=popover>${this.#g()}</slot></div>` : null;
+    return this.popoverDisplay !== "none" ? a`<div class="popover" slot=popover><slot name=popover>${this.#g()}</slot></div>` : null;
   }
   #g() {
     return this.activeValue ? this.activeValue instanceof Date ? a`<arcgis-time-bar-date .date=${this.activeValue} .viewModel=${this.viewModel}></arcgis-time-bar-date>` : a`<arcgis-time-bar-extent .viewModel=${this.viewModel}></arcgis-time-bar-extent>` : null;
@@ -127,20 +138,20 @@ class w extends h {
       return null;
     (!this.#i || !this.#s || this.#i !== t) && (this.#i = t, this.#s = e.getTickValues(t.timeInterval), e.tickFormat = t.format);
     const i = e.fullTimeExtent.start.getTime(), s = e.fullTimeExtent.end.getTime();
-    return a`<div class="slider-container" ${u(this.#n())}><arcgis-slider allow-values-overlap class=${g({
+    return a`<div class="slider-container" ${h(this.#n())}><arcgis-slider allow-values-overlap class=${f({
       slider: !0,
       "slider--has-ticks": this.showTicks,
       "slider--out-of-range": e.isOutOfRange
-    })} .disabled=${!e.interactive} fill-placement=${this._sliderFillPlacement ?? v} .max=${s} .min=${i} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#d} precision=0 .steps=${e.effectiveStopsEpoch} .values=${this._timeExtentEpochValues}>${this.#v()}${this.#w(e, i, s)}</arcgis-slider></div>`;
+    })} .disabled=${!e.interactive} fill-placement=${this._sliderFillPlacement ?? c} .max=${s} .min=${i} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#d} popover-label=${this._messages.timeExtent ?? c} popover-display=${(this.popoverDisplay === "none" ? "auto" : this.popoverDisplay) ?? c} precision=0 .steps=${e.effectiveStopsEpoch} .values=${this._timeExtentEpochValues}>${this.#v()}${this.#p(e, i, s)}</arcgis-slider></div>`;
   }
-  #w(e, t, i) {
+  #p(e, t, i) {
     return this.showTicks ? a`<div slot=content-end class="ticks-container"><slot name=content-end><arcgis-ticks .labelFormatter=${e.tickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#s}></arcgis-ticks></slot></div>` : null;
   }
   render() {
     return a`<div class="root">${this.#h()}${this.#f()}${this.#u()}</div>`;
   }
 }
-d("arcgis-time-bar-slider", w);
+m("arcgis-time-bar-slider", w);
 export {
   w as ArcgisTimeBarSlider
 };