create-sitecore-jss 22.6.0-canary.8 → 22.6.0

package/dist/templates/angular-xmcloud/package.json

@@ -1,17 +1,17 @@
-{
-  "config": {
-    "sitecoreDistPath": "/dist"
-  },
-  "scripts": {
-    "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build",
-    "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js",
-    "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
-  },
-  "dependencies": {
-    "@sitecore-cloudsdk/core": "^0.4.2",
-    "@sitecore-cloudsdk/events": "^0.4.2",
-    "font-awesome": "^4.7.0",
-    "sass": "^1.52.3",
-    "sass-alias": "^1.0.5"
-  }
-}
+{
+  "config": {
+    "sitecoreDistPath": "/dist"
+  },
+  "scripts": {
+    "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build",
+    "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js",
+    "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
+  },
+  "dependencies": {
+    "@sitecore-cloudsdk/core": "^0.4.2",
+    "@sitecore-cloudsdk/events": "^0.4.2",
+    "font-awesome": "^4.7.0",
+    "sass": "^1.52.3",
+    "sass-alias": "^1.0.5"
+  }
+}

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

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

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

@@ -1,14 +1,14 @@
-<div class="container-wrapper" *ngIf="wrapped; else default">
-  <ng-container *ngTemplateOutlet="default"></ng-container>
-</div>
-<ng-template #default>
-  <div class="component container-default {{ styles }}" [attr.id]="id">
-    <div class="component-content" [ngStyle]="backgroundStyle">
-        <sc-placeholder
-          [name]="placeholderName"
-          [rendering]="rendering"
-          class="row">
-        </sc-placeholder>
-    </div>
-  </div>
-</ng-template>
+<div class="container-wrapper" *ngIf="wrapped; else default">
+  <ng-container *ngTemplateOutlet="default"></ng-container>
+</div>
+<ng-template #default>
+  <div class="component container-default {{ styles }}" [attr.id]="id">
+    <div class="component-content" [ngStyle]="backgroundStyle">
+        <sc-placeholder
+          [name]="placeholderName"
+          [rendering]="rendering"
+          class="row">
+        </sc-placeholder>
+    </div>
+  </div>
+</ng-template>

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

@@ -1,36 +1,36 @@
-<ng-container [ngTemplateOutlet]="variant"></ng-container>
-
-<ng-template #default>
-  <div class="component image {{ styles }}" [attr.id]="id" *ngIf="rendering.fields; else empty">
-    <div class="component-content">
-      <ng-container *ngIf="isEditing || !rendering.fields.TargetUrl?.value?.href; else withLink">
-        <img *scImage="rendering.fields.Image" />
-      </ng-container>
-      <span class="image-caption field-imagecaption" *scText="rendering.fields.ImageCaption"></span>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #banner>
-  <div class="component hero-banner {{ styles }} {{ classHeroBannerEmpty }}" [attr.id]="id">
-    <div class="component-content sc-sxa-image-hero-banner" [ngStyle]="backgroundStyle">
-      <ng-container *ngIf="isEditing">
-        <img *scImage="modifyImageProps" />
-      </ng-container>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #withLink>
-  <a *scGenericLink="rendering.fields.TargetUrl">
-    <img *scImage="rendering.fields.Image" />
-  </a>
-</ng-template>
-
-<ng-template #empty>
-  <div class="component image {{ styles }}">
-    <div class="component-content">
-      <span class="is-empty-hint">Image</span>
-    </div>
-  </div>
-</ng-template>
+<ng-container [ngTemplateOutlet]="variant"></ng-container>
+
+<ng-template #default>
+  <div class="component image {{ styles }}" [attr.id]="id" *ngIf="rendering.fields; else empty">
+    <div class="component-content">
+      <ng-container *ngIf="isEditing || !rendering.fields.TargetUrl?.value?.href; else withLink">
+        <img *scImage="rendering.fields.Image" />
+      </ng-container>
+      <span class="image-caption field-imagecaption" *scText="rendering.fields.ImageCaption"></span>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #banner>
+  <div class="component hero-banner {{ styles }} {{ classHeroBannerEmpty }}" [attr.id]="id">
+    <div class="component-content sc-sxa-image-hero-banner" [ngStyle]="backgroundStyle">
+      <ng-container *ngIf="isEditing">
+        <img *scImage="modifyImageProps" />
+      </ng-container>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #withLink>
+  <a *scGenericLink="rendering.fields.TargetUrl">
+    <img *scImage="rendering.fields.Image" />
+  </a>
+</ng-template>
+
+<ng-template #empty>
+  <div class="component image {{ styles }}">
+    <div class="component-content">
+      <span class="is-empty-hint">Image</span>
+    </div>
+  </div>
+</ng-template>

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

@@ -1,15 +1,15 @@
-<div class="component-content">
-  <ng-container *ngIf="title; else defaultTitle">
-    <h3 *scText="title"></h3>
-  </ng-container>
-  <ul>
-    <li *ngFor="let fieldLink of fieldLinks; index as i" [ngClass]="getFieldLinkClass(i)">
-      <div class="field-link">
-        <a *scGenericLink="fieldLink"></a>
-      </div>
-    </li>
-  </ul>
-</div>
-<ng-template #defaultTitle>
-  <span class="is-empty-hint">Link list</span>
-</ng-template>
+<div class="component-content">
+  <ng-container *ngIf="title; else defaultTitle">
+    <h3 *scText="title"></h3>
+  </ng-container>
+  <ul>
+    <li *ngFor="let fieldLink of fieldLinks; index as i" [ngClass]="getFieldLinkClass(i)">
+      <div class="field-link">
+        <a *scGenericLink="fieldLink"></a>
+      </div>
+    </li>
+  </ul>
+</div>
+<ng-template #defaultTitle>
+  <span class="is-empty-hint">Link list</span>
+</ng-template>

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

@@ -1,23 +1,23 @@
-<li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
-  <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
-    <a *scRouterLink="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>
+<li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
+  <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
+    <a *scRouterLink="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.component.html

@@ -1,21 +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>
+<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/page-content/page-content.component.html

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

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

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

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

@@ -1,21 +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>
+<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/richtext/richtext.component.html

@@ -1,8 +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>
+<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/row-splitter/row-splitter.component.html

@@ -1,11 +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>
+<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/title/title.component.html

@@ -1,10 +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>
+<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/routing/layout/layout.component.html

@@ -1,38 +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>
+<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/assets/styles/basic/_component.scss

@@ -1,48 +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%;
-        }
-      }
-    }
-  }
-}
+.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%;
+        }
+      }
+    }
+  }
+}