Add svg prefix to avoid future name collision

src/components/module.ts

@@ -1,3 +0,0 @@
-import {Module} from './module.model';
-import {ModuleComponent} from './module.component';
-export {Module, ModuleComponent};

src/components/svg-keyboard-key.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from 'angular2/core';
 
 @Component({
-    selector: 'g[uhk-keyboard-key]',
+    selector: 'g[svg-keyboard-key]',
     template:
     `
         <svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
@@ -10,7 +10,7 @@ import { Component, OnInit, Input } from 'angular2/core';
         />
      `
 })
-export class KeyboardKeyComponent implements OnInit {
+export class SvgKeyboardKeyComponent implements OnInit {
     @Input() id: string;
     @Input() rx: string;
     @Input() ry: string;

src/components/svg-keyboard-key.model.ts

@@ -1,4 +1,4 @@
-export interface KeyboardKey {
+export interface SvgKeyboardKey {
     id: string;
     x: string;
     y: string;

src/components/svg-keyboard.component.ts

@@ -1,15 +1,16 @@
 import { Component, OnInit} from 'angular2/core';
 
 import {DataProviderService} from '../services/data-provider.service';
-import {Module, ModuleComponent} from './module';
+import {SvgModule} from './svg-module.model';
+import {SvgModuleComponent} from './svg-module.component';
 
 @Component({
-    selector: 'keyboard',
+    selector: 'svg-keyboard',
     template:
     `
         <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
             <svg:g [attr.transform]="transform" [attr.fill]="fill">
-                <svg:g uhk-module *ngFor="#module of modules"
+                <svg:g svg-module *ngFor="#module of modules"
                         [coverages]="module.coverages"
                         [keyboardKeys]="module.keyboardKeys"
                         [attr.transform]="module.attributes.transform"
@@ -25,11 +26,11 @@ import {Module, ModuleComponent} from './module';
             height: 100%;
         }
     `],
-    directives: [ModuleComponent]
+    directives: [SvgModuleComponent]
 })
-export class KeyboardComponent implements OnInit {
+export class SvgKeyboardComponent implements OnInit {
     private viewBox: string;
-    private modules: Module[];
+    private modules: SvgModule[];
     private svg: any;
     private transform: string;
     private fill: string;
@@ -43,7 +44,7 @@ export class KeyboardComponent implements OnInit {
         this.viewBox = this.svg.$.viewBox;
         this.transform = this.svg.g[0].$.transform;
         this.fill = this.svg.g[0].$.fill;
-        this.modules = this.svg.g[0].g.map(obj => new Module(obj));
+        this.modules = this.svg.g[0].g.map(obj => new SvgModule(obj));
     }
 
 }

src/components/svg-module.component.ts

@@ -1,25 +1,25 @@
 import { Component, OnInit, Input} from 'angular2/core';
 
-import {KeyboardKey} from './keyboard-key.model';
+import {SvgKeyboardKey} from './svg-keyboard-key.model';
-import {KeyboardKeyComponent} from './keyboard-key.component';
+import {SvgKeyboardKeyComponent} from './svg-keyboard-key.component';
 
 @Component({
-    selector: 'g[uhk-module]',
+    selector: 'g[svg-module]',
     template:
     `
         <svg:path *ngFor="#path of coverages" [attr.d]="path.$.d"/>
-        <svg:g uhk-keyboard-key *ngFor="#key of keyboardKeys"
+        <svg:g svg-keyboard-key *ngFor="#key of keyboardKeys"
                 [id]="key.id"
                 [rx]="key.rx" [ry]="key.ry"
                 [width]="key.width" [height]="key.height"
                 [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
         />
     `,
-    directives: [KeyboardKeyComponent]
+    directives: [SvgKeyboardKeyComponent]
 })
-export class ModuleComponent implements OnInit {
+export class SvgModuleComponent implements OnInit {
     @Input() coverages: any[];
-    @Input() keyboardKeys: KeyboardKey[];
+    @Input() keyboardKeys: SvgKeyboardKey[];
 
     constructor() {
         this.keyboardKeys = [];

src/components/svg-module.model.ts

@@ -1,8 +1,8 @@
-import {KeyboardKey} from './keyboard-key.model';
+import {SvgKeyboardKey} from './svg-keyboard-key.model';
 
-export class Module {
+export class SvgModule {
     private coverages: any[];
-    private keyboardKeys: KeyboardKey[];
+    private keyboardKeys: SvgKeyboardKey[];
     private attributes: any;
 
     constructor(obj: { rect: any[], path: any[], $: Object }) {

src/main-app.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from 'angular2/core';
 
-import {KeyboardComponent} from './components/keyboard.component';
+import {SvgKeyboardComponent} from './components/svg-keyboard.component';
 
 @Component({
     selector: 'main-app',
-    template: '<keyboard></keyboard>',
+    template: '<svg-keyboard></svg-keyboard>',
-    directives: [KeyboardComponent]
+    directives: [SvgKeyboardComponent]
 })
 export class MainAppComponent implements OnInit {
     constructor() { }