@blackbaud/skyux
Version:
SKY UX built on Angular 2
97 lines • 4.04 kB
JavaScript
import { Component, ElementRef, Input } from '@angular/core';
import { SkyAvatarAdapterService } from './avatar-adapter.service';
var SkyAvatarInnerComponent = (function () {
function SkyAvatarInnerComponent(elementRef, adapter) {
this.elementRef = elementRef;
this.adapter = adapter;
}
Object.defineProperty(SkyAvatarInnerComponent.prototype, "src", {
get: function () {
return this._src;
},
set: function (value) {
this._src = value;
this.updateImage();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyAvatarInnerComponent.prototype, "name", {
get: function () {
return this._name;
},
set: function (value) {
this._name = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyAvatarInnerComponent.prototype, "initials", {
get: function () {
var initials;
if (this.name) {
var nameSplit = this.name.split(' ');
initials = getInitial(nameSplit[0]);
if (nameSplit.length > 1) {
initials += getInitial(nameSplit[nameSplit.length - 1]);
}
}
return initials;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyAvatarInnerComponent.prototype, "colorIndex", {
get: function () {
var name = this.name;
var colorIndex;
if (name) {
// Generate a unique-ish color based on the record name. This is deterministic
// so that a given name will always generate the same color.
var seed = name.charCodeAt(0) + name.charCodeAt(name.length - 1) + name.length;
colorIndex = Math.abs(seed % 6);
}
else {
colorIndex = 0;
}
return colorIndex;
},
enumerable: true,
configurable: true
});
SkyAvatarInnerComponent.prototype.ngAfterViewInit = function () {
this.viewInitialized = true;
this.updateImage();
};
SkyAvatarInnerComponent.prototype.ngOnDestroy = function () {
this.adapter.destroy();
};
SkyAvatarInnerComponent.prototype.updateImage = function () {
if (this.viewInitialized) {
this.adapter.updateImage(this.elementRef, this.src);
}
};
return SkyAvatarInnerComponent;
}());
export { SkyAvatarInnerComponent };
SkyAvatarInnerComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-avatar-inner',
template: "<div class=\"sky-avatar-wrapper\">\n <div class=\"sky-avatar-image\" [hidden]=\"!src\"></div>\n <div\n class=\"sky-avatar-initials\"\n [ngClass]=\"'sky-palette-multi-' + (colorIndex + 1)\"\n [hidden]=\"src || !name\"\n >\n <div class=\"sky-avatar-initials-inner\">\n {{initials}}\n </div>\n </div>\n</div>\n",
styles: [".sky-avatar-wrapper{height:104px;width:104px;border:solid 2px transparent;border-radius:50%;overflow:hidden;position:relative;top:-2px;left:-2px}.sky-avatar-image,.sky-avatar-initials{height:100px;width:100px;background-position:50%;background-size:cover;display:flex;align-items:center;justify-content:center}.sky-avatar-initials-inner{color:#fff;cursor:default;font-size:50px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n"],
providers: [SkyAvatarAdapterService]
},] },
];
/** @nocollapse */
SkyAvatarInnerComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: SkyAvatarAdapterService, },
]; };
SkyAvatarInnerComponent.propDecorators = {
'src': [{ type: Input },],
'name': [{ type: Input },],
};
function getInitial(name) {
return name.charAt(0).toUpperCase();
}
//# sourceMappingURL=avatar.inner.component.js.map