ngx-avatar-letters/fesm2022/ngx-avatar-letters.mjs

Angular component to generate avatar initials with configurable styles.

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

class NgxAvatarLettersComponent {
    constructor() {
        this.initials = '';
        this.DEFAULTS = {
            size: 40,
            textColor: '#fff',
            shape: 'circle',
        };
    }
    ngOnInit() {
        this.finalConfig = {
            ...this.DEFAULTS,
            ...this.config,
            bgColor: this.config.bgColor || this.getRandomColor(),
        };
        this.initials = this.getInitials(this.finalConfig.name);
    }
    getInitials(name) {
        if (!name)
            return '';
        const parts = name.trim().split(' ');
        if (parts.length === 1)
            return parts[0][0].toUpperCase();
        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    }
    getRandomColor() {
        const colors = [
            '#F44336',
            '#E91E63',
            '#9C27B0',
            '#3F51B5',
            '#03A9F4',
            '#009688',
            '#4CAF50',
            '#FF9800',
            '#795548',
        ];
        return colors[Math.floor(Math.random() * colors.length)];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxAvatarLettersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgxAvatarLettersComponent, isStandalone: true, selector: "ngx-avatar-letters", inputs: { config: "config" }, ngImport: i0, template: "<div\n  *ngIf=\"!finalConfig.imageUrl; else image\"\n  [ngStyle]=\"{\n    'width.px': finalConfig.size,\n    'height.px': finalConfig.size,\n    'background-color': finalConfig.bgColor,\n    'color': finalConfig.textColor,\n    'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n    'display': 'flex',\n    'align-items': 'center',\n    'justify-content': 'center',\n    'font-size.px': finalConfig.size * 0.4,\n    'font-weight': 600,\n    'text-transform': 'uppercase'\n  }\"\n>\n  {{ initials }}\n</div>\n\n<ng-template #image>\n  <img\n    [src]=\"finalConfig.imageUrl\"\n    [alt]=\"finalConfig.name\"\n    [ngStyle]=\"{\n      'width.px': finalConfig.size,\n      'height.px': finalConfig.size,\n      'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n      'object-fit': 'cover'\n    }\"\n  />\n</ng-template>", styles: ["<div\n  *ngIf=\"!finalConfig.imageUrl; else image\"\n  [ngStyle]=\"{\n    'width.px': finalConfig.size,\n    'height.px': finalConfig.size,\n    'background-color': finalConfig.bgColor,\n    'color': finalConfig.textColor,\n    'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n    'display': 'flex',\n    'align-items': 'center',\n    'justify-content': 'center',\n    'font-size.px': finalConfig.size * 0.4,\n    'font-weight': 600,\n    'text-transform': 'uppercase'\n  }\"\n>\n  {{ initials }}\n</div>\n\n<ng-template #image>\n  <img\n    [src]=\"finalConfig.imageUrl\"\n    [alt]=\"finalConfig.name\"\n    [ngStyle]=\"{\n      'width.px': finalConfig.size,\n      'height.px': finalConfig.size,\n      'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n      'object-fit': 'cover'\n    }\"\n  />\n</ng-template>"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxAvatarLettersComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-avatar-letters', standalone: true, imports: [CommonModule], template: "<div\n  *ngIf=\"!finalConfig.imageUrl; else image\"\n  [ngStyle]=\"{\n    'width.px': finalConfig.size,\n    'height.px': finalConfig.size,\n    'background-color': finalConfig.bgColor,\n    'color': finalConfig.textColor,\n    'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n    'display': 'flex',\n    'align-items': 'center',\n    'justify-content': 'center',\n    'font-size.px': finalConfig.size * 0.4,\n    'font-weight': 600,\n    'text-transform': 'uppercase'\n  }\"\n>\n  {{ initials }}\n</div>\n\n<ng-template #image>\n  <img\n    [src]=\"finalConfig.imageUrl\"\n    [alt]=\"finalConfig.name\"\n    [ngStyle]=\"{\n      'width.px': finalConfig.size,\n      'height.px': finalConfig.size,\n      'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n      'object-fit': 'cover'\n    }\"\n  />\n</ng-template>", styles: ["<div\n  *ngIf=\"!finalConfig.imageUrl; else image\"\n  [ngStyle]=\"{\n    'width.px': finalConfig.size,\n    'height.px': finalConfig.size,\n    'background-color': finalConfig.bgColor,\n    'color': finalConfig.textColor,\n    'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n    'display': 'flex',\n    'align-items': 'center',\n    'justify-content': 'center',\n    'font-size.px': finalConfig.size * 0.4,\n    'font-weight': 600,\n    'text-transform': 'uppercase'\n  }\"\n>\n  {{ initials }}\n</div>\n\n<ng-template #image>\n  <img\n    [src]=\"finalConfig.imageUrl\"\n    [alt]=\"finalConfig.name\"\n    [ngStyle]=\"{\n      'width.px': finalConfig.size,\n      'height.px': finalConfig.size,\n      'border-radius': finalConfig.shape === 'circle' ? '50%' : '4px',\n      'object-fit': 'cover'\n    }\"\n  />\n</ng-template>"] }]
        }], propDecorators: { config: [{
                type: Input
            }] } });

const AVATAR_SHAPES = ['circle', 'square', 'rounded'];

/*
 * Public API Surface of ngx-avatar-letters
 */

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

export { AVATAR_SHAPES, NgxAvatarLettersComponent };
//# sourceMappingURL=ngx-avatar-letters.mjs.map