added documentation and img-magnifier

src/app/img-magnifier/img-magnifier.component.html

@@ -0,0 +1,17 @@
+<div class="img-container">
+  <div class="magnifier"
+       [ngStyle]="{
+         'background-size': backgroundSize,
+         'background-image': 'url(\'' + src + '\')',
+         'background-position':  '-' + magnifierPos.x * zoom + 'px -' + magnifierPos.y * zoom + 'px',
+         left: magnifierPos.x + 'px',
+         top: magnifierPos.y + 'px',
+         width: magnifierSize.width + 'px',
+         height: magnifierSize.height + 'px'
+       }"
+       (mousemove)="calcPos($event)"
+       (mouseleave)="showMagnifier = false"
+       *ngIf="showMagnifier">
+  </div>
+  <img [src]="src" alt="" (mousemove)="calcPos($event)" (mouseenter)="showMagnifier = true" #mainImg>
+</div>

src/app/img-magnifier/img-magnifier.component.scss

@@ -0,0 +1,20 @@
+@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";
+
+.img-container {
+  position:relative;
+  overflow: hidden;
+
+  & > img {
+    width: 100%;
+  }
+}
+
+.magnifier {
+  position: absolute;
+  background: #FFF;
+  background-repeat: no-repeat;
+  background-position: -500px -500px;
+  z-index: 99;
+  border: 1px solid #FFF;
+  box-shadow: 10px 10px 25px $color-bosch-light-gray-b25;
+}

src/app/img-magnifier/img-magnifier.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImgMagnifierComponent } from './img-magnifier.component';
+
+describe('ImgMagnifierComponent', () => {
+  let component: ImgMagnifierComponent;
+  let fixture: ComponentFixture<ImgMagnifierComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImgMagnifierComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImgMagnifierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/img-magnifier/img-magnifier.component.ts

@@ -0,0 +1,41 @@
+import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'app-img-magnifier',
+  templateUrl: './img-magnifier.component.html',
+  styleUrls: ['./img-magnifier.component.scss']
+})
+export class ImgMagnifierComponent implements OnInit, AfterViewInit {
+
+  @Input('src') src: string;
+  @Input('zoom') zoom: number;
+  @Input('magnifierSize') magnifierSize: {width: number, height: number};
+  @ViewChild('mainImg') mainImg: ElementRef;
+
+  backgroundSize;
+  magnifierPos = {x: 0, y: 0};
+  showMagnifier = false;
+
+  constructor(
+    private window: Window
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.calcBackgroundSize();
+    }, 1);
+  }
+
+  calcPos(event) {
+    const img = this.mainImg.nativeElement.getBoundingClientRect();
+    this.magnifierPos.x = Math.min(img.width - this.magnifierSize.width, Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2));
+    this.magnifierPos.y = Math.min(img.height - this.magnifierSize.height + 7, Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2));
+  }
+
+  calcBackgroundSize() {
+    this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0';
+  }
+}