From fcac0c9711482d18a4548830ff1e5fe1a3ed001d Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@ster-project.pl>
Date: Thu, 14 Jan 2016 19:51:31 +0100
Subject: [PATCH] demo: add initials

---
 .../components/demo-index/demo-index.html     |  1 +
 .../components/demo-index/demo-index.js       | 17 +++++
 .../demo-view-form/demo-view-form.html        |  5 ++
 .../demo-view-form/demo-view-form.js          | 18 +++++
 .../demo-view-source/demo-view-source.html    | 38 ++++++++++
 .../demo-view-source/demo-view-source.js      | 34 +++++++++
 .../components/demo-view/demo-view.html       | 13 ++++
 demo/client/components/demo-view/demo-view.js | 28 +++++++
 demo/client/components/demo/demo.css          | 11 +++
 demo/client/components/demo/demo.html         | 29 ++++++-
 demo/client/components/demo/demo.js           | 36 ++++++---
 .../components/menu-heading/menu-heading.css  |  9 +++
 .../components/menu-heading/menu-heading.html |  3 +
 .../components/menu-heading/menu-heading.js   | 15 ++++
 .../client/components/menu-link/menu-link.css | 16 ++++
 .../components/menu-link/menu-link.html       |  3 +
 demo/client/components/menu-link/menu-link.js | 15 ++++
 .../components/menu-toggle/menu-toggle.css    | 20 +++++
 .../components/menu-toggle/menu-toggle.html   |  8 ++
 .../components/menu-toggle/menu-toggle.js     | 42 ++++++++++
 .../side-menu-item/side-menu-item.css         | 11 +++
 .../side-menu-item/side-menu-item.html        | 23 ++++++
 .../side-menu-item/side-menu-item.js          | 31 ++++++++
 .../client/components/side-menu/side-menu.css |  4 +
 .../components/side-menu/side-menu.html       |  4 +
 demo/client/components/side-menu/side-menu.js | 15 ++++
 demo/client/data/examples.js                  | 37 +++++++++
 demo/client/data/examples/input.js            | 15 ++++
 demo/client/data/examples/textarea.js         | 15 ++++
 demo/client/data/menu.js                      | 76 +++++++++++++++++++
 demo/client/index.html                        |  5 +-
 31 files changed, 582 insertions(+), 15 deletions(-)
 create mode 100644 demo/client/components/demo-index/demo-index.html
 create mode 100644 demo/client/components/demo-index/demo-index.js
 create mode 100644 demo/client/components/demo-view-form/demo-view-form.html
 create mode 100644 demo/client/components/demo-view-form/demo-view-form.js
 create mode 100644 demo/client/components/demo-view-source/demo-view-source.html
 create mode 100644 demo/client/components/demo-view-source/demo-view-source.js
 create mode 100644 demo/client/components/demo-view/demo-view.html
 create mode 100644 demo/client/components/demo-view/demo-view.js
 create mode 100644 demo/client/components/demo/demo.css
 create mode 100644 demo/client/components/menu-heading/menu-heading.css
 create mode 100644 demo/client/components/menu-heading/menu-heading.html
 create mode 100644 demo/client/components/menu-heading/menu-heading.js
 create mode 100644 demo/client/components/menu-link/menu-link.css
 create mode 100644 demo/client/components/menu-link/menu-link.html
 create mode 100644 demo/client/components/menu-link/menu-link.js
 create mode 100644 demo/client/components/menu-toggle/menu-toggle.css
 create mode 100644 demo/client/components/menu-toggle/menu-toggle.html
 create mode 100644 demo/client/components/menu-toggle/menu-toggle.js
 create mode 100644 demo/client/components/side-menu-item/side-menu-item.css
 create mode 100644 demo/client/components/side-menu-item/side-menu-item.html
 create mode 100644 demo/client/components/side-menu-item/side-menu-item.js
 create mode 100644 demo/client/components/side-menu/side-menu.css
 create mode 100644 demo/client/components/side-menu/side-menu.html
 create mode 100644 demo/client/components/side-menu/side-menu.js
 create mode 100644 demo/client/data/examples.js
 create mode 100644 demo/client/data/examples/input.js
 create mode 100644 demo/client/data/examples/textarea.js
 create mode 100644 demo/client/data/menu.js

