tyrell-components 1.0.0-RC13 → 1.0.0-RC15

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,333 +37,247 @@ 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
-        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);
-    }
-    get min() {
-        return this.getProperty('min');
-    }
-    set min(value) {
-        this.setProperty('min', value ?? '');
-    }
-    get max() {
-        return this.getProperty('max');
-    }
-    set max(value) {
-        this.setProperty('max', 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
-    // ==========================================================================
-    /**
-     * 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);
-        return {
-            minIdx: min ? TyCalendarNavigation.monthIndex(min.year, min.month) : null,
-            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)
-            return minIdx;
-        if (maxIdx !== null && idx > maxIdx)
-            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
-        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;
-        button.title = title;
-        button.innerHTML = svg;
-        button.disabled = disabled;
-        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.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
-// ============================================================================
+constructor() {
+super();
+const today = new Date();
+this._state = {
+displayMonth: today.getMonth() + 1,
+displayYear: today.getFullYear()
+};
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: calendarNavigationStyles, id: 'ty-calendar-navigation' });
+}
+onConnect() {
+this._state.displayMonth = this.displayMonth;
+this._state.displayYear = this.displayYear;
+this._localeObserver = observeLocaleChanges(this, () => {
+this.render();
+});
+this.render();
+}
+onDisconnect() {
+if (this._localeObserver) {
+this._localeObserver();
+this._localeObserver = undefined;
+}
+}
+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':
+break;
+}
+}
+}
+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() {
+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);
+}
+get min() {
+return this.getProperty('min');
+}
+set min(value) {
+this.setProperty('min', value ?? '');
+}
+get max() {
+return this.getProperty('max');
+}
+set max(value) {
+this.setProperty('max', value ?? '');
+}
+emitChangeEvent(month, year) {
+const detail = {
+month,
+year,
+};
+const event = new CustomEvent('change', {
+detail,
+bubbles: true,
+cancelable: true,
+});
+this.dispatchEvent(event);
+}
+static monthIndex(year, month) {
+return year * 12 + (month - 1);
+}
+boundIndices() {
+const min = parseISODate(this.min);
+const max = parseISODate(this.max);
+return {
+minIdx: min ? TyCalendarNavigation.monthIndex(min.year, min.month) : null,
+maxIdx: max ? TyCalendarNavigation.monthIndex(max.year, max.month) : null,
+};
+}
+clampIndex(idx) {
+const { minIdx, maxIdx } = this.boundIndices();
+if (minIdx !== null && idx < minIdx)
+return minIdx;
+if (maxIdx !== null && idx > maxIdx)
+return maxIdx;
+return idx;
+}
+navigateBy(deltaMonths) {
+const current = TyCalendarNavigation.monthIndex(this._state.displayYear, this._state.displayMonth);
+const target = this.clampIndex(current + deltaMonths);
+if (target === current)
+return;
+this.emitChangeEvent((target % 12) + 1, Math.floor(target / 12));
+}
+isNavDisabled(deltaMonths) {
+const current = TyCalendarNavigation.monthIndex(this._state.displayYear, this._state.displayMonth);
+return this.clampIndex(current + deltaMonths) === current;
+}
+createButton(className, title, svg, onClick, disabled = false) {
+const button = document.createElement('button');
+button.className = className;
+button.title = title;
+button.innerHTML = svg;
+button.disabled = disabled;
+button.addEventListener('click', onClick);
+return button;
+}
+render() {
+const root = this.shadowRoot;
+if (!root)
+return;
+ensureStyles(root, { css: calendarNavigationStyles, id: 'ty-calendar-navigation' });
+const size = this.size;
+this.setAttribute('data-size', size);
+const width = this.width;
+if (width) {
+this.style.setProperty('--nav-width', width);
+}
+else {
+this.style.removeProperty('--nav-width');
+}
+const monthName = getMonthName(this._state.displayMonth, this.locale, 'long');
+root.innerHTML = '';
+const header = document.createElement('div');
+header.className = 'calendar-navigation-header';
+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)));
+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);
+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)));
+header.appendChild(leftGroup);
+header.appendChild(centerGroup);
+header.appendChild(rightGroup);
+root.appendChild(header);
+}
+}
 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: ''
-    },
-    // 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,
-        default: ''
-    },
-    max: {
-        type: 'string',
-        visual: true,
-        default: ''
-    }
+'display-month': {
+type: 'number',
+visual: true,
+default: () => new Date().getMonth() + 1,
+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: {
+type: 'string',
+visual: true,
+default: 'en-US'
+},
+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: {
+type: 'string',
+visual: true,
+default: ''
+},
+min: {
+type: 'string',
+visual: true,
+default: ''
+},
+max: {
+type: 'string',
+visual: true,
+default: ''
+}
 };
-// Register the custom element
 if (!customElements.get('ty-calendar-navigation')) {
-    customElements.define('ty-calendar-navigation', TyCalendarNavigation);
+customElements.define('ty-calendar-navigation', TyCalendarNavigation);
 }
-//# sourceMappingURL=calendar-navigation.js.map