@arcgis/map-components 5.2.0-next.93 → 5.2.0-next.95

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

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

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

@@ -14,5 +14,6 @@ import "@arcgis/common-components/components/arcgis-ticks";
 import "@esri/calcite-components/components/calcite-input-number";
 import "@esri/calcite-components/components/calcite-combobox";
 import "@esri/calcite-components/components/calcite-combobox-item";
+import "../arcgis-time-zone-selector/index.js";
 import "@esri/calcite-components/components/calcite-input-time-zone";
 export * from "./customElement.js";

package/dist/components/arcgis-time-zone-chip/customElement.d.ts

@@ -0,0 +1,36 @@
+/// <reference path="../../index.d.ts" />
+import type { TimeZone } from "@arcgis/core/time/types.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Chip as Chip } from "@esri/calcite-components/components/calcite-chip";
+
+/**
+ * A compact time-zone selector.
+ *
+ * @internal
+ */
+export abstract class ArcgisTimeZoneChip extends LitElement {
+  /** @internal */
+  protected _messages: {
+      popoverLabel: string;
+      chipLabel: string;
+  } & T9nMeta<{
+      popoverLabel: string;
+      chipLabel: string;
+  }>;
+  /** @default false */
+  accessor disabled: boolean;
+  /** @default "system" */
+  accessor timeZone: TimeZone;
+  /** @default "m" */
+  accessor visualScale: Chip["scale"];
+  /**
+   * Emitted when the selected time zone changes.
+   *
+   * @internal
+   */
+  readonly arcgisInternalTimeZoneChange: import("@arcgis/lumina").TargetedEvent<this, TimeZone>;
+  readonly "@eventTypes": {
+    arcgisInternalTimeZoneChange: ArcgisTimeZoneChip["arcgisInternalTimeZoneChange"]["detail"];
+  };
+}

package/dist/components/arcgis-time-zone-chip/customElement.js

@@ -0,0 +1,36 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import { substitute as r } from "@arcgis/core/intl.js";
+import { LitElement as p, createEvent as d, nothing as i } from "@arcgis/lumina";
+import { generateGuid as s } from "@arcgis/toolkit/string";
+import { css as m, html as h } from "lit";
+import { u as b } from "../../chunks/useT9n.js";
+import { s as o, a as v, u as g } from "../../chunks/time-utils.js";
+const u = m`:host{display:inline-block;max-inline-size:100%}.container{--arcgis-internal-time-zone-popover-inline-size: min(20rem, calc(100vw - var(--calcite-spacing-xl)));max-inline-size:100%;.trigger{display:block;inline-size:fit-content;max-inline-size:100%;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;&:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:2px}&:disabled{cursor:not-allowed}&[aria-expanded=true] calcite-chip{--calcite-chip-background-color: var(--calcite-color-foreground-3);--calcite-chip-border-color: var(--calcite-color-text-3)}}calcite-chip{--calcite-chip-icon-color: var(--calcite-color-text-2);max-inline-size:100%;pointer-events:none}.chip-label{display:block;overflow:hidden;max-inline-size:calc(6 * var(--calcite-size-md));text-overflow:ellipsis;white-space:nowrap}calcite-popover{--calcite-popover-max-size-x: var(--arcgis-internal-time-zone-popover-inline-size)}.popover-content{box-sizing:border-box;inline-size:var(--arcgis-internal-time-zone-popover-inline-size);padding:var(--calcite-spacing-md)}}`;
+class f extends p {
+  constructor() {
+    super(...arguments), this._messages = b({ blocking: !0 }), this.#e = s(), this.#i = s(), this._open = !1, this.disabled = !1, this.timeZone = o, this.visualScale = "m", this.arcgisInternalTimeZoneChange = d({ bubbles: !1, composed: !1 });
+  }
+  static {
+    this.properties = { _open: 16, disabled: 5, timeZone: 1, visualScale: 1 };
+  }
+  static {
+    this.styles = u;
+  }
+  #e;
+  #i;
+  willUpdate(e) {
+    e.has("disabled") && this.disabled && (this._open = !1);
+  }
+  #t(e) {
+    this.timeZone = e.detail, this.arcgisInternalTimeZoneChange.emit(e.detail);
+  }
+  render() {
+    const { _messages: e } = this, t = this.timeZone === o ? v : this.timeZone === g ? "UTC" : this.timeZone, l = (t.split("/").at(-1) ?? t).replaceAll("_", " "), n = `⁨${t}⁩`, a = r(e.chipLabel, { timeZone: n });
+    return h`<div class="container"><button aria-controls=${this.#e ?? i} aria-expanded=${this._open ?? i} aria-haspopup=dialog aria-label=${a ?? i} class="trigger" .disabled=${this.disabled} id=${this.#i ?? i} title=${t ?? i} type=button @click=${() => this._open = !this._open}><calcite-chip aria-hidden appearance=outline-fill .disabled=${this.disabled} icon=time-zone .label=${a} .scale=${this.visualScale}><span class="chip-label"><bdi>${l}</bdi></span></calcite-chip></button><calcite-popover auto-close id=${this.#e ?? i} .label=${e.popoverLabel} .open=${this._open} overlay-positioning=fixed placement=top-start .referenceElement=${this.#i} trigger-disabled @calcitePopoverClose=${() => this._open = !1} @calcitePopoverOpen=${() => this._open = !0}><div class="popover-content"><arcgis-time-zone-selector .disabled=${this.disabled} .timeZone=${this.timeZone} .visualScale=${this.visualScale} @arcgisInternalTimeZoneChange=${this.#t}></arcgis-time-zone-selector></div></calcite-popover></div>`;
+  }
+}
+c("arcgis-time-zone-chip", f);
+export {
+  f as ArcgisTimeZoneChip
+};

