create-sitecore-jss 22.2.0-canary.4 → 22.2.0-canary.41

package/dist/templates/angular-xmcloud/scripts/config/plugins/xmcloud.ts

@@ -1,6 +1,7 @@
 import { JssConfig } from 'lib/config';
 import { ConfigPlugin } from '..';
 import { constantCase } from 'constant-case';
+import chalk from 'chalk';
 
 /**
  * This plugin will set XM Cloud related config props.
@@ -13,9 +14,24 @@ class XMCloudPlugin implements ConfigPlugin {
     const proxyBuildPath = process.env[`${constantCase('proxyBuildPath')}`]?.replace(/\/$/, '');
     const proxyHost = process.env[`${constantCase('proxyHost')}`];
 
+    const sitecoreEdgeUrl =
+      process.env[`${constantCase('sitecoreEdgeUrl')}`]?.replace(/\/$/, '') ||
+      'https://edge-platform.sitecorecloud.io';
+    const sitecoreEdgeContextId = process.env[`${constantCase('sitecoreEdgeContextId')}`];
+
+    if (config.sitecoreApiKey && sitecoreEdgeContextId) {
+      console.log(
+        chalk.yellow(
+          "You have configured both 'sitecoreApiKey' and 'sitecoreEdgeContextId' values. The 'sitecoreEdgeContextId' is used instead."
+        )
+      );
+    }
+
     return Object.assign({}, config, {
       proxyBuildPath,
       proxyHost,
+      sitecoreEdgeUrl,
+      sitecoreEdgeContextId,
     });
   }
 }

package/dist/templates/angular-xmcloud/scripts/generate-metadata.ts

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+import { Metadata, getMetadata } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/*
+  METADATA GENERATION
+  Generates the /src/environments/metadata.json file which contains application 
+  configuration metadata that is used for Sitecore XM Cloud integration.
+*/
+generateMetadata();
+
+function generateMetadata(): void {
+  const metadata: Metadata = getMetadata();
+  writeMetadata(metadata);
+}
+
+/**
+ * Writes the metadata object to disk.
+ * @param {Metadata} metadata metadata to write.
+ */
+function writeMetadata(metadata: Metadata): void {
+  const filePath = path.resolve('src/environments/metadata.json');
+  console.log(`Writing metadata to ${filePath}`);
+  fs.writeFileSync(filePath, JSON.stringify(metadata, null, 2), { encoding: 'utf8' });
+}

package/dist/templates/angular-xmcloud/server.exports.ts

@@ -0,0 +1,24 @@
+import clientFactory from './src/app/lib/graphql-client-factory';
+import { getGraphQLClientFactoryConfig } from './src/app/lib/graphql-client-factory/config';
+import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
+import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
+import { environment } from './src/environments/environment';
+import { components } from './src/app/components/app-components.module';
+import metadata from './src/environments/metadata.json';
+
+/**
+ * Define the required configuration values to be exported from the server.bundle.ts.
+ */
+
+const defaultLanguage = environment.defaultLanguage;
+const getClientFactoryConfig = getGraphQLClientFactoryConfig;
+
+export {
+  clientFactory,
+  getClientFactoryConfig,
+  dictionaryServiceFactory,
+  layoutServiceFactory,
+  defaultLanguage,
+  components,
+  metadata,
+};

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/column-splitter/column-splitter.component.html

@@ -0,0 +1,10 @@
+<div class="row component column-splitter" [ngClass]="columnSplitterStyles" [attr.id]="id">
+  <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>

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

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-column-splitter',
+  templateUrl: './column-splitter.component.html',
+})
+export class ColumnSplitterComponent extends SxaComponent {
+  get columnSplitterStyles(): string {
+    return `${this.rendering.params.GridParameters ?? ''} ${this.rendering.params.Styles ??
+      ''}`.trimEnd();
+  }
+
+  get columnWidths(): string[] {
+    return Array.from({ length: 8 }, (_, i) => this.rendering.params[`ColumnWidth${i + 1}`]);
+  }
+
+  get columnStyles(): string[] {
+    return Array.from({ length: 8 }, (_, i) => this.rendering.params[`Styles${i + 1}`]);
+  }
+
+  get enabledPlaceholders(): string[] {
+    return this.rendering.params.EnabledPlaceholders.split(',');
+  }
+
+  getColumnClass(index: number): string {
+    const widthClass = this.columnWidths[index] || '';
+    const styleClass = this.columnStyles[index] || '';
+    return `${widthClass} ${styleClass}`.trim();
+  }
+
+  getPlaceholderName(ph: string): string {
+    return `column-${ph}-{*}`;
+  }
+}

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

@@ -0,0 +1,15 @@
+<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">
+      <div class="row">
+        <sc-placeholder
+          [name]="placeholderName"
+          [rendering]="rendering">
+        </sc-placeholder>
+      </div>
+    </div>
+  </div>
+</ng-template>

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/image/image.component.html

