@progressive-development/pd-calendar 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-calendar",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Webcomponent for calendar",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "tslib": "^2.8.1",
     "@progressive-development/pd-shared-styles": "0.3.2",
     "@progressive-development/pd-icon": "1.0.2",
-    "@progressive-development/pd-forms": "1.0.2",
+    "@progressive-development/pd-forms": "1.0.3",
     "@progressive-development/pd-utils": "1.0.0"
   },
   "customElements": "custom-elements.json",

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

@@ -1,83 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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-datepicker/pd-date-picker.stories.d.ts

@@ -1,81 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-/**
- * Story arguments interface for pd-datepicker component.
- * Maps to the component's public API.
- */
-interface PdDatepickerArgs {
-    /** Field label */
-    label: string;
-    /** Placeholder text */
-    placeholder: string;
-    /** Whether the field is required */
-    required: boolean;
-    /** Whether the field is disabled */
-    disabled: boolean;
-    /** Whether to show time selection */
-    withTime: boolean;
-    /** Whether to enable date range selection */
-    dateRange: boolean;
-    /** Initial date value */
-    initialDate?: Date;
-    /** Date format string */
-    dateFormat: string;
-    /** Minimum allowed date (YYYY-MM-DD) */
-    min?: string;
-    /** Maximum allowed date (YYYY-MM-DD) */
-    max?: string;
-    /** Year selection popup values */
-    withYearPopup: string[];
-    /** Whether to hide today button */
-    hideToday: boolean;
-}
-/**
- * ## pd-datepicker
- *
- * A datepicker component for selecting dates with optional time and range support.
- * Opens a calendar popup on click and integrates seamlessly with pd-form-container
- * for validation.
- *
- * ### Features
- * - **Date Selection**: Click to open calendar popup for date selection
- * - **Time Selection**: Optional time picker with predefined time slots
- * - **Date Range**: Optional range selection for start and end dates
- * - **Year Popup**: Quick year navigation via dropdown
- * - **Min/Max Constraints**: Limit selectable date range with `min` and `max` properties
- * - **Disabled Days**: Disable specific dates via `disabledDays` array
- * - **Modal Mode**: Centered modal display for mobile devices (auto or forced)
- * - **Form Integration**: Works with pd-form-container for validation
- * - **Popup Positioning**: Automatically opens above or below based on viewport space
- *
- * ### Accessibility
- * - `aria-haspopup="dialog"` on the input field
- * - `aria-expanded` reflects popup open/close state
- * - `aria-controls` links input to popup
- * - `aria-modal="true"` on the calendar popup
- * - Keyboard: Enter/Space toggles popup, ArrowDown opens, Escape closes
- * - Focus returns to input when popup closes
- */
-declare const meta: Meta<PdDatepickerArgs>;
-export default meta;
-type Story = StoryObj<PdDatepickerArgs>;
-/** Default datepicker. Interactive via Controls panel. */
-export declare const Default: Story;
-/** All datepicker configurations at a glance. */
-export declare const AllVariants: Story;
-/** Datepicker with time selection -- date + time picker combination. */
-export declare const WithTime: Story;
-/** Datepicker for selecting a start and end date. */
-export declare const DateRange: Story;
-/** Different date format locales side by side. */
-export declare const Locales: Story;
-/** Date constraints with min/max properties, disabled days, and linked datepickers. */
-export declare const MinMaxDate: Story;
-/** Modal mode displays the calendar centered on screen with a backdrop overlay. */
-export declare const ModalMode: Story;
-/** Datepicker within a pd-form-container with validation. */
-export declare const InForm: Story;
-/** Tests automatic popup positioning based on available viewport space. */
-export declare const PopupPosition: Story;
-/** CSS Custom Properties -- Branded and Redesigned datepicker variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-date-picker.stories.d.ts.map

package/dist/pd-datepicker/pd-date-picker.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-date-picker.stories.d.ts","sourceRoot":"","sources":["../../src/pd-datepicker/pd-date-picker.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,6CAA6C,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAM5B;;;GAGG;AACH,UAAU,gBAAgB;IACxB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAoFhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,0DAA0D;AAC1D,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAMF,iDAAiD;AACjD,eAAO,MAAM,WAAW,EAAE,KAuEzB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,SAAS,EAAE,KA4BvB,CAAC;AAMF,kDAAkD;AAClD,eAAO,MAAM,OAAO,EAAE,KA4CrB,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,UAAU,EAAE,KAqGxB,CAAC;AAMF,mFAAmF;AACnF,eAAO,MAAM,SAAS,EAAE,KA8DvB,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,MAAM,EAAE,KA0EpB,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KAoC3B,CAAC;AAMF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,KA4G3B,CAAC"}

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

@@ -1,67 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}