77 lines
1.9 KiB
HTML
77 lines
1.9 KiB
HTML
<div
|
|
class="fuse-alert-container"
|
|
*ngIf="!dismissible || (dismissible && !dismissed)"
|
|
[@fadeIn]="!dismissed"
|
|
[@fadeOut]="!dismissed"
|
|
>
|
|
<!-- Border -->
|
|
<div class="fuse-alert-border" *ngIf="appearance === 'border'"></div>
|
|
|
|
<!-- Icon -->
|
|
<div class="fuse-alert-icon" *ngIf="showIcon">
|
|
<!-- Custom icon -->
|
|
<div class="fuse-alert-custom-icon">
|
|
<ng-content select="[fuseAlertIcon]"></ng-content>
|
|
</div>
|
|
|
|
<!-- Default icons -->
|
|
<div class="fuse-alert-default-icon">
|
|
<mat-icon
|
|
*ngIf="type === 'primary'"
|
|
[svgIcon]="'heroicons_solid:check-circle'"
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
*ngIf="type === 'accent'"
|
|
[svgIcon]="'heroicons_solid:check-circle'"
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
*ngIf="type === 'warn'"
|
|
[svgIcon]="'heroicons_solid:x-circle'"
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
*ngIf="type === 'basic'"
|
|
[svgIcon]="'heroicons_solid:check-circle'"
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
*ngIf="type === 'info'"
|
|
[svgIcon]="'heroicons_solid:information-circle'"
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
*ngIf="type === 'success'"
|
|
[svgIcon]="'heroicons_solid:check-circle'"
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
*ngIf="type === 'warning'"
|
|
[svgIcon]="'heroicons_solid:exclamation'"
|
|
></mat-icon>
|
|
|
|
<mat-icon
|
|
*ngIf="type === 'error'"
|
|
[svgIcon]="'heroicons_solid:x-circle'"
|
|
></mat-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="fuse-alert-content">
|
|
<div class="fuse-alert-title">
|
|
<ng-content select="[fuseAlertTitle]"></ng-content>
|
|
</div>
|
|
|
|
<div class="fuse-alert-message">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dismiss button -->
|
|
<button class="fuse-alert-dismiss-button" mat-icon-button (click)="dismiss()">
|
|
<mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
|
|
</button>
|
|
</div>
|