iris-ds
Version:
Joveo iris libray
68 lines • 7.71 kB
JavaScript
import { Component, Input } from '@angular/core';
export class AvatarComponent {
constructor() {
this.src = '';
this.name = '';
this.backgroundType = 'solid';
this.size = 'medium';
this.imgStyles = {};
this.nameStyles = {};
this.alt = '';
this.bgColors = [
'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue',
'light-blue', 'cyan', 'teal', 'green', 'light-green',
'lime', 'amber', 'orange', 'deep-orange',
];
this.colorCssClass = '';
}
ngOnChanges() {
if (!this.src) {
this.alt = this.createInitials(this.name);
this.colorCssClass = `${this.backgroundType}-${this.getBackground(this.name)}`;
}
}
createInitials(name) {
return name
.trim()
.split(' ')
.slice(0, 3)
.map(word => word[0])
.join('');
}
getBackground(name) {
return this.bgColors[name.length % this.bgColors.length];
}
}
AvatarComponent.decorators = [
{ type: Component, args: [{
selector: 'iris-avatar',
template: `
<div [ngClass]="size">
<img [ngClass]="size"
*ngIf="src; else initials"
[src]="src"
[alt]="alt"
[ngStyle]="imgStyles"
/>
<ng-template #initials>
<div [ngStyle]="nameStyles"
class="initials"
[ngClass]="colorCssClass">
<span>{{ alt }}</span>
</div>
</ng-template>
</div>
`,
styles: [".small{font-size:10px;width:24px;height:24px}.medium{font-size:14px;width:32px;height:32px}.large{font-size:16px;width:40px;height:40px}.initials,img{border-radius:50%;height:100%;width:100%}.initials{display:grid;place-items:center}.solid-red{background:#f44336;color:#fff}.solid-pink{background:#e91e63;color:#fff}.solid-purple{background:#9c27b0;color:#fff}.solid-deep-purple{background:#673ab7;color:#fff}.solid-indigo{background:#3f51b5;color:#fff}.solid-blue{background:#2196f3;color:#fff}.solid-light-blue{background:#03a9f4;color:#fff}.solid-cyan{background:#00bcd4;color:#fff}.solid-teal{background:#009688;color:#fff}.solid-green{background:#4caf50;color:#fff}.solid-light-green{background:#8bc34a;color:#fff}.solid-lime{background:#cddc39;color:#fff}.solid-amber{background:#ffc107;color:#fff}.solid-orange{background:#ff9800;color:#fff}.solid-deep-orange{background:#ff5722;color:#fff}.subtle-red{background:#ffcdd2;color:rgba(0,0,0,.87)}.subtle-pink{background:#f8bbd0;color:rgba(0,0,0,.87)}.subtle-purple{background:#e1bee7;color:rgba(0,0,0,.87)}.subtle-deep-purple{background:#d1c4e9;color:rgba(0,0,0,.87)}.subtle-indigo{background:#c5cae9;color:rgba(0,0,0,.87)}.subtle-blue{background:#bbdefb;color:rgba(0,0,0,.87)}.subtle-light-blue{background:#b3e5fc;color:rgba(0,0,0,.87)}.subtle-cyan{background:#b2ebf2;color:rgba(0,0,0,.87)}.subtle-teal{background:#b2dfdb;color:rgba(0,0,0,.87)}.subtle-green{background:#c8e6c9;color:rgba(0,0,0,.87)}.subtle-light-green{background:#dcedc8;color:rgba(0,0,0,.87)}.subtle-lime{background:#f0f4c3;color:rgba(0,0,0,.87)}.subtle-amber{background:#ffecb3;color:rgba(0,0,0,.87)}.subtle-orange{background:#ffe0b2;color:rgba(0,0,0,.87)}.subtle-deep-orange{background:#ffccbc;color:rgba(0,0,0,.87)}"]
},] }
];
AvatarComponent.ctorParameters = () => [];
AvatarComponent.propDecorators = {
src: [{ type: Input }],
name: [{ type: Input }],
backgroundType: [{ type: Input }],
size: [{ type: Input }],
imgStyles: [{ type: Input }],
nameStyles: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lyaXMvc3JjL2xpYi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQXVCNUQsTUFBTSxPQUFPLGVBQWU7SUFnQjFCO1FBZlMsUUFBRyxHQUFHLEVBQUUsQ0FBQztRQUNULFNBQUksR0FBRyxFQUFFLENBQUM7UUFDVixtQkFBYyxHQUF1QixPQUFPLENBQUM7UUFDN0MsU0FBSSxHQUFpQyxRQUFRLENBQUE7UUFDN0MsY0FBUyxHQUErQixFQUFFLENBQUM7UUFDM0MsZUFBVSxHQUErQixFQUFFLENBQUM7UUFFckQsUUFBRyxHQUFHLEVBQUUsQ0FBQztRQUNULGFBQVEsR0FBRztZQUNULEtBQUssRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsTUFBTTtZQUN4RCxZQUFZLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsYUFBYTtZQUNwRCxNQUFNLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxhQUFhO1NBQ3pDLENBQUM7UUFDRixrQkFBYSxHQUFHLEVBQUUsQ0FBQztJQUVKLENBQUM7SUFFaEIsV0FBVztRQUNULElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ2IsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUMxQyxJQUFJLENBQUMsYUFBYSxHQUFHLEdBQUcsSUFBSSxDQUFDLGNBQWMsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDO1NBQ2hGO0lBQ0gsQ0FBQztJQUVELGNBQWMsQ0FBQyxJQUFZO1FBQ3pCLE9BQU8sSUFBSTthQUNSLElBQUksRUFBRTthQUNOLEtBQUssQ0FBQyxHQUFHLENBQUM7YUFDVixLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQzthQUNYLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUNwQixJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDZCxDQUFDO0lBRUQsYUFBYSxDQUFDLElBQVk7UUFDeEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMzRCxDQUFDOzs7WUF6REYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxhQUFhO2dCQUN2QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQlQ7O2FBRUY7Ozs7a0JBRUUsS0FBSzttQkFDTCxLQUFLOzZCQUNMLEtBQUs7bUJBQ0wsS0FBSzt3QkFDTCxLQUFLO3lCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaXJpcy1hdmF0YXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW25nQ2xhc3NdPVwic2l6ZVwiPlxuICAgICAgPGltZyBbbmdDbGFzc109XCJzaXplXCJcbiAgICAgICAgKm5nSWY9XCJzcmM7IGVsc2UgaW5pdGlhbHNcIlxuICAgICAgICBbc3JjXT1cInNyY1wiXG4gICAgICAgIFthbHRdPVwiYWx0XCJcbiAgICAgICAgW25nU3R5bGVdPVwiaW1nU3R5bGVzXCJcbiAgICAgIC8+XG4gICAgICA8bmctdGVtcGxhdGUgI2luaXRpYWxzPlxuICAgICAgICA8ZGl2IFtuZ1N0eWxlXT1cIm5hbWVTdHlsZXNcIlxuICAgICAgICAgICAgY2xhc3M9XCJpbml0aWFsc1wiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJjb2xvckNzc0NsYXNzXCI+XG4gICAgICAgICAgPHNwYW4+e3sgYWx0IH19PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL2F2YXRhci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEF2YXRhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIHNyYyA9ICcnO1xuICBASW5wdXQoKSBuYW1lID0gJyc7XG4gIEBJbnB1dCgpIGJhY2tncm91bmRUeXBlOiAnc29saWQnIHwgJ3N1YnRsZScgPSAnc29saWQnO1xuICBASW5wdXQoKSBzaXplOiAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnID0gJ21lZGl1bSdcbiAgQElucHV0KCkgaW1nU3R5bGVzOiB7IFt0eXBlOiBzdHJpbmddOiBzdHJpbmcgfSA9IHt9O1xuICBASW5wdXQoKSBuYW1lU3R5bGVzOiB7IFt0eXBlOiBzdHJpbmddOiBzdHJpbmcgfSA9IHt9O1xuXG4gIGFsdCA9ICcnO1xuICBiZ0NvbG9ycyA9IFtcbiAgICAncmVkJywgJ3BpbmsnLCAncHVycGxlJywgJ2RlZXAtcHVycGxlJywgJ2luZGlnbycsICdibHVlJyxcbiAgICAnbGlnaHQtYmx1ZScsICdjeWFuJywgJ3RlYWwnLCAnZ3JlZW4nLCAnbGlnaHQtZ3JlZW4nLFxuICAgICdsaW1lJywgJ2FtYmVyJywgJ29yYW5nZScsICdkZWVwLW9yYW5nZScsXG4gIF07XG4gIGNvbG9yQ3NzQ2xhc3MgPSAnJztcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLnNyYykge1xuICAgICAgdGhpcy5hbHQgPSB0aGlzLmNyZWF0ZUluaXRpYWxzKHRoaXMubmFtZSk7XG4gICAgICB0aGlzLmNvbG9yQ3NzQ2xhc3MgPSBgJHt0aGlzLmJhY2tncm91bmRUeXBlfS0ke3RoaXMuZ2V0QmFja2dyb3VuZCh0aGlzLm5hbWUpfWA7XG4gICAgfVxuICB9XG5cbiAgY3JlYXRlSW5pdGlhbHMobmFtZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gbmFtZVxuICAgICAgLnRyaW0oKVxuICAgICAgLnNwbGl0KCcgJylcbiAgICAgIC5zbGljZSgwLCAzKVxuICAgICAgLm1hcCh3b3JkID0+IHdvcmRbMF0pXG4gICAgICAuam9pbignJyk7XG4gIH1cblxuICBnZXRCYWNrZ3JvdW5kKG5hbWU6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuYmdDb2xvcnNbbmFtZS5sZW5ndGggJSB0aGlzLmJnQ29sb3JzLmxlbmd0aF07XG4gIH1cbn1cbiJdfQ==