[ACS-7386][ADF] Break Notifications dependency on Material Module

lib/core/src/lib/notifications/components/add-notification.stories.component.ts

@@ -17,16 +17,18 @@
 
 import { Component } from '@angular/core';
 import { NotificationService } from '../services/notification.service';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'adf-add-notification-storybook',
-    template: `<button mat-raised-button (click)="showInfo()">Add Notification</button>`
+    standalone: true,
+    imports: [MatButtonModule],
+    template: ` <button mat-raised-button (click)="showInfo()">Add Notification</button>`
 })
 export class AddNotificationStorybookComponent {
-
     infoCounter: number = 1;
 
-    constructor(private notificationService: NotificationService) { }
+    constructor(private notificationService: NotificationService) {}
 
     showInfo() {
         this.notificationService.showInfo(`Example notification ${this.infoCounter}`);

lib/core/src/lib/notifications/components/notification-history.component.html

@@ -1,38 +1,34 @@
 <div (keyup)="onKeyPress($event)" tabindex="-1" role="button" class="adf-notification-history-container">
-    <button
-        mat-button
-        [matMenuTriggerFor]="menu"
-        [attr.aria-label]="'NOTIFICATIONS.OPEN_HISTORY' | translate"
-        title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
-        class="adf-notification-history-menu_button"
-        id="adf-notification-history-open-button"
-        (menuOpened)="onMenuOpened()"
-    >
-        <mat-icon matBadge="&#8288;" [matBadgeHidden]="!notifications.length" matBadgeColor="accent" matBadgeSize="small">notifications</mat-icon>
+    <button mat-button
+            [matMenuTriggerFor]="menu"
+            [attr.aria-label]="'NOTIFICATIONS.OPEN_HISTORY' | translate"
+            title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
+            class="adf-notification-history-menu_button"
+            id="adf-notification-history-open-button"
+            (menuOpened)="onMenuOpened()">
+        <mat-icon matBadge="&#8288;"
+                  [matBadgeHidden]="!notifications.length"
+                  matBadgeColor="accent"
+                  matBadgeSize="small">notifications
+        </mat-icon>
     </button>
-    <mat-menu
-        #menu="matMenu"
-        [xPosition]="menuPositionX"
-        [yPosition]="menuPositionY"
-        id="adf-notification-history-menu"
-        class="adf-notification-history-menu"
-    >
-        <div
-            class="adf-notification-history-list"
-            role="button"
-            tabindex="0"
-            (keyup.enter)="$event.stopPropagation()"
-            (click)="$event.stopPropagation()"
-        >
+    <mat-menu #menu="matMenu"
+              [xPosition]="menuPositionX"
+              [yPosition]="menuPositionY"
+              id="adf-notification-history-menu"
+              class="adf-notification-history-menu">
+        <div class="adf-notification-history-list"
+             role="button"
+             tabindex="0"
+             (keyup.enter)="$event.stopPropagation()"
+             (click)="$event.stopPropagation()">
             <div mat-subheader role="menuitem">
                 <span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
-                <button
-                    *ngIf="notifications.length"
-                    id="adf-notification-history-mark-as-read"
-                    mat-icon-button
-                    title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
-                    (click)="markAsRead()"
-                >
+                <button *ngIf="notifications.length"
+                        id="adf-notification-history-mark-as-read"
+                        mat-icon-button
+                        title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
+                        (click)="markAsRead()">
                     <mat-icon>done_all</mat-icon>
                 </button>
             </div>
@@ -41,26 +37,22 @@
 
             <mat-list role="menuitem">
                 <ng-container *ngIf="notifications.length; else empty_list_template">
-                    <mat-list-item
-                        *ngFor="let notification of paginatedNotifications"
-                        class="adf-notification-history-menu-item"
-                        (click)="onNotificationClick(notification)"
-                    >
-                        <div
-                            *ngIf="notification.initiator; else no_avatar"
-                            matListAvatar
-                            [outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"
-                        ></div>
+                    <mat-list-item *ngFor="let notification of paginatedNotifications"
+                                   class="adf-notification-history-menu-item"
+                                   (click)="onNotificationClick(notification)">
+                        <div *ngIf="notification.initiator; else no_avatar"
+                             matListAvatar
+                             [outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"></div>
                         <ng-template #no_avatar>
-                            <mat-icon mat-list-icon class="adf-notification-history-menu-initiator">{{ notification.icon }}</mat-icon>
+                            <mat-icon mat-list-icon
+                                      class="adf-notification-history-menu-initiator">{{ notification.icon }}
+                            </mat-icon>
                         </ng-template>
-                        <p
-                            class="adf-notification-history-menu-text adf-notification-history-menu-message"
-                            *ngFor="let message of notification.messages"
-                            mat-line
-                            [matTooltip]="message"
-                            matTooltipShowDelay="1000"
-                        >
+                        <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
+                           *ngFor="let message of notification.messages"
+                           mat-line
+                           [matTooltip]="message"
+                           matTooltipShowDelay="{{ 1000 }}">
                             {{ message }}
                         </p>
                         <p class="adf-notification-history-menu-text adf-notification-history-menu-date" mat-line>
@@ -69,7 +61,8 @@
                     </mat-list-item>
                 </ng-container>
                 <ng-template #empty_list_template>
-                    <mat-list-item id="adf-notification-history-component-no-message" class="adf-notification-history-menu-no-message">
+                    <mat-list-item id="adf-notification-history-component-no-message"
+                                   class="adf-notification-history-menu-no-message">
                         <p mat-line>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p>
                     </mat-list-item>
                 </ng-template>

lib/core/src/lib/notifications/components/notification-history.component.spec.ts

@@ -21,7 +21,7 @@ import { NotificationHistoryComponent } from './notification-history.component';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { NotificationService } from '../services/notification.service';
 import { StorageService } from '../../common/services/storage.service';
-import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
+import { NOTIFICATION_TYPE, NotificationModel } from '../models/notification.model';
 
 describe('Notification History Component', () => {
     let fixture: ComponentFixture<NotificationHistoryComponent>;

lib/core/src/lib/notifications/components/notification-history.component.ts

@@ -15,23 +15,44 @@
  * limitations under the License.
  */
 
-import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { NotificationService } from '../services/notification.service';
-import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
-import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
+import { NOTIFICATION_TYPE, NotificationModel } from '../models/notification.model';
+import { MatMenuModule, MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { StorageService } from '../../common/services/storage.service';
 import { PaginationModel } from '../../models/pagination.model';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatListModule } from '@angular/material/list';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
 
 @Component({
     selector: 'adf-notification-history',
+    standalone: true,
     templateUrl: 'notification-history.component.html',
     styleUrls: ['./notification-history.component.scss'],
+    imports: [
+        MatButtonModule,
+        MatMenuModule,
+        TranslateModule,
+        MatIconModule,
+        MatBadgeModule,
+        MatListModule,
+        NgIf,
+        NgForOf,
+        MatTooltipModule,
+        TimeAgoPipe,
+        InitialUsernamePipe
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit {
-
     public static MAX_NOTIFICATION_STACK_LENGTH = 100;
     public static NOTIFICATION_STORAGE = 'notification-history';
 
@@ -55,24 +76,17 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
     paginatedNotifications: NotificationModel[] = [];
     pagination: PaginationModel;
 
-    constructor(
-        private notificationService: NotificationService,
-        public storageService: StorageService,
-        public cd: ChangeDetectorRef) {
-
-    }
+    constructor(private notificationService: NotificationService, public storageService: StorageService, public cd: ChangeDetectorRef) {}
 
     ngOnInit() {
         this.notifications = JSON.parse(this.storageService.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)) || [];
     }
 
     ngAfterViewInit(): void {
-        this.notificationService.notifications$
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe((notification: NotificationModel) => {
-                this.addNewNotification(notification);
-                this.cd.detectChanges();
-            });
+        this.notificationService.notifications$.pipe(takeUntil(this.onDestroy$)).subscribe((notification: NotificationModel) => {
+            this.addNewNotification(notification);
+            this.cd.detectChanges();
+        });
     }
 
     ngOnDestroy() {
@@ -92,9 +106,10 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
     }
 
     saveNotifications() {
-        this.storageService.setItem(NotificationHistoryComponent.NOTIFICATION_STORAGE, JSON.stringify(this.notifications.filter((notification) =>
-            notification.type !== NOTIFICATION_TYPE.RECURSIVE
-        )));
+        this.storageService.setItem(
+            NotificationHistoryComponent.NOTIFICATION_STORAGE,
+            JSON.stringify(this.notifications.filter((notification) => notification.type !== NOTIFICATION_TYPE.RECURSIVE))
+        );
     }
 
     onMenuOpened() {

lib/core/src/lib/notifications/notification-history.module.ts

@@ -15,30 +15,12 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-import { PipeModule } from '../pipes/pipe.module';
 import { NotificationHistoryComponent } from './components/notification-history.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { PaginationModule } from '../pagination/pagination.module';
 import { AddNotificationStorybookComponent } from './components/add-notification.stories.component';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MaterialModule,
-        TranslateModule,
-        PipeModule,
-        PaginationModule
-    ],
-    declarations: [
-        NotificationHistoryComponent,
-        AddNotificationStorybookComponent
-    ],
-    exports: [
-        NotificationHistoryComponent,
-        AddNotificationStorybookComponent
-    ]
+    imports: [NotificationHistoryComponent, AddNotificationStorybookComponent],
+    exports: [NotificationHistoryComponent, AddNotificationStorybookComponent]
 })
-export class NotificationHistoryModule { }
+export class NotificationHistoryModule {}