snice 2.1.4 → 2.2.0

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

@@ -0,0 +1,847 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, ready, on, watch, dispatch } from 'snice';
+
+var css = '';
+
+let SniceDatePicker = (() => {
+    let _classDecorators = [element('snice-date-picker')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _format_decorators;
+    let _format_initializers = [];
+    let _format_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _helperText_decorators;
+    let _helperText_initializers = [];
+    let _helperText_extraInitializers = [];
+    let _errorText_decorators;
+    let _errorText_initializers = [];
+    let _errorText_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _clearable_decorators;
+    let _clearable_initializers = [];
+    let _clearable_extraInitializers = [];
+    let _min_decorators;
+    let _min_initializers = [];
+    let _min_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _showCalendar_decorators;
+    let _showCalendar_initializers = [];
+    let _showCalendar_extraInitializers = [];
+    let _firstDayOfWeek_decorators;
+    let _firstDayOfWeek_initializers = [];
+    let _firstDayOfWeek_extraInitializers = [];
+    let _input_decorators;
+    let _input_initializers = [];
+    let _input_extraInitializers = [];
+    let _calendar_decorators;
+    let _calendar_initializers = [];
+    let _calendar_extraInitializers = [];
+    let _clearButton_decorators;
+    let _clearButton_initializers = [];
+    let _clearButton_extraInitializers = [];
+    let _calendarToggle_decorators;
+    let _calendarToggle_initializers = [];
+    let _calendarToggle_extraInitializers = [];
+    let _selectedDayButton_decorators;
+    let _selectedDayButton_initializers = [];
+    let _selectedDayButton_extraInitializers = [];
+    let _firstDayButton_decorators;
+    let _firstDayButton_initializers = [];
+    let _firstDayButton_extraInitializers = [];
+    let _init_decorators;
+    let _handleInput_decorators;
+    let _handleChange_decorators;
+    let _handleFocus_decorators;
+    let _handleInputClick_decorators;
+    let _handleBlur_decorators;
+    let _handleCalendarToggle_decorators;
+    let _handleClear_decorators;
+    let _handleCalendarClick_decorators;
+    let _handleKeydown_decorators;
+    let _handleValueChange_decorators;
+    let _handleShowCalendarChange_decorators;
+    let _handleDisabledChange_decorators;
+    let _handleReadonlyChange_decorators;
+    let _handleInvalidChange_decorators;
+    let _handleFormatChange_decorators;
+    let _dispatchInputEvent_decorators;
+    let _dispatchChangeEvent_decorators;
+    let _dispatchFocusEvent_decorators;
+    let _dispatchBlurEvent_decorators;
+    let _dispatchOpenEvent_decorators;
+    let _dispatchCloseEvent_decorators;
+    let _dispatchClearEvent_decorators;
+    let _dispatchSelectEvent_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.size = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.variant = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _variant_initializers, 'outlined'));
+            this.value = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, ''));
+            // Track input separately to prevent cursor jumps during typing
+            this.inputValue = (__runInitializers(this, _value_extraInitializers), '');
+            this.format = __runInitializers(this, _format_initializers, 'mm/dd/yyyy');
+            this.placeholder = (__runInitializers(this, _format_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
+            this.label = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _label_initializers, ''));
+            this.helperText = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _helperText_initializers, ''));
+            this.errorText = (__runInitializers(this, _helperText_extraInitializers), __runInitializers(this, _errorText_initializers, ''));
+            this.disabled = (__runInitializers(this, _errorText_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+            this.readonly = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+            this.required = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _required_initializers, false));
+            this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+            this.clearable = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _clearable_initializers, false));
+            this.min = (__runInitializers(this, _clearable_extraInitializers), __runInitializers(this, _min_initializers, ''));
+            this.max = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, ''));
+            this.name = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _name_initializers, ''));
+            this.showCalendar = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _showCalendar_initializers, false));
+            this.firstDayOfWeek = (__runInitializers(this, _showCalendar_extraInitializers), __runInitializers(this, _firstDayOfWeek_initializers, 0)); // 0 = Sunday
+            this.input = (__runInitializers(this, _firstDayOfWeek_extraInitializers), __runInitializers(this, _input_initializers, void 0));
+            this.calendar = (__runInitializers(this, _input_extraInitializers), __runInitializers(this, _calendar_initializers, void 0));
+            this.clearButton = (__runInitializers(this, _calendar_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
+            this.calendarToggle = (__runInitializers(this, _clearButton_extraInitializers), __runInitializers(this, _calendarToggle_initializers, void 0));
+            this.selectedDayButton = (__runInitializers(this, _calendarToggle_extraInitializers), __runInitializers(this, _selectedDayButton_initializers, void 0));
+            this.firstDayButton = (__runInitializers(this, _selectedDayButton_extraInitializers), __runInitializers(this, _firstDayButton_initializers, void 0));
+            this.selectedDate = (__runInitializers(this, _firstDayButton_extraInitializers), 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'];
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _size_decorators = [property({ reflect: true })];
+            _variant_decorators = [property({ reflect: true })];
+            _value_decorators = [property({ reflect: true })];
+            _format_decorators = [property({ reflect: true })];
+            _placeholder_decorators = [property({ reflect: true })];
+            _label_decorators = [property({ reflect: true })];
+            _helperText_decorators = [property({ attribute: 'helper-text', reflect: true })];
+            _errorText_decorators = [property({ attribute: 'error-text', reflect: true })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _readonly_decorators = [property({ type: Boolean, reflect: true })];
+            _required_decorators = [property({ type: Boolean, reflect: true })];
+            _invalid_decorators = [property({ type: Boolean, reflect: true })];
+            _clearable_decorators = [property({ type: Boolean, reflect: true })];
+            _min_decorators = [property({ reflect: true })];
+            _max_decorators = [property({ reflect: true })];
+            _name_decorators = [property({ reflect: true })];
+            _showCalendar_decorators = [property({ type: Boolean, attribute: 'show-calendar', reflect: true })];
+            _firstDayOfWeek_decorators = [property({ type: Number, attribute: 'first-day-of-week', reflect: true })];
+            _input_decorators = [query('.input')];
+            _calendar_decorators = [query('.calendar')];
+            _clearButton_decorators = [query('.clear-button')];
+            _calendarToggle_decorators = [query('.calendar-toggle')];
+            _selectedDayButton_decorators = [query('.day--selected')];
+            _firstDayButton_decorators = [query('.day:not(.day--empty):not(.day--disabled)')];
+            _init_decorators = [ready()];
+            _handleInput_decorators = [on('input', '.input')];
+            _handleChange_decorators = [on('change', '.input')];
+            _handleFocus_decorators = [on('focus', '.input')];
+            _handleInputClick_decorators = [on('click', '.input')];
+            _handleBlur_decorators = [on('blur', '.input')];
+            _handleCalendarToggle_decorators = [on('click', '.calendar-toggle')];
+            _handleClear_decorators = [on('click', '.clear-button')];
+            _handleCalendarClick_decorators = [on('click', '.calendar')];
+            _handleKeydown_decorators = [on('keydown', '.input')];
+            _handleValueChange_decorators = [watch('value')];
+            _handleShowCalendarChange_decorators = [watch('show-calendar')];
+            _handleDisabledChange_decorators = [watch('disabled')];
+            _handleReadonlyChange_decorators = [watch('readonly')];
+            _handleInvalidChange_decorators = [watch('invalid')];
+            _handleFormatChange_decorators = [watch('format')];
+            _dispatchInputEvent_decorators = [dispatch('@snice/datepicker-input', { bubbles: true, composed: true })];
+            _dispatchChangeEvent_decorators = [dispatch('@snice/datepicker-change', { bubbles: true, composed: true })];
+            _dispatchFocusEvent_decorators = [dispatch('@snice/datepicker-focus', { bubbles: true, composed: true })];
+            _dispatchBlurEvent_decorators = [dispatch('@snice/datepicker-blur', { bubbles: true, composed: true })];
+            _dispatchOpenEvent_decorators = [dispatch('@snice/datepicker-open', { bubbles: true, composed: true })];
+            _dispatchCloseEvent_decorators = [dispatch('@snice/datepicker-close', { bubbles: true, composed: true })];
+            _dispatchClearEvent_decorators = [dispatch('@snice/datepicker-clear', { bubbles: true, composed: true })];
+            _dispatchSelectEvent_decorators = [dispatch('@snice/datepicker-select', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleInput_decorators, { kind: "method", name: "handleInput", static: false, private: false, access: { has: obj => "handleInput" in obj, get: obj => obj.handleInput }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleChange_decorators, { kind: "method", name: "handleChange", static: false, private: false, access: { has: obj => "handleChange" in obj, get: obj => obj.handleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFocus_decorators, { kind: "method", name: "handleFocus", static: false, private: false, access: { has: obj => "handleFocus" in obj, get: obj => obj.handleFocus }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleInputClick_decorators, { kind: "method", name: "handleInputClick", static: false, private: false, access: { has: obj => "handleInputClick" in obj, get: obj => obj.handleInputClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleBlur_decorators, { kind: "method", name: "handleBlur", static: false, private: false, access: { has: obj => "handleBlur" in obj, get: obj => obj.handleBlur }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleCalendarToggle_decorators, { kind: "method", name: "handleCalendarToggle", static: false, private: false, access: { has: obj => "handleCalendarToggle" in obj, get: obj => obj.handleCalendarToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleClear_decorators, { kind: "method", name: "handleClear", static: false, private: false, access: { has: obj => "handleClear" in obj, get: obj => obj.handleClear }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleCalendarClick_decorators, { kind: "method", name: "handleCalendarClick", static: false, private: false, access: { has: obj => "handleCalendarClick" in obj, get: obj => obj.handleCalendarClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleKeydown_decorators, { kind: "method", name: "handleKeydown", static: false, private: false, access: { has: obj => "handleKeydown" in obj, get: obj => obj.handleKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleValueChange_decorators, { kind: "method", name: "handleValueChange", static: false, private: false, access: { has: obj => "handleValueChange" in obj, get: obj => obj.handleValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleShowCalendarChange_decorators, { kind: "method", name: "handleShowCalendarChange", static: false, private: false, access: { has: obj => "handleShowCalendarChange" in obj, get: obj => obj.handleShowCalendarChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleDisabledChange_decorators, { kind: "method", name: "handleDisabledChange", static: false, private: false, access: { has: obj => "handleDisabledChange" in obj, get: obj => obj.handleDisabledChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleReadonlyChange_decorators, { kind: "method", name: "handleReadonlyChange", static: false, private: false, access: { has: obj => "handleReadonlyChange" in obj, get: obj => obj.handleReadonlyChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleInvalidChange_decorators, { kind: "method", name: "handleInvalidChange", static: false, private: false, access: { has: obj => "handleInvalidChange" in obj, get: obj => obj.handleInvalidChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleFormatChange_decorators, { kind: "method", name: "handleFormatChange", static: false, private: false, access: { has: obj => "handleFormatChange" in obj, get: obj => obj.handleFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchInputEvent_decorators, { kind: "method", name: "dispatchInputEvent", static: false, private: false, access: { has: obj => "dispatchInputEvent" in obj, get: obj => obj.dispatchInputEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchChangeEvent_decorators, { kind: "method", name: "dispatchChangeEvent", static: false, private: false, access: { has: obj => "dispatchChangeEvent" in obj, get: obj => obj.dispatchChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchFocusEvent_decorators, { kind: "method", name: "dispatchFocusEvent", static: false, private: false, access: { has: obj => "dispatchFocusEvent" in obj, get: obj => obj.dispatchFocusEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchBlurEvent_decorators, { kind: "method", name: "dispatchBlurEvent", static: false, private: false, access: { has: obj => "dispatchBlurEvent" in obj, get: obj => obj.dispatchBlurEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchOpenEvent_decorators, { kind: "method", name: "dispatchOpenEvent", static: false, private: false, access: { has: obj => "dispatchOpenEvent" in obj, get: obj => obj.dispatchOpenEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchCloseEvent_decorators, { kind: "method", name: "dispatchCloseEvent", static: false, private: false, access: { has: obj => "dispatchCloseEvent" in obj, get: obj => obj.dispatchCloseEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchClearEvent_decorators, { kind: "method", name: "dispatchClearEvent", static: false, private: false, access: { has: obj => "dispatchClearEvent" in obj, get: obj => obj.dispatchClearEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchSelectEvent_decorators, { kind: "method", name: "dispatchSelectEvent", static: false, private: false, access: { has: obj => "dispatchSelectEvent" in obj, get: obj => obj.dispatchSelectEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _format_decorators, { kind: "field", name: "format", static: false, private: false, access: { has: obj => "format" in obj, get: obj => obj.format, set: (obj, value) => { obj.format = value; } }, metadata: _metadata }, _format_initializers, _format_extraInitializers);
+            __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _helperText_decorators, { kind: "field", name: "helperText", static: false, private: false, access: { has: obj => "helperText" in obj, get: obj => obj.helperText, set: (obj, value) => { obj.helperText = value; } }, metadata: _metadata }, _helperText_initializers, _helperText_extraInitializers);
+            __esDecorate(null, null, _errorText_decorators, { kind: "field", name: "errorText", static: false, private: false, access: { has: obj => "errorText" in obj, get: obj => obj.errorText, set: (obj, value) => { obj.errorText = value; } }, metadata: _metadata }, _errorText_initializers, _errorText_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, null, _invalid_decorators, { kind: "field", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(null, null, _clearable_decorators, { kind: "field", name: "clearable", static: false, private: false, access: { has: obj => "clearable" in obj, get: obj => obj.clearable, set: (obj, value) => { obj.clearable = value; } }, metadata: _metadata }, _clearable_initializers, _clearable_extraInitializers);
+            __esDecorate(null, null, _min_decorators, { kind: "field", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
+            __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _showCalendar_decorators, { kind: "field", name: "showCalendar", static: false, private: false, access: { has: obj => "showCalendar" in obj, get: obj => obj.showCalendar, set: (obj, value) => { obj.showCalendar = value; } }, metadata: _metadata }, _showCalendar_initializers, _showCalendar_extraInitializers);
+            __esDecorate(null, null, _firstDayOfWeek_decorators, { kind: "field", name: "firstDayOfWeek", static: false, private: false, access: { has: obj => "firstDayOfWeek" in obj, get: obj => obj.firstDayOfWeek, set: (obj, value) => { obj.firstDayOfWeek = value; } }, metadata: _metadata }, _firstDayOfWeek_initializers, _firstDayOfWeek_extraInitializers);
+            __esDecorate(null, null, _input_decorators, { kind: "field", name: "input", static: false, private: false, access: { has: obj => "input" in obj, get: obj => obj.input, set: (obj, value) => { obj.input = value; } }, metadata: _metadata }, _input_initializers, _input_extraInitializers);
+            __esDecorate(null, null, _calendar_decorators, { kind: "field", name: "calendar", static: false, private: false, access: { has: obj => "calendar" in obj, get: obj => obj.calendar, set: (obj, value) => { obj.calendar = value; } }, metadata: _metadata }, _calendar_initializers, _calendar_extraInitializers);
+            __esDecorate(null, null, _clearButton_decorators, { kind: "field", name: "clearButton", static: false, private: false, access: { has: obj => "clearButton" in obj, get: obj => obj.clearButton, set: (obj, value) => { obj.clearButton = value; } }, metadata: _metadata }, _clearButton_initializers, _clearButton_extraInitializers);
+            __esDecorate(null, null, _calendarToggle_decorators, { kind: "field", name: "calendarToggle", static: false, private: false, access: { has: obj => "calendarToggle" in obj, get: obj => obj.calendarToggle, set: (obj, value) => { obj.calendarToggle = value; } }, metadata: _metadata }, _calendarToggle_initializers, _calendarToggle_extraInitializers);
+            __esDecorate(null, null, _selectedDayButton_decorators, { kind: "field", name: "selectedDayButton", static: false, private: false, access: { has: obj => "selectedDayButton" in obj, get: obj => obj.selectedDayButton, set: (obj, value) => { obj.selectedDayButton = value; } }, metadata: _metadata }, _selectedDayButton_initializers, _selectedDayButton_extraInitializers);
+            __esDecorate(null, null, _firstDayButton_decorators, { kind: "field", name: "firstDayButton", static: false, private: false, access: { has: obj => "firstDayButton" in obj, get: obj => obj.firstDayButton, set: (obj, value) => { obj.firstDayButton = value; } }, metadata: _metadata }, _firstDayButton_initializers, _firstDayButton_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        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);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceDatePicker };
+//# sourceMappingURL=snice-date-picker.js.map