fixup! feat(info-tile): add interactive 3D tilt effect on hover

src/components/info-tile/info-tile.tsx

@@ -1,11 +1,7 @@
 import { Component, Prop, h, Element, Host } from '@stencil/core';
 import { InfoTileProgress } from '../info-tile/info-tile.types';
 import { Link } from '../../global/shared-types/link.types';
-import {
-    tiltFollowingTheCursor,
-    handleMouseEnter,
-    handleMouseLeave,
-} from '../../util/3d-tilt-hover-effect';
+import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
 
 /**
  * This component can be used on places such as a start page or a dashboard.
@@ -106,8 +102,19 @@ export class InfoTile {
     @Prop()
     public progress?: InfoTileProgress;
 
-    @Element() private element: HTMLElement;
-    private the3dElementBounds: DOMRect;
+    @Element()
+    private host: HTMLElement;
+
+    private handleMouseEnter: () => void;
+    private handleMouseLeave: () => void;
+
+    public componentWillLoad() {
+        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(
+            this.host,
+        );
+        this.handleMouseEnter = handleMouseEnter;
+        this.handleMouseLeave = handleMouseLeave;
+    }
 
     public render() {
         const extendedAriaLabel =
@@ -240,23 +247,4 @@ export class InfoTile {
             return <limel-linear-progress indeterminate={true} />;
         }
     };
-
-    private handleMouseEnter = () => {
-        handleMouseEnter(
-            this.element,
-            'a',
-            (bounds) => {
-                this.the3dElementBounds = bounds;
-            },
-            this.tiltFollowingTheCursor,
-        );
-    };
-
-    private handleMouseLeave = () => {
-        handleMouseLeave(this.element, 'a', this.tiltFollowingTheCursor);
-    };
-
-    private tiltFollowingTheCursor = (e: MouseEvent) => {
-        tiltFollowingTheCursor(e, this.the3dElementBounds, this.element);
-    };
 }