tyrell-components 1.0.0-TC7

package/lib/components/calendar-month.js

@@ -0,0 +1,440 @@
+/**
+ * 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 { calendarMonthStyles } from '../styles/calendar-month.js';
+import { getCalendarMonthDays, getLocalizedWeekdays } 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)
+        classes.push('today');
+    if (dayContext.weekend)
+        classes.push('weekend');
+    if (dayContext.otherMonth)
+        classes.push('other-month');
+    if (dayContext.isSelected)
+        classes.push('selected');
+    return classes;
+}
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Check if value is a DOM element
+ */
+function isDOMElement(value) {
+    return value instanceof HTMLElement;
+}
+/**
+ * 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'];
+    }
+    constructor() {
+        super();
+        this._locale = 'en-US';
+        this._size = 'md';
+        // Initialize with current date
+        const today = new Date();
+        this._displayYear = today.getFullYear();
+        this._displayMonth = today.getMonth() + 1; // 1-based month
+        this.attachShadow({ mode: 'open' });
+    }
+    // ==========================================================================
+    // Lifecycle Methods
+    // ==========================================================================
+    connectedCallback() {
+        // Set defaults if not already set
+        if (!this._displayMonth) {
+            this._displayMonth = new Date().getMonth() + 1;
+        }
+        if (!this._displayYear) {
+            this._displayYear = new Date().getFullYear();
+        }
+        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
+        }
+        // Check for customCSS set before upgrade
+        const plainCustomCSS = this.customCSS;
+        if (plainCustomCSS && !this._customCSS) {
+            this._customCSS = plainCustomCSS;
+            delete this.customCSS; // Clean up plain property
+        }
+        // Setup locale observer to watch for ancestor lang changes
+        this._localeObserver = observeLocaleChanges(this, () => {
+            this.render();
+        });
+        this.render();
+    }
+    disconnectedCallback() {
+        // Cleanup locale observer
+        if (this._localeObserver) {
+            this._localeObserver();
+            this._localeObserver = undefined;
+        }
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === 'locale') {
+            this._locale = newValue || 'en-US';
+            this.render();
+        }
+        else if (name === 'size') {
+            if (newValue === 'sm' || newValue === 'md' || newValue === 'lg') {
+                this._size = newValue;
+                this.render();
+            }
+        }
+    }
+    // ==========================================================================
+    // Property Getters/Setters
+    // ==========================================================================
+    get displayYear() {
+        return this._displayYear;
+    }
+    set displayYear(value) {
+        if (this._displayYear !== value) {
+            this._displayYear = value;
+            this.render();
+        }
+    }
+    get displayMonth() {
+        return this._displayMonth;
+    }
+    set displayMonth(value) {
+        if (this._displayMonth !== value) {
+            this._displayMonth = value;
+            this.render();
+        }
+    }
+    get locale() {
+        return getEffectiveLocale(this, this.getAttribute('locale'));
+    }
+    set locale(value) {
+        if (this._locale !== value) {
+            this._locale = value;
+            this.render();
+        }
+    }
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        if (this._size !== value) {
+            this._size = value;
+            this.render();
+        }
+    }
+    get width() {
+        return this._width;
+    }
+    set width(value) {
+        if (this._width !== value) {
+            this._width = value;
+            this.applyWidthProperties();
+        }
+    }
+    get minWidth() {
+        return this._minWidth;
+    }
+    set minWidth(value) {
+        if (this._minWidth !== value) {
+            this._minWidth = value;
+            this.applyWidthProperties();
+        }
+    }
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    set maxWidth(value) {
+        if (this._maxWidth !== value) {
+            this._maxWidth = value;
+            this.applyWidthProperties();
+        }
+    }
+    get dayContentFn() {
+        return this._dayContentFn;
+    }
+    set dayContentFn(fn) {
+        if (this._dayContentFn !== fn) {
+            this._dayContentFn = fn;
+            this.render();
+        }
+    }
+    get customCSS() {
+        return this._customCSS;
+    }
+    set customCSS(sheet) {
+        if (this._customCSS !== sheet) {
+            this._customCSS = sheet;
+            this.applyCustomCSS();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set value(timestamp) {
+        const newValue = timestamp ?? undefined;
+        if (this._value !== newValue) {
+            this._value = newValue;
+            this.render();
+        }
+    }
+    // ==========================================================================
+    // Width Property System
+    // ==========================================================================
+    /**
+     * Apply width-related properties as CSS custom properties
+     */
+    applyWidthProperties() {
+        const normalizedWidth = normalizeSizeValue(this._width);
+        const normalizedMinWidth = normalizeSizeValue(this._minWidth);
+        const normalizedMaxWidth = normalizeSizeValue(this._maxWidth);
+        if (normalizedWidth) {
+            this.style.setProperty('--calendar-width', normalizedWidth);
+        }
+        else {
+            this.style.removeProperty('--calendar-width');
+        }
+        if (normalizedMinWidth) {
+            this.style.setProperty('--calendar-min-width', normalizedMinWidth);
+        }
+        else {
+            this.style.removeProperty('--calendar-min-width');
+        }
+        if (normalizedMaxWidth) {
+            this.style.setProperty('--calendar-max-width', normalizedMaxWidth);
+        }
+        else {
+            this.style.removeProperty('--calendar-max-width');
+        }
+    }
+    /**
+     * Apply custom CSS to shadow root
+     */
+    applyCustomCSS() {
+        if (!this._customCSS || !this.shadowRoot)
+            return;
+        const existing = this.shadowRoot.adoptedStyleSheets;
+        if (!existing.includes(this._customCSS)) {
+            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,
+            value: dayContext.value,
+            year: dayContext.year,
+            month: dayContext.month,
+            day: dayContext.dayInMonth,
+            isHoliday: dayContext.holiday,
+            isToday: dayContext.today,
+            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,
+                bubbles: true,
+                cancelable: true,
+            });
+            this.dispatchEvent(event);
+        }
+    }
+    // ==========================================================================
+    // Rendering
+    // ==========================================================================
+    /**
+     * Render a single day cell
+     */
+    renderDayCell(dayContext) {
+        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);
+        dayElement.className = classes.join(' ');
+        // Set content
+        if (typeof content === 'string') {
+            dayElement.textContent = content;
+        }
+        else if (isDOMElement(content)) {
+            dayElement.appendChild(content);
+        }
+        // Add click handler
+        dayElement.addEventListener('pointerdown', (event) => {
+            event.preventDefault();
+            this.dispatchDayClick(dayContext, event);
+        });
+        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
+                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}`;
+        // Create header row with weekday names
+        const headerRow = document.createElement('div');
+        headerRow.className = 'calendar-row calendar-header-row';
+        weekdays.forEach(weekday => {
+            const headerCell = document.createElement('div');
+            headerCell.className = 'calendar-cell calendar-header-cell';
+            headerCell.textContent = weekday;
+            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));
+        }
+        dayWeeks.forEach(week => {
+            const dayRow = document.createElement('div');
+            dayRow.className = 'calendar-row calendar-day-row';
+            week.forEach(dayContext => {
+                const dayCell = this.renderDayCell(dayContext);
+                // Add unified cell classes for flex layout
+                dayCell.className = `${dayCell.className} calendar-cell calendar-day-cell`;
+                dayRow.appendChild(dayCell);
+            });
+            calendarContainer.appendChild(dayRow);
+        });
+        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-month.js.map

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

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

@@ -0,0 +1,137 @@
+/**
+ * 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 { TyComponent } from '../base/ty-component.js';
+import type { PropertyChange } from '../utils/property-manager.js';
+/**
+ * Navigation change event detail
+ */
+export interface NavigationChangeDetail {
+    month: number;
+    year: number;
+}
+/**
+ * Internal navigation state (minimal - just for current display)
+ */
+interface NavigationState {
+    displayMonth: number;
+    displayYear: number;
+}
+/**
+ * TyCalendarNavigation Web Component
+ */
+export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
+    protected static properties: {
+        'display-month': {
+            type: "number";
+            visual: boolean;
+            default: () => number;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => number;
+        };
+        'display-year': {
+            type: "number";
+            visual: boolean;
+            default: () => number;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => number;
+        };
+        locale: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        size: {
+            type: "string";
+            visual: boolean;
+            default: string;
+            validate: (v: any) => boolean;
+            coerce: (v: any) => any;
+        };
+        width: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+    };
+    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
+     * Update internal state BEFORE render
+     */
+    protected onPropertiesChanged(changes: PropertyChange[]): void;
+    get displayMonth(): number;
+    set displayMonth(value: number);
+    get displayYear(): number;
+    set displayYear(value: number);
+    get locale(): string;
+    set locale(value: string);
+    get size(): 'sm' | 'md' | 'lg';
+    set size(value: 'sm' | 'md' | 'lg');
+    get width(): string;
+    set width(value: string);
+    /**
+     * Emit change event with new month/year
+     */
+    private emitChangeEvent;
+    /**
+     * Navigate to previous/next month
+     * Handles year boundary crossing
+     */
+    private navigateMonth;
+    /**
+     * Navigate to previous/next year
+     */
+    private navigateYear;
+    /**
+     * Create navigation button
+     */
+    private createButton;
+    /**
+     * Main render function
+     */
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=calendar-navigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/components/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAMH,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAMnE;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAgDD;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,WAAW,CAAC,eAAe,CAAC;IAIpE,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;0BAMT,GAAG;wBAIL,GAAG;;;;;;0BAaD,GAAG;wBAIL,GAAG;;;;;;;;;;;0BAsBD,GAAG;wBACL,GAAG;;;;;;;MAejB;IAKF,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,eAAe,CAAC,CAAa;;IAqBrC;;OAEG;IACH,SAAS,CAAC,SAAS,IAAI,IAAI;IAc3B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B;;;OAGG;IACH,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI;IAuB9D,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,IAAI,MAAM,IAAI,MAAM,CAGnB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,CAE7B;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,EAEjC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAMD;;OAEG;IACH,OAAO,CAAC,eAAe;IAmBvB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAsBrB;;OAEG;IACH,OAAO,CAAC,YAAY;IASpB;;OAEG;IACH,OAAO,CAAC,YAAY;IAcpB;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;CAyFzB"}