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

package/dist/templates/angular-sxp/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-sxp/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-sxp/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-sxp/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>

package/dist/templates/angular-sxp/src/app/components/styleguide-custom-route-type/styleguide-custom-route-type.component.html

@@ -1,14 +1,14 @@
-
-<div data-e2e-id="styleguide-customroutetype">
-  <h3 *scText="contextFields.headline"></h3>
-
-  <p>
-    <em>
-      By <span *scText="contextFields.author"></span>
-    </em>
-  </p>
-
-  <div *scRichText="contextFields.content"></div>
-
-  <a routerLink="/styleguide">Return to the Styleguide</a>
-</div>
+
+<div data-e2e-id="styleguide-customroutetype">
+  <h3 *scText="contextFields.headline"></h3>
+
+  <p>
+    <em>
+      By <span *scText="contextFields.author"></span>
+    </em>
+  </p>
+
+  <div *scRichText="contextFields.content"></div>
+
+  <a routerLink="/styleguide">Return to the Styleguide</a>
+</div>

package/dist/templates/angular-sxp/src/app/components/styleguide-edit-frame/styleguide-edit-frame.component.html

@@ -1,20 +1,20 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-edit-frame">
-  <sc-edit-frame [dataSource]="editFrameProps.dataSource"
-    [buttons]="editFrameProps.buttons"
-    [title]="editFrameProps.title"
-    [tooltip]="editFrameProps.tooltip"
-    [cssClass]="editFrameProps.cssClass"
-    [parameters]="editFrameProps.parameters"
-    [sitecore]="context">
-    This is the content that will be wrapped by edit frame in Experience Editor.<br/>
-    Try out the custom webedit buttons for a variety of tasks like executing javascript, or webedit commands. <br/>
-    Or use field edit buttons to author fields that are not usually editable in Experience Editor.<br/>
-    <br/>
-    <p [ngStyle]="{'color': (applyRed ? 'red': 'blue')}">This text will change color. Use the field edit button to change its appearance</p>
-    This list can be changed via field editor:
-    <ul>
-      <li *ngFor="let contentItem of rendering.fields.sampleList">{{contentItem.fields.title?.value}}</li>
-    </ul>
-    <ng-content></ng-content>
-  </sc-edit-frame>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-edit-frame">
+  <sc-edit-frame [dataSource]="editFrameProps.dataSource"
+    [buttons]="editFrameProps.buttons"
+    [title]="editFrameProps.title"
+    [tooltip]="editFrameProps.tooltip"
+    [cssClass]="editFrameProps.cssClass"
+    [parameters]="editFrameProps.parameters"
+    [sitecore]="context">
+    This is the content that will be wrapped by edit frame in Experience Editor.<br/>
+    Try out the custom webedit buttons for a variety of tasks like executing javascript, or webedit commands. <br/>
+    Or use field edit buttons to author fields that are not usually editable in Experience Editor.<br/>
+    <br/>
+    <p [ngStyle]="{'color': (applyRed ? 'red': 'blue')}">This text will change color. Use the field edit button to change its appearance</p>
+    This list can be changed via field editor:
+    <ul>
+      <li *ngFor="let contentItem of rendering.fields.sampleList">{{contentItem.fields.title?.value}}</li>
+    </ul>
+    <ng-content></ng-content>
+  </sc-edit-frame>
 </app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-checkbox/styleguide-field-usage-checkbox.component.html

@@ -1,11 +1,11 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-checkbox">
-  <!-- Checkbox fields do not have the ability to be inline edited, so they are directly accessed via their value: -->
-    <ul>
-      <li>
-        <code>checkbox</code> is {{ checkbox1Value }}
-      </li>
-      <li>
-        <code>checkbox2</code> is {{ checkbox2Value }}
-      </li>
-    </ul>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-checkbox">
+  <!-- Checkbox fields do not have the ability to be inline edited, so they are directly accessed via their value: -->
+    <ul>
+      <li>
+        <code>checkbox</code> is {{ checkbox1Value }}
+      </li>
+      <li>
+        <code>checkbox2</code> is {{ checkbox2Value }}
+      </li>
+    </ul>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-content-list/styleguide-field-usage-content-list.component.html

