From fbee045855791a0f11e8a1b022c63a5d8a03ba8d Mon Sep 17 00:00:00 2001
From: Stephanie <stephanie.leary@equinoxoli.org>
Date: Tue, 28 Feb 2023 22:51:13 +0000
Subject: [PATCH] LP2000482 Bootstrap 5: form-select

Signed-off-by: Stephanie <stephanie.leary@equinoxoli.org>
---
 .../src/app/share/interval-input/interval-input.component.html    | 2 +-
 .../app/staff/acq/lineitem/manage-claims-dialog.component.html    | 2 +-
 .../staff/acq/provider/acq-provider-search-form.component.html    | 2 +-
 .../eg2/src/app/staff/acq/search/acq-search-form.component.html   | 4 ++--
 .../admin/server/coded-value-maps/composite-new.component.html    | 2 +-
 .../admin/workstation/workstations/workstations.component.html    | 2 +-
 .../eg2/src/app/staff/booking/create-reservation.component.html   | 2 +-
 .../src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html  | 4 ++--
 Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html | 6 +++---
 .../src/app/staff/cat/vandelay/match-set-new-point.component.html | 2 +-
 .../src/eg2/src/app/staff/cat/volcopy/copy-attrs.component.html   | 8 ++++----
 Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html   | 4 ++--
 Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html | 2 +-
 Open-ILS/src/eg2/src/app/staff/circ/patron/perms.component.html   | 2 +-
 .../eg2/src/app/staff/reporter/simple/sr-editor.component.html    | 2 +-
 .../src/eg2/src/app/staff/reporter/simple/sr-field.component.html | 8 ++++----
 .../src/app/staff/share/billing/credit-card-dialog.component.html | 2 +-
 .../app/staff/share/holdings/copy-alert-manager.component.html    | 2 +-
 .../eg2/src/app/staff/share/patron/penalty-dialog.component.html  | 2 +-
 19 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html b/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html
index 5b9919b90d..2fc2ed40a9 100644
--- a/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html
+++ b/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html
@@ -1,6 +1,6 @@
 <div class="input-group">
   <input class="form-control" type="numeric" [(ngModel)]="period" (ngModelChange)="changeListener()" />
-  <select class="form-control" [(ngModel)]="unit" (ngModelChange)="changeListener()">
+  <select class="form-select" [(ngModel)]="unit" (ngModelChange)="changeListener()">
     <option value="hours" i18n>hours</option>
     <option value="days" i18n>days</option>
     <option value="weeks" i18n>weeks</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/manage-claims-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/manage-claims-dialog.component.html
index 66aaff7005..cbbd27a75d 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/lineitem/manage-claims-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/lineitem/manage-claims-dialog.component.html
@@ -32,7 +32,7 @@
       </div>
       <ng-container *ngIf="claimEventTypes.length > 0">
         <label class="form-label" for="selectClaimEventTypes" i18n>Select Claim Action(s)</label>
-        <select class="form-control"  multiple="true" [size]="claimEventTypes.length"
+        <select class="form-select"  multiple="true" [size]="claimEventTypes.length"
           [(ngModel)]="selectedClaimEventTypes" [ngModelOptions]="{standalone: true}" id="selectClaimEventTypes">
           <option *ngFor="let clet of claimEventTypes" [value]="clet.id()" i18n>
            {{clet.code()}} ({{clet.org_unit().shortname()}}) <i>{{clet.description()}}</i>
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html
index 5cfb469207..ebab1e0146 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/provider/acq-provider-search-form.component.html
@@ -53,7 +53,7 @@
     </div>
     <div class="col-lg form-group">
       <label class="form-label" for="acqproIsActive" i18n>Active?</label>
-      <select class="form-control" id="acqproIsActive" [ngModelOptions]="{standalone: true}" [(ngModel)]="providerIsActive">
+      <select class="form-select" id="acqproIsActive" [ngModelOptions]="{standalone: true}" [(ngModel)]="providerIsActive">
         <option i18n value="active">Yes</option>
         <option i18n value="inactive">No</option>
         <option i18n value="any">Any</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html b/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html
