From e00cdb0083f9e9ed6ce7d9e1a57e0f76b7bcfdb9 Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Thu, 22 Aug 2024 14:00:03 -0400
Subject: [PATCH] [angular-xmcloud] Introduce RowSplitter SXA component (#1901)

---
 CHANGELOG.md                                  |  1 +
 .../row-splitter/row-splitter.component.html  | 10 +++++++
 .../row-splitter/row-splitter.component.ts    | 30 +++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html
 create mode 100644 packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7cac7de5c..4330a2a50d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,7 @@ Our versioning strategy is as follows:
   * 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))
+  * Row-Splitter ([#1901](https://github.com/Sitecore/jss/pull/1901))
   * Link-List ([#1898](https://github.com/Sitecore/jss/pull/1898))
   * Column-Splitter ([#1889](https://github.com/Sitecore/jss/pull/1889))
 
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html
new file mode 100644
index 0000000000..462221c15b
--- /dev/null
+++ b/packages/create-sitecore-jss/src/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>
\ No newline at end of file
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts
new file mode 100644
index 0000000000..b74784462a
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+
+@Component({
+  selector: 'app-row-splitter',
+  templateUrl: './row-splitter.component.html',
+})
+export class RowSplitterComponent extends SxaComponent {
+  get rowSplitterStyles(): string {
+    return `${this.rendering.params.GridParameters ?? ''} ${this.rendering.params.Styles ??
+      ''}`.trimEnd();
+  }
+
+  get rowStyles(): string[] {
+    return Array.from({ length: 8 }, (_, i) => this.rendering.params[`Styles${i + 1}`]);
+  }
+
+  get enabledPlaceholders(): string[] {
+    return this.rendering.params.EnabledPlaceholders.split(',');
+  }
+
+  getRowClass(index: number): string {
+    const styleClass = this.rowStyles[index] || '';
+    return `${styleClass}`.trim();
+  }
+
+  getPlaceholderName(ph: string): string {
+    return `row-${ph}-{*}`;
+  }
+}