snice 1.14.2 → 2.1.0

package/dist/components/date-picker/snice-date-picker.js

@@ -1,880 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { element, property, query, on, watch, dispatch, ready } from 'snice';
-import css from './snice-date-picker.css?inline';
-let SniceDatePicker = class SniceDatePicker extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.size = 'medium';
-        this.variant = 'outlined';
-        this.value = '';
-        // Track input separately to prevent cursor jumps during typing
-        this.inputValue = '';
-        this.format = 'mm/dd/yyyy';
-        this.placeholder = '';
-        this.label = '';
-        this.helperText = '';
-        this.errorText = '';
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.invalid = false;
-        this.clearable = false;
-        this.min = '';
-        this.max = '';
-        this.name = '';
-        this.showCalendar = false;
-        this.firstDayOfWeek = 0; // 0 = Sunday
-        this.selectedDate = null;
-        this.viewDate = new Date();
-        this.monthNames = [
-            'January', 'February', 'March', 'April', 'May', 'June',
-            'July', 'August', 'September', 'October', 'November', 'December'
-        ];
-        this.dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    }
-    css() {
-        return css;
-    }
-    html() {
-        return /*html*/ `
-      <div class="date-picker-wrapper">
-        ${this.label ? /*html*/ `
-          <label class="label ${this.required ? 'label--required' : ''}">
-            ${this.label}
-          </label>
-        ` : ''}
-        
-        <div class="input-container">
-          <input
-            class="input 
-              input--${this.size} 
-              input--${this.variant}
-              ${this.invalid ? 'input--invalid' : ''}
-              ${this.clearable ? 'input--clearable' : ''}"
-            type="text"
-            value="${this.inputValue || this.getFormattedValue()}"
-            placeholder="${this.placeholder || this.getPlaceholderForFormat()}"
-            ${this.disabled ? 'disabled' : ''}
-            ${this.readonly ? 'readonly' : ''}
-            ${this.required ? 'required' : ''}
-            ${this.name ? `name="${this.name}"` : ''}
-            part="input"
-            autocomplete="off"
-          />
-          
-          <button
-            class="calendar-toggle"
-            type="button"
-            aria-label="Open calendar"
-            tabindex="-1"
-            part="calendar-toggle"
-            ${this.disabled ? 'disabled' : ''}
-          >
-            <svg viewBox="0 0 24 24" width="18" height="18">
-              <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" fill="currentColor"/>
-            </svg>
-          </button>
-          
-          <button
-            class="clear-button"
-            type="button"
-            aria-label="Clear"
-            tabindex="-1"
-            part="clear"
-            style="display: none;"
-          >
-            <svg viewBox="0 0 24 24" width="16" height="16">
-              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
-            </svg>
-          </button>
-          
-          <div class="calendar" part="calendar" hidden>
-            <div class="calendar-header">
-              <button class="nav-button" type="button" data-nav="prev-month" aria-label="Previous month">
-                <svg viewBox="0 0 24 24" width="20" height="20">
-                  <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
-                </svg>
-              </button>
-              
-              <div class="calendar-title">
-                <button class="month-button" type="button" data-nav="month-picker">
-                  ${this.monthNames[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}
-                </button>
-              </div>
-              
-              <button class="nav-button" type="button" data-nav="next-month" aria-label="Next month">
-                <svg viewBox="0 0 24 24" width="20" height="20">
-                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"/>
-                </svg>
-              </button>
-            </div>
-            
-            <div class="calendar-weekdays">
-              ${this.getDayHeaders()}
-            </div>
-            
-            <div class="calendar-days">
-              ${this.getDaysGrid()}
-            </div>
-            
-            <div class="calendar-footer">
-              <button class="today-button" type="button" data-nav="today">
-                Today
-              </button>
-            </div>
-          </div>
-        </div>
-        
-        ${this.errorText ? /*html*/ `
-          <span class="error-text" part="error-text">${this.errorText}</span>
-        ` : this.helperText ? /*html*/ `
-          <span class="helper-text" part="helper-text">${this.helperText}</span>
-        ` : /*html*/ `
-          <span class="helper-text" part="helper-text">&nbsp;</span>
-        `}
-      </div>
-    `;
-    }
-    init() {
-        this.parseInitialValue();
-        this.updateClearButton();
-        this.setupCalendarClickOutside();
-        if (this.input) {
-            this.input.disabled = this.disabled;
-            this.input.readOnly = this.readonly;
-            this.input.required = this.required;
-            if (this.invalid) {
-                this.input.setAttribute('aria-invalid', 'true');
-                this.input.classList.add('input--invalid');
-            }
-        }
-    }
-    parseInitialValue() {
-        if (this.value) {
-            const date = this.parseDate(this.value);
-            if (date) {
-                this.selectedDate = date;
-                this.viewDate = new Date(date);
-                this.inputValue = this.formatDate(date);
-            }
-            else {
-                this.inputValue = this.value;
-            }
-        }
-    }
-    parseDate(dateString) {
-        if (!dateString)
-            return null;
-        if (this.format === 'mmmm dd, yyyy') {
-            const monthNameRegex = /^([A-Za-z]+)\s+(\d{1,2}),\s+(\d{4})$/;
-            const match = dateString.match(monthNameRegex);
-            if (match) {
-                const [, monthName, day, year] = match;
-                const monthIndex = this.monthNames.findIndex(m => m.toLowerCase() === monthName.toLowerCase());
-                if (monthIndex >= 0) {
-                    const date = new Date(parseInt(year), monthIndex, parseInt(day));
-                    if (!isNaN(date.getTime())) {
-                        return date;
-                    }
-                }
-            }
-            return null;
-        }
-        let date = new Date(dateString);
-        if (!isNaN(date.getTime())) {
-            return date;
-        }
-        const parts = dateString.split(/[-\/]/);
-        if (parts.length !== 3)
-            return null;
-        let year, month, day;
-        switch (this.format) {
-            case 'mm/dd/yyyy':
-            case 'mm-dd-yyyy':
-                [month, day, year] = parts.map(Number);
-                break;
-            case 'dd/mm/yyyy':
-            case 'dd-mm-yyyy':
-                [day, month, year] = parts.map(Number);
-                break;
-            case 'yyyy-mm-dd':
-            case 'yyyy/mm/dd':
-                [year, month, day] = parts.map(Number);
-                break;
-            default:
-                return null;
-        }
-        if (year && month && day) {
-            date = new Date(year, month - 1, day);
-            if (!isNaN(date.getTime())) {
-                return date;
-            }
-        }
-        return null;
-    }
-    formatDate(date) {
-        if (!date)
-            return '';
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        const mm = month.toString().padStart(2, '0');
-        const dd = day.toString().padStart(2, '0');
-        const yyyy = year.toString();
-        switch (this.format) {
-            case 'mm/dd/yyyy':
-                return `${mm}/${dd}/${yyyy}`;
-            case 'dd/mm/yyyy':
-                return `${dd}/${mm}/${yyyy}`;
-            case 'yyyy-mm-dd':
-                return `${yyyy}-${mm}-${dd}`;
-            case 'yyyy/mm/dd':
-                return `${yyyy}/${mm}/${dd}`;
-            case 'dd-mm-yyyy':
-                return `${dd}-${mm}-${yyyy}`;
-            case 'mm-dd-yyyy':
-                return `${mm}-${dd}-${yyyy}`;
-            case 'mmmm dd, yyyy':
-                return `${this.monthNames[date.getMonth()]} ${dd}, ${yyyy}`;
-            default:
-                return `${mm}/${dd}/${yyyy}`;
-        }
-    }
-    getFormattedValue() {
-        return this.selectedDate ? this.formatDate(this.selectedDate) : this.value;
-    }
-    getPlaceholderForFormat() {
-        switch (this.format) {
-            case 'mm/dd/yyyy':
-                return 'MM/DD/YYYY';
-            case 'dd/mm/yyyy':
-                return 'DD/MM/YYYY';
-            case 'yyyy-mm-dd':
-                return 'YYYY-MM-DD';
-            case 'yyyy/mm/dd':
-                return 'YYYY/MM/DD';
-            case 'dd-mm-yyyy':
-                return 'DD-MM-YYYY';
-            case 'mm-dd-yyyy':
-                return 'MM-DD-YYYY';
-            case 'mmmm dd, yyyy':
-                return 'Month DD, YYYY';
-            default:
-                return 'MM/DD/YYYY';
-        }
-    }
-    getDayHeaders() {
-        const days = [...this.dayNames];
-        // Rotate array based on firstDayOfWeek (0=Sunday, 1=Monday, etc.)
-        for (let i = 0; i < this.firstDayOfWeek; i++) {
-            days.push(days.shift());
-        }
-        return days.map(day => `<div class="weekday">${day}</div>`).join('');
-    }
-    getDaysGrid() {
-        const year = this.viewDate.getFullYear();
-        const month = this.viewDate.getMonth();
-        // First day of the month
-        const firstDay = new Date(year, month, 1);
-        // Last day of the month
-        const lastDay = new Date(year, month + 1, 0);
-        // Calculate starting position based on first day of week preference
-        let startingDayOfWeek = firstDay.getDay() - this.firstDayOfWeek;
-        if (startingDayOfWeek < 0)
-            startingDayOfWeek += 7;
-        const daysInMonth = lastDay.getDate();
-        const today = new Date();
-        const isToday = (date) => date.getDate() === today.getDate() &&
-            date.getMonth() === today.getMonth() &&
-            date.getFullYear() === today.getFullYear();
-        const isSelected = (date) => this.selectedDate &&
-            date.getDate() === this.selectedDate.getDate() &&
-            date.getMonth() === this.selectedDate.getMonth() &&
-            date.getFullYear() === this.selectedDate.getFullYear();
-        const isDisabled = (date) => {
-            if (this.min) {
-                const minDate = this.parseDate(this.min);
-                if (minDate && date < minDate)
-                    return true;
-            }
-            if (this.max) {
-                const maxDate = this.parseDate(this.max);
-                if (maxDate && date > maxDate)
-                    return true;
-            }
-            return false;
-        };
-        let html = '';
-        // Empty cells for days before month starts
-        for (let i = 0; i < startingDayOfWeek; i++) {
-            html += '<div class="day day--empty"></div>';
-        }
-        // Days of the month
-        for (let day = 1; day <= daysInMonth; day++) {
-            const date = new Date(year, month, day);
-            const classes = ['day'];
-            if (isToday(date))
-                classes.push('day--today');
-            if (isSelected(date))
-                classes.push('day--selected');
-            if (isDisabled(date))
-                classes.push('day--disabled');
-            html += `
-        <button 
-          class="${classes.join(' ')}" 
-          type="button" 
-          data-date="${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}"
-          ${isDisabled(date) ? 'disabled' : ''}
-          aria-label="${this.formatDate(date)}"
-        >
-          ${day}
-        </button>
-      `;
-        }
-        return html;
-    }
-    updateInputValue() {
-        if (this.input && document.activeElement !== this.input) {
-            const displayValue = this.getFormattedValue();
-            this.input.value = displayValue;
-            this.inputValue = displayValue;
-        }
-        this.updateClearButton();
-    }
-    isCompleteDate(value) {
-        if (this.format === 'mmmm dd, yyyy') {
-            return /^[A-Za-z]+\s+\d{1,2},\s+\d{4}$/.test(value);
-        }
-        const separators = (value.match(/[\/\-]/g) || []).length;
-        return separators >= 2 && value.length >= 8;
-    }
-    updateClearButton() {
-        if (this.clearButton && this.clearable) {
-            const shouldShow = this.selectedDate && !this.disabled && !this.readonly;
-            this.clearButton.style.display = shouldShow ? '' : 'none';
-            this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
-        }
-    }
-    updateCalendarGrid() {
-        const calendarDays = this.calendar?.querySelector('.calendar-days');
-        const calendarTitle = this.calendar?.querySelector('.month-button');
-        if (calendarDays) {
-            calendarDays.innerHTML = this.getDaysGrid();
-        }
-        if (calendarTitle) {
-            calendarTitle.textContent = `${this.monthNames[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`;
-        }
-    }
-    setupCalendarClickOutside() {
-        document.addEventListener('click', (e) => {
-            if (!this.contains(e.target) && this.showCalendar) {
-                this.close();
-            }
-        });
-    }
-    handleInput(e) {
-        const target = e.target;
-        this.inputValue = target.value;
-        const date = this.parseDate(target.value);
-        if (date && this.isCompleteDate(target.value)) {
-            this.selectedDate = date;
-            this.viewDate = new Date(date);
-            if (this.showCalendar) {
-                this.updateCalendarGrid();
-            }
-        }
-        this.updateClearButton();
-        this.dispatchInputEvent();
-    }
-    handleChange(e) {
-        const target = e.target;
-        const date = this.parseDate(target.value);
-        if (date) {
-            this.selectedDate = date;
-            this.value = this.formatDate(date);
-            this.inputValue = this.value;
-            if (this.input) {
-                this.input.value = this.value;
-            }
-        }
-        else if (target.value) {
-            this.selectedDate = null;
-            this.value = target.value;
-            this.inputValue = target.value;
-        }
-        else {
-            this.selectedDate = null;
-            this.value = '';
-            this.inputValue = '';
-        }
-        this.updateClearButton();
-        this.dispatchChangeEvent();
-    }
-    handleFocus() {
-        this.dispatchFocusEvent();
-    }
-    handleInputClick() {
-        if (!this.showCalendar && !this.disabled && !this.readonly) {
-            this.open();
-        }
-    }
-    handleBlur() {
-        this.dispatchBlurEvent();
-    }
-    handleCalendarToggle() {
-        if (this.showCalendar) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    handleClear() {
-        this.clear();
-    }
-    handleCalendarClick(e) {
-        e.stopPropagation();
-        const target = e.target;
-        if (target.closest('[data-date]')) {
-            const dateString = target.closest('[data-date]')?.getAttribute('data-date');
-            if (dateString) {
-                const date = new Date(dateString);
-                this.selectDate(date);
-            }
-        }
-        else if (target.closest('[data-nav]')) {
-            const nav = target.closest('[data-nav]')?.getAttribute('data-nav');
-            this.handleNavigation(nav);
-        }
-    }
-    handleKeydown(e) {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            if (!this.showCalendar) {
-                this.open();
-            }
-        }
-        else if (e.key === 'Escape' && this.showCalendar) {
-            this.close();
-            this.focus();
-        }
-    }
-    handleNavigation(nav) {
-        switch (nav) {
-            case 'prev-month':
-                this.viewDate.setMonth(this.viewDate.getMonth() - 1);
-                this.updateCalendarGrid();
-                break;
-            case 'next-month':
-                this.viewDate.setMonth(this.viewDate.getMonth() + 1);
-                this.updateCalendarGrid();
-                break;
-            case 'today':
-                this.goToToday();
-                break;
-        }
-    }
-    handleValueChange() {
-        const date = this.parseDate(this.value);
-        this.selectedDate = date;
-        if (date) {
-            this.viewDate = new Date(date);
-        }
-        this.updateInputValue();
-        if (this.showCalendar) {
-            this.updateCalendarGrid();
-        }
-    }
-    // Manual DOM manipulation required since Snice is imperative
-    handleShowCalendarChange() {
-        console.log('showCalendar changed:', this.calendar);
-        if (this.calendar) {
-            if (this.showCalendar) {
-                this.calendar.removeAttribute('hidden');
-                this.dispatchOpenEvent();
-                // Focus selected date or first available date for accessibility
-                setTimeout(() => {
-                    (this.selectedDayButton || this.firstDayButton)?.focus();
-                }, 100);
-            }
-            else {
-                this.calendar.setAttribute('hidden', '');
-                this.dispatchCloseEvent();
-            }
-        }
-    }
-    handleDisabledChange() {
-        if (this.input) {
-            this.input.disabled = this.disabled;
-        }
-        if (this.calendarToggle) {
-            this.calendarToggle.disabled = this.disabled;
-        }
-        this.updateClearButton();
-    }
-    handleReadonlyChange() {
-        if (this.input) {
-            this.input.readOnly = this.readonly;
-        }
-        this.updateClearButton();
-    }
-    handleInvalidChange() {
-        if (this.input) {
-            this.input.setAttribute('aria-invalid', String(this.invalid));
-            this.input.classList.toggle('input--invalid', this.invalid);
-        }
-    }
-    handleFormatChange() {
-        this.updateInputValue();
-    }
-    dispatchInputEvent() {
-        return { value: this.value, datePicker: this };
-    }
-    dispatchChangeEvent() {
-        return {
-            value: this.value,
-            date: this.selectedDate,
-            formatted: this.selectedDate ? this.formatDate(this.selectedDate) : '',
-            iso: this.selectedDate ? this.selectedDate.toISOString().split('T')[0] : '',
-            datePicker: this
-        };
-    }
-    dispatchFocusEvent() {
-        return { datePicker: this };
-    }
-    dispatchBlurEvent() {
-        return { datePicker: this };
-    }
-    dispatchOpenEvent() {
-        return { datePicker: this };
-    }
-    dispatchCloseEvent() {
-        return { datePicker: this };
-    }
-    dispatchClearEvent() {
-        return { datePicker: this };
-    }
-    dispatchSelectEvent(date) {
-        return {
-            date,
-            formatted: this.formatDate(date),
-            iso: date.toISOString().split('T')[0],
-            datePicker: this
-        };
-    }
-    focus() {
-        this.input?.focus();
-    }
-    blur() {
-        this.input?.blur();
-    }
-    clear() {
-        this.selectedDate = null;
-        this.value = '';
-        this.updateInputValue();
-        this.dispatchClearEvent();
-        this.dispatchChangeEvent();
-        this.focus();
-    }
-    open() {
-        if (!this.disabled && !this.readonly) {
-            this.showCalendar = true;
-            if (this.selectedDate) {
-                this.viewDate = new Date(this.selectedDate);
-            }
-            this.updateCalendarGrid();
-            if (this.calendar) {
-                this.calendar.removeAttribute('hidden');
-            }
-            this.dispatchOpenEvent();
-        }
-    }
-    close() {
-        this.showCalendar = false;
-        if (this.calendar) {
-            this.calendar.setAttribute('hidden', '');
-        }
-        this.dispatchCloseEvent();
-    }
-    selectDate(date) {
-        this.selectedDate = date;
-        this.value = this.formatDate(date);
-        this.viewDate = new Date(date);
-        this.updateInputValue();
-        this.updateCalendarGrid();
-        this.dispatchSelectEvent(date);
-        this.dispatchChangeEvent();
-        this.close();
-        this.focus();
-    }
-    goToMonth(year, month) {
-        this.viewDate = new Date(year, month, 1);
-        this.updateCalendarGrid();
-    }
-    goToToday() {
-        const today = new Date();
-        this.selectDate(today);
-    }
-    checkValidity() {
-        return this.input?.checkValidity() ?? true;
-    }
-    reportValidity() {
-        return this.input?.reportValidity() ?? true;
-    }
-    setCustomValidity(message) {
-        this.input?.setCustomValidity(message);
-    }
-};
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", String)
-], SniceDatePicker.prototype, "size", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", String)
-], SniceDatePicker.prototype, "variant", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "value", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", String)
-], SniceDatePicker.prototype, "format", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "placeholder", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'helper-text', reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "helperText", void 0);
-__decorate([
-    property({ attribute: 'error-text', reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "errorText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "invalid", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "clearable", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "min", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "max", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'show-calendar', reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "showCalendar", void 0);
-__decorate([
-    property({ type: Number, attribute: 'first-day-of-week', reflect: true }),
-    __metadata("design:type", Object)
-], SniceDatePicker.prototype, "firstDayOfWeek", void 0);
-__decorate([
-    query('.input'),
-    __metadata("design:type", HTMLInputElement)
-], SniceDatePicker.prototype, "input", void 0);
-__decorate([
-    query('.calendar'),
-    __metadata("design:type", HTMLElement)
-], SniceDatePicker.prototype, "calendar", void 0);
-__decorate([
-    query('.clear-button'),
-    __metadata("design:type", HTMLButtonElement)
-], SniceDatePicker.prototype, "clearButton", void 0);
-__decorate([
-    query('.calendar-toggle'),
-    __metadata("design:type", HTMLButtonElement)
-], SniceDatePicker.prototype, "calendarToggle", void 0);
-__decorate([
-    query('.day--selected'),
-    __metadata("design:type", HTMLButtonElement)
-], SniceDatePicker.prototype, "selectedDayButton", void 0);
-__decorate([
-    query('.day:not(.day--empty):not(.day--disabled)'),
-    __metadata("design:type", HTMLButtonElement)
-], SniceDatePicker.prototype, "firstDayButton", void 0);
-__decorate([
-    ready(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "init", null);
-__decorate([
-    on('input', '.input'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Event]),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleInput", null);
-__decorate([
-    on('change', '.input'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Event]),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleChange", null);
-__decorate([
-    on('focus', '.input'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleFocus", null);
-__decorate([
-    on('click', '.input'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleInputClick", null);
-__decorate([
-    on('blur', '.input'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleBlur", null);
-__decorate([
-    on('click', '.calendar-toggle'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleCalendarToggle", null);
-__decorate([
-    on('click', '.clear-button'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleClear", null);
-__decorate([
-    on('click', '.calendar'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Event]),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleCalendarClick", null);
-__decorate([
-    on('keydown', '.input'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleKeydown", null);
-__decorate([
-    watch('value'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleValueChange", null);
-__decorate([
-    watch('show-calendar'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleShowCalendarChange", null);
-__decorate([
-    watch('disabled'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleDisabledChange", null);
-__decorate([
-    watch('readonly'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleReadonlyChange", null);
-__decorate([
-    watch('invalid'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleInvalidChange", null);
-__decorate([
-    watch('format'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "handleFormatChange", null);
-__decorate([
-    dispatch('@snice/datepicker-input', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchInputEvent", null);
-__decorate([
-    dispatch('@snice/datepicker-change', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchChangeEvent", null);
-__decorate([
-    dispatch('@snice/datepicker-focus', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchFocusEvent", null);
-__decorate([
-    dispatch('@snice/datepicker-blur', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchBlurEvent", null);
-__decorate([
-    dispatch('@snice/datepicker-open', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchOpenEvent", null);
-__decorate([
-    dispatch('@snice/datepicker-close', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchCloseEvent", null);
-__decorate([
-    dispatch('@snice/datepicker-clear', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchClearEvent", null);
-__decorate([
-    dispatch('@snice/datepicker-select', { bubbles: true, composed: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Date]),
-    __metadata("design:returntype", void 0)
-], SniceDatePicker.prototype, "dispatchSelectEvent", null);
-SniceDatePicker = __decorate([
-    element('snice-date-picker')
-], SniceDatePicker);
-export { SniceDatePicker };
-//# sourceMappingURL=snice-date-picker.js.map