feat(datepicker): Added datepicker component.

Fixes #894

angular.json

@@ -1463,6 +1463,37 @@
       },
       "schematics": {}
     },
+    "datepicker": {
+      "projectType": "library",
+      "root": "libs/barista-components/datepicker",
+      "sourceRoot": "libs/barista-components/datepicker/src",
+      "prefix": "dt",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/barista-components/datepicker/tsconfig.lib.json",
+              "libs/barista-components/datepicker/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/barista-components/datepicker/**"
+            ]
+          }
+        },
+        "lint-styles": {
+          "builder": "./dist/libs/workspace:stylelint",
+          "options": {
+            "stylelintConfig": ".stylelintrc",
+            "reportFile": "dist/stylelint/report.xml",
+            "exclude": ["**/node_modules/**"],
+            "files": ["libs/barista-components/datepicker/**/*.scss"]
+          }
+        }
+      },
+      "schematics": {}
+    },
     "drawer": {
       "projectType": "library",
       "root": "libs/barista-components/drawer",

apps/dev/src/app.module.ts

@@ -43,6 +43,7 @@ import { ConsumptionDemo } from './consumption/consumption-demo.component';
 import { ContainerBreakpointObserverDemo } from './container-breakpoint-observer/container-breakpoint-observer-demo.component';
 import { ContextDialogDemo } from './context-dialog/context-dialog-demo.component';
 import { CopyToClipboardDemo } from './copy-to-clipboard/copy-to-clipboard-demo.component';
+import { DatepickerDemo } from './datepicker/datepicker-demo.component';
 import { DrawerDemo } from './drawer/drawer-demo.component';
 import { DrawerTableDemo } from './drawer-table/drawer-table-demo.component';
 import { EmptyStateDemo } from './empty-state/empty-state-demo';
@@ -94,6 +95,7 @@ import { DtIconModule } from '@dynatrace/barista-components/icon';
 import {
   DT_DEFAULT_UI_TEST_CONFIG,
   DT_UI_TEST_CONFIG,
+  DtNativeDateModule,
 } from '@dynatrace/barista-components/core';
 import { ComboboxDemo } from './combobox/combobox-demo.component';
 
@@ -111,6 +113,7 @@ export class NoopRouteComponent {}
     DtIconModule.forRoot({ svgIconLocation: '/assets/icons/{{name}}.svg' }),
     DevAppDynatraceModule,
     DragDropModule,
+    DtNativeDateModule,
   ],
   declarations: [
     DevApp,
@@ -127,7 +130,7 @@ export class NoopRouteComponent {}
     ConfirmationDialogDemo,
     ContextDialogDemo,
     CopyToClipboardDemo,
-
+    DatepickerDemo,
     DrawerDemo,
     DrawerTableDemo,
     ExpandablePanelDemo,

apps/dev/src/datepicker/datepicker-demo.component.html

@@ -0,0 +1,17 @@
+<h1>Datepicker</h1>
+
+<h2>Full datepicker</h2>
+
+<dt-datepicker [startAt]="startAt"></dt-datepicker>
+
+<h2>Calendar</h2>
+
+<dt-calendar [startAt]="startAt"></dt-calendar>
+
+<h2>Calendar body only</h2>
+
+<dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
+
+<h2>Timepicker</h2>
+
+<dt-timepicker></dt-timepicker>

apps/dev/src/datepicker/datepicker-demo.component.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-component',
+  templateUrl: 'datepicker-demo.component.html',
+  styleUrls: ['datepicker-demo.component.scss'],
+})
+export class DatepickerDemo {
+  startAt = new Date(2020, 7, 31);
+}

apps/dev/src/devapp-routing.module.ts

@@ -31,6 +31,7 @@ import { ConsumptionDemo } from './consumption/consumption-demo.component';
 import { ContainerBreakpointObserverDemo } from './container-breakpoint-observer/container-breakpoint-observer-demo.component';
 import { ContextDialogDemo } from './context-dialog/context-dialog-demo.component';
 import { CopyToClipboardDemo } from './copy-to-clipboard/copy-to-clipboard-demo.component';
+import { DatepickerDemo } from './datepicker/datepicker-demo.component';
 import { DrawerDemo } from './drawer/drawer-demo.component';
 import { DrawerTableDemo } from './drawer-table/drawer-table-demo.component';
 import { EmptyStateDemo } from './empty-state/empty-state-demo';
