@krollins/blueprint 0.1.12 → 0.1.13

package/dist/components/date-picker.js

@@ -0,0 +1,726 @@
+import { css as f, LitElement as k, html as l } from "lit";
+import { property as c, state as b, customElement as m } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+const _ = f`
+  /* Base */
+  .date-picker {
+    position: relative;
+    width: 100%;
+  }
+
+  .date-picker__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .date-picker__input {
+    flex: 1;
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    padding-right: var(--bp-spacing-2xl);
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    cursor: pointer;
+    transition:
+      border-color var(--bp-transition-fast),
+      box-shadow var(--bp-transition-fast);
+    outline: none;
+  }
+
+  .date-picker__input:hover:not(:disabled) {
+    border-color: var(--bp-color-primary);
+  }
+
+  .date-picker__input:focus {
+    border-color: var(--bp-color-focus);
+    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
+  }
+
+  .date-picker__input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .date-picker__input::placeholder {
+    color: var(--bp-color-text-muted);
+  }
+
+  .date-picker__clear {
+    position: absolute;
+    right: var(--bp-spacing-2xl);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+    padding: 0;
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text-muted);
+    background: none;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    cursor: pointer;
+    transition:
+      color var(--bp-transition-fast),
+      background-color var(--bp-transition-fast);
+  }
+
+  .date-picker__clear:hover {
+    color: var(--bp-color-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .date-picker__indicator {
+    position: absolute;
+    right: var(--bp-spacing-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+    color: var(--bp-color-text-muted);
+    pointer-events: none;
+  }
+
+  /* Calendar */
+  .date-picker__calendar {
+    position: absolute;
+    top: calc(100% + var(--bp-spacing-xs));
+    left: 0;
+    z-index: var(--bp-z-dropdown);
+    min-width: var(--bp-spacing-2xl);
+    padding: var(--bp-spacing-md);
+    background-color: var(--bp-color-surface);
+    border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);
+    border-right: var(--bp-border-width) solid var(--bp-color-border);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    border-left: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    box-shadow: var(--bp-shadow-md);
+  }
+
+  /* Header */
+  .date-picker__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--bp-spacing-sm);
+  }
+
+  .date-picker__nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-xl);
+    height: var(--bp-spacing-xl);
+    padding: 0;
+    font-size: var(--bp-font-size-xl);
+    color: var(--bp-color-text);
+    background: none;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    cursor: pointer;
+    transition: background-color var(--bp-transition-fast);
+  }
+
+  .date-picker__nav-button:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .date-picker__month-year {
+    flex: 1;
+    font-size: var(--bp-font-size-base);
+    font-weight: var(--bp-font-weight-semibold);
+    color: var(--bp-color-text);
+    text-align: center;
+  }
+
+  /* Weekdays */
+  .date-picker__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--bp-spacing-xs);
+    margin-bottom: var(--bp-spacing-xs);
+  }
+
+  .date-picker__weekday {
+    padding: var(--bp-spacing-xs);
+    font-size: var(--bp-font-size-xs);
+    font-weight: var(--bp-font-weight-semibold);
+    color: var(--bp-color-text-muted);
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  /* Days */
+  .date-picker__days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--bp-spacing-xs);
+  }
+
+  .date-picker__day {
+    aspect-ratio: 1;
+    padding: var(--bp-spacing-xs);
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text);
+    background: none;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    cursor: pointer;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  .date-picker__day:hover:not(:disabled) {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .date-picker__day--other-month {
+    color: var(--bp-color-text-muted);
+    opacity: 0.5;
+  }
+
+  .date-picker__day--today {
+    font-weight: var(--bp-font-weight-bold);
+    color: var(--bp-color-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 4%,
+      transparent
+    );
+  }
+
+  .date-picker__day--selected {
+    color: var(--bp-color-text-inverse);
+    background-color: var(--bp-color-primary);
+  }
+
+  .date-picker__day--selected:hover:not(:disabled) {
+    background-color: var(--bp-color-primary-hover);
+  }
+
+  .date-picker__day--focused {
+    outline: var(--bp-focus-width) solid var(--bp-color-primary);
+    outline-offset: calc(-1 * var(--bp-focus-width));
+  }
+
+  .date-picker__day--disabled {
+    color: var(--bp-color-text-muted);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Sizes */
+  .date-picker--sm .date-picker__input {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    padding-right: var(--bp-spacing-xl);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .date-picker--sm .date-picker__indicator {
+    right: var(--bp-spacing-xs);
+    width: var(--bp-spacing-md);
+    height: var(--bp-spacing-md);
+  }
+
+  .date-picker--sm .date-picker__clear {
+    right: var(--bp-spacing-xl);
+    width: var(--bp-spacing-md);
+    height: var(--bp-spacing-md);
+  }
+
+  .date-picker--sm .date-picker__calendar {
+    padding: var(--bp-spacing-sm);
+  }
+
+  .date-picker--sm .date-picker__nav-button {
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .date-picker--sm .date-picker__month-year {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .date-picker--sm .date-picker__header {
+    margin-bottom: var(--bp-spacing-xs);
+  }
+
+  .date-picker--sm .date-picker__weekdays {
+    gap: var(--bp-spacing-2xs);
+    margin-bottom: var(--bp-spacing-2xs);
+  }
+
+  .date-picker--sm .date-picker__weekday {
+    padding: var(--bp-spacing-2xs);
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .date-picker--sm .date-picker__days {
+    gap: var(--bp-spacing-2xs);
+  }
+
+  .date-picker--sm .date-picker__day {
+    padding: var(--bp-spacing-2xs);
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .date-picker--lg .date-picker__input {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    padding-right: var(--bp-spacing-24);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .date-picker--lg .date-picker__indicator {
+    right: var(--bp-spacing-md);
+    width: var(--bp-spacing-xl);
+    height: var(--bp-spacing-xl);
+  }
+
+  .date-picker--lg .date-picker__clear {
+    right: var(--bp-spacing-24);
+    width: var(--bp-spacing-xl);
+    height: var(--bp-spacing-xl);
+  }
+
+  .date-picker--lg .date-picker__calendar {
+    padding: var(--bp-spacing-lg);
+  }
+
+  .date-picker--lg .date-picker__nav-button {
+    width: var(--bp-spacing-2xl);
+    height: var(--bp-spacing-2xl);
+    font-size: var(--bp-font-size-2xl);
+  }
+
+  .date-picker--lg .date-picker__month-year {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .date-picker--lg .date-picker__header {
+    margin-bottom: var(--bp-spacing-md);
+  }
+
+  .date-picker--lg .date-picker__weekdays {
+    gap: var(--bp-spacing-sm);
+    margin-bottom: var(--bp-spacing-sm);
+  }
+
+  .date-picker--lg .date-picker__weekday {
+    padding: var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .date-picker--lg .date-picker__days {
+    gap: var(--bp-spacing-sm);
+  }
+
+  .date-picker--lg .date-picker__day {
+    padding: var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-base);
+  }
+
+  /* States */
+  .date-picker--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+`;
+var D = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, t, a, d) => {
+  for (var s = d > 1 ? void 0 : d ? w(t, a) : t, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (s = (d ? r(t, a, s) : r(s)) || s);
+  return d && s && D(t, a, s), s;
+};
+let i = class extends k {
+  constructor() {
+    super(), this.isOpen = !1, this.displayMonth = (/* @__PURE__ */ new Date()).getMonth(), this.displayYear = (/* @__PURE__ */ new Date()).getFullYear(), this.focusedDate = null, this.value = "", this.name = "", this.label = "", this.placeholder = "Select date...", this.disabled = !1, this.required = !1, this.size = "md", this.min = "", this.max = "", this.firstDayOfWeek = "0";
+  }
+  handleInputClick() {
+    this.disabled || (this.isOpen = !this.isOpen);
+  }
+  handlePreviousMonth() {
+    this.displayMonth === 0 ? (this.displayMonth = 11, this.displayYear--) : this.displayMonth--;
+  }
+  handleNextMonth() {
+    this.displayMonth === 11 ? (this.displayMonth = 0, this.displayYear++) : this.displayMonth++;
+  }
+  handleDateSelect(e) {
+    const t = this.value;
+    this.value = this.formatDate(e), this.isOpen = !1, this.focusedDate = null, this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: {
+          value: this.value,
+          previousValue: t,
+          date: e
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleClear(e) {
+    e.stopPropagation();
+    const t = this.value;
+    this.value = "", this.focusedDate = null, this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: {
+          value: "",
+          previousValue: t,
+          date: null
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyDown(e) {
+    const t = e;
+    if (!this.isOpen) {
+      (t.key === "ArrowDown" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.isOpen = !0, this.focusedDate = this.getSelectedDate() || this.getTodayDate());
+      return;
+    }
+    const a = this.focusedDate || this.getSelectedDate() || this.getTodayDate();
+    switch (t.key) {
+      case "Escape":
+        t.preventDefault(), this.isOpen = !1, this.focusedDate = null;
+        break;
+      case "ArrowLeft":
+        t.preventDefault(), this.focusedDate = this.addDays(a, -1), this.updateDisplayMonth(this.focusedDate);
+        break;
+      case "ArrowRight":
+        t.preventDefault(), this.focusedDate = this.addDays(a, 1), this.updateDisplayMonth(this.focusedDate);
+        break;
+      case "ArrowUp":
+        t.preventDefault(), this.focusedDate = this.addDays(a, -7), this.updateDisplayMonth(this.focusedDate);
+        break;
+      case "ArrowDown":
+        t.preventDefault(), this.focusedDate = this.addDays(a, 7), this.updateDisplayMonth(this.focusedDate);
+        break;
+      case "Home":
+        t.preventDefault(), this.focusedDate = new Date(
+          a.getFullYear(),
+          a.getMonth(),
+          1
+        );
+        break;
+      case "End":
+        t.preventDefault(), this.focusedDate = new Date(
+          a.getFullYear(),
+          a.getMonth() + 1,
+          0
+        );
+        break;
+      case "PageUp":
+        t.preventDefault(), this.focusedDate = this.addMonths(
+          a,
+          t.shiftKey ? -12 : -1
+        ), this.updateDisplayMonth(this.focusedDate);
+        break;
+      case "PageDown":
+        t.preventDefault(), this.focusedDate = this.addMonths(
+          a,
+          t.shiftKey ? 12 : 1
+        ), this.updateDisplayMonth(this.focusedDate);
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.focusedDate && !this.isDateDisabled(this.focusedDate) && this.handleDateSelect(this.focusedDate);
+        break;
+    }
+  }
+  updateDisplayMonth(e) {
+    this.displayMonth = e.getMonth(), this.displayYear = e.getFullYear();
+  }
+  addDays(e, t) {
+    const a = new Date(e);
+    return a.setDate(a.getDate() + t), a;
+  }
+  addMonths(e, t) {
+    const a = new Date(e);
+    return a.setMonth(a.getMonth() + t), a;
+  }
+  formatDate(e) {
+    const t = e.getFullYear(), a = String(e.getMonth() + 1).padStart(2, "0"), d = String(e.getDate()).padStart(2, "0");
+    return `${t}-${a}-${d}`;
+  }
+  parseDate(e) {
+    if (!e) return null;
+    const t = e.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (t) {
+      const [, d, s, n] = t, r = new Date(
+        parseInt(d, 10),
+        parseInt(s, 10) - 1,
+        parseInt(n, 10)
+      );
+      return r.setHours(0, 0, 0, 0), r;
+    }
+    const a = new Date(e);
+    return isNaN(a.getTime()) ? (console.warn(
+      `bp-date-picker: Invalid date format "${e}". Expected YYYY-MM-DD.`
+    ), null) : a;
+  }
+  getSelectedDate() {
+    return this.parseDate(this.value);
+  }
+  getTodayDate() {
+    const e = /* @__PURE__ */ new Date();
+    return e.setHours(0, 0, 0, 0), e;
+  }
+  isSameDay(e, t) {
+    return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+  }
+  isDateDisabled(e) {
+    if (this.min) {
+      const t = this.parseDate(this.min);
+      if (t && e < t) return !0;
+    }
+    if (this.max) {
+      const t = this.parseDate(this.max);
+      if (t && e > t) return !0;
+    }
+    return !1;
+  }
+  getCalendarDays() {
+    const t = new Date(this.displayYear, this.displayMonth, 1), a = new Date(this.displayYear, this.displayMonth + 1, 0), d = this.firstDayOfWeek === "1" ? 1 : 0;
+    let s = t.getDay() - d;
+    s < 0 && (s += 7);
+    const n = [];
+    for (let p = s - 1; p >= 0; p--) {
+      const h = new Date(this.displayYear, this.displayMonth, -p);
+      n.push(h);
+    }
+    for (let p = 1; p <= a.getDate(); p++)
+      n.push(new Date(this.displayYear, this.displayMonth, p));
+    const r = 42 - n.length;
+    for (let p = 1; p <= r; p++)
+      n.push(new Date(this.displayYear, this.displayMonth + 1, p));
+    return n;
+  }
+  checkValidity() {
+    if (this.required && !this.value)
+      return !1;
+    if (this.value) {
+      const e = this.parseDate(this.value);
+      if (e && this.isDateDisabled(e))
+        return !1;
+    }
+    return !0;
+  }
+  getWeekdayNames() {
+    const e = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    return this.firstDayOfWeek === "1" ? [...e.slice(1), e[0]] : e;
+  }
+  getMonthName(e) {
+    return new Date(2e3, e, 1).toLocaleString("default", {
+      month: "long"
+    });
+  }
+  getFormattedValue() {
+    const e = this.getSelectedDate();
+    return e ? e.toLocaleDateString() : "";
+  }
+  render() {
+    const e = this.getSelectedDate(), t = this.getTodayDate(), a = this.getCalendarDays(), d = this.getWeekdayNames(), s = !!this.value, n = {
+      "date-picker": !0,
+      "date-picker--open": this.isOpen,
+      "date-picker--disabled": this.disabled,
+      [`date-picker--${this.size}`]: !0
+    };
+    return l`
+      <div class=${g(n)} part="control">
+        <div class="date-picker__input-wrapper">
+          <input
+            type="text"
+            class="date-picker__input"
+            part="input"
+            .value=${this.getFormattedValue()}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            readonly
+            @click=${this.handleInputClick}
+            @keydown=${this.handleKeyDown}
+            role="combobox"
+            aria-haspopup="grid"
+            aria-expanded=${this.isOpen}
+            aria-disabled=${this.disabled}
+            aria-label=${this.label || this.placeholder || "Date picker"}
+          />
+          ${s && !this.disabled ? l`
+                <button
+                  type="button"
+                  class="date-picker__clear"
+                  part="clear-button"
+                  @click=${this.handleClear}
+                  aria-label="Clear date"
+                  tabindex="-1"
+                >
+                  ✕
+                </button>
+              ` : ""}
+          <div class="date-picker__indicator" part="indicator">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5 2V4M11 2V4M3 6H13M4 4H12C12.5523 4 13 4.44772 13 5V13C13 13.5523 12.5523 14 12 14H4C3.44772 14 3 13.5523 3 13V5C3 4.44772 3.44772 4 4 4Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        ${this.isOpen ? l`
+              <div class="date-picker__calendar" part="calendar" role="grid">
+                <div class="date-picker__header" part="header">
+                  <button
+                    type="button"
+                    class="date-picker__nav-button"
+                    part="nav-button"
+                    @click=${this.handlePreviousMonth}
+                    aria-label="Previous month"
+                    tabindex="-1"
+                  >
+                    ‹
+                  </button>
+                  <div class="date-picker__month-year" part="month-year">
+                    ${this.getMonthName(this.displayMonth)} ${this.displayYear}
+                  </div>
+                  <button
+                    type="button"
+                    class="date-picker__nav-button"
+                    part="nav-button"
+                    @click=${this.handleNextMonth}
+                    aria-label="Next month"
+                    tabindex="-1"
+                  >
+                    ›
+                  </button>
+                </div>
+
+                <div class="date-picker__weekdays">
+                  ${d.map(
+      (r) => l`
+                      <div
+                        class="date-picker__weekday"
+                        part="weekday"
+                        role="columnheader"
+                      >
+                        ${r}
+                      </div>
+                    `
+    )}
+                </div>
+
+                <div class="date-picker__days">
+                  ${a.map((r) => {
+      const p = r.getMonth() === this.displayMonth, h = e && this.isSameDay(r, e), v = this.isSameDay(r, t), y = this.focusedDate && this.isSameDay(r, this.focusedDate), u = this.isDateDisabled(r);
+      return l`
+                      <button
+                        type="button"
+                        class=${g({
+        "date-picker__day": !0,
+        "date-picker__day--other-month": !p,
+        "date-picker__day--selected": !!h,
+        "date-picker__day--today": v,
+        "date-picker__day--focused": !!y,
+        "date-picker__day--disabled": u
+      })}
+                        part="day"
+                        @click=${() => !u && this.handleDateSelect(r)}
+                        ?disabled=${u}
+                        tabindex="-1"
+                        role="gridcell"
+                        aria-selected=${!!h}
+                        aria-label=${r.toLocaleDateString()}
+                      >
+                        ${r.getDate()}
+                      </button>
+                    `;
+    })}
+                </div>
+              </div>
+            ` : ""}
+        ${this.name ? l`
+              <input type="hidden" name=${this.name} .value=${this.value} />
+            ` : ""}
+      </div>
+    `;
+  }
+};
+i.styles = [_];
+o([
+  c({ type: String, reflect: !0 })
+], i.prototype, "value", 2);
+o([
+  c({ type: String })
+], i.prototype, "name", 2);
+o([
+  c({ type: String })
+], i.prototype, "label", 2);
+o([
+  c({ type: String })
+], i.prototype, "placeholder", 2);
+o([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "required", 2);
+o([
+  c({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+o([
+  c({ type: String })
+], i.prototype, "min", 2);
+o([
+  c({ type: String })
+], i.prototype, "max", 2);
+o([
+  c({ type: String, attribute: "first-day-of-week" })
+], i.prototype, "firstDayOfWeek", 2);
+o([
+  b()
+], i.prototype, "isOpen", 2);
+o([
+  b()
+], i.prototype, "displayMonth", 2);
+o([
+  b()
+], i.prototype, "displayYear", 2);
+o([
+  b()
+], i.prototype, "focusedDate", 2);
+i = o([
+  m("bp-date-picker")
+], i);
+export {
+  i as BpDatePicker
+};
+//# sourceMappingURL=date-picker.js.map