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

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

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

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

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

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

@@ -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,51 @@
+@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;
+        }
+      }
+    }
+  }
+}

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;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+/**PROMO**/
+
+.promo {
+  &.main-promo-no-border {
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    margin-bottom: 80px;
+
+    @include respond-to(mobile-large) {
+      margin-bottom: 0;
+    }
+
+    >.component-content {
+      border: 0;
+      max-width: 583px;
+      margin-right: 50px;
+
+      > div {
+        padding-bottom: 0;
+      }
+
+      @include respond-to(mobile-large) {
+        max-width: 100%;
+        margin-right: 0;
+      }
+      
+      .promo-text {
+        .field-promotext {
+          font-size: 14px;
+
+          h3 {
+            font-size: $text-size-18;
+            margin: 15px 0;
+
+            @include respond-to(mobile-large) {
+              margin: 10px 0;
+            }
+          }
+          p {
+            margin: 10px 0;
+          }
+        }
+      }
+      @include respond-to(mobile-large) {
+        > div {
+          padding: 0;
+        }
+  
+        .promo-text {
+          padding: 15px 30px 5px 30px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+@import "sass/abstracts/vars";
+@import "variables";
+
+.rich-text {
+  font-size: $text-size-16;
+
+  @include respond-to(mobile-large) {
+    padding: 0 30px 10px 30px;
+    font-size: $text-size-14;
+  }
+}

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

@@ -0,0 +1,10 @@
+$text-size-14: 14px;
+$text-size-16: 16px;
+$text-size-18: 18px;
+$text-size-24: 24px;
+$text-size-30: 30px;
+$text-size-36: 36px;
+$text-size-48: 48px;
+$text-size-50: 50px;
+
+$main-color: #27272A;

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

@@ -0,0 +1,8 @@
+@import "fonts";
+@import "container";
+@import "header";
+@import "promo";
+@import "navigation";
+@import "component";
+@import "rich-text";
+@import "footer";

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

@@ -0,0 +1,14 @@
+@import "basic/fonts";
+@import "bootstrap/scss/bootstrap";
+@import "sass/main.scss";
+@import "basic/main.scss";
+
+sc-placeholder {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  &.row {
+    flex-direction: row;
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/_app.scss

@@ -0,0 +1,103 @@
+html {
+  font-size: 62.5%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-bottom: 0px;
+  height: auto !important;
+}
+
+body {
+  @include opensans-font-stack();
+  position: relative;
+  overflow: auto;
+  color: $text-basic;
+  font-size: 16px;
+  line-height: 1.5;
+  background: $page-bg;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: auto !important;
+  &.on-page-editor {
+    background: $page-bg-editor !important;
+  }
+}
+
+a {
+  color: $text-basic;
+  cursor: pointer;
+  font-size: 0.85em;
+  &:hover {
+    color: $text-basic-active;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.2em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: 0.83em;
+}
+
+h6 {
+  font-size: 0.67em;
+}
+
+ul li {
+  list-style-type: none;
+}
+
+.xa-variable {
+  border: 0px;
+  padding: 1px;
+  margin: 0px;
+  background-color: #ebebe4;
+  color: #545454;
+  user-select: none;
+  pointer-events: none;
+}
+
+//Navigation Bar fix
+#breadcrumbMenuSubcontrol_context_menu * {
+  box-sizing: initial;
+}
+
+//End navigation bar fix
+.menu-mobile-navigate {
+  display: none;
+}
+
+#header, #content, #footer, .sc-jss-empty-placeholder {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.sc-jss-placeholder-error {
+  background: #ff0000;
+  outline: 5px solid #e36565;
+  padding: 10px;
+  color:#fff;
+  max-width: 500px;
+}