create-sitecore-jss 22.2.0-canary.34 → 22.2.0-canary.36

package/dist/templates/angular-xmcloud/src/app/components/app-components.shared.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { NavigationItemComponent } from './navigation/navigation-item.component';
+
+/*
+  This module is imported by the generated app-components.module.ts.
+  You can use this module to provide shared Angular components that are not
+  JSS components, etc to the generated module.
+
+  Don't want code generation? See ./.gitignore for instructions to turn it off.
+*/
+@NgModule({
+  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
+  exports: [CommonModule, TranslateModule, RouterModule, FormsModule, NavigationItemComponent],
+  declarations: [NavigationItemComponent],
+})
+export class AppComponentsSharedModule {}

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

@@ -2,7 +2,7 @@
 
 <ng-template #default>
   <div class="component image {{ styles }}" [attr.id]="id" *ngIf="rendering.fields; else empty">
-    <div className="component-content">
+    <div class="component-content">
       <ng-container *ngIf="isEditing || !rendering.fields.TargetUrl?.value?.href; else withLink">
         <img *scImage="rendering.fields.Image" />
       </ng-container>
@@ -28,7 +28,7 @@
 </ng-template>
 
 <ng-template #empty>
-  <div className="component image {{ styles }}">
+  <div class="component image {{ styles }}">
     <div class="component-content">
       <span class="is-empty-hint">Image</span>
     </div>

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

@@ -0,0 +1,23 @@
+<li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
+  <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
+    <a *scLink="linkField" (click)="onClick($event)">
+      <ng-container *ngIf="navItemFields.NavigationTitle"
+        ><span *scText="navItemFields.NavigationTitle"></span
+      ></ng-container>
+      <ng-container *ngIf="!navItemFields.NavigationTitle && navItemFields.Title">
+        <span *scText="navItemFields.Title"></span
+      ></ng-container>
+      <ng-container *ngIf="!navItemFields.NavigationTitle && !navItemFields.Title">{{
+        navItemFields.DisplayName
+      }}</ng-container>
+    </a>
+  </div>
+  <ul *ngIf="hasChildren" class="clearfix">
+    <app-navigation-item
+      *ngFor="let childNavItemFields of navItemFields.Children"
+      [navItemFields]="childNavItemFields"
+      [relativeLevel]="childrenRelativeLevel"
+      (childLinkClickEvent)="onClick($event)"
+    ></app-navigation-item>
+  </ul>
+</li>

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,26 @@
+<div
+  class="component navigation {{ styles }} {{ this.rendering.params?.GridParameters }}"
+  [attr.id]="id"
+>
+  <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>
+</div>

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

@@ -0,0 +1,44 @@
+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',
+})
+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/title/title.component.html

@@ -0,0 +1,12 @@
+<div class="component title {{ styles }}" [attr.id]="id">
+  <div clas="component-content">
+    <div class="field-title">
+      <ng-container *ngIf="!pageEditing; else textOnly">
+        <a *scLink="link"></a>
+      </ng-container>
+    </div>
+  </div>
+  <ng-template #textOnly>
+    <span *scText="text"></span>
+  </ng-template>
+</div>

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

@@ -0,0 +1,51 @@
+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',
+})
+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/routing/layout/layout.component.html

@@ -1,4 +1,3 @@
-<app-navigation></app-navigation>
 <div class="{{ mainClassPageEditing }}">
   <ng-container *ngIf="state === LayoutState.Layout">
     <app-scripts></app-scripts>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.34",
+  "version": "22.2.0-canary.36",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "dca02e224cc8d58c205e533f808b4cda61367617"
+  "gitHead": "6c05bf93afe6709e8e730a1912b5eb9be9c65881"
 }