ui: updated icons, converted link into button for semantic

README.md

@@ -6,8 +6,9 @@ A [lightbox2](https://github.com/lokesh/lightbox2) implementation port to use wi
 
 ## Version
 
-- For Angular 5, 6, 7, please use ngx-lightbox 1.x.x. `npm install ngx-lightbox@1.2.0`
+- For Angular >= 14, please use ngx-lightbox 3.x.x. `npm install ngx-lightbox@3.0.0`
 - For Angular >= 8, please use ngx-lightbox 2.x.x. `npm install [email protected]`
+- For Angular 5, 6, 7, please use ngx-lightbox 1.x.x. `npm install [email protected]`
 - For Angular 2, 4, please use [angular2-lightbox](https://github.com/themyth92/angular2-lightbox)
 
 ## [Demo](https://themyth92.com/project/ngx-lightbox)

src/lightbox-overlay.component.ts

@@ -49,8 +49,6 @@ export class LightboxOverlayComponent implements AfterViewInit, OnDestroy {
   public ngAfterViewInit(): void {
     const fadeDuration = this.options.fadeDuration;
 
-    this._rendererRef.setStyle(this._elemRef.nativeElement,
-      '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._elemRef.nativeElement,
       'animation-duration', `${fadeDuration}s`);
     this._sizeOverlay();

src/lightbox.component.ts

@@ -34,11 +34,11 @@ import {
              [hidden]="ui.showReloader"
              #image>
         <div class="lb-nav" [hidden]="!ui.showArrowNav" #navArrow>
-          <a class="lb-prev" [hidden]="!ui.showLeftArrow" (click)="prevImage()" #leftArrow></a>
-          <a class="lb-next" [hidden]="!ui.showRightArrow" (click)="nextImage()" #rightArrow></a>
+          <button type="button" class="lb-prev" [hidden]="!ui.showLeftArrow" (click)="prevImage()" #leftArrow></button>
+          <button type="button" class="lb-next" [hidden]="!ui.showRightArrow" (click)="nextImage()" #rightArrow></button>
         </div>
         <div class="lb-loader" [hidden]="!ui.showReloader" (click)="close($event)">
-          <a class="lb-cancel"></a>
+          <button type="button" class="lb-cancel"></button>
         </div>
       </div>
     </div>
@@ -51,18 +51,18 @@ import {
         </div>
         <div class="lb-controlContainer">
           <div class="lb-closeContainer">
-            <a class="lb-close" (click)="close($event)"></a>
+            <button type="button" class="lb-close" (click)="close($event)"></button>
           </div>
           <div class="lb-downloadContainer" [hidden]="!ui.showDownloadButton">
-            <a class="lb-download" (click)="download($event)"></a>
+            <button type="button" class="lb-download" (click)="download($event)"></button>
           </div>
           <div class="lb-turnContainer" [hidden]="!ui.showRotateButton">
-            <a class="lb-turnLeft" (click)="control($event)"></a>
-            <a class="lb-turnRight" (click)="control($event)"></a>
+            <button type="button" class="lb-turnLeft" (click)="control($event)"></button>
+            <button type="button" class="lb-turnRight" (click)="control($event)"></button>
           </div>
           <div class="lb-zoomContainer" [hidden]="!ui.showZoomButton">
-            <a class="lb-zoomOut" (click)="control($event)"></a>
-            <a class="lb-zoomIn" (click)="control($event)"></a>
+            <button type="button" class="lb-zoomOut" (click)="control($event)"></button>
+            <button type="button" class="lb-zoomIn" (click)="control($event)"></button>
           </div>
         </div>
       </div>
@@ -523,28 +523,16 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
     const resizeDuration = this.options.resizeDuration;
     const fadeDuration = this.options.fadeDuration;
 
-    this._rendererRef.setStyle(this._lightboxElem.nativeElement,
-      '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._lightboxElem.nativeElement,
       'animation-duration', `${fadeDuration}s`);
-    this._rendererRef.setStyle(this._outerContainerElem.nativeElement,
-      '-webkit-transition-duration', `${resizeDuration}s`);
     this._rendererRef.setStyle(this._outerContainerElem.nativeElement,
       'transition-duration', `${resizeDuration}s`);
-    this._rendererRef.setStyle(this._dataContainerElem.nativeElement,
-      '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._dataContainerElem.nativeElement,
       'animation-duration', `${fadeDuration}s`);
-    this._rendererRef.setStyle(this._imageElem.nativeElement,
-      '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._imageElem.nativeElement,
       'animation-duration', `${fadeDuration}s`);
-    this._rendererRef.setStyle(this._captionElem.nativeElement,
-      '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._captionElem.nativeElement,
       'animation-duration', `${fadeDuration}s`);
-    this._rendererRef.setStyle(this._numberElem.nativeElement,
-      '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._numberElem.nativeElement,
       'animation-duration', `${fadeDuration}s`);
   }