create-sitecore-jss 22.2.1 → 22.3.0-canary.10

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

package/dist/templates/{angular → angular-sxp}/src/app/components/styleguide-layout-tabs/styleguide-layout-tabs.component.html

@@ -1,37 +1,37 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-layout-tabs">
-  <!--
-    When the page is editing, we hide the tab headings, because they are not updated when xEditor adds or removes a tab rendering.
-    Instead, we show the tab header inline with the tab contents (see styleguide-layout-tabs-tab).
-  -->
-  <ul class="nav nav-tabs" *ngIf="!isEditing">
-    <li class="nav-item" *ngFor="let tab of tabs">
-      <a
-        [ngClass]="{ 'nav-link': true, active: tab === activeTab }"
-        (click)="activeTab = tab; (false)"
-        href="#"
-      >
-        <span *scText="tab.fields.title"></span>
-      </a>
-    </li>
-  </ul>
-  <div class="p-3 border-left border-right border-bottom">
-    <ng-container *ngIf="isEditing">
-      <!--
-        When experience editor is active we want to render all tabs in a stack,
-        to simplify editing.
-      -->
-      <sc-placeholder
-        name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs"
-        [rendering]="rendering"
-      ></sc-placeholder>
-    </ng-container>
-    <ng-container *ngIf="!isEditing">
-      <!--
-        We only want to render the _active_ tab when we're not editing.
-        sc-render-component renders a _single_ component given its data,
-        allowing us to partially render the placeholder contents.
-      -->
-      <sc-render-component [rendering]="activeTab"></sc-render-component>
-    </ng-container>
-  </div>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-layout-tabs">
+  <!--
+    When the page is editing, we hide the tab headings, because they are not updated when xEditor adds or removes a tab rendering.
+    Instead, we show the tab header inline with the tab contents (see styleguide-layout-tabs-tab).
+  -->
+  <ul class="nav nav-tabs" *ngIf="!isEditing">
+    <li class="nav-item" *ngFor="let tab of tabs">
+      <a
+        [ngClass]="{ 'nav-link': true, active: tab === activeTab }"
+        (click)="activeTab = tab; (false)"
+        href="#"
+      >
+        <span *scText="tab.fields.title"></span>
+      </a>
+    </li>
+  </ul>
+  <div class="p-3 border-left border-right border-bottom">
+    <ng-container *ngIf="isEditing">
+      <!--
+        When experience editor is active we want to render all tabs in a stack,
+        to simplify editing.
+      -->
+      <sc-placeholder
+        name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs"
+        [rendering]="rendering"
+      ></sc-placeholder>
+    </ng-container>
+    <ng-container *ngIf="!isEditing">
+      <!--
+        We only want to render the _active_ tab when we're not editing.
+        sc-render-component renders a _single_ component given its data,
+        allowing us to partially render the placeholder contents.
+      -->
+      <sc-render-component [rendering]="activeTab"></sc-render-component>
+    </ng-container>
+  </div>
+</app-styleguide-specimen>

package/dist/templates/{angular → angular-sxp}/src/app/components/styleguide-layout-tabs-tab/styleguide-layout-tabs-tab.component.html

@@ -1,12 +1,12 @@
-<!--
-  When we're editing the tabs we stack each tab vertically,
-  which means there's no regular tab titles rendered.
-  So we conditionally render the tab title here, when editing.
--->
-<div data-e2e-class="styleguide-layout-tabs-tab">
-  <ng-container *ngIf="isEditing">
-    <h5 *scText="rendering.fields.title"></h5>
-  </ng-container>
-
-  <div *scRichText="rendering.fields.content"></div>
-</div>
+<!--
+  When we're editing the tabs we stack each tab vertically,
+  which means there's no regular tab titles rendered.
+  So we conditionally render the tab title here, when editing.
+-->
+<div data-e2e-class="styleguide-layout-tabs-tab">
+  <ng-container *ngIf="isEditing">
+    <h5 *scText="rendering.fields.title"></h5>
+  </ng-container>
+
+  <div *scRichText="rendering.fields.content"></div>
+</div>

package/dist/templates/{angular → angular-sxp}/src/app/components/styleguide-multilingual/styleguide-multilingual.component.html

@@ -1,15 +1,15 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-multilingual">
-  <p *scText="rendering.fields.sample; encode: false;"></p>
-
-  <p>
-    This is a static dictionary entry from <code>/data/dictionary</code>: {{ 'styleguide-sample' | translate }}
-  </p>
-
-  <p>
-    <a routerLink="/en/styleguide" (click)="switchLanguage($event)">Show in English</a>
-    <br />
-    <a routerLink="/<%- language %>/styleguide" (click)="switchLanguage($event)">Show in <%- language %></a>
-  </p>
-
-  <p>The current language is: {{ translate.currentLang }}</p>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-multilingual">
+  <p *scText="rendering.fields.sample; encode: false;"></p>
+
+  <p>
+    This is a static dictionary entry from <code>/data/dictionary</code>: {{ 'styleguide-sample' | translate }}
+  </p>
+
+  <p>
+    <a routerLink="/en/styleguide" (click)="switchLanguage($event)">Show in English</a>
+    <br />
+    <a routerLink="/<%- language %>/styleguide" (click)="switchLanguage($event)">Show in <%- language %></a>
+  </p>
+
+  <p>The current language is: {{ translate.currentLang }}</p>
+</app-styleguide-specimen>

package/dist/templates/{angular → angular-sxp}/src/app/components/styleguide-route-fields/styleguide-route-fields.component.html

@@ -1,8 +1,8 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-route-fields">
-  Route level <code>pageTitle</code> field:
-  <span *scText="contextFields.pageTitle"></span>
-
-  <p>
-    <a routerLink="/styleguide/custom-route-type">Sample of using a custom route type</a>
-  </p>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-route-fields">
+  Route level <code>pageTitle</code> field:
+  <span *scText="contextFields.pageTitle"></span>
+
+  <p>
+    <a routerLink="/styleguide/custom-route-type">Sample of using a custom route type</a>
+  </p>
+</app-styleguide-specimen>

package/dist/templates/{angular → angular-sxp}/src/app/components/styleguide-section/styleguide-section.component.html

@@ -1,7 +1,7 @@
-<div class="pt-3" [id]="id">
-  <h3 class="border-bottom" *scText="rendering.fields.heading"></h3>
-  <sc-placeholder
-    name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section"
-    [rendering]="rendering"
-  ></sc-placeholder>
-</div>
+<div class="pt-3" [id]="id">
+  <h3 class="border-bottom" *scText="rendering.fields.heading"></h3>
+  <sc-placeholder
+    name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section"
+    [rendering]="rendering"
+  ></sc-placeholder>
+</div>

package/dist/templates/{angular → angular-sxp}/src/app/components/styleguide-sitecore-context/styleguide-sitecore-context.component.html

@@ -1,3 +1,3 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-sitecore-context">
-    <p>The current Sitecore Context has been logged to the console.</p>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-sitecore-context">
+    <p>The current Sitecore Context has been logged to the console.</p>
+</app-styleguide-specimen>