Merge pull request #3071 from IdeaBlade/relative-paths

chore: convert relative templateUrl/styleUrls to have ./
docs(style-guide): prefix with ./ and other improvements

Author: wardbell

public/docs/_examples/animations/ts/app/hero-list-auto.component.ts

@@ -23,7 +23,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
 
   /* When the element leaves (transition "in => void" occurs),
    * get the element's current computed height and animate

public/docs/_examples/animations/ts/app/hero-list-basic.component.ts

@@ -34,7 +34,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   // #enddocregion
   /**
    * Define two states, "inactive" and "active", and the end

public/docs/_examples/animations/ts/app/hero-list-combined-transitions.component.ts

@@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
    </ul>
  `,
  // #enddocregion template
- styleUrls: ['hero-list.component.css'],
+ styleUrls: ['./hero-list.component.css'],
  /*
   * Define two states, "inactive" and "active", and the end
   * styles that apply whenever the element is in those states.

public/docs/_examples/animations/ts/app/hero-list-enter-leave-states.component.ts

@@ -24,7 +24,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The elements here have two possible states based
    * on the hero state, "active", or "inactive". We animate
    * six transitions: Between the two states in both directions,

public/docs/_examples/animations/ts/app/hero-list-enter-leave.component.ts

@@ -23,7 +23,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The element here always has the state "in" when it
    * is present. We animate two transitions: From void
    * to in and from in to void, to achieve an animated

public/docs/_examples/animations/ts/app/hero-list-groups.component.ts

@@ -22,7 +22,7 @@ import { Heroes } from './hero.service';
       </li>
     </ul>
   `,
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   styles: [`
     li {
       padding: 0 !important;

public/docs/_examples/animations/ts/app/hero-list-inline-styles.component.ts

@@ -26,7 +26,7 @@ import { Heroes } from './hero.service';
    </ul>
  `,
  // #enddocregion template
- styleUrls: ['hero-list.component.css'],
+ styleUrls: ['./hero-list.component.css'],
  /**
   * Define two states, "inactive" and "active", and the end
   * styles that apply whenever the element is in those states.

public/docs/_examples/animations/ts/app/hero-list-multistep.component.ts

@@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The element here always has the state "in" when it
    * is present. We animate two transitions: From void
    * to in and from in to void, to achieve an animated

public/docs/_examples/animations/ts/app/hero-list-timings.component.ts

@@ -22,7 +22,7 @@ import { Heroes } from './hero.service';
       </li>
     </ul>
   `,
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The element here always has the state "in" when it
    * is present. We animate two transitions: From void
    * to in and from in to void, to achieve an animated

public/docs/_examples/animations/ts/app/hero-list-twoway.component.ts

@@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
    </ul>
  `,
  // #enddocregion template
- styleUrls: ['hero-list.component.css'],
+ styleUrls: ['./hero-list.component.css'],
  /*
   * Define two states, "inactive" and "active", and the end
   * styles that apply whenever the element is in those states.