fix(datepicker): Fix navigation alignment with preserveWhitespaces: f…

…alse (#4509)

* fix(datepicker): Fix navigation alignment with preserveWhitespaces: false

When used with `preserveWhitespaces: false` compilation option in
Angular, the datepicker title elements are misaligned, because spaces
are missing in the justified text.

Since Angular 6, `preserveWhitespaces: false` is the default, so many
users will encounter this bug.

Let's add zero-width spaces in order to have a correct alignment in all
cases.

Closes #4443

* fix(main): Reset `preserveWhitespaces` option to default

This commit reverts fee535a and 0478637, which should not be needed
anymore.

`preserveWhitespaces: false` is the default since Angular 6: let's use
the default!

demo/src/main.ts

@@ -9,4 +9,4 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule, {preserveWhitespaces: true});
+platformBrowserDynamic().bootstrapModule(AppModule);

demo/src/tsconfig.json

@@ -24,8 +24,5 @@
   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"
-  ],
-  "angularCompilerOptions": {
-    "preserveWhitespaces": true
-  }
+  ]
 }

src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts

@@ -21,15 +21,24 @@ import {
             (click)="navTo(true)"><span>&lsaquo;</span>
     </button>
 
+    &#8203;  <!-- zero-width space needed for correct alignement
+                  with preserveWhitespaces: false in Angular -->
+
     <button class="current"
             *ngIf="calendar.monthTitle"
             (click)="view('month')"
     ><span>{{ calendar.monthTitle }}</span>
     </button>
 
+    &#8203;  <!-- zero-width space needed for correct alignement
+                  with preserveWhitespaces: false in Angular -->
+
     <button class="current" (click)="view('year')"
     ><span>{{ calendar.yearTitle }}</span></button>
 
+    &#8203;  <!-- zero-width space needed for correct alignement
+                  with preserveWhitespaces: false in Angular -->
+
     <button class="next"
             [disabled]="calendar.disableRightArrow"
             [style.visibility]="calendar.hideRightArrow ? 'hidden' : 'visible'"