create-sitecore-jss 22.6.0-canary.9 → 22.7.0-canary.1

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>

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

@@ -1,11 +1,11 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-number">
-  <!-- Basic emission of a number field for editing can be done with the *scText component. -->
-  <p *scText="rendering.fields.sample"></p>
-
-  <!-- Direct access to the value, which is a JS number, is also supported. -->
-  <p>
-    JS value type: {{ valueType }}
-    <br />
-    JS value: {{ fieldValue }}
-  </p>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-number">
+  <!-- Basic emission of a number field for editing can be done with the *scText component. -->
+  <p *scText="rendering.fields.sample"></p>
+
+  <!-- Direct access to the value, which is a JS number, is also supported. -->
+  <p>
+    JS value type: {{ valueType }}
+    <br />
+    JS value: {{ fieldValue }}
+  </p>
+</app-styleguide-specimen>

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

@@ -1,11 +1,11 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-richtext">
-  <!-- Basic use of a rich text field. Wraps in a <div>. -->
-  <div *scRichText="rendering.fields.sample"></div>
-
-  <!-- Advanced usage of rich text field. Specifies a custom wrapper tag, turns off Sitecore editing, and has a CSS class on the wrapper -->
-  <section *scRichText="rendering.fields.sample2; editable: false"
-    clas="text-center"
-    data-sample="other-attributes-pass-through"
-  >
-  </section>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-richtext">
+  <!-- Basic use of a rich text field. Wraps in a <div>. -->
+  <div *scRichText="rendering.fields.sample"></div>
+
+  <!-- Advanced usage of rich text field. Specifies a custom wrapper tag, turns off Sitecore editing, and has a CSS class on the wrapper -->
+  <section *scRichText="rendering.fields.sample2; editable: false"
+    clas="text-center"
+    data-sample="other-attributes-pass-through"
+  >
+  </section>
+</app-styleguide-specimen>

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

@@ -1,13 +1,13 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-text">
-  <!-- Basic use of a text field. -->
-  <p *scText="rendering.fields.sample"></p>
-
-  <!-- Advanced usage of text field. Turns off Sitecore editing, supports raw HTML, and has a CSS class on the wrapper -->
-  <section
-    *scText="rendering.fields.sample2; encode: false; editable: false"
-    class="fw-bold"
-    data-sample="other-attributes-pass-through"
-  ></section>
-
-  <div>Raw value (not editable): {{rawFieldValue}}</div>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-fieldusage-text">
+  <!-- Basic use of a text field. -->
+  <p *scText="rendering.fields.sample"></p>
+
+  <!-- Advanced usage of text field. Turns off Sitecore editing, supports raw HTML, and has a CSS class on the wrapper -->
+  <section
+    *scText="rendering.fields.sample2; encode: false; editable: false"
+    class="fw-bold"
+    data-sample="other-attributes-pass-through"
+  ></section>
+
+  <div>Raw value (not editable): {{rawFieldValue}}</div>
+</app-styleguide-specimen>

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

@@ -1,20 +1,20 @@
-<div class="row">
-  <div class="col-sm-8 col-lg-10">
-    <sc-placeholder
-      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout"
-      [rendering]="rendering"
-    ></sc-placeholder>
-  </div>
-  <div class="col-sm-4 col-lg-2 order-sm-first pt-2">
-    <nav *ngFor="let section of navigation" class="nav flex-column pt-2">
-      <a [href]="'/styleguide#' + section.id" class="nav-item fw-bold">
-        {{ section.heading }}
-      </a>
-      <nav *ngFor="let topic of section.children" class="nav flex-column">
-        <a [href]="'/styleguide#' + topic.id">
-          {{ topic.heading }}
-        </a>
-      </nav>
-    </nav>
-  </div>
-</div>
+<div class="row">
+  <div class="col-sm-8 col-lg-10">
+    <sc-placeholder
+      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout"
+      [rendering]="rendering"
+    ></sc-placeholder>
+  </div>
+  <div class="col-sm-4 col-lg-2 order-sm-first pt-2">
+    <nav *ngFor="let section of navigation" class="nav flex-column pt-2">
+      <a [href]="'/styleguide#' + section.id" class="nav-item fw-bold">
+        {{ section.heading }}
+      </a>
+      <nav *ngFor="let topic of section.children" class="nav flex-column">
+        <a [href]="'/styleguide#' + topic.id">
+          {{ topic.heading }}
+        </a>
+      </nav>
+    </nav>
+  </div>
+</div>

package/dist/templates/angular-sxp/src/app/components/styleguide-layout-reuse/styleguide-layout-reuse.component.html