@@ -1,26 +1,26 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-content-list">
-  <h5>Shared Content List</h5>
-  <!--
-  Content list fields are returned with their value as an array of the referenced items.
-  So we can use the .map() array function to traverse them. Ensure a `key` attribute is set
-  on each element to make React's DOM updating happy:
-  -->
-  <ng-container *ngIf="rendering.fields.sharedContentList">
-    <div *ngFor="let listItem of rendering.fields.sharedContentList">
-      <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
-      <p>
-        Field: <span *scText="listItem.fields.textField"></span>
-      </p>
-    </div>
-  </ng-container>
-
-  <h5>Local Content List</h5>
-  <ng-container *ngIf="rendering.fields.localContentList">
-    <div *ngFor="let listItem of rendering.fields.localContentList">
-      <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
-      <p>
-        Field: <span *scText="listItem.fields.textField"></span>
-      </p>
-    </div>
-  </ng-container>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-content-list">
+  <h5>Shared Content List</h5>
+  <!--
+  Content list fields are returned with their value as an array of the referenced items.
+  So we can use the .map() array function to traverse them. Ensure a `key` attribute is set
+  on each element to make React's DOM updating happy:
+  -->
+  <ng-container *ngIf="rendering.fields.sharedContentList">
+    <div *ngFor="let listItem of rendering.fields.sharedContentList">
+      <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
+      <p>
+        Field: <span *scText="listItem.fields.textField"></span>
+      </p>
+    </div>
+  </ng-container>
+
+  <h5>Local Content List</h5>
+  <ng-container *ngIf="rendering.fields.localContentList">
+    <div *ngFor="let listItem of rendering.fields.localContentList">
+      <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
+      <p>
+        Field: <span *scText="listItem.fields.textField"></span>
+      </p>
+    </div>
+  </ng-container>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-custom/styleguide-field-usage-custom.component.html

@@ -1,4 +1,4 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-custom">
-  <!-- Because the integer field is essentially text, we can render it with the *scText helper -->
-  <span *scText="rendering.fields.customIntField"></span>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-custom">
+  <!-- Because the integer field is essentially text, we can render it with the *scText helper -->
+  <span *scText="rendering.fields.customIntField"></span>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-date/styleguide-field-usage-date.component.html

@@ -1,27 +1,27 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-date">
-  <ul>
-    <li>
-      <!--
-        The format and timezone here give us an identical output to React and Vue JSS apps;
-        Angular defaults to a local date format in the current timezone if no format/timezone is set,
-        which makes testing unpredictable.
-      -->
-      Date directive (date field): <span *scDate="rendering.fields.date; format: isoDateFormat; timezone: utcTimezone;"></span>
-    </li>
-    <li>
-      Date directive (dateTime field): <span *scDate="rendering.fields.dateTime; format: isoDateFormat; timezone: utcTimezone;"></span>
-    </li>
-    <li>
-      <!--
-        IMPORTANT: When editing the date in Experience Editor, the format, timezone, and locale options are ignored.
-        The formatting options only apply when previewing or viewing the page in normal mode.
-      -->
-      Date formatting (same parameters as <a href="https://angular.io/api/common/DatePipe">date pipe</a>):&nbsp;
-      <span *scDate="rendering.fields.date; format: 'full'"></span>
-    </li>
-    <li>
-      Time zones and locales:&nbsp;
-      <span *scDate="rendering.fields.date; format: 'full'; timezone: '-0400'; locale: 'en-US'"></span>
-    </li>
-  </ul>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-date">
+  <ul>
+    <li>
+      <!--
+        The format and timezone here give us an identical output to React and Vue JSS apps;
+        Angular defaults to a local date format in the current timezone if no format/timezone is set,
+        which makes testing unpredictable.
+      -->
+      Date directive (date field): <span *scDate="rendering.fields.date; format: isoDateFormat; timezone: utcTimezone;"></span>
+    </li>
+    <li>
+      Date directive (dateTime field): <span *scDate="rendering.fields.dateTime; format: isoDateFormat; timezone: utcTimezone;"></span>
+    </li>
+    <li>
+      <!--
+        IMPORTANT: When editing the date in Experience Editor, the format, timezone, and locale options are ignored.
+        The formatting options only apply when previewing or viewing the page in normal mode.
+      -->
+      Date formatting (same parameters as <a href="https://angular.io/api/common/DatePipe">date pipe</a>):&nbsp;
+      <span *scDate="rendering.fields.date; format: 'full'"></span>
+    </li>
+    <li>
+      Time zones and locales:&nbsp;
+      <span *scDate="rendering.fields.date; format: 'full'; timezone: '-0400'; locale: 'en-US'"></span>
+    </li>
+  </ul>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-file/styleguide-field-usage-file.component.html

