create-sitecore-jss 22.6.0-canary.4 → 22.6.0-canary.40

package/dist/templates/angular-xmcloud/README.md

@@ -1,87 +1,87 @@
-# Angular for XM Cloud
-
-> Sitecore JSS Angular App for XM Cloud. This feature is currently in public beta.
-> If you encounter any issues or bugs, please submit a new issue in the [JSS GitHub Repo](https://github.com/Sitecore/jss)
-
-[Documentation](https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/introducing-sitecore-javascript-rendering-sdk.html)
-
-This Single Page Application (SPA) built with Angular is designed to be fully compatible with XM Cloud, incorporating several key add-ons and features to streamline the development process and enable seamless integration.
-
-The Angular XM Cloud integration consists of two parts:
-- `XM Cloud Angular`: simplifies connecting the application to XM Cloud and configuring the integration of multiple composable Sitecore products, and provides out-of-the-box helper components.
-- `XM Cloud Proxy`: Adds integration with XM Cloud for the JSS SPA applications and enables editing, personalization and component A/B/n testing support. See [XM Cloud Proxy](../node-xmcloud-proxy/) for more information.
-
-The following key features are supported:
-
-- `Context ID`: The Context ID environment variable simplifies setting up and configuring XM Cloud solutions. It's a unified identifier that maps to all your configured resources, such as content, sites, files, forms, and integration settings.
-
-- `XM Cloud Pages editing integration`: full integration with Pages - the dynamic visual page editor of XM Cloud.
-
-- `XM Cloud proxy personalization` with embedded personalization and component A/B/n testing.
-
-- `Forms support`: consume and post XM Cloud Forms in JSS apps. Using Forms, marketers can create forms, collect data, and analyze form performance.
-
-- `Internationalization` support.
-
-> The following features and integrations are not supported by Angular and Proxy apps for XM Cloud:
-> - Multisite
-> - The XM Cloud Components application
-> - BYOC components
-> - SXA sitemap, redirects, error pages
-> - Sitecore Experience Editor
-
-## Getting Started
-
-### Development
-
-When building and running your app in connected (development) mode the proxy application is not needed.
-
-Execute the following commands:
-```shell
-npm install
-npm run build
-npm run start:connected
-```
-
-> The following features are not supported in development mode:
-> * personalization
-> * server-side rendering
-> * editing
-
-### Production
-
-To build and run in production mode you need to have your Angular app side by side with the [Node XM Cloud proxy](../node-xmcloud-proxy/).
-
-Execute the following commands:
-
-For the Angular app:
-```shell
-npm install
-
-# It will build the angular app and copy the the resulting `/dist` folder into the specified proxy app folder
-npm run build
-```
-
-For the Proxy app:
-
-```shell
-npm install
-npm run start
-```
-
-For additional information on how to set up and run a SPA app in production mode against an XM Cloud instance you can check the [spa-starters monorepo](https://github.com/sitecorelabs/xmcloud-foundation-head/tree/main/headapps/spa-starter) in the XM Cloud Foundation Starter Kit.
-
-## Environment Variables
-
-The following environment variables can be used to configure the angular app. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
-
-| Parameter                              | Description                                                                                                                                |
-| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `PROXY_BUILD_PATH`                              | Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the XM Cloud Proxy application path. Default value `<xmcloud_proxy_path>\dist`.
-| `SITECORE_EDGE_CONTEXT_ID`                              | The Context ID, which covers many system configurations, is required for connecting to the XM Cloud back end. This is an XM Cloud system environment variable. When the application runs on the XM Cloud editing host, this value is always set to the preview Context ID.                   |
-| `SITECORE_API_KEY`                              | The API key for GRAPH_QL_ENDPOINT authentication. It should be used in combination with SITECORE_API_HOST for local development when connecting to a local XM Cloud instance
-| `SITECORE_API_HOST`                              | The API hostname, needed to build the application. This should be used in combination with SITECORE_API_KEY for local development. For example, https://<xmc_cm_host>.sitecorecloud.io.                   |
-| `GRAPH_QL_ENDPOINT`                              | Your GraphQL Edge endpoint. This is typically optional. By default, the endpoint is calculated using the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`. For a preview endpoint (a CM instance on XM Cloud or a local one), the value is <xmc_cm_host>/sitecore/api/graph/edge.  |
-| `SITECORE_SITE_NAME`                              | The name of your site. This variable overrides the config.appName defined in the package.json file. You can find this value in the Sites dashboard by opening the actions menu for a site and navigating to Settings > Developer settings. The default value is the name of your app.                   |
-| `DEFAULT_LANGUAGE`                              | The default language of your app. The default value is `en`                  |
-| `DEBUG`                  | Optional. Debug level for the application. Set the DEBUG environment variable to 'sitecore-jss:*' to see all logs. Refer to the [official docs](https://doc.sitecore.com/xmc/en/developers/jss/22/jss-xmc/debug-logging-in-jss-apps.html#namespaces) for all the available namespaces.
+# Angular for XM Cloud
+
+> Sitecore JSS Angular App for XM Cloud. This feature is currently in public beta.
+> If you encounter any issues or bugs, please submit a new issue in the [JSS GitHub Repo](https://github.com/Sitecore/jss)
+
+[Documentation](https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/introducing-sitecore-javascript-rendering-sdk.html)
+
+This Single Page Application (SPA) built with Angular is designed to be fully compatible with XM Cloud, incorporating several key add-ons and features to streamline the development process and enable seamless integration.
+
+The Angular XM Cloud integration consists of two parts:
+- `XM Cloud Angular`: simplifies connecting the application to XM Cloud and configuring the integration of multiple composable Sitecore products, and provides out-of-the-box helper components.
+- `XM Cloud Proxy`: Adds integration with XM Cloud for the JSS SPA applications and enables editing, personalization and component A/B/n testing support. See [XM Cloud Proxy](../node-xmcloud-proxy/) for more information.
+
+The following key features are supported:
+
+- `Context ID`: The Context ID environment variable simplifies setting up and configuring XM Cloud solutions. It's a unified identifier that maps to all your configured resources, such as content, sites, files, forms, and integration settings.
+
+- `XM Cloud Pages editing integration`: full integration with Pages - the dynamic visual page editor of XM Cloud.
+
+- `XM Cloud proxy personalization` with embedded personalization and component A/B/n testing.
+
+- `Forms support`: consume and post XM Cloud Forms in JSS apps. Using Forms, marketers can create forms, collect data, and analyze form performance.
+
+- `Internationalization` support.
+
+> The following features and integrations are not supported by Angular and Proxy apps for XM Cloud:
+> - Multisite
+> - The XM Cloud Components application
+> - BYOC components
+> - SXA sitemap, redirects, error pages
+> - Sitecore Experience Editor
+
+## Getting Started
+
+### Development
+
+When building and running your app in connected (development) mode the proxy application is not needed.
+
+Execute the following commands:
+```shell
+npm install
+npm run build
+npm run start:connected
+```
+
+> The following features are not supported in development mode:
+> * personalization
+> * server-side rendering
+> * editing
+
+### Production
+
+To build and run in production mode you need to have your Angular app side by side with the [Node XM Cloud proxy](../node-xmcloud-proxy/).
+
+Execute the following commands:
+
+For the Angular app:
+```shell
+npm install
+
+# It will build the angular app and copy the the resulting `/dist` folder into the specified proxy app folder
+npm run build
+```
+
+For the Proxy app:
+
+```shell
+npm install
+npm run start
+```
+
+For additional information on how to set up and run a SPA app in production mode against an XM Cloud instance you can check the [spa-starters monorepo](https://github.com/sitecorelabs/xmcloud-foundation-head/tree/main/headapps/spa-starter) in the XM Cloud Foundation Starter Kit.
+
+## Environment Variables
+
+The following environment variables can be used to configure the angular app. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
+
+| Parameter                              | Description                                                                                                                                |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `PROXY_BUILD_PATH`                              | Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the XM Cloud Proxy application path. Default value `<xmcloud_proxy_path>\dist`.
+| `SITECORE_EDGE_CONTEXT_ID`                              | The Context ID, which covers many system configurations, is required for connecting to the XM Cloud back end. This is an XM Cloud system environment variable. When the application runs on the XM Cloud editing host, this value is always set to the preview Context ID.                   |
+| `SITECORE_API_KEY`                              | The API key for GRAPH_QL_ENDPOINT authentication. It should be used in combination with SITECORE_API_HOST for local development when connecting to a local XM Cloud instance
+| `SITECORE_API_HOST`                              | The API hostname, needed to build the application. This should be used in combination with SITECORE_API_KEY for local development. For example, https://<xmc_cm_host>.sitecorecloud.io.                   |
+| `GRAPH_QL_ENDPOINT`                              | Your GraphQL Edge endpoint. This is typically optional. By default, the endpoint is calculated using the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`. For a preview endpoint (a CM instance on XM Cloud or a local one), the value is <xmc_cm_host>/sitecore/api/graph/edge.  |
+| `SITECORE_SITE_NAME`                              | The name of your site. This variable overrides the config.appName defined in the package.json file. You can find this value in the Sites dashboard by opening the actions menu for a site and navigating to Settings > Developer settings. The default value is the name of your app.                   |
+| `DEFAULT_LANGUAGE`                              | The default language of your app. The default value is `en`                  |
+| `DEBUG`                  | Optional. Debug level for the application. Set the DEBUG environment variable to 'sitecore-jss:*' to see all logs. Refer to the [official docs](https://doc.sitecore.com/xmc/en/developers/jss/22/jss-xmc/debug-logging-in-jss-apps.html#namespaces) for all the available namespaces.

package/dist/templates/angular-xmcloud/angular.json

@@ -1,33 +1,33 @@
-{
-  "projects": {
-    "<%- appName %>": {
-      "architect": {
-        "build": {
-          "options": {
-            "styles": [
-              "src/styles.css",
-              "src/assets/styles/main.scss"
-            ],
-            "stylePreprocessorOptions": {
-              "includePaths": ["src/assets/styles", "node_modules"]
-            }
-          }
-        },
-        "test": {
-          "options": {
-            "styles": ["src/styles.css", "src/assets/styles/main.scss"],
-            "stylePreprocessorOptions": {
-              "includePaths": ["src/assets/styles", "node_modules"]
-            }
-          }
-        }
-      }
-    }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "prefix": "app",
-      "style": "scss"
-    }
-  }
-}
+{
+  "projects": {
+    "<%- appName %>": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "src/styles.css",
+              "src/assets/styles/main.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/assets/styles", "node_modules"]
+            }
+          }
+        },
+        "test": {
+          "options": {
+            "styles": ["src/styles.css", "src/assets/styles/main.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/assets/styles", "node_modules"]
+            }
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "style": "scss"
+    }
+  }
+}

