PoC - component logic placed within a directive

projects/storefrontapp/src/app/spartacus/features/banner/custom-banner.component.ts

@@ -0,0 +1,27 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { BannerComponent, CmsComponentData } from '@spartacus/storefront';
+import {
+  CmsBannerComponent,
+  CmsService,
+  SemanticPathService,
+} from '@spartacus/core';
+
+@Component({
+  selector: 'custom-banner',
+  template: `
+    <h2>I am custom banner</h2>
+    <cx-banner></cx-banner>
+  `,
+  styles: `.custom-class { background: red }`,
+  encapsulation: ViewEncapsulation.None,
+})
+export class CustomBannerComponent extends BannerComponent {
+  constructor(
+    component: CmsComponentData<CmsBannerComponent>,
+    urlService: SemanticPathService,
+    cmsService: CmsService
+  ) {
+    super(component, urlService, cmsService);
+    this.styleClasses = 'custom-class';
+  }
+}

projects/storefrontapp/src/app/spartacus/features/banner/custom-banner.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CustomBannerComponent } from './custom-banner.component';
+import { BannerModule } from '@spartacus/storefront';
+import { CmsConfig, provideConfig } from '@spartacus/core';
+
+@NgModule({
+  imports: [BannerModule],
+  declarations: [CustomBannerComponent],
+  providers: [
+    provideConfig(<CmsConfig>{
+      cmsComponents: {
+        SimpleResponsiveBannerComponent: {
+          component: CustomBannerComponent,
+        },
+      },
+    }),
+  ],
+})
+export class CustomBannerModule {}

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -97,6 +97,7 @@ import { SmartEditFeatureModule } from './features/smartedit/smartedit-feature.m
 import { StorefinderFeatureModule } from './features/storefinder/storefinder-feature.module';
 import { TrackingFeatureModule } from './features/tracking/tracking-feature.module';
 import { UserFeatureModule } from './features/user/user-feature.module';
+import { CustomBannerModule } from './features/banner/custom-banner.module';
 
 const featureModules = [];
 