diff --git a/demo/client/components/demo-index/demo-index.html b/demo/client/components/demo-index/demo-index.html
new file mode 100644
index 0000000..fa31126
--- /dev/null
+++ b/demo/client/components/demo-index/demo-index.html
@@ -0,0 +1 @@
+Getting started!
diff --git a/demo/client/components/demo-index/demo-index.js b/demo/client/components/demo-index/demo-index.js
new file mode 100644
index 0000000..fcbdfb4
--- /dev/null
+++ b/demo/client/components/demo-index/demo-index.js
@@ -0,0 +1,17 @@
+const { Component, View, State } = angular2now;
+
+@Component({
+  selector: 'demo-index'
+})
+@View({
+  templateUrl: 'client/components/demo-index/demo-index.html'
+})
+@State({
+  name: 'demo.index',
+  url: '/',
+  defaultRoute: '/demo/'
+})
+class DemoIndexComponent {
+  constructor() {
+  }
+}
diff --git a/demo/client/components/demo-view-form/demo-view-form.html b/demo/client/components/demo-view-form/demo-view-form.html
new file mode 100644
index 0000000..9f7d32b
--- /dev/null
+++ b/demo/client/components/demo-view-form/demo-view-form.html
@@ -0,0 +1,5 @@
+<form flex name="vm.form" ng-submit="vm.submit()">
+  <formly-form fields="vm.fields" model="vm.model" form="vm.form" options="vm.options">
+    <md-button type="submit" class="md-primary">Submit</md-button>
+  </formly-form>
+</form>
diff --git a/demo/client/components/demo-view-form/demo-view-form.js b/demo/client/components/demo-view-form/demo-view-form.js
new file mode 100644
index 0000000..a756105
--- /dev/null
+++ b/demo/client/components/demo-view-form/demo-view-form.js
@@ -0,0 +1,18 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'demo-view-form',
+  bind: {
+    fields: '=',
+    model: '=?',
+    options: '=?',
+    form: '=?'
+  }
+})
+@View({
+  templateUrl: 'client/components/demo-view-form/demo-view-form.html'
+})
+class DemoViewFormComponent {
+  constructor() {
+  }
+}
diff --git a/demo/client/components/demo-view-source/demo-view-source.html b/demo/client/components/demo-view-source/demo-view-source.html
new file mode 100644
index 0000000..51e051e
--- /dev/null
+++ b/demo/client/components/demo-view-source/demo-view-source.html
@@ -0,0 +1,38 @@
+<h3 class="md-headline purple-headline">Scope</h3>
+<md-tabs md-dynamic-height md-border-bottom>
+  <md-tab label="{{::item.label}}" ng-repeat="item in vm.sources">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="item.source | json"></div>
+    </md-content>
+  </md-tab>
+  <!-- fields definition -->
+  <!--md-tab label="Fields definition">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.fieldsCopy | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- fields -->
+  <!--md-tab label="Fields">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.fields | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- model -->
+  <!--md-tab label="Model">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.model | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- form -->
+  <!--md-tab label="Form">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.form | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- options -->
+  <!--md-tab label="Options">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.options | json"></div>
+    </md-content>
+  </md-tab-->
+</md-tabs>
diff --git a/demo/client/components/demo-view-source/demo-view-source.js b/demo/client/components/demo-view-source/demo-view-source.js
new file mode 100644
index 0000000..f1a8fd7
--- /dev/null
+++ b/demo/client/components/demo-view-source/demo-view-source.js
@@ -0,0 +1,34 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'demo-view-source',
+  bind: {
+    fields: '=',
+    model: '=?',
+    options: '=?',
+    form: '=?'
+  }
+})
+@View({
+  templateUrl: 'client/components/demo-view-source/demo-view-source.html'
+})
+class DemoViewSourceComponent {
+  constructor() {
+    this.sources = [];
+    // make copy of fields
+    this.fieldsInits = angular.copy(this.fields);
+
+    this.add(this.fieldsInits, 'Initial fields');
+    this.add(this.fields, 'Fields');
+    this.add(this.model, 'Model');
+    this.add(this.form, 'Form');
+    this.add(this.options, 'Options');
+  }
+
+  add(source, label) {
+    this.sources.push({
+      label,
+      source
+    });
+  }
+}
diff --git a/demo/client/components/demo-view/demo-view.html b/demo/client/components/demo-view/demo-view.html
new file mode 100644
index 0000000..a2ba667
--- /dev/null
+++ b/demo/client/components/demo-view/demo-view.html
@@ -0,0 +1,13 @@
+<div layout="column" layout-gt-md="row" layout-padding>
+
+  <h3 class="md-headline purple-headline" layout="row" layout-align="center center">
+    <span flex>Example</span>
+    <md-button ng-if="vm.api" href="{{vm.api}}" target="_blank">Go to API</md-button>
+  </h3>
+
+  <demo-view-form flex fields="vm.fields" model="vm.model" options="vm.options" form="vm.form">
+  </demo-view-form>
+
+  <demo-view-source flex fields="vm.fields" model="vm.model" options="vm.options" form="vm.form">
+  </demo-view-source>
+</div>
diff --git a/demo/client/components/demo-view/demo-view.js b/demo/client/components/demo-view/demo-view.js
new file mode 100644
index 0000000..cf177d6
--- /dev/null
+++ b/demo/client/components/demo-view/demo-view.js
@@ -0,0 +1,28 @@
+const { Component, View, State, Inject } = angular2now;
+
+@Component({
+  selector: 'demo-view'
+})
+@View({
+  templateUrl: 'client/components/demo-view/demo-view.html'
+})
+@State({
+  name: 'demo.view',
+  url: '/{id:[a-z\-]+}'
+})
+@Inject(['$stateParams', 'Examples'])
+class DemoViewComponent {
+  constructor($stateParams, Examples) {
+    this.id = $stateParams.id;
+    this.Examples = Examples;
+
+    const example = Examples.get(this.id);
+
+    if (example) {
+      this.fields = angular.copy(example.formly.fields);
+      this.model = angular.copy(example.formly.model) || {};
+      this.options = angular.copy(example.formly.options) || {};
+      this.api = example.api;
+    }
+  }
+}
diff --git a/demo/client/components/demo/demo.css b/demo/client/components/demo/demo.css
new file mode 100644
index 0000000..b299ce6
--- /dev/null
+++ b/demo/client/components/demo/demo.css
@@ -0,0 +1,11 @@
+#demo-sidenav {
+  background: #35176A;
+}
+
+#demo-sidenav-content {
+  background: transparent;
+}
+
+.purple-headline {
+  color: #673AB7;
+}
diff --git a/demo/client/components/demo/demo.html b/demo/client/components/demo/demo.html
index a7c2213..61e5bcf 100644
--- a/demo/client/components/demo/demo.html
+++ b/demo/client/components/demo/demo.html
@@ -1,3 +1,28 @@
-<div>
-  <formly-form fields="vm.fields"></formly-form>
+<div layout="row" layout-fill>
+  <md-sidenav class="md-sidenav-left md-whiteframe-z1" id="demo-sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
+    <md-toolbar md-scroll-shrink>
+      <div class="md-toolbar-tools">
+        <h3>
+          <span>formlyMaterial</span>
+        </h3>
+      </div>
+    </md-toolbar>
+    <md-content role="navigation" id="demo-sidenav-content">
+      <side-menu menu="vm.menu"></side-menu>
+    </md-content>
+  </md-sidenav>
+  <md-content flex>
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <md-button class="md-icon-button hide-gt-sm" ng-click="vm.toggleMenu()" aria-label="Settings">
+          <md-icon md-svg-icon="navigation:ic_menu_24px"></md-icon>
+        </md-button>
+        <h2>
+          <span>Demo</span>
+        </h2>
+      </div>
+    </md-toolbar>
+    <ui-view></ui-view>
+  </md-content>
+
 </div>
