Close fieldtype picker when clicked outside it

Gruntfile.js

@@ -58,6 +58,7 @@ module.exports = function(grunt) {
           'app/directives/archetypesubmitwatcher.js',
           'app/directives/archetypecustomview.js',
           'app/directives/archetypeLocalize.js',
+          'app/directives/archetypeclickoutside.js',
           'app/services/archetypeLocalizationService.js',
           'app/helpers/sampleLabelHelpers.js',
           'app/resources/archetypePropertyEditorResource.js',

app/directives/archetypeclickoutside.js

@@ -0,0 +1,29 @@
+angular.module("umbraco.directives")
+    .directive('archetypeClickOutside', function ($timeout, $parse) {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attrs, ctrl) {
+                var fn = $parse(attrs.archetypeClickOutside);
+
+                // add click event handler (delayed so we don't trigger the callback immediately if this directive itself was triggered by a mouse click)
+                $timeout(function () {
+                  $(document).on("click", mouseClick);
+                }, 500);
+
+                function mouseClick(event) {  
+                    if($(event.target).closest(element).length > 0) {
+                        return;
+                    }
+                    var callback = function () {
+                        fn(scope, { $event: event });
+                    };
+                    scope.$apply(callback);
+                }
+
+                // unbind event
+                scope.$on('$destroy', function () {
+                    $(document).off("click", mouseClick);
+                });
+            }
+        };
+    });

app/views/archetype.default.html

@@ -47,7 +47,7 @@
         </a>
     </div>
     <div class="usky-grid fieldsetPicker" ng-if="overlayMenu.show">
-        <div class="cell-tools-menu" ng-style="overlayMenu.style" delayed-mouseleave="closeFieldsetPicker()">
+        <div class="cell-tools-menu" ng-style="overlayMenu.style" delayed-mouseleave="closeFieldsetPicker()" archetype-click-outside="closeFieldsetPicker()">
             <h5>
                 <archetype-localize key="addFieldset">Add an item</archetype-localize>
             </h5>