index 3a245b7cd1..c0f5d648f9 100644
--- a/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/acq/search/acq-search-form.component.html
@@ -29,7 +29,7 @@
   </div>
   <div class="row mb-1" *ngFor="let t of searchTerms; let idx=index" [hidden]="!showForm">
     <div class="col-md-5 col-lg-3">
-      <select class="form-control" id="selected-search-term" [ngModelOptions]="{standalone: true}" [ngModel]="t.field"
+      <select class="form-select" id="selected-search-term" [ngModelOptions]="{standalone: true}" [ngModel]="t.field"
         (ngModelChange)="old = t.field; t.field = $event"
         (change)="clearSearchTerm(t, old)">
         <option disabled="disabled" i18n>Select Search Field</option>
@@ -41,7 +41,7 @@
       </select>
     </div>
     <div class="col-xs-2 ps-3">
-      <select class="form-control" id="selected-search-op" [ngModelOptions]="{standalone: true}" [(ngModel)]="t.op"
+      <select class="form-select" id="selected-search-op" [ngModelOptions]="{standalone: true}" [(ngModel)]="t.op"
         (ngModelChange)="oldOp = t.op; t.op = $event"
         (change)="clearSearchTermValueAfterOpChange(t, oldOp)">
         <option i18n value="">is</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/coded-value-maps/composite-new.component.html b/Open-ILS/src/eg2/src/app/staff/admin/server/coded-value-maps/composite-new.component.html
index aa240708ca..32fa65b647 100644
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/coded-value-maps/composite-new.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/coded-value-maps/composite-new.component.html
@@ -34,7 +34,7 @@
       <div class="row mb-1">
         <div class="col-lg-4 col-form-label">Operator:</div>
         <div class="col-lg-8">
-          <select class="form-control" [(ngModel)]="values.boolOp">
+          <select class="form-select" [(ngModel)]="values.boolOp">
             <option value='AND' i18n>AND</option>
             <option value='OR' i18n>OR</option>
             <option value='NOT' i18n>NOT</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html b/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html
index 82d8d7dc3e..8a0621681c 100644
--- a/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/workstation/workstations/workstations.component.html
@@ -60,7 +60,7 @@
     </div>
     <div class="row">
       <div class="col-lg-8">
-        <select class="form-control" [(ngModel)]="selectedName">
+        <select class="form-select" [(ngModel)]="selectedName">
           <option *ngFor="let ws of workstations" value="{{ws.name}}">
             <span *ngIf="ws.name === defaultName" i18n>
               {{ws.name}} (Default)
diff --git a/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html b/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html
index 766c2d1b3c..f91a86d328 100644
--- a/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html
@@ -9,7 +9,7 @@
           <div class="input-group-text">
             <label class="form-label input-group-text" for="ideal-reservation-type" i18n>Reservation type</label>
           </div>
-          <select class="form-control" id="ideal-reservation-type" formControlName="reservationType">
+          <select class="form-select" id="ideal-reservation-type" formControlName="reservationType">
             <option *ngFor="let type of reservationTypes" [ngValue]="type" i18n>{{type.name}}</option>
           </select>
         </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html b/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html
index 129063e0e9..2fbb4c71df 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html
@@ -12,7 +12,7 @@
       <div class="row mb-2">
         <div class="col-lg-3" i18n>Action (Rule Type)</div>
         <div class="col-lg-4">
-          <select class="form-control" [(ngModel)]="rule.ruleType"
+          <select class="form-select" [(ngModel)]="rule.ruleType"
             (change)="rulesetToRecord()">
             <option value='r' i18n>Replace</option>
             <option value='a' i18n>Add</option>
@@ -114,7 +114,7 @@
     <div class="row mt-2">
       <div class="col-lg-3" i18n>Record Source: </div>
       <div class="col-lg-6">
