projects/storefrontlib/cms-components/misc/message/message.component.ts
| selector | cx-message |
| templateUrl | ./message.component.html |
Properties |
Inputs |
Outputs |
Accessors |
constructor()
|
| accordionText | |
Type : string
|
|
| actionButtonText | |
Type : string
|
|
| isVisibleCloseButton | |
Type : boolean
|
|
Default value : true
|
|
| showBody | |
Type : boolean
|
|
Default value : false
|
|
| text | |
Type : string
|
|
| type | |
Type : GlobalMessageType
|
|
| buttonAction | |
Type : EventEmitter<void>
|
|
| closeMessage | |
Type : EventEmitter<void>
|
|
| accordionText |
Type : string
|
Decorators :
@Input()
|
| actionButtonText |
Type : string
|
Decorators :
@Input()
|
| buttonAction |
Type : EventEmitter<void>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| closeMessage |
Type : EventEmitter<void>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
| iconTypes |
Default value : ICON_TYPE
|
| isVisibleCloseButton |
Default value : true
|
Decorators :
@Input()
|
| showBody |
Default value : false
|
Decorators :
@Input()
|
| text |
Type : string
|
Decorators :
@Input()
|
| type |
Type : GlobalMessageType
|
Decorators :
@Input()
|
| getCssClassesForMessage |
getgetCssClassesForMessage()
|
| getIconType |
getgetIconType()
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { GlobalMessageType } from '@spartacus/core';
import { ICON_TYPE } from '../../../cms-components/misc/icon/icon.model';
@Component({
selector: 'cx-message',
templateUrl: './message.component.html',
})
export class MessageComponent {
@Input()
text: string;
@Input()
actionButtonText: string;
@Input()
accordionText: string;
@Input()
showBody = false;
@Input()
isVisibleCloseButton = true;
@Input()
type: GlobalMessageType;
@Output()
closeMessage: EventEmitter<void> = new EventEmitter();
@Output()
buttonAction: EventEmitter<void> = new EventEmitter();
iconTypes = ICON_TYPE;
constructor() {}
get getCssClassesForMessage(): Record<string, boolean> {
return {
'cx-message-success':
this.type === GlobalMessageType.MSG_TYPE_CONFIRMATION,
'cx-message-info': this.type === GlobalMessageType.MSG_TYPE_INFO,
'cx-message-warning': this.type === GlobalMessageType.MSG_TYPE_WARNING,
'cx-message-danger': this.type === GlobalMessageType.MSG_TYPE_ERROR,
};
}
get getIconType(): string {
switch (this.type) {
case GlobalMessageType.MSG_TYPE_CONFIRMATION:
return ICON_TYPE.SUCCESS;
case GlobalMessageType.MSG_TYPE_WARNING:
return ICON_TYPE.WARNING;
case GlobalMessageType.MSG_TYPE_ERROR:
return ICON_TYPE.ERROR;
case GlobalMessageType.MSG_TYPE_INFO:
return ICON_TYPE.INFO;
}
}
}
<div [ngClass]="getCssClassesForMessage" class="cx-message">
<div class="cx-message-content">
<div class="cx-message-header">
<span class="cx-message-icon">
<cx-icon [type]="getIconType"></cx-icon>
</span>
<span class="cx-message-text">
{{ text }}
<button
*ngIf="accordionText"
(click)="showBody = !showBody"
class="cx-message-accordion-button link cx-action-link"
type="button"
>
{{ accordionText }}
<cx-icon
[type]="showBody ? 'CARET_UP' : 'CARET_DOWN'"
class="cx-message-accordion-icon"
></cx-icon>
</button>
<button
*ngIf="actionButtonText"
(click)="buttonAction.emit()"
class="btn btn-link cx-action-link"
type="button"
>
{{ actionButtonText }}
</button>
</span>
<button
*ngIf="isVisibleCloseButton"
(click)="closeMessage.emit()"
class="close"
type="button"
>
<cx-icon [type]="iconTypes.CLOSE"></cx-icon>
</button>
</div>
<div *ngIf="showBody || !accordionText" class="cx-message-body">
<ng-content></ng-content>
</div>
</div>
</div>