Fixes for PR issues

dist/angular-patternfly.js

@@ -48,7 +48,7 @@ angular.module( 'patternfly.utils', [] );
  *   Views module for patternfly.
  *
  */
-angular.module('patternfly.views', []);
+angular.module('patternfly.views', ['patternfly.utils']);
 ;/**
  * @ngdoc directive
  * @name patternfly.autofocus:pfFocused
@@ -1991,6 +1991,130 @@ angular.module('patternfly.select', []).directive('pfSelect', function ($timeout
   };
 });
 ;
+/**
+ * @ngdoc directive
+ * @name patternfly.utils.directive:pfTransclude
+ * @restrict A
+ * @element ANY
+ * @param {string} pfTransclude specifies the type of transclusion to use.<br/>
+ * <strong>Values:</strong>
+ * <ul style='list-style-type: none'>
+ * <li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
+ * <li> 'parent'  - The transcluded contents scope is that of the element where transclusion happens.
+ * <li> 'child'   - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
+ * </ul>
+ *
+ * @description
+ *   Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
+ *   for https://github.com/angular/angular.js/issues/5489
+ *
+ * @example
+<example module="patternfly.utils">
+  <file name="index.html">
+    <style>
+
+      .pf-transclude-example div {
+        border: 1px solid #337ab7;
+        margin-bottom: 20px;
+        margin-left:   20px;
+      }
+
+      .pf-transclude-example p {
+        background-color: #337ab7;
+        margin: 0;
+        padding: 5px 10px;
+      }
+
+     .pf-transclude-example id {
+        display: inline-block;
+        background-color: #def3ff;
+        color: #000000;
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        margin-left: 5px;
+      }
+
+      .pf-transclude-example pre {
+        padding: 5px;
+        border-width: 0px;
+      }
+    </style>
+    <div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
+      <span>Here the scope id is: <id>{{$id}}</id></span>
+
+      <transclude-sibling class="pf-transclude-example">
+        <pre>This content was transcluded using <b>pf-transclude</b> or <b>pf-transclude="sibling"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+      </transclude-sibling>
+
+      <transclude-parent>
+        <pre>This content was transcluded using <b>pf-transclude="parent"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+      </transclude-parent>
+
+      <transclude-child>
+        <pre>This content was transcluded using <b>pf-transclude="child"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+      </transclude-child>
+    </div>
+  </file>
+
+  <file name="script.js">
+    angular.module('patternfly.utils')
+      .controller( 'UtilCtrl', function($scope) {
+
+      })
+
+      .config(function($provide){
+          $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
+              // Remove the original directive
+              $delegate.shift();
+              return $delegate;
+          }]);
+      })
+
+      .directive( 'transcludeSibling', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeParent', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="parent"></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeChild', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="child"></span>' +
+            '</div>'
+        }
+      })
+    ;
+  </file>
+</example>
+ */
 angular
   .module('patternfly.utils').directive('pfTransclude', function () {
     'use strict';
@@ -2212,7 +2336,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
  *   Directive for rendering a data list.
  *   <br><br>
  *
- * @param {object} config configuration settings for the sparkline chart:<br/>
+ * @param {object} config configuration settings for the data list:<br/>
  * <ul style='list-style-type: none'>
  * <li>.showSelectBox          - (boolean) Show item selection boxes for each item, default is true
  * <li>.selectItems            - (boolean) Allow row selection, default is false
@@ -2311,7 +2435,7 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
   </file>
 
   <file name="script.js">
-    angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
+ angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
       function ($scope) {
         $scope.eventText = '';
         var handleSelect = function (item, e) {
@@ -2383,8 +2507,8 @@ angular.module('patternfly.validation', []).directive('pfValidation', function (
             city: "New York",
             state: "New York"
           },
-        ];
-      };
+        ]
+      }
     ]);
   </file>
 </example>
