File
Extends
Metadata
| selector |
common-confirm-template |
| styleUrls |
./confirm-template.component.scss |
| templateUrl |
./confirm-template.component.html |
Index
Properties
|
|
|
Inputs
|
|
|
Accessors
|
|
|
|
displayIcon
|
Type : ApiStatusCodes
|
Default value : ApiStatusCodes.SUCCESS
|
|
|
|
Public
objectId
|
Type : string
|
Default value : UUID.UUID()
|
|
|
|
|
An identifier for parents to keep track of components
|
Accessors
|
successCode
|
getsuccessCode()
|
|
|
|
warningCode
|
getwarningCode()
|
|
|
import { Component, Input } from '@angular/core';
import { Base } from '../../models/base';
export enum ApiStatusCodes {
SUCCESS = '0',
ERROR = '1',
WARNING = '2'
}
@Component({
selector: 'common-confirm-template',
templateUrl: './confirm-template.component.html',
styleUrls: ['./confirm-template.component.scss']
})
export class ConfirmTemplateComponent extends Base {
@Input() displayIcon: ApiStatusCodes = ApiStatusCodes.SUCCESS;
constructor() {
super();
}
// Status codes
get successCode() {
return ApiStatusCodes.SUCCESS;
}
get errorCode() {
return ApiStatusCodes.ERROR;
}
get warningCode() {
return ApiStatusCodes.WARNING;
}
}
<ng-content select="[confirmationTitle]"></ng-content>
<common-page-section layout='noTips'>
<!-- Icons and confirmation messages -->
<div [ngSwitch]="displayIcon">
<ng-container *ngSwitchCase="successCode">
<div class="message-container border-success">
<p class="confirm-icon--success">
<i class="fa fa-2x fa-check-circle text-success pr-2" aria-label="success"></i>
</p>
<ng-container *ngTemplateOutlet="message"></ng-container>
</div>
</ng-container>
<ng-container *ngSwitchCase="errorCode">
<div class="message-container border-danger">
<p class="confirm-icon--error">
<i class="fa fa-2x fa-exclamation-triangle text-danger pr-2" aria-label="error"></i>
</p>
<ng-container *ngTemplateOutlet="message"></ng-container>
</div>
</ng-container>
<ng-container *ngSwitchCase="warningCode">
<div class="message-container border-warning">
<p class="confirm-icon--warning">
<i class="fa fa-2x fa-exclamation-circle text-warning pr-2" aria-label="warning"></i>
</p>
<ng-container *ngTemplateOutlet="message"></ng-container>
</div>
</ng-container>
</div>
</common-page-section>
<ng-content select="[AdditionalInfo]"></ng-content>
<ng-template #message>
<ng-content></ng-content>
</ng-template>
Legend
Html element with directive