Add MouseAction rendering

src/components/svg/keys/svg-mouse-scroll-key/index.ts

@@ -0,0 +1 @@
+export * from './svg-mouse-scroll-key';

src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html

@@ -0,0 +1,9 @@
+<svg:use [attr.xlink:href]="mouseIcon" width="20" height="20" x="8" y="25"></svg:use>
+<svg:text
+    [attr.x]="60"
+    [attr.y]="0"
+    [attr.text-anchor]="'middle'"
+    [attr.font-size]="24">
+        <tspan dy="34"> Scroll </tspan>
+</svg:text>
+<svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>

src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+import { MapperService } from '../../../../services/mapper.service';
+
+@Component({
+    selector: 'g[svg-mouse-scroll-key]',
+    template: require('./svg-mouse-scroll-key.html')
+})
+export class SvgMouseScrollKeyComponent implements OnChanges {
+    @Input() direction: string;
+
+    private mouseIcon: string;
+    private directionIcon: string;
+
+    constructor(private mapper: MapperService) { }
+
+    ngOnChanges() {
+        this.mouseIcon = this.mapper.getIcon('mouse');
+        this.directionIcon = this.mapper.getIcon(`scroll-${this.direction}`);
+    }
+}