tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/components/calendar-navigation.js

@@ -38,246 +38,246 @@ const CHEVRONS_RIGHT_SVG = `<?xml version='1.0' encoding='UTF-8'?>
 </g>
 </svg>`;
 export class TyCalendarNavigation extends TyComponent {
-    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);
-    }
+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-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: ''
-    }
+'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: ''
+}
 };
 if (!customElements.get('ty-calendar-navigation')) {
-    customElements.define('ty-calendar-navigation', TyCalendarNavigation);
+customElements.define('ty-calendar-navigation', TyCalendarNavigation);
 }

package/lib/components/calendar.d.ts

@@ -32,7 +32,7 @@ export interface CalendarNavigateDetail {
  */
 export declare class TyCalendar extends HTMLElement {
     private _state;
-    private _showNavigation;
+    private _hideNavigation;
     private _stateless;
     private _size;
     private _width?;
@@ -44,6 +44,7 @@ export declare class TyCalendar extends HTMLElement {
     private _navigation?;
     private _monthDisplay?;
     private _internals?;
+    private _initialValue;
     private _localeObserver?;
     static formAssociated: boolean;
     static get observedAttributes(): string[];
@@ -65,8 +66,8 @@ export declare class TyCalendar extends HTMLElement {
     set day(value: number | undefined);
     get locale(): string;
     set locale(value: string);
-    get showNavigation(): boolean;
-    set showNavigation(value: boolean);
+    get hideNavigation(): boolean;
+    set hideNavigation(value: boolean);
     get stateless(): boolean;
     set stateless(value: boolean);
     get size(): CalendarSize;
@@ -83,6 +84,7 @@ export declare class TyCalendar extends HTMLElement {
      * Initialize state from HTML attributes on first load
      */
     private initializeFromAttributes;
+    formResetCallback(): void;
     private syncStateFromAttributes;
     private syncChildComponents;
     private updateFormValue;