@@ -0,0 +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 *scLink="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/image/image.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit, OnDestroy, ViewChild, TemplateRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { EditMode, ImageField } from '@sitecore-jss/sitecore-jss-angular';
+import { SxaComponent } from '../sxa.component';
+import { JssContextService } from '../../jss-context.service';
+
+@Component({
+  selector: 'app-image',
+  templateUrl: './image.component.html',
+})
+export class ImageComponent extends SxaComponent implements OnInit, OnDestroy {
+  @ViewChild('default', { static: true }) defaultVariant: TemplateRef<any>;
+  @ViewChild('banner', { static: true }) bannerVariant: TemplateRef<any>;
+  classHeroBannerEmpty = '';
+  backgroundStyle = {};
+  modifyImageProps = {};
+  isEditing = false;
+  private contextSubscription: Subscription;
+
+  constructor(private jssContext: JssContextService) {
+    super();
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    const imageField = this.rendering.fields?.Image as ImageField;
+    this.backgroundStyle = imageField?.value?.src && {
+      'background-image': `url('${imageField.value.src}')`,
+    };
+
+    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
+      this.isEditing = newState.sitecore && newState.sitecore.context.pageEditing;
+
+      this.classHeroBannerEmpty =
+        this.isEditing && imageField?.value?.class === 'scEmptyImage' ? 'hero-banner-empty' : '';
+
+      const isMetadataMode = newState.sitecore?.context?.editMode === EditMode.Metadata;
+      this.modifyImageProps = !isMetadataMode
+        ? {
+            ...imageField,
+            editable: imageField?.editable
+              ?.replace(`width="${imageField?.value?.width}"`, 'width="100%"')
+              .replace(`height="${imageField?.value?.height}"`, 'height="100%"'),
+          }
+        : {
+            ...imageField,
+            value: {
+              ...imageField?.value,
+              style: { width: '100%', height: '100%' },
+            },
+          };
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.contextSubscription) {
+      this.contextSubscription.unsubscribe();
+    }
+  }
+
+  public get variant(): TemplateRef<any> {
+    return this.rendering.params?.FieldNames === 'Banner'
+      ? this.bannerVariant
+      : this.defaultVariant;
+  }
+}

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

@@ -0,0 +1,17 @@
+<div class="component link-list {{ styles }}" [attr.id]="id">
+  <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 *scLink="fieldLink"></a>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <ng-template #defaultTitle>
+    <span class="is-empty-hint">Link list</span>
+  </ng-template>
+</div>

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+import { Field, LinkField, SxaLinkListFields } from '@sitecore-jss/sitecore-jss-angular';
+
+@Component({
+  selector: 'app-link-list',
+  templateUrl: './link-list.component.html',
+})
+export class LinkListComponent extends SxaComponent<SxaLinkListFields> implements OnInit {
+  title?: Field<string>;
+  fieldLinks: LinkField[] = [];
+
+  getFieldLinkClass(index: number): string {
+    let className = `item${index}`;
+    className += (index + 1) % 2 == 0 ? ' even' : ' odd';
+    if (index === 0) {
+      className += ' first';
+    }
+    if (index + 1 === this.fieldLinks.length) {
+      className += ' last';
+    }
+    return className;
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+    const datasource = this.rendering.fields?.data?.datasource;
+    if (datasource) {
+      this.title = datasource.field?.title as Field<string>;
+      datasource.children.results.forEach(item => {
+        if (item.field?.link)
+          this.fieldLinks.push(item.field.link as LinkField);
+      });
+    }
+  }
+}

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/page-content/page-content.component.html

@@ -0,0 +1,7 @@
+<div class="component content {{styles}}" [attr.id]="id">
+  <div class="component-content">
+    <div class="field-content">
+        <div *scRichText="content || contextContent"></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,34 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { RichTextField } from '@sitecore-jss/sitecore-jss-angular';
+import { JssContextService } from '../../jss-context.service';
+import { SxaComponent } from './../sxa.component';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-page-content',
+  templateUrl: './page-content.component.html',
+})
+export class PageContentComponent extends SxaComponent implements OnInit, OnDestroy {
+  content?: RichTextField;
+  contextContent?: RichTextField;
+  private contextSubscription: Subscription;
+
+  constructor(private jssContext: JssContextService) {
+    super();
+  }
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.content = this.rendering.fields?.Content as RichTextField;
+    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
+      this.contextContent =
+        newState.sitecore && (newState.sitecore.route.fields.Content as RichTextField);
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.contextSubscription) {
+      this.contextSubscription.unsubscribe();
+    }
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-partial-design-dynamic-placeholder',
+  templateUrl: './partial-design-dynamic-placeholder.component.html',
+})
+export class PartialDesignDynamicPlaceholderComponent extends SxaComponent implements OnInit {
+  sig: string;
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.sig = this.rendering.params?.sig || '';
+  }
+}

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

@@ -0,0 +1,23 @@
+<div class="component promo {{ styles }}" [attr.id]="id">
+  <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 *scLink="rendering.fields.PromoLink"></a>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>
+
+<ng-template #empty>
+  <span className="is-empty-hint">Promo</span>
+</ng-template>

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-promo',
+  templateUrl: './promo.component.html',
+})
+export class PromoComponent extends SxaComponent {}

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/row-splitter/row-splitter.component.html

@@ -0,0 +1,10 @@
+<div class="component row-splitter" [ngClass]="rowSplitterStyles" [attr.id]="id">
+  <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>