LP2000482 Angular 15 and Bootstrap 5 upgrade

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

diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/checkout.component.html b/Open-ILS/src/eg2/src/app/staff/circ/patron/checkout.component.html
index 4481740..32f4334 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/circ/patron/checkout.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/circ/patron/checkout.component.html
@@ -17,7 +17,7 @@
   <div class="col-lg-12 d-flex">
     <div class="form-inline">
       <div class="input-group">
-        <div class="input-group-prepend">
+        <div class="input-group-text">
           <div ngbDropdown>
             <button ngbDropdownToggle class="btn btn-outline-dark" id="checkout-button">
               <ng-container *ngIf="!checkoutNoncat" i18n>Barcode</ng-container>
@@ -37,7 +37,7 @@
           [placeholder]="checkoutNoncat ? '' : 'Barcode...'" i18n-placeholder
           [(ngModel)]="checkoutBarcode" [disabled]="checkoutNoncat !== null"
           i18n-aria-label aria-label="Barcode Input" (keydown.enter)="checkout()" />
-        <div class="input-group-append">
+        <div class="input-group-text">
           <button class="btn btn-outline-dark" (keydown.enter)="checkout()" 
             (click)="checkout()" i18n>Submit</button>
         </div>
@@ -54,7 +54,7 @@
     </div>
     <div class="flex-1"></div>
     <div ngbDropdown>
-      <button ngbDropdownToggle class="btn mr-2" [ngClass]="{
+      <button ngbDropdownToggle class="btn me-2" [ngClass]="{
           'btn-outline-dark': dueDateOptions === 0,
           'btn-outline-success': dueDateOptions > 0
         }"
@@ -62,17 +62,17 @@
       <div ngbDropdownMenu>
         <button ngbDropdownItem (click)="toggleDateOptions(1)">
           <span *ngIf="dueDateOptions > 0" 
-            class="badge badge-success">&#x2713;</span>  
+            class="rounded-pill bg-success">&#x2713;</span>  
           <span *ngIf="dueDateOptions === 0" 
-            class="badge badge-warning">&#x2717;</span> 
-          <span class="pl-2" i18n>Specific Due Date</span>
+            class="rounded-pill bg-warning">&#x2717;</span> 
+          <span class="ps-2" i18n>Specific Due Date</span>
         </button>
         <button ngbDropdownItem (click)="toggleDateOptions(2)">
           <span *ngIf="dueDateOptions === 2" 
-            class="badge badge-success">&#x2713;</span>  
+            class="rounded-pill bg-success">&#x2713;</span>  
           <span *ngIf="dueDateOptions < 2" 
-            class="badge badge-warning">&#x2717;</span> 
-          <span class="pl-2" i18n>Specific Due Date Until Logout</span>
+            class="rounded-pill bg-warning">&#x2717;</span> 
+          <span class="ps-2" i18n>Specific Due Date Until Logout</span>
         </button>
       </div>
     </div>
@@ -158,16 +158,25 @@
 <div class="row mt-3 pt-3">
   <div class="col-lg-12 d-flex">
     <div class="flex-1"></div>
-    <div class="mr-3">
+    <div class="me-3">
+      <div class="form-check form-check-inline pt-1">
+        <input class="form-check-input" type="checkbox" 
+          (ngModelChange)="toggleStrictBarcode($event)"
+          id="strict-barcode-cbox" [(ngModel)]="strictBarcode"/>
+        <label class="form-label form-check-label" 
+          for="strict-barcode-cbox" i18n>Strict Barcode</label>
+      </div>
+    </div>
+    <div class="me-3">
       <div class="input-group">
-        <span class="material-icons pt-2 pr-2">
+        <span class="material-icons pt-2 pe-2">
           <ng-container *ngIf="!mayEmailReceipt()">print</ng-container>
           <ng-container *ngIf="mayEmailReceipt()">email</ng-container>
         </span>
         <button class="btn btn-outline-dark" (click)="quickReceipt()" i18n>
           Quick Receipt
         </button>
-        <div class="input-group-append">
+        <div class="input-group-text">
           <div ngbDropdown>
             <button ngbDropdownToggle class="btn btn-outline-dark">
             </button>
@@ -180,12 +189,12 @@
         </div>
       </div>
     </div>
-    <div class="mr-3">
+    <div class="me-3">
       <div class="input-group">
         <button class="btn btn-outline-dark" (click)="doneAutoReceipt()" i18n>
           Done
         </button>
-        <div class="input-group-append">
+        <div class="input-group-text">
           <div ngbDropdown>
             <button ngbDropdownToggle class="btn btn-outline-dark">
             </button>