feat(datepicker): Added datepicker component.

Fixes #894

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

@@ -1,12 +1,53 @@
 <h1>Datepicker</h1>
 
+<h2>Full datepicker</h2>
+
+<dt-datepicker
+  [startAt]="startAt"
+  [disabled]="isDatepickerDisabled"
+  [isTimeEnabled]="isDatepickerTimeEnabled"
+></dt-datepicker>
+
+<dt-checkbox [(ngModel)]="isDatepickerDisabled">Disabled</dt-checkbox>
+<dt-checkbox [(ngModel)]="isDatepickerTimeEnabled"
+  >Enabled Time Mode</dt-checkbox
+>
+
+<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 [disabled]="isTimepickerDisabled"></dt-timepicker>
 
 <dt-checkbox [(ngModel)]="isTimepickerDisabled">Disabled</dt-checkbox>
 
 <div dtTheme=":dark" class="dt-example-dark">
+  <h2>Full Dark Mode Datepicker</h2>
+
+  <dt-datepicker
+    [startAt]="startAt"
+    [disabled]="isDarkDatepickerDisabled"
+    [isTimeEnabled]="isDarkDatepickerTimeEnabled"
+  ></dt-datepicker>
+  <dt-checkbox [(ngModel)]="isDarkDatepickerDisabled">Disabled</dt-checkbox>
+  <dt-checkbox [(ngModel)]="isDarkDatepickerTimeEnabled"
+    >Enabled Time Mode</dt-checkbox
+  >
+
+  <h2>Dark Mode Calendar</h2>
+
+  <dt-calendar [startAt]="startAt"></dt-calendar>
+
+  <h2>Dark Mode Calendar Body Only</h2>
+
+  <dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
+
   <h2>Dark Mode Timepicker</h2>
 
   <dt-timepicker

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

@@ -22,6 +22,11 @@ import { Component } from '@angular/core';
   styleUrls: ['datepicker-demo.component.scss'],
 })
 export class DatepickerDemo {
+  startAt = new Date(2020, 7, 31);
+  isDatepickerDisabled = false;
   isTimepickerDisabled = false;
+  isDarkDatepickerDisabled = false;
   isDarkTimepickerDisabled = false;
+  isDatepickerTimeEnabled = true;
+  isDarkDatepickerTimeEnabled = true;
 }

libs/barista-components/experimental/datepicker/BUILD.bazel

@@ -15,6 +15,9 @@ ng_module_view_engine(
     ),
     angular_assets = [
         ":styles",
+        "src/datepicker.html",
+        "src/calendar.html",
+        "src/calendar-body.html",
         "src/timepicker.html",
         "src/timeinput.html",
     ],
@@ -58,6 +61,9 @@ sass_library(
 multi_sass_binary(
     name = "styles",
     srcs = [
+        "src/datepicker.scss",
+        "src/calendar-body.scss",
+        "src/calendar.scss",
         "src/timepicker.scss",
         "src/timeinput.scss",
         ":theme"

libs/barista-components/experimental/datepicker/index.ts

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+export * from './src/calendar-body';
+export * from './src/calendar';
 export * from './src/timeinput';
 export * from './src/timepicker';
+export * from './src/datepicker';
 export * from './src/datepicker-module';

libs/barista-components/experimental/datepicker/src/calendar-body.html

@@ -0,0 +1,53 @@
+<span
+  [attr.id]="_labelid"
+  class="dt-calendar-body-header-label"
+  aria-live="polite"
+  >{{ _label }}</span
+>
+
+<table
+  class="dt-calendar-table"
+  role="grid"
+  [attr.aria-labelledby]="ariaLabelledby || _labelid"
+  [attr.aria-describedby]="ariaLabelledby || _labelid"
+>
+  <thead class="dt-calendar-table-header">
+    <tr>
+      <th
+        scope="col"
+        *ngFor="let day of _weekdays"
+        [attr.aria-label]="day.long"
+        [attr.abbr]="day.short"
+      >
+        {{ day.short }}
+      </th>
+    </tr>
+  </thead>
+  <tbody class="dt-calendar-table-body">
+    <tr
+      *ngFor="let week of _weeks; let weekIndex = index"
+      role="row"
+      class="dt-calendar-table-row"
+    >
+      <td
+        *ngIf="weekIndex === 0 && _firstRowOffset"
+        aria-hidden="true"
+        [attr.colspan]="_firstRowOffset"
+      ></td>
+      <td
+        *ngFor="let cell of week; let dateIndex = index"
+        role="gridcell"
+        class="dt-calendar-table-cell"
+        [class.dt-calendar-active]="_isSame(cell, activeDate)"
+        [class.dt-calendar-selected]="_isSame(cell, selected)"
+        [attr.aria-selected]="_isSame(cell, selected)"
+        [attr.aria-label]="cell.ariaLabel"
+        (click)="_cellClicked(cell)"
+      >
+        <div class="dt-calendar-table-cell-inner">
+          {{ cell.displayValue }}
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>

libs/barista-components/experimental/datepicker/src/calendar-body.scss

@@ -0,0 +1,54 @@
+@import '../../../core/src/style/variables';
+@import './calendar-body-theme';
+
+:host {
+  display: block;
+  outline: none;
+}
+
+.dt-calendar-table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.dt-calendar-table-header th {
+  text-align: center;
+  padding: 0 0 8px;
+  width: 14%;
+}
+
+.dt-calendar-table-cell {
+  position: relative;
+  text-align: center;
+  outline: none;
+  cursor: pointer;
+}
+
+.dt-calendar-table-cell:not(.dt-calendar-selected):hover
+  .dt-calendar-table-cell-inner {
+  background: $gray-200;
+}
+
+.dt-calendar-table-cell-inner {
+  padding: 2px 0;
+  border: 1px solid white;
+  border-radius: 3px;
+}
+
+.dt-calendar-active .dt-calendar-table-cell-inner {
+  border-color: $disabledcolor;
+}
+
+:host:focus .dt-calendar-active .dt-calendar-table-cell-inner {
+  border-color: $turquoise-600;
+}
+
+.dt-calendar-selected .dt-calendar-table-cell-inner {
+  background-color: $turquoise-600;
+  color: white;
+}
+
+.dt-calendar-body-header-label {
+  display: none;
+}