package/dist/templates/angular-xmcloud/package.json

@@ -1,17 +1,17 @@
-{
-  "config": {
-    "sitecoreDistPath": "/dist"
-  },
-  "scripts": {
-    "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build",
-    "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js",
-    "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
-  },
-  "dependencies": {
-    "@sitecore-cloudsdk/core": "^0.4.2",
-    "@sitecore-cloudsdk/events": "^0.4.2",
-    "font-awesome": "^4.7.0",
-    "sass": "^1.52.3",
-    "sass-alias": "^1.0.5"
-  }
-}
+{
+  "config": {
+    "sitecoreDistPath": "/dist"
+  },
+  "scripts": {
+    "postbuild:server": "npm-run-all --serial prepare:build prepare:proxy-build",
+    "prepare:build": "move-cli ./dist/main.js ./dist/server.bundle.js",
+    "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
+  },
+  "dependencies": {
+    "@sitecore-cloudsdk/core": "^0.4.2",
+    "@sitecore-cloudsdk/events": "^0.4.2",
+    "font-awesome": "^4.7.0",
+    "sass": "^1.52.3",
+    "sass-alias": "^1.0.5"
+  }
+}

package/dist/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html

@@ -1,5 +1,5 @@
-<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>

package/dist/templates/angular-xmcloud/src/app/components/container/container.component.html

