mes-11086-replaceHammerJSWithNative

package.json

@@ -116,11 +116,10 @@
     "deep-diff": "^1.0.2",
     "emoji-regex": "^10.4.0",
     "fuzzy-search": "^3.2.1",
-    "hammerjs": "^2.0.8",
     "jose": "^6.1.0",
     "jsonschema": "^1.4.1",
     "localforage-cordovasqlitedriver": "^1.8.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "moment": "^2.29.4",
     "ng-apexcharts": "1.15.0",
     "ngrx-store-localstorage": "^19.0.0",
@@ -149,7 +148,6 @@
     "@ionic/cli": "^7.2.1",
     "@sentry/cli": "^3.3.3",
     "@types/deep-diff": "^1.0.5",
-    "@types/hammerjs": "^2.0.45",
     "@types/jasmine": "~5.1.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "20.10.x",

src/app/pages/test-report/cat-a-mod1/components/speed-check/speed-check.html

@@ -24,7 +24,7 @@
     />
   </ion-col>
   <ion-col size="16">
-    <competency-button [onTap]="toggleNotMet" [redBorder]="getNotMet()">
+    <competency-button (onTap)="toggleNotMet()" [showRedBorder]="getNotMet()">
       <span class="not-met" id="{{competency}}Met">Not met</span>
     </competency-button>
   </ion-col>

src/app/pages/test-report/cat-adi-part2/components/manoeuvre-competency/manoeuvre-competency.html

@@ -1,9 +1,7 @@
-<div
-  class="manoeuvre-competency-button"
-  (tap)="addOrRemoveFault()"
-  (press)="addOrRemoveFault(true)"
-  (touchstart)="onTouchStart()"
-  (touchend)="onTouchEnd()"
+<competency-button
+  [buttonId]="'manoeuvre-competency-button'"
+  (onTap)="addOrRemoveFault()"
+  (onPress)="addOrRemoveFault(true)"
   [ngClass]="{
     'activated': touchState,
     'ripple-effect': rippleState
@@ -17,4 +15,4 @@
     <serious-fault-badge [showBadge]="hasSeriousFault()"></serious-fault-badge>
     <dangerous-fault-badge [showBadge]="hasDangerousFault()"></dangerous-fault-badge>
   </div>
-</div>
+</competency-button>

src/app/pages/test-report/cat-adi-part2/components/manoeuvre-competency/manoeuvre-competency.scss

@@ -22,6 +22,7 @@
 
     .fault-wrapper {
       display: flex;
+      align-items: center;
     }
   }
 }

src/app/pages/test-report/cat-adi-part2/components/manoeuvre-competency/manoeuvre-competency.ts

