plugins/org.eclipse.osee.web/src/app/ple/messaging/types-interface/components/new-type-dialog/new-type-dialog.component.html

<h1 mat-dialog-title>Create New Platform Type</h1>
<mat-horizontal-stepper #stepper linear="true" class ="new-platform-type-stepper">
    <mat-step label="Select a logical type" [completed]="type.length !== 0">
        <mat-dialog-content>
            <mat-form-field>
                <mat-label>Logical Type</mat-label>
                <mat-select [(ngModel)]="type" (selectionChange)="setType($event.value)">
                    <mat-option *ngFor="let logicaltype of (logicalTypes |async)" [value]="logicaltype.id" >
                        {{logicaltype.name |titlecase}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </mat-dialog-content>
        <mat-dialog-actions align="end">
            <button mat-button matStepperNext [disabled]="type.length === 0">Next</button>
        </mat-dialog-actions>
    </mat-step>
    <mat-step label="Fill out type information" [completed]="isStep2Complete()">
        <mat-dialog-content>
            <mat-label class="mat-headline">Set fields for new type based on logical type {{(formInfo |async)?.name | titlecase}}</mat-label>
            <br>
            <ng-container *ngFor="let form of (formInfo | async)?.fields; index as i">
                <ng-container *ngIf="form.editable">
                    <mat-form-field>
                        <mat-label>{{form.name}}</mat-label>
                        <input matInput type="text" [(ngModel)]="fields[i].value" #input [required]="form.required">
                        <ng-container *ngIf="form.defaultValue">
                            <mat-hint align="end">Default Value: {{form.defaultValue}}</mat-hint>
                        </ng-container>
                    </mat-form-field>
                    <br>
                </ng-container>
                <ng-container *ngIf="!form.editable">
                    {{setDefaultValue(form,i)}}
                </ng-container>
            </ng-container>
        </mat-dialog-content>
        <mat-dialog-actions align="end">
            <button mat-button matStepperPrevious>Back</button>
            <ng-container *ngIf="isStep2Complete()">
                <button mat-raised-button matStepperNext [disabled]="!isStep2Complete()" [color]="isStep2Complete() ? 'primary': ''">Next</button>
            </ng-container>
            <ng-container *ngIf="!isStep2Complete()">
                <button mat-button matStepperNext [disabled]="!isStep2Complete()" [color]="isStep2Complete() ? 'primary': ''">Next</button>
            </ng-container>
        </mat-dialog-actions>
    </mat-step>
    <mat-step label="Summary">
        <mat-dialog-content>
            <p class="mat-headline">
                A new platform type of type {{(formInfo |async)?.name | titlecase}} will be created with the following properties:
            </p>
            <br>
            <br>
            <ng-container *ngFor="let field of fields">
                <ng-container *ngIf="field.value!==''">
                    <mat-label class="mat-title">{{field.name}} : {{field.value}}</mat-label>
                    <br>
                </ng-container>
            </ng-container>
        </mat-dialog-content>
        <mat-dialog-actions align="end">
            <button mat-button matStepperPrevious>Back</button>
            <button mat-raised-button color="primary" [mat-dialog-close]="fields">
                Ok
            </button>
        </mat-dialog-actions>
    </mat-step>
</mat-horizontal-stepper>