@@ -245,6 +246,7 @@ if (environment.requestedDeliveryDate) {
     ProductConfiguratorTextfieldFeatureModule,
     ProductConfiguratorRulebasedFeatureModule,
     ...featureModules,
+    CustomBannerModule,
   ],
   providers: [
     // Adding the provider here because consents feature is not code-splitted to separate library and not lazy-loaded

projects/storefrontlib/cms-components/content/banner/banner.component.spec.ts

@@ -15,7 +15,7 @@ import {
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
 import { GenericLinkComponent } from '../../../shared/components/generic-link/generic-link.component';
-import { BannerComponent } from './banner.component';
+import { CxBannerComponent } from './banner.component';
 
 const mockBannerData: CmsBannerComponent = {
   uid: 'SiteLogoComponent',
@@ -76,15 +76,19 @@ class MockMediaComponent {
   @Input() container: any;
 }
 
-describe('BannerComponent', () => {
-  let bannerComponent: BannerComponent;
-  let fixture: ComponentFixture<BannerComponent>;
+describe('CxBannerComponent', () => {
+  let bannerComponent: CxBannerComponent;
+  let fixture: ComponentFixture<CxBannerComponent>;
   let el: DebugElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, FeaturesConfigModule],
-      declarations: [BannerComponent, MockMediaComponent, GenericLinkComponent],
+      declarations: [
+        CxBannerComponent,
+        MockMediaComponent,
+        GenericLinkComponent,
+      ],
       providers: [
         {
           provide: CmsComponentData,
@@ -101,7 +105,7 @@ describe('BannerComponent', () => {
       ],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(BannerComponent);
+    fixture = TestBed.createComponent(CxBannerComponent);
     bannerComponent = fixture.componentInstance;
     el = fixture.debugElement;
     fixture.detectChanges();

projects/storefrontlib/cms-components/content/banner/banner.component.ts

@@ -4,83 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-import {
-  CmsBannerComponent,
-  CmsService,
-  Image,
-  ImageGroup,
-  PageType,
-  SemanticPathService,
-} from '@spartacus/core';
-import { Observable } from 'rxjs';
-import { take, tap } from 'rxjs/operators';
-import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BannerComponent } from './banner.directive';
 
 @Component({
   selector: 'cx-banner',
   templateUrl: './banner.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BannerComponent {
-  routerLink: string | any[] | undefined;
-
-  @HostBinding('class') styleClasses: string | undefined;
-
-  data$: Observable<CmsBannerComponent> = this.component.data$.pipe(
-    tap((data) => {
-      this.setRouterLink(data);
-      this.styleClasses = data.styleClasses;
-    })
-  );
-
-  constructor(
-    protected component: CmsComponentData<CmsBannerComponent>,
-    protected urlService: SemanticPathService,
-    protected cmsService: CmsService
-  ) {}
-
-  /**
-   * Returns `_blank` to force opening the link in a new window whenever the
-   * `data.external` flag is set to true.
-   */
-  getTarget(data: CmsBannerComponent): string | null {
-    return data.external === 'true' || data.external === true ? '_blank' : null;
-  }
-
-  protected setRouterLink(data: CmsBannerComponent): void {
-    if (data.urlLink) {
-      this.routerLink = data.urlLink;
-    } else if (data.contentPage) {
-      this.cmsService
-        .getPage({
-          id: data.contentPage,
-          type: PageType.CONTENT_PAGE,
-        })
-        .pipe(take(1))
-        .subscribe((page) => {
-          this.routerLink = page?.label;
-        });
-    } else if (data.product) {
-      this.routerLink = this.urlService.transform({
-        cxRoute: 'product',
-        params: { code: data.product },
-      });
-    } else if (data.category) {
-      this.routerLink = this.urlService.transform({
-        cxRoute: 'category',
-        params: { code: data.category },
-      });
-    }
-  }
-
-  getImage(data: CmsBannerComponent): Image | ImageGroup | undefined {
-    if (data.media) {
-      if ('url' in data.media) {
-        return data.media as Image;
-      } else {
-        return data.media as ImageGroup;
-      }
-    }
-  }
-}
+export class CxBannerComponent extends BannerComponent {}

projects/storefrontlib/cms-components/content/banner/banner.directive.ts

@@ -0,0 +1,82 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Directive, HostBinding } from '@angular/core';
+import {
+  CmsBannerComponent,
+  CmsService,
+  Image,
+  ImageGroup,
+  PageType,
+  SemanticPathService,
+} from '@spartacus/core';
+import { Observable } from 'rxjs';
+import { take, tap } from 'rxjs/operators';
+import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
+
+@Directive()
+export class BannerComponent {
+  routerLink: string | any[] | undefined;
+
+  @HostBinding('class') styleClasses: string | undefined;
+
+  data$: Observable<CmsBannerComponent> = this.component.data$.pipe(
+    tap((data) => {
+      this.setRouterLink(data);
+      this.styleClasses = data.styleClasses;
+    })
+  );
+
+  constructor(
+    protected component: CmsComponentData<CmsBannerComponent>,
+    protected urlService: SemanticPathService,
+    protected cmsService: CmsService
+  ) {}
+
+  /**
+   * Returns `_blank` to force opening the link in a new window whenever the
+   * `data.external` flag is set to true.
+   */
+  getTarget(data: CmsBannerComponent): string | null {
+    return data.external === 'true' || data.external === true ? '_blank' : null;
+  }
+
+  protected setRouterLink(data: CmsBannerComponent): void {
+    if (data.urlLink) {
+      this.routerLink = data.urlLink;
+    } else if (data.contentPage) {
+      this.cmsService
+        .getPage({
+          id: data.contentPage,
+          type: PageType.CONTENT_PAGE,
+        })
+        .pipe(take(1))
+        .subscribe((page) => {
+          this.routerLink = page?.label;
+        });
+    } else if (data.product) {
+      this.routerLink = this.urlService.transform({
+        cxRoute: 'product',
+        params: { code: data.product },
+      });
+    } else if (data.category) {
+      this.routerLink = this.urlService.transform({
+        cxRoute: 'category',
+        params: { code: data.category },
+      });
+    }
+  }
+
+  getImage(data: CmsBannerComponent): Image | ImageGroup | undefined {
+    if (data.media) {
+      if ('url' in data.media) {
+        return data.media as Image;
+      } else {
+        return data.media as ImageGroup;
+      }
+    }
+  }
+}

projects/storefrontlib/cms-components/content/banner/banner.module.ts

@@ -14,7 +14,7 @@ import {
 } from '@spartacus/core';
 import { GenericLinkModule } from '../../../shared/components/generic-link/generic-link.module';
 import { MediaModule } from '../../../shared/components/media/media.module';
-import { BannerComponent } from './banner.component';
+import { CxBannerComponent } from './banner.component';
 
 @NgModule({
   imports: [
@@ -28,18 +28,18 @@ import { BannerComponent } from './banner.component';
     provideDefaultConfig(<CmsConfig>{
       cmsComponents: {
         SimpleResponsiveBannerComponent: {
-          component: BannerComponent,
+          component: CxBannerComponent,
         },
         BannerComponent: {
-          component: BannerComponent,
+          component: CxBannerComponent,
         },
         SimpleBannerComponent: {
-          component: BannerComponent,
+          component: CxBannerComponent,
         },
       },
     }),
   ],
-  declarations: [BannerComponent],
-  exports: [BannerComponent],
+  declarations: [CxBannerComponent],
+  exports: [CxBannerComponent],
 })
 export class BannerModule {}

projects/storefrontlib/cms-components/content/index.ts

@@ -6,7 +6,7 @@
 
 export * from './banner-carousel/banner-carousel.component';
 export * from './banner-carousel/banner-carousel.module';
-export * from './banner/banner.component';
+export * from './banner/banner.directive';
 export * from './banner/banner.module';
 export * from './link/link.component';
 export * from './link/link.module';