@arcgis/map-components 5.2.0-next.126 → 5.2.0-next.127

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

@@ -1,41 +1,43 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as _ } from "../../chunks/runtime.js";
-import { css as f, html as l } from "lit";
+import { css as I, html as n } from "lit";
 import h from "@arcgis/core/time/TimeExtent.js";
 import u from "@arcgis/core/time/TimeInterval.js";
-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 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 {
+import { LitElement as w, safeClassMap as p } from "@arcgis/lumina";
+import { createRef as r, ref as m } from "lit/directives/ref.js";
+import { i as d, a as c, d as v, f as b, b as g } from "../../chunks/dateUtils.js";
+import { r as o, u as y } from "../../chunks/time-utils.js";
+const T = I`: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 k extends w {
   constructor() {
-    super(...arguments), this.#e = o(), this.#i = o(), this.#s = o(), this.#a = o(), this.#t = {
+    super(...arguments), this.#e = r(), this.#i = r(), this.#a = r(), this.#l = r(), this.#t = {
       maximumFractionDigits: 0,
       style: "unit",
       unitDisplay: "long"
     }, this._selectedFlowItem = "overview", this.autoDestroyDisabled = !1;
   }
   static {
-    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 };
+    this.properties = { _timeUnitSettings: 16, _defaultStopCount: 16, _defaultStopIntervalValue: 16, _defaultStopIntervalUnit: 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 = y;
+    this.styles = T;
   }
-  #l;
+  #s;
   #n;
   #c;
   #e;
   #i;
-  #s;
   #a;
+  #l;
   #t;
   get _timeUnitSettings() {
-    const t = {
+    const { messages: t } = this;
+    if (!t)
+      return;
+    const e = {
       milliseconds: {
         timeUnit: "milliseconds",
-        heading: this._messages.timeUnitOptions.millisecond,
+        heading: t.timeUnitOptions.millisecond,
         numberFormatOptions: {
           ...this.#t,
           unit: "millisecond"
@@ -43,7 +45,7 @@ class T extends I {
       },
       seconds: {
         timeUnit: "seconds",
-        heading: this._messages.timeUnitOptions.second,
+        heading: t.timeUnitOptions.second,
         numberFormatOptions: {
           ...this.#t,
           unit: "second"
@@ -51,7 +53,7 @@ class T extends I {
       },
       minutes: {
         timeUnit: "minutes",
-        heading: this._messages.timeUnitOptions.minute,
+        heading: t.timeUnitOptions.minute,
         numberFormatOptions: {
           ...this.#t,
           unit: "minute"
@@ -59,7 +61,7 @@ class T extends I {
       },
       hours: {
         timeUnit: "hours",
-        heading: this._messages.timeUnitOptions.hour,
+        heading: t.timeUnitOptions.hour,
         numberFormatOptions: {
           ...this.#t,
           unit: "hour"
@@ -67,7 +69,7 @@ class T extends I {
       },
       days: {
         timeUnit: "days",
-        heading: this._messages.timeUnitOptions.day,
+        heading: t.timeUnitOptions.day,
         numberFormatOptions: {
           ...this.#t,
           unit: "day"
@@ -75,7 +77,7 @@ class T extends I {
       },
       weeks: {
         timeUnit: "weeks",
-        heading: this._messages.timeUnitOptions.week,
+        heading: t.timeUnitOptions.week,
         numberFormatOptions: {
           ...this.#t,
           unit: "week"
@@ -83,7 +85,7 @@ class T extends I {
       },
       months: {
         timeUnit: "months",
-        heading: this._messages.timeUnitOptions.month,
+        heading: t.timeUnitOptions.month,
         numberFormatOptions: {
           ...this.#t,
           unit: "month"
@@ -91,7 +93,7 @@ class T extends I {
       },
       years: {
         timeUnit: "years",
-        heading: this._messages.timeUnitOptions.year,
+        heading: t.timeUnitOptions.year,
         numberFormatOptions: {
           ...this.#t,
           unit: "year"
@@ -99,29 +101,26 @@ class T extends I {
       }
     };
     return {
-      get: (e) => t[e],
-      has: (e) => e in t,
-      values: Object.values(t)
+      get: (i) => e[i],
+      has: (i) => i in e,
+      values: Object.values(e)
     };
   }
   get _defaultStopCount() {
-    return m(this.viewModel?.stops) ? this.viewModel.stops.count : 10;
+    return d(this.viewModel?.stops) ? this.viewModel.stops.count : 10;
   }
   get _defaultStopIntervalValue() {
-    return n(this.viewModel?.stops) ? this.viewModel.stops.interval.value : 1;
+    return c(this.viewModel?.stops) ? this.viewModel.stops.interval.value : 1;
   }
   get _defaultStopIntervalUnit() {
-    return n(this.viewModel?.stops) ? this.viewModel.stops.interval.unit : "years";
-  }
-  get _messages() {
-    return this.messages ?? $;
+    return c(this.viewModel?.stops) ? this.viewModel.stops.interval.unit : "years";
   }
   get _stopCount() {
-    return this.#l ?? this._defaultStopCount;
+    return this.#s ?? this._defaultStopCount;
   }
   set _stopCount(t) {
     const e = this._stopCount;
-    e !== t && (this.#l = t, this.requestUpdate("_stopCount", e));
+    e !== t && (this.#s = t, this.requestUpdate("_stopCount", e));
   }
   get _stopIntervalValue() {
     return this.#n ?? this._defaultStopIntervalValue;
@@ -138,21 +137,23 @@ class T extends I {
     e !== t && (this.#c = t, this.requestUpdate("_stopIntervalUnit", e));
   }
   get _formatDescription() {
-    switch (this.viewModel?.format) {
+    const { messages: t, viewModel: e } = this;
+    if (!t || !e)
+      return "";
+    const { format: i } = e;
+    switch (i) {
       case "date":
-        return this._messages.formatOptions.dateOnly;
+        return t.formatOptions.dateOnly;
       case "date-time":
-        return this._messages.formatOptions.dateAndTime;
-      default:
-        return "";
+        return t.formatOptions.dateAndTime;
     }
   }
   get _playbackRateDescription() {
-    const { viewModel: t } = this;
-    if (!t)
+    const { _timeUnitSettings: t, messages: e, viewModel: i } = this;
+    if (!e || !i || !t)
       return "";
-    const e = t.formatNumber(t.playRate, this._timeUnitSettings.get("milliseconds").numberFormatOptions);
-    return this._messages.everyDurationTemplate.replace("{duration}", e);
+    const a = i.formatNumber(i.playRate, t.get("milliseconds").numberFormatOptions);
+    return e.everyDurationTemplate.replace("{duration}", a);
   }
   get _formatStart() {
     const { viewModel: t } = this, e = t?.fullTimeExtent?.start;
@@ -163,23 +164,26 @@ class T extends I {
     return e ? t.formatDateTime(e) : "";
   }
   get _modeDescription() {
-    const t = this.viewModel?.mode;
-    return t ? this._messages.modeOptions[t] : "";
+    const { messages: t, viewModel: e } = this;
+    return !t || !e ? "" : t.modeOptions[e.mode];
   }
   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 (n(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);
+    const { _timeUnitSettings: t, messages: e, viewModel: i } = this;
+    if (!t || !e || !i)
+      return "";
+    const { stops: a } = i;
+    if (!a)
+      return e.stopOptions.freeMovement;
+    if (d(a))
+      return e.stopOptions.evenlySpacedTemplate.replace("{count}", `${a.count}`);
+    if (c(a)) {
+      const { value: l, unit: s } = a.interval;
+      if (!t.has(s))
+        return e.everyDurationPartsTemplate.replace("{count}", `${l}`).replace("{timeUnit}", s);
+      const f = t.get(s).numberFormatOptions, $ = i.formatNumber(l, f);
+      return e.everyDurationTemplate.replace("{duration}", $);
     }
-    return this._messages.stopOptions.discreteDates;
+    return e.stopOptions.discreteDates;
   }
   async destroy() {
     await this.manager.destroy();
@@ -191,99 +195,107 @@ class T extends I {
     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 = g(e, i, s);
-    a && (t.fullTimeExtent = new h({
+    const e = this.#e.value.value, i = this.#i.value.value, a = o(t.timeZone), l = v(e, i, a);
+    l && (t.fullTimeExtent = new h({
       start: t.fullTimeExtent.start,
-      end: a
+      end: l
     }));
   }
   #r() {
     const { viewModel: t } = this;
-    if (!t?.fullTimeExtent || !this.#s.value?.value || !this.#a.value?.value)
+    if (!t?.fullTimeExtent || !this.#a.value?.value || !this.#l.value?.value)
       return;
-    const e = this.#s.value.value, i = this.#a.value.value, s = c(t.timeZone), a = g(e, i, s);
-    if (!a)
+    const e = this.#a.value.value, i = this.#l.value.value, a = o(t.timeZone), l = v(e, i, a);
+    if (!l)
       return;
-    const { end: d } = t.fullTimeExtent;
-    t.fullTimeExtent = new h({ start: a, end: d });
+    const { end: s } = t.fullTimeExtent;
+    t.fullTimeExtent = new h({ start: l, end: s });
   }
   render() {
     const { viewModel: t } = this;
     if (!t)
       return null;
     const { disabled: e } = t;
-    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>`;
+    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.#v(t)}${this.#b(t)}${this.#g(t)}</calcite-flow></div>`;
   }
   #m(t) {
