@expressivecss/expressive 0.9.0 → 0.10.0

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

@@ -0,0 +1,560 @@
+import {
+  DockedDisplayPlugin
+} from "./chunk-SLFNPY5M.mjs";
+import {
+  Utils
+} from "./chunk-MISGHDUU.mjs";
+import {
+  Component
+} from "./chunk-QSQ24FYT.mjs";
+
+// src/ts/components/timepicker.ts
+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"
+  },
+  twelveHour: true,
+  // change to 12 hour AM/PM clock from 24 hour
+  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) {
+    super(el, options, _Timepicker);
+    /** Which pointer is dragging the clock hand; a second finger is ignored. */
+    this._dragPointerId = null;
+    /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */
+    this._clockBuilt = false;
+    this._handleInputClick = () => {
+      this._ensureClockBuilt();
+      if (this.displayPlugin) this.displayPlugin.show();
+      this.inputHours.focus();
+      if (typeof this.options.onInputInteraction === "function") this.options.onInputInteraction.call(this);
+    };
+    this._handleInputKeydown = (e) => {
+      if (e.key === Utils.keys.ENTER) {
+        e.preventDefault();
+        this._ensureClockBuilt();
+        if (this.displayPlugin) this.displayPlugin.show();
+        this.inputHours.focus();
+        if (typeof this.options.onInputInteraction === "function") this.options.onInputInteraction.call(this);
+      }
+    };
+    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);
+      document.addEventListener("pointermove", this._handleDocumentClickMove);
+      document.addEventListener("pointerup", this._handleDocumentClickEnd);
+      document.addEventListener("pointercancel", this._handleDocumentClickCancel);
+    };
+    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();
+      document.removeEventListener("pointerup", this._handleDocumentClickEnd);
+      document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
+      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.currentView === "hours") {
+        this.inputMinutes.focus();
+        this.showView("minutes", this.options.duration / 2);
+      } else {
+        setTimeout(() => {
+          if (this.options.autoSubmit) this.done();
+        }, this.options.duration / 2);
+      }
+      if (typeof this.options.onSelect === "function") {
+        this.options.onSelect.call(this, this.hours, this.minutes);
+      }
+      document.removeEventListener("pointermove", this._handleDocumentClickMove);
+    };
+    /**
+     * 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;
+      document.removeEventListener("pointermove", this._handleDocumentClickMove);
+      document.removeEventListener("pointerup", this._handleDocumentClickEnd);
+      document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
+    };
+    this._handleAmPmClick = (e) => {
+      this._handleAmPmInteraction(e.target);
+    };
+    this._handleAmPmInteraction = (e) => {
+      this.amOrPm = e.classList.contains("am-btn") ? "AM" : "PM";
+      this._updateAmPmView();
+    };
+    /**
+     * 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);
+    };
+    this._inputFromTextField = (event) => {
+      const input = event.target;
+      const isHours = input === this.inputHours;
+      if (!isHours && input !== this.inputMinutes) return;
+      const value = Number(input.value);
+      const min = isHours && this.options.twelveHour ? 1 : 0;
+      const max = isHours ? this.options.twelveHour ? 12 : 23 : 59;
+      if (!input.value.trim() || !Number.isInteger(value) || value < min || value > max) return;
+      this[isHours ? "hours" : "minutes"] = value;
+      this.drawClockFromTimeInput(value, isHours);
+    };
+    this.done = (clearValue = null) => {
+      const last = this.el.value;
+      let value = clearValue ? "" : _Timepicker._addLeadingZero(this.hours) + ":" + _Timepicker._addLeadingZero(this.minutes);
+      this.time = value;
+      if (!clearValue && this.options.twelveHour) {
+        value = `${value} ${this.amOrPm}`;
+      }
+      this.el.value = value;
+      if (value !== last) {
+        this.el.dispatchEvent(
+          new Event("change", { bubbles: true, cancelable: true, composed: true })
+        );
+      }
+    };
+    this.confirm = () => {
+      this.done();
+      if (typeof this.options.onDone === "function") this.options.onDone.call(this);
+    };
+    this.cancel = () => {
+      if (typeof this.options.onCancel === "function") this.options.onCancel.call(this);
+    };
+    this.clear = () => {
+      this.done(true);
+    };
+    this.el["Expressive_Timepicker"] = this;
+    this.options = {
+      ..._Timepicker.defaults,
+      ...options,
+      i18n: { ..._Timepicker.defaults.i18n, ...options?.i18n }
+    };
+    this.id = Utils.guid();
+    this._insertHTMLIntoDOM();
+    this._setupVariables();
+    this._setupEventHandlers();
+    this._pickerSetup();
+    if (this.options.displayPlugin) {
+      if (this.options.displayPlugin === "docked") this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+    }
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /**
+   * Initializes instances of Timepicker.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _Timepicker);
+  }
+  static _addLeadingZero(num) {
+    return (num < 10 ? "0" : "") + num;
+  }
+  static _createSVGEl(name) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    return document.createElementNS(svgNS, name);
+  }
+  static getInstance(el) {
+    return el["Expressive_Timepicker"];
+  }
+  destroy() {
+    this._removeEventHandlers();
+    this.displayPlugin?.destroy();
+    this.containerEl.remove();
+    this.el["Expressive_Timepicker"] = void 0;
+  }
+  _setupEventHandlers() {
+    this.el.addEventListener("click", this._handleInputClick);
+    this.el.addEventListener("keydown", this._handleInputKeydown);
+    this.plate.addEventListener("pointerdown", this._handleClockClickStart);
+    this.digitalClock.addEventListener("input", this._inputFromTextField);
+    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());
+  }
+  _removeEventHandlers() {
+    this.digitalClock.removeEventListener("input", this._inputFromTextField);
+    this.el.removeEventListener("click", this._handleInputClick);
+    this.el.removeEventListener("keydown", this._handleInputKeydown);
+    document.removeEventListener("pointermove", this._handleDocumentClickMove);
+    document.removeEventListener("pointerup", this._handleDocumentClickEnd);
+    document.removeEventListener("pointercancel", this._handleDocumentClickCancel);
+  }
+  _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.inputHours.setAttribute("aria-label", this.options.i18n.hours);
+    this.inputMinutes.setAttribute("aria-label", this.options.i18n.minutes);
+    this.spanAmPm = this.containerEl.querySelector(".timepicker-span-am-pm");
+    this.footer = this.containerEl.querySelector(".timepicker-footer");
+    this.amOrPm = "PM";
+  }
+  _pickerSetup() {
+    Utils.createButton(
+      this.footer,
+      this.options.i18n.clear,
+      ["timepicker-clear"],
+      this.options.showClearBtn,
+      this.clear
+    );
+    if (!this.options.autoSubmit) {
+      Utils.createConfirmationContainer(
+        this.footer,
+        this.options.i18n.done,
+        this.options.i18n.cancel,
+        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();
+  }
+  _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;
+    const svg = _Timepicker._createSVGEl("svg");
+    svg.setAttribute("class", "timepicker-svg");
+    svg.setAttribute("width", diameter.toString());
+    svg.setAttribute("height", diameter.toString());
+    const g = _Timepicker._createSVGEl("g");
+    g.setAttribute("transform", "translate(" + dialRadius + "," + dialRadius + ")");
+    const bearing = _Timepicker._createSVGEl("circle");
+    bearing.setAttribute("class", "timepicker-canvas-bearing");
+    bearing.setAttribute("cx", "0");
+    bearing.setAttribute("cy", "0");
+    bearing.setAttribute("r", "4");
+    const hand = _Timepicker._createSVGEl("line");
+    hand.setAttribute("x1", "0");
+    hand.setAttribute("y1", "0");
+    const bg = _Timepicker._createSVGEl("circle");
+    bg.setAttribute("class", "timepicker-canvas-bg");
+    bg.setAttribute("r", tickRadius.toString());
+    g.appendChild(hand);
+    g.appendChild(bg);
+    g.appendChild(bearing);
+    svg.appendChild(g);
+    this._canvas.appendChild(svg);
+    this.hand = hand;
+    this.bg = bg;
+    this.bearing = bearing;
+    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) {
+    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 = i === 0 ? "00" : i.toString();
+    this.hoursView.appendChild(tick);
+  }
+  _buildMinutesView() {
+    const _tick = document.createElement("div");
+    _tick.classList.add("timepicker-tick");
+    for (let i = 0; i < 60; i += 5) {
+      const tick = _tick.cloneNode(true);
+      const radian = i / 30 * Math.PI;
+      tick.style.left = this.options.dialRadius + Math.sin(radian) * this.options.outerRadius - this.options.tickRadius + "px";
+      tick.style.top = this.options.dialRadius - Math.cos(radian) * this.options.outerRadius - this.options.tickRadius + "px";
+      tick.textContent = _Timepicker._addLeadingZero(i);
+      this.minutesView.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() {
+    let value = ((this.el.value || this.options.defaultTime || "") + "").trim().toUpperCase().split(":");
+    const period = value[1]?.match(/AM|PM/)?.[0];
+    value[1] = value[1]?.replace(/AM|PM/, "");
+    if (value[0] === "NOW") {
+      const now = new Date(+/* @__PURE__ */ new Date() + this.options.fromNow);
+      value = [now.getHours().toString(), now.getMinutes().toString()];
+    }
+    this.hours = +value[0] || 0;
+    this.minutes = +value[1] || 0;
+    if (this.options.twelveHour) {
+      this.amOrPm = period === "AM" || period === "PM" ? period : this.hours >= 12 ? "PM" : "AM";
+      this.hours = this.hours % 12 || 12;
+    }
+    this.inputHours.value = _Timepicker._addLeadingZero(this.hours);
+    this.inputMinutes.value = _Timepicker._addLeadingZero(this.minutes);
+    this._updateAmPmView();
+  }
+  resetClock(delay) {
+    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");
+      setTimeout(() => {
+        this._canvas?.classList.remove("timepicker-canvas-out");
+        this.setHand(x, y);
+      }, delay);
+    } else {
+      this.setHand(x, y);
+    }
+  }
+  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) {
+    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;
+    let radian = Math.atan2(x, -y), radius = inner ? this.options.innerRadius : this.options.outerRadius;
+    if (this.options.twelveHour) {
+      radius = this.options.outerRadius;
+    }
+    if (radian < 0) {
+      radian = Math.PI * 2 + radian;
+    }
+    let value = Math.round(radian / unit);
+    radian = value * unit;
+    if (this.options.twelveHour) {
+      if (isHours) {
+        if (value === 0) value = 12;
+      } else {
+        if (roundBy5) value *= 5;
+        if (value === 60) value = 0;
+      }
+    } else {
+      if (isHours) {
+        if (value === 12) {
+          value = 0;
+        }
+        value = inner ? value === 0 ? 12 : value : value === 0 ? 0 : value + 12;
+      } else {
+        if (roundBy5) {
+          value *= 5;
+        }
+        if (value === 60) {
+          value = 0;
+        }
+      }
+    }
+    if (this[this.currentView] !== value) {
+      if (this.canVibrate && this.options.vibrate) {
+        if (!this.vibrateTimer) {
+          navigator.vibrate(10);
+          this.vibrateTimer = setTimeout(() => {
+            this.vibrateTimer = null;
+          }, 100);
+        }
+      }
+    }
+    this[this.currentView] = value;
+    if (isHours) {
+      this.inputHours.value = _Timepicker._addLeadingZero(value);
+    } else {
+      this.inputMinutes.value = _Timepicker._addLeadingZero(value);
+    }
+    this.setClockAttributes(radian, radius);
+  }
+  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 = _Timepicker._addLeadingZero(this.hours);
+  }
+  formatMinutes() {
+    if (this.inputMinutes.value == "") this.minutes = (/* @__PURE__ */ new Date()).getMinutes();
+    this.inputMinutes.value = _Timepicker._addLeadingZero(this.minutes);
+  }
+  setHoursDefault() {
+    this.hours = (/* @__PURE__ */ new Date()).getHours();
+    if (this.options.twelveHour) this.hours = this.hours % 12 || 12;
+    this.inputHours.value = this.hours.toString();
+  }
+};
+_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 text-primary" />
+                </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>
+              <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-D4UZ4HFN.mjs.map

