diff --git a/html/nuDashboard.html b/html/nuDashboard.html
index 13c689d..ce940aa 100644
--- a/html/nuDashboard.html
+++ b/html/nuDashboard.html
@@ -6,9 +6,9 @@
         width: 18px;
     }
 </style>
-
+<!-- $mdMedia('gt-md') -->
 <div id='explorerUiContainer' ng-show="$ctrl.isActive()" style='position:absolute;top:10px;height:90vh;background-color:white;z-index:1000000;'>
-    <md-sidenav class="md-sidenav-left" md-component-id="primo-explorer" md-is-locked-open="$mdMedia('gt-md')" md-whiteframe="4" style="height:100%;">
+    <md-sidenav class="md-sidenav-left" md-component-id="primo-explorer" md-is-locked-open="true" md-whiteframe="4" style="height:100%;">
         <header id='explorerUiHeader' ng-mousedown='$ctrl.headerMove($event)'>
             <md-toolbar>
                 <div class="md-toolbar-tools">
@@ -33,7 +33,7 @@ <h2 flex md-truncate>PrimoExplorer {{$ctrl.version}}</h2>
                 </section>
                 <md-content style="height:90%;">
                     <md-list class="md-dense">
-                        <md-list-item ng-repeat="component in $ctrl.components | filter:$ctrl.componentFilter" ng-click="$ctrl.loadComponent(component)">
+                        <md-list-item ng-repeat="component in $ctrl.components | filter:$ctrl.componentFilter" ng-click="$ctrl.loadComponent(component);$event.stopPropagation();">
                             <span>{{component}}</span>
                             <md-divider ng-if="!$last"></md-divider>
                         </md-list-item>
@@ -73,13 +73,14 @@ <h2 flex md-truncate>{{$ctrl.selectedComponentName}}</h2>
                             </md-button>
                         </div>
                         <div layout="row" layout-align="center center">
-                          <div flex md-truncate style="font-size:10px;">css({{$ctrl.selectedComponentElement.cssPath}})</div>
+                            <input flex style="font-size:10px;text-align:center;" type="text" name="" value="{{$ctrl.selectedComponentElement.cssPath}}">
                         </div>
                     </section>
                     <section>
                         <md-list>
-                          <md-list-item ng-repeat="key in $ctrl.selectedComponentElementCtrlKeys()">
-                              {{key}}
+                          <md-list-item ng-repeat="property in $ctrl.selectedComponentElementProperties">
+                            <span>{{property.key}}:</span>
+                            <span class="md-secondary" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{property.value}}</span>
                           </md-list-item>
                         </md-list>
                     </section>
