@indice/ng-components
Version:
Indice common components for Angular v12
48 lines • 6.71 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class AvatarInitialsComponent {
constructor() {
this.large = false;
this.colors = [
'#EB7181', // red
'#468547', // green
'#FFD558', // yellow
'#3670B2', // blue
];
}
ngOnInit() {
this.createInititals();
const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
// assign this to a class if you want to randomly change background colors of the circle.
this.circleColor = this.colors[randomIndex];
}
createInititals() {
if (this.name) {
let initials = '';
for (let i = 0; i < this.name.length; i++) {
if (this.name.charAt(i) === ' ') {
continue;
}
if (this.name.charAt(i) === this.name.charAt(i).toUpperCase()) {
initials += this.name.charAt(i);
if (initials.length === 2) {
break;
}
}
}
this.initials = initials;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AvatarInitialsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: AvatarInitialsComponent, selector: "lib-avatar-initials", inputs: { name: "name", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AvatarInitialsComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-avatar-initials', template: "<div [ngClass]=\"large ? 'avatar-container-large': 'avatar-container'\">\r\n <span [ngClass]=\"large ? 'avatar-text-large': 'avatar-text'\">{{ initials }}</span>\r\n</div>\r\n" }]
}], ctorParameters: () => [], propDecorators: { name: [{
type: Input
}], large: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLWluaXRpYWxzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9hdmF0YXItaW5pdGlhbHMvYXZhdGFyLWluaXRpYWxzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9hdmF0YXItaW5pdGlhbHMvYXZhdGFyLWluaXRpYWxzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUFNekQsTUFBTSxPQUFPLHVCQUF1QjtJQWNsQztRQVZPLFVBQUssR0FBRyxLQUFLLENBQUM7UUFHYixXQUFNLEdBQUc7WUFDZixTQUFTLEVBQUUsTUFBTTtZQUNqQixTQUFTLEVBQUUsUUFBUTtZQUNuQixTQUFTLEVBQUUsU0FBUztZQUNwQixTQUFTLEVBQUUsT0FBTztTQUNuQixDQUFDO0lBRWMsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3ZCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBQy9FLHlGQUF5RjtRQUN6RixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDOUMsQ0FBQztJQUVPLGVBQWU7UUFDckIsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDZCxJQUFJLFFBQVEsR0FBRyxFQUFFLENBQUM7WUFDbEIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7Z0JBQzFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7b0JBQ2hDLFNBQVM7Z0JBQ1gsQ0FBQztnQkFDRCxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxFQUFFLENBQUM7b0JBQzlELFFBQVEsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztvQkFDaEMsSUFBSSxRQUFRLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO3dCQUMxQixNQUFNO29CQUNSLENBQUM7Z0JBQ0gsQ0FBQztZQUNILENBQUM7WUFDRCxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztRQUMzQixDQUFDO0lBQ0gsQ0FBQzs4R0F2Q1UsdUJBQXVCO2tHQUF2Qix1QkFBdUIscUdDTnBDLG9MQUdBOzsyRkRHYSx1QkFBdUI7a0JBSm5DLFNBQVM7K0JBQ0UscUJBQXFCO3dEQUt4QixJQUFJO3NCQURWLEtBQUs7Z0JBR0MsS0FBSztzQkFEWCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1hdmF0YXItaW5pdGlhbHMnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXItaW5pdGlhbHMuY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBBdmF0YXJJbml0aWFsc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgbmFtZTogc3RyaW5nIHwgbnVsbCB8IHVuZGVmaW5lZDtcclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyBsYXJnZSA9IGZhbHNlO1xyXG4gIHB1YmxpYyBpbml0aWFscz86IHN0cmluZztcclxuICBwdWJsaWMgY2lyY2xlQ29sb3IhOiBzdHJpbmc7XHJcbiAgcHJpdmF0ZSBjb2xvcnMgPSBbXHJcbiAgICAnI0VCNzE4MScsIC8vIHJlZFxyXG4gICAgJyM0Njg1NDcnLCAvLyBncmVlblxyXG4gICAgJyNGRkQ1NTgnLCAvLyB5ZWxsb3dcclxuICAgICcjMzY3MEIyJywgLy8gYmx1ZVxyXG4gIF07XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5jcmVhdGVJbml0aXRhbHMoKTtcclxuICAgIGNvbnN0IHJhbmRvbUluZGV4ID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogTWF0aC5mbG9vcih0aGlzLmNvbG9ycy5sZW5ndGgpKTtcclxuICAgIC8vIGFzc2lnbiB0aGlzIHRvIGEgY2xhc3MgaWYgeW91IHdhbnQgdG8gcmFuZG9tbHkgY2hhbmdlIGJhY2tncm91bmQgY29sb3JzIG9mIHRoZSBjaXJjbGUuXHJcbiAgICB0aGlzLmNpcmNsZUNvbG9yID0gdGhpcy5jb2xvcnNbcmFuZG9tSW5kZXhdO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVJbml0aXRhbHMoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5uYW1lKSB7XHJcbiAgICAgIGxldCBpbml0aWFscyA9ICcnO1xyXG4gICAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRoaXMubmFtZS5sZW5ndGg7IGkrKykge1xyXG4gICAgICAgIGlmICh0aGlzLm5hbWUuY2hhckF0KGkpID09PSAnICcpIHtcclxuICAgICAgICAgIGNvbnRpbnVlO1xyXG4gICAgICAgIH1cclxuICAgICAgICBpZiAodGhpcy5uYW1lLmNoYXJBdChpKSA9PT0gdGhpcy5uYW1lLmNoYXJBdChpKS50b1VwcGVyQ2FzZSgpKSB7XHJcbiAgICAgICAgICBpbml0aWFscyArPSB0aGlzLm5hbWUuY2hhckF0KGkpO1xyXG4gICAgICAgICAgaWYgKGluaXRpYWxzLmxlbmd0aCA9PT0gMikge1xyXG4gICAgICAgICAgICBicmVhaztcclxuICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICAgIH1cclxuICAgICAgdGhpcy5pbml0aWFscyA9IGluaXRpYWxzO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8ZGl2IFtuZ0NsYXNzXT1cImxhcmdlID8gJ2F2YXRhci1jb250YWluZXItbGFyZ2UnOiAnYXZhdGFyLWNvbnRhaW5lcidcIj5cclxuICAgIDxzcGFuIFtuZ0NsYXNzXT1cImxhcmdlID8gJ2F2YXRhci10ZXh0LWxhcmdlJzogJ2F2YXRhci10ZXh0J1wiPnt7IGluaXRpYWxzIH19PC9zcGFuPlxyXG48L2Rpdj5cclxuIl19