@@ -95,6 +96,7 @@ const routes: Routes = [
   { path: 'context-dialog', component: ContextDialogDemo },
   { path: 'confirmation-dialog', component: ConfirmationDialogDemo },
   { path: 'copy-to-clipboard', component: CopyToClipboardDemo },
+  { path: 'datepicker', component: DatepickerDemo },
   { path: 'drawer', component: DrawerDemo },
   { path: 'drawer-table', component: DrawerTableDemo },
   { path: 'empty-state', component: EmptyStateDemo },

apps/dev/src/devapp.component.ts

@@ -58,6 +58,7 @@ export class DevApp implements AfterContentInit, OnDestroy {
     },
     { name: 'Context-dialog', route: '/context-dialog' },
     { name: 'Copy-to-clipboard', route: '/copy-to-clipboard' },
+    { name: 'Datepicker', route: '/datepicker' },
     { name: 'Drawer', route: '/drawer' },
     { name: 'Drawer-table', route: '/drawer-table' },
     { name: 'Empty-state', route: '/empty-state' },

apps/dev/src/dt-components.module.ts

@@ -30,6 +30,7 @@ import { DtConsumptionModule } from '@dynatrace/barista-components/consumption';
 import { DtContainerBreakpointObserverModule } from '@dynatrace/barista-components/container-breakpoint-observer';
 import { DtContextDialogModule } from '@dynatrace/barista-components/context-dialog';
 import { DtCopyToClipboardModule } from '@dynatrace/barista-components/copy-to-clipboard';
+import { DtDatepickerModule } from '@dynatrace/barista-components/datepicker';
 import { DtDrawerModule } from '@dynatrace/barista-components/drawer';
 import { DtDrawerTableModule } from '@dynatrace/barista-components/experimental/drawer-table';
 import { DtEmptyStateModule } from '@dynatrace/barista-components/empty-state';
@@ -95,6 +96,7 @@ import { DtComboboxModule } from '@dynatrace/barista-components/experimental/com
     DtConfirmationDialogModule,
     DtContextDialogModule,
     DtCopyToClipboardModule,
+    DtDatepickerModule,
     DtDrawerModule,
     DtDrawerTableModule,
     DtExpandablePanelModule,

libs/barista-components/config.bzl

@@ -15,6 +15,7 @@ COMPONENTS = [
     "context-dialog",
     "copy-to-clipboard",
     "core",
+    "datepicker",
     "drawer",
     "empty-state",
     "event-chart",

libs/barista-components/core/index.ts

@@ -24,3 +24,4 @@ export * from './src/tree/index';
 export * from './src/animations/index';
 export * from './src/overlay/index';
 export * from './src/testing/index';
+export * from './src/date/index';

libs/barista-components/core/src/date/date-adapter.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { inject, InjectionToken, LOCALE_ID } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+/** InjectionToken for datepicker that can be used to override default locale code. */
+export const DT_DATE_LOCALE = new InjectionToken<string>('DT_DATE_LOCALE', {
+  providedIn: 'root',
+  factory: DT_DATE_LOCALE_FACTORY,
+});
+
+/** @docs-private */
+export function DT_DATE_LOCALE_FACTORY(): string {
+  return inject(LOCALE_ID);
+}
+
+export abstract class DtDateAdapter<D> {
+  /** The locale to use for all dates. */
+  protected locale: any;
+
+  /** A stream that emits when the locale changes. */
+  get localeChanges(): Observable<void> {
+    return this._localeChanges.asObservable();
+  }
+  protected _localeChanges = new Subject<void>();
+
+  /** Sets the locale used for all dates. */
+  setLocale(locale: any): void {
+    this.locale = locale;
+    this._localeChanges.next();
+  }
+
+  /**
+   * Creates a date with the given year, month, and date.
+   * Does not allow over/under-flow of the month and date.
+   */
+  abstract createDate(year: number, month: number, date: number): D;
+
+  /** Gets today's date. */
+  abstract today(): D;
+
+  /** Gets the year component of the given date. */
+  abstract getYear(date: D): number;
+
+  /** Gets the month component of the given date. */
+  abstract getMonth(date: D): number;
+
+  /** Gets the date of the month component of the given date. */
+  abstract getDate(date: D): number;
+
+  /** Gets the day of the week component of the given date. */
+  abstract getDayOfWeek(date: D): number;
+
+  /** Gets the first day of the week. */
+  abstract getFirstDayOfWeek(): number;
+
+  /** Gets a list of names for the days of the week. */
+  abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];
+
+  /** Gets the number of days in the month of the given date. */
+  abstract getNumDaysInMonth(date: D): number;
+
+  /** Gets a list of names for the dates of the month. */
+  abstract getDateNames(): string[];
+
+  /** Checks whether the given object is considered a date instance by this DateAdapter. */
+  abstract isDateInstance(obj: any): obj is D;
+
+  /** Checks whether the given date is valid. */
+  abstract isValid(date: D): boolean;
+
+  /** Formats a date as a string according to the given format. */
+  abstract format(date: D, displayFormat: Object): string;
+
+  /**
+   * Adds the given number of years to the date. Years are counted as if flipping 12 pages on the
+   * calendar for each year and then finding the closest date in the new month. For example when
+   * adding 1 year to Feb 29, 2016, the resulting date will be Feb 28, 2017.
+   */
+  abstract addCalendarYears(date: D, years: number): D;
+
+  /**
+   * Adds the given number of months to the date. Months are counted as if flipping a page on the
+   * calendar for each month and then finding the closest date in the new month. For example when
+   * adding 1 month to Jan 31, 2017, the resulting date will be Feb 28, 2017.
+   */
+  abstract addCalendarMonths(date: D, months: number): D;
+
+  /** Adds the given number of days to the date. */
+  abstract addCalendarDays(date: D, days: number): D;
+
+  /**
+   * Compares two dates.
+   * Returns 0 if the dates are equal,
+   * a number less than 0 if the first date is earlier,
+   * a number greater than 0 if the first date is later
+   */
+  compareDate(first: D, second: D): number {
+    return (
+      this.getYear(first) - this.getYear(second) ||
+      this.getMonth(first) - this.getMonth(second) ||
+      this.getDate(first) - this.getDate(second)
+    );
+  }
+
+  /** Clamp the given date between min and max dates. */
+  clampDate(date: D, min?: D | null, max?: D | null): D {
+    if (min && this.compareDate(date, min) < 0) {
+      return min;
+    }
+    if (max && this.compareDate(date, max) > 0) {
+      return max;
+    }
+    return date;
+  }
+}

libs/barista-components/core/src/date/date-module.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { DtDateAdapter } from './date-adapter';
+import { DtNativeDateAdapter } from './native-date-adapter';
+
+@NgModule({
+  providers: [{ provide: DtDateAdapter, useClass: DtNativeDateAdapter }],
+})
+export class DtNativeDateModule {}

libs/barista-components/core/src/date/index.ts

@@ -0,0 +1,3 @@
+export * from './date-adapter';
+export * from './native-date-adapter';
+export * from './date-module';