ngx-avatar-letters
Version:
Angular component to generate avatar initials with configurable styles.
53 lines • 10.9 kB
JavaScript
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWF2YXRhci1sZXR0ZXJzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1hdmF0YXItbGV0dGVycy9zcmMvbGliL25neC1hdmF0YXItbGV0dGVycy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtYXZhdGFyLWxldHRlcnMvc3JjL2xpYi9uZ3gtYXZhdGFyLWxldHRlcnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFTL0MsTUFBTSxPQUFPLHlCQUF5QjtJQVB0QztRQVVFLGFBQVEsR0FBRyxFQUFFLENBQUM7UUFHTCxhQUFRLEdBQTBCO1lBQ3pDLElBQUksRUFBRSxFQUFFO1lBQ1IsU0FBUyxFQUFFLE1BQU07WUFDakIsS0FBSyxFQUFFLFFBQVE7U0FDaEIsQ0FBQztLQWlDSDtJQS9CQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsR0FBRztZQUNqQixHQUFHLElBQUksQ0FBQyxRQUFRO1lBQ2hCLEdBQUcsSUFBSSxDQUFDLE1BQU07WUFDZCxPQUFPLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRTtTQUM1QixDQUFDO1FBRTVCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFRCxXQUFXLENBQUMsSUFBWTtRQUN0QixJQUFJLENBQUMsSUFBSTtZQUFFLE9BQU8sRUFBRSxDQUFDO1FBQ3JCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDckMsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLENBQUM7WUFBRSxPQUFPLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUN6RCxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEUsQ0FBQztJQUVELGNBQWM7UUFDWixNQUFNLE1BQU0sR0FBRztZQUNiLFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztTQUNWLENBQUM7UUFDRixPQUFPLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztJQUMzRCxDQUFDOytHQTFDVSx5QkFBeUI7bUdBQXpCLHlCQUF5Qiw0R0NYdEMsaTFCQThCYyx3NEJEdkJGLFlBQVk7OzRGQUlYLHlCQUF5QjtrQkFQckMsU0FBUzsrQkFDRSxvQkFBb0IsY0FDbEIsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDOzhCQUtkLE1BQU07c0JBQWQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEF2YXRhckNvbmZpZyB9IGZyb20gJy4vbmd4LWF2YXRhci1sZXR0ZXJzLmludGVyZmFjZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtYXZhdGFyLWxldHRlcnMnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICduZ3gtYXZhdGFyLWxldHRlcnMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJ25neC1hdmF0YXItbGV0dGVycy5jb21wb25lbnQuaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIE5neEF2YXRhckxldHRlcnNDb21wb25lbnQge1xuICBASW5wdXQoKSBjb25maWchOiBBdmF0YXJDb25maWc7XG5cbiAgaW5pdGlhbHMgPSAnJztcbiAgZmluYWxDb25maWchOiBSZXF1aXJlZDxBdmF0YXJDb25maWc+O1xuXG4gIHJlYWRvbmx5IERFRkFVTFRTOiBQYXJ0aWFsPEF2YXRhckNvbmZpZz4gPSB7XG4gICAgc2l6ZTogNDAsXG4gICAgdGV4dENvbG9yOiAnI2ZmZicsXG4gICAgc2hhcGU6ICdjaXJjbGUnLFxuICB9O1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuZmluYWxDb25maWcgPSB7XG4gICAgICAuLi50aGlzLkRFRkFVTFRTLFxuICAgICAgLi4udGhpcy5jb25maWcsXG4gICAgICBiZ0NvbG9yOiB0aGlzLmNvbmZpZy5iZ0NvbG9yIHx8IHRoaXMuZ2V0UmFuZG9tQ29sb3IoKSxcbiAgICB9IGFzIFJlcXVpcmVkPEF2YXRhckNvbmZpZz47XG5cbiAgICB0aGlzLmluaXRpYWxzID0gdGhpcy5nZXRJbml0aWFscyh0aGlzLmZpbmFsQ29uZmlnLm5hbWUpO1xuICB9XG5cbiAgZ2V0SW5pdGlhbHMobmFtZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICBpZiAoIW5hbWUpIHJldHVybiAnJztcbiAgICBjb25zdCBwYXJ0cyA9IG5hbWUudHJpbSgpLnNwbGl0KCcgJyk7XG4gICAgaWYgKHBhcnRzLmxlbmd0aCA9PT0gMSkgcmV0dXJuIHBhcnRzWzBdWzBdLnRvVXBwZXJDYXNlKCk7XG4gICAgcmV0dXJuIChwYXJ0c1swXVswXSArIHBhcnRzW3BhcnRzLmxlbmd0aCAtIDFdWzBdKS50b1VwcGVyQ2FzZSgpO1xuICB9XG5cbiAgZ2V0UmFuZG9tQ29sb3IoKTogc3RyaW5nIHtcbiAgICBjb25zdCBjb2xvcnMgPSBbXG4gICAgICAnI0Y0NDMzNicsXG4gICAgICAnI0U5MUU2MycsXG4gICAgICAnIzlDMjdCMCcsXG4gICAgICAnIzNGNTFCNScsXG4gICAgICAnIzAzQTlGNCcsXG4gICAgICAnIzAwOTY4OCcsXG4gICAgICAnIzRDQUY1MCcsXG4gICAgICAnI0ZGOTgwMCcsXG4gICAgICAnIzc5NTU0OCcsXG4gICAgXTtcbiAgICByZXR1cm4gY29sb3JzW01hdGguZmxvb3IoTWF0aC5yYW5kb20oKSAqIGNvbG9ycy5sZW5ndGgpXTtcbiAgfVxufVxuIiwiPGRpdlxuICAqbmdJZj1cIiFmaW5hbENvbmZpZy5pbWFnZVVybDsgZWxzZSBpbWFnZVwiXG4gIFtuZ1N0eWxlXT1cIntcbiAgICAnd2lkdGgucHgnOiBmaW5hbENvbmZpZy5zaXplLFxuICAgICdoZWlnaHQucHgnOiBmaW5hbENvbmZpZy5zaXplLFxuICAgICdiYWNrZ3JvdW5kLWNvbG9yJzogZmluYWxDb25maWcuYmdDb2xvcixcbiAgICAnY29sb3InOiBmaW5hbENvbmZpZy50ZXh0Q29sb3IsXG4gICAgJ2JvcmRlci1yYWRpdXMnOiBmaW5hbENvbmZpZy5zaGFwZSA9PT0gJ2NpcmNsZScgPyAnNTAlJyA6ICc0cHgnLFxuICAgICdkaXNwbGF5JzogJ2ZsZXgnLFxuICAgICdhbGlnbi1pdGVtcyc6ICdjZW50ZXInLFxuICAgICdqdXN0aWZ5LWNvbnRlbnQnOiAnY2VudGVyJyxcbiAgICAnZm9udC1zaXplLnB4JzogZmluYWxDb25maWcuc2l6ZSAqIDAuNCxcbiAgICAnZm9udC13ZWlnaHQnOiA2MDAsXG4gICAgJ3RleHQtdHJhbnNmb3JtJzogJ3VwcGVyY2FzZSdcbiAgfVwiXG4+XG4gIHt7IGluaXRpYWxzIH19XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNpbWFnZT5cbiAgPGltZ1xuICAgIFtzcmNdPVwiZmluYWxDb25maWcuaW1hZ2VVcmxcIlxuICAgIFthbHRdPVwiZmluYWxDb25maWcubmFtZVwiXG4gICAgW25nU3R5bGVdPVwie1xuICAgICAgJ3dpZHRoLnB4JzogZmluYWxDb25maWcuc2l6ZSxcbiAgICAgICdoZWlnaHQucHgnOiBmaW5hbENvbmZpZy5zaXplLFxuICAgICAgJ2JvcmRlci1yYWRpdXMnOiBmaW5hbENvbmZpZy5zaGFwZSA9PT0gJ2NpcmNsZScgPyAnNTAlJyA6ICc0cHgnLFxuICAgICAgJ29iamVjdC1maXQnOiAnY292ZXInXG4gICAgfVwiXG4gIC8+XG48L25nLXRlbXBsYXRlPiJdfQ==