diff --git a/package-lock.json b/package-lock.json
index 380f2167bdec7ebbdc958be554c174e6e68de892..447d947d9539cadbd69f7e33f3a3dcf24aa5a942 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -263,6 +263,12 @@
"glob-to-regexp": "0.3.0"
}
},
+ "@ngrx/store": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-6.0.1.tgz",
+ "integrity": "sha512-cSgfT8CgpOr6BOQac9M3DH6QQC5gxCVjdEcZH//Zn/kwdse86X73iK7KWv6B6AiIEdyVbFfggXNZwd/HiyLGOA==",
+ "dev": true
+ },
"@ngtools/webpack": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-6.0.5.tgz",
diff --git a/package.json b/package.json
index 74313d55889628aee568fba5872d09d67035124e..828fb179b99ac46a3a5e75531d33723a943dd59c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
+ "@ngrx/store": "^6.0.1",
"@ngtools/webpack": "^6.0.5",
"@types/node": "^10.1.3",
"angular2-template-loader": "^0.6.2",
@@ -29,6 +30,7 @@
"html-webpack-plugin": "^3.2.0",
"ngx-bootstrap": "^3.0.0",
"raw-loader": "^0.5.1",
+ "reflect-metadata": "^0.1.12",
"rxjs": "^6.0.0",
"showdown": "^1.8.6",
"ts-loader": "^4.3.0",
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
index 5b305b3d7cddd51c6d6d93952a6a82ad48d3424d..eb209d8d231d26455f57d3d2f67d6490a535439f 100644
--- a/src/components/components.module.ts
+++ b/src/components/components.module.ts
@@ -1,5 +1,4 @@
import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TestComponent } from './test/test.component'
@@ -7,6 +6,8 @@ import { MarkdownDom } from './markdown/markdown.component';
import { ComponentIndex } from './main/main.component';
import { SafeHtmlPipe } from '../util/pipes/safeHtml.pipe'
+import { ReadmoreComponent } from './readmoore/readmore.component';
+import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports : [
@@ -14,17 +15,17 @@ import { SafeHtmlPipe } from '../util/pipes/safeHtml.pipe'
FormsModule
],
declarations : [
- TestComponent,
-
/* components */
MarkdownDom,
ComponentIndex,
+ ReadmoreComponent,
/* pipes */
SafeHtmlPipe
],
- bootstrap : [
- ComponentIndex
+ exports : [
+ MarkdownDom,
+ ReadmoreComponent
]
})
diff --git a/src/components/main/main.component.ts b/src/components/main/main.component.ts
index 1e459c6c03f68750a8aeac8d4c071aa08ce8b290..ac195346ea1f55e9f3db115e483f044da927cb19 100644
--- a/src/components/main/main.component.ts
+++ b/src/components/main/main.component.ts
@@ -19,4 +19,43 @@ export class ComponentIndex{
normal paragraph
[google](https://www.google.com)`
+
+ markdownCode :string = `
+html
+\`\`\`html
+<markdown-dom id = "markdown-dom1">
+</markdown-dom>
+\`\`\`
+javascript
+\`\`\`javascript
+const mdDom = document.getElementById('markdown-dom1')
+mdDom.markdown = \`
+MD text here
+------
+\`
+\`\`\`
+
+`
+ markdownText : string = `
+mardown2Html
+======
+utilising [showdownjs](https://github.com/showdownjs/showdown). Note the [XSS vulnerability](https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)).
+`
+ readmoreInput : string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+ readmoreSampleCode : string = `
+
+html
+\`\`\`html
+<readmore
+ collapsedHeight = 45
+ show = false>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</readmore>
+\`\`\`
+`
+ readmoreText : string = `
+readmore
+======
+hide/show more. Useful for the display of large block of text.
+`
}
\ No newline at end of file
diff --git a/src/components/main/main.style.css b/src/components/main/main.style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..ab40d12a38559c97713d930ee8d1c2d5060ded87 100644
--- a/src/components/main/main.style.css
+++ b/src/components/main/main.style.css
@@ -0,0 +1,11 @@
+.cell
+{
+ max-height:20em;
+}
+
+textarea
+{
+ resize:none;
+ width:100%;
+ height:20em;
+}
diff --git a/src/components/main/main.template.html b/src/components/main/main.template.html
index 0c230913daa962ce2c8948a8d78d477d7a8c97c9..74620c19aace0b242cbdf5d5b5e741078d356219 100644
--- a/src/components/main/main.template.html
+++ b/src/components/main/main.template.html
@@ -1,7 +1,89 @@
-<markdown-dom
- [markdown]="markdownInput">
+<div class = "jumbotron">
+ <div class = "container">
+ <h1>Components Showcase</h1>
+ <p>
+ The interactive viewer was built with angular, which allow some of its components to be used in other web based applications.
+ </p>
+ <p>
+ Below is a list of samples of reusable components.
+ </p>
+ </div>
+</div>
-</markdown-dom>
+<div class = "container-fluid">
-<textarea [(ngModel)] = "markdownInput">
-</textarea>
\ No newline at end of file
+ <div class = "row">
+ <div class = "col-md-12 cell">
+ <markdown-dom [markdown] = "markdownText">
+
+ </markdown-dom>
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-8 cell">
+ try a demo:
+ </div>
+ <div class = "col-md-4 cell">
+ code sample for implementation:
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-4 cell">
+ <textarea [(ngModel)] = "markdownInput">
+ </textarea>
+ </div>
+
+ <div class = "col-md-4 cell">
+ <div class = "well">
+ <markdown-dom
+ [markdown]="markdownInput">
+ </markdown-dom>
+ </div>
+ </div>
+
+ <div class = "col-md-4 cell">
+ <div class = "well">
+ <markdown-dom
+ [markdown]="markdownCode">
+ </markdown-dom>
+ </div>
+ </div>
+ </div>
+
+ <div class = "row">
+ <div class = "col-md-12 cell">
+ <markdown-dom [markdown] = "readmoreText">
+
+ </markdown-dom>
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-8 cell">
+ try a demo:
+ </div>
+ <div class = "col-md-4 cell">
+ code sample for implementation:
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-4 cell">
+ <textarea [(ngModel)] = "readmoreInput">
+
+ </textarea>
+ </div>
+ <div class = "col-md-4 cell">
+
+ <readmore>
+ {{ readmoreInput }}
+ </readmore>
+ </div>
+ <div class = "col-md-4 cell">
+ <div class = "well">
+
+ <markdown-dom [markdown] = "readmoreSampleCode">
+
+ </markdown-dom>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/components/markdown/markdown.component.ts b/src/components/markdown/markdown.component.ts
index 62c0a9cf21673c464b05c2a3a291d5bc3449cabb..13059e8fa5b677aa1f33dddeb34a516b251104bd 100644
--- a/src/components/markdown/markdown.component.ts
+++ b/src/components/markdown/markdown.component.ts
@@ -1,12 +1,13 @@
-import { Component, OnChanges, Input } from '@angular/core'
+import { Component, OnChanges, Input, ChangeDetectionStrategy } from '@angular/core'
import * as showdown from 'showdown'
@Component({
selector : 'markdown-dom',
templateUrl : `./markdown.template.html`,
styleUrls : [
- `markdown.style.css`
- ]
+ `./markdown.style.css`
+ ],
+ changeDetection : ChangeDetectionStrategy.OnPush
})
export class MarkdownDom implements OnChanges{
@@ -19,6 +20,5 @@ export class MarkdownDom implements OnChanges{
}
ngOnChanges(){
this.innerHtml = this.converter.makeHtml(this.markdown)
- console.log(this.innerHtml)
}
}
diff --git a/src/components/markdown/markdown.style.css b/src/components/markdown/markdown.style.css
index e6ebf405cb3036387c56092915742673f5ebe347..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/components/markdown/markdown.style.css
+++ b/src/components/markdown/markdown.style.css
@@ -1,6 +0,0 @@
-:host
-{
- display:block;
- width:20em;
- height:20em;
-}
\ No newline at end of file
diff --git a/src/components/readmoore/readmore.component.ts b/src/components/readmoore/readmore.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..751e735f684267e878e29a3b2d1fed7768d64318
--- /dev/null
+++ b/src/components/readmoore/readmore.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input, OnChanges, ViewChild, ElementRef } from "@angular/core";
+
+@Component({
+ selector : 'readmore',
+ templateUrl : './readmore.template.html',
+ styleUrls : [
+ './readmore.style.css'
+ ]
+})
+
+export class ReadmoreComponent implements OnChanges{
+ @Input() collapsedHeight : number = 45
+ @Input() show : boolean = false
+ @ViewChild('content') contentContainer : ElementRef
+
+ ngOnChanges(){
+
+ }
+
+ private toggle(){
+ this.show = !this.show
+ }
+
+ get contentContainerMaxHeight(){
+ return this.show ?
+ `9999px` :
+ `${this.collapsedHeight}px`
+ }
+}
\ No newline at end of file
diff --git a/src/components/readmoore/readmore.style.css b/src/components/readmoore/readmore.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..cc6778ad553eee37478582572371824c9165d28a
--- /dev/null
+++ b/src/components/readmoore/readmore.style.css
@@ -0,0 +1,21 @@
+div[content]
+{
+ overflow:hidden;
+}
+div[sliver]
+{
+ width:100%;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+div[sliver]
+{
+ background-color: rgba(128,128,128,0.1);
+}
+
+div[sliver]:hover
+{
+ background-color: rgba(128,128,128,0.2);
+}
\ No newline at end of file
diff --git a/src/components/readmoore/readmore.template.html b/src/components/readmoore/readmore.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..29ea1d185077f2eeb78d3bc440e81a0f9aa0863b
--- /dev/null
+++ b/src/components/readmoore/readmore.template.html
@@ -0,0 +1,10 @@
+<div
+ [style.maxHeight]="contentContainerMaxHeight"
+ #content
+ content>
+ <ng-content>
+ </ng-content>
+</div>
+<div (click)="toggle()" sliver>
+ <i [ngClass] = "show ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'" class = "glyphicon"></i>
+</div>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 37287bcf54b8df1fd0f75c1f4c2c89e22e5488fd..4eca9c676c3301e027584864b04249e4de3663ee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,8 +1,15 @@
<!doctype html>
<html>
<head>
-
- <style>
+ <style>
+ markdown-dom pre code
+ {
+ white-space:pre;
+ }
+ </style>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+ <!-- needed for nehuba container only -->
+ <!-- <style>
html
{
width:100%;
@@ -22,11 +29,11 @@
height:100%;
}
</style>
- <link rel = "stylesheet" href = "styles.css" />
+ <link rel = "stylesheet" href = "styles.css" /> -->
</head>
<body>
- <components-main>
+ <ui-test>
- </components-main>
+ </ui-test>
</body>
</html>
\ No newline at end of file
diff --git a/src/main.module.ts b/src/main.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c74669a572a25bc09b7d1bceb178da5ddae1b79
--- /dev/null
+++ b/src/main.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { ComponentsModule } from "./components/components.module";
+import { UIModule } from "./ui/ui.module";
+import { UITestComponent } from "./test/test.component";
+import { Serv } from "./services/services.module";
+
+@NgModule({
+ imports : [
+ ComponentsModule,
+ UIModule,
+ Serv.forRoot()
+ ],
+ declarations : [
+ UITestComponent
+ ],
+ bootstrap : [
+ UITestComponent
+ ]
+})
+
+export class MainModule{
+
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 41d70208e9ad70eaa2a23333dbe831bb9997d174..4197dc3aaa9867f08e84b6c75526346801784d04 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
import 'zone.js'
-import { ComponentsModule } from './components/components.module'
+import 'reflect-metadata'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { MainModule } from './main.module';
-platformBrowserDynamic().bootstrapModule(ComponentsModule)
\ No newline at end of file
+platformBrowserDynamic().bootstrapModule(MainModule)
\ No newline at end of file
diff --git a/src/services/nehubaData.service.ts b/src/services/nehubaData.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b8645ae0b53439defd9e80709ccce479fd086e0
--- /dev/null
+++ b/src/services/nehubaData.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+
+
+@Injectable({
+ providedIn : 'root'
+})
+
+export class NehubaDataService{
+ public counter : number = 0
+
+ constructor(){
+ /* fetch init services here */
+ }
+
+ public increment(){
+ this.counter ++
+ }
+
+ public decrement(){
+ this.counter --
+ }
+
+}
\ No newline at end of file
diff --git a/src/services/services.module.ts b/src/services/services.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7883ae3dd9b0942d0ab9d49ae3b6a66813cf7940
--- /dev/null
+++ b/src/services/services.module.ts
@@ -0,0 +1,20 @@
+import { NgModule, ModuleWithProviders } from "@angular/core";
+import { NehubaDataService } from "./nehubaData.service";
+
+
+@NgModule({
+
+})
+
+export class Serv{
+ static forRoot():ModuleWithProviders{
+ return {
+ ngModule : Serv,
+ providers : [
+ NehubaDataService
+ ]
+ }
+ }
+}
+
+export { NehubaDataService } from './nehubaData.service'
\ No newline at end of file
diff --git a/src/services/stateStore.service.ts b/src/services/stateStore.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1db3d1775dd543ad2fcf2cfcdb799d28d38ce2c
--- /dev/null
+++ b/src/services/stateStore.service.ts
@@ -0,0 +1,17 @@
+import { Action } from '@ngrx/store'
+
+export const CHANGE_STATE = 'CHANGE_STATE'
+
+export interface StateInterface{
+ templateSelected : any
+}
+
+export function changeState(state:StateInterface,action:Action){
+ switch(action.type){
+ case CHANGE_STATE : {
+ return Object.assign({},state)
+ }
+ default :
+ return state
+ }
+}
\ No newline at end of file
diff --git a/src/test/test.component.ts b/src/test/test.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25a9ee5cc3ec18289c74eebec159eeb2d7e6d9ee
--- /dev/null
+++ b/src/test/test.component.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector : `ui-test`,
+ templateUrl : './test.template.html',
+ styleUrls : [
+ `./test.style.css`
+ ]
+})
+
+export class UITestComponent{
+
+}
\ No newline at end of file
diff --git a/src/test/test.style.css b/src/test/test.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/test/test.template.html b/src/test/test.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..ba057632661f89f4503b8b9f355211202f166ca3
--- /dev/null
+++ b/src/test/test.template.html
@@ -0,0 +1,11 @@
+this is ui test
+
+<readmore>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</readmore>
+
+<div>
+ <ui-nehuba-container>
+
+ </ui-nehuba-container>
+</div>
diff --git a/src/ui/mainUI/mainUI.components.ts b/src/ui/mainUI/mainUI.components.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/ui/mainUI/mainUI.style.css b/src/ui/mainUI/mainUI.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/ui/mainUI/mainUI.template.html b/src/ui/mainUI/mainUI.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d2d0072a9753b41878dc0bccdd0f399a9d7fc7b
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -0,0 +1,28 @@
+import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory } from "@angular/core";
+import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
+import { NehubaDataService } from "../../services/services.module";
+
+@Component({
+ selector : 'ui-nehuba-container',
+ templateUrl : './nehubaContainer.template.html',
+ styleUrls : [
+ `./nehubaContainer.style.css`
+ ]
+})
+
+export class NehubaContainner{
+ @ViewChild('container',{read:ViewContainerRef}) container : ViewContainerRef
+ private nehubaViewerFactory : ComponentFactory<NehubaViewerUnit>
+ public viewerLoaded : boolean = false
+ constructor(
+ private csf:ComponentFactoryResolver,
+ public nehubaDS : NehubaDataService
+ ){
+ this.nehubaViewerFactory = this.csf.resolveComponentFactory(NehubaViewerUnit)
+ }
+
+ TEST_create(){
+ this.viewerLoaded = true
+ this.container.createComponent(this.nehubaViewerFactory)
+ }
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..cafa7e7ac5578df3e7594cc021ead53680536f2e
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -0,0 +1,17 @@
+<div (click)="TEST_create()" class = "btn btn-default">
+ create new
+</div>
+<div (click)="nehubaDS.increment()" class = "btn btn-default">
+ +
+</div>
+<div (click)="nehubaDS.decrement()" class = "btn btn-default">
+ -
+</div>
+
+{{ nehubaDS.counter }}
+
+<ng-template #container>
+</ng-template>
+
+<ui-splashscreen *ngIf = "!viewerLoaded">
+</ui-splashscreen>
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..76c8b5718524b9c48ee895639ae33682fabd773f
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+ templateUrl : './nehubaViewer.template.html',
+ styleUrls : [
+ './nehubaViewer.style.css'
+ ]
+})
+
+export class NehubaViewerUnit{
+ constructor(
+ ){
+
+ }
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.style.css b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.template.html b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..47a74a68d6a70d9a439ffa4c0ef19b1300431d79
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.template.html
@@ -0,0 +1 @@
+THIS IS A NEHUBA VIEWER UNIT
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..83a185bdb94688f9660c07467ea1bd038e74c854
--- /dev/null
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector : 'ui-splashscreen',
+ templateUrl : './splashScreen.template.html',
+ styleUrls : [
+ `./splashScreen.style.css`
+ ]
+})
+
+export class SplashScreen{
+
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..0187a4588af3eb8009a7d206713b3e131ff38bc2
--- /dev/null
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -0,0 +1 @@
+THIS IS A SPLASH SCREEN
\ No newline at end of file
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54949e01749e13159dfa23bd5d06578e393dd668
--- /dev/null
+++ b/src/ui/ui.module.ts
@@ -0,0 +1,32 @@
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { ComponentsModule } from "../components/components.module";
+
+import { NehubaViewerUnit } from "./nehubaContainer/nehubaViewer/nehubaViewer.component";
+import { NehubaContainner } from "./nehubaContainer/nehubaContainer.component";
+import { SplashScreen } from "./nehubaContainer/splashScreen/splashScreen.component";
+
+
+@NgModule({
+ imports : [
+ BrowserModule,
+ ],
+ declarations : [
+ NehubaContainner,
+ NehubaViewerUnit,
+ SplashScreen
+ ],
+ entryComponents : [
+
+ /* dynamically created components needs to be declared here */
+ NehubaViewerUnit
+ ],
+ exports : [
+ NehubaContainner,
+ NehubaViewerUnit
+ ]
+})
+
+export class UIModule{
+
+}
\ No newline at end of file