KeyAction Editor Popover first steps.

src/components/svg-keyboard.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit, Input} from '@angular/core';
 import {Module} from '../../config-serializer/config-items/Module';
 import {SvgModule} from './svg-module.model';
 import {SvgModuleComponent} from './svg-module.component';
+import {PopoverComponent} from './popover/popover.component';
 
 @Component({
     selector: 'svg-keyboard',
@@ -15,9 +16,11 @@ import {SvgModuleComponent} from './svg-module.component';
                         [keyboardKeys]="module.keyboardKeys"
                         [attr.transform]="module.attributes.transform"
                         [keyActions]="moduleConfig[i].keyActions.elements"
+                        (editKeyActionRequest)="onEditKeyActionRequest(i, $event)"
                 />
             </svg:g>
         </svg>
+        <popover *ngIf="popoverEnabled" (cancel)="hidePopover()"></popover>
     `,
     styles:
     [`
@@ -25,19 +28,34 @@ import {SvgModuleComponent} from './svg-module.component';
             display: flex;
             width: 100%;
             height: 100%;
+            position: relative;
         }
     `],
-    directives: [SvgModuleComponent]
+    directives: [SvgModuleComponent, PopoverComponent]
 })
 export class SvgKeyboardComponent implements OnInit {
     @Input() svgAttributes: { viewBox: string, transform: string, fill: string };
     @Input() modules: SvgModule[];
     @Input() moduleConfig: Module[];
 
+    private popoverEnabled: boolean;
+
     constructor() {
         this.modules = [];
     }
 
     ngOnInit() { }
 
+    onEditKeyActionRequest(moduleId: number, keyId: number): void {
+        this.showPopover();
+    }
+
+    showPopover(): void {
+        this.popoverEnabled = true;
+    }
+
+    hidePopover(): void {
+        this.popoverEnabled = false;
+    }
+
 }