upgrade angualr, fix keep session attribute

src/app/ui/datetimepicker/datetimepicker.component.html

@@ -0,0 +1,23 @@
+<div class="flex wrap" fxLayoutAlign="start stretch">
+  <div [style.flex-basis]="'33%'">
+    <mat-form-field>
+      <mat-label>{{'durationpicker.days' | i18n}}</mat-label>
+<input matInput type="number" min="0"   [formControl]="days">
+    </mat-form-field>
+  </div>
+  <div [style.flex-basis]="'33%'">
+    <mat-form-field>
+      <mat-label>{{'durationpicker.hours' | i18n}}</mat-label>
+<input matInput type="number" min="0" max="23"  
+        [formControl]="hours">
+    </mat-form-field>
+  </div>
+  <div [style.flex-basis]="'33%'">
+    <mat-form-field>
+      <mat-label>{{'durationpicker.minutes' | i18n}}</mat-label>
+<input matInput type="number" min="0" max="59"  
+        [formControl]="minutes">
+      <mat-hint align="end">{{duration}}</mat-hint>
+    </mat-form-field>
+  </div>
+</div>

src/app/ui/datetimepicker/datetimepicker.component.scss

@@ -0,0 +1,4 @@
+mat-form-field {
+  display: block;
+  padding-right: 8px;
+}

src/app/ui/datetimepicker/datetimepicker.component.ts

@@ -0,0 +1,104 @@
+import { Component, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-datetimepicker',
+  templateUrl: './datetimepicker.component.html',
+  styleUrls: [ './datetimepicker.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: DatetimepickerComponent
+    }
+  ]
+})
+export class DatetimepickerComponent implements OnInit, ControlValueAccessor {
+
+  days = new FormControl();
+  hours = new FormControl();
+  minutes = new FormControl();
+
+  duration: string;
+  model: moment.Duration;
+  onChange = (duration) => { };
+  onTouched = () => { };
+  isDisabled = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.days.valueChanges.subscribe({
+      next: (value) => {
+        if (value < this.model.days()) {
+          this.model.subtract((this.model.days() - value), "days");
+        } else {
+          this.model.add((value - this.model.days()), "days");
+        }
+        this.checkValue();
+      }
+    })
+
+    this.hours.valueChanges.subscribe({
+      next: (value) => {
+        if (value < this.model.hours()) {
+          this.model.subtract((this.model.hours() - value), "hours");
+        } else {
+          this.model.add((value - this.model.hours()), "hours");
+        }
+        this.checkValue();
+      }
+    })
+
+    this.minutes.valueChanges.subscribe({
+      next: (value) => {
+        if (value < this.model.minutes()) {
+          this.model.subtract((this.model.minutes() - value), "minutes");
+        } else {
+          this.model.add((value - this.model.minutes()), "minutes");
+        }
+        this.checkValue();
+      }
+    })
+  }
+
+  checkValue() {
+    if (this.model.asMinutes() <= 0) {
+      this.days.setValue(0, { emitEvent: false });
+      this.hours.setValue(0, { emitEvent: false });
+      this.minutes.setValue(0, { emitEvent: false });
+      this.duration = null;
+    } else {
+      this.duration = this.model.toISOString();
+    }
+
+    this.onChange(this.duration);
+    this.onTouched();
+  }
+
+
+
+  writeValue(duration: string): void {
+    this.duration = duration;
+    this.model = moment.duration(this.duration);
+    this.days.setValue(this.model.days(), { emitEvent: false });
+    this.hours.setValue(this.model.hours()), { emitEvent: false };
+    this.minutes.setValue(this.model.minutes(), { emitEvent: false });
+    this.onTouched();
+  }
+
+  registerOnChange(onChange: any): void {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouched: any): void {
+    this.onTouched = onTouched;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+
+}

src/app/ui/profilefields/profilefield.dialog.html

@@ -40,10 +40,7 @@
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'DATETIME'">
         <mat-label>{{'profileField.value' | i18n}}</mat-label>
-        <input matInput [ngxMatDatetimePicker]="datetimePicker" [(ngModel)]="profileField.value"
-          formControlName="value">
-        <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
-        <ngx-mat-datetime-picker #datetimePicker></ngx-mat-datetime-picker>
+        <input matInput type="datetime-local" [(ngModel)]="profileField.value"  formControlName="value">
         <mat-error>
           {{'profileField.error.DATETIME' | i18n}}
         </mat-error>