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

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { LinkField } from '@sitecore-jss/sitecore-jss-angular';
+import { Field } from '@sitecore-jss/sitecore-jss-angular';
+
+export interface NavItemFields {
+  Id: string;
+  DisplayName: string;
+  Title: Field<string>;
+  NavigationTitle: Field<string>;
+  Href: string;
+  Querystring: string;
+  Children: Array<NavItemFields>;
+  Styles: string[];
+}
+
+@Component({
+  selector: 'app-navigation-item',
+  templateUrl: './navigation-item.component.html',
+})
+export class NavigationItemComponent implements OnInit {
+  @Input() navItemFields: NavItemFields;
+  @Input() relativeLevel: number;
+  @Output() childLinkClickEvent: EventEmitter<Event> = new EventEmitter<Event>();
+  cssClasses = '';
+  isActive = false;
+  linkField = {};
+  childrenRelativeLevel = 0;
+  hasChildren = false;
+
+  constructor() {}
+
+  ngOnInit() {
+    this.cssClasses = `${this.navItemFields.Styles.concat('rel-level' + this.relativeLevel).join(
+      ' '
+    )}`;
+    this.linkField = this.getLinkField(this.navItemFields);
+    this.hasChildren = this.navItemFields.Children && this.navItemFields.Children.length != 0;
+    this.childrenRelativeLevel = this.relativeLevel + 1;
+  }
+
+  onClick(event: Event) {
+    this.childLinkClickEvent.emit(event);
+  }
+
+  private getLinkField = (navItemFields: NavItemFields): LinkField => ({
+    value: {
+      href: navItemFields.Href,
+      title: this.getLinkTitle(navItemFields),
+      querystring: navItemFields.Querystring,
+    },
+  });
+
+  private getLinkTitle = (navItemFields: NavItemFields): string | undefined => {
+    let title;
+    if (navItemFields.NavigationTitle?.value) {
+      title = navItemFields.NavigationTitle.value.toString();
+    } else if (navItemFields.Title?.value) {
+      title = navItemFields.Title.value.toString();
+    } else {
+      title = navItemFields.DisplayName;
+    }
+
+    return title;
+  };
+}

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html

@@ -0,0 +1,21 @@
+<label class="menu-mobile-navigate-wrapper">
+  <input
+    type="checkbox"
+    class="menu-mobile-navigate"
+    [checked]="isOpenMenu"
+    (change)="toggleMenu($event)"
+  />
+  <div class="menu-humburger"></div>
+  <div class="component-content">
+    <nav>
+      <ul class="clearfix">
+        <app-navigation-item
+          *ngFor="let navItemFields of rendering.fields"
+          [navItemFields]="navItemFields"
+          [relativeLevel]="baseLevel"
+          (childLinkClickEvent)="toggleMenu($event, false)"
+        ></app-navigation-item>
+      </ul>
+    </nav>
+  </div>
+</label>

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { SxaComponent } from '../sxa.component';
+import { JssContextService } from '../../jss-context.service';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  host: {
+    'class': 'component navigation',
+    '[id]': 'id',
+    '[class]': 'styles + " " + rendering.params?.GridParameters',
+  },
+})
+export class NavigationComponent extends SxaComponent implements OnInit, OnDestroy {
+  isEditing = false;
+  private contextSubscription: Subscription;
+  isOpenMenu = false;
+  baseLevel = 1;
+
+  constructor(private jssContext: JssContextService) {
+    super();
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
+      this.isEditing = newState.sitecore && newState.sitecore.context.pageEditing;
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.contextSubscription) {
+      this.contextSubscription.unsubscribe();
+    }
+  }
+
+  toggleMenu(event: Event, flag?: boolean) {
+    if (event && this.isEditing) {
+      event.preventDefault();
+    }
+
+    if (flag !== undefined) {
+      this.isOpenMenu = flag;
+    }
+
+    this.isOpenMenu = !this.isOpenMenu;
+  }
+}

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

@@ -0,0 +1,5 @@
+<div class="component-content">
+  <div class="field-content">
+    <div *scRichText="content || contextContent"></div>
+  </div>
+</div>

