tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/date-picker.js

@@ -6,1149 +6,1144 @@ import { computeAnchoredPosition, placementToAnchored } from '../utils/positioni
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { isMobileTouch } from '../utils/mobile.js';
 import { TyComponent } from '../base/ty-component.js';
+import { DEFAULT_SIZE } from '../types/common.js';
 const CALENDAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>`;
 const CLEAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>`;
 const SCHEDULE_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'></circle><polyline points='12,6 12,12 16,14'></polyline></svg>`;
 const elementIds = new WeakMap();
 let elementIdCounter = 0;
 function getElementHash(element) {
-    let id = elementIds.get(element);
-    if (id === undefined) {
-        id = ++elementIdCounter;
-        elementIds.set(element, id);
-    }
-    return id;
+let id = elementIds.get(element);
+if (id === undefined) {
+id = ++elementIdCounter;
+elementIds.set(element, id);
+}
+return id;
 }
 function parseValue(value, withTime) {
-    if (!value)
-        return null;
-    let dateObj = null;
-    if (typeof value === 'string') {
-        if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
-            const [yearStr, monthStr, dayStr] = value.split('-');
-            const year = parseInt(yearStr, 10);
-            const month = parseInt(monthStr, 10) - 1;
-            const day = parseInt(dayStr, 10);
-            dateObj = new Date(year, month, day, 0, 0, 0, 0);
-        }
-        else {
-            dateObj = new Date(value);
-        }
-    }
-    else if (typeof value === 'number') {
-        dateObj = new Date(value);
-    }
-    if (!dateObj || isNaN(dateObj.getTime())) {
-        return null;
-    }
-    const components = {
-        year: dateObj.getFullYear(),
-        month: dateObj.getMonth() + 1,
-        day: dateObj.getDate(),
-        hour: withTime ? dateObj.getHours() : 0,
-        minute: withTime ? dateObj.getMinutes() : 0,
-    };
-    return components;
+if (!value)
+return null;
+let dateObj = null;
+if (typeof value === 'string') {
+if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+const [yearStr, monthStr, dayStr] = value.split('-');
+const year = parseInt(yearStr, 10);
+const month = parseInt(monthStr, 10) - 1;
+const day = parseInt(dayStr, 10);
+dateObj = new Date(year, month, day, 0, 0, 0, 0);
+}
+else {
+dateObj = new Date(value);
+}
+}
+else if (typeof value === 'number') {
+dateObj = new Date(value);
+}
+if (!dateObj || isNaN(dateObj.getTime())) {
+return null;
+}
+const components = {
+year: dateObj.getFullYear(),
+month: dateObj.getMonth() + 1,
+day: dateObj.getDate(),
+hour: withTime ? dateObj.getHours() : 0,
+minute: withTime ? dateObj.getMinutes() : 0,
+};
+return components;
 }
 function componentsToDateObject(components) {
-    const { year, month, day, hour, minute } = components;
-    if (!year || !month || !day)
-        return null;
-    return new Date(year, month - 1, day, hour || 0, minute || 0, 0, 0);
+const { year, month, day, hour, minute } = components;
+if (!year || !month || !day)
+return null;
+return new Date(year, month - 1, day, hour || 0, minute || 0, 0, 0);
 }
 function componentsToOutputValue(components) {
-    if (!components.year || !components.month || !components.day) {
-        return null;
-    }
-    const dateObj = componentsToDateObject(components);
-    return dateObj ? dateObj.toISOString() : null;
+if (!components.year || !components.month || !components.day) {
+return null;
+}
+const dateObj = componentsToDateObject(components);
+return dateObj ? dateObj.toISOString() : null;
 }
 function componentsToLocalValue(components, withTime) {
-    if (!components.year || !components.month || !components.day) {
-        return null;
-    }
-    const year = components.year.toString().padStart(4, '0');
-    const month = components.month.toString().padStart(2, '0');
-    const day = components.day.toString().padStart(2, '0');
-    if (withTime) {
-        const hour = (components.hour || 0).toString().padStart(2, '0');
-        const minute = (components.minute || 0).toString().padStart(2, '0');
-        return `${year}-${month}-${day}T${hour}:${minute}`;
-    }
-    else {
-        return `${year}-${month}-${day}`;
-    }
+if (!components.year || !components.month || !components.day) {
+return null;
+}
+const year = components.year.toString().padStart(4, '0');
+const month = components.month.toString().padStart(2, '0');
+const day = components.day.toString().padStart(2, '0');
+if (withTime) {
+const hour = (components.hour || 0).toString().padStart(2, '0');
+const minute = (components.minute || 0).toString().padStart(2, '0');
+return `${year}-${month}-${day}T${hour}:${minute}`;
+}
+else {
+return `${year}-${month}-${day}`;
+}
 }
 function formatDisplayValue(components, formatType, locale, withTime) {
-    if (!components.year || !components.month || !components.day) {
-        return null;
-    }
-    const dateObj = componentsToDateObject(components);
-    if (!dateObj)
-        return null;
-    const options = {
-        dateStyle: formatType || 'long',
-    };
-    if (withTime) {
-        options.timeStyle = 'short';
-    }
-    const formatter = new Intl.DateTimeFormat(locale, options);
-    return formatter.format(dateObj);
+if (!components.year || !components.month || !components.day) {
+return null;
+}
+const dateObj = componentsToDateObject(components);
+if (!dateObj)
+return null;
+const options = {
+dateStyle: formatType || 'long',
+};
+if (withTime) {
+options.timeStyle = 'short';
+}
+const formatter = new Intl.DateTimeFormat(locale, options);
+return formatter.format(dateObj);
 }
 function parseTimeComponents(rawDigits) {
-    if (!rawDigits || rawDigits.length !== 4)
-        return null;
-    const hourStr = rawDigits.substring(0, 2);
-    const minuteStr = rawDigits.substring(2, 4);
-    const hour = parseInt(hourStr, 10);
-    const minute = parseInt(minuteStr, 10);
-    if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
-        return null;
-    }
-    return { hour, minute };
+if (!rawDigits || rawDigits.length !== 4)
+return null;
+const hourStr = rawDigits.substring(0, 2);
+const minuteStr = rawDigits.substring(2, 4);
+const hour = parseInt(hourStr, 10);
+const minute = parseInt(minuteStr, 10);
+if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+return null;
+}
+return { hour, minute };
 }
 function validateTimeDigit(digit, position, currentDigits) {
-    switch (position) {
-        case 0:
-            return digit <= 2;
-        case 1: {
-            const firstHour = parseInt(currentDigits[0], 10);
-            return firstHour === 2 ? digit <= 3 : true;
-        }
-        case 3:
-            return digit <= 5;
-        case 4:
-            return true;
-        default:
-            return false;
-    }
+switch (position) {
+case 0:
+return digit <= 2;
+case 1: {
+const firstHour = parseInt(currentDigits[0], 10);
+return firstHour === 2 ? digit <= 3 : true;
+}
+case 3:
+return digit <= 5;
+case 4:
+return true;
+default:
+return false;
+}
 }
 function formatTimeDisplay(hour, minute) {
-    const hourStr = hour.toString().padStart(2, '0');
-    const minuteStr = minute.toString().padStart(2, '0');
-    return `${hourStr}:${minuteStr}`;
+const hourStr = hour.toString().padStart(2, '0');
+const minuteStr = minute.toString().padStart(2, '0');
+return `${hourStr}:${minuteStr}`;
 }
 function findNextEditablePosition(currentPos) {
-    switch (currentPos) {
-        case 0: return 1;
-        case 1: return 3;
-        case 3: return 4;
-        case 4: return 5;
-        case 5: return 5;
-        default: return currentPos;
-    }
+switch (currentPos) {
+case 0: return 1;
+case 1: return 3;
+case 3: return 4;
+case 4: return 5;
+case 5: return 5;
+default: return currentPos;
+}
 }
 function findPrevEditablePosition(currentPos) {
-    switch (currentPos) {
-        case 5: return 4;
-        case 4: return 3;
-        case 3: return 1;
-        case 1: return 0;
-        case 0: return 0;
-        default: return currentPos;
-    }
+switch (currentPos) {
+case 5: return 4;
+case 4: return 3;
+case 3: return 1;
+case 1: return 0;
+case 0: return 0;
+default: return currentPos;
+}
 }
 function positionToRawDigitIndex(internalPos) {
-    switch (internalPos) {
-        case 0: return 0;
-        case 1: return 1;
-        case 3: return 2;
-        case 4: return 3;
-        default: return 0;
-    }
+switch (internalPos) {
+case 0: return 0;
+case 1: return 1;
+case 3: return 2;
+case 4: return 3;
+default: return 0;
+}
 }
 class TimeInput {
-    constructor(element, datePickerElement, hour = 0, minute = 0) {
-        this.element = element;
-        this.datePickerElement = datePickerElement;
-        const display = formatTimeDisplay(hour, minute);
-        const rawDigits = hour.toString().padStart(2, '0') + minute.toString().padStart(2, '0');
-        this.state = {
-            hour,
-            minute,
-            caretPosition: 0,
-            displayValue: display,
-            rawDigits,
-        };
-        this.element.value = display;
-        this.setupEventListeners();
-    }
-    setupEventListeners() {
-        this.element.addEventListener('keydown', (e) => this.handleKeyDown(e));
-        this.element.addEventListener('input', (e) => this.handleInput(e));
-        this.element.addEventListener('click', () => this.handleClick());
-        this.element.addEventListener('focus', () => this.handleFocus());
-    }
-    handleKeyDown(event) {
-        const key = event.key;
-        switch (key) {
-            case 'ArrowRight':
-                this.handleArrowRight(event);
-                break;
-            case 'ArrowLeft':
-                this.handleArrowLeft(event);
-                break;
-            case 'Backspace':
-                this.handleBackspace(event);
-                break;
-            case 'Delete':
-                this.handleDelete(event);
-                break;
-            case 'Home':
-                event.preventDefault();
-                this.updateState({ caretPosition: 0 });
-                break;
-            case 'End':
-                event.preventDefault();
-                this.updateState({ caretPosition: 5 });
-                break;
-            case 'Tab':
-                break;
-            default:
-                if (/^\d$/.test(key)) {
-                    this.handleDigitInput(event, parseInt(key, 10));
-                }
-                break;
-        }
-    }
-    handleInput(event) {
-        event.preventDefault();
-    }
-    handleClick() {
-        this.updateState({ caretPosition: 0 });
-    }
-    handleFocus() {
-        this.updateState({ caretPosition: 0 });
-    }
-    handleArrowRight(event) {
-        event.preventDefault();
-        const nextPos = findNextEditablePosition(this.state.caretPosition);
-        this.updateState({ caretPosition: nextPos });
-    }
-    handleArrowLeft(event) {
-        event.preventDefault();
-        const prevPos = findPrevEditablePosition(this.state.caretPosition);
-        this.updateState({ caretPosition: prevPos });
-    }
-    handleDigitInput(event, digit) {
-        event.preventDefault();
-        const currentPos = this.state.caretPosition;
-        if (![0, 1, 3, 4].includes(currentPos))
-            return;
-        if (!validateTimeDigit(digit, currentPos, this.state.rawDigits))
-            return;
-        const newState = this.replaceDigitAtPosition(currentPos, digit);
-        if (!newState)
-            return;
-        const nextPos = findNextEditablePosition(currentPos);
-        this.updateState({ ...newState, caretPosition: nextPos });
-        this.notifyTimeChange();
-    }
-    handleBackspace(event) {
-        event.preventDefault();
-        const currentPos = this.state.caretPosition;
-        if (currentPos === 0)
-            return;
-        const targetPos = currentPos === 1 ? 0 :
-            currentPos === 3 ? 1 :
-                currentPos === 4 ? 3 :
-                    currentPos === 5 ? 4 : 0;
-        const newState = this.zeroDigitAtPosition(targetPos);
-        if (!newState)
-            return;
-        this.updateState({ ...newState, caretPosition: targetPos });
-        this.notifyTimeChange();
-    }
-    handleDelete(event) {
-        event.preventDefault();
-        const currentPos = this.state.caretPosition;
-        if (![0, 1, 3, 4].includes(currentPos))
-            return;
-        const newState = this.zeroDigitAtPosition(currentPos);
-        if (!newState)
-            return;
-        this.updateState({ ...newState, caretPosition: currentPos });
-        this.notifyTimeChange();
-    }
-    replaceDigitAtPosition(position, newDigit) {
-        const rawIndex = positionToRawDigitIndex(position);
-        const digitsArray = this.state.rawDigits.split('');
-        digitsArray[rawIndex] = newDigit.toString();
-        const newDigits = digitsArray.join('');
-        const parsed = parseTimeComponents(newDigits);
-        if (!parsed)
-            return null;
-        return {
-            rawDigits: newDigits,
-            hour: parsed.hour,
-            minute: parsed.minute,
-            displayValue: formatTimeDisplay(parsed.hour, parsed.minute),
-        };
-    }
-    zeroDigitAtPosition(position) {
-        return this.replaceDigitAtPosition(position, 0);
-    }
-    updateState(updates) {
-        this.state = { ...this.state, ...updates };
-        this.element.value = this.state.displayValue;
-        const caretPos = this.state.caretPosition;
-        const actualPos = caretPos === 0 ? 0 :
-            caretPos === 1 ? 1 :
-                caretPos === 2 ? 3 :
-                    caretPos === 3 ? 3 :
-                        caretPos === 4 ? 4 :
-                            caretPos === 5 ? 5 : caretPos;
-        this.element.setSelectionRange(actualPos, actualPos);
-    }
-    notifyTimeChange() {
-        this.datePickerElement.handleTimeInputChange(this.state.hour, this.state.minute);
-    }
-    getTime() {
-        return {
-            hour: this.state.hour,
-            minute: this.state.minute,
-        };
-    }
-    setTime(hour, minute) {
-        const display = formatTimeDisplay(hour, minute);
-        const rawDigits = hour.toString().padStart(2, '0') + minute.toString().padStart(2, '0');
-        this.state = {
-            ...this.state,
-            hour,
-            minute,
-            displayValue: display,
-            rawDigits,
-        };
-        this.element.value = display;
-    }
+constructor(element, datePickerElement, hour = 0, minute = 0) {
+this.element = element;
+this.datePickerElement = datePickerElement;
+const display = formatTimeDisplay(hour, minute);
+const rawDigits = hour.toString().padStart(2, '0') + minute.toString().padStart(2, '0');
+this.state = {
+hour,
+minute,
+caretPosition: 0,
+displayValue: display,
+rawDigits,
+};
+this.element.value = display;
+this.setupEventListeners();
+}
+setupEventListeners() {
+this.element.addEventListener('keydown', (e) => this.handleKeyDown(e));
+this.element.addEventListener('input', (e) => this.handleInput(e));
+this.element.addEventListener('click', () => this.handleClick());
+this.element.addEventListener('focus', () => this.handleFocus());
+}
+handleKeyDown(event) {
+const key = event.key;
+switch (key) {
+case 'ArrowRight':
+this.handleArrowRight(event);
+break;
+case 'ArrowLeft':
+this.handleArrowLeft(event);
+break;
+case 'Backspace':
+this.handleBackspace(event);
+break;
+case 'Delete':
+this.handleDelete(event);
+break;
+case 'Home':
+event.preventDefault();
+this.updateState({ caretPosition: 0 });
+break;
+case 'End':
+event.preventDefault();
+this.updateState({ caretPosition: 5 });
+break;
+case 'Tab':
+break;
+default:
+if (/^\d$/.test(key)) {
+this.handleDigitInput(event, parseInt(key, 10));
+}
+break;
+}
+}
+handleInput(event) {
+event.preventDefault();
+}
+handleClick() {
+this.updateState({ caretPosition: 0 });
+}
+handleFocus() {
+this.updateState({ caretPosition: 0 });
+}
+handleArrowRight(event) {
+event.preventDefault();
+const nextPos = findNextEditablePosition(this.state.caretPosition);
+this.updateState({ caretPosition: nextPos });
+}
+handleArrowLeft(event) {
+event.preventDefault();
+const prevPos = findPrevEditablePosition(this.state.caretPosition);
+this.updateState({ caretPosition: prevPos });
+}
+handleDigitInput(event, digit) {
+event.preventDefault();
+const currentPos = this.state.caretPosition;
+if (![0, 1, 3, 4].includes(currentPos))
+return;
+if (!validateTimeDigit(digit, currentPos, this.state.rawDigits))
+return;
+const newState = this.replaceDigitAtPosition(currentPos, digit);
+if (!newState)
+return;
+const nextPos = findNextEditablePosition(currentPos);
+this.updateState({ ...newState, caretPosition: nextPos });
+this.notifyTimeChange();
+}
+handleBackspace(event) {
+event.preventDefault();
+const currentPos = this.state.caretPosition;
+if (currentPos === 0)
+return;
+const targetPos = currentPos === 1 ? 0 :
+currentPos === 3 ? 1 :
+currentPos === 4 ? 3 :
+currentPos === 5 ? 4 : 0;
+const newState = this.zeroDigitAtPosition(targetPos);
+if (!newState)
+return;
+this.updateState({ ...newState, caretPosition: targetPos });
+this.notifyTimeChange();
+}
+handleDelete(event) {
+event.preventDefault();
+const currentPos = this.state.caretPosition;
+if (![0, 1, 3, 4].includes(currentPos))
+return;
+const newState = this.zeroDigitAtPosition(currentPos);
+if (!newState)
+return;
+this.updateState({ ...newState, caretPosition: currentPos });
+this.notifyTimeChange();
+}
+replaceDigitAtPosition(position, newDigit) {
+const rawIndex = positionToRawDigitIndex(position);
+const digitsArray = this.state.rawDigits.split('');
+digitsArray[rawIndex] = newDigit.toString();
+const newDigits = digitsArray.join('');
+const parsed = parseTimeComponents(newDigits);
+if (!parsed)
+return null;
+return {
+rawDigits: newDigits,
+hour: parsed.hour,
+minute: parsed.minute,
+displayValue: formatTimeDisplay(parsed.hour, parsed.minute),
+};
+}
+zeroDigitAtPosition(position) {
+return this.replaceDigitAtPosition(position, 0);
+}
+updateState(updates) {
+this.state = { ...this.state, ...updates };
+this.element.value = this.state.displayValue;
+const caretPos = this.state.caretPosition;
+const actualPos = caretPos === 0 ? 0 :
+caretPos === 1 ? 1 :
+caretPos === 2 ? 3 :
+caretPos === 3 ? 3 :
+caretPos === 4 ? 4 :
+caretPos === 5 ? 5 : caretPos;
+this.element.setSelectionRange(actualPos, actualPos);
+}
+notifyTimeChange() {
+this.datePickerElement.handleTimeInputChange(this.state.hour, this.state.minute);
+}
+getTime() {
+return {
+hour: this.state.hour,
+minute: this.state.minute,
+};
+}
+setTime(hour, minute) {
+const display = formatTimeDisplay(hour, minute);
+const rawDigits = hour.toString().padStart(2, '0') + minute.toString().padStart(2, '0');
+this.state = {
+...this.state,
+hour,
+minute,
+displayValue: display,
+rawDigits,
+};
+this.element.value = display;
+}
 }
 export class TyDatePicker extends TyComponent {
-    constructor() {
-        super();
-        this._state = {
-            withTime: false,
-            open: false,
-        };
-        this._closeTimestamp = 0;
-        this._customFlavorSheet = null;
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: datePickerStyles, id: 'ty-date-picker' });
-    }
-    onConnect() {
-        this.initializeState();
-        this.render();
-        this._localeObserver = observeLocaleChanges(this, () => {
-            this.render();
-        });
-        this._syncCustomFlavor();
-    }
-    _syncCustomFlavor() {
-        const flavor = this.flavor === 'default' ? 'neutral' : this.flavor;
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, flavor, ({ base }) => datePickerCustomFlavorCss(base));
-    }
-    onDisconnect() {
-        if (this._localeObserver) {
-            this._localeObserver();
-            this._localeObserver = undefined;
-        }
-        this.cleanup();
-    }
-    onPropertiesChanged(changes) {
-        for (const { name, newValue } of changes) {
-            switch (name) {
-                case 'flavor':
-                    this._syncCustomFlavor();
-                    break;
-                case 'size':
-                case 'label':
-                case 'placeholder':
-                case 'required':
-                case 'disabled':
-                case 'clearable':
-                case 'format':
-                case 'locale':
-                    break;
-                case 'value': {
-                    const newComponents = parseValue(newValue, this._state.withTime);
-                    if (newComponents === null) {
-                        const hasDate = this._state.year !== undefined ||
-                            this._state.month !== undefined ||
-                            this._state.day !== undefined;
-                        if (hasDate) {
-                            this._state = {
-                                withTime: this._state.withTime,
-                                open: this._state.open,
-                            };
-                        }
-                        break;
-                    }
-                    const currentComponents = {
-                        year: this._state.year,
-                        month: this._state.month,
-                        day: this._state.day,
-                        hour: this._state.hour,
-                        minute: this._state.minute,
-                    };
-                    const changed = newComponents?.year !== currentComponents.year ||
-                        newComponents?.month !== currentComponents.month ||
-                        newComponents?.day !== currentComponents.day ||
-                        newComponents?.hour !== currentComponents.hour ||
-                        newComponents?.minute !== currentComponents.minute;
-                    if (changed) {
-                        this._state = {
-                            ...this._state,
-                            ...newComponents,
-                        };
-                    }
-                    break;
-                }
-                case 'with-time': {
-                    const newWithTime = newValue;
-                    const oldWithTime = this._state.withTime;
-                    if (newWithTime !== oldWithTime) {
-                        this._state.withTime = newWithTime;
-                        const hasDate = this._state.year !== undefined &&
-                            this._state.month !== undefined &&
-                            this._state.day !== undefined;
-                        if (hasDate) {
-                            this.syncFormValue();
-                        }
-                    }
-                    break;
-                }
-            }
-        }
-    }
-    getFormValue() {
-        return componentsToOutputValue(this.getComponents());
-    }
-    getComponents() {
-        return {
-            year: this._state.year,
-            month: this._state.month,
-            day: this._state.day,
-            hour: this._state.hour,
-            minute: this._state.minute,
-        };
-    }
-    hasDate() {
-        return !!(this._state.year && this._state.month && this._state.day);
-    }
-    getFormattedValue(components) {
-        const c = components || this.getComponents();
-        if (!c.year || !c.month || !c.day)
-            return null;
-        return formatDisplayValue(c, this.getProperty('format') || 'long', getEffectiveLocale(this, this.getProperty('locale')), this._state.withTime);
-    }
-    initializeState() {
-        const valueAttr = this.getProperty('value');
-        const withTime = this.getProperty('with-time');
-        const components = parseValue(valueAttr, withTime);
-        if (components === null) {
-            this._state = {
-                withTime,
-                open: false,
-            };
-        }
-        else {
-            this._state = {
-                ...components,
-                withTime,
-                open: false,
-            };
-        }
-        this.syncFormValue();
-    }
-    updateState(updates, forceSync = false) {
-        this._state = { ...this._state, ...updates };
-        const shouldSync = forceSync || !this._state.open || !this._state.withTime;
-        if (shouldSync) {
-            this.syncFormValue();
-        }
-    }
-    syncFormValue() {
-        const utcValue = this.getFormValue();
-        const currentValue = this.getProperty('value');
-        if (utcValue !== currentValue) {
-            if (utcValue) {
-                this.setProperty('value', utcValue);
-            }
-            else {
-                this.setProperty('value', null);
-            }
-        }
-    }
-    handleTimeInputChange(hour, minute) {
-        if (!this.hasDate())
-            return;
-        const components = { ...this.getComponents(), hour, minute };
-        this.updateState(components, true);
-        this.emitChangeEvent(components, 'time-change');
-    }
-    emitChangeEvent(components, source) {
-        const utcValue = components ? componentsToOutputValue(components) : null;
-        const localValue = components ? componentsToLocalValue(components, this._state.withTime) : null;
-        const milliseconds = components ? componentsToDateObject(components)?.getTime() ?? null : null;
-        const formatted = components ? this.getFormattedValue(components) : null;
-        const detail = {
-            value: utcValue,
-            localValue,
-            milliseconds,
-            formatted,
-            source,
-        };
-        const event = new CustomEvent('change', {
-            detail,
-            bubbles: true,
-            cancelable: true,
-        });
-        this.dispatchEvent(event);
-    }
-    get size() { return this.getProperty('size'); }
-    set size(v) { this.setProperty('size', v); }
-    get placement() { return this.getProperty('placement'); }
-    set placement(v) { this.setProperty('placement', v); }
-    get flavor() { return this.getProperty('flavor'); }
-    set flavor(v) { this.setProperty('flavor', v); }
-    get label() { return this.getProperty('label'); }
-    set label(v) { this.setProperty('label', v); }
-    get placeholder() { return this.getProperty('placeholder'); }
-    set placeholder(v) { this.setProperty('placeholder', v); }
-    get name() { return this.getProperty('name'); }
-    set name(v) { this.setProperty('name', v); }
-    get format() { return this.getProperty('format'); }
-    set format(v) { this.setProperty('format', v); }
-    get locale() { return this.getProperty('locale'); }
-    set locale(v) { this.setProperty('locale', v); }
-    get required() { return this.getProperty('required'); }
-    set required(v) { this.setProperty('required', v); }
-    get disabled() { return this.getProperty('disabled'); }
-    set disabled(v) { this.setProperty('disabled', v); }
-    get clearable() { return this.getProperty('clearable'); }
-    set clearable(v) { this.setProperty('clearable', v); }
-    get min() { return this.getProperty('min'); }
-    set min(v) { this.setProperty('min', v ?? ''); }
-    get max() { return this.getProperty('max'); }
-    set max(v) { this.setProperty('max', v ?? ''); }
-    get withTime() { return this.getProperty('with-time'); }
-    set withTime(v) { this.setProperty('with-time', v); }
-    get value() {
-        return this.getProperty('value') || null;
-    }
-    set value(val) {
-        if (val === null || val === undefined || val === '') {
-            this.setProperty('value', null);
-        }
-        else {
-            const strValue = val instanceof Date ? val.toISOString() : val;
-            this.setProperty('value', strValue);
-        }
-    }
-    clear() {
-        this.clearValue();
-    }
-    buildStubClasses() {
-        const classes = ['date-picker-stub'];
-        const size = this.getProperty('size') || 'md';
-        classes.push(size);
-        if (this.getProperty('disabled'))
-            classes.push('disabled');
-        if (this.getProperty('required'))
-            classes.push('required');
-        if (this._state.open)
-            classes.push('open');
-        return classes.join(' ');
-    }
-    renderStub() {
-        const stub = document.createElement('div');
-        stub.className = this.buildStubClasses();
-        const isDisabled = this.getProperty('disabled');
-        if (isDisabled) {
-            stub.setAttribute('disabled', 'true');
-        }
-        stub.setAttribute('role', 'button');
-        stub.setAttribute('aria-haspopup', 'dialog');
-        stub.setAttribute('aria-expanded', String(this._state.open));
-        stub.setAttribute('tabindex', isDisabled ? '-1' : '0');
-        if (isDisabled)
-            stub.setAttribute('aria-disabled', 'true');
-        if (this.getProperty('label')) {
-            stub.setAttribute('aria-labelledby', `date-picker-label-${getElementHash(this)}`);
-        }
-        stub.addEventListener('keydown', (e) => {
-            const ke = e;
-            if (this._state.open)
-                return;
-            if (ke.key === 'Enter' || ke.key === ' ') {
-                ke.preventDefault();
-                this.handleStubClick(e);
-            }
-        });
-        const startSlot = document.createElement('slot');
-        startSlot.name = 'start';
-        const displayText = document.createElement('span');
-        displayText.className = 'stub-text';
-        const formattedValue = this.getFormattedValue();
-        const placeholder = this.getProperty('placeholder') || 'Select date...';
-        displayText.textContent = formattedValue || placeholder;
-        if (!formattedValue) {
-            displayText.classList.add('placeholder');
-        }
-        const iconContainer = document.createElement('div');
-        iconContainer.className = 'stub-icons';
-        const clearable = this.getProperty('clearable');
-        if (clearable && formattedValue && !isDisabled) {
-            const clearButton = document.createElement('button');
-            clearButton.className = 'stub-clear';
-            clearButton.type = 'button';
-            clearButton.innerHTML = CLEAR_ICON_SVG;
-            clearButton.addEventListener('click', (e) => this.handleClearClick(e));
-            iconContainer.appendChild(clearButton);
-        }
-        const calendarIcon = document.createElement('span');
-        calendarIcon.className = 'stub-arrow';
-        calendarIcon.innerHTML = CALENDAR_ICON_SVG;
-        iconContainer.appendChild(calendarIcon);
-        stub.addEventListener('click', (e) => this.handleStubClick(e));
-        stub.appendChild(startSlot);
-        stub.appendChild(displayText);
-        stub.appendChild(iconContainer);
-        return stub;
-    }
-    createTimeInputElement() {
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.className = 'time-input';
-        input.placeholder = 'HH:mm';
-        input.autocomplete = 'off';
-        input.maxLength = 5;
-        return input;
-    }
-    renderTimeSection() {
-        const timeSection = document.createElement('div');
-        timeSection.className = 'time-section';
-        const timeLabel = document.createElement('label');
-        timeLabel.className = 'time-label';
-        timeLabel.textContent = 'Time:';
-        const timeInputElement = this.createTimeInputElement();
-        const hour = this._state.hour || 0;
-        const minute = this._state.minute || 0;
-        this._timeInput = new TimeInput(timeInputElement, this, hour, minute);
-        const timeIcon = document.createElement('span');
-        timeIcon.className = 'time-icon';
-        timeIcon.innerHTML = SCHEDULE_ICON_SVG;
-        timeSection.appendChild(timeLabel);
-        timeSection.appendChild(timeInputElement);
-        timeSection.appendChild(timeIcon);
-        return timeSection;
-    }
-    renderCalendarDropdown() {
-        const dialog = document.createElement('dialog');
-        dialog.className = 'calendar-dialog';
-        const contentWrapper = document.createElement('div');
-        contentWrapper.className = 'calendar-content';
-        const calendar = document.createElement('ty-calendar');
-        if (this._state.year && this._state.month && this._state.day) {
-            calendar.setAttribute('year', this._state.year.toString());
-            calendar.setAttribute('month', this._state.month.toString());
-            calendar.setAttribute('day', this._state.day.toString());
-        }
-        const locale = getEffectiveLocale(this, this.getProperty('locale'));
-        if (locale) {
-            calendar.setAttribute('locale', locale);
-        }
-        const min = this.getProperty('min');
-        const max = this.getProperty('max');
-        if (min)
-            calendar.setAttribute('min', min);
-        if (max)
-            calendar.setAttribute('max', max);
-        const flavor = this.getProperty('flavor');
-        if (flavor && flavor !== 'default')
-            calendar.setAttribute('flavor', flavor);
-        calendar.addEventListener('change', (e) => this.handleCalendarChange(e));
-        contentWrapper.appendChild(calendar);
-        if (this._state.withTime) {
-            contentWrapper.appendChild(this.renderTimeSection());
-        }
-        dialog.appendChild(contentWrapper);
-        dialog.addEventListener('close', () => {
-            this.updateState({ open: false });
-        });
-        return dialog;
-    }
-    renderNativeInput() {
-        const wrapper = document.createElement('div');
-        wrapper.className = 'dropdown-wrapper';
-        const stub = document.createElement('div');
-        stub.className = this.buildStubClasses();
-        const isDisabled = this.getProperty('disabled');
-        if (isDisabled) {
-            stub.setAttribute('disabled', 'true');
-        }
-        const input = document.createElement('input');
-        input.className = 'native-date-input';
-        input.type = this._state.withTime ? 'datetime-local' : 'date';
-        if (isDisabled)
-            input.disabled = true;
-        if (this.getProperty('required'))
-            input.required = true;
-        const minBound = this.getProperty('min');
-        const maxBound = this.getProperty('max');
-        if (minBound)
-            input.min = this._state.withTime ? `${minBound}T00:00` : minBound;
-        if (maxBound)
-            input.max = this._state.withTime ? `${maxBound}T23:59` : maxBound;
-        const localValue = componentsToLocalValue(this.getComponents(), this._state.withTime);
-        if (localValue) {
-            input.value = localValue;
-        }
-        const placeholder = this.getProperty('placeholder') || 'Select date...';
-        const formattedValue = this.getFormattedValue();
-        const placeholderEl = document.createElement('span');
-        placeholderEl.className = 'stub-text' + (formattedValue ? '' : ' placeholder');
-        placeholderEl.textContent = formattedValue || placeholder;
-        input.addEventListener('change', () => {
-            if (!input.value) {
-                this.clearValue();
-                return;
-            }
-            const parsed = parseValue(input.value, this._state.withTime);
-            if (parsed) {
-                this.updateState(parsed, true);
-                this.emitChangeEvent(parsed, 'selection');
-            }
-        });
-        const startSlot = document.createElement('slot');
-        startSlot.name = 'start';
-        stub.appendChild(startSlot);
-        stub.appendChild(input);
-        stub.appendChild(placeholderEl);
-        const iconContainer = document.createElement('div');
-        iconContainer.className = 'stub-icons';
-        const clearable = this.getProperty('clearable');
-        if (clearable && localValue && !isDisabled) {
-            const clearButton = document.createElement('button');
-            clearButton.className = 'stub-clear';
-            clearButton.type = 'button';
-            clearButton.innerHTML = CLEAR_ICON_SVG;
-            clearButton.addEventListener('click', (e) => this.handleClearClick(e));
-            iconContainer.appendChild(clearButton);
-        }
-        const calendarIcon = document.createElement('span');
-        calendarIcon.className = 'stub-arrow';
-        calendarIcon.innerHTML = CALENDAR_ICON_SVG;
-        iconContainer.appendChild(calendarIcon);
-        stub.appendChild(iconContainer);
-        wrapper.appendChild(stub);
-        return wrapper;
-    }
-    calculateCalendarPosition() {
-        if (!this.shadowRoot)
-            return;
-        if (isMobileTouch())
-            return;
-        const stub = this.shadowRoot.querySelector('.date-picker-stub');
-        const dialog = this.shadowRoot.querySelector('.calendar-dialog');
-        if (!stub || !dialog)
-            return;
-        const stubRect = stub.getBoundingClientRect();
-        const dialogRect = dialog.getBoundingClientRect();
-        const estimatedHeight = dialogRect.height || 400;
-        const popupWidth = dialogRect.width || 320;
-        const wrapPadding = 8;
-        const anchored = placementToAnchored(this.getProperty('placement'));
-        const pos = computeAnchoredPosition({
-            anchorRect: stubRect,
-            popupWidth,
-            popupHeight: estimatedHeight,
-            gap: 0,
-            align: anchored.align,
-            side: anchored.side,
-        });
-        const positionBelow = pos.below;
-        const x = pos.x - wrapPadding;
-        const y = positionBelow ? pos.topY : pos.bottomY;
-        this.style.setProperty('--calendar-x', `${x}px`);
-        this.style.setProperty('--calendar-y', `${y}px`);
-        this.style.setProperty('--calendar-offset-x', '0px');
-        this.style.setProperty('--calendar-offset-y', '0px');
-        if (positionBelow) {
-            dialog.classList.add('position-below');
-            dialog.classList.remove('position-above');
-        }
-        else {
-            dialog.classList.add('position-above');
-            dialog.classList.remove('position-below');
-        }
-    }
-    renderContainer() {
-        const container = document.createElement('div');
-        container.className = 'dropdown-container';
-        const label = this.getProperty('label');
-        if (label) {
-            const labelEl = document.createElement('label');
-            labelEl.className = 'ty-field-label';
-            labelEl.id = `date-picker-label-${getElementHash(this)}`;
-            labelEl.innerHTML = label + (this.getProperty('required') ? '<span class="required-icon">*</span>' : '');
-            container.appendChild(labelEl);
-        }
-        return container;
-    }
-    render() {
-        if (!this.shadowRoot)
-            return;
-        ensureStyles(this.shadowRoot, { css: datePickerStyles, id: 'ty-date-picker' });
-        if (isMobileTouch()) {
-            const existingNativeInput = this.shadowRoot.querySelector('.native-date-input');
-            if (existingNativeInput) {
-                this.updateDisplay();
-                return;
-            }
-            this.shadowRoot.innerHTML = '';
-            const container = this.renderContainer();
-            container.appendChild(this.renderNativeInput());
-            this.shadowRoot.appendChild(container);
-            return;
-        }
-        const existingDialog = this.shadowRoot.querySelector('.calendar-dialog');
-        const isDialogOpen = existingDialog && existingDialog.open;
-        if (isDialogOpen && this._state.open) {
-            this.updateDisplay();
-            this.calculateCalendarPosition();
-            return;
-        }
-        this.shadowRoot.innerHTML = '';
-        const container = this.renderContainer();
-        const wrapper = document.createElement('div');
-        wrapper.className = 'dropdown-wrapper';
-        wrapper.appendChild(this.renderStub());
-        wrapper.appendChild(this.renderCalendarDropdown());
-        container.appendChild(wrapper);
-        this.shadowRoot.appendChild(container);
-        this.setupEventListeners();
-    }
-    updateDisplay() {
-        if (!this.shadowRoot)
-            return;
-        const formattedValue = this.getFormattedValue();
-        const placeholder = this.getProperty('placeholder') || 'Select date...';
-        const hasValue = this.hasDate();
-        const clearable = this.getProperty('clearable');
-        const isDisabled = this.getProperty('disabled');
-        const stubText = this.shadowRoot.querySelector('.stub-text');
-        if (stubText) {
-            stubText.textContent = formattedValue || placeholder;
-            stubText.classList.toggle('placeholder', !formattedValue);
-        }
-        const clearButton = this.shadowRoot.querySelector('.stub-clear');
-        if (clearButton) {
-            clearButton.style.display = (clearable && hasValue && !isDisabled) ? '' : 'none';
-        }
-        if (isMobileTouch()) {
-            const nativeInput = this.shadowRoot.querySelector('.native-date-input');
-            if (nativeInput) {
-                const localValue = componentsToLocalValue(this.getComponents(), this._state.withTime);
-                nativeInput.value = localValue || '';
-            }
-            return;
-        }
-        const calendar = this.shadowRoot.querySelector('ty-calendar');
-        if (calendar && hasValue) {
-            calendar.setAttribute('year', this._state.year.toString());
-            calendar.setAttribute('month', this._state.month.toString());
-            calendar.setAttribute('day', this._state.day.toString());
-        }
-        if (calendar) {
-            const flavor = this.getProperty('flavor');
-            if (flavor && flavor !== 'default')
-                calendar.setAttribute('flavor', flavor);
-            else
-                calendar.removeAttribute('flavor');
-        }
-        if (this._timeInput && this._state.hour !== undefined && this._state.minute !== undefined) {
-            this._timeInput.setTime(this._state.hour, this._state.minute);
-        }
-    }
-    setupEventListeners() {
-        if (this._clickListener) {
-            document.removeEventListener('click', this._clickListener);
-        }
-        if (this._keydownListener) {
-            document.removeEventListener('keydown', this._keydownListener);
-        }
-        this._clickListener = (e) => this.handleOutsideClick(e);
-        this._keydownListener = (e) => this.handleEscapeKey(e);
-        document.addEventListener('click', this._clickListener);
-        document.addEventListener('keydown', this._keydownListener);
-        const dialog = this.shadowRoot?.querySelector('.calendar-dialog');
-        if (dialog) {
-            this._dialogClickListener = (e) => this.handleDialogClick(e);
-            dialog.addEventListener('click', this._dialogClickListener);
-        }
-    }
-    handleStubClick(event) {
-        event.preventDefault();
-        const dialog = this.shadowRoot?.querySelector('.calendar-dialog');
-        if (this._state.open && (!dialog || !dialog.open)) {
-            this.updateState({ open: false }, true);
-            unlockScroll(`date-picker-${this.id || this.toString()}`);
-        }
-        const disabled = this.getProperty('disabled');
-        if (!disabled && Date.now() - this._closeTimestamp > 300) {
-            this.openDropdown();
-        }
-    }
-    clearValue() {
-        this.updateState({
-            year: undefined,
-            month: undefined,
-            day: undefined,
-            hour: undefined,
-            minute: undefined,
-        }, true);
-        this.value = null;
-        this.emitChangeEvent(null, 'clear');
-        this.render();
-    }
-    handleClearClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.clearValue();
-    }
-    handleCalendarChange(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const customEvent = event;
-        const detail = customEvent.detail;
-        const dayContext = detail.dayContext;
-        if (!dayContext)
-            return;
-        const newComponents = {
-            year: dayContext.year,
-            month: dayContext.month,
-            day: dayContext.dayInMonth,
-            hour: this._state.hour,
-            minute: this._state.minute,
-        };
-        this.updateState(newComponents, true);
-        this.emitChangeEvent(newComponents, 'selection');
-        if (!this._state.withTime) {
-            this.closeDropdown();
-        }
-        else {
-            requestAnimationFrame(() => {
-                if (!this.shadowRoot)
-                    return;
-                const timeInput = this.shadowRoot.querySelector('.time-input');
-                if (timeInput) {
-                    timeInput.focus();
-                }
-            });
-        }
-    }
-    handleDialogClick(event) {
-        if (!this.shadowRoot)
-            return;
-        const dialog = this.shadowRoot.querySelector('.calendar-dialog');
-        const content = this.shadowRoot.querySelector('.calendar-content');
-        if (event.target === dialog && this._state.open && content && !content.contains(event.target)) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.closeDropdown();
-        }
-    }
-    handleOutsideClick(event) {
-        if (!this.shadowRoot)
-            return;
-        const target = event.target;
-        const dialog = this.shadowRoot.querySelector('.calendar-dialog');
-        if (this._state.open && dialog && !this.contains(target) && !dialog.contains(target)) {
-            this.closeDropdown();
-        }
-    }
-    handleEscapeKey(event) {
-        const keyboardEvent = event;
-        if (keyboardEvent.key === 'Escape' && this._state.open) {
-            keyboardEvent.preventDefault();
-            this.closeDropdown();
-        }
-    }
-    openDropdown() {
-        if (this._state.open)
-            return;
-        if (isMobileTouch())
-            return;
-        this.updateState({ open: true });
-        this.dispatchEvent(new CustomEvent('open'));
-        this.render();
-        requestAnimationFrame(() => {
-            if (!this.shadowRoot)
-                return;
-            const dialog = this.shadowRoot.querySelector('.calendar-dialog');
-            if (dialog) {
-                const pickerId = `date-picker-${this.id || this.toString()}`;
-                lockScroll(pickerId);
-                dialog.showModal();
-                this.calculateCalendarPosition();
-                dialog.classList.add('open');
-                const stubEl = this.shadowRoot.querySelector('.date-picker-stub');
-                if (stubEl)
-                    stubEl.setAttribute('aria-expanded', 'true');
-                const focusedElement = this.shadowRoot.activeElement;
-                if (focusedElement) {
-                    focusedElement.blur();
-                }
-            }
-        });
-    }
-    closeDropdown() {
-        if (!this._state.open)
-            return;
-        this._closeTimestamp = Date.now();
-        const pickerId = `date-picker-${this.id || this.toString()}`;
-        this.updateState({ open: false }, true);
-        unlockScroll(pickerId);
-        if (this.shadowRoot) {
-            const dialog = this.shadowRoot.querySelector('.calendar-dialog');
-            if (dialog) {
-                dialog.classList.remove('position-above', 'position-below', 'open');
-                dialog.close();
-            }
-            const stubEl = this.shadowRoot.querySelector('.date-picker-stub');
-            if (stubEl)
-                stubEl.setAttribute('aria-expanded', 'false');
-        }
-        this.dispatchEvent(new CustomEvent('close'));
-        this.render();
-    }
-    cleanup() {
-        if (this._clickListener) {
-            document.removeEventListener('click', this._clickListener);
-        }
-        if (this._keydownListener) {
-            document.removeEventListener('keydown', this._keydownListener);
-        }
-        if (this._dialogClickListener && this.shadowRoot) {
-            const dialog = this.shadowRoot.querySelector('.calendar-dialog');
-            if (dialog) {
-                dialog.removeEventListener('click', this._dialogClickListener);
-            }
-        }
-        if (this._state.open) {
-            const pickerId = `date-picker-${this.id || this.toString()}`;
-            unlockScroll(pickerId);
-        }
-        this._clickListener = undefined;
-        this._keydownListener = undefined;
-        this._dialogClickListener = undefined;
-        this._timeInput = undefined;
-    }
+constructor() {
+super();
+this._state = {
+withTime: false,
+open: false,
+};
+this._closeTimestamp = 0;
+this._customFlavorSheet = null;
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: datePickerStyles, id: 'ty-date-picker' });
+}
+onConnect() {
+this.initializeState();
+this.render();
+this._localeObserver = observeLocaleChanges(this, () => {
+this.render();
+});
+this._syncCustomFlavor();
+}
+_syncCustomFlavor() {
+const flavor = this.flavor === 'default' ? 'neutral' : this.flavor;
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, flavor, ({ base }) => datePickerCustomFlavorCss(base));
+}
+onDisconnect() {
+if (this._localeObserver) {
+this._localeObserver();
+this._localeObserver = undefined;
+}
+this.cleanup();
+}
+onPropertiesChanged(changes) {
+for (const { name, newValue } of changes) {
+switch (name) {
+case 'flavor':
+this._syncCustomFlavor();
+break;
+case 'size':
+case 'label':
+case 'placeholder':
+case 'required':
+case 'disabled':
+case 'clearable':
+case 'format':
+case 'locale':
+break;
+case 'value': {
+const newComponents = parseValue(newValue, this._state.withTime);
+if (newComponents === null) {
+const hasDate = this._state.year !== undefined ||
+this._state.month !== undefined ||
+this._state.day !== undefined;
+if (hasDate) {
+this._state = {
+withTime: this._state.withTime,
+open: this._state.open,
+};
+}
+break;
+}
+const currentComponents = {
+year: this._state.year,
+month: this._state.month,
+day: this._state.day,
+hour: this._state.hour,
+minute: this._state.minute,
+};
+const changed = newComponents?.year !== currentComponents.year ||
+newComponents?.month !== currentComponents.month ||
+newComponents?.day !== currentComponents.day ||
+newComponents?.hour !== currentComponents.hour ||
+newComponents?.minute !== currentComponents.minute;
+if (changed) {
+this._state = {
+...this._state,
+...newComponents,
+};
+}
+break;
+}
+case 'with-time': {
+const newWithTime = newValue;
+const oldWithTime = this._state.withTime;
+if (newWithTime !== oldWithTime) {
+this._state.withTime = newWithTime;
+const hasDate = this._state.year !== undefined &&
+this._state.month !== undefined &&
+this._state.day !== undefined;
+if (hasDate) {
+this.syncFormValue();
+}
+}
+break;
+}
+}
+}
+}
+getFormValue() {
+return componentsToOutputValue(this.getComponents());
+}
+getComponents() {
+return {
+year: this._state.year,
+month: this._state.month,
+day: this._state.day,
+hour: this._state.hour,
+minute: this._state.minute,
+};
+}
+hasDate() {
+return !!(this._state.year && this._state.month && this._state.day);
+}
+getFormattedValue(components) {
+const c = components || this.getComponents();
+if (!c.year || !c.month || !c.day)
+return null;
+return formatDisplayValue(c, this.getProperty('format') || 'long', getEffectiveLocale(this, this.getProperty('locale')), this._state.withTime);
+}
+initializeState() {
+const valueAttr = this.getProperty('value');
+const withTime = this.getProperty('with-time');
+const components = parseValue(valueAttr, withTime);
+if (components === null) {
+this._state = {
+withTime,
+open: false,
+};
+}
+else {
+this._state = {
+...components,
+withTime,
+open: false,
+};
+}
+this.syncFormValue();
+}
+updateState(updates, forceSync = false) {
+this._state = { ...this._state, ...updates };
+const shouldSync = forceSync || !this._state.open || !this._state.withTime;
+if (shouldSync) {
+this.syncFormValue();
+}
+}
+syncFormValue() {
+const utcValue = this.getFormValue();
+const currentValue = this.getProperty('value');
+if (utcValue !== currentValue) {
+if (utcValue) {
+this.setProperty('value', utcValue);
+}
+else {
+this.setProperty('value', null);
+}
+}
+}
+handleTimeInputChange(hour, minute) {
+if (!this.hasDate())
+return;
+const components = { ...this.getComponents(), hour, minute };
+this.updateState(components, true);
+this.emitChangeEvent(components, 'time-change');
+}
+emitChangeEvent(components, source) {
+const utcValue = components ? componentsToOutputValue(components) : null;
+const localValue = components ? componentsToLocalValue(components, this._state.withTime) : null;
+const milliseconds = components ? componentsToDateObject(components)?.getTime() ?? null : null;
+const formatted = components ? this.getFormattedValue(components) : null;
+const detail = {
+value: utcValue,
+localValue,
+milliseconds,
+formatted,
+source,
+};
+const event = new CustomEvent('change', {
+detail,
+bubbles: true,
+cancelable: true,
+});
+this.dispatchEvent(event);
+}
+get size() { return this.getProperty('size'); }
+set size(v) { this.setProperty('size', v); }
+get placement() { return this.getProperty('placement'); }
+set placement(v) { this.setProperty('placement', v); }
+get flavor() { return this.getProperty('flavor'); }
+set flavor(v) { this.setProperty('flavor', v); }
+get label() { return this.getProperty('label'); }
+set label(v) { this.setProperty('label', v); }
+get placeholder() { return this.getProperty('placeholder'); }
+set placeholder(v) { this.setProperty('placeholder', v); }
+get name() { return this.getProperty('name'); }
+set name(v) { this.setProperty('name', v); }
+get format() { return this.getProperty('format'); }
+set format(v) { this.setProperty('format', v); }
+get locale() { return this.getProperty('locale'); }
+set locale(v) { this.setProperty('locale', v); }
+get required() { return this.getProperty('required'); }
+set required(v) { this.setProperty('required', v); }
+get disabled() { return this.getProperty('disabled'); }
+set disabled(v) { this.setProperty('disabled', v); }
+get clearable() { return this.getProperty('clearable'); }
+set clearable(v) { this.setProperty('clearable', v); }
+get min() { return this.getProperty('min'); }
+set min(v) { this.setProperty('min', v ?? ''); }
+get max() { return this.getProperty('max'); }
+set max(v) { this.setProperty('max', v ?? ''); }
+get withTime() { return this.getProperty('with-time'); }
+set withTime(v) { this.setProperty('with-time', v); }
+get value() {
+return this.getProperty('value') || null;
+}
+set value(val) {
+if (val === null || val === undefined || val === '') {
+this.setProperty('value', null);
+}
+else {
+const strValue = val instanceof Date ? val.toISOString() : val;
+this.setProperty('value', strValue);
+}
+}
+clear() {
+this.clearValue();
+}
+buildStubClasses() {
+const classes = ['date-picker-stub'];
+if (this.getProperty('disabled'))
+classes.push('disabled');
+if (this.getProperty('required'))
+classes.push('required');
+if (this._state.open)
+classes.push('open');
+return classes.join(' ');
+}
+renderStub() {
+const stub = document.createElement('div');
+stub.className = this.buildStubClasses();
+const isDisabled = this.getProperty('disabled');
+if (isDisabled) {
+stub.setAttribute('disabled', 'true');
+}
+stub.setAttribute('role', 'button');
+stub.setAttribute('aria-haspopup', 'dialog');
+stub.setAttribute('aria-expanded', String(this._state.open));
+stub.setAttribute('tabindex', isDisabled ? '-1' : '0');
+if (isDisabled)
+stub.setAttribute('aria-disabled', 'true');
+if (this.getProperty('label')) {
+stub.setAttribute('aria-labelledby', `date-picker-label-${getElementHash(this)}`);
+}
+stub.addEventListener('keydown', (e) => {
+const ke = e;
+if (this._state.open)
+return;
+if (ke.key === 'Enter' || ke.key === ' ') {
+ke.preventDefault();
+this.handleStubClick(e);
+}
+});
+const startSlot = document.createElement('slot');
+startSlot.name = 'start';
+const displayText = document.createElement('span');
+displayText.className = 'stub-text';
+const formattedValue = this.getFormattedValue();
+const placeholder = this.getProperty('placeholder') || 'Select date...';
+displayText.textContent = formattedValue || placeholder;
+if (!formattedValue) {
+displayText.classList.add('placeholder');
+}
+const iconContainer = document.createElement('div');
+iconContainer.className = 'stub-icons';
+const clearable = this.getProperty('clearable');
+if (clearable && formattedValue && !isDisabled) {
+const clearButton = document.createElement('button');
+clearButton.className = 'stub-clear';
+clearButton.type = 'button';
+clearButton.innerHTML = CLEAR_ICON_SVG;
+clearButton.addEventListener('click', (e) => this.handleClearClick(e));
+iconContainer.appendChild(clearButton);
+}
+const calendarIcon = document.createElement('span');
+calendarIcon.className = 'stub-arrow';
+calendarIcon.innerHTML = CALENDAR_ICON_SVG;
+iconContainer.appendChild(calendarIcon);
+stub.addEventListener('click', (e) => this.handleStubClick(e));
+stub.appendChild(startSlot);
+stub.appendChild(displayText);
+stub.appendChild(iconContainer);
+return stub;
+}
+createTimeInputElement() {
+const input = document.createElement('input');
+input.type = 'text';
+input.className = 'time-input';
+input.placeholder = 'HH:mm';
+input.autocomplete = 'off';
+input.maxLength = 5;
+return input;
+}
+renderTimeSection() {
+const timeSection = document.createElement('div');
+timeSection.className = 'time-section';
+const timeLabel = document.createElement('label');
+timeLabel.className = 'time-label';
+timeLabel.textContent = 'Time:';
+const timeInputElement = this.createTimeInputElement();
+const hour = this._state.hour || 0;
+const minute = this._state.minute || 0;
+this._timeInput = new TimeInput(timeInputElement, this, hour, minute);
+const timeIcon = document.createElement('span');
+timeIcon.className = 'time-icon';
+timeIcon.innerHTML = SCHEDULE_ICON_SVG;
+timeSection.appendChild(timeLabel);
+timeSection.appendChild(timeInputElement);
+timeSection.appendChild(timeIcon);
+return timeSection;
+}
+renderCalendarDropdown() {
+const dialog = document.createElement('dialog');
+dialog.className = 'calendar-dialog';
+const contentWrapper = document.createElement('div');
+contentWrapper.className = 'calendar-content';
+const calendar = document.createElement('ty-calendar');
+if (this._state.year && this._state.month && this._state.day) {
+calendar.setAttribute('year', this._state.year.toString());
+calendar.setAttribute('month', this._state.month.toString());
+calendar.setAttribute('day', this._state.day.toString());
+}
+const locale = getEffectiveLocale(this, this.getProperty('locale'));
+if (locale) {
+calendar.setAttribute('locale', locale);
+}
+const min = this.getProperty('min');
+const max = this.getProperty('max');
+if (min)
+calendar.setAttribute('min', min);
+if (max)
+calendar.setAttribute('max', max);
+const flavor = this.getProperty('flavor');
+if (flavor && flavor !== 'default')
+calendar.setAttribute('flavor', flavor);
+calendar.addEventListener('change', (e) => this.handleCalendarChange(e));
+contentWrapper.appendChild(calendar);
+if (this._state.withTime) {
+contentWrapper.appendChild(this.renderTimeSection());
+}
+dialog.appendChild(contentWrapper);
+dialog.addEventListener('close', () => {
+this.updateState({ open: false });
+});
+return dialog;
+}
+renderNativeInput() {
+const wrapper = document.createElement('div');
+wrapper.className = 'dropdown-wrapper';
+const stub = document.createElement('div');
+stub.className = this.buildStubClasses();
+const isDisabled = this.getProperty('disabled');
+if (isDisabled) {
+stub.setAttribute('disabled', 'true');
+}
+const input = document.createElement('input');
+input.className = 'native-date-input';
+input.type = this._state.withTime ? 'datetime-local' : 'date';
+if (isDisabled)
+input.disabled = true;
+if (this.getProperty('required'))
+input.required = true;
+const minBound = this.getProperty('min');
+const maxBound = this.getProperty('max');
+if (minBound)
+input.min = this._state.withTime ? `${minBound}T00:00` : minBound;
+if (maxBound)
+input.max = this._state.withTime ? `${maxBound}T23:59` : maxBound;
+const localValue = componentsToLocalValue(this.getComponents(), this._state.withTime);
+if (localValue) {
+input.value = localValue;
+}
+const placeholder = this.getProperty('placeholder') || 'Select date...';
+const formattedValue = this.getFormattedValue();
+const placeholderEl = document.createElement('span');
+placeholderEl.className = 'stub-text' + (formattedValue ? '' : ' placeholder');
+placeholderEl.textContent = formattedValue || placeholder;
+input.addEventListener('change', () => {
+if (!input.value) {
+this.clearValue();
+return;
+}
+const parsed = parseValue(input.value, this._state.withTime);
+if (parsed) {
+this.updateState(parsed, true);
+this.emitChangeEvent(parsed, 'selection');
+}
+});
+const startSlot = document.createElement('slot');
+startSlot.name = 'start';
+stub.appendChild(startSlot);
+stub.appendChild(input);
+stub.appendChild(placeholderEl);
+const iconContainer = document.createElement('div');
+iconContainer.className = 'stub-icons';
+const clearable = this.getProperty('clearable');
+if (clearable && localValue && !isDisabled) {
+const clearButton = document.createElement('button');
+clearButton.className = 'stub-clear';
+clearButton.type = 'button';
+clearButton.innerHTML = CLEAR_ICON_SVG;
+clearButton.addEventListener('click', (e) => this.handleClearClick(e));
+iconContainer.appendChild(clearButton);
+}
+const calendarIcon = document.createElement('span');
+calendarIcon.className = 'stub-arrow';
+calendarIcon.innerHTML = CALENDAR_ICON_SVG;
+iconContainer.appendChild(calendarIcon);
+stub.appendChild(iconContainer);
+wrapper.appendChild(stub);
+return wrapper;
+}
+calculateCalendarPosition() {
+if (!this.shadowRoot)
+return;
+if (isMobileTouch())
+return;
+const stub = this.shadowRoot.querySelector('.date-picker-stub');
+const dialog = this.shadowRoot.querySelector('.calendar-dialog');
+if (!stub || !dialog)
+return;
+const stubRect = stub.getBoundingClientRect();
+const dialogRect = dialog.getBoundingClientRect();
+const estimatedHeight = dialogRect.height || 400;
+const popupWidth = dialogRect.width || 320;
+const wrapPadding = 8;
+const anchored = placementToAnchored(this.getProperty('placement'));
+const pos = computeAnchoredPosition({
+anchorRect: stubRect,
+popupWidth,
+popupHeight: estimatedHeight,
+gap: 0,
+align: anchored.align,
+side: anchored.side,
+});
+const positionBelow = pos.below;
+const x = pos.x - wrapPadding;
+const y = positionBelow ? pos.topY : pos.bottomY;
+this.style.setProperty('--calendar-x', `${x}px`);
+this.style.setProperty('--calendar-y', `${y}px`);
+this.style.setProperty('--calendar-offset-x', '0px');
+this.style.setProperty('--calendar-offset-y', '0px');
+if (positionBelow) {
+dialog.classList.add('position-below');
+dialog.classList.remove('position-above');
+}
+else {
+dialog.classList.add('position-above');
+dialog.classList.remove('position-below');
+}
+}
+renderContainer() {
+const container = document.createElement('div');
+container.className = 'dropdown-container';
+const label = this.getProperty('label');
+if (label) {
+const labelEl = document.createElement('label');
+labelEl.className = 'ty-field-label';
+labelEl.id = `date-picker-label-${getElementHash(this)}`;
+labelEl.innerHTML = label + (this.getProperty('required') ? '<span class="required-icon">*</span>' : '');
+container.appendChild(labelEl);
+}
+return container;
+}
+render() {
+if (!this.shadowRoot)
+return;
+ensureStyles(this.shadowRoot, { css: datePickerStyles, id: 'ty-date-picker' });
+if (isMobileTouch()) {
+const existingNativeInput = this.shadowRoot.querySelector('.native-date-input');
+if (existingNativeInput) {
+this.updateDisplay();
+return;
+}
+this.shadowRoot.innerHTML = '';
+const container = this.renderContainer();
+container.appendChild(this.renderNativeInput());
+this.shadowRoot.appendChild(container);
+return;
+}
+const existingDialog = this.shadowRoot.querySelector('.calendar-dialog');
+const isDialogOpen = existingDialog && existingDialog.open;
+if (isDialogOpen && this._state.open) {
+this.updateDisplay();
+this.calculateCalendarPosition();
+return;
+}
+this.shadowRoot.innerHTML = '';
+const container = this.renderContainer();
+const wrapper = document.createElement('div');
+wrapper.className = 'dropdown-wrapper';
+wrapper.appendChild(this.renderStub());
+wrapper.appendChild(this.renderCalendarDropdown());
+container.appendChild(wrapper);
+this.shadowRoot.appendChild(container);
+this.setupEventListeners();
+}
+updateDisplay() {
+if (!this.shadowRoot)
+return;
+const formattedValue = this.getFormattedValue();
+const placeholder = this.getProperty('placeholder') || 'Select date...';
+const hasValue = this.hasDate();
+const clearable = this.getProperty('clearable');
+const isDisabled = this.getProperty('disabled');
+const stubText = this.shadowRoot.querySelector('.stub-text');
+if (stubText) {
+stubText.textContent = formattedValue || placeholder;
+stubText.classList.toggle('placeholder', !formattedValue);
+}
+const clearButton = this.shadowRoot.querySelector('.stub-clear');
+if (clearButton) {
+clearButton.style.display = (clearable && hasValue && !isDisabled) ? '' : 'none';
+}
+if (isMobileTouch()) {
+const nativeInput = this.shadowRoot.querySelector('.native-date-input');
+if (nativeInput) {
+const localValue = componentsToLocalValue(this.getComponents(), this._state.withTime);
+nativeInput.value = localValue || '';
+}
+return;
+}
+const calendar = this.shadowRoot.querySelector('ty-calendar');
+if (calendar && hasValue) {
+calendar.setAttribute('year', this._state.year.toString());
+calendar.setAttribute('month', this._state.month.toString());
+calendar.setAttribute('day', this._state.day.toString());
+}
+if (calendar) {
+const flavor = this.getProperty('flavor');
+if (flavor && flavor !== 'default')
+calendar.setAttribute('flavor', flavor);
+else
+calendar.removeAttribute('flavor');
+}
+if (this._timeInput && this._state.hour !== undefined && this._state.minute !== undefined) {
+this._timeInput.setTime(this._state.hour, this._state.minute);
+}
+}
+setupEventListeners() {
+if (this._clickListener) {
+document.removeEventListener('click', this._clickListener);
+}
+if (this._keydownListener) {
+document.removeEventListener('keydown', this._keydownListener);
+}
+this._clickListener = (e) => this.handleOutsideClick(e);
+this._keydownListener = (e) => this.handleEscapeKey(e);
+document.addEventListener('click', this._clickListener);
+document.addEventListener('keydown', this._keydownListener);
+const dialog = this.shadowRoot?.querySelector('.calendar-dialog');
+if (dialog) {
+this._dialogClickListener = (e) => this.handleDialogClick(e);
+dialog.addEventListener('click', this._dialogClickListener);
+}
+}
+handleStubClick(event) {
+event.preventDefault();
+const dialog = this.shadowRoot?.querySelector('.calendar-dialog');
+if (this._state.open && (!dialog || !dialog.open)) {
+this.updateState({ open: false }, true);
+unlockScroll(`date-picker-${this.id || this.toString()}`);
+}
+const disabled = this.getProperty('disabled');
+if (!disabled && Date.now() - this._closeTimestamp > 300) {
+this.openDropdown();
+}
+}
+clearValue() {
+this.updateState({
+year: undefined,
+month: undefined,
+day: undefined,
+hour: undefined,
+minute: undefined,
+}, true);
+this.value = null;
+this.emitChangeEvent(null, 'clear');
+this.render();
+}
+handleClearClick(event) {
+event.preventDefault();
+event.stopPropagation();
+this.clearValue();
+}
+handleCalendarChange(event) {
+event.preventDefault();
+event.stopPropagation();
+const customEvent = event;
+const detail = customEvent.detail;
+const dayContext = detail.dayContext;
+if (!dayContext)
+return;
+const newComponents = {
+year: dayContext.year,
+month: dayContext.month,
+day: dayContext.dayInMonth,
+hour: this._state.hour,
+minute: this._state.minute,
+};
+this.updateState(newComponents, true);
+this.emitChangeEvent(newComponents, 'selection');
+if (!this._state.withTime) {
+this.closeDropdown();
+}
+else {
+requestAnimationFrame(() => {
+if (!this.shadowRoot)
+return;
+const timeInput = this.shadowRoot.querySelector('.time-input');
+if (timeInput) {
+timeInput.focus();
+}
+});
+}
+}
+handleDialogClick(event) {
+if (!this.shadowRoot)
+return;
+const dialog = this.shadowRoot.querySelector('.calendar-dialog');
+const content = this.shadowRoot.querySelector('.calendar-content');
+if (event.target === dialog && this._state.open && content && !content.contains(event.target)) {
+event.preventDefault();
+event.stopPropagation();
+this.closeDropdown();
+}
+}
+handleOutsideClick(event) {
+if (!this.shadowRoot)
+return;
+const target = event.target;
+const dialog = this.shadowRoot.querySelector('.calendar-dialog');
+if (this._state.open && dialog && !this.contains(target) && !dialog.contains(target)) {
+this.closeDropdown();
+}
+}
+handleEscapeKey(event) {
+const keyboardEvent = event;
+if (keyboardEvent.key === 'Escape' && this._state.open) {
+keyboardEvent.preventDefault();
+this.closeDropdown();
+}
+}
+openDropdown() {
+if (this._state.open)
+return;
+if (isMobileTouch())
+return;
+this.updateState({ open: true });
+this.dispatchEvent(new CustomEvent('open'));
+this.render();
+requestAnimationFrame(() => {
+if (!this.shadowRoot)
+return;
+const dialog = this.shadowRoot.querySelector('.calendar-dialog');
+if (dialog) {
+const pickerId = `date-picker-${this.id || this.toString()}`;
+lockScroll(pickerId);
+dialog.showModal();
+this.calculateCalendarPosition();
+dialog.classList.add('open');
+const stubEl = this.shadowRoot.querySelector('.date-picker-stub');
+if (stubEl)
+stubEl.setAttribute('aria-expanded', 'true');
+const focusedElement = this.shadowRoot.activeElement;
+if (focusedElement) {
+focusedElement.blur();
+}
+}
+});
+}
+closeDropdown() {
+if (!this._state.open)
+return;
+this._closeTimestamp = Date.now();
+const pickerId = `date-picker-${this.id || this.toString()}`;
+this.updateState({ open: false }, true);
+unlockScroll(pickerId);
+if (this.shadowRoot) {
+const dialog = this.shadowRoot.querySelector('.calendar-dialog');
+if (dialog) {
+dialog.classList.remove('position-above', 'position-below', 'open');
+dialog.close();
+}
+const stubEl = this.shadowRoot.querySelector('.date-picker-stub');
+if (stubEl)
+stubEl.setAttribute('aria-expanded', 'false');
+}
+this.dispatchEvent(new CustomEvent('close'));
+this.render();
+}
+cleanup() {
+if (this._clickListener) {
+document.removeEventListener('click', this._clickListener);
+}
+if (this._keydownListener) {
+document.removeEventListener('keydown', this._keydownListener);
+}
+if (this._dialogClickListener && this.shadowRoot) {
+const dialog = this.shadowRoot.querySelector('.calendar-dialog');
+if (dialog) {
+dialog.removeEventListener('click', this._dialogClickListener);
+}
+}
+if (this._state.open) {
+const pickerId = `date-picker-${this.id || this.toString()}`;
+unlockScroll(pickerId);
+}
+this._clickListener = undefined;
+this._keydownListener = undefined;
+this._dialogClickListener = undefined;
+this._timeInput = undefined;
+}
 }
 TyDatePicker.properties = {
-    placement: {
-        type: 'string',
-        visual: true,
-        default: '',
-    },
-    size: {
-        type: 'string',
-        visual: true,
-        default: 'md',
-        validate: (v) => ['sm', 'md', 'lg'].includes(v),
-        coerce: (v) => {
-            if (v === 'xs')
-                return 'sm';
-            if (v === 'xl')
-                return 'lg';
-            if (!['sm', 'md', 'lg'].includes(v)) {
-                console.warn(`[ty-date-picker] Invalid size '${v}'. Using 'md'.`);
-                return 'md';
-            }
-            return v;
-        }
-    },
-    flavor: {
-        type: 'string',
-        visual: true,
-        default: 'default'
-    },
-    label: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    placeholder: {
-        type: 'string',
-        visual: true,
-        default: 'Select date...'
-    },
-    name: {
-        type: 'string',
-        visual: false,
-        default: ''
-    },
-    min: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    max: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    required: {
-        type: 'boolean',
-        visual: true,
-        default: false
-    },
-    disabled: {
-        type: 'boolean',
-        visual: true,
-        default: false
-    },
-    clearable: {
-        type: 'boolean',
-        visual: true,
-        default: true,
-        aliases: {
-            'not-clearable': false
-        }
-    },
-    format: {
-        type: 'string',
-        visual: true,
-        default: 'long',
-        validate: (v) => ['short', 'medium', 'long', 'full'].includes(v),
-        coerce: (v) => {
-            const validFormats = ['short', 'medium', 'long', 'full'];
-            if (!validFormats.includes(v)) {
-                console.warn(`[ty-date-picker] Invalid format '${v}'. Using 'long'.`);
-                return 'long';
-            }
-            return v;
-        }
-    },
-    locale: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    value: {
-        type: 'string',
-        visual: true,
-        formValue: true,
-        emitChange: false,
-        default: null
-    },
-    'with-time': {
-        type: 'boolean',
-        visual: true,
-        default: false
-    }
+placement: {
+type: 'string',
+visual: true,
+default: '',
+},
+size: {
+type: 'string',
+visual: true,
+default: DEFAULT_SIZE,
+validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
+coerce: (v) => {
+if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
+console.warn(`[ty-date-picker] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+}
+},
+flavor: {
+type: 'string',
+visual: true,
+default: 'default'
+},
+label: {
+type: 'string',
+visual: true,
+default: ''
+},
+placeholder: {
+type: 'string',
+visual: true,
+default: 'Select date...'
+},
+name: {
+type: 'string',
+visual: false,
+default: ''
+},
+min: {
+type: 'string',
+visual: true,
+default: ''
+},
+max: {
+type: 'string',
+visual: true,
+default: ''
+},
+required: {
+type: 'boolean',
+visual: true,
+default: false
+},
+disabled: {
+type: 'boolean',
+visual: true,
+default: false
+},
+clearable: {
+type: 'boolean',
+visual: true,
+default: true,
+aliases: {
+'not-clearable': false
+}
+},
+format: {
+type: 'string',
+visual: true,
+default: 'long',
+validate: (v) => ['short', 'medium', 'long', 'full'].includes(v),
+coerce: (v) => {
+const validFormats = ['short', 'medium', 'long', 'full'];
+if (!validFormats.includes(v)) {
+console.warn(`[ty-date-picker] Invalid format '${v}'. Using 'long'.`);
+return 'long';
+}
+return v;
+}
+},
+locale: {
+type: 'string',
+visual: true,
+default: ''
+},
+value: {
+type: 'string',
+visual: true,
+formValue: true,
+emitChange: false,
+default: null
+},
+'with-time': {
+type: 'boolean',
+visual: true,
+default: false
+}
 };
 TyDatePicker.formAssociated = true;
 if (!customElements.get('ty-date-picker')) {
-    customElements.define('ty-date-picker', TyDatePicker);
+customElements.define('ty-date-picker', TyDatePicker);
 }