LP2000482 Angular 15 and Bootstrap 5 upgrade
[evergreen-equinox.git] / Open-ILS / src / eg2 / src / app / share / grid / grid-filter-control.component.html
index 0e5e8f2..25d8e0a 100644 (file)
@@ -14,9 +14,9 @@
 <ng-template #actionsTemplate>
   <div class="pt-2">
     <button class="btn btn-sm btn-outline-dark" (click)="applyFilterCommon(col)" i18n>Apply filter</button>
-    <span class="pl-2"></span>
+    <span class="ps-2"></span>
     <button class="btn btn-sm btn-outline-dark" (click)="clearFilter(col)" i18n>Clear filter</button>
-    <span class="pl-2"></span>
+    <span class="ps-2"></span>
     <button class="btn btn-sm btn-outline-dark" (click)="closeDropdown()" i18n>Close</button>
   </div>
 </ng-template>
@@ -70,7 +70,7 @@
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <select class="custom-select" [(ngModel)]="col.filterValue"
+                <select class="form-select" [(ngModel)]="col.filterValue"
                   (change)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
                   <option value="" i18n>Any</option>
@@ -94,7 +94,7 @@
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
+                <label class="form-label" for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
                   <option value="=" i18n>Is exactly</option>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
+                <label class="form-label" for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
+                <label class="form-label" for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
+                <label class="form-label" for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
+                <label class="form-label" for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
               </div>
               <div class="pt-2">
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
+                <label class="form-label" for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
                   <option value="=" i18n>Is exactly</option>
                   (onChangeAsYmd)="applyFilterCommon(col)"
                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"></eg-date-select>
                 <div [hidden]="col.filterOperator !== 'between'" class="form-inline form-group">
-                  <label for="eg-filter-end-date-select-{{col.name}}" style="width: 3em;" i18n>and</label>
+                  <label class="form-label" for="eg-filter-end-date-select-{{col.name}}" style="width: 3em;" i18n>and</label>
                   <eg-date-select [hidden]="col.filterOperator !== 'between'" #dateSelectTwo
                     (onChangeAsYmd)="applyFilterCommon(col)"
                     [disabled]="col.filterInputDisabled || context.dataSource.requestingData"
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div>
-                <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
+                <label class="form-label" for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
                   <option value="=" i18n>Is (or includes)</option>
                   <input type="checkbox"
                     [(ngModel)]="col.filterIncludeOrgAncestors"
                     class="form-check-input" id="include-ancestors">
-                  <label class="form-check-label" for="include-ancestors" i18n>+ Ancestors</label>
+                  <label class="form-label form-check-label" for="include-ancestors" i18n>+ Ancestors</label>
                 </div>
                 <div class="form-check">
                   <input type="checkbox"
                     [(ngModel)]="col.filterIncludeOrgDescendants"
                     class="form-check-input" id="include-descendants">
-                  <label class="form-check-label" for="include-descendants" i18n>+ Descendants</label>
+                  <label class="form-label form-check-label" for="include-descendants" i18n>+ Descendants</label>
                 </div>
               </div>
               <div class="pt-2">