kanto-ds 1.5.2 → 1.6.0

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

@@ -1,640 +0,0 @@
-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