@@ -2395,11 +2519,10 @@ angular.module('patternfly.views').directive('pfDataList', [
     return {
       restrict: 'A',
       scope: {
-        config: '=',
+        config: '=?',
         items: '=',
         eventId: '@id'
       },
-      replace: true,
       transclude: true,
       templateUrl: 'views/datalist/data-list.html',
       controller: ['$scope',
@@ -2454,7 +2577,7 @@ angular.module('patternfly.views').directive('pfDataList', [
 
               if (alreadySelected) {
                 // already selected so deselect
-                scope.config.selectedItems = _.without(scope.config.selectedItems, selectMatch);
+                scope.config.selectedItems = _.without(scope.config.selectedItems, item);
               } else {
                 // add the item to the selected items
                 scope.config.selectedItems.push(item);
@@ -2577,7 +2700,7 @@ angular.module('patternfly.views').directive('pfDataList', [
   'use strict';
 
   $templateCache.put('views/datalist/data-list.html',
-    "<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=\"row list-row\"><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':config.showActionMenus}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\" ng-transclude=\"\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div></div></div></div>"
+    "<div class=data-list-pf><div class=list-group-item ng-repeat=\"item in items track by $index\" ng-class=\"{'pf-selectable': selectItems, 'active': isSelected(item), 'disabled': checkDisabled(item)}\"><div class=\"row list-row\"><div pf-transclude=parent class=list-content ng-class=\"{'with-check-box': config.showSelectBox, 'with-menu':config.showActionMenus}\" ng-click=\"itemClick($event, item)\" ng-dblclick=\"dblClick($event, item)\"></div><div class=list-check-box ng-if=config.showSelectBox style=\"padding-top: {{(config.rowHeight - 32) / 2}}px\"><input type=checkbox value=item.selected ng-model=item.selected ng-disabled=checkDisabled(item) ng-change=\"checkBoxChange(item)\"></div></div></div></div>"
   );
 
 }]);

dist/styles/angular-patternfly.css

@@ -124,7 +124,7 @@
 .data-list-pf .list-group-item .pficon {
   -webkit-align-items: center;
   align-items: center;
-  color: #1186C1 !important;
+  color: #1186C1;
   font-size: 26px;
   width: 26px;
 }
@@ -143,10 +143,10 @@
   border-color: #ededed;
 }
 
-.list-group-item.active .pficon,
-.list-group-item.active:hover .pficon,
-.list-group-item.active:focus .pficon {
-  color: #ffffff !important;
+.data-list-pf .list-group-item.active .pficon,
+.data-list-pf .list-group-item.active:hover .pficon,
+.data-list-pf .list-group-item.active:focus .pficon {
+  color: #ffffff;
 }
 .data-list-pf .row-column {
   padding-right: 5px;

src/utils/transclude-directive.js

@@ -1,4 +1,128 @@
 
+/**
+ * @ngdoc directive
+ * @name patternfly.utils.directive:pfTransclude
+ * @restrict A
+ * @element ANY
+ * @param {string} pfTransclude specifies the type of transclusion to use.<br/>
+ * <strong>Values:</strong>
+ * <ul style='list-style-type: none'>
+ * <li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
+ * <li> 'parent'  - The transcluded contents scope is that of the element where transclusion happens.
+ * <li> 'child'   - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
+ * </ul>
+ *
+ * @description
+ *   Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
+ *   for https://github.com/angular/angular.js/issues/5489
+ *
+ * @example
+<example module="patternfly.utils">
+  <file name="index.html">
+    <style>
+
+      .pf-transclude-example div {
+        border: 1px solid #337ab7;
+        margin-bottom: 20px;
+        margin-left:   20px;
+      }
+
+      .pf-transclude-example p {
+        background-color: #337ab7;
+        margin: 0;
+        padding: 5px 10px;
+      }
+
+     .pf-transclude-example id {
+        display: inline-block;
+        background-color: #def3ff;
+        color: #000000;
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        margin-left: 5px;
+      }
+
+      .pf-transclude-example pre {
+        padding: 5px;
+        border-width: 0px;
+      }
+    </style>
+    <div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
+      <span>Here the scope id is: <id>{{$id}}</id></span>
+
+      <transclude-sibling class="pf-transclude-example">
+        <pre>This content was transcluded using <b>pf-transclude</b> or <b>pf-transclude="sibling"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+      </transclude-sibling>
+
+      <transclude-parent>
+        <pre>This content was transcluded using <b>pf-transclude="parent"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+      </transclude-parent>
+
+      <transclude-child>
+        <pre>This content was transcluded using <b>pf-transclude="child"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+      </transclude-child>
+    </div>
+  </file>
+
+  <file name="script.js">
+    angular.module('patternfly.utils')
+      .controller( 'UtilCtrl', function($scope) {
+
+      })
+
+      .config(function($provide){
+          $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
+              // Remove the original directive
+              $delegate.shift();
+              return $delegate;
+          }]);
+      })
+
+      .directive( 'transcludeSibling', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeParent', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="parent"></span>' +
+            '</div>'
+        }
+      })
+
+      .directive( 'transcludeChild', function() {
+        return {
+          restrict: 'E',
+          transclude: true,
+          scope: {},
+          template:
+            '<div>' +
+              '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+              '<span pf-transclude="child"></span>' +
+            '</div>'
+        }
+      })
+    ;
+  </file>
+</example>
+ */
 angular
   .module('patternfly.utils').directive('pfTransclude', function () {
     'use strict';