diff --git a/lib/core/src/lib/notifications/services/notification.service.ts b/lib/core/src/lib/notifications/services/notification.service.ts index 1d47f45863..7ecdfc5a6f 100644 --- a/lib/core/src/lib/notifications/services/notification.service.ts +++ b/lib/core/src/lib/notifications/services/notification.service.ts @@ -21,7 +21,7 @@ import { TranslationService } from '../../translation/translation.service'; import { Subject } from 'rxjs'; import { NotificationModel } from '../models/notification.model'; import { info, warning, error } from '../helpers/notification.factory'; -import { SnackbarContentComponent } from '../../snackbar-content'; +import { SnackbarContentComponent } from '../../snackbar-content'; import { SnackBarData } from '../../snackbar-content/snack-bar-data'; const INFO_SNACK_CLASS = 'adf-info-snackbar'; @@ -34,9 +34,7 @@ const ERROR_SNACK_CLASS = 'adf-error-snackbar'; export class NotificationService { notifications$: Subject = new Subject(); - constructor(private snackBar: MatSnackBar, - private translationService: TranslationService) { - } + constructor(private snackBar: MatSnackBar, private translationService: TranslationService) {} /** * Opens a SnackBar notification to show a message. @@ -46,7 +44,11 @@ export class NotificationService { * @param interpolateArgs The interpolation parameters to add for the translation * @returns Information/control object for the SnackBar */ - openSnackMessage(message: string, config?: number | MatSnackBarConfig>, interpolateArgs?: any): MatSnackBarRef { + openSnackMessage( + message: string, + config?: number | MatSnackBarConfig>, + interpolateArgs?: any + ): MatSnackBarRef { return this.dispatchNotification(message, null, config, interpolateArgs); } @@ -59,7 +61,12 @@ export class NotificationService { * @param interpolateArgs The interpolation parameters to add for the translation * @returns Information/control object for the SnackBar */ - openSnackMessageAction(message: string, action: string, config?: number | MatSnackBarConfig>, interpolateArgs?: any): MatSnackBarRef { + openSnackMessageAction( + message: string, + action: string, + config?: number | MatSnackBarConfig>, + interpolateArgs?: any + ): MatSnackBarRef { return this.dispatchNotification(message, action, config, interpolateArgs); } @@ -73,12 +80,17 @@ export class NotificationService { * @returns snackbar reference */ showError(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef { - return this.dispatchNotification(message, action, { - panelClass: ERROR_SNACK_CLASS, - data: { - showAction - } - }, interpolateArgs); + return this.dispatchNotification( + message, + action, + { + panelClass: ERROR_SNACK_CLASS, + data: { + showAction + } + }, + interpolateArgs + ); } /** @@ -91,12 +103,17 @@ export class NotificationService { * @returns snackbar reference */ showInfo(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef { - return this.dispatchNotification(message, action, { - panelClass: INFO_SNACK_CLASS, - data: { - showAction - } - }, interpolateArgs); + return this.dispatchNotification( + message, + action, + { + panelClass: INFO_SNACK_CLASS, + data: { + showAction + } + }, + interpolateArgs + ); } /** @@ -109,12 +126,17 @@ export class NotificationService { * @returns snackbar reference */ showWarning(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef { - return this.dispatchNotification(message, action, { - panelClass: WARN_SNACK_CLASS, - data: { - showAction - } - }, interpolateArgs); + return this.dispatchNotification( + message, + action, + { + panelClass: WARN_SNACK_CLASS, + data: { + showAction + } + }, + interpolateArgs + ); } /** @@ -133,25 +155,30 @@ export class NotificationService { this.notifications$.next(notification); } - private dispatchNotification(message: string, action?: string, config?: number | MatSnackBarConfig>, interpolateArgs?: any): MatSnackBarRef { - const translatedMessage: string = this.translationService.instant(message, interpolateArgs); - const translatedAction: string = this.translationService.instant(action, interpolateArgs); - const createNotification = this.getNotificationCreator(config); - this.notifications$.next(createNotification(translatedMessage)); - return this.snackBar.openFromComponent(SnackbarContentComponent, { - ...(typeof config === 'number' && {duration: config}), - panelClass: INFO_SNACK_CLASS, - ...( (typeof config === 'object') ? config : {} ), - data: { - actionLabel: translatedAction, - actionIcon: 'close', - actionIconAriaLabel: 'CLOSE', - message: translatedMessage, - showAction: true, - callActionOnIconClick: false, - ...( (typeof config === 'object') ? config.data : {} ) - } - }); + private dispatchNotification( + message: string, + action?: string, + config?: number | MatSnackBarConfig>, + interpolateArgs?: any + ): MatSnackBarRef { + const translatedMessage: string = this.translationService.instant(message, interpolateArgs); + const translatedAction: string = this.translationService.instant(action, interpolateArgs); + const createNotification = this.getNotificationCreator(config); + this.notifications$.next(createNotification(translatedMessage)); + return this.snackBar.openFromComponent(SnackbarContentComponent, { + ...(typeof config === 'number' && { duration: config }), + panelClass: INFO_SNACK_CLASS, + ...(typeof config === 'object' ? config : {}), + data: { + actionLabel: translatedAction, + actionIcon: 'close', + actionIconAriaLabel: 'CLOSE', + message: translatedMessage, + showAction: true, + callActionOnIconClick: false, + ...(typeof config === 'object' ? config.data : {}) + } + }); } private getNotificationCreator(config?: number | MatSnackBarConfig>) { diff --git a/lib/core/src/lib/styles/snackbar.theme.scss b/lib/core/src/lib/styles/snackbar.theme.scss index 3c17fcad4e..5591cfe1a9 100644 --- a/lib/core/src/lib/styles/snackbar.theme.scss +++ b/lib/core/src/lib/styles/snackbar.theme.scss @@ -1,13 +1,24 @@ @mixin adf-snackbar-theme() { - .adf-error-snackbar { - background-color: var(--theme-warn-color); - } + /* stylelint-disable selector-class-pattern */ + .mat-mdc-snack-bar-container { + &.adf-warning-snackbar, + &.adf-info-snackbar, + &.adf-error-snackbar { + --mat-mdc-snack-bar-button-color: #fff; + --mdc-snackbar-supporting-text-color: #fff; + --mdc-text-button-label-text-color: #fff; + } - .adf-warning-snackbar { - background-color: var(--theme-accent-color); - } + &.adf-warning-snackbar { + --mdc-snackbar-container-color: var(--theme-accent-color); + } - .adf-info-snackbar { - background-color: var(--theme-primary-color); + &.adf-info-snackbar { + --mdc-snackbar-container-color: var(--theme-primary-color); + } + + &.adf-error-snackbar { + --mdc-snackbar-container-color: var(--theme-warn-color); + } } }