plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/sub-message-table/add-sub-message-dialog/add-sub-message-dialog.component.html

<h1 mat-dialog-title>Add Sub Message to Message {{data.name}}</h1>
<mat-horizontal-stepper #stepper class ="new-submessage-stepper">
    <mat-step label="Select Sub Message options" #step1>
        <div style="display:flex; flex-direction:row; justify-content: space-evenly; align-items: baseline;">
            <button mat-raised-button color="primary" style="width:100%;" matStepperNext (click)="createNew()">Create new Sub Message</button>
            <p style="width:100%; text-align:center;">or</p>
            <mat-form-field style="width:100%;">
                <mat-label>Select a Sub Message to Add to Message</mat-label>
                <mat-select [(ngModel)]="data.subMessage" (selectionChange)="storeId($event.value)">
                    <mat-option *ngFor="let option of (availableSubMessages|async)" [value]="option" [id]="option!==undefined && option.id !==undefined ? option.id :''" >
                        {{option.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <button mat-raised-button color="primary" *ngIf="data.subMessage?.id && data.subMessage?.id!=='-1'" (click)="moveToReview(stepper)">Proceed to Review</button>
    </mat-step>
    <mat-step label="Define Sub Message" #step2>
        <div style="display:flex; flex-direction:column">
            <mat-form-field>
                <mat-label>Name</mat-label>
                <input matInput [(ngModel)]="data.subMessage.name" required>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Description</mat-label>
                <input matInput [(ngModel)]="data.subMessage.description" required>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Message Rate</mat-label>
                <input matInput [(ngModel)]="data.subMessage.interfaceMessageRate" required>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Sub Message Number</mat-label>
                <input matInput [(ngModel)]="data.subMessage.interfaceSubMessageNumber" required>
            </mat-form-field>
        </div>
        <button mat-raised-button matStepperPrevious>Back</button>
        <button mat-raised-button color="primary" *ngIf="data.subMessage.name.length>0 && data.subMessage.description.length>0 && data.subMessage.interfaceMessageRate.length>0 && data.subMessage.interfaceSubMessageNumber.length>0" matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Review" #step3>
        <div style="display:flex;flex-direction:column">
            A sub message will be related to:
            <mat-label>{{data.name}}</mat-label> with the following properties:
            <mat-label>Sub Message Name: {{data.subMessage?.name}}</mat-label>
            <mat-label>Sub Message Description: {{data.subMessage?.description}}</mat-label>
            <mat-label>Sub Message Rate: {{data.subMessage?.interfaceMessageRate}}</mat-label>
            <mat-label>Sub Message Number: {{data.subMessage?.interfaceSubMessageNumber}}</mat-label>
        </div>
        <mat-dialog-actions align="end">
            <button mat-button matStepperPrevious>Back</button>
            <button mat-raised-button color="primary" [mat-dialog-close]="data">
                Ok
            </button>
        </mat-dialog-actions>
    </mat-step>
</mat-horizontal-stepper>