[templates/angular-xmcloud] Fixed sxa components styles

Sitecore · Sep 4, 2024 · 242ac69 · 242ac69
1 parent bcbafbd
commit 242ac69
Show file tree

Hide file tree

Showing 20 changed files with 138 additions and 108 deletions.
diff --git a/...mplates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html b/...mplates/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/...templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts b/...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/...e-jss/src/templates/angular-xmcloud/src/app/components/container/container.component.html b/...e-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/...e-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html b/...e-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>
+<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/...ore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts b/...ore-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/...jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html b/...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/...e-jss/src/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts b/...e-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/...src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html b/...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/...s/src/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts b/...s/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/...-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.html b/...-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/...te-sitecore-jss/src/templates/angular-xmcloud/src/app/components/promo/promo.component.ts b/...te-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/...ore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html b/...ore-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/...ecore-jss/src/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts b/...ecore-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/...src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html b/...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>
+</div>
diff --git a/...s/src/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts b/...s/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/...-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.html b/...-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/...te-sitecore-jss/src/templates/angular-xmcloud/src/app/components/title/title.component.ts b/...te-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/...es/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_header.scss b/...es/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
@@ -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
@@ -20,6 +20,7 @@
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "@angular-eslint/no-host-metadata-property": "off",
         "@angular-eslint/component-selector": [
           "error",
           {