package/dist/js/chunks/chunk-D4UZ4HFN.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/timepicker.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions, InitElements, InitElement, I18nOptions } from '../core/component';\nimport { DockedDisplayPlugin } from '../plugins/dockedDisplayPlugin';\n\nexport type Views = 'hours' | 'minutes';\n\nexport interface TimepickerOptions extends BaseOptions {\n  /**\n   * Dial radius.\n   * @default 135\n   */\n  dialRadius: number;\n  /**\n   * Outer radius.\n   * @default 105\n   */\n  outerRadius: number;\n  /**\n   * Inner radius.\n   * @default 70\n   */\n  innerRadius: number;\n  /**\n   * Tick radius.\n   * @default 20\n   */\n  tickRadius: number;\n  /**\n   * Duration of the transition from/to the hours/minutes view.\n   * @default 350\n   */\n  duration: number;\n  /**\n   * Specify a DOM element OR selector for a DOM element to render\n   * the time picker in, by default it will be placed before the input.\n   * @default null\n   */\n  container: HTMLElement | string | null;\n  /**\n   * Show the clear button in the Timepicker.\n   * @default false\n   */\n  showClearBtn: boolean;\n  /**\n   *  Autosubmit timepicker selection to input field\n   *  @default true\n   */\n  autoSubmit: true;\n  /**\n   * Default time to set on the timepicker 'now' or '13:14'.\n   * @default 'now';\n   */\n  defaultTime: string;\n  /**\n   * Millisecond offset from the defaultTime.\n   * @default 0\n   */\n  fromNow: number;\n  /**\n   * Internationalization options.\n   */\n  i18n: Partial<I18nOptions & { hours: string; minutes: string }>;\n  /**\n   * Use 12 hour AM/PM clock instead of 24 hour clock.\n   * @default true\n   */\n  twelveHour: boolean;\n  /**\n   * Vibrate device when dragging clock hand.\n   * @default true\n   */\n  vibrate: boolean;\n  /**\n   * Callback function when a time is selected.\n   * @default null\n   */\n  onSelect: (hour: number, minute: number) => void;\n  /**\n   * Callback function for interaction with input field.\n   * @default null\n   */\n  onInputInteraction: (() => void) | null;\n  /**\n   * Callback function for done.\n   * @default null\n   */\n  onDone: (() => void) | null;\n  /**\n   * Callback function for cancel.\n   * @default null\n   */\n  onCancel: (() => void) | null;\n  /**\n   * Display plugin\n   */\n  displayPlugin: string;\n  /**\n   * Configurable display plugin options\n   */\n  displayPluginOptions: object;\n}\n\nconst _defaults: TimepickerOptions = {\n  dialRadius: 135,\n  outerRadius: 105,\n  innerRadius: 70,\n  tickRadius: 20,\n  duration: 350,\n  container: null,\n  defaultTime: 'now', // default time, 'now' or '13:14' e.g.\n  fromNow: 0, // Millisecond offset from the defaultTime\n  showClearBtn: false,\n  autoSubmit: true,\n  // internationalization\n  i18n: {\n    cancel: 'Cancel',\n    clear: 'Clear',\n    done: 'Ok',\n    hours: 'Hours',\n    minutes: 'Minutes'\n  },\n  twelveHour: true, // change to 12 hour AM/PM clock from 24 hour\n  vibrate: true, // vibrate the device when dragging clock hand\n  // Callbacks\n  onSelect: null,\n  onInputInteraction: null,\n  onDone: null,\n  onCancel: null,\n  displayPlugin: null,\n  displayPluginOptions: null,\n};\n\nexport class Timepicker extends Component<TimepickerOptions> {\n  declare el: HTMLInputElement;\n  id: string;\n  containerEl: HTMLElement;\n  plate: HTMLElement;\n  digitalClock: HTMLElement;\n  inputHours: HTMLInputElement;\n  inputMinutes: HTMLInputElement;\n  x0: number;\n  y0: number;\n  moved: boolean;\n  /** Which pointer is dragging the clock hand; a second finger is ignored. */\n  private _dragPointerId: number | null = null;\n  dx: number;\n  dy: number;\n  /**\n   * Current view on the timepicker.\n   * @default 'hours'\n   */\n  currentView: Views;\n  hand: SVGElement;\n  minutesView: HTMLElement;\n  hours: number;\n  minutes: number;\n  /** The selected time. */\n  time: string;\n  /**\n   * If the time is AM or PM on twelve-hour clock.\n   * @default 'PM'\n   */\n  amOrPm: 'AM' | 'PM';\n  static _template;\n  /** Whether this device exposes the Vibration API at all. */\n  canVibrate: boolean;\n  _canvas: HTMLElement;\n  hoursView: HTMLElement;\n  spanAmPm: HTMLSpanElement;\n  footer: HTMLElement;\n  private _amBtn: HTMLButtonElement;\n  private _pmBtn: HTMLButtonElement;\n  bg: Element;\n  bearing: Element;\n  g: Element;\n  toggleViewTimer: ReturnType<typeof setTimeout>;\n  vibrateTimer: ReturnType<typeof setTimeout>;\n  private displayPlugin: DockedDisplayPlugin;\n  /** Whether the dial (ticks + SVG + AM/PM buttons) has been built yet. */\n  private _clockBuilt = false;\n\n  constructor(el: HTMLInputElement, options: Partial<TimepickerOptions>) {\n    super(el, options, Timepicker);\n    this.el['Expressive_Timepicker'] = this;\n    this.options = {\n      ...Timepicker.defaults,\n      ...options,\n      i18n: { ...Timepicker.defaults.i18n, ...options?.i18n }\n    };\n    this.id = Utils.guid();\n    this._insertHTMLIntoDOM();\n    this._setupVariables();\n    this._setupEventHandlers();\n    // The dial is ~40 elements (12 or 24 hour ticks, 12 minute ticks, the SVG\n    // hand and the AM/PM buttons) and is built by _ensureClockBuilt() rather\n    // than here - see _pickerSetup for when that first happens.\n    this._pickerSetup();\n\n    if (this.options.displayPlugin) {\n      if (this.options.displayPlugin === 'docked') this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);\n    }\n  }\n\n  static get defaults(): TimepickerOptions {\n    return _defaults;\n  }\n\n  /**\n   * Initializes instance of Timepicker.\n   * @param el HTML element.\n   * @param options Component options.\n   */\n  static init(el: HTMLInputElement, options?: Partial<TimepickerOptions>): Timepicker;\n  /**\n   * Initializes instances of Timepicker.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: InitElements<HTMLInputElement | InitElement>,\n    options?: Partial<TimepickerOptions>\n  ): Timepicker[];\n  /**\n   * Initializes instances of Timepicker.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: HTMLInputElement | InitElements<HTMLInputElement | InitElement>,\n    options: Partial<TimepickerOptions> = {}\n  ): Timepicker | Timepicker[] {\n    return super.init(els, options, Timepicker);\n  }\n\n  static _addLeadingZero(num: number) {\n    return (num < 10 ? '0' : '') + num;\n  }\n\n  static _createSVGEl(name: string) {\n    const svgNS = 'http://www.w3.org/2000/svg';\n    return document.createElementNS(svgNS, name);\n  }\n\n  static getInstance(el: HTMLElement): Timepicker {\n    return el['Expressive_Timepicker'];\n  }\n\n  destroy() {\n    this._removeEventHandlers();\n    this.displayPlugin?.destroy();\n    this.containerEl.remove();\n    this.el['Expressive_Timepicker'] = undefined;\n  }\n\n  _setupEventHandlers() {\n    this.el.addEventListener('click', this._handleInputClick);\n    this.el.addEventListener('keydown', this._handleInputKeydown);\n    this.plate.addEventListener('pointerdown', this._handleClockClickStart);\n    this.digitalClock.addEventListener('input', this._inputFromTextField);\n    this.inputHours.addEventListener('focus', () => this.showView('hours'));\n    this.inputHours.addEventListener('focusout', () => this.formatHours());\n    this.inputMinutes.addEventListener('focus', () => this.showView('minutes'));\n    this.inputMinutes.addEventListener('focusout', () => this.formatMinutes());\n  }\n\n  _removeEventHandlers() {\n    this.digitalClock.removeEventListener('input', this._inputFromTextField);\n    this.el.removeEventListener('click', this._handleInputClick);\n    this.el.removeEventListener('keydown', this._handleInputKeydown);\n    // Drag handlers live on the document while the clock hand is held; if the\n    // component is destroyed mid-drag they would otherwise outlive it.\n    document.removeEventListener('pointermove', this._handleDocumentClickMove);\n    document.removeEventListener('pointerup', this._handleDocumentClickEnd);\n    document.removeEventListener('pointercancel', this._handleDocumentClickCancel);\n  }\n\n  _handleInputClick = () => {\n    // Before focus(): focusing inputHours fires the handler that calls\n    // showView, and an already-focused input fires nothing at all.\n    this._ensureClockBuilt();\n    if (this.displayPlugin) this.displayPlugin.show();\n    this.inputHours.focus();\n    if (typeof this.options.onInputInteraction === 'function') this.options.onInputInteraction.call(this);\n  };\n\n  _handleInputKeydown = (e: KeyboardEvent) => {\n    if (e.key === Utils.keys.ENTER) {\n      e.preventDefault();\n      this._ensureClockBuilt();\n      if (this.displayPlugin) this.displayPlugin.show();\n      this.inputHours.focus();\n      if (typeof this.options.onInputInteraction === 'function') this.options.onInputInteraction.call(this);\n    }\n  };\n\n  _handleClockClickStart = (e: PointerEvent) => {\n    if (!e.isPrimary) return;\n    if (e.pointerType === 'mouse' && e.button !== 0) return;\n    e.preventDefault();\n    this._ensureClockBuilt();\n    const clockPlateBR = this.plate.getBoundingClientRect();\n    const offset = { x: clockPlateBR.left, y: clockPlateBR.top };\n\n    this.x0 = offset.x + this.options.dialRadius;\n    this.y0 = offset.y + this.options.dialRadius;\n    this.moved = false;\n    this._dragPointerId = e.pointerId;\n    this.dx = e.clientX - this.x0;\n    this.dy = e.clientY - this.y0;\n\n    // Set clock hands\n    this.setHand(this.dx, this.dy, false);\n    // The hand follows the pointer anywhere on the page while it is held.\n    // `pointercancel` ends the drag the same way `pointerup` does: without it\n    // these document listeners outlived a cancelled touch, because the\n    // `touchend` pair this replaced had no `touchcancel` companion.\n    document.addEventListener('pointermove', this._handleDocumentClickMove);\n    document.addEventListener('pointerup', this._handleDocumentClickEnd);\n    document.addEventListener('pointercancel', this._handleDocumentClickCancel);\n  };\n\n  _handleDocumentClickMove = (e: PointerEvent) => {\n    if (e.pointerId !== this._dragPointerId) return;\n    e.preventDefault();\n    const x = e.clientX - this.x0;\n    const y = e.clientY - this.y0;\n    this.moved = true;\n    this.setHand(x, y, false);\n  };\n\n  _handleDocumentClickEnd = (e: PointerEvent) => {\n    if (e.pointerId !== this._dragPointerId) return;\n    this._dragPointerId = null;\n    e.preventDefault();\n    document.removeEventListener('pointerup', this._handleDocumentClickEnd);\n    document.removeEventListener('pointercancel', this._handleDocumentClickCancel);\n    const x = e.clientX - this.x0;\n    const y = e.clientY - this.y0;\n    if (this.moved && x === this.dx && y === this.dy) {\n      this.setHand(x, y);\n    }\n\n    if (this.currentView === 'hours') {\n      this.inputMinutes.focus();\n      this.showView('minutes', this.options.duration / 2);\n    } else {\n      // this.minutesView.classList.add('timepicker-dial-out');\n      setTimeout(() => {\n        if (this.options.autoSubmit) this.done();\n      }, this.options.duration / 2);\n    }\n\n    if (typeof this.options.onSelect === 'function') {\n      this.options.onSelect.call(this, this.hours, this.minutes);\n    }\n    document.removeEventListener('pointermove', this._handleDocumentClickMove);\n  };\n\n  /**\n   * A cancelled pointer is not a completed selection. The browser or the OS\n   * took the gesture over, so this only lets go of the drag - it must not run\n   * the pointer-up path, which advances hours to minutes, fires `onSelect`,\n   * and under `autoSubmit` closes the picker on a time the user never chose.\n   */\n  _handleDocumentClickCancel = (e: PointerEvent) => {\n    if (e.pointerId !== this._dragPointerId) return;\n    this._dragPointerId = null;\n    this.moved = false;\n    document.removeEventListener('pointermove', this._handleDocumentClickMove);\n    document.removeEventListener('pointerup', this._handleDocumentClickEnd);\n    document.removeEventListener('pointercancel', this._handleDocumentClickCancel);\n  };\n\n  _insertHTMLIntoDOM() {\n    const template = document.createElement('template');\n    template.innerHTML = Timepicker._template.trim();\n\n    this.containerEl = <HTMLElement>template.content.firstChild;\n    this.containerEl.id = 'container-' + this.id;\n\n    // Append popover to input by default\n    const optEl = this.options.container;\n    const containerEl = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);\n\n    if (this.options.container && !!containerEl) {\n      containerEl.append(this.containerEl);\n    } else {\n      this.el.parentElement.appendChild(this.containerEl);\n    }\n  }\n\n  _setupVariables() {\n    this.currentView = 'hours';\n    // `navigator.webkitVibrate` never shipped in any browser - the probe it\n    // came from was folklore. A plain feature check is the whole of it.\n    this.canVibrate = typeof navigator.vibrate === 'function';\n    this._canvas = this.containerEl.querySelector('.timepicker-canvas');\n    this.plate = this.containerEl.querySelector('.timepicker-plate');\n    this.digitalClock = this.containerEl.querySelector('.timepicker-display-column');\n    this.hoursView = this.containerEl.querySelector('.timepicker-hours');\n    this.minutesView = this.containerEl.querySelector('.timepicker-minutes');\n    this.inputHours = this.containerEl.querySelector('.timepicker-input-hours');\n    this.inputMinutes = this.containerEl.querySelector('.timepicker-input-minutes');\n    this.inputHours.setAttribute('aria-label', this.options.i18n.hours);\n    this.inputMinutes.setAttribute('aria-label', this.options.i18n.minutes);\n    this.spanAmPm = this.containerEl.querySelector('.timepicker-span-am-pm');\n    this.footer = this.containerEl.querySelector('.timepicker-footer');\n    this.amOrPm = 'PM';\n  }\n\n  _pickerSetup() {\n    Utils.createButton(\n      this.footer,\n      this.options.i18n.clear,\n      ['timepicker-clear'],\n      this.options.showClearBtn,\n      this.clear\n    );\n\n    if (!this.options.autoSubmit) {\n      Utils.createConfirmationContainer(\n        this.footer,\n        this.options.i18n.done,\n        this.options.i18n.cancel,\n        this.confirm,\n        this.cancel\n      );\n    }\n\n    this._updateTimeFromInput();\n\n    // With a docked display the container is `visibility: hidden` until\n    // show(), so the dial can wait for the first interaction. Without one it\n    // is on screen from the moment it is inserted and has to be ready now.\n    if (!this.options.displayPlugin) this.showView('hours');\n  }\n\n  /**\n   * Build the dial, once. Cheap to call repeatedly - every entry point that\n   * touches the clock calls it first, so the picker cannot be interacted with\n   * before it exists.\n   */\n  private _ensureClockBuilt() {\n    if (this._clockBuilt) return;\n    this._clockBuilt = true;\n    this._clockSetup();\n    // Applies the AM/PM state _updateTimeFromInput worked out before the\n    // buttons existed.\n    this._updateAmPmView();\n  }\n\n  _clockSetup() {\n    if (this.options.twelveHour) {\n      // AM Button\n      this._amBtn = document.createElement('button');\n      this._amBtn.type = 'button';\n      this._amBtn.classList.add('am-btn');\n      this._amBtn.innerText = 'AM';\n      this._amBtn.addEventListener('click', this._handleAmPmClick);\n      this.spanAmPm.appendChild(this._amBtn);\n      // PM Button\n      this._pmBtn = document.createElement('button');\n      this._pmBtn.type = 'button';\n      this._pmBtn.classList.add('pm-btn');\n      this._pmBtn.innerText = 'PM';\n      this._pmBtn.addEventListener('click', this._handleAmPmClick);\n      this.spanAmPm.appendChild(this._pmBtn);\n    }\n    this._buildHoursView();\n    this._buildMinutesView();\n    this._buildSVGClock();\n  }\n\n  _buildSVGClock() {\n    // Draw clock hands and others\n    const dialRadius = this.options.dialRadius;\n    const tickRadius = this.options.tickRadius;\n    const diameter = dialRadius * 2;\n    const svg = Timepicker._createSVGEl('svg');\n    svg.setAttribute('class', 'timepicker-svg');\n    svg.setAttribute('width', diameter.toString());\n    svg.setAttribute('height', diameter.toString());\n    const g = Timepicker._createSVGEl('g');\n    g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');\n    const bearing = Timepicker._createSVGEl('circle');\n    bearing.setAttribute('class', 'timepicker-canvas-bearing');\n    bearing.setAttribute('cx', '0');\n    bearing.setAttribute('cy', '0');\n    bearing.setAttribute('r', '4');\n    const hand = Timepicker._createSVGEl('line');\n    hand.setAttribute('x1', '0');\n    hand.setAttribute('y1', '0');\n    const bg = Timepicker._createSVGEl('circle');\n    bg.setAttribute('class', 'timepicker-canvas-bg');\n    bg.setAttribute('r', tickRadius.toString());\n    g.appendChild(hand);\n    g.appendChild(bg);\n    g.appendChild(bearing);\n    svg.appendChild(g);\n    this._canvas.appendChild(svg);\n    this.hand = hand;\n    this.bg = bg;\n    this.bearing = bearing;\n    this.g = g;\n  }\n\n  _buildHoursView() {\n    // Hours view\n    if (this.options.twelveHour) {\n      for (let i = 1; i < 13; i += 1) {\n        // const tick = <HTMLElement>$tick.cloneNode(true);\n        const radian = (i / 6) * Math.PI;\n        const radius = this.options.outerRadius;\n        this._buildHoursTick(i, radian, radius);\n      }\n    } else {\n      for (let i = 0; i < 24; i += 1) {\n        // const tick = <HTMLElement>$tick.cloneNode(true);\n        const radian = (i / 6) * Math.PI;\n        const inner = i > 0 && i < 13;\n        const radius = inner ? this.options.innerRadius : this.options.outerRadius;\n        this._buildHoursTick(i, radian, radius);\n      }\n    }\n  }\n\n  _buildHoursTick(i: number, radian: number, radius: number) {\n    const tick = document.createElement('div');\n    tick.classList.add('timepicker-tick');\n    tick.style.left =\n      this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';\n    tick.style.top =\n      this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';\n    tick.textContent = i === 0 ? '00' : i.toString();\n    this.hoursView.appendChild(tick);\n  }\n\n  _buildMinutesView() {\n    const _tick = document.createElement('div');\n    _tick.classList.add('timepicker-tick');\n    // Minutes view\n    for (let i = 0; i < 60; i += 5) {\n      const tick = <HTMLElement>_tick.cloneNode(true);\n      const radian = (i / 30) * Math.PI;\n      tick.style.left =\n        this.options.dialRadius +\n        Math.sin(radian) * this.options.outerRadius -\n        this.options.tickRadius +\n        'px';\n      tick.style.top =\n        this.options.dialRadius -\n        Math.cos(radian) * this.options.outerRadius -\n        this.options.tickRadius +\n        'px';\n      tick.textContent = Timepicker._addLeadingZero(i);\n      this.minutesView.appendChild(tick);\n    }\n  }\n\n  _handleAmPmClick = (e: MouseEvent) => {\n    this._handleAmPmInteraction(<HTMLElement>e.target);\n  };\n\n  _handleAmPmInteraction = (e: HTMLElement) => {\n    this.amOrPm = e.classList.contains('am-btn') ? 'AM' : 'PM';\n    this._updateAmPmView();\n  }\n\n  _updateAmPmView() {\n    // _updateTimeFromInput settles amOrPm before the dial is built; the\n    // buttons pick the state up in _ensureClockBuilt.\n    if (!this._amBtn || !this._pmBtn) return;\n    this._amBtn.setAttribute('aria-pressed', String(this.amOrPm === 'AM'));\n    this._pmBtn.setAttribute('aria-pressed', String(this.amOrPm === 'PM'));\n    this._amBtn.classList.toggle('outlined', this.amOrPm !== 'AM');\n    this._pmBtn.classList.toggle('outlined', this.amOrPm !== 'PM');\n    if (this.options.twelveHour) {\n      if (this.amOrPm === 'PM') {\n        this._amBtn.classList.remove('filled');\n        this._pmBtn.classList.add('filled');\n      } else if (this.amOrPm === 'AM') {\n        this._amBtn.classList.add('filled');\n        this._pmBtn.classList.remove('filled');\n      }\n    }\n  }\n\n  _updateTimeFromInput() {\n    // Get the time\n    let value = ((this.el.value || this.options.defaultTime || '') + '').trim().toUpperCase().split(':');\n    const period = value[1]?.match(/AM|PM/)?.[0];\n    value[1] = value[1]?.replace(/AM|PM/, '');\n    if (value[0] === 'NOW') {\n      const now = new Date(+new Date() + this.options.fromNow);\n      value = [now.getHours().toString(), now.getMinutes().toString()];\n    }\n    this.hours = +value[0] || 0;\n    this.minutes = +value[1] || 0;\n    if (this.options.twelveHour) {\n      this.amOrPm = period === 'AM' || period === 'PM' ? period : this.hours >= 12 ? 'PM' : 'AM';\n      this.hours = this.hours % 12 || 12;\n    }\n    this.inputHours.value = Timepicker._addLeadingZero(this.hours);\n    this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);\n\n    this._updateAmPmView();\n  }\n\n  /**\n   * Show hours or minutes view on timepicker.\n   * @param view The name of the view you want to switch to, 'hours' or 'minutes'.\n   * @param delay\n   */\n  showView = (view: Views, delay: number = null) => {\n    this._ensureClockBuilt();\n    const isHours = view === 'hours',\n      nextView = isHours ? this.hoursView : this.minutesView,\n      hideView = isHours ? this.minutesView : this.hoursView;\n    this.currentView = view;\n\n    /*if (isHours) {\n      this.inputHours.classList.add('text-primary');\n      this.inputMinutes.classList.remove('text-primary');\n    } else {\n      this.inputHours.classList.remove('text-primary');\n      this.inputMinutes.classList.add('text-primary');\n    }*/\n\n    // Transition view\n    hideView.classList.add('timepicker-dial-out');\n\n    nextView.style.visibility = 'visible';\n    nextView.classList.remove('timepicker-dial-out');\n\n    // Reset clock hand\n    this.resetClock(delay);\n    // After transitions ended\n    clearTimeout(this.toggleViewTimer);\n    this.toggleViewTimer = setTimeout(() => {\n      hideView.style.visibility = 'hidden';\n    }, this.options.duration);\n  };\n\n  resetClock(delay) {\n    const view = this.currentView,\n      value = this[view],\n      isHours = view === 'hours',\n      unit = Math.PI / (isHours ? 6 : 30),\n      radian = value * unit,\n      radius =\n        isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius,\n      x = Math.sin(radian) * radius,\n      y = -Math.cos(radian) * radius;\n\n    if (delay) {\n      this._canvas?.classList.add('timepicker-canvas-out');\n      setTimeout(() => {\n        this._canvas?.classList.remove('timepicker-canvas-out');\n        this.setHand(x, y);\n      }, delay);\n    } else {\n      this.setHand(x, y);\n    }\n  }\n\n  _inputFromTextField = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    const isHours = input === this.inputHours;\n    if (!isHours && input !== this.inputMinutes) return;\n    const value = Number(input.value);\n    const min = isHours && this.options.twelveHour ? 1 : 0;\n    const max = isHours ? (this.options.twelveHour ? 12 : 23) : 59;\n    if (!input.value.trim() || !Number.isInteger(value) || value < min || value > max) return;\n    this[isHours ? 'hours' : 'minutes'] = value;\n    this.drawClockFromTimeInput(value, isHours);\n  };\n\n  drawClockFromTimeInput(value, isHours) {\n    const unit = Math.PI / (isHours ? 6 : 30);\n    const radian = value * unit;\n    let radius;\n    if (this.options.twelveHour) {\n      radius = this.options.outerRadius;\n    } else {\n      radius =\n        isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius;\n    }\n    this.setClockAttributes(radian, radius);\n  }\n\n  setHand(x, y, roundBy5: boolean = false) {\n    const isHours = this.currentView === 'hours',\n      unit = Math.PI / (isHours || roundBy5 ? 6 : 30),\n      z = Math.sqrt(x * x + y * y),\n      inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;\n    let radian = Math.atan2(x, -y),\n      radius = inner ? this.options.innerRadius : this.options.outerRadius;\n\n    if (this.options.twelveHour) {\n      radius = this.options.outerRadius;\n    }\n\n    // Radian should in range [0, 2PI]\n    if (radian < 0) {\n      radian = Math.PI * 2 + radian;\n    }\n\n    // Get the round value\n    let value = Math.round(radian / unit);\n\n    // Get the round radian\n    radian = value * unit;\n\n    // Correct the hours or minutes\n    if (this.options.twelveHour) {\n      if (isHours) {\n        if (value === 0) value = 12;\n      } else {\n        if (roundBy5) value *= 5;\n        if (value === 60) value = 0;\n      }\n    } else {\n      if (isHours) {\n        if (value === 12) {\n          value = 0;\n        }\n        value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;\n      } else {\n        if (roundBy5) {\n          value *= 5;\n        }\n        if (value === 60) {\n          value = 0;\n        }\n      }\n    }\n\n    // Once hours or minutes changed, vibrate the device\n    if (this[this.currentView] !== value) {\n      if (this.canVibrate && this.options.vibrate) {\n        // Do not vibrate too frequently\n        if (!this.vibrateTimer) {\n          navigator.vibrate(10);\n          this.vibrateTimer = setTimeout(() => {\n            this.vibrateTimer = null;\n          }, 100);\n        }\n      }\n    }\n\n    this[this.currentView] = value;\n    if (isHours) {\n      this.inputHours.value = Timepicker._addLeadingZero(value);\n    } else {\n      this.inputMinutes.value = Timepicker._addLeadingZero(value);\n    }\n\n    // Set clock hand and others' position\n    this.setClockAttributes(radian, radius);\n  }\n\n  setClockAttributes(radian: number, radius: number) {\n    // Nothing to point at until the SVG exists.\n    if (!this.hand || !this.bg) return;\n    const cx1 = Math.sin(radian) * (radius - this.options.tickRadius),\n      cy1 = -Math.cos(radian) * (radius - this.options.tickRadius),\n      cx2 = Math.sin(radian) * radius,\n      cy2 = -Math.cos(radian) * radius;\n    this.hand.setAttribute('x2', cx1.toString());\n    this.hand.setAttribute('y2', cy1.toString());\n    this.bg.setAttribute('cx', cx2.toString());\n    this.bg.setAttribute('cy', cy2.toString());\n  }\n\n  formatHours() {\n    if (this.inputHours.value == '') this.setHoursDefault();\n    this.inputHours.value = Timepicker._addLeadingZero(this.hours);\n  }\n\n  formatMinutes() {\n    if (this.inputMinutes.value == '') this.minutes = new Date().getMinutes();\n    this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);\n  }\n\n  setHoursDefault() {\n    this.hours = new Date().getHours();\n    if (this.options.twelveHour) this.hours = this.hours % 12 || 12;\n    this.inputHours.value = this.hours.toString();\n  }\n\n  done = (clearValue = null) => {\n    // Set input value\n    const last = this.el.value;\n    let value = clearValue\n      ? ''\n      : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);\n    this.time = value;\n    if (!clearValue && this.options.twelveHour) {\n      value = `${value} ${this.amOrPm}`;\n    }\n    this.el.value = value;\n    // Trigger change event\n    if (value !== last) {\n      this.el.dispatchEvent(\n        new Event('change', { bubbles: true, cancelable: true, composed: true })\n      );\n    }\n  };\n\n  confirm = () => {\n    this.done();\n    if (typeof this.options.onDone === 'function') this.options.onDone.call(this);\n  }\n\n  cancel = () => {\n    // not logical clearing the input field on cancel, since the end user might want to make use of the previously submitted value\n    // this.clear();\n    if (typeof this.options.onCancel === 'function') this.options.onCancel.call(this);\n  }\n\n  clear = () => {\n    this.done(true);\n  };\n\n  static {\n    Timepicker._template = `<div class=\"timepicker-container\">\n          <div class=\"timepicker-digital-display\">\n            <div class=\"timepicker-text-container\">\n              <div class=\"timepicker-display-column timepicker-display-digital-clock\">\n                <div class=\"timepicker-input-hours-wrapper\">\n                  <input type=\"text\" maxlength=\"2\" class=\"timepicker-input-hours text-primary\" />\n                </div>\n                <div class=\"timepicker-input-divider-wrapper\">\n                  <span class=\"timepicker-input-divider\">:</span>\n                </div>\n                <div class=\"timepicker-input-minutes-wrapper\">\n                  <input type=\"text\" maxlength=\"2\" class=\"timepicker-input-minutes\" />\n                </div>\n              </div>\n              <div class=\"timepicker-display-column timepicker-display-am-pm\">\n                <div class=\"timepicker-span-am-pm\"></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"timepicker-analog-display\">\n            <div class=\"timepicker-plate\">\n              <div class=\"timepicker-canvas\"></div>\n              <div class=\"timepicker-dial timepicker-hours\"></div>\n              <div class=\"timepicker-dial timepicker-minutes timepicker-dial-out\"></div>\n            </div>\n            <div class=\"timepicker-footer\"></div>\n          </div>\n        </div>`;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}