feat(stark-demo): cleanup of Stark Showcase application

Applied the same changes that where made to the Starter app.

ISSUES CLOSED: #422

showcase/angular.json

@@ -22,11 +22,6 @@
                 "input": "../node_modules/@mdi/angular-material",
                 "output": "./assets/material-icons"
               },
-              {
-                "glob": "**/*",
-                "input": "src/assets/img",
-                "output": "./assets/img"
-              },
               {
                 "glob": "**/*",
                 "input": "assets",

showcase/package.json

@@ -119,8 +119,8 @@
     "@angular/platform-browser-dynamic": "6.0.2",
     "@angular/platform-server": "6.0.2",
     "@angular/router": "6.0.2",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-e075cf5.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-e075cf5.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-18ddc7a.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-18ddc7a.tgz",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",
@@ -135,8 +135,8 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-e12021d.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-e12021d.tgz",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-18ddc7a.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-18ddc7a.tgz",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
     "@types/node": "8.10.15",

showcase/src/app/app.e2e.ts

@@ -24,10 +24,4 @@ describe("App", () => {
 		const result: boolean = true;
 		expect(subject).toEqual(result);
 	});
-
-	it("should have buttons", async () => {
-		const subject: string = await element(by.css("button")).getText();
-		const result: string = "Submit Value";
-		expect(subject).toEqual(result);
-	});
 });

showcase/src/app/app.module.ts

@@ -36,6 +36,7 @@ import { Deserialize } from "cerialize";
  * Translations
  */
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { initializeTranslation } from "./translation.config";
 /*
  * Platform and Environment providers/directives/pipes
  */
@@ -54,10 +55,6 @@ import "../styles/styles.pcss";
 import "../styles/styles.scss";
 /* tslint:enable */
 
-const translationsEn: object = require("../../assets/translations/en.json");
-const translationsFr: object = require("../../assets/translations/fr.json");
-const translationsNl: object = require("../../assets/translations/nl.json");
-
 // Application wide providers
 const APP_PROVIDERS: any[] = [AppState];
 
