@arcgis/map-components 5.1.0-next.84 → 5.1.0-next.86

package/dist/components/arcgis-layer-list-new/layer-list-item/customElement.js

@@ -19,45 +19,45 @@ function ee(i, e) {
 function we(i, e) {
   i.panel.open = !i.panel.open, i.panel.open && e();
 }
-function Pe(i, e, n, u) {
-  i && n === e.layer?.uid && (ke(i), u?.(null));
+function Pe(i, e, a, u) {
+  i && a === e.layer?.uid && (ke(i), u?.(null));
 }
-function De(i, e, n) {
-  n.type === "toggle" && (n.value = !n.value), i(n, e);
+function De(i, e, a) {
+  a.type === "toggle" && (a.value = !a.value), i(a, e);
 }
 function Fe(i) {
-  return i.actionsSections.map((e) => e.filter((n) => n.visible));
+  return i.actionsSections.map((e) => e.filter((a) => a.visible));
 }
 function le(i, e) {
-  const { icon: n } = e;
-  if (n)
+  const { icon: a } = e;
+  if (a)
     return null;
   const u = "image" in e ? e.image : void 0;
   return u ? c`<span aria-hidden=true class=${d(P(i.itemActionIcon, { [i.itemActionImage]: !!u }))} style=${Ie(Ce(u))}></span>` : null;
 }
-function te(i, e, n) {
+function te(i, e, a) {
   const { item: u, css: l, handleAction: y } = i, { active: A, disabled: f, title: g, type: C, indicator: v } = e, T = ie(e);
-  return c`<calcite-action .active=${C === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${f} .icon=${T} .indicator=${v} .loading=${A} @click=${() => De(y, u, e)} scale=s slot=${(n ? void 0 : "actions-end") ?? r} .text=${g ?? ""} .textEnabled=${n} title=${g ?? void 0 ?? r}>${le(l, e)}</calcite-action>`;
+  return c`<calcite-action .active=${C === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${f} .icon=${T} .indicator=${v} .loading=${A} @click=${() => De(y, u, e)} scale=s slot=${(a ? void 0 : "actions-end") ?? r} .text=${g ?? ""} .textEnabled=${a} title=${g ?? void 0 ?? r}>${le(l, e)}</calcite-action>`;
 }
 function Oe(i) {
-  const { item: e, parent: n, hideStatusIndicators: u, css: l, visibilityAppearance: y, hideCatalogLayerList: A, dragEnabled: f = !1, rootGroupUid: g, listModeDisabled: C = !1, selectionMode: v, displayMode: T, layerTablesEnabled: S, showErrors: ne, parentTitles: F, selectedItems: ae, activeItem: ce, handleCatalogOpen: oe, handleTablesOpen: se, selectedDragItemLayerUid: re, handleSelectedDragItemLayerUidChange: de, handlePanelOpen: ue, messages: a, setCurrentActiveItem: O, clearActiveItem: R } = i, b = X(), M = X(), p = e.title || ("untitledTable" in a ? a.untitledTable : a.untitledLayer ?? "");
+  const { item: e, parent: a, hideStatusIndicators: u, css: l, visibilityAppearance: y, hideCatalogLayerList: A, dragEnabled: f = !1, rootGroupUid: g, listModeDisabled: C = !1, selectionMode: v, displayMode: T, layerTablesEnabled: S, showErrors: ne, parentTitles: F, selectedItems: ae, activeItem: ce, handleCatalogOpen: oe, handleTablesOpen: se, selectedDragItemLayerUid: re, handleSelectedDragItemLayerUidChange: de, handlePanelOpen: ue, messages: n, setCurrentActiveItem: O, clearActiveItem: R } = i, b = X(), M = X(), p = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
   let V = null;
-  u || (V = Ae(c`<arcgis-layer-list-item-indicator .item=${e} .parent=${n} slot=content-end></arcgis-layer-list-item-indicator>`));
+  u || (V = Ae(c`<arcgis-layer-list-item-indicator .messages=${n} .item=${e} .parent=${a} slot=content-end></arcgis-layer-list-item-indicator>`));
   let G = null;
   {
     const { layer: t } = e, o = t && "persistenceEnabled" in t && (he(t) || !t.persistenceEnabled);
-    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && o && (G = c`<calcite-icon class=${d(l.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${a.temporary ?? r}></calcite-icon>`);
+    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && o && (G = c`<calcite-icon class=${d(l.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${n.temporary ?? r}></calcite-icon>`);
   }
   let H = null;
   if ("visible" in e && "visibleToggle" in l && y) {
-    const t = D(n);
+    const t = D(a);
     if (t !== "inherited") {
       const o = Te({
         visible: e.visible,
         exclusive: t === "exclusive",
         visibilityAppearance: y
-      }), s = y === "checkbox", m = a.layerVisibility;
-      H = c`<calcite-action class=${d(l.visibleToggle)} .icon=${s ? o : void 0} @click=${() => ee(e, n)} .slot=${s ? "actions-start" : "actions-end"} .text=${m ?? ""} title=${m ?? r}>${s ? null : c`<calcite-icon class=${d(P({
+      }), s = y === "checkbox", m = n.layerVisibility;
+      H = c`<calcite-action class=${d(l.visibleToggle)} .icon=${s ? o : void 0} @click=${() => ee(e, a)} .slot=${s ? "actions-start" : "actions-end"} .text=${m ?? ""} title=${m ?? r}>${s ? null : c`<calcite-icon class=${d(P({
         [l.visibleIcon]: t !== "exclusive" && e.visible
       }))} .icon=${o} scale=s></calcite-icon>`}</calcite-action>`;
     }
@@ -103,7 +103,7 @@ function Oe(i) {
           x = S.includes(t.type) && "subtables" in t && !!t.subtables?.length;
           break;
       }
-    "itemTableIcon" in l && "visible" in e && "tables" in a && x && (j = W(`${e.uid}-tables`, c`<calcite-list-item class=${d(l.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${a.tables} title=${a.tables ?? r} @calciteListItemSelect=${() => se?.(e)} .value=${e}><calcite-icon class=${d(l.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
+    "itemTableIcon" in l && "visible" in e && "tables" in n && x && (j = W(`${e.uid}-tables`, c`<calcite-list-item class=${d(l.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${n.tables} title=${n.tables ?? r} @calciteListItemSelect=${() => se?.(e)} .value=${e}><calcite-icon class=${d(l.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
   }
   let z = null;
   if ("children" in e) {
@@ -111,15 +111,15 @@ function Oe(i) {
     (m || ye) && (z = c`<calcite-list .canPull=${($) => i.canMove ? i.canMove($, "pull") : !1} .canPut=${($) => i.canMove ? i.canMove($, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${g ?? r} .displayMode=${T} .dragEnabled=${ve} .group=${I ? g : `${g}-${s?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${v}>${fe}${j}</calcite-list>`);
   }
   let L = null;
-  e.error ? L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${"tableError" in a ? a.tableError : a.layerError}</div></calcite-notice></div>` : "incompatible" in e && e.incompatible && "layerIncompatible" in a && (L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(M)}><div slot=message>${a.layerIncompatible}</div></calcite-notice></div>`);
+  e.error ? L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${"tableError" in n ? n.tableError : n.layerError}</div></calcite-notice></div>` : "incompatible" in e && e.incompatible && "layerIncompatible" in n && (L = c`<div class=${d(l.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(M)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
   const J = Fe(e), E = e.actionsSections.reduce((t, o) => t + o.length, 0), K = Le(J), me = J.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((o) => te(i, o, !0))}</calcite-action-group>`), $e = (t) => {
     e.actionsOpen = t.currentTarget.open;
   };
   let Q = null;
-  E > 1 && (Q = c`<calcite-action-menu appearance=transparent .label=${a.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${$e}><calcite-action icon=ellipsis scale=s slot=trigger .text=${a.options ?? ""} title=${a.options ?? r}></calcite-action>${me}</calcite-action-menu>`);
+  E > 1 && (Q = c`<calcite-action-menu appearance=transparent .label=${n.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${$e}><calcite-action icon=ellipsis scale=s slot=trigger .text=${n.options ?? ""} title=${n.options ?? r}></calcite-action>${me}</calcite-action-menu>`);
   let k = null;
   E === 1 && K ? k = te(i, K, !1) : E > 1 && (k = Q);
-  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in a && !e.visibleAtCurrentTimeExtent ? `${p} (${a.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in a && !e.visibleAtCurrentScale ? `${p} (${a.layerInvisibleAtScale})` : p, ge = "parent" in e && e.parent?.layer?.type === "catalog", h = e.layer, pe = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
+  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${p} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${p} (${n.layerInvisibleAtScale})` : p, ge = "parent" in e && e.parent?.layer?.type === "catalog", h = e.layer, pe = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
   return queueMicrotask(() => {
     Pe(b.value ?? null, e, re, de), M.value && (i.handleTooltipReferenceChange?.(h?.uid, M.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(h?.uid, null))), e.panel && (e.panel.container = b.value);
   }), W(e.uid, c`<calcite-list-item class=${d(P(l.item, "itemActive" in l && { [l.itemActive]: ce?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${h?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || ge} id=${h?.uid ?? r} .label=${p} .metadata=${{ parentTitles: F ?? [], _title: p }} .expanded=${"open" in e && e.open} .selected=${v !== "none" ? ae.includes(e) : !1} title=${be ?? r} .unavailable=${pe} .value=${e} @focusin=${() => {
@@ -130,7 +130,7 @@ function Oe(i) {
     O?.(e), b.value?.classList.add(l.itemActive);
   }} @mouseleave=${() => {
     R?.(), b.value?.classList.remove(l.itemActive);
-  }} @calciteListItemSelect=${(t) => "visible" in e && Ee(t.currentTarget, i.operationalItems) === e && v === "none" && D(n) !== "inherited" && ee(e, n)} @calciteListItemToggle=${(t) => {
+  }} @calciteListItemSelect=${(t) => "visible" in e && Ee(t.currentTarget, i.operationalItems) === e && v === "none" && D(a) !== "inherited" && ee(e, a)} @calciteListItemToggle=${(t) => {
     "open" in e && (t.stopPropagation(), e.open = t.target.expanded);
   }} ${Y(b)}>${B}${N}${V}${H}${_}${G}${z}${L}${U}${q}${k}</calcite-list-item>`);
 }

package/dist/components/arcgis-sketch-tooltip-controls/customElement.d.ts

@@ -0,0 +1,91 @@
+/// <reference path="../../index.d.ts" />
+import type SketchOptions from "@arcgis/core/views/interactive/sketch/SketchOptions.js";
+import type { TooltipDirectionMode } from "@arcgis/core/views/interactive/tooltip/types.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+export abstract class ArcgisSketchTooltipControls extends LitElement {
+  /**
+   * private
+   *
+   * @default false
+   */
+  get _hasContent(): boolean;
+  /**
+   * Indicates whether the direction (deflection) of the segment being drawn
+   * is measured relative to the previous segment or from the main axis of the map
+   * (usually north). See [SketchTooltipOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/sketch/SketchTooltipOptions/) and [SketchValueOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/sketch/SketchValueOptions/#directionMode).
+   */
+  accessor directionMode: TooltipDirectionMode;
+  /**
+   * Controls whether the labels toggle is shown for this component.
+   *
+   * > **Note:**  If this component is contained in another component, the parent
+   * component is responsible for setting this property based on any
+   * known limitations, including properties on the view. Specifically,
+   * as of 5.1, if the view is a 2d video or linkchart instead of a map,
+   * the parent component should set this property to `true`.
+   *
+   * @default false
+   */
+  accessor hideLabelsToggle: boolean;
+  /**
+   * Controls whether the tooltips toggle is shown for this component.
+   *
+   * @default false
+   */
+  accessor hideTooltipsToggle: boolean;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * Indicates whether labels are shown next to each segment of the graphic being sketched.
+   *
+   * @default false
+   */
+  accessor labelsEnabled: boolean;
+  /** @internal */
+  protected messages: {
+      componentLabel: string;
+      directionModePicker: string;
+      directionModeAbsolute: string;
+      directionModeRelative: string;
+      tooltipsToggle: string;
+      tooltipsToggleHint: string;
+      labelsToggle: string;
+      labelsToggleHint: string;
+  } & T9nMeta<{
+      componentLabel: string;
+      directionModePicker: string;
+      directionModeAbsolute: string;
+      directionModeRelative: string;
+      tooltipsToggle: string;
+      tooltipsToggleHint: string;
+      labelsToggle: string;
+      labelsToggleHint: string;
+  }>;
+  /**
+   * Controls whether the direction mode picker is shown for this component.
+   *
+   * @default false
+   */
+  accessor showDirectionModePicker: boolean;
+  /**
+   * Controls whether a header is shown for this component.
+   *
+   * @default false
+   */
+  accessor showHeader: boolean;
+  /** Controls the sketch labels, tooltips, and values options. */
+  accessor sketchOptions: SketchOptions;
+  /**
+   * Indicates whether tooltips are shown while sketching and editing.
+   *
+   * @default false
+   */
+  accessor tooltipsEnabled: boolean;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "tooltipsEnabled" | "labelsEnabled" | "directionMode"; }>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisSketchTooltipControls["arcgisPropertyChange"]["detail"];
+  };
+}

package/dist/components/arcgis-sketch-tooltip-controls/customElement.js

@@ -0,0 +1,71 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as l } from "../../chunks/runtime.js";
+import { css as a, html as i } from "lit";
+import n from "@arcgis/core/views/interactive/sketch/SketchOptions.js";
+import { LitElement as c, nothing as r } from "@arcgis/lumina";
+import { usePropertyChange as d } from "@arcgis/lumina/controllers";
+import { u as h } from "../../chunks/useT9n.js";
+import { V as s } from "../../chunks/visible-element.js";
+const b = a`.root{display:flex;flex-flow:column wrap;min-width:100%;& calcite-label:last-child{--calcite-label-margin-bottom: 0}}.block{border-block-end:none;margin:0}.block-content{display:flex;flex-direction:column;gap:var(--calcite-spacing-xs, 6px)}.radio-button-label-wrapper{align-items:center;display:flex;gap:var(--calcite-space-base, 2px)}`;
+class p extends c {
+  constructor() {
+    super(...arguments), this.messages = h({ blocking: !0 }), this.showHeader = !1, this.hideTooltipsToggle = !1, this.hideLabelsToggle = !1, this.showDirectionModePicker = !1, this.sketchOptions = new n(), this.arcgisPropertyChange = d()("tooltipsEnabled", "labelsEnabled", "directionMode");
+  }
+  static {
+    this.properties = { _hasContent: 32, showHeader: 5, label: 1, hideTooltipsToggle: 5, hideLabelsToggle: 5, showDirectionModePicker: 5, sketchOptions: 0, tooltipsEnabled: 5, labelsEnabled: 5, directionMode: 1 };
+  }
+  static {
+    this.styles = b;
+  }
+  get _hasContent() {
+    return !this.hideTooltipsToggle || !this.hideLabelsToggle || this.showDirectionModePicker;
+  }
+  get tooltipsEnabled() {
+    return this.sketchOptions.tooltips.enabled;
+  }
+  set tooltipsEnabled(e) {
+    this.sketchOptions.tooltips.enabled = e;
+  }
+  get labelsEnabled() {
+    return this.sketchOptions.labels.enabled;
+  }
+  set labelsEnabled(e) {
+    this.sketchOptions.labels.enabled = e;
+  }
+  get directionMode() {
+    return this.sketchOptions.values.directionMode;
+  }
+  set directionMode(e) {
+    this.sketchOptions.values.directionMode = e;
+  }
+  _onDirectionModeChange(e) {
+    this.sketchOptions.values.directionMode = e.currentTarget.selectedItem.value;
+  }
+  render() {
+    const { label: e, messages: t } = this, o = e ?? t.componentLabel;
+    return i`<div aria-label=${o ?? r} class="root">${this._hasContent ? i`<calcite-block class="block" expanded .heading=${this.showHeader ? e : ""} .label=${o ?? ""}><div class="block-content">${s({ hidden: this.hideTooltipsToggle, children: this._renderTooltipsToggle() })}${s({ hidden: this.hideLabelsToggle, children: this._renderLabelsToggle() })}${s({ hidden: !this.showDirectionModePicker, children: this._renderDirectionModePicker() })}</div></calcite-block>` : void 0}</div>`;
+  }
+  _renderTooltipsToggle() {
+    const { messages: e } = this;
+    return i`<arcgis-labeled-switch .checked=${this.sketchOptions.tooltips.effectiveEnabled} .hint=${e.tooltipsToggleHint} .label=${e.tooltipsToggle} @arcgisCheckedChanged=${(t) => {
+      this.sketchOptions.tooltips.enabled = t.detail;
+    }} .disabled=${this.sketchOptions.tooltips.forceEnabled}></arcgis-labeled-switch>`;
+  }
+  _renderLabelsToggle() {
+    const { messages: e } = this;
+    return i`<arcgis-labeled-switch .checked=${this.sketchOptions.labels.enabled} .hint=${e.labelsToggleHint} .label=${e.labelsToggle} @arcgisCheckedChanged=${(t) => {
+      this.sketchOptions.labels.enabled = t.detail;
+    }}></arcgis-labeled-switch>`;
+  }
+  _renderDirectionModePicker() {
+    const { messages: e } = this, { directionMode: t } = this.sketchOptions.values;
+    return i`<calcite-label layout=default scale=s>${e.directionModePicker}<calcite-radio-button-group name=direction-mode layout=horizontal scale=s @calciteRadioButtonGroupChange=${this._onDirectionModeChange}>${this._renderDirectionModeOption("relative", t, e.directionModeRelative)}${this._renderDirectionModeOption("absolute", t, e.directionModeAbsolute)}</calcite-radio-button-group></calcite-label>`;
+  }
+  _renderDirectionModeOption(e, t, o) {
+    return i`<calcite-label layout=inline scale=s><calcite-radio-button .checked=${e === t} scale=s .value=${e}></calcite-radio-button><div class="radio-button-label-wrapper"><calcite-icon .icon=${`${e}-direction`} scale=s></calcite-icon>${o}</div></calcite-label>`;
+  }
+}
+l("arcgis-sketch-tooltip-controls", p);
+export {
+  p as ArcgisSketchTooltipControls
+};

package/dist/components/arcgis-sketch-tooltip-controls/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-sketch-tooltip-controls/index.js

@@ -0,0 +1,7 @@
+import "@esri/calcite-components/components/calcite-block";
+import "../arcgis-labeled-switch/index.js";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-radio-button-group";
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-time-of-day-slider/customElement.js

@@ -1,76 +1,104 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as u } from "../../chunks/runtime.js";
-import { keyed as p } from "lit/directives/keyed.js";
-import { substitute as k } from "@arcgis/core/intl.js";
-import { LitElement as T, createEvent as _, safeClassMap as v } from "@arcgis/lumina";
-import { useDirection as f } from "@arcgis/lumina/controllers";
-import { css as L, html as h } from "lit";
-import { u as F } from "../../chunks/useT9n.js";
+import { c as k } from "../../chunks/runtime.js";
+import { keyed as f } from "lit/directives/keyed.js";
+import { substitute as T } from "@arcgis/core/intl.js";
+import { LitElement as v, createEvent as _, safeClassMap as L } from "@arcgis/lumina";
+import { useDirection as w } from "@arcgis/lumina/controllers";
+import { css as F, html as d } from "lit";
+import { u as y } from "../../chunks/useT9n.js";
 import { c as i } from "../../chunks/time-utils.js";
-const w = L`:host{display:block}arcgis-slider{--arcgis-slider-handle-size: .875rem;--ticks-font-size: .625rem;--label-font-size: .75rem;--label-padding-block-start: 3px;--label-padding-block-end: var(--calcite-spacing-lg);--calcite-font-size-sm: var(--label-font-size);display:block;margin-block-start:var(--padding-block-start, -.5rem);padding-block-end:var(--padding-block-end, .3rem);&.wrap-labels{padding-block-end:var(--wrapped-padding, .875rem)}}:host([visual-scale="s"]) arcgis-slider{--arcgis-slider-handle-size: .625rem;--ticks-font-size: .625rem;--label-font-size: .625rem;--label-padding-block-end: 1rem;--padding-block-end: .5rem;--wrapped-padding: 1.1rem}:host([visual-scale="l"]) arcgis-slider{--arcgis-slider-handle-size: 1rem;--ticks-font-size: .75rem;--label-font-size: .875rem;--label-padding-block-end: .94rem;--padding-block-end: .4rem;--wrapped-padding: 1.1rem}.ticks-container{width:100%;position:relative}.time-range-label{position:relative;width:100%;padding-block-start:var(--label-padding-block-start);padding-block-end:var(--label-padding-block-end);font-size:var(--label-font-size);font-variant-numeric:tabular-nums;line-height:1em;text-align:center}.main-ticks,.secondary-ticks{position:absolute;inset:0}.main-ticks{--arcgis-ticks-label-width: min-content;--arcgis-ticks-label-text-align: center;--arcgis-ticks-font-size: var(--ticks-font-size);white-space:nowrap;word-break:auto-phrase;font-variant-numeric:tabular-nums}.wrap-labels .main-ticks{white-space:normal}.secondary-ticks{--arcgis-ticks-tick-length: 3px;--arcgis-ticks-gap: 16px}`;
-class z extends T {
+const p = "compact", b = /* @__PURE__ */ new Map([
+  ["fr", "full"],
+  ["he", "full"],
+  ["ja", "full"],
+  ["ko", "compact-wrap"],
+  ["zh-CN", "full"],
+  ["zh-HK", "full-wrap"],
+  ["zh-TW", "full-wrap"]
+]), z = /* @__PURE__ */ new Set(["compact-wrap", "full-wrap"]), m = {
+  hour: "numeric",
+  minute: "numeric",
+  timeZone: "UTC"
+}, $ = {
+  hour: "numeric",
+  timeZone: "UTC"
+}, h = (t) => "";
+function x(t) {
+  const e = new Intl.DateTimeFormat(t, m), a = new Intl.DateTimeFormat(t, {
+    ...m,
+    hourCycle: "h24"
+  }), r = e.resolvedOptions().hour12 === !1;
+  return (o) => {
+    const l = i(o, "minutes", "milliseconds"), s = new Date(l);
+    return l !== 0 && s.getUTCHours() === 0 && s.getUTCMinutes() === 0 && r ? a.format(s) : e.format(s);
+  };
+}
+function C(t) {
+  const e = new Intl.DateTimeFormat(t, m), a = new Intl.DateTimeFormat(t, $), r = b.get(t) ?? p;
+  return (o) => {
+    const l = Math.round(i(o, "minutes", "hours")), s = i(l, "hours", "milliseconds"), c = new Date(s);
+    switch (r) {
+      case "full":
+      case "full-wrap":
+        return e.format(c);
+      case "compact-wrap":
+        return u(a.format(c), " ");
+      default:
+        return u(a.format(c), " ");
+    }
+  };
+}
+function S(t) {
+  return z.has(b.get(t) ?? p);
+}
+function u(t, e) {
+  return t.replace(/\S+/gu, D).replace(/\s+/gu, e);
+}
+function D(t) {
+  return Array.from(t).join("⁠");
+}
+const W = F`:host{display:block}arcgis-slider{--arcgis-slider-handle-size: .875rem;--ticks-font-size: .625rem;--label-font-size: .75rem;--label-padding-block-start: 3px;--label-padding-block-end: var(--calcite-spacing-lg);--calcite-font-size-sm: var(--label-font-size);display:block;margin-block-start:var(--padding-block-start, -.5rem);padding-block-end:var(--padding-block-end, .3rem);&.wrap-labels{padding-block-end:var(--wrapped-padding, .875rem)}}:host([visual-scale="s"]) arcgis-slider{--arcgis-slider-handle-size: .625rem;--ticks-font-size: .625rem;--label-font-size: .625rem;--label-padding-block-end: 1rem;--padding-block-end: .5rem;--wrapped-padding: 1.1rem}:host([visual-scale="l"]) arcgis-slider{--arcgis-slider-handle-size: 1rem;--ticks-font-size: .75rem;--label-font-size: .875rem;--label-padding-block-end: .94rem;--padding-block-end: .4rem;--wrapped-padding: 1.1rem}.ticks-container{width:100%;position:relative}.time-range-label{position:relative;width:100%;padding-block-start:var(--label-padding-block-start);padding-block-end:var(--label-padding-block-end);font-size:var(--label-font-size);font-variant-numeric:tabular-nums;line-height:1em;text-align:center}.main-ticks,.secondary-ticks{position:absolute;inset:0;--arcgis-ticks-outline-color: var(--calcite-color-foreground-1)}.main-ticks{--arcgis-ticks-gap: var(--calcite-space-md);--arcgis-ticks-tick-length: calc(var(--calcite-size-fixed-xxxs) * 2);--arcgis-ticks-label-width: min-content;--arcgis-ticks-label-text-align: center;--arcgis-ticks-font-size: var(--ticks-font-size);white-space:nowrap;word-break:auto-phrase;font-variant-numeric:tabular-nums}.wrap-labels .main-ticks{white-space:normal}.secondary-ticks{--arcgis-ticks-tick-length: var(--calcite-size-fixed-xxxs)}`;
+class I extends v {
   constructor() {
-    super(...arguments), this.messages = F({ blocking: !0 }), this._direction = f(), this._shouldWrapLabels = !1, this._sliderLabelFormatter = (e) => "", this._tickLabelFormatter = (e) => "", this.disabled = !1, this.mode = "range", this.startTime = 0, this.endTime = 0, this.visualScale = "m", this.arcgisTimeChange = _();
+    super(...arguments), this.messages = y({ blocking: !0 }), this._direction = w(), this._shouldWrapLabels = !1, this._sliderLabelFormatter = h, this._tickLabelFormatter = h, this.disabled = !1, this.mode = "range", this.startTime = 0, this.endTime = 0, this.visualScale = "m", this.arcgisTimeChange = _();
   }
   static {
     this.properties = { _shouldWrapLabels: 16, _values: 16, _sliderLabelFormatter: 16, _tickLabelFormatter: 16, disabled: 7, mode: 3, startTime: 9, endTime: 9, label: 1, steps: 9, visualScale: 3 };
   }
   static {
-    this.styles = w;
+    this.styles = W;
   }
   willUpdate(e) {
     (e.has("mode") || e.has("startTime") || e.has("endTime")) && (this._values = this.mode === "single" ? [this.startTime] : [this.startTime, this.endTime]), e.has("messages") && this._updateLabelFormatters();
   }
-  _getSliderLabelFormatter(e) {
-    const t = new Intl.DateTimeFormat(e, g);
-    return (a) => {
-      const n = i(a, "minutes", "milliseconds"), m = new Date(n);
-      let r = t.format(m);
-      return n !== 0 && r === "00:00" && (r = "24:00"), r;
-    };
-  }
-  _getTickLabelFormatter(e) {
-    const t = new Intl.DateTimeFormat(e, g), a = new Intl.DateTimeFormat(e, y);
-    return (n) => {
-      const m = Math.round(i(n, "minutes", "hours")), r = i(m, "hours", "milliseconds"), c = new Date(r), d = t.formatToParts(c);
-      return d.some((s) => s.type === "literal" && /\s/u.test(s.value)) ? a.format(c).replace(/\S+/gu, (s) => Array.from(s).join("⁠")) : d.map((s) => s.value).join("");
-    };
-  }
   _setStartTime(e) {
     this.startTime = e, this.arcgisTimeChange.emit();
   }
-  _setRange(e, t) {
-    this.startTime = e, this.endTime = t, this.arcgisTimeChange.emit();
+  _setRange(e, a) {
+    this.startTime = e, this.endTime = a, this.arcgisTimeChange.emit();
   }
   _updateLabelFormatters() {
     const e = this.messages._lang;
-    this._sliderLabelFormatter = this._getSliderLabelFormatter(e), this._tickLabelFormatter = this._getTickLabelFormatter(e), this._shouldWrapLabels = ["ar", "bg", "el", "en", "ko", "zh-HK", "zh-TW"].includes(this.messages._t9nLocale);
+    this._sliderLabelFormatter = x(e), this._tickLabelFormatter = C(e), this._shouldWrapLabels = S(e);
   }
   _isolateTimeLabel(e) {
     return this._direction === "rtl" ? `⁨${e}⁩` : e;
   }
   render() {
     const e = this.mode === "single" && !this.disabled;
-    return p(this.messages._lang, h`<arcgis-slider .ariaLabel=${this.label} class=${v({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} fill-placement=none .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${o} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: t } }) => {
-      this.mode === "single" ? this._setStartTime(t[0]) : this._setRange(t[0], t[1]);
-    }}>${this.mode === "range" ? this._renderTimeRange() : void 0}<div class="ticks-container" slot=content-end><arcgis-ticks class="main-ticks" .interactive=${e} .labelFormatter=${this._tickLabelFormatter} layout=horizontal min=0 .max=${o} mode=value show-labels .values=${b} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" layout=horizontal min=0 .max=${o} mode=value .values=${$} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks></div></arcgis-slider>`);
+    return f(this.messages._lang, d`<arcgis-slider .ariaLabel=${this.label} class=${L({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} fill-placement=none .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${n} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: a } }) => {
+      this.mode === "single" ? this._setStartTime(a[0]) : this._setRange(a[0], a[1]);
+    }}>${this.mode === "range" ? this._renderTimeRange() : void 0}<div class="ticks-container" slot=content-end><arcgis-ticks class="main-ticks" .interactive=${e} .labelFormatter=${this._tickLabelFormatter} layout=horizontal min=0 .max=${n} mode=value show-labels .values=${g} @arcgisTickClick=${(a) => this._setStartTime(a.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" layout=horizontal min=0 .max=${n} mode=value .values=${O} @arcgisTickClick=${(a) => this._setStartTime(a.detail.value)}></arcgis-ticks></div></arcgis-slider>`);
   }
   _renderTimeRange() {
-    const e = this._isolateTimeLabel(this._sliderLabelFormatter(this.startTime)), t = this._isolateTimeLabel(this._sliderLabelFormatter(this.endTime)), a = this.messages?.timeRange;
-    return h`<div class="time-range-label" aria-live=polite slot=content-start>${k(a ?? "{start} — {end}", { start: e, end: t })}</div>`;
+    const e = this._isolateTimeLabel(this._sliderLabelFormatter(this.startTime)), a = this._isolateTimeLabel(this._sliderLabelFormatter(this.endTime)), r = this.messages?.timeRange;
+    return d`<div class="time-range-label" aria-live=polite slot=content-start>${T(r ?? "{start} — {end}", { start: e, end: a })}</div>`;
   }
 }
-const o = i(24, "hours", "minutes") - 1, b = [0, 6, 12, 18].map((l) => i(l, "hours", "minutes"));
-b.push(o);
-const $ = [2, 4, 8, 10, 14, 16, 20, 22].map((l) => i(l, "hours", "minutes")), g = {
-  hour: "numeric",
-  minute: "numeric",
-  timeZone: "UTC"
-}, y = {
-  hour: "numeric",
-  timeZone: "UTC"
-};
-u("arcgis-time-of-day-slider", z);
+const n = i(24, "hours", "minutes") - 1, g = [0, 6, 12, 18].map((t) => i(t, "hours", "minutes"));
+g.push(n);
+const O = [2, 4, 8, 10, 14, 16, 20, 22].map((t) => i(t, "hours", "minutes"));
+k("arcgis-time-of-day-slider", I);
 export {
-  z as ArcgisTimeOfDaySlider
+  I as ArcgisTimeOfDaySlider
 };