fix(directive): open viewer in fullscreen on desktop

- set necessary css variables in viewer-modal
- remove styles from componentes

projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.component.ts

@@ -7,22 +7,6 @@ import { ViewerModalComponent } from './viewer-modal/viewer-modal.component';
 @Component({
   selector: 'ion-img-viewer',
   templateUrl: './ngx-ionic-image-viewer.component.html',
-  styles: [
-    `
-      .modal-fullscreen {
-        --border-radius: 0;
-        border-radius: 0;
-      }
-      .modal-fullscreen .modal-wrapper {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    `
-  ],
   encapsulation: ViewEncapsulation.None
 })
 export class NgxIonicImageViewerComponent implements OnInit {

projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.ts

@@ -32,10 +32,19 @@ export class ViewerModalComponent implements OnInit {
   ngOnInit() {
     this.options = { ...this.defaultSlideOptions, ...this.slideOptions };
     this.src = this.srcHighRes || this.src;
+    this.setStyle();
     this.setScheme(this.scheme);
+
     this.slides.update();
   }
 
+  setStyle() {
+    const el: HTMLElement = document.querySelector('.modal-fullscreen');
+    el.style.setProperty('--height', '100%');
+    el.style.setProperty('--width', '100%');
+    el.style.setProperty('--border-radius', '0');
+  }
+
   setScheme(scheme: string) {
     if (scheme === 'auto') {
       return;