tyrell-components 1.0.0-TC7

package/lib/components/calendar-navigation.js

@@ -0,0 +1,366 @@
+/**
+ * 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 } 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'/>
+<path d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'/>
+</svg>`;
+const CHEVRON_RIGHT_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'/>
+<path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/>
+</svg>`;
+const CHEVRONS_LEFT_SVG = `<?xml version='1.0' encoding='UTF-8'?>
+<svg width='24' viewBox='0 0 24 24' height='24' enable-background='new 0 0 24 24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>
+<g>
+<rect width='24' height='24' fill='none'/>
+</g>
+<g>
+<g>
+<polygon points='17.59,18 19,16.59 14.42,12 19,7.41 17.59,6 11.59,12'/>
+<polygon points='11,18 12.41,16.59 7.83,12 12.41,7.41 11,6 5,12'/>
+</g>
+</g>
+</svg>`;
+const CHEVRONS_RIGHT_SVG = `<?xml version='1.0' encoding='UTF-8'?>
+<svg width='24' viewBox='0 0 24 24' height='24' enable-background='new 0 0 24 24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>
+<g>
+<rect width='24' height='24' fill='none'/>
+</g>
+<g>
+<g>
+<polygon points='6.41,6 5,7.41 9.58,12 5,16.59 6.41,18 12.41,12'/>
+<polygon points='13,6 11.59,7.41 16.17,12 11.59,16.59 13,18 19,12'/>
+</g>
+</g>
+</svg>`;
+// ============================================================================
+// Component Implementation
+// ============================================================================
+/**
+ * TyCalendarNavigation Web Component
+ */
+export class TyCalendarNavigation extends TyComponent {
+    constructor() {
+        super(); // TyComponent handles attachShadow
+        // Initialize state with current date
+        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) {
+                case 'display-month':
+                    this._state.displayMonth = newValue;
+                    break;
+                case 'display-year':
+                    this._state.displayYear = newValue;
+                    break;
+                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');
+    }
+    set displayMonth(value) {
+        this.setProperty('display-month', value);
+    }
+    get displayYear() {
+        return this.getProperty('display-year');
+    }
+    set displayYear(value) {
+        this.setProperty('display-year', value);
+    }
+    get locale() {
+        // Use getEffectiveLocale to check ancestor lang attributes
+        return getEffectiveLocale(this, this.getProperty('locale'));
+    }
+    set locale(value) {
+        this.setProperty('locale', value);
+    }
+    get size() {
+        return this.getProperty('size');
+    }
+    set size(value) {
+        this.setProperty('size', value);
+    }
+    get width() {
+        return this.getProperty('width');
+    }
+    set width(value) {
+        this.setProperty('width', value);
+    }
+    // ==========================================================================
+    // Event Dispatching
+    // ==========================================================================
+    /**
+     * Emit change event with new month/year
+     */
+    emitChangeEvent(month, year) {
+        const detail = {
+            month,
+            year,
+        };
+        const event = new CustomEvent('change', {
+            detail,
+            bubbles: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(event);
+    }
+    // ==========================================================================
+    // Navigation Logic
+    // ==========================================================================
+    /**
+     * Navigate to previous/next month
+     * Handles year boundary crossing
+     */
+    navigateMonth(direction) {
+        const rawMonth = this._state.displayMonth + direction;
+        let newMonth;
+        let newYear;
+        if (rawMonth < 1) {
+            // Rolled back to previous year
+            newMonth = 12;
+            newYear = this._state.displayYear - 1;
+        }
+        else if (rawMonth > 12) {
+            // Rolled forward to next year
+            newMonth = 1;
+            newYear = this._state.displayYear + 1;
+        }
+        else {
+            newMonth = rawMonth;
+            newYear = this._state.displayYear;
+        }
+        this.emitChangeEvent(newMonth, newYear);
+    }
+    /**
+     * Navigate to previous/next year
+     */
+    navigateYear(direction) {
+        const newYear = this._state.displayYear + direction;
+        this.emitChangeEvent(this._state.displayMonth, newYear);
+    }
+    // ==========================================================================
+    // Rendering
+    // ==========================================================================
+    /**
+     * Create navigation button
+     */
+    createButton(className, title, svg, onClick) {
+        const button = document.createElement('button');
+        button.className = className;
+        button.title = title;
+        button.innerHTML = svg;
+        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);
+        }
+        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.navigateYear(-1)));
+        leftGroup.appendChild(this.createButton('nav-btn nav-month-prev', 'Previous month', CHEVRON_LEFT_SVG, () => this.navigateMonth(-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.navigateMonth(1)));
+        rightGroup.appendChild(this.createButton('nav-btn nav-year-next', 'Next year', CHEVRONS_RIGHT_SVG, () => this.navigateYear(1)));
+        // 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
+        validate: (v) => {
+            const num = Number(v);
+            return Number.isInteger(num) && num >= 1 && num <= 12;
+        },
+        coerce: (v) => {
+            const num = Number(v);
+            if (isNaN(num) || num < 1 || num > 12) {
+                console.warn(`[ty-calendar-navigation] Invalid month '${v}'. Using current month.`);
+                return new Date().getMonth() + 1;
+            }
+            return num;
+        }
+    },
+    'display-year': {
+        type: 'number',
+        visual: true,
+        default: () => new Date().getFullYear(),
+        validate: (v) => {
+            const num = Number(v);
+            return Number.isInteger(num) && num >= 1 && num <= 9999;
+        },
+        coerce: (v) => {
+            const num = Number(v);
+            if (isNaN(num) || num < 1 || num > 9999) {
+                console.warn(`[ty-calendar-navigation] Invalid year '${v}'. Using current year.`);
+                return new Date().getFullYear();
+            }
+            return num;
+        }
+    },
+    // Locale property
+    locale: {
+        type: 'string',
+        visual: true,
+        default: 'en-US'
+    },
+    // Size property
+    size: {
+        type: 'string',
+        visual: true,
+        default: 'md',
+        validate: (v) => ['sm', 'md', 'lg'].includes(v),
+        coerce: (v) => {
+            if (!['sm', 'md', 'lg'].includes(v)) {
+                console.warn(`[ty-calendar-navigation] Invalid size '${v}'. Using 'md'.`);
+                return 'md';
+            }
+            return v;
+        }
+    },
+    // Width property
+    width: {
+        type: 'string',
+        visual: true,
+        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-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-navigation.js","sourceRoot":"","sources":["../../src/components/calendar-navigation.ts"],"names":[],"mappings":"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"}

package/lib/components/calendar.d.ts

@@ -0,0 +1,166 @@
+/**
+ * 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 type { DayContentFn, CalendarSize } from './calendar-month.js';
+import type { DayContext } from '../utils/calendar-utils.js';
+/**
+ * Calendar change event detail (day selection)
+ */
+export interface CalendarChangeDetail {
+    year: number;
+    month: number;
+    day: number;
+    action: 'select';
+    source: 'day-click';
+    dayContext: DayContext;
+}
+/**
+ * Calendar navigate event detail (month/year change)
+ */
+export interface CalendarNavigateDetail {
+    month: number;
+    year: number;
+    action: 'navigate';
+    source: 'navigation';
+}
+/**
+ * TyCalendar Web Component
+ */
+export declare class TyCalendar extends HTMLElement {
+    private _state;
+    private _locale;
+    private _showNavigation;
+    private _stateless;
+    private _size;
+    private _width?;
+    private _dayContentFn?;
+    private _customCSS?;
+    private _navigation?;
+    private _monthDisplay?;
+    private _internals?;
+    private _localeObserver?;
+    /**
+     * Form-associated custom element
+     */
+    static formAssociated: boolean;
+    /**
+     * Observed attributes
+     */
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get year(): number | undefined;
+    set year(value: number | undefined);
+    get month(): number | undefined;
+    set month(value: number | undefined);
+    get day(): number | undefined;
+    set day(value: number | undefined);
+    get locale(): string;
+    set locale(value: string);
+    get showNavigation(): boolean;
+    set showNavigation(value: boolean);
+    get stateless(): boolean;
+    set stateless(value: boolean);
+    get size(): CalendarSize;
+    set size(value: CalendarSize);
+    get width(): string | undefined;
+    set width(value: string | undefined);
+    get dayContentFn(): DayContentFn | undefined;
+    set dayContentFn(fn: DayContentFn | undefined);
+    get customCSS(): CSSStyleSheet | undefined;
+    set customCSS(sheet: CSSStyleSheet | undefined);
+    get value(): string;
+    set value(isoDate: string);
+    /**
+     * 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;
+    /**
+     * 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

package/lib/components/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/components/calendar.ts"],"names":[],"mappings":"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"}