/** * 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 * * * * * *
* * *
* * * * * ``` */ 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