Angular 4 Upgrade > Additional Edits (#702)

* Allow for proper nesting for getting data for lists and grids (#671)

* Changed the list helper getData function to set the result to null if the final part was undefined so that nesting works correctly.

* Added unit tests

* updates skyux2 docs to use stache2 (#681)

* home page and pulling in stache things

* removed need for title service

* components demo component using stache

* removed change to package json

* removed unecessary method

* updating learn page and removing overview folder

* spacing issue fixed

* Convert reference topics to Stache 2

* refactored all the tutorial section

* Doc tweaks for Stache 2.

* Final doc tweaks before merge

* versioned without vs

* Update builder version (#693)

* Update builder version

* Remove unneeded packages

* Update full page modal header sizes (#679)

* Update full page modal header sizes

* Update full screen modal screenshots

* Travis build 1313 pushed to skyux2 [ci skip]

* Update wait component z-index (#684)

* Travis build 1316 pushed to skyux2 [ci skip]

* Adjust padding for closeable tab (#685)

To account for built-in padding in the close button.

* Travis build 1318 pushed to skyux2 [ci skip]

* Handle styles for filedrop when links are not allowed (#686)

* Travis build 1325 pushed to skyux2 [ci skip]

* Add cancel button to wizard docs and update modal button spacing (#689)

* Added yarn lock

* Cleaned files based on lint rules

* Removed unused comments

* Updated excluded source maps

* Updated version of tslint

.gitignore

@@ -32,6 +32,7 @@ Thumbs.db
 /node_modules
 /bower_components
 npm-debug.log*
+yarn.lock
 
 # Coverage #
 /coverage/

.nvmrc

@@ -1 +1 @@
-4.4.4
+6.9.1

config/webpack/webpack.common.js

@@ -41,8 +41,9 @@ module.exports = {
         loader: 'source-map-loader',
         exclude: [
           // these packages have problems with their sourcemaps
+          // https://github.com/angular-redux/store/issues/64
           helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular/compiler/bundles')
+          helpers.root('node_modules/@angular/compiler')
         ]
       },
 

package.json

@@ -38,62 +38,63 @@
     "watch": "npm run test:unit -- --auto-watch --no-single-run"
   },
   "dependencies": {
-    "@angular/animations": "4.1.1",
-    "@angular/common": "4.1.1",
-    "@angular/compiler": "4.1.1",
-    "@angular/core": "4.1.1",
-    "@angular/forms": "4.1.1",
-    "@angular/platform-browser": "4.1.1",
-    "@angular/platform-browser-dynamic": "4.1.1",
-    "@angular/router": "4.1.1",
+    "@angular/animations": "4.1.2",
+    "@angular/common": "4.1.2",
+    "@angular/compiler": "4.1.2",
+    "@angular/core": "4.1.2",
+    "@angular/forms": "4.1.2",
+    "@angular/platform-browser": "4.1.2",
+    "@angular/platform-browser-dynamic": "4.1.2",
+    "@angular/router": "4.1.2",
+    "@blackbaud/stache": "2.0.0-beta.0",
     "core-js": "2.4.1",
     "dragula": "3.7.2",
     "font-awesome": "4.7.0",
     "intl": "1.2.5",
     "microedge-rxstate": "1.0.3",
     "moment": "2.18.1",
     "ng2-dragula": "1.3.1",
-    "ng2-toastr": "0.3.1",
-    "rxjs": "5.3.0",
-    "zone.js": "0.8.5"
+    "ng2-toastr": "4.0.1",
+    "rxjs": "5.4.0",
+    "zone.js": "0.8.10"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "4.1.1",
-    "@blackbaud/skyux-builder": "1.0.0-beta.23",
+    "@angular/compiler-cli": "4.1.2",
+    "@blackbaud/skyux-builder": "blackbaud/skyux-builder#update-angular",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",
-    "@types/node": "7.0.13",
+    "@types/node": "7.0.18",
     "@types/webpack": "2.2.15",
     "angular2-template-loader": "0.6.2",
-    "awesome-typescript-loader": "3.1.2",
-    "axe-core": "1.1.1",
+    "awesome-typescript-loader": "3.1.3",
+    "axe-core": "2.2.0",
     "base64-image-loader": "1.2.0",
-    "browserstack-local": "1.2.0",
-    "codelyzer": "3.0.0",
-    "css-loader": "0.28.0",
-    "express": "4.14.0",
+    "browserstack-local": "1.3.0",
+    "codelyzer": "3.0.1",
+    "css-loader": "0.28.1",
+    "express": "4.15.2",
     "extract-text-webpack-plugin": "2.1.0",
     "file-loader": "0.11.1",
     "font-awesome-webpack": "0.0.5-beta.2",
     "fontfaceobserver": "2.0.9",
-    "fs-extra": "2.1.2",
+    "fs-extra": "3.0.1",
     "glob": "7.1.1",
     "html-webpack-plugin": "2.28.0",
-    "http-server": "0.9.0",
+    "http-server": "0.10.0",
     "istanbul-instrumenter-loader": "2.0.0",
-    "jasmine": "2.5.3",
+    "jasmine": "2.6.0",
     "json-loader": "0.5.4",
-    "karma": "1.6.0",
+    "karma": "1.7.0",
     "karma-browserstack-launcher": "1.2.0",
-    "karma-chrome-launcher": "2.0.0",
+    "karma-chrome-launcher": "2.1.1",
     "karma-coverage": "1.1.1",
     "karma-jasmine": "1.1.0",
     "karma-mocha-reporter": "2.2.3",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "2.0.3",
     "less": "2.7.2",
-    "node-resemble-js": "0.1.1",
-    "node-sass": "4.5.2",
+    "node-resemble-js": "0.2.0",
+    "node-sass": "4.5.3",
     "normalize-scss": "6.0.0",
     "prismjs": "1.6.0",
     "raw-loader": "0.5.1",
@@ -102,25 +103,25 @@
     "rollup": "0.41.6",
     "rollup-plugin-commonjs": "8.0.2",
     "rollup-plugin-node-resolve": "3.0.0",
-    "rollup-plugin-uglify": "1.0.1",
-    "sass-loader": "6.0.3",
-    "selenium-standalone": "6.1.0",
+    "rollup-plugin-uglify": "1.0.2",
+    "sass-loader": "6.0.5",
+    "selenium-standalone": "6.4.1",
     "source-map-inline-loader": "blackbaud-bobbyearl/source-map-inline-loader",
     "source-map-loader": "0.2.1",
-    "style-loader": "0.16.1",
+    "style-loader": "0.17.0",
     "ts-helpers": "1.1.2",
-    "tslint": "4.5.1",
-    "tslint-loader": "3.5.2",
-    "typescript": "2.2.2",
+    "tslint": "5.2.0",
+    "tslint-loader": "3.5.3",
+    "typescript": "2.3.2",
     "url-loader": "0.5.8",
-    "wdio-jasmine-framework": "0.2.5",
+    "wdio-jasmine-framework": "0.3.1",
     "wdio-selenium-standalone-service": "0.0.8",
-    "wdio-spec-reporter": "0.0.3",
-    "wdio-visual-regression-service": "0.7.0",
+    "wdio-spec-reporter": "0.1.0",
+    "wdio-visual-regression-service": "0.8.0",
     "webdriverio": "4.8.0",
-    "webpack": "2.4.1",
-    "webpack-dev-middleware": "1.10.1",
-    "webpack-dev-server": "2.4.2",
+    "webpack": "2.5.1",
+    "webpack-dev-middleware": "1.10.2",
+    "webpack-dev-server": "2.4.5",
     "webpack-merge": "4.1.0"
   },
   "repository": {

skyuxconfig.json

@@ -3,5 +3,9 @@
   "mode": "easy",
   "importPath": "src",
   "cssPath": "src/scss/sky.scss",
-  "compileMode": "aot"
+  "compileMode": "aot",
+  "plugins": [
+    "@blackbaud/skyux-builder-plugin-stache-code-block",
+    "@blackbaud/skyux-builder-plugin-stache-include"
+  ]
 }

src/app/app-extras.module.ts

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 
+import { StacheModule, StacheConfigService } from'@blackbaud/stache';
+
+import { SkyAppConfig } from '@blackbaud/skyux-builder/runtime';
 import { SkyDemoTitleService } from './shared/title.service';
 import { SkyFilterDemoModalComponent } from './components/filter/filter-demo-modal.component';
 import { SkyListFiltersModalDemoComponent }
@@ -24,10 +27,18 @@ require('style-loader!./styles.scss');
     SkyListFiltersModalDemoComponent
   ],
   imports: [
-    SkyDemoComponentsModule
+    SkyDemoComponentsModule,
+    StacheModule
+  ],
+  exports: [
+    StacheModule
   ],
   providers: [
-    SkyDemoTitleService
+    SkyDemoTitleService,
+    {
+      provide: StacheConfigService,
+      useExisting: SkyAppConfig
+    }
   ]
 })
 export class AppExtrasModule { }

src/app/components/demo-component.ts

@@ -2,6 +2,7 @@ export interface SkyDemoComponent {
   name: string;
   icon: string;
   summary: string;
-  url: string;
-  getCodeFiles: () => any[];
+  url?: string;
+  path?: string[];
+  getCodeFiles?: () => any[];
 }

src/app/components/demo-components.component.html

@@ -1,17 +1,13 @@
 <sky-demo-nav></sky-demo-nav>
-<div class="sky-container">
-  <h1>Components</h1>
-  <p>
-    SKY UX components, available as Angular 2 components, services, and modules, allow developers to easily create user interfaces that incorporate our styles and patterns. <a href="https://angular.io">Angular 2</a> is at the heart of SKY UX, so it is important you are familiar with it before you get started.
-  </p>
-  <div class="sky-demo-components-list">
-    <sky-demo-button
-        *ngFor="let component of components"
-        [url]="component.url"
-        [componentName]="component.name"
-        [icon]="component.icon"
-    >
-      {{ component.summary }}
-    </sky-demo-button>
-  </div>
-</div>
+<stache
+  layout="container"
+  windowTitle="Components"
+  pageTitle="Components">
+  <stache-page-summary>
+    <p>
+      SKY UX components, available as Angular 2 components, services, and modules, allow developers to easily create user interfaces that incorporate our styles and patterns. <a href="https://angular.io">Angular 2</a> is at the heart of SKY UX, so it is important you are familiar with it before you get started.
+    </p>
+  </stache-page-summary>
+    <stache-action-buttons [routes]="actionButtonComponents">
+    </stache-action-buttons>
+</stache>

src/app/components/demo-components.component.ts

@@ -6,7 +6,6 @@ import {
 
 import { SkyDemoComponent } from './demo-component';
 import { SkyDemoComponentsService } from './demo-components.service';
-import { SkyDemoTitleService } from '../shared/title.service';
 
 @Component({
   selector: 'sky-demo-components',
@@ -15,16 +14,18 @@ import { SkyDemoTitleService } from '../shared/title.service';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SkyDemoComponentsComponent implements OnInit {
-  public get components(): SkyDemoComponent[] {
-    return this.componentService.getComponents();
-  }
+  public actionButtonComponents: SkyDemoComponent[];
 
-  constructor(
-    private titleService: SkyDemoTitleService,
-    private componentService: SkyDemoComponentsService
-  ) { }
+  constructor(private componentService: SkyDemoComponentsService) { }
 
   public ngOnInit() {
-    this.titleService.setTitle('Components');
+    this.actionButtonComponents = this.componentService.getComponents().map(component => {
+      return {
+        path: [component.url],
+        name: component.name,
+        icon: component.icon,
+        summary: component.summary
+      };
+    });
   }
 }

src/app/components/shared/demo-page-code-file.ts

@@ -24,11 +24,5 @@ export class SkyDemoPageCodeFile {
       default:
         this.language = 'markup';
     }
-    this.codeImports = this.code.replace(/\.\.\/\.\.\/\.\.\/core/g, '@blackbaud/skyux/dist/core');
-
-    this.codeFormatted = Prism.highlight(
-      this.codeImports,
-      Prism.languages[this.language]
-    );
   }
 }

src/app/components/shared/demo-page-code.component.html

@@ -19,12 +19,12 @@ <h2>Code</h2>
   <sky-tabset
     [active]="0">
     <sky-tab
-        *ngFor="let codeFile of codeFilesForBinding"
-        [tabHeading]="codeFile.name"
-    >
-      <div class="sky-demo-page-code-sample">
-        <pre><code [innerHTML]="codeFile.codeFormatted"></code></pre>
-      </div>
+      *ngFor="let codeFile of codeFilesForBinding"
+      [tabHeading]="codeFile.name">
+      <stache-code-block 
+        [code]="codeFile.code"
+        [languageType]="codeFile.language">
+      </stache-code-block>
     </sky-tab>
   </sky-tabset>
 </section>

src/app/components/shared/demo-page-plunker-service.ts

@@ -196,5 +196,5 @@ export class AppModule { }
 platformBrowserDynamic().bootstrapModule(AppModule);`
       }
     ];
-  };
+  }
 }

src/app/components/shared/demo-page.component.html

@@ -1,20 +1,11 @@
 <sky-demo-nav></sky-demo-nav>
-<div class="sky-container">
-  <div class="sky-demo-page">
+<stache
+  layout="container"
+  [pageTitle]="title">
 
-    <div class="sky-demo-page-header">
-      <h1>
-        {{title}}
-      </h1>
-      <a
-        class="sky-btn sky-demo-page-back-btn"
-        routerLink="/components"
-      >
-        <i class="fa fa-long-arrow-left"></i> Return to Components
-      </a>
-    </div>
-    <ng-content select="sky-demo-page-summary"></ng-content>
+  <stache-page-summary>
+     <ng-content select="sky-demo-page-summary"></ng-content>
+  </stache-page-summary>
     <ng-content select="sky-demo-page-properties"></ng-content>
     <ng-content select="sky-demo-page-example"></ng-content>
-  </div>
-</div>
+</stache>

src/app/components/wizard/wizard-demo-form.component.html

@@ -41,5 +41,11 @@
     >
       Save and close
     </button>
+    <button
+      type="button"
+      class="sky-btn sky-btn-link"
+      (click)="instance.cancel()">
+      Cancel
+    </button>
   </sky-modal-footer>
 </sky-modal>

src/app/home.component.html

@@ -1,8 +1,28 @@
 <sky-demo-nav></sky-demo-nav>
-<div class="sky-container">
-  <h1>SKY UX 2 is currently in beta</h1>
+<stache-hero
+  overlayOpacity="0"
+  backgroundImageUrl="~/assets/skyux-background.jpg">
+  <stache-hero-heading>
+    SKYUX 2
+  </stache-hero-heading>
+  <stache-hero-subheading>
+    A user experience framework for building web applications that leverage Blackbaud’s SKY UX patterns.
+  </stache-hero-subheading>
+</stache-hero>
 
-  <p>SKY UX 2 is a new version of Blackbaud's user experience framework. The UX framework brings a consistent, cohesive experience to our products and allows third-party developers to provide the same consistent experience in their customizations and applications. With AngularJS now in maintenance mode and Angular 2 in general availability, SKY UX 2 takes advantage of <a href="https://angular.io/">Angular 2</a> to keep SKY UX modern while increasing the tooling, testing, and performance available.</p>
-
-  <p>We're still working on the full documentation site, but you can preview the <a routerLink="/components">components documentation</a> and check out our <a href="https://github.com/blackbaud/skyux2">GitHub repo</a>.</p>
-</div>
+<stache
+  layout="container"
+  showBreadcrumbs="false"
+  windowTitle="SKYUX 2"
+  pageTitle="SKYUX 2 is currently in beta">
+    <stache-page-summary>
+      <p>
+        SKY UX 2 is a new version of Blackbaud's user experience framework. The UX framework brings a consistent, cohesive experience to our products and allows third-party developers to provide the same consistent experience in their customizations and applications. With AngularJS now in maintenance mode and Angular 2 in general availability, SKY UX 2 takes advantage of <a href="https://angular.io/">Angular 2</a> to keep SKY UX modern while increasing the tooling, testing, and performance available.
+      </p>
+    </stache-page-summary>
+    <sky-alert [alertType]="warning" [closeable]="false">
+      <p>
+        We're still working on the full documentation site, but you can preview the <a routerLink="/components">components documentation</a> and check out our <a href="https://github.com/blackbaud/skyux2">GitHub repo</a>.
+      </p>
+    </sky-alert>
+</stache>

src/app/home.component.ts

@@ -1,15 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-
-import { SkyDemoTitleService } from './shared/title.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'sky-demo-home',
   templateUrl: './home.component.html'
 })
-export class SkyDemoHomeComponent implements OnInit {
-  constructor(private titleService: SkyDemoTitleService) { }
-
-  public ngOnInit() {
-    this.titleService.setTitle();
-  }
-}
+export class SkyDemoHomeComponent { }