@@ -1,10 +1,10 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-file">
-  <!-- Renders a file link -->
-    <a *scFile="rendering.fields.file"></a>
-    <br />
-
-  <!-- Renders a file link with a custom body and opening in a new tab -->
-  <a *scFile="rendering.fields.file" target="_blank">
-    Custom link body
-  </a>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-file">
+  <!-- Renders a file link -->
+    <a *scFile="rendering.fields.file"></a>
+    <br />
+
+  <!-- Renders a file link with a custom body and opening in a new tab -->
+  <a *scFile="rendering.fields.file" target="_blank">
+    Custom link body
+  </a>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-image/styleguide-field-usage-image.component.html

@@ -1,30 +1,30 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-image">
-  <p>Plain image</p>
-  <img *scImage="rendering.fields.sample1" />
-
-  <!--
-    Advanced image usage example
-    editable: controls whether image can be edited in Sitecore Experience Editor
-    urlParams: parameters that are passed to Sitecore to perform server-side resizing of the image.
-      IMPORTANT: urlParams must be whitelisted for resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
-    any other attributes: pass through to img tag
-  -->
-  <p>Advanced image (not editable)</p>
-  <img *scImage="rendering.fields.sample2; editable: false; urlParams: scaledImageParams"
-    height="50"
-    width="94"
-    data-sample="other-attributes-pass-through"
-  />
-
-  <!--
-    Srcset adaptive image usage example
-    Adaptive srcsets are supported using Sitecore server-side resizing.
-    Setting `attrs.srcSet` can use Sitecore image resizing parameters (i.e. w, h, mw, mh). See the .ts file for implementation.
-    IMPORTANT: srcSet params must be whitelisted for adaptive resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
-  -->
-  <p>Srcset responsive image</p>
-  <img *scImage="rendering.fields.sample2; attrs: srcSetImageAttributes"
-    sizes="(min-width: 960px) 300px, 100px"
-    class="img-fluid"
-  />
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-image">
+  <p>Plain image</p>
+  <img *scImage="rendering.fields.sample1" />
+
+  <!--
+    Advanced image usage example
+    editable: controls whether image can be edited in Sitecore Experience Editor
+    urlParams: parameters that are passed to Sitecore to perform server-side resizing of the image.
+      IMPORTANT: urlParams must be whitelisted for resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
+    any other attributes: pass through to img tag
+  -->
+  <p>Advanced image (not editable)</p>
+  <img *scImage="rendering.fields.sample2; editable: false; urlParams: scaledImageParams"
+    height="50"
+    width="94"
+    data-sample="other-attributes-pass-through"
+  />
+
+  <!--
+    Srcset adaptive image usage example
+    Adaptive srcsets are supported using Sitecore server-side resizing.
+    Setting `attrs.srcSet` can use Sitecore image resizing parameters (i.e. w, h, mw, mh). See the .ts file for implementation.
+    IMPORTANT: srcSet params must be whitelisted for adaptive resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
+  -->
+  <p>Srcset responsive image</p>
+  <img *scImage="rendering.fields.sample2; attrs: srcSetImageAttributes"
+    sizes="(min-width: 960px) 300px, 100px"
+    class="img-fluid"
+  />
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-item-link/styleguide-field-usage-item-link.component.html

@@ -1,17 +1,17 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-itemlink">
-  <h5>Shared Item Link</h5>
-  <!-- Item link fields are returned with their value as the referenced item value. -->
-  <ng-container *ngIf="rendering.fields.sharedItemLink">
-    <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
-    <p>
-      Field: <span *scText="rendering.fields.sharedItemLink.fields.textField"></span>
-    </p>
-  </ng-container>
-
-  <h5>Local Item Link</h5>
-  <ng-container *ngIf="rendering.fields.localItemLink">
-    <p>
-      Field: <span *scText="rendering.fields.localItemLink.fields.textField"></span>
-    </p>
-  </ng-container>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-itemlink">
+  <h5>Shared Item Link</h5>
+  <!-- Item link fields are returned with their value as the referenced item value. -->
+  <ng-container *ngIf="rendering.fields.sharedItemLink">
+    <!-- The referenced item's fields can be rendered and edited using normal helper components: -->
+    <p>
+      Field: <span *scText="rendering.fields.sharedItemLink.fields.textField"></span>
+    </p>
+  </ng-container>
+
+  <h5>Local Item Link</h5>
+  <ng-container *ngIf="rendering.fields.localItemLink">
+    <p>
+      Field: <span *scText="rendering.fields.localItemLink.fields.textField"></span>
+    </p>
+  </ng-container>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-field-usage-link/styleguide-field-usage-link.component.html