package/dist/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { RichTextField } from '@sitecore-jss/sitecore-jss-angular';
+import { JssContextService } from '../../jss-context.service';
+import { SxaComponent } from './../sxa.component';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-page-content',
+  templateUrl: './page-content.component.html',
+  host: {
+    'class': 'component content',
+    '[class]': 'styles',
+    '[id]': 'id',
+  }
+})
+export class PageContentComponent extends SxaComponent implements OnInit, OnDestroy {
+  content?: RichTextField;
+  contextContent?: RichTextField;
+  private contextSubscription: Subscription;
+
+  constructor(private jssContext: JssContextService) {
+    super();
+  }
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.content = this.rendering.fields?.Content as RichTextField;
+    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
+      this.contextContent =
+        newState.sitecore && (newState.sitecore.route.fields.Content as RichTextField);
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.contextSubscription) {
+      this.contextSubscription.unsubscribe();
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.html

@@ -0,0 +1 @@
+<sc-placeholder [name]="sig" [rendering]="rendering">

package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-partial-design-dynamic-placeholder',
+  templateUrl: './partial-design-dynamic-placeholder.component.html',
+})
+export class PartialDesignDynamicPlaceholderComponent extends SxaComponent implements OnInit {
+  sig: string;
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.sig = this.rendering.params?.sig || '';
+  }
+}

package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.html

@@ -0,0 +1,21 @@
+<div class="component-content">
+  <ng-container *ngIf="rendering.fields; else empty">
+    <div class="field-promoicon">
+      <img *scImage="rendering.fields.PromoIcon" />
+    </div>
+    <div class="promo-text">
+      <div>
+        <div class="field-promotext">
+          <div *scRichText="rendering.fields.PromoText"></div>
+        </div>
+      </div>
+      <div class="field-promolink">
+        <a *scGenericLink="rendering.fields.PromoLink"></a>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+<ng-template #empty>
+  <span className="is-empty-hint">Promo</span>
+</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-promo',
+  templateUrl: './promo.component.html',
+  host: {
+    'class': 'component promo',
+    '[class]': "styles",
+    '[id]': "id",
+  },
+})
+export class PromoComponent extends SxaComponent {}

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html

@@ -0,0 +1,8 @@
+<div class="component-content">
+  <ng-container *ngIf="text; else emptyHint">
+    <div *scRichText="text"></div>
+  </ng-container>
+  <ng-template #emptyHint>
+    <span class="is-empty-hint">Rich text</span>
+  </ng-template>
+</div>

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { Field } from '@sitecore-jss/sitecore-jss-angular';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-richtext',
+  templateUrl: './richtext.component.html',
+  host: {
+    'class': 'component rich-text',
+    '[class]': "styles",
+    "[attr.id]": "id"
+  },
+})
+export class RichTextComponent extends SxaComponent implements OnInit {
+  text?: Field<string>;
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.text = this.rendering.fields?.Text as Field<string>;
+  }
+}

package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html

@@ -0,0 +1,11 @@
+<div
+  *ngFor="let ph of enabledPlaceholders"
+  class="container-fluid"
+  [ngClass]="getRowClass(+ph - 1)"
+>
+  <div>
+    <div class="row">
+      <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
+    </div>
+  </div>
+</div>

package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-row-splitter',
+  templateUrl: './row-splitter.component.html',
+  host: {
+    "class": "component row-splitter",
+    "[class]": "rowSplitterStyles",
+    "[id]": "id"
+  }
+})
+export class RowSplitterComponent extends SxaComponent {
+  get rowSplitterStyles(): string {
+    return `${this.rendering.params.GridParameters ?? ''} ${this.rendering.params.Styles ??
+      ''}`.trimEnd();
+  }
+
+  get rowStyles(): string[] {
+    return Array.from({ length: 8 }, (_, i) => this.rendering.params[`Styles${i + 1}`]);
+  }
+
+  get enabledPlaceholders(): string[] {
+    return this.rendering.params.EnabledPlaceholders.split(',');
+  }
+
+  getRowClass(index: number): string {
+    const styleClass = this.rowStyles[index] || '';
+    return `${styleClass}`.trim();
+  }
+
+  getPlaceholderName(ph: string): string {
+    return `row-${ph}-{*}`;
+  }
+}

package/dist/templates/angular-xmcloud/src/app/components/sxa.component.ts

@@ -0,0 +1,15 @@
+import { OnInit, Input, Directive } from '@angular/core';
+import { ComponentFields, ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+
+@Directive()
+export abstract class SxaComponent<FieldType = ComponentFields> implements OnInit {
+  @Input() rendering: ComponentRendering<FieldType>;
+
+  id?: string;
+  styles?: string;
+
+  ngOnInit() {
+    this.id = this.rendering.params?.RenderingIdentifier;
+    this.styles = this.rendering.params?.styles;
+  }
+}

package/dist/templates/angular-xmcloud/src/app/components/title/title.component.html

@@ -0,0 +1,10 @@
+<div clas="component-content">
+  <div class="field-title">
+    <ng-container *ngIf="!pageEditing; else textOnly">
+      <a *scGenericLink="link"></a>
+    </ng-container>
+  </div>
+</div>
+<ng-template #textOnly>
+  <span *scText="text"></span>
+</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/title/title.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { LinkField, SxaTitleFields, TextField } from '@sitecore-jss/sitecore-jss-angular';
+import { SxaComponent } from '../sxa.component';
+import { Subscription } from 'rxjs';
+import { JssContextService } from '../../jss-context.service';
+
+@Component({
+  selector: 'app-title',
+  templateUrl: './title.component.html',
+  host: {
+    'class': 'component title',
+    '[class]': 'styles',
+    '[id]': 'id',
+  }
+})
+export class TitleComponent extends SxaComponent<SxaTitleFields> implements OnInit, OnDestroy {
+  text: TextField;
+  link: LinkField;
+  pageEditing?: boolean;
+  
+  private contextSubscription: Subscription;
+
+  constructor(private jssContext: JssContextService) {
+    super();
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+    const datasource =
+      this.rendering.fields?.data?.datasource || this.rendering.fields?.data?.contextItem;
+    this.text = datasource.field?.jsonValue;
+    this.link = {
+      value: {
+        href: datasource?.url?.path,
+        title: datasource?.field?.jsonValue?.value,
+        text: datasource?.field?.jsonValue?.value,
+      },
+    };
+    this.contextSubscription = this.jssContext.state.subscribe(({ sitecore }) => {
+      this.pageEditing = sitecore.context.pageEditing;
+      if (sitecore.context.pageState !== 'normal') {
+        this.link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
+        if (!this.text?.value) {
+          this.text.value = 'Title field';
+          this.link.value.href = '#';
+        }
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.contextSubscription) {
+      this.contextSubscription.unsubscribe();
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/app/jss-link.service.ts

@@ -0,0 +1,55 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { HTMLLink } from '@sitecore-jss/sitecore-jss-angular';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JssLinkService {
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  /**
+   * Adds link element in the document head.
+   * @param headLinks - An array of HTMLLink objects to add to the head.
+   */
+  addHeadLinks(headLink: HTMLLink) {
+    if (!headLink) {
+      return;
+    }
+
+    // Check if a link with the same rel and href already exists
+    if (this.isDuplicateLink(headLink)) {
+      return;
+    }
+
+    this.createLink(headLink);
+  }
+
+  /**
+   * Creates a new link element and appends it to the head.
+   * @param headLink - An HTMLLink object to be added.
+   */
+  private createLink(headLink: HTMLLink) {
+    if (!headLink.rel || !headLink.href) {
+      console.log('Invalid link object:', headLink);
+      return;
+    }
+
+    const link: HTMLLinkElement = this.document.createElement('link');
+    link.setAttribute('rel', headLink.rel);
+    link.setAttribute('href', headLink.href);
+    this.document.head.appendChild(link);
+  }
+
+  /**
+   * Checks for an existing link element with the same rel and href attributes.
+   * @param headLink - An HTMLLink object to be checked.
+   * @returns {boolean} - True if a matching link exists, false otherwise.
+   */
+  private isDuplicateLink(headLink: HTMLLink): boolean {
+    const existingLink = this.document.head.querySelector(
+      `link[rel='${headLink.rel}'][href='${headLink.href}']`
+    );
+    return !!existingLink;
+  }
+}

package/dist/templates/angular-xmcloud/src/app/lib/config.ts

@@ -0,0 +1,17 @@
+/*
+ * Represents the type of config object available within the generated /environments/environment.js
+ */
+export interface JssConfig extends Record<string, string | boolean | undefined> {
+  production?: false;
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  sitecoreSiteName?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
+  graphQLEndpointPath?: string;
+  defaultServerRoute?: string;
+  proxyBuildPath?: string;
+  proxyHost?: string;
+  sitecoreEdgeUrl?: string;
+  sitecoreEdgeContextId?: string;
+}

package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory/config.ts

@@ -0,0 +1,57 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  getEdgeProxyContentUrl,
+} from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { environment as env } from '../../../environments/environment';
+
+/**
+ * Gets the configuration for the GraphQLRequestClientFactory
+ * @returns GraphQLRequestClientFactoryConfig
+ */
+export const getGraphQLClientFactoryConfig = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
+  const isServer = typeof window === 'undefined';
+  // If we are in a production environment we are going to use Node XM Cloud proxy
+  const isProduction = env.production === 'true';
+
+  if (isProduction) {
+    if (!env.proxyHost) {
+      throw new Error('Please configure your proxyHost.');
+    }
+
+    if (env.sitecoreEdgeContextId) {
+      clientConfig = {
+        endpoint: isServer
+          ? getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.sitecoreEdgeUrl)
+          : getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.proxyHost),
+      };
+    } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      // we ignore ssr-proxy and query CM directly in case apiKey is used (i.e. in dev docker deployments)
+      clientConfig = {
+        endpoint: env.graphQLEndpoint,
+        apiKey: env.sitecoreApiKey,
+      };
+    }
+  } else {
+    if (env.sitecoreEdgeContextId) {
+      clientConfig = {
+        endpoint: getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.sitecoreEdgeUrl),
+      };
+    } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      clientConfig = {
+        endpoint: env.graphQLEndpoint,
+        apiKey: env.sitecoreApiKey,
+      };
+    }
+  }
+
+  if (!clientConfig?.endpoint) {
+    throw new Error(
+      'Please configure either your sitecoreEdgeContextId, or your graphQLEndpoint and sitecoreApiKey.'
+    );
+  }
+
+  return clientConfig;
+};

package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.html

@@ -0,0 +1,38 @@
+<div class="{{ mainClassPageEditing }}">
+  <ng-container *ngIf="state === LayoutState.Layout">
+    <app-scripts></app-scripts>
+    <header>
+      <div id="header">    
+        <sc-placeholder
+          name="headless-header"
+          [rendering]="route"
+          (loaded)="onPlaceholderLoaded($event)"
+        ></sc-placeholder>
+      </div>
+    </header>
+    <main>
+      <div id="content">
+        <sc-placeholder
+          name="headless-main"
+          [rendering]="route"
+          (loaded)="onPlaceholderLoaded($event)"
+        ></sc-placeholder>
+      </div>
+    </main>
+    <footer>
+      <div id="footer">
+        <sc-placeholder
+          name="headless-footer"
+          [rendering]="route"
+          (loaded)="onPlaceholderLoaded($event)"
+        ></sc-placeholder>
+      </div>
+    </footer>
+  </ng-container>
+
+  <app-not-found
+    *ngIf="state === LayoutState.NotFound"
+    [errorContextData]="errorContextData"
+  ></app-not-found>
+  <app-server-error *ngIf="state === LayoutState.Error"></app-server-error>
+</div>

package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.ts

@@ -0,0 +1,104 @@
+/* eslint-disable no-shadow, no-console */
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  RouteData,
+  Field,
+  LayoutServiceContextData,
+  getContentStylesheetLink,
+} from '@sitecore-jss/sitecore-jss-angular';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { JssState } from '../../JssState';
+import { JssMetaService } from '../../jss-meta.service';
+import { JssLinkService } from '../../jss-link.service';
+import { environment as env } from '../../../environments/environment';
+
+enum LayoutState {
+  Layout,
+  NotFound,
+  Error,
+}
+
+interface RouteFields {
+  [name: string]: unknown;
+  pageTitle?: Field<string>;
+}
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+})
+export class LayoutComponent implements OnInit, OnDestroy {
+  route: RouteData<RouteFields>;
+  state: LayoutState;
+  LayoutState = LayoutState;
+  subscription: Subscription;
+  errorContextData: LayoutServiceContextData;
+  mainClassPageEditing: string;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private readonly meta: JssMetaService,
+    private linkService: JssLinkService
+  ) {}
+
+  ngOnInit() {
+    // route data is populated by the JssRouteResolver
+    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
+      if (!data.jssState) {
+        this.state = LayoutState.NotFound;
+        return;
+      }
+
+      if (data.jssState.sitecore && data.jssState.sitecore.route) {
+        this.route = data.jssState.sitecore.route;
+        this.setMetadata(this.route.fields);
+        this.state = LayoutState.Layout;
+        this.mainClassPageEditing = data.jssState.sitecore.context.pageEditing
+          ? 'editing-mode'
+          : 'prod-mode';
+
+        const contentStyles = getContentStylesheetLink(
+          { sitecore: data.jssState.sitecore },
+          env.sitecoreEdgeContextId,
+          env.sitecoreEdgeUrl
+        );
+
+        if (contentStyles) {
+          this.linkService.addHeadLinks(contentStyles);
+        }
+      }
+
+      if (data.jssState.routeFetchError) {
+        if (
+          data.jssState.routeFetchError.status >= 400 &&
+          data.jssState.routeFetchError.status < 500
+        ) {
+          this.state = LayoutState.NotFound;
+        } else {
+          this.state = LayoutState.Error;
+        }
+
+        this.errorContextData =
+          data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    // important to unsubscribe when the component is destroyed
+    this.subscription.unsubscribe();
+  }
+
+  setMetadata(routeFields: RouteFields) {
+    // set page title, if it exists
+    if (routeFields && routeFields.pageTitle) {
+      this.meta.setTitle(routeFields.pageTitle.value || 'Page');
+    }
+  }
+
+  onPlaceholderLoaded(_placeholderName: string) {
+    // you may optionally hook to the loaded event for a placeholder,
+    // which can be useful for analytics and other DOM-based things that need to know when a placeholder's content is available.
+  }
+}