@@ -1,52 +1,52 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-layout-reuse">
-  <!--
-      This placeholder is:
-      - Using the `sc-placeholder` attribute to avoid rendering a wrapping tag of its own, so that Bootstrap's columns will work
-          (.row > sc-placeholder > .col-sm will not layout with flexbox, but .row > .col-sm will)
-      - Using templating to enable customizing the markup for each component within. In this case, it's placing each component
-        in its own column of a flexbox layout - giving an n-up columnar layout. The component itself does not need to know that
-        it's living in a columnar layout.
-    -->
-  <div
-    class="row"
-    sc-placeholder
-    name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-reuse-example"
-    [rendering]="rendering"
-  >
-    <!--
-        Customized component rendering
-        You can customize the rendering of each component in this placeholder using the renderEach template.
-        This technique is useful for things like flexible column layouts (like this one), or to wrap each component
-        in <li>, or otherwise alter the component rendering from outside the component itself.
-
-        If you need to know the index of the rendering, you can add 'let-index="index"' to the ng-template
-        Remove the template entirely to use default component rendering (no wrappers, etc)
-      -->
-    <ng-template renderEach let-rendering="rendering">
-      <div class="col-sm">
-        <!-- renders a single component like a placeholder does, based on the component data -->
-        <sc-render-component [rendering]="rendering"></sc-render-component>
-      </div>
-    </ng-template>
-    <!--
-        Customized empty placeholder rendering
-        When using renderEach, in some situations an _empty placeholder_ (with no components in it)
-        may not be editable in the Sitecore Experience Editor. In this example, because of the use
-        of flexbox by the bootstrap columns, adding a bare <div> for the selectable empty placeholder
-        results in it being hidden as it does not have a column class.
-
-        Using the renderEmpty template allows us to customize the rendering of an empty placeholder
-        and place it within a column div so that we can select it correctly.
-      -->
-    <ng-template renderEmpty let-renderings="renderings">
-      <div class="col-sm">
-        <!--
-            The empty placeholder is rendered with another sc-placeholder, but using the
-            renderings (plural) input instead of rendering. In this mode, it accepts a
-            raw component data array, and name is unnecessary.
-          -->
-        <sc-placeholder [renderings]="renderings"></sc-placeholder>
-      </div>
-    </ng-template>
-  </div>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-layout-reuse">
+  <!--
+      This placeholder is:
+      - Using the `sc-placeholder` attribute to avoid rendering a wrapping tag of its own, so that Bootstrap's columns will work
+          (.row > sc-placeholder > .col-sm will not layout with flexbox, but .row > .col-sm will)
+      - Using templating to enable customizing the markup for each component within. In this case, it's placing each component
+        in its own column of a flexbox layout - giving an n-up columnar layout. The component itself does not need to know that
+        it's living in a columnar layout.
+    -->
+  <div
+    class="row"
+    sc-placeholder
+    name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-reuse-example"
+    [rendering]="rendering"
+  >
+    <!--
+        Customized component rendering
+        You can customize the rendering of each component in this placeholder using the renderEach template.
+        This technique is useful for things like flexible column layouts (like this one), or to wrap each component
+        in <li>, or otherwise alter the component rendering from outside the component itself.
+
+        If you need to know the index of the rendering, you can add 'let-index="index"' to the ng-template
+        Remove the template entirely to use default component rendering (no wrappers, etc)
+      -->
+    <ng-template renderEach let-rendering="rendering">
+      <div class="col-sm">
+        <!-- renders a single component like a placeholder does, based on the component data -->
+        <sc-render-component [rendering]="rendering"></sc-render-component>
+      </div>
+    </ng-template>
+    <!--
+        Customized empty placeholder rendering
+        When using renderEach, in some situations an _empty placeholder_ (with no components in it)
+        may not be editable in the Sitecore Experience Editor. In this example, because of the use
+        of flexbox by the bootstrap columns, adding a bare <div> for the selectable empty placeholder
+        results in it being hidden as it does not have a column class.
+
+        Using the renderEmpty template allows us to customize the rendering of an empty placeholder
+        and place it within a column div so that we can select it correctly.
+      -->
+    <ng-template renderEmpty let-renderings="renderings">
+      <div class="col-sm">
+        <!--
+            The empty placeholder is rendered with another sc-placeholder, but using the
+            renderings (plural) input instead of rendering. In this mode, it accepts a
+            raw component data array, and name is unnecessary.
+          -->
+        <sc-placeholder [renderings]="renderings"></sc-placeholder>
+      </div>
+    </ng-template>
+  </div>
+</app-styleguide-specimen>