tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/calendar.js

@@ -1,121 +1,41 @@
-/**
- * TyCalendar Web Component
- * PORTED FROM: cljs/ty/components/calendar.cljs
- *
- * A complete calendar orchestration component that combines navigation and month display.
- * Manages selection state, form participation, and event coordination.
- *
- * Architecture:
- * - year/month/day HTML attributes for intuitive API
- * - Internal state management (private properties)
- * - Distributes properties to child components (navigation + month)
- * - Single 'change' event with complete day context
- * - Form participation via ElementInternals
- *
- * Features:
- * - Combines ty-calendar-navigation + ty-calendar-month
- * - Date selection with visual feedback
- * - Form integration (works with FormData)
- * - Custom render functions (dayContentFn)
- * - Custom CSS injection
- * - Automatic date validation
- * - Event coordination between components
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ty-calendar
- *   year="2025"
- *   month="10"
- *   day="15">
- * </ty-calendar>
- *
- * <!-- Form integration -->
- * <form>
- *   <ty-calendar name="booking-date"></ty-calendar>
- *   <button type="submit">Submit</button>
- * </form>
- *
- * <!-- With custom rendering -->
- * <ty-calendar id="custom"></ty-calendar>
- * <script type="module">
- *   const cal = document.getElementById('custom');
- *   cal.dayContentFn = (ctx) => {
- *     const el = document.createElement('div');
- *     el.textContent = ctx.dayInMonth;
- *     if (ctx.today) el.style.fontWeight = 'bold';
- *     return el;
- *   };
- * </script>
- * ```
- */
 import { ensureStyles } from '../utils/styles.js';
 import { calendarStyles } from '../styles/calendar.js';
-// Side-effect imports: register the child elements this component createElements
 import './calendar-month.js';
 import './calendar-navigation.js';
 import { parseISODate } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Get current date for defaults
- */
 function getCurrentDate() {
     const now = new Date();
     return {
         year: now.getFullYear(),
-        month: now.getMonth() + 1, // 1-based
+        month: now.getMonth() + 1,
         day: now.getDate(),
     };
 }
-/**
- * Validate and parse year from string
- */
 function parseYear(yearStr) {
     if (!yearStr || !/^\d{4}$/.test(yearStr))
         return null;
     return parseInt(yearStr, 10);
 }
-/**
- * Validate and parse month from string (1-12)
- */
 function parseMonth(monthStr) {
     if (!monthStr || !/^\d{1,2}$/.test(monthStr))
         return null;
     const month = parseInt(monthStr, 10);
     return month >= 1 && month <= 12 ? month : null;
 }
-/**
- * Validate and parse day from string (1-31, validated against month)
- */
 function parseDay(dayStr, year, month) {
     if (!dayStr || !/^\d{1,2}$/.test(dayStr))
         return null;
     const day = parseInt(dayStr, 10);
-    // Get days in month for validation
     const daysInMonth = new Date(year, month, 0).getDate();
     return day >= 1 && day <= daysInMonth ? day : null;
 }
-/**
- * Format date as ISO string (YYYY-MM-DD) for form submission
- */
 function formatDateISO(year, month, day) {
     const monthStr = month.toString().padStart(2, '0');
     const dayStr = day.toString().padStart(2, '0');
     return `${year}-${monthStr}-${dayStr}`;
 }
