[angular-xmcloud] Introduce Angular SXA Container component

CHANGELOG.md

@@ -26,8 +26,8 @@ Our versioning strategy is as follows:
 * `[create-sitecore-jss]` Rework Angular initializer to support XMCloud and SXP journeys ([#1845](https://github.com/Sitecore/jss/pull/1845))([#1858](https://github.com/Sitecore/jss/pull/1858))
 * `[create-sitecore-jss]` Allows proxy apps to be installed alongside main apps ([#1858](https://github.com/Sitecore/jss/pull/1858))
   * `nodeAppDestination` arg can be passed into `create-sitecore-jss` command to define path for proxy to be installed in
-* `[create-sitecore-jss]``[template/angular-xmcloud]` Angular SXA components ([#1864](https://github.com/Sitecore/jss/pull/1864))
-* `[sitecore-jss-angular]` Angular placeholder now supports SXA components ([#1870](https://github.com/Sitecore/jss/pull/1870))
+* `[create-sitecore-jss]``[template/angular-xmcloud]` Angular SXA components ([#1864](https://github.com/Sitecore/jss/pull/1864))([#1872](https://github.com/Sitecore/jss/pull/1872))
+* `[sitecore-jss-angular]` Angular placeholder now supports SXA components ([#1870](https://github.com/Sitecore/jss/pull/1870))([#1872](https://github.com/Sitecore/jss/pull/1872))
 
 ### 🛠 Breaking Change
 

packages/create-sitecore-jss/src/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>

packages/create-sitecore-jss/src/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}')`,
+    };
+  }
+}

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts

@@ -1,4 +1,4 @@
-import { OnInit, Input, Directive } from '@angular/core';
+import { OnInit, Input, Directive } from '@angular/core';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
 
 @Directive()

packages/sitecore-jss-angular/src/services/jss-component-factory.service.ts

@@ -118,19 +118,17 @@ export class JssComponentFactoryService {
   }
 
   private applySXAParams(rendering: ComponentRendering) {
-    if (!rendering.params?.FieldNames) {
-      // Not SXA component
-      return rendering;
-    }
     // Provide aggregated SXA styles on params 'styles'
     const styles = [];
-    if (rendering.params.GridParameters) {
-      styles.push(rendering.params.GridParameters);
+    if (rendering.params?.GridParameters) {
+      styles.push(rendering.params.GridParameters.trim());
+    }
+    if (rendering.params?.Styles) {
+      styles.push(rendering.params.Styles.trim());
     }
-    if (rendering.params.Styles) {
-      styles.push(rendering.params.Styles);
+    if (rendering.params && styles.length > 0) {
+      rendering.params.styles = styles.join(' ');
     }
-    rendering.params.styles = styles.join(' ');
     return rendering;
   }
 }