fix(components/input-layout-date): min max should correction for manual input

apps/doc/src/app/components/input/input-layout-date/examples/base/input-layout-date-base-example.component.html

@@ -1,3 +1,9 @@
 <prizm-input-layout label="Заголовок">
-  <prizm-input-layout-date [formControl]="control"></prizm-input-layout-date>
+  <prizm-input-layout-date [formControl]="control" [min]="min" [max]="max"></prizm-input-layout-date>
 </prizm-input-layout>
+
+<pre>
+  min: {{ min.toLocalNativeDate() | date : 'shortDate' }}
+  max: {{ max.toLocalNativeDate() | date : 'shortDate' }}
+  value: {{ control.value }}
+</pre>

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);
 }

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<T>
   ngControl!: NgControl;
   readonly changeDetectorRef!: ChangeDetectorRef;
   readonly layoutComponent?: PrizmInputLayoutComponent | null;
-  private previousInternalValue$$ = new BehaviorSubject<T | null>(null);
+  protected previousInternalValue$$ = new BehaviorSubject<T | null>(null);
   onChange: (val: T) => void = PRIZM_EMPTY_FUNCTION;
   onTouch: () => void = PRIZM_EMPTY_FUNCTION;
   protected readonly focusableElement?: ElementRef<HTMLInputElement> | any;
@@ -74,6 +74,7 @@ export abstract class PrizmInputNgControl<T>
     return !!this.ngControl?.touched;
   }
 
+  public readonly renderer2 = inject(Renderer2);
   protected constructor(
     protected readonly injector: Injector,
     readonly valueTransformer?: PrizmControlValueTransformer<T> | null
@@ -118,7 +119,7 @@ export abstract class PrizmInputNgControl<T>
   }
 
   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<T>
   }
 
   public setDisabledState(isDisabled: boolean) {
+    if (this.focusableElement?.nativeElement) {
+      this.renderer2.setProperty(this.focusableElement.nativeElement, 'disabled', isDisabled);
+    }
+
     this.checkControlUpdate();
     this.stateChanges.next();
   }

libs/components/src/lib/components/input/input-date/input-layout-date.component.html

@@ -11,11 +11,11 @@
   <input
     class="input-search"
     #focusableElementRef
+    #mask="mask"
     [mask]="computedMask"
     [showMaskTyped]="focusableElementRef.focused"
     [dropSpecialCharacters]="false"
     [placeholder]="placeholder"
-    [disabled]="!!disabled"
     [ngModelOptions]="{ standalone: true }"
     [ngModel]="stringValue"
     (ngModelChange)="onValueChange($event || '')"

libs/components/src/lib/components/input/input-date/input-layout-date.component.ts

@@ -1,4 +1,5 @@
 import {
+  afterRender,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -9,6 +10,7 @@ import {
   Injector,
   Input,
   Optional,
+  Renderer2,
   ViewChild,
 } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -59,6 +61,7 @@ import { PrizmLinkComponent } from '../../link';
 import { PrizmDropdownHostComponent } from '../../dropdowns/dropdown-host';
 import { PrizmIconsFullRegistry } from '@prizm-ui/icons/core';
 import { prizmIconsCalendarBlank } from '@prizm-ui/icons/full/source';
+import { NgxMaskDirective } from 'ngx-mask';
 
 @Component({
   selector: `prizm-input-layout-date`,
@@ -98,6 +101,9 @@ export class PrizmInputLayoutDateComponent extends PrizmInputNgControl<PrizmDay
   @ViewChild('focusableElementRef', { read: ElementRef })
   public override readonly focusableElement?: ElementRef<HTMLInputElement>;
 
+  @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<PrizmDay
   public rightButtons$!: BehaviorSubject<PrizmDateButton[]>;
 
   private readonly iconsFullRegistry = inject(PrizmIconsFullRegistry);
+  private readonly render2 = inject(Renderer2);
 
   constructor(
     @Inject(Injector) injector: Injector,
@@ -164,6 +171,18 @@ export class PrizmInputLayoutDateComponent extends PrizmInputNgControl<PrizmDay
     this.extraButtonInjector = injector;
 
     this.iconsFullRegistry.registerIcons(prizmIconsCalendarBlank);
+
+    // TODO after v5 released devide and move to abstract layer for all component
+    afterRender(() => {
+      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<PrizmDay
       return;
     }
 
-    this.updateValue(
+    this.updateWithCorrectDate(
       value.length !== PRIZM_DATE_FILLER_LENGTH ? null : PrizmDay.normalizeParse(value, this.dateFormat)
     );
   }
@@ -220,6 +239,9 @@ export class PrizmInputLayoutDateComponent extends PrizmInputNgControl<PrizmDay
 
   public override writeValue(value: PrizmDay | null): void {
     super.writeValue(value);
+    if (this.focusableElement) {
+      this.render2.setProperty(this.focusableElement.nativeElement, 'value', value ?? '');
+    }
   }
 
   public get nativeFocusableElement(): HTMLInputElement | null {
@@ -238,4 +260,15 @@ export class PrizmInputLayoutDateComponent extends PrizmInputNgControl<PrizmDay
     this.markAsTouched();
     this.changeDetectorRef.markForCheck();
   }
+
+  private updateWithCorrectDate(date: PrizmDay | null): void {
+    if (!date) return;
+    // correct min max date
+    if (date) date = date.dayLimit(this.min, this.max);
+    if (this.focusableElement) {
+      // this.focusableElement.nativeElement.value = date?.toString();
+    }
+
+    this.updateValue(date);
+  }
 }