feat: update to igniteui-angular 5.2.0-beta.1

templates/angular/igx-ts/projects/empty/files/package.json

@@ -23,7 +23,7 @@
     "@angular/router": "^5.0.0",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "5.2.0-beta.0",
+    "igniteui-angular": "5.2.0-beta.1",
     "igniteui-cli": "^1.0.4",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14",

templates/angular/igx-ts/projects/empty/files/src/app/app.component.css

@@ -1,49 +1,12 @@
-.main{
-  display:-webkit-box;display:-ms-flexbox;
-  display:flex;
-  -webkit-box-orient:horizontal;
-  -webkit-box-direction:normal;
-  -ms-flex-flow:row nowrap;
-  flex-flow:row nowrap;top:0;
-  right:0;bottom:0;
-  left:0;
-  overflow:hidden
+.main {
+	width: 100%;
 }
-
-.main,.nav{position:absolute}
-
-.nav-item {
-  display: flex;
-  flex: 1 0 100%;
-  flex-flow: row nowrap;
-  color: #383838;
-  max-height: 48px;
-  padding: 12px 16px;
-  cursor: pointer;
-  font-size: 16px;
-  align-items: center;
-  font-weight: 600;
-  user-select: none;
-  outline: transparent;
-  white-space: nowrap;
-}
-
-.nav-item.active {
-  color: #731963;
-}
-
-.nav-item:hover {
-  background-color: #f0f0f0;
-}
-
-:host ::ng-deep .igx-navbar{
-  background: #731963;
-}
-
+
 h3 {
   padding-left: 16px;
 }
 
-#content {
+.content {
   flex: 1 1 100%;
+  padding: 20px;
 }

templates/angular/igx-ts/projects/empty/files/src/app/app.component.html

@@ -1,12 +1,15 @@
-<div class="main">
-  <igx-nav-drawer #nav id="project-menu"  isOpen="true" [enableGestures]='true' width="280px">
-      <div class="igx-drawer-content">
-          <h3>Views</h3>
-          <span *ngFor="let route of topNavLinks" class="nav-item" routerLinkActive="active" routerLink="{{route.path}}">{{route.name}}</span>
-      </div>
-  </igx-nav-drawer>
-  <div>
-      <igx-navbar title="IgniteUI for Angular!" actionButtonIcon="menu" (onAction)="nav.toggle()"></igx-navbar>
-      <router-outlet></router-outlet>
-    </div>
-</div>
+<div class="main" igxLayout>
+	<igx-nav-drawer #nav id="project-menu" isOpen="true" [enableGestures]='true' width="280px">
+		<ng-template igxDrawer>
+			<span igxDrawerItem [isHeader]="true">Views</span>
+			<span *ngFor="let route of topNavLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{route.path}}">{{route.name}}</span>
+		</ng-template>
+	</igx-nav-drawer>
+	<div igxFlex>
+		<igx-navbar title="IgniteUI for Angular!" actionButtonIcon="menu" (onAction)="nav.toggle()" igxFlex></igx-navbar>
+		<div class="content">
+			<router-outlet></router-outlet>
+		 </div>
+	  </div>
+  </div>
+

templates/angular/igx-ts/projects/empty/files/src/app/app.module.ts

@@ -5,7 +5,7 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { IgxNavigationDrawerModule, IgxNavbarModule } from 'igniteui-angular/main';
+import { IgxNavigationDrawerModule, IgxNavbarModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular/main';
 import { HomeComponent } from './home/home.component';
 
 @NgModule({
@@ -15,12 +15,14 @@ import { HomeComponent } from './home/home.component';
     HomeComponent
   ],
   imports: [
-		FormsModule,
-		BrowserModule,
-		BrowserAnimationsModule,
+    FormsModule,
+    BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     IgxNavigationDrawerModule,
-    IgxNavbarModule
+    IgxNavbarModule,
+    IgxLayoutModule,
+    IgxRippleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

templates/angular/igx-ts/projects/empty/files/src/styles.sass

@@ -2,4 +2,27 @@
 @import "~igniteui-angular/core/styles/themes/index"
 
 @include igx-core()
-@include igx-theme()
+@include igx-theme()
+
+$purple: #731963 !default
+$grey: #f0f0f0 !default
+
+$app-palette: igx-palette($purple, $grey);
+@include igx-theme($app-palette)
+
+//$navbar-theme: igx-navbar-theme($background: #731963)
+//@include igx-navbar($navbar-theme)
+
+$title-margin: 15px
+
+$carosel-width: 80%
+$datepicker-width: 200px
+
+.content p
+    margin: $title-margin
+
+.igx-carousel
+    width: $carosel-width
+
+.igx-date-picker
+    width: $datepicker-width