-    if (this._selectedFlowItem !== "end")
+    const { messages: e } = this;
+    if (!e || this._selectedFlowItem !== "end")
       return null;
-    const { fullTimeExtent: e, disabled: i, timeZone: s } = t;
-    if (!e?.end)
+    const { fullTimeExtent: i, disabled: a, timeZone: l } = t;
+    if (!i?.end)
       return null;
-    const a = c(s);
-    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>`;
+    const s = o(l);
+    return n`<calcite-flow-item .description=${e.endDescription} .heading=${e.end} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="end-content"><calcite-label><span>${e.date}</span><calcite-input-date-picker .disabled=${a} @calciteInputDatePickerChange=${this.#o} .value=${b(i.end, s)} ${m(this.#e)}></calcite-input-date-picker></calcite-label><calcite-label><span>${e.time}</span><calcite-input-time-picker .disabled=${a} @calciteInputTimePickerChange=${this.#o} step=1 .value=${g(i.end, s)} ${m(this.#i)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
   }
   #d(t) {
-    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>`;
+    const { messages: e } = this;
+    return !e || this._selectedFlowItem !== "format" ? null : n`<calcite-flow-item .description=${e.displayDescription} .heading=${e.display} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="format-content"><calcite-radio-button-group class="format-radio-button-group" layout=vertical name=format @calciteRadioButtonGroupChange=${(i) => t.format = i.currentTarget.selectedItem?.value}><calcite-radio-button .labelText=${e.formatOptions.dateOnly} value=date .checked=${t.format === "date"}></calcite-radio-button><calcite-radio-button .checked=${t.format === "date-time"} .labelText=${e.formatOptions.dateAndTime} value=date-time></calcite-radio-button></calcite-radio-button-group></div></calcite-flow-item>`;
   }
   #u(t) {
-    if (this._selectedFlowItem !== "mode")
+    const { messages: e } = this;
+    if (!e || this._selectedFlowItem !== "mode")
       return null;
-    const e = ["instant", "time-window", "cumulative-from-start", "cumulative-from-end"];
-    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>`;
+    const i = ["instant", "time-window", "cumulative-from-start", "cumulative-from-end"];
+    return n`<calcite-flow-item .description=${e.modeDescription} .heading=${e.mode} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="mode-content"><calcite-radio-button-group name=mode layout=vertical @calciteRadioButtonGroupChange=${(a) => t.mode = a.currentTarget.selectedItem?.value} class="mode-radio-button-group">${i.map((a) => n`<calcite-radio-button .labelText=${e.modeOptions[a]} .value=${a} .checked=${t.mode === a}></calcite-radio-button>`)}</calcite-radio-button-group></div></calcite-flow-item>`;
   }
   #p(t) {
