<div fxLayout="column" class="tcs-live-apps-settings-pane" fxFill>
  <tc-tibco-cloud-widget-header style="height: 40px;" [icon]="'tcs-capabilities'" [headerText]="'Live Apps Custom Form Configuration'">
  </tc-tibco-cloud-widget-header>
  <div fxFlex style="padding: 20px;" fxLayout="column">
    <div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="5px" style="height: 20px">
      <p class="tcs-settings-text">Register formTags as custom forms:</p>
    </div>
    <div fxLayout="column" style="padding: 10px;">
      <div *ngFor="let tag of formConfig.processFormConfigs">
        <div class="existing-ref" *ngIf="tag.externalForm">
          <div>{{tag.formTag}}</div>
          <mat-icon (click)="deleteRefFunction(tag)" svgIcon="tcs-close-icon"></mat-icon>
        </div>
      </div>
      <div class="new-ref">
        <!-- Format of ref is <applicationName>.<applicationInternalName>.<processType>.<processName> -->
        <mat-form-field>
          <input matInput placeholder="applicationName" [(ngModel)]="newRef.applicationName">
        </mat-form-field>
        <div>.</div>
        <mat-form-field>
          <input matInput placeholder="applicationInternalName" [(ngModel)]="newRef.applicationInternalName">
        </mat-form-field>
        <div>.</div>
        <mat-form-field>
          <mat-select [(ngModel)]="newRef.processType" placeholder="processType">
            <mat-option value="creator">creator</mat-option>
            <mat-option value="action">action</mat-option>
            <mat-option value="casedata">casedata</mat-option>
            <mat-option value="workitem">workitem</mat-option>
          </mat-select>
        </mat-form-field>
        <div>.</div>
        <mat-form-field>
          <input matInput [placeholder]="(newRef.processType && newRef.processType) === 'workitem' ? 'activity name' : 'process name'" [(ngModel)]="newRef.processName">
        </mat-form-field>
        <button mat-raised-button
                [disabled]="!newRef ||
                !newRef.applicationName ||
                !newRef.applicationInternalName ||
                !newRef.processType ||
                !newRef.processName" class="add-ref-button" color="secondary"
                (click)="addRefFunction()">Add</button>
      </div>
    </div>
    <div fxFlex class="tcs-filler-panel"></div>
    <div fxLayout="row" fxLayoutAlign="end end" fxLayoutGap="10px" style="min-height: 50px">
      <button mat-raised-button color="primary" (click)="runSaveFunction()">Save</button>
    </div>
  </div>
</div>

./live-apps-settings-custom-forms.component.css

.tcs-live-apps-summary-cards-settings {
  overflow: hidden;
}

.tcs-card-config-widget-pane {
  overflow: hidden;
}

.tcs-settings-text {
  font-family: Source Sans Pro;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

.tcs-checkbox-label {
  font-family: Source Sans Pro;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

:host ::ng-deep .tcs-radio-label-content .mat-radio-label-content {
  font-family: Source Sans Pro;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

.new-ref {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.new-ref div {
  margin-left: 10px;
  margin-right: 10px;
}

.add-ref-button {
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
}

.existing-ref {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.existing-ref mat-icon {
  height: 15px;
  width: 15px;
  margin-left: 5px;
}