ngx-letters-avatar-14/fesm2020/ngx-letters-avatar-14.mjs

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

import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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;
    }
}
LettersAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LettersAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LettersAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: LettersAvatarComponent, selector: "ngx-letters-avatar", inputs: { width: "width", height: "height", avatarName: "avatarName", src: "src", className: "className", fontFamily: "fontFamily", circular: "circular", borderRadius: "borderRadius", id: "id" }, ngImport: i0, template: "<img id=\"avatar-img\">", styles: [":host{display:inline-flex}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LettersAvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-letters-avatar', template: "<img id=\"avatar-img\">", styles: [":host{display:inline-flex}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
                type: Input,
                args: ['width']
            }], height: [{
                type: Input,
                args: ['height']
            }], avatarName: [{
                type: Input,
                args: ['avatarName']
            }], src: [{
                type: Input,
                args: ['src']
            }], className: [{
                type: Input,
                args: ['className']
            }], fontFamily: [{
                type: Input,
                args: ['fontFamily']
            }], circular: [{
                type: Input,
                args: ['circular']
            }], borderRadius: [{
                type: Input,
                args: ['borderRadius']
            }], id: [{
                type: Input,
                args: ['id']
            }] } });

class LettersAvatarModule {
    static forRoot() {
        return {
            ngModule: LettersAvatarModule
        };
    }
}
LettersAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LettersAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LettersAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: LettersAvatarModule, declarations: [LettersAvatarComponent], imports: [CommonModule], exports: [LettersAvatarComponent] });
LettersAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LettersAvatarModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LettersAvatarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule
                    ],
                    declarations: [
                        LettersAvatarComponent
                    ],
                    exports: [
                        LettersAvatarComponent
                    ]
                }]
        }] });

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

export { LettersAvatarComponent, LettersAvatarModule };
//# sourceMappingURL=ngx-letters-avatar-14.mjs.map