[ADF-3286] Snackbar now supports custom configuration (#3549)

* [ADF-3286] Snackbar now supports custom configuration

* [ADF-3286] Trailing whitespace removed

* [ADF-3286] Tests added

* [ADF-3286] Improved tests

* [ADF-3286] Documentation added

* [ADF-3286]  Logic improved

* [ADF-3286] Styling error fixed

* [ADF-3286] Broken tests fixed

* [ADF-3286] Broken tests fixed

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

@@ -31,5 +31,50 @@
     <div data-automation-id="notification-action-output">
         {{ actionOutput }}
     </div>
+    <mat-accordion>
+            <mat-expansion-panel>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                        <h3>Custom Configuration</h3>
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+    
+
+    <form [formGroup]="configForm">
+        <mat-form-field>
+            <input matInput class="form-control" formControlName="announcementMessage" placeholder="Announcement Message" >
+        </mat-form-field>
+        <mat-form-field>
+            <mat-select class="form-control" formControlName="direction" placeholder="Direction">
+                    <mat-option *ngFor="let direction of directions" [value]="direction.value">
+                        {{ direction.title }}
+                    </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput type="number" class="form-control" formControlName="duration" placeholder="Duration" >
+        </mat-form-field>
+        <mat-form-field>
+            <mat-select class="form-control" formControlName="horizontalPosition" placeholder="Horizontal Position">
+                <mat-option *ngFor="let horizontalPosition of horizontalPositions" [value]="horizontalPosition.value">
+                    {{ horizontalPosition.title }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <mat-form-field>
+            <mat-select class="form-control" formControlName="verticalPosition" placeholder="Vertical Position">
+                <mat-option *ngFor="let verticalPosition of verticalPositions" [value]="verticalPosition.value">{{ verticalPosition.title }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        
+    </form>
+
+    <button mat-icon-button (click)="sendCustomConfig()">
+        <mat-icon>send</mat-icon>
+    </button>
+
+</mat-expansion-panel>
+</mat-accordion>
 
 </div>

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

@@ -15,20 +15,83 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NotificationService } from '@alfresco/adf-core';
+import { MatSnackBarConfig } from '@angular/material';
+import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
 
 @Component({
     templateUrl: './notifications.component.html',
     styleUrls: ['./notifications.component.scss']
 })
-export class NotificationsComponent {
+export class NotificationsComponent implements OnInit {
 
     message = 'I ♥️ ADF';
     withAction = false;
     actionOutput = '';
 
-    constructor(private notificationService: NotificationService) {}
+    configForm: FormGroup;
+
+    snackBarConfig: MatSnackBarConfig = new MatSnackBarConfig();
+
+    directions = [
+        {value: 'ltr', title: 'Left to right'},
+        {value: 'rtl', title: 'Right to left'}
+    ];
+
+    horizontalPositions = [
+        {value: 'start', title: 'Start'},
+        {value: 'center', title: 'Center'},
+        {value: 'end', title: 'End'},
+        {value: 'left', title: 'Left'},
+        {value: 'right', title: 'Right'}
+    ];
+
+    verticalPositions = [
+        {value: 'top', title: 'Top'},
+        {value: 'bottom', title: 'Bottom'}
+    ];
+
+    constructor(private notificationService: NotificationService,
+                private formBuilder: FormBuilder) { }
+
+    ngOnInit() {
+        this.configForm = this.formBuilder.group({
+            announcementMessage: new FormControl(''),
+            direction: new FormControl(''),
+            horizontalPosition: new FormControl(''),
+            verticalPosition: new FormControl(''),
+            duration: new FormControl('')
+        });
+
+        this.configForm.valueChanges
+        .subscribe(configFormValues =>
+            this.setSnackBarConfig(configFormValues)
+        );
+
+    }
+
+    setSnackBarConfig(configFormValues: any) {
+
+        if (configFormValues.announcementMessage) {
+            this.snackBarConfig.announcementMessage = configFormValues.announcementMessage;
+        }
+        if (configFormValues.direction) {
+            this.snackBarConfig.direction = configFormValues.direction;
+
+        }
+        if (configFormValues.duration) {
+            this.snackBarConfig.duration = configFormValues.duration;
+
+        }
+        if (configFormValues.horizontalPosition) {
+            this.snackBarConfig.horizontalPosition = configFormValues.horizontalPosition;
+        }
+        if (configFormValues.verticalPosition) {
+            this.snackBarConfig.verticalPosition = configFormValues.verticalPosition;
+        }
+
+    }
 
     send() {
         this.actionOutput = '';
@@ -44,4 +107,20 @@ export class NotificationsComponent {
             }
         }
     }
+
+    sendCustomConfig() {
+        this.actionOutput = '';
+        console.log(this.snackBarConfig);
+
+        if (this.message) {
+            if (this.withAction) {
+                this.notificationService
+                    .openSnackMessageAction(this.message, 'Some action', this.snackBarConfig )
+                    .onAction()
+                    .subscribe(() => this.actionOutput = 'Action clicked');
+            } else {
+                this.notificationService.openSnackMessage(this.message, this.snackBarConfig);
+            }
+        }
+    }
 }