-        <select class="form-control" [(ngModel)]="source">
+        <select class="form-select" [(ngModel)]="source">
           <option value='b' i18n>Bucket</option>
           <option value='c' i18n>CSV File</option>
           <option value='r' i18n>Bib Record ID</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html
index 7526df02ae..4f12132366 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/export.component.html
@@ -76,7 +76,7 @@
           <label class="form-label" for="record-type" i18n>Record Type</label>
         </div>
         <div class="col-lg-6">
-          <select class="form-control" 
+          <select class="form-select" 
             [disabled]="exportingBasket"
             [(ngModel)]="recordType" id="record-type">
             <option i18n value="biblio">Bibliographic Records</option>
@@ -89,7 +89,7 @@
           <label class="form-label" for="record-format" i18n>Record Format</label>
         </div>
         <div class="col-lg-6">
-          <select class="form-control" 
+          <select class="form-select" 
             [(ngModel)]="recordFormat" id="record-format">
             <option i18n value="USMARC">MARC21</option>
             <option i18n value="UNIMARC">UNIMARC</option>
@@ -103,7 +103,7 @@
           <label class="form-label" for="record-encoding" i18n>Record Encoding</label>
         </div>
         <div class="col-lg-6">
-          <select class="form-control" 
+          <select class="form-select" 
             [(ngModel)]="recordEncoding" id="record-encoding">
             <option i18n value="UTF-8">UTF-8</option>
             <option i18n value="MARC8">MARC8</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set-new-point.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set-new-point.component.html
index 67b748c9d8..929ba7db59 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set-new-point.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/match-set-new-point.component.html
@@ -56,7 +56,7 @@
       <div class="row mb-1">
         <div class="col-lg-3">Operator:</div>
         <div class="col-lg-2">
-          <select class="form-control" [(ngModel)]="values.boolOp">
+          <select class="form-select" [(ngModel)]="values.boolOp">
             <option value='AND' i18n>AND</option>
             <option value='OR' i18n>OR</option>
           </select>
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/copy-attrs.component.html b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/copy-attrs.component.html
index 08988d4314..b0d1c29fad 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/copy-attrs.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/copy-attrs.component.html
@@ -261,7 +261,7 @@
 
     <div *ngIf="displayAttr('loan_duration')">
       <ng-template #loanDurationTemplate>
-        <select class="form-control" 
+        <select class="form-select" 
           id="loan_duration-input" [(ngModel)]="values['loan_duration']">
           <option value="1" i18n>{{loanDurationShort.text}}</option>
           <option value="2" i18n>{{loanDurationNormal.text}}</option>
@@ -275,7 +275,7 @@
 
     <div *ngIf="displayAttr('fine_level')">
       <ng-template #fineLevelTemplate>
-        <select class="form-control" 
+        <select class="form-select" 
           id="fine_level-input" [(ngModel)]="values['fine_level']">
           <option value="1" i18n>{{fineLevelLow.text}}</option>
           <option value="2" i18n>{{fineLevelNormal.text}}</option>
@@ -304,7 +304,7 @@
 
     <div *ngIf="displayAttr('circ_modifier')">
       <ng-template #circModifierTemplate>
-        <select class="form-control" id='circ_modifier-input' 
+        <select class="form-select" id='circ_modifier-input' 
           [(ngModel)]="values['circ_modifier']">
           <option [value]="null" i18n>&lt;Unset&gt;</option>
           <option *ngFor="let mod of volcopy.commonData.acp_circ_modifier"
@@ -411,7 +411,7 @@
 
     <div *ngIf="displayAttr('mint_condition')">
       <ng-template #mintConditionTemplate>
-        <select class="form-control" 
+        <select class="form-select" 
           id="mint_condition-input" [(ngModel)]="values['mint_condition']">
           <option value="t" i18n>{{mintConditionYes.text}}</option>
           <option value="f" i18n>{{mintConditionNo.text}}</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