@@ -112,9 +112,6 @@ export class ManoeuvreCompetencyComponentAdiPart2 implements OnInit, OnDestroy {
   // Not a very good practice to use a boolean variable like wasPress
   // Because at this point it takes effort to understand what does it represents
   addOrRemoveFault = (wasPress = false): void => {
-    if (wasPress) {
-      this.applyRippleEffect();
-    }
     if (this.isRemoveFaultMode) {
       this.removeFault();
     } else {
@@ -193,28 +190,4 @@ export class ManoeuvreCompetencyComponentAdiPart2 implements OnInit, OnDestroy {
   hasSeriousFault = (): boolean => this.manoeuvreCompetencyOutcome === CompetencyOutcome.S;
 
   hasDangerousFault = (): boolean => this.manoeuvreCompetencyOutcome === CompetencyOutcome.D;
-
-  /**
-   * Manages the addition and removal of the ripple effect animation css class
-   * @returns any
-   */
-  applyRippleEffect = (): void => {
-    this.rippleState = true;
-    this.rippleTimeout = setTimeout(() => this.removeRippleEffect(), this.rippleEffectAnimationDuration);
-  };
-
-  removeRippleEffect = (): void => {
-    this.rippleState = false;
-    clearTimeout(this.rippleTimeout);
-  };
-
-  onTouchStart(): void {
-    clearTimeout(this.touchTimeout);
-    this.touchState = true;
-  }
-
-  onTouchEnd(): void {
-    // defer the removal of the touch state to allow the page to render
-    this.touchTimeout = setTimeout(() => (this.touchState = false), this.touchStateDelay);
-  }
 }

src/app/pages/test-report/cat-adi-part2/components/manoeuvres-popover/manoeuvres-popover.html

@@ -66,7 +66,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 1</h3>
       </ion-col>
       <ion-col
         class="manoeuvre-competencies-container manoeuvre-competency-button"
-        size="8"
+        size="36"
         *ngIf="asyncData1.manoeuvres.reverseRight?.selected"
       >
         <manoeuvre-competency-adi-part2
@@ -75,6 +75,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 1</h3>
           [attr.id]="getId(manoeuvreTypes.reverseRight, competencies.controlFault, 1)"
           index="0"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [attr.id]="getId(manoeuvreTypes.reverseRight, competencies.observationFault, 1)"
@@ -83,13 +84,17 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 1</h3>
           index="0"
         ></manoeuvre-competency-adi-part2>
       </ion-col>
-      <ion-col class="manoeuvre-competencies-container" size="8" *ngIf="asyncData1.manoeuvres.forwardPark?.selected">
+      <ion-col
+        class="manoeuvre-competencies-container"
+        size="36"
+        *ngIf="asyncData1.manoeuvres.forwardPark?.selected">
         <manoeuvre-competency-adi-part2
           [manoeuvre]="manoeuvreTypes.forwardPark"
           [competency]="competencies.controlFault"
           [attr.id]="getId(manoeuvreTypes.forwardPark, competencies.controlFault, 1)"
           index="0"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [manoeuvre]="manoeuvreTypes.forwardPark"
@@ -100,7 +105,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 1</h3>
       </ion-col>
       <ion-col
         class="manoeuvre-competencies-container"
-        size="8"
+        size="36"
         *ngIf="asyncData1.manoeuvres.reverseParkCarpark?.selected"
       >
         <manoeuvre-competency-adi-part2
@@ -109,6 +114,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 1</h3>
           [attr.id]="getId(manoeuvreTypes.reverseParkCarpark, competencies.controlFault, 1)"
           index="0"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [manoeuvre]="manoeuvreTypes.reverseParkCarpark"
@@ -119,7 +125,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 1</h3>
       </ion-col>
       <ion-col
         class="manoeuvre-competencies-container"
-        size="8"
+        size="36"
         *ngIf="asyncData1.manoeuvres.reverseParkRoad?.selected"
       >
         <manoeuvre-competency-adi-part2
@@ -128,6 +134,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 1</h3>
           [attr.id]="getId(manoeuvreTypes.reverseParkRoad, competencies.controlFault, 1)"
           index="0"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [manoeuvre]="manoeuvreTypes.reverseParkRoad"
@@ -206,13 +213,17 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 2</h3>
           </ion-col>
         </ion-row>
       </ion-col>
-      <ion-col class="manoeuvre-competencies-container" size="8" *ngIf="asyncData2.manoeuvres.reverseRight?.selected">
+      <ion-col
+        class="manoeuvre-competencies-container"
+        size="36"
+        *ngIf="asyncData2.manoeuvres.reverseRight?.selected">
         <manoeuvre-competency-adi-part2
           [manoeuvre]="manoeuvreTypes.reverseRight"
           [competency]="competencies.controlFault"
           [attr.id]="getId(manoeuvreTypes.reverseRight, competencies.controlFault, 2)"
           index="1"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [attr.id]="getId(manoeuvreTypes.reverseRight, competencies.observationFault, 2)"
@@ -221,13 +232,17 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 2</h3>
           index="1"
         ></manoeuvre-competency-adi-part2>
       </ion-col>
-      <ion-col class="manoeuvre-competencies-container" size="8" *ngIf="asyncData2.manoeuvres.forwardPark?.selected">
+      <ion-col
+        class="manoeuvre-competencies-container"
+        size="36"
+        *ngIf="asyncData2.manoeuvres.forwardPark?.selected">
         <manoeuvre-competency-adi-part2
           [manoeuvre]="manoeuvreTypes.forwardPark"
           [competency]="competencies.controlFault"
           [attr.id]="getId(manoeuvreTypes.forwardPark, competencies.controlFault, 2)"
           index="1"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [manoeuvre]="manoeuvreTypes.forwardPark"
@@ -238,7 +253,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 2</h3>
       </ion-col>
       <ion-col
         class="manoeuvre-competencies-container"
-        size="8"
+        size="36"
         *ngIf="asyncData2.manoeuvres.reverseParkCarpark?.selected"
       >
         <manoeuvre-competency-adi-part2
@@ -247,6 +262,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 2</h3>
           [attr.id]="getId(manoeuvreTypes.reverseParkCarpark, competencies.controlFault, 2)"
           index="1"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [manoeuvre]="manoeuvreTypes.reverseParkCarpark"
@@ -257,7 +273,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 2</h3>
       </ion-col>
       <ion-col
         class="manoeuvre-competencies-container"
-        size="8"
+        size="36"
         *ngIf="asyncData2.manoeuvres.reverseParkRoad?.selected"
       >
         <manoeuvre-competency-adi-part2
@@ -266,6 +282,7 @@ <h3 class="popover-title des-header-style-3">Manoeuvre 2</h3>
           [attr.id]="getId(manoeuvreTypes.reverseParkRoad, competencies.controlFault, 2)"
           index="1"
         ></manoeuvre-competency-adi-part2>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency-adi-part2
           class="second"
           [manoeuvre]="manoeuvreTypes.reverseParkRoad"

src/app/pages/test-report/cat-adi-part2/components/manoeuvres-popover/manoeuvres-popover.scss

@@ -41,6 +41,11 @@
     }
   }
 
+  .padding-row {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
   .popover-content {
     margin-left: 68px;
     border: 0 none var(--mes-white);

src/app/pages/test-report/cat-adi-part2/components/vehicle-check/vehicle-check.html

@@ -2,9 +2,9 @@
   <ion-col size="20" class="ion-no-padding">
     <competency-button
       class="show-me-question-tick"
-      [onTap]="toggleShowMeQuestion"
-      [onPress]="toggleShowMeQuestion"
-      [ripple]="false"
+      (onTap)="toggleShowMeQuestion()"
+      (onPress)="toggleShowMeQuestion()"
+      [allowRipple]="false"
       [ngClass]="{
         'checked' : selectedShowMeQuestion
       }"
@@ -17,9 +17,9 @@
   <ion-col class="ion-no-padding">
     <competency-button
       class="vehicle-check-competency"
-      [onTap]="onTap"
-      [onPress]="onPress"
-      [ripple]="canButtonRipple()"
+      (onTap)="onTap()"
+      (onPress)="onPress()"
+      [allowRipple]="canButtonRipple()"
       [ngClass]="{
         'checked': selectedShowMeQuestion,
         'fault': hasShowMeDrivingFault(),

src/app/pages/test-report/cat-b/components/manoeuvres-popover/manoeuvres-popover.html

@@ -74,14 +74,15 @@
 
       <ion-col
         class="manoeuvre-competencies-container-column"
-        size="8"
+        size="36"
         *ngIf="asyncData.manoeuvres.reverseRight?.selected"
       >
         <manoeuvre-competency
           [manoeuvre]="manoeuvreTypes.reverseRight"
           [competency]="competencies.controlFault"
           [attr.id]="getId(manoeuvreTypes.reverseRight, competencies.controlFault)"
         ></manoeuvre-competency>
+        <ion-row class="padding-row"></ion-row>
         <manoeuvre-competency
           [attr.id]="getId(manoeuvreTypes.reverseRight, competencies.observationFault)"
           [manoeuvre]="manoeuvreTypes.reverseRight"

src/app/pages/test-report/cat-b/components/manoeuvres-popover/manoeuvres-popover.scss

@@ -30,4 +30,8 @@
   .manoeuvre-competencies-container-column {
     margin-top: 40px;
   }
+  .padding-row {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
 }

src/app/pages/test-report/cat-b/components/vehicle-check/vehicle-check.html

@@ -3,9 +3,9 @@
     <competency-button
       id="show-me-question-tick"
       class="show-me-question-tick"
-      [onTap]="toggleShowMeQuestion"
-      [onPress]="toggleShowMeQuestion"
-      [ripple]="false"
+      (onTap)="toggleShowMeQuestion()"
+      (onPress)="toggleShowMeQuestion()"
+      [allowRipple]="false"
       [ngClass]="{
         'checked' : selectedShowMeQuestion
       }"
@@ -18,9 +18,9 @@
   <ion-col class="ion-no-padding">
     <competency-button
       class="vehicle-check-competency"
-      [onTap]="onTap"
-      [onPress]="onPress"
-      [ripple]="canButtonRipple()"
+      (onTap)="onTap()"
+      (onPress)="onPress()"
+      [allowRipple]="canButtonRipple()"
       [ngClass]="{
         'checked': selectedShowMeQuestion,
         'fault': hasShowMeDrivingFault(),

src/app/pages/test-report/cat-d/components/pcv-door-exercise/pcv-door-exercise.html

@@ -1,8 +1,8 @@
 <competency-button
   id="pcvDoor"
-  [onTap]="onTap"
-  [onPress]="onPress"
-  [ripple]="allowRipple"
+  (onTap)="onTap()"
+  (onPress)="onPress()"
+  [allowRipple]="allowRipple"
   [ngClass]="{
     'fault': hasDrivingFault(),
     'serious-fault': hasSeriousFault(),

src/app/pages/test-report/cat-manoeuvre/components/reverse-manoeuvre/reverse-manoeuvre.html

@@ -1,27 +1,27 @@
-<div
-  id="reverse-manoeuvre-competency-button-{{label}}"
+<competency-button
+  [buttonId]="`reverse-manoeuvre-competency-button-${label}`"
   class="reverse-manoeuvre-competency-button"
-  (tap)="addOrRemoveFault(isDelegated)"
-  (press)="addOrRemoveFault(true)"
-  (touchstart)="onTouchStart()"
-  (touchend)="onTouchEnd()"
+  (onTap)="addOrRemoveFault(isDelegated)"
+  (onPress)="addOrRemoveFault(true)"
   [ngClass]="{
-        'activated': touchState,
-        'ripple-effect': rippleState,
         'serious-fault': hasSeriousFault(),
         'dangerous-fault': hasDangerousFault()
     }"
 >
