@ardimedia/angular-portal-azure 0.2.2-beta

package/directives/dialog/style.scss

@@ -0,0 +1,442 @@
+/*#region LAYOUT*/
+
+@-webkit-keyframes ngdialog-fadeout {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ngdialog-fadeout {
+  0% {
+    opacity: 1;
+  }
+
+  100% { 
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes ngdialog-fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ngdialog-fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.ngdialog,
+.ngdialog *,
+.ngdialog *:before,
+.ngdialog *:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.ngdialog {
+  position: fixed;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.ngdialog-overlay {
+  position: fixed;
+  background: rgba(0, 0, 0, 0.4);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-backface-visibility: hidden;
+  -webkit-animation: ngdialog-fadein 0.5s;
+  animation: ngdialog-fadein 0.5s;
+}
+
+.ngdialog.ngdialog-closing .ngdialog-overlay {
+  -webkit-backface-visibility: hidden;
+  -webkit-animation: ngdialog-fadeout 0.5s;
+  animation: ngdialog-fadeout 0.5s;
+}
+
+.ngdialog-content {
+  background: white;
+  -webkit-backface-visibility: hidden;
+  -webkit-animation: ngdialog-fadein 0.5s;
+  animation: ngdialog-fadein 0.5s;
+}
+
+.ngdialog.ngdialog-closing .ngdialog-content {
+  -webkit-backface-visibility: hidden;
+  -webkit-animation: ngdialog-fadeout 0.5s;
+  animation: ngdialog-fadeout 0.5s;
+}
+
+.ngdialog-close:before {
+  font-family: 'Helvetica', Arial, sans-serif;
+  content: '\00D7';
+  cursor: pointer;
+}
+
+body.ngdialog-open {
+  overflow: hidden;
+}
+
+/*#endregion*/
+
+/*#region LAYOUT DEFAULT*/
+
+@-webkit-keyframes ngdialog-flyin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes ngdialog-flyin {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    transform: translateY(-40px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes ngdialog-flyout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    transform: translateY(-40px);
+  }
+}
+
+@keyframes ngdialog-flyout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    transform: translateY(-40px);
+  }
+}
+
+.ngdialog.ngdialog-theme-default {
+  padding-bottom: 160px;
+  padding-top: 160px;
+}
+
+.ngdialog.ngdialog-theme-default.ngdialog-closing .ngdialog-content {
+  -webkit-animation: ngdialog-flyout .5s;
+  animation: ngdialog-flyout .5s;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-content {
+  -webkit-animation: ngdialog-flyin .5s;
+  animation: ngdialog-flyin .5s;
+  background: #f0f0f0;
+  border-radius: 5px;
+  color: #444;
+  font-family: 'Helvetica',sans-serif;
+  font-size: 1.1em;
+  line-height: 1.5em;
+  margin: 0 auto;
+  max-width: 100%;
+  padding: 1em;
+  position: relative;
+  width: 450px;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-close {
+  border-radius: 5px;
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-close:before {
+  background: transparent;
+  border-radius: 3px;
+  color: #bbb;
+  content: '\00D7';
+  font-size: 26px;
+  font-weight: 400;
+  height: 30px;
+  line-height: 26px;
+  position: absolute;
+  right: 3px;
+  text-align: center;
+  top: 3px;
+  width: 30px;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-close:hover:before,
+.ngdialog.ngdialog-theme-default .ngdialog-close:active:before {
+  color: #777;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-message {
+  margin-bottom: .5em;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-input {
+  margin-bottom: 1em;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-input textarea,
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"],
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"],
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"],
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"] {
+  background: #fff;
+  border: 0;
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0 0 .25em;
+  min-height: 2.5em;
+  padding: .25em .67em;
+  width: 100%;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-input textarea:focus,
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"]:focus,
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"]:focus,
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"]:focus,
+.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"]:focus {
+  -webkit-box-shadow: inset 0 0 0 2px #8dbdf1;
+  box-shadow: inset 0 0 0 2px #8dbdf1;
+  outline: none;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-buttons {
+  *zoom: 1;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-buttons:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-button {
+  border: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  float: right;
+  font-family: inherit;
+  font-size: .8em;
+  letter-spacing: .1em;
+  line-height: 1em;
+  margin: 0 0 0 .5em;
+  padding: .75em 2em;
+  text-transform: uppercase;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-button:focus {
+  -webkit-animation: ngdialog-pulse 1.1s infinite;
+  animation: ngdialog-pulse 1.1s infinite;
+  outline: none;
+}
+
+@media (max-width: 568px) {
+  .ngdialog.ngdialog-theme-default .ngdialog-button:focus {
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary {
+  background: #3288e6;
+  color: #fff;
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-secondary {
+  background: #e0e0e0;
+  color: #777;
+}
+
+/*#endregion*/
+
+/*#region LAYOUT PLAIN*/
+
+.ngdialog.ngdialog-theme-plain {
+  padding-bottom: 160px;
+  padding-top: 160px;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-content {
+  background: #fff;
+  color: #444;
+  font-family: 'Helvetica Neue',sans-serif;
+  font-size: 1.1em;
+  line-height: 1.5em;
+  margin: 0 auto;
+  max-width: 100%;
+  padding: 1em;
+  position: relative;
+  width: 450px;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-content h1,
+.ngdialog.ngdialog-theme-plain .ngdialog-content h2,
+.ngdialog.ngdialog-theme-plain .ngdialog-content h3,
+.ngdialog.ngdialog-theme-plain .ngdialog-content h4,
+.ngdialog.ngdialog-theme-plain .ngdialog-content h5,
+.ngdialog.ngdialog-theme-plain .ngdialog-content h6,
+.ngdialog.ngdialog-theme-plain .ngdialog-content p,
+.ngdialog.ngdialog-theme-plain .ngdialog-content ul,
+.ngdialog.ngdialog-theme-plain .ngdialog-content li {
+  color: inherit;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-close {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-close:before {
+  background: transparent;
+  color: #bbb;
+  content: "\00D7";
+  font-size: 26px;
+  font-weight: 400;
+  height: 30px;
+  line-height: 26px;
+  position: absolute;
+  right: 3px;
+  text-align: center;
+  top: 3px;
+  width: 30px;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-close:hover:before,
+.ngdialog.ngdialog-theme-plain .ngdialog-close:active:before {
+  color: #777;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-message {
+  margin-bottom: .5em;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-input {
+  margin-bottom: 1em;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-input textarea,
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="text"],
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="password"],
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="email"],
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="url"] {
+  background: #f0f0f0;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0 0 .25em;
+  min-height: 2.5em;
+  padding: .25em .67em;
+  width: 100%;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-input textarea:focus,
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="text"]:focus,
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="password"]:focus,
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="email"]:focus,
+.ngdialog.ngdialog-theme-plain .ngdialog-input input[type="url"]:focus {
+  -webkit-box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);
+  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);
+  outline: none;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-buttons:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-button {
+  border: 0;
+  cursor: pointer;
+  float: right;
+  font-family: inherit;
+  font-size: .8em;
+  letter-spacing: .1em;
+  line-height: 1em;
+  margin: 0 0 0 .5em;
+  padding: .75em 2em;
+  text-transform: uppercase;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-button:focus {
+  -webkit-animation: ngdialog-pulse 1.1s infinite;
+  animation: ngdialog-pulse 1.1s infinite;
+  outline: none;
+}
+
+@media (max-width: 568px) {
+  .ngdialog.ngdialog-theme-plain .ngdialog-button:focus {
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-button.ngdialog-button-primary {
+  background: #3288e6;
+  color: #fff;
+}
+
+.ngdialog.ngdialog-theme-plain .ngdialog-button.ngdialog-button-secondary {
+  background: #e0e0e0;
+  color: #777;
+}
+
+/*#endregion*/

package/directives/dirtyflag/dirtyflag.ts

@@ -0,0 +1,47 @@
+
+// http://blogs.msdn.com/b/laurieatkinson/archive/2014/08/23/implementing-a-save-warning-in-an-angular-spa.aspx
+
+//'use strict';
+//module App.Directives {
+
+//    // USE:
+//    // <form name="personForm" azureportal-dirty-flag>
+
+//    interface IDirtyFlag extends ng.IDirective {
+//    }
+
+//    interface IDirtyFlagScope extends ng.IScope {
+//        personForm: ng.IFormController;
+//        vm: any;
+//    }
+
+//    class DirtyFlag implements IDirtyFlag {
+//        static directiveId: string = 'azureportalDirtyFlag'
+//        restrict: string = 'A';
+//        personManager: App.Services.IpersonManager;
+
+//        constructor(personManager) {
+//            this.personManager = personManager;
+//        }
+
+//        link = (scope: IDirtyFlagScope, element, attrs) => {
+//            var self = this;
+//            // When the directive is first invoked, check if the stored dirty value is true and 
+//            // if so set the $dirty flag on the form.
+//            if (scope.vm.person && scope.vm.person.isDirty) {
+//                scope.personForm.$dirty = true;
+//            }
+
+//            // When the user navigates away from this view, check the value of the $dirty flag on this form. 
+//            // If it is dirty(indicating unsaved changes), then store the id of the current person as dirty 
+//            // using a service named personManger.
+//            scope.$on('$locationChangeStart'), function () {
+//                if (scope.personForm.$dirty) {
+//                    self.personManager.markpersonAsDirty(scope.vm.person.personId);
+//                }
+//            });
+//        }
+//    }
+
+//    app.directive(DirtyFlag.directiveId, ['personmanager', (pm) => new DirtyFlag(pm)]);
+//}

package/directives/home/home.html

@@ -0,0 +1,39 @@
+<div class="fxs-portal">
+    <div class="fxs-portal-top-bar fxs-portal-appbar"></div>
+    <div id="azureportalscroll" class="fxs-portal-content fxs-panorama">
+
+        <div class="fxs-panorama-homearea" ng-class="{collapsed: !vm.portalService.panorama.startboard.tiles.showTiles}" ng-show="vm.portalService.panorama.isVisible">
+            <header class="fxs-pannable" ng-class="{collapsed: !vm.portalService.panorama.startboard.tiles.showTiles}">
+                <h1 class="fxs-panorama-title fxs-pannable">{{vm.title}}</h1>
+                <div class="fxs-avatarmenu-target fxs-avatarmenu" ng-class="{collapsed: !vm.portalService.panorama.startboard.tiles.showTiles}">
+                    <a class="fxs-avatarmenu-header" href="/Account/Manage">
+                        <img alt="" src="/node_modules/angular-portal-azure/images/avatar.jpg" />
+                        <div class="fxs-avatarmenu-username">{{vm.user.name}}</div>
+                        <div class="fxs-avatarmenu-emailaddresse">{{vm.user.emailaddress}}</div>
+                    </a>
+                </div>
+            </header>
+            <div class="fxs-startboard-target fxs-startboard fx-rightClick" ng-class="{collapsed: !vm.portalService.panorama.startboard.tiles.showTiles}">
+                <div class="fxs-startboard-layout fxs-flowlayout">
+                    <div class="fxs-flowlayout-childcontainer">
+                        <section data-ng-repeat="tile in vm.tiles track by $index" class="fxs-tile fx-rightClick fxs-flowlayout-element" data-ng-class="{'fxs-tilesize-normal':tile.size=='normal', 'fxs-tilesize-mini':tile.size=='mini', 'fxs-tilesize-herowide':tile.size=='herowide'}" data-ng-style="{'left': tile.left, 'top': tile.top}">
+                            <div class="fxs-part fxs-part-clickable" ng-click="vm.navigateTo(tile.bladePath);tile.clicked();" style="cursor:pointer;">
+                                <header class="fxs-part-title">
+                                    <h2 class="msportalfx-tooltip-overflow">{{tile.title}}</h2>
+                                    <h3 class="msportalfx-tooltip-overflow">{{tile.subTitle}}</h3>
+                                </header>
+                                <section class="fxs-part-content css-scope-HubsExtension"></section>
+                            </div>
+                            <div class="fxs-title-overlay"></div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="fxs-journey-target fxs-journey">
+            <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
+                <div data-ng-repeat="blade in vm.blades track by $index" class="azureportalblade fxs-stacklayout-child" ng-include="blade.path"></div>
+            </div>
+        </div>
+    </div>
+</div>

package/directives/home/home.ts

@@ -0,0 +1,12 @@
+namespace angularportalazure {
+    function azurePortalHome($window, $interpolate) {
+        return {
+            scope: { vm: '=options' },
+            templateUrl: '/node_modules/angular-portal-azure/directives/home/home.html',
+            link: function (scope, element, attrs, controller) {
+            }
+        };
+    }
+
+    angular.module('angularportalazure').directive('azurePortalHome', ['$window', '$interpolate', azurePortalHome]);
+}

package/directives/nav/nav.html

@@ -0,0 +1,27 @@
+<table class="azc-grid-full azc-grid-multiselectable" aria-readonly="true">
+    <caption data-bind="text: data.summary"></caption>
+    <colgroup>
+        <col class="col0" style="width: 41px;">
+        <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">
+            <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">
+                        <svg data-ng-show="item.title" xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false">
+                            <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4" />
+                            <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5" />
+                            <path class="msportalfx-svg-c20" d="M 41.2 14.7 L 41.2 14.7 v -0.3 c 0 -7.7 -6.6 -14.1 -14.7 -14.2 c -0.2 -0.3 -4.8 0.1 -4.8 0.1 l 0 0 c -7.3 0.9 -13 7 -13 14.1 c 0 0.2 -0.8 5.8 4.9 10.5 c 2.6 2.3 5.3 8.5 5.7 10.3 l 0.3 0.6 h 10.6 l 0.3 -0.6 c 0.4 -1.8 3.2 -8 5.7 -10.2 C 41.9 20.2 41.2 14.9 41.2 14.7 Z" />
+                            <path class="msportalfx-svg-c01" d="M 30.4 18.1 l -1.7 10.6 h -2 V 18.2 l 0.1 -0.2 c 3.8 0 3.3 -3.5 3.3 -3.5 H 19.8 v 0.3 c 0 0.8 0.3 3.3 3.5 3.3 v 10.6 h -2 l -0.5 -2.5 l -1.3 -8.1 c -2.3 0 -3 -1.5 -3.3 -2.6 c 0 -0.4 0 -0.9 0 -1.4 c 0 -2.8 3.2 -3.1 3.2 -3.1 h 11 c 0 0 3.5 0.4 3.5 3.5 C 33.8 14.5 33.9 18.1 30.4 18.1 Z" />
+                            <path class="msportalfx-svg-c01" opacity="0.15" enable-background="new " d="M 41.2 16.4 c 0.1 -1 0 -1.7 0 -1.8 l 0 0 v -0.3 c 0 -7.7 -6.6 -14.1 -14.7 -14.2 c -0.2 -0.3 -4.8 0.1 -4.8 0.1 l 0 0 c -7.3 0.9 -13 7 -13 14.1 c 0 0.1 -0.1 0.9 0 2.1 H 41.2 Z" />
+                        </svg>
+                    </div>
+                </div>
+            </td>
+            <td tabindex="0" role="gridcell" data-activatable="true" data-grid-cell-activated="false">
+                <a ng-href="{{item.hrefPath}}" target="_blank" style="color:black">{{item.title}}</a>
+            </td>
+        </tr>
+    </tbody>
+</table>

package/directives/nav/nav.ts

@@ -0,0 +1,18 @@
+namespace angularportalazure {
+    function nav($window) {
+        return {
+            scope: { vm: '=viewModel' },
+            templateUrl: '/node_modules/angular-portal-azure/directives/nav/nav.html',
+            link: function (scope, element, attrs, controller) {
+                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' }; }
+                });
+            }
+        };
+    }
+
+    angular.module('angularportalazure').directive('nav', ['$window', nav]);
+}

package/directives/navgrid/navgrid.html

@@ -0,0 +1,27 @@
+<table class="azc-grid-full azc-grid-multiselectable" aria-readonly="true">
+    <caption data-bind="text: data.summary"></caption>
+    <colgroup>
+        <col class="col0" style="width: 41px;">
+        <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">
+            <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">
+                        <svg data-ng-show="item.title" xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false">
+                            <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4" />
+                            <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5" />
+                            <path class="msportalfx-svg-c20" d="M 41.2 14.7 L 41.2 14.7 v -0.3 c 0 -7.7 -6.6 -14.1 -14.7 -14.2 c -0.2 -0.3 -4.8 0.1 -4.8 0.1 l 0 0 c -7.3 0.9 -13 7 -13 14.1 c 0 0.2 -0.8 5.8 4.9 10.5 c 2.6 2.3 5.3 8.5 5.7 10.3 l 0.3 0.6 h 10.6 l 0.3 -0.6 c 0.4 -1.8 3.2 -8 5.7 -10.2 C 41.9 20.2 41.2 14.9 41.2 14.7 Z" />
+                            <path class="msportalfx-svg-c01" d="M 30.4 18.1 l -1.7 10.6 h -2 V 18.2 l 0.1 -0.2 c 3.8 0 3.3 -3.5 3.3 -3.5 H 19.8 v 0.3 c 0 0.8 0.3 3.3 3.5 3.3 v 10.6 h -2 l -0.5 -2.5 l -1.3 -8.1 c -2.3 0 -3 -1.5 -3.3 -2.6 c 0 -0.4 0 -0.9 0 -1.4 c 0 -2.8 3.2 -3.1 3.2 -3.1 h 11 c 0 0 3.5 0.4 3.5 3.5 C 33.8 14.5 33.9 18.1 30.4 18.1 Z" />
+                            <path class="msportalfx-svg-c01" opacity="0.15" enable-background="new " d="M 41.2 16.4 c 0.1 -1 0 -1.7 0 -1.8 l 0 0 v -0.3 c 0 -7.7 -6.6 -14.1 -14.7 -14.2 c -0.2 -0.3 -4.8 0.1 -4.8 0.1 l 0 0 c -7.3 0.9 -13 7 -13 14.1 c 0 0.1 -0.1 0.9 0 2.1 H 41.2 Z" />
+                        </svg>
+                    </div>
+                </div>
+            </td>
+            <td tabindex="0" role="gridcell" data-activatable="true" data-grid-cell-activated="false">
+                <a ng-href="{{item.hrefPath}}" target="_blank" style="color:black">{{item.title}}</a>
+            </td>
+        </tr>
+    </tbody>
+</table>

package/directives/navgrid/navgrid.ts

@@ -0,0 +1,18 @@
+namespace angularportalazure {
+    function navGrid($window) {
+        return {
+            scope: { vm: '=viewModel' },
+            templateUrl: '/node_modules/angular-portal-azure/directives/navgrid/navgrid.html',
+            link: function (scope, element, attrs, controller) {
+                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' }; }
+                });
+            }
+        };
+    }
+
+    angular.module('angularportalazure').directive('navGrid', ['$window', navGrid]);
+}

package/index.js

@@ -0,0 +1,14 @@
+require('./apn');
+module.exports = angularportalazure;
+
+// TODO: 2016-10-25/hp: maybe we should use someting like this and change our code from [global] to [umd]
+/// https://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html
+(function (root, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(["libName"], factory);
+    } else if (typeof module === "object" && module.exports) {
+        module.exports = factory(require("libName"));
+    } else {
+        root.returnExports = factory(root.libName);
+    }
+}(this, function (b) { console.log(b); }))

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@ardimedia/angular-portal-azure",
+  "description": "Angular Portal Azure - GUI Framework.",
+  "author": "Ardimedia Anstalt <info@ardimedia.com> (http://www.ardimedia.com)",
+  "version": "0.2.2-beta",
+  "main": "index.js",
+  "typings": "apn.d.ts",
+  "dependencies": {
+    "@types/angular": "^1.5.16",
+    "@types/angular-resource": "^1.5.6",
+    "@types/ng-dialog": "0.0.31",
+    "angular": "^1.5.8",
+    "angular-resource": "^1.5.8",
+    "ng-dialog": "^0.6.4"
+  },
+  "devDependencies": {
+    "typescript": "^2.0.6"
+  }
+}