@progressive-development/pd-calendar 0.6.8 → 1.0.0

package/dist/pd-calendar/pd-calendar.stories.d.ts

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { CalendarData, AvailableCalendarViewTypes } from '../types.js';
+/**
+ * Story arguments interface for pd-calendar component.
+ * Maps to the component's public API.
+ */
+interface PdCalendarArgs {
+    /** Reference date for initial calendar view */
+    refDate?: Date;
+    /** Whether weekends should be hidden */
+    hideWeekend: boolean;
+    /** Calendar data with info per date */
+    data: CalendarData;
+    /** Number of months allowed to navigate backwards (-1 = unlimited) */
+    prevMonthConstraint: number;
+    /** Number of months allowed to navigate forwards (-1 = unlimited) */
+    nextMonthConstraint: number;
+    /** Whether dates are selectable */
+    selectableDates: boolean;
+    /** Whether to show selection highlight */
+    showSelection: boolean;
+    /** Year selection popup values */
+    withYearPopup: string[];
+    /** CSS class for number positioning */
+    numberClass: string;
+    /** Enable mouse wheel navigation between months */
+    withWheelNavigation: boolean;
+    /** Enable touch swipe navigation between months */
+    withTouchNavigation: boolean;
+    /** Available view types for view toggle */
+    availableViewTypes?: AvailableCalendarViewTypes;
+}
+/**
+ * ## pd-calendar
+ *
+ * A full-featured calendar component supporting month, list, and week views with
+ * date info, selection, navigation, and event management.
+ *
+ * ### Features
+ * - **Month View**: Displays a full month with navigation controls and date info
+ * - **List View**: Shows only dates with data in a compact list format
+ * - **Week View (timeGrid)**: Displays a weekly time grid with overlapping events
+ * - **Event Calendar**: Month view with event bars and info panel (`cellType="events"`)
+ * - **Special Days**: Highlight specific dates with category-based styling
+ * - **Navigation**: Arrow buttons, keyboard, mouse wheel, touch swipe, year popup
+ * - **Navigation Constraints**: Limit forward/backward month navigation
+ * - **Weekend Hiding**: Option to hide Saturday and Sunday
+ * - **Custom Date Range**: List view can display a specific date range
+ *
+ * ### Accessibility
+ * - `role="grid"` on the calendar grid with `aria-label` for current month/year
+ * - Arrow keys navigate between dates, Enter/Space selects
+ * - Home/End for first/last day of month
+ * - `aria-selected` on selected dates
+ * - `tabindex` management for keyboard focus (0 when selectable, -1 when read-only)
+ * - Focus-visible styling for keyboard users
+ */
+declare const meta: Meta<PdCalendarArgs>;
+export default meta;
+type Story = StoryObj<PdCalendarArgs>;
+/** Default calendar without data or constraints. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Calendar with price info per date and forward/backward navigation constraints. */
+export declare const WithInfoAndConstraints: Story;
+/** Calendar with category-highlighted special days (green background). */
+export declare const WithSpecialDays: Story;
+/** Compact selectable calendar with year popup, centered numbers, and reduced width. */
+export declare const Selectable: Story;
+/** List view with title, description, time, and category colors. Toggle between month and list view. */
+export declare const ListView: Story;
+/** All time display variants in list view: no time, start only, start+end, and full day. */
+export declare const ListViewTimeVariants: Story;
+/** List view with a custom date range spanning multiple months. Navigation is disabled in range mode. */
+export declare const ListViewCustomRange: Story;
+/** Week view (timeGrid) with timed events, full-day events, and overlapping events. */
+export declare const WeekView: Story;
+/** Week view with custom time window (8:00-18:00) and visible days configuration. */
+export declare const WeekViewBusinessHours: Story;
+/** Month view with event bars per day using `cellType="events"`. Click an event bar to open the info panel. */
+export declare const EventCalendar: Story;
+/** CSS Custom Properties -- Branded and Redesigned calendar variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-calendar.stories.d.ts.map

package/dist/pd-calendar/pd-calendar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-calendar.stories.d.ts","sourceRoot":"","sources":["../../src/pd-calendar/pd-calendar.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EACV,YAAY,EACZ,0BAA0B,EAI3B,MAAM,aAAa,CAAC;AAMrB;;;GAGG;AACH,UAAU,cAAc;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,IAAI,EAAE,YAAY,CAAC;IACnB,sEAAsE;IACtE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mCAAmC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;CACjD;AA+ED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAoG9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMtC,oFAAoF;AACpF,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,EAAE,KAiBpC,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC;AAMF,wFAAwF;AACxF,eAAO,MAAM,UAAU,EAAE,KAwCxB,CAAC;AAMF,wGAAwG;AACxG,eAAO,MAAM,QAAQ,EAAE,KA4FtB,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB,EAAE,KAiElC,CAAC;AAMF,yGAAyG;AACzG,eAAO,MAAM,mBAAmB,EAAE,KAkEjC,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,QAAQ,EAAE,KAuHtB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,EAAE,KA2EnC,CAAC;AAMF,+GAA+G;AAC/G,eAAO,MAAM,aAAa,EAAE,KAmI3B,CAAC;AAMF,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,KAyF3B,CAAC"}

package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * Accessible year selection popup component.
+ *
+ * Displays a listbox of selectable years with full keyboard navigation
+ * and ARIA support for screen readers.
+ *
+ * @event change-year-selection - Fired when a year is selected. Detail: `{ year: string }`.
+ * @event abort-year-selection - Fired when popup is closed without selection (Escape, click outside).
+ *
+ * @tagname pd-year-popup
+ *
+ * @cssprop --pd-year-popup-bg-col - Background color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-year-popup-border-col - Border color. Default: `var(--pd-default-disabled-light-col)`.
+ */
+export declare class PdYearPopup extends LitElement {
+    /** List of selectable years. */
+    yearSelection: string[];
+    /** Currently selected year (highlighted). */
+    currentYear: string;
+    /** @ignore - Index of currently focused item for keyboard navigation */
+    private _focusedIndex;
+    private _listEl;
+    private _boundHandleClickOutside;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): import('lit').TemplateResult<1>;
+    private _getItemClasses;
+    private _onKeyDown;
+    private _scrollToFocused;
+    private _yearSelection;
+    private _selectYear;
+    private _closeSelection;
+    private _handleClickOutside;
+}
+//# sourceMappingURL=PdYearPopup.d.ts.map

