@expressivecss/expressive 0.15.0 → 0.16.0

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

@@ -1,546 +0,0 @@
-import {
-  DockedDisplayPlugin
-} from "./chunk-M3MURWMB.mjs";
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
-import {
-  Component
-} from "./chunk-PD6HYHAE.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._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 = (e) => {
-      if (e.key === Utils.keys.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);
-      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();
-      this._removeDragListeners();
-      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 {
-        clearTimeout(this._autoSubmitTimer);
-        this._autoSubmitTimer = setTimeout(() => {
-          this._autoSubmitTimer = null;
-          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);
-      }
-    };
-    /**
-     * 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._removeDragListeners();
-    };
-    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;
-      this._cancelClockReset();
-      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 === "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() {
-    clearTimeout(this._autoSubmitTimer);
-    clearTimeout(this.toggleViewTimer);
-    clearTimeout(this.vibrateTimer);
-    this._cancelClockReset();
-    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);
-    this._removeDragListeners();
-  }
-  _removeDragListeners() {
-    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) {
-    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, _Timepicker._addLeadingZero(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();
-    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();
-  }
-  _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);
-    }
-  }
-  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;
-    }
-    let value = Math.round(radian / unit);
-    radian = value * unit;
-    if (!isHours) {
-      if (roundBy5) value *= 5;
-      if (value === 60) value = 0;
-    } else if (this.options.twelveHour) {
-      if (value === 0) value = 12;
-    } else if (value % 12 === 0) {
-      value = inner ? 12 : 0;
-    } else if (!inner) {
-      value += 12;
-    }
-    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 = _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-PO3AXVR3.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "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: boolean;\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 _autoSubmitTimer: ReturnType<typeof setTimeout>;\n  private _clockResetTimer: 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 === 'docked') {\n      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    clearTimeout(this._autoSubmitTimer);\n    clearTimeout(this.toggleViewTimer);\n    clearTimeout(this.vibrateTimer);\n    this._cancelClockReset();\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    this._removeDragListeners();\n  }\n\n  private _removeDragListeners() {\n    document.removeEventListener('pointermove', this._handleDocumentClickMove);\n    document.removeEventListener('pointerup', this._handleDocumentClickEnd);\n    document.removeEventListener('pointercancel', this._handleDocumentClickCancel);\n  }\n\n  _handleInputClick = () => {\n    this._updateTimeFromInput();\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._handleInputClick();\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    this._removeDragListeners();\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      clearTimeout(this._autoSubmitTimer);\n      this._autoSubmitTimer = setTimeout(() => {\n        this._autoSubmitTimer = null;\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  };\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    this._removeDragListeners();\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 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 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    this._placeTick(this.hoursView, radian, radius, i === 0 ? '00' : i.toString());\n  }\n\n  _buildMinutesView() {\n    for (let i = 0; i < 60; i += 5) {\n      const radian = (i / 30) * Math.PI;\n      this._placeTick(this.minutesView, radian, this.options.outerRadius, Timepicker._addLeadingZero(i));\n    }\n  }\n\n  private _placeTick(view: HTMLElement, radian: number, radius: number, text: string) {\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 = text;\n    view.appendChild(tick);\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    this._cancelClockReset();\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    // 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  private _cancelClockReset() {\n    clearTimeout(this._clockResetTimer);\n    this._clockResetTimer = null;\n    this._canvas?.classList.remove('timepicker-canvas-out');\n  }\n\n  resetClock(delay) {\n    this._cancelClockReset();\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      this._clockResetTimer = setTimeout(() => {\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    this._cancelClockReset();\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    this._cancelClockReset();\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    const radius = inner && !this.options.twelveHour ? this.options.innerRadius : this.options.outerRadius;\n    let radian = Math.atan2(x, -y);\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 (!isHours) {\n      if (roundBy5) value *= 5;\n      if (value === 60) value = 0;\n    } else if (this.options.twelveHour) {\n      if (value === 0) value = 12;\n    } else if (value % 12 === 0) {\n      // 0 and 12 share a position: 12 on the inner ring, 00 on the outer.\n      value = inner ? 12 : 0;\n    } else if (!inner) {\n      value += 12;\n    }\n\n    // Once hours or minutes changed, vibrate the device. The timer keeps it\n    // from vibrating too frequently.\n    if (this[this.currentView] !== value && this.canVibrate && this.options.vibrate && !this.vibrateTimer) {\n      navigator.vibrate(10);\n      this.vibrateTimer = setTimeout(() => {\n        this.vibrateTimer = null;\n      }, 100);\n    }\n\n    this[this.currentView] = value;\n    (isHours ? this.inputHours : this.inputMinutes).value = Timepicker._addLeadingZero(value);\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": ";;;;;;;;;;;AAsGA,IAAM,YAA+B;AAAA,EACnC,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA;AAAA,EACb,SAAS;AAAA;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,YAAY;AAAA;AAAA,EACZ,SAAS;AAAA;AAAA;AAAA,EAET,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,eAAe;AAAA,EACf,sBAAsB;AACxB;AAEO,IAAM,cAAN,MAAM,oBAAmB,UAA6B;AAAA,EAmD3D,YAAY,IAAsB,SAAqC;AACrE,UAAM,IAAI,SAAS,WAAU;AAxC/B;AAAA,SAAQ,iBAAgC;AAqCxC;AAAA,SAAQ,cAAc;AAyGtB,6BAAoB,MAAM;AACxB,WAAK,qBAAqB;AAG1B,WAAK,kBAAkB;AACvB,UAAI,KAAK,cAAe,MAAK,cAAc,KAAK;AAChD,WAAK,WAAW,MAAM;AACtB,UAAI,OAAO,KAAK,QAAQ,uBAAuB,WAAY,MAAK,QAAQ,mBAAmB,KAAK,IAAI;AAAA,IACtG;AAEA,+BAAsB,CAAC,MAAqB;AAC1C,UAAI,EAAE,QAAQ,MAAM,KAAK,OAAO;AAC9B,UAAE,eAAe;AACjB,aAAK,kBAAkB;AAAA,MACzB;AAAA,IACF;AAEA,kCAAyB,CAAC,MAAoB;AAC5C,UAAI,CAAC,EAAE,UAAW;AAClB,UAAI,EAAE,gBAAgB,WAAW,EAAE,WAAW,EAAG;AACjD,QAAE,eAAe;AACjB,WAAK,kBAAkB;AACvB,YAAM,eAAe,KAAK,MAAM,sBAAsB;AACtD,YAAM,SAAS,EAAE,GAAG,aAAa,MAAM,GAAG,aAAa,IAAI;AAE3D,WAAK,KAAK,OAAO,IAAI,KAAK,QAAQ;AAClC,WAAK,KAAK,OAAO,IAAI,KAAK,QAAQ;AAClC,WAAK,QAAQ;AACb,WAAK,iBAAiB,EAAE;AACxB,WAAK,KAAK,EAAE,UAAU,KAAK;AAC3B,WAAK,KAAK,EAAE,UAAU,KAAK;AAG3B,WAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK;AAKpC,eAAS,iBAAiB,eAAe,KAAK,wBAAwB;AACtE,eAAS,iBAAiB,aAAa,KAAK,uBAAuB;AACnE,eAAS,iBAAiB,iBAAiB,KAAK,0BAA0B;AAAA,IAC5E;AAEA,oCAA2B,CAAC,MAAoB;AAC9C,UAAI,EAAE,cAAc,KAAK,eAAgB;AACzC,QAAE,eAAe;AACjB,YAAM,IAAI,EAAE,UAAU,KAAK;AAC3B,YAAM,IAAI,EAAE,UAAU,KAAK;AAC3B,WAAK,QAAQ;AACb,WAAK,QAAQ,GAAG,GAAG,KAAK;AAAA,IAC1B;AAEA,mCAA0B,CAAC,MAAoB;AAC7C,UAAI,EAAE,cAAc,KAAK,eAAgB;AACzC,WAAK,iBAAiB;AACtB,QAAE,eAAe;AACjB,WAAK,qBAAqB;AAC1B,YAAM,IAAI,EAAE,UAAU,KAAK;AAC3B,YAAM,IAAI,EAAE,UAAU,KAAK;AAC3B,UAAI,KAAK,SAAS,MAAM,KAAK,MAAM,MAAM,KAAK,IAAI;AAChD,aAAK,QAAQ,GAAG,CAAC;AAAA,MACnB;AAEA,UAAI,KAAK,gBAAgB,SAAS;AAChC,aAAK,aAAa,MAAM;AACxB,aAAK,SAAS,WAAW,KAAK,QAAQ,WAAW,CAAC;AAAA,MACpD,OAAO;AACL,qBAAa,KAAK,gBAAgB;AAClC,aAAK,mBAAmB,WAAW,MAAM;AACvC,eAAK,mBAAmB;AACxB,cAAI,KAAK,QAAQ,WAAY,MAAK,KAAK;AAAA,QACzC,GAAG,KAAK,QAAQ,WAAW,CAAC;AAAA,MAC9B;AAEA,UAAI,OAAO,KAAK,QAAQ,aAAa,YAAY;AAC/C,aAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,OAAO,KAAK,OAAO;AAAA,MAC3D;AAAA,IACF;AAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAA6B,CAAC,MAAoB;AAChD,UAAI,EAAE,cAAc,KAAK,eAAgB;AACzC,WAAK,iBAAiB;AACtB,WAAK,QAAQ;AACb,WAAK,qBAAqB;AAAA,IAC5B;AA+KA,4BAAmB,CAAC,MAAkB;AACpC,WAAK,uBAAoC,EAAE,MAAM;AAAA,IACnD;AAEA,kCAAyB,CAAC,MAAmB;AAC3C,WAAK,SAAS,EAAE,UAAU,SAAS,QAAQ,IAAI,OAAO;AACtD,WAAK,gBAAgB;AAAA,IACvB;AAgDA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAW,CAAC,MAAa,QAAgB,SAAS;AAChD,WAAK,kBAAkB;AACvB,YAAM,UAAU,SAAS,SACvB,WAAW,UAAU,KAAK,YAAY,KAAK,aAC3C,WAAW,UAAU,KAAK,cAAc,KAAK;AAC/C,WAAK,cAAc;AAGnB,eAAS,UAAU,IAAI,qBAAqB;AAE5C,eAAS,MAAM,aAAa;AAC5B,eAAS,UAAU,OAAO,qBAAqB;AAG/C,WAAK,WAAW,KAAK;AAErB,mBAAa,KAAK,eAAe;AACjC,WAAK,kBAAkB,WAAW,MAAM;AACtC,iBAAS,MAAM,aAAa;AAAA,MAC9B,GAAG,KAAK,QAAQ,QAAQ;AAAA,IAC1B;AA8BA,+BAAsB,CAAC,UAAiB;AACtC,YAAM,QAAQ,MAAM;AACpB,YAAM,UAAU,UAAU,KAAK;AAC/B,UAAI,CAAC,WAAW,UAAU,KAAK,aAAc;AAC7C,WAAK,kBAAkB;AACvB,YAAM,QAAQ,OAAO,MAAM,KAAK;AAChC,YAAM,MAAM,WAAW,KAAK,QAAQ,aAAa,IAAI;AACrD,YAAM,MAAM,UAAW,KAAK,QAAQ,aAAa,KAAK,KAAM;AAC5D,UAAI,CAAC,MAAM,MAAM,KAAK,KAAK,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,OAAO,QAAQ,IAAK;AACnF,WAAK,UAAU,UAAU,SAAS,IAAI;AACtC,WAAK,uBAAuB,OAAO,OAAO;AAAA,IAC5C;AA6FA,gBAAO,CAAC,aAAa,SAAS;AAE5B,YAAM,OAAO,KAAK,GAAG;AACrB,UAAI,QAAQ,aACR,KACA,YAAW,gBAAgB,KAAK,KAAK,IAAI,MAAM,YAAW,gBAAgB,KAAK,OAAO;AAC1F,WAAK,OAAO;AACZ,UAAI,CAAC,cAAc,KAAK,QAAQ,YAAY;AAC1C,gBAAQ,GAAG,KAAK,IAAI,KAAK,MAAM;AAAA,MACjC;AACA,WAAK,GAAG,QAAQ;AAEhB,UAAI,UAAU,MAAM;AAClB,aAAK,GAAG;AAAA,UACN,IAAI,MAAM,UAAU,EAAE,SAAS,MAAM,YAAY,MAAM,UAAU,KAAK,CAAC;AAAA,QACzE;AAAA,MACF;AAAA,IACF;AAEA,mBAAU,MAAM;AACd,WAAK,KAAK;AACV,UAAI,OAAO,KAAK,QAAQ,WAAW,WAAY,MAAK,QAAQ,OAAO,KAAK,IAAI;AAAA,IAC9E;AAEA,kBAAS,MAAM;AAGb,UAAI,OAAO,KAAK,QAAQ,aAAa,WAAY,MAAK,QAAQ,SAAS,KAAK,IAAI;AAAA,IAClF;AAEA,iBAAQ,MAAM;AACZ,WAAK,KAAK,IAAI;AAAA,IAChB;AA/lBE,SAAK,GAAG,uBAAuB,IAAI;AACnC,SAAK,UAAU;AAAA,MACb,GAAG,YAAW;AAAA,MACd,GAAG;AAAA,MACH,MAAM,EAAE,GAAG,YAAW,SAAS,MAAM,GAAG,SAAS,KAAK;AAAA,IACxD;AACA,SAAK,KAAK,MAAM,KAAK;AACrB,SAAK,mBAAmB;AACxB,SAAK,gBAAgB;AACrB,SAAK,oBAAoB;AAIzB,SAAK,aAAa;AAElB,QAAI,KAAK,QAAQ,kBAAkB,UAAU;AAC3C,WAAK,gBAAgB,oBAAoB,KAAK,KAAK,IAAI,KAAK,aAAa,KAAK,QAAQ,oBAAoB;AAAA,IAC5G;AAAA,EACF;AAAA,EAEA,WAAW,WAA8B;AACvC,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,KACL,KACA,UAAsC,CAAC,GACZ;AAC3B,WAAO,MAAM,KAAK,KAAK,SAAS,WAAU;AAAA,EAC5C;AAAA,EAEA,OAAO,gBAAgB,KAAa;AAClC,YAAQ,MAAM,KAAK,MAAM,MAAM;AAAA,EACjC;AAAA,EAEA,OAAO,aAAa,MAAc;AAChC,UAAM,QAAQ;AACd,WAAO,SAAS,gBAAgB,OAAO,IAAI;AAAA,EAC7C;AAAA,EAEA,OAAO,YAAY,IAA6B;AAC9C,WAAO,GAAG,uBAAuB;AAAA,EACnC;AAAA,EAEA,UAAU;AACR,iBAAa,KAAK,gBAAgB;AAClC,iBAAa,KAAK,eAAe;AACjC,iBAAa,KAAK,YAAY;AAC9B,SAAK,kBAAkB;AACvB,SAAK,qBAAqB;AAC1B,SAAK,eAAe,QAAQ;AAC5B,SAAK,YAAY,OAAO;AACxB,SAAK,GAAG,uBAAuB,IAAI;AAAA,EACrC;AAAA,EAEA,sBAAsB;AACpB,SAAK,GAAG,iBAAiB,SAAS,KAAK,iBAAiB;AACxD,SAAK,GAAG,iBAAiB,WAAW,KAAK,mBAAmB;AAC5D,SAAK,MAAM,iBAAiB,eAAe,KAAK,sBAAsB;AACtE,SAAK,aAAa,iBAAiB,SAAS,KAAK,mBAAmB;AACpE,SAAK,WAAW,iBAAiB,SAAS,MAAM,KAAK,SAAS,OAAO,CAAC;AACtE,SAAK,WAAW,iBAAiB,YAAY,MAAM,KAAK,YAAY,CAAC;AACrE,SAAK,aAAa,iBAAiB,SAAS,MAAM,KAAK,SAAS,SAAS,CAAC;AAC1E,SAAK,aAAa,iBAAiB,YAAY,MAAM,KAAK,cAAc,CAAC;AAAA,EAC3E;AAAA,EAEA,uBAAuB;AACrB,SAAK,aAAa,oBAAoB,SAAS,KAAK,mBAAmB;AACvE,SAAK,GAAG,oBAAoB,SAAS,KAAK,iBAAiB;AAC3D,SAAK,GAAG,oBAAoB,WAAW,KAAK,mBAAmB;AAG/D,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAEQ,uBAAuB;AAC7B,aAAS,oBAAoB,eAAe,KAAK,wBAAwB;AACzE,aAAS,oBAAoB,aAAa,KAAK,uBAAuB;AACtE,aAAS,oBAAoB,iBAAiB,KAAK,0BAA0B;AAAA,EAC/E;AAAA,EA8FA,qBAAqB;AACnB,UAAM,WAAW,SAAS,cAAc,UAAU;AAClD,aAAS,YAAY,YAAW,UAAU,KAAK;AAE/C,SAAK,cAA2B,SAAS,QAAQ;AACjD,SAAK,YAAY,KAAK,eAAe,KAAK;AAG1C,UAAM,QAAQ,KAAK,QAAQ;AAC3B,UAAM,cAAc,iBAAiB,cAAc,QAAQ,SAAS,cAAc,KAAK;AAEvF,QAAI,KAAK,QAAQ,aAAa,CAAC,CAAC,aAAa;AAC3C,kBAAY,OAAO,KAAK,WAAW;AAAA,IACrC,OAAO;AACL,WAAK,GAAG,cAAc,YAAY,KAAK,WAAW;AAAA,IACpD;AAAA,EACF;AAAA,EAEA,kBAAkB;AAChB,SAAK,cAAc;AAGnB,SAAK,aAAa,OAAO,UAAU,YAAY;AAC/C,SAAK,UAAU,KAAK,YAAY,cAAc,oBAAoB;AAClE,SAAK,QAAQ,KAAK,YAAY,cAAc,mBAAmB;AAC/D,SAAK,eAAe,KAAK,YAAY,cAAc,4BAA4B;AAC/E,SAAK,YAAY,KAAK,YAAY,cAAc,mBAAmB;AACnE,SAAK,cAAc,KAAK,YAAY,cAAc,qBAAqB;AACvE,SAAK,aAAa,KAAK,YAAY,cAAc,yBAAyB;AAC1E,SAAK,eAAe,KAAK,YAAY,cAAc,2BAA2B;AAC9E,SAAK,WAAW,aAAa,cAAc,KAAK,QAAQ,KAAK,KAAK;AAClE,SAAK,aAAa,aAAa,cAAc,KAAK,QAAQ,KAAK,OAAO;AACtE,SAAK,WAAW,KAAK,YAAY,cAAc,wBAAwB;AACvE,SAAK,SAAS,KAAK,YAAY,cAAc,oBAAoB;AACjE,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,eAAe;AACb,UAAM;AAAA,MACJ,KAAK;AAAA,MACL,KAAK,QAAQ,KAAK;AAAA,MAClB,CAAC,kBAAkB;AAAA,MACnB,KAAK,QAAQ;AAAA,MACb,KAAK;AAAA,IACP;AAEA,QAAI,CAAC,KAAK,QAAQ,YAAY;AAC5B,YAAM;AAAA,QACJ,KAAK;AAAA,QACL,KAAK,QAAQ,KAAK;AAAA,QAClB,KAAK,QAAQ,KAAK;AAAA,QAClB,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AAAA,IACF;AAEA,SAAK,qBAAqB;AAK1B,QAAI,CAAC,KAAK,QAAQ,cAAe,MAAK,SAAS,OAAO;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAAoB;AAC1B,QAAI,KAAK,YAAa;AACtB,SAAK,cAAc;AACnB,SAAK,YAAY;AAGjB,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,QAAQ,YAAY;AAE3B,WAAK,SAAS,SAAS,cAAc,QAAQ;AAC7C,WAAK,OAAO,OAAO;AACnB,WAAK,OAAO,UAAU,IAAI,QAAQ;AAClC,WAAK,OAAO,YAAY;AACxB,WAAK,OAAO,iBAAiB,SAAS,KAAK,gBAAgB;AAC3D,WAAK,SAAS,YAAY,KAAK,MAAM;AAErC,WAAK,SAAS,SAAS,cAAc,QAAQ;AAC7C,WAAK,OAAO,OAAO;AACnB,WAAK,OAAO,UAAU,IAAI,QAAQ;AAClC,WAAK,OAAO,YAAY;AACxB,WAAK,OAAO,iBAAiB,SAAS,KAAK,gBAAgB;AAC3D,WAAK,SAAS,YAAY,KAAK,MAAM;AAAA,IACvC;AACA,SAAK,gBAAgB;AACrB,SAAK,kBAAkB;AACvB,SAAK,eAAe;AAAA,EACtB;AAAA,EAEA,iBAAiB;AAEf,UAAM,aAAa,KAAK,QAAQ;AAChC,UAAM,aAAa,KAAK,QAAQ;AAChC,UAAM,WAAW,aAAa;AAC9B,UAAM,MAAM,YAAW,aAAa,KAAK;AACzC,QAAI,aAAa,SAAS,gBAAgB;AAC1C,QAAI,aAAa,SAAS,SAAS,SAAS,CAAC;AAC7C,QAAI,aAAa,UAAU,SAAS,SAAS,CAAC;AAC9C,UAAM,IAAI,YAAW,aAAa,GAAG;AACrC,MAAE,aAAa,aAAa,eAAe,aAAa,MAAM,aAAa,GAAG;AAC9E,UAAM,UAAU,YAAW,aAAa,QAAQ;AAChD,YAAQ,aAAa,SAAS,2BAA2B;AACzD,YAAQ,aAAa,MAAM,GAAG;AAC9B,YAAQ,aAAa,MAAM,GAAG;AAC9B,YAAQ,aAAa,KAAK,GAAG;AAC7B,UAAM,OAAO,YAAW,aAAa,MAAM;AAC3C,SAAK,aAAa,MAAM,GAAG;AAC3B,SAAK,aAAa,MAAM,GAAG;AAC3B,UAAM,KAAK,YAAW,aAAa,QAAQ;AAC3C,OAAG,aAAa,SAAS,sBAAsB;AAC/C,OAAG,aAAa,KAAK,WAAW,SAAS,CAAC;AAC1C,MAAE,YAAY,IAAI;AAClB,MAAE,YAAY,EAAE;AAChB,MAAE,YAAY,OAAO;AACrB,QAAI,YAAY,CAAC;AACjB,SAAK,QAAQ,YAAY,GAAG;AAC5B,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,UAAU;AACf,SAAK,IAAI;AAAA,EACX;AAAA,EAEA,kBAAkB;AAEhB,QAAI,KAAK,QAAQ,YAAY;AAC3B,eAAS,IAAI,GAAG,IAAI,IAAI,KAAK,GAAG;AAC9B,cAAM,SAAU,IAAI,IAAK,KAAK;AAC9B,cAAM,SAAS,KAAK,QAAQ;AAC5B,aAAK,gBAAgB,GAAG,QAAQ,MAAM;AAAA,MACxC;AAAA,IACF,OAAO;AACL,eAAS,IAAI,GAAG,IAAI,IAAI,KAAK,GAAG;AAC9B,cAAM,SAAU,IAAI,IAAK,KAAK;AAC9B,cAAM,QAAQ,IAAI,KAAK,IAAI;AAC3B,cAAM,SAAS,QAAQ,KAAK,QAAQ,cAAc,KAAK,QAAQ;AAC/D,aAAK,gBAAgB,GAAG,QAAQ,MAAM;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,gBAAgB,GAAW,QAAgB,QAAgB;AACzD,SAAK,WAAW,KAAK,WAAW,QAAQ,QAAQ,MAAM,IAAI,OAAO,EAAE,SAAS,CAAC;AAAA,EAC/E;AAAA,EAEA,oBAAoB;AAClB,aAAS,IAAI,GAAG,IAAI,IAAI,KAAK,GAAG;AAC9B,YAAM,SAAU,IAAI,KAAM,KAAK;AAC/B,WAAK,WAAW,KAAK,aAAa,QAAQ,KAAK,QAAQ,aAAa,YAAW,gBAAgB,CAAC,CAAC;AAAA,IACnG;AAAA,EACF;AAAA,EAEQ,WAAW,MAAmB,QAAgB,QAAgB,MAAc;AAClF,UAAM,OAAO,SAAS,cAAc,KAAK;AACzC,SAAK,UAAU,IAAI,iBAAiB;AACpC,SAAK,MAAM,OACT,KAAK,QAAQ,aAAa,KAAK,IAAI,MAAM,IAAI,SAAS,KAAK,QAAQ,aAAa;AAClF,SAAK,MAAM,MACT,KAAK,QAAQ,aAAa,KAAK,IAAI,MAAM,IAAI,SAAS,KAAK,QAAQ,aAAa;AAClF,SAAK,cAAc;AACnB,SAAK,YAAY,IAAI;AAAA,EACvB;AAAA,EAWA,kBAAkB;AAGhB,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAQ;AAClC,SAAK,OAAO,aAAa,gBAAgB,OAAO,KAAK,WAAW,IAAI,CAAC;AACrE,SAAK,OAAO,aAAa,gBAAgB,OAAO,KAAK,WAAW,IAAI,CAAC;AACrE,SAAK,OAAO,UAAU,OAAO,YAAY,KAAK,WAAW,IAAI;AAC7D,SAAK,OAAO,UAAU,OAAO,YAAY,KAAK,WAAW,IAAI;AAC7D,QAAI,KAAK,QAAQ,YAAY;AAC3B,UAAI,KAAK,WAAW,MAAM;AACxB,aAAK,OAAO,UAAU,OAAO,QAAQ;AACrC,aAAK,OAAO,UAAU,IAAI,QAAQ;AAAA,MACpC,WAAW,KAAK,WAAW,MAAM;AAC/B,aAAK,OAAO,UAAU,IAAI,QAAQ;AAClC,aAAK,OAAO,UAAU,OAAO,QAAQ;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,SAAK,kBAAkB;AAEvB,QAAI,UAAU,KAAK,GAAG,SAAS,KAAK,QAAQ,eAAe,MAAM,IAAI,KAAK,EAAE,YAAY,EAAE,MAAM,GAAG;AACnG,UAAM,SAAS,MAAM,CAAC,GAAG,MAAM,OAAO,IAAI,CAAC;AAC3C,UAAM,CAAC,IAAI,MAAM,CAAC,GAAG,QAAQ,SAAS,EAAE;AACxC,QAAI,MAAM,CAAC,MAAM,OAAO;AACtB,YAAM,MAAM,IAAI,KAAK,CAAC,oBAAI,KAAK,IAAI,KAAK,QAAQ,OAAO;AACvD,cAAQ,CAAC,IAAI,SAAS,EAAE,SAAS,GAAG,IAAI,WAAW,EAAE,SAAS,CAAC;AAAA,IACjE;AACA,SAAK,QAAQ,CAAC,MAAM,CAAC,KAAK;AAC1B,SAAK,UAAU,CAAC,MAAM,CAAC,KAAK;AAC5B,QAAI,KAAK,QAAQ,YAAY;AAC3B,WAAK,SAAS,WAAW,QAAQ,WAAW,OAAO,SAAS,KAAK,SAAS,KAAK,OAAO;AACtF,WAAK,QAAQ,KAAK,QAAQ,MAAM;AAAA,IAClC;AACA,SAAK,WAAW,QAAQ,YAAW,gBAAgB,KAAK,KAAK;AAC7D,SAAK,aAAa,QAAQ,YAAW,gBAAgB,KAAK,OAAO;AAEjE,SAAK,gBAAgB;AAAA,EACvB;AAAA,EA6BQ,oBAAoB;AAC1B,iBAAa,KAAK,gBAAgB;AAClC,SAAK,mBAAmB;AACxB,SAAK,SAAS,UAAU,OAAO,uBAAuB;AAAA,EACxD;AAAA,EAEA,WAAW,OAAO;AAChB,SAAK,kBAAkB;AACvB,UAAM,OAAO,KAAK,aAChB,QAAQ,KAAK,IAAI,GACjB,UAAU,SAAS,SACnB,OAAO,KAAK,MAAM,UAAU,IAAI,KAChC,SAAS,QAAQ,MACjB,SACE,WAAW,QAAQ,KAAK,QAAQ,KAAK,KAAK,QAAQ,cAAc,KAAK,QAAQ,aAC/E,IAAI,KAAK,IAAI,MAAM,IAAI,QACvB,IAAI,CAAC,KAAK,IAAI,MAAM,IAAI;AAE1B,QAAI,OAAO;AACT,WAAK,SAAS,UAAU,IAAI,uBAAuB;AACnD,WAAK,mBAAmB,WAAW,MAAM;AACvC,aAAK,QAAQ,GAAG,CAAC;AAAA,MACnB,GAAG,KAAK;AAAA,IACV,OAAO;AACL,WAAK,QAAQ,GAAG,CAAC;AAAA,IACnB;AAAA,EACF;AAAA,EAeA,uBAAuB,OAAO,SAAS;AACrC,UAAM,OAAO,KAAK,MAAM,UAAU,IAAI;AACtC,UAAM,SAAS,QAAQ;AACvB,QAAI;AACJ,QAAI,KAAK,QAAQ,YAAY;AAC3B,eAAS,KAAK,QAAQ;AAAA,IACxB,OAAO;AACL,eACE,WAAW,QAAQ,KAAK,QAAQ,KAAK,KAAK,QAAQ,cAAc,KAAK,QAAQ;AAAA,IACjF;AACA,SAAK,mBAAmB,QAAQ,MAAM;AAAA,EACxC;AAAA,EAEA,QAAQ,GAAG,GAAG,WAAoB,OAAO;AACvC,SAAK,kBAAkB;AACvB,UAAM,UAAU,KAAK,gBAAgB,SACnC,OAAO,KAAK,MAAM,WAAW,WAAW,IAAI,KAC5C,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,GAC3B,QAAQ,WAAW,KAAK,KAAK,QAAQ,cAAc,KAAK,QAAQ,eAAe;AACjF,UAAM,SAAS,SAAS,CAAC,KAAK,QAAQ,aAAa,KAAK,QAAQ,cAAc,KAAK,QAAQ;AAC3F,QAAI,SAAS,KAAK,MAAM,GAAG,CAAC,CAAC;AAG7B,QAAI,SAAS,GAAG;AACd,eAAS,KAAK,KAAK,IAAI;AAAA,IACzB;AAGA,QAAI,QAAQ,KAAK,MAAM,SAAS,IAAI;AAGpC,aAAS,QAAQ;AAGjB,QAAI,CAAC,SAAS;AACZ,UAAI,SAAU,UAAS;AACvB,UAAI,UAAU,GAAI,SAAQ;AAAA,IAC5B,WAAW,KAAK,QAAQ,YAAY;AAClC,UAAI,UAAU,EAAG,SAAQ;AAAA,IAC3B,WAAW,QAAQ,OAAO,GAAG;AAE3B,cAAQ,QAAQ,KAAK;AAAA,IACvB,WAAW,CAAC,OAAO;AACjB,eAAS;AAAA,IACX;AAIA,QAAI,KAAK,KAAK,WAAW,MAAM,SAAS,KAAK,cAAc,KAAK,QAAQ,WAAW,CAAC,KAAK,cAAc;AACrG,gBAAU,QAAQ,EAAE;AACpB,WAAK,eAAe,WAAW,MAAM;AACnC,aAAK,eAAe;AAAA,MACtB,GAAG,GAAG;AAAA,IACR;AAEA,SAAK,KAAK,WAAW,IAAI;AACzB,KAAC,UAAU,KAAK,aAAa,KAAK,cAAc,QAAQ,YAAW,gBAAgB,KAAK;AAGxF,SAAK,mBAAmB,QAAQ,MAAM;AAAA,EACxC;AAAA,EAEA,mBAAmB,QAAgB,QAAgB;AAEjD,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,GAAI;AAC5B,UAAM,MAAM,KAAK,IAAI,MAAM,KAAK,SAAS,KAAK,QAAQ,aACpD,MAAM,CAAC,KAAK,IAAI,MAAM,KAAK,SAAS,KAAK,QAAQ,aACjD,MAAM,KAAK,IAAI,MAAM,IAAI,QACzB,MAAM,CAAC,KAAK,IAAI,MAAM,IAAI;AAC5B,SAAK,KAAK,aAAa,MAAM,IAAI,SAAS,CAAC;AAC3C,SAAK,KAAK,aAAa,MAAM,IAAI,SAAS,CAAC;AAC3C,SAAK,GAAG,aAAa,MAAM,IAAI,SAAS,CAAC;AACzC,SAAK,GAAG,aAAa,MAAM,IAAI,SAAS,CAAC;AAAA,EAC3C;AAAA,EAEA,cAAc;AACZ,QAAI,KAAK,WAAW,SAAS,GAAI,MAAK,gBAAgB;AACtD,SAAK,WAAW,QAAQ,YAAW,gBAAgB,KAAK,KAAK;AAAA,EAC/D;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,aAAa,SAAS,GAAI,MAAK,WAAU,oBAAI,KAAK,GAAE,WAAW;AACxE,SAAK,aAAa,QAAQ,YAAW,gBAAgB,KAAK,OAAO;AAAA,EACnE;AAAA,EAEA,kBAAkB;AAChB,SAAK,SAAQ,oBAAI,KAAK,GAAE,SAAS;AACjC,QAAI,KAAK,QAAQ,WAAY,MAAK,QAAQ,KAAK,QAAQ,MAAM;AAC7D,SAAK,WAAW,QAAQ,KAAK,MAAM,SAAS;AAAA,EAC9C;AAkEF;AA7BI,YAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAvpBpB,IAAM,aAAN;",
-  "names": []
-}