tango-app-ui-analyse-traffic 3.8.0-alpha.25 → 3.8.0-alpha.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,8 @@ export class MagnifierDirective {
5
5
  renderer;
6
6
  lens;
7
7
  zoom = 2; // Zoom factor
8
- lensSize = 300; // Lens width/height in px
8
+ lensWidth = 300; // lens width
9
+ lensHeight = 700; // lens height (taller)
9
10
  constructor(el, renderer) {
10
11
  this.el = el;
11
12
  this.renderer = renderer;
@@ -16,8 +17,8 @@ export class MagnifierDirective {
16
17
  createLens() {
17
18
  this.lens = this.renderer.createElement('div');
18
19
  this.renderer.setStyle(this.lens, 'position', 'absolute');
19
- this.renderer.setStyle(this.lens, 'width', `${this.lensSize}px`);
20
- this.renderer.setStyle(this.lens, 'height', `${this.lensSize}px`);
20
+ this.renderer.setStyle(this.lens, 'width', `${this.lensWidth}px`);
21
+ this.renderer.setStyle(this.lens, 'height', `${this.lensHeight}px`);
21
22
  this.renderer.setStyle(this.lens, 'border', '2px solid red');
22
23
  this.renderer.setStyle(this.lens, 'background-color', 'rgba(255,255,255,0.5)');
23
24
  this.renderer.setStyle(this.lens, 'pointer-events', 'none');
@@ -33,16 +34,16 @@ export class MagnifierDirective {
33
34
  const scrollY = window.pageYOffset;
34
35
  const x = e.pageX - rect.left - scrollX;
35
36
  const y = e.pageY - rect.top - scrollY;
36
- const lensX = e.pageX - this.lensSize / 2;
37
- const lensY = e.pageY - this.lensSize / 2;
37
+ const lensX = e.pageX - this.lensWidth / 2;
38
+ const lensY = e.pageY - this.lensHeight / 2;
38
39
  // Move lens
39
40
  this.renderer.setStyle(this.lens, 'left', `${lensX}px`);
40
41
  this.renderer.setStyle(this.lens, 'top', `${lensY}px`);
41
42
  // Set background image and zoom
42
43
  this.renderer.setStyle(this.lens, 'backgroundImage', `url(${image.src})`);
43
44
  this.renderer.setStyle(this.lens, 'backgroundSize', `${image.width * this.zoom}px ${image.height * this.zoom}px`);
44
- const bgX = x * this.zoom - this.lensSize / 2;
45
- const bgY = y * this.zoom - this.lensSize / 2;
45
+ const bgX = x * this.zoom - this.lensWidth / 2;
46
+ const bgY = y * this.zoom - this.lensHeight / 2;
46
47
  this.renderer.setStyle(this.lens, 'backgroundPosition', `-${bgX}px -${bgY}px`);
47
48
  this.renderer.setStyle(this.lens, 'visibility', 'visible');
48
49
  }
@@ -71,4 +72,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
71
72
  type: HostListener,
72
73
  args: ['mouseleave']
73
74
  }] } });