index f9cee1d0bc..15f7e3f731 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
@@ -118,7 +118,7 @@
           <label class="form-label" for='multi-hold-count' i18n>Number of copies:</label>
         </div>
         <div class="col-lg-6">
-          <select class="form-control" name="multi-hold-count"
+          <select class="form-select" name="multi-hold-count"
             id="multi-hold-count" [(ngModel)]="multiHoldCount">
             <option [value]="num"
               *ngFor="let num of holdCountRange()">{{num}}</option>
@@ -315,7 +315,7 @@
         <div class="col-lg-1">{{ctx.holdMeta.bibSummary.display.author}}</div>
         <div class="col-lg-2">
           <ng-container *ngIf="ctx.holdMeta.parts.length">
-            <select class="form-control"  (change)="setPart(ctx, $event)"
+            <select class="form-select"  (change)="setPart(ctx, $event)"
               [ngModel]="ctx.holdMeta.part ? ctx.holdMeta.part.id() : ''">
               <option value="" i18n>Any Part</option>
               <option *ngFor="let part of ctx.holdMeta.parts"
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
index bb81ecd231..aa2af03771 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
@@ -287,7 +287,7 @@
           <div class="row mt-4 gx-3 row-cols-auto">
             <label class="form-label col-form-label" for="ident-type" i18n>Query Type</label>
             <div class="col">
-              <select class="form-control" name="ident-type"
+              <select class="form-select" name="ident-type"
                 [(ngModel)]="context.identSearch.queryType">
                 <option i18n value="identifier|isbn">ISBN</option>
                 <option i18n value="identifier|upc">UPC</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/perms.component.html b/Open-ILS/src/eg2/src/app/staff/circ/patron/perms.component.html
index b967327349..1e3f2b6c84 100644
--- a/Open-ILS/src/eg2/src/app/staff/circ/patron/perms.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/circ/patron/perms.component.html
@@ -48,7 +48,7 @@
               (ngModelChange)="permApplyChanged(perm, $event)"/>
           </div>
           <div class="col-lg-2">
-            <select class="form-control" 
+            <select class="form-select" 
               [ngModel]="userHasPermAtDepth(perm)"
               (ngModelChange)="permDepthChanged(perm, $event)">
               <ng-container *ngFor="let depth of orgDepths">
diff --git a/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-editor.component.html b/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-editor.component.html
index b39f8170ea..2778930659 100644
--- a/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-editor.component.html
@@ -25,7 +25,7 @@
     <label class="form-label" for="report-type" i18n>Report Type:</label>
   </div>
   <div class="col-lg-3">
-    <select class="form-control" id="report-type" [ngModelOptions]="{standalone: true}" 
+    <select class="form-select" id="report-type" [ngModelOptions]="{standalone: true}" 
       [(ngModel)]="rptType" (change)="changeReportType()" [disabled]="!isNew">
       <option value="" disabled="disabled">Please Select a Report Type</option>
       <option value="srcirc">Circulation</option>
diff --git a/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-field.component.html b/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-field.component.html
index d81de73978..ef88778336 100644
--- a/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-field.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/reporter/simple/sr-field.component.html
@@ -27,7 +27,7 @@
 
       <div *ngIf="withTransforms">
         <span class="sr-field-explainer" i18n>Transform</span>
-        <select class="form-control" (change)="transformChange($event)" [disabled]="field.force_transform">
+        <select class="form-select" (change)="transformChange($event)" [disabled]="field.force_transform">
           <option *ngFor="let t of transforms" value="{{t.name}}" selected="{{ field.transform.name === t.name ? 'selected' : '' }}">
             <span *ngIf="t.name === 'Bare'" i18n>Raw Data</span>
             <span *ngIf="t.name === 'upper'" i18n>Upper Case</span>
@@ -64,7 +64,7 @@
 
       <div *ngIf="withOperators">
         <span class="sr-field-explainer" i18n>Operator</span>
