Merge pull request #275 from bkd-mba-fbi/feature/273-remove-ie11-support

remove specialities for ie11 support

.browserslistrc

@@ -3,4 +3,4 @@
 # https://github.com/browserslist/browserslist#queries
 
 defaults
-IE 11
+not IE 11

angular.json

@@ -70,15 +70,6 @@
                   "maximumWarning": "6kb"
                 }
               ]
-            },
-            "es5": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "tsConfig": "src/tsconfig-es5.app.json"
             }
           }
         },
@@ -90,9 +81,6 @@
           "configurations": {
             "production": {
               "browserTarget": "absenzenmanagement:build:production"
-            },
-            "es5": {
-              "browserTarget": "absenzenmanagement:build:es5"
             }
           }
         },
@@ -150,5 +138,8 @@
       }
     }
   },
-  "defaultProject": "absenzenmanagement"
+  "defaultProject": "absenzenmanagement",
+  "cli": {
+    "analytics": false
+  }
 }

doc/browser-support.md

@@ -2,47 +2,7 @@
 
 [back](../README.md)
 
-We support the evergreen browsers (Chrome, Firefox, Safari, Edge) and
-IE 11.
-
-## JavaScript
-
-The Angular CLI generates a modern build (ES2015) and a legacy build
-(ES5) and the browsers will get either one of those two build via
-differential loading.
-
-Note that you have to use the `start:es5` task when testing with IE11.
-
-## CSS
-
-To be compatible with IE 11, we use the
-[autoprefixer](https://github.com/postcss/autoprefixer), which is part
-of the default Angular CLI setup (see `browserlist` file for the
-configuration).
-
-There is also an `.ie11` class, that is present on the `<erz-app>`
-node in IE 11 browsers. You can use this in your component styles to
-implement IE 11 customizations:
-
-```
-:host-context(:not(.ie11)) .my-element {
-  // CSS for evergreen browsers
-}
-
-:host-context(.ie11) .my-element {
- // CSS for IE 11
-}
-```
-
-### CSS Grid
-
-When using CSS Grid, add the following comment at the top of the .scss file to enable the autoprefixer's polyfills:
-
-```
-/* autoprefixer grid: on */
-```
-
-Checkout the following table for the supported features: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/#article-header-id-1
+We support the evergreen browsers (Chrome, Firefox, Safari, Edge).
 
 ## Testing with BrowserStack
 
@@ -52,7 +12,6 @@ When testing browser compatiblity with [BrowserStack](https://www.browserstack.c
 | --------- | --------------------- | ---------------------------- | -------------------------- |
 | Windows   | Chrome, Firefox, Edge | `npm start`                  | `http://localhost:4200`    |
 | Android   | Chrome                | `npm start`                  | `http://localhost:4200`    |
-| Windows   | IE11                  | `npm run start:es5`          | `http://localhost:4200`    |
 | macOS/iOS | Safari                | `npm run start:browserstack` | `http://bs-local.com:8000` |
 
 With all browsers you must store a valid token in localStorage to be able to use the app.

doc/setup-dev-environment.md

@@ -15,8 +15,6 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-_Important note for IE 11 testing:_ the dev server has to be started with `npm run start:es5`, since `ng serve` [does not build the bundles for differential loading](https://github.com/angular/angular-cli/issues/14455) (it generates a single ES2015 build per default). Consider also: https://angular.io/guide/browser-support
-
 ## Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

package.json

@@ -4,7 +4,6 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "start:es5": "ng serve --configuration es5",
     "start:browserstack": "ng serve --host 0.0.0.0 --disable-host-check --port 8000",
     "build": "ng build",
     "build:prod": "ng build --prod",

src/app/app.component.ts

@@ -20,10 +20,6 @@ import { NAVIGATOR } from './shared/tokens/dom-apis';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  @HostBinding('class.ie11') get isIE11(): boolean {
-    return /Trident.*rv:11\./.test(this.navigator.userAgent);
-  }
-
   constructor(
     i18n: I18nService,
     private toastrService: ToastrService,

src/app/my-absences/components/my-absences-report-list/my-absences-report-list.component.scss

@@ -1,7 +1,5 @@
 @import "../../../../bootstrap-variables";
 
-/* autoprefixer grid: on */
-
 .entries-all {
   padding: 0 0 (0.5 * $spacer) $spacer;
   border-bottom: 1px solid $gray-200;
@@ -10,11 +8,6 @@
   grid-template-columns: min-content 1fr min-content;
 }
 
-// IE11 workaround for `align-items: center`
-.entries-all > * {
-  align-self: center;
-}
-
 .entry {
   padding: $spacer;
   border-bottom: 1px solid $gray-200;

src/app/open-absences/components/open-absences-detail/open-absences-detail.component.scss

@@ -1,7 +1,5 @@
 @import "../../../../bootstrap-variables";
 
-/* autoprefixer grid: on */
-
 .content {
   padding-left: $spacer;
   padding-right: $spacer;
@@ -32,11 +30,6 @@
   grid-template-columns: min-content 1fr;
 }
 
-// IE11 workaround for `align-items: center`
-.absence-all > * {
-  align-self: center;
-}
-
 .absence-entry {
   padding: $spacer;
   border-bottom: 1px solid $gray-200;

src/app/open-absences/components/open-absences-list/open-absences-list.component.scss

@@ -1,7 +1,5 @@
 @import "../../../../bootstrap-variables";
 
-/* autoprefixer grid: on */
-
 .content {
   padding-left: $spacer;
   padding-right: $spacer;

src/app/presence-control/components/presence-control-entry/presence-control-entry.component.scss

@@ -1,7 +1,5 @@
 @import "../../../../bootstrap-variables";
 
-/* autoprefixer grid: on */
-
 :host {
   padding: 2 * $spacer $spacer;
   background-color: $body-bg;

src/app/presence-control/components/presence-control-header/presence-control-header.component.scss

@@ -1,7 +1,5 @@
 @import "../../../../bootstrap-variables";
 
-/* autoprefixer grid: on */
-
 :host {
   display: flex;
   flex-direction: column;
@@ -17,11 +15,6 @@
     ". date time dropdown-caret"
     ". description description dropdown-caret";
   grid-template-columns: 1fr auto auto 1fr;
-
-  // I11 workaround for `align-items: center;`
-  > * {
-    align-self: center;
-  }
 }
 
 .lesson-date {
@@ -30,7 +23,7 @@
 
   display: flex;
   align-items: center;
-  justify-content: flex-end; // Use `flex-end` for IE 11 instead of `end`
+  justify-content: end;
 
   button {
     padding: 0 0.5ch 0 0;
@@ -48,11 +41,6 @@
   border: none;
   width: 11ch;
 }
-:host-context(.ie11) .lesson-date-input {
-  // Compensate for IE 11's crappy center alignment
-  margin-top: -5px;
-  width: 12ch;
-}
 
 .lesson-time {
   grid-area: time;

src/app/shared/components/student-profile-absences/student-profile-absences.component.scss

@@ -1,7 +1,5 @@
 @import "../../../../bootstrap-variables";
 
-/* autoprefixer grid: on */
-
 .absence-all {
   padding: 0 0 (0.5 * $spacer) $spacer;
   border-bottom: 1px solid $gray-200;
@@ -12,11 +10,6 @@
   grid-template-columns: min-content 1fr min-content;
 }
 
-// IE11 workaround for `align-items: center`
-.absence-all > * {
-  align-self: center;
-}
-
 .absence-entry {
   padding: $spacer;
   border-bottom: 1px solid $gray-200;

src/app/shared/components/typeahead/typeahead.component.scss

@@ -17,8 +17,3 @@
 .spinner-border {
   color: $gray-600;
 }
-
-// Avoid overlapping with cross-icon that is displayed in IE 11
-:host-context(.ie11) .spinner-container {
-  right: 2.25 * $spacer;
-}

src/polyfills.ts

@@ -56,21 +56,10 @@ import '@angular/localize/init';
  *
  */
 
-/**
- * Polyfills for IE 11
- */
-import 'core-js/es/array';
-import 'core-js/es/string';
-import 'core-js/es/object';
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-// import 'zone.js/dist/zone'; // Included with Angular CLI.
-
-// Workaround for IE 11, see https://github.com/angular/angular/issues/38561
-// (use above import once fixed or irrelevant)
-import 'zone.js/bundles/zone.umd';
+import 'zone.js/dist/zone'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS