create-sitecore-jss 22.2.0-canary.81 → 22.2.0-canary.83

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

@@ -1,10 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,17 +0,0 @@
-/*
- * 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

@@ -1,58 +0,0 @@
-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) {
-      const graphQLEndpointPath = new URL(env.graphQLEndpoint).pathname;
-
-      clientConfig = {
-        endpoint: isServer ? env.graphQLEndpoint : `${env.proxyHost}${graphQLEndpointPath}`,
-        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

@@ -1,38 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-/* 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.
-  }
-}

package/dist/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts

@@ -1,77 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { isServer, CdpHelper, LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular';
-import { pageView, PageViewData } from '@sitecore-cloudsdk/events/browser';
-import { JssContextService } from '../../jss-context.service';
-import { JssState } from '../../JssState';
-import { environment } from '../../../environments/environment';
-
-/**
- * This is the CDP page view component.
- * It uses the Sitecore Cloud SDK to enable page view events on the client-side.
- * See Sitecore Cloud SDK documentation for details.
- * https://www.npmjs.com/package/@sitecore-cloudsdk/events
- */
-@Component({
-  selector: 'app-cdp-page-view',
-  template: '',
-})
-export class CdpPageViewComponent implements OnInit, OnDestroy {
-  private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) {}
-
-  ngOnInit(): void {
-    if (!isServer()) {
-      this.contextSubscription = this.jssContext.state.subscribe((newState: JssState) => {
-        const {
-          route,
-          context: { pageState, language, variantId },
-        } = newState.sitecore;
-
-        // Do not create events in editing or preview mode or if missing route data
-        if (pageState !== LayoutServicePageState.Normal || !route?.itemId) {
-          return;
-        }
-
-        // Do not create events if disabled (e.g. we don't have consent)
-        if (this.disabled()) {
-          return;
-        }
-
-        const scope = process.env.PERSONALIZE_SCOPE;
-        const pageVariantId = CdpHelper.getPageVariantId(
-          route.itemId,
-          language || environment.defaultLanguage,
-          variantId as string,
-          scope
-        );
-
-        const pageViewData: PageViewData = {
-          channel: 'WEB',
-          currency: 'USD',
-          page: route.name,
-          pageVariantId,
-          language,
-        };
-
-        pageView(pageViewData).catch((err) => console.debug(err));
-      });
-    }
-  }
-
-  ngOnDestroy() {
-    if (this.contextSubscription) {
-      this.contextSubscription.unsubscribe();
-    }
-  }
-
-  /**
-   * Determines if the page view events should be turned off.
-   * IMPORTANT: You should implement based on your cookie consent management solution of choice.
-   * By default it is disabled if not in production mode
-   */
-  disabled = () => {
-    return !environment.production;
-  };
-}

package/dist/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts

@@ -1,48 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { take } from 'rxjs/operators';
-import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
-import '@sitecore-cloudsdk/events/browser';
-import { isServer, LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular';
-import { environment } from '../../../environments/environment';
-import { JssContextService } from '../../jss-context.service';
-import { JssState } from '../../JssState';
-
-/**
- * Component to init CloudSDK logic - to allow events throughout the site
- */
-@Component({
-  selector: 'app-cloud-sdk-init',
-  template: '',
-})
-export class CloudSdkInitComponent implements OnInit {
-  constructor(private jssContext: JssContextService) {}
-
-  ngOnInit(): void {
-    if (!isServer() && environment.production) {
-      // to ensure that CloudSDK initialization logic runs only once in the browser, take only the first emitted value of state
-      this.jssContext.state.pipe(take(1)).subscribe((newState: JssState) => {
-        const {
-          route,
-          context: { pageState },
-        } = newState.sitecore;
-
-        // Do not initialize CloudSDK in editing or preview mode or if missing route data
-        if (pageState !== LayoutServicePageState.Normal || !route?.itemId) {
-          return;
-        }
-
-        CloudSDK({
-          siteName: environment.sitecoreSiteName,
-          sitecoreEdgeUrl: environment.sitecoreEdgeUrl,
-          sitecoreEdgeContextId: environment.sitecoreEdgeContextId,
-          // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
-          cookieDomain: window.location.hostname.replace(/^www\./, ''),
-          // Cookie may be created in personalize middleware (server), but if not we should create it here
-          enableBrowserCookie: true,
-        })
-          .addEvents()
-          .initialize();
-      });
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-<ng-container>
-  <sc-editing-scripts></sc-editing-scripts>
-  <app-cloud-sdk-init></app-cloud-sdk-init>
-  <app-cdp-page-view></app-cdp-page-view>
-</ng-container>

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ScriptsComponent } from './scripts.component';
-import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
-import { CloudSdkInitComponent } from './cloud-sdk-init.component';
-import { CdpPageViewComponent } from './cdp-page-view.component';
-
-@NgModule({
-  exports: [ScriptsComponent],
-  imports: [JssModule],
-  declarations: [ScriptsComponent, CloudSdkInitComponent, CdpPageViewComponent],
-})
-export class ScriptsModule {}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_component.scss

@@ -1,48 +0,0 @@
-.component-content {
-  @include respond-to(mobile-large) {
-    .row {
-      padding: 0;
-      margin: 0;
-    }
-  }
-}
-@include respond-to(mobile-large) {
-  .row {
-    margin: 0;
-    padding: 0;
-    > * {
-      padding: 0;
-      margin: 0;
-    }
-  }
-}
-
-.hero-banner {
-  .component-content {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 800px;
-
-    @include respond-to(mobile-large) {
-      height: 300px;
-    }
-  }
-  .sc-image-wrapper {
-    opacity: 0;
-  }
-  &.scEnabledChrome {
-    &.hero-banner-empty {
-      .sc-image-wrapper {
-        display: block;
-        width: 100%;
-  
-        .scEmptyImage {
-          max-height: 800px;
-          max-width: 100%;
-          width: 100%;
-        }
-      }
-    }
-  }
-}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_container.scss

@@ -1,64 +0,0 @@
-@import "sass/abstracts/mixins";
-@import "variables";
-
-body {
-  font-family: Roboto;
-  color: $main-color;
-}
-
-
-@media (min-width: 1400px) {
-  .container {
-    max-width: 1250px;
-  }
-}
-
-main {
-  .main-header {
-    margin-top: 55px;
-    margin-bottom: 30px;
-
-    @include respond-to(mobile-large) {
-      margin-bottom: 0;
-    }
-
-    h4 {
-      font-size: $text-size-50;
-      font-weight: 500;
-      line-height: 70px;
-    }
-  }
-
-  .main-news-header {
-    margin-top: 60px;
-
-    h2 {
-      font-size: $text-size-36;
-      line-height: 43px;
-    }
-  }
-
-  @include respond-to(mobile-large) {
-    padding-top: 0;
-    margin-bottom: 0;
-
-    .main-header {
-      margin-top: 10px;
-
-      h4 {
-        font-size: $text-size-24;
-        line-height: 32px;
-      }
-    }
-    
-    .main-news-header {
-      padding-bottom: 35px;
-
-      h2 {
-        margin-top: 0;
-        font-size: $text-size-18;
-        line-height: 22px;
-      }
-    }
-  }
-}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_fonts.scss

@@ -1,3 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-/* FontAwesome */
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_footer.scss

@@ -1,31 +0,0 @@
-@import "sass/abstracts/mixins";
-@import "variables";
-
-footer {
-  @include respond-to(mobile-large) {
-    padding-top: 0;
-  }
-  .container-dark-background {
-    background-color: #262626;
-  }
-
-  .contacts {
-    font-size: $text-size-14;
-
-    a {
-      color: $text-white;
-    }
-
-    p, span {
-      color: $text-white;
-    }
-  }
-
-  .indent-inner {
-    padding: 65px;
-
-    @include respond-to(mobile-large) {
-      padding: 40px 0;
-    }
-  }
-}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_header.scss

@@ -1,51 +0,0 @@
-@import "sass/abstracts/vars/colors";
-@import "sass/abstracts/mixins";
-@import "variables";
-
-.prod-mode {
-  #header {
-    display: flex;
-
-    @include respond-to(mobile-large) {
-      padding-bottom: 0;
-      sc-placeholder {
-        flex-direction: column-reverse;
-      }
-    }
-  }
-}
-
-header {
-  #header {
-    .bs-title {
-      padding-left: 50px;
-
-      h1 {
-        font-size: $text-size-24;
-        font-weight: 600;
-        line-height: 18px;
-        padding-top: 40px;
-        margin: 0;
-      }
-    }
-
-    @include respond-to(mobile-large) {
-      padding-bottom: 0;
-      padding-top: 0;
-      flex-direction: column-reverse;
-
-      .bs-title {
-        padding-left: 0;
-        text-align: center;
-        margin-top: -5px;
-
-        h1 {
-          font-weight: 500;
-          line-height: 29px;
-          padding-top: 0;
-          margin-bottom: 10px;
-        }
-      }
-    }
-  }
-}