diff --git a/demo/client/components/demo/demo.js b/demo/client/components/demo/demo.js
index 2178c65..5269bfa 100644
--- a/demo/client/components/demo/demo.js
+++ b/demo/client/components/demo/demo.js
@@ -1,5 +1,5 @@
 const {
-  SetModule, Component, View, State, bootstrap, options
+  SetModule, Component, View, State, Inject, bootstrap, options
 } = angular2now;
 
 options({
@@ -10,10 +10,20 @@ SetModule('demo', [
   'angular-meteor',
   'ui.router',
   'formlyMaterial',
-]);
+  'hljs'
+]).config(['$mdThemingProvider', '$mdIconProvider', ($mdThemingProvider, $mdIconProvider) => {
+  $mdThemingProvider.theme('default')
+    .primaryPalette('deep-purple')
+    .accentPalette('green')
+    .warnPalette('red')
+    .backgroundPalette('grey');
+
+  $mdIconProvider.iconSet('navigation',
+    `/packages/planettraining_material-design-icons/bower_components/material-design-icons/sprites/svg-sprite/svg-sprite-navigation.svg`);
+}]);
 
 @Component({
-  'selector': 'demo'
+  selector: 'demo'
 })
 @View({
   templateUrl: 'client/components/demo/demo.html'
@@ -21,18 +31,20 @@ SetModule('demo', [
 @State({
   name: 'demo',
   url: '/demo',
-  defaultRoute: true,
+  abstract: true,
   html5Mode: true
 })
+@Inject(['Menu', '$mdSidenav'])
 class DemoComponent {
-  constructor() {
-    this.fields = [{
-      type: 'datepicker',
-      key: 'start',
-      templateOptions: {
-        placeholder: 'Start date'
-      }
-    }];
+  constructor(Menu, $mdSidenav) {
+    this.$mdSidenav = $mdSidenav;
+
+    this.menu = Menu.get();
+  }
+
+  toggleMenu() {
+    this.$mdSidenav('left')
+      .toggle();
   }
 }
 
diff --git a/demo/client/components/menu-heading/menu-heading.css b/demo/client/components/menu-heading/menu-heading.css
new file mode 100644
index 0000000..f0c6677
--- /dev/null
+++ b/demo/client/components/menu-heading/menu-heading.css
@@ -0,0 +1,9 @@
+menu-heading .menu-heading {
+  display: block;
+  line-height: 32px;
+  margin: 0;
+  padding: 8px 16px;
+  text-align: left;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+}
diff --git a/demo/client/components/menu-heading/menu-heading.html b/demo/client/components/menu-heading/menu-heading.html
new file mode 100644
index 0000000..6338834
--- /dev/null
+++ b/demo/client/components/menu-heading/menu-heading.html
@@ -0,0 +1,3 @@
+<h2 class="md-subhead menu-heading">
+  {{::vm.name}}
+</h2>
diff --git a/demo/client/components/menu-heading/menu-heading.js b/demo/client/components/menu-heading/menu-heading.js
new file mode 100644
index 0000000..dc11646
--- /dev/null
+++ b/demo/client/components/menu-heading/menu-heading.js
@@ -0,0 +1,15 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'menu-heading',
+  bind: {
+    name: '='
+  }
+})
+@View({
+  templateUrl: 'client/components/menu-heading/menu-heading.html'
+})
+class MenuHeadingComponent {
+  constructor() {
+  }
+}
diff --git a/demo/client/components/menu-link/menu-link.css b/demo/client/components/menu-link/menu-link.css
new file mode 100644
index 0000000..4b9e774
--- /dev/null
+++ b/demo/client/components/menu-link/menu-link.css
@@ -0,0 +1,16 @@
+menu-link .menu-link {
+  border-radius: 0;
+  color: white;
+  cursor: pointer;
+  display: block;
+  align-items: inherit;
+  line-height: 40px;
+  margin: 0;
+  max-height: 40px;
+  overflow: hidden;
+  padding: 0px 16px;
+  text-align: left;
+  text-decoration: none;
+  white-space: normal;
+  width: 100%;
+}
diff --git a/demo/client/components/menu-link/menu-link.html b/demo/client/components/menu-link/menu-link.html
new file mode 100644
index 0000000..0d516c6
--- /dev/null
+++ b/demo/client/components/menu-link/menu-link.html
@@ -0,0 +1,3 @@
+<md-button class="menu-link" ui-sref="demo.view({id: vm.sectionId})">
+  {{::vm.sectionName}}
+</md-button>
diff --git a/demo/client/components/menu-link/menu-link.js b/demo/client/components/menu-link/menu-link.js
new file mode 100644
index 0000000..e769ceb
--- /dev/null
+++ b/demo/client/components/menu-link/menu-link.js
@@ -0,0 +1,15 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'menu-link',
+  bind: {
+    sectionId: '=',
+    sectionName: '=',
+  }
+})
+@View({
+  templateUrl: 'client/components/menu-link/menu-link.html'
+})
+class MenuLinkComponent {
+  
+}
diff --git a/demo/client/components/menu-toggle/menu-toggle.css b/demo/client/components/menu-toggle/menu-toggle.css
new file mode 100644
index 0000000..6f4ae52
--- /dev/null
+++ b/demo/client/components/menu-toggle/menu-toggle.css
@@ -0,0 +1,20 @@
+menu-toggle .menu-toggle {
+  border-radius: 0;
+  color: white;
+  cursor: pointer;
+  display: block;
+  align-items: inherit;
+  line-height: 40px;
+  margin: 0;
+  max-height: 40px;
+  overflow: hidden;
+  padding: 0px 16px;
+  text-align: left;
+  text-decoration: none;
+  white-space: normal;
+  width: 100%;
+}
+
+menu-toggle menu-link .menu-link {
+  padding: 0px 16px 0 32px;
+}
diff --git a/demo/client/components/menu-toggle/menu-toggle.html b/demo/client/components/menu-toggle/menu-toggle.html
new file mode 100644
index 0000000..51a1393
--- /dev/null
+++ b/demo/client/components/menu-toggle/menu-toggle.html
@@ -0,0 +1,8 @@
+<md-button class="menu-toggle" ng-click="vm.toggle()">
+  {{::vm.sectionName}}
+</md-button>
+<ul ng-show="vm.isOpen()">
+  <li ng-repeat="child in ::vm.sectionChildren">
+    <menu-link section-name="::child.name" section-id="::child.id"></menu-link>
+  </li>
+</ul>
diff --git a/demo/client/components/menu-toggle/menu-toggle.js b/demo/client/components/menu-toggle/menu-toggle.js
new file mode 100644
index 0000000..d1d7493
--- /dev/null
+++ b/demo/client/components/menu-toggle/menu-toggle.js
@@ -0,0 +1,42 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'menu-toggle',
+  bind: {
+    sectionName: '=',
+    sectionState: '=',
+    sectionChildren: '=',
+    onOpen: '&?',
+    onClose: '&?'
+  }
+})
+@View({
+  templateUrl: 'client/components/menu-toggle/menu-toggle.html'
+})
+class MenuToggleComponent {
+  constructor() {
+    this.opened = false;
+  }
+
+  open() {
+    this.opened = true;
+    this.onOpen();
+  }
+
+  close() {
+    this.opened = false;
+    this.onClose();
+  }
+
+  toggle() {
+    if (this.opened === true) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  isOpen() {
+    return this.opened === true;
+  }
+}
diff --git a/demo/client/components/side-menu-item/side-menu-item.css b/demo/client/components/side-menu-item/side-menu-item.css
new file mode 100644
index 0000000..16046db
--- /dev/null
+++ b/demo/client/components/side-menu-item/side-menu-item.css
@@ -0,0 +1,11 @@
+side-menu ul.side-menu > li.opened {
+  background: #432677;
+}
+
+side-menu ul.side-menu > li {
+  border-bottom: 1px solid #673AB7;
+}
+
+side-menu ul.side-menu > li:last-child {
+  border-bottom: 0 none;
+}
diff --git a/demo/client/components/side-menu-item/side-menu-item.html b/demo/client/components/side-menu-item/side-menu-item.html
new file mode 100644
index 0000000..88084ca
--- /dev/null
+++ b/demo/client/components/side-menu-item/side-menu-item.html
@@ -0,0 +1,23 @@
+<li>
+  <!-- menu heading -->
+  <menu-heading
+    name="::vm.section.name"
+    ng-if="vm.section.type === 'heading'">
+  </menu-heading>
+
+  <!-- menu link -->
+  <menu-link
+    section-name="::vm.section.name"
+    section-id="::vm.section.id"
+    ng-if="vm.section.type === 'link'">
+  </menu-link>
+
+  <!-- menu toggle -->
+  <menu-toggle
+    section-name="::vm.section.name"
+    section-children="::vm.section.children"
+    on-open="vm.onOpen()"
+    on-close="vm.onClose()"
+    ng-if="vm.section.type === 'toggle'">
+  </menu-toggle>
+</li>
diff --git a/demo/client/components/side-menu-item/side-menu-item.js b/demo/client/components/side-menu-item/side-menu-item.js
new file mode 100644
index 0000000..f090ff6
--- /dev/null
+++ b/demo/client/components/side-menu-item/side-menu-item.js
@@ -0,0 +1,31 @@
+const { Component, View, Inject } = angular2now;
+
+@Component({
+  selector: 'side-menu-item',
+  replace: true,
+  bind: {
+    section: '='
+  }
+})
+@View({
+  templateUrl: 'client/components/side-menu-item/side-menu-item.html'
+})
+@Inject(['$animate', '$element'])
+class SideMenuItemComponent {
+  constructor($animate, $element) {
+    this.$animate = $animate;
+    this.$element = $element;
+
+    this.opened = false;
+  }
+
+  onOpen() {
+    this.$animate.addClass(this.$element, 'opened');
+    this.opened = true;
+  }
+
+  onClose() {
+    this.$animate.removeClass(this.$element, 'opened');
+    this.opened = false;
+  }
+}
diff --git a/demo/client/components/side-menu/side-menu.css b/demo/client/components/side-menu/side-menu.css
new file mode 100644
index 0000000..a4ea334
--- /dev/null
+++ b/demo/client/components/side-menu/side-menu.css
@@ -0,0 +1,4 @@
+side-menu ul {
+  margin: 0;
+  padding: 0;
+}
diff --git a/demo/client/components/side-menu/side-menu.html b/demo/client/components/side-menu/side-menu.html
new file mode 100644
index 0000000..4af70a5
--- /dev/null
+++ b/demo/client/components/side-menu/side-menu.html
@@ -0,0 +1,4 @@
+<ul class="side-menu">
+  <side-menu-item ng-repeat="section in ::vm.menu.sections" section="section">
+  </side-menu-item>
+</ul>
diff --git a/demo/client/components/side-menu/side-menu.js b/demo/client/components/side-menu/side-menu.js
new file mode 100644
index 0000000..5a8d2a1
--- /dev/null
+++ b/demo/client/components/side-menu/side-menu.js
@@ -0,0 +1,15 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'side-menu',
+  bind: {
+    menu: '='
+  }
+})
+@View({
+  templateUrl: 'client/components/side-menu/side-menu.html'
+})
+class SideMenuComponent {
+  constructor() {
+  }
+}
diff --git a/demo/client/data/examples.js b/demo/client/data/examples.js
new file mode 100644
index 0000000..a8b7ab0
--- /dev/null
+++ b/demo/client/data/examples.js
@@ -0,0 +1,37 @@
+const { SetModule, Service } = angular2now;
+
+SetModule('demo');
+
+@Service({
+  name: 'Examples'
+})
+class Examples {
+  constructor() {
+    this.examples = new Map();
+  }
+
+  /**
+   * Add example
+   *
+   * @param {String} id
+   * @param {String} section
+   * @param {Object}
+   */
+  set(id, section, { fields, model, options }, api) {
+    const docs = 'https://github.com/formly-js/angular-formly-templates-material/blob/master/docs/';
+
+    this.examples.set(id, {
+      section,
+      api: (typeof api === 'string' && !api.match('^http')) ? docs + api : api,
+      formly: {
+        fields,
+        model,
+        options
+      }
+    });
+  }
+
+  get(id) {
+    return this.examples.get(id);
+  }
+}
diff --git a/demo/client/data/examples/input.js b/demo/client/data/examples/input.js
new file mode 100644
index 0000000..7ba9dc0
--- /dev/null
+++ b/demo/client/data/examples/input.js
@@ -0,0 +1,15 @@
+const { SetModule } = angular2now;
+
+SetModule('demo').run(['Examples', 'Menu', (Examples, Menu) => {
+  Examples.set('input', 'types', {
+    fields: [{
+      key: 'text',
+      type: 'input',
+      templateOptions: {
+        label: 'Text'
+      }
+    }]
+  }, 'types/input.md');
+
+  Menu.addChild('types', 'input');
+}]);
diff --git a/demo/client/data/examples/textarea.js b/demo/client/data/examples/textarea.js
new file mode 100644
index 0000000..07e6855
--- /dev/null
+++ b/demo/client/data/examples/textarea.js
@@ -0,0 +1,15 @@
+const { SetModule } = angular2now;
+
+SetModule('demo').run(['Examples', 'Menu', (Examples, Menu) => {
+  Examples.set('textarea', 'types', {
+    fields: [{
+      key: 'text',
+      type: 'textarea',
+      templateOptions: {
+        label: 'Text'
+      }
+    }]
+  }, 'types/textarea.md');
+
+  Menu.addChild('types', 'textarea');
+}]);
diff --git a/demo/client/data/menu.js b/demo/client/data/menu.js
new file mode 100644
index 0000000..e72dd64
--- /dev/null
+++ b/demo/client/data/menu.js
@@ -0,0 +1,76 @@
+const { SetModule, Service, Inject } = angular2now;
+
+SetModule('demo');
+
+@Service({
+  name: 'Menu'
+})
+@Inject(['Examples'])
+class Menu {
+  constructor(Examples) {
+    this.menu = [];
+
+    // move it from here
+    this.addHeading('basic');
+    this.addToggle('types');
+    this.addToggle('wrappers');
+    this.addHeading('advanced');
+  }
+
+  add(name, type, id) {
+    if (typeof name !== 'string' || name.length === 0) {
+      throw new Error(`[Menu] name has to be a string`);
+    }
+
+    if (typeof type === 'undefined' || ['toggle', 'link', 'heading'].indexOf(type) === -1) {
+      throw new Error(`[Menu] type has to be one of: heading, link, toggle`);
+    }
+
+    this.menu.push({
+      name,
+      type,
+      id
+    });
+  }
+
+  addLink(name, id) {
+    this.add(name, 'link', id || name);
+  }
+
+  addHeading(name) {
+    this.add(name, 'heading');
+  }
+
+  addToggle(name) {
+    this.add(name, 'toggle');
+  }
+
+  addChild(parent, name, id) {
+    const found = _.find(this.menu, (item) => item.name === parent);
+
+    if (!found) {
+      throw new Error(`[Menu] There is no ${parent} available`);
+    }
+
+    found.children = found.children || [];
+
+    if (_.find(found.children, (child) => child.name === name)) {
+      throw new Error(`[Menu] There is a child ${name} already`);
+    }
+
+    found.children.push({
+      name,
+      id: id || name
+    });
+  }
+
+  find(id) {
+    
+  }
+
+  get() {
+    return {
+      sections: this.menu
+    };
+  }
+}
diff --git a/demo/client/index.html b/demo/client/index.html
index 78e560d..c852fc6 100644
--- a/demo/client/index.html
+++ b/demo/client/index.html
@@ -1,6 +1,9 @@
 <head>
   <title>FormlyMaterial demo</title>
+  <base href="/">
+  <meta name="viewport" content="initial-scale=1" />
+  <script src="https://npmcdn.com/angular-highlightjs@0.5.1/angular-highlightjs.min.js"></script>
 </head>
 <body>
-  <demo></demo>
+  <demo style="display: flex;" layout-fill></demo>
 </body>