[angular-xmcloud] Introduce angular SXA Image and Banner components

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/image/image.component.html

@@ -0,0 +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 className="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 *scLink="rendering.fields.TargetUrl">
+    <img *scImage="rendering.fields.Image" />
+  </a>
+</ng-template>
+
+<ng-template #empty>
+  <div className="component image {{ styles }}">
+    <div class="component-content">
+      <span class="is-empty-hint">Image</span>
+    </div>
+  </div>
+</ng-template>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/image/image.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit, OnDestroy, ViewChild, TemplateRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { EditMode, ImageField } from '@sitecore-jss/sitecore-jss-angular';
+import { SxaComponent } from '../sxa.component';
+import { JssContextService } from '../../jss-context.service';
+
+@Component({
+  selector: 'app-image',
+  templateUrl: './image.component.html',
+})
+export class ImageComponent extends SxaComponent implements OnInit, OnDestroy {
+  @ViewChild('default', { static: true }) defaultVariant: TemplateRef<any>;
+  @ViewChild('banner', { static: true }) bannerVariant: TemplateRef<any>;
+  classHeroBannerEmpty = '';
+  backgroundStyle = {};
+  modifyImageProps = {};
+  isEditing = false;
+  private contextSubscription: Subscription;
+
+  constructor(private jssContext: JssContextService) {
+    super();
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    const imageField = this.rendering.fields?.Image as ImageField;
+    this.backgroundStyle = imageField?.value?.src && {
+      'background-image': `url('${imageField.value.src}')`,
+    };
+
+    this.contextSubscription = this.jssContext.state.subscribe((newState) => {
+      this.isEditing = newState.sitecore && newState.sitecore.context.pageEditing;
+
+      this.classHeroBannerEmpty =
+        this.isEditing && imageField?.value?.class === 'scEmptyImage' ? 'hero-banner-empty' : '';
+
+      const isMetadataMode = newState.sitecore?.context?.editMode === EditMode.Metadata;
+      this.modifyImageProps = !isMetadataMode
+        ? {
+            ...imageField,
+            editable: imageField?.editable
+              ?.replace(`width="${imageField?.value?.width}"`, 'width="100%"')
+              .replace(`height="${imageField?.value?.height}"`, 'height="100%"'),
+          }
+        : {
+            ...imageField,
+            value: {
+              ...imageField?.value,
+              style: { width: '100%', height: '100%' },
+            },
+          };
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.contextSubscription) {
+      this.contextSubscription.unsubscribe();
+    }
+  }
+
+  public get variant(): TemplateRef<any> {
+    return this.rendering.params?.FieldNames === 'Banner'
+      ? this.bannerVariant
+      : this.defaultVariant;
+  }
+}

packages/sitecore-jss-angular/src/public_api.ts

@@ -56,6 +56,7 @@ export {
   ComponentFields,
   ComponentParams,
   getContentStylesheetLink,
+  EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
 export {
   RetryStrategy,