-  <span id="reverse-manoeuvre-competency-label-{{label}}" class="competency-label"> {{label}} </span>
+  <ion-col class="justify-content-center">
+    <span id="reverse-manoeuvre-competency-label-{{label}}" class="competency-label"> {{label}} </span>
+  </ion-col>
 
-  <div class="fault-wrapper">
-    <serious-fault-badge id="reverse-manoeuvre-competency-serious-fault-{{label}}" [showBadge]="hasSeriousFault()">
-    </serious-fault-badge>
+  <ion-col size="auto" class="justify-content-end">
+    <div class="fault-wrapper">
+      <serious-fault-badge id="reverse-manoeuvre-competency-serious-fault-{{label}}" [showBadge]="hasSeriousFault()">
+      </serious-fault-badge>
 
-    <dangerous-fault-badge
-      id="reverse-manoeuvre-competency-dangerous-fault-{{label}}"
-      [showBadge]="hasDangerousFault()"
-    >
-    </dangerous-fault-badge>
-  </div>
-</div>
+      <dangerous-fault-badge
+        id="reverse-manoeuvre-competency-dangerous-fault-{{label}}"
+        [showBadge]="hasDangerousFault()"
+      >
+      </dangerous-fault-badge>
+    </div>
+  </ion-col>
+</competency-button>