From 242ac696631cff78dd292724ceb5dbed19f82b3a Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Wed, 4 Sep 2024 15:32:20 +0300
Subject: [PATCH] [templates/angular-xmcloud] Fixed sxa components styles

---
 .../column-splitter.component.html            | 13 ++---
 .../column-splitter.component.ts              |  5 ++
 .../container/container.component.html        |  5 +-
 .../link-list/link-list.component.html        | 32 ++++++-------
 .../link-list/link-list.component.ts          |  5 ++
 .../navigation/navigation.component.html      | 47 +++++++++----------
 .../navigation/navigation.component.ts        |  5 ++
 .../page-content/page-content.component.html  |  8 ++--
 .../page-content/page-content.component.ts    |  5 ++
 .../app/components/promo/promo.component.html | 30 ++++++------
 .../app/components/promo/promo.component.ts   |  5 ++
 .../richtext/richtext.component.html          | 19 +++-----
 .../components/richtext/richtext.component.ts |  7 ++-
 .../row-splitter/row-splitter.component.html  | 17 +++----
 .../row-splitter/row-splitter.component.ts    |  5 ++
 .../app/components/title/title.component.html | 18 ++++---
 .../app/components/title/title.component.ts   |  5 ++
 .../src/assets/styles/basic/_header.scss      |  4 +-
 .../src/assets/styles/main.scss               | 10 ++++
 .../src/templates/angular/.eslintrc           |  1 +
 20 files changed, 138 insertions(+), 108 deletions(-)

diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html
index 2cc3cc307f..7eb62c5765 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html
@@ -1,10 +1,5 @@
-<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 *ngFor="let ph of enabledPlaceholders" [ngClass]="getColumnClass(+ph - 1)">
+  <div class="row">
+    <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
+  </div>
 </div>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts
index b5e65b340a..9fa66cbd15 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts
@@ -4,6 +4,11 @@ import { SxaComponent } from '../sxa.component';
 @Component({
   selector: 'app-column-splitter',
   templateUrl: './column-splitter.component.html',
+  host: {
+    'class': 'row component column-splitter',
+    '[class]': 'columnSplitterStyles',
+    '[id]' : 'id'
+  }
 })
 export class ColumnSplitterComponent extends SxaComponent {
   get columnSplitterStyles(): string {
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/container/container.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/container/container.component.html
index 8f121474d6..02871d23b8 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/container/container.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/container/container.component.html
@@ -4,12 +4,11 @@
 <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">
+          [rendering]="rendering"
+          class="row">
         </sc-placeholder>
-      </div>
     </div>
   </div>
 </ng-template>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html
index 73345c8ddb..a977dc0125 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html
@@ -1,17 +1,15 @@
-<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>
\ No newline at end of file
+<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>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts
index b05924d97d..2759415ee3 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts
@@ -5,6 +5,11 @@ import { Field, LinkField, SxaLinkListFields } from '@sitecore-jss/sitecore-jss-
 @Component({
   selector: 'app-link-list',
   templateUrl: './link-list.component.html',
+  host: {
+    'class': 'component link-list',
+    '[class]': 'styles',
+    '[attr.id]': 'id',
+  }
 })
 export class LinkListComponent extends SxaComponent<SxaLinkListFields> implements OnInit {
   title?: Field<string>;
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html
index 055e7c4656..655e16d0eb 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html
@@ -1,26 +1,21 @@
-<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>
+<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>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts
index e9e20b0e9b..d6a0086532 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts
@@ -6,6 +6,11 @@ import { JssContextService } from '../../jss-context.service';
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
+  host: {
+    'class': 'component navigation',
+    '[id]': 'id',
+    '[class]': 'styles + " " + rendering.params?.GridParameters',
+  },
 })
 export class NavigationComponent extends SxaComponent implements OnInit, OnDestroy {
   isEditing = false;
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html
index e64892b2ab..a720494bd2 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html
@@ -1,7 +1,5 @@
-<div class="component content {{styles}}" [attr.id]="id">
-  <div class="component-content">
-    <div class="field-content">
-        <div *scRichText="content || contextContent"></div>
-    </div>
+<div class="component-content">
+  <div class="field-content">
+    <div *scRichText="content || contextContent"></div>
   </div>
 </div>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts
index 5aabb60ca2..24b7c2f697 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts
@@ -7,6 +7,11 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-page-content',
   templateUrl: './page-content.component.html',
+  host: {
+    'class': 'component content',
+    '[class]': 'styles',
+    '[id]': 'id',
+  }
 })
 export class PageContentComponent extends SxaComponent implements OnInit, OnDestroy {
   content?: RichTextField;
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.html
index c86e432c0b..fd0e78695b 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.html
@@ -1,21 +1,19 @@
-<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 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>
-    </ng-container>
-  </div>
+      <div class="field-promolink">
+        <a *scLink="rendering.fields.PromoLink"></a>
+      </div>
+    </div>
+  </ng-container>
 </div>
 
 <ng-template #empty>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.ts
index 449d109b73..e304242cee 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.ts
@@ -4,5 +4,10 @@ import { SxaComponent } from '../sxa.component';
 @Component({
   selector: 'app-promo',
   templateUrl: './promo.component.html',
+  host: {
+    'class': 'component promo',
+    '[class]': "styles",
+    '[id]': "id",
+  },
 })
 export class PromoComponent extends SxaComponent {}
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html
index d5a94ea434..76b7fed400 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html
@@ -1,13 +1,8 @@
-<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 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>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts
index 7273a2a755..8a8cf7dcdc 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts
@@ -1,10 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+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',
+  host: {
+    'class': 'component rich-text',
+    '[class]': "styles",
+    "[attr.id]": "id"
+  },
 })
 export class RichTextComponent extends SxaComponent implements OnInit {
   text?: Field<string>;
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
index 462221c15b..4f970b1876 100644
--- 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
@@ -1,10 +1,11 @@
-<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
+  *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>
\ No newline at end of file
+</div>
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
index b74784462a..61bebd8986 100644
--- 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
@@ -4,6 +4,11 @@ import { SxaComponent } from '../sxa.component';
 @Component({
   selector: 'app-row-splitter',
   templateUrl: './row-splitter.component.html',
+  host: {
+    "class": "component row-splitter",
+    "[class]": "rowSplitterStyles",
+    "[id]": "id"
+  }
 })
 export class RowSplitterComponent extends SxaComponent {
   get rowSplitterStyles(): string {
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.html
index 163869dcdd..1a9f1eba69 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.html
@@ -1,12 +1,10 @@
-<div class="component title {{ styles }}" [attr.id]="id">
-  <div clas="component-content">
-    <div class="field-title">
-      <ng-container *ngIf="!pageEditing; else textOnly">
-        <a *scLink="link"></a>
-      </ng-container>
-    </div>
+<div clas="component-content">
+  <div class="field-title">
+    <ng-container *ngIf="!pageEditing; else textOnly">
+      <a *scLink="link"></a>
+    </ng-container>
   </div>
-  <ng-template #textOnly>
-    <span *scText="text"></span>
-  </ng-template>
 </div>
+<ng-template #textOnly>
+  <span *scText="text"></span>
+</ng-template>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.ts
index 24bfe4e724..e5b0cc750f 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.ts
@@ -7,6 +7,11 @@ import { JssContextService } from '../../jss-context.service';
 @Component({
   selector: 'app-title',
   templateUrl: './title.component.html',
+  host: {
+    'class': 'component title',
+    '[class]': 'styles',
+    '[id]': 'id',
+  }
 })
 export class TitleComponent extends SxaComponent<SxaTitleFields> implements OnInit, OnDestroy {
   text: TextField;
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss
index e4d86c107b..84956cec9d 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss
@@ -8,7 +8,9 @@
 
     @include respond-to(mobile-large) {
       padding-bottom: 0;
-      flex-direction: column-reverse;
+      sc-placeholder {
+        flex-direction: column-reverse;
+      }
     }
   }
 }
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/main.scss b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/main.scss
index 67333e3fcd..9f88a861b1 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/main.scss
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/main.scss
@@ -2,3 +2,13 @@
 @import "bootstrap/scss/bootstrap";
 @import "sass/main.scss";
 @import "basic/main.scss";
+
+sc-placeholder {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  &.row {
+    flex-direction: row;
+  }
+}
diff --git a/packages/create-sitecore-jss/src/templates/angular/.eslintrc b/packages/create-sitecore-jss/src/templates/angular/.eslintrc
index 0cb02d9811..ad78ff558d 100644
--- a/packages/create-sitecore-jss/src/templates/angular/.eslintrc
+++ b/packages/create-sitecore-jss/src/templates/angular/.eslintrc
@@ -20,6 +20,7 @@
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "@angular-eslint/no-host-metadata-property": "off",
         "@angular-eslint/component-selector": [
           "error",
           {