@@ -1,14 +1,14 @@
-<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">
-        <sc-placeholder
-          [name]="placeholderName"
-          [rendering]="rendering"
-          class="row">
-        </sc-placeholder>
-    </div>
-  </div>
-</ng-template>
+<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">
+        <sc-placeholder
+          [name]="placeholderName"
+          [rendering]="rendering"
+          class="row">
+        </sc-placeholder>
+    </div>
+  </div>
+</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/image/image.component.html

@@ -1,36 +1,36 @@
-<ng-container [ngTemplateOutlet]="variant"></ng-container>
-
-<ng-template #default>
-  <div class="component image {{ styles }}" [attr.id]="id" *ngIf="rendering.fields; else empty">
-    <div class="component-content">
-      <ng-container *ngIf="isEditing || !rendering.fields.TargetUrl?.value?.href; else withLink">
-        <img *scImage="rendering.fields.Image" />
-      </ng-container>
-      <span class="image-caption field-imagecaption" *scText="rendering.fields.ImageCaption"></span>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #banner>
-  <div class="component hero-banner {{ styles }} {{ classHeroBannerEmpty }}" [attr.id]="id">
-    <div class="component-content sc-sxa-image-hero-banner" [ngStyle]="backgroundStyle">
-      <ng-container *ngIf="isEditing">
-        <img *scImage="modifyImageProps" />
-      </ng-container>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #withLink>
-  <a *scGenericLink="rendering.fields.TargetUrl">
-    <img *scImage="rendering.fields.Image" />
-  </a>
-</ng-template>
-
-<ng-template #empty>
-  <div class="component image {{ styles }}">
-    <div class="component-content">
-      <span class="is-empty-hint">Image</span>
-    </div>
-  </div>
-</ng-template>
+<ng-container [ngTemplateOutlet]="variant"></ng-container>
+
+<ng-template #default>
+  <div class="component image {{ styles }}" [attr.id]="id" *ngIf="rendering.fields; else empty">
+    <div class="component-content">
+      <ng-container *ngIf="isEditing || !rendering.fields.TargetUrl?.value?.href; else withLink">
+        <img *scImage="rendering.fields.Image" />
+      </ng-container>
+      <span class="image-caption field-imagecaption" *scText="rendering.fields.ImageCaption"></span>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #banner>
+  <div class="component hero-banner {{ styles }} {{ classHeroBannerEmpty }}" [attr.id]="id">
+    <div class="component-content sc-sxa-image-hero-banner" [ngStyle]="backgroundStyle">
+      <ng-container *ngIf="isEditing">
+        <img *scImage="modifyImageProps" />
+      </ng-container>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #withLink>
+  <a *scGenericLink="rendering.fields.TargetUrl">
+    <img *scImage="rendering.fields.Image" />
+  </a>
+</ng-template>
+
+<ng-template #empty>
+  <div class="component image {{ styles }}">
+    <div class="component-content">
+      <span class="is-empty-hint">Image</span>
+    </div>
+  </div>
+</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html

