@vsn-ux/ngx-gaia 0.12.0 → 0.12.2

package/docs/datepicker.md

@@ -24,6 +24,7 @@ Input directive for datepicker integration. Implements ControlValueAccessor and
 - `disabled: boolean` - Disabled state (default: false)
 - `min: any` - Minimum date constraint (default: null)
 - `max: any` - Maximum date constraint (default: null)
+- `preserveRawValue: boolean` - Push raw string to model on invalid input instead of null; useful with signal forms where schema-based validators need to distinguish empty fields from format errors (default: false)
 
 ### Outputs
 
@@ -111,6 +112,7 @@ interface GaDatepickerStruct {
 - `provideGaDatepickerI18n(value)` - Configure i18n (accepts class, object, or factory)
 - `provideGaDatepickerParserFormatter(value)` - Configure parser/formatter (accepts class or factory)
 - `provideGaDatepickerValueAdapter<T>(value)` - Configure value adapter (accepts class)
+- `provideGaDatepickerInputOptions(options)` - Configure datepicker input options globally (e.g. `{ preserveRawValue: true }`)
 - `extendGaDateParserFormatter(formats)` - Extend default date formats for additional locales
 
 ## Examples
@@ -146,6 +148,17 @@ Using native Date adapter:
 providers: [provideGaDatepickerValueAdapter(GaDatepickerNativeUtcValueAdapter)];
 ```
 
+Preserve raw value for signal forms validation:
+
+```html
+<input gaInput gaDatepickerInput [(ngModel)]="date" preserveRawValue />
+```
+
+```typescript
+// Or enable globally
+providers: [provideGaDatepickerInputOptions({ preserveRawValue: true })];
+```
+
 Custom i18n labels:
 
 ```typescript

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -1677,10 +1677,28 @@ function provideGaDatepickerParserFormatter(value) {
         : { provide: GaDatepickerParserFormatter, useValue: value };
 }
 
+const GA_DEFAULT_DATEPICKER_INPUT_OPTIONS = {
+    preserveRawValue: false,
+};
+const GA_DATEPICKER_INPUT_OPTIONS = new InjectionToken('GA_DATEPICKER_INPUT_OPTIONS', {
+    providedIn: 'root',
+    factory: () => GA_DEFAULT_DATEPICKER_INPUT_OPTIONS,
+});
+function provideGaDatepickerInputOptions(options) {
+    return {
+        provide: GA_DATEPICKER_INPUT_OPTIONS,
+        useValue: { ...GA_DEFAULT_DATEPICKER_INPUT_OPTIONS, ...options },
+    };
+}
+
 class GaDatepickerInputDirective {
     inputElRef = inject(ElementRef, { self: true });
     parserFormatter = inject(GaDatepickerParserFormatter);
     valueAdapter = inject(GaDatepickerValueAdapter);
+    globalOptions = inject(GA_DATEPICKER_INPUT_OPTIONS);
+    preserveRawValueInput = input(undefined, { ...(ngDevMode ? { debugName: "preserveRawValueInput" } : {}), alias: 'preserveRawValue',
+        transform: booleanAttribute });
+    preserveRawValue = computed(() => this.preserveRawValueInput() ?? this.globalOptions.preserveRawValue, ...(ngDevMode ? [{ debugName: "preserveRawValue" }] : []));
     // Native value control (alternative to Angular forms)
     valueInput = input(null, { ...(ngDevMode ? { debugName: "valueInput" } : {}), alias: 'value' });
     disabledInput = input(null, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled',
@@ -1694,6 +1712,7 @@ class GaDatepickerInputDirective {
     disabled = linkedSignal(() => !!this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     lastValueValid = signal(false, ...(ngDevMode ? [{ debugName: "lastValueValid" }] : []));
     lastDateChangeEmittedValue = signal(null, ...(ngDevMode ? [{ debugName: "lastDateChangeEmittedValue" }] : []));
+    focused = false;
     onNgChangeFn;
     onNgTouchedFn;
     constructor() {
@@ -1706,20 +1725,33 @@ class GaDatepickerInputDirective {
             });
         });
     }
+    onFocus() {
+        this.focused = true;
+    }
     onInput(event) {
         const target = event.target;
         // Parse the input value
         const parsedStruct = this.parserFormatter.parse(target.value);
-        const newValue = this.valueAdapter.fromStruct(parsedStruct);
-        this.lastValueValid.set(!target.value || parsedStruct !== null);
-        // Only update if the parsed value is different from current value
-        if (compareStructs(parsedStruct, this.dateStruct()) !== 0) {
-            this.value.set(newValue);
-            this.dateInput.emit(newValue);
+        const isValid = !target.value || parsedStruct !== null;
+        this.lastValueValid.set(isValid);
+        if (isValid || !this.preserveRawValue()) {
+            // Existing behavior: convert struct to external value
+            const newValue = this.valueAdapter.fromStruct(parsedStruct);
+            if (compareStructs(parsedStruct, this.dateStruct()) !== 0) {
+                this.value.set(newValue);
+                this.dateInput.emit(newValue);
+            }
+            this.onNgChangeFn?.(newValue);
+        }
+        else {
+            // preserveRawValue ON + invalid input: push raw string
+            this.value.set(target.value);
+            this.dateInput.emit(target.value);
+            this.onNgChangeFn?.(target.value);
         }
-        this.onNgChangeFn?.(newValue);
     }
     onBlur() {
+        this.focused = false;
         if (this.dateStruct()) {
             this.formatValue();
         }
@@ -1730,9 +1762,16 @@ class GaDatepickerInputDirective {
         this.onNgTouchedFn?.();
     }
     formatValue() {
-        const value = this.dateStruct();
-        const formattedValue = this.parserFormatter.format(value);
-        this.inputElRef.nativeElement.value = formattedValue;
+        const struct = this.dateStruct();
+        if (struct) {
+            this.inputElRef.nativeElement.value = this.parserFormatter.format(struct);
+        }
+        else if (this.preserveRawValue() && typeof this.value() === 'string') {
+            this.inputElRef.nativeElement.value = this.value();
+        }
+        else {
+            this.inputElRef.nativeElement.value = this.parserFormatter.format(null);
+        }
     }
     updateValue(value, { updateView, emitToNgModel, } = {}) {
         this.value.set(value);
@@ -1751,7 +1790,7 @@ class GaDatepickerInputDirective {
     }
     // ControlValueAccessor implementation
     writeValue(value) {
-        this.updateValue(value, { updateView: true });
+        this.updateValue(value, { updateView: !this.focused });
     }
     registerOnChange(fn) {
         this.onNgChangeFn = fn;
@@ -1786,7 +1825,7 @@ class GaDatepickerInputDirective {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: GaDatepickerInputDirective, isStandalone: true, selector: "input[gaDatepickerInput]", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateInput: "dateInput", dateChange: "dateChange" }, host: { listeners: { "blur": "onBlur()", "input": "onInput($event)" }, properties: { "disabled": "disabled()" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: GaDatepickerInputDirective, isStandalone: true, selector: "input[gaDatepickerInput]", inputs: { preserveRawValueInput: { classPropertyName: "preserveRawValueInput", publicName: "preserveRawValue", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateInput: "dateInput", dateChange: "dateChange" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "input": "onInput($event)" }, properties: { "disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GaDatepickerInputDirective),
@@ -1818,11 +1857,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     ],
                     host: {
                         '[disabled]': 'disabled()',
+                        '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(input)': 'onInput($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateInput: [{ type: i0.Output, args: ["dateInput"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { preserveRawValueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveRawValue", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateInput: [{ type: i0.Output, args: ["dateInput"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 
 class GaDatepickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1856,7 +1896,7 @@ class GaDatepickerNativeUtcValueAdapter extends GaDatepickerValueAdapter {
      * Uses UTC to avoid timezone issues and normalizes to midnight
      */
     toStruct(value) {
-        if (!value)
+        if (!value || !(value instanceof Date))
             return null;
         // Create UTC date at midnight to avoid timezone issues
         const utcDate = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
@@ -6492,5 +6532,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_DATA_SELECT_I18N_FACTORY, GA_DATA_SELECT_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_DEFAULT_TOAST_OPTIONS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TABS_I18N_FACTORY, GA_TOAST_OPTIONS, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaChipComponent, GaChipListboxComponent, GaChipModule, GaDataSelectComponent, GaDataSelectI18n, GaDataSelectI18nDefault, GaDataSelectModule, GaDataSelectOptgroupLabelDirective, GaDataSelectOptionLabelDirective, GaDataSelectRequiredValidator, GaDataSelectValueDirective, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaStepComponent, GaStepperComponent, GaStepperModule, GaStepperPanelDirective, GaSwitchComponent, GaSwitchModule, GaTabComponent, GaTabContentDirective, GaTabsComponent, GaTabsI18n, GaTabsI18nDefault, GaTabsModule, GaTextAreaDirective, GaTextAreaModule, GaToastComponent, GaToaster, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, GaTooltipTitleComponent, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDataSelectI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n, provideGaTabsI18n, provideGaToastOptions };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_DATA_SELECT_I18N_FACTORY, GA_DATA_SELECT_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_INPUT_OPTIONS, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_DEFAULT_DATEPICKER_INPUT_OPTIONS, GA_DEFAULT_TOAST_OPTIONS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TABS_I18N_FACTORY, GA_TOAST_OPTIONS, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaChipComponent, GaChipListboxComponent, GaChipModule, GaDataSelectComponent, GaDataSelectI18n, GaDataSelectI18nDefault, GaDataSelectModule, GaDataSelectOptgroupLabelDirective, GaDataSelectOptionLabelDirective, GaDataSelectRequiredValidator, GaDataSelectValueDirective, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaStepComponent, GaStepperComponent, GaStepperModule, GaStepperPanelDirective, GaSwitchComponent, GaSwitchModule, GaTabComponent, GaTabContentDirective, GaTabsComponent, GaTabsI18n, GaTabsI18nDefault, GaTabsModule, GaTextAreaDirective, GaTextAreaModule, GaToastComponent, GaToaster, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, GaTooltipTitleComponent, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDataSelectI18n, provideGaDatepickerI18n, provideGaDatepickerInputOptions, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n, provideGaTabsI18n, provideGaToastOptions };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map