@ardimedia/angular-portal-azure 0.2.141 → 0.2.143

package/apn.d.ts

@@ -38,6 +38,7 @@ declare namespace angularportalazure {
         constructor($scope: angular.IScope, portalService: angularportalazure.PortalService);
         $scope: angular.IScope;
         portalService: angularportalazure.PortalService;
+        setupWindowResizeListener(callback: () => void): void;
     }
 }
 declare namespace angularportalazure {
@@ -50,6 +51,7 @@ declare var $: JQueryStatic;
 declare namespace angularportalazure {
     class Blade extends angularportalazure.UserControlBase {
         constructor($scope: angular.IScope, portalService: angularportalazure.PortalService, path: string, title: string, subtitle?: string, width?: number);
+        private watcherTitle;
         private bladeContentHeight;
         bladeContentInnerHeight: number;
         private _path;
@@ -150,16 +152,19 @@ declare namespace angularportalazure {
         onCommandStop(): void;
         onCommandSwap(): void;
         /** Obsolete */
+        setTitle(watchExpression: string, func: () => void): void;
         private setBladeHeights();
     }
 }
 declare namespace angularportalazure {
-    class BladeArea extends angularportalazure.UserControlBase {
+    class AreaBlades extends angularportalazure.UserControlBase {
         static $inject: string[];
         constructor($scope: angular.IScope, portalService: angularportalazure.PortalService);
         private areaBlades;
         private portalScroll;
-        private listener1;
+        private addBladeListener;
+        private areaNotificationShowListener;
+        private areaNotificationHideListener;
         blades: Array<angularportalazure.Blade>;
         raiseAddBladeEvent(args: angularportalazure.IAddBladeEventArgs): void;
         setFirstBlade(path: string): angularportalazure.Blade | void;
@@ -171,9 +176,11 @@ declare namespace angularportalazure {
         clearChild(path: string): void;
         showPanoramaIfNoBlades(): void;
         hidePanorama(): void;
-        /** We need to call this when BladeArea is no longer used, otherwise the listener does not get removed. */
+        /** We need to call this when AreaBlades is no longer used, otherwise the listener does not get removed. */
         close(): void;
-        private setupResizerListener();
+        private setPortalScrollCss();
+        private setupShowHideNotificationAreaListener();
+        private setupAddBladeListener();
     }
 }
 declare namespace angularportalazure {
@@ -206,15 +213,15 @@ declare namespace angularportalazure {
 declare namespace angularportalazure {
     class AreaNotification extends angularportalazure.UserControlBase {
         constructor($scope: angular.IScope, portalService: angularportalazure.PortalService);
-        private portalWidth;
-        private portalHeight;
         private areaNotification;
         widthAreaUsed: number;
+        private _width;
         width: number;
+        private _backgroundColor;
         backgroundColor: string;
         hide(): void;
         show(): void;
-        private setupResizerListener();
+        private calcualteCssStyles();
     }
 }
 declare namespace angularportalazure {
@@ -321,7 +328,7 @@ declare namespace angularportalazure {
         requires: any;
         portalShell: angularportalazure.PortalShell;
         panorama: angularportalazure.Panorama;
-        bladeArea: angularportalazure.BladeArea;
+        areaBlades: angularportalazure.AreaBlades;
         areaNotification: angularportalazure.AreaNotification;
         ngDialog: any;
         /** obsolete - $scope is different in any view. do have one instance in a shared service is not the right approach. */

package/apn.js

@@ -178,6 +178,18 @@ var angularportalazure;
             this.$scope = $scope;
             this.portalService = portalService;
         }
+        //#endregion
+        //#region Methods
+        UserControlBase.prototype.setupWindowResizeListener = function (callback) {
+            // http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
+            var id;
+            this.portalService.$window.addEventListener('resize', function () {
+                clearTimeout(id);
+                id = setTimeout(function () {
+                    callback();
+                }, 50);
+            });
+        };
         return UserControlBase;
     }());
     angularportalazure.UserControlBase = UserControlBase;
@@ -289,7 +301,7 @@ var angularportalazure;
             if (width < 50) {
                 throw new Error('[angularportalazure.Blade] constructor parameter \'width\' must be at least 50.');
             }
-            //#region Add BladeArea.AddBlade event listener
+            //#region Add AreaBlades.AddBlade event listener
             /** OBSOLETE: remove when all OBSOLETE code has been removed */
             //if (portalService instanceof angularportalazure.PortalService == false) {
             //    console.log('Blade.constructor: This code cannot be removed yet.')
@@ -297,22 +309,23 @@ var angularportalazure;
             //}
             /** OBSOLETE: end */
             //// Register listener1
-            //this.listener1 = that.portalService.$rootScope.$on('BladeArea.AddBlade', function (event, args: angularportalazure.IAddBladeEventArgs) {
+            //this.listener1 = that.portalService.$rootScope.$on('AreaBlades.AddBlade', function (event, args: angularportalazure.IAddBladeEventArgs) {
             //    if (that.comparePaths(args.path, that.path)) {
-            //        console.log('listener1-BladeArea.AddBlade - function call: that.activate() will probably not work since this/that is not pointing to the right object. - deactivated');
+            //        console.log('listener1-AreaBlades.AddBlade - function call: that.activate() will probably not work since this/that is not pointing to the right object. - deactivated');
             //        //that.activate();
             //    }
             //});
             //#endregion
-            // Set 'this.portalService.bladeArea.blades[index]' to 'this'
-            // 'this.portalService.bladeArea.blades[index]' was generated during AddBlade
-            _this.portalService.bladeArea.blades.forEach(function (blade, index) {
+            // Set 'this.portalService.areaBlades.blades[index]' to 'this'
+            // 'this.portalService.areaBlades.blades[index]' was generated during AddBlade
+            _this.portalService.areaBlades.blades.forEach(function (blade, index) {
                 if (blade.path === _this.path) {
-                    _this.portalService.bladeArea.blades[index] = _this;
+                    _this.portalService.areaBlades.blades[index] = _this;
                 }
             });
-            _this.setBladeHeights();
             return _this;
+            //this.setBladeHeights();
+            //this.setupWindowResizeListener(() => { this.setBladeHeights(); });
         }
         Object.defineProperty(Blade.prototype, "path", {
             get: function () {
@@ -377,11 +390,11 @@ var angularportalazure;
         /** close blade. */
         Blade.prototype.close = function () {
             //this.listener1(); // Unregister listener1
-            if (this.portalService.bladeArea !== undefined) {
-                this.portalService.bladeArea.clearPath(this.path);
+            if (this.portalService.areaBlades !== undefined) {
+                this.portalService.areaBlades.clearPath(this.path);
             }
             else {
-                throw new Error('[angularportalazure.Blade] path: \'' + this.path + '\' could not be removed, since no \'this.portalService.bladeArea\' available.');
+                throw new Error('[angularportalazure.Blade] path: \'' + this.path + '\' could not be removed, since no \'this.portalService.areaBlades\' available.');
             }
         };
         //#region Set StatusBar
@@ -474,25 +487,27 @@ var angularportalazure;
         //}
         //#endregion
         //#endregion
-        //setTitle(watchExpression: string, func: () => void) {
-        //    if (this.watcherTitle === undefined) {
-        //        this.watcherTitle = this.$scope.$watch(watchExpression, () => { func(); });
-        //        this.$scope.$on('$destroy', () => { this.watcherTitle(); });
-        //    }
-        //}
+        Blade.prototype.setTitle = function (watchExpression, func) {
+            var _this = this;
+            if (this.watcherTitle === undefined) {
+                this.watcherTitle = this.$scope.$watch(watchExpression, function () { func(); });
+                this.$scope.$on('$destroy', function () { _this.watcherTitle(); });
+            }
+        };
         Blade.prototype.setBladeHeights = function () {
-            var that = this;
-            that.bladeContentHeight = $('.fxs-blade-content').height();
-            that.bladeContentInnerHeight = that.bladeContentHeight - 20;
-            // http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
-            var id;
-            $(window).resize(function () {
-                clearTimeout(id);
-                id = setTimeout(function () {
-                    that.bladeContentHeight = $('.fxs-blade-content').height();
-                    that.bladeContentInnerHeight = that.bladeContentHeight - 20;
-                }, 500);
-            });
+            console.log(this.portalService.$window.document.getElementById('apa-blade-content'));
+            console.log(this.portalService.$window.document.getElementById('apa-blade-content').style.height);
+            this.bladeContentHeight = Number(this.portalService.$window.document.getElementById('apa-blade-content').style.height.replace('px', ''));
+            this.bladeContentInnerHeight = this.bladeContentHeight - 20;
+            //// http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
+            //var id: NodeJS.Timer;
+            //$(window).resize(function () {
+            //    clearTimeout(id);
+            //    id = setTimeout(() => {
+            //        that.bladeContentHeight = $('.fxs-blade-content').height();
+            //        that.bladeContentInnerHeight = that.bladeContentHeight - 20;
+            //    }, 500);
+            //});
         };
         return Blade;
     }(angularportalazure.UserControlBase));
@@ -507,35 +522,33 @@ var angularportalazure;
 "use strict";
 var angularportalazure;
 (function (angularportalazure) {
-    var BladeArea = (function (_super) {
-        __extends(BladeArea, _super);
-        function BladeArea($scope, portalService) {
+    var AreaBlades = (function (_super) {
+        __extends(AreaBlades, _super);
+        function AreaBlades($scope, portalService) {
             var _this = _super.call(this, $scope, portalService) || this;
             _this.blades = new Array();
             var that = _this;
-            _this.areaBlades = $('#apa-blade-area');
-            _this.portalScroll = $('#apa-portal-scroll');
+            _this.areaBlades = _this.portalService.$window.document.getElementById('apa-blade-area');
+            _this.portalScroll = _this.portalService.$window.document.getElementById('apa-portal-scroll');
             // Set dependencies
             _this.portalService = portalService;
-            //this.portalService.bladeArea = this;
-            //#region Add BladeArea.AddBlade event listener
+            //this.portalService.areaBlades = this;
+            //#region Add AreaBlades.AddBlade event listener
             /** OBSOLETE: remove when all OBSOLETE code has been removed */
-            if (portalService instanceof angularportalazure.PortalService == false) {
-                console.log('BladeArea.constructor: This code cannot be removed yet.');
-                return _this;
-            }
+            //if (portalService instanceof angularportalazure.PortalService == false) {
+            //    console.log('AreaBlades.constructor: This code cannot be removed yet.')
+            //    return;
+            //}
             /** OBSOLETE: end */
-            // Register listener1
-            _this.listener1 = that.portalService.$rootScope.$on('BladeArea.AddBlade', function (event, args) {
-                that.addBlade(args.path, args.pathSender);
-            });
             //#endregion
-            _this.setupResizerListener();
+            _this.setupAddBladeListener();
+            _this.setupShowHideNotificationAreaListener();
+            _this.setupWindowResizeListener(function () { _this.setPortalScrollCss(); });
             return _this;
         }
         //#endregion
         //#region Methods
-        BladeArea.prototype.raiseAddBladeEvent = function (args) {
+        AreaBlades.prototype.raiseAddBladeEvent = function (args) {
             var isBladeAlreadyShown = false;
             this.blades.forEach(function (blade) {
                 if (blade.path === args.path) {
@@ -547,15 +560,15 @@ var angularportalazure;
             });
             if (!isBladeAlreadyShown) {
                 // Add the blade, since it is not yet shown
-                this.portalService.$rootScope.$broadcast('BladeArea.AddBlade', args);
+                this.portalService.$rootScope.$broadcast('AreaBlades.AddBlade', args);
             }
         };
-        BladeArea.prototype.setFirstBlade = function (path) {
+        AreaBlades.prototype.setFirstBlade = function (path) {
             this.clearAll();
             this.hidePanorama();
             return this.addBlade(path);
         };
-        BladeArea.prototype.addBlade = function (path, senderPath) {
+        AreaBlades.prototype.addBlade = function (path, senderPath) {
             if (senderPath === void 0) { senderPath = ''; }
             if (path == null) {
                 return;
@@ -573,11 +586,11 @@ var angularportalazure;
             }
             if (that.portalService.$window !== undefined) {
                 if (that.portalService.$window.document === undefined) {
-                    throw new Error('[angularportalazure.BladeArea] \'this.$window.document\' undefined.');
+                    throw new Error('[angularportalazure.AreaBlades] \'this.$window.document\' undefined.');
                 }
                 var portalcontent = that.portalService.$window.document.getElementById('apa-portal-scroll');
                 if (portalcontent === null) {
-                    throw new Error('[angularportalazure.BladeArea] HTML element with ID [apa-portal-scroll] not found. Maybe it is to early to call function \'BladeArea.addBlade\'.');
+                    throw new Error('[angularportalazure.AreaBlades] HTML element with ID [apa-portal-scroll] not found. Maybe it is to early to call function \'BladeArea.addBlade\'.');
                 }
             }
             //#endregion
@@ -588,7 +601,7 @@ var angularportalazure;
             this.blades.forEach(function (blade) {
                 // we do not distinguish between lower and upper case path name
                 if (blade.comparePaths(blade.path, path)) {
-                    throw new Error('[angularportalazure.BladeArea] path: \'' + path + '\' will not be added. It is already added.');
+                    throw new Error('[angularportalazure.AreaBlades] path: \'' + path + '\' will not be added. It is already added.');
                 }
                 ;
             });
@@ -613,11 +626,11 @@ var angularportalazure;
             //#endregion
             return blade;
         };
-        BladeArea.prototype.clearAll = function () {
+        AreaBlades.prototype.clearAll = function () {
             this.blades.length = 0;
             this.showPanoramaIfNoBlades();
         };
-        BladeArea.prototype.clearPath = function (path) {
+        AreaBlades.prototype.clearPath = function (path) {
             var that = this;
             // we do not distinguish between lower and upper case path name
             path = path.toLowerCase();
@@ -628,11 +641,11 @@ var angularportalazure;
                 }
             });
             if (!isremoved) {
-                throw new Error('[angularportalazure.BladeArea.clearPath] path: \'' + path + '\' could not be removed, since path not found in bladeUrls.');
+                throw new Error('[angularportalazure.AreaBlades.clearPath] path: \'' + path + '\' could not be removed, since path not found in bladeUrls.');
             }
             this.showPanoramaIfNoBlades();
         };
-        BladeArea.prototype.clearLevel = function (level) {
+        AreaBlades.prototype.clearLevel = function (level) {
             if (this.blades.length < level) {
             }
             if (level == 0) {
@@ -641,11 +654,11 @@ var angularportalazure;
             this.blades.length = level - 1;
             this.showPanoramaIfNoBlades();
         };
-        BladeArea.prototype.clearLastLevel = function () {
+        AreaBlades.prototype.clearLastLevel = function () {
             this.clearLevel(this.blades.length);
             this.showPanoramaIfNoBlades();
         };
-        BladeArea.prototype.clearChild = function (path) {
+        AreaBlades.prototype.clearChild = function (path) {
             var that = this;
             path = path.toLowerCase();
             if (path === '') {
@@ -659,10 +672,10 @@ var angularportalazure;
                 }
             });
             if (!isremoved) {
-                throw new Error('[angularportalazure.BladeArea.clearChild] path: \'' + path + '\' could not be removed, since path not found in bladeUrls.');
+                throw new Error('[angularportalazure.AreaBlades.clearChild] path: \'' + path + '\' could not be removed, since path not found in bladeUrls.');
             }
         };
-        BladeArea.prototype.showPanoramaIfNoBlades = function () {
+        AreaBlades.prototype.showPanoramaIfNoBlades = function () {
             if (this.blades.length === 0) {
                 if (this.portalService.panorama !== undefined) {
                     {
@@ -671,65 +684,45 @@ var angularportalazure;
                 }
             }
         };
-        BladeArea.prototype.hidePanorama = function () {
+        AreaBlades.prototype.hidePanorama = function () {
             if (this.portalService.panorama !== undefined) {
                 this.portalService.panorama.isVisible = false;
             }
         };
-        /** We need to call this when BladeArea is no longer used, otherwise the listener does not get removed. */
-        BladeArea.prototype.close = function () {
-            this.listener1(); // Unregister listener1
+        /** We need to call this when AreaBlades is no longer used, otherwise the listener does not get removed. */
+        AreaBlades.prototype.close = function () {
+            // Unregister Listeners
+            this.addBladeListener();
+            this.areaNotificationShowListener();
+            this.areaNotificationHideListener();
         };
         //#endregion
-        //#region OBSOLETE
-        //addBladePath(path: string) {
-        //    // Fix issue with old code
-        //    if (this.portalService.$window === undefined) {
-        //        this.portalService.$window = <any>this.portalService;
-        //    }
-        //    this.addBlade(path);
-        //    //this.addBladeOld(path);
-        //}
-        //addBladeOld(path: string) {
-        //    var that = this;
-        //    if (path === undefined || path == '') { return; }
-        //    var blade = new angularportalazure.Blade(that.$scope, that.portalService, path, '');
-        //    that.blades.push(blade);
-        //    var portalcontent = that.portalService.$window.document.getElementById('apa-portal-scroll');
-        //    that.portalService.$window.setTimeout(function () {
-        //        var azureportalblades = that.portalService.$window.document.getElementsByClassName('azureportalblade');
-        //        var i = that.blades.length - 1;
-        //        // HACK: Sometime azureportalblades[i].offsetLeft is undefined.
-        //        //       So now if it is, the user has to scroll on its own.
-        //        if (azureportalblades[i] !== undefined && (<any>azureportalblades[i]).offsetLeft !== undefined) {
-        //            var sl = (<any>azureportalblades[i]).offsetLeft - 30;
-        //            portalcontent.scrollLeft = sl;
-        //        }
-        //    }, 250);
-        //}
-        //#endregion
-        BladeArea.prototype.setupResizerListener = function () {
+        AreaBlades.prototype.setPortalScrollCss = function () {
+            this.portalScroll.style.marginRight = this.portalService.areaNotification.widthAreaUsed + 'px';
+        };
+        AreaBlades.prototype.setupShowHideNotificationAreaListener = function () {
+            var _this = this;
+            this.areaNotificationShowListener = this.portalService.$rootScope.$on('AreaNotification.Show', function (event, args) {
+                _this.setPortalScrollCss();
+            });
+            this.areaNotificationHideListener = this.portalService.$rootScope.$on('AreaNotification.Hide', function (event, args) {
+                _this.setPortalScrollCss();
+            });
+        };
+        AreaBlades.prototype.setupAddBladeListener = function () {
             var that = this;
-            that.portalScroll.css('margin-right', that.portalService.areaNotification.widthAreaUsed + 'px');
-            console.log(that.portalScroll.css('margin-right'));
-            // http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
-            var id;
-            $(window).resize(function () {
-                clearTimeout(id);
-                id = setTimeout(function () {
-                    that.portalScroll.css('margin-right', that.portalService.areaNotification.widthAreaUsed + 'px');
-                    console.log(that.portalScroll.css('margin-right'));
-                }, 50);
+            that.addBladeListener = that.portalService.$rootScope.$on('AreaBlades.AddBlade', function (event, args) {
+                that.addBlade(args.path, args.pathSender);
             });
         };
-        return BladeArea;
+        return AreaBlades;
     }(angularportalazure.UserControlBase));
     //#region Constructor
-    BladeArea.$inject = ['$scope', 'angularportalazure.portalService'];
-    angularportalazure.BladeArea = BladeArea;
-    angular.module('angularportalazure').service('angularportalazure.bladeArea', BladeArea);
+    AreaBlades.$inject = ['$scope', 'angularportalazure.portalService'];
+    angularportalazure.AreaBlades = AreaBlades;
+    angular.module('angularportalazure').service('angularportalazure.areaBlades', AreaBlades);
 })(angularportalazure || (angularportalazure = {}));
-/// <reference path="bladearea.ts" />
+/// <reference path="areablades.ts" />
 /// <reference path="debug.ts" />
 /// <reference path="portalservice.ts" />
 "use strict";
@@ -775,7 +768,7 @@ var angularportalazure;
             if (path === '') {
                 return;
             }
-            this.portalService.bladeArea.raiseAddBladeEvent({ path: path, pathSender: this.path });
+            this.portalService.areaBlades.raiseAddBladeEvent({ path: path, pathSender: this.path });
         };
         return BladeNav;
     }(angularportalazure.BladeData));
@@ -830,40 +823,59 @@ var angularportalazure;
         function AreaNotification($scope, portalService) {
             var _this = _super.call(this, $scope, portalService) || this;
             _this.widthAreaUsed = 0;
-            _this.width = 250;
-            _this.backgroundColor = '#32383f';
-            _this.areaNotification = $('#apa-notification-area');
+            _this._width = 250;
+            _this._backgroundColor = '#32383f';
+            _this.areaNotification = _this.portalService.$window.document.getElementById('apa-notification-area');
             _this.hide();
-            _this.setupResizerListener();
+            _this.setupWindowResizeListener(function () { _this.calcualteCssStyles(); });
             return _this;
         }
+        Object.defineProperty(AreaNotification.prototype, "width", {
+            get: function () {
+                return this._width;
+            },
+            set: function (value) {
+                this._width = value;
+                this.calcualteCssStyles();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(AreaNotification.prototype, "backgroundColor", {
+            get: function () {
+                return this._backgroundColor;
+            },
+            set: function (value) {
+                this._backgroundColor = value;
+                this.calcualteCssStyles();
+            },
+            enumerable: true,
+            configurable: true
+        });
         //#endregion
         //#region Methods
         AreaNotification.prototype.hide = function () {
             this.widthAreaUsed = 0;
-            this.areaNotification.css('display', 'none');
+            this.areaNotification.style.display = 'none';
+            this.portalService.$rootScope.$broadcast('AreaNotification.Hide');
         };
         AreaNotification.prototype.show = function () {
-            this.areaNotification.css('position', 'absolute');
-            this.areaNotification.css('top:0', '0');
-            this.areaNotification.css('height', '100%');
-            this.areaNotification.css('background-color', this.backgroundColor);
-            this.areaNotification.css('border-left', '2px solid gray');
-            this.areaNotification.css('width', this.width + 'px');
-            this.areaNotification.css('left', $(window).width() - this.width + 'px');
-            this.widthAreaUsed = this.width;
-            this.areaNotification.css('display', 'inline-block');
-        };
-        AreaNotification.prototype.setupResizerListener = function () {
-            var that = this;
-            // http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
-            var id;
-            $(window).resize(function () {
-                clearTimeout(id);
-                id = setTimeout(function () {
-                    that.show();
-                }, 50);
-            });
+            this.widthAreaUsed = 1; // Indicate to the calcualteCssStyles function, that we need to set this value
+            this.calcualteCssStyles();
+            this.areaNotification.style.display = 'inline-block';
+            this.portalService.$rootScope.$broadcast('AreaNotification.Show');
+        };
+        AreaNotification.prototype.calcualteCssStyles = function () {
+            this.areaNotification.style.position = 'absolute';
+            this.areaNotification.style.top = '0';
+            this.areaNotification.style.height = '100%';
+            this.areaNotification.style.backgroundColor = this.backgroundColor;
+            this.areaNotification.style.borderLeft = '2px solid gray';
+            this.areaNotification.style.width = this.width + 'px';
+            this.areaNotification.style.left = this.portalService.$window.innerWidth - this.width + 'px';
+            if (this.widthAreaUsed != 0) {
+                this.widthAreaUsed = this.width;
+            }
         };
         return AreaNotification;
     }(angularportalazure.UserControlBase));
@@ -955,7 +967,7 @@ var angularportalazure;
         //#endregion
         //#region Methods
         Tile.prototype.clicked = function () {
-            this.portalService.bladeArea.setFirstBlade(this.bladePath);
+            this.portalService.areaBlades.setFirstBlade(this.bladePath);
         };
         return Tile;
     }());
@@ -1047,7 +1059,7 @@ var angularportalazure;
     }(angularportalazure.UserControlBase));
     angularportalazure.Panorama = Panorama;
 })(angularportalazure || (angularportalazure = {}));
-/// <reference path="bladearea.ts" />
+/// <reference path="areablades.ts" />
 /// <reference path="usercontrolbase.ts" />
 /// <reference path="debug.ts" />
 /// <reference path="panorama.ts" />
@@ -1064,7 +1076,7 @@ var angularportalazure;
             _this.portalService = portalService;
             _this.portalService.portalShell = _this;
             _this.portalService.panorama = new angularportalazure.Panorama(_this.$scope, title, _this.portalService);
-            //this.portalService.bladeArea = new angularportalazure.BladeArea(this.$scope, portalService);
+            //this.portalService.areaBlades = new angularportalazure.BladeArea(this.$scope, portalService);
             _this.portalService.panorama.title = title;
             return _this;
             //this.initialize();
@@ -1076,7 +1088,7 @@ var angularportalazure;
 /// <reference types="angular" />
 /// <reference types="angulartics" />
 /// <reference path="areanotification.ts" />
-/// <reference path="bladearea.ts" />
+/// <reference path="areablades.ts" />
 /// <reference path="debug.ts" />
 /// <reference path="bladeparameter.ts" />
 /// <reference path="panorama.ts" />
@@ -1125,7 +1137,7 @@ var angularportalazure;
             controller: function () {
                 this.$onInit = function () {
                     this.close = function () {
-                        //portalService.bladeArea.clearLastLevel();
+                        //portalService.areaBlades.clearLastLevel();
                     };
                 };
             },
@@ -1152,7 +1164,7 @@ var angularportalazure;
             controller: function () {
                 this.$onInit = function () {
                     this.close = function () {
-                        //portalService.bladeArea.clearLastLevel();
+                        //portalService.areaBlades.clearLastLevel();
                     };
                 };
             },
@@ -1177,13 +1189,13 @@ var angularportalazure;
     //        templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
     //        link: function (scope, element, attrs, controller) {
     //            //controller.close = function () {
-    //            //    portalService.bladeArea.clearLastLevel();
+    //            //    portalService.areaBlades.clearLastLevel();
     //            //};
     //        },
     //        controller: function () {
     //            this.$onInit = function () {
     //                this.close = function () {
-    //                    portalService.bladeArea.clearLastLevel();
+    //                    portalService.areaBlades.clearLastLevel();
     //                };
     //            };
     //        },
@@ -1196,7 +1208,7 @@ var angularportalazure;
         this.$onInit = function () {
             portalService.areaNotification.show();
             this.close = function () {
-                //portalService.bladeArea.clearLastLevel();
+                //portalService.areaBlades.clearLastLevel();
                 portalService.areaNotification.hide();
             };
         };
@@ -1226,7 +1238,7 @@ var angularportalazure;
     //        controller: function () {
     //            //this.$onInit = function () {
     //            //    this.close = function () {
-    //            //        portalService.bladeArea.clearLastLevel();
+    //            //        portalService.areaBlades.clearLastLevel();
     //            //    };
     //            //};
     //        },
@@ -1262,9 +1274,8 @@ var angularportalazure;
     AngularPortalHomeController.$inject = ['$scope', 'angularportalazure.portalService'];
     function AngularPortalHomeController($scope, portalService) {
         this.$onInit = function () {
-            console.log('initializse');
             portalService.areaNotification = new angularportalazure.AreaNotification($scope, portalService);
-            portalService.bladeArea = new angularportalazure.BladeArea($scope, portalService);
+            portalService.areaBlades = new angularportalazure.AreaBlades($scope, portalService);
         };
     }
     var angularPortalHome = {
@@ -1298,7 +1309,7 @@ var angularportalazure;
     //        controller: function () {
     //            //this.$onInit = function () {
     //            //    this.close = function () {
-    //            //        portalService.bladeArea.clearLastLevel();
+    //            //        portalService.areaBlades.clearLastLevel();
     //            //    };
     //            //};
     //        },

package/css/apn.css

@@ -407,7 +407,7 @@ a {
   margin-top: 4px;
   margin-left: 6px;
   padding: 0;
-  opacity: 0.3;
+  opacity: 0.6;
   -webkit-transition: opacity .2s ease-out;
   -moz-transition: opacity .2s ease-out;
   -o-transition: opacity .2s ease-out;
@@ -421,10 +421,10 @@ a {
   fill: #fff; }
 
 .fxs-blade .fxs-blade-header .fxs-blade-actions button > svg * {
-  fill: #8f9ca8; }
+  /*fill: #8f9ca8;*/ }
 
 .fxs-blade .fxs-blade-header .fxs-blade-actions button svg * {
-  fill: #63707e; }
+  /*fill: #63707e;*/ }
 
 .msportalfx-svg-c01 {
   fill: #fff; }

package/css/apn.min.css

@@ -1 +1 @@
-@charset "UTF-8";html,body{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;height:100%;width:0;}a{color:#00bcf2;text-decoration:none;}.ng-scope{height:100%;}.fxs-portal{overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0;}.fxs-portal .fxs-portal-content{height:100%;color:#464f59;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-transition:margin .2s ease;-moz-transition:margin .2s ease;-o-transition:margin .2s ease;transition:margin .2s ease;}.fxs-portal .fxs-portal-content>*{white-space:normal;}.fxs-panorama{-ms-scroll-chaining:none;}.fxs-panorama-homearea{min-width:600px;}.fxs-panorama .fxs-panorama-homearea{position:relative;padding:0 25px;margin:0 15px 0 25px;}.fxs-panorama .fxs-panorama-homearea,.fxs-panorama .fxs-journey-target{display:inline-block;vertical-align:top;height:100%;}.fxs-panorama .fxs-panorama-homearea>header{margin:20px 0 4px;height:76px;min-width:450px;}.fxs-panorama .fxs-panorama-homearea .fxs-panorama-title{font-family:"Segoe UI Light","Segoe WP Light","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:40px;line-height:54px;color:#fff;padding-top:6px;margin:0;}.fxs-panorama .fxs-panorama-homearea .fxs-avatarmenu-target{position:absolute;top:18px;right:5px;max-width:220px;min-width:190px;}.fxs-avatarmenu{position:relative;padding:12px;text-align:right;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.fxs-avatarmenu .fxs-avatarmenu-header{position:relative;font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;height:35px;color:#fff;}.fxs-avatarmenu>a{display:block;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;text-decoration:none;padding:10px;padding-right:54px;}.fxs-avatarmenu>a img{position:absolute;top:10px;right:10px;height:35px;width:32px;border:0;border-left:3px solid #7fba00;}.fxs-avatarmenu .fxs-avatarmenu-header .fxs-avatarmenu-username{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-size:14px;}.fxs-avatarmenu .fxs-avatarmenu-header .fxs-avatarmenu-emailaddress{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;text-transform:uppercase;opacity:.9;margin-top:4px;}.fxs-avatarmenu .fxs-avatarmenu-dropdown{display:none;width:100%;background-color:#32383f;border-top:1px solid #3c454f;text-align:left;}.fxs-avatarmenu .fxs-avatarmenu-dropdown ul{padding:0;margin:0;list-style-type:none;border-bottom:1px solid #3c454f;}.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-feedback,.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-switchportal,.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-signout{padding-right:35px;position:relative;}.fxs-avatarmenu .fxs-avatarmenu-dropdown ul li a{display:block;font-size:14px;padding:10px 18px 11px;line-height:18px;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-icon{width:15px;height:15px;display:inline-block;position:absolute;right:18px;margin-top:2px;}.fxs-panorama .fxs-panorama-homearea .fxs-startboard-target{height:-webkit-calc(100% - 100px);height:calc(100% - 100px);}.fxs-startboard .fxs-startboard-layout{height:100%;overflow-y:hidden;overflow-x:hidden;margin:0 -25px;padding:0 25px;}.fxs-stacklayout-child{height:100%;}.fxs-flowlayout>.fxs-flowlayout-childcontainer{position:relative;-webkit-transition:height .25s linear,width .25s linear 0s;-moz-transition:height .25s linear,width .25s linear 0s;-o-transition:height .25s linear,width .25s linear 0s;transition:height .25s linear,width .25s linear 0s;}.fxs-flowlayout>.fxs-flowlayout-childcontainer>.fxs-flowlayout-element{position:absolute;}.fxs-tilesize-herowide.fxs-tile{height:355px;width:535px;}.fxs-tilesize-normal.fxs-tile{height:175px;width:175px;}.fxs-tilesize-mini.fxs-tile{height:85px;width:85px;}.fxs-tile{height:175px;width:175px;-webkit-transition:height .125s linear .125s,width .125s linear 0s;-moz-transition:height .125s linear .125s,width .125s linear 0s;-o-transition:height .125s linear .125s,width .125s linear 0s;transition:height .125s linear .125s,width .125s linear 0s;background-color:#fff;position:relative;}.fxs-part{width:100%;height:100%;position:relative;box-shadow:inset 1px 0 #dcdfe2;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:15px 15px 15px 15px;box-shadow:inset 1px 0 #dcdfe2;}.fxs-part .fxs-part-title{position:relative;top:-4px;}.fxs-part .fxs-part-title h2{font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:14px;line-height:17px;color:#32383f;}.fxs-part .fxs-part-title h3{font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#8f9ca8;text-transform:uppercase;margin-top:3px;}.fxs-part .fxs-part-title h2,.fxs-part .fxs-part-title h3{margin:0;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-part .fxs-part-content{font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;line-height:18px;color:#464f59;position:relative;width:100%;height:100%;-moz-box-sizing:border-box;box-sizing:border-box;}.fxs-tile div.fxs-tile-overlay{display:none;position:absolute;width:100%;top:0;bottom:0;cursor:pointer;}.fxs-journey{height:100%;}.fxs-journey>.fxs-journey-layout{height:100%;}.fxs-journey>.fxs-journey-layout>.fxs-stacklayout-child{-webkit-transition:padding-top .2s ease,opacity .2s ease;transition:padding-top .2s ease,opacity .2s ease;}.fxs-stacklayout-horizontal.fxs-stacklayout{overflow:hidden;white-space:nowrap;height:100%;}.fxs-stacklayout-horizontal.fxs-stacklayout>.fxs-stacklayout-child{display:inline-block;vertical-align:top;overflow-y:auto;height:100%;white-space:normal;}.fxs-journey>.fxs-journey-layout>.fxs-stacklayout-child>.fxs-blade{box-shadow:-5px 0 0 rgba(31,35,39,.2),5px 0 0 rgba(31,35,39,.2);}.fxs-journey-layout :first-child.fxs-stacklayout-child .fxs-blade{border-left-color:transparent;border-left-width:0;}.fxs-blade-locked.fxs-blade{background-color:#fff;}.fxs-bladesize-small.fxs-blade{width:315px;}.fxs-blade{border-left-color:rgba(143,156,168,.8);width:585px;position:relative;height:100%;background-color:#f1f2f3;overflow:hidden;-webkit-transition:width .2s ease-out;-moz-transition:width .2s ease-out;-o-transition:width .2s ease-out;transition:width .2s ease-out;border-left-style:solid;border-left-width:2px;}.fxs-blade .fxs-blade-header{padding-bottom:8px;background-color:#3e4045;min-height:117px;}.fxs-blade .fxs-blade-statusbar-wrapper{background-color:#32383f;}.fxs-blade .fxs-blade-statusbar::after{content:" ";}.fxs-blade .fxs-blade-statusbar{-webkit-transition:all .5s,color .5s;-moz-transition:all .5s,color .5s;-o-transition:all .5s,color .5s;transition:all .5s,color .5s;}.fxs-blade .fxs-blade-statusbar,.fxs-blade .fxs-blade-loading-status{padding:5px 0 5px 25px;font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-blade .fxs-blade-header .fxs-blade-actions{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;float:right;margin-right:22px;height:40px;}.fxs-blade .fxs-blade-header .fxs-blade-actions button{cursor:pointer;border:0;height:21px;width:21px;background-color:transparent;margin-top:4px;margin-left:6px;padding:0;opacity:.3;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;}.fxs-blade .fxs-blade-header .fxs-blade-actions button img,.fxs-blade .fxs-blade-header .fxs-blade-actions button svg{height:21px;width:21px;}.msportal-fx-svg-placeholder{fill:#fff;}.fxs-blade .fxs-blade-header .fxs-blade-actions button>svg *{fill:#8f9ca8;}.fxs-blade .fxs-blade-header .fxs-blade-actions button svg *{fill:#63707e;}.msportalfx-svg-c01{fill:#fff;}.fxs-blade .fxs-blade-header .fxs-blade-title{padding:0 25px 2px 7px;margin-left:18px;}.fxs-blade .fxs-blade-header .fxs-blade-title h2::after,.fxs-blade .fxs-blade-header .fxs-blade-title h3::after{content:" ";}.fxs-blade .fxs-blade-header .fxs-blade-title h2{margin:0;font-family:"Segoe UI Light","Segoe WP Light","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:20px;line-height:28px;color:#fff;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-blade .fxs-blade-header .fxs-blade-title h3{margin:3px 0 2px 0;font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#758393;text-transform:uppercase;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-blade .fxs-blade-header .fxs-blade-commandBarContainer{margin:0 20px 0 15px;}.fxs-commandBar{display:none;}.fxs-commandBar-active.fxs-commandBar{display:block;}.fxs-commandBar>ul.fxs-commandBar-itemList{display:block;margin:4px 0 0;padding:0;list-style-type:none;overflow:hidden;height:48px;-webkit-transition:height .175s ease-in;-moz-transition:height .175s ease-in;-o-transition:height .175s ease-in;transition:height .175s ease-in;}.fxs-commandBar>ul.fxs-commandBar-itemList>li{border-right-color:#6c737a;float:left;margin-bottom:5px;border-right:1px solid transparent;}.fxs-commandBar .fxs-commandBar-form{display:block;position:absolute;z-index:200;width:100%;left:0;}.fxs-commandBar .fxs-commandBar-item{font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#fff;text-transform:uppercase;display:block;position:relative;padding:3px 10px 0;width:90px;height:48px;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color .07s ease-in;transition:background-color .07s ease-in;}.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-text{height:22px;-webkit-transition:opacity .07s ease-in;transition:opacity .07s ease-in;}.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-icon{position:absolute;bottom:2px;}.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-icon>svg,.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-icon>img{height:18px;width:18px;}.fxs-commandBar .fxs-commandBar-item-expandList.fxs-commandBar-item::after{content:"…";position:absolute;bottom:9px;left:40px;font-size:23px;line-height:23px;}.fxs-commandBar .fxs-commandBar-item:hover{background-color:#1f2327;}.fxs-blade .fxs-blade-content{padding:25px;overflow-x:hidden;overflow-y:auto;-ms-overflow-style:-ms-autohiding-scrollbar;-ms-scrollbar-track-color:#d8d8ea;-ms-scrollbar-arrow-color:#758393;-ms-scrollbar-face-color:#63707e;}.fxs-bladesize-small.fxs-blade .fxs-blade-stacklayout{width:265px;}.fxs-blade .fxs-blade-content>div{height:100%;}.fxs-bladesize-medium.fxs-blade{width:585px;}.fxs-bladesize-medium.fxs-blade .fxs-blade-stacklayout{width:535px;}.fxs-blade .fxs-blade-stacklayout{width:535px;}.fxs-blade .fxs-blade-maximized-content{display:none;}.fxs-stacklayout-vertical.fxs-stacklayout>.fxs-stacklayout-child{display:block;}.fxs-lens{position:relative;height:100%;-moz-box-sizing:border-box;box-sizing:border-box;}.fxs-lens .fxs-lens-title{color:#3d4045;}.fxs-lens>.fxs-lens-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-family:"Segoe UI Light","Segoe WP Light","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:14px;line-height:32px;color:#3d4045;}.fxs-lens>.fxs-lens-layout{height:100%;}:last-child.fxs-tilesize-herowidefitheight.fxs-tile,:last-child.fxs-tilesize-fullwidthfitheight.fxs-tile{margin-bottom:0;}.fxs-tilesize-herowidefitheight.fxs-tile,.fxs-tilesize-fullwidthfitheight.fxs-tile{margin-bottom:5px;}.fxs-tilesize-fullwidthfitheight.fxs-tile{height:100%;width:100%;}.fxs-blade-locked.fxs-blade .fxs-part,.fxs-bladestyle-context.fxs-blade .fxs-part,.fxs-bladestyle-contextaction.fxs-blade .fxs-part,.fxs-bladestyle-help.fxs-blade .fxs-part{box-shadow:none;}.fxs-blade-locked.fxs-blade .fxs-part{padding:0;}.fxs-lens>.fxs-lens-drag-handle{position:absolute;z-index:52;top:-12px;left:-25px;bottom:12px;width:25px;background-color:#e9e9f3;opacity:0;-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;}.fxs-part .fxs-part-title h3{font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#8f9ca8;text-transform:uppercase;margin-top:3px;}.azc-grid{position:relative;}.azc-grid:focus{outline:none !important;}.azc-grid table{width:100%;border:0;background-color:transparent;table-layout:fixed;border-spacing:0;border-collapse:collapse;}.azc-grid .azc-grid-container{overflow-x:auto;overflow-y:visible;}.fxs-part .fxs-part-content{font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;line-height:18px;color:#464f59;line-height:normal;position:relative;width:100%;height:100%;-moz-box-sizing:border-box;box-sizing:border-box;}.azc-control table{border-collapse:collapse;table-layout:fixed;}.azc-grid table caption{display:none;}.azc-grid-headerHidden .azc-grid table thead{display:none;}.azc-grid table thead tr th.azc-grid-unsortablecolumnheader{cursor:default;}.azc-grid table th:first-child{padding-left:0;}.azc-grid table thead tr th{text-transform:uppercase;}.azc-grid table thead tr th>a{padding:1px 0 1px 10px;}.azc-grid table thead tr th a{line-height:38px;display:block;text-decoration:none;color:inherit;position:relative;}a{color:#00bcf2;text-decoration:none;}.azc-grid table thead tr th a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.azc-grid table thead tr th>a .azc-grid-headerlabel{display:block;}.azc-grid-activateableRow table tbody tr[data-grid-row-activated='true'][aria-selected='true']{background-color:#c6edfa !important;}.azc-grid-selectableRow table tbody tr[aria-selected='true'] td{color:inherit !important;}.azc-grid table tbody:last-child tr:last-child td{border-bottom:1px solid #dcdfe2;}.azc-grid table tbody tr td{color:#3d3d3d;height:33px;border-top:1px solid #dcdfe2;border-bottom:1px solid #dcdfe2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.azc-control svg{overflow:hidden;}.msportalfx-gridcolumn-asseticon img,.msportalfx-gridcolumn-asseticon svg{margin-top:4px;height:21px;width:21px;}.msportalfx-svg-c04{fill:#7a7a7a;}.msportalfx-svg-c20{fill:#68217a;}.msportalfx-svg-c01{fill:#fff;}.k-grid-content table tbody tr{padding:1px 0 1px 10px;}.k-grid td{padding:0 .6em;}body{background-color:#2e80ab;background-image:linear-gradient(to bottom,#2e80ab 0%,#61b7da 100%);background-repeat:no-repeat;font-family:wf_segoe-ui_normal,"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:small;-ms-scrollbar-arrow-color:#758393;-ms-scrollbar-face-color:#63707e;-ms-scrollbar-track-color:#dcdfe2;}a{color:#00bcf2;text-decoration:none;}img,a img,:link img,:visited img{border:0;}input.ng-invalid{border:1px solid #f00;}.collapsed{visibility:collapse;width:0;min-width:0;}
+@charset "UTF-8";html,body{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;height:100%;width:0;}a{color:#00bcf2;text-decoration:none;}.ng-scope{height:100%;}.fxs-portal{overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0;}.fxs-portal .fxs-portal-content{height:100%;color:#464f59;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-transition:margin .2s ease;-moz-transition:margin .2s ease;-o-transition:margin .2s ease;transition:margin .2s ease;}.fxs-portal .fxs-portal-content>*{white-space:normal;}.fxs-panorama{-ms-scroll-chaining:none;}.fxs-panorama-homearea{min-width:600px;}.fxs-panorama .fxs-panorama-homearea{position:relative;padding:0 25px;margin:0 15px 0 25px;}.fxs-panorama .fxs-panorama-homearea,.fxs-panorama .fxs-journey-target{display:inline-block;vertical-align:top;height:100%;}.fxs-panorama .fxs-panorama-homearea>header{margin:20px 0 4px;height:76px;min-width:450px;}.fxs-panorama .fxs-panorama-homearea .fxs-panorama-title{font-family:"Segoe UI Light","Segoe WP Light","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:40px;line-height:54px;color:#fff;padding-top:6px;margin:0;}.fxs-panorama .fxs-panorama-homearea .fxs-avatarmenu-target{position:absolute;top:18px;right:5px;max-width:220px;min-width:190px;}.fxs-avatarmenu{position:relative;padding:12px;text-align:right;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.fxs-avatarmenu .fxs-avatarmenu-header{position:relative;font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;height:35px;color:#fff;}.fxs-avatarmenu>a{display:block;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;text-decoration:none;padding:10px;padding-right:54px;}.fxs-avatarmenu>a img{position:absolute;top:10px;right:10px;height:35px;width:32px;border:0;border-left:3px solid #7fba00;}.fxs-avatarmenu .fxs-avatarmenu-header .fxs-avatarmenu-username{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-size:14px;}.fxs-avatarmenu .fxs-avatarmenu-header .fxs-avatarmenu-emailaddress{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;text-transform:uppercase;opacity:.9;margin-top:4px;}.fxs-avatarmenu .fxs-avatarmenu-dropdown{display:none;width:100%;background-color:#32383f;border-top:1px solid #3c454f;text-align:left;}.fxs-avatarmenu .fxs-avatarmenu-dropdown ul{padding:0;margin:0;list-style-type:none;border-bottom:1px solid #3c454f;}.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-feedback,.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-switchportal,.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-signout{padding-right:35px;position:relative;}.fxs-avatarmenu .fxs-avatarmenu-dropdown ul li a{display:block;font-size:14px;padding:10px 18px 11px;line-height:18px;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-avatarmenu .fxs-avatarmenu-dropdown .fxs-avatarmenu-list-system .fxs-avatarmenu-icon{width:15px;height:15px;display:inline-block;position:absolute;right:18px;margin-top:2px;}.fxs-panorama .fxs-panorama-homearea .fxs-startboard-target{height:-webkit-calc(100% - 100px);height:calc(100% - 100px);}.fxs-startboard .fxs-startboard-layout{height:100%;overflow-y:hidden;overflow-x:hidden;margin:0 -25px;padding:0 25px;}.fxs-stacklayout-child{height:100%;}.fxs-flowlayout>.fxs-flowlayout-childcontainer{position:relative;-webkit-transition:height .25s linear,width .25s linear 0s;-moz-transition:height .25s linear,width .25s linear 0s;-o-transition:height .25s linear,width .25s linear 0s;transition:height .25s linear,width .25s linear 0s;}.fxs-flowlayout>.fxs-flowlayout-childcontainer>.fxs-flowlayout-element{position:absolute;}.fxs-tilesize-herowide.fxs-tile{height:355px;width:535px;}.fxs-tilesize-normal.fxs-tile{height:175px;width:175px;}.fxs-tilesize-mini.fxs-tile{height:85px;width:85px;}.fxs-tile{height:175px;width:175px;-webkit-transition:height .125s linear .125s,width .125s linear 0s;-moz-transition:height .125s linear .125s,width .125s linear 0s;-o-transition:height .125s linear .125s,width .125s linear 0s;transition:height .125s linear .125s,width .125s linear 0s;background-color:#fff;position:relative;}.fxs-part{width:100%;height:100%;position:relative;box-shadow:inset 1px 0 #dcdfe2;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:15px 15px 15px 15px;box-shadow:inset 1px 0 #dcdfe2;}.fxs-part .fxs-part-title{position:relative;top:-4px;}.fxs-part .fxs-part-title h2{font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:14px;line-height:17px;color:#32383f;}.fxs-part .fxs-part-title h3{font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#8f9ca8;text-transform:uppercase;margin-top:3px;}.fxs-part .fxs-part-title h2,.fxs-part .fxs-part-title h3{margin:0;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-part .fxs-part-content{font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;line-height:18px;color:#464f59;position:relative;width:100%;height:100%;-moz-box-sizing:border-box;box-sizing:border-box;}.fxs-tile div.fxs-tile-overlay{display:none;position:absolute;width:100%;top:0;bottom:0;cursor:pointer;}.fxs-journey{height:100%;}.fxs-journey>.fxs-journey-layout{height:100%;}.fxs-journey>.fxs-journey-layout>.fxs-stacklayout-child{-webkit-transition:padding-top .2s ease,opacity .2s ease;transition:padding-top .2s ease,opacity .2s ease;}.fxs-stacklayout-horizontal.fxs-stacklayout{overflow:hidden;white-space:nowrap;height:100%;}.fxs-stacklayout-horizontal.fxs-stacklayout>.fxs-stacklayout-child{display:inline-block;vertical-align:top;overflow-y:auto;height:100%;white-space:normal;}.fxs-journey>.fxs-journey-layout>.fxs-stacklayout-child>.fxs-blade{box-shadow:-5px 0 0 rgba(31,35,39,.2),5px 0 0 rgba(31,35,39,.2);}.fxs-journey-layout :first-child.fxs-stacklayout-child .fxs-blade{border-left-color:transparent;border-left-width:0;}.fxs-blade-locked.fxs-blade{background-color:#fff;}.fxs-bladesize-small.fxs-blade{width:315px;}.fxs-blade{border-left-color:rgba(143,156,168,.8);width:585px;position:relative;height:100%;background-color:#f1f2f3;overflow:hidden;-webkit-transition:width .2s ease-out;-moz-transition:width .2s ease-out;-o-transition:width .2s ease-out;transition:width .2s ease-out;border-left-style:solid;border-left-width:2px;}.fxs-blade .fxs-blade-header{padding-bottom:8px;background-color:#3e4045;min-height:117px;}.fxs-blade .fxs-blade-statusbar-wrapper{background-color:#32383f;}.fxs-blade .fxs-blade-statusbar::after{content:" ";}.fxs-blade .fxs-blade-statusbar{-webkit-transition:all .5s,color .5s;-moz-transition:all .5s,color .5s;-o-transition:all .5s,color .5s;transition:all .5s,color .5s;}.fxs-blade .fxs-blade-statusbar,.fxs-blade .fxs-blade-loading-status{padding:5px 0 5px 25px;font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-blade .fxs-blade-header .fxs-blade-actions{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;float:right;margin-right:22px;height:40px;}.fxs-blade .fxs-blade-header .fxs-blade-actions button{cursor:pointer;border:0;height:21px;width:21px;background-color:transparent;margin-top:4px;margin-left:6px;padding:0;opacity:.6;-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;}.fxs-blade .fxs-blade-header .fxs-blade-actions button img,.fxs-blade .fxs-blade-header .fxs-blade-actions button svg{height:21px;width:21px;}.msportal-fx-svg-placeholder{fill:#fff;}.msportalfx-svg-c01{fill:#fff;}.fxs-blade .fxs-blade-header .fxs-blade-title{padding:0 25px 2px 7px;margin-left:18px;}.fxs-blade .fxs-blade-header .fxs-blade-title h2::after,.fxs-blade .fxs-blade-header .fxs-blade-title h3::after{content:" ";}.fxs-blade .fxs-blade-header .fxs-blade-title h2{margin:0;font-family:"Segoe UI Light","Segoe WP Light","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:20px;line-height:28px;color:#fff;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-blade .fxs-blade-header .fxs-blade-title h3{margin:3px 0 2px 0;font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#758393;text-transform:uppercase;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;}.fxs-blade .fxs-blade-header .fxs-blade-commandBarContainer{margin:0 20px 0 15px;}.fxs-commandBar{display:none;}.fxs-commandBar-active.fxs-commandBar{display:block;}.fxs-commandBar>ul.fxs-commandBar-itemList{display:block;margin:4px 0 0;padding:0;list-style-type:none;overflow:hidden;height:48px;-webkit-transition:height .175s ease-in;-moz-transition:height .175s ease-in;-o-transition:height .175s ease-in;transition:height .175s ease-in;}.fxs-commandBar>ul.fxs-commandBar-itemList>li{border-right-color:#6c737a;float:left;margin-bottom:5px;border-right:1px solid transparent;}.fxs-commandBar .fxs-commandBar-form{display:block;position:absolute;z-index:200;width:100%;left:0;}.fxs-commandBar .fxs-commandBar-item{font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#fff;text-transform:uppercase;display:block;position:relative;padding:3px 10px 0;width:90px;height:48px;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color .07s ease-in;transition:background-color .07s ease-in;}.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-text{height:22px;-webkit-transition:opacity .07s ease-in;transition:opacity .07s ease-in;}.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-icon{position:absolute;bottom:2px;}.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-icon>svg,.fxs-commandBar .fxs-commandBar-item .fxs-commandBar-item-icon>img{height:18px;width:18px;}.fxs-commandBar .fxs-commandBar-item-expandList.fxs-commandBar-item::after{content:"…";position:absolute;bottom:9px;left:40px;font-size:23px;line-height:23px;}.fxs-commandBar .fxs-commandBar-item:hover{background-color:#1f2327;}.fxs-blade .fxs-blade-content{padding:25px;overflow-x:hidden;overflow-y:auto;-ms-overflow-style:-ms-autohiding-scrollbar;-ms-scrollbar-track-color:#d8d8ea;-ms-scrollbar-arrow-color:#758393;-ms-scrollbar-face-color:#63707e;}.fxs-bladesize-small.fxs-blade .fxs-blade-stacklayout{width:265px;}.fxs-blade .fxs-blade-content>div{height:100%;}.fxs-bladesize-medium.fxs-blade{width:585px;}.fxs-bladesize-medium.fxs-blade .fxs-blade-stacklayout{width:535px;}.fxs-blade .fxs-blade-stacklayout{width:535px;}.fxs-blade .fxs-blade-maximized-content{display:none;}.fxs-stacklayout-vertical.fxs-stacklayout>.fxs-stacklayout-child{display:block;}.fxs-lens{position:relative;height:100%;-moz-box-sizing:border-box;box-sizing:border-box;}.fxs-lens .fxs-lens-title{color:#3d4045;}.fxs-lens>.fxs-lens-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-family:"Segoe UI Light","Segoe WP Light","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:14px;line-height:32px;color:#3d4045;}.fxs-lens>.fxs-lens-layout{height:100%;}:last-child.fxs-tilesize-herowidefitheight.fxs-tile,:last-child.fxs-tilesize-fullwidthfitheight.fxs-tile{margin-bottom:0;}.fxs-tilesize-herowidefitheight.fxs-tile,.fxs-tilesize-fullwidthfitheight.fxs-tile{margin-bottom:5px;}.fxs-tilesize-fullwidthfitheight.fxs-tile{height:100%;width:100%;}.fxs-blade-locked.fxs-blade .fxs-part,.fxs-bladestyle-context.fxs-blade .fxs-part,.fxs-bladestyle-contextaction.fxs-blade .fxs-part,.fxs-bladestyle-help.fxs-blade .fxs-part{box-shadow:none;}.fxs-blade-locked.fxs-blade .fxs-part{padding:0;}.fxs-lens>.fxs-lens-drag-handle{position:absolute;z-index:52;top:-12px;left:-25px;bottom:12px;width:25px;background-color:#e9e9f3;opacity:0;-webkit-transition:opacity .25s ease-out;transition:opacity .25s ease-out;}.fxs-part .fxs-part-title h3{font-family:"Segoe UI Semibold","Segoe WP Semibold","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:10px;line-height:10px;color:#8f9ca8;text-transform:uppercase;margin-top:3px;}.azc-grid{position:relative;}.azc-grid:focus{outline:none !important;}.azc-grid table{width:100%;border:0;background-color:transparent;table-layout:fixed;border-spacing:0;border-collapse:collapse;}.azc-grid .azc-grid-container{overflow-x:auto;overflow-y:visible;}.fxs-part .fxs-part-content{font-family:"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;line-height:18px;color:#464f59;line-height:normal;position:relative;width:100%;height:100%;-moz-box-sizing:border-box;box-sizing:border-box;}.azc-control table{border-collapse:collapse;table-layout:fixed;}.azc-grid table caption{display:none;}.azc-grid-headerHidden .azc-grid table thead{display:none;}.azc-grid table thead tr th.azc-grid-unsortablecolumnheader{cursor:default;}.azc-grid table th:first-child{padding-left:0;}.azc-grid table thead tr th{text-transform:uppercase;}.azc-grid table thead tr th>a{padding:1px 0 1px 10px;}.azc-grid table thead tr th a{line-height:38px;display:block;text-decoration:none;color:inherit;position:relative;}a{color:#00bcf2;text-decoration:none;}.azc-grid table thead tr th a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.azc-grid table thead tr th>a .azc-grid-headerlabel{display:block;}.azc-grid-activateableRow table tbody tr[data-grid-row-activated='true'][aria-selected='true']{background-color:#c6edfa !important;}.azc-grid-selectableRow table tbody tr[aria-selected='true'] td{color:inherit !important;}.azc-grid table tbody:last-child tr:last-child td{border-bottom:1px solid #dcdfe2;}.azc-grid table tbody tr td{color:#3d3d3d;height:33px;border-top:1px solid #dcdfe2;border-bottom:1px solid #dcdfe2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.azc-control svg{overflow:hidden;}.msportalfx-gridcolumn-asseticon img,.msportalfx-gridcolumn-asseticon svg{margin-top:4px;height:21px;width:21px;}.msportalfx-svg-c04{fill:#7a7a7a;}.msportalfx-svg-c20{fill:#68217a;}.msportalfx-svg-c01{fill:#fff;}.k-grid-content table tbody tr{padding:1px 0 1px 10px;}.k-grid td{padding:0 .6em;}body{background-color:#2e80ab;background-image:linear-gradient(to bottom,#2e80ab 0%,#61b7da 100%);background-repeat:no-repeat;font-family:wf_segoe-ui_normal,"Segoe UI","Segoe WP",Tahoma,Arial,sans-serif;font-weight:400;font-size:small;-ms-scrollbar-arrow-color:#758393;-ms-scrollbar-face-color:#63707e;-ms-scrollbar-track-color:#dcdfe2;}a{color:#00bcf2;text-decoration:none;}img,a img,:link img,:visited img{border:0;}input.ng-invalid{border:1px solid #f00;}.collapsed{visibility:collapse;width:0;min-width:0;}

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

@@ -15,7 +15,7 @@ namespace angularportalazure {
             controller: function () {
                 this.$onInit = function () {
                     this.close = function () {
-                        //portalService.bladeArea.clearLastLevel();
+                        //portalService.areaBlades.clearLastLevel();
                     };
                 };
             },

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

@@ -15,7 +15,7 @@ namespace angularportalazure {
             controller: function () {
                 this.$onInit = function () {
                     this.close = function () {
-                        //portalService.bladeArea.clearLastLevel();
+                        //portalService.areaBlades.clearLastLevel();
                     };
                 };
             },

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

@@ -13,13 +13,13 @@ namespace angularportalazure {
     //        templateUrl: '/node_modules/@ardimedia/angular-portal-azure/directives/blade/blade.html',
     //        link: function (scope, element, attrs, controller) {
     //            //controller.close = function () {
-    //            //    portalService.bladeArea.clearLastLevel();
+    //            //    portalService.areaBlades.clearLastLevel();
     //            //};
     //        },
     //        controller: function () {
     //            this.$onInit = function () {
     //                this.close = function () {
-    //                    portalService.bladeArea.clearLastLevel();
+    //                    portalService.areaBlades.clearLastLevel();
     //                };
     //            };
     //        },
@@ -34,7 +34,7 @@ namespace angularportalazure {
         this.$onInit = function () {
             portalService.areaNotification.show();
             this.close = function () {
-                //portalService.bladeArea.clearLastLevel();
+                //portalService.areaBlades.clearLastLevel();
                 portalService.areaNotification.hide();
             };
         };

package/directives/blade/blade.html

@@ -222,7 +222,7 @@
             </div>
         </div>
     </header>
-    <div class="fxs-blade-content fxs-pannable" style="height:calc(100% - 125px);">
+    <div id="apa-blade-content" class="fxs-blade-content fxs-pannable" style="height:calc(100% - 125px);">
         <div class="fxs-blade-stacklayout fxs-stacklayout fxs-stacklayout-vertical" ng-style="$ctrl.vm.widthStackLayout">
             <div class="fxs-stacklayout-child">
                 <div class="fxs-lens">

package/directives/grid/grid.ts

@@ -11,7 +11,7 @@
     //        controller: function () {
     //            //this.$onInit = function () {
     //            //    this.close = function () {
-    //            //        portalService.bladeArea.clearLastLevel();
+    //            //        portalService.areaBlades.clearLastLevel();
     //            //    };
     //            //};
     //        },

package/directives/home/home.html

@@ -31,11 +31,11 @@
         </div>
         <div id="apa-blade-area" class="fxs-journey-target fxs-journey">
             <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
-                <div data-ng-repeat="blade in $ctrl.vm.portalService.bladeArea.blades track by $index" class="azureportalblade fxs-stacklayout-child" ng-include="blade.path"></div>
+                <div data-ng-repeat="blade in $ctrl.vm.portalService.areaBlades.blades track by $index" class="azureportalblade fxs-stacklayout-child" ng-include="blade.path"></div>
             </div>
         </div>
         <div id="apa-notification-area" style="display: none;">
-            asdf
+            <button ng-click="$ctrl.vm.portalService.areaNotification.hide();">CLOSE</button>
         </div>
     </div>
 </div>

package/directives/home/home.ts

@@ -16,9 +16,8 @@
     AngularPortalHomeController.$inject = ['$scope', 'angularportalazure.portalService'];
     function AngularPortalHomeController($scope: angular.IScope, portalService: angularportalazure.PortalService) {
         this.$onInit = function () {
-            console.log('initializse');
             portalService.areaNotification = new angularportalazure.AreaNotification($scope, portalService);
-            portalService.bladeArea = new angularportalazure.BladeArea($scope, portalService);
+            portalService.areaBlades = new angularportalazure.AreaBlades($scope, portalService);
         };
     }
 

package/directives/nav/nav.ts

@@ -18,7 +18,7 @@
     //        controller: function () {
     //            //this.$onInit = function () {
     //            //    this.close = function () {
-    //            //        portalService.bladeArea.clearLastLevel();
+    //            //        portalService.areaBlades.clearLastLevel();
     //            //    };
     //            //};
     //        },

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.141",
+  "version": "0.2.143",
   "main": "index.js",
   "typings": "apn.d.ts",
   "dependencies": {