@@ -1,44 +1,44 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-link">
-  External link:&nbsp;
-  <a *scLink="rendering.fields.externalLink"></a>
-  <br />
-  Internal link:&nbsp;
-  <a *scLink="rendering.fields.internalLink">
-    <em>HTML</em> or other components can be used within link renderers, for example links to
-    images.
-    <!--
-      IMPORTANT: When using other components as a link body,
-      be aware that when using Experience Editor to edit the link,
-      it will render differently than it will in normal or preview modes.
-      Due to technical limitations, it will render like:
-      <span class="sc-link-wrapper">
-        <a href="#">this link is editable</a>
-      </span>
-      <a href="#">Link body components</a>
-
-      When not editing, the same component would render as:
-      <a href="#">Link body components</a>
-    -->
-  </a>
-  <br />
-  Email link:&nbsp;
-  <a *scLink="rendering.fields.emailLink"></a>
-  <br />
-  All possible content params link:&nbsp;
-  <a *scLink="rendering.fields.paramsLink"></a>
-  <br />
-  The link component accepts params of its own:&nbsp;
-  <a *scLink="rendering.fields.externalLink; attrs: linkDynamicAttributes"
-    class="fw-bold"
-    data-otherattributes="pass-through-to-anchor-tag"
-  ></a>
-  <br />
-  Link using Angular routing for the target:
-  <a *scRouterLink="rendering.fields.internalLink">Router link to /</a>
-
-  Link using both internal and Angular routing links for the target:
-  <a *scGenericLink="rendering.fields.internalLink">Generic internal link</a>
-  <a *scGenericLink="rendering.fields.externalLink">Generic external link </a>
-  <a *scGenericLink="rendering.fields.emailLink">Generic email link</a>
-  <a *scGenericLink="rendering.fields.paramsLink">Generic parameterized link</a>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-link">
+  External link:&nbsp;
+  <a *scLink="rendering.fields.externalLink"></a>
+  <br />
+  Internal link:&nbsp;
+  <a *scLink="rendering.fields.internalLink">
+    <em>HTML</em> or other components can be used within link renderers, for example links to
+    images.
+    <!--
+      IMPORTANT: When using other components as a link body,
+      be aware that when using Experience Editor to edit the link,
+      it will render differently than it will in normal or preview modes.
+      Due to technical limitations, it will render like:
+      <span class="sc-link-wrapper">
+        <a href="#">this link is editable</a>
+      </span>
+      <a href="#">Link body components</a>
+
+      When not editing, the same component would render as:
+      <a href="#">Link body components</a>
+    -->
+  </a>
+  <br />
+  Email link:&nbsp;
+  <a *scLink="rendering.fields.emailLink"></a>
+  <br />
+  All possible content params link:&nbsp;
+  <a *scLink="rendering.fields.paramsLink"></a>
+  <br />
+  The link component accepts params of its own:&nbsp;
+  <a *scLink="rendering.fields.externalLink; attrs: linkDynamicAttributes"
+    class="fw-bold"
+    data-otherattributes="pass-through-to-anchor-tag"
+  ></a>
+  <br />
+  Link using Angular routing for the target:
+  <a *scRouterLink="rendering.fields.internalLink">Router link to /</a>
+
+  Link using both internal and Angular routing links for the target:
+  <a *scGenericLink="rendering.fields.internalLink">Generic internal link</a>
+  <a *scGenericLink="rendering.fields.externalLink">Generic external link </a>
+  <a *scGenericLink="rendering.fields.emailLink">Generic email link</a>
+  <a *scGenericLink="rendering.fields.paramsLink">Generic parameterized link</a>
+</app-styleguide-specimen>