create-sitecore-jss 22.2.0-canary.1 → 22.2.0-canary.10

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

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-container',
+  templateUrl: './container.component.html',
+})
+export class ContainerComponent extends SxaComponent implements OnInit {
+  placeholderName: string;
+  wrapped: boolean;
+
+  override ngOnInit() {
+    super.ngOnInit();
+
+    this.placeholderName = `container-${this.rendering.params?.DynamicPlaceholderId}`;
+    this.wrapped = this.rendering.params?.Styles?.split(' ').includes('container');
+  }
+
+  get backgroundStyle() {
+    const backgroundImage = this.rendering.params?.BackgroundImage;
+    const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
+    if (!backgroundImage || !backgroundImage.match(mediaUrlPattern)) {
+      return {};
+    }
+    const mediaUrl = backgroundImage.match(mediaUrlPattern)[1];
+    return {
+      backgroundImage: `url('${mediaUrl}')`,
+    };
+  }
+}

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

@@ -0,0 +1,13 @@
+<div
+  class="component rich-text {{ styles }}"
+  [attr.id]="id"
+>
+  <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>
+</div>

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

@@ -0,0 +1,16 @@
+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',
+})
+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/sxa.component.ts

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

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

@@ -0,0 +1,51 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { HTMLLink } from '@sitecore-jss/sitecore-jss-angular';
+
+@Injectable()
+export class JssLinkService {
+  document: Document;
+
+  constructor() {
+    this.document = Inject(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;
+    }
+
+    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);
+  }
+
+  /**
+   * Removes all link elements that match the specified rel attribute.
+   * @param rel - The rel attribute of the links to be removed.
+   */
+  removeLinksByRel(rel: string) {
+    const links = this.document.head.querySelectorAll(`link[rel="${rel}"]`);
+    links.forEach((link) => {
+      this.document.head.removeChild(link);
+    });
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
+} from '@sitecore-jss/sitecore-jss-angular';
+import { environment as env } from '../../environments/environment';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  // If we are in a production environment we are going to use Node XM Cloud proxy
+  if (env.production === 'true') {
+    if (env.proxyHost && env.sitecoreApiKey && env.graphQLEndpoint) {
+      // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
+      clientConfig = {
+        endpoint:
+          typeof window === 'undefined'
+            ? env.graphQLEndpoint
+            : `${env.proxyHost}${env.graphQLEndpointPath}`,
+        apiKey: env.sitecoreApiKey,
+      };
+    } else {
+      throw new Error('Please configure your proxyHost, sitecoreApiKey, graphQLEndpoint.');
+    }
+  } else {
+    if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      clientConfig = {
+        endpoint: env.graphQLEndpoint,
+        apiKey: env.sitecoreApiKey,
+      };
+    } else {
+      throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+    }
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();

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

@@ -0,0 +1,39 @@
+<app-navigation></app-navigation>
+<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)="onMainPlaceholderLoaded($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,111 @@
+/* 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';
+
+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<RouteFields> }) => {
+        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';
+
+          /**  TODO: get contextId and edgeUrl properly **/
+          const sitecoreEdgeContextId = '';
+          const sitecoreEdgeUrl = '';
+          const contentStyles = getContentStylesheetLink(
+            { sitecore: data.jssState.sitecore },
+            sitecoreEdgeContextId,
+            sitecoreEdgeUrl
+          );
+
+          // Clear existing stylesheets
+          this.linkService.removeLinksByRel('stylesheet');
+
+          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');
+    }
+  }
+
+  onMainPlaceholderLoaded(_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/assets/styles/basic/_component.scss

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

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

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

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

@@ -0,0 +1,49 @@
+@import "sass/abstracts/vars/colors";
+@import "sass/abstracts/mixins";
+@import "variables";
+
+.prod-mode {
+  #header {
+    display: flex;
+
+    @include respond-to(mobile-large) {
+      padding-bottom: 0;
+      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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,150 @@
+@import "sass/abstracts/vars";
+@import "variables";
+
+$hamburger-width: 28px;
+$hamburger-height: 18px;
+$border-size: 6px;
+$hamburger-margin: 18px;
+
+.navigation {
+  .menu-mobile-navigate-wrapper {
+    width: 100%;
+  }
+}
+
+.navigation.navigation-horizontal {
+  width: 100%;
+  padding-right: 70px;
+  margin-top: -15px;
+
+  .menu-mobile-navigate {
+    display: none;
+  }
+  
+  @include respond-to(mobile-large) {
+    padding-right: 0;
+  }
+
+  .component-content {
+    display: inline-block;
+
+    @include respond-to(mobile-large) {
+      display: none;
+    }
+    
+    ul.clearfix {
+      list-style: none;
+    }
+    .level0 {
+      display: flex;
+    }
+  
+    .level0, .level1 {
+      float: left;
+      margin-left: 30px;
+
+      >.navigation-title {
+        >a {
+          border-width: 0;
+          font-size: $text-size-14;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  @include respond-to(mobile-large) {
+    .component-content {
+      display: none;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      background-color: $bg-black-active;
+      z-index: 1;
+
+      * {
+        text-align: center !important;
+      }
+
+      nav {
+        padding-top: 110px;
+        
+        .level0 {
+          display: block;
+        }
+      }
+      
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+
+      .level0, .level1 {
+        float: unset;
+        margin-left: 0;
+        >.navigation-title {
+          >a {
+            font-size: $text-size-30;
+            line-height: 90px;
+            >span {
+              color: $text-white;
+            }
+          }
+        }
+      }
+    }
+
+    .menu-mobile-navigate-wrapper {
+      .menu-mobile-navigate {
+        display: inline-block;
+        z-index: 2;
+        position: absolute;
+        right: $hamburger-margin;
+        top: $hamburger-margin;
+        height: $hamburger-width;
+        width: $hamburger-width;
+        opacity: 0;
+
+        &:checked ~ {
+          .menu-humburger {
+            &::before {
+              content: "\00d7";
+              color: $text-basic-active;
+              font-size: $text-size-48;
+              position: fixed;
+              top: 0;
+              right: 0;
+              margin-top: calc($hamburger-margin + ($hamburger-margin / 2));
+              margin-right: $hamburger-margin;
+              line-height: 0;
+              border: 0;
+            }
+          }
+
+          .component-content {
+            position: fixed;
+            display: inline-block;
+          }
+        }
+      }
+
+      .menu-humburger {
+        &::before {
+          content: "";
+          width: $hamburger-width;
+          height: $hamburger-height;
+          margin-right: $hamburger-margin;
+          margin-top: calc($hamburger-margin + ($hamburger-margin / 2)) + 8px;
+          display: block;
+          border-top: 6px solid $bg-black;
+          border-bottom: 6px solid $bg-black;
+          float: right;
+          z-index: 99;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}