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

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

@@ -1,175 +1,175 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-tracking">
-  <p *ngIf="disconnectedMode">The tracking API is only available in connected, integrated, or headless modes.</p>
-
-  <div *ngIf="!disconnectedMode">
-    <p class="alert alert-warning">
-      Note: The JSS tracker API is disabled by default. Consult the <a href="https://jss.sitecore.com/docs/fundamentals/services/tracking">tracking documentation</a> to enable it.
-    </p>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Event</legend>
-        <p>
-          Events are defined in <code>/sitecore/system/Settings/Analytics/Page Events</code>
-        </p>
-        <label htmlFor="event">Event GUID or Name</label>
-        <input type="text" id="event" class="form-control" [(ngModel)]="event" />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitEvent()"
-        >
-          Submit
-        </button>
-      </fieldset>
-
-      <fieldset class="form-group col-sm">
-        <legend>Goal</legend>
-        <p>
-          Goals are defined in <code>/sitecore/system/Marketing Control Panel/Goals</code>
-        </p>
-        <label htmlFor="goal">Goal GUID or Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="goal"
-          name="goal"
-          [(ngModel)]="goal"
-          placeholder="i.e. Register"
-        />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitGoal()"
-        >
-          Submit
-        </button>
-      </fieldset>
-    </div>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Outcome</legend>
-        <p>
-          Outcomes are defined in <code>/sitecore/system/Marketing Control Panel/Outcomes</code>
-        </p>
-        <label htmlFor="outcomeName">Outcome GUID or Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="outcomeName"
-          name="outcomeName"
-          [(ngModel)]="outcomeName"
-          placeholder="i.e. Marketing Lead"
-        />
-        <br />
-        <label htmlFor="outcomeValue">Monetary Value (optional)</label>
-        <input
-          type="number"
-          class="form-control"
-          id="outcomeValue"
-          name="outcomeValue"
-          [(ngModel)]="outcomeValue"
-          placeholder="i.e. 1337.00"
-        />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitOutcome()"
-        >
-          Submit
-        </button>
-      </fieldset>
-
-      <fieldset class="form-group col-sm">
-        <legend>Campaign</legend>
-        <p>
-          Campaigns are defined in <code>/sitecore/system/Marketing Control Panel/Campaigns</code>
-        </p>
-        <label htmlFor="campaign">Campaign GUID or Name</label>
-        <input type="text" class="form-control" id="campaign" [(ngModel)]="campaign" />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="triggerCampaign()"
-        >
-          Submit
-        </button>
-      </fieldset>
-    </div>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Page View</legend>
-        <p>
-          Track arbitrary page views for custom routing or offline use. Note that Layout
-          Service tracks page views by default unless <code>tracking=false</code> is passed
-          in its query string.
-        </p>
-        <label htmlFor="pageId">Page Item GUID</label>
-        <input
-          type="text"
-          class="form-control"
-          id="pageId"
-          name="pageId"
-          [(ngModel)]="pageId"
-          placeholder="i.e. 11111111-1111-1111-1111-111111111111"
-        />
-        <br />
-        <label htmlFor="pageUrl">Page URL</label>
-        <input
-          type="text"
-          class="form-control"
-          id="pageUrl"
-          name="pageUrl"
-          [(ngModel)]="pageUrl"
-          placeholder="i.e. /foo/bar"
-        />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitPageView()"
-        >
-          Submit
-        </button>
-      </fieldset>
-
-      <fieldset class="form-group col-sm">
-        <legend>Batching</legend>
-        <p>
-          The tracking API supports pushing a whole batch of events in a single request.
-          This can be useful for queuing strategies or offline PWA usage.
-        </p>
-        <button
-          type="button"
-          class="btn btn-primary"
-          (click)="submitBatching()"
-        >
-          Submit Batch of Events
-        </button>
-      </fieldset>
-    </div>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Interaction Control</legend>
-        <p>
-          Tracking data is not pushed into the xConnect service until your session ends on
-          the Sitecore server. Click this button to instantly end your session and flush the
-          data - great for debugging and testing.
-        </p>
-        <p class="alert alert-warning">
-          Note: By default <em>anonymous</em> contacts will not be shown in Experience
-          Profile. If your interactions are not showing up in Experience Profile, you may
-          need to
-          <a href="https://doc.sitecore.net/developers/xp/xconnect/xconnect-search-indexer/enable-anonymous-contact-indexing.html">
-            enable anonymous contact indexing.
-          </a>
-        </p>
-        <button
-          type="button"
-          class="btn btn-primary"
-          (click)="abandonSession()"
-        >
-          End Interaction
-        </button>
-      </fieldset>
-    </div>
-  </div>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-tracking">
+  <p *ngIf="disconnectedMode">The tracking API is only available in connected, integrated, or headless modes.</p>
+
+  <div *ngIf="!disconnectedMode">
+    <p class="alert alert-warning">
+      Note: The JSS tracker API is disabled by default. Consult the <a href="https://jss.sitecore.com/docs/fundamentals/services/tracking">tracking documentation</a> to enable it.
+    </p>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Event</legend>
+        <p>
+          Events are defined in <code>/sitecore/system/Settings/Analytics/Page Events</code>
+        </p>
+        <label htmlFor="event">Event GUID or Name</label>
+        <input type="text" id="event" class="form-control" [(ngModel)]="event" />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitEvent()"
+        >
+          Submit
+        </button>
+      </fieldset>
+
+      <fieldset class="form-group col-sm">
+        <legend>Goal</legend>
+        <p>
+          Goals are defined in <code>/sitecore/system/Marketing Control Panel/Goals</code>
+        </p>
+        <label htmlFor="goal">Goal GUID or Name</label>
+        <input
+          type="text"
+          class="form-control"
+          id="goal"
+          name="goal"
+          [(ngModel)]="goal"
+          placeholder="i.e. Register"
+        />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitGoal()"
+        >
+          Submit
+        </button>
+      </fieldset>
+    </div>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Outcome</legend>
+        <p>
+          Outcomes are defined in <code>/sitecore/system/Marketing Control Panel/Outcomes</code>
+        </p>
+        <label htmlFor="outcomeName">Outcome GUID or Name</label>
+        <input
+          type="text"
+          class="form-control"
+          id="outcomeName"
+          name="outcomeName"
+          [(ngModel)]="outcomeName"
+          placeholder="i.e. Marketing Lead"
+        />
+        <br />
+        <label htmlFor="outcomeValue">Monetary Value (optional)</label>
+        <input
+          type="number"
+          class="form-control"
+          id="outcomeValue"
+          name="outcomeValue"
+          [(ngModel)]="outcomeValue"
+          placeholder="i.e. 1337.00"
+        />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitOutcome()"
+        >
+          Submit
+        </button>
+      </fieldset>
+
+      <fieldset class="form-group col-sm">
+        <legend>Campaign</legend>
+        <p>
+          Campaigns are defined in <code>/sitecore/system/Marketing Control Panel/Campaigns</code>
+        </p>
+        <label htmlFor="campaign">Campaign GUID or Name</label>
+        <input type="text" class="form-control" id="campaign" [(ngModel)]="campaign" />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="triggerCampaign()"
+        >
+          Submit
+        </button>
+      </fieldset>
+    </div>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Page View</legend>
+        <p>
+          Track arbitrary page views for custom routing or offline use. Note that Layout
+          Service tracks page views by default unless <code>tracking=false</code> is passed
+          in its query string.
+        </p>
+        <label htmlFor="pageId">Page Item GUID</label>
+        <input
+          type="text"
+          class="form-control"
+          id="pageId"
+          name="pageId"
+          [(ngModel)]="pageId"
+          placeholder="i.e. 11111111-1111-1111-1111-111111111111"
+        />
+        <br />
+        <label htmlFor="pageUrl">Page URL</label>
+        <input
+          type="text"
+          class="form-control"
+          id="pageUrl"
+          name="pageUrl"
+          [(ngModel)]="pageUrl"
+          placeholder="i.e. /foo/bar"
+        />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitPageView()"
+        >
+          Submit
+        </button>
+      </fieldset>
+
+      <fieldset class="form-group col-sm">
+        <legend>Batching</legend>
+        <p>
+          The tracking API supports pushing a whole batch of events in a single request.
+          This can be useful for queuing strategies or offline PWA usage.
+        </p>
+        <button
+          type="button"
+          class="btn btn-primary"
+          (click)="submitBatching()"
+        >
+          Submit Batch of Events
+        </button>
+      </fieldset>
+    </div>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Interaction Control</legend>
+        <p>
+          Tracking data is not pushed into the xConnect service until your session ends on
+          the Sitecore server. Click this button to instantly end your session and flush the
+          data - great for debugging and testing.
+        </p>
+        <p class="alert alert-warning">
+          Note: By default <em>anonymous</em> contacts will not be shown in Experience
+          Profile. If your interactions are not showing up in Experience Profile, you may
+          need to
+          <a href="https://doc.sitecore.net/developers/xp/xconnect/xconnect-search-indexer/enable-anonymous-contact-indexing.html">
+            enable anonymous contact indexing.
+          </a>
+        </p>
+        <button
+          type="button"
+          class="btn btn-primary"
+          (click)="abandonSession()"
+        >
+          End Interaction
+        </button>
+      </fieldset>
+    </div>
+  </div>
+</app-styleguide-specimen>

