@arcgis/map-components 5.2.0-next.98 → 6.0.0-next.0

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

@@ -1,6 +1,6 @@
 import "@esri/calcite-components/components/calcite-action-bar";
-import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-popover";
 import "../arcgis-time-bar-settings/index.js";
 import "../arcgis-time-bar-extent/index.js";

package/dist/components/arcgis-time-bar/types.d.ts

@@ -40,8 +40,7 @@ export type Stops = StopsByCount | StopsByDates | StopsByInterval;
 export interface TickFormat {
   duration: number;
   format: DateTimeFormatOptions;
-  major: TimeInterval;
-  minor: TimeInterval;
+  timeInterval: TimeInterval;
 }
 
-export type ToolbarKind = "docked" | "floating";
+export type PopoverDisplay = "always" | "auto" | "none";

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

@@ -2,8 +2,8 @@
 import { c as l } from "../../chunks/runtime.js";
 import { css as n, html as i } from "lit";
 import { LitElement as c, safeClassMap as r } from "@arcgis/lumina";
-const d = n`:host{block-size:auto;display:inline-grid;inline-size:max-content}.align-center{justify-items:center}.align-end{justify-items:end}.align-start{justify-items:start}.date{font-weight:var(--calcite-font-weight-bold)}.disabled{opacity:var(--calcite-opacity-disabled)}.table-date,.table-date-time{align-content:center;align-items:center;display:grid;grid-template-columns:1fr}.table-date{grid-template-rows:var(--calcite-font-size-sm)}.table-date-time{grid-template-rows:var(--calcite-font-size-sm) var(--calcite-font-size-sm)}.time{font-weight:var(--calcite-font-weight-normal)}`;
-class o extends c {
+const o = n`:host{block-size:auto;display:inline-grid;inline-size:max-content}.align-center{justify-items:center}.align-end{justify-items:end}.align-start{justify-items:start}.date{font-weight:var(--calcite-font-weight-bold)}.disabled{opacity:var(--calcite-opacity-disabled)}.table-date,.table-date-time{align-content:center;align-items:center;display:grid;grid-template-columns:1fr}.table-date{grid-template-rows:var(--calcite-font-size-sm)}.table-date-time{grid-template-rows:var(--calcite-font-size-sm) var(--calcite-font-size-sm)}.time{font-weight:var(--calcite-font-weight-normal)}`;
+class d extends c {
   constructor() {
     super(...arguments), this.align = "center", this.autoDestroyDisabled = !1;
   }
@@ -11,18 +11,16 @@ class o extends c {
     this.properties = { align: 1, autoDestroyDisabled: 5, date: 0, viewModel: 0 };
   }
   static {
-    this.styles = d;
+    this.styles = o;
   }
   async destroy() {
     await this.manager.destroy();
   }
   render() {
     const { align: a, date: e, viewModel: t } = this;
-    if (!t)
+    if (!t || !e)
       return null;
     const { disabled: s } = t;
-    if (!e)
-      return i`<div class=${r({ "table-date": !0, [`align-${a}`]: !0, disabled: s })}><span class="date">\u221E</span></div>`;
     switch (t.format) {
       case "date":
         return i`<div class=${r({ "table-date": !0, [`align-${a}`]: !0, disabled: s })}><span class="date">${t.formatDate(e)}</span></div>`;
@@ -31,7 +29,7 @@ class o extends c {
     }
   }
 }
-l("arcgis-time-bar-date", o);
+l("arcgis-time-bar-date", d);
 export {
-  o as ArcgisTimeBarDate
+  d as ArcgisTimeBarDate
 };

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

@@ -1,30 +1,35 @@
 /* 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 {
+import { c as n } from "../../chunks/runtime.js";
+import { css as o, html as a } from "lit";
+import { LitElement as d, safeClassMap as l } from "@arcgis/lumina";
+const m = o`: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-cumulative,.table-extent,.table-instant{align-content:center;align-items:center;display:grid;grid-template-rows:1fr}.table-cumulative{grid-template-columns:max-content var(--calcite-spacing-fixed-sm) max-content}.table-extent{grid-template-columns:1fr var(--calcite-spacing-fixed-xxl) 1fr}.table-instant{grid-template-columns:1fr}.text{color:var(--calcite-color-text-3)}`;
+class u extends d {
   constructor() {
     super(...arguments), this.autoDestroyDisabled = !1;
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, viewModel: 0 };
+    this.properties = { autoDestroyDisabled: 5, messages: 0, viewModel: 0 };
   }
   static {
-    this.styles = d;
+    this.styles = m;
   }
   async destroy() {
     await this.manager.destroy();
   }
   render() {
-    const { viewModel: t } = this;
-    if (!t)
+    const { messages: s, viewModel: t } = this;
+    if (!s || !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>`;
+    const { disabled: i, timeExtent: c } = t;
+    if (!c || c.isAllTime)
+      return a`<div class="table-instant"><span class=${l({ disabled: i, text: !0 })}>${s.noTimeExtent}</span></div>`;
+    if (c.isEmpty)
+      return a`<div class="table-instant"><span class=${l({ disabled: i, text: !0 })}>${s.emptyTimeExtent}</span></div>`;
+    const { start: e, end: r } = c;
+    return e && r ? e.getTime() === r.getTime() ? a`<div class="table-instant"><arcgis-time-bar-date align=center .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : a`<div class="table-extent"><arcgis-time-bar-date align=end .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date><div class=${l({ dash: !0, disabled: i })}></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="end" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : e ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.from}</span><div></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${e} .viewModel=${t}></arcgis-time-bar-date></div>` : r ? a`<div class="table-cumulative"><span class=${l({ disabled: i, text: !0 })}>${s.through}</span><div></div><arcgis-time-bar-date align=start .autoDestroyDisabled=${this.autoDestroyDisabled} class="start" .date=${r} .viewModel=${t}></arcgis-time-bar-date></div>` : null;
   }
 }
-l("arcgis-time-bar-extent", m);
+n("arcgis-time-bar-extent", u);
 export {
-  m as ArcgisTimeBarExtent
+  u as ArcgisTimeBarExtent
 };

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

@@ -1,79 +1,43 @@
 /* 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 I, html as n } 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 { 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 { 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 = ct;
+    this.styles = T;
   }
+  #s;
   #n;
-  #l;
   #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"
@@ -81,7 +45,7 @@ class ot extends $ {
       },
       seconds: {
         timeUnit: "seconds",
-        heading: this._messages.timeUnitOptions.second,
+        heading: t.timeUnitOptions.second,
         numberFormatOptions: {
           ...this.#t,
           unit: "second"
@@ -89,7 +53,7 @@ class ot extends $ {
       },
       minutes: {
         timeUnit: "minutes",
-        heading: this._messages.timeUnitOptions.minute,
+        heading: t.timeUnitOptions.minute,
         numberFormatOptions: {
           ...this.#t,
           unit: "minute"
@@ -97,7 +61,7 @@ class ot extends $ {
       },
       hours: {
         timeUnit: "hours",
-        heading: this._messages.timeUnitOptions.hour,
+        heading: t.timeUnitOptions.hour,
         numberFormatOptions: {
           ...this.#t,
           unit: "hour"
@@ -105,7 +69,7 @@ class ot extends $ {
       },
       days: {
         timeUnit: "days",
-        heading: this._messages.timeUnitOptions.day,
+        heading: t.timeUnitOptions.day,
         numberFormatOptions: {
           ...this.#t,
           unit: "day"
@@ -113,7 +77,7 @@ class ot extends $ {
       },
       weeks: {
         timeUnit: "weeks",
-        heading: this._messages.timeUnitOptions.week,
+        heading: t.timeUnitOptions.week,
         numberFormatOptions: {
           ...this.#t,
           unit: "week"
@@ -121,7 +85,7 @@ class ot extends $ {
       },
       months: {
         timeUnit: "months",
-        heading: this._messages.timeUnitOptions.month,
+        heading: t.timeUnitOptions.month,
         numberFormatOptions: {
           ...this.#t,
           unit: "month"
@@ -129,7 +93,7 @@ class ot extends $ {
       },
       years: {
         timeUnit: "years",
-        heading: this._messages.timeUnitOptions.year,
+        heading: t.timeUnitOptions.year,
         numberFormatOptions: {
           ...this.#t,
           unit: "year"
@@ -137,36 +101,33 @@ class ot extends $ {
       }
     };
     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 l(this.viewModel?.stops) ? this.viewModel.stops.interval.value : 1;
+    return c(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 ?? lt;
+    return c(this.viewModel?.stops) ? this.viewModel.stops.interval.unit : "years";
   }
   get _stopCount() {
-    return this.#n ?? this._defaultStopCount;
+    return this.#s ?? this._defaultStopCount;
   }
   set _stopCount(t) {
     const e = this._stopCount;
-    e !== t && (this.#n = t, this.requestUpdate("_stopCount", e));
+    e !== t && (this.#s = 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;
@@ -176,21 +137,23 @@ class ot extends $ {
     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;
@@ -201,23 +164,26 @@ class ot extends $ {
     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 (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);
+    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();
@@ -229,99 +195,107 @@ class ot extends $ {
     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 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 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 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>`;
+    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 : 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>`;
+    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 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>`;
+    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 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>`;
+    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 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>`;
+    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 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>`;
+    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 : 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=${() => {
+  #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=${l(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 || !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 = {
+    }} 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 || !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 = {
+    }}></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 }) => 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>`;
+    }}>${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 : 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>`;
+  #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>`;
   }
   #f() {
-    const { viewModel: t } = this;
-    if (!t)
+    const { messages: t, viewModel: e } = this;
+    if (!t || !e)
       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>`;
+    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>`;
   }
 }
-f("arcgis-time-bar-settings", ot);
+_("arcgis-time-bar-settings", k);
 export {
-  ot as ArcgisTimeBarSettings
+  k as ArcgisTimeBarSettings
 };