@@ -8,13 +8,14 @@ import {
88 QueryList ,
99 Type ,
1010 ViewChildren ,
11- ɵNgModuleFactory
11+ ɵNgModuleFactory ,
1212} from '@angular/core' ;
1313import { MatSnackBar } from '@angular/material/snack-bar' ;
1414import { Clipboard } from '@angular/cdk/clipboard' ;
1515
1616import { EXAMPLE_COMPONENTS , LiveExample } from '@angular/components-examples' ;
1717import { CodeSnippet } from './code-snippet' ;
18+ import { normalizePath } from '../normalize-path' ;
1819
1920export type Views = 'snippet' | 'full' | 'demo' ;
2021
@@ -27,7 +28,7 @@ const preferredExampleFileOrder = ['HTML', 'TS', 'CSS'];
2728@Component ( {
2829 selector : 'example-viewer' ,
2930 templateUrl : './example-viewer.html' ,
30- styleUrls : [ './example-viewer.scss' ]
31+ styleUrls : [ './example-viewer.scss' ] ,
3132} )
3233export class ExampleViewer implements OnInit {
3334 @ViewChildren ( CodeSnippet ) readonly snippet ! : QueryList < CodeSnippet > ;
@@ -39,16 +40,16 @@ export class ExampleViewer implements OnInit {
3940 exampleTabs : { [ tabName : string ] : string } = { } ;
4041
4142 /** Data for the currently selected example. */
42- exampleData : LiveExample | null = null ;
43+ exampleData : LiveExample | null = null ;
4344
4445 /** URL to fetch code snippet for snippet view. */
4546 fileUrl : string | undefined ;
4647
4748 /** Component type for the current example. */
48- _exampleComponentType : Type < any > | null = null ;
49+ _exampleComponentType : Type < any > | null = null ;
4950
5051 /** Module factory that declares the example component. */
51- _exampleModuleFactory : NgModuleFactory < any > | null = null ;
52+ _exampleModuleFactory : NgModuleFactory < any > | null = null ;
5253
5354 /** View of the example component. */
5455 @Input ( ) view : Views | undefined ;
@@ -67,8 +68,9 @@ export class ExampleViewer implements OnInit {
6768 this . _example = exampleName ;
6869 this . exampleData = EXAMPLE_COMPONENTS [ exampleName ] ;
6970 this . _generateExampleTabs ( ) ;
70- this . _loadExampleComponent ( ) . catch ( ( error ) =>
71- console . error ( `Could not load example '${ exampleName } ${ error } ) ) ;
71+ this . _loadExampleComponent ( ) . catch ( error =>
72+ console . error ( `Could not load example '${ exampleName } ${ error } )
73+ ) ;
7274 } else {
7375 console . error ( `Could not find example: ${ exampleName } ) ;
7476 }
@@ -84,7 +86,8 @@ export class ExampleViewer implements OnInit {
8486 constructor (
8587 private readonly snackbar : MatSnackBar ,
8688 private readonly clipboard : Clipboard ,
87- private readonly elementRef : ElementRef < HTMLElement > ) { }
89+ private readonly elementRef : ElementRef < HTMLElement >
90+ ) { }
8891
8992 ngOnInit ( ) {
9093 if ( this . file ) {
@@ -146,26 +149,29 @@ export class ExampleViewer implements OnInit {
146149 fileName = `${ contentBeforeDot } ${ contentAfterDot } ;
147150 }
148151
149- return this . exampleData ?
150- `/docs-content/examples-highlighted/${ this . exampleData . packagePath } ${ fileName } : '' ;
152+ return this . exampleData
153+ ? `/docs-content/examples-highlighted/${ this . exampleData . packagePath } ${ fileName }
154+ : '' ;
151155 }
152156
153157 _getExampleTabNames ( ) {
154- return this . exampleTabs ? Object . keys ( this . exampleTabs ) . sort ( ( a , b ) => {
155- let indexA = preferredExampleFileOrder . indexOf ( a ) ;
156- let indexB = preferredExampleFileOrder . indexOf ( b ) ;
157- // Files which are not part of the preferred example file order should be
158- // moved after all items with a preferred index.
159- if ( indexA === - 1 ) {
160- indexA = preferredExampleFileOrder . length ;
161- }
162-
163- if ( indexB === - 1 ) {
164- indexB = preferredExampleFileOrder . length ;
165- }
166-
167- return ( indexA - indexB ) || 1 ;
168- } ) : [ ] ;
158+ return this . exampleTabs
159+ ? Object . keys ( this . exampleTabs ) . sort ( ( a , b ) => {
160+ let indexA = preferredExampleFileOrder . indexOf ( a ) ;
161+ let indexB = preferredExampleFileOrder . indexOf ( b ) ;
162+ // Files which are not part of the preferred example file order should be
163+ // moved after all items with a preferred index.
164+ if ( indexA === - 1 ) {
165+ indexA = preferredExampleFileOrder . length ;
166+ }
167+
168+ if ( indexB === - 1 ) {
169+ indexB = preferredExampleFileOrder . length ;
170+ }
171+
172+ return indexA - indexB || 1 ;
173+ } )
174+ : [ ] ;
169175 }
170176
171177 _copyLink ( ) {
@@ -191,7 +197,8 @@ export class ExampleViewer implements OnInit {
191197 // files. More details: https://webpack.js.org/api/module-methods/#magic-comments.
192198 const moduleExports : any = await import (
193199 /* webpackExclude: /\.map$/ */
194- '@angular/components-examples/fesm2020/' + module . importSpecifier ) ;
200+ '@angular/components-examples/fesm2020/' + module . importSpecifier
201+ ) ;
195202 this . _exampleComponentType = moduleExports [ componentName ] ;
196203 // The components examples package is built with Ivy. This means that no factory files are
197204 // generated. To retrieve the factory of the AOT compiled module, we simply pass the module
@@ -217,18 +224,25 @@ export class ExampleViewer implements OnInit {
217224 const exampleBaseFileName = `${ this . example } ;
218225 const docsContentPath = `/docs-content/examples-highlighted/${ this . exampleData . packagePath } ;
219226
227+ const tsPath = normalizePath ( `${ exampleBaseFileName } ) ;
228+ const cssPath = normalizePath ( `${ exampleBaseFileName } ) ;
229+ const htmlPath = normalizePath ( `${ exampleBaseFileName } ) ;
220230
221- for ( const fileName of this . exampleData . files ) {
231+ for ( let fileName of this . exampleData . files ) {
222232 // Since the additional files refer to the original file name, we need to transform
223233 // the file name to match the highlighted HTML file that displays the source.
224234 const fileSourceName = fileName . replace ( fileExtensionRegex , '$1-$2.html' ) ;
225235 const importPath = `${ docsContentPath } ${ fileSourceName } ;
226236
227- if ( fileName === `${ exampleBaseFileName } ) {
237+ // Normalize the path to allow for more consistent displaying in the tabs,
238+ // and to make comparisons below more reliable.
239+ fileName = normalizePath ( fileName ) ;
240+
241+ if ( fileName === tsPath ) {
228242 this . exampleTabs [ 'TS' ] = importPath ;
229- } else if ( fileName === ` ${ exampleBaseFileName } .css` ) {
243+ } else if ( fileName === cssPath ) {
230244 this . exampleTabs [ 'CSS' ] = importPath ;
231- } else if ( fileName === ` ${ exampleBaseFileName } .html` ) {
245+ } else if ( fileName === htmlPath ) {
232246 this . exampleTabs [ 'HTML' ] = importPath ;
233247 } else {
234248 this . exampleTabs [ fileName ] = importPath ;
0 commit comments