salix/front/core/components/avatar/index.js

import ngModule from '../../module';
import Component from 'core/lib/component';
import {hashToColor} from '../../lib/string';
import './style.scss';

/**
 * Displays colored avatar based on value.
 *
 * @property {*} val The value
 */
export default class Avatar extends Component {
    get val() {
        return this._val;
    }

    set val(value) {
        this._val = value;

        const val = value || '';
        const el = this.element;
        el.style.backgroundColor = hashToColor(val);
        el.title = val;
    }
}

ngModule.vnComponent('vnAvatar', {
    template: require('./index.html'),
    controller: Avatar,
    bindings: {
        val: '@?'
    },
    transclude: true
});