@@ -1,15 +1,15 @@
-<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 *scGenericLink="fieldLink"></a>
-      </div>
-    </li>
-  </ul>
-</div>
-<ng-template #defaultTitle>
-  <span class="is-empty-hint">Link list</span>
-</ng-template>
+<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 *scGenericLink="fieldLink"></a>
+      </div>
+    </li>
+  </ul>
+</div>
+<ng-template #defaultTitle>
+  <span class="is-empty-hint">Link list</span>
+</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.html

@@ -1,23 +1,23 @@
-<li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
-  <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
-    <a *scRouterLink="linkField" (click)="onClick($event)">
-      <ng-container *ngIf="navItemFields.NavigationTitle"
-        ><span *scText="navItemFields.NavigationTitle"></span
-      ></ng-container>
-      <ng-container *ngIf="!navItemFields.NavigationTitle && navItemFields.Title">
-        <span *scText="navItemFields.Title"></span
-      ></ng-container>
-      <ng-container *ngIf="!navItemFields.NavigationTitle && !navItemFields.Title">{{
-        navItemFields.DisplayName
-      }}</ng-container>
-    </a>
-  </div>
-  <ul *ngIf="hasChildren" class="clearfix">
-    <app-navigation-item
-      *ngFor="let childNavItemFields of navItemFields.Children"
-      [navItemFields]="childNavItemFields"
-      [relativeLevel]="childrenRelativeLevel"
-      (childLinkClickEvent)="onClick($event)"
-    ></app-navigation-item>
-  </ul>
-</li>
+<li [class]="cssClasses" [ngClass]="{ active: isActive }" tabIndex="0">
+  <div [ngClass]="{ 'navigation-title': true, child: hasChildren }" (click)="isActive = !isActive">
+    <a *scRouterLink="linkField" (click)="onClick($event)">
+      <ng-container *ngIf="navItemFields.NavigationTitle"
+        ><span *scText="navItemFields.NavigationTitle"></span
+      ></ng-container>
+      <ng-container *ngIf="!navItemFields.NavigationTitle && navItemFields.Title">
+        <span *scText="navItemFields.Title"></span
+      ></ng-container>
+      <ng-container *ngIf="!navItemFields.NavigationTitle && !navItemFields.Title">{{
+        navItemFields.DisplayName
+      }}</ng-container>
+    </a>
+  </div>
+  <ul *ngIf="hasChildren" class="clearfix">
+    <app-navigation-item
+      *ngFor="let childNavItemFields of navItemFields.Children"
+      [navItemFields]="childNavItemFields"
+      [relativeLevel]="childrenRelativeLevel"
+      (childLinkClickEvent)="onClick($event)"
+    ></app-navigation-item>
+  </ul>
+</li>

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html

@@ -1,21 +1,21 @@
-<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>
+<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>

package/dist/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html

@@ -1,5 +1,5 @@
-<div class="component-content">
-  <div class="field-content">
-    <div *scRichText="content || contextContent"></div>
-  </div>
-</div>
+<div class="component-content">
+  <div class="field-content">
+    <div *scRichText="content || contextContent"></div>
+  </div>
+</div>

package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.html

@@ -1 +1 @@
-<sc-placeholder [name]="sig" [rendering]="rendering">
+<sc-placeholder [name]="sig" [rendering]="rendering">

package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.html

@@ -1,21 +1,21 @@
-<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 *scGenericLink="rendering.fields.PromoLink"></a>
-      </div>
-    </div>
-  </ng-container>
-</div>
-
-<ng-template #empty>
-  <span className="is-empty-hint">Promo</span>
-</ng-template>
+<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 *scGenericLink="rendering.fields.PromoLink"></a>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+<ng-template #empty>
+  <span className="is-empty-hint">Promo</span>
+</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html

@@ -1,8 +1,8 @@
-<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>

package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html

@@ -1,11 +1,11 @@
-<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
+  *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>