Create Web Components header, and Material navigation

angular.json

@@ -26,7 +26,14 @@
               "src/assets/material-theme.scss",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+            "./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
+            "./node_modules/@myuw-web-components/myuw-app-styles/dist/myuw-app-styles.min.js",
+            "./node_modules/@myuw-web-components/myuw-app-bar/dist/myuw-app-bar.min.js",
+            "./node_modules/@myuw-web-components/myuw-drawer/dist/myuw-drawer.min.js",
+            "./node_modules/@myuw-web-components/myuw-profile/dist/myuw-profile.min.js",
+            "./node_modules/@myuw-web-components/myuw-help/dist/myuw-help.min.js"
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.9",
+    "@angular/animations": "^6.1.10",
     "@angular/cdk": "^6.4.7",
     "@angular/common": "^6.1.9",
     "@angular/compiler": "^6.1.9",
@@ -23,6 +23,13 @@
     "@angular/platform-browser": "^6.1.9",
     "@angular/platform-browser-dynamic": "^6.1.9",
     "@angular/router": "^6.1.9",
+    "@myuw-web-components/myuw-app-bar": "^1.5.4",
+    "@myuw-web-components/myuw-app-styles": "^1.2.3",
+    "@myuw-web-components/myuw-drawer": "^1.0.6",
+    "@myuw-web-components/myuw-help": "^1.3.1",
+    "@myuw-web-components/myuw-profile": "^1.3.1",
+    "@myuw-web-components/myuw-search": "^1.3.1",
+    "@webcomponents/webcomponentsjs": "^2.1.3",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.5.4",
     "intl": "^1.2.5",
@@ -48,6 +55,6 @@
     "protractor": "^5.4.1",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",
-    "typescript": "~2.7.2"
+    "typescript": "^2.9.2"
   }
 }

src/app/app.component.html

-<a class="uw-show-on-focus" href="#main" id="uw-skip-link">Skip to main content</a>
-<div class="uw-global-bar">
-	<a class="uw-global-name-link" href="http://www.wisc.edu">U<span>niversity <span class="uw-of">of</span> </span>W<span>isconsin</span>–Madison</a>
-</div>
-<header id="branding" class="uw-header uw-has-search">
-	<div class="uw-header-container">
-		<div class="uw-header-crest-title">
-			<div class="uw-header-crest">
-				<!-- <a href="http://www.wisc.edu"><img class="uw-crest-svg" src="assets/uwstyle/images/uw-crest.svg" alt="Link to University of Wisconsin-Madison home page"></a> -->
-			</div>
-			<div class="uw-title-tagline">
-				<h1 id="site-title" class="uw-site-title">
-					<a rel="home">Angular Starter</a>
-				</h1>
-				<div id="site-description" class="uw-site-tagline">UW-Madison App</div>
-			</div>
-		</div>
-	</div>
-</header>
+<myuw-app-bar
+    theme-name=""
+    app-name="Course Search & Enroll"
+	app-url="https://my.wisc.edu">
+
+	<myuw-drawer slot="myuw-navigation" fxShow fxHide.gt-sm>
+		<myuw-drawer-link
+			slot="myuw-drawer-links"
+			name="Course Search"
+			icon=""
+			href="/search">
+			</myuw-drawer-link>
+			<myuw-drawer-link
+			slot="myuw-drawer-links"
+			name="Scheduler"
+			icon=""
+			href="/scheduler">
+			</myuw-drawer-link>
+			<myuw-drawer-link
+			slot="myuw-drawer-links"
+			name="Enrollment"
+			icon=""
+			href="/enrollment">
+			</myuw-drawer-link>
+			<myuw-drawer-link
+			slot="myuw-drawer-links"
+			name="Degree Planner"
+			icon=""
+			href="/degree-planner">
+		</myuw-drawer-link>
+	</myuw-drawer>
+
+	<myuw-help
+        slot="myuw-help"
+        myuw-help-title="Need more help?"
+		show-button
+		show-default-content>
+	</myuw-help>
+	
+	<myuw-profile
+		slot="myuw-profile"
+		session-endpoint=""
+		login-url=""
+		logout-url="http://login.wisc.edu/logout"
+		background-color="#9B0000">
+	</myuw-profile>
+
+</myuw-app-bar>
+
 <app-navigation></app-navigation>
 <main class="uw-row">
 	<div class="uw-col">

src/app/app.component.ts

@@ -8,3 +8,14 @@ import { Component } from '@angular/core';
 export class AppComponent {
 	title = 'app';
 }
+
+document.addEventListener('WebComponentsReady', function() {
+	let customEvent = new CustomEvent('myuw-login', {
+		detail: {
+			person: {
+				'firstName': 'Bucky'
+			}
+		}
+	});
+	document.dispatchEvent(customEvent);
+});

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 import { AppRoutingModule } from './app.routing.module';
 import { AppComponent } from './app.component';
