@ardimedia/angular-portal-azure 0.2.22 → 0.2.24

package/apn.d.ts

@@ -307,6 +307,10 @@ declare namespace angularportalazure {
 }
 declare namespace angularportalazure {
 }
+declare namespace angularportalazure {
+}
+declare namespace angularportalazure {
+}
 declare namespace angularportalazure {
     /** If a Web API through an exception, the following interface should be available. */
     interface IException {

package/apn.js

@@ -896,7 +896,7 @@ var angularportalazure;
 /// <reference path="../../domain/portalservice.ts" />
 var angularportalazure;
 (function (angularportalazure) {
-    function azurePortalBlade($window, portalService) {
+    function angularPortalBladeGrid(portalService) {
         return {
             restrict: 'E',
             transclude: true,
@@ -904,7 +904,7 @@ var angularportalazure;
             bindToController: { vm: '=' },
             templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
             link: function (scope, element, attrs, controller) {
-                console.log('azurePortalBlade.link()');
+                console.log('angularPortalBladeGrid.link()');
                 console.log(this);
                 //#region the following code makes sure, that a function scope.vm.close is available
                 if (scope.vm === undefined) {
@@ -919,7 +919,7 @@ var angularportalazure;
                 //#endregion
             },
             controller: function () {
-                console.log('azurePortalBlade.controller()');
+                console.log('angularPortalBladeGrid.controller()');
                 console.log(this);
                 //this.blade = this.vm.blade;
                 //this.contentTitle = this.vm.contentTitle;
@@ -931,10 +931,100 @@ var angularportalazure;
                 };
                 //this.vm.close = this.close;
             },
-            controllerAs: 'vm'
+            controllerAs: 'ctrl'
+        };
+    }
+    angular.module('angularportalazure').directive('angularPortalBladeGrid', ['angularportalazure.portalService', angularPortalBladeGrid]);
+})(angularportalazure || (angularportalazure = {}));
+/// <reference types="angular" />
+/// <reference path="../../domain/debug.ts" />
+/// <reference path="../../domain/portalservice.ts" />
+var angularportalazure;
+(function (angularportalazure) {
+    function angularPortalBladeNav(portalService) {
+        return {
+            restrict: 'E',
+            transclude: true,
+            scope: {},
+            bindToController: { vm: '=' },
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
+            link: function (scope, element, attrs, controller) {
+                console.log('angularPortalBladeNav.link()');
+                console.log(this);
+                //#region the following code makes sure, that a function scope.vm.close is available
+                if (scope.vm === undefined) {
+                    scope.vm = {};
+                }
+                if (scope.vm.close === undefined) {
+                    scope.vm.close = function () {
+                        angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                        portalService.bladeArea.clearLastLevel();
+                    };
+                }
+                //#endregion
+            },
+            controller: function () {
+                console.log('angularPortalBladeNav.controller()');
+                console.log(this);
+                //this.blade = this.vm.blade;
+                //this.contentTitle = this.vm.contentTitle;
+                //this.contentSubTitle = this.vm.contentSubTitle;
+                //this.isNav = this.vm.isNav;
+                this.vm.close = function () {
+                    angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                    portalService.bladeArea.clearLastLevel();
+                };
+                //this.vm.close = this.close;
+            },
+            controllerAs: 'ctrl'
         };
     }
-    angular.module('angularportalazure').directive('azurePortalBlade', ['$window', 'angularportalazure.portalService', azurePortalBlade]);
+    angular.module('angularportalazure').directive('angularPortalBladeNav', ['angularportalazure.portalService', angularPortalBladeNav]);
+})(angularportalazure || (angularportalazure = {}));
+/// <reference types="angular" />
+/// <reference path="../../domain/debug.ts" />
+/// <reference path="../../domain/portalservice.ts" />
+var angularportalazure;
+(function (angularportalazure) {
+    function angularPortalBlade(portalService) {
+        return {
+            restrict: 'E',
+            transclude: true,
+            scope: {},
+            bindToController: { vm: '=' },
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
+            link: function (scope, element, attrs, controller) {
+                console.log('angularPortalBlade.link()');
+                console.log(this);
+                //#region the following code makes sure, that a function scope.vm.close is available
+                if (scope.vm === undefined) {
+                    scope.vm = {};
+                }
+                if (scope.vm.close === undefined) {
+                    scope.vm.close = function () {
+                        angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                        portalService.bladeArea.clearLastLevel();
+                    };
+                }
+                //#endregion
+            },
+            controller: function () {
+                console.log('angularPortalBlade.controller()');
+                console.log(this);
+                //this.blade = this.vm.blade;
+                //this.contentTitle = this.vm.contentTitle;
+                //this.contentSubTitle = this.vm.contentSubTitle;
+                //this.isNav = this.vm.isNav;
+                this.vm.close = function () {
+                    angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                    portalService.bladeArea.clearLastLevel();
+                };
+                //this.vm.close = this.close;
+            },
+            controllerAs: 'ctrl'
+        };
+    }
+    angular.module('angularportalazure').directive('angularPortalBlade', ['angularportalazure.portalService', angularPortalBlade]);
 })(angularportalazure || (angularportalazure = {}));
 // http://blogs.msdn.com/b/laurieatkinson/archive/2014/08/23/implementing-a-save-warning-in-an-angular-spa.aspx
 //'use strict';
@@ -975,71 +1065,70 @@ var angularportalazure;
 //} 
 var angularportalazure;
 (function (angularportalazure) {
-    function azurePortalHome() {
-        console.log('azurePortalHome');
+    function grid($window) {
         return {
             restrict: 'E',
             scope: {},
             bindToController: { vm: '=' },
-            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/home/home.html',
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/grid/grid.html',
             link: function (scope, element, attrs, controller) {
-                console.log('azurePortalHome.link()');
+                console.log('grid.link()');
                 console.log(this);
+                angular.forEach(scope.vm.items, function (item) {
+                    // Set some default values, depending on existing values
+                    if (item.isVisible == undefined) {
+                        item.isVisible = true;
+                    }
+                    if (item.title == undefined || item.title == '') {
+                        item.style = { cursor: 'default' };
+                    }
+                    if (item.bladePath == undefined || item.bladePath == '') {
+                        item.style = { cursor: 'default' };
+                    }
+                });
             },
             controller: function () {
-                console.log('azurePortalHome.controller()');
+                console.log('grid.controller()');
                 console.log(this);
             },
             controllerAs: 'ctrl'
         };
     }
-    angular.module('angularportalazure').directive('azurePortalHome', azurePortalHome);
+    angular.module('angularportalazure').directive('grid', ['$window', grid]);
 })(angularportalazure || (angularportalazure = {}));
 var angularportalazure;
 (function (angularportalazure) {
-    function nav($window) {
+    function angularPortalHome() {
         return {
             restrict: 'E',
             scope: {},
             bindToController: { vm: '=' },
-            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/nav/nav.html',
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/home/home.html',
             link: function (scope, element, attrs, controller) {
-                console.log('nav.link()');
+                console.log('angularPortalHome.link()');
                 console.log(this);
-                angular.forEach(scope.vm.navItems, function (item) {
-                    // Set some default values, depending on existing values
-                    if (item.isVisible == undefined) {
-                        item.isVisible = true;
-                    }
-                    if (item.title == undefined || item.title == '') {
-                        item.style = { cursor: 'default' };
-                    }
-                    if (item.bladePath == undefined || item.bladePath == '') {
-                        item.style = { cursor: 'default' };
-                    }
-                });
             },
             controller: function () {
-                console.log('nav.controller()');
+                console.log('angularPortalHome.controller()');
                 console.log(this);
             },
-            controllerAs: 'vm'
+            controllerAs: 'ctrl'
         };
     }
-    angular.module('angularportalazure').directive('nav', ['$window', nav]);
+    angular.module('angularportalazure').directive('angularPortalHome', angularPortalHome);
 })(angularportalazure || (angularportalazure = {}));
 var angularportalazure;
 (function (angularportalazure) {
-    function navGrid($window) {
+    function nav($window) {
         return {
             restrict: 'E',
             scope: {},
             bindToController: { vm: '=' },
-            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/navgrid/navgrid.html',
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/nav/nav.html',
             link: function (scope, element, attrs, controller) {
-                console.log('navGrid.link()');
+                console.log('nav.link()');
                 console.log(this);
-                angular.forEach(scope.vm.items, function (item) {
+                angular.forEach(scope.vm.navItems, function (item) {
                     // Set some default values, depending on existing values
                     if (item.isVisible == undefined) {
                         item.isVisible = true;
@@ -1053,13 +1142,13 @@ var angularportalazure;
                 });
             },
             controller: function () {
-                console.log('navGrid.controller()');
+                console.log('nav.controller()');
                 console.log(this);
             },
-            controllerAs: 'vm'
+            controllerAs: 'ctrl'
         };
     }
-    angular.module('angularportalazure').directive('navGrid', ['$window', navGrid]);
+    angular.module('angularportalazure').directive('nav', ['$window', nav]);
 })(angularportalazure || (angularportalazure = {}));
 /// <reference path="bladearea.ts" />
 /// <reference path="debug.ts" />

package/directives/blade/{blade.ts → angular-portal-blade-grid.ts}

@@ -3,7 +3,7 @@
 /// <reference path="../../domain/portalservice.ts" />
 
 namespace angularportalazure {
-    function azurePortalBlade($window: ng.IWindowService, portalService: angularportalazure.PortalService) {
+    function angularPortalBladeGrid(portalService: angularportalazure.PortalService) {
         return {
             restrict: 'E',
             transclude: true,
@@ -11,7 +11,7 @@ namespace angularportalazure {
             bindToController: { vm: '=' },
             templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
             link: function (scope, element, attrs, controller) {
-                console.log('azurePortalBlade.link()');
+                console.log('angularPortalBladeGrid.link()');
                 console.log(this);
                 //#region the following code makes sure, that a function scope.vm.close is available
 
@@ -26,7 +26,7 @@ namespace angularportalazure {
                 //#endregion
             },
             controller: function () {
-                console.log('azurePortalBlade.controller()');
+                console.log('angularPortalBladeGrid.controller()');
                 console.log(this);
 
                 //this.blade = this.vm.blade;
@@ -40,9 +40,9 @@ namespace angularportalazure {
                 };
                 //this.vm.close = this.close;
             },
-            controllerAs: 'vm'
+            controllerAs: 'ctrl'
         };
     }
 
-    angular.module('angularportalazure').directive('azurePortalBlade', ['$window', 'angularportalazure.portalService', azurePortalBlade]);
+    angular.module('angularportalazure').directive('angularPortalBladeGrid', ['angularportalazure.portalService', angularPortalBladeGrid]);
 }

package/directives/blade/angular-portal-blade-nav.ts

@@ -0,0 +1,48 @@
+/// <reference types="angular" />
+/// <reference path="../../domain/debug.ts" />
+/// <reference path="../../domain/portalservice.ts" />
+
+namespace angularportalazure {
+    function angularPortalBladeNav(portalService: angularportalazure.PortalService) {
+        return {
+            restrict: 'E',
+            transclude: true,
+            scope: {},
+            bindToController: { vm: '=' },
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
+            link: function (scope, element, attrs, controller) {
+                console.log('angularPortalBladeNav.link()');
+                console.log(this);
+                //#region the following code makes sure, that a function scope.vm.close is available
+
+                if (scope.vm === undefined) { scope.vm = {}; }
+                if (scope.vm.close === undefined) {
+                    scope.vm.close = function () {
+                        angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                        portalService.bladeArea.clearLastLevel();
+                    }
+                }
+
+                //#endregion
+            },
+            controller: function () {
+                console.log('angularPortalBladeNav.controller()');
+                console.log(this);
+
+                //this.blade = this.vm.blade;
+                //this.contentTitle = this.vm.contentTitle;
+                //this.contentSubTitle = this.vm.contentSubTitle;
+                //this.isNav = this.vm.isNav;
+
+                this.vm.close = function () {
+                    angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                    portalService.bladeArea.clearLastLevel();
+                };
+                //this.vm.close = this.close;
+            },
+            controllerAs: 'ctrl'
+        };
+    }
+
+    angular.module('angularportalazure').directive('angularPortalBladeNav', ['angularportalazure.portalService', angularPortalBladeNav]);
+}

package/directives/blade/angular-portal-blade.ts

@@ -0,0 +1,48 @@
+/// <reference types="angular" />
+/// <reference path="../../domain/debug.ts" />
+/// <reference path="../../domain/portalservice.ts" />
+
+namespace angularportalazure {
+    function angularPortalBlade(portalService: angularportalazure.PortalService) {
+        return {
+            restrict: 'E',
+            transclude: true,
+            scope: {},
+            bindToController: { vm: '=' },
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
+            link: function (scope, element, attrs, controller) {
+                console.log('angularPortalBlade.link()');
+                console.log(this);
+                //#region the following code makes sure, that a function scope.vm.close is available
+
+                if (scope.vm === undefined) { scope.vm = {}; }
+                if (scope.vm.close === undefined) {
+                    scope.vm.close = function () {
+                        angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                        portalService.bladeArea.clearLastLevel();
+                    }
+                }
+
+                //#endregion
+            },
+            controller: function () {
+                console.log('angularPortalBlade.controller()');
+                console.log(this);
+
+                //this.blade = this.vm.blade;
+                //this.contentTitle = this.vm.contentTitle;
+                //this.contentSubTitle = this.vm.contentSubTitle;
+                //this.isNav = this.vm.isNav;
+
+                this.vm.close = function () {
+                    angularportalazure.Debug.write('[angularportalazure-debug] \'directive:azurePortalBlade.close\' called.', [this, portalService]);
+                    portalService.bladeArea.clearLastLevel();
+                };
+                //this.vm.close = this.close;
+            },
+            controllerAs: 'ctrl'
+        };
+    }
+
+    angular.module('angularportalazure').directive('angularPortalBlade', ['angularportalazure.portalService', angularPortalBlade]);
+}

package/directives/blade/blade.html

@@ -1,8 +1,8 @@
-<section data-ng-form="formblade" class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small" ng-style="vm.blade.width">
+<section data-ng-form="formblade" class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small" ng-style="ctrl.vm.blade.width">
     <header class="fxs-blade-header">
         <div class="fxs-blade-statusbar-wrapper">
             <div class="fxs-blade-statusbar">
-                <span ng-class="vm.blade.statusbarClass">{{vm.blade.statusbar}}</span>
+                <span ng-class="ctrl.vm.blade.statusbarClass">{{ctrl.vm.blade.statusbar}}</span>
             </div>
         </div>
         <div class="fxs-blade-actions">
@@ -11,12 +11,12 @@
                     <path class="msportalfx-svg-c01" d="M 50 17.8 L 32.2 0 c -0.8 2.6 -0.9 5.2 -0.5 7.7 L 18.6 20.7 c -4 -1.6 -8.8 -2.1 -13 -0.7 l 9.4 9.1 L 0 50 l 21 -15 l 9 8.8 c 1.3 -4.2 0.9 -8.6 -0.7 -12.4 l 13 -13 C 44.8 18.7 47.4 18.6 50 17.8 Z" />
                 </svg>
             </button>-->
-            <button data-ng-show="vm.blade.isMaximize" title="Maximize" class="fxs-blade-maximizeOrRestore" type="button">
+            <button data-ng-show="ctrl.vm.blade.isMaximize" title="Maximize" class="fxs-blade-maximizeOrRestore" type="button">
                 <svg class="msportal-fx-svg-placeholder" viewBox="0 0 20 20">
                     <path class="msportalfx-svg-c01" d="M 3 4 v 12 h 14 V 4 H 3 Z M 5 14 V 6 h 10 v 8 H 5 Z" />
                 </svg>
             </button>
-            <button data-ng-click="vm.close();" title="Schliessen" class="fxs-blade-close" type="button">
+            <button data-ng-click="ctrl.vm.close();" title="Schliessen" class="fxs-blade-close" type="button">
                 <svg class="msportal-fx-svg-placeholder" viewBox="0 0 20 20">
                     <polygon class="msportalfx-svg-c01" points="16.894,5.414 15.48,4 10.436,9.044 5.414,4.023 4,5.437 9.022,10.458 4.022,15.458 5.436,16.872 10.436,11.872 15.458,16.894 16.872,15.48 11.85,10.458" />
                 </svg>
@@ -24,22 +24,22 @@
         </div>
         <div class="fxs-blade-title">
             <div class="fxs-blade-title-text-container">
-                <h2 class="fxs-pannable fxs-blade-title-titleText msportalfx-tooltip-overflow">{{vm.blade.title}}</h2>
-                <h3 class="fxs-pannable msportalfx-tooltip-overflow">{{vm.blade.subTitle}}</h3>
+                <h2 class="fxs-pannable fxs-blade-title-titleText msportalfx-tooltip-overflow">{{ctrl.vm.blade.title}}</h2>
+                <h3 class="fxs-pannable msportalfx-tooltip-overflow">{{ctrl.vm.blade.subTitle}}</h3>
             </div>
         </div>
         <div class="fxs-blade-commandBarContainer">
             <div class="fxs-commandBar fxs-commandBar-active">
                 <ul class="fxs-commandBar-itemList fxs-commandBar-itemList-canExpand">
                     <!-- SHOW MORE COMMANDS -->
-                    <li ng-show="vm.blade.isCommandMore" class="fxs-commandBar-item-expandListContainer">
+                    <li ng-show="ctrl.vm.blade.isCommandMore" class="fxs-commandBar-item-expandListContainer">
                         <a title="Fewer" class="fxs-commandBar-item fxs-commandBar-item-expandList" href="" data-bind="click: func._ellipsisCommandHandler, attr: { title: data.ellipsisCommandText }"></a>
                     </li>
                     <!-- SERACH -->
-                    <li ng-show="vm.blade.isCommandSearch">
-                        <a data-ng-click="vm.blade.commandSearch()" class="fxs-commandBar-item" href="#"
+                    <li ng-show="ctrl.vm.blade.isCommandSearch">
+                        <a data-ng-click="ctrl.vm.blade.commandSearch()" class="fxs-commandBar-item" href="#"
                            data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandSearchText || 'suchen'}}</div>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandSearchText || 'suchen'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 512 512" enable-background="new 0 0 512 512">
                                     <g>
@@ -51,10 +51,10 @@
                         </a>
                     </li>
                     <!-- ORDER -->
-                    <li ng-show="vm.blade.isCommandOrder">
-                        <a data-ng-click="vm.blade.commandOrder()" class="fxs-commandBar-item" href="#"
+                    <li ng-show="ctrl.vm.blade.isCommandOrder">
+                        <a data-ng-click="ctrl.vm.blade.commandOrder()" class="fxs-commandBar-item" href="#"
                            data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandOrderText  || 'bestellen'}}</div>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandOrderText  || 'bestellen'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 30.512 24.717" focusable="false">
                                     <path d="M26.818,16.14l3.607-10.796c0.181-0.519,0.044-0.831-0.102-1.037c-0.374-0.527-1.143-0.532-1.292-0.532L8.646,3.771	L8.102,1.19C7.955,0.581,7.521,0,6.646,0H0.917C0.323,0,0,0.278,0,0.833v1.49C0,2.86,0.322,3,0.938,3h4.837l3.702,15.717	c-0.588,0.623-0.908,1.531-0.908,2.378c0,1.864,1.484,3.582,3.38,3.582c1.79,0,3.132-1.677,3.35-2.677h7.21	c0.218,1,1.305,2.717,3.349,2.717c1.863,0,3.378-1.614,3.378-3.475c0-1.851-1.125-3.492-3.359-3.492c-0.929,0-2.031,0.5-2.543,1.25	h-8.859c-0.643-1-1.521-1.31-2.409-1.345L11.943,17h13.479C26.438,17,26.638,16.63,26.818,16.14z M25.883,19.931	c0.701,0,1.27,0.569,1.27,1.27c0,0.701-0.569,1.27-1.27,1.27s-1.271-0.568-1.271-1.27C24.613,20.5,25.182,19.931,25.883,19.931z	 M13.205,21.201c0,0.709-0.576,1.286-1.283,1.286c-0.709-0.002-1.286-0.577-1.286-1.286s0.577-1.286,1.286-1.286	C12.629,19.915,13.205,20.492,13.205,21.201z" />
@@ -63,20 +63,20 @@
                         </a>
                     </li>
                     <!-- NEW -->
-                    <li ng-show="vm.blade.isCommandNew">
-                        <a data-ng-click="vm.blade.commandNew()" class="fxs-commandBar-item" href="#"
+                    <li ng-show="ctrl.vm.blade.isCommandNew">
+                        <a data-ng-click="ctrl.vm.blade.commandNew()" class="fxs-commandBar-item" href="#"
                            data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandNewText  || 'neu'}}</div>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandNewText  || 'neu'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 24 24" focusable="false"> <g> <g> <polygon points="14,21 9,21 9,2 14,2 14,20.87" /> </g> <g> <polygon points="20.87,14 2,14 2,9 21,9 21,14" /> </g> </g> </svg>
                             </div>
                         </a>
                     </li>
                     <!-- COPY -->
-                    <li ng-show="vm.blade.isCommandCopy">
-                        <a data-ng-click="vm.blade.commandCopy()" class="fxs-commandBar-item" href="#"
+                    <li ng-show="ctrl.vm.blade.isCommandCopy">
+                        <a data-ng-click="ctrl.vm.blade.commandCopy()" class="fxs-commandBar-item" href="#"
                            data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandCopyText  || 'kopieren'}}</div>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandCopyText  || 'kopieren'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 512 512" enable-background="new 0 0 512 512">
                                     <path d="M320,128V0H96L0,96v288h192v128h320V128H320z M96,45.255V96H45.255L96,45.255z M32,352V128h96V32h160v96l-96,96v128H32z M288,173.255V224h-50.745L288,173.255z M480,480H224V256h96v-96h160V480z" />
@@ -85,10 +85,10 @@
                         </a>
                     </li>
                     <!-- SAVE -->
-                    <li ng-show="vm.blade.isCommandSave">
-                        <a data-ng-click="vm.blade.commandSave()" class="fxs-commandBar-item" href="#"
+                    <li ng-show="ctrl.vm.blade.isCommandSave">
+                        <a data-ng-click="ctrl.vm.blade.commandSave()" class="fxs-commandBar-item" href="#"
                            data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandSaveText  || 'speichern'}}</div>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandSaveText  || 'speichern'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 24 24" focusable="false">
                                     <g>
@@ -100,9 +100,9 @@
                         </a>
                     </li>
                     <!-- DELETE -->
-                    <li ng-show="vm.blade.isCommandDelete">
-                        <a data-ng-click="vm.blade.commandDelete()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandDeleteText  || 'löschen'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandDelete">
+                        <a data-ng-click="ctrl.vm.blade.commandDelete()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandDeleteText  || 'löschen'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 512 512" enable-background="new 0 0 512 512">
                                     <!--<path d="M 19.846 6.5 H 5.154 C 4.601 6.5 4.5 6.27 4.5 6 s 0.101 -1.5 0.654 -1.5 h 14.692 C 20.399 4.5 20.5 5.73 20.5 6 S 20.399 6.5 19.846 6.5 Z" />
@@ -115,63 +115,63 @@
                         </a>
                     </li>
                     <!-- CANCEL -->
-                    <li ng-show="vm.blade.isCommandCancel">
-                        <a data-ng-click="vm.blade.commandCancel()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandCancelText  || 'abbrechen'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandCancel">
+                        <a data-ng-click="ctrl.vm.blade.commandCancel()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandCancelText  || 'abbrechen'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg class="msportal-fx-svg-placeholder" viewBox="0 0 20 20"><polygon points="16.894,5.414 15.48,4 10.436,9.044 5.414,4.023 4,5.437 9.022,10.458 4.022,15.458 5.436,16.872 10.436,11.872 15.458,16.894 16.872,15.48 11.85,10.458" /></svg>
                             </div>
                         </a>
                     </li>
                     <!-- BROWSE -->
-                    <li ng-show="vm.blade.isCommandBrowse">
-                        <a data-ng-click="vm.blade.commandBrowse()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandBrowseText  || 'Browse'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandBrowse">
+                        <a data-ng-click="ctrl.vm.blade.commandBrowse()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandBrowseText  || 'Browse'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 24 24" focusable="false"> <g> <polygon clip-rule="evenodd" fill-rule="evenodd" points="14.607,2.04 17.727,4.61 8.557,13.31 11.377,16.12 19.987,6.96 22.507,9.48 22.507,2.04" /> <path clip-rule="evenodd" fill-rule="evenodd" d="M 19.507 19.04 h -15 v -14 h 7 v -3 h -7.92 c -1.66 0 -2.09 1.77 -2.08 1.75 c -0.02 -0.74 0.01 11.45 0.02 16.17 c 0 1.09 2.05 2.08 2 2.08 c 0.68 -0.05 12.88 -0.02 17.36 -0.01 c 1 0.01 1.6 -1.46 1.62 -1.4 c -0.02 0.93 0 -6.59 0 -6.59 h -3 V 19.04 Z" /> </g> </svg>
                             </div>
                         </a>
                     </li>
                     <!-- START -->
-                    <li ng-show="vm.blade.isCommandStart">
-                        <a data-ng-click="vm.blade.commandStart()" class="fxs-commandBar-item fxs-commandBar-itemDisabled" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandStartText  || 'Start'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandStart">
+                        <a data-ng-click="ctrl.vm.blade.commandStart()" class="fxs-commandBar-item fxs-commandBar-itemDisabled" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandStartText  || 'Start'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 24 24" focusable="false"> <g> <polygon points="20,11.95 6,22 6,2" /> </g> </svg>
                             </div>
                         </a>
                     </li>
                     <!-- STOP -->
-                    <li ng-show="vm.blade.isCommandStop">
-                        <a data-ng-click="vm.blade.commandStop()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandStopText  || 'Stop'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandStop">
+                        <a data-ng-click="ctrl.vm.blade.commandStop()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandStopText  || 'Stop'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 24 24" focusable="false"> <rect x="4" y="4" width="16" height="16" /> </svg>
                             </div>
                         </a>
                     </li>
                     <!-- RESTART -->
-                    <li ng-show="vm.blade.isCommandRestart">
-                        <a data-ng-click="vm.blade.commandRestart()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandRestartText  || 'Restart'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandRestart">
+                        <a data-ng-click="ctrl.vm.blade.commandRestart()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandRestartText  || 'Restart'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 24 24" focusable="false"> <g> <g> <polygon points="3.25,2 11.94,2 11.94,10.17" /> <path d="M 12.6 22 C 7.32 21.91 3 17.53 3 12.19 c 0 -3.12 1.49 -5.86 3.78 -7.58 l 2.08 2.08 c -1.8 1.18 -2.98 3.22 -2.98 5.55 c 0 3.74 3.02 6.81 6.71 6.87 c 3.71 0.06 6.7 -2.9 6.7 -6.63 c 0 -2.37 -1.22 -4.48 -3.06 -5.71 l 2.04 -2.06 c 2.36 1.8 3.73 4.7 3.73 7.88 C 22 17.92 17.9 22.09 12.6 22 Z" /> </g> </g> </svg>
                             </div>
                         </a>
                     </li>
                     <!-- SWAP -->
-                    <li ng-show="vm.blade.isCommandSwap">
-                        <a data-ng-click="vm.blade.commandSwap()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandSwapText  || 'Swap'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandSwap">
+                        <a data-ng-click="ctrl.vm.blade.commandSwap()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandSwapText  || 'Swap'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 24 24" focusable="false"><polygon points="14.047,4.976 8.075,9.769 12.968,10.134 10.7,11.963 4.142,11.488 5.011,4.958 7.279,3.129 6.63,8.004 12.657,2.855 13.663,4.336" /><polygon points="19.927,19.097 17.806,20.715 18.318,16.061 12.026,21.145 10.59,19.38 16.873,14.295 11.98,13.93 14.248,12.101 20.604,12.32" /></svg>
                             </div>
                         </a>
                     </li>
                     <!-- DOCUMENT -->
-                    <li ng-show="vm.blade.isCommandDocument">
-                        <a data-ng-click="vm.blade.commandDocument()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandDocumentText  || 'Dokument'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandDocument">
+                        <a data-ng-click="ctrl.vm.blade.commandDocument()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandDocumentText  || 'Dokument'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 100 100" focusable="false">
                                     <path d="M65.164,11.126H26.033c-2.627,0-4.767,2.141-4.767,4.768v68.213c0,2.63,2.14,4.768,4.767,4.768h47.932	c2.63,0,4.768-2.138,4.768-4.768V25.869L65.164,11.126z M66.289,18.261l5.948,6.463h-5.948V18.261z M74.729,84.106 c0,0.421-0.344,0.765-0.765,0.765H26.033c-0.421,0-0.763-0.344-0.763-0.765V15.894c0-0.421,0.342-0.762,0.763-0.762h36.251v11.595 c0,1.104,0.899,1.999,2.003,1.999h10.442V84.106z M32.333,32.421h34c0.828,0,1.5,0.672,1.5,1.5s-0.672,1.5-1.5,1.5h-34	c-0.828,0-1.5-0.672-1.5-1.5S31.505,32.421,32.333,32.421z M67.833,44.001c0,0.828-0.672,1.5-1.5,1.5h-34 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,42.501,67.833,43.173,67.833,44.001z M67.833,53.751 c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,52.251,67.833,52.923,67.833,53.751z M67.833,63.667c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34 C67.161,62.167,67.833,62.839,67.833,63.667z" />
@@ -180,9 +180,9 @@
                         </a>
                     </li>
                     <!-- DOCUMENT2 -->
-                    <li ng-show="vm.blade.isCommandDocument2">
-                        <a data-ng-click="vm.blade.commandDocument2()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandDocument2Text  || 'Dokument'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandDocument2">
+                        <a data-ng-click="ctrl.vm.blade.commandDocument2()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandDocument2Text  || 'Dokument'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 100 100" focusable="false">
                                     <path d="M65.164,11.126H26.033c-2.627,0-4.767,2.141-4.767,4.768v68.213c0,2.63,2.14,4.768,4.767,4.768h47.932	c2.63,0,4.768-2.138,4.768-4.768V25.869L65.164,11.126z M66.289,18.261l5.948,6.463h-5.948V18.261z M74.729,84.106 c0,0.421-0.344,0.765-0.765,0.765H26.033c-0.421,0-0.763-0.344-0.763-0.765V15.894c0-0.421,0.342-0.762,0.763-0.762h36.251v11.595 c0,1.104,0.899,1.999,2.003,1.999h10.442V84.106z M32.333,32.421h34c0.828,0,1.5,0.672,1.5,1.5s-0.672,1.5-1.5,1.5h-34	c-0.828,0-1.5-0.672-1.5-1.5S31.505,32.421,32.333,32.421z M67.833,44.001c0,0.828-0.672,1.5-1.5,1.5h-34 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,42.501,67.833,43.173,67.833,44.001z M67.833,53.751 c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,52.251,67.833,52.923,67.833,53.751z M67.833,63.667c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34 C67.161,62.167,67.833,62.839,67.833,63.667z" />
@@ -191,9 +191,9 @@
                         </a>
                     </li>
                     <!-- DOCUMENT3 -->
-                    <li ng-show="vm.blade.isCommandDocument3">
-                        <a data-ng-click="vm.blade.commandDocument3()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandDocument3Text  || 'Dokument'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandDocument3">
+                        <a data-ng-click="ctrl.vm.blade.commandDocument3()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandDocument3Text  || 'Dokument'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 100 100" focusable="false">
                                     <path d="M65.164,11.126H26.033c-2.627,0-4.767,2.141-4.767,4.768v68.213c0,2.63,2.14,4.768,4.767,4.768h47.932	c2.63,0,4.768-2.138,4.768-4.768V25.869L65.164,11.126z M66.289,18.261l5.948,6.463h-5.948V18.261z M74.729,84.106 c0,0.421-0.344,0.765-0.765,0.765H26.033c-0.421,0-0.763-0.344-0.763-0.765V15.894c0-0.421,0.342-0.762,0.763-0.762h36.251v11.595 c0,1.104,0.899,1.999,2.003,1.999h10.442V84.106z M32.333,32.421h34c0.828,0,1.5,0.672,1.5,1.5s-0.672,1.5-1.5,1.5h-34	c-0.828,0-1.5-0.672-1.5-1.5S31.505,32.421,32.333,32.421z M67.833,44.001c0,0.828-0.672,1.5-1.5,1.5h-34 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,42.501,67.833,43.173,67.833,44.001z M67.833,53.751 c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,52.251,67.833,52.923,67.833,53.751z M67.833,63.667c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34 C67.161,62.167,67.833,62.839,67.833,63.667z" />
@@ -202,9 +202,9 @@
                         </a>
                     </li>
                     <!-- DOCUMENT4 -->
-                    <li ng-show="vm.blade.isCommandDocument4">
-                        <a data-ng-click="vm.blade.commandDocument4()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandDocument4Text  || 'Dokument'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandDocument4">
+                        <a data-ng-click="ctrl.vm.blade.commandDocument4()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandDocument4Text  || 'Dokument'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 100 100" focusable="false">
                                     <path d="M65.164,11.126H26.033c-2.627,0-4.767,2.141-4.767,4.768v68.213c0,2.63,2.14,4.768,4.767,4.768h47.932	c2.63,0,4.768-2.138,4.768-4.768V25.869L65.164,11.126z M66.289,18.261l5.948,6.463h-5.948V18.261z M74.729,84.106 c0,0.421-0.344,0.765-0.765,0.765H26.033c-0.421,0-0.763-0.344-0.763-0.765V15.894c0-0.421,0.342-0.762,0.763-0.762h36.251v11.595 c0,1.104,0.899,1.999,2.003,1.999h10.442V84.106z M32.333,32.421h34c0.828,0,1.5,0.672,1.5,1.5s-0.672,1.5-1.5,1.5h-34	c-0.828,0-1.5-0.672-1.5-1.5S31.505,32.421,32.333,32.421z M67.833,44.001c0,0.828-0.672,1.5-1.5,1.5h-34 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,42.501,67.833,43.173,67.833,44.001z M67.833,53.751 c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,52.251,67.833,52.923,67.833,53.751z M67.833,63.667c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34 C67.161,62.167,67.833,62.839,67.833,63.667z" />
@@ -213,9 +213,9 @@
                         </a>
                     </li>
                     <!-- Document5 -->
-                    <li ng-show="vm.blade.isCommandDocument5">
-                        <a data-ng-click="vm.blade.commandDocument5()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
-                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{vm.blade.commandDocument5Text  || 'Dokument'}}</div>
+                    <li ng-show="ctrl.vm.blade.isCommandDocument5">
+                        <a data-ng-click="ctrl.vm.blade.commandDocument5()" class="fxs-commandBar-item" href="#" data-bind='css: { "fxs-commandBar-itemDisabled": !enabled(), "fxs-commandBar-itemPressed": pressed() }, attr: { href: enabled() ? "#" : null }'>
+                            <div class="fxs-commandBar-item-text" data-bind="text: text()">{{ctrl.vm.blade.commandDocument5Text  || 'Dokument'}}</div>
                             <div class="fxs-commandBar-item-icon" data-bind="image: icon">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 100 100" focusable="false">
                                     <path d="M65.164,11.126H26.033c-2.627,0-4.767,2.141-4.767,4.768v68.213c0,2.63,2.14,4.768,4.767,4.768h47.932	c2.63,0,4.768-2.138,4.768-4.768V25.869L65.164,11.126z M66.289,18.261l5.948,6.463h-5.948V18.261z M74.729,84.106 c0,0.421-0.344,0.765-0.765,0.765H26.033c-0.421,0-0.763-0.344-0.763-0.765V15.894c0-0.421,0.342-0.762,0.763-0.762h36.251v11.595 c0,1.104,0.899,1.999,2.003,1.999h10.442V84.106z M32.333,32.421h34c0.828,0,1.5,0.672,1.5,1.5s-0.672,1.5-1.5,1.5h-34	c-0.828,0-1.5-0.672-1.5-1.5S31.505,32.421,32.333,32.421z M67.833,44.001c0,0.828-0.672,1.5-1.5,1.5h-34 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,42.501,67.833,43.173,67.833,44.001z M67.833,53.751 c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34C67.161,52.251,67.833,52.923,67.833,53.751z M67.833,63.667c0,0.828-0.672,1.5-1.5,1.5h-34c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5h34 C67.161,62.167,67.833,62.839,67.833,63.667z" />
@@ -228,7 +228,7 @@
         </div>
     </header>
     <div class="fxs-blade-content fxs-pannable" style="height:calc(100% - 175px);">
-        <div class="fxs-blade-stacklayout fxs-stacklayout fxs-stacklayout-vertical" ng-style="vm.blade.widthStackLayout">
+        <div class="fxs-blade-stacklayout fxs-stacklayout fxs-stacklayout-vertical" ng-style="ctrl.vm.blade.widthStackLayout">
             <div class="fxs-stacklayout-child">
                 <div class="fxs-lens">
                     <h2 class="fxs-lens-title"></h2>
@@ -236,23 +236,23 @@
                         <section class="fxs-tile fxs-tilesize-fullwidthfitheight fx-rightClik">
                             <div class="fxs-part">
                                 <header class="fxs-part-title">
-                                    <h2 class="msportalfx-tooltip-overflow">{{vm.contentTitle}}</h2>
-                                    <h3 class="msportalfx-tooltip-overflow">{{vm.contentSubTitle}}</h3>
+                                    <h2 class="msportalfx-tooltip-overflow">{{ctrl.vm.contentTitle}}</h2>
+                                    <h3 class="msportalfx-tooltip-overflow">{{ctrl.vm.contentSubTitle}}</h3>
                                 </header>
                                 <section class="fxs-part-content css-scope-HubsExtension">
                                     <div tabindex="0" class="fxcontrol-base azc-control azc-theme-frost azc-grid-focusableRow azc-grid-selectableRow azc-grid-activateableRow azc-grid-rightClickableRow azc-grid azc-grid-headerHidden Formatter FormatterHtmlBindings Focusable Selectable RightClickableRow" data-bind="pcGrid: $root" data-control="true">
                                         <div class="azc-grid-container">
 
                                             <!-- neutral -->
-                                            <div data-ng-if="vm.blade.isInnerHtml">
+                                            <div data-ng-if="ctrl.vm.blade.isInnerHtml">
                                                 <div ng-transclude></div>
                                             </div>
 
                                             <!-- nav -->
-                                            <nav data-ng-if="vm.isNav" vm="vm"></nav>
+                                            <nav data-ng-if="ctrl.vm.isNav" vm="vm"></nav>
 
-                                            <!-- navGrid -->
-                                            <nav-grid data-ng-if="vm.blade.isNavGrid" vm="vm.blade.navGrid"></nav-grid>
+                                            <!-- grid -->
+                                            <grid data-ng-if="ctrl.vm.blade.isNavGrid" vm="ctrl.vm.blade.navGrid"></grid>
 
                                         </div>
                                     </div>

package/directives/{navgrid/navgrid.html → grid/grid.html}

@@ -5,7 +5,7 @@
         <col class="col1">
     </colgroup>
     <tbody class="azc-grid-groupdata" role="rowgroup">
-        <tr data-ng-repeat="item in vm.items track by $index" data-ng-click="vm.navigateTo(item.bladePath);" role="row" aria-selected="false" data-grid-row-activated="false" data-grid-selectable="true" data-grid-focusable="true" data-grid-activateable="true" ng-show="item.isVisible" style="cursor:pointer" ng-style="item.style">
+        <tr data-ng-repeat="item in ctrl.vm.items track by $index" data-ng-click="ctrl.vm.navigateTo(item.bladePath);" role="row" aria-selected="false" data-grid-row-activated="false" data-grid-selectable="true" data-grid-focusable="true" data-grid-activateable="true" ng-show="item.isVisible" style="cursor:pointer" ng-style="item.style">
             <td class="msportalfx-gridcolumn-asseticon" role="gridcell" data-grid-cell-activated="false">
                 <div class="azc-vivaControl" data-bind='vivaControl: "DEB28B4C-518F-4F70-A817-BF9277606CAB"'>
                     <div data-bind="image: value">

package/directives/{navgrid/navgrid.ts → grid/grid.ts}

@@ -1,12 +1,12 @@
 namespace angularportalazure {
-    function navGrid($window) {
+    function grid($window) {
         return {
             restrict: 'E',
             scope: {},
             bindToController: { vm: '=' },
-            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/navgrid/navgrid.html',
+            templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/grid/grid.html',
             link: function (scope, element, attrs, controller) {
-                console.log('navGrid.link()');
+                console.log('grid.link()');
                 console.log(this);
                 angular.forEach(scope.vm.items, function (item) {
                     // Set some default values, depending on existing values
@@ -16,12 +16,12 @@
                 });
             },
             controller: function () {
-                console.log('navGrid.controller()');
+                console.log('grid.controller()');
                 console.log(this);
             },
-            controllerAs: 'vm'
+            controllerAs: 'ctrl'
         };
     }
 
-    angular.module('angularportalazure').directive('navGrid', ['$window', navGrid]);
+    angular.module('angularportalazure').directive('grid', ['$window', grid]);
 }

package/directives/home/home.ts

@@ -1,22 +1,21 @@
 namespace angularportalazure {
-    function azurePortalHome() {
-        console.log('azurePortalHome');
+    function angularPortalHome() {
         return {
             restrict: 'E',
             scope: {},
             bindToController: { vm: '=' },
             templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/home/home.html',
             link: function (scope, element, attrs, controller) {
-                console.log('azurePortalHome.link()');
+                console.log('angularPortalHome.link()');
                 console.log(this);
             },
             controller: function () {
-                console.log('azurePortalHome.controller()');
+                console.log('angularPortalHome.controller()');
                 console.log(this);
             },
             controllerAs: 'ctrl'
         };
     }
 
-    angular.module('angularportalazure').directive('azurePortalHome', azurePortalHome);
+    angular.module('angularportalazure').directive('angularPortalHome', angularPortalHome);
 }

package/directives/nav/nav.html

@@ -5,7 +5,7 @@
         <col class="col1">
     </colgroup>
     <tbody class="azc-grid-groupdata" role="rowgroup">
-        <tr data-ng-repeat="item in vm.navItems track by $index" data-ng-click="vm.navigateTo(item.bladePath);item.onNavItemClick();" role="row" aria-selected="false" data-grid-row-activated="false" data-grid-selectable="true" data-grid-focusable="true" data-grid-activateable="true" ng-show="item.isVisible" style="cursor:pointer" ng-style="item.style">
+        <tr data-ng-repeat="item in ctrl.vm.navItems track by $index" data-ng-click="ctrl.vm.navigateTo(item.bladePath);item.onNavItemClick();" role="row" aria-selected="false" data-grid-row-activated="false" data-grid-selectable="true" data-grid-focusable="true" data-grid-activateable="true" ng-show="item.isVisible" style="cursor:pointer" ng-style="item.style">
             <td class="msportalfx-gridcolumn-asseticon" role="gridcell" data-grid-cell-activated="false">
                 <div class="azc-vivaControl" data-bind='vivaControl: "DEB28B4C-518F-4F70-A817-BF9277606CAB"'>
                     <div data-bind="image: value">

package/directives/nav/nav.ts

@@ -19,7 +19,7 @@
                 console.log('nav.controller()');
                 console.log(this);
             },
-            controllerAs: 'vm'
+            controllerAs: 'ctrl'
         };
     }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ardimedia/angular-portal-azure",
   "description": "Angular Portal Azure - GUI Framework.",
   "author": "Ardimedia Anstalt <info@ardimedia.com> (http://www.ardimedia.com)",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "main": "index.js",
   "typings": "apn.d.ts",
   "dependencies": {