Merge pull request #423 from christophercr/feature/material-icons

feat(ui): integrate @mdi/angular-material icons
NationalBankBelgium · Jun 8, 2018 · 18ddc7a · 18ddc7a
2 parents b2f08e8 + 1e30ab7
commit 18ddc7a
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@angular/animations": "6.0.3",
+    "@angular/cdk": "6.2.0",
     "@angular/cli": "6.0.7",
     "@angular/common": "6.0.3",
     "@angular/compiler": "6.0.3",

diff --git a/packages/rollup.config.common-data.js b/packages/rollup.config.common-data.js
@@ -7,8 +7,10 @@ const commonjs = require("rollup-plugin-commonjs");
 const sourcemaps = require("rollup-plugin-sourcemaps");
 
 const globals = {
+	"@angular/cdk": "ng.cdk",
 	"@angular/core": "ng.core",
 	"@angular/common/http": "angular.common.http",
+	"@angular/material": "ng.material",
 	"@nationalbankbelgium/stark-core": "stark.core",
 	"@nationalbankbelgium/stark-ui": "stark.ui",
 	"@ngrx/store": "@ngrx/store",

diff --git a/packages/stark-ui/angular.json b/packages/stark-ui/angular.json
@@ -13,7 +13,11 @@
             "outputPath": "dist",
             "tsConfig": "tsconfig-build.json",
             "assets": [
-              { "glob": "**/*", "input": "../node_modules/@nationalbankbelgium/stark-ui/assets", "output": "./assets/stark-ui/" },
+              {
+                "glob": "**/*",
+                "input": "../node_modules/@nationalbankbelgium/stark-ui/assets",
+                "output": "./assets/stark-ui/"
+              },
               {
                 "glob": "**/*",
                 "input": "../node_modules/@nationalbankbelgium/stark-ui/src/modules/app-logo/assets",

diff --git a/packages/stark-ui/package.json b/packages/stark-ui/package.json
@@ -25,11 +25,15 @@
     "node": ">=6.11.0",
     "npm": ">=5.3.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@mdi/angular-material": "2.4.85"
+  },
   "devDependencies": {
     "@nationalbankbelgium/stark-testing": "../stark-testing"
   },
   "peerDependencies": {
+    "@angular/animations": "6.x",
+    "@angular/cdk": "6.x",
     "@angular/common": "6.x",
     "@angular/compiler": "6.x",
     "@angular/core": "6.x",

diff --git a/packages/stark-ui/tsconfig-build.json b/packages/stark-ui/tsconfig-build.json
@@ -6,6 +6,8 @@
     "typeRoots": ["./node_modules/@types", "./node_modules/@nationalbankbelgium/stark-testing/node_modules/@types"],
     "lib": ["dom", "dom.iterable", "es2017"],
     "paths": {
+      "@angular/animations": ["../../node_modules/@angular/animations"],
+      "@angular/cdk": ["../../node_modules/@angular/cdk"],
       "@angular/common": ["../../node_modules/@angular/common"],
       "@angular/core": ["../../node_modules/@angular/core"],
       "@angular/material": ["../../node_modules/@angular/material"],

diff --git a/showcase/angular.json b/showcase/angular.json
@@ -19,8 +19,8 @@
             "assets": [
               {
                 "glob": "mdi.svg",
-                "input": "node_modules/@mdi/angular-material",
-                "output": "./assets/icons"
+                "input": "../node_modules/@mdi/angular-material",
+                "output": "./assets/material-icons"
               },
               {
                 "glob": "**/*",

diff --git a/showcase/package.json b/showcase/package.json
@@ -107,19 +107,20 @@
   },
   "dependencies": {
     "@angular/animations": "6.0.2",
+    "@angular/cdk": "6.0.2",
     "@angular/cli": "6.0.3",
     "@angular/common": "6.0.2",
     "@angular/compiler": "6.0.2",
     "@angular/compiler-cli": "6.0.2",
     "@angular/core": "6.0.2",
     "@angular/forms": "6.0.2",
+    "@angular/material": "6.0.2",
     "@angular/platform-browser": "6.0.2",
     "@angular/platform-browser-dynamic": "6.0.2",
     "@angular/platform-server": "6.0.2",
     "@angular/router": "6.0.2",
-    "@mdi/angular-material": "2.3.54",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-952e4c4.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-952e4c4.tgz",
+    "@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",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",

diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { Inject, NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
+import { BrowserModule, DomSanitizer } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 import { UIRouterModule } from "@uirouter/angular";
 import { NgIdleModule } from "@ng-idle/core";
@@ -8,6 +8,7 @@ import { ActionReducer, ActionReducerMap, MetaReducer, StoreModule } from "@ngrx
 import { storeFreeze } from "ngrx-store-freeze";
 import { storeLogger } from "ngrx-store-logger";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { MatIconRegistry } from "@angular/material";
 
 import {
 	STARK_APP_CONFIG,
@@ -29,6 +30,7 @@ import {
 
 import { StarkAppLogoModule } from "@nationalbankbelgium/stark-ui";
 import { routerConfigFn } from "./router.config";
+import { registerMaterialIconSet } from "./material-icons.config";
 import { Deserialize } from "cerialize";
 /*
  * Translations
@@ -153,8 +155,12 @@ export const metaReducers: MetaReducer<State>[] = !environment.production ? [log
 export class AppModule {
 	public constructor(
 		private translateService: TranslateService,
-		@Inject(STARK_SESSION_SERVICE) private sessionService: StarkSessionService
+		@Inject(STARK_SESSION_SERVICE) private sessionService: StarkSessionService,
+		matIconRegistry: MatIconRegistry,
+		domSanitizer: DomSanitizer
 	) {
+		registerMaterialIconSet(matIconRegistry, domSanitizer);
+
 		// TODO should use StarkLanguages, StarkLanguage, etc
 		this.translateService.addLangs(["en", "fr", "nl"]);
 		this.translateService.setTranslation("en", translationsEn, true);

diff --git a/showcase/src/app/material-icons.config.ts b/showcase/src/app/material-icons.config.ts
@@ -0,0 +1,14 @@
+import { MatIconRegistry } from "@angular/material";
+import { DomSanitizer } from "@angular/platform-browser";
+
+/**
+ * Registers the @mdi svg icon set to the Angular Material icon registry in the default namespace
+ * @param matIconRegistry - Angular Material's icon registry
+ * @param domSanitizer - Angular's DOM sanitizer
+ */
+export function registerMaterialIconSet(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer): void {
+	// IMPORTANT: the path of the @mdi svg icon set should match the output path given to it in the angular.json file
+	const iconSetUrl: string = "assets/material-icons/mdi.svg";
+
+	matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl(iconSetUrl));
+}
diff --git a/starter/package.json b/starter/package.json
@@ -112,19 +112,20 @@
   },
   "dependencies": {
     "@angular/animations": "6.0.2",
+    "@angular/cdk": "6.0.2",
     "@angular/cli": "6.0.3",
     "@angular/common": "6.0.2",
     "@angular/compiler": "6.0.2",
     "@angular/compiler-cli": "6.0.2",
     "@angular/core": "6.0.2",
     "@angular/forms": "6.0.2",
+    "@angular/material": "6.0.2",
     "@angular/platform-browser": "6.0.2",
     "@angular/platform-browser-dynamic": "6.0.2",
     "@angular/platform-server": "6.0.2",
     "@angular/router": "6.0.2",
-    "@mdi/angular-material": "2.3.54",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-952e4c4.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-952e4c4.tgz",
+    "@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",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",

diff --git a/starter/src/app/app.module.ts b/starter/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { Inject, NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
+import { BrowserModule, DomSanitizer } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 import { UIRouterModule } from "@uirouter/angular";
 import { NgIdleModule } from "@ng-idle/core";
@@ -8,6 +8,7 @@ import { ActionReducer, ActionReducerMap, MetaReducer, StoreModule } from "@ngrx
 import { storeFreeze } from "ngrx-store-freeze";
 import { storeLogger } from "ngrx-store-logger";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { MatIconRegistry } from "@angular/material";
 
 import {
 	STARK_APP_CONFIG,
@@ -29,6 +30,7 @@ import {
 
 import { StarkAppLogoModule } from "@nationalbankbelgium/stark-ui";
 import { routerConfigFn } from "./router.config";
+import { registerMaterialIconSet } from "./material-icons.config";
 import { Deserialize } from "cerialize";
 /*
  * Translations
@@ -46,6 +48,7 @@ import { AppState } from "./app.service";
 import { HomeComponent } from "./home";
 import { AboutComponent } from "./about";
 import { NoContentComponent } from "./no-content";
+
 /* tslint:disable:no-import-side-effect */
 // load PCSS styles
 import "../styles/styles.pcss";
@@ -151,9 +154,12 @@ export const metaReducers: MetaReducer<State>[] = !environment.production ? [log
 export class AppModule {
 	public constructor(
 		private translateService: TranslateService,
-		@Inject(STARK_SESSION_SERVICE) private sessionService: StarkSessionService
+		@Inject(STARK_SESSION_SERVICE) private sessionService: StarkSessionService,
+		matIconRegistry: MatIconRegistry,
+		domSanitizer: DomSanitizer
 	) {
 		initializeTranslation(this.translateService);
+		registerMaterialIconSet(matIconRegistry, domSanitizer);
 
 		const user: StarkUser = {
 			uuid: "abc123",

diff --git a/starter/src/app/material-icons.config.ts b/starter/src/app/material-icons.config.ts
@@ -0,0 +1,14 @@
+import { MatIconRegistry } from "@angular/material";
+import { DomSanitizer } from "@angular/platform-browser";
+
+/**
+ * Registers the @mdi svg icon set to the Angular Material icon registry in the default namespace
+ * @param matIconRegistry - Angular Material's icon registry
+ * @param domSanitizer - Angular's DOM sanitizer
+ */
+export function registerMaterialIconSet(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer): void {
+	// IMPORTANT: the path of the @mdi svg icon set should match the output path given to it in the angular.json file
+	const iconSetUrl: string = "assets/material-icons/mdi.svg";
+
+	matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl(iconSetUrl));
+}