package/dist/pd-calendar/pd-year-popup/PdYearPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdYearPopup.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-year-popup/PdYearPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,gCAAgC;IAEhC,aAAa,EAAE,MAAM,EAAE,CAAM;IAE7B,6CAA6C;IAE7C,WAAW,SAAM;IAEjB,wEAAwE;IAExE,OAAO,CAAC,aAAa,CAAM;IAG3B,OAAO,CAAC,OAAO,CAAoB;IAEnC,OAAO,CAAC,wBAAwB,CAAuC;IAEvE,OAAgB,MAAM,EAAE,cAAc,CAgFpC;IAEO,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,IAAI,IAAI;IAYpB,MAAM;IA8Bf,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,UAAU;IAiDlB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,mBAAmB;CAM5B"}

package/dist/pd-calendar/pd-year-popup/PdYearPopup.js

@@ -0,0 +1,249 @@
+import { LitElement, css, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdYearPopup extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.yearSelection = [];
+    this.currentYear = "";
+    this._focusedIndex = -1;
+    this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        position: absolute;
+        z-index: 10;
+        top: 25px;
+        right: 0;
+      }
+
+      ul {
+        list-style: none;
+        max-height: 250px;
+        overflow-y: auto;
+
+        margin: 0;
+        padding: var(--pd-spacing-xs) 0;
+        width: 90px;
+        background: var(--pd-year-popup-bg-col, var(--pd-default-bg-col));
+        box-shadow: var(--pd-shadow-lg);
+        border-radius: var(--pd-radius-lg);
+        border: 1px solid
+          var(--pd-year-popup-border-col, var(--pd-default-disabled-light-col));
+
+        display: flex;
+        flex-direction: column;
+
+        scrollbar-width: thin;
+      }
+
+      ul:focus {
+        outline: none;
+      }
+
+      ul:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: 2px;
+      }
+
+      ul::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      ul::-webkit-scrollbar-thumb {
+        background-color: var(--pd-default-disabled-col);
+        border-radius: var(--pd-radius-sm);
+      }
+
+      li {
+        text-align: center;
+        padding: var(--pd-spacing-xs) var(--pd-spacing-sm);
+        margin: 0 var(--pd-spacing-xs);
+        font-size: 0.9em;
+        font-family: var(--pd-default-font-content-family);
+        border-radius: var(--pd-radius-sm);
+        color: var(--pd-default-dark-col);
+        cursor: pointer;
+        transition:
+          background-color 0.15s ease,
+          color 0.15s ease;
+      }
+
+      li:hover {
+        background-color: var(--pd-default-bg-light-col);
+      }
+
+      li.focused {
+        outline: 2px solid var(--pd-focus-ring-col);
+        outline-offset: -2px;
+      }
+
+      li.current {
+        background-color: var(--pd-default-col);
+        color: var(--pd-on-primary-col);
+        font-weight: 600;
+      }
+
+      li.current:hover {
+        background-color: var(--pd-default-dark-col);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setTimeout(() => {
+      document.addEventListener("click", this._boundHandleClickOutside);
+    }, 0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._boundHandleClickOutside);
+  }
+  firstUpdated() {
+    const currentIndex = this.yearSelection.indexOf(this.currentYear);
+    this._focusedIndex = currentIndex >= 0 ? currentIndex : 0;
+    this.updateComplete.then(() => {
+      this._listEl?.focus();
+      this._scrollToFocused();
+    });
+  }
+  render() {
+    return html`
+      <ul
+        role="listbox"
+        aria-label="Jahr auswählen"
+        aria-activedescendant="${this._focusedIndex >= 0 ? `year-option-${this._focusedIndex}` : ""}"
+        tabindex="0"
+        @keydown=${this._onKeyDown}
+      >
+        ${this.yearSelection.map(
+      (year, index) => html`
+            <li
+              id="year-option-${index}"
+              role="option"
+              aria-selected="${this.currentYear === year}"
+              class="${this._getItemClasses(year, index)}"
+              data-year="${year}"
+              data-index="${index}"
+              @click=${this._yearSelection}
+            >
+              ${year}
+            </li>
+          `
+    )}
+      </ul>
+    `;
+  }
+  _getItemClasses(year, index) {
+    const classes = [];
+    if (this.currentYear === year) {
+      classes.push("current");
+    }
+    if (this._focusedIndex === index) {
+      classes.push("focused");
+    }
+    return classes.join(" ");
+  }
+  _onKeyDown(e) {
+    const lastIndex = this.yearSelection.length - 1;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this._focusedIndex = Math.min(this._focusedIndex + 1, lastIndex);
+        this._scrollToFocused();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this._focusedIndex = Math.max(this._focusedIndex - 1, 0);
+        this._scrollToFocused();
+        break;
+      case "Home":
+        e.preventDefault();
+        this._focusedIndex = 0;
+        this._scrollToFocused();
+        break;
+      case "End":
+        e.preventDefault();
+        this._focusedIndex = lastIndex;
+        this._scrollToFocused();
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (this._focusedIndex >= 0) {
+          this._selectYear(this.yearSelection[this._focusedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        this._closeSelection();
+        break;
+      case "Tab":
+        this._closeSelection();
+        break;
+    }
+  }
+  _scrollToFocused() {
+    const focusedEl = this.shadowRoot?.getElementById(
+      `year-option-${this._focusedIndex}`
+    );
+    focusedEl?.scrollIntoView({ block: "nearest" });
+  }
+  _yearSelection(event) {
+    const target = event.currentTarget;
+    const year = target.dataset.year;
+    if (year) {
+      this._selectYear(year);
+    }
+  }
+  _selectYear(year) {
+    this.dispatchEvent(
+      new CustomEvent("change-year-selection", {
+        detail: { year },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _closeSelection() {
+    this.dispatchEvent(
+      new CustomEvent("abort-year-selection", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleClickOutside(event) {
+    const path = event.composedPath();
+    if (!path.includes(this)) {
+      this._closeSelection();
+    }
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], PdYearPopup.prototype, "yearSelection");
+__decorateClass([
+  property({ type: String })
+], PdYearPopup.prototype, "currentYear");
+__decorateClass([
+  state()
+], PdYearPopup.prototype, "_focusedIndex");
+__decorateClass([
+  query("ul")
+], PdYearPopup.prototype, "_listEl");
+
+export { PdYearPopup };

package/dist/pd-calendar/pd-year-popup/pd-year-popup.d.ts

@@ -0,0 +1,3 @@
+import { PdYearPopup } from './PdYearPopup.js';
+export { PdYearPopup };
+//# sourceMappingURL=pd-year-popup.d.ts.map

package/dist/pd-calendar/pd-year-popup/pd-year-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-year-popup.d.ts","sourceRoot":"","sources":["../../../src/pd-calendar/pd-year-popup/pd-year-popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/pd-calendar/pd-year-popup/pd-year-popup.js

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

package/dist/pd-calendar.d.ts

@@ -1,48 +1,2 @@
-import { LitElement, PropertyValues, CSSResultGroup } from 'lit';
-import { CalendarData } from './types.js';
-/**
- * PdCalendar displays monthly view with information (selectable day cell).
- *
- * @fires change-month
- * @fires select-date
- * @fires mouse-enter-date
- * @fires mouse-leave-date
- */
-export declare class PdCalendar extends LitElement {
-    refDate?: Date;
-    selectableDates: boolean;
-    withYearPopup: string[];
-    withWheelNavigation: boolean;
-    withTouchNavigation: boolean;
-    showSelection: boolean;
-    hideWeekend: boolean;
-    prevMonthConstraint: number;
-    nextMonthConstraint: number;
-    data: CalendarData;
-    numberClass: string;
-    private _viewType;
-    private _currentDate;
-    private _wheelDelta;
-    private _monthName;
-    private _year;
-    private _numberOfDays;
-    private _daysFromPreviousMonth;
-    private _currentMonthNavNr;
-    static styles: CSSResultGroup;
-    connectedCallback(): void;
-    update(changedProperties: PropertyValues<this>): void;
-    render(): import('lit-html').TemplateResult<1>;
-    private renderMonthCalendar;
-    private _openYearPopup;
-    private _getWeekDays;
-    private _nextMonth;
-    private _previousMonth;
-    private _wheelEvent;
-    private _touchStartEvent;
-    private _touchEndEvent;
-    private _initFromDate;
-    private static _getPreviousMonthDays;
-    private _checkNextMonthConstraint;
-    private _checkPrevMonthConstraint;
-}
-//# sourceMappingURL=pd-calendar.d.ts.map
+export * from './pd-calendar/pd-calendar'
+export {}