LP2000482 Angular 15 and Bootstrap 5 upgrade

[evergreen-equinox.git] / Open-ILS / src / eg2 / src / app / staff / circ / patron / bills.component.html

diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.html b/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.html
index 9f3baf4..d4019a9 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/circ/patron/bills.component.html
@@ -47,11 +47,11 @@
 
 <ng-container *ngIf="summary">
   <div class="row border-bottom border-secondary pb-2 pt-2 mb-4">
-    <div class="col-lg-3 pr-0 mr-0 border-right">
+    <div class="col-lg-3 pe-0 me-0 border-end">
       <div class="d-flex pt-1 pb-1 striped">
         <div class="flex-4" i18n>Total Owed:</div>
         <div class="flex-1"
-          [ngClass]="{'font-weight-bold' : summary.balance_owed() > 0}">
+          [ngClass]="{'fw-bold' : summary.balance_owed() > 0}">
           {{summary.balance_owed() || 0 | currency}}</div>
       </div>
       <div class="d-flex pt-1 pb-1">
@@ -64,7 +64,7 @@
       </div>
     </div>
 
-    <div class="col-lg-3 pr-0 mr-0 border-right">
+    <div class="col-lg-3 pe-0 me-0 border-end">
       <div class="d-flex pt-1 pb-1 striped">
         <div class="flex-4" i18n>Owed for Selected:</div>
         <div class="flex-1">{{owedSelected() | currency}}</div>
@@ -79,7 +79,7 @@
       </div>
     </div>
 
-    <div class="col-lg-3 pr-0 mr-0 border-right">
+    <div class="col-lg-3 pe-0 me-0 border-end">
       <div class="d-flex pt-1 pb-1 striped">
         <div class="flex-4" i18n>Refunds Available:</div>
         <div class="flex-1">{{refundsAvailable() | currency}}</div>
@@ -94,18 +94,18 @@
       </div>
     </div>
 
-    <div class="col-lg-3 pr-0 mr-0">
+    <div class="col-lg-3 pe-0 me-0">
       <div class="d-flex pt-1 pb-1 striped">
         <div class="flex-4">&nbsp;</div>
         <div class="flex-1">&nbsp;</div>
       </div>
       <div class="d-flex pt-1 pb-1">
         <div class="flex-4" i18n>Pending Payment:</div>
-        <div class="flex-1 font-weight-bold">{{pendingPayment() | currency}}</div>
+        <div class="flex-1 fw-bold">{{pendingPayment() | currency}}</div>
       </div>
       <div class="d-flex pt-1 pb-1 striped">
         <div class="flex-4" i18n>Pending Change:</div>
-        <div class="flex-1 font-weight-bold">{{pendingChange() | currency}}</div>
+        <div class="flex-1 fw-bold">{{pendingChange() | currency}}</div>
       </div>
     </div>
   </div>
@@ -118,8 +118,8 @@
 <div class="row bg-light border border-dark rounded pt-2 pb-2 mt-2 mb-4 payment-form">
   <div class="col-lg-12 d-flex form-inline form-validated">
     <div class="flex-1"></div>
-    <div class="ml-2"><label for="payment-type" i18n>Payment Type:</label></div>
-    <div class="ml-1">
+    <div class="ms-2"><label class="form-label" for="payment-type" i18n>Payment Type:</label></div>
+    <div class="ms-1">
       <select [(ngModel)]="paymentType" class="form-control" id="payment-type">
         <option value="cash_payment" i18n>Cash</option>
         <option value="check_payment" i18n>Check</option>
@@ -131,23 +131,23 @@
         <option value="goods_payment" i18n>Goods</option>
       </select>
     </div>
-    <div class="ml-2"><label for="check-number" i18n>Check Number:</label></div>
-    <div class="ml-1">
+    <div class="ms-2"><label class="form-label" for="check-number" i18n>Check Number:</label></div>
+    <div class="ms-1">
       <input type="text" class="form-control" [(ngModel)]="checkNumber"
         id="check-number" [disabled]="paymentType !== 'check_payment'"/>
     </div>
-    <div class="ml-2"><label for="pay-amount" i18n>Payment Received:</label></div>
-    <div class="ml-1">
+    <div class="ms-2"><label class="form-label" for="pay-amount" i18n>Payment Received:</label></div>
+    <div class="ms-1">
       <input type="number" class="form-control" [(ngModel)]="paymentAmount"
         (ngModelChange)="updatePendingColumn()" id="pay-amount" [min]="0"/>
     </div>
-    <div class="ml-2 form-check form-check-inline">
+    <div class="ms-2 form-check form-check-inline">
       <input class="form-check-input" type="checkbox"
         (ngModelChange)="applySetting('eg.circ.bills.annotatepayment', $event)"
         id="annotate" [(ngModel)]="annotatePayment"/>
-      <label class="form-check-label" for="annotate" i18n>Annotate</label>
+      <label class="form-label form-check-label" for="annotate" i18n>Annotate</label>
     </div>
-    <div class="ml-2">
+    <div class="ms-2">
       <button class="btn btn-outline-dark" (click)="applyPayment()"
         [disabled]="disablePayment()" i18n>Apply Payment</button>
     </div>
@@ -333,26 +333,24 @@
       <div class="form-check form-check-inline">
       <input class="form-check-input" type="checkbox" id="patron-credit-cbox"
         [(ngModel)]="convertChangeToCredit"/>
-      <label class="form-check-label" for="patron-credit-cbox" i18n>
+      <label class="form-label form-check-label" for="patron-credit-cbox" i18n>
         Convert Change To Patron Credit
       </label>
       </div>
     </div>
     <div class="d-flex flex-colum justify-content-end">
-      <div class="form-check form-check-inline ml-2">
+      <div class="form-check form-check-inline ms-2">
       <input class="form-check-input" type="checkbox" id="receipt-on-payment-cbox"
         (ngModelChange)="applySetting('circ.bills.receiptonpay', $event)"
         [(ngModel)]="receiptOnPayment"/>
-      <label class="form-check-label" for="receipt-on-payment-cbox" i18n>
+      <label class="form-label form-check-label" for="receipt-on-payment-cbox" i18n>
         Receipt On Payment
       </label>
       </div>
     </div>
-    <div class="form-inline ml-2">
+    <div class="form-inline ms-2">
       <div class="input-group">
-        <div class="input-group-prepend">
-          <span class="input-group-text" i18n># Receipts</span>
-        </div>
+        <span class="input-group-text" i18n># Receipts</span>
         <input type="number" class="form-control num-receipts" [(ngModel)]="numReceipts"/>
       </div>
     </div>