ngx-letters-avatar/fesm5/ngx-letters-avatar.js

Angular package that generates avatar with the initial letters of the provided name

import { __decorate } from 'tslib';
import { Input, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

var LettersAvatarComponent = /** @class */ (function () {
    function LettersAvatarComponent() {
        this.avatarName = "";
        this.className = "";
        this.fontFamily = "arial";
        this.circular = false;
    }
    LettersAvatarComponent.prototype.ngOnInit = function () {
        if (!this.width && !this.height)
            this.width = 60;
    };
    LettersAvatarComponent.prototype.ngAfterViewInit = function () {
        this.drawAvatar();
    };
    LettersAvatarComponent.prototype.drawAvatar = function () {
        var image = document.getElementById("avatar-img"), name = this.avatarName;
        image.id = this.id ? this.id : this.avatarName.replace(/\s/g, "") + "Avatar";
        image.setAttribute('alt', name + " avatar");
        image.setAttribute('width', (this.width ? this.width : this.height) + "px");
        image.setAttribute('height', (this.height ? this.height : this.width) + "px");
        image.setAttribute('class', this.className);
        if (this.circular)
            image.style.borderRadius = "50%";
        if (this.borderRadius)
            image.style.borderRadius = this.borderRadius + "px";
        if (this.src)
            image.setAttribute('src', this.src);
        else
            image.setAttribute('src', this.createCanvasURI(name));
    };
    LettersAvatarComponent.prototype.createCanvasURI = function (name) {
        if (name === void 0) { name = ""; }
        var colours = [
            "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e",
            "#f7ca18", "#f15a22", "#1ba39c", "#2abb9b", "#1f3a93",
            "#96281b", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6",
            "#f39c12", "#d35400", "#c0392b", "#22a7f0", "#2c3e50"
        ], nameSplit = String(name).toUpperCase().split(' '), size = this.width, initials, charIndex, colourIndex, canvas, context, dataURI;
        if (nameSplit.length < 2)
            initials = nameSplit[0] ? nameSplit[0].charAt(0) : '?';
        else
            initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
        if (window.devicePixelRatio)
            size = size * window.devicePixelRatio;
        charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64;
        colourIndex = charIndex % 20;
        canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        context = canvas.getContext("2d");
        context.fillStyle = colours[colourIndex - 1];
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.font = Math.round(canvas.width / 2.7) + "px " + this.fontFamily;
        context.textAlign = "center";
        context.fillStyle = "#FFF";
        context.textBaseline = "middle";
        initials = initials.split("").join(String.fromCharCode(8202));
        context.fillText(initials, size / 2, size / 1.85);
        dataURI = canvas.toDataURL();
        canvas = null;
        return dataURI;
    };
    __decorate([
        Input('width')
    ], LettersAvatarComponent.prototype, "width", void 0);
    __decorate([
        Input('height')
    ], LettersAvatarComponent.prototype, "height", void 0);
    __decorate([
        Input('avatarName')
    ], LettersAvatarComponent.prototype, "avatarName", void 0);
    __decorate([
        Input('src')
    ], LettersAvatarComponent.prototype, "src", void 0);
    __decorate([
        Input('className')
    ], LettersAvatarComponent.prototype, "className", void 0);
    __decorate([
        Input('fontFamily')
    ], LettersAvatarComponent.prototype, "fontFamily", void 0);
    __decorate([
        Input('circular')
    ], LettersAvatarComponent.prototype, "circular", void 0);
    __decorate([
        Input('borderRadius')
    ], LettersAvatarComponent.prototype, "borderRadius", void 0);
    __decorate([
        Input('id')
    ], LettersAvatarComponent.prototype, "id", void 0);
    LettersAvatarComponent = __decorate([
        Component({
            selector: 'ngx-letters-avatar',
            template: "<img id=\"avatar-img\">",
            styles: [":host{display:inline-flex}"]
        })
    ], LettersAvatarComponent);
    return LettersAvatarComponent;
}());

var LettersAvatarModule = /** @class */ (function () {
    function LettersAvatarModule() {
    }
    LettersAvatarModule = __decorate([
        NgModule({
            declarations: [LettersAvatarComponent],
            imports: [
                CommonModule
            ],
            exports: [LettersAvatarComponent]
        })
    ], LettersAvatarModule);
    return LettersAvatarModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { LettersAvatarModule, LettersAvatarComponent as ɵa };
//# sourceMappingURL=ngx-letters-avatar.js.map