diff --git a/js/custom.js b/js/custom.js
index b2c6169..7b52cbf 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -277,14 +277,15 @@ var Component = function () {
     value: function ctrl() {
       var scope = this.scope();
       if (scope) {
+        var scopeChild = scope.$$childTail;
         if (Object.keys(scope).includes('$ctrl')) {
           return scope.$ctrl;
         } else if (Object.keys(scope).includes('ctrl')) {
           return scope.ctrl;
-        } else if (scope.$$childTail && Object.keys(scope.$$childTail).includes('$ctrl')) {
-          return scope.$$childTail.$ctrl;
-        } else if (scope.$$childTail && Object.keys(scope.$$childTail).includes('ctrl')) {
-          return scope.$$childTail.ctrl;
+        } else if (scopeChild && Object.keys(scopeChild).includes('$ctrl')) {
+          return scopeChild.$ctrl;
+        } else if (scopeChild && Object.keys(scopeChild).includes('ctrl')) {
+          return scopeChild.ctrl;
         } else {
           console.error('No $ctrl defined');
         }
@@ -594,6 +595,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -606,6 +609,7 @@ var Ui = function () {
     //vmUi.active = false;
     vmUi._injectDOMElement();
     vmUi.module = vmUi._createModule();
+
     angular.bootstrap(document.querySelector('#explorerUi'), ['explorerUi']);
     vmUi.scope = angular.element(document.querySelector('#explorerUi')).scope();
   }
@@ -614,7 +618,7 @@ var Ui = function () {
     key: '_createModule',
     value: function _createModule() {
       var vmUi = this;
-      return angular.module("explorerUi", ['ngMaterial']).component("explorerUi", {
+      return angular.module("explorerUi", ['ngMaterial', 'angularLoad']).component("explorerUi", {
         templateUrl: 'nuDashboard.html',
         controller: ['$http', '$scope', function ($http, $scope) {
           var ctrl = this;
@@ -647,10 +651,12 @@ var Ui = function () {
               ctrl.selectedComponentElementIdx = index;
               ctrl.selectedComponentElementCount = ctrl.selectedComponent.length;
               ctrl.selectedComponentElement = ctrl.selectedComponent[index];
+              ctrl.selectedComponentElementProperties = ctrl.selectedComponentElementCtrlKeys();
             } else {
               ctrl.selectedComponentElementIdx = 0;
               ctrl.selectedComponentElementCount = 0;
               ctrl.selectedComponentElement = null;
+              ctrl.selectedComponentElementProperties = [];
             }
           };
 
@@ -667,16 +673,102 @@ var Ui = function () {
             ctrl.refreshComponents();
           };
 
-          ctrl.selectedComponentElementCtrlKeys = function () {
+          ctrl.rselectedComponentElementCtrlKeys = function () {
             if (ctrl.selectedComponentElement) {
-              var keys = ctrl.selectedComponentElement.ctrl();
-              if (keys) {
-                return Object.keys(keys);
+              var selectedCtrl = ctrl.selectedComponentElement.ctrl();
+              if (selectedCtrl) {
+                return Object.keys(selectedCtrl); //.map((d) => {return {key: d, value:'', type:''}});
               }
             }
             return [];
           };
 
+          ctrl.selectedComponentElementCtrlKeys = function () {
+            var sce = [];
+            if (ctrl.selectedComponentElement) {
+              var selectedCtrl = ctrl.selectedComponentElement.ctrl();
+              if (selectedCtrl) {
+                var _iteratorNormalCompletion = true;
+                var _didIteratorError = false;
+                var _iteratorError = undefined;
+
+                try {
+                  for (var _iterator = Object.keys(selectedCtrl)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                    var key = _step.value;
+
+                    if (selectedCtrl.hasOwnProperty(key)) {
+                      switch (_typeof(selectedCtrl[key])) {
+                        case 'string':
+                          sce.push({
+                            key: key,
+                            value: '"' + selectedCtrl[key] + '"',
+                            type: 'string'
+                          });
+                          break;
+                        case 'boolean':
+                          sce.push({
+                            key: key,
+                            value: '' + selectedCtrl[key],
+                            type: 'boolean'
+                          });
+                          break;
+                        case 'number':
+                          sce.push({
+                            key: key,
+                            value: '' + selectedCtrl[key],
+                            type: 'number'
+                          });
+                          break;
+                        case 'undefined':
+                          sce.push({
+                            key: key,
+                            value: "Undefined",
+                            type: 'undefined'
+                          });
+                          break;
+                        case 'null':
+                          sce.push({
+                            key: key,
+                            value: "Null",
+                            type: 'null'
+                          });
+                          break;
+                        default:
+                          try {
+                            sce.push({
+                              key: key,
+                              value: '' + selectedCtrl[key].constructor.name,
+                              type: _typeof(selectedCtrl[key])
+                            });
+                          } catch (e) {
+                            sce.push({
+                              key: key,
+                              value: '' + _typeof(selectedCtrl[key]),
+                              type: _typeof(selectedCtrl[key])
+                            });
+                          }
+                      }
+                    }
+                  }
+                } catch (err) {
+                  _didIteratorError = true;
+                  _iteratorError = err;
+                } finally {
+                  try {
+                    if (!_iteratorNormalCompletion && _iterator.return) {
+                      _iterator.return();
+                    }
+                  } finally {
+                    if (_didIteratorError) {
+                      throw _iteratorError;
+                    }
+                  }
+                }
+              }
+            }
+            return sce;
+          };
+
           ctrl.selectedComponentElementPrev = function () {
             if (ctrl.selectedComponentElementIdx > 0) {
               ctrl.selectedComponentElementIdx -= 1;
@@ -740,7 +832,7 @@ var Ui = function () {
       }).config(function ($mdIconProvider) {
         $mdIconProvider.iconSet('primo-ui', 'img/svg/svg-primo-ui.svg', 18);
       }).run(function ($templateCache) {
-        $templateCache.put('nuDashboard.html', '<style>\n    .f18 {\n        min-height: 18px;\n        min-width: 18px;\n        height: 18px;\n        width: 18px;\n    }\n</style>\n\n<div id=\'explorerUiContainer\' ng-show="$ctrl.isActive()" style=\'position:absolute;top:10px;height:90vh;background-color:white;z-index:1000000;\'>\n    <md-sidenav class="md-sidenav-left" md-component-id="primo-explorer" md-is-locked-open="$mdMedia(\'gt-md\')" md-whiteframe="4" style="height:100%;">\n        <header id=\'explorerUiHeader\' ng-mousedown=\'$ctrl.headerMove($event)\'>\n            <md-toolbar>\n                <div class="md-toolbar-tools">\n                    <h2 flex md-truncate>PrimoExplorer {{$ctrl.version}}</h2>\n                    <md-button class=\'md-icon-button\' ng-click="$ctrl.toggle()" aria-label="Close" title=\'Close\'>\n                        <md-icon md-svg-icon="primo-ui:close"></md-icon>\n                    </md-button>\n                </div>\n            </md-toolbar>\n        </header>\n\n        <section id=\'pe-components\'>\n            <div flex id=\'pe-components-list\' ng-hide=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'background-color:#eee;\'>\n                    <div layout=\'row\'>\n                        <md-button ng-click=\'$ctrl.refreshComponents()\'>Reload</md-button>\n                        <md-input-container flex md-no-float>\n                            <label>Filter</label>\n                            <input ng-model="$ctrl.componentFilter">\n                        </md-input-container>\n                    </div>\n                </section>\n                <md-content style="height:90%;">\n                    <md-list class="md-dense">\n                        <md-list-item ng-repeat="component in $ctrl.components | filter:$ctrl.componentFilter" ng-click="$ctrl.loadComponent(component)">\n                            <span>{{component}}</span>\n                            <md-divider ng-if="!$last"></md-divider>\n                        </md-list-item>\n                    </md-list>\n                </md-content>\n            </div>\n\n            <div flex id=\'pe-components-detail\' ng-show=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'height:100%\'>\n                    <md-toolbar class=\'md-hue-2\' style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n                        <div class="md-toolbar-tools" style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentDetailShow = false" aria-label="Back" title="Back">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n\n                              <h2 flex md-truncate>{{$ctrl.selectedComponentName}}</h2>\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.blink()" aria-label="Blink component" title="Blink component">\n                                <md-icon class="f18" md-svg-icon="primo-ui:bell"></md-icon>\n                            </md-button>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.pushToConsole()" aria-label="Push to console" title="Push to console">\n                                <md-icon class="f18" md-svg-icon="primo-ui:open-in-new"></md-icon>\n                            </md-button>\n                        </div>\n                    </md-toolbar>\n                    <section style="background-color:#eee;">\n                        <div layout="row" layout-align="center center">\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementPrev()" aria-label="Previous element" title="Previous element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n                            <div layout-align="center center">\n                                <div>{{$ctrl.selectedComponentElementIdx+1}}/{{$ctrl.selectedComponentElementCount}}</div>\n                            </div>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementNext()" aria-label="Next element" title="Next element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-right"></md-icon>\n                            </md-button>\n                        </div>\n                        <div layout="row" layout-align="center center">\n                          <div flex md-truncate style="font-size:10px;">css({{$ctrl.selectedComponentElement.cssPath}})</div>\n                        </div>\n                    </section>\n                    <section>\n                        <md-list>\n                          <md-list-item ng-repeat="key in $ctrl.selectedComponentElementCtrlKeys()">\n                              {{key}}\n                          </md-list-item>\n                        </md-list>\n                    </section>\n                </section>\n            </div>\n        </section>\n    </md-sidenav>\n</div>\n');
+        $templateCache.put('nuDashboard.html', '<style>\n    .f18 {\n        min-height: 18px;\n        min-width: 18px;\n        height: 18px;\n        width: 18px;\n    }\n</style>\n<!-- $mdMedia(\'gt-md\') -->\n<div id=\'explorerUiContainer\' ng-show="$ctrl.isActive()" style=\'position:absolute;top:10px;height:90vh;background-color:white;z-index:1000000;\'>\n    <md-sidenav class="md-sidenav-left" md-component-id="primo-explorer" md-is-locked-open="true" md-whiteframe="4" style="height:100%;">\n        <header id=\'explorerUiHeader\' ng-mousedown=\'$ctrl.headerMove($event)\'>\n            <md-toolbar>\n                <div class="md-toolbar-tools">\n                    <h2 flex md-truncate>PrimoExplorer {{$ctrl.version}}</h2>\n                    <md-button class=\'md-icon-button\' ng-click="$ctrl.toggle()" aria-label="Close" title=\'Close\'>\n                        <md-icon md-svg-icon="primo-ui:close"></md-icon>\n                    </md-button>\n                </div>\n            </md-toolbar>\n        </header>\n\n        <section id=\'pe-components\'>\n            <div flex id=\'pe-components-list\' ng-hide=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'background-color:#eee;\'>\n                    <div layout=\'row\'>\n                        <md-button ng-click=\'$ctrl.refreshComponents()\'>Reload</md-button>\n                        <md-input-container flex md-no-float>\n                            <label>Filter</label>\n                            <input ng-model="$ctrl.componentFilter">\n                        </md-input-container>\n                    </div>\n                </section>\n                <md-content style="height:90%;">\n                    <md-list class="md-dense">\n                        <md-list-item ng-repeat="component in $ctrl.components | filter:$ctrl.componentFilter" ng-click="$ctrl.loadComponent(component);$event.stopPropagation();">\n                            <span>{{component}}</span>\n                            <md-divider ng-if="!$last"></md-divider>\n                        </md-list-item>\n                    </md-list>\n                </md-content>\n            </div>\n\n            <div flex id=\'pe-components-detail\' ng-show=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'height:100%\'>\n                    <md-toolbar class=\'md-hue-2\' style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n                        <div class="md-toolbar-tools" style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentDetailShow = false" aria-label="Back" title="Back">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n\n                              <h2 flex md-truncate>{{$ctrl.selectedComponentName}}</h2>\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.blink()" aria-label="Blink component" title="Blink component">\n                                <md-icon class="f18" md-svg-icon="primo-ui:bell"></md-icon>\n                            </md-button>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.pushToConsole()" aria-label="Push to console" title="Push to console">\n                                <md-icon class="f18" md-svg-icon="primo-ui:open-in-new"></md-icon>\n                            </md-button>\n                        </div>\n                    </md-toolbar>\n                    <section style="background-color:#eee;">\n                        <div layout="row" layout-align="center center">\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementPrev()" aria-label="Previous element" title="Previous element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n                            <div layout-align="center center">\n                                <div>{{$ctrl.selectedComponentElementIdx+1}}/{{$ctrl.selectedComponentElementCount}}</div>\n                            </div>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementNext()" aria-label="Next element" title="Next element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-right"></md-icon>\n                            </md-button>\n                        </div>\n                        <div layout="row" layout-align="center center">\n                            <input flex style="font-size:10px;text-align:center;" type="text" name="" value="{{$ctrl.selectedComponentElement.cssPath}}">\n                        </div>\n                    </section>\n                    <section>\n                        <md-list>\n                          <md-list-item ng-repeat="property in $ctrl.selectedComponentElementProperties">\n                            <span>{{property.key}}:</span>\n                            <span class="md-secondary" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{property.value}}</span>\n                          </md-list-item>\n                        </md-list>\n                    </section>\n                </section>\n            </div>\n        </section>\n    </md-sidenav>\n</div>\n');
       });
     }
   }, {
diff --git a/js/custom.module.js b/js/custom.module.js
index 53ba0be..0d3eb53 100644
--- a/js/custom.module.js
+++ b/js/custom.module.js
@@ -1 +1 @@
-var app = angular.module('viewCustom', []);
+//var app = angular.module('viewCustom', []);
diff --git a/js/primo/explore/components.js b/js/primo/explore/components.js
index 8c7b821..4c9fef8 100644
--- a/js/primo/explore/components.js
+++ b/js/primo/explore/components.js
@@ -30,14 +30,15 @@ class Component {
   ctrl(){
     let scope = this.scope();
     if (scope) {
+      let scopeChild = scope.$$childTail;
       if (Object.keys(scope).includes('$ctrl')) {
           return scope.$ctrl
       } else if(Object.keys(scope).includes('ctrl')) {
           return scope.ctrl
-      } else if (scope.$$childTail && Object.keys(scope.$$childTail).includes('$ctrl')){
-          return scope.$$childTail.$ctrl;
-      } else if (scope.$$childTail && Object.keys(scope.$$childTail).includes('ctrl')){
-          return scope.$$childTail.ctrl;
+      } else if (scopeChild && Object.keys(scopeChild).includes('$ctrl')){
+          return scopeChild.$ctrl;
+      } else if (scopeChild && Object.keys(scopeChild).includes('ctrl')){
+          return scopeChild.ctrl;
       } else {
           console.error('No $ctrl defined');
       }
diff --git a/js/primo/explore/ui.js b/js/primo/explore/ui.js
index 8e23742..ca0f5b2 100644
--- a/js/primo/explore/ui.js
+++ b/js/primo/explore/ui.js
@@ -1,166 +1,235 @@
-export default class Ui{
-  constructor(){
+export default class Ui {
+  constructor() {
     let vmUi = this;
     //vmUi.active = false;
     vmUi._injectDOMElement();
     vmUi.module = vmUi._createModule();
+
     angular.bootstrap(document.querySelector('#explorerUi'), ['explorerUi']);
     vmUi.scope = angular.element(document.querySelector('#explorerUi')).scope();
   }
 
-  _createModule(){
+  _createModule() {
     let vmUi = this;
-    return angular.module("explorerUi", ['ngMaterial'])
-           .component("explorerUi",{
-             templateUrl: 'nuDashboard.html',
-             controller:['$http', '$scope', function($http, $scope){
-               let ctrl = this;
-               ctrl.version = Primo.version || '';
-               ctrl.selectedTab = 0;
-               ctrl.selectedComponent = null;
-               ctrl.componentFilter = '';
-               ctrl.selectedComponentName = '';
-               ctrl.selectedComponentDetailShow = false;
-               ctrl.selectedComponentElementIdx = 0;
-               ctrl.selectedComponentElementCount = 0;
-               ctrl.selectedComponentElement = null;
-
-               ctrl.components = '';
-
-               ctrl.loadComponent = function(name){
-                 let c = Primo.explore.components.get(name);
-                 if (c && c.length > 0) {
-                   ctrl.selectedComponent = c;
-                   ctrl.selectedComponentName = name;
-                   ctrl.loadComponentElement(0);
-                   ctrl.selectedComponentDetailShow = true;
-                 } else {
-                   ctrl.selectedComponent = null;
-                 }
-
-               }
-
-               ctrl.loadComponentElement = function(index){
-                 if (ctrl.selectedComponent) {
-                   ctrl.selectedComponentElementIdx = index;
-                   ctrl.selectedComponentElementCount = ctrl.selectedComponent.length;
-                   ctrl.selectedComponentElement = ctrl.selectedComponent[index];
-                 } else {
-                   ctrl.selectedComponentElementIdx = 0;
-                   ctrl.selectedComponentElementCount = 0;
-                   ctrl.selectedComponentElement = null;
-                 }
-
-               }
-
-               ctrl.refreshComponents = function(){
-                 ctrl.components = Primo.explore.components.keys();
-               }
-
-               ctrl.isActive = function(){
-                 return vmUi.active;
-               }
-
-               ctrl.toggle = function() {
-                 vmUi.toggle();
-                 ctrl.refreshComponents();
-               }
-
-               ctrl.selectedComponentElementCtrlKeys = function(){
-                 if (ctrl.selectedComponentElement) {
-                   let keys = ctrl.selectedComponentElement.ctrl();
-                   if (keys) {
-                      return Object.keys(keys);
-                   }
-                 }
-                 return [];
-               }
-
-               ctrl.selectedComponentElementPrev = function(){
-                 if (ctrl.selectedComponentElementIdx > 0){
-                   ctrl.selectedComponentElementIdx -= 1;
-                   ctrl.loadComponentElement(ctrl.selectedComponentElementIdx);
-                 }
-               }
-
-               ctrl.selectedComponentElementNext = function(){
-                 if (ctrl.selectedComponentElementIdx < ctrl.selectedComponentElementCount-1){
-                   ctrl.selectedComponentElementIdx += 1;
-                   ctrl.loadComponentElement(ctrl.selectedComponentElementIdx);
-                 }
-               }
-
-               ctrl.blink = function() {
-                 if (ctrl.selectedComponentElement) {
-                   console.log(`blinking ${ctrl.selectedComponentName}[${ctrl.selectedComponentElementIdx }]`);
-                   ctrl.selectedComponentElement.blink();
-                 }
-               }
-
-               ctrl.pushToConsole = function() {
-                 if (ctrl.selectedComponentElement) {
-                   let varName = ctrl.selectedComponentName.split('-').map((m, i) => {
-                    m = m.trim();
-                    return i == 0 ? m : m[0].toUpperCase() + m.substr(1)
-                   }).join('');
-
-                   setTimeout(`eval("var ${varName}=(Primo.explore.components.get('${ctrl.selectedComponentName}'))[${ctrl.selectedComponentElementIdx }];console.log('access variable through -> ${varName}');")`, 0);
-                 }
-               }
-
-               ctrl.headerMove = function(event) {
-                 event.stopPropagation();
-                 event.preventDefault();
-
-                 let header = document.querySelector('#explorerUiContainer');
-
-                 let originalTop = parseInt(window.getComputedStyle(header).top);
-                 let mouseDownY = event.clientY;
-
-                 let originalLeft = parseInt(window.getComputedStyle(header).left);
-                 let mouseDownX = event.clientX;
-
-                 let dragHeader = function(event) {
-                   header.style.top = originalTop + event.clientY - mouseDownY + "px";
-                   header.style.left = originalLeft + event.clientX - mouseDownX + "px";
-                   event.stopPropagation();
-                 }
-
-                 let dropHeader = function(event) {
-                   header.removeEventListener('mousemove', dragHeader, true);
-                   header.removeEventListener('mouseup', dropHeader, true);
-                   event.stopPropagation();
-                 }
-
-                 header.addEventListener('mouseup', dropHeader, true);
-                 header.addEventListener('mousemove', dragHeader, true);
-               }
-             }]
-           }).config(function($mdIconProvider){
-             $mdIconProvider.iconSet('primo-ui', 'img/svg/svg-primo-ui.svg', 18);
-           }).run(function($templateCache) {$templateCache.put('nuDashboard.html','<style>\n    .f18 {\n        min-height: 18px;\n        min-width: 18px;\n        height: 18px;\n        width: 18px;\n    }\n</style>\n\n<div id=\'explorerUiContainer\' ng-show="$ctrl.isActive()" style=\'position:absolute;top:10px;height:90vh;background-color:white;z-index:1000000;\'>\n    <md-sidenav class="md-sidenav-left" md-component-id="primo-explorer" md-is-locked-open="$mdMedia(\'gt-md\')" md-whiteframe="4" style="height:100%;">\n        <header id=\'explorerUiHeader\' ng-mousedown=\'$ctrl.headerMove($event)\'>\n            <md-toolbar>\n                <div class="md-toolbar-tools">\n                    <h2 flex md-truncate>PrimoExplorer {{$ctrl.version}}</h2>\n                    <md-button class=\'md-icon-button\' ng-click="$ctrl.toggle()" aria-label="Close" title=\'Close\'>\n                        <md-icon md-svg-icon="primo-ui:close"></md-icon>\n                    </md-button>\n                </div>\n            </md-toolbar>\n        </header>\n\n        <section id=\'pe-components\'>\n            <div flex id=\'pe-components-list\' ng-hide=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'background-color:#eee;\'>\n                    <div layout=\'row\'>\n                        <md-button ng-click=\'$ctrl.refreshComponents()\'>Reload</md-button>\n                        <md-input-container flex md-no-float>\n                            <label>Filter</label>\n                            <input ng-model="$ctrl.componentFilter">\n                        </md-input-container>\n                    </div>\n                </section>\n                <md-content style="height:90%;">\n                    <md-list class="md-dense">\n                        <md-list-item ng-repeat="component in $ctrl.components | filter:$ctrl.componentFilter" ng-click="$ctrl.loadComponent(component)">\n                            <span>{{component}}</span>\n                            <md-divider ng-if="!$last"></md-divider>\n                        </md-list-item>\n                    </md-list>\n                </md-content>\n            </div>\n\n            <div flex id=\'pe-components-detail\' ng-show=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'height:100%\'>\n                    <md-toolbar class=\'md-hue-2\' style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n                        <div class="md-toolbar-tools" style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentDetailShow = false" aria-label="Back" title="Back">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n\n                              <h2 flex md-truncate>{{$ctrl.selectedComponentName}}</h2>\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.blink()" aria-label="Blink component" title="Blink component">\n                                <md-icon class="f18" md-svg-icon="primo-ui:bell"></md-icon>\n                            </md-button>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.pushToConsole()" aria-label="Push to console" title="Push to console">\n                                <md-icon class="f18" md-svg-icon="primo-ui:open-in-new"></md-icon>\n                            </md-button>\n                        </div>\n                    </md-toolbar>\n                    <section style="background-color:#eee;">\n                        <div layout="row" layout-align="center center">\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementPrev()" aria-label="Previous element" title="Previous element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n                            <div layout-align="center center">\n                                <div>{{$ctrl.selectedComponentElementIdx+1}}/{{$ctrl.selectedComponentElementCount}}</div>\n                            </div>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementNext()" aria-label="Next element" title="Next element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-right"></md-icon>\n                            </md-button>\n                        </div>\n                        <div layout="row" layout-align="center center">\n                          <div flex md-truncate style="font-size:10px;">css({{$ctrl.selectedComponentElement.cssPath}})</div>\n                        </div>\n                    </section>\n                    <section>\n                        <md-list>\n                          <md-list-item ng-repeat="key in $ctrl.selectedComponentElementCtrlKeys()">\n                              {{key}}\n                          </md-list-item>\n                        </md-list>\n                    </section>\n                </section>\n            </div>\n        </section>\n    </md-sidenav>\n</div>\n');});
+    return angular.module("explorerUi", ['ngMaterial', 'angularLoad'])
+      .component("explorerUi", {
+        templateUrl: 'nuDashboard.html',
+        controller: ['$http', '$scope', function($http, $scope) {
+          let ctrl = this;
+          ctrl.version = Primo.version || '';
+          ctrl.selectedTab = 0;
+          ctrl.selectedComponent = null;
+          ctrl.componentFilter = '';
+          ctrl.selectedComponentName = '';
+          ctrl.selectedComponentDetailShow = false;
+          ctrl.selectedComponentElementIdx = 0;
+          ctrl.selectedComponentElementCount = 0;
+          ctrl.selectedComponentElement = null;
+
+          ctrl.components = '';
+
+          ctrl.loadComponent = function(name) {
+            let c = Primo.explore.components.get(name);
+            if (c && c.length > 0) {
+              ctrl.selectedComponent = c;
+              ctrl.selectedComponentName = name;
+              ctrl.loadComponentElement(0);
+              ctrl.selectedComponentDetailShow = true;
+            } else {
+              ctrl.selectedComponent = null;
+            }
+          }
+
+          ctrl.loadComponentElement = function(index) {
+            if (ctrl.selectedComponent) {
+              ctrl.selectedComponentElementIdx = index;
+              ctrl.selectedComponentElementCount = ctrl.selectedComponent.length;
+              ctrl.selectedComponentElement = ctrl.selectedComponent[index];
+              ctrl.selectedComponentElementProperties = ctrl.selectedComponentElementCtrlKeys();
+            } else {
+              ctrl.selectedComponentElementIdx = 0;
+              ctrl.selectedComponentElementCount = 0;
+              ctrl.selectedComponentElement = null;
+              ctrl.selectedComponentElementProperties = [];
+            }
+
+          }
+
+          ctrl.refreshComponents = function() {
+            ctrl.components = Primo.explore.components.keys();
+          }
+
+          ctrl.isActive = function() {
+            return vmUi.active;
+          }
+
+          ctrl.toggle = function() {
+            vmUi.toggle();
+            ctrl.refreshComponents();
+          }
+
+          ctrl.rselectedComponentElementCtrlKeys = function() {
+            if (ctrl.selectedComponentElement) {
+              let selectedCtrl = ctrl.selectedComponentElement.ctrl();
+              if (selectedCtrl) {
+                return Object.keys(selectedCtrl);//.map((d) => {return {key: d, value:'', type:''}});
+              }
+            }
+            return [];
+          };
+
+          ctrl.selectedComponentElementCtrlKeys = function() {
+            let sce = [];
+            if (ctrl.selectedComponentElement) {
+              let selectedCtrl = ctrl.selectedComponentElement.ctrl();
+              if (selectedCtrl) {
+                for (let key of Object.keys(selectedCtrl)) {
+                  if (selectedCtrl.hasOwnProperty(key)) {
+                    switch (typeof(selectedCtrl[key])) {
+                      case 'string':
+                        sce.push({
+                          key: key,
+                          value: `"${selectedCtrl[key]}"`,
+                          type: 'string'
+                        });
+                        break;
+                      case 'boolean':
+                        sce.push({
+                          key: key,
+                          value: `${selectedCtrl[key]}`,
+                          type: 'boolean'
+                        });
+                        break;
+                      case 'number':
+                        sce.push({
+                          key: key,
+                          value: `${selectedCtrl[key]}`,
+                          type: 'number'
+                        });
+                        break;
+                      case 'undefined':
+                        sce.push({
+                          key: key,
+                          value: "Undefined",
+                          type: 'undefined'
+                        });
+                        break;
+                      case 'null':
+                        sce.push({
+                          key: key,
+                          value: "Null",
+                          type: 'null'
+                        });
+                        break;
+                      default:
+                        try {
+                          sce.push({
+                            key: key,
+                            value: `${selectedCtrl[key].constructor.name}`,
+                            type: typeof(selectedCtrl[key])
+                          });
+                        } catch (e) {
+                          sce.push({
+                            key: key,
+                            value: `${typeof(selectedCtrl[key])}`,
+                            type: typeof(selectedCtrl[key])
+                          });
+                        }
+                    }
+                  }
+                }
+              }
+            }
+            return sce;
+          }
+
+          ctrl.selectedComponentElementPrev = function() {
+            if (ctrl.selectedComponentElementIdx > 0) {
+              ctrl.selectedComponentElementIdx -= 1;
+              ctrl.loadComponentElement(ctrl.selectedComponentElementIdx);
+            }
+          }
+
+          ctrl.selectedComponentElementNext = function() {
+            if (ctrl.selectedComponentElementIdx < ctrl.selectedComponentElementCount - 1) {
+              ctrl.selectedComponentElementIdx += 1;
+              ctrl.loadComponentElement(ctrl.selectedComponentElementIdx);
+            }
+          }
+
+          ctrl.blink = function() {
+            if (ctrl.selectedComponentElement) {
+              console.log(`blinking ${ctrl.selectedComponentName}[${ctrl.selectedComponentElementIdx }]`);
+              ctrl.selectedComponentElement.blink();
+            }
+          }
+
+          ctrl.pushToConsole = function() {
+            if (ctrl.selectedComponentElement) {
+              let varName = ctrl.selectedComponentName.split('-').map((m, i) => {
+                m = m.trim();
+                return i == 0 ? m : m[0].toUpperCase() + m.substr(1)
+              }).join('');
+
+              setTimeout(`eval("var ${varName}=(Primo.explore.components.get('${ctrl.selectedComponentName}'))[${ctrl.selectedComponentElementIdx }];console.log('access variable through -> ${varName}');")`, 0);
+            }
+          }
+
+          ctrl.headerMove = function(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            let header = document.querySelector('#explorerUiContainer');
+
+            let originalTop = parseInt(window.getComputedStyle(header).top);
+            let mouseDownY = event.clientY;
+
+            let originalLeft = parseInt(window.getComputedStyle(header).left);
+            let mouseDownX = event.clientX;
+
+            let dragHeader = function(event) {
+              header.style.top = originalTop + event.clientY - mouseDownY + "px";
+              header.style.left = originalLeft + event.clientX - mouseDownX + "px";
+              event.stopPropagation();
+            }
+
+            let dropHeader = function(event) {
+              header.removeEventListener('mousemove', dragHeader, true);
+              header.removeEventListener('mouseup', dropHeader, true);
+              event.stopPropagation();
+            }
+
+            header.addEventListener('mouseup', dropHeader, true);
+            header.addEventListener('mousemove', dragHeader, true);
+          }
+        }]
+      }).config(function($mdIconProvider) {
+        $mdIconProvider.iconSet('primo-ui', 'img/svg/svg-primo-ui.svg', 18);
+      }).run(function($templateCache) {$templateCache.put('nuDashboard.html','<style>\n    .f18 {\n        min-height: 18px;\n        min-width: 18px;\n        height: 18px;\n        width: 18px;\n    }\n</style>\n<!-- $mdMedia(\'gt-md\') -->\n<div id=\'explorerUiContainer\' ng-show="$ctrl.isActive()" style=\'position:absolute;top:10px;height:90vh;background-color:white;z-index:1000000;\'>\n    <md-sidenav class="md-sidenav-left" md-component-id="primo-explorer" md-is-locked-open="true" md-whiteframe="4" style="height:100%;">\n        <header id=\'explorerUiHeader\' ng-mousedown=\'$ctrl.headerMove($event)\'>\n            <md-toolbar>\n                <div class="md-toolbar-tools">\n                    <h2 flex md-truncate>PrimoExplorer {{$ctrl.version}}</h2>\n                    <md-button class=\'md-icon-button\' ng-click="$ctrl.toggle()" aria-label="Close" title=\'Close\'>\n                        <md-icon md-svg-icon="primo-ui:close"></md-icon>\n                    </md-button>\n                </div>\n            </md-toolbar>\n        </header>\n\n        <section id=\'pe-components\'>\n            <div flex id=\'pe-components-list\' ng-hide=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'background-color:#eee;\'>\n                    <div layout=\'row\'>\n                        <md-button ng-click=\'$ctrl.refreshComponents()\'>Reload</md-button>\n                        <md-input-container flex md-no-float>\n                            <label>Filter</label>\n                            <input ng-model="$ctrl.componentFilter">\n                        </md-input-container>\n                    </div>\n                </section>\n                <md-content style="height:90%;">\n                    <md-list class="md-dense">\n                        <md-list-item ng-repeat="component in $ctrl.components | filter:$ctrl.componentFilter" ng-click="$ctrl.loadComponent(component);$event.stopPropagation();">\n                            <span>{{component}}</span>\n                            <md-divider ng-if="!$last"></md-divider>\n                        </md-list-item>\n                    </md-list>\n                </md-content>\n            </div>\n\n            <div flex id=\'pe-components-detail\' ng-show=\'$ctrl.selectedComponentDetailShow\'>\n                <section style=\'height:100%\'>\n                    <md-toolbar class=\'md-hue-2\' style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n                        <div class="md-toolbar-tools" style="font-size: 0.8em;min-height: 2.5em;height:2.5em;">\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentDetailShow = false" aria-label="Back" title="Back">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n\n                              <h2 flex md-truncate>{{$ctrl.selectedComponentName}}</h2>\n\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.blink()" aria-label="Blink component" title="Blink component">\n                                <md-icon class="f18" md-svg-icon="primo-ui:bell"></md-icon>\n                            </md-button>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.pushToConsole()" aria-label="Push to console" title="Push to console">\n                                <md-icon class="f18" md-svg-icon="primo-ui:open-in-new"></md-icon>\n                            </md-button>\n                        </div>\n                    </md-toolbar>\n                    <section style="background-color:#eee;">\n                        <div layout="row" layout-align="center center">\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementPrev()" aria-label="Previous element" title="Previous element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-left"></md-icon>\n                            </md-button>\n                            <div layout-align="center center">\n                                <div>{{$ctrl.selectedComponentElementIdx+1}}/{{$ctrl.selectedComponentElementCount}}</div>\n                            </div>\n                            <md-button class=\'md-icon-button\' ng-click="$ctrl.selectedComponentElementNext()" aria-label="Next element" title="Next element">\n                                <md-icon class="f18" md-svg-icon="primo-ui:chevron-right"></md-icon>\n                            </md-button>\n                        </div>\n                        <div layout="row" layout-align="center center">\n                            <input flex style="font-size:10px;text-align:center;" type="text" name="" value="{{$ctrl.selectedComponentElement.cssPath}}">\n                        </div>\n                    </section>\n                    <section>\n                        <md-list>\n                          <md-list-item ng-repeat="property in $ctrl.selectedComponentElementProperties">\n                            <span>{{property.key}}:</span>\n                            <span class="md-secondary" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{property.value}}</span>\n                          </md-list-item>\n                        </md-list>\n                    </section>\n                </section>\n            </div>\n        </section>\n    </md-sidenav>\n</div>\n');});
+
+
   }
 
   _injectDOMElement() {
     let div = document.createElement('div');
-    div.setAttribute('id','explorerUi');
+    div.setAttribute('id', 'explorerUi');
     div.innerHTML = "<explorer-ui></explorer-ui>";
 
     //document.querySelector('primo-explore').appendChild(div);
     document.body.appendChild(div);
   }
 
-  show(){
+  show() {
     this.active = true;
     //this.scope.$apply();
   }
 
-  hide(){
+  hide() {
     this.active = false;
     //this.scope.$apply();
   }
 
-  toggle(){
+  toggle() {
     this.active = !this.active;
     //this.scope.$apply();
   }