ngx-letters-avatar/fesm2015/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';

let LettersAvatarComponent = class LettersAvatarComponent {
    constructor() {
        this.avatarName = "";
        this.className = "";
        this.fontFamily = "arial";
        this.circular = false;
    }
    ngOnInit() {
        if (!this.width && !this.height)
            this.width = 60;
    }
    ngAfterViewInit() {
        this.drawAvatar();
    }
    drawAvatar() {
        let 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));
    }
    createCanvasURI(name = "") {
        let 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);

let LettersAvatarModule = class LettersAvatarModule {
};
LettersAvatarModule = __decorate([
    NgModule({
        declarations: [LettersAvatarComponent],
        imports: [
            CommonModule
        ],
        exports: [LettersAvatarComponent]
    })
], LettersAvatarModule);

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

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