-    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>`;
+    const { messages: e } = this;
+    return e ? n`<calcite-flow-item .selected=${this._selectedFlowItem === "overview"}><calcite-list .label=${e.overview}><calcite-list-item @calciteListItemSelect=${() => this._selectedFlowItem = "format"}><div slot=content class="list-item--content"><calcite-label class="label-heading">${e.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">${e.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">${e.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">${e.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">${e.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">${e.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">${e.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">${e.loop}</calcite-label><calcite-switch .checked=${t.loop} .label=${e.loop} @calciteSwitchChange=${(i) => t.loop = i.target.checked} slot=content-end></calcite-switch></calcite-list-item></calcite-list></calcite-flow-item>` : null;
   }
   #h(t) {
-    if (this._selectedFlowItem !== "playback-rate")
+    const { _timeUnitSettings: e, messages: i } = this;
+    if (!e || !i || this._selectedFlowItem !== "playback-rate")
       return null;
-    const { playRate: e, disabled: i } = t;
-    return l`<calcite-flow-item .description=${this._messages.playbackRateDescription} .heading=${this._messages.playbackRate} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="playback-rate-content"><arcgis-slider .autoDestroyDisabled=${this.autoDestroyDisabled} .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>`;
+    const { playRate: a, disabled: l } = t;
+    return n`<calcite-flow-item .description=${i.playbackRateDescription} .heading=${i.playbackRate} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="playback-rate-content"><arcgis-slider .autoDestroyDisabled=${this.autoDestroyDisabled} .disabled=${l} .labelFormatter=${(s) => t.formatNumber(s, e.get("milliseconds").numberFormatOptions)} max=2000 min=100 @arcgisChange=${(s) => t.playRate = s.target.values[0]} precision=0 steps=10 value-labels-display=always .values=${[a]}><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")
+  #v(t) {
+    const { messages: e } = this;
+    if (!e || this._selectedFlowItem !== "start")
       return null;
-    const { fullTimeExtent: e, disabled: i, timeZone: s } = t;
-    if (!e?.start)
+    const { fullTimeExtent: i, disabled: a, timeZone: l } = t;
+    if (!i?.start)
       return null;
-    const a = c(s);
-    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>`;
+    const s = o(l);
+    return n`<calcite-flow-item .description=${e.startDescription} .heading=${e.start} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="start-content"><calcite-label><span>${e.date}</span><calcite-input-date-picker .disabled=${a} @calciteInputDatePickerChange=${this.#r} .value=${b(i.start, s)} ${m(this.#a)}></calcite-input-date-picker></calcite-label><calcite-label><span>${e.time}</span><calcite-input-time-picker .disabled=${a} @calciteInputTimePickerChange=${this.#r} step=1 .value=${g(i.start, s)} ${m(this.#l)}></calcite-input-time-picker></calcite-label></div></calcite-flow-item>`;
   }
-  #v(t) {
-    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=${() => {
+  #b(t) {
+    const { _timeUnitSettings: e, messages: i } = this;
+    return !e || !i || this._selectedFlowItem !== "stops" ? null : n`<calcite-flow-item .description=${i.stopsDescription} .heading=${i.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=${i.stopOptions.freeMovement} @calciteRadioButtonChange=${() => {
       t.stops = void 0;
-    }} value></calcite-radio-button><calcite-radio-button .checked=${m(t.stops)} .labelText=${this._messages.stopOptions.evenlySpaced} @calciteRadioButtonChange=${() => {
+    }} value></calcite-radio-button><calcite-radio-button .checked=${d(t.stops)} .labelText=${i.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=${n(t.stops)} .labelText=${this._messages.regularInterval} @calciteRadioButtonChange=${() => {
+    }} value></calcite-radio-button><div class="stops-indent"><calcite-input-number .disabled=${t.disabled || !d(t.stops)} integer min=1 .placeholder=${i.countPrompt} .value=${`${this._stopCount}`} @calciteInputNumberChange=${(a) => {
+      const l = Number.parseInt(a.currentTarget.value, 10);
+      t.stops = { count: l };
+    }}></calcite-input-number></div><calcite-radio-button .checked=${c(t.stops)} .labelText=${i.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 || !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 = {
+    }} value></calcite-radio-button><div class="stops-indent"><calcite-label><span class=${p({ disabled: t.disabled || !c(t.stops) })}>${i.count}</span><calcite-input-number .disabled=${t.disabled || !c(t.stops)} integer min=1 .placeholder=${i.countPrompt} .value=${`${this._stopIntervalValue}`} @calciteInputNumberChange=${(a) => {
+      this._stopIntervalValue = Number.parseInt(a.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 || !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 = {
+    }}></calcite-input-number></calcite-label><calcite-label><span class=${p({ disabled: t.disabled || !c(t.stops) })}>${i.unit}</span><calcite-combobox .disabled=${t.disabled || !c(t.stops)} .label=${i.units} .placeholder=${i.unitPrompt} selection-mode=single-persist @calciteComboboxChange=${(a) => {
+      this._stopIntervalUnit = a.currentTarget.selectedItems[0]?.value, t.stops = {
         interval: new u({ value: this._stopIntervalValue, unit: this._stopIntervalUnit })
       };
-    }}>${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>`;
+    }}>${e.values.map(({ timeUnit: a, heading: l }) => n`<calcite-combobox-item .value=${a} .heading=${l} .selected=${this._stopIntervalUnit === a}></calcite-combobox-item>`)}</calcite-combobox></calcite-label></div></calcite-radio-button-group></div></calcite-flow-item>`;
   }
-  #b(t) {
-    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>`;
+  #g(t) {
+    const { messages: e } = this;
+    return !e || this._selectedFlowItem !== "time-zone" ? null : n`<calcite-flow-item .description=${e.timeZoneDescription} .heading=${e.timeZone} @calciteFlowItemBack=${this.navigateToOverview} selected><div class="time-zone-content"><arcgis-time-zone-selector .disabled=${t.disabled} .timeZone=${t.timeZone} @arcgisInternalTimeZoneChange=${(i) => t.timeZone = i.detail}></arcgis-time-zone-selector></div></calcite-flow-item>`;
   }
-  #_() {
-    const { viewModel: t } = this;
-    if (!t)
+  #f() {
+    const { messages: t, viewModel: e } = this;
+    if (!t || !e)
       return null;
-    const { timeZone: e } = t;
-    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>`;
+    const { timeZone: i } = e;
+    return i === y ? n`<calcite-label class="label-description">${t.noTimeZoneAdjustment}</calcite-label>` : n`<calcite-input-time-zone class="time-zone-label" mode=region overlay-positioning=fixed read-only .value=${o(i)}></calcite-input-time-zone>`;
   }
 }
-_("arcgis-time-bar-settings", T);
+_("arcgis-time-bar-settings", k);
 export {
-  T as ArcgisTimeBarSettings
+  k as ArcgisTimeBarSettings
 };

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

@@ -160,6 +160,7 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
       date: string;
       display: string;
       displayDescription: string;
+      emptyTimeExtent: string;
       end: string;
       endDescription: string;
       everyDurationPartsTemplate: string;
@@ -168,6 +169,7 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
           dateAndTime: string;
           dateOnly: string;
       };
+      from: string;
       loop: string;
       mode: string;
       modeDescription: string;
@@ -178,6 +180,7 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
           "time-window": string;
       };
       next: string;
+      noTimeExtent: string;
       noTimeZoneAdjustment: string;
       overview: string;
       play: string;
@@ -197,6 +200,7 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
       };
       stops: string;
       stopsDescription: string;
+      through: string;
       time: string;
       timeBarSettings: string;
       timeExtent: string;