-// ============================================================================
-// Component Implementation
-// ============================================================================
-/**
- * TyCalendar Web Component
- */
 export class TyCalendar extends HTMLElement {
-    /**
-     * Observed attributes
-     */
     static get observedAttributes() {
         return ['year', 'month', 'day', 'show-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor'];
     }
@@ -124,44 +44,31 @@ export class TyCalendar extends HTMLElement {
         this._showNavigation = true;
         this._stateless = false;
         this._size = 'md';
-        this._flavor = 'primary'; // passed to month display only (nav stays neutral chrome)
-        // Initialize state with current date
+        this._flavor = 'primary';
         const current = getCurrentDate();
         this._state = {
             displayYear: current.year,
             displayMonth: current.month,
         };
         this.attachShadow({ mode: 'open' });
-        // Attach ElementInternals for form participation
         if ('attachInternals' in this) {
             this._internals = this.attachInternals();
         }
     }
-    // ==========================================================================
-    // Lifecycle Methods
-    // ==========================================================================
     connectedCallback() {
-        // Parse initial attributes
         this.initializeFromAttributes();
-        // ✅ CHECK: Properties set before custom element upgrade
-        // When scripts run before element is fully upgraded, properties are set as plain properties
-        // without triggering setters. We need to migrate them to private fields.
-        // Check for dayContentFn set before upgrade
         const plainDayContentFn = this.dayContentFn;
         if (plainDayContentFn && !this._dayContentFn) {
             this._dayContentFn = plainDayContentFn;
-            delete this.dayContentFn; // Clean up plain property
+            delete this.dayContentFn;
         }
-        // Check for customCSS set before upgrade
         const plainCustomCSS = this.customCSS;
         if (plainCustomCSS && !this._customCSS) {
             this._customCSS = plainCustomCSS;
-            delete this.customCSS; // Clean up plain property
+            delete this.customCSS;
         }
-        // Check for value set before upgrade
         const plainValue = this.value;
         if (plainValue && typeof plainValue === 'string' && plainValue !== this.value) {
-            // Parse and set the value properly
             const match = plainValue.match(/^(\d{4})-(\d{2})-(\d{2})$/);
             if (match) {
                 const year = parseInt(match[1], 10);
@@ -172,31 +79,25 @@ export class TyCalendar extends HTMLElement {
                 this._state.selectedDay = day;
                 this._state.displayYear = year;
                 this._state.displayMonth = month;
-                // Update attributes if not in stateless mode
                 if (!this._stateless) {
                     this.setAttribute('year', year.toString());
                     this.setAttribute('month', month.toString());
                     this.setAttribute('day', day.toString());
                 }
             }
-            delete this.value; // Clean up plain property
+            delete this.value;
         }
-        // Render the calendar
         this.render();
-        // Set initial form value if date is selected
         this.updateFormValue();
-        // Setup locale observer to watch for ancestor lang changes
         this._localeObserver = observeLocaleChanges(this, () => {
             this.render();
         });
     }
     disconnectedCallback() {
-        // Cleanup locale observer
         if (this._localeObserver) {
             this._localeObserver();
             this._localeObserver = undefined;
         }
-        // Cleanup references
         this._navigation = undefined;
         this._monthDisplay = undefined;
     }
@@ -217,17 +118,13 @@ export class TyCalendar extends HTMLElement {
                 break;
             case 'stateless':
                 this._stateless = newValue !== null && newValue !== 'false';
-                // No re-render needed, just changes behavior
                 break;
             case 'locale':
-                // Attribute is the source of truth — `get locale` resolves it via
-                // getEffectiveLocale; children just need a re-sync.
                 this.syncChildComponents();
                 break;
             case 'size':
                 if (newValue === 'sm' || newValue === 'md' || newValue === 'lg') {
                     this._size = newValue;
-                    // Clear width when size is set (mutually exclusive)
                     this._width = undefined;
                     this.removeAttribute('width');
                     this.syncChildComponents();
@@ -235,22 +132,20 @@ export class TyCalendar extends HTMLElement {
                 break;
             case 'width':
                 this._width = newValue || undefined;
-                // Clear size when width is set (mutually exclusive)
                 if (newValue) {
-                    this._size = 'md'; // Reset to default
+                    this._size = 'md';
                     this.removeAttribute('size');
                 }
                 this.syncChildComponents();
                 break;
             case 'name':
-                // Name change triggers form value update
                 this.updateFormValue();
                 break;
             case 'min':
             case 'max':
                 this[name === 'min' ? '_min' : '_max'] = newValue || undefined;
                 this.syncChildComponents();
-                this.updateValidity(); // bounds change can (in)validate current selection
+                this.updateValidity();
                 break;
             case 'flavor':
                 this._flavor = newValue || 'primary';
@@ -258,14 +153,10 @@ export class TyCalendar extends HTMLElement {
                 break;
         }
     }
-    // ==========================================================================
-    // Property Getters/Setters
-    // ==========================================================================
     get min() {
         return this._min;
     }
     set min(value) {
-        // Reflect to attribute; attributeChangedCallback syncs children
         if (value)
             this.setAttribute('min', value);
         else
@@ -294,13 +185,11 @@ export class TyCalendar extends HTMLElement {
     }
     set year(value) {
         if (value !== undefined) {
-            // In stateless mode, only update display
             if (this._stateless) {
                 this._state.displayYear = value;
                 this.setAttribute('year', value.toString());
             }
             else {
-                // In stateful mode, update both selection and display
                 this._state.selectedYear = value;
                 this._state.displayYear = value;
                 this.setAttribute('year', value.toString());
@@ -322,13 +211,11 @@ export class TyCalendar extends HTMLElement {
     }
     set month(value) {
         if (value !== undefined) {
-            // In stateless mode, only update display
             if (this._stateless) {
                 this._state.displayMonth = value;
                 this.setAttribute('month', value.toString());
             }
             else {
-                // In stateful mode, update both selection and display
                 this._state.selectedMonth = value;
                 this._state.displayMonth = value;
                 this.setAttribute('month', value.toString());
@@ -391,7 +278,6 @@ export class TyCalendar extends HTMLElement {
     set size(value) {
         if (this._size !== value) {
             this._size = value;
-            // Clear width when size is set (mutually exclusive)
             this._width = undefined;
             this.removeAttribute('width');
             this.setAttribute('size', value);
@@ -405,8 +291,7 @@ export class TyCalendar extends HTMLElement {
         if (this._width !== value) {
             this._width = value;
             if (value) {
-                // Clear size when width is set (mutually exclusive)
-                this._size = 'md'; // Reset to default
+                this._size = 'md';
                 this.removeAttribute('size');
                 this.setAttribute('width', value);
             }
@@ -439,11 +324,9 @@ export class TyCalendar extends HTMLElement {
     }
     set value(isoDate) {
         if (!isoDate) {
-            // Clear selection
             delete this._state.selectedYear;
             delete this._state.selectedMonth;
             delete this._state.selectedDay;
-            // In normal mode, also clear attributes
             if (!this._stateless) {
                 this.removeAttribute('year');
                 this.removeAttribute('month');
@@ -451,21 +334,16 @@ export class TyCalendar extends HTMLElement {
             }
         }
         else {
-            // Parse ISO date (YYYY-MM-DD)
             const match = isoDate.match(/^(\d{4})-(\d{2})-(\d{2})$/);
             if (match) {
                 const year = parseInt(match[1], 10);
                 const month = parseInt(match[2], 10);
                 const day = parseInt(match[3], 10);
-                // Update internal selection state
                 this._state.selectedYear = year;
                 this._state.selectedMonth = month;
                 this._state.selectedDay = day;
-                // Update display to show this month
                 this._state.displayYear = year;
                 this._state.displayMonth = month;
-                // In normal mode, update attributes
-                // In stateless mode, skip attribute updates (parent controls attributes)
                 if (!this._stateless) {
                     this.setAttribute('year', year.toString());
                     this.setAttribute('month', month.toString());
@@ -474,17 +352,10 @@ export class TyCalendar extends HTMLElement {
             }
         }
         this.syncChildComponents();
-        // In normal mode, update form value
         if (!this._stateless) {
             this.updateFormValue();
         }
     }
-    // ==========================================================================
-    // State Management
-    // ==========================================================================
-    /**
-     * Initialize state from HTML attributes on first load
-     */
     initializeFromAttributes() {
         const yearStr = this.getAttribute('year');
         const monthStr = this.getAttribute('month');
@@ -493,20 +364,16 @@ export class TyCalendar extends HTMLElement {
         const statelessStr = this.getAttribute('stateless');
         const sizeStr = this.getAttribute('size');
         const widthStr = this.getAttribute('width');
-        // Date bounds
         this._min = this.getAttribute('min') || undefined;
         this._max = this.getAttribute('max') || undefined;
-        // Parse year
         const year = parseYear(yearStr);
         if (year) {
             this._state.displayYear = year;
         }
-        // Parse month
         const month = parseMonth(monthStr);
         if (month) {
             this._state.displayMonth = month;
         }
-        // Parse day (only if year and month are valid)
         if (year && month) {
             const day = parseDay(dayStr, year, month);
             if (day) {
@@ -515,38 +382,29 @@ export class TyCalendar extends HTMLElement {
                 this._state.selectedDay = day;
             }
         }
-        // Show navigation
         if (showNavStr) {
             this._showNavigation = showNavStr !== 'false';
         }
-        // Stateless mode
         if (statelessStr !== null) {
             this._stateless = statelessStr !== 'false';
         }
-        // Size
         if (sizeStr && (sizeStr === 'sm' || sizeStr === 'md' || sizeStr === 'lg')) {
             this._size = sizeStr;
         }
-        // Width
         if (widthStr) {
             this._width = widthStr;
         }
     }
-    /**
-     * Sync state from changed attributes
-     */
     syncStateFromAttributes() {
         const yearStr = this.getAttribute('year');
         const monthStr = this.getAttribute('month');
         const dayStr = this.getAttribute('day');
         const year = parseYear(yearStr);
         const month = parseMonth(monthStr);
-        // Update display year/month
         if (year)
             this._state.displayYear = year;
         if (month)
             this._state.displayMonth = month;
-        // Update selection (only if all three are valid)
         if (year && month) {
             const day = parseDay(dayStr, year, month);
             if (day) {
@@ -555,24 +413,18 @@ export class TyCalendar extends HTMLElement {
                 this._state.selectedDay = day;
             }
             else {
-                // Clear selection if day is invalid
                 delete this._state.selectedYear;
                 delete this._state.selectedMonth;
                 delete this._state.selectedDay;
             }
         }
         else {
-            // Clear selection if year or month is invalid
             delete this._state.selectedYear;
             delete this._state.selectedMonth;
             delete this._state.selectedDay;
         }
     }
-    /**
-     * Update child components with current state
-     */
     syncChildComponents() {
-        // Update navigation
         if (this._navigation) {
             this._navigation.displayMonth = this._state.displayMonth;
             this._navigation.displayYear = this._state.displayYear;
@@ -580,10 +432,8 @@ export class TyCalendar extends HTMLElement {
             this._navigation.size = this._size;
             this._navigation.min = this._min ?? '';
             this._navigation.max = this._max ?? '';
-            // Always sync width (set or clear)
             this._navigation.width = this._width;
         }
-        // Update month display
         if (this._monthDisplay) {
             this._monthDisplay.displayMonth = this._state.displayMonth;
             this._monthDisplay.displayYear = this._state.displayYear;
@@ -592,17 +442,13 @@ export class TyCalendar extends HTMLElement {
             this._monthDisplay.min = this._min;
             this._monthDisplay.max = this._max;
             this._monthDisplay.flavor = this._flavor;
-            // Always sync width (set or clear)
             this._monthDisplay.width = this._width;
-            // Pass render functions
             if (this._dayContentFn) {
                 this._monthDisplay.dayContentFn = this._dayContentFn;
             }
-            // Pass custom CSS
             if (this._customCSS) {
                 this._monthDisplay.customCSS = this._customCSS;
             }
-            // Update selection value (convert to Date timestamp)
             const { selectedYear, selectedMonth, selectedDay } = this._state;
             if (selectedYear && selectedMonth && selectedDay) {
                 const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
@@ -613,11 +459,7 @@ export class TyCalendar extends HTMLElement {
             }
         }
     }
-    /**
-     * Update form value using ElementInternals
-     */
     updateFormValue() {
-        // Skip form participation in stateless mode
         if (this._stateless)
             return;
         if (!this._internals)
@@ -633,10 +475,6 @@ export class TyCalendar extends HTMLElement {
         }
         this.updateValidity();
     }
-    /**
-     * Selection outside [min, max] => rangeUnderflow/rangeOverflow.
-     * UI can't produce this (days are disabled), but programmatic values can.
-     */
     updateValidity() {
         if (!this._internals)
             return;
@@ -656,22 +494,13 @@ export class TyCalendar extends HTMLElement {
         }
         this._internals.setValidity({});
     }
-    // ==========================================================================
-    // Event Handlers
-    // ==========================================================================
-    /**
-     * Handle navigation change (month/year navigation)
-     */
     handleNavigationChange(event) {
         event.preventDefault();
         event.stopPropagation();
         const { month, year } = event.detail;
-        // Update display state
         this._state.displayMonth = month;
         this._state.displayYear = year;
-        // Sync child components
         this.syncChildComponents();
-        // Emit navigate event
         const navigateDetail = {
             month,
             year,
@@ -685,16 +514,11 @@ export class TyCalendar extends HTMLElement {
             cancelable: false,
         }));
     }
-    /**
-     * Handle day click (day selection)
-     */
     handleDayClick(event) {
         event.preventDefault();
         event.stopPropagation();
         const { dayContext, year, month, day } = event.detail;
-        // In stateless mode, just re-dispatch the event without updating internal state
         if (this._stateless) {
-            // Re-dispatch day-click event for parent to handle
             this.dispatchEvent(new CustomEvent('day-click', {
                 detail: event.detail,
                 bubbles: true,
@@ -703,21 +527,16 @@ export class TyCalendar extends HTMLElement {
             }));
             return;
         }
-        // Normal mode: update selection state
         this._state.selectedYear = year;
         this._state.selectedMonth = month;
         this._state.selectedDay = day;
         this._state.displayYear = year;
         this._state.displayMonth = month;
-        // Update HTML attributes
         this.setAttribute('year', year.toString());
         this.setAttribute('month', month.toString());
         this.setAttribute('day', day.toString());
-        // Update form value
         this.updateFormValue();
-        // Sync child components
         this.syncChildComponents();
-        // Emit change event
         const changeDetail = {
             year,
             month,
@@ -733,51 +552,29 @@ export class TyCalendar extends HTMLElement {
             cancelable: false,
         }));
     }
-    // ==========================================================================
-    // Public Methods
-    // ==========================================================================
-    /**
-     * Force re-render of the calendar
-     * Useful after updating dayContentFn or other dynamic properties
-     */
     refresh() {
         this.syncChildComponents();
-        // Force month display to re-render (for async data updates)
         if (this._monthDisplay && typeof this._monthDisplay.refresh === 'function') {
             this._monthDisplay.refresh();
         }
     }
-    // ==========================================================================
-    // Rendering
-    // ==========================================================================
-    /**
-     * Create navigation element
-     */
     createNavigation() {
         const nav = document.createElement('ty-calendar-navigation');
-        // Set properties
         nav.displayMonth = this._state.displayMonth;
         nav.displayYear = this._state.displayYear;
         nav.locale = this.locale;
         nav.size = this._size;
         nav.min = this._min ?? '';
         nav.max = this._max ?? '';
-        // Only set width if explicitly provided
         if (this._width) {
             nav.width = this._width;
         }
-        // Listen for change events
         nav.addEventListener('change', (e) => this.handleNavigationChange(e));
-        // Store reference
         this._navigation = nav;
         return nav;
     }
-    /**
-     * Create month display element
-     */
     createMonthDisplay() {
         const month = document.createElement('ty-calendar-month');
-        // Set properties
         month.displayMonth = this._state.displayMonth;
         month.displayYear = this._state.displayYear;
         month.locale = this.locale;
@@ -785,61 +582,42 @@ export class TyCalendar extends HTMLElement {
         month.min = this._min;
         month.max = this._max;
         month.flavor = this._flavor;
-        // Only set width if explicitly provided
         if (this._width) {
             month.width = this._width;
         }
-        // Set selection value if exists
         const { selectedYear, selectedMonth, selectedDay } = this._state;
         if (selectedYear && selectedMonth && selectedDay) {
             const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
             month.value = date.getTime();
         }
-        // Pass render functions
         if (this._dayContentFn) {
             month.dayContentFn = this._dayContentFn;
         }
-        // Pass custom CSS
         if (this._customCSS) {
             month.customCSS = this._customCSS;
         }
-        // Listen for day-click events
         month.addEventListener('day-click', (e) => this.handleDayClick(e));
-        // Store reference
         this._monthDisplay = month;
         return month;
     }
-    /**
-     * Main render function
-     */
     render() {
         const root = this.shadowRoot;
         if (!root)
             return;
-        // Ensure styles are loaded
         ensureStyles(root, { css: calendarStyles, id: 'ty-calendar' });
-        // Clear and rebuild
         root.innerHTML = '';
-        // Create main container
         const container = document.createElement('div');
         container.className = 'calendar-container';
-        // Add navigation if requested
         if (this._showNavigation) {
             const nav = this.createNavigation();
             container.appendChild(nav);
         }
-        // Add month display
         const month = this.createMonthDisplay();
         container.appendChild(month);
         root.appendChild(container);
     }
 }
-/**
- * Form-associated custom element
- */
 TyCalendar.formAssociated = true;
-// Register the custom element
 if (!customElements.get('ty-calendar')) {
     customElements.define('ty-calendar', TyCalendar);
 }
-//# sourceMappingURL=calendar.js.map