package/dist/templates/{angular → angular-sxp}/src/app/jss-data-fetcher.service.ts

@@ -3,7 +3,9 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpResponse } from '@sitecore-jss/sitecore-jss-angular';
 import { Observable, lastValueFrom } from 'rxjs';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class JssDataFetcherService {
   constructor(
     private readonly httpClient: HttpClient,

package/dist/templates/angular-sxp/src/app/routing/navigation/navigation.component.html

@@ -0,0 +1,23 @@
+<div
+  class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom"
+>
+  <h5 class="my-0 me-md-auto fw-normal">
+    <a routerLink="/" class="text-dark" class="logo"></a>
+  </h5>
+  <nav class="my-2 my-md-0 me-md-3">
+    <a
+      class="p-2 text-dark"
+      href="https://jss.sitecore.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ 'Documentation' | translate }}
+    </a>
+    <a routerLink="/styleguide" class="p-2 text-dark">
+      {{ 'Styleguide' | translate }}
+    </a>
+    <a routerLink="/graphql" class="p-2 text-dark">
+      {{ 'GraphQL' | translate }}
+    </a>
+  </nav>
+</div>

package/dist/templates/angular-sxp/src/app/routing/scripts/scripts.component.html

@@ -0,0 +1,3 @@
+<div>
+  <app-visitor-identification></app-visitor-identification>
+</div>

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { ScriptsComponent } from './scripts.component';
+import { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
+
+@NgModule({
+  exports: [ScriptsComponent],
+  declarations: [ScriptsComponent, VisitorIdentificationComponent],
+})
+export class ScriptsModule {}

package/dist/templates/{angular/src/app/routing → angular-sxp/src/app/routing/scripts}/visitor-identification/visitor-identification.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { JssContextService } from '../../jss-context.service';
+import { JssContextService } from '../../../jss-context.service';
 
 let emittedVI = false;
 
@@ -13,7 +13,13 @@ let emittedVI = false;
  */
 @Component({
   selector: 'app-visitor-identification',
-  template: `<meta *ngIf="visitorIdentificationTimestamp" name="VIcurrentDateTime" [content]="visitorIdentificationTimestamp" />`,
+  template: `
+    <meta
+      *ngIf="visitorIdentificationTimestamp"
+      name="VIcurrentDateTime"
+      [content]="visitorIdentificationTimestamp"
+    />
+  `,
 })
 export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   visitorIdentificationTimestamp: number;
@@ -21,7 +27,7 @@ export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   private contextSubscription: Subscription;
 
   // inject the JssContextService, which maintains the current Sitecore Context
-  constructor(private jssContext: JssContextService) { }
+  constructor(private jssContext: JssContextService) {}
 
   ngOnInit() {
     this.contextSubscription = this.jssContext.state.subscribe((state) => {

package/dist/templates/angular-sxp/src/graphql-fragment-types.ts

@@ -0,0 +1,219 @@
+/* eslint-disable */
+export default {
+  __schema: {
+    types: [
+      {
+        kind: 'INTERFACE',
+        name: 'ItemField',
+        possibleTypes: [
+          {
+            name: 'RichTextField',
+          },
+          {
+            name: 'NumberField',
+          },
+          {
+            name: 'MultilistField',
+          },
+          {
+            name: 'LookupField',
+          },
+          {
+            name: 'LinkField',
+          },
+          {
+            name: 'TextField',
+          },
+          {
+            name: 'IntegerField',
+          },
+          {
+            name: 'ImageField',
+          },
+          {
+            name: 'DateField',
+          },
+          {
+            name: 'CheckboxField',
+          },
+          {
+            name: 'NameValueListField',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'Item',
+        possibleTypes: [
+          {
+            name: 'UnknownItem',
+          },
+          {
+            name: 'StyleguideComponentParamsRenderingParameters',
+          },
+          {
+            name: 'C__StandardTemplate',
+          },
+          {
+            name: 'C__Route',
+          },
+          {
+            name: 'RenderEngineType',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideTracking',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideSitecoreContext',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideSection',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideRouteFields',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideMultilingual',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutTabsTab',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutTabs',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutReuse',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideItemLinkItemTemplate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageText',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageRichText',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageNumber',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageLink',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageItemLink',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageImage',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageFile',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageDate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageCustom',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageContentList',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageCheckbox',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideExplanatoryComponent',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideContentListItemTemplate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideComponentParams',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideAngularLazyLoading',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ContentBlock',
+          },
+          {
+            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
+          },
+          {
+            name: 'JsonRendering',
+          },
+          {
+            name: 'JavaScriptRendering',
+          },
+          {
+            name: 'JSSLayout',
+          },
+          {
+            name: 'App',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'RenderingOptions',
+        possibleTypes: [
+          {
+            name: 'JsonRendering',
+          },
+          {
+            name: 'JavaScriptRendering',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'Layout',
+        possibleTypes: [
+          {
+            name: 'JSSLayout',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
+        possibleTypes: [
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType',
+          },
+          {
+            name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
+          },
+        ],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'Caching',
+        possibleTypes: [
+          {
+            name: 'JsonRendering',
+          },
+          {
+            name: 'JavaScriptRendering',
+          },
+        ],
+      },
+    ],
+  },
+};

package/dist/templates/angular-xmcloud/.env

@@ -0,0 +1,14 @@
+
+# ========== Sitecore Edge Platform ===========
+
+# Your unified Sitecore Edge Context Id.
+# This will be used over any Sitecore Preview / Delivery Edge variables (above).
+SITECORE_EDGE_CONTEXT_ID=
+
+# ========== XM Cloud Proxy ===========
+
+# Your XM Cloud Proxy hostname is needed to build the app and execute the client-side requests against the proxy server.
+PROXY_HOST=http://localhost:3000
+
+# Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the proxy server path.
+PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') %>dist