tyrell-components 1.0.0-TC45 → 1.0.0-TC46

package/lib/components/calendar-month.js

@@ -1,57 +1,11 @@
-/**
- * TyCalendarMonth Web Component
- * PORTED FROM: cljs/ty/components/calendar_month.cljs
- *
- * A stateless, property-driven calendar month renderer with customizable
- * day content and styling.
- *
- * Features:
- * - 42-day grid (6 weeks × 7 days) with Monday-first ordering
- * - Localized weekday headers
- * - Custom day content rendering via dayContentFn
- * - Custom day classes via dayClassesFn
- * - Custom CSS injection via customCSS
- * - Responsive width system (width, minWidth, maxWidth)
- * - Rich day-click events with full context
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ty-calendar-month
- *   display-year="2025"
- *   display-month="10"
- *   locale="en-US">
- * </ty-calendar-month>
- *
- * <!-- With custom rendering -->
- * <ty-calendar-month id="custom"></ty-calendar-month>
- * <script type="module">
- *   const cal = document.getElementById('custom');
- *   cal.dayContentFn = (ctx) => {
- *     const el = document.createElement('div');
- *     el.textContent = ctx.dayInMonth;
- *     return el;
- *   };
- * </script>
- * ```
- */
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
 import { calendarMonthStyles, calendarMonthCustomFlavorCss } from '../styles/calendar-month.js';
 import { getCalendarMonthDays, getLocalizedWeekdays, parseISODate } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
-// ============================================================================
-// Default Render Functions
-// ============================================================================
-/**
- * Default day content renderer - just the day number
- */
 function defaultDayContent(dayContext) {
     return dayContext.dayInMonth.toString();
 }
