@progressive-development/pd-calendar 0.9.2 → 1.0.0

package/dist/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.js

@@ -0,0 +1,461 @@
+import { css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { localized } from '@lit/localize';
+import { format } from 'fecha';
+import { PdBaseView } from '../../shared/PdBaseView.js';
+import { LOCALES } from '../../shared/calendar-locales.js';
+import { getWeeksArray, isToday, isSelected } from '../../shared/calendar-utils.js';
+import '../pd-calendar-cell/pd-calendar-cell.js';
+import '../pd-calendar-event-cell/pd-calendar-event-cell.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const TOUCH_MIN_MOVE = 70;
+let PdCalendarMonthView = class extends PdBaseView {
+  constructor() {
+    super(...arguments);
+    this.currentDate = /* @__PURE__ */ new Date();
+    this.hideWeekend = false;
+    this.selectableDates = false;
+    this.numberClass = "top-left";
+    this.withWheelNavigation = false;
+    this.withTouchNavigation = false;
+    this.cellType = "simple";
+    this._wheelDelta = 0;
+    this._focusedDay = -1;
+    this._gridHasFocus = false;
+    // Derived values computed in willUpdate
+    this._numberOfDays = 0;
+    this._firstDayOfMonth = 0;
+    this._year = 0;
+    this._month = 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("currentDate")) {
+      const date = this.currentDate;
+      this._year = date.getFullYear();
+      this._month = date.getMonth();
+      const firstDay = new Date(this._year, this._month, 1);
+      this._firstDayOfMonth = firstDay.getDay();
+      const lastDay = new Date(this._year, this._month + 1, 0);
+      this._numberOfDays = lastDay.getDate();
+      if (this._prevCurrentDate && (this._prevCurrentDate.getMonth() !== this._month || this._prevCurrentDate.getFullYear() !== this._year)) {
+        this._focusedDay = -1;
+      }
+      this._prevCurrentDate = date;
+    }
+  }
+  render() {
+    const gridLabel = `${LOCALES.monthNames[this._month]} ${this._year}`;
+    const weeks = getWeeksArray(this._year, this._month, this.hideWeekend);
+    return html`
+      <div
+        id="calendarGrid"
+        class="calendar-grid"
+        role="grid"
+        aria-label="${gridLabel}"
+        tabindex="${this.selectableDates || this.withWheelNavigation ? 0 : -1}"
+        @wheel="${this._wheelEvent}"
+        @touchstart="${this._touchStartEvent}"
+        @touchend="${this._touchEndEvent}"
+        @keydown="${this.selectableDates ? this._onGridKeyDown : nothing}"
+        @focusin="${this._onGridFocusIn}"
+        @focusout="${this._onGridFocusOut}"
+      >
+        <!-- Weekday Headers -->
+        <div class="week-header" role="row">
+          ${this._getWeekDays().map(
+      (day) => html`
+              <div class="title-week-day" role="columnheader">${day}</div>
+            `
+    )}
+        </div>
+
+        <!-- Week Rows -->
+        ${weeks.map(
+      (week) => html`
+            <div class="week-row" role="row">
+              ${week.map((day) => this._renderDay(day))}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  // ===========================================================================
+  // Day Rendering
+  // ===========================================================================
+  _renderDay(day) {
+    if (day === null) {
+      return html`<div class="cell-empty" role="gridcell"></div>`;
+    }
+    if (this.cellType === "events") {
+      return this._renderEventDay(day);
+    }
+    const key = format(day, "YYYY-MM-DD");
+    const cellData = this.data ? this.data[key]?.[0] : void 0;
+    const dayNumber = day.getDate();
+    const isFocused = this._gridHasFocus && this._focusedDay === dayNumber;
+    const isDisabled = cellData?.disabled ?? false;
+    const category = cellData?.category;
+    const categoryConfig = this._resolveCategoryConfig(category);
+    return html`
+      <pd-calendar-cell
+        role="gridcell"
+        key="${key}"
+        .dayNumber="${dayNumber}"
+        .weekDayNumber="${day.getDay()}"
+        .title="${cellData?.info || ""}"
+        ?selectEnabled="${this.selectableDates || !!cellData?.info}"
+        .category="${category || ""}"
+        .categoryColor="${categoryConfig?.color || ""}"
+        .categoryTextColor="${categoryConfig?.textColor || ""}"
+        ?disabled="${isDisabled}"
+        .numberClass="${this.numberClass}"
+        ?today="${this.selectableDates && isToday(day)}"
+        ?selected="${this.showSelection && isSelected(this.refDate, day)}"
+        ?focused="${isFocused}"
+        aria-selected="${this.showSelection && isSelected(this.refDate, day)}"
+        aria-disabled="${isDisabled}"
+      ></pd-calendar-cell>
+    `;
+  }
+  _renderEventDay(day) {
+    const key = format(day, "YYYY-MM-DD");
+    const entries = this.data ? this.data[key] ?? [] : [];
+    const dayNumber = day.getDate();
+    return html`
+      <pd-calendar-event-cell
+        role="gridcell"
+        key="${key}"
+        .dayNumber="${dayNumber}"
+        .weekDayNumber="${day.getDay()}"
+        .entries="${entries}"
+        .config="${this.config}"
+        ?today="${isToday(day)}"
+        ?selected="${this.showSelection && isSelected(this.refDate, day)}"
+      ></pd-calendar-event-cell>
+    `;
+  }
+  _getWeekDays() {
+    return this.hideWeekend ? LOCALES.weekdaysShort.slice(0, 5) : LOCALES.weekdaysShort;
+  }
+  // ===========================================================================
+  // Navigation Events (dispatch pd-navigate to parent)
+  // ===========================================================================
+  _dispatchNavigate(direction) {
+    this.dispatchEvent(
+      new CustomEvent("pd-navigate", {
+        detail: { direction },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  // ===========================================================================
+  // Focus Management
+  // ===========================================================================
+  _onGridFocusIn() {
+    this._gridHasFocus = true;
+  }
+  _onGridFocusOut() {
+    this._gridHasFocus = false;
+    this._wheelDelta = 0;
+  }
+  // ===========================================================================
+  // Wheel Navigation
+  // ===========================================================================
+  _wheelEvent(e) {
+    if (!this.withWheelNavigation) return;
+    if (!this._gridHasFocus) return;
+    this._wheelDelta += e.deltaY;
+    if (this._wheelDelta > 360) {
+      this._wheelDelta = 0;
+      this._dispatchNavigate("next");
+    } else if (this._wheelDelta < -360) {
+      this._wheelDelta = 0;
+      this._dispatchNavigate("prev");
+    }
+    e.preventDefault();
+  }
+  // ===========================================================================
+  // Touch Navigation
+  // ===========================================================================
+  _touchStartEvent(e) {
+    if (this.withTouchNavigation) {
+      this._wheelDelta = e.changedTouches[0].screenX;
+    }
+    e.stopPropagation();
+  }
+  _touchEndEvent(e) {
+    if (this.withTouchNavigation) {
+      const diff = this._wheelDelta - e.changedTouches[0].screenX;
+      if (diff < -TOUCH_MIN_MOVE) {
+        this._dispatchNavigate("next");
+      } else if (diff > TOUCH_MIN_MOVE) {
+        this._dispatchNavigate("prev");
+      }
+    }
+    e.stopPropagation();
+  }
+  // ===========================================================================
+  // Keyboard Navigation
+  // ===========================================================================
+  _onGridKeyDown(e) {
+    if (!this.selectableDates) return;
+    const daysInWeek = this.hideWeekend ? 5 : 7;
+    let newFocusedDay = this._focusedDay;
+    switch (e.key) {
+      case "ArrowRight":
+        newFocusedDay = this._getNextSelectableDay(this._focusedDay, 1);
+        break;
+      case "ArrowLeft":
+        newFocusedDay = this._getNextSelectableDay(this._focusedDay, -1);
+        break;
+      case "ArrowDown":
+        newFocusedDay = this._getNextSelectableDay(
+          this._focusedDay,
+          daysInWeek
+        );
+        break;
+      case "ArrowUp":
+        newFocusedDay = this._getNextSelectableDay(
+          this._focusedDay,
+          -daysInWeek
+        );
+        break;
+      case "Home":
+        newFocusedDay = 1;
+        break;
+      case "End":
+        newFocusedDay = this._numberOfDays;
+        break;
+      case "PageDown":
+        this._dispatchNavigate("next");
+        return;
+      case "PageUp":
+        this._dispatchNavigate("prev");
+        return;
+      case "Enter":
+      case " ":
+        if (this._focusedDay > 0) {
+          this._selectFocusedDay();
+        }
+        e.preventDefault();
+        return;
+      default:
+        return;
+    }
+    if (newFocusedDay !== this._focusedDay && newFocusedDay >= 1 && newFocusedDay <= this._numberOfDays) {
+      this._focusedDay = newFocusedDay;
+      this._scrollFocusedDayIntoView();
+    }
+    e.preventDefault();
+  }
+  _getNextSelectableDay(currentDay, delta) {
+    if (currentDay < 1) {
+      return delta > 0 ? 1 : this._numberOfDays;
+    }
+    let nextDay = currentDay + delta;
+    if (nextDay < 1) nextDay = 1;
+    if (nextDay > this._numberOfDays) nextDay = this._numberOfDays;
+    if (this.hideWeekend) {
+      const date = new Date(this._year, this._month, nextDay);
+      const dayOfWeek = date.getDay();
+      if (dayOfWeek === 0) nextDay += delta > 0 ? 1 : -2;
+      if (dayOfWeek === 6) nextDay += delta > 0 ? 2 : -1;
+      if (nextDay < 1) nextDay = 1;
+      if (nextDay > this._numberOfDays) nextDay = this._numberOfDays;
+    }
+    return nextDay;
+  }
+  _selectFocusedDay() {
+    const date = new Date(this._year, this._month, this._focusedDay);
+    const key = format(date, "YYYY-MM-DD");
+    this.dispatchEvent(
+      new CustomEvent("select-date", {
+        detail: { dateKey: key, date },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _scrollFocusedDayIntoView() {
+    this.updateComplete.then(() => {
+      const focusedCell = this.shadowRoot?.querySelector(
+        `pd-calendar-cell[focused]`
+      );
+      focusedCell?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    });
+  }
+};
+PdCalendarMonthView.styles = [
+  PdBaseView.baseStyles,
+  css`
+      :host {
+        --_cell-height: var(--pd-calendar-cell-height, 70px);
+        --_columns: 7;
+        --_gap: var(--pd-calendar-gap, 2px);
+      }
+
+      :host([hideWeekend]) {
+        --_columns: 5;
+      }
+
+      :host([celltype="events"]) {
+        --_cell-height: var(--pd-calendar-cell-height, 100px);
+      }
+
+      .calendar-grid {
+        display: grid;
+        grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
+        gap: var(--_gap);
+        position: relative;
+        background-color: var(
+          --pd-calendar-grid-bg-col,
+          var(--pd-default-disabled-light-col)
+        );
+        padding: var(--_gap);
+        border-radius: var(--pd-radius-md);
+        overflow: hidden;
+      }
+
+      .week-row {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        gap: var(--_gap);
+        min-height: var(--_cell-height);
+      }
+
+      .week-header {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        gap: var(--_gap);
+      }
+
+      .title-week-day {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 36px;
+        padding: var(--pd-spacing-xs) 0;
+        background-color: var(
+          --pd-calendar-week-title-bg-col,
+          var(--pd-default-dark-col)
+        );
+        font-size: var(--pd-calendar-weekday-title-font-size, 0.85em);
+        font-weight: 600;
+        color: var(--pd-calendar-week-title-font-col, var(--pd-on-primary-col));
+        font-family: var(--pd-default-font-title-family);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        border-radius: var(--pd-radius-sm);
+      }
+
+      .cell-empty {
+        min-height: var(--_cell-height);
+        background-color: var(
+          --pd-calendar-cell-empty-bg-col,
+          var(--pd-default-disabled-lightest-col)
+        );
+        border-radius: var(--pd-radius-sm);
+      }
+
+      .calendar-grid:focus {
+        outline: none;
+      }
+
+      .calendar-grid:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-md, 4px);
+      }
+
+      @container (max-width: 500px) {
+        .title-week-day {
+          font-size: 0.75em;
+          min-height: 28px;
+          letter-spacing: 0.02em;
+        }
+
+        .week-row {
+          min-height: var(--pd-calendar-cell-height, 50px);
+        }
+
+        .cell-empty {
+          min-height: var(--pd-calendar-cell-height, 50px);
+        }
+      }
+
+      @container (max-width: 300px) {
+        .title-week-day {
+          font-size: 0.7em;
+          min-height: 22px;
+          letter-spacing: 0;
+        }
+
+        .week-row {
+          min-height: var(--pd-calendar-cell-height, 40px);
+        }
+
+        .cell-empty {
+          min-height: var(--pd-calendar-cell-height, 40px);
+        }
+
+        .calendar-grid {
+          gap: 1px;
+          padding: 1px;
+        }
+
+        .week-row,
+        .week-header {
+          gap: 1px;
+        }
+      }
+    `
+];
+__decorateClass([
+  property({ type: Object })
+], PdCalendarMonthView.prototype, "currentDate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdCalendarMonthView.prototype, "hideWeekend", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCalendarMonthView.prototype, "selectableDates", 2);
+__decorateClass([
+  property({ type: String })
+], PdCalendarMonthView.prototype, "numberClass", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCalendarMonthView.prototype, "withWheelNavigation", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCalendarMonthView.prototype, "withTouchNavigation", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdCalendarMonthView.prototype, "cellType", 2);
+__decorateClass([
+  state()
+], PdCalendarMonthView.prototype, "_wheelDelta", 2);
+__decorateClass([
+  state()
+], PdCalendarMonthView.prototype, "_focusedDay", 2);
+__decorateClass([
+  state()
+], PdCalendarMonthView.prototype, "_gridHasFocus", 2);
+PdCalendarMonthView = __decorateClass([
+  localized()
+], PdCalendarMonthView);
+
+export { PdCalendarMonthView };

package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.d.ts

@@ -0,0 +1,3 @@
+import { PdCalendarMonthView } from './PdCalendarMonthView.js';
+export { PdCalendarMonthView };
+//# sourceMappingURL=pd-calendar-month-view.d.ts.map

package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-calendar-month-view.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAO/D,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/pd-calendar/pd-calendar-month-view/pd-calendar-month-view.js

@@ -0,0 +1,8 @@
+import { PdCalendarMonthView } from './PdCalendarMonthView.js';
+
+const tag = "pd-calendar-month-view";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdCalendarMonthView);
+}
+
+export { PdCalendarMonthView };

package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.d.ts

@@ -0,0 +1,32 @@
+import { nothing, CSSResultGroup } from 'lit';
+import { PdBaseView } from '../../shared/PdBaseView.js';
+import { WeekViewConfig } from '../../types.js';
+/**
+ * Time grid (week) view component for the calendar.
+ * Displays a weekly view with hour rows and overlapping event layout.
+ *
+ * @internal - Not exported from package, used only by PdCalendar.
+ */
+export declare class PdCalendarTimeGridView extends PdBaseView {
+    /** Monday of the currently displayed week. */
+    currentWeekStart?: Date;
+    /** Configuration for the week view (visible days, time window). */
+    weekViewConfig?: WeekViewConfig;
+    /** Hide Saturday and Sunday columns. */
+    hideWeekend: boolean;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+    /** Returns effective visible day indices from config, hideWeekend flag, or all 7 days. */
+    private _getVisibleDays;
+    /** Returns { startHour, endHour } from config or defaults. */
+    private _getTimeWindow;
+    /** Parses "HH:mm" -> decimal hours (e.g. "09:30" -> 9.5). */
+    private _parseTimeToDecimal;
+    /** Calculates the actual Date for a given monday-based day index. */
+    private _getDateForDayIndex;
+    /** Renders hour labels in the gutter. */
+    private _renderHourLabels;
+    /** Renders horizontal hour lines within a day column. */
+    private _renderHourLines;
+}
+//# sourceMappingURL=PdCalendarTimeGridView.d.ts.map

package/dist/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendarTimeGridView.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-time-grid-view/PdCalendarTimeGridView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAgB,MAAM,gBAAgB,CAAC;AAE9D,OAAO,mDAAmD,CAAC;AAE3D;;;;;GAKG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,8CAA8C;IAE9C,gBAAgB,CAAC,EAAE,IAAI,CAAC;IAExB,mEAAmE;IAEnE,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,wCAAwC;IAExC,WAAW,UAAS;IAEpB,OAAgB,MAAM,EAAE,cAAc,CAyMpC;IAEO,MAAM;IAwLf,0FAA0F;IAC1F,OAAO,CAAC,eAAe;IAUvB,8DAA8D;IAC9D,OAAO,CAAC,cAAc;IAOtB,6DAA6D;IAC7D,OAAO,CAAC,mBAAmB;IAK3B,qEAAqE;IACrE,OAAO,CAAC,mBAAmB;IAW3B,yCAAyC;IACzC,OAAO,CAAC,iBAAiB;IAyBzB,yDAAyD;IACzD,OAAO,CAAC,gBAAgB;CAyBzB"}