@expressivecss/expressive 0.14.1 → 0.16.0

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

@@ -1,572 +0,0 @@
-import {
-  DockedDisplayPlugin
-} from "./chunk-YMSXJON6.mjs";
-import {
-  Utils
-} from "./chunk-MNPROCZF.mjs";
-import {
-  Component
-} from "./chunk-LTWPGFBR.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();
-      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 {
-        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);
-      }
-      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;
-      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) {
-      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);
-    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() {
-    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;
-    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-QERLECVU.mjs.map