docs(component-styles): new guide chapter - ward's tweaks

Author: wardbell

public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts

@@ -15,5 +15,5 @@ import {QuestSummaryComponent} from './quest-summary.component';
   directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
 })
 export class HeroAppMainComponent {
-  @Input() hero:Hero;
+  @Input() hero: Hero;
 }

public/docs/_examples/component-styles/ts/app/hero-app.component.ts

@@ -7,15 +7,12 @@ import {HeroAppMainComponent} from './hero-app-main.component';
   selector: 'hero-app',
   template: `
     <h1>Tour of Heroes</h1>
-    <hero-app-main [hero]=hero></hero-app-main>
-  `,
-  styles: [`
-    h1 { font-weight: normal; }
-  `],
+    <hero-app-main [hero]=hero></hero-app-main>`,
+  styles: ['h1 { font-weight: normal; }'],
   directives: [HeroAppMainComponent]
 })
-export class HeroAppComponent {
 // #enddocregion
+export class HeroAppComponent {
   hero = new Hero(
     'Human Torch',
     ['Mister Fantastic', 'Invisible Woman', 'Thing']

public/docs/_examples/component-styles/ts/app/hero-controls.component.ts

@@ -15,10 +15,10 @@ import {Hero} from './hero';
     <button (click)="activate()">Activate</button>
   `
 })
-export class HeroControlsComponent {
 // #enddocregion inlinestyles
+export class HeroControlsComponent {
 
-  @Input() hero:Hero;
+  @Input() hero: Hero;
 
   activate() {
     this.hero.active = true;

public/docs/_examples/component-styles/ts/app/hero-team.component.ts

@@ -11,11 +11,9 @@ import {Hero} from './hero';
       <li *ngFor="#member of hero.team">
         {{member}}
       </li>
-    </ul>
-  `
+    </ul>`
 })
-export class HeroTeamComponent {
 // #enddocregion stylelink
-
-  @Input() hero:Hero;
+export class HeroTeamComponent {
+  @Input() hero: Hero;
 }

public/docs/_examples/component-styles/ts/app/quest-summary.component.html

@@ -0,0 +1 @@
+No quests in progress

public/docs/_examples/component-styles/ts/app/quest-summary.component.ts

@@ -5,19 +5,28 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 // Let TypeScript know about the special SystemJS __moduleName variable
 declare var __moduleName: string;
 // #enddocregion
-// moduleName doesn't work on Plunkr, set it explicitly
+// moduleName is not set in some module loaders; set it explicitly
 if (!__moduleName) {
   __moduleName = `http://${location.host}/${location.pathname}/app/`;
 }
+console.log(`The __moduleName is ${__moduleName} `);
 // #docregion
 
 @Component({
   moduleId: __moduleName,
   selector: 'quest-summary',
-  template: 'No quests ongoing',
-  styleUrls: ['quest-summary.component.css'],
+  // #docregion urls
+  templateUrl: 'quest-summary.component.html',
+  styleUrls:  ['quest-summary.component.css']
+  // #enddocregion urls  
+// #enddocregion
+/*
+  // #docregion encapsulation.native
+  // warning: few browsers support shadow DOM encapsulation at this time
+  encapsulation: ViewEncapsulation.Native 
+  // #enddocregion encapsulation.native
+*/
+// #docregion
 })
-export class QuestSummaryComponent {
-
-}
+export class QuestSummaryComponent { }
 // #enddocregion

public/docs/_examples/component-styles/ts/app/quest-summary.native.component.css

@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+  
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",

public/docs/dart/latest/guide/_data.json

@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")

public/docs/dart/latest/guide/component-styles.jade

@@ -62,6 +62,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "component-styles": {
+    "title": "Component Styles",
+    "intro": "Learn how to apply CSS styles to components."
+  },
+  
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",

public/docs/js/latest/guide/_data.json

@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")