fix(components/date-time-range): input non label mode

zyfra · Nov 2, 2023 · b68df36 · b68df36
1 parent 9d16763
commit b68df36
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/...rc/lib/components/input/input-date-time-range/input-layout-date-time-range.component.html b/...rc/lib/components/input/input-date-time-range/input-layout-date-time-range.component.html
@@ -18,13 +18,11 @@
  >
  <input
  class="input-main"
- [class.show-placeholder]="
- (empty | async) && (disabled || (focusableElementRef.focused$ | async) !== true)
- "
+ [class.show-placeholder]="showPlaceholder$ | async"
  [placeholder]="placeholder"
  [mask]="computedDateMask"
  [clearIfNotMatch]="false"
- [showMaskTyped]="(focusableElementRef.focused$ | async) || (hasNativeValue$ | async)"
+ [showMaskTyped]="showMask$ | async"
  [dropSpecialCharacters]="false"
  [disabled]="disabled"
  [ngModelOptions]="{ standalone: true }"
@@ -43,7 +41,7 @@
  [mask]="computedTimeMask"
  [dropSpecialCharacters]="false"
  [clearIfNotMatch]="false"
- [showMaskTyped]="(focusableElementRef.focused$ | async) || (hasNativeValue$ | async)"
+ [showMaskTyped]="showMask$ | async"
  [disabled]="disabled"
  [ngModelOptions]="{ standalone: true }"
  [ngModel]="fromTimeValue"
@@ -61,7 +59,7 @@
  [mask]="computedDateMask"
  [dropSpecialCharacters]="false"
  [clearIfNotMatch]="false"
- [showMaskTyped]="(focusableElementRef.focused$ | async) || (hasNativeValue$ | async)"
+ [showMaskTyped]="showMask$ | async"
  [disabled]="!!disabled"
  [ngModelOptions]="{ standalone: true }"
  [ngModel]="toValue"
@@ -78,7 +76,7 @@
  [mask]="computedTimeMask"
  [dropSpecialCharacters]="false"
  [clearIfNotMatch]="false"
- [showMaskTyped]="(focusableElementRef.focused$ | async) || (hasNativeValue$ | async)"
+ [showMaskTyped]="showMask$ | async"
  [disabled]="!!disabled"
  [ngModelOptions]="{ standalone: true }"
  [ngModel]="toTimeValue"

diff --git a/.../src/lib/components/input/input-date-time-range/input-layout-date-time-range.component.ts b/.../src/lib/components/input/input-date-time-range/input-layout-date-time-range.component.ts
@@ -37,7 +37,16 @@ import { prizmNullableSame } from '../../../util/common/nullable-same';
 import { filterTruthy, PrizmDestroyService } from '@prizm-ui/helpers';
 import { PrizmInputControl } from '../common/base/input-control.class';
 import { PrizmInputNgControl } from '../common/base/input-ng-control.class';
-import { debounceTime, delay, distinctUntilChanged, map, share, takeUntil, tap } from 'rxjs/operators';
+import {
+ debounceTime,
+ delay,
+ distinctUntilChanged,
+ map,
+ share,
+ shareReplay,
+ takeUntil,
+ tap,
+} from 'rxjs/operators';
 import {
  prizmCreateDateNgxMask,
  PrizmDateTime,
@@ -311,6 +320,21 @@ export class PrizmInputLayoutDateTimeRangeComponent
  }
 
  public ngAfterViewInit(): void {
+ const focused$ = this.focusableElement?.focused$ as Observable<boolean>;
+ this.showPlaceholder$ = combineLatest([
+ this.empty,
+ focused$.pipe(map(focused => this.disabled || !focused)),
+ ]).pipe(
+ map(i => i.every(i => i)),
+ debounceTime(100),
+ shareReplay(1)
+ );
+ this.showMask$ = combineLatest([focused$, this.hasNativeValue$]).pipe(
+ map(every => !!every.find(i => !!i)),
+ debounceTime(100),
+ shareReplay(1)
+ );
+
  this.focusableElement?.blur$
  .pipe(
  debounceTime(0),
@@ -321,6 +345,9 @@ export class PrizmInputLayoutDateTimeRangeComponent
  .subscribe();
  }
 
+ showMask$ = of(false);
+ showPlaceholder$ = of(false);
+
  public override ngOnInit() {
  super.ngOnInit();
  this.rightButtons$ = this.extraButtonInjector.get(PRIZM_DATE_RIGHT_BUTTONS);
@@ -333,6 +360,18 @@ export class PrizmInputLayoutDateTimeRangeComponent
  const fromTimeValue = timeRange[0];
  const toTimeValue = timeRange[1];
 
+ if (
+ [fromValue, toValue, fromTimeValue, toTimeValue].every(i => !i) &&
+ ![
+ this.value?.dayRange.from,
+ this.value?.dayRange.to,
+ this.value?.timeRange?.to,
+ this.value?.timeRange?.from,
+ ].every(i => !i)
+ ) {
+ return this.updateValue(null);
+ }
+
  if (!fromValue || fromValue.length !== this.computedDateMask.length) return;
  if (!toValue || toValue.length !== this.computedDateMask.length) return;
  if (!fromTimeValue || fromTimeValue.length !== this.computedTimeMask.length) return;
@@ -371,7 +410,6 @@ export class PrizmInputLayoutDateTimeRangeComponent
 
  if (isFormValue) this.nativeValueFrom$$.next(value);
  else this.nativeValueTo$$.next(value);
-
  if (value == null) {
  this.onOpenChange(true);
  }