From 13ef41bd42fe6dae296c9e8a2d6fe3ea3d6149e7 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 2 Jul 2022 00:45:26 -0700
Subject: [PATCH] Update ngbRadioGroups to native buttons

---
 .../e2e/documents/documents-list.cy.ts        |  4 +--
 .../filterable-dropdown.component.html        | 12 ++++-----
 .../document-list.component.html              | 26 +++++++++----------
 .../document-list/document-list.component.ts  |  4 +--
 src-ui/src/styles.scss                        |  9 +++++++
 5 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src-ui/cypress/e2e/documents/documents-list.cy.ts b/src-ui/cypress/e2e/documents/documents-list.cy.ts
index 2dffe4e24..ccce51950 100644
--- a/src-ui/cypress/e2e/documents/documents-list.cy.ts
+++ b/src-ui/cypress/e2e/documents/documents-list.cy.ts
@@ -67,12 +67,12 @@ describe('documents-list', () => {
   })
 
   it('should change to table "details" view', () => {
-    cy.get('div.btn-group-toggle input[value="details"]').parent().click()
+    cy.get('div.btn-group input[value="details"]').next().click()
     cy.get('table')
   })
 
   it('should change to large cards view', () => {
-    cy.get('div.btn-group-toggle input[value="largeCards"]').parent().click()
+    cy.get('div.btn-group input[value="largeCards"]').next().click()
     cy.get('app-document-card-large')
   })
 
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index 3e202dce9..d5eb29e90 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -16,13 +16,11 @@
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
       <div *ngIf="!editing && multiple" class="list-group-item d-flex">
-        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator" (change)="selectionModel.toggleOperator()" [disabled]="!operatorToggleEnabled">
-          <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" class="btn-check" name="logicalOperator" value="and" i18n> All
-          </label>
-          <label ngbButtonLabel class="btn btn-outline-primary">
-            <input ngbButton type="radio" class="btn-check" name="logicalOperator" value="or" i18n> Any
-          </label>
+        <div class="btn-group btn-group-xs flex-fill">
+          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!operatorToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd" value="and">
+          <label class="btn btn-outline-primary" for="logicalOperatorAnd" i18n>All</label>
+          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!operatorToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr" value="or">
+          <label class="btn btn-outline-primary" for="logicalOperatorOr" i18n>Any</label>
         </div>
       </div>
       <div class="list-group-item">
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index f812be217..b136a0456 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -13,23 +13,21 @@
       <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
     </div>
   </div>
-
-  <div class="btn-group btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="displayMode"
-    (ngModelChange)="saveDisplayMode()">
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn-check btn-sm" value="details">
+  <div class="btn-group flex-fill" role="group">
+    <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="details" (ngModelChange)="saveDisplayMode()" id="displayModeDetails">
+    <label for="displayModeDetails" class="btn btn-outline-primary btn-sm">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#list-ul" />
       </svg>
     </label>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn-check btn-sm" value="smallCards">
+    <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="smallCards" (ngModelChange)="saveDisplayMode()" id="displayModeSmall">
+    <label for="displayModeSmall" class="btn btn-outline-primary btn-sm">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#grid" />
       </svg>
     </label>
-    <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn-check btn-sm" value="largeCards">
+    <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="largeCards" (ngModelChange)="saveDisplayMode()" id="displayModeLarge">
+    <label for="displayModeLarge" class="btn btn-outline-primary btn-sm">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#hdd-stack" />
       </svg>
@@ -39,15 +37,15 @@
   <div ngbDropdown class="btn-group ms-2 flex-fill">
     <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
-      <div class="w-100 d-flex btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="listSort">
-        <label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill">
-          <input ngbButton type="radio" class="btn btn-check btn-sm" [value]="false">
+      <div class="w-100 d-flex pb-2 mb-1 border-bottom">
+        <input type="radio" class="btn-check" [value]="false" [(ngModel)]="listSortReverse" id="listSortReverseFalse">
+        <label class="btn btn-outline-primary btn-sm mx-2 flex-fill" for="listSortReverseFalse">
           <svg class="toolbaricon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
           </svg>
         </label>
-        <label ngbButtonLabel class="btn-outline-primary btn-sm me-2 flex-fill">
-          <input ngbButton type="radio" class="btn btn-check btn-sm" [value]="true">
+        <input type="radio" class="btn-check" [value]="true" [(ngModel)]="listSortReverse" id="listSortReverseTrue">
+        <label class="btn btn-outline-primary btn-sm me-2 flex-fill" for="listSortReverseTrue">
           <svg class="toolbaricon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
           </svg>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index e27f14b14..6f1bc28cc 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -71,11 +71,11 @@ export class DocumentListComponent implements OnInit, OnDestroy {
       : DOCUMENT_SORT_FIELDS
   }
 
-  set listSort(reverse: boolean) {
+  set listSortReverse(reverse: boolean) {
     this.list.sortReverse = reverse
   }
 
-  get listSort(): boolean {
+  get listSortReverse(): boolean {
     return this.list.sortReverse
   }
 
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index e0934b84c..a6199b24d 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -121,6 +121,15 @@ svg.logo {
   box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--pngx-focus-alpha));
 }
 
+.btn-check:checked + .btn-outline-primary,
+.btn-check:active + .btn-outline-primary,
+.btn-outline-primary:active,
+.btn-outline-primary.active,
+.btn-outline-primary.dropdown-toggle.show {
+  background-color: var(--bs-primary);
+  color: var(--pngx-primary-text-contrast) !important;
+}
+
 .form-switch .form-check-input:focus {
   background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#bbb'/></svg>"));
 }