kanto-ds 1.4.0 → 1.5.2

package/dist/chunks/kt-calendar-B_hFdD9V.js

@@ -0,0 +1,640 @@
+import { css as z, html as l, nothing as C } from "lit";
+import { state as D, property as w } from "lit/decorators.js";
+import { classMap as O } from "lit/directives/class-map.js";
+import { K as T, d as Y } from "./kt-element-Djx2JcGl.js";
+import { u as A, e as L } from "./events-r51msXNf.js";
+import { r as j, d as E } from "./locale-C5xLkGx5.js";
+import { s as U } from "./index-STEEvEP7.js";
+import "../components/core/kt-icon/kt-icon.js";
+const I = /^(\d{4})-(\d{2})-(\d{2})$/;
+function $(o, t) {
+  return new Date(Date.UTC(o, t, 0)).getUTCDate();
+}
+function v(o) {
+  const t = I.exec(o?.trim() ?? "");
+  if (!t) return null;
+  const [e, r, a] = [Number(t[1]), Number(t[2]), Number(t[3])];
+  return r < 1 || r > 12 || a < 1 || a > $(e, r) ? null : { year: e, month: r, day: a };
+}
+function x(o) {
+  const t = (e, r = 2) => String(e).padStart(r, "0");
+  return `${t(o.year, 4)}-${t(o.month)}-${t(o.day)}`;
+}
+function K(o) {
+  const [t, e] = (o ?? "").split("/");
+  return { start: v(t), end: v(e) };
+}
+function B(o, t) {
+  return `${x(o)}/${x(t)}`;
+}
+function u(o, t) {
+  return o.year - t.year || o.month - t.month || o.day - t.day;
+}
+function b(o, t) {
+  return o !== null && t !== null && u(o, t) === 0;
+}
+function R(o, t, e) {
+  const [r, a] = u(t, e) <= 0 ? [t, e] : [e, t];
+  return u(o, r) >= 0 && u(o, a) <= 0;
+}
+function V(o) {
+  const t = new Date(o);
+  return { year: t.getUTCFullYear(), month: t.getUTCMonth() + 1, day: t.getUTCDate() };
+}
+function g(o, t) {
+  return V(Date.UTC(o.year, o.month - 1, o.day + t));
+}
+function p(o, t) {
+  const e = o.year * 12 + (o.month - 1) + t, r = Math.floor(e / 12), a = e % 12 + 1;
+  return { year: r, month: a, day: Math.min(o.day, $(r, a)) };
+}
+function _(o) {
+  const t = new Date(Date.UTC(o.year, o.month - 1, o.day)).getUTCDay();
+  return t === 0 ? 7 : t;
+}
+function M(o, t) {
+  return g(o, -((_(o) - t + 7) % 7));
+}
+function q(o, t, e) {
+  let r = M({ year: o, month: t, day: 1 }, e);
+  const a = [];
+  for (let s = 0; s < 6; s += 1) {
+    const h = [];
+    for (let i = 0; i < 7; i += 1)
+      h.push(r), r = g(r, 1);
+    a.push(h);
+  }
+  return a;
+}
+function k() {
+  const o = /* @__PURE__ */ new Date();
+  return { year: o.getFullYear(), month: o.getMonth() + 1, day: o.getDate() };
+}
+function W(o) {
+  return new Date(o.year, o.month - 1, o.day, 12);
+}
+function P(o) {
+  try {
+    const t = new Intl.Locale(o), e = t.getWeekInfo?.().firstDay ?? t.weekInfo?.firstDay;
+    return e && e >= 1 && e <= 7 ? e : 1;
+  } catch {
+    return 1;
+  }
+}
+var F = Object.defineProperty, y = (o, t, e, r) => {
+  for (var a = void 0, s = o.length - 1, h; s >= 0; s--)
+    (h = o[s]) && (a = h(t, e, a) || a);
+  return a && F(t, e, a), a;
+};
+const m = 12;
+class f extends T {
+  constructor() {
+    super(...arguments), this.liveId = A("kt-calendar-live"), this.focusCell = !1, this.committing = !1, this.view = "day", this.month = { ...k(), day: 1 }, this.focused = k(), this.anchor = null, this.value = null, this.range = !1, this.min = "", this.max = "", this.locale = "", this.label = "";
+  }
+  static {
+    this.styles = [
+      T.styles,
+      z`
+      :host {
+        display: inline-block;
+        --day-size: 36px;
+      }
+
+      .calendar {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+        width: calc(var(--day-size) * 7);
+      }
+
+      .header {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: center;
+      }
+      .title {
+        display: flex;
+        justify-content: center;
+        gap: 2px;
+      }
+
+      .nav,
+      .heading {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--day-size);
+        padding: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-medium);
+        background: none;
+        border: none;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+      .nav {
+        width: var(--day-size);
+      }
+      .heading {
+        padding: 0 8px;
+        color: var(--text-body);
+        text-transform: capitalize;
+      }
+      .heading kt-icon {
+        margin-left: 2px;
+        color: var(--text-muted);
+      }
+      .heading.static {
+        cursor: default;
+      }
+      .nav:hover,
+      .heading:not(.static):hover {
+        color: var(--text-body);
+        background: var(--color-dark-22);
+      }
+      .nav:focus-visible,
+      .heading:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      /* One height for every view, so the calendar does not shrink under the
+         pointer when it switches from days to months or years. */
+      .body {
+        height: calc(var(--day-size) * 7 + 16px);
+      }
+      table {
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: separate;
+        border-spacing: 0 2px;
+      }
+      table.wide {
+        height: 100%;
+      }
+      th {
+        padding-bottom: 4px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        font-weight: 600;
+      }
+      th abbr {
+        text-decoration: none;
+      }
+
+      .cell {
+        height: var(--day-size);
+        padding: 0;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        border-radius: var(--radius-input);
+        outline: none;
+        cursor: pointer;
+      }
+      .cell:hover {
+        background: var(--color-dark-22);
+      }
+      .cell:focus-visible {
+        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);
+      }
+      /* Months and years sit three to a row, sharing the height the days use. */
+      .wide .cell {
+        height: auto;
+        text-transform: capitalize;
+      }
+      .cell.outside {
+        color: var(--text-muted);
+      }
+      .cell.current {
+        font-weight: 700;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 4px;
+      }
+
+      /* A period reads as one band: the days between are tinted and squared
+         off, and only its two ends are rounded. */
+      .cell.in-range {
+        background: var(--color-primary-soft);
+        border-radius: 0;
+      }
+      .cell.range-start {
+        border-radius: var(--radius-input) 0 0 var(--radius-input);
+      }
+      .cell.range-end {
+        border-radius: 0 var(--radius-input) var(--radius-input) 0;
+      }
+      .cell.range-start.range-end {
+        border-radius: var(--radius-input);
+      }
+      .cell.selected {
+        color: var(--color-white);
+        background: var(--color-primary-base);
+      }
+
+      .cell[aria-disabled='true'] {
+        color: var(--text-disabled);
+        background: none;
+        text-decoration: line-through;
+        cursor: not-allowed;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.jumpTo(this.clamp(this.selection.start ?? k()), !1);
+  }
+  willUpdate(t) {
+    if (t.has("value") && !this.committing && this.hasUpdated) {
+      this.anchor = null;
+      const e = this.selection.start;
+      e && this.jumpTo(this.clamp(e), !1);
+    }
+    this.committing = !1;
+  }
+  updated() {
+    this.focusCell && (this.focusCell = !1, this.shadowRoot?.querySelector('.cell[tabindex="0"]')?.focus());
+  }
+  /** Focuses the grid's current cell — the chosen day, or today. */
+  focus() {
+    this.focusCell = !0, this.requestUpdate();
+  }
+  // --- Reading the value ---
+  get resolvedLocale() {
+    return j(this.locale);
+  }
+  get selection() {
+    return this.range ? K(this.value) : { start: v(this.value), end: v(this.value) };
+  }
+  get bounds() {
+    return { min: v(this.min), max: v(this.max) };
+  }
+  clamp(t) {
+    const { min: e, max: r } = this.bounds;
+    return e && u(t, e) < 0 ? e : r && u(t, r) > 0 ? r : t;
+  }
+  isOutOfBounds(t) {
+    const { min: e, max: r } = this.bounds;
+    return e !== null && u(t, e) < 0 || r !== null && u(t, r) > 0;
+  }
+  /** A month or a year is unavailable only when every day of it is. */
+  isSpanOutOfBounds(t, e) {
+    const { min: r, max: a } = this.bounds;
+    return a !== null && u(t, a) > 0 || r !== null && u(e, r) < 0;
+  }
+  format(t, e) {
+    return E(this.resolvedLocale, t).format(W(e));
+  }
+  // --- Moving ---
+  /** Moves the tab stop, and the day view with it when it leaves the month. */
+  jumpTo(t, e = !0) {
+    this.focused = t, (t.year !== this.month.year || t.month !== this.month.month) && (this.month = { year: t.year, month: t.month, day: 1 }), this.focusCell = e;
+  }
+  setView(t) {
+    this.view = t, this.focusCell = !0;
+  }
+  // --- Choosing ---
+  chooseDay(t) {
+    if (this.isOutOfBounds(t)) return;
+    if (this.focused = t, !this.range) {
+      this.commit(x(t));
+      return;
+    }
+    if (!this.anchor) {
+      this.anchor = t;
+      return;
+    }
+    const [e, r] = u(this.anchor, t) <= 0 ? [this.anchor, t] : [t, this.anchor];
+    this.anchor = null, this.commit(B(e, r));
+  }
+  commit(t) {
+    this.committing = !0, this.value = t, L(this, "kt-change", { value: t });
+  }
+  chooseMonth(t) {
+    const e = Math.min(this.focused.day, $(this.focused.year, t));
+    this.jumpTo(this.clamp({ year: this.focused.year, month: t, day: e })), this.setView("day");
+  }
+  chooseYear(t) {
+    const e = Math.min(this.focused.day, $(t, this.focused.month));
+    this.focused = { year: t, month: this.focused.month, day: e }, this.setView("month");
+  }
+  // --- Keyboard ---
+  onDayKeyDown(t) {
+    const e = P(this.resolvedLocale), r = this.focused;
+    let a;
+    switch (t.key) {
+      case "ArrowLeft":
+        a = g(r, -1);
+        break;
+      case "ArrowRight":
+        a = g(r, 1);
+        break;
+      case "ArrowUp":
+        a = g(r, -7);
+        break;
+      case "ArrowDown":
+        a = g(r, 7);
+        break;
+      case "Home":
+        a = M(r, e);
+        break;
+      case "End":
+        a = g(M(r, e), 6);
+        break;
+      case "PageUp":
+        a = p(r, t.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        a = p(r, t.shiftKey ? 12 : 1);
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.chooseDay(r);
+        return;
+      default:
+        return;
+    }
+    t.preventDefault(), this.jumpTo(a);
+  }
+  /** Months and years share one model: a list of cells, three to a row. */
+  onPickerKeyDown(t) {
+    const e = this.view === "month", r = (s) => e ? p(this.focused, s) : p(this.focused, s * 12);
+    let a;
+    switch (t.key) {
+      case "ArrowLeft":
+        a = r(-1);
+        break;
+      case "ArrowRight":
+        a = r(1);
+        break;
+      case "ArrowUp":
+        a = r(-3);
+        break;
+      case "ArrowDown":
+        a = r(3);
+        break;
+      case "PageUp":
+        a = r(e ? -12 : -m);
+        break;
+      case "PageDown":
+        a = r(e ? 12 : m);
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), e ? this.chooseMonth(this.focused.month) : this.chooseYear(this.focused.year);
+        return;
+      case "Escape":
+        t.preventDefault(), t.stopPropagation(), this.setView("day");
+        return;
+      default:
+        return;
+    }
+    t.preventDefault(), this.focused = a, this.focusCell = !0;
+  }
+  // --- Rendering ---
+  renderHeader() {
+    const { year: t } = this.focused, e = U();
+    if (this.view === "day")
+      return l`<div class="header">
+        <button
+          type="button"
+          class="nav"
+          aria-label=${e.previousMonth}
+          @click=${() => this.jumpTo(p(this.focused, -1), !1)}
+        >
+          <kt-icon name="chevron-left" size="18"></kt-icon>
+        </button>
+        <div class="title">
+          <button
+            type="button"
+            class="heading"
+            aria-label=${`${e.chooseMonth}, ${this.format({ month: "long" }, this.month)}`}
+            @click=${() => this.setView("month")}
+          >
+            ${this.format({ month: "long" }, this.month)}
+          </button>
+          <button
+            type="button"
+            class="heading"
+            aria-label=${`${e.chooseYear}, ${this.month.year}`}
+            @click=${() => this.setView("year")}
+          >
+            ${this.format({ year: "numeric" }, this.month)}
+            <kt-icon name="chevron-down" size="14"></kt-icon>
+          </button>
+        </div>
+        <button
+          type="button"
+          class="nav"
+          aria-label=${e.nextMonth}
+          @click=${() => this.jumpTo(p(this.focused, 1), !1)}
+        >
+          <kt-icon name="chevron-right" size="18"></kt-icon>
+        </button>
+      </div>`;
+    const r = this.view === "month", a = t - (t % m + m) % m, s = r ? 12 : m * 12;
+    return l`<div class="header">
+      <button
+        type="button"
+        class="nav"
+        aria-label=${r ? e.previousYear : e.previousYears}
+        @click=${() => {
+      this.focused = p(this.focused, -s);
+    }}
+      >
+        <kt-icon name="chevron-left" size="18"></kt-icon>
+      </button>
+      <div class="title">
+        ${r ? l`<button
+                type="button"
+                class="heading"
+                aria-label=${`${e.chooseYear}, ${t}`}
+                @click=${() => this.setView("year")}
+              >
+                ${t}
+              </button>` : l`<span class="heading static"
+                >${a} – ${a + m - 1}</span
+              >`}
+      </div>
+      <button
+        type="button"
+        class="nav"
+        aria-label=${r ? e.nextYear : e.nextYears}
+        @click=${() => {
+      this.focused = p(this.focused, s);
+    }}
+      >
+        <kt-icon name="chevron-right" size="18"></kt-icon>
+      </button>
+    </div>`;
+  }
+  renderDay(t) {
+    const { start: e, end: r } = this.selection, a = this.anchor ?? e, s = this.anchor ? this.focused : r, [h, i] = a && s && u(a, s) > 0 ? [s, a] : [a, s], n = this.range ? b(t, h) || b(t, i) : b(t, e), c = this.range && h !== null && i !== null && R(t, h, i), d = b(t, k());
+    return l`<td
+      part="day"
+      role="gridcell"
+      class=${O({
+      cell: !0,
+      outside: t.month !== this.month.month,
+      current: d,
+      selected: n,
+      "in-range": c,
+      "range-start": c && b(t, h),
+      "range-end": c && b(t, i)
+    })}
+      data-date=${x(t)}
+      tabindex=${b(t, this.focused) ? 0 : -1}
+      aria-selected=${n ? "true" : "false"}
+      aria-disabled=${this.isOutOfBounds(t) ? "true" : C}
+      aria-current=${d ? "date" : C}
+      aria-label=${this.format({ dateStyle: "full" }, t)}
+      @click=${() => this.chooseDay(t)}
+      @pointerenter=${() => {
+      this.anchor && (this.focused = t);
+    }}
+    >
+      ${t.day}
+    </td>`;
+  }
+  renderDays() {
+    const t = q(this.month.year, this.month.month, P(this.resolvedLocale));
+    return l`<table role="grid" aria-labelledby=${this.liveId} @keydown=${this.onDayKeyDown}>
+      <thead>
+        <tr>
+          ${t[0].map(
+      (e) => l`<th scope="col">
+                <abbr title=${this.format({ weekday: "long" }, e)}
+                  >${this.format({ weekday: "short" }, e)}</abbr
+                >
+              </th>`
+    )}
+        </tr>
+      </thead>
+      <tbody>
+        ${t.map(
+      (e) => l`<tr>
+              ${e.map((r) => this.renderDay(r))}
+            </tr>`
+    )}
+      </tbody>
+    </table>`;
+  }
+  /** The month or year grid: twelve cells, three to a row. */
+  renderPicker() {
+    const t = this.view === "month", { year: e } = this.focused, r = k(), a = e - (e % m + m) % m, s = Array.from({ length: 12 }, (i, n) => {
+      if (t) {
+        const d = n + 1, S = { year: e, month: d, day: 1 };
+        return {
+          key: `${e}-${d}`,
+          label: this.format({ month: "short" }, S),
+          fullLabel: this.format({ month: "long", year: "numeric" }, S),
+          focused: d === this.focused.month,
+          selected: d === this.month.month && e === this.month.year,
+          current: d === r.month && e === r.year,
+          disabled: this.isSpanOutOfBounds(S, { year: e, month: d, day: $(e, d) }),
+          choose: () => this.chooseMonth(d)
+        };
+      }
+      const c = a + n;
+      return {
+        key: String(c),
+        label: String(c),
+        fullLabel: String(c),
+        focused: c === e,
+        selected: c === this.month.year,
+        current: c === r.year,
+        disabled: this.isSpanOutOfBounds(
+          { year: c, month: 1, day: 1 },
+          { year: c, month: 12, day: 31 }
+        ),
+        choose: () => this.chooseYear(c)
+      };
+    }), h = [0, 3, 6, 9].map((i) => s.slice(i, i + 3));
+    return l`<table
+      role="grid"
+      class="wide"
+      aria-labelledby=${this.liveId}
+      @keydown=${this.onPickerKeyDown}
+    >
+      <tbody>
+        ${h.map(
+      (i) => l`<tr>
+              ${i.map(
+        (n) => l`<td
+                    role="gridcell"
+                    class=${O({
+          cell: !0,
+          selected: n.selected,
+          current: n.current
+        })}
+                    data-key=${n.key}
+                    tabindex=${n.focused ? 0 : -1}
+                    aria-selected=${n.selected ? "true" : "false"}
+                    aria-disabled=${n.disabled ? "true" : C}
+                    aria-label=${n.fullLabel}
+                    @click=${() => {
+          n.disabled || n.choose();
+        }}
+                  >
+                    ${n.label}
+                  </td>`
+      )}
+            </tr>`
+    )}
+      </tbody>
+    </table>`;
+  }
+  render() {
+    const t = U(), e = this.view === "day" ? this.format({ month: "long", year: "numeric" }, this.month) : this.view === "month" ? String(this.focused.year) : t.chooseYear;
+    return l`<div
+      part="base"
+      class="calendar"
+      role="group"
+      aria-label=${this.label || (this.range ? t.selectPeriod : t.selectDate)}
+    >
+      <span id=${this.liveId} class="visually-hidden" aria-live="polite">${e}</span>
+      ${this.renderHeader()}
+      <div class="body">${this.view === "day" ? this.renderDays() : this.renderPicker()}</div>
+    </div>`;
+  }
+}
+y([
+  D()
+], f.prototype, "view");
+y([
+  D()
+], f.prototype, "month");
+y([
+  D()
+], f.prototype, "focused");
+y([
+  D()
+], f.prototype, "anchor");
+y([
+  w({ type: String, reflect: !0 })
+], f.prototype, "value");
+y([
+  w({ type: Boolean, reflect: !0 })
+], f.prototype, "range");
+y([
+  w({ type: String })
+], f.prototype, "min");
+y([
+  w({ type: String })
+], f.prototype, "max");
+y([
+  w({ type: String })
+], f.prototype, "locale");
+y([
+  w({ type: String })
+], f.prototype, "label");
+Y("kt-calendar", f);
+export {
+  f as K,
+  v as a,
+  u as c,
+  K as p,
+  W as t
+};
+//# sourceMappingURL=kt-calendar-B_hFdD9V.js.map