Add mit-alert-banner component for NDE banner display

src/app/custom1-module/customComponentMappings.ts

@@ -1,9 +1,12 @@
 import { PrimoBrandedNameComponent } from '../primo-branded-name/primo-branded-name.component';
 import { NoResultsComponent } from '../no-results/no-results.component';
 import { MitRequestCardComponent } from '../mit-request-card/mit-request-card.component';
+import { MitAlertBannerComponent } from '../mit-alert-banner/mit-alert-banner.component';
+
 // Define the map
 export const selectorComponentMap = new Map<string, any>([
   ['nde-search-no-results', NoResultsComponent],
   ['nde-logo-after', PrimoBrandedNameComponent],
   ['nde-request-card-after', MitRequestCardComponent],
+  ['nde-header-before', MitAlertBannerComponent],
 ]);

src/app/mit-alert-banner/mit-alert-banner.component.html

@@ -0,0 +1,5 @@
+@if (bannerText()) {
+  <aside id="mitl-alert-banner">
+    <div class="content-wrapper" [innerHTML]="bannerText()"></div>
+  </aside>
+}

src/app/mit-alert-banner/mit-alert-banner.component.scss

@@ -0,0 +1,29 @@
+aside {
+  background-color: #007899;
+  padding: 20px 0;
+
+    @media only screen and (max-width: 599.98px) {
+        padding: 20px 16px;
+    } 
+
+  .content-wrapper {
+    font-size: 18px;
+    font-weight: 500;
+    color: #e5f9ff;
+    margin: 0 auto;
+
+    a:link, a:visited, a:active {
+      color: #fff !important;
+      text-decoration: underline !important;
+      text-decoration-color: #00c8ff !important;
+
+      &:hover {
+        text-decoration-color: #fff !important;
+      }
+    }
+
+  }  
+}
+
+
+

src/app/mit-alert-banner/mit-alert-banner.component.spec.ts

@@ -0,0 +1,90 @@
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+import { of, Subject } from 'rxjs';
+import { MitAlertBannerComponent } from './mit-alert-banner.component';
+
+describe('MitAlertBannerComponent', () => {
+  let langChange: Subject<LangChangeEvent>;
+  let mockTranslate: TranslateService;
+
+  beforeEach(async () => {
+    langChange = new Subject<LangChangeEvent>();
+
+    await TestBed.configureTestingModule({
+      imports: [MitAlertBannerComponent],
+      providers: [
+        {
+          provide: TranslateService,
+          useValue: {
+            instant: (key: string) => key,
+            currentLang: 'en',
+            defaultLang: 'en',
+            onLangChange: langChange,
+            onTranslationChange: of({}),
+            onDefaultLangChange: of({}),
+          },
+        },
+      ],
+    }).compileComponents();
+    mockTranslate = TestBed.inject(TranslateService);
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(MitAlertBannerComponent);
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+  });
+
+  it('should display banner when translation has text', () => {
+    spyOn(mockTranslate, 'instant').and.returnValue(
+      '<p>Alert Banner Content</p>',
+    );
+    const fixture = TestBed.createComponent(MitAlertBannerComponent);
+    fixture.detectChanges();
+    const div = fixture.debugElement.query(By.css('div'));
+    expect(div).toBeTruthy();
+    expect(div.nativeElement.innerHTML).toBe('<p>Alert Banner Content</p>');
+  });
+
+  it('should hide banner when translation is empty', () => {
+    spyOn(mockTranslate, 'instant').and.returnValue('');
+    const fixture = TestBed.createComponent(MitAlertBannerComponent);
+    fixture.detectChanges();
+    const div = fixture.debugElement.query(By.css('div'));
+    expect(div).toBeFalsy();
+  });
+
+  it('should update banner when language changes', () => {
+    spyOn(mockTranslate, 'instant').and.returnValue('Initial Banner');
+    const fixture = TestBed.createComponent(MitAlertBannerComponent);
+    fixture.detectChanges();
+    (mockTranslate.instant as jasmine.Spy).and.returnValue('Updated Banner');
+    langChange.next({ lang: 'fr', translations: {} });
+    fixture.detectChanges();
+    const div = fixture.debugElement.query(By.css('div'));
+    expect(div.nativeElement.innerHTML).toBe('Updated Banner');
+  });
+
+  it('should hide banner if new language has empty translation', () => {
+    spyOn(mockTranslate, 'instant').and.returnValue('Initial Banner');
+    const fixture = TestBed.createComponent(MitAlertBannerComponent);
+    fixture.detectChanges();
+    (mockTranslate.instant as jasmine.Spy).and.returnValue('');
+    langChange.next({ lang: 'es', translations: {} });
+
+    fixture.detectChanges();
+    const div = fixture.debugElement.query(By.css('div'));
+    expect(div).toBeFalsy();
+  });
+
+  it('should use default label key', () => {
+    spyOn(mockTranslate, 'instant').and.returnValue('Default Banner');
+    const fixture = TestBed.createComponent(MitAlertBannerComponent);
+    fixture.detectChanges();
+    expect(mockTranslate.instant).toHaveBeenCalledWith('mit.alertBanner');
+    const div = fixture.debugElement.query(By.css('div'));
+    expect(div).toBeTruthy();
+    expect(div.nativeElement.innerHTML).toBe('Default Banner');
+  });
+});

src/app/mit-alert-banner/mit-alert-banner.component.ts

@@ -0,0 +1,27 @@
+import { Component, inject, input } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map, startWith } from 'rxjs';
+
+@Component({
+  selector: 'custom-mit-alert-banner',
+  standalone: true,
+  templateUrl: './mit-alert-banner.component.html',
+  styleUrl: './mit-alert-banner.component.scss',
+})
+export class MitAlertBannerComponent {
+  private translate = inject(TranslateService);
+
+  // Can be overridden by passing a different key via template binding
+  // Default: 'mit.alertBanner' - hide banner by setting to NOT_DEFINED in Alma
+  labelKey = input('mit.alertBanner');
+
+  // Compute banner text and only show if it has content
+  bannerText = toSignal(
+    this.translate.onLangChange.pipe(
+      startWith(null),
+      map(() => this.translate.instant(this.labelKey()).trim()),
+    ),
+    { initialValue: '' },
+  );
+}

src/app/styles/mit-theme.scss

@@ -892,4 +892,24 @@ mat-accordion[displaymode="flat"] {
 
 mat-accordion[displaymode="flat"] > [id="nui.getit.service_viewit"] {
      order: -1; 
+}
+
+// TOP ALERT BANNER STYLES
+// Overriding styles that we can't get specificity to override in the component styles
+#mitl-alert-banner {
+    .content-wrapper {
+        @include applyPrimoContainerWidths;
+
+        a:link, a:visited, a:active {
+        color: #fff;
+        text-decoration: underline;
+        text-decoration-color: #00c8ff;
+        text-underline-offset: 5px;
+        transition: all .25s ease-in-out 0s;
+
+            &:hover {
+                text-decoration-color: #fff;
+            }
+        }        
+    }
 }