tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/calendar-navigation.js

@@ -1,45 +1,8 @@
-/**
- * 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>
- * ```
- */
 import { ensureStyles } from '../utils/styles.js';
 import { calendarNavigationStyles } from '../styles/calendar-navigation.js';
 import { getMonthName, parseISODate } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { TyComponent } from '../base/ty-component.js';
-// ============================================================================
-// SVG Icons (Material Design)
-// ============================================================================
 const CHEVRON_LEFT_SVG = `<?xml version='1.0' encoding='UTF-8'?>
 <svg width='24' viewBox='0 0 24 24' height='24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>
 <path fill='none' d='M0 0h24v24H0V0z'/>
@@ -74,56 +37,31 @@ const CHEVRONS_RIGHT_SVG = `<?xml version='1.0' encoding='UTF-8'?>
 </g>
 </g>
 </svg>`;
-// ============================================================================
-// Component Implementation
-// ============================================================================
-/**
- * TyCalendarNavigation Web Component
- */
 export class TyCalendarNavigation extends TyComponent {
     constructor() {
-        super(); // TyComponent handles attachShadow
-        // Initialize state with current date
+        super();
         const today = new Date();
         this._state = {
             displayMonth: today.getMonth() + 1,
             displayYear: today.getFullYear()
         };
-        // Initialize styles in shadow root
         const shadow = this.shadowRoot;
         ensureStyles(shadow, { css: calendarNavigationStyles, id: 'ty-calendar-navigation' });
     }
-    // ==========================================================================
-    // Lifecycle Hooks (TyComponent)
-    // ==========================================================================
-    /**
-     * Called when component connects to DOM
-     */
     onConnect() {
-        // Sync state from properties
         this._state.displayMonth = this.displayMonth;
         this._state.displayYear = this.displayYear;
-        // Setup locale observer to watch for ancestor lang changes
         this._localeObserver = observeLocaleChanges(this, () => {
             this.render();
         });
-        // Initial render
         this.render();
     }
-    /**
-     * Called when component disconnects from DOM
-     */
     onDisconnect() {
-        // Cleanup locale observer
         if (this._localeObserver) {
             this._localeObserver();
             this._localeObserver = undefined;
         }
     }
-    /**
-     * Called when properties change
-     * Update internal state BEFORE render
-     */
     onPropertiesChanged(changes) {
         for (const { name, newValue } of changes) {
             switch (name) {
@@ -136,15 +74,10 @@ export class TyCalendarNavigation extends TyComponent {
                 case 'locale':
                 case 'size':
                 case 'width':
-                    // These properties just affect rendering
-                    // TyComponent will call render() automatically for visual properties
                     break;
             }
         }
     }
-    // ==========================================================================
-    // Property Accessors - Simple wrappers using TyComponent
-    // ==========================================================================
     get displayMonth() {
         return this.getProperty('display-month');
     }
@@ -158,7 +91,6 @@ export class TyCalendarNavigation extends TyComponent {
         this.setProperty('display-year', value);
     }
     get locale() {
-        // Use getEffectiveLocale to check ancestor lang attributes
         return getEffectiveLocale(this, this.getProperty('locale'));
     }
     set locale(value) {
@@ -188,12 +120,6 @@ export class TyCalendarNavigation extends TyComponent {
     set max(value) {
         this.setProperty('max', value ?? '');
     }
-    // ==========================================================================
-    // Event Dispatching
-    // ==========================================================================
-    /**
-     * Emit change event with new month/year
-     */
     emitChangeEvent(month, year) {
         const detail = {
             month,
@@ -206,18 +132,9 @@ export class TyCalendarNavigation extends TyComponent {
         });
         this.dispatchEvent(event);
     }
-    // ==========================================================================
-    // Navigation Logic
-    // ==========================================================================
-    /**
-     * Month index (year * 12 + month - 1) — flat, comparable month math.
-     */
     static monthIndex(year, month) {
         return year * 12 + (month - 1);
     }
-    /**
-     * min/max as month indices (null when unset/invalid)
-     */
     boundIndices() {
         const min = parseISODate(this.min);
         const max = parseISODate(this.max);
@@ -226,9 +143,6 @@ export class TyCalendarNavigation extends TyComponent {
             maxIdx: max ? TyCalendarNavigation.monthIndex(max.year, max.month) : null,
         };
     }
-    /**
-     * Clamp a target month index to [min, max]
-     */
     clampIndex(idx) {
         const { minIdx, maxIdx } = this.boundIndices();
         if (minIdx !== null && idx < minIdx)
@@ -237,30 +151,17 @@ export class TyCalendarNavigation extends TyComponent {
             return maxIdx;
         return idx;
     }
-    /**
-     * Navigate by month/year delta, clamped to bounds.
-     * Year jumps near a bound land ON the bound month instead of overshooting.
-     */
     navigateBy(deltaMonths) {
         const current = TyCalendarNavigation.monthIndex(this._state.displayYear, this._state.displayMonth);
         const target = this.clampIndex(current + deltaMonths);
         if (target === current)
-            return; // Already at the bound
+            return;
         this.emitChangeEvent((target % 12) + 1, Math.floor(target / 12));
     }
-    /**
-     * True when navigating by deltaMonths can't move the display (bound reached)
-     */
     isNavDisabled(deltaMonths) {
         const current = TyCalendarNavigation.monthIndex(this._state.displayYear, this._state.displayMonth);
         return this.clampIndex(current + deltaMonths) === current;
     }
-    // ==========================================================================
-    // Rendering
-    // ==========================================================================
-    /**
-     * Create navigation button
-     */
     createButton(className, title, svg, onClick, disabled = false) {
         const button = document.createElement('button');
         button.className = className;
@@ -270,19 +171,13 @@ export class TyCalendarNavigation extends TyComponent {
         button.addEventListener('click', onClick);
         return button;
     }
-    /**
-     * Main render function
-     */
     render() {
         const root = this.shadowRoot;
         if (!root)
             return;
-        // Ensure styles are loaded
         ensureStyles(root, { css: calendarNavigationStyles, id: 'ty-calendar-navigation' });
-        // Apply size as data attribute for CSS targeting
         const size = this.size;
         this.setAttribute('data-size', size);
-        // Apply width property as CSS custom property
         const width = this.width;
         if (width) {
             this.style.setProperty('--nav-width', width);
@@ -290,46 +185,35 @@ export class TyCalendarNavigation extends TyComponent {
         else {
             this.style.removeProperty('--nav-width');
         }
-        // Get localized month name using current state
         const monthName = getMonthName(this._state.displayMonth, this.locale, 'long');
-        // Clear and rebuild
         root.innerHTML = '';
-        // Create main header container
         const header = document.createElement('div');
         header.className = 'calendar-navigation-header';
-        // Left group: [⟪ ‹]
         const leftGroup = document.createElement('div');
         leftGroup.className = 'nav-group nav-group-left';
         leftGroup.appendChild(this.createButton('nav-btn nav-year-prev', 'Previous year', CHEVRONS_LEFT_SVG, () => this.navigateBy(-12), this.isNavDisabled(-12)));
         leftGroup.appendChild(this.createButton('nav-btn nav-month-prev', 'Previous month', CHEVRON_LEFT_SVG, () => this.navigateBy(-1), this.isNavDisabled(-1)));
-        // Center group: [Month Year]
         const centerGroup = document.createElement('div');
         centerGroup.className = 'nav-group nav-group-center';
         const monthYearDisplay = document.createElement('div');
         monthYearDisplay.className = 'month-year-display';
         monthYearDisplay.textContent = `${monthName} ${this._state.displayYear}`;
         centerGroup.appendChild(monthYearDisplay);
-        // Right group: [› ⟫]
         const rightGroup = document.createElement('div');
         rightGroup.className = 'nav-group nav-group-right';
         rightGroup.appendChild(this.createButton('nav-btn nav-month-next', 'Next month', CHEVRON_RIGHT_SVG, () => this.navigateBy(1), this.isNavDisabled(1)));
         rightGroup.appendChild(this.createButton('nav-btn nav-year-next', 'Next year', CHEVRONS_RIGHT_SVG, () => this.navigateBy(12), this.isNavDisabled(12)));
-        // Assemble header
         header.appendChild(leftGroup);
         header.appendChild(centerGroup);
         header.appendChild(rightGroup);
         root.appendChild(header);
     }
 }
-// ============================================================================
-// PROPERTY CONFIGURATION - Single source of truth
-// ============================================================================
 TyCalendarNavigation.properties = {
-    // Display properties
     'display-month': {
         type: 'number',
         visual: true,
-        default: () => new Date().getMonth() + 1, // 1-based
+        default: () => new Date().getMonth() + 1,
         validate: (v) => {
             const num = Number(v);
             return Number.isInteger(num) && num >= 1 && num <= 12;
@@ -360,13 +244,11 @@ TyCalendarNavigation.properties = {
             return num;
         }
     },
-    // Locale property
     locale: {
         type: 'string',
         visual: true,
         default: 'en-US'
     },
-    // Size property
     size: {
         type: 'string',
         visual: true,
@@ -380,14 +262,11 @@ TyCalendarNavigation.properties = {
             return v;
         }
     },
-    // Width property
     width: {
         type: 'string',
         visual: true,
         default: ''
     },
-    // Navigation bounds — ISO dates. Buttons that would move the display
-    // entirely outside [min, max] months are disabled; year jumps clamp.
     min: {
         type: 'string',
         visual: true,
@@ -399,8 +278,6 @@ TyCalendarNavigation.properties = {
         default: ''
     }
 };
-// Register the custom element
 if (!customElements.get('ty-calendar-navigation')) {
     customElements.define('ty-calendar-navigation', TyCalendarNavigation);
 }
-//# sourceMappingURL=calendar-navigation.js.map

package/lib/components/calendar.d.ts

@@ -1,53 +1,7 @@
 /**
- * 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>
- * ```
+ * TyCalendar Web Component — orchestrates ty-calendar-navigation +
+ * ty-calendar-month: owns selection state, distributes properties to the
+ * children, and participates in forms via ElementInternals.
  */
 import './calendar-month.js';
 import './calendar-navigation.js';
