[angular-xmcloud] Introduce column-splitter component for angular

CHANGELOG.md

@@ -29,9 +29,14 @@ 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))([#1868](https://github.com/Sitecore/jss/pull/1868))([#1881](https://github.com/Sitecore/jss/pull/1881))([#1882](https://github.com/Sitecore/jss/pull/1882))
   * `[create-sitecore-jss]` Allow node-xmcloud-proxy app to be installed alongside Angular SPA application
   * `proxyAppDestination` 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))
-* `[template/angular-xmcloud]` Angular SXA layout ([#1873](https://github.com/Sitecore/jss/pull/1873))([#1880](https://github.com/Sitecore/jss/pull/1880))([#1890](https://github.com/Sitecore/jss/pull/1890))
+* `[create-sitecore-jss]``[sitecore-jss-angular]``[template/angular-xmcloud]` Angular SXA components
+  * Angular placeholder now supports SXA components ([#1870](https://github.com/Sitecore/jss/pull/1870))
+  * Richtext component ([#1864](https://github.com/Sitecore/jss/pull/1864))
+  * Container component ([#1872](https://github.com/Sitecore/jss/pull/1872))
+  * Angular SXA layout ([#1873](https://github.com/Sitecore/jss/pull/1873))([#1880](https://github.com/Sitecore/jss/pull/1880))([#1890](https://github.com/Sitecore/jss/pull/1890))
+  * Column-Splitter ([#1889](https://github.com/Sitecore/jss/pull/1889))
+
+
 
 ### 🛠 Breaking Change
 

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

packages/create-sitecore-jss/src/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}-{*}`;
+  }
+}