@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/chunk-KYIEG4U3.mjs

@@ -0,0 +1,730 @@
+import {
+  createDisplayPlugin,
+  hideModal
+} from "./chunk-OUCHKSAW.mjs";
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  controllerFor,
+  pickerFooter,
+  svgNode
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/timepicker.ts
+var UNITS = ["hours", "minutes", "seconds"];
+var STEPS = { ArrowUp: 1, ArrowDown: -1, PageUp: 5, PageDown: -5 };
+var dayHour = (hours, pm) => hours % 12 + (pm ? 12 : 0);
+var SPANS = { hours: [3600, 24], minutes: [60, 60], seconds: [1, 60] };
+var ringHour = (position, inner) => {
+  const hour = position % 12 + (inner ? 0 : 12);
+  return hour % 12 ? hour : 12 - hour;
+};
+var DAY_END = 24 * 3600 - 1;
+var pad2 = (n) => String(n).padStart(2, "0");
+function readTime(text, fromNow) {
+  const upper = text.trim().toUpperCase();
+  if (upper.split(":")[0] === "NOW") {
+    const now = new Date(+/* @__PURE__ */ new Date() + fromNow);
+    return [now.getHours(), now.getMinutes(), now.getSeconds()];
+  }
+  const period = /AM|PM/.exec(upper)?.[0];
+  const parts = upper.replace(/AM|PM/, "").split(":");
+  const [hours, minutes, seconds] = [0, 1, 2].map((i) => +parts[i] || 0);
+  return [period ? dayHour(hours, period === "PM") : hours, minutes, seconds];
+}
+var daySeconds = ([hours, minutes, seconds]) => hours * 3600 + minutes * 60 + seconds;
+function localeClock(el) {
+  const locale = Utils.locale(el);
+  if (!locale) return {};
+  const cycle = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hourCycle;
+  return { twelveHour: cycle === "h11" || cycle === "h12" };
+}
+var _defaults = {
+  dialRadius: 135,
+  outerRadius: 105,
+  innerRadius: 70,
+  tickRadius: 20,
+  duration: 350,
+  container: null,
+  defaultTime: "now",
+  // default time, 'now' or '13:14' e.g.
+  fromNow: 0,
+  // Millisecond offset from the defaultTime
+  showClearBtn: false,
+  autoSubmit: true,
+  // internationalization
+  i18n: {
+    cancel: "Cancel",
+    clear: "Clear",
+    done: "Ok",
+    hours: "Hours",
+    minutes: "Minutes",
+    seconds: "Seconds"
+  },
+  twelveHour: true,
+  // change to 12 hour AM/PM clock from 24 hour
+  showSeconds: false,
+  minTime: null,
+  maxTime: null,
+  vibrate: true,
+  // vibrate the device when dragging clock hand
+  // Callbacks
+  onSelect: null,
+  onInputInteraction: null,
+  onDone: null,
+  onCancel: null,
+  displayPlugin: null,
+  displayPluginOptions: null
+};
+var _Timepicker = class _Timepicker extends Component {
+  constructor(el, options) {
+    var _a;
+    super(el, { ...localeClock(el), ...options });
+    /** Which pointer is dragging the clock hand; a second finger is ignored. */
+    this._dragPointerId = null;
+    /** Removes the document listeners of the drag in progress. */
+    this._drag = null;
+    /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
+    this._clockBuilt = false;
+    /** Whether the pointer last pointed at a value outside the range. */
+    this._handRefused = false;
+    /** The first and last allowed second of the day. */
+    this._limits = [0, DAY_END];
+    this._handleInputClick = () => {
+      this._updateTimeFromInput();
+      this._ensureClockBuilt();
+      if (this.displayPlugin) this.displayPlugin.show();
+      this.inputHours.focus();
+      if (typeof this.options.onInputInteraction === "function") this.options.onInputInteraction.call(this);
+    };
+    this._handleInputKeydown = Utils.ignoringComposition((e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this._handleInputClick();
+      }
+    });
+    this._handleClockClickStart = (e) => {
+      if (!e.isPrimary) return;
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      e.preventDefault();
+      this._ensureClockBuilt();
+      const clockPlateBR = this.plate.getBoundingClientRect();
+      const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+      this.x0 = offset.x + this.options.dialRadius;
+      this.y0 = offset.y + this.options.dialRadius;
+      this.moved = false;
+      this._dragPointerId = e.pointerId;
+      this.dx = e.clientX - this.x0;
+      this.dy = e.clientY - this.y0;
+      this.setHand(this.dx, this.dy, false);
+      this._drag?.abort();
+      this._drag = controllerFor(this.el);
+      const { signal } = this._drag;
+      document.addEventListener("pointermove", this._handleDocumentClickMove, { signal });
+      document.addEventListener("pointerup", this._handleDocumentClickEnd, { signal });
+      document.addEventListener("pointercancel", this._handleDocumentClickCancel, { signal });
+    };
+    this._handleDocumentClickMove = (e) => {
+      if (e.pointerId !== this._dragPointerId) return;
+      e.preventDefault();
+      const x = e.clientX - this.x0;
+      const y = e.clientY - this.y0;
+      this.moved = true;
+      this.setHand(x, y, false);
+    };
+    this._handleDocumentClickEnd = (e) => {
+      if (e.pointerId !== this._dragPointerId) return;
+      this._dragPointerId = null;
+      e.preventDefault();
+      this._drag.abort();
+      const x = e.clientX - this.x0;
+      const y = e.clientY - this.y0;
+      if (this.moved && x === this.dx && y === this.dy) {
+        this.setHand(x, y);
+      }
+      if (!this._handRefused) this._chooseHand();
+    };
+    /**
+     * A cancelled pointer is not a completed selection. The browser or the OS
+     * took the gesture over, so this only lets go of the drag - it must not run
+     * the pointer-up path, which advances hours to minutes, fires `onSelect`,
+     * and under `autoSubmit` closes the picker on a time the user never chose.
+     */
+    this._handleDocumentClickCancel = (e) => {
+      if (e.pointerId !== this._dragPointerId) return;
+      this._dragPointerId = null;
+      this.moved = false;
+      this._drag.abort();
+    };
+    this._handleAmPmClick = (e) => {
+      this._handleAmPmInteraction(e.target);
+    };
+    this._handleAmPmInteraction = (e) => {
+      this.amOrPm = e.classList.contains("am-btn") ? "AM" : "PM";
+      this._updateAmPmView();
+      this._afterChange();
+      this.resetClock(null);
+    };
+    /**
+     * Show hours or minutes view on timepicker.
+     * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+     * @param delay
+     */
+    this.showView = (view, delay = null) => {
+      this._ensureClockBuilt();
+      const isHours = view === "hours", nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
+      this.currentView = view;
+      hideView.classList.add("timepicker-dial-out");
+      nextView.style.visibility = "visible";
+      nextView.classList.remove("timepicker-dial-out");
+      this.resetClock(delay);
+      clearTimeout(this.toggleViewTimer);
+      this.toggleViewTimer = setTimeout(() => {
+        hideView.style.visibility = "hidden";
+      }, this.options.duration);
+    };
+    /**
+     * Enter in the hour or minute field commits the typed time. The dial ticks
+     * are pointer targets only, and under `autoSubmit` there is no Ok button,
+     * so without this a keyboard user could type a time but never set it.
+     * Cancelling also keeps Enter from submitting a surrounding form. The
+     * listener's column holds only the fields; AM/PM is a separate column.
+     */
+    this._handleDigitalKeydown = Utils.ignoringComposition((event) => {
+      if (event.key in STEPS) return this._step(event);
+      if (event.key !== "Enter") return;
+      event.preventDefault();
+      this._formatFields();
+      if (this.options.autoSubmit) this.done();
+      else this.confirm();
+    });
+    this._inputFromTextField = (event) => {
+      const input = event.target;
+      const unit = this._unitOf(input);
+      if (!unit) return;
+      if (unit !== "seconds") this._cancelClockReset();
+      const value = this._fieldValue(unit, input.value);
+      if (Number.isNaN(value)) return;
+      this[unit] = value;
+      this._afterChange(input);
+      this._moveHand(unit, value);
+    };
+    this.done = (clearValue = null) => {
+      const last = this.el.value;
+      let value = clearValue ? "" : this._clockTime(this.hours);
+      this.time = value;
+      if (!clearValue) value = this._inputValue(value);
+      this.el.value = value;
+      if (value !== last) {
+        this.el.dispatchEvent(
+          new Event("change", { bubbles: true, cancelable: true, composed: true })
+        );
+      }
+    };
+    this.confirm = () => {
+      this.done();
+      hideModal(this.displayPlugin);
+      this._notify("confirm", this.options.onDone, { args: [] });
+    };
+    this.cancel = () => {
+      hideModal(this.displayPlugin);
+      this._notify("cancel", this.options.onCancel, { args: [] });
+    };
+    this.clear = () => {
+      this.done(true);
+    };
+    (_a = this.options).autoSubmit && (_a.autoSubmit = this.options.displayPlugin !== "modal");
+    this.id = Utils.guid();
+    this._readLimits();
+    this._insertHTMLIntoDOM();
+    this._setupVariables();
+    this._setupEventHandlers();
+    this._pickerSetup();
+    this.displayPlugin = createDisplayPlugin(this.options.displayPlugin, this.el, this.containerEl, this.options.displayPluginOptions, this.cancel);
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    clearTimeout(this._autoSubmitTimer);
+    clearTimeout(this.toggleViewTimer);
+    clearTimeout(this.vibrateTimer);
+    this._cancelClockReset();
+    this._drag?.abort();
+    this.displayPlugin?.destroy();
+    this.containerEl.remove();
+    super.destroy();
+  }
+  _setupEventHandlers() {
+    const { signal } = this._events;
+    this.el.addEventListener("click", this._handleInputClick, { signal });
+    this.el.addEventListener("keydown", this._handleInputKeydown, { signal });
+    this.plate.addEventListener("pointerdown", this._handleClockClickStart);
+    this.digitalClock.addEventListener("input", this._inputFromTextField, { signal });
+    this.digitalClock.addEventListener("keydown", this._handleDigitalKeydown, { signal });
+    this.inputHours.addEventListener("focus", () => this.showView("hours"));
+    this.inputHours.addEventListener("focusout", () => this.formatHours());
+    this.inputMinutes.addEventListener("focus", () => this.showView("minutes"));
+    this.inputMinutes.addEventListener("focusout", () => this.formatMinutes());
+    this.inputSeconds?.addEventListener("focusout", () => this.formatSeconds());
+  }
+  /** Take the value under the hand: move on to the minutes, or submit. */
+  _chooseHand() {
+    if (this.currentView === "hours") {
+      this.inputMinutes.focus();
+      this.showView("minutes", this.options.duration / 2);
+    } else {
+      clearTimeout(this._autoSubmitTimer);
+      this._autoSubmitTimer = setTimeout(() => {
+        this._autoSubmitTimer = null;
+        if (this.options.autoSubmit) this.done();
+      }, this.options.duration / 2);
+    }
+    const { hours, minutes } = this;
+    this._notify("select", this.options.onSelect, { args: [hours, minutes], detail: { hours, minutes }, current: () => this.hours === hours && this.minutes === minutes });
+  }
+  /**
+   * Read `minTime` and `maxTime` as seconds of the day. Without a seconds
+   * field the picker writes whole minutes, so the bounds round inward to a
+   * whole minute: `maxTime` takes in every second of its minute, and the
+   * hidden seconds never clamp.
+   */
+  _readLimits() {
+    const { minTime, maxTime, showSeconds, fromNow } = this.options;
+    const read = (time, fallback) => time ? daySeconds(readTime(time, fromNow)) : fallback;
+    let [min, max] = [read(minTime, 0), read(maxTime, DAY_END)];
+    if (!showSeconds) [min, max] = [Math.ceil(min / 60) * 60, Math.floor(max / 60) * 60 + 59];
+    if (min > max) return console.warn("Timepicker ignored minTime and maxTime: minTime is after maxTime.", this.el);
+    this._limits = [min, max];
+  }
+  _insertHTMLIntoDOM() {
+    const template = document.createElement("template");
+    template.innerHTML = _Timepicker._template.trim();
+    this.containerEl = template.content.firstChild;
+    this.containerEl.id = "container-" + this.id;
+    const optEl = this.options.container;
+    const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
+    if (this.options.container && !!containerEl) {
+      containerEl.append(this.containerEl);
+    } else {
+      this.el.parentElement.appendChild(this.containerEl);
+    }
+  }
+  _setupVariables() {
+    this.currentView = "hours";
+    this.canVibrate = typeof navigator.vibrate === "function";
+    this._canvas = this.containerEl.querySelector(".timepicker-canvas");
+    this.plate = this.containerEl.querySelector(".timepicker-plate");
+    this.digitalClock = this.containerEl.querySelector(".timepicker-display-column");
+    this.hoursView = this.containerEl.querySelector(".timepicker-hours");
+    this.minutesView = this.containerEl.querySelector(".timepicker-minutes");
+    this.inputHours = this.containerEl.querySelector(".timepicker-input-hours");
+    this.inputMinutes = this.containerEl.querySelector(".timepicker-input-minutes");
+    this.inputSeconds = this.containerEl.querySelector(".timepicker-input-seconds");
+    if (!this.options.showSeconds) this._removeSecondsField();
+    for (const unit of this._units()) {
+      const [min, max] = this._bounds(unit);
+      const attributes = { role: "spinbutton", "aria-valuemin": min, "aria-valuemax": max, "aria-label": this.options.i18n[unit] };
+      Object.entries(attributes).forEach(([name, value]) => this._input(unit).setAttribute(name, String(value)));
+    }
+    this.spanAmPm = this.containerEl.querySelector(".timepicker-span-am-pm");
+    this.footer = this.containerEl.querySelector(".timepicker-footer");
+    this.amOrPm = "PM";
+  }
+  _removeSecondsField() {
+    this.containerEl.querySelectorAll(".timepicker-seconds-divider, .timepicker-input-seconds-wrapper").forEach((el) => el.remove());
+    this.inputSeconds = null;
+  }
+  _input(unit) {
+    return { hours: this.inputHours, minutes: this.inputMinutes, seconds: this.inputSeconds }[unit];
+  }
+  /** The units that have a field. */
+  _units() {
+    return UNITS.filter((unit) => this._input(unit));
+  }
+  /** Which unit's field `target` is, if any. */
+  _unitOf(target) {
+    return this._units().find((unit) => this._input(unit) === target);
+  }
+  _pickerSetup() {
+    pickerFooter(this.footer, this.options, "timepicker-clear", this.clear, this.confirm, this.cancel);
+    this._updateTimeFromInput();
+    if (!this.options.displayPlugin) this.showView("hours");
+  }
+  /**
+   * Build the dial, once. Cheap to call repeatedly - every entry point that
+   * touches the clock calls it first, so the picker cannot be interacted with
+   * before it exists.
+   */
+  _ensureClockBuilt() {
+    if (this._clockBuilt) return;
+    this._clockBuilt = true;
+    this._clockSetup();
+    this._updateAmPmView();
+    this._updateRanges();
+  }
+  _clockSetup() {
+    if (this.options.twelveHour) {
+      this._amBtn = document.createElement("button");
+      this._amBtn.type = "button";
+      this._amBtn.classList.add("am-btn");
+      this._amBtn.innerText = "AM";
+      this._amBtn.addEventListener("click", this._handleAmPmClick);
+      this.spanAmPm.appendChild(this._amBtn);
+      this._pmBtn = document.createElement("button");
+      this._pmBtn.type = "button";
+      this._pmBtn.classList.add("pm-btn");
+      this._pmBtn.innerText = "PM";
+      this._pmBtn.addEventListener("click", this._handleAmPmClick);
+      this.spanAmPm.appendChild(this._pmBtn);
+    }
+    this._buildHoursView();
+    this._buildMinutesView();
+    this._buildSVGClock();
+  }
+  _buildSVGClock() {
+    const dialRadius = this.options.dialRadius;
+    const tickRadius = this.options.tickRadius;
+    const diameter = dialRadius * 2;
+    this.plate.style.width = this.plate.style.height = diameter + "px";
+    const svg = svgNode("svg", { class: "timepicker-svg", width: String(diameter), height: String(diameter) });
+    const g = svgNode("g", { transform: `translate(${dialRadius},${dialRadius})` });
+    const bearing = svgNode("circle", { class: "timepicker-canvas-bearing", cx: "0", cy: "0", r: "4" });
+    const hand = svgNode("line", { x1: "0", y1: "0" });
+    const bg = svgNode("circle", { class: "timepicker-canvas-bg", r: String(tickRadius) });
+    g.appendChild(hand);
+    g.appendChild(bg);
+    g.appendChild(bearing);
+    svg.appendChild(g);
+    this._canvas.appendChild(svg);
+    this.hand = hand;
+    this.bg = bg;
+    this.g = g;
+  }
+  _buildHoursView() {
+    if (this.options.twelveHour) {
+      for (let i = 1; i < 13; i += 1) {
+        const radian = i / 6 * Math.PI;
+        const radius = this.options.outerRadius;
+        this._buildHoursTick(i, radian, radius);
+      }
+    } else {
+      for (let i = 0; i < 24; i += 1) {
+        const radian = i / 6 * Math.PI;
+        const inner = i > 0 && i < 13;
+        const radius = inner ? this.options.innerRadius : this.options.outerRadius;
+        this._buildHoursTick(i, radian, radius);
+      }
+    }
+  }
+  _buildHoursTick(i, radian, radius) {
+    this._placeTick(this.hoursView, radian, radius, i === 0 ? "00" : i.toString());
+  }
+  _buildMinutesView() {
+    for (let i = 0; i < 60; i += 5) {
+      const radian = i / 30 * Math.PI;
+      this._placeTick(this.minutesView, radian, this.options.outerRadius, pad2(i));
+    }
+  }
+  _placeTick(view, radian, radius, text) {
+    const tick = document.createElement("div");
+    tick.classList.add("timepicker-tick");
+    tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + "px";
+    tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + "px";
+    tick.textContent = text;
+    view.appendChild(tick);
+  }
+  _updateAmPmView() {
+    if (!this._amBtn || !this._pmBtn) return;
+    this._amBtn.setAttribute("aria-pressed", String(this.amOrPm === "AM"));
+    this._pmBtn.setAttribute("aria-pressed", String(this.amOrPm === "PM"));
+    this._amBtn.classList.toggle("outlined", this.amOrPm !== "AM");
+    this._pmBtn.classList.toggle("outlined", this.amOrPm !== "PM");
+    if (this.options.twelveHour) {
+      if (this.amOrPm === "PM") {
+        this._amBtn.classList.remove("filled");
+        this._pmBtn.classList.add("filled");
+      } else if (this.amOrPm === "AM") {
+        this._amBtn.classList.add("filled");
+        this._pmBtn.classList.remove("filled");
+      }
+    }
+  }
+  _updateTimeFromInput() {
+    this._cancelClockReset();
+    const [hours, minutes, seconds] = readTime(`${this.el.value || this.options.defaultTime || ""}`, this.options.fromNow);
+    [this.minutes, this.seconds] = [minutes, seconds];
+    this._setHours24(hours);
+    this._clamp();
+    this._writeFields();
+    this._updateAmPmView();
+    this._updateRanges();
+  }
+  /** Show the time in every field but `except`, which the person is typing in. */
+  _writeFields(except) {
+    this._units().forEach((unit) => {
+      if (this._input(unit) !== except) this._input(unit).value = pad2(this[unit]);
+    });
+  }
+  /** After a change to the time: keep it in range and update what depends on it. */
+  _afterChange(except) {
+    if (this._clamp()) this._writeFields(except);
+    this._updateRanges();
+  }
+  /**
+   * Give each field the allowed range of values, and disable a period with
+   * no allowed time.
+   */
+  _updateRanges() {
+    for (const unit of this._units()) {
+      const [min, max] = this._range(unit);
+      this._input(unit).setAttribute("aria-valuemin", String(min));
+      this._input(unit).setAttribute("aria-valuemax", String(max));
+    }
+    const [first, last] = this._dayRange("hours");
+    if (this._amBtn) [this._amBtn.disabled, this._pmBtn.disabled] = [first > 11, last < 12];
+    this._disableTicks(this.hoursView, "hours");
+    this._disableTicks(this.minutesView, "minutes");
+  }
+  /** Mark the ticks of a dial view that are outside the range. */
+  _disableTicks(view, unit) {
+    view.querySelectorAll(".timepicker-tick").forEach((tick) => {
+      tick.classList.toggle("is-disabled", !this._allows(unit, Number(tick.textContent)));
+    });
+  }
+  /** The hour on the 24-hour clock, setting AM or PM on a 12-hour one. */
+  _setHours24(hour) {
+    if (!this.options.twelveHour) return void (this.hours = hour);
+    this.amOrPm = hour >= 12 ? "PM" : "AM";
+    this.hours = hour % 12 || 12;
+    this._updateAmPmView();
+  }
+  /** The time as seconds of the day. */
+  _time() {
+    return daySeconds([this._dayValue("hours", this.hours), this.minutes, this.seconds]);
+  }
+  /** Move the time to the nearest allowed time, and say whether it moved. */
+  _clamp() {
+    const time = this._time();
+    const clamped = Math.min(Math.max(time, this._limits[0]), this._limits[1]);
+    if (clamped === time) return false;
+    this._setHours24(Math.floor(clamped / 3600));
+    [this.minutes, this.seconds] = [Math.floor(clamped / 60) % 60, clamped % 60];
+    return true;
+  }
+  _cancelClockReset() {
+    clearTimeout(this._clockResetTimer);
+    this._clockResetTimer = null;
+    this._canvas?.classList.remove("timepicker-canvas-out");
+  }
+  resetClock(delay) {
+    this._cancelClockReset();
+    const view = this.currentView, value = this[view], isHours = view === "hours", unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius;
+    if (delay) {
+      this._canvas?.classList.add("timepicker-canvas-out");
+      this._clockResetTimer = setTimeout(() => {
+        this.setHand(x, y);
+      }, delay);
+    } else {
+      this.setHand(x, y);
+    }
+  }
+  /** The lowest and highest value a field can show. */
+  _bounds(unit) {
+    if (unit !== "hours") return [0, 59];
+    return this.options.twelveHour ? [1, 12] : [0, 23];
+  }
+  /** The lowest and highest allowed value of a field, given the others. */
+  _range(unit) {
+    const [min, max] = this._bounds(unit);
+    const allowed = Array.from({ length: max - min + 1 }, (_, i) => min + i).filter((value) => this._allows(unit, value));
+    return allowed.length ? [Math.min(...allowed), Math.max(...allowed)] : [min, max];
+  }
+  /**
+   * The first and last allowed value of a field, given the fields before it,
+   * with hours on the 24-hour clock. An hour is allowed when any second of
+   * it is, and so is a minute.
+   */
+  _dayRange(unit) {
+    const [size, count] = SPANS[unit];
+    const start = this._time() - this._time() % (size * count);
+    return this._limits.map((limit) => Math.min(Math.max(Math.floor((limit - start) / size), 0), count - 1));
+  }
+  /** A field's value with hours on the 24-hour clock. */
+  _dayValue(unit, value) {
+    return unit === "hours" && this.options.twelveHour ? dayHour(value, this.amOrPm === "PM") : value;
+  }
+  /** Whether a field can take `value` within the range. */
+  _allows(unit, value) {
+    const [first, last] = this._dayRange(unit);
+    const day = this._dayValue(unit, value);
+    return Math.min(Math.max(day, first), last) === day;
+  }
+  /** The whole number typed in a field, or NaN when the field can't take it. */
+  _fieldValue(unit, text) {
+    const value = Number(text.trim() || NaN);
+    return this._takes(unit, value) ? value : NaN;
+  }
+  /** Whether a field can show `value` and the range allows it. */
+  _takes(unit, value) {
+    const [min, max] = this._bounds(unit);
+    return Number.isInteger(value) && Math.min(Math.max(value, min), max) === value && this._allows(unit, value);
+  }
+  /** Point the hand at an hour or minute. Seconds have no dial view. */
+  _moveHand(unit, value) {
+    if (unit === "seconds") return;
+    this._cancelClockReset();
+    this.drawClockFromTimeInput(value, unit === "hours");
+  }
+  /**
+   * Up and Down step a field by one, Page Up and Page Down by five, round
+   * the dial: past 59 minutes comes 00. The hand follows hours and minutes.
+   * Hours step round the day, so in 12-hour time passing 12 switches AM and
+   * PM. Minutes and seconds wrap without carrying. With `minTime` or
+   * `maxTime`, a field that is not wholly allowed stops at its last allowed
+   * value instead of wrapping.
+   */
+  _step(event) {
+    const input = event.target;
+    const unit = this._unitOf(input);
+    if (!unit) return;
+    event.preventDefault();
+    const value = this._stepValue(unit, STEPS[event.key]);
+    if (unit === "hours") this._setHours24(value);
+    else this[unit] = value;
+    this._afterChange();
+    input.value = pad2(this[unit]);
+    this._moveHand(unit, this[unit]);
+  }
+  /** A field's value `step` on, with hours on the 24-hour clock. */
+  _stepValue(unit, step) {
+    const [first, last] = this._dayRange(unit);
+    const count = SPANS[unit][1];
+    const next = this._dayValue(unit, this[unit]) + step;
+    return first === 0 && last === count - 1 ? (next + count) % count : Math.min(Math.max(next, first), last);
+  }
+  drawClockFromTimeInput(value, isHours) {
+    const unit = Math.PI / (isHours ? 6 : 30);
+    const radian = value * unit;
+    let radius;
+    if (this.options.twelveHour) {
+      radius = this.options.outerRadius;
+    } else {
+      radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius;
+    }
+    this.setClockAttributes(radian, radius);
+  }
+  setHand(x, y, roundBy5 = false) {
+    this._cancelClockReset();
+    const isHours = this.currentView === "hours", unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;
+    const radius = inner && !this.options.twelveHour ? this.options.innerRadius : this.options.outerRadius;
+    let radian = Math.atan2(x, -y);
+    if (radian < 0) {
+      radian = Math.PI * 2 + radian;
+    }
+    const position = Math.round(radian / unit);
+    radian = position * unit;
+    const value = isHours ? this._hourAt(position, inner) : (roundBy5 ? position * 5 : position) % 60;
+    this._handRefused = !this._allows(this.currentView, value);
+    if (this._handRefused) return;
+    if (this[this.currentView] !== value && this.canVibrate && this.options.vibrate && !this.vibrateTimer) {
+      navigator.vibrate(10);
+      this.vibrateTimer = setTimeout(() => {
+        this.vibrateTimer = null;
+      }, 100);
+    }
+    this[this.currentView] = value;
+    (isHours ? this.inputHours : this.inputMinutes).value = pad2(value);
+    this.setClockAttributes(radian, radius);
+    this._afterChange();
+  }
+  /** The hour at a dial position, 0 to 12 from the top. */
+  _hourAt(position, inner) {
+    return this.options.twelveHour ? position % 12 || 12 : ringHour(position, inner);
+  }
+  setClockAttributes(radian, radius) {
+    if (!this.hand || !this.bg) return;
+    const cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
+    this.hand.setAttribute("x2", cx1.toString());
+    this.hand.setAttribute("y2", cy1.toString());
+    this.bg.setAttribute("cx", cx2.toString());
+    this.bg.setAttribute("cy", cy2.toString());
+  }
+  formatHours() {
+    if (this.inputHours.value == "") this.setHoursDefault();
+    this.inputHours.value = pad2(this.hours);
+  }
+  formatMinutes() {
+    if (this.inputMinutes.value == "") this.minutes = (/* @__PURE__ */ new Date()).getMinutes();
+    this.inputMinutes.value = pad2(this.minutes);
+  }
+  formatSeconds() {
+    if (this.inputSeconds.value == "") this.seconds = (/* @__PURE__ */ new Date()).getSeconds();
+    this.inputSeconds.value = pad2(this.seconds);
+  }
+  /** Normalize every field, as leaving it would. */
+  _formatFields() {
+    this.formatHours();
+    this.formatMinutes();
+    if (this.inputSeconds) this.formatSeconds();
+  }
+  setHoursDefault() {
+    this.hours = (/* @__PURE__ */ new Date()).getHours();
+    if (this.options.twelveHour) this.hours = this.hours % 12 || 12;
+    this.inputHours.value = this.hours.toString();
+  }
+  /** `HH:MM` for the given hour, or `HH:MM:SS` with a seconds field. */
+  _clockTime(hours) {
+    const parts = this.inputSeconds ? [hours, this.minutes, this.seconds] : [hours, this.minutes];
+    return parts.map(pad2).join(":");
+  }
+  // A time input accepts only 24-hour HH:mm or HH:mm:ss and empties itself
+  // on anything else, so it never gets the AM/PM a text input shows.
+  _inputValue(time) {
+    if (this.el.type === "time") return this._clockTime(this._dayValue("hours", this.hours));
+    return this.options.twelveHour ? `${time} ${this.amOrPm}` : time;
+  }
+};
+_Timepicker.key = "Expressive_Timepicker";
+_Timepicker._template = `<div class="timepicker-container">
+          <div class="timepicker-digital-display">
+            <div class="timepicker-text-container">
+              <div class="timepicker-display-column timepicker-display-digital-clock">
+                <div class="timepicker-input-hours-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-hours" />
+                </div>
+                <div class="timepicker-input-divider-wrapper">
+                  <span class="timepicker-input-divider">:</span>
+                </div>
+                <div class="timepicker-input-minutes-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-minutes" />
+                </div>
+                <div class="timepicker-input-divider-wrapper timepicker-seconds-divider">
+                  <span class="timepicker-input-divider">:</span>
+                </div>
+                <div class="timepicker-input-seconds-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-seconds" />
+                </div>
+              </div>
+              <div class="timepicker-display-column timepicker-display-am-pm">
+                <div class="timepicker-span-am-pm"></div>
+              </div>
+            </div>
+          </div>
+          <div class="timepicker-analog-display">
+            <div class="timepicker-plate">
+              <div class="timepicker-canvas"></div>
+              <div class="timepicker-dial timepicker-hours"></div>
+              <div class="timepicker-dial timepicker-minutes timepicker-dial-out"></div>
+            </div>
+            <div class="timepicker-footer"></div>
+          </div>
+        </div>`;
+var Timepicker = _Timepicker;
+
+export {
+  Timepicker
+};
+//# sourceMappingURL=chunk-KYIEG4U3.mjs.map