@spezutil/hijri-datepicker 0.1.0

package/dist/index.js

@@ -0,0 +1,577 @@
+import { createCalendar, translitMonthNames, weekdayNames, formatHijri } from '@spezutil/hijri-core';
+
+// src/hijri-datepicker.ts
+
+// src/render.ts
+function sameHijri(a, b) {
+  return a.year === b.year && a.month === b.month && a.day === b.day;
+}
+function addDaysUtc(date, days) {
+  return new Date(date.getTime() + days * 864e5);
+}
+function buildMonthModel(cal, view, opts) {
+  const firstGreg = cal.hijriToGregorian({ year: view.year, month: view.month, day: 1 });
+  const startOffset = firstGreg.getUTCDay();
+  const gridStart = addDaysUtc(firstGreg, -startOffset);
+  const todayHijri = opts.today ? cal.gregorianToHijri(opts.today) : null;
+  const startT = opts.rangeStart ? cal.hijriToGregorian(opts.rangeStart).getTime() : null;
+  const endT = opts.rangeEnd ? cal.hijriToGregorian(opts.rangeEnd).getTime() : null;
+  const lo = startT !== null && endT !== null ? Math.min(startT, endT) : null;
+  const hi = startT !== null && endT !== null ? Math.max(startT, endT) : null;
+  const weeks = [];
+  for (let w = 0; w < 6; w++) {
+    const week = [];
+    for (let d = 0; d < 7; d++) {
+      const g = addDaysUtc(gridStart, w * 7 + d);
+      const t = g.getTime();
+      const hijri = cal.gregorianToHijri(g);
+      const selected = (opts.selected ? sameHijri(hijri, opts.selected) : false) || (opts.selectedList ? opts.selectedList.some((s) => sameHijri(hijri, s)) : false);
+      week.push({
+        hijri,
+        gregorian: g,
+        inCurrentMonth: hijri.year === view.year && hijri.month === view.month,
+        selected,
+        disabled: opts.isDisabled ? opts.isDisabled(hijri, g) : false,
+        isToday: todayHijri ? sameHijri(hijri, todayHijri) : false,
+        rangeStart: startT !== null && t === startT,
+        rangeEnd: endT !== null && t === endT,
+        inRange: lo !== null && hi !== null && t > lo && t < hi
+      });
+    }
+    weeks.push(week);
+  }
+  return { year: view.year, month: view.month, weeks };
+}
+
+// src/selection.ts
+var ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+function isMode(v) {
+  return v === "range" || v === "multiple" ? v : "single";
+}
+function parseIsoList(v) {
+  if (!v) return [];
+  return v.split(",").map((s) => s.trim()).filter((s) => ISO_DATE.test(s));
+}
+
+// src/time.ts
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function parseTime(s) {
+  if (!s) return null;
+  const m = /^(\d{1,2}):(\d{2})$/.exec(s.trim());
+  if (!m) return null;
+  const hour = Number(m[1]);
+  const minute = Number(m[2]);
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return null;
+  return { hour, minute };
+}
+function formatTime24(t) {
+  return `${pad2(t.hour)}:${pad2(t.minute)}`;
+}
+function to12(hour) {
+  const meridiem = hour < 12 ? "AM" : "PM";
+  let h = hour % 12;
+  if (h === 0) h = 12;
+  return { hour12: h, meridiem };
+}
+function from12(hour12, meridiem) {
+  let h = hour12 % 12;
+  if (meridiem === "PM") h += 12;
+  return h;
+}
+function combineDateTime(dateIso, t) {
+  return `${dateIso}T${formatTime24(t)}`;
+}
+function splitDateTime(value) {
+  if (!value) return { date: null, time: null };
+  const [d, tt] = value.split("T");
+  return { date: d ?? null, time: tt ? parseTime(tt) : null };
+}
+
+// src/styles.ts
+var styles = `
+:host {
+  --dtp-bg: #fff;
+  --dtp-fg: #1a1a1a;
+  --dtp-muted: #9aa0a6;
+  --dtp-accent: #0b7d3e;
+  --dtp-accent-fg: #fff;
+  --dtp-radius: 8px;
+  display: inline-block;
+  font-family: system-ui, sans-serif;
+  color: var(--dtp-fg);
+}
+.cal { background: var(--dtp-bg); border: 1px solid #e0e0e0; border-radius: var(--dtp-radius); padding: 8px; width: 280px; }
+.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.header button { background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 6px; color: var(--dtp-fg); }
+.header button:hover { background: #f0f0f0; }
+.title { font-weight: 600; text-align: center; }
+.title small { display: block; font-weight: 400; color: var(--dtp-muted); font-size: 11px; }
+.grid { display: flex; flex-direction: column; gap: 2px; }
+.dow-row, .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.dow { text-align: center; font-size: 11px; color: var(--dtp-muted); padding: 4px 0; }
+.cell { aspect-ratio: 1; border: none; background: none; cursor: pointer; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; color: var(--dtp-fg); }
+.cell:hover:not([disabled]) { background: #f0f0f0; }
+.cell .greg { font-size: 9px; color: var(--dtp-muted); }
+.cell.out { color: var(--dtp-muted); opacity: 0.5; }
+.cell.today { outline: 1px solid var(--dtp-accent); }
+.cell[aria-selected="true"] { background: var(--dtp-accent); color: var(--dtp-accent-fg); }
+.cell[aria-selected="true"] .greg { color: var(--dtp-accent-fg); }
+.cell[disabled] { cursor: not-allowed; opacity: 0.3; }
+.cell.in-range { background: color-mix(in srgb, var(--dtp-accent) 16%, transparent); border-radius: 0; }
+.cell.range-start { background: var(--dtp-accent); color: var(--dtp-accent-fg); border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.cell.range-end { background: var(--dtp-accent); color: var(--dtp-accent-fg); border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.cell.range-start .greg, .cell.range-end .greg { color: var(--dtp-accent-fg); }
+.time-row { display: flex; align-items: center; gap: 4px; margin-top: 8px; justify-content: center; }
+.time-row input { width: 44px; text-align: center; padding: 4px; border: 1px solid #e0e0e0; border-radius: 6px; font: inherit; }
+.time-row button { border: 1px solid var(--dtp-accent); background: none; color: var(--dtp-accent); border-radius: 6px; padding: 4px 8px; cursor: pointer; font: inherit; }
+.time-row button[aria-pressed="true"] { background: var(--dtp-accent); color: var(--dtp-accent-fg); }
+:host([dir="rtl"]) .cal { direction: rtl; }
+`;
+
+// src/hijri-datepicker.ts
+var ISO = /^\d{4}-\d{2}-\d{2}$/;
+function parseIsoUtc(s) {
+  if (!s || !ISO.test(s)) return null;
+  const [y, m, d] = s.split("-").map(Number);
+  return new Date(Date.UTC(y, m - 1, d));
+}
+function toIso(date) {
+  return date.toISOString().slice(0, 10);
+}
+var HijriDatepicker = class extends HTMLElement {
+  constructor() {
+    super();
+    this.cal = createCalendar();
+    this._mode = "single";
+    this.selected = null;
+    // single
+    this.selectedList = [];
+    // multiple
+    this.rangeStart = null;
+    this.rangeEnd = null;
+    this.hoverDate = null;
+    this.time = null;
+    // single + enable-time
+    this.lastCells = [];
+    this.suppress = false;
+    this.root = this.attachShadow({ mode: "open" });
+    const todayHijri = this.cal.gregorianToHijri(/* @__PURE__ */ new Date());
+    this.view = { year: todayHijri.year, month: todayHijri.month };
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "start",
+      "end",
+      "min",
+      "max",
+      "dir",
+      "disabled-weekdays",
+      "mode",
+      "enable-time",
+      "time-format"
+    ];
+  }
+  reflect(name, v) {
+    if (v === null) this.removeAttribute(name);
+    else this.setAttribute(name, v);
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(v) {
+    this.reflect("value", v);
+  }
+  get start() {
+    return this.getAttribute("start");
+  }
+  set start(v) {
+    this.reflect("start", v);
+  }
+  get end() {
+    return this.getAttribute("end");
+  }
+  set end(v) {
+    this.reflect("end", v);
+  }
+  get mode() {
+    return this.getAttribute("mode");
+  }
+  set mode(v) {
+    this.reflect("mode", v);
+  }
+  get min() {
+    return this.getAttribute("min");
+  }
+  set min(v) {
+    this.reflect("min", v);
+  }
+  get max() {
+    return this.getAttribute("max");
+  }
+  set max(v) {
+    this.reflect("max", v);
+  }
+  get timeFormat() {
+    return this.getAttribute("time-format");
+  }
+  set timeFormat(v) {
+    this.reflect("time-format", v);
+  }
+  get disabledWeekdays() {
+    return this.getAttribute("disabled-weekdays");
+  }
+  set disabledWeekdays(v) {
+    this.reflect("disabled-weekdays", v);
+  }
+  get enableTime() {
+    return this.hasAttribute("enable-time");
+  }
+  set enableTime(v) {
+    if (v) this.setAttribute("enable-time", "");
+    else this.removeAttribute("enable-time");
+  }
+  connectedCallback() {
+    this.syncFromAttrs();
+    this.render();
+  }
+  attributeChangedCallback() {
+    if (!this.root || this.suppress) return;
+    this.syncFromAttrs();
+    this.render();
+  }
+  g2h(d) {
+    return this.cal.gregorianToHijri(d);
+  }
+  h2iso(h) {
+    return toIso(this.cal.hijriToGregorian(h));
+  }
+  applyAttrs(fn) {
+    this.suppress = true;
+    try {
+      fn();
+    } finally {
+      this.suppress = false;
+    }
+  }
+  syncFromAttrs() {
+    this._mode = isMode(this.getAttribute("mode"));
+    if (this._mode === "range") {
+      const s = parseIsoUtc(this.getAttribute("start"));
+      const e = parseIsoUtc(this.getAttribute("end"));
+      this.rangeStart = s ? this.g2h(s) : null;
+      this.rangeEnd = e ? this.g2h(e) : null;
+      this.hoverDate = null;
+      if (this.rangeStart) this.view = { year: this.rangeStart.year, month: this.rangeStart.month };
+    } else if (this._mode === "multiple") {
+      const isos = parseIsoList(this.getAttribute("value"));
+      this.selectedList = isos.map((iso) => parseIsoUtc(iso)).filter((d) => d !== null).map((d) => this.g2h(d));
+      const first = this.selectedList[0];
+      if (first) this.view = { year: first.year, month: first.month };
+    } else {
+      const { date, time } = splitDateTime(this.getAttribute("value"));
+      const d = parseIsoUtc(date);
+      this.selected = d ? this.g2h(d) : null;
+      this.time = time ?? this.time;
+      if (this.selected) this.view = { year: this.selected.year, month: this.selected.month };
+    }
+  }
+  buildDisabledFn() {
+    const min = parseIsoUtc(this.getAttribute("min"));
+    const max = parseIsoUtc(this.getAttribute("max"));
+    const dowAttr = this.getAttribute("disabled-weekdays");
+    const disabledDows = dowAttr ? dowAttr.split(",").map((n) => Number(n.trim())) : [];
+    return (h, g) => {
+      if (min && g.getTime() < min.getTime()) return true;
+      if (max && g.getTime() > max.getTime()) return true;
+      if (disabledDows.includes(g.getUTCDay())) return true;
+      if (this.isDateDisabled && this.isDateDisabled(h, g)) return true;
+      return false;
+    };
+  }
+  navigate(delta) {
+    let { year, month } = this.view;
+    month += delta;
+    if (month < 1) {
+      month = 12;
+      year -= 1;
+    } else if (month > 12) {
+      month = 1;
+      year += 1;
+    }
+    this.view = { year, month };
+    this.render();
+  }
+  emit(detail) {
+    this.dispatchEvent(
+      new CustomEvent("change", { bubbles: true, composed: true, detail })
+    );
+  }
+  select(cell) {
+    if (cell.disabled) return;
+    if (this._mode === "range") return this.selectRange(cell);
+    if (this._mode === "multiple") return this.selectMultiple(cell);
+    return this.selectSingle(cell);
+  }
+  selectSingle(cell) {
+    this.selected = cell.hijri;
+    const iso = toIso(cell.gregorian);
+    const value = this.time ? combineDateTime(iso, this.time) : iso;
+    this.applyAttrs(() => this.setAttribute("value", value));
+    this.render();
+    this.emit({
+      mode: "single",
+      hijri: cell.hijri,
+      gregorian: value,
+      ...this.time ? { time: this.time } : {}
+    });
+  }
+  selectMultiple(cell) {
+    const idx = this.selectedList.findIndex((h) => sameHijri(h, cell.hijri));
+    if (idx >= 0) this.selectedList.splice(idx, 1);
+    else this.selectedList.push(cell.hijri);
+    this.selectedList.sort(
+      (a, b) => this.cal.hijriToGregorian(a).getTime() - this.cal.hijriToGregorian(b).getTime()
+    );
+    const isos = this.selectedList.map((h) => this.h2iso(h));
+    this.applyAttrs(() => {
+      if (isos.length) this.setAttribute("value", isos.join(","));
+      else this.removeAttribute("value");
+    });
+    this.render();
+    this.emit({ mode: "multiple", hijri: this.selectedList.slice(), gregorian: isos });
+  }
+  selectRange(cell) {
+    const startingNew = !this.rangeStart || this.rangeStart && this.rangeEnd;
+    if (startingNew) {
+      this.rangeStart = cell.hijri;
+      this.rangeEnd = null;
+      this.hoverDate = null;
+      this.applyAttrs(() => {
+        this.setAttribute("start", toIso(cell.gregorian));
+        this.removeAttribute("end");
+      });
+      this.render();
+      return;
+    }
+    const startG = this.cal.hijriToGregorian(this.rangeStart).getTime();
+    if (cell.gregorian.getTime() < startG) {
+      this.rangeEnd = this.rangeStart;
+      this.rangeStart = cell.hijri;
+    } else {
+      this.rangeEnd = cell.hijri;
+    }
+    const startIso = this.h2iso(this.rangeStart);
+    const endIso = this.h2iso(this.rangeEnd);
+    this.applyAttrs(() => {
+      this.setAttribute("start", startIso);
+      this.setAttribute("end", endIso);
+    });
+    this.render();
+    this.emit({
+      mode: "range",
+      start: { hijri: this.rangeStart, gregorian: startIso },
+      end: { hijri: this.rangeEnd, gregorian: endIso }
+    });
+  }
+  setTime(t) {
+    this.time = t;
+    if (this.selected) {
+      const iso = this.h2iso(this.selected);
+      const value = combineDateTime(iso, t);
+      this.applyAttrs(() => this.setAttribute("value", value));
+      this.emit({ mode: "single", hijri: this.selected, gregorian: value, time: t });
+    }
+  }
+  paintRange(hoverHijri) {
+    if (this._mode !== "range" || !this.rangeStart || this.rangeEnd) return;
+    const startT = this.cal.hijriToGregorian(this.rangeStart).getTime();
+    const endT = hoverHijri ? this.cal.hijriToGregorian(hoverHijri).getTime() : startT;
+    const lo = Math.min(startT, endT);
+    const hi = Math.max(startT, endT);
+    this.root.querySelectorAll("[data-i]").forEach((btn) => {
+      const cell = this.lastCells[Number(btn.dataset.i)];
+      if (!cell) return;
+      const t = cell.gregorian.getTime();
+      btn.classList.toggle("in-range", t > lo && t < hi);
+      btn.classList.toggle("range-end", hoverHijri ? t === hi && t !== startT : false);
+    });
+  }
+  renderTimeRow() {
+    if (this._mode !== "single" || !this.hasAttribute("enable-time")) return "";
+    const t = this.time ?? { hour: 0, minute: 0 };
+    const is12 = this.getAttribute("time-format") === "12";
+    if (is12) {
+      const { hour12, meridiem } = to12(t.hour);
+      return `<div class="time-row" part="time">
+        <input data-time="hour" type="number" min="1" max="12" value="${hour12}" aria-label="Hour" />
+        <span>:</span>
+        <input data-time="minute" type="number" min="0" max="59" value="${String(t.minute).padStart(2, "0")}" aria-label="Minute" />
+        <button type="button" data-time="meridiem" aria-pressed="${meridiem === "PM"}" aria-label="Toggle AM/PM">${meridiem}</button>
+      </div>`;
+    }
+    return `<div class="time-row" part="time">
+      <input data-time="hour" type="number" min="0" max="23" value="${String(t.hour).padStart(2, "0")}" aria-label="Hour" />
+      <span>:</span>
+      <input data-time="minute" type="number" min="0" max="59" value="${String(t.minute).padStart(2, "0")}" aria-label="Minute" />
+    </div>`;
+  }
+  wireTimeRow() {
+    const is12 = this.getAttribute("time-format") === "12";
+    const hourEl = this.root.querySelector('[data-time="hour"]');
+    const minEl = this.root.querySelector('[data-time="minute"]');
+    const ampmEl = this.root.querySelector('[data-time="meridiem"]');
+    if (!hourEl || !minEl) return;
+    const commit = () => {
+      const minute = Math.max(0, Math.min(59, Number(minEl.value) || 0));
+      let hour;
+      if (is12) {
+        const h12 = Math.max(1, Math.min(12, Number(hourEl.value) || 12));
+        const meridiem = ampmEl?.getAttribute("aria-pressed") === "true" ? "PM" : "AM";
+        hour = from12(h12, meridiem);
+      } else {
+        hour = Math.max(0, Math.min(23, Number(hourEl.value) || 0));
+      }
+      this.setTime({ hour, minute });
+    };
+    hourEl.addEventListener("change", commit);
+    minEl.addEventListener("change", commit);
+    ampmEl?.addEventListener("click", () => {
+      const isPm = ampmEl.getAttribute("aria-pressed") === "true";
+      ampmEl.setAttribute("aria-pressed", String(!isPm));
+      ampmEl.textContent = !isPm ? "PM" : "AM";
+      commit();
+    });
+  }
+  render() {
+    const model = buildMonthModel(this.cal, this.view, {
+      selected: this._mode === "single" ? this.selected : null,
+      selectedList: this._mode === "multiple" ? this.selectedList : void 0,
+      rangeStart: this._mode === "range" ? this.rangeStart : null,
+      rangeEnd: this._mode === "range" ? this.rangeEnd ?? this.hoverDate : null,
+      isDisabled: this.buildDisabledFn(),
+      today: /* @__PURE__ */ new Date()
+    });
+    this.lastCells = model.weeks.flat();
+    const headerGreg = this.cal.hijriToGregorian({
+      year: this.view.year,
+      month: this.view.month,
+      day: 1
+    });
+    const title = `${translitMonthNames[this.view.month - 1] ?? ""} ${this.view.year}`;
+    const subtitle = headerGreg.toLocaleDateString("en-US", {
+      month: "long",
+      year: "numeric",
+      timeZone: "UTC"
+    });
+    this.root.innerHTML = `<style>${styles}</style>
+      <div class="cal" role="application" aria-label="Hijri date picker">
+        <div class="header">
+          <button type="button" part="nav-prev" aria-label="Previous month" data-nav="-1">\u2039</button>
+          <div class="title">${title}<small>${subtitle}</small></div>
+          <button type="button" part="nav-next" aria-label="Next month" data-nav="1">\u203A</button>
+        </div>
+        <div class="grid" role="grid">
+          <div class="dow-row" role="row">
+            ${weekdayNames.map((d) => `<div class="dow" role="columnheader">${d.slice(0, 2)}</div>`).join("")}
+          </div>
+          ${model.weeks.map((week, w) => {
+      const cells = week.map((cell, d) => {
+        const i = w * 7 + d;
+        const cls = [
+          "cell",
+          cell.inCurrentMonth ? "" : "out",
+          cell.isToday ? "today" : "",
+          cell.rangeStart ? "range-start" : "",
+          cell.rangeEnd ? "range-end" : "",
+          cell.inRange ? "in-range" : ""
+        ].filter(Boolean).join(" ");
+        const ariaSelected = cell.selected || cell.rangeStart || cell.rangeEnd;
+        const label = `${formatHijri(cell.hijri, "D MMMM YYYY")} (${toIso(cell.gregorian)})`;
+        return `<button type="button" part="day" class="${cls}" role="gridcell"
+                    data-i="${i}" aria-selected="${ariaSelected}" aria-label="${label}"
+                    tabindex="-1" ${cell.disabled ? "disabled" : ""}>
+                    <span class="hijri">${cell.hijri.day}</span>
+                    <span class="greg">${cell.gregorian.getUTCDate()}</span>
+                  </button>`;
+      }).join("");
+      return `<div class="week" role="row">${cells}</div>`;
+    }).join("")}
+        </div>
+        ${this.renderTimeRow()}
+      </div>`;
+    const flat = this.lastCells;
+    this.root.querySelectorAll("[data-nav]").forEach((btn) => {
+      btn.addEventListener("click", () => this.navigate(Number(btn.dataset.nav)));
+    });
+    this.root.querySelectorAll("[data-i]").forEach((btn) => {
+      const cell = flat[Number(btn.dataset.i)];
+      btn.addEventListener("click", () => this.select(cell));
+      if (this._mode === "range" && this.rangeStart && !this.rangeEnd) {
+        btn.addEventListener("mouseenter", () => {
+          this.hoverDate = cell.hijri;
+          this.paintRange(cell.hijri);
+        });
+      }
+    });
+    this.wireTimeRow();
+    const dayButtons = Array.from(
+      this.root.querySelectorAll("[data-i]")
+    );
+    const selectedIdx = dayButtons.findIndex(
+      (b) => b.getAttribute("aria-selected") === "true"
+    );
+    const initialIdx = selectedIdx !== -1 ? selectedIdx : dayButtons.findIndex((b) => !b.disabled);
+    dayButtons.forEach((b, i) => b.tabIndex = i === initialIdx ? 0 : -1);
+    const moveFocus = (from, delta) => {
+      let i = from + delta;
+      while (i >= 0 && i < dayButtons.length && dayButtons[i]?.disabled) i += delta;
+      const target = dayButtons[i];
+      if (target) {
+        dayButtons.forEach((b) => b.tabIndex = -1);
+        target.tabIndex = 0;
+        target.focus();
+      }
+    };
+    const grid = this.root.querySelector(".grid");
+    grid.addEventListener("keydown", (e) => {
+      const active = this.root.activeElement;
+      const fromEl = active && active.matches?.("[data-i]") ? active : e.target?.closest?.("[data-i]") ?? null;
+      const idx = fromEl ? dayButtons.indexOf(fromEl) : -1;
+      const deltas = {
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: 7,
+        ArrowUp: -7
+      };
+      if (e.key in deltas) {
+        e.preventDefault();
+        moveFocus(idx === -1 ? initialIdx : idx, deltas[e.key] ?? 0);
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const useIdx = idx === -1 ? initialIdx : idx;
+        if (useIdx >= 0) {
+          const cell = flat[Number(dayButtons[useIdx]?.dataset.i)];
+          if (cell) this.select(cell);
+        }
+      }
+    });
+    grid.addEventListener("mouseleave", () => {
+      if (this._mode === "range" && this.rangeStart && !this.rangeEnd) {
+        this.hoverDate = null;
+        this.paintRange(null);
+      }
+    });
+  }
+};
+
+// src/index.ts
+if (typeof customElements !== "undefined" && !customElements.get("hijri-datepicker")) {
+  customElements.define("hijri-datepicker", HijriDatepicker);
+}
+
+export { HijriDatepicker, buildMonthModel };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map