Added 'since' and 'until' selection modes

package.json

@@ -12,6 +12,7 @@
     "publish": "(cd dist; npm publish)",
     "test": "ng test",
     "lint": "ng lint",
+    "lintFix": "prettier --write 'src/**/*.ts'  && tslint --fix 'src/**/*.ts'",
     "e2e": "ng e2e"
   },
   "dependencies": {
@@ -25,6 +26,7 @@
     "@angular/platform-browser": "7.1.0",
     "@angular/platform-browser-dynamic": "7.1.0",
     "core-js": "^2.6.5",
+    "prettier": "^1.17.1",
     "rxjs": "^6.4.0",
     "zone.js": "0.8.26"
   },

saturn-datepicker/src/datepicker/calendar-body.ts

@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+/* tslint:disable: component-selector component-class-suffix use-host-property-decorator */
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -16,7 +18,7 @@ import {
   ViewEncapsulation,
   NgZone,
   OnChanges,
-  SimpleChanges,
+  SimpleChanges
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 
@@ -37,7 +39,6 @@ export class SatCalendarCell {
               public cssClasses?: SatCalendarCellCssClasses) {}
 }
 
-
 /**
  * An internal component used to display calendar data in a table.
  * @docs-private
@@ -88,8 +89,11 @@ export class SatCalendarBody implements OnChanges {
   /** Whether to mark all dates as semi-selected. */
   @Input() rangeFull: boolean;
 
-  /** Whether to use date range selection behaviour.*/
-  @Input() rangeMode = false;
+  /** Selection mode */
+  @Input() selectionMode = '';
+
+  /** Possible selection modes, in the order that they should appear */
+  @Input() selectionModes = [];
 
   /** The minimum number of free cells needed to fit the label in the first row. */
   @Input() labelMinRequiredCells: number;
@@ -162,12 +166,16 @@ export class SatCalendarBody implements OnChanges {
       cellNumber -= this._firstRowOffset;
     }
 
-    return cellNumber == this.activeCell;
+    return cellNumber === this.activeCell;
   }
 
   /** Whenever to mark cell as semi-selected (inside dates interval). */
   _isSemiSelected(date: number) {
-    if (!this.rangeMode) {
+    if (
+      !['range', 'since', 'until'].includes(this.selectionMode) &&
+      this.begin === null &&
+      this.end === null
+    ) {
       return false;
     }
     if (this.rangeFull) {
@@ -188,7 +196,7 @@ export class SatCalendarBody implements OnChanges {
 
   /** Whenever to mark cell as semi-selected before the second date is selected (between the begin cell and the hovered cell). */
   _isBetweenOverAndBegin(date: number): boolean {
-    if (!this._cellOver || !this.rangeMode || !this.beginSelected) {
+    if (!this._cellOver || !['range', 'since', 'until'].includes(this.selectionMode) || !this.beginSelected) {
       return false;
     }
     if (this.isBeforeSelected && !this.begin) {
@@ -205,7 +213,7 @@ export class SatCalendarBody implements OnChanges {
 
   /** Whenever to mark cell as begin of the range. */
   _isBegin(date: number): boolean {
-    if (this.rangeMode && this.beginSelected && this._cellOver) {
+    if (['range', 'since', 'until'].includes(this.selectionMode) && this.beginSelected && this._cellOver) {
       if (this.isBeforeSelected && !this.begin) {
         return this._cellOver === date;
       } else {
@@ -218,7 +226,7 @@ export class SatCalendarBody implements OnChanges {
 
   /** Whenever to mark cell as end of the range. */
   _isEnd(date: number): boolean {
-    if (this.rangeMode && this.beginSelected && this._cellOver) {
+    if (['range', 'since', 'until'].includes(this.selectionMode) && this.beginSelected && this._cellOver) {
       if (this.isBeforeSelected && !this.begin) {
         return false;
       } else {
@@ -234,7 +242,7 @@ export class SatCalendarBody implements OnChanges {
     this._ngZone.runOutsideAngular(() => {
       this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
         const activeCell: HTMLElement | null =
-            this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
+          this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
 
         if (activeCell) {
           activeCell.focus();
@@ -245,6 +253,6 @@ export class SatCalendarBody implements OnChanges {
 
   /** Whenever to highlight the target cell when selecting the second date in range mode */
   _previewCellOver(date: number): boolean {
-    return this._cellOver === date && this.rangeMode && this.beginSelected;
+    return this._cellOver === date && ['range', 'since', 'until'].includes(this.selectionMode) && this.beginSelected;
   }
 }

saturn-datepicker/src/datepicker/calendar.html

@@ -1,3 +1,14 @@
+<div class="selection-wrapper" *ngIf="selectionModes && selectionModes.length > 1">
+  <mat-button-toggle-group
+    name="fontStyle"
+    aria-label="Selection type"
+    [(value)]="selectionMode"
+  >
+    <mat-button-toggle *ngFor="let sm of selectionModes;" [value]="sm">
+      <span class="selection-mode-title">{{ sm }}</span>
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
 
 <ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
 
@@ -8,7 +19,9 @@
       [selected]="selected"
       [beginDate]="beginDate"
       [endDate]="endDate"
-      [rangeMode]="rangeMode"
+      [selectionMode]="selectionMode"
+      [selectionModes]="selectionModes"
+      [initialSelectionMode]="initialSelectionMode"
       [closeAfterSelection]="closeAfterSelection"
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"