feat(ps-date-time-input): added the PsDateTimeInputComponent

package.json

@@ -36,6 +36,7 @@
     "@angular/router": "~10.0.5",
     "ngx-mat-select-search": "^3.0.1",
     "nouislider": "^14.0.2",
+    "date-fns": "2.16.1",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

projects/components/date-time-input/index.ts

@@ -0,0 +1,3 @@
+// export what ./public_api exports so we can import with the lib name like this:
+// import { ModuleA } from 'libname'
+export * from './public_api';

projects/components/date-time-input/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    }
+  }
+}

projects/components/date-time-input/public_api.ts

@@ -0,0 +1,2 @@
+export { PsDateTimeInputComponent as DateTimeComponent } from './src/date-time-input.component';
+export { PsDateTimeInputModule } from './src/date-time-input.module';

projects/components/date-time-input/src/date-time-input.component.html

@@ -0,0 +1,29 @@
+<div class="ps-date-time__grid-container">
+  <!-- https://github.com/angular/material2/issues/5648 -->
+  <input
+    #dateInput
+    class="mat-input-element ps-date-time-picker__date-input"
+    [disabled]="disabled"
+    [(ngModel)]="datum"
+    (keyup)="onChanged()"
+    (dateChange)="onChanged()"
+    [matDatepicker]="publishPicker"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+  />
+  <div class="mat-form-field-suffix"><mat-datepicker-toggle [for]="publishPicker"></mat-datepicker-toggle></div>
+  <input
+    #timeInput
+    class="mat-input-element ps-date-time-picker__time-input"
+    [disabled]="disabled"
+    type="time"
+    [(ngModel)]="uhrzeit"
+    (keyup)="onChanged()"
+    (change)="onChanged()"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+    step="60"
+  />
+</div>
+
+<mat-datepicker #publishPicker></mat-datepicker>

projects/components/date-time-input/src/date-time-input.component.scss

@@ -0,0 +1,11 @@
+.ps-date-time__grid-container {
+  display: grid;
+  grid-template-columns: 2fr min-content minmax(min-content, 1fr);
+  grid-gap: 1px;
+  margin-bottom: -0.7em;
+  margin-top: -0.7em;
+}
+
+.mat-form-field-suffix {
+  top: 0;
+}

projects/components/date-time-input/src/date-time-input.component.spec.ts

@@ -0,0 +1,104 @@
+import { Platform } from '@angular/cdk/platform';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { getLocaleFirstDayOfWeek } from '@angular/common';
+import { Component, Inject, Injectable, LOCALE_ID, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DateAdapter, MatDateFormats, MAT_DATE_FORMATS, NativeDateAdapter } from '@angular/material/core';
+import { parseHumanInput } from '@prosoft/components/utils';
+import { PsDateTimeInputComponent } from './date-time-input.component';
+import { PsDateTimeInputModule } from './date-time-input.module';
+import { PsDateTimeInputHarness } from './testing/date-time-input.harness';
+
+export const TEST_DATE_FORMATS: MatDateFormats = {
+  parse: {
+    dateInput: null,
+  },
+  display: {
+    dateInput: { year: 'numeric', month: '2-digit', day: '2-digit' },
+    monthYearLabel: { year: 'numeric', month: 'short' },
+    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
+    monthYearA11yLabel: { year: 'numeric', month: 'long' },
+  },
+};
+
+// extend NativeDateAdapter's format method to specify the date format.
+@Injectable({ providedIn: 'root' })
+export class TestDateTimeAdapter extends NativeDateAdapter {
+  constructor(@Inject(LOCALE_ID) _locale: string, platform: Platform) {
+    super(_locale, platform);
+  }
+
+  public sameDate(a: any, b: any) {
+    return !a && !b ? false : super.sameDate(a, b);
+  }
+
+  public getFirstDayOfWeek(): number {
+    return getLocaleFirstDayOfWeek(this.locale);
+  }
+
+  // If required extend other NativeDateAdapter methods.
+  public parse(value: any): Date | null {
+    return parseHumanInput(value);
+  }
+
+  public getIs24Hours(): boolean {
+    return new Date(79200000).toLocaleTimeString(this.locale).indexOf('11') === -1;
+  }
+}
+
+@Component({
+  selector: 'ps-test-component',
+  template: ` <ps-date-time-input [disabled]="disabled"></ps-date-time-input> `,
+})
+export class TestDataSourceComponent {
+  public disabled = false;
+  @ViewChild(PsDateTimeInputComponent) public dateTimeInputComponent: PsDateTimeInputComponent;
+}
+
+describe('DateTimeInputComponent', () => {
+  let fixture: ComponentFixture<TestDataSourceComponent>;
+  let component: TestDataSourceComponent;
+  let loader: HarnessLoader;
+  let dateTimeInput: PsDateTimeInputHarness;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PsDateTimeInputModule],
+      declarations: [TestDataSourceComponent],
+      providers: [
+        { provide: DateAdapter, useClass: TestDateTimeAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: TEST_DATE_FORMATS },
+      ],
+    });
+    fixture = TestBed.createComponent(TestDataSourceComponent);
+    component = fixture.componentInstance;
+    expect(component).toBeDefined();
+
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    dateTimeInput = await loader.getHarness(PsDateTimeInputHarness);
+  });
+
+  it('Should be disabled', async () => {
+    expect(await dateTimeInput.isDisabled()).toEqual(false);
+    component.disabled = true;
+    expect(await dateTimeInput.isDisabled()).toEqual(true);
+  });
+
+  it('Should return valid date', () => {
+    component.dateTimeInputComponent.datum = new Date();
+    component.dateTimeInputComponent.uhrzeit = '11:11';
+    const value = component.dateTimeInputComponent.convertToDate();
+
+    const expectedValue = new Date();
+    expectedValue.setHours(11, 11);
+    expect(value.getDate()).toEqual(expectedValue.getDate());
+  });
+
+  it('Should return invalid Date', () => {
+    component.dateTimeInputComponent.datum = new Date();
+    component.dateTimeInputComponent.uhrzeit = null;
+    const value = component.dateTimeInputComponent.convertToDate();
+
+    expect(value.getTime()).toEqual(NaN);
+  });
+});