create-sitecore-jss 22.10.0-canary.9 → 22.10.0

package/dist/templates/angular/src/app/components/app-components.shared.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
+import { StyleguideSpecimenComponent } from './shared/styleguide-specimen/styleguide-specimen.component';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 /*
@@ -13,8 +14,20 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
   Don't want code generation? See ./.gitignore for instructions to turn it off.
 */
 @NgModule({
-  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
-  exports: [CommonModule, TranslateModule, RouterModule, FormsModule],
-  declarations: [],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    JssModule,
+    FormsModule,
+    StyleguideSpecimenComponent
+  ],
+  exports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    FormsModule,
+    StyleguideSpecimenComponent
+  ],
 })
 export class AppComponentsSharedModule {}

package/dist/templates/angular/src/app/components/content-block/content-block.component.ts

@@ -1,9 +1,10 @@
 import { Component, Input } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentRendering, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 @Component({
   selector: 'app-content-block',
   templateUrl: './content-block.component.html',
+  imports: [JssModule]
 })
 export class ContentBlockComponent {
   @Input() rendering: ComponentRendering;

package/dist/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @angular-eslint/prefer-inject */
 import { Injectable, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
 import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
@@ -8,8 +9,8 @@ import { dictionaryStateKey } from './jss-translation-server-loader.service';
 @Injectable()
 export class JssTranslationClientLoaderService implements TranslateLoader {
   constructor(
-    private fallbackLoader: JssTranslationLoaderService,
-    private transferState: TransferState
+    protected fallbackLoader: JssTranslationLoaderService,
+    protected transferState: TransferState
   ) {}
 
   getTranslation(lang: string): Observable<DictionaryPhrases> {

package/dist/templates/angular/src/app/i18n/jss-translation-server-loader.service.ts

@@ -1,7 +1,9 @@
-import { Inject, Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
+/* eslint-disable @angular-eslint/prefer-inject */
+import { Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
 import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
 import { of as observableOf, EMPTY } from 'rxjs';
+import { ViewBag } from '../ViewBag';
 
 export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<DictionaryPhrases>(
   'dictionary'
@@ -11,10 +13,10 @@ export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<Dict
 export class JssTranslationServerLoaderService implements TranslateLoader {
   constructor(
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
-    @Inject('JSS_SERVER_VIEWBAG')
-    private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
-    private transferState: TransferState
+    protected serverViewBag: ViewBag,
+    protected transferState: TransferState
   ) {}
+
   getTranslation(_lang: string) {
     // read initial dictionary from data injected via server.bundle wrapper
     const dictionary = this.serverViewBag.dictionary;

package/dist/templates/angular/src/app/injection-tokens.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { InMemoryCache } from '@apollo/client/core';
+import { JssState } from './JssState';
+import { ViewBag } from './ViewBag';
+
+/**
+ * Injection token for server-side layout data provided by server.bundle
+ */
+export const JSS_SERVER_LAYOUT_DATA = new InjectionToken<JssState>('JSS_SERVER_LAYOUT_DATA');
+
+export const JSS_SERVER_VIEWBAG = new InjectionToken<ViewBag>('JSS_SERVER_VIEWBAG');
+
+export const APOLLO_CACHE = new InjectionToken<InMemoryCache>('APOLLO_CACHE');

package/dist/templates/angular/src/app/jss-context.server-side.service.ts

@@ -1,9 +1,10 @@
-import { Injectable, Inject, TransferState } from '@angular/core';
+import { Injectable, inject, TransferState } from '@angular/core';
 import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
 import { JssLayoutService } from './layout/jss-layout.service';
 import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
+import { JSS_SERVER_LAYOUT_DATA } from './injection-tokens';
 
 /**
  * Stores the JSS app's context (current route and Sitecore context data).
@@ -12,15 +13,12 @@ import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
  */
 @Injectable()
 export class JssContextServerSideService extends JssContextService {
-  constructor(
-    protected transferState: TransferState,
-    protected layoutService: JssLayoutService,
-    protected stateService: JssStateService<JssState>,
-    // this initial state from sitecore is injected by server.bundle for "integrated" mode
-    @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
-  ) {
-    super(transferState, layoutService, stateService);
-  }
+  protected transferState = inject(TransferState);
+  protected layoutService = inject(JssLayoutService);
+  // this initial state from sitecore is injected by server.bundle for "integrated" mode
+  protected stateService = inject(JssStateService<JssState>);
+  protected serverToSsrState = inject(JSS_SERVER_LAYOUT_DATA);
+
   changeRoute(_route: string, _language: string): Observable<JssState> {
     // console.log('Server route change to ' + route);
 

package/dist/templates/angular/src/app/jss-context.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, TransferState, makeStateKey } from '@angular/core';
+import { Injectable, TransferState, makeStateKey, inject } from '@angular/core';
 import { LayoutServiceData, JssStateService } from '@sitecore-jss/sitecore-jss-angular';
 import { map, shareReplay, catchError } from 'rxjs/operators';
 import { Observable, of as observableOf } from 'rxjs';
@@ -22,8 +22,10 @@ export class JssContextService {
   get stateValue() {
     return this.stateService.stateValue;
   }
-  constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService<JssState>) {
-  }
+
+  protected transferState = inject(TransferState);
+  protected layoutService = inject(JssLayoutService);
+  protected stateService = inject(JssStateService<JssState>);
 
   changeLanguage(language: string) {
     this.stateService.setState({ ...this.stateService.stateValue, language });
@@ -63,7 +65,7 @@ export class JssContextService {
     );
 
     // subscribe to it ourselves so we can maintain current state
-    jssState$.subscribe((jssState) => {
+    jssState$.subscribe((jssState: JssState) => {
       this.stateService.setState(jssState);
     });
 

package/dist/templates/angular/src/app/jss-graphql.module.ts

@@ -1,7 +1,7 @@
-import { makeStateKey, TransferState, NgModule, PLATFORM_ID, Inject } from '@angular/core';
+import { makeStateKey, TransferState, NgModule, PLATFORM_ID, inject } from '@angular/core';
 import { HttpClientModule, HttpHeaders } from '@angular/common/http';
 import { InMemoryCache, NormalizedCacheObject, PossibleTypesMap } from '@apollo/client/core';
-import { Apollo, ApolloModule } from 'apollo-angular';
+import { Apollo, provideApollo } from 'apollo-angular';
 import { HttpBatchLink } from 'apollo-angular/http';
 import { isPlatformServer } from '@angular/common';
 import { environment } from '../environments/environment';
@@ -14,28 +14,73 @@ import { JssGraphQLService } from './jss-graphql.service';
   If this file does not exist, you may need to run the `jss graphql:update` script.
 */
 import introspectionQueryResultData from '../graphql-fragment-types';
+import { APOLLO_CACHE } from './injection-tokens';
 
 // SSR transfer state key to serialize + rehydrate apollo cache on client side
 // See https://www.apollographql.com/docs/angular/recipes/server-side-rendering.html
 const STATE_KEY = makeStateKey<NormalizedCacheObject>('apollo.state');
 
+const getGraphQLCache = () => {
+  const possibleTypes = {} as PossibleTypesMap;
+  introspectionQueryResultData.__schema.types.forEach((supertype) => {
+    possibleTypes[supertype.name] = supertype.possibleTypes.map((subtype) => subtype.name);
+  });
+  return new InMemoryCache({
+    possibleTypes,
+  });
+};
+
+const getApolloOptions = () => {
+  const httpLink = inject(HttpBatchLink);
+  const platformId = inject(PLATFORM_ID);
+  /*
+  QUERY LINK SELECTION
+  A link is transport which GraphQL queries are pushed across.
+  You have many choices.
+  See the apollo-link documentation for more details.
+*/
+
+  // set sc_apikey header which is required for any GraphQL calls
+  const sc_apikey = new HttpHeaders().set('sc_apikey', environment.sitecoreApiKey);
+
+  // choose between a basic HTTP link to run queries...
+  // import { createHttpLink } from 'apollo-angular-link-http';
+  // const link = createHttpLink({ uri: endpoint });
+
+  // ...or a batched link (multiple queries within 10ms all go in one HTTP request)
+  const batchHttp = httpLink.create({
+    uri: environment.graphQLEndpoint,
+    headers: sc_apikey,
+  });
+
+  const cache = inject(APOLLO_CACHE);
+
+  return {
+    link: batchHttp,
+    cache,
+    ssrMode: isPlatformServer(platformId),
+    ssrForceFetchDelay: 100,
+  };
+}
+
 @NgModule({
   imports: [
-    ApolloModule,
     HttpClientModule, // provides HttpClient for HttpLink
   ],
-  providers: [JssGraphQLService],
+  providers: [
+    JssGraphQLService,
+    { provide: APOLLO_CACHE, useValue: getGraphQLCache() },
+    provideApollo(getApolloOptions),
+  ],
 })
 export class GraphQLModule {
-  constructor(
-    private readonly apollo: Apollo,
-    private readonly httpLink: HttpBatchLink,
-    private readonly transferState: TransferState,
-    @Inject(PLATFORM_ID) private readonly platformId: string
-  ) {
-    this.createApolloClient();
+  constructor() {
+    this.addCacheEvents();
   }
 
+  private readonly transferState = inject(TransferState);
+  apolloClient = inject(Apollo);
+
   onServer(cache: InMemoryCache) {
     this.transferState.onSerialize(STATE_KEY, () => cache.extract());
   }
@@ -46,43 +91,8 @@ export class GraphQLModule {
     cache.restore(state);
   }
 
-  private createApolloClient(): void {
-    /*
-      QUERY LINK SELECTION
-      A link is transport which GraphQL queries are pushed across.
-      You have many choices.
-      See the apollo-link documentation for more details.
-    */
-
-    // set sc_apikey header which is required for any GraphQL calls
-    const sc_apikey = new HttpHeaders().set('sc_apikey', environment.sitecoreApiKey);
-
-    // choose between a basic HTTP link to run queries...
-    // import { createHttpLink } from 'apollo-angular-link-http';
-    // const link = createHttpLink({ uri: endpoint });
-
-    // ...or a batched link (multiple queries within 10ms all go in one HTTP request)
-    const batchHttp = this.httpLink.create({
-      uri: environment.graphQLEndpoint,
-      headers: sc_apikey,
-    });
-
-    const possibleTypes = {} as PossibleTypesMap;
-
-    introspectionQueryResultData.__schema.types.forEach((supertype) => {
-      possibleTypes[supertype.name] = supertype.possibleTypes.map((subtype) => subtype.name);
-    });
-
-    const cache = new InMemoryCache({
-      possibleTypes,
-    });
-
-    this.apollo.create({
-      link: batchHttp,
-      cache,
-      ssrMode: isPlatformServer(this.platformId),
-      ssrForceFetchDelay: 100,
-    });
+  private addCacheEvents(): void {
+    const cache = inject(APOLLO_CACHE);
 
     const isBrowser = this.transferState.hasKey(STATE_KEY);
 

package/dist/templates/angular/src/app/jss-graphql.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, PLATFORM_ID, Inject, } from '@angular/core';
+import { Injectable, PLATFORM_ID, inject, } from '@angular/core';
 import { Apollo } from 'apollo-angular';
 import { ExtraSubscriptionOptions, EmptyObject, MutationResult } from 'apollo-angular/types';
 import {
@@ -36,16 +36,16 @@ export interface JssGraphQLOptions {
 export class JssGraphQLService {
   private isEditingOrPreviewingAndSsr: boolean;
 
-  constructor(
-    private readonly apollo: Apollo,
-    private readonly sitecoreContext: JssContextService,
-    @Inject(PLATFORM_ID) private readonly platformId: string,
-  ) {
+  constructor() {
     this.isEditingOrPreviewingAndSsr =
       isPlatformServer(this.platformId) &&
       this.sitecoreContext.stateValue.sitecore.context.pageState !== 'normal';
   }
 
+  protected apollo = inject(Apollo);
+  protected sitecoreContext = inject(JssContextService);
+  protected platformId = inject(PLATFORM_ID);
+
   private static extractVariableNames(query: DocumentNode) {
     const variableNames: { [key: string]: boolean } = {};
     query.definitions

package/dist/templates/angular/src/app/jss-meta.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 
 export interface MetaSettings {
@@ -7,7 +7,8 @@ export interface MetaSettings {
 
 @Injectable()
 export class JssMetaService {
-  constructor(private titleService: Title, private meta: Meta) {}
+  protected titleService = inject(Title);
+  protected meta = inject(Meta);
 
   setTitle(title?: string) {
     this.titleService.setTitle(title);

package/dist/templates/angular/src/app/routing/layout/layout.component.ts

@@ -1,10 +1,15 @@
 /* eslint-disable no-shadow, no-console */
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { RouteData, Field, LayoutServiceContextData } from '@sitecore-jss/sitecore-jss-angular';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouteData, Field, LayoutServiceContextData, JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { JssState } from '../../JssState';
 import { JssMetaService } from '../../jss-meta.service';
+import { NotFoundComponent } from '../not-found/not-found.component';
+import { ServerErrorComponent } from '../server-error/server-error.component';
+import { ScriptsComponent } from '../scripts/scripts.component';
+import { NavigationComponent } from '../navigation/navigation.component';
 
 enum LayoutState {
   Layout,
@@ -20,6 +25,7 @@ interface RouteFields {
 @Component({
   selector: 'app-layout',
   templateUrl: './layout.component.html',
+  imports: [CommonModule, JssModule, NotFoundComponent, ServerErrorComponent, ScriptsComponent, NavigationComponent]
 })
 export class LayoutComponent implements OnInit, OnDestroy {
   route: RouteData<RouteFields>;
@@ -27,8 +33,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
   LayoutState = LayoutState;
   subscription: Subscription;
   errorContextData: LayoutServiceContextData;
-
-  constructor(private activatedRoute: ActivatedRoute, private readonly meta: JssMetaService) {}
+  private activatedRoute = inject(ActivatedRoute);
+  private readonly meta = inject(JssMetaService);
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver

package/dist/templates/angular/src/app/routing/navigation/navigation.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
+  imports: [RouterModule, TranslateModule]
 })
 export class NavigationComponent {}

package/dist/templates/angular/src/app/routing/not-found/not-found.component.ts

@@ -3,7 +3,7 @@ import { LayoutServiceContextData } from '@sitecore-jss/sitecore-jss-angular';
 
 @Component({
   selector: 'app-not-found',
-  templateUrl: './not-found.component.html',
+  templateUrl: './not-found.component.html'
 })
 export class NotFoundComponent {
   @Input() errorContextData: LayoutServiceContextData;

package/dist/templates/angular/src/app/routing/routing.module.ts

@@ -7,9 +7,7 @@ import { jssRouteResolver } from './jss-route-resolver.service';
 import { JssRouteBuilderService } from './jss-route-builder.service';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { BrowserModule } from '@angular/platform-browser';
-import { NavigationComponent } from './navigation/navigation.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { ScriptsModule } from './scripts/scripts.module';
 
 export function jssRouteMatcher(url: UrlSegment[]): UrlMatchResult {
   // use the route builder to parse out language / server route
@@ -54,10 +52,11 @@ const routes: Routes = [
     JssModule,
     TranslateModule,
     BrowserModule,
-    ScriptsModule,
+    LayoutComponent,
+    NotFoundComponent,
+    ServerErrorComponent,
   ],
   exports: [RouterModule, TranslateModule],
-  declarations: [NotFoundComponent, ServerErrorComponent, LayoutComponent, NavigationComponent],
   providers: [JssRouteBuilderService],
 })
 export class RoutingModule {}

package/dist/templates/angular/src/app/routing/scripts/scripts.module.ts

@@ -3,6 +3,6 @@ import { ScriptsComponent } from './scripts.component';
 
 @NgModule({
   exports: [ScriptsComponent],
-  declarations: [ScriptsComponent],
+  imports: [ScriptsComponent],
 })
 export class ScriptsModule {}

package/dist/templates/angular/src/assets/images/sc_logo.svg

@@ -1,52 +1,52 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg width="221px" height="48px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 668 143.7" style="enable-background:new 0 0 668 143.7;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#EB1F1F;}
-</style>
-<path d="M645.5,98.1V85.8h-27.6V73.5h24.7V62h-24.7V50.8H644V38.7h-39.9v59.4C604.1,98.1,645.5,98.1,645.5,98.1z M570.7,60.6
-	c-0.6,0.9-1.5,1.7-2.5,2.2c-1.1,0.5-2.2,0.8-3.4,1s-2.4,0.3-3.6,0.3h-6.8V50.3h7.7c1.1,0,2.2,0.1,3.3,0.2c1.1,0.2,2.1,0.5,3.1,1
-	c0.9,0.5,1.7,1.2,2.3,2c0.6,1,0.9,2.2,0.9,3.4C571.7,58.2,571.4,59.5,570.7,60.6 M589,98.1l-15.5-25.4c3.6-1,6.8-3,9.1-5.9
-	c2.2-2.9,3.4-6.5,3.3-10.2c0.1-2.9-0.6-5.9-1.9-8.5c-1.2-2.2-3-4.1-5.2-5.5s-4.7-2.5-7.3-3c-2.7-0.6-5.5-0.9-8.3-0.9h-22.6v59.4h14
-	V74.5h4.9l12.9,23.6H589z M508.1,75.6c-0.8,2.1-2,4.1-3.5,5.8c-1.5,1.6-3.4,2.9-5.4,3.8c-4.4,1.9-9.4,1.9-13.8,0
-	c-2-0.9-3.8-2.2-5.3-3.8c-1.5-1.7-2.7-3.7-3.5-5.8c-1.7-4.7-1.7-9.9,0-14.6c0.7-2.1,1.9-4.1,3.5-5.7c3.2-3.3,7.6-5.2,12.2-5.2
-	c2.4,0,4.7,0.4,6.9,1.4c2,0.9,3.9,2.2,5.4,3.8c1.5,1.7,2.7,3.6,3.5,5.7c0.9,2.3,1.3,4.7,1.3,7.2C509.4,70.7,509,73.2,508.1,75.6
-	 M522.3,55.3c-1.5-3.7-3.8-7.1-6.8-9.8s-6.5-4.8-10.3-6.2c-8.4-2.9-17.4-2.9-25.8,0c-3.8,1.4-7.2,3.5-10.2,6.2
-	c-2.9,2.8-5.2,6.1-6.8,9.8c-1.7,4.1-2.5,8.5-2.4,12.9c0,4.4,0.8,8.7,2.4,12.8c1.5,3.8,3.8,7.2,6.8,10c2.9,2.8,6.4,5,10.2,6.4
-	c8.3,3,17.5,3,25.8,0c3.8-1.4,7.3-3.6,10.3-6.4c2.9-2.8,5.2-6.2,6.8-10c1.7-4.1,2.5-8.5,2.4-12.9C524.8,63.7,523.9,59.4,522.3,55.3
-	 M451.4,89.8l-10-9.4c-1.4,1.8-3.1,3.3-5.1,4.4c-2.3,1.2-4.9,1.7-7.5,1.7c-2.3,0-4.6-0.4-6.8-1.3c-2-0.9-3.8-2.1-5.3-3.7
-	c-1.5-1.7-2.7-3.6-3.5-5.7c-0.9-2.4-1.3-4.9-1.3-7.4s0.4-4.9,1.3-7.2c0.8-2.1,2-4.1,3.5-5.8c1.5-1.6,3.4-2.9,5.4-3.8
-	c2.2-0.9,4.5-1.4,6.9-1.4c2.3,0,4.6,0.5,6.7,1.3c2.1,0.9,4,2.3,5.3,4.2l9.7-9.7c-2.7-3-6.1-5.2-9.9-6.5c-8.1-2.9-16.9-2.9-25,0
-	c-3.8,1.3-7.3,3.4-10.3,6.2c-2.9,2.8-5.3,6.2-6.8,9.9c-1.7,4.1-2.5,8.5-2.5,12.9c-0.1,4.4,0.8,8.7,2.4,12.7
-	c3.1,7.6,9.2,13.5,16.9,16.4c4.1,1.5,8.4,2.3,12.7,2.3c4.6,0.1,9.1-0.8,13.3-2.6C445.3,95.5,448.6,92.9,451.4,89.8 M383,98.1V85.8
-	h-27.6V73.5H380V62h-24.6V50.8h26.1V38.7h-39.9v59.4L383,98.1z M325.8,50.9V38.7h-47.9v12.2h16.8V98H309V50.9H325.8z M262.2,38.7
-	h-14.4v59.4h14.4V38.7z M230.3,44.5c-2.7-2.4-5.8-4.3-9.2-5.4c-3.3-1.2-6.8-1.8-10.3-1.8c-2.8,0-5.6,0.3-8.3,1
-	c-2.6,0.7-5.1,1.8-7.4,3.4c-2.2,1.5-4,3.5-5.3,5.8c-1.4,2.6-2.1,5.5-2,8.5c-0.2,4.4,1.5,8.6,4.7,11.6c1.4,1.3,3.1,2.4,4.9,3.2
-	c1.8,0.8,3.7,1.6,5.6,2.2c2,0.6,3.7,1.2,5.2,1.7c1.4,0.4,2.7,1,3.9,1.8c0.9,0.6,1.7,1.3,2.4,2.1c0.6,0.8,0.9,1.8,0.8,2.8
-	c0,1-0.2,2.1-0.7,3c-0.4,0.8-1,1.5-1.8,2s-1.7,0.9-2.6,1.1c-1,0.2-2.1,0.3-3.1,0.3c-2.5,0-4.9-0.6-7.1-1.8c-2.2-1.1-4.2-2.6-5.7-4.5
-	l-9.4,9.6c2.8,2.8,6.2,5,9.9,6.3c3.9,1.5,8.1,2.3,12.3,2.3c2.9,0,5.7-0.4,8.5-1.2c2.6-0.7,5.1-2,7.3-3.6c2.1-1.7,3.8-3.8,5-6.2
-	c1.3-2.7,2-5.8,1.9-8.8c0.1-2.6-0.5-5.2-1.8-7.4c-1.1-1.9-2.6-3.6-4.4-5c-1.8-1.4-3.8-2.4-5.9-3.2c-2.2-0.8-4.3-1.6-6.3-2.2
-	c-1.4-0.4-2.7-0.9-3.8-1.3c-1-0.4-2-0.8-2.9-1.4c-1.5-0.9-2.5-2.5-2.4-4.3c0-1,0.2-2,0.8-2.9c0.5-0.7,1.2-1.4,2-1.8
-	c0.8-0.5,1.7-0.8,2.6-1c1-0.2,1.9-0.2,2.9-0.2c4.1,0.1,7.9,2,10.5,5.1L230.3,44.5z"/>
-<path class="st0" d="M68.6,104.8c5.6-0.7,11.1-2.4,16-5.2c12.1-6.8,19.1-18.4,19.7-32.7l0.1-1.2h16.8c-1-8.3-4.2-16.2-9.1-23
-	L94.9,53.6c5.2,7.9,5.9,17.9,1.9,26.4C92.1,90.8,81,100.2,68.6,104.8"/>
-<path class="st0" d="M121.4,68.2h-14.6c-1,14.5-8.6,26.7-21,33.6c-7.2,3.9-15.2,6-23.4,5.9c-6.5,0-13-1.2-19.1-3.5
-	c7.3,4.7,15.9,7.2,24.6,7.2H68c15.7,0,30.1-8.5,37.7-22.3l0.7-1.2l9.8,6.2c3.5-6.9,5.4-14.6,5.4-22.4
-	C121.5,70.6,121.5,69.4,121.4,68.2"/>
-<path class="st0" d="M68,114L68,114c-15.7,0-30.4-7.8-40.9-21.1c11.6,24.8,41.2,35.5,65.9,23.8c9.2-4.3,16.9-11.4,22-20.2l-7.6-4.8
-	C99.1,105.6,84.2,114.1,68,114"/>
-<path class="st0" d="M71.9,124c-28.8,0-52.2-23.4-52.2-52.2s23.4-52.2,52.2-52.2s52.2,23.4,52.2,52.2l0,0l0,0
-	C124.1,100.6,100.8,124,71.9,124C72,124,72,124,71.9,124L71.9,124L71.9,124 M71.9,0C32.2,0,0,32.1,0,71.8s32.1,71.9,71.8,71.9
-	s71.9-32.1,71.9-71.8v-0.1C143.7,32.2,111.6,0,71.9,0L71.9,0L71.9,0"/>
-<path d="M660.9,44.3v-1.9h1.1c0.3,0,0.6,0.1,0.9,0.2c0.3,0.1,0.4,0.4,0.4,0.7c0,0.4-0.2,0.7-0.5,0.8c-0.3,0.1-0.6,0.2-1,0.2H660.9z
-	 M659.7,48h1.2v-2.8h0.8l1.5,2.8h1.4l-1.8-2.9c0.5-0.1,0.8-0.3,1.1-0.6c0.3-0.3,0.4-0.7,0.4-1.2c0-0.4-0.1-0.7-0.2-0.9
-	c-0.1-0.2-0.3-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.3c-0.3-0.1-0.6-0.1-0.9-0.1h-2.3V48z M657.5,42.8c0.3-0.6,0.6-1.1,1.1-1.6
-	c0.4-0.4,1-0.8,1.6-1.1c0.6-0.3,1.2-0.4,1.9-0.4c0.7,0,1.3,0.1,1.9,0.4c0.6,0.3,1.1,0.6,1.6,1.1c0.4,0.4,0.8,1,1.1,1.6
-	c0.3,0.6,0.4,1.2,0.4,1.9c0,0.7-0.1,1.3-0.4,1.9c-0.3,0.6-0.6,1.1-1.1,1.6c-0.4,0.5-1,0.8-1.6,1.1c-0.6,0.3-1.2,0.4-1.9,0.4
-	c-0.7,0-1.3-0.1-1.9-0.4c-0.6-0.3-1.1-0.6-1.6-1.1c-0.4-0.5-0.8-1-1.1-1.6c-0.3-0.6-0.4-1.2-0.4-1.9C657.1,44,657.2,43.4,657.5,42.8
-	 M656.6,47c0.3,0.7,0.7,1.3,1.3,1.8c0.5,0.5,1.2,0.9,1.9,1.2c0.7,0.3,1.5,0.4,2.3,0.4s1.6-0.1,2.3-0.4c0.7-0.3,1.3-0.7,1.9-1.2
-	c0.5-0.5,1-1.1,1.3-1.8c0.3-0.7,0.5-1.5,0.5-2.3s-0.2-1.6-0.5-2.3c-0.3-0.7-0.7-1.3-1.3-1.9c-0.5-0.5-1.2-0.9-1.9-1.2
-	c-0.7-0.3-1.5-0.5-2.3-0.5s-1.6,0.2-2.3,0.5c-0.7,0.3-1.3,0.7-1.9,1.2c-0.5,0.5-1,1.1-1.3,1.9c-0.3,0.7-0.5,1.5-0.5,2.3
-	S656.3,46.3,656.6,47"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="221px" height="48px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 668 143.7" style="enable-background:new 0 0 668 143.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#EB1F1F;}
+</style>
+<path d="M645.5,98.1V85.8h-27.6V73.5h24.7V62h-24.7V50.8H644V38.7h-39.9v59.4C604.1,98.1,645.5,98.1,645.5,98.1z M570.7,60.6
+	c-0.6,0.9-1.5,1.7-2.5,2.2c-1.1,0.5-2.2,0.8-3.4,1s-2.4,0.3-3.6,0.3h-6.8V50.3h7.7c1.1,0,2.2,0.1,3.3,0.2c1.1,0.2,2.1,0.5,3.1,1
+	c0.9,0.5,1.7,1.2,2.3,2c0.6,1,0.9,2.2,0.9,3.4C571.7,58.2,571.4,59.5,570.7,60.6 M589,98.1l-15.5-25.4c3.6-1,6.8-3,9.1-5.9
+	c2.2-2.9,3.4-6.5,3.3-10.2c0.1-2.9-0.6-5.9-1.9-8.5c-1.2-2.2-3-4.1-5.2-5.5s-4.7-2.5-7.3-3c-2.7-0.6-5.5-0.9-8.3-0.9h-22.6v59.4h14
+	V74.5h4.9l12.9,23.6H589z M508.1,75.6c-0.8,2.1-2,4.1-3.5,5.8c-1.5,1.6-3.4,2.9-5.4,3.8c-4.4,1.9-9.4,1.9-13.8,0
+	c-2-0.9-3.8-2.2-5.3-3.8c-1.5-1.7-2.7-3.7-3.5-5.8c-1.7-4.7-1.7-9.9,0-14.6c0.7-2.1,1.9-4.1,3.5-5.7c3.2-3.3,7.6-5.2,12.2-5.2
+	c2.4,0,4.7,0.4,6.9,1.4c2,0.9,3.9,2.2,5.4,3.8c1.5,1.7,2.7,3.6,3.5,5.7c0.9,2.3,1.3,4.7,1.3,7.2C509.4,70.7,509,73.2,508.1,75.6
+	 M522.3,55.3c-1.5-3.7-3.8-7.1-6.8-9.8s-6.5-4.8-10.3-6.2c-8.4-2.9-17.4-2.9-25.8,0c-3.8,1.4-7.2,3.5-10.2,6.2
+	c-2.9,2.8-5.2,6.1-6.8,9.8c-1.7,4.1-2.5,8.5-2.4,12.9c0,4.4,0.8,8.7,2.4,12.8c1.5,3.8,3.8,7.2,6.8,10c2.9,2.8,6.4,5,10.2,6.4
+	c8.3,3,17.5,3,25.8,0c3.8-1.4,7.3-3.6,10.3-6.4c2.9-2.8,5.2-6.2,6.8-10c1.7-4.1,2.5-8.5,2.4-12.9C524.8,63.7,523.9,59.4,522.3,55.3
+	 M451.4,89.8l-10-9.4c-1.4,1.8-3.1,3.3-5.1,4.4c-2.3,1.2-4.9,1.7-7.5,1.7c-2.3,0-4.6-0.4-6.8-1.3c-2-0.9-3.8-2.1-5.3-3.7
+	c-1.5-1.7-2.7-3.6-3.5-5.7c-0.9-2.4-1.3-4.9-1.3-7.4s0.4-4.9,1.3-7.2c0.8-2.1,2-4.1,3.5-5.8c1.5-1.6,3.4-2.9,5.4-3.8
+	c2.2-0.9,4.5-1.4,6.9-1.4c2.3,0,4.6,0.5,6.7,1.3c2.1,0.9,4,2.3,5.3,4.2l9.7-9.7c-2.7-3-6.1-5.2-9.9-6.5c-8.1-2.9-16.9-2.9-25,0
+	c-3.8,1.3-7.3,3.4-10.3,6.2c-2.9,2.8-5.3,6.2-6.8,9.9c-1.7,4.1-2.5,8.5-2.5,12.9c-0.1,4.4,0.8,8.7,2.4,12.7
+	c3.1,7.6,9.2,13.5,16.9,16.4c4.1,1.5,8.4,2.3,12.7,2.3c4.6,0.1,9.1-0.8,13.3-2.6C445.3,95.5,448.6,92.9,451.4,89.8 M383,98.1V85.8
+	h-27.6V73.5H380V62h-24.6V50.8h26.1V38.7h-39.9v59.4L383,98.1z M325.8,50.9V38.7h-47.9v12.2h16.8V98H309V50.9H325.8z M262.2,38.7
+	h-14.4v59.4h14.4V38.7z M230.3,44.5c-2.7-2.4-5.8-4.3-9.2-5.4c-3.3-1.2-6.8-1.8-10.3-1.8c-2.8,0-5.6,0.3-8.3,1
+	c-2.6,0.7-5.1,1.8-7.4,3.4c-2.2,1.5-4,3.5-5.3,5.8c-1.4,2.6-2.1,5.5-2,8.5c-0.2,4.4,1.5,8.6,4.7,11.6c1.4,1.3,3.1,2.4,4.9,3.2
+	c1.8,0.8,3.7,1.6,5.6,2.2c2,0.6,3.7,1.2,5.2,1.7c1.4,0.4,2.7,1,3.9,1.8c0.9,0.6,1.7,1.3,2.4,2.1c0.6,0.8,0.9,1.8,0.8,2.8
+	c0,1-0.2,2.1-0.7,3c-0.4,0.8-1,1.5-1.8,2s-1.7,0.9-2.6,1.1c-1,0.2-2.1,0.3-3.1,0.3c-2.5,0-4.9-0.6-7.1-1.8c-2.2-1.1-4.2-2.6-5.7-4.5
+	l-9.4,9.6c2.8,2.8,6.2,5,9.9,6.3c3.9,1.5,8.1,2.3,12.3,2.3c2.9,0,5.7-0.4,8.5-1.2c2.6-0.7,5.1-2,7.3-3.6c2.1-1.7,3.8-3.8,5-6.2
+	c1.3-2.7,2-5.8,1.9-8.8c0.1-2.6-0.5-5.2-1.8-7.4c-1.1-1.9-2.6-3.6-4.4-5c-1.8-1.4-3.8-2.4-5.9-3.2c-2.2-0.8-4.3-1.6-6.3-2.2
+	c-1.4-0.4-2.7-0.9-3.8-1.3c-1-0.4-2-0.8-2.9-1.4c-1.5-0.9-2.5-2.5-2.4-4.3c0-1,0.2-2,0.8-2.9c0.5-0.7,1.2-1.4,2-1.8
+	c0.8-0.5,1.7-0.8,2.6-1c1-0.2,1.9-0.2,2.9-0.2c4.1,0.1,7.9,2,10.5,5.1L230.3,44.5z"/>
+<path class="st0" d="M68.6,104.8c5.6-0.7,11.1-2.4,16-5.2c12.1-6.8,19.1-18.4,19.7-32.7l0.1-1.2h16.8c-1-8.3-4.2-16.2-9.1-23
+	L94.9,53.6c5.2,7.9,5.9,17.9,1.9,26.4C92.1,90.8,81,100.2,68.6,104.8"/>
+<path class="st0" d="M121.4,68.2h-14.6c-1,14.5-8.6,26.7-21,33.6c-7.2,3.9-15.2,6-23.4,5.9c-6.5,0-13-1.2-19.1-3.5
+	c7.3,4.7,15.9,7.2,24.6,7.2H68c15.7,0,30.1-8.5,37.7-22.3l0.7-1.2l9.8,6.2c3.5-6.9,5.4-14.6,5.4-22.4
+	C121.5,70.6,121.5,69.4,121.4,68.2"/>
+<path class="st0" d="M68,114L68,114c-15.7,0-30.4-7.8-40.9-21.1c11.6,24.8,41.2,35.5,65.9,23.8c9.2-4.3,16.9-11.4,22-20.2l-7.6-4.8
+	C99.1,105.6,84.2,114.1,68,114"/>
+<path class="st0" d="M71.9,124c-28.8,0-52.2-23.4-52.2-52.2s23.4-52.2,52.2-52.2s52.2,23.4,52.2,52.2l0,0l0,0
+	C124.1,100.6,100.8,124,71.9,124C72,124,72,124,71.9,124L71.9,124L71.9,124 M71.9,0C32.2,0,0,32.1,0,71.8s32.1,71.9,71.8,71.9
+	s71.9-32.1,71.9-71.8v-0.1C143.7,32.2,111.6,0,71.9,0L71.9,0L71.9,0"/>
+<path d="M660.9,44.3v-1.9h1.1c0.3,0,0.6,0.1,0.9,0.2c0.3,0.1,0.4,0.4,0.4,0.7c0,0.4-0.2,0.7-0.5,0.8c-0.3,0.1-0.6,0.2-1,0.2H660.9z
+	 M659.7,48h1.2v-2.8h0.8l1.5,2.8h1.4l-1.8-2.9c0.5-0.1,0.8-0.3,1.1-0.6c0.3-0.3,0.4-0.7,0.4-1.2c0-0.4-0.1-0.7-0.2-0.9
+	c-0.1-0.2-0.3-0.4-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.3c-0.3-0.1-0.6-0.1-0.9-0.1h-2.3V48z M657.5,42.8c0.3-0.6,0.6-1.1,1.1-1.6
+	c0.4-0.4,1-0.8,1.6-1.1c0.6-0.3,1.2-0.4,1.9-0.4c0.7,0,1.3,0.1,1.9,0.4c0.6,0.3,1.1,0.6,1.6,1.1c0.4,0.4,0.8,1,1.1,1.6
+	c0.3,0.6,0.4,1.2,0.4,1.9c0,0.7-0.1,1.3-0.4,1.9c-0.3,0.6-0.6,1.1-1.1,1.6c-0.4,0.5-1,0.8-1.6,1.1c-0.6,0.3-1.2,0.4-1.9,0.4
+	c-0.7,0-1.3-0.1-1.9-0.4c-0.6-0.3-1.1-0.6-1.6-1.1c-0.4-0.5-0.8-1-1.1-1.6c-0.3-0.6-0.4-1.2-0.4-1.9C657.1,44,657.2,43.4,657.5,42.8
+	 M656.6,47c0.3,0.7,0.7,1.3,1.3,1.8c0.5,0.5,1.2,0.9,1.9,1.2c0.7,0.3,1.5,0.4,2.3,0.4s1.6-0.1,2.3-0.4c0.7-0.3,1.3-0.7,1.9-1.2
+	c0.5-0.5,1-1.1,1.3-1.8c0.3-0.7,0.5-1.5,0.5-2.3s-0.2-1.6-0.5-2.3c-0.3-0.7-0.7-1.3-1.3-1.9c-0.5-0.5-1.2-0.9-1.9-1.2
+	c-0.7-0.3-1.5-0.5-2.3-0.5s-1.6,0.2-2.3,0.5c-0.7,0.3-1.3,0.7-1.9,1.2c-0.5,0.5-1,1.1-1.3,1.9c-0.3,0.7-0.5,1.5-0.5,2.3
+	S656.3,46.3,656.6,47"/>
+</svg>

package/dist/templates/angular-sxp/data/component-content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml

@@ -1,9 +1,9 @@
-# We can reuse this content definition in multiple places because it:
-# - has an ID
-# - is under component-content (normally) or content
-# Reuse is accomplished by referencing the content by ID in a route definition.
-id: lorem-ipsum-content-block
-componentName: ContentBlock
-displayName: Lorem Ipsum Dolor Sit Amet
-fields:
-  content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>
+# We can reuse this content definition in multiple places because it:
+# - has an ID
+# - is under component-content (normally) or content
+# Reuse is accomplished by referencing the content by ID in a route definition.
+id: lorem-ipsum-content-block
+componentName: ContentBlock
+displayName: Lorem Ipsum Dolor Sit Amet
+fields:
+  content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>

package/dist/templates/angular-sxp/data/content/Styleguide/ContentListField/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-content-list-field-shared-1
-displayName: Styleguide Content List Item 1 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
-fields:
-  textField: ContentList Demo (Shared) Item 1 Text Field
+id: styleguide-content-list-field-shared-1
+displayName: Styleguide Content List Item 1 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 1 Text Field

package/dist/templates/angular-sxp/data/content/Styleguide/ContentListField/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-content-list-field-shared-2
-displayName: Styleguide Content List Item 2 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
-fields:
-  textField: ContentList Demo (Shared) Item 2 Text Field
+id: styleguide-content-list-field-shared-2
+displayName: Styleguide Content List Item 2 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 2 Text Field

package/dist/templates/angular-sxp/data/content/Styleguide/EditFrameDemo/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-edit-frame-list-item-1
-displayName: EditFrame Demo List Item 1
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.sitecore.ts
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
-fields:
-  title: Edit Frame Demo List Item 1
+id: styleguide-edit-frame-list-item-1
+displayName: EditFrame Demo List Item 1
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.sitecore.ts
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
+fields:
+  title: Edit Frame Demo List Item 1

package/dist/templates/angular-sxp/data/content/Styleguide/EditFrameDemo/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-edit-frame-list-item-2
-displayName: EditFrame Demo List Item 2
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.ts
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
-fields:
-  title: Edit Frame Demo List Item 2
+id: styleguide-edit-frame-list-item-2
+displayName: EditFrame Demo List Item 2
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.ts
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
+fields:
+  title: Edit Frame Demo List Item 2