-/**
- * Default day classes based on day context
- */
 function getDefaultDayClasses(dayContext) {
     const classes = ['calendar-day'];
     if (dayContext.today)
@@ -64,19 +18,9 @@ function getDefaultDayClasses(dayContext) {
         classes.push('selected');
     return classes;
 }
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Check if value is a DOM element
- */
 function isDOMElement(value) {
     return value instanceof HTMLElement;
 }
-/**
- * ISO date string ("YYYY-MM-DD") → UTC-midnight timestamp, matching
- * DayContext.value semantics. null when unset/invalid.
- */
 function isoToUTCTimestamp(iso) {
     if (!iso)
         return null;
@@ -85,31 +29,16 @@ function isoToUTCTimestamp(iso) {
         return null;
     return Date.UTC(parsed.year, parsed.month - 1, parsed.day);
 }
-/**
- * Normalize size value - add 'px' if just a number
- */
 function normalizeSizeValue(value) {
     if (!value || value === '')
         return null;
     const strValue = String(value);
-    // If it's just a number, add 'px'
     if (/^\d+(\.\d+)?$/.test(strValue)) {
         return `${strValue}px`;
     }
-    // Otherwise use as-is (supports %, rem, vw, etc.)
     return strValue;
 }
-// ============================================================================
-// Component Implementation
-// ============================================================================
-/**
- * TyCalendarMonth Web Component
- */
 export class TyCalendarMonth extends HTMLElement {
-    /**
-     * Observed attributes (minimal - mainly for debugging)
-     * Properties are the primary API
-     */
     static get observedAttributes() {
         return ['locale', 'size', 'min', 'max', 'flavor'];
     }
@@ -118,25 +47,14 @@ export class TyCalendarMonth extends HTMLElement {
         this._locale = 'en-US';
         this._size = 'md';
         this._customFlavorSheet = null;
-        // ARIA grid roving-tabindex state — index into the flat 42-day array.
-        // null means "not yet resolved"; render() picks a sensible default
-        // (selected day, else today, else the 1st rendered day) and persists it
-        // across re-renders so keyboard focus survives unrelated prop changes.
-        // Reset to null on month/year navigation (see the property setters below)
-        // so the new month gets a fresh default instead of a stale index.
         this._focusedIndex = null;
         this._cellElements = [];
-        // Initialize with current date
         const today = new Date();
         this._displayYear = today.getFullYear();
-        this._displayMonth = today.getMonth() + 1; // 1-based month
+        this._displayMonth = today.getMonth() + 1;
         this.attachShadow({ mode: 'open' });
     }
-    // ==========================================================================
-    // Lifecycle Methods
-    // ==========================================================================
     connectedCallback() {
-        // Set defaults if not already set
         if (!this._displayMonth) {
             this._displayMonth = new Date().getMonth() + 1;
         }
@@ -146,24 +64,20 @@ export class TyCalendarMonth extends HTMLElement {
         if (!this._locale) {
             this._locale = this.getAttribute('locale') || 'en-US';
         }
-        // Read size attribute if present
         const sizeAttr = this.getAttribute('size');
         if (sizeAttr && (sizeAttr === 'sm' || sizeAttr === 'md' || sizeAttr === 'lg')) {
             this._size = sizeAttr;
         }
-        // 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;
         }
-        // Setup locale observer to watch for ancestor lang changes
         this._localeObserver = observeLocaleChanges(this, () => {
             this.render();
         });
@@ -171,7 +85,6 @@ export class TyCalendarMonth extends HTMLElement {
         this.render();
     }
     disconnectedCallback() {
-        // Cleanup locale observer
         if (this._localeObserver) {
             this._localeObserver();
             this._localeObserver = undefined;
@@ -196,17 +109,9 @@ export class TyCalendarMonth extends HTMLElement {
             this._syncCustomFlavor();
         }
     }
-    /**
-     * Custom (non-built-in) flavors — the `flavor` attribute itself drives
-     * built-in flavors directly via `:host([flavor="X"])` CSS, no JS needed.
-     * See utils/flavor-sheet.ts.
-     */
     _syncCustomFlavor() {
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getAttribute('flavor'), ({ base }) => calendarMonthCustomFlavorCss(base));
     }
-    // ==========================================================================
-    // Property Getters/Setters
-    // ==========================================================================
     get displayYear() {
         return this._displayYear;
     }
@@ -327,12 +232,6 @@ export class TyCalendarMonth extends HTMLElement {
             this.render();
         }
     }
-    // ==========================================================================
-    // Width Property System
-    // ==========================================================================
-    /**
-     * Apply width-related properties as CSS custom properties
-     */
     applyWidthProperties() {
         const normalizedWidth = normalizeSizeValue(this._width);
         const normalizedMinWidth = normalizeSizeValue(this._minWidth);
@@ -356,9 +255,6 @@ export class TyCalendarMonth extends HTMLElement {
             this.style.removeProperty('--calendar-max-width');
         }
     }
-    /**
-     * Apply custom CSS to shadow root
-     */
     applyCustomCSS() {
         if (!this._customCSS || !this.shadowRoot)
             return;
@@ -367,22 +263,9 @@ export class TyCalendarMonth extends HTMLElement {
             this.shadowRoot.adoptedStyleSheets = [...existing, this._customCSS];
         }
     }
-    // ==========================================================================
-    // Public Methods
-    // ==========================================================================
-    /**
-     * Force re-render of the calendar month
-     * Useful when external data changes (e.g., async event loading)
-     */
     refresh() {
         this.render();
     }
-    // ==========================================================================
-    // Event Dispatching
-    // ==========================================================================
-    /**
-     * Dispatch day-click custom event with day context
-     */
     dispatchDayClick(dayContext, _domEvent) {
         const detail = {
             dayContext,
@@ -395,7 +278,6 @@ export class TyCalendarMonth extends HTMLElement {
             isWeekend: dayContext.weekend,
             isOtherMonth: dayContext.otherMonth,
         };
-        // Dispatch both 'day-click' and 'day-select' (alias)
         for (const eventType of ['day-click', 'day-select']) {
             const event = new CustomEvent(eventType, {
                 detail,
@@ -405,35 +287,19 @@ export class TyCalendarMonth extends HTMLElement {
             this.dispatchEvent(event);
         }
     }
-    // ==========================================================================
-    // Rendering
-    // ==========================================================================
-    /**
-     * Render a single day cell
-     */
-    /**
-     * WAI-ARIA grid pattern: gridcell + roving tabindex (exactly one cell in
-     * the whole grid is tabindex="0" at a time — the rest are -1, so Tab
-     * enters/exits the grid in one hop and arrow keys move focus inside it).
-     * Disabled days are excluded from the roving set entirely.
-     */
     renderDayCell(dayContext, disabled, isRoving) {
         const dayElement = document.createElement('div');
-        // Get content using custom or default function
         const content = this._dayContentFn
             ? this._dayContentFn(dayContext)
             : defaultDayContent(dayContext);
-        // STRICT DOM-ONLY CHECK for custom functions
         if (this._dayContentFn && content && !isDOMElement(content) && typeof content !== 'string') {
             throw new Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof content}. ` +
                 `Use document.createElement() to create DOM elements.`);
         }
-        // Apply default classes
         const classes = getDefaultDayClasses(dayContext);
         if (disabled)
             classes.push('disabled');
         dayElement.className = classes.join(' ');
-        // Set content
         if (typeof content === 'string') {
             dayElement.textContent = content;
         }
@@ -452,7 +318,6 @@ export class TyCalendarMonth extends HTMLElement {
         }
         else {
             dayElement.setAttribute('tabindex', isRoving ? '0' : '-1');
-            // Add click handler (disabled days don't emit)
             dayElement.addEventListener('pointerdown', (event) => {
                 event.preventDefault();
                 this.dispatchDayClick(dayContext, event);
@@ -467,42 +332,30 @@ export class TyCalendarMonth extends HTMLElement {
         }
         return dayElement;
     }
-    /**
-     * Main render function - property-based approach
-     */
     render() {
         const root = this.shadowRoot;
         if (!root)
             return;
-        // Ensure styles are loaded
         ensureStyles(root, { css: calendarMonthStyles, id: 'ty-calendar-month' });
-        // Apply custom CSS if provided
         this.applyCustomCSS();
-        // Apply width properties
         this.applyWidthProperties();
-        // Convert timestamp to selection info
         let selection;
         if (this._value) {
             const date = new Date(this._value);
             selection = {
                 year: date.getFullYear(),
-                month: date.getMonth() + 1, // Convert to 1-based
+                month: date.getMonth() + 1,
                 day: date.getDate()
             };
         }
-        // Generate calendar days with selection info
         const days = getCalendarMonthDays(this._displayYear, this._displayMonth, selection);
-        // Get localized weekday names
         const weekdays = getLocalizedWeekdays(this._locale, 'short');
-        // Clear and rebuild
         root.innerHTML = '';
-        // Create unified flex container
         const calendarContainer = document.createElement('div');
         calendarContainer.className = `calendar-flex-container calendar-size-${this._size}`;
         calendarContainer.setAttribute('role', 'grid');
         calendarContainer.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { month: 'long', year: 'numeric' })
             .format(new Date(this._displayYear, this._displayMonth - 1, 1)));
-        // Create header row with weekday names
         const headerRow = document.createElement('div');
         headerRow.className = 'calendar-row calendar-header-row';
         headerRow.setAttribute('role', 'row');
@@ -514,17 +367,12 @@ export class TyCalendarMonth extends HTMLElement {
             headerRow.appendChild(headerCell);
         });
         calendarContainer.appendChild(headerRow);
-        // Create day rows (6 weeks of 7 days each)
         const dayWeeks = [];
         for (let i = 0; i < 42; i += 7) {
             dayWeeks.push(days.slice(i, i + 7));
         }
-        // Bounds for disabling days (UTC-midnight, same space as DayContext.value)
         const minTs = isoToUTCTimestamp(this._min);
         const maxTs = isoToUTCTimestamp(this._max);
-        // Roving-tabindex target: keep the persisted index if still valid and
-        // not disabled, else fall back to selected day, else today, else the
-        // first rendered day — always something focusable exists in the grid.
         const disabledAt = (i) => {
             const v = days[i].value;
             return (minTs !== null && v < minTs) || (maxTs !== null && v > maxTs);
@@ -550,7 +398,6 @@ export class TyCalendarMonth extends HTMLElement {
                 const disabled = (minTs !== null && dayContext.value < minTs) ||
                     (maxTs !== null && dayContext.value > maxTs);
                 const dayCell = this.renderDayCell(dayContext, disabled, flatIndex === this._focusedIndex);
-                // Add unified cell classes for flex layout
                 dayCell.className = `${dayCell.className} calendar-cell calendar-day-cell`;
                 dayRow.appendChild(dayCell);
                 this._cellElements[flatIndex] = dayCell;
@@ -558,13 +405,6 @@ export class TyCalendarMonth extends HTMLElement {
             });
             calendarContainer.appendChild(dayRow);
         });
-        // Arrow-key roving-tabindex navigation: Left/Right move a day,
-        // Up/Down move a week — pure index arithmetic works because `days` is a
-        // flat, chronologically-ordered 42-cell array (Monday-first weeks), so
-        // index+1 is always the next calendar day and index+7 the next week.
-        // Delegated on the grid (one listener, not 42) — this component is
-        // stateless about which month is shown, so moving past the rendered
-        // 42-day range just clamps at the edge rather than crossing months.
         calendarContainer.addEventListener('keydown', (event) => {
             const ke = event;
             const delta = ke.key === 'ArrowLeft' ? -1 :
@@ -590,8 +430,6 @@ export class TyCalendarMonth extends HTMLElement {
         root.appendChild(calendarContainer);
     }
 }
-// Register the custom element
 if (!customElements.get('ty-calendar-month')) {
     customElements.define('ty-calendar-month', TyCalendarMonth);
 }
-//# sourceMappingURL=calendar-month.js.map

package/lib/components/calendar-navigation.d.ts

@@ -1,36 +1,7 @@
 /**
- * TyCalendarNavigation Web Component
- * PORTED FROM: cljs/ty/components/calendar_navigation.cljs
- *
- * A pure presentation component for calendar month/year navigation.
- * Stateless - all state comes from properties, changes emitted via events.
- *
- * Features:
- * - Year/Month navigation (prev/next month, prev/next year)
- * - Localized month name display
- * - Custom event emission on navigation
- * - Property-driven API (no internal state)
- * - Inline SVG icons
- * - Shadow DOM encapsulation
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ty-calendar-navigation
- *   display-month="10"
- *   display-year="2025"
- *   locale="en-US">
- * </ty-calendar-navigation>
- *
- * <!-- Listen for changes -->
- * <script type="module">
- *   const nav = document.querySelector('ty-calendar-navigation');
- *   nav.addEventListener('change', (e) => {
- *     console.log('New month:', e.detail.month);
- *     console.log('New year:', e.detail.year);
- *   });
- * </script>
- * ```
+ * TyCalendarNavigation Web Component — pure presentation for calendar
+ * month/year navigation. Stateless: all state comes from properties,
+ * changes are emitted via events.
  */
 import { TyComponent } from '../base/ty-component.js';
 import type { PropertyChange } from '../utils/property-manager.js';
@@ -98,13 +69,7 @@ export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
     private _state;
     private _localeObserver?;
     constructor();
-    /**
-     * Called when component connects to DOM
-     */
     protected onConnect(): void;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
     /**
      * Called when properties change
@@ -125,9 +90,6 @@ export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
     set min(value: string);
     get max(): string;
     set max(value: string);
-    /**
-     * Emit change event with new month/year
-     */
     private emitChangeEvent;
     /**
      * Month index (year * 12 + month - 1) — flat, comparable month math.
@@ -150,14 +112,7 @@ export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
      * True when navigating by deltaMonths can't move the display (bound reached)
      */
     private isNavDisabled;
-    /**
-     * Create navigation button
-     */
     private createButton;
-    /**
-     * Main render function
-     */
     protected render(): void;
 }
 export {};
-//# sourceMappingURL=calendar-navigation.d.ts.map