Fix pager styles on SPA and MVC webstes

Author: Quique Fernandez

src/Web/WebMVC/wwwroot/css/app.min.css

@@ -12,7 +12,8 @@
 }
 
     .esh-pager-item--navigable.is-disabled {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
     }
 
     .esh-pager-item--navigable:hover {

src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css

@@ -4,7 +4,7 @@
             <nav>
                 <span class="esh-pager-item esh-pager-item--navigable"
                       id="Previous"
-                      [hidden]="buttonStates?.previousDisabled"
+                      [ngClass]="{'is-disabled': buttonStates?.previousDisabled}"
                       (click)="onPreviousCliked($event)"
                       aria-label="Previous">
                     Previous
@@ -16,7 +16,7 @@
 
                 <span class="esh-pager-item esh-pager-item--navigable"
                       id="Next"
-                      [hidden]="buttonStates?.nextDisabled"
+                      [ngClass]="{'is-disabled': buttonStates?.nextDisabled}"
                       (click)="onNextClicked($event)"
                       aria-label="Next">
                     Next

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html

@@ -11,6 +11,11 @@
         $margin: 5vw;
         margin: 0 $margin;
 
+        &.is-disabled {
+            opacity: 0;
+            pointer-events: none;
+        }
+
         &--navigable {
             cursor: pointer;