package/dist/components/arcgis-time-zone-chip/index.js

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-popover";
+import "../arcgis-time-zone-selector/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-time-zone-selector/customElement.js

@@ -0,0 +1,56 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { LitElement as l, createEvent as r } from "@arcgis/lumina";
+import { css as m, html as n } from "lit";
+import { u as d } from "../../chunks/useT9n.js";
+import { s as t, u as s, a as u } from "../../chunks/time-utils.js";
+const h = m`:host{--calcite-label-margin-bottom: initial;display:block;inline-size:100%}.time-zone-options{display:flex;flex-direction:column}.time-zone-indent{margin-inline-start:calc(var(--calcite-spacing-lg) * 1.5)}.time-zone-input{inline-size:100%;max-inline-size:100%;&:not([calcite-hydrated]){visibility:hidden}}.status{display:grid;grid-template-columns:min-content 1fr;align-items:start;gap:var(--calcite-spacing-sm);box-sizing:border-box;padding:var(--calcite-spacing-sm);border-radius:var(--calcite-corner-radius-sm);background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.status-text{margin:0}`, p = ["device", "data", "specific"];
+class g extends l {
+  constructor() {
+    super(...arguments), this._messages = d({ blocking: !0 }), this.disabled = !1, this.timeZone = t, this.visualScale = "m", this.arcgisInternalTimeZoneChange = r({ bubbles: !1, composed: !1 });
+  }
+  static {
+    this.properties = { disabled: 5, timeZone: 1, visualScale: 1 };
+  }
+  static {
+    this.styles = h;
+  }
+  #i;
+  get #s() {
+    return this.timeZone === t ? "device" : this.timeZone === s ? "data" : "specific";
+  }
+  get #t() {
+    return this.timeZone !== t && this.timeZone !== s ? this.timeZone : this.#i ?? u;
+  }
+  willUpdate(e) {
+    e.has("timeZone") && this.timeZone !== t && this.timeZone !== s && (this.#i = this.timeZone);
+  }
+  #e(e) {
+    e !== this.timeZone && (this.timeZone = e, this.arcgisInternalTimeZoneChange.emit(e));
+  }
+  #a(e) {
+    switch (e.currentTarget.selectedItem?.value) {
+      case "device":
+        this.#e(t);
+        break;
+      case "specific":
+        this.#e(this.#t);
+        break;
+      case "data":
+        this.#e(s);
+        break;
+    }
+  }
+  #n(e) {
+    const i = e.currentTarget.value;
+    i && this.#e(i);
+  }
+  render() {
+    const { _messages: e } = this, i = this.#s, c = i === "data" ? e.dataStatus : i === "device" ? e.deviceStatus : void 0;
+    return n`<div class="time-zone-options"><calcite-radio-button-group .ariaLabel=${e.timeZone} .disabled=${this.disabled} layout=vertical name=time-zone-mode .scale=${this.visualScale} @calciteRadioButtonGroupChange=${this.#a}>${p.map((a) => n`<calcite-label layout=inline .scale=${this.visualScale}><calcite-radio-button .checked=${i === a} .disabled=${this.disabled} .value=${a}></calcite-radio-button>${e[a]}</calcite-label>`)}</calcite-radio-button-group><div class="time-zone-indent" .hidden=${i !== "specific"}><calcite-input-time-zone .ariaLabel=${e.specificTimeZone} class="time-zone-input" data-testid=time-zone-input .disabled=${this.disabled} mode=region overlay-positioning=fixed .scale=${this.visualScale} .value=${this.#t} @calciteInputTimeZoneChange=${this.#n}></calcite-input-time-zone></div>${c ? n`<div class="status" aria-live=polite><calcite-icon aria-hidden icon=time-zone scale=s></calcite-icon><p class="status-text">${c}</p></div>` : void 0}</div>`;
+  }
+}
+o("arcgis-time-zone-selector", g);
+export {
+  g as ArcgisTimeZoneSelector
+};

