From 67b50ed567b993c17ed2f9e50c92dccf34ea2e7f Mon Sep 17 00:00:00 2001
From: Duncan Lock <dlock@phemi.com>
Date: Wed, 20 May 2015 18:41:05 -0700
Subject: [PATCH 1/2] Updated demo index.html to source everything from
 bower_components

Was previously getting components from a mixture of locations - CDNs,
github and the local bower_components - despite everything being available
locally in bower_components. I updated it to source everything from the local
bower_components folder

This is more consistent and ensures that the demo is using the
correct versions of all components, rather than a mixture.
---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 398a5cb..4253528 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <title>angular-form-builder</title>
-    <link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
+    <link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
     <link type="text/css" rel="stylesheet" href="example/site.css"/>
     <link type="text/css" rel="stylesheet" href="dist/angular-form-builder.css"/>
     <link type="text/css" rel="stylesheet" href="bower_components/signature-pad/assets/jquery.signaturepad.css">
@@ -12,13 +12,13 @@
     <link type="text/css" rel="stylesheet" href="bower_components/summernote/dist/summernote.css">
     <link type="text/css" rel="stylesheet" href="bower_components/summernote/dist/summernote-bs3.css">
     <link type="text/css" rel="stylesheet" href="bower_components/iCheck/skins/square/square.css">
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
-    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="//code.angularjs.org/1.2.20/angular.min.js"></script>
+    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
     <script type="text/javascript" src="dist/angular-form-builder.js"></script>
     <script type="text/javascript" src="dist/angular-form-builder-components.js"></script>
-    <script type="text/javascript" src="//kelp404.github.io/angular-validator/dist/angular-validator.min.js"></script>
-    <script type="text/javascript" src="//kelp404.github.io/angular-validator/dist/angular-validator-rules.min.js"></script>
+    <script type="text/javascript" src="bower_components/angular-validator/dist/angular-validator.min.js"></script>
+    <script type="text/javascript" src="bower_components/angular-validator/dist/angular-validator-rules.min.js"></script>
     <script type="text/javascript" src="bower_components/signature-pad/jquery.signaturepad.min.js"></script>
     <script type="text/javascript" src="bower_components/signature-pad/assets/json2.min.js"></script>
     <script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

From 0f2c78d3201d33464f86e97ce2515f8cb63e2099 Mon Sep 17 00:00:00 2001
From: Duncan Lock <dlock@phemi.com>
Date: Wed, 20 May 2015 20:42:48 -0700
Subject: [PATCH 2/2] Modularize & improve the popover templates

- Move the Cancel, Delete & Save buttons out into a variable, and
  use this in the templates, instead of duplicating this in every template.
- Improve the markup & style of the buttons; use words instead of icons for
  Saev & Delete - simpler, cleaner and larger tap/click targets.
- Add an 'x' button at the top right to close/cancel the popover; keep
  Cancel button for now.
- Improve the scss for the buttons & popovers in general; min-height for
  the contents, to minimize jumping around; tidy up & improve margins.
---
 components/default-components.coffee    | 117 ++++++++----------------
 dist/angular-form-builder-components.js |  26 ++++--
 dist/angular-form-builder.css           |   2 +-
 src/angular-form-builder.scss           |  20 ++++
 4 files changed, 77 insertions(+), 88 deletions(-)

