create-sitecore-jss 21.2.1 → 21.2.2

package/dist/templates/angular/sitecore/definitions/components/graph-ql-integrated-demo.sitecore.graphql

@@ -1,71 +1,71 @@
-# This file contains a GraphQL query that will be executed and the result provided to
-# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
-
-# Note that we're executing _two queries_ (datasource and contextItem)
-# within the context of the IntegratedDemoQuery _operation_. This makes it
-# very efficient at gathering data from multiple sources.
-
-query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
-  # Datasource query
-  # $datasource will always be set to the ID of the rendering's datasource item
-  # (as long as the GraphQLData helper is used)
-  datasource: item(path: $datasource, language: $language) {
-    id
-    name
-    # Strongly-typed querying on known templates is possible!
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
-      # Single-line text field
-      sample1 {
-        # the 'jsonValue' field is a JSON blob that represents the object that
-        # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jsonValue
-        value
-      }
-      # General Link field
-      sample2 {
-        jsonValue
-        # Structured querying of the field's values is possible
-        text
-        target
-        url
-        # Access to the template definition is possible
-        definition {
-          type
-          shared
-        }
-      }
-    }
-  }
-
-  # Context/route item query
-  # $contextItem will always be set to the ID of the current context item (the route item)
-  # (as long as the GraphQLData helper is used)
-  contextItem: item(path: $contextItem, language: $language) {
-    id
-    # Get the page title from the app route template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-      pageTitle {
-        value
-      }
-    }
-
-    # List the children of the current route
-    children(hasLayout: true) {
-      results {
-        id
-        # typing fragments can be used anywhere!
-        # so in this case, we're grabbing the 'pageTitle'
-        # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-          pageTitle {
-            jsonValue
-            value
-          }
-        }
-        url {
-          path
-        }
-      }
-    }
-  }
-}
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the IntegratedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource will always be set to the ID of the rendering's datasource item
+  # (as long as the GraphQLData helper is used)
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
+      # Single-line text field
+      sample1 {
+        # the 'jsonValue' field is a JSON blob that represents the object that
+        # should be passed to JSS field rendering helpers (i.e. text, image, link)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem will always be set to the ID of the current context item (the route item)
+  # (as long as the GraphQLData helper is used)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url {
+          path
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular/sitecore/gitignore

@@ -1,3 +1,3 @@
-manifest
-update-package
+manifest
+update-package
 package

package/dist/templates/angular/src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

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

@@ -1,4 +1,4 @@
-<div class="contentBlock">
-  <h2 class="contentTitle" *scText="rendering.fields.heading"></h2>
-  <div class="contentDescription" *scRichText="rendering.fields.content"></div>
-</div>
+<div class="contentBlock">
+  <h2 class="contentTitle" *scText="rendering.fields.heading"></h2>
+  <div class="contentDescription" *scRichText="rendering.fields.content"></div>
+</div>

package/dist/templates/angular/src/app/components/gitignore

@@ -1,7 +1,7 @@
-# App component module is auto-generated by default.
-# To manually maintain the module,
-# - Remove this ignore file
-# - Delete /scripts/generate-component-factory.ts
-# - Remove the reference from /scripts/bootstrap.ts
-# - Consider merging app-components.shared and app-components modules
-app-components.module.ts
+# App component module is auto-generated by default.
+# To manually maintain the module,
+# - Remove this ignore file
+# - Delete /scripts/generate-component-factory.ts
+# - Remove the reference from /scripts/bootstrap.ts
+# - Consider merging app-components.shared and app-components modules
+app-components.module.ts

package/dist/templates/angular/src/app/components/graph-ql-connected-demo/graph-ql-connected-demo.component.graphql

@@ -1,69 +1,69 @@
-# This file contains a GraphQL query that will be executed and the result provided to
-# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
-
-# Note that we're executing _two queries_ (datasource and contextItem)
-# within the context of the ConnectedDemoQuery _operation_. This makes it
-# very efficient at gathering data from multiple sources.
-
-query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
-  # Datasource query
-  # $datasource should be set to the ID of the rendering's datasource item
-  datasource: item(path: $datasource, language: $language) {
-    id
-    name
-    # Strongly-typed querying on known templates is possible!
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo {
-      # Single-line text field
-      sample1 {
-        # the 'jsonValue' field is a JSON blob that represents the object that
-        # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jsonValue
-        value
-      }
-      # General Link field
-      sample2 {
-        jsonValue
-        # Structured querying of the field's values is possible
-        text
-        target
-        url
-        # Access to the template definition is possible
-        definition {
-          type
-          shared
-        }
-      }
-    }
-  }
-
-  # Context/route item query
-  # $contextItem should be set to the ID of the current context item (the route item)
-  contextItem: item(path: $contextItem, language: $language) {
-    id
-    # Get the page title from the app route template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-      pageTitle {
-        value
-      }
-    }
-
-    # List the children of the current route
-    children(hasLayout: true) {
-      results {
-        id
-        # typing fragments can be used anywhere!
-        # so in this case, we're grabbing the 'pageTitle'
-        # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-          pageTitle {
-            jsonValue
-            value
-          }
-        }
-        url {
-          path
-        }
-      }
-    }
-  }
-}
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the ConnectedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource should be set to the ID of the rendering's datasource item
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo {
+      # Single-line text field
+      sample1 {
+        # the 'jsonValue' field is a JSON blob that represents the object that
+        # should be passed to JSS field rendering helpers (i.e. text, image, link)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem should be set to the ID of the current context item (the route item)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url {
+          path
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular/src/app/components/graph-ql-connected-demo/graph-ql-connected-demo.component.html

@@ -1,55 +1,55 @@
-<div data-e2e-id="graphql-connected">
-  <h2>GraphQL Connected Demo</h2>
-
-  <p>
-    Connected GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint.
-    You can review the query execution in the browser devtools network tab. Note that Apollo
-    Client maintains a query cache - so the same query will not execute twice (i.e. after route
-    changes) unless either the page is refreshed, or the <em>fetch policy</em> is set to not use
-    the cache. Consult the Apollo documentation for details.
-  </p>
-
-  <div *ngIf="query$ | async as queryResult; else loading">
-    <div>
-      <h4>Datasource Item (via Connected GraphQL)</h4>
-      id: {{ queryResult.data.datasource.id }}
-      <br />
-      name: {{ queryResult.data.datasource.name }}
-      <br />
-      sample1: {{ queryResult.data.datasource.sample1.value }}
-      <br />
-      sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
-      <br />
-      sample2:<br />
-      <ul>
-        <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
-        <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
-        <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
-        <li>
-          editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
-        </li>
-        <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
-        <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
-      </ul>
-    </div>
-
-    <div>
-      <h4>Route Item (via Connected GraphQL)</h4>
-      id: {{ queryResult.data.contextItem.id }}
-      <br />
-      page title: {{ queryResult.data.contextItem.pageTitle.value }}
-      <br />
-      children:
-      <ul>
-        <li *ngFor="let child of queryResult.data.contextItem.children.results">
-          <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
-          (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
-        </li>
-      </ul>
-    </div>
-  </div>
-
-  <ng-template #loading>
-    <p class="alert alert-info">GraphQL query is loading...</p>
-  </ng-template>
-</div>
+<div data-e2e-id="graphql-connected">
+  <h2>GraphQL Connected Demo</h2>
+
+  <p>
+    Connected GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint.
+    You can review the query execution in the browser devtools network tab. Note that Apollo
+    Client maintains a query cache - so the same query will not execute twice (i.e. after route
+    changes) unless either the page is refreshed, or the <em>fetch policy</em> is set to not use
+    the cache. Consult the Apollo documentation for details.
+  </p>
+
+  <div *ngIf="query$ | async as queryResult; else loading">
+    <div>
+      <h4>Datasource Item (via Connected GraphQL)</h4>
+      id: {{ queryResult.data.datasource.id }}
+      <br />
+      name: {{ queryResult.data.datasource.name }}
+      <br />
+      sample1: {{ queryResult.data.datasource.sample1.value }}
+      <br />
+      sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
+      <br />
+      sample2:<br />
+      <ul>
+        <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
+        <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
+        <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
+        <li>
+          editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
+        </li>
+        <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
+        <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
+      </ul>
+    </div>
+
+    <div>
+      <h4>Route Item (via Connected GraphQL)</h4>
+      id: {{ queryResult.data.contextItem.id }}
+      <br />
+      page title: {{ queryResult.data.contextItem.pageTitle.value }}
+      <br />
+      children:
+      <ul>
+        <li *ngFor="let child of queryResult.data.contextItem.children.results">
+          <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
+          (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <ng-template #loading>
+    <p class="alert alert-info">GraphQL query is loading...</p>
+  </ng-template>
+</div>

package/dist/templates/angular/src/app/components/graph-ql-integrated-demo/graph-ql-integrated-demo.component.html

@@ -1,47 +1,47 @@
-<div data-e2e-id="graphql-integrated">
-  <h2>GraphQL Integrated Demo</h2>
-
-  <p>
-    Integrated GraphQL executes GraphQL queries within the Layout Service endpoint, and merges
-    the query results into the Layout Service result JSON. The query results can be seen by
-    inspecting the Layout Service response in the browser devtools network tab.
-  </p>
-
-  <div>
-    <h4>Datasource Item (via Integrated GraphQL)</h4>
-    id: {{ queryResult.data.datasource.id }}
-    <br />
-    name: {{ queryResult.data.datasource.name }}
-    <br />
-    sample1: {{ queryResult.data.datasource.sample1.value }}
-    <br />
-    sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
-    <br />
-    sample2:<br />
-    <ul>
-      <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
-      <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
-      <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
-      <li>
-        editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
-      </li>
-      <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
-      <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
-    </ul>
-  </div>
-
-  <div>
-    <h4>Route Item (via Integrated GraphQL)</h4>
-    id: {{ queryResult.data.contextItem.id }}
-    <br />
-    page title: {{ queryResult.data.contextItem.pageTitle.value }}
-    <br />
-    children:
-    <ul>
-      <li *ngFor="let child of queryResult.data.contextItem.children.results">
-        <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
-        (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
-      </li>
-    </ul>
-  </div>
-</div>
+<div data-e2e-id="graphql-integrated">
+  <h2>GraphQL Integrated Demo</h2>
+
+  <p>
+    Integrated GraphQL executes GraphQL queries within the Layout Service endpoint, and merges
+    the query results into the Layout Service result JSON. The query results can be seen by
+    inspecting the Layout Service response in the browser devtools network tab.
+  </p>
+
+  <div>
+    <h4>Datasource Item (via Integrated GraphQL)</h4>
+    id: {{ queryResult.data.datasource.id }}
+    <br />
+    name: {{ queryResult.data.datasource.name }}
+    <br />
+    sample1: {{ queryResult.data.datasource.sample1.value }}
+    <br />
+    sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
+    <br />
+    sample2:<br />
+    <ul>
+      <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
+      <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
+      <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
+      <li>
+        editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
+      </li>
+      <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
+      <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
+    </ul>
+  </div>
+
+  <div>
+    <h4>Route Item (via Integrated GraphQL)</h4>
+    id: {{ queryResult.data.contextItem.id }}
+    <br />
+    page title: {{ queryResult.data.contextItem.pageTitle.value }}
+    <br />
+    children:
+    <ul>
+      <li *ngFor="let child of queryResult.data.contextItem.children.results">
+        <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
+        (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
+      </li>
+    </ul>
+  </div>
+</div>

package/dist/templates/angular/src/app/components/graph-ql-layout/graph-ql-layout.component.html

@@ -1,22 +1,22 @@
-<div data-e2e-id="graphql-layout">
-  <ng-container *ngIf="disconnectedMode">
-    <p>
-      This app is running in disconnected mode. GraphQL requires connected mode, headless connected
-      mode, or integrated mode to work.
-    </p>
-    <p>
-      Libraries such as <code>graphql-tools</code> can provide GraphQL API mocking capabilities,
-      which could enable disconnected GraphQL. This is not supported out of the box, however.
-    </p>
-    <p>
-      To view the GraphQL samples, restart the app using <code>jss start:connected</code>&nbsp; or
-      deploy the app to Sitecore to run in integrated mode per the JSS documentation.
-    </p>
-  </ng-container>
-  <ng-container *ngIf="!disconnectedMode">
-    <sc-placeholder
-      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout"
-      [rendering]="rendering"
-    ></sc-placeholder>
-  </ng-container>
-</div>
+<div data-e2e-id="graphql-layout">
+  <ng-container *ngIf="disconnectedMode">
+    <p>
+      This app is running in disconnected mode. GraphQL requires connected mode, headless connected
+      mode, or integrated mode to work.
+    </p>
+    <p>
+      Libraries such as <code>graphql-tools</code> can provide GraphQL API mocking capabilities,
+      which could enable disconnected GraphQL. This is not supported out of the box, however.
+    </p>
+    <p>
+      To view the GraphQL samples, restart the app using <code>jss start:connected</code>&nbsp; or
+      deploy the app to Sitecore to run in integrated mode per the JSS documentation.
+    </p>
+  </ng-container>
+  <ng-container *ngIf="!disconnectedMode">
+    <sc-placeholder
+      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout"
+      [rendering]="rendering"
+    ></sc-placeholder>
+  </ng-container>
+</div>

package/dist/templates/angular/src/app/components/styleguide-angular-lazy-loading/styleguide-angular-lazy-loading.component.html

@@ -1,5 +1,5 @@
-<app-styleguide-specimen [rendering]="rendering">
-  <p>JSS can <em>lazy-load</em> Angular components. This removes them from the main app JS bundle, reducing its size. Lazy-loading is very good for components that are used on few routes, since they are not downloaded until used on a route. This can greatly improve initial page load times.</p>
-  <p>This works very similarly to route-based Angular lazy-loading, but for an individual component. The component has its own Angular module defined for it, and the loader is added as lazy instead.</p>
-  <p>To see this lazy loading working, inspect network traffic in your browser's dev tools, and look for <code>styleguide-angular-lazy-loading-styleguide-angular-lazy-loading-module.js</code> (in production mode, the file name will be hash value), which is the request that loads this component's JS.</p>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering">
+  <p>JSS can <em>lazy-load</em> Angular components. This removes them from the main app JS bundle, reducing its size. Lazy-loading is very good for components that are used on few routes, since they are not downloaded until used on a route. This can greatly improve initial page load times.</p>
+  <p>This works very similarly to route-based Angular lazy-loading, but for an individual component. The component has its own Angular module defined for it, and the loader is added as lazy instead.</p>
+  <p>To see this lazy loading working, inspect network traffic in your browser's dev tools, and look for <code>styleguide-angular-lazy-loading-styleguide-angular-lazy-loading-module.js</code> (in production mode, the file name will be hash value), which is the request that loads this component's JS.</p>
+</app-styleguide-specimen>

package/dist/templates/angular/src/app/components/styleguide-component-params/styleguide-component-params.component.html

@@ -1,19 +1,19 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-componentparams">
-  <p class="{{ cssClass }}">
-    The CSS class of this paragraph (<code>{{ cssClass }}</code>) is set using a param
-  </p>
-  <div>
-    <!-- Note that all params come in as string values, like this boolean-like param here: -->
-    useCallToAction param: <code>{{ useCta }}</code>
-    <br />
-    param type: <code>{{ useCtaType }}</code>
-    <!-- because the param is a string, you need to compare it as a string - if(`useCta`) won't work correctly. -->
-    <div *ngIf="useCta === 'true'" class="alert alert-info">the call to action is shown</div>
-  </div>
-  <p>columns param: {{ columns }}</p>
-  <div class="row">
-    <div class="col-sm" *ngFor="let column of columnsArray">
-      Column {{ column }}
-    </div>
-  </div>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-componentparams">
+  <p class="{{ cssClass }}">
+    The CSS class of this paragraph (<code>{{ cssClass }}</code>) is set using a param
+  </p>
+  <div>
+    <!-- Note that all params come in as string values, like this boolean-like param here: -->
+    useCallToAction param: <code>{{ useCta }}</code>
+    <br />
+    param type: <code>{{ useCtaType }}</code>
+    <!-- because the param is a string, you need to compare it as a string - if(`useCta`) won't work correctly. -->
+    <div *ngIf="useCta === 'true'" class="alert alert-info">the call to action is shown</div>
+  </div>
+  <p>columns param: {{ columns }}</p>
+  <div class="row">
+    <div class="col-sm" *ngFor="let column of columnsArray">
+      Column {{ column }}
+    </div>
+  </div>
+</app-styleguide-specimen>