tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/calendar.js

@@ -5,619 +5,622 @@ import './calendar-navigation.js';
 import { parseISODate } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 function getCurrentDate() {
-    const now = new Date();
-    return {
-        year: now.getFullYear(),
-        month: now.getMonth() + 1,
-        day: now.getDate(),
-    };
+const now = new Date();
+return {
+year: now.getFullYear(),
+month: now.getMonth() + 1,
+day: now.getDate(),
+};
 }
 function parseYear(yearStr) {
-    if (!yearStr || !/^\d{4}$/.test(yearStr))
-        return null;
-    return parseInt(yearStr, 10);
+if (!yearStr || !/^\d{4}$/.test(yearStr))
+return null;
+return parseInt(yearStr, 10);
 }
 function parseMonth(monthStr) {
-    if (!monthStr || !/^\d{1,2}$/.test(monthStr))
-        return null;
-    const month = parseInt(monthStr, 10);
-    return month >= 1 && month <= 12 ? month : null;
+if (!monthStr || !/^\d{1,2}$/.test(monthStr))
+return null;
+const month = parseInt(monthStr, 10);
+return month >= 1 && month <= 12 ? month : null;
 }
 function parseDay(dayStr, year, month) {
-    if (!dayStr || !/^\d{1,2}$/.test(dayStr))
-        return null;
-    const day = parseInt(dayStr, 10);
-    const daysInMonth = new Date(year, month, 0).getDate();
-    return day >= 1 && day <= daysInMonth ? day : null;
+if (!dayStr || !/^\d{1,2}$/.test(dayStr))
+return null;
+const day = parseInt(dayStr, 10);
+const daysInMonth = new Date(year, month, 0).getDate();
+return day >= 1 && day <= daysInMonth ? day : null;
 }
 function formatDateISO(year, month, day) {
-    const monthStr = month.toString().padStart(2, '0');
-    const dayStr = day.toString().padStart(2, '0');
-    return `${year}-${monthStr}-${dayStr}`;
+const monthStr = month.toString().padStart(2, '0');
+const dayStr = day.toString().padStart(2, '0');
+return `${year}-${monthStr}-${dayStr}`;
 }
 export class TyCalendar extends HTMLElement {
-    static get observedAttributes() {
-        return ['year', 'month', 'day', 'show-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor'];
-    }
-    constructor() {
-        super();
-        this._showNavigation = true;
-        this._stateless = false;
-        this._size = 'md';
-        this._flavor = 'primary';
-        const current = getCurrentDate();
-        this._state = {
-            displayYear: current.year,
-            displayMonth: current.month,
-        };
-        this.attachShadow({ mode: 'open' });
-        if ('attachInternals' in this) {
-            this._internals = this.attachInternals();
-        }
-    }
-    connectedCallback() {
-        this.initializeFromAttributes();
-        const plainDayContentFn = this.dayContentFn;
-        if (plainDayContentFn && !this._dayContentFn) {
-            this._dayContentFn = plainDayContentFn;
-            delete this.dayContentFn;
-        }
-        const plainCustomCSS = this.customCSS;
-        if (plainCustomCSS && !this._customCSS) {
-            this._customCSS = plainCustomCSS;
-            delete this.customCSS;
-        }
-        const plainValue = this.value;
-        if (plainValue && typeof plainValue === 'string' && plainValue !== this.value) {
-            const match = plainValue.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-            if (match) {
-                const year = parseInt(match[1], 10);
-                const month = parseInt(match[2], 10);
-                const day = parseInt(match[3], 10);
-                this._state.selectedYear = year;
-                this._state.selectedMonth = month;
-                this._state.selectedDay = day;
-                this._state.displayYear = year;
-                this._state.displayMonth = month;
-                if (!this._stateless) {
-                    this.setAttribute('year', year.toString());
-                    this.setAttribute('month', month.toString());
-                    this.setAttribute('day', day.toString());
-                }
-            }
-            delete this.value;
-        }
-        this.render();
-        this.updateFormValue();
-        this._localeObserver = observeLocaleChanges(this, () => {
-            this.render();
-        });
-    }
-    disconnectedCallback() {
-        if (this._localeObserver) {
-            this._localeObserver();
-            this._localeObserver = undefined;
-        }
-        this._navigation = undefined;
-        this._monthDisplay = undefined;
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue)
-            return;
-        switch (name) {
-            case 'year':
-            case 'month':
-            case 'day':
-                this.syncStateFromAttributes();
-                this.syncChildComponents();
-                this.updateFormValue();
-                break;
-            case 'show-navigation':
-                this._showNavigation = newValue !== 'false';
-                this.render();
-                break;
-            case 'stateless':
-                this._stateless = newValue !== null && newValue !== 'false';
-                break;
-            case 'locale':
-                this.syncChildComponents();
-                break;
-            case 'size':
-                if (newValue === 'sm' || newValue === 'md' || newValue === 'lg') {
-                    this._size = newValue;
-                    this._width = undefined;
-                    this.removeAttribute('width');
-                    this.syncChildComponents();
-                }
-                break;
-            case 'width':
-                this._width = newValue || undefined;
-                if (newValue) {
-                    this._size = 'md';
-                    this.removeAttribute('size');
-                }
-                this.syncChildComponents();
-                break;
-            case 'name':
-                this.updateFormValue();
-                break;
-            case 'min':
-            case 'max':
-                this[name === 'min' ? '_min' : '_max'] = newValue || undefined;
-                this.syncChildComponents();
-                this.updateValidity();
-                break;
-            case 'flavor':
-                this._flavor = newValue || 'primary';
-                this.syncChildComponents();
-                break;
-        }
-    }
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        if (value)
-            this.setAttribute('min', value);
-        else
-            this.removeAttribute('min');
-    }
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        if (value)
-            this.setAttribute('max', value);
-        else
-            this.removeAttribute('max');
-    }
-    get flavor() {
-        return this._flavor;
-    }
-    set flavor(value) {
-        if (value)
-            this.setAttribute('flavor', value);
-        else
-            this.removeAttribute('flavor');
-    }
-    get year() {
-        return this._state.selectedYear;
-    }
-    set year(value) {
-        if (value !== undefined) {
-            if (this._stateless) {
-                this._state.displayYear = value;
-                this.setAttribute('year', value.toString());
-            }
-            else {
-                this._state.selectedYear = value;
-                this._state.displayYear = value;
-                this.setAttribute('year', value.toString());
-            }
-        }
-        else {
-            if (!this._stateless) {
-                delete this._state.selectedYear;
-            }
-            this.removeAttribute('year');
-        }
-        this.syncChildComponents();
-        if (!this._stateless) {
-            this.updateFormValue();
-        }
-    }
-    get month() {
-        return this._state.selectedMonth;
-    }
-    set month(value) {
-        if (value !== undefined) {
-            if (this._stateless) {
-                this._state.displayMonth = value;
-                this.setAttribute('month', value.toString());
-            }
-            else {
-                this._state.selectedMonth = value;
-                this._state.displayMonth = value;
-                this.setAttribute('month', value.toString());
-            }
-        }
-        else {
-            if (!this._stateless) {
-                delete this._state.selectedMonth;
-            }
-            this.removeAttribute('month');
-        }
-        this.syncChildComponents();
-        if (!this._stateless) {
-            this.updateFormValue();
-        }
-    }
-    get day() {
-        return this._state.selectedDay;
-    }
-    set day(value) {
-        if (value !== undefined) {
-            this._state.selectedDay = value;
-            this.setAttribute('day', value.toString());
-        }
-        else {
-            delete this._state.selectedDay;
-            this.removeAttribute('day');
-        }
-        this.syncChildComponents();
-        this.updateFormValue();
-    }
-    get locale() {
-        return getEffectiveLocale(this, this.getAttribute('locale'));
-    }
-    set locale(value) {
-        this.setAttribute('locale', value);
-    }
-    get showNavigation() {
-        return this._showNavigation;
-    }
-    set showNavigation(value) {
-        this._showNavigation = value;
-        this.setAttribute('show-navigation', value.toString());
-    }
-    get stateless() {
-        return this._stateless;
-    }
-    set stateless(value) {
-        this._stateless = value;
-        if (value) {
-            this.setAttribute('stateless', '');
-        }
-        else {
-            this.removeAttribute('stateless');
-        }
-    }
-    get size() {
-        return this._size;
-    }
-    set size(value) {
-        if (this._size !== value) {
-            this._size = value;
-            this._width = undefined;
-            this.removeAttribute('width');
-            this.setAttribute('size', value);
-            this.syncChildComponents();
-        }
-    }
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        if (this._width !== value) {
-            this._width = value;
-            if (value) {
-                this._size = 'md';
-                this.removeAttribute('size');
-                this.setAttribute('width', value);
-            }
-            else {
-                this.removeAttribute('width');
-            }
-            this.syncChildComponents();
-        }
-    }
-    get dayContentFn() {
-        return this._dayContentFn;
-    }
-    set dayContentFn(fn) {
-        this._dayContentFn = fn;
-        this.syncChildComponents();
-    }
-    get customCSS() {
-        return this._customCSS;
-    }
-    set customCSS(sheet) {
-        this._customCSS = sheet;
-        this.syncChildComponents();
-    }
-    get value() {
-        const { selectedYear, selectedMonth, selectedDay } = this._state;
-        if (selectedYear && selectedMonth && selectedDay) {
-            return formatDateISO(selectedYear, selectedMonth, selectedDay);
-        }
-        return '';
-    }
-    set value(isoDate) {
-        if (!isoDate) {
-            delete this._state.selectedYear;
-            delete this._state.selectedMonth;
-            delete this._state.selectedDay;
-            if (!this._stateless) {
-                this.removeAttribute('year');
-                this.removeAttribute('month');
-                this.removeAttribute('day');
-            }
-        }
-        else {
-            const match = isoDate.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-            if (match) {
-                const year = parseInt(match[1], 10);
-                const month = parseInt(match[2], 10);
-                const day = parseInt(match[3], 10);
-                this._state.selectedYear = year;
-                this._state.selectedMonth = month;
-                this._state.selectedDay = day;
-                this._state.displayYear = year;
-                this._state.displayMonth = month;
-                if (!this._stateless) {
-                    this.setAttribute('year', year.toString());
-                    this.setAttribute('month', month.toString());
-                    this.setAttribute('day', day.toString());
-                }
-            }
-        }
-        this.syncChildComponents();
-        if (!this._stateless) {
-            this.updateFormValue();
-        }
-    }
-    initializeFromAttributes() {
-        const yearStr = this.getAttribute('year');
-        const monthStr = this.getAttribute('month');
-        const dayStr = this.getAttribute('day');
-        const showNavStr = this.getAttribute('show-navigation');
-        const statelessStr = this.getAttribute('stateless');
-        const sizeStr = this.getAttribute('size');
-        const widthStr = this.getAttribute('width');
-        this._min = this.getAttribute('min') || undefined;
-        this._max = this.getAttribute('max') || undefined;
-        const year = parseYear(yearStr);
-        if (year) {
-            this._state.displayYear = year;
-        }
-        const month = parseMonth(monthStr);
-        if (month) {
-            this._state.displayMonth = month;
-        }
-        if (year && month) {
-            const day = parseDay(dayStr, year, month);
-            if (day) {
-                this._state.selectedYear = year;
-                this._state.selectedMonth = month;
-                this._state.selectedDay = day;
-            }
-        }
-        if (showNavStr) {
-            this._showNavigation = showNavStr !== 'false';
-        }
-        if (statelessStr !== null) {
-            this._stateless = statelessStr !== 'false';
-        }
-        if (sizeStr && (sizeStr === 'sm' || sizeStr === 'md' || sizeStr === 'lg')) {
-            this._size = sizeStr;
-        }
-        if (widthStr) {
-            this._width = widthStr;
-        }
-    }
-    syncStateFromAttributes() {
-        const yearStr = this.getAttribute('year');
-        const monthStr = this.getAttribute('month');
-        const dayStr = this.getAttribute('day');
-        const year = parseYear(yearStr);
-        const month = parseMonth(monthStr);
-        if (year)
-            this._state.displayYear = year;
-        if (month)
-            this._state.displayMonth = month;
-        if (year && month) {
-            const day = parseDay(dayStr, year, month);
-            if (day) {
-                this._state.selectedYear = year;
-                this._state.selectedMonth = month;
-                this._state.selectedDay = day;
-            }
-            else {
-                delete this._state.selectedYear;
-                delete this._state.selectedMonth;
-                delete this._state.selectedDay;
-            }
-        }
-        else {
-            delete this._state.selectedYear;
-            delete this._state.selectedMonth;
-            delete this._state.selectedDay;
-        }
-    }
-    syncChildComponents() {
-        if (this._navigation) {
-            this._navigation.displayMonth = this._state.displayMonth;
-            this._navigation.displayYear = this._state.displayYear;
-            this._navigation.locale = this.locale;
-            this._navigation.size = this._size;
-            this._navigation.min = this._min ?? '';
-            this._navigation.max = this._max ?? '';
-            this._navigation.width = this._width;
-        }
-        if (this._monthDisplay) {
-            this._monthDisplay.displayMonth = this._state.displayMonth;
-            this._monthDisplay.displayYear = this._state.displayYear;
-            this._monthDisplay.locale = this.locale;
-            this._monthDisplay.size = this._size;
-            this._monthDisplay.min = this._min;
-            this._monthDisplay.max = this._max;
-            this._monthDisplay.flavor = this._flavor;
-            this._monthDisplay.width = this._width;
-            if (this._dayContentFn) {
-                this._monthDisplay.dayContentFn = this._dayContentFn;
-            }
-            if (this._customCSS) {
-                this._monthDisplay.customCSS = this._customCSS;
-            }
-            const { selectedYear, selectedMonth, selectedDay } = this._state;
-            if (selectedYear && selectedMonth && selectedDay) {
-                const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
-                this._monthDisplay.value = date.getTime();
-            }
-            else {
-                this._monthDisplay.value = null;
-            }
-        }
-    }
-    updateFormValue() {
-        if (this._stateless)
-            return;
-        if (!this._internals)
-            return;
-        const elementName = this.getAttribute('name');
-        const { selectedYear, selectedMonth, selectedDay } = this._state;
-        if (elementName && selectedYear && selectedMonth && selectedDay) {
-            const isoDate = formatDateISO(selectedYear, selectedMonth, selectedDay);
-            this._internals.setFormValue(isoDate);
-        }
-        else {
-            this._internals.setFormValue('');
-        }
-        this.updateValidity();
-    }
-    updateValidity() {
-        if (!this._internals)
-            return;
-        const { selectedYear, selectedMonth, selectedDay } = this._state;
-        if (selectedYear && selectedMonth && selectedDay) {
-            const sel = Date.UTC(selectedYear, selectedMonth - 1, selectedDay);
-            const min = this._min ? parseISODate(this._min) : null;
-            const max = this._max ? parseISODate(this._max) : null;
-            if (min && sel < Date.UTC(min.year, min.month - 1, min.day)) {
-                this._internals.setValidity({ rangeUnderflow: true }, `Date must be ${this._min} or later`);
-                return;
-            }
-            if (max && sel > Date.UTC(max.year, max.month - 1, max.day)) {
-                this._internals.setValidity({ rangeOverflow: true }, `Date must be ${this._max} or earlier`);
-                return;
-            }
-        }
-        this._internals.setValidity({});
-    }
-    handleNavigationChange(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const { month, year } = event.detail;
-        this._state.displayMonth = month;
-        this._state.displayYear = year;
-        this.syncChildComponents();
-        const navigateDetail = {
-            month,
-            year,
-            action: 'navigate',
-            source: 'navigation',
-        };
-        this.dispatchEvent(new CustomEvent('navigate', {
-            detail: navigateDetail,
-            bubbles: true,
-            composed: true,
-            cancelable: false,
-        }));
-    }
-    handleDayClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const { dayContext, year, month, day } = event.detail;
-        if (this._stateless) {
-            this.dispatchEvent(new CustomEvent('day-click', {
-                detail: event.detail,
-                bubbles: true,
-                composed: true,
-                cancelable: true,
-            }));
-            return;
-        }
-        this._state.selectedYear = year;
-        this._state.selectedMonth = month;
-        this._state.selectedDay = day;
-        this._state.displayYear = year;
-        this._state.displayMonth = month;
-        this.setAttribute('year', year.toString());
-        this.setAttribute('month', month.toString());
-        this.setAttribute('day', day.toString());
-        this.updateFormValue();
-        this.syncChildComponents();
-        const changeDetail = {
-            year,
-            month,
-            day,
-            action: 'select',
-            source: 'day-click',
-            dayContext,
-        };
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: changeDetail,
-            bubbles: true,
-            composed: true,
-            cancelable: false,
-        }));
-    }
-    refresh() {
-        this.syncChildComponents();
-        if (this._monthDisplay && typeof this._monthDisplay.refresh === 'function') {
-            this._monthDisplay.refresh();
-        }
-    }
-    createNavigation() {
-        const nav = document.createElement('ty-calendar-navigation');
-        nav.displayMonth = this._state.displayMonth;
-        nav.displayYear = this._state.displayYear;
-        nav.locale = this.locale;
-        nav.size = this._size;
-        nav.min = this._min ?? '';
-        nav.max = this._max ?? '';
-        if (this._width) {
-            nav.width = this._width;
-        }
-        nav.addEventListener('change', (e) => this.handleNavigationChange(e));
-        this._navigation = nav;
-        return nav;
-    }
-    createMonthDisplay() {
-        const month = document.createElement('ty-calendar-month');
-        month.displayMonth = this._state.displayMonth;
-        month.displayYear = this._state.displayYear;
-        month.locale = this.locale;
-        month.size = this._size;
-        month.min = this._min;
-        month.max = this._max;
-        month.flavor = this._flavor;
-        if (this._width) {
-            month.width = this._width;
-        }
-        const { selectedYear, selectedMonth, selectedDay } = this._state;
-        if (selectedYear && selectedMonth && selectedDay) {
-            const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
-            month.value = date.getTime();
-        }
-        if (this._dayContentFn) {
-            month.dayContentFn = this._dayContentFn;
-        }
-        if (this._customCSS) {
-            month.customCSS = this._customCSS;
-        }
-        month.addEventListener('day-click', (e) => this.handleDayClick(e));
-        this._monthDisplay = month;
-        return month;
-    }
-    render() {
-        const root = this.shadowRoot;
-        if (!root)
-            return;
-        ensureStyles(root, { css: calendarStyles, id: 'ty-calendar' });
-        root.innerHTML = '';
-        const container = document.createElement('div');
-        container.className = 'calendar-container';
-        if (this._showNavigation) {
-            const nav = this.createNavigation();
-            container.appendChild(nav);
-        }
-        const month = this.createMonthDisplay();
-        container.appendChild(month);
-        root.appendChild(container);
-    }
+static get observedAttributes() {
+return ['value', 'year', 'month', 'day', 'show-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor'];
+}
+constructor() {
+super();
+this._showNavigation = true;
+this._stateless = false;
+this._size = 'md';
+this._flavor = 'primary';
+const current = getCurrentDate();
+this._state = {
+displayYear: current.year,
+displayMonth: current.month,
+};
+this.attachShadow({ mode: 'open' });
+if ('attachInternals' in this) {
+this._internals = this.attachInternals();
+}
+}
+connectedCallback() {
+this.initializeFromAttributes();
+const plainDayContentFn = this.dayContentFn;
+if (plainDayContentFn && !this._dayContentFn) {
+this._dayContentFn = plainDayContentFn;
+delete this.dayContentFn;
+}
+const plainCustomCSS = this.customCSS;
+if (plainCustomCSS && !this._customCSS) {
+this._customCSS = plainCustomCSS;
+delete this.customCSS;
+}
+const plainValue = this.value;
+if (plainValue && typeof plainValue === 'string' && plainValue !== this.value) {
+const match = plainValue.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+if (match) {
+const year = parseInt(match[1], 10);
+const month = parseInt(match[2], 10);
+const day = parseInt(match[3], 10);
+this._state.selectedYear = year;
+this._state.selectedMonth = month;
+this._state.selectedDay = day;
+this._state.displayYear = year;
+this._state.displayMonth = month;
+if (!this._stateless) {
+this.setAttribute('year', year.toString());
+this.setAttribute('month', month.toString());
+this.setAttribute('day', day.toString());
+}
+}
+delete this.value;
+}
+this.render();
+this.updateFormValue();
+this._localeObserver = observeLocaleChanges(this, () => {
+this.render();
+});
+}
+disconnectedCallback() {
+if (this._localeObserver) {
+this._localeObserver();
+this._localeObserver = undefined;
+}
+this._navigation = undefined;
+this._monthDisplay = undefined;
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (oldValue === newValue)
+return;
+switch (name) {
+case 'value':
+this.value = newValue || '';
+break;
+case 'year':
+case 'month':
+case 'day':
+this.syncStateFromAttributes();
+this.syncChildComponents();
+this.updateFormValue();
+break;
+case 'show-navigation':
+this._showNavigation = newValue !== 'false';
+this.render();
+break;
+case 'stateless':
+this._stateless = newValue !== null && newValue !== 'false';
+break;
+case 'locale':
+this.syncChildComponents();
+break;
+case 'size':
+if (newValue === 'sm' || newValue === 'md' || newValue === 'lg') {
+this._size = newValue;
+this._width = undefined;
+this.removeAttribute('width');
+this.syncChildComponents();
+}
+break;
+case 'width':
+this._width = newValue || undefined;
+if (newValue) {
+this._size = 'md';
+this.removeAttribute('size');
+}
+this.syncChildComponents();
+break;
+case 'name':
+this.updateFormValue();
+break;
+case 'min':
+case 'max':
+this[name === 'min' ? '_min' : '_max'] = newValue || undefined;
+this.syncChildComponents();
+this.updateValidity();
+break;
+case 'flavor':
+this._flavor = newValue || 'primary';
+this.syncChildComponents();
+break;
+}
+}
+get min() {
+return this._min;
+}
+set min(value) {
+if (value)
+this.setAttribute('min', value);
+else
+this.removeAttribute('min');
+}
+get max() {
+return this._max;
+}
+set max(value) {
+if (value)
+this.setAttribute('max', value);
+else
+this.removeAttribute('max');
+}
+get flavor() {
+return this._flavor;
+}
+set flavor(value) {
+if (value)
+this.setAttribute('flavor', value);
+else
+this.removeAttribute('flavor');
+}
+get year() {
+return this._state.selectedYear;
+}
+set year(value) {
+if (value !== undefined) {
+if (this._stateless) {
+this._state.displayYear = value;
+this.setAttribute('year', value.toString());
+}
+else {
+this._state.selectedYear = value;
+this._state.displayYear = value;
+this.setAttribute('year', value.toString());
+}
+}
+else {
+if (!this._stateless) {
+delete this._state.selectedYear;
+}
+this.removeAttribute('year');
+}
+this.syncChildComponents();
+if (!this._stateless) {
+this.updateFormValue();
+}
+}
+get month() {
+return this._state.selectedMonth;
+}
+set month(value) {
+if (value !== undefined) {
+if (this._stateless) {
+this._state.displayMonth = value;
+this.setAttribute('month', value.toString());
+}
+else {
+this._state.selectedMonth = value;
+this._state.displayMonth = value;
+this.setAttribute('month', value.toString());
+}
+}
+else {
+if (!this._stateless) {
+delete this._state.selectedMonth;
+}
+this.removeAttribute('month');
+}
+this.syncChildComponents();
+if (!this._stateless) {
+this.updateFormValue();
+}
+}
+get day() {
+return this._state.selectedDay;
+}
+set day(value) {
+if (value !== undefined) {
+this._state.selectedDay = value;
+this.setAttribute('day', value.toString());
+}
+else {
+delete this._state.selectedDay;
+this.removeAttribute('day');
+}
+this.syncChildComponents();
+this.updateFormValue();
+}
+get locale() {
+return getEffectiveLocale(this, this.getAttribute('locale'));
+}
+set locale(value) {
+this.setAttribute('locale', value);
+}
+get showNavigation() {
+return this._showNavigation;
+}
+set showNavigation(value) {
+this._showNavigation = value;
+this.setAttribute('show-navigation', value.toString());
+}
+get stateless() {
+return this._stateless;
+}
+set stateless(value) {
+this._stateless = value;
+if (value) {
+this.setAttribute('stateless', '');
+}
+else {
+this.removeAttribute('stateless');
+}
+}
+get size() {
+return this._size;
+}
+set size(value) {
+if (this._size !== value) {
+this._size = value;
+this._width = undefined;
+this.removeAttribute('width');
+this.setAttribute('size', value);
+this.syncChildComponents();
+}
+}
+get width() {
+return this._width;
+}
+set width(value) {
+if (this._width !== value) {
+this._width = value;
+if (value) {
+this._size = 'md';
+this.removeAttribute('size');
+this.setAttribute('width', value);
+}
+else {
+this.removeAttribute('width');
+}
+this.syncChildComponents();
+}
+}
+get dayContentFn() {
+return this._dayContentFn;
+}
+set dayContentFn(fn) {
+this._dayContentFn = fn;
+this.syncChildComponents();
+}
+get customCSS() {
+return this._customCSS;
+}
+set customCSS(sheet) {
+this._customCSS = sheet;
+this.syncChildComponents();
+}
+get value() {
+const { selectedYear, selectedMonth, selectedDay } = this._state;
+if (selectedYear && selectedMonth && selectedDay) {
+return formatDateISO(selectedYear, selectedMonth, selectedDay);
+}
+return '';
+}
+set value(isoDate) {
+if (!isoDate) {
+delete this._state.selectedYear;
+delete this._state.selectedMonth;
+delete this._state.selectedDay;
+if (!this._stateless) {
+this.removeAttribute('year');
+this.removeAttribute('month');
+this.removeAttribute('day');
+}
+}
+else {
+const match = isoDate.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+if (match) {
+const year = parseInt(match[1], 10);
+const month = parseInt(match[2], 10);
+const day = parseInt(match[3], 10);
+this._state.selectedYear = year;
+this._state.selectedMonth = month;
+this._state.selectedDay = day;
+this._state.displayYear = year;
+this._state.displayMonth = month;
+if (!this._stateless) {
+this.setAttribute('year', year.toString());
+this.setAttribute('month', month.toString());
+this.setAttribute('day', day.toString());
+}
+}
+}
+this.syncChildComponents();
+if (!this._stateless) {
+this.updateFormValue();
+}
+}
+initializeFromAttributes() {
+const yearStr = this.getAttribute('year');
+const monthStr = this.getAttribute('month');
+const dayStr = this.getAttribute('day');
+const showNavStr = this.getAttribute('show-navigation');
+const statelessStr = this.getAttribute('stateless');
+const sizeStr = this.getAttribute('size');
+const widthStr = this.getAttribute('width');
+this._min = this.getAttribute('min') || undefined;
+this._max = this.getAttribute('max') || undefined;
+const year = parseYear(yearStr);
+if (year) {
+this._state.displayYear = year;
+}
+const month = parseMonth(monthStr);
+if (month) {
+this._state.displayMonth = month;
+}
+if (year && month) {
+const day = parseDay(dayStr, year, month);
+if (day) {
+this._state.selectedYear = year;
+this._state.selectedMonth = month;
+this._state.selectedDay = day;
+}
+}
+if (showNavStr) {
+this._showNavigation = showNavStr !== 'false';
+}
+if (statelessStr !== null) {
+this._stateless = statelessStr !== 'false';
+}
+if (sizeStr && (sizeStr === 'sm' || sizeStr === 'md' || sizeStr === 'lg')) {
+this._size = sizeStr;
+}
+if (widthStr) {
+this._width = widthStr;
+}
+}
+syncStateFromAttributes() {
+const yearStr = this.getAttribute('year');
+const monthStr = this.getAttribute('month');
+const dayStr = this.getAttribute('day');
+const year = parseYear(yearStr);
+const month = parseMonth(monthStr);
+if (year)
+this._state.displayYear = year;
+if (month)
+this._state.displayMonth = month;
+if (year && month) {
+const day = parseDay(dayStr, year, month);
+if (day) {
+this._state.selectedYear = year;
+this._state.selectedMonth = month;
+this._state.selectedDay = day;
+}
+else {
+delete this._state.selectedYear;
+delete this._state.selectedMonth;
+delete this._state.selectedDay;
+}
+}
+else {
+delete this._state.selectedYear;
+delete this._state.selectedMonth;
+delete this._state.selectedDay;
+}
+}
+syncChildComponents() {
+if (this._navigation) {
+this._navigation.displayMonth = this._state.displayMonth;
+this._navigation.displayYear = this._state.displayYear;
+this._navigation.locale = this.locale;
+this._navigation.size = this._size;
+this._navigation.min = this._min ?? '';
+this._navigation.max = this._max ?? '';
+this._navigation.width = this._width;
+}
+if (this._monthDisplay) {
+this._monthDisplay.displayMonth = this._state.displayMonth;
+this._monthDisplay.displayYear = this._state.displayYear;
+this._monthDisplay.locale = this.locale;
+this._monthDisplay.size = this._size;
+this._monthDisplay.min = this._min;
+this._monthDisplay.max = this._max;
+this._monthDisplay.flavor = this._flavor;
+this._monthDisplay.width = this._width;
+if (this._dayContentFn) {
+this._monthDisplay.dayContentFn = this._dayContentFn;
+}
+if (this._customCSS) {
+this._monthDisplay.customCSS = this._customCSS;
+}
+const { selectedYear, selectedMonth, selectedDay } = this._state;
+if (selectedYear && selectedMonth && selectedDay) {
+const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
+this._monthDisplay.value = date.getTime();
+}
+else {
+this._monthDisplay.value = null;
+}
+}
+}
+updateFormValue() {
+if (this._stateless)
+return;
+if (!this._internals)
+return;
+const elementName = this.getAttribute('name');
+const { selectedYear, selectedMonth, selectedDay } = this._state;
+if (elementName && selectedYear && selectedMonth && selectedDay) {
+const isoDate = formatDateISO(selectedYear, selectedMonth, selectedDay);
+this._internals.setFormValue(isoDate);
+}
+else {
+this._internals.setFormValue('');
+}
+this.updateValidity();
+}
+updateValidity() {
+if (!this._internals)
+return;
+const { selectedYear, selectedMonth, selectedDay } = this._state;
+if (selectedYear && selectedMonth && selectedDay) {
+const sel = Date.UTC(selectedYear, selectedMonth - 1, selectedDay);
+const min = this._min ? parseISODate(this._min) : null;
+const max = this._max ? parseISODate(this._max) : null;
+if (min && sel < Date.UTC(min.year, min.month - 1, min.day)) {
+this._internals.setValidity({ rangeUnderflow: true }, `Date must be ${this._min} or later`);
+return;
+}
+if (max && sel > Date.UTC(max.year, max.month - 1, max.day)) {
+this._internals.setValidity({ rangeOverflow: true }, `Date must be ${this._max} or earlier`);
+return;
+}
+}
+this._internals.setValidity({});
+}
+handleNavigationChange(event) {
+event.preventDefault();
+event.stopPropagation();
+const { month, year } = event.detail;
+this._state.displayMonth = month;
+this._state.displayYear = year;
+this.syncChildComponents();
+const navigateDetail = {
+month,
+year,
+action: 'navigate',
+source: 'navigation',
+};
+this.dispatchEvent(new CustomEvent('navigate', {
+detail: navigateDetail,
+bubbles: true,
+composed: true,
+cancelable: false,
+}));
+}
+handleDayClick(event) {
+event.preventDefault();
+event.stopPropagation();
+const { dayContext, year, month, day } = event.detail;
+if (this._stateless) {
+this.dispatchEvent(new CustomEvent('day-click', {
+detail: event.detail,
+bubbles: true,
+composed: true,
+cancelable: true,
+}));
+return;
+}
+this._state.selectedYear = year;
+this._state.selectedMonth = month;
+this._state.selectedDay = day;
+this._state.displayYear = year;
+this._state.displayMonth = month;
+this.setAttribute('year', year.toString());
+this.setAttribute('month', month.toString());
+this.setAttribute('day', day.toString());
+this.updateFormValue();
+this.syncChildComponents();
+const changeDetail = {
+year,
+month,
+day,
+action: 'select',
+source: 'day-click',
+dayContext,
+};
+this.dispatchEvent(new CustomEvent('change', {
+detail: changeDetail,
+bubbles: true,
+composed: true,
+cancelable: false,
+}));
+}
+refresh() {
+this.syncChildComponents();
+if (this._monthDisplay && typeof this._monthDisplay.refresh === 'function') {
+this._monthDisplay.refresh();
+}
+}
+createNavigation() {
+const nav = document.createElement('ty-calendar-navigation');
+nav.displayMonth = this._state.displayMonth;
+nav.displayYear = this._state.displayYear;
+nav.locale = this.locale;
+nav.size = this._size;
+nav.min = this._min ?? '';
+nav.max = this._max ?? '';
+if (this._width) {
+nav.width = this._width;
+}
+nav.addEventListener('change', (e) => this.handleNavigationChange(e));
+this._navigation = nav;
+return nav;
+}
+createMonthDisplay() {
+const month = document.createElement('ty-calendar-month');
+month.displayMonth = this._state.displayMonth;
+month.displayYear = this._state.displayYear;
+month.locale = this.locale;
+month.size = this._size;
+month.min = this._min;
+month.max = this._max;
+month.flavor = this._flavor;
+if (this._width) {
+month.width = this._width;
+}
+const { selectedYear, selectedMonth, selectedDay } = this._state;
+if (selectedYear && selectedMonth && selectedDay) {
+const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
+month.value = date.getTime();
+}
+if (this._dayContentFn) {
+month.dayContentFn = this._dayContentFn;
+}
+if (this._customCSS) {
+month.customCSS = this._customCSS;
+}
+month.addEventListener('day-click', (e) => this.handleDayClick(e));
+this._monthDisplay = month;
+return month;
+}
+render() {
+const root = this.shadowRoot;
+if (!root)
+return;
+ensureStyles(root, { css: calendarStyles, id: 'ty-calendar' });
+root.innerHTML = '';
+const container = document.createElement('div');
+container.className = 'calendar-container';
+if (this._showNavigation) {
+const nav = this.createNavigation();
+container.appendChild(nav);
+}
+const month = this.createMonthDisplay();
+container.appendChild(month);
+root.appendChild(container);
+}
 }
 TyCalendar.formAssociated = true;
 if (!customElements.get('ty-calendar')) {
-    customElements.define('ty-calendar', TyCalendar);
+customElements.define('ty-calendar', TyCalendar);
 }