diff --git a/components/default-components.coffee b/components/default-components.coffee
index 8cd1438..81a5aae 100644
--- a/components/default-components.coffee
+++ b/components/default-components.coffee
@@ -1,3 +1,20 @@
+popoverButtons =
+    """
+    <div class="form-group clearfix last">
+        <hr/>
+        <button type="button" ng-click="popover.cancel($event)" class="btn btn-sm btn-default pull-left">Cancel</button>
+
+        <button type="button" ng-click="popover.remove($event)" class="btn btn-sm btn-danger pull-left">Delete</button>
+
+        <button type="submit" ng-click="popover.save($event)" class="btn btn-sm btn-primary pull-right">Save</button>
+    </div>
+    """
+
+popoverCloseX =
+    """
+    <button type="button" class="close" ng-click="popover.cancel($event)" aria-label="Close" title="Close"><span aria-hidden="true">&times;</span></button>
+    """
+
 angular.module 'builder.components', ['builder', 'validator.rules']
 
 .config ['$builderProvider', ($builderProvider) ->
@@ -64,12 +81,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                     </div>
                 </div>
 
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
+                #{popoverButtons}
             </form>
             """
 
@@ -106,6 +118,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             """
         popoverTemplate:
             """
+            #{popoverCloseX}
             <form>
 
                 <div role="tabpanel">
@@ -200,13 +213,10 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                         </div>
 
                 </div>
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
+
+
             </form>
+            #{popoverButtons}
             """
 
 
@@ -237,10 +247,9 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             """
         popoverTemplate:
             """
+            #{popoverCloseX}
             <form>
-
                 <div role="tabpanel">
-
                     <!-- Nav tabs -->
                     <ul class="nav nav-justified nav-tabs" role="tablist" style="margin-left:-10px">
                         <li role="presentation" class="active"><a href="{{'#properties' + date + index}}" aria-controls="{{'properties' + date + index}}" role="tab" data-toggle="tab">Properties</a></li>
@@ -344,14 +353,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
 
                     </div>
                 </div>
-
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
             </form>
+            #{popoverButtons}
             """
 
     # ----------------------------------------
@@ -388,6 +391,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             """
         popoverTemplate:
             """
+            #{popoverCloseX}
             <form>
 
                 <div role="tabpanel">
@@ -502,14 +506,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                         </div>
                     </div>
                 </div>
-
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
             </form>
+            #{popoverButtons}
             """
 
     # ----------------------------------------
@@ -537,6 +535,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             """
         popoverTemplate:
             """
+            #{popoverCloseX}
             <form>
 
                 <div role="tabpanel">
@@ -625,14 +624,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                         </div>
                     </div>
                 </div>
-
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
             </form>
+            #{popoverButtons}
             """
 
     # ----------------------------------------
@@ -669,6 +662,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             """
         popoverTemplate:
             """
+            #{popoverCloseX}
             <form>
 
                 <div role="tabpanel">
@@ -758,14 +752,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                         </div>
                     </div>
                 </div>
-
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
             </form>
+            #{popoverButtons}
             """
 
     # ----------------------------------------
@@ -799,6 +787,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             """
         popoverTemplate:
             """
+            #{popoverCloseX}
             <form>
 
                 <div role="tabpanel">
@@ -889,14 +878,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                         </div>
                     </div>
                 </div>
-
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
             </form>
+            #{popoverButtons}
             """
 
     # ----------------------------------------
@@ -934,6 +917,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             """
         popoverTemplate:
             """
+            #{popoverCloseX}
             <form>
 
                 <div role="tabpanel">
@@ -1032,14 +1016,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                         </div>
                     </div>
                 </div>
-
-                <hr/>
-                <div class='form-group'>
-                    <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                    <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                    <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                </div>
             </form>
+            #{popoverButtons}
             """
 
         # ----------------------------------------
@@ -1073,6 +1051,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                 """
             popoverTemplate:
                 """
+                #{popoverCloseX}
                 <form>
 
                     <div role="tabpanel">
@@ -1162,14 +1141,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                         </div>
 
                     </div>
-
-                    <hr/>
-                    <div class='form-group'>
-                        <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                        <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                        <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                    </div>
                 </form>
+                #{popoverButtons}
                 """
 
 
@@ -1201,6 +1174,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             #         """
             #     popoverTemplate:
             #         """
+            #         #{popoverCloseX}
             #         <form>
             #
             #             <div role="tabpanel">
@@ -1257,14 +1231,8 @@ angular.module 'builder.components', ['builder', 'validator.rules']
             #                     </div>
             #                 </div>
             #             </div>
-            #
-            #             <hr/>
-            #             <div class='form-group'>
-            #                 <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-            #                 <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-            #                 <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-            #             </div>
             #         </form>
+            #         #{popoverButtons}
             #         """
 
             # ----------------------------------------
@@ -1294,6 +1262,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                     """
                 popoverTemplate:
                     """
+                    #{popoverCloseX}
                     <form>
 
                         <div role="tabpanel">
@@ -1383,13 +1352,7 @@ angular.module 'builder.components', ['builder', 'validator.rules']
                             <label class='control-label'>Validation</label>
                             <select ng-model="$parent.validation" class='form-control' ng-options="option.rule as option.label for option in validationOptions"></select>
                         </div>
-
-                        <hr/>
-                        <div class='form-group'>
-                            <input type='button' ng-click="popover.remove($event)" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>
-                            <input type='submit' ng-click="popover.save($event)" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>
-                            <input type='button' ng-click="popover.cancel($event)" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>
-                        </div>
                     </form>
+                    #{popoverButtons}
                     """
 ]
diff --git a/dist/angular-form-builder-components.js b/dist/angular-form-builder-components.js
index 5172607..210fc66 100644
--- a/dist/angular-form-builder-components.js
+++ b/dist/angular-form-builder-components.js
@@ -1,4 +1,10 @@
 (function() {
+  var popoverButtons, popoverCloseX;
+
+  popoverButtons = "<div class=\"form-group clearfix last\">\n    <hr/>\n    <button type=\"button\" ng-click=\"popover.cancel($event)\" class=\"btn btn-sm btn-default pull-left\">Cancel</button>\n\n    <button type=\"button\" ng-click=\"popover.remove($event)\" class=\"btn btn-sm btn-danger pull-left\">Delete</button>\n\n    <button type=\"submit\" ng-click=\"popover.save($event)\" class=\"btn btn-sm btn-primary pull-right\">Save</button>\n</div>";
+
+  popoverCloseX = "<button type=\"button\" class=\"close\" ng-click=\"popover.cancel($event)\" aria-label=\"Close\" title=\"Close\"><span aria-hidden=\"true\">&times;</span></button>";
+
   angular.module('builder.components', ['builder', 'validator.rules']).config([
     '$builderProvider', function($builderProvider) {
       $builderProvider.registerComponent('message', {
@@ -6,7 +12,7 @@
         placeholder: 'Rich Content',
         label: 'Rich Content',
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n  <div class=\"form-group text-center\">\n      <rich-text><strong>Text Message</strong></rich-text>\n    </div>\n  <div id=\"dashedline\" class=\"hr-line-dashed\"></div>\n</div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\" class=\"disabled\"><a>Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\" class=\"disabled\"><a>Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Placeholder</label>\n                    <input type='text' ng-model=\"placeholder\" class='form-control'/>\n                </div>\n                <div class=\"form-group m-t\">\n                  <a class=\"btn btn-success btn-block\" ng-click=\"openSummerNote()\">Open Rich Text Editor</a>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'points' + date + index}}\">\n            </div>\n        </div>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\" class=\"disabled\"><a>Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\" class=\"disabled\"><a>Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Placeholder</label>\n                    <input type='text' ng-model=\"placeholder\" class='form-control'/>\n                </div>\n                <div class=\"form-group m-t\">\n                  <a class=\"btn btn-success btn-block\" ng-click=\"openSummerNote()\">Open Rich Text Editor</a>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'points' + date + index}}\">\n            </div>\n        </div>\n    </div>\n\n    " + popoverButtons + "\n</form>"
       });
       $builderProvider.registerComponent('email', {
         group: 'Basic',
@@ -16,7 +22,7 @@
         required: false,
         readOnly: false,
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n      <label class=\"col-sm-2 control-label\" for=\"{{formName+index}}\" ng-class=\"{'fb-required':required}\">{{label}}\n      </label>\n        <div class=\"col-sm-10\">\n            <div class=\"input-group m-b\">\n             <span class=\"input-group-addon\">@</span>\n             <input ng-readonly=\"readOnly\" type=\"email\" ng-model=\"inputText.email\" placeholder=\"Email\" class=\"form-control custom-m-b\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\">\n           </div>\n           <div class=\"input-group m-b\">\n             <span ng-show=\"requireConfirmation\" class=\"input-group-addon\">@</span>\n             <input ng-readonly=\"readOnly\" type=\"email\" ng-show=\"requireConfirmation\" ng-model=\"inputText.confirmation\" placeholder=\"Confirm email\" class=\"form-control m-b\" id=\"confirmEmail\">\n           </div>\n        </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n      <small ng-show=\"description\" class='help-block text-muted custom-small'>{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"requireConfirmation\" />\n                        Require Email Confirmation</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n\n    </div>\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"requireConfirmation\" />\n                        Require Email Confirmation</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n\n    </div>\n\n\n</form>\n" + popoverButtons
       });
       $builderProvider.registerComponent('date', {
         group: 'Basic',
@@ -26,7 +32,7 @@
         disableWeekends: false,
         readOnly: false,
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n      <label class=\"col-sm-2 control-label\" for=\"{{formName+index}}\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n      <div class=\"col-sm-10\">\n        <ui-date weekends=\"{{disableWeekends}}\"></ui-date>\n      </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n      <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"disableWeekends\" />\n                        Disable Weekends</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n                <div class=\"form-group\">\n                    <div class=\"row\">\n                        <div class=\"col-sm-3\">\n                            Date is in next\n                        </div>\n                        <div class=\"col-sm-7\">\n                            <select class=\"form-control\" ng-model=\"nextXDays\" ng-options=\"value for value in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]\"></select>\n                        </div>\n                        <div class=\"col-sm-2\">\n                            days\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n\n        </div>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n    <div role=\"tabpanel\">\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"disableWeekends\" />\n                        Disable Weekends</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n                <div class=\"form-group\">\n                    <div class=\"row\">\n                        <div class=\"col-sm-3\">\n                            Date is in next\n                        </div>\n                        <div class=\"col-sm-7\">\n                            <select class=\"form-control\" ng-model=\"nextXDays\" ng-options=\"value for value in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]\"></select>\n                        </div>\n                        <div class=\"col-sm-2\">\n                            days\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n\n        </div>\n    </div>\n</form>\n" + popoverButtons
       });
       $builderProvider.registerComponent('text', {
         group: 'Basic',
@@ -52,7 +58,7 @@
           }
         ],
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n    <label class=\"col-sm-2 control-label\" for=\"{{formName+index}}\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n    <div class=\"col-sm-10\">\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\" class=\"form-control m-b\" placeholder=\"{{placeholder}}\"/>\n    </div>\n  <div class=\"col-sm-10 col-sm-offset-2\">\n    <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n  </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Placeholder</label>\n                    <input type='text' ng-model=\"placeholder\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n                <div class=\"row\" ng-show=\"validation==='[text]'\">\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"minLength\" placeholder=\"Min Length\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"maxLength\" placeholder=\"Max Length\">\n                    </div>\n                </div>\n                <div class=\"row\" ng-show=\"validation==='[numberRange]'\">\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"minRange\" placeholder=\"Min Range\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"maxRange\" placeholder=\"Max Range\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"minLength\" placeholder=\"Min Length\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"maxLength\" placeholder=\"Max Length\">\n                    </div>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Placeholder</label>\n                    <input type='text' ng-model=\"placeholder\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n                <div class=\"row\" ng-show=\"validation==='[text]'\">\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"minLength\" placeholder=\"Min Length\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"maxLength\" placeholder=\"Max Length\">\n                    </div>\n                </div>\n                <div class=\"row\" ng-show=\"validation==='[numberRange]'\">\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"minRange\" placeholder=\"Min Range\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"maxRange\" placeholder=\"Max Range\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"minLength\" placeholder=\"Min Length\">\n                    </div>\n                    <div class=\"form-group col-sm-6\">\n                        <input type=\"text\" class=\"form-control\" ng-model=\"maxLength\" placeholder=\"Max Length\">\n                    </div>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n</form>\n" + popoverButtons
       });
       $builderProvider.registerComponent('area', {
         group: 'Basic',
@@ -62,7 +68,7 @@
         required: false,
         readOnly: false,
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n    <label class=\"col-sm-2 control-label\" for=\"{{formName+index}}\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n    <div class=\"col-sm-10\">\n        <textarea type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\" class=\"form-control m-b\" rows='6' placeholder=\"{{placeholder}}\"/>\n    </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n      <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Placeholder</label>\n                    <input type='text' ng-model=\"placeholder\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Placeholder</label>\n                    <input type='text' ng-model=\"placeholder\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n</form>\n" + popoverButtons
       });
       $builderProvider.registerComponent('checkbox', {
         group: 'Choice',
@@ -74,7 +80,7 @@
         arrayToText: true,
         readOnly: false,
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n    <label for=\"{{formName+index}}\" class=\"col-sm-2 control-label\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n    <div class=\"col-sm-10\">\n        <input type='hidden' ng-model=\"inputText\" validator-required=\"{{required}}\" validator-group=\"{{formName}}\"/>\n        <div class='checkbox' ng-repeat=\"item in options track by $index\">\n          <label>\n            <input checked=\"\" ng-disabled=\"readOnly\" type='checkbox' check-repeat ng-model=\"inputArray[$index]\" ng-value='item'/>\n                <i></i>\n                {{item}}\n          </label>\n        </div>\n    </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n      <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Options</label>\n                    <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required\n                    </label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Options</label>\n                    <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required\n                    </label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n</form>\n" + popoverButtons
       });
       $builderProvider.registerComponent('radio', {
         group: 'Choice',
@@ -85,7 +91,7 @@
         readOnly: false,
         options: ['value one', 'value two'],
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n    <label for=\"{{formName+index}}\" class=\"col-sm-2 control-label\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n    <div class=\"col-sm-10\">\n        <div class='radio' ng-repeat=\"item in options track by $index\">\n            <label>\n            <input ng-disabled=\"readOnly\" name='{{formName+index}}' ng-model=\"$parent.inputText\" validator-group=\"{{formName}}\" ng-value='item' type='radio' check-repeat/>\n                {{item}}\n            </label>\n        </div>\n    </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n      <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\" class=\"disabled\"><a>Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Options</label>\n                    <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required\n                    </label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in ['Hide', 'Show']\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control  custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\" class=\"disabled\"><a>Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Options</label>\n                    <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required\n                    </label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in ['Hide', 'Show']\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control  custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n</form>\n" + popoverButtons
       });
       return $builderProvider.registerComponent('select', {
         group: 'Choice',
@@ -97,7 +103,7 @@
         readOnly: false,
         options: ['value one', 'value two'],
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n    <label class=\"col-sm-2 control-label\" for=\"{{formName+index}}\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n    <div class=\"col-sm-10 dropdown\">\n        <select ng-show=\"!multiple\" ng-readonly=\"readOnly\" ng-options=\"value for value in options\" class=\"form-control m-b\"\n            ng-model=\"inputText\" ng-init=\"inputText = options[0]\"/>\n        <select ng-show=\"multiple\" ng-readonly=\"readOnly\" ng-options=\"value for value in options\" class=\"form-control m-b\"\n            ng-model=\"inputText\" multiple ng-init=\"inputText = options[0]\"/>\n    </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n      <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Options</label>\n                    <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required\n                    </label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"multiple\" />\n                        Multiple Select</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Options</label>\n                    <textarea class=\"form-control\" rows=\"3\" ng-model=\"optionsText\"/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required\n                    </label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"multiple\" />\n                        Multiple Select</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n</form>\n" + popoverButtons
       }, $builderProvider.registerComponent('address', {
         group: 'Advanced',
         label: 'Address Field',
@@ -106,7 +112,7 @@
         readOnly: false,
         options: [],
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n    <label class=\"col-sm-2 control-label\" for=\"{{formName+index}}\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n    <div class=\"col-sm-10\">\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText.StreetName\" class=\"form-control custom-m-b\" placeholder=\"Street Name\"/>\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText.Number\" class=\"form-control custom-m-b\" placeholder=\"Number\"/>\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText.Letter\" class=\"form-control custom-m-b\" placeholder=\"Letter\"/>\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText.Floor\" class=\"form-control custom-m-b\" placeholder=\"Floor\"/>\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText.PlaceName\" class=\"form-control custom-m-b\" placeholder=\"Place Name\"/>\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText.PostCode\" class=\"form-control custom-m-b\" placeholder=\"Post Code\"/>\n        <input type=\"text\" ng-readonly=\"readOnly\" ng-model=\"inputText.City\" class=\"form-control m-b\" placeholder=\"City\" validator-required={{required}} validator-group={{formName}}/>\n    </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n        <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox m-t\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\" />\n                        Required</label>\n                </div>\n                <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n                    <label class='control-label'>Validation</label>\n                    <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n\n    </div>\n</form>\n" + popoverButtons
       }, $builderProvider.registerComponent('signature', {
         group: 'Advanced',
         label: 'Signature Pad',
@@ -114,7 +120,7 @@
         required: false,
         readOnly: false,
         template: "<div class=\"row\" id=\"{{formName+index | nospace}}\">\n    <label class=\"col-sm-2 control-label\" for=\"{{formName+index}}\" ng-class=\"{'fb-required':required}\">{{label}}</label>\n\n    <div class=\"col-sm-10\">\n        <div class=\"m-b\">\n            <signature-pad></signature-pad>\n        </div>\n    </div>\n    <div class=\"col-sm-10 col-sm-offset-2\">\n        <small ng-show=\"description\" class=\"help-block text-muted custom-small\">{{description}}</small>\n    </div>\n</div>\n<div id=\"dashedline\" class=\"hr-line-dashed\"></div>",
-        popoverTemplate: "<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\"/>\n                        Required</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n        <label class='control-label'>Validation</label>\n        <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n    </div>\n\n    <hr/>\n    <div class='form-group'>\n        <input type='button' ng-click=\"popover.remove($event)\" class='btn btn-danger fa h-c-34 pull-right m-b m-l-xs' value='&#xf1f8'/>\n        <input type='submit' ng-click=\"popover.save($event)\" class='btn btn-primary h-c-34 pull-right m-b fa' value='&#xf0c7'/>\n        <input type='button' ng-click=\"popover.cancel($event)\" class='btn btn-white h-c-34 pull-left m-b' value='Cancel'/>\n    </div>\n</form>"
+        popoverTemplate: "" + popoverCloseX + "\n<form>\n\n    <div role=\"tabpanel\">\n\n        <!-- Nav tabs -->\n        <ul class=\"nav nav-justified nav-tabs\" role=\"tablist\" style=\"margin-left:-10px\">\n            <li role=\"presentation\" class=\"active\"><a href=\"{{'#properties' + date + index}}\" aria-controls=\"{{'properties' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Properties</a></li>\n            <li role=\"presentation\"><a href=\"{{'#validations' + date + index}}\" aria-controls=\"{{'validations' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Validations</a></li>\n            <li role=\"presentation\"><a href=\"{{'#logic' + date + index}}\" aria-controls=\"{{'logic' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Logic</a></li>\n            <li role=\"presentation\"><a href=\"{{'#points' + date + index}}\" aria-controls=\"{{'points' + date + index}}\" role=\"tab\" data-toggle=\"tab\">Points</a></li>\n        </ul>\n\n        <!-- Tab panes -->\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"{{'properties' + date + index}}\">\n                <div class=\"form-group m-t-sm\">\n                    <label class='control-label'>Label</label>\n                    <input type='text' ng-model=\"label\" validator=\"[required]\" class='form-control'/>\n                </div>\n                <div class=\"form-group\">\n                    <label class='control-label'>Description</label>\n                    <input type='text' ng-model=\"description\" class='form-control'/>\n                </div>\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"readOnly\" />\n                        Read Only</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'validations' + date + index}}\">\n                <div class=\"checkbox\">\n                    <label>\n                        <input type='checkbox' check-repeat ng-model=\"required\"/>\n                        Required</label>\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"{{'logic' + date + index}}\">\n                <div class=\"form-group m-t\">\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.action\" ng-options=\"action for action in actions\"></select><p> this element if</p>\n                    <select ng-model=\"formObject.logic.component\" class=\"form-control custom-m-b\">\n\n                      <optgroup ng-repeat=\"(groupName, items) in fields\" label=\"{{'Page: ' + groupName}}\">\n                          <option ng-selected=\"item.id === formObject.logic.component.id\" ng-show=\"keys.indexOf(groupName) < keys.indexOf(currentForm) || (keys.indexOf(groupName) === keys.indexOf(currentForm) && item.index < formObject.index)\" ng-repeat=\"item in fields[groupName]\" value=\"{{item}}\">{{item.component}} - {{item.label}}</option>\n                      </optgroup>\n                    </select>\n                    <select class=\"form-control custom-m-b\" ng-model=\"formObject.logic.comparator\" ng-options=\"comparator for comparator in comparatorChoices\">\n                    </select>\n                    <input type=\"text\" ng-model=\"formObject.logic.value\" class=\"form-control\" placeholder=\"Value\">\n                </div>\n            </div>\n            <div role=\"tabpanel\" class=\"tab-pane p-t-n\" id=\"{{'points' + date + index}}\">\n\n              <div class=\"form-group\" ng-if=\"formObject.pointRules.length > 0\">\n                <label class=\"control-label m-t-c--5\">Active Rules</label>\n                <div class=\"m-t-xs\" ng-repeat=\"rule in formObject.pointRules\">\n                  Add <span class=\"label label-primary\">{{rule.points}}</span> points if this field <span class=\"label label-primary\">{{rule.predicate | predicate}}</span>&nbsp;<span class=\"label label-primary\" ng-if=\"rule.predicate !== 'null' && rule.predicate !== 'not_null'\">{{rule.value}}</span> <a ng-click=\"removeRule(rule)\" class=\"pull-right btn btn-sm btn-link hover-dark-grey-link btn-xs\"><i class=\"fa fa-times-circle\"></i></a>\n                </div>\n              </div>\n              <div class=\"form-group custom-m-b\">\n                  <div class=\"input-group\">\n                    <span class=\"input-group-addon add-points\">Add</span>\n                    <input type=\"text\" class=\"form-control\" ng-model=\"newRule.points\">\n                    <span class=\"input-group-addon add-points\">points</span>\n                  </div>\n              </div>\n\n              <div class=\"form-group custom-m-b\">\n                <div class=\"input-group\">\n                  <span class=\"input-group-addon add-points\">if this field</span>\n                  <select ng-model=\"newRule.predicate\" ng-options=\"predicate.value as predicate.label for predicate in predicates\" class=\"form-control\"></select>\n                </div>\n              </div>\n\n              <div class=\"input-group\">\n                <input ng-readonly=\"newRule.predicate === 'null' || newRule.predicate === 'not_null'\" ng-model=\"newRule.value\" type=\"text\" class=\"form-control\" placeholder=\"value\">\n                <span class=\"input-group-btn\">\n                  <button ng-click=\"addRule()\" class=\"btn btn-primary\" type=\"button\">+</button>\n                </span>\n              </div>\n              <p class=\"text-danger\">{{rulesErrorMessage}}</p>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"form-group\" ng-if=\"validationOptions.length > 0\">\n        <label class='control-label'>Validation</label>\n        <select ng-model=\"$parent.validation\" class='form-control' ng-options=\"option.rule as option.label for option in validationOptions\"></select>\n    </div>\n</form>\n" + popoverButtons
       })));
     }
   ]);
diff --git a/dist/angular-form-builder.css b/dist/angular-form-builder.css
index 1e31c3b..57e6dea 100644
--- a/dist/angular-form-builder.css
+++ b/dist/angular-form-builder.css
@@ -1 +1 @@
-.fb-component{padding:10px;cursor:move}.fb-component input{cursor:move}.fb-component label{cursor:move}.fb-component select{cursor:move}.fb-component textarea{cursor:move}.fb-form-object-editable{padding:10px}.fb-form-object-editable.fb-draggable{cursor:move}.fb-form-object-editable.fb-draggable input{cursor:move}.fb-form-object-editable.fb-draggable label{cursor:pointer}.fb-form-object-editable.fb-draggable select{cursor:move}.fb-form-object-editable.fb-draggable textarea{cursor:move}.fb-form-object-editable.empty{cursor:default;margin:6px;height:80px;border:dashed 1px #aaa;background-color:#eee}.fb-draggable.dragging{background-color:#ffffff;position:absolute;z-index:800;-moz-box-shadow:#666 0 0 20px;-webkit-box-shadow:#666 0 0 20px;box-shadow:#666 0 0 20px}.fb-required:after{color:#b94a48;content:' *'}.fb-builder{min-height:250px}.popover{max-width:500px}.popover .control-label{text-align:left}.popover form{width:auto;max-width:500px}
+.fb-component{padding:10px;cursor:move}.fb-component input{cursor:move}.fb-component label{cursor:move}.fb-component select{cursor:move}.fb-component textarea{cursor:move}.fb-form-object-editable{padding:10px}.fb-form-object-editable.fb-draggable{cursor:move}.fb-form-object-editable.fb-draggable input{cursor:move}.fb-form-object-editable.fb-draggable label{cursor:pointer}.fb-form-object-editable.fb-draggable select{cursor:move}.fb-form-object-editable.fb-draggable textarea{cursor:move}.fb-form-object-editable.empty{cursor:default;margin:6px;height:80px;border:dashed 1px #aaa;background-color:#eee}.fb-draggable.dragging{background-color:#ffffff;position:absolute;z-index:800;-moz-box-shadow:#666 0 0 20px;-webkit-box-shadow:#666 0 0 20px;box-shadow:#666 0 0 20px}.fb-required:after{color:#b94a48;content:' *'}.fb-builder{min-height:250px}.popover{max-width:500px}.popover .control-label{text-align:left}.popover form{width:auto;max-width:500px}.popover .close{position:absolute;top:5px;right:10px}.popover .last{margin-bottom:5px}.popover .last hr{margin:10px 0}.popover .last button{margin-right:10px}.popover .tab-content{margin-top:10px;min-height:250px}
diff --git a/src/angular-form-builder.scss b/src/angular-form-builder.scss
index 1b4c79d..fd023b4 100644
--- a/src/angular-form-builder.scss
+++ b/src/angular-form-builder.scss
@@ -47,6 +47,7 @@
 
 .popover {
     max-width: 500px;
+
     .control-label {
         text-align: left;
     }
@@ -54,4 +55,23 @@
         width: auto;
         max-width: 500px;
     }
+    .close {
+        position: absolute;
+        top: 5px;
+        right: 10px;
+    }
+    .last {
+        margin-bottom: 5px;
+
+        hr {
+            margin: 10px 0;
+        }
+        button {
+            margin-right: 10px;
+        }
+    }
+    .tab-content {
+        margin-top: 10px;
+        min-height: 250px;
+    }
 }