-        <select class="form-control" (change)="operatorChange($event)" [disabled]="field.force_operator">
+        <select class="form-select" (change)="operatorChange($event)" [disabled]="field.force_operator">
           <option *ngFor="let o of operators" value="{{o.name}}" selected="{{ field.operator.name === o.name ? 'selected' : '' }}">
             <span *ngIf="o.name === '= any'" i18n>Equals</span> {{ '' // this and the next are used for bools only }}
             <span *ngIf="o.name === '<> any'" i18n>Does Not Equal</span>
@@ -166,7 +166,7 @@
             <eg-interval-input [initialValue]="field.filter_value" (onChange)="setSingleValue($event)"></eg-interval-input>
           </div>
           <div *ngSwitchCase="'bool'">
-            <select class="form-control" (change)="setSingleValue($event.target.value)">
+            <select class="form-select" (change)="setSingleValue($event.target.value)">
               <option selected="{{ !field.filter_value ? 'selected' : '' }}" disabled="disabled" i18n>Select one</option>
               <option value="{t}" selected="{{ field.filter_value === '{t}' ? 'selected' : '' }}" i18n>True</option>
               <option value="{f}" selected="{{ field.filter_value === '{f}' ? 'selected' : '' }}" i18n>False</option>
@@ -183,7 +183,7 @@
 
     <div *ngIf="withSortDirection" class="sr-field-sortdir col-md-5">
       <span class="sr-field-explainer" i18n>Direction</span>
-      <select class="form-control" (change)="directionChange($event)">
+      <select class="form-select" (change)="directionChange($event)">
 
         <option *ngIf="field.datatype === 'timestamp'" value="ascending" selected="{{ field.direction === 'ascending' ? 'selected' : '' }}" i18n>Later dates at the bottom</option>
         <option *ngIf="field.datatype === 'number' || field.datatype === 'int' || field.datatype === 'float' || field.datatype === 'money'"
diff --git a/Open-ILS/src/eg2/src/app/staff/share/billing/credit-card-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/billing/credit-card-dialog.component.html
index d9f53e1c90..45b3cda378 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/billing/credit-card-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/billing/credit-card-dialog.component.html
@@ -12,7 +12,7 @@
         <div class="row">
           <div class="col-lg-4"><label class="form-label" i18n>Process Where</label></div>
           <div class="col-lg-8">
-            <select class="form-control" [(ngModel)]="args.where_process">
+            <select class="form-select" [(ngModel)]="args.where_process">
               <option [value]='1' [disabled]="!supportsExternal" i18n>
                 Process payment through Evergreen
               </option>
diff --git a/Open-ILS/src/eg2/src/app/staff/share/holdings/copy-alert-manager.component.html b/Open-ILS/src/eg2/src/app/staff/share/holdings/copy-alert-manager.component.html
index 2f0df0f053..1bd0bd657a 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/holdings/copy-alert-manager.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holdings/copy-alert-manager.component.html
@@ -79,7 +79,7 @@
           {{nextStatuses[0].name()}}
         </ng-container>
         <ng-container *ngIf="nextStatuses.length > 1">
-          <select class="form-control" [(ngModel)]="nextStatus">
+          <select class="form-select" [(ngModel)]="nextStatus">
             <option [value]="stat.id()" *ngFor="let stat of nextStatuses">
               {{stat.name()}}
             </option>
diff --git a/Open-ILS/src/eg2/src/app/staff/share/patron/penalty-dialog.component.html b/Open-ILS/src/eg2/src/app/staff/share/patron/penalty-dialog.component.html
index bdbb348c5f..919eb394a2 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/patron/penalty-dialog.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/patron/penalty-dialog.component.html
@@ -26,7 +26,7 @@
       </div>
       <div class="flex-1"></div>
       <div>
-        <select class="form-control" 
+        <select class="form-select" 
           [(ngModel)]="penaltyTypeFromSelect">
           <option value='' i18n>Penalty Type...</option>
           <option value="{{pen.id()}}" *ngFor="let pen of penaltyTypes">
-- 
2.11.0