74
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFnbmlmaWVyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdvLWFuYWx5c2UtdHJhZmZpYy9zcmMvbGliL2RpcmVjdGl2ZS9tYWduaWZpZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFnQyxNQUFNLGVBQWUsQ0FBQzs7QUFLbEcsTUFBTSxPQUFPLGtCQUFrQjtJQUtUO0lBQXdCO0lBSnBDLElBQUksQ0FBcUI7SUFDekIsSUFBSSxHQUFHLENBQUMsQ0FBQyxDQUFRLGNBQWM7SUFDL0IsUUFBUSxHQUFHLEdBQUcsQ0FBQyxDQUFFLDBCQUEwQjtJQUVuRCxZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7SUFBRyxDQUFDO0lBRW5FLFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFVBQVU7UUFDaEIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUvQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxHQUFHLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxDQUFDO1FBQ2pFLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsUUFBUSxFQUFFLEdBQUcsSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLENBQUM7UUFDbEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENB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UUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFHRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxZQUFZLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUVELFdBQVc7UUFDVCx1QkFBdUI7UUFDdkIsSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3JDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3BELElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQzt3R0F2RVUsa0JBQWtCOzRGQUFsQixrQkFBa0I7OzRGQUFsQixrQkFBa0I7a0JBSDlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtpQkFDM0I7dUdBNkJDLFdBQVc7c0JBRFYsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBa0NyQyxZQUFZO3NCQURYLFlBQVk7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBSZW5kZXJlcjIsIE9uSW5pdCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1thcHBNYWduaWZpZXJdJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIE1hZ25pZmllckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcclxuICBwcml2YXRlIGxlbnM6IEhUTUxFbGVtZW50IHwgbnVsbDtcclxuICBwcml2YXRlIHpvb20gPSAyOyAgICAgICAgLy8gWm9vbSBmYWN0b3JcclxuICBwcml2YXRlIGxlbnNTaXplID0gMzAwOyAgLy8gTGVucyB3aWR0aC9oZWlnaHQgaW4gcHhcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuY3JlYXRlTGVucygpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVMZW5zKCkge1xyXG4gICAgdGhpcy5sZW5zID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdkaXYnKTtcclxuXHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3Bvc2l0aW9uJywgJ2Fic29sdXRlJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3dpZHRoJywgYCR7dGhpcy5sZW5zU2l6ZX1weGApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICdoZWlnaHQnLCBgJHt0aGlzLmxlbnNTaXplfXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ2JvcmRlcicsICcycHggc29saWQgcmVkJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ2JhY2tncm91bmQtY29sb3InLCAncmdiYSgyNTUsMjU1LDI1NSwwLjUpJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3BvaW50ZXItZXZlbnRzJywgJ25vbmUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnei1pbmRleCcsICc5OTk5Jyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3RyYW5zaXRpb24nLCAnYWxsIDAuMXMgZWFzZScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICd2aXNpYmlsaXR5JywgJ2hpZGRlbicpO1xyXG5cclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuYm9keSwgdGhpcy5sZW5zKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbW92ZScsIFsnJGV2ZW50J10pXHJcbiAgb25Nb3VzZU1vdmUoZTogTW91c2VFdmVudCk6IHZvaWQge1xyXG4gICAgY29uc3QgaW1hZ2UgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICBjb25zdCByZWN0ID0gaW1hZ2UuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcblxyXG4gICAgY29uc3Qgc2Nyb2xsWCA9IHdpbmRvdy5wYWdlWE9mZnNldDtcclxuICAgIGNvbnN0IHNjcm9sbFkgPSB3aW5kb3cucGFnZVlPZmZzZXQ7XHJcblxyXG4gICAgY29uc3QgeCA9IGUucGFnZVggLSByZWN0LmxlZnQgLSBzY3JvbGxYO1xyXG4gICAgY29uc3QgeSA9IGUucGFnZVkgLSByZWN0LnRvcCAtIHNjcm9sbFk7XHJcblxyXG4gICAgY29uc3QgbGVuc1ggPSBlLnBhZ2VYIC0gdGhpcy5sZW5zU2l6ZSAvIDI7XHJcbiAgICBjb25zdCBsZW5zWSA9IGUucGFnZVkgLSB0aGlzLmxlbnNTaXplIC8gMjtcclxuXHJcbiAgICAvLyBNb3ZlIGxlbnNcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnbGVmdCcsIGAke2xlbnNYfXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3RvcCcsIGAke2xlbnNZfXB4YCk7XHJcblxyXG4gICAgLy8gU2V0IGJhY2tncm91bmQgaW1hZ2UgYW5kIHpvb21cclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnYmFja2dyb3VuZEltYWdlJywgYHVybCgke2ltYWdlLnNyY30pYCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxyXG4gICAgICB0aGlzLmxlbnMsXHJcbiAgICAgICdiYWNrZ3JvdW5kU2l6ZScsXHJcbiAgICAgIGAke2ltYWdlLndpZHRoICogdGhpcy56b29tfXB4ICR7aW1hZ2UuaGVpZ2h0ICogdGhpcy56b29tfXB4YFxyXG4gICAgKTtcclxuXHJcbiAgICBjb25zdCBiZ1ggPSB4ICogdGhpcy56b29tIC0gdGhpcy5sZW5zU2l6ZSAvIDI7XHJcbiAgICBjb25zdCBiZ1kgPSB5ICogdGhpcy56b29tIC0gdGhpcy5sZW5zU2l6ZSAvIDI7XHJcblxyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICdiYWNrZ3JvdW5kUG9zaXRpb24nLCBgLSR7YmdYfXB4IC0ke2JnWX1weGApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICd2aXNpYmlsaXR5JywgJ3Zpc2libGUnKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKVxyXG4gIG9uTW91c2VMZWF2ZSgpIHtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAndmlzaWJpbGl0eScsICdoaWRkZW4nKTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG4gICAgLy8gQ2xlYW51cCBsZW5zIGVsZW1lbnRcclxuICAgIGlmICh0aGlzLmxlbnMgJiYgdGhpcy5sZW5zLnBhcmVudE5vZGUpIHtcclxuICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZChkb2N1bWVudC5ib2R5LCB0aGlzLmxlbnMpO1xyXG4gICAgICB0aGlzLmxlbnMgPSBudWxsO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=
75
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFnbmlmaWVyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdvLWFuYWx5c2UtdHJhZmZpYy9zcmMvbGliL2RpcmVjdGl2ZS9tYWduaWZpZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFnQyxNQUFNLGVBQWUsQ0FBQzs7QUFLbEcsTUFBTSxPQUFPLGtCQUFrQjtJQU1UO0lBQXdCO0lBTHBDLElBQUksQ0FBcUI7SUFDekIsSUFBSSxHQUFHLENBQUMsQ0FBQyxDQUFRLGNBQWM7SUFDL0IsU0FBUyxHQUFHLEdBQUcsQ0FBQyxDQUFHLGFBQWE7SUFDaEMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxDQUFFLHVCQUF1QjtJQUVsRCxZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7SUFBRyxDQUFDO0lBRW5FLFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFVBQVU7UUFDaEIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUvQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxHQUFHLElBQUksQ0FBQyxTQUFTLElBQUksQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsUUFBUSxFQUFFLEdBQUcsSUFBSSxDQUFDLFVBQVUsSUFBSSxDQUFDLENB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Q0FBQyxDQUFDO1FBQy9FLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFHRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxZQUFZLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUVELFdBQVc7UUFDVCx1QkFBdUI7UUFDdkIsSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3JDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3BELElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQzt3R0F4RVUsa0JBQWtCOzRGQUFsQixrQkFBa0I7OzRGQUFsQixrQkFBa0I7a0JBSDlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtpQkFDM0I7dUdBOEJDLFdBQVc7c0JBRFYsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBa0NyQyxZQUFZO3NCQURYLFlBQVk7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBSZW5kZXJlcjIsIE9uSW5pdCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1thcHBNYWduaWZpZXJdJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIE1hZ25pZmllckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcclxuICBwcml2YXRlIGxlbnM6IEhUTUxFbGVtZW50IHwgbnVsbDtcclxuICBwcml2YXRlIHpvb20gPSAyOyAgICAgICAgLy8gWm9vbSBmYWN0b3JcclxuICBwcml2YXRlIGxlbnNXaWR0aCA9IDMwMDsgICAvLyBsZW5zIHdpZHRoXHJcbiAgcHJpdmF0ZSBsZW5zSGVpZ2h0ID0gNzAwOyAgLy8gbGVucyBoZWlnaHQgKHRhbGxlcilcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuY3JlYXRlTGVucygpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVMZW5zKCkge1xyXG4gICAgdGhpcy5sZW5zID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdkaXYnKTtcclxuXHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3Bvc2l0aW9uJywgJ2Fic29sdXRlJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3dpZHRoJywgYCR7dGhpcy5sZW5zV2lkdGh9cHhgKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnaGVpZ2h0JywgYCR7dGhpcy5sZW5zSGVpZ2h0fXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ2JvcmRlcicsICcycHggc29saWQgcmVkJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ2JhY2tncm91bmQtY29sb3InLCAncmdiYSgyNTUsMjU1LDI1NSwwLjUpJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3BvaW50ZXItZXZlbnRzJywgJ25vbmUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnei1pbmRleCcsICc5OTk5Jyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3RyYW5zaXRpb24nLCAnYWxsIDAuMXMgZWFzZScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICd2aXNpYmlsaXR5JywgJ2hpZGRlbicpO1xyXG5cclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuYm9keSwgdGhpcy5sZW5zKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbW92ZScsIFsnJGV2ZW50J10pXHJcbiAgb25Nb3VzZU1vdmUoZTogTW91c2VFdmVudCk6IHZvaWQge1xyXG4gICAgY29uc3QgaW1hZ2UgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICBjb25zdCByZWN0ID0gaW1hZ2UuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcblxyXG4gICAgY29uc3Qgc2Nyb2xsWCA9IHdpbmRvdy5wYWdlWE9mZnNldDtcclxuICAgIGNvbnN0IHNjcm9sbFkgPSB3aW5kb3cucGFnZVlPZmZzZXQ7XHJcblxyXG4gICAgY29uc3QgeCA9IGUucGFnZVggLSByZWN0LmxlZnQgLSBzY3JvbGxYO1xyXG4gICAgY29uc3QgeSA9IGUucGFnZVkgLSByZWN0LnRvcCAtIHNjcm9sbFk7XHJcblxyXG4gICAgY29uc3QgbGVuc1ggPSBlLnBhZ2VYIC0gdGhpcy5sZW5zV2lkdGggLyAyO1xyXG4gICAgY29uc3QgbGVuc1kgPSBlLnBhZ2VZIC0gdGhpcy5sZW5zSGVpZ2h0IC8gMjtcclxuXHJcbiAgICAvLyBNb3ZlIGxlbnNcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnbGVmdCcsIGAke2xlbnNYfXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMubGVucywgJ3RvcCcsIGAke2xlbnNZfXB4YCk7XHJcblxyXG4gICAgLy8gU2V0IGJhY2tncm91bmQgaW1hZ2UgYW5kIHpvb21cclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAnYmFja2dyb3VuZEltYWdlJywgYHVybCgke2ltYWdlLnNyY30pYCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxyXG4gICAgICB0aGlzLmxlbnMsXHJcbiAgICAgICdiYWNrZ3JvdW5kU2l6ZScsXHJcbiAgICAgIGAke2ltYWdlLndpZHRoICogdGhpcy56b29tfXB4ICR7aW1hZ2UuaGVpZ2h0ICogdGhpcy56b29tfXB4YFxyXG4gICAgKTtcclxuXHJcbiAgICBjb25zdCBiZ1ggPSB4ICogdGhpcy56b29tIC0gdGhpcy5sZW5zV2lkdGggLyAyO1xyXG4gICAgY29uc3QgYmdZID0geSAqIHRoaXMuem9vbSAtIHRoaXMubGVuc0hlaWdodCAvIDI7XHJcblxyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICdiYWNrZ3JvdW5kUG9zaXRpb24nLCBgLSR7YmdYfXB4IC0ke2JnWX1weGApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmxlbnMsICd2aXNpYmlsaXR5JywgJ3Zpc2libGUnKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKVxyXG4gIG9uTW91c2VMZWF2ZSgpIHtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5sZW5zLCAndmlzaWJpbGl0eScsICdoaWRkZW4nKTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG4gICAgLy8gQ2xlYW51cCBsZW5zIGVsZW1lbnRcclxuICAgIGlmICh0aGlzLmxlbnMgJiYgdGhpcy5sZW5zLnBhcmVudE5vZGUpIHtcclxuICAgICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZChkb2N1bWVudC5ib2R5LCB0aGlzLmxlbnMpO1xyXG4gICAgICB0aGlzLmxlbnMgPSBudWxsO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=
@@ -753,7 +753,8 @@ class MagnifierDirective {
753
753
  renderer;
754
754
  lens;
755
755
  zoom = 2; // Zoom factor
756
- lensSize = 300; // Lens width/height in px
756
+ lensWidth = 300; // lens width
757
+ lensHeight = 700; // lens height (taller)
757
758
  constructor(el, renderer) {
758
759
  this.el = el;
759
760
  this.renderer = renderer;
@@ -764,8 +765,8 @@ class MagnifierDirective {
764
765
  createLens() {
765
766
  this.lens = this.renderer.createElement('div');
766
767
  this.renderer.setStyle(this.lens, 'position', 'absolute');
767
- this.renderer.setStyle(this.lens, 'width', `${this.lensSize}px`);
768
- this.renderer.setStyle(this.lens, 'height', `${this.lensSize}px`);
768
+ this.renderer.setStyle(this.lens, 'width', `${this.lensWidth}px`);
769
+ this.renderer.setStyle(this.lens, 'height', `${this.lensHeight}px`);
769
770
  this.renderer.setStyle(this.lens, 'border', '2px solid red');
770
771
  this.renderer.setStyle(this.lens, 'background-color', 'rgba(255,255,255,0.5)');
771
772
  this.renderer.setStyle(this.lens, 'pointer-events', 'none');
@@ -781,16 +782,16 @@ class MagnifierDirective {
781
782
  const scrollY = window.pageYOffset;
782
783
  const x = e.pageX - rect.left - scrollX;
783
784
  const y = e.pageY - rect.top - scrollY;
784
- const lensX = e.pageX - this.lensSize / 2;
785
- const lensY = e.pageY - this.lensSize / 2;
785
+ const lensX = e.pageX - this.lensWidth / 2;
786
+ const lensY = e.pageY - this.lensHeight / 2;
786
787
  // Move lens
787
788
  this.renderer.setStyle(this.lens, 'left', `${lensX}px`);
788
789
  this.renderer.setStyle(this.lens, 'top', `${lensY}px`);
789
790
  // Set background image and zoom
790
791
  this.renderer.setStyle(this.lens, 'backgroundImage', `url(${image.src})`);
791
792
  this.renderer.setStyle(this.lens, 'backgroundSize', `${image.width * this.zoom}px ${image.height * this.zoom}px`);
792
- const bgX = x * this.zoom - this.lensSize / 2;
793
- const bgY = y * this.zoom - this.lensSize / 2;
793
+ const bgX = x * this.zoom - this.lensWidth / 2;
794
+ const bgY = y * this.zoom - this.lensHeight / 2;
794
795
  this.renderer.setStyle(this.lens, 'backgroundPosition', `-${bgX}px -${bgY}px`);
795
796
  this.renderer.setStyle(this.lens, 'visibility', 'visible');
796
797
  }