@@ -91,13 +45,7 @@ export declare class TyCalendar extends HTMLElement {
     private _monthDisplay?;
     private _internals?;
     private _localeObserver?;
-    /**
-     * Form-associated custom element
-     */
     static formAssociated: boolean;
-    /**
-     * Observed attributes
-     */
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -135,47 +83,22 @@ export declare class TyCalendar extends HTMLElement {
      * Initialize state from HTML attributes on first load
      */
     private initializeFromAttributes;
-    /**
-     * Sync state from changed attributes
-     */
     private syncStateFromAttributes;
-    /**
-     * Update child components with current state
-     */
     private syncChildComponents;
-    /**
-     * Update form value using ElementInternals
-     */
     private updateFormValue;
     /**
      * Selection outside [min, max] => rangeUnderflow/rangeOverflow.
      * UI can't produce this (days are disabled), but programmatic values can.
      */
     private updateValidity;
-    /**
-     * Handle navigation change (month/year navigation)
-     */
     private handleNavigationChange;
-    /**
-     * Handle day click (day selection)
-     */
     private handleDayClick;
     /**
      * Force re-render of the calendar
      * Useful after updating dayContentFn or other dynamic properties
      */
     refresh(): void;
-    /**
-     * Create navigation element
-     */
     private createNavigation;
-    /**
-     * Create month display element
-     */
     private createMonthDisplay;
-    /**
-     * Main render function
-     */
     private render;
 }
-//# sourceMappingURL=calendar.d.ts.map