@@ -10,6 +11,7 @@ import { SharedModule } from './shared/shared.module';
 @NgModule({
 	imports: [
 		BrowserModule,
+		BrowserAnimationsModule,
 		AppRoutingModule,
 		CoreModule,
 		SharedModule
@@ -19,6 +21,7 @@ import { SharedModule } from './shared/shared.module';
 		HomeComponent
 	],
 	providers: [],
-	bootstrap: [ AppComponent ]
+	bootstrap: [ AppComponent ],
+	schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class AppModule { }

src/app/app.routing.module.ts

@@ -5,7 +5,7 @@ import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 
 const routes: Routes = [
-	{ path: '', component: HomeComponent }
+	{ path: 'degree-planner', component: HomeComponent }
 ];
 
 @NgModule({

src/app/core/navigation/navigation.component.html

-<div id="uw-top-menus" class="uw-is-visible uw-horizontal" aria-hidden="false">
-	<div class="uw-main-nav">
-		<nav class="uw-nav-menu uw-nav-menu-reverse" aria-label="Main Menu">
-			<ul id="uw-main-nav" class="">
-				<li id="menu-item-1" class="home" routerLinkActive="current-menu-item" routerLinkActiveOptions="{exact: true}">
-					<a routerLink="" aria-current="page">Home</a>
-				</li>
-				<li id="menu-item-2" class="reports uw-dropdown" routerLinkActive="current-menu-item" [class.uw-is-active]="current" (click)="current = !current">
-					<a aria-current="page">Another
-						<svg class="uw-caret" viewBox="0 0 1792 1792" version="1.1" role="img" aria-labelledby="dynid59778804aac5c7.10843053">
-								<title id="dynid59778804aac5c7.10843053">Expand</title>
-								<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
-						</svg>
-						<svg class="uw-caret" viewBox="0 0 1792 1792" version="1.1" role="img" aria-labelledby="dynid59778804aaf5e4.27123023">
-								<title id="dynid59778804aaf5e4.27123023">Collapse</title>
-								<path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"></path>
-						</svg>
-					</a>
-					<ul class="sub-menu menu uw-vertical">
-						<li><a href="/">Sub-Menu</a></li>
-					</ul>
-				</li>
-			</ul>
-		</nav>
-	</div>
-</div>
+<nav mat-tab-nav-bar fxHide fxShow.gt-sm>
+	<a mat-tab-link href="https://enroll.wisc.edu/search" routerLinkActive="active">Search</a>
+	<a mat-tab-link href="https://enroll.wisc.edu/scheduler" routerLinkActive="active">Scheduler</a>
+	<a mat-tab-link href="https://enroll.wisc.edu/my-courses" routerLinkActive="active">Enrollment</a>
+	<a mat-tab-link routerLink="/degree-planner" routerLinkActive="active" >Degree Planner</a>
+</nav>
+
+<router-outlet></router-outlet>

src/app/core/navigation/navigation.component.scss

+@import '~@angular/material/theming';
+@import '~src/assets/material-theme.scss';
+
 .uw-nav-menu .uw-nav-menu-reverse a, .uw-nav-menu .uw-dropdown a {
     cursor: pointer;
-}
+}
\ No newline at end of file
+
+.mat-tab-nav-bar {
+    background-color: #DADFE1;
+    .mat-tab-link {
+        opacity: 1;
+        min-width: auto;
+    }
+    .mat-tab-link.active {
+        border-bottom: 2px solid map-get($uw-primary, 500);
+    }
+}

src/app/home/home.component.html

 <p>
 	home works!
-	<button mat-raised-button color="primary">Primary</button>
 </p>

src/app/shared/shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule, MatMenuModule, MatIconModule } from '@angular/material';
+import { MatButtonModule, MatMenuModule, MatIconModule, MatTabsModule } from '@angular/material';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 const modules = [
 	CommonModule,
@@ -9,7 +10,9 @@ const modules = [
 	ReactiveFormsModule,
 	MatButtonModule,
 	MatMenuModule,
-	MatIconModule
+	MatIconModule,
+	MatTabsModule,
+	FlexLayoutModule
 ];
 
 @NgModule({

src/index.html

 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Angular Starter</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8">
+    <title>Angular Starter</title>
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <script>
-    var global = global || window;
-    var Buffer = Buffer || [];
-    var process = process || {
-      env: { DEBUG: undefined },
-      version: []
-    };
-  </script>
-</head>
-<body>
-  <app-root></app-root>
-</body>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <script>
+      var global = global || window;
+      var Buffer = Buffer || [];
+      var process = process || {
+        env: { DEBUG: undefined },
+        version: []
+      };
+    </script>
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+body {
+    margin: 0px;
+}