snice 4.14.0 → 4.16.0

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

@@ -1,5 +1,5 @@
 /*!
- * snice v4.13.0
+ * snice v4.15.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -67,7 +67,7 @@ var SniceDatePicker = (function (exports, snice) {
   var cssContent = ":host{display:block;position:relative;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--snice-font-size-sm, 14px);line-height:var(--snice-line-height-normal, 1.4);min-height:40px}.date-picker-wrapper{display:flex;flex-direction:column;gap:.5rem}.label{font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text);margin-bottom:var(--snice-spacing-2xs,.25rem)}.label--required::after{content:'*';color:var(--snice-color-danger);margin-left:var(--snice-spacing-2xs,.25rem)}.input-container{position:relative;display:flex;align-items:center}.input{width:100%;border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-lg,6px);padding:var(--snice-spacing-xs,.5rem) 3rem var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);font-size:inherit;line-height:var(--snice-line-height-normal, 1.5);background:var(--snice-color-background-input);color:var(--snice-color-text);transition:border-color var(--snice-transition-fast, .15s) ease,box-shadow var(--snice-transition-fast, .15s) ease}.input:focus{outline:0;border-color:var(--snice-color-border-focus);box-shadow:0 0 0 var(--snice-focus-ring-width,3px) var(--snice-focus-ring-color)}.input--small{padding:.375rem 2.75rem .375rem .625rem;font-size:.875rem}.input--large{padding:.75rem 3.5rem .75rem 1rem;font-size:1rem}.input--filled{background:var(--snice-color-background-secondary);border:1px solid transparent}.input--underlined{border:none;border-bottom:1px solid var(--snice-color-border);border-radius:0;background:0 0;padding-left:0}.input--invalid{border-color:var(--snice-color-danger)}.input--invalid:focus{border-color:var(--snice-color-danger);box-shadow:0 0 0 3px var(--snice-color-danger-alpha,hsl(var(--snice-color-red-500) / .1))}.input:disabled{background:var(--snice-color-background-secondary);color:var(--snice-color-text-tertiary);cursor:not-allowed}.input:not(:disabled):not([readonly]){cursor:pointer}.calendar-toggle,.clear-button{position:absolute;padding:.25rem;border:none;background:0 0;color:var(--snice-color-text-secondary);cursor:pointer;border-radius:4px;transition:color .15s,background-color .15s}.calendar-toggle{right:.5rem}.clear-button{right:2.5rem}.calendar-toggle:hover,.clear-button:hover{color:var(--snice-color-text);background:var(--snice-color-background-tertiary)}.calendar-toggle:disabled,.clear-button:disabled{opacity:.5;cursor:not-allowed}.input--loading{cursor:wait}.spinner{position:absolute;right:3rem;width:1em;height:1em;pointer-events:none}.spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.calendar{position:absolute;top:100%;left:0;right:0;z-index:var(--snice-z-index-dropdown,1000);background:var(--snice-color-background-element);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-lg,8px);box-shadow:var(--snice-shadow-lg);margin-top:var(--snice-spacing-3xs,.125rem);padding:var(--snice-spacing-md,1rem);min-width:280px}.calendar[hidden]{display:none}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.calendar-title{flex:1;text-align:center}.month-button{background:0 0;border:none;font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text);cursor:pointer;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,4px);transition:background-color var(--snice-transition-fast, .15s) ease}.month-button:hover{background:var(--snice-color-background-tertiary)}.nav-button{background:0 0;border:none;padding:.5rem;cursor:pointer;color:var(--snice-color-text-secondary);border-radius:4px;transition:color .15s,background-color .15s}.nav-button:hover{color:var(--snice-color-text);background:var(--snice-color-background-tertiary)}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-bottom:.5rem}.weekday{text-align:center;font-size:.75rem;font-weight:600;color:var(--snice-color-text-secondary);padding:.5rem .25rem}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}.day{width:32px;height:32px;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,4px);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text);transition:background-color var(--snice-transition-fast, .15s) ease,color var(--snice-transition-fast, .15s) ease;display:flex;align-items:center;justify-content:center}.day:hover:not(.day--disabled){background:var(--snice-color-background-tertiary)}.day--today{background:var(--snice-color-primary-subtle);color:var(--snice-color-primary);font-weight:var(--snice-font-weight-semibold,600)}.day--selected{background:var(--snice-color-primary);color:var(--snice-color-text-inverse);font-weight:var(--snice-font-weight-semibold,600)}.day--disabled{color:var(--snice-color-text-disabled);cursor:not-allowed}.day--empty{cursor:default}.calendar-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--snice-color-border);display:flex;justify-content:center}.error-text,.helper-text{font-size:var(--snice-font-size-sm, .875rem);margin-top:var(--snice-spacing-2xs,.25rem)}.helper-text{color:var(--snice-color-text-secondary)}.error-text{color:var(--snice-color-danger)}:host([size=small]) .calendar{min-width:240px;padding:.75rem}:host([size=small]) .day{width:28px;height:28px;font-size:.8125rem}:host([size=large]) .calendar{min-width:320px;padding:1.25rem}:host([size=large]) .day{width:36px;height:36px;font-size:.9375rem}@media (max-width:640px){.calendar{left:50%;right:auto;transform:translateX(-50%);min-width:280px}}";
 
   let SniceDatePicker = (() => {
-      let _classDecorators = [snice.element('snice-date-picker')];
+      let _classDecorators = [snice.element('snice-date-picker', { formAssociated: true })];
       let _classDescriptor;
       let _classExtraInitializers = [];
       let _classThis;
@@ -167,43 +167,6 @@ var SniceDatePicker = (function (exports, snice) {
       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.loading = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _loading_initializers, false));
-              this.required = (__runInitializers(this, _loading_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 = [snice.property({})];
@@ -295,6 +258,47 @@ var SniceDatePicker = (function (exports, snice) {
               if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
               __runInitializers(_classThis, _classExtraInitializers);
           }
+          constructor() {
+              super();
+              this.internals = __runInitializers(this, _instanceExtraInitializers);
+              this.size = __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.loading = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _loading_initializers, false));
+              this.required = (__runInitializers(this, _loading_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'];
+              if (typeof this.attachInternals == 'function') {
+                  this.internals = this.attachInternals();
+              }
+          }
           styles() {
               return snice.css /*css*/ `${cssContent}`;
           }
@@ -421,6 +425,9 @@ var SniceDatePicker = (function (exports, snice) {
           }
           init() {
               this.parseInitialValue();
+              if (this.internals) {
+                  this.internals.setFormValue(this.value);
+              }
               // Update clear button after queries are resolved
               queueMicrotask(() => this.updateClearButton());
               this.setupCalendarClickOutside();
@@ -771,6 +778,9 @@ var SniceDatePicker = (function (exports, snice) {
               }
               this.updateInputValue();
               this.updateClearButton();
+              if (this.internals) {
+                  this.internals.setFormValue(this.value);
+              }
               if (this.showCalendar) {
                   this.updateCalendarGrid();
               }