#1411 Componente leyenda de colores

front/core/components/color-legend/index.html

@@ -0,0 +1,9 @@
+<span
+    ng-class="{'pointer': $ctrl.$attrs['onClick']}"
+    class="mdl-chip mdl-chip--contact"
+    ng-repeat="legend in $ctrl.data"
+    vn-tooltip="{{legend.description}}"
+    ng-click="$ctrl.onClick(legend)">
+    <span class="mdl-chip__contact" ng-style="{backgroundColor: legend.color}"></span>
+    <span class="mdl-chip__text">{{legend.name}}</span>
+</span>

front/core/components/color-legend/index.js

@@ -0,0 +1,24 @@
+import ngModule from '../../module';
+import Component from '../../lib/component';
+import './style.scss';
+
+export default class Controller extends Component {
+    constructor($element, $scope, $attrs) {
+        super($element, $scope);
+        this.$attrs = $attrs;
+    }
+
+    onClick(legend) {
+        this.emit('click', {legend});
+    }
+}
+
+Controller.$inject = ['$element', '$scope', '$attrs'];
+
+ngModule.component('vnColorLegend', {
+    template: require('./index.html'),
+    controller: Controller,
+    bindings: {
+        data: '<?'
+    }
+});

front/core/components/color-legend/style.scss

@@ -0,0 +1,13 @@
+@import "variables";
+
+.mdl-chip--contact {
+    margin-left: 5px;
+    height: 20px;
+    line-height: 5px;
+    float: left    
+}
+
+.mdl-chip--contact .mdl-chip__contact {
+    height: 20px;
+    width: 20px
+}

front/core/components/index.js

@@ -38,6 +38,7 @@ import './td-editable';
 import './th';
 import './input-range';
 import './chip';
+import './color-legend';
 import './input-number';
 import './input-time';
 import './treeview';