feat(showcase): upgrade to Angular 12

showcase/.browserslistrc

@@ -0,0 +1,21 @@
+[production]
+> 1%
+
+[modern]
+last 5 chrome version
+last 5 firefox version
+
+[ssr]
+node 12
+
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 8 versions
+Firefox ESR
+not dead

showcase/.stylelintrc

@@ -1,6 +1,7 @@
 {
-	"extends": ["@nationalbankbelgium/code-style/stylelint/13.0.x", "stylelint-config-prettier"],
-    "rules": {
-	  "selector-pseudo-element-no-unknown": [true, { "ignorePseudoElements": ["ng-deep"] }]
-    }
+  "extends": [
+	"@nationalbankbelgium/code-style/stylelint/13.13.x",
+	"stylelint-config-prettier"
+  ],
+  "rules": {}
 }

showcase/angular.json

@@ -16,11 +16,16 @@
             },
             "indexTransform": "./node_modules/@nationalbankbelgium/stark-build/config/index-html.transform.js",
             "outputPath": "dist",
+            "allowedCommonJsDependencies": ["validator", "@nationalbankbelgium/stark-core"],
             "index": "src/index.html",
             "main": "src/main.browser.ts",
             "tsConfig": "tsconfig.app.json",
             "polyfills": "src/polyfills.browser.ts",
-            "extractCss": true,
+            "buildOptimizer": false,
+            "optimization": false,
+            "vendorChunk": true,
+            "sourceMap": true,
+            "namedChunks": true,
             "assets": [
               {
                 "glob": "mdi.svg",
@@ -50,8 +55,12 @@
             ],
             "styles": [
               "node_modules/@nationalbankbelgium/stark-core/assets/css/pre-load-style.css",
-              "src/styles/styles.scss",
-              "src/styles/styles.pcss"
+              "node_modules/prismjs/themes/prism-okaidia.css",
+              "node_modules/basscss/src/basscss.css",
+              {
+                "inject": false,
+                "input": "src/styles/styles.scss"
+              }
             ],
             "scripts": [],
             "deployUrl": "/",
@@ -66,11 +75,13 @@
                 }
               ]
             },
+            "development": {},
             "production": {
               "optimization": true,
+              "namedChunks": false,
+              "subresourceIntegrity": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -117,8 +128,12 @@
             },
             "e2e.prod": {
               "browserTarget": "showcase:build:e2e.prod"
+            },
+            "development": {
+              "browserTarget": "showcase:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -175,7 +190,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "showcase",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "showcase"

showcase/base.spec.ts

@@ -18,9 +18,9 @@ if ((<any>window).NodeList && !NodeList.prototype.forEach) {
 }
 
 /* tslint:disable:no-import-side-effect */
-import "zone.js/dist/zone";
-import "zone.js/dist/zone-testing";
-import "zone.js/dist/long-stack-trace-zone";
+import "zone.js";
+import "zone.js/testing";
+import "zone.js/plugins/long-stack-trace-zone";
 /* tslint:enable:no-import-side-effect */
 
 // define global environment variable (used in some places in stark-core and stark-ui)