@progressive-development/pd-calendar 0.6.8 → 1.0.0

package/dist/pd-calendar/pd-calendar-list-cell/PdCalendarListCell.js

@@ -0,0 +1,252 @@
+import { css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { PdBaseCell } from '../../shared/PdBaseCell.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;
+};
+let PdCalendarListCell = class extends PdBaseCell {
+  constructor() {
+    super(...arguments);
+    this.monthNumber = 0;
+    this.yearNumber = 0;
+    this.entryIndex = 0;
+    /** Weekday abbreviations (German). */
+    this._weekDayNames = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
+  }
+  render() {
+    const dateFormatted = this._formatDate();
+    const weekDay = this._weekDayNames[this.weekDayNumber];
+    const timeInfo = this._formatTime("-");
+    const cellClasses = this.category ? "list-cell categorized" : "list-cell";
+    const style = this._getCategoryStyle(
+      "--pd-calendar-list-cell-category-bg-col",
+      "--pd-calendar-list-cell-category-text-col"
+    );
+    return html`
+      <div
+        class="${cellClasses}"
+        style="${style}"
+        data-date="${this.key}"
+        @click="${this._handleClick}"
+        @keydown="${this._handleKeyDown}"
+      >
+        <div class="date-group">
+          <span class="date-formatted">${dateFormatted}</span>
+          <span class="weekday"
+            >${weekDay}${timeInfo ? html` ${timeInfo}` : ""}</span
+          >
+        </div>
+        <div class="content-group">
+          ${this.title ? html`<span class="title">${this.title}</span>` : ""}
+          ${this.desc ? html`<span class="description">${this.desc}</span>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  _handleSelect() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("select-event", {
+        detail: {
+          dateKey: this.key,
+          entry: this.entry,
+          index: this.entryIndex,
+          anchorRect: this.getBoundingClientRect()
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Formats the date as dd.mm.yy
+   */
+  _formatDate() {
+    const day = this.dayNumber.toString().padStart(2, "0");
+    const month = this.monthNumber.toString().padStart(2, "0");
+    const year = this.yearNumber.toString().slice(-2);
+    return `${day}.${month}.${year}`;
+  }
+  _handleClick() {
+    this._handleSelect();
+  }
+};
+PdCalendarListCell.styles = [
+  css`
+      :host {
+        display: block;
+        container-type: inline-size;
+      }
+
+      .list-cell {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-xs, 0.25rem);
+        padding: var(--pd-spacing-sm, 0.5rem) var(--pd-spacing-md, 1rem);
+        background-color: var(
+          --pd-calendar-list-cell-bg-col,
+          var(--pd-default-lightest-col, #f9fafb)
+        );
+        border-radius: var(--pd-radius-sm, 4px);
+        cursor: pointer;
+        transition: background-color 0.15s ease;
+      }
+
+      .list-cell:hover {
+        background-color: var(
+          --pd-calendar-list-cell-bg-col-hover,
+          var(--pd-default-light-col, #f3f4f6)
+        );
+      }
+
+      :host([selected]) .list-cell {
+        background-color: var(
+          --pd-calendar-list-cell-selected-bg-col,
+          var(--pd-default-success-light-col, #dcfce7)
+        );
+        border-left: 3px solid
+          var(
+            --pd-calendar-list-cell-selected-border-col,
+            var(--pd-default-success-col, #22c55e)
+          );
+      }
+
+      :host([disabled]) .list-cell {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      /* Categorized cells - colors set via inline style from category config */
+      .list-cell.categorized {
+        background-color: var(
+          --pd-calendar-list-cell-category-bg-col,
+          var(--pd-default-success-light-col, #dcfce7)
+        );
+      }
+
+      .list-cell.categorized .date-formatted,
+      .list-cell.categorized .weekday,
+      .list-cell.categorized .title,
+      .list-cell.categorized .description {
+        color: var(--pd-calendar-list-cell-category-text-col);
+      }
+
+      /* === COMPACT LAYOUT (default, < 400px) === */
+      /* Row 1: Date, Weekday, Title inline */
+      .date-group {
+        display: flex;
+        align-items: center;
+        gap: var(--pd-spacing-sm, 0.5rem);
+      }
+
+      .content-group {
+        display: contents;
+      }
+
+      .date-formatted {
+        font-size: var(--pd-calendar-list-cell-date-size, 0.9rem);
+        font-weight: 600;
+        color: var(
+          --pd-calendar-list-cell-date-col,
+          var(--pd-default-font-col, #374151)
+        );
+        white-space: nowrap;
+      }
+
+      .weekday {
+        font-size: var(--pd-calendar-list-cell-weekday-size, 0.75rem);
+        color: var(
+          --pd-calendar-list-cell-weekday-col,
+          var(--pd-default-font-light-col, #6b7280)
+        );
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+
+      .title {
+        font-size: var(--pd-calendar-list-cell-title-size, 1rem);
+        font-weight: 500;
+        color: var(
+          --pd-calendar-list-cell-title-col,
+          var(--pd-default-font-col, #111827)
+        );
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Row 2: Description full width */
+      .description {
+        font-size: var(--pd-calendar-list-cell-desc-size, 0.875rem);
+        color: var(
+          --pd-calendar-list-cell-desc-col,
+          var(--pd-default-font-light-col, #6b7280)
+        );
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* === WIDE LAYOUT (>= 400px) === */
+      @container (min-width: 400px) {
+        .list-cell {
+          flex-direction: row;
+          align-items: flex-start;
+          gap: var(--pd-spacing-md, 1rem);
+        }
+
+        /* Left column: Date + Weekday stacked */
+        .date-group {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0;
+          min-width: 5.5em;
+        }
+
+        /* Right column: Title + Description stacked */
+        .content-group {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          min-width: 0;
+          gap: var(--pd-spacing-xs, 0.25rem);
+        }
+
+        .title {
+          white-space: nowrap;
+        }
+      }
+
+      /* Focus styles for keyboard navigation */
+      :host(:focus-visible) .list-cell {
+        outline: 2px solid
+          var(--pd-focus-ring-col, var(--pd-default-info-col, #3b82f6));
+        outline-offset: 2px;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], PdCalendarListCell.prototype, "monthNumber", 2);
+__decorateClass([
+  property({ type: Number })
+], PdCalendarListCell.prototype, "yearNumber", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendarListCell.prototype, "entry", 2);
+__decorateClass([
+  property({ type: Number })
+], PdCalendarListCell.prototype, "entryIndex", 2);
+PdCalendarListCell = __decorateClass([
+  customElement("pd-calendar-list-cell")
+], PdCalendarListCell);
+
+export { PdCalendarListCell };

package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.d.ts

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

package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-calendar-list-cell.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAO7D,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/pd-calendar/pd-calendar-list-cell/pd-calendar-list-cell.js

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

package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.d.ts

@@ -0,0 +1,26 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseView } from '../../shared/PdBaseView.js';
+import { CalendarListRange } from '../../types.js';
+/**
+ * List view component for the calendar.
+ * Shows only dates that have data entries (info or desc).
+ *
+ * @internal - Not exported from package, used only by PdCalendar.
+ */
+export declare class PdCalendarListView extends PdBaseView {
+    /** Current date for determining the displayed month. */
+    currentDate: Date;
+    /** Custom date range. When set, shows entries within this range instead of current month. */
+    listRange?: CalendarListRange;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    /**
+     * Parses a date from Date object or string (YYYY-MM-DD format).
+     */
+    private _parseDate;
+    /**
+     * Gets list entries from calendar data for the current month or custom range.
+     */
+    private _getListEntries;
+}
+//# sourceMappingURL=PdCalendarListView.d.ts.map

package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendarListView.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-list-view/PdCalendarListView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAoB,MAAM,gBAAgB,CAAC;AAErE,OAAO,mDAAmD,CAAC;AAE3D;;;;;GAKG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,wDAAwD;IAExD,WAAW,OAAc;IAEzB,6FAA6F;IAE7F,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE9B,OAAgB,MAAM,EAAE,cAAc,CAkCpC;IAEO,MAAM;IA2Cf;;OAEG;IACH,OAAO,CAAC,UAAU;IAMlB;;OAEG;IACH,OAAO,CAAC,eAAe;CA8FxB"}

package/dist/pd-calendar/pd-calendar-list-view/PdCalendarListView.js

@@ -0,0 +1,165 @@
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
+import { format } from 'fecha';
+import { PdBaseView } from '../../shared/PdBaseView.js';
+import '../pd-calendar-list-cell/pd-calendar-list-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;
+};
+let PdCalendarListView = class extends PdBaseView {
+  constructor() {
+    super(...arguments);
+    this.currentDate = /* @__PURE__ */ new Date();
+  }
+  render() {
+    const listEntries = this._getListEntries();
+    const emptyMessage = msg("Keine Einträge vorhanden", {
+      id: "pd.calendar.list.empty"
+    });
+    this.currentDate.getFullYear();
+    this.currentDate.getMonth();
+    return html`
+      <div class="list-view" role="list" tabindex="0">
+        ${listEntries.length > 0 ? listEntries.map(
+      (entry) => html`
+                <pd-calendar-list-cell
+                  role="listitem"
+                  key="${entry.key}"
+                  .dayNumber="${entry.day}"
+                  .monthNumber="${entry.month}"
+                  .yearNumber="${entry.year}"
+                  .weekDayNumber="${entry.weekDay}"
+                  .title="${entry.title}"
+                  .desc="${entry.desc}"
+                  .category="${entry.category}"
+                  .categoryColor="${entry.categoryColor}"
+                  .categoryTextColor="${entry.categoryTextColor}"
+                  .startTime="${entry.startTime}"
+                  .endTime="${entry.endTime}"
+                  ?fullDay="${entry.fullDay}"
+                  ?disabled="${entry.disabled}"
+                  ?selected="${this.showSelection && entry.key === format(this.refDate ?? /* @__PURE__ */ new Date(), "YYYY-MM-DD")}"
+                  .entry="${entry.entry}"
+                  .entryIndex="${entry.entryIndex}"
+                ></pd-calendar-list-cell>
+              `
+    ) : html`<div class="list-empty">${emptyMessage}</div>`}
+      </div>
+    `;
+  }
+  /**
+   * Parses a date from Date object or string (YYYY-MM-DD format).
+   */
+  _parseDate(value) {
+    if (value instanceof Date) return value;
+    const [year, month, day] = value.split("-").map(Number);
+    return new Date(year, month - 1, day);
+  }
+  /**
+   * Gets list entries from calendar data for the current month or custom range.
+   */
+  _getListEntries() {
+    const entries = [];
+    if (!this.data) return entries;
+    const year = this.currentDate.getFullYear();
+    const month = this.currentDate.getMonth();
+    const numberOfDays = new Date(year, month + 1, 0).getDate();
+    let startDate;
+    let endDate;
+    if (this.listRange) {
+      startDate = this._parseDate(this.listRange.start);
+      endDate = this._parseDate(this.listRange.end);
+    } else {
+      startDate = new Date(year, month, 1);
+      endDate = new Date(year, month, numberOfDays);
+    }
+    const currentDate = new Date(startDate);
+    while (currentDate <= endDate) {
+      const key = format(currentDate, "YYYY-MM-DD");
+      const cellDataArray = this.data[key];
+      if (cellDataArray && cellDataArray.length > 0) {
+        cellDataArray.forEach((cellData, idx) => {
+          if (cellData.info || cellData.desc) {
+            const category = cellData.category || "";
+            const categoryConfig = this._resolveCategoryConfig(category);
+            entries.push({
+              key,
+              day: currentDate.getDate(),
+              month: currentDate.getMonth() + 1,
+              year: currentDate.getFullYear(),
+              weekDay: currentDate.getDay(),
+              title: cellData.info || "",
+              desc: cellData.desc || "",
+              category,
+              categoryColor: categoryConfig?.color || "",
+              categoryTextColor: categoryConfig?.textColor || "",
+              disabled: cellData.disabled ?? false,
+              startTime: cellData.startTime || "",
+              endTime: cellData.endTime || "",
+              fullDay: cellData.fullDay ?? false,
+              entry: cellData,
+              entryIndex: idx
+            });
+          }
+        });
+      }
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+    return entries;
+  }
+};
+PdCalendarListView.styles = [
+  PdBaseView.baseStyles,
+  css`
+      .list-view {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-sm, 0.5rem);
+        padding: var(--pd-spacing-sm, 0.5rem) 0;
+        background-color: var(
+          --pd-calendar-list-bg-col,
+          var(--pd-default-bg-col)
+        );
+        border-radius: var(--pd-radius-md);
+        max-height: var(--pd-calendar-list-max-height, 400px);
+        overflow-y: auto;
+      }
+
+      .list-view:focus {
+        outline: none;
+      }
+
+      .list-view:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-md, 4px);
+      }
+
+      .list-empty {
+        padding: var(--pd-spacing-lg, 1.5rem);
+        text-align: center;
+        color: var(--pd-default-font-light-col, #6b7280);
+        font-style: italic;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Object })
+], PdCalendarListView.prototype, "currentDate", 2);
+__decorateClass([
+  property({ type: Object })
+], PdCalendarListView.prototype, "listRange", 2);
+PdCalendarListView = __decorateClass([
+  localized()
+], PdCalendarListView);
+
+export { PdCalendarListView };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-calendar-list-view.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-list-view/pd-calendar-list-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAO7D,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

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

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

@@ -0,0 +1,55 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseView } from '../../shared/PdBaseView.js';
+/**
+ * Month grid view component for the calendar.
+ * Displays a month with week rows, weekday headers, and day cells.
+ * Supports keyboard, wheel, and touch navigation.
+ *
+ * @event pd-navigate - Fired when the user navigates via wheel/touch/keyboard. Detail: `{ direction: "next" | "prev" }`.
+ *
+ * @internal - Not exported from package, used only by PdCalendar.
+ */
+export declare class PdCalendarMonthView extends PdBaseView {
+    /** Current date determining the displayed month. */
+    currentDate: Date;
+    /** Hide Saturday and Sunday columns. */
+    hideWeekend: boolean;
+    /** Whether dates are selectable. */
+    selectableDates: boolean;
+    /** CSS class for day number positioning ('top-left' or 'center'). */
+    numberClass: string;
+    /** Enable mouse wheel navigation between months. */
+    withWheelNavigation: boolean;
+    /** Enable touch swipe navigation between months. */
+    withTouchNavigation: boolean;
+    /** Cell rendering mode: "simple" uses PdCalendarCell, "events" uses PdCalendarEventCell. */
+    cellType: "simple" | "events";
+    /** @ignore */
+    private _wheelDelta;
+    /** @ignore - Currently focused day (1-31) for keyboard navigation, -1 if none */
+    private _focusedDay;
+    /** @ignore - Whether the calendar grid has focus */
+    private _gridHasFocus;
+    private _numberOfDays;
+    private _firstDayOfMonth;
+    private _year;
+    private _month;
+    private _prevCurrentDate?;
+    static styles: CSSResultGroup;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _renderDay;
+    private _renderEventDay;
+    private _getWeekDays;
+    private _dispatchNavigate;
+    private _onGridFocusIn;
+    private _onGridFocusOut;
+    private _wheelEvent;
+    private _touchStartEvent;
+    private _touchEndEvent;
+    private _onGridKeyDown;
+    private _getNextSelectableDay;
+    private _selectFocusedDay;
+    private _scrollFocusedDayIntoView;
+}
+//# sourceMappingURL=PdCalendarMonthView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendarMonthView.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-calendar-month-view/PdCalendarMonthView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AASxD,OAAO,yCAAyC,CAAC;AACjD,OAAO,qDAAqD,CAAC;AAI7D;;;;;;;;GAQG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,oDAAoD;IAEpD,WAAW,OAAc;IAEzB,wCAAwC;IAExC,WAAW,UAAS;IAEpB,oCAAoC;IAEpC,eAAe,UAAS;IAExB,qEAAqE;IAErE,WAAW,SAAc;IAEzB,oDAAoD;IAEpD,mBAAmB,UAAS;IAE5B,oDAAoD;IAEpD,mBAAmB,UAAS;IAE5B,4FAA4F;IAE5F,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAAY;IAEzC,cAAc;IAEd,OAAO,CAAC,WAAW,CAAK;IAExB,iFAAiF;IAEjF,OAAO,CAAC,WAAW,CAAM;IAEzB,oDAAoD;IAEpD,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,gBAAgB,CAAC,CAAO;IAEhC,OAAgB,MAAM,EAAE,cAAc,CA8HpC;IAEO,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAwBzD,MAAM;IA2Cf,OAAO,CAAC,UAAU;IAwClB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,cAAc;IA4DtB,OAAO,CAAC,qBAAqB;IAuB7B,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,yBAAyB;CAQlC"}