@@ -159,16 +156,9 @@ export class AppModule {
 		matIconRegistry: MatIconRegistry,
 		domSanitizer: DomSanitizer
 	) {
+		initializeTranslation(this.translateService);
 		registerMaterialIconSet(matIconRegistry, domSanitizer);
 
-		// TODO should use StarkLanguages, StarkLanguage, etc
-		this.translateService.addLangs(["en", "fr", "nl"]);
-		this.translateService.setTranslation("en", translationsEn, true);
-		this.translateService.setTranslation("fr", translationsFr, true);
-		this.translateService.setTranslation("nl", translationsNl, true);
-		this.translateService.setDefaultLang("en");
-		this.translateService.use("en");
-
 		const user: StarkUser = {
 			uuid: "abc123",
 			username: "John",

showcase/src/app/home/home.component.ts

@@ -4,23 +4,9 @@ import { STARK_LOGGING_SERVICE, StarkErrorImpl, StarkLoggingService } from "@nat
 import { AppState } from "../app.service";
 
 @Component({
-	/**
-	 * The selector is what angular internally uses
-	 * for `document.querySelectorAll(selector)` in our index.html
-	 * where, in this case, selector is the string 'home'.
-	 */
 	selector: "home", // <home></home>
-	/**
-	 * We need to tell Angular's Dependency Injection which providers are in our app.
-	 */
 	providers: [],
-	/**
-	 * Our list of styles in our component. We may add more to compose many styles together.
-	 */
 	styleUrls: ["./home.component.pcss"],
-	/**
-	 * Every Angular template is first compiled by the browser before Angular runs it's compiler.
-	 */
 	templateUrl: "./home.component.html"
 })
 export class HomeComponent implements OnInit {

showcase/src/app/translation.config.ts

@@ -0,0 +1,19 @@
+import { TranslateService } from "@ngx-translate/core";
+import { mergeTranslations } from "../../../packages/stark-core/src/common/translations/translations";
+import { StarkLocale } from "../../../packages/stark-core/src/common/translations/locale.intf";
+
+const translationsEn: object = require("../assets/translations/en.json");
+const translationsFr: object = require("../assets/translations/fr.json");
+const translationsNl: object = require("../assets/translations/nl.json");
+
+export function initializeTranslation(translateService: TranslateService): void {
+	translateService.addLangs(["en", "fr", "nl"]);
+	translateService.setDefaultLang("en");
+	translateService.use("nl");
+
+	const english: StarkLocale = { languageCode: "en", translations: translationsEn };
+	const french: StarkLocale = { languageCode: "fr", translations: translationsFr };
+	const dutch: StarkLocale = { languageCode: "nl", translations: translationsNl };
+
+	mergeTranslations(translateService, english, french, dutch);
+}

showcase/src/assets-base/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+	<msapplication>
+		<tile>
+			<square70x70logo	src="/assets/images/app-icons/ms-icon-70x70.png"/>
+			<square144x144logo	src="/assets/images/app-icons/ms-icon-144x144.png"/>
+			<square150x150logo	src="/assets/images/app-icons/ms-icon-150x150.png"/>
+			<square310x310logo	src="/assets/images/app-icons/ms-icon-310x310.png"/>
+			<TileColor>#ffffff</TileColor>
+		</tile>
+	</msapplication>
+</browserconfig>

showcase/assets-base/manifest.json → showcase/src/assets-base/manifest.json

@@ -5,37 +5,37 @@
   "display": "standalone",
   "icons": [
     {
-      "src": "/assets/images/favicon/android-icon-36x36.png",
+      "src": "/assets/images/app-icons/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
     },
     {
-      "src": "/assets/images/favicon/android-icon-48x48.png",
+      "src": "/assets/images/app-icons/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
     },
     {
-      "src": "/assets/images/favicon/android-icon-72x72.png",
+      "src": "/assets/images/app-icons/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
     },
     {
-      "src": "/assets/images/favicon/android-icon-96x96.png",
+      "src": "/assets/images/app-icons/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
     },
     {
-      "src": "/assets/images/favicon/android-icon-144x144.png",
+      "src": "/assets/images/app-icons/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
     },
     {
-      "src": "/assets/images/favicon/android-icon-192x192.png",
+      "src": "/assets/images/app-icons/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "density": "4.0"

showcase/assets/README.md → showcase/src/assets/README.md

@@ -1,4 +1,4 @@
-This folder should contain all static assets of Stark.
+This folder should contain all static assets of the application.
 
 Note that all the contents of this folder will be copied to the "assets" folder in "dist".
 For example, "assets/images" will be copied to "dist/assets/images"

showcase/src/assets/manifest.json

@@ -2,32 +2,32 @@
   "name": "App",
   "icons": [
     {
-      "src": "/assets/icon/android-icon-36x36.png",
+      "src": "/assets/images/app-icons/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png"
     },
     {
-      "src": "/assets/icon/android-icon-48x48.png",
+      "src": "/assets/images/app-icons/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png"
     },
     {
-      "src": "/assets/icon/android-icon-72x72.png",
+      "src": "/assets/images/app-icons/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png"
     },
     {
-      "src": "/assets/icon/android-icon-96x96.png",
+      "src": "/assets/images/app-icons/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png"
     },
     {
-      "src": "/assets/icon/android-icon-144x144.png",
+      "src": "/assets/images/app-icons/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "/assets/icon/android-icon-192x192.png",
+      "src": "/assets/images/app-icons/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     }

showcase/assets/translations/en.json → showcase/src/assets/translations/en.json

@@ -1,7 +1,7 @@
 {
   "SHOWCASE": {
     "HOME": {
-      "TITLE": "Stark Showcase"
+      "TITLE": "Stark Showcase application"
     }
   }
 }

showcase/src/assets/translations/nl.json

@@ -0,0 +1,7 @@
+{
+  "SHOWCASE": {
+    "HOME": {
+      "TITLE": "Stark demonstratie toepassing"
+    }
+  }
+}

showcase/src/index.html

@@ -27,31 +27,28 @@
 	<!-- You can customize the default -->
 	<meta name="theme-color" content="#0076c8">
 
-	<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicon/apple-icon-57x57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicon/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicon/apple-icon-76x76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-icon-114x114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicon/apple-icon-120x120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicon/apple-icon-144x144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicon/apple-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-icon-180x180.png">
-	<link rel="icon" type="image/png" sizes="192x192" href="assets/images/favicon/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
+	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+
+	<link rel="apple-touch-icon" sizes="57x57" href="assets/images/app-icons/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="assets/images/app-icons/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="assets/images/app-icons/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="assets/images/app-icons/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="assets/images/app-icons/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="assets/images/app-icons/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="assets/images/app-icons/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="assets/images/app-icons/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="assets/images/app-icons/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="assets/images/app-icons/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="assets/images/app-icons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="assets/images/app-icons/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="assets/images/app-icons/favicon-16x16.png">
 	<meta name="msapplication-TileColor" content="#0076c8"><!-- Tile icon for Win8 (144x144 + tile color) -->
-	<meta name="msapplication-TileImage" content="assets/images/favicon/ms-icon-144x144.png">
+	<meta name="msapplication-TileImage" content="assets/images/app-icons/ms-icon-144x144.png">
 
 	<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>
 
 	<!-- Stylesheets -->
 	<!-- Generated CSS stylesheets will be added by webpack: extract-text-webpack-plugin -->
-	<style nonce="cef324d21ec5483c8819cc7a5e33c4a2">
-		.stark-app {
-			visibility: hidden;
-		}
-	</style>
 
 	<!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
 	<% if (htmlWebpackPlugin.options.metadata.IS_DEV_SERVER && htmlWebpackPlugin.options.metadata.HMR !== true) { %>
@@ -73,8 +70,6 @@
 	<!--< % = webpackConfig.htmlElements.headTags % >-->
 	<!--< % } % >-->
 </head>
-<!-- add the full-curtain class if you want to enable the condensed mode by default -->
-<!-- add the dense-mode class if you want to enable the dense mode by default -->
 
 <body class="">
 

starter/package.json

@@ -124,8 +124,8 @@
     "@angular/platform-browser-dynamic": "6.0.2",
     "@angular/platform-server": "6.0.2",
     "@angular/router": "6.0.2",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-e40780b.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-e40780b.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-18ddc7a.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-18ddc7a.tgz",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",
@@ -140,8 +140,8 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-e40780b.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-e40780b.tgz",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-18ddc7a.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-18ddc7a.tgz",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
     "@types/node": "8.10.15",