From 7a9441b3c5d73ad5b1e405506c9461df50d4b5ed Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Wed, 26 Aug 2015 11:17:44 -0400
Subject: [PATCH] Fixes for PR issues

---
 dist/angular-patternfly.js                | 141 ++++++++++++++++++++--
 dist/angular-patternfly.min.js            |   2 +-
 dist/styles/angular-patternfly.css        |  10 +-
 dist/styles/angular-patternfly.min.css    |   2 +-
 src/utils/transclude-directive.js         | 124 +++++++++++++++++++
 src/views/datalist/data-list-directive.js |  13 +-
 src/views/datalist/data-list.html         |   2 +-
 src/views/views.module.js                 |   2 +-
 styles/angular-patternfly.css             |  10 +-
 9 files changed, 276 insertions(+), 30 deletions(-)

diff --git a/dist/angular-patternfly.js b/dist/angular-patternfly.js
index 406df5c69..8aa4a2e79 100644
--- a/dist/angular-patternfly.js
+++ b/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>"
   );
 
 }]);
diff --git a/dist/angular-patternfly.min.js b/dist/angular-patternfly.min.js
index 7bf5a0d3f..f2ed3a81c 100644
--- a/dist/angular-patternfly.min.js
+++ b/dist/angular-patternfly.min.js
@@ -1 +1 @@
-angular.module("patternfly.card",[]),angular.module("patternfly.charts",[]),angular.module("patternfly.form",[]),angular.module("patternfly",["patternfly.autofocus","patternfly.card","patternfly.form","patternfly.notification","patternfly.select","patternfly.utils","patternfly.validation","patternfly.views"]),angular.module("patternfly.utils",[]),angular.module("patternfly.views",[]),angular.module("patternfly.autofocus",[]).directive("pfFocused",function($timeout){"use strict";return{restrict:"A",link:function(scope,element,attrs){scope.$watch(attrs.pfFocused,function(newValue){$timeout(function(){newValue&&(element[0].focus(),element[0].select&&element[0].select())})})}}}),angular.module("patternfly.card").directive("pfCard",function(){"use strict";return{restrict:"A",transclude:!0,templateUrl:"card/basic/card.html",scope:{headTitle:"@",subTitle:"@?",showTopBorder:"@?"}}}),function(){"use strict";angular.module("patternfly.charts").constant("c3ChartDefaults",{getDefaultDonut:function(title){return{title:title,label:{show:!1},width:10}},getDefaultDonutSize:function(){return{height:130}},getDefaultDonutColor:function(){return{pattern:["#0088CE","#D1D1D1"]}},getDefaultDonutTooltip:function(){return{show:!1}},getDefaultDonutLegend:function(){return{show:!1}},getDefaultDonutConfig:function(title){return{donut:this.getDefaultDonut(title),size:this.getDefaultDonutSize(),legend:this.getDefaultDonutLegend(),color:this.getDefaultDonutColor(),tooltip:this.getDefaultDonutTooltip()}},getDefaultSparklineArea:function(){return{zerobased:!0}},getDefaultSparklineSize:function(){return{height:60}},getDefaultSparklineAxis:function(){return{x:{show:!1},y:{show:!1}}},getDefaultSparklineColor:function(){return{pattern:["#0088ce","#00659c","#3f9c35","#ec7a08","#cc0000"]}},getDefaultSparklineLegend:function(){return{show:!1}},getDefaultSparklinePoint:function(){return{r:1,focus:{expand:{r:4}}}},getDefaultSparklineTooltip:function(){return{contents:function(d){return'<span class="c3-tooltip-sparkline">'+d[0].value+" "+d[0].name+"</span>"}}},getDefaultSparklineConfig:function(){return{area:this.getDefaultSparklineArea(),size:this.getDefaultSparklineSize(),axis:this.getDefaultSparklineAxis(),color:this.getDefaultSparklineColor(),legend:this.getDefaultSparklineLegend(),point:this.getDefaultSparklinePoint(),tooltip:this.getDefaultSparklineTooltip()}}})}(),function(c3){"use strict";angular.module("patternfly.charts").directive("pfC3Chart",["$timeout",function($timeout){return{restrict:"A",scope:{config:"="},template:'<div id=""></div>',replace:!0,link:function(scope,element,attrs){scope.$watch("config",function(){$timeout(function(){var chartData=scope.config;chartData.bindto="#"+attrs.id,c3.generate(chartData)})},!0)}}}])}(c3),angular.module("patternfly.charts").directive("pfDonutPctChart",["c3ChartDefaults","$timeout",function(c3ChartDefaults,$timeout){"use strict";return{restrict:"A",scope:{config:"=",data:"=",centerLabel:"=?"},replace:!0,templateUrl:"charts/donut/donut-pct-chart.html",controller:["$scope",function($scope){var donutTooltip;$scope.donutChartId="donutChart",$scope.config.chartId&&($scope.donutChartId=$scope.config.chartId+$scope.donutChartId),$scope.updateAvailable=function(){$scope.data.available=$scope.data.total-$scope.data.used},void 0===$scope.data.available&&$scope.updateAvailable(),$scope.getStatusColor=function(used,thresholds){var color="#0088CE";return thresholds&&(used>=thresholds.error?color="#CC0000":used>=thresholds.warning&&(color="#EC7A08")),color},$scope.statusDonutColor=function(scope){var color,percentUsed;return color={pattern:[]},percentUsed=scope.data.used/scope.data.total*100,color.pattern[0]=$scope.getStatusColor(percentUsed,scope.config.thresholds),color.pattern[1]="#D1D1D1",color},donutTooltip=function(scope){return{contents:function(d){var tooltipHtml;return tooltipHtml=scope.config.tooltipFn?'<span class="donut-tooltip-pf" style="white-space: nowrap;">'+scope.config.tooltipFn(d)+"</span>":'<span class="donut-tooltip-pf" style="white-space: nowrap;">'+Math.round(100*d[0].ratio)+"% "+$scope.config.units+" "+d[0].name+"</span>"}}},$scope.getDonutData=function(scope){return{columns:[["Used",scope.data.used],["Available",scope.data.available]],type:"donut",donut:{label:{show:!1}},groups:[["used","available"]],order:null}},$scope.updateAll=function(scope){$scope.updateAvailable(),$scope.config.data=$scope.getDonutData($scope),$scope.config.color=$scope.statusDonutColor($scope),$scope.config.tooltip=donutTooltip(scope)},$scope.config=$.extend(!0,c3ChartDefaults.getDefaultDonutConfig(),$scope.config),$scope.updateAll($scope)}],link:function(scope,element){var setupDonutChartTitle=function(){$timeout(function(){var donutChartTitle,bigText,smText;donutChartTitle=element[0].querySelector("text.c3-chart-arcs-title"),scope.config.centerLabelFn?donutChartTitle.innerHTML=scope.config.centerLabelFn(scope):"none"===scope.centerLabel?donutChartTitle.innerHTML="":(bigText=scope.data.used,smText=scope.config.units+" Used","available"===scope.centerLabel?(bigText=scope.data.available,smText=scope.config.units+" Available"):"percent"===scope.centerLabel&&(bigText=Math.round(scope.data.used/scope.data.total*100)+"%",smText="of "+scope.data.total+" "+scope.config.units),donutChartTitle&&(donutChartTitle.innerHTML='<tspan dy="0" x="0" class="donut-title-big-pf">'+bigText+'</tspan><tspan dy="20" x="0" class="donut-title-small-pf">'+smText+"</tspan>"))},300)};scope.$watch("config",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("data",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("centerLabel",function(){setupDonutChartTitle()})}}}]),angular.module("patternfly.charts").directive("pfSparklineChart",["c3ChartDefaults",function(c3ChartDefaults){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/sparkline/sparkline-chart.html",controller:["$scope",function($scope){$scope.sparklineChartId="sparklineChart",$scope.config.chartId&&($scope.sparklineChartId=$scope.config.chartId+$scope.sparklineChartId),$scope.getSparklineData=function(chartData){return{x:chartData.xData[0],columns:[chartData.xData,chartData.yData],type:"area"}},$scope.getTooltipTableHTML=function(tipRows){return'<div class="module-triangle-bottom">  <table class="c3-tooltip">    <tbody>'+tipRows+"    </tbody>  </table></div>"},$scope.sparklineTooltip=function(){return{contents:function(d){var tipRows,percentUsed;if($scope.config.tooltipFn)tipRows=$scope.config.tooltipFn(d);else switch($scope.config.tooltipType){case"usagePerDay":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows='<tr>  <th colspan="2">'+d[0].x.toLocaleDateString()+'</th></tr><tr>  <td class="name">'+percentUsed+'%:</td>  <td class="value text-nowrap">'+d[0].value+" "+$scope.config.units+" "+d[0].name+"</td></tr>";break;case"valuePerDay":tipRows='<tr>  <td class="value">'+d[0].x.toLocaleDateString()+'</td>  <td class="value text-nowrap">'+d[0].value+" "+d[0].name+"</td></tr>";break;case"percentage":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows='<tr>  <td class="name">'+percentUsed+"%</td></tr>";break;default:tipRows=c3ChartDefaults.getDefaultSparklineTooltip().contents(d)}return $scope.getTooltipTableHTML(tipRows)},position:function(data,width,height,element){var center,top,chartBox,graphOffsetX,x;try{return center=parseInt(element.getAttribute("x")),top=parseInt(element.getAttribute("y")),chartBox=document.querySelector("#"+$scope.sparklineChartId).getBoundingClientRect(),graphOffsetX=document.querySelector("#"+$scope.sparklineChartId+" g.c3-axis-y").getBoundingClientRect().right,x=Math.max(0,center+graphOffsetX-chartBox.left-Math.floor(width/2)),{top:top-height,left:Math.min(x,chartBox.width-width)}}catch(e){}}}},void 0===$scope.showXAxis&&($scope.showXAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),void 0===$scope.showYAxis&&($scope.showYAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),$scope.defaultConfig=c3ChartDefaults.getDefaultSparklineConfig(),$scope.defaultConfig.axis={x:{show:$scope.showXAxis===!0,type:"timeseries",tick:{format:function(){return""}}},y:{show:$scope.showYAxis===!0,tick:{format:function(){return""}}}},$scope.defaultConfig.tooltip=$scope.sparklineTooltip(),$scope.chartHeight&&($scope.defaultConfig.size.height=$scope.chartHeight),$scope.defaultConfig.units="",$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.data=$scope.getSparklineData($scope.chartData)}],link:function(scope){scope.$watch("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config)},!0),scope.$watch("chartHeight",function(){scope.config.size.height=scope.chartHeight}),scope.$watch("showXAxis",function(){scope.config.axis.x.show=scope.showXAxis===!0}),scope.$watch("showYAxis",function(){scope.config.axis.y.show=scope.showYAxis===!0}),scope.$watch("chartData",function(){scope.config.data=scope.getSparklineData(scope.chartData)},!0)}}}]),angular.module("patternfly.charts").directive("pfUtilizationChart",function(){"use strict";return{restrict:"A",scope:{chartData:"=",config:"=",centerLabel:"=?",donutConfig:"=",sparklineConfig:"=",sparklineChartHeight:"=?",showSparklineXAxis:"=?",showSparklineYAxis:"=?"},replace:!0,templateUrl:"charts/utilization/utilization-chart.html",controller:["$scope",function($scope){void 0===$scope.centerLabel&&($scope.centerLabel="used"),void 0===$scope.donutConfig.units&&($scope.donutConfig.units=$scope.config.units),void 0===$scope.chartData.available&&($scope.chartData.available=$scope.chartData.total-$scope.chartData.used),$scope.config.units=$scope.config.units||$scope.units}],link:function(scope,element){var setupCurrentValues=function(){"available"===scope.centerLabel?(scope.currentValue=scope.chartData.used,scope.currentText="Used"):(scope.currentValue=scope.chartData.total-scope.chartData.used,scope.currentText="Available")};scope.$watch("centerLabel",function(){setupCurrentValues()})}}}),angular.module("patternfly.form").directive("pfDatepicker",function(){"use strict";return{replace:!0,restrict:"A",require:"^form",templateUrl:"form/datepicker/datepicker.html",scope:{options:"=",date:"="},link:function($scope,element){element.datepicker($scope.options),element.datepicker("update",$scope.date),element.datepicker($scope.date).on("changeDate",function(elem){$scope.$apply(function(){$scope.date=elem.date})}),$scope.$watch("date",function(newValue,oldValue){oldValue!==newValue&&element.datepicker("update",newValue)})}}}),angular.module("patternfly.form").directive("pfFormButtons",function(){"use strict";return{replace:!0,require:"^form",templateUrl:"form/form-buttons/form-buttons.html",scope:{pfHandleCancel:"&pfOnCancel",pfHandleSave:"&pfOnSave",pfWorking:"=",pfButtonContainerClass:"@"},link:function(scope,iElement,iAttrs,controller){void 0===scope.pfWorking&&(scope.pfWorking=!1),scope.isInvalid=function(){var invalid=controller.$invalid;return angular.forEach(controller,function(value){value&&value.$error&&value.$error.server&&(invalid=!1)}),invalid}}}}),angular.module("patternfly.form").directive("pfFormGroup",function(){"use strict";function getInput(element){var input=element.find("table");return 0===input.length&&(input=element.find("input"),0===input.length&&(input=element.find("select"),0===input.length&&(input=element.find("textarea")))),input}return{transclude:!0,replace:!0,require:"^form",templateUrl:"form/form-group/form-group.html",scope:{pfLabel:"@",pfField:"@",pfLabelClass:"@",pfInputClass:"@"},link:function(scope,iElement,iAttrs,controller){var field,input=getInput(iElement),type=input.attr("type");iAttrs.pfLabelClass||(iAttrs.pfLabelClass="col-sm-2"),iAttrs.pfInputClass||(iAttrs.pfInputClass="col-sm-5"),scope.pfField||(scope.pfField=input.attr("id")),field=scope.pfField,-1===["checkbox","radio","time"].indexOf(type)&&input.addClass("form-control"),input.attr("required")&&iElement.addClass("required"),controller[field]&&(scope.error=controller[field].$error),scope.hasErrors=function(){return controller[field]&&controller[field].$invalid&&controller[field].$dirty}}}}),angular.module("patternfly.notification",[]).provider("Notifications",function(){"use strict";this.delay=5e3,this.verbose=!0,this.notifications={},this.persist={error:!0,httpError:!0},this.setDelay=function(delay){return this.delay=delay,this},this.setVerbose=function(verbose){return this.verbose=verbose,this},this.setPersist=function(persist){this.persist=persist},this.$get=["$rootScope","$timeout","$log",function($rootScope,$timeout,$log){function createNotifyMethod(mode){return function(message){notifications.message(modes[mode].type,modes[mode].header,message,persist[mode]),verbose&&$log[modes[mode].log](message)}}var delay=this.delay,notifications=this.notifications,verbose=this.verbose,persist=this.persist,scheduleMessagePop=function(){$timeout(function(){var i;for(i=0;i<$rootScope.notifications.data.length;i++)$rootScope.notifications.data[i].isPersistent||$rootScope.notifications.data.splice(i,1)},delay)},modes={info:{type:"info",header:"Info!",log:"info"},success:{type:"success",header:"Success!",log:"info"},error:{type:"danger",header:"Error!",log:"error"},warn:{type:"warning",header:"Warning!",log:"warn"}};return $rootScope.notifications={},$rootScope.notifications.data=[],$rootScope.notifications.remove=function(index){$rootScope.notifications.data.splice(index,1)},$rootScope.notifications||($rootScope.notifications.data=[]),notifications.message=function(type,header,message,isPersistent){$rootScope.notifications.data.push({type:type,header:header,message:message,isPersistent:isPersistent}),scheduleMessagePop()},angular.forEach(modes,function(mode,index){notifications[index]=createNotifyMethod(index)}),notifications.httpError=function(message,httpResponse){message+=" ("+(httpResponse.data.message||httpResponse.data.cause||httpResponse.data.cause||httpResponse.data.errorMessage)+")",notifications.message("danger","Error!",message,persist.httpError),verbose&&$log.error(message)},notifications}]}),angular.module("patternfly.notification").directive("pfNotification",function(){"use strict";return{scope:{pfNotificationType:"=",pfNotificationMessage:"=",pfNotificationHeader:"=",pfNotificationPersistent:"=",pfNotificationIndex:"="},restrict:"E",templateUrl:"notification/notification.html"}}),angular.module("patternfly.notification").directive("pfNotificationList",function(){"use strict";return{restrict:"E",templateUrl:"notification/notification-list.html"}}),angular.module("patternfly.select",[]).directive("pfSelect",function($timeout){"use strict";return{restrict:"A",require:"?ngModel",scope:{selectPickerOptions:"=pfSelect"},link:function(scope,element,attrs,ngModel){var optionCollectionList,optionCollection,$render=ngModel.$render;element.selectpicker(scope.selectPickerOptions),ngModel.$render=function(){$render.apply(this,arguments),$timeout(function(){element.selectpicker("refresh")},0,!1)},attrs.ngOptions&&(optionCollectionList=attrs.ngOptions.split("in "),optionCollection=optionCollectionList[optionCollectionList.length-1],scope.$watchCollection(optionCollection,function(){element.selectpicker("refresh")})),attrs.$observe("disabled",function(){element.selectpicker("refresh")})}}}),angular.module("patternfly.utils").directive("pfTransclude",function(){"use strict";return{restrict:"A",link:function($scope,$element,$attrs,controller,$transclude){var iChildScope,iScopeType;if(!$transclude)throw new Error("pfTransclude - Illegal use of pfTransclude directive in the template! No parent directive that requires a transclusion found. Element: {0}");switch(iScopeType=$attrs.pfTransclude||"sibling"){case"sibling":$transclude(function(clone){$element.empty(),$element.append(clone)});break;case"parent":$transclude($scope,function(clone){$element.empty(),$element.append(clone)});break;case"child":iChildScope=$scope.$new(),$transclude(iChildScope,function(clone){$element.empty(),$element.append(clone),$element.on("$destroy",function(){iChildScope.$destroy()})})}}}}),angular.module("patternfly.validation",[]).directive("pfValidation",function($timeout){"use strict";return{restrict:"A",require:"ngModel",scope:{pfValidation:"&",pfValidationDisabled:"="},link:function(scope,element,attrs,ctrl){function validate(){var valid,val=scope.inputCtrl.$modelValue,valFunc=scope.pfValidation({input:val});attrs.pfValidation||(valFunc=!0),valid=!val||valFunc||""===val,toggleErrorClass(scope.valEnabled&&!valid?!0:!1)}function toggleErrorClass(add){var messageElement=element.next(),parentElement=element.parent(),hasErrorM=parentElement.hasClass("has-error"),wasHidden=messageElement.hasClass("ng-hide");scope.inputCtrl.$setValidity("pf-validation",!add),add&&(hasErrorM||parentElement.addClass("has-error"),wasHidden&&messageElement.removeClass("ng-hide")),add||(hasErrorM&&parentElement.removeClass("has-error"),wasHidden||messageElement.addClass("ng-hide"))}scope.inputCtrl=ctrl,scope.valEnabled=!attrs.pfValidationDisabled,scope.$watch("pfValidationDisabled",function(newVal){scope.valEnabled=!newVal,newVal?(scope.inputCtrl.$setValidity("pfValidation",!0),toggleErrorClass(!1)):validate()}),attrs.pfValidation?$timeout(function(){validate()},0):!scope.inputCtrl.$valid&&scope.inputCtrl.$dirty&&toggleErrorClass(!0),scope.$watch("inputCtrl.$valid",function(isValid){toggleErrorClass(isValid?!1:!0)}),scope.$watch("inputCtrl.$modelValue",function(){validate()})}}}),angular.module("patternfly.views").directive("pfDataList",[function(){"use strict";return{restrict:"A",scope:{config:"=",items:"=",eventId:"@id"},replace:!0,transclude:!0,templateUrl:"views/datalist/data-list.html",controller:["$scope",function($scope){$scope.defaultConfig={selectItems:!1,multiSelect:!1,dblClick:!1,selectionMatchProp:"uuid",selectedItems:[],checkDisabled:!1,showSelectBox:!0,rowHeight:36,onSelect:null,onSelectionChange:null,onCheckBoxChange:null,onClick:null,onDblClick:null},$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config)}],link:function(scope,element,attrs){attrs.$observe("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config),scope.config.selectItems||(scope.config.selectedItems=[]),!scope.config.multiSelect&&scope.config.selectedItems&&scope.config.selectedItems.length>0&&(scope.config.selectedItems=[scope.config.selectedItems[0]])}),scope.itemClick=function(e,item){var alreadySelected,selectionChanged=!1,continueEvent=!0;return scope.checkDisabled(item)?continueEvent:(scope.config&&scope.config.selectItems&&item&&(scope.config.multiSelect&&!scope.config.dblClick?(alreadySelected=_.find(scope.config.selectedItems,function(itemObj){return itemObj===item}),alreadySelected?scope.config.selectedItems=_.without(scope.config.selectedItems,selectMatch):(scope.config.selectedItems.push(item),selectionChanged=!0)):scope.config.selectedItems[0]===item?(scope.config.dblClick||(scope.config.selectedItems=[],selectionChanged=!0),continueEvent=!1):(scope.config.selectedItems=[item],selectionChanged=!0),selectionChanged&&scope.config.onSelect&&scope.config.onSelect(item,e),selectionChanged&&scope.config.onSelectionChange&&scope.config.onSelectionChange(scope.config.selectedItems,e)),scope.config.onClick&&scope.config.onClick(item,e),continueEvent)},scope.dblClick=function(e,item){scope.config.onDblClick&&scope.config.onDblClick(item,e)},scope.checkBoxChange=function(item){scope.config.onCheckBoxChange&&scope.config.onCheckBoxChange(item)},scope.isSelected=function(item){var matchProp=scope.config.selectionMatchProp;return scope.config.selectedItems.length?_.find(scope.config.selectedItems,function(itemObj){return itemObj[matchProp]===item[matchProp]}):!1},scope.checkDisabled=function(item){return scope.config.checkDisabled&&scope.config.checkDisabled(item)}}}}]),angular.module("patternfly.card").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("card/basic/card.html","<div ng-class=\"showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div class=card-pf-heading><h2 class=card-pf-title>{{headTitle}}</h2></div><span ng-if=subTitle class=card-pf-subtitle>{{subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div></div>")}]),angular.module("patternfly.charts").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("charts/donut/donut-pct-chart.html","<div class=donut-chart-pf><div pf-c3-chart id={{donutChartId}} config=config></div></div>"),$templateCache.put("charts/sparkline/sparkline-chart.html","<div class=sparkline-chart><div pf-c3-chart id={{sparklineChartId}} config=config></div></div>"),$templateCache.put("charts/utilization/utilization-chart.html",'<div class=utilization-chart-pf><span class=title>{{config.title}}</span><div class=current-values><div class="available-count pull-left"><span>{{currentValue}}</span></div><div class="available-text pull-left"><div><span>{{currentText}}</span></div><div><span>of {{chartData.total}} {{config.units}}</span></div></div></div><div pf-donut-pct-chart config=donutConfig data=chartData center-label=centerLabel></div><div pf-sparkline-chart config=sparklineConfig chart-data=chartData chart-height=sparklineChartHeight show-x-axis=showSparklineXAxis show-y-axis=showSparklineYAxis></div><span class="pull-left legend-text">{{legendLeftText}}</span> <span class="pull-right legend-text">{{legendRightText}}</span></div>')}]),angular.module("patternfly.form").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("form/datepicker/datepicker.html",'<div class="input-group date"><input class="form-control"> <span class=input-group-addon><span class="fa fa-calendar"></span></span></div>'),$templateCache.put("form/form-buttons/form-buttons.html",'<div class=form-group><div class="{{ pfButtonContainerClass }}"><div class="control-group buttons"><button class="btn btn-default" type=button ng-click=pfHandleCancel() ng-disabled=pfWorking translate>Cancel</button> <button class="btn btn-primary" ng-click="pfHandleSave(); pfWorking = true" ng-disabled="isInvalid() || pfWorking"><i class="icon-spinner icon-spin" ng-show=pfWorking></i> <span ng-show=pfWorking translate>Saving...</span> <span ng-hide=pfWorking translate>Save</span></button></div></div></div>'),$templateCache.put("form/form-group/form-group.html",'<div class=form-group ng-class="{ \'has-error\' : hasErrors() }"><label for="{{ pfField }}" class="control-label {{ pfLabelClass }}">{{ pfLabel }}</label><div class="{{ pfInputClass }}"><span ng-transclude></span> <span class=help-block ng-show=error.messages><ul><li ng-repeat="message in error.messages">{{ message }}</li></ul></span></div></div>')}]),angular.module("patternfly.notification").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("notification/notification-list.html",'<div data-ng-show="notifications.data.length > 0"><div ng-repeat="notification in notifications.data"><pf-notification pf-notification-type=notification.type pf-notification-header=notification.header pf-notification-message=notification.message pf-notification-persistent=notification.isPersistent pf-notification-index=$index></pf-notification></div></div>'),$templateCache.put("notification/notification.html",'<div class="alert alert-{{pfNotificationType}}"><button ng-show=pfNotificationPersistent type=button class=close ng-click=$parent.notifications.remove($index)><span aria-hidden=true>&times;</span><span class=sr-only>Close</span></button> <span class="pficon pficon-ok" ng-show="pfNotificationType === \'success\'"></span> <span class="pficon pficon-info" ng-show="pfNotificationType === \'info\'"></span> <span class="pficon pficon-error-circle-o" ng-show="pfNotificationType === \'danger\'"></span> <span class="pficon pficon-warning-triangle-o" ng-show="pfNotificationType === \'warning\'"></span> <strong>{{pfNotificationHeader}}</strong> {{pfNotificationMessage}}</div>')}]),angular.module("patternfly.views").run(["$templateCache",function($templateCache){"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>')}]);
\ No newline at end of file
+angular.module("patternfly.card",[]),angular.module("patternfly.charts",[]),angular.module("patternfly.form",[]),angular.module("patternfly",["patternfly.autofocus","patternfly.card","patternfly.form","patternfly.notification","patternfly.select","patternfly.utils","patternfly.validation","patternfly.views"]),angular.module("patternfly.utils",[]),angular.module("patternfly.views",["patternfly.utils"]),angular.module("patternfly.autofocus",[]).directive("pfFocused",function($timeout){"use strict";return{restrict:"A",link:function(scope,element,attrs){scope.$watch(attrs.pfFocused,function(newValue){$timeout(function(){newValue&&(element[0].focus(),element[0].select&&element[0].select())})})}}}),angular.module("patternfly.card").directive("pfCard",function(){"use strict";return{restrict:"A",transclude:!0,templateUrl:"card/basic/card.html",scope:{headTitle:"@",subTitle:"@?",showTopBorder:"@?"}}}),function(){"use strict";angular.module("patternfly.charts").constant("c3ChartDefaults",{getDefaultDonut:function(title){return{title:title,label:{show:!1},width:10}},getDefaultDonutSize:function(){return{height:130}},getDefaultDonutColor:function(){return{pattern:["#0088CE","#D1D1D1"]}},getDefaultDonutTooltip:function(){return{show:!1}},getDefaultDonutLegend:function(){return{show:!1}},getDefaultDonutConfig:function(title){return{donut:this.getDefaultDonut(title),size:this.getDefaultDonutSize(),legend:this.getDefaultDonutLegend(),color:this.getDefaultDonutColor(),tooltip:this.getDefaultDonutTooltip()}},getDefaultSparklineArea:function(){return{zerobased:!0}},getDefaultSparklineSize:function(){return{height:60}},getDefaultSparklineAxis:function(){return{x:{show:!1},y:{show:!1}}},getDefaultSparklineColor:function(){return{pattern:["#0088ce","#00659c","#3f9c35","#ec7a08","#cc0000"]}},getDefaultSparklineLegend:function(){return{show:!1}},getDefaultSparklinePoint:function(){return{r:1,focus:{expand:{r:4}}}},getDefaultSparklineTooltip:function(){return{contents:function(d){return'<span class="c3-tooltip-sparkline">'+d[0].value+" "+d[0].name+"</span>"}}},getDefaultSparklineConfig:function(){return{area:this.getDefaultSparklineArea(),size:this.getDefaultSparklineSize(),axis:this.getDefaultSparklineAxis(),color:this.getDefaultSparklineColor(),legend:this.getDefaultSparklineLegend(),point:this.getDefaultSparklinePoint(),tooltip:this.getDefaultSparklineTooltip()}}})}(),function(c3){"use strict";angular.module("patternfly.charts").directive("pfC3Chart",["$timeout",function($timeout){return{restrict:"A",scope:{config:"="},template:'<div id=""></div>',replace:!0,link:function(scope,element,attrs){scope.$watch("config",function(){$timeout(function(){var chartData=scope.config;chartData.bindto="#"+attrs.id,c3.generate(chartData)})},!0)}}}])}(c3),angular.module("patternfly.charts").directive("pfDonutPctChart",["c3ChartDefaults","$timeout",function(c3ChartDefaults,$timeout){"use strict";return{restrict:"A",scope:{config:"=",data:"=",centerLabel:"=?"},replace:!0,templateUrl:"charts/donut/donut-pct-chart.html",controller:["$scope",function($scope){var donutTooltip;$scope.donutChartId="donutChart",$scope.config.chartId&&($scope.donutChartId=$scope.config.chartId+$scope.donutChartId),$scope.updateAvailable=function(){$scope.data.available=$scope.data.total-$scope.data.used},void 0===$scope.data.available&&$scope.updateAvailable(),$scope.getStatusColor=function(used,thresholds){var color="#0088CE";return thresholds&&(used>=thresholds.error?color="#CC0000":used>=thresholds.warning&&(color="#EC7A08")),color},$scope.statusDonutColor=function(scope){var color,percentUsed;return color={pattern:[]},percentUsed=scope.data.used/scope.data.total*100,color.pattern[0]=$scope.getStatusColor(percentUsed,scope.config.thresholds),color.pattern[1]="#D1D1D1",color},donutTooltip=function(scope){return{contents:function(d){var tooltipHtml;return tooltipHtml=scope.config.tooltipFn?'<span class="donut-tooltip-pf" style="white-space: nowrap;">'+scope.config.tooltipFn(d)+"</span>":'<span class="donut-tooltip-pf" style="white-space: nowrap;">'+Math.round(100*d[0].ratio)+"% "+$scope.config.units+" "+d[0].name+"</span>"}}},$scope.getDonutData=function(scope){return{columns:[["Used",scope.data.used],["Available",scope.data.available]],type:"donut",donut:{label:{show:!1}},groups:[["used","available"]],order:null}},$scope.updateAll=function(scope){$scope.updateAvailable(),$scope.config.data=$scope.getDonutData($scope),$scope.config.color=$scope.statusDonutColor($scope),$scope.config.tooltip=donutTooltip(scope)},$scope.config=$.extend(!0,c3ChartDefaults.getDefaultDonutConfig(),$scope.config),$scope.updateAll($scope)}],link:function(scope,element){var setupDonutChartTitle=function(){$timeout(function(){var donutChartTitle,bigText,smText;donutChartTitle=element[0].querySelector("text.c3-chart-arcs-title"),scope.config.centerLabelFn?donutChartTitle.innerHTML=scope.config.centerLabelFn(scope):"none"===scope.centerLabel?donutChartTitle.innerHTML="":(bigText=scope.data.used,smText=scope.config.units+" Used","available"===scope.centerLabel?(bigText=scope.data.available,smText=scope.config.units+" Available"):"percent"===scope.centerLabel&&(bigText=Math.round(scope.data.used/scope.data.total*100)+"%",smText="of "+scope.data.total+" "+scope.config.units),donutChartTitle&&(donutChartTitle.innerHTML='<tspan dy="0" x="0" class="donut-title-big-pf">'+bigText+'</tspan><tspan dy="20" x="0" class="donut-title-small-pf">'+smText+"</tspan>"))},300)};scope.$watch("config",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("data",function(){scope.updateAll(scope),setupDonutChartTitle()},!0),scope.$watch("centerLabel",function(){setupDonutChartTitle()})}}}]),angular.module("patternfly.charts").directive("pfSparklineChart",["c3ChartDefaults",function(c3ChartDefaults){"use strict";return{restrict:"A",scope:{config:"=",chartData:"=",chartHeight:"=?",showXAxis:"=?",showYAxis:"=?"},replace:!0,templateUrl:"charts/sparkline/sparkline-chart.html",controller:["$scope",function($scope){$scope.sparklineChartId="sparklineChart",$scope.config.chartId&&($scope.sparklineChartId=$scope.config.chartId+$scope.sparklineChartId),$scope.getSparklineData=function(chartData){return{x:chartData.xData[0],columns:[chartData.xData,chartData.yData],type:"area"}},$scope.getTooltipTableHTML=function(tipRows){return'<div class="module-triangle-bottom">  <table class="c3-tooltip">    <tbody>'+tipRows+"    </tbody>  </table></div>"},$scope.sparklineTooltip=function(){return{contents:function(d){var tipRows,percentUsed;if($scope.config.tooltipFn)tipRows=$scope.config.tooltipFn(d);else switch($scope.config.tooltipType){case"usagePerDay":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows='<tr>  <th colspan="2">'+d[0].x.toLocaleDateString()+'</th></tr><tr>  <td class="name">'+percentUsed+'%:</td>  <td class="value text-nowrap">'+d[0].value+" "+$scope.config.units+" "+d[0].name+"</td></tr>";break;case"valuePerDay":tipRows='<tr>  <td class="value">'+d[0].x.toLocaleDateString()+'</td>  <td class="value text-nowrap">'+d[0].value+" "+d[0].name+"</td></tr>";break;case"percentage":percentUsed=Math.round(d[0].value/$scope.chartData.total*100),tipRows='<tr>  <td class="name">'+percentUsed+"%</td></tr>";break;default:tipRows=c3ChartDefaults.getDefaultSparklineTooltip().contents(d)}return $scope.getTooltipTableHTML(tipRows)},position:function(data,width,height,element){var center,top,chartBox,graphOffsetX,x;try{return center=parseInt(element.getAttribute("x")),top=parseInt(element.getAttribute("y")),chartBox=document.querySelector("#"+$scope.sparklineChartId).getBoundingClientRect(),graphOffsetX=document.querySelector("#"+$scope.sparklineChartId+" g.c3-axis-y").getBoundingClientRect().right,x=Math.max(0,center+graphOffsetX-chartBox.left-Math.floor(width/2)),{top:top-height,left:Math.min(x,chartBox.width-width)}}catch(e){}}}},void 0===$scope.showXAxis&&($scope.showXAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),void 0===$scope.showYAxis&&($scope.showYAxis=void 0!==$scope.config.showAxis&&$scope.config.showAxis),$scope.defaultConfig=c3ChartDefaults.getDefaultSparklineConfig(),$scope.defaultConfig.axis={x:{show:$scope.showXAxis===!0,type:"timeseries",tick:{format:function(){return""}}},y:{show:$scope.showYAxis===!0,tick:{format:function(){return""}}}},$scope.defaultConfig.tooltip=$scope.sparklineTooltip(),$scope.chartHeight&&($scope.defaultConfig.size.height=$scope.chartHeight),$scope.defaultConfig.units="",$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config),$scope.config.data=$scope.getSparklineData($scope.chartData)}],link:function(scope){scope.$watch("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config)},!0),scope.$watch("chartHeight",function(){scope.config.size.height=scope.chartHeight}),scope.$watch("showXAxis",function(){scope.config.axis.x.show=scope.showXAxis===!0}),scope.$watch("showYAxis",function(){scope.config.axis.y.show=scope.showYAxis===!0}),scope.$watch("chartData",function(){scope.config.data=scope.getSparklineData(scope.chartData)},!0)}}}]),angular.module("patternfly.charts").directive("pfUtilizationChart",function(){"use strict";return{restrict:"A",scope:{chartData:"=",config:"=",centerLabel:"=?",donutConfig:"=",sparklineConfig:"=",sparklineChartHeight:"=?",showSparklineXAxis:"=?",showSparklineYAxis:"=?"},replace:!0,templateUrl:"charts/utilization/utilization-chart.html",controller:["$scope",function($scope){void 0===$scope.centerLabel&&($scope.centerLabel="used"),void 0===$scope.donutConfig.units&&($scope.donutConfig.units=$scope.config.units),void 0===$scope.chartData.available&&($scope.chartData.available=$scope.chartData.total-$scope.chartData.used),$scope.config.units=$scope.config.units||$scope.units}],link:function(scope,element){var setupCurrentValues=function(){"available"===scope.centerLabel?(scope.currentValue=scope.chartData.used,scope.currentText="Used"):(scope.currentValue=scope.chartData.total-scope.chartData.used,scope.currentText="Available")};scope.$watch("centerLabel",function(){setupCurrentValues()})}}}),angular.module("patternfly.form").directive("pfDatepicker",function(){"use strict";return{replace:!0,restrict:"A",require:"^form",templateUrl:"form/datepicker/datepicker.html",scope:{options:"=",date:"="},link:function($scope,element){element.datepicker($scope.options),element.datepicker("update",$scope.date),element.datepicker($scope.date).on("changeDate",function(elem){$scope.$apply(function(){$scope.date=elem.date})}),$scope.$watch("date",function(newValue,oldValue){oldValue!==newValue&&element.datepicker("update",newValue)})}}}),angular.module("patternfly.form").directive("pfFormButtons",function(){"use strict";return{replace:!0,require:"^form",templateUrl:"form/form-buttons/form-buttons.html",scope:{pfHandleCancel:"&pfOnCancel",pfHandleSave:"&pfOnSave",pfWorking:"=",pfButtonContainerClass:"@"},link:function(scope,iElement,iAttrs,controller){void 0===scope.pfWorking&&(scope.pfWorking=!1),scope.isInvalid=function(){var invalid=controller.$invalid;return angular.forEach(controller,function(value){value&&value.$error&&value.$error.server&&(invalid=!1)}),invalid}}}}),angular.module("patternfly.form").directive("pfFormGroup",function(){"use strict";function getInput(element){var input=element.find("table");return 0===input.length&&(input=element.find("input"),0===input.length&&(input=element.find("select"),0===input.length&&(input=element.find("textarea")))),input}return{transclude:!0,replace:!0,require:"^form",templateUrl:"form/form-group/form-group.html",scope:{pfLabel:"@",pfField:"@",pfLabelClass:"@",pfInputClass:"@"},link:function(scope,iElement,iAttrs,controller){var field,input=getInput(iElement),type=input.attr("type");iAttrs.pfLabelClass||(iAttrs.pfLabelClass="col-sm-2"),iAttrs.pfInputClass||(iAttrs.pfInputClass="col-sm-5"),scope.pfField||(scope.pfField=input.attr("id")),field=scope.pfField,-1===["checkbox","radio","time"].indexOf(type)&&input.addClass("form-control"),input.attr("required")&&iElement.addClass("required"),controller[field]&&(scope.error=controller[field].$error),scope.hasErrors=function(){return controller[field]&&controller[field].$invalid&&controller[field].$dirty}}}}),angular.module("patternfly.notification",[]).provider("Notifications",function(){"use strict";this.delay=5e3,this.verbose=!0,this.notifications={},this.persist={error:!0,httpError:!0},this.setDelay=function(delay){return this.delay=delay,this},this.setVerbose=function(verbose){return this.verbose=verbose,this},this.setPersist=function(persist){this.persist=persist},this.$get=["$rootScope","$timeout","$log",function($rootScope,$timeout,$log){function createNotifyMethod(mode){return function(message){notifications.message(modes[mode].type,modes[mode].header,message,persist[mode]),verbose&&$log[modes[mode].log](message)}}var delay=this.delay,notifications=this.notifications,verbose=this.verbose,persist=this.persist,scheduleMessagePop=function(){$timeout(function(){var i;for(i=0;i<$rootScope.notifications.data.length;i++)$rootScope.notifications.data[i].isPersistent||$rootScope.notifications.data.splice(i,1)},delay)},modes={info:{type:"info",header:"Info!",log:"info"},success:{type:"success",header:"Success!",log:"info"},error:{type:"danger",header:"Error!",log:"error"},warn:{type:"warning",header:"Warning!",log:"warn"}};return $rootScope.notifications={},$rootScope.notifications.data=[],$rootScope.notifications.remove=function(index){$rootScope.notifications.data.splice(index,1)},$rootScope.notifications||($rootScope.notifications.data=[]),notifications.message=function(type,header,message,isPersistent){$rootScope.notifications.data.push({type:type,header:header,message:message,isPersistent:isPersistent}),scheduleMessagePop()},angular.forEach(modes,function(mode,index){notifications[index]=createNotifyMethod(index)}),notifications.httpError=function(message,httpResponse){message+=" ("+(httpResponse.data.message||httpResponse.data.cause||httpResponse.data.cause||httpResponse.data.errorMessage)+")",notifications.message("danger","Error!",message,persist.httpError),verbose&&$log.error(message)},notifications}]}),angular.module("patternfly.notification").directive("pfNotification",function(){"use strict";return{scope:{pfNotificationType:"=",pfNotificationMessage:"=",pfNotificationHeader:"=",pfNotificationPersistent:"=",pfNotificationIndex:"="},restrict:"E",templateUrl:"notification/notification.html"}}),angular.module("patternfly.notification").directive("pfNotificationList",function(){"use strict";return{restrict:"E",templateUrl:"notification/notification-list.html"}}),angular.module("patternfly.select",[]).directive("pfSelect",function($timeout){"use strict";return{restrict:"A",require:"?ngModel",scope:{selectPickerOptions:"=pfSelect"},link:function(scope,element,attrs,ngModel){var optionCollectionList,optionCollection,$render=ngModel.$render;element.selectpicker(scope.selectPickerOptions),ngModel.$render=function(){$render.apply(this,arguments),$timeout(function(){element.selectpicker("refresh")},0,!1)},attrs.ngOptions&&(optionCollectionList=attrs.ngOptions.split("in "),optionCollection=optionCollectionList[optionCollectionList.length-1],scope.$watchCollection(optionCollection,function(){element.selectpicker("refresh")})),attrs.$observe("disabled",function(){element.selectpicker("refresh")})}}}),angular.module("patternfly.utils").directive("pfTransclude",function(){"use strict";return{restrict:"A",link:function($scope,$element,$attrs,controller,$transclude){var iChildScope,iScopeType;if(!$transclude)throw new Error("pfTransclude - Illegal use of pfTransclude directive in the template! No parent directive that requires a transclusion found. Element: {0}");switch(iScopeType=$attrs.pfTransclude||"sibling"){case"sibling":$transclude(function(clone){$element.empty(),$element.append(clone)});break;case"parent":$transclude($scope,function(clone){$element.empty(),$element.append(clone)});break;case"child":iChildScope=$scope.$new(),$transclude(iChildScope,function(clone){$element.empty(),$element.append(clone),$element.on("$destroy",function(){iChildScope.$destroy()})})}}}}),angular.module("patternfly.validation",[]).directive("pfValidation",function($timeout){"use strict";return{restrict:"A",require:"ngModel",scope:{pfValidation:"&",pfValidationDisabled:"="},link:function(scope,element,attrs,ctrl){function validate(){var valid,val=scope.inputCtrl.$modelValue,valFunc=scope.pfValidation({input:val});attrs.pfValidation||(valFunc=!0),valid=!val||valFunc||""===val,toggleErrorClass(scope.valEnabled&&!valid?!0:!1)}function toggleErrorClass(add){var messageElement=element.next(),parentElement=element.parent(),hasErrorM=parentElement.hasClass("has-error"),wasHidden=messageElement.hasClass("ng-hide");scope.inputCtrl.$setValidity("pf-validation",!add),add&&(hasErrorM||parentElement.addClass("has-error"),wasHidden&&messageElement.removeClass("ng-hide")),add||(hasErrorM&&parentElement.removeClass("has-error"),wasHidden||messageElement.addClass("ng-hide"))}scope.inputCtrl=ctrl,scope.valEnabled=!attrs.pfValidationDisabled,scope.$watch("pfValidationDisabled",function(newVal){scope.valEnabled=!newVal,newVal?(scope.inputCtrl.$setValidity("pfValidation",!0),toggleErrorClass(!1)):validate()}),attrs.pfValidation?$timeout(function(){validate()},0):!scope.inputCtrl.$valid&&scope.inputCtrl.$dirty&&toggleErrorClass(!0),scope.$watch("inputCtrl.$valid",function(isValid){toggleErrorClass(isValid?!1:!0)}),scope.$watch("inputCtrl.$modelValue",function(){validate()})}}}),angular.module("patternfly.views").directive("pfDataList",[function(){"use strict";return{restrict:"A",scope:{config:"=?",items:"=",eventId:"@id"},transclude:!0,templateUrl:"views/datalist/data-list.html",controller:["$scope",function($scope){$scope.defaultConfig={selectItems:!1,multiSelect:!1,dblClick:!1,selectionMatchProp:"uuid",selectedItems:[],checkDisabled:!1,showSelectBox:!0,rowHeight:36,onSelect:null,onSelectionChange:null,onCheckBoxChange:null,onClick:null,onDblClick:null},$scope.config=$.extend(!0,angular.copy($scope.defaultConfig),$scope.config)}],link:function(scope,element,attrs){attrs.$observe("config",function(){scope.config=$.extend(!0,angular.copy(scope.defaultConfig),scope.config),scope.config.selectItems||(scope.config.selectedItems=[]),!scope.config.multiSelect&&scope.config.selectedItems&&scope.config.selectedItems.length>0&&(scope.config.selectedItems=[scope.config.selectedItems[0]])}),scope.itemClick=function(e,item){var alreadySelected,selectionChanged=!1,continueEvent=!0;return scope.checkDisabled(item)?continueEvent:(scope.config&&scope.config.selectItems&&item&&(scope.config.multiSelect&&!scope.config.dblClick?(alreadySelected=_.find(scope.config.selectedItems,function(itemObj){return itemObj===item}),alreadySelected?scope.config.selectedItems=_.without(scope.config.selectedItems,item):(scope.config.selectedItems.push(item),selectionChanged=!0)):scope.config.selectedItems[0]===item?(scope.config.dblClick||(scope.config.selectedItems=[],selectionChanged=!0),continueEvent=!1):(scope.config.selectedItems=[item],selectionChanged=!0),selectionChanged&&scope.config.onSelect&&scope.config.onSelect(item,e),selectionChanged&&scope.config.onSelectionChange&&scope.config.onSelectionChange(scope.config.selectedItems,e)),scope.config.onClick&&scope.config.onClick(item,e),continueEvent)},scope.dblClick=function(e,item){scope.config.onDblClick&&scope.config.onDblClick(item,e)},scope.checkBoxChange=function(item){scope.config.onCheckBoxChange&&scope.config.onCheckBoxChange(item)},scope.isSelected=function(item){var matchProp=scope.config.selectionMatchProp;return scope.config.selectedItems.length?_.find(scope.config.selectedItems,function(itemObj){return itemObj[matchProp]===item[matchProp]}):!1},scope.checkDisabled=function(item){return scope.config.checkDisabled&&scope.config.checkDisabled(item)}}}}]),angular.module("patternfly.card").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("card/basic/card.html","<div ng-class=\"showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div class=card-pf-heading><h2 class=card-pf-title>{{headTitle}}</h2></div><span ng-if=subTitle class=card-pf-subtitle>{{subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div></div>")}]),angular.module("patternfly.charts").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("charts/donut/donut-pct-chart.html","<div class=donut-chart-pf><div pf-c3-chart id={{donutChartId}} config=config></div></div>"),$templateCache.put("charts/sparkline/sparkline-chart.html","<div class=sparkline-chart><div pf-c3-chart id={{sparklineChartId}} config=config></div></div>"),$templateCache.put("charts/utilization/utilization-chart.html",'<div class=utilization-chart-pf><span class=title>{{config.title}}</span><div class=current-values><div class="available-count pull-left"><span>{{currentValue}}</span></div><div class="available-text pull-left"><div><span>{{currentText}}</span></div><div><span>of {{chartData.total}} {{config.units}}</span></div></div></div><div pf-donut-pct-chart config=donutConfig data=chartData center-label=centerLabel></div><div pf-sparkline-chart config=sparklineConfig chart-data=chartData chart-height=sparklineChartHeight show-x-axis=showSparklineXAxis show-y-axis=showSparklineYAxis></div><span class="pull-left legend-text">{{legendLeftText}}</span> <span class="pull-right legend-text">{{legendRightText}}</span></div>')}]),angular.module("patternfly.form").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("form/datepicker/datepicker.html",'<div class="input-group date"><input class="form-control"> <span class=input-group-addon><span class="fa fa-calendar"></span></span></div>'),$templateCache.put("form/form-buttons/form-buttons.html",'<div class=form-group><div class="{{ pfButtonContainerClass }}"><div class="control-group buttons"><button class="btn btn-default" type=button ng-click=pfHandleCancel() ng-disabled=pfWorking translate>Cancel</button> <button class="btn btn-primary" ng-click="pfHandleSave(); pfWorking = true" ng-disabled="isInvalid() || pfWorking"><i class="icon-spinner icon-spin" ng-show=pfWorking></i> <span ng-show=pfWorking translate>Saving...</span> <span ng-hide=pfWorking translate>Save</span></button></div></div></div>'),$templateCache.put("form/form-group/form-group.html",'<div class=form-group ng-class="{ \'has-error\' : hasErrors() }"><label for="{{ pfField }}" class="control-label {{ pfLabelClass }}">{{ pfLabel }}</label><div class="{{ pfInputClass }}"><span ng-transclude></span> <span class=help-block ng-show=error.messages><ul><li ng-repeat="message in error.messages">{{ message }}</li></ul></span></div></div>')}]),angular.module("patternfly.notification").run(["$templateCache",function($templateCache){"use strict";$templateCache.put("notification/notification-list.html",'<div data-ng-show="notifications.data.length > 0"><div ng-repeat="notification in notifications.data"><pf-notification pf-notification-type=notification.type pf-notification-header=notification.header pf-notification-message=notification.message pf-notification-persistent=notification.isPersistent pf-notification-index=$index></pf-notification></div></div>'),$templateCache.put("notification/notification.html",'<div class="alert alert-{{pfNotificationType}}"><button ng-show=pfNotificationPersistent type=button class=close ng-click=$parent.notifications.remove($index)><span aria-hidden=true>&times;</span><span class=sr-only>Close</span></button> <span class="pficon pficon-ok" ng-show="pfNotificationType === \'success\'"></span> <span class="pficon pficon-info" ng-show="pfNotificationType === \'info\'"></span> <span class="pficon pficon-error-circle-o" ng-show="pfNotificationType === \'danger\'"></span> <span class="pficon pficon-warning-triangle-o" ng-show="pfNotificationType === \'warning\'"></span> <strong>{{pfNotificationHeader}}</strong> {{pfNotificationMessage}}</div>')}]),angular.module("patternfly.views").run(["$templateCache",function($templateCache){"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)"></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>')}]);
\ No newline at end of file
diff --git a/dist/styles/angular-patternfly.css b/dist/styles/angular-patternfly.css
index d2fc3da6e..79bea122e 100644
--- a/dist/styles/angular-patternfly.css
+++ b/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;
diff --git a/dist/styles/angular-patternfly.min.css b/dist/styles/angular-patternfly.min.css
index 46529b83e..4bdef5f22 100644
--- a/dist/styles/angular-patternfly.min.css
+++ b/dist/styles/angular-patternfly.min.css
@@ -1 +1 @@
-.donut-chart-pf{width:100%;float:left;padding-top:10px}.donut-tooltip-pf{background:#434343;color:#fff;opacity:.9;filter:alpha(opacity=90);padding:2px 6px}.donut-title-big-pf{font-size:22px;font-weight:400;color:#333}.donut-title-small-pf{font-size:12px;font-weight:400;color:#333}.utilization-chart-pf .current-values{border-bottom:1px solid #d1d1d1;float:left;padding:0 5px 10px 0;width:100%}.utilization-chart-pf .available-count{font-size:22px;font-weight:300;line-height:22px;margin-bottom:2px;padding-left:0;padding-right:5px}.utilization-chart-pf .title{font-size:15px;font-weight:400}.utilization-chart-pf .available-text{color:#333;font-size:12px;font-weight:400;line-height:12px;margin-bottom:2px;padding-left:5px;padding-right:5px}.utilization-chart-pf .radial-chart{float:left;padding-top:10px;width:100%}.utilization-chart-pf .sparkline-chart{float:left;margin-left:-5px;margin-right:-5px;width:100%}.utilization-chart-pf .legend-text{color:inherit;display:block;font-size:12px;font-weight:400;margin-left:0}.data-list-pf{background:#fff;overflow-x:hidden;overflow-y:auto;padding-bottom:1px}.data-list-pf .list-row{margin-right:0;position:relative;padding-right:0;width:100%}.data-list-pf .list-content{left:15px;position:relative}.data-list-pf .list-content.with-check-box{border-left:solid 2px #d2d2d2;left:30px;margin-left:10px}.data-list-pf .list-content.with-menu{margin-right:30px;right:15px}.data-list-pf .list-check-box{bottom:0;left:20px;position:absolute;top:0;width:20px}.data-list-pf .data-list-loading{background:rgba(0,0,0,.05)}.data-list-pf .list-group-item:first-of-type{margin-top:0}.data-list-pf .list-group-item .list-column{float:left;padding:5px 0}.data-list-pf .list-group-item .pficon{-webkit-align-items:center;align-items:center;color:#1186C1!important;font-size:26px;width:26px}.data-list-pf .list-group-item.active,.data-list-pf .list-group-item.active:focus,.data-list-pf .list-group-item.active:hover{background-color:#def3ff;border-color:#def3ff;color:#000}.data-list-pf .list-group-item:focus,.data-list-pf .list-group-item:hover{background-color:#ededed;border-color:#ededed}.list-group-item.active .pficon,.list-group-item.active:focus .pficon,.list-group-item.active:hover .pficon{color:#fff!important}.data-list-pf .row-column{padding-right:5px}
\ No newline at end of file
+.donut-chart-pf{width:100%;float:left;padding-top:10px}.donut-tooltip-pf{background:#434343;color:#fff;opacity:.9;filter:alpha(opacity=90);padding:2px 6px}.donut-title-big-pf{font-size:22px;font-weight:400;color:#333}.donut-title-small-pf{font-size:12px;font-weight:400;color:#333}.utilization-chart-pf .current-values{border-bottom:1px solid #d1d1d1;float:left;padding:0 5px 10px 0;width:100%}.utilization-chart-pf .available-count{font-size:22px;font-weight:300;line-height:22px;margin-bottom:2px;padding-left:0;padding-right:5px}.utilization-chart-pf .title{font-size:15px;font-weight:400}.utilization-chart-pf .available-text{color:#333;font-size:12px;font-weight:400;line-height:12px;margin-bottom:2px;padding-left:5px;padding-right:5px}.utilization-chart-pf .radial-chart{float:left;padding-top:10px;width:100%}.utilization-chart-pf .sparkline-chart{float:left;margin-left:-5px;margin-right:-5px;width:100%}.utilization-chart-pf .legend-text{color:inherit;display:block;font-size:12px;font-weight:400;margin-left:0}.data-list-pf{background:#fff;overflow-x:hidden;overflow-y:auto;padding-bottom:1px}.data-list-pf .list-row{margin-right:0;position:relative;padding-right:0;width:100%}.data-list-pf .list-content{left:15px;position:relative}.data-list-pf .list-content.with-check-box{border-left:solid 2px #d2d2d2;left:30px;margin-left:10px}.data-list-pf .list-content.with-menu{margin-right:30px;right:15px}.data-list-pf .list-check-box{bottom:0;left:20px;position:absolute;top:0;width:20px}.data-list-pf .data-list-loading{background:rgba(0,0,0,.05)}.data-list-pf .list-group-item:first-of-type{margin-top:0}.data-list-pf .list-group-item .list-column{float:left;padding:5px 0}.data-list-pf .list-group-item .pficon{-webkit-align-items:center;align-items:center;color:#1186C1;font-size:26px;width:26px}.data-list-pf .list-group-item.active,.data-list-pf .list-group-item.active:focus,.data-list-pf .list-group-item.active:hover{background-color:#def3ff;border-color:#def3ff;color:#000}.data-list-pf .list-group-item:focus,.data-list-pf .list-group-item:hover{background-color:#ededed;border-color:#ededed}.data-list-pf .list-group-item.active .pficon,.data-list-pf .list-group-item.active:focus .pficon,.data-list-pf .list-group-item.active:hover .pficon{color:#fff}.data-list-pf .row-column{padding-right:5px}
\ No newline at end of file
diff --git a/src/utils/transclude-directive.js b/src/utils/transclude-directive.js
index 8a7318353..a52960a30 100644
--- a/src/utils/transclude-directive.js
+++ b/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';
diff --git a/src/views/datalist/data-list-directive.js b/src/views/datalist/data-list-directive.js
index a65aefacc..ebf8c9e3c 100644
--- a/src/views/datalist/data-list-directive.js
+++ b/src/views/datalist/data-list-directive.js
@@ -6,7 +6,7 @@
  *   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
@@ -105,7 +105,7 @@
   </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) {
@@ -177,8 +177,8 @@
             city: "New York",
             state: "New York"
           },
-        ];
-      };
+        ]
+      }
     ]);
   </file>
 </example>
@@ -189,11 +189,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',
@@ -248,7 +247,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);
diff --git a/src/views/datalist/data-list.html b/src/views/datalist/data-list.html
index 2ee5d04a8..d39a1913c 100644
--- a/src/views/datalist/data-list.html
+++ b/src/views/datalist/data-list.html
@@ -7,7 +7,7 @@
                  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="">
+                 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)"/>
diff --git a/src/views/views.module.js b/src/views/views.module.js
index 39285ee6c..efea27b94 100644
--- a/src/views/views.module.js
+++ b/src/views/views.module.js
@@ -5,4 +5,4 @@
  *   Views module for patternfly.
  *
  */
-angular.module('patternfly.views', []);
+angular.module('patternfly.views', ['patternfly.utils']);
diff --git a/styles/angular-patternfly.css b/styles/angular-patternfly.css
index d2fc3da6e..79bea122e 100644
--- a/styles/angular-patternfly.css
+++ b/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;