diff --git a/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.html b/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.html index bcc763ca2d..bba34b5ba7 100644 --- a/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.html +++ b/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.html @@ -1,3 +1,9 @@ - + + +
+  min: {{ min.toLocalNativeDate() | date : 'shortDate' }}
+  max: {{ max.toLocalNativeDate() | date : 'shortDate' }}
+  value: {{ control.value }}
+
diff --git a/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.ts b/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.ts index 9f5b35d0ef..bdc2470a74 100644 --- a/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.ts +++ b/apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.ts @@ -16,4 +16,7 @@ import { PrizmDay } from '@prizm-ui/components'; }) export class PrizmInputLayoutDateBaseExampleComponent { public readonly control = new UntypedFormControl(new PrizmDay(2017, 0, 15)); + readonly min = new PrizmDay(2000, 2, 20); + + readonly max = new PrizmDay(2040, 2, 20); } diff --git a/libs/components/src/lib/components/input/common/base/input-ng-control.class.ts b/libs/components/src/lib/components/input/common/base/input-ng-control.class.ts index 48b1ff68ae..a2393b9c78 100644 --- a/libs/components/src/lib/components/input/common/base/input-ng-control.class.ts +++ b/libs/components/src/lib/components/input/common/base/input-ng-control.class.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Directive, ElementRef, inject, Injector, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Directive, ElementRef, inject, Injector, OnInit, Renderer2 } from '@angular/core'; import { AbstractControl, ControlValueAccessor, NgControl, NgModel, Validators } from '@angular/forms'; import { PrizmInputControl } from './input-control.class'; import { PrizmDestroyService } from '@prizm-ui/helpers'; @@ -18,7 +18,7 @@ export abstract class PrizmInputNgControl ngControl!: NgControl; readonly changeDetectorRef!: ChangeDetectorRef; readonly layoutComponent?: PrizmInputLayoutComponent | null; - private previousInternalValue$$ = new BehaviorSubject(null); + protected previousInternalValue$$ = new BehaviorSubject(null); onChange: (val: T) => void = PRIZM_EMPTY_FUNCTION; onTouch: () => void = PRIZM_EMPTY_FUNCTION; protected readonly focusableElement?: ElementRef | any; @@ -74,6 +74,7 @@ export abstract class PrizmInputNgControl return !!this.ngControl?.touched; } + public readonly renderer2 = inject(Renderer2); protected constructor( protected readonly injector: Injector, readonly valueTransformer?: PrizmControlValueTransformer | null @@ -118,7 +119,7 @@ export abstract class PrizmInputNgControl } protected updateValue(value: T): void { - if (this.disabled || this.valueIdenticalComparator(this.value, value)) { + if (this.disabled /*|| this.valueIdenticalComparator(this.value, value)*/) { return; } this.onChange(value); @@ -131,6 +132,10 @@ export abstract class PrizmInputNgControl } public setDisabledState(isDisabled: boolean) { + if (this.focusableElement?.nativeElement) { + this.renderer2.setProperty(this.focusableElement.nativeElement, 'disabled', isDisabled); + } + this.checkControlUpdate(); this.stateChanges.next(); } diff --git a/libs/components/src/lib/components/input/input-date/input-layout-date.component.html b/libs/components/src/lib/components/input/input-date/input-layout-date.component.html index b5fd0eafbb..6394ec1d39 100644 --- a/libs/components/src/lib/components/input/input-date/input-layout-date.component.html +++ b/libs/components/src/lib/components/input/input-date/input-layout-date.component.html @@ -11,11 +11,11 @@ ; + @ViewChild('mask', { read: NgxMaskDirective }) + public textMask?: NgxMaskDirective; + private month: PrizmMonth | null = null; public mask = prizmCreateDateNgxMask(this.dateFormat, this.dateSeparator); @@ -146,6 +152,7 @@ export class PrizmInputLayoutDateComponent extends PrizmInputNgControl; private readonly iconsFullRegistry = inject(PrizmIconsFullRegistry); + private readonly render2 = inject(Renderer2); constructor( @Inject(Injector) injector: Injector, @@ -164,6 +171,18 @@ export class PrizmInputLayoutDateComponent extends PrizmInputNgControl { + if (this.focusableElement?.nativeElement && !this.focused) { + this.render2.setProperty( + this.focusableElement.nativeElement, + 'value', + this.previousInternalValue$$.value ?? '' + ); + this.textMask?.writeValue(this.previousInternalValue$$.value?.toString() ?? ''); + } + }); } public override ngOnInit(): void { @@ -198,7 +217,7 @@ export class PrizmInputLayoutDateComponent extends PrizmInputNgControl