@elderbyte/ngx-starter 14.11.0 → 14.11.1

package/src/lib/components/time/elder-date-time-input/elder-date-time-input.component.html

@@ -0,0 +1,16 @@
+<mat-form-field fxFlex
+                class="elder-std-form-field"
+                [appearance]="appearance"
+                [color]="color"
+>
+  <mat-label *ngIf="label">{{label | translate}}</mat-label>
+  <input matInput fxFlex="grow"
+         [name]="name + '-inner'"
+         type="datetime-local"
+         [required]="required"
+         [readonly]="readonly"
+         [disabled]="disabled"
+         [placeholder]="placeholder | translate"
+         [ngModel]="valueDate$ | async | date:'yyyy-MM-ddTHH:mm'"
+         (ngModelChange)="onDateTimeChanged($event)">
+</mat-form-field>

package/src/lib/components/time/elder-date-time-input/elder-date-time-input.component.ts

@@ -0,0 +1,93 @@
+import {Component, OnInit, ChangeDetectionStrategy, Input, Output} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {FormFieldBaseComponent} from '../../../common/forms/form-field-base.component';
+import {Instant} from '@js-joda/core';
+import {buildFormIntegrationProviders} from '../../../common/forms/template-composite-control';
+import {ViewProviders} from '../../../common/forms/view-providers';
+import {TimeUtil} from '../../../common/time/time-util';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {DateUtil} from '../../../common/time/date-util';
+
+@Component({
+  selector: 'elder-date-time-input',
+  templateUrl: './elder-date-time-input.component.html',
+  styleUrls: ['./elder-date-time-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: buildFormIntegrationProviders(ElderDateTimeInputComponent),
+  viewProviders: [ViewProviders.ParentControlContainer]
+})
+export class ElderDateTimeInputComponent extends FormFieldBaseComponent<Instant> implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  public readonly valueDate$: Observable<Date>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+    super();
+    this.valueDate$ = this.value$.pipe(
+      map(instant => instant ? DateUtil.instantToDate(instant) : null)
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {}
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Output()
+  public get isoValueChange(): Observable<string | null> {
+    return this.valueChange.pipe(
+      map(instant => instant ? instant.toJSON() : null)
+    );
+  }
+
+  @Input()
+  public set isoValue(value: string | null) {
+    this.value = value ? Instant.parse(value) : null;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onDateTimeChanged(eventDate: string): void {
+    const newDate = !!eventDate ? new Date(eventDate) : null;
+    if (newDate) {
+      this.updateValue(
+        TimeUtil.instant(newDate)
+      );
+    } else {
+      this.updateValue(null);
+    }
+  }
+
+  protected valuesEquals(a: Instant, b: Instant): boolean {
+    return (a && b)
+      ? a.equals(b)
+      : a === b;
+  }
+}

package/src/lib/components/time/elder-interval-input/elder-interval-input.component.html

@@ -0,0 +1,92 @@
+<ng-container [ngSwitch]="mode">
+
+  <!-- DATE_TIME_RANGE -->
+  <div *ngSwitchCase="'date-time-range'"
+       fxLayout="row" fxLayoutGap="8px">
+    <elder-date-time-input
+      [name]="name + '-dt-start'"
+      [value]="(value$ | async)?.start"
+      (valueUpdated)="onStartChanged($event)"
+      [required]="required"
+      [readonly]="readonly"
+      [disabled]="disabled"
+      [placeholder]="(placeholder || '') + ' ' + ('interval.from' | translate)"
+    ></elder-date-time-input>
+
+    <elder-date-time-input
+      [name]="name + '-dt-end'"
+      [value]="(value$ | async)?.end"
+      (valueUpdated)="onEndChanged($event)"
+      [required]="required"
+      [readonly]="readonly"
+      [disabled]="disabled"
+      [placeholder]="(placeholder || '') + ' ' + ('interval.to' | translate)"
+    ></elder-date-time-input>
+  </div>
+
+  <!-- DAY_TIME_RANGE -->
+  <div *ngSwitchCase="'day-time-range'"
+       fxLayout="row" fxLayoutGap="8px">
+    <elder-date-time-input
+      [name]="name + '-day-start'"
+      [value]="(value$ | async)?.start"
+      (valueUpdated)="onDayTimeStartChanged($event)"
+      [required]="required"
+      [readonly]="readonly"
+      [disabled]="disabled"
+      [placeholder]="(placeholder || '') + ' ' + ('interval.from' | translate)"
+    ></elder-date-time-input>
+
+    <elder-local-time-input
+      [name]="name + '-day-end'"
+      [value]="endTime$ | async"
+      (valueUpdated)="onDayTimeEndTimeChanged($event)"
+      [required]="required"
+      [readonly]="readonly"
+      [disabled]="disabled"
+      [placeholder]="(placeholder || '') + ' ' + ('interval.to' | translate)"
+    ></elder-local-time-input>
+  </div>
+
+  <!-- DATE_RANGE -->
+  <div *ngSwitchCase="'date-range'"
+       fxLayout="row" fxLayoutGap="8px">
+    <elder-local-date-input
+      [name]="name + '-date-start'"
+      [value]="startDate$ | async"
+      (valueUpdated)="onStartDateChanged($event)"
+      [required]="required"
+      [readonly]="readonly"
+      [disabled]="disabled"
+      [placeholder]="(placeholder || '') + ' ' + ('interval.from' | translate)"
+    ></elder-local-date-input>
+
+    <elder-local-date-input
+      [name]="name + '-date-end'"
+      [value]="endDate$ | async"
+      (valueUpdated)="onEndDateChanged($event)"
+      [required]="required"
+      [readonly]="readonly"
+      [disabled]="disabled"
+      [placeholder]="(placeholder || '') + ' ' + ('interval.to' | translate)"
+    ></elder-local-date-input>
+  </div>
+
+  <!-- SINGLE_DAY -->
+  <div *ngSwitchCase="'single-day'"
+       fxLayout="row" fxLayoutGap="8px">
+    <elder-local-date-input
+      [name]="name"
+      [value]="startDate$ | async"
+      (valueUpdated)="onSingleDayDateChanged($event)"
+      [required]="required"
+      [readonly]="readonly"
+      [disabled]="disabled"
+      [placeholder]="(placeholder || '')"
+    ></elder-local-date-input>
+  </div>
+
+</ng-container>
+
+
+

package/src/lib/components/time/elder-interval-input/elder-interval-input.component.ts

@@ -0,0 +1,222 @@
+import {Component, OnInit, ChangeDetectionStrategy, Output, Input} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {FormFieldBaseComponent} from '../../../common/forms/form-field-base.component';
+import {buildFormIntegrationProviders} from '../../../common/forms/template-composite-control';
+import {ViewProviders} from '../../../common/forms/view-providers';
+import {Interval} from '../../../common/time/interval';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {Instant, LocalDate, LocalTime, ZoneId} from '@js-joda/core';
+
+export type IntervalInputMode =
+
+  /**
+   * Supports the selection of a single (full) day:
+   * 12.12.2020
+   */
+  'single-day' |
+
+  /**
+   * Supports a time interval in a day:
+   * 12.12.2020 13:00 - 18:00
+   */
+  'day-time-range' |
+
+  /**
+   * Supports a date interval without time
+   * 12.12.2020 - 22.06.2021
+   */
+  'date-range' |
+
+  /**
+   * Supports a date-time to date-time interval
+   * 12.12.2020 8:00 - 22.06.2021 17:00
+   * This is the default as it supports the most detailed input.
+   */
+  'date-time-range'
+  ;
+
+@Component({
+  selector: 'elder-interval-input',
+  templateUrl: './elder-interval-input.component.html',
+  styleUrls: ['./elder-interval-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: buildFormIntegrationProviders(ElderIntervalInputComponent),
+  viewProviders: [ViewProviders.ParentControlContainer]
+})
+export class ElderIntervalInputComponent extends FormFieldBaseComponent<Interval> implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  @Input()
+  public mode: IntervalInputMode = 'date-time-range';
+
+  @Input()
+  public zone = ZoneId.systemDefault();
+  
+  public readonly endTime$: Observable<LocalTime>;
+
+  public readonly startDate$: Observable<LocalDate>;
+  public readonly endDate$: Observable<LocalDate>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+    super();
+    this.endTime$ = this.value$.pipe(
+      map(interval => interval?.end ? LocalTime.from(interval.end.atZone(this.zone)) : null)
+    );
+
+    this.startDate$ = this.value$.pipe(
+      map(interval => interval?.start ? LocalDate.from(interval.start.atZone(this.zone)) : null)
+    );
+
+    this.endDate$ = this.value$.pipe(
+      map(interval => interval?.end ? LocalDate.from(interval.end.atZone(this.zone)) : null)
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Output()
+  public get isoValueChange(): Observable<string | null> {
+    return this.valueChange.pipe(
+      map(interval => interval ? interval.toInstantString() : null)
+    );
+  }
+
+  @Input()
+  public set isoValue(value: string | null) {
+    this.value = value ? Interval.parse(value) : null;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onDayTimeStartChanged(start: Instant) {
+    this.updateValue(
+      Interval.of(
+        start,
+        this.instantAtEndOfDay(start)
+      )
+    );
+  }
+
+  public onDayTimeEndTimeChanged(endTime: LocalTime): void {
+    const start = this.value.start;
+    const end = this.instantWithTime(start, endTime);
+
+    this.updateValue(
+      Interval.of(
+        start,
+        !end.isAfter(start) ? this.instantAtEndOfDay(start) : end
+      )
+    );
+
+  }
+
+  public onStartChanged(start: Instant): void {
+    this.updateValue(
+      Interval.of(
+        start,
+        this.value.end
+      )
+    );
+  }
+
+  public onEndChanged(end: Instant): void {
+    this.updateValue(
+      Interval.of(
+        this.value.start,
+        end
+      )
+    );
+  }
+
+  public onStartDateChanged(date: LocalDate): void {
+    this.updateValue(
+      Interval.of(
+        this.instantAtDate(this.value?.start ?? this.instantAtStartOfDayNow(), date),
+        this.value?.end
+      )
+    );
+  }
+
+  public onEndDateChanged(date: LocalDate): void {
+    this.updateValue(
+      Interval.of(
+        this.value?.start,
+        this.instantAtDate(this.value?.end ?? this.instantAtStartOfDayNow(), date)
+      )
+    );
+  }
+
+  public onSingleDayDateChanged(date: LocalDate): void {
+    this.updateValue(
+      Interval.ofDay(date, this.zone)
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private instantAtStartOfDayNow(): Instant {
+    return LocalDate.now().atStartOfDay().atZone(this.zone).toInstant();
+  }
+
+  private instantAtEndOfDay(instant: Instant): Instant {
+    return LocalDate.ofInstant(instant).atStartOfDay().plusDays(1).atZone(this.zone).toInstant();
+  }
+
+  private instantAtDate(instant: Instant, date: LocalDate): Instant {
+    return instant.atZone(this.zone)
+      .withYear(date.year())
+      .withMonth(date.monthValue())
+      .withDayOfMonth(date.dayOfMonth())
+      .toInstant();
+  }
+
+  protected valuesEquals(a: Interval, b: Interval): boolean {
+    return (a && b)
+      ? a.equals(b)
+      : a === b;
+  }
+
+  private instantWithTime(instant: Instant, time: LocalTime): Instant {
+    return instant
+      .atZone(this.zone)
+      .withHour(time.hour())
+      .withMinute(time.minute())
+      .toInstant();
+  }
+
+}

package/src/lib/components/time/elder-local-date-input/elder-local-date-input.component.html

@@ -0,0 +1,41 @@
+<mat-form-field fxFlex
+                class="elder-std-form-field"
+                [appearance]="appearance"
+                [color]="color"
+>
+  <mat-label *ngIf="label">{{label | translate}}</mat-label>
+  <input matInput elderNoSpinner fxFlex
+         type="date"
+         [name]="name + '-inner'"
+         [required]="required"
+         [readonly]="readonly"
+         [disabled]="disabled"
+         [placeholder]="placeholder | translate"
+         [ngModel]="date$ | async | date: 'yyyy-MM-dd'"
+         (ngModelChange)="onDateInputChanged($event)"
+         (blur)="blur.next($event)"
+  >
+  <input style="display: none" [matDatepicker]="picker" (dateChange)="onDatepickerInputChange($event)">
+
+  <ng-container matSuffix>
+    <mat-datepicker-toggle
+      *ngIf="!isLocked && datePickerEnabled"
+      [for]="picker">
+    </mat-datepicker-toggle>
+
+    <!-- valueWrapper.value && -->
+    <button mat-icon-button type="button"
+            *ngIf="allowNull"
+            [disabled]="isLocked"
+            (click)="clear($event)" aria-label="Clear"
+            elderStopEventPropagation
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+
+  </ng-container>
+
+  <mat-datepicker [touchUi]="datePickerTouchUi" #picker></mat-datepicker>
+
+</mat-form-field>
+

package/src/lib/components/time/elder-local-date-input/elder-local-date-input.component.ts

@@ -0,0 +1,213 @@
+import {Component, OnInit, ChangeDetectionStrategy, Output, Input, ViewChild} from '@angular/core';
+import {FormFieldBaseComponent} from '../../../common/forms/form-field-base.component';
+import {LocalDate, ZoneId} from '@js-joda/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {buildFormIntegrationProviders} from '../../../common/forms/template-composite-control';
+import {ViewProviders} from '../../../common/forms/view-providers';
+import {combineLatest, Observable, of, Subject} from 'rxjs';
+import {catchError, map} from 'rxjs/operators';
+import {MatDatepicker, MatDatepickerInputEvent} from '@angular/material/datepicker';
+import {TimeUtil} from '../../../common/time/time-util';
+import {IsoDateStr} from '../../../common/time/date-util';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+@Component({
+  selector: 'elder-local-date-input',
+  templateUrl: './elder-local-date-input.component.html',
+  styleUrls: ['./elder-local-date-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: buildFormIntegrationProviders(ElderLocalDateInputComponent),
+  viewProviders: [ViewProviders.ParentControlContainer]
+})
+export class ElderLocalDateInputComponent extends FormFieldBaseComponent<LocalDate> implements OnInit {
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private _allowNull = false;
+
+  @Input()
+  public zone = ZoneId.systemDefault();
+
+  /** If true, date picker functionality is enabled. */
+  @Input()
+  public datePickerEnabled = true;
+
+  /** If true, touch optimized mode of date picker is enabled. */
+  @Input()
+  public datePickerTouchUi = false;
+
+  @ViewChild(MatDatepicker, {static: true})
+  public picker: MatDatepicker<Date>;
+
+  public readonly date$: Observable<Date>;
+
+  @Output()
+  public readonly blur = new Subject<FocusEvent>();
+
+  /**
+   * Emits the updated value after the control blurred.
+   * (update & blur) events must have happened.
+   */
+  @Output()
+  public readonly valueUpdatedBlur: Observable<LocalDate>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+    super();
+    this.date$ = this.mapIgnoreErrorObservable(this.value$, (v: LocalDate) => TimeUtil.localDateToDate(v, this.zone));
+    this.valueUpdatedBlur = combineLatest([this.valueUpdated, this.blur]).pipe(
+      map(([value, focusEvent]) => value)
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Allows the user to select 'nothing' / null.
+   */
+  @Input()
+  public set allowNull(val: boolean) {
+    this._allowNull = coerceBooleanProperty(val);
+  }
+
+  public get allowNull(): boolean {
+    return this._allowNull;
+  }
+
+  @Output()
+  public get isoValueChange(): Observable<string | null> {
+    return this.mapIgnoreErrorObservable(this.valueChange, (d: LocalDate) => d.toJSON());
+  }
+
+  @Input()
+  public set isoValue(value: string | null) {
+    this.value = this.mapIgnoreError(value, (d: string) => LocalDate.parse(d));
+  }
+
+  @Output()
+  public get dateValueChange(): Observable<Date | null> {
+    return this.mapIgnoreErrorObservable(this.valueChange, (d: LocalDate) => TimeUtil.localDateToDate(d));
+  }
+
+  @Input()
+  public set dateValue(value: Date | null) {
+    this.value = this.mapIgnoreError(value, (d: Date) => TimeUtil.dateToLocalDate(d));
+  }
+
+  @Output()
+  public get isoDateValueChange(): Observable<IsoDateStr | null> {
+    return this.mapIgnoreErrorObservable(this.valueChange, (d: LocalDate) => TimeUtil.localDateToDate(d).toISOString());
+  }
+
+  @Input()
+  public set isoDateValue(value: IsoDateStr | null) {
+    this.value = this.mapIgnoreError(value, (d: IsoDateStr) => TimeUtil.dateToLocalDate(new Date(d)));
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public clear(event: Event): void {
+    this.updateValue(null);
+  }
+
+  public openDatePicker(): void {
+    this.picker.open();
+  }
+
+  public onDateInputChanged(newDate: string): void {
+    try {
+
+      this.logger.debug('onDateInputChanged: "' + newDate + '"');
+
+      if (newDate === '' || newDate.startsWith('0')) {
+        return;
+      } // Ignore while updating the year
+      this.setDateStrInternally(newDate);
+    } catch (err) {
+      this.logger.error('Failed to parse from date-input-changed event: ' + newDate, err);
+    }
+  }
+
+  public onDatepickerInputChange(event: MatDatepickerInputEvent<Date>): void {
+    this.logger.debug('Datepicker Input has changed: ' + event.value);
+    this.setDateInternally(event.value);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private mapIgnoreError(value: Date | string, conversionFn: (d: Date | string) => LocalDate): LocalDate {
+    try {
+      const ld = value ? conversionFn(value) : null;
+      this.logger.info('Setting local date: ' + ld);
+      return ld;
+    } catch (err) {
+      this.logger.warn('Failed to apply value to dateValue: ' + value, err);
+    }
+  }
+
+  private mapIgnoreErrorObservable<T>(date: Observable<LocalDate>, conversionFn: (d: LocalDate) => T): Observable<T | null> {
+    return date.pipe(
+      map(localDate => localDate ? conversionFn(localDate) : null),
+      catchError(err => {
+        this.logger.error('Failed to convert local date!', err);
+        return of(null);
+      })
+    );
+  }
+
+  private setDateStrInternally(date: string): void {
+    if (date) {
+      this.updateValue(LocalDate.parse(date));
+    } else {
+      this.updateValue(null);
+    }
+  }
+
+  private setDateInternally(date: Date): void {
+    if (date) {
+      this.updateValue(TimeUtil.dateToLocalDate(date));
+    } else {
+      this.updateValue(null);
+    }
+  }
+
+  protected valuesEquals(a: LocalDate, b: LocalDate): boolean {
+    return (a && b)
+      ? a.equals(b)
+      : a === b;
+  }
+
+}