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

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as k } from "../../chunks/runtime.js";
import { keyed as f } from "lit/directives/keyed.js";
import { substitute as v } from "@arcgis/core/intl.js";
import { LitElement as T, createEvent as z, safeClassMap as _ } from "@arcgis/lumina";
import { useDirection as L } from "@arcgis/lumina/controllers";
import { css as w, html as m } from "lit";
import { u as F } from "../../chunks/useT9n.js";
import { c as s } from "../../chunks/time-utils.js";
const g = "compact", u = /* @__PURE__ */ new Map([
  ["fr", "full"],
  ["he", "full"],
  ["ja", "full"],
  ["ko", "compact-wrap"],
  ["zh-CN", "full"],
  ["zh-HK", "full-wrap"],
  ["zh-TW", "full-wrap"]
]), x = /* @__PURE__ */ new Set(["compact-wrap", "full-wrap"]), d = {
  hour: "numeric",
  minute: "numeric",
  timeZone: "UTC"
}, y = {
  hour: "numeric",
  timeZone: "UTC"
}, b = (a) => "";
function $(a) {
  const e = new Intl.DateTimeFormat(a, d), t = new Intl.DateTimeFormat(a, {
    ...d,
    hourCycle: "h24"
  }), l = e.resolvedOptions().hour12 === !1;
  return (n) => {
    const r = s(n, "minutes", "milliseconds"), i = new Date(r);
    return r !== 0 && i.getUTCHours() === 0 && i.getUTCMinutes() === 0 && l ? t.format(i) : e.format(i);
  };
}
function C(a) {
  const e = new Intl.DateTimeFormat(a, d), t = new Intl.DateTimeFormat(a, y), l = u.get(a) ?? g;
  return (n) => {
    const r = Math.round(s(n, "minutes", "hours")), i = s(r, "hours", "milliseconds"), o = new Date(i);
    switch (l) {
      case "full":
      case "full-wrap":
        return e.format(o);
      case "compact-wrap":
        return h(t.format(o), " ");
      default:
        return h(t.format(o), " ");
    }
  };
}
function S(a) {
  return x.has(u.get(a) ?? g);
}
function h(a, e) {
  return a.replace(/\S+/gu, D).replace(/\s+/gu, e);
}
function D(a) {
  return Array.from(a).join("⁠");
}
const W = w`:host{display:block}arcgis-slider{--arcgis-slider-handle-size: var(--calcite-size-2xs);--slider-default-handle-size: var(--calcite-size-2xs);--slider-thumb-label-height: var(--calcite-input-number-height, 1.5rem);--tick-label-gap: var(--calcite-space-lg);--tick-label-font-size: var(--calcite-font-size--3);--tick-label-extra-line-count: 0;--range-label-font-size: var(--calcite-font-size--2);--range-label-padding-block-start: calc(var(--calcite-space-xs) / 2);--tick-label-padding-block-end-scale-adjustment: max( 0rem, calc(var(--slider-default-handle-size) - var(--arcgis-slider-handle-size)) );--tick-label-padding-block-end-base: calc(var(--tick-label-gap) - (var(--tick-label-font-size) / 2));--tick-label-padding-block-end-wrap: calc(var(--tick-label-font-size) * var(--tick-label-extra-line-count));--tick-label-padding-block-end: calc( var(--tick-label-padding-block-end-base) + var(--tick-label-padding-block-end-scale-adjustment) + var(--tick-label-padding-block-end-wrap) );--range-label-padding-block-end-base: calc(var(--slider-thumb-label-height) + (var(--arcgis-slider-handle-size) / 2));--range-label-padding-block-end-offset: calc(var(--range-label-padding-block-start) + var(--range-label-font-size));--range-label-padding-block-end: calc( var(--range-label-padding-block-end-base) - var(--range-label-padding-block-end-offset) );--calcite-font-size-sm: var(--range-label-font-size);display:block;margin-block-start:calc((var(--arcgis-slider-handle-size) / 2 + var(--range-label-padding-block-start)) * -1);padding-block-end:var(--tick-label-padding-block-end);&.wrap-labels{--tick-label-extra-line-count: 1}}:host([visual-scale="s"]) arcgis-slider{--arcgis-slider-handle-size: var(--calcite-size-4xs);--tick-label-font-size: var(--calcite-font-size--3);--range-label-font-size: var(--calcite-font-size--3);--tick-label-gap: var(--calcite-space-md)}:host([visual-scale="l"]) arcgis-slider{--arcgis-slider-handle-size: var(--calcite-size-xs);--tick-label-font-size: var(--calcite-font-size--2);--range-label-font-size: var(--calcite-font-size--1);--tick-label-gap: var(--calcite-space-xl)}.ticks-container{position:relative;width:100%}.time-range-label{position:relative;width:100%;font-size:var(--range-label-font-size);font-variant-numeric:tabular-nums;line-height:1em;padding-block-start:var(--range-label-padding-block-start);padding-block-end:var(--range-label-padding-block-end);text-align:center}.main-ticks,.secondary-ticks{position:absolute;inset:0;--arcgis-ticks-gap: var(--tick-label-gap);--arcgis-ticks-outline-color: var(--calcite-color-foreground-1)}.main-ticks{--arcgis-ticks-tick-length: calc(var(--calcite-size-fixed-xxxs) * 2);--arcgis-ticks-font-size: var(--tick-label-font-size);--arcgis-ticks-label-width: min-content;--arcgis-ticks-label-text-align: center;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 j extends T {
  constructor() {
    super(...arguments), this.messages = F({ blocking: !0 }), this._direction = L(), this._shouldWrapLabels = !1, this._sliderLabelFormatter = b, this._tickLabelFormatter = b, this.disabled = !1, this.mode = "range", this.startTime = 0, this.endTime = 0, this.visualScale = "m", this.arcgisTimeChange = z();
  }
  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;
  }
  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();
  }
  _setStartTime(e) {
    this.startTime = e, this.arcgisTimeChange.emit();
  }
  _setRange(e, t) {
    this.startTime = e, this.endTime = t, this.arcgisTimeChange.emit();
  }
  _updateLabelFormatters() {
    const e = this.messages._lang;
    this._sliderLabelFormatter = $(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 f(this.messages._lang, m`<arcgis-slider .ariaLabel=${this.label} class=${_({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} fill-placement=none .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .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=${c} mode=value show-labels .values=${p} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" layout=horizontal min=0 .max=${c} mode=value .values=${I} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks></div></arcgis-slider>`);
  }
  _renderTimeRange() {
    const e = this._isolateTimeLabel(this._sliderLabelFormatter(this.startTime)), t = this._isolateTimeLabel(this._sliderLabelFormatter(this.endTime)), l = this.messages?.timeRange;
    return m`<div class="time-range-label" aria-live=polite slot=content-start>${v(l ?? "{start} — {end}", { start: e, end: t })}</div>`;
  }
}
const c = s(24, "hours", "minutes") - 1, p = [0, 6, 12, 18].map((a) => s(a, "hours", "minutes"));
p.push(c);
const I = [2, 4, 8, 10, 14, 16, 20, 22].map((a) => s(a, "hours", "minutes"));
k("arcgis-time-of-day-slider", j);
export {
  j as ArcgisTimeOfDaySlider
};