snice 1.13.2 → 1.13.4

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

@@ -0,0 +1,880 @@
+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 '../../src/index';
+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