[HXCS-1166] extend SnackBar to customize content appearance (#8379)

* [HXCS-1166] add templateRef to SnackBarData interface

* [HXCS-1166] update SnackBarContentComponent

to be able to manage data.templateRef

* [HXCS-1166] add tests to NotificationService

* [HXCS-1166] fix lint

* [HXCS-1166] add documentation

* [HXCS-1166] follow PR advices

* [HXCS-1166] typos

* [HXCS-1166] update testrail id

---------

Co-authored-by: Adriano Costa <Adriano.Costa@hyland.comgit>

demo-shell/src/app/components/notifications/notifications.component.html

@@ -4,17 +4,32 @@
     <ul>
         <li>Try setting custom message with unicode characters, for example: <strong>I ♥️ ADF</strong></li>
         <li>Try setting custom i18n resource key, for example: <strong>APP_LAYOUT.NOTIFICATIONS</strong></li>
+        <li>Try setting a decorative icon, for example <strong>info</strong>  or <strong>folder</strong></li>
         <li>Try toggling the action button. Clicking the action within SnackBar should update the label under the toggle button.</li>
         <li>All elements support <em>data-automation-id</em> attributes and can be automated.</li>
     </ul>
 
-    <mat-form-field>
-        <input
-            matInput
-            placeholder="Message"
-            [(ngModel)]="message"
-            data-automation-id="notification-message">
-    </mat-form-field>
+    <div>
+        <mat-label class="adf-label">Message:</mat-label>
+        <mat-form-field>
+            <input
+                matInput
+                placeholder="Message"
+                [(ngModel)]="message"
+                data-automation-id="notification-message">
+        </mat-form-field>
+    </div>
+
+    <div>
+        <mat-label class="adf-label">Decorative icon:</mat-label>
+        <mat-form-field>
+            <input
+                matInput
+                placeholder="Decorative Icon"
+                [(ngModel)]="decorativeIcon"
+                data-automation-id="notification-icon">
+        </mat-form-field>
+    </div>
 
     <div>
         <mat-slide-toggle

demo-shell/src/app/components/notifications/notifications.component.scss

@@ -1,3 +1,7 @@
 .app-main-content {
     padding: 10px;
+
+    .adf-label {
+        margin-right: 12px;
+    }
 }

demo-shell/src/app/components/notifications/notifications.component.ts

@@ -29,6 +29,7 @@ import { takeUntil } from 'rxjs/operators';
 export class NotificationsComponent implements OnInit, OnDestroy {
 
     message = 'I ♥️ ADF';
+    decorativeIcon = 'folder';
     withAction = false;
     actionOutput = '';
     snackBarConfigObject = '';
@@ -111,6 +112,9 @@ export class NotificationsComponent implements OnInit, OnDestroy {
                                     "duration": "${this.snackBarConfig.duration}",
                                     "horizontalPosition": "${ this.snackBarConfig.horizontalPosition}",
                                     "verticalPosition": "${ this.snackBarConfig.verticalPosition}"}`;
+
+        this.snackBarConfig.data = { decorativeIcon: this.decorativeIcon };
+
         if (this.message) {
             if (this.withAction) {
                 this.notificationService