package/dist/components/arcgis-time-zone-selector/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-radio-button-group";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-input-time-zone";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.d.ts

@@ -8,7 +8,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
- * * Trace result item for displaying [aggregated geometry](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#aggregatedGeometry) results from a trace.
+ * Trace result item for displaying [aggregated geometry](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#aggregatedGeometry) results from a trace.
  *
  * @internal
  * @since 5.2

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.js

@@ -113,7 +113,7 @@ class z extends f {
   }
   render() {
     const { graphicsColor: e, heading: t, hideGraphics: i, _messages: r } = this;
-    return g`${t && g`<div class="geometry-heading">${t}</div>` || ""}<div class="aggregated-geometry-container"><calcite-switch .checked=${!i} .label=${r.labels.showGraphicsToggle} label-text-end=${r.showGraphics ?? v} @calciteSwitchChange=${() => this.hideGraphics = !this.hideGraphics}></calcite-switch><calcite-swatch .color=${e.toCss()} .disabled=${i} id=geometry-color-swatch .label=${r.labels.aggregatedGeometryGraphicsColor}></calcite-swatch><calcite-popover closable .heading=${r.headings.setColor} .label=${r.headings.setColor} reference-element=geometry-color-swatch ${C(this.#e)}><calcite-color-picker alpha-channel channels-disabled clearable .disabled=${i} hex-disabled saved-disabled .value=${e.toCss()} @calciteColorPickerChange=${(a) => {
+    return g`${t && g`<div class="geometry-heading">${t}</div>` || ""}<div class="aggregated-geometry-container"><calcite-switch .checked=${!i} .label=${r.labels.showGraphicsToggle} label-text-end=${r.showGraphics ?? v} @calciteSwitchChange=${() => this.hideGraphics = !this.hideGraphics}></calcite-switch><calcite-swatch .color=${e.toCss()} .disabled=${i} id=geometry-color-swatch .label=${r.labels.aggregatedGeometryGraphicsColor}></calcite-swatch><calcite-popover closable .heading=${r.headings.setColor} .label=${r.headings.setColor} reference-element=geometry-color-swatch ${C(this.#e)}><calcite-color-picker alpha-channel channels-disabled clearable .disabled=${i} hex-disabled saved-disabled .value=${e.toCss(!0)} @calciteColorPickerChange=${(a) => {
       const c = a.target.value;
       c && (this.graphicsColor = new l(c));
     }}></calcite-color-picker></calcite-popover></div>`;