@progressive-development/pd-calendar 0.6.8 → 1.0.0

package/dist/pd-slot-picker/pd-slot-cell/PdSlotCell.js

@@ -0,0 +1,188 @@
+import { css, nothing, 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 PdSlotCell = class extends PdBaseCell {
+  constructor() {
+    super(...arguments);
+    this.index = 0;
+  }
+  render() {
+    const timeInfo = this._formatTime();
+    const cellClasses = this.category ? "slot-cell categorized" : "slot-cell";
+    const style = this._getCategoryStyle(
+      "--pd-slot-cell-category-bg-col",
+      "--pd-slot-cell-category-text-col"
+    );
+    return html`
+      <div
+        class="${cellClasses}"
+        style="${style}"
+        data-date="${this.key}"
+        @click="${this._handleClick}"
+        @keydown="${this._handleKeyDown}"
+      >
+        ${timeInfo ? html`<span class="time">${timeInfo}</span>` : ""}
+        <div class="content-group">
+          ${this.title ? html`<span class="title">${this.title}</span>` : ""}
+          ${this.desc ? html`<span class="description">${this.desc}</span>` : ""}
+        </div>
+        ${this.capacity != null ? html`<span class="availability"
+              >${Math.max(0, this.capacity - (this.booked ?? 0))}/${this.capacity}</span
+            >` : nothing}
+      </div>
+    `;
+  }
+  _handleSelect() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("select-slot", {
+        detail: {
+          dateKey: this.key,
+          startTime: this.startTime,
+          endTime: this.endTime,
+          index: this.index
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleClick() {
+    this._handleSelect();
+  }
+};
+PdSlotCell.styles = [
+  css`
+      :host {
+        display: block;
+      }
+
+      .slot-cell {
+        display: flex;
+        align-items: center;
+        gap: var(--pd-spacing-sm, 0.5rem);
+        padding: var(--pd-spacing-sm, 0.5rem) var(--pd-spacing-md, 1rem);
+        background-color: var(
+          --pd-slot-cell-bg-col,
+          var(--pd-default-lightest-col, #f9fafb)
+        );
+        border-radius: var(--pd-radius-sm, 4px);
+        cursor: pointer;
+        transition: background-color 0.15s ease;
+      }
+
+      .slot-cell:hover {
+        background-color: var(
+          --pd-slot-cell-bg-col-hover,
+          var(--pd-default-light-col, #f3f4f6)
+        );
+      }
+
+      :host([selected]) .slot-cell {
+        background-color: var(
+          --pd-slot-cell-selected-bg-col,
+          var(--pd-default-success-light-col, #dcfce7)
+        );
+        border-left: 3px solid
+          var(
+            --pd-slot-cell-selected-border-col,
+            var(--pd-default-success-col, #22c55e)
+          );
+      }
+
+      :host([disabled]) .slot-cell {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      /* Categorized cells - colors set via inline style from category config */
+      .slot-cell.categorized {
+        background-color: var(
+          --pd-slot-cell-category-bg-col,
+          var(--pd-default-success-light-col, #dcfce7)
+        );
+      }
+
+      .slot-cell.categorized .time,
+      .slot-cell.categorized .title,
+      .slot-cell.categorized .description {
+        color: var(--pd-slot-cell-category-text-col);
+      }
+
+      .time {
+        font-size: var(--pd-slot-cell-time-size, 0.95rem);
+        font-weight: 600;
+        color: var(
+          --pd-slot-cell-time-col,
+          var(--pd-default-font-col, #374151)
+        );
+        white-space: nowrap;
+        min-width: 5em;
+      }
+
+      .content-group {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+        gap: 2px;
+      }
+
+      .title {
+        font-size: var(--pd-slot-cell-title-size, 0.875rem);
+        font-weight: 500;
+        color: var(
+          --pd-slot-cell-title-col,
+          var(--pd-default-font-col, #111827)
+        );
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .description {
+        font-size: var(--pd-slot-cell-desc-size, 0.8rem);
+        color: var(
+          --pd-slot-cell-desc-col,
+          var(--pd-default-font-light-col, #6b7280)
+        );
+      }
+
+      .availability {
+        font-size: var(--pd-slot-cell-availability-size, 0.75rem);
+        color: var(
+          --pd-slot-cell-availability-col,
+          var(--pd-default-font-light-col, #6b7280)
+        );
+        white-space: nowrap;
+        margin-left: auto;
+      }
+
+      /* Focus styles for keyboard navigation */
+      :host(:focus-visible) .slot-cell {
+        outline: 2px solid
+          var(--pd-focus-ring-col, var(--pd-default-info-col, #3b82f6));
+        outline-offset: 2px;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], PdSlotCell.prototype, "index", 2);
+PdSlotCell = __decorateClass([
+  customElement("pd-slot-cell")
+], PdSlotCell);
+
+export { PdSlotCell };

package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.d.ts

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

package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-slot-cell.d.ts","sourceRoot":"","sources":["../../../src/pd-slot-picker/pd-slot-cell/pd-slot-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/pd-slot-picker/pd-slot-cell/pd-slot-cell.js

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

package/dist/pd-slot-picker/pd-slot-picker.d.ts

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

package/dist/pd-slot-picker/pd-slot-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-slot-picker.d.ts","sourceRoot":"","sources":["../../src/pd-slot-picker/pd-slot-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { CalendarData, CalendarConfig } from '../types.js';
+/**
+ * Story arguments interface for pd-slot-picker component.
+ * Maps to the component's public API.
+ */
+interface PdSlotPickerArgs {
+    /** Calendar data with slots per date */
+    data: CalendarData;
+    /** Calendar configuration including category definitions */
+    config?: CalendarConfig;
+    /** Whether weekends should be hidden */
+    hideWeekend: boolean;
+    /** Number of months allowed to navigate backwards (-1 = unlimited) */
+    prevMonthConstraint: number;
+    /** Number of months allowed to navigate forwards (-1 = unlimited) */
+    nextMonthConstraint: number;
+    /** Year selection popup values */
+    withYearPopup: string[];
+    /** Enable mouse wheel navigation between months */
+    withWheelNavigation: boolean;
+    /** Enable touch swipe navigation between months */
+    withTouchNavigation: boolean;
+}
+/**
+ * ## pd-slot-picker
+ *
+ * Appointment slot picker component (Calendly-style) that combines a monthly
+ * calendar view with a time slot list for booking appointments.
+ *
+ * ### Features
+ * - **Calendar + Slots**: Side-by-side layout (responsive flex-wrap)
+ * - **Day Selection**: Click a highlighted day to see its available time slots
+ * - **Slot Selection**: Click a time slot to select it (fires `select-slot` event)
+ * - **Categories**: Color-coded slot types via CalendarConfig
+ * - **Disabled Slots**: Mark already-booked slots as disabled
+ * - **Capacity Tracking**: Show remaining spots per slot, auto-disable when full
+ * - **Responsive**: Wraps to vertical layout on smaller screens
+ * - **Navigation Constraints**: Limit forward/backward month navigation
+ * - **Weekend Hiding**: Option to hide Saturday and Sunday
+ *
+ * ### Accessibility
+ * - Slot list uses `role="list"` with `role="listitem"` on each slot cell
+ * - Slot cells are focusable via `tabindex="0"`
+ * - Calendar keyboard navigation inherited from pd-calendar
+ * - Disabled slots are visually distinct and non-interactive
+ */
+declare const meta: Meta<PdSlotPickerArgs>;
+export default meta;
+type Story = StoryObj<PdSlotPickerArgs>;
+/** Default slot picker with appointment data. Click a highlighted day to see available time slots. */
+export declare const Default: Story;
+/** Slot picker without category colors -- simple uniform slot styling. */
+export declare const WithoutCategories: Story;
+/** Responsive layout behavior: side-by-side on wide screens, stacked on narrow screens. */
+export declare const ResponsiveLayout: Story;
+/** Mix of available and disabled (already booked) slots. */
+export declare const WithDisabledSlots: Story;
+/** Slots with capacity tracking -- shows remaining spots and auto-disables when full. */
+export declare const WithCapacity: Story;
+/** Many 15-minute slots to demonstrate the scrollable slot list behavior. */
+export declare const ManySlots: Story;
+/** Slot picker with hidden weekends and year popup. */
+export declare const HiddenWeekends: Story;
+/** CSS Custom Properties -- Branded and Redesigned slot picker variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-slot-picker.stories.d.ts.map

package/dist/pd-slot-picker/pd-slot-picker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-slot-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-slot-picker/pd-slot-picker.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMhE;;;GAGG;AACH,UAAU,gBAAgB;IACxB,wCAAwC;IACxC,IAAI,EAAE,YAAY,CAAC;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mDAAmD;IACnD,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AA4LD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA+EhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,sGAAsG;AACtG,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAMF,2FAA2F;AAC3F,eAAO,MAAM,gBAAgB,EAAE,KA+D9B,CAAC;AAMF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAuE/B,CAAC;AAMF,yFAAyF;AACzF,eAAO,MAAM,YAAY,EAAE,KAoJ1B,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,SAAS,EAAE,KA8CvB,CAAC;AAMF,uDAAuD;AACvD,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,KAyG3B,CAAC"}

package/dist/pd-slot-picker.d.ts

@@ -0,0 +1,2 @@
+export * from './pd-slot-picker/pd-slot-picker'
+export {}

package/dist/pd-slot-picker.js

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

package/dist/shared/PdBaseCell.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from 'lit';
+/**
+ * Abstract base class for all calendar cell components.
+ *
+ * Provides shared properties from `CalendarCellInfo` and common utility methods
+ * for category styling, time formatting, and keyboard accessibility.
+ *
+ * Subclasses must implement `_handleSelect()` for their specific selection behavior
+ * and provide their own `render()` and `static styles`.
+ */
+export declare abstract class PdBaseCell extends LitElement {
+    /** Date key in YYYY-MM-DD format. */
+    key: string;
+    /** Day number (1-31). */
+    dayNumber: number;
+    /** Weekday number (0=Sunday, 6=Saturday). */
+    weekDayNumber: number;
+    /** Title/info text (from CalendarCellInfo.info). */
+    title: string;
+    /** Description text (from CalendarCellInfo.desc). */
+    desc: string;
+    /** Start time for the event (e.g., "08:30"). */
+    startTime: string;
+    /** End time for the event (e.g., "14:30"). */
+    endTime: string;
+    /** Whether this is a full-day event. */
+    fullDay: boolean;
+    /** Maximum capacity for this slot (number of bookable spots). */
+    capacity?: number;
+    /** Number of already booked spots. */
+    booked?: number;
+    /** Category key (references CalendarConfig.categories). */
+    category: string;
+    /** Background color for the category (from CalendarCategoryConfig.color). */
+    categoryColor: string;
+    /** Text color for the category (from CalendarCategoryConfig.textColor). */
+    categoryTextColor: string;
+    /** Whether this cell is disabled (cannot be selected). */
+    disabled: boolean;
+    /** Whether this cell is selected. */
+    selected: boolean;
+    /**
+     * Builds inline style string for category colors.
+     * Each cell passes its own CSS variable names.
+     *
+     * @param bgVar - CSS variable name for category background color
+     * @param textVar - CSS variable name for category text color
+     */
+    protected _getCategoryStyle(bgVar: string, textVar: string): string;
+    /**
+     * Formats time info string based on startTime, endTime, fullDay.
+     *
+     * @param separator - Separator between start and end time. Default: `" - "`.
+     * @returns Formatted time string or empty string if no time info is set.
+     */
+    protected _formatTime(separator?: string): string;
+    /**
+     * Keyboard handler for Enter/Space key accessibility.
+     * Delegates to `_handleSelect()` which each cell implements.
+     */
+    protected _handleKeyDown(e: KeyboardEvent): void;
+    /**
+     * Called when the cell is activated (click or keyboard).
+     * Each cell implements its own selection behavior and event dispatching.
+     */
+    protected abstract _handleSelect(): void;
+}
+//# sourceMappingURL=PdBaseCell.d.ts.map

package/dist/shared/PdBaseCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdBaseCell.d.ts","sourceRoot":"","sources":["../../src/shared/PdBaseCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC;;;;;;;;GAQG;AACH,8BAAsB,UAAW,SAAQ,UAAU;IAKjD,qCAAqC;IAErC,GAAG,SAAM;IAET,yBAAyB;IAEzB,SAAS,SAAM;IAEf,6CAA6C;IAE7C,aAAa,SAAM;IAMnB,oDAAoD;IAEpD,KAAK,SAAM;IAEX,qDAAqD;IAErD,IAAI,SAAM;IAEV,gDAAgD;IAEhD,SAAS,SAAM;IAEf,8CAA8C;IAE9C,OAAO,SAAM;IAEb,wCAAwC;IAExC,OAAO,UAAS;IAMhB,iEAAiE;IAEjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,sCAAsC;IAEtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,2DAA2D;IAE3D,QAAQ,SAAM;IAEd,6EAA6E;IAE7E,aAAa,SAAM;IAEnB,2EAA2E;IAE3E,iBAAiB,SAAM;IAMvB,0DAA0D;IAE1D,QAAQ,UAAS;IAEjB,qCAAqC;IAErC,QAAQ,UAAS;IAMjB;;;;;;OAMG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAWnE;;;;;OAKG;IACH,SAAS,CAAC,WAAW,CAAC,SAAS,SAAQ,GAAG,MAAM;IAQhD;;;OAGG;IACH,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAOhD;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;CACzC"}

package/dist/shared/PdBaseCell.js

@@ -0,0 +1,120 @@
+import { LitElement } from 'lit';
+import { property } 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 PdBaseCell extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.key = "";
+    this.dayNumber = -1;
+    this.weekDayNumber = -1;
+    this.title = "";
+    this.desc = "";
+    this.startTime = "";
+    this.endTime = "";
+    this.fullDay = false;
+    this.category = "";
+    this.categoryColor = "";
+    this.categoryTextColor = "";
+    this.disabled = false;
+    this.selected = false;
+  }
+  // ============================================================================
+  // Protected Methods
+  // ============================================================================
+  /**
+   * Builds inline style string for category colors.
+   * Each cell passes its own CSS variable names.
+   *
+   * @param bgVar - CSS variable name for category background color
+   * @param textVar - CSS variable name for category text color
+   */
+  _getCategoryStyle(bgVar, textVar) {
+    const styles = [];
+    if (this.categoryColor) {
+      styles.push(`${bgVar}: ${this.categoryColor}`);
+    }
+    if (this.categoryTextColor) {
+      styles.push(`${textVar}: ${this.categoryTextColor}`);
+    }
+    return styles.join("; ");
+  }
+  /**
+   * Formats time info string based on startTime, endTime, fullDay.
+   *
+   * @param separator - Separator between start and end time. Default: `" - "`.
+   * @returns Formatted time string or empty string if no time info is set.
+   */
+  _formatTime(separator = " - ") {
+    if (this.fullDay) return "24h";
+    if (this.startTime && this.endTime)
+      return `${this.startTime}${separator}${this.endTime}`;
+    if (this.startTime) return this.startTime;
+    return "";
+  }
+  /**
+   * Keyboard handler for Enter/Space key accessibility.
+   * Delegates to `_handleSelect()` which each cell implements.
+   */
+  _handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._handleSelect();
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "key");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "dayNumber");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "weekDayNumber");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "title");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "desc");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "startTime");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "endTime");
+__decorateClass([
+  property({ type: Boolean })
+], PdBaseCell.prototype, "fullDay");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "capacity");
+__decorateClass([
+  property({ type: Number })
+], PdBaseCell.prototype, "booked");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "category");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "categoryColor");
+__decorateClass([
+  property({ type: String })
+], PdBaseCell.prototype, "categoryTextColor");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBaseCell.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdBaseCell.prototype, "selected");
+
+export { PdBaseCell };

package/dist/shared/PdBaseView.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { CalendarData, CalendarConfig, CalendarCategoryConfig } from '../types.js';
+/**
+ * Abstract base class for all calendar view components.
+ *
+ * Provides shared properties for data, config, and selection,
+ * plus a utility to resolve category configuration.
+ */
+export declare abstract class PdBaseView extends LitElement {
+    /** Calendar data with info per date key (YYYY-MM-DD). */
+    data: CalendarData;
+    /** Calendar configuration including category definitions. */
+    config?: CalendarConfig;
+    /** Reference date for initial calendar view. */
+    refDate?: Date;
+    /** Show selection highlight on selected date. */
+    showSelection: boolean;
+    /** Resolves a category key to its configuration. */
+    protected _resolveCategoryConfig(category?: string): CalendarCategoryConfig | undefined;
+    static baseStyles: CSSResultGroup;
+}
+//# sourceMappingURL=PdBaseView.d.ts.map

package/dist/shared/PdBaseView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdBaseView.d.ts","sourceRoot":"","sources":["../../src/shared/PdBaseView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,sBAAsB,EACvB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AACH,8BAAsB,UAAW,SAAQ,UAAU;IACjD,yDAAyD;IAEzD,IAAI,EAAE,YAAY,CAAM;IAExB,6DAA6D;IAE7D,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,gDAAgD;IAEhD,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,iDAAiD;IAEjD,aAAa,UAAS;IAEtB,oDAAoD;IACpD,SAAS,CAAC,sBAAsB,CAC9B,QAAQ,CAAC,EAAE,MAAM,GAChB,sBAAsB,GAAG,SAAS;IAKrC,MAAM,CAAC,UAAU,EAAE,cAAc,CAK/B;CACH"}

package/dist/shared/PdBaseView.js

@@ -0,0 +1,46 @@
+import { LitElement, css } from 'lit';
+import { property } 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 PdBaseView extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = {};
+    this.showSelection = false;
+  }
+  /** Resolves a category key to its configuration. */
+  _resolveCategoryConfig(category) {
+    if (!category) return void 0;
+    return this.config?.categories?.[category];
+  }
+  static {
+    this.baseStyles = css`
+    :host {
+      display: block;
+      container-type: inline-size;
+    }
+  `;
+  }
+}
+__decorateClass([
+  property({ type: Object })
+], PdBaseView.prototype, "data");
+__decorateClass([
+  property({ type: Object })
+], PdBaseView.prototype, "config");
+__decorateClass([
+  property({ type: Object })
+], PdBaseView.prototype, "refDate");
+__decorateClass([
+  property({ type: Boolean })
+], PdBaseView.prototype, "showSelection");
+
+export { PdBaseView };

package/dist/shared/PdCalendarPanelBase.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, nothing, CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * Abstract base class for calendar floating panels.
+ *
+ * Provides the shared panel shell: fixed positioning, auto-placement via
+ * `calculateFloatingPosition`, close-on-click-outside / Escape / scroll,
+ * and a consistent header with a close icon.
+ *
+ * Subclasses override `renderHeaderContent()` and `renderBody()`.
+ *
+ * @event close-panel - Fired when the panel should close.
+ */
+export declare abstract class PdCalendarPanelBase extends LitElement {
+    /** Anchor rect for positioning (from the clicked element). */
+    anchorRect?: DOMRect;
+    private _boundClickOutside;
+    private _boundKeyDown;
+    private _boundScroll;
+    static panelBaseStyles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    render(): TemplateResult | typeof nothing;
+    /** Override to render content inside the header (left of close icon). */
+    protected abstract renderHeaderContent(): TemplateResult | typeof import('lit').nothing;
+    /** Override to render the scrollable body content. */
+    protected abstract renderBody(): TemplateResult | typeof import('lit').nothing;
+    private _updatePosition;
+    protected _onClose(): void;
+    private _handleClickOutside;
+    private _handleKeyDown;
+    private _handleScroll;
+}
+//# sourceMappingURL=PdCalendarPanelBase.d.ts.map

package/dist/shared/PdCalendarPanelBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCalendarPanelBase.d.ts","sourceRoot":"","sources":["../../src/shared/PdCalendarPanelBase.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAGV,OAAO,EACP,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;GAUG;AACH,8BAAsB,mBAAoB,SAAQ,UAAU;IAC1D,8DAA8D;IAE9D,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,kBAAkB,CAAuC;IACjE,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,YAAY,CAAiC;IAErD,MAAM,CAAC,eAAe,EAAE,cAAc,CA2DpC;IAMO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAUjD,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAgBlD,yEAAyE;IACzE,SAAS,CAAC,QAAQ,CAAC,mBAAmB,IAClC,cAAc,GACd,cAAc,KAAK,EAAE,OAAO;IAEhC,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,UAAU,IACzB,cAAc,GACd,cAAc,KAAK,EAAE,OAAO;IAMhC,OAAO,CAAC,eAAe;IAuBvB,SAAS,CAAC,QAAQ,IAAI,IAAI;IAM1B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;CAGtB"}