@sondor-technology/sondor-components 1.0.6 → 1.0.8

package/src/components/calendar/calendar.ts

@@ -0,0 +1,444 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../select/select.js"; // Ensure this path matches your project structure
+
+const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+const DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+const parseIsoLocal = (iso: string): Date | null => {
+  if (!iso) return null;
+  const [y, m, d] = iso.split(/\D/).map(Number);
+  if (!y || !m || !d) return null;
+  return new Date(y, m - 1, d);
+};
+
+const formatIsoLocal = (date: Date): string => {
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+};
+
+@customElement("st-calendar")
+export class StCalendar extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "";
+  @property({type: String}) min = "";
+  @property({type: String}) max = "";
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+
+  @state() private _viewMonth = new Date().getMonth();
+  @state() private _viewYear = new Date().getFullYear();
+
+  private _defaultValue = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        width: 320px;
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        padding: var(--st-spacing-md);
+        box-sizing: border-box;
+      }
+
+      :host([disabled]) {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      :host([invalid]) {
+        border-color: var(--st-color-error, #dc2626);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--st-spacing-md);
+        gap: var(--st-spacing-xs);
+      }
+
+      .header-controls {
+        display: flex;
+        gap: var(--st-spacing-xs);
+        flex: 1;
+        justify-content: center;
+      }
+
+      /* Shape the custom selects to fit side-by-side in the header */
+      .header-controls st-select:first-child {
+        width: 120px;
+      }
+
+      .header-controls st-select:last-child {
+        width: 90px;
+      }
+
+      .nav-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 42px; /* Matches the 42px min-height of your st-select combobox */
+        border: none;
+        background: transparent;
+        border-radius: var(--st-radius-sm);
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        transition: background-color 0.2s;
+        flex-shrink: 0;
+      }
+
+      .nav-button:hover {
+        background-color: var(--st-color-surface-hover, #f1f5f9);
+        color: var(--st-color-text);
+      }
+
+      .nav-button svg {
+        width: 20px;
+        height: 20px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 4px;
+        text-align: center;
+      }
+
+      .grid-row {
+        display: contents;
+      }
+
+      .day-name {
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-semibold);
+        color: var(--st-color-text-muted);
+        padding-bottom: var(--st-spacing-xs);
+      }
+
+      .day {
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: transparent;
+        border-radius: 50%;
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-sm);
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .day:hover:not(:disabled):not(.empty) {
+        background-color: var(--st-color-surface-hover, #f1f5f9);
+      }
+
+      .day:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+
+      .day:disabled {
+        color: var(--st-color-text-muted);
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+
+      .day.empty {
+        cursor: default;
+        pointer-events: none;
+      }
+
+      .day[aria-current="date"] {
+        font-weight: var(--st-font-weight-bold);
+        color: var(--st-color-primary);
+        background-color: var(--st-color-primary-light, #eff6ff);
+      }
+
+      .day[aria-selected="true"] {
+        background-color: var(--st-color-primary);
+        color: var(--st-color-on-primary, var(--st-color-bg, #ffffff));
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      .day[aria-selected="true"]:hover {
+        background-color: var(--st-color-primary-dark, #1d4ed8);
+      }
+    `,
+  ];
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultValue = this.value;
+
+    if (this.value) {
+      const initDate = parseIsoLocal(this.value);
+      if (initDate) {
+        this._viewMonth = initDate.getMonth();
+        this._viewYear = initDate.getFullYear();
+      }
+    }
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value || null);
+      this._syncValidity();
+    }
+  }
+
+  private get _yearRange(): number[] {
+    const currentYear = new Date().getFullYear();
+    let minYear = currentYear - 50;
+    let maxYear = currentYear + 50;
+
+    if (this.min) {
+      const minDate = parseIsoLocal(this.min);
+      if (minDate) minYear = minDate.getFullYear();
+    }
+    if (this.max) {
+      const maxDate = parseIsoLocal(this.max);
+      if (maxDate) maxYear = maxDate.getFullYear();
+    }
+
+    const years = [];
+    for (let y = minYear; y <= maxYear; y++) {
+      years.push(y);
+    }
+    return years;
+  }
+
+  private _syncValidity() {
+    this.invalid = false;
+
+    if (this.required && !this.value) {
+      this._internals.setValidity({valueMissing: true}, "Please select a date.");
+      this.invalid = true;
+      return;
+    }
+
+    if (this.value) {
+      const minDate = parseIsoLocal(this.min);
+      const maxDate = parseIsoLocal(this.max);
+      const valDate = parseIsoLocal(this.value);
+
+      if (valDate && minDate && valDate < minDate) {
+        this._internals.setValidity({rangeUnderflow: true}, `Date must be after ${this.min}.`);
+        this.invalid = true;
+        return;
+      }
+      if (valDate && maxDate && valDate > maxDate) {
+        this._internals.setValidity({rangeOverflow: true}, `Date must be before ${this.max}.`);
+        this.invalid = true;
+        return;
+      }
+    }
+
+    this._internals.setValidity({});
+  }
+
+  formResetCallback() {
+    this.value = this._defaultValue;
+    if (this.value) {
+      const initDate = parseIsoLocal(this.value);
+      if (initDate) {
+        this._viewMonth = initDate.getMonth();
+        this._viewYear = initDate.getFullYear();
+      }
+    }
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  private _prevMonth() {
+    if (this._viewMonth === 0) {
+      this._viewMonth = 11;
+      this._viewYear--;
+    } else {
+      this._viewMonth--;
+    }
+  }
+
+  private _nextMonth() {
+    if (this._viewMonth === 11) {
+      this._viewMonth = 0;
+      this._viewYear++;
+    } else {
+      this._viewMonth++;
+    }
+  }
+
+  private _selectDate(day: number) {
+    const selected = new Date(this._viewYear, this._viewMonth, day);
+    this.value = formatIsoLocal(selected);
+
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+  }
+
+  private _isDateDisabled(year: number, month: number, day: number): boolean {
+    if (this.disabled) return true;
+
+    const date = new Date(year, month, day);
+    const minDate = parseIsoLocal(this.min);
+    const maxDate = parseIsoLocal(this.max);
+
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+
+    return false;
+  }
+
+  render() {
+    const today = new Date();
+    const isToday = (day: number) =>
+      today.getDate() === day &&
+      today.getMonth() === this._viewMonth &&
+      today.getFullYear() === this._viewYear;
+
+    const selectedDate = parseIsoLocal(this.value);
+    const isSelected = (day: number) =>
+      selectedDate !== null &&
+      selectedDate.getDate() === day &&
+      selectedDate.getMonth() === this._viewMonth &&
+      selectedDate.getFullYear() === this._viewYear;
+
+    const firstDayOfMonth = new Date(this._viewYear, this._viewMonth, 1).getDay();
+    const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
+
+    const blanks = Array.from({length: firstDayOfMonth}, (_, i) => i);
+    const days = Array.from({length: daysInMonth}, (_, i) => i + 1);
+
+    const allCells = [
+      ...blanks.map(() => html`<div class="day empty" role="gridcell"></div>`),
+      ...days.map((day) => {
+        const disabled = this._isDateDisabled(this._viewYear, this._viewMonth, day);
+        return html`
+          <button
+            class="day"
+            role="gridcell"
+            type="button"
+            ?disabled=${disabled}
+            aria-label=${`${MONTH_NAMES[this._viewMonth]} ${day}, ${this._viewYear}`}
+            aria-current=${isToday(day) ? "date" : "false"}
+            aria-selected=${isSelected(day) ? "true" : "false"}
+            @click=${() => this._selectDate(day)}
+          >
+            ${day}
+          </button>
+        `;
+      }),
+    ];
+
+    const weeks = [];
+    for (let i = 0; i < allCells.length; i += 7) {
+      weeks.push(allCells.slice(i, i + 7));
+    }
+
+    // 🚀 FIX: Generate the option array objects as required by your st-select API
+    const monthOptions = MONTH_NAMES.map((name, i) => ({label: name, value: String(i)}));
+    const yearOptions = this._yearRange.map((year) => ({label: String(year), value: String(year)}));
+
+    return html`
+      <div class="header">
+        <button
+          class="nav-button"
+          type="button"
+          aria-label="Previous Month"
+          @click=${this._prevMonth}
+          ?disabled=${this.disabled}
+        >
+          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>
+        </button>
+
+        <div class="header-controls">
+          <st-select
+            label="Month"
+            hide-label
+            .options=${monthOptions}
+            .value=${String(this._viewMonth)}
+            ?disabled=${this.disabled}
+            @change=${(e: any) => (this._viewMonth = Number(e.target.value))}
+          ></st-select>
+
+          <st-select
+            label="Year"
+            hide-label
+            .options=${yearOptions}
+            .value=${String(this._viewYear)}
+            ?disabled=${this.disabled}
+            @change=${(e: any) => (this._viewYear = Number(e.target.value))}
+          ></st-select>
+        </div>
+
+        <button
+          class="nav-button"
+          type="button"
+          aria-label="Next Month"
+          @click=${this._nextMonth}
+          ?disabled=${this.disabled}
+        >
+          <svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"></path></svg>
+        </button>
+      </div>
+
+      <div class="grid" role="grid" aria-label="Calendar">
+        <div class="grid-row" role="row">
+          ${DAY_NAMES.map(
+            (name) => html`
+              <div class="day-name" role="columnheader" aria-label=${name}>${name}</div>
+            `,
+          )}
+        </div>
+        ${weeks.map((week) => html` <div class="grid-row" role="